/* ═══════════════════════════════════════════════════════════
   INSTATEC GmbH — Redesign
   Design-System: Navy #1C185C (CI) · Türkis #34B4B4 (CI) · Signal #FF5C28
   Beide CI-Farben aus dem Druckoriginal "Logo 2021 (I_I_I).jpg" (CMYK,
   ISO Coated v2) gemessen und nach sRGB gerechnet — nicht geschaetzt.
   Schrift: Inter (self-hosted, DSGVO-konform)
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Marke */
  --ind:#1C185C;          /* CI Indigo (aus Logo) */
  --ind-d:#141141;
  --ind-dd:#0D0C27;
  --ind-l:#373286;
  --teal:#34B4B4;         /* CI Türkis (aus Logo) */
  --teal-l:#69D4D4;
  --teal-d:#167979;
  --sig:#FF5C28;          /* Signal / Störung — Cockpit, Kurven, Weiche */
  --sig-d:#e04616;
  --rot:#E11D2A;          /* Knallrot, nur für den Notruf-Button */
  --rot-d:#b3121d;

  /* Neutral */
  --bg:#F7F6F9;
  --bg-2:#EFEDF3;
  --wht:#fff;
  --ink:#1B1530;
  --ink-2:#5b5372;
  --ink-3:#8d86a1;
  --line:rgba(56,42,93,.14);
  --line-l:rgba(255,255,255,.14);

  /* Raster */
  --wrap:1280px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --sec:clamp(5rem,11vw,10rem);
  --r:6px;
  --r-l:16px;

  /* Typo */
  --f:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 clamp(1rem,.95rem + .25vw,1.125rem)/1.65 var(--f);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01','cv05';
}
/* overflow-x:clip statt hidden — hidden würde body zum Scroll-Container machen,
   dadurch feuern weder window-scroll-Events noch IntersectionObserver. */
html,body{overflow-x:clip}
img,video,svg,canvas{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--teal);color:#fff}

.wrap{width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ind);color:#fff;padding:.85rem 1.4rem}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:3px}

/* ── Typo-Skala ─────────────────────────────────── */
.h2{
  font-size:clamp(2rem,1.1rem + 4.1vw,4.5rem); line-height:1.02;
  letter-spacing:-.035em; font-weight:800; margin:0 0 1.5rem;
  text-wrap:balance;
}
.h2--light{color:#fff}
.kicker{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--teal-d);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.kicker::before{content:'';width:2rem;height:2px;background:var(--teal);flex:none}
.kicker--light{color:var(--teal-l)}
.lead{font-size:clamp(1.06rem,1rem + .5vw,1.4rem);line-height:1.55;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.lead--light{color:rgba(255,255,255,.72)}
h3,h4{letter-spacing:-.02em;text-wrap:balance}

/* ── Reveal ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Buttons ────────────────────────────────────── */
.btn{
  --bg-b:var(--ind); --fg-b:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--bg-b);color:var(--fg-b);
  padding:.95rem 1.7rem;border:0;border-radius:100px;cursor:pointer;
  font-weight:650;font-size:.95rem;letter-spacing:-.01em;line-height:1;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .3s;
  will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 14px 34px -14px rgba(27,21,48,.5)}
.btn:active{transform:scale(.97)}
.btn--lg{padding:1.15rem 2.2rem;font-size:1.02rem}
.btn--full{width:100%}
.btn--acc{--bg-b:var(--teal)}
.btn--acc::before{background:var(--ind)}
.btn--alarm{--bg-b:var(--rot)}
.btn--alarm::before{background:var(--rot-d)}
.btn--pri{--bg-b:var(--ind)}
/* Weiß mit dunkler Schrift — steht neben dem Rot am besten */
.btn--ghost{--bg-b:#fff;--fg-b:var(--ind);box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
.btn--ghost::before{background:var(--ind)}
.btn--ghost:hover{color:#fff}
.btn__dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none;animation:blink 1.6s infinite}
.btn__tel{display:none;flex:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.lnk{
  display:inline-flex;align-items:center;gap:.6rem;font-weight:650;color:var(--ind);
  border-bottom:2px solid var(--teal);padding-bottom:.28rem;transition:gap .35s var(--ease),color .3s;
}
.lnk:hover{gap:1.1rem;color:var(--teal-d)}

.pulse{width:.55rem;height:.55rem;border-radius:50%;background:#4ade80;flex:none;position:relative}
.pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid #4ade80;animation:ping 2s var(--ease-io) infinite}
.pulse--big{width:.8rem;height:.8rem;background:var(--sig)}
.pulse--big::after{border-color:var(--sig);inset:-6px}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}

/* ═══ NOTRUF-LEISTE ═══ */
.alertbar{
  position:relative;z-index:60;background:var(--ind-dd);color:rgba(255,255,255,.78);
  display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  padding:.6rem var(--pad);font-size:.82rem;letter-spacing:-.005em;
}
.alertbar strong{color:#fff;font-weight:650}
.alertbar .sep{opacity:.35}
.alertbar__tel{
  color:var(--teal-l);font-weight:700;border-bottom:1px solid rgba(79,192,170,.4);
  transition:color .3s,border-color .3s;
}
.alertbar__tel:hover{color:#fff;border-color:#fff}
@media(max-width:720px){.alertbar__txt{display:none}}

/* ═══ HEADER ═══ */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(247,246,249,0);backdrop-filter:blur(0px);
  transition:background .5s var(--ease),backdrop-filter .5s,box-shadow .5s;
}
/* Über dem Video braucht die Leiste einen eigenen Untergrund, sonst
   verschwindet die Navigation je nach Bildinhalt. */
.hdr::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,22,.72) 0%,rgba(11,9,22,.42) 55%,transparent 100%);
  opacity:1;transition:opacity .5s var(--ease);
}
.hdr.stuck::before{opacity:0}
.hdr.stuck{background:rgba(247,246,249,.9);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 var(--line)}
.hdr__in{
  /* Hausmaß 1280 — gilt auch für die Kopfleiste.
     Innenabstand identisch zum Hero-Text, damit Logo und Headline
     auf derselben Fluchtlinie stehen. */
  width:min(100%,var(--wrap));margin-inline:auto;
  display:flex;align-items:center;gap:2rem;
  padding:1rem clamp(1.5rem,4.5vw,4.5rem);
}
.hdr__logo img{width:clamp(130px,11vw,178px);height:auto;transition:filter .5s}
.hdr:not(.stuck) .hdr__logo img{filter:brightness(0) invert(1)}
/* Enger als frueher: mit dem zehnten Punkt (Aktuelles) brauchte die Leiste
   949 px und bekam je nach Fensterbreite nur 931, dann brach sie um. */
.nav{display:flex;gap:.22rem;margin-left:auto;flex-wrap:wrap}
.nav a{
  padding:.55rem .62rem;border-radius:100px;font-size:.88rem;font-weight:550;
  color:var(--ink);position:relative;transition:color .3s,background .3s;
}
.hdr:not(.stuck) .nav a{color:rgba(255,255,255,.85)}
.nav a::after{
  content:'';position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1.5px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.hdr:not(.stuck) .nav a:hover{color:#fff}
.hdr__cta{display:flex;align-items:center;gap:.75rem}
.hdr__cta .btn{padding:.72rem 1.3rem;font-size:.86rem}
.hdr__progress{position:absolute;left:0;bottom:0;height:2px;background:var(--teal);width:0;transition:width .1s linear}

.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:11px 9px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),opacity .3s,background .5s}
.hdr:not(.stuck) .burger span{background:#fff}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

@media(max-width:1120px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--ind-dd);
    flex-direction:column;justify-content:center;gap:.4rem;padding:2rem var(--pad);
    transform:translateX(101%);transition:transform .6s var(--ease);margin:0;
  }
  .nav.open{transform:none}
  .nav a{color:#fff!important;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;padding:.6rem 0}
  .nav a::after{left:0;right:auto;width:2rem;bottom:.2rem}
  /* Kompakt: nur Puls-Punkt + Telefonsymbol. Der Notruf-CTA bleibt aber
     auf jeder Breite sichtbar — bei 24/7-Bereitschaft ist er die Hauptaktion. */
  .hdr__cta .btn__label{display:none}
  .hdr__cta .btn__tel{display:block;width:1.15rem;height:1.15rem}
  .hdr__cta .btn{padding:.72rem .9rem;gap:.45rem}
}

/* ═══ HERO ═══ */
/* Hero = festes 16:9 im 1280er-Hausmaß. Dadurch läuft das 1920×1080-Video
   als 1280×720 vollständig durch — kein Beschnitt an keiner Seite. */
.hero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * (76px + 2rem));background:var(--ind-dd)}
.hero__media{
  position:relative;width:min(100%,var(--wrap));margin-inline:auto;
  aspect-ratio:16/9;z-index:-2;
}
.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__flow{position:absolute;inset:0;width:100%;height:100%;opacity:.55;mix-blend-mode:screen}
/* Abdunkelung oben für die Kopfleiste, ab der Bildmitte kräftig für den Text.
   Zusätzlich eine weiche Ellipse hinter dem Textblock, damit die Schrift auch
   auf hellen Videostellen sicher steht. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 78% at 50% 100%, rgba(11,9,22,.78) 0%, rgba(11,9,22,.42) 45%, transparent 72%),
    linear-gradient(180deg,
      rgba(22,17,42,.80) 0%, rgba(22,17,42,.26) 18%,
      rgba(22,17,42,.30) 34%, rgba(22,17,42,.74) 56%,
      rgba(22,17,42,.92) 78%, rgba(22,17,42,.97) 100%);
}
.hero__in{
  position:absolute;left:0;right:0;bottom:0;
  width:min(100%,var(--wrap));margin-inline:auto;color:#fff;text-align:center;
  /* Innenabstand, damit der Text nicht am Videorand klebt */
  padding:0 clamp(1.5rem,4.5vw,4.5rem) clamp(1.8rem,3.5vw,3.2rem);
}
.hero__h1{margin-inline:auto}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:650;color:rgba(255,255,255,.72);margin:0 0 1.6rem;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  padding:.5rem 1.05rem;border-radius:100px;backdrop-filter:blur(8px);
}
.hero__eyebrow span{color:var(--teal-l);font-weight:800;letter-spacing:0}

.hero__h1{
  /* auf die 16:9-Höhe bemessen — sonst passt der Block nicht in 720 px.
     KEINE max-width: die Zeilen sind per <span class="line"> gesetzt und
     würden sonst über ihren Kasten hinauslaufen statt zu zentrieren. */
  font-size:clamp(2rem,.9rem + 4.4vw,4.6rem);line-height:.96;letter-spacing:-.045em;
  font-weight:800;margin:0 0 1.1rem;
  text-shadow:0 2px 24px rgba(11,9,22,.55), 0 1px 3px rgba(11,9,22,.4);
}
.hero__h1 em{font-style:normal;color:var(--teal-l)}
/* Maske für die Zeilen-Animation. Padding + negatives Margin geben Ober- und
   Unterlängen Luft, ohne das Layout zu verschieben — sonst clippt overflow:hidden
   bei der engen Zeilenhöhe die Glyphen. */
.hero__h1 .line{display:block;overflow:hidden;padding:.14em 0 .2em;margin:-.14em 0 -.2em}
.hero__h1 .line>span{display:block;transform:translateY(102%);transition:transform 1.15s var(--ease)}
.hero.in .hero__h1 .line>span{transform:none}
.hero.in .hero__h1 .line:nth-child(2)>span{transition-delay:.11s}

