/* ==========================================================================
   obinet® — Basis-Stylesheet
   Statische Site, Neuaufbau 2026. Design nach dem Stand der alten Website.
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------
   Proxima Nova wird vom eigenen Server ausgeliefert. Kein Adobe Fonts, kein
   externer Aufruf — die Schrift steht damit sofort und ohne Einwilligung.

   Lizenzhinweis für spätere Bearbeiter: Diese Dateien stammen aus einem
   öffentlichen Webfont-Paket ohne beiliegenden Lizenznachweis. Proxima Nova
   ist kostenpflichtig; Self-Hosting erfordert eine eigene Webfont-Lizenz von
   Mark Simonson Studio / Fontspring. Der Betreiber wurde darauf hingewiesen
   und hat sich am 18.08.2026 bewusst für diesen Weg entschieden.
   Wird die Lizenz erworben, ändert sich technisch nichts — nur dieser
   Hinweis kann dann entfallen.                                         */
@font-face{font-family:"Proxima Nova";src:url("../fonts/pn-200.woff2") format("woff2"),url("../fonts/pn-200.woff") format("woff");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/pn-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/pn-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/pn-700.woff2") format("woff2"),url("../fonts/pn-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Proxima Nova";src:url("../fonts/pn-900.woff2") format("woff2"),url("../fonts/pn-900.woff") format("woff");font-weight:900;font-style:normal;font-display:swap}

/* --- Design-Tokens ------------------------------------------------------ */
:root{
  --bg:#0a0a0a;
  --bg-2:#121218;
  --bg-3:#1b1a2e;
  --fg:#ffffff;
  --fg-muted:#a2a2a2;
  --fg-dim:#757575;
  --line:rgba(255,255,255,.12);

  --magenta:#c50c93;
  --violett:#b817d7;
  --blau:#262c58;
  --mint:#58e8b7;
  --gold:#e0a240;

  --verlauf:linear-gradient(120deg,var(--magenta) 0%,var(--violett) 55%,var(--blau) 100%);
  --verlauf-text:linear-gradient(100deg,#ff3fb4 0%,var(--violett) 60%,#6f7bff 100%);

  /* Selbst gehostet — siehe Lizenzhinweis oben. */
  --font:"Proxima Nova","Avenir Next",Avenir,"Segoe UI",Roboto,system-ui,Helvetica,Arial,sans-serif;
  --breite:1440px;   /* Desktop nutzt mehr Fläche; Fließtext bleibt durch die
                        Spaltenbreite in .split trotzdem gut lesbar. */
  --pad:clamp(1.25rem,4vw,3rem);
  --radius:14px;
  --t:.35s cubic-bezier(.22,.61,.36,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font);font-weight:400;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;font-weight:900;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,5.2rem)}
h2{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.4rem)}
h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem)}
p{margin:0 0 1.15em}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}

/* --- Hilfsklassen ------------------------------------------------------- */
.wrap{width:min(100% - var(--pad)*2,var(--breite));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.verlauf-text{background:var(--verlauf-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin:0 0 1rem}
section{padding-block:clamp(4rem,10vw,8rem)}

/* --- Kopfzeile -----------------------------------------------------------
   Volle Breite: Logo ganz links, Navigation ganz rechts.
   Der vertikale Randabstand ist an die Logohöhe gekoppelt (Logohöhe − 10 %).
   Das Logo-SVG ist 388 × 83, seine Höhe also Breite × 83/388.           */
.kopf{
  --logo-b:clamp(130px,13vw,172px);
  --logo-h:calc(var(--logo-b) * 83 / 388);
  --luft:calc(var(--logo-h) * .9);
  position:fixed;inset:0 0 auto;z-index:100;
  padding-block:var(--luft);
  transition:background var(--t),padding var(--t);
}
.kopf.gescrollt{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);
  padding-block:calc(var(--luft) * .62);border-bottom:1px solid var(--line)}
.kopf__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  width:100%;max-width:none;padding-inline:clamp(1.25rem,3.2vw,3.5rem)}
.kopf__logo{display:flex;align-items:center}
.kopf__logo img{width:var(--logo-b);height:auto;display:block}
.nav{display:flex;gap:clamp(1.2rem,3vw,2.6rem);align-items:center}
.nav a{font-weight:600;font-size:.95rem;letter-spacing:.02em;position:relative;padding-block:.3rem}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--verlauf);transition:width var(--t)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav-toggle{display:none;background:none;border:0;color:var(--fg);cursor:pointer;padding:.5rem;margin:-.5rem;position:relative;z-index:100}
.nav-toggle svg{width:26px;height:26px}

