/* ==========================================================================
   Notizen — briggeler.ch/notizen
   Ruhige Lesetypografie im Look der Hauptseite.
   Light/Dark über dieselben CSS-Variablen wie index.html
   (--bg, --bg2, --ink, --soft, --line, --accent, --mono).
   ========================================================================== */
:root{
  --bg:#FFFFFF; --bg2:#FAFAFA; --ink:#0A0A0A; --mut:rgba(10,10,10,.72); --soft:rgba(10,10,10,.60);
  --line:#E7E7E7; --accent:#E56910; --accent-ink:#B4500A;
  --nav-bg:rgba(255,255,255,.88);
  --code-bg:#0E0E10; --code-ink:#EDEDEF;
  --kat-briefing:#B4500A; --kat-praxisnotiz:#8F6410; --kat-messung:#1E7A50;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.7,.24,1);
}
[data-theme="dark"]{
  --bg:#0E0E10; --bg2:#16161A; --ink:#F2F2F0; --mut:rgba(242,242,240,.74); --soft:rgba(242,242,240,.62);
  --line:#26262C; --accent-ink:#F2924A;
  --nav-bg:rgba(14,14,16,.85);
  --code-bg:#16161A; --code-ink:#EDEDEF;
  --kat-briefing:#F2924A; --kat-praxisnotiz:#E5A445; --kat-messung:#4FCF8F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0E10; --bg2:#16161A; --ink:#F2F2F0; --mut:rgba(242,242,240,.74); --soft:rgba(242,242,240,.62);
    --line:#26262C; --accent-ink:#F2924A;
    --nav-bg:rgba(14,14,16,.85);
    --code-bg:#16161A; --code-ink:#EDEDEF;
    --kat-briefing:#F2924A; --kat-praxisnotiz:#E5A445; --kat-messung:#4FCF8F;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
     letter-spacing:-.011em;line-height:1.5}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.micro{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}
.mono{font-family:var(--mono)}

/* ---------- Kategorie-Farben (theme-bewusst) ---------- */
.kat-briefing{color:var(--kat-briefing)}
.kat-praxisnotiz{color:var(--kat-praxisnotiz)}
.kat-messung{color:var(--kat-messung)}

/* ---------- Kopfzeile ---------- */
.bnav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);
      border-bottom:1px solid var(--line)}
/* 1180px = dieselbe Rahmung wie die Startseite. Vorher sass die Wortmarke auf
   Blog und Prüfseite deutlich weiter innen als auf der Startseite — beim Wechsel
   sprang der Kopf sichtbar. Der Inhalt darunter darf schmaler bleiben.
   Höhe 62px und Menüschrift 14px sind ebenfalls die Werte der Startseite; vorher
   waren es 60px/13,5px, der Kopf wirkte beim Wechsel eine Spur kleiner. */
.bnav .inner{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,44px);display:flex;
      align-items:center;justify-content:space-between;gap:14px;height:62px}
.bnav-brand{font-weight:600;font-size:15px;letter-spacing:-.02em;display:inline-flex;align-items:center;
      gap:9px;flex:none;white-space:nowrap}
.bnav-brand i{width:9px;height:9px;border-radius:3px;background:var(--accent);display:inline-block;flex:none}
/* Abstand, Polsterung und der mitwachsende Unterstrich sind Wort für Wort die
   Regeln der Startseite (index.html, «nav ul»). Bis 27.07.2026 standen hier
   20px statt 24px Abstand und 10px statt 12px Polsterung, und den Unterstrich
   gab es gar nicht: die aktive Seite war nur farblich markiert. Dadurch sassen
   die Menüpunkte um rund 20px versetzt und der Kopf sah beim Wechsel von der
   Startseite auf Notizen oder Prüfen sichtbar anders aus. */
.bnav ul{display:flex;gap:clamp(12px,2.2vw,24px);list-style:none;font-size:14px;align-items:center}
.bnav ul a{color:var(--mut);position:relative;padding:12px 2px;display:inline-block;
      transition:color .2s;white-space:nowrap}
.bnav ul a::after{content:"";position:absolute;left:0;bottom:6px;height:1.5px;width:100%;background:var(--ink);
      transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease)}
.bnav ul a:hover::after,.bnav ul a[aria-current]::after{transform:scaleX(1)}
.bnav ul a:hover,.bnav ul a[aria-current]{color:var(--ink)}
.bnav .bact{display:flex;align-items:center;gap:8px;flex:none}
.tgl{width:38px;height:38px;border-radius:99px;border:1px solid var(--line);background:none;color:var(--mut);
     display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none;
     transition:border-color .2s,color .2s}
.tgl:hover{color:var(--ink);border-color:var(--soft)}
.tgl svg{width:16px;height:16px;display:block}
/* Sprachknopf: gleiche Chip-Form wie der Theme-Knopf, nur mit Text statt Icon.
   Stand bis 27.07.2026 nur inline auf der Prüfseite — seither trägt ihn jede
   Unterseite, also gehört er hierher. */
.blang{width:auto;min-width:44px;padding:0 12px;font-family:var(--mono);font-size:11.5px;
     letter-spacing:.04em}
.ic-sun{display:none}
[data-theme="dark"] .ic-sun{display:block}
[data-theme="dark"] .ic-moon{display:none}

/* Menü-Knopf — erscheint nur, wenn die Zeile nicht mehr trägt */
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:none;
     color:var(--ink);cursor:pointer;padding:0;flex:none;align-items:center;justify-content:center;
     transition:border-color .2s}
.burger:hover{border-color:var(--soft)}
.burger span{display:block;position:relative;width:18px;height:11px}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;
     border-radius:2px;background:currentColor;transition:transform .3s var(--ease),width .3s var(--ease)}
.burger span::before{top:0}
.burger span::after{bottom:0;width:13px}
.burger[aria-expanded="true"] span::before{transform:translateY(4.7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{width:18px;transform:translateY(-4.7px) rotate(-45deg)}

@media(max-width:880px){
  .burger{display:inline-flex}
  .tgl{width:44px;height:44px}
  /* muss nach .tgl stehen, sonst schneidet die 44-px-Breite «DE» ab */
  .blang{width:auto;padding:0 13px}
  .bnav-brand{min-height:44px}
  .bnav nav{position:static}
  .bnav ul{position:fixed;left:0;right:0;top:62px;flex-direction:column;align-items:stretch;gap:0;
       background:var(--bg);border-bottom:1px solid var(--line);padding:8px clamp(20px,5vw,40px) 22px;
       box-shadow:0 24px 48px -24px rgba(0,0,0,.22);z-index:60;
       transform:translateY(-14px);opacity:0;pointer-events:none;visibility:hidden;
       transition:transform .34s var(--ease),opacity .26s var(--ease),visibility .34s}
  .bnav ul[data-open="1"]{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .bnav ul li{border-bottom:1px solid var(--line)}
  .bnav ul li:last-child{border-bottom:0}
  .bnav ul a{display:flex;align-items:center;min-height:52px;padding:4px 2px;font-size:17px;
       letter-spacing:-.015em;color:var(--ink);white-space:normal}
  /* Im Menüblatt wäre der Unterstrich ein Strich über die volle Breite. Die
     aktive Seite markiert hier der Punkt davor, wie auf der Startseite. */
  .bnav ul a::after{display:none}
  .bnav ul a[aria-current]{color:var(--accent-ink)}
  .bnav ul a[aria-current]::before{content:"";width:6px;height:6px;border-radius:99px;
       background:var(--accent);margin-right:10px;flex:none}
  body.mnav-offen{overflow:hidden}
  body.mnav-offen::after{content:"";position:fixed;inset:62px 0 0;background:rgba(0,0,0,.28);z-index:45}
}

/* ---------- Index ---------- */
.bindex{max-width:920px;margin:0 auto;padding:clamp(40px,7vw,72px) clamp(20px,5vw,40px) 40px}
.bhero{margin-bottom:clamp(32px,5vw,52px)}
.bhero h1{font-size:clamp(34px,6vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin:14px 0 16px}
.bhero .lede{font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:var(--mut);max-width:56ch}
.bhero .translink{display:inline-block;margin-top:14px;font-size:14px;color:var(--accent-ink);
      border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s}
.bhero .translink:hover{border-color:var(--accent-ink)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg2);
      display:flex;flex-direction:column;transition:border-color .2s,transform .3s var(--ease)}
.card:hover{border-color:var(--soft);transform:translateY(-2px)}
.card.gross{grid-column:1 / -1}
/* ---------- Beitrags-Cover: Foto + Marken-Grafik ----------
   Zwei Ebenen im Verhältnis 680:220. Das Foto bringt Licht und Tiefe, der
   Schleier hält den Text darauf lesbar, die Strichgrafik unterscheidet die
   Beiträge — ohne sie sähen alle Briefings gleich aus. Ken Burns läuft nur mit
   JavaScript und nur, wenn keine reduzierte Bewegung gewünscht ist. */
.cov{position:relative;display:block;aspect-ratio:680/220;overflow:hidden;background:#101014}
.cov-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);filter:saturate(.92)}
.cov-schleier{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(10,10,12,.86) 0%,rgba(10,10,12,.6) 45%,rgba(10,10,12,.42) 100%)}
.cov-gfx{position:absolute;inset:0;display:block;width:100%;height:100%}
html.js .cov-bild{animation:covDrift 34s ease-in-out infinite alternate;animation-play-state:paused}
html.js .cov-an .cov-bild{animation-play-state:running}
@keyframes covDrift{
  from{transform:scale(1.06) translate3d(1.2%,.7%,0)}
  to{transform:scale(1.14) translate3d(-1.2%,-.7%,0)}
}
.card:hover .cov-bild{filter:saturate(1)}
@media (prefers-reduced-motion:reduce){
  html.js .cov-bild{animation:none;transform:scale(1.06)}
}
/* Rückfall für Cover, die noch als reines SVG im Markup stehen */
.ccover>svg,.acover>svg{display:block;width:100%;height:auto}

/* Übersichts-Kopf zweispaltig (27.07.): Text links, Kino-Panel rechts.
   Unter 900px fällt das Panel weg statt zu schrumpfen — auf dem Telefon
   zählen die Beiträge, nicht das Motiv. */
.bhero-kino{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4.5vw,56px);align-items:center}
.bhero-kino .lede{max-width:46ch}
.bhero-buehne{margin:0;border-radius:14px;aspect-ratio:4/3;border:1px solid var(--line)}
.bhero-buehne .cov-schleier{
  background:linear-gradient(115deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.24) 55%,rgba(10,10,12,.5) 100%)}
