/* Bausteine (06.10.2026): helle Seite im Office-Look (warmes Tageslicht, Eiche, Glas), Akzent SB-Orange.
   Überschreibt die dunklen Grundwerte aus start-v2/seite.css und bereich.css nur für body.seite-hell.
   Fußzeile und Chat bleiben dunkel (eigenständig). */

.seite-hell {
  --papier: #f8f3ea;
  --papier-2: #f1e9dc;
  --sand: #e7dccb;
  --tinte: #1b2530;
  --tinte-2: #56606b;
  --linie: rgba(27, 37, 48, .1);
  --orange-tief: #c95a17;   /* Orange für Schrift auf Hell (Kontrast ≥ 4,5 bei Fließtext-Größen) */
  --bronze: #a8611f;        /* Eyebrow statt Gold */
  background: var(--papier);
  color: var(--tinte);
}
.seite-hell h1 em, .seite-hell h2 em, .seite-hell h3 em { color: var(--orange-tief); }
.seite-hell .eyebrow { color: var(--bronze); }
.seite-hell :focus-visible { outline-color: var(--orange-tief); }

/* Kopf und Knöpfe auf Hell */
.seite-hell .kopf { color: var(--tinte); }
.seite-hell .kopf.fest { background: rgba(248, 243, 234, .84); box-shadow: 0 1px 0 var(--linie); }
.seite-hell .nav a[aria-current] { color: var(--orange-tief); }
.seite-hell main .knopf, .seite-hell .kopf .knopf { color: var(--tinte); background: rgba(238, 123, 45, .08); }
.seite-hell main .knopf:hover, .seite-hell .kopf .knopf:hover { background: var(--orange); color: #fff; }
.seite-hell main .knopf--voll { background: var(--orange); color: #fff; }
.seite-hell main .knopf--voll:hover { background: var(--orange-tief); border-color: var(--orange-tief); color: #fff; }

/* ---------- Hero: helles Büro mit den Glas-Bausteinen, Überschrift höher ---------- */
.seite-hell .b-hero { background: var(--papier); align-items: stretch; }
.seite-hell .b-hero::after {
  background: linear-gradient(90deg, rgba(248, 243, 234, .9) 0%, rgba(248, 243, 234, .62) 30%, rgba(248, 243, 234, 0) 58%),
              linear-gradient(0deg, var(--papier) 0%, rgba(248, 243, 234, 0) 30%),
              linear-gradient(180deg, rgba(248, 243, 234, .55) 0%, rgba(248, 243, 234, 0) 16%); }
.seite-hell .b-hero__inhalt { display: flex; flex-direction: column; min-height: 100svh; padding: clamp(8.5rem, 19vh, 12rem) 0 2.2rem; }
.seite-hell .b-hero__satz { color: var(--tinte-2); }
.seite-hell .b-stationen { margin-top: auto; border-top-color: var(--linie); }
.seite-hell .b-stationen a { color: var(--tinte-2); }
.seite-hell .b-stationen a:hover, .seite-hell .b-stationen a[aria-current] { color: var(--tinte); }
.seite-hell .b-stationen a span { color: var(--bronze); }

/* ---------- Registerkarten ---------- */
.bs-register { padding-top: clamp(4rem, 8vw, 6.5rem); }
.bs-register::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(180deg, var(--papier) 0%, var(--papier-2) 55%, var(--papier) 100%); }
.bs-register__grund { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  opacity: .4; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  animation: bs-atmen 34s ease-in-out infinite alternate; }
@keyframes bs-atmen { from { transform: scale(1.06) translateX(-1.2%); } to { transform: scale(1) translateX(0); } }
.seite-hell .b-kopfzeile p:not(.eyebrow) { color: var(--tinte-2); }

.bs-tafel { position: relative; border-radius: 24px; background: rgba(255, 252, 246, .72); border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 40px 90px rgba(91, 64, 32, .12), 0 1px 0 rgba(255, 255, 255, .9) inset; backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); overflow: hidden; }

.bs-reiter { position: relative; display: grid; grid-template-columns: repeat(6, auto); justify-content: start; gap: 0 clamp(.4rem, 2vw, 2.2rem);
  padding: 0 clamp(1.4rem, 3vw, 2.6rem); border-bottom: 1px solid var(--linie); }
.bs-reiter button { position: relative; font: inherit; font-size: .98rem; color: var(--tinte-2); background: none; border: 0; cursor: pointer;
  padding: 1.5rem .2rem 1.2rem; text-align: left; transition: color .4s var(--weich); white-space: nowrap; }
.bs-reiter button .nr { display: block; font: 600 .66rem/1 var(--mono); letter-spacing: .2em; color: var(--bronze); opacity: .65; margin-bottom: .5rem; transition: opacity .4s; }
.bs-reiter button:hover { color: var(--tinte); }
.bs-reiter button[aria-selected="true"] { color: var(--tinte); }
.bs-reiter button[aria-selected="true"] .nr { opacity: 1; }
.bs-reiter button:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* Funke: Linie unter dem aktiven Reiter, Lichtpunkt gleitet zum neuen Reiter (wie Startseite M5) */
.bs-funke { position: absolute; left: 0; top: 0; opacity: 0; height: 2px; width: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(238, 123, 45, 0), var(--orange) 35%, var(--orange));
  transition: left .75s cubic-bezier(.6, .05, .25, 1), width .75s cubic-bezier(.6, .05, .25, 1), top .75s cubic-bezier(.6, .05, .25, 1); }
