/* ============================================================
   IRONCLOSING · Startseite
   Nur was es auf index.html gibt. Alles Gemeinsame: ic.css
   ============================================================ */

/* ---------- Bühne ----------------------------------------- */
.buehne{
  position:relative;
  /* Genau eine Bildschirmhöhe: Überschrift, Knöpfe und Video stehen
     beim Öffnen der Seite gemeinsam im Bild, ohne zu scrollen. */
  min-height:100svh;
  padding-top:clamp(84px,10vh,116px);
  padding-bottom:clamp(28px,4vh,56px);
  overflow:hidden;
}
/* Zwei Lichtquellen im Rücken, sehr schwach. Sie machen den
   Unterschied zwischen "dunkles Grau" und "Raum". */
.buehne-licht{
  position:absolute;
  inset:-30% -10% auto;
  height:150%;
  pointer-events:none;
  background:
    radial-gradient(58% 44% at 22% 8%, rgba(47,211,154,.13), transparent 62%),
    radial-gradient(50% 40% at 86% 30%, rgba(11,107,83,.20), transparent 66%),
    radial-gradient(90% 60% at 50% 0%, rgba(233,241,237,.045), transparent 70%);
  animation:atmen 15s ease-in-out infinite alternate;
}
@keyframes atmen{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2%,1.5%,0) scale(1.07)}
}
/* Ein liegendes Gitter, wie eingeritzt. Läuft nach unten aus. */
.buehne-gitter{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(233,241,237,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,241,237,.05) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 82% at 50% 0%,#000 5%,transparent 68%);
  -webkit-mask-image:radial-gradient(120% 82% at 50% 0%,#000 5%,transparent 68%);
}
.buehne-innen{position:relative;z-index:2}
/* Bühne mittig: Überschrift und Knöpfe zentriert über dem Video. */
.buehne-kopf{max-width:920px;margin-inline:auto;text-align:center}
.buehne-knoepfe{justify-content:center}
/* Etwas kleiner als d-xxl sonst: die Zeile muss sich den Bildschirm
   mit dem Video teilen. */
.buehne h1{margin:18px 0 0;font-size:clamp(2.7rem,6.4vw,5rem)}
.buehne .fuehrung{margin-top:26px;max-width:600px}
.buehne-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* Untereinander sähen sie sonst unterschiedlich breit und damit
   ausgefranst aus. Gleiche Breite, mittig, bequem zu treffen. */
@media (max-width:520px){
  .buehne-knoepfe{flex-direction:column;align-items:center;gap:12px}
  .buehne-knoepfe .knopf{width:100%;max-width:320px;justify-content:center}
}

/* ---------- Video-Monolith -------------------------------- */
.monolith{
  position:relative;
  margin-top:clamp(26px,3.4vw,44px);
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--edge-2);
  background:linear-gradient(168deg,var(--iron-3),var(--iron));
  box-shadow:var(--schein-hoch), 0 0 120px -60px rgba(47,211,154,.5);
  aspect-ratio:16/9;
}
.monolith video,.monolith iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
/* Mittig gesetzt und etwas schmaler als die Bahn — das Video ist der
   Blickfang, soll den Bildschirm aber nicht randlos ausfüllen. */
/* Die Breite folgt der verbleibenden Bildschirmhöhe (Seitenverhältnis
   16/9), damit Video und Hinweis beim Öffnen vollständig zu sehen sind.
   Die 400 px sind Kopf, Knöpfe und die Zeile unter dem Video — knapp
   gerechnet, damit das Video am Rechner nicht verloren in der Mitte steht.
   Nach oben deckelt 1100 px; breiter geht ohnehin nicht, weil die Bahn
   selbst bei 1240 px endet. Der max()-Boden verhindert, dass es auf
   flachen Fenstern winzig wird. */
.monolith-mitte{
  margin-inline:auto;
  width:min(1100px, 100%, max(420px, calc((100svh - 475px) * 16 / 9)));
}

/* Hinweis unter dem Video. Dieselbe Breitenformel wie die Platte, damit
   die Zeile nie breiter läuft als das Video darüber. */
.video-hinweis{
  margin:16px auto 0;
  width:min(1100px, 100%, max(420px, calc((100svh - 475px) * 16 / 9)));
  text-align:center;
  color:var(--smoke);
  font-size:.92rem;
  line-height:1.55;
}

