/* Grundgestaltung aller drei Magazine.
   Abgeleitet vom Creme-Look des Objekt-Hubs, Akzent von Blau auf Schwarz
   gedreht. Die Wirkung kommt aus Groesse, Weissraum und Gewichtskontrast:
   leichte grosse Ueberschriften in Playfair, weit gesperrte Kleinlabels in
   Montserrat, Haarlinien statt Kaesten. Border vor Shadow. */

/* schrift.css wird im <head> als eigener Link geladen, nicht per @import. */

:root{
  --bg:#FAF6F1;
  --bg-warm:#F4EDE4;
  --bg-tief:#F0E8DC;
  --karte:#FFFFFF;
  --ink:#14161D;          /* Akzent und Ueberschriften: Schwarz statt Blau */
  --body:#33363F;
  --muted:#7C8189;
  --linie:rgba(20,22,29,.14);
  --linie-stark:rgba(20,22,29,.30);
  --linie-karte:rgba(20,22,29,.20);
  --greige:#C0AC88;
  --warn:#8A2F24;
  --rand:clamp(20px,5vw,72px);
  --schrift:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --mass:68ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--schrift);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--ink);margin:0 0 .4em;line-height:1.18;letter-spacing:-.01em}
p{margin:0 0 1.1em}

.huelle{max-width:1180px;margin:0 auto;padding-inline:var(--rand)}
.huelle--schmal{max-width:760px}

.sprung{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:12px 18px;z-index:99}
.sprung:focus{left:0}

.label{
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);line-height:1.5;margin:0;
}
.kicker{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:16px;color:var(--greige);margin:0 0 .5em;letter-spacing:.01em;
}
.kicker--anzeige{color:var(--warn);font-style:normal;font-family:var(--schrift);
  font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}

/* Anzeigenmarke. Bewusst laut genug, um nicht uebersehen zu werden. */
.marke{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;
}
.marke--anzeige{color:var(--warn)}

/* ------------------------------------------------------------- Leiste */
.leiste{position:sticky;top:0;z-index:40;background:rgba(250,246,241,.92);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--linie)}
.leiste__inhalt{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap}

