/* ====================================================================
   SONIC GROOVE CLUB - die Gestaltung. EINE Quelle fuer alle Seiten.
   Eingebunden mit:  <link rel="stylesheet" href="assets/sg.css">
   Die Schriften liegen daneben in fonts/ - die Pfade unten sind
   relativ zu DIESER Datei, nicht zur Seite.
   Aendert sich hier etwas, aendert es sich ueberall - so wie bei
   stil_scroll.php. Keine zweite Fassung daneben anlegen.
   ==================================================================== */

/* ====================================================================
   SONIC GROOVE CLUB — Startseite V2
   Eine Datei. Keine fremden Server. Die Schriften liegen unter fonts/
   auf der eigenen Domain, nicht bei Google - sonst wandert die
   IP-Adresse jedes Besuchers ohne Einwilligung zu einem Dritten.
   ==================================================================== */

/* -------------------------------------------------- Schriften, lokal */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrument-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/instrument-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/instrument-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}

/* ----------------------------------------------------------- Palette */
/* Aus dem Logo gemessen. Kontrast auf dem Grund #0D0E13:
   Cyan 14,23:1 - Magenta 6,05:1 - Weiss 19,28:1 - Nebentext 7,84:1.
   Auf den Markenflaechen steht die Schrift fast schwarz: Weiss auf
   Cyan kaeme nur auf 1,35:1 und waere unlesbar. */
:root{
  --cyan:#01F5FF;  --cyan-hell:#8FFBFF;
  --magenta:#FF30D0;
  --grund:#0D0E13; --abschnitt:#11131A; --karte:#171A22; --fuss:#090A0E;
  --weiss:#FFFFFF; --neben:#9AA7B2;
  --linie:#262B36; --linie-fuss:#1D212A; --rand:#39424E;
  --sg:'Space Grotesk',system-ui,sans-serif;
  --is:'Instrument Sans',system-ui,sans-serif;
  --jb:'JetBrains Mono',ui-monospace,monospace;
  --breite:1240px;
  --luft:32px;
}

/* ------------------------------------------------------------- Basis */
/* Sorgt dafuer, dass Auswahlfelder, Datumsfelder und andere
   Bedienelemente des Browsers dunkel statt weiss erscheinen.
   Stand bisher in stil_scroll.php, die diese Seiten nicht mehr laden. */
:root{color-scheme:dark}
*{box-sizing:border-box}
/* hidden verliert sonst gegen jedes display: aus einer Klasse. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}}
body{margin:0;background:var(--grund);color:var(--weiss);
  font-family:var(--is);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%;
  /* Helle Schrift auf fast schwarzem Grund bekommt bei der
     Subpixel-Glaettung rote und cyane Raender an den Buchstaben.
     Graustufen-Glaettung nimmt sie weg; die Schrift wirkt dafuer
     eine Spur duenner. Gorans Entscheidung vom 14.10. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
img{max-width:100%}
a{color:var(--cyan)}
a:hover{color:var(--cyan-hell)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ------------------------------------------------------ Scrollbalken */
/* Er wandert mit, durch die drei Farben der Marke und nur durch die:
   oben Cyan, auf halbem Weg Weiss, unten Magenta. Die beiden Toene
   setzt das Skript, hier stehen nur die Ausgangswerte. */
:root{--roll1:#01F5FF;--roll2:#53F8FF}
html{scrollbar-width:thin;scrollbar-color:var(--roll1) var(--abschnitt)}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--abschnitt)}
::-webkit-scrollbar-thumb{border-radius:7px;border:3px solid var(--grund);
  background:linear-gradient(180deg,var(--roll1),var(--roll2))}
::-webkit-scrollbar-thumb:hover{border-width:2px}
::-webkit-scrollbar-corner{background:var(--grund)}
.nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Das Logo steckt genau EINMAL in dieser Datei - hier. Alle Stellen,
   die es zeigen, tragen die Klasse .logo und setzen nur die Groesse.
   Seit dem 14.10. freigestellt: der farbige Ring ist die Aussenkante,
   der dunkle Rand und die Ecken des Quadrats sind weg. 32 Farben,
   damit es klein bleibt - jede Seite laedt dieses Blatt. */
.logo{display:block;flex:none;background-repeat:no-repeat;
  background-position:center;background-size:contain;
  background-image:url(data:image/png;base64,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)}

.innen{max-width:var(--breite);margin:0 auto;padding-left:var(--luft);padding-right:var(--luft)}
.abschnitt{border-bottom:1px solid var(--linie)}
.abschnitt--dunkler{background:var(--abschnitt)}
.abschnitt__innen{padding-top:80px;padding-bottom:80px}

/* ------------------------------------------------------- Schriftbild */
.marke{font-family:var(--jb);font-size:12px;letter-spacing:.22em;margin-bottom:18px}
.marke--klein{font-size:11px;letter-spacing:.2em;margin-bottom:18px}
.marke--cyan{color:var(--cyan)} .marke--magenta{color:var(--magenta)}
.marke--neben{color:var(--neben)}

