/* Schriften direkt eingebettet statt per @import: der Import war eine
   serielle Kette aus zwei renderblockierenden Requests. Quelldatei
   bleibt assets/fonts/fonts.css. */
/* Geist 300 700 latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist 300 700 latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/geist-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono 400 latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono 400 latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono 500 latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono 500 latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/geist-mono-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Young Serif 400 latin-ext */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/young-serif-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Young Serif 400 latin */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/young-serif-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   Fliesen Meßing - Designsystem
   Travertin (Kalkstein, hell und warm) + Bordeaux (aus dem echten Logo-Rot
   abgeleitet und auf AA-Kontrast vertieft) + Messing als reine Haarlinie,
   ein Wink auf den Firmennamen. Ein Theme, hell, durchgehend.
   Radius-Lock: 2px klein, 4px gross. Nichts Rundes, Kanten wie Fliesenkanten.
   ========================================================================== */

:root{
  /* Flaechen */
  --paper:#F6F2EA;        /* Travertin, Grundton der ganzen Seite */
  --paper-2:#EDE6D8;      /* tiefere Bahn fuer Rhythmus */
  --paper-3:#E3DACA;      /* Kanten, Trennflaechen */
  --card:#FFFCF7;         /* Kartenflaeche, eine Stufe heller als Papier */
  --graphite:#26272B;     /* die eine dunkle Kontrastflaeche + Footer */
  --graphite-2:#1D1E21;

  /* Tinte */
  --ink:#1A1A1C;
  --ink-soft:rgba(26,26,28,.70);
  /* .52 ergab auf Travertin nur 3,45:1 und wird fuer Feldhinweise, Dropdown-
     Untertitel und Breadcrumbs in 12 px genutzt. .62 bringt 4,7:1 (AA). */
  --ink-dim:rgba(26,26,28,.62);
  --paper-soft:rgba(246,242,234,.76);
  --paper-dim:rgba(246,242,234,.55);

  /* Akzent: EINE Akzentfarbe fuer die ganze Seite */
  --bordeaux:#8E1C24;
  --bordeaux-deep:#6E141B;
  --bordeaux-light:#D98A90;   /* nur auf dunklem Grund */
  --bordeaux-wash:rgba(142,28,36,.08);

  /* Messing: Haarlinien, Rahmen, kleine Marken. Als Text nur auf dunklem
     Grund, dort erreicht die helle Stufe 7,4:1 auf #26272B. */
  --brass:#B08A4A;
  --brass-light:#E4C58E;
  --brass-soft:rgba(176,138,74,.34);

  --line:rgba(26,26,28,.13);
  --line-2:rgba(26,26,28,.08);
  --line-dark:rgba(246,242,234,.16);

  --font-display:'Young Serif', Georgia, serif;
  --font-body:'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:'Geist Mono', ui-monospace, monospace;

  --r:2px;
  --r-md:4px;

  --shadow:0 26px 60px -34px rgba(26,26,28,.42);
  --shadow-sm:0 12px 30px -20px rgba(26,26,28,.36);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
/* Browser-Voreinstellung ist margin:1em 40px. Das schob die Videokacheln
   40 px nach rechts aus ihrer Rasterspalte. */
figure,figcaption,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--bordeaux);color:#fff}

h1,h2,h3,h4{
  font-family:var(--font-display);font-weight:400;line-height:1.12;
  margin:0;letter-spacing:-.012em;color:var(--ink);
}
/* Young Serif hat nur einen Schnitt. Hierarchie laeuft ueber Groesse und Farbe. */

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--bordeaux);outline-offset:3px;border-radius:var(--r);
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 clamp(1.15rem,4vw,2.75rem)}
.wrap-wide{max-width:1420px}
.section{padding:clamp(4rem,8.5vw,7.5rem) 0;position:relative}
.section-tight{padding:clamp(3rem,6vw,5rem) 0}
section[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.band-2{background:var(--paper-2)}
.band-dark{background:var(--graphite);color:var(--paper)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--paper)}
.band-dark .lede,.band-dark p{color:var(--paper-soft)}

.maxw-sm{max-width:34rem}
.maxw{max-width:44rem}
.mt-1{margin-top:.7rem}.mt-2{margin-top:1.35rem}.mt-3{margin-top:2.2rem}.mt-4{margin-top:3.4rem}
/* Fuer Einleitungen, auf die direkt eine weitere Sektion folgt: sonst
   addieren sich zwei volle Innenabstaende zu einem Loch. */
.pb-0{padding-bottom:0}

/* ---------- Typo-Skalen ---------- */
.h-xl{font-size:clamp(2.35rem,6vw,4.15rem);line-height:1.05}
.h-lg{font-size:clamp(1.95rem,4.2vw,3.05rem);line-height:1.09}
.h-md{font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.16}
.h-sm{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.24}
.lede{font-size:clamp(1.03rem,1.25vw,1.14rem);color:var(--ink-soft);line-height:1.72}
.small{font-size:.9rem;color:var(--ink-soft)}
.accent{color:var(--bordeaux)}
.band-dark .accent{color:var(--bordeaux-light)}

/* Kleines Label, bewusst rationiert eingesetzt */
.tag{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bordeaux);
}
.tag::before{content:"";width:1.6rem;height:1px;background:var(--brass)}
.band-dark .tag{color:var(--bordeaux-light)}

.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-brass{height:1px;background:var(--brass-soft);border:0;margin:0}

