/* ════════════════════════════════════════════════════════════════
   FISCHER WORKS — site.css
   Komponenten: Header, Navigation, Footer, Buttons, Karten,
   Formulare, Cursor, Marquee. Baut auf base.css auf.
   ════════════════════════════════════════════════════════════════ */

/* ── Kopfleiste ── */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;gap:24px;
  height:74px;padding:0 var(--rand);
  background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:transform .3s var(--ease-out),border-color .3s;
}
.kopf.tief{border-bottom-color:var(--linie)}
.kopf.weg{transform:translateY(-100%)}
html.no-js .kopf{position:static;border-bottom-color:var(--linie)}
@media (prefers-reduced-motion:reduce){.kopf{transition:border-color .3s}}

.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marke .fw{
  width:36px;height:36px;background:var(--tinte);color:var(--papier);border-radius:14%;
  font-family:var(--fd);font-stretch:75%;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--kurve);
}
.marke:hover .fw{transform:rotate(90deg)}
.marke .wort{
  font-family:var(--fd);font-stretch:75%;font-weight:700;font-size:15px;
  letter-spacing:.12em;line-height:1;text-transform:uppercase;
}
/* WORKS: gleiche Groesse, leicht, auf FISCHER-Breite gesperrt (wie im Logo-SVG) */
.marke .wort span{display:block;font-weight:300;font-size:inherit;letter-spacing:.336em;margin-top:.14em}

.nav{display:flex;align-items:center;gap:clamp(18px,3vw,40px);margin-left:auto}
.nav a{
  font-family:var(--fm);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--grau);
  padding:6px 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;
  border-bottom:2px solid var(--tinte);transition:right .3s var(--kurve);
}
.nav a:hover:not(.cta),.nav a[aria-current="page"]:not(.cta){color:var(--tinte)}
.nav a:hover:not(.cta)::after,.nav a[aria-current="page"]:not(.cta)::after{right:0}
.nav a.cta{color:var(--tinte);padding:12px 22px;font-size:11px;letter-spacing:.16em;white-space:nowrap}
.nav a.cta:hover{color:var(--papier)}
.nav a.cta::after{display:none}

/* CTA-Knopf im Kopf */
.cta{
  flex:none;display:inline-flex;align-items:center;gap:10px;
  background:none;border:1px solid var(--tinte);color:var(--tinte);
  border-radius:999px;text-decoration:none;
  font-family:var(--fm);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:12px 22px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),
    border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.cta:hover{background:var(--messing);border-color:var(--messing);color:var(--papier)}
.cta:active{transform:scale(.97)}
.cta .pf{display:inline-block;transition:transform .3s var(--kurve)}
.cta:hover .pf{transform:translate(3px,-3px)}

/* Mobile Navigation */
.burger{display:none;flex:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger i{
  position:absolute;left:11px;right:11px;height:2px;background:var(--tinte);
  transition:transform .3s var(--kurve),opacity .2s;
}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px}
.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:899px){
  html.js .nav{
    position:fixed;top:74px;left:0;right:0;height:calc(100svh - 74px);
    flex-direction:column;
    justify-content:center;gap:8px;margin:0;
    background:var(--papier);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
  }
  html.js .nav a{font-family:var(--fd);font-stretch:75%;font-weight:700;
    font-size:clamp(34px,9vw,52px);letter-spacing:0;color:var(--tinte);
    padding:8px 0;
    opacity:0;transform:translateY(14px);
    transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  }
  html.js .nav a::after{display:none}
  html.js .nav .cta{margin-top:26px;font-size:12px;padding:16px 24px}
  html.js .nav a:nth-child(1){transition-delay:0ms}
  html.js .nav a:nth-child(2){transition-delay:40ms}
  html.js .nav a:nth-child(3){transition-delay:80ms}
  html.js .nav a:nth-child(4){transition-delay:120ms}
  html.js .nav a:nth-child(5){transition-delay:160ms}
  html.js body.nav-offen .nav{opacity:1;visibility:visible}
  html.js body.nav-offen .nav a{opacity:1;transform:none}
  html.js body.nav-offen{overflow:hidden}
  html.js .burger{display:block}
  html.no-js .nav{flex-wrap:wrap;gap:14px}
  .marke .wort{display:none}
}
@media(max-width:899px) and (prefers-reduced-motion:reduce){
  html.js .nav a{opacity:1;transform:none;transition:none}
}
.nav .cta{margin-left:8px}

/* Platz unter der fixen Kopfleiste */
main{min-height:60vh}
html.js body:not(.hero-voll) main{padding-top:74px}
html.no-js main{padding-top:0}

/* ── Seitenkopf fuer Unterseiten ── */
.seitenkopf{padding-top:clamp(80px,16vh,180px);padding-bottom:clamp(40px,7vh,80px)}
.seitenkopf .kick{margin-bottom:22px}
.seitenkopf h1{max-width:16ch}
.seitenkopf .lead{margin-top:28px}

/* Direktweg per Mail unter dem Lead (Kontaktseite) */
.direkt{
  margin-top:18px;font-family:var(--fm);font-size:13px;letter-spacing:.04em;
  color:var(--grau);
}
.direkt a{
  color:var(--tinte);text-decoration:none;
  border-bottom:1px solid var(--messing);padding-bottom:2px;
  transition:color .2s var(--ease-out);
}
.direkt a:hover{color:var(--messing-hell)}

/* Variante mit Bild-Slot rechts, damit 1440px nicht nur die linke
   Haelfte nutzt. Bild kommt spaeter, der Slot steht schon bereit. */
.seitenkopf.mit-bild{display:grid;gap:clamp(28px,4vw,60px);align-items:start}
@media(min-width:900px){
  .seitenkopf.mit-bild{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
.seitenkopf-bild{aspect-ratio:4/5;overflow:hidden;background:var(--papier-tief)}
.seitenkopf-bild img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Knoepfe ── */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--tinte);color:var(--papier);text-decoration:none;
  font-family:var(--fm);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;padding:18px 30px;border:1px solid var(--tinte);
  border-radius:999px;
  transition:background .2s var(--ease-out),color .2s var(--ease-out),
    border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.btn:hover{background:var(--messing);border-color:var(--messing);color:var(--papier)}
.btn:active:not(.magnet){transform:scale(.97)}
.btn:disabled{opacity:.65;cursor:default}
.btn:disabled:hover{background:var(--tinte);border-color:var(--tinte);color:var(--papier)}
.btn .pf{display:inline-block;transition:transform .3s var(--kurve)}
.btn:hover .pf{transform:translate(4px,-4px)}
.btn.geist{background:none;color:var(--tinte)}
.btn.geist:hover{background:var(--messing);border-color:var(--messing);color:var(--papier)}
@media (prefers-reduced-motion:reduce){.btn{transition:background .2s,color .2s,border-color .2s}.magnet{transition:none}}

/* Magnet-Knoepfe: core.js schreibt nur --mx/--my, CSS baut den Transform */
.magnet{
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--s,1));
  transition:transform .35s var(--ease-out);
}
.magnet:active{--s:.97}

/* Textlink mit Pfeil: Unterstreichung waechst von links, Farbe wechselt auf Messing */
.mehr{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--fm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:4px;background-repeat:no-repeat;
  background-image:linear-gradient(var(--messing),var(--messing)),linear-gradient(var(--tinte),var(--tinte));
  background-position:0 100%,0 100%;
  background-size:0% 2px,100% 2px;
  transition:background-size .3s var(--ease-out),transform .2s var(--ease-out);
}
.mehr:hover,.mehr:focus-visible{background-size:100% 2px,100% 2px}
.mehr:active{transform:scale(.97)}
.mehr .pf{transition:transform .3s var(--kurve)}
.mehr:hover .pf,.mehr:focus-visible .pf{transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.mehr{transition:transform .2s}}

