/* ANKERHELD · Leistungsumfang auf den Unterseiten
   Spotlight (Licht folgt der Maus, Fugen gluehen, Kacheln kippen)
   plus ein Einblend-Effekt je Gewerk, gesteuert ueber data-fx am <ul class="leist">.
   Wird nur auf den sieben Leistungsseiten geladen. Ohne JavaScript greift
   nichts davon ausser dem Fugenraster, der Abschnitt sieht dann aus wie vorher. */

/* ---------- Raster mit leuchtenden Fugen ---------- */
.leist{position:relative;gap:1px;padding:1px;border:0;perspective:1000px;
  background:
    radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(255,187,3,.85),rgba(255,187,3,0) 70%),
    var(--line)}
.leist li{border:0;background:
    radial-gradient(260px circle at var(--x,-999px) var(--y,-999px),rgba(255,187,3,.12),rgba(255,187,3,0) 65%),
    #15130F;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.leist li:hover{background:
    radial-gradient(260px circle at var(--x,-999px) var(--y,-999px),rgba(255,187,3,.15),rgba(255,187,3,0) 65%),
    #17150F}
.leist li::after{bottom:0}

/* Waehrend der Einblendung kein Licht, sonst leuchten die leeren Plaetze */
.leist.lf-ruhe{background:var(--line)}
.fx-fahrt.lf-ruhe,.fx-push.lf-ruhe{background:transparent}

/* Vor dem Einblenden stehen alle Animationen still, im ersten Bild sichtbar */
.leist.fx-an:not(.go) li,.leist.fx-an:not(.go) li *,.leist.fx-an:not(.go) li::before{animation-play-state:paused}

@keyframes lf-draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}

/* ---------- Webdesign: Text wird getippt ---------- */
.lf-gh{position:relative;display:block}
.lf-gh .lf-ghost{color:transparent}
.lf-gh .lf-typed{position:absolute;inset:0}
.lf-caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;
  background:var(--gold);animation:lf-blink .9s steps(1) infinite}
@keyframes lf-blink{50%{opacity:0}}
.fx-web.fx-an .lsym *{animation:lf-draw 1s ease backwards;animation-delay:calc(var(--d)*1ms)}

/* ---------- Folie: Plottermesser schneidet aus ---------- */
.lf-ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.lf-ov *{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.lf-knife{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#FFF6D6;opacity:0;pointer-events:none;z-index:3;
  box-shadow:0 0 0 3px rgba(255,187,3,.35),0 0 18px 4px rgba(255,187,3,.7)}
.fx-plot li>.lsym,.fx-plot li>span{transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.3,1)}
.fx-plot li.lf-pre>span{opacity:.14;transform:translateY(4px)}
.fx-plot li.lf-pre>.lsym{transform:translateY(4px)}
.fx-plot .lf-ov{transition:opacity .8s}

/* ---------- Fahrzeug: faehrt ein, mit Bremsruck ---------- */
.fx-fahrt{overflow-x:clip}
@keyframes lf-driveR{0%{transform:translateX(105vw) skewX(-20deg);filter:blur(10px);opacity:0}
  58%{transform:translateX(-16px) skewX(7deg);filter:blur(0);opacity:1}78%{transform:translateX(5px) skewX(-2deg)}100%{transform:none}}
@keyframes lf-driveL{0%{transform:translateX(-105vw) skewX(20deg);filter:blur(10px);opacity:0}
  58%{transform:translateX(16px) skewX(-7deg);filter:blur(0);opacity:1}78%{transform:translateX(-5px) skewX(2deg)}100%{transform:none}}
