/* ==========================================================================
   redesign.css — sodbrennen-wissen.de
   --------------------------------------------------------------------------
   Einziges Stylesheet der Seite. Uebernommen aus dem Claude-Design-Projekt
   „sodbrennen-wissen.de Redesign" (design-sync/redesign/redesign.css) und fuer
   den Livebetrieb angepasst:

   - Schrift selbst gehostet statt von Google Fonts (die Seite bindet bewusst
     nichts Fremdes ein). Eine variable Datei je Subset deckt alle Gewichte ab.
   - 'IBM Plex Mono' war nur fuer Zahlen und Platzhalterkaesten gesetzt; das
     uebernimmt jetzt der Ziffernsatz der Grundschrift (tabular-nums). Spart
     eine weitere Schriftdatei.

   Aenderungen bitte im Design-Projekt nachziehen, damit Entwurf und Umsetzung
   nicht auseinanderlaufen.
   ========================================================================== */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* sodbrennen-wissen.de — Redesign, Richtung B "Klar & klinisch"
   Uebertragbar auf die bestehende statische Seite: nur CSS, keine Framework-Abhaengigkeit. */
:root{
  --blau:#2b749d;--blau-d:#266589;--blau-x:#1d5375;--blau-soft:#f2f6f9;--blau-line:#c9dde9;
  --navy:#2c3046;--navy-2:#3e435e;
  --text:#26282d;--text-2:#4e545c;--mute:#6b7078;
  --bg:#fff;--line:#dfe6eb;--line-2:#eef2f5;
  --warn:#b23b3b;
  --r:10px;--r-l:14px;
  --w:1440px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',Arial,Verdana,sans-serif;font-size:17px;line-height:1.62;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{color:var(--navy);line-height:1.24;font-weight:600;letter-spacing:-.01em}
a{color:var(--blau);text-decoration:none}
a:hover{color:var(--blau-d);text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
.ill{background:var(--blau-soft);background-image:repeating-linear-gradient(135deg,rgba(43,116,157,.09) 0 5px,transparent 5px 13px);display:flex;align-items:center;justify-content:center;text-align:center;font-variant-numeric:tabular-nums;font-size:11px;line-height:1.5;color:#7e93a1;padding:12px}

/* ---------- Header ---------- */
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px}
.top .logo{height:48px;width:auto;justify-self:start}
.search{order:3;justify-self:end;display:flex;border:2px solid var(--blau);border-radius:8px;overflow:hidden;width:100%;background:#fff}
.searchtoggle{display:none;order:2;justify-self:end;align-items:center;justify-content:center;background:none;color:var(--blau);border:0;border-radius:8px;padding:10px;cursor:pointer;line-height:0}
.searchtoggle:hover{color:var(--blau-d)}
.searchtoggle svg{width:24px;height:24px;flex:none}
.search input{flex:1;border:0;font:inherit;font-size:15px;padding:10px 14px;outline:none;color:var(--text);min-width:0}
.search button{background:var(--blau);color:#fff;border:0;font:inherit;font-size:14px;font-weight:600;padding:0 20px;cursor:pointer}
.search button:hover{background:var(--blau-d)}
nav.main{background:var(--blau)}
nav.main .wrap{display:flex;align-items:stretch;padding:0 32px}
nav.main a{color:#fff;font-size:16px;font-weight:500;padding:14px 24px}
nav.main a:hover{background:var(--blau-d);text-decoration:none}
nav.main a.on{background:#fff;color:var(--navy);font-weight:600;box-shadow:inset 0 -3px 0 var(--navy)}
nav.main a.on:hover{background:#fff;color:var(--blau-d)}
nav.main .quick{margin-left:auto;display:flex;align-items:center;padding:0 0 0 24px;text-decoration:none;flex:0 1 auto;min-width:0;height:0;align-self:center;overflow:visible}
nav.main .quick img{display:block;height:46px;width:auto;max-width:100%;object-fit:contain}
nav.main .quick:hover{opacity:.82}

/* ---------- Breadcrumb ---------- */
.crumb{background:var(--blau-soft);border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;padding-bottom:10px;font-size:13.5px;color:var(--mute)}
.crumb a{color:var(--blau-x);font-weight:500}.crumb span.sep{color:#a9bcc8}
.crumb span.here{color:var(--navy);font-weight:600}

/* ---------- Sektionen / Kopfzeilen ---------- */

.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:2px solid var(--navy);padding-bottom:12px;margin-bottom:28px}
.sechead h2{font-size:26px}
.sechead p{font-size:14.5px;color:var(--mute)}
.sechead a{font-size:14.5px;font-weight:500;white-space:nowrap}
h2.sub{font-size:22px;margin:36px 0 14px}
h3.sub{font-size:19px;margin:26px 0 8px}

/* ---------- Rubrik-Karten (Startseite) ---------- */
.rub{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:box-shadow .15s,border-color .15s}
.card:hover{border-color:var(--blau-line);box-shadow:0 10px 30px -18px rgba(28,64,89,.45)}
.card .head{background:var(--navy);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:14px}
.card .head .ico{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:9px;color:#a9b1c4;flex:none}
.card .head h3{color:#fff;font-size:21px}
.card .head small{display:block;font-size:12.5px;color:#a7adbd;font-weight:400;letter-spacing:0}
.card ul{list-style:none;padding:8px 22px 18px}
.card li a{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line-2)}
.card li:last-child a{border-bottom:0}
.card li a:hover{text-decoration:none;color:var(--blau-d)}
.card li a em{font-style:normal;color:#a8b4bd;font-size:13px;font-weight:400}

/* ---------- Aspekt-Achse: Kacheln + Reiter ---------- */
.aspects{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.aspect{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:border-color .15s,box-shadow .15s}
.aspect:hover{border-color:var(--blau-line);box-shadow:0 10px 26px -18px rgba(28,64,89,.4)}
.aspect .ill{height:112px}
.aspect .b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.aspect h4{font-size:17.5px}
.aspect h4 a{color:var(--navy)}
.aspect h4 a:hover{color:var(--blau-d);text-decoration:none}
.aspect p{font-size:14px;color:var(--mute);line-height:1.45}
.aspect .n{margin-top:auto;font-size:12.5px;color:#93a3ad;font-variant-numeric:tabular-nums}
.aspect.on{border-color:var(--blau);border-width:2px}

.axis{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:0}
.axis a{font-size:15.5px;font-weight:500;padding:11px 16px;border-radius:8px 8px 0 0;color:var(--blau-x);border:1px solid transparent;border-bottom:0;position:relative;top:1px}
.axis a:hover{background:var(--blau-soft);text-decoration:none}
.axis a.on{background:#fff;border-color:var(--line);color:var(--navy);font-weight:600}

/* ---------- Artikel-Layout ---------- */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr) 296px;gap:40px;padding:36px 0 60px}
/*  Der Behaelter der Seitenspalten wird auf Desktop aufgeloest, damit seine
    Kinder selbst Rasterfelder werden — der Artikel steht im Quelltext zuerst,
    liegt aber in der mittleren Spalte.  */
.layout>.rail{display:contents}
.layout>main{grid-column:2;grid-row:1}
.layout>.rail>.side.left{grid-column:1;grid-row:1}
.layout>.rail>.side:not(.left){grid-column:3;grid-row:1}
.side{position:sticky;top:20px;align-self:start}
.subnav{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.subnav .t{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:14px 18px 10px}
.subnav a{display:flex;justify-content:space-between;gap:10px;padding:11px 18px;font-size:16px;color:var(--blau-x);font-weight:500;border-left:3px solid transparent}
.subnav a:hover{background:var(--blau-soft);text-decoration:none}
.subnav a.on{background:var(--blau);border-left-color:var(--blau-x);color:#fff;font-weight:600}
.subnav a.on:visited{color:#fff}
.subnav a.on:hover{background:var(--blau-d);text-decoration:none}
.subnav a.on em{color:#cfe4ef}
.subnav a em{font-style:normal;font-size:12.5px;color:#9aa8b1;font-variant-numeric:tabular-nums}

article h1{font-size:38px;margin-bottom:16px;letter-spacing:-.02em}
article .lede{font-size:19px;color:var(--text-2);line-height:1.58;margin-bottom:22px;text-wrap:pretty}
article p{margin-bottom:16px}
article .hero-ill{height:220px;border-radius:12px;margin-bottom:26px}
article ul.body,article ol.body{margin:0 0 18px 22px}
article ul.body li,article ol.body li{margin-bottom:6px}
sup a{font-size:12px;font-weight:600;text-decoration:none;padding:0 1px}
.meta-line{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--mute);padding:14px 0 0;border-top:1px solid var(--line);margin-top:8px}
.meta-line b{color:var(--text-2);font-weight:600}
.chip-verify{display:inline-flex;align-items:center;gap:7px;background:var(--blau-soft);border:1px solid var(--blau-line);color:var(--blau-x);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600}

/* ---------- Varianten-Matrix ("Ordnen Sie sich ein") ---------- */
.matrix{border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;background:#fff;margin:34px 0}
.matrix .mh{background:var(--blau-soft);border-bottom:1px solid var(--line);padding:18px 22px}
.matrix .mh h3{font-size:19px;margin:0}
.matrix .mh p{font-size:14px;color:var(--text-2);margin:0}
.matrix .mh p b{color:var(--blau-x)}
.matrix .tabs{display:flex;align-items:stretch;gap:0;padding:0;background:var(--blau-soft);border-bottom:1px solid var(--line)}
.matrix .tabs button{flex:1;font:inherit;font-size:15.5px;font-weight:600;color:var(--blau-x);background:transparent;border:0;border-right:1px solid var(--line);border-bottom:3px solid transparent;padding:14px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .12s,color .12s}
.matrix .tabs button:last-child{border-right:0}
.matrix .tabs button em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--mute);background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 7px}
.matrix .tabs button:hover{background:#e6eff5;color:var(--navy)}
.matrix .tabs button[aria-selected="true"]{background:#fff;color:var(--navy);border-bottom-color:var(--blau);margin-bottom:-1px;padding-bottom:15px}
.matrix .tabs button[aria-selected="true"] em{background:var(--blau);border-color:var(--blau);color:#fff}
/* Panes sind ohne JS ALLE sichtbar -> Suchmaschinen lesen und folgen jedem Variantenlink.
   Erst .matrix.js (per Script gesetzt) schaltet auf Filteransicht um. */
.matrix .pane{padding:16px 22px 20px;display:block}
.matrix .pane+.pane{border-top:1px solid var(--line-2)}
.matrix.js .pane{display:none;border-top:0}
.matrix.js .pane.on{display:block}
.matrix .pl{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;font-size:14.5px;font-weight:600;color:var(--navy);margin:0 0 12px}
.matrix .pl em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--mute)}
.matrix .pane .row{display:flex;flex-wrap:wrap;gap:8px}
.matrix .pane a{border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-size:15px;font-weight:500;color:var(--blau-x);background:#fff}
.matrix .pane a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.matrix .foot{border-top:1px solid var(--line-2);padding:12px 22px;font-size:13.5px;color:var(--mute)}

/* ---------- Detail-Kacheln (Ebene 4) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tile{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:block}
.tile:hover{border-color:var(--blau);text-decoration:none;box-shadow:0 8px 22px -16px rgba(28,64,89,.5)}
.tile .ill{height:78px}
.tile span{display:block;padding:10px 12px;font-size:15.5px;font-weight:500;color:var(--blau-x)}
.faq{list-style:none;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq li+li{border-top:1px solid var(--line-2)}
.faq a{display:flex;justify-content:space-between;gap:12px;padding:13px 18px;font-size:16px;font-weight:500;color:var(--blau-x)}
.faq a:hover{background:var(--blau-soft);text-decoration:none}
.faq a:after{content:"›";color:#a8b4bd;font-weight:600}

/* ---------- Sidebar-Widgets ---------- */
.w{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:20px;overflow:hidden}
.w .wt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 12px;border-bottom:1px solid var(--line-2)}
.w .wt h4{font-size:15.5px;line-height:1.3}
.w .wt .tag{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--blau);border-radius:999px;padding:3px 9px;flex:none}
.w .wb{padding:16px 18px}
.redak .row{display:flex;align-items:center;margin-bottom:12px}
.redak .ava{width:44px;height:44px;border-radius:50%;background:#dde7ee;border:2px solid #fff;margin-right:-12px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:8px;color:#8fa3b0;flex:none}
.redak .ava.more{background:var(--blau);color:#fff;font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:700;margin-right:0}
.redak p{font-size:14px;color:var(--text-2);line-height:1.5}
.redak details{margin-top:12px;border-top:1px solid var(--line-2);padding-top:10px}
.redak summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--blau-x);list-style:none}
.redak summary::-webkit-details-marker{display:none}
.redak summary:before{content:"+ ";font-weight:700}
.redak details[open] summary:before{content:"– "}
.redak ul{list-style:none;margin-top:10px;display:grid;gap:8px}
.redak ul li{display:flex;align-items:center;gap:10px;font-size:14px}
.redak ul li .ava{width:34px;height:34px;margin:0;border:0}
.redak ul li small{display:block;color:var(--mute);font-size:12.5px}
.metatab{width:100%;border-collapse:collapse;font-size:13.5px}
.metatab th,.metatab td{text-align:left;padding:6px 0;vertical-align:top}
.metatab th{color:var(--mute);font-weight:500;width:52%}
.metatab td{color:var(--text-2);font-weight:600}
.wlist{list-style:none}
.wlist li+li{border-top:1px solid var(--line-2)}
.wlist a{display:block;padding:10px 0;font-size:15.5px;font-weight:500}

/* ---------- Hinweisbox ---------- */
.hinweis{border:1px solid #e6d5d5;border-left:5px solid var(--warn);border-radius:10px;background:#fdf8f8;padding:18px 22px}
.hinweis h4{font-size:16px;color:var(--warn);margin-bottom:6px}
.hinweis p{font-size:14px;color:#5c5457;line-height:1.55;margin:0;max-width:none}
.quellen{font-size:13.5px;color:var(--mute)}
.quellen ol{margin-left:20px}
.quellen li{margin-bottom:6px;overflow-wrap:anywhere}

/* ---------- Trust-Band / Footer ---------- */
.trust{border:1px solid var(--line);border-left:6px solid var(--blau);border-radius:12px;padding:30px 34px;display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;background:#fbfdfe}
.trust h2{font-size:24px;margin-bottom:8px}
.trust p{font-size:15.5px;color:var(--text-2);max-width:60ch}
.avas{display:flex;gap:12px}
.avaC{text-align:center;width:76px}
.avaC .ava{width:56px;height:56px;border-radius:50%;background:#dde7ee;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:9px;color:#8fa3b0}
.avaC .ava.more{background:var(--blau);color:#fff;font-family:'IBM Plex Sans',sans-serif;font-size:15px;font-weight:700}
.avaC small{font-size:11.5px;color:var(--mute);line-height:1.3;display:block}
footer{background:var(--navy);color:#c9ccd6;padding:48px 0 32px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer .logo{height:38px;margin-bottom:14px;filter:brightness(0) invert(1);opacity:.92}
footer p{font-size:13.5px;color:#9096a5}
footer h5{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#818899;margin-bottom:12px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px}
footer a{color:#dfe2ea}
footer .legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--navy-2);font-size:13px;color:#868da0;display:flex;flex-wrap:wrap;align-items:center;gap:22px}
footer .legal .flogo{margin-left:auto;height:38px;width:auto;opacity:.85}
@media(max-width:640px){footer .legal .flogo{margin-left:0;height:30px}}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  /*  Tablet: Fuer drei Spalten reicht die Breite nicht mehr. Statt die
      Abschnittsnavigation auszublenden, wandert sie in die rechte Spalte und
      steht dort als erstes ueber den Artikel-Widgets — der Nutzer verliert die
      Orientierung im Themenbaum sonst genau dort, wo der Platz knapp wird.
      Beide Spalten laufen dabei statisch mit, weil zwei sticky Bloecke
      untereinander einander ueberdecken wuerden.  */
  .layout{grid-template-columns:minmax(0,1fr) 296px;gap:28px}
  .layout>main{grid-column:1;grid-row:1}
  .layout>.rail{display:flex;flex-direction:column;gap:20px;grid-column:2;grid-row:1;position:sticky;top:20px;align-self:start}
  .layout>.rail>.side{display:block;position:static;width:100%}
  .aspects{grid-template-columns:repeat(2,1fr)}
  .rub{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .top .wrap{grid-template-columns:1fr auto auto;gap:14px;row-gap:12px}
  .top .logo{height:44px}
  .search{order:4;width:100%;justify-self:stretch;grid-column:1/-1}
  nav.main .wrap{overflow-x:auto;padding:0 16px}
  nav.main a{padding:13px 16px;white-space:nowrap}
  .wrap{padding:0 20px}
  /*  Mobil: eine Spalte. Der Behaelter der Seitenspalten reiht sich unter den
      Artikel; die Spaltenzuweisungen der breiteren Ansichten muessen dafuer
      zurueckgenommen werden.  */
  .layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .layout>main{grid-column:1;grid-row:1}
  .layout>.rail{grid-column:1;grid-row:2;position:static;display:flex;flex-direction:column;gap:20px}
  .layout>.rail>.side{width:100%}
  .side{position:static}
  article h1{font-size:29px}
  .trust{grid-template-columns:1fr;gap:22px;padding:24px}
  footer .cols{grid-template-columns:1fr}
}

/* ---------- Redaktions-Impressum (im Redaktions-Widget, unter der Namensliste) ---------- */
.w.redak details .credits{border-top:1px solid var(--line-2);margin-top:14px;padding-top:13px}
.w.redak details .credits dl{display:grid;gap:10px;margin:0}
.w.redak details .credits dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:2px}
.w.redak details .credits dd{font-size:13px;color:var(--text-2);line-height:1.45;margin:0}

/* ---------- FAQ-Übersicht: Top-Fragen ---------- */
.qlist{counter-reset:q;display:grid;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.qlist>div{padding:20px 22px;border-top:1px solid var(--line-2)}
.qlist>div:first-child{border-top:0}
.qlist h3{font-size:18px;display:flex;gap:12px;margin-bottom:8px}
.qlist h3:before{counter-increment:q;content:counter(q);flex:none;width:28px;height:28px;border-radius:50%;background:var(--blau);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.qlist p{font-size:16px;color:var(--text-2);margin:0;max-width:70ch}

/* ---------- Rueckverlinkung Ebene 4 ---------- */
.backlink{display:flex;align-items:baseline;gap:10px;border-left:4px solid var(--blau);background:var(--blau-soft);border-radius:0 8px 8px 0;padding:12px 18px;font-size:15px;margin:30px 0 20px}
.backlink b{color:var(--navy)}
.teasers{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* ---------- Suchergebnisse ---------- */
.sbar{background:var(--blau-soft);border-bottom:1px solid var(--line);padding:26px 0}
.sbar h1{font-size:26px;margin-bottom:14px}
.sbar .big{display:flex;border:2px solid var(--blau);border-radius:8px;overflow:hidden;background:#fff;max-width:640px}
.sbar .big input{flex:1;border:0;font:inherit;font-size:17px;padding:13px 16px;outline:none;min-width:0}
.sbar .big button{background:var(--blau);color:#fff;border:0;font:inherit;font-weight:600;padding:0 24px;cursor:pointer}
.sbar .big button:hover{background:var(--blau-d)}
.facets{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.facets a{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14.5px;font-weight:500;color:var(--blau-x);background:#fff}
.facets a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.facets a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.hits{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
.hits li{border-bottom:1px solid var(--line)}
.hits a.h{display:block;padding:20px 0}
.hits a.h:hover{text-decoration:none}
.hits .path{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;margin-bottom:5px}
.hits h3{font-size:19px;margin-bottom:6px}
.hits a.h:hover h3{color:var(--blau-d)}
.hits p{font-size:15px;color:var(--text-2);max-width:80ch;margin:0}
.hits mark{background:#fdf3d4;color:inherit;padding:0 2px;border-radius:2px}
.pager{display:flex;gap:8px;align-items:center;padding:26px 0}
.pager a,.pager span{border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:15px;font-weight:500;color:var(--blau-x)}
.pager span.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pager a:hover{border-color:var(--blau);text-decoration:none}

/* ---------- 404 ---------- */
.err{text-align:center;padding:76px 0 60px;max-width:640px;margin:0 auto}
.err .code{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.16em;color:var(--mute)}
.err h1{font-size:36px;margin:12px 0 14px}
.err p{font-size:18px;color:var(--text-2);margin-bottom:26px}
.err .big{display:flex;border:2px solid var(--blau);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:34px}
.err .big input{flex:1;border:0;font:inherit;font-size:17px;padding:13px 16px;outline:none;min-width:0}
.err .big button{background:var(--blau);color:#fff;border:0;font:inherit;font-weight:600;padding:0 24px;cursor:pointer}
.err .three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.err .three a{border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:16px;font-weight:600;color:var(--navy)}
.err .three a:hover{border-color:var(--blau);text-decoration:none}
.err .three a small{display:block;font-size:13.5px;font-weight:400;color:var(--mute);margin-top:4px}

/* ---------- Statische Inhaltsseite ---------- */
.static{padding:36px 0 60px;display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:36px}
.static article h1{font-size:34px}
.static article h2{font-size:22px;margin:32px 0 10px}
.toc{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:22px}
.toc p{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:8px}
.toc ol{list-style:none;display:grid;gap:6px;counter-reset:t}
.toc a{font-size:15.5px;font-weight:500}

/* ---------- Druckansicht ---------- */
@media print{
  /*  Alles ausblenden, was auf Papier keinen Zweck hat: Navigation in jeder
      Form, Suchfeld, Sprungmarken, Varianten-Panel und Verweiskacheln. Der
      Druckkopf (Logo, Titel, Quell-URL) tritt an die Stelle der Kopfleiste.  */
  nav.main,.crumb,.search,.searchtoggle,.burger,.rail,.side,.oc,
  .matrix,.vquick,.anav,.totop,footer,.tiles,.faq,.teasers,.backlink,
  .skip,.top .header-section.degin{display:none!important}
  .top{display:none!important}

  body{font-size:11pt;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  .layout{display:block;padding:0}
  main{width:auto}

  a{color:#000;text-decoration:none}
  /*  Verweise im Text sind auf Papier wertlos, wenn das Ziel fehlt — die
      Adresse wird deshalb ausgeschrieben.  */
  article a[href^="http"]:after{content:" (" attr(href) ")";font-size:8.5pt;color:#444}

  h1{font-size:19pt}
  h2,.dcard>.dh h2{font-size:14pt}
  h3{font-size:12pt}
  .lede,.lede>p{font-size:12pt}

  /*  Bloecke nicht ueber den Seitenrand hinweg zerreissen  */
  .dcard,.steck,.kv,.acc details,figure.pic,table{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}

  /*  Aufklappbares wird auf Papier vollstaendig gezeigt  */
  details{display:block!important}
  details>summary{list-style:none;font-weight:600}
  .acc details .in,details .in{display:block!important}

  figure.pic img{max-width:11cm;height:auto}
  .dcard,.steck{border:1px solid #999;box-shadow:none}
  .kv{border:1px solid #bbb;background:#fff}
  .hinweis{border-color:#999;border-left-color:#000;background:#fff}
  .med-hinweis{border:2px solid #000;background:#fff}
  .quellen ol{font-size:9.5pt}
}
@media(max-width:1080px){.static{grid-template-columns:minmax(0,1fr)}.err .three{grid-template-columns:1fr}}
@media(max-width:760px){.teasers{grid-template-columns:1fr}}

/* ================= AUSBAU 08/2026 ================= */

/* --- Skip-Link + Fokus --- */
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600;font-size:15px}
.skip:focus{left:0;text-decoration:none;color:#fff}
:focus-visible{outline:3px solid #f0a500;outline-offset:2px;border-radius:3px}
nav.main a:focus-visible,.top .search button:focus-visible{outline-color:#ffd166}
.matrix .tabs button:focus-visible{outline-offset:-3px}
a:visited{color:#6a5aa0}
nav.main a:visited{color:#fff}
nav.main a.on,nav.main a.on:visited{color:var(--navy)}
nav.main a.on:hover{color:var(--blau-d)}
.oc nav a:visited{color:var(--navy)}
.oc nav a.sec:visited{color:var(--blau-x)}
footer a:visited{color:#dfe2ea}
.card .head h3 a:visited{color:#fff}
.art:visited h4,.tile:visited span,.crumb a:visited,.subnav a:visited,.matrix .pane a:visited,.faq a:visited,.wlist a:visited,.anav a:visited,.axis a:visited{color:inherit}

/* --- Deutsche Silbentrennung --- */
body{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:9 5 4;overflow-wrap:break-word}
h1,h2,h3,h4,.matrix .tabs button,nav.main a{hyphens:manual;-webkit-hyphens:manual}
.w .wt .tag,.info .grp>h4,.card .vars p,.subnav .t,.oc .grp,.anav>p,.toc p,.err .code,figure.pic figcaption b{hyphens:manual;-webkit-hyphens:manual}
.w .wt .tag{white-space:nowrap}
.w .wt h4{hyphens:manual;-webkit-hyphens:manual}

/* --- Burger + Off-Canvas (mobil) --- */
.burger{display:none;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;font-weight:600;color:var(--navy);padding:9px 14px;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:var(--navy);position:relative}
.burger i:before,.burger i:after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy)}
.burger i:before{top:-5px}.burger i:after{top:5px}
.oc{position:fixed;inset:0;z-index:100;visibility:hidden}
.oc[data-open="1"]{visibility:visible}
.oc .veil{position:absolute;inset:0;background:rgba(20,32,42,.5);opacity:0;transition:opacity .2s}
.oc[data-open="1"] .veil{opacity:1}
.oc .panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;box-shadow:-14px 0 40px -20px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column;overflow-y:auto}
.oc[data-open="1"] .panel{transform:none}
.oc .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.oc .ph strong{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.oc .x{background:transparent;border:0;font:inherit;font-size:26px;line-height:1;color:var(--navy);cursor:pointer;padding:0 4px}
.oc nav{padding:8px 0}
.oc nav a{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;font-size:17px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--line-2)}
.oc nav a:hover{background:var(--blau-soft);text-decoration:none}
.oc nav a.sec{font-size:16px;font-weight:500;color:var(--blau-x);padding-left:30px}
.oc nav a em{font-style:normal;font-size:12.5px;color:#9aa8b1;font-variant-numeric:tabular-nums}
.oc .grp{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;padding:16px 18px 6px}
.oc .foot{margin-top:auto;padding:16px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
body[data-oc="1"]{overflow:hidden}

/* --- Abschnittsnav: Akkordeon auf Mobil, offen auf Desktop --- */
.secnav{border:0}
.secnav>summary{display:none}
.secnav:not([open])>*:not(summary){display:block}

/* --- Artikelnavigation unter der Einleitung --- */
.anav{border:1px solid var(--line);border-left:4px solid var(--blau);border-radius:0 10px 10px 0;background:#fbfdfe;padding:16px 20px;margin:0 0 28px}
.anav p{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 10px}
.anav ol{list-style:none;counter-reset:an;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 24px;margin:0}
.anav li{display:flex;gap:9px;align-items:baseline;font-size:16px}
.anav li:before{counter-increment:an;content:counter(an) ".";color:#a8b4bd;font-size:13.5px;font-variant-numeric:tabular-nums;flex:none}
.anav a{font-weight:500}
h2.sub{scroll-margin-top:24px}

/* --- Tabellen --- */
.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:12px}
table.data{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.data caption{text-align:left;font-size:13.5px;color:var(--mute);padding:12px 18px;border-bottom:1px solid var(--line-2)}
table.data th,table.data td{text-align:left;padding:11px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.data thead th{background:var(--blau-soft);color:var(--navy);font-weight:600;font-size:14.5px;white-space:nowrap;border-bottom:1px solid var(--line)}
table.data tbody tr:last-child th,table.data tbody tr:last-child td{border-bottom:0}
table.data tbody th{font-weight:600;color:var(--navy)}
table.data tbody tr:hover{background:#fafcfd}
table.data .lvl{display:inline-block;font-size:12.5px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap}
table.data .lvl.hoch{background:#fbeaea;color:#a03434}
table.data .lvl.mittel{background:#fdf3d4;color:#8a6410}
table.data .lvl.gering{background:#e7f2ea;color:#2f6b45}

/* --- Alarmsymptome --- */
.alarm{border:2px solid #c0392b;border-radius:12px;background:#fdf6f5;padding:20px 24px;margin:28px 0}
.alarm .h{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.alarm .h .sig{width:30px;height:30px;border-radius:50%;background:#c0392b;color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none}
.alarm h3{font-size:19px;color:#a5271a;margin:0}
.alarm p{font-size:15.5px;color:#5c4a48;margin:0 0 10px;max-width:none}
.alarm ul{list-style:none;display:grid;gap:7px;margin:0 0 12px}
.alarm ul li{display:flex;gap:10px;font-size:16px;color:#3d2e2c;font-weight:500}
.alarm ul li:before{content:"!";flex:none;width:20px;height:20px;border-radius:50%;background:#c0392b;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:3px}
.alarm .do{font-size:15.5px;font-weight:600;color:#a5271a;margin:0}

/* --- Bilder: Seitenverhaeltnis, Unterschriften --- */
.ill{background:var(--blau-soft);background-image:linear-gradient(135deg,rgba(43,116,157,.07) 0 40%,rgba(43,116,157,.03) 100%);border-radius:inherit}
figure.pic{margin:0 0 26px}
figure.pic .ill{aspect-ratio:16/9;height:auto;border-radius:12px}
figure.pic figcaption{font-size:13.5px;color:var(--mute);line-height:1.5;padding-top:9px;max-width:70ch}
figure.pic figcaption b{color:var(--text-2);font-weight:600}
.aspect .ill{aspect-ratio:16/10;height:auto}
.art .ill,.tile .ill{aspect-ratio:16/9;height:auto}
img{height:auto}

/* --- Infobox rechts: Autoren, Prüfung, Daten (ersetzt Byline/Meta/Credits) --- */
.info{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:20px;overflow:hidden}
.info .seal{display:flex;align-items:center;gap:11px;background:var(--blau-soft);border-bottom:1px solid var(--blau-line);padding:14px 18px}
.info .seal .tick{width:28px;height:28px;border-radius:50%;background:var(--blau);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.info .seal b{font-size:15.5px;color:var(--navy);display:block;line-height:1.3}
.info .seal small{font-size:14.5px;color:var(--blau-x);font-weight:600}
.info .grp{padding:14px 18px;border-bottom:1px solid var(--line-2)}
.info .grp:last-child{border-bottom:0}
.info .grp>h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.info .who{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-2);margin-bottom:9px}
.info .who:last-child{margin-bottom:0}
.info .who .ava{width:34px;height:34px;border-radius:50%;background:#dde7ee;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;font-size:8px;color:#8fa3b0;flex:none}
.info .who b{display:block;color:var(--navy);font-weight:600;font-size:15px;line-height:1.3}
.info .who span{font-size:13px;color:var(--mute)}
.info dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:13.5px;margin:0}
.info dt{color:var(--mute)}
.info dd{color:var(--text-2);font-weight:600;margin:0}

/* --- Unterabschnitts-Ebene in der Unternav (Hausmittel / Schulmedizin / ...) --- */
.subnav .kids{display:none;background:var(--blau-soft);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.subnav .kids a{padding:9px 18px 9px 32px;font-size:15px;font-weight:500;color:var(--blau-x);border-left:3px solid transparent;position:relative}
.subnav .kids a:before{content:"";position:absolute;left:20px;top:50%;width:6px;height:1px;background:#b9c9d4}
.subnav .kids a.on{background:var(--blau);border-left-color:var(--blau-x);color:#fff;font-weight:600}
.subnav .kids a.on:visited{color:#fff}
.subnav .kids a.on:hover{background:var(--blau-d);text-decoration:none}
.subnav .kids a.on em{color:#cfe4ef}
.subnav .kids a.on:before{background:rgba(255,255,255,.5)}

/* --- Steckbrief Präparat --- */
.steck{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 26px}
.steck .sh{background:var(--navy);color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.steck .sh h3{color:#fff;font-size:17px;margin:0}
.steck .sh .rx{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;background:rgba(255,255,255,.16);border-radius:999px;padding:4px 12px;white-space:nowrap;hyphens:manual}
.steck dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0;margin:0;font-size:15.5px}
.steck dt,.steck dd{padding:11px 20px;border-bottom:1px solid var(--line-2);margin:0}
.steck dt{color:var(--mute);font-size:14.5px;background:#fbfdfe}
.steck dd{color:var(--text);font-weight:500}
.steck dl>:nth-last-child(1),.steck dl>:nth-last-child(2){border-bottom:0}
.steck .yes,.steck .no,.steck .maybe,.mkarte .yes,.mkarte .no,.mkarte .maybe{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.steck .yes,.mkarte .yes{color:#2f6b45}.steck .no,.mkarte .no{color:#a03434}.steck .maybe,.mkarte .maybe{color:#8a6410}
.steck .yes:before,.mkarte .yes:before{content:"\2713"}.steck .no:before,.mkarte .no:before{content:"\2715"}.steck .maybe:before,.mkarte .maybe:before{content:"!"}

/* --- FAQ-Akkordeon im Artikel --- */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:18px 0 26px}
.acc details+details{border-top:1px solid var(--line-2)}
.acc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;font-size:16.5px;font-weight:600;color:var(--navy)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--blau-soft)}
.acc summary:after{content:"+";font-size:20px;font-weight:400;color:var(--blau);flex:none;line-height:1}
.acc details[open] summary:after{content:"\2013"}
.acc details[open] summary{background:var(--blau-soft);border-bottom:1px solid var(--blau-line)}
.acc .in{padding:15px 20px 18px}
.acc .in p{font-size:16.5px;margin:0 0 10px}
.acc .in p:last-child{margin-bottom:0}

/* --- Artikel-Teaser (Startseite + Rueckverlinkung Ebene 4/5) --- */
.arts{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.art{display:block;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.art:hover,.art:focus-visible{border-color:var(--blau);box-shadow:0 12px 30px -18px rgba(28,64,89,.55);transform:translateY(-2px);text-decoration:none}
.art .b{padding:16px 18px 20px}
.art .tag{display:inline-block;background:var(--blau-soft);color:var(--blau-x);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;hyphens:manual}
.art h4{font-size:18px;margin:10px 0 7px;color:var(--navy)}
.art:hover h4{color:var(--blau-d)}
.art p{font-size:14.5px;color:var(--mute);line-height:1.5}
.art .more{display:inline-block;margin-top:10px;font-size:14.5px;font-weight:600;color:var(--blau)}
.art:hover .more{color:var(--blau-d)}
.art .more:after{content:" \2192";display:inline-block;transition:transform .15s}
.art:hover .more:after{transform:translateX(3px)}
.art,.art:visited{color:var(--text)}
.art:visited h4{color:var(--navy)}
.art:visited p{color:var(--mute)}
.art:visited .tag{color:var(--blau-x)}
.art:visited .more{color:var(--blau)}

/* --- Rueckverlinkung mit Titelvorschau --- */
.backlink{display:block}
.backlink .n{display:block;font-size:15px;color:var(--text-2);margin-bottom:4px}
.backlink .n b{color:var(--navy)}
.backlink .ex{display:block;font-size:14px;color:var(--mute);line-height:1.5}

/* --- Zum Seitenanfang --- */
.totop{display:flex;justify-content:flex-end;padding:0 0 8px}
.totop a{font-size:14.5px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.totop a:before{content:"\2191"}
@media(max-width:760px){.steck dl{grid-template-columns:minmax(0,1fr)}.steck dt{padding-bottom:2px;border-bottom:0}.steck dd{padding-top:2px}}

/* --- Varianten-Kurzteaser oben im Artikel --- */
.vquick{border:1px solid var(--line);border-radius:10px;background:#fbfdfe;padding:14px 18px;margin:0 0 24px}
.vquick p{font-size:14px;color:var(--text-2);margin:0 0 10px}
.vquick p b{color:var(--navy)}
.vquick .row{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.vquick .row a{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:14.5px;font-weight:500;color:var(--blau-x);background:#fff}
.vquick .row a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.vquick .row a.all{border-style:dashed;color:var(--mute);background:transparent}

/* --- Wirksamkeits-Gruppen (Hausmittel-Übersicht) --- */
.rank{margin:0 0 34px}
.rank>.rh{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:18px;flex-wrap:wrap}
.rank>.rh h2{font-size:22px;margin:0}
.rank>.rh .badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap;hyphens:manual}
.rank>.rh .n{font-size:13.5px;color:var(--mute);font-variant-numeric:tabular-nums;margin-left:auto}
.rank.gut>.rh{border-bottom-color:#2f6b45}
.rank.gut .badge{background:#e7f2ea;color:#2f6b45}
.rank.gut .badge:before{content:"\2713"}
.rank.wenig>.rh{border-bottom-color:#8a6410}
.rank.wenig .badge{background:#fdf3d4;color:#8a6410}
.rank.wenig .badge:before{content:"~"}
.rank.nicht>.rh{border-bottom-color:#a03434}
.rank.nicht .badge{background:#fbeaea;color:#a03434}
.rank.nicht .badge:before{content:"\2715"}
.rank .feat{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:16px}
.rank .rest{display:flex;flex-wrap:wrap;gap:8px}
.rank .rest a{border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:15.5px;font-weight:500;color:var(--blau-x);background:#fff}
.rank .rest a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.rank>p{margin-bottom:14px}

@media(max-width:760px){.rank .feat{grid-template-columns:1fr}}

.oc nav a.sec2{font-size:15px;font-weight:500;color:var(--blau-x);padding-left:46px;position:relative;background:#f7fafc}
.oc nav a.sec2:before{content:"";position:absolute;left:34px;top:50%;width:6px;height:1px;background:#b9c9d4}
.oc nav a.sec2.on{background:#fff;color:var(--navy);font-weight:600;box-shadow:inset 3px 0 0 var(--blau)}
.oc nav a.sec2:visited{color:var(--blau-x)}

/* Unterabschnitte nur zeigen, wenn ihr Oberpunkt aktiv ist */
.subnav a.on+.kids{display:grid}

/* Oberpunkt eines aktiven Unterabschnitts: hellblau statt blau */
.subnav a.on.parent{background:var(--blau-soft);border-left-color:var(--blau);color:var(--navy)}
.subnav a.on.parent:visited{color:var(--navy)}
.subnav a.on.parent:hover{background:#e6eff5}
.subnav a.on.parent em{color:#8fa3b0}

/* --- Diagnose-Karte (Symptomseite: eine Karte je Ursache) --- */
.dcard{border:1px solid var(--line);border-radius:12px;background:#fff;margin:0 0 26px;overflow:hidden}
.dcard>.dh{background:var(--blau-soft);border-bottom:1px solid var(--line);padding:15px 24px}
.dcard>.dh .kick{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blau-x);font-weight:600;margin-bottom:4px;hyphens:manual}
.dcard>.dh h2{font-size:22px;margin:0;color:var(--navy)}
.dcard>.db{padding:20px 24px 24px}
.dcard>.db>h3{font-size:17.5px;margin:22px 0 7px}
.dcard>.db>h3:first-child{margin-top:0}
.dcard>.db p{margin:0 0 12px;max-width:none}
.dcard>.db p:last-child{margin-bottom:0}
.kv{border:1px solid var(--line-2);border-radius:10px;background:#fbfdfe;padding:16px 20px;margin:0 0 20px}
.kv>p{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:0 0 12px;hyphens:manual}
.kv dl{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:10px 20px;margin:0}
.kv dt{font-size:14.5px;font-weight:600;color:var(--navy);hyphens:manual}
.kv dd{font-size:15.5px;color:var(--text-2);line-height:1.5;margin:0}
.kv dd.no{font-weight:600;color:#a03434}
.kv dd.ja{font-weight:600;color:#2f6b45}
@media(max-width:640px){.kv dl{grid-template-columns:minmax(0,1fr);gap:2px}.kv dt{margin-top:10px}.kv dt:first-child{margin-top:0}.dcard>.dh,.dcard>.db{padding-left:16px;padding-right:16px}.dcard>.dh h2{font-size:19.5px}}

/* --- Redaktioneller Tipp (abgesetzt, aber kein Alarm) --- */
.tipp{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;border:1px solid var(--line);border-left:4px solid var(--blau);border-radius:0 12px 12px 0;background:#fbfdfe;padding:18px 22px;margin:26px 0}
.tipp .sig{width:28px;height:28px;border-radius:50%;background:var(--blau);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.tipp h4{font-size:16.5px;margin:2px 0 6px;color:var(--navy)}
.tipp p{font-size:15.5px;color:var(--text-2);margin:0;max-width:70ch}
.tipp .ext{font-size:13px;color:var(--mute);margin-top:7px}

/* --- Bildnachweis unter Abbildungen --- */
figure.pic figcaption .credit,.dcard figcaption .credit{display:block;font-size:12px;color:var(--mute);line-height:1.4;margin-top:6px;hyphens:manual}


/* ==========================================================================
   Anpassungen für das CMS-Markup
   --------------------------------------------------------------------------
   Der Entwurf arbeitet mit Platzhalter-Kaesten (.ill als leeres div). Aus dem
   CMS kommen echte Bilder, dazu ein paar Bausteine, die es im Entwurf so nicht
   gab (Kicker, Druckkopf). Diese Ergaenzungen sind bewusst gebuendelt, damit
   Entwurf und Umsetzung vergleichbar bleiben.
   ========================================================================== */

/* Echte Bilder in figure.pic und in den Kacheln */
figure.pic img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: var(--blau-soft);
}
.aspect img.ill,
.tile img.ill {
    width: 100%;
    object-fit: cover;
    background-image: none;
    padding: 0;
}
.aspect img.ill { aspect-ratio: 16/10; height: auto; }
.tile img.ill   { height: 78px; }

/* Bilder im Fliesstext bleiben in der Spalte */
main img { max-width: 100%; height: auto; }

/* Einleitung kommt als HTML aus dem CMS und bringt eigene Absaetze mit */
.lede > p { margin: 0 0 12px; font-size: inherit; color: inherit; line-height: inherit; }
.lede > p:last-child { margin-bottom: 0; }

/* Kicker ueber der Ueberschrift (Unterabschnitts- und Detailseiten) */
.kicker {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 8px;
    hyphens: manual;
}

/* Erklaerzeile unter einer Zwischenueberschrift */
.hint { font-size: 14.5px; color: var(--mute); margin: -4px 0 18px; }

/* Druckkopf: nur auf Papier, am Bildschirm unsichtbar */
.print-header { display: none; }
@media print {
    .print-header { display: block; margin-bottom: 16px; }
    .print-header .url { font-size: 9pt; color: #555; }
}


/* ==========================================================================
   Startseite
   --------------------------------------------------------------------------
   Im Entwurf standen diese Regeln als <style>-Block in Startseite.html, weil
   sie nur dort gebraucht werden. Fuer den Livebetrieb gehoeren sie ins
   gemeinsame Stylesheet — eine zweite Datei fuer eine einzige Seite waere ein
   zusaetzlicher Ladevorgang ohne Gegenwert.
   ========================================================================== */

.hero{background:linear-gradient(180deg,var(--blau-soft),#fff)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:56px;padding-bottom:56px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;color:#4a5b66;font-weight:500}
.badge b{color:var(--blau);font-weight:700}
.hero h1{font-size:46px;margin:18px 0 14px}
.hero p.lead{font-size:19px;color:var(--text-2);max-width:46ch;text-wrap:pretty}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;align-items:center}
.chips span.lbl{font-size:13px;color:var(--mute)}
.chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:500;color:var(--blau-x)}
.chips a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.hero .ill{aspect-ratio:16/10;height:auto;border-radius:10px;border:1px solid var(--line)}
.card .intro{padding:16px 22px 0;font-size:14.5px;color:var(--text-2);line-height:1.5}
.card .vars{padding:4px 22px 20px;border-top:1px solid var(--line-2);margin-top:4px}
.card .vars p{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin:14px 0 10px}
.card .vars .row{display:flex;flex-wrap:wrap;gap:7px}
.card .vars a{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;color:var(--blau-x)}
.card .vars a:hover{border-color:var(--blau);background:var(--blau-soft);text-decoration:none}
.card .vars a.all{border-style:dashed;color:var(--mute)}
@media(max-width:1080px){.hero .wrap{grid-template-columns:1fr;gap:32px}.arts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hero h1{font-size:34px}.arts{grid-template-columns:1fr}}

/* Die Einleitung kommt als Fliesstext, nicht als Platzhalter */
.hero .lead { font-size: 19px; color: var(--text-2); max-width: 46ch; text-wrap: pretty; }
.hero .ill { width: 100%; height: auto; object-fit: cover; background-image: none; padding: 0; }
.card .intro > p { margin: 0 0 8px; font-size: 14.5px; color: var(--text-2); line-height: 1.5; }
.card .intro > p:last-child { margin-bottom: 0; }


/* ---------------------------------------------- Korrekturen aus der Abnahme */

/* Rubriktitel auf der Startseite: der Link im Navy-Kopf erbt sonst die
   Linkfarbe und steht Blau auf Dunkelblau */
.card .head h3 a,
.card .head h3 a:visited { color: #fff; }
.card .head h3 a:hover { color: #fff; text-decoration: underline; }

/* Luft zwischen den Rubrikkarten und dem Trust-Band darunter */
.rub { margin-bottom: 40px; }
.trust { margin-bottom: 40px; }

/* Teaser-Karten: Raster fuer verlinkte Artikel im Text */
.teasers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0 26px;
}
.teasers.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teasers .art {
    display: flex;
    flex-direction: column;
    background: var(--karte);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.teasers .art:hover {
    border-color: var(--blau-line);
    box-shadow: 0 2px 6px rgba(28,48,66,.07), 0 16px 34px -18px rgba(28,48,66,.34);
    text-decoration: none;
}
/*  Thumbnails fuellen die Bildflaeche vollstaendig. Zuvor standen sie
    eingepasst darin (contain) und liessen je nach Seitenverhaeltnis Raender
    stehen — die Kacheln wirkten dadurch unruhig.  */
.teasers .art img.ill {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: center;
    background: var(--blau-soft);
    background-image: none;
    padding: 0;
    border-radius: 0;
}
.teasers .art .b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.teasers .art .tag {
    align-self: flex-start;
    font-size: 10.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--blau-x);
    background: var(--blau-soft);
    border-radius: 999px;
    padding: 4px 10px;
}
.teasers .art h4 { font-size: 17px; line-height: 1.3; color: var(--navy); margin: 0; }
.teasers .art p { font-size: 14.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.teasers .art .more { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--blau); }
.teasers .art .more:after { content: "→"; margin-left: 5px; }

@media (max-width: 760px) {
    .teasers, .teasers.drei { grid-template-columns: minmax(0, 1fr); }
}

/* <picture> ist beim Export um jedes Bild gelegt (WebP mit Fallback) und soll
   im Layout nicht als eigener Kasten wirken — das <img> bleibt das Element,
   auf das die Regeln oben zielen. Die <source>-Kinder muessen dabei explizit
   verschwinden: sie stehen NICHT in der display:none-Liste der HTML-Spec und
   wurden bisher nur deshalb nie gerendert, weil <picture> seine Kinder
   kapselt — display:contents hebt genau das auf. Ohne diese Zeile wird jede
   <source> zum leeren Grid-/Flex-Item und stiehlt z. B. im Hero der
   Startseite die Bildspalte (das Aquarell rutschte unter den Text).  */
picture { display: contents; }
picture > source { display: none; }


/* ========================================================================== 
   Content-Formate aus dem Redaktionssystem
   --------------------------------------------------------------------------
   Formate, die die Redaktion im Fliesstext verwendet und die im Entwurf keine
   Entsprechung hatten — sowie Reste des Alt-Markups, die weiterhin ausgegeben
   werden.
   ========================================================================== */

/* Medizinische Warnhinweise (.med-hinweis, teils zusaetzlich .kritisch).
   Diese Kaesten muessen deutlich sichtbar bleiben — sie tragen u. a. die
   Ranitidin- und Iberogast-Warnungen. Optik wie der Alarm-Kasten des Entwurfs. */
main .med-hinweis {
    border: 2px solid #c0392b;
    border-radius: 12px;
    background: #fdf6f5;
    padding: 18px 22px;
    margin: 26px 0;
}
main .med-hinweis > :first-child { margin-top: 0; }
main .med-hinweis > :last-child { margin-bottom: 0; }
main .med-hinweis strong,
main .med-hinweis b { color: #a5342a; }
main .med-hinweis.kritisch { border-width: 3px; }

/* Redaktioneller Tipp — abgesetzt, aber unterhalb der Warnstufe */
main .tipp-hinweis,
main .hinweis-box {
    border: 1px solid var(--blau-line);
    border-left: 4px solid var(--blau);
    border-radius: 10px;
    background: var(--blau-soft);
    padding: 16px 20px;
    margin: 24px 0;
}

/* Textbloecke sind blosse Behaelter; ihr Abstand kommt von den Kindern */
main .textblock { margin: 0; }
main .textblock > :first-child { margin-top: 0; }

/* Listen und Fussnoten im Fliesstext */
main article ul,
main article ol { margin: 0 0 18px 22px; }
main article li { margin-bottom: 6px; }
main article sup a { font-size: 12px; font-weight: 600; text-decoration: none; padding: 0 1px; }
main article hr { border: 0; border-top: 1px solid var(--line-2); margin: 28px 0; }
main article blockquote {
    margin: 22px 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--blau-line);
    color: var(--text-2);
    font-style: italic;
}

/* Tabellen, die aus dem Redaktionssystem kommen */
main article table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 15.5px;
    background: var(--karte);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}
main article table th,
main article table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line-2);
    hyphens: manual;
}
main article table th { background: #fbfcfd; color: var(--navy); font-weight: 600; }
main article table tr:last-child th,
main article table tr:last-child td { border-bottom: 0; }

/* Wirksamkeits-Kopfzeile auch ausserhalb einer .rank-Sektion (die Gruppen der
   Hausmittelseiten kommen als Teaser-Gruppen aus dem Redaktionssystem) */
.rh.rank {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 34px 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--line);
}
.rh.rank h2 { margin: 0; font-size: 24px; }
.rh.rank .n { margin-left: auto; font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rh.rank.gut   { border-bottom-color: #4a9d5f; }
.rh.rank.wenig { border-bottom-color: #d9a441; }
.rh.rank.nicht { border-bottom-color: #c0392b; }
.rh.rank .badge {
    font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; border-radius: 999px; padding: 4px 12px;
}
.rh.rank.gut   .badge { background: #e8f4ea; color: #2f6d40; }
.rh.rank.wenig .badge { background: #fbf2df; color: #8a6216; }
.rh.rank.nicht .badge { background: #fbeae8; color: #a5342a; }

/* Logo-Verlinkung im Kopf: ohne dies erbt der Link die Zeilenhoehe und das
   Logo bekommt unten einen Spalt */
.top .logo-link { display: flex; align-items: center; }

/* Druckkopf: erscheint nur auf Papier, dort mit klarer Gliederung */
@media print {
    .print-header .logo img { height: 34px; width: auto; }
    .print-header .title { font-size: 11pt; margin: 6px 0 2px; }
    .print-header .url { font-size: 8.5pt; color: #555; word-break: break-all; }
}

/* Der RichText-Editor haengt an manche <strong> eine eigene Klasse; sie
   braucht keine eigene Gestaltung, ist hier nur der Vollstaendigkeit halber
   erwaehnt: .redactor-inline-converted */

/* Sprungziele der Artikelnavigation: etwas Luft nach oben, damit die
   angesprungene Ueberschrift nicht am oberen Rand klebt */
main article h2[id],
main article h3[id],
main article .dcard[id],
main article .dcard > .dh > h2[id] { scroll-margin-top: 24px; }


/* ------------------------------------------- Korrekturen aus der Abnahme (2) */

/* Tabellen ragten in die Sidebar: Die Grid-Spalte darf zwar auf 0 schrumpfen
   (minmax(0,1fr)), eine Tabelle mit vielen Spalten fordert aber eine
   Mindestbreite und sprengt sie. Als eigener Scroll-Bereich bleibt sie
   innerhalb der Textspalte. Betrifft vor allem die Praeparate-Vergleiche. */
main article table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
main article table tbody,
main article table thead { display: table; width: 100%; min-width: 32em; }
main .tw { overflow-x: auto; max-width: 100%; }

/* Listen: die allgemeine Einrueckung gilt nur fuer Aufzaehlungen im Fliesstext.
   Fragenlisten, Mittel-Listen und Kartenraster sind eigene Bausteine und
   stehen ueber die volle Spaltenbreite. */
main article ul.faq,
main article ol.faq,
main article .rest,
main article .teasers,
main article .tiles,
main article .aspects,
main article .acc {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    max-width: none;
}
main article ul.faq li,
main article ol.faq li { margin-bottom: 0; }

/*  Der Artikeltext nutzt die volle Spaltenbreite — wie die Einleitung. Eine
    zusaetzliche Lesebreite haette die Spalte optisch halbiert, nachdem sie
    ohnehin schon begrenzt ist.  */
main article > p,
main article .db > p,
main article .lede > p { max-width: none; }


/* ==========================================================================
   Mobile Navigation
   --------------------------------------------------------------------------
   Im Entwurf war das Off-Canvas-Menue zwar gestaltet, die Regeln zum
   Einblenden des Burgers fehlten aber — die Entwurfsseiten zeigten es nie in
   Aktion. Hier die drei Stufen:

     bis 860 px   waagerechte Menueleiste wie auf Desktop
     ab  860 px   Menueleiste weicht dem Burger, Inhalt im Off-Canvas
     ab  640 px   zusaetzlich weicht das Suchfeld einem Lupensymbol
   ========================================================================== */

@media (max-width: 860px) {
    .top .wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .top .logo-link { margin-right: auto; }
    nav.main { display: none; }
    .burger { display: inline-flex; }
    .top .search { order: 5; flex: 1 0 100%; }
}

@media (max-width: 640px) {
    .searchtoggle { display: inline-flex; }
    /* Suchfeld erst auf Tastendruck — auf schmalen Schirmen nimmt es sonst
       den halben sichtbaren Bereich ein */
    .top .search { display: none; }
    .top .search.open { display: flex; }
}

/* Off-Canvas: Aufbau der Liste */
.oc .ph { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.oc .ph strong { font-size: 16px; color: var(--navy); }
.oc .ph .x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--mute); cursor: pointer; padding: 0 4px; }
.oc nav { display: flex; flex-direction: column; }
.oc nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 20px; font-size: 16px; font-weight: 600; color: var(--navy);
    border-bottom: 1px solid var(--line-2); text-decoration: none;
}
.oc nav a.sec { padding-left: 34px; font-size: 15px; font-weight: 500; color: var(--blau-x); }
.oc nav a.sec2 { padding-left: 48px; font-size: 14.5px; font-weight: 400; color: var(--blau-x); }
/*  Der aktive Punkt wird vollflaechig markiert — wie in der Seitenspalte.
    Das Entwurfs-CSS setzt fuer `.sec2.on` weiss auf weiss und damit kaum
    unterscheidbar; die Klassen hier stehen deshalb ausdruecklich mit drin.  */
.oc nav a.on,
.oc nav a.sec.on,
.oc nav a.sec2.on { background: var(--blau); color: #fff; }
.oc nav a:hover { background: var(--blau-soft); }
.oc nav a.on:hover,
.oc nav a.sec.on:hover,
.oc nav a.sec2.on:hover { background: var(--blau-d); }
.oc .grp { padding: 16px 20px 6px; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.oc .foot { margin-top: auto; padding: 18px 20px; font-size: 12.5px; color: var(--mute); line-height: 1.5; border-top: 1px solid var(--line-2); }

/* Seite hinter dem geoeffneten Menue nicht mitscrollen lassen */
body[data-oc="1"] { overflow: hidden; }

/* Hinweis am Ende einer gekuerzten Trefferliste */
.hits li.mehr {
    list-style: none;
    padding: 16px 0 0;
    font-size: 14.5px;
    color: var(--mute);
    border-top: 1px solid var(--line-2);
    margin-top: 8px;
}

/* Abschnitts-Kacheln sind vollflaechig verlinkt — der Link darf deshalb keine
   Linkfarbe und keine Unterstreichung erben */
a.aspect,
a.aspect:visited { color: inherit; text-decoration: none; }
a.aspect h4 { color: var(--navy); }
a.aspect:hover h4 { color: var(--blau-d); }
a.aspect p { color: var(--text-2); }


/* ------------------------------------------------ Abstaende der Ueberschriften
   Der Entwurf setzte Zwischenueberschriften sehr dicht an den folgenden Text
   (7–10 px). Auf langen Fachtexten trennt das die Abschnitte zu schwach —
   hier bekommen sie mehr Luft nach unten, naeher an der bisherigen Seite. Der
   Abstand nach oben bleibt deutlich groesser, damit eine Ueberschrift sichtbar
   zum folgenden Absatz gehoert und nicht zum vorangehenden.
   ------------------------------------------------------------------------- */

main article h2,
main article h2.sub { margin-top: 40px; margin-bottom: 22px; }
main article h3,
main article h3.sub { margin-top: 32px; margin-bottom: 20px; }
main article h4 { margin-top: 26px; margin-bottom: 14px; }

/* In Karten sitzt die erste Ueberschrift direkt am Rand */
main article .dcard > .db > h3 { margin-top: 28px; margin-bottom: 18px; }
main article .dcard > .db > h3:first-child { margin-top: 0; }
main article .dcard > .dh h2 { margin: 0; }

/* Zwei Ueberschriften direkt hintereinander brauchen weniger Abstand */
main article h2 + h3,
main article h2.sub + h3 { margin-top: 20px; }

/* Die Fragenliste bringt ihre eigenen Abstaende mit */
main article .qlist h3 { margin: 0 0 8px; }


/* Stichwortlisten (Ursachen, Beschwerden, Mittel) laufen zweispaltig — bei
   zwanzig Eintraegen spart das viel Seitenlaenge. Fragenlisten bleiben
   einspaltig, ganze Saetze nebeneinander lesen sich schlecht. */
main article ul.faq.zwei {
    columns: 2;
    column-gap: 32px;
}
main article ul.faq.zwei > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media (max-width: 760px) {
    main article ul.faq.zwei { columns: 1; }
}


/* Trust-Band der Startseite: Die vollstaendige Redaktion steht jetzt darin
   (neun Personen statt drei plus Zaehler). Sie bekommt eine eigene Zeile unter
   dem Text und umbricht bei Bedarf — nebeneinander waeren die Namen sonst zu
   schmal. */
.trust {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
}
.trust .avas {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 14px;
    justify-content: flex-start;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.trust .avaC { width: 104px; hyphens: none; }
.trust .avaC .ava { width: 60px; height: 60px; overflow: hidden; }
.trust .avaC .ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 640px) {
    /* Auf dem Telefon drei feste Spalten: die Reihe waere sonst fuenfmal
       umgebrochen und das Band laenger als der halbe Startseiten-Inhalt. */
    .trust .avas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; }
    .trust .avaC { width: auto; }
    .trust .avaC small { font-size: 11px; }
}

/* Redaktions-Impressum im Vertrauensband: Leitung und Lektorat haben keine
   Portraits und stehen deshalb als Namenszeilen unter den Gesichtern. */
.trust .roles {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.trust .roles dt { color: var(--navy); font-weight: 600; hyphens: manual; }
.trust .roles dd { color: var(--mute); margin: 0; }

/* Die Startseite endet mit dem Haftungshinweis und hat keine .layout-Spalte,
   die sonst den Abstand zum Footer setzt — der Kasten klebte am Footer.
   Gleicher Wert wie .layout, damit alle Seiten gleich ausklingen. */
.wrap.ende { padding-bottom: 60px; }

@media (max-width: 700px) {
    /* Gestapelt statt zweispaltig: die Rollenbezeichnung ist laenger als die
       halbe Displaybreite, daneben bliebe fuer die Namen nichts uebrig. */
    .trust .roles { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .trust .roles dt { margin-top: 12px; }
    .trust .roles dt:first-of-type { margin-top: 0; }
}

/* Praeparate-Karten in den Wirksamkeitsgruppen. Die Eckdaten standen bisher
   nur auf der Detailseite; in der Uebersicht gab es allein den Namen. */
.rank .mkarte {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
}
.rank .mkarte h3 { font-size: 18px; margin: 0 0 10px; color: var(--blau-x); }
/* Die ganze Karte ist der Link; Farbe und Unterstreichung kommen deshalb
   nicht vom <a>, sondern werden je Zeile gesetzt. */
.rank a.mkarte, .rank a.mkarte:visited { text-decoration: none; color: var(--navy); }
.rank a.mkarte:hover { border-color: var(--blau); box-shadow: 0 2px 10px rgba(31,71,102,.09); }
.rank a.mkarte:hover h3 { text-decoration: underline; }
.rank a.mkarte:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.rank .mkarte dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 7px 16px;
    font-size: 14.5px;
    margin: 0 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.rank .mkarte dt { color: var(--mute); hyphens: manual; }
.rank .mkarte dd { margin: 0; color: var(--navy); }
/* Die Karte waechst mit dem laengsten Text; der Link bleibt unten buendig. */
.rank .mkarte .more { margin-top: auto; font-size: 14.5px; font-weight: 500; color: var(--blau-x); }

/* Farbige Gruppenkante auch an der Karte, damit die Zuordnung beim Scrollen
   erhalten bleibt. */
.rank.gut .mkarte { border-left: 4px solid #2f6b45; }
.rank.wenig .mkarte { border-left: 4px solid #8a6410; }
.rank.nicht .mkarte { border-left: 4px solid #a03434; }

@media (max-width: 760px) {
    .rank .mkarte dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .rank .mkarte dt { margin-top: 9px; }
    .rank .mkarte dt:first-of-type { margin-top: 0; }
}

.mkarte .yes,.mkarte .no,.mkarte .maybe{font-size:14.5px}