/* ---------- Icons ---------- */
.ico{width:1.25em;height:1.25em;fill:currentColor;flex:none;vertical-align:-.22em}
.ico-lg{width:1.65rem;height:1.65rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:var(--r);
  font-size:.875rem;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.btn .ico{width:1.05rem;height:1.05rem;transition:transform .3s var(--ease)}
.btn:hover .ico{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}

/* Weiss auf #8E1C24 = 8,1:1 */
.btn-primary{background:var(--bordeaux);color:#fff}
.btn-primary:hover{background:var(--bordeaux-deep)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-outline{border-color:var(--line);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--bordeaux);color:var(--bordeaux);background:var(--bordeaux-wash)}
/* Ueberall dort umgekehrt, wo der Button auf dunklem Grund steht. Der Hero
   gehoert seit dem hellen Tunnel nicht mehr dazu. */
.band-dark .btn-outline,.cta .btn-outline,.pagehead .btn-outline,
.photoband .btn-outline{
  border-color:rgba(246,242,234,.42);color:var(--paper);
  background:rgba(246,242,234,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.band-dark .btn-outline:hover,.cta .btn-outline:hover,.pagehead .btn-outline:hover,
.photoband .btn-outline:hover{
  border-color:var(--paper);color:var(--paper);background:rgba(246,242,234,.16)
}
.btn-wide{width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.875rem;font-weight:500;color:var(--bordeaux);
  border-bottom:1px solid var(--brass-soft);padding-bottom:2px;
  transition:border-color .25s var(--ease),gap .25s var(--ease);
}
.link-arrow:hover{border-color:var(--bordeaux);gap:.7rem}
.link-arrow .ico{width:.95rem;height:.95rem}
.band-dark .link-arrow{color:var(--bordeaux-light)}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
  border-bottom:1px solid transparent;
}
.nav-inner{display:flex;align-items:center;gap:1.5rem;width:100%}
.nav.is-solid,.nav.scrolled,.nav.menu-open{
  background:rgba(246,242,234,.94);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-2);
}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto}

.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-link{
  position:relative;padding:.55rem .72rem;border-radius:var(--r);
  font-size:.855rem;font-weight:450;color:var(--ink);
  transition:color .2s var(--ease);
}
.nav-link::after{
  content:"";position:absolute;left:.72rem;right:.72rem;bottom:.3rem;height:1px;
  background:var(--bordeaux);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--bordeaux)}

/* Die helle Leisten-Variante des alten dunklen Heros ist mit dem hellen
   Tunnel entfallen; die Leiste steht durchgehend in Tinte. */

/* Dropdown Leistungen */
.has-drop{position:relative}
.has-drop>.nav-link{display:inline-flex;align-items:center;gap:.28rem}
.has-drop>.nav-link .ico{width:.8rem;height:.8rem;transition:transform .25s var(--ease)}
.has-drop:hover>.nav-link .ico,.has-drop:focus-within>.nav-link .ico{transform:rotate(180deg)}
.has-drop::before{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);
  min-width:16.5rem;padding:.5rem;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-md);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:all .26s var(--ease);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{
  display:flex;flex-direction:column;gap:.1rem;padding:.6rem .75rem;border-radius:var(--r);
  font-size:.855rem;color:var(--ink);transition:background .2s,color .2s;
}
.drop a span{font-size:.75rem;color:var(--ink-dim)}
.drop a:hover{background:var(--bordeaux-wash);color:var(--bordeaux)}
.drop a:hover span{color:var(--bordeaux)}

.nav-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.nav-phone{
  display:inline-flex;align-items:center;gap:.42rem;
  font-size:.855rem;font-weight:500;font-variant-numeric:tabular-nums;
  padding:.5rem .55rem;border-radius:var(--r);
}
.nav-phone .ico{width:1rem;height:1rem;color:var(--bordeaux)}
.nav .btn{padding:.72rem 1.15rem;font-size:.83rem}

/* flex-direction:column ist zwingend: als Zeile stehen die drei Striche
   nebeneinander statt uebereinander. */
.burger{
  display:none;flex-direction:column;width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r);background:rgba(246,242,234,.9);
}
.burger span{display:block;width:19px;height:1.5px;flex:none;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:70;background:var(--paper);
  padding:1.6rem clamp(1.15rem,5vw,2rem) 2.5rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-menu a{display:block;padding:.85rem 0;font-size:1.28rem;
  font-family:var(--font-display);border-bottom:1px solid var(--line-2)}
.mobile-menu .msub a{font-family:var(--font-body);font-size:.95rem;
  padding:.6rem 0 .6rem 1.1rem;color:var(--ink-soft);border-bottom:none}
.msub{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.msub.open{max-height:26rem}
.mobile-menu .btn{margin-top:1.5rem}
body.no-scroll{overflow:hidden}

/* Scroll-Fortschritt: zeigt Leselaenge auf den langen Leistungsseiten */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--bordeaux);z-index:90}

/* ==========================================================================
   Hero (Startseite) - asymmetrischer Split
   ========================================================================== */
/* ==========================================================================
   Hero: begehbarer Fliesentunnel

   Statt Kartenreihen ueber einem abgedunkelten Video laeuft hier eine einzige
   WebGL-Flaeche: die Kamera faehrt durch einen gefliesten Tunnel, dessen
   Waende, Boden und Decke mit unseren Motiven belegt sind. Fuer einen
   Fliesenleger ist das kein beliebiger Effekt, sondern das eigene Gewerk als
   Raum.

   Zwei Dinge daran sind bewusst gesetzt:
   - Der Grund ist Travertin, nicht Schwarz. Der Hero traegt damit dieselbe
     Farbe wie der Rest der Seite, die Schrift steht dunkel darauf.
   - Die Bewegung liegt vollstaendig auf der GPU. Die vorherige Loesung musste
     dreissig gedrehte, maskierte DOM-Karten pro Bild neu setzen, das ruckelte.
   ========================================================================== */
.hero{position:relative;min-height:100dvh;overflow:hidden;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 1.5rem) 0 2.4rem}

/* Fallback-Grund: liegt unter der Canvas und traegt den Hero auch dann,
   wenn WebGL fehlt oder das Geraet reduzierte Bewegung meldet. */
.hero-tunnel{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 46%,#FFFDF8 0%,var(--paper) 42%,var(--paper-2) 100%),
    var(--paper)}
.hero-tunnel canvas{display:block;width:100%;height:100%;
  opacity:0;transition:opacity .9s var(--ease)}
.hero-tunnel.is-live canvas{opacity:1}