@media(max-width:900px){
  .bhero-kino{grid-template-columns:1fr}
  .bhero-buehne{display:none}
}
.cbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.cbody h2{font-size:clamp(19px,2.4vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.22}
.card.gross .cbody h2{font-size:clamp(22px,3vw,30px)}
.cteaser{font-size:14.5px;line-height:1.55;color:var(--mut)}
.cmore{margin-top:auto;padding-top:6px;font-size:13.5px;color:var(--accent-ink);display:inline-flex;gap:6px;align-items:center}
.cmore .arr{transition:transform .25s var(--ease)}
.card:hover .cmore .arr{transform:translateX(4px)}

/* ---------- Artikel ---------- */
.artikel{max-width:760px;margin:0 auto;padding:clamp(36px,6vw,60px) clamp(20px,5vw,40px) 40px}
.acover{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:clamp(24px,4vw,36px)}
.acover svg{display:block;width:100%;height:auto}
.artikel h1{font-size:clamp(30px,5vw,46px);font-weight:600;line-height:1.06;letter-spacing:-.03em;margin:12px 0 14px}
.artikel .lede{font-size:clamp(16.5px,1.9vw,19px);line-height:1.62;color:var(--mut);margin-bottom:26px;max-width:60ch}

.prosa{font-size:16.5px;line-height:1.72;color:var(--ink)}
.prosa p{margin:0 0 1.15em;color:var(--mut);max-width:66ch}
.prosa h2{font-size:clamp(21px,2.6vw,26px);font-weight:600;letter-spacing:-.02em;margin:1.7em 0 .55em;line-height:1.2}
.prosa h3{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:1.4em 0 .45em}
.prosa ul,.prosa ol{margin:0 0 1.15em;padding-left:1.25em;color:var(--mut);max-width:64ch}
.prosa li{margin-bottom:.45em;line-height:1.6}
.prosa li::marker{color:var(--accent-ink);font-family:var(--mono);font-size:.9em}
.prosa a{color:var(--accent-ink);border-bottom:1px solid var(--line);transition:border-color .2s}
.prosa a:hover{border-color:var(--accent-ink)}
.prosa strong{color:var(--ink);font-weight:600}
.prosa blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 18px;margin:0 0 1.15em}
.prosa blockquote p{color:var(--ink)}
.prosa hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prosa code{font-family:var(--mono);font-size:.86em;background:var(--bg2);border:1px solid var(--line);
      border-radius:5px;padding:1px 5px}