h1,h2,h3{font-family:var(--sg);font-weight:700;letter-spacing:-.02em;margin:0}
.titel-gross{font-size:clamp(40px,7.4vw,72px);line-height:1.02;letter-spacing:-.028em;
  margin-bottom:28px;color:var(--cyan)}
.titel-abschnitt{font-size:clamp(30px,4.6vw,44px);line-height:1.1;margin-bottom:16px;max-width:26ch}
.titel-mittel{font-size:clamp(26px,3.6vw,38px);line-height:1.12;margin-bottom:40px}
.titel-karte{font-size:19px;line-height:1.25;margin-bottom:10px}
.unter{font-size:17px;line-height:1.65;color:var(--neben);margin:0 0 44px;max-width:66ch}
.text{font-size:15px;line-height:1.6;color:var(--weiss);margin:0}
.text--neben{color:var(--neben)}
.cyan{color:var(--cyan)} .magenta{color:var(--magenta)} .weiss{color:var(--weiss)}

/* ------------------------------------------------------------ Knopf  */
.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:15px 28px;border-radius:2px;border:0;
  font-family:var(--is);font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}
.knopf--magenta{background:var(--magenta);color:var(--grund)}
.knopf--cyan{background:var(--cyan);color:var(--grund)}
.knopf--leer{background:transparent;border:1px solid var(--rand);color:var(--weiss);font-weight:500}
.knopf--klein{padding:11px 20px;font-size:15px}
.knopf--voll{display:flex;width:100%}
.knopfreihe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ------------------------------------------------------------- Kopf  */
.kopf{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linie);
  background:rgba(13,14,19,.94);backdrop-filter:blur(8px)}
.kopf__innen{display:flex;flex-wrap:wrap;align-items:center;gap:22px;min-height:78px;
  padding-top:10px;padding-bottom:10px}
.wortmarke{display:flex;align-items:center;gap:13px;text-decoration:none;margin-right:auto}
.wortmarke .logo{width:42px;height:42px}
.wortmarke span{font-family:var(--sg);font-weight:700;font-size:19px;letter-spacing:.13em}
.hauptweg{display:flex;flex-wrap:wrap;gap:24px;font-size:15px}
.hauptweg a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:3px}
.hauptweg a.ist-hier{color:var(--magenta);border-bottom-color:var(--magenta)}
.schalter{display:flex;border:1px solid var(--rand);border-radius:2px;overflow:hidden}
.schalter button{font-family:var(--jb);font-size:13px;letter-spacing:.08em;
  padding:0 13px;min-height:42px;border:0;cursor:pointer;
  background:transparent;color:var(--neben)}
.schalter button+button{border-left:1px solid var(--rand)}
.schalter button[aria-pressed="true"]{background:var(--cyan);color:var(--grund)}

/* ---------------------------------------------- Der Kopf des Regals
   Boerse und Tausch tragen denselben Kopf wie /regal/: eine Zeile
   ueber die volle Breite - Wortmarke, Sprachwahl, Zeichen -, die
   Wege dahinter. Die Seite fordert ihn mit $sg_kopf_menue an.

   Alle Masse sind aus assets/seiten/regal.css uebernommen, nicht
   neu gewaehlt. Wie dort gibt es KEINE Medienabfrage: der Kopf
   sieht am Rechner aus wie am Handy. */
.kopf--regal .kopf__innen{max-width:none;flex-wrap:nowrap;gap:11px;
  min-height:0;padding:9px 14px}
.kopf--regal .wortmarke{flex:0 1 auto;margin-right:auto;gap:11px;min-width:0}
.kopf--regal .wortmarke .logo{width:32px;height:32px}
.kopf--regal .wortmarke span{font-size:15px;white-space:nowrap}
.kopf--regal .schalter button{min-height:36px;padding:0 11px;font-size:12px}
.kopf--regal .kopf__menue{flex:none;width:36px;height:36px;
  border:1px solid var(--rand);border-radius:2px;background:transparent;
  color:var(--cyan);font-size:16px;line-height:1;cursor:pointer}
/* Das Menue. Aufbau Zeile fuer Zeile aus .regalmenue in
   assets/seiten/regal.css: volle Breite, IM FLUSS - es schiebt beim
   Oeffnen den Inhalt nach unten, statt als Kasten darueber zu
   schweben. Grund --karte, Trennlinien zwischen den Eintraegen, der
   letzte ohne Linie und gedaempft. */
.kopf--regal .kopf__klappe{display:flex;flex-direction:column;
  background:var(--karte);border-bottom:1px solid var(--linie)}
/* Ausdruecklich, wie im Regal: jede eigene display-Regel schlaegt
   sonst das hidden des Browsers, und das Menue stuende dauerhaft
   offen. */
.kopf--regal .kopf__klappe[hidden]{display:none}
/* .hauptweg loest sich auf, damit seine vier Wege und die beiden
   festen Eintraege darunter EINE Spalte bilden statt zwei Ebenen. */
.kopf--regal .kopf__klappe .hauptweg{display:contents}
/* !important, weil zeichneHauptweg() in assets/sg-rahmen.js die Farbe
   der vier Wege als style-Merkmal direkt ans Element schreibt - in
   der Kopfzeile sind sie cyan, im Menue sollen sie weiss sein wie im
   Regal. Eine gewoehnliche Regel kaeme dagegen nicht an. */
.kopf--regal .kopf__klappe a{padding:14px 18px;color:var(--weiss) !important;
  text-decoration:none;font-size:15px;border-bottom:1px solid var(--linie)}
/* > a:last-child, nicht a:last-child: .hauptweg loest sich zwar
   optisch auf, im Baum bleibt es aber das Elternteil seiner vier
   Wege. Ohne das Zeichen > traefe die Regel "Waesche" - den letzten
   Weg IN der Liste - statt "Abmelden", den letzten Eintrag des
   Menues. */
.kopf--regal .kopf__klappe > a:last-child{border-bottom:0;color:var(--neben) !important}
.kopf--regal .kopf__klappe a:hover{background:var(--abschnitt);color:var(--cyan) !important}
/* Wo man steht, steht nicht im Menue. Im Regal fehlt "Das Regal",
   in der Boerse fehlt "Tauschbörse" - uebrig bleiben die Wege
   woandershin. zeichneHauptweg() haengt dem aktuellen Bereich schon
   die Klasse ist-hier an (aus data-aktiv); in der Kopfzeile faerbt
   sie ihn magenta, hier nimmt sie ihn heraus. */
.kopf--regal .kopf__klappe .hauptweg a.ist-hier{display:none}

/* ------------------------------------------------------------ Hero   */
.hero{display:flex;flex-wrap:wrap;gap:64px;padding-top:88px;padding-bottom:72px}
.hero__text{flex:999 1 540px;min-width:0}
.hero__text p{max-width:52ch}
.hero__absatz1{font-size:19px;line-height:1.6;color:var(--weiss);margin:0 0 20px}
.hero__absatz2{font-size:17px;line-height:1.6;color:var(--neben);margin:0 0 40px}
.hero__kasten{flex:1 1 330px;min-width:0}
.sofort{border:1px solid var(--cyan);background:rgba(1,245,255,.05);padding:30px}
.sofort h2{font-size:30px;line-height:1.1;margin-bottom:14px;color:var(--cyan)}
.sofort p{font-size:15px;line-height:1.6;margin:0 0 22px}
.sofort ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.sofort li{font-size:14px;padding-left:18px;position:relative}
.sofort li::before{content:'\203A';position:absolute;left:0;color:var(--cyan)}

/* ------------------------------------------------------------ Gitter */
.gitter{display:grid;gap:20px}
.gitter--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gitter--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gitter--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.karte{border:1px solid rgba(1,245,255,.3);background:var(--karte);padding:24px 26px}
.karte--magenta{border-color:rgba(255,48,208,.3);padding:26px 28px}
.karte h3{color:var(--cyan)}
.karte--magenta h3{color:var(--magenta)}

.saeule{border:1px solid;padding:28px 30px;text-decoration:none;
  display:flex;flex-direction:column;gap:11px}
.saeule__marke{font-family:var(--jb);font-size:10px;letter-spacing:.18em}
.saeule__titel{font-family:var(--sg);font-weight:700;font-size:28px;line-height:1.1}
.saeule__text{font-size:15px;line-height:1.6;color:var(--weiss)}
.saeule__link{font-size:14px;font-weight:600;margin-top:2px}

/* --------------------------------------------------------- Cam-Block */
.block{border:1px solid rgba(1,245,255,.3);background:var(--karte);
  padding:30px 34px;margin-bottom:24px}