/* Heller Schleier zur Mitte hin: die Fluchtpunkt-Perspektive zieht das Auge
   ohnehin nach innen, die Schrift bekommt dort ihren ruhigen Grund. */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 44% 38% at 50% 47%,rgba(246,242,234,.90) 0%,
      rgba(246,242,234,.74) 42%,rgba(246,242,234,.28) 70%,rgba(246,242,234,0) 88%),
    linear-gradient(to bottom,rgba(246,242,234,.88) 0%,rgba(246,242,234,0) 24%,
      rgba(246,242,234,0) 60%,rgba(246,242,234,.78) 84%,rgba(246,242,234,.96) 100%)}

.hero-center{position:relative;z-index:3;max-width:52rem;margin:0 auto;
  text-align:center;padding:0 1.25rem}
/* Zweite, engere Aufhellung direkt unter dem Textblock. Der grosse Schleier
   allein muesste so dicht sein, dass der Tunnel verschwindet. So bleibt die
   Flaeche lebendig und die Schrift steht trotzdem auf ruhigem Grund, egal
   welches Motiv gerade durchlaeuft. */
.hero-center::before{content:"";position:absolute;z-index:-1;
  inset:-4.5rem -6rem -3.5rem;pointer-events:none;
  background:radial-gradient(60% 58% at 50% 50%,rgba(246,242,234,.93) 0%,
    rgba(246,242,234,.82) 48%,rgba(246,242,234,.38) 76%,rgba(246,242,234,0) 100%)}
.hero-center .tag{color:var(--bordeaux);justify-content:center}
.hero-center .tag::before,.hero-center .tag::after{content:"";width:1.9rem;height:1px;
  background:var(--brass)}

.hero h1{margin-top:1.5rem;color:var(--ink);
  font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.04;letter-spacing:-.018em}
/* Zeilenweise Maske fuer den Eintritt. padding-bottom haelt Unterlaengen
   (das g in Fuge) frei, sonst schneidet der overflow sie ab. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .ln>span{display:block}
.hero-sub{margin:1.5rem auto 0;font-size:clamp(1.04rem,1.25vw,1.19rem);
  color:var(--ink-soft);line-height:1.66;max-width:38rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.4rem;justify-content:center}

/* Hero-Eintritt in reinem CSS. Die Ueberschrift und die Subline sind die
   LCP-Kandidaten; vorher setzte JS sie auf opacity:0 und Motion blendete
   ein. Damit wartete der groesste Paint auf motion.js und main.js, auf
   mobilem Netz mehrere Sekunden. CSS-Animationen starten mit dem ersten
   Frame, voellig unabhaengig von JS; faellt JS aus, laeuft der Eintritt
   trotzdem. Nur der Hero laeuft ueber CSS, Scroll-Reveals darunter bleiben
   bei Motion. */
@media (prefers-reduced-motion: no-preference){
  .hero h1 .ln>span{transform:translateY(106%);
    animation:hero-ln .9s cubic-bezier(.16,1,.3,1) .12s forwards}
  .hero h1 .ln:nth-child(2)>span{animation-delay:.21s}
  .hero [data-hero]{opacity:0;transform:translateY(14px);
    animation:hero-in .65s cubic-bezier(.16,1,.3,1) .26s forwards}
  .hero .hero-sub[data-hero]{animation-delay:.3s}
  .hero .hero-actions[data-hero]{animation-delay:.38s}
  .hero .hero-meta[data-hero]{animation-delay:.46s}
}
@keyframes hero-ln{to{transform:translateY(0)}}
@keyframes hero-in{to{opacity:1;transform:translateY(0)}}
/* Der Zweitbutton steht als einziges Element direkt auf der bewegten Flaeche.
   Eine 13-Prozent-Linie reicht dort nicht, er braucht eine eigene Platte. */
.hero .btn-outline{background:rgba(255,252,247,.88);border-color:rgba(26,26,28,.22);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn-outline:hover{background:var(--card);border-color:var(--bordeaux);
  color:var(--bordeaux)}

/* Leistungszeile als eigene Leiste am Hero-Fuss. Frei ueber dem Tunnel kam
   sie im ungueenstigsten Moment auf 2,8:1, weil dort dunkle Motive
   durchlaufen. Die halbdeckende Travertinleiste loest das nicht per Schleier,
   sondern als Kante: sie schliesst den Hero unten sauber ab und fuehrt ins
   naechste Band ueber. */
.hero-meta{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.75rem;padding:.85rem 1.25rem;
  background:rgba(246,242,234,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--brass-soft);
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.hero-meta i{width:3px;height:3px;border-radius:50%;background:var(--brass);
  transform:rotate(45deg);border-radius:0}

@media (max-width:640px){
  .hero-meta{gap:.5rem;font-size:.6rem;letter-spacing:.1em}
  /* Schmale Viewports zeigen mehr Tunnelwand hinter der Schrift, der Kern
     der Aufhellung muss entsprechend breiter greifen. */
  .hero-center::before{inset:-3.5rem -2.5rem -3rem;
    background:radial-gradient(72% 56% at 50% 50%,rgba(246,242,234,.90) 0%,
      rgba(246,242,234,.78) 50%,rgba(246,242,234,.32) 78%,rgba(246,242,234,0) 100%)}
  .hero-veil{background:
    radial-gradient(ellipse 70% 34% at 50% 46%,rgba(246,242,234,.86) 0%,
      rgba(246,242,234,.74) 44%,rgba(246,242,234,.32) 72%,rgba(246,242,234,0) 90%),
    linear-gradient(to bottom,rgba(246,242,234,.88) 0%,rgba(246,242,234,0) 22%,
      rgba(246,242,234,0) 66%,rgba(246,242,234,.72) 86%,rgba(246,242,234,.96) 100%)}
}

main > section:not(:first-child){content-visibility:auto;contain-intrinsic-size:auto 700px}

/* ---------- Seitenkopf der Unterseiten ---------- */
.pagehead{position:relative;min-height:clamp(360px,50vh,520px);display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 2rem);padding-bottom:clamp(2.4rem,4.5vw,3.6rem);overflow:hidden}
.pagehead-media{position:absolute;inset:0;z-index:0}
.pagehead-media img,.pagehead-media video{width:100%;height:100%;object-fit:cover}
.pagehead-media::after{
  content:"";position:absolute;inset:0;
  /* Der Verlauf traegt drei Textebenen: Brotkrumen, Ueberschrift, Einleitung.
     Mit dem alten Aufbau (.55 auf halber Hoehe) lagen die Brotkrumen ueber
     hellen Motiven bei 2,4:1. Die Mitte ist jetzt deutlich dichter, oben
     bleibt es offen, damit das Foto nicht zur grauen Flaeche wird. */
  background:linear-gradient(to top,rgba(18,18,20,.92) 0%,rgba(18,18,20,.85) 30%,
             rgba(18,18,20,.80) 56%,rgba(18,18,20,.42) 82%,rgba(18,18,20,.24) 100%);
}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{color:var(--paper);font-size:clamp(2.1rem,4.6vw,3.35rem);max-width:20ch}
.pagehead .lede{color:rgba(246,242,234,.93);max-width:44ch;margin-top:1rem}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:1.1rem;
  /* Volle Deckkraft statt gedimmter Schrift. Die Abstufung zur Ueberschrift
     macht die Schriftgroesse, nicht die Transparenz: ausgeduennte helle
     Schrift auf einem Foto ist genau die Stelle, an der AA kippt. */
  font-size:.79rem;color:var(--paper);text-shadow:0 1px 10px rgba(12,12,14,.55)}
