/* WebStärke · Himmel-Entwurf 10/2026 · Hellblau, Wolkenweiß, Azur-/Stahlblau für die Wortmarke, Dunkelblau für Schrift und klare Akzente */
/* Schrift (Finalpaket 07.10.2026): Gewünscht ist GT America Extended (Navigation, Agenturtext) und GT America Expanded (große Überschriften) – die
   lizenzierten Webfont-Dateien liegen NICHT vor. Vorläufiger, ausdrücklich als Ersatz gekennzeichneter Fallback mit der frei lizenzierten Archivo
   (SIL OFL, variable Breite und Stärke): Überschriften Archivo 125 % kräftig (≈ Expanded), Agenturtext „Archivo Text“ = dieselbe Datei mit fest
   112,5 % Breite (≈ Extended). Kein Umbenennen, keine künstliche Verzerrung; Austausch gegen die GT-America-Dateien ist offen (PROJEKTSTATUS). */
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Archivo Text'; src: url('../fonts/archivo-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 112.5%; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --tief: #0E1A3C;        /* Schrift, ≈ 15:1 auf Wolkenweiß */
  --tinte: #101D45;       /* Tintenblau: Hauptaktion */
  --tinte-2: #1A2C5E;     /* Hover */
  --marke: #2A3B6E;       /* Marine, Akzente */
  --marke-hell: #2F56B8;  /* Fokusring */
  --azur: #5D91BE;        /* Linienmotiv (Bogen aus dem Umfeld der Erde), nur Linien und kleine Markierungen */
  --neben: #2E4166;       /* Nebentext, ≈ 8:1 auf #E6EFF8 */
  --himmel: #CFE2F4;
  --himmel-hell: #E8F1FA;
  --wolke: #F6F9FD;
  --linie: rgba(11, 28, 68, .16);
  --rand: clamp(20px, 5.6vw, 96px);
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --lese: 'Archivo Text', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--himmel); color: var(--tief); -webkit-text-size-adjust: 100%; }
html.gesperrt { overflow: hidden; }
body { margin: 0; font: 420 17px/1.6 var(--lese); background: var(--himmel); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 3px; border-radius: 6px; }
.label { font: 620 11.5px/1.3 var(--display); font-stretch: 118%; letter-spacing: .16em; text-transform: uppercase; color: var(--neben); }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 10px 16px; background: var(--tief); color: #fff; border-radius: 999px; text-decoration: none; }
.sprung:focus { top: 12px; }

/* ---------- Bedienelemente: ein System (Kapsel nach Kens Referenz) ---------- */
/* Hauptaktion: weiße abgerundete Kapsel mit dunkler Beschriftung und rundem Pfeilfeld rechts, gemeinsam in einer feinen,
   lichtartigen Außenfassung – ein einziger Link bzw. Button. Sekundär: schlichter Textlink. */
:root { --rund: 6px; --kontur: rgba(16, 29, 69, .30); --kontur-stark: rgba(16, 29, 69, .58);
  --flaeche: linear-gradient(180deg, #FFFFFF 0%, #F6F8FC 52%, #E9EFF7 100%);
  --relief: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(16, 29, 69, .07), 0 1px 2px rgba(14, 26, 60, .1), 0 10px 26px -18px rgba(14, 26, 60, .55);
  --fassung: rgba(255, 255, 255, .34); --fassung-rand: rgba(255, 255, 255, .62); }
.knopf { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 0; border-radius: 999px; background: var(--fassung);
  box-shadow: inset 0 0 0 1px var(--fassung-rand), inset 0 0 0 1px rgba(16, 29, 69, .06), 0 10px 26px -20px rgba(14, 26, 60, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--tief); text-decoration: none; cursor: pointer;
  font: 620 15px/1 var(--display); font-stretch: 115%; letter-spacing: .004em; transition: transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease); }
.knopf__text { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(16, 29, 69, .08), 0 1px 2px rgba(14, 26, 60, .12); transition: background-color .2s var(--ease); white-space: nowrap; }
.knopf .pfeil { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF; color: var(--tief);
  box-shadow: inset 0 0 0 1px rgba(16, 29, 69, .08), 0 1px 2px rgba(14, 26, 60, .12); font-size: 16px; line-height: 1; transition: transform .28s var(--ease), background-color .2s var(--ease); }
