/* Unterseiten im Tageslicht wie die Startseite: Kopf (Hero) bleibt dunkel, alles darunter Papier + Weiß + Tinte,
   Königsblau nur für Handlung und Auswahl. Greift nur mit <main class="wd tag">; lädt nach dunkel.css.
   Die dunklen Bausteine aus dunkel.css lesen ihre Farben überwiegend aus Variablen – die werden hier hell umgestellt,
   fest eingetragene Weißtöne werden gezielt überschrieben. */

.tag {
  --leinwand: #f5f6f9;
  --flaeche-1: #ffffff;
  --flaeche-2: #f0f2f6;
  --haar-dunkel: rgba(13, 17, 23, 0.1);
  --gedaempft: #5b6475;
  --blau-licht: #2f5bff;
  /* Grundfarben aus stil.css wieder hell (dunkel.css dreht sie in .wd um) */
  --weiss: #ffffff;
  --papier: #f5f6f9;
  --tinte-2: #465062;
  --tinte-3: #687183; /* 4,8:1 auf Weiß */
  --haar: rgba(13, 17, 23, 0.09);
  --haar-weich: rgba(13, 17, 23, 0.06);
  --blau-tief: rgba(47, 91, 255, 0.1);
  --schatten-leicht: 0 14px 40px -24px rgba(13, 17, 23, 0.25);
  --schatten-schwebend: 0 30px 70px -34px rgba(13, 17, 23, 0.35);
  --t-tinte: #0d1117;
  --t-text: #3d4657;
  --t-blau: #2f5bff;
  --t-blau-dunkel: #1e42d6;
  --t-blau-hauch: #edf1ff;
  --t-schatten: 0 1px 2px rgba(13, 17, 23, 0.06), 0 18px 40px -24px rgba(13, 17, 23, 0.28);
  background: #f5f6f9;
  color: var(--t-tinte);
}
/* Der Kopf behält den dunklen Schaufenster-Look 1:1 */
.tag > .kopf {
  --leinwand: #0d1117;
  --flaeche-1: #151a22;
  --flaeche-2: #1c222c;
  --haar-dunkel: rgba(255, 255, 255, 0.08);
  --gedaempft: #9aa3b2;
  --blau-licht: #6d8bff;
  --weiss: #151a22;
  --papier: #0d1117;
  --tinte-2: #b4bccb;
  --tinte-3: #8a93a6;
  --haar: rgba(255, 255, 255, 0.1);
  --haar-weich: rgba(255, 255, 255, 0.06);
  --blau-tief: rgba(47, 91, 255, 0.16);
  --schatten-leicht: 0 14px 40px -20px rgba(0, 0, 0, 0.7);
  --schatten-schwebend: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  background: #0d1117;
  color: #fff;
}