/* Flache Fenster (Laptops mit 768–800 px Höhe): lieber den Kopf enger
   setzen als das Video kleiner machen. */
@media (max-height:820px){
  .buehne{padding-top:clamp(76px,9vh,96px)}
  .buehne h1{margin-top:14px;font-size:clamp(2.4rem,5.4vw,4.1rem)}
  .buehne-knoepfe{margin-top:18px}
  .monolith{margin-top:clamp(16px,2.2vw,28px)}
  .video-hinweis{margin-top:10px;font-size:.86rem}
  /* Der Boden der Breitenformel darf hier etwas tiefer liegen, sonst
     rutscht die Zeile unter dem Video aus dem Bild. */
  .monolith-mitte,.video-hinweis{
    width:min(1100px, 100%, max(392px, calc((100svh - 410px) * 16 / 9)));
  }
}

/* Sehr flache Geräte (iPhone SE und ältere): noch einmal enger, damit
   das Video auch dort vollständig ins Bild passt. */
@media (max-height:640px){
  .buehne{padding-top:68px}
  .buehne h1{margin-top:10px;font-size:clamp(2rem,5vw,3.4rem)}
  .buehne-knoepfe{margin-top:14px;gap:10px}
  .monolith{margin-top:12px}
  .video-hinweis{margin-top:8px;font-size:.82rem}
}
.monolith-leer{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:20px;
  text-align:center;
  padding:32px;
}
.abspielen{
  position:relative;
  width:78px;height:78px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(7,10,9,.42);
  backdrop-filter:blur(10px);
  display:grid;
  place-content:center;
  cursor:pointer;
  transition:transform .34s cubic-bezier(.22,1,.36,1),background-color .3s,border-color .3s;
}
.abspielen::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  border:1px solid rgba(47,211,154,.5);
  animation:welle 2.8s ease-out infinite;
}
@keyframes welle{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.9);opacity:0}
}
.abspielen:hover{transform:scale(1.07);background:rgba(47,211,154,.16);border-color:var(--em)}
.abspielen svg{margin-left:4px}