.bs-funke.an { opacity: 1; }
.bs-funke::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff4dc;
  box-shadow: 0 0 6px 1px rgba(255, 244, 220, .9), 0 0 16px 4px rgba(242, 180, 52, .75), 0 0 38px 10px rgba(238, 123, 45, .45); }
.bs-funke.knall::after { animation: knall .6s ease-out; }

/* Bühne: Höhe wird beim Wechsel animiert, Inhalt blendet mit Blur ein */
.bs-buehne { position: relative; overflow: hidden; }
.bs-karte { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 5vw, 4.5rem); padding: clamp(1.8rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.2rem); }
.bs-karte[hidden] { display: none; }
.bs-karte:focus-visible { outline-offset: -6px; border-radius: 20px; }
.bs-karte.kommt > * { animation: bs-kommt 1s var(--weich) both; }
.bs-karte.kommt > *:nth-child(2) { animation-delay: .14s; }
@keyframes bs-kommt { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.bs-karte h3 { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 16ch; }
.bs-karte__text > p { margin: 1.2rem 0 0; color: var(--tinte-2); max-width: 34rem; font-size: 1.05rem; }

.bs-karte__bau { align-self: start; padding: 1.5rem 1.6rem 1.4rem; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px solid var(--linie); }
.bs-karte__titel { font: 600 .7rem/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--bronze); margin: 0 0 1.1rem; }
.bs-karte__bau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.bs-karte__bau li { position: relative; padding-left: 1.5rem; font-size: .98rem; line-height: 1.5; }
.bs-karte__bau li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(238, 123, 45, .12); }

/* Mini-Ablauf: Stationen auf einer Linie, ein Lichtpunkt läuft von selbst hindurch */
.bs-ablauf { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 0; list-style: none; margin: 2rem 0 0; padding: 0; }
.bs-ablauf li { position: relative; display: flex; align-items: center; font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte); }
.bs-ablauf li span, .bs-ablauf li { white-space: nowrap; }
.bs-ablauf li { padding: .62rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--linie); }
.bs-ablauf li + li { margin-left: 2.1rem; }
.bs-ablauf li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 2.1rem; height: 1px; background: linear-gradient(90deg, rgba(238, 123, 45, .25), rgba(238, 123, 45, .8)); }
.bs-ablauf li + li::after { content: ""; position: absolute; right: calc(100% + 0px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 10px 2px rgba(238, 123, 45, .6); opacity: 0; animation: bs-lauf 4.8s var(--weich) infinite; }
.bs-ablauf li:nth-child(3)::after { animation-delay: 1.2s; } .bs-ablauf li:nth-child(4)::after { animation-delay: 2.4s; }
.bs-ablauf li:last-child { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(238, 123, 45, .28); }
@keyframes bs-lauf { 0% { opacity: 0; transform: translateX(-2rem); } 15% { opacity: 1; } 30% { opacity: 0; transform: translateX(0); } 100% { opacity: 0; transform: translateX(0); } }

/* ---------- Abschluss auf Hell ---------- */
.seite-hell .abschnitt--navy { --abschnitt-grund: radial-gradient(120% 80% at 80% 0%, #fff8ee 0%, var(--papier-2) 55%, var(--sand) 100%); }
.seite-hell .b-abschluss p:not(.eyebrow) { color: var(--tinte-2); }
.seite-hell .glut { background: radial-gradient(circle, rgba(238, 123, 45, .14), transparent 62%); }
.seite-hell .b-naechste { color: var(--creme); border-color: var(--linie); box-shadow: 0 30px 70px rgba(91, 64, 32, .18); }

@media (max-width: 1000px) {
  .bs-reiter { grid-template-columns: repeat(3, auto); justify-content: stretch; }
}
@media (max-width: 900px) {
  .bs-karte { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* 07.10.2026: Schleier hinter Satz und Knöpfen etwas dichter, damit der Text unter der orangen Folie lesbar bleibt */
  .seite-hell .b-hero::after { background: linear-gradient(0deg, var(--papier) 0%, rgba(248, 243, 234, .74) 40%, rgba(248, 243, 234, .7) 62%, rgba(248, 243, 234, .84) 100%); }
  .seite-hell .b-hero__inhalt { padding-top: 7.5rem; }
  .bs-reiter { grid-template-columns: 1fr 1fr; gap: 0 1rem; padding: 0 1.1rem; }
  .bs-reiter button { padding: 1.1rem .2rem .9rem; font-size: .92rem; white-space: normal; }
  .bs-reiter button { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: left; } /* 07.10.: Nummern einer Zeile auf gleicher Höhe */
  .bs-karte { padding: 1.6rem 1.1rem 1.8rem; }
  .bs-ablauf { flex-direction: column; align-items: flex-start; }
  .bs-ablauf li + li { margin: 1.1rem 0 0; }
  .bs-ablauf li + li::before { right: auto; left: 1.4rem; top: -1.1rem; width: 1px; height: 1.1rem; background: linear-gradient(rgba(238, 123, 45, .25), rgba(238, 123, 45, .8)); }
  .bs-ablauf li + li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-register__grund, .bs-ablauf li + li::after, .bs-karte.kommt > *, .bs-funke.knall::after { animation: none; }
  .bs-funke { transition: none; }
}