/* goldisch.de – Stylesheet der Werbeseite.

   Ein Blatt für die ganze Seite: Sie besteht aus einer Startseite und zwei Textseiten,
   ein zweites Stylesheet wäre eine Datei mehr ohne Gewinn. Kein Framework, keine fremde
   Quelle – Schriften, Bilder und dieses Blatt liegen im eigenen Verzeichnis (die Content
   Security Policy in webproject/csp.py lässt nichts anderes zu).

   Aufbau: Farbtoken (hell und dunkel), Grundlagen, Gerüst, Kopf, Bühne, Kacheln, Für wen,
   Betaprogramm mit Formular, Selbst hosten, Fuß, Textseiten.

   Farben kommen aus goldisch selbst (static/css/goldisch.css): Gold als Leitfarbe auf
   warmem Grau. Hier ist Gold großzügiger eingesetzt als in der App – die Seite soll
   auffallen, die App soll sich beim Lesen zurückhalten. */

@import url("../fonts/fonts.378b590ad93c.css");

/* ───── FARBEN ───── */

:root {
  color-scheme: light dark;

  --grund:       #ffffff;
  --grund-2:     #f7f5ef;   /* Abschnitte zum Absetzen */
  --grund-3:     #efece1;   /* Bildbänder, Eingabefelder */
  --tinte:       #1d1d1b;
  --tinte-2:     #4a4a47;
  --tinte-3:     #7b786f;
  --linie:       #e5e1d4;
  --linie-2:     #cfcabb;

  --gold:        #d4a72c;   /* Flächen (mit dunklem Text) */
  --gold-2:      #b08a1e;   /* Rahmen, Hover */
  --gold-3:      #8a6d12;   /* Text auf hellem Grund */
  --gold-weich:  #fbf3d9;   /* Tönung */
  --auf-gold:    #1d1d1b;   /* Text auf goldener Fläche */

  --rahmen:      #26241d;   /* Geräterahmen */
  --rahmen-2:    #3a3730;
  --rahmen-text: #e4dfcf;   /* Schrift auf dem Rahmen (Knopf des Zeitraffers) */
  --fehler:      #c8281c;
  --fehler-grund: #fbeeec;
  --erfolg:      #2d7a3f;

  --schatten:    0 18px 50px rgba(29, 29, 27, .13), 0 3px 10px rgba(29, 29, 27, .07);
  --schatten-klein: 0 2px 8px rgba(29, 29, 27, .06);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --spalte: 1120px;          /* Breite des Textbereichs */
  --rand: clamp(20px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:       #14130f;
    --grund-2:     #1b1a14;
    --grund-3:     #24221a;
    --tinte:       #f2efe4;
    --tinte-2:     #c6c2b4;
    --tinte-3:     #8f8b7d;
    --linie:       #302d23;
    --linie-2:     #443f31;

    --gold:        #d4a72c;
    --gold-2:      #e3c05c;
    --gold-3:      #e6c460;   /* Text auf dunklem Grund – hell genug für den Kontrast */
    --gold-weich:  #221d10;
    --auf-gold:    #14130f;

    --rahmen:      #35322a;
    --rahmen-2:    #4a463c;
    --rahmen-text: #ece8da;
    --fehler:      #f08379;
    --fehler-grund: #2a1613;
    --erfolg:      #7fc08d;

    --schatten:    0 18px 50px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .4);
    --schatten-klein: 0 2px 8px rgba(0, 0, 0, .35);
  }
}

/* ───── GRUNDLAGEN ───── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 6.2vw, 60px); letter-spacing: -0.035em; line-height: 1.03; }
h2 { font-size: clamp(26px, 3.8vw, 38px); }
h3 { font-size: 20px; letter-spacing: -0.015em; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold-2); }

img { max-width: 100%; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 3px;
}

.nur-lesegeraet {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke für die Tastatur: liegt über allem, sobald sie den Fokus hat. */
.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px;
  background: var(--gold); color: var(--auf-gold);
  border-radius: 8px; text-decoration: none; font-weight: 600;
  transition: top .15s;
}
.sprung:focus { top: 12px; color: var(--auf-gold); }

/* ───── GERÜST ───── */

