/* =========================================================================
   Tischlerei Giefer – Website-Styles
   Basis: design-system/tokens.css (Giefer Design System)
   Abweichungen fürs BFSG (WCAG 2.1 AA) sind mit "a11y:" kommentiert.
   ========================================================================= */

:root {
  --header-h: 76px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 9vw, 120px);
  --focus: var(--color-orange-700);        /* a11y: 3,2 : 1 auf Weiß (orange-500 nur 2,1 : 1) */
  --border-input: var(--gray-500);         /* a11y: Feldrahmen ≥ 3 : 1 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--leading-relaxed);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: var(--weight-light); }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
main:focus { outline: none; }

/* a11y: sichtbarer Fokus */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .lightbox :focus-visible { outline-color: #fff; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 100;
  background: var(--gray-900); color: #fff; padding: 12px 20px; text-decoration: none; font-weight: var(--weight-medium);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Typografie ---------- */
.h1, .h2, .h3, .hero-title, .statement-text, .cta-title, .service-title, .card-title, .mega-claim, .footer-name {
  font-family: var(--font-display);
  text-transform: lowercase;
  letter-spacing: var(--tracking-tight);
}
.h1 { font-size: clamp(2.5rem, 6vw, var(--text-4xl)); line-height: var(--leading-tight); }
.h2 { font-size: clamp(1.875rem, 4vw, var(--text-2xl)); line-height: var(--leading-snug); }
.h3 { font-size: var(--text-lg); font-weight: var(--weight-medium); margin: 2rem 0 .5rem; }
.lead { font-size: clamp(1.125rem, 1.6vw, var(--text-lg)); color: var(--text-secondary); line-height: var(--leading-normal); max-width: 40em; }
.eyebrow, .hero-eyebrow {
  display: block; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 var(--space-4);
}
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: var(--weight-medium); text-decoration: none;
  text-transform: lowercase; color: var(--text-primary);
  border-bottom: 2px solid var(--brand-primary); padding-bottom: 2px;
}
.link-arrow::after { content: "→"; transition: transform var(--duration-normal) var(--ease-standard); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--text-primary); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 14px 24px; border: 1px solid var(--btn-bd); border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--weight-medium) var(--text-base)/1 var(--font-body); letter-spacing: .02em; text-transform: lowercase;
  text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: var(--text-sm); }   /* a11y: Zielgröße ≥ 44 px */
.btn-lg { min-height: 56px; padding: 18px 32px; font-size: var(--text-md); }
/* a11y: dunkler Text auf Orange (8,5 : 1) statt Weiß (2,1 : 1) */
.btn-primary { --btn-bg: var(--brand-primary); --btn-fg: var(--gray-900); }
.btn-primary:hover { --btn-bg: var(--brand-primary-hover); }
.btn-primary:active { --btn-bg: var(--brand-primary-active); }
/* a11y: Weiß auf taupe-600 (5,7 : 1) */
.btn-secondary { --btn-bg: var(--color-taupe-600); --btn-fg: #fff; }
.btn-secondary:hover { --btn-bg: #57524A; }
.btn-outline { --btn-bd: var(--gray-500); }
.btn-outline:hover { --btn-bg: var(--surface-muted); --btn-bd: var(--gray-900); }
.btn-ghost-light { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); }
.btn-ghost-light:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; }

/* =========================================================================
   Header + Mega-Menü
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}
/* Nur Desktop: backdrop-filter würde das mobile Vollbild-Menü (position: fixed) auf die Header-Höhe begrenzen */
@media (min-width: 1081px) { @supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(14px); } } }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-bar { display: flex; align-items: center; gap: var(--space-8); height: var(--header-h); }
.logo { flex: none; display: block; padding: 6px 0; }
.logo img { width: 170px; height: auto; }

.main-nav { margin-left: auto; }
.main-nav > ul { display: flex; gap: clamp(16px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.main-nav li { display: flex; align-items: center; position: relative; }
.main-nav a {
  display: block; padding: 26px 0 24px; text-decoration: none; text-transform: lowercase;
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary);
  border-bottom: 2px solid transparent; transition: border-color var(--duration-fast), color var(--duration-fast);
}
.main-nav a:hover, .main-nav a[aria-current] { border-bottom-color: var(--brand-primary); }
.mega-toggle {
  display: grid; place-items: center; width: 28px; height: 44px; margin-left: 2px;
  background: none; border: 0; color: var(--text-primary); cursor: pointer; padding: 0;
}
.mega-toggle .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.mega-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.header-cta { flex: none; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-page); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
}
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-inner { display: grid; grid-template-columns: 260px repeat(4, minmax(0, 1fr)); gap: var(--space-10); padding-top: var(--space-10); padding-bottom: var(--space-10); }
.mega-claim { font-size: var(--text-xl); line-height: var(--leading-snug); margin-bottom: var(--space-5); }
.mega-preview { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--space-5); }
.mega-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--duration-normal) var(--ease-standard); }
.mega-preview img.is-fading { opacity: 0; }
.mega-group {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-default);
}
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a {
  display: block; padding: 7px 0; text-decoration: none; text-transform: lowercase;
  font-family: var(--font-display); font-size: var(--text-md); color: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.mega-col a:hover, .mega-col a:focus-visible, .mega-col a[aria-current] { transform: translateX(4px); text-decoration: underline; text-decoration-color: var(--brand-primary); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.mega-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(22,22,27,.35); opacity: 0; transition: opacity var(--duration-normal); }
.mega-backdrop.is-visible { opacity: 1; }

/* Mobil */
.menu-toggle {
  display: none; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer; color: var(--text-primary);
  font: var(--weight-medium) var(--text-sm)/1 var(--font-body); text-transform: lowercase;
}
.menu-toggle-icon { position: relative; width: 22px; height: 12px; }
.menu-toggle-icon span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--duration-normal) var(--ease-standard), top var(--duration-normal) var(--ease-standard); }
.menu-toggle-icon span:first-child { top: 0; }
.menu-toggle-icon span:last-child { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { top: 5px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

@media (max-width: 1080px) {
  .main-nav, .header-cta, .mega, .mega-backdrop { display: none !important; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu {
    display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto;
    background: var(--surface-page); padding: var(--space-6) var(--gutter) var(--space-12);
    visibility: hidden; opacity: 0; transform: translateY(-12px);
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
  }
  .mobile-menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  body.menu-open { overflow: hidden; }
}
.mobile-nav, .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav > li { border-bottom: 1px solid var(--border-default); }
.mobile-nav > li > a, .mobile-nav summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 60px;
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-light); text-transform: lowercase;
  text-decoration: none; cursor: pointer; list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav details[open] summary .icon { transform: rotate(180deg); }
.mobile-nav details ul { padding: 0 0 var(--space-4); }
.mobile-nav details a { display: block; padding: 10px 0; text-decoration: none; text-transform: lowercase; font-size: var(--text-md); }
.mobile-group { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); padding: var(--space-4) 0 var(--space-1); }
.mobile-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--brand-primary); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mobile-contact { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.mobile-contact a:not(.btn) { font-size: var(--text-md); }

/* =========================================================================
   Hero (Startseite)
   ========================================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--gray-900);
  min-height: min(92svh, 900px); display: flex; flex-direction: column; justify-content: flex-end;
}
@supports not (height: 1svh) { .hero { min-height: min(92vh, 900px); } }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity 1.4s var(--ease-standard); }
.hero-slide.is-active { opacity: 1; }
.hero-slide picture, .hero-slide img { width: 100%; height: 100%; }
.hero-slide img { object-fit: cover; transform: scale(1.02); }
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active img { animation: kenburns 9s var(--ease-standard) both; }
}
@keyframes kenburns { from { transform: scale(1.14) translate3d(0, 1.5%, 0); } to { transform: scale(1.02) translate3d(0, 0, 0); } }
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* a11y: Text liegt unten links – dort ausreichend abdunkeln (≥ 4,5 : 1 auch über hellen Fotos) */
  background:
    linear-gradient(90deg, rgba(22,22,27,.62) 0%, rgba(22,22,27,.35) 45%, rgba(22,22,27,0) 75%),
    linear-gradient(180deg, rgba(22,22,27,.35) 0%, rgba(22,22,27,0) 25%, rgba(22,22,27,.25) 50%, rgba(22,22,27,.85) 100%);
}
.hero-title, .hero-lead, .hero-eyebrow, .service-title { text-shadow: 0 1px 24px rgba(22,22,27,.35); }
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(88px, 12vh, 140px); }
.hero-eyebrow { color: #fff; opacity: .92; }
.hero-title {
  display: block; font-weight: var(--weight-light); line-height: 1.02;
  font-size: clamp(3rem, 9vw, 7.5rem); max-width: 11ch;
}
.hero-title em { font-style: normal; color: var(--brand-primary); }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line > span { display: inline-block; }
.hero-lead { font-size: clamp(1.125rem, 1.8vw, 1.375rem); max-width: 34em; margin: var(--space-6) 0 var(--space-8); line-height: var(--leading-normal); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-controls {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);
}
.hero-dots { display: flex; gap: 4px; }
.hero-dot { width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
.hero-dot span { display: block; width: 28px; height: 3px; background: rgba(255,255,255,.45); position: relative; overflow: hidden; }
.hero-dot.is-active span::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill var(--slide-ms, 7000ms) linear both; }
.hero.is-paused .hero-dot.is-active span::after, .hero-dot.is-active span.no-anim::after { animation: none; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-pause {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(22,22,27,.35); border: 1px solid rgba(255,255,255,.6);
}
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }

/* Intro-Animation der Headline */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-title .line > span { transform: translateY(105%); animation: rise .9s var(--ease-out) forwards; }
  .js .hero-title .line:nth-child(2) > span { animation-delay: .12s; }
  .js .hero-eyebrow, .js .hero-lead, .js .hero-actions { opacity: 0; animation: fadeup .8s var(--ease-out) forwards; }
  .js .hero-eyebrow { animation-delay: .05s; }
  .js .hero-lead { animation-delay: .35s; }
  .js .hero-actions { animation-delay: .5s; }
}
@keyframes rise { to { transform: none; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Sektionen
   ========================================================================= */
.section { padding: var(--section-y) 0; }
.section-tight { padding: calc(var(--section-y) * .7) 0; }
.section-muted { background: var(--surface-muted); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-bottom: var(--space-8); }
.section-intro { margin: 0; max-width: 32em; color: var(--text-secondary); font-size: var(--text-md); }
.section-more { margin: var(--space-8) 0 0; }

/* Statement */
.statement { padding-bottom: calc(var(--section-y) * .35); }
.statement-text { font-size: clamp(1.75rem, 3.6vw, 3rem); line-height: 1.18; max-width: 22ch; max-width: 26em; font-weight: var(--weight-light); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid var(--border-default); }
.fact { padding-top: var(--space-6); position: relative; }
.fact::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--brand-primary); }
.fact dt { font-size: var(--text-sm); color: var(--text-secondary); text-transform: lowercase; margin-bottom: var(--space-2); }
.fact dd { margin: 0; font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1; font-variant-numeric: tabular-nums; }
.fact dd.fact-text { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.2; text-transform: lowercase; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bento-Grid */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(220px, 26vw); gap: 4px; }
@media (min-width: 1180px) { .bento { grid-auto-rows: 300px; } }
.bento-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 899px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; } .bento-big { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 260px; } .bento-big { grid-column: auto; } }

.card-overlay { position: relative; display: block; height: 100%; overflow: hidden; color: #fff; text-decoration: none; background: var(--gray-800); }
.card-overlay .card-media, .card-overlay picture, .card-overlay img { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-overlay img { object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.card-overlay:hover img, .card-overlay:focus-visible img { transform: scale(1.03); }
.card-overlay::after { content: ""; position: absolute; inset: 0; background: var(--overlay-protect); }
.card-overlay::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; height: 3px; width: 100%; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-out); }
.card-overlay:hover::before, .card-overlay:focus-visible::before { transform: scaleX(1); }
.card-overlay:focus-visible { outline-offset: -4px; outline-color: #fff; }
.card-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: var(--space-6); }
.card-title { font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.bento-big .card-title { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.card-sub { margin: 4px 0 0; font-size: var(--text-sm); text-transform: lowercase; }

/* Split */
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 560px; }
.split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.split-reverse .split-media { order: 2; }
.split-muted { background: var(--surface-muted); }
.split-media { position: relative; overflow: hidden; background: var(--surface-sunken); min-height: 340px; }
.split-media picture, .split-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.split-media img { object-fit: cover; }
.split-text { padding: clamp(48px, 7vw, 96px) clamp(24px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
.split-text .h2 { margin-bottom: var(--space-5); }
.split-text p { color: var(--text-secondary); font-size: var(--text-md); }
.split-text p:last-child { margin: var(--space-4) 0 0; }
@media (max-width: 899px) { .split, .split-reverse { grid-template-columns: 1fr; } .split-reverse .split-media { order: 0; } .split-media { aspect-ratio: 4/3; min-height: 0; } }

/* Strip (horizontal) */
.strip { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-4); }
.strip:focus-visible { outline-offset: -3px; }
/* .strip davor: sonst gewinnt ul[role="list"] { padding: 0 } */
.strip .strip-track { display: flex; gap: 4px; padding: 0 var(--gutter); width: max-content; }
.strip { scroll-padding-inline: var(--gutter); }   /* Einrasten bündig mit dem Inhalt, nicht am Bildschirmrand */
@media (min-width: 1180px) {
  .strip .strip-track { padding-left: calc((100vw - var(--container-max)) / 2 + var(--gutter)); }
  .strip { scroll-padding-left: calc((100vw - var(--container-max)) / 2 + var(--gutter)); }
}
.strip-item { flex: none; width: clamp(240px, 30vw, 380px); scroll-snap-align: start; }
.strip-item a { display: block; text-decoration: none; }
.strip-media { aspect-ratio: 1; overflow: hidden; background: var(--surface-sunken); }
/* <picture> muss die Kachel ausfüllen, sonst richtet sich das Bild nach seinem eigenen Seitenverhältnis */
.strip-media picture, .card-stacked .card-media picture, .gs-images picture { width: 100%; height: 100%; }
.strip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.strip-item a:hover img { transform: scale(1.03); }
.strip-label { display: inline-block; margin-top: var(--space-3); font-family: var(--font-display); font-size: var(--text-md); text-transform: lowercase; border-bottom: 2px solid transparent; transition: border-color var(--duration-fast); }
.strip-item a:hover .strip-label { border-bottom-color: var(--brand-primary); }

/* CTA-Band */
.cta-band { background: var(--gray-900); color: var(--gray-100); padding: clamp(64px, 9vw, 112px) 0; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-10); align-items: end; }
.cta-title { color: #fff; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.1; margin-bottom: var(--space-5); max-width: 14em; }
.cta-band p { color: var(--gray-200); max-width: 36em; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cta-phone { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; text-decoration: none; border-bottom: 2px solid var(--brand-primary); }
@media (max-width: 760px) { .cta-inner { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--gray-900); color: var(--gray-200); border-top: 1px solid var(--gray-700); font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-10); padding-top: var(--space-16); padding-bottom: var(--space-12); }
.footer-name { color: #fff; font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.footer-claim { color: var(--color-orange-500); margin-bottom: var(--space-4); }    /* Orange auf gray-900: 8,5 : 1 */
.footer-head { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-300); margin: 0 0 var(--space-4); }
.site-footer a { color: #fff; text-decoration-color: var(--color-orange-500); text-underline-offset: 4px; }
.site-footer a:hover { color: var(--color-orange-500); }
.site-footer address { margin-bottom: var(--space-4); }
.footer-links, .footer-legal { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a { text-decoration: none; text-transform: lowercase; }
.footer-insta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-members { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); border-top: 1px solid var(--gray-700); }
.footer-members .footer-head { margin: 0; }
.member-list { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.member { display: flex; align-items: center; justify-content: center; min-height: 72px; min-width: 160px; padding: var(--space-3) var(--space-5); background: #fff; color: var(--gray-900) !important; text-decoration: none; }
.member img { height: 56px; width: auto; max-width: 240px; }
.member-plain { background: none; padding: 0; min-width: 0; }
.member-plain img { height: 72px; }
.member-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
a.member:hover { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-6); border-top: 1px solid var(--gray-700); }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-6); }
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Unterseiten
   ========================================================================= */
.page-head { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(32px, 4vw, 56px); }
.page-head .h1 { margin-bottom: var(--space-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 var(--space-6); padding: 0; font-size: var(--text-sm); color: var(--text-secondary); text-transform: lowercase; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--gray-500); }
.breadcrumb a { color: var(--text-secondary); text-underline-offset: 3px; }
.notice { border-left: 3px solid var(--brand-primary); background: var(--surface-muted); padding: var(--space-4) var(--space-5); max-width: 44em; }

.chips ul { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--gray-500); text-decoration: none; text-transform: lowercase; font-weight: var(--weight-medium); transition: background var(--duration-fast), border-color var(--duration-fast); }
.chip:hover { background: var(--brand-primary-tint); border-color: var(--gray-900); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-8) 4px; }
.card-stacked { display: block; text-decoration: none; }
.card-stacked .card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--space-4); outline: 2px solid transparent; transition: outline-color var(--duration-fast); }
.card-stacked img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.card-stacked:hover img { transform: scale(1.03); }
.card-stacked:hover .card-media { outline-color: var(--brand-primary); }
.card-stacked .card-title { font-size: var(--text-lg); }
.card-stacked .card-sub { color: var(--text-secondary); }
.card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--color-taupe-100); }
.card-placeholder span { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-taupe-600); }

/* Leistung – Detail */
.service-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--gray-900); min-height: clamp(380px, 62vh, 640px); display: flex; align-items: flex-end; }
.service-hero-media, .service-hero-media picture, .service-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.service-hero-media img { object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .service-hero-media img { animation: kenburns 12s var(--ease-standard) both; } }
.service-hero-content { position: relative; z-index: 2; padding-top: var(--space-16); padding-bottom: clamp(40px, 6vw, 72px); }
.service-hero .breadcrumb ol, .service-hero .breadcrumb a { color: rgba(255,255,255,.92); }
.service-hero .breadcrumb li + li::before { color: rgba(255,255,255,.7); }
.service-title { font-size: clamp(2.5rem, 7vw, 5.5rem); line-height: 1.02; }
.service-hero-plain { background: var(--color-taupe-600); min-height: 360px; }
.service-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.service-text p { font-size: var(--text-md); max-width: 38em; }
.service-text .lead { font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--text-primary); font-family: var(--font-display); font-weight: var(--weight-light); line-height: 1.4; }
.service-aside { background: var(--surface-muted); padding: var(--space-8); position: sticky; top: calc(var(--header-h) + 24px); }
.aside-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); text-transform: lowercase; margin-bottom: var(--space-4); }
.checklist { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.checklist li { position: relative; padding: 10px 0 10px 28px; border-bottom: 1px solid var(--border-default); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--color-orange-700); border-bottom: 2px solid var(--color-orange-700); transform: rotate(-45deg); }
.aside-note { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
@media (max-width: 899px) { .service-body { grid-template-columns: 1fr; } .service-aside { position: static; } }

/* Galerie (Masonry über Spalten) */
.gallery { columns: 3 280px; column-gap: 4px; }
.gallery-item { break-inside: avoid; margin-bottom: 4px; }
.gallery-item a { display: block; overflow: hidden; position: relative; cursor: zoom-in; }
.gallery-item img { width: 100%; transition: transform var(--duration-slow) var(--ease-standard); }
.gallery-item a:hover img { transform: scale(1.03); }
.gallery-item a::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--brand-primary); transition: box-shadow var(--duration-fast); }
.gallery-item a:hover::after { box-shadow: inset 0 0 0 3px var(--brand-primary); }
.gallery-item a:focus-visible { outline-offset: -4px; outline-color: var(--gray-900); }

/* Lightbox */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(12,12,15,.96); color: #fff; }
.lightbox::backdrop { background: rgba(12,12,15,.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox-figure { margin: 0; display: grid; gap: var(--space-3); place-items: center; padding: 64px 72px; width: 100%; height: 100%; }
.lightbox-figure img { max-width: 100%; max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .lightbox[open] .lightbox-figure img { animation: lbin .35s var(--ease-out); } }
@keyframes lbin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.lightbox-caption { font-size: var(--text-sm); color: var(--gray-200); text-align: center; }
.lb-btn { position: absolute; width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.35); cursor: pointer; transition: background var(--duration-fast); }
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lightbox-figure { padding: 72px 8px 96px; } .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } }

/* Kontakt */
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
.contact-media { position: relative; background: var(--surface-sunken); }
.contact-media picture { position: sticky; top: var(--header-h); display: block; height: calc(100vh - var(--header-h)); }
.contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.contact-text { padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); max-width: 680px; }
.contact-text .h1 { margin-bottom: var(--space-4); }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: var(--space-8) 0; }
.contact-card { display: block; padding: var(--space-6); background: var(--surface-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color var(--duration-fast), background var(--duration-fast); }
.contact-card:hover { border-bottom-color: var(--brand-primary); background: var(--brand-primary-tint); }
.contact-label { display: block; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.contact-value { font-family: var(--font-display); font-size: var(--text-lg); overflow-wrap: anywhere; }
.contact-address { font-size: var(--text-md); margin-bottom: var(--space-4); }
@media (max-width: 899px) { .contact-split { grid-template-columns: 1fr; } .contact-media picture { position: static; height: auto; aspect-ratio: 4/3; } }
@media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }

/* =========================================================================
   Über uns, Ausbildung, Aktuelles
   ========================================================================= */
.narrow { max-width: 820px; }
.wide-media { position: relative; overflow: hidden; aspect-ratio: 21/9; max-height: 640px; width: 100%; background: var(--surface-sunken); }
.wide-media picture, .wide-media img { width: 100%; height: 100%; }
.wide-media img { object-fit: cover; object-position: 50% 40%; }
@media (max-width: 700px) { .wide-media { aspect-ratio: 4/3; } }

/* Zeitleiste */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline::before { content: ""; position: absolute; left: 7.5rem; top: 0; bottom: 0; width: 1px; background: var(--border-default); }
.timeline-item { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-10); padding: var(--space-6) 0; }
.timeline-item::after { content: ""; position: absolute; left: calc(7.5rem - 5px); top: calc(var(--space-6) + 18px); width: 11px; height: 11px; background: var(--brand-primary); }
.timeline-year { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.timeline-body { padding-left: var(--space-6); max-width: 40em; }
.timeline-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); text-transform: lowercase; margin-bottom: var(--space-2); }
.timeline-body p { color: var(--text-secondary); margin-bottom: var(--space-2); }
.timeline-link { font-size: var(--text-sm); font-weight: var(--weight-medium); text-underline-offset: 4px; text-decoration-color: var(--brand-primary); text-decoration-thickness: 2px; }
@media (max-width: 600px) {
  .timeline::before { left: 5px; }
  .timeline-item { grid-template-columns: 1fr; gap: var(--space-2); padding-left: var(--space-8); }
  .timeline-item::after { left: 0; top: calc(var(--space-6) + 10px); }
  .timeline-body { padding-left: 0; }
}

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-10) var(--space-6); }
.team-photo { aspect-ratio: 4/5; overflow: hidden; background: var(--color-taupe-100); display: grid; place-items: center; margin-bottom: var(--space-4); }
.team-photo picture, .team-photo img { width: 100%; height: 100%; }
.team-photo { position: relative; }
.team-photo-inner { position: absolute; inset: 0; }
.team-photo img { object-fit: cover; object-position: var(--fokus, 50% 30%); transition: transform var(--duration-slow) var(--ease-standard); }
.team-card:hover .team-photo img { transform: scale(1.03); }
.team-initials { font-family: var(--font-display); font-weight: var(--weight-light); font-size: 4rem; color: var(--color-taupe-600); letter-spacing: .02em; }
.team-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.team-role { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-taupe-600); margin: 4px 0 var(--space-3); }
.team-text { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

/* Ausbildung */
.job-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-10); align-items: end; background: var(--brand-primary-tint); border-left: 4px solid var(--brand-primary); padding: clamp(28px, 5vw, 56px); }
.job-card .h2 { margin-bottom: var(--space-5); }
.job-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.cta-phone-dark { font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; border-bottom: 2px solid var(--gray-900); }
@media (max-width: 760px) { .job-card { grid-template-columns: 1fr; } }
.award-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 4px; margin-bottom: var(--space-8); }
.award { background: var(--surface-muted); padding: var(--space-8) var(--space-6); border-top: 3px solid var(--brand-primary); }
.award-year { display: block; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-2xl); line-height: 1; margin-bottom: var(--space-4); }
.award-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); text-transform: lowercase; margin-bottom: var(--space-2); }
.award p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.gs-list { display: grid; gap: var(--space-12); }
.gs-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; padding-top: var(--space-8); border-top: 1px solid var(--border-strong); }
.gs-year { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: 1; margin-bottom: var(--space-3); }
.gs-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); text-transform: lowercase; }
.gs-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .14em; text-transform: uppercase; color: var(--color-taupe-600); margin: 4px 0 var(--space-3); }
.gs-text p:not(.gs-year):not(.gs-name) { color: var(--text-secondary); }
.gs-images { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.gs-images a { display: block; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.gs-images img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.gs-images a:hover img { transform: scale(1.04); }
@media (max-width: 899px) { .gs-item { grid-template-columns: 1fr; } .gs-images { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.azubi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 4px; }
.azubi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-5) var(--space-6); background: var(--surface-muted); border-left: 3px solid var(--brand-primary); }
.azubi-zeit { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.azubi-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.azubi-info { font-size: var(--text-sm); color: var(--color-taupe-600); }
.gs-info { background: var(--surface-page); border-left: 4px solid var(--brand-primary); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-12); max-width: 60em; }
.gs-info-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.gs-info p { margin: 0; color: var(--text-secondary); }
.gs-images a { position: relative; }
.gs-count { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,22,27,.55); color: #fff; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-light); pointer-events: none; }

/* Filter-Chips */
button.chip { background: var(--surface-page); font: inherit; font-weight: var(--weight-medium); color: var(--text-primary); cursor: pointer; gap: 8px; }
button.chip[aria-pressed="true"] { background: var(--gray-900); border-color: var(--gray-900); color: #fff; }
.chip-count { font-size: var(--text-xs); opacity: .8; font-variant-numeric: tabular-nums; }

/* Beitragskarten */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-12) var(--space-6); }
.post-card[hidden] { display: none; }
@media (min-width: 900px) { .post-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-link { display: block; text-decoration: none; height: 100%; }
.post-media { aspect-ratio: 3/2; overflow: hidden; background: var(--surface-sunken); margin-bottom: var(--space-4); outline: 2px solid transparent; transition: outline-color var(--duration-fast); }
.post-media picture, .post-media img { width: 100%; height: 100%; }
.post-media img { object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.post-link:hover .post-media { outline-color: var(--brand-primary); }
.post-link:hover img { transform: scale(1.03); }
.post-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--color-taupe-100); transition: background var(--duration-normal); }
.post-placeholder span { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--color-taupe-600); text-transform: lowercase; }
.post-placeholder .post-placeholder-word { font-size: var(--text-xl); padding: 0 var(--space-6); text-align: center; }
.post-link:hover .post-placeholder { background: var(--brand-primary-tint); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .1em; text-transform: uppercase; background: var(--color-taupe-100); color: var(--color-taupe-600); }
.tag-ausbildung, .tag-auszeichnung { background: var(--brand-primary-tint); color: #8A4B06; }   /* a11y: 5,8 : 1 */
.post-date { font-size: var(--text-sm); color: var(--text-secondary); }
.post-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-snug); margin-bottom: var(--space-2); }
.post-link:hover .post-title { text-decoration: underline; text-decoration-color: var(--brand-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-teaser { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }

/* Beitrag */
.post-head { max-width: 900px; margin-left: auto; margin-right: auto; }
.post-h1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.12; letter-spacing: var(--tracking-tight); }
.post-hero { margin-bottom: var(--space-10); }
.post-hero img { width: 100%; max-height: 720px; object-fit: cover; }
.post-body { max-width: 900px; padding-bottom: var(--space-8); }
.post-body p { font-size: var(--text-md); max-width: 40em; }
.post-body .lead { font-family: var(--font-display); font-weight: var(--weight-light); font-size: clamp(1.25rem, 2vw, 1.625rem); color: var(--text-primary); line-height: 1.45; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: var(--space-12); padding-bottom: var(--space-6); }
.post-nav-link { display: block; padding: var(--space-6); background: var(--surface-muted); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color var(--duration-fast), background var(--duration-fast); }
.post-nav-link:hover { border-bottom-color: var(--brand-primary); background: var(--brand-primary-tint); }
.post-nav-next { text-align: right; }
.post-nav-label { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.post-nav-title { font-family: var(--font-display); font-size: var(--text-md); }
@media (max-width: 600px) { .post-nav { grid-template-columns: 1fr; } .post-nav-next { text-align: left; } }

/* Leistungsseiten: Zwischenüberschriften, Ablauf, Partner */
.service-h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(1.25rem, 2vw, 1.5rem); text-transform: lowercase; margin: var(--space-10) 0 var(--space-3); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: none; }
.step { background: var(--surface-muted); padding: var(--space-8) var(--space-6); position: relative; overflow: hidden; }
.step::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--brand-primary); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
.step.is-visible::after, html:not(.js) .step::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .step::after { transform: scaleX(1); transition: none; } }
.step-nr { display: block; font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-3xl); line-height: 1; color: var(--color-taupe-600); margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.step-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.step p { color: var(--text-secondary); margin: 0; font-size: var(--text-sm); }
@media (max-width: 899px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.partner-line { margin: var(--space-6) 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.partner-line a { color: var(--text-primary); text-decoration-color: var(--brand-primary); text-underline-offset: 3px; }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 4px; }
.partner-card { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--space-6); background: var(--surface-page); text-decoration: none; border-bottom: 3px solid transparent; transition: border-color var(--duration-fast), background var(--duration-fast); }
.partner-card:hover { border-bottom-color: var(--brand-primary); background: var(--brand-primary-tint); }
.partner-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); }
.partner-zusatz { font-size: var(--text-sm); color: var(--text-secondary); }