.crumb a:hover{color:var(--paper);text-decoration:underline}
.crumb .ico{width:.72rem;height:.72rem;opacity:.6}

/* ==========================================================================
   Fakten-Zeile (ohne Karten, nur Linien)
   ========================================================================== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2)}
.fact{background:var(--paper);padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1rem,2vw,1.7rem)}
.fact-k{font-family:var(--font-display);font-size:clamp(1.85rem,3vw,2.6rem);
  line-height:1;color:var(--bordeaux);font-variant-numeric:tabular-nums}
.fact-l{margin-top:.5rem;font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.band-2 .fact{background:var(--paper-2)}

/* ==========================================================================
   Leistungen - Bento mit exakter Zellenzahl
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.85rem,1.4vw,1.15rem)}
.svc{
  position:relative;grid-column:span 2;min-height:270px;
  border-radius:var(--r-md);overflow:hidden;background:var(--graphite);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.45rem;color:var(--paper);isolation:isolate;
}
.svc--wide{grid-column:span 3;min-height:330px}
.svc--tall{grid-column:span 3;min-height:330px}
.svc--full{grid-column:span 6;min-height:250px}
.svc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease)}
/* Der Verlauf muss die Schrift auch auf sehr hellen Motiven tragen. Die
   Lesezone unten ist deshalb deutlich dichter, oben bleibt das Bild offen. */
.svc::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(13,12,11,.93) 0%,rgba(13,12,11,.80) 24%,
             rgba(13,12,11,.48) 50%,rgba(13,12,11,.14) 78%,transparent 100%)}
/* Die breite, flache Kachel hat weniger Hoehe, dort muss der Verlauf frueher
   greifen, sonst steht die Schrift im hellen Teil. */
.svc--full::after{background:linear-gradient(to top,rgba(13,12,11,.94) 0%,
  rgba(13,12,11,.86) 38%,rgba(13,12,11,.55) 68%,rgba(13,12,11,.18) 100%)}
.svc:hover img{transform:scale(1.06)}
.svc h3{color:var(--paper);font-size:1.28rem}
.svc p{margin-top:.45rem;font-size:.885rem;color:rgba(246,242,234,.8);line-height:1.55;max-width:34ch}
.svc-ico{width:2rem;height:2rem;margin-bottom:auto;color:var(--paper);opacity:.92}
.svc-more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.8rem;font-weight:500;color:var(--paper)}
.svc-more .ico{width:.9rem;height:.9rem;transition:transform .3s var(--ease)}
.svc:hover .svc-more .ico{transform:translateX(4px)}
.svc-link::before{content:"";position:absolute;inset:0;z-index:3}

/* Untergrund-Leistungen: schlichte Liste mit Haarlinien, keine Karten */
.sub-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0;border-top:1px solid var(--line)}
.sub-item{padding:1.4rem 1.3rem 1.4rem 0;border-bottom:1px solid var(--line)}
.sub-item h3{font-size:1.05rem;display:flex;align-items:center;gap:.6rem}
.sub-item h3 .ico{color:var(--bordeaux)}
.sub-item p{margin-top:.4rem;font-size:.875rem;color:var(--ink-soft)}

/* ==========================================================================
   Meister-Geschichte
   ========================================================================== */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.story-media{position:relative;max-width:26rem}
/* Fester Bildausschnitt, sonst waechst das Portrait mit der Spaltenbreite
   ins Uebergrosse. */
.story-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  border-radius:var(--r-md);box-shadow:var(--shadow)}
.story-media::after{
  content:"";position:absolute;left:-14px;top:-14px;width:52%;height:52%;
  border-left:1px solid var(--brass);border-top:1px solid var(--brass);
  border-radius:var(--r-md) 0 0 0;pointer-events:none;
}
.story-quote{
  margin-top:2rem;padding-left:1.3rem;border-left:2px solid var(--bordeaux);
  font-family:var(--font-display);font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.42;
}
.story-sign{margin-top:1.4rem;display:flex;align-items:center;gap:.9rem;
  font-size:.85rem;color:var(--ink-soft)}
.story-sign strong{color:var(--ink);font-weight:500}

