/* Design „Miniaturwelt" für alle Seiten (seit Okt. 2026).
   Theme-Ebene über den Grundstilen in base_new.html, greift über
   body.design-v3. Mit Config.LEGACY_DESIGN wird sie nicht geladen und die
   Seiten zeigen wieder das alte Design.

   Schriften: fonts-v3.css legt 'Poppins' und 'DM Sans' als Alias auf
   Instrument Sans, damit auch die vielen Inline-Angaben der Seiten mitziehen.
   Unbounded nur für echte Überschriften.

   Tokens (Kontraste gemessen, WCAG)
   Nacht (#082F1B): Text #EEF5EF 13.2:1, Neben #B7CBBD 8.6:1, Rahmen #6B9A7B 4.6:1
   Hell (#FFF):     Text #0F1A14 17.8:1, Neben #3C4A40 9.4:1, Grün #077A3F 5.4:1,
                    Rahmen/gedimmt #7B877F 3.7:1
   Kein Gelb (Wunsch Daniel 2026-10-29), nur Grüntöne: Akzent #8CE0AE nur für
   Hauptaktionen, Text darauf #0F1A14 11.4:1. Hover-Fläche hell #D8F2E1. */

body.design-v3 {
    --v3-night: #082F1B; --v3-night-2: #0E3D24; --v3-night-fg: #EEF5EF; --v3-night-mute: #B7CBBD;
    --v3-night-line: #6B9A7B; --v3-night-rule: #1E4A31;
    --v3-ink: #0F1A14; --v3-mute: #3C4A40; --v3-green: #077A3F; --v3-ctrl: #7B877F; --v3-rule: #E4EAE5;
    --v3-accent: #8CE0AE; --v3-accent-soft: #D8F2E1;

    /* Plattform-Tokens umbiegen: Gelb raus, eckiger, ruhiger */
    --spark: var(--v3-accent);
    --r-md: 12px; --r-lg: 14px; --r-pill: 10px;

    background: #fff; color: var(--v3-ink); font-family: 'Instrument Sans', sans-serif;
}
body.design-v3::before { display: none; }

