/* Ausgabe „Mitmachen“ – Dr. Janina A. Bindernagel.
   Nach Janinas Design-Skill (design-janina, Stand 08.11.2026, Kopie in Auftritte/janina/):
   Petrol #166273 (Abstufungen #1b818c, #26b0bf), Gold #ffb200 als Hauptakzent, Magenta #c837ab sparsam
   (Lila #8a09d3 nicht zusammen mit Magenta), Grau #848484 / #d5d5d5, Schwarz auf Weiß,
   Weiß auf Petrol, runde Formen statt harter Kanten. Schrift: Source Sans 3 (Syntax ist nicht frei verfügbar,
   der Skill nennt Source Sans 3 als Ersatz). Immer hell: Weiß ist laut Skill der Standard-Hintergrund. */

@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/auftritt/janina/schrift/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/auftritt/janina/schrift/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/auftritt/janina/schrift/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* Gleiche Spezifität wie der Dunkelmodus in stil.css, damit diese Werte auch dort gelten. */
:root, :root:not(.beamer-hell) {
  color-scheme: light; accent-color: #166273;
  --petrol: #166273; --petrol-mittel: #1b818c; --petrol-hell: #26b0bf; --gold: #ffb200; --magenta: #c837ab;
  --orange: #ffb200; --orange-text: #166273; --orange-hell: rgb(255 178 0 / .16);
  --grau: #166273; --grau-hell: #848484; --linie: #d5d5d5;
  --grund: #ffffff; --flaeche: #ffffff; --text: #000000; --leise: #848484;
  --toenung: rgb(22 98 115 / .07);
  --wolke-schrift: "Source Sans 3", "Open Sans", Montserrat, sans-serif;
}

body { font-family: "Source Sans 3", "Open Sans", Montserrat, sans-serif; font-size: 18px; background: #fff; color: #000; }
h1 { border-bottom: 3px solid var(--gold); padding-bottom: 6px; display: table; }
h2, h3 { color: var(--petrol); font-weight: 600; }

/* Kopfzeile: Weiß auf Petrol, Zeichen als goldener Kreis */
.kopf { background: var(--petrol); }
.zeichen { border-radius: 50%; background: var(--gold); color: #000; font-weight: 700; }
.marke { flex-wrap: wrap; row-gap: 0; }

/* Runde Formen */
.karte { border-radius: 20px; border-color: var(--linie); }
.liste a { border-radius: 16px; }
.liste a:hover { border-color: var(--petrol-hell); }
input, select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus { outline-color: var(--petrol); border-color: var(--petrol); }
.fehler, .erfolg, .hinweis, .warnung, .festgelegt { border-radius: 14px; }
.hinweis, .warnung { color: #000; }
.option, .termin, .dreiwahl span { border-radius: 14px; }
.texte li { border-radius: 14px; background: var(--toenung); }

/* Knöpfe: Gold mit schwarzer Schrift (Call-to-Action), zweite Wahl in Petrol */
.knopf { color: #000; font-weight: 600; }
.knopf.zweit { color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--petrol); }
.link, details summary { color: var(--petrol); }

/* Nummern als Kreise in Petrol, Zustände als runde Marken */
.nummer { background: var(--petrol); color: #fff; }
.status { background: var(--linie); color: #000; }
.zustand-offen { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.zustand-offen .status { background: var(--gold); color: #000; }
.zustand-geschlossen .status { background: #848484; color: #fff; }

/* Balken: Petrol, der vorne liegende in Gold */
.b-spur { background: var(--toenung); }
.b-fuell { background: var(--petrol-mittel); }
.balken li.vorne .b-fuell { background: var(--gold); }

/* Auswahl auf dem Handy */
.option input { accent-color: var(--petrol); }
.option:has(input:checked) { border-color: var(--petrol); background: var(--toenung); }
.w-vielleicht input:checked + span { background: var(--orange-hell); border-color: var(--gold); color: #000; }
.termintabelle .a1 { background: var(--orange-hell); color: #000; }
.termintabelle .bester { box-shadow: inset 0 0 0 2px var(--gold); }
.termintabelle .fest { background: var(--gold); color: #000; }
.termintabelle tr.ich th, .code, .auf-beamer { color: var(--petrol); }
.festgelegt { color: #000; }
.moderation li.frei { background: var(--orange-hell); }

/* Wortwolke: Petrol-Töne, Schwarz und Grau, Magenta als einziger Zweitakzent */
.wort.spitze, .beamer .wort.spitze { color: var(--petrol); }
.wort.f0, .beamer .wort.f0 { color: var(--petrol-mittel); }
.wort.f1, .beamer .wort.f1 { color: #000; }
.wort.f2, .beamer .wort.f2 { color: #848484; }
.wort.f3, .beamer .wort.f3 { color: var(--magenta); }

/* Beamer: Weiß, Frage in Petrol, Beitritt als Petrol-Kasten mit weißer Schrift */
body.beamer { background: #fff; color: #000; }
.beamer h1 { border-bottom: 0; padding-bottom: 0; display: block; }
.b-titel { color: #848484; }
.b-frage h1 { color: var(--petrol); }
.b-beitritt { background: var(--petrol); color: #fff; border-radius: 20px; }
.b-beitritt .code { color: #fff; }
.b-beitritt .qr svg { border-radius: 12px; }
.beamer .b-spur { background: var(--toenung); border-radius: 999px; }
.beamer .b-fuell { background: var(--petrol-mittel); }
.beamer .balken li.vorne .b-fuell { background: var(--gold); }
.b-zaehler { color: #848484; }
.b-wand li { background: var(--toenung); border-left-color: var(--gold); border-radius: 16px; }
.beamer .termintabelle .a1 { background: var(--orange-hell); color: #000; }
.b-vollbild { color: #d5d5d5; }

/* Zugangskarten zum Ausdrucken */
.zugangskarte { border-radius: 16px; border-color: #d5d5d5; }
.zk-titel, .zk-hilfe { color: #848484; }