/* Meilensteine, ohne "Phase 01"-Nummerierung */
.mile{display:grid;gap:0;margin-top:2.4rem;border-top:1px solid var(--line)}
.mile li{display:grid;grid-template-columns:6.8rem 1fr;gap:1.1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.mile b{font-family:var(--font-mono);font-size:.86rem;font-weight:500;color:var(--bordeaux)}
.mile span{font-size:.925rem;color:var(--ink-soft)}

/* ---------- Bild/Text-Block der Unterseiten ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
/* height:auto ist Pflicht. Das height-Attribut im Markup wird sonst als
   CSS-Hoehe angewendet und schlaegt die aspect-ratio. */
.split-media img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.split.reverse .split-media{order:2}

/* Aufzaehlung mit Haken, statt Standard-Punktliste */
.checks{display:grid;gap:.72rem;margin-top:1.6rem}
.checks li{display:grid;grid-template-columns:1.35rem 1fr;gap:.7rem;
  font-size:.945rem;color:var(--ink-soft);line-height:1.55}
.checks .ico{width:1.1rem;height:1.1rem;margin-top:.28rem;color:var(--bordeaux)}
.band-dark .checks li{color:var(--paper-soft)}
.band-dark .checks .ico{color:var(--bordeaux-light)}

/* Zweispaltiger Vergleich mit Haarlinien statt Karten */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.compare>div{padding:clamp(1.5rem,2.6vw,2.2rem) clamp(1.2rem,2vw,2rem)}
.compare>div+div{border-left:1px solid var(--line)}
.compare h3{font-size:1.22rem;display:flex;align-items:center;gap:.6rem}
.compare h3 .ico{color:var(--bordeaux)}
.compare p{margin-top:.7rem;font-size:.925rem;color:var(--ink-soft)}

/* Vollflaechiges Foto-Band mit Text darauf */
.photoband{position:relative;overflow:hidden;min-height:clamp(360px,50vh,520px);
  display:flex;align-items:center}
/* Bild UND Video muessen absolut liegen, sonst steht das Video im Fluss
   und schiebt die Seite seitlich auf. */
.photoband>img,.photoband>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photoband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,18,20,.92) 0%,rgba(18,18,20,.7) 50%,rgba(18,18,20,.34) 100%)}
.photoband .wrap{position:relative;z-index:2;padding-top:3rem;padding-bottom:3rem}
.photoband h2,.photoband h3{color:var(--paper)}
.photoband p{color:var(--paper-soft)}

/* ==========================================================================
   Materialwelten - die eine dunkle Flaeche, horizontal scrollbar
   ========================================================================== */
/* Voll bis an den Viewportrand, damit die angeschnittene Kachel als Hinweis
   auf mehr Inhalt liest und nicht als abgeschnittener Rest. */
/* Statisches Raster. Seitwaerts-Scrollen ist am Desktop eine Zumutung und
   sieht nicht sauber aus, alles liegt jetzt offen nebeneinander. */
.matgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.3vw,1.15rem)}
/* Hinweis unter dem Raster: macht ausdruecklich klar, dass die Kacheln ein
   Auszug sind und kein abschliessendes Sortiment. */
.mat-note{margin-top:1.8rem;max-width:56rem;font-size:.95rem;color:var(--paper-soft)}
.mat-note a{color:var(--brass-light);border-bottom:1px solid var(--brass-soft);
  padding-bottom:1px;white-space:nowrap;transition:border-color .25s var(--ease)}
.mat-note a:hover{border-bottom-color:var(--brass-light)}
.mat{position:relative;width:100%;aspect-ratio:4/3;
  border-radius:var(--r-md);overflow:hidden}
.mat img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mat:hover img{transform:scale(1.05)}
.mat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(14,14,16,.82),rgba(14,14,16,.05) 60%)}
.mat-cap{position:absolute;left:1.05rem;right:1.05rem;bottom:.95rem;z-index:2}
.mat-cap b{display:block;font-family:var(--font-display);font-size:1.08rem;
  font-weight:400;color:var(--paper)}
.mat-cap span{display:block;margin-top:.2rem;font-size:.79rem;color:rgba(246,242,234,.7)}

/* ==========================================================================
   Video
   ========================================================================== */
/* Fuellt seinen Container, gleiche Regeln wie ein Bild an derselben Stelle */
.pagehead-media video,.photoband>video,.svc video{
  width:100%;height:100%;object-fit:cover}
/* Der Ken-Burns-Zoom gilt nur fuer Standbilder, ein Video bewegt sich selbst */

/* Dunkle Flaeche mit weichgezeichnetem Video dahinter. Die Unschaerfe ist in
   die Datei encodiert, nicht per CSS-Filter: das spart auf schwachen Geraeten
   eine dauerhafte GPU-Last. */
.band-video{position:relative;isolation:isolate;overflow:hidden}
.band-video>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;opacity:.5}
.band-video::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(30,31,35,.93),rgba(24,25,28,.88))}
.band-video>.wrap{position:relative;z-index:1}

/* Zeitraffer-Kacheln */
.vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.85rem,1.5vw,1.2rem);
  align-items:start}
/* width:100% und align-self:start sind noetig: sonst leitet aspect-ratio die
   Breite aus der gestreckten Zeilenhoehe ab und die Kachel bleibt schmaler
   als ihre Rasterspalte. */
/* Ausweichfarbe dunkel: die Bildunterschrift ist hell. Bei hellem Fallback
   stuende sie unlesbar da, falls das Video nicht laedt. */
.vidcard{position:relative;width:100%;align-self:start;
  border-radius:var(--r-md);overflow:hidden;
  background:var(--graphite);aspect-ratio:3/4}
.vidcard video,.vidcard img{width:100%;height:100%;object-fit:cover;display:block}
.vidcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem .95rem .85rem;
  background:linear-gradient(to top,rgba(16,16,18,.86),transparent);
  color:var(--paper);font-size:.85rem;line-height:1.35}
.vidcard figcaption b{display:block;font-family:var(--font-display);
  font-weight:400;font-size:1rem;margin-bottom:.15rem}
.vidcard figcaption span{color:rgba(246,242,234,.74);font-size:.79rem}
/* Zeitraffer-Marke oben links, damit die Geschwindigkeit nicht irritiert.
   Nur auf Karten MIT Video: die Karte traegt jetzt teils echte Fotos, und
   "Zeitraffer" auf einem Standbild waere schlicht falsch. */
.vidcard:has(video)::after{content:"Zeitraffer";position:absolute;left:.7rem;top:.7rem;z-index:2;
  padding:.28rem .5rem;border-radius:var(--r);
  background:rgba(246,242,234,.92);color:var(--bordeaux);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}

/* Video als Beiwerk in einem Textblock */
.split-media video{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);display:block}