/* ── Work-Karten ── */
.karten{display:grid;gap:clamp(24px,3vw,44px)}
@media(min-width:760px){.karten{grid-template-columns:1fr 1fr}}
.karte{display:block;text-decoration:none;position:relative}
.karte .bild{
  display:block;position:relative;overflow:hidden;background:var(--papier-tief);
  aspect-ratio:4/3;
  transition:transform .8s var(--kurve);
}
.karte .bild img,.karte .bild video{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Der Hover-Zoom liegt auf .bild statt auf dem Bild selbst: so bleibt
   das img frei fuer die Scroll-Parallax (Abschnitt 3), die dieselbe
   Eigenschaft auf dem Bild braucht, ohne mit dem Hover zu kollidieren. */
.karte:hover .bild,.karte:focus-within .bild{transform:scale(1.04)}
/* Zweitbild: blendet per Laser-Wischer ein, ohne Glut (Fall-Karten). */
.karte .bild img.zwei,.karte .bild video.zwei{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 100%);
  transition:clip-path .6s var(--ease-out);
}
.karte:hover .bild img.zwei,.karte:hover .bild video.zwei,
.karte:focus-within .bild img.zwei,.karte:focus-within .bild video.zwei{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  .karte .bild img.zwei,.karte .bild video.zwei{transition:none}
}
.karte .zeile{
  display:flex;align-items:baseline;gap:14px;margin-top:16px;
  border-bottom:1px solid var(--linie);padding-bottom:14px;
}
.karte .titel{font-family:var(--fd);font-stretch:75%;font-weight:700;
  font-size:clamp(26px,3.4vw,48px);line-height:1;text-transform:uppercase;
  transition:transform .3s var(--ease-out);}
.karte:hover .titel,.karte:focus-within .titel{transform:translateX(6px)}
.karte .tags{margin-left:auto;font-family:var(--fm);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau);text-align:right;
  transition:color .2s var(--ease-out);}
.karte:hover .tags,.karte:focus-within .tags{color:var(--tinte)}
.karte .satz{display:block;margin-top:10px;color:var(--grau);font-size:var(--t-small);max-width:52ch}
@media (prefers-reduced-motion:reduce){
  .karte:hover .titel,.karte:focus-within .titel{transform:none}
}

/* Teaser-Karte (BBO, gesperrt) */
.karte.gesperrt .bild{position:relative}
.karte.gesperrt .bild .geheim{
  position:absolute;left:14px;bottom:14px;z-index:1;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinte);
  border:1px solid var(--linie);
  background:color-mix(in srgb,var(--papier) 80%,transparent);
  padding:12px 18px;
}

/* ── Marquee / Laufband ── */
.band{overflow:hidden;white-space:nowrap;border-block:1px solid var(--linie);padding:18px 0}
.band .spur{display:inline-block;animation:band 36s linear infinite}
.band span{
  font-family:var(--fd);font-stretch:75%;font-weight:700;font-size:clamp(26px,3.6vw,46px);
  text-transform:uppercase;letter-spacing:.02em;margin-right:64px;
}
.band .duenn{font-weight:300;color:var(--grau)}
@keyframes band{to{transform:translateX(-50%)}}
.band:hover .spur{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.band .spur{animation:none}}

/* ── Formulare ── */
.feld{margin-bottom:26px}
.feld label{
  font-family:var(--fm);font-size:var(--t-kick);letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau);display:block;margin-bottom:10px;
}
.feld input[type=text],.feld input[type=email],.feld textarea{
  width:100%;background:var(--papier-tief);border:1px solid var(--linie);
  color:var(--tinte);padding:16px 18px;font:inherit;font-size:16px;
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--messing);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--messing) 25%,transparent);
}
.feld input:user-invalid,.feld textarea:user-invalid{border-color:#E08A6B}
@media (prefers-reduced-motion:reduce){.feld input,.feld textarea{transition:none}}

/* Radio-Kacheln */
.kacheln{display:flex;flex-wrap:wrap;gap:10px}
.kachel{position:relative}
.kachel input{position:absolute;opacity:0;inset:0;accent-color:var(--messing)}
.kachel span{
  display:inline-block;border:1px solid var(--linie);background:var(--papier-tief);
  border-radius:999px;
  font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:13px 18px;cursor:pointer;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out),
    color .2s var(--ease-out),transform .2s var(--ease-out);
}
.kachel input:checked+span{background:var(--tinte);color:var(--papier);border-color:var(--tinte)}
.kachel input:focus-visible+span{outline:2px solid var(--messing);outline-offset:2px}
.kachel:hover span{border-color:var(--messing)}
.kachel:active span{transform:scale(.97)}