/* ---------- 01 · Rechner ---------------------------------- */
.rechner{display:grid;gap:clamp(24px,3.4vw,44px);align-items:start}
@media (min-width:940px){.rechner{grid-template-columns:1fr .88fr}}
.regler-platte{padding:clamp(26px,3.2vw,40px)}
.regler{padding-block:22px;border-bottom:1px solid var(--edge)}
.regler:last-of-type{border-bottom:0;padding-bottom:6px}
.regler-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:16px;
}
.regler-name{font-size:.97rem;color:var(--chalk-2)}
.regler-wert{
  font-family:var(--mono);
  font-size:1.12rem;font-weight:500;
  color:var(--em);
  font-variant-numeric:tabular-nums;
}
.regler-skala{
  display:flex;justify-content:space-between;
  margin-top:4px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--smoke-2);
}
.ergebnis{
  position:relative;
  padding:clamp(30px,3.4vw,42px);
  border-radius:var(--r-l);
  border:1px solid var(--edge-2);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(47,211,154,.14), transparent 62%),
    linear-gradient(168deg,var(--iron-3),var(--iron));
  box-shadow:var(--schein-hoch);
  overflow:hidden;
  text-align:center;
  transition:border-color .5s ease;
}
.ergebnis-zahl{
  font-family:var(--mono);font-weight:500;
  font-size:clamp(2.4rem,7.2vw,4rem);
  line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(176deg,#c9ffe9,var(--em) 52%,var(--em-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-block:14px 6px;
  transition:filter .4s ease;
}
/* Ab einer gewissen Höhe glüht die Zahl. Kleine Belohnung. */
.ergebnis.heiss{border-color:rgba(224,167,94,.34)}
.ergebnis.heiss .ergebnis-zahl{
  background:linear-gradient(176deg,#ffe6c2,var(--heat) 48%,var(--heat-2));
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 26px rgba(255,157,84,.42));
}
.ergebnis-jahr{
  font-family:var(--mono);font-size:.77rem;letter-spacing:.1em;
  color:var(--smoke);
  padding-top:18px;margin-top:20px;
  border-top:1px solid var(--edge);
}
.ergebnis-jahr b{color:var(--chalk-2);font-weight:500}
.rechner-fussnote{
  margin-top:22px;padding-left:16px;
  border-left:2px solid var(--edge-2);
  font-size:.92rem;color:var(--smoke);
}

/* ---------- 02 · Bruchstellen ----------------------------- */
.bruch-raster{
  display:grid;gap:1px;
  background:var(--edge);
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  overflow:hidden;
}
@media (min-width:860px){.bruch-raster{grid-template-columns:repeat(3,1fr)}}
.bruch{background:var(--iron);padding:clamp(28px,3.2vw,40px);transition:background-color .45s ease}
.bruch:hover{background:var(--iron-2)}
.bruch-zahl{font-family:var(--mono);font-size:.67rem;letter-spacing:.2em;color:var(--em);margin-bottom:22px}
.bruch h3{font-family:var(--serif);font-size:1.82rem;line-height:1.1;margin-bottom:14px;color:var(--chalk)}
.bruch p{color:var(--smoke);font-size:.97rem;margin:0}

.zitat{margin:clamp(44px,6vw,72px) auto 0;max-width:840px;text-align:center}
.zitat blockquote{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.24;letter-spacing:-.02em;
  color:var(--chalk);text-wrap:balance;
}
.zitat blockquote em{font-style:italic;color:var(--em)}
.zitat-strich{width:44px;height:1px;background:var(--em);margin:26px auto 16px}

/* ---------- 03 · Der Weg ---------------------------------- */
.weg{position:relative}
@media (min-width:820px){.weg{padding-left:96px}}
/* Die Schiene füllt sich, während man scrollt. */
.schiene{
  position:absolute;
  left:29px;top:8px;bottom:8px;
  width:1px;background:var(--edge-2);
  display:none;
}
@media (min-width:820px){.schiene{display:block}}
.schiene-fuell{
  position:absolute;inset:0 0 auto;
  width:100%;height:var(--fortschritt,0%);
  background:linear-gradient(180deg,var(--em),var(--em-3));
  box-shadow:0 0 16px rgba(47,211,154,.6);
}
.phase{
  position:relative;
  padding-block:clamp(26px,3.2vw,38px);
  border-top:1px solid var(--edge);
}
.phase:first-child{border-top:0;padding-top:0}
.knoten-punkt{
  /* Sitzt mittig auf der Schiene: .weg hat 96px Innenabstand,
     die Schiene liegt bei 29px — also 96 − 29 − 5 = 72 zurück. */
  position:absolute;
  left:-72px;top:calc(clamp(26px,3.2vw,38px) + 11px);
  width:11px;height:11px;border-radius:99px;
  background:var(--iron-4);
  border:1px solid var(--edge-3);
  display:none;
  transition:background-color .5s ease,box-shadow .5s ease,transform .5s ease;
}
@media (min-width:820px){.knoten-punkt{display:block}}
.phase:first-child .knoten-punkt{top:11px}
.phase.erreicht .knoten-punkt{
  background:var(--em);border-color:var(--em);
  box-shadow:0 0 18px rgba(47,211,154,.8);
  transform:scale(1.25);
}
.phase-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;margin-bottom:14px}
/* Ohne Schiene (unter 820px) gehört die Nummer über die Überschrift.
   Sonst steht sie bei kurzen Titeln daneben und bei langen darüber. */