.knopf:hover .knopf__text, .knopf:hover .pfeil { background: #F2F7FD; }
.knopf:hover .pfeil, .knopf:focus-visible .pfeil { transform: translateX(3px); }
.knopf:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(16, 29, 69, .1), 0 14px 30px -20px rgba(14, 26, 60, .55); }
@media (hover: hover) { .knopf:hover { transform: translateY(-1px); filter: brightness(1.03); } }
.knopf:active { transform: scale(.98); transition-duration: .05s; }
.knopf:active .knopf__text, .knopf:active .pfeil { background: #E9F0F9; }
.knopf:focus-visible { outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--marke-hell); }
.knopf[aria-disabled="true"] { cursor: progress; opacity: .78; }
.knopf--klein { padding: 3px; }
.knopf--klein .knopf__text { min-height: 38px; padding: 0 16px; font-size: 14px; }
.knopf--klein .pfeil { width: 38px; height: 38px; font-size: 14px; }
.nur-klein { display: none; }
.pfeil { display: inline-block; transition: transform .22s var(--ease); }
.link:hover .pfeil, .link:focus-visible .pfeil { transform: translateX(3px); }
.link--zurueck:hover .pfeil, .link--zurueck:focus-visible .pfeil { transform: translateX(-3px); }
.link { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: 600 15px/1 var(--display); font-stretch: 115%; letter-spacing: .008em; color: var(--tinte); text-decoration: none; }
.link__text { padding-bottom: 6px; margin-bottom: -6px; background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat, linear-gradient(var(--link-linie, rgba(16, 29, 69, .34)), var(--link-linie, rgba(16, 29, 69, .34))) left bottom / 100% 1px no-repeat;
  transition: background-size .32s var(--ease); } /* präzise Unterstreichung: zieht von links durch */
.link:hover .link__text, .link:focus-visible .link__text { background-size: 100% 1px, 100% 1px; }
.link:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 4px; border-radius: 2px; }

/* ---------- Kopfzeile: frei über dem Himmel – keine Fläche, kein Verlauf, keine Unschärfe, kein Rahmen, kein Schatten (auch beim Scrollen).
   Raster: Marke links · Navigation mittig · schlichte Textaktion rechts; feste Höhe, keine Größen- oder Lagesprünge. Schriftfarbe je Untergrund:
   Tinte über hellem Himmel, weiß über dunklem (.kopf--hell setzt start.js je Abschnitt); einzelne Teile über hellen Flächen ([data-kopf-hell],
   z. B. weiße Karten) werden dunkel (.ist-dunkel) – Lesbarkeit allein über die Farbwahl ---------- */
.kopf { position: fixed; z-index: 40; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 32px;
  height: 78px; padding: 0 var(--rand); color: var(--tief); }
.kopf--hell { color: #fff; }
.kopf__marke { grid-column: 1; justify-self: start; display: inline-flex; color: inherit; transition: color .35s var(--ease); }
/* Marke WebStärke: Zeichen + Wortmarke quer (Pfade, unabhängig vom Laden der Schrift; Farbe = Schriftfarbe) */
.marke { display: inline-flex; align-items: center; color: inherit; text-decoration: none; line-height: 0; }
.marke svg { display: block; height: 25px; width: auto; fill: currentColor; }
.kopf__nav { grid-column: 2; display: flex; gap: clamp(22px, 2.4vw, 38px); }
.kopf__nav a { position: relative; font: 600 14.5px/1 var(--display); font-stretch: 118%; letter-spacing: .01em; text-decoration: none; padding: 12px 0; color: inherit; transition: color .35s var(--ease); }
.kopf__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.kopf__nav a:hover::after, .kopf__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* Textaktion statt Glasknopf: Text mit feiner Linie, die beim Überfahren durchzieht, Pfeil rückt nach */
.kopf__aktion, .recht-kopf__zurueck { grid-column: 3; justify-self: end; }
.kopf__aktion { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font: 640 14.5px/1 var(--display); font-stretch: 118%; letter-spacing: .01em; text-decoration: none; color: inherit; white-space: nowrap; transition: color .35s var(--ease); }
.kopf__kurz { display: none; }
@media (max-width: 1320px) { .kopf__lang { display: none; } .kopf__kurz { display: inline; } } /* mittlere Breiten: kurze Fassung, Navigation bleibt frei */
.kopf__aktion-text { padding-bottom: 5px; margin-bottom: -5px; background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat, linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .32s var(--ease); }
@supports (color: color-mix(in srgb, red 50%, transparent)) { .kopf__aktion-text { background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent)); } }
.kopf__aktion:hover .kopf__aktion-text, .kopf__aktion:focus-visible .kopf__aktion-text { background-size: 100% 1px, 100% 1px; }
.kopf__aktion:hover .pfeil, .kopf__aktion:focus-visible .pfeil { transform: translateX(3px); }
.kopf__aktion:focus-visible, .kopf__nav a:focus-visible, .kopf__marke:focus-visible, .kopf__menueknopf:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
/* einzelne Teile über hellen Flächen: dunkel (Zustand je Teil aus start.js) */
.kopf .ist-dunkel { color: var(--tief); }
.kopf__menueknopf { grid-column: 3; justify-self: end; display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 2px 0 6px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 640 14.5px/1 var(--display); font-stretch: 118%; letter-spacing: .01em; transition: color .35s var(--ease); } /* schlicht wie die Textaktion: Striche + „Menü“, keine Fläche */
/* Rückfall ohne laufende Seitensteuerung (Skript fehlt oder fehlerhaft): statt des Menüknopfs ein schlichter Link zur Navigation der Fußzeile */
.kopf__menuelink { grid-column: 3; justify-self: end; display: none; align-items: center; min-height: 44px; padding: 0 4px; font: 640 14.5px/1 var(--display); font-stretch: 118%; color: inherit; text-decoration: underline; text-underline-offset: 5px; }
.kopf__striche { position: relative; width: 16px; height: 2px; background: currentColor; transition: background-color .2s; }
.kopf__striche::before, .kopf__striche::after { content: ''; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.kopf__striche::before { top: -5px; } .kopf__striche::after { top: 5px; }
.kopf--menue, .kopf--menue .ist-dunkel { color: var(--tief); }
.kopf--menue .kopf__striche { background: transparent; }
.kopf--menue .kopf__striche::before { transform: translateY(5px) rotate(45deg); }
.kopf--menue .kopf__striche::after { transform: translateY(-5px) rotate(-45deg); }
.menue { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 110px var(--rand) 40px; background: rgba(236, 244, 251, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menue__nav { display: grid; gap: 6px; }
.menue__nav a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; font: 620 clamp(30px, 8vw, 46px)/1.12 var(--display); font-stretch: 125%; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid var(--linie); }
.menue__nav span { font: 560 12px/1 var(--display); letter-spacing: .14em; color: var(--neben); }
.menue__cta { align-self: flex-start; }

/* ---------- Bühne ---------- */
.buehne { position: relative; }
.erlebnis .buehne { height: calc(var(--laenge, 7.6) * 100svh); }
.buehne__fix { position: relative; height: 100svh; overflow: hidden; }
.erlebnis .buehne__fix { position: fixed; z-index: 0; top: 0; left: 0; right: 0; } /* derselbe Himmel bleibt hinter der ganzen Seite stehen */
.buehne__poster, .buehne__canvas, .buehne__standbild { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Poster = erstes Szenenbild (Wolken geschlossen), damit die Leinwand ohne sichtbaren Wechsel überblendet */
.buehne__poster { background: var(--himmel) url('../img/himmel/start-d.webp') center / cover no-repeat; }
@media (max-aspect-ratio: 4/5), (max-width: 699px) { .buehne__poster { background-image: url('../img/himmel/start-m.webp'); } }
.buehne__canvas { display: block; opacity: 0; transition: opacity .4s linear; }
.szene-bereit .buehne__canvas { opacity: 1; }
.buehne__fix.zeigt-arbeit { cursor: pointer; }
.erlebnis .buehne__standbild { display: none; }
html:not(.erlebnis) .buehne__canvas { display: none; }
html:not(.erlebnis) .buehne__standbild { display: block; }
.buehne__standbild img { width: 100%; height: 100%; object-fit: cover; }

/* Hero (Finalpaket 07.10.2026): Motto „Stark / im Web.“ in kräftiger, breiter weißer Schrift mit bewusstem Umbruch, darunter klein die Leistungszeile,
   Hauptaktion = kostenlose Website-Vorschau. Die Gruppe zieht sich beim Scrollen gemeinsam zurück (start.js); die Erde steht rechts neben dem Motto
   (Lage aus dem Layout gemessen). Kein Textschatten, keine Buchstaben-Flugshow: die beiden Zeilen steigen nach dem Auftakt ruhig aus ihrer Maske. */
.held { position: absolute; z-index: 5; inset: 0; height: 100svh; pointer-events: none; color: #fff; }
.held__gruppe { position: absolute; left: var(--rand); right: var(--rand); top: clamp(120px, 21svh, 230px); transform-origin: 18% 40%; will-change: transform, opacity; }
.held__gruppe a, .held__gruppe h1, .held__gruppe p { pointer-events: auto; }
.held__titel { margin: 0 0 0 -.05em; font: 680 min(12.4vw, 22.5svh)/.9 var(--display); font-stretch: 125%; letter-spacing: -.045em; color: #fff; }
.held__motto-maske { display: block; width: fit-content; overflow: hidden; padding: .02em .06em .1em .04em; margin: 0 0 -.1em -.04em; } /* Maske für das ruhige Aufsteigen */
.held__motto-zeile { display: block; white-space: nowrap; }
.held__zeile { margin-top: clamp(18px, 3.2svh, 34px); font: 560 clamp(17px, 1.55vw, 26px)/1.3 var(--display); font-stretch: 118%; letter-spacing: .005em; color: rgba(255, 255, 255, .94); }
/* seit 08.10.2026 Teil der Hauptüberschrift (sichtbare Einordnung „… aus Leidersbach“): als eigene Zeile, linke Kante wie zuvor (gleicht den
   optischen Einzug −0,05 em des großen Mottos aus) */
.held__titel .held__zeile { display: block; margin-left: calc(min(12.4vw, 22.5svh) * .05); }
.held__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(24px, 4.2svh, 44px); }
.held__kurz { display: none; }
.held .link { color: #fff; } .held .link__text { --link-linie: rgba(255, 255, 255, .55); }
.held .link:focus-visible { outline-color: #fff; }
.held__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: 10.5px; }
.held__scroll span { width: 1px; height: 34px; background: linear-gradient(transparent, currentColor); animation: tropfen 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes tropfen { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
html:not(.erlebnis) .held__scroll { display: none; }

/* Enthüllung nach dem Markenauftakt: die Mottozeilen steigen aus ihrer Maske, die übrigen Zeilen folgen ruhig (ohne JS/Erlebnis sofort sichtbar) */
.erlebnis .held__motto-zeile { transform: translateY(108%); }
.erlebnis .held__zeile, .erlebnis .held__aktionen, .erlebnis .held__scroll { opacity: 0; }
.erlebnis.auftakt-frei .held__motto-zeile { transform: none; transition: transform 1s cubic-bezier(.2, .72, .16, 1) .3s; }
.erlebnis.auftakt-frei .held__motto-maske + .held__motto-maske .held__motto-zeile { transition-delay: .42s; }
.erlebnis.auftakt-frei .held__zeile { opacity: 1; transition: opacity .7s var(--ease) .75s; }
.erlebnis.auftakt-frei .held__aktionen { opacity: 1; transition: opacity .8s var(--ease) .9s; }
.erlebnis.auftakt-frei .held__scroll { opacity: 1; transition: opacity .8s var(--ease) 1.3s; }

/* ---------- Auftakt: tiefer Himmel mit Wolkenhorizont, Zeichen + Wortmarke + Zeile mittig, Ladeanzeige nach tatsächlicher Vorbereitung ----------
   Bis die Szene zeichnet, steht ein Standbild desselben Auftaktzustands (aus der Szene erzeugt); danach zeichnet die Szene dasselbe Bild und hellt beim
   Übergang zur www-Szene auf (szene.js: uAuftakt). Die Marke erscheint ruhig (nur Deckkraft) und tritt beim Übergang ebenso ruhig zurück. */
.auftakt { display: none; }
html.erlebnis .auftakt { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: auto; color: #fff; }
.auftakt__himmel { position: absolute; inset: 0; background: radial-gradient(130% 90% at 82% 92%, #3A6CAB 0%, #1C4683 34%, #10306A 62%, #0B2654 100%);
  background-image: url('../img/himmel/auftakt-d.webp'), radial-gradient(130% 90% at 82% 92%, #3A6CAB 0%, #1C4683 34%, #10306A 62%, #0B2654 100%); background-size: cover; background-position: center; }
@media (max-aspect-ratio: 4/5), (max-width: 699px) {
  .auftakt__himmel { background-image: url('../img/himmel/auftakt-m.webp'), radial-gradient(150% 80% at 70% 96%, #3A6CAB 0%, #1C4683 34%, #10306A 62%, #0B2654 100%); } }
.auftakt--szene .auftakt__himmel { opacity: 0; transition: opacity .35s linear; } /* die Szene zeichnet denselben Auftaktzustand */
.auftakt__mitte { position: absolute; left: 50%; top: 60%; width: min(37vw, 700px); transform: translate(-50%, -50%); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.auftakt__logo { display: block; width: 100%; height: auto; fill: #fff; opacity: 0; }
.auftakt__zeile { margin-top: clamp(14px, 3svh, 30px); font: 450 clamp(14px, 1.56vw, 30px)/1.2 var(--lese); letter-spacing: .1em; white-space: nowrap; color: rgba(255, 255, 255, .92); opacity: 0; }
.auftakt__laden { display: grid; justify-items: center; gap: 15px; width: 45%; margin-top: clamp(40px, 9svh, 88px); opacity: 0; }
.auftakt__balken { position: relative; display: block; width: 100%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .26); overflow: hidden; }
.auftakt__fuellung { position: absolute; inset: 0; border-radius: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .5s var(--ease); }
.auftakt__text { font: 450 clamp(11px, .75vw, 14px)/1 var(--lese); letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
@media (max-aspect-ratio: 4/5), (max-width: 699px) { /* Hochformat: Marke größer im Verhältnis zur Breite, Zeile passend gesetzt */
  .auftakt__mitte { top: 46%; width: min(72vw, 330px); }
  .auftakt__zeile { font-size: clamp(11.5px, 3.35vw, 14px); letter-spacing: .07em; }
  .auftakt__laden { width: 56%; margin-top: clamp(40px, 8svh, 70px); }
}
.auftakt--sichtbar .auftakt__logo { opacity: 1; transition: opacity 1.1s var(--ease); }
.auftakt--sichtbar .auftakt__zeile { opacity: 1; transition: opacity 1s var(--ease) .35s; }
.auftakt--sichtbar .auftakt__laden { opacity: 1; transition: opacity .9s var(--ease) .6s; }
/* Übergang zur www-Szene: Marke und Anzeige treten ruhig zurück, die Szene hellt dahinter auf */
.auftakt--frei { pointer-events: none !important; }
.auftakt--frei .auftakt__mitte { opacity: 0; transition: opacity .75s var(--ease); }
.auftakt--frei .auftakt__himmel { opacity: 0; transition: opacity .6s linear; }
html.auftakt-fertig .auftakt { display: none; }
/* Kopfzeile erst mit dem Übergang (unter dem Auftakt nichts Halbfertiges) */
.erlebnis:not(.auftakt-frei) .kopf { opacity: 0; visibility: hidden; }
.erlebnis.auftakt-frei:not(.auftakt-fertig) .kopf { transition: opacity .9s var(--ease) .5s; }

/* Zeile an der Weltkugel */
.zeile { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--rand); }
.zeile__teil { font: 620 clamp(32px, 3.9vw, 68px)/1.04 var(--display); font-stretch: 125%; letter-spacing: -.032em; color: var(--tief); opacity: 0; will-change: opacity, transform; }
.zeile__teil--b { text-align: right; }
html:not(.erlebnis) .zeile { display: none; }

/* Galerie über der Szene (Vorlage 02): Titel oben links, Auswahl unten links, aktive Arbeit mit „Projekt ansehen“ unten mittig, Scrollhinweis rechts */
.galerie { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
.galerie--aktiv .galerie__liste, .galerie--aktiv .galerie__info { pointer-events: auto; }
.galerie__titel { position: absolute; left: var(--rand); top: clamp(86px, 11.5svh, 124px); margin: 0; font: 620 clamp(34px, 4.3vw, 70px)/1 var(--display); font-stretch: 125%; letter-spacing: -.034em; color: var(--tief); }
.galerie__liste { position: absolute; left: var(--rand); bottom: clamp(22px, 4.2svh, 42px); list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2vw, 30px); }
.galerie__liste button { display: flex; align-items: baseline; min-height: 44px; padding: 8px 2px; background: none; border: 0; border-bottom: 1.5px solid transparent; cursor: pointer; text-align: left;
  font: 600 15px/1.2 var(--display); font-stretch: 115%; color: var(--neben); transition: color .25s var(--ease), border-color .25s var(--ease); }
.galerie__liste button:hover, .galerie__liste button[aria-current] { color: var(--tief); }
.galerie__liste button[aria-current] { border-bottom-color: var(--tinte); font-weight: 600; }
.galerie__liste button:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; border-radius: 2px; }
.galerie__info { position: absolute; left: 46%; bottom: clamp(22px, 4.2svh, 42px); display: flex; align-items: center; gap: 20px; }
.galerie__text { margin: 0; padding-right: 20px; border-right: 1px solid rgba(16, 29, 69, .28); transition: opacity .16s linear, transform .3s var(--ease); }
.galerie__info--wechsel .galerie__text { opacity: 0; transform: translateY(5px); }
.galerie__name { font: 600 16px/1.25 var(--display); font-stretch: 112%; color: var(--tief); }
.galerie__stand { font: 500 15px/1.25 var(--display); font-stretch: 112%; color: var(--tief); }
.galerie__stand::before { content: ' · '; }
.galerie__kurz { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--neben); max-width: 24em; }
.galerie__hinweis { position: absolute; right: var(--rand); bottom: clamp(22px, 4.2svh, 42px); display: grid; justify-items: center; gap: 10px; margin: 0; font: 500 13px/1 var(--display); font-stretch: 112%; color: var(--tief); }
.galerie__hinweis span { width: 1px; height: 30px; background: linear-gradient(currentColor, transparent); animation: tropfen 2.4s var(--ease) infinite; transform-origin: top; }
html:not(.erlebnis) .galerie { display: none; }
@media (max-width: 1379px) { .galerie__hinweis { display: none; } } /* schmalere Desktops: Platz für Auswahl und aktive Arbeit */

/* ---------- Ruhige Fassung: Weltbild und Arbeiten als Inhalt ---------- */
.ruhig-welt, .arbeiten { display: none; }
html:not(.erlebnis) .ruhig-welt { display: block; position: relative; }
.ruhig-welt__bild { display: block; margin: 0; }
.ruhig-welt__bild img { width: 100%; height: 86svh; object-fit: cover; }
.ruhig-welt__zeile { position: absolute; left: var(--rand); bottom: 8svh; font: 620 clamp(30px, 3.9vw, 64px)/1.05 var(--display); font-stretch: 125%; letter-spacing: -.03em; }
html:not(.erlebnis) .arbeiten { display: grid; gap: 64px; padding: 96px var(--rand); background: linear-gradient(var(--himmel-hell), var(--wolke)); }
.arbeit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 48px; align-items: start; }
.arbeit__bild { grid-row: span 5; border-radius: 12px; box-shadow: 0 30px 60px -36px rgba(11, 28, 68, .45); }
.arbeit__name { font: 620 clamp(26px, 2.7vw, 40px)/1.06 var(--display); font-stretch: 125%; letter-spacing: -.028em; }
.arbeit__einordnung { color: var(--neben); }
.arbeit__kurz { max-width: 34em; }
.arbeit__punkte { list-style: none; margin: 6px 0 0; padding: 0; display: grid; max-width: 36em; }
.arbeit__punkte li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid var(--linie); font-size: 15px; line-height: 1.45; }
.arbeit__punkte li::before { content: ''; position: absolute; left: 2px; top: calc(9px + .73em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--tinte); }
.arbeit__hinweis { font-size: 13.5px; color: var(--neben); }
.arbeit__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }

/* ---------- Detail: die echte Website eingebettet, großzügig und bedienbar; Kopf mit Ansicht, neuem Tab und Schließen ---------- */
.detail { position: fixed; inset: 0; z-index: 60; }
.detail__grund { position: absolute; inset: 0; background: rgba(9, 24, 54, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s var(--ease); }
.detail__fenster { position: absolute; inset: clamp(12px, 2.2vw, 28px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px clamp(12px, 1.4vw, 20px) 10px;
  border-radius: 18px; background: #EEF4FB; box-shadow: 0 40px 110px -40px rgba(4, 14, 40, .75), inset 0 0 0 1px rgba(255, 255, 255, .6);
  opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.detail--offen .detail__grund, .detail--offen .detail__fenster { opacity: 1; transform: none; }
.detail__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 48px; }
.detail__titel { min-width: 0; }
.detail__name { font: 620 clamp(20px, 1.7vw, 27px)/1.1 var(--display); font-stretch: 125%; letter-spacing: -.022em; color: var(--tief); }
.detail__einordnung { margin-top: 3px; font-size: 13.5px; line-height: 1.3; color: var(--neben); }
.detail__aktionen { display: flex; align-items: center; gap: 10px 18px; flex: none; }
.detail__ansicht { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(16, 29, 69, .07); }
.detail__ansicht button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--tief); cursor: pointer; font: 560 13.5px/1 var(--display); font-stretch: 112%; transition: background-color .2s var(--ease); }
.detail__ansicht button:hover { background: rgba(255, 255, 255, .7); }
.detail__ansicht button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(14, 26, 60, .16); }
.detail__ansicht button:focus-visible, .detail__schliessen:focus-visible { outline: 2px solid var(--marke-hell); outline-offset: 2px; }
.detail__extern { color: var(--tinte); }
.detail__schliessen { position: relative; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 29, 69, .14), 0 6px 16px -10px rgba(14, 26, 60, .5); cursor: pointer; transition: transform .2s var(--ease), background-color .2s var(--ease); }
.detail__schliessen:hover { background: #F6F9FD; transform: scale(1.04); }
.detail__schliessen span::before, .detail__schliessen span::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin: -.8px 0 0 -8px; border-radius: 1px; background: var(--tief); transform: rotate(45deg); }
.detail__schliessen span::after { transform: rotate(-45deg); }
.detail__buehne { position: relative; min-height: 0; display: grid; justify-items: center; }
.detail__rahmen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 29, 69, .12), 0 30px 60px -40px rgba(11, 28, 68, .5); transition: width .45s var(--ease); }
.detail[data-ansicht="handy"] .detail__rahmen { width: min(390px, 100%); border-radius: 22px; box-shadow: 0 0 0 1px rgba(16, 29, 69, .14), 0 0 0 7px #0C1628, 0 30px 60px -36px rgba(11, 28, 68, .6); }
.detail__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .45s var(--ease); }
.detail__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .45s var(--ease); }
.detail--zeigt .detail__rahmen iframe { opacity: 1; } /* Server hat geantwortet: die Seite legt sich über die Vorschau (bis sie selbst zeichnet, scheint die Vorschau durch) */
.detail--geladen .detail__bild { opacity: 0; }
.detail__status { position: absolute; left: 50%; bottom: 18px; z-index: 2; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 9px 16px; border-radius: 999px; background: rgba(9, 24, 54, .74); color: #fff; font-size: 13.5px; line-height: 1.35; text-align: center; }
.detail__status:empty { display: none; }
/* Live-Ansicht auf Wunsch: kompakte weiße Fläche auf der Vorschau, zwei gleichwertige Wege (laden · neuer Tab), keine vorausgewählte Zustimmung */
.detail__laden { position: absolute; left: 50%; bottom: clamp(14px, 3vh, 28px); z-index: 2; transform: translateX(-50%); width: min(560px, calc(100% - 28px)); padding: 18px 20px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .97); color: var(--tief); box-shadow: 0 0 0 1px rgba(16, 29, 69, .12), 0 24px 50px -28px rgba(8, 20, 50, .6); }
.detail__laden-titel { font: 640 15.5px/1.3 var(--display); font-stretch: 112%; }
.detail__laden-text { margin-top: 6px; font: 420 14px/1.5 var(--lese); color: var(--neben); }
.detail__laden-text a { color: var(--tinte); text-underline-offset: 3px; }
.detail__laden-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 12px; }
.detail__laden-extern { color: var(--tinte); }
.detail__statuslink { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.detail__statuslink:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.detail__hinweis { font-size: 12.5px; color: var(--neben); text-align: center; }

/* ---------- Mobil: eigene Komposition ---------- */
@media (max-width: 900px) {
  .kopf__nav, .kopf__aktion { display: none; }
  .kopf__menueknopf { display: inline-flex; }
  html:not(.menue-bereit) .kopf__menueknopf { display: none; }
  html:not(.menue-bereit) .kopf__menuelink { display: inline-flex; }
  .kopf { height: 64px; }
  .kopf__marke.marke svg { height: 21px; }
  /* Ken 28.10.2026: über dem Inhalt eine ruhige Fläche hinter Marke und Menü – ohne sie liefen Überschriften und weiße Karten unter der
     Kopfzeile durch (.kopf--flaeche setzt start.js, sobald der Inhaltshimmel oben ist; nicht im Hero, nicht bei offenem Menü) */
  .kopf::before { content: ''; position: absolute; inset: 0 0 -20px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease);
    background: linear-gradient(180deg, rgba(11, 38, 77, .97) 0%, rgba(11, 38, 77, .92) 70%, rgba(11, 38, 77, 0) 100%); }
  .kopf--flaeche:not(.kopf--menue)::before { opacity: 1; }
  .kopf--flaeche:not(.kopf--menue), .kopf--flaeche:not(.kopf--menue) .ist-dunkel { color: #fff; }

}
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .held__gruppe { top: clamp(210px, 31svh, 290px); }
  .held__titel { font-size: min(16.4vw, 12.5svh); line-height: .92; } /* „im Web.“ passt bei 320–430 px Breite in die Spalte (kein Querüberlauf) */
  .held__zeile { margin-top: clamp(14px, 2.4svh, 22px); font-size: clamp(15.5px, 4.2vw, 18px); }
  .held__titel .held__zeile { margin-left: calc(min(16.4vw, 12.5svh) * .05); }
  .held__aktionen { flex-direction: column; align-items: stretch; gap: 10px; margin-top: clamp(22px, 3.6svh, 34px); }
  .held__aktionen .knopf { display: flex; } .held__aktionen .knopf__text { flex: 1; justify-content: center; }
  .held__lang { display: none; } .held__kurz { display: inline; }
  .held__link { align-self: flex-start; }
  .held__scroll { display: none; }
  .zeile { flex-direction: column; justify-content: space-between; align-items: stretch; padding: 92px var(--rand) 15svh; }
  .zeile__teil { font-size: clamp(28px, 8vw, 40px); }
  .galerie__titel, .galerie__hinweis { display: none; }
  .galerie__info { left: var(--rand); right: var(--rand); bottom: calc(18px + env(safe-area-inset-bottom)); transform: none; display: block; border: 1px solid rgba(16, 29, 69, .14);
    padding: 14px 16px; border-radius: 6px; background: rgba(242, 247, 252, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -22px rgba(14, 26, 60, .5); }
  .galerie__text { display: block; padding: 0; border: 0; text-align: left; margin-right: 112px; }
  .galerie__name { font-size: clamp(18px, 5vw, 21px); }
  .galerie__stand { display: block; margin-top: 2px; font: 500 13px/1.3 var(--lese); color: var(--neben); }
  .galerie__stand::before { content: none; }
  .galerie__kurz { display: none; } /* Einordnung steht in der Detailansicht */
  .galerie__oeffnen { position: absolute; right: 12px; bottom: 14px; min-height: 44px; padding: 0 14px; font-size: 14px; }
  .galerie__oeffnen .nur-gross { display: none; }
  .galerie__oeffnen .nur-klein { display: inline; }
  /* Auswahl als schlichte Namenskapseln (keine Nummern, Ken 07.10.2026) */
  .galerie__liste { top: 76px; bottom: auto; left: var(--rand); right: var(--rand); display: flex; flex-wrap: wrap; gap: 6px; }
  .galerie__liste button { min-height: 44px; align-items: center; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 0 0 1px rgba(16, 29, 69, .14); font: 540 13.5px/1 var(--display); font-stretch: 106%; color: var(--neben); }
  .galerie__liste button[aria-current] { background: #FFFFFF; color: var(--tinte); font-weight: 620; box-shadow: inset 0 0 0 1.5px var(--tinte); }
  .galerie__liste .nur-gross { display: none; }
  html:not(.erlebnis) .arbeit { grid-template-columns: 1fr; }
  .ruhig-welt__zeile { bottom: 6svh; }
  .detail__fenster { inset: 0; border-radius: 0; padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; }
  .detail__ansicht, .detail__einordnung, .detail__hinweis { display: none; }
  .detail__extern .nur-gross { display: none; } .detail__extern .nur-klein { display: inline; }
  .detail__rahmen { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}