@keyframes lf-streak{0%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.2)}}
.fx-fahrt.fx-an li{animation:lf-driveR 1.15s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--d)*1ms)}
.fx-fahrt.fx-an li.lf-l{animation-name:lf-driveL}
.lf-sp{position:absolute;top:18%;bottom:18%;left:100%;width:70%;pointer-events:none;opacity:0;transform-origin:left;
  background:repeating-linear-gradient(to bottom,rgba(255,187,3,.55) 0 1px,transparent 1px 13px);
  -webkit-mask:linear-gradient(to right,#000,transparent);mask:linear-gradient(to right,#000,transparent)}
.lf-l .lf-sp{left:auto;right:100%;transform-origin:right;
  -webkit-mask:linear-gradient(to left,#000,transparent);mask:linear-gradient(to left,#000,transparent)}
.fx-fahrt.fx-an .lf-sp{animation:lf-streak 1.1s ease-out backwards;animation-delay:calc(var(--d)*1ms + 250ms)}
.fx-fahrt li:hover .lsym{transform:translateX(6px)}

/* ---------- Schilder: zuenden wie Leuchtbuchstaben ---------- */
@keyframes lf-flick{0%{opacity:0}6%{opacity:.85}8%{opacity:.05}15%{opacity:.7}17%{opacity:.15}30%{opacity:1}32%{opacity:.35}38%,100%{opacity:1}}
@keyframes lf-glow{0%{filter:drop-shadow(0 0 0 rgba(255,187,3,0))}40%{filter:drop-shadow(0 0 14px rgba(255,187,3,.95))}100%{filter:drop-shadow(0 0 5px rgba(255,187,3,.45))}}
@keyframes lf-txtglow{0%,30%{text-shadow:0 0 22px rgba(255,187,3,.75)}100%{text-shadow:0 0 0 rgba(255,187,3,0)}}
@keyframes lf-wash{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
.fx-licht .lsym{filter:drop-shadow(0 0 5px rgba(255,187,3,.45))}
.fx-licht li::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:radial-gradient(70% 60% at 22% 20%,rgba(255,187,3,.10),rgba(255,187,3,0) 70%);transition:opacity .4s}
.fx-licht li:hover::before{opacity:1}
.fx-licht li:hover .lsym{filter:drop-shadow(0 0 10px rgba(255,187,3,.9))}
.fx-licht.fx-an .lsym{animation:lf-flick 1.4s linear backwards,lf-glow 2.4s ease backwards;animation-delay:calc(var(--d)*1ms)}
.fx-licht.fx-an li>span{animation:lf-flick 1.4s linear backwards,lf-txtglow 2.6s ease backwards;animation-delay:calc(var(--d)*1ms + 120ms)}
.fx-licht.fx-an li::before{animation:lf-wash 2.4s ease backwards;animation-delay:calc(var(--d)*1ms)}

/* ---------- Druck: Farben laufen in den Passer, Schnittmarken ---------- */
@keyframes lf-passer{0%{opacity:0;text-shadow:-9px -4px 0 rgba(0,174,239,.9),8px 3px 0 rgba(236,0,140,.9),3px 9px 0 rgba(255,242,0,.85)}
  15%{opacity:1}100%{text-shadow:0 0 0 rgba(0,174,239,0),0 0 0 rgba(236,0,140,0),0 0 0 rgba(255,242,0,0)}}
@keyframes lf-passerIc{0%{opacity:0;filter:drop-shadow(-7px -3px 0 rgba(0,174,239,.9)) drop-shadow(7px 3px 0 rgba(236,0,140,.9)) drop-shadow(2px 7px 0 rgba(255,242,0,.85))}
  15%{opacity:1}100%{filter:drop-shadow(0 0 0 rgba(0,174,239,0)) drop-shadow(0 0 0 rgba(236,0,140,0)) drop-shadow(0 0 0 rgba(255,242,0,0))}}
@keyframes lf-marks{from{inset:-6px;opacity:0}}
@keyframes lf-reg{from{transform:rotate(-180deg) scale(0);opacity:0}}
.lf-marks{position:absolute;inset:9px;pointer-events:none;--c:rgba(242,239,231,.32);background:
  linear-gradient(var(--c),var(--c)) left top/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px 13px no-repeat,
  linear-gradient(var(--c),var(--c)) right top/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px 13px no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px 13px no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/13px 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px 13px no-repeat;
  transition:inset .4s cubic-bezier(.2,.7,.3,1)}
.lf-reg{position:absolute;top:16px;right:16px;width:16px;height:16px;color:rgba(242,239,231,.35);pointer-events:none;
  transition:color .3s,transform .6s}
.fx-druck li:hover .lf-marks{inset:5px;--c:rgba(255,187,3,.8)}
.fx-druck li:hover .lf-reg{color:var(--gold);transform:rotate(90deg)}
.fx-druck.fx-an li>span{animation:lf-passer 1.3s cubic-bezier(.3,.6,.2,1) backwards;animation-delay:calc(var(--d)*1ms + 100ms)}
.fx-druck.fx-an .lsym{animation:lf-passerIc 1.3s cubic-bezier(.3,.6,.2,1) backwards;animation-delay:calc(var(--d)*1ms)}
.fx-druck.fx-an .lf-marks{animation:lf-marks .9s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--d)*1ms + 500ms)}
.fx-druck.fx-an .lf-reg{animation:lf-reg .9s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--d)*1ms + 650ms)}