.streifen { padding: clamp(56px, 9vw, 104px) var(--rand); }
.streifen-getoent { background: var(--grund-2); border-block: 1px solid var(--linie); }
.inhalt { width: 100%; max-width: var(--spalte); margin: 0 auto; }
.inhalt-schmal { max-width: 760px; }

.augenbraue {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-3);
  margin: 0 0 14px;
}
.vorspann {
  font-size: clamp(17px, 2.1vw, 20px);
  color: var(--tinte-2);
  max-width: 62ch;
  margin: 18px 0 0;
}

/* Markenname im Fließtext: fett und golden – siehe webapp/templatetags/marke.py.
   --gold-3 statt --gold: Auf hellem Grund reicht das Gold selbst für den Kontrast nicht. */
.marke { font-weight: 600; color: var(--gold-3); }

/* Knöpfe: der goldene führt zum Formular, der stille ist ein Nebenweg. */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border: 1px solid var(--gold-2);
  border-radius: 10px;
  background: var(--gold); color: var(--auf-gold);
  font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  box-shadow: 0 1px 0 rgba(29, 29, 27, .12);
}
.knopf:hover { background: var(--gold-2); color: var(--auf-gold); transform: translateY(-1px); box-shadow: var(--schatten-klein); }
.knopf:active { transform: translateY(0); }
.knopf-still {
  background: transparent; color: var(--tinte);
  border-color: var(--linie-2);
}
.knopf-still:hover { background: var(--grund-2); color: var(--tinte); border-color: var(--gold-2); }
.knopf-gross { padding: 16px 30px; font-size: 17px; }

/* ───── KOPFZEILE ───── */

.kopf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px var(--rand);
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.marke { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.marke img { display: block; height: 34px; width: auto; }
/* Die Wortbildmarke trägt schwarze Schrift – auf dunklem Grund wird sie aufgehellt. */
@media (prefers-color-scheme: dark) {
  .marke img { filter: invert(1) hue-rotate(180deg) brightness(1.08); }
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Sprachumschalter: ein kleines Formular mit zwei Knöpfen – ohne JavaScript, und die
   gewählte Sprache bleibt im Cookie, damit ein Aufruf ohne Präfix sie wiederfindet. */
.sprachen { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--linie-2); border-radius: 9px; padding: 3px; }
.sprachen button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--tinte-2); cursor: pointer;
}
.sprachen button:hover { color: var(--tinte); background: var(--grund-2); }
.sprachen button[aria-current="true"] { background: var(--gold); color: var(--auf-gold); font-weight: 500; }

/* ───── BÜHNE ───── */

.buehne {
  position: relative;
  padding: clamp(44px, 7vw, 88px) var(--rand) clamp(72px, 10vw, 132px);
  background:
    radial-gradient(120% 90% at 88% 0%, var(--gold-weich) 0%, transparent 62%),
    linear-gradient(var(--grund), var(--grund-2));
  border-bottom: 1px solid var(--linie);
  overflow: hidden;
}
.buehne-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 7vw, 64px);
  align-items: center;
}
@media (min-width: 900px) {
  .buehne-raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; }
}
.buehne h1 { max-width: 15ch; }
.buehne .vorspann { margin-top: 22px; }
.buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Auf dem Handy zwei gleich breite Knöpfe untereinander statt zweier verschieden langer. */
@media (max-width: 560px) {
  .buehne-knoepfe { flex-direction: column; align-items: stretch; }
  .buehne-knoepfe .knopf { justify-content: center; }
}
.buehne-fakten {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 30px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--tinte-3);
}
.buehne-fakten li { display: flex; align-items: center; gap: 8px; }
.buehne-fakten li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* ───── GERÄTERAHMEN ───── */

/* Monitor und Handy sind reines CSS: zwei gerundete Rahmen, eine Leiste mit drei Punkten
   und ein Fuß. So bleiben die Bildschirmfotos austauschbar – sie sind nichts als Inhalt. */
.geraete { position: relative; padding-bottom: 26px; }