/* ── Navigation (Nachtgrün) ─────────────────────────────── */
.design-v3 .site-nav { background: rgba(8,47,27,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.design-v3 .nav-links a { color: #D8F2E1; }
.design-v3 .nav-links a:hover, .design-v3 .nav-links a.active { color: #fff; }
.design-v3 .nav-cta { background: var(--v3-accent) !important; color: var(--v3-ink) !important; border-radius: 8px; font-weight: 600 !important; }
.design-v3 .nav-cta:hover { background: var(--v3-accent-soft) !important; color: var(--v3-ink) !important; }
.design-v3 .nav-city { border-radius: 8px; border-color: var(--v3-night-line); background: transparent; }
.design-v3 .nav-city.is-set { background: var(--v3-accent); color: var(--v3-ink); border-color: var(--v3-accent); }
.design-v3 .city-popover input:focus { border-color: var(--v3-green); }
/* Konto-Menü ist auf dem Desktop ein weißes Aufklappmenü: dunkle Schrift,
   sonst greift die helle Nav-Link-Farbe von oben (unlesbar). */
.design-v3 .nav-links .nav-account-menu a { color: var(--v3-mute); }
.design-v3 .nav-links .nav-account-menu a:hover { background: var(--v3-accent-soft); color: var(--v3-ink); }
@media (max-width: 820px) {
    .design-v3 .nav-links { background: var(--v3-night); }
    .design-v3 .nav-links .nav-cta { border-radius: 8px !important; }
    /* Mobil liegt das Konto-Menü direkt im dunklen Menü */
    .design-v3 .nav-links .nav-account-menu a { color: #D8F2E1; }
    .design-v3 .nav-links .nav-account-menu a:hover { background: var(--v3-night-2); color: #fff; }
}

/* ── Überschriften: Unbounded, eng gesetzt ──────────────── */
.design-v3 .page-hero-title,
.design-v3 .section-title,
:where(.design-v3) main h1 {
    font-family: 'Unbounded', sans-serif; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
}
:where(.design-v3) main h2 { font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: -.02em; }
/* Viele Seiten setzen Überschriften inline (Poppins 300); ohne !important zieht
   das Theme dort nicht. Die Startseite (.v3-h2) behält ihre eigenen Werte. */
.design-v3 main h1 { font-family: 'Unbounded', sans-serif !important; font-weight: 800 !important; letter-spacing: -.03em; }
.design-v3 main h2:not(.v3-h2) { font-family: 'Unbounded', sans-serif !important; font-weight: 700 !important; letter-spacing: -.02em; }
/* Weichgezeichnete Farbflecken im Hintergrund (typisches KI-Muster) aus */
.design-v3 main [aria-hidden="true"][style*="blur("] { display: none; }
.design-v3 .section-title { font-size: clamp(1.7rem, 3.6vw, 2.8rem); }
.design-v3 .section-title em,
.design-v3 .page-hero-title em { color: var(--v3-green); }

/* Kicker statt gesperrter Versalien mit Strich */
.design-v3 .section-label,
.design-v3 .page-hero-eyebrow {
    font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: .9rem;
    letter-spacing: 0; text-transform: none; color: var(--v3-green);
}
.design-v3 .section-label::before,
.design-v3 .page-hero-eyebrow::before { display: none; }

/* ── Seitenkopf: Abendszene wie der Startseiten-Hero ────── */
.design-v3 .page-hero { background: var(--v3-night); color: var(--v3-night-fg); padding-bottom: 4.5rem; }
.design-v3 .page-hero-blob { display: none; }
.design-v3 .page-hero-inner { max-width: 1080px; margin: 0 auto; }
.design-v3 .page-hero-title { color: var(--v3-night-fg); font-size: clamp(2rem, 5vw, 4rem); }
.design-v3 .page-hero-title em { color: var(--v3-accent); }
.design-v3 .page-hero-eyebrow { color: var(--v3-accent); }
.design-v3 .page-hero-sub { color: var(--v3-night-mute); font-size: 1.1rem; line-height: 1.6; max-width: 560px; }
.design-v3 .page-hero a:not([class]) { color: var(--v3-accent); }
/* Die Seiten setzen den ersten Abschnitt oft dicht an den Kopf (padding-top inline);
   mit dunklem Kopf braucht der helle Teil wieder Luft. */
.design-v3 .page-hero + .section,
.design-v3 .page-hero + section { padding-top: 4rem !important; }

/* ── Aktionen ────────────────────────────────────────────── */
.design-v3 .btn-primary-gcl {
    min-height: 52px; border-radius: 10px; background: var(--v3-green); color: #fff;
    font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .95rem; letter-spacing: 0;
}
.design-v3 .btn-ghost-gcl {
    min-height: 52px; border-radius: 10px; border: 1.5px solid var(--v3-ctrl);
    font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: .95rem;
}
@media (hover: hover) {
    .design-v3 .btn-primary-gcl:hover { background: #0A5F33; color: #fff; transform: none; box-shadow: none; }
    .design-v3 .btn-ghost-gcl:hover { border-color: var(--v3-ink); background: var(--v3-accent-soft); transform: none; }
}
/* Seitenkopf: Hauptaktion im Frühlingsgrün wie auf der Startseite */
.design-v3 .page-hero .btn-primary-gcl { background: var(--v3-accent); color: var(--v3-ink); }
.design-v3 .page-hero .btn-ghost-gcl { color: var(--v3-night-fg); border-color: var(--v3-night-line); }
@media (hover: hover) {
    .design-v3 .page-hero .btn-primary-gcl:hover { background: var(--v3-accent-soft); color: var(--v3-ink); }
    .design-v3 .page-hero .btn-ghost-gcl:hover { background: var(--v3-night-2); color: var(--v3-night-fg); }
}
/* Bootstrap-Seiten (Karte, Profil, Admin) */
.design-v3 .btn { border-radius: 10px; font-weight: 600; }

/* ── Formulare ───────────────────────────────────────────── */
.design-v3 .gcl-label {
    font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v3-ink);
}
.design-v3 .gcl-input {
    background: #fff; border: 1.5px solid var(--v3-ctrl); font-weight: 400; font-size: 1rem;
}
.design-v3 .gcl-input:focus { border-color: var(--v3-green); box-shadow: 0 0 0 3px var(--v3-accent-soft); }
.design-v3 .gcl-input::placeholder { color: var(--v3-ctrl); }
.design-v3 .gcl-cat-check:hover { border-color: var(--v3-green); background: var(--v3-accent-soft); }
.design-v3 .gcl-cat-check:has(input:checked) { border-color: var(--v3-green); background: var(--v3-accent-soft); }
.design-v3 .gcl-cat-check input[type="checkbox"] { accent-color: var(--v3-green); }

/* ── Karten und Texte ────────────────────────────────────── */
.design-v3 .gcl-card { background: #fff; border: 1px solid var(--v3-rule); border-radius: 14px; }
.design-v3 .prose h2 {
    font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.15rem;
    letter-spacing: -.01em; text-transform: none;
}
.design-v3 .prose h3 { font-weight: 600; color: var(--v3-green); }
.design-v3 .prose strong { font-weight: 600; }

/* ── Footer: hell wie gehabt, Überschriften ohne Versalien ─ */
.design-v3 .site-footer { background: #fff; border-top: 1px solid var(--v3-rule); }
.design-v3 .footer-group h3 {
    font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: .85rem;
    letter-spacing: 0; text-transform: none;
}
.design-v3 .footer-group a { font-size: .9rem; }
.design-v3 .footer-group a:hover { color: var(--v3-green); }