@media (max-width:819px){
  .phase-kopf{flex-direction:column;align-items:flex-start;gap:7px}
}
.phase-nr{font-family:var(--mono);font-size:.67rem;letter-spacing:.2em;color:var(--smoke-2);transition:color .5s ease}
.phase.erreicht .phase-nr{color:var(--em)}
.phase h3{font-family:var(--serif);font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.1;color:var(--chalk)}
.phase p{color:var(--smoke);max-width:62ch}
.phase-liste{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.phase-liste li{
  padding:7px 14px;border:1px solid var(--edge);border-radius:999px;
  font-size:.84rem;color:var(--chalk-2);background:rgba(233,241,237,.022);
}

/* ---------- 04 · Umfang (Bento) --------------------------- */
/* Vier Kacheln, zwei Spalten, zwei Zeilen. Jede Zeile ist so hoch wie ihr
   längerer Text — die beiden nebeneinander sind dadurch immer gleich hoch,
   die untere Zeile darf niedriger ausfallen als die obere. Kein
   grid-auto-rows:1fr: das zwänge die kurzen Kacheln unten auf die Höhe der
   Kachel mit der Pegel-Zeichnung, und darunter stünde nur Leere. */
.bento{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){
  .bento{grid-template-columns:repeat(2,1fr)}
}
.kachel{
  position:relative;
  padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  background:linear-gradient(168deg,var(--iron-2),var(--iron));
  overflow:hidden;
  isolation:isolate;
  transition:border-color .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.kachel:hover{border-color:var(--edge-2);transform:translateY(-3px)}
/* Ein Lichtkegel folgt der Maus. Läuft nur, wo es einen Zeiger gibt. */
.kachel::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(47,211,154,.1), transparent 66%);
  opacity:0;transition:opacity .5s ease;
  z-index:-1;
}
@media (hover:hover){.kachel:hover::before{opacity:1}}
.kachel-symbol{
  width:38px;height:38px;
  display:grid;place-content:center;
  border-radius:11px;
  border:1px solid var(--edge-2);
  background:rgba(47,211,154,.08);
  color:var(--em);
  margin-bottom:20px;
}
.kachel h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;margin-bottom:9px;color:var(--chalk)}
.kachel p{color:var(--smoke);font-size:.95rem;margin:0}
.kachel-marke{
  display:block;
  margin-top:18px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--em);
}
/* Die erste Kachel bekommt eine eigene Zeichnung. */
.wellen{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:24px}
.wellen span{
  flex:1;
  border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--em),rgba(47,211,154,.14));
  height:var(--h,30%);
  animation:pegeln 2.6s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
  opacity:.85;
}
@keyframes pegeln{
  from{transform:scaleY(.55)}
  to{transform:scaleY(1)}
}
.wellen span{transform-origin:bottom}

/* ---------- 05 · Passung ---------------------------------- */
.passung{display:grid;gap:14px}
@media (min-width:860px){.passung{grid-template-columns:1fr 1fr}}
.spalte{
  padding:clamp(26px,3vw,38px);
  border-radius:var(--r-l);
  border:1px solid var(--edge);
  background:linear-gradient(168deg,var(--iron-2),var(--iron));
}
.spalte-ja{
  border-color:rgba(47,211,154,.26);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(47,211,154,.09), transparent 70%),
    linear-gradient(168deg,var(--iron-2),var(--iron));
}
.spalte h3{
  display:flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:1.02rem;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:24px;padding-bottom:20px;
  border-bottom:1px solid var(--edge);
}
/* „jeden“ — linke Hälfte grün, rechte Hälfte rot. Der harte Schnitt sitzt
   in der Wortmitte und fällt damit mitten in das „d“. Höhere Spezifität
   als .display em, deshalb ohne !important. */
