/* ==========================================================================
   Bewegung — Choreografie der Website (Raphael 04.09.2026: "mehr Animationen,
   moderner, die Leute sollen staunen").
   Eigene Datei, damit base.css unberuehrt bleibt. Alles ist ruhig und
   materialnah: nichts huepft, nichts blinkt - Blech bewegt sich schwer und
   praezise. Jede Bewegung ist unter prefers-reduced-motion aus.
   ========================================================================== */

:root{
  --b-lang:.9s;          /* grosse Einblendungen */
  --b-kurz:.45s;         /* Hover, kleine Reaktionen */
  --b-kurve:cubic-bezier(.22,.61,.36,1);   /* weich auslaufend, wie ein Schlitten */
  --b-schwer:cubic-bezier(.16,1,.3,1);     /* schwerer Anlauf, sattes Ende */
}

/* --- 1. Seite kommt und geht: kurzer Vorhang beim Wechsel ------------- */
body{opacity:1;transition:opacity .28s ease}
body.seite-aus{opacity:0}
body.seite-an{animation:seiteAn .55s var(--b-kurve) both}
@keyframes seiteAn{from{opacity:0}to{opacity:1}}

/* --- 2. Hero-Choreografie: Zeile fuer Zeile, dann der Rest ----------- */
.hero--voll .hero-meta,
.hero--voll h1,
.hero--voll .hero-sub,
.hero--voll .btn-row{
  opacity:0;transform:translateY(28px);
  animation:heroZeile 1.1s var(--b-schwer) forwards}
.hero--voll .hero-meta{animation-delay:.25s}
.hero--voll h1{animation-delay:.45s}
.hero--voll .hero-sub{animation-delay:.75s}
.hero--voll .btn-row{animation-delay:.95s}
@keyframes heroZeile{to{opacity:1;transform:none}}

/* Ueberschrift: die zweite Zeile (Akzent) laeuft etwas nach */
.hero--voll h1 .accent{display:inline-block;opacity:0;transform:translateY(.35em);
  animation:heroZeile .9s var(--b-schwer) .8s forwards}

/* Hintergrundbilder gleiten beim Scrollen langsamer als die Seite (Parallax) */
.hero--voll .hero-bilder{will-change:transform;transform:translateY(var(--b-py,0px))}
.hero--voll .hero-bilder img.aktiv{animation:heroZoomLang 16s var(--b-kurve) forwards}
@keyframes heroZoomLang{from{transform:scale(1.02)}to{transform:scale(1.14)}}

/* Scroll-Hinweis: eine duenne Linie, die nach unten laeuft */
.hero-scroll{position:absolute;left:50%;bottom:26px;z-index:3;width:1px;height:64px;
  overflow:hidden;transform:translateX(-50%);opacity:0;
  animation:heroZeile .8s ease 1.6s forwards}
.hero-scroll::before{content:"";position:absolute;left:0;top:-64px;width:1px;height:64px;
  background:linear-gradient(to bottom,transparent,var(--dark-ink));
  animation:scrollLinie 2.2s var(--b-kurve) infinite}
@keyframes scrollLinie{0%{top:-64px}60%{top:64px}100%{top:64px}}
.hero-scroll span{position:absolute;left:14px;bottom:0;white-space:nowrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,235,224,.6)}

/* --- 3. Einblenden beim Scrollen: schwerer, mit Staffelung -------------- */
/* Das Einblenden laeuft ueber `translate`, NICHT ueber `transform` - sonst
   kaempft es mit Hover und Neigung. Und `:not(#nie)` hebt die Spezifitaet an,
   damit die Kachel-Regeln weiter unten (transition-Kurzschreibweise!) die
   Staffelung nicht wieder ausknipsen. Hover/Neigung sind hier mit drin. */
.reveal:not(#nie){opacity:0;translate:0 34px;
  transition:opacity var(--b-lang) var(--b-kurve) calc(var(--i,0) * 90ms),
             translate var(--b-lang) var(--b-schwer) calc(var(--i,0) * 90ms),
             transform .5s var(--b-kurve),
             box-shadow .5s var(--b-kurve),
             border-color .3s}
.reveal.in:not(#nie){opacity:1;translate:0 0}

/* Bilder in Karten: beim Einblenden minimal herausfahren */
.reveal img:not(#nie){transition:scale 1.4s var(--b-kurve),opacity .6s,transform .6s var(--b-kurve)}
.reveal:not(.in) img{scale:1.06}
.reveal.in img{scale:1}
/* Karten mit eigener Hover-Skalierung behalten sie (nach dem Einblenden) */
.reveal.in.ref-card:hover img,.reveal.in .weg-bild img:hover{transform:scale(1.04)}

/* Abschnittskoepfe: Label wischt von links, Ueberschrift kommt von unten */
.section-head .label{display:inline-block;clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--b-kurve) .1s}
.section-head.in .label{clip-path:inset(-25% -8% -25% -8%)}
.section-head h2{clip-path:inset(0 0 100% 0);transform:translateY(.25em);
  transition:clip-path 1s var(--b-schwer) .15s,transform 1s var(--b-schwer) .15s}
.section-head.in h2{clip-path:inset(-25% -8% -25% -8%);transform:none}

/* Linie unter Abschnittskoepfen zieht sich auf */
.section-head{position:relative}
.section-head::after{content:"";position:absolute;left:0;bottom:-18px;height:1px;width:0;
  background:var(--line);transition:width 1.2s var(--b-kurve) .3s}
.section-head.in::after{width:100%}

/* --- 4. Kacheln reagieren auf die Maus: leichte Neigung ------------------ */
.weg-karte,.obj-karte,.ref-card,.service{transform-style:preserve-3d;
  transition:transform .5s var(--b-kurve),box-shadow .5s var(--b-kurve),border-color .3s}
.b-neigung{transform:perspective(900px) rotateX(var(--b-rx,0deg)) rotateY(var(--b-ry,0deg))
  translateY(-4px)!important;
  box-shadow:0 22px 48px rgba(15,15,16,.14)}
/* Glanz, der mit der Maus wandert */
.b-glanz{position:relative;overflow:hidden}
.b-glanz::before{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:3;
  background:radial-gradient(circle at var(--b-gx,50%) var(--b-gy,50%),
    rgba(255,255,255,.16),transparent 42%);
  opacity:0;transition:opacity .4s}
.b-glanz:hover::before{opacity:1}

/* --- 5. Knoepfe: Pfeil laeuft, Fuellung waechst von links ---------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transform-origin:left;background:var(--ink);transition:transform .45s var(--b-kurve)}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn-ghost:hover{color:var(--bg)}
.btn:hover .arrow{transform:translateX(6px)}
.hero--voll .btn-ghost::after{background:var(--dark-ink)}

/* --- 6. Werkstatt: Videos wachen erst auf, wenn sie im Bild sind --------- */
.mpark-card{transition:transform .5s var(--b-kurve),box-shadow .5s}
.mpark-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(15,15,16,.16)}
.mpark-media{overflow:hidden}
.mpark-media video,.mpark-media img{transition:transform 1.2s var(--b-kurve)}
.mpark-card:hover .mpark-media video,.mpark-card:hover .mpark-media img{transform:scale(1.05)}

/* --- 7. Muster-Kacheln (Katalog + Konfigurator): gestaffelt ------------- */
.mst-kachel,.kfg-musterknopf{opacity:0;transform:translateY(18px) scale(.98);
  animation:kachelAn .7s var(--b-kurve) forwards;
  animation-delay:calc(var(--i,0) * 40ms)}
@keyframes kachelAn{to{opacity:1;transform:none}}

/* --- 8. Fusszeile + Kontakt: ruhig hereingleiten ------------------------ */
.site-footer .footer-grid>div{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--b-kurve),transform .8s var(--b-kurve);
  transition-delay:calc(var(--i,0) * 120ms)}
.site-footer.in .footer-grid>div{opacity:1;transform:none}

/* --- Bewegungsarm: alles sofort sichtbar, nichts laeuft ----------------- */
@media (prefers-reduced-motion:reduce){
  body,body.seite-an,body.seite-aus{opacity:1;animation:none;transition:none}
  .hero--voll .hero-meta,.hero--voll h1,.hero--voll .hero-sub,.hero--voll .btn-row,
  .hero--voll h1 .accent,.hero-scroll,.mst-kachel,.kfg-musterknopf{
    opacity:1;transform:none;animation:none}
  .hero-scroll::before{animation:none}
  .hero--voll .hero-bilder{transform:none}
  .reveal,.reveal img,.section-head .label,.section-head h2,.section-head::after,
  .site-footer .footer-grid>div{opacity:1;transform:none;clip-path:none;transition:none;width:100%}
  .b-neigung{transform:none!important;box-shadow:none}
}


/* ==========================================================================
   Staun-Bausteine (04.09.2026)
   ========================================================================== */

