/* Fokus-Modus, Fassung 2: eine Sache auf einmal, ein Knopf holt alles dazu.
   Die Seite selbst bleibt unverändert; diese Datei und fokus.js legen sich darüber.
   Zustand: html.fokus (Fokus) oder ohne Klasse (alles). */

:root{--fk-dauer:.55s;--fk-kurve:cubic-bezier(.2,.75,.15,1);--fk-weich:cubic-bezier(.65,0,.2,1);--schleier:22,26,33}
:root[data-theme="light"]{--schleier:236,239,244}

/* ---------- Fokus: Seite ausblenden, Bühne zeigen ---------- */
/* Die Seite bleibt im Fokus scrollbar, aber ohne Leiste: Werkzeuge wie Surfingkeys schieben den Seiten-Scroll,
   fokus.js macht daraus einen Schritt. Rad, Tasten und Wischen fängt fokus.js vorher ab. */
html.fokus{overflow-y:scroll;scrollbar-width:none;overscroll-behavior:none;overflow-anchor:none}
html.fokus::-webkit-scrollbar{display:none}
html.fokus .flow,html.fokus footer{opacity:0;visibility:hidden;pointer-events:none}
.flow,footer{transition:opacity .35s ease,visibility 0s linear .35s}
html:not(.fokus) .flow,html:not(.fokus) footer{transition:opacity .35s ease,visibility 0s}
html.fokus nav .nav-links,html.fokus nav .nav-cta{opacity:0;pointer-events:none;transform:translateY(-6px)}
nav .nav-links,nav .nav-cta{transition:opacity .35s ease,transform .35s ease}

/* ---------- Kulisse: ein Bild je Abschnitt, langsam in Bewegung ---------- */
.kulisse{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
html.fokus .kulisse{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.kul-innen{position:absolute;inset:-4%;
  transform:translate3d(calc(var(--nx,0) * -26px),calc(var(--ny,0) * -18px),0);transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.kb{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--fk-weich),transform 1.8s var(--fk-weich);transform:scale(1.12)}
.kb.an{opacity:1;transform:none}
.kb img{width:100%;height:100%;object-fit:cover;animation:kamerafahrt 38s ease-in-out infinite alternate;animation-play-state:paused}
.kb.an img{animation-play-state:running}
.kb:nth-child(2n) img{animation-name:kamerafahrt2}
@keyframes kamerafahrt{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-1.5%)}}
@keyframes kamerafahrt2{from{transform:scale(1.15) translate(-2%,1%)}to{transform:scale(1.03) translate(1.5%,-1%)}}
.schleier{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(var(--schleier),.94) 0%,rgba(var(--schleier),.72) 34%,rgba(var(--schleier),.2) 72%,rgba(var(--schleier),.35) 100%),
    linear-gradient(0deg,rgba(var(--schleier),.85) 0%,rgba(var(--schleier),0) 30%),
    linear-gradient(180deg,rgba(var(--schleier),.7) 0%,rgba(var(--schleier),0) 22%)}
.schleier2{position:absolute;inset:0;background:rgba(var(--schleier),.62);opacity:0;transition:opacity 1s ease}
.kulisse.gedimmt .schleier2{opacity:1}
@media(max-width:760px){
  .schleier{background:linear-gradient(180deg,rgba(var(--schleier),.82) 0%,rgba(var(--schleier),.62) 45%,rgba(var(--schleier),.9) 100%)}
}

/* ---------- Bühne ---------- */
.buehne{position:fixed;inset:0;z-index:3;display:none;pointer-events:none;overflow:hidden}
html.fokus .buehne{display:block}
/* Scrollreserve: schnelles Tippen (Surfingkeys) erreicht den Rand nicht, siehe fokus.js „Scrollt etwas anderes“ */
html.fokus body::after{content:"";display:block;height:4000vh}
.buehne > *{pointer-events:auto}
/* will-change nur transform: opacity machte jede Folie zur Backdrop-Wurzel, das Milchglas darin sah die Kulisse nicht */
.szene{position:absolute;inset:0;display:flex;align-items:center;will-change:transform}
.szene > .wrap{width:100%}

/* Kopf über den Karten */
.buehne-kopf{position:absolute;left:0;right:0;top:clamp(78px,11vh,120px);z-index:2;pointer-events:none}
.buehne-kopf .kicker{margin-bottom:10px}
.buehne-kopf h2{font-size:clamp(19px,2.4vw,27px);margin:0;max-width:760px}

/* Wörter einzeln */
.wort{display:inline-block;opacity:0;transform:translateY(.55em) rotateX(-75deg);transform-origin:50% 100%;filter:blur(6px);
  animation:wortRein .95s var(--fk-kurve) forwards;animation-delay:calc(var(--start,0ms) + var(--i) * var(--takt,55ms))}
@keyframes wortRein{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes hoch{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes vonLinks{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

/* ---------- Einstieg und Kontakt ---------- */
.szene-ganz{padding-top:60px}
.szene-ganz .badge,.szene-ganz .kicker{animation:vonLinks .8s var(--fk-kurve) .1s backwards}
.szene-ganz h1{font-size:clamp(28px,7.4vw,92px);line-height:1.02;perspective:600px}
.szene-ganz h2{font-size:clamp(28px,4.6vw,54px);perspective:600px;max-width:900px}
.szene-ganz p.lead{animation:hoch 1s var(--fk-kurve) 1.1s backwards;font-size:clamp(16px,1.6vw,19px)}
.szene-ganz .pg-cta{animation:hoch 1s var(--fk-kurve) 1.35s backwards}
.szene-ganz .andere{animation:hoch 1s var(--fk-kurve) 1.6s backwards}
.szene-ganz .btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- Kapitel ---------- */
.kap-nr{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--font-ui);font-weight:700;font-size:clamp(180px,34vw,520px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(var(--green),.32);letter-spacing:-.06em;pointer-events:none;
  translate:calc(var(--nx,0) * 40px) calc(var(--ny,0) * 26px);transition:translate 1s cubic-bezier(.2,.6,.2,1);
  animation:kapNr 1.6s var(--fk-kurve) backwards}
@keyframes kapNr{from{opacity:0;transform:translateY(80px) scale(.9)}to{opacity:1;transform:none}}
.szene-kapitel .kicker{animation:vonLinks .8s var(--fk-kurve) .1s backwards}
.szene-kapitel h2{font-size:clamp(32px,5.4vw,68px);line-height:1.04;max-width:900px;perspective:600px;margin-bottom:24px}
.szene-kapitel p.lead{font-size:clamp(16px,1.7vw,20px);max-width:640px;animation:hoch 1s var(--fk-kurve) var(--nach,1s) backwards}

/* ---------- Zitat ---------- */
.zitat-innen{max-width:900px}
.zitat-strich{width:0;height:2px;background:rgb(var(--green));margin-bottom:32px;animation:strich 1.2s var(--fk-kurve) .15s forwards;
  box-shadow:0 0 14px rgba(var(--green),.7)}
@keyframes strich{to{width:120px}}
.zitat-gross{font-family:var(--font-body);font-weight:300;font-size:clamp(23px,3.4vw,42px);line-height:1.32;color:var(--text1);perspective:600px}
.zitat-klein{margin-top:26px;color:var(--text3);font-size:clamp(14px,1.4vw,16px);line-height:1.7;max-width:700px;
  animation:hoch 1s var(--fk-kurve) var(--nach,1.4s) backwards}

/* ---------- Gruppen: gemeinsame Teile ---------- */
.szene-gruppe{justify-content:center;padding:clamp(190px,27vh,250px) 0 110px;flex-direction:column}
.raum{width:100%;display:flex;justify-content:center}
/* Perspektive am direkten Elternteil jeder Karte, kein preserve-3d: so zeichnet WebKit auch ohne GPU richtig */
.traeger{display:grid;place-items:center;perspective:1500px;perspective-origin:50% 40%}
.platz{grid-area:1/1;transition:transform 1s var(--fk-kurve),opacity .8s ease,filter .8s ease;cursor:pointer}
.platz.an{cursor:default}
.platz.fern{pointer-events:none}
.neig{transition:transform .5s ease-out}
.platz.an .neig{transform:perspective(1000px) rotateY(calc(var(--nx,0) * 9deg)) rotateX(calc(var(--ny,0) * -7deg))}
.ohne-uebergang .platz,.ohne-uebergang .spur-linie i,.ohne-uebergang .spur-punkt{transition:none!important}

.buehne-ding.gcard{background:rgba(var(--schleier),.84);border:1px solid rgba(var(--green),.26);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.02) inset;
  padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,42px);transition:box-shadow .8s ease,border-color .8s ease}
.platz.an .buehne-ding.gcard{border-color:rgba(var(--green),.55);box-shadow:0 40px 90px -30px rgba(0,0,0,.75),0 0 40px -10px rgba(var(--green),.35)}
.buehne-ding.gcard h3{font-size:clamp(19px,2.2vw,25px);margin-bottom:12px}
.buehne-ding.gcard p{font-size:clamp(15.5px,1.6vw,18px);line-height:1.6}
.buehne-ding .num{font-family:var(--font-ui);font-size:clamp(56px,8vw,104px);line-height:1;color:rgb(var(--green));margin-bottom:16px;
  text-shadow:0 0 30px rgba(var(--green),.35);font-variant-numeric:tabular-nums}
.buehne-ding .lbl{color:var(--text2);font-size:clamp(15.5px,1.6vw,18px);line-height:1.6}

/* Zahlen: Coverflow, dahinter ein Puls */
.form-zahlen .platz{width:min(470px,78vw);
  transform:translateX(calc(var(--d) * 74%)) translateZ(calc(var(--a) * -260px)) rotateY(calc(var(--d) * -34deg));
  opacity:calc(1 - var(--a) * .38)}
.form-zahlen .platz:not(.an) .buehne-ding{filter:saturate(.6)}
.puls{position:absolute;left:0;right:0;top:50%;height:200px;transform:translateY(-10%);opacity:.55;pointer-events:none}
.puls svg{width:100%;height:100%}
.puls path{fill:none;stroke:rgb(var(--green));stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:260 1400;
  animation:puls 3.2s linear infinite;filter:drop-shadow(0 0 6px rgba(var(--green),.9))}
@keyframes puls{from{stroke-dashoffset:1660}to{stroke-dashoffset:0}}

/* Ring: viele Karten auf einem Zylinder */
.form-ring .platz{width:min(390px,74vw);
  transform:translateZ(calc(var(--r,400px) * -1)) rotateY(calc(var(--d) * var(--winkel,60deg))) translateZ(var(--r,400px));
  opacity:calc(1 - var(--a) * .34)}
.form-ring .platz.fern{opacity:0}
.form-ring .platz:not(.an) .buehne-ding{filter:brightness(.7)}
.form-ring .buehne-ding.gcard{padding-top:0;overflow:hidden}
.kbild{margin:0 calc(clamp(22px,3.4vw,42px) * -1) 22px;aspect-ratio:16/9;overflow:hidden;position:relative;background:rgba(0,0,0,.3)}
.kbild img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 6s ease-out}
.platz.an .kbild img{transform:scale(1)}
.kbild::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--schleier),.85),transparent 55%)}
.punkte{width:100%;height:100%;display:block}
.punkte circle{fill:var(--text3);opacity:.35}
.platz.an .punkte circle{animation:punktAn .6s ease backwards}
@keyframes punktAn{from{opacity:0}}
.punkte .heraus{fill:rgb(var(--green));opacity:1;transition:transform 1.2s var(--fk-kurve) .5s,filter 1.2s ease .5s}
.platz.an .punkte .heraus{transform:translateY(-34px) scale(1.9);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 6px rgb(var(--green)))}