/* ---------- Recruiting: kommt als Push-Nachricht ---------- */
@keyframes lf-push{0%{opacity:0;transform:translateY(-30px) scale(.9)}55%{opacity:1;transform:translateY(5px) scale(1.02)}78%{transform:translateY(-2px) scale(.996)}100%{transform:none}}
@keyframes lf-buzz{0%,100%{transform:none}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
@keyframes lf-badge{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.lf-badge{position:absolute;top:19px;left:43px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--gold);color:#12110E;font-family:var(--mono);font-size:10.5px;font-weight:500;font-style:normal;
  line-height:17px;text-align:center;transition:transform .35s cubic-bezier(.5,0,.5,1.5),opacity .35s}
.lf-now{position:absolute;top:24px;right:20px;font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.14em;
  color:var(--mute);text-transform:uppercase;transition:opacity .4s}
.fx-push li.lf-read .lf-badge{transform:scale(0);opacity:0}
.fx-push li.lf-read .lf-now{opacity:.35}
.fx-push.fx-an li{animation:lf-push .85s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--d)*1ms)}
.fx-push.fx-an .lsym{animation:lf-buzz .5s ease backwards;animation-delay:calc(var(--d)*1ms + 700ms)}
.fx-push.fx-an .lf-badge{animation:lf-badge .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--d)*1ms + 600ms)}

/* ---------- Logo: Konstruktionslinien ---------- */
.fx-logo .lf-ov{opacity:0;transition:opacity .5s}
.fx-logo .lf-ov *{stroke-opacity:.55}
.fx-logo li:hover .lf-ov,.fx-logo li.lf-build .lf-ov{opacity:1}
.fx-logo li.lf-build .lf-ov{transition:none}
.fx-logo li>span{transition:opacity .6s}
.fx-logo li.lf-pre>span{opacity:0}

@media(prefers-reduced-motion:reduce){
  .leist li{transform:none!important}
}

/* =====================================================================
   Unterer Seitenteil der Leistungsseiten (seit 15.10.2026)
   02 Ablauf als Bildtafeln · Eckdaten-Band · Fragen mit Porträt · Bildkarten
   Tafeln stapeln sich per position:sticky, ohne Script.
   Zähler und Zeichnungen: leistung.js (Abschnitt "Unterer Teil").
   ===================================================================== */
.ablauf{padding-top:clamp(52px,6.5vw,96px)}
.innen{max-width:var(--max);margin:0 auto;padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px)}
.kopfzeile{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,56px)}
.kopfzeile .seclabel{margin-bottom:12px}
.kopfzeile h2{max-width:20ch}

/* ---------- Bildtafeln ---------- */
.buehne{list-style:none;position:relative}
.tafel{position:sticky;top:0;height:clamp(560px,88vh,820px);overflow:hidden;isolation:isolate;
  display:flex;align-items:center;background:var(--ink);border-top:1px solid var(--line);
  box-shadow:0 -40px 80px rgba(0,0,0,.55)}
.tbild{position:absolute;inset:0;z-index:-2;margin:0;overflow:hidden}
.tbild img{width:100%;height:100%;object-fit:cover;transform-origin:70% 50%;
  animation:tafel-fahrt 24s ease-in-out infinite alternate}
@keyframes tafel-fahrt{from{transform:scale(1.03)}to{transform:scale(1.13) translate3d(-1.6%,-1%,0)}}
.tschleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to right, rgba(18,17,14,.94) 0%, rgba(18,17,14,.82) 30%, rgba(18,17,14,.32) 62%, rgba(18,17,14,.14) 100%),
  linear-gradient(to bottom, rgba(18,17,14,.70) 0%, rgba(18,17,14,0) 24%, rgba(18,17,14,0) 70%, rgba(18,17,14,.88) 100%)}
.tinhalt{width:100%;position:relative;z-index:1}
.ttext{max-width:min(470px,42vw);display:grid;gap:14px;padding-bottom:40px}
.tnr{font-family:var(--display);font-weight:300;font-size:clamp(96px,14vw,188px);line-height:.78;
  color:transparent;-webkit-text-stroke:1.2px var(--gold);letter-spacing:-.04em;margin-bottom:6px}
.tkicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ttext h3{font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,54px);letter-spacing:-.025em;line-height:1.05;
  color:var(--paper);text-shadow:0 2px 30px rgba(18,17,14,.9)}