@media(max-width:760px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:2rem;
       background:rgba(10,10,10,.97);backdrop-filter:blur(20px);
       transform:translateX(100%);transition:transform var(--t);z-index:99}
  .nav.offen{transform:translateX(0)}
  .nav a{font-size:1.6rem;font-weight:700}
}

/* --- Hero mit Slides ----------------------------------------------------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding-top:6rem}
.hero__buehne{position:absolute;inset:0;z-index:0}
.hero__slide{position:absolute;inset:0;opacity:0}
.hero__slide.aktiv{opacity:1}
.hero__slide video,.hero__slide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--fokus,center);opacity:.42;filter:saturate(1.15)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(197,12,147,.30),transparent 62%),
             radial-gradient(ellipse at 15% 85%,rgba(38,44,88,.55),transparent 60%),
             linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.25) 45%,var(--bg) 100%)}
.hero__inhalt{position:relative;z-index:2;max-width:62rem}
.hero__text{position:relative}
.hero__folie{position:absolute;inset:0;display:grid;align-content:center;opacity:0;pointer-events:none}
.hero__folie.aktiv{position:relative;opacity:1;pointer-events:auto}
.hero h1{margin-bottom:.35em;text-wrap:balance}
.hero__lead{font-size:clamp(1.05rem,.98rem + .5vw,1.35rem);color:var(--fg-muted);max-width:46rem;margin-inline:auto;text-wrap:pretty}

/* Slide-Navigation */
.hero__punkte{position:absolute;bottom:clamp(5.5rem,9vh,7rem);left:50%;transform:translateX(-50%);
  z-index:3;display:flex;gap:.85rem}
.hero__punkt{width:34px;height:3px;border:0;padding:0;cursor:pointer;border-radius:2px;
  background:rgba(255,255,255,.25);position:relative;overflow:hidden;transition:background var(--t)}
.hero__punkt::after{content:"";position:absolute;inset:0;background:var(--verlauf);
  transform:scaleX(0);transform-origin:left;border-radius:2px}
.hero__punkt[aria-selected="true"]::after{transform:scaleX(1)}
.hero__punkt:hover{background:rgba(255,255,255,.45)}

/* Scroll-Hinweis */
.hero__scroll{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:3;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-dim);
  display:grid;justify-items:center;gap:.6rem}
.hero__scroll span{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--mint),transparent)}

/* --- Buttons ------------------------------------------------------------
   Flach, ohne Relief. Die erste Regel setzt bewusst border und background
   zurück: Bei <button> würde sonst der Browserstandard durchschlagen —
   grauer Reliefrand und heller Grund. Statt Tiefe gibt es einen Glanz,
   der beim Überfahren einmal durchläuft.                                */
.btn{position:relative;overflow:hidden;isolation:isolate;
     display:inline-flex;align-items:center;gap:.7rem;padding:.95rem 2rem;
     border:0;border-radius:999px;background:none;color:inherit;cursor:pointer;
     font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.06em;
     text-transform:uppercase;line-height:1;text-align:center;
     transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);
     will-change:transform}
/* Glanzstreifen — liegt über der Fläche und wandert bei Hover hindurch. */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
     background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
     transform:skewX(-18deg);opacity:0;transition:opacity .2s ease}
.btn:hover::after,.btn:focus-visible::after{opacity:1;animation:glanz .75s ease-out}
@keyframes glanz{from{left:-60%}to{left:115%}}

.btn--primaer{background:var(--verlauf);color:#fff;
     box-shadow:0 4px 22px rgba(197,12,147,.30)}
.btn--primaer:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(197,12,147,.42)}

.btn--geist{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--fg)}
.btn--geist:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.btn--geist::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}

.btn svg{width:1.05em;height:1.05em;flex:none}

@media(prefers-reduced-motion:reduce){
  .btn:hover::after,.btn:focus-visible::after{animation:none;opacity:0}
}

/* --- Leistungs-/Textblöcke ---------------------------------------------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--gedreht>*:first-child{order:2}}
/* Die Bildquellen sind quadratisch. 16:10 hätte die Motive stark beschnitten,
   deshalb 4:3 plus ein Fokuspunkt je Bild (--fokus).                       */
.split__media{position:relative;border-radius:var(--radius);overflow:hidden}
.split__media video,.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
  object-position:var(--fokus,center)}