/* Stapel: die oberste fliegt weg, die nächste rückt nach */
.form-stapel .platz{width:min(600px,86vw);
  transform:translateY(calc(var(--d) * -26px)) translateZ(calc(var(--d) * -110px));opacity:calc(1 - var(--d) * .3)}
.form-stapel .platz.weg{transform:translateY(-70%) translateZ(120px) rotateX(55deg);opacity:0;pointer-events:none}
.stapel-nr{font-family:var(--font-ui);font-size:12px;letter-spacing:.14em;color:var(--text3);float:right}
.zeichen{width:58px;height:58px;margin-bottom:18px}
.zeichen svg{width:100%;height:100%;fill:none;stroke:rgb(var(--green));stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zeichen path,.zeichen circle{stroke-dasharray:160;stroke-dashoffset:160}
.platz.an .zeichen path,.platz.an .zeichen circle{animation:zeichnen 1.4s var(--fk-kurve) .35s forwards}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* Wende: zwei Seiten einer Karte */
/* Die Seite dreht sich weg, auf halbem Weg wechselt, was man sieht (statt Rückseiten, die WebKit ohne GPU nicht kennt) */
.form-wende .platz{width:min(620px,88vw);transform:rotateY(calc(var(--d) * -180deg));opacity:0;
  transition:transform 1.1s var(--fk-kurve),opacity 0s linear .22s}
.form-wende .platz.an{opacity:1}

/* Fächer: Karten wie in der Hand */
.form-faecher .platz{width:min(400px,76vw);transform-origin:50% 190%;
  transform:rotate(calc(var(--d) * 12deg)) translateZ(calc(var(--a) * -60px)) translateY(calc(var(--a) * 14px));
  opacity:calc(1 - var(--a) * .3)}
.buehne-ding.paket .stufe{font-size:12px}
.buehne-ding.paket dt{font-size:13px}
.buehne-ding.paket dd{font-size:clamp(15px,1.5vw,17px)}

/* Pfad: drei Schritte auf einer Linie */
.pfad-spur{position:relative;width:min(640px,84vw);height:48px;margin:0 auto 46px}
.spur-linie{position:absolute;left:22px;right:22px;top:23px;height:2px;background:rgba(var(--green),.2)}
.spur-linie i{position:absolute;inset:0;background:rgb(var(--green));transform-origin:0 50%;transform:scaleX(var(--f,0));
  transition:transform 1.1s var(--fk-kurve);box-shadow:0 0 12px rgba(var(--green),.8)}
.spur-punkt{all:unset;position:absolute;top:0;left:calc((100% - 46px) * var(--k) / (var(--n) - 1));width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:16px;cursor:pointer;
  color:var(--text3);background:rgb(var(--schleier));border:1px solid rgba(var(--green),.35);transition:all .6s var(--fk-kurve)}
.spur-punkt.an{color:var(--text1);border-color:rgb(var(--green))}
.spur-punkt.jetzt{background:rgb(var(--green));color:#1b2016;box-shadow:0 0 0 8px rgba(var(--green),.15),0 0 30px rgba(var(--green),.6);transform:scale(1.12)}
.form-pfad .platz{width:min(700px,88vw);transform:translateX(calc(var(--d) * 22%));opacity:0;pointer-events:none}
.form-pfad .platz.an{opacity:1;pointer-events:auto}
.form-pfad .schritt .nr{display:none}
.buehne-ding.schritt{display:block;background:rgba(var(--schleier),.84);border:1px solid rgba(var(--green),.4);padding:clamp(24px,3.4vw,40px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.buehne-ding.schritt p{font-size:clamp(17px,2vw,22px);line-height:1.6}

/* Fortschritt rechts: ein Strich je Ding, Lücke zwischen Abschnitten */
.fk-leiste{position:absolute;right:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.fk-leiste button{all:unset;cursor:pointer;display:block;width:10px;height:3px;background:var(--text3);opacity:.45;
  transition:width .3s var(--fk-kurve),opacity .3s,background .3s}
.fk-leiste button:hover{opacity:.9}
.fk-leiste button.an{width:24px;opacity:1;background:rgb(var(--green));box-shadow:0 0 8px rgba(var(--green),.8)}
.fk-leiste .luecke{height:9px}

.hinweis{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-family:var(--font-ui);font-size:12px;z-index:4;
  color:var(--text3);letter-spacing:.04em;transition:opacity .5s;white-space:nowrap;animation:hoch 1s ease 2.2s backwards}
.hinweis.weg{opacity:0;pointer-events:none}
.hinweis .h-touch{display:none}
@media(pointer:coarse){.hinweis .h-maus{display:none}.hinweis .h-touch{display:inline}}
@media(max-width:760px){
  .hinweis{bottom:96px}
  .fk-leiste{top:auto;transform:none;right:auto;left:18px;bottom:38px;flex-direction:row;align-items:flex-end;gap:3px}
  .fk-leiste button{width:3px;height:8px}
  .fk-leiste button.an{width:3px;height:18px}
  .fk-leiste .luecke{height:auto;width:6px}
  .szene-gruppe{padding:clamp(170px,24vh,210px) 0 130px}
  .form-zahlen .platz{transform:translateX(calc(var(--d) * 88%)) translateZ(calc(var(--a) * -200px)) rotateY(calc(var(--d) * -30deg))}
  .form-faecher .platz{transform-origin:50% 230%;transform:rotate(calc(var(--d) * 9deg)) translateZ(calc(var(--a) * -60px))}
  .kap-nr{bottom:auto;top:58vh;right:-6vw}
  .szene-ganz,.szene-kapitel,.szene-zitat{align-items:center}
}

/* ---------- Der Knopf: immer an derselben Stelle ---------- */
.fokus-knopf{position:fixed;right:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:10;
  display:flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:13px;letter-spacing:.03em;
  color:var(--text1);background:var(--glass);border:1px solid rgba(var(--green),0.45);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:13px 18px;cursor:pointer;
  border-radius:var(--corner);transition:background .2s,border-color .2s}
.fokus-knopf:hover{background:rgba(var(--green),0.16);border-color:rgba(var(--green),0.8)}
.fokus-knopf:focus-visible{outline:2px solid rgb(var(--green));outline-offset:3px}
.fokus-knopf svg{width:18px;height:18px;flex:0 0 18px}
.fokus-knopf svg rect{fill:none;stroke:rgb(var(--green));stroke-width:1.6;transition:transform var(--fk-dauer) var(--fk-kurve),opacity .3s}
/* Symbol: im Fokus ein Feld, das sich in vier teilt; in der Gesamtansicht vier, die zu einem werden */
.fokus-knopf .s1{transform-origin:9px 9px}
html.fokus .fokus-knopf .s4{opacity:1}
html:not(.fokus) .fokus-knopf .s4{opacity:0}
html:not(.fokus) .fokus-knopf .s1{opacity:1}
html.fokus .fokus-knopf .s1{opacity:0}

@media (prefers-reduced-motion: reduce){
  :root{--fk-dauer:0s}
  .flow,footer,nav .nav-links,nav .nav-cta,.kulisse,.kb,.kul-innen,.traeger,.platz,.neig,.schleier2,.spur-linie i,.spur-punkt{transition:none!important}
  .kb img,.puls path{animation:none!important}
  .wort,.kap-nr,.zitat-strich,.zitat-klein,.szene-ganz *,.szene-kapitel *,.zeichen *,.hinweis{animation:none!important;opacity:1;transform:none;filter:none}
  .zitat-strich{width:120px}
  .zeichen path,.zeichen circle{stroke-dashoffset:0}
}

/* Handy: das längste Wort der Überschrift („Marktkommunikation“) passt in 390 px */
@media(max-width:520px){.szene-ganz h1{font-size:min(8.1vw,40px)}}
/* Hinter der aktiven Karte liegt nur die Form, nicht ihr Text: sonst scheint er durch das Glas */
.form-stapel .buehne-ding > *,.form-faecher .buehne-ding > *{transition:opacity .45s ease}
.form-stapel .platz:not(.an) .buehne-ding > *{opacity:0}
.form-faecher .platz:not(.an) .buehne-ding > *{opacity:.22}

/* Bausteine der Startseite auf der Bühne: Auskunft neben dem Einstieg, Leistungen mit eigenem Bild statt Motiv, Galerie-Karten */
.szene-ganz .ganz-innen:has(.auskunft){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
.szene-ganz .ganz-innen:has(.auskunft) h1{font-size:clamp(28px,4vw,58px)}
.szene-ganz .auskunft{animation:hoch 1s var(--fk-kurve) 1.5s backwards;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}
.szene-ganz .auskunft .zeile{opacity:1;transform:none}
@media(max-width:960px){.szene-ganz .ganz-innen:has(.auskunft){grid-template-columns:minmax(0,1fr)}.szene-ganz .auskunft{display:none}}
.buehne-ding .motiv{display:none}
.buehne-ding .nr{font-family:var(--font-ui);font-size:12px;color:var(--text3);letter-spacing:.1em;margin-bottom:10px}
figure.buehne-ding{margin:0;padding:0!important;overflow:hidden}
figure.buehne-ding button.bild{display:block;width:100%;padding:0;border:0;background:none;cursor:inherit}
figure.buehne-ding img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
figure.buehne-ding figcaption{padding:16px 22px 22px}
figure.buehne-ding figcaption h3{font-size:clamp(17px,2vw,22px);margin:6px 0 8px;font-family:var(--font-body);font-weight:600;color:var(--text1)}
figure.buehne-ding figcaption a{font-family:var(--font-ui);font-size:14px;color:rgb(var(--green));text-decoration:none}
.buehne-ding.person{display:block}
.buehne-ding.person img{display:block;height:auto;max-width:none;width:calc(100% + 2 * clamp(22px,3.4vw,42px));margin:calc(clamp(24px,3.4vw,40px) * -1) calc(clamp(22px,3.4vw,42px) * -1) 20px;aspect-ratio:4/3;object-fit:cover;object-position:50% 18%}
.buehne-ding.person .role{font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--green));margin:-4px 0 12px}
/* Auf dem Handy verdeckt der beschriftete Knopf in der ganzen Seite Text, dort reicht das Zeichen */
@media(max-width:760px){html:not(.fokus) .fokus-knopf span{display:none}html:not(.fokus) .fokus-knopf{gap:0;padding:12px}}