/* ===========================================================================
   EB Lasertechnik GmbH — Stylesheet
   ---------------------------------------------------------------------------
   Gestaltungsidee: Präzisionsraster. Haarlinien, technische Ziffern in
   Festbreitenschrift und ein einziger Akzent — das Markenturkis — der nur
   dort erscheint, wo er etwas bedeutet.

   Farben
     --ink     #0F1417  Grundton, Schwarz mit leichter Cyan-Neigung
     --paper   #FFFFFF  Weiß
     --mist    #F4F7F7  Hellgrau, minimal zum Turkis verschoben
     --turk    #0DECCF  Markenakzent
     --turk-t  #067A69  abgedunkelt, damit Text auf Weiß lesbar bleibt
     --steel   #79868C  Sekundärtext, kühles Grau
   =========================================================================== */

/* Hausschrift Montserrat, selbst gehostet.
   Bewusst NICHT über Google Fonts eingebunden: Dabei würde bei jedem Seitenaufruf
   die IP-Adresse des Besuchers an einen Google-Server in die USA übertragen — ein
   bekanntes Datenschutzproblem. Die Datei liegt auf dem eigenen Server.
   Eine einzige Variable-Font-Datei (37 KB) deckt alle Schriftstärken von 400 bis 800 ab. */
@font-face{
  font-family:"Montserrat";
  src:url("/assets/schrift/montserrat-var.woff2") format("woff2-variations"),
      url("/assets/schrift/montserrat-var.woff2") format("woff2");
  font-weight:400 800;
  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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Roboto Mono, Apache License 2.0 — Lizenztext liegt daneben.
   Wird NUR auf Geraeten mit Touchbedienung verwendet, siehe weiter unten.
   Am Rechner bleibt es bei Consolas; diese Datei wird dort gar nicht erst
   geladen, weil kein Element sie anfordert. */
@font-face{
  font-family:"Roboto Mono";
  src:url("/assets/schrift/roboto-mono-var.woff2") format("woff2-variations"),
      url("/assets/schrift/roboto-mono-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0F1417; --ink-2:#171D21; --ink-3:#1F272B;
  --paper:#fff; --mist:#F4F7F7; --line:#E2E7E9;
  --turk:#0DECCF; --turk-t:#067A69; --turk-d:#0AC0A8; --turk-dd:#04241F;
  --steel:#79868C; --text:#131A1E; --muted:#565F65;

  --max:1200px; --gut:26px; --rad:2px;
  --sans:"Montserrat","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,"Roboto Mono","Noto Sans Mono","DejaVu Sans Mono",monospace;
  /* Bewusst Systemschriften, keine mitgelieferte. Vier Webfonts wurden am
     19.08.2026 verglichen — JetBrains Mono, IBM Plex Mono, Red Hat Mono und
     Roboto Mono. Entschieden wurde fuer diesen Zustand, weil Consolas auf
     Windows die durchgestrichene Null zeigt, die keine der freien
     Alternativen so trifft. Bitte keine Schriftdatei nachruesten.

     Die Reihenfolge arbeitet die Geraete der Reihe nach ab:
       Cascadia Mono, Consolas   Windows
       SF Mono, Menlo            iPhone und Mac
       Roboto Mono, Noto Sans    Android — beide haben ebenfalls den Strich
                                 in der Null und liegen dort meist schon vor
       DejaVu Sans Mono          Linux
       monospace                 was sonst noch da ist

     Die beiden Android-Eintraege kosten nichts, halfen auf dem Testgeraet
     aber nicht — es bringt keine davon mit. Deshalb steht weiter unten eine
     Umschaltung nach Bedienart. */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Auf Geraeten mit Touchbedienung eine mitgelieferte Monospace verwenden.
   Grund: Android findet in der Liste oben nichts und nimmt seine
   Standardschrift, die einen Punkt in die Null setzt statt eines Strichs.

   (pointer:coarse) trifft Handys und Tablets, nicht das Mausgeraet. Damit
   bleibt es am Rechner bei Consolas — genau so gewollt. Eine Regel nach
   Fensterbreite waere schlechter: Ein schmal gezogenes Fenster am Rechner
   haette dann ebenfalls umgeschaltet.

   Die Schriftdatei wird nur dort geladen, wo diese Regel greift. Am Rechner
   fordert sie kein Element an, also holt der Browser sie auch nicht. */
@media(pointer:coarse){
  :root{--mono:"Roboto Mono","Cascadia Mono",Consolas,"SF Mono",Menlo,monospace}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Sprungziele nicht hinter der festen Kopfzeile verstecken */
:target,h1,h2,h3,section,details{scroll-margin-top:96px}
body{font:400 16.5px/1.66 var(--sans);color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Markierter Text in der Hausfarbe statt im Browserblau. Faellt kaum auf und
   wirkt doch: Wer sich etwas herauskopiert, sieht die Marke. */
::selection{background:var(--turk);color:var(--turk-dd)}
::-moz-selection{background:var(--turk);color:var(--turk-dd)}
:focus-visible{outline:2px solid var(--turk-t);outline-offset:3px;border-radius:var(--rad)}

/* ---------------------------------------------------------------- Grundraster */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.eng{max-width:840px}
section{padding:96px 0;position:relative}
.alt{background:var(--mist)}
.dunkel{background:var(--ink);color:#E8EDEF}
.dunkel .lead,.dunkel p{color:#AAB4B9}
.dunkel h2,.dunkel h3{color:#fff}

/* ---------------------------------------------------------------- Typografie */
/* Deutsche Komposita wie "Bauteilkennzeichnung" passen auf schmalen Geraeten nicht
   in eine Zeile. Ohne Trennung liefen sie aus dem Bild — sichtbar abgeschnitten,
   weil der Seitenrand sie beschneidet. "hyphens:auto" nutzt zusammen mit lang="de"
   die deutschen Trennregeln des Browsers und setzt einen echten Trennstrich. */
h1,h2,h3,h4{line-height:1.16;font-weight:800;text-wrap:balance;letter-spacing:-.022em;
  overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}
/* Nur wenn es sonst aus dem Bild liefe, darf ein Wort brechen — dann aber mit Trennung */
@media(max-width:820px){h1,h2,h3{overflow-wrap:break-word}}
/* Getrennt wird nur auf schmalen Geräten und nur bei wirklich langen Wörtern:
   "Bauteilkennzeichnung" ja, "Typenschild" nein. */
@media(max-width:820px){
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;
    hyphenate-limit-chars:14 6 5;-webkit-hyphenate-limit-chars:14 6 5}
}
h1{font-size:clamp(1.85rem,4.6vw,3.7rem)}
h2{font-size:clamp(1.55rem,3.1vw,2.45rem);margin-bottom:16px}
/* h3 lag mit 1,1 rem nur zehn Prozent ueber dem Fliesstext und war als
   Zwischentitel kaum zu erkennen. Bei 1,28 rem traegt die Gliederung, ohne dem
   h2 (bis 2,45 rem) Konkurrenz zu machen. */
h3{font-size:1.28rem;letter-spacing:-.015em;margin-bottom:10px}
h4{font-size:1rem;letter-spacing:-.01em;margin-bottom:6px}
/* pretty verhindert, dass die letzte Zeile eines Absatzes aus einem einzelnen
   Wort besteht. Browser ohne Unterstuetzung ignorieren die Angabe. */
p{margin-bottom:17px;max-width:70ch;text-wrap:pretty}
ul,ol{margin:0 0 20px 20px}
li{margin-bottom:8px;max-width:68ch;padding-left:4px}
li::marker{color:var(--turk-t)}
strong{font-weight:700;color:var(--ink)}
/* Auf dunklem Grund verschwindet die Tintenfarbe. Die Ausnahme galt bisher nur
   fuer .dunkel — im Abschlussblock stand die Hervorhebung deshalb schwarz auf
   schwarz und war unsichtbar. Hier sind alle dunklen Bereiche aufgefuehrt. */
.dunkel strong,.final strong,.hero strong,.band strong,.br strong,footer strong,
.dunkel b,.final b,.hero b,.band b,.br b,footer b{color:#fff}
.lead{font-size:1.07rem;color:var(--muted);max-width:66ch}
/* Lange URLs und Fachbegriffe duerfen die Seite nicht sprengen.
   ACHTUNG: "anywhere" verkleinert auch die Mindestbreite eines Elements. In
   Flex-Leisten wie der Navigation fuehrt das dazu, dass Woerter mitten im Wort
   umbrechen. Deshalb gilt die Regel nur fuer Fliesstext, nicht fuer Menues. */
p,td,th,dd,summary,main li{overflow-wrap:anywhere}
.menu li,.menu a,.sub li,.sub a,.crumbs,.chip,.stat b,.btn,.more,.br b,.br i,footer li,footer a{
  overflow-wrap:normal;word-break:normal}
.menu>li>a,.sub a,.btn,.crumbs a{white-space:nowrap}
.menu>li,.menu>li>a{flex:none}

/* Mikrobeschriftung: Festbreitenschrift, weit gesperrt */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turk-t);margin-bottom:14px}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--turk);flex:none;
  transform-origin:left center}
/* Der Strich vor der Rubrik zieht sich beim Erscheinen auf — wie eine Linie, die
   der Laser zieht. Nur dort, wo ohnehin eingeblendet wird, und nur ein Strich:
   Der Inhalt haengt nicht daran, es kann nichts unsichtbar bleiben. */
html.anim .reveal .eyebrow::before{transform:scaleX(0);transition:transform .5s var(--ease) .12s}
html.anim .reveal.da .eyebrow::before{transform:scaleX(1)}
.dunkel .eyebrow{color:var(--turk)}

/* ---------------------------------------------------------------- Hinweisbalken */
.hinweis{background:var(--turk);color:var(--turk-dd);font-size:14.5px;font-weight:600;
  padding:11px 24px;text-align:center;letter-spacing:.005em}
.hinweis a{color:var(--turk-dd)}

/* ---------------------------------------------------------------- Kopfzeile */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.6) blur(10px)}
/* Der Inhaltsbereich ist auf 1200 px begrenzt. Logo, Menue und Schaltflaeche
   mussten darin bisher zusammengedraengt werden — sichtbar daran, dass das Logo
   gestaucht wurde. Abstand und Menuepolster sind deshalb knapper gesetzt, damit
   alles ohne Quetschen hineinpasst. */
.nav{display:flex;align-items:center;gap:20px;height:78px}
.logo{display:flex;align-items:baseline;font-weight:800;font-size:1.14rem;
  letter-spacing:-.03em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.logo i{font-style:normal;color:var(--turk-d)}
/* Kopfzeile trägt das echte Logo, die Fußzeile den Schriftzug (auf Dunkel besser lesbar) */
/* flex:none ist wichtig: Ohne die Angabe staucht die Kopfzeile das Logo, sobald
   die Navigation eng wird — width:auto allein schuetzt nicht davor. Die Hoehe ist
   auf den Schriftzug "EB LASERTECHNIK GMBH" unter dem Zeichen abgestimmt. */
.logo-bild{padding:0;flex:none}
.logo-bild img{height:52px;width:auto;display:block;flex:none}
@media(max-width:620px){.logo-bild img{height:42px}}
/* Die Schaltflaeche in der Kopfzeile sitzt enger als die im Text — sonst wird
   die Zeile neben dem vollen Menue zu knapp. */
.nav .btn{padding:12px 20px;font-size:14px;flex:none}
.menu{display:flex;gap:2px;list-style:none;margin:0 0 0 auto}
.menu>li{position:relative}
.menu>li>a{display:block;padding:9px 10px;font-size:14px;font-weight:600;
  color:#3A4348;text-decoration:none;position:relative}
.menu>li>a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--turk);transform:scaleX(0);transform-origin:left;transition:transform .26s var(--ease)}
.menu>li:hover>a::after,.menu>li>a[aria-current]::after{transform:scaleX(1)}
.menu>li>a[aria-current]{color:var(--ink);font-weight:700}
.sub{position:absolute;top:calc(100% + 2px);left:0;min-width:280px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 44px rgba(15,20,23,.13);
  list-style:none;margin:0;padding:7px;opacity:0;visibility:hidden;
  transform:translateY(-7px);transition:.2s var(--ease)}
.menu>li:hover .sub,.menu>li:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 12px;font-size:14.5px;color:#3A4348;text-decoration:none}
.sub a:hover{background:var(--mist);color:var(--turk-t)}
.sub a[aria-current]{color:var(--turk-t);font-weight:600}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  padding:9px 12px;font-size:19px;cursor:pointer;line-height:1;color:var(--ink)}

/* ---------------------------------------------------------------- Schaltflächen */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--turk);
  color:var(--turk-dd);padding:14px 26px;font-weight:700;text-decoration:none;
  font-size:14.5px;letter-spacing:-.005em;border:2px solid var(--turk);border-radius:var(--rad);cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.btn .ic{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn:hover{background:var(--turk-d);border-color:var(--turk-d)}
.btn:hover .ic{transform:translateX(4px)}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-o:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn-d{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-d:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}

/* Stehen zwei Knöpfe untereinander, richtet sich ohne Vorgabe jeder nach seiner
   Textlänge — „Leistungen ansehen" wurde damit breiter als „Anfrage starten",
   was wie ein Versehen aussieht statt wie Gestaltung. Volle Breite macht sie
   gleich lang und den Umbruch zur Absicht.
   Das :has() ist der springende Punkt: Es greift nur, wo tatsächlich zwei
   Knöpfe nebeneinanderstehen — auf der Startseite und der 404-Seite. Die
   übrigen 27 Seiten tragen einen einzelnen Knopf, der sich weiterhin nach
   seinem Inhalt richtet. Kennt ein Browser :has() nicht, bleibt es beim
   bisherigen Verhalten; kaputt geht dabei nichts. */
@media(max-width:620px){
  .cta-row:has(.btn + .btn){flex-direction:column;align-items:stretch}
  .cta-row:has(.btn + .btn) .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------- Symbole */
/* Der Akzent wird als Variable gesetzt: Klassen reichen nicht in den
   Schatten-Baum von <use> hinein, geerbte Eigenschaften wie --ac schon. */
.ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;
  --ac:var(--turk-d)}
.dunkel .ic,.hero .ic,.br .ic,.final .ic,footer .ic,.btn .ic{--ac:var(--turk)}
.ic-gr{width:34px;height:34px}

/* ---------------------------------------------------------------- Hero */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.46;
  z-index:-2;transform:scale(1.06);animation:heroZoom 18s var(--ease) forwards;
  object-position:var(--bildpos,center)}
/* Auf Unterseiten steht der Text links, das Bild daneben — nicht dahinter.
   Den Ausschnitt nur zu verschieben reichte nicht: Bei Motiven, die das ganze Bild
   fuellen, lag das Bauteil weiterhin unter der Schrift. Ab 900 px belegt das Bild
   deshalb nur die rechte Haelfte, der Verlauf blendet die Kante weich aus. */
@media(max-width:899px){.hero-s>img{--bildpos:center}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(15,20,23,.93) 0%,rgba(15,20,23,.66) 46%,rgba(15,20,23,.28) 100%)}
@keyframes heroZoom{to{transform:scale(1)}}
.hero .wrap{position:relative;padding-top:118px;padding-bottom:118px}
.hero-s .wrap{padding-top:84px;padding-bottom:84px}
.hero .in{max-width:740px}
.hero p{font-size:1.1rem;color:#C6CED2;margin:22px 0 32px;max-width:60ch}

/* Wechselndes Schlusswort der Startseiten-Überschrift. Das Wort im Quelltext
   ist echt und bleibt es — getauscht wird erst nach dem Laden. inline-block
   hält das Wort zusammen; die Mindestbreite setzt das Skript nach dem Messen
   des längsten Begriffs, sonst springt die Zeile bei jedem Wechsel. */
.wechsel{display:inline-block;max-width:100%;color:var(--turk);
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.wechsel.weg{opacity:0;transform:translateY(-.2em)}
@media(prefers-reduced-motion:reduce){.wechsel{transition:none}}

/* --- Gütezeichen unten rechts ---------------------------------------------
   Läuft beim Scrollen mit. z-index 60 hält es unter dem Fortschrittsbalken (70)
   und weit unter der Bildlupe (300) — ein vergrößertes Bild soll es verdecken,
   nicht umgekehrt. Es erscheint verzögert, damit es dem Hero nicht die Schau
   stiehlt; ohne Skript und bei abgeschalteten Animationen steht es sofort da. */
.bewertung{position:fixed;right:20px;bottom:20px;z-index:60;
  width:124px;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:var(--ink);color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
.bewertung:hover{transform:translateY(-2px);border-color:var(--turk)}
.bewertung .sterne{display:flex;gap:2px;color:var(--turk);margin-bottom:7px}
.bewertung .ic{width:12px;height:12px}
.bewertung .note{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1}
.bewertung .anz{font-size:11px;color:#A9B4BA;line-height:1.3;margin-top:4px}
.bewertung .quelle{font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--turk);margin-top:6px}

.anim .bewertung{opacity:0;transform:translateY(10px);
  animation:zeichen-auf .5s var(--ease) 1.4s forwards}
@keyframes zeichen-auf{to{opacity:1;transform:none}}

/* Auf schmalen Geräten kleiner und ohne die Wortzeile — sonst verdeckt das
   Quadrat einen zu großen Teil des Bildschirms und damit Bedienelemente. */
@media(max-width:620px){
  .bewertung{right:12px;bottom:12px;width:88px}
  .bewertung .anz{display:none}
  .bewertung .sterne{margin-bottom:5px}
  .bewertung .ic{width:10px;height:10px}
  .bewertung .note{font-size:22px}
  .bewertung .quelle{font-size:8.5px;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){
  .bewertung{transition:none}
  .anim .bewertung{opacity:1;transform:none;animation:none}
}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turk);margin-bottom:20px;padding-left:13px;border-left:2px solid var(--turk)}

/* Laserlinie: läuft beim Laden einmal durch — Motiv aus dem Thema selbst */
.hero .scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--turk),transparent);
  box-shadow:0 0 22px 3px rgba(13,236,207,.5);opacity:0;
  animation:scan 2.6s var(--ease) .35s 1 forwards}
@keyframes scan{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.95} 88%{opacity:.6}
  100%{transform:translateY(var(--scanH,420px));opacity:0}}

/* ---------------------------------------------------------------- Kennzahlen */
.stats{background:var(--ink-2);color:#fff;border-top:1px solid rgba(255,255,255,.07)}
.stats .g{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:40px 22px;text-align:center;border-right:1px solid rgba(255,255,255,.08);
  position:relative}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--mono);font-size:clamp(1.5rem,2.5vw,2.1rem);
  color:var(--turk);font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}
.stat span{font-size:13px;color:#93A0A6;display:block;margin-top:9px;line-height:1.5;
  letter-spacing:.01em}

/* ---------------------------------------------------------------- Raster */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mt{margin-top:44px}

/* Karten */
.card{background:#fff;border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--turk);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);z-index:2}
.card:hover{border-color:#CBD4D7;transform:translateY(-4px);box-shadow:0 18px 42px rgba(15,20,23,.1)}
.card:hover::before{transform:scaleX(1)}
.card .bild{overflow:hidden;background:var(--mist)}
.card .bild img{transition:transform .6s var(--ease);aspect-ratio:4/3;object-fit:cover;width:100%}
.card:hover .bild img{transform:scale(1.05)}
.card .b{padding:24px;display:flex;flex-direction:column;flex:1;gap:2px}
.card p{font-size:15.5px;color:var(--muted);margin-bottom:14px}
.card .ic{margin-bottom:14px;color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:7px;color:var(--turk-t);font-weight:700;
  font-size:14.5px;text-decoration:none;margin-top:auto}
.more .ic{width:15px;height:15px;margin:0;transition:transform .22s var(--ease)}
.more:hover{color:var(--ink)}
.more:hover .ic{transform:translateX(4px)}
.dunkel .more{color:var(--turk)}

/* Branchenkacheln */
/* Sieben Kacheln gingen in drei Spalten als 3 + 3 + 1 auf, die letzte stand
   allein. Ueber ein Zwoelf-Spalten-Raster stehen sie als 4 + 3 und fuellen beide
   Reihen vollstaendig. */
@media(min-width:1000px){
  .kachelraster:has(>a:nth-child(7):last-child){grid-template-columns:repeat(12,1fr)}
  .kachelraster:has(>a:nth-child(7):last-child)>a{grid-column:span 3}
  .kachelraster:has(>a:nth-child(7):last-child)>a:nth-child(n+5){grid-column:span 4}
}
.br{position:relative;overflow:hidden;background:var(--ink);min-height:196px;
  display:flex;align-items:flex-end;padding:22px;color:#fff;text-decoration:none;
  transition:transform .28s var(--ease)}
.br img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.44;
  transition:opacity .4s var(--ease),transform .7s var(--ease)}
.br::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,20,23,.9) 8%,rgba(15,20,23,.1) 68%)}
.br:hover{transform:translateY(-4px)}
.br:hover img{opacity:.6;transform:scale(1.06)}
.br .t{position:relative;z-index:1}
.br b{display:block;font-size:1.05rem;line-height:1.28;letter-spacing:-.02em}
.br i{display:block;font-style:normal;font-size:13px;color:var(--turk);margin-top:5px;
  font-family:var(--mono);letter-spacing:.02em}
.br .ic{position:absolute;top:20px;right:20px;z-index:1;color:#fff;opacity:.55;
  transition:opacity .28s var(--ease)}
.br:hover .ic{opacity:1}

/* Kachelraster der Übersichtsseiten */
.kachelraster{margin:34px 0}
.kachelraster .br{min-height:210px}

/* Merkmalsliste mit Symbolen */
.usp{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 32px}
.usp>div{padding-top:20px;border-top:1px solid var(--line);position:relative}
.usp>div::before{content:"";position:absolute;top:-1px;left:0;width:38px;height:3px;background:var(--turk)}
.usp .ic{margin-bottom:14px;color:var(--ink)}
.usp p{font-size:15.5px;color:var(--muted);margin:0}
.alt .usp>div{border-top-color:#DDE4E6}

/* Zweispalter */
.split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:60px;align-items:center}
.split img{width:100%}
/* Variante mit Fortsetzung darunter: Text und Bild schliessen unten buendig ab,
   der weiterfuehrende Absatz laeuft danach ueber die volle Breite. Damit die
   Bildunterkante wirklich mit der letzten Textzeile fluchtet, sitzt die
   Bildunterschrift ausserhalb der Ausrichtung. */
.split-unten{align-items:end}
/* Das letzte Element der Textspalte traegt einen Aussenabstand nach unten (beim
   Merksatz 32 px). Der zaehlt zur Spaltenhoehe, ist aber unsichtbar — das Bild
   stand dadurch genau um diesen Betrag zu tief. Hier deshalb auf null. */
.split-unten>div>*:last-child{margin-bottom:0}
/* Fluchten soll die Bildunterkante mit der letzten Textzeile. Dafuer darf nur
   das Bild zur Hoehe der Spalte zaehlen: Bildunterschrift und tuerkise Ecke
   haengen darunter und werden aus der Berechnung genommen. Die Ecke rueckt so
   weit nach unten, dass die Unterschrift zwischen Bildkante und Eckenlinie
   Platz hat — 11 px Abstand, eine Zeile, dann die Linie. */
.split-unten figcaption{position:absolute;left:0;right:0;top:100%;margin-top:11px}
.split-unten .bildrahmen::after{bottom:-46px}
.nachsatz{margin-top:72px;max-width:none}
.nachsatz p{max-width:none}
/* Ab 1200 px abwaerts stehen Text und Bild untereinander (siehe weiter unten).
   Dann gibt es nichts mehr auszurichten: Die Bildunterschrift gehoert zurueck in
   den Textfluss und die Ecke wieder dicht an den Rahmen — sonst laege beides
   ueber dem folgenden Absatz. */
@media(max-width:1200px){
  .split-unten figcaption{position:static;margin-top:11px}
  .split-unten .bildrahmen::after{bottom:-14px}
  .nachsatz{margin-top:34px}
}
.bildrahmen{position:relative}
.bildrahmen::after{content:"";position:absolute;left:-14px;bottom:-14px;width:76px;height:76px;
  border-left:3px solid var(--turk);border-bottom:3px solid var(--turk);pointer-events:none}
figcaption{font-family:var(--mono);font-size:12px;color:var(--steel);margin-top:11px;
  letter-spacing:.02em;line-height:1.5}

/* Merkmalsplaketten */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{background:#fff;border:1px solid var(--line);padding:7px 15px;font-size:14px;
  color:#3A4348;font-family:var(--mono);letter-spacing:.01em;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.chip:hover{border-color:var(--turk);color:var(--turk-t)}

/* Tabelle */
.tw{overflow-x:auto;max-width:100%;margin:26px 0;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--ink);color:#fff;font-weight:600;font-size:12.5px;font-family:var(--mono);
  letter-spacing:.09em;text-transform:uppercase;border-bottom:0}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--mist)}

/* Prozessschritte.
   Zweispaltiges Raster statt absoluter Positionierung: So bestimmt die Breite der
   Schrittnummer selbst, wie viel Platz sie bekommt. Bei fester Positionierung lief
   ein laengeres Wort wie "Schritt 01" in die Ueberschrift hinein. */
.steps{display:grid;gap:1px;margin-top:40px;background:var(--line)}
.step{background:var(--paper);padding:30px;
  display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:30px}
.alt .step{background:var(--mist)}
.step .nr{grid-column:1;grid-row:1/-1;font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--turk-t);letter-spacing:.1em;white-space:nowrap;padding-top:3px}
.step .nr::after{content:"";display:block;width:26px;height:2px;background:var(--turk);margin-top:9px}
.step>:not(.nr){grid-column:2}
.step p{margin-bottom:0;font-size:15.5px;color:var(--muted)}

/* Aufklapper */
.faq{margin-top:30px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:18px;padding:19px 0;
  letter-spacing:-.015em;transition:color .2s var(--ease)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--turk-t)}
/* Der Pfeil ist um 45 Grad gedreht. Dadurch braucht er die Diagonale statt der
   Kantenlaenge an Platz — ohne den Rand rechts staende er 3 px ueber. */
summary::after{content:"";width:13px;height:13px;flex:none;margin:6px 4px 0 0;
  border-right:2px solid var(--turk-t);border-bottom:2px solid var(--turk-t);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 21px;color:var(--muted);font-size:15.5px}

/* Zitat / Merksatz */
.merksatz{border-left:3px solid var(--turk);padding:6px 0 6px 24px;margin:32px 0;
  font-size:1.12rem;line-height:1.58;font-weight:500;color:var(--ink);letter-spacing:-.015em;max-width:60ch}

