/* BetRepublic Hinweisdienst — Österreich
   Richtung: Ehrenhalle bei Nacht. Ochsenblutrote Tinte als Grund, Messing und
   Silber als Werkstoffe. Signatur ist das LICHTRASTER: ein schräg einfallendes
   Feld harter, ungleich breiter Lichtbalken mit einem Goldbalken in großem
   Abstand. Flächen sind entweder erhaben (aufgesetzte Platten mit Lichtkante)
   oder eingraviert (in den Grund geschnitten). Zierschrift Serife, Lauftext
   Schreibmaschine.

   Aufbau: die Seite ist eine Folge von Bildflächen in voller Schirmhöhe.
   Jede Fläche trägt einen Gedanken und setzt ihn an eine andere Stelle des
   Rahmens — unten links, im oberen Band, seitlich geteilt, als einzelne Zeile.
   Kein Raster gleich großer Kästen, kein Ablaufplan, kein Fangschuss am Ende. */

:root{
  /* Gold — #E5C945 und #CCAF1F aus assets/betrepublic-logo.svg entnommen */
  --gold-licht:#fdf4c6;
  --gold-hell:#f2df8f;
  --gold:#E5C945;
  --gold-tief:#CCAF1F;
  --gold-schatten:#8a7211;
  --gold-tinte:#1c1405;

  /* Silber — #ffffff und #BFBFBF aus der Wortmarke entnommen */
  --silber-hell:#ececec;
  --silber:#BFBFBF;
  --silber-tief:#8b8b8b;

  /* Grund: Ochsenblut über Tinte */
  --grund:#150a0f;
  --grund-tief:#0a0507;
  --grund-hoch:#2a141c;
  --grund-platte:#1d0e14;

  --elfen:#f7f0e7;
  --elfen-weich:#d9cbbf;
  --elfen-matt:#b3a297;
  --warnrot:#ffb0a0;

  --zierschrift:"Palatino Linotype",Palatino,"Iowan Old Style","Book Antiqua",Georgia,"Times New Roman",serif;
  --laufschrift:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"DejaVu Sans Mono",Consolas,monospace;

  /* Gewebe: feine Rillen im Signaturwinkel, auf allen Bändern */
  --gewebe:
    repeating-linear-gradient(103deg,rgba(247,240,231,0) 0 44px,rgba(247,240,231,.028) 44px 45.5px,rgba(247,240,231,0) 45.5px 94px),
    repeating-linear-gradient(103deg,rgba(0,0,0,0) 0 15px,rgba(0,0,0,.17) 15px 16px,rgba(0,0,0,0) 16px 31px);

  --kante:10px;
  --satzbreite:1180px;
  --dachhoehe:92px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--laufschrift);
  font-size:15.5px;
  line-height:1.74;
  color:var(--elfen-weich);
  background-color:var(--grund);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-family:var(--zierschrift);font-weight:600;line-height:1.14;color:var(--elfen)}
a{color:var(--gold-hell)}
[hidden]{display:none!important}

:is(a,button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold-licht);
  outline-offset:3px;
  border-radius:6px;
}

.uebergehen{
  position:absolute;left:-9999px;top:0;z-index:30;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--gold-tinte);
  padding:.8em 1.4em;border-radius:999px;
  background-image:linear-gradient(180deg,var(--gold-hell),var(--gold-tief));
}
.uebergehen:focus{left:16px;top:16px}

.satz{width:100%;max-width:var(--satzbreite);margin:0 auto;padding:0 28px}

/* ---------- Werkstoffe: Gold- und Silberzug ---------- */