/* Honigtopf unsichtbar */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.status{margin-top:18px;font-size:var(--t-small)}
.status.ok,.status.fehler{display:flex;gap:10px;align-items:baseline;border-left:1px solid;padding-left:14px}
.status.ok{color:var(--tinte);border-left-color:var(--messing)}
.status.fehler{color:#E08A6B;border-left-color:#E08A6B}
.status.ok::before{content:"✓";color:var(--messing);font-family:var(--fm)}
.status.fehler::before{content:"!";color:#E08A6B;font-family:var(--fm)}

/* ── Riesen-Footer ── */
.fuss{margin-top:var(--sektion)}
.fuss .oben{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(40px,6vh,70px)}
.fuss .wortmarke{
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,9vw,140px);line-height:1;letter-spacing:.12em;
}
.fuss .wortmarke span{display:block;font-weight:300;letter-spacing:.336em;
  font-size:inherit;line-height:1;margin-top:.1em}
.fuss .spalten{
  display:grid;gap:36px;margin-top:clamp(40px,7vh,80px);
  padding-top:36px;border-top:1px solid var(--linie);
}
@media(min-width:760px){.fuss .spalten{grid-template-columns:2fr 1fr 1fr 1fr}}
.fuss .spalten .kick{margin-bottom:14px;color:var(--grau)}
.fuss .spalten a{display:block;text-decoration:none;color:var(--tinte-weich);
  font-size:var(--t-small);padding:4px 0}
.fuss .spalten a:hover{color:var(--tinte)}
.fuss .spalten p{font-size:var(--t-small);color:var(--tinte-weich)}
.fuss .schluss{
  display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;
  padding:26px 0 34px;margin-top:44px;border-top:1px solid var(--linie);
}
.fuss .parole{
  font-family:var(--fd);font-stretch:84%;font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,20px);letter-spacing:.02em;
}
/* Der alte Slogan bleibt daneben stehen, aber nur, wenn neben dem
   neuen Satz und den rechtlichen Links noch Platz ist. */
.fuss .parole-zusatz{display:none}
@media(min-width:1180px){.fuss .parole-zusatz{display:inline}}
.fuss .rechtliches{margin-left:auto;display:flex;gap:24px}
.fuss .rechtliches a{
  font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);text-decoration:none;
}
.fuss .rechtliches a:hover{color:var(--tinte)}

/* ── Custom-Cursor (nur pointer:fine, aktiviert von core.js) ──
   core.js schreibt jeden Frame den Positions-Transform auf .zeiger selbst;
   das Wachsen laeuft deshalb auf einem ::before, dessen Transform davon
   unberuehrt bleibt (nur transform/opacity, keine Layout-Eigenschaften). */
.zeiger{
  position:fixed;top:0;left:0;z-index:300;pointer-events:none;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
body.zeiger-an .zeiger{opacity:1}
.zeiger::before{
  content:"";display:block;width:10px;height:10px;border-radius:50%;
  background:var(--tinte);transform:scale(1);
  transition:transform .25s var(--kurve);
}
.zeiger.gross::before{transform:scale(7.2)}
.zeiger .wortlein{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--papier);
  opacity:0;transition:opacity .2s;text-transform:uppercase;
}
.zeiger.gross .wortlein{opacity:1}
@media (prefers-reduced-motion:reduce){.zeiger{display:none}}

/* ── Kleinigkeiten ── */
.pfeilliste li{
  display:flex;gap:14px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--linie);
}
.pfeilliste .pf{font-family:var(--fm);color:var(--grau)}

hr.trenn{border:0;border-top:1px solid var(--linie);margin:0}

/* ── Unterschrift: gezeichneter SVG-Zug, der sich beim Reveal aufzieht ── */
.signatur{display:block;width:clamp(180px,24vw,260px);height:auto;margin-top:26px}
.signatur path{
  fill:none;stroke:var(--tinte);stroke-width:4.5;
  stroke-linecap:round;stroke-linejoin:round;
}
html.js .rv .signatur path{
  stroke-dasharray:620;stroke-dashoffset:620;
}
html.js .rv.in .signatur path{
  animation:schreiben 1.6s var(--kurve) .3s forwards;
}
html.js .rv.in .signatur path:nth-child(2){animation-delay:1.2s;animation-duration:.7s}
@keyframes schreiben{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  html.js .rv .signatur path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
}

/* ── Zitatblock ── */
.zitat{
  font-family:var(--fd);font-stretch:84%;font-weight:700;
  font-size:clamp(24px,3.2vw,42px);line-height:1.25;text-transform:none;
  max-width:22ch;hanging-punctuation:first;
}
.zitat::before{content:"«"}
.zitat::after{content:"»"}