/* ==========================================================================
   Referenzen - Mauerwerk-Raster mit Lightbox
   ========================================================================== */
/* Feste Zeilenhoehe statt Seitenverhaeltnis pro Kachel: sonst sind zwei
   Kacheln derselben Reihe unterschiedlich hoch und es entstehen Loecher. */
.gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:118px;
  gap:clamp(.7rem,1.1vw,1rem)}
.gal figure{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
  background:var(--paper-3);cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.r3{grid-row:span 3}.r4{grid-row:span 4}.r5{grid-row:span 5}.r6{grid-row:span 6}
.gal figure:hover img{transform:scale(1.05)}
.gal figure::after{content:"";position:absolute;inset:0;background:rgba(18,18,20,0);
  transition:background .35s}
.gal figure:hover::after{background:rgba(18,18,20,.14)}
.g-6{grid-column:span 6}.g-4{grid-column:span 4}.g-3{grid-column:span 3}
.g-8{grid-column:span 8}.g-5{grid-column:span 5}.g-7{grid-column:span 7}
.ar-43{aspect-ratio:4/3}.ar-34{aspect-ratio:3/4}.ar-11{aspect-ratio:1/1}
.ar-169{aspect-ratio:16/9}.ar-32{aspect-ratio:3/2}
.gal-real{position:absolute;left:.7rem;top:.7rem;z-index:2;
  padding:.3rem .55rem;background:rgba(246,242,234,.94);border-radius:var(--r);
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bordeaux)}

.lightbox{position:fixed;inset:0;z-index:120;background:rgba(16,16,18,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r-md)}
.lb-close,.lb-prev,.lb-next{position:absolute;width:46px;height:46px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;color:var(--paper);
  background:rgba(246,242,234,.1);transition:background .2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(246,242,234,.22)}
.lb-close{top:1.2rem;right:1.2rem}
.lb-prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lb-prev .ico{transform:rotate(180deg)}
.lb-cap{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  font-size:.85rem;color:var(--paper-soft);text-align:center;max-width:80%}

/* ==========================================================================
   Ablauf - Zeitstrahl mit Messing-Haarlinie
   ========================================================================== */
.steps{position:relative;display:grid;gap:0}
.steps::before{content:"";position:absolute;left:1.35rem;top:1.6rem;bottom:2.4rem;
  width:1px;background:var(--brass-soft)}
.step{position:relative;display:grid;grid-template-columns:2.7rem 1fr;
  gap:1.35rem;padding:1.3rem 0}
.step-dot{position:relative;z-index:2;width:2.7rem;height:2.7rem;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--bordeaux)}
.step-dot .ico{width:1.15rem;height:1.15rem}
.step h3{font-size:1.15rem}
.step p{margin-top:.4rem;font-size:.92rem;color:var(--ink-soft);max-width:52ch}
.band-2 .step-dot{background:var(--paper)}

/* ==========================================================================
   Einzugsgebiet
   ========================================================================== */
.region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4rem);align-items:center}
.places{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.place{padding:.42rem .8rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.83rem;color:var(--ink-soft);background:var(--card)}
.place.is-home{border-color:var(--bordeaux);color:var(--bordeaux);background:var(--bordeaux-wash)}
.map-frame{position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;background:var(--paper-2)}
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.map-cover{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;text-align:center;
  padding:1.5rem;background:var(--paper-2);cursor:pointer}
.map-cover .ico{width:1.9rem;height:1.9rem;color:var(--bordeaux)}
.map-cover p{font-size:.85rem;color:var(--ink-soft);max-width:28ch}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;padding:1.35rem 0;text-align:left;
  font-family:var(--font-display);font-size:clamp(1.02rem,1.55vw,1.16rem);line-height:1.35}
.faq-q .ico{flex:none;width:1.1rem;height:1.1rem;margin-top:.28rem;color:var(--bordeaux);
  transition:transform .3s var(--ease)}
.faq-item.open .faq-q .ico{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.faq-a>div{padding:0 0 1.4rem;max-width:62ch;color:var(--ink-soft);font-size:.945rem}
.faq-a p+p{margin-top:.8rem}

/* ==========================================================================
   Karriere
   ========================================================================== */
.jobs{display:grid;gap:clamp(.9rem,1.5vw,1.15rem)}
.job{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:clamp(1.4rem,2.4vw,2rem);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.job:hover{border-color:var(--brass-soft);transform:translateY(-2px)}
.job h3{font-size:clamp(1.2rem,1.9vw,1.45rem)}
.job-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.job-meta span{display:inline-flex;align-items:center;gap:.35rem;
  padding:.32rem .65rem;border:1px solid var(--line);border-radius:var(--r);
  font-size:.775rem;color:var(--ink-soft)}
.job-meta .ico{width:.85rem;height:.85rem;color:var(--bordeaux)}
.job p{margin-top:.9rem;font-size:.92rem;color:var(--ink-soft);max-width:56ch}

/* Haarlinien am Element statt Rasterluecken mit Hintergrund: so bleiben
   unbesetzte Zellen unsichtbar, egal wie viele Punkte die Seite hat.
   Vorher zeigten sechs Punkte in vier Spalten zwei graue Leerkacheln. */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 clamp(1.6rem,3vw,2.8rem)}
.perk{padding:1.6rem 0;border-top:1px solid var(--line)}
.perk .ico-lg{color:var(--bordeaux)}
.perk h3{margin-top:.85rem;font-size:1.04rem}
.perk p{margin-top:.42rem;font-size:.885rem;color:var(--ink-soft)}
.band-2 .perk{background:none}

/* ==========================================================================
   Formulare
   ========================================================================== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.42rem}
.field--full{grid-column:1/-1}
.field label{font-size:.815rem;font-weight:500;color:var(--ink)}
.field .req{color:var(--bordeaux)}
.field input,.field textarea,.field select{
  padding:.82rem .95rem;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
  font-size:.92rem;width:100%;
}
.field textarea{min-height:9.5rem;resize:vertical}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1C24' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:1rem;
  padding-right:2.4rem;
}
/* Platzhalter 4,6:1 auf --card */
.field input::placeholder,.field textarea::placeholder{color:rgba(26,26,28,.5)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--bordeaux);box-shadow:0 0 0 3px var(--bordeaux-wash);outline:none}
.field-hint{font-size:.775rem;color:var(--ink-dim)}
.field-err{font-size:.775rem;color:var(--bordeaux);display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--bordeaux)}
.field.invalid .field-err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.check{display:flex;align-items:flex-start;gap:.65rem;font-size:.83rem;color:var(--ink-soft)}
.check input{width:1.05rem;height:1.05rem;margin-top:.22rem;flex:none;accent-color:var(--bordeaux)}
.check a{text-decoration:underline;text-underline-offset:2px}

