/* ═══════════════════════════════════════════════════════════════════════════
   Karriere · Josef Kessler GmbH
   Header & Footer: 1:1-Replik von josef-kessler.de (The7 12.5.1),
   Maße und Farben live aus dem DOM vermessen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marken-Tokens, übernommen aus the7-css/css-vars.css ── */
  --red:            #be342b;
  --red-hover:      #a52b23;
  --red-soft:       #bf6b65;
  --menu-black:     #000000;
  --the7-grey:      #7c7c7c;
  --footer-bg:      #929496;
  --header-line:    rgba(51,51,51,.11);

  /* ── Eine einzige Seitenfläche, kein Wechsel von Abschnitt zu Abschnitt ── */
  --paper:          #faf8f4;   /* Grundfläche der gesamten Seite */
  --paper-deep:     #f1ece4;   /* nur für eingebettete Flächen, nie ganzflächig */
  --card:           #ffffff;
  --ink:            #17140f;
  --body:           #4b453d;
  --body-soft:      #7d756b;
  --line:           rgba(23,20,15,.11);
  --line-strong:    rgba(23,20,15,.2);

  --wrap:           1450px;
  --wrap-narrow:    1180px;
  --gut:            clamp(20px, 5vw, 60px);

  /* §4 Federn: kritisch gedämpft ist der Standard, Überschwingen nur bei Momentum.
     Response 0,3–0,4 s laut Apple – deutlich kürzer als vorher. */
  --spring:         cubic-bezier(.32,.72,0,1);      /* damping 1.0, kein Überschwingen */
  --spring-bounce:  cubic-bezier(.34,1.4,.64,1);    /* damping ~0.8, nur nach Momentum */
  --ease:           cubic-bezier(.32,.72,0,1);
  --ease-out:       cubic-bezier(.32,.72,0,1);
  --t-press:        100ms;   /* §1 Rückmeldung beim Drücken */
  --t-ui:           320ms;   /* §4 Response für UI */
  --t-enter:        520ms;   /* Eintritt */
}

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

/* Kein natives Smooth-Scrolling – das Scrollen gehört Lenis */
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }

/* Lenis (lokal, MIT) – übersteuert das native Smooth-Scrolling */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

body{
  margin:0;
  font-family:'Mulish', Helvetica, Arial, Verdana, sans-serif;
  font-size:18px;
  line-height:1.6;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* §15 Tracking und Leading sind größenabhängig. Ein fester Wert für alle
   Größen ist irgendwo immer falsch: groß braucht negativ, klein braucht 0. */
h1,h2,h3,h4{margin:0;font-weight:800;color:var(--ink);font-optical-sizing:auto}
h1{letter-spacing:-.042em;line-height:.96}
h2{letter-spacing:-.032em;line-height:1.04}
h3{letter-spacing:-.014em;line-height:1.18}
h4{letter-spacing:-.008em;line-height:1.3}
p,li,td,input,select,textarea,button{letter-spacing:0}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--red);color:#fff;padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:0}

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — Replik. Gesamthöhe 210px (Top-Bar 48 + Header-Bar 162) @ ≥992px
   ═══════════════════════════════════════════════════════════════════════════ */

.masthead{
  position:relative;
  z-index:200;
  background:#fff;
}

/* ── Top-Bar ── */
/* Trennlinie liegt INNEN (inset), damit die Höhe exakt 48px bleibt – wie im Original */
.top-bar{background:#fff;box-shadow:inset 0 -1px 0 #929496}
.top-bar-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1450px;margin-inline:auto;   /* Original: Inhalt zentriert, Linie volle Breite */
  padding:4px 30px;
  min-height:40px;   /* 40 + 2×4 = 48px, wie im Original */
}
.mini-widgets{display:flex;align-items:center;gap:20px}
.mini-contacts{
  display:inline-flex;align-items:center;gap:9px;
  font-size:16px;font-weight:500;line-height:20px;color:#000;text-decoration:none;
  transition:color .2s var(--ease);
}
.mini-contacts:hover{color:var(--red)}
.mw-icon{width:14px;height:14px;fill:var(--red);flex:none}
.header-claim{
  display:inline-block;
  padding:10px 20px;
  font-size:16px;font-weight:500;line-height:20px;
  color:var(--red);
}

/* ── Header-Bar ── */
.header-bar{background:#fff}
.header-bar-inner{
  display:flex;align-items:stretch;
  max-width:1450px;margin-inline:auto;   /* Original: max-width 1450px, zentriert */
  height:162px;
  padding-left:25px;padding-right:40px;
}
.branding{display:flex;align-items:center;flex:none}
.branding a{display:block;line-height:0}
.logo-main{width:240px;height:142px}
.logo-mobile{display:none;width:194px;height:80px}

.primary-nav{margin-left:auto;display:flex;align-items:stretch}
.main-nav{display:flex;align-items:stretch}
.main-nav > li{position:relative;display:flex;align-items:center;padding:0 20px}
.main-nav > li > a{
  position:relative;
  display:inline-block;
  padding:3px 0;
  font-size:20px;font-weight:500;line-height:24px;
  color:var(--menu-black);text-decoration:none;
  transition:color .25s var(--ease);
}
/* Unterstrich "from centre" wie im Original: 2px, bottom -5px */
.main-nav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .3s var(--ease);
}
.main-nav > li:hover > a,
.main-nav > li.act > a{color:var(--red)}
.main-nav > li:hover > a::after,
.main-nav > li.act > a::after{transform:scaleX(1)}