/* --------------------------------------------------- Drei-Striche-Menü */
.menuknopf{
  /* 44x44 ist die Untergrenze fuer eine Fingerflaeche. Der negative
     Aussenabstand holt das Symbol optisch zurueck an den Satzspiegel. */
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;margin-left:-12px;
  background:none;border:0;cursor:pointer;
  color:var(--muted);transition:color .18s ease;
}
.menuknopf:hover,.menuknopf[aria-expanded="true"]{color:var(--ink)}
.menuknopf__striche{display:flex;flex-direction:column;gap:4px;width:19px}
.menuknopf__striche span{
  display:block;height:1.5px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.menuknopf:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Geöffnet werden die drei Striche zum Kreuz. */
.menuknopf[aria-expanded="true"] .menuknopf__striche span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menuknopf[aria-expanded="true"] .menuknopf__striche span:nth-child(2){opacity:0}
.menuknopf[aria-expanded="true"] .menuknopf__striche span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.menuklappe{
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  background:var(--bg-warm);
  animation:menu-auf .18s ease-out;
}
@keyframes menu-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .menuklappe{animation:none}
  .menuknopf__striche span{transition:none}
}
.menuklappe__inhalt{
  display:grid;gap:clamp(24px,3vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  padding-block:clamp(26px,3vw,40px);
}
.menuklappe__spalte ul{list-style:none;margin:12px 0 0;padding:0}
.menuklappe__spalte li{margin-bottom:.55em}
.menuklappe__spalte a{
  font-family:var(--serif);font-size:19px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;
}
.menuklappe__spalte a:hover{border-bottom-color:var(--ink)}
.wortmarke{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);
  text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.navi{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}
.navi a{font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.navi a:hover{color:var(--ink)}
.navi a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.navi__anzeigen{color:var(--greige)}

/* Nur in der Vorschau. Liegt am unteren Rand und schiebt nichts, sonst
   sieht man in der Vorschau 37 Punkte weniger als auf der fertigen Seite. */
/* Nur in der Vorschau. Bewusst eine kleine Marke in der Ecke statt eines
   Balkens: ein Balken kostete entweder Hoehe, die die fertige Seite nicht hat,
   oder er legte sich ueber den Text. So zeigt die Vorschau genau das echte
   Bild und bleibt trotzdem als Vorschau erkennbar. */
.vorschaubanner{position:fixed;right:14px;bottom:14px;z-index:60;margin:0;
  background:var(--warn);color:#fff;padding:6px 11px;
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:.92;pointer-events:none}

/* ---------------------------------------------------------- Titelkopf */
.titelkopf{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--linie);
  text-align:center}
.titelkopf__name{font-size:clamp(38px,6.5vw,72px);margin:0 0 .18em}
.titelkopf__satz{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(16px,2vw,21px);color:var(--muted);margin:0}

.rubrikkopf{padding:clamp(40px,5vw,72px) 0 clamp(20px,3vw,36px);border-bottom:1px solid var(--linie)}
.rubrikkopf h1{font-size:clamp(30px,4.5vw,50px);margin:.25em 0 .3em}
.rubrikkopf__satz{max-width:var(--mass);color:var(--muted);margin:0}

/* ------------------------------------------------------------- Karten */
.raster{display:grid;gap:clamp(20px,2vw,28px);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  padding:clamp(36px,5vw,64px) 0;align-items:stretch}
/* Karten stehen auf eigenem Grund, sonst verschwimmen sie mit der Creme.
   Border vor Shadow, kein Radius: je groesser das Element, desto weniger Rundung. */
.karte{
  display:flex;flex-direction:column;gap:10px;
  background:var(--karte);border:1px solid var(--linie-karte);
  padding:clamp(22px,2vw,28px);height:100%;
  transition:border-color .18s ease;
}
.karte:hover{border-color:var(--linie-stark)}
.karte__kopf{display:flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}
.karte__titel{font-size:22px;margin:0;line-height:1.25}
.karte__titel a{text-decoration:none}
.karte__titel a:hover{text-decoration:underline;text-underline-offset:3px}
.karte__teaser{color:var(--body);margin:0;font-size:15.5px;line-height:1.65}
.karte__fuss{display:flex;gap:14px;margin:4px 0 0;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
/* Die Anzeige bleibt bewusst unterscheidbar: waermerer Grund, kraeftigere
   Linie, zusaetzlich die Marke im Kopf. Sonst waere sie von einem
   redaktionellen Beitrag optisch nicht zu trennen. */
.karte--anzeige{background:var(--bg-warm);border-color:var(--linie-stark)}
.karte--anzeige:hover{border-color:var(--warn)}

.anzeigenblock{border-top:1px solid var(--linie);padding-top:clamp(28px,4vw,44px)}
.anzeigenblock__kopf{display:flex;align-items:center;gap:12px;margin:0}
.anzeigenblock .raster{padding-top:22px}

.leer{color:var(--muted);padding:60px 0;text-align:center}

/* ------------------------------------------------------------ Beitrag */
.krume{display:flex;gap:9px;padding:clamp(28px,4vw,48px) 0 0;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.krume a{text-decoration:none}
.krume a:hover{color:var(--ink)}

.beitrag__kopf{padding:clamp(20px,3vw,34px) 0 clamp(24px,3vw,38px);border-bottom:1px solid var(--linie)}
.beitrag__kopf h1{font-size:clamp(30px,5vw,52px);margin:0 0 .35em}
.beitrag__teaser{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(17px,2.2vw,21px);color:var(--body);margin:0 0 1.1em;line-height:1.55}
.beitrag__meta{display:flex;gap:10px;margin:0;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap}
.beitrag__meta a{text-decoration:none;border-bottom:1px solid var(--linie-stark)}

/* Fliesstext. Spaltenmass rund 68 Zeichen, das liest sich am ruhigsten. */
.satz{max-width:var(--mass);padding:clamp(28px,4vw,48px) 0;font-size:18px;line-height:1.8}
.satz h2{font-size:clamp(23px,3vw,31px);margin:1.9em 0 .55em}
.satz h3{font-size:clamp(19px,2.2vw,23px);margin:1.6em 0 .45em}
.satz h2:first-child,.satz h3:first-child{margin-top:0}
.satz a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linie-stark)}
.satz a:hover{border-bottom-color:var(--ink)}
.satz ul,.satz ol{margin:0 0 1.3em;padding-left:1.3em}
.satz li{margin-bottom:.5em}
.satz strong{font-weight:600;color:var(--ink)}
.satz code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--bg-tief);padding:1px 5px}
.satz hr{border:0;border-top:1px solid var(--linie);margin:2.4em 0}
.satz blockquote{margin:1.9em 0;padding-left:26px;border-left:2px solid var(--ink)}
.satz blockquote p{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:1.16em;color:var(--ink);margin:0;line-height:1.5}
.satz figure{margin:2.2em 0}
.satz figcaption{font-size:13px;color:var(--muted);margin-top:9px;line-height:1.5}
.satz .fussnote{font-size:.7em;vertical-align:super;line-height:0}
.satz .fussnote a{border:0;font-weight:600}