.form-note{display:none;margin-top:1.1rem;padding:.95rem 1.1rem;border-radius:var(--r);
  font-size:.88rem;border:1px solid var(--line)}
.form-note.ok{display:block;background:var(--bordeaux-wash);border-color:var(--brass-soft);color:var(--ink)}
.form-note.err{display:block;background:#fff;border-color:var(--bordeaux);color:var(--bordeaux)}

.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start}
.contact-card{background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:clamp(1.5rem,2.6vw,2.1rem)}
.contact-row{display:flex;gap:.85rem;padding:.9rem 0;border-bottom:1px solid var(--line-2)}
.contact-row:last-child{border-bottom:none}
.contact-row .ico{width:1.15rem;height:1.15rem;color:var(--bordeaux);margin-top:.22rem;flex:none}
.contact-row b{display:block;font-weight:500;font-size:.87rem}
.contact-row span,.contact-row a{font-size:.9rem;color:var(--ink-soft)}
.contact-row a:hover{color:var(--bordeaux)}

/* ==========================================================================
   CTA-Bahn
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--graphite);color:var(--paper);
  border-radius:var(--r-md)}
.cta-inner{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;
  padding:clamp(2rem,4vw,3.2rem)}
.cta h2{color:var(--paper);font-size:clamp(1.6rem,3vw,2.3rem)}
.cta p{margin-top:.7rem;color:var(--paper-soft);max-width:46ch;font-size:.97rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.cta-mark{position:absolute;right:-3rem;bottom:-4rem;width:17rem;height:auto;opacity:.05;z-index:1}

/* ==========================================================================
   Rechtsseiten
   ========================================================================== */
.legal{max-width:48rem}
.legal h2{margin-top:2.6rem;font-size:1.4rem}
.legal h3{margin-top:1.7rem;font-size:1.08rem}
.legal p,.legal li{margin-top:.8rem;color:var(--ink-soft);font-size:.945rem}
.legal ul{list-style:disc;padding-left:1.2rem}
.legal a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--graphite-2);color:var(--paper);padding:clamp(3.2rem,6vw,4.8rem) 0 1.8rem}
.footer h3{color:var(--paper);font-family:var(--font-body);font-size:.79rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(1.8rem,3.5vw,3rem)}
/* Eigene helle Logofassung fuer den dunklen Footer statt weisser Kasten */
.footer-logo{height:52px;width:auto;display:block}
.footer p{color:var(--paper-soft);font-size:.9rem}
.footer li{margin-top:.62rem}
.footer li a{font-size:.9rem;color:var(--paper-soft);transition:color .2s}
.footer li a:hover{color:var(--paper)}
.footer-bottom{margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.82rem;color:var(--paper-dim)}
.footer-legal a:hover{color:var(--paper)}
.webziger-credit{display:inline-flex;align-items:center;gap:.5rem}
.webziger-credit span{font-size:.8rem;color:var(--paper-dim)}
.webziger-credit img{height:20px;width:auto}

.totop{position:fixed;right:1.3rem;bottom:1.3rem;z-index:60;width:44px;height:44px;
  border-radius:var(--r);background:var(--bordeaux);color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .2s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--bordeaux-deep)}

/* ==========================================================================
   Reveal-Grundzustand. Motion setzt die Endwerte, JS-los bleibt alles sichtbar.
   ========================================================================== */