/* ── Sub-Menü ── */
.sub-nav{
  position:absolute;top:100%;left:10px;
  min-width:270px;
  background:#fff;
  border-top:2px solid var(--red);
  box-shadow:0 14px 34px rgba(23,20,15,.14);
  padding:8px 0;
  /* §7 verankert am Auslöser: skaliert aus dem Menüpunkt heraus */
  transform-origin:top left;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);
  transition:opacity 200ms var(--spring), transform var(--t-ui) var(--spring), visibility var(--t-ui);
}
.main-nav > li:hover .sub-nav,
.main-nav > li:focus-within .sub-nav{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sub-nav a{
  display:block;padding:9px 22px;
  font-size:16px;font-weight:400;color:var(--menu-black);text-decoration:none;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.sub-nav a:hover{color:var(--red);background:rgba(190,52,43,.05)}
.sub-nav li.act > a{color:var(--red);font-weight:600}

/* ── Burger ── */
.burger{
  display:none;
  margin-left:auto;align-self:center;
  width:44px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;
}
.burger span{
  display:block;height:2px;width:28px;margin:6px auto;
  background:var(--menu-black);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── Mobile Off-Canvas ── */
.mobile-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(23,20,15,.5);
  opacity:0;transition:opacity .3s var(--ease);
}
.mobile-overlay.open{opacity:1}
.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;z-index:310;
  width:min(400px, 88vw);
  background:#fff;
  padding:45px 30px 30px 30px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .35s var(--ease-out);
}
.mobile-menu.open{transform:translateX(0)}
.mobile-close{
  position:absolute;top:16px;right:16px;
  width:40px;height:40px;padding:8px;
  background:none;border:0;cursor:pointer;
}
.mobile-close svg{width:100%;height:100%;fill:none;stroke:var(--menu-black);stroke-width:2;stroke-linecap:round}
.mobile-menu-logo{width:180px;height:auto;margin-bottom:26px}
.mobile-menu ul li{font-size:19px;font-weight:600;color:var(--menu-black);padding:11px 0;border-bottom:1px solid var(--header-line)}
.mobile-menu ul li a{text-decoration:none;color:inherit}
.mobile-menu ul li a:hover{color:var(--red)}
.mobile-menu ul li.act{color:var(--red)}
.mobile-menu ul ul{margin-top:8px}
.mobile-menu ul ul li{font-size:16px;font-weight:400;padding:7px 0 7px 16px;border:0;color:var(--menu-black)}
.mobile-menu ul ul li.act > a{color:var(--red);font-weight:600}
.mobile-contact{margin-top:26px;font-size:16px;line-height:1.6;color:var(--menu-black)}
.mobile-contact a{display:block;color:var(--red);text-decoration:none;font-weight:600;margin-top:6px}

@media (max-width: 991px){
  .top-bar-inner{padding:3px 20px;min-height:auto}
  .mini-widgets.left-widgets{display:none}
  .mini-widgets.right-widgets{width:100%;justify-content:center}
  .header-claim{padding:6px 0;font-size:14px;text-align:center}
  .header-bar-inner{height:90px;padding-left:20px;padding-right:20px;align-items:center}
  .logo-main{display:none}
  .logo-mobile{display:block;width:150px;height:auto}
  .primary-nav{display:none}
  .burger{display:block}
  .masthead{position:sticky;top:0;box-shadow:0 1px 0 var(--header-line)}
  /* Sprungmarken dürfen nicht unter dem klebenden Header landen */
  section[id]{scroll-margin-top:130px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — Replik. 60px, #929496
   ═══════════════════════════════════════════════════════════════════════════ */

#footer{background:var(--footer-bg)}
#bottom-bar{min-height:60px;display:flex;align-items:center}
.bottom-bar-inner{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 30px;
}
.bottom-left{font-size:14px;line-height:1.3;color:#fff}
.bottom-menu{display:flex;gap:22px}
.bottom-menu a{font-size:14px;color:#fff;text-decoration:none}
.bottom-menu a:hover{text-decoration:underline}

@media (max-width: 991px){
  #bottom-bar{padding:18px 0}
  .bottom-bar-inner{flex-direction:column;text-align:center;gap:10px;padding:0 20px}
  .bottom-menu{flex-wrap:wrap;justify-content:center;gap:8px 18px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRUNDFLÄCHE
   Die ganze Seite steht auf EINER Fläche. Kontrast kommt aus Fotos,
   Typo und Haarlinien, nicht aus wechselnden Blockfarben.
   ═══════════════════════════════════════════════════════════════════════════ */

body{position:relative}

/* Feine Körnung über allem – nimmt der Fläche das Digitale */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ body::after{display:none} }

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:19px 32px;
  font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;
  text-decoration:none;border:2px solid transparent;border-radius:2px;
  cursor:pointer;
  transition:color var(--t-ui) var(--spring), border-color var(--t-ui) var(--spring),
             transform var(--t-ui) var(--spring), box-shadow var(--t-ui) var(--spring);
  touch-action:manipulation;   /* §10 kein 300ms-Tap-Delay */
}
.btn > *{position:relative;z-index:1}
/* Füllung wischt beim Hover von unten nach oben durch */
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;
  transform:translateY(101%);
  transition:transform .42s var(--ease-out);
}
.btn:hover::before{transform:translateY(0)}
/* §1 Feedback liegt auf pointer-down und ist sofort da */
.btn:active{transform:scale(.975);transition-duration:var(--t-press)}
.btn-arrow{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(5px)}

.btn-primary{background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 10px 26px -14px rgba(190,52,43,.85)}
/* Die Fuellung war --ink, also Fast-Schwarz. Der rote Knopf kippte beim
   Ueberfahren nach Schwarz, was wie ein Fehler aussieht statt wie eine
   Rueckmeldung. Jetzt vertieft sich Rot zu Rot, die Schrift bleibt weiss. */
.btn-primary::before{background:var(--red-hover)}
/* Rand folgt der Fuellung, sonst steht eine fast schwarze Kante um eine
   rote Flaeche. */
.btn-primary:hover{border-color:var(--red-hover);box-shadow:0 16px 34px -16px rgba(190,52,43,.5)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost::before{background:var(--red)}
.btn-ghost:hover{color:#fff;border-color:var(--red)}
.btn-ghost .down{font-size:19px;line-height:1;transition:transform .3s var(--ease)}
.btn-ghost:hover .down{transform:translateY(3px)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline::before{background:var(--red)}
.btn-outline:hover{color:#fff;border-color:var(--red)}
.btn-outline.dark-outline{border-color:var(--line-strong)}
.btn-outline.dark-outline:hover{border-color:var(--red)}

.btn-block{width:100%}
.btn-lg{padding:23px 42px;font-size:18px}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKTIONS-GRUNDLAGEN
   ═══════════════════════════════════════════════════════════════════════════ */

.section{padding:clamp(72px, 9vw, 132px) 0;background:var(--paper)}
/* Die alte "dunkle" Klasse bleibt im Markup, ist aber jetzt dieselbe Fläche.
   Unterschieden wird über Rhythmus und Typo, nicht über Farbe. */
.section-dark{background:var(--paper);color:var(--body)}
.section-dark h2,.section-dark h3{color:var(--ink)}

.sec-label{
  display:flex;align-items:center;gap:14px;
  margin:0 0 22px;
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body-soft);
}
.sec-label.light{color:var(--body-soft)}
/* Der rote Strich saß vorher am Nummernkuerzel. Die Nummern sind raus,
   der Strich bleibt als Akzent und zieht sich beim Einblenden auf. */
.sec-label::before{
  content:"";display:block;flex:0 0 auto;
  width:42px;height:2px;background:var(--red);
  transform-origin:left;transform:scaleX(0);
  transition:transform .7s var(--ease-out) .1s;
}
.sec-label.in::before,
.in .sec-label::before{transform:scaleX(1)}
.sec-h2{
  font-size:clamp(31px, 4.2vw, 58px);
  margin:0 0 46px;color:var(--ink);
}
.sec-h2.light{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · HERO — hell, das Foto trägt den Kontrast
   ═══════════════════════════════════════════════════════════════════════════ */

.hero{position:relative;background:var(--paper);color:var(--body);overflow:hidden}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:1.02fr .98fr;
  max-width:1680px;margin-inline:auto;
  min-height:min(86vh, 800px);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,6vw,100px) clamp(28px,4.4vw,84px);
}
.eyebrow{
  display:flex;align-items:center;gap:12px;
  margin:0 0 30px;
  font-size:13px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--body-soft);
}
.tick{display:inline-block;width:26px;height:2px;background:var(--red);flex:none}

.hero h1{
  font-size:clamp(48px, 6.8vw, 104px);
  font-weight:900;line-height:.94;letter-spacing:-.04em;
  color:var(--ink);margin:0 0 30px;
}
.hero h1 em{font-style:normal;color:var(--red)}

.hero-lead{
  max-width:32em;font-size:clamp(17px,1.35vw,21px);line-height:1.62;
  color:var(--body);margin:0 0 38px;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.hero-meta{margin:0;font-size:14px;color:var(--body-soft)}

.hero-media{position:relative;overflow:hidden;background:var(--paper-deep)}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
/* weicher Verlauf ins Papier, damit das Foto nicht abgeschnitten wirkt */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg, var(--paper) 0%, rgba(250,248,244,.55) 14%, transparent 42%);
}
.hero-stamp{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:16px;
  padding:20px 28px;
  background:var(--red);color:#fff;
}
.stamp-num{font-size:34px;font-weight:900;letter-spacing:-.03em;line-height:1}
.stamp-txt{font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;opacity:.92}

/* Laufband */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);
  overflow:hidden;padding:15px 0;
}
.marquee-track{
  display:flex;align-items:center;gap:34px;width:max-content;
  animation:slide 46s linear infinite;
}
.marquee-track span{
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--body-soft);white-space:nowrap;
}
.marquee-track i{width:5px;height:5px;background:var(--red);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none}}

@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-media{order:-1;height:min(58vh,440px)}
  .hero-media::after{background:linear-gradient(180deg, transparent 55%, var(--paper) 100%)}
  .hero-copy{padding:40px var(--gut) 54px}
  .hero-stamp{padding:14px 20px}
  .stamp-num{font-size:27px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · ZAHLENBAND
   ═══════════════════════════════════════════════════════════════════════════ */

.stats{background:var(--paper);border-bottom:1px solid var(--line)}
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding-block:clamp(40px,4.6vw,64px);
}
.stat{padding-right:26px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-num{
  display:block;font-size:clamp(40px,4.8vw,66px);font-weight:900;
  letter-spacing:-.04em;line-height:1;color:var(--ink);margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.stat-unit{font-size:.42em;font-weight:800;margin-left:.18em;letter-spacing:0}
.stat-phrase{font-size:clamp(25px,2.7vw,38px);line-height:1.08;letter-spacing:-.03em}
.stat-lbl{display:block;font-size:15px;line-height:1.42;color:var(--body-soft);font-weight:600}

@media (max-width: 780px){
  .stats-grid{grid-template-columns:1fr 1fr;gap:30px 0}
  .stat:nth-child(2n){border-right:0}
  .stat:last-child{grid-column:1 / -1;border-right:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   3 · ÜBER UNS
   ═══════════════════════════════════════════════════════════════════════════ */

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,88px);align-items:center}
.about-media{position:relative;overflow:hidden}
.about-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about-badge{
  position:absolute;right:0;bottom:0;
  background:var(--ink);color:#fff;
  padding:22px 26px;max-width:290px;
}
.about-badge strong{display:block;font-size:17px;font-weight:800;line-height:1.25;margin-bottom:6px;color:#fff}
.about-badge span{font-size:13px;color:rgba(255,255,255,.66);line-height:1.4}

.about-copy h2{font-size:clamp(29px,3.6vw,48px);margin:0 0 26px;color:var(--ink)}
.about-copy p{max-width:38em}
.about-kicker{
  margin-top:26px;padding-left:20px;
  border-left:3px solid var(--red);
  font-weight:700;color:var(--ink);
}

@media (max-width: 900px){
  .about-grid{grid-template-columns:1fr}
  .about-badge{position:static;max-width:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · DREI GRÜNDE — Haarlinien statt Farbblock
   ═══════════════════════════════════════════════════════════════════════════ */

.reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.reason{
  padding:clamp(30px,2.8vw,46px) clamp(24px,2.2vw,38px) clamp(30px,2.8vw,46px) 0;
  border-right:1px solid var(--line);
}
.reason:last-child{border-right:0;padding-right:0}
.reason + .reason{padding-left:clamp(24px,2.2vw,38px)}
.reason-num{
  display:block;font-size:44px;font-weight:900;letter-spacing:-.04em;
  color:var(--red);margin-bottom:18px;line-height:1;opacity:.9;
}
.reason h3{font-size:clamp(21px,1.9vw,28px);margin:0 0 16px;line-height:1.16;color:var(--ink)}
.reason p{margin:0;font-size:16.5px;line-height:1.65;color:var(--body)}

@media (max-width: 860px){
  .reasons-grid{grid-template-columns:1fr}
  .reason{border-right:0;border-bottom:1px solid var(--line);padding:30px 0}
  .reason + .reason{padding-left:0}
  .reason:last-child{border-bottom:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   5 · BENEFITS
   ═══════════════════════════════════════════════════════════════════════════ */

.benefits{background:var(--paper)}
/* 3 Spalten: bei 4 wurde der Textkoerper nur 260px breit, dadurch liefen die
   Kacheln auf 6 bis 8 Zeilen und weit auseinander. Mit 372px Textbreite sind
   es 4 bis 5 Zeilen, und 12 Kacheln ergeben 4 saubere Reihen. */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;border-top:1px solid var(--line)}
.benefit{
  position:relative;
  background:transparent;padding:clamp(26px,2.2vw,36px) clamp(22px,1.8vw,30px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .35s var(--ease);
}
.benefit:nth-child(3n){border-right:0}
.benefit:hover{background:var(--card)}
.b-ico{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:20px;
  border:2px solid var(--red);color:var(--red);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.benefit:hover .b-ico{background:var(--red);color:#fff}
.b-ico svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.benefit h3{font-size:19px;margin:0 0 10px;line-height:1.22;color:var(--ink)}
.benefit p{margin:0;font-size:15.5px;line-height:1.6;color:var(--body-soft)}
/* Schluesselbegriffe im Fliesstext: nicht nur fetter, sondern auch dunkler.
   Fettung allein hebt sich vom weichen Grau des Fliesstextes kaum ab.
   Gilt fuer alle laengeren Textbloecke, damit die Auszeichnung ueberall
   gleich aussieht. */
.benefit p strong,
.about-copy p strong,
.reason p strong,
.job-body p strong,
.location-copy p strong{font-weight:800;color:var(--ink)}

@media (max-width: 1080px){
  .benefit-grid{grid-template-columns:repeat(2,1fr)}
  .benefit:nth-child(3n){border-right:1px solid var(--line)}
  .benefit:nth-child(2n){border-right:0}
}
@media (max-width: 560px){
  .benefit-grid{grid-template-columns:1fr}
  .benefit{border-right:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · BEREICHE
   ═══════════════════════════════════════════════════════════════════════════ */

.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.area{position:relative;overflow:hidden;background:var(--ink)}
.area img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .9s var(--ease-out), opacity .5s var(--ease);
  opacity:.82;
}
.area:hover img{transform:scale(1.06);opacity:.62}
.area-body{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px 26px;
  background:linear-gradient(0deg, rgba(23,20,15,.94) 22%, rgba(23,20,15,0) 100%);
  transform:translateY(0);
  transition:transform .5s var(--ease-out);
}
.area:hover .area-body{transform:translateY(-4px)}
.area-body h3{font-size:20px;color:#fff;margin:0 0 7px;line-height:1.2}
.area-body p{margin:0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.78);max-width:44ch}
.area-wide{grid-column:span 2}
/* 8/3 aus einem 4/3-Foto zeigt nur 52 % der Hoehe. Mittig zentriert lag der
   Kopf des Zimmerers im abgeschnittenen Teil, zu sehen war nur der Rumpf.
   Der Ausschnitt sitzt jetzt oben, dadurch sind beide Gesichter im Bild. */
.area-wide img{aspect-ratio:8/3;object-position:50% 17%}
.area-wide .area-body h3{font-size:25px}

@media (max-width: 900px){
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .area-wide{grid-column:span 2}
  .area-wide img{aspect-ratio:16/9}
}
@media (max-width: 560px){
  .areas-grid{grid-template-columns:1fr}
  .area-wide{grid-column:span 1}
  .area-wide img{aspect-ratio:4/3}
}

/* ═══════════════════════════════════════════════════════════════════════════
   7 · ZITAT — großes Zitat auf Papier
   ═══════════════════════════════════════════════════════════════════════════ */

.quote{border-top:1px solid var(--line)}
.quote-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4.6vw,78px);align-items:center}
.quote-media{overflow:hidden}
.quote-media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.quote-copy{position:relative;padding-top:56px}
.quote-mark{
  position:absolute;top:0;left:0;
  width:52px;height:37px;
  fill:var(--red);
}
.quote-copy blockquote{
  margin:0 0 30px;
  font-size:clamp(23px,2.7vw,38px);font-weight:700;line-height:1.26;
  letter-spacing:-.025em;color:var(--ink);
}
.quote-author{margin:0 0 12px;font-size:16px;color:var(--body-soft)}
.quote-author strong{color:var(--ink);font-weight:800}
.quote-sub{margin:0;font-size:15.5px;line-height:1.6;color:var(--body-soft);max-width:36em}

@media (max-width: 860px){
  .quote-grid{grid-template-columns:1fr}
  /* Kein Querformat aus einem Hochformat: 4/3 zeigte nur die mittleren 60 %
     des Bildes, der Kopf sitzt aber bei 8 bis 31 % der Hoehe und war
     abgeschnitten. Das Portraet bleibt ein Portraet. */
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · ALLTAG
   ═══════════════════════════════════════════════════════════════════════════ */

.team-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);margin-bottom:clamp(40px,4.4vw,70px)}
.team-photos figure{margin:0;overflow:hidden}
.team-photos img{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform .9s var(--ease-out);
}
.team-photos figure:hover img{transform:scale(1.05)}
.team-photos figcaption{
  margin-top:11px;font-size:13px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--body-soft);
}
.team-photos figure:nth-child(2){transform:translateY(28px)}
.team-points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.8vw,44px);padding-top:clamp(16px,2vw,30px)}
.team-points h3{font-size:20px;margin:0 0 10px;padding-top:18px;border-top:2px solid var(--red);display:inline-block;color:var(--ink)}
.team-points p{margin:0;font-size:16px;line-height:1.62;color:var(--body-soft)}

@media (max-width: 860px){
  .team-photos{grid-template-columns:1fr 1fr}
  .team-photos figure:nth-child(2){transform:none}
  .team-photos figure:nth-child(3){display:none}
  .team-points{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════════
   9 · STELLEN
   ═══════════════════════════════════════════════════════════════════════════ */

.jobs{background:var(--paper)}
.jobs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.jobs-head .sec-h2{margin-bottom:0}

.job{background:var(--card);border:1px solid var(--line)}
.job-main{
  display:grid;grid-template-columns:.85fr 1.15fr;margin-top:clamp(34px,4vw,56px);
  box-shadow:0 30px 70px -50px rgba(23,20,15,.5);
}
.job-media{overflow:hidden}
.job-media img{
  width:100%;height:100%;min-height:280px;object-fit:cover;
  transition:transform 1s var(--ease-out);
}
.job-main:hover .job-media img{transform:scale(1.04)}
.job-body{padding:clamp(28px,3vw,52px);display:flex;flex-direction:column}
.job-body h3{font-size:clamp(23px,2.3vw,33px);margin:0 0 10px;line-height:1.14;color:var(--ink)}
.job-meta{
  margin:0 0 20px;font-size:13.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);
}
.job-desc{font-size:16.5px;line-height:1.66;color:var(--body);margin-bottom:22px}
.job-list{margin:0 0 28px}
.job-list li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:16px;line-height:1.5;color:var(--ink);font-weight:600;
}
.job-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:11px;height:2px;background:var(--red);
}
.job-body .btn{align-self:flex-start;margin-top:auto}

/* Sekundäre Stellen: bewusst kleiner und ruhiger als die Zimmererstelle */
.jobs-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);margin-top:clamp(24px,2.6vw,40px)}
.job-side{background:transparent;border:0;border-top:2px solid var(--line)}
.job-side .job-body{padding:22px 0 0}
.job-kicker{
  margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--body-soft);
}
.job-side h3{font-size:20px;margin:0 0 8px;line-height:1.22}
.job-side .job-meta{font-size:12.5px;margin-bottom:12px}
.job-side .job-desc{font-size:15.5px;line-height:1.6;margin-bottom:16px}
.job-link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15px;font-weight:800;color:var(--red);text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .2s var(--ease);
}
.job-link::after{content:"→";transition:transform .25s var(--ease)}
.job-link:hover{border-bottom-color:var(--red)}
.job-link:hover::after{transform:translateX(3px)}

@media (max-width: 900px){
  .job-main{grid-template-columns:1fr}
  .jobs-row{grid-template-columns:1fr}
  .job-media img{min-height:220px;aspect-ratio:16/9}
}

/* ═══════════════════════════════════════════════════════════════════════════
   10 · VERGLEICH
   ═══════════════════════════════════════════════════════════════════════════ */

.compare-table{border-top:1px solid var(--line)}
.compare-head{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,50px);
  padding:16px 0;
}
.compare-head span{
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--body-soft);
}
.compare-head span:last-child{color:var(--red)}
.compare-row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,50px);
  padding:19px 0;border-top:1px solid var(--line);
  transition:background .3s var(--ease);
}
.compare-row:hover{background:var(--card)}
.c-no,.c-yes{position:relative;padding-left:32px;font-size:16.5px;line-height:1.5}
.c-no{color:var(--body-soft)}
.c-yes{color:var(--ink);font-weight:700}
.c-no::before,.c-yes::before{
  position:absolute;left:0;top:0;font-size:17px;font-weight:900;line-height:1.5;
}
.c-no::before{content:"✕";color:rgba(23,20,15,.26)}
.c-yes::before{content:"✓";color:var(--red)}

@media (max-width: 700px){
  .compare-head{display:none}
  .compare-row{grid-template-columns:1fr;gap:8px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   11 · PASST DAS
   ═══════════════════════════════════════════════════════════════════════════ */

.fit{background:var(--paper)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fit-col{background:transparent;padding:clamp(30px,3.4vw,54px) clamp(26px,3vw,48px) clamp(30px,3.4vw,54px) 0}
.fit-col + .fit-col{border-left:1px solid var(--line);padding-left:clamp(26px,3vw,48px);padding-right:0}
.fit-col h3{font-size:clamp(21px,2.1vw,29px);margin:0 0 24px;color:var(--ink)}
.fit-col li{
  position:relative;padding-left:32px;margin-bottom:13px;
  font-size:17px;line-height:1.5;
}
.fit-yes li{color:var(--ink);font-weight:600}
.fit-yes li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}
.fit-no li{color:var(--body-soft)}
.fit-no li::before{content:"✕";position:absolute;left:0;color:rgba(23,20,15,.26);font-weight:900}

@media (max-width: 700px){
  .fit-grid{grid-template-columns:1fr}
  .fit-col{padding:30px 0}
  .fit-col + .fit-col{border-left:0;border-top:1px solid var(--line);padding-left:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   12 · ABLAUF
   ═══════════════════════════════════════════════════════════════════════════ */

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,44px);counter-reset:s}
.steps li{position:relative;padding-top:26px;border-top:2px solid var(--line)}
/* Der Balken wird ueber scaleX gezogen, nicht ueber width. Gleiche Optik,
   aber transform laeuft auf der GPU, waehrend eine Breitenaenderung pro Bild
   neu umbricht. Genauso geloest wie der Strich an .sec-label. */
.steps li::after{
  content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out);
}
.steps li.in::after{transform:scaleX(1)}
.step-num{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;margin-bottom:18px;
  background:var(--red);color:#fff;
  font-size:16px;font-weight:900;
}
.steps h3{font-size:20px;margin:0 0 9px;line-height:1.22;color:var(--ink)}
.steps p{margin:0;font-size:16px;line-height:1.6;color:var(--body-soft)}

@media (max-width: 900px){.steps{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   13 · FAQ
   ═══════════════════════════════════════════════════════════════════════════ */

.faq{background:var(--paper)}
.faq-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,4.6vw,80px);align-items:start}
.faq-intro{position:sticky;top:32px}
.faq-intro .sec-h2{margin-bottom:26px}
.faq-help{font-size:16px;color:var(--body-soft)}
.faq-tel{font-size:24px;font-weight:800;color:var(--red);text-decoration:none;letter-spacing:-.01em}
.faq-tel:hover{text-decoration:underline}

.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  position:relative;
  padding:23px 46px 23px 0;
  font-size:18px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;
  transition:color .2s var(--ease);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--red)}