.tmass{display:block;height:12px;width:min(260px,70%);position:relative;color:var(--gold);opacity:.85}
.tmass::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform-origin:left}
.tmass::after{content:"";position:absolute;inset:0;border-left:1px solid currentColor;border-right:1px solid currentColor}
.ttext p{color:#D6D0C5;font-size:clamp(15px,1.5vw,17px);line-height:1.7;text-shadow:0 1px 14px rgba(18,17,14,.9)}
.ttext .tdetail{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;line-height:1.6;color:var(--machine);text-shadow:none}
.tcap{position:absolute;z-index:1;right:clamp(20px,4vw,40px);top:clamp(90px,11vh,116px);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#D6D0C5;
  display:flex;align-items:center;gap:10px;background:rgba(18,17,14,.62);padding:7px 11px;max-width:46%}
.tcap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.tlauf{position:absolute;z-index:2;left:0;right:0;bottom:0;border-top:1px solid rgba(242,239,231,.10);background:rgba(18,17,14,.72)}
.tlauf ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:16px;padding-bottom:18px}
.tlauf li{display:grid;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);min-width:0}
.tlauf li i{display:block;height:2px;background:rgba(242,239,231,.12);position:relative;overflow:hidden}
.tlauf li i::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.45;transform:scaleX(0);transform-origin:left}
.tlauf li.fertig{color:#D6D0C5}
.tlauf li.fertig i::after{transform:none}
.tlauf li[aria-current]{color:var(--gold)}
.tlauf li[aria-current] i::after{background:var(--gold);opacity:1;transform:none}
.tlauf li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bewegung erst, wenn die Tafel im Bild ist (leistung.js setzt .da) */
.js .tafel .tmass::before,.js .tafel .tlauf li[aria-current] i::after{transform:scaleX(0)}
.js .tafel.da .tmass::before{animation:tafel-mass 1.4s cubic-bezier(.2,.7,.3,1) forwards}
.js .tafel.da .tlauf li[aria-current] i::after{animation:tafel-mass 1.6s .2s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes tafel-mass{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Tafeln ohne Foto: Objekt auf Raster */
.tafel--raster{background:
  radial-gradient(80% 90% at 72% 50%, rgba(255,187,3,.06), transparent 60%),
  linear-gradient(rgba(43,39,33,.7) 1px, transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg, rgba(43,39,33,.7) 1px, transparent 1px) 0 0/44px 44px,
  var(--ink)}
.tobjekt{position:absolute;z-index:0;right:clamp(20px,5vw,72px);top:47%;width:min(46vw,640px);transform:translateY(-50%);margin:0}
/* Blatt: Entwurf auf Papier */
.blatt .papier{position:relative;background:#FBFAF6;padding:16px 16px 34px;transform:rotate(-2.2deg);
  box-shadow:0 40px 80px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4)}
.blatt img{width:100%;height:auto;max-height:52vh;object-fit:contain}
.blatt .bcap{position:absolute;left:16px;right:16px;bottom:10px;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#5E584F}
.blatt .ecke{position:absolute;width:22px;height:22px;border:0 solid var(--gold)}
.blatt .e1{left:-12px;top:-12px;border-left-width:1px;border-top-width:1px}
.blatt .e2{right:-12px;top:-12px;border-right-width:1px;border-top-width:1px}
.blatt .e3{left:-12px;bottom:-12px;border-left-width:1px;border-bottom-width:1px}
.blatt .e4{right:-12px;bottom:-12px;border-right-width:1px;border-bottom-width:1px}
.blatt--foto .papier{padding:10px 10px 30px;transform:rotate(1.6deg)}
.blatt--hoch{width:min(34vw,420px);right:clamp(40px,10vw,150px)}
.cmyk{position:absolute;left:16px;top:-26px;display:flex;gap:0;height:12px}
.cmyk i{width:22px;height:12px}
.cmyk i:nth-child(1){background:#00A0E3}.cmyk i:nth-child(2){background:#E5007E}.cmyk i:nth-child(3){background:#FFED00}.cmyk i:nth-child(4){background:#1D1D1B}
.cmyk i:nth-child(5){background:rgba(0,160,227,.5)}.cmyk i:nth-child(6){background:rgba(229,0,126,.5)}.cmyk i:nth-child(7){background:rgba(255,237,0,.5)}.cmyk i:nth-child(8){background:rgba(29,29,27,.5)}
.passer{position:absolute;right:-34px;top:50%;width:22px;height:22px;color:var(--gold)}
.stempel{position:absolute;left:-26px;bottom:44px;font-family:var(--mono);font-weight:500;
  font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);border:2px solid var(--gold);
  padding:9px 14px 8px;background:rgba(18,17,14,.9);transform:rotate(-9deg);bottom:64px}
.js .tafel .stempel{opacity:0}
.js .tafel.da .stempel{animation:tafel-stempel .7s .9s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes tafel-stempel{from{transform:rotate(-9deg) scale(1.7);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:1}}
/* Browserfenster */
.browser .fenster{background:#1F1D19;border:1px solid #3A352D;border-radius:10px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);transform:perspective(1800px) rotateY(-9deg) rotateX(2deg)}
.browser--rechts .fenster{transform:perspective(1800px) rotateY(9deg) rotateX(2deg)}
.browser .leiste{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid #3A352D}
.browser .leiste i{width:10px;height:10px;border-radius:50%;background:#3A352D}
.browser .leiste i:first-child{background:#5A4A2A}
.browser .url{margin-left:12px;flex:1;min-width:0;background:#12110E;border-radius:6px;padding:5px 12px;
  font-family:var(--mono);font-size:11.5px;color:#A9A194;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser .url b{color:var(--gold);font-weight:400}
.browser img{width:100%;height:auto;display:block}
.browser .handy{position:absolute;right:-26px;bottom:-40px;width:26%}
/* Smartphone */
.handy{width:min(300px,64vw)}
.handy .geraet{position:relative;border:9px solid #0B0A08;border-radius:38px;background:#0B0A08;overflow:hidden;
  aspect-ratio:9/19;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px #3A352D}
.handy .geraet::before{content:"";position:absolute;left:50%;top:7px;width:30%;height:16px;border-radius:10px;background:#0B0A08;transform:translateX(-50%);z-index:2}
.handy .schirm{position:absolute;inset:0;background:#fff;color:#1A1814;overflow:hidden;border-radius:29px}
.handy .schirm>img{width:100%;height:100%;object-fit:cover;object-position:left top}
.tobjekt.handy{right:clamp(40px,12vw,180px);width:min(280px,26vw,calc((min(88vh,820px) - 230px) * 9 / 19))}
/* Feed-Beitrag im Handy */
.post{position:absolute;inset:0;padding-top:38px;display:flex;flex-direction:column;font-family:var(--body)}
.post .ph{display:flex;align-items:center;gap:8px;padding:8px 12px}
.post .ph i{width:28px;height:28px;border-radius:50%;background:conic-gradient(var(--gold),#E5007E,var(--gold));padding:2px}
.post .ph i::after{content:"";display:block;width:100%;height:100%;border-radius:50%;background:#fff}
.post .ph b{font-size:12px;font-weight:500;color:#1A1814;line-height:1.2}
.post .ph small{display:block;font-size:10.5px;color:#6E685E;font-weight:400}
.post>img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.post .aktion{display:flex;gap:14px;padding:10px 12px 4px}
.post .aktion svg{width:20px;height:20px;fill:none;stroke:#1A1814;stroke-width:1.7}
.post .ptext{padding:2px 12px;font-size:11.5px;line-height:1.45;color:#1A1814}
.post .knopf{margin:8px 12px 0;padding:9px 12px;background:#E9E5DC;border-radius:6px;font-size:11.5px;font-weight:500;color:#1A1814;display:flex;justify-content:space-between}
/* Landingpage im Handy */
.landing{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--body);background:#F6F4EF}
.landing>img{width:100%;height:36%;object-fit:cover;object-position:center 30%}
.landing .lp{padding:14px 14px;display:grid;gap:9px}
.landing .lpk{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8A6A00;font-family:var(--mono)}
.landing h4{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.15;color:#1A1814}
.landing .frage{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:#1A1814;
  background:#fff;border:1px solid #E2DDD2;border-radius:8px;padding:8px 10px}
.landing .frage span{display:flex;gap:5px}
.landing .frage em{font-style:normal;font-size:11px;padding:3px 9px;border-radius:12px;border:1px solid #CFC8BA}
.landing .frage em.ja{background:#1A1814;color:#fff;border-color:#1A1814}
.landing .los{margin-top:4px;background:var(--gold);color:#1A1814;font-weight:500;font-size:12.5px;text-align:center;border-radius:8px;padding:11px}
.beispiel{position:absolute;left:-14px;top:22px;z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:var(--gold);padding:4px 8px;transform:rotate(-4deg)}
/* Grafik-Tafeln */
.tgrafik{color:var(--paper)}
.tgrafik svg{width:100%;height:auto;overflow:visible}
.tgrafik .gl{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tgrafik .gg{stroke:var(--gold)}
.tgrafik .gm{stroke:var(--machine)}
.tgrafik .gd{stroke-dasharray:6 6}
.tgrafik text{font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;fill:#B9B2A6}
.tgrafik .gt{font-family:var(--display);font-size:60px;font-weight:300;letter-spacing:0;text-transform:none;fill:var(--paper)}
.tgrafik .schnitt{fill:none;stroke:var(--gold);stroke-width:9;stroke-dasharray:1 5;stroke-linecap:round;stroke-linejoin:round}
.tgrafik .gfuell{fill:var(--paper)}
.tgrafik .kasten{fill:#1B1915;stroke:#3A352D}
.tgrafik .kasten.gold{stroke:var(--gold)}
.zeichne{stroke-dasharray:1;stroke-dashoffset:0}
.js .tafel .zeichne,.js .wgrafik .zeichne{stroke-dashoffset:1}
.js .tafel.da .zeichne,.js .wgrafik.da .zeichne{animation:tafel-zeichne 1.4s cubic-bezier(.3,.6,.3,1) forwards;animation-delay:calc(var(--n,0) * .2s)}
@keyframes tafel-zeichne{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.js .tafel .einblenden,.js .wgrafik .einblenden{opacity:0}
.js .tafel.da .einblenden,.js .wgrafik.da .einblenden{animation:tafel-ein .6s ease forwards;animation-delay:calc(var(--n,0) * .2s + .3s)}
@keyframes tafel-ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.puls{transform-origin:center;transform-box:fill-box;animation:tafel-puls 3s ease-out infinite}
.puls.p2{animation-delay:1s}.puls.p3{animation-delay:2s}
@keyframes tafel-puls{from{transform:scale(.3);opacity:.9}to{transform:scale(1);opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  border:1px solid #3A352D;background:#1B1915;padding:7px 11px}
.chips span.an{border-color:var(--gold);color:var(--gold)}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ab figure{margin:0;display:grid;gap:10px}
.ab img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid #3A352D}
.ab figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#B9B2A6;display:flex;justify-content:space-between}
.ab figure:last-child img{border-color:var(--gold)}
.ab figure:last-child figcaption b{color:var(--gold);font-weight:400}
.ab figure:first-child{transform:translateY(26px);opacity:.75}

.brief{display:grid;gap:12px}
.brief .bz{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:14px;border:1px solid #3A352D;background:#1B1915;padding:16px 18px}
.brief .bz svg{width:28px;height:28px}
.brief .bz span{font-family:var(--display);font-weight:300;font-size:clamp(18px,2vw,24px);line-height:1.25;color:var(--paper)}
.brief .bziel{margin-top:8px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.brief .bziel::before{content:"";width:40px;height:1px;background:var(--gold)}

/* ---------- Eckdaten-Band ---------- */
.eckband{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line)}
.ebild{position:absolute;inset:0;z-index:-2}
.ebild img{width:100%;height:100%;object-fit:cover;object-position:center 60%;animation:tafel-fahrt 30s ease-in-out infinite alternate}
.eschleier{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to bottom, var(--ink) 0%, rgba(18,17,14,.58) 16%, rgba(18,17,14,.44) 55%, var(--ink) 100%),
  linear-gradient(to right, rgba(18,17,14,.72), rgba(18,17,14,.14))}
.eckband--ruhig .ebild img{filter:blur(3px) saturate(.85)}
.eckband--ruhig .eschleier{background:
  linear-gradient(to bottom, var(--ink) 0%, rgba(18,17,14,.66) 16%, rgba(18,17,14,.58) 55%, var(--ink) 100%),
  linear-gradient(to right, rgba(18,17,14,.74), rgba(18,17,14,.30))}
.eckband .innen{padding-top:clamp(70px,9vw,130px);padding-bottom:clamp(70px,9vw,130px)}
.eckband .seclabel{color:#D6D0C5}
.eckband .seclabel::after{background:rgba(242,239,231,.18)}
.eckband h2{text-shadow:0 2px 30px rgba(18,17,14,.9)}
.ecap{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#D6D0C5;margin-top:18px;
  display:flex;align-items:center;gap:10px}
.ecap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wert{background:rgba(18,17,14,.74);border:1px solid rgba(242,239,231,.10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:22px 20px;display:grid;gap:10px;align-content:start;min-width:0}
.wert dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.wert dd{display:grid;gap:6px;min-width:0}
.wzahl{font-family:var(--display);font-weight:300;font-size:clamp(36px,4.2vw,54px);line-height:1;letter-spacing:-.03em;color:var(--paper);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wzahl b{font-weight:300}
.wzahl small{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:#D6D0C5}
.wzahl .vor{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:#A9A194;width:100%}
.wwort{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.4vw,30px);line-height:1.12;color:var(--paper)}
.wunter{font-size:13.5px;color:#D6D0C5;line-height:1.5}
.wert--breit{grid-column:1/-1;grid-template-columns:minmax(0,250px) minmax(0,1fr);align-items:center;gap:10px 40px}
.wert--breit dd.wgrafik{grid-column:2;grid-row:1/span 3}
.wgrafik svg{width:100%;height:auto;overflow:visible;color:var(--paper)}
.wgrafik .fz{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wgrafik .gold{stroke:var(--gold)}
.wgrafik .achse{stroke:rgba(242,239,231,.35);stroke-width:1;fill:none}
.wgrafik text{fill:#D6D0C5;font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.wgrafik text.g{fill:var(--gold)}
.wgrafik .flaeche{fill:rgba(242,239,231,.06)}
.fenster83{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:5px}
.fenster83 i{aspect-ratio:4/3;border:1px solid rgba(242,239,231,.35);border-top-width:3px;transition:border-color .3s,background .3s}
.fenster83 i.an{border-color:var(--gold);background:rgba(255,187,3,.12)}
.trichter{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}
.trichter div{border:1px solid rgba(242,239,231,.18);padding:14px 14px;display:grid;gap:4px;text-align:center;background:rgba(18,17,14,.5)}
.trichter div:last-child{border-color:var(--gold)}
.trichter b{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,34px);color:var(--paper);font-variant-numeric:tabular-nums}
.trichter span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#D6D0C5}
.trichter i{font-style:normal;color:var(--gold);font-family:var(--mono)}
.eruf{margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:#D6D0C5;font-size:15px}
.eruf a{font-family:var(--mono);font-size:14px;letter-spacing:.1em;color:var(--gold);border:1px solid var(--gold);padding:11px 16px;
  background:rgba(18,17,14,.6);transition:background .3s,color .3s}
.eruf a:hover{background:var(--gold);color:var(--ink)}

/* ---------- Fragen mit Porträt ---------- */
.fraster{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5.5vw,80px);align-items:start}
.fperson{position:sticky;top:96px;margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);isolation:isolate}
.fperson img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.fperson:hover img{transform:scale(1.04)}
.fperson::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top, rgba(18,17,14,.96) 8%, rgba(18,17,14,.62) 36%, rgba(18,17,14,0) 62%)}
.fperson figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px;display:grid;gap:8px}
.fperson q{font-family:var(--display);font-size:clamp(23px,2.4vw,30px);line-height:1.15;color:var(--paper);quotes:none;letter-spacing:-.02em}
.fperson .wer{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#D6D0C5}
.fperson .tel{font-family:var(--mono);font-size:15px;letter-spacing:.08em;color:var(--gold);justify-self:start;
  border-bottom:1px solid rgba(255,187,3,.4);padding-bottom:2px}
.fragen h2{margin-bottom:clamp(26px,3.5vw,40px);max-width:16ch}
.faq2{border-top:1px solid var(--line)}
.faq2 details{border-bottom:1px solid var(--line);position:relative}
.faq2 details::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.faq2 details[open]::after{transform:scaleX(1)}
.faq2 summary{display:grid;grid-template-columns:44px minmax(0,1fr) 26px;align-items:baseline;gap:8px;padding:24px 0;cursor:pointer;list-style:none}
.faq2 summary::-webkit-details-marker{display:none}
.fnr{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;color:var(--gold)}
.fq{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--paper);transition:color .3s;letter-spacing:-.01em}
.faq2 summary:hover .fq{color:var(--gold)}
.fplus{position:relative;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;align-self:center;transition:border-color .3s,transform .4s}
.fplus::before,.fplus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1px;background:var(--paper);transform:translate(-50%,-50%)}
.fplus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s}
.faq2 details[open] .fplus{border-color:var(--gold);transform:rotate(180deg)}
.faq2 details[open] .fplus::after{transform:translate(-50%,-50%) rotate(0)}
.faq2 .a{padding:0 34px 26px 52px;font-size:15.5px;line-height:1.75;color:var(--mute);max-width:66ch}
.faq2 details[open] .a{animation:tafel-auf .5s cubic-bezier(.2,.7,.3,1)}
@keyframes tafel-auf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Weitere Leistungen als Bildkarten ---------- */
.mehr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mkarte{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;overflow:hidden;
  border:1px solid var(--line);isolation:isolate;transition:border-color .35s}
.mkarte:hover{border-color:var(--gold)}
.mkarte .mb{position:absolute;inset:0;z-index:-2}
.mkarte .mb img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.mkarte:hover .mb img{transform:scale(1.07)}
.mkarte::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(18,17,14,.97) 12%, rgba(18,17,14,.80) 50%, rgba(18,17,14,.28) 100%)}
.mt{display:grid;gap:8px;padding:22px 20px 20px}
.mmeta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.mtitel{font-family:var(--display);font-weight:300;font-size:24px;line-height:1.15;color:var(--paper);letter-spacing:-.02em}
.mtext{font-size:14px;line-height:1.55;color:#D6D0C5}
.mpfeil{display:flex;align-items:center;gap:9px;margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper);transition:color .3s}
.mpfeil i{font-style:normal;transition:transform .3s}
.mkarte:hover .mpfeil{color:var(--gold)}
.mkarte:hover .mpfeil i{transform:translateX(5px)}

/* ---------- Unterer Teil: Handy und Tablet (bleibt am Dateiende) ---------- */
@media(max-width:1000px){
  .werte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mehr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:880px){
  .fraster{grid-template-columns:1fr}
  .fperson{position:relative;top:auto;aspect-ratio:1/1;max-width:520px}
  .fperson img{object-position:50% 18%}
  .faq2 .a{padding-left:0;padding-right:0}
}
@media(max-width:860px){
  .tafel{align-items:flex-end;height:clamp(600px,88svh,780px)}
  .tschleier{background:linear-gradient(to bottom, rgba(18,17,14,.55) 0%, rgba(18,17,14,.15) 26%, rgba(18,17,14,.84) 58%, rgba(18,17,14,.97) 100%)}
  .ttext{padding-bottom:84px;gap:10px;max-width:none}
  .tnr{font-size:80px}
  .tlauf li span{display:none}
  .tlauf ol{gap:8px;padding-top:14px;padding-bottom:14px}
  .tcap{max-width:calc(100% - 40px);top:84px;left:20px;right:auto}
  .tafel--raster .tnr,.tafel--raster .tdetail{display:none}
  .tafel--raster .ttext{padding-bottom:76px}
  .tafel--raster .tschleier{background:linear-gradient(to bottom, transparent 50%, rgba(18,17,14,.9) 66%)}
  .tobjekt,.blatt--hoch,.browser--rechts{right:auto;left:50%;top:92px;transform:translateX(-50%);width:min(calc(100% - 96px),420px)}
  .blatt--hoch{width:min(calc(100% - 150px),230px)}
  .blatt .papier{padding:10px 10px 26px}
  .blatt .bcap{left:10px;right:10px;bottom:7px;font-size:9.5px}
  .blatt .bcap span+span{display:none}
  .blatt img{max-height:30svh}
  .stempel{font-size:11px;left:auto;right:-22px;bottom:auto;top:-16px;padding:6px 10px 5px}
  .tobjekt.handy{width:min(150px,38vw);top:84px}
  .handy .geraet{border-width:6px;border-radius:26px}
  .handy .schirm{border-radius:20px}
  .browser .handy{display:none}
  .tgrafik{top:96px}
  .brief{gap:8px}.brief .bz{padding:10px 12px}.brief .bz span{font-size:16px}
  .tgrafik .chips,.tgrafik .gnot{display:none}
  .beispiel{left:-8px;top:12px}
  .ab{gap:12px}
  .ab figcaption span+span,.ab figcaption b{display:none}
}
@media(max-width:760px){
  .wert--breit{grid-template-columns:1fr}
  .wert--breit dd.wgrafik{grid-column:1;grid-row:auto;margin-top:12px}
  .trichter{grid-template-columns:1fr;gap:6px}
  .trichter i{transform:rotate(90deg);justify-self:center}
  .fenster83{grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}
}
@media(max-width:600px){.wgrafik text{display:none}.wgrafik text.immer{display:block}}
@media(max-width:560px){
  .mehr{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .mkarte{scroll-snap-align:start;min-height:300px}
}
@media(max-width:420px){.werte{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .tbild img,.ebild img,.puls{animation:none}
  .js .tafel .tmass::before,.js .tafel .tlauf li[aria-current] i::after{transform:none;animation:none}
  .js .tafel .stempel,.js .tafel .einblenden,.js .wgrafik .einblenden{opacity:1;animation:none}
  .js .tafel .zeichne,.js .wgrafik .zeichne{stroke-dashoffset:0;animation:none}
  .faq2 details[open] .a{animation:none}
}