.block__reihe{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.block__text{flex:999 1 400px;min-width:0}
.block__bild{flex:1 1 280px;min-width:0}
.wahlgruppe{display:flex;flex-wrap:wrap;gap:20px}
.wahl__beschriftung{font-size:12px;color:var(--neben);margin-bottom:8px}
.formatwahl{display:flex;gap:8px}
.formatwahl button{font-family:var(--jb);font-size:12px;padding:0 14px;min-height:40px;
  border:1px solid var(--rand);cursor:pointer;background:transparent;color:var(--neben)}
.formatwahl button[aria-pressed="true"]{border-color:var(--cyan);background:var(--cyan);color:var(--grund)}
.drehwahl button{min-height:40px;padding:0 14px;font-size:12px}

/* Die Vorschau ist nach dem echten Clip gemessen: das Seitenverhaeltnis
   gilt nur fuer die Bildflaeche, die Streifen haben feste Hoehen. */
.clip{margin:0 auto 14px;background:#000;display:flex;flex-direction:column;max-width:100%}
.clip__oben{height:26px;flex:none;display:flex;align-items:center;justify-content:center}
.clip__oben span{font-family:var(--sg);font-weight:700;font-size:9px;letter-spacing:.3em}
.clip__bild{flex:none;position:relative;margin:0 8px}
.clip__inhalt{position:absolute;inset:0;background:var(--karte);
  display:flex;align-items:center;justify-content:center}
.clip__inhalt span{font-family:var(--jb);font-size:10px;letter-spacing:.14em;
  color:var(--rand);text-align:center;line-height:1.7;white-space:pre-line}
.ecke{position:absolute;width:13%;aspect-ratio:1}
.ecke--lo{top:0;left:0;border-top:3px solid var(--cyan);border-left:3px solid var(--cyan)}
.ecke--ro{top:0;right:0;border-top:3px solid var(--magenta);border-right:3px solid var(--magenta)}
.ecke--lu{bottom:0;left:0;border-bottom:3px solid var(--cyan);border-left:3px solid var(--cyan)}
.ecke--ru{bottom:0;right:0;border-bottom:3px solid var(--magenta);border-right:3px solid var(--magenta)}
.clip__unten{height:58px;flex:none;display:flex;align-items:center;gap:10px;padding:0 10px}
.clip__unten .logo{width:32px;height:32px}
.clip__zeile{flex:1;min-width:0}
.clip__name{font-family:var(--sg);font-weight:700;font-size:13px;letter-spacing:.2em;line-height:1.2}
.clip__strich{display:flex;height:2px;margin:4px 0 3px}
.clip__strich span{flex:1}
.clip__netz{font-family:var(--sg);font-weight:500;font-size:8px;letter-spacing:.22em;line-height:1.2}
.clip__masse{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center}
.clip__masse b{font-family:var(--jb);font-size:12px;color:var(--cyan);font-weight:400}
.clip__masse i{font-style:normal;font-size:12px;color:var(--neben)}

/* kleine Vorschau in der Tauschboerse */
.clip--klein{aspect-ratio:1/1;max-width:124px;margin:0 auto}
.clip--klein .clip__oben{height:8%}
.clip--klein .clip__oben span{font-size:6px;letter-spacing:.28em}
.clip--klein .clip__bild{flex:1;min-height:0;margin:0 3.5%}
.clip--klein .ecke{border-width:1px !important}
.clip--klein .clip__unten{height:18%;gap:3%;padding:0 4%}
.clip--klein .clip__unten .logo{width:11%;height:auto;aspect-ratio:1}
.clip--klein .clip__name{font-size:8px;letter-spacing:.2em;line-height:1.1}
.clip--klein .clip__strich{height:1px;margin:3px 0 2px}
.clip--klein .clip__netz{font-size:5px}
.spielknopf{width:36px;height:36px;border-radius:50%;border:0;background:var(--cyan);
  color:var(--grund);cursor:pointer;display:flex;align-items:center;justify-content:center}
.spielknopf[aria-pressed="true"]{background:var(--magenta)}
.clip__bu{font-family:var(--jb);font-size:11px;letter-spacing:.16em;color:var(--neben);
  margin-top:12px;text-align:center}

/* ----------------------------------------------------- Werkstatt     */
.verfahren{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:44px}
.verfahren__stufen{flex:999 1 520px;min-width:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.stufe{border:1px solid rgba(255,48,208,.3);background:var(--karte);padding:28px 30px}
.stufe__kopf{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.stufe__nr{font-family:var(--jb);font-size:12px;color:var(--grund);background:var(--magenta);padding:4px 9px}
.stufe h3{font-size:21px;color:var(--magenta);margin:0}
.kapazitaet{flex:1 1 300px;min-width:0}
.kapazitaet__kasten{border:1px solid rgba(255,48,208,.3);background:var(--karte);padding:26px;height:100%}
.kapazitaet__zahl{display:flex;align-items:baseline;gap:11px;margin-bottom:5px}
.kapazitaet__zahl b{font-family:var(--sg);font-weight:700;font-size:54px;line-height:1;color:var(--magenta)}
.kapazitaet__zahl span{font-size:15px;color:var(--weiss)}
.kapazitaet__woche{font-size:14px;color:var(--neben);margin:0 0 18px}
.kapazitaet__balken{height:6px;background:var(--linie);margin-bottom:22px}
.kapazitaet__balken div{height:6px;background:var(--magenta)}
/* Die Terminzeile: wann geschickt werden muss und ab wann gewaschen
   wird. Bei Pause oder Annahmestopp steht hier die einzige Auskunft
   des Kastens, darum traegt sie dann das ganze Gewicht. */
.kapazitaet__termin{font-family:var(--jb);font-size:13px;line-height:1.6;
  color:var(--weiss);margin:0 0 22px}
.kapazitaet__termin[hidden]{display:none}
.kapazitaet dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.kapazitaet dt{font-size:12px;color:var(--neben);margin-bottom:4px}
.kapazitaet dd{margin:0;font-family:var(--jb);font-size:14px;color:var(--weiss)}
.hinweiskasten{font-size:15px;line-height:1.65;color:var(--neben);margin:0 0 44px;
  padding:18px 22px;border-left:2px solid var(--magenta);background:var(--karte)}
.hinweiskasten strong{color:var(--magenta);font-weight:600}

.preisteil{display:flex;flex-wrap:wrap;gap:28px}
.preisteil__tabellen{flex:1 1 360px;min-width:0}
.preisteil__rechner{flex:999 1 500px;min-width:0}
table{width:100%;border-collapse:collapse;font-size:16px}
caption{text-align:left;font-family:var(--jb);font-size:12px;letter-spacing:.18em;
  color:var(--magenta);padding-bottom:14px}
tbody tr{border-top:1px solid var(--linie)}
th{text-align:left;font-weight:400;color:var(--weiss);padding:15px 0}
td{text-align:right;font-family:var(--jb);font-size:18px;padding:15px 0}
.tabelle--versand{margin-top:32px}
.tabelle--versand th,.tabelle--versand td{padding:13px 0;font-size:16px}
.tabelle--versand td{color:var(--cyan)}
.fussnote{font-size:13px;line-height:1.6;color:var(--neben);margin:22px 0 0}

/* ----------------------------------------------------------- Rechner */
.rechner{border:1px solid var(--magenta);background:var(--karte)}
.rechner__kopf{padding:30px 34px 0}
.rechner__kopf h3{font-size:25px;color:var(--magenta);margin-bottom:8px}
.rechner__kopf p{font-size:15px;line-height:1.6;color:var(--neben);margin:0 0 26px}
.rechner__feld{padding:0 34px 30px;display:flex;flex-direction:column;gap:24px}
.feldblock{border-top:1px solid var(--linie);padding-top:22px}
.feldblock:first-child{border-top:0;padding-top:0}
.frage{display:block;font-size:14px;color:var(--weiss);margin-bottom:12px}
.regler{display:flex;align-items:center;gap:18px}
.regler input{flex:1;min-width:0;accent-color:var(--magenta);height:44px}
.regler output{font-family:var(--jb);font-size:28px;color:var(--magenta);min-width:3ch;text-align:right}
.staffelhinweis{font-size:13px;color:var(--neben);margin-top:8px}
.wahlreihe{display:flex;flex-wrap:wrap;gap:10px}
.wahlfeld{flex:1 1 150px;border:1px solid var(--rand);background:transparent;
  padding:13px 15px;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:44px}
.wahlfeld:has(input:checked){border-color:var(--magenta);background:rgba(255,48,208,.12)}
.wahlfeld input{accent-color:var(--magenta)}
.wahlfeld span{font-size:15px;color:var(--weiss)}
.ankreuz{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border-top:1px solid var(--linie);padding-top:22px}
.ankreuz input{accent-color:var(--magenta);width:20px;height:20px;margin-top:2px;flex:none}
.ankreuz b{display:block;font-size:15px;color:var(--weiss);font-weight:400}
.ankreuz i{display:block;font-style:normal;font-size:13px;color:var(--neben);margin-top:3px}
.summe{margin:0;display:flex;flex-direction:column;gap:10px}
.summe__zeile{display:flex;justify-content:space-between;gap:16px}
.summe__zeile dt{font-size:15px;color:var(--neben)}
.summe__zeile dd{margin:0;font-family:var(--jb);font-size:15px;color:var(--weiss)}
.summe__gesamt{align-items:baseline;border-top:1px solid var(--linie);margin-top:8px;padding-top:16px}
.summe__gesamt dt{font-family:var(--sg);font-weight:700;font-size:19px;color:var(--magenta)}
.summe__gesamt dd{font-family:var(--sg);font-weight:700;font-size:36px;color:var(--magenta)}
.summe__skonto dt{font-size:13px}
.summe__skonto dd{font-size:13px;color:var(--cyan)}
.warnung{font-size:14px;line-height:1.55;color:var(--cyan);background:rgba(1,245,255,.10);
  border-left:2px solid var(--cyan);margin:18px 0 0;padding:13px 15px}

/* ------------------------------------------------------------ Regeln */
.regeln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.regel{border-top:1px solid var(--linie);padding:24px 0}
.regel h3{font-size:18px;margin-bottom:9px;color:var(--cyan)}

/* -------------------------------------------------------------- Fuss */
.fuss{background:var(--fuss)}
.fuss__innen{padding-top:60px;padding-bottom:44px;display:flex;flex-wrap:wrap;gap:48px}
.fuss__marke{flex:1 1 300px;min-width:0}
.fuss__marke .wortmarke{margin:0 0 20px}
.fuss__marke .wortmarke .logo{width:52px;height:52px}
.fuss__marke .wortmarke span{font-size:18px}
.fuss__anschrift{font-size:15px;line-height:1.7;color:var(--neben);margin:0}
.fuss__steuer{font-size:13px;line-height:1.6;color:var(--neben);margin:20px 0 0}
.fuss nav{flex:1 1 180px;min-width:0}
.fuss nav h2{font-family:var(--jb);font-size:11px;letter-spacing:.2em;color:var(--weiss);
  margin:0 0 18px;font-weight:400;letter-spacing:.2em}
.fuss ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
/* Die Farbe haengt an der Spalte, nicht daran, ob schon eine Seite
   dahintersteht: ein Eintrag ohne Ziel steht in derselben Farbe wie
   seine Nachbarn. */
.fuss a,.fuss li span{font-size:15px;text-decoration:none}
.fuss__plattform a,.fuss__plattform li span{color:var(--cyan)}
.fuss__werkstatt a,.fuss__werkstatt li span{color:var(--magenta)}
.fuss__recht a,.fuss__recht li span{color:var(--neben)}
/* Eine Rubrik ohne Punkte - im Hobbyprojekt die Werkstatt - wird von
   sg-rahmen.js auf hidden gesetzt und darf dann keine Luecke lassen. */
.fuss nav[hidden]{display:none}

/* Hobbyprojekt: Marke links, daneben die beiden Rubriken untereinander,
   ihre Punkte aber nebeneinander statt als lange Spalte. Greift nur
   unter .fuss--kompakt; die Fusszeile im Betrieb bleibt unberuehrt. */
.fuss--kompakt .fuss__innen{display:grid;grid-template-columns:minmax(260px,320px) 1fr;
  gap:34px 56px;align-items:start}
.fuss--kompakt .fuss__marke{grid-column:1;grid-row:1 / span 2}
.fuss--kompakt .fuss__plattform{grid-column:2;grid-row:1}
.fuss--kompakt .fuss__recht{grid-column:2;grid-row:2}
.fuss--kompakt nav h2{margin:0 0 12px}
/* Abstand statt Trennzeichen: ein Mittelpunkt haengt beim Umbruch am
   Zeilenende - gemessen bei 900 und 390 Pixeln Fensterbreite. */
.fuss--kompakt ul{flex-direction:row;flex-wrap:wrap;gap:12px 30px;align-items:baseline}
.fuss--kompakt li{display:inline-flex;align-items:baseline}
@media (max-width:760px){
  .fuss--kompakt .fuss__innen{grid-template-columns:1fr;gap:30px}
  .fuss--kompakt .fuss__marke,
  .fuss--kompakt .fuss__plattform,
  .fuss--kompakt .fuss__recht{grid-column:1;grid-row:auto}
}
.fuss__zeile{border-top:1px solid var(--linie-fuss)}
.fuss__zeile .innen{padding-top:20px;padding-bottom:20px;font-size:13px;color:var(--weiss)}
.fuss__zeile b{font-weight:600}

/* ------------------------------------------------- schmalere Fenster */
@media (max-width:1000px){
  .gitter--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gitter--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{gap:44px;padding-top:56px;padding-bottom:52px}
  .abschnitt__innen{padding-top:60px;padding-bottom:60px}
}
@media (max-width:760px){
  :root{--luft:20px}
  .gitter--4,.gitter--3,.gitter--2,.regeln,.verfahren__stufen{grid-template-columns:1fr}
  .regeln{gap:0}
  /* Auf dem Handy braucht der Kopf drei Zeilen. Klebend wuerde er ein
     Fuenftel des Fensters dauerhaft wegnehmen - also laesst man ihn
     hier oben stehen und scrollt daran vorbei. */
  .kopf{position:static}
  .kopf__innen{gap:14px;min-height:0}
  .wortmarke{margin-right:0;flex:1 1 100%}
  .hauptweg{gap:16px;font-size:14px;order:3;flex:1 1 100%}
  .kopf .knopf{order:2}
  .block{padding:24px 20px}
  .rechner__kopf{padding:24px 20px 0}
  .rechner__feld{padding:0 20px 24px}
  .stufe,.kapazitaet__kasten{padding:22px 20px}
  .summe__gesamt dd{font-size:30px}
}

/* ====================================================================
   FORMULARSEITEN  (Anmeldung, Einloggen, Passwort)
   Eine schmale Spalte, dieselben Farben, Schriften und Abstaende wie
   die Startseite. Felder sind 48 px hoch - auf dem Handy mit dem
   Daumen zu treffen, ohne dass der Browser hineinzoomt.
   ==================================================================== */
.spalte{max-width:620px;margin:0 auto;padding:72px var(--luft) 88px}
.spalte__marke{margin-bottom:18px}
.spalte h1{font-family:var(--sg);font-weight:700;font-size:clamp(32px,5.4vw,44px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.spalte__unter{font-size:17px;line-height:1.6;color:var(--neben);margin:0 0 40px}

.formular{border:1px solid var(--linie);background:var(--karte);padding:32px 34px}
.formular__teil{font-family:var(--jb);font-size:11px;letter-spacing:.2em;
  color:var(--magenta);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--linie)}
.formular__teil + .feld{margin-top:0}
.formular__teil:not(:first-child){margin-top:36px}

.feld{margin-top:20px}
.feld label{display:block;font-size:14px;color:var(--weiss);margin-bottom:8px}
.feld label .pflicht{color:var(--magenta)}
.feld input,.feld select,.feld textarea{display:block;width:100%;min-height:48px;
  padding:12px 14px;font-family:var(--is);font-size:16px;color:var(--weiss);
  background:var(--grund);border:1px solid var(--rand);border-radius:2px}
.feld input::placeholder{color:#5A6672}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--cyan);
  outline-offset:1px;border-color:var(--cyan)}
/* Erst meckern, wenn der Besucher das Feld schon bearbeitet und
   verlassen hat - nicht beim blossen Anschauen. :invalid allein wuerde
   jedes leere Pflichtfeld sofort rot faerben. */
.feld input:user-invalid{border-color:var(--magenta)}
.feld__hinweis{font-size:13px;line-height:1.5;color:var(--neben);margin:7px 0 0}

.feldpaar{display:flex;flex-wrap:wrap;gap:16px}
.feldpaar > *{flex:1 1 180px;min-width:0}
.feldpaar--schmal > *:first-child{flex:0 1 140px}

.formular .knopf{margin-top:28px}

/* Meldungen vom Server. Gruen und Rot sind die einzigen Farben
   ausserhalb der Marke - bei einer Rueckmeldung zaehlt, dass sie ohne
   Nachdenken erkannt wird. */
.meldung{font-size:15px;line-height:1.6;margin:0 0 28px;padding:16px 20px;
  border-left:2px solid}
.meldung--gut{color:#7BE495;border-color:#7BE495;background:rgba(123,228,149,.08)}
.meldung--schlecht{color:#FF8A8A;border-color:#FF8A8A;background:rgba(255,138,138,.08)}
.meldung strong{font-weight:600}

.danach{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  justify-content:space-between;margin-top:28px}
.danach a{font-size:15px;text-decoration:none}

@media (max-width:760px){
  .spalte{padding-top:44px;padding-bottom:56px}
  .formular{padding:24px 20px}
  .feldpaar--schmal > *:first-child{flex:1 1 140px}
}

/* ====================================================================
   TEXTSEITEN  (Impressum, AGB, Widerruf, Datenschutz, Anleitung)
   Lange Fliesstexte. Die Zeile bleibt unter 70 Zeichen - darueber
   verliert das Auge beim Zeilenwechsel den Anschluss.
   ==================================================================== */
.lese{max-width:760px;margin:0 auto;padding:64px var(--luft) 88px}
.lese__marke{margin-bottom:16px}
.lese h1{font-family:var(--sg);font-weight:700;font-size:clamp(32px,5.4vw,44px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 12px;color:var(--cyan)}
.lese__stand{font-family:var(--jb);font-size:13px;color:var(--neben);margin:0 0 40px}

.lese h2{font-family:var(--sg);font-weight:700;font-size:21px;line-height:1.25;
  margin:40px 0 12px;color:var(--magenta)}
.lese h2:first-of-type{margin-top:0}
.lese h3{font-family:var(--sg);font-weight:700;font-size:17px;line-height:1.3;
  margin:28px 0 10px;color:var(--weiss)}
.lese p{font-size:16px;line-height:1.7;color:var(--weiss);margin:0 0 16px;max-width:68ch}
.lese ul,.lese ol{margin:0 0 16px;padding-left:22px;max-width:68ch}
.lese li{font-size:16px;line-height:1.7;color:var(--weiss);margin-bottom:8px}
.lese strong{font-weight:600;color:var(--weiss)}
.lese a{color:var(--cyan)}
.lese table{margin:0 0 20px;font-size:15px}
.lese th,.lese td{padding:11px 0;font-size:15px;font-family:var(--is)}
.lese td{text-align:left;color:var(--weiss)}
.lese dl{margin:0 0 20px}
.lese dt{font-weight:600;color:var(--cyan);margin-top:14px}
.lese dd{margin:4px 0 0;color:var(--weiss);line-height:1.7}

/* Ein abgesetzter Kasten im Fliesstext - fuer Anschriften, Fristen,
   alles, was man im Text wiederfinden koennen muss. */
.lese__kasten{border-left:2px solid var(--cyan);background:var(--karte);
  padding:18px 22px;margin:0 0 24px}
.lese__kasten p:last-child{margin-bottom:0}
.lese__kasten--magenta{border-left-color:var(--magenta)}

@media (max-width:760px){
  .lese{padding-top:40px;padding-bottom:56px}
  .lese h2{margin-top:32px}
}

/* ====================================================================
   MITTEILUNGSSEITEN  (404, 403, bestaetigt, abgemeldet)
   Eine kurze Nachricht in der Mitte des Fensters, sonst nichts.
   ==================================================================== */
.mitte{max-width:620px;margin:0 auto;padding:104px var(--luft) 112px;text-align:center}
.mitte__nummer{font-family:var(--sg);font-weight:700;font-size:clamp(72px,17vw,132px);
  line-height:1;letter-spacing:-.04em;margin:0 0 6px;color:var(--magenta)}
.mitte h1{font-family:var(--sg);font-weight:700;font-size:clamp(24px,4.4vw,32px);
  line-height:1.15;letter-spacing:.04em;margin:0 0 20px;color:var(--cyan)}
.mitte p{font-size:17px;line-height:1.65;color:var(--weiss);margin:0 auto 16px;max-width:48ch}
.mitte__neben{font-size:15px;color:var(--neben)}
.mitte__protokoll{font-family:var(--jb);font-size:13px;line-height:1.7;color:var(--neben);
  border:1px solid var(--linie);background:var(--karte);padding:16px 20px;
  margin:28px auto 0;max-width:46ch;text-align:left}
.mitte .knopf{margin-top:32px}
@media (max-width:760px){ .mitte{padding-top:64px;padding-bottom:72px} }

/* ====================================================================
   NUMMERIERTE SCHRITTE  (Leistungen, Anleitung)
   ==================================================================== */
.schritte{display:flex;flex-direction:column;gap:2px;margin:0 0 24px}
.schritt{display:flex;gap:18px;align-items:flex-start;
  border-top:1px solid var(--linie);padding:22px 0}
.schritt__zahl{font-family:var(--sg);font-weight:700;font-size:28px;line-height:1;
  min-width:1.6ch;flex:none}
.schritt h3{font-family:var(--sg);font-weight:700;font-size:18px;line-height:1.25;
  margin:0 0 8px;color:var(--weiss)}
.schritt p{font-size:15px;line-height:1.65;color:var(--neben);margin:0}

/* Ein Satz, der nach einem Block noch etwas nachschiebt. */
.dazu{font-size:15px;line-height:1.7;color:var(--neben);margin:22px 0 0;max-width:72ch}
.dazu strong{color:var(--weiss);font-weight:600}

/* Der Abschluss einer Inhaltsseite: ein Knopf, gross und mittig. */
.abschluss{border-top:1px solid var(--linie);text-align:center;
  padding:64px var(--luft)}
.abschluss .knopf{font-size:17px;padding:17px 34px}
.abschluss p{font-size:15px;color:var(--neben);margin:16px 0 0}

/* Karten und Schritte, die ihre Farbe selbst mitbringen: style="--f:…".
   Der Rand ist gedaempft wie auf der Startseite (dort rgba(…,.3)),
   die Ueberschrift traegt die volle Farbe. */
.karte[style*="--f"]{border-color:var(--f)}
.karte[style*="--f"] h3{color:var(--f)}
.schritt__zahl{color:var(--f,var(--cyan))}
@supports (color: color-mix(in srgb, red 30%, transparent)) {
  .karte[style*="--f"]{border-color:color-mix(in srgb, var(--f) 32%, transparent)}
}

/* ====================================================================
   RANGFARBEN — NICHT ANFASSEN
   Die vier Ränge und ihre Farben stehen in includes/logic_vinyl.php
   und werden von dort geliefert. Sie gehören zum Rangsystem, nicht zur
   Gestaltung, und bleiben deshalb genau so, wie sie sind:

     SONIC TITAN     #39ff14      GROOVE MASTER   #ff00ff
     VIP DJ          #00ffff      ANALOG LEGEND   #ffd700

   Die alten --neon-Namen stehen hier, damit Seiten, die sie noch
   verwenden, nach der Umstellung weiter funktionieren. Für neue
   Gestaltung gilt die Palette ganz oben, nicht diese Namen.
   ==================================================================== */
:root{
  --rang-titan:#39ff14; --rang-master:#ff00ff;
  --rang-vip:#00ffff;   --rang-legend:#ffd700;
  /* Allgemeines Gruen fuer "in Ordnung" - Haken, Erfolgsmeldungen,
     freie Tage im Kalender. KEINE Rangfarbe: der Rang SONIC TITAN hat
     sein eigenes --rang-titan und wird davon nicht beruehrt.
     Ergaenzt am 14.10., weil var(--gruen) in fuenf Stylesheets benutzt,
     aber nur in dreien definiert war - dort ergab sie keine Farbe. */
  --gruen:#4FD08A;
  --neon-cyan:#00ffff;  --neon-pink:#ff00ff;
  --neon-gold:#ffd700;  --neon-orange:#ff8c00;
  --neon-green:#39ff14; --neon-rot:#ff4444; --neon-red:#ff4444;
}

/* Eine Angabe in einer Liste: Bezeichnung links, Wert rechts. */
.angaben{margin:0;border-top:1px solid var(--linie)}
.angabe{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  border-bottom:1px solid var(--linie);padding:14px 0}
.angabe dt{font-size:15px;color:var(--neben);margin:0}
.angabe dd{margin:0;font-size:15px;color:var(--weiss);text-align:right}
.angabe dd.gross{font-family:var(--jb);font-size:17px}

/* ====================================================================
   ÜBERLAGERUNG  (Erfolgsmeldung nach dem Absenden)
   ==================================================================== */
.ueberlagerung{position:fixed;inset:0;z-index:50;background:rgba(13,14,19,.88);
  display:flex;align-items:center;justify-content:center;padding:var(--luft)}
.ueberlagerung__kasten{border:1px solid var(--cyan);background:var(--karte);
  padding:36px 38px;max-width:520px;text-align:center}
.ueberlagerung__kasten h2{font-family:var(--sg);font-weight:700;font-size:26px;
  line-height:1.2;margin:0 0 16px;color:var(--cyan)}
.ueberlagerung__kasten p{font-size:16px;line-height:1.65;color:var(--weiss);margin:0 0 14px}
.ueberlagerung__kasten .knopf{margin-top:14px}

/* Ein Feld fuer eine Datei. */
.feld input[type="file"]{padding:10px 12px;font-size:15px;cursor:pointer}
.feld input[type="file"]::file-selector-button{font-family:var(--is);font-size:14px;
  margin-right:12px;padding:8px 14px;border:1px solid var(--rand);border-radius:2px;
  background:transparent;color:var(--weiss);cursor:pointer}
.feld textarea{resize:vertical;min-height:84px;line-height:1.5}

/* Der Hinweis "nicht uebersetzt" steht nur in der englischen
   Fassung. Auf Deutsch ist der Absatz leer - und leer heisst weg,
   nicht "leere Zeile". */
.nur-englisch:empty{display:none}
.nur-englisch{border-left:2px solid var(--magenta);padding:10px 14px;
  margin:0 0 24px;color:var(--neben);font-size:15px;line-height:1.6;
  background:var(--karte)}