@charset "utf-8";
/* ===========================================================================
   cathiwagner.de – Fire Soul
   ---------------------------------------------------------------------------
   Bildsprache: Der Rabenrat führt Akten. Enya wurde für tot erklärt, der
   Abgrund ist per Verordnung gesperrt. Also sieht die Seite aus wie ein
   amtliches Dokument aus dieser Welt – Aktenpapier, Rabentinte, hauchdünne
   Linien, ein roter Überdruck wie ein Stempel.

   Genau einmal bricht das Papier ab: die Seite fällt in den Abgrund. Dort
   steht der Klappentext. Danach wieder Papier, dort wird gekauft.

   Keine Schatten, keine Rundungen, keine Farbverläufe als Deko. Die einzige
   Ausnahme ist die Abbruchkante, und die zeigt etwas.
   Mobile first, keine externen Ressourcen.
   =========================================================================== */

/* --------------------------------------------------------------- Schriften */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex';
  src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ Token */
:root {
  /* Papier: Archivbestand, kühl und leicht olivstichig – kein Creme */
  --papier:      #e3ddcc;
  --papier-tief: #d5cebb;

  /* Rabentinte: schwarz mit Blauschimmer, wie Federn */
  --tinte:       #171c24;
  --tinte-2:     #4b5462;
  --rabe:        #2b3947;
  --linie:       rgba(43, 57, 71, .3);

  /* Abgrund */
  --abgrund:     #0f141b;
  --abgrund-2:   #182029;
  --asche:       #a9b0bc;
  --asche-2:     #6f7788;

  /* Phönix: Überdruck. Kommt selten vor und dann laut. */
  --glut:        #b83a1c;
  --glut-dunkel: #9e2f14;   /* für Text auf Papier, wegen Kontrast */
  --glut-hell:   #e0703f;
  --gilt:        #a8813c;

  --breit:  1160px;
  --schmal: 640px;
  --schritt: clamp(3.5rem, 9vw, 6.5rem);

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-text: 'Plex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: 1.125rem;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--glut-dunkel); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }
:focus-visible { outline: 2px solid var(--glut); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--glut); color: #fff; padding: .7rem 1rem; z-index: 200; }
.skip:focus { left: 0; top: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  margin: 0 0 .5em;
  color: var(--tinte);
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4rem); letter-spacing: -0.02em; line-height: 1.06; }
h2 { font-size: clamp(1.9rem, 6.5vw, 3.1rem); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.2rem, 4vw, 1.5rem); font-weight: 700; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; max-width: 66ch; }

/* --------------------------------------------------------------- Abschnitte */
.huelle { width: min(100% - 2.2rem, var(--breit)); margin-inline: auto; }
.huelle--schmal { width: min(100% - 2.2rem, var(--schmal)); margin-inline: auto; }

.abschnitt { padding-block: var(--schritt); }
.abschnitt--eng { padding-block: clamp(2.2rem, 6vw, 3.6rem); }

.abschnitt--abgrund { background: var(--abgrund); color: var(--asche); }
.abschnitt--abgrund h1,
.abschnitt--abgrund h2,
.abschnitt--abgrund h3 { color: #f0ece2; }
.abschnitt--abgrund a { color: var(--glut-hell); }
.abschnitt--abgrund a:hover { color: #fff; }

.abschnitt--rand { border-top: 1px solid var(--linie); }

/* Die Abbruchkante: harte Linie, kein Verlauf. Das Papier hört auf. */
.kante { height: 0; border-top: 3px solid var(--tinte); }
.kante--auftauchen { height: 0; border-top: 3px solid var(--tinte); }

/* -------------------------------------------------------------------- Kopf */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: var(--papier);
  border-bottom: 1px solid var(--tinte);
}
.kopf__innen {
  width: min(100% - 2.2rem, var(--breit)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 58px;
}
.marke { text-decoration: none; color: var(--tinte); display: flex; align-items: baseline; gap: .55rem; }
.marke__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.marke__zusatz { font-size: .72rem; color: var(--tinte-2); letter-spacing: .06em; }

.menue-schalter {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--tinte); color: var(--tinte);
  font-family: var(--font-text); font-size: .88rem; padding: .4rem .75rem; cursor: pointer;
}
.menue-schalter__balken { width: 15px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }

.navi { display: none; }
.navi[data-offen="true"] {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--papier); border-bottom: 2px solid var(--tinte);
  padding: 0 1.1rem 1rem;
}
.navi a { color: var(--tinte); text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--linie); font-size: 1rem; }
.navi__cta { color: var(--glut) !important; font-weight: 600; }

@media (min-width: 880px) {
  .menue-schalter { display: none; }
  .navi { display: flex !important; position: static; flex-direction: row; align-items: center; gap: 1.6rem; padding: 0; border: 0; }
  .navi a { border: 0; padding: 0; font-size: .93rem; }
  .navi__cta { border: 1px solid var(--glut); padding: .45rem .9rem !important; }
  .navi__cta:hover { background: var(--glut); color: #fff !important; }
}

/* ------------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-weight: 600; font-size: 1rem;
  padding: .95rem 1.4rem; border: 1px solid var(--tinte); background: none; color: var(--tinte);
  text-decoration: none; cursor: pointer; line-height: 1.25; text-align: center;
  transition: background-color .15s linear, color .15s linear;
}
.knopf b { font-weight: 600; }

.knopf--glut { background: var(--glut); border-color: var(--glut); color: #fff !important; }
.knopf--glut:hover { background: var(--tinte); border-color: var(--tinte); color: #fff !important; }

.knopf--tinte { border-color: var(--tinte); color: var(--tinte) !important; }
.knopf--tinte:hover { background: var(--tinte); color: var(--papier) !important; }

.abschnitt--abgrund .knopf--tinte { border-color: var(--asche); color: var(--asche) !important; }
.abschnitt--abgrund .knopf--tinte:hover { background: var(--asche); color: var(--abgrund) !important; }

.knopf--breit { width: 100%; }
.knopf--klein { padding: .6rem 1rem; font-size: .9rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.5rem 0; }
.knopfreihe--mitte { justify-content: center; }

/* -------------------------------------------------------------------- Held */
.held { padding-block: clamp(2rem, 5vw, 3.4rem) clamp(2.5rem, 7vw, 4.5rem); }
.held__gitter { display: grid; gap: clamp(1.8rem, 5vw, 3.2rem); align-items: start; }
@media (min-width: 840px) {
  .held__gitter { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 3.6rem; }
}

.held__cover img { width: 100%; }
.held__bildunter { font-size: .78rem; color: var(--tinte-2); margin: .6rem 0 0; max-width: none; }

/* Damit sofort klar ist, was das hier ist. Cold Traffic weiß gar nichts. */
.held__gattung {
  font-size: .95rem; color: var(--glut-dunkel); font-weight: 600;
  margin: 0 0 .7rem; letter-spacing: .01em;
}
.abschnitt--abgrund .held__gattung { color: var(--glut-hell); }
.held__titel { margin-bottom: .35em; max-width: 18ch; }
.held__anriss { font-size: clamp(1.05rem, 2.4vw, 1.22rem); max-width: 46ch; }
.held__genre { font-size: 1rem; color: var(--tinte-2); max-width: 46ch; }

.sterne {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  margin: 1.4rem 0 0; font-size: .98rem; color: var(--tinte-2);
}
.sterne__zeichen { color: var(--glut-dunkel); font-size: 1.15rem; letter-spacing: .08em; }
.sterne b { color: var(--tinte); font-weight: 600; }
.abschnitt--abgrund .sterne { color: var(--asche); }
.abschnitt--abgrund .sterne__zeichen { color: var(--glut-hell); }
.abschnitt--abgrund .sterne b { color: #f0ece2; }

/* Zweitknopf braucht ein Argument, nicht nur eine Richtung. */
.knopfreihe--haupt { margin-block: 1.6rem 0; gap: .8rem; }
.knopfreihe--haupt .knopf { padding: 1.05rem 1.6rem; font-size: 1.05rem; }

/* ------------------------------------------------------- Die Akte des Rats */
.akte { border-top: 2px solid var(--tinte); margin-bottom: 1.6rem; max-width: 34rem; }
.akte__titel { font-size: .85rem; color: var(--tinte-2); margin: 0 0 .5rem; }
.akte__zeile {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.akte__feld { font-size: .82rem; color: var(--tinte-2); letter-spacing: .03em; }
.akte__wert { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

.abschnitt--abgrund .akte { border-top-color: var(--asche); }
.abschnitt--abgrund .akte__zeile { border-bottom-color: var(--asche-2); }
.abschnitt--abgrund .akte__titel,
.abschnitt--abgrund .akte__feld { color: var(--asche-2); }
.abschnitt--abgrund .akte__wert { color: #f0ece2; }

.stempel {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--glut); border: 2px solid var(--glut);
  padding: .1em .45em; transform: rotate(-3.5deg);
  mix-blend-mode: multiply; opacity: .92;
}
.abschnitt--abgrund .stempel { color: var(--glut-hell); border-color: var(--glut-hell); mix-blend-mode: normal; }

.vermerk {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem); line-height: 1.3;
  border-left: 2px solid var(--glut); padding-left: 1rem; margin: 0 0 1.8rem;
  max-width: 26ch;
}
.abschnitt--abgrund .vermerk { color: #f0ece2; }

/* Angaben: drei Fakten, als Datenzeile gesetzt statt als Kachelreihe */
.angaben {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie); margin-top: 1.8rem;
}
.angaben > div {
  padding: 1rem 1.4rem;
  border-right: 1px solid var(--linie);
}
.angaben > div:first-child { padding-left: 0; }
.angaben > div:last-child { border-right: 0; padding-right: 0; }
.angaben__wert { font-family: var(--font-display); font-size: clamp(1.1rem, 3.4vw, 1.5rem); font-weight: 700; display: block; margin-bottom: .25rem; }
.angaben__was { font-size: .76rem; color: var(--tinte-2); }
.abschnitt--abgrund .angaben { border-color: var(--asche-2); }
.abschnitt--abgrund .angaben > div { border-color: var(--asche-2); }
.abschnitt--abgrund .angaben__was { color: var(--asche-2); }

/* ------------------------------------------------------------- Klappentext */
.abgrund__gitter { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 900px) {
  .abgrund__gitter { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; }
}

.klapp { max-width: 56ch; }
.klapp__auftakt {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.24; margin-bottom: 1rem;
}
.abschnitt--abgrund .klapp__auftakt { color: #f0ece2; }
.klapp p { font-size: 1.05rem; }
.klapp__schluss {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.25rem, 4.4vw, 1.7rem); line-height: 1.32;
  color: var(--glut-hell); margin-top: 1.6rem;
}

.tropen { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 1.6rem 0 0; }
.tropen li { font-size: .82rem; padding: .28rem .6rem; border: 1px solid var(--linie); color: var(--tinte-2); }
.abschnitt--abgrund .tropen li { border-color: var(--asche-2); color: var(--asche); }

/* ------------------------------------------------------------- Leserstimmen
   Screenshots von Rezensionen sehen immer nach Screenshot aus: fremdes Grau,
   fremde Rundungen, unlesbar auf dem Handy. Deshalb gesetzte Zitate. */
.stimmen { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 820px) { .stimmen { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } }

.stimme { margin: 0; border-top: 1px solid var(--asche-2); padding-top: 1.2rem; }
.stimme__zitat {
  font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.28; color: #f0ece2; margin: 0 0 .8rem;
}
.stimme__dazu { font-size: .95rem; color: var(--asche); margin: 0 0 .9rem; }
.stimme__wer { font-size: .82rem; color: var(--asche-2); font-style: normal; }
.stimme__sterne { color: var(--glut-hell); font-size: .95rem; letter-spacing: .1em; display: block; margin-bottom: .7rem; }

.abschnitt:not(.abschnitt--abgrund) .stimme { border-top-color: var(--linie); }
.abschnitt:not(.abschnitt--abgrund) .stimme__zitat { color: var(--tinte); }
.abschnitt:not(.abschnitt--abgrund) .stimme__dazu { color: var(--tinte-2); }
.abschnitt:not(.abschnitt--abgrund) .stimme__wer { color: var(--tinte-2); }
.abschnitt:not(.abschnitt--abgrund) .stimme__sterne { color: var(--glut); }

/* ------------------------------------------------------------------ Kaufen */
.kaufen { margin-top: 2.4rem; border-top: 2px solid var(--tinte); }
.kaufweg { display: grid; gap: 1.4rem; padding: 2rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 820px) {
  .kaufweg { grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 2.4rem; }
}
.kaufweg--haupt {
  background: var(--papier-tief);
  padding-inline: clamp(1rem, 3vw, 2rem);
  border-bottom: 2px solid var(--tinte);
}
.kaufweg img { width: 100%; }
.kaufweg h3 { margin-bottom: .3rem; }
.kaufweg p { font-size: .96rem; margin-bottom: .6rem; }
.kaufweg ul { margin: 0; padding-left: 1.05rem; font-size: .92rem; color: var(--tinte-2); }
.kaufweg li { margin-bottom: .2rem; }
.kaufweg__preis {
  font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 700;
  line-height: 1; margin: 0 0 .5rem;
}
.kaufweg__preis small { display: block; font-family: var(--font-text); font-size: .74rem; font-weight: 400; color: var(--tinte-2); margin-top: .4rem; }
.kaufweg__aktion { display: grid; gap: .6rem; min-width: min(100%, 15rem); }

/* ----------------------------------------------------------------- Galerie */
.galerie { display: grid; gap: .9rem; margin-top: 2.2rem; }
@media (min-width: 700px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie img { border: 1px solid var(--linie); width: 100%; }
.abschnitt--abgrund .galerie img { border-color: var(--asche-2); }

/* ----------------------------------------------------------------- Autorin */
.autorin { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 840px) { .autorin { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 3rem; } }
.autorin img { border: 1px solid var(--tinte); width: 100%; }
.abschnitt--abgrund .autorin img { border-color: var(--asche-2); }

/* --------------------------------------------------------------- Newsletter
   Bewusst klein gehalten. Das ist eine Fußnote, kein Ziel. */
.notiz {
  border: 1px solid var(--linie); border-left: 3px solid var(--glut);
  padding: clamp(1.2rem, 4vw, 1.8rem);
  display: grid; gap: 1.4rem;
}
@media (min-width: 820px) { .notiz { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2.4rem; align-items: start; } }
.notiz h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.notiz p { font-size: .96rem; }
.abschnitt--abgrund .notiz { border-color: var(--asche-2); border-left-color: var(--glut-hell); }

/* ---------------------------------------------------------------- Formular */
.feld { margin-bottom: .9rem; }
.feld label { display: block; font-size: .84rem; margin-bottom: .3rem; color: var(--tinte-2); }
.feld input[type="text"], .feld input[type="email"] {
  width: 100%; padding: .75rem .8rem; font-family: var(--font-text); font-size: 1rem;
  background: #fff; color: var(--tinte); border: 1px solid var(--tinte); border-radius: 0;
}
.feld input::placeholder { color: #96907f; }
.feld input:focus { outline: 2px solid var(--glut); outline-offset: -2px; }

.abschnitt--abgrund .feld label { color: var(--asche-2); }
.abschnitt--abgrund .feld input { background: var(--abgrund-2); color: #f0ece2; border-color: var(--asche-2); }

.zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-size: .84rem; color: var(--tinte-2); margin-bottom: 1rem; }
.zustimmung input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--glut); flex: none; }
.abschnitt--abgrund .zustimmung { color: var(--asche); }

.captcha { margin: 0 0 1rem; }
.captcha .g-recaptcha { transform-origin: 0 0; }
@media (max-width: 400px) { .captcha .g-recaptcha { transform: scale(.86); } }

.honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.klein { font-size: .78rem; color: var(--tinte-2); }
.abschnitt--abgrund .klein { color: var(--asche-2); }

.meldung { padding: .8rem .9rem; margin-bottom: 1rem; font-size: .92rem; border: 1px solid; }
.meldung--gut { border-color: #4a7a48; color: #2c5c2b; background: #dfe8d8; }
.meldung--schlecht { border-color: var(--glut); color: var(--glut); background: #f0dfd6; }
.erfolg h3 { color: var(--glut); }

/* --------------------------------------------------------------------- FAQ */
.faq { margin-top: 2rem; border-top: 1px solid var(--linie); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; padding: .95rem 0; font-weight: 600; font-size: 1rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--glut); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding-bottom: 1rem; font-size: .96rem; margin: 0; }
.abschnitt--abgrund .faq, .abschnitt--abgrund .faq details { border-color: var(--asche-2); }

/* --------------------------------------------------------------------- Fuß */
.fuss { background: var(--abgrund); color: var(--asche); padding-block: 3rem 1.4rem; }
.fuss a { color: var(--asche); text-decoration: none; }
.fuss a:hover { color: var(--glut-hell); }
.fuss__innen { width: min(100% - 2.2rem, var(--breit)); margin-inline: auto; display: grid; gap: 2rem; }
@media (min-width: 800px) { .fuss__innen { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; } }
.fuss__marke { font-family: var(--font-display); font-size: 1.5rem; color: #f0ece2; margin-bottom: .4rem; }
.fuss__titel { color: #f0ece2; font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.fuss__text { font-size: .92rem; }
.fuss__spalte a { display: block; padding: .28rem 0; font-size: .92rem; }
.fuss__spalte .knopf { display: inline-flex; margin-top: .7rem; }
.fuss__linkknopf { background: none; border: 0; color: var(--asche); font-family: var(--font-text); font-size: .92rem; padding: .28rem 0; cursor: pointer; display: block; text-align: left; }
.fuss__linkknopf--inline { display: inline; text-decoration: underline; padding: 0; }
.fuss__linkknopf:hover { color: var(--glut-hell); }
.fuss__zeile {
  width: min(100% - 2.2rem, var(--breit)); margin: 2.4rem auto 0;
  padding-top: 1rem; border-top: 1px solid var(--asche-2);
  font-size: .78rem; color: var(--asche-2); max-width: none;
}
.fuss--kompakt { padding-block: 2rem 1.3rem; }
.fuss--kompakt .fuss__zeile { margin-top: 0; border-top: 0; text-align: center; }

/* ------------------------------------------------------------ Sticky-Leiste */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: .5rem; padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background: var(--papier); border-top: 2px solid var(--tinte);
  transform: translateY(115%); transition: transform .2s linear;
}
.sticky[data-sichtbar="true"] { transform: translateY(0); }
.sticky .knopf { flex: 1; padding: .75rem .5rem; font-size: .9rem; }
.sticky__neben { flex: 0 1 auto !important; }
@media (min-width: 880px) { .sticky { display: none; } }

/* ---------------------------------------------------------------- Consent */
.consent { position: fixed; inset: auto 0 0 0; z-index: 120; padding: .7rem; display: flex; justify-content: center; }
.consent[hidden] { display: none; }
.consent__box {
  width: min(100%, 620px); background: var(--papier);
  border: 2px solid var(--tinte); padding: 1.2rem; max-height: 82vh; overflow-y: auto;
}
.consent__titel { font-size: 1.3rem; margin-bottom: .4rem; }
.consent__text { font-size: .9rem; margin-bottom: .9rem; }
.consent__optionen { display: grid; gap: .7rem; margin-bottom: 1rem; }
.consent__option { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--tinte-2); }
.consent__option input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--glut); flex: none; }
.consent__option strong { display: block; color: var(--tinte); }
.consent__option--fest { opacity: .65; }
.consent__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.consent__knoepfe .knopf { flex: 1 1 auto; min-width: 145px; padding: .7rem 1rem; }
.consent__mehr { background: none; border: 0; color: var(--tinte-2); text-decoration: underline; font-family: var(--font-text); font-size: .88rem; cursor: pointer; padding: .5rem; }
.consent__klein { font-size: .76rem; color: var(--tinte-2); margin: .8rem 0 0; }

/* ------------------------------------------------------------- Hilfsmittel */
.mitte { text-align: center; }
.mitte p, .mitte .vermerk { margin-inline: auto; }
.abstand-oben { margin-top: 2rem; }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }