/* =============================================================
   TEKIN Karosserie & Lack
   -------------------------------------------------------------
   Aufbau dieser Datei
   01  Tokens & Reset
   02  Typografie-Bausteine
   03  Bühne: Hintergrundvideo, Schleier, Vignette, Korn
   04  Header / Navigation / Menü-Overlay
   05  Hero
   06  Zwischenräume (Video atmet)
   07  Leistungen
   08  Galerie + Vorher/Nachher
   09  Über uns
   10  Meisterbetrieb
   11  Kontakt
   12  Footer
   13  WhatsApp + Abschnittsleiste (mobil)
   14  Reveal-/Scroll-Animationen
   15  Rechtsseiten & 404
   16  prefers-reduced-motion
   ============================================================= */

/* ---------- 01  Tokens & Reset ------------------------------- */
:root{
  --ink:      #04070a;
  --coal:     #0a0e13;
  --anthra:   #141a21;
  --steel:    #2a333d;
  --silver:   #9aa7b3;
  --fog:      #dfe7ee;
  --white:    #ffffff;
  /* Direkt aus der Logodatei ausgelesen, nicht geschaetzt. */
  --cyan:     #3cbcde;
  --cyan-hi:  #74d9f5;

  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.055);

  --ff-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut:  clamp(20px, 5.5vw, 96px);
  --maxw: 1560px;

  --mnav-h: 64px;

  /* Von JS gesteuert: Abdunklung der Bühne je Szene */
  --veil: .30;
  --bg-scale: 1;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--fog);
  font-family:var(--ff-body);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{ overflow:hidden; }

img,video,svg{ display:block; max-width:100%; }
/* Browser geben <figure> standardmaessig 40 px Seitenabstand -
   das hat das Teamfoto schmaler gemacht als die Textspalte. */
figure{ margin:0; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cyan); color:#00232e; padding:12px 20px; font-weight:700;
}
.skip:focus{ left:16px; top:16px; }

.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Inhaltsebene liegt über der Bühne */
.page{ position:relative; z-index:1; }

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

/* ---------- 02  Typografie-Bausteine ------------------------- */
h1,h2,h3,h4{
  overflow-wrap:break-word;
  text-shadow:0 2px 30px rgba(4,7,10,.55);
  font-family:var(--ff-display);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

.kicker{
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--silver);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(18px,2.6vw,34px);
}
.kicker::before{
  content:'';
  width:clamp(28px,4vw,56px); height:1px;
  background:linear-gradient(90deg,var(--cyan),rgba(60,188,222,0));
  flex:none;
}

.idx{
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--cyan);
  letter-spacing:.18em;
}

.lead{
  font-size:clamp(16px,1.15vw + 12px,21px);
  line-height:1.6;
  color:var(--fog);
  max-width:54ch;
  margin:0;
  /* Der Text steht stellenweise direkt auf hellen Bildpartien der
     Buehne. Der weiche Schatten haelt ihn dort lesbar, ohne das
     Bild flaechig abzudunkeln. */
  text-shadow:0 1px 20px rgba(4,7,10,.9), 0 1px 3px rgba(4,7,10,.55);
}

.muted{ color:var(--silver); }

.hair{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--line) 12%,var(--line) 88%,rgba(255,255,255,0));
}

/* Buttons ----------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  min-height:52px;
  padding:15px 28px;
  font-family:var(--ff-body);
  font-size:13px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--white);
  background:rgba(10,14,19,.55);
  border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.btn::after{            /* Cyan-Linie fährt ein */
  content:'';
  position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{ transform:scaleX(1); }
.btn:hover{ border-color:rgba(60,188,222,.45); background:rgba(60,188,222,.07); }
.btn .arw{ transition:transform .45s var(--ease-out); }
.btn:hover .arw{ transform:translateX(5px); }

.btn--primary{
  background:var(--cyan);
  color:#00212c;
  border-color:var(--cyan);
  font-weight:700;
}
.btn--primary:hover{ background:var(--cyan-hi); border-color:var(--cyan-hi); color:#00212c; }
.btn--primary::after{ background:#00212c; }

.btn--lg{ min-height:64px; padding:20px 34px; font-size:14px; }

.btn--ghost{ background:transparent; }

/* Platzhalter für noch fehlende Fotos/Videos ------------------- */
.ph{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(60,188,222,.16), rgba(60,188,222,0) 58%),
    linear-gradient(152deg,#18222c 0%,#0c1117 46%,#141c25 100%);
  isolation:isolate;
}
.ph::before{           /* Lichtstreifen */
  content:'';
  position:absolute; inset:-40%;
  background:linear-gradient(104deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.075) 50%,rgba(255,255,255,0) 58%);
  transform:translateX(-30%);
  animation:sweep 9s var(--ease) infinite;
}
.ph::after{            /* technisches Raster */
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(130% 100% at 30% 0%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(130% 100% at 30% 0%,#000 10%,transparent 78%);
}
@keyframes sweep{
  0%,100%{ transform:translateX(-35%); }
  50%    { transform:translateX(35%); }
}
.ph__tag{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:9px;
}
.ph__tag::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px rgba(60,188,222,.9);
}

/* ---------- 03  Bühne ---------------------------------------- */
.stage{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background:var(--ink);
  pointer-events:none;
}

/* Lichtbühne in CSS – trägt die Seite, solange kein Video da ist */
.stage__floor{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 50% at 50% -8%,  rgba(60,188,222,.20), rgba(60,188,222,0) 62%),
    radial-gradient(48% 40% at 82% 26%,  rgba(120,190,220,.12), rgba(0,0,0,0) 60%),
    radial-gradient(60% 55% at 12% 88%,  rgba(40,90,120,.22),  rgba(0,0,0,0) 65%),
    linear-gradient(168deg,#0b1219 0%,#05080c 52%,#0a1017 100%);
}
.stage__beam{
  position:absolute; inset:-25%;
  background:
    conic-gradient(from 210deg at 50% 45%,
      rgba(60,188,222,0) 0deg,
      rgba(60,188,222,.14) 46deg,
      rgba(255,255,255,.05) 82deg,
      rgba(60,188,222,0) 140deg,
      rgba(60,188,222,0) 360deg);
  filter:blur(46px);
  animation:beam 34s linear infinite;
  opacity:.85;
}
@keyframes beam{ to{ transform:rotate(360deg); } }

.stage__still,
.stage__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(var(--bg-scale));
  transform-origin:50% 45%;
  transition:opacity 1.2s var(--ease);
  will-change:transform,opacity;
  filter:saturate(.92) contrast(1.06);
}
.stage__still{ opacity:1; object-position:62% 50%; }
/* Das Quellvideo ist quadratisch (928x928). Der Ausschnitt sitzt
   bewusst etwas hoeher, sonst schneidet er den Kopf an. */
.stage__media{
  object-position:50% 38%;
  /* Deckkraft steuert JS je Ebene - daher hier nur der Uebergang. */
  transition:opacity 1.2s var(--ease);
}
.stage.has-video .stage__still{ opacity:0; }

.stage.has-video .stage__beam{ opacity:.35; }

/* Schleier: wird pro Szene von JS gesteuert */
.stage__veil{
  position:absolute; inset:0;
  background:var(--ink);
  opacity:var(--veil);
  transition:opacity 1s var(--ease);
}
.stage__grade{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,rgba(4,7,10,.72) 0%,rgba(4,7,10,.14) 46%,rgba(4,7,10,.55) 100%),
    linear-gradient(180deg,rgba(4,7,10,.62) 0%,rgba(4,7,10,0) 26%,rgba(4,7,10,0) 64%,rgba(4,7,10,.78) 100%);
}
.stage__vig{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 42%,rgba(0,0,0,.62) 100%);
}
.stage__grain{
  position:absolute; inset:0;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- 04  Header --------------------------------------- */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:60;
  padding-block:clamp(16px,2.2vw,26px);
  transition:padding .45s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease);
}
.hdr::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:linear-gradient(90deg,rgba(60,188,222,0),rgba(60,188,222,.5),rgba(60,188,222,0));
  opacity:0; transition:opacity .45s var(--ease);
}
.hdr.is-stuck{
  padding-block:11px;
  background:rgba(6,9,13,.64);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.hdr.is-stuck::after{ opacity:1; }

.hdr__in{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.mark{
  /* Negative Aussenabstaende halten das Layout gleich und
     vergroessern nur die Klickflaeche auf ueber 44 px. */
  padding-block:8px; margin-block:-8px;
  display:inline-flex; align-items:center;
  flex:none;
}
.mark img{
  /* Das Logo traegt drei Textzeilen. Unter ~52 px Hoehe wird die
     Unterzeile zur Schliere, deshalb bewusst groesser als eine
     reine Wortmarke. */
  display:block; width:auto; height:54px;
  filter:drop-shadow(0 2px 10px rgba(4,7,10,.8));
  transition:height .45s var(--ease);
}
.hdr.is-stuck .mark img{ height:44px; }
.mark--ft img{ height:60px; }

.nav{ display:none; }
.nav ul{ display:flex; gap:clamp(14px,2.2vw,38px); list-style:none; margin:0; padding:0; }
.nav a{
  position:relative;
  display:block; padding:8px 2px;
  white-space:nowrap;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(223,231,238,.72);
  transition:color .35s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav a:hover{ color:var(--white); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a.is-active{ color:var(--white); }
.nav a.is-active::after{ transform:scaleX(1); }

.hdr__act{ display:flex; align-items:center; gap:10px; }

.icn-btn{
  width:46px; height:46px;
  display:none; place-items:center;
  border:1px solid var(--line);
  color:var(--fog);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.icn-btn:hover{ border-color:rgba(60,188,222,.5); color:var(--cyan); }

.wa-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:46px; padding:12px 18px;
  border:1px solid rgba(60,188,222,.42);
  background:rgba(8,13,18,.6);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--white);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.wa-btn svg{ fill:var(--cyan); flex:none; transition:fill .4s var(--ease); }
.wa-btn:hover{
  background:rgba(60,188,222,.14);
  border-color:var(--cyan);
  box-shadow:0 0 0 1px rgba(60,188,222,.25),0 12px 40px rgba(60,188,222,.14);
}
.wa-btn__txt{ display:none; }

/* Mobil verschwindet der WhatsApp-Knopf im Kopf, sobald der Hero
   durch ist - ab dann sitzt er ohnehin dauerhaft in der
   Abschnittsleiste unten rechts. Die Breite laeuft mit zusammen,
   damit nichts springt. */
@media (max-width:767.98px){
  .hdr .wa-btn{
    max-width:140px;
    transition:opacity .35s var(--ease), transform .35s var(--ease),
               max-width .35s var(--ease), padding .35s var(--ease),
               margin .35s var(--ease), border-color .35s var(--ease);
    overflow:hidden;
  }
  .hdr.ist-nach-hero .wa-btn{
    opacity:0; transform:scale(.85);
    max-width:0; padding-inline:0; margin-right:-10px;
    border-color:transparent;
    pointer-events:none;
  }
}

/* Burger ------------------------------------------------------ */
.burger{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid var(--line);
}
.burger span{
  display:block; width:18px; height:1px; background:var(--fog);
  transition:transform .45s var(--ease-out), opacity .3s var(--ease);
}
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* Menü-Overlay ------------------------------------------------ */
.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(96px + env(safe-area-inset-top,0px)) var(--gut) calc(40px + env(safe-area-inset-bottom,0px));
  background:rgba(4,7,10,.9);
  backdrop-filter:blur(26px) saturate(130%);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.menu.is-open{ opacity:1; visibility:visible; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu li{
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.menu.is-open li{ opacity:1; transform:none; }
.menu.is-open li:nth-child(1){ transition-delay:.08s; }
.menu.is-open li:nth-child(2){ transition-delay:.14s; }
.menu.is-open li:nth-child(3){ transition-delay:.20s; }
.menu.is-open li:nth-child(4){ transition-delay:.26s; }
.menu.is-open li:nth-child(5){ transition-delay:.32s; }
.menu a{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(30px,9vw,54px); line-height:1;
  letter-spacing:-.02em; text-transform:uppercase;
  color:var(--white);
}
.menu a .idx{ font-family:var(--ff-body); font-size:11px; }
.menu__foot{
  margin-top:auto; padding-top:24px;
  display:flex; flex-wrap:wrap; gap:4px 26px; align-items:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);
}
.menu__foot a{ display:inline-flex; align-items:center; min-height:48px; }

/* ---------- 05  Hero ----------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:center;
  padding-block:clamp(120px,18vh,190px) clamp(96px,14vh,150px);
}
.hero__in{ width:100%; }

.logo{
  display:block;
  opacity:0;
  filter:blur(14px);
  transform:scale(.965);
  animation:logoIn 1.5s var(--ease-out) .25s forwards;
}
@keyframes logoIn{
  to{ opacity:1; filter:blur(0); transform:none; }
}
.logo__h{ margin:0; line-height:0; }
.logo__img{
  display:block;
  width:100%;
  max-width:min(78vw,400px);
  height:auto;
  /* Mobil zentriert, ab Tablet linksbuendig (siehe Breakpoint). */
  margin-inline:auto;
  /* Das Logo ist freigestellt und steht direkt auf dem Video.
     Der dunkle Schlagschatten haelt die weissen Konturen auch ueber
     hellen Bildstellen lesbar, der Cyan-Saum gibt Tiefe. */
  filter:drop-shadow(0 6px 22px rgba(4,7,10,.85))
         drop-shadow(0 0 54px rgba(60,188,222,.22));
}

.hero__cue{
  position:absolute; left:var(--gut);
  bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px) + 30px);
  display:flex; align-items:center; gap:14px;
  font-size:10px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--silver);
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.5s forwards;
}
.hero__cue i{
  position:relative; display:block; width:1px; height:44px;
  background:var(--line); overflow:hidden;
}
.hero__cue i::after{
  content:''; position:absolute; inset-inline:0; top:0; height:14px;
  background:var(--cyan);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-16px); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(46px); opacity:0; }
}
@keyframes fadeIn{ to{ opacity:1; } }

.hero__meta{
  position:absolute; right:var(--gut);
  bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px) + 30px);
  display:none;
  text-align:right;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--silver);
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.7s forwards;
}
.hero__meta b{ display:block; color:var(--white); font-weight:600; margin-bottom:4px; }

/* ---------- 06  Zwischenräume -------------------------------- */
/* Die Zwischenraeume tragen den Filmcharakter, duerfen die Seite aber
   nicht in die Laenge ziehen. Bewusst knapper als beim ersten Entwurf. */
.gap{ height:clamp(40px,6vh,110px); }
.gap--sm{ height:clamp(48px,7vh,88px); }
.gap--lg{ height:clamp(64px,10vh,150px); }

.gap--line{
  display:grid; place-items:center;
  position:relative;
}
.gap--line span{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(154,167,179,.6);
  padding:0 var(--gut); text-align:center;
}

/* ---------- 07  Leistungen ----------------------------------
   Links eine feststehende Bildbuehne, rechts der scrollende Text.
   Mobil liegt die Buehne oben und bleibt beim Scrollen stehen -
   deshalb ist .svc__grid dort ein Block: ein sticky-Element kann
   nur innerhalb seines Elternelements wandern, und im Blockfluss
   gehoert die nachfolgende Textspalte mit dazu.
   ------------------------------------------------------------ */
.svc{ position:relative; }

.kicker--h{ font-family:var(--ff-body); }

.svc__grid{ display:block; }

.svc__stage{
  position:sticky;
  top:calc(64px + env(safe-area-inset-top,0px));
  z-index:2;
  margin-bottom:clamp(20px,3vw,32px);
}

.svc__pics{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--coal);
  box-shadow:0 26px 70px rgba(0,0,0,.55);
}
.svc__pics > figure{
  position:absolute; inset:0; margin:0;
  opacity:0;
  transition:opacity .75s var(--ease);
}
.svc__pics > figure.is-on{ opacity:1; }
.svc__pics img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.02);
}
.svc__pics::after{      /* haelt die Beschriftung lesbar */
  content:'';
  position:absolute; inset:auto 0 0 0; height:52%;
  background:linear-gradient(180deg,rgba(4,7,10,0),rgba(4,7,10,.88));
  pointer-events:none;
}

/* Der Balken ist die Unterkante der Buehne, kein eigenes Element */
.svc__bar{
  position:absolute; inset-inline:0; bottom:0; height:3px;
  background:rgba(255,255,255,.14);
  z-index:3;
}
.svc__bar i{
  display:block; height:100%;
  background:var(--cyan);
  box-shadow:0 0 16px rgba(60,188,222,.8);
  transform:scaleX(var(--p,.2)); transform-origin:left;
  transition:transform .6s var(--ease-out);
}

.svc__meter{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:clamp(14px,2.4vw,22px) clamp(16px,2.6vw,26px) clamp(16px,2.6vw,24px);
}
.svc__now{
  display:flex; align-items:baseline; gap:clamp(8px,1.2vw,14px);
  /* Darf schrumpfen: "Unfallinstandsetzung" hat sonst den Zaehler
     rechts aus der Buehne gedrueckt. */
  flex:1 1 auto; min-width:0;
  margin:0;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(14px,1.7vw,21px);
  line-height:1; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--white);
}
.svc__now > span:last-of-type{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc__num{
  flex:none;
  font-family:var(--ff-body); font-weight:700;
  font-size:clamp(22px,3.2vw,36px); line-height:.9;
  letter-spacing:-.02em;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.svc__of{
  flex:none;
  margin:0;
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--silver);
  white-space:nowrap;
}
/* Auf schmalen Buehnen traegt der Balken die Information allein. */
@media (max-width:899.98px){ .svc__of{ display:none; } }

.svc__list{ display:block; }

.svc-item{
  display:flex; flex-direction:column; justify-content:center;
  min-height:44svh;
  padding-block:clamp(18px,3vh,32px);
}
/* Die letzte Leistung braucht keinen Nachlauf - sonst stehen unter
   ihrem Text noch rund 100 px Leerraum vor der Galerie. */
.svc-item:last-child{ min-height:0; padding-bottom:0; }
.svc-item__no{
  font-size:11px; font-weight:600; letter-spacing:.26em;
  color:var(--cyan);
  display:block; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.svc-item__h{
  /* Bewusst OHNE hyphens:auto - die automatische Trennung ueberstimmt
     die im Markup gesetzten Stellen (&shy;) und machte aus
     "UNFALL-INSTANDSETZUNG" ein "UNFALLIN-STANDSETZUNG".
     Geprueft mit worte.js. */
  font-size:clamp(28px,5.4vw,46px);
  line-height:.96;
  text-transform:uppercase;
  color:var(--white);
}
.svc-item__p{
  margin:clamp(12px,1.8vw,18px) 0 0;
  color:var(--silver);
  font-size:clamp(15px,.6vw + 13px,18px);
  line-height:1.55;
  max-width:46ch;
  text-shadow:0 1px 18px rgba(4,7,10,.85);
}
.svc-item__p b{ color:var(--fog); font-weight:500; }
.svc-item__line{
  height:1px; margin-top:clamp(16px,2.2vw,24px);
  background:linear-gradient(90deg,var(--cyan),rgba(60,188,222,0));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease-out);
}
.svc-item.is-in .svc-item__line{ transform:scaleX(1); }
.svc-item.is-now .svc-item__h{ color:var(--white); }
.svc-item:not(.is-now){ opacity:.55; transition:opacity .6s var(--ease); }
.svc-item.is-now{ opacity:1; }

/* ---------- 08  Galerie -------------------------------------
   Horizontale Spur als Anreisser. Mobil wischt man sie durch,
   ab 1024 px wird die Sektion gepinnt und das vertikale Scrollen
   schiebt die Spur zur Seite. Bewusst nur vier Kacheln - die
   Sektion soll kurz bleiben, alles Weitere auf galerie.html.
   ------------------------------------------------------------ */
.gal{ position:relative; }
.gal__pin{ position:relative; }
.gal__scroll{ position:relative; }

.gal__kopf{
  padding-inline:var(--gut);
  max-width:var(--maxw);
  margin-inline:auto;
  margin-bottom:clamp(20px,3vw,34px);
}
.gal__h{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(40px,11vw,96px);
  line-height:.88; letter-spacing:-.025em; text-transform:uppercase;
  margin:0 0 clamp(14px,2vw,20px);
  text-shadow:0 2px 30px rgba(4,7,10,.55);
}
.gal__h b{ color:var(--cyan); font-weight:900; }

.textlink{
  display:inline-flex; align-items:center; gap:10px;
  min-height:44px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--white);
  border-bottom:1px solid rgba(60,188,222,.5);
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.textlink:hover{ color:var(--cyan); border-color:var(--cyan); }
.textlink .arw{ transition:transform .4s var(--ease-out); }
.textlink:hover .arw{ transform:translateX(5px); }

.spur{
  display:flex; align-items:center;
  gap:clamp(12px,3vw,26px);
  margin:0; padding:0 var(--gut) 8px;
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gut);
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.spur::-webkit-scrollbar{ display:none; }
.spur__el{ flex:none; scroll-snap-align:start; }

.spur__fig{
  position:relative; margin:0; overflow:hidden;
  background:var(--coal);
}
.spur__fig img{ width:100%; height:100%; object-fit:cover; display:block; }
.spur__fig::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,7,10,0) 58%,rgba(4,7,10,.78));
  pointer-events:none;
}
.spur__fig figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.spur__el--breit .spur__fig{ width:84vw; aspect-ratio:16/9; }
.spur__el--hoch  .spur__fig{ width:64vw; aspect-ratio:4/5; }
.spur__el--hoch  .spur__fig{ width:64vw; aspect-ratio:4/5; }
.spur__el--mehr{ display:flex; }

.mehr{
  display:flex; flex-direction:column; justify-content:space-between;
  width:64vw; min-height:48vw;
  padding:clamp(18px,4vw,28px);
  border:1px solid rgba(60,188,222,.4);
  background:rgba(8,13,18,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.mehr:hover{ background:rgba(60,188,222,.12); border-color:var(--cyan); }
.mehr__no{
  font-size:11px; font-weight:600; letter-spacing:.26em; color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.mehr__h{
  display:block;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(26px,6vw,40px); line-height:.94; text-transform:uppercase;
  color:var(--white);
  margin:clamp(14px,3vw,20px) 0 clamp(8px,1.6vw,12px);
}
.mehr__txt{
  display:block; font-size:14px; line-height:1.5; color:var(--silver);
  margin-bottom:clamp(14px,3vw,20px);
}
.mehr__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}
.mehr .arw{ transition:transform .4s var(--ease-out); }
.mehr:hover .arw{ transform:translateX(5px); }

.gal__ba{ margin-top:clamp(14px,2vw,26px); }
.gg__ba{ margin-top:clamp(20px,3vw,34px); }

/* Vorher / Nachher --------------------------------------------
   Drei Faelle in einem Block, durchschaltbar. Bewusst nicht mehr
   ueber die volle Breite: Regler links, Beschriftung und Steuerung
   rechts daneben. Das macht ihn kompakter und bindet ihn in die
   Seite ein, statt ihn als Klotz darunter zu setzen.
   ------------------------------------------------------------ */
.ba-block{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2.4vw,22px);
  align-items:center;
}

.ba{
  position:relative;
  user-select:none;
  touch-action:pan-y;
  overflow:hidden;
  aspect-ratio:5/4;
  cursor:ew-resize;
  background:var(--coal);
}
.ba__paar{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.ba__paar.is-on{ opacity:1; visibility:visible; }
.ba__layer{ position:absolute; inset:0; }
.ba__layer img{ width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--ba,50%)); }

.ba__tag{
  position:absolute; top:12px; z-index:3;
  font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  padding:6px 11px;
  background:rgba(4,7,10,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  color:var(--fog);
}
.ba__tag--l{ left:12px; }
.ba__tag--r{ right:12px; border-color:rgba(60,188,222,.45); color:var(--cyan); }

.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--ba,50%); z-index:4;
  width:48px; margin-left:-24px;
  display:grid; place-items:center;
  cursor:ew-resize;
  touch-action:none;
  background:none; border:0;
}
.ba__handle::before{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; margin-left:-.5px;
  background:var(--cyan);
  box-shadow:0 0 18px rgba(60,188,222,.75);
}
.ba__knob{
  position:relative;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--cyan);
  background:rgba(4,7,10,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--cyan);
  transition:transform .35s var(--ease-out), background-color .35s var(--ease);
}
.ba__handle:hover .ba__knob,
.ba__handle:focus-visible .ba__knob{ transform:scale(1.08); background:rgba(60,188,222,.16); }

.ba__hint{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.ba.is-used .ba__hint{ opacity:0; }

/* Steuerung ---------------------------------------------------- */
.ba__steuer{ display:grid; gap:6px; }
.ba__zaehler{
  display:flex; align-items:baseline; gap:8px;
  margin:0;
  font-variant-numeric:tabular-nums;
}
.ba__zaehler b{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(24px,4vw,38px); line-height:.9;
  color:var(--cyan);
}
.ba__zaehler span{
  font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--silver);
}
.ba__titel{
  margin:0;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(18px,2.4vw,26px); line-height:1.05;
  text-transform:uppercase; letter-spacing:-.01em;
  color:var(--white);
}
.ba__det{
  margin:0;
  font-size:14px; line-height:1.5; color:var(--silver);
  text-shadow:0 1px 18px rgba(4,7,10,.85);
}
.ba__wie{
  margin:2px 0 0;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(154,167,179,.7);
}

.ba__nav{
  display:flex; align-items:center; gap:10px;
  margin-top:clamp(8px,1.6vw,14px);
}
.ba__pfeil{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  color:var(--fog);
  transition:border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.ba__pfeil:hover{ border-color:rgba(60,188,222,.55); color:var(--cyan); background:rgba(60,188,222,.08); }
.ba__punkte{ display:flex; align-items:center; gap:8px; }
.ba__punkt{
  /* Sichtbar ist der kleine Strich, die Klickflaeche ist 44 px hoch. */
  position:relative;
  width:26px; height:44px;
  padding:0; border:0; background:none;
  cursor:pointer;
}
.ba__punkt::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:rgba(255,255,255,.22);
  transition:background-color .35s var(--ease);
}
.ba__punkt.is-on::after{ background:var(--cyan); box-shadow:0 0 12px rgba(60,188,222,.7); }
.ba__punkt:hover::after{ background:rgba(60,188,222,.6); }

/* ---------- 09  Über uns ------------------------------------- */
.abt{ position:relative; }
.abt__h{
  /* .86 war so eng, dass die Umlautpunkte von "PRÄZISION" an die
     Zeile darueber stiessen. Die 0.06em kommen aus dem Abstand
     darunter zurueck, der Block wird dadurch nicht hoeher. */
  line-height:.92;
  font-size:clamp(34px,10vw,126px);
  line-height:.86; text-transform:uppercase;
}
.abt__h span{ display:block; }
.abt__h span:nth-child(2){ color:var(--cyan); }
.abt__h span:nth-child(3){
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.4);
}
.abt__txt{ margin-top:clamp(6px,1vw,12px); display:grid; gap:clamp(10px,1.4vw,15px); }
.abt__txt p{ margin:0; }
.abt__facts{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  margin-top:clamp(14px,2vw,22px);
  list-style:none; padding:0;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fog);
}
.abt__facts li{ display:flex; align-items:center; gap:10px; }
.abt__facts li::before{
  content:''; width:5px; height:5px; background:var(--cyan); flex:none;
  transform:rotate(45deg);
}
.abt__fig{
  position:relative;
  margin-top:clamp(18px,3vw,0px);
  aspect-ratio:16/10;
  overflow:hidden;
}
.abt__fig.ph{ border:1px solid var(--line); }
.abt__fig .ph,
.abt__fig img{ width:100%; height:100%; object-fit:cover; }
.abt__fig img{ object-position:50% 38%; }

/* ---------- 10  Meisterbetrieb ------------------------------
   Frueher ein eigenes Band ueber die volle Hoehe. Jetzt ein
   schmaler Streifen am Fuss von "Ueber uns" - das Wort bleibt
   gross, kostet aber keine zusaetzliche Bildschirmhoehe mehr.
   ------------------------------------------------------------ */
.mst{
  /* Mobil mittig gesetzt: links ausgerichtet wirkte der Streifen
     angeschnitten, weil die Punkte in zwei Zeilen umbrechen. */
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(10px,2vw,28px);
  margin-top:clamp(22px,3.4vw,38px);
  padding-top:clamp(16px,2.4vw,24px);
  border-top:1px solid var(--line);
}
.mst__word{
  margin:0;
  font-size:clamp(28px,7vw,62px);
  line-height:.9;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--white);
}
.mst__pts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px clamp(14px,2.4vw,30px);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--silver);
}
.mst__pts li{ position:relative; }
/* Beim Umbruch landete der Trennpunkt am Zeilenanfang. Mobil
   trennen die Abstaende, ab Tablet steht alles in einer Zeile. */
.mst__pts li+li::before{ display:none; }
@media (min-width:768px){ .mst__pts li+li::before{ display:block; } }
.mst__pts li+li::before{
  content:''; position:absolute; left:calc(-1 * clamp(7px,1.2vw,15px)); top:50%;
  width:3px; height:3px; border-radius:50%; background:var(--cyan); transform:translateY(-50%);
}

/* ---------- 11  Kontakt -------------------------------------
   Alles auf einen Blick: Aufforderung, beide Kontaktwege und die
   harten Fakten stehen beieinander statt untereinander.
   ------------------------------------------------------------ */
.cta{ position:relative; }
.cta__top{ display:block; }
.cta__h{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(32px,8vw,72px);
  line-height:.92; letter-spacing:-.025em; text-transform:uppercase;
  margin:0 0 clamp(12px,1.8vw,18px);
  text-shadow:0 2px 30px rgba(4,7,10,.55);
}
.cta__h b{ color:var(--cyan); font-weight:900; }

.cta__note{
  margin:0 0 clamp(18px,2.6vw,26px);
  font-size:15px; color:var(--silver); max-width:40ch;
  text-shadow:0 1px 18px rgba(4,7,10,.85);
}
.cta__btns{ display:flex; flex-wrap:wrap; gap:10px; }
.cta__btns .btn{ flex:1 1 auto; justify-content:center; }

.info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,28px) clamp(16px,3vw,32px);
  margin-top:clamp(24px,4vw,40px);
  border-top:1px solid var(--line);
  padding-top:clamp(20px,2.8vw,30px);
}
.info__b{ display:grid; gap:6px; align-content:start; }
/* Adresse und Inhaber nebeneinander, Oeffnungszeiten darunter ueber
   die volle Breite - in einer halben Spalte brach "Uhr" um. */
.info__b:nth-child(1){ grid-column:1; grid-row:1; }
.info__b:nth-child(3){ grid-column:2; grid-row:1; }
.info__b:nth-child(2){ grid-column:1/-1; grid-row:2; }
.info__l{
  margin:0;
  font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cyan);
}
.info__v{
  margin:0;
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(17px,2vw,22px); line-height:1.2;
  letter-spacing:-.01em; color:var(--white);
}
.info__sub{ margin:0; font-size:12px; color:var(--silver); }
.info__link{
  /* Als Textlink war nicht zu erkennen, dass man darauf tippen kann.
     Jetzt eine eigene Flaeche mit Rahmen, ueber die volle Spalte. */
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:46px; margin-top:6px;
  padding:11px 12px;
  border:1px solid rgba(60,188,222,.5);
  background:rgba(60,188,222,.10);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan);
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.info__link:hover{ background:rgba(60,188,222,.2); border-color:var(--cyan); }
.info__link .arw{ transition:transform .4s var(--ease-out); }
.info__link:hover .arw{ transform:translateX(4px); }
.info__hours{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.info__hours li{
  /* Feste Beschriftungsspalte: so stehen alle Uhrzeiten untereinander
     auf derselben Kante statt frei verteilt. */
  display:grid; grid-template-columns:7.5em 1fr; gap:10px;
  font-size:14px; color:var(--silver);
  padding-bottom:5px;
  border-bottom:1px solid var(--line-soft);
}
.info__hours li span{ white-space:nowrap; }
.info__hours b{ color:var(--fog); font-weight:500; }
.todo{ color:#ffb34d; font-weight:600; }

/* Stilisierte Karte ------------------------------------------- */
.map{
  position:relative;
  margin-top:clamp(20px,3vw,32px);
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#0c131a,#070b0f);
}
.map__grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(154,167,179,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(154,167,179,.11) 1px,transparent 1px);
  background-size:64px 64px;
  transform:rotate(-14deg);
}
.map__road{
  position:absolute; height:2px; background:rgba(154,167,179,.2);
  transform-origin:left center;
}
.map__road--1{ top:38%; left:-10%; width:130%; transform:rotate(-14deg); }
.map__road--2{ top:66%; left:-10%; width:130%; transform:rotate(-14deg); height:1px; }
.map__road--3{
  top:-10%; left:34%; width:130%; height:1px;
  transform:rotate(76deg);
}
.map__pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
}
.map__pin i{
  position:absolute;
  width:16px; height:16px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 24px rgba(60,188,222,.9);
}
.map__pin::before,.map__pin::after{
  content:''; position:absolute;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(60,188,222,.6);
  animation:ping 3.2s var(--ease) infinite;
}
.map__pin::after{ animation-delay:1.6s; }
@keyframes ping{
  0%{ transform:scale(1); opacity:.9; }
  100%{ transform:scale(6.5); opacity:0; }
}
.map__lbl{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--silver);
}
.map__fade{
  position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 50%,rgba(4,7,10,0) 30%,rgba(4,7,10,.85) 100%);
}

/* ---------- 12  Footer --------------------------------------- */
.ft{
  position:relative;
  margin-top:clamp(56px,9vh,110px);
  padding-block:clamp(34px,5vw,54px);
  background:linear-gradient(180deg,rgba(4,7,10,.55),rgba(4,7,10,.92));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft);
}
.ft__in{
  display:flex; flex-direction:column; gap:22px;
}
.ft__nav{
  display:flex; flex-wrap:wrap; gap:12px 26px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.ft__nav a{ color:var(--fog); padding:13px 0; transition:color .35s var(--ease); }
.ft__nav a:hover{ color:var(--cyan); }
.ft__cr{ font-size:12px; color:var(--silver); line-height:1.8; }
.ft__cr a{ color:var(--fog); border-bottom:1px solid rgba(60,188,222,.45); }
.ft__cr a:hover{ color:var(--cyan); }

/* ---------- 13  WhatsApp + Abschnittsleiste ------------------ */
/* Abschnittsleiste am unteren Rand (mobil) */
.mnav{
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  display:flex; align-items:stretch; gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(6,9,13,.82);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid rgba(60,188,222,.22);
}
.mnav__scroll{
  display:flex; align-items:center; gap:7px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mnav__scroll::-webkit-scrollbar{ display:none; }
.mnav__p{
  flex:none;
  display:flex; align-items:center; gap:7px;
  min-height:48px; padding:0 14px;
  scroll-snap-align:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:rgba(223,231,238,.74);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
  transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}
.mnav__p i{
  font-style:normal; font-size:9px; letter-spacing:.1em;
  color:var(--silver); font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease);
}
.mnav__p.is-active{
  color:var(--white);
  border-color:rgba(60,188,222,.6);
  background:rgba(60,188,222,.12);
}
.mnav__p.is-active i{ color:var(--cyan); }

.mnav__wa{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:48px; min-height:48px; padding:0 14px;
  background:var(--cyan); color:#00212c;
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.mnav__wa svg{ fill:#00212c; }
.mnav__wa span{ display:none; }

/* Abstand für Leiste – am Wrapper, damit der FOOTER frei bleibt */
@media (max-width:767.98px){
  .page{ padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px) + 14px); }
}

/* ---------- 14  Reveal / Scroll ------------------------------ */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out);
  will-change:transform,opacity;
}
[data-reveal="blur"]{ filter:blur(12px); transform:translate3d(0,14px,0); }
[data-reveal="mask"]{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s var(--ease-out);
}
[data-reveal].is-in{
  opacity:1; transform:none; filter:none;
  clip-path:inset(0 0 0 0);
}
[data-reveal-d="1"]{ transition-delay:.1s; }
[data-reveal-d="2"]{ transition-delay:.2s; }
[data-reveal-d="3"]{ transition-delay:.3s; }
[data-reveal-d="4"]{ transition-delay:.4s; }

/* zeilenweiser Text-Reveal */
.lines span{
  display:block; overflow:hidden;
  /* Ohne die zusaetzliche Hoehe schneidet overflow:hidden bei der
     engen Zeilenhoehe die Umlautpunkte ab ("PRAEZISION"). Der
     negative Aussenabstand haelt die Zeilen trotzdem auf Position. */
  padding-top:.16em;
  margin-top:-.16em;
}
.lines span > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  transition:transform 1.05s var(--ease-out);
}
.lines.is-in span:nth-child(1) > i{ transition-delay:.02s; }
.lines.is-in span:nth-child(2) > i{ transition-delay:.11s; }
.lines.is-in span:nth-child(3) > i{ transition-delay:.20s; }
.lines.is-in span > i{ transform:none; }

[data-par]{ will-change:transform; }

/* ---------- 15  Rechtsseiten & 404 --------------------------- */
.doc{
  padding-block:clamp(130px,18vh,190px) clamp(60px,10vh,110px);
  max-width:860px;
}
.doc h1{
  font-size:clamp(36px,7vw,68px);
  text-transform:uppercase;
  margin-bottom:clamp(26px,4vw,44px);
}
.doc h2{
  /* "Umsatzsteuer-Identifikationsnummer" sprengt sonst schmale Displays. */
  -webkit-hyphens:auto; hyphens:auto;
  font-size:clamp(17px,2.2vw,25px);
  text-transform:uppercase; letter-spacing:.01em;
  margin:clamp(34px,5vw,54px) 0 12px;
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--line-soft);
}
.doc h3{
  font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  margin:26px 0 8px; color:var(--cyan); font-weight:700;
}
.doc p,.doc li{ color:var(--silver); }
.doc p{ margin:0 0 14px; max-width:68ch; }
.doc ul{ margin:0 0 14px; padding-left:18px; }
.doc li{ margin-bottom:6px; }
.doc strong{ color:var(--fog); font-weight:600; }
.doc a{ color:var(--fog); border-bottom:1px solid rgba(60,188,222,.45); }
.doc a:hover{ color:var(--cyan); }
.doc address{ font-style:normal; color:var(--fog); line-height:1.8; }

