/* Schriften — Prosa-Schicht über tokens.css.
   Gleiche Sprache wie die Startseite: Hairlines, scharfe Kanten, Korrekturrot.
   Dark Mode kommt aus tokens.css, hier keine eigenen Farben. */

*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  overflow-x:clip;
  background:var(--color-paper);
  color:var(--color-ink);
  font:400 var(--text-body)/1.7 var(--font-body);
  padding-inline:max(var(--page-gutter), env(safe-area-inset-left));
  padding-bottom:max(0px, env(safe-area-inset-bottom));
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.14;letter-spacing:-0.015em;hyphens:auto;overflow-wrap:anywhere;min-width:0}
a{color:inherit}
ul,ol{padding-left:0}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin-inline:auto}
.muted{color:var(--color-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* Kopf */
.nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);padding-block:var(--space-lg) var(--space-md);border-bottom:var(--rule-strong)}
.wordmark{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;text-decoration:none;letter-spacing:-0.01em}
.nav .telplain{font-weight:600;white-space:nowrap;text-decoration:none;font-size:var(--text-base);border-bottom:2px solid var(--color-accent);padding-bottom:2px}
.nav .telplain:hover,.nav .telplain:active{color:var(--color-accent)}
.crumb{padding-block:var(--space-sm);font-size:var(--text-sm);color:var(--color-neutral)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--color-rule);padding-bottom:1px}
.crumb a:hover{color:var(--color-accent);border-color:var(--color-accent)}

/* Titelblock */
.masthead{padding-block:var(--space-2xl) var(--space-xl);max-width:34rem}
.masthead.wide{max-width:46rem}
.kicker{font-size:var(--text-sm);color:var(--color-neutral)}
.kicker span + span::before{content:"·";color:var(--color-rule);margin-inline:var(--space-sm)}
.masthead h1{font-size:var(--text-display);margin-top:var(--space-sm)}
.masthead .lede{margin-top:var(--space-lg);font-size:var(--text-md);color:var(--color-muted)}

/* Aufmacher */
.opener{margin-block:var(--space-lg) var(--space-2xl)}
.opener img{display:block;width:100%;height:auto;border:var(--rule-hair)}
figcaption{margin-top:var(--space-sm);font-size:var(--text-sm);color:var(--color-neutral);max-width:60ch}
figcaption a{color:inherit;text-underline-offset:2px}
figcaption a:hover{color:var(--color-accent)}

/* Fließtext */
.article{max-width:38rem;margin-inline:auto}
.article section{padding-block:var(--space-xl)}
.article section + section{border-top:var(--rule-hair)}
.article h2{font-size:var(--text-xl);margin-bottom:var(--space-md);max-width:20ch}
.article h3{font-size:var(--text-md);margin-top:var(--space-lg);margin-bottom:var(--space-xs)}
.article p{margin-block:var(--space-md)}
.article p:first-of-type{margin-top:0}
.article a{text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--color-rule)}
.article a:hover{color:var(--color-accent);text-decoration-color:var(--color-accent)}
.article strong{font-weight:600}

/* Der eine Vorspann-Absatz nach der Überschrift */
.article .first{font-size:var(--text-md);line-height:1.6}

/* Blockzitat */
blockquote{margin-block:var(--space-xl);padding-left:var(--space-lg);border-left:2px solid var(--color-accent)}
blockquote p{font-family:var(--font-display);font-size:var(--text-md);line-height:1.4;margin:0}
blockquote cite{display:block;margin-top:var(--space-sm);font-style:normal;font-size:var(--text-sm);color:var(--color-neutral)}

/* Merksatz aus der Norm, ruhiger als ein Zitat */
.note{margin-block:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--color-paper-2);border-left:2px solid var(--color-rule);font-size:var(--text-base)}
.note b{font-weight:600}

/* Sequenzliste, die einzige Liste im Text */
.steps{list-style:none;counter-reset:s;margin-block:var(--space-lg)}
.steps li{counter-increment:s;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-md);border-bottom:var(--rule-hair)}
.steps li::before{content:counter(s);font-family:var(--font-outlier);font-size:var(--text-sm);color:var(--color-accent);padding-top:4px}

/* Grafiken: dürfen über die Textspalte hinaus */
.figure{margin-block:var(--space-2xl);margin-inline:calc(-1 * var(--bleed, 0rem));max-width:calc(100% + 2 * var(--bleed, 0rem))}
.figure .frame{border:var(--rule-hair);background:var(--color-paper-2);padding:var(--space-lg) var(--space-md)}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin-top:var(--space-sm)}
@media (min-width: 62rem){.figure{--bleed:5rem}}

