/* pxmedia.de — Basis. Art-Direction: Signatur X + Werkschau (19.08.2026).
   Tokens kommen aus tokens.css. */
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Black.ttf") format("truetype");font-weight:900;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Lato";src:url("../assets/fonts/Lato-Light.ttf") format("truetype");font-weight:300;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
:focus-visible{outline:2px solid var(--c-orange);outline-offset:3px}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--font);background:var(--c-flaeche-1);color:var(--c-text);
  font-size:var(--fs-text);line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
address{font-style:normal}
.springlink{position:absolute;left:-9999px;top:0;background:var(--c-orange);color:#151515;
  padding:.6rem 1rem;z-index:200;font-weight:900}
.springlink:focus{left:0}
.honig{position:absolute;left:-9999px}

/* ---------- Kopf + Mega-Menü ---------- */
.kopfbereich{position:fixed;inset:0 0 auto;z-index:100;background:#151515cc;-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  border-bottom:1px solid transparent;transition:border-color .3s}
.kopfbereich--fest{border-bottom-color:var(--c-linie)}
.oberzeile{display:flex;justify-content:flex-end;gap:1.6rem;padding:.4rem clamp(1.25rem,4vw,3rem) 0;
  font-size:.78rem;font-weight:700;letter-spacing:.06em}
.oberzeile a{color:#8a8a8a;transition:color .25s}
.oberzeile a:hover{color:var(--c-weiss)}
@media(max-width:1100px){.oberzeile{display:none}}
.kopf{display:flex;align-items:center;gap:2rem;height:86px;padding:0 clamp(1.25rem,4vw,3rem)}
.kopf__logo img{height:46px;width:auto;display:block}
@media(max-width:820px){
  .kopf{height:64px}
  .kopf__logo img{height:34px}
  .kopf .knopf{padding:.6rem 1rem;font-size:.9rem;white-space:nowrap}
}
.kopf__nav{margin-left:auto}
.kopf__nav>ul{display:flex;gap:.25rem}
/* Hauptpunkte: der Lila-Unterstrich ist der zweite Strich des X —
   er zeichnet sich beim Öffnen/Hover (Designspez §2.1) */
.kopf__nav>ul>li>a{display:block;padding:.9rem 1rem;font-weight:700;font-size:.95rem;
  color:var(--c-text-2);border-radius:8px;transition:color .25s,background-size .35s var(--kurve);
  background-image:linear-gradient(var(--c-lila),var(--c-lila));background-repeat:no-repeat;
  background-position:1rem calc(100% - .5rem);background-size:0 2px}
.kopf__nav>ul>li>a:hover,.kopf__nav>ul>li:focus-within>a,.kopf__nav>ul>li.aktiv>a,
.kopf__nav>ul>li.offen>a{color:var(--c-weiss)}
.kopf__nav>ul>li>a:hover,.kopf__nav>ul>li.offen>a,.kopf__nav>ul>li:focus-within>a{
  background-size:calc(100% - 2rem) 2px}
body.statisch .kopf__nav>ul>li>a{transition:color .25s}
/* Mega-Panel (Designspez §2.1): vollbreit unter der Kopfzeile, satte
   Deckung OHNE eigenes backdrop-filter — die Kopfzeile blurrt bereits */
.megapanel{position:absolute;left:0;right:0;top:100%;display:none;overflow:hidden;
  background:rgba(11,11,11,.92);border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 50px 90px #000b}
/* Lichtkegel folgt dem Zeiger (—mx/—my aus basis.js); statisch steht er */
.megapanel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),
    rgba(242,149,14,.08),rgba(84,2,166,.05) 45%,transparent 72%)}
body:not(.js-nav) .kopf__nav li:hover>.megapanel,
body:not(.js-nav) .kopf__nav li:focus-within>.megapanel,
.megapanel--offen{display:block}
.megapanel__innen{max-width:var(--breite-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;
  padding:2.2rem clamp(1.25rem,4vw,3rem) 2.6rem}
.megapanel__kicker{font-weight:300;font-size:1.0625rem;color:var(--c-text-2);margin-bottom:1.3rem}
.megapanel__listen{display:grid;grid-template-columns:repeat(var(--spalten,1),minmax(0,1fr));gap:1.8rem}
.megapanel__gruppe h3{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-2);font-weight:900;margin:0 0 .45rem .9rem}
.megapanel__gruppe>ul{display:grid;gap:.1rem}
.megapanel__spalten[style*="--spalten:1"] .megapanel__gruppe>ul{
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.1rem 1.8rem}
.megapanel__gruppe a{display:block;padding:.65rem .9rem;border-radius:8px;transition:background .2s}
.megapanel__gruppe a:hover,.megapanel__gruppe a:focus-visible{background:#f2950e14}
.megapanel__gruppe a b{display:block;font-weight:900;font-size:1rem;color:var(--c-text)}
.megapanel__gruppe a span{display:block;font-weight:300;font-size:1.0625rem;
  color:var(--c-text-2);line-height:1.45}
.megapanel__beweis{border-left:1px solid rgba(255,255,255,.07);padding-left:2.6rem;
  display:grid;align-content:center}
.megapanel__werk img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;
  border-radius:10px;border:1px solid var(--c-linie)}
.megapanel__werk--logo img{object-fit:contain;padding:1.2rem;background:rgba(255,255,255,.05)}
.megapanel__werk figcaption{margin-top:.9rem}
.megapanel__werk em{font-style:normal;display:block;color:var(--c-orange);font-size:.72rem;
  font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.megapanel__werk b{display:block;font-weight:900;margin-top:.15rem}
.megapanel__werk span{display:block;color:var(--c-text-2);font-size:.9rem;line-height:1.5}
.megapanel__zahl b{display:block;font-size:3.2rem;font-weight:900;line-height:1}
.megapanel__zahl .einheit{color:var(--c-orange)}
.megapanel__zahl>span{display:block;margin-top:.5rem;color:var(--c-text-2);font-size:.95rem}
.kopf__aktion{display:flex;align-items:center;gap:1rem}
.kopf__burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;
  flex-direction:column;gap:5px}
.kopf__burger span{width:24px;height:2px;background:var(--c-text);display:block;transition:transform .3s,opacity .3s}
.kopf__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.kopf__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.kopf__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* E-Mail-Symbol neben dem Burger (Ansage Michael 24.09., STANDARD-DIALOG-EINSTIEG §6.3): nur mobil, Ziel #kontakt */
.kopf__mail{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;color:var(--c-text);border:1px solid rgba(255,255,255,.16)}
.kopf__mail:hover{color:var(--c-orange);border-color:var(--c-orange)}
@media(max-width:1100px){
  .kopf__nav{display:none}
  .kopf__burger{display:flex}
  .kopf__mail{display:flex}
}
/* ---------- Staub-Vorhang: das mobile Menü als Fenster (Designspez §2.1)
   Hintergrund transparent — der fixe Staub-Canvas scheint frei durch
   (Drittel-Punktzahl + Scroll-Wind übernimmt sternenstaub.js). ---------- */
.vorhang{position:fixed;inset:86px 0 0;z-index:106;overflow-y:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  padding:1rem clamp(1.25rem,5vw,2.5rem) 0;
  background:linear-gradient(rgba(13,13,13,.6),rgba(13,13,13,.35) 30%,rgba(13,13,13,.55))}
.vorhang[hidden]{display:none}
/* Bei offenem Vorhang tritt der Seiteninhalt ab — nur der Staub bleibt
   sichtbar (Spez: „der fixe Staub-Canvas scheint frei durch") */
