@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}

/* =====================================================================================
   GLOBALE DEFINITIONEN — jede Gestaltungsentscheidung steht genau EINMAL hier.
   Werte = Live-Seite (Elementor-Kit 883, Seiten 12/41, Vorlage 665), gemessen 10.11.2026.
   In Bricks: Style Manager (Farben, Variablen, fluide Skalen) — gleiche Namen verwenden.
   ===================================================================================== */
:root{
  /* Farben */
  --farbe-grund:#313131;            /* Seitenhintergrund (Kit „Primary“) */
  --farbe-text:#fff;
  --farbe-text-leise:#ccc;          /* Fließtext, Filter (Kit d6d9fba) */
  --farbe-text-grau:#929292;        /* Abschnittstitel (Kit f2ee74b) */
  --farbe-akzent:#61CE70;           /* aktiver Filter (Kit „Accent“) */
  --farbe-pfeil-umlauf:#7a7a7a;     /* Bildpfeil am Ende der Schleife (nächster Klick beginnt von vorn) — grau = bedienbar, aber „Ende“ (Alex 11.11.: grün las sich wie Eingang) */
  --farbe-linie:#eaeaea;
  --farbe-linie-hell:rgba(255,255,255,.4);
  --farbe-flaeche:rgba(0,0,0,.82);  /* Menüs, Info-Kasten */
  --farbe-kachel-hover:rgba(0,0,0,.43);
  --farbe-kopfleiste:rgba(49,49,49,.94);
  --farbe-buehne:var(--farbe-grund);   /* Rand um Bilder in der Projektansicht */
  --abdunkelung-diashow:.35;
  --schatten-text:0 2px 24px rgba(0,0,0,.45), 0 0 6px rgba(0,0,0,.35);

  /* Schrift */
  --schrift:"Montserrat",system-ui,sans-serif;
  --groesse-oberzeile:28px;  --groesse-titel:40px;  --groesse-untertitel:32px;   /* Intro: Live-Seite gemessen 10.11.2026 */
  --staerke-intro:500;              /* „seit 1996“, Titel, „Das Team von …“ — halbfett wie auf der Live-Seite */
  --groesse-abschnitt:26px;  --groesse-fliesstext:20px;
  --groesse-projekttitel:46px;
  --groesse-nav:15px;  --groesse-klein:13px;  --groesse-mini:12px;
  --groesse-kachel-titel:20px;  --staerke-kachel-titel:700;   /* Projekttitel beim Überfahren einer Kachel: wächst mit der Kachel bis hierhin (alte Seite: fett 700, Kacheln kleiner) */
  --groesse-lesetext:16px;  --lese-breite:760px;
  --sperrung:1px;

  /* Maße & Abstände */
  --rand:clamp(16px,4vw,48px);
  --rand-links:max(var(--rand), env(safe-area-inset-left));     /* Kerbe/Kamerainsel im Querformat */
  --rand-rechts:max(var(--rand), env(safe-area-inset-right));
  /* Kopfzeile: Inhalt in der Inhaltsbreite, Fläche über die ganze Breite (Prozent = Breite des Fensters) */
  --kopf-links:max(var(--rand-links), calc((100% - var(--inhalt-breite)) / 2 + var(--kopf-einzug)));
  --kopf-rechts:max(var(--rand-rechts), calc((100% - var(--inhalt-breite)) / 2 + var(--kopf-einzug)));
  --rand-unten:max(18px, env(safe-area-inset-bottom));
  --inhalt-breite:1140px;           /* Live: Elementor „boxed“ min(100%, 1140px) — Inhalt UND Kopfzeile */
  --kopf-einzug:10px;               /* Live: Logo 10 px innerhalb der 1140er-Kante */
  --abstand-abschnitt:40px;
  --logo-hoehe:20px;                /* Live gemessen: PNG 200×20 (Rechner/Tablet), 150×15 (Telefon) */
  /* Vorstellung: Foto neben dem Vita-Knopf */
  --vita-foto-faktor:0.6;             /* 1 = 260 px Rechner / 220 Tablet / 200 Telefon; Einstellungen → „Foto bei der Vorstellung“ */
  /* Galerie der Startseite (Projektkacheln) */
  --raster-schmal:1;                /* 0 = volle Bildschirmbreite, 1 = Inhaltsbreite (--inhalt-breite, wie die alte Seite) */
  --raster-abstand:10px;
  --raster-spalten:4;
  --suche-breite:150px;             /* Suchfeld über dem Raster */
  --kachel-format:3/2;

  /* Bedienelemente */
  --pfeil-groesse:46px;  --pfeil-strich:2.6;
  --marke-breite:76px;  --marke-abstand:6px;   /* Vorschaubilder im Projekt */
  --marke-deckkraft:1;              /* nicht aktive Vorschaubilder: 1 = voll (Alex 11.11.2026 zum Testen); vorher 0.6, beim Überfahren 0.9 — sah auch gut aus */
  --symbol-groesse:20px; --symbol-strich:1.6;
  --pfeil-schatten:drop-shadow(0 0 3px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(0,0,0,.45));

  /* Zeiten */
  --zeit-folie:.45s;  --zeit-ui:.5s;  --zeit-hover:.8s;
  --dreh-platz-unten:110px;          /* Tortenteller: Raum für Unterschrift und untere Leiste */
  --dia-ueberblendung:2.5s;          /* wird aus inhalt/startseite.json gesetzt */
}
@media (max-width:1024px){ :root{ --raster-spalten:3; --groesse-titel:40px; --groesse-untertitel:28px; } }
@media (max-width:767px){ :root{ --raster-spalten:2; --groesse-titel:22px; --groesse-oberzeile:19px; --logo-hoehe:15px;
  --groesse-untertitel:20px; --groesse-fliesstext:18px; --groesse-projekttitel:32px; } }

/* Seitenwechsel blenden weich über (View Transitions, ohne Bibliothek) */
@view-transition{navigation:auto}
/* NACHEINANDER statt Überblendung (v0.9.67, Alex 11.11.2026: „für eine Millisekunde ein anderes Bild“): beim Kreuzblenden lagen
   alte Seite (Raster bzw. Bild des vorigen Projekts) und neues Bild ~0,2 s übereinander — gemessen als Geisterbild. Jetzt erst
   aus ins Dunkle, dann ein; nie zwei Bilder zugleich. */
::view-transition-old(root){animation:seite-aus .15s ease-in both}
::view-transition-new(root){animation:seite-ein .2s ease-out .15s both}
@keyframes seite-aus{to{opacity:0}} @keyframes seite-ein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box} [hidden]{display:none !important}
html{background:var(--farbe-grund)}
body{margin:0;background:var(--farbe-grund);color:var(--farbe-text);font-family:var(--schrift);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
h1,h2{font-weight:400}
.trennlinie{height:3px;background:var(--farbe-linie);width:50px;border:0;margin:14px 0}
.symbol{width:var(--symbol-groesse);height:var(--symbol-groesse);fill:none;stroke:currentColor;stroke-width:var(--symbol-strich);
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}
.knopf{display:inline-flex;align-items:center;gap:8px;opacity:.92;transition:opacity .2s}
.knopf:hover{opacity:1}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopfzeile ---------- */
.ui{transition:opacity var(--zeit-ui) ease;text-shadow:var(--schatten-text)}
body.ruhe .ui{opacity:0;pointer-events:none}
#kopf{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--kopf-rechts) 40px var(--kopf-links);background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none;
  transition:background-color .3s ease, padding .3s ease, opacity var(--zeit-ui) ease}
#kopf>*{pointer-events:auto}
#kopf .logo img{height:var(--logo-hoehe);width:auto}
body.gescrollt #kopf, body.text #kopf{background:var(--farbe-kopfleiste);padding-bottom:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#nav{display:flex;gap:30px;align-items:center}
#nav a,#nav button{font-size:var(--groesse-nav);font-weight:500;letter-spacing:.02em;opacity:.92;transition:opacity .2s}
#nav a:hover,#nav button:hover,#nav a[aria-current]{opacity:1}
.klapp{position:relative}
.klapp-menue{position:absolute;right:0;top:calc(100% + 12px);min-width:230px;background:var(--farbe-flaeche);padding:8px 0;display:none;text-shadow:none}
.klapp.offen .klapp-menue,.klapp:focus-within .klapp-menue{display:block}
.klapp-menue a{display:block;padding:9px 18px;font-size:14px !important;font-weight:400 !important;color:var(--farbe-text-leise)}
.klapp-menue a:hover{color:#fff;background:rgba(255,255,255,.06)}
#menue-knopf{display:none;font-size:var(--groesse-nav);font-weight:500}
@media (max-width:760px){
  #menue-knopf{display:block}
  #nav{display:none;position:absolute;top:100%;right:var(--rand);flex-direction:column;align-items:flex-end;gap:16px;
    background:var(--farbe-flaeche);padding:18px 20px;text-shadow:none}
  #kopf.offen #nav{display:flex}
  .klapp-menue{position:static;display:block;background:none;padding:6px 0 0;min-width:0;text-align:right}
  .klapp-menue a{padding:5px 0}
  .klapp>button{display:none}
}

/* =====================================================================================
   STARTSEITE
   ===================================================================================== */
.begruessung{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dia-ueberblendung) ease-in-out}
.dia.aktiv{opacity:1}
.begruessung::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--abdunkelung-diashow)}
.begruessung .text{position:relative;z-index:1;padding:0 20px;max-width:900px}
.oberzeile{font-size:var(--groesse-oberzeile);font-weight:var(--staerke-intro);letter-spacing:var(--sperrung);margin:0 0 10px}
.titel{font-size:var(--groesse-titel);font-weight:var(--staerke-intro);text-transform:uppercase;letter-spacing:var(--sperrung);line-height:1.2;margin:0}
.begruessung .trennlinie{width:100px;background:var(--farbe-linie-hell);margin:22px auto}
.untertitel{font-size:var(--groesse-untertitel);font-weight:var(--staerke-intro);line-height:1.3;margin:0}

.abschnitt{max-width:var(--inhalt-breite);margin:var(--abstand-abschnitt) auto 0;padding:0 20px}
.vorstellung{display:flex;align-items:center}
.vorstellung>div{width:50%}
.vorstellung h2{font-size:var(--groesse-abschnitt);text-transform:uppercase;letter-spacing:var(--sperrung);color:var(--farbe-text-grau);margin:0}
.fliesstext{font-size:var(--groesse-fliesstext);line-height:1.6;color:var(--farbe-text-leise)}
.fliesstext a,.lesen a{color:var(--farbe-text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.vorstellung .rechts{display:flex;align-items:center;justify-content:center;gap:10px}
.vorstellung .foto{width:calc(260px * var(--vita-foto-faktor));height:auto}
#vita-knopf{font-size:var(--groesse-fliesstext);color:var(--farbe-text-leise);padding:0 15px;transition:color .4s}
#vita-knopf:hover{color:#fff}
@media (max-width:1024px){ .vorstellung .foto{width:calc(220px * var(--vita-foto-faktor))} }
@media (max-width:767px){
  .vorstellung{flex-direction:column;text-align:center} .vorstellung>div{width:100%}
  .vorstellung .trennlinie{margin:14px auto} .vorstellung .rechts{flex-direction:column;margin-top:20px}
  .vorstellung .foto{width:calc(200px * var(--vita-foto-faktor))}
}
.vita .trennlinie{width:100%}
.vita h2{text-align:center;font-size:var(--groesse-abschnitt);margin:18px 0}

.filter{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:var(--abstand-abschnitt) 10px var(--raster-abstand)}
.filter{scroll-margin-top:calc(var(--logo-hoehe) + 38px)}     /* „Projekte“: Filterzeile direkt unter der Menüleiste */
.filter button{color:var(--farbe-text-leise);font-weight:600;font-size:var(--groesse-nav);padding:6px 5px;transition:color .2s}
.filter button:hover{color:#fff}
.filter button[aria-pressed="true"]{color:var(--farbe-akzent)}
/* Suchfeld links neben „Alle“ — schmal, Farben aus den globalen Definitionen */
#suche{width:var(--suche-breite);font:inherit;font-size:var(--groesse-nav);color:var(--farbe-text);background:transparent;
  border:0;border-bottom:1px solid var(--farbe-linie-hell);padding:5px 4px;margin-right:6px;outline:none;transition:border-color .2s}
#suche:focus{border-bottom-color:var(--farbe-akzent)}
#suche::placeholder{color:var(--farbe-text-grau)}
/* Leeren-× (Chrome/Safari): weiß statt Browser-Blau, nur solange etwas eingetippt ist */
#suche::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:12px;height:12px;cursor:pointer;opacity:.85;
  background:center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1l10 10M11 1L1 11' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
#suche::-webkit-search-cancel-button:hover{opacity:1}
#suche:placeholder-shown::-webkit-search-cancel-button{display:none}
.ohne-js .nur-mit-js{display:none}
.raster{list-style:none;margin:0 auto;max-width:calc(100% + var(--raster-schmal) * (var(--inhalt-breite) - 100%));box-sizing:border-box;display:grid;grid-template-columns:repeat(var(--raster-spalten),minmax(0,1fr));gap:var(--raster-abstand);padding:0 var(--raster-abstand) var(--raster-abstand)}
.kachel{position:relative;display:block;aspect-ratio:var(--kachel-format);overflow:hidden;background:#2a2a2a}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--zeit-hover) ease}
.kachel:hover img{transform:scale(1.04)}
.kachel span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;
  background:var(--farbe-kachel-hover);opacity:0;transition:opacity var(--zeit-hover) ease;
  font-size:clamp(var(--groesse-nav), 1.2vw, var(--groesse-kachel-titel));font-weight:var(--staerke-kachel-titel);line-height:1.3}
.kachel:hover span,.kachel:focus-visible span{opacity:1}
li.aus{display:none}
@media (hover:none){ .kachel span{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);align-items:flex-end;padding-bottom:12px;font-size:var(--groesse-klein)} }
.fussnote{text-align:center;color:var(--farbe-text-grau);font-size:var(--groesse-mini);padding:30px 20px 40px}
.fussnote a{margin:0 8px}

/* =====================================================================================
   PROJEKT — Vollbild-Bühne (jede Folie steht als echtes HTML im Dokument)
   ===================================================================================== */
body.projekt{overflow:hidden;background:var(--farbe-buehne)}
#buehne{position:fixed;inset:0;height:100vh;height:100dvh;margin:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:var(--farbe-buehne)}
/* Nur die aktive Folie und ihre Nachbarn sind „da“ — so lädt der Browser nicht alle Bilder auf einmal (loading=lazy) */
.folie{position:absolute;inset:0;margin:0;opacity:0;transition:opacity var(--zeit-folie) ease;pointer-events:none;display:none}
.folie.nah{display:block}
.folie.aktiv{opacity:1;pointer-events:auto}
.folie img,.folie video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.folie.fuellt img,.folie.fuellt video{object-fit:cover}
.folie figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.ba-rahmen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:var(--ar,16/9);
  width:min(100vw, calc(100vh * var(--ar,1.7778)));width:min(100vw, calc(100dvh * var(--ar,1.7778)))}
.ba.fuellt .ba-rahmen{width:max(100vw, calc(100vh * var(--ar,1.7778)));width:max(100vw, calc(100dvh * var(--ar,1.7778)))}
.ba-rahmen img{object-fit:cover}
.ba .links{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .linie{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5)}
.ba .griff{position:absolute;top:50%;left:var(--pos);width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.25);box-shadow:0 0 8px rgba(0,0,0,.4)}
.ba .griff i{width:0;height:0;border:6px solid transparent}
.ba .griff i:first-child{border-right-color:#fff;margin-left:-6px} .ba .griff i:last-child{border-left-color:#fff;margin-right:-6px}
.ba .etikett{position:absolute;top:50%;margin-top:56px;font-size:var(--groesse-klein);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 12px;background:rgba(0,0,0,.45);transition:opacity .3s}
.ba .etikett.l{right:calc(100% - var(--pos) + 14px)} .ba .etikett.r{left:calc(var(--pos) + 14px)}
.ba.zieht .etikett{opacity:0}
/* Dreifach-Vergleich: „rechts“ endet an der zweiten Teilung, darunter das dritte Bild (z. B. Bestand) */
.ba.drei .rechts{clip-path:inset(0 calc(100% - var(--pos2)) 0 0)}
.ba .linie.zwei,.ba .griff.zwei{left:var(--pos2)}
.ba.drei .etikett.r{left:calc(var(--pos) + 14px);right:auto} .ba .etikett.d{left:calc(var(--pos2) + 14px)}
.ba.drei.eng .etikett.r{opacity:0}
@media (max-width:760px){ .ba .etikett{top:auto;bottom:12px;margin:0} .ba .etikett.l{left:12px;right:auto} .ba .etikett.r{right:12px;left:auto}
  .ba.drei .etikett.r{left:50%;right:auto;transform:translateX(-50%)} .ba .etikett.d{right:12px;left:auto} }

/* Film: nie größer als seine echte Auflösung (Hochrechnen macht Videos unnötig rau), mittig auf der Seitenfarbe */
/* Vollbild nur über UNSERE Taste (sonst zwei Vollbild-Tasten mit verschiedener Wirkung); controlslist="nofullscreen" für Chromium */
.folie.film video::-webkit-media-controls-fullscreen-button{display:none}
.folie.film video{inset:0;margin:auto;width:min(100%, var(--video-w,100%), calc(100vh * (var(--video-ar,16/9))));
  width:min(100%, var(--video-w,100%), calc(100dvh * (var(--video-ar,16/9))));height:auto;aspect-ratio:var(--video-ar,16/9);object-fit:contain}

/* Tortenteller: Modell frei auf der Seitenfarbe (Transparenz), nie größer als 1920 px, Unterschrift darunter */
.drehen .dreh-rahmen{position:absolute;inset:0 0 var(--dreh-platz-unten) 0;margin:auto;aspect-ratio:var(--dreh-ar,3/2);height:auto;
  width:min(100%, var(--dreh-w,100%), calc((100vh - var(--dreh-platz-unten) - 60px) * var(--dreh-ar,1.5)));
  width:min(100%, var(--dreh-w,100%), calc((100dvh - var(--dreh-platz-unten) - 60px) * var(--dreh-ar,1.5)));
  cursor:grab;touch-action:pan-y}
.drehen.zieht .dreh-rahmen{cursor:grabbing}
.folie .dreh-bild{object-fit:contain;pointer-events:none}
.dreh-flaeche{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.drehen.leinwand .dreh-bild{visibility:hidden}     /* Zeichenfläche übernimmt, sobald die erste Ansicht entpackt ist */
.drehen .unterschrift{position:absolute;left:0;right:0;bottom:calc(var(--dreh-platz-unten) - 20px);margin:0;text-align:center;
  font-size:var(--groesse-nav);font-weight:500;letter-spacing:.06em;transition:opacity .8s}
.drehen.bewegt .unterschrift{opacity:0}
.drehen .ladebalken{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--dreh-platz-unten) - 34px);width:180px;height:2px;
  background:rgba(255,255,255,.18);overflow:hidden;opacity:0;transition:opacity .6s}
.drehen .ladebalken::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--dreh-fortschritt,0));
  background:var(--farbe-text);transition:transform .2s linear}
.drehen.laedt .ladebalken{opacity:1}
.drehen.laedt .dreh-rahmen{cursor:progress}

/* Panorama / 3D-Modell (Pano2VR): Startbild in Originalgröße (nie hochgerechnet) mit Unterschrift; Klick startet */
/* Nur das Startbild startet das Panorama; daneben blättert ein Klick wie bei jedem Bild (Alex 11.11.2026) */
.pano-start{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none}
.pano-start img{pointer-events:auto;cursor:pointer}
.folie .pano-start img{position:static;width:auto;height:auto;max-width:92vw;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px);
  object-fit:contain;box-shadow:0 12px 40px rgba(0,0,0,.35);transition:transform .3s ease}
.pano-start:hover img{transform:scale(1.015)}
.pano-start .unterschrift{font-size:var(--groesse-nav);font-weight:500;letter-spacing:.06em;color:var(--farbe-text);text-shadow:none}
.pano-start .unterschrift small{font-size:inherit;font-weight:400;color:var(--farbe-text-leise)}
.pano iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--farbe-buehne)}
.pano.laeuft .pano-start{display:none}
/* Panorama läuft: Menü, Bildpfeile, untere Leiste ganz weg — nur ein dezentes × und ⛶ oben rechts */
body.pano-laeuft .ui{opacity:0 !important;pointer-events:none !important}
#pano-knoepfe{position:fixed;z-index:8;top:max(14px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));
  display:none;gap:6px}
body.pano-laeuft #pano-knoepfe{display:flex}
#pano-knoepfe button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(0,0,0,.35);opacity:.55;transition:opacity .2s}
#pano-knoepfe button:hover,#pano-knoepfe button:focus-visible{opacity:1}
#pano-hinweis{position:fixed;z-index:8;left:50%;bottom:max(24px, env(safe-area-inset-bottom));transform:translateX(-50%);
  background:rgba(0,0,0,.6);padding:9px 16px;font-size:var(--groesse-klein);opacity:0;transition:opacity .6s;pointer-events:none}
#pano-hinweis.zeigen{opacity:1}

.film .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(0,0,0,.25);transition:opacity .3s;width:100%}
.film .play svg{width:86px;height:86px;filter:drop-shadow(0 0 12px rgba(0,0,0,.5))}
.film .play span{font-size:var(--groesse-klein);font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-shadow:var(--schatten-text)}
.film.laeuft .play{opacity:0;pointer-events:none}
body.film-laeuft #fuss{bottom:52px;background:none}

#auftakt{position:fixed;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 20px;margin:0;
  pointer-events:none;font-size:var(--groesse-projekttitel);line-height:1.2;text-shadow:var(--schatten-text);transition:opacity 1.2s ease}
#auftakt.weg{opacity:0}

#buehne.links{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 10 15 22l12 12' stroke='%23000' stroke-opacity='.45' stroke-width='7'/%3E%3Cpath d='M27 10 15 22l12 12' stroke='%23fff' stroke-width='3.6'/%3E%3C/g%3E%3C/svg%3E") 22 22, w-resize}
#buehne.rechts{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 10 12 12-12 12' stroke='%23000' stroke-opacity='.45' stroke-width='7'/%3E%3Cpath d='m17 10 12 12-12 12' stroke='%23fff' stroke-width='3.6'/%3E%3C/g%3E%3C/svg%3E") 22 22, e-resize}
#buehne.ziehen{cursor:ew-resize} #buehne.normal{cursor:default}

#fuss{position:fixed;z-index:5;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:16px;
  padding:40px var(--rand-rechts) var(--rand-unten) var(--rand-links);background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}
.projekt-nav{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;opacity:.92;transition:opacity .2s}
.projekt-nav:hover{opacity:1}
.projekt-nav small{white-space:nowrap;font-size:var(--groesse-mini);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--farbe-text-leise)}
.projekt-nav span{display:block;max-width:100%;font-size:var(--groesse-nav);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#proj-nach{text-align:right;align-items:flex-end;justify-self:end}
#mitte{display:flex;align-items:center;gap:18px;font-size:var(--groesse-nav);font-weight:500}
#mitte h1{font-size:inherit;font-weight:inherit;margin:0}
#zaehler{font-variant-numeric:tabular-nums;color:var(--farbe-text-leise);min-width:3.6em;text-align:center}
@media (max-width:900px){
  #fuss{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"m m" "l r";row-gap:14px}
  #mitte{grid-area:m;justify-content:center} #proj-vor{grid-area:l} #proj-nach{grid-area:r}
  #mitte h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .projekt-nav span{font-size:var(--groesse-klein)}
}
.randpfeil{position:fixed;z-index:5;top:50%;transform:translateY(-50%);padding:24px 10px}
#pfeil-links{left:max(6px, env(safe-area-inset-left))} #pfeil-rechts{right:max(6px, env(safe-area-inset-right))}
.randpfeil svg{width:var(--pfeil-groesse);height:var(--pfeil-groesse);stroke-width:var(--pfeil-strich);filter:var(--pfeil-schatten)}
@media (pointer:coarse){ .randpfeil{display:none} }

#info,#teilen-menue{position:fixed;z-index:6;left:50%;bottom:76px;transform:translateX(-50%);background:var(--farbe-flaeche);display:none}
#info{width:min(560px,92vw);padding:18px 22px;font-size:var(--groesse-nav);line-height:1.6;color:var(--farbe-text-leise)}
body.info-offen #info{display:block}
#info strong{display:block;color:#fff;font-weight:500;margin-bottom:6px}
#info a{text-decoration:underline;text-underline-offset:3px}
#teilen-menue{padding:8px 0;min-width:240px}
#teilen-menue.offen{display:block}
#teilen-menue a,#teilen-menue button{display:block;width:100%;text-align:left;padding:9px 18px;font-size:14px;color:var(--farbe-text-leise)}
#teilen-menue a:hover,#teilen-menue button:hover{color:#fff;background:rgba(255,255,255,.06)}
#teilen-menue .hinweis{padding:8px 18px 4px;font-size:var(--groesse-mini);color:var(--farbe-text-grau);line-height:1.4;border-top:1px solid rgba(255,255,255,.12);margin-top:6px}
body.pseudo .ui,body.pseudo .ui *{opacity:0;pointer-events:none !important}   /* auch Kinder mit eigenem pointer-events (Menü-Taste lag über dem ×) */
/* × zum Verlassen: über ALLEM (auch der unsichtbaren Kopfzeile), große Trefferfläche, Kerbe/Kamerainsel beachten */
#pseudo-aus{position:fixed;z-index:40;top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));display:none;
  opacity:.7;width:44px;height:44px;align-items:center;justify-content:center}
body.pseudo #pseudo-aus{display:flex}
#meldung{position:fixed;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.8);padding:12px 20px;
  font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none}
#meldung.zeigen{opacity:1}

/* Ohne JavaScript: Projektbilder untereinander, alles bleibt lesbar und erreichbar */
.ohne-js .folie{display:block;position:relative;opacity:1;height:auto;margin-bottom:10px}
.ohne-js .folie img,.ohne-js .folie video{position:static;height:auto}
.ohne-js .folie .vorstufe{display:none}
/* Vorstufe erst nach der Karenz (seite.js vorstufeKarenzMs), dann kurz eingeblendet — v0.9.68 */
.folie img.vorstufe{opacity:0;transition:opacity .25s ease} .folie img.vorstufe.zeigen{opacity:1}
.ohne-js #buehne{position:static;height:auto;padding-top:80px}
.ohne-js body.projekt{overflow:auto}
.ohne-js .ba-rahmen{position:static;transform:none;width:100%}
.ohne-js .ba .links,.ohne-js .ba .linie,.ohne-js .ba .griff,.ohne-js .randpfeil,.ohne-js .film .play{display:none}
.ohne-js #fuss{position:static;background:none}