/* ── Porträt: Tinte, bei Hover Farbe ── */
.portraet{position:relative;max-width:420px;margin:0}
.portraet img{width:100%;height:auto;display:block}
.portraet .farbe{
  position:absolute;inset:0;opacity:0;
  transition:opacity .6s var(--kurve);
}
.portraet:hover .farbe,.portraet:focus-visible .farbe{opacity:1}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .portraet .farbe{transition:none}
}
.portraet figcaption{
  margin-top:12px;font-family:var(--fm);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau);
}

/* ── Leistungswelten (Capabilities-Seite) ── */
.welt-block{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--linie)}
.welt-block .zwei{align-items:start}
.welt-kopf{display:flex;align-items:baseline;gap:18px}
.welt-block h2{font-size:clamp(34px,4.6vw,60px)}
.welt-block .lead{margin-top:18px}
.welt-zeichnung{
  aspect-ratio:1/1;max-width:420px;position:relative;color:var(--tinte);
}
.welt-zeichnung canvas{position:absolute;inset:0}
.welt-worte{
  columns:2;column-gap:36px;margin-top:26px;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);line-height:2.2;
}
.welt-worte li{break-inside:avoid}
@media(max-width:560px){.welt-worte{columns:1}}
.welt-satz{margin-top:26px;padding-top:18px;border-top:1px solid var(--linie);
  font-family:var(--fd);font-stretch:84%;font-weight:700;text-transform:uppercase;
  font-size:17px}

/* ── Bedarfs-Leiste (Capabilities): Einstieg nach Bedarf ── */
.bedarf-leiste{
  display:flex;flex-direction:column;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.bedarf-leiste a{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  text-decoration:none;color:var(--grau);
  font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:18px 0;border-top:1px solid var(--linie);
  transition:color .2s var(--ease-out);
}
.bedarf-leiste a:first-child{border-top:0}
.bedarf-leiste a:hover{color:var(--tinte)}
.bedarf-leiste a .pf{color:var(--messing)}
@media(min-width:900px){
  .bedarf-leiste{flex-direction:row}
  .bedarf-leiste a{flex:1;padding:22px 20px;border-top:0;border-left:1px solid var(--linie)}
  .bedarf-leiste a:first-child{border-left:0;padding-left:0}
}

/* ── Kontakt-Layout ── */
.kontakt-raster{display:grid;gap:clamp(36px,5vw,80px);margin-top:20px}
@media(min-width:960px){.kontakt-raster{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.kontakt-neben .kick{margin-bottom:10px}
.kontakt-neben p{font-size:var(--t-small)}
.kontakt-neben .blockchen{padding:20px 0;border-top:1px solid var(--linie)}

/* ── Bildrahmen: 1px Linie aussen, 1px Messing-Tief 40% innen ──
   Wiederverwendbare Utility fuer Kachel- und Welt-Bilder. */
.rahmen{
  border:1px solid var(--linie);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--messing-tief) 40%,transparent);
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
}

/* ── Laser-Reveal (Phase 4, ersetzt den Clip-Reveal aus Phase 3) ──
   Ein 2px-Messingschnitt laeuft einmal ueber das Bild und gibt es per
   Maskenkante frei, mit Glut an der Kante wie beim Intro-Laser.
   --sweep ist bewusst inherits:true registriert: die Kante wird auf
   .rahmen animiert, Bild-Maske und ::after-Glut lesen denselben Wert
   ueber die normale Vererbung mit. Nur innerhalb .rv, Bilder ohne
   .rv-Vorfahren bleiben statisch. */
@property --sweep{syntax:'<percentage>';inherits:true;initial-value:-12%}
html.js .rv .rahmen,html.js .rv.rahmen{--sweep:-12%;position:relative}
html.js .rv .rahmen img,html.js .rv.rahmen img{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--sweep) - 10%),transparent var(--sweep));
          mask-image:linear-gradient(90deg,#000 calc(var(--sweep) - 10%),transparent var(--sweep));
}
html.js .rv .rahmen::after,html.js .rv.rahmen::after{ /* die Glut an der Kante */
  content:"";position:absolute;top:0;bottom:0;width:2px;left:var(--sweep);
  background:var(--messing-hell);box-shadow:0 0 18px 4px rgba(217,158,51,.7),0 0 46px 14px rgba(217,158,51,.3);
  opacity:0;pointer-events:none;
}
html.js .rv.in .rahmen,html.js .rv.in.rahmen{animation:laser-sweep 1.1s var(--ease-out) forwards}
html.js .rv.in .rahmen::after,html.js .rv.in.rahmen::after{animation:laser-glut 1.1s linear forwards}
@keyframes laser-sweep{to{--sweep:124%}}
@keyframes laser-glut{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}

/* Kein @property (html.kein-sweep, siehe Head-Skript jeder Seite):
   nur eine Opazitaetsblende statt Maske und Laserstrich. */
html.js.kein-sweep .rv .rahmen img,html.js.kein-sweep .rv.rahmen img{
  -webkit-mask-image:none;mask-image:none;opacity:0;transition:opacity .7s var(--ease-out);
}
html.js.kein-sweep .rv.in .rahmen img,html.js.kein-sweep .rv.in.rahmen img{opacity:1;animation:none}
html.js.kein-sweep .rv .rahmen::after,html.js.kein-sweep .rv.rahmen::after{display:none}

@media (prefers-reduced-motion:reduce){
  html.js .rv .rahmen img,html.js .rv.rahmen img{-webkit-mask-image:none;mask-image:none;opacity:1}
  html.js .rv .rahmen::after,html.js .rv.rahmen::after{display:none}
  html.js .rv.in .rahmen,html.js .rv.in.rahmen{animation:none}
}

/* ── Bedarfs-Kacheln: "Womit fangen wir an?" ──
   Bild oben (3:2), Titel in Kundensprache, Ergebnissatz, Meta-Zeile. */
.bedarf{
  display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,36px);
  margin-top:clamp(32px,5vh,52px);
}
@media(min-width:700px){.bedarf{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.bedarf{grid-template-columns:repeat(4,1fr)}}
.bedarf-kachel{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.bedarf-kachel .bild{
  position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--papier-tief);
}
.bedarf-kachel .bild img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease-out);
}
.bedarf-kachel:hover .bild img,.bedarf-kachel:focus-visible .bild img{transform:scale(1.03)}
.bedarf-kachel:hover .bild.rahmen,.bedarf-kachel:focus-visible .bild.rahmen{
  border-color:var(--messing-tief);
  box-shadow:inset 0 0 0 1px var(--messing-tief);
}
.bedarf-kachel .titel{
  display:block;margin-top:18px;
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;
  line-height:1;font-size:clamp(24px,2.6vw,36px);
}
.bedarf-kachel .satz{
  display:block;margin-top:10px;color:var(--grau);max-width:40ch;font-size:var(--t-small);
}
.bedarf-kachel .meta{
  display:flex;flex-direction:column;gap:5px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linie);
  font-family:var(--fm);font-size:12.5px;letter-spacing:.04em;
  color:var(--grau);
}
.bedarf-kachel .meta span:last-child{color:var(--tinte-weich)}
.bedarf-kachel .meta span:last-child::before{
  content:"→ ";color:var(--messing);display:inline-block;
  opacity:0;transform:translateX(-6px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);
}
.bedarf-kachel:hover .meta span:last-child::before,
.bedarf-kachel:focus-visible .meta span:last-child::before{opacity:1;transform:translateX(0)}
@media (hover:none){.bedarf-kachel .meta span:last-child::before{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bedarf-kachel .meta span:last-child::before{transition:none}}
.bedarf-klein{margin-top:28px}

/* ── Leistungswelt (Capabilities, Detailseite je Welt) ──
   Bild links (sticky, 4:5) mit kleiner Welt-Zeichnung, rechts Ergebnis-
   Heading, Lieferpunkte, "Alles, was dazugehoert", Beleg-Link. */
.welt{
  display:grid;gap:clamp(28px,5vw,80px);
  padding-block:clamp(60px,9vh,110px);
  border-top:1px solid var(--linie);
}
@media(min-width:900px){
  .welt{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .welt-bild{position:sticky;top:100px}
}
.welt-bild{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--papier-tief)}
.welt-bild img{width:100%;height:100%;object-fit:cover;display:block}
.welt-bild .welt-zeichnung{
  position:absolute;right:16px;bottom:16px;width:120px;max-width:120px;
  aspect-ratio:1/1;color:var(--tinte);opacity:.7;mix-blend-mode:screen;
}
.welt-nr{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--fm);font-size:var(--t-kick);letter-spacing:.18em;
  text-transform:uppercase;color:var(--grau);
}
.welt-nr .num{color:var(--grau-hell)}
.welt h2{margin-top:18px;font-size:clamp(30px,3.8vw,56px);text-wrap:balance}
.welt .lead{margin-top:18px}
.liefer{margin-top:28px}
.liefer li{
  position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--linie);
}
.liefer li::before{content:"→";position:absolute;left:0;color:var(--messing)}
.welt details.alles{margin-top:28px}
.welt details.alles summary{
  cursor:pointer;list-style:none;position:relative;padding-right:26px;
  font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grau);
}
.welt details.alles summary::-webkit-details-marker{display:none}
.welt details.alles summary::after{
  content:"+";position:absolute;right:0;top:-2px;color:var(--messing);
  font-family:var(--fb);font-size:16px;font-weight:600;
  display:inline-block;transition:transform .3s var(--ease-out);
}
.welt details.alles[open] summary::after{transform:rotate(45deg)}
.welt details.alles .alles-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease-out);
}
.welt details.alles[open] .alles-wrap{grid-template-rows:1fr}
.welt details.alles .alles-inner{overflow:hidden;min-height:0}
.welt details.alles .welt-worte{margin-top:20px}
@media (prefers-reduced-motion:reduce){
  .welt details.alles .alles-wrap{transition:none}
  .welt details.alles summary::after{transition:none}
}
.welt .beleg{
  margin-top:24px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grau);
}
.welt .beleg a{
  color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--messing);
  padding-bottom:2px;transition:color .2s var(--ease-out);
}
.welt .beleg a:hover{color:var(--messing-hell)}
.welt .software{margin-top:36px;padding-top:28px;border-top:1px solid var(--linie)}
.welt .software h3{font-size:clamp(22px,2.2vw,30px);line-height:1.05;margin:0 0 14px}
.welt .software p{max-width:62ch;margin:0 0 14px}
.welt .software p:last-child{margin-bottom:0}

