/* Kesru · Markenebene für die Nebenseiten (Zugang, Probe, Stimmen, Impressum, Datenschutz, AGB), Opus 28.09.2026.
   Nach stil.css laden. stil.css stammt aus der ersten Fassung (Orange, Serifenschrift); diese Ebene bringt die Seiten
   auf den heutigen Auftritt der Startseite: Satoshi, Nachttinte, Signalgrün, dunkler Kopf und Fuß, Zeilenmarke. */

@font-face { font-family: "Satoshi"; src: url("/assets/schrift/satoshi-variable.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --papier: #F6F5F1; --papier-2: #EFEDE6; --flaeche: #FFFFFF; --flaeche-2: #FAF9F6;
  --tinte: #0B1220; --text: #3D4658; --leise: #5F6878; --linie: rgba(11, 18, 32, .1); --linie-2: rgba(11, 18, 32, .2);
  --akzent: #3DDC84; --akzent-2: #56E497; --akzent-text: #15803D; --akzent-hauch: #E3F7EA;
  --gruen: #15803D; --gruen-hauch: #E3F7EA;
  --serif: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nacht: #0B1220; --signal: #3DDC84;
}
body { font-size: 17px; line-height: 1.62; font-weight: 420; letter-spacing: -.005em; }
::selection { background: var(--signal); color: var(--nacht); }
:focus-visible { outline-color: var(--gruen); }
a { text-decoration-color: rgba(11, 18, 32, .25); }

/* Kopf: dasselbe Nachtband wie die Startseite */
.kopf { background: var(--nacht); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kopf.gescrollt { border-color: rgba(255, 255, 255, .1); }
.kopf .innen { height: 72px; }
.kopf .marke { color: #fff; font: 700 1.22rem/1 var(--sans); letter-spacing: -.035em; }
.kopf .marke .zeichen { width: auto; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--signal); gap: 2.5px; }
.kopf .marke .zeichen i, .kopf .marke .zeichen i:nth-child(2) { width: 3px; background: var(--nacht); }
.kopf .marke:not(:has(.zeichen))::before { content: ""; width: 31px; height: 22px; border-radius: 7px;
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31 22'%3E%3Cg fill='%230B1220'%3E%3Crect x='9' y='7.5' width='3' height='7' rx='1.5'/%3E%3Crect x='14' y='4.5' width='3' height='13' rx='1.5'/%3E%3Crect x='19' y='6.5' width='3' height='9' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.kopf nav a:not(.knopf) { color: #B7C0D3; }
.kopf nav a:not(.knopf):hover { color: #fff; }
.kopf .sprachwahl { color: #DDE3EE; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.kopf .sprachwahl button[aria-pressed="true"] { background: var(--signal); color: var(--nacht); }

/* Typografie */
.augenbraue { display: inline-flex; align-items: flex-start; gap: 12px; font: 600 14px/1.4 var(--sans); letter-spacing: -.005em; text-transform: none; color: var(--akzent-text); }
.augenbraue::before { content: ""; flex: none; width: 26px; height: 1.5px; margin-top: .68em; border-radius: 1px; background: var(--akzent-text); }
.titel, .anzeige { font-family: var(--sans); font-weight: 720; letter-spacing: -.045em; line-height: 1.02; }
.titel { font-size: clamp(2.3rem, 1.3rem + 2.8vw, 4rem); }
.titel em, .anzeige em { font-style: normal; color: var(--akzent-text); letter-spacing: inherit; }
h2 { font-weight: 700; letter-spacing: -.03em; }
.untertitel, .leise { color: var(--leise); }

/* Knöpfe: Hauptaktion Signalgrün, ohne Leuchten */
.knopf { font: 640 15.5px/1 var(--sans); letter-spacing: -.012em; }
.knopf.haupt, .knopf.akzent { background: var(--signal); color: var(--nacht); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.knopf.haupt:hover, .knopf.akzent:hover { background: var(--akzent-2); }
.knopf.hell { border-color: var(--linie-2); }
.knopf.hell:hover { border-color: var(--tinte); }

/* Felder */
label.feld { font: 600 14.5px/1.3 var(--sans); }
input, textarea, select { border-radius: 14px; border-color: var(--linie-2); padding: 14px 16px; font-family: var(--sans); }
input:hover, textarea:hover, select:hover { border-color: rgba(11, 18, 32, .34); }
input:focus, textarea:focus, select:focus { border-color: var(--tinte); box-shadow: 0 0 0 4px rgba(61, 220, 132, .28); }
.chip .punkt { background: #F2B64C; box-shadow: 0 0 0 4px rgba(242, 182, 76, .18); animation: none; }
.hinweis { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text); }

/* Fuß: Nachtband wie die Startseite */
.fuss { margin-top: 72px; padding: 36px 0 44px; background: var(--nacht); border-top: 0; color: #8E9AB2; font-size: 14px; }
.fuss a { color: #C4CCDA; }
.fuss a:hover { color: #fff; }

/* Rechtstexte: ruhiges Lesemaß */
main.schmal { padding-top: clamp(48px, 7vw, 96px); }
main.schmal h2 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); margin-top: 40px; }
main.schmal p, main.schmal li, main.schmal dd { color: var(--text); }
main.schmal dt { color: var(--leise); font-weight: 560; }

/* Hörseite /probe/: nur Gestalt, Inhalte und Logik bleiben beim Dienst */
.voice-proben { padding: clamp(40px, 5vw, 72px) 0 96px; }
.voice-proben > nav { font-size: 14px; color: var(--leise); }
.voice-proben > nav a { color: var(--leise); }
.voice-proben h1 { margin: 24px 0 18px; font: 720 clamp(2.3rem, 1.3rem + 2.8vw, 4rem)/1.02 var(--sans); letter-spacing: -.045em; }
.voice-proben > p { max-width: 62em; }
.voice-proben details > summary { cursor: pointer; font-weight: 600; }
.voice-proben .voice-filter { gap: 14px; }
.voice-proben .voice-filter label { font: 600 14px/1.3 var(--sans); }
.voice-proben .voice-probe { padding: 22px 24px; margin-top: 10px; border: 1px solid var(--linie); border-radius: 18px; background: var(--flaeche); }
.voice-proben .voice-probe h3 { font: 700 1.35rem/1.2 var(--sans); letter-spacing: -.025em; }
.voice-proben .voice-probe small { color: var(--leise); }
.voice-proben .voice-probe a { font-weight: 640; color: var(--akzent-text); }