.monitor {
  position: relative;
  border-radius: 14px;
  background: var(--rahmen);
  padding: 8px;
  box-shadow: var(--schatten);
}
.monitor .leiste {
  display: flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 4px 6px;
}
.monitor .leiste i { width: 8px; height: 8px; border-radius: 50%; background: var(--rahmen-2); flex: none; }
.monitor .leiste i:first-child { background: #c9563f; }
.monitor .leiste i:nth-child(2) { background: #c8a13f; }
.monitor .leiste i:nth-child(3) { background: #5c8f56; }
.monitor .schirm { border-radius: 6px; overflow: hidden; background: #fff; display: block; }
.monitor .schirm img { display: block; width: 100%; height: auto; }
/* Standfuß: ein Trapez und eine Leiste, beide nur Dekoration. */
.monitor::after {
  content: ""; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  width: 104px; height: 16px; background: var(--rahmen);
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}
.geraete::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 168px; height: 5px; border-radius: 3px; background: var(--rahmen-2);
}

.handy {
  position: absolute;
  right: -8px; bottom: -14px;
  width: clamp(104px, 27%, 176px);
  border-radius: clamp(16px, 4vw, 24px);
  background: var(--rahmen);
  padding: 5px;
  box-shadow: var(--schatten);
  z-index: 2;
}
.handy .schirm { position: relative; border-radius: clamp(12px, 3vw, 19px); overflow: hidden; background: #fff; display: block; }
.handy .schirm img { display: block; width: 100%; height: auto; }
/* Aussparung für Kamera und Hörer. */
.handy .schirm::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 42%; height: 9px; background: var(--rahmen);
  border-radius: 0 0 7px 7px; z-index: 2;
}

/* Zeitraffer anhalten und abspielen (WCAG 2.2.2): ein kleiner Knopf rechts in der Leiste
   des Monitors, wie ein Bedienelement des Fensters. static/js/zeitraffer.js blendet ihn
   ein, sobald die Animation läuft – bei „Bewegung reduzieren“ gibt es nichts anzuhalten. */
.zeitraffer-knopf {
  position: absolute; top: 3px; right: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 24px; padding: 3px 11px 3px 9px;
  border: 1px solid var(--rahmen-2); border-radius: 999px;
  background: var(--rahmen); color: var(--rahmen-text);
  font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.zeitraffer-knopf[hidden] { display: none; }
.zeitraffer-knopf:hover { border-color: var(--gold-2); color: #fff; }
.zeitraffer-knopf:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 999px; }
/* Das Zeichen: zwei Balken (läuft → anhalten) oder ein Dreieck (steht → abspielen). */
.zeitraffer-symbol { width: 9px; height: 10px; flex: none; background: var(--gold); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.zeitraffer-knopf[data-zustand="laeuft"] .zeitraffer-symbol {
  background: none; clip-path: none;
  border-left: 3px solid var(--gold); border-right: 3px solid var(--gold);
}

/* ───── ABSCHNITTSKOPF ───── */

.abschnitt-kopf { max-width: 66ch; margin-bottom: clamp(36px, 5vw, 54px); }
.abschnitt-kopf h2 + p { margin-top: 16px; color: var(--tinte-2); font-size: clamp(16px, 2vw, 19px); }

/* ───── KACHELN ───── */

.kacheln {
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.kachel {
  display: flex; flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--grund);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.kachel:hover { border-color: var(--gold-2); transform: translateY(-3px); box-shadow: var(--schatten-klein); }
/* Bildband: feste Höhe, das Bild füllt die Breite. Hohe Bildschirmfotos werden unten
   beschnitten (--anker: flex-start), breite und flache stehen mittig im Band. */
.kachel-bild {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: var(--anker, flex-start);
  background: var(--grund-3);
  border-bottom: 1px solid var(--linie);
}
.kachel-bild img { display: block; width: 100%; height: auto; }
.kachel-mitte { --anker: center; }
.kachel-text { padding: 22px clamp(20px, 2.4vw, 26px) 26px; }
.kachel-text h3 { margin-bottom: 10px; text-wrap: pretty; }
.kachel-text p { color: var(--tinte-2); font-size: 15.5px; margin: 0; }
.kachel .augenbraue { margin-bottom: 10px; }

/* ───── FÜR WEN ───── */

.fuer-wen {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fuer-wen article {
  padding-top: 22px;
  border-top: 3px solid var(--gold);
}
.fuer-wen h3 { margin-bottom: 12px; }
.fuer-wen p { color: var(--tinte-2); font-size: 16px; }

/* ───── BETAPROGRAMM ───── */

.beta { scroll-margin-top: 20px; }
.beta h3 { margin-bottom: 12px; }
.beta-raster {
  display: grid;
  gap: clamp(30px, 5vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 940px) {
  .beta-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.beta-liste { margin: 22px 0 0; padding: 0; list-style: none; }
.beta-liste li { position: relative; padding-left: 28px; margin-bottom: 14px; color: var(--tinte-2); }
.beta-liste li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--gold);
}
.beta-liste strong { color: var(--tinte); font-weight: 600; }
/* Abstand als Klasse, nicht als style-Attribut: Inline-Styles verbietet die CSP. */
.abstand-oben { margin-top: 34px; }

.karte {
  background: var(--grund);
  border: 1px solid var(--linie-2);
  border-radius: 18px;
  padding: clamp(24px, 3.4vw, 36px);
  box-shadow: var(--schatten);
}
.karte > h3 { font-size: 23px; margin-bottom: 8px; }
.karte-hinweis { color: var(--tinte-2); font-size: 15px; margin-bottom: 22px; }

/* ───── FORMULAR ───── */

.feld { margin-bottom: 18px; }
.feld > label, .feldgruppe > legend {
  display: block;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinte-2);
  margin-bottom: 7px; padding: 0;
}
.feld .pflicht { color: var(--gold-3); }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit; font-size: 16px;
  color: var(--tinte);
  background: var(--grund);
  border: 1px solid var(--linie-2);
  border-radius: 9px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold-2);
  box-shadow: 0 0 0 3px var(--gold-weich);
  outline: none;
}
.hilfe { display: block; margin-top: 6px; font-size: 13.5px; color: var(--tinte-3); }

.feldgruppe { border: 0; padding: 0; margin: 0 0 18px; }
.wahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Mehrfachauswahl als Schalter: großes Ziel für den Finger, ohne eigenes Bedienelement –
   darunter steckt eine ganz normale Checkbox. */
.wahl {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--linie-2); border-radius: 999px;
  font-size: 15px; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.wahl:hover { border-color: var(--gold-2); }
.wahl input { accent-color: var(--gold-2); width: 16px; height: 16px; margin: 0; }
.wahl:has(input:checked) { background: var(--gold-weich); border-color: var(--gold-2); }
.wahl:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; }

.einwilligung {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 20px; padding: 16px;
  background: var(--grund-2); border: 1px solid var(--linie);
  border-radius: 12px;
  font-size: 15px;
}
.einwilligung input { accent-color: var(--gold-2); width: 18px; height: 18px; margin-top: 2px; flex: none; }

/* Honigtopf: für Menschen unsichtbar und ohne Fokus, für Skripte ein Feld wie jedes andere.
   Bewusst nicht display:none – manche Skripte überspringen genau das. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.fehlerliste {
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid var(--fehler); border-left-width: 3px;
  border-radius: 9px;
  background: var(--fehler-grund);
  color: var(--tinte);
  font-size: 15px;
}
.fehlerliste ul { margin: 8px 0 0; padding-left: 20px; }
.feld-fehler { margin-top: 6px; font-size: 13.5px; color: var(--fehler); }
.feld-fehler ul { margin: 0; padding-left: 18px; }

.geschlossen {
  padding: clamp(22px, 3vw, 30px);
  border: 1px dashed var(--linie-2);
  border-radius: 14px;
  background: var(--grund-2);
}
.geschlossen h3 { margin-bottom: 10px; }
.geschlossen p { color: var(--tinte-2); margin: 0; }

/* ───── DEMO ───── */

.demo-formular { margin-top: 28px; }
.demo-ergebnis { margin-top: 22px; }
.demo-ergebnis .knopf { margin: 14px 0; }
.demo-gueltig { color: var(--tinte-2); font-size: 14.5px; }
.demo-hinweis {
  font-size: 14px; color: var(--tinte-2);
  padding-top: 12px; margin-top: 12px;
  border-top: 1px solid var(--linie);
}

/* Der Dialog liegt über allem, mittig – Djangos Formular-Bausteine (.knopf, .fehlerliste)
   gelten unverändert darin, damit er nicht wie ein Fremdkörper wirkt. */
.demo-dialog {
  width: min(440px, calc(100% - 2 * var(--rand)));
  padding: clamp(24px, 3.4vw, 34px);
  border: 1px solid var(--linie-2);
  border-radius: 18px;
  background: var(--grund);
  color: var(--tinte);
  box-shadow: var(--schatten);
}
.demo-dialog::backdrop { background: rgba(29, 29, 27, .5); }
@media (prefers-color-scheme: dark) { .demo-dialog::backdrop { background: rgba(0, 0, 0, .65); } }
.demo-dialog-kopf { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.demo-schliessen {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linie-2); border-radius: 50%;
  background: transparent; color: var(--tinte-2);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.demo-schliessen:hover { color: var(--tinte); border-color: var(--gold-2); }
.demo-dialog .knopf { margin: 4px 0 14px; }

/* ───── SELBST HOSTEN ───── */

.hosten-raster { display: grid; gap: clamp(26px, 4vw, 44px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 860px) { .hosten-raster { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.terminal {
  border: 1px solid var(--linie-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--grund);
  box-shadow: var(--schatten-klein);
}
.terminal .leiste {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--grund-3);
  border-bottom: 1px solid var(--linie);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-3);
}
.terminal pre {
  margin: 0; padding: 18px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.9;
  color: var(--tinte);
  overflow-x: auto;
}
.terminal .eingabe::before { content: "$ "; color: var(--gold-3); }
.terminal .kommentar { color: var(--tinte-3); }

/* ───── FUSS ───── */

.fuss {
  padding: 44px var(--rand) 40px;
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--grund-2);
  color: var(--tinte-3);
  font-size: 14px;
}
.fuss-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fuss-reihe + .fuss-reihe { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linie); }
.fuss a { color: var(--tinte-2); text-decoration: none; border-bottom: 1px solid var(--linie-2); }
.fuss a:hover { color: var(--gold-3); border-bottom-color: var(--gold-2); }
.fuss .marke-klein { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--tinte-2); }
.fuss .marke-klein img { height: 22px; width: auto; display: block; }
@media (prefers-color-scheme: dark) { .fuss .marke-klein img { filter: invert(1) hue-rotate(180deg) brightness(1.08); } }
.fuss .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.fuss-hinweis { margin: 0; max-width: 70ch; }

/* ───── TEXTSEITEN (Impressum, Datenschutz, Danke) ───── */

.textseite { padding: clamp(44px, 7vw, 80px) var(--rand) clamp(56px, 8vw, 96px); }
.textseite h1 { font-size: clamp(30px, 5vw, 44px); margin-bottom: 26px; }
.textseite h2 { font-size: clamp(20px, 2.6vw, 24px); margin: 44px 0 14px; }
.textseite h3 { font-size: 17px; margin: 26px 0 8px; }
.textseite p, .textseite li { color: var(--tinte-2); font-size: 16.5px; }
.textseite ul { padding-left: 22px; }
.textseite li { margin-bottom: 8px; }
.textseite .zurueck { display: inline-block; margin-bottom: 30px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.anschrift { font-style: normal; margin: 0 0 16px; color: var(--tinte-2); font-size: 16.5px; }
/* Fehlt eine Angabe des Anbieters, steht hier sichtbar ein Platzhalter – still weglassen
   wäre bei einer Pflichtangabe das Schlechteste. */
.platzhalter {
  font-family: var(--mono); font-size: 13px;
  padding: 1px 7px; border: 1px dashed var(--linie-2); border-radius: 5px;
  color: var(--tinte-3); background: var(--grund-2);
}

.danke { text-align: center; max-width: 620px; margin: 0 auto; }
.danke .zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 26px;
  border-radius: 50%; background: var(--gold-weich); border: 1px solid var(--gold-2);
}
.danke .zeichen svg { width: 30px; height: 30px; }
.danke p { font-size: 18px; }
.danke .knopf { margin-top: 30px; }

/* ───── RÜCKSICHT ───── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}