.kasten{margin:2.2em 0;padding:22px 24px;border:1px solid var(--linie-stark);background:var(--bg-warm)}
.kasten p:last-child{margin-bottom:0}
.kasten__titel{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6em}
.kasten--zitat{border:0;border-left:2px solid var(--greige);background:none;padding:6px 0 6px 26px}

.faq{max-width:var(--mass);border-top:1px solid var(--linie);padding-top:clamp(24px,3vw,40px)}
.faq h2{font-size:clamp(21px,2.6vw,27px)}
.faq__paar{margin-bottom:1.6em}
.faq__paar h3{font-size:18px;margin-bottom:.3em}
.faq__paar p{margin:0}

.belege{max-width:var(--mass);border-top:1px solid var(--linie);padding:clamp(24px,3vw,36px) 0}
.belege__titel{font-family:var(--schrift);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1em}
.belege__liste{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.65;color:var(--muted)}
.belege__liste li{margin-bottom:.7em}
.belege__liste a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linie-stark)}
.belege__stand{font-size:.9em}
.belege__zurueck{text-decoration:none;border:0}

/* ------------------------------------------------------------ Anzeige */
.anzeigenband{background:var(--bg-warm);border-bottom:1px solid var(--linie-stark)}
.anzeigenband__inhalt{display:flex;align-items:center;gap:14px;padding-block:12px;flex-wrap:wrap}
.anzeigenband__satz{font-size:12.5px;font-weight:500;color:var(--warn);letter-spacing:.02em}
.beitrag--anzeige .satz a{border-bottom-color:var(--warn)}
.anzeigenfuss{max-width:var(--mass);margin:0 0 clamp(36px,5vw,64px);padding-top:20px;
  border-top:1px solid var(--linie-stark);font-size:13px;color:var(--muted);line-height:1.6}

.redaktionsliste{list-style:none;margin:0;padding:0}
.redaktionsliste li{border-top:1px solid var(--linie);padding:26px 0}
.redaktionsliste h2{font-size:24px;margin:0 0 .2em}
.redaktionsliste h2 a{text-decoration:none}
.redaktionsliste .satz{padding:12px 0 0;font-size:16px}

.blaettern{display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-top:1px solid var(--linie);padding:26px 0 clamp(48px,6vw,88px);flex-wrap:wrap}
.blaettern a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--linie-stark);padding-bottom:3px}
.blaettern__stand{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-inline:auto}