/* --- A. Hero-Video: liegt ueber den Bildern, blendet ein, sobald es laeuft */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease;z-index:1}
.hero--voll.hat-video .hero-video{opacity:1}
.hero--voll.hat-video .hero-bilder img{opacity:0;animation:none}

/* --- B. Laser-Abschnitt: Blech in Tinte auf Papier, Loecher entstehen ---- */
.laser-sektion{padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.laser-kopf{display:flex;align-items:baseline;gap:32px;flex-wrap:wrap;margin-bottom:28px;
  max-width:880px;margin-left:auto;margin-right:auto}
.laser-kopf .label{color:var(--ink-soft)}
.laser-kopf h2{margin:0;font-size:clamp(30px,3.4vw,44px)}
.laser-buehne{position:relative;aspect-ratio:1750/900;background:transparent;
  box-shadow:0 34px 70px -28px rgba(15,15,16,.45),0 6px 18px -8px rgba(15,15,16,.25);
  max-width:880px;margin:0 auto;
  border:1px solid var(--dark-line);overflow:hidden;color:var(--dark-ink);perspective:1700px;cursor:pointer}
.laser-buehne svg{width:100%;height:100%;display:block}
.laser-buehne .laser-fallback{width:100%;height:100%;object-fit:contain;display:block;opacity:0}
.laser-buehne.laeuft .laser-fallback{display:none}
/* Loecher (in der Maske): weiss = Blech steht, schwarz = geschnitten */
/* Maskenpfade werden per Attribut geschaltet (fill #fff/#000) - CSS-Regeln
   und Uebergaenge INNERHALB einer <mask> greifen im Browser nicht verlaesslich */
/* Kantenschatten unter dem Blech - sichtbar nur durch das offene Loch */
.laser-schatten path{fill:none;stroke:rgba(0,0,0,.9);stroke-width:24;opacity:0;
  transition:opacity .4s}
.laser-schatten path.offen{opacity:1}
/* Schnittkante: Laserlinie, dann Gluehen, dann kalte Metallkante */
.laser-kante path{fill:none;stroke:#f4f8ff;stroke-width:0;stroke-linejoin:round;stroke-linecap:round}
.laser-kante path.schneidet{stroke-width:4;
  filter:drop-shadow(0 0 5px #bcd8f5) drop-shadow(0 0 16px rgba(150,190,240,.85))}
.laser-kante path.glueht{stroke:#dbe6f2;stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(170,200,240,.9));transition:stroke 1.4s,stroke-width 1.4s,filter 1.4s}
.laser-kante path.offen{stroke:rgba(255,255,255,.32);stroke-width:1.6;filter:none;
  transition:stroke 1.6s,stroke-width 1.6s,filter 1.6s}
.laser-funke{fill:#fff;filter:drop-shadow(0 0 6px #bcd8f5) drop-shadow(0 0 18px #7fb0e6);
  pointer-events:none;opacity:0}
.laser-funke.an{opacity:1}
.laser-spritzer{fill:#dce9fa;opacity:0}
.laser-spritzer.an{animation:spritzer .55s ease-out forwards}
@keyframes spritzer{0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx,20px),var(--sy,-30px)) scale(.3)}}
.laser-zeile{display:flex;justify-content:space-between;align-items:center;gap:20px;
  max-width:880px;margin-left:auto;margin-right:auto;
  margin-top:16px;flex-wrap:wrap}
.laser-zeile .label{color:var(--ink-soft)}
.laser-nochmal{font-family:var(--mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink);background:none;
  border:1px solid rgba(15,15,16,.35);border-radius:var(--btn-radius);
  padding:9px 16px;cursor:pointer;transition:border-color .3s,background .3s,color .3s}
.laser-nochmal:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.laser-nochmal[hidden]{display:none}

/* --- C. Referenzen als Bildbahn: grosse Karten, seitlich durchziehen ---- */
.refs-bahn{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0 18px;
  cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.refs-bahn::-webkit-scrollbar{display:none}
.refs-bahn.zieht{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.refs-bahn>.ref-card{flex:0 0 min(62vw,860px);scroll-snap-align:start;aspect-ratio:4/3}
.refs-bahn>.ref-card .ref-overlay{opacity:1;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 48%)}
.refs-bahn>.ref-card .ref-title{font-size:clamp(22px,2.4vw,34px)}
.bahn-steuer{display:flex;align-items:center;gap:18px;margin-top:10px}
.bahn-knopf{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);
  background:none;color:var(--ink);font-size:18px;cursor:pointer;
  transition:background .3s,color .3s,transform .3s;flex:0 0 auto}
.bahn-knopf:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.bahn-knopf:disabled{opacity:.3;cursor:default;transform:none;background:none;color:var(--ink)}
.bahn-stand{flex:1;height:1px;background:var(--line);position:relative}
.bahn-stand-balken{position:absolute;left:0;top:-1px;height:3px;width:20%;
  background:var(--ink);transition:width .25s ease,left .25s ease}
@media (max-width:800px){.refs-bahn>.ref-card{flex-basis:84vw}}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .laser-buehne .laser-fallback{display:block!important;opacity:1}
  .laser-buehne svg{display:none}
  .refs-bahn{scroll-behavior:auto}
}


/* --- D. Lichtkasten: Foto gross ueber der Seite -------------------------- */
.ref-card,.obj-bild,.service-img{cursor:zoom-in}
.refs-bahn>.ref-card{cursor:grab}
.lichtkasten{position:fixed;inset:0;z-index:500;background:rgba(14,14,16,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.lichtkasten.offen{opacity:1;pointer-events:auto}
.lichtkasten img{max-width:92vw;max-height:84vh;object-fit:contain;display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:scale(.94);transition:transform .45s var(--b-schwer),opacity .3s}
.lichtkasten.offen img{transform:none}
.lichtkasten img.wechselt{opacity:0;transform:scale(.98)}
.lk-text{position:absolute;left:0;right:0;bottom:22px;text-align:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(239,235,224,.75);padding:0 70px;pointer-events:none}
.lk-knopf{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(239,235,224,.4);background:rgba(14,14,16,.5);
  color:var(--dark-ink);font-size:20px;cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s}
.lk-knopf:hover{background:var(--dark-ink);color:var(--dark-bg);border-color:var(--dark-ink)}
.lk-zurueck{left:18px}.lk-weiter{right:18px}
.lk-zu{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(239,235,224,.4);background:rgba(14,14,16,.5);color:var(--dark-ink);
  font-size:22px;line-height:1;cursor:pointer;transition:transform .3s,background .3s}
.lk-zu:hover{transform:rotate(90deg);background:var(--dark-ink);color:var(--dark-bg)}
.lk-zaehler{position:absolute;top:26px;left:22px;font-family:var(--mono);font-size:11px;
  letter-spacing:.15em;color:rgba(239,235,224,.6)}
body.lk-offen{overflow:hidden}
@media (max-width:800px){.lk-knopf{width:42px;height:42px;font-size:16px}
  .lk-zurueck{left:8px}.lk-weiter{right:8px}.lk-text{padding:0 54px;bottom:14px}}
@media (prefers-reduced-motion:reduce){.lichtkasten,.lichtkasten img{transition:none}}


/* --- Renderings (Higgsfield, 04.09.2026): drei Videos, laufen nur im Bild --- */
.film-kopf{display:flex;align-items:baseline;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.film-kopf h2{margin:0;font-size:clamp(30px,3.4vw,44px)}
.film-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.film-karte{min-width:0}
.film-kopf h2{overflow-wrap:anywhere}
@media (max-width:900px){.film-raster{grid-template-columns:1fr}}
.film-karte{margin:0}
.film-media{aspect-ratio:16/9;overflow:hidden;background:var(--dark-bg);border-radius:2px}
.film-media video{width:100%;max-width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--b-kurve)}
.film-karte:hover .film-media video{transform:scale(1.04)}
.film-karte .label{display:block;margin-top:12px}


/* --- Laser- und Renderings-Kopf: dieselbe Choreografie wie .section-head --- */
.laser-kopf .label,.film-kopf .label{display:inline-block;clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--b-kurve) .1s}
.laser-kopf.in .label,.film-kopf.in .label{clip-path:inset(-25% -8% -25% -8%)}
.laser-kopf h2,.film-kopf h2{clip-path:inset(0 0 100% 0);translate:0 .25em;
  transition:clip-path 1s var(--b-schwer) .15s,translate 1s var(--b-schwer) .15s}
.laser-kopf.in h2,.film-kopf.in h2{clip-path:inset(-25% -8% -25% -8%);translate:0 0}
.laser-kopf,.film-kopf{position:relative}
.laser-kopf::after,.film-kopf::after{content:"";position:absolute;left:0;bottom:-14px;
  height:1px;width:0;background:var(--line);transition:width 1.2s var(--b-kurve) .3s}
.laser-kopf::after{background:var(--line)}
.laser-kopf.in::after,.film-kopf.in::after{width:100%}


/* --- Kennzahlen-Zeile unter dem Startbild ------------------------------- */
.fakten-sektion{padding:0 var(--pad)}
.fakten-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fakt{padding:30px 30px 28px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px}
.fakt:first-child{border-left:0;padding-left:0}
.fakt-zahl{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.05;
  font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .fakten-band{grid-template-columns:1fr 1fr}
  .fakt{padding:22px 20px}
  .fakt:nth-child(3){border-left:0;padding-left:0}
  .fakt:nth-child(3),.fakt:nth-child(4){border-top:1px solid var(--line)}
}

/* --- Werkstoffe -------------------------------------------------------- */
.mat-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px}
.mat-karte{min-width:0}
@media (max-width:1100px){.mat-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mat-band{grid-template-columns:1fr}}
.mat-karte{margin:0}
.mat-bild{aspect-ratio:4/5;overflow:hidden;background:var(--bg-warm)}
.mat-bild img{width:100%;height:100%;object-fit:cover;display:block}
.mat-bild img.fokus-leicht-oben{object-position:50% 30%}
.mat-karte figcaption{display:block;padding-top:18px}
.mat-name{display:block;font-family:var(--serif);font-size:24px;margin-bottom:8px}
.mat-text{display:block;color:var(--ink-soft);font-size:16px;line-height:1.6;max-width:34em}

/* --- Vollbild ---------------------------------------------------------- */
.vollbild{margin:0;width:100%;height:clamp(300px,58vh,680px);overflow:hidden;
  background:var(--dark-bg)}
.vollbild img{width:100%;height:100%;object-fit:cover;display:block}


/* --- Logo im Blech (Startbild): Tafel rechts, Loecher zeigen das Video --- */
.hero-blech{position:absolute;z-index:2;pointer-events:none;
  right:clamp(20px,6vw,120px);top:clamp(120px,17vh,210px);
  width:clamp(220px,28vw,440px);aspect-ratio:1200/1240;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
.hero-blech svg{width:100%;height:100%;display:block}
.hero-blech .laser-fallback{display:none}
.hero--voll:has(.hero-blech) .hero-text::before{display:none}
@media (max-width:1100px){.hero-blech{width:clamp(200px,26vw,340px);top:clamp(110px,15vh,180px)}}
@media (max-width:760px){.hero-blech{display:none}}


/* --- Fertigungsablauf: Bahn mit nummerierten Schritten -------------------- */
.ablauf-bahn{margin-top:8px}
.ablauf-bahn>.ablauf-schritt{flex:0 0 min(46vw,620px);scroll-snap-align:start;margin:0;min-width:0}
.ablauf-media{aspect-ratio:16/9;overflow:hidden;background:var(--dark-bg);border-radius:2px}
.ablauf-media img,.ablauf-media video{width:100%;max-width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--b-kurve)}
.ablauf-schritt:hover .ablauf-media img,.ablauf-schritt:hover .ablauf-media video{transform:scale(1.04)}
.ablauf-schritt figcaption{display:flex;align-items:baseline;gap:14px;padding-top:14px}
.ablauf-nr{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink)}
@media (max-width:760px){.ablauf-bahn>.ablauf-schritt{flex-basis:82vw}}


/* --- Kennzeichnung von KI-Bildern (Richtlinie, 05.09.2026) ---------------- */
.ki-hinweis{position:absolute;left:12px;bottom:12px;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 8px;border-radius:2px;background:rgba(15,15,16,.62);color:rgba(239,235,224,.92)}
[data-wechsel] .ki-hinweis{opacity:0;transition:opacity .4s}
[data-wechsel] img.aktiv + .ki-hinweis{opacity:1}
.hero--voll.hat-video .hero-bilder .ki-hinweis{display:none}
.vollbild .ki-hinweis{left:var(--pad)}


/* --- Ueberschriften nie abschneiden (Raphael 05.09.2026) ------------------ */
.display,.section-head h2,.laser-kopf h2,.film-kopf h2{overflow-wrap:anywhere;min-width:0}
@media (max-width:1100px){
  .laser-kopf h2,.film-kopf h2{flex:1 1 100%}
}


/* --- Laser am Handy: Kantenschatten duenn und scharf, sonst wirken die Loecher
   verschwommen (Raphael 05.09.2026) ---------------------------------------- */
@media (max-width:760px){
  .laser-schatten path{stroke-width:8}
  .laser-schatten{filter:blur(1.2px)}
  .laser-kante path.offen{stroke-width:2.4}
}
@media (min-width:761px) and (max-width:1100px){
  .laser-schatten path{stroke-width:14}
  .laser-schatten{filter:blur(2.5px)}
}


/* --- Laser 3D (06.09.2026): Platte mit Kantung, folgt der Maus ------------- */
.laser-platte{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .8s var(--b-schwer)}
.laser-platte>svg{display:block;width:100%;height:100%}
.laser-buehne.raum{overflow:visible;border-color:transparent;box-shadow:none}
.laser-buehne.raum .laser-platte{box-shadow:0 70px 100px -40px rgba(15,15,16,.5)}
.laser-buehne.raum .laser-tisch{opacity:0}
.laser-buehne.raum .laser-fallback{display:none}
.laser-schenkel{position:absolute;display:none;background-size:cover;background-position:center;
  backface-visibility:visible}
.laser-buehne.raum .laser-schenkel{display:block}
.laser-schenkel.oben{left:0;right:0;top:0;height:4.5%;transform-origin:50% 0;transform:rotateX(90deg)}
.laser-schenkel.unten{left:0;right:0;bottom:0;height:4.5%;transform-origin:50% 100%;transform:rotateX(-90deg)}
.laser-schenkel.links{top:0;bottom:0;left:0;width:2.3%;transform-origin:0 50%;transform:rotateY(-90deg)}
.laser-schenkel.rechts{top:0;bottom:0;right:0;width:2.3%;transform-origin:100% 50%;transform:rotateY(90deg)}
.laser-knoepfe{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.laser-3d[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* --- Fallende Teile --- */
/* Teile liegen hinter dem Blech. Flach: fallen nach hinten durch den Tisch.
   3D: bleiben lose liegen, bis geschuettelt wird - dann rutschen sie nach unten
   und bleiben unter der Tafel liegen. */
.laser-teil{transform-box:fill-box;transform-origin:center;pointer-events:none}
.laser-teil.durch{animation:teilDurch .8s cubic-bezier(.5,0,1,1) forwards}
@keyframes teilDurch{
  0%{transform:none;opacity:1;filter:brightness(1)}
  100%{transform:translate(0,-26px) rotate(var(--fr,6deg)) scale(.5);opacity:0;filter:brightness(.3)}}
.laser-teil.lose{filter:brightness(.88)}
.laser-teil.faellt3d{animation:teilFaellt3d 1s cubic-bezier(.55,0,1,1) forwards}
@keyframes teilFaellt3d{
  0%{transform:none}
  100%{transform:translate(var(--fx,0px),var(--fy,-300px)) rotate(var(--fr,10deg))}}
.laser-buehne.raum .laser-platte>svg{overflow:visible}
.laser-hinweis{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.laser-teil{display:none}}


/* --- Leitmuster (06.09.2026): zwoelf grosse Kacheln statt 115 kleiner ------- */
.leit-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 22px}
@media (max-width:1000px){.leit-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.leit-raster{grid-template-columns:1fr}}
.leit{margin:0;min-width:0}
.leit-bild{aspect-ratio:1750/900;background:var(--bg-warm);color:#2F3237;border:1px solid var(--line);overflow:hidden}
.leit-bild img,.leit-bild svg{width:100%;height:100%;display:block;object-fit:contain;transition:transform 1.2s var(--b-kurve)}
.leit:hover .leit-bild img,.leit:hover .leit-bild svg{transform:scale(1.03)}
.leit figcaption{padding-top:12px}
.leit h3{font-family:var(--serif);font-size:24px;margin:4px 0 6px;line-height:1.1}
.leit p{font-size:14px;color:var(--ink-soft);margin:0;max-width:40ch}
.katalog-anfrage{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
@media (max-width:800px){.katalog-anfrage{grid-template-columns:1fr}}
.katalog-anfrage h3{margin:8px 0 10px}
.katalog-anfrage p{color:var(--ink-soft);max-width:44ch}
.katalog-form .field{margin-bottom:16px}
.katalog-form .btn{margin-top:18px}
.katalog-antwort{margin-top:14px;font-size:14px;color:var(--ink)}
.katalog-antwort:empty{display:none}

.leit-link{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.leit-link .arrow{display:inline-block;transition:transform .3s}
.leit-link:hover .arrow{transform:translateX(4px)}
.leit-hinweis{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}

/* Kraeftigere Originalfarben im Startfilm. */
.hero--voll .hero-video{filter:contrast(1.4) saturate(1.65) brightness(.72)}