/* =====================================================================================
   TEXTSEITEN (Impressum, Datenschutz, AGB, Kontakt)
   ===================================================================================== */
.lesen{max-width:var(--lese-breite);margin:0 auto;padding:110px 20px 80px;font-size:var(--groesse-lesetext);line-height:1.7;color:var(--farbe-text-leise)}
.lesen h1{font-size:var(--groesse-abschnitt);text-transform:uppercase;letter-spacing:var(--sperrung);color:var(--farbe-text-grau);margin:0}
.lesen h2{font-size:18px;font-weight:500;color:var(--farbe-text);margin:2em 0 .5em}
.lesen hr{border:0;height:1px;background:rgba(255,255,255,.15);margin:2em 0}
.lesen table{border-collapse:collapse;width:100%;font-size:.92em} .lesen td,.lesen th{border-bottom:1px solid rgba(255,255,255,.12);padding:6px 8px;text-align:left}
.entwurf-band{display:inline-block;margin:12px 0 4px;font-size:var(--groesse-mini);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--farbe-grund);background:var(--farbe-text-leise);padding:4px 10px}
#text-zu{position:fixed;z-index:21;top:84px;right:var(--rand);opacity:.8}
#text-zu:hover{opacity:1}
#text-zu svg{width:26px;height:26px}

/* Bildpfeil am Ende der Schleife: andere Farbe — der nächste Schritt beginnt von vorn. Bleibt auch in der Ruhe sichtbar,
   damit das Ende erkennbar ist, wenn die Bedienung beim Blättern ausgeblendet wurde. */
.randpfeil.umlauf svg{stroke:var(--farbe-pfeil-umlauf)}
body.ruhe .randpfeil.umlauf{opacity:.85;pointer-events:auto}
/* Vorschaubilder („Briefmarken“) über der Fußzeile */
#marken{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(var(--fuss-hoehe, 72px) + 4px);
  display:flex;align-items:center;gap:var(--marke-abstand);max-width:min(94vw, 1100px)}
.marken-band{display:flex;gap:var(--marke-abstand);overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding:3px}
.marken-band::-webkit-scrollbar{display:none}
.marke{flex:none;width:var(--marke-breite);aspect-ratio:3/2;padding:0;border:0;border-radius:3px;overflow:hidden;cursor:pointer;
  background:rgba(0,0,0,.35);opacity:var(--marke-deckkraft);transition:opacity var(--zeit-hover) ease;outline:2px solid transparent;outline-offset:1px}
.marke:hover,.marke:focus-visible{opacity:max(var(--marke-deckkraft), .9)}
.marke.aktiv{opacity:1;outline-color:var(--farbe-text)}
.marke img{width:100%;height:100%;object-fit:cover;display:block}
.marke span{color:var(--farbe-text);font-size:12px}
#marken-knopf{flex:none;width:30px;height:30px;padding:0;display:grid;place-items:center}
#marken-knopf svg{width:20px;height:20px;transition:transform var(--zeit-ui) ease}
body.marken-zu .marken-band{display:none}
body.marken-zu #marken-knopf svg{transform:rotate(180deg)}
body.info-offen #marken,body.film-laeuft #marken{display:none}
@media (max-width:767px){ :root{--marke-breite:52px} }
.ohne-js #marken{display:none}
/* Telefon quer (wenig Höhe): Vorschaubilder lägen mitten im Bild (gemessen 844×390, 11.11.2026) — dort ganz weg */
@media (max-height:500px) and (orientation:landscape){ #marken,#marken-knopf{display:none} }