/* ---------------------------------------------------------------- Fuss */
.fuss{border-top:1px solid var(--linie);background:var(--bg-warm);margin-top:clamp(48px,7vw,104px)}
.fuss__inhalt{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  padding-block:clamp(40px,5vw,64px)}
.wortmarke--fuss{font-size:22px;margin:0 0 .3em}
.fuss__satz{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--muted);margin:0}
.fuss__liste{list-style:none;margin:12px 0 0;padding:0;font-size:14.5px}
.fuss__liste li{margin-bottom:.5em}
.fuss__liste a{text-decoration:none;color:var(--body)}
.fuss__liste a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fuss__zeile{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--linie);
  padding-block:20px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.fuss__zeile p{margin:0}

@media (max-width:760px){
  body{font-size:16px}
  .satz{font-size:17px}
  /* Die Rubriken laufen in EINER Zeile, sonst frisst die klebende Kopfzeile
     ein Drittel des Bildschirms. Seitlich scrollbar, Scrollbalken versteckt. */
  .leiste__inhalt{gap:10px;min-height:0;padding-block:9px;flex-wrap:nowrap}
  .wortmarke{font-size:16px}
  /* Der Knopf ersetzt die Rubrikenzeile, sonst frisst die klebende
     Kopfzeile ein Drittel des Bildschirms. */
  .navi{display:none}
  .menuknopf{margin-right:auto;margin-left:-12px}
  .wortmarke{margin-left:auto;margin-right:auto}
  .menuklappe__inhalt{grid-template-columns:1fr;gap:22px}
  .menuklappe__spalte a{font-size:18px}
}

@media print{
  .leiste,.fuss,.blaettern,.vorschaubanner{display:none}
  body{background:#fff}
}

/* -------------------------------------------------------- Titelbild */
.titelbild{margin:clamp(24px,3.5vw,40px) 0 0}
.titelbild img{width:100%}
.titelbild figcaption{font-size:12.5px;color:var(--muted);margin-top:9px;letter-spacing:.01em}

/* ---------------------------------------------------------- Übersicht
   Listenansicht statt Raster: Vorschaubild links, Text rechts. So liest
   man Magazine, und die Überschriften stehen alle im selben Grad. */
.liste{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);
  padding:clamp(32px,4vw,56px) 0}
/* Auf der Startseite sitzt die Reiterzeile unmittelbar darueber. Der volle
   Abstand doppelt sich dort und schiebt die erste Zeile unter die Falz. */
.seite-start .gespann__haupt > .liste{padding-top:clamp(16px,1.8vw,22px)}

.zeile{
  display:grid;grid-template-columns:clamp(200px,26%,300px) 1fr;
  gap:clamp(20px,2.4vw,34px);align-items:start;
  background:var(--karte);border:1px solid var(--linie-karte);
  padding:clamp(20px,2vw,26px);
  transition:border-color .18s ease;
}
.zeile:hover{border-color:var(--linie-stark)}
.zeile--ohne-bild{grid-template-columns:1fr}
.zeile__bild{display:block;overflow:hidden;background:var(--bg-tief)}
.zeile__bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.zeile__inhalt{display:flex;flex-direction:column;gap:9px;min-width:0}
.zeile__kopf{display:flex;align-items:center;gap:10px;margin:0;flex-wrap:wrap}
.zeile__titel{font-size:clamp(21px,2.3vw,27px);margin:0;line-height:1.24}
.zeile__titel a{text-decoration:none}
.zeile__titel a:hover{text-decoration:underline;text-underline-offset:3px}
.zeile__zeile{margin:0;font-size:12.5px;color:var(--muted);letter-spacing:.01em}
.zeile__teaser{margin:0;font-size:16px;line-height:1.65;max-width:62ch}
.zeile__fuss{display:flex;align-items:center;gap:16px;margin:3px 0 0;
  font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.zeile__fuss a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--linie-stark);padding-bottom:2px}
.zeile__fuss a:hover{border-bottom-color:var(--ink)}

.zeile--anzeige{background:var(--bg-warm);border-color:var(--linie-stark)}
.zeile--anzeige:hover{border-color:var(--warn)}
.zeile--anzeige .zeile__fuss a{border-bottom-color:var(--warn)}

.anzeigenblock .liste{padding-top:22px}

/* ------------------------------------------------- Weiterlesen und Autor */
.weiterlesen{max-width:var(--mass);border-top:1px solid var(--linie);
  padding:clamp(26px,3.5vw,42px) 0 clamp(40px,5vw,72px)}
.weiterlesen__titel{font-family:var(--schrift);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 1.3em}
.weiterlesen__liste{display:grid;gap:clamp(14px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kompakt{background:var(--karte);border:1px solid var(--linie-karte);padding:20px;
  display:flex;flex-direction:column;gap:7px;transition:border-color .18s ease}
.kompakt:hover{border-color:var(--linie-stark)}
.kompakt__titel{font-size:17px;margin:0;line-height:1.3}
.kompakt__titel a{text-decoration:none}
.kompakt__titel a:hover{text-decoration:underline;text-underline-offset:3px}
.kompakt__zeile{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

.autorenbox{max-width:var(--mass);background:var(--bg-warm);
  border:1px solid var(--linie-karte);padding:clamp(22px,2.4vw,30px)}
.autorenbox__name{font-size:21px;margin:.5em 0 .1em}
.autorenbox__name a{text-decoration:none}
.autorenbox__funktion{font-size:12.5px;color:var(--muted);margin:0}
.satz--box{padding:14px 0 0;font-size:15.5px;max-width:none}
.satz--box p:last-child{margin-bottom:0}

@media (max-width:760px){
  /* Kleines Vorschaubild neben der Ueberschrift statt darueber. So beginnt
     jede Zeile mit dem Text und die erste Ueberschrift steht ueber der Falz. */
  .zeile{grid-template-columns:clamp(86px,26vw,120px) 1fr;gap:14px;padding:16px;align-items:start}
  .zeile__bild img{aspect-ratio:1/1}
  .zeile__titel{font-size:19px;line-height:1.28}
  .zeile__teaser{font-size:15px;-webkit-line-clamp:3;display:-webkit-box;
    -webkit-box-orient:vertical;overflow:hidden}
  .zeile__zeile{font-size:11.5px}
  .weiterlesen__liste{grid-template-columns:1fr}
}
@media (max-width:420px){
  .zeile__teaser{display:none}
}

.titelbild figcaption .nachweis{color:var(--muted);opacity:.8}
.titelbild figcaption .nachweis::before{content:" \00b7  "}

/* ==================================================== Zweispaltiger Satz
   Hauptspalte und Seitenleiste nebeneinander, wie es Online-Magazine seit
   jeher machen. Einspaltig las sich die Seite wie ein Blog: nach dem letzten
   Beitrag war Schluss. Die Leiste haelt in jeder Scrollhoehe einen naechsten
   Beitrag, die Rubriken und den Anzeigenplatz bereit.

   Der Umbruch kommt bei 1000px, nicht erst bei 760px: darunter wird die
   Hauptspalte so schmal, dass die Uebersichtszeile ihr Bild nicht mehr
   sinnvoll unterbringt. */
.gespann{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(32px,4vw,64px);
  align-items:start;
}
.gespann__haupt{min-width:0}
/* Auf Beitragsseiten begrenzt schon .satz das Zeilenmass. Die Spalte selbst
   bekommt trotzdem eine Obergrenze, damit Bild und Kopfzeile nicht breiter
   laufen als der Text darunter. */
.gespann__haupt--satz{max-width:820px}

/* ------------------------------------------------------- Seitenleiste */
.leiste-seit{
  position:sticky;top:86px;
  display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);
  padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,72px);
}
.widget{background:var(--karte);border:1px solid var(--linie-karte);padding:22px}
.widget__titel{
  font-family:var(--schrift);font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--linie);
}
.widget__kopf{margin:0 0 12px}
.widget__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.widget__liste li+li{border-top:1px solid var(--linie);padding-top:16px}

