/* Testvarianten (Jenny 30.10.: "mehr Farben, kraeftig" oder "komplett schwarz") */
/* A: schwarz */
body:has(.thema-schwarz) { background: #0a0a0a; }
body:has(.thema-schwarz) .kopf.fest { background: rgba(10,10,10,.92); color: #fff; border-bottom-color: #1e1e1e; }
.thema-schwarz { --navy: #7fb2ff; background: #0a0a0a; color: #f2f2f2; }
.thema-schwarz .block { background: #0a0a0a; }
.thema-schwarz .sand { background: #121722; }
.thema-schwarz .titel-m, .thema-schwarz .satz-m, .thema-schwarz .st b, .thema-schwarz .erg h3, .thema-schwarz .fragen5 summary, .thema-schwarz .optionen b, .thema-schwarz .probier b, .thema-schwarz .ergebnis .bausteine b { color: #fff; }
.thema-schwarz .unter-m, .thema-schwarz .st span, .thema-schwarz .erg p, .thema-schwarz .fragen5 p, .thema-schwarz .optionen span, .thema-schwarz .ganz { color: #b8bec8; }
.thema-schwarz .ganz em { color: #7fb2ff !important; }
.thema-schwarz .woche { background: #0a0a0a; border: 1px solid #263044; }
.thema-schwarz .woche h4, .thema-schwarz .tag b { color: #fff; }
.thema-schwarz .tag span, .thema-schwarz .woche small { color: #9aa3b2; }
.thema-schwarz .tag .kreis { background: #7fb2ff; color: #0a0a0a; }
.thema-schwarz .tag.letzt .kreis { background: #fff; color: #0a0a0a; }
.thema-schwarz .fragen5 details { border-bottom-color: #262626; }
.thema-schwarz .quiz-start button, .thema-schwarz .knopf { background: #fff; color: #0a0a0a; border-color: #fff; }
.thema-schwarz .pfeil, .thema-schwarz .zurueck { color: #fff !important; }
.thema-schwarz .schritt-anz i { background: #2a3346; }
.thema-schwarz .ph { color: #7fb2ff; }
.thema-schwarz .quelle5 { color: #6c7380; }
/* B: kraeftige Farben */
.thema-farbe { --navy: #2445d6; --orange: #ff6a3d; }
.thema-farbe #wo { background: #2445d6; color: #fff; }
.thema-farbe #wo .titel-m, .thema-farbe #wo .optionen b, .thema-farbe #wo .frage-kopf h3, .thema-farbe #wo .ergebnis .bausteine b { color: #fff; }
.thema-farbe #wo .unter-m, .thema-farbe #wo .optionen span { color: #dbe2ff; }
.thema-farbe #wo .frage-kopf small, .thema-farbe #wo .ergebnis .label { color: #ffd2c2; }
.thema-farbe #wo .schritt-anz i { background: rgba(255,255,255,.3); }
.thema-farbe #wo .schritt-anz i.ja { background: #ff6a3d; }
.thema-farbe #wo .quiz-start button { background: #ff6a3d; color: #111; }
.thema-farbe #wo .quiz-start button:hover { background: #fff; }
.thema-farbe #wo .optionen button:hover img { box-shadow: 0 0 0 4px #ff6a3d; }
.thema-farbe #wo .zurueck { color: #dbe2ff !important; }
.thema-farbe #wo .woche { color: #111; }
.thema-farbe #wo .knopf { background: #ff6a3d; color: #111; border-color: #ff6a3d; }
.thema-farbe .erg b { color: #2445d6; }
.thema-farbe .erg:nth-child(2) b { color: #ff6a3d; }
.thema-farbe .ganz em { color: #ff6a3d !important; }
.thema-farbe .satz-m em { color: #ff6a3d; }
.thema-farbe .ph { color: #ff6a3d; }
.thema-farbe .sand { background: #e9eeff; }
.thema-farbe .schluss5 { background: #ff6a3d !important; }
.thema-farbe .schluss5 .unter-m { color: #3a1a10; }
.thema-farbe .schluss5 .knopf { background: #111; color: #fff; border-color: #111; }
.thema-farbe .tag .kreis { background: #2445d6; }
.thema-farbe .tag.letzt .kreis { background: #ff6a3d; color: #111; }
.thema-farbe .probier span { color: #2445d6; }

/* C/D (Jenny 30.10.): Weiss + schwarze Container + EINE ruhige Flaechenfarbe, weisse Knoepfe, keine knallige Akzentfarbe */
.thema-ruhig { --flaeche: #1d3354; --navy: #1d3354; }
.thema-ruhig.gruen { --flaeche: #1f3b33; --navy: #1f3b33; }
.thema-ruhig .sand { background: #fff; }
.thema-ruhig #wo { background: var(--flaeche); color: #fff; }
.thema-ruhig .schluss5 { background: #0b0b0b !important; color: #fff; }
.thema-ruhig #wo .titel-m, .thema-ruhig #wo .frage-kopf h3, .thema-ruhig #wo .optionen b, .thema-ruhig #wo .ergebnis .bausteine b,
.thema-ruhig .schluss5 .titel-m { color: #fff; }
.thema-ruhig #wo .unter-m, .thema-ruhig #wo .optionen span, .thema-ruhig .schluss5 .unter-m { color: rgba(255,255,255,.72); }
.thema-ruhig #wo .frage-kopf small, .thema-ruhig #wo .ergebnis .label { color: rgba(255,255,255,.7); }
.thema-ruhig #wo .schritt-anz i { background: rgba(255,255,255,.25); }
.thema-ruhig #wo .schritt-anz i.ja { background: #fff; }
.thema-ruhig #wo .quiz-start button, .thema-ruhig #wo .knopf, .thema-ruhig .schluss5 .knopf { background: #fff; color: #111; border: 1px solid #fff; }
.thema-ruhig #wo .quiz-start button:hover, .thema-ruhig #wo .knopf:hover, .thema-ruhig .schluss5 .knopf:hover { background: transparent; color: #fff; }
.thema-ruhig #wo .optionen button:hover img { box-shadow: 0 0 0 4px #fff; }
.thema-ruhig #wo .zurueck { color: rgba(255,255,255,.75) !important; }
.thema-ruhig #wo .woche { background: #fff; color: #111; }
.thema-ruhig .tag .kreis { background: var(--flaeche); }
.thema-ruhig .tag.letzt .kreis { background: #111; }
.thema-ruhig .probier .f { background: #f3f3f3; }

.thema-ruhig .ganz em, .thema-ruhig .satz-m em { color: var(--flaeche) !important; }
.thema-ruhig .probier span { color: var(--flaeche); }
.thema-ruhig .ph { color: var(--flaeche); }
/* Entscheidung Jenny 30.10.: Blau-Variante; Brillen-Container zum Anprobieren schwarz */
.thema-ruhig .probier-block { background: #0b0b0b !important; color: #fff; }
.thema-ruhig .probier-block .titel-m { color: #fff; }
.thema-ruhig .probier-block .unter-m { color: rgba(255,255,255,.72); }
.thema-ruhig .probier-block .probier .f { background: #fff; }
.thema-ruhig .probier-block .probier b { color: #fff; }
.thema-ruhig .probier-block .probier span { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 4px; }
.thema-ruhig .probier-block .pfeil { color: #fff; }
/* Try-on als echte Knoepfe (Jenny 30.10.), "See all frames" leiser */
.thema-ruhig .probier-block .probier span { display: inline-block; margin-top: 14px; background: #fff; color: #111; text-decoration: none; font-size: 16px; font-weight: 600; padding: 14px 34px; border: 1px solid #fff; transition: background .2s, color .2s; }
.thema-ruhig .probier-block .probier a:hover span { background: transparent; color: #fff; }
.thema-ruhig .probier-block .mitte-knopf .pfeil { font-size: 13px; font-weight: 400; opacity: .6; border-bottom-width: 0; text-decoration: underline; text-underline-offset: 4px; }