/* ==========================================================================
   AVIDIS · Stil „Hell“ (Variante vom 24.09.2026)
   Mischform: Kopfbereich, Kennzahlen, KI-Abschnitt der Startseite, Aufruf-Band
   und Fußzeile bleiben dunkel. Alle übrigen Abschnitte werden weiß bzw.
   hellgrau. Aktiv nur mit <html class="stil-hell"> (Schalter im Entwurf).
   ========================================================================== */

/* ---------- Helle Abschnitte: Farbvariablen umstellen ---------- */
html.stil-hell .sek:not(.ki):not(.sek--dunkel) {
  --bg: #ffffff;
  --bg-raise: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f8fafd;
  --surface-3: #eef2f7;
  --line: #e2e8f0;
  --line-2: #cfd8e3;
  --fg: #0e1a2e;
  --fg-2: #3a4860;
  --fg-3: #5a6880;
  --sky: #1d63d6;
  --blue-hi: #2b6de8;
  --ok: #0f7f55;
  --link-hover: #1748a8;
  background: var(--bg);
  color: var(--fg);
}
html.stil-hell .sek--grau:not(.ki):not(.sek--dunkel) {
  --bg: #f3f6fa;
  --bg-raise: #eef2f7;
  --surface-2: #ffffff;
  --surface-3: #e9eef5;
  background: var(--bg);
  border-block-color: var(--line);
}

/* Startseite: Weiß und Hellgrau im Wechsel (nach dem dunklen KI-Band) */
html.stil-hell :is(#software, #web, #ablauf, #kontakt).sek {
  --bg: #f3f6fa;
  --bg-raise: #eef2f7;
  --surface-2: #ffffff;
  --surface-3: #e9eef5;
  background: var(--bg);
}

/* ---------- Dunkle Inseln in hellen Abschnitten behalten ihre Farben ---------- */
html.stil-hell :is(.cta-band, .check-karte, .kachel--ki, .baustein--hervor, .konsole, .werkstatt) {
  --bg: #05080f;
  --bg-raise: #080d18;
  --surface: #0b1220;
  --surface-2: #0f192c;
  --surface-3: #142038;
  --line: rgba(150, 180, 235, .12);
  --line-2: rgba(150, 180, 235, .22);
  --fg: #e9f0fb;
  --fg-2: #b3c1d6;
  --fg-3: #8697b1;
  --sky: #7cc8ff;
  --blue-hi: #4c8dff;
  --ok: #5fd3a0;
  --link-hover: #a9dcff;
  color: var(--fg);
}

/* ---------- Einzelne Bausteine, die feste Dunkelfarben hatten ---------- */
html.stil-hell .sek:not(.ki) .link:hover { color: var(--link-hover); }
html.stil-hell .sek:not(.ki) .btn--ghost:hover { background: rgba(15, 35, 70, .05); border-color: #b3c1d4; }
html.stil-hell .sek:not(.ki) .feld:hover { background: var(--surface-2); }
html.stil-hell .sek:not(.ki) .kugel { display: none; }
html.stil-hell .sek:not(.ki) .kasten { border-color: rgba(43, 109, 232, .22); background: rgba(43, 109, 232, .05); }

/* Karten: leichter Schatten statt dunkler Tiefe */
html.stil-hell .sek:not(.ki) :is(.kachel:not(.kachel--ki), .ref-karte, .it-kunde:not(.it-kunde--mehr), .baustein:not(.baustein--hervor), .weiter__karte, .fall, .adresse, .formular, .pakete) {
  box-shadow: 0 1px 2px rgba(15, 35, 70, .04), 0 14px 34px -22px rgba(15, 35, 70, .22);
}
html.stil-hell .sek:not(.ki) .kachel--host {
  background: radial-gradient(80% 140% at 100% 100%, rgba(43, 109, 232, .09), transparent 62%), linear-gradient(180deg, #ffffff, #f8fafd);
}
html.stil-hell .sek:not(.ki) .host-fakten li { background: #ffffff; }

/* Browserrahmen um Screenshots: hell */
html.stil-hell .sek:not(.ki) .rahmen { background: #ffffff; border-color: #d3dbe6; box-shadow: 0 26px 60px -36px rgba(15, 35, 70, .38); }
html.stil-hell .sek:not(.ki) .rahmen__leiste { background: #f1f4f9; border-bottom-color: #e2e8f0; }
html.stil-hell .sek:not(.ki) .rahmen__punkte i { background: #cdd6e2; }
html.stil-hell .sek:not(.ki) .rahmen__url { background: #ffffff; color: #5a6880; box-shadow: inset 0 0 0 1px #e2e8f0; }
html.stil-hell .sek:not(.ki) :is(.handy, .galerie .handy-einzel) { box-shadow: 0 26px 50px -26px rgba(15, 35, 70, .45); }
html.stil-hell .sek:not(.ki) .site figure { background: #eef2f7; }
html.stil-hell .sek:not(.ki) .konsole { box-shadow: 0 30px 70px -30px rgba(15, 35, 70, .5); }

/* Formular */
html.stil-hell .sek:not(.ki) .fld :is(input, select, textarea) { background: #ffffff; border-color: #cfd8e3; }
html.stil-hell .sek:not(.ki) .fld :is(input, textarea)::placeholder { color: #6b778c; }
html.stil-hell .sek:not(.ki) .formular__meldung { background: #e8f6ef; border-color: #9fd8bd; color: #0f5c3c; }

/* Laufband-Knopf, Platzhalter, Status */
html.stil-hell .sek:not(.ki) .band__knopf { background: #ffffff; color: var(--fg-2); border-color: var(--line-2); }
html.stil-hell .sek:not(.ki) .band__knopf:hover { color: var(--fg); border-color: #b3c1d4; }
html.stil-hell .sek:not(.ki) .platzhalter { color: #8a4b00; border-color: rgba(200, 120, 20, .55); background: rgba(255, 170, 60, .12); }
html.stil-hell .sek:not(.ki) .status--entwicklung { color: #8f5d00; }
html.stil-hell .sek:not(.ki) .status--entwicklung::before { background: #c68a00; box-shadow: 0 0 0 4px rgba(198, 138, 0, .15); }

/* Kundenlogos: auf Weiß grau statt hell */
html.stil-hell .sek:not(.ki) .logo img { filter: brightness(0); opacity: .48; }
html.stil-hell .sek:not(.ki) .logo:hover img { opacity: .8; }

/* ---------- Umschalter hell/dunkel: in der Kopfleiste (Desktop) und im Menü (Handy) ---------- */
.kopf__stil { color: var(--fg-2); }
.kopf__stil .ic, .menu__stil .ic { width: 20px; height: 20px; }
@media (max-width: 1140px) { .kopf__stil { display: none; } }

/* Ablaufkette (z. B. Kundenportal) in hellen Abschnitten: helle Knoten; in der dunklen KI-Kachel bleibt sie dunkel */
html.stil-hell .sek:not(.ki) .kette:not(.kachel--ki .kette) .kette__knoten { background: #ffffff; border-color: var(--line-2); box-shadow: 0 10px 26px -18px rgba(15, 35, 70, .25); }
html.stil-hell .sek:not(.ki) .kette:not(.kachel--ki .kette) .kette__knoten--ki { background: radial-gradient(90% 90% at 50% 0%, rgba(43, 109, 232, .12), #ffffff); border-color: rgba(43, 109, 232, .35); }
/* Beschriftung unter den Handybildern sitzt auf dem dunklen Rahmen */
html.stil-hell .sek:not(.ki) .mini-apps figcaption { color: #b3c1d6; }

/* Kopfleiste über hellen Abschnitten: weißer Grund, dunkle Schrift, Schriftzug in Navy */
html.stil-hell .kopf.ueber-hell {
  --fg: #0e1a2e;
  --fg-2: #3a4860;
  --line: #e2e8f0;
  --line-2: #cfd8e3;
  --sky: #1d63d6;
  background: rgba(255, 255, 255, .92);
  border-bottom-color: #e2e8f0;
  box-shadow: 0 8px 24px -20px rgba(15, 35, 70, .35);
}
html.stil-hell .kopf.ueber-hell .nav a:hover { background: rgba(15, 35, 70, .05); }
html.stil-hell .kopf.ueber-hell .nav a[aria-current="page"] { background: rgba(43, 109, 232, .09); }
html.stil-hell .kopf.ueber-hell .btn--ghost:hover { background: rgba(15, 35, 70, .05); }
html.stil-hell .kopf.ueber-hell .marke__wort:not(.marke__wort--navy) { display: none; }
html.stil-hell .kopf.ueber-hell .marke__wort--navy { display: block; }

/* Kontaktformular in hellen Abschnitten */
html.stil-hell .sek:not(.ki) .fld__fehler { color: #b42318; }
html.stil-hell .sek:not(.ki) :is(.formular__fehler, .formular-hinweis) { color: #8a1c14; background: #fef1f0; border-color: #f4b4ae; }
html.stil-hell .sek:not(.ki) .formular-danke { background: radial-gradient(90% 70% at 50% 0%, rgba(43, 109, 232, .10), transparent 70%), #ffffff; box-shadow: 0 1px 2px rgba(15, 35, 70, .04), 0 14px 34px -22px rgba(15, 35, 70, .22); }

/* KI-Zahlen in hellen Abschnitten: dunkles Blau statt heller Verlauf */
html.stil-hell .sek:not(.ki) .ki-zahl strong { background: linear-gradient(115deg, #1d4fc4, #2b6de8 60%, #3d8bf5); -webkit-background-clip: text; background-clip: text; }