/* =========================================================
   THEME „HELL“ — Look der Visitenkarte (seit 08.10.2026)
   Weißer Grund, schwarze Poppins-Typo, Sonnengelb #FED63C als Akzent.
   Wird NACH style.css geladen und überschreibt nur Farben/Schrift/Flächen.
   Zurück zum alten dunklen Look: diese Datei einfach nicht mehr einbinden
   (Zeile in includes/header.php entfernen).
   Gilt nicht für den Motorrad-/Reiseblog-Bereich (.page-reise), der seine
   eigene Reise-Palette behält — dort ändert sich nur die Schrift.
   ========================================================= */

:root {
  /* Visitenkarte */
  --vk-gelb: #FED63C;
  --vk-gelb-tief: #F2C200;      /* Hover/Kanten */
  --vk-schwarz: #0A0A0A;
  --vk-weiss: #FFFFFF;
  --vk-grau: #F4F4F2;           /* zweite, ruhige Fläche */
  --vk-grau-2: #E9E9E6;
  --vk-text-leise: rgba(10,10,10,0.64);
  --vk-linie: rgba(10,10,10,0.12);

  /* Alte CD-Variablen auf die neue Palette umgebogen (damit Inline-Styles mitziehen) */
  --color-onyx-black: var(--vk-schwarz);
  --color-champagne-gold: var(--vk-gelb);
  --color-espresso-brown: #1A1A1A;
  --color-cognac-tan: #3A3A3A;
  --color-pearl-cream: var(--vk-grau);
  --color-marble-white: #FFFFFF;

  --bg-primary: var(--vk-weiss);
  --bg-secondary: var(--vk-grau);
  --bg-light: var(--vk-grau);
  --text-on-dark: var(--vk-schwarz);
  --text-on-dark-muted: var(--vk-text-leise);
  --text-on-light: var(--vk-schwarz);
  --accent: var(--vk-gelb);
  --border-subtle: var(--vk-linie);

  --font-headline: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
}

body { background: var(--vk-weiss); color: var(--vk-schwarz); }
::selection { background: var(--vk-gelb); color: var(--vk-schwarz); }

/* ---------- Typografie wie auf der Karte: fett, Satzschreibung, eng ---------- */
h1, h2, h3, h4 { font-family: var(--font-headline); text-transform: none; color: inherit; }
h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-weight: 600; letter-spacing: -0.015em; text-transform: none; }
/* Betonte Wörter: schwarz mit gelbem Textmarker statt farbiger Schrift */
h1 em, h2 em, .footer-wordmark em {
  color: inherit;
  background: linear-gradient(transparent 58%, var(--vk-gelb) 58%, var(--vk-gelb) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.04em;
}
.lead { color: var(--vk-text-leise); font-weight: 400; }
.eyebrow, .section--cream .eyebrow, .section--light .eyebrow { color: var(--vk-schwarz); font-weight: 600; }
.eyebrow::before { background: var(--vk-gelb); height: 3px; width: 28px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--vk-gelb); outline-offset: 3px; }

/* ---------- Flächen ---------- */
.section--wash { background: var(--vk-weiss); }
.section--light, .section--cream { background: var(--vk-grau); color: var(--vk-schwarz); }
.section--cream .lead, .section--cream .card p, .section--light .lead { color: var(--vk-text-leise); }

/* Film-Effekte (Korn, Lichteinfall, Vignette) passen nicht zu Weiß — aus */
body::before, body::after { display: none !important; }
.light-leak, .grain, .film-grain { display: none !important; }