/* ---------- 15b  Galerie-Unterseite --------------------------
   Editorial-Raster mit allen Aufnahmen. Bewusst ungleiche
   Formate, damit es kein Kachelraster wird.
   ------------------------------------------------------------ */
.gg{ padding-block:clamp(110px,16vh,170px) clamp(50px,9vh,100px); }

.krumen{
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(18px,3vw,28px);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--silver);
}
.krumen a{ color:var(--fog); }
.krumen a:hover{ color:var(--cyan); }

.gg__h,.gg__h2{
  font-size:clamp(40px,11vw,96px);
  line-height:.88; text-transform:uppercase;
  margin:0 0 clamp(12px,2vw,18px);
}
.gg__h b,.gg__h2 b{ color:var(--cyan); font-weight:900; }
.gg__h2{ margin-top:clamp(56px,10vh,120px); font-size:clamp(34px,9vw,76px); }
.gg__lead{ margin-bottom:clamp(26px,4vw,44px); }

.gg__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(12px,2vw,22px);
}
.gg__e{
  position:relative; margin:0; overflow:hidden;
  background:var(--coal);
  aspect-ratio:4/3;
}
.gg__e img{ width:100%; height:100%; object-fit:cover; display:block; }
.gg__e::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,7,10,0) 58%,rgba(4,7,10,.76));
  pointer-events:none;
}
.gg__e figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.g-1,.g-6{ aspect-ratio:16/9; }
.g-2{ aspect-ratio:3/4; }
.g-8{ aspect-ratio:16/9; }

.gg__ende{
  margin-top:clamp(56px,10vh,120px);
  padding-top:clamp(26px,4vw,40px);
  border-top:1px solid var(--line);
}
.gg__ende .cta__h{ font-size:clamp(28px,7vw,58px); }

@media (min-width:768px){
  .gg__grid{ grid-template-columns:repeat(12,1fr); }
  /* Reihen ausdruecklich setzen: bei automatischer Platzierung
     rutscht g-7 in die naechste Reihe und laesst links eine Luecke. */
  .g-1{ grid-column:1/9;  grid-row:1; }
  .g-2{ grid-column:9/13; grid-row:1; }
  .g-3{ grid-column:1/5;  grid-row:2; }
  .g-4{ grid-column:5/9;  grid-row:2; }
  .g-5{ grid-column:9/13; grid-row:2; }
  .g-7{ grid-column:1/5;  grid-row:3; aspect-ratio:3/4; }
  .g-6{ grid-column:5/13; grid-row:3; }
  .g-8{ grid-column:1/13; grid-row:4; aspect-ratio:21/9; }
  .gg__lead{ max-width:46ch; }
}

.e404{
  min-height:100svh;
  display:grid; align-content:center;
  padding-block:clamp(120px,18vh,180px) clamp(90px,14vh,140px);
}
.e404__n{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(88px,26vw,280px); line-height:.82;
  letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.32);
  margin:0 0 clamp(20px,3vw,34px);
}
.e404__h{ font-size:clamp(26px,5vw,48px); text-transform:uppercase; margin-bottom:16px; }
.e404 .lead{ margin-bottom:clamp(28px,4vw,40px); }
.e404__act{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Breakpoints -------------------------------------- */
@media (min-width:600px){
  .ba{ aspect-ratio:16/9; }
  .mnav__wa span{ display:inline; }
}

/* Zwischen 600 und 767 px ist noch der Burger aktiv, da ist Platz
   fuer die Beschriftung. Ab 768 uebernimmt die Desktop-Navigation
   und der Header wird eng - dort erst ab 900 px wieder beschriften. */
@media (min-width:600px) and (max-width:767.98px){
  .wa-btn__txt{ display:inline; }
}
@media (min-width:900px){
  .wa-btn__txt{ display:inline; }
}

@media (min-width:768px){
  :root{ --mnav-h:0px; }
  .logo__img{ max-width:min(42vw,520px); margin-inline:0; }
  html{ scroll-padding-top:110px; }

  .mnav{ display:none; }
  .burger{ display:none; }
  .menu{ display:none; }
  .icn-btn{ display:grid; }
  .nav{ display:block; }

  .hero{ padding-block:clamp(150px,22vh,240px) clamp(120px,18vh,180px); }
  .hero__meta{ display:block; }
  .hero__cue{ bottom:clamp(40px,7vh,72px); }
  .hero__meta{ bottom:clamp(40px,7vh,72px); }

  .gap{ height:clamp(60px,9vh,130px); }

  .svc__grid{
    display:grid;
    grid-template-columns:42% 1fr;
    gap:clamp(28px,3.6vw,64px);
  }
  .svc__grid > *{ min-width:0; }

  .svc__stage{
    align-self:start;
    top:clamp(96px,16vh,150px);
    margin-bottom:0;
  }
  .svc__pics{ aspect-ratio:4/3; }

  .svc-item{ min-height:58vh; }
  .svc-item__p{ max-width:40ch; }
  /* Ab hier ist die Textspalte schmaler als die volle Breite -
     Groesse am laengsten Wort "INSTANDSETZUNG" gemessen. */
  .svc-item__h{ font-size:clamp(26px,4.2vw,42px); }

  /* Ohne min-width:0 erzwingt "LEIDENSCHAFT." seine min-content-Breite
     und quetscht die Bildspalte auf wenige Pixel. */
  .abt__grid > *,
  .cta__top > *{ min-width:0; }

  .mst{
    flex-direction:row; flex-wrap:wrap; align-items:baseline;
    justify-content:space-between; text-align:left;
  }
  .mst__pts{ justify-content:flex-end; }

  /* Vorher/Nachher zweispaltig: Regler links, Text rechts */
  .ba-block{
    /* Der Regler bekommt deutlich mehr Breite - der Vergleich ist
       das staerkste Argument der Seite. */
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    gap:clamp(20px,2.8vw,44px);
  }
  .ba{ aspect-ratio:3/2; }
  .ba__nav{ margin-top:clamp(12px,2vw,20px); }

  /* Galerie: groessere Kacheln, Kopf und Spur nebeneinander */
  .spur__el--breit .spur__fig{ width:52vw; }
  .spur__el--hoch  .spur__fig{ width:32vw; }
  .mehr{ width:34vw; min-height:24vw; }

  .ba{ aspect-ratio:16/9; }

  /* Kontakt: Aufforderung links, Karte rechts, Fakten in einer Reihe */
  .cta__top{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:clamp(30px,4.6vw,72px);
    align-items:center;
  }
  .cta__top > *{ min-width:0; }
  .cta__btns .btn{ flex:0 1 auto; }
  .info{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .info__link{ width:auto; align-self:start; padding:12px 18px; font-size:11px; letter-spacing:.16em; }
  .info__b:nth-child(1),
  .info__b:nth-child(2),
  .info__b:nth-child(3){ grid-column:auto; grid-row:auto; }
  .map{ margin-top:0; aspect-ratio:4/3; }

  /* Am laengsten Wort "LEIDENSCHAFT." gegen die Textspalte gemessen. */
  .abt__h{ font-size:clamp(34px,4.8vw,78px); }


  .ft__in{ flex-direction:row; align-items:center; justify-content:space-between; gap:40px; }

}

@media (min-width:768px){
  .stage__still{ object-position:50% 50%; }
}

/* Gepinnte Galerie-Spur - auf allen Breiten.
   Vertikales Scrollen schiebt die Spur zur Seite. Die Hoehe des
   Containers setzt JS auf Viewport + Scrollstrecke, damit kein
   Scroll-Hijacking entsteht: die Seite scrollt ganz normal weiter,
   nur der Inhalt bewegt sich quer.

   Mobil steht die Ueberschrift ueber der Spur, ab 1024 px daneben
   und laeuft langsamer mit aus dem Bild. */
.ist-gepinnt .gal__pin{
  position:sticky; top:0;
  /* Die Abschnittsleiste am unteren Rand darf nichts verdecken. */
  height:calc(100svh - var(--mnav-h));
  overflow:hidden;
  display:flex; flex-direction:column;
  /* Bewusst oben statt mittig: mittig stand die Ueberschrift 218 px
     unter der Oberkante und der Uebergang von den Leistungen wirkte
     wie eine grosse Luecke. Der Abstand nach oben haelt sie
     gleichzeitig unter dem festen Header. */
  justify-content:flex-start;
  padding-top:clamp(84px,13vh,128px);
}
.ist-gepinnt .gal__kopf{ margin-bottom:clamp(12px,2vh,20px); }
/* Im gepinnten Zustand kleiner als sonst: sonst wird die Zeile auf
   niedrigen Fenstern oben angeschnitten und landet optisch im Bild. */
.ist-gepinnt .gal__h{ font-size:clamp(30px,6.4vw,58px); }
.ist-gepinnt .spur{
  overflow:visible;
  will-change:transform;
  padding-right:14vw;
}
/* Der Versatz bleibt dem Desktop vorbehalten. Mobil schob er
   einzelne Kacheln so weit nach oben, dass sie die Ueberschrift
   angeschnitten haben. */
.ist-gepinnt .spur__el{ transform:none; }
/* Kacheln nach der Fensterhoehe bemessen, nicht nach der Breite -
   so passen Ueberschrift und Spur in jedes Fensterformat. */
.ist-gepinnt .spur__el--breit .spur__fig{ width:auto; height:min(36vh,52vw); }
.ist-gepinnt .spur__el--hoch  .spur__fig{ width:auto; height:min(44vh,68vw); }
/* Die Textkachel richtete sich nach ihrem Inhalt und war damit
   hoeher als die Bilder - dadurch wurde die ganze Spur zu hoch
   und lief unten aus dem gepinnten Bereich. Jetzt feste Hoehe. */
.ist-gepinnt .mehr{
  width:min(48vh,64vw); height:min(36vh,52vw); min-height:0;
  padding:clamp(14px,2.6vw,22px);
}
.ist-gepinnt .mehr__h{ font-size:clamp(20px,4.4vw,30px); margin:clamp(8px,1.6vw,12px) 0 clamp(6px,1vw,8px); }
.ist-gepinnt .mehr__txt{ font-size:13px; line-height:1.4; margin-bottom:clamp(8px,1.6vw,12px); }

@media (min-width:1024px){
  .ist-gepinnt .gal__pin{ flex-direction:row; align-items:center; padding-top:0; }
  .ist-gepinnt .gal__kopf{
    position:absolute; left:var(--gut); top:50%;
    z-index:2; margin:0; padding:0;
    /* In vw statt ch: ch richtet sich nach der Grundschrift und
       war viel zu schmal, die Headline lief aus dem Rahmen. */
    max-width:30vw;
    transform:translate3d(var(--kopf-x,0px),-50%,0);
    pointer-events:none;
  }
  .ist-gepinnt .gal__h{ font-size:clamp(38px,4.4vw,68px); }
  /* Versatz am Desktop, aber moderater als zuvor. */
  .ist-gepinnt .spur__el{ transform:translateY(calc(var(--versatz,0) * .6)); }
  .ist-gepinnt .gal__kopf .textlink{ pointer-events:auto; }
  .ist-gepinnt .spur{
    gap:2.6vw;
    padding:0 8vw 0 34vw;
  }
  /* Groesser als vorher: der gepinnte Bildschirm war sonst zur
     Haelfte leer und wirkte wie eine Luecke vor Vorher/Nachher. */
  .ist-gepinnt .spur__el--breit .spur__fig{ width:auto; height:58vh; }
  .ist-gepinnt .spur__el--hoch  .spur__fig{ width:auto; height:70vh; }
  .ist-gepinnt .mehr{ width:23vw; height:58vh; }
  .ist-gepinnt .mehr__h{ font-size:clamp(26px,2.2vw,36px); }
  .ist-gepinnt .mehr__txt{ font-size:14px; }
}

@media (min-width:1100px){
  /* Erst hier ist Platz fuer zwei Spalten - bei 768 px blieben
     fuer die Bildspalte nur 159 px uebrig. */
  .abt__grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(32px,4.4vw,72px);
    align-items:center;
  }
  .abt__grid > *{ min-width:0; }
  .abt__fig{ margin-top:0; }

  .logo__img{ max-width:min(40vw,560px); }

  .hero{ align-items:center; }
}

/* ---------- 16  prefers-reduced-motion ----------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .logo{ opacity:1; filter:none; transform:none; animation:none; }
  .hero__cue,.hero__meta{ opacity:1; animation:none; }
  [data-reveal]{ opacity:1; transform:none; filter:none; clip-path:none; }
  .lines span > i{ transform:none; }
  .svc-item__fig{ clip-path:none; }
  .svc-item__fig img,.svc-item__fig .ph{ transform:none; }
  .svc-item__line{ transform:scaleX(1); }
  .stage__beam,.ph::before,.map__pin::before,.map__pin::after{ animation:none; }
}