/* ── Naechster Schritt: Abschluss auf jeder Unterseite ──
   Kein einzelner Knopf mehr, sondern zwei Wege: passender Inhalt + CTA. */
.weiter-so{
  display:grid;gap:clamp(32px,5vw,80px);
  padding-block:var(--sektion);border-top:1px solid var(--linie);
}
@media(min-width:900px){.weiter-so{grid-template-columns:1fr 1fr}}
.weiter-inhalt .kick{margin-bottom:18px}
.weiter-link{
  display:inline-flex;align-items:baseline;gap:14px;text-decoration:none;
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;
  line-height:1;font-size:clamp(28px,3.6vw,54px);
}
.weiter-link .pf{
  font-family:var(--fb);font-weight:400;color:var(--messing);
  display:inline-block;transition:transform .25s var(--ease-out);
}
.weiter-link:hover .pf{transform:translateX(10px)}
.weiter-inhalt p{margin-top:16px;color:var(--grau);max-width:48ch}
.weiter-cta .display{font-size:var(--t-h2)}
.weiter-cta .btn{margin-top:28px}

/* ── Ablauf-Etappen ── */
.ablauf{
  display:grid;grid-template-columns:1fr;gap:32px;margin-top:44px;
}
@media(min-width:900px){.ablauf{grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}}
.ablauf li{border-top:1px solid var(--linie);padding-top:24px}
.ablauf .etappe{font-family:var(--fm);font-size:var(--t-kick);letter-spacing:.18em;color:var(--grau);
  font-variant-numeric:tabular-nums}
.ablauf h3{margin-top:14px;font-size:clamp(22px,2.4vw,30px)}
.ablauf .dauer{
  display:block;margin-top:10px;font-family:var(--fm);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--messing);
}
.ablauf p{margin-top:12px;color:var(--grau);font-size:var(--t-small)}
.ablauf .rollen{margin-top:16px}
.ablauf .rollen b{
  display:block;margin-top:8px;
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;
  font-size:13px;letter-spacing:.1em;color:var(--tinte);
}
.ablauf .rollen b:first-child{margin-top:0}