/* Anriss: kleines Bild links, Text rechts. Dieselbe Ordnung wie die grosse
   Uebersichtszeile, nur enger. */
.anriss{display:grid;grid-template-columns:76px 1fr;gap:13px;align-items:start}
.anriss__bild{display:block;overflow:hidden;background:var(--bg-tief)}
.anriss__bild img{width:100%;aspect-ratio:1/1;object-fit:cover}
.anriss__inhalt{min-width:0;display:flex;flex-direction:column;gap:4px}
.anriss__titel{font-size:15px;line-height:1.32;margin:0}
.anriss__titel a{text-decoration:none}
.anriss__titel a:hover{text-decoration:underline;text-underline-offset:3px}
.anriss__zeile{margin:0;font-size:11px;letter-spacing:.04em;color:var(--muted)}
.anriss--anzeige{grid-template-columns:1fr;gap:12px}
.anriss__bild--breit img{aspect-ratio:3/2}

/* Der Anzeigenplatz traegt denselben waermeren Grund wie jede andere
   Anzeige im Heft. Gleiche Optik wie ein redaktioneller Kasten waere hier
   genau das Falsche. */
.widget--anzeige{background:var(--bg-warm);border-color:var(--linie-stark)}
.widget--hinweis{background:var(--bg-warm);border-color:var(--linie-karte);
  font-size:14px;line-height:1.62;color:var(--muted)}