/* =========================================================================
   Formular
   ========================================================================= */
.form-section { margin: var(--space-12) 0; padding-top: var(--space-10); border-top: 1px solid var(--border-default); }
.form-section .h3 { margin-top: 0; }
.form-hint { font-size: var(--text-sm); color: var(--text-secondary); }
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 560px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; }
  .form-row-3 { grid-template-columns: 11rem 1fr 1fr; }
  .form-row-plz { grid-template-columns: 8rem 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.req { color: #A3352D; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--text-base); color: var(--text-primary); width: 100%;
  padding: 12px 14px; min-height: 48px; border: 1px solid var(--border-input); border-radius: 0; background: var(--surface-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316161B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--gray-900); }
.field [aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
.field-help { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.field-error { font-size: var(--text-sm); color: #A3352D; font-weight: var(--weight-medium); margin: 0; }   /* a11y: 6,8 : 1 */
.field-error::before { content: "! "; }
.field-check { flex-direction: row; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.field-check input { width: 24px; height: 24px; min-height: 0; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--color-orange-700); border-radius: var(--radius-xs); }
.field-check label { flex: 1; font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.field-check .field-error { flex-basis: 100%; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form-submit .btn[disabled] { opacity: .6; cursor: progress; }
.form-status { margin: 0; color: var(--text-secondary); }
.form-errors { border-left: 4px solid var(--color-error); background: #FBEDEC; padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); }
.form-errors:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-errors-title { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: #A3352D; }

/* Rechtstexte */
.legal { max-width: 860px; }
.legal h2 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin: var(--space-10) 0 var(--space-3); }
.legal h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li, .legal address { color: var(--text-secondary); }
.legal address { margin-bottom: var(--space-4); }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--text-primary); text-decoration-color: var(--brand-primary); text-underline-offset: 3px; }
.legal-stand { margin-top: var(--space-10); font-size: var(--text-sm); }
.thanks { min-height: 50vh; max-width: 760px; }

/* =========================================================================
   Scroll-Reveal (nur mit JS und ohne reduzierte Bewegung)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal-media { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
  .js .reveal-media img { transform: scale(1.12); transition: transform 1.6s var(--ease-out); }
  .js .reveal-media.is-visible { clip-path: inset(0 0 0 0); }
  .js .reveal-media.is-visible img { transform: none; }

  /* Seitenübergänge (Chrome/Edge/Safari) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .25s var(--ease-standard) both; }
  ::view-transition-new(root) { animation: vt-in .45s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* Druck */
@media print {
  .site-header, .site-footer, .cta-band, .hero-controls, .lightbox { display: none !important; }
  .hero, .service-hero { min-height: 0; color: #000; background: none; }
  .hero-slides, .hero-shade { display: none; }
}