.display em.em-geteilt{
  background-image:linear-gradient(90deg,var(--em) 0 50%,#ff5a4a 50% 100%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.spalte-ja h3{color:var(--em)}
.spalte-nein h3{color:var(--smoke)}
.spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.spalte li{display:flex;gap:13px;align-items:flex-start;font-size:.98rem;line-height:1.5}
.spalte-ja li{color:var(--chalk-2)}
.spalte-nein li{color:var(--smoke)}
/* Emoji als Listenzeichen — feste Breite, damit der Text bündig läuft. */
.haken{
  flex:none;width:1.35em;text-align:center;
  font-size:.95rem;line-height:1.55;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.spalte-mal{
  flex:none;font-size:1.1rem;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* ---------- 06 · Ergebnisse ------------------------------- */
.faelle{display:grid;gap:14px}
@media (min-width:820px){.faelle{grid-template-columns:repeat(3,1fr)}}
.fall{
  padding:clamp(26px,3vw,34px);
  border:1px solid var(--edge);
  border-radius:var(--r-l);
  background:linear-gradient(168deg,var(--iron-2),var(--iron));
  display:flex;flex-direction:column;gap:18px;
}
.fall-zahl{
  font-family:var(--mono);font-weight:500;
  font-size:2.5rem;line-height:1;letter-spacing:-.04em;
  color:var(--em);font-variant-numeric:tabular-nums;
}
.fall-zahl small{display:block;font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-2);margin-top:9px}
.fall p{color:var(--chalk-2);font-size:.97rem;margin:0;flex:1}
.fall-wer{
  display:flex;align-items:center;gap:12px;
  padding-top:18px;border-top:1px solid var(--edge);
  font-size:.88rem;color:var(--smoke);
}
.fall-kreis{
  width:34px;height:34px;flex:none;
  border-radius:999px;
  border:1px solid var(--edge-2);
  background:linear-gradient(150deg,var(--iron-4),var(--iron-2));
  display:grid;place-content:center;
  font-family:var(--serif);font-size:.95rem;color:var(--chalk-2);
}


/* ---------- 08 · Fragen -----------------------------------
   Schmale Spalte, aber linksbündig: die Fluchtlinie am linken
   Rand zieht sich sonst nicht durch die ganze Seite.          */
.fragen-spalte{max-width:770px}
.fragen{border-top:1px solid var(--edge)}
.frage-block{border-bottom:1px solid var(--edge)}
.frage-knopf{
  width:100%;
  display:flex;align-items:center;gap:22px;
  padding:26px 4px;
  background:none;border:0;
  text-align:left;cursor:pointer;
  font-size:clamp(1.04rem,1.7vw,1.2rem);
  font-weight:500;letter-spacing:-.012em;
  color:var(--chalk-2);
  transition:color .3s ease;
}
.frage-knopf:hover{color:var(--chalk)}
.frage-knopf[aria-expanded="true"]{color:var(--em)}
.frage-knopf span{flex:1}
.frage-kreuz{
  position:relative;flex:none;
  width:15px;height:15px;
}
.frage-kreuz::before,.frage-kreuz::after{
  content:"";position:absolute;inset:50% 0 auto;
  height:1px;background:currentColor;
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.frage-kreuz::after{transform:rotate(90deg)}
.frage-knopf[aria-expanded="true"] .frage-kreuz::after{transform:rotate(0);opacity:0}
.frage-antwort{
  overflow:hidden;
  height:0;
  transition:height .46s cubic-bezier(.22,1,.36,1);
}
.frage-antwort-innen{
  padding:0 60px 28px 0;
  color:var(--smoke);
  max-width:74ch;
}

/* ---------- Abschluss ------------------------------------- */
.abschluss{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--edge);
  background:
    radial-gradient(72% 90% at 50% 108%, rgba(47,211,154,.20), transparent 66%),
    linear-gradient(180deg,var(--void),var(--iron));
  text-align:center;
}
.abschluss-gitter{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(233,241,237,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,241,237,.05) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(90% 80% at 50% 100%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(90% 80% at 50% 100%,#000,transparent 72%);
}
.abschluss-innen{position:relative;z-index:2}
.abschluss .fuehrung{margin:26px auto 0;max-width:560px}
.abschluss-schritte{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 30px;margin-top:38px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--smoke-2);
}
.abschluss-schritte b{color:var(--em);font-weight:500;margin-right:8px}

/* ---------- Andock-Leiste --------------------------------- */
/* Nur noch der Knopf — die Leiste ist reine Halterung, kein eigener
   Rahmen mehr. Sonst säße ein Knopf sichtbar in einem zweiten Knopf. */
.andock{
  position:fixed;
  left:50%;bottom:22px;
  transform:translate(-50%,140%);
  z-index:90;
  display:flex;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease;
  opacity:0;
}
.andock.da{transform:translate(-50%,0);opacity:1}
/* flex:none und nowrap: sonst schrumpft der Knopf im Flex-Behälter und
   die Beschriftung bricht auf schmalen Geräten zweizeilig um. */
.andock .knopf{
  flex:none;
  white-space:nowrap;
  box-shadow:var(--glut-hoch), 0 18px 44px -14px rgba(0,0,0,.9);
}
@media (max-width:560px){
  .andock{bottom:14px;max-width:calc(100% - 24px)}
  .andock .knopf{padding:12px 20px;font-size:.86rem}
}

/* ---------- Redaktions-Hinweis ---------------------------- */
.hinweis{
  position:fixed;
  right:16px;bottom:16px;
  z-index:120;
  width:min(320px,calc(100% - 32px));
  padding:18px 20px;
  border:1px dashed rgba(224,167,94,.55);
  border-radius:var(--r);
  background:rgba(12,16,15,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  font-size:.84rem;line-height:1.5;color:var(--chalk-2);
}
.hinweis h4{
  font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--heat);margin-bottom:10px;
}
.hinweis ol{margin:0;padding-left:17px;display:grid;gap:5px;color:var(--smoke)}
.hinweis-zu{
  position:absolute;top:10px;right:10px;
  width:24px;height:24px;
  border:0;background:none;color:var(--smoke-2);
  cursor:pointer;border-radius:6px;line-height:1;
}
.hinweis-zu:hover{color:var(--chalk);background:rgba(255,255,255,.06)}