.prosa pre{background:var(--code-bg);color:var(--code-ink);border-radius:12px;border:1px solid var(--line);
      padding:16px 18px;overflow-x:auto;margin:0 0 1.25em;font-size:12.5px;line-height:1.65}
.prosa pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}

/* ---------- Quellen ---------- */
.quellen{margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--line);padding-top:18px}
.quellen ul{list-style:none;margin-top:10px}
.quellen li{font-size:14px;margin-bottom:4px;line-height:1.5}
.quellen a{display:inline-block;padding:6px 0}   /* grössere Trefferfläche auf Touch */
.quellen a{color:var(--accent-ink);border-bottom:1px solid var(--line)}
.quellen a:hover{border-color:var(--accent-ink)}
.qhost{font-family:var(--mono);font-size:11px;color:var(--soft);margin-left:8px}

/* ---------- Sprachhinweis ----------
   Steht nur in der englischen Ansicht: die Beiträge selbst bleiben deutsch,
   weil Hermes sie werktags neu schreibt. In der deutschen Ansicht ist das
   Element leer und verschwindet dadurch ganz. */
.bsprachhinweis{margin:0 0 22px;padding:11px 14px;border-left:3px solid var(--accent);
      background:var(--bg2);border-radius:0 8px 8px 0;
      font-size:13.5px;line-height:1.55;color:var(--soft);max-width:60ch}
.bsprachhinweis:empty{display:none}
.bhero .bsprachhinweis{margin-top:20px;margin-bottom:0}

/* ---------- Deklaration (feste Zeile je Format) ---------- */
.deklaration{margin-top:clamp(28px,4vw,40px);border:1px solid var(--line);border-radius:12px;
      background:var(--bg2);padding:16px 18px}
.deklaration p{font-size:13.5px;line-height:1.6;color:var(--soft);margin:0}
.deklaration p+p{margin-top:8px}
.deklaration a{color:var(--accent-ink);border-bottom:1px solid var(--line)}
.deklaration a:hover{border-color:var(--accent-ink)}

/* ---------- Artikel-Navigation ---------- */
.anav{display:flex;justify-content:space-between;gap:12px;margin-top:clamp(28px,4vw,40px);
      border-top:1px solid var(--line);padding-top:20px;flex-wrap:wrap}
.anav .cta{font-size:14px;color:var(--mut);border:1px solid var(--line);border-radius:99px;
      padding:8px 16px;transition:color .2s,border-color .2s}
.anav .cta:hover{color:var(--ink);border-color:var(--soft)}

/* ---------- Fusszeile ---------- */
.bfoot{border-top:1px solid var(--line);margin-top:clamp(36px,6vw,60px)}
.bfoot .inner{max-width:1180px;margin:0 auto;padding:22px clamp(20px,5vw,44px);display:flex;
      justify-content:space-between;gap:14px;flex-wrap:wrap}
.bfoot p{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--soft)}
.bfoot a{border-bottom:1px solid var(--line)}
.bfoot a:hover{color:var(--ink)}
/* Tap-Grösse im Fuss (27.07.2026). Die Links waren 15 px hoch und stehen mit
   « · » in einer Zeile — auf dem Telefon lagen die Trefferflächen praktisch
   aneinander. Mit den drei Themenseiten sind es sechs Links in dieser Zeile
   geworden, deshalb hier korrigiert und nicht nur auf den neuen Seiten.
   Nur unter 700 px: am Zeiger ist 15 px unproblematisch, und der Fuss soll auf
   dem Schreibtisch nicht auseinanderlaufen. */
@media (max-width:700px){
  .bfoot p{line-height:1.9}
  .bfoot p a{display:inline-flex;align-items:center;min-height:44px;line-height:1.1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001s!important;animation:none!important}
}

/* Markenhinweis im Fuss (27.07.). Die Beiträge nennen Produkte beim Namen —
   nominative Nutzung, gleiche Fassung wie auf der Startseite. Eigene Regel statt
   der .fmarken-Regel von dort: der Blog-Fuss ist hell, jene ist auf Weiss auf
   dunklem Grund ausgelegt. */
.bfoot .fmarken{flex-basis:100%;margin-top:4px;max-width:76ch;
  font-size:11.5px;line-height:1.55;color:var(--soft)}