.faq-list summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:13px;height:13px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list details p{margin:0 0 24px;font-size:16.5px;line-height:1.65;color:var(--body);max-width:46em}
.faq-list details a{color:var(--red);font-weight:600}

@media (max-width: 860px){
  .faq-wrap{grid-template-columns:1fr}
  .faq-intro{position:static}
}

/* ═══════════════════════════════════════════════════════════════════════════
   14 · BEWERBUNG — weiße Karte auf Papier
   ═══════════════════════════════════════════════════════════════════════════ */

.apply{border-top:1px solid var(--line)}
.apply-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.6vw,80px);align-items:start}
.apply-lead{font-size:17.5px;line-height:1.65;max-width:34em;color:var(--body)}
.apply-points{margin:0 0 34px}
.apply-points li{
  position:relative;padding-left:30px;margin-bottom:12px;
  font-size:16.5px;color:var(--ink);font-weight:600;
}
.apply-points li::before{content:"✓";position:absolute;left:0;color:var(--red);font-weight:900}
.apply-alt{padding-top:26px;border-top:1px solid var(--line)}
.apply-alt p{margin:0 0 8px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--body-soft)}
.apply-tel{display:block;font-size:28px;font-weight:900;color:var(--ink);text-decoration:none;letter-spacing:-.025em}
.apply-tel:hover{color:var(--red)}
.apply-mail{display:inline-block;margin-top:6px;font-size:16px;color:var(--body-soft);text-decoration:none}
.apply-mail:hover{color:var(--red);text-decoration:underline}

