/* =========================================================
   STAGEBEAT – Textseiten (AGB, Datenschutz, Impressum, AVV,
   Widerruf, Kontakt, Export-Formate)

   EIN Stylesheet für alle. Vorher trug jede Seite ihren eigenen
   <style>-Block, und dabei hatten sich vier verschiedene Farbsätze
   eingeschlichen: die einen auf #07090D mit Mint #20E3B2, die anderen
   auf #0A0D12 mit #3DE8C0. Nebeneinander sieht das aus, als gehörten
   die Seiten zu zwei verschiedenen Anbietern.

   Jetzt gelten die Werte der Startseite: derselbe Grund, dasselbe
   Mint, dieselben Haarlinien, dieselben zwei Schriften – beide aus
   /fonts/ von unserem eigenen Server, nichts von Google.

   Zwei Dinge sind hier bewusst ANDERS als auf der Startseite, weil
   diese Seiten gelesen und nicht überflogen werden:

     · Der Fließtext ist heller (--lese statt --sub). Grauer Text auf
       dunklem Grund ist für eine Überschrift schön und für vier Seiten
       AGB eine Zumutung.
     · Keine Kacheln mit runden Ecken. Ein Rechtstext ist ein Dokument,
       kein Formular; Abschnitte trennt eine Haarlinie, nicht ein
       Kasten. Kästen bleiben dort, wo sie etwas herausheben – das
       Widerrufsformular zum Ausschneiden zum Beispiel.

   Die Seiten benutzen historisch zwei Sätze von Klassennamen
   (.logo/.card und .marke/.kasten). Beide werden hier bedient, statt
   in sieben Dateien umzubenennen und dabei etwas zu übersehen.
   ========================================================= */
:root{
  --grund:#0E1013;
  --flaeche:#14171C;
  --tiefer:#0B0D11;
  --kante:#262B33;
  --kante-hell:#3A424E;
  --ink:#F2F4F6;
  --lese:#D7DDE4;          /* Fließtext: 12:1 auf dem Grund */
  --sub:#A7B0BB;
  --matt:#8A939E;

  --mint:#20E3B2;
  --mint-tief:#12866B;
  --mint-schrift:#04241B;
  --rot:#FF3B3B;
  --rot-schrift:#FF8084;

  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --text:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Die alten Namen aus den Einzelseiten zeigen auf dieselben Werte,
     damit nichts bricht, was ich beim Umstellen übersehen habe. */
  --bg:var(--grund); --card:var(--flaeche); --card2:var(--tiefer);
  --acc:var(--mint); --live:var(--rot); --hair:var(--kante);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--grund);color:var(--lese);font-family:var(--text);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
/* Lange deutsche Wörter („Geschäftsbedingungen", „Widerrufsbelehrung")
   sprengten auf 320-px-Bildschirmen die Zeile und erzwangen seitliches
   Scrollen. WCAG 1.4.10 verlangt Umbruch statt Querscrollen. */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;color:var(--ink)}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* ── Spalte ─────────────────────────────────────────────────────────
   Beide Namen, weil die Seiten historisch verschieden heißen. 68
   Zeichen Zeilenlänge, das ist die Spanne, in der man am schnellsten
   liest. */
.wrap,main{max-width:68ch;margin:0 auto;padding:clamp(34px,5vw,56px) 22px 90px}

/* ── Marke oben ─────────────────────────────────────────────────── */
.marke,.logo{
  display:inline-flex;align-items:center;margin-bottom:clamp(26px,4vw,40px);text-decoration:none;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mint);
  /* Das ist der Weg zurück zur Startseite und damit der wichtigste Link
     der Seite. Bei 12,5 px Schrift ist die Zeile nur 21 px hoch, also
     unter der Grenze von 2.5.8 - und die Inline-Ausnahme greift hier
     nicht, weil der Link allein steht. Polster statt Ausnahme. */
  min-height:28px;padding:3px 4px;margin-left:-4px;
}
.marke:hover,.logo:hover{color:var(--ink)}
.logo span{color:var(--mint)}          /* der Punkt hinter dem Namen */

/* ── Überschriften ──────────────────────────────────────────────── */
h1{font-size:clamp(28px,4.4vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.03em;margin-bottom:10px}
h2{font-size:clamp(18px,2vw,21px);font-weight:700;letter-spacing:-.015em;margin:38px 0 10px}
h3{font-size:16.5px;font-weight:600;color:var(--mint);margin:24px 0 6px}

p,li{margin-bottom:12px}
ul,ol{margin:0 0 14px 22px}
li{padding-left:2px}
b,strong,p strong{color:var(--ink);font-weight:600}
a{color:var(--mint);text-underline-offset:3px}
a:hover{text-decoration:underline}

/* „Stand vom …" ist eine Angabe, keine Überschrift: Schreibmaschine.
   `.sub` dagegen ist auf der Kontaktseite ein ganzer Satz Fließtext und
   gehört NICHT in dieselbe Schrift - zusammengefasst sah die Einleitung
   aus wie ein Protokollauszug. */
.stand{font-family:var(--mono);font-size:13px;letter-spacing:.03em;color:var(--matt);margin-bottom:clamp(24px,3vw,34px)}
.sub{color:var(--sub);margin-bottom:clamp(24px,3vw,34px)}
.luecke{color:var(--rot-schrift)}

/* ── Abschnitte ─────────────────────────────────────────────────────
   Haarlinie statt Kachel. Ein Rechtstext ist ein Dokument. */
.card{border-top:1px solid var(--kante);padding-top:clamp(20px,2.6vw,28px);margin-bottom:clamp(20px,2.6vw,28px)}
.card:first-of-type{border-top:0;padding-top:0}
.card h2:first-child{margin-top:0}

/* Kästen bleiben Kästen, wo sie etwas herausheben sollen. */
.kasten{background:var(--flaeche);border:1px solid var(--kante);border-left:3px solid var(--mint);padding:20px 22px;margin:26px 0}
.kasten > :last-child{margin-bottom:0}
/* Das Widerrufsformular zum Abschreiben: bewusst wie ein Vordruck. */
.formular{background:var(--tiefer);border:1px dashed var(--kante-hell);padding:20px 22px;white-space:pre-wrap;font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--lese)}

/* ── Tabellen ───────────────────────────────────────────────────── */
.tab{overflow-x:auto;margin-bottom:18px}
table{width:100%;border-collapse:collapse;font-size:15.5px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--kante)}
th{color:var(--ink);font-weight:700;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;border-bottom-color:var(--kante-hell)}
td{color:var(--lese)}

/* ── Code ───────────────────────────────────────────────────────── */
code{font-family:var(--mono);font-size:14px;color:var(--mint);background:var(--flaeche);padding:2px 6px}
pre{background:var(--tiefer);border:1px solid var(--kante);border-left:3px solid var(--mint-tief);padding:16px 18px;overflow-x:auto;margin-bottom:16px}
pre code{background:none;padding:0;font-size:13.5px;line-height:1.65;color:var(--lese)}

/* ── Formular (Kontaktseite) ────────────────────────────────────── */
label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);margin:20px 0 7px}
input,textarea,select{
  width:100%;background:var(--tiefer);border:1px solid var(--kante-hell);color:var(--ink);
  font:inherit;font-size:16px;padding:13px 14px;
}
/* 16 px sind Pflicht: darunter zoomt iOS beim Antippen in das Feld
   hinein und der Rest der Seite rutscht aus dem Bild. */
input:hover,textarea:hover{border-color:var(--sub)}
input:focus,textarea:focus{border-color:var(--mint)}
textarea{min-height:170px;resize:vertical;line-height:1.6}
button{
  margin-top:24px;width:100%;min-height:52px;background:var(--mint);color:var(--mint-schrift);
  border:0;font-family:var(--text);font-weight:700;font-size:16.5px;cursor:pointer;
}
button:hover:not(:disabled){filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:default}
/* Falle für Maschinen: ein Feld, das kein Mensch sieht und ausfüllt. */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.note{margin-top:16px;font-size:14px;color:var(--sub)}
#status{margin-top:18px;padding:13px 16px;font-size:14.5px;display:none;border-left:3px solid transparent}
#status.ok{display:block;background:rgba(32,227,178,.1);border-left-color:var(--mint);color:var(--mint)}
#status.err{display:block;background:rgba(255,59,59,.1);border-left-color:var(--rot);color:var(--rot-schrift)}

/* ── Fuß ────────────────────────────────────────────────────────── */
footer{
  max-width:68ch;margin:clamp(44px,6vw,72px) auto 0;padding:22px 22px 60px;
  border-top:1px solid var(--kante);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--matt);
}
footer a{color:var(--sub);text-decoration:none}
footer a:hover{color:var(--ink)}
/* Im Fuß stehen Links dicht beieinander; unter 24 px trifft man sie am
   Daumen nicht mehr (WCAG 2.5.8). */
footer a{display:inline-block;padding:6px 2px;min-height:26px}

/* ── Druck ──────────────────────────────────────────────────────── */
/* Verträge werden ausgedruckt und unterschrieben. Auf Papier gibt es
   keinen dunklen Grund, und die Felder zum Ausfüllen gibt es NUR dort:
   auf dem Bildschirm stünden sie leer herum und sähen kaputt aus. */
.nur-druck{display:none}
@media print{
  @page{margin:18mm 16mm}
  :root{--grund:#fff;--flaeche:#fff;--tiefer:#fff;--kante:#bbb;--kante-hell:#888;
    --ink:#000;--lese:#1a1a1a;--sub:#333;--matt:#555;--mint:#000}
  body{background:#fff;font-size:10.5pt;line-height:1.45}
  .wrap,main{max-width:none;padding:0}
  a{color:inherit;text-decoration:none}
  h2{break-after:avoid;margin-top:16pt}
  h2#anlage1{break-before:page}
  li,tr{break-inside:avoid}
  footer{display:none}
  .nur-druck{display:block}
  .felder{margin:6pt 0 14pt}
  .feld{border-bottom:1px solid #000;height:30pt;display:flex;align-items:flex-end;margin-bottom:6pt}
  .feld span{font-size:8pt;color:#555;transform:translateY(12pt)}
  .unterschriften{display:flex;gap:28pt;margin:44pt 0 8pt;break-inside:avoid}
  .unterschrift{flex:1}
  .unterschrift .linie{border-bottom:1px solid #000;height:40pt}
  .unterschrift span{display:block;font-size:8pt;color:#555;margin-top:4pt}
}

@media(max-width:560px){
  body{font-size:16.5px}
  .wrap,main{padding-inline:18px}
  footer{padding-inline:18px}
}