@font-face{font-family:"Public Sans";src:url("/assets/fonts/public-sans-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#fbfaf6;--surface:#ffffff;--ink:#17324d;--ink-2:#41566d;--muted:#5d6b7a;
  --line:#dde5ee;--rule:#c3d4e6;
  --c1:#f2c230;--c1-lt:#fbeec2;
  --c2:#24775a;--c2-lt:#dcefe6;
  --c3:#e86a3a;--c3-dk:#b9441a;--c3-lt:#fbe3d8;
  --c4:#7aa7d9;--c4-lt:#e3edf8;
  --focus:#b9441a;

  --t-xs:clamp(.75rem,.73rem + .1vw,.8125rem);
  --t-s:clamp(.875rem,.85rem + .12vw,.9375rem);
  --t-base:clamp(1.0625rem,1.03rem + .16vw,1.1875rem);
  --t-m:clamp(1.1875rem,1.1rem + .4vw,1.4375rem);
  --t-l:clamp(1.5rem,1.3rem + 1vw,2.25rem);
  --t-xl:clamp(2rem,1.55rem + 2.2vw,3.5rem);
  --t-xxl:clamp(2.5rem,1.7rem + 4vw,5.5rem);
  --t-mega:clamp(2.75rem,1.6rem + 5.6vw,7rem);

  --sp-1:clamp(.375rem,.35rem + .1vw,.5rem);
  --sp-2:clamp(.625rem,.58rem + .2vw,.875rem);
  --sp-3:clamp(1rem,.9rem + .4vw,1.375rem);
  --sp-4:clamp(1.5rem,1.3rem + .8vw,2.25rem);
  --sp-5:clamp(2rem,1.65rem + 1.6vw,3.5rem);
  --sp-6:clamp(3rem,2.4rem + 2.8vw,5.5rem);
  --sp-7:clamp(4rem,3rem + 4.4vw,8rem);

  --gutter:clamp(1rem,.7rem + 1.4vw,1.5rem);
  --max:82.5rem;
  --measure:40rem;
  --b:2px solid var(--rule);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--sp-4)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-base)/1.7 "Public Sans",Helvetica,Arial,sans-serif;font-optical-sizing:auto}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:var(--sp-2);top:-4rem;background:var(--ink);color:var(--bg);padding:var(--sp-2) var(--sp-3);font-weight:700;z-index:10;text-decoration:none}
.skip:focus{top:var(--sp-2)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.site-head{border-bottom:var(--b);background:var(--bg)}
.site-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:4.25rem}
.logo{font-weight:900;font-size:var(--t-m);letter-spacing:-.05em;display:flex;align-items:center;gap:.4rem;text-decoration:none}
.logo i{background:var(--c1);padding:.1rem .5rem;font-style:normal}
.nav{display:flex;gap:var(--sp-4);font-weight:600;font-size:var(--t-s)}
.nav a{text-decoration:none;padding:.75rem 0;display:block}
.nav a:hover,.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--c3)}

/* Etiketten */
.tag{display:inline-block;font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;padding:.35rem .6rem;background:var(--ink);color:var(--bg);text-decoration:none}
.kicker{font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase}
.crumbs{font-size:var(--t-s);color:var(--muted)}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem}
.crumbs a{text-underline-offset:3px}

/* Bilder */
.art{position:relative;overflow:hidden;background:var(--c1)}
.art img,.art svg{width:100%;height:100%;object-fit:cover}
.art[data-farbe="c2"]{background:var(--c2)}
.art[data-farbe="c3"]{background:var(--c3)}
.art[data-farbe="c4"]{background:var(--c4)}
.art[data-farbe="ink"]{background:var(--ink)}

/* Startseite: Titelgeschichte */
.cover{display:grid;grid-template-columns:7fr 5fr;border-bottom:var(--b)}
.cover .art{min-height:clamp(20rem,12rem + 22vw,38rem);border-right:var(--b);display:flex;align-items:flex-end}
.cover .art .claim{position:relative;z-index:1;font-weight:900;font-size:var(--t-mega);line-height:.88;letter-spacing:-.055em;max-width:9ch;padding:var(--sp-5);color:var(--ink)}
.cover .art .bg{position:absolute;inset:0}
.cover .txt{padding:var(--sp-5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4)}
.cover h2{font-weight:800;font-size:var(--t-l);line-height:1.08;letter-spacing:-.03em;margin:var(--sp-3) 0}
.cover h2 a{text-decoration:none}
.cover p{color:var(--ink-2)}
.weiter{font-weight:800;font-size:var(--t-s);display:inline-flex;gap:.6rem;align-items:center;text-decoration:none}
.weiter::after{content:"";width:2.5rem;height:3px;background:var(--c3);transition:transform .4s var(--ease);transform-origin:left}
.weiter:hover::after{transform:scaleX(1.6)}

/* Kacheln */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--b)}
.tile{grid-column:span 4;padding:var(--sp-4);border-right:var(--b);display:flex;flex-direction:column;gap:var(--sp-2);min-height:18rem;text-decoration:none}
.tile:last-child{border-right:0}
.tile.w5{grid-column:span 5}.tile.w3{grid-column:span 3}
.tile.f-c2{background:var(--c2);color:#f4f7f2}
.tile.f-c4{background:var(--c4)}
.tile.f-c1{background:var(--c1)}
.tile h3{font-weight:800;font-size:var(--t-m);line-height:1.12;letter-spacing:-.025em}
.tile:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tile p{font-size:var(--t-s);margin-top:auto;opacity:.9}
.tile .big{font-weight:900;font-size:var(--t-xxl);line-height:.9;letter-spacing:-.06em}

/* Listen */
.liste{display:grid;grid-template-columns:4fr 8fr;gap:var(--sp-5);padding-block:var(--sp-6)}
.liste h2{font-weight:900;font-size:var(--t-xl);line-height:.95;letter-spacing:-.05em}
.liste h2 span{background:var(--c1);padding:0 .3rem}
.liste ol{list-style:none;padding:0;counter-reset:n}
.liste li{counter-increment:n;display:grid;grid-template-columns:3.5rem 1fr auto;gap:var(--sp-3);align-items:baseline;padding:var(--sp-3) 0;border-top:var(--b)}
.liste li::before{content:counter(n,decimal-leading-zero);font-weight:900;font-size:var(--t-l);letter-spacing:-.04em;color:var(--c3-dk)}
.liste li a{font-weight:700;font-size:var(--t-m);letter-spacing:-.015em;line-height:1.25;text-decoration:none}
.liste li a:hover{text-decoration:underline;text-underline-offset:4px}
.liste li span{font-size:var(--t-xs);color:var(--muted)}

/* Ressorts auf der Startseite */
.ressorts{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--b);border-bottom:var(--b)}
.ressorts a{padding:var(--sp-4) var(--sp-3);border-right:var(--b);text-decoration:none;display:flex;flex-direction:column;gap:var(--sp-1)}
.ressorts a:last-child{border-right:0}
.ressorts a:hover{background:var(--c1-lt)}
.ressorts b{font-weight:800;font-size:var(--t-m);letter-spacing:-.02em}
.ressorts span{font-size:var(--t-s);color:var(--ink-2)}

/* Artikel: Kopf */
.a-head{display:grid;grid-template-columns:5fr 7fr;border-bottom:var(--b)}
.a-head .art{min-height:clamp(18rem,10rem + 20vw,33rem);border-right:var(--b)}
.a-head .txt{padding:var(--sp-5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4)}
.a-head h1{font-weight:900;font-size:var(--t-xxl);line-height:.97;letter-spacing:-.05em;margin:var(--sp-3) 0}
.dek{font-size:var(--t-m);line-height:1.45;color:var(--ink-2);max-width:40ch}
.by{display:flex;gap:var(--sp-3);align-items:center;border-top:var(--b);padding-top:var(--sp-3);font-size:var(--t-s);color:var(--ink-2)}
.by .av{width:3rem;height:3rem;background:var(--c3-dk);display:grid;place-items:center;color:#fff;font-weight:900;flex:none}
.by b{display:block;color:var(--ink)}
.by a{text-underline-offset:3px}

/* Artikel: Spalten */
.a-grid{display:grid;grid-template-columns:3fr 6fr 3fr;gap:var(--sp-5);padding-block:var(--sp-5) var(--sp-6)}
.a-side-h{font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-bottom:var(--sp-1);border-bottom:var(--b);margin-bottom:var(--sp-1)}
.toc ol{list-style:none;padding:0;counter-reset:n;font-size:var(--t-s)}
.toc li{counter-increment:n;display:grid;grid-template-columns:1.75rem 1fr;padding:.5rem 0;border-bottom:1px solid var(--line)}
.toc li::before{content:counter(n);font-weight:900;color:var(--c3-dk)}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

.text{max-width:var(--measure)}
.text>*+*{margin-top:var(--sp-3)}
.text h2{font-weight:900;font-size:var(--t-l);line-height:1.1;letter-spacing:-.035em;margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:var(--b)}
.text h3{font-weight:800;font-size:var(--t-m);letter-spacing:-.02em;margin-top:var(--sp-4)}
.text p,.text li{color:var(--ink-2)}
.text strong{color:var(--ink)}
.text ul,.text ol{padding-left:1.4rem}
.text li+li{margin-top:.4rem}
.text a{color:var(--ink);font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--c1)}
.text a:hover{box-shadow:inset 0 -1.1em 0 var(--c1-lt)}

.antwort{background:var(--c1);padding:var(--sp-4)}
.antwort p{color:var(--ink);font-size:var(--t-m);line-height:1.5;font-weight:500;margin-top:var(--sp-1)}

.tabelle{overflow-x:auto}
.tabelle table{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.tabelle th{text-align:left;font-weight:800;font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;padding:.75rem .75rem .75rem 0;border-bottom:var(--b)}
.tabelle td{padding:.85rem .75rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.tabelle td:first-child{font-weight:700;color:var(--ink)}
.ja,.nein,.unklar{display:inline-block;font-weight:800;font-size:var(--t-xs);letter-spacing:.06em;padding:.15rem .5rem}
.ja{background:var(--c2);color:#fff}.nein{background:var(--c3-dk);color:#fff}.unklar{background:var(--line);color:var(--ink)}

.zahl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:center;background:var(--c4);padding:var(--sp-4)}
.zahl b{font-weight:900;font-size:var(--t-xxl);line-height:.85;letter-spacing:-.06em}
.zahl p{color:var(--ink)}

.schritte{list-style:none;padding:0!important;counter-reset:s}
.schritte li{counter-increment:s;display:grid;grid-template-columns:3.5rem 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line);margin:0!important}
.schritte li::before{content:counter(s);width:2.75rem;height:2.75rem;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-weight:900;font-size:var(--t-m)}
.schritte b{display:block;color:var(--ink);font-size:var(--t-m);margin-bottom:.2rem}

.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:var(--b)}
.faq summary{font-weight:800;font-size:var(--t-m);padding:var(--sp-3) 2.5rem var(--sp-3) 0;cursor:pointer;list-style:none;position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;translate:0 -50%;font-size:1.75rem;font-weight:400;color:var(--c3-dk);transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding-bottom:var(--sp-3)}

.quellen{font-size:var(--t-s);background:var(--c4-lt);padding:var(--sp-3) var(--sp-4)}
.quellen h2{all:unset;display:block;font-weight:800;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp-1)}

.aside{display:flex;flex-direction:column;gap:var(--sp-5)}
.stand{font-size:var(--t-s);color:var(--ink-2);border-left:4px solid var(--c2);padding-left:var(--sp-2)}
.stand b{color:var(--ink);display:block}
.karten{border:var(--b)}
.karten a{display:block;padding:var(--sp-2) var(--sp-3);border-bottom:var(--b);text-decoration:none}
.karten a:last-child{border-bottom:0}
.karten a:hover{background:var(--c1-lt)}
.karten small{display:block;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c2)}
.karten span{font-weight:700;line-height:1.3}
.chips a{display:inline-block;margin:0 .4rem .5rem 0;padding:.4rem .7rem;border:var(--b);font-size:var(--t-s);font-weight:700;text-decoration:none}
.chips a:hover{background:var(--c1-lt)}

.mehr{border-top:var(--b)}
.mehr .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-inline:0}
.mehr a{padding:var(--sp-4);border-right:var(--b);min-height:13rem;display:flex;flex-direction:column;gap:var(--sp-1);text-decoration:none}
.mehr a:last-child{border-right:0}
.mehr a:nth-child(1){background:var(--c2);color:#f4f7f2}
.mehr a:nth-child(3){background:var(--c4)}
.mehr h3{font-weight:800;font-size:var(--t-m);line-height:1.15;letter-spacing:-.025em}
.mehr a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Ressortseite und einfache Seiten */
.seite-kopf{padding-block:var(--sp-6) var(--sp-5);border-bottom:var(--b)}
.seite-kopf h1{font-weight:900;font-size:var(--t-xxl);line-height:.95;letter-spacing:-.05em;margin-top:var(--sp-3)}
.seite-kopf p{font-size:var(--t-m);color:var(--ink-2);max-width:48ch;margin-top:var(--sp-3)}
.r-liste{list-style:none;padding:0;margin-block:var(--sp-5) var(--sp-6)}
.r-liste li{border-bottom:var(--b)}
.r-liste a{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp-4);padding:var(--sp-4) 0;text-decoration:none}
.r-liste h2{font-weight:800;font-size:var(--t-l);line-height:1.1;letter-spacing:-.03em}
.r-liste a:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.r-liste p{color:var(--ink-2)}
.leer{padding-block:var(--sp-5);color:var(--ink-2)}
.prosa{padding-block:var(--sp-5) var(--sp-6)}
.prosa address{font-style:normal}
.ds-tldr{background:var(--c1-lt);padding:var(--sp-4)}
.ds-tldr h2{margin-top:0!important;border-top:0!important;padding-top:0!important}