/* Bildband über volle Breite */
.band{position:relative;height:clamp(260px,38vw,440px);overflow:hidden;background:var(--ink)}
.band img{width:100%;height:100%;object-fit:cover;opacity:.62;object-position:center}

.band .txt{position:absolute;inset:0;display:flex;align-items:center}
.band .txt .wrap{width:100%}
.band h2{color:#fff;max-width:20ch}
.band p{color:#C6CED2;max-width:46ch}
.band .btn{margin-top:24px}

/* --- Bilder gross oeffnen und durchblaettern ------------------------------
   Die Referenzseite beschrieb Bauteile, zeigte sie aber kaum. Jetzt haengt an
   jedem Galeriebild eine Schaltflaeche, die es formatfuellend oeffnet; von dort
   laesst sich mit Pfeiltasten, Wischen oder den Knoepfen weiterblaettern.
   Ohne JavaScript passiert nichts — die Bilder bleiben trotzdem sichtbar. */
.galerie-ref{margin-top:34px}
.galerie .zoom{position:absolute;inset:0;width:100%;height:100%;
  border:0;padding:0;background:none;cursor:zoom-in;-webkit-appearance:none;appearance:none}
.galerie .zoom:focus-visible{outline:3px solid var(--turk);outline-offset:-3px}
.galerie .zoom::after{content:"";position:absolute;right:11px;top:11px;width:32px;height:32px;
  border-radius:50%;background:rgba(15,20,23,.66) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transform:scale(.86);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.galerie figure:hover .zoom::after,.galerie .zoom:focus-visible::after{opacity:1;transform:none}

.lupe{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(8,11,13,.95);padding:clamp(12px,3vw,44px);
  opacity:0;transition:opacity .26s var(--ease)}
.lupe[hidden]{display:none}
.lupe.auf{opacity:1}
.lupe figure{margin:0;display:flex;flex-direction:column;align-items:center;
  max-width:min(1180px,100%);max-height:100%}
.lupe img{display:block;max-width:100%;max-height:calc(100vh - 178px);
  width:auto;height:auto;object-fit:contain;background:#12181B}
.lupe figcaption{margin:18px 0 0;text-align:center;color:#fff;font-size:14.5px;line-height:1.5;
  max-width:60ch}
.lupe .zaehler{display:block;margin-top:7px;color:var(--turk);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.lupe button{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;
  cursor:pointer;display:grid;place-items:center;border-radius:50%;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.lupe button:hover{background:var(--turk);border-color:var(--turk);color:var(--turk-dd)}
.lupe button:focus-visible{outline:3px solid var(--turk);outline-offset:3px}
.lupe button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.lupe-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px}
.lupe-zurueck{left:clamp(8px,2.2vw,30px)}
.lupe-vor{right:clamp(8px,2.2vw,30px)}
.lupe-zu{position:absolute;top:clamp(10px,2vw,26px);right:clamp(10px,2vw,26px);width:46px;height:46px}
@media(max-width:820px){
  /* Auf schmalen Geraeten wuerden die Pfeile ueber dem Bild liegen. Sie wandern
     deshalb unter die Bildunterschrift und stehen dort neben dem Zaehler. */
  .lupe img{max-height:calc(100vh - 250px)}
  .lupe-nav{top:auto;bottom:clamp(12px,4vw,26px);transform:none;width:50px;height:50px}
  .lupe-zurueck{left:auto;right:calc(50% + 42px)}
  .lupe-vor{right:auto;left:calc(50% + 42px)}
  .lupe figcaption{margin-bottom:76px}
}
@media(prefers-reduced-motion:reduce){
  .lupe{transition:none}
  .galerie .zoom::after{transition:none;transform:none}
}

/* --- Karte auf der Kontaktseite (Zwei-Klick) ------------------------------
   Eine direkt eingebettete Karte wuerde die IP-Adresse jedes Besuchers zu
   Google schicken, bevor er irgendetwas angeklickt hat. Dafuer braeuchte es
   eine Einwilligung und damit einen Banner. Deshalb steht hier zuerst eine
   Vorschau im Seitendesign; die echte Karte kommt erst auf Klick. */
.karte{position:relative;margin-top:34px;aspect-ratio:21/9;min-height:340px;
  background:var(--ink);overflow:hidden}
.karte::after{content:"";position:absolute;left:0;bottom:0;width:76px;height:76px;
  border-left:3px solid var(--turk);border-bottom:3px solid var(--turk);
  pointer-events:none;z-index:2}
.karte-vor{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(22px,4vw,48px);gap:15px}
/* Sehr zurueckhaltendes Raster — es soll eine Karte andeuten, nicht auffallen */
.karte-vor::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(13,236,207,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(13,236,207,.055) 1px,transparent 1px);
  background-size:52px 52px}
.karte-vor>*{position:relative}
.karte-vor .ic-gr{width:38px;height:38px;color:var(--turk)}
.karte-vor b{color:#fff;font-size:1.16rem;letter-spacing:-.015em}
.karte-vor p{color:#C6CED2;max-width:52ch;font-size:14.5px;margin:0}
.karte-tasten{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:center;margin-top:4px}
.karte-tasten .more{color:var(--turk);margin-top:0}
.karte-tasten .more:hover{color:#fff}
.karte-fuss{color:#79868C;font-size:12.5px}
.karte-fuss a{color:#C6CED2;text-decoration:underline}
.karte-fuss a:hover{color:var(--turk)}
/* Leichte Entsaettigung, damit die Google-Farben nicht gegen die Seite laufen.
   Bewusst schwach — eine Karte muss lesbar bleiben. */
.karte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.28) contrast(1.04)}
.karte-adresse{margin-top:17px;font-family:var(--mono);font-size:13px;
  color:var(--muted);max-width:none}
.karte-adresse strong{color:var(--text)}
@media(max-width:760px){
  .karte{aspect-ratio:4/3;min-height:0}
  .karte-vor{gap:12px}
  .karte-vor p{font-size:13.5px}
  .karte::after{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){.karte iframe{filter:none}}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.galerie figure{position:relative;overflow:hidden;background:var(--mist)}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s var(--ease)}
.galerie figure:hover img{transform:scale(1.05)}
/* Der Verlauf muss die Schrift auf jedem Motiv tragen. Bei hellen Bildern
   (Werkzeughalter, Siegelringe) reichte die alte Abstufung nicht — dort lag der
   Kontrast unter 4,5:1. Die Abstufung deckt jetzt bis auf Texthoehe ab. */
.galerie figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:24px 16px 13px;
  color:#fff;font-size:12.5px;
  background:linear-gradient(to top,rgba(15,20,23,.95) 0%,rgba(15,20,23,.86) 58%,
    rgba(15,20,23,.45) 82%,transparent 100%)}

/* Abschluss */
.final{background:var(--ink);color:#fff;text-align:center;overflow:hidden;position:relative}
.final::before{content:"";position:absolute;left:50%;top:0;width:1px;height:44px;
  background:linear-gradient(var(--turk),transparent)}
.final h2{color:#fff;margin-bottom:18px}
.final p{color:#B4BDC2;max-width:60ch;margin:0 auto 30px}
/* Kontaktzeile unter dem Abschluss-Knopf. Hiess frueher ebenfalls .sub und
   teilte sich die Klasse mit dem Aufklappmenue der Navigation — mit zwei
   Folgen: Ueber 1200 px erbte sie dessen opacity:0 und war unsichtbar, und
   darunter dessen weissen Grund, was auf dunklem Untergrund wie ein
   Fremdkoerper wirkte. Eigene Klasse, eigene Regeln, kein Erbe. */
.final .kontaktzeile{margin-top:30px;display:flex;gap:14px;
  justify-content:center;flex-wrap:wrap;align-items:stretch}
.final .kontaktzeile a{display:inline-flex;align-items:center;justify-content:center;
  gap:10px;padding:13px 22px;font-size:15px;font-weight:600;
  color:var(--turk);text-decoration:none;
  border:1px solid rgba(255,255,255,.16);
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.final .kontaktzeile a:hover{border-color:var(--turk);background:rgba(13,236,207,.07)}
.final .kontaktzeile .ic{width:17px;height:17px;flex:none}

/* Brotkrumen */
.crumbs{font-family:var(--mono);font-size:11.5px;color:var(--steel);padding:18px 0 0;
  letter-spacing:.05em;text-transform:uppercase}
.crumbs a{color:var(--steel);text-decoration:none}
.crumbs a:hover{color:var(--turk-t)}
.crumbs span{margin:0 9px;opacity:.45}

/* Formular */
/* --- Hinweis anstelle des Formulars -----------------------------------------
   Steht nur, solange der Mailversand nicht auf dem echten Server geprueft ist.
   Bewusst freundlich und nicht nach Stoerung aussehend: Wer hier landet, soll
   zum Telefon greifen, nicht die Seite verlassen. */
.formular-pause{border:1px solid var(--line);border-top:3px solid var(--turk);
  background:var(--mist);padding:clamp(26px,4vw,40px);margin-top:34px;text-align:center}
.formular-pause .ic-gr{width:36px;height:36px;color:var(--turk-t)}
.formular-pause b{display:block;font-size:1.22rem;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin:14px 0 10px}
.formular-pause p{max-width:56ch;margin:0 auto 22px}
.formular-pause-wege{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.formular-pause-hilfe{font-size:14.5px;color:var(--muted);margin:24px auto 0;
  padding-top:20px;border-top:1px solid var(--line);max-width:60ch}
@media(max-width:620px){.formular-pause-wege .btn{width:100%;justify-content:center}}

/* --- Anfrageformular in drei Schritten --------------------------------------
   Vorher lagen alle Felder in einem flachen Raster mit gleichem Abstand — der
   Blick fand keinen Halt. Jetzt bilden Kontakt, Bauteil und Details je einen
   eigenen Block mit Nummer, Ueberschrift und ruhiger Flaeche darum. Die Farbe
   der Kopfleiste wandert von hellem Tuerkis zu dunklem: Das liest sich als
   Fortschritt, ohne bunt zu werden. */
.form{margin-top:34px}
.form .full{grid-column:1/-1}

.schritt{border:1px solid var(--line);background:var(--mist);
  padding:clamp(22px,3vw,32px);margin:0 0 20px;position:relative;overflow:hidden;
  /* Ohne min-width:0 weigert sich ein fieldset zu schrumpfen — lange Platzhalter
     in den Eingabefeldern wuerden das Raster auseinanderdruecken. */
  min-width:0}
.schritt::before{content:"";position:absolute;left:0;top:0;right:0;height:3px}
.s1::before{background:var(--turk)}
.s2::before{background:var(--turk-d)}
.s3::before{background:var(--turk-t)}

.schritt legend{display:block;width:100%;padding:0;margin:0 0 22px;float:none}
/* Haelt die schwebende Nummer im Kopf des Schritts, damit sie nicht in die
   Felder darunter rutscht. */
.schritt legend::after{content:"";display:block;clear:both}
.schritt .nr{float:left;width:34px;height:34px;margin:2px 15px 0 0;
  display:grid;place-items:center;font-family:var(--mono);font-size:15px;font-weight:700}
.s1 .nr{background:var(--turk);color:var(--turk-dd)}
.s2 .nr{background:var(--turk-d);color:var(--turk-dd)}
.s3 .nr{background:var(--turk-t);color:#fff}
.schritt legend b{display:block;font-size:1.16rem;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);line-height:1.25}
.schritt legend i{display:block;font-style:normal;font-size:14.5px;color:var(--muted);
  margin-top:3px}

.felder{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}

/* Auswahl der Kennzeichnungsart: aus neun eng stehenden Haken werden
   anklickbare Felder, die zeigen, was gewaehlt ist. */
.feldtitel{display:block;font-size:13px;font-weight:600;font-family:var(--mono);
  letter-spacing:.07em;text-transform:uppercase;color:#3A4348;margin-bottom:10px}
.feldtitel em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;
  font-family:var(--sans);color:var(--muted);font-size:13.5px}
.feldtitel .req{color:var(--turk-t)}
.artwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:9px}
.artwahl .check{background:#fff;border:1px solid var(--line);padding:11px 13px;
  align-items:center;gap:10px;cursor:pointer;font-size:14.5px;
  transition:border-color .18s var(--ease),background .18s var(--ease)}
.artwahl .check:hover{border-color:var(--turk-d)}
.artwahl .check:has(input:checked){border-color:var(--turk-t);background:rgba(13,236,207,.1)}
.artwahl .check input{margin-top:0}
.artwahl .check,.absenden .check{margin-bottom:0}

.absenden{border:1px solid var(--line);border-top:3px solid var(--ink);
  background:#fff;padding:clamp(22px,3vw,32px)}
.absenden>.check{margin-bottom:22px}
.absenden .btn{width:100%;justify-content:center}
.zusage{margin:16px 0 0;font-size:13.5px;color:var(--muted);max-width:none}

@media(max-width:760px){
  .felder{grid-template-columns:1fr;gap:20px}
  .artwahl{grid-template-columns:1fr}
  .schritt{margin-bottom:16px}
}
label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;
  font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#3A4348}
label .req{color:var(--turk-t)}
input,select,textarea{width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--rad);font:inherit;font-size:15.5px;background:#fff;color:var(--text);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
input:focus,select:focus,textarea:focus{border-color:var(--turk);outline:none;
  box-shadow:0 0 0 3px rgba(13,236,207,.2)}
textarea{min-height:140px;resize:vertical}
.hint{font-size:13px;color:var(--steel);margin-top:6px;text-transform:none;
  font-family:var(--sans);letter-spacing:0}
.check{display:flex;gap:11px;align-items:flex-start;font-size:15px;font-weight:400;
  font-family:var(--sans);text-transform:none;letter-spacing:0;color:var(--text)}
.check input{width:auto;margin-top:4px;flex-shrink:0;accent-color:var(--turk-t)}
.hp{position:absolute;left:-9999px}
.ok,.err{padding:17px 19px;margin-bottom:24px;font-size:15.5px;border-radius:var(--rad)}
.ok{background:#E9FBF7;border:1px solid var(--turk);color:#065247}
.err{background:#FDEBEB;border:1px solid #E3A2A2;color:#8A2222}

/* Fußzeile */
footer{background:var(--ink);color:#8E999E;font-size:14.5px;padding:64px 0 30px;
  border-top:3px solid var(--turk)}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:17px;font-weight:600}
footer ul{list-style:none;margin:0}
footer li{margin-bottom:9px}
/* Downloads stehen unter der letzten Spalte, abgesetzt durch eine feine Linie.
   Der Verweis traegt das Pfeil-nach-unten-Symbol, damit er als Aktion und nicht
   als weitere Seite gelesen wird. */
footer .fdl{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}
footer .dl a{display:inline-flex;align-items:center;gap:9px;color:var(--turk)}
footer .dl a:hover{color:#fff}
footer .dl .ic{width:16px;height:16px;flex:none;--ac:var(--turk)}
footer .dl a:hover .ic{--ac:#fff}
footer a{text-decoration:none;transition:color .18s var(--ease)}
footer a:hover{color:var(--turk)}
footer p{margin-bottom:15px}
/* Fusszeilen-Logo: Negativfassung, damit der schwarze Kasten nicht im
   fast schwarzen Untergrund verschwindet. Die Bilddatei ist dieselbe Marke,
   nur fuer dunkle Flaechen abgeleitet. */
footer .logo-fuss{display:inline-block;margin-bottom:20px;line-height:0}
footer .logo-fuss img{height:52px;width:auto;display:block;
  transition:opacity .18s var(--ease)}
footer .logo-fuss:hover img{opacity:.78}
.fb{border-top:1px solid rgba(255,255,255,.09);margin-top:44px;padding-top:22px;
  font-size:13.5px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}
.fb a{margin-right:16px}


/* ================================================================ Unterseiten
   Bausteine, die der Konverter automatisch setzt, damit die Unterseiten nicht
   als reine Textwueste erscheinen. */

/* Häkchenliste mit durchgehender Linie — fuer Aufzaehlungen von Vorteilen */
ul.liste{list-style:none;margin:26px 0 24px;padding:0;position:relative}
ul.liste::before{content:"";position:absolute;left:11px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(var(--turk),rgba(13,236,207,.18))}
ul.liste li{position:relative;padding:0 0 0 44px;margin-bottom:16px;max-width:66ch}
ul.liste li::marker{content:""}
ul.liste li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;
  border-radius:50%;background:var(--turk-t);
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/72% no-repeat,
  linear-gradient(#000,#000);
  mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/72% no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;
  box-shadow:0 0 0 1px rgba(6,122,105,.25) inset}
ul.liste li strong:first-child{display:block;margin-bottom:2px}

/* Absatzgruppen als Karten (aus "**Titel**" + Absatz) */
/* Die Trennlinien entstanden frueher dadurch, dass der graue Untergrund des
   Rasters durch 1 px schmale Spalten schien. Blieb die letzte Reihe unvollstaendig,
   wurde daraus ein breiter grauer Balken. Jetzt zeichnet jede Kachel ihre eigene
   Umrandung — leere Rasterfelder bleiben unsichtbar. */
.kartenraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:1px;margin:32px 0}
.kartenraster>div{background:var(--paper);padding:28px 26px;
  box-shadow:0 0 0 1px var(--line);transition:background .25s var(--ease)}

/* Fuenf Kacheln ergaeben in vier Spalten eine fast leere zweite Reihe. Ueber ein
   Sechs-Spalten-Raster stehen sie als 3 + 2 und fuellen die Breite vollstaendig.
   Ab 858 px reicht der Platz dafuer: 806 px Inhaltsbreite ergeben bei Doppelspalte
   genau die 268 px Mindestbreite einer Kachel. */
@media(min-width:858px){
  .kartenraster:has(>div:nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  .kartenraster:has(>div:nth-child(5):last-child)>div{grid-column:span 2}
  .kartenraster:has(>div:nth-child(5):last-child)>div:nth-child(n+4){grid-column:span 3}
}
/* Darunter stehen hoechstens zwei Kacheln nebeneinander — dann laeuft die fuenfte
   ueber die volle Breite, statt allein in einer halben Reihe zu stehen. */
@media(max-width:857px){
  .kartenraster:has(>div:nth-child(5):last-child)>div:nth-child(5){grid-column:1/-1}
}
.alt .kartenraster>div{background:var(--mist)}
.kartenraster>div:hover{background:var(--mist)}
.alt .kartenraster>div:hover{background:#fff}
.kartenraster h3{margin-bottom:8px}
.kartenraster h3::before{content:"";display:block;width:26px;height:3px;
  background:var(--turk);margin-bottom:14px}
.kartenraster p{margin:0;font-size:15.5px;color:var(--muted)}

/* Geschäftsführung */
.personen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:28px;margin:34px 0;max-width:720px}
.person{margin:0;position:relative}
.person img{width:100%;aspect-ratio:4/4.5;object-fit:cover;object-position:center 22%;
  filter:grayscale(.15);transition:filter .4s var(--ease)}
.person:hover img{filter:none}
.person figcaption{padding-top:16px;border-top:2px solid var(--turk);margin-top:14px}
.person b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.person i{display:block;font-style:normal;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--turk-t);margin:5px 0 9px}
.person span{display:block;font-size:14px;color:var(--muted);line-height:1.5}

/* Bild neben Text, vom Konverter eingesetzt */
/* minmax(0,1fr) statt 1fr: Sonst kann eine breite Tabelle die Spalte aufdruecken,
   weil 1fr nicht unter die Mindestbreite des Inhalts schrumpft. */
.bildblock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center;margin:8px 0}
.bildblock.rechts>figure{order:2}
.bildblock figure{margin:0}
.bildblock img{width:100%}

/* Bildband mit Parallaxe */
.band img{transition:transform .1s linear;will-change:transform}

/* Unterhalb von 900 px liegt der Text über dem Bild statt daneben und braucht
   mehr Höhe, als die feste Bandhöhe hergibt. Zusammen mit overflow:hidden
   wurde er dann unten abgeschnitten — auf schmalen Geräten fehlte der Knopf.
   Hier wächst das Band deshalb mit seinem Inhalt, das Bild füllt es als
   Hintergrund. Die Parallaxe verschiebt es um 26 px und skaliert auf 114 %;
   dieser Überstand deckt die Bewegung weiterhin ab, es entsteht kein Spalt. */
@media(max-width:899px){
  .band{height:auto;min-height:clamp(230px,34vw,320px)}
  .band img{position:absolute;inset:0}
  /* Der Wert ist bewusst grosszuegig: Der Abstand muss auch dort tragen, wo
     der Text drei Zeilen braucht — sonst klebt der Knopf am unteren Rand.
     Untergrenze 56px, damit auf schmalen Telefonen nicht 11vw davon uebrig
     bleiben und es wieder eng wird. */
  .band .txt{position:relative;padding:clamp(56px,11vw,78px) 0}
}
.band .txt{background:linear-gradient(90deg,
  var(--ink) 0%,var(--ink) 38%,rgba(15,20,23,.7) 48%,rgba(15,20,23,.1) 64%,rgba(15,20,23,0) 76%)}
.band .txt .wrap>*{max-width:44%}
@media(max-width:899px){
  .band .txt{background:linear-gradient(90deg,rgba(15,20,23,.94) 10%,rgba(15,20,23,.6) 55%,rgba(15,20,23,.25))}
  .band .txt .wrap>*{max-width:none}
}

/* Lesefortschritt am oberen Rand */
.fortschritt{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);
  transform-origin:left;background:var(--turk);z-index:70;pointer-events:none}

/* Zahlenstreifen auf Unterseiten */
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;margin:34px 0}
.fakten>div{background:var(--paper);padding:26px 22px;box-shadow:0 0 0 1px var(--line)}
.alt .fakten>div{background:var(--mist)}
.fakten b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--turk-t);
  font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fakten span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.5}

@media(max-width:820px){
  .bildblock{grid-template-columns:1fr;gap:28px}
  .bildblock.rechts>figure{order:0}
}

/* ---------------------------------------------------------------- Bewegung */
/* Inhalte werden NUR dann versteckt, wenn die Klasse "anim" gesetzt ist. Die setzt
   ein Skript im Kopf der Seite. Ohne JavaScript — oder wenn beim Skript etwas
   schiefgeht — bleibt der Text sichtbar. Ein unsichtbarer Absatz waere der
   schlimmere Fehler als eine fehlende Animation. */
html.anim .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.anim .reveal.da{opacity:1;transform:none}
html.anim .reveal.v2{transition-delay:.09s}
html.anim .reveal.v3{transition-delay:.18s}
html.anim .reveal.v4{transition-delay:.27s}
html.anim .reveal.v5{transition-delay:.36s}
html.anim .reveal.v6{transition-delay:.45s}

/* ---------------------------------------------------------------- Schmale Geräte */
/* Nachgemessen: Logo (142) + Menue (756) + Schaltflaeche (187) + Abstaende (40)
   ergeben 1125 px. Mit dem Innenabstand der Inhaltsspalte braucht die volle
   Kopfzeile damit ein Fenster von rund 1190 px. Der Umschaltpunkt lag frueher bei
   1140 px — dazwischen war die Zeile ueberfuellt, was das Logo zusammengedrueckt
   hat. Deshalb jetzt 1200 px. */
@media(max-width:1200px){
  .menu{display:none}
  .menu.open{display:block;position:absolute;top:78px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);padding:12px var(--gut) 22px;
    box-shadow:0 16px 34px rgba(15,20,23,.12);max-height:76vh;overflow-y:auto}
  .menu.open>li>a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menu.open>li>a::after{display:none}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;padding:2px 0 10px 15px;min-width:0}
  .burger{display:block}
  .g3,.g4,.usp,.fg,.galerie{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:34px}
  .stats .g{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid rgba(255,255,255,.08)}
  section{padding:64px 0}
  .hero .wrap{padding-top:86px;padding-bottom:86px}
}
@media(max-width:760px){
  .nav>.btn{padding:11px 16px;font-size:14px}
  .nav{gap:12px}
  .bildrahmen::after{display:none}
}
@media(max-width:620px){
  body{font-size:16.5px}
  :root{--gut:18px}
  .g2,.g3,.g4,.usp,.fg,.galerie{grid-template-columns:1fr}
  .stats .g{grid-template-columns:1fr}
  .stat{padding:30px 18px}
  /* Auf schmalen Geraeten steht die Schrittnummer ueber der Ueberschrift */
  .step{padding:26px 22px;grid-template-columns:minmax(0,1fr)}
  .step .nr{grid-column:1;grid-row:auto;margin-bottom:12px;padding-top:0}
  .step>:not(.nr){grid-column:1}
  .nav>.btn{display:none}
  .logo{font-size:1.08rem}
  .hero .wrap{padding-top:64px;padding-bottom:64px}
  section{padding:52px 0}
  .final .kontaktzeile{flex-direction:column;gap:10px}
  .final .kontaktzeile a{width:100%}
}


/* ================================================================ Bildfreiraum
   Steht am Ende, damit diese Regeln die frueheren Breitenangaben ueberschreiben.

   Problem: Die Motive fuellen das Bild fast vollstaendig aus. Nur den Ausschnitt zu
   verschieben half nicht, weil bei dieser Bildbreite gar nicht seitlich beschnitten
   wird. Loesung: Der Text bekommt eine eigene Spalte, das Bauteil steht daneben. */

@media(min-width:1000px){
  /* Das Bild bleibt vollflaechiger Hintergrund — das wirkt deutlich besser als eine
     geteilte Flaeche. Damit das Bauteil trotzdem sichtbar bleibt, raeumt der Text die
     rechte Haelfte frei und der Verlauf laeuft dorthin aus.
     Die Ueberschrift ist etwas kleiner gesetzt, sonst braechen lange Woerter wie
     "Bauteilkennzeichnung" mitten im Wort um. */
  .hero>img{object-position:56% center}
  .hero .in{max-width:min(640px,52%)}
  .hero h1{font-size:clamp(1.9rem,3.4vw,2.95rem)}
  .hero::after{background:linear-gradient(95deg,
    rgba(15,20,23,.96) 0%,rgba(15,20,23,.9) 32%,rgba(15,20,23,.5) 50%,
    rgba(15,20,23,.12) 66%,rgba(15,20,23,0) 80%)}

  /* Bildband nach demselben Prinzip */
  .band .txt{background:linear-gradient(95deg,
    rgba(15,20,23,.95) 0%,rgba(15,20,23,.88) 30%,rgba(15,20,23,.45) 48%,
    rgba(15,20,23,.08) 64%,rgba(15,20,23,0) 78%)}
  .band .txt .wrap>*{max-width:min(560px,46%)}
}

@media print{header,footer,.hinweis,.cta-row,.final{display:none}
  .hero{background:none;color:#000}.hero>img,.hero::after{display:none}}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto}
  html.anim .reveal,.reveal{opacity:1!important;transform:none!important}
  .hero>img{transform:none}
}