/* ---------- Flächen ---------- */
.tag > section:not(.kopf):not(.schlussblock) { background: transparent; }
.tag .wd-abschnitt-tief, .tag .abschnitt-weiss { background: #fff; border-block: 1px solid var(--haar-dunkel); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) ::selection { background: var(--t-blau); color: #fff; }

/* ---------- Schrift ---------- */
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) :is(h2, h3, h4, summary, .ueberschrift) { color: var(--t-tinte); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .blau { color: inherit; }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .unterzeile { color: var(--t-text); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .textlink { color: var(--t-tinte); border-color: rgba(13, 17, 23, 0.3); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .textlink:hover { color: var(--t-blau); border-color: var(--t-blau); }
.tag .merkmale li, .tag .wd-fakten .wert, .tag .artikel p, .tag .artikel li { color: var(--t-text); }
.tag .artikel strong, .tag .artikel-meta strong { color: var(--t-tinte); }
.tag .artikel li::marker { color: var(--t-blau); }
.tag .artikel-inhalt a:hover { color: var(--t-tinte); }
.tag .wd-paket .paket-preis { color: var(--t-tinte); }
.tag .wd-paket .paket-tag { color: var(--t-blau); }

/* Fließtext: fest eingetragene Hellgrau-Töne aus dunkel.css → Textgrau; der blaue Kasten im Ratgeber bleibt weiß */
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) :is(p, li, dd, td):not(.artikel-kasten *):not(.wd-licht *):not(.paket-preis):not(.paket-tag) { color: var(--t-text); }
.tag .artikel-kasten :is(p, li), .tag .artikel-kasten .wd-auge { color: #fff; }
.tag .artikel-kasten p.wd-auge { color: rgba(255, 255, 255, 0.85); }
.tag :is(.wd-nr, .etikett, .schluessel, .paket-fuss, .artikel-meta) { color: var(--gedaempft); }

/* ---------- Karten: weiß, feine Linie, weicher Schatten ---------- */
.tag :is(.rolle, .wd-kachel, .wd-paket, .ratgeber-karte, a.wd-projekt, .wd-projekt, .kontakt-karte, .zahl-karte) {
  background: #fff; border: 1px solid var(--haar-dunkel); box-shadow: var(--t-schatten); color: var(--t-tinte);
}
.tag :is(.wd-abschnitt-tief, .abschnitt-weiss) :is(.wd-kachel, .wd-paket, .ratgeber-karte, .wd-projekt) { background: #f5f6f9; box-shadow: none; }
@media (hover: hover) {
  .tag :is(a.wd-kachel, a.wd-projekt, .ratgeber-karte):hover { background: #fff; border-color: rgba(47, 91, 255, 0.45); box-shadow: 0 1px 2px rgba(13, 17, 23, 0.06), 0 26px 50px -26px rgba(47, 91, 255, 0.35); }
}
.tag .wd-paket-top { border: 2px solid var(--t-blau); box-shadow: 0 30px 60px -34px rgba(47, 91, 255, 0.55); }
.tag .wd-projekt-fuss .kreis { background: var(--t-tinte); color: #fff; }
.tag .wd-projekt-bald .kreis { background: #e7eaf0; color: var(--gedaempft); }
.tag .region-orte li, .tag .abschnitt-weiss .region-orte li { background: #fff; border-color: var(--haar-dunkel); color: var(--t-tinte); }
.tag .kurzantwort { background: var(--t-blau-hauch); border-color: rgba(47, 91, 255, 0.18); color: var(--t-tinte); }
.tag .schale { background: rgba(13, 17, 23, 0.04); border-color: var(--haar-weich); }
.tag .wd .sparte .kern, .tag .sparte .kern { border: 1px solid var(--haar-dunkel); }
.tag .plakette { background: var(--t-blau-hauch); border-color: rgba(47, 91, 255, 0.18); color: var(--t-tinte); }
.tag .artikel .tabelle { background: #fff; }
.tag .artikel th { background: #f5f6f9; }

/* ---------- Häufige Fragen ---------- */
.tag .fragen summary:hover { color: var(--t-blau); }
.tag .fragen summary::after { color: var(--t-blau); border-color: rgba(13, 17, 23, 0.16); }
.tag .fragen details[open] summary::after { border-color: var(--t-blau); }
.tag .fragen .antwort { color: var(--t-text); }

/* ---------- Knöpfe im hellen Teil: Tinte statt Weiß ---------- */
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .knopf:not(.knopf-blau):not(.knopf-leise):not(.knopf-kohle):not(.knopf-korb) { background: var(--t-tinte); color: #fff; }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .knopf:not(.knopf-blau):not(.knopf-leise):not(.knopf-kohle):not(.knopf-korb):hover { background: var(--t-blau); box-shadow: 0 16px 40px -16px rgba(47, 91, 255, 0.55); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .knopf-leise { color: var(--t-tinte); border-color: rgba(13, 17, 23, 0.2); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .knopf-leise:hover { color: var(--t-blau); border-color: var(--t-blau); background: var(--t-blau-hauch); }
.tag .knopf-kohle { background: #fff; color: var(--t-tinte); border-color: rgba(13, 17, 23, 0.16); }
.tag .knopf-kohle:hover { background: var(--t-blau-hauch); border-color: var(--t-blau); }

/* ---------- Formulare ---------- */
.tag .feld input, .tag .feld textarea, .tag .feld select { background: #fff; color: var(--t-tinte); border-color: rgba(13, 17, 23, 0.18); }
.tag .feld input::placeholder, .tag .feld textarea::placeholder { color: #8a93a6; }
.tag .feld select option { background: #fff; color: var(--t-tinte); }
.tag .kontakt-karte dd a, .tag .zahl-karte .zahl, .tag .laufband-teil span { color: var(--t-tinte); }

/* ---------- Umzugs-Formular (hosting-umzug.html) ---------- */
.tag .umzug-formular :is(legend, h3), .tag .umzug-domain summary, .tag .umzug-zahlung strong,
.tag .umzug-posten dd, .tag .umzug-gesamt strong, .tag .paket-option strong { color: var(--t-tinte); }
.tag .umzug-schritte button { border-bottom-color: rgba(13, 17, 23, 0.12); }
.tag .umzug-schritte button span { background: #e7eaf0; color: var(--t-tinte); }
.tag .umzug-schritte button.fertig { color: var(--t-text); border-color: rgba(47, 91, 255, 0.55); }
.tag .umzug-schritte button.fertig span { background: var(--t-blau-hauch); color: var(--t-blau); }
.tag .umzug-schritte button.aktiv { color: var(--t-tinte); border-color: var(--t-blau); }
.tag .umzug-schritte button.aktiv span { background: var(--t-blau); color: #fff; }
.tag .umzug-schritte button:focus-visible, .tag .paket-option input:focus-visible + span { outline-color: var(--t-blau); }
.tag .paket-option span { border-color: rgba(13, 17, 23, 0.14); background: #fff; }
.tag .paket-option:hover span { border-color: rgba(13, 17, 23, 0.28); }
.tag .paket-option em { color: var(--t-blau); }
.tag .paket-option input:checked + span { background: var(--t-blau-hauch); }
.tag .mail-zeile { background: #f5f6f9; }
.tag .umzug-zahlung { background: rgba(15, 123, 79, 0.06); border-color: rgba(15, 123, 79, 0.28); }
.tag .umzug-zahlung li, .tag .umzug-posten dt { color: var(--t-text); }
.tag .umzug-zahlung li::before { border-color: #0f7b4f; }
.tag .haken.ungueltig { color: #c62828; }
.tag .umzug-nav::before { color: var(--t-tinte); }
.tag .umzug-uebersicht { border-color: var(--haar-dunkel); box-shadow: var(--t-schatten); }
@media (max-width: 720px) { .tag .umzug-nav { background: rgba(255, 255, 255, 0.95); } }

/* ---------- Sonderbausteine ---------- */
/* SEO-Bericht-Fenster bleibt ein dunkles Programmfenster (wie die Browser-Rahmen) */
.tag .seo-bericht { --flaeche-1: #151a22; --flaeche-2: #1c222c; --haar-dunkel: rgba(255, 255, 255, 0.08); }
.tag .seo-bericht li { color: #c9d0dc; }
.tag .seo-bericht :is(span, li) { color: #c9d0dc; }
/* Ladezeit-Rennen (webdesign.html) */
.tag .rennen { background: rgba(13, 17, 23, 0.04); border-color: var(--haar-weich); }
.tag .rennen .kern { color: var(--t-tinte); }
.tag .bahn-spur { background: rgba(13, 17, 23, 0.06); border-color: var(--haar-dunkel); }
.tag .bahn-fuellung { background: #b9c0cc; }
.tag .bahn-nk .bahn-fuellung { box-shadow: 0 0 18px rgba(47, 91, 255, 0.35); }
.tag .rennen-fazit strong { color: var(--t-blau); }
.tag .sparte-zeiger { color: var(--t-blau); }
/* Blaue Lichtkachel bleibt blau mit weißer Schrift */
.tag .wd-kachel.wd-licht { background: radial-gradient(130% 110% at 0% 0%, #7d99ff 0%, #2f5bff 42%, #1a32b8 100%); border-color: transparent; box-shadow: 0 30px 60px -34px rgba(47, 91, 255, 0.55); }
.tag > section:not(.kopf):not(.wd-schluss):not(.schlussblock) .wd-licht :is(h3, .wd-riesig) { color: #fff; }