.hero__sub{font-size:clamp(.94rem,.88rem + .38vw,1.16rem);line-height:1.5;color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 1.5rem}
.hero__sub strong{color:#fff;font-weight:650}
/* Buttons im selben Raster wie die Entscheidungskacheln darunter */
.hero__acts{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
  width:min(100%,var(--gate-w));margin:0 auto 1.6rem;
}
.hero__acts .btn{width:100%}

.hero__trust{
  list-style:none;margin:0;padding:1.1rem 0 0;border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:680px;
}
.hero__trust li{display:flex;flex-direction:column;gap:.15rem}
.hero__trust b{font-size:clamp(1.5rem,1rem + 1.5vw,2.3rem);font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
.hero__trust span{font-size:.78rem;color:rgba(255,255,255,.6);letter-spacing:.02em}

.hero__scroll{
  position:absolute;right:var(--pad);bottom:2rem;writing-mode:vertical-rl;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.5);
  display:flex;align-items:center;gap:.9rem;
}
.hero__scroll span{width:1px;height:56px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.65));animation:sc 2.4s var(--ease-io) infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:960px){
  /* Bei 16:9 wäre das Hero auf dem Handy nur ~220 px hoch — der Text
     passt dort nicht darüber. Also Video oben, Inhalt darunter. */
  .hero{margin-top:0;display:block}
  .hero__in{
    position:static;width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto;
    padding:2.2rem 0 2.8rem;
  }
  .hero__scroll{display:none}
  .hero__scrim{background:linear-gradient(180deg,rgba(22,17,42,.75) 0%,rgba(22,17,42,.1) 40%,rgba(22,17,42,.55) 100%)}
  .hero__scroll{display:none}
  .hero__trust{grid-template-columns:repeat(2,1fr)}
  .hero__h1{font-size:clamp(2rem,1.2rem + 4vw,3rem)}
}

/* ═══ HERO — flache Variante für Unterseiten ═══ */
/* Erbt die komplette Mechanik des Startseiten-Heros (Kopfleiste läuft
   transparent darüber, Logo invertiert, Flow-Canvas). Nur die Höhe ist
   gekappt: auf der Stellenseite soll die Liste nicht nach unten rutschen. */
.hero--sub .hero__media{aspect-ratio:1280/650}
.hero--sub .hero__media img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hero--sub .hero__in{text-align:left;padding-inline:clamp(1.5rem,4.5vw,4.5rem)}
.hero--sub .hero__h1{font-size:clamp(2.2rem,1rem + 5vw,5rem);max-width:24ch;margin-inline:0}
.hero--sub .hero__sub{margin-inline:0}
.hero--sub .hero__eyebrow{margin-bottom:1.1rem}
.hero--sub .hero__sub{margin-bottom:.4rem}
@media(max-width:960px){
  /* Unter 960 stapelt der Hero ohnehin Bild über Text — dann wieder 16:9,
     sonst wird das Bild zum Streifen. Gilt fuer beide Hero-Varianten,
     damit Karriere, Ausbildung und Stellen auch hier gleich hoch bleiben. */
  .hero--sub .hero__media,
  .khero__media{aspect-ratio:16/9}
}

/* ═══ WEICHE IM HERO ═══ */
:root{--gate-w:860px}
.gate{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;
  width:min(100%,var(--gate-w));margin:0 auto;text-align:left;
}
.gate__c{
  position:relative;display:flex;flex-direction:column;gap:.4rem;
  /* deutlich kräftiger als vorher — die Entscheidung soll ins Auge springen */
  background:linear-gradient(150deg,rgba(53,154,136,.34),rgba(22,17,42,.72));
  border:1.5px solid rgba(79,192,170,.55);
  border-radius:var(--r-l);padding:1.25rem 1.4rem 1.35rem;backdrop-filter:blur(16px);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.65);
  transition:background .4s,border-color .4s,transform .5s var(--ease),box-shadow .5s;
}
.gate__c--b{
  background:linear-gradient(150deg,rgba(255,92,40,.32),rgba(22,17,42,.72));
  border-color:rgba(255,92,40,.6);
}
.gate__c:hover{transform:translateY(-5px);box-shadow:0 26px 58px -22px rgba(0,0,0,.75);border-color:var(--teal-l)}
.gate__c--b:hover{border-color:var(--sig)}
.gate__n{font-size:.66rem;font-weight:800;letter-spacing:.2em;color:var(--teal-l)}
.gate__c--b .gate__n{color:#ffb499}
.gate__c b{font-size:clamp(1rem,.9rem + .45vw,1.22rem);font-weight:750;line-height:1.25;letter-spacing:-.02em;color:#fff}
.gate__m{font-size:.78rem;color:rgba(255,255,255,.72);line-height:1.4}
.gate__go{position:absolute;right:1.2rem;top:1.15rem;font-size:1.1rem;color:rgba(255,255,255,.6);transition:transform .4s var(--ease),color .3s}
.gate__c:hover .gate__go{transform:translateX(5px);color:#fff}
.gate__lbl{
  grid-column:1/-1;text-align:center;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.6);margin-bottom:.1rem;
}
@media(max-width:760px){.gate{grid-template-columns:1fr;gap:.6rem}.gate__c br{display:none}}

/* ═══ TRENNBAND ZWISCHEN DEN WEGEN ═══ */
.track{background:var(--ind-dd);color:#fff;padding:clamp(3rem,6vw,5rem) 0;position:relative;overflow:hidden}
.track::before{
  content:'';position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(79,192,170,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(79,192,170,.06) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(70% 80% at 30% 50%,#000,transparent);
}
.track__in{position:relative;max-width:64ch}
.track__eye{
  display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--teal-l);border:1px solid rgba(79,192,170,.4);border-radius:100px;
  padding:.42rem 1rem;margin-bottom:1.1rem;
}
#track-auftraggeber .track__eye{color:var(--sig);border-color:rgba(255,92,40,.45)}
#track-gemeinsam .track__eye{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.2)}
.track__h{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin:0 0 .8rem}
.track__p{font-size:clamp(1rem,.95rem + .35vw,1.2rem);color:rgba(255,255,255,.7);line-height:1.55;margin:0}

/* ═══ NACHUNTERNEHMER ═══ */
.sub{padding:var(--sec) 0;background:var(--bg-2)}
.sub__wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.sub__list{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1rem}
.sub__list li{display:flex;flex-direction:column;gap:.15rem;padding-left:1.3rem;position:relative}
.sub__list li::before{content:'';position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;border:2px solid var(--teal);border-radius:2px;transform:rotate(45deg)}
.sub__list b{font-size:1rem;font-weight:750;letter-spacing:-.015em}
.sub__list span{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.sub__was{font-size:.92rem;color:var(--ink-2);line-height:1.6;background:var(--wht);border-left:2.5px solid var(--teal);padding:1rem 1.2rem;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.8rem}
.sub__was b{color:var(--ink)}
.sub__acts{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.sub__img{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:0 30px 60px -34px rgba(27,21,48,.4)}
.sub__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sub__badge{
  position:absolute;left:1rem;bottom:1rem;background:rgba(22,17,42,.86);backdrop-filter:blur(12px);
  border-radius:var(--r-l);padding:.85rem 1.2rem;display:flex;flex-direction:column;
}
.sub__badge b{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--teal-l);line-height:1}
.sub__badge span{font-size:.74rem;color:rgba(255,255,255,.65);margin-top:.15rem}
@media(max-width:900px){.sub__wrap{grid-template-columns:1fr}}

/* Gruppenüberschriften in der Navigation */
.nav__grp{display:none}
@media(max-width:1120px){
  .nav__grp{
    display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
    color:var(--teal-l);margin:1.4rem 0 .3rem;
  }
  .nav__grp:first-child{margin-top:0}
}

/* ═══ TICKER ═══ */
.ticker{background:var(--ind);color:#fff;overflow:hidden;padding:.95rem 0;white-space:nowrap;position:relative;z-index:2}
.ticker__track{display:inline-flex;align-items:center;gap:2.2rem;animation:tick 46s linear infinite;will-change:transform}
.ticker span{font-size:.9rem;font-weight:600;letter-spacing:.03em;opacity:.92}
.ticker i{color:var(--teal-l);font-style:normal;font-size:.6rem}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ═══ PROBLEM ═══ */
.prob{padding:var(--sec) 0;background:var(--bg)}
.prob__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.25rem;margin:3.5rem 0 5rem}
.prob__c{
  background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  padding:2.2rem 1.9rem;position:relative;overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.prob__c::after{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--sig);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.prob__c:hover{transform:translateY(-7px);box-shadow:0 26px 52px -28px rgba(27,21,48,.28);border-color:transparent}
.prob__c:hover::after{transform:scaleX(1)}
/* 21:9-Bild randlos oben in der Kachel — negatives Margin hebt das Kartenpadding auf */
.prob__img{margin:-2.2rem -1.9rem 1.6rem;aspect-ratio:21/9;overflow:hidden;background:var(--bg-2)}
.prob__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.prob__c:hover .prob__img img{transform:scale(1.06)}
/* Die mittlere Kachel wird gespiegelt: Text oben, Bild unten. Das bricht
   die Reihe auf, damit die drei Kacheln nicht wie eine Tapete wirken.
   Auf schmalen Bildschirmen stehen sie untereinander, dort sorgt derselbe
   Wechsel fuer Rhythmus statt Gleichfoermigkeit. */
.prob__grid>.prob__c:nth-child(2){display:flex;flex-direction:column}
.prob__grid>.prob__c:nth-child(2) .prob__img{order:1;margin:1.6rem -1.9rem -2.2rem}
.prob__grid>.prob__c:nth-child(2)>p{margin-bottom:0}
.prob__n{font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--sig)}
.prob__c h3{font-size:1.32rem;font-weight:750;margin:.9rem 0 .7rem}
.prob__c p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.62}

.prob__ans{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.prob__ansTxt h3{font-size:clamp(1.6rem,1.1rem + 1.9vw,2.7rem);font-weight:800;letter-spacing:-.03em;margin:0 0 1.1rem;line-height:1.1}
.prob__ansTxt p{color:var(--ink-2);margin:0 0 1.9rem;max-width:52ch}
.prob__ansTxt strong{color:var(--ink);font-weight:650}
.prob__ansImg{border-radius:var(--r-l);overflow:hidden;box-shadow:0 34px 64px -32px rgba(27,21,48,.42)}
.prob__ansImg img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.4s var(--ease)}
.prob__ansImg:hover img{transform:scale(1.05)}
@media(max-width:860px){.prob__ans{grid-template-columns:1fr}}

/* ═══ ZAHLEN ═══ */
.nums{
  padding:var(--sec) 0;
  background:
    radial-gradient(120% 100% at 15% 0%,rgba(53,154,136,.28),transparent 58%),
    linear-gradient(160deg,var(--ind) 0%,var(--ind-dd) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.nums::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent);
}
.nums .wrap{position:relative}
.nums__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.5rem 1.5rem;margin-top:3.5rem}
.num{border-top:1px solid rgba(255,255,255,.2);padding-top:1.5rem;min-width:0}
.num b{
  /* Obergrenze bewusst niedrig: "2.000+" ist die längste Zahl und würde bei
     größerer Schrift in die Nachbarspalte laufen. */
  display:block;font-size:clamp(2.4rem,1.2rem + 3.4vw,4.4rem);font-weight:800;
  letter-spacing:-.05em;line-height:.92;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,rgba(255,255,255,.55));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.num span{display:block;margin-top:.7rem;font-size:.88rem;color:rgba(255,255,255,.62);letter-spacing:.02em}

/* ═══ LEISTUNGEN ═══ */
.lst{padding:var(--sec) 0 0;background:var(--bg)}
.lst .lead{margin-top:.4rem}
/* Hausmaß 1280 — die Leistungskarten liefen vorher full-bleed */
.lst__stack{margin-top:clamp(2.5rem,6vw,5rem);width:min(100% - var(--pad)*2,var(--wrap));margin-inline:auto}
.svc{
  position:sticky;top:5.5rem;background:var(--wht);border:1px solid var(--line);
  border-radius:clamp(16px,2.5vw,28px);overflow:hidden;margin-bottom:2rem;
  box-shadow:0 -8px 44px -22px rgba(27,21,48,.24);
}
.svc:last-child{margin-bottom:var(--sec)}
.svc__in{display:grid;grid-template-columns:1.02fr .98fr;gap:0;align-items:stretch;width:100%;max-width:none;padding:0}
.svc__txt{padding:clamp(2.2rem,4.5vw,4.4rem)}
.svc__no{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.2em;color:var(--teal-d);
  border:1px solid rgba(53,154,136,.34);border-radius:100px;padding:.4rem .95rem;margin-bottom:1.4rem;
}
.svc__txt h3{font-size:clamp(1.75rem,1.15rem + 2.3vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin:0 0 1rem}
.svc__claim{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);font-weight:600;color:var(--teal-d);margin:0 0 1.2rem;line-height:1.4;text-wrap:balance}
.svc__txt>p{color:var(--ink-2);margin:0 0 1.6rem;max-width:52ch}
.svc__list{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.65rem}
.svc__list li{position:relative;padding-left:1.7rem;font-size:.96rem;color:var(--ink-2)}
.svc__list li::before{
  content:'';position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;
  border:2px solid var(--teal);border-radius:2px;transform:rotate(45deg);
}
.svc__list strong{color:var(--ink);font-weight:650}
.svc__note{font-size:.88rem;color:var(--ink-3);border-left:2px solid var(--line);padding-left:1.1rem;margin:0;line-height:1.6}
.svc__hl{
  display:flex;align-items:center;gap:1.3rem;background:var(--ind);color:#fff;
  padding:1.4rem 1.7rem;border-radius:var(--r-l);margin-top:.5rem;
}
.svc__hl b{font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--teal-l);flex:none}
.svc__hl span{font-size:.93rem;line-height:1.45;color:rgba(255,255,255,.82)}
.svc__img{position:relative;overflow:hidden;min-height:340px}
.svc__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.svc:hover .svc__img img{transform:scale(1.055)}
@media(max-width:900px){
  .svc{position:static}
  .svc__in{grid-template-columns:1fr}
  .svc__img{min-height:260px;order:-1}
}

/* ═══ ANLAGENCOCKPIT ═══ */
.cock{padding:var(--sec) 0;background:#0B0916;color:#fff;position:relative;overflow:hidden}
.cock::before{
  content:'';position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(rgba(79,192,170,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(79,192,170,.05) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(75% 65% at 50% 45%,#000,transparent);
}
.cock .wrap{position:relative}
.cock__box{
  margin-top:3rem;border:1px solid rgba(79,192,170,.24);border-radius:clamp(14px,2vw,22px);
  background:linear-gradient(170deg,rgba(53,154,136,.09),rgba(11,9,22,.6));
  overflow:hidden;box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
}
.cock__bar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.3rem;border-bottom:1px solid rgba(79,192,170,.18);
  background:rgba(0,0,0,.28);font-size:.72rem;letter-spacing:.12em;
}
.cock__id{color:rgba(255,255,255,.45);font-weight:600}
.cock__state{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-weight:700;color:#4ade80;transition:color .4s}
.cock__state i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.cock__state.is-alarm{color:var(--sig)}
.cock__clock{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;font-weight:600}

.cock__stage{position:relative;padding:1.2rem}
.cock__svg{width:100%;height:auto}
.ck-pipe{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:9 13}
.ck-pipe--cold{stroke:var(--teal-l);animation:ckflow 1.1s linear infinite}
.ck-pipe--warm{stroke:#e88a4a;opacity:.72;animation:ckflow 2.1s linear infinite reverse}
@keyframes ckflow{to{stroke-dashoffset:-44}}
.cock__box.is-slow .ck-pipe--cold{animation-duration:4.5s;stroke:var(--sig)}

.ck-unit rect,.ck-unit circle{fill:rgba(255,255,255,.05);stroke:rgba(79,192,170,.5);stroke-width:1.5;transition:stroke .4s,fill .4s}
.ck-unit.is-fault rect,.ck-unit.is-fault circle{stroke:var(--sig);fill:rgba(255,92,40,.14)}
.ck-lbl{fill:rgba(255,255,255,.5);font:700 9px/1 var(--f);letter-spacing:.1em;text-anchor:middle}
.ck-val{fill:#fff;font:700 13px/1 var(--f);text-anchor:middle;font-variant-numeric:tabular-nums}
.ck-unit.is-fault .ck-val{fill:var(--sig)}
.ck-fan{transform-box:fill-box;transform-origin:center;animation:spin 1.1s linear infinite}
.cock__box.is-slow .ck-fan{animation-duration:7s}
.ck-fan__ring{fill:none;stroke:rgba(79,192,170,.45);stroke-width:1.5}
.ck-fan__blade{fill:var(--teal-l)}
.ck-unit.is-fault .ck-fan__blade{fill:var(--sig)}

.ck-zone rect{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.16);stroke-width:1.2;transition:stroke .4s,fill .4s}
.ck-zone.is-warm rect{stroke:var(--sig);fill:rgba(255,92,40,.1)}
.ck-zlbl{fill:rgba(255,255,255,.42);font:700 8px/1 var(--f);letter-spacing:.09em;text-anchor:middle}
.ck-zval{fill:#fff;font:700 13px/1 var(--f);text-anchor:middle;font-variant-numeric:tabular-nums}
.ck-zone.is-warm .ck-zval{fill:var(--sig)}
.ck-flow{font:700 12px/1 var(--f);text-anchor:middle;font-variant-numeric:tabular-nums}
.ck-flow--cold{fill:var(--teal-l)}
.ck-flow--warm{fill:#e88a4a}
.ck-cap{fill:rgba(255,255,255,.28);font:600 8px/1 var(--f);letter-spacing:.14em;text-anchor:middle}

.cock__alarm{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:flex;align-items:center;gap:1rem;
  background:rgba(11,9,22,.93);backdrop-filter:blur(14px);
  border:1.5px solid var(--sig);border-radius:14px;padding:1.05rem 1.5rem;
  box-shadow:0 22px 60px -20px rgba(255,92,40,.5);animation:ckin .45s var(--ease);
  max-width:min(92%,460px);
}
@keyframes ckin{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1}}
.cock__alarm[hidden]{display:none}
.cock__alarm b{display:block;font-size:.95rem;font-weight:750;letter-spacing:-.01em}
.cock__alarm small{display:block;margin-top:.2rem;font-size:.79rem;color:rgba(255,255,255,.6)}

.cock__log{
  border-top:1px solid rgba(79,192,170,.18);padding:1rem 1.3rem;min-height:5.5rem;
  font-size:.82rem;display:flex;flex-direction:column;gap:.4rem;background:rgba(0,0,0,.22);
}
.cock__log p{margin:0;display:flex;gap:.85rem;align-items:baseline;animation:msgIn .4s var(--ease);color:rgba(255,255,255,.72)}
.cock__log time{color:var(--teal-l);font-variant-numeric:tabular-nums;font-weight:700;flex:none;font-size:.76rem}
.cock__log p.is-alarm{color:var(--sig)}
.cock__log p.is-alarm time{color:var(--sig)}
.cock__log p.is-ok{color:#4ade80}
.cock__log p.is-ok time{color:#4ade80}

.cock__foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.3rem;border-top:1px solid rgba(255,255,255,.08);
  font-size:.74rem;color:rgba(255,255,255,.35);
}
.cock__replay{
  background:none;border:1px solid rgba(79,192,170,.42);color:var(--teal-l);
  border-radius:100px;padding:.45rem 1.1rem;font-size:.76rem;font-weight:650;cursor:pointer;
  transition:background .3s,color .3s;
}
.cock__replay:hover{background:var(--teal);color:#0B0916}

.cock__pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.25rem;margin-top:2rem}
.cock__pt{border-left:2px solid var(--teal);padding-left:1.2rem}
.cock__pt b{display:block;font-size:1rem;font-weight:750;margin-bottom:.4rem;letter-spacing:-.015em}
.cock__pt span{font-size:.88rem;color:rgba(255,255,255,.55);line-height:1.55}
@media(max-width:820px){
  /* Auf schmalen Schirmen ist das Schema sonst unlesbar gequetscht:
     Mindestbreite + horizontales Wischen, Alarm rutscht darunter. */
  .cock__stage{padding:.6rem}
  .cock__scroll{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .cock__scroll::-webkit-scrollbar{height:4px}
  .cock__scroll::-webkit-scrollbar-thumb{background:rgba(79,192,170,.4);border-radius:4px}
  .cock__svg{min-width:660px}
  .cock__alarm{
    position:static;translate:none;max-width:none;margin-top:.7rem;
    animation:none;gap:.7rem;padding:.85rem 1rem;
  }
  .cock__alarm b{font-size:.85rem}
}

/* ═══ REFERENZ ═══ */
.ref{padding:var(--sec) 0;background:var(--bg-2)}
.ref__card{
  background:var(--wht);border-radius:clamp(16px,2.5vw,26px);padding:clamp(1.8rem,4vw,3.4rem);
  margin-top:3rem;border:1px solid var(--line);box-shadow:0 32px 70px -40px rgba(27,21,48,.3);
}
.ref__head{display:flex;gap:2rem;align-items:flex-start;justify-content:space-between;margin-bottom:2.6rem}
.ref__tag{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--teal-d);margin-bottom:.75rem}
.ref__head h3{font-size:clamp(1.6rem,1.1rem + 2vw,2.6rem);font-weight:800;letter-spacing:-.035em;margin:0 0 .9rem}
.ref__head p{color:var(--ink-2);margin:0;max-width:60ch}
.ref__badge{
  flex:none;width:clamp(72px,9vw,104px);aspect-ratio:1;border-radius:22px;
  background:linear-gradient(145deg,var(--ind),var(--ind-dd));
  display:grid;place-items:center;color:var(--teal-l);
  font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.04em;
  box-shadow:0 18px 34px -18px rgba(56,42,93,.7);
}
@media(max-width:700px){.ref__badge{display:none}}

.ref__flow{display:flex;align-items:stretch;gap:1rem;flex-wrap:wrap;margin-bottom:2.6rem}
.ref__step{
  flex:1 1 200px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);
  padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:.28rem;
}
.ref__step--win{background:linear-gradient(140deg,var(--teal-d),var(--teal));border-color:transparent;color:#fff}
.ref__stepLbl{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.ref__step--win .ref__stepLbl{color:rgba(255,255,255,.7)}
.ref__step b{font-size:1.12rem;font-weight:750;letter-spacing:-.02em}
.ref__step small{font-size:.83rem;color:var(--ink-2);line-height:1.45}
.ref__step--win small{color:rgba(255,255,255,.82)}
.ref__arrow{display:grid;place-items:center;color:var(--ink-3);font-size:1.3rem;flex:none}
@media(max-width:820px){.ref__arrow{display:none}}

.ref__facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.5rem;margin:0;padding:2rem 0 0;border-top:1px solid var(--line)}
.ref__facts b{display:block;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);font-weight:800;letter-spacing:-.045em;color:var(--ind);line-height:1}
.ref__facts span{display:block;margin-top:.35rem;font-size:.82rem;color:var(--ink-3)}

/* Kino-Symbolbild über der Referenzkarte */
.ref__hero{margin:0 0 2.4rem;position:relative;border-radius:var(--r-l);overflow:hidden}
.ref__hero img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.ref__hero figcaption{
  position:absolute;right:.8rem;bottom:.8rem;background:rgba(22,17,42,.74);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.82);font-size:.68rem;letter-spacing:.03em;padding:.35rem .75rem;border-radius:100px;
}

/* Regelgüte-Grafik */
.rg{margin:0 0 2.6rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:1.5rem 1.6rem 1rem}
.rg__cap{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1rem}
.rg__cap b{font-size:1rem;font-weight:750;letter-spacing:-.015em}
.rg__cap span{font-size:.83rem;color:var(--ink-3)}
.rg__svg{width:100%;height:auto;overflow:visible}
.rg__band{fill:rgba(53,154,136,.13)}
.rg__soll{stroke:var(--teal-d);stroke-width:1.2;stroke-dasharray:5 5;opacity:.7}
.rg__sollLbl{fill:var(--teal-d);font:700 8px/1 var(--f);letter-spacing:.12em}
.rg__before,.rg__after{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.rg__before{stroke:var(--sig)}
.rg__after{stroke:var(--teal-d)}
.rg__split{stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 4}
.rg__tag{font:700 10px/1 var(--f);letter-spacing:.1em;text-anchor:middle}
.rg__tag--a{fill:var(--sig)}
.rg__tag--b{fill:var(--teal-d)}
.rg__note{font:600 9px/1 var(--f);fill:var(--ink-3);text-anchor:middle}
.rg__note--b{fill:var(--teal-d)}
/* Kurven zeichnen sich beim Sichtbarwerden */
.rg__before,.rg__after{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.rg.on .rg__before{animation:rgdraw 1.5s var(--ease-io) forwards}
.rg.on .rg__after{animation:rgdraw 1.4s var(--ease-io) .9s forwards}
@keyframes rgdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.rg__before,.rg__after{stroke-dashoffset:0}}

.ref__more{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}
.ref__mini{
  background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
/* mittlere Kachel: Bild nach unten, damit die Reihe versetzt wirkt */
.ref__mini:nth-child(2){flex-direction:column-reverse}
.ref__mini:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(27,21,48,.26)}
.ref__miniImg{aspect-ratio:21/9;overflow:hidden;background:var(--bg-2);flex:none}
.ref__miniImg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ref__mini:hover .ref__miniImg img{transform:scale(1.06)}
.ref__miniTxt{padding:1.6rem 1.7rem;flex:1}
.ref__mini h4{font-size:1.1rem;font-weight:750;margin:0 0 .6rem}
.ref__mini p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.6}
@media(max-width:760px){ .ref__mini:nth-child(2){flex-direction:column} }

/* ═══ STANDORTE ═══ */
.loc{padding:var(--sec) 0;background:var(--ind-dd);color:#fff;position:relative;overflow:hidden}
.loc::before{
  content:'';position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;mask-image:radial-gradient(80% 60% at 70% 50%,#000,transparent);
}
.loc .wrap{position:relative}
.loc__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);margin-top:3.5rem;align-items:start}
.loc__map svg{width:100%;height:auto;max-height:70vh;overflow:visible}
.loc__de{fill:rgba(255,255,255,.045);stroke:rgba(79,192,170,.42);stroke-width:1.4;stroke-linejoin:round}
.pin{cursor:pointer}
.pin__body{fill:var(--teal-l);transition:fill .35s}
.pin__hole{fill:var(--ind-dd);transition:fill .35s}
.pin__sh{fill:rgba(0,0,0,.45)}
.pin__wave{fill:none;stroke:var(--teal-l);stroke-width:1.4;opacity:0;transform-origin:center;transform-box:fill-box}
.pin text{
  fill:rgba(255,255,255,.9);font:650 11px/1 var(--f);text-anchor:middle;letter-spacing:.02em;
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
  paint-order:stroke;stroke:var(--ind-dd);stroke-width:3px;stroke-linejoin:round;
}
.pin:hover text,.pin.on text{opacity:1}
/* Nadel wächst aus der Spitze heraus, damit sie auf dem Ort stehen bleibt */
.pin__body,.pin__hole{transform-origin:0 0;transition:fill .35s,transform .4s var(--ease)}
.pin:hover .pin__body,.pin.on .pin__body{fill:var(--sig)}
.pin:hover .pin__body,.pin:hover .pin__hole,
.pin.on .pin__body,.pin.on .pin__hole{transform:scale(1.22)}
.pin.on .pin__wave{opacity:1;stroke:var(--sig);animation:pinw 1.9s var(--ease-io) infinite}
@keyframes pinw{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.4);opacity:0}}

.loc__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.loc__c{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-l);
  padding:1.5rem;transition:background .45s,border-color .45s,transform .5s var(--ease);cursor:pointer;
  overflow:hidden;
}
/* Stadtbild randlos oben in der Standortkachel */
.loc__pic{margin:-1.5rem -1.5rem 1.1rem;aspect-ratio:21/9;overflow:hidden;background:rgba(255,255,255,.04)}
.loc__pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.03);transition:transform 1.2s var(--ease),filter .5s}
.loc__c:hover .loc__pic img,.loc__c.is-on .loc__pic img{transform:scale(1.06);filter:saturate(1) contrast(1.03)}
/* Mittenwalde hat kein eigenes Stadtbild — Markenkachel statt Fremdfoto */
.loc__c:hover,.loc__c.is-on{background:rgba(53,154,136,.16);border-color:var(--teal);transform:translateY(-4px)}
.loc__type{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--teal-l)}

/* ── Ortstafel (Zeichen 310 StVO) ─────────────────
   Gelbes Feld, umlaufende schwarze Linie mit Abstand zum Rand,
   schwarze Schrift. Zwei Ebenen, weil die Linie eingerückt sitzt. */
.ortstafel{
  background:#F2C200;border-radius:3px;padding:4px;margin:.75rem 0 1rem;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ortstafel__in{
  border:2px solid #14110b;border-radius:1px;
  padding:.5rem .6rem;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.1rem;
  /* Auf den ungünstigsten Fall bemessen (zweizeiliger Name + Kreiszeile),
     damit ALLE Schilder exakt gleich hoch sind — egal wie kurz der Ort heißt. */
  min-height:4.6rem;
}
.ortstafel h3{
  margin:0;color:#14110b;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(.92rem,.82rem + .35vw,1.12rem);text-align:center;text-wrap:balance;
  font-stretch:condensed;
}
.ortstafel small{
  color:#14110b;font-size:.6rem;font-weight:650;letter-spacing:.02em;
  opacity:.82;text-align:center;line-height:1.2;
}
.loc__c:hover .ortstafel,.loc__c.is-on .ortstafel{
  transform:translateY(-2px) rotate(-.6deg);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.loc__c p{margin:0 0 .9rem;font-size:.87rem;color:rgba(255,255,255,.62);line-height:1.5}
.loc__c a{display:block;font-size:.86rem;color:rgba(255,255,255,.85);font-weight:600;transition:color .3s}
.loc__c a:hover{color:var(--teal-l)}
@media(max-width:900px){.loc__grid{grid-template-columns:1fr}.loc__map{max-width:340px;margin-inline:auto}}

/* ═══ UNTERNEHMEN ═══ */
.abt{padding:var(--sec) 0;background:var(--bg)}
.abt__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.abt__txt p{color:var(--ink-2)}
.abt__txt em{font-style:normal;color:var(--teal-d);font-weight:650}
.abt__sig{margin-top:2rem;font-weight:750;color:var(--ink)!important;letter-spacing:-.015em}
.abt__sig span{display:block;font-weight:400;font-size:.85rem;color:var(--ink-3);letter-spacing:0}
.abt__img{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:0 34px 66px -34px rgba(27,21,48,.4)}
.abt__img img{width:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.abt__img:hover img{transform:scale(1.04)}
.abt__cap{
  position:absolute;left:1rem;bottom:1rem;background:rgba(22,17,42,.78);backdrop-filter:blur(10px);
  color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.05em;padding:.45rem .9rem;border-radius:100px;
}
/* ── Geschäftsführung über dem Teamfoto ───────── */
.abt__media{display:flex;flex-direction:column;gap:1.1rem}
.abt__gf{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.gf{
  margin:0;background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.gf:hover{transform:translateY(-5px);box-shadow:0 24px 46px -26px rgba(27,21,48,.32)}
.gf img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.gf:hover img{transform:scale(1.05)}
.gf figcaption{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.1rem}
.gf b{font-size:1rem;font-weight:750;letter-spacing:-.022em;line-height:1.2}
.gf span{font-size:.78rem;color:var(--teal-d);font-weight:650}
.abt__note{margin-top:1.8rem;font-size:.96rem;color:var(--ink-2)!important;max-width:56ch;line-height:1.62}
@media(max-width:420px){.abt__gf{grid-template-columns:1fr}}

.abt__proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:4.5rem}
.proof{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);padding:1.7rem;position:relative;overflow:hidden}
.proof::before{content:'';position:absolute;left:0;top:1.7rem;bottom:1.7rem;width:3px;background:var(--teal);border-radius:0 3px 3px 0}
.proof b{display:block;font-size:1.02rem;font-weight:750;margin-bottom:.5rem;letter-spacing:-.015em}
/* Die beiden Marken stehen nebeneinander: Schriftzug links, Zeichen rechts,
   beide auf derselben Bildhoehe, dazwischen ein feiner Strich. Bewusst mit
   .proof davor, sonst gewinnt das display:block von .proof b. */
.proof .proof__marken{
  display:flex;align-items:center;gap:.9rem;
  margin-bottom:.9rem;
}
.proof__wort{height:2em;width:auto;display:block;flex:none}
.proof__hoch{height:2em;width:auto;display:block;flex:none}
.proof__strich{flex:1;height:1px;background:var(--line);min-width:.8rem}
.proof p{margin:0;font-size:.89rem;color:var(--ink-2);line-height:1.58}
@media(max-width:860px){.abt__top{grid-template-columns:1fr}}

/* ═══ KARRIERE ═══ */
.car{padding:var(--sec) 0;background:linear-gradient(150deg,var(--ind) 0%,var(--ind-dd) 78%);color:#fff}
.car__wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.car__ben{list-style:none;margin:2rem 0 2.4rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}
.car__ben li{position:relative;padding-left:1.7rem;font-size:.93rem;color:rgba(255,255,255,.78)}
.car__ben li::before{content:'';position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;background:var(--teal-l);border-radius:50%}
.car__media{position:relative;border-radius:clamp(16px,2.5vw,24px);overflow:hidden}
.car__media img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.car__quote{
  position:absolute;left:1.1rem;right:1.1rem;bottom:1.1rem;margin:0;
  background:rgba(22,17,42,.84);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.13);
  padding:1.4rem 1.6rem;border-radius:var(--r-l);font-size:.95rem;line-height:1.55;color:#fff;
}
.car__quote cite{display:block;margin-top:.8rem;font-style:normal;font-size:.78rem;color:var(--teal-l);font-weight:650}
@media(max-width:860px){.car__wrap{grid-template-columns:1fr}}

/* ═══ FAQ ═══ */
.faq{padding:var(--sec) 0;background:var(--bg-2)}
.faq__grid{display:grid;grid-template-columns:1.55fr .45fr;gap:clamp(1.5rem,4vw,3rem);margin-top:3rem;align-items:start}
.faq__list{display:flex;flex-direction:column;gap:.7rem}
.fq{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:border-color .35s,box-shadow .45s}
.fq[open]{border-color:var(--teal);box-shadow:0 18px 40px -28px rgba(27,21,48,.26)}
.fq summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.5rem;display:flex;align-items:center;gap:1rem;
  font-weight:700;font-size:clamp(.98rem,.94rem + .2vw,1.1rem);letter-spacing:-.018em;
}
.fq summary::-webkit-details-marker{display:none}
.fq summary span{flex:1}
.fq summary::after{
  content:'';width:.7rem;height:.7rem;flex:none;
  border-right:2.2px solid var(--ind);border-bottom:2.2px solid var(--ind);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s var(--ease);
}
.fq[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.fq__a{padding:0 1.5rem 1.5rem;border-top:1px solid var(--line);padding-top:1.2rem}
.fq__a p{margin:0 0 .9rem;color:var(--ink-2);line-height:1.68;font-size:.96rem}
.fq__a p:last-child{margin-bottom:0}
.fq__a ul{margin:0 0 .9rem;padding-left:1.2rem;color:var(--ink-2);line-height:1.75;font-size:.96rem}
.fq__a strong{color:var(--ink);font-weight:650}

.faq__side{
  background:linear-gradient(155deg,var(--ind-dd),var(--ind));color:#fff;
  border-radius:var(--r-l);padding:1.8rem;position:sticky;top:6rem;
}
.faq__side h3{font-size:1.15rem;font-weight:750;margin:0 0 .7rem;letter-spacing:-.02em}
.faq__side p{font-size:.9rem;color:rgba(255,255,255,.68);line-height:1.6;margin:0 0 1.4rem}
.faq__tel{
  display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin-bottom:1.2rem;
  color:#fff;transition:color .3s;
}
.faq__tel:hover{color:var(--teal-l)}
.faq__side .lnk{color:var(--teal-l);border-color:var(--teal-l);font-size:.88rem}
@media(max-width:900px){.faq__grid{grid-template-columns:1fr}.faq__side{position:static}}

/* ═══ KONTAKT ═══ */
.cnt{padding:var(--sec) 0;background:var(--bg)}
/* Ansprechpartner */
.apr{margin-top:3rem}
.apr__lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--teal-d);margin:0 0 1.2rem}
.apr__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.1rem}
.apr__c{
  margin:0;background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.apr__c:hover{transform:translateY(-5px);box-shadow:0 22px 42px -26px rgba(27,21,48,.3)}
.apr__c img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.apr__c figcaption{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.12rem}
.apr__c b{font-size:.94rem;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.apr__c span{font-size:.74rem;color:var(--ink-3);line-height:1.35}

/* Social Media */
.soc{margin-top:2rem}
.soc__lbl{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.45);margin-bottom:.85rem}
.soc__row{display:flex;gap:.6rem}
.soc__i{
  width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);
  transition:background .35s,color .35s,transform .45s var(--ease),border-color .35s;
}
.soc__i svg{width:1.1rem;height:1.1rem}
.soc__i:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-3px)}

/* Vertrauensband */
.trust{
  display:flex;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  margin-top:2.6rem;padding:1.5rem 1.8rem;background:var(--wht);
  border:1px solid var(--line);border-radius:var(--r-l);
}
.trust__g{display:flex;align-items:center;gap:.9rem;flex:none;transition:transform .4s var(--ease)}
.trust__g:hover{transform:translateY(-2px)}
.trust__val{font-size:clamp(2rem,1.4rem + 1.6vw,2.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--ind)}
.trust__stars{color:#f5a524;font-size:1.05rem;letter-spacing:.06em}
.trust__meta{display:flex;flex-direction:column;font-size:.78rem;color:var(--ink-3);line-height:1.35}
.trust__meta b{font-size:.86rem;color:var(--ink);font-weight:700}
.trust__pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;flex:1;border-left:1px solid var(--line);padding-left:clamp(1.5rem,3vw,3rem)}
.trust__pts b{display:block;font-size:1rem;font-weight:750;letter-spacing:-.015em}
.trust__pts span{font-size:.8rem;color:var(--ink-3);line-height:1.4}
@media(max-width:820px){.trust__pts{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.4rem;width:100%}}

.cnt__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:1.5rem;margin-top:3rem;align-items:start}
.cnt__col{border-radius:clamp(16px,2.5vw,24px);padding:clamp(1.8rem,3.5vw,2.8rem)}
.cnt__col--alarm{background:linear-gradient(155deg,var(--ind-dd),var(--ind));color:#fff;position:sticky;top:6rem}
.cnt__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.cnt__head h3{font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);font-weight:800;letter-spacing:-.03em;margin:0}
.cnt__col--alarm>p{color:rgba(255,255,255,.7);font-size:.96rem;margin:0 0 2rem}
.cnt__tel{
  display:flex;flex-direction:column;gap:.25rem;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);padding:1.25rem 1.5rem;margin-bottom:.8rem;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:800;letter-spacing:-.03em;
  transition:background .4s,border-color .4s,transform .5s var(--ease);
}
.cnt__tel small{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-l)}
.cnt__tel:hover{background:rgba(255,92,40,.16);border-color:var(--sig);transform:translateY(-3px)}
/* Beide Rufnummern gleich gross. Die Berliner war kleiner gesetzt,
   das las sich wie eine Nebensache. */
.cnt__mini{font-size:.87rem;color:rgba(255,255,255,.55);margin:1.2rem 0 0}
.cnt__mini a{color:var(--teal-l);border-bottom:1px solid rgba(79,192,170,.4)}
.cnt__col--form{background:var(--wht);border:1px solid var(--line)}
.cnt__col--form h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .6rem}
.cnt__col--form>p{color:var(--ink-2);margin:0 0 2rem;font-size:.96rem}

.frm__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frm__f{margin-bottom:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.frm__f label{font-size:.79rem;font-weight:650;color:var(--ink-2);letter-spacing:.02em}
.frm__f input,.frm__f select,.frm__f textarea{
  color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r);
  padding:.85rem 1rem;font-size:.95rem;transition:border-color .3s,background .3s;width:100%;
}
.frm__f textarea{resize:vertical;min-height:110px;font-family:inherit}
.frm__f input:focus,.frm__f select:focus,.frm__f textarea:focus{border-color:var(--teal);background:var(--wht);outline:none}
.frm__f input:user-invalid{border-color:var(--sig)}
.frm__chk{display:flex;gap:.75rem;align-items:flex-start;margin:.6rem 0 1.5rem;font-size:.83rem;color:var(--ink-2);line-height:1.5;cursor:pointer}
.frm__chk input{margin-top:.22rem;width:18px;height:18px;accent-color:var(--teal);flex:none;cursor:pointer}
.frm__chk a{color:var(--ind);border-bottom:1px solid var(--teal)}
.frm__stat{font-size:.88rem;font-weight:600;margin:1rem 0 0;min-height:1.2em}
.frm__stat.ok{color:var(--teal-d)}
.frm__stat.err{color:var(--sig-d)}
@media(max-width:900px){.cnt__grid{grid-template-columns:1fr}.cnt__col--alarm{position:static}}
@media(max-width:560px){.frm__row{grid-template-columns:1fr}}

/* ═══ RECHTSSEITEN ═══ */
.legal{padding:clamp(7rem,12vw,10rem) 0 var(--sec);background:var(--bg)}
.legal__h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;margin:0 0 .6rem}
.legal__stand{color:var(--ink-3);font-size:.9rem;margin:0 0 2.4rem}
.legal__demo b{display:block;font-size:.95rem;font-weight:750;margin-bottom:.5rem}
.legal__demo p{margin:0;font-size:.92rem;color:var(--ink-2);line-height:1.65}
.legal__body{max-width:74ch}
.legal__body h2{
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem);font-weight:750;letter-spacing:-.02em;
  margin:2.6rem 0 .8rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body p{color:var(--ink-2);line-height:1.7;margin:0 0 1rem;font-size:.98rem}
.legal__body strong{color:var(--ink);font-weight:650}
.legal__body ul{margin:0 0 1rem;padding-left:1.2rem;color:var(--ink-2);line-height:1.8}
.legal__body a{color:var(--ind);border-bottom:1px solid var(--teal);transition:color .3s}
.legal__body a:hover{color:var(--teal-d)}
.legal__back{margin-top:3.5rem}