.js [data-reveal]{opacity:0}
.js [data-reveal].shown{opacity:1}

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width:1140px){
  .nav-links{display:none}
  .burger{display:flex}
  .nav-phone{display:none}
  .nav .btn{display:none}
}
@media (max-width:980px){
  .hero{min-height:94svh;--card-h:clamp(132px,20vh,190px)}

  .story,.region,.contact-grid,.split,.compare{grid-template-columns:1fr}
  .story-media{max-width:26rem}
  .split.reverse .split-media{order:0}
  .compare>div+div{border-left:none;border-top:1px solid var(--line)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .cta-inner{grid-template-columns:1fr;gap:1.6rem}
  .bento{grid-template-columns:repeat(2,1fr)}
  .svc,.svc--wide,.svc--tall{grid-column:span 1;min-height:250px}
  .svc--wide{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr}
  .vidgrid{grid-template-columns:repeat(3,1fr)}
  .matgrid{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(6,1fr);grid-auto-rows:92px}
  .g-8,.g-7,.g-6,.g-5{grid-column:span 6}
  .g-4,.g-3{grid-column:span 3}
  .job{grid-template-columns:1fr;gap:1.2rem}
  .job .btn{justify-self:start}
}
@media (max-width:620px){
  :root{--nav-h:64px}
  .form-grid{grid-template-columns:1fr}
  /* Auf dem Telefon reicht eine Kartenreihe, zwei wirken gedraengt */
  /* Sperrsatz laeuft auf schmalen Schirmen sonst bis an beide Kanten */
  .hero-center .tag{font-size:.63rem;letter-spacing:.12em}
  .hero-center::before{inset:-2.6rem -1.6rem -2rem}
  .bento{grid-template-columns:1fr}
  .svc,.svc--wide,.svc--tall{grid-column:span 1;min-height:230px}
  /* Drei Hochformat-Videos nebeneinander sind auf dem Telefon zu schmal.
     Untereinander, jedes in voller Breite. */
  .vidgrid{grid-template-columns:1fr}
  .vidcard{aspect-ratio:4/3}
  .matgrid{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:80px}
  .g-8,.g-7,.g-6,.g-5,.g-4,.g-3{grid-column:span 2}
  .facts{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  /* Der feste Pfeil ueberlappt sonst den rechtsbuendigen Credit */
  .footer-bottom{flex-direction:column;align-items:flex-start;padding-bottom:3.6rem}
    .brand img{height:34px}
  .mile li{grid-template-columns:4.4rem 1fr;gap:.8rem}
}

/* ==========================================================================
   Bewegungsreduktion: alles faellt auf den Endzustand zurueck
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  /* Der Tunnel startet in diesem Fall gar nicht erst, siehe
     hero-tunnel-init.js. Die Canvas bleibt leer, der Farbverlauf traegt. */
  .hero-tunnel canvas{display:none}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .hero h1 .ln>span{transform:none !important;opacity:1 !important}
}


/* ==========================================================================
   Design-Durchgang 2026-09-06: Flaechen fuellen statt Luecken lassen.
   Alle Regeln arbeiten ueber :has(), damit die aus der Pipeline erzeugten
   Seiten unangetastet bleiben.
   ========================================================================== */

/* Ueberschriften ohne Witwe: kein einzelnes Wort auf der letzten Zeile. */
h1,h2,h3,.h-lg,.h-sm{text-wrap:balance}

/* Prozess-Timelines: auf breiten Schirmen zweispaltig statt schmaler
   Mittelspalte mit leerer rechter Haelfte. Ueberschrift und Einleitung links
   und beim Scrollen mitlaufend, die Schritte rechts. */
@media (min-width:981px){
  .wrap:has(> .steps){max-width:1220px!important;display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(3rem,7vw,7rem);align-items:start}
  .wrap:has(> .steps) > [data-reveal]:first-child{position:sticky;top:calc(var(--nav-h) + 2.5rem)}
  .wrap:has(> .steps) > .steps{margin-top:0}
  .wrap:has(> .steps) .step p{max-width:none}
}

/* Raster ohne verwaiste Zellen: die Spaltenzahl folgt der Anzahl der
   Eintraege, nicht nur der Breite. Sechs Positionen: drei Spalten. Vier
   Eintraege: vier Spalten auf breiten, zwei auf mittleren Schirmen. */
@media (min-width:1141px){
  .perks:has(> .perk:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .matgrid:has(> .mat:nth-of-type(4):last-of-type){grid-template-columns:repeat(4,1fr)}
}
@media (min-width:981px){
  .sub-list:has(> .sub-item:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
}
@media (min-width:700px) and (max-width:1140px){
  .sub-list:has(> .sub-item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .perks:has(> .perk:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
@media (min-width:621px) and (max-width:1140px){
  .matgrid:has(> .mat:nth-of-type(4):last-of-type){grid-template-columns:repeat(2,1fr)}
}
/* Der Hinweis unter den Materialkacheln ist ein Rasterkind: volle Breite,
   sonst rutscht er neben eine verwaiste Kachel. */
.matgrid > .mat-note{grid-column:1/-1}

/* Galerie auf dem Telefon: zwei Spalten mit einheitlicher Hoehe, die
   Aufmacher voll breit. Die Aufteilung haengt an der Bildzahl der Seite,
   damit keine halbe Reihe uebrig bleibt. */
@media (max-width:620px){
  .gal{grid-auto-rows:60px;grid-auto-flow:dense}
  .gal > *{grid-column:span 1;grid-row:span 4}
  .gal:has(> :nth-child(7):last-child) > :first-child,
  .gal:has(> :nth-child(5):last-child) > :first-child,
  .gal:has(> :nth-child(12):last-child) > :first-child,
  .gal:has(> :nth-child(12):last-child) > :nth-child(3){grid-column:span 2}
}

/* Materialkacheln auf dem Telefon: hoeher, damit Titel und Zeile ueber
   dem Bild Luft haben. */
@media (max-width:620px){
  .mat{aspect-ratio:3/4}
  .mat-cap{left:.8rem;right:.8rem;bottom:.8rem}
  .mat-cap b{font-size:1rem}
  .mat-cap span{font-size:.74rem;line-height:1.35}
}

/* Einzugsgebiet: statt leerer Kartenbox eine Grafik mit Ringen und Orten,
   die Adresse als Leiste darunter. Die echte Karte laedt weiterhin erst
   auf Klick. */
.map-cover{display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:start;
  align-items:end;text-align:left;gap:.3rem;padding:.9rem 1rem 1rem}
.map-cover > .ico{display:none}
.map-art{position:static;width:100%;height:100%;min-height:0;display:block;
  justify-self:stretch;align-self:stretch}
.map-art text{font-family:var(--font-body);font-size:11px;fill:var(--ink);letter-spacing:.005em}
.map-art .ring{fill:none;stroke:var(--brass-soft);stroke-width:1;stroke-dasharray:3 4}
.map-art .ring-l{font-family:var(--font-mono);font-size:8.5px;fill:var(--brass);letter-spacing:.06em}
.map-art .town{fill:var(--paper);stroke:var(--ink-soft);stroke-width:1.2}
.map-art .home-l{font-weight:600;font-size:11.5px}
.map-art .home path{fill:var(--bordeaux)}
.map-art .home-eye{fill:var(--paper)}
.map-art .home-glow{fill:var(--bordeaux);opacity:.08}
.map-cover > strong{font-size:.84rem;padding:.35rem .6rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r)}
.map-cover > p{font-size:.72rem;max-width:40ch;padding:0 .15rem}
.map-cover:hover .map-art{opacity:.92}
@media (max-width:620px){ .map-frame{aspect-ratio:1/1} }

/* Stellenkarten: Bewerben-Button und Detail-Link in einer Zeile */
.job-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.job-actions .link-arrow{margin-top:0}
.compare .checks{margin-top:1rem}
.compare h3.h-sm{margin-bottom:.2rem}

@media (max-width:620px){
  .pagehead-media::after{background:linear-gradient(to top,rgba(18,18,20,.92) 0%,rgba(18,18,20,.85) 30%,rgba(18,18,20,.80) 56%,rgba(18,18,20,.62) 82%,rgba(18,18,20,.58) 100%)}
}