/* Schlagzeilen als Kacheln, kein Screenshot */
.clips{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));border-top:var(--rule-strong);border-left:var(--rule-hair);margin-block:var(--space-xl);margin-inline:calc(-1 * var(--bleed, 0rem));max-width:calc(100% + 2 * var(--bleed, 0rem))}
@media (min-width: 62rem){.clips{--bleed:5rem}}
.clips a{display:block;padding:var(--space-md);border-right:var(--rule-hair);border-bottom:var(--rule-hair);text-decoration:none}
.clips a:hover{background:var(--color-paper-2)}
.clips .src{font-size:var(--text-sm);color:var(--color-neutral);display:flex;justify-content:space-between;gap:var(--space-sm)}
.clips .head{font-family:var(--font-display);font-size:var(--text-base);font-weight:600;margin-top:var(--space-xs);line-height:1.25}
.clips a:hover .head{color:var(--color-accent)}

/* Quellen */
.sources{list-style:none;font-size:var(--text-sm);color:var(--color-neutral)}
.sources li{padding-block:var(--space-sm);border-bottom:var(--rule-hair)}
.sources a{text-underline-offset:2px}
.sources a:hover{color:var(--color-accent)}

/* Autorzeile und Anruf */
.byline{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:var(--rule-strong);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-lg);align-items:start}
.byline img{width:84px;height:auto;border:1px solid var(--color-hair)}
.byline p{font-size:var(--text-base);color:var(--color-muted);max-width:48ch}
.byline .tel{font-family:var(--font-outlier);font-weight:500;white-space:nowrap;text-decoration:none;border-bottom:2px solid var(--color-accent);padding-bottom:1px}
.byline .tel:hover{color:var(--color-accent)}

/* Eigenes Produkt, als solches gekennzeichnet */
.produkt{margin-block:var(--space-xl);border:var(--rule-hair);background:var(--color-paper-2);padding:var(--space-lg)}
.produkt .kick{font-size:var(--text-sm);color:var(--color-neutral)}
.produkt h3{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;margin-top:var(--space-2xs);letter-spacing:-0.015em}
.produkt p{margin-top:var(--space-sm);font-size:var(--text-base);color:var(--color-muted)}
.produkt .acts{margin-top:var(--space-lg);display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);align-items:center}
.produkt .go{font-weight:600;text-decoration:none;border-bottom:2px solid var(--color-accent);padding-bottom:2px;white-space:nowrap}
.produkt .go:hover{color:var(--color-accent)}
.produkt .neben{font-size:var(--text-sm);color:var(--color-neutral)}
.produkt img{display:block;width:100%;height:auto;border:var(--rule-hair);background:var(--color-paper);margin-bottom:var(--space-lg)}

/* Index */
.postlist{list-style:none;border-top:var(--rule-strong)}
.postlist li{border-bottom:var(--rule-hair)}
.postlist a{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--space-lg);padding-block:var(--space-lg);text-decoration:none;align-items:baseline}
.postlist a:hover{background:var(--color-paper-2)}
.postlist .date{font-size:var(--text-sm);color:var(--color-neutral);font-variant-numeric:tabular-nums;padding-top:4px}
.postlist h2{font-size:var(--text-lg);max-width:28ch}
.postlist a:hover h2{color:var(--color-accent)}
.postlist .teaser{margin-top:var(--space-xs);color:var(--color-muted);max-width:56ch;font-size:var(--text-base)}

/* Footer */
.colophon{border-top:var(--rule-hair);margin-top:var(--space-2xl);padding-block:var(--space-lg) var(--space-2xl);font-size:var(--text-sm);color:var(--color-neutral);max-width:80ch}
.colophon a{color:inherit}
.colophon a:hover{color:var(--color-accent)}

@media (max-width: 46rem){
  .figure .frame{overflow-x:auto;padding-inline:var(--space-sm)}
  .figure svg{min-width:30rem}
  .postlist a{grid-template-columns:1fr;gap:var(--space-2xs)}
  .byline{grid-template-columns:1fr}
  .byline img{width:72px}
  .article section{padding-block:var(--space-lg)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:150ms!important;transition-duration:120ms!important}
  html{scroll-behavior:auto}
}