.apply-form-wrap{
  background:var(--card);padding:clamp(26px,3vw,46px);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -60px rgba(23,20,15,.6);
}
.field{margin-bottom:19px}
.field label{
  display:block;margin-bottom:7px;
  font-size:14px;font-weight:800;letter-spacing:.04em;color:var(--ink);
}
.field label em{font-style:normal;font-weight:500;color:var(--body-soft);letter-spacing:0}
.field label span{color:var(--red)}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea{
  width:100%;padding:14px 16px;
  font-family:inherit;font-size:16.5px;color:var(--ink);
  background:var(--paper);border:2px solid transparent;border-radius:2px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--red);background:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#a89f94}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red);background:#fdf4f3}
.err{display:block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--red);min-height:0}

.field-check{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;margin-bottom:26px}
.field-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red);flex:none}
.field-check label{margin:0;font-size:14px;font-weight:500;line-height:1.5;color:var(--body-soft);letter-spacing:0}
.field-check label a{color:var(--red);font-weight:700}
.field-check .err{grid-column:1 / -1}
.field-check.invalid label{color:var(--red)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{margin:14px 0 0;font-size:13.5px;text-align:center;color:var(--body-soft)}
.form-status{margin-top:16px;font-size:16px;font-weight:700;line-height:1.5}
.form-status.ok{color:#1d7a4a}
.form-status.bad{color:var(--red)}
.form-status a{color:var(--red)}

.apply-form.sent .field,.apply-form.sent button,.apply-form.sent .form-note{display:none}

@media (max-width: 860px){.apply-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════════
   15 · STANDORT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gleich breite Spalten: links Foto und Text, rechts die Karte. */
.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,3.4vw,56px);align-items:stretch}
.location-copy p{max-width:34em}
.location-copy address{
  font-style:normal;margin:26px 0;padding-left:20px;
  border-left:3px solid var(--red);
  font-size:17px;line-height:1.7;color:var(--ink);
}
.location-copy address a{color:var(--red);font-weight:700;text-decoration:none}
.location-copy address a:hover{text-decoration:underline}
.location-media{overflow:hidden;margin-bottom:clamp(28px,3vw,44px)}
.location-media img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ── Karte ────────────────────────────────────────────────────────────────
   Zwei Klicks: erst die Schaltflaeche, dann der Rahmen von Google. Vorher
   geht keine Anfrage raus. Beide Zustaende teilen sich dieselbe Flaeche,
   damit beim Laden nichts springt. */
/* Oben angebunden statt ueber die volle Spaltenhoehe gestreckt: die linke
   Spalte ist durch die grosse Schlagzeile deutlich hoeher, die Karte stuende
   sonst zu drei Vierteln leer. */
.location-map{position:relative;display:flex;align-self:start}
.map-load{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:40px 34px;min-height:520px;
  background:var(--paper-deep);border:0;cursor:pointer;
  font:inherit;color:var(--body);text-align:center;
  transition:background var(--t-ui) var(--spring);
}
.map-load:hover{background:#ece5da}
.map-load:active{transform:scale(.995);transition-duration:var(--t-press)}
.map-pin{display:block;width:40px;height:40px;margin-bottom:4px}
.map-pin svg{width:100%;height:100%;fill:none;stroke:var(--red);stroke-width:1.6}
.map-load strong{font-size:18px;font-weight:800;color:var(--ink)}
.map-hint{max-width:34ch;font-size:13.5px;line-height:1.55;color:var(--body-soft)}
.location-map iframe{display:block;width:100%;min-height:520px;border:0}

@media (max-width: 860px){
  .location-grid{grid-template-columns:1fr}
  .map-load,.location-map iframe{min-height:340px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   16 · SCHLUSS-CTA — Foto trägt den Abschluss, kein Farbblock
   ═══════════════════════════════════════════════════════════════════════════ */

.closer{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
/* Der Abschnitt ist deutlich breiter als hoch, cover schneidet also oben und
   unten ab. Mittig zentriert lagen genau die Koepfe im abgeschnittenen Teil.
   object-position holt den Ausschnitt nach oben, die groessere Bauhoehe
   unten laesst zusaetzlich mehr vom Bild stehen. */
.closer-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 22%;
  opacity:.5;z-index:-1;
}
.closer::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(40,26,20,.62), rgba(28,18,14,.86));
}
/* Oben mehr Luft als unten: die Leute laufen im oberen Drittel durchs Bild,
   der Text setzt darunter an. Symmetrische Innenabstaende haetten die
   Zeile genau auf die Gesichter gelegt. */
.closer-inner{
  text-align:center;
  padding-top:clamp(210px,19vw,340px);
  padding-bottom:clamp(96px,9vw,150px);
}
/* Schmale Schirme schneiden waagrecht statt senkrecht. Mittig zentriert
   stand der linke Mann halb im Bildrand. Der Ausschnitt sitzt hier auf den
   rechten drei, die dadurch vollstaendig im Bild sind. */
@media (max-width: 700px){
  .closer-bg{object-position:68% 26%}
}
.closer h2{font-size:clamp(33px,5.2vw,70px);color:#fff;margin:0 0 18px;letter-spacing:-.04em}
.closer p{font-size:18px;color:rgba(255,255,255,.78);margin:0 0 34px}
.closer .btn-primary::before{background:#fff}
.closer .btn-primary:hover{color:var(--ink);border-color:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   TO-TOP
   ═══════════════════════════════════════════════════════════════════════════ */

.to-top{
  position:fixed;right:22px;bottom:22px;z-index:180;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:var(--red);color:#fff;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s var(--ease);
  box-shadow:0 12px 30px -14px rgba(190,52,43,.9);
}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top:hover{background:var(--ink)}
.to-top svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════════════════════════════════════════════════════════════
   BEWEGUNG — Reveal mit Maske, Parallax auf Bildern
   ═══════════════════════════════════════════════════════════════════════════ */

.rv{
  opacity:0;transform:translateY(30px);
  clip-path:inset(0 0 12% 0);
  transition:opacity var(--t-enter) var(--spring), transform var(--t-enter) var(--spring),
             clip-path var(--t-enter) var(--spring);
}
.rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* Bilder wandern beim Scrollen minimal gegen die Leserichtung */
.px-wrap{overflow:hidden}
.px{will-change:transform}

/* §14 Reduzierte Transparenz: Milchglas wird zu deckender Fläche */
@media (prefers-reduced-transparency: reduce){
  .hb-bar,.to-top,.variant-switch{backdrop-filter:none !important}
  .hb-bar{background:var(--paper) !important}
}
/* §14 Erhöhter Kontrast: klare Kanten statt zarter Haarlinien */
@media (prefers-contrast: more){
  :root{--line:rgba(23,20,15,.4);--line-strong:rgba(23,20,15,.6)}
  .btn{border-width:2px}
  .field input,.field select,.field textarea{border-color:var(--line-strong)}
}

@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;clip-path:none;transition:none}
  .steps li::after{transform:scaleX(1);transition:none}
  .px{transform:none !important}
  .sec-label::before{transform:scaleX(1);transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   3b · ZEITLEISTE
   Waagrechte Linie mit quadratischen Marken, darunter Jahr und kurzer Text.
   Die Linie liegt auf einem Pseudoelement hinter den Marken, damit sie
   zwischen erster und letzter Marke endet und nicht ins Leere laeuft.
   ═══════════════════════════════════════════════════════════════════════════ */

.tl-kicker{
  margin:0 0 clamp(34px,3.4vw,52px);
  font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--body-soft);text-align:center;
}

.tl-track{
  position:relative;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(8px,1vw,16px);
  margin:0;padding:0;list-style:none;
}
/* Die Linie beginnt und endet in der Mitte der aeusseren Marken */
.tl-track::before{
  content:"";position:absolute;top:9px;height:1px;
  left:calc(100% / 12);right:calc(100% / 12);
  background:var(--line-strong);
}

.tl-item{position:relative;text-align:center;padding-top:0}
.tl-marker{
  display:block;width:19px;height:19px;margin:0 auto 18px;
  background:var(--red);
  position:relative;z-index:1;
}
.tl-year{
  display:block;margin-bottom:9px;
  font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--red);
}
/* Keine Breitenbremse: die Spalte ist ohnehin schmal, ein zusaetzliches
   max-width haette den Text auf zwei Drittel davon eingeschnuert und die
   Zeilenzahl unnoetig hochgetrieben. */
.tl-item p{
  margin:0;
  font-size:14px;line-height:1.45;color:var(--body);
}

.tl-close{
  margin:clamp(40px,4vw,62px) auto 0;max-width:76ch;
  text-align:center;font-size:17px;line-height:1.6;color:var(--body);
}
.tl-close strong{font-weight:800;color:var(--ink)}

/* Schmal: die Leiste kippt in die Senkrechte, Linie wandert nach links */
@media (max-width: 860px){
  .tl-track{grid-template-columns:1fr;gap:0}
  .tl-track::before{
    top:9px;bottom:9px;height:auto;
    left:9px;right:auto;width:1px;
  }
  .tl-item{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:20px;text-align:left;
    padding-bottom:clamp(24px,4vw,34px);
  }
  .tl-marker{margin:0;grid-row:1 / span 2}
  .tl-year{margin-bottom:4px;align-self:center}
  .tl-item p{max-width:none;margin-inline:0;grid-column:2}
  .tl-close{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA-ZEILE
   Kurze Ueberleitung zum Formular, verteilt ueber die Seite. Bewusst schmal
   gehalten: sie soll den Lesefluss anbieten, nicht unterbrechen.
   ═══════════════════════════════════════════════════════════════════════════ */

.cta-row{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:clamp(16px,2vw,30px);
  margin-top:clamp(46px,5vw,76px);
  padding-top:clamp(34px,3.6vw,54px);
  border-top:1px solid var(--line);
}
.cta-row p{
  margin:0;font-size:clamp(17px,1.5vw,21px);font-weight:700;
  color:var(--ink);letter-spacing:-.012em;
}

@media (max-width: 560px){
  .cta-row{flex-direction:column;align-items:stretch;text-align:center}
  .cta-row .btn{width:100%}
}

}