/* Digitale Präsenz (bereiche/web), 06.10.2026: heller Look „Luxusbüro im Hochhaus, Sommerlicht“.
   Gilt nur für body.seite-hell. Überschreibt bewusst Teile von start-v2/seite.css und bereich.css
   (Kopf, Hero-Verlauf, Stationsleiste, Knöpfe, Chat-Pille, Ankunfts-Brücke) für helle Flächen.
   Der Abschnitt „Drei Dinge“ bleibt marineblau als dunkle Tafel. */
body.seite-hell {
  --h-grund: #f8f3eb;       /* warmes Weiß, Grundfläche */
  --h-sand: #efe6d8;        /* Sand, zweite Fläche */
  --h-sand-2: #e6d9c4;
  --h-holz: #c8a274;        /* helles Eichenholz / Messing */
  --h-salbei: #7f9a7c;      /* Salbeigrün */
  --h-salbei-tief: #4d6a53;
  --h-tinte: #1b2733;       /* dunkle Schrift (Nachtblau, nie Schwarz) */
  --h-tinte-2: #56606a;     /* Fließtext gedämpft */
  --h-linie: rgba(27, 39, 51, .1);
  --h-orange: #cf5f17;      /* Akzent auf Hell (Kontrast ≥ 3:1 für große Schrift) */
  background: var(--h-grund);
  color: var(--h-tinte);
}
/* Abschnittsgründe wie in start-v2 als ::before-Ebene (z-index −2), damit der helle Nebel dahinter wirken kann */
.w-marketing::before, .w-kanaele::before, .w-abschluss::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--abschnitt-grund); pointer-events: none; }
.seite-hell h1 em, .seite-hell h2 em { color: var(--h-orange); }
.seite-hell .eyebrow { color: var(--h-salbei-tief); }
.seite-hell :focus-visible { outline-color: var(--h-orange); }

/* ---------- Kopf auf Hell ---------- */
.seite-hell .kopf { color: var(--h-tinte); }
.seite-hell .kopf.fest { background: rgba(248, 243, 235, .84); box-shadow: 0 1px 0 var(--h-linie); }
.seite-hell .nav a[aria-current] { color: var(--h-orange); }
.seite-hell .knopf { color: var(--h-tinte); border-color: rgba(207, 95, 23, .55); background: rgba(255, 255, 255, .45); }
.seite-hell .knopf:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.seite-hell .knopf--voll { background: var(--orange); color: #fff; border-color: var(--orange); }
.seite-hell .knopf--voll:hover { background: var(--h-tinte); border-color: var(--h-tinte); color: var(--h-grund); }

/* ---------- Hero: helles Büro, Überschrift weiter oben ---------- */
.seite-hell .b-hero { background: var(--h-grund); align-items: flex-start; }
.seite-hell .b-hero__bild, .seite-hell .b-hero__film { object-position: 58% 50%; }
.seite-hell .b-hero::after {
  background:
    linear-gradient(90deg, rgba(248, 243, 235, .9) 0%, rgba(248, 243, 235, .72) 26%, rgba(248, 243, 235, .18) 48%, rgba(248, 243, 235, 0) 60%),
    linear-gradient(180deg, rgba(248, 243, 235, .55) 0%, rgba(248, 243, 235, 0) 16%),
    linear-gradient(0deg, var(--h-grund) 0%, rgba(248, 243, 235, 0) 22%);
}
.seite-hell .b-hero__inhalt { padding: clamp(7.5rem, 19vh, 11rem) 0 2.4rem; min-height: 100svh; display: flex; flex-direction: column; }
.seite-hell .b-hero h1 { color: var(--h-tinte); max-width: 12ch; }
.seite-hell .b-hero__satz { color: var(--h-tinte-2); max-width: 27rem; }
.seite-hell .b-stationen { margin-top: auto; border-top-color: var(--h-linie); }
.seite-hell .b-stationen a { color: var(--h-tinte-2); }
.seite-hell .b-stationen a span { color: var(--h-salbei-tief); }
.seite-hell .b-stationen a:hover, .seite-hell .b-stationen a[aria-current] { color: var(--h-tinte); }
.seite-hell .b-stationen a::before { box-shadow: 0 0 12px rgba(238, 123, 45, .45); }
/* Ankunft von der Startseite: Brücke ohne dunklen Schleier */
.seite-hell .ank-bruecke { background: var(--h-grund); }
.seite-hell .ank-bruecke img { object-position: 58% 50%; }
.seite-hell .ank-bruecke::after { background: linear-gradient(90deg, rgba(248, 243, 235, .9) 0%, rgba(248, 243, 235, .72) 26%, rgba(248, 243, 235, 0) 60%); }

/* ---------- „Drei Dinge“: marineblaue Tafel im hellen Raum, Licht nur im Hintergrund ---------- */
.seite-hell .w-tafel { margin: clamp(1rem, 3vw, 2.5rem) var(--rand) 0; border-radius: 28px; overflow: hidden; color: var(--creme); isolation: isolate;
  --abschnitt-grund: linear-gradient(180deg, #0f2440 0%, var(--marine) 45%, #0a1a2c 100%);
  box-shadow: 0 50px 120px -40px rgba(13, 32, 54, .55); }
.seite-hell .w-tafel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38vw 30vw at var(--lx, 30%) var(--ly, 40%), rgba(238, 123, 45, .085), rgba(242, 180, 52, .03) 45%, transparent 70%);
  opacity: var(--licht-an, 0); transition: opacity 1.4s var(--weich); }
.seite-hell .w-tafel .glut { opacity: .6; z-index: -1; }
.seite-hell .w-tafel .eyebrow { color: var(--gold); }
.seite-hell .w-tafel h2 em { color: var(--orange); }

/* ---------- Online-Marketing ---------- */
.w-marketing { --abschnitt-grund: linear-gradient(180deg, var(--h-grund) 0%, var(--h-sand) 100%); }
.w-marketing__raster { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.w-marketing h2, .w-kanaele h2, .w-abschluss h2 { color: var(--h-tinte); }
.w-lead { color: var(--h-tinte-2); max-width: 30rem; margin-top: 1.4rem; font-size: 1.08rem; }
.w-richtungen { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.w-richtungen li { position: relative; padding-left: 1.9rem; }
.w-richtungen strong { display: block; font: 300 1.45rem/1.2 var(--serif); color: var(--h-tinte); }
.w-richtungen span:not(.w-punkt) { color: var(--h-tinte-2); font-size: .98rem; }
.w-punkt { position: absolute; left: 0; top: .55rem; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--orange); background: var(--h-grund); box-shadow: 0 0 0 5px rgba(238, 123, 45, .09); }
.w-richtungen li.zeigen { transform: translateX(-70px); }
.w-richtungen li.zeigen.sichtbar { transform: none; }

/* Bühne mit dem Handy-Film, Glas-Chips schweben davor und folgen leicht der Maus */
.w-buehne { position: relative; aspect-ratio: 1 / 1; border-radius: 26px; overflow: hidden; background: var(--nacht);
  box-shadow: 0 60px 120px -50px rgba(27, 39, 51, .55), 0 0 0 1px rgba(27, 39, 51, .06); --mx: 0; --my: 0; }
.w-buehne__bild, .w-buehne__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 96% 50%; }
.w-buehne__film { opacity: 0; transition: opacity 1.6s var(--weich); }
.w-buehne__film.laeuft { opacity: 1; }
.w-buehne::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(7, 14, 22, 0) 70%, rgba(7, 14, 22, .45) 100%); }
.w-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1rem; border-radius: 999px;
  background: rgba(248, 243, 235, .82); color: var(--h-tinte); font-size: .84rem; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(10px); box-shadow: 0 18px 40px -12px rgba(7, 14, 22, .45);
  transform: translate(calc(var(--mx) * var(--tiefe, 10px)), calc(var(--my) * var(--tiefe, 10px)));
  transition: transform 1.2s cubic-bezier(.6, .05, .25, 1); }
.w-chip > * { pointer-events: none; }
.w-chip--a { left: 6%; top: 8%; --tiefe: 14px; animation: w-schweben 9s ease-in-out infinite; }
.w-chip--b { right: 6%; bottom: 12%; --tiefe: 20px; animation: w-schweben 11s ease-in-out -4s infinite; }
.w-chip--c { left: 8%; bottom: 20%; --tiefe: 9px; animation: w-schweben 13s ease-in-out -7s infinite; }
@keyframes w-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.w-chip__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(238, 123, 45, .5); animation: t-puls 2.8s ease-out infinite; }
.w-chip__punkt--gruen { background: #3f9a62; animation-delay: .9s; }
.w-chip__punkt--gold { background: var(--gold); animation-delay: 1.8s; }

/* Weg: Gesehen → Interessiert → Angefragt, Funke folgt der Maus */
.w-weg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding: 0; list-style: none; }
.w-weg::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, transparent, rgba(207, 95, 23, .5) 8%, rgba(207, 95, 23, .5) 92%, transparent); }
.w-weg li { position: relative; padding-top: 2.2rem; cursor: default; transition: opacity .6s var(--weich); }
.w-weg li::before { content: ""; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--orange); background: var(--h-sand); transition: background .5s, box-shadow .5s; }
.w-weg li:last-of-type::before { background: var(--orange); }
.w-weg .nr { font: 600 .74rem/1 var(--mono); color: var(--h-salbei-tief); letter-spacing: .2em; }
.w-weg h3 { font-size: 1.5rem; margin: .7rem 0 .4rem; color: var(--h-tinte); transition: transform .6s var(--weich), color .6s; }
.w-weg p { color: var(--h-tinte-2); margin: 0; transition: transform .6s var(--weich); }
.w-weg li.zeigen { transform: translateX(70px); }
.w-weg li.zeigen.sichtbar { transform: none; }
.w-weg.hat-fokus li { opacity: .5; }
.w-weg.hat-fokus li.fokus { opacity: 1; }
.w-weg li.fokus h3 { color: var(--h-orange); transform: translateY(-4px); }
.w-weg li.fokus::before { background: var(--orange); box-shadow: 0 0 0 7px rgba(238, 123, 45, .16), 0 0 22px 4px rgba(242, 180, 52, .5); }
.w-weg .funke--h { top: 2px; }

/* ---------- Alle Kanäle. Eine Hand. ---------- */
.w-kanaele { --abschnitt-grund: radial-gradient(60% 55% at 88% 8%, rgba(255, 252, 244, .95), rgba(255, 252, 244, 0) 70%),
  radial-gradient(50% 45% at 6% 96%, rgba(127, 154, 124, .2), rgba(127, 154, 124, 0) 70%), var(--h-sand); }
.w-kanaele__raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.w-kanaele__text { position: sticky; top: 7rem; }
.w-logos { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.w-logo { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1rem .4rem .8rem; border-radius: 16px;
  color: rgba(27, 39, 51, .5); background: rgba(255, 255, 255, .38); border: 1px solid rgba(27, 39, 51, .06);
  transition: color .6s var(--weich), background .6s var(--weich), transform .6s var(--weich), border-color .6s; }
.w-logo svg { width: 26px; height: 26px; }
.w-logo span { font-size: .7rem; letter-spacing: .02em; color: var(--h-tinte-2); text-align: center; line-height: 1.2; }
.w-logo:hover, .w-logo.an { color: var(--marke); background: rgba(255, 255, 255, .85); border-color: rgba(27, 39, 51, .1); transform: translateY(-3px); }

.w-tafel-kanaele { border-radius: 26px; padding: clamp(1rem, 2.4vw, 1.6rem); background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 50px 100px -50px rgba(27, 39, 51, .35); backdrop-filter: blur(8px); }
.w-leistungen { list-style: none; margin: 0; padding: 0; }
.w-leistung { position: relative; display: grid; grid-template-columns: 6.6rem 1fr; gap: 1rem; align-items: baseline; padding: 1.15rem 1.1rem; border-radius: 16px; cursor: default; outline-offset: -2px;
  transition: background .6s var(--weich), opacity .6s var(--weich); }
.w-leistung + .w-leistung::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; top: 0; height: 1px; background: var(--h-linie); }
.w-leistung__kurz { font: 600 .68rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--h-salbei-tief); }
.w-leistung strong { display: block; font: 300 1.4rem/1.2 var(--serif); color: var(--h-tinte); transition: color .6s; }
.w-leistung__text > span { display: block; margin-top: .3rem; color: var(--h-tinte-2); font-size: .95rem; line-height: 1.55; }
.w-leistung.an { background: rgba(255, 255, 255, .9); box-shadow: 0 20px 50px -30px rgba(27, 39, 51, .4); }
.w-leistung.an::after, .w-leistung.an + .w-leistung::after { opacity: 0; }
.w-leistung.an strong { color: var(--h-orange); }
.w-leistung.an .w-leistung__kurz { color: var(--h-orange); }

/* ---------- Abschluss ---------- */
.w-abschluss { --abschnitt-grund: linear-gradient(180deg, var(--h-sand) 0%, var(--h-grund) 100%); text-align: center; }
.w-abschluss__innen { display: flex; flex-direction: column; align-items: center; }
.w-abschluss .eyebrow { justify-content: center; }
.w-abschluss h2 { max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4.4rem); }
.w-abschluss p:not(.eyebrow) { color: var(--h-tinte-2); max-width: 32rem; margin-top: 1.4rem; }
.w-abschluss .b-hero__knoepfe { justify-content: center; }

/* Chat-Pille auf Hell etwas leichter */
.seite-hell .chat-knopf { box-shadow: 0 14px 40px rgba(27, 39, 51, .28); }

@media (max-width: 900px) {
  .w-marketing__raster, .w-kanaele__raster { grid-template-columns: 1fr; }
  .w-kanaele__text { position: static; }
  .w-weg { grid-template-columns: 1fr; } .w-weg::before, .w-weg .funke { display: none; }
  .w-buehne { max-width: 560px; }
}
@media (max-width: 600px) {
  .seite-hell .b-hero::after { background: linear-gradient(180deg, rgba(248, 243, 235, .84) 0%, rgba(248, 243, 235, .72) 42%, rgba(248, 243, 235, .1) 64%, rgba(248, 243, 235, 0) 82%, var(--h-grund) 100%); }
  .seite-hell .b-hero__bild, .seite-hell .b-hero__film { object-position: 66% 50%; }
  .seite-hell .b-hero__inhalt { padding-top: 6.5rem; }
  .w-logos { grid-template-columns: repeat(3, 1fr); }
  .w-leistung { grid-template-columns: 1fr; gap: .35rem; }
  .w-chip { font-size: .76rem; padding: .5rem .8rem; }
  .seite-hell .w-tafel { margin-inline: .6rem; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .w-chip, .w-chip__punkt { animation: none; transform: none; }
  .w-richtungen li.zeigen, .w-weg li.zeigen { transform: none; }
  .w-buehne__film { display: none; }
  .seite-hell .w-tafel::after { display: none; }
}

/* ---------- Abschluss mit Karte „Nächste Station · 02 Bausteine“ (07.10.2026, Karten-Übergang) ----------
   Text links (wie bisher, nur linksbündig), Karte rechts; Übergang in karten-uebergang.js/.css. */
.w-abschluss--karte { text-align: left; }
.w-abschluss--karte .w-abschluss__innen { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.w-abschluss--karte .w-abschluss__text { display: flex; flex-direction: column; align-items: flex-start; }
.w-abschluss--karte .eyebrow { justify-content: flex-start; }
.w-abschluss--karte h2 { max-width: 14ch; font-size: clamp(2.3rem, 4.4vw, 4rem); }
.w-abschluss--karte .b-hero__knoepfe { justify-content: flex-start; }
.w-abschluss--karte .b-naechste { color: var(--creme); border-color: var(--h-linie, rgba(27, 37, 48, .1)); box-shadow: 0 30px 70px rgba(91, 64, 32, .18); }
@media (max-width: 900px) {
  .w-abschluss--karte .w-abschluss__innen { grid-template-columns: 1fr; }
}