/* ============================================================================
 * Schwarz-Weiss-Design (gemeinsam fuer alle Seiten)
 * Wirkt nur auf Seiten mit <body class="... bw">. Standard ist schwarz (dunkel): Hintergrund schwarz,
 * weisse Schrift, dunkle Karten. Wo sich ein Farbwechsel anbietet, tragen Abschnitte .theme-dark
 * (schwarz) oder .theme-light (weiss, schwarze Schrift). Das Menue (theme.js) passt sich an den Abschnitt darunter an.
 *
 * Kontraste (WCAG AA >= 4.5:1):
 *   weiss auf schwarz 21:1 | --muted-on-dark auf schwarz 10.1:1
 *   --ink auf weiss 19.8:1 | --muted-on-light auf weiss 9.0:1 | --subtle-on-light auf weiss 7.0:1
 * ========================================================================== */

/* Zentrale Markenfarbe: Ink Blue ersetzt auf allen Seiten jedes Schwarz (Hintergruende, Schrift, Buttons, Rahmen, Schatten).
 * --ink-blue-rgb fuer transparente Varianten: rgba(var(--ink-blue-rgb), 0.4). --ink-blue-channels fuer Tailwind (bg-ink/40). */
:root {
    --ink-blue: #0A1128;
    --ink-blue-rgb: 10, 17, 40;
    --ink-blue-channels: 10 17 40;
    /* Akzentfarbe "Antikgold": gedaempftes, edles Gold statt knalligem Gelbgold.
     * --accent: Flaechen (Buttons beim Hover), Linien und Rahmen auf hellem Grund, weisse Schrift darauf (4.9:1)
     * --accent-text: Schrift auf Weiss (5.2:1)
     * --accent-light: Champagner-Gold fuer Schrift, Linien und Rahmen auf Ink Blue (8.6:1)
     * Fruehere Testfarben: helles Gold #E0B04A, Roemer-Rot #D22526, Electric Blue #2D5BFF. */
    --accent: #946A0A;
    --accent-text: #8F6608;
    --accent-light: #CDAE63;
    --on-accent: #FFFFFF;    /* Schrift und Symbole auf --accent-Flaechen */
}

body.bw {
    --black: var(--ink-blue);
    --ink: var(--ink-blue);
    --white: #ffffff;
    --muted-on-dark: #c4c4c4;
    --muted-on-light: #3f3f3f;
    --subtle-on-light: #595959;
    --line-dark: rgba(255, 255, 255, 0.16);
    --line-light: #e1e1e1;
    --card-dark: var(--ink-blue);
    --card-light: #f5f5f5;

    background-color: var(--black);
    color: var(--white);
}

/* Der fixierte Farbverlauf der anderen Seiten entfaellt: Abschnitte tragen ihren Hintergrund selbst */
body.bw .global-bg { display: none; }
body.bw .font-headline { text-shadow: none; }
body.bw [style*="drop-shadow"] { filter: none !important; }

/* ---------- Abschnittsthemen ---------- */
body.bw .theme-dark  { background: var(--black); color: var(--white); }
body.bw .theme-light { background: var(--white); color: var(--ink); }
/* Keine Trennlinien zwischen den Abschnitten: der Farbwechsel allein trennt sie. */

/* ---------- Text auf hellem Grund (Tailwind-Farbklassen umdeuten) ---------- */
body.bw .theme-light .text-white     { color: var(--ink); }
body.bw .theme-light .text-white\/90,
body.bw .theme-light .text-white\/80 { color: var(--muted-on-light); }
body.bw .theme-light .text-white\/70,
body.bw .theme-light .text-white\/60,
body.bw .theme-light .text-white\/50 { color: var(--subtle-on-light); }
body.bw .theme-light .border-white\/10 { border-color: var(--line-light); }

/* ---------- Text auf dunklem Grund ---------- */
body.bw .theme-dark .text-white\/90,
body.bw .theme-dark .text-white\/80,
body.bw .theme-dark .text-white\/70 { color: var(--muted-on-dark); }
body.bw .theme-dark .border-white\/10 { border-color: var(--line-dark); }

/* ---------- Header ----------
 * Frei auf der Seite: kein Balken, keine Flaeche, keine Linie. Das Skript theme.js setzt data-theme="dark|light" auf Logo, Links und mobile Bedienelemente je nach Bereich darunter.
 * dark  = Abschnitt ist schwarz -> weisse Schrift, weisser Button, Logo wie vorhanden (weiss)
 * light = Abschnitt ist weiss   -> schwarze Schrift, schwarzer Button, Logo invertiert (schwarz) */
body.bw .glass-nav {
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
}
body.bw header { --hdr-fg: var(--white); --hdr-hover: rgba(255, 255, 255, 0.14); }
body.bw header [data-theme="light"] { --hdr-fg: var(--ink); --hdr-hover: rgba(var(--ink-blue-rgb), 0.08); }

body.bw header a.text-white,
body.bw header .nav-link,
body.bw header #mobile-menu-toggle {
    color: var(--hdr-fg);
    transition: color 0.25s ease, background-color 0.25s ease;
}
body.bw header .nav-link:hover,
body.bw header .nav-link.bg-white\/10 { color: var(--hdr-fg); background: var(--hdr-hover); }

body.bw header img { transition: filter 0.25s ease; }
body.bw header [data-theme="light"] img { filter: url(#logo-ink); } /* weisses Logo in Ink Blue, Filter fuegt theme.js ein */

/* Hamburger: nur das Symbol, ohne Rahmen und Flaeche */
body.bw #mobile-menu-toggle {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
body.bw #mobile-menu-toggle svg { color: currentColor; }

/* Header-Button invertiert mit dem Abschnitt */
body.bw header .btn-primary { background: var(--white); color: var(--black); transition: background-color 0.25s ease, color 0.25s ease; }
body.bw header [data-theme="light"] .btn-primary { background: var(--black); color: var(--white); }

/* Geoeffnetes mobiles Menue: eigenes schwarzes Panel, immer weisse Schrift (unabhaengig vom Abschnitt) */
body.bw #mobile-menu-dropdown {
    background: var(--ink-blue) !important;
    border: 1px solid var(--line-dark);
}
body.bw #mobile-menu-dropdown .mobile-link { color: var(--white); }
body.bw #mobile-menu-dropdown .btn-primary { background: var(--white); color: var(--black); }
body.bw header [data-theme="light"] #mobile-menu-dropdown .btn-primary { background: var(--white); color: var(--black); }

/* ---------- Buttons ---------- */
body.bw .btn-primary {
    background: var(--white);
    color: var(--black);
    box-shadow: none;
}
body.bw .btn-primary:hover { background: #e9e9e9; box-shadow: none; }
body.bw .btn-secondary {
    color: var(--white);
    border-color: var(--white);
    backdrop-filter: none;
}
body.bw .btn-secondary:hover { background: var(--white); color: var(--black); transform: none; }

/* Auf hellem Grund invertiert: schwarzer Button, schwarze Outline */
body.bw .theme-light .btn-primary { background: var(--black); color: var(--white); }
body.bw .theme-light .btn-primary:hover { background: #2a2a2a; }
body.bw .theme-light .btn-secondary { color: var(--ink); border-color: var(--ink); }
body.bw .theme-light .btn-secondary:hover { background: var(--ink); color: var(--white); }

body.bw header [data-theme="light"] a:focus-visible,
body.bw header [data-theme="light"] button:focus-visible { outline-color: var(--black); }

body.bw a:focus-visible,
body.bw button:focus-visible,
body.bw input:focus-visible,
body.bw textarea:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}
body.bw .theme-light a:focus-visible,
body.bw .theme-light button:focus-visible,
body.bw .theme-light input:focus-visible,
body.bw .theme-light textarea:focus-visible { outline-color: var(--black); }

/* ---------- Karten und Bildflaechen ---------- */
body.bw .glass-card,
body.bw .glass-image-container {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
body.bw .theme-dark .glass-card,
body.bw .theme-dark .glass-image-container {
    background: var(--card-dark);
    border: 1px solid var(--line-dark);
}
body.bw .theme-dark .glass-card:hover,
body.bw .theme-dark .glass-image-container:hover {
    background: var(--card-dark);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}
body.bw .theme-light .glass-card,
body.bw .theme-light .glass-image-container {
    background: var(--card-light);
    border: 1px solid var(--line-light);
}
body.bw .theme-light .glass-card:hover,
body.bw .theme-light .glass-image-container:hover {
    background: var(--card-light);
    border-color: var(--ink);
    box-shadow: none;
}

/* Icons */
body.bw .text-brand-glow,
body.bw .icon-brand-color,
body.bw .text-custom-dark-blue { filter: none; color: var(--white); }
body.bw .theme-light .text-brand-glow,
body.bw .theme-light .icon-brand-color,
body.bw .theme-light .text-custom-dark-blue { color: var(--ink); }

/* Projekt-Karussell (dunkler Abschnitt) */
body.bw .carousel-nav-btn {
    background: var(--card-dark);
    border-color: var(--line-dark);
    backdrop-filter: none;
}
body.bw .carousel-nav-btn:hover { background: var(--white); color: var(--black); }

/* Formular (heller Abschnitt) */
body.bw .theme-light .glass-input {
    background: var(--white);
    border: 1px solid #bdbdbd;
    color: var(--ink);
    backdrop-filter: none;
}
body.bw .theme-light .glass-input::placeholder { color: var(--subtle-on-light); }
body.bw .theme-light .glass-input:focus { border-color: var(--black); }

/* ---------- Footer ---------- */
body.bw footer {
    background: var(--black);
    border-top: 0;   /* keine Linie zum vorherigen Abschnitt */
    margin-top: 0;   /* kein Spalt: der Footer schliesst direkt an den Abschnitt davor an */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.bw footer .text-white\/80,
body.bw footer .text-white\/70 { color: var(--muted-on-dark); }
body.bw footer .text-white\/50 { color: #a8a8a8; }


/* ---------- Standard (ohne Abschnittsklasse) = dunkel ---------- */
body.bw .text-white\/90,
body.bw .text-white\/80,
body.bw .text-white\/70 { color: var(--muted-on-dark); }
body.bw .border-white\/10 { border-color: var(--line-dark); }
body.bw .glass-card,
body.bw .glass-image-container {
    background: var(--card-dark);
    border: 1px solid var(--line-dark);
}
body.bw .glass-card:hover,
body.bw .glass-image-container:hover {
    background: var(--card-dark);
    border-color: rgba(255, 255, 255, 0.5);
}
body.bw .glass-input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--white);
    backdrop-filter: none;
}
body.bw .glass-input::placeholder { color: var(--muted-on-dark); }
body.bw .glass-input:focus { border-color: var(--white); }

/* Einflug-Effekt im ersten Abschnitt (Hero) startet per CSS sofort, ohne auf JavaScript zu warten.
 * Gleiche Bewegung und Dauer wie der Scroll-Effekt, aber die Ueberschrift ist frueher sichtbar (besserer LCP). */
@keyframes hero-in-bottom { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-top { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: none; } }
body.bw main > section:first-of-type .reveal { animation: hero-in-bottom 2.2s cubic-bezier(0.1, 1, 0.3, 1) both; }
body.bw main > section:first-of-type .reveal-top { animation: hero-in-top 2.2s cubic-bezier(0.1, 1, 0.3, 1) both; }

/* Einflug-Effekt (.reveal): bei reduzierter Bewegung sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-top { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}

/* ---------- Landingpages: weitere Bausteine ---------- */
body.bw .text-white\/85 { color: var(--muted-on-dark); }
body.bw .theme-light .text-white\/85 { color: var(--muted-on-light); }
body.bw .step-num { background: var(--white); color: var(--black); }
body.bw .theme-light .step-num { background: var(--black); color: var(--white); }
body.bw .btn-primary, body.bw .btn-secondary { text-align: center; }

/* ---------- Call-to-Action-Karte "Marke auffrischen. Bereit fuer Neues." (Artikel) ---------- */
body.bw .cta-footer-card {
    background: var(--card-dark);
    border: 1px solid var(--line-dark);
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 24px;
}
body.bw .cta-footer-card .text-white\/90 { color: var(--muted-on-dark); }

/* ============================================================================
 * Akzentfarbe Gold: Hover-Effekt, bewusst sparsam
 *   Buttons: Flaeche Antikgold, Schrift weiss. Links und Menue: Schrift gold (hell/dunkel je nach Grund). Karten: goldener Rand.
 * ========================================================================== */
body.bw header { --hdr-accent: var(--accent-light); }
body.bw header [data-theme="light"] { --hdr-accent: var(--accent-text); }

/* Buttons (alle Varianten, auch im Header und im mobilen Menue) */
body.bw .btn-primary:hover,
body.bw .btn-secondary:hover,
body.bw .theme-light .btn-primary:hover,
body.bw .theme-light .btn-secondary:hover,
body.bw header .btn-primary:hover,
body.bw #mobile-menu-dropdown .btn-primary:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--on-accent) !important;
}

/* Menue */
body.bw header .nav-link:hover,
body.bw #mobile-menu-dropdown .mobile-link:hover { color: var(--hdr-accent, var(--accent-light)); }
body.bw #mobile-menu-dropdown .mobile-link:hover { color: var(--accent-light); }

/* Karten: goldener Rand beim Hover (auf dunklem Grund das helle Champagner-Gold) */
body.bw .theme-dark .glass-card:hover,
body.bw .theme-dark .glass-image-container:hover,
body.bw .glass-card:hover,
body.bw .glass-image-container:hover { border-color: var(--accent-light); }
body.bw .theme-light .glass-card:hover,
body.bw .theme-light .glass-image-container:hover { border-color: var(--accent); }

/* Links im Footer und in Artikeln (dunkler Grund) */
body.bw footer a:hover,
body.bw .hover\:text-brand-glow:hover,
body.bw .hover\:text-white:hover { color: var(--accent-light); }
body.bw .theme-light a.hover\:text-brand-glow:hover { color: var(--accent-text); }

/* Formularfelder: goldener Rand im Fokus */
body.bw .glass-input:focus { border-color: var(--accent-light); }
body.bw .theme-light .glass-input:focus { border-color: var(--accent); }