/* InnoSolv — Gestaltung der Webseite.
   Alle Maße und Farben 1:1 aus dem Design „InnoSolv Webseite.html“.
   Markenfarben der Werke kommen als CSS-Variablen aus der Datenbank:
   --c (Farbe), --ch (Farbe beim Darüberfahren), --sh (Schatten). */

:root{--ink:#0A0A0A;--blau:#2350FF;--rot:#E4032E;--ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marqueeR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes rise{from{opacity:0;transform:translateY(0.5em)}to{opacity:1;transform:none}}

/* Hervorhebungen aus der Verwaltung */
.g{color:#6E6E6E}
.x{color:var(--ink);font-style:italic;font-weight:800}
.k{color:var(--ink)}
.s{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.b{color:#7C97FF}
.r{color:#FF5A73}
h1 strong,h2 strong{font-weight:800}

.page{min-height:100vh;background:#FFFFFF;overflow-x:clip}
.wrap{max-width:1240px;margin:0 auto}

/* ---------------------------------------------------------------- Buttons */
.pill{display:inline-block;background:var(--c);color:#FFFFFF;border-radius:999px;font-weight:600;transition:background .2s,transform .2s,box-shadow .2s}
.pill:hover{color:#FFFFFF}
.pill-nav{padding:14px 24px}
.pill-nav:hover,.pill-sm:hover{background:var(--ch)}
.pill-hero{padding:16px 26px;font-size:16px;box-shadow:0 14px 30px -14px var(--sh)}
.pill-hero:hover{transform:translateY(-2px)}
.pill-sm{padding:12px 18px;font-size:15px}

/* Pfeil im Button wandert beim Darüberfahren nach rechts */
.pfeil{display:inline-block;transition:transform .3s var(--ease)}
a:hover .pfeil,.werk:hover .pfeil{transform:translateX(4px)}
.pill-nav,.pill-sm{box-shadow:0 10px 24px -14px var(--c)}
.pill-nav:hover,.pill-sm:hover{transform:translateY(-1px)}
.pill-logo{display:inline-flex;align-items:center;gap:10px;padding:13px 20px}
.pill-logo .werk-marke,.werk-cta .werk-marke,.fuss-werk .werk-marke{display:block;width:auto}

/* ------------------------------------------------------------- Kopfzeile */
.kopf{position:fixed;top:16px;left:clamp(12px,4.45vw,64px);right:clamp(12px,4.45vw,64px);z-index:50}
.kopf-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:82px;padding:12px 12px 12px 26px;background:rgba(251,251,252,.55);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.7);border-radius:100px;box-shadow:0 16px 40px -20px rgba(17,18,20,.25),inset 0 1px 0 rgba(255,255,255,.9);transition:background .3s,box-shadow .3s}
.kopf-logo{display:flex;align-items:center;justify-self:start}
.kopf-logo img{filter:brightness(0);height:30px;width:auto;display:block}
.kopf-menu{display:flex;align-items:center;gap:2px}
.kopf-menu a{padding:9px 16px;border-radius:100px;font-size:15.7px;font-weight:600;letter-spacing:-.01em;color:#111214;transition:background .2s}
.kopf-menu a:hover{background:rgba(17,18,20,.06);color:#111214}
.kopf-btns{display:flex;gap:8px;justify-self:end}
.kopf-werk{display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 22px;border-radius:100px;background:var(--c);color:#FFFFFF;box-shadow:0 10px 24px -14px var(--c);transition:transform .25s var(--ease),background .25s}
.kopf-werk:hover{transform:translateY(-2px);background:var(--ch);color:#FFFFFF}
.kopf-werk .werk-marke{display:block;width:auto}
.kopf-burger{display:none}
.kopf-panel{display:none}
.pfeil-schraeg{display:inline-block;font-size:15px;font-weight:600;line-height:1;transition:transform .25s var(--ease)}
.kopf-werk:hover .pfeil-schraeg{transform:translate(2px,-2px)}

/* ------------------------------------------------------------------ Hero */
.hero{--fx:.9;--fy:.4;position:relative;min-height:min(92vh,900px);display:flex;align-items:center;padding:calc(114px + clamp(56px,8vh,96px)) 24px clamp(96px,14vh,160px);overflow:hidden}
.hero-bild-rahmen{position:absolute;inset:0;overflow:hidden;animation:hero-zoom 2.4s var(--ease) both}
@keyframes hero-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* Das Foto wandert beim Scrollen langsamer als die Seite (Parallaxe, --py aus dem Skript). */
.hero-bild{position:absolute;inset:-6% 0 0;width:100%;height:106%;object-fit:cover;object-position:calc(var(--fx) * 100%) calc(var(--fy) * 100%);display:block;transform:translate3d(0,var(--py,0px),0);will-change:transform}
/* Punkte im Hero-Foto: sitzen an den Personen im Bild. Die Fläche hat dieselbe Lage wie das Foto
   (Zuschnitt „cover“, gleiche Ausrichtung --fx/--fy, gleiche Parallaxe und Zoom), deshalb bleiben die
   Punkte bei jeder Fenstergröße auf der Person. Lage pro Punkt in Prozent des Fotos (--x, --y). */
.hero-punkte{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;animation:hero-zoom 2.4s var(--ease) both}
.hero-punkte-flaeche{position:absolute;inset:-6% 0 0;container-type:size;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero-punkte-bild{--b:max(100cqw,calc(100cqh * var(--ratio)));--h:max(100cqh,calc(100cqw / var(--ratio)));position:absolute;margin:0;padding:0;list-style:none;width:var(--b);height:var(--h);left:calc((100cqw - var(--b)) * var(--fx));top:calc((100cqh - var(--h)) * var(--fy))}
.hero-punkt{position:absolute;left:var(--x);top:var(--y);width:0;height:0;pointer-events:auto}
.hero-punkt-dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--blau);border:3px solid #FFFFFF;box-shadow:0 6px 16px -4px rgba(10,10,10,.55);opacity:0;animation:punkt-ein .6s var(--ease) forwards;animation-delay:calc(.9s + var(--i) * .18s);transition:scale .3s var(--ease)}
.hero-punkt-dot::before,.hero-punkt-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;animation:punkt-puls 2.4s ease-out infinite;animation-delay:calc(1.6s + var(--i) * .5s)}
.hero-punkt-dot::after{animation-delay:calc(2.8s + var(--i) * .5s)}
@keyframes punkt-ein{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes punkt-puls{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.8);opacity:0}}
.hero-punkt-schild{position:absolute;width:max-content;max-width:340px}
.seite-links .hero-punkt-schild{right:22px;top:0;transform:translateY(-50%)}
.seite-rechts .hero-punkt-schild{left:22px;top:0;transform:translateY(-50%)}
/* oben/unten: Schild beginnt kurz links vom Punkt und läuft nach rechts (weg vom Text links) */
.seite-oben .hero-punkt-schild{bottom:24px;left:-30px}
.seite-unten .hero-punkt-schild{top:24px;left:-30px}
.hero-punkt-karte{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.85);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 24px 50px -24px rgba(10,10,10,.45),inset 0 1px 0 rgba(255,255,255,.9);opacity:0;animation:chip-ein .9s var(--ease) forwards,schweben 6s ease-in-out infinite;animation-delay:calc(1.05s + var(--i) * .18s),calc(2s + var(--i) * .7s);transition:background .3s,box-shadow .3s}
.hero-punkt-icon{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--blau);color:#FFFFFF;box-shadow:0 8px 18px -8px rgba(35,80,255,.7)}
.hero-punkt-icon svg{width:18px;height:18px}
.hero-punkt-text b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hero-punkt-text span{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#4A4A4A;text-wrap:balance}
.hero-punkt:hover .hero-punkt-karte{background:rgba(255,255,255,.92);box-shadow:0 28px 56px -22px rgba(10,10,10,.5),inset 0 1px 0 rgba(255,255,255,.95)}
.hero-punkt:hover .hero-punkt-dot{scale:1.2}
@keyframes chip-ein{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes schweben{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-scroll{position:absolute;left:50%;bottom:28px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#6E6E6E;animation:rise .9s 1.2s both}
.hero-scroll i{display:block;width:22px;height:34px;border-radius:12px;border:1.5px solid rgba(10,10,10,.28);position:relative}
.hero-scroll i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:maus 1.8s ease-in-out infinite}
@keyframes maus{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}70%{opacity:1;transform:translateY(9px)}100%{opacity:0;transform:translateY(12px)}}
/* Unter 1200 Pixel Breite rückt das Foto zu nah an den Text: dort ohne Punkte. */
@media (max-width:1199px){.hero-punkte{display:none}}
@media (max-width:640px){.hero-scroll{display:none}}
.hero-schleier{position:absolute;inset:0;background:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.92) 28%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,#FFFFFF 100%);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto}
.hero-text{max-width:660px;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hero h1{margin:0;font-size:clamp(42px,6vw,84px);line-height:.94;letter-spacing:-.045em;font-weight:700;display:flex;flex-direction:column}
.hero h1>span{display:inline-block;color:#8A8F9C;animation:rise .9s both}
.hero h1 .g{color:#8A8F9C}
.hero-lead{margin:0;max-width:520px;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:#2A2A2A;text-wrap:pretty;animation:rise .9s .45s both}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;animation:rise .9s .55s both}
/* Sterne: graue Grundreihe, darüber die goldene Reihe, so breit wie die Bewertung (--fuellung). */
.sterne{position:relative;display:inline-block;flex:none;line-height:1;letter-spacing:2px;color:rgba(10,10,10,.16)}
.sterne::before{content:"★★★★★";position:absolute;left:0;top:0;width:var(--fuellung,100%);overflow:hidden;white-space:nowrap;color:#F5B301}
/* Beleg unter den Hero-Buttons: Kundenfotos, Sterne, Bewertung, Zeile darunter */
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:2px;animation:rise .9s .65s both}
.hero-avatare{display:flex;padding-left:10px}
.hero-avatare img{width:42px;height:42px;margin-left:-10px;border-radius:50%;object-fit:cover;border:2.5px solid #FFFFFF;box-shadow:0 6px 14px -6px rgba(10,10,10,.4);background:#EEE}
.hero-proof-text{display:flex;flex-direction:column;gap:4px}
.hero-bewertung{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:#2A2A2A;text-wrap:balance}
.hero-bewertung .sterne{font-size:15px}
a.hero-bewertung:hover span:last-child{text-decoration:underline}
.hero-proof-zeile{font-size:13.5px;font-weight:500;color:#5A5A5A;text-wrap:balance}

/* --------------------------------------------------- Schwarzer Werke-Block */
.werke-block{position:relative;z-index:1;margin-top:24px;background:var(--ink);color:#FFFFFF;border-radius:40px}
.werke{padding:112px 24px 40px}
.werke-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.werke-kopf>div{max-width:760px}
.eyebrow{margin:0 0 16px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:.7em}
/* Punkt in der Farbe der Zeile, mit Lichthof; pulsiert wie bei BewerberWerk (2,4 s). */
.eyebrow::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 18%,transparent);animation:punkt-puls 2.4s ease-in-out infinite;will-change:transform,opacity}
@keyframes punkt-puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}
.eyebrow-pille{margin:0;padding:8px 16px 8px 14px;border-radius:999px;background:rgba(35,80,255,.08);border:1px solid rgba(35,80,255,.16);color:var(--blau);font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.werke .eyebrow{color:#8A8A8A}
.werke h2{margin:0;font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.045em;font-weight:700;text-wrap:balance}
.werke h2 .g{color:#8A8A8A}
.werke-text{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#B4B4B4}

/* Werk-Karten als Stapel: jede Karte bleibt oben kleben, die nächste schiebt
   sich darüber; die untere wird dabei per Skript leicht kleiner und dunkler
   (--sc, --hell). Beim Darüberfahren hebt sich die Karte (--lift) und ein
   Lichtschein folgt der Maus (--mx, --my). */
.werke-stapel{display:flex;flex-direction:column;gap:24px}
.werk{position:sticky;top:calc(118px + var(--i,0) * 18px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end;min-height:min(62vh,520px);padding:clamp(28px,3.6vw,52px);border-radius:28px;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -40px 80px -40px rgba(0,0,0,.35),0 30px 70px -30px var(--sh);overflow:hidden;color:#FFFFFF;transform:translateY(var(--lift,0px)) scale(var(--sc,1));transform-origin:50% 0;filter:brightness(var(--hell,1));transition:box-shadow .35s,--lift .35s;will-change:transform}
.werk::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.2),transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.werk:hover{--lift:-6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -40px 80px -40px rgba(0,0,0,.35),0 50px 100px -30px var(--shh);color:#FFFFFF}
.werk:hover::after{opacity:1}
.werk-links{display:flex;flex-direction:column;gap:22px;align-self:stretch}
.werk-logo{display:flex;align-items:center;margin-bottom:auto}
.werk-logo img{height:34px;display:block;filter:brightness(0) invert(1)}
.werk h3{margin:clamp(40px,8vh,96px) 0 0;font-size:clamp(34px,3.8vw,54px);line-height:1;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.werk p{margin:0;font-size:18px;line-height:1.55;max-width:520px;color:rgba(255,255,255,.88)}
.werk-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:#FFFFFF;color:var(--c);padding:16px 24px;border-radius:999px;font-weight:700;font-size:16px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);transition:transform .25s var(--ease)}
.werk:hover .werk-cta{transform:translateY(-2px)}
.werk-punkte{margin:0;padding:clamp(22px,2.4vw,32px);list-style:none;display:flex;flex-direction:column;gap:var(--abstand,22px);border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:17px;line-height:1.45;font-weight:500}
.werk-punkte{position:relative}
.werk-punkt{position:relative;display:flex;gap:14px;align-items:flex-start;color:rgba(255,255,255,.5);transition:color .45s}
/* Zeilen gleichmäßig umbrechen, kein einzelnes Wort allein in der letzten Zeile */
.werk-punkt-text{text-wrap:balance}
.werk-haken{flex:none;position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.4);color:rgba(255,255,255,.75);display:grid;place-items:center;font-size:12px;font-weight:800;margin-top:-3px;transition:background .45s,color .45s,border-color .45s,box-shadow .45s,transform .45s var(--ease)}
.werk-punkt.aktiv{color:#FFFFFF}
.werk-punkt.aktiv .werk-haken{background:#FFFFFF;border-color:#FFFFFF;color:var(--c);box-shadow:0 0 0 5px rgba(255,255,255,.14);transform:scale(1.04)}
/* Verbindungsstücke zwischen den Häkchen: beginnen und enden am Rand der Kreise
   und füllen sich beim Scrollen einzeln (--seg). So liegt nie eine Linie hinter
   einem noch nicht erreichten Kreis. */
.werk-punkte{--abstand:22px}
.werk-punkt:not(:last-child)::after{content:"";position:absolute;left:14px;top:31px;width:2px;height:calc(100% + var(--abstand) - 35px);border-radius:2px;background:linear-gradient(180deg,#FFFFFF calc(var(--seg,0) * 100%),rgba(255,255,255,.2) 0)}
.no-js .werk-punkt{color:#FFFFFF}
.no-js .werk-haken{background:#FFFFFF;color:var(--c)}
@property --lift{syntax:'<length>';inherits:true;initial-value:0px}
/* Am Computer: die Stichpunkte füllen die rechte Kartenhälfte von oben bis unten,
   im Stil der Leiste bei „Immer dabei“ (Nummer im Kreis, wird beim Scrollen aktiv).
   Jeder Punkt außer dem letzten nimmt gleich viel Höhe ein; das Linienstück läuft
   vom unteren Rand seines Kreises bis zum oberen Rand des nächsten. */
@media (min-width:861px){
  .werk-punkte{--kreis:56px;align-self:stretch;justify-content:flex-start;gap:0;padding:4px 0;background:none;border:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:clamp(18px,1.55vw,22px);font-weight:600;letter-spacing:-.01em}
  .werk-punkt{flex:1 1 0;gap:22px;align-items:flex-start}
  .werk-punkt:last-child{flex:0 0 auto}
  .werk-punkt-text{padding-top:calc((var(--kreis) - 1.35em) / 2);line-height:1.35}
  .werk-haken{width:var(--kreis);height:var(--kreis);margin-top:0;font-size:16px;font-weight:700;letter-spacing:-.02em;color:rgba(255,255,255,.7);border-width:1.5px}
  .werk-punkt.aktiv .werk-haken{color:var(--c);box-shadow:0 0 0 6px rgba(255,255,255,.14),0 14px 30px -12px rgba(0,0,0,.45)}
  .werk-punkt:not(:last-child)::after{left:calc(var(--kreis) / 2 - 1px);top:calc(var(--kreis) + 8px);height:auto;bottom:8px}
}
@media (max-width:860px){
  /* Auf dem Handy sind die Karten höher als der Bildschirm: kein Stapeln, sonst wäre ihr unterer Teil nie zu sehen. */
  .werk{grid-template-columns:1fr;align-items:start;min-height:0;position:relative;top:auto}
  .werk h3{margin-top:28px}
}

@media (max-height:700px){.werk{position:relative;top:auto}}

/* Kundenlogos in drei Laufzeilen (Aufbau wie bei BewerberWerk) */
.logos{padding:96px 0 40px}
.logos-kopf{padding:0 24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.logos .eyebrow{color:#8A8A8A}
.logos h2{margin:0 0 16px;font-size:clamp(34px,4.4vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.logos-kopf p{margin:0;max-width:620px;font-size:17px;line-height:1.6;color:#B4B4B4}
.logos-maske{margin-top:clamp(40px,6vh,64px);padding-top:clamp(20px,3vh,36px);border-top:1px solid rgba(255,255,255,.08);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-zeile{display:flex;width:max-content;gap:clamp(56px,6vw,104px);align-items:center;padding:clamp(12px,1.8vh,22px) 0;will-change:transform}
.logo-zeile.nach-links{animation:marquee var(--dur,60s) linear infinite}
.logo-zeile.nach-rechts{animation:marqueeR var(--dur,60s) linear infinite}
.logos-maske:hover .logo-zeile{animation-play-state:paused}
.logo-zeile img{height:var(--logo-h,48px);width:auto;flex-shrink:0;display:block;object-fit:contain;opacity:.5;transition:opacity .3s,transform .3s var(--ease)}
.logo-zeile img:hover{opacity:1;transform:scale(1.08)}
@media (max-width:900px){.logo-zeile{gap:40px;padding:10px 0}.logo-zeile img{height:calc(var(--logo-h,48px) * .75)}}
/* Kennzahlen */
.zahlen{padding:0 24px 104px}
.zahlen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:960px;margin:0 auto}
.zahl{position:relative;padding:44px 28px;text-align:center;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.zahl::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.zahl:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.zahl:hover::before{opacity:1}
.zahl-wert{font-size:clamp(52px,5.8vw,84px);font-weight:700;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#FFFFFF 30%,#9C9CA6);-webkit-background-clip:text;background-clip:text;color:transparent}
.zahl-wert .grau{color:transparent}
.zahl p{margin:14px 0 0;color:#C8C8C8;font-size:16px;line-height:1.45}

/* ---------------------------------------------------------- Wer wir sind */
.wer{position:relative;margin-top:-40px;padding:160px 24px 160px;background:linear-gradient(180deg,#F4F4F4 0,#F4F4F4 calc(100% - 240px),#FFFFFF 100%);color:var(--ink)}
.zwei-spalten{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:64px}
.wer .zwei-spalten{align-items:start;gap:clamp(48px,7vw,112px)}
/* Lange Wörter wie „Gebäudedienstleistung“ ragten in das Foto: etwas kleiner
   und mit deutscher Silbentrennung, damit sie in der Spalte bleiben. */
.wer .h2-gross{font-size:clamp(34px,4vw,54px);hyphens:manual;-webkit-hyphens:manual;overflow-wrap:break-word}
.wer-text{display:flex;flex-direction:column;gap:24px}
.wer .eyebrow{margin:0;color:var(--blau)}
.h2-gross{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
/* Überschrift färbt sich beim Scrollen Wort für Wort ein (wie „Über uns“ bei BewerberWerk) */
.scrolltext .w{color:#C9C9CE;transition:color .35s}
.scrolltext .w.an{color:var(--ink)}
.scrolltext .w.hl.an{color:var(--blau)}
.no-js .scrolltext .w{color:var(--ink)}
.wer-text p.absatz{margin:0;font-size:18px;line-height:1.6;color:#3A3A3A;text-wrap:pretty}
.zitat{position:relative;margin:8px 0 0;padding:4px 0 0 26px;border-left:3px solid var(--blau);font-family:'Instrument Serif',serif;font-style:italic;font-size:28px;line-height:1.3;color:var(--ink)}
.wer figure{margin:0;display:flex;flex-direction:column;gap:16px}
.wer-foto{border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:#E4E4E4;box-shadow:0 40px 90px -40px rgba(10,10,10,.3)}
.wer-foto{position:relative}
.wer-foto img{width:100%;height:112%;margin-top:-6%;object-fit:cover;display:block;transform:translate3d(0,var(--py,0px),0) scale(var(--zoom,1));transition:scale .6s;will-change:transform}
.wer-foto:hover img{--zoom:1.03}
.wer figcaption{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gf{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:20px;background:#FFFFFF;border:1px solid rgba(10,10,10,.06);box-shadow:0 18px 40px -30px rgba(10,10,10,.35);transition:transform .35s var(--ease),box-shadow .35s}
.gf:hover{transform:translateY(-4px);box-shadow:0 28px 50px -30px rgba(10,10,10,.45)}
.gf-name{font-weight:700;font-size:18px}
.gf-rolle{color:#5E5E5E;font-size:15px}
.gf p{margin:0;color:#3A3A3A;font-size:14px;line-height:1.5;text-wrap:pretty}

/* --------------------------------------------------------- Kundenstimmen */
.stimmen{padding:120px 24px;background:linear-gradient(180deg,#FFFFFF 0,#F6F6F7 18%,#F6F6F7 82%,#FFFFFF 100%)}
.stimmen-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.stimmen-kopf{align-self:stretch}
.stimmen-kopf>div{position:sticky;top:140px}
.stimmen .eyebrow{color:var(--blau)}
.stimmen-kopf p{margin:18px 0 0;font-size:17px;line-height:1.6;color:#3A3A3A;max-width:420px}
.siegel{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:16px 20px 16px 18px;border-radius:20px;background:#FFFFFF;border:1px solid rgba(10,10,10,.07);box-shadow:0 24px 50px -30px rgba(10,10,10,.4);transition:transform .3s var(--ease),box-shadow .3s}
a.siegel:hover{transform:translateY(-3px);box-shadow:0 32px 60px -30px rgba(10,10,10,.5)}
.siegel-zahl{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.siegel-text{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:#3A3A3A}
.siegel-text .sterne{font-size:17px}
.siegel-pfeil{font-size:16px;color:#8A8A8A;transition:transform .25s var(--ease)}
a.siegel:hover .siegel-pfeil{transform:translate(2px,-2px);color:var(--ink)}
.stimmen-liste{display:flex;flex-direction:column;gap:16px}
.stimme{position:relative;margin:0;padding:32px 34px 28px;border-radius:24px;background:#FFFFFF;border:1px solid rgba(10,10,10,.06);box-shadow:0 24px 50px -36px rgba(10,10,10,.35);transition:transform .35s var(--ease),box-shadow .35s}
.stimme:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(10,10,10,.45)}
.stimme-zeichen{position:absolute;right:28px;top:14px;font-family:'Instrument Serif',serif;font-size:96px;line-height:1;color:rgba(35,80,255,.12);pointer-events:none}
.stimme blockquote{margin:0;font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.5;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.stimme figcaption{display:flex;align-items:center;gap:14px;margin-top:22px}
.stimme figcaption img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:#EEE}
.stimme figcaption b{display:block;font-size:16px;color:var(--ink)}
.stimme figcaption small{display:block;margin-top:2px;font-size:14px;color:#6E6E6E}
@media (max-width:980px){
  .stimmen{padding:90px 24px}
  .stimmen-in{grid-template-columns:1fr}
  .stimmen-kopf>div{position:static}
  .stimme{padding:26px 24px 22px}
  .stimme-zeichen{font-size:72px;right:18px}
}

/* ----------------------------------------------------------- Immer dabei */
.dabei{position:relative;padding:140px 24px;background:#FFFFFF;overflow:clip}
/* Zwei weiche Farbflächen im Hintergrund geben Tiefe (Rot links oben, Blau rechts unten). */
/* Weiche Farbflächen im Hintergrund (Rot links, Blau rechts). Oben und unten
   laufen sie aus, damit an den Abschnittsgrenzen keine harte Kante entsteht. */
.dabei::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 520px at 6% 30%,rgba(228,3,46,.07),transparent 70%),radial-gradient(700px 560px at 96% 72%,rgba(228,3,46,.05),transparent 70%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.dabei .zwei-spalten{position:relative;z-index:1;gap:clamp(48px,7vw,112px)}
.dabei .eyebrow{color:var(--rot)}
.dabei h2{margin:0 0 48px;font-size:clamp(32px,3.8vw,50px);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance}

/* Nummerierte Leiste mit Linie, die sich beim Scrollen füllt */
.dabei-liste{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.dabei-linie{position:absolute;left:31px;top:34px;bottom:34px;width:2px;border-radius:2px;background:rgba(10,10,10,.08)}
.dabei-linie-fuell{position:absolute;inset:0;border-radius:inherit;transform-origin:top;transform:scaleY(var(--fill,0));background:var(--ink)}
.dabei-punkt{position:relative;display:flex;gap:26px;align-items:center;padding:16px 20px 16px 0;border-radius:22px;transition:background .35s,transform .35s var(--ease),box-shadow .35s}
.dabei-punkt:hover{background:#FFFFFF;transform:translateX(6px);box-shadow:0 24px 50px -28px rgba(10,10,10,.35)}
.dabei-nr{flex:none;position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;border:1.5px solid rgba(10,10,10,.12);font-size:17px;font-weight:700;letter-spacing:-.02em;color:#A3A3AA;transition:background .45s,color .45s,border-color .45s,box-shadow .45s,transform .45s var(--ease)}
.dabei-text{font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:500;color:#A3A3AA;transition:color .45s;text-wrap:pretty}
.dabei-punkt.aktiv .dabei-nr{background:var(--ink);border-color:var(--ink);color:#FFFFFF;box-shadow:0 12px 28px -12px rgba(10,10,10,.55)}
.dabei-punkt.aktiv .dabei-text{color:#1A1A1A}
.dabei-punkt:hover .dabei-nr{transform:scale(1.06)}
.no-js .dabei-nr{background:var(--ink);color:#fff}
.no-js .dabei-text{color:#1A1A1A}

/* Schwarzer Kasten: bleibt beim Scrollen stehen und kippt leicht mit der Maus */
.nicht-spalte{position:relative;perspective:1200px;align-self:stretch}
.nicht{position:sticky;top:140px;background:radial-gradient(420px circle at var(--mx,85%) var(--my,0%),rgba(228,3,46,.22),transparent 60%),#0A0A0A;color:#FFFFFF;border:1px solid rgba(255,255,255,.08);box-shadow:0 50px 90px -40px rgba(10,10,10,.55),0 0 0 1px rgba(10,10,10,.9);border-radius:28px;padding:44px;display:flex;flex-direction:column;gap:28px;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease)}
.nicht .eyebrow{margin:0;color:#FF5A73}
.nicht-liste{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.nicht-liste li{display:flex;align-items:center;gap:16px}
.nicht-x{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(228,3,46,.16);color:#FF5A73;font-size:13px;font-weight:800}
.nicht-wort{position:relative;font-size:clamp(22px,2.3vw,32px);font-weight:700;letter-spacing:-.03em;color:#8A8A8A}
.nicht-wort del{text-decoration:none;background-image:linear-gradient(var(--rot),var(--rot));background-repeat:no-repeat;background-position:0 58%;background-size:calc(var(--strike,0) * 100%) 3px;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.no-js .nicht-wort del{--strike:1}
.nicht-text{margin:0;font-size:18px;line-height:1.55;color:#E4E4E7;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.nicht-text strong{color:#FFFFFF}
.nicht-hinweis{margin:0;font-size:14px;line-height:1.5;color:#8A8A8A}
@media (max-width:1040px){.nicht{position:relative;top:auto}}
@media (max-width:640px){.nicht{padding:30px 24px}.nicht-wort{font-size:21px}.nicht-liste li{gap:12px}.nicht-x{width:26px;height:26px;font-size:11px}}

/* ------------------------------------------------------------------- FAQ */
/* Zwei Spalten: links bleibt die Überschrift beim Scrollen stehen, rechts die Fragen als Karten. */
.faq{padding:140px 24px}
.faq-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq-kopf{align-self:stretch}
.faq-kopf>div{position:sticky;top:140px;display:flex;flex-direction:column;align-items:flex-start}
.faq-kopf h2{margin:0 0 20px}
.faq-kopf .eyebrow{color:var(--ink)}
.faq-kopf p.unter{margin:0;font-size:17px;line-height:1.55;color:#3A3A3A;max-width:420px}
.faq-kopf p.unter a{color:var(--ink);font-weight:600;white-space:nowrap;border-bottom:2px solid var(--blau)}
.faq-liste{display:flex;flex-direction:column;gap:12px}
.frage{position:relative;border-radius:22px;background:#F5F5F6;border:1px solid transparent;transition:background .35s,box-shadow .35s,border-color .35s,transform .35s var(--ease)}
.frage:hover{background:#EFEFF1}
.frage.offen{background:#FFFFFF;border-color:rgba(10,10,10,.06);box-shadow:0 30px 60px -34px rgba(10,10,10,.35)}
.frage h3{margin:0;font:inherit}
.frage button{width:100%;display:flex;align-items:center;gap:18px;padding:24px 24px 24px 26px;background:none;border:none;color:var(--ink);font-family:inherit;font-size:19px;font-weight:600;text-align:left;cursor:pointer;letter-spacing:-.01em}
.frage button:focus-visible{outline:2px solid var(--blau);outline-offset:-4px;border-radius:22px}
.frage-nr{flex:none;font-size:13px;font-weight:700;color:#A3A3AA;letter-spacing:.04em;transition:color .35s}
.frage.offen .frage-nr{color:var(--blau)}
.frage-text{flex:1}
.plus{flex:none;width:38px;height:38px;border-radius:50%;background:#FFFFFF;border:1px solid rgba(10,10,10,.1);display:grid;place-items:center;font-size:20px;font-weight:400;transition:transform .35s var(--ease),background .35s,color .35s}
.frage.offen .plus{transform:rotate(45deg);background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
.antwort{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.frage.offen .antwort{grid-template-rows:1fr}
.antwort>div{overflow:hidden}
.antwort-in{padding:0 72px 26px 57px;display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.6;color:#3A3A3A}
.antwort-in p{margin:0}
/* Ohne JavaScript bleiben alle Antworten offen. */
.no-js .antwort{grid-template-rows:1fr}
@media (max-width:980px){
  .faq-in{grid-template-columns:1fr}
  .faq-kopf>div{position:static;align-items:center;text-align:center}
  .antwort-in{padding:0 24px 24px 26px}
}

/* --------------------------------------------------------------- Kontakt */
.kontakt{padding:0 24px 120px}
.kontakt-box{position:relative;isolation:isolate;max-width:1240px;margin:0 auto;border-radius:36px;overflow:hidden;background:radial-gradient(600px circle at 12% 0%,rgba(35,80,255,.32),transparent 60%),radial-gradient(600px circle at 88% 100%,rgba(35,80,255,.2),transparent 60%),var(--ink);color:#FFFFFF;padding:clamp(48px,7vw,104px) clamp(24px,5vw,72px);display:flex;justify-content:center}
/* Lichtrand: ein Farbverlauf läuft langsam um den Kasten. */
.kontakt-box::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1px;background:conic-gradient(from var(--winkel,0deg),transparent 0 62%,rgba(35,80,255,.95) 78%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:lichtrand 8s linear infinite}
@property --winkel{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes lichtrand{to{--winkel:360deg}}
.kontakt-licht{position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.kontakt-box:hover .kontakt-licht{opacity:1}
.kontakt h2{font-size:clamp(38px,5vw,66px)}
.kontakt-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;max-width:760px}
.kontakt .eyebrow{margin:0}
.kontakt-text{margin:0;font-size:18px;line-height:1.55;max-width:440px}
.kontakt-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.kontakt-wege{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px}
.kontakt-tel{color:#FFFFFF;font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em}
.kontakt-mail{color:#FFFFFF;font-size:18px;font-weight:500}
.kontakt-tel:hover,.kontakt-mail:hover{color:#FFFFFF;text-decoration:underline}
.kontakt-bewertung{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:9px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.14);font-size:14px;color:rgba(255,255,255,.82);transition:background .25s,border-color .25s}
.kontakt-bewertung .sterne{color:rgba(255,255,255,.22)}
a.kontakt-bewertung:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#FFFFFF}

/* ---------------------------------------------------------------- Footer */
.fuss{background:var(--ink);color:#FFFFFF;border-radius:40px 40px 0 0;padding:72px 24px 32px}
.fuss-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:40px}
.fuss-marke{grid-column:span 2;min-width:0;display:flex;flex-direction:column;gap:16px;max-width:360px}
.fuss-marke img{height:30px;align-self:flex-start}
.fuss-marke p{margin:0;color:#A1A1AA;font-size:16px;line-height:1.5}
.fuss-spalte{display:flex;flex-direction:column;gap:12px;font-size:15px}
.fuss-titel{color:#8A8A8A;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.fuss-werk{display:flex;gap:10px;align-items:center}
.fuss-werk span{width:10px;height:10px;border-radius:3px;background:var(--c)}
.fuss-werk .werk-marke{opacity:.92;transition:opacity .2s}
.fuss-werk:hover .werk-marke{opacity:1}
.fuss-adresse{color:#C8C8C8;line-height:1.5}
.fuss-unten{max-width:1240px;margin:56px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#8A8A8A}
.fuss-unten nav{display:flex;gap:20px}
.fuss-unten a{color:#8A8A8A}
.fuss-unten a:hover{color:#FFFFFF}
.nach-oben{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;border:1px solid rgba(255,255,255,.14);transition:background .25s,border-color .25s}
.nach-oben:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.nach-oben span{display:inline-block;transition:transform .25s var(--ease)}
.nach-oben:hover span{transform:translateY(-2px)}
@media (max-width:440px){.fuss-marke{grid-column:auto}}

/* ------------------------------------------------------------ Unterseiten */
.recht{padding:180px 24px 120px}
.recht-in{max-width:820px;margin:0 auto}
.recht .eyebrow{color:var(--blau)}
.recht h1{margin:0 0 24px;font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.04em;font-weight:700}
.recht-lead{margin:0 0 32px;font-size:19px;line-height:1.55;color:#3A3A3A}
.recht-hinweis{margin:0 0 32px;padding:20px 24px;border-radius:16px;background:#F4F4F4;font-size:16px;line-height:1.55}
.recht-text{font-size:17px;line-height:1.65;color:#2A2A2A;overflow-wrap:anywhere}
.recht-text h2{margin:48px 0 12px;font-size:26px;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.recht-text h3{margin:32px 0 8px;font-size:20px;line-height:1.3;color:var(--ink)}
.recht-text h4{margin:24px 0 6px;font-size:17px;color:var(--ink)}
.recht-text p{margin:0 0 14px}
.recht-text ul,.recht-text ol{margin:0 0 14px;padding-left:22px}
.recht-text a{color:var(--blau);text-decoration:underline;text-underline-offset:2px}
.recht-text table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.recht-text th,.recht-text td{padding:10px 12px;border-bottom:1px solid rgba(10,10,10,.1);text-align:left;vertical-align:top}

/* Wer wir sind, einspaltig: Foto direkt nach der Überschrift, dann der Text. */
@media (max-width:1100px){
  .wer{padding-top:120px;padding-bottom:110px}
  .wer .zwei-spalten{gap:22px}
  .wer-text{display:contents}
  .wer-eyebrow{order:1;justify-self:start}
  .wer .h2-gross{order:2}
  .wer figure{order:3;margin:10px 0 6px}
  .wer .absatz{order:4}
  .wer .zitat{order:5}
}

/* ---------------------------------------------------------------- Team (wie BewerberWerk) */
.team{padding:110px 24px 30px;background:#FFFFFF}
.team-kopf{max-width:720px;margin-bottom:clamp(48px,7vw,80px)}
.team .eyebrow{color:var(--blau)}
.team-kopf p{margin:18px 0 0;font-size:18px;line-height:1.6;color:#3A3A3A;max-width:560px}
.gf-reihe{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:center;margin-bottom:clamp(64px,8vw,104px)}
.gf-reihe.gespiegelt{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.gf-reihe.gespiegelt .gf-foto{order:2}
.gf-foto{border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#EDEDEF;box-shadow:0 40px 80px -40px rgba(10,10,10,.35)}
.gf-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.gf-foto:hover img{transform:scale(1.04)}
.gf-rolle{margin:0;font-weight:700;font-size:12.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--blau)}
.gf-text h3{margin:10px 0 0;font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.gf-absatz{margin:18px 0 0;max-width:54ch;font-size:clamp(16px,1.3vw,18px);font-weight:500;line-height:1.65;color:#3A3A3A}
.gf-fakten{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.gf-fakten li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:600;line-height:1.45;color:var(--ink);text-wrap:pretty}
.gf-fakten svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--blau)}
@media (max-width:860px){
  .team{padding-top:80px}
  .gf-reihe,.gf-reihe.gespiegelt{grid-template-columns:1fr;gap:26px}
  .gf-reihe.gespiegelt .gf-foto{order:0}
  .gf-foto{aspect-ratio:1/1;max-height:520px}
}

/* Kopfzeile auf kleineren Bildschirmen: Menü ausblenden (es steht auch im Footer),
   Logo und die zwei Werk-Buttons bleiben. */
@media (max-width:980px){
  .kopf-in{grid-template-columns:1fr auto;min-height:64px;padding:8px 8px 8px 20px;transition:background .3s,box-shadow .3s,border-radius .3s}
  .kopf-menu,.kopf-btns{display:none}
  .kopf-logo img{height:24px}
  /* Hamburger: zwei Striche, werden beim Öffnen zum X */
  .kopf-burger{display:grid;place-items:center;position:relative;width:48px;height:48px;border:none;border-radius:50%;background:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .kopf-burger span{position:absolute;left:15px;right:15px;height:2px;border-radius:2px;background:#FFFFFF;transition:transform .35s var(--ease),top .35s var(--ease)}
  .kopf-burger span:first-child{top:19px}
  .kopf-burger span:last-child{top:27px}
  .kopf.menu-offen .kopf-burger span:first-child{top:23px;transform:rotate(45deg)}
  .kopf.menu-offen .kopf-burger span:last-child{top:23px;transform:rotate(-45deg)}
  .kopf.menu-offen .kopf-in{background:rgba(255,255,255,.96)}
  /* Menüfläche klappt unter der Leiste auf */
  .kopf-panel{display:block;position:absolute;left:0;right:0;top:calc(100% + 10px);padding:10px 18px 18px;border-radius:28px;background:rgba(255,255,255,.96);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.8);box-shadow:0 30px 60px -24px rgba(17,18,20,.35);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top center;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s .35s}
  .kopf.menu-offen .kopf-panel{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s}
  .kopf-panel nav{display:flex;flex-direction:column}
  .kopf-panel-link{display:flex;justify-content:space-between;align-items:center;padding:18px 6px;border-bottom:1px solid rgba(10,10,10,.08);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  .kopf-panel-link span{color:#A3A3AA;font-weight:500}
  .kopf-panel-werke{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .kopf-panel-werk{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:18px;background:var(--c);color:#FFFFFF;box-shadow:0 12px 26px -14px var(--c)}
  .kopf-panel-werk .werk-marke{display:block;width:auto}
  .kopf-panel-werk:hover{color:#FFFFFF}
}
@media (max-width:560px){
  .hero-text{gap:18px}
  .hero h1{font-size:38px}
  .hero-lead{font-size:16.5px;line-height:1.5}
  .hero-btns{gap:10px}
  .pill-hero{padding:14px 22px;font-size:15px}
  .hero-avatare img{width:36px;height:36px}
  .hero-bewertung{flex-direction:column;align-items:flex-start;gap:3px;font-size:13.5px}
  .kopf{top:10px}
  .kopf-in{min-height:60px;padding:6px 6px 6px 18px}
  .kopf-logo img{height:21px}
  .recht{padding-top:120px}
  /* Hero: die kleine Zeile oben bleibt einzeilig */
  .eyebrow-pille{font-size:12px;padding:7px 12px 7px 11px;gap:.55em;white-space:nowrap;max-width:100%}
  .eyebrow-pille::before{width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}
}

/* ------------------------------------------- Handy (Abweichung vom Design)
   Im Design bricht die Kopfzeile auf dem Handy in drei Zeilen um und deckt
   ein Viertel des Bildschirms ab; der Hero-Text liegt fast ohne Aufhellung
   auf dem Foto. Beides nur für schmale Bildschirme verbessert. */
@media (max-width:640px){
  .hero{padding-top:118px;padding-bottom:64px;min-height:0}
  .hero{--fx:.7;--fy:.5}
  .hero-schleier{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 55%,rgba(255,255,255,.35) 82%,#FFFFFF 100%)}
}

/* Dünner Balken ganz oben zeigt, wie weit man gescrollt hat. */
.scroll-fortschritt{position:fixed;left:0;top:0;right:0;z-index:60;height:3px;background:var(--blau);transform-origin:0 50%;transform:scaleX(var(--fortschritt,0));pointer-events:none}
/* Magnet-Buttons folgen der Maus ein Stück (--tx, --ty aus dem Skript). */
.magnet{translate:var(--tx,0px) var(--ty,0px);transition:translate .35s var(--ease),transform .2s,box-shadow .2s,background .2s}

/* ------------------------------------------------- Einblenden beim Scrollen */
.js [data-reveal].vor{opacity:0;transform:translateY(32px);filter:blur(10px)}
.js [data-reveal].an{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms),filter .9s var(--ease) var(--d,0ms)}

/* Weiches Scrollen (Lenis, wie bei BewerberWerk) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1>span,.hero-lead,.hero-btns{animation:none}
  .eyebrow::before{animation:none}
  .nicht-wort del{--strike:1!important}
  .hero-bild-rahmen,.hero-punkte,.hero-punkt-dot,.hero-punkt-dot::before,.hero-punkt-dot::after,.hero-punkt-karte,.kontakt-box::before,.hero-scroll i::after{animation:none!important}
  .hero-punkt-dot,.hero-punkt-karte{opacity:1}
  .hero-bild,.hero-punkte-flaeche,.wer-foto img{transform:none!important}
  .magnet{translate:none!important}
  .logo-zeile{animation:none!important;flex-wrap:wrap;justify-content:center;width:100%}
  .logo-zeile img[aria-hidden="true"]{display:none}
  .werk{transform:none!important;filter:none!important}
  .nicht{transform:none!important}
  .dabei-linie-fuell{transform:none}
  .dabei-nr{background:var(--ink);color:#fff}
  .dabei-text{color:#1A1A1A}
  .scrolltext .w{color:var(--ink)}
  .scrolltext .w.hl{color:var(--blau)}
  .js [data-reveal].vor{opacity:1;transform:none;filter:none}
}