/* Formular */
.form{max-width:var(--measure);display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.form label{display:block;font-weight:700;font-size:var(--t-s);margin-bottom:.3rem}
.form input,.form textarea,.form select{width:100%;font:inherit;font-size:var(--t-base);color:var(--ink);background:var(--surface);border:var(--b);padding:.8rem .9rem;min-height:3rem}
.form textarea{min-height:12rem;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{border-color:var(--ink)}
.form .note,.form .privacy{font-size:var(--t-s);color:var(--muted)}
.form .hp{position:absolute;left:-9999px}
.btn{display:inline-block;font:inherit;font-weight:800;font-size:var(--t-base);background:var(--ink);color:var(--bg);border:0;padding:.9rem 1.5rem;cursor:pointer;min-height:3rem;text-decoration:none;justify-self:start}
.btn:hover{background:var(--c3-dk)}
.msg-ok{background:var(--c2-lt);border-left:4px solid var(--c2);padding:var(--sp-3);margin-top:var(--sp-4)}
.msg-err{background:var(--c3-lt);border-left:4px solid var(--c3-dk);padding:var(--sp-3);margin-top:var(--sp-4)}

/* Fuss */
.site-foot{background:var(--ink);color:#e6ecf1;padding-block:var(--sp-5) var(--sp-6);font-size:var(--t-s)}
.site-foot .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-4)}
.site-foot b{font-size:var(--t-m);font-weight:900;letter-spacing:-.04em;color:#fff;display:block;margin-bottom:var(--sp-1)}
.site-foot h2{font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#b8c6d4;margin-bottom:var(--sp-1)}
.site-foot ul{list-style:none;padding:0}
.site-foot a{display:inline-block;padding:.3rem 0;text-decoration:none;color:#e6ecf1}
.site-foot a:hover{text-decoration:underline}

@media (max-width:68rem){
  .a-grid{grid-template-columns:1fr 2fr}
  .aside{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}
  .ressorts{grid-template-columns:repeat(3,1fr)}
  .ressorts a:nth-child(3){border-right:0}
  .ressorts a:nth-child(-n+3){border-bottom:var(--b)}
}
@media (max-width:54rem){
  .site-head .nav{display:none}
  .burger{display:block}
  .cover,.a-head{grid-template-columns:1fr}
  .cover .art,.a-head .art{border-right:0;border-bottom:var(--b)}
  .cover .txt,.a-head .txt{padding:var(--sp-4) var(--gutter)}
  .tiles{grid-template-columns:1fr}
  .tile,.tile.w5,.tile.w3{grid-column:1/-1;border-right:0;border-bottom:var(--b);min-height:0}
  .liste{grid-template-columns:1fr}
  .liste li{grid-template-columns:2.75rem 1fr}
  .liste li span{grid-column:2}
  .ressorts{grid-template-columns:1fr 1fr}
  .ressorts a{border-bottom:var(--b)}
  .ressorts a:nth-child(odd){border-right:var(--b)}.ressorts a:nth-child(even){border-right:0}
  .a-grid{grid-template-columns:1fr}
  .aside{grid-template-columns:1fr}
  .zahl{grid-template-columns:1fr}
  .mehr .wrap{grid-template-columns:1fr}
  .mehr a{border-right:0;border-bottom:var(--b);min-height:0}
  .r-liste a{grid-template-columns:1fr;gap:var(--sp-1)}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.tagzeile{margin-top:var(--sp-4)}
.imp-exali{display:flex;gap:var(--sp-4);align-items:flex-start;flex-wrap:wrap}
.imp-exali>div>*+*{margin-top:var(--sp-2)}
.antwort .kicker{font-size:var(--t-xs);font-weight:800;margin-top:0}
/* Illustrationen sind quadratisch: Bildflaechen quadratisch halten, damit nichts Wesentliches abgeschnitten wird */
.cover{grid-template-columns:1fr 1fr}
.cover .art{aspect-ratio:1/1;min-height:0;max-height:44rem}
.cover .bg .art{position:absolute;inset:0}
.a-head{grid-template-columns:1fr 1fr}
.a-head .art{min-height:clamp(18rem,10rem + 20vw,33rem)}
@media (max-width:54rem){.cover,.a-head{grid-template-columns:1fr}.a-head .art{aspect-ratio:1/1;min-height:0}}

/* Subnetzrechner */
.rechner{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-2);align-items:end;background:var(--c4-lt);padding:var(--sp-3)}
.rechner label{display:block;font-weight:700;font-size:var(--t-s);margin-bottom:.3rem}
.rechner input,.rechner select{width:100%;font:inherit;font-size:var(--t-base);color:var(--ink);background:var(--surface);border:var(--b);padding:.7rem .8rem;min-height:3rem}
.rechner input{font-variant-numeric:tabular-nums}
.ergebnis{border:var(--b);background:var(--surface)}
.e-kopf{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);align-items:baseline;padding:var(--sp-3);background:var(--c1)}
.e-kopf b{font-weight:900;font-size:var(--t-l);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.e-kopf span{font-size:var(--t-s);font-weight:700}
.ergebnis dl{display:grid;grid-template-columns:1fr 1fr;margin:0}
.ergebnis dl div{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line)}
.ergebnis dl div:nth-child(odd){border-right:1px solid var(--line)}
.ergebnis dt{font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ergebnis dd{margin:0;font-weight:700;font-size:var(--t-m);font-variant-numeric:tabular-nums}
.binaer{padding:var(--sp-3);border-top:var(--b);overflow-x:auto}
.binaer p{display:flex;gap:var(--sp-2);align-items:baseline;margin:0}
.binaer p+p{margin-top:.3rem}
.binaer span{min-width:5rem;font-size:var(--t-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.binaer code{font-size:var(--t-s);white-space:nowrap;letter-spacing:.05em}
.binaer b,.binaer .legende b{background:var(--c4-lt);font-weight:700}
.binaer u,.binaer .legende u{text-decoration:none;background:var(--c1-lt)}
.binaer i{font-style:normal;color:var(--muted)}
.binaer .legende{font-size:var(--t-s);margin-top:var(--sp-2);color:var(--ink-2)}
.binaer .legende b,.binaer .legende u{padding:0 .3rem}
.ergebnis .hinweis{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);font-size:var(--t-s);color:var(--ink-2)}

/* Glossar */
.abc{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:var(--b)}
.abc .wrap{display:flex;flex-wrap:wrap;gap:.25rem;padding-block:var(--sp-2)}
.abc a{display:inline-grid;place-items:center;min-width:2.75rem;min-height:2.75rem;font-weight:800;text-decoration:none}
.abc a:hover{background:var(--c1-lt)}
.glossar{padding-block:var(--sp-4) var(--sp-6)}
.glossar>section,.glossar>.quellen{max-width:56rem}
.glossar section{display:grid;grid-template-columns:5rem 1fr;gap:var(--sp-3);border-bottom:var(--b);padding-block:var(--sp-4)}
.g-bst{font-weight:900;font-size:var(--t-xl);line-height:1;color:var(--c3-dk);scroll-margin-top:5rem}
.glossar dl{margin:0}
.g-eintrag{scroll-margin-top:5rem}
.g-eintrag+.g-eintrag{margin-top:var(--sp-4)}
.g-eintrag:target{background:var(--c1-lt);outline:var(--sp-2) solid var(--c1-lt)}
.glossar dt{font-weight:800;font-size:var(--t-m);letter-spacing:-.015em}
.glossar dd{margin:var(--sp-1) 0 0;color:var(--ink-2);max-width:var(--measure)}
.glossar dd p+p{margin-top:var(--sp-1)}
.glossar dd a{color:var(--ink);font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--c1)}
.glossar dd a:hover{box-shadow:inset 0 -1.1em 0 var(--c1-lt)}
.g-mehr{font-size:var(--t-s);font-weight:700}
.glossar .quellen{margin-top:var(--sp-5)}
@media (max-width:54rem){
  .rechner{grid-template-columns:1fr}
  .rechner .btn{justify-self:stretch}
  .ergebnis dl{grid-template-columns:1fr}
  .ergebnis dl div:nth-child(odd){border-right:0}
  .glossar section{grid-template-columns:1fr;gap:var(--sp-2)}
}
.text code,.glossar code{font-size:.9em;background:var(--c4-lt);padding:.05em .3em}
.text,.ergebnis{min-width:0}
/* Ressortkopf mit Querformat-Illustration */
.r-kopf .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center}
.r-kopf .art{aspect-ratio:3/2;min-height:0}
.r-kopf .art img{width:100%;height:auto;display:block}
@media (max-width:54rem){.r-kopf .wrap{grid-template-columns:1fr;gap:var(--sp-4)}}
/* Ueber mich: Portraet statt Illustration im Kopf */
.ich-kopf .wrap{grid-template-columns:1fr auto}
.ich-foto{width:clamp(11rem,8rem + 10vw,20rem);height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:6px solid var(--c1)}
@media (max-width:54rem){.ich-kopf .wrap{grid-template-columns:1fr}.ich-foto{justify-self:start}}

/* Burgermenue mobil, ohne JavaScript ueber details/summary */
.site-head{position:relative}
.burger{display:none}
.burger summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:var(--t-s);min-height:2.75rem;padding:0 .25rem}
.burger summary::-webkit-details-marker{display:none}
.burger .striche{display:grid;gap:5px;width:24px}
.burger .striche i{display:block;height:3px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.burger[open] .striche i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[open] .striche i:nth-child(2){opacity:0}
.burger[open] .striche i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger-panel{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--bg);border-bottom:var(--b);box-shadow:0 12px 24px rgba(23,50,77,.08);padding:var(--sp-1) var(--gutter) var(--sp-3)}
.burger-panel a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);font-weight:700;text-decoration:none}
.burger-panel a:last-child{border-bottom:0}
.burger-panel a[aria-current]{color:var(--c3-dk)}
@media (max-width:54rem){.burger{display:block}}
@media (max-width:54rem){.ich-foto{width:100%;border-radius:0;border:0;justify-self:stretch}}
/* Kacheln: nur der Titel ist der Link, die Flaeche bleibt klickbar */
.tile{position:relative}
.tile h3 a{color:inherit;text-decoration:none}
.tile h3 a::after{content:"";position:absolute;inset:0}
.tile h3 a:focus-visible{outline:none}
.tile:focus-within{outline:3px solid var(--focus);outline-offset:-3px}
/* Autorenbild in der Zeile unter dem Titel */
img.av{width:3rem;height:3rem;border-radius:50%;background:#fff;border:2px solid var(--c1);object-fit:cover;display:block}