/* ── Groessenordnungen (Ablauf-Seite) ──
   Mobil: Label und Wert gestapelt, damit lange Werte nie in eine
   erzwungene Zeile gepresst werden (kein horizontales Scrollen).
   Ab 600px: zweispaltig, Wert rechtsbuendig in einer Zeile. */
.klassen{display:grid;grid-template-columns:1fr;margin-top:32px}
.klassen dt{
  padding-top:16px;border-top:1px solid var(--linie);color:var(--tinte);
}
.klassen dd{
  padding-bottom:16px;color:var(--grau);font-variant-numeric:tabular-nums;
  font-family:var(--fm);font-size:var(--t-small);
}
@media(min-width:600px){
  .klassen{grid-template-columns:1fr auto;column-gap:clamp(16px,3vw,40px);align-items:baseline}
  .klassen dt{padding-bottom:16px}
  .klassen dd{
    padding-top:16px;border-top:1px solid var(--linie);
    text-align:right;white-space:nowrap;
  }
}

/* ── Fragen: offene Liste, kein Akkordeon ── */
.fragen{margin-top:32px}
.fragen dt{
  margin-top:32px;padding-top:24px;border-top:1px solid var(--linie);
  font-family:var(--fd);font-stretch:75%;font-weight:700;text-transform:uppercase;
  font-size:20px;line-height:1.3;
}
.fragen dt:first-child{margin-top:0}
.fragen dd{margin-top:10px;color:var(--grau);max-width:60ch}

/* ── Standort als Vollbild-Moment (Studio, Phase 4) ──
   Volle Viewportbreite, Text unten links auf einem Verlauf. Der
   Rahmen behaelt den Laser-Reveal (siehe oben), verzichtet aber auf
   die kleine Bildkachel-Linie/-Kante, die auf voller Breite keinen
   Zweck hat. */
.standort{position:relative;overflow:hidden}
.standort-bild{
  position:relative;height:clamp(420px,70vh,760px);overflow:hidden;
  border:0;box-shadow:none;background:var(--papier-tief);
}
.standort-bild img{width:100%;height:100%;object-fit:cover;display:block}
.standort-bild .standort-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.standort-bild .standort-film{display:none}}
.standort-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(28px,6vh,64px) var(--rand) clamp(24px,5vh,48px);
  background:linear-gradient(0deg,rgba(5,5,5,.85),transparent 60%);
}
.standort-text h2{max-width:16ch}
.standort-text p{margin-top:16px;max-width:52ch;color:var(--tinte-weich)}

/* ── Scroll-Parallax und Linien, die sich zeichnen (Phase 4) ──
   Nur mit View-Timeline-Unterstuetzung und nicht bei reduced motion:
   ausgewaehlte Bilder wandern beim Scrollen minimal im eigenen Rahmen,
   Sektionslinien zeichnen sich beim Eintritt von links. Scale/Translate
   sind bewusst eigene Eigenschaften, kein transform: so bleiben Hover-
   Zoom (auf .bild bzw. .karte, siehe oben) und Parallax unabhaengig
   voneinander. Ohne Unterstuetzung oder bei reduced motion bleiben
   Bilder unverschoben und die Linie eine einfache border-top. */
@supports (animation-timeline: view()){
  @media(min-width:1100px){
    /* Bilder brechen links bis zum Seitenrand aus dem Raster aus */
    .welt-bild{margin-left:calc(-1 * var(--rand));width:calc(100% + var(--rand))}
  }
  @media (prefers-reduced-motion: no-preference){
    .welt-bild img,.seitenkopf-bild img,.karte .bild img,.standort .rahmen img{
      scale:1.12;
      animation:fw-parallax linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes fw-parallax{from{translate:0 -6%}to{translate:0 6%}}

    .linie-oben{border-top-color:transparent;position:relative}
    .linie-oben::before{
      content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
      background:var(--linie);transform-origin:left center;
      scale:0 1;
      animation:fw-linie linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    @keyframes fw-linie{to{scale:1 1}}
  }
}

/* Abgesetzte Flaechen: voll breit, damit die Seite nicht durchgehend flach schwarz ist */
.sektion.tief{position:relative;isolation:isolate}
.sektion.tief::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--papier-tief);z-index:-1}
.sektion.glanz{position:relative;isolation:isolate}
.sektion.glanz::after{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 12% 0%,rgba(184,137,46,.14) 0,transparent 60%)}