.karten{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.karte{padding:2rem;border:1px solid var(--line);border-radius:var(--radius);
       background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
       transition:transform var(--t),border-color var(--t)}
.karte:hover{transform:translateY(-4px);border-color:rgba(197,12,147,.45)}
.karte h3{margin-bottom:.5rem}
.karte p{color:var(--fg-muted);margin:0;font-size:.98rem}

/* --- Projekte ----------------------------------------------------------- */
.projekte{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
/* 1:1 — entspricht den quadratischen Originalen, also kein Beschnitt. */
.projekt{position:relative;display:block;border-radius:var(--radius);overflow:hidden;isolation:isolate;aspect-ratio:1/1}
.projekt img{width:100%;height:100%;object-fit:cover;object-position:var(--fokus,center);
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.projekt:hover img{transform:scale(1.06)}
.projekt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,10,10,.9) 100%);z-index:1}
.projekt__text{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;z-index:2}
.projekt__text h3{margin-bottom:.3rem;font-size:1.2rem}
.projekt__tags{font-size:.82rem;color:var(--mint);font-weight:600;letter-spacing:.03em}

/* --- Logo-Bänder ---------------------------------------------------------
   Kein Logo wird über seine Originalgröße hinaus skaliert (sonst unscharf).
   Die Breite steht pro Bild in --w und ist so berechnet, dass alle Logos
   etwa denselben Flächenauftrag haben — gleiche Höhe würde breite Logos
   optisch viel größer wirken lassen als kompakte.                      */
/* Raster statt freiem Umbruch: bei Flexbox passten je nach Logobreite z. B.
   9 Logos in die erste Zeile und eines blieb allein zurück. Grid verteilt
   gleichmäßig — und anders als flex-basis überschreibt es die per --w
   berechnete Bildbreite nicht, die Logos behalten ihre Größe.          */
.logoband{display:grid;grid-template-columns:repeat(var(--spalten,5),1fr);
  justify-items:center;align-items:center;
  gap:clamp(2.2rem,5vw,3.6rem) clamp(1rem,2.5vw,2rem);--skala:1}
/* Bei 13 Partnerlogos bleiben in der letzten Zeile 3 übrig — die werden
   mittig gesetzt statt linksbündig hängen zu lassen. */
.logoband--dreiRest > :nth-last-child(3){grid-column-start:2}
.logoband img{width:calc(var(--w,80) * var(--skala) * 1px);height:auto;max-width:100%;
  opacity:.5;filter:grayscale(1);transition:opacity var(--t),filter var(--t),transform var(--t)}
.logoband img:hover{opacity:1;filter:grayscale(0);transform:translateY(-3px)}
.logoband--kunden{gap:clamp(2rem,5vw,3.6rem) clamp(2.6rem,6vw,4.5rem)}
@media(max-width:900px){.logoband{--skala:.85}}
@media(max-width:560px){.logoband{--skala:.72}}

/* --- Fußzeile ----------------------------------------------------------- */
.fuss{border-top:1px solid var(--line);padding-block:clamp(3rem,7vw,5rem) 2rem;background:var(--bg-2)}
.fuss__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-bottom:3rem}
.fuss h4{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);font-weight:700;margin-bottom:1rem}
.fuss a:hover{color:var(--mint)}
.fuss__liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fuss__unten{border-top:1px solid var(--line);padding-top:1.8rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;
             justify-content:space-between;font-size:.87rem;color:var(--fg-dim)}
.fuss__recht{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.sozial{display:flex;gap:1.2rem}
.sozial a{font-size:.92rem;font-weight:600}

/* --- Einwilligungs-Banner ------------------------------------------------ */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:rgba(14,14,18,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:1.4rem var(--pad);
  transform:translateY(105%);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.consent.sichtbar{transform:none}
.consent__inner{width:min(100% - var(--pad)*0,var(--breite));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;align-items:center;justify-content:space-between}
.consent__text{flex:1 1 26rem}
.consent__text strong{display:block;font-weight:700;margin-bottom:.3rem}
.consent__text p{margin:0;font-size:.9rem;color:var(--fg-muted);line-height:1.55}
.consent__text a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.consent__knoepfe{display:flex;flex-wrap:wrap;gap:.8rem}
.consent__knoepfe .btn{padding:.8rem 1.5rem;font-size:.82rem}

/* --- Schwebende Hilfe-Schaltflächen -------------------------------------- */
.hilfe{position:fixed;right:clamp(1rem,2.2vw,1.8rem);bottom:clamp(1rem,2.2vw,1.8rem);
  z-index:90;display:grid;gap:.7rem;justify-items:end}
.hilfe__btn{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg);
  box-shadow:0 8px 26px rgba(0,0,0,.45);transition:transform var(--t),background var(--t),border-color var(--t)}
.hilfe__btn:hover{transform:translateY(-3px) scale(1.04);background:var(--blau);border-color:rgba(197,12,147,.5)}
.hilfe__btn svg{width:24px;height:24px}
.hilfe__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Beschriftung erscheint links daneben */
.hilfe__btn::after{content:attr(data-titel);position:absolute;right:calc(100% + .7rem);
  white-space:nowrap;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  background:var(--bg-3);border:1px solid var(--line);padding:.42rem .8rem;border-radius:999px;
  opacity:0;transform:translateX(6px);transition:opacity var(--t),transform var(--t);pointer-events:none}
.hilfe__btn:hover::after,.hilfe__btn:focus-visible::after{opacity:1;transform:none}
@media(max-width:560px){.hilfe__btn{width:48px;height:48px}.hilfe__btn::after{display:none}}

/* --- Animation -----------------------------------------------------------
   Wichtig: Sichtbarkeit hängt NICHT an CSS-Startzuständen. Früher stand hier
   `visibility:hidden` bis ein ScrollTrigger feuerte — feuerte er nicht (etwa
   weil das Nachladen der Schrift das Layout verschob), blieb der Inhalt für
   immer unsichtbar. Jetzt setzt ausschließlich GSAP die Startwerte, und ein
   Sicherheitsnetz in anim.js macht alles sichtbar, falls etwas ausbleibt.  */

/* Wort-Aufbau bei Überschriften */
.wort{display:inline-block;overflow:hidden;vertical-align:top}
.wort > span{display:inline-block;will-change:transform}

/* Fortschrittsbalken am oberen Rand */
.fortschritt{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:var(--verlauf);z-index:200;pointer-events:none}

/* Sanft mitlaufende Bildebene (Parallax) */
.parallax{will-change:transform}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js [data-anim]{visibility:visible!important;opacity:1!important;transform:none!important}
  .hero__slide video{display:none}
  .fortschritt{display:none}
}

/* --- Bausteine der Unterseiten ------------------------------------------ */
.seitenkopf{padding-block:clamp(8rem,16vh,11rem) clamp(2.5rem,6vw,4rem)}
.seitenkopf h1{margin-bottom:.3em}
.lead{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);color:var(--fg-muted);max-width:46rem;text-wrap:pretty}
.seitenkopf .eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Fließtext auf Rechts- und Detailseiten */
.text{max-width:52rem}
.text h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);margin-top:2.5em}
.text h2:first-child{margin-top:0}
.text h3{font-size:1.15rem;margin-top:1.8em}
.text ul{padding-left:1.2em;color:var(--fg-muted)}
.text li{margin-bottom:.4em}
.text a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.text code{background:rgba(255,255,255,.08);padding:.15em .45em;border-radius:4px;font-size:.9em}
.text p{color:var(--fg-muted)}
.hinweis{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:.87rem;color:var(--fg-dim)}
.adresse{font-style:normal;color:var(--fg-muted);line-height:1.8}

/* Definitionslisten */
.datenliste,.fakten{display:grid;gap:.9rem;margin:0}
.fakten{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.5rem;
  padding-top:2rem;border-top:1px solid var(--line)}
.datenliste > div{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.datenliste dt,.fakten dt{color:var(--fg-dim);font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;min-width:11rem}
.datenliste dd,.fakten dd{margin:0;color:var(--fg-muted)}
.fakten dd{color:var(--fg);font-size:1.05rem;margin-top:.35rem}

/* Nummerierte Schritte */
.schritte{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.schritt{padding:2rem;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01))}
.schritt__nr{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--verlauf);font-weight:900;margin-bottom:1.2rem}
.schritt h3{font-size:1.15rem;margin-bottom:.4rem}
.schritt p{color:var(--fg-muted);font-size:.96rem;margin:0}

/* Hakenliste */
.haken{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.haken li{position:relative;padding-left:2rem;color:var(--fg-muted)}
.haken li::before{content:"";position:absolute;left:0;top:.55em;width:1rem;height:.5rem;
  border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);
  transform:rotate(-45deg)}