/* ═══ STELLENSEITE ═══ */
.jobs{padding:clamp(7rem,12vw,10rem) 0 var(--sec);background:var(--bg)}
.jobs .lead{margin-bottom:2.5rem}
.jf{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.jf__b{
  background:var(--wht);border:1.5px solid var(--line);border-radius:100px;
  /* .95rem statt 1.1rem: bei >=1600px ist der Inhaltsbereich nur 1136 px breit
     (der Innenabstand deckelt bei 4.5rem). Mit 1.1rem kamen die 8 Knoepfe auf
     1150 px und brachen dort wieder um. */
  padding:.55rem .95rem;font-size:.86rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:background .3s,border-color .3s,color .3s;
}
.jf__b b{font-weight:750;color:var(--ink-3);margin-left:.25rem}
.jf__b:hover{border-color:var(--teal)}
.jf__b.is-on{background:var(--ind);border-color:var(--ind);color:#fff}
.jf__b.is-on b{color:var(--teal-l)}
.jf__count{font-size:.85rem;color:var(--ink-3);margin:0 0 1.5rem}

.joblist{display:flex;flex-direction:column;gap:.7rem}
.job{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:border-color .35s,box-shadow .45s}
.job.is-open{border-color:var(--teal);box-shadow:0 18px 40px -26px rgba(27,21,48,.28)}
.job__head{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;
  padding:1.15rem 1.5rem;
}
.job__meta{display:flex;flex-direction:column;gap:.15rem;min-width:9.5rem}
.job__ort{font-size:.86rem;font-weight:750;color:var(--ind);letter-spacing:-.015em}
.job__typ{font-size:.72rem;color:var(--ink-3)}
.job__titel{font-size:1rem;font-weight:650;color:var(--ink);line-height:1.35;letter-spacing:-.015em}
.job__plus{position:relative;width:1.4rem;height:1.4rem;flex:none}
.job__plus::before,.job__plus::after{
  content:'';position:absolute;inset:50% 0 auto 0;height:2px;background:var(--ind);
  border-radius:2px;transition:transform .4s var(--ease);
}
.job__plus::after{transform:rotate(90deg)}
.job.is-open .job__plus::after{transform:rotate(0)}
.job__body{padding:0 1.5rem 1.5rem;border-top:1px solid var(--line);margin-top:.2rem;padding-top:1.3rem}
.job__txt h4{font-size:.95rem;font-weight:750;margin:1.3rem 0 .5rem;letter-spacing:-.015em}
.job__txt h4:first-child{margin-top:0}
.job__txt ul{margin:0 0 .5rem;padding-left:1.15rem;color:var(--ink-2);line-height:1.65;font-size:.93rem}
.job__txt li{margin-bottom:.25rem}
.job__act{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
@media(max-width:720px){
  .job__head{grid-template-columns:1fr auto;gap:.5rem .8rem}
  .job__meta{flex-direction:row;gap:.6rem;align-items:baseline;grid-column:1/-1;min-width:0}
}

/* Datei-Upload */
.up__zone{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  border:2px dashed var(--line);border-radius:var(--r-l);padding:1.5rem 1.2rem;
  background:var(--bg);cursor:pointer;
  transition:border-color .3s,background .3s,transform .35s var(--ease);
}
.up__zone:hover,.up__zone:focus-visible{border-color:var(--teal);background:var(--wht)}
.up__zone.is-drueber{border-color:var(--teal);background:rgba(53,154,136,.09);transform:scale(1.01)}
.up__zone svg{width:1.9rem;height:1.9rem;color:var(--teal-d);margin-bottom:.15rem}
.up__zone b{font-size:.92rem;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.up__zone span{font-size:.79rem;color:var(--ink-3);line-height:1.45}
.up__zone u{color:var(--teal-d);text-underline-offset:2px}

.up__liste{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.up__d{
  display:flex;align-items:center;gap:.7rem;background:var(--wht);
  border:1px solid var(--line);border-radius:var(--r);padding:.55rem .7rem;
}
.up__ico{
  flex:none;font-size:.6rem;font-weight:800;letter-spacing:.06em;color:#fff;
  background:var(--ind);border-radius:3px;padding:.28rem .4rem;
}
.up__n{flex:1;font-size:.85rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up__g{font-size:.76rem;color:var(--ink-3);flex:none}
.up__x{
  flex:none;width:1.5rem;height:1.5rem;border:0;border-radius:50%;background:var(--bg-2);
  color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer;transition:background .3s,color .3s;
}
.up__x:hover{background:var(--rot);color:#fff}
.up__hint{margin:.55rem 0 0;font-size:.79rem;min-height:1em}
.up__hint.is-ok{color:var(--teal-d)}
.up__hint.is-warn{color:var(--sig-d)}

/* Bewerbungsblock */
.bew{
  margin-top:clamp(3rem,6vw,5rem);border-radius:clamp(16px,2.5vw,26px);
  background:linear-gradient(155deg,var(--ind-dd),var(--ind));color:#fff;
  padding:clamp(1.8rem,4vw,3.4rem);
}
.bew__in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.bew__pers{display:flex;gap:1.1rem;align-items:center;margin-top:2rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);padding:1rem 1.2rem}
.bew__pers img{width:4.6rem;height:4.6rem;border-radius:50%;object-fit:cover;flex:none}
.bew__pers div{display:flex;flex-direction:column;gap:.1rem}
.bew__pers b{font-size:1rem;font-weight:750}
.bew__pers span{font-size:.76rem;color:rgba(255,255,255,.55);margin-bottom:.35rem}
.bew__pers a{font-size:.86rem;color:var(--teal-l);font-weight:650}
.bew__frm{background:var(--wht);border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2rem)}
.bew__frm .frm__f label{color:var(--ink-2)}
@media(max-width:860px){.bew__in{grid-template-columns:1fr}}
.btn__short{display:none}
@media(max-width:600px){.hdr__cta .btn__short{display:inline}}

/* ═══ KARRIERESEITE ═══ */
.khero{position:relative;overflow:hidden;background:var(--ind-dd);margin-top:calc(-1 * (76px + 2rem))}
.khero__media{position:relative;width:min(100%,var(--wrap));margin-inline:auto;aspect-ratio:1280/650}
.khero__media img{width:100%;height:100%;object-fit:cover}
.khero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,17,42,.85) 0%,rgba(22,17,42,.3) 30%,rgba(22,17,42,.9) 100%)}
.khero__in{position:absolute;left:0;right:0;bottom:0;width:min(100%,var(--wrap));margin-inline:auto;color:#fff;padding:0 clamp(1.5rem,4.5vw,4.5rem) clamp(1.8rem,3.5vw,3rem)}
.khero__h1{font-size:clamp(2.2rem,1rem + 5vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:0 0 1rem}
.khero__h1 em{font-style:normal;color:var(--teal-l)}
.khero__sub{font-size:clamp(.96rem,.9rem + .4vw,1.2rem);color:rgba(255,255,255,.78);line-height:1.55;max-width:56ch;margin:0 0 1.6rem}
.khero__acts{display:flex;gap:.8rem;flex-wrap:wrap}
@media(max-width:900px){
  .khero{margin-top:0}
  .khero__in{position:static;padding:2rem var(--pad) 2.6rem}
  .khero__scrim{background:linear-gradient(180deg,rgba(22,17,42,.6),rgba(22,17,42,.2))}
}

.kfacts{padding:var(--sec) 0;background:var(--bg)}
/* Feste Spaltenzahl statt auto-fit — sonst entstehen ungleiche Restzeilen */
.kfacts__grid{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){.kfacts__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kfacts__grid{grid-template-columns:1fr}}
.kfacts__grid li{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.4rem;position:relative;overflow:hidden}
.kfacts__grid li::before{content:'';position:absolute;left:0;top:0;width:3px;height:100%;background:var(--teal)}
.kfacts__grid b{font-size:1.15rem;font-weight:750;letter-spacing:-.02em}
.kfacts__grid span{font-size:.92rem;color:var(--ink-2);line-height:1.55}

.stim{padding:var(--sec) 0;background:linear-gradient(150deg,var(--ind) 0%,var(--ind-dd) 80%);color:#fff}
.stim__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
@media(max-width:1100px){.stim__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.stim__grid{grid-template-columns:1fr}}
.stim__c{margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);overflow:hidden;transition:transform .5s var(--ease),border-color .4s}
.stim__c:hover{transform:translateY(-5px);border-color:var(--teal)}
.stim__c video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.stim__c figcaption{padding:1.2rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.2rem}
.stim__c b{font-size:1.05rem;font-weight:750;letter-spacing:-.02em}
.stim__c figcaption>span{font-size:.78rem;color:var(--teal-l);font-weight:600;margin-bottom:.6rem}
.stim__c blockquote{margin:0;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.75)}

.ben{padding:var(--sec) 0;background:var(--bg-2)}
/* 9 Benefits ergeben so ein sauberes 3x3 */
.ben__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
@media(max-width:900px){.ben__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ben__grid{grid-template-columns:1fr}}
.ben__c{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);padding:1.7rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ben__c:hover{transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(27,21,48,.26)}
.ben__c img{width:44px;height:44px;margin-bottom:1rem}
.ben__c b{display:block;font-size:1.08rem;font-weight:750;letter-spacing:-.02em;margin-bottom:.5rem}
.ben__c p{margin:0;font-size:.93rem;color:var(--ink-2);line-height:1.6}

.kcta{padding:var(--sec) 0;background:var(--ind-dd);color:#fff}
.kcta__in{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.kcta__pers{margin:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);overflow:hidden;text-align:center}
.kcta__pers img{width:100%;aspect-ratio:1;object-fit:cover}
.kcta__pers figcaption{padding:1.2rem;display:flex;flex-direction:column;gap:.15rem}
.kcta__pers b{font-size:1.1rem;font-weight:750}
.kcta__pers>figcaption>span{font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:.5rem}
.kcta__pers a{font-size:.9rem;color:var(--teal-l);font-weight:650}
@media(max-width:860px){.kcta__in{grid-template-columns:1fr}}

/* ═══ FOOTER ═══ */
.ftr{background:var(--ind-dd);color:rgba(255,255,255,.62);padding:clamp(3.5rem,7vw,6rem) 0 2rem;font-size:.9rem}
.ftr__top{display:grid;grid-template-columns:1.1fr 1.9fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.12)}
.ftr__brand img{filter:brightness(0) invert(1);opacity:.95;margin-bottom:1.4rem;width:min(260px,70%)}
.ftr__brand p{margin:0 0 .5rem;max-width:38ch;line-height:1.6}
.ftr__claim{color:var(--teal-l)!important;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.ftr__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem}
.ftr__nav h4{color:#fff;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;margin:0 0 1.1rem;font-weight:700}
.ftr__nav a{display:block;padding:.32rem 0;transition:color .3s,padding-left .35s var(--ease)}
.ftr__nav a:hover{color:var(--teal-l);padding-left:.4rem}
.ftr__bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.8rem;font-size:.79rem;color:rgba(255,255,255,.42)}
.ftr__bot a:hover{color:var(--teal-l)}
@media(max-width:800px){.ftr__top{grid-template-columns:1fr}}

/* ═══ INA — KI-ASSISTENTIN ═══ */
.ina__fab{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:80;
  display:flex;align-items:center;gap:.7rem;background:var(--ind);color:#fff;
  border:0;border-radius:100px;padding:.85rem 1.35rem .85rem .85rem;cursor:pointer;
  font-weight:650;font-size:.92rem;box-shadow:0 16px 40px -14px rgba(22,17,42,.65);
  transition:transform .5s var(--ease),background .4s;
}
.ina__fab:hover{transform:translateY(-4px) scale(1.03);background:var(--teal-d)}
.ina__fab.hide{transform:translateY(140%);pointer-events:none}
.ina__fabIco{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--teal);display:grid;place-items:center;flex:none}
.ina__fabIco svg{width:1.15rem;height:1.15rem;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ina__fabRing{position:absolute;left:.85rem;top:50%;translate:0 -50%;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--teal);animation:ping 2.6s var(--ease-io) infinite}
@media(max-width:520px){.ina__fabTxt{display:none}.ina__fab{padding:.85rem;border-radius:50%}}

.ina{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:90;
  width:min(94vw,400px);height:min(78vh,600px);background:var(--wht);
  border-radius:22px;box-shadow:0 40px 90px -30px rgba(22,17,42,.55);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  transform-origin:bottom right;animation:inaIn .55s var(--ease);
}
.ina[hidden]{display:none}
@keyframes inaIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.ina__hd{display:flex;align-items:center;gap:.85rem;padding:1rem 1.1rem;background:var(--ind);color:#fff;flex:none}
.ina__av{
  width:2.6rem;height:2.6rem;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal-l),var(--teal-d));
  font-size:.72rem;font-weight:800;letter-spacing:.04em;
}
.ina__who{flex:1;min-width:0}
.ina__who b{display:flex;align-items:center;gap:.5rem;font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.ina__on{font-size:.66rem;font-weight:600;color:#4ade80;display:inline-flex;align-items:center;gap:.3rem}
.ina__on::before{content:'';width:.4rem;height:.4rem;border-radius:50%;background:#4ade80}
.ina__who small{display:block;font-size:.71rem;color:rgba(255,255,255,.6);margin-top:.1rem}
.ina__x{background:none;border:0;color:rgba(255,255,255,.7);font-size:1.7rem;line-height:1;cursor:pointer;padding:0 .2rem;transition:color .3s}
.ina__x:hover{color:#fff}

.ina__log{flex:1;overflow-y:auto;padding:1.2rem 1.1rem;display:flex;flex-direction:column;gap:.85rem;scroll-behavior:smooth}
.ina__log::-webkit-scrollbar{width:5px}
.ina__log::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.msg{max-width:86%;padding:.75rem 1rem;border-radius:16px;font-size:.9rem;line-height:1.5;animation:msgIn .45s var(--ease)}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg--ina{background:var(--bg-2);color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.msg--me{background:var(--ind);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg strong{font-weight:700}
.msg a{color:var(--teal-d);font-weight:650;border-bottom:1px solid currentColor}
.msg--me a{color:var(--teal-l)}
.msg--typ{display:flex;gap:.28rem;padding:.95rem 1rem}
.msg--typ i{width:.42rem;height:.42rem;border-radius:50%;background:var(--ink-3);animation:typ 1.3s infinite}
.msg--typ i:nth-child(2){animation-delay:.18s}
.msg--typ i:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.ina__quick{display:flex;gap:.45rem;flex-wrap:wrap;padding:0 1.1rem .8rem;flex:none}
.ina__quick:empty{display:none}
.ina__quick button{
  background:var(--wht);border:1.5px solid var(--line);border-radius:100px;
  padding:.5rem .95rem;font-size:.8rem;font-weight:600;color:var(--ind);cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease);
}
.ina__quick button:hover{background:var(--ind);border-color:var(--ind);color:#fff;transform:translateY(-2px)}

.ina__in{display:flex;gap:.5rem;padding:.8rem 1.1rem;border-top:1px solid var(--line);flex:none}
.ina__in input{flex:1;background:var(--bg);border:1.5px solid var(--line);border-radius:100px;padding:.7rem 1.1rem;font-size:.9rem}
.ina__in input:focus{border-color:var(--teal);outline:none}
.ina__in button{
  width:2.7rem;height:2.7rem;flex:none;border-radius:50%;border:0;background:var(--teal);color:#fff;
  cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .3s var(--ease);
}
.ina__in button:hover{background:var(--ind);transform:scale(1.06)}
.ina__in button svg{width:1.15rem;height:1.15rem}
.ina__note{margin:0;padding:0 1.1rem 1rem;font-size:.7rem;color:var(--ink-3);line-height:1.45;flex:none}
.ina__note a{color:var(--ind);font-weight:650}

/* ═══ CONSENT ═══ */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:clamp(.8rem,2vw,1.5rem);
  transform:translateY(110%);transition:transform .55s var(--ease);
}
.cc.is-on{transform:none}
.cc__in{
  width:min(100%,var(--wrap));margin-inline:auto;
  background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 30px 70px -28px rgba(27,21,48,.45);
  padding:clamp(1.2rem,2.5vw,1.8rem);
  display:grid;grid-template-columns:1fr auto;gap:1.2rem 2rem;align-items:center;
}
.cc__head b{display:block;font-size:1.02rem;font-weight:750;letter-spacing:-.02em;margin-bottom:.35rem}
.cc__head p{margin:0;font-size:.87rem;color:var(--ink-2);line-height:1.6;max-width:70ch}
.cc__head a{color:var(--ind);border-bottom:1px solid var(--teal)}
.cc__kats{grid-column:1/-1;display:grid;gap:.7rem;border-top:1px solid var(--line);margin-top:.2rem;padding-top:1.1rem}
/* display:grid würde das hidden-Attribut überschreiben */
.cc__kats[hidden]{display:none}
.cc__kat{display:flex;gap:.8rem;align-items:flex-start;font-size:.85rem;color:var(--ink-2);line-height:1.55;cursor:pointer}
.cc__kat input{margin-top:.15rem;width:18px;height:18px;accent-color:var(--teal);flex:none;cursor:pointer}
.cc__kat b{display:block;color:var(--ink);font-weight:700;margin-bottom:.1rem}
.cc__kat i{font-style:normal;font-weight:500;color:var(--ink-3);font-size:.78rem}
.cc__btns{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.cc__b{
  border:1.5px solid var(--line);background:var(--wht);color:var(--ink);
  border-radius:100px;padding:.72rem 1.3rem;font-size:.87rem;font-weight:650;cursor:pointer;
  transition:background .3s,border-color .3s,color .3s,transform .35s var(--ease);white-space:nowrap;
}
.cc__b:hover{transform:translateY(-2px)}
.cc__b--alle{background:var(--ind);border-color:var(--ind);color:#fff}
.cc__b--alle:hover{background:var(--teal-d);border-color:var(--teal-d)}
.cc__b--det{border-color:transparent;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){
  .cc__in{grid-template-columns:1fr}
  .cc__btns{justify-content:stretch}
  .cc__b{flex:1 1 auto;text-align:center}
}

.cc__re{
  position:fixed;left:1rem;bottom:1rem;z-index:79;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:100px;padding:.5rem .9rem .5rem .7rem;
  font-size:.76rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  box-shadow:0 8px 22px -12px rgba(27,21,48,.35);
  transition:color .3s,border-color .3s,transform .4s var(--ease);
}
.cc__re svg{width:1.05rem;height:1.05rem;flex:none}
.cc__re:hover{color:var(--ind);border-color:var(--teal);transform:translateY(-2px)}
@media(max-width:700px){.cc__re span{display:none}.cc__re{padding:.6rem;border-radius:50%}}

/* ═══ CURSOR ═══ */
.cur{position:fixed;top:0;left:0;width:26px;height:26px;border:1.5px solid var(--teal);border-radius:50%;pointer-events:none;z-index:200;mix-blend-mode:difference;transition:width .35s var(--ease),height .35s var(--ease),background .35s;translate:-50% -50%}
.cur.big{width:56px;height:56px;background:rgba(53,154,136,.22)}
@media(hover:none),(pointer:coarse){.cur{display:none}}

/* Hinweisbox auf die Baukasten-Seite (nur fuer das INSTATEC-Team sichtbar gedacht) */
.bkhint{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(150deg,var(--ind-dd),var(--ind));color:#fff;border-radius:var(--r-l);
  padding:1.4rem 1.7rem;margin-bottom:1.5rem}
.bkhint b{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-l);margin-bottom:.45rem}
.bkhint p{margin:0;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.55;max-width:62ch}
/* Datenschutzhinweis unmittelbar am Formular (Art. 13 DSGVO) */
.frm__ds{background:var(--bg);border-left:2.5px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  padding:.9rem 1.1rem;margin:1.2rem 0 .6rem;font-size:.82rem;line-height:1.6;color:var(--ink-2)}
.frm__ds b{display:block;color:var(--ink);font-weight:700;margin-bottom:.25rem;font-size:.85rem}
.frm__ds a{display:inline-block;margin-top:.4rem;color:var(--ind);border-bottom:1px solid var(--teal)}
/* Ausbildungsseite: nur zwei Videos nebeneinander */
.stim__grid--zwei{grid-template-columns:repeat(2,1fr);max-width:900px}
@media(max-width:620px){.stim__grid--zwei{grid-template-columns:1fr}}
.stim__c blockquote em{display:block;margin-top:.5rem;font-style:normal;color:var(--teal-l);font-size:.85rem}

/* ═══ I³-KONZEPT ═══ */
.i3{padding:var(--sec) 0;background:var(--ind-dd);color:#fff}
.i3__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:3.5rem 0 2.5rem}
.i3__c{background:rgba(255,255,255,.05);border:1px solid var(--line-l);border-radius:var(--r-l);padding:2rem 1.9rem}
.i3__n{display:block;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--teal-l);margin-bottom:1rem}
.i3__c h3{font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;margin:0 0 .7rem}
.i3__c p{color:rgba(255,255,255,.76);font-size:.95rem;line-height:1.62;margin:0}
.i3__c .lnk{display:inline-block;margin-top:.35rem;color:var(--teal-l)}
.i3__rev p .lnk,.i3__phil .lnk{color:var(--teal-l)}
.i3__facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-bottom:2.5rem}
.i3__f{display:flex;align-items:flex-start;gap:1.5rem;background:var(--teal-d);border-radius:var(--r-l);padding:1.9rem}
.i3__f b{font-size:clamp(2.4rem,4.6vw,3.4rem);line-height:.95;letter-spacing:-.03em;flex:none}
.i3__f span{color:rgba(255,255,255,.9);font-size:.93rem;line-height:1.6}
.i3__rev{background:rgba(255,255,255,.05);border:1px solid var(--line-l);border-left:3px solid var(--sig);border-radius:var(--r-l);padding:1.9rem 2.1rem;margin-bottom:2rem}
.i3__rev h3{font-size:1.25rem;margin:0 0 .6rem}
.i3__rev p{color:rgba(255,255,255,.78);line-height:1.65;margin:0;max-width:70ch}
.i3__phil{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.65;max-width:78ch;margin:0}
.i3__phil b{display:block;color:var(--teal-l);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
@media(max-width:900px){
  .i3__grid,.i3__facts{grid-template-columns:1fr}
  .i3__f{flex-direction:column;gap:.6rem}
}

/* ═══ I³ ALS BILDMARKE IM TEXT ═══ */
/* Ausgemessen am Zeichen: der Stamm des I nimmt 97,7 % der Bildhoehe ein.
   Bei 1.42em wurde das I also 1,39 em hoch, waehrend die Grossbuchstaben
   daneben 0,70 em messen. Es stand doppelt so hoch im Text. Inter hat eine
   Versalhoehe von rund 0,727 em, geteilt durch 0,977 ergibt 0,745em.
   Die Unterkante des Bildes ist zugleich die Unterkante des I, deshalb
   sitzt es ohne Verschiebung genau auf der Schriftlinie. */
/* Anderthalbfach gegenueber der ersten Fassung — kleiner war es im
   Flieszttext nicht zu erkennen. Sitzt auf der Grundlinie und ragt
   dadurch ueber die Versalhoehe hinaus, so wie ein Markenzeichen soll. */
.i3m{display:inline-block;height:1.12em;width:auto;vertical-align:baseline;margin-right:.02em}
.i3w{white-space:nowrap}
/* Auf dunklem Grund muss die helle Fassung stehen. Sonst steht ein
   dunkelblaues Zeichen mitten in hellem Text und liest sich wie ein
   Fehler im Satz. Als Regel statt als Handarbeit an jeder Fundstelle,
   damit es beim naechsten Absatz nicht wieder vergessen wird. */
.hero .i3m,.i3 .i3m,.cnt .i3m,.ftr .i3m,.nums .i3m{content:url("../img/i3-mark-hell.png")}
/* Die drei Anfangsbuchstaben von Integrierte Intelligente Instandhaltung
   sind der Ursprung des Markenzeichens. Sie werden hervorgehoben und das
   Zeichen steht als Ergebnis daneben. */
.i3__ini{color:var(--teal-l)}
/* Ueberschrift und Markenzeichen stehen nebeneinander im selben Raster wie
   die drei Kacheln darunter. So sitzt das Zeichen genau ueber der dritten. */
.i3__kopf{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  align-items:center;margin-bottom:1.5rem;
}
.i3__kopf .h2{grid-column:1/3;margin:0}
/* Eigene Schriftgroesse, damit die Hoehe in em an der Ueberschrift haengt:
   zwei Zeilen bei Zeilenabstand 1.02 sind 2.04em. */
.i3__zeichen{
  grid-column:3;justify-self:center;align-self:center;
  font-size:clamp(2rem,1.1rem + 4.1vw,4.5rem);
  height:2.04em;width:auto;display:block;
}
@media(max-width:860px){
  .i3__kopf{grid-template-columns:1fr auto;gap:1.4rem;align-items:end}
  .i3__kopf .h2{grid-column:1}
  .i3__zeichen{grid-column:2;justify-self:end;height:1.7em}
}
/* Das INSTATEC-Logo im Fliesstext der Kacheln, auf Zeilenhoehe gebracht */
.i3m--wort{height:.92em;vertical-align:-.06em}
.i3m--badge{height:clamp(36px,4.4vw,50px);vertical-align:0}
/* In der Kopfleiste zieht die Marke mit dem Logo mit: ueber dem dunklen Hero
   weiss, auf der hellen Leiste in CI-Farbe. */
.nav .i3m{height:.7em;vertical-align:baseline;transition:filter .5s}
.hdr:not(.stuck) .nav .i3m{filter:brightness(0) invert(1)}

/* ═══ KONTAKT: nur noch der Stoerungsweg, dafuer ueber die volle Breite ═══ */
.cnt__grid--voll{grid-template-columns:1fr}
.cnt__grid--voll .cnt__col--alarm{position:static}
.cnt__grid--voll .cnt__tels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.4rem}
.cnt__grid--voll .cnt__tel{margin:0}

/* ═══ EMK: Hinweis zur Verrechnung des Angebots ═══ */
.kcta__hinweis{max-width:74ch;margin:-.6rem 0 2rem;padding:1.1rem 1.4rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line-l);
  border-left:3px solid var(--teal-l);border-radius:var(--r-l);
  font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.82)}

/* ═══ Aktive Seite im Menue ═══ */
.nav a.is-hier{color:var(--teal-d)}
.hdr:not(.stuck) .nav a.is-hier{color:var(--teal-l)}

@media(max-width:1120px){
  /* Das Menue ist hier ein dunkles Panel — die Marke muss hell sein. */
  .nav .i3m{filter:brightness(0) invert(1);height:.7em}
  .nav a.is-hier{color:var(--teal-l)!important}
}
@media(max-width:760px){
  .cnt__grid--voll .cnt__tels{grid-template-columns:1fr}
}

/* ═══ ANMELDUNG ═══ */
.anmeld{padding:calc(var(--sec) * .8) 0;background:var(--bg-2);min-height:70vh;display:grid;place-items:center}
.anmeld__wrap{display:grid;place-items:center}
.anmeld__box{width:min(100%,470px);background:var(--wht);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(1.8rem,4vw,2.8rem);box-shadow:0 30px 60px -40px rgba(28,24,92,.3)}
/* Die Fehlerseite braucht mehr Breite als die Anmeldung, sonst bricht
   die Ueberschrift mitten im Wort und die Linkzeile zerfaellt. */
.anmeld__box--breit{width:min(100%,680px)}
.anmeld__h1{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin:0 0 .6rem}
.anmeld__lead{color:var(--ink-2);font-size:.95rem;line-height:1.55;margin:0 0 1.8rem}
.anmeld__frm .frm__f{margin-bottom:1.1rem}
.anmeld__merken{margin:0 0 1.4rem}
.anmeld__stat{font-size:.86rem;line-height:1.5;margin:.9rem 0 0;min-height:1px}
.anmeld__stat.err{color:var(--sig-d)}
.anmeld__stat.ok{color:var(--teal-d)}
.anmeld__hilfe{margin:1.2rem 0 0;font-size:.88rem}
.anmeld__hilfe a{color:var(--teal-d);font-weight:650;border-bottom:1px solid currentColor}
.anmeld__reset{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.anmeld__reset[hidden]{display:none}
.anmeld__reset h2{font-size:1.15rem;font-weight:750;margin:0 0 .5rem}
.anmeld__reset>p{color:var(--ink-2);font-size:.9rem;line-height:1.55;margin:0 0 1.2rem}
.anmeld__fertig{margin-top:.4rem;text-align:center}
.anmeld__fertig .anmeld__zurueck{margin-top:.9rem}
.anmeld__zurueck{margin:1rem 0 0;font-size:.86rem}
.anmeld__zurueck a{color:var(--ink-2);border-bottom:1px solid var(--line)}
.anmeld__hinweis{margin-top:1.8rem;padding:1rem 1.2rem;background:rgba(255,92,40,.08);
  border-left:3px solid var(--sig);border-radius:0 var(--r) var(--r) 0}
.anmeld__hinweis b{display:block;font-size:.82rem;margin-bottom:.35rem}
.anmeld__hinweis p{font-size:.85rem;line-height:1.55;color:var(--ink-2);margin:0}

/* ══ Urheberblock im Impressum ══
   Aufbau ist bei jedem Kundenprojekt gleich, die Optik folgt der CI der
   jeweiligen Seite. Hier: dunkelstes Indigo der INSTATEC-Palette wie im
   i3-Abschnitt, Radius und Schatten wie die uebrigen Kaesten, Tuerkis als
   Akzent. Das Logo bleibt unveraendert und ist selbst der Link, kein Button. */
/* Bei INSTATEC ausdruecklich zurueckhaltender als die Grundfassung:
   schmaler Kasten statt Banner ueber die volle Spaltenbreite. */
.macher{background:var(--ind-dd);color:#fff;border-radius:var(--r-l);
  padding:2rem 1.9rem;margin:2.6rem 0;text-align:left;
  width:min(100%,470px);box-shadow:0 18px 38px -30px rgba(28,24,92,.45)}
.macher__auftakt{font-style:italic;font-size:1.06rem;color:var(--teal-l);
  margin:0 0 1.4rem;letter-spacing:.01em}
.macher__logo{display:inline-block;max-width:min(100%,400px);border:none;
  border-radius:4px;transition:transform .3s,filter .3s}
.macher__logo img{display:block;width:100%;height:auto}
.macher__logo:hover,.macher__logo:focus-visible{transform:scale(1.035);
  filter:drop-shadow(0 8px 22px rgba(52,180,180,.55))}
.macher__logo:focus-visible{outline:2px solid var(--teal-l);outline-offset:6px}
.macher__was{margin:1.5rem 0 .5rem;font-size:1rem;font-weight:650;color:#fff}
.macher__klein{margin:0;font-size:.83rem;line-height:1.5;color:rgba(255,255,255,.62)}
@media (prefers-reduced-motion:reduce){
  .macher__logo{transition:none}
  .macher__logo:hover,.macher__logo:focus-visible{transform:none}
}

/* ══ Aktuelles: Uebersicht der Beitraege ══
   Der neueste Beitrag laeuft ueber zwei Spalten und liegt quer, die uebrigen
   sind gleich grosse Karten. Fachwissen bekommt Tuerkis, Beitraege aus dem
   Unternehmen Indigo, damit auf einen Blick klar ist, wofuer man hier ist. */
.akt{padding:var(--sec) 0;background:var(--bg)}
.akt .lead{max-width:62ch;margin-bottom:2.5rem}

.akt__filter{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 2.5rem}
.akt__f{font:inherit;font-size:.88rem;font-weight:650;cursor:pointer;
  padding:.62rem 1.15rem;border-radius:100px;border:1px solid var(--line);
  background:var(--wht);color:var(--ink-2);transition:background .3s,color .3s,border-color .3s}
.akt__f span{opacity:.5;margin-left:.35rem;font-variant-numeric:tabular-nums}
.akt__f:hover{border-color:var(--teal);color:var(--ink)}
.akt__f.is-an{background:var(--ind);border-color:var(--ind);color:#fff}
.akt__f.is-an span{opacity:.65}

/* Festes Vierer-Raster. Mit auto-fill sprang die Spaltenzahl je nach
   Fensterbreite, dann stimmte die Rechnung "zwei Reihen zu vier" nicht mehr. */
.akt__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1180px){.akt__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.akt__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.akt__grid{grid-template-columns:1fr}}
.akt__k{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.akt__k:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 26px 52px -30px rgba(27,21,48,.28)}
.akt__link{display:flex;flex-direction:column;height:100%;border:none;color:inherit}
.akt__bild{aspect-ratio:16/10;overflow:hidden;background:var(--bg-2);flex:none}
.akt__bild img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.akt__k:hover .akt__bild img{transform:scale(1.05)}
.akt__txt{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.akt__meta{display:flex;align-items:center;gap:.7rem;margin:0 0 .7rem;
  font-size:.78rem;color:var(--ink-3)}
.akt__rub{font-weight:750;letter-spacing:.04em;text-transform:uppercase;font-size:.68rem}
.akt__rub--fach{color:var(--teal-d)}
.akt__rub--firma{color:var(--ind-l)}
.akt__h{font-size:1.12rem;font-weight:750;letter-spacing:-.015em;line-height:1.3;margin:0 0 .6rem}
.akt__an{font-size:.9rem;color:var(--ink-2);line-height:1.6;margin:0 0 1.2rem}
.akt__mehr{margin-top:auto;font-size:.85rem;font-weight:700;color:var(--teal-d)}
.akt__k:hover .akt__mehr{color:var(--ind)}

/* Der neueste Beitrag: quer statt hochkant, ueber die ganze Breite */
.akt__k--gross{grid-column:1/-1}
.akt__k--gross .akt__link{flex-direction:row}
.akt__k--gross .akt__bild{aspect-ratio:4/3;width:46%;min-height:0}
/* Die Titelbilder sind ueberwiegend Hochformate mit Menschen darauf. Beim
   breiten Ausschnitt der grossen Kachel liegt der Kopf sonst ausserhalb. */
.akt__k--gross .akt__bild img{object-position:center 20%}
.akt__k--gross .akt__txt{padding:2.6rem 2.8rem;justify-content:center}
.akt__k--gross .akt__h{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.025em}
.akt__k--gross .akt__an{font-size:1rem;max-width:54ch;margin-bottom:0}
/* Beim grossen Beitrag steht der Link direkt unter dem Anriss, sonst
   klafft neben dem hohen Bild ein Loch. */
.akt__k--gross .akt__mehr{margin-top:1.4rem}
@media(max-width:820px){
  .akt__k--gross .akt__link{flex-direction:column}
  .akt__k--gross .akt__bild{width:100%;aspect-ratio:16/10;min-height:0}
  .akt__k--gross .akt__txt{padding:1.5rem 1.6rem 1.7rem}
}

.akt__leer{margin:3rem 0;color:var(--ink-3)}

/* Knopf zum Nachladen unter dem Raster */
.akt__mehrbtn{display:block;margin:2.6rem auto 0}
.akt__zaehler{text-align:center;margin:1rem 0 0;font-size:.84rem;color:var(--ink-3)}

/* ══ Einzelner Beitrag ══
   Schmale Textspalte fuer ruhiges Lesen, das Titelbild darf breiter stehen.
   Der Abschluss richtet sich nach der Rubrik und fuehrt in einen der beiden
   Straenge der Website, statt den Leser im Nichts zu lassen. */
.bei{padding:calc(var(--sec)*.7) 0 var(--sec)}
.bei__kopf{max-width:820px}
.bei__zurueck{margin:0 0 1.8rem;font-size:.86rem}
.bei__zurueck a{color:var(--ink-3);border-bottom:1px solid var(--line)}
.bei__zurueck a:hover{color:var(--teal-d)}
.bei__meta{display:flex;align-items:center;gap:.8rem;margin:0 0 .9rem;
  font-size:.8rem;color:var(--ink-3)}
.bei__h1{font-size:clamp(1.85rem,4.2vw,3rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.1;margin:0 0 2.5rem}
.bei__bild{margin-bottom:3rem}
.bei__bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  object-position:center 22%;border-radius:var(--r-l)}

.bei__txt{max-width:68ch;margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem);
  font-size:1.06rem;line-height:1.75;color:var(--ink-2)}
.bei__txt p{margin:0 0 1.4rem}
.bei__txt h2{font-size:1.5rem;font-weight:750;letter-spacing:-.02em;color:var(--ink);
  margin:2.8rem 0 1rem;line-height:1.25}
.bei__txt h3{font-size:1.18rem;font-weight:750;color:var(--ink);margin:2.2rem 0 .8rem}
.bei__txt strong{color:var(--ink);font-weight:700}
.bei__txt ul,.bei__txt ol{margin:0 0 1.4rem;padding-left:1.4rem}
.bei__txt li{margin-bottom:.6rem}
.bei__txt a{color:var(--teal-d);border-bottom:1px solid var(--teal-l)}
.bei__txt a:hover{color:var(--ind)}
.bei__txt img{max-width:100%;height:auto;border-radius:var(--r);margin:1.6rem 0}
.bei__txt blockquote{margin:2rem 0;padding-left:1.4rem;border-left:3px solid var(--teal);
  font-style:italic;color:var(--ink)}

.bei__cta{max-width:68ch;margin:3.5rem auto 0;padding:2rem clamp(1.5rem,4vw,2.4rem);
  background:var(--ind-dd);color:#fff;border-radius:var(--r-l);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;justify-content:space-between}
.bei__cta b{display:block;font-size:1.15rem;font-weight:750;letter-spacing:-.015em;margin-bottom:.5rem}
.bei__cta p{margin:0;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.6;max-width:44ch}
.bei__cta .btn{flex:none}

/* Drei weitere Beitraege derselben Rubrik */
.wtr{padding:0 0 var(--sec);background:var(--bg)}
.wtr__h{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;margin:0 0 1.6rem}
.wtr__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:840px){.wtr__grid{grid-template-columns:1fr}}
.wtr__k{display:block;border:none;background:var(--wht);border-radius:var(--r-l);
  overflow:hidden;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.wtr__k:hover{transform:translateY(-5px);box-shadow:0 22px 44px -28px rgba(27,21,48,.26)}
.wtr__k img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.wtr__d{display:block;padding:1.1rem 1.3rem .35rem;font-size:.76rem;color:var(--ink-3)}
.wtr__t{display:block;padding:0 1.3rem 1.4rem;font-size:.98rem;font-weight:700;
  line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.wtr__alle{margin:2rem 0 0}
.wtr__alle a{font-weight:700;color:var(--teal-d);border-bottom:1px solid var(--teal-l)}


/* ── Kontaktzeile unter Personen (Mail-Icon + Telefon mit Durchwahl) ── */
.kt{display:flex;align-items:center;gap:.7rem;margin-top:.5rem;flex-wrap:wrap}
.kt a{display:inline-flex;align-items:center;gap:.38rem;color:var(--teal-d);
  text-decoration:none;font-size:.78rem;font-weight:600;line-height:1}
.kt a:hover{color:var(--ind)}
.kt a:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
.kt svg{width:15px;height:15px;flex:none}

/* ── Team an den Standorten (Kontakt-Sektion) ── */
.team{margin-top:3.2rem}
.team__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.team__tab{appearance:none;border:1.5px solid var(--line);background:var(--wht);
  color:var(--ink-2);font:inherit;font-size:.85rem;font-weight:650;letter-spacing:-.01em;
  padding:.5rem 1.05rem;border-radius:99px;cursor:pointer;transition:all .18s}
.team__tab:hover{border-color:var(--teal);color:var(--ind)}
.team__tab[aria-selected="true"]{background:var(--ind);border-color:var(--ind);color:#fff}
.team__tab:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.team__panel{display:none}
.team__panel.offen{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.1rem}
/* Ab Tabletbreite exakt die Vierer-Teilung der Ansprechpartner-Reihe darueber */
@media(min-width:900px){.team__panel.offen{grid-template-columns:repeat(4,1fr)}}
.team__c{background:var(--wht);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;margin:0;transition:transform .25s,box-shadow .25s}
.team__c:hover{transform:translateY(-5px);box-shadow:0 22px 42px -26px rgba(27,21,48,.3)}
.team__c img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#A5CBDE}
.team__c figcaption{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.12rem}
.team__c b{font-size:.94rem;font-weight:750;letter-spacing:-.02em;line-height:1.2}
.team__c span{font-size:.74rem;color:var(--ink-3);line-height:1.35}
/* Bewerben-Karte am Ende jedes Standorts */
.team__cta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:.6rem;background:var(--ind);color:#fff;padding:1.4rem 1.2rem;text-decoration:none;
  border:1px solid var(--ind);border-radius:var(--r-l);transition:transform .25s,box-shadow .25s}
.team__cta:hover{transform:translateY(-5px);box-shadow:0 22px 42px -26px rgba(27,21,48,.45)}
.team__cta b{font-size:1.02rem;font-weight:750;letter-spacing:-.02em;line-height:1.25;color:#fff}
.team__cta span{font-size:.78rem;color:var(--teal-l);font-weight:600}