.goldzug,.silberzug{
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.goldzug{
  background-image:linear-gradient(176deg,
    #fffbe8 0%,var(--gold-licht) 10%,var(--gold) 33%,var(--gold-tief) 48%,
    #b99b17 57%,var(--gold) 70%,var(--gold-hell) 84%,#fffdf0 100%);
  filter:drop-shadow(0 2px 0 rgba(10,5,7,.6)) drop-shadow(0 0 26px rgba(229,201,69,.22));
}
.silberzug{
  background-image:linear-gradient(176deg,
    #ffffff 0%,var(--silber-hell) 18%,var(--silber) 44%,#8f8f8f 55%,
    #e6e6e6 74%,#ffffff 100%);
  filter:drop-shadow(0 2px 0 rgba(10,5,7,.66)) drop-shadow(0 0 20px rgba(191,191,191,.16));
}

/* ---------- Signatur: das Lichtraster ---------- */

.lichtraster{
  position:absolute;inset:-10% -6%;z-index:1;pointer-events:none;
  background-image:
    repeating-linear-gradient(103deg,
      rgba(247,240,231,0) 0 44px,rgba(247,240,231,.02) 46px,rgba(247,240,231,.07) 52px,
      rgba(247,240,231,.02) 58px,rgba(247,240,231,0) 60px 97px),
    repeating-linear-gradient(103deg,
      rgba(0,0,0,0) 0 15px,rgba(0,0,0,.24) 15px 16px,rgba(0,0,0,0) 16px 31px),
    repeating-linear-gradient(103deg,
      rgba(229,201,69,0) 0 228px,rgba(229,201,69,.06) 231px,rgba(229,201,69,.3) 236px,
      rgba(229,201,69,.06) 241px,rgba(229,201,69,0) 244px 470px),
    radial-gradient(ellipse 58% 64% at 20% 4%,rgba(229,201,69,.14),rgba(21,10,15,0) 68%);
  -webkit-mask-image:linear-gradient(101deg,#000 0,rgba(0,0,0,.7) 40%,rgba(0,0,0,.14) 72%,transparent 92%);
  mask-image:linear-gradient(101deg,#000 0,rgba(0,0,0,.7) 40%,rgba(0,0,0,.14) 72%,transparent 92%);
}

/* ---------- Schaltflächen ---------- */

.taste{
  display:inline-block;border:0;cursor:pointer;flex:0 0 auto;
  font-family:var(--laufschrift);font-size:.79rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-tinte);
  padding:1.05em 2.1em;border-radius:999px;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0) 46%),
    linear-gradient(180deg,var(--gold-licht) 0%,var(--gold) 30%,var(--gold-tief) 62%,#a98d15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.98),
    inset 0 -2px 0 rgba(58,45,4,.45),
    inset 0 0 0 1px rgba(120,98,10,.5),
    0 10px 24px -12px rgba(229,201,69,.75),
    0 18px 32px -20px rgba(0,0,0,.95);
  transition:transform .18s ease,box-shadow .18s ease;
}
.taste:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.98),
    inset 0 -2px 0 rgba(58,45,4,.45),
    inset 0 0 0 1px rgba(120,98,10,.5),
    0 14px 30px -10px rgba(229,201,69,.9),
    0 22px 38px -18px rgba(0,0,0,.95);
}

/* ---------- Vordach ---------- */

.vordach{
  position:relative;z-index:8;
  background-image:linear-gradient(180deg,#1d0d13,rgba(10,5,7,.4));
  border-bottom:1px solid rgba(0,0,0,.8);
  box-shadow:0 1px 0 rgba(247,240,231,.055);
}
.vordach-kern{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;
}
.vordach-wappen{
  display:block;padding:9px 17px;border-radius:var(--kante);
  background-image:
    linear-gradient(160deg,rgba(247,240,231,.10),rgba(247,240,231,0) 58%),
    linear-gradient(180deg,#2b141c,#130910);
  box-shadow:inset 0 1px 0 rgba(247,240,231,.2),inset 0 0 0 1px rgba(191,191,191,.15),0 10px 22px -16px #000;
}
.vordach-wappen img{width:198px;height:37px}
.vordach-stempel{
  display:flex;align-items:center;gap:11px;
  font-size:.69rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--elfen-matt);
}
.vordach-volljahr,.grundmauer-volljahr{
  display:inline-grid;place-items:center;width:33px;height:33px;border-radius:999px;
  font-size:.67rem;font-weight:700;letter-spacing:0;color:var(--gold-tinte);
  background-image:linear-gradient(180deg,var(--gold-licht),var(--gold-tief));
  box-shadow:inset 0 1px 0 rgba(255,253,240,.95),inset 0 -2px 0 rgba(58,45,4,.35),0 7px 16px -10px rgba(229,201,69,.85);
}

/* ---------- Bildflächen: eine Fläche, ein Gedanke ---------- */

.aufschlag,.ansage,.reichweite,.zusage,.nachfrage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;
  min-height:100svh;
}
.aufschlag{min-height:calc(100vh - var(--dachhoehe));min-height:calc(100svh - var(--dachhoehe))}

/* Enge oder flache Fenster: Lesbarkeit schlägt die volle Schirmhöhe. */
@media (max-width:640px),(max-height:660px){
  .aufschlag,.ansage,.reichweite,.zusage,.nachfrage{min-height:0}
}

/* Gemeinsame Auszeichnung: Schlagwort mit eingelegter Goldkante */

.abschnitt-spruch{
  font-size:.7rem;font-weight:700;letter-spacing:.23em;text-transform:uppercase;
  color:var(--gold);margin:0 0 clamp(15px,2.2vw,21px);
}
.abschnitt-spruch::before{
  content:"";display:block;width:74px;height:2px;margin-bottom:17px;
  background-image:linear-gradient(90deg,var(--gold),rgba(229,201,69,0));
  box-shadow:0 0 12px -1px rgba(229,201,69,.7);
}

/* ---------- Fläche 1: Aufschlag — Satz unten links am Bild ---------- */

.aufschlag{
  display:flex;flex-direction:column;
  padding-bottom:clamp(32px,5vh,72px);
  background-color:var(--grund);
  background-image:linear-gradient(178deg,#1c0d13 0%,var(--grund) 42%,var(--grund-tief) 100%);
}
.aufschlag-kern{order:1;position:relative;z-index:2;padding-top:clamp(34px,5vh,60px)}
.aufschlag-schau{
  order:2;position:relative;z-index:1;
  height:clamp(188px,48vw,296px);margin-top:auto;padding-top:clamp(26px,4vh,40px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 20%,#000 76%,transparent 100%);
}
.aufschlag-schau img{
  width:100%;height:100%;object-fit:cover;object-position:52% 46%;
  filter:saturate(.96) contrast(1.05) brightness(1.12);
}
.aufschlag-ruf{
  font-size:clamp(2.15rem,6.4vw,4.05rem);
  line-height:1.06;letter-spacing:-.012em;margin:0;
}
.aufschlag-ruf span{display:block}
.aufschlag-vorspann{
  margin-top:clamp(18px,2.6vw,26px);max-width:50ch;
  font-size:.98rem;color:var(--elfen);
}
/* Fremdes Wort: der Werbesatz des Anbieters, als Zitat gekennzeichnet */
.aufschlag-fremdwort{color:var(--gold-hell)}
.aufschlag .meldebogen{margin-top:clamp(22px,3vw,32px);max-width:540px}

@media (min-width:1001px){
  /* Der Satz sitzt am Boden der Fläche, das Bild steht vom Sturz bis zum
     Boden an der rechten Flanke und löst sich zum Satzspiegel hin auf. */
  .aufschlag{justify-content:flex-end;padding-bottom:clamp(52px,8vh,104px)}
  .aufschlag-kern{padding-top:clamp(96px,15vh,168px)}
  .aufschlag-schau{
    position:absolute;inset:0 0 0 auto;width:56vw;height:auto;margin:0;padding:0;order:0;
    -webkit-mask-image:linear-gradient(94deg,transparent 0,rgba(0,0,0,.06) 12%,rgba(0,0,0,.34) 26%,#000 52%);
    mask-image:linear-gradient(94deg,transparent 0,rgba(0,0,0,.06) 12%,rgba(0,0,0,.34) 26%,#000 52%);
  }
  .aufschlag-wortteil{max-width:560px}
}

/* ---------- Meldebogen ---------- */

.meldebogen{
  position:relative;
  padding:clamp(20px,3vw,27px);
  border-radius:var(--kante);
  background-image:
    linear-gradient(158deg,rgba(247,240,231,.08),rgba(247,240,231,0) 44%),
    linear-gradient(180deg,var(--grund-hoch) 0%,#200f16 46%,#150a0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(247,240,231,.21),
    inset 0 0 0 1px rgba(191,191,191,.13),
    inset 0 -42px 54px -48px rgba(229,201,69,.6),
    0 34px 60px -32px rgba(0,0,0,.95);
}
.meldebogen-schild{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--elfen);margin-bottom:12px;
}
.meldebogen-zeile{display:flex;gap:11px;flex-wrap:wrap}
.meldebogen-eingabe{
  flex:1 1 205px;min-width:0;
  font-family:var(--laufschrift);font-size:.96rem;color:var(--elfen);
  padding:1.05em 1.3em;border:0;border-radius:999px;
  background-color:#241118;
  background-image:linear-gradient(180deg,#331a23 0%,#1c0d13 60%,#160a0f 100%);
  box-shadow:
    inset 0 1px 0 rgba(247,240,231,.27),
    inset 0 0 0 1px rgba(191,191,191,.18),
    0 8px 18px -12px rgba(0,0,0,.9);
}
.meldebogen-eingabe::placeholder{color:#a6928a}
.meldebogen-eingabe[aria-invalid="true"]{
  box-shadow:inset 0 1px 0 rgba(247,240,231,.22),inset 0 0 0 2px #e07a63,0 8px 18px -12px rgba(0,0,0,.9);
}
.meldebogen-warnung{margin-top:12px;font-size:.85rem;font-weight:700;color:var(--warnrot)}
.meldebogen-warnung:empty{display:none}
.meldebogen-fussnote{margin-top:14px;font-size:.78rem;line-height:1.65;color:var(--elfen-matt)}
.meldebogen-empfang{display:flex;gap:14px;align-items:flex-start}
.meldebogen-haken{
  flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  color:var(--gold-tinte);
  background-image:linear-gradient(180deg,var(--gold-licht),var(--gold-tief));
  box-shadow:inset 0 1px 0 rgba(255,253,240,.95),0 8px 20px -12px rgba(229,201,69,.95);
}
.meldebogen-empfang-ruf{font-size:1.12rem;letter-spacing:.005em}
.meldebogen-empfang-satz{margin-top:8px;font-size:.87rem;color:var(--elfen-weich)}

/* Silberkante: jede erhabene Platte fängt oben Licht — Glanz #ffffff,
   Mittelton #BFBFBF, Schatten #8f8f8f, Rückwurf als weicher Schein */
.meldebogen,.ansage-tafel{position:relative}
.meldebogen::before,.ansage-tafel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  border-radius:var(--kante) var(--kante) 0 0;
  background-image:linear-gradient(90deg,
    rgba(191,191,191,0) 0,#ffffff 16%,var(--silber) 46%,#8f8f8f 72%,rgba(191,191,191,0) 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.72),0 0 13px -2px rgba(191,191,191,.55);
}

/* ---------- Fläche 2: Ansage — Schrift im oberen Band ---------- */

.ansage{
  display:flex;flex-direction:column;
  padding:clamp(52px,9vh,112px) 0 clamp(46px,7vh,92px);
  background-image:var(--gewebe),linear-gradient(180deg,var(--grund-tief) 0%,#190b11 58%,#110609 100%);
}
.ansage-kern{
  flex:1;position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(34px,7vh,86px);
}
.ansage-ruf{
  font-size:clamp(1.9rem,5.9vw,3.6rem);
  line-height:1.07;letter-spacing:-.012em;max-width:19ch;
}
.ansage-unten{display:grid;gap:clamp(24px,3.4vw,44px);align-items:end}
.ansage-fliess{
  position:relative;max-width:56ch;
  padding-left:clamp(18px,2.2vw,26px);
  font-size:.94rem;line-height:1.82;color:var(--elfen);
}
.ansage-fliess::before{
  content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:3px;border-radius:999px;
  background-image:linear-gradient(180deg,var(--gold-licht),var(--gold-tief) 46%,rgba(138,114,17,.25));
  box-shadow:0 0 16px -2px rgba(229,201,69,.75);
}
.ansage-tafel{
  overflow:hidden;border-radius:var(--kante);
  background-image:linear-gradient(180deg,#24121a,#140a0f);
  box-shadow:
    inset 0 1px 0 rgba(247,240,231,.18),
    inset 0 0 0 1px rgba(191,191,191,.11),
    0 28px 50px -30px rgba(0,0,0,.95);
}
.ansage-tafel img{width:100%;height:clamp(168px,26vw,214px);object-fit:cover;filter:saturate(.86) contrast(1.03)}
@media (min-width:900px){
  .ansage-unten{grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:clamp(30px,4vw,64px)}
  .ansage-tafel{justify-self:end;width:320px}
}

/* ---------- Fläche 3: Reichweite — seitlich geteilt ---------- */

.reichweite{
  display:grid;grid-template-columns:minmax(0,1fr);align-content:stretch;
  background-image:var(--gewebe),linear-gradient(180deg,#110609 0%,#1c0d13 70%,#160a0f 100%);
}
.reichweite-bild{position:relative;min-height:clamp(186px,46vw,290px)}
.reichweite-bild img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;filter:sepia(.5) saturate(.85) contrast(1.05) brightness(.9) hue-rotate(-14deg);
}
.reichweite-bild::after{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,rgba(30,14,20,.3) 0,rgba(17,6,9,.92) 100%),
    linear-gradient(0deg,rgba(42,20,28,.42),rgba(42,20,28,.42));
}
.reichweite-kern{
  position:relative;z-index:2;align-self:center;
  width:100%;max-width:660px;margin:0 auto;
  padding:clamp(38px,6vh,72px) 28px clamp(46px,7vh,86px);
}
.reichweite-ruf{font-size:clamp(1.55rem,3.6vw,2.4rem);letter-spacing:-.008em}
.reichweite-satz{
  margin-top:clamp(17px,2.4vw,23px);max-width:54ch;
  font-size:.89rem;color:var(--elfen-weich);
}
.reichweite-wort{color:var(--gold-hell);font-weight:700}
@media (min-width:900px){
  .reichweite{grid-template-columns:minmax(0,44%) minmax(0,1fr)}
  .reichweite-bild{min-height:0}
  .reichweite-bild::after{
    background-image:
      linear-gradient(97deg,rgba(21,10,15,.06) 0,rgba(21,10,15,.34) 56%,rgba(22,10,15,.96) 100%),
      linear-gradient(0deg,rgba(42,20,28,.42),rgba(42,20,28,.42));
  }
  .reichweite-kern{
    margin:0;max-width:680px;
    padding:clamp(56px,9vh,112px) clamp(30px,4vw,60px) clamp(56px,9vh,112px) clamp(36px,5vw,76px);
  }
}

/* ---------- Fläche 4: Zusage — eine Zeile, darunter das Bildband ---------- */

.zusage{
  display:flex;flex-direction:column;
  padding-top:clamp(56px,13vh,148px);
  padding-bottom:clamp(228px,42vh,404px);
  background-image:linear-gradient(180deg,#160a0f 0%,#23111a 40%,#110609 100%);
}
.zusage-kern{position:relative;z-index:2}
.zusage-ruf{font-size:clamp(1.9rem,5.6vw,3.5rem);line-height:1.08;letter-spacing:-.012em}
.zusage-ruf span{display:block}
.zusage-satz{margin-top:clamp(18px,2.6vw,26px);max-width:46ch;font-size:.98rem;color:var(--elfen)}
.zusage-bild{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  height:clamp(206px,38vh,368px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 30%,#000 68%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 30%,#000 68%);
}
.zusage-bild img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:saturate(.8) contrast(1.06) brightness(.86);
}
/* Das Band versinkt im Grund, statt an der Flächenkante abgeschnitten zu werden. */
.zusage-bild::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(17,6,9,0) 46%,rgba(15,6,8,.72) 78%,#110609 100%);
}

/* ---------- Fläche 5: Nachfrage — dichter als die übrigen, eingraviert ---------- */

.nachfrage{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(50px,8vh,98px) 0;
  background-image:var(--gewebe),linear-gradient(180deg,#110609 0%,#1a0b11 42%,#0c0507 100%);
}
.nachfrage-kern{position:relative;z-index:2}
.nachfrage-kopf{margin-bottom:clamp(24px,4vh,42px)}
.nachfrage-ruf{font-size:clamp(1.55rem,3.6vw,2.4rem);letter-spacing:-.008em}
.nachfrage-lauf{display:grid;gap:0 clamp(28px,4.4vw,60px)}
.nachfrage-stueck{
  padding:clamp(15px,2vw,20px) 0;
  border-top:1px solid rgba(0,0,0,.85);
  box-shadow:0 -1px 0 rgba(247,240,231,.12);
}
.nachfrage-wort{font-size:1rem;color:var(--elfen)}
.nachfrage-antwort{margin-top:8px;font-size:.85rem;color:var(--elfen-weich)}
@media (min-width:900px){
  .nachfrage-lauf{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Grundmauer ---------- */

.grundmauer{
  position:relative;
  padding:clamp(46px,6vw,74px) 0 34px;
  background-image:var(--gewebe),linear-gradient(180deg,#0c0507 0%,#070304 100%);
  border-top:1px solid rgba(0,0,0,.9);
  box-shadow:inset 0 1px 0 rgba(247,240,231,.06);
}
.grundmauer-spalten{
  display:grid;gap:30px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.grundmauer-wappen{
  display:inline-block;padding:10px 16px;border-radius:var(--kante);
  background-image:linear-gradient(180deg,#25121a,#100709);
  box-shadow:inset 0 1px 0 rgba(247,240,231,.15),inset 0 0 0 1px rgba(191,191,191,.13);
}
.grundmauer-wappen img{width:186px;height:35px}
.grundmauer-satz{margin-top:15px;font-size:.83rem;color:var(--elfen-matt)}
.grundmauer-titelzug{
  font-size:.68rem;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin-bottom:13px;
}
.grundmauer-pfade{display:grid;gap:9px;font-size:.85rem}
.grundmauer-pfade a{color:var(--elfen-weich);text-decoration:none;border-bottom:1px solid rgba(191,191,191,.32)}
.grundmauer-pfade a:hover{color:var(--gold-licht);border-bottom-color:var(--gold)}
.grundmauer-volljahr{margin-bottom:13px}
.grundmauer-hilfe{font-size:.83rem;color:var(--elfen-weich)}
.grundmauer-hilfe b{color:var(--elfen);font-weight:700}
.grundmauer-abschluss{
  margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(0,0,0,.9);
  box-shadow:0 -1px 0 rgba(247,240,231,.06);
  font-size:.78rem;line-height:1.66;color:var(--elfen-matt);
}
.grundmauer-kleingedrucktes{margin-top:10px}

/* ---------- Bewegung ---------- */

@keyframes hebt{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
@keyframes schleicht{from{transform:translate3d(-1.6%,0,0)}to{transform:translate3d(1.6%,0,0)}}

@media (prefers-reduced-motion:no-preference){
  .aufschlag .abschnitt-spruch,.aufschlag-ruf,.aufschlag-vorspann,.aufschlag .meldebogen{
    animation:hebt .78s cubic-bezier(.2,.75,.3,1) both;
  }
  .aufschlag-ruf{animation-delay:.07s}
  .aufschlag-vorspann{animation-delay:.14s}
  .aufschlag .meldebogen{animation-delay:.21s}
  .lichtraster{animation:schleicht 26s ease-in-out infinite alternate}

  /* Nur kleine Elemente laufen auf der Ansichtszeitleiste; sie liegen alle
     unterhalb des ersten Schirms und stehen am Ende ihres Bereichs voll da. */
  @supports (animation-timeline:view()){
    .steigt{
      animation:hebt linear both;
      animation-timeline:view();
      animation-range:entry 2% entry 36%;
    }
  }
}

/* ---------- Schmale Fenster ---------- */

@media (max-width:640px){
  body{font-size:15px;overflow-wrap:break-word;hyphens:auto}
  .vordach-wappen img{width:164px;height:31px}
  .vordach-stempel{font-size:.6rem;letter-spacing:.13em}
  .vordach-volljahr{width:29px;height:29px;font-size:.6rem}
  .taste{width:100%;text-align:center}
  .lichtraster{opacity:.62}
  .zusage{padding-bottom:clamp(196px,54vw,268px)}
  .zusage-bild{height:clamp(180px,50vw,250px)}
}
@media (max-width:400px){
  .satz,.reichweite-kern{padding-left:17px;padding-right:17px}
  .meldebogen{padding:17px}
  .aufschlag-ruf{font-size:clamp(1.95rem,9.4vw,2.5rem)}
  .ansage-fliess{padding-left:14px}
}

/* ---------- Flache Fenster: das Eingabefeld bleibt im ersten Schirm ---------- */

@media (max-height:700px){
  .vordach-kern{padding-top:12px;padding-bottom:12px}
  .aufschlag-kern{padding-top:clamp(30px,6vh,62px)}
  .aufschlag{padding-bottom:clamp(24px,4vh,52px)}
  .aufschlag-ruf{font-size:clamp(1.9rem,5.2vw,3.1rem)}
  .aufschlag-vorspann{margin-top:14px}
  .aufschlag .meldebogen{margin-top:18px}
  .abschnitt-spruch{margin-bottom:12px}
  .abschnitt-spruch::before{margin-bottom:12px}
}