/* Zitat */
.zitat{margin:0;padding:2.5rem 0}
.zitat p{font-size:clamp(1.4rem,1.1rem + 1.6vw,2.4rem);font-weight:900;line-height:1.25;
  letter-spacing:-.02em;margin-bottom:.6rem}
.zitat footer{color:var(--mint);font-weight:600;letter-spacing:.06em;font-size:.9rem}

/* Team */
.team{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.person{padding:2rem;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  transition:transform var(--t),border-color var(--t)}
.person:hover{transform:translateY(-4px);border-color:rgba(197,12,147,.45)}
.person__initial{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;
  background:var(--verlauf);font-weight:900;font-size:1.4rem;margin-bottom:1.2rem}
.person h3{margin-bottom:.2rem}
.person__rolle{color:var(--mint);font-weight:600;font-size:.9rem;margin-bottom:.8rem}
.person p:last-child{color:var(--fg-muted);font-size:.95rem;margin:0}

/* Kontaktwege */
.kontaktwege{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.kontaktweg{display:grid;gap:.35rem;padding:1.8rem;border:1px solid var(--line);
  border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  transition:transform var(--t),border-color var(--t)}
.kontaktweg:hover{transform:translateY(-4px);border-color:rgba(197,12,147,.45)}
.kontaktweg svg{width:26px;height:26px;color:var(--mint);margin-bottom:.7rem}
.kontaktweg__label{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);font-weight:700}
.kontaktweg__wert{font-weight:700;font-size:1.05rem}

/* Dokumente (AGB) */
.dokumente{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.dokument{display:grid;gap:.4rem;padding:1.8rem;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  transition:transform var(--t),border-color var(--t)}
.dokument:hover{transform:translateY(-4px);border-color:rgba(197,12,147,.45)}
.dokument svg{width:26px;height:26px;color:var(--mint);margin-bottom:.7rem}
.dokument__titel{font-weight:700;line-height:1.35}
.dokument__meta{font-size:.83rem;color:var(--fg-dim)}

/* Projektkachel ohne Ziel (noch kein Detailtext vorhanden) */
.projekt--ohnelink{cursor:default}
.projekt--ohnelink:hover img{transform:none}

/* Abschluss-Abschnitt */
.cta{background:var(--bg-2)}

/* Fließtext-Blöcke folgen der Ausrichtung ihres Abschnitts. Ohne das steht
   ein .lead mit max-width im zentrierten Abschnitt linksbündig statt mittig. */
.cta .lead,
[style*="text-align:center"] .lead,
[style*="text-align: center"] .lead{margin-inline:auto}

/* --- Icon-Link in der Navigation (TeamViewer) ---------------------------- */
.nav__icon{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:8px;
  color:var(--fg-muted);transition:color var(--t),background var(--t),transform var(--t)}
.nav__icon svg{width:1.35rem;height:1.35rem;display:block}
.nav__icon:hover{color:var(--fg);background:rgba(255,255,255,.09);transform:translateY(-1px)}
.nav__icon::after{display:none}   /* kein Unterstrich wie bei Textlinks */
@media(max-width:760px){
  .nav__icon{width:auto;height:auto;padding:.5rem 1rem;border-radius:999px;
    border:1px solid var(--line);gap:.7rem;grid-auto-flow:column;align-items:center}
  .nav__icon svg{width:1.6rem;height:1.6rem}
  .nav__icon .sr-only{position:static;width:auto;height:auto;clip:auto;
    font-size:1.1rem;font-weight:700;white-space:nowrap}
}

/* --- Dialog (Chat-Einwilligung) ----------------------------------------- */
.dialog{position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  padding:var(--pad);opacity:0;transition:opacity .3s ease}
.dialog.sichtbar{opacity:1}
.dialog__hintergrund{position:absolute;inset:0;background:rgba(4,4,6,.78);backdrop-filter:blur(6px)}
.dialog__box{position:relative;width:min(100%,32rem);padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 30px 70px rgba(0,0,0,.6);transform:translateY(14px);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.dialog.sichtbar .dialog__box{transform:none}
.dialog__box h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin-bottom:.6rem}
.dialog__box p{color:var(--fg-muted);font-size:.97rem;margin-bottom:1.4rem}
.dialog__box a:not(.btn){color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.dialog__zu{position:absolute;top:.7rem;right:.9rem;background:none;border:0;color:var(--fg-dim);
  font-size:1.9rem;line-height:1;cursor:pointer;padding:.2rem .5rem;border-radius:6px;transition:color var(--t)}
.dialog__zu:hover{color:var(--fg)}
.dialog__knoepfe,.dialog__kontakt{display:flex;flex-wrap:wrap;gap:.8rem}
.dialog__knoepfe .btn,.dialog__kontakt .btn{padding:.8rem 1.5rem;font-size:.82rem}
.dialog__kontakt .btn{text-transform:none;letter-spacing:.01em}
.dialog__fuss{margin:1.4rem 0 0;font-size:.85rem;color:var(--fg-dim)}

/* Sobald Smallchat geladen ist, zeigt es seinen eigenen Launcher unten
   rechts. Unser Knopf hat dann seine Aufgabe erfüllt (Einwilligung einholen)
   und wird ausgeblendet — sonst stünden dort zwei Chat-Schaltflächen. */
.chat-aktiv .hilfe{opacity:0;pointer-events:none;transition:opacity .4s ease}

/* --- Feinschliff Logo-Bänder und Hero ----------------------------------- */
/* Luft zwischen Überschrift und Logos — vorher klebten sie aneinander. */
.logoband{margin-top:clamp(2.5rem,5vw,4rem)}

/* Hero-Block leicht nach unten, damit die optische Mitte zwischen Überschrift
   und Teasertext liegt statt mitten im Textblock. */
.hero__inhalt{padding-top:2.75rem}

/* Slider-Punkte ganz nach unten — der Scrollhinweis lag vorher darüber und
   überlappte sie. */
.hero__punkte{bottom:clamp(2rem,4vh,2.8rem)}

/* Der Scrollhinweis ist kein Dauerelement mehr: Er erscheint erst, wenn der
   Slider einmal durchgelaufen ist und noch niemand gescrollt hat — und
   verschwindet beim ersten Scrollen endgültig. */
.hero__scroll{bottom:auto;top:calc(100svh - 9.5rem);opacity:0;pointer-events:none;
  transition:opacity .6s ease}
.hero__scroll.zeigen{opacity:1}
.hero__scroll span{animation:scrollpuls 1.8s ease-in-out infinite}
@keyframes scrollpuls{
  0%,100%{transform:scaleY(1);transform-origin:top;opacity:.9}
  50%{transform:scaleY(.45);transform-origin:top;opacity:.35}
}
@media(prefers-reduced-motion:reduce){.hero__scroll span{animation:none}}

/* Spaltenzahl nach Platz — Werte so gewählt, dass keine Zeile mit einem
   einzelnen Logo endet (10 Kunden: 5/5 bzw. 2er-Raster · 13 Partner: 5/5/3). */
@media(max-width:900px){.logoband{--spalten:3;--skala:.9}
  .logoband--dreiRest > :nth-last-child(3){grid-column-start:auto}}
@media(max-width:560px){.logoband{--spalten:2;--skala:.85}}

/* --- Buttongruppen -------------------------------------------------------
   Vorher standen mehrere Buttons mit margin-left nebeneinander und brachen
   auf schmalen Schirmen versetzt um. Als Flex-Container mit gap stehen sie
   sauber nebeneinander und auf Mobilgeräten bündig untereinander.        */
.btn-gruppe{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:1.8rem}
.cta .btn-gruppe,[style*="text-align:center"] .btn-gruppe{justify-content:center}
@media(max-width:560px){
  .btn-gruppe{flex-direction:column;align-items:stretch;gap:.75rem}
  .btn-gruppe .btn{width:100%;justify-content:center}
}

/* --- Abstände auf kleinen Schirmen ---------------------------------------
   Die Abschnittspolster waren mobil unverhältnismäßig hoch: clamp() fiel
   dort auf sein Minimum von 4rem zurück, oben und unten zusammen also über
   8rem zwischen zwei Abschnitten.                                        */
@media(max-width:760px){
  section{padding-block:clamp(2.6rem,7vw,3.6rem)}
  .split{gap:1.9rem}
  .seitenkopf{padding-block:7rem 1.8rem}
  .karten,.projekte,.schritte,.team,.kontaktwege,.dokumente{gap:1rem}
  h2{margin-bottom:.4em}
  .logoband{margin-top:1.8rem}
  .text h2{margin-top:1.9em}
}
@media(max-width:480px){
  section{padding-block:2.2rem}
  .split{gap:1.5rem}
  .seitenkopf{padding-block:6.5rem 1.4rem}
}