.widget--hinweis p:last-child{margin-bottom:0}
.widget__mehr{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linie-stark);padding-bottom:3px}
.widget__mehr:hover{border-bottom-color:var(--ink)}
.widget__rubriken{list-style:none;margin:0;padding:0;font-size:15px}
.widget__rubriken li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--linie)}
.widget__rubriken li:last-child{border-bottom:0;padding-bottom:0}
.widget__rubriken a{text-decoration:none;color:var(--body)}
.widget__rubriken a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.widget__zahl{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------- Kopf und Filter */
/* Flacher Titelkopf: das Vorbild geht nach der Navigation sofort in die
   Liste. Ein halber Bildschirm Titelseite kostet genau die Beitraege, die
   den Leser halten sollen. */
/* Auf der Startseite steht direkt darunter der Aufmacher. Jeder Pixel hier
   schiebt die Liste weiter unter die Falz, deshalb flacher als sonst. */
.titelkopf--flach{padding:clamp(20px,2.4vw,32px) 0 clamp(12px,1.4vw,18px);border-bottom:0}
.titelkopf--flach .titelkopf__name{font-size:clamp(28px,3.6vw,40px);margin:0 0 .08em}
.titelkopf--flach .titelkopf__satz{font-size:clamp(13.5px,1.4vw,16px)}

.filterleiste{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding-block:13px;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.filterleiste label{color:var(--muted);cursor:pointer;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .15s ease}
.filterleiste label:hover{color:var(--ink)}
.filterleiste a{color:var(--muted);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent}
.filterleiste a:hover{color:var(--ink);border-bottom-color:var(--linie-stark)}
.filterleiste__aktiv,
.filterleiste [aria-current]{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
/* Die Auswahlfelder des Rubrikfilters. Nicht display:none, sonst waeren sie
   mit der Tastatur nicht mehr erreichbar. Und bewusst am Fensterrand
   befestigt statt im Textfluss: ein Klick auf die Beschriftung setzt den
   Fokus auf das Feld, und der Browser scrollt ein fokussiertes Feld ins Bild.
   Am Fensterrand ist es immer schon im Bild, also bleibt die Seite stehen. */
.filterziel{position:fixed;top:0;left:0;width:1px;height:1px;
  opacity:0;pointer-events:none;margin:0;padding:0;border:0}
.filtermehr{display:none;padding:0 0 clamp(20px,2.4vw,30px);color:var(--muted)}
.filterleer{padding:clamp(28px,4vw,52px) 0 0;color:var(--muted)}
.filtermehr a{color:var(--ink);text-decoration:none;font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--linie-stark);
  padding-bottom:2px}
.filtermehr a:hover{border-bottom-color:var(--ink)}
.filterleiste__archiv{margin-left:auto}

/* ----------------------------------------------------------- Teilen */
.teilen{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:var(--mass);border-top:1px solid var(--linie);
  padding:20px 0 4px;
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.teilen__wort{color:var(--muted)}
.teilen a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--linie-stark);
  padding-bottom:3px}
.teilen a:hover{border-bottom-color:var(--ink)}

/* -------------------------------------------------------- Blaettern */
.blaettern__zahlen{display:flex;align-items:center;gap:4px;margin-inline:auto;
  font-variant-numeric:tabular-nums}
.blaettern__zahlen a,.blaettern__hier{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding-inline:8px;
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  border:1px solid var(--linie);border-bottom-width:1px;text-decoration:none;
}
.blaettern__zahlen a:hover{border-color:var(--linie-stark);background:var(--karte)}
.blaettern__hier{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.blaettern__luecke{color:var(--muted);padding-inline:4px}
.blaettern__stand{margin-inline:0}

@media (max-width:1000px){
  /* Die Leiste rutscht unter den Text und hoert auf zu kleben. Gestapelt
     waere sticky sinnlos und wuerde am Seitenende haengen bleiben. */
  .gespann{grid-template-columns:1fr;gap:0}
  .leiste-seit{position:static;top:auto;padding-top:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
  .gespann__haupt--satz{max-width:none}
}

@media (max-width:760px){
  .filterleiste{gap:16px;font-size:11px;letter-spacing:.1em;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .filterleiste::-webkit-scrollbar{display:none}
  .filterleiste a,.filterleiste__aktiv{white-space:nowrap}
  .filterleiste__archiv{margin-left:0}
  .blaettern{justify-content:center}
  .blaettern__stand{width:100%;text-align:center;margin-inline:auto}
}

/* ------------------------------------------------------- Rückwärts-Pfeil */
.zurueckbalken{padding-top:clamp(18px,2.4vw,30px)}
.zurueck{
  display:inline-flex;align-items:center;gap:9px;
  min-height:32px;padding-right:4px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;
}
.zurueck__pfeil{font-size:15px;line-height:1;transition:transform .18s ease}
.zurueck:hover{color:var(--ink)}
.zurueck:hover .zurueck__pfeil{transform:translateX(-3px)}
.zurueck:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.zurueck__pfeil{transition:none}}

/* Statische Seiten laufen schmaler, der Pfeil muss mit ihnen fluchten. */
.seite-statisch .zurueckbalken .huelle{max-width:760px}

/* Die Seiten brachten oben schon eigenen Abstand mit, der entfaellt jetzt. */
.zurueckbalken + * .krume{padding-top:14px}
.zurueckbalken + * .titelkopf{padding-top:clamp(28px,4vw,56px)}
.zurueckbalken + * .rubrikkopf{padding-top:clamp(22px,3vw,44px)}

/* Aufmacher der Startseite.
   Hier steht bewusst NUR die Bildhoehe. Keine Karte, kein Rahmen, keine
   eigenen Schriftgroessen, keine eigenen Abstaende: das Bild laeuft randlos
   ueber die Spaltenbreite und der Text darunter nutzt die normale Typografie
   der Seite. Begrenzt ist allein die Hoehe, damit Bild und Text zusammen ohne
   Scrollen ins Fenster passen. */
.aufmacher__bild{display:block;line-height:0}
.aufmacher__bild img{width:100%;height:min(34vh,300px);object-fit:cover}
/* Auf dem Handy steht unter dem Bild mehr Text untereinander, dort muss es
   flacher sein. Wieder nur die Hoehe, sonst nichts. */
@media (max-width:760px){.aufmacher__bild img{height:min(20vh,180px)}}
/* Kleine Handys, etwa iPhone SE: dort steht viel Text untereinander. */
@media (max-width:760px) and (max-height:700px){.aufmacher__bild img{height:min(12vh,140px)}}



/* Flache Fenster, etwa Laptops mit 720 oder 640 Punkten Hoehe. Dort muss der
   Aufmacher weiter schrumpfen, sonst beginnt die Liste erst nach dem Scrollen. */
/* Sehr flache Fenster brauchen zusaetzlich einen kleineren Namenszug und
   einen kuerzeren Anriss. Die Bildhoehe regelt oben schon das vh-Mass. */
@media (max-height:720px){
  .titelkopf--flach{padding:clamp(12px,1.4vw,18px) 0 clamp(8px,1vw,12px)}
  .titelkopf--flach .titelkopf__name{font-size:clamp(24px,2.6vw,30px)}
}

/* Die beiden knappen Faelle: sehr flache Laptops und kleine Handys.
   Dort weicht zuerst der Anriss des Aufmachers, nicht die Ueberschrift. */
@media (min-width:761px) and (max-height:660px){
  .titelkopf--flach{padding:10px 0 6px}
  .seite-start .gespann__haupt > .liste{padding-top:12px}
  .filterleiste{padding-block:10px}
}
@media (max-width:760px) and (max-height:700px){
  .titelkopf--flach{padding:10px 0 6px}
  .titelkopf--flach .titelkopf__name{font-size:23px}
  .titelkopf--flach .titelkopf__satz{font-size:12.5px}
  .seite-start .gespann__haupt > .liste{padding-top:12px}
}

/* Tabellen im Beitrag. Die Briefings verlangen in jedem Analysebeitrag eine
   Vergleichstabelle, und die Kennzahlendateien rendern eine. Der Rahmen
   .tabelle scrollt waagerecht, damit eine sechsspaltige Tabelle auf dem
   Telefon nicht die ganze Seite breiter macht. */
.tabelle{overflow-x:auto;margin:1.75rem 0;max-width:var(--mass);
  -webkit-overflow-scrolling:touch}
/* Montserrat ist Pflicht: In einer Tabelle stehen fast nur Zahlen, und Ziffern
   gehoeren in der CI nie in die Serif. tabular-nums laesst die Spalten
   untereinander stehen. */
.tabelle table{border-collapse:collapse;width:100%;font-size:.95rem;
  font-family:var(--schrift);font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{
  padding:.6rem .8rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linie);color:var(--body)}
.tabelle th{
  font-weight:600;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid var(--linie-stark);white-space:nowrap}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle td:first-child{font-weight:500;color:var(--ink)}

/* Kurzantwort: die Leserfrage und ihre Antwort, direkt unter dem Teaser.
   Optisch abgesetzt, damit der Leser sie nicht fuer Fliesstext haelt, und
   weit oben, damit eine KI-Suche sie als Antwort auf die Frage nimmt. */
.kurzantwort{margin:1.75rem 0 0;padding:1.1rem 1.3rem;background:var(--karte);
  border-left:3px solid var(--ink);max-width:var(--mass)}
.kurzantwort__frage{font-family:var(--schrift);font-size:1rem;font-weight:600;
  line-height:1.35;margin:0 0 .5rem;color:var(--ink)}
.kurzantwort__text{margin:0;color:var(--body);font-size:1.02rem;line-height:1.6}