body.vorhang-offen #inhalt,body.vorhang-offen .kontakt-schluss,
body.vorhang-offen .fuss,body.vorhang-offen .chat-fahne{opacity:0;pointer-events:none}
body.js-motion #inhalt,body.js-motion .kontakt-schluss,
body.js-motion .fuss,body.js-motion .chat-fahne{transition:opacity .35s var(--kurve)}
@media(max-width:820px){.vorhang{inset:64px 0 56px}}
.vorhang__liste{display:block}
.vorhang__zeile{display:flex;align-items:center;gap:.8rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.vorhang__haupt{flex:1;display:flex;align-items:baseline;gap:.9rem;font-weight:900;
  font-size:clamp(1.9rem,8vw,2.7rem);line-height:1.15;min-height:56px;padding:.7rem 0}
.vorhang__nr{font-weight:300;font-size:.5em;color:var(--c-text-2);letter-spacing:.08em}
.vorhang__nr i{font-style:normal;color:var(--c-orange)}
.vorhang__auf{width:44px;height:44px;flex:none;display:grid;place-items:center;
  background:none;border:1px solid var(--c-linie);border-radius:50%;color:var(--c-text-2);
  cursor:pointer;transition:transform .35s var(--kurve),border-color .3s,color .3s}
.vorhang__auf[aria-expanded="true"]{transform:rotate(180deg);
  border-color:var(--c-orange);color:var(--c-orange)}
.vorhang__unter{padding:.5rem 0 1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.vorhang__unter[hidden]{display:none}
.vorhang__unter a{display:block;padding:.55rem .15rem;border-radius:8px}
.vorhang__unter a b{display:block;font-weight:700;font-size:1.1rem}
.vorhang__unter a span{display:block;font-weight:300;font-size:1.0625rem;
  color:var(--c-text-2);line-height:1.5}
.vorhang__gruppe{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-text-2);font-weight:900;margin:1.1rem 0 .2rem}
.vorhang__themen{display:flex;flex-wrap:wrap;gap:0 1.6rem;padding:1.2rem 0 .4rem;
  margin-top:auto;font-size:.85rem;font-weight:700;letter-spacing:.05em}
.vorhang__themen a{color:#9a9a9a;padding:.8rem 0;transition:color .25s}
.vorhang__themen a:hover{color:var(--c-weiss)}
.vorhang__cta{position:sticky;bottom:0;padding:.9rem 0 1rem;margin:0 -.25rem;
  background:linear-gradient(transparent,#151515d8 45%)}

/* ---------- Knöpfe — Leitsatz: Licht antwortet auf Nähe ---------- */
@property --winkel { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes licht-umlauf { to { --winkel: 360deg } }
.knopf{display:inline-block;white-space:nowrap;background:var(--c-orange);color:#151515;font-weight:900;
  padding:.85rem 1.7rem;border:0;border-radius:8px;font-size:1rem;cursor:pointer;
  font-family:var(--font);position:relative;isolation:isolate;transition:box-shadow .3s}
.knopf::before{content:"";position:absolute;inset:-2px;border-radius:10px;z-index:-1;opacity:0;
  background:conic-gradient(from var(--winkel),transparent 0 70%,#F2950E 82%,#ffd9a0 88%,#F2950E 94%,transparent 100%);
  transition:opacity .25s}
.knopf:hover,.knopf:focus-visible{box-shadow:0 0 34px #f2950e55}
.knopf:hover::before,.knopf:focus-visible::before{opacity:1;animation:licht-umlauf 1.6s linear infinite}
@supports not (background: conic-gradient(from var(--winkel), red, blue)){
  .knopf:hover::before,.knopf:focus-visible::before{animation:none;
    background:conic-gradient(transparent 0 60%,#F2950E 80%,transparent 100%)}
}
@media (hover:none){.knopf::before{display:none}}
.knopf:active{scale:.98}
.knopf--breit{width:100%;text-align:center}
.knopf-geist{display:inline-block;font-weight:700;color:var(--c-text);padding:.85rem 1.5rem;
  border:1px solid var(--c-linie);border-radius:8px;
  background:linear-gradient(120deg,#f2950e00,#f2950e00);
  transition:border-color .3s,box-shadow .3s,background .35s}
.knopf-geist:hover,.knopf-geist:focus-visible{border-color:var(--c-orange);box-shadow:0 0 24px #f2950e2e;
  background:linear-gradient(120deg,#f2950e14,#5402a614)}
.knopf-geist:active{scale:.98}
.pfeilknopf{display:inline-flex;align-items:center;gap:.9rem;font-weight:900;color:var(--c-weiss)}
.pfeilknopf .kreis{width:56px;height:56px;border-radius:50%;border:1px solid var(--c-orange);
  display:grid;place-items:center;color:var(--c-orange);font-size:1.35rem;flex:none;
  transition:background .3s,color .3s,box-shadow .3s}
.pfeilknopf:hover .kreis{background:var(--c-orange);color:#151515;box-shadow:0 0 30px #f2950e66}

/* ---------- Sektionen, Typo ---------- */
.sektion{padding:var(--raum-sektion) clamp(1.25rem,4vw,3rem)}
.sektion__innen{max-width:var(--breite-max);margin:0 auto}
.sektion__inhalt{margin-top:2.4rem}
.kicker{color:var(--c-orange);font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
h2{font-weight:900;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.01em;margin:.5rem 0 1rem}
h3{font-weight:900;font-size:var(--fs-h3);line-height:1.2}
.blei{font-weight:300;font-size:var(--fs-lead);color:var(--c-text-2);max-width:640px}
.fading-line{height:1px;border:0;background:var(--fading-line);margin:0 auto;max-width:var(--breite-max)}
.dunkler{background:#101010}
.lichthof{position:relative;isolation:isolate}
.lichthof::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--spotlight)}

/* ---------- Bühne (Startseite) ---------- */
.buehne{position:relative;min-height:100svh;display:grid;align-items:end;
  padding:150px clamp(1.25rem,4vw,3rem) clamp(4.5rem,9vh,6.5rem);overflow:clip}
/* Sternenstaub: EINE fixe Hintergrund-Ebene für die ganze Seite */
.staub-hintergrund{position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;pointer-events:none}
/* Ebenen-System: GLASWÄNDE über dem Staub (Ansage Michael 19.08.):
   Das Logo bleibt immer im Hintergrund sichtbar; abgedunkeltes Glas
   in drei Tönungen schafft den Kontrast für weiße Schrift.
   Fenster = kein Glas, dort greift die Maus in die Partikel. */
.ebene{position:relative;background:rgba(17,17,17,.66);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05)}
.ebene--dunkel{background:rgba(11,11,11,.82);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1)}
.ebene--hell{background:rgba(30,30,30,.48);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2)}
@media(max-width:820px){
  .ebene{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(17,17,17,.78)}
  .ebene--dunkel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(11,11,11,.88)}
  .ebene--hell{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:rgba(30,30,30,.62)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ebene{background:#151515}
  .ebene--dunkel{background:#101010}
  .ebene--hell{background:#1c1c1c}
}
.fenster{background:transparent}
.fenster--statement{min-height:72vh;display:grid;place-items:center;text-align:center}
.statement{font-size:clamp(2.2rem,4.6vw,4.5rem);line-height:1.22;font-weight:300;max-width:1000px}
.statement b{font-weight:900}
.statement .licht{font-weight:900;color:var(--c-orange);text-shadow:0 0 40px #f2950e44}
.statement small{display:block;margin-top:1.4rem;font-size:1.05rem;color:var(--c-text-2);font-weight:400}
.zitat{max-width:900px;margin:0 auto;text-align:center}
.zitat blockquote{font-size:var(--fs-h2);font-weight:300;line-height:1.3;font-style:italic}
.zitat blockquote b{font-weight:900;font-style:normal;color:var(--c-orange)}
.zitat figcaption{margin-top:1.6rem;color:var(--c-text-2)}
.zitat figcaption b{color:var(--c-text)}
.buehne__licht{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 68% 38%,rgba(242,149,14,.12),rgba(84,2,166,.13) 48%,transparent 74%)}
.buehne__block{max-width:1050px}
.vorzeile{font-weight:300;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--c-text-2);margin-bottom:1rem}
.riesig{font-size:var(--fs-riesig);line-height:1;letter-spacing:-.02em;text-transform:uppercase;font-weight:900}
.riesig .duenn{font-weight:300}
.riesig .licht{color:var(--c-orange);text-shadow:0 0 44px #f2950e55}
.buehne__unter{display:flex;gap:2.4rem;align-items:center;margin-top:2.2rem;flex-wrap:wrap}
.buehne__unter p{max-width:440px;font-weight:300;color:var(--c-text-2)}
.laufband{position:absolute;left:0;right:0;bottom:56px;padding:.85rem 0;border-top:1px solid var(--c-linie);
  overflow:hidden;white-space:nowrap;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:.78rem;color:var(--c-text-2);background:#15151580;backdrop-filter:blur(6px)}
.laufband__spur{display:inline-block;padding-left:100%;animation:lauf 30s linear infinite}
.laufband em{font-style:normal;color:var(--c-orange);margin:0 1.5rem}
@keyframes lauf{to{transform:translateX(-100%)}}

/* ---------- Karten ---------- */
.karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
@media(max-width:900px){.karten{grid-template-columns:minmax(0,1fr)}}
.fenster .karte{-webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1)}
@media(max-width:820px){.fenster .karte{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.karte{background:rgba(30,30,30,.72);border:1px solid var(--c-linie);border-radius:var(--radius);
  padding:2rem 1.8rem;position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .35s var(--kurve),border-color .35s}
.karte:hover{transform:translateY(-4px);border-color:#f2950e66}
.chip-glas{display:inline-block;padding:.3rem .8rem;border-radius:999px;
  background:rgba(242,149,14,.08);border:1px solid rgba(242,149,14,.35);
  box-shadow:0 0 14px #f2950e22;font-weight:900;color:var(--c-orange);
  font-size:.85rem;letter-spacing:.1em}
.karte__x{font-weight:900;color:var(--c-orange);font-size:.9rem;letter-spacing:.1em}
.karte h3{margin:.5rem 0 .7rem;font-size:var(--fs-h3)}
.karte p{color:var(--c-text-2);font-size:.98rem;flex:1}
.karte .mehr{display:inline-block;margin-top:1.2rem;font-weight:700;color:var(--c-orange);font-size:var(--fs-klein);letter-spacing:.02em}

/* ---------- Werkschau-Stapel ---------- */
.werkschau{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:980px){.werkschau{grid-template-columns:minmax(0,1fr)}.werkschau>*{min-width:0}}
.werke{position:relative;aspect-ratio:4/3;min-height:320px}
.werk{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:var(--c-flaeche-2);
  border:1px solid var(--c-linie);box-shadow:0 30px 80px #00000088;
  transform:translateX(var(--dx,0)) rotate(var(--rot,0deg)) translateY(var(--hub,0)) scale(var(--gr,1));
  transition:transform .7s var(--kurve),opacity .5s;opacity:var(--deck,1)}
.werk img{width:100%;height:100%;object-fit:cover;object-position:top}
.werk:not([data-lage="0"]) .werk__schild{opacity:0}
.werk__schild{transition:opacity .4s;position:absolute;left:1rem;bottom:1rem;background:#151515e8;border:1px solid var(--c-linie);
  border-radius:6px;padding:.5rem .9rem;font-size:.82rem;font-weight:700}
.werk__schild em{font-style:normal;color:var(--c-orange);display:block;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.werk[data-lage="0"]{--rot:0deg;--hub:0px;--dx:0px;--gr:1;--deck:1;z-index:3}
.werk[data-lage="1"]{--rot:2.5deg;--hub:20px;--dx:26px;--gr:.95;--deck:.6;z-index:2}
.werk[data-lage="2"]{--rot:-2deg;--hub:38px;--dx:-22px;--gr:.9;--deck:.35;z-index:1}
.werk[data-lage="3"]{--rot:4deg;--hub:50px;--dx:0px;--gr:.86;--deck:0;z-index:0}
.werke__nav{position:absolute;right:0;bottom:-3.2rem;display:flex;gap:.5rem}
.werke__nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--c-linie);
  background:none;color:var(--c-text);font-size:1.05rem;cursor:pointer;transition:border-color .3s,background .3s}
.werke__nav button:hover,.werke__nav button:focus-visible{border-color:var(--c-orange);background:#f2950e22}
.werke__nav button:active{scale:.96}

/* ---------- Namenband + Logowall ---------- */
.namenband{border-top:1px solid var(--c-linie);border-bottom:1px solid var(--c-linie);
  padding:1.1rem 0;overflow:hidden;white-space:nowrap}
.namenband__spur{display:inline-block;padding-left:100%;animation:lauf 36s linear infinite;
  font-weight:300;font-size:1.05rem;color:var(--c-text-2);letter-spacing:.06em}
.namenband__spur b{font-weight:900;color:var(--c-text)}
.namenband__spur span{margin:0 1.6rem;color:var(--c-orange)}
.logowall__raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.logowall--zu .logo-kachel:nth-child(n+13){display:none}
.logo-kachel{background:#fdfdfd;border-radius:10px;min-height:86px;display:grid;place-items:center;
  padding:1rem;position:relative;transition:transform .3s var(--kurve)}
.logo-kachel:hover{transform:translateY(-3px)}
.logo-kachel img{max-height:44px;width:auto;max-width:82%;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logo-kachel:hover img{filter:none;opacity:1}
.logo-kachel--dunkel{background:var(--c-flaeche-2);border:1px solid var(--c-linie)}
.logo-kachel__label{position:absolute;left:-9999px}
.logowall__mehr{margin-top:1.4rem;text-align:center}

/* ---------- Kennzahlen ---------- */
.kennzahlen{display:flex;gap:clamp(1.5rem,5vw,4.5rem);flex-wrap:wrap}
.kennzahl b{display:block;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;color:var(--c-weiss)}
.kennzahl b .einheit{color:var(--c-weiss)}
.kennzahl small{color:var(--c-text-2);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
@media(max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.team figure{text-align:center}
.team img{border-radius:var(--radius);filter:grayscale(.3);transition:filter .3s}
.team figure:hover img{filter:none}
.team figcaption{margin-top:.8rem}
.team b{display:block;font-weight:900}
.team small{color:var(--c-text-2)}

/* ---------- Kontakt-Schluss + Fuß ---------- */
.kontakt-schluss{padding:var(--raum-sektion) clamp(1.25rem,4vw,3rem);position:relative;isolation:isolate;
  background:rgba(11,11,11,.84);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  border-top:1px solid rgba(255,255,255,.05)}
.kontakt-schluss::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 50% 45% at 14% 100%,rgba(242,149,14,.13),rgba(84,2,166,.09) 50%,transparent 72%)}
.kontakt-schluss__innen{max-width:var(--breite-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
@media(max-width:900px){.kontakt-schluss__innen{grid-template-columns:minmax(0,1fr)}}
.kontakt-schluss h2{font-size:var(--fs-h2)}
.kontakt-schluss__text p{color:var(--c-text-2);max-width:460px}
.kontakt-schluss__direkt{margin-top:2rem}
.kontakt-schluss__direkt>p{margin:0 0 .6rem}
.direkt-hinweis{color:var(--c-text-2);font-size:.9rem;margin-top:.8rem}
/* Direkter Draht (24.09.2026): Telefon + sales@/support@/bewerbung@ mit Symbol — Kontaktbereich und Fuß */
.direkt-liste{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.direkt-liste li{display:flex;gap:.7rem;align-items:center}
.direkt-liste__ikon{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:var(--c-orange)}
.direkt-liste__ikon svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.direkt-liste__text{display:grid;line-height:1.35;min-width:0}
.direkt-liste__text b{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-2);font-weight:700}
.direkt-liste__text a{font-weight:700;color:var(--c-orange);overflow-wrap:anywhere}
.fuss .direkt-liste{margin-top:.8rem;gap:.4rem}
.fuss .direkt-liste__ikon{width:1.9rem;height:1.9rem;background:rgba(255,255,255,.05)}
.fuss .direkt-liste__ikon svg{width:.9rem;height:.9rem}
.fuss .direkt-liste__text a{color:var(--c-text-2);font-weight:600;line-height:1.4}
.fuss .direkt-liste__text a:hover{color:var(--c-weiss)}
.kontakt-schluss__direkt img{border-radius:50%;width:72px;height:72px;object-fit:cover}
.kontakt-schluss__direkt a{color:var(--c-orange);font-weight:700}
.kontakt-schluss__formular label{display:block;margin-bottom:1rem;font-weight:700;font-size:.9rem}
.kontakt-schluss__formular input,.kontakt-schluss__formular textarea{display:block;width:100%;
  margin-top:.35rem;background:rgba(34,34,34,.7);border:1px solid var(--c-linie);border-radius:8px;
  color:var(--c-text);font-family:var(--font);font-size:1rem;padding:.8rem .9rem;
  transition:border-color .25s}
.kontakt-schluss__formular input:focus,.kontakt-schluss__formular textarea:focus{outline:none;border-color:var(--c-orange)}
.formular-hinweis{font-size:.8rem;color:var(--c-text-2);margin-top:.8rem}
.formular-hinweis a{text-decoration:underline}
.fuss{border-top:1px solid var(--c-linie);padding:3.5rem clamp(1.25rem,4vw,3rem) 2rem;
  background:rgba(9,9,9,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.fuss__spalten{max-width:var(--breite-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
@media(max-width:900px){.fuss__spalten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fuss__spalten>div:last-child{grid-column:1/-1}}
.fuss h4{font-weight:900;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.fuss a{color:var(--c-text-2);font-size:.95rem;line-height:2;transition:color .25s}
.fuss a:hover{color:var(--c-weiss)}
.fuss address{color:var(--c-text-2);font-size:.95rem;line-height:1.9}
.fuss__zeile{max-width:var(--breite-max);margin:2.5rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--c-linie);display:flex;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;color:var(--c-text-2);font-size:.85rem}
.fuss__zeile a:hover{color:var(--c-weiss)}

/* Zeiger: seit 21.09.2026 gilt überall der Systemzeiger des Geräts (Ansage
   Michael — der Leucht-Zeiger machte auf älteren Geräten Probleme und fehlte
   über der Dialog-Bühne). Nie wieder cursor:none setzen. */

/* ---------- Sprechleiste: die sprechende Website ---------- */
/* body-Polster für die Sprechleiste entfällt seit 21.09.2026 (Sprechleiste entfernt) */
.sprechleiste{position:fixed;left:0;right:0;bottom:0;z-index:110;height:56px;
  display:flex;align-items:center;justify-content:center;gap:1rem;
  background:rgba(10,10,10,.78);border-top:1px solid rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.sprech-status{font-size:.85rem;font-weight:700;letter-spacing:.06em;color:var(--c-text-2);
  position:absolute;left:50%;translate:calc(-50% - 170px) 0;white-space:nowrap}
.sprech-hinweis{font-size:.68rem;color:#777;position:absolute;right:1rem;max-width:38vw;
  text-align:right}
@media(max-width:820px){
  .sprech-status{position:static;translate:none;order:1;font-size:.78rem}
  .sprech-hinweis{display:none}
  .sprechleiste{justify-content:flex-start;padding:0 1rem;gap:.9rem}
}
.sprech-orb{position:relative;width:78px;height:78px;margin-top:-30px;flex:none;order:0;
  border-radius:50%;border:0;cursor:pointer;color:#151515;
  display:grid;place-items:center;scale:var(--pegel,1);
  transition:scale .12s linear;
  background:
    radial-gradient(circle at 32% 30%, #ffd9a0 0 8%, transparent 42%),
    conic-gradient(from var(--winkel,0deg), #F2950E, #b95fd6 35%, #5402A6 55%, #F2950E 78%, #F2950E);
  box-shadow:0 10px 40px #000a, 0 0 34px #f2950e44, inset 0 0 22px #00000055;
  animation:orb-fluss 7s linear infinite, orb-schweben 4.5s ease-in-out infinite}
@keyframes orb-fluss{to{--winkel:360deg}}
@keyframes orb-schweben{0%,100%{translate:0 0}50%{translate:0 -4px}}
.sprech-orb svg{filter:drop-shadow(0 1px 2px #0008)}
.sprech-orb:active{scale:.95}
.sprech-orb--hoert{animation:orb-fluss 1.4s linear infinite, orb-puls 1s ease-in-out infinite}
@keyframes orb-puls{0%,100%{box-shadow:0 10px 40px #000a,0 0 30px #f2950e66}50%{box-shadow:0 10px 40px #000a,0 0 60px #f2950eaa}}
.sprech-orb--denkt{animation:orb-fluss .9s linear infinite, orb-schweben 4.5s ease-in-out infinite}
.sprech-orb--spricht{animation:orb-fluss 2.4s linear infinite, orb-atmen 1.1s ease-in-out infinite}
@keyframes orb-atmen{0%,100%{scale:1}50%{scale:1.06}}
@supports not (background: conic-gradient(from var(--winkel), red, blue)){
  .sprech-orb{background:radial-gradient(circle at 32% 30%,#ffd9a0,#F2950E 45%,#5402A6);animation:orb-schweben 4.5s ease-in-out infinite}
}

.chat-fahne{position:fixed;right:0;top:52%;z-index:105;width:44px;height:64px;
  border:1px solid rgba(255,255,255,.09);border-right:0;border-radius:12px 0 0 12px;
  background:rgba(12,12,12,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--c-orange);cursor:pointer;display:grid;place-items:center;
  transition:width .25s var(--kurve),color .25s}
.chat-fahne:hover,.chat-fahne:focus-visible{width:52px;color:#ffd9a0}
.chatpanel{position:fixed;right:0;top:0;bottom:56px;z-index:108;width:min(400px,100vw);
  background:rgba(11,11,11,.9);-webkit-backdrop-filter:blur(20px) saturate(1.1);
  backdrop-filter:blur(20px) saturate(1.1);border-left:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--kurve)}
.chatpanel--offen{transform:translateX(0)}
.chatpanel__kopf{display:flex;justify-content:space-between;align-items:center;
  padding:1rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.07)}
.chatpanel__kopf h2{font-size:1rem;display:flex;gap:.55rem;align-items:center}
.chatpanel__kopf h2::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--c-orange);box-shadow:0 0 10px var(--c-orange);
  animation:orb-atmen 2.2s ease-in-out infinite}
.chatpanel__kopf button{background:none;border:0;color:var(--c-text-2);font-size:1.5rem;
  cursor:pointer;width:44px;height:44px}
.chatpanel__verlauf{flex:1;overflow-y:auto;padding:1.1rem;display:flex;
  flex-direction:column;gap:.7rem}
.chatpanel__nachricht{max-width:88%;padding:.7rem 1rem;border-radius:12px;
  font-size:.95rem;line-height:1.5}
.chatpanel__nachricht--aura{background:rgba(34,34,34,.85);border:1px solid rgba(255,255,255,.06);
  align-self:flex-start;border-bottom-left-radius:4px}
.chatpanel__nachricht--besucher{background:#f2950e22;border:1px solid #f2950e44;
  align-self:flex-end;border-bottom-right-radius:4px}
.chatpanel__nachricht--hinweis{align-self:center;color:var(--c-text-2);font-size:.8rem}
.chatpanel__eingabe{display:flex;gap:.6rem;padding:1rem;border-top:1px solid rgba(255,255,255,.07)}
.chatpanel__eingabe input{flex:1;background:rgba(34,34,34,.7);border:1px solid var(--c-linie);
  border-radius:8px;color:var(--c-text);font-family:var(--font);font-size:1rem;padding:.7rem .9rem}
.chatpanel__eingabe input:focus{outline:none;border-color:var(--c-orange)}
.chatpanel__eingabe .knopf{padding:.7rem 1.1rem}
@media(max-width:480px){.chatpanel__eingabe{padding-left:6rem}}
.wird-gezeigt{outline:2px solid #f2950e88;outline-offset:8px;border-radius:4px;
  transition:outline-color 1.2s}
@media (prefers-reduced-motion: reduce){
  .sprech-orb,.sprech-orb--hoert,.sprech-orb--denkt,.sprech-orb--spricht{animation:none}
  .chatpanel{transition:none}
}

/* ---------- KI-Chat (Aura) [Altbestand Attrappe — ungenutzt] ---------- */
.chat-knopf{position:fixed;right:1.4rem;bottom:1.4rem;z-index:90;width:58px;height:58px;
  border-radius:50%;border:1px solid #f2950e88;background:#151515f0;color:var(--c-orange);
  font-size:1.5rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 8px 30px #000a, 0 0 22px #f2950e2b;transition:transform .3s var(--kurve),box-shadow .3s}
.chat-knopf:hover{transform:translateY(-2px);box-shadow:0 10px 34px #000a,0 0 30px #f2950e55}
.chat-panel{position:fixed;right:1.4rem;bottom:5.6rem;z-index:95;width:min(360px,calc(100vw - 2.8rem));
  background:var(--c-flaeche-2);border:1px solid var(--c-linie);border-radius:var(--radius);
  box-shadow:0 30px 80px #000c;padding:1.4rem;transform-origin:bottom right}
.chat-panel[hidden]{display:none}
.chat-panel h3{font-size:1.05rem;display:flex;gap:.6rem;align-items:center}
.chat-panel h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-orange);
  box-shadow:0 0 10px var(--c-orange)}
.chat-panel p{color:var(--c-text-2);font-size:.92rem;margin:.7rem 0 1rem}
.chat-panel .knopf{width:100%;text-align:center;font-size:.95rem}

/* ---------- Modul-Bausteine (29.08.) ---------- */
.sektion--schmal{padding-top:calc(var(--raum-sektion)*.5);padding-bottom:calc(var(--raum-sektion)*.5)}
.sektion__innen--eng{max-width:860px}
.blei--breit{max-width:760px}
.hero-unter{padding:170px clamp(1.25rem,4vw,3rem) clamp(3.5rem,7vh,5rem)}
.hero-unter__titel{font-weight:900;font-size:var(--fs-hero);line-height:1.05;letter-spacing:-.015em;max-width:900px;margin:.4rem 0 1.2rem}
.hero-unter__titel em{font-style:normal;color:var(--c-orange);text-shadow:0 0 34px #f2950e44}
.branchen-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media(max-width:900px){.branchen-chips{grid-template-columns:minmax(0,1fr)}}
.branchen-chip{display:block;border:1px solid var(--c-linie);border-radius:var(--radius);
  padding:1.1rem 1.3rem;background:rgba(30,30,30,.6);transition:border-color .3s,transform .3s var(--kurve)}
.branchen-chip:hover{border-color:#f2950e66;transform:translateY(-3px)}
.branchen-chip b{display:block;font-size:1.02rem}
.branchen-chip small{color:var(--c-text-2);font-size:.82rem}
.faq__eintrag{border-bottom:1px solid var(--c-linie)}
.faq__eintrag summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding:1.1rem 2.2rem 1.1rem 0;
  list-style:none;position:relative;min-height:44px}
.faq__eintrag summary::after{content:"×";position:absolute;right:.2rem;top:50%;translate:0 -50%;
  color:var(--c-orange);font-weight:900;font-size:1.2rem;rotate:45deg;transition:rotate .3s var(--kurve)}
.faq__eintrag[open] summary::after{rotate:0deg}
.faq__eintrag summary::-webkit-details-marker{display:none}
.faq__eintrag p{color:var(--c-text-2);padding:0 0 1.2rem;max-width:720px}
.cta-trenner{position:relative;min-height:clamp(340px,48vh,520px);display:grid;place-items:center;
  overflow:clip;isolation:isolate;text-align:center;padding:3rem clamp(1.25rem,4vw,3rem)}
.cta-trenner__medium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta-trenner::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#151515f0,#151515a8 30%,#151515a8 70%,#151515f0)}
.cta-trenner__scheibe{max-width:760px;background:rgba(11,11,11,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:2.4rem clamp(1.4rem,4vw,3rem)}
.cta-trenner h2{font-size:var(--fs-h2)}
.cta-trenner p{color:var(--c-text-2);margin:.8rem 0 0}
.cta-trenner .knopf{margin-top:.8rem}
.video-zeugnis video{box-shadow:0 30px 80px #00000088;border:1px solid var(--c-linie)}
/* Abnahme-Rahmen der Modul-Schauseite */
.abnahme{border-top:2px dashed #f2950e55;margin-top:4rem;padding:1rem clamp(1.25rem,4vw,3rem) 0}
.abnahme code{background:#f2950e1a;border:1px solid #f2950e44;border-radius:6px;
  padding:.2rem .7rem;font-weight:700;color:var(--c-orange);font-size:.85rem}
.abnahme p{color:var(--c-text-2);font-size:.88rem;margin-top:.5rem;max-width:900px}

/* ---------- Bewegungs-Weiche ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal]{opacity:1!important;transform:none!important}
  .laufband__spur,.namenband__spur{animation:none;padding-left:0}
  .werk{transition:none}
  .kopf__nav>ul>li>a{transition:color .25s}
  .vorhang__auf{transition:none}
}

/* Vier-Spalten-Karten (Schritt-Folgen): mobil 1, ab 700px 2, ab 1100px 4 */
.karten--vier{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.karten--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.karten--vier{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Pro-Übergang: schlanker, dunkler Block vor der FAQ / am Lösungs-Ende */
.pro-uebergang .sektion__innen--eng{text-align:left}

/* Kennzahlen als Glas-Chips im Fenster-Kapitel „550+" (Erlebnis-Konzept) */
.fenster .kennzahl{background:rgba(20,20,20,.55);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.16);border-radius:var(--radius);padding:1rem 1.4rem}
@media (min-width:821px){
  .fenster .kennzahl{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}

/* Scroll-Kino: Sticky-Bühne, Frames am Scroll, Glas-Panel darüber */
.kino{position:relative;height:260vh}
.kino__buehne{position:sticky;top:0;height:100svh;overflow:clip;display:grid;
  align-items:end;justify-items:start}
.kino__poster,.kino__leinwand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kino__panel{position:relative;z-index:2;max-width:560px;
  margin:0 clamp(1.2rem,6vw,6rem) clamp(1.6rem,10vh,7rem);
  padding:clamp(1.4rem,3vw,2.4rem);border-radius:var(--radius);
  background:rgba(15,15,15,.62);border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.18)}
@media (min-width:821px){
  .kino__panel{-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1)}
}
.kino__panel h2{font-size:clamp(1.5rem,3.2vw,2.4rem)}
.kino__panel p{color:var(--c-text-2);margin-top:.7rem}
/* reduced-motion/statisch: kein Scrub-Weg, ein Bild in voller Höhe */
@media (prefers-reduced-motion: reduce){ .kino{height:100svh} }
body.statisch .kino{height:100svh}

/* Werkschau als Scroll-Stapel (31.08.): Bühne klebt, Projekte gehen durch */
.werkschau-kapitel{min-height:calc(100svh + (var(--werke-n,4) - 1)*60vh);padding:0}
.werkschau-kleber{position:sticky;top:0;min-height:100svh;display:grid;
  align-items:center;padding:var(--raum-sektion) 0}
.werk{cursor:pointer;display:block}
.aktionen--luft{margin-top:2rem;gap:1.2rem}
.werke__stand{margin-top:1.6rem;font-weight:900;letter-spacing:.14em;color:var(--c-text-2)}
.werke__stand::after{content:"";display:block;width:64px;height:2px;margin-top:.5rem;
  background:linear-gradient(90deg,var(--c-orange),transparent)}
body.statisch .werkschau-kapitel{min-height:auto}
body.statisch .werkschau-kleber{position:static}

/* Verweis-Varianten: 1 Box (Text links) · 2 Boxen (groß) · 4 Boxen */
.verweis-eins{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media(max-width:900px){.verweis-eins{grid-template-columns:minmax(0,1fr)}}
.karte--gross{padding:2.4rem}
.karte--gross h3{font-size:1.45rem}
.karten--zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
@media(max-width:800px){.karten--zwei{grid-template-columns:minmax(0,1fr)}}
.karten--zwei .karte{padding:2rem}

/* Kundenstimmen-Raster (2–3 nebeneinander) */
.video-raster{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:1.6rem}
@media(max-width:900px){.video-raster{grid-template-columns:minmax(0,1fr)}}
.video-raster figcaption{margin-top:.8rem}
.zeugnis-zitat{color:var(--c-text-2);font-style:italic;margin-bottom:.4rem}

/* Logowand (michael-selck-Aufbau, dunkle Welt): klebende Textspalte +
   Logo-Raster, monochrom → Farbe bei Hover/Fokus */
.logowand{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media(max-width:980px){.logowand{grid-template-columns:minmax(0,1fr)}}
.logowand__intro{position:sticky;top:clamp(150px,24vh,240px)}   /* Ansage 24.09.: Text hält früher an, saß zu weit oben (vorher 110px) */
@media(max-width:980px){.logowand__intro{position:static}}
.logowand__raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;list-style:none;margin:0;padding:0}
@media(max-width:1100px){.logowand__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.logowand__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wand-kachel{position:relative;display:grid;place-items:center;min-height:96px;
  padding:1rem;border-radius:10px;border:1px solid var(--c-linie);
  background:rgba(20,20,20,.55);transition:transform .3s var(--kurve),background .3s,border-color .3s}
.wand-kachel--hell{background:#f3f2ee;border-color:#f3f2ee}
.wand-kachel img{max-width:82%;max-height:52px;object-fit:contain;
  filter:grayscale(1) opacity(.72);transition:filter .35s}
.wand-kachel--hell img{filter:grayscale(1) opacity(.8)}
.wand-kachel:hover,.wand-kachel:focus-within{transform:translateY(-3px);border-color:#f2950e66}
.wand-kachel:hover img,.wand-kachel:focus-within img{filter:none}
.wand-kachel--glas img{filter:grayscale(1) invert(.08) brightness(1.9) opacity(.75)}
.wand-kachel--glas:hover img{filter:none;background:#f3f2ee;border-radius:4px;padding:.2rem}
.wand-kachel__name{position:absolute;inset:auto 0 0 0;padding:.2rem .5rem;font-size:.62rem;
  letter-spacing:.04em;color:var(--c-text-2);opacity:0;transition:opacity .3s;text-align:center;
  background:linear-gradient(transparent,#151515e8);border-radius:0 0 10px 10px}
.wand-kachel--hell .wand-kachel__name{color:#333;background:linear-gradient(transparent,#f3f2eee8)}
.wand-kachel:hover .wand-kachel__name,.wand-kachel:focus-within .wand-kachel__name{opacity:1}
.wand-kachel--text{background:rgba(20,20,20,.4)}
.wand-kachel--text span{font-weight:700;font-size:.82rem;color:var(--c-text-2);text-align:center}

/* Lösungs-Übergang: Ziel-Zeilen */
.uebergang-ziele{display:grid;gap:.8rem;margin-top:2rem}
.uebergang-ziel{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;
  border:1px solid var(--c-linie);border-radius:10px;text-decoration:none;color:var(--c-text);
  transition:border-color .3s,background .3s,transform .3s var(--kurve)}
.uebergang-ziel:hover,.uebergang-ziel:focus-visible{border-color:#f2950e66;background:#f2950e0d;transform:translateX(4px)}
.uebergang-ziel b{flex:1}

/* Werk mit CSS-Browser-Rahmen: echte Website-Screenshots, gut erkennbar */
.werk--browser{display:grid;grid-template-rows:auto 1fr}
.werk--browser img{height:100%;position:relative}
.werk__kopf{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;
  background:#1d1d1d;border-bottom:1px solid var(--c-linie)}
.werk__kopf i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}
.werk__kopf i:first-child{background:#f2950e88}
.werk__kopf b{margin-left:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:var(--c-text-2);background:#00000055;border-radius:5px;padding:.15rem .6rem}

/* Kontakt-Klickstrecke: Anliegen-Chips, Feld-Reihe, Termin-Auswahl */
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:600px){.feld-reihe{grid-template-columns:1fr}}
.chips-titel{font-weight:700;margin:.6rem 0 .4rem;font-size:.92rem}
.feld-optional{font-weight:400;color:var(--c-text-2);font-size:.82rem}
.anliegen-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.chip-wahl{position:relative;cursor:pointer}
.chip-wahl input{position:absolute;opacity:0;pointer-events:none}
.chip-wahl span,.chip-wahl--knopf span{display:inline-flex;align-items:center;min-height:40px;
  padding:.3rem .9rem;border-radius:999px;border:1px solid rgba(242,149,14,.35);
  background:rgba(242,149,14,.08);font-size:.88rem;font-weight:700;
  transition:background .25s,border-color .25s,box-shadow .25s}
.chip-wahl input:checked+span,.chip-wahl--knopf[aria-pressed="true"] span{
  border-color:var(--c-orange);background:rgba(242,149,14,.22);box-shadow:0 0 14px #f2950e33}
.chip-wahl input:focus-visible+span{outline:2px solid var(--c-orange);outline-offset:3px}
.chip-wahl--knopf{border:0;background:none;padding:0;color:var(--c-text)}
.formular-wege{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:.6rem}
/* hidden-Attribut schlägt die display-Regeln der Knöpfe/Schritte (Falle „CSS display hebt hidden auf“, 24.09.2026):
   „Termin direkt wählen“ war trotz hidden sichtbar, weil .knopf{display:inline-block} gewann. */
.kontakt-schluss__formular [hidden]{display:none}
.kontakt-schluss__formular fieldset{border:0;margin:0;padding:0;min-width:0}

/* Referenz-Katalog: Parallel-Filter + Kachel-Raster */
.ref-filter{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.7rem}
.ref-filter__titel{font-size:.78rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-text-2);min-width:72px}
.ref-zaehler{margin:.8rem 0 1.4rem;color:var(--c-text-2);font-weight:700}
.ref-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;
  list-style:none;margin:0;padding:0}
@media(max-width:1100px){.ref-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.ref-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ref-raster{grid-template-columns:minmax(0,1fr)}}
.ref-kachel{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--c-linie);
  background:var(--c-flaeche-2);aspect-ratio:4/3;transition:transform .3s var(--kurve),border-color .3s}
.ref-kachel:hover{transform:translateY(-3px);border-color:#f2950e55}
.ref-kachel img{width:100%;height:100%;object-fit:cover;display:block}
.ref-kachel__titel{position:absolute;inset:auto 0 0 0;padding:1.6rem .8rem .6rem;font-size:.82rem;
  font-weight:700;background:linear-gradient(transparent,#0f0f0fe8 45%);line-height:1.3}
.ref-kachel__meta{position:absolute;inset:auto 0 0 0;padding:0 .8rem .5rem;font-size:.68rem;
  color:var(--c-text-2);transform:translateY(2.2rem);transition:transform .3s;letter-spacing:.04em}
.ref-kachel:hover .ref-kachel__meta,.ref-kachel:focus-within .ref-kachel__meta{transform:none}
.ref-kachel:hover .ref-kachel__titel,.ref-kachel:focus-within .ref-kachel__titel{padding-bottom:2rem}
.ref-kachel--text{display:grid;place-items:center;text-align:center;padding:1rem}
.ref-kachel--text .ref-kachel__titel{position:static;background:none;padding:0;font-size:.9rem}
.ref-kachel--text .ref-kachel__meta{position:static;transform:none;padding:.4rem 0 0}
.ref-kachel[hidden]{display:none}
/* Paket B2 (23.09.): ausgewählte Kacheln sind Links auf ihre Detailseite */
.ref-kachel a{display:block;height:100%;color:inherit}
.ref-kachel--text a{display:grid;place-items:center;height:100%}
.ref-kachel--detail .ref-kachel__titel::after{content:" →";color:var(--c-orange);font-weight:900}

/* Kino-Kapitel-Boxen: Aussagen ziehen an Haltepunkten über den Film */
.kino__box{position:absolute;left:clamp(1.2rem,6vw,6rem);bottom:clamp(1.6rem,12vh,8rem);
  z-index:2;max-width:440px;padding:clamp(1.2rem,2.4vw,1.8rem);border-radius:var(--radius);
  background:rgba(15,15,15,.6);border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.18);opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--kurve),transform .5s var(--kurve);pointer-events:none}
.kino__box--an{opacity:1;transform:none}
.kino__box h3{font-size:clamp(1.2rem,2.4vw,1.7rem)}
.kino__box p{color:var(--c-text-2);margin-top:.5rem;font-size:.95rem}
@media (min-width:821px){
  .kino__box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.kino__panel--spaet{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--kurve),transform .5s var(--kurve)}
.kino__panel--spaet.kino__panel--an{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .kino__box{display:none}
  .kino__panel--spaet{opacity:1;transform:none}
}
body.statisch .kino__box{display:none}
body.statisch .kino__panel--spaet{opacity:1;transform:none}

/* Verwandlungs-Kapitel (Ansage 01.09.): großzügige Höhe — die Form soll
   stehen bleiben, bevor sie sich zurückverwandelt. Mobil: Inhalt unten,
   die Form lebt im oberen Bereich. */
section[data-staub-form]{min-height:96svh;display:grid;align-content:center}
@media(max-width:820px){
  section[data-staub-form]{min-height:100svh;align-content:end;padding-bottom:9svh}
}
/* Kennzahlen rücken links, die 550+ formt sich rechts daneben */
section.kennzahlen-kapitel[data-staub-form]{align-content:end;padding-bottom:10svh}
.kennzahlen-kapitel .sektion__innen{max-width:var(--breite-max)}
.kennzahlen-kapitel .kennzahlen{max-width:700px;gap:1rem;flex-wrap:nowrap}
@media(max-width:820px){.kennzahlen-kapitel .kennzahlen{flex-direction:column;align-items:flex-start;gap:.9rem}}

/* Schauseiten-Lücken: Mut zur Lücke zwischen den Varianten */
.schau-luft{min-height:46vh}

/* Werkschau: neue Karten fliegen von rechts ein und legen sich auf den Stapel */
.werkschau-kapitel{overflow:clip}
.werk[data-lage="warte"]{--dx:150%;--rot:14deg;--hub:-30px;--gr:1;--deck:1;z-index:6}

/* Logowand v2 (Ansage 01.09.): einheitliche dunkle Glaskacheln im
   Fenster — die Partikel scheinen durch, jedes Logo hell reduziert,
   Originalfarbe erst bei Berührung */
.wand-kachel,.wand-kachel--hell,.wand-kachel--glas,.wand-kachel--text{
  background:rgba(15,15,15,.55);border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.16)}
@media (min-width:821px){
  .wand-kachel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
.wand-kachel img,.wand-kachel--hell img,.wand-kachel--glas img{
  filter:grayscale(1) brightness(0) invert(1) opacity(.82)}
.wand-kachel:hover img,.wand-kachel:focus-within img,
.wand-kachel--glas:hover img{filter:none;background:#f3f2ee;border-radius:4px;padding:.2rem}
.wand-kachel__name,.wand-kachel--hell .wand-kachel__name{
  color:var(--c-text-2);background:linear-gradient(transparent,#0f0f0fe8)}
.wand-kachel[hidden]{display:none}
/* Logowand-Klappmechanik (Standardmodul 24.09.2026): eingeklappt begrenzt JS das Raster per max-height
   (gemessene Reihen) und blendet die angeschnittene Reihe mit einer Verlaufsmaske aus; darüber ein
   transparenter Blur ohne Farbe (kein Balken). Aktionen liegen eingeklappt als Overlay auf dem Auslauf. */
.logowand__wand{position:relative;min-width:0}
.logowand__fenster{position:relative}
.logowand--zu .logowand__raster{overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--wand-fest,88%),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 var(--wand-fest,88%),transparent 100%)}
.logowand__auslauf{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none;opacity:0;transition:opacity .3s}
.logowand--zu .logowand__auslauf{opacity:1;
  -webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 46%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 46%,#000 100%)}
.logowand__aktionen{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:clamp(1.6rem,3vw,2.6rem);text-align:center}
.logowand--zu .logowand__aktionen{position:absolute;left:0;right:0;bottom:clamp(1rem,3vh,2rem);margin-top:0;z-index:3}
.logowand--zu .logowand__zaehler{display:none}
.logowand__zaehler{margin:0;font-size:.78rem;letter-spacing:.04em;color:var(--c-text-2)}
.logowand__knopf{display:inline-flex;align-items:center;gap:.6rem;min-height:44px}
.logowand__winkel{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--kurve)}
.logowand__knopf[aria-expanded="true"] .logowand__winkel{transform:translateY(1px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.logowand__auslauf,.logowand__winkel{transition:none}}

/* Datenschutz-Opt-in */
.datenschutz-haken{display:flex;gap:.6rem;align-items:flex-start;margin:.8rem 0 .2rem;cursor:pointer}
.datenschutz-haken input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--c-orange);flex:none}
.datenschutz-haken span{font-size:.8rem;color:var(--c-text-2);line-height:1.5}
.datenschutz-haken a{color:var(--c-text)}

/* Logowand v2.1: Invert-Trick statt Vollweiß — dunkle Logos (auch mit
   gefüllten Flächen und weißem PNG-Grund) werden hell, der weiße Grund
   verschwindet auf der dunklen Kachel; bereits helle Logos bleiben hell */
.wand-kachel img,.wand-kachel--hell img,.wand-kachel--glas img{
  filter:grayscale(1) invert(1) brightness(1.35) opacity(.88)}
.wand-kachel--hell-logo img{filter:grayscale(1) brightness(1.25) opacity(.88)}
.wand-kachel:hover img,.wand-kachel:focus-within img{filter:none;background:#f3f2ee;border-radius:4px;padding:.2rem}

/* Team-Karten */
.team-karte{text-align:center;padding-top:1.6rem}
.team-karte img{width:132px;height:132px;object-fit:cover;border-radius:50%;
  margin:0 auto .9rem;border:2px solid rgba(255,255,255,.12)}
.team-karte h3{font-size:1.05rem}
.team-karte p{color:var(--c-text-2);font-size:.85rem}

/* Rechtstexte */
.rechtstext{margin-top:1.6rem;max-width:70ch}
.rechtstext h2{font-size:1.15rem;margin:1.8rem 0 .5rem}
.rechtstext p{color:var(--c-text-2);margin:.5rem 0;line-height:1.7}
.rechtstext a{color:var(--c-text)}

/* ---------- Nachtbau-Module 23.09.2026: ablauf + bild-text (Modul-Schau) ---------- */
/* ablauf: nummerierte Schritte im Chip-Vokabular; mobil gestapelt, ab 900px in Spalten (max. 4) */
.ablauf__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;counter-reset:ablauf}
.ablauf__schritt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding:1.4rem 1.3rem;border:1px solid var(--c-linie);border-radius:var(--radius);background:rgba(30,30,30,.72)}
.fenster .ablauf__schritt{background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ablauf__nr{align-self:start}
.ablauf__text h3{margin:.15rem 0 .5rem;font-size:1.15rem;line-height:1.25}
.ablauf__text p{margin:0;color:var(--c-text-2);font-size:.98rem;line-height:1.55}
.ablauf__dauer{display:block;margin-top:.6rem;font-size:var(--fs-klein);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-orange)}
@media (min-width:900px){
  .ablauf__liste{grid-template-columns:repeat(min(var(--n,3),4),minmax(0,1fr))}
  .ablauf__schritt{grid-template-columns:minmax(0,1fr);gap:.9rem;padding:1.7rem 1.5rem 1.6rem}
  .ablauf__schritt:hover{border-color:#f2950e66}
}
/* bild-text: Text und Bild nebeneinander (ab 900px), Bild mobil unter dem Text */
.bild-text__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:center}
.bild-text__absatz p{margin:0 0 1rem;color:var(--c-text);font-size:var(--fs-text);line-height:1.65;max-width:560px}
.bild-text__absatz p:last-child{margin-bottom:0}
.bild-text__aktion{margin:1.4rem 0 0}
.bild-text__bild{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-linie);box-shadow:0 30px 80px #00000088;background:var(--c-flaeche-2)}
.bild-text__bild img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (min-width:900px){
  .bild-text__raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem)}
  .bild-text--links .bild-text__text{order:2}
  .bild-text--links .bild-text__bild{order:1}
}
.dlg__seite .ablauf__liste,.dlg__seite .bild-text__raster{grid-template-columns:minmax(0,1fr)}


/* ---- Film-Galerie (Zettel 24.09.2026, P9): Kacheln 16:9 mit lokalem Vorschaubild, Player erst nach Klick ---- */
.film-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem 1.1rem;list-style:none;margin:0;padding:0}
@media(max-width:1024px){.film-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.film-raster{grid-template-columns:minmax(0,1fr)}}
.film-kachel{min-width:0;display:flex;flex-direction:column;gap:.7rem}
.film-kachel[hidden]{display:none}
.film-kachel__start{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--c-linie);border-radius:var(--radius);
  overflow:hidden;background:#111;cursor:pointer;transition:transform .3s var(--kurve),border-color .3s}
.film-kachel__start img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--kurve),filter .3s}
.film-kachel__start:hover,.film-kachel__start:focus-visible{transform:translateY(-3px);border-color:#f2950e88}
.film-kachel__start:hover img{transform:scale(1.04)}
.film-kachel__start:focus-visible{outline:2px solid var(--c-orange);outline-offset:3px}
.film-kachel__play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(21,21,21,.78);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,transform .3s var(--kurve)}
.film-kachel__play::after{content:"";position:absolute;left:55%;top:50%;width:0;height:0;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.film-kachel__start:hover .film-kachel__play{background:var(--c-orange);transform:translate(-50%,-50%) scale(1.06)}
.film-kachel__dauer,.film-kachel__mehr{position:absolute;bottom:.6rem;padding:.2rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  color:#fff;background:rgba(21,21,21,.8)}
.film-kachel__dauer{right:.6rem}
.film-kachel__mehr{left:.6rem;background:rgba(242,149,14,.9);color:#151515}
.film-kachel__player{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--c-linie)}
.film-kachel__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-kachel__zu{position:absolute;top:.5rem;right:.5rem;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(21,21,21,.8);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.film-kachel__zu:hover{background:var(--c-orange);color:#151515}
.film-kachel__text{display:flex;flex-direction:column;gap:.15rem;padding:0 .2rem}
.film-kachel__art{margin:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-orange)}
.film-kachel__titel{margin:0;font-size:1.02rem;line-height:1.3}
.film-kachel__kunde{margin:0;font-size:.85rem;color:var(--c-text-2)}
.film-hinweis{margin:1.4rem 0 0;font-size:.78rem;color:var(--c-text-2);max-width:70ch}
.film-hinweis a{color:inherit;text-decoration:underline}
.film-filter{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.6rem}
.film-filter__gruppe{display:flex;flex-wrap:wrap;gap:.45rem}
.film-filter__stand{margin:.2rem 0 0;font-size:.8rem;color:var(--c-text-2)}
@media (prefers-reduced-motion:reduce){.film-kachel__start,.film-kachel__start img,.film-kachel__play{transition:none}.film-kachel__start:hover img{transform:none}}