/* ---------- Header & Menü ---------- */
.site-header { background: rgba(255,255,255,0.95); border-bottom-color: var(--vk-linie); }
.logo, .logo strong { color: var(--vk-schwarz); }
.nav-trigger { color: var(--vk-schwarz); border-color: var(--vk-schwarz); }
.nav-trigger:hover { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.nav-overlay { background: var(--vk-weiss); }
.nav-overlay a { color: rgba(10,10,10,0.55); font-family: var(--font-headline); text-transform: none; letter-spacing: -0.03em; }
.nav-overlay a .nav-overlay__count { color: var(--vk-schwarz); }
.nav-overlay a:hover, .nav-overlay a[aria-current="page"] { color: var(--vk-schwarz); }
.nav-overlay a[aria-current="page"] .nav-overlay__count, .nav-overlay a:hover .nav-overlay__count {
  background: var(--vk-gelb); padding: 0 0.35em; border-radius: 4px;
}
.nav-overlay__close { color: var(--vk-schwarz); border-color: var(--vk-schwarz); }
.nav-overlay__close:hover { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }

/* ---------- Buttons: Gelb wie der Bildrahmen der Karte ---------- */
.btn { border-color: var(--vk-schwarz); font-weight: 600; letter-spacing: 0.04em; }
.btn--primary { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.btn--primary:hover { background: var(--vk-schwarz); border-color: var(--vk-schwarz); color: var(--vk-gelb); }
.btn--ghost { background: transparent; color: var(--vk-schwarz); border-color: var(--vk-schwarz); }
.btn--ghost:hover { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.btn--dark { background: var(--vk-schwarz); color: var(--vk-weiss); border-color: var(--vk-schwarz); }
.btn--dark:hover { background: var(--vk-gelb); color: var(--vk-schwarz); border-color: var(--vk-gelb); }

/* ---------- Karten & Links ---------- */
.card__mark { background: var(--vk-gelb); height: 5px; border-radius: 3px; }
.card__number { color: var(--vk-schwarz); }
.card__link { color: var(--vk-schwarz); text-decoration: underline; text-decoration-color: var(--vk-gelb); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.card__link:hover { background: var(--vk-gelb); text-decoration-color: transparent; }

/* Bilder: abgerundete Ecken wie das Foto auf der Karte statt der einen geschwungenen Ecke */
.img-organic, .img-organic--alt, .project-card {
  -webkit-mask-image: none; mask-image: none;
  border-radius: 22px;
  background-color: var(--vk-grau-2);
  box-shadow: none;
}

/* ---------- Footer: schwarzer Abspann als Gegengewicht zur weißen Seite ---------- */
.site-footer { background: var(--vk-schwarz); color: rgba(255,255,255,0.72); border-top: 0; }
.site-footer .eyebrow { color: var(--vk-weiss); }
.site-footer a:hover { color: var(--vk-gelb); }
.site-footer__legal { border-top-color: rgba(255,255,255,0.14); }
.footer-wordmark, .footer-wordmark .fit-line { color: var(--vk-weiss); }
.footer-wordmark em { color: var(--vk-schwarz); background: var(--vk-gelb); padding: 0 0.08em; border-radius: 0.06em; }

/* ---------- Formulare ---------- */
.form-group label { color: var(--vk-schwarz); font-weight: 500; }
.form-group input, .form-group textarea, .form-group select {
  color: var(--vk-schwarz); background: var(--vk-weiss); border: 1.5px solid rgba(10,10,10,0.22); border-radius: 12px;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  background: var(--vk-weiss); border-color: var(--vk-schwarz); box-shadow: 0 0 0 4px rgba(254,214,60,0.55);
}
.form-group select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230A0A0A' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.form-group select option { background: var(--vk-weiss); color: var(--vk-schwarz); }
.form-notice--success { background: rgba(254,214,60,0.25); border-color: var(--vk-gelb-tief); color: var(--vk-schwarz); }
.form-notice--error { color: var(--vk-schwarz); }

/* ---------- Cookie-Banner ---------- */
.cookie-banner__card { background: var(--vk-weiss); border: 1.5px solid var(--vk-schwarz); box-shadow: 0 18px 50px -12px rgba(0,0,0,0.25); }
.cookie-banner__icon { background: var(--vk-gelb); }
.cookie-banner__icon svg path, .cookie-banner__icon svg circle { stroke: var(--vk-schwarz); }
.cookie-banner__icon svg circle { fill: var(--vk-schwarz); }
.cookie-banner__title { color: var(--vk-schwarz); font-weight: 600; }
.cookie-banner__text a { color: var(--vk-schwarz); text-decoration-color: var(--vk-gelb-tief); }

/* ---------- 404 ---------- */
.error-page__code { color: var(--vk-schwarz); }
.error-suggestion { background: rgba(254,214,60,0.25); border-color: var(--vk-gelb-tief); }

/* ---------- Faden & Kamera-Sucher: dezent schwarz statt Gold/Creme ---------- */
.story-thread path { stroke: var(--vk-schwarz) !important; opacity: 0.18 !important; }
.story-thread .story-thread__glow { display: none; }

/* =========================================================
   Feinschliff: Stellen, die im alten Look fest helle Schrift auf Dunkel hatten
   ========================================================= */
.section--wash .lead, .hero .lead { color: var(--vk-text-leise); }
.viewfinder { --vf: rgba(10,10,10,0.28); }
.viewfinder__meta, .rec { color: rgba(10,10,10,0.42); }
.frame-caption { color: var(--vk-schwarz); opacity: 0.5; }
.img-organic::after, .project-card::before { display: none; }
.timeline { color: rgba(10,10,10,0.4); }
.timeline__ruler {
  background:
    repeating-linear-gradient(90deg, rgba(10,10,10,0.22) 0 1px, transparent 1px 12px) bottom / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, rgba(10,10,10,0.4) 0 1px, transparent 1px 120px) bottom / 100% 12px no-repeat;
  border-bottom-color: rgba(10,10,10,0.2);
}
.hero--letterbox::before, .hero--letterbox::after { display: none; }

/* Sprachumschalter im Kopf */
.sprachwahl a { color: rgba(10,10,10,0.5); }
.sprachwahl a:hover { color: var(--vk-schwarz); }
.logo--animiert .logo__mono { color: var(--vk-schwarz); }

/* Startseite: Projektband */
.projektband__mehr { color: var(--vk-gelb); }

/* Formulare: Kontakt / E-Book */
.form-hint { color: rgba(10,10,10,0.55); }
.form-kleingedrucktes { color: var(--vk-text-leise); }
.form-kleingedrucktes a, .cookie-banner__text a, .recht__inhalt a, .pf-lead a {
  color: var(--vk-schwarz); text-decoration: underline; text-decoration-color: var(--vk-gelb-tief); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.address-suggest { background: var(--vk-weiss); border: 1.5px solid var(--vk-schwarz); color: var(--vk-schwarz); }
.address-suggest li:hover, .address-suggest li.is-active { background: var(--vk-gelb); color: var(--vk-schwarz); }
.thema-wahl legend { color: var(--vk-schwarz); font-weight: 500; }
.thema span { border: 1.5px solid rgba(10,10,10,0.22); }
.thema:hover span { border-color: var(--vk-schwarz); }
.thema input:checked + span { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.kontakt-schritte__nr { color: var(--vk-schwarz); background: var(--vk-gelb); padding: 0 0.3em; border-radius: 4px; }
.kontakt-info__block { border-top-color: var(--vk-linie); }
.kontakt-hilfe li { border-bottom-color: var(--vk-linie); }
.order-facts__price { color: var(--vk-schwarz); }
.stat { border-top-color: var(--vk-linie); }
.stat__num { color: var(--vk-schwarz); }

/* Partner */
.rolle, .rolle-netz { background: var(--vk-weiss); border-color: var(--vk-linie); border-radius: 18px; }
.rolle--ich { background: var(--vk-schwarz); color: var(--vk-weiss); }
.rolle--ich p { color: rgba(255,255,255,0.75); }
.rolle__tag, .netz-vorteil__nr { color: rgba(10,10,10,0.6); }
.rolle--ich .rolle__tag { color: var(--vk-gelb); }
.rolle-netz li { border-radius: 999px; }
.netz-vorteil { border-top-color: var(--vk-gelb); border-top-width: 4px; }

/* Kundenprojekte-Übersicht: Filter + Kacheln (Kacheln bleiben Bildflächen mit dunklem Verlauf) */
.projekt-filter__btn { color: var(--vk-schwarz); border: 1.5px solid rgba(10,10,10,0.22); }
.projekt-filter__btn:hover { color: var(--vk-schwarz); border-color: var(--vk-schwarz); }
.projekt-filter__btn.is-aktiv { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.projekt-filter__hinweis { color: var(--vk-text-leise); }
.projekt-kachel__btn { background: var(--vk-grau-2); border: 0; border-radius: 18px; overflow: hidden; }
.projekt-kachel__bild { background-color: var(--vk-grau-2); }
.projekt-kachel__meta { color: var(--vk-gelb); }
.projekt-kachel__titel, .projekt-kachel__plus { color: var(--vk-weiss); }
.projekt-kachel__kurz { color: rgba(255,255,255,0.8); }
.projekt-kachel__plus { border-color: rgba(255,255,255,0.5); }
.projektband__karte { border-radius: 18px; }

/* „Nach oben“-Knopf */
.nach-oben { background: var(--vk-gelb); color: var(--vk-schwarz); border-color: var(--vk-gelb); }
.nach-oben:hover, .nach-oben:focus-visible { background: var(--vk-schwarz); color: var(--vk-gelb); border-color: var(--vk-schwarz); }

/* Portfolio */
.pf-zurueck a { color: var(--vk-text-leise); }
.pf-zurueck a:hover { color: var(--vk-schwarz); }
.pf-text p { color: var(--vk-text-leise); }
.pf-galerie-wrap { background: var(--vk-weiss); }
.pf-weitere { background: var(--vk-grau); }
.pf-bild { background: var(--vk-grau-2); }

/* Rechtstexte */
.recht__inhalt p, .recht__inhalt li { color: rgba(10,10,10,0.8); }

/* Leistungen (Präfix ls-) */
.ls-bereich, .ls-bereich--hell {
  --ls-text: var(--vk-schwarz);
  --ls-muted: var(--vk-text-leise);
  --ls-linie: var(--vk-linie);
  --ls-akzent: var(--vk-schwarz);
  color: var(--ls-text);
}
.ls-index__nr { color: var(--vk-schwarz); }
.ls-index__name { color: var(--vk-schwarz); text-transform: none; letter-spacing: -0.02em; }
.ls-index__text { color: var(--vk-text-leise); }
.ls-index__pfeil { color: var(--vk-schwarz); }
.ls-index__eintrag:hover .ls-index__name { color: var(--vk-schwarz); background: linear-gradient(transparent 60%, var(--vk-gelb) 60%); }
.ls-bereich--hell h2 em, .ls-verbindet h2 em, .ls-partner__titel em { color: inherit; }
.ls-partner__titel { color: var(--vk-schwarz); }
.ls-partner__text { color: var(--vk-text-leise); }
.ls-fuer { border-left-color: var(--vk-gelb) !important; border-left-width: 4px !important; }
.ls-schritte li::before, .ls-schritte__punkt { background: var(--vk-gelb) !important; }
.ls-beispiele li a:hover .ls-beispiele__titel { color: var(--vk-schwarz); background: linear-gradient(transparent 60%, var(--vk-gelb) 60%); }
.ls-beispiele__titel, .ls-cta p { text-transform: none; letter-spacing: -0.02em; }
.ls-cta { border-radius: 18px; }

/* Großbuchstaben aus dem alten Plakat-Look → Satzschreibung wie auf der Karte */
.projekt-kachel__titel, .ls-index__name, .footer-wordmark { text-transform: none; }
.footer-wordmark { letter-spacing: -0.035em; }

/* =========================================================
   Kundenprojekt-Seiten (article.pj): bleiben bewusst dunkel — wie ein Kinosaal,
   damit Filme und Fotos wirken. Akzent ist dort weiterhin die Kundenfarbe.
   ========================================================= */
.pj {
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: rgba(255,255,255,0.72);
  --border-subtle: rgba(255,255,255,0.14);
  --color-pearl-cream: #FFFFFF;
  background: var(--vk-schwarz);
  color: #FFFFFF;
}
.pj:not(.pj--kundenfarbe) { --accent: var(--vk-gelb); }
.pj h1 em, .pj h2 em { color: var(--accent); background: none; padding: 0; }
.pj .eyebrow { color: var(--accent); }
.pj .lead { color: rgba(255,255,255,0.8); }
.pj .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.pj .btn--ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--vk-schwarz); }
.pj .card__link { color: #fff; }

/* Startseite „Über mich“: Lens Flare deutlich dezenter (Wunsch 08.10.2026) —
   nur noch ein leiser Lichtschimmer, keine farbigen Ringe mehr */
.portrait-flare {
  animation-name: portrait-flare-leise;
  background:
    radial-gradient(circle at var(--fx) var(--fy), rgba(255,246,225,0.55) 0, rgba(255,230,180,0.18) 8%, transparent 26%),
    linear-gradient(125deg, transparent 40%, rgba(255,225,170,0.06) 50%, transparent 60%);
}
@keyframes portrait-flare-leise { from { opacity: .12; } to { opacity: .28; } }
.portrait-hover::before {
  opacity: .35;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(254,214,60,0.35), transparent 50%);
}
/* Portrait wie auf der Visitenkarte: abgerundet im gelben Rahmen */
.portrait-hover .img-organic { border: clamp(8px, 1.1vw, 14px) solid var(--vk-gelb); border-radius: 28px; }
.portrait-hover .img-organic img { filter: none; }
@media (prefers-reduced-motion: reduce) { .portrait-flare { opacity: .15; } }
.form-group select { background-color: var(--vk-weiss); background-repeat: no-repeat; background-position: right 1rem center; }
.kontakt-schritte__nr { align-self: start; justify-self: start; height: auto; line-height: 1.6; padding: 0.05rem 0.35rem !important; }
@media (min-width: 861px) { .flow__media.portrait-hover { width: 100%; } }
/* Motorrad/Reiseblog behält seine Betonung in Sonnengelb (auch auf den dunkelgrünen Flächen lesbar) */
:where(.page-reise) h1 em, :where(.page-reise) h2 em { color: var(--accent); background: none; padding: 0; }
.nav-overlay .sprachwahl a { border: 1.5px solid var(--vk-linie); color: var(--vk-schwarz); }
.nav-overlay .sprachwahl a[aria-current="true"] { background: var(--vk-gelb); border-color: var(--vk-gelb); color: var(--vk-schwarz); }
.sprachwahl--kopf a[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--vk-gelb); }
/* Newsletter-Kasten im Reisebereich: Betonung grün statt Sonnengelb (sonst gelb auf gelb unsichtbar) */
.page-reise .nl-kasten h2 em { color: #3f7a45; }
.page-reise .nl-kasten--band h2 em { color: #2f6b3c; }
.nl-kasten--band .eyebrow::before { background: var(--wald-tief, #10281b); }
/* Reisebereich: Kopfleiste bleibt dunkelgrün → Name, Menü-Knopf hell */
.page-reise .logo, .page-reise .logo strong { color: #FFFFFF; }
.page-reise .logo--animiert .logo__mono { color: var(--sonne, #f3c969); }
.page-reise .nav-trigger { color: #FFFFFF; border-color: rgba(255,255,255,0.55); }
.page-reise .nav-trigger:hover { background: var(--sonne, #f3c969); border-color: var(--sonne, #f3c969); color: #10281b; }
.page-reise .sprachwahl--kopf a[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--sonne, #f3c969); }
.page-reise .sprachwahl .flagge { box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }