/* Kingmaker-Herold — imperial porphyry, gold leaf, black basalt.
   One light source: high and to the LEFT. Every highlight faces it,
   every shadow falls down and to the right. */

:root{
  --basalt-0:#08070a;
  --basalt-1:#0f0d12;
  --basalt-2:#17141a;
  --basalt-3:#211c24;
  --porphyr-0:#3a1220;
  --porphyr-1:#55202f;
  --porphyr-2:#6e2c3e;
  --porphyr-3:#8a3c50;
  --fleck-w:#e8dad8;
  --fleck-r:#c08e96;
  --gold-hi:#f6e4a8;
  --gold-1:#e3c069;
  --gold-2:#c09030;
  --gold-3:#8e6620;
  --gold-4:#5c4114;
  --gesso:#a8552a;
  --kalk:#f2ebec;
  --kalk-2:#cbbfc2;
  --kalk-3:#a89599;
  --tinte:#14090d;
  --fliess:var(--kalk-2);
  --schrift:ui-sans-serif,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --flecken:
    radial-gradient(circle at 11% 19%,rgba(232,218,216,.16) 0 1.4px,transparent 1.9px),
    radial-gradient(circle at 63% 7%,rgba(192,142,150,.14) 0 1.8px,transparent 2.4px),
    radial-gradient(circle at 34% 61%,rgba(232,218,216,.16) 0 1.1px,transparent 1.6px),
    radial-gradient(circle at 86% 44%,rgba(232,218,216,.15) 0 1.6px,transparent 2.1px),
    radial-gradient(circle at 21% 88%,rgba(192,142,150,.14) 0 1.3px,transparent 1.8px),
    radial-gradient(circle at 74% 79%,rgba(232,218,216,.14) 0 1px,transparent 1.5px),
    radial-gradient(circle at 48% 31%,rgba(192,142,150,.12) 0 .9px,transparent 1.4px),
    radial-gradient(circle at 95% 91%,rgba(232,218,216,.13) 0 1.2px,transparent 1.7px);
  --staub:
    radial-gradient(circle at 27% 41%,rgba(232,218,216,.1) 0 .8px,transparent 1.2px),
    radial-gradient(circle at 71% 13%,rgba(192,142,150,.1) 0 .7px,transparent 1.1px),
    radial-gradient(circle at 9% 72%,rgba(232,218,216,.09) 0 .9px,transparent 1.3px),
    radial-gradient(circle at 55% 88%,rgba(192,142,150,.09) 0 .8px,transparent 1.2px),
    radial-gradient(circle at 88% 57%,rgba(232,218,216,.08) 0 .7px,transparent 1.1px),
    radial-gradient(circle at 40% 6%,rgba(232,218,216,.08) 0 .6px,transparent 1px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--schrift);
  font-size:clamp(15px,.55vw + 13.2px,17px);
  line-height:1.62;
  color:var(--kalk-2);
  background:var(--basalt-0);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
p{margin:0 0 .9em}
p:last-child{margin-bottom:0}
h1,h2,h3{margin:0;font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}

.verborgen{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.gefach{max-width:1260px;margin-inline:auto;padding-inline:clamp(16px,3.6vw,46px)}

/* ---- drawn lettering: gold leaf laid over red gesso bole ---- */
.schriftzug{fill:url(#leaf);height:auto;filter:drop-shadow(2px 3px 0 rgba(4,3,5,.62))}
.krone{fill:url(#leaf)}

.sprungpfad{
  position:absolute;left:-999px;top:0;z-index:9;
  background:var(--gold-1);color:var(--tinte);padding:10px 16px;
  font-weight:700;text-decoration:none;
}
.sprungpfad:focus{left:8px;top:8px}

/* ------------------------------------------------ Kopfleiste */
.kopfleiste{
  border-bottom:1px solid rgba(227,192,105,.22);
  background:linear-gradient(168deg,#14111a 0%,var(--basalt-0) 78%);
}
.kopfleiste-kern{
  display:flex;align-items:center;gap:clamp(12px,2vw,22px);
  padding-block:clamp(10px,1.4vw,16px);
}
.kopfleiste-wappen{
  width:clamp(64px,7.6vw,124px);height:auto;border-radius:50%;
  box-shadow:-2px -2px 0 rgba(246,228,168,.16),4px 6px 18px rgba(0,0,0,.7);
}
.kopfleiste-name{
  font-size:clamp(15px,1.5vw,21px);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--kalk);line-height:1.15;
}
.kopfleiste-sub{
  display:block;font-size:clamp(10.5px,.85vw,12.5px);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);
  margin-top:3px;
}
.kopfleiste-achtzehn{
  margin-left:auto;flex:none;display:grid;place-items:center;
  width:clamp(34px,3.4vw,44px);height:clamp(34px,3.4vw,44px);border-radius:50%;
  font-size:clamp(11px,1vw,13px);font-weight:800;letter-spacing:.02em;
  color:var(--tinte);
  background:linear-gradient(155deg,var(--gold-hi),var(--gold-1) 42%,var(--gold-3));
  box-shadow:3px 4px 10px rgba(0,0,0,.65);
}

/* ------------------------------------------------ Aufgang (Stufe 0) */
.aufgang{
  --fliess:var(--kalk-2);
  position:relative;
  background:
    radial-gradient(120% 90% at 8% -10%,rgba(110,44,62,.5),transparent 62%),
    linear-gradient(172deg,var(--basalt-1),var(--basalt-0) 72%);
  border-bottom:1px solid rgba(227,192,105,.14);
}
.aufgang-kern{
  display:grid;gap:clamp(18px,2.6vw,34px);
  grid-template-columns:1fr;
  padding-block:clamp(16px,2.4vw,30px) clamp(18px,2.6vw,32px);
}
.aufgang-oben{
  font-size:clamp(10.5px,.9vw,12.5px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hi);margin-bottom:clamp(8px,1.2vw,14px);
}
.aufgang-titel{margin-bottom:clamp(10px,1.4vw,16px)}
.aufgang-titel-zug{width:min(100%,560px,52vh)}
.aufgang-lead{
  max-width:54ch;color:var(--fliess);
  font-size:clamp(14.5px,.5vw + 13px,17px);margin-bottom:clamp(12px,1.6vw,18px);
}

/* the two figures — Kingmaker's, labelled as Kingmaker's */
.aufgang-tafel{
  --fliess:var(--kalk);
  border:1px solid rgba(227,192,105,.3);
  background:
    var(--flecken),var(--staub),
    linear-gradient(158deg,var(--porphyr-1) 0%,var(--porphyr-0) 52%,#280c15 100%);
  background-size:181px 181px,97px 97px,auto;
  box-shadow:-1px -1px 0 rgba(246,228,168,.2),6px 8px 22px rgba(0,0,0,.6);
  padding:clamp(11px,1.5vw,17px) clamp(12px,1.7vw,20px) clamp(12px,1.6vw,18px);
  margin-bottom:clamp(12px,1.7vw,18px);
}
.aufgang-tafel-kopf{
  font-size:clamp(10px,.82vw,12px);font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold-hi);margin-bottom:clamp(8px,1.1vw,12px);
}
.aufgang-zahlen{display:flex;flex-wrap:wrap;gap:clamp(12px,2.6vw,38px)}
.aufgang-zahl{flex:1 1 138px;min-width:0}
.aufgang-zahl .schriftzug{height:clamp(30px,3.6vw,52px);width:auto;margin-bottom:6px}
.aufgang-zahl-name{
  font-size:clamp(11.5px,.9vw,13.5px);font-weight:600;letter-spacing:.05em;
  color:var(--kalk);line-height:1.3;
}
.aufgang-quelle{
  font-size:clamp(10.5px,.78vw,12px);color:var(--fliess);
  margin-top:clamp(7px,1vw,11px);line-height:1.45;
}

/* ------------------------------------------------ Abo (mock form) */
.abo{margin:0}
.abo-marke{
  display:block;font-size:clamp(10.5px,.85vw,12.5px);font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:7px;
}
.abo-zeile{display:flex;flex-wrap:wrap;gap:9px}
.abo-feld{
  flex:1 1 150px;min-width:0;font:inherit;font-size:16px;color:var(--kalk);
  padding:12px 14px;border:1px solid rgba(227,192,105,.4);border-radius:2px;
  background:linear-gradient(160deg,#100d13,#1c171f);
  box-shadow:inset 2px 3px 7px rgba(0,0,0,.75);
}
.abo-feld::placeholder{color:#8b7f83}
.abo-knopf{
  flex:0 0 auto;font:inherit;font-weight:800;font-size:clamp(13.5px,1vw,15px);
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinte);cursor:pointer;
  padding:12px clamp(16px,2vw,26px);border:0;border-radius:2px;
  background:linear-gradient(157deg,var(--gold-hi) 0%,var(--gold-1) 38%,var(--gold-2) 72%,var(--gold-3) 100%);
  box-shadow:-1px -1px 0 rgba(255,248,222,.7),4px 6px 14px rgba(0,0,0,.62);
  transition:transform .18s ease,filter .18s ease;
}
.abo-knopf:hover{filter:brightness(1.08)}
.abo-knopf:active{transform:translate(1px,1px)}
.abo-fehler{
  margin:8px 0 0;font-size:13px;font-weight:600;color:#ffb9a6;
}
.abo-fehler[hidden]{display:none}
.abo-hinweis{
  margin:9px 0 0;font-size:clamp(11px,.8vw,12.5px);color:var(--fliess);line-height:1.5;
}
.abo-danke{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid rgba(227,192,105,.42);border-radius:2px;
  padding:14px 16px;background:linear-gradient(158deg,#1d1720,#100d13);
}
.abo-haken{flex:none;width:26px;height:26px;fill:var(--gold-1);margin-top:2px}
.abo-danke-titel{
  font-size:clamp(14px,1.1vw,16.5px);font-weight:700;color:var(--kalk);
  letter-spacing:.03em;margin-bottom:3px;
}
.abo-danke-satz{font-size:13.5px;color:var(--kalk-2);line-height:1.5}

.aufgang-bild,.zahlen-bild,.saal-bild{
  position:relative;overflow:hidden;border-radius:2px;
  border:1px solid rgba(227,192,105,.26);
  box-shadow:-1px -1px 0 rgba(246,228,168,.14),8px 12px 30px rgba(0,0,0,.7);
  background:var(--basalt-2);
}
.aufgang-bild{aspect-ratio:3/2}
.aufgang-bild img{width:100%;height:100%;object-fit:cover;filter:brightness(1.3) contrast(1.03) saturate(1.06)}
.zahlen-bild{aspect-ratio:1/1}
.zahlen-bild img{width:100%;height:100%;object-fit:cover;filter:brightness(1.14) contrast(1.02)}
.saal-bild{aspect-ratio:4/3}
.saal-bild img{width:100%;height:100%;object-fit:cover;object-position:28% 50%;filter:brightness(1.2) contrast(1.03)}

/* ------------------------------------------------ Stufen: the ascent */
.stufe{position:relative;border-top:var(--fillet,1px) solid transparent}
.stufe::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;
  height:var(--fillet,1px);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-1) 34%,var(--gold-2) 68%,var(--gold-4));
  box-shadow:0 2px 5px rgba(0,0,0,.6);
}
.stufe-kopf{
  display:flex;align-items:flex-end;gap:clamp(12px,1.8vw,22px);
  padding-block:clamp(14px,1.9vw,24px) clamp(9px,1.2vw,14px);
}
.stufe-ziffer{
  flex:none;display:grid;place-items:center;
  width:var(--platte,50px);height:var(--platte,50px);
  border-radius:2px;
  background:linear-gradient(155deg,var(--gold-hi) 0%,var(--gold-1) 34%,var(--gold-2) 66%,var(--gold-3) 100%);
  box-shadow:-1px -1px 0 rgba(255,250,230,.75),5px 7px 16px rgba(0,0,0,.68);
}
.stufe-ziffer-zug{height:calc(var(--platte,50px) * .42);width:auto;fill:var(--tinte);filter:none}
.stufe-kicker{
  font-size:clamp(10px,.8vw,12px);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-hi);margin-bottom:6px;
}
.stufe-zug{height:var(--zug,30px);width:auto}
.stufe-lead{
  max-width:62ch;color:var(--fliess);
  font-size:clamp(14px,.4vw + 13px,16.5px);
  margin-bottom:clamp(12px,1.6vw,18px);
}
.stufe-kern{padding-bottom:clamp(17px,2vw,26px)}

.stufe-i{
  --fliess:var(--kalk-2);
  --fillet:1px;--platte:50px;--zug:clamp(24px,3vw,38px);
  background:
    radial-gradient(76% 130% at 3% -6%,rgba(85,32,47,.34),transparent 58%),
    linear-gradient(180deg,var(--basalt-0),var(--basalt-1));
}
.stufe-ii{
  --fliess:var(--kalk-2);
  --fillet:2px;--platte:58px;--zug:clamp(26px,3.4vw,44px);
  background:
    radial-gradient(90% 70% at 6% 0%,rgba(85,32,47,.42),transparent 60%),
    linear-gradient(180deg,var(--basalt-1),var(--basalt-2));
}
.stufe-iii{
  --fliess:var(--kalk-2);
  --fillet:4px;--platte:66px;--zug:clamp(28px,3.8vw,50px);
  background:
    var(--flecken),var(--staub),
    radial-gradient(100% 80% at 4% -8%,rgba(138,60,80,.38),transparent 66%),
    linear-gradient(172deg,#40141f 0%,#280d16 58%,var(--basalt-1) 100%);
  background-size:181px 181px,97px 97px,auto,auto;
}
.stufe-iv{
  --fliess:var(--kalk);
  --fillet:7px;--platte:74px;--zug:clamp(30px,4.2vw,56px);
  background:
    var(--flecken),var(--staub),
    radial-gradient(90% 80% at 3% -6%,rgba(138,60,80,.4),transparent 64%),
    linear-gradient(172deg,#5c2333 0%,#3d1420 56%,#260c14 100%);
  background-size:211px 211px,89px 89px,auto,auto;
}
.stufe-v{
  --fliess:var(--kalk);
  --fillet:11px;--platte:84px;--zug:clamp(32px,4.6vw,62px);
  background:
    var(--flecken),var(--staub),
    radial-gradient(85% 85% at 4% -4%,rgba(160,74,96,.42),transparent 62%),
    linear-gradient(170deg,#7a3145 0%,#5a2231 48%,#380f1c 100%);
  background-size:239px 239px,83px 83px,auto,auto;
  color:var(--kalk-2);
}

/* Stufe I — die Schwelle */
.schwelle-liste{display:grid;gap:clamp(9px,1vw,12px);max-width:56ch}
.schwelle-punkt{
  border-left:3px solid var(--gold-2);
  padding:2px 0 2px clamp(12px,1.4vw,18px);
  box-shadow:-1px 0 0 rgba(0,0,0,.6);
}
.schwelle-name{
  display:block;font-size:clamp(14.5px,1.05vw,17px);font-weight:700;
  color:var(--kalk);letter-spacing:.02em;margin-bottom:2px;
}
.schwelle-satz{font-size:clamp(13.5px,.95vw,15.5px);color:var(--fliess)}

/* Stufe II — die Meldung */
.meldung-liste{
  display:grid;gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.meldung-punkt{
  border-top:1px solid rgba(227,192,105,.32);
  padding-top:clamp(10px,1.3vw,15px);
}
.meldung-nr{
  display:inline-block;font-size:clamp(11px,.85vw,13px);font-weight:800;
  letter-spacing:.16em;color:var(--gold-hi);margin-bottom:5px;
}
.meldung-name{
  display:block;font-size:clamp(14.5px,1.05vw,17px);font-weight:700;
  color:var(--kalk);margin-bottom:4px;
}
.meldung-satz{font-size:clamp(13.5px,.95vw,15.5px);color:var(--fliess)}

/* Stufe III — die Zahlen + das Kerbwerk */
.zahlen-raster{
  display:grid;gap:clamp(16px,2.4vw,32px);
  grid-template-columns:1fr;align-items:stretch;
}
.zahlen-seite{display:flex;flex-direction:column;height:100%}
.zahlen-plakat{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(227,192,105,.34);border-radius:2px;
  padding:clamp(13px,1.9vw,26px);
  background:linear-gradient(158deg,rgba(24,18,24,.72),rgba(10,8,12,.82));
  box-shadow:-1px -1px 0 rgba(246,228,168,.16),5px 7px 18px rgba(0,0,0,.55);
  margin-bottom:clamp(14px,2vw,22px);
}
.zahlen-plakat .schriftzug{height:clamp(40px,8.6vw,132px);width:auto;margin:clamp(8px,1.4vw,16px) 0 10px}
.zahlen-plakat-name{
  font-size:clamp(12.5px,.95vw,14.5px);font-weight:600;color:var(--kalk);letter-spacing:.03em;
}
.zahlen-quelle{
  font-size:clamp(11px,.82vw,12.5px);color:var(--fliess);
  margin-top:clamp(10px,1.4vw,16px);padding-top:clamp(8px,1.1vw,13px);
  border-top:1px solid rgba(227,192,105,.24);
}

.kerbwerk{
  margin-top:clamp(16px,2.4vw,30px);
  --fliess:var(--kalk);
  border:1px solid rgba(227,192,105,.34);border-radius:2px;
  padding:clamp(13px,1.8vw,22px);
  background:
    var(--flecken),var(--staub),
    linear-gradient(160deg,var(--porphyr-1),var(--porphyr-0) 66%,#220a12);
  background-size:193px 193px,79px 79px,auto;
  box-shadow:-1px -1px 0 rgba(246,228,168,.2),7px 10px 26px rgba(0,0,0,.62);
}
.zahlen-marke,.kerbwerk-marke{
  font-size:clamp(10px,.8vw,12px);font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-hi);
}
.kerbwerk-marke{margin-bottom:clamp(8px,1.1vw,13px)}
.kerbwerk-kopf{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:clamp(11px,1.5vw,16px);
}
.kerbwerk-kopf .schriftzug{height:clamp(24px,3vw,40px);width:auto}
.kerbwerk-krone{width:clamp(30px,3.4vw,46px);height:auto}
.kerbwerk-reihe{
  display:flex;flex-wrap:wrap;gap:clamp(11px,1.9vw,28px);
  padding:clamp(9px,1.4vw,18px) 0;
  border-block:1px solid rgba(6,3,6,.5);
  box-shadow:0 1px 0 rgba(246,228,168,.14),0 -1px 0 rgba(246,228,168,.1) inset;
}
.kerbgruppe{display:flex;gap:clamp(3px,.45vw,6px)}
.kerbe{
  display:block;width:clamp(6px,.72vw,11px);height:clamp(28px,3.9vw,56px);
  border-radius:1px;
  background:linear-gradient(158deg,var(--gold-hi) 0%,var(--gold-1) 32%,var(--gold-2) 64%,var(--gold-3) 100%);
  box-shadow:2px 3px 0 rgba(6,3,6,.62),-1px -1px 0 rgba(255,250,230,.5);
}
.kerbwerk-satz{
  margin-top:clamp(10px,1.4vw,15px);font-size:clamp(12.5px,.9vw,14.5px);
  color:var(--kalk);max-width:58ch;
}

/* Stufe IV — der Saal */
.saal-raster{
  display:grid;gap:clamp(16px,2.4vw,32px);grid-template-columns:1fr;align-items:start;
}
.saal-liste{display:grid;gap:clamp(10px,1.2vw,14px)}
.saal-posten{display:flex;gap:clamp(10px,1.2vw,14px);align-items:flex-start}
.saal-pip{
  flex:none;width:12px;height:12px;margin-top:6px;border-radius:1px;transform:rotate(45deg);
  background:linear-gradient(155deg,var(--gold-hi),var(--gold-1) 40%,var(--gold-3));
  box-shadow:1px 2px 0 rgba(6,3,6,.6);
}
.saal-name{
  font-size:clamp(14px,1.02vw,16.5px);font-weight:700;
  color:var(--kalk);letter-spacing:.02em;margin-right:.45em;
}
.saal-satz{font-size:clamp(13px,.92vw,15px);color:var(--fliess)}

/* Stufe V — der Thron */
.thron-fragen{
  display:grid;gap:clamp(13px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:clamp(20px,2.8vw,32px);
}
.thron-fragen-kopf{margin-bottom:clamp(16px,2.4vw,30px)}
.thron-fragen-zug{height:clamp(20px,2.4vw,32px);width:auto}
.thron-paar{
  border-top:2px solid rgba(246,228,168,.42);
  padding-top:clamp(9px,1.2vw,14px);
}
.thron-frage{
  display:block;font-size:clamp(14px,1.02vw,16.5px);font-weight:700;
  color:var(--kalk);margin-bottom:4px;
}
.thron-antwort{font-size:clamp(13px,.92vw,15px);color:var(--kalk)}
.thron-abo{
  border:1px solid rgba(246,228,168,.5);border-radius:2px;
  padding:clamp(14px,1.8vw,21px);
  background:linear-gradient(160deg,rgba(20,9,13,.72),rgba(8,4,7,.86));
  box-shadow:-1px -1px 0 rgba(246,228,168,.22),8px 12px 30px rgba(0,0,0,.6);
}
.thron-schluss{
  margin-top:clamp(14px,2vw,20px);font-size:clamp(13px,.95vw,15.5px);
  color:var(--kalk);max-width:66ch;
}

/* ------------------------------------------------ Fundament */
.fundament{
  border-top:11px solid transparent;
  background:linear-gradient(180deg,#1a0a11,var(--basalt-0) 60%);
  position:relative;
}
.fundament::before{
  content:"";position:absolute;inset-block-start:-11px;inset-inline:0;height:11px;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-1) 30%,var(--gold-2) 62%,var(--gold-4));
}
.fundament-kern{
  display:grid;gap:clamp(16px,2.4vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding-block:clamp(18px,2.4vw,30px) clamp(12px,1.5vw,17px);
}
.fundament-wappen{
  width:74px;height:74px;border-radius:50%;margin-bottom:10px;
  box-shadow:-2px -2px 0 rgba(246,228,168,.14),4px 6px 16px rgba(0,0,0,.7);
}
.fundament-titel{
  font-size:clamp(11px,.85vw,13px);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-hi);margin-bottom:9px;
}
.fundament-satz{font-size:clamp(12.5px,.9vw,14px);color:var(--fliess)}
.fundament-wege{display:grid;gap:7px}
.fundament-wege a{
  color:var(--kalk);text-decoration:none;font-size:clamp(12.5px,.9vw,14px);
  border-bottom:1px solid rgba(227,192,105,.4);justify-self:start;
}
.fundament-wege a:hover{color:var(--gold-1)}
.fundament-hilfe{
  font-size:clamp(12.5px,.9vw,14px);color:var(--kalk);font-weight:600;
}
.fundament-achtzehn{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-size:12.5px;font-weight:800;color:var(--tinte);margin-bottom:9px;
  background:linear-gradient(155deg,var(--gold-hi),var(--gold-1) 42%,var(--gold-3));
  box-shadow:3px 4px 10px rgba(0,0,0,.65);
}
.fundament-unten{
  border-top:1px solid rgba(227,192,105,.2);
  padding-block:clamp(11px,1.4vw,16px) clamp(15px,2vw,23px);
}
.fundament-fein{font-size:clamp(11.5px,.84vw,13px);color:var(--fliess);max-width:98ch}

/* ------------------------------------------------ Fokus */
:is(a,button,input,summary):focus-visible{
  outline:3px solid var(--gold-hi);outline-offset:3px;
}

/* ------------------------------------------------ Breiten */
@media (min-width:700px){
  .aufgang-zahl{flex:1 1 220px}
  .zahlen-raster{grid-template-columns:minmax(0,.56fr) minmax(0,1.44fr)}
  .saal-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
@media (min-width:900px){
  .kerbwerk-reihe{justify-content:space-between}
}
@media (min-width:1000px){
  .aufgang-kern{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
  .aufgang-titel-zug{width:min(100%,600px,52vh)}
  .aufgang-bild{aspect-ratio:1/1}
  .stufe-i .stufe-kern{padding-left:clamp(0px,4vw,64px)}
}

/* ------------------------------------------------ Bewegung */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .stufe-kopf,.schwelle-punkt,.meldung-punkt,.saal-posten,.kerbwerk{
  margin-top:clamp(16px,2.4vw,30px);
      animation:steigen linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%;
    }
    @keyframes steigen{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:translateY(0)}
    }
  }
}

/* Short viewports: the first screen must still hold both figures and the field. */
@media (max-height:790px){
  .kopfleiste-wappen{width:clamp(56px,5.2vw,84px)}
  .kopfleiste-kern{padding-block:9px}
  .aufgang-kern{padding-block:10px 16px}
  .aufgang-titel-zug,
  .aufgang-kern .aufgang-titel-zug{width:min(100%,600px,44vh)}
  .aufgang-oben{margin-bottom:7px}
  .aufgang-titel{margin-bottom:7px}
  .aufgang-lead{font-size:14px;margin-bottom:8px}
  .aufgang-tafel{padding:8px 11px 9px;margin-bottom:10px}
  .aufgang-quelle{margin-top:6px}
  .abo-marke{margin-bottom:5px}
  .aufgang-tafel-kopf{margin-bottom:7px}
  .aufgang-zahl .schriftzug{height:clamp(28px,3.1vw,42px)}
  .abo-hinweis{font-size:11px;margin-top:7px}
}