/* ==================================================================
   PERFECTILE · base.css
   Reset, Typo-Skala, Layout-Primitive, Interaktionssprache (eingefroren CW1),
   Sektions-Layouts. Bindet tokens.css voraus. Gilt fuer alle 6 Seiten.
   Interaktionssprache als wiederverwendbare Klassen, NICHT pro Seite neu.
================================================================== */

/* ------------------------------------------------------------------
   Reset und Grundlagen
------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--gold-l); color:var(--noir); }

/* ------------------------------------------------------------------
   Tastatur-Fokus: immer sichtbar (Pflicht, Interaktionssprache 4.1).
   Gold-Outline. Nur fuer Tastatur (:focus-visible), nicht bei Maus-Klick.
------------------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--gold-d);
  outline-offset:3px;
  border-radius:var(--rad);
}
/* auf dunklem Grund heller Ring fuer Kontrast */
.philo :focus-visible,
.site-footer :focus-visible,
.cta-band :focus-visible,
.svc__1 :focus-visible{
  outline-color:var(--gold-l);
}

/* skip link */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{
  left:16px; top:16px; width:auto; height:auto;
  background:var(--noir); color:#fff; padding:10px 14px;
  z-index:9999; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
}

/* ------------------------------------------------------------------
   Typo-Skala
------------------------------------------------------------------ */
.eyebrow{
  font-family:var(--f-ui);
  font-weight:700;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow--gold{ color:var(--gold-d); }
.eyebrow--light{ color:var(--gold-l); }
/* gedaempfter Eyebrow auf dunklem Bildgrund (z.B. Leistungskachel .svc__1) */
.eyebrow--on-dark{ color:rgba(255,255,255,.7); }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:500;
  letter-spacing:-.005em;
  margin:0;
  line-height:1.04;
  color:var(--ink);
}
h1{ font-size:clamp(40px, 6.4vw, 72px); }
h2{ font-size:clamp(36px, 4.6vw, 56px); }
h3{ font-size:clamp(24px, 2.4vw, 32px); }
em{ font-style:italic; }

p{ margin:0; }
.lead{
  font-size:clamp(16px, 1.2vw, 18px);
  color:var(--ink-2);
  max-width:56ch;
  line-height:1.6;
}

/* ------------------------------------------------------------------
   Layout-Primitive
------------------------------------------------------------------ */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
section{ padding-block:clamp(72px, 9vw, 144px); position:relative; }
.section-head{ display:flex; flex-direction:column; gap:18px; max-width:780px; }
.section-head .eyebrow{ margin-bottom:6px; }

/* ------------------------------------------------------------------
   INTERAKTIONSSPRACHE 4.1 · Buttons
   .btn--gold: Goldgrund, Hover zu Noir, weich ueber --tx.
   .btn--ghost: Ink-Linie, Hover fuellt mit Ink, Text invertiert.
   .btn--ghost-light: helle Linie auf dunklem Grund.
   Alle Buttons: :active scale 0.97 (Druck-Feedback, Emil).
   Fokus ueber globales :focus-visible.
------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:18px 36px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid transparent; /* SR-52: alle Varianten pixelgleich hoch, Gold behaelt transparente Border */
  border-radius:var(--rad);
  transition:background .4s var(--tx), color .4s var(--tx),
             border-color .4s var(--tx), transform .16s var(--tx);
  cursor:pointer;
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn--gold{ background:var(--gold-d); color:#fff; }
.btn--ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn--ghost-light{ border:1px solid rgba(255,255,255,.4); color:#fff; }

@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{ background:var(--noir); }
  .btn--ghost:hover{ background:var(--ink); color:var(--bg); }
  .btn--ghost-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
}

/* Textlink mit Pfeil: Pfeil wandert auf Hover 4px nach rechts ("in die Tiefe") */
.arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink);
  padding-block:12px; margin-block:-12px; /* SR-21: Tap-Ziel mindestens 40px, optischer Rhythmus bleibt exakt */
  transition:color .3s var(--tx);
}
.arrow svg{ transition:transform .5s var(--tx); }
@media (hover:hover) and (pointer:fine){
  .arrow:hover{ color:var(--gold-d); }
  .arrow:hover svg{ transform:translateX(4px); }
}
.arrow:focus-visible svg{ transform:translateX(4px); }
.arrow--light{ color:#fff; }
@media (hover:hover) and (pointer:fine){
  .arrow--light:hover{ color:var(--gold-l); }
}

/* ------------------------------------------------------------------
   INTERAKTIONSSPRACHE 4.4 · Reveal beim Scrollen
   opacity 0 zu 1, translateY 18px zu 0, ~0.9s mit --tx.
   .is-in von main.js gesetzt (IntersectionObserver, einmalig).
   Staffeln ueber data-delay innerhalb einer Sektion.
------------------------------------------------------------------ */
/* SR-05: Initialzustand nur unter html.js (gesetzt von main.js als erste
   Anweisung). Ohne JavaScript bleibt der komplette Inhalt sichtbar,
   die Choreografie mit JS ist identisch. */
html.js .reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s var(--tx), transform .9s var(--tx);
}
html.js .reveal.is-in{ opacity:1; transform:none; } /* SR-05: gescopt, sonst verliert .is-in den Spezifitaetsvergleich */
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

/* ------------------------------------------------------------------
   INTERAKTIONSSPRACHE 4.3 · Hero-Stagger beim Laden
   Eyebrow, Headline, Subline, CTAs gestaffelt von unten herein.
   .hero-in von main.js gesetzt, sobald Seite geladen ist.
------------------------------------------------------------------ */
html.js .hero-rise{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--tx), transform 1s var(--tx); } /* SR-05: Initialzustand nur mit JS */
.hero.hero-in .hero-rise{ opacity:1; transform:none; }
.hero.hero-in .hero-rise[data-delay="1"]{ transition-delay:.08s; }
.hero.hero-in .hero-rise[data-delay="2"]{ transition-delay:.16s; }
.hero.hero-in .hero-rise[data-delay="3"]{ transition-delay:.24s; }
.hero.hero-in .hero-rise[data-delay="4"]{ transition-delay:.32s; }

/* ------------------------------------------------------------------
   INTERAKTIONSSPRACHE 4.6 · prefers-reduced-motion
   Alle Reveals sofort sichtbar, keine Bewegung.
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal, .hero-rise{ opacity:1 !important; transform:none !important; }
}

/* ==================================================================
   INTERAKTIONSSPRACHE 4.5 · Header
   Fixiert, Papier mit Blur. Ab Scroll erscheint Trennlinie.
   Nav-Unterstreichung waechst von links. Mobil: Drawer von oben.
================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  background:rgba(251,249,245,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--tx), background .4s var(--tx);
}
.site-header.is-scrolled{ border-bottom-color:var(--line); }
.site-header__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:18px var(--pad-x);
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.brand__mark{
  width:54px; height:54px;
  background:var(--noir);        /* dunkle Box, Logo ist fuer Dunkel optimiert */
  border-radius:4px;
  display:grid; place-items:center;
  flex:0 0 auto; overflow:hidden;
}
.brand__mark img{ width:78%; height:78%; object-fit:contain; }
.brand__sub{
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); margin-top:4px; font-weight:500;
}
.nav{ margin-left:auto; display:flex; align-items:center; gap:32px; }
.nav a{
  font-size:14px; font-weight:500; color:var(--ink-2);
  position:relative; padding-block:6px;
  transition:color .3s var(--tx);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold-d);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{ color:var(--gold-d); }
  .nav a:hover::after{ transform:scaleX(1); }
}
/* aktiver Nav-Punkt (aria-current von main.js): dauerhaft unterstrichen */
.nav a[aria-current="page"]{ color:var(--gold-d); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.header-cta{ flex:0 0 auto; }
.header-cta .btn{ padding:14px 24px; font-size:11px; }

.nav-toggle{
  display:none; margin-left:auto;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--rad);
}
.nav-toggle span{ display:block; width:18px; height:1px; background:var(--ink); position:relative; }
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--ink);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

@media (max-width:960px){
  .nav, .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .brand__mark{ height:48px; }    /* width:auto bleibt, breite Wortmarke nicht quetschen */
  /* Tagline-Ausblendung steht im V4-Block am Dateiende (sonst ueberschreibt die
     spaetere Basis-Regel .brand__text{display:flex} dieses display:none). */
}

/* mobiles Drawer, faehrt von oben herein */
.drawer{
  position:fixed; inset:0; z-index:90;
  height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--bg);
  padding:24px var(--pad-x) 40px;
  display:flex; flex-direction:column; gap:24px;
  transform:translateY(-100%);
  transition:transform .55s var(--tx), visibility 0s linear .55s; /* SR-40: Slide-Out bleibt sichtbar, visibility kippt erst nach der Animation */
  visibility:hidden;
}
.drawer.is-open{ visibility:visible; transform:none; transition:transform .55s var(--tx), visibility 0s; /* SR-40 */ }
.drawer__top{ display:flex; align-items:center; }
.drawer__close{
  margin-left:auto; width:44px; height:44px;
  border:1px solid var(--line); border-radius:var(--rad);
  display:grid; place-items:center; font-size:22px; font-weight:300;
}
.drawer nav{ display:flex; flex-direction:column; gap:4px; margin-top:32px; }
.drawer nav a{
  font-family:var(--f-display); font-size:34px; font-weight:500;
  padding:10px 0; border-bottom:1px solid var(--line-soft);
}
.drawer nav a[aria-current="page"]{ color:var(--gold-d); }
.drawer .btn{ margin-top:24px; align-self:flex-start; }

/* ==================================================================
   Hero
================================================================== */
.hero{
  min-height:92vh; min-height:92svh; /* SR-53: svh-Fallback, iOS zeigt Headline, Subline und CTAs im Erst-Viewport */
  position:relative;
  padding-top:clamp(120px, 16vw, 180px);
  padding-bottom:clamp(80px, 9vw, 120px);
  isolation:isolate; overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(251,249,245,.96) 0%, rgba(251,249,245,.86) 32%, rgba(251,249,245,.45) 62%, rgba(251,249,245,.15) 100%);
}
.hero__inner{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); position:relative; }
.hero__eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:36px; }
.hero__eyebrow::before{ content:""; width:48px; height:1px; background:var(--gold-d); }
.hero h1{
  max-width:18ch; font-weight:500;
  font-size:clamp(40px, 6.6vw, 78px);
  letter-spacing:-.012em; color:var(--noir);
  text-wrap:balance;
}
.hero__sub{
  margin-top:32px; max-width:520px;
  font-size:clamp(15px, 1.15vw, 18px); line-height:1.65; color:var(--ink-2);
}
.hero__ctas{ margin-top:44px; display:flex; flex-wrap:wrap; gap:14px; }
.hero__meta{
  position:absolute; bottom:0; right:var(--pad-x);
  display:flex; flex-direction:column; gap:6px; align-items:flex-end; padding-bottom:6px;
}
.hero__meta span{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.hero__meta strong{ font-family:var(--f-display); font-weight:500; font-size:32px; color:var(--noir); line-height:1; }
.hero__down{
  position:absolute; bottom:24px; left:var(--pad-x);
  display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
/* nur der Scroll-Hinweis pulsiert sanft (4.3) */
.hero__down svg{ animation:bounce 2.5s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }

@media (max-width:768px){ .hero__meta{ display:none; } }

/* ==================================================================
   Philosophie (dunkler Anker)
================================================================== */
.philo{ background:var(--noir); color:#fff; }
.philo .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.philo h2{ color:#fff; }
.philo h2 em{ color:var(--gold-l); } /* SR-10: einheitliche Akzentregel, dunkler Grund traegt Gold hell */
.philo__lead{ color:rgba(255,255,255,.7); font-size:18px; line-height:1.65; max-width:48ch; margin-top:28px; }

.philo__media{
  position:relative; padding:24px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}
.philo__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  filter:grayscale(.85) contrast(1.05) brightness(.92);
}
.seal{
  position:absolute; right:-32px; bottom:-32px;
  width:200px; height:200px;
  background:var(--gold-d);
  display:grid; place-items:center; text-align:center; padding:18px;
  border-radius:var(--rad);
}
.seal__p{ font-family:var(--f-display); font-weight:500; font-size:88px; line-height:1; color:#fff; /* SR-08: AA-Kontrast auf Gold */ }
.seal__sub{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:#fff; /* SR-08 */ margin-top:10px; line-height:1.5; font-weight:600; }

.process{ margin-top:56px; display:flex; flex-direction:column; }
.process__step{
  display:grid; grid-template-columns:96px 1fr; gap:24px;
  padding:28px 0; border-top:1px solid rgba(255,255,255,.08);
}
.process__step:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
.process__num{ font-family:var(--f-display); font-weight:500; font-size:32px; color:var(--gold-l); line-height:1; }
.process__title{ color:#fff; font-size:16px; font-weight:500; margin-bottom:8px; letter-spacing:.01em; }
.process__desc{ color:rgba(255,255,255,.62); font-size:14px; line-height:1.65; max-width:50ch; }

@media (max-width:960px){
  .philo .wrap{ grid-template-columns:1fr; gap:56px; }
  .seal{ width:140px; height:140px; right:-12px; bottom:-12px; padding:12px; }
  .seal__p{ font-size:60px; }
  .seal__sub{ font-size:8px; }
}

/* ==================================================================
   Leistungen, asymmetrisches editoriales Grid
================================================================== */
.services .section-head{ margin-bottom:64px; }
.services__grid{ display:grid; grid-template-columns:6fr 4fr; gap:24px; }
.svc{
  position:relative; border-radius:var(--rad); overflow:hidden;
  background:#fff; border:1px solid var(--line-soft);
}
.svc__1{ height:600px; }
.svc__2{ height:600px; padding:48px; display:flex; flex-direction:column; gap:24px; }
.svc__3{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; height:420px; }

/* 4.2 · Bild-Hover, ruhiger Ken-Burns scale 1.0 zu 1.05, gated auf Hover-Geraete */
.svc__bg{ position:absolute; inset:0; }
.svc__bg img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--tx); }
.svc__1::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,14,13,0) 35%, rgba(14,14,13,.85) 100%);
}
.svc__1 .svc__copy{ position:absolute; left:0; right:0; bottom:0; padding:48px; color:#fff; z-index:2; }
.svc__1 h3{ color:#fff; }
.svc__1 .svc__lead{ color:rgba(255,255,255,.78); }
.svc__1 .arrow{ color:#fff; }

.svc__icon{ width:48px; height:48px; display:grid; place-items:center; color:var(--gold-d); }
.svc__icon svg{ width:100%; height:100%; stroke-width:1; }
.svc__lead{ color:var(--ink-2); font-size:14.5px; line-height:1.65; max-width:42ch; }
.svc__sub{ margin-top:auto; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); }
.svc__sub img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.25); transition:filter .6s var(--tx), transform .9s var(--tx); }
/* Voller Graustufen-Ruhezustand nur auf Hover-Geraeten, weil dort der Farb-Zielzustand per Hover erreichbar ist. Touch (4.2) sieht von Anfang an die abgemilderte Variante. */
@media (hover:hover) and (pointer:fine){ .svc__sub img{ filter:grayscale(1); } }

.svc__3 .svc__copy{ padding:48px; display:flex; flex-direction:column; gap:18px; justify-content:center; }
.svc__3 .svc__media{ position:relative; overflow:hidden; }
.svc__3 .svc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--tx); }

@media (hover:hover) and (pointer:fine){
  .svc__1:hover .svc__bg img{ transform:scale(1.05); }
  .svc__2:hover .svc__sub img{ filter:grayscale(0); transform:scale(1.05); } /* SR-38: eingefrorene Ken-Burns-Skala 1.05 (E7) */
  .svc__3:hover .svc__media img{ transform:scale(1.05); } /* SR-38 */
}

@media (max-width:960px){
  .services__grid{ grid-template-columns:1fr; }
  .svc__1{ height:480px; }
  .svc__2{ height:auto; padding:36px; }
  .svc__3{ height:auto; grid-template-columns:1fr; }
  .svc__3 .svc__media{ aspect-ratio:4/3; }
}

/* ==================================================================
   Atelier-Teaser (Ueber uns)
================================================================== */
.atelier .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.atelier__copy{ padding-top:80px; }
.atelier__quote{
  margin:36px 0 36px; padding-left:24px;
  border-left:2px solid var(--gold-d);
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:22px; line-height:1.4; color:var(--ink); max-width:42ch;
}
.atelier__copy p{ color:var(--ink-2); font-size:15.5px; line-height:1.7; max-width:52ch; }
.atelier__copy p + p{ margin-top:18px; }
.atelier__cta{ margin-top:36px; }
.atelier__stats{ margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.stat{ border-top:1px solid var(--line); padding-top:20px; }
.stat__n{ font-family:var(--f-display); font-weight:500; font-size:48px; color:var(--gold-d); line-height:1; }
.stat__l{ margin-top:8px; font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }

.atelier__media{ position:relative; }
.atelier__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(.2); }
.badge{
  position:absolute; top:24px; right:-24px;
  background:var(--bg); border:1px solid var(--line);
  padding:18px 22px; border-radius:var(--rad); text-align:center; min-width:120px;
}
.badge__n{ font-family:var(--f-display); font-weight:500; font-size:32px; color:var(--gold-d); line-height:1; }
.badge__l{ margin-top:6px; font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }

@media (max-width:960px){
  .atelier .wrap{ grid-template-columns:1fr; gap:48px; }
  .atelier__copy{ padding-top:0; }
  .badge{ right:12px; }
}

/* ==================================================================
   Referenz-Teaser
================================================================== */
.refs .section-head{ margin-bottom:64px; max-width:880px; }
.refs__grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:24px; }
.proj{ position:relative; overflow:hidden; }
.proj__img{ width:100%; height:100%; overflow:hidden; border-radius:var(--rad); }
.proj__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--tx); }
.proj__cap{ margin-top:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.proj__title{ font-family:var(--f-display); font-weight:500; font-size:22px; line-height:1.2; color:var(--ink); transition:transform .5s var(--tx); }
.proj__spec{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; white-space:nowrap; padding-top:6px; }

@media (hover:hover) and (pointer:fine){
  .proj:hover .proj__img img{ transform:scale(1.05); }
  .proj:hover .proj__title{ transform:translateY(-4px); }
}

.proj--a{ grid-column:span 7; }
.proj--a .proj__img{ aspect-ratio:4/3; }
.proj--b{ grid-column:span 5; }
.proj--b .proj__img{ aspect-ratio:3/4; }
.proj--c{ grid-column:span 5; }
.proj--c .proj__img{ aspect-ratio:3/4; }
.proj--d{ grid-column:span 7; }
.proj--d .proj__img{ aspect-ratio:4/3; }

.refs__more{ margin-top:80px; display:flex; justify-content:center; }

@media (max-width:768px){
  .refs__grid{ grid-template-columns:1fr; gap:48px; }
  .proj--a, .proj--b, .proj--c, .proj--d{ grid-column:1 / -1; }
  .proj__img{ aspect-ratio:4/3 !important; }
}

/* ==================================================================
   Partner-Hinweis
================================================================== */
.partners{ background:var(--bg-2); }
.partners .wrap{ display:grid; grid-template-columns:1fr 2fr; gap:96px; align-items:start; }
.partners__list{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.partner{ background:var(--bg-2); padding:32px; display:flex; flex-direction:column; gap:14px; min-height:200px; }
.partner.is-empty{
  background:transparent; border:1px dashed var(--line); margin:-1px;
  display:grid; place-items:center; color:var(--ink-mute);
  font-size:11px; letter-spacing:.20em; text-transform:uppercase; font-weight:500; text-align:center;
}
.partner__role{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; }
.partner__name{ font-family:var(--f-display); font-weight:500; font-size:22px; color:var(--ink); line-height:1.25; }
.partner__addr{ font-size:13px; color:var(--ink-2); line-height:1.6; }

@media (max-width:960px){
  .partners .wrap{ grid-template-columns:1fr; gap:48px; }
  .partners__list{ grid-template-columns:1fr; }
}

/* ==================================================================
   Kontakt-CTA-Band (kein Inline-Formular auf der Startseite)
   Dunkler Abschluss-Call, fuehrt auf kontakt.html und ans Telefon.
================================================================== */
.cta-band{ background:var(--noir); color:#fff; }
.cta-band .wrap{
  display:grid; grid-template-columns:1.5fr 1fr; gap:72px; align-items:center;
}
.cta-band__copy h2{ color:#fff; }
.cta-band__copy h2 em{ color:var(--gold-l); }
.cta-band__lead{ color:rgba(255,255,255,.72); font-size:clamp(15px,1.15vw,18px); line-height:1.65; max-width:46ch; margin-top:24px; }
.cta-band__actions{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; }
.cta-band__side{ display:flex; flex-direction:column; gap:28px; }
.cta-block{ display:flex; flex-direction:column; gap:8px; }
.cta-block .eyebrow{ color:var(--gold-l); margin-bottom:4px; }
.cta-block a{
  font-family:var(--f-display); font-weight:500; font-size:clamp(20px,2vw,26px); color:#fff;
  border-bottom:1px solid transparent; align-self:flex-start;
  transition:color .3s var(--tx), border-color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .cta-block a:hover{ color:var(--gold-l); border-bottom-color:var(--gold-l); }
}
.cta-block address{ font-style:normal; font-family:var(--f-display); font-weight:500; font-size:18px; line-height:1.5; color:#fff; }
.cta-block small, .cta-block p{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.6); }

@media (max-width:960px){
  .cta-band .wrap{ grid-template-columns:1fr; gap:48px; }
}

/* ==================================================================
   Footer
================================================================== */
.site-footer{ background:var(--noir-deep); color:rgba(255,255,255,.7); padding-top:96px; padding-bottom:32px; }
.site-footer .wrap{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:64px;
  padding-bottom:64px; border-bottom:1px solid rgba(255,255,255,.08);
}
.foot-brand{ display:flex; flex-direction:column; gap:18px; }
.foot-brand .brand__sub{ color:rgba(255,255,255,.5); }
.foot-brand p{ font-size:13px; line-height:1.65; color:rgba(255,255,255,.55); max-width:32ch; }
.foot-col h4,
.foot-col .foot-col__title{ /* SR-45: Spaltentitel ist jetzt ein p (kein Heading-Sprung), h4-Selektor bleibt als Schutz */
  font-family:var(--f-ui); font-size:11px; font-weight:700; letter-spacing:.20em; text-transform:uppercase;
  color:rgba(255,255,255,.6); /* SR-25: AA-Kontrast auf Noir-Deep */ margin-bottom:24px;
  line-height:1.04; /* SR-45: gleicht die h4-Zeilenhoehe nach, Optik unveraendert */
}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; /* SR-21: Gap kompensiert das Link-Padding */ }
.foot-col a{ display:inline-block; padding-block:10px; /* SR-21: Tap-Ziel ca. 40px */ font-size:14px; color:rgba(255,255,255,.78); transition:color .3s var(--tx); }
.foot-col li{ font-size:14px; color:rgba(255,255,255,.55); line-height:1.6; }
@media (hover:hover) and (pointer:fine){
  .foot-col a:hover{ color:var(--gold-l); }
  .foot-bottom a:hover{ color:var(--gold-l); }
}
.foot-bottom{
  margin-top:32px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.foot-bottom ul{ list-style:none; padding:0; margin:0; display:flex; gap:24px; }

@media (max-width:960px){ .site-footer .wrap{ grid-template-columns:1fr 1fr; gap:48px; } }
@media (max-width:560px){
  .site-footer .wrap{ grid-template-columns:1fr; gap:36px; }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ==================================================================
   CW2 · Leistungen
   Additive Erweiterung. NUR fuer leistungen.html.
   Keine bestehende Regel, kein Token, keine Interaktionssprache veraendert.
   Bild-Hover, Reveal, Buttons und Easing folgen 1:1 dem CW1-System (--tx).
   Reihenfolge: 1 Hilfsklasse, 2 Seitenkopf, 3 Bento der Gewerke,
   4 Materialwelt, 5 Ablauf-Band. Jede Komponente als geschlossener Block.
================================================================== */

/* ------------------------------------------------------------------
   1 · Hilfsklasse: visuell verstecken, fuer Screenreader sichtbar.
   Fuer die strukturelle H2 ueber dem Bento (semantischer Anker).
------------------------------------------------------------------ */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------------------------------------------
   2 · Seitenkopf (ruhig, kein Vollbild-Hero).
   Etwas Luft zum fixierten Header, dann Sektionskopf und Gewerke-Index.
------------------------------------------------------------------ */
.lpage-head{
  padding-top:clamp(132px, 16vw, 200px);
  padding-bottom:clamp(48px, 6vw, 88px);
}
.lpage-head .section-head{ max-width:840px; }
.lpage-head h1{
  margin-top:6px;
  font-size:clamp(40px, 6.2vw, 72px);
  letter-spacing:-.012em; color:var(--noir); text-wrap:balance;
}
.lpage-head .lead{ margin-top:8px; max-width:60ch; }

/* Gewerke-Index: drei dezente Anker-Links, editorialer Auftakt. */
.trade-index{
  margin-top:clamp(40px, 5vw, 64px);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.trade-index__item{
  background:var(--bg);
  display:flex; align-items:baseline; gap:16px;
  padding:24px 28px;
  transition:background .3s var(--tx);
}
.trade-index__num{
  font-family:var(--f-display); font-weight:500; font-size:18px;
  color:var(--gold-d); line-height:1; flex:0 0 auto;
}
.trade-index__name{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-2);
  transition:color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .trade-index__item:hover{ background:var(--mocca-soft); }
  .trade-index__item:hover .trade-index__name{ color:var(--gold-d); }
}
@media (max-width:760px){
  .trade-index{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------
   3 · Bento der Gewerke
   Explizites Raster ueber grid-template-areas, kein Auto-Placement.
   Komplettbad ist die dominante Kachel: volle Breite, eigene Reihe oben.
   Fliesen und Terrasse flankieren als gleich grosses Bildpaar darunter.
   Feste Zuordnung Karte zu Area, damit ein Wegfall oder kuerzerer Text
   keine Luecke reissen kann (robustes editoriales Raster).
   Bild-Hover Ken-Burns wie .svc__bg/.proj__img (scale 1.0 zu 1.05, --tx).
------------------------------------------------------------------ */
.trades{ padding-top:clamp(8px, 2vw, 24px); }
.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "bad     bad"
    "fliesen terrasse";
  gap:24px;
}
.lc-bad{ grid-area:bad; }
/* Flankierendes Bildpaar: gleich hoch, ruhig, je halbe Breite. */
.lc-fliesen{ grid-area:fliesen; min-height:440px; }
.lc-terrasse{ grid-area:terrasse; min-height:440px; }

/* gemeinsame Kachelbasis */
.bento-card{
  position:relative; border-radius:var(--rad); overflow:hidden;
  background:#fff; border:1px solid var(--line-soft);
}

/* --- Bildkachel (Fliesen, Terrasse): Bild im Grund, Text auf Verlauf --- */
.bento-card--tile{ display:flex; }
.bento-card__bg{ position:absolute; inset:0; z-index:0; }
.bento-card__bg img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--tx); }
.bento-card__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,14,13,0) 30%, rgba(14,14,13,.86) 100%);
}
.bento-card__copy{
  position:relative; z-index:2; margin-top:auto;
  padding:40px; color:#fff;
}
.bento-card--tile h3{ color:#fff; margin:14px 0 14px; }
.bento-card__lead{
  color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.65; max-width:42ch;
}
/* Tag-Reihe (kleine, ruhige Schlagworte unter dem Lead) */
.tag-row{
  list-style:none; padding:0; margin:18px 0 0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.tag-row li{
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.28); border-radius:var(--rad);
  padding:7px 12px;
}

@media (hover:hover) and (pointer:fine){
  .lc-fliesen:hover .bento-card__bg img{ transform:scale(1.05); }
  .lc-terrasse:hover .bento-card__bg img{ transform:scale(1.05); }
}

/* --- Feature-Kachel: Komplettbadsanierung (dominant) --- */
.bento-card--feature{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  background:var(--noir); color:#fff; border-color:transparent;
}
.lc-bad__copy{
  padding:clamp(36px, 4vw, 56px);
  display:flex; flex-direction:column;
}
.lc-bad__copy h3{ color:#fff; margin:14px 0 18px; font-size:clamp(28px, 3.2vw, 40px); }
.lc-bad__copy .eyebrow--gold{ color:var(--gold-l); }
.lc-bad__copy .bento-card__lead{ color:rgba(255,255,255,.78); font-size:15.5px; max-width:48ch; }

/* Gewerke-Liste: Schluessel und kurze Erlaeuterung, ruhige Trennlinien */
.trade-list{
  list-style:none; padding:0; margin:28px 0 0;
  display:flex; flex-direction:column;
}
.trade-list li{
  display:grid; grid-template-columns:34% 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-top:1px solid rgba(255,255,255,.10);
}
.trade-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.10); }
.trade-list__k{
  font-family:var(--f-display); font-weight:500; font-size:18px; color:#fff; line-height:1.2;
}
.trade-list__v{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.62); }

/* Hinweis kein Elektro: bewusst klar, in Gold gefasst, kein Negativ-Ton */
.lc-bad__note{
  margin-top:28px; padding-left:16px;
  border-left:2px solid var(--gold-l);
  font-size:13.5px; line-height:1.65; color:rgba(255,255,255,.74); max-width:50ch;
}
.lc-bad__note span{ color:var(--gold-l); font-weight:700; }

/* Medienspalte der Feature-Kachel mit eingelegtem Stat-Block */
.lc-bad__media{ position:relative; overflow:hidden; min-height:420px; }
.lc-bad__img{ position:absolute; inset:0; }
.lc-bad__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--tx); }
.lc-bad__stat{
  position:absolute; left:24px; bottom:24px; z-index:2;
  background:var(--gold-d); color:#fff; /* SR-08: AA-Kontrast auf Gold */
  border-radius:var(--rad); padding:18px 22px;
  display:flex; align-items:center; gap:16px; max-width:240px;
}
.lc-bad__stat-n{ font-family:var(--f-display); font-weight:500; font-size:48px; line-height:1; }
.lc-bad__stat-l{ font-size:11px; letter-spacing:.10em; line-height:1.5; font-weight:600; text-transform:uppercase; }
@media (hover:hover) and (pointer:fine){
  .lc-bad:hover .lc-bad__img img{ transform:scale(1.05); }
}

@media (max-width:960px){
  /* einspaltig stapeln, Reihenfolge Bad, Fliesen, Terrasse beibehalten */
  .bento{
    grid-template-columns:1fr;
    grid-template-areas:
      "bad"
      "fliesen"
      "terrasse";
  }
  .lc-fliesen{ min-height:400px; }
  .lc-terrasse{ min-height:360px; }
  .bento-card--feature{ grid-template-columns:1fr; }
  .lc-bad__media{ min-height:340px; order:-1; }
}
@media (max-width:560px){
  .bento-card__copy{ padding:28px; }
  .trade-list li{ grid-template-columns:1fr; gap:4px; }
}

/* ------------------------------------------------------------------
   4 · Materialwelt
   Ruhiges Raster (kein Listengefuehl). Plus Hersteller-Karte mit
   dezentem Planzeichnungs-/Ornament-Motiv (G7, reine Linien, kein Farbknall).
------------------------------------------------------------------ */
.materials{ background:var(--bg-2); }
.materials .section-head{ margin-bottom:clamp(40px, 5vw, 64px); }

.mat-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.mat{
  background:var(--bg);
  padding:28px 26px 30px;
  display:flex; flex-direction:column; gap:10px;
  min-height:168px;
  transition:background .35s var(--tx);
}
.mat__line{
  width:32px; height:1px; background:var(--gold-d);
  transition:width .5s var(--tx);
}
.mat__name{
  font-family:var(--f-display); font-weight:500; font-size:21px;
  color:var(--ink); line-height:1.2;
}
.mat__note{ font-size:12.5px; line-height:1.55; color:var(--ink-mute); margin-top:auto; }
@media (hover:hover) and (pointer:fine){
  .mat:hover{ background:var(--mocca-soft); }
  .mat:hover .mat__line{ width:48px; }
}

/* Hersteller-Karte mit Ornament-Motiv */
.mat-brand{
  margin-top:24px;
  display:grid; grid-template-columns:220px 1fr; gap:clamp(32px, 5vw, 64px); align-items:center;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--rad);
  padding:clamp(28px, 3.5vw, 48px);
}
.mat-brand__lead{
  font-family:var(--f-display); font-weight:400; font-size:clamp(20px, 2vw, 26px);
  line-height:1.4; color:var(--ink); max-width:46ch; margin-top:14px;
}
.mat-brand__lead strong{ font-weight:500; color:var(--gold-d); }
.mat-brand__sub{ margin-top:18px; font-size:14px; line-height:1.65; color:var(--ink-2); max-width:52ch; }

@media (max-width:1080px){
  .mat-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:960px){
  .mat-brand{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:480px){
  .mat-grid{ grid-template-columns:1fr; }
  .mat{ min-height:auto; }
}

/* ------------------------------------------------------------------
   5 · Ablauf-Band (dunkler Anker)
   Tragt die bestehende .process-Komponente 1:1, hier auf Noir-Grund
   wie die Philosophie-Sektion der Startseite. Nur Sektions-Rahmen neu.
------------------------------------------------------------------ */
.proc-band{ background:var(--noir); color:#fff; padding-bottom:clamp(24px, 3vw, 48px); /* SR-16: Adjazenz zum CTA-Band, Marker muendet in die Anfrage */ }
.proc-band .section-head h2{ color:#fff; }
.proc-band .section-head h2 em{ color:var(--gold-l); }
.proc-band .process{ margin-top:clamp(40px, 5vw, 64px); }
/* SR-16: Adjazenz-Regel, halbiert das Noir-auf-Noir-Doppelpadding zwischen
   Prozess-Bruecke und Kontakt-Frage. Greift nur, wenn beide aufeinander folgen. */
.proc-band + .cta-band{ padding-top:clamp(32px, 4vw, 56px); }

/* Horizontale Timeline (eigene Komponente, NICHT .process).
   Drei gleich breite Schritte nebeneinander, verbunden ueber eine
   feine Goldlinie als Prozess-Achse. Marker mittig auf der Linie. */
.proc-timeline{
  --proc-gap:clamp(24px, 4vw, 56px);
  list-style:none; margin:clamp(56px, 6vw, 88px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  column-gap:var(--proc-gap);
  position:relative;
}
.proc-timeline__step{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
/* Prozess-Achse: je ein Segment von der eigenen Markermitte bis zur
   Markermitte des naechsten Schritts. Der Abstand zweier Markermitten
   ist exakt Spaltenbreite plus Gap, daher width:calc(100% + gap).
   Gap-unabhaengig exakt, ragt nie ueber die aeusseren Marker hinaus.
   Letzter Schritt traegt kein Segment. */
.proc-timeline__step:not(:last-child)::before{
  content:""; position:absolute; top:24px; height:1px;
  left:50%; width:calc(100% + var(--proc-gap));
  background:var(--gold-m);
  opacity:.5;
}
/* Nummern-Marker: Cormorant-Ziffer in Gold, feiner Goldring,
   Noir-Fuellung deckt die Achse darunter ab (Marker sitzt auf Linie). */
.proc-timeline__marker{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:500; font-size:22px;
  color:var(--gold-l); line-height:1;
  background:var(--noir);
  border:1px solid rgba(233,193,118,.45);
  box-shadow:0 0 0 6px var(--noir);
}
.proc-timeline__title{
  font-family:var(--f-ui);
  color:#fff; font-size:16px; font-weight:500; letter-spacing:.01em;
  margin:26px 0 10px;
}
.proc-timeline__desc{
  color:rgba(255,255,255,.62); font-size:14px; line-height:1.65;
  max-width:34ch; margin:0 auto;
}

/* Ab 720px abwaerts: vertikal stapeln, Achse entfaellt, kein Overflow. */
@media (max-width:720px){
  .proc-timeline{
    grid-template-columns:1fr; row-gap:clamp(32px, 7vw, 44px);
  }
  .proc-timeline__step:not(:last-child)::before{ display:none; }
}

/* ------------------------------------------------------------------
   Prozess-Bruecke (nur Leistungsseite, additiv).
   Geschwungene Goldlinie als Fortsetzung der horizontalen Prozess-Achse:
   vom dritten Marker weich nach unten zur Kontakt-Frage. Endet in einem
   gold-gefuellten Aktions-Marker mit Pfeil nach unten ("jetzt sind Sie
   dran"), klar abgesetzt von den hohlen Ring-Markern 01 bis 03.
   Rein dekorativ (aria-hidden im Markup). Zeichnet sich beim Reveal.
   Geometrie ueber pathLength="1" normiert, dadurch geometrieunabhaengig.
------------------------------------------------------------------ */
.proc-bridge{
  position:relative;
  width:100%;
  height:clamp(96px, 13vw, 150px);
  margin-top:clamp(20px, 3vw, 36px);
  pointer-events:none;
}
.proc-bridge__svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
}
.proc-bridge__path{
  stroke:var(--gold-m);
  stroke-width:1.25;
  stroke-linecap:round;
  opacity:.6;
  /* Zeichen-Animation: Linie liegt zunaechst unsichtbar (Offset 100),
     wird beim Reveal auf 0 gezogen. Geometrieunabhaengig durch
     pathLength="100" am Pfad. */
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s var(--tx), opacity .6s var(--tx);
  vector-effect:non-scaling-stroke;
}
.proc-bridge.is-in .proc-bridge__path{ stroke-dashoffset:0; }

/* Desktop zeigt den weiten Pfad (rechts nach mittig), Mobil den schmalen
   (mittig vertikal). Umschaltung an derselben 720px-Grenze wie die
   Timeline, damit Start- und Endpunkt zur jeweiligen Anordnung passen. */
.proc-bridge__path--narrow{ display:none; }

/* Aktions-Marker am Endpunkt: gold gefuellt, Pfeil nach unten.
   Sitzt mittig unten am Ende der Kurve (x=500 in beiden Pfaden). */
.proc-bridge__marker{
  position:absolute;
  left:50%; bottom:-9px;
  transform:translateX(-50%) scale(.82);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold-m);
  box-shadow:0 0 0 6px var(--noir), 0 6px 18px rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .5s var(--tx), transform .5s var(--tx);
  transition-delay:.55s;
}
.proc-bridge__marker svg{ width:17px; height:17px; }
.proc-bridge__marker path{
  stroke:var(--noir); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.proc-bridge.is-in .proc-bridge__marker{
  opacity:1; transform:translateX(-50%) scale(1);
}

@media (max-width:720px){
  /* Mobil laenger gezogen, damit der Bogen nicht zu kurz/gestaucht wirkt (Domme 10.06.2026). */
  .proc-bridge{ height:clamp(150px, 40vw, 200px); }
  .proc-bridge__path--wide{ display:none; }
  .proc-bridge__path--narrow{ display:block; }
}

/* Reduced Motion: Linie und Marker sofort vollstaendig sichtbar,
   keine Zeichen- oder Einblend-Bewegung. */
@media (prefers-reduced-motion: reduce){
  .proc-bridge__path{ stroke-dashoffset:0 !important; }
  .proc-bridge__marker{
    opacity:1 !important;
    transform:translateX(-50%) scale(1) !important;
  }
}

/* ==================================================================
   CW3 · Referenzen
   Additive Erweiterung. NUR fuer referenzen.html.
   Keine bestehende Regel, kein Token, keine Interaktionssprache veraendert.
   Bild-Hover (Ken-Burns 4.2), Reveal (4.4), Buttons und Easing folgen 1:1
   dem eingefrorenen CW1-System (--tx). Wiederverwendet wird .cta-band 1:1.
   Reihenfolge der Bloecke: 1 Seitenkopf, 2 Leuchtturm-Story,
   3 editoriale Magazin-Galerie, 4 Materialdetails. Jede Komponente
   ein geschlossener Block. Tokens only, keine Fremdfarben.
================================================================== */

/* ------------------------------------------------------------------
   1 · Seitenkopf (ruhig, kein Vollbild-Hero, analog .lpage-head).
   Etwas Luft zum fixierten Header, dann Sektionskopf mit der einzigen h1.
------------------------------------------------------------------ */
.rpage-head{
  padding-top:clamp(132px, 16vw, 200px);
  padding-bottom:clamp(40px, 5vw, 72px);
}
.rpage-head .section-head{ max-width:840px; }
.rpage-head h1{
  margin-top:6px;
  font-size:clamp(40px, 6.2vw, 72px);
  letter-spacing:-.012em; color:var(--noir); text-wrap:balance;
}
.rpage-head .lead{ margin-top:8px; max-width:58ch; }

/* ------------------------------------------------------------------
   2 · Leuchtturm-Story (barrierefreies Bad), der emotionale Hoehepunkt.
   Zweispaltig editorial: links grossformatiges Nachher-Bild, rechts
   ruhiger Fliesstext mit Kernsatz und einer textuellen Ausgangslage/
   Ergebnis-Gegenueberstellung (Vorher-Nachher-Anmutung ohne erfundenes
   Vorher-Bild). Auf Papiergrund, ruhig. Bild-Hover Ken-Burns wie 4.2.
------------------------------------------------------------------ */
.lighthouse{ padding-top:clamp(8px, 2vw, 24px); }
.lighthouse .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 5vw, 80px);
  align-items:center;
}

/* Medienspalte: grosses Nachher-Bild mit eingelegtem Hinweis-Schild.
   Der Frame traegt das Seitenverhaeltnis (4/5), das img fuellt ihn mit
   height:100% und object-fit:cover. So bleibt das gesetzte height-Attribut
   des img wirkungslos und kann den Rahmen nicht ueberdehnen. Identisches
   Prinzip wie bei .gal__frame und .det__frame, daher systemkonsistent. */
.lh-media{ position:relative; }
.lh-frame{
  position:relative; overflow:hidden; border-radius:var(--rad);
  border:1px solid var(--line-soft);
  aspect-ratio:4/5;
}
.lh-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .lh-frame:hover img{ transform:scale(1.05); }
}
/* eingelegtes Schild, gold, betont die Leitidee der Sektion */
.lh-badge{
  position:absolute; left:24px; bottom:24px; z-index:2;
  background:var(--gold-d); color:#fff; /* SR-08: AA-Kontrast auf Gold */
  border-radius:var(--rad); padding:16px 20px; max-width:240px;
}
.lh-badge__k{ font-size:10px; letter-spacing:.20em; text-transform:uppercase; font-weight:700; }
.lh-badge__v{ font-family:var(--f-display); font-weight:500; font-size:20px; line-height:1.2; margin-top:4px; }

/* Copy-Spalte */
.lh-copy .eyebrow{ margin-bottom:18px; }
.lh-copy h2{ color:var(--noir); }
.lh-copy h2 em{ color:var(--gold-d); }
.lh-copy__lead{
  margin-top:24px; color:var(--ink-2);
  font-size:clamp(15px,1.15vw,17px); line-height:1.7; max-width:50ch;
}
.lh-copy__lead + .lh-copy__lead{ margin-top:16px; }

/* Kernsatz: Eigenaussage als ruhiges Display-Statement (kein Kundenzitat). */
.lh-statement{
  margin:clamp(28px,3.5vw,40px) 0 0; padding-left:24px;
  border-left:2px solid var(--gold-d);
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.3vw,28px); line-height:1.4; color:var(--ink); max-width:30ch;
}

/* Ausgangslage / Ergebnis: textuelle Vorher-Nachher-Anmutung. */
.lh-ba{
  margin-top:clamp(32px,4vw,44px);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.lh-ba__cell{ background:var(--bg); padding:22px 24px; display:flex; flex-direction:column; gap:8px; }
.lh-ba__k{ font-size:10px; letter-spacing:.20em; text-transform:uppercase; font-weight:700; color:var(--ink-mute); }
.lh-ba__cell--after .lh-ba__k{ color:var(--gold-d); }
.lh-ba__v{ font-size:13.5px; line-height:1.6; color:var(--ink-2); }

@media (max-width:960px){
  .lighthouse .wrap{ grid-template-columns:1fr; gap:48px; }
  .lh-frame{ aspect-ratio:4/3; }
}
@media (max-width:480px){
  .lh-ba{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------
   3 · Editoriale Magazin-Galerie
   Asymmetrisches Raster ueber 12 Spalten, bewusst unterschiedliche
   Spaltenbreiten UND Seitenverhaeltnisse (hoch, quer, gross), damit ein
   Magazin-Rhythmus entsteht statt eines gleichfoermigen Quadrat-Grids.
   Form-Varianten: .gal--lead (gross, 4/3 quer), .gal--tall (Hochformat 3/4),
   .gal--portrait (schmales Hochformat 3/4), .gal--full (Querformat ueber die
   volle Breite) plus der Versatz .gal--offset. Bild-Hover Ken-Burns 1.0 zu
   1.05 (4.2), figcaption als Bildunterschrift.
------------------------------------------------------------------ */
.gallery{ background:var(--bg-2); }
.gallery .section-head{ margin-bottom:clamp(40px,5vw,64px); max-width:840px; }
.gal-grid{
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:clamp(20px,2.5vw,32px);
  align-items:start;
}
.gal{ position:relative; }
.gal__frame{
  position:relative; overflow:hidden; border-radius:var(--rad);
  background:var(--bg); border:1px solid var(--line-soft);
}
.gal__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .gal:hover .gal__frame img{ transform:scale(1.05); }
}
/* Bildunterschrift: knapp, Ort und Gewerk, ruhige Typo. Titel als Display. */
.gal__cap{
  margin-top:16px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.gal__title{
  font-family:var(--f-display); font-weight:500; font-size:clamp(18px,1.6vw,22px);
  line-height:1.2; color:var(--ink); transition:transform .5s var(--tx);
}
.gal__meta{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; white-space:nowrap; padding-top:6px;
}
@media (hover:hover) and (pointer:fine){
  .gal:hover .gal__title{ transform:translateY(-4px); }
}

/* Span- und Format-Varianten fuer den Magazin-Rhythmus.
   Bewusst unterschiedliche Breiten UND Seitenverhaeltnisse.
   Summen pro Reihe ergeben 12: 7+5 (gross + hoch), 4+4+4 (drei Hochformate),
   12 (querformatiges Schlussbild ueber die volle Breite). */
.gal--lead{ grid-column:span 7; }
.gal--lead  .gal__frame{ aspect-ratio:4/3; }
.gal--tall{ grid-column:span 5; }
.gal--tall  .gal__frame{ aspect-ratio:3/4; }
.gal--portrait{ grid-column:span 4; }
.gal--portrait .gal__frame{ aspect-ratio:3/4; }
.gal--full{ grid-column:1 / -1; }
.gal--full  .gal__frame{ aspect-ratio:16/8; }
/* leichter optischer Versatz fuer Magazin-Anmutung auf grossen Schirmen */
@media (min-width:961px){
  .gal--offset{ margin-top:clamp(28px,4vw,56px); }
}

@media (max-width:960px){
  .gal-grid{ grid-template-columns:repeat(6, 1fr); }
  .gal--lead{ grid-column:span 6; }
  .gal--tall{ grid-column:span 6; }
  .gal--portrait{ grid-column:span 3; }
  .gal--full{ grid-column:1 / -1; }
  .gal--full .gal__frame{ aspect-ratio:16/9; }
  .gal--offset{ margin-top:0; }
}
@media (max-width:560px){
  .gal-grid{ grid-template-columns:1fr; gap:36px; }
  .gal--lead, .gal--tall, .gal--portrait, .gal--full{ grid-column:1 / -1; }
  .gal__frame{ aspect-ratio:4/3 !important; }
}

/* Platzhalter-Hinweis im Galerie-Kopf, bis Patricks 12 Originalfotos da sind */
.gal-note{
  margin-top:clamp(32px,4vw,48px);
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
.gal-note::before{ content:""; width:32px; height:1px; background:var(--gold-d); flex:0 0 auto; }

/* ------------------------------------------------------------------
   4 · Materialdetails (Manufaktur-Anspruch ueber Detailaufnahmen).
   Drei Detailkacheln nebeneinander, Bild oben, kurzer Beleg darunter.
   Belegt Naehe und Praezision. Bild-Hover Ken-Burns 4.2.
------------------------------------------------------------------ */
.matdetails .section-head{ margin-bottom:clamp(40px,5vw,64px); max-width:840px; }
.det-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px,2.5vw,32px);
}
.det{ display:flex; flex-direction:column; }
.det__frame{
  position:relative; overflow:hidden; border-radius:var(--rad);
  aspect-ratio:4/5; background:var(--bg-2); border:1px solid var(--line-soft);
}
.det__frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .det:hover .det__frame img{ transform:scale(1.05); }
}
.det__name{
  font-family:var(--f-display); font-weight:500; font-size:clamp(19px,1.8vw,23px);
  color:var(--ink); line-height:1.2; margin-top:20px;
}
.det__note{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--ink-2); max-width:38ch; }

@media (max-width:768px){
  .det-grid{ grid-template-columns:1fr 1fr; }
  .det--third{ grid-column:1 / -1; }
  .det--third .det__frame{ aspect-ratio:16/10; }
}
@media (max-width:480px){
  .det-grid{ grid-template-columns:1fr; }
  .det--third .det__frame{ aspect-ratio:4/5; }
}

/* ==================================================================
   CW3-Nachtrag · Gewerk-Bandbreite
   Additive Erweiterung (Domme 10.06.2026). NUR fuer referenzen.html.
   Keine bestehende Regel, kein Token, keine Interaktionssprache veraendert.
   Zweck: die Referenz-Galerie nach Gewerk gliedern, damit die Bandbreite
   (Baeder, Fliesen, Terrassen) sichtbar wird, ohne ein Terrassenprojekt zu
   erfinden. Zwei Bausteine: .gal-group (Gewerk-Gruppe mit eigenem Untertitel)
   und .terr-placeholder (ehrliche Terrassen-Platzhalter-Kachel mit dezentem
   Planzeichnungs-Ornament analog .mat-brand__ornament, G7, reine Linien).
   Bild-Hover (Ken-Burns 4.2), Reveal (4.4) und Easing var(--tx) bleiben 1:1.
   Tokens only, keine Fremdfarben.
================================================================== */

/* ------------------------------------------------------------------
   Gewerk-Gruppe: ein klar abgesetzter Block je Gewerk mit eigenem
   Untertitel (h3 unter der h2 der Galerie-Sektion). Trennt Baeder von
   Terrassen sichtbar voneinander, damit die Bandbreite lesbar wird.
------------------------------------------------------------------ */
.gal-group{ margin-top:clamp(48px,6vw,80px); }
.gal-group:first-of-type{ margin-top:clamp(8px,1vw,16px); }
.gal-group__head{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:clamp(28px,3.5vw,40px);
}
.gal-group__title{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(26px,3vw,38px); line-height:1.12;
  letter-spacing:-.01em; color:var(--noir); text-wrap:balance;
}
.gal-group__title em{ color:var(--gold-d); font-style:italic; }
/* Gruppen-Label bewusst eine Stufe leiser als der Sektions-Eyebrow
   "Aus dem Atelier" (Review-Finding 5): in --ink-mute statt Gold, damit
   die Hierarchie Sektion ueber Gruppe auch farblich liest und das Gold im
   oberen Galerie-Drittel sparsam bleibt (G7, sparsame Akzentfuehrung).
   Eine feine Goldlinie davor haelt den dezenten Gold-Bezug, ohne die ganze
   Zeile einzufaerben. Kein Zaehler mehr (kein "01"/"02"), damit keine
   fehlende "03" suggeriert wird (Finding 3, die Drei-Gewerke-Erzaehlung
   bleibt im Lead der Sektion). */
.gal-group__label{
  display:flex; align-items:center; gap:12px;
  color:var(--ink-mute);
}
.gal-group__label::before{
  content:""; width:24px; height:1px; background:var(--gold-d);
  flex:0 0 auto;
}
/* die Platzhalter-Hinweiszeile sitzt jetzt innerhalb einer Gruppe,
   daher etwas naeher am Raster als der frueher freistehende Hinweis */
.gal-group .gal-note{ margin-top:clamp(24px,3vw,36px); }

/* ------------------------------------------------------------------
   Terrassen-Platzhalter-Kachel (ehrlich gekennzeichnet, G4).
   Kein Foto, sondern ein dezentes Planzeichnungs-/Ornament-Motiv auf
   ruhigem Papiergrund, plus Leistungstext und Hinweis. Bewusst breit und
   ruhig, damit die Gruppe trotz fehlendem Foto wertig wirkt und nicht
   leer. Sobald echte Terrassenfotos vorliegen (CW10), tritt eine normale
   .gal-Figure an diese Stelle.
------------------------------------------------------------------ */
.terr-placeholder{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,4vw,64px); align-items:stretch;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--rad);
  overflow:hidden;
}
/* Motiv-Flaeche: warmer, sehr ruhiger Grund mit zentriertem Linien-Ornament.
   Eine feine, gestrichelte Innenlinie zitiert die Anmutung einer
   Planzeichnung (G7 ausdruecklich erwuenscht).
   Hoehe bewusst gedeckelt (Review-Finding 4, optische Balance): der
   ehrliche Platzhalter darf nicht mehr visuelles Gewicht bekommen als die
   echten Bad-Kacheln darueber. Daher eine ruhige, eher flache Frame-Hoehe
   (mabian-Prinzip: belegtes Material fuehrt vor Anmutung). Sobald echte
   Terrassenfotos vorliegen (CW10), holen sie das Gewicht ohnehin zurueck. */
.terr-placeholder__frame{
  position:relative;
  min-height:clamp(220px,24vw,300px);
  background:var(--mocca-soft);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px,4vw,48px);
}
.terr-placeholder__frame::before{
  content:""; position:absolute; inset:16px;
  border:1px dashed var(--mocca); opacity:.35; pointer-events:none;
}
.terr-placeholder__ornament{
  color:var(--mocca); opacity:.55; width:min(78%,260px);
}
.terr-placeholder__ornament svg{ width:100%; height:auto; display:block; }
/* ruhiges Status-Schild, gold, betont den ehrlichen Platzhalter-Charakter */
.terr-placeholder__tag{
  position:absolute; left:20px; top:20px; z-index:2;
  background:var(--gold-d); color:#fff; /* SR-08: AA-Kontrast auf Gold */
  border-radius:var(--rad); padding:7px 12px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
/* Textspalte: Leistung benennen, ehrlicher Hinweis darunter */
.terr-placeholder__cap{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,4vw,48px); padding-left:0;
}
.terr-placeholder__lead{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(19px,1.9vw,25px); line-height:1.42; color:var(--ink);
  max-width:42ch;
}
.terr-placeholder__note{
  margin-top:clamp(20px,2.5vw,28px); padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid var(--line);
  display:flex; align-items:flex-start; gap:14px;
  font-size:12.5px; line-height:1.6; letter-spacing:.01em;
  color:var(--ink-mute); font-weight:500; max-width:48ch;
}
.terr-placeholder__note::before{
  content:""; width:28px; height:1px; margin-top:9px;
  background:var(--gold-d); flex:0 0 auto;
}

@media (max-width:768px){
  .terr-placeholder{ grid-template-columns:1fr; }
  .terr-placeholder__frame{ min-height:clamp(200px,46vw,280px); }
  .terr-placeholder__cap{ padding:clamp(28px,6vw,40px); padding-top:0; }
}

/* ==================================================================
   CW4 · Über uns
   Additive Erweiterung. NUR fuer ueber-uns.html.
   Keine bestehende Regel, kein Token, keine Interaktionssprache veraendert.
   Bild-Hover (Ken-Burns 4.2), Reveal (4.4), Buttons und Easing folgen 1:1
   dem eingefrorenen CW1-System (--tx). Wiederverwendet wird .cta-band 1:1
   und die Hilfsklasse .sr-only (CW2). Tokens only, keine Fremdfarben.
   Reihenfolge der Bloecke: 1 Seitenkopf, 2 Klaus und Sascha (Handwerk),
   3 Patrick (planerischer Kopf, KEIN Foto), 4 Werte und Pull-Quote,
   5 Partnernetzwerk. Jede Komponente ein geschlossener Block.
   Guardrails: kein unzulaessiger Berufstitel (G1), Patrick ohne Foto und ohne Nachname (G2),
   ehrliche Platzhalter statt erfundener Inhalte (G4), Palette
   Gold/Mocca/Papier/Schwarz (G7).
================================================================== */

/* ------------------------------------------------------------------
   1 · Seitenkopf (ruhig, kein Vollbild-Hero, analog .rpage-head/.lpage-head).
   Etwas Luft zum fixierten Header, dann Sektionskopf mit der einzigen h1.
------------------------------------------------------------------ */
.apage-head{
  padding-top:clamp(132px, 16vw, 200px);
  padding-bottom:clamp(40px, 5vw, 72px);
}
.apage-head .section-head{ max-width:920px; }
.apage-head h1{
  margin-top:6px;
  font-size:clamp(38px, 5.8vw, 68px);
  letter-spacing:-.012em; color:var(--noir); text-wrap:balance;
}
.apage-head h1 em{ color:var(--gold-d); }
.apage-head .lead{ margin-top:8px; max-width:58ch; }

/* ------------------------------------------------------------------
   2 · Klaus und Sascha (das Handwerk)
   Zweispaltig editorial: links die Medienspalte (Portrait-Platzhalter plus
   atmosphaerisches Material-Detail), rechts der ruhige Charaktertext mit
   Merkmal-Liste. Bild-Hover Ken-Burns wie 4.2.
------------------------------------------------------------------ */
.team{ padding-top:clamp(8px, 2vw, 24px); }
/* align-items:stretch, damit die Portrait-Spalte exakt so hoch wird wie der
   Charaktertext rechts (Domme-Korrektur 10.06.2026: das atmosphaerische
   Begleitbild wurde entfernt, die Portrait-Flaeche fuellt jetzt die volle
   Sektionshoehe). */
.team__grid{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(40px, 5vw, 80px); align-items:stretch;
}

/* Medienspalte: traegt nur noch den Portrait-Platzhalter, der die Spalte fuellt */
.team__media{ display:flex; flex-direction:column; }

/* Portrait-Platzhalter (ehrlich, G4): KEIN fremdes Personenfoto, sondern
   eine ruhige Flaeche mit dezentem Linien-Ornament zweier Koepfe und
   sichtbarem Status-Schild. Sobald echte Aufnahmen vorliegen (CW10), tritt
   hier ein echtes Doppelportrait an die Stelle. Fuellt die Texthoehe
   (flex:1 + Untergrenze), Ornament bleibt vertikal zentriert. */
.team__portrait{
  position:relative;
  flex:1 1 auto;
  min-height:clamp(380px, 46vw, 520px);
  background:var(--mocca-soft);
  border:1px solid var(--line);
  border-radius:var(--rad);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(28px, 4vw, 48px);
  overflow:hidden;
}
.team__portrait::before{
  content:""; position:absolute; inset:16px;
  border:1px dashed var(--mocca); opacity:.32; pointer-events:none;
}
.team__portrait-ornament{ color:var(--mocca); opacity:.55; width:min(72%, 240px); }
.team__portrait-ornament svg{ width:100%; height:auto; display:block; }
.team__portrait-tag{
  position:absolute; left:20px; top:20px; z-index:2;
  background:var(--gold-d); color:#fff; /* SR-08: AA-Kontrast auf Gold */
  border-radius:var(--rad); padding:7px 12px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}

/* SP-02 (16.06.2026): totes .team__atmo entfernt (0 Verwendung im Markup). */

/* Copy-Spalte */
.team__copy{ padding-top:clamp(0px, 2vw, 28px); }
.team__copy .eyebrow{ margin-bottom:18px; }
.team__copy h2{ color:var(--noir); }
.team__copy h2 em{ color:var(--gold-d); }
.team__lead{
  margin-top:24px; color:var(--ink-2);
  font-size:clamp(15px,1.15vw,17px); line-height:1.7; max-width:52ch;
}
.team__p{
  margin-top:16px; color:var(--ink-2);
  font-size:clamp(15px,1.1vw,16px); line-height:1.7; max-width:52ch;
}

/* Merkmal-Liste: drei ruhige Zeilen mit feiner Goldlinie */
.team__traits{
  list-style:none; padding:0; margin:clamp(32px,4vw,44px) 0 0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.team__trait{
  background:var(--bg); padding:24px 22px 26px;
  display:flex; flex-direction:column; gap:10px;
  transition:background .35s var(--tx);
}
.team__trait-line{
  width:32px; height:1px; background:var(--gold-d);
  transition:width .5s var(--tx);
}
.team__trait-k{
  font-family:var(--f-display); font-weight:500; font-size:20px;
  color:var(--ink); line-height:1.2;
}
.team__trait-v{ font-size:12.5px; line-height:1.55; color:var(--ink-mute); margin-top:auto; }
@media (hover:hover) and (pointer:fine){
  .team__trait:hover{ background:var(--mocca-soft); }
  .team__trait:hover .team__trait-line{ width:48px; }
}

@media (max-width:960px){
  .team__grid{ grid-template-columns:1fr; gap:48px; align-items:start; }
  .team__copy{ padding-top:0; }
  .team__portrait{ min-height:clamp(320px, 70vw, 460px); }
}
@media (max-width:560px){
  .team__traits{ grid-template-columns:1fr; }
  .team__trait{ min-height:auto; }
}

/* ------------------------------------------------------------------
   3 · Patrick (der planerische Kopf, dunkler Anker)
   Auf Noir-Grund wie die Philosophie-Sektion der Startseite. Links der
   ruhige Charaktertext, rechts ein Planzeichnungs-/Ornament-Motiv (G7,
   reine Linien, Gold auf Dunkel) ANSTELLE eines Fotos (G2: kein Foto,
   kein Nachname). Das Motiv ist klar gezeichnet, niemals als Portrait
   missverstaendlich.
------------------------------------------------------------------ */
.planner{ background:var(--noir); color:#fff; }
.planner__grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(40px, 6vw, 96px); align-items:center;
}
.planner__copy .eyebrow{ margin-bottom:18px; }
.planner__copy h2{ color:#fff; }
.planner__copy h2 em{ color:var(--gold-l); }
.planner__lead{
  margin-top:24px; color:rgba(255,255,255,.78);
  font-size:clamp(15px,1.15vw,18px); line-height:1.7; max-width:48ch;
}
.planner__p{
  margin-top:16px; color:rgba(255,255,255,.62);
  font-size:clamp(14px,1.05vw,16px); line-height:1.7; max-width:48ch;
}
.planner__role{
  margin-top:clamp(28px,3.5vw,36px); padding-left:16px;
  border-left:2px solid var(--gold-l);
  font-size:13px; letter-spacing:.04em; color:rgba(255,255,255,.74);
}

/* Motiv-Flaeche statt Foto: gerahmtes Linien-Ornament, Gold auf Dunkel. */
.planner__motif{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.015);
  border-radius:var(--rad);
  padding:clamp(32px,4vw,56px);
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.planner__ornament{ color:var(--gold-l); opacity:.5; width:min(80%, 300px); }
.planner__ornament svg{ width:100%; height:auto; display:block; }
.planner__motif-cap{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.5); font-weight:600;
}

@media (max-width:960px){
  .planner__grid{ grid-template-columns:1fr; gap:48px; }
  .planner__motif{ order:-1; }
}

/* ------------------------------------------------------------------
   4 · Werte / Pull-Quote
   Pull-Quote 1:1 als ruhiges, grosses Display-Statement (Eigenaussage,
   kein Kundenzitat). Darunter die vier Werte im ruhigen Raster, analog
   .mat-grid der Leistungsseite (systemkonsistent).
------------------------------------------------------------------ */
.values{ background:var(--bg-2); }
/* Zweispaltig (Domme-Korrektur 10.06.2026): die Pull-Quote stand vorher als
   schmaler Block links mit grosser leerer Flaeche rechts. Jetzt steht die
   Quote links und die vier Werte als 2x2-Raster rechts daneben, vertikal
   zueinander zentriert. Das schliesst die Freiflaeche und gibt der
   Quote-Ausrichtung Sinn. */
.values .wrap{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,88px); align-items:center;
}
.values__quote{
  margin:0;
  max-width:20ch;
}
.values__quote p{
  font-family:var(--f-display); font-weight:400; font-style:italic;
  font-size:clamp(28px,3.4vw,46px); line-height:1.22;
  letter-spacing:-.01em; color:var(--ink); text-wrap:balance;
}
.values__quote em{ color:var(--gold-d); font-style:italic; }

.values__grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.value{
  background:var(--bg);
  padding:30px 26px 32px;
  display:flex; flex-direction:column; gap:12px;
  min-height:200px;
  transition:background .35s var(--tx);
}
.value__line{
  width:32px; height:1px; background:var(--gold-d);
  transition:width .5s var(--tx);
}
.value__name{
  font-family:var(--f-display); font-weight:500; font-size:23px;
  color:var(--ink); line-height:1.2;
}
.value__note{ font-size:13px; line-height:1.6; color:var(--ink-mute); margin-top:auto; }
@media (hover:hover) and (pointer:fine){
  .value:hover{ background:var(--mocca-soft); }
  .value:hover .value__line{ width:48px; }
}

@media (max-width:960px){
  /* einspaltig: Quote oben ueber volle Breite, Werte-Raster darunter */
  .values .wrap{ grid-template-columns:1fr; gap:clamp(36px,5vw,56px); }
  .values__quote{ max-width:34ch; }
}
@media (max-width:480px){
  .values__grid{ grid-template-columns:1fr; }
  .value{ min-height:auto; }
}

/* ------------------------------------------------------------------
   5 · Partnernetzwerk
   Zweispaltig: links Sektionskopf, rechts die Partnerkarten. Dezent.
   Heizung Gentgen als markierte Platzhalter-Karte mit "Daten folgen"
   (G4, keine erfundene Adresse/Nummer), daneben eine leere, gestrichelte
   Karte fuer kuenftige Partner (analog .partner.is-empty der Startseite).
------------------------------------------------------------------ */
.network__grid{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(40px, 6vw, 96px); align-items:start;
}
.network__head .lead{ margin-top:8px; max-width:44ch; }
.network__head h2{ color:var(--noir); }
.network__head h2 em{ color:var(--gold-d); }

.network__cards{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.net-card{
  position:relative; background:var(--bg);
  padding:clamp(28px,3vw,36px);
  display:flex; flex-direction:column; gap:12px; min-height:240px;
}
.net-card__role{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
.net-card__name{
  font-family:var(--f-display); font-weight:500; font-size:clamp(22px,2vw,26px);
  color:var(--ink); line-height:1.2;
}
.net-card__note{ font-size:13px; line-height:1.65; color:var(--ink-2); max-width:34ch; }
.net-card__tag{
  margin-top:auto; align-self:flex-start;
  border:1px solid var(--line); border-radius:var(--rad);
  padding:6px 11px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
/* leere Karte fuer kuenftige Partner, gestrichelt, sehr leise */
.net-card--empty{
  background:transparent;
  display:grid; place-items:center; text-align:center;
  border:1px dashed var(--line); margin:-1px;
}
.net-card__placeholder{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500; max-width:18ch; line-height:1.6;
}

@media (max-width:960px){
  .network__grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width:560px){
  .network__cards{ grid-template-columns:1fr; }
  .net-card{ min-height:auto; }
  .net-card--empty{ min-height:120px; }
}

/* ==================================================================
   CW5 · Kontakt
   Additive Erweiterung. NUR fuer kontakt.html.
   Keine bestehende Regel, kein Token, keine Interaktionssprache veraendert.
   Alle Selektoren neu praefixiert (kpage-head, kcontactsec, kgrid, kform,
   kfield, kcheck, kcontact, kmap, karea), kein Leak auf andere Seiten.
   Bild-/Linien-Hover, Reveal (4.4), Buttons und Easing folgen 1:1 dem
   eingefrorenen CW1-System (--tx). Tokens only, keine Fremdfarben.
   Reihenfolge der Bloecke: 1 Seitenkopf, 2 Formular + Direktkontakt,
   3 Karte (datenschutzkonform, null externer Request), 4 Einzugsgebiet.
   Jede Komponente ein geschlossener Block. Breakpoints an den
   Systemwerten (1080/960/768/560/480).
================================================================== */

/* ------------------------------------------------------------------
   1 · Seitenkopf (ruhig, kein Vollbild-Hero, analog .apage-head/.rpage-head).
   Etwas Luft zum fixierten Header, dann Sektionskopf mit der einzigen h1.
------------------------------------------------------------------ */
.kpage-head{
  padding-top:clamp(132px, 16vw, 200px);
  padding-bottom:clamp(40px, 5vw, 72px);
}
.kpage-head .section-head{ max-width:840px; }
.kpage-head h1{
  margin-top:6px;
  font-size:clamp(40px, 6.2vw, 72px);
  letter-spacing:-.012em; color:var(--noir); text-wrap:balance;
}
.kpage-head h1 em{ color:var(--gold-d); }
.kpage-head .lead{ margin-top:8px; max-width:58ch; }

/* ------------------------------------------------------------------
   2 · Formular + Direktkontakt
   Zweispaltiges editoriales Layout: Formular breiter (links), ruhige
   Direktkontakt-Spalte rechts. Bricht ab 960px einspaltig. SR-12: mobil
   zieht order die Direktkontakt-Spalte vor das Formular (Anruf-Pfad
   zuerst erreichbar, Regel im REVIEW-FIXES-Block am Dateiende).
------------------------------------------------------------------ */
.kcontactsec{ padding-top:clamp(8px, 2vw, 24px); }
.kgrid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(40px, 5vw, 88px); align-items:start;
}

/* --- Formular-Kopf --- */
.kform-head{ margin-bottom:clamp(28px, 3.5vw, 40px); }
.kform-head .eyebrow{ margin-bottom:14px; }
.kform-head h2{ color:var(--noir); }
.kform-intro{
  margin-top:18px; color:var(--ink-2);
  font-size:clamp(15px,1.1vw,16px); line-height:1.7; max-width:52ch;
}
.kform-req-mark{ color:var(--gold-d); font-weight:700; }

/* --- Formular: ruhige Felder, eine Spalte, grosszuegige Abstaende --- */
.kform{ display:flex; flex-direction:column; gap:clamp(20px, 2.4vw, 26px); }

.kfield{ display:flex; flex-direction:column; gap:9px; }
.kfield__label{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2);
}
.kfield__req{ color:var(--gold-d); }
.kfield__opt{
  letter-spacing:.04em; text-transform:none; font-weight:500;
  color:var(--ink-mute); font-size:11px;
}

/* Eingaben: Manrope, ruhige Linie in --line, weicher Fokus in Gold.
   Border-Radius aus dem Token, kein eigener Wert. */
.kfield__input{
  font-family:var(--f-ui); font-size:16px; /* SR-14: 16px verhindert den iOS-Safari-Autozoom */ color:var(--ink);
  background:var(--bg);
  border:1px solid var(--mocca); /* SR-24: Feldgrenze mit mindestens 3:1 sichtbar (WCAG 1.4.11) */ border-radius:var(--rad);
  padding:14px 16px;
  line-height:1.5;
  transition:border-color .3s var(--tx), box-shadow .3s var(--tx);
  width:100%;
}
.kfield__input::placeholder{ color:var(--ink-mute); }
.kfield__input:hover{ border-color:var(--mocca); }
.kfield__input:focus{
  outline:none;
  border-color:var(--gold-d);
  box-shadow:0 0 0 3px rgba(119,90,25,.12);
}
.kfield__textarea{ resize:vertical; min-height:148px; }

/* Select: eigener Chevron (kein System-Pfeil), ruhig in Mocca/Gold.
   appearance:none, der Pfeil liegt als SVG ueber dem Feld. */
.kfield__selectwrap{ position:relative; }
.kfield__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:44px; cursor:pointer;
}
.kfield__chevron{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--ink-mute);
  pointer-events:none; display:block;
}
.kfield__chevron svg{ width:100%; height:100%; display:block; }
/* Platzhalter-Option (disabled) leicht gedaempft, sobald sie aktiv ist */
.kfield__select:invalid{ color:var(--ink-mute); }

/* Dezente, ruhige Validierungs-Anmutung (kein Rot-Alarm, G7):
   eine feine Mocca-Linie erst, nachdem das Feld beruehrt und verlassen
   wurde (:user-invalid). Kein knalliger Fehlerzustand beim ersten Laden. */
.kfield__input:user-invalid{
  border-color:var(--mocca);
  box-shadow:0 0 0 3px rgba(111,91,67,.10);
}

/* --- Datenschutz-Checkbox: eigene, ruhige Optik, Pflicht, nicht vorab gesetzt --- */
.kfield--check{
  flex-direction:row; align-items:flex-start; gap:14px;
  margin-top:4px;
}
.kcheck__input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; margin-top:2px;
  width:20px; height:20px;
  border:1px solid var(--mocca); /* SR-24: Checkbox-Grenze sichtbar (WCAG 1.4.11) */ border-radius:var(--rad);
  background:var(--bg); cursor:pointer;
  position:relative;
  transition:border-color .3s var(--tx), background .3s var(--tx);
}
.kcheck__input:hover{ border-color:var(--mocca); }
.kcheck__input:checked{ background:var(--gold-d); border-color:var(--gold-d); }
.kcheck__input:checked::after{
  content:""; position:absolute;
  left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.kcheck__input:user-invalid{ border-color:var(--mocca); }
.kcheck__label{
  font-size:13px; line-height:1.6; color:var(--ink-2); max-width:52ch;
}
.kcheck__label a{
  color:var(--gold-d); border-bottom:1px solid var(--line);
  transition:border-color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .kcheck__label a:hover{ border-bottom-color:var(--gold-d); }
}

/* Honeypot: vollstaendig aus dem Sichtfeld, fuer Menschen unsichtbar und
   nicht fokussierbar. Muss leer bleiben (CW11-Backend prueft auf leer). */
.kform__hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.kform__note{
  font-size:12px; line-height:1.6; color:var(--ink-mute); max-width:52ch;
}
.kform__actions{ margin-top:6px; }
.kform__actions .btn{ width:100%; }
.kform__actions .btn[disabled]{ opacity:.6; cursor:progress; }

/* Fehlermeldung (dezent, kein Rot-Alarm: warmer Mocca-Ton, G7) */
.kform__error{
  margin:0 0 4px; padding:14px 16px;
  background:var(--mocca-soft); border-left:2px solid var(--mocca);
  border-radius:var(--rad);
  font-size:13.5px; line-height:1.6; color:var(--ink-2);
}
.kform__error a{ color:var(--gold-d); text-decoration:underline; text-underline-offset:2px; }

/* Erfolgs-Panel, ersetzt das Formular nach erfolgreichem Versand */
.kform-success{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--rad);
  padding:clamp(28px,4vw,48px);
}
.kform-success .eyebrow{ margin-bottom:14px; }
.kform-success__title{ color:var(--noir); }
.kform-success__title em{ color:var(--gold-d); }
.kform-success__text{
  margin-top:18px; color:var(--ink-2);
  font-size:clamp(15px,1.1vw,17px); line-height:1.7; max-width:52ch;
}
.kform-success__text a{ color:var(--gold-d); }

/* --- Direktkontakt-Spalte (rechts), ruhig, abgesetzte Flaeche --- */
.kcontact{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:clamp(28px, 3vw, 40px);
}
.kcontact .eyebrow{ margin-bottom:14px; }
.kcontact__title{ color:var(--noir); font-size:clamp(24px,2.4vw,30px); }
.kcontact__intro{
  margin-top:16px; color:var(--ink-2);
  font-size:14px; line-height:1.7; max-width:36ch;
}
.kcontact__list{
  list-style:none; padding:0; margin:clamp(28px,3vw,36px) 0 0;
  display:flex; flex-direction:column;
}
.kcontact__item{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 0; border-top:1px solid var(--line);
}
.kcontact__item:last-child{ border-bottom:1px solid var(--line); }
.kcontact__k{
  font-size:10px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
/* Telefon und E-Mail als ruhige Display-Links, analog .cta-block a */
.kcontact__v{
  font-family:var(--f-display); font-weight:500; font-size:clamp(19px,1.8vw,23px);
  color:var(--ink); line-height:1.25;
  border-bottom:1px solid transparent; align-self:flex-start;
  transition:color .3s var(--tx), border-color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .kcontact__v:hover{ color:var(--gold-d); border-bottom-color:var(--gold-d); }
}
.kcontact__addr{
  font-style:normal; font-family:var(--f-display); font-weight:500;
  font-size:18px; line-height:1.5; color:var(--ink);
}
.kcontact__hours{
  font-size:13px; line-height:1.7; color:var(--ink-2);
}

@media (max-width:960px){
  .kgrid{ grid-template-columns:1fr; gap:clamp(40px,6vw,56px); }
}

/* ------------------------------------------------------------------
   3 · Karte (datenschutzkonform, null externer Request)
   Zweispaltig: links der gezeichnete Plan-Platzhalter im Marken-Stil
   (inline-SVG, reine Linien in Mocca), rechts die Adress-Karte mit dem
   ausgehenden Route-Link. Kein iframe, kein Static-Maps-Bild, kein Token.
------------------------------------------------------------------ */
.kmap{ background:var(--bg-2); }
.kmap__grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(40px, 5vw, 80px); align-items:stretch;
}

/* Plan-Platzhalter: reine Linienzeichnung auf ruhiger Flaeche, mit
   einem dezenten Standort-Pin in der Mitte. Rein dekorativ (aria-hidden). */
.kmap__plan{
  position:relative; overflow:hidden;
  min-height:clamp(280px, 38vw, 420px);
  background:var(--bg);
  border:1px solid var(--line); border-radius:var(--rad);
}
.kmap__svg{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--mocca); opacity:.42;
}
.kmap__pin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -70%);
  width:clamp(34px, 4vw, 44px); color:var(--gold-d);
}
.kmap__pin svg{ width:100%; height:auto; display:block; }

/* Adress-Karte rechts */
.kmap__card{
  background:var(--bg);
  border:1px solid var(--line); border-radius:var(--rad);
  padding:clamp(28px, 3.2vw, 44px);
  display:flex; flex-direction:column;
}
.kmap__card .eyebrow{ margin-bottom:14px; }
.kmap__title{ color:var(--noir); }
.kmap__title em{ color:var(--gold-d); }
.kmap__addr{
  margin-top:22px;
  font-style:normal; font-family:var(--f-display); font-weight:500;
  font-size:clamp(18px,1.8vw,21px); line-height:1.5; color:var(--ink);
}
.kmap__note{
  margin-top:20px; color:var(--ink-2);
  font-size:13.5px; line-height:1.7; max-width:44ch;
}
.kmap__route{ margin-top:clamp(24px,3vw,32px); align-self:flex-start; }

/* Klick-to-load-Rahmen: traegt jetzt die Rahmen-Optik, der gezeichnete Plan
   fuellt ihn als Hintergrund. Additiv, ueberschreibt die fruehere
   .kmap__plan-Optik NUR im Kontext von .kmap__embed. */
.kmap__embed{
  position:relative; overflow:hidden;
  min-height:clamp(280px, 38vw, 420px);
  border:1px solid var(--line); border-radius:var(--rad);
  background:var(--bg);
}
.kmap__embed .kmap__plan{
  position:absolute; inset:0;
  min-height:0; border:0; border-radius:0;
}
/* Einwilligungs-Overlay ueber dem Plan, ruhige Papier-Schleier-Flaeche */
.kmap__consent{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; padding:clamp(24px,4vw,40px); text-align:center;
  background:linear-gradient(to bottom, rgba(251,249,245,.55), rgba(251,249,245,.82));
}
.kmap__consent-text{
  max-width:42ch; color:var(--ink-2);
  font-size:13.5px; line-height:1.7;
}
.kmap__consent-text a{ color:var(--gold-d); text-decoration:underline; text-underline-offset:2px; }
.kmap__load{ align-self:center; }
/* iframe, erst nach Klick injiziert, fuellt den Rahmen */
.kmap__iframe{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0; display:block;
}
/* nach dem Laden Plan und Overlay aus dem Weg */
.kmap__embed.is-loaded .kmap__plan,
.kmap__embed.is-loaded .kmap__consent{ display:none; }

@media (max-width:960px){
  .kmap__grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
  .kmap__plan{ min-height:clamp(220px, 50vw, 300px); }
  .kmap__embed{ min-height:clamp(260px, 60vw, 340px); }
}

/* ------------------------------------------------------------------
   4 · Einzugsgebiet
   Ruhiges Orts-Raster mit feinen Goldlinien, analog .mat-grid /
   .team__traits (systemkonsistent). Schliesst die Seite ruhig ab,
   kein zweiter CTA-Block.
------------------------------------------------------------------ */
.karea .section-head{ margin-bottom:clamp(40px, 5vw, 64px); }
.karea .section-head h2{ color:var(--noir); }
.karea .section-head h2 em{ color:var(--gold-d); }

.karea__grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--rad);
  overflow:hidden;
}
.karea__item{
  background:var(--bg);
  padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:14px;
  min-height:120px;
  transition:background .35s var(--tx);
}
.karea__line{
  width:28px; height:1px; background:var(--gold-d);
  transition:width .5s var(--tx);
}
.karea__name{
  font-family:var(--f-display); font-weight:500; font-size:21px;
  color:var(--ink); line-height:1.2; margin-top:auto;
}
@media (hover:hover) and (pointer:fine){
  .karea__item:hover{ background:var(--mocca-soft); }
  .karea__item:hover .karea__line{ width:44px; }
}

@media (max-width:1080px){
  .karea__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .karea__grid{ grid-template-columns:1fr; }
  .karea__item{ min-height:auto; }
}

/* ==================================================================
   CW6 · Recht (Impressum + Datenschutz, recht.html)
   Nur additiv, alle Selektoren neu praefixiert (.rechtpage-head, .legal,
   .legal__...). Keine bestehende Regel, kein Token, keine Interaktions-
   sprache veraendert. Kein !important, keine Token-Ueberschreibung.
   Breakpoints an Systemwerten (960/768/560/480).
   Ziel: ruhiger, gut lesbarer Legal-Lesetext im Perfectile-System.
   Cormorant fuer h2/h3 (kommt global), Manrope-Fliesstext, schmale
   Lesebreite (~72ch), grosszuegige vertikale Rhythmik, Gold sparsam.
================================================================== */

/* Seitenkopf analog .kpage-head/.apage-head: ruhig, kein Vollbild-Hero.
   Setzt nur einen Abstand zum fixierten Header, das Sektions-Padding
   kommt aus der globalen section-Regel. */
.rechtpage-head{ padding-top:clamp(120px, 16vw, 200px); padding-bottom:clamp(40px, 5vw, 72px); /* SR-15: Mass-Angleichung an die uebrigen Seitenkoepfe */ }
.rechtpage-head h1 em{ color:var(--gold-d); }

/* Lesebereich: einspaltig, schmale Lesebreite. Der abgesetzte Grund
   (--bg-2) hebt den Lesetext ruhig vom Seitenkopf ab. */
.legal{ background:var(--bg-2); padding-top:clamp(8px, 2vw, 24px); /* SR-15: analog .kcontactsec/.trades, Inhalt beginnt direkt nach dem Kopf */ }
.legal__wrap{ max-width:860px; }

/* Inhaltsverzeichnis / Sprungmarken (dezent). Feine Goldlinie links,
   ruhige Ankerlinks. Smooth-Scroll ueber main.js initAnchors. */
.legal__toc{
  margin-bottom:clamp(48px, 6vw, 80px);
  padding:24px 28px;
  background:var(--bg);
  border:1px solid var(--line);
  border-left:2px solid var(--gold-d);
  border-radius:var(--rad);
}
.legal__toc-label{ margin-bottom:14px; }
.legal__toc-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 32px;
}
.legal__toc-link{
  font-family:var(--f-display);
  font-size:clamp(20px, 2.2vw, 26px);
  font-weight:500;
  color:var(--ink);
  position:relative;
  transition:color .3s var(--tx);
}
.legal__toc-link::after{
  content:""; position:absolute; left:0; right:0; bottom:1px;
  height:1px; background:var(--gold-d);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .legal__toc-link:hover{ color:var(--gold-d); }
  .legal__toc-link:hover::after{ transform:scaleX(1); }
}

/* Hauptbloecke (Impressum, Datenschutz). Feine Linie trennt die beiden
   Hauptbloecke ruhig voneinander (var(--line)). scroll-margin-top, damit
   die Sprungmarke nicht unter dem fixierten Header landet. */
.legal__block{ scroll-margin-top:120px; }
.legal__block + .legal__block{
  margin-top:clamp(56px, 7vw, 96px);
  padding-top:clamp(56px, 7vw, 96px);
  border-top:1px solid var(--line);
}
.legal__block-head{ margin-bottom:clamp(28px, 3.5vw, 44px); }
.legal__block-head .eyebrow{ margin-bottom:14px; }
.legal__h2{ color:var(--noir); }
.legal__intro{
  margin-top:18px;
  font-size:clamp(16px, 1.2vw, 18px);
  color:var(--ink-2);
  line-height:1.6;
  max-width:66ch;
}

/* Lesetext: schmale Lesebreite, grosszuegiger vertikaler Rhythmus. */
.legal__body{ max-width:72ch; }
.legal__h3{
  font-size:clamp(20px, 2vw, 25px);
  color:var(--ink);
  margin-top:clamp(34px, 4vw, 52px);
  margin-bottom:12px;
}
/* erste Ueberschrift im Body ohne den grossen Vorabstand */
.legal__body > .legal__h3:first-child{ margin-top:0; }
.legal__num{ color:var(--gold-d); font-style:italic; margin-right:.35em; }

.legal__p{
  color:var(--ink-2);
  font-size:16px;
  line-height:1.72;
  margin-bottom:14px;
}
.legal__p a,
.legal__address a,
.legal__dd a{
  color:var(--gold-d);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:var(--line);
  transition:text-decoration-color .3s var(--tx), color .3s var(--tx);
  word-break:break-word;
}
@media (hover:hover) and (pointer:fine){
  .legal__p a:hover,
  .legal__address a:hover,
  .legal__dd a:hover{ text-decoration-color:var(--gold-d); }
}

/* Adressen ruhig, nicht kursiv (address erbt sonst italic). */
.legal__address{
  font-style:normal;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.72;
  margin-bottom:14px;
}

/* Definitionsliste fuer Impressum-Stammdaten: ruhiges Label-Wert-Raster. */
.legal__dl{ margin:0 0 14px; }
.legal__row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:4px 24px;
  padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.legal__row:first-child{ border-top:1px solid var(--line-soft); }
.legal__dt{
  font-family:var(--f-ui);
  font-weight:600;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:2px;
}
.legal__dd{
  margin:0;
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
}

/* Aufzaehlungen (Rechtsgrundlagen, Cookie-Arten). */
.legal__list{
  margin:0 0 14px;
  padding-left:22px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.72;
}
.legal__list li{ margin-bottom:8px; }
.legal__list li::marker{ color:var(--gold-d); }

/* Sichtbar markierter, dezenter Platzhalter (TODO).
   Mocca-Linie links, gedaempfter Text, kursiv, damit klar als noch
   offener Punkt erkennbar, ohne den Lesefluss zu stoeren. */
.legal__todo{
  color:var(--ink-mute);
  font-style:italic;
  padding:10px 16px;
  border-left:2px solid var(--mocca);
  background:var(--mocca-soft);
  border-radius:var(--rad);
}
/* Inline-Platzhalter innerhalb eines Satzes (Fristen). */
.legal__todo-inline{
  color:var(--mocca);
  font-style:italic;
}

/* "Geplant"-Markierung fuer den GA4-Abschnitt (noch nicht aktiv). */
.legal__planned{ margin-bottom:14px; }
.legal__planned-tag{
  display:inline-block;
  font-family:var(--f-ui);
  font-weight:600;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-d);
  padding:5px 12px;
  border:1px solid var(--gold-d);
  border-radius:var(--rad);
}

/* Stand-Zeile am Ende der Datenschutzerklaerung. */
.legal__stand{
  margin-top:24px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--ink-mute);
}

/* Responsive an Systemwerten. */
@media (max-width:560px){
  .legal__row{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
  .legal__dt{ padding-top:0; }
  .legal__toc-list{ gap:8px 24px; }
}


/* ==================================================================
   Partnernetzwerk-Logos + Instagram (10.06.2026, additiv)
   Echte Partnerlogos dezent: Graustufe in Ruhe, Farbe bei Hover (G7,
   kein roter Knall). Genutzt in der Ueber-uns-Sektion .network und im
   Footer. Instagram dezent in der Footer-Brand-Spalte.
================================================================== */
/* --- Ueber uns: Partnerkarte mit Logo --- */
.net-card--partner{ gap:14px; }
.net-card__logo{
  display:flex; align-items:center; justify-content:center;
  height:84px; padding:14px 18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--rad);
  align-self:flex-start; max-width:100%;
}
.net-card__logo img{
  max-height:100%; max-width:200px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72;
  transition:filter .5s var(--tx), opacity .5s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .net-card--partner:hover .net-card__logo img{ filter:grayscale(0); opacity:1; }
}
.net-card__logo--empty{
  border-style:dashed; color:var(--mocca);
  font-family:var(--f-display); font-size:24px; letter-spacing:.04em;
}
.net-card__link{ margin-top:auto; }

/* --- Footer: Instagram dezent --- */
.foot-ig{
  display:inline-flex; align-items:center; gap:9px; margin-top:18px;
  font-size:13px; color:rgba(255,255,255,.6);
  transition:color .3s var(--tx);
}
.foot-ig svg{ flex-shrink:0; }
@media (hover:hover) and (pointer:fine){
  .foot-ig:hover{ color:var(--gold-l); }
}

/* SP-02 (16.06.2026): tote Footer-Partnernetzwerk-Reihe entfernt
   (.foot-partners*, .foot-partner-tile/-text, 0 Verwendung im Markup). Die
   Partnerlogos stehen real auf Startseite und Ueber uns, nicht im Footer. */

/* ==================================================================
   Echtes Perfectile-Logo (10.06.2026, additiv)
   image001-Variante: goldener Schriftzug auf dunklem Grund (dunkle Box
   bereits eingebaut, Masterplan §7). Ersetzt den frueheren Icon+Text-Block
   in Header, Drawer und Footer. Dunkler Grund liefert auf hellem Header den
   Kontrast, auf dem dunklen Footer eine ruhige Plakette.
================================================================== */
.brand__logo{
  display:block; height:clamp(44px, 5.2vw, 52px); width:auto;
  border-radius:4px; flex:0 0 auto;
}
.brand__logo--drawer{ height:40px; }
.brand--foot{ display:inline-flex; }
.brand__logo--foot{ height:clamp(56px, 7vw, 66px); border-radius:5px; }
@media (max-width:640px){
  .brand__logo{ height:44px; }
}

/* --- Startseite: Partnerkarten mit Logo (analog .net-card, 10.06.2026) --- */
.partner--logo{ gap:14px; }
.partner__logo{
  display:flex; align-items:center; justify-content:center;
  height:80px; padding:12px 16px; align-self:flex-start; max-width:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--rad);
}
.partner__logo img{
  max-height:100%; max-width:190px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72;
  transition:filter .5s var(--tx), opacity .5s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .partner--logo:hover .partner__logo img{ filter:grayscale(0); opacity:1; }
}
.partner__logo--empty{
  border-style:dashed; color:var(--mocca);
  font-family:var(--f-display); font-size:22px; letter-spacing:.04em;
}
.partner__link{ margin-top:auto; }
.partner__tag{
  margin-top:auto; align-self:flex-start;
  border:1px solid var(--line); border-radius:var(--rad); padding:6px 11px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}

/* --- Brand-Text neben dem Logo (Wortmarke + Subline darunter, 10.06.2026) --- */
.brand__text{ display:flex; flex-direction:column; }

/* ===== REVIEW-FIXES 11.06.2026 =====
   Neue Regeln aus dem Senior-Review Phase 1 (BUILD/REVIEW-PHASE1.md).
   Korrekturen bestehender Werte stehen direkt an der jeweiligen Regel,
   markiert mit dem SR-Kuerzel. Hier nur die ergaenzten Regeln. */

/* SR-10: verbindliche Gold-Akzentregel fuer Headline-em.
   Heller Grund traegt var(--gold-d), dunkler Grund var(--gold-l).
   Hier die sechs bisher fehlenden Regeln auf hellem Grund, die
   bestehenden Regeln (.apage-head, .kpage-head, .rechtpage-head,
   .cta-band, .proc-band u.a.) bleiben unveraendert. */
.hero h1 em{ color:var(--gold-d); }
.lpage-head h1 em{ color:var(--gold-d); }
.rpage-head h1 em{ color:var(--gold-d); }
.services .section-head h2 em{ color:var(--gold-d); }
.atelier h2 em{ color:var(--gold-d); }
.matdetails .section-head h2 em{ color:var(--gold-d); }

/* SR-13: Spezifitaetsfix fuer die Footer-Bottom-Leiste.
   Die generische Grid-Regel .site-footer .wrap (Spalten, 64px Padding,
   Trennlinie) schlug die Flex-Regel .foot-bottom. Gleiche Mechanik wie
   beim dokumentierten .foot-partners-Fix weiter oben. */
.site-footer .foot-bottom{
  display:flex; gap:16px;
  padding-bottom:0; border-bottom:0;
}

/* SR-21: Tap-Ziele der Rechtslinks in der Footer-Bottom-Leiste.
   Vertikales Padding plus negative Margin: Trefferflaeche waechst auf
   rund 41px, die Hoehe der Leiste bleibt unveraendert. */
.foot-bottom a{
  display:inline-block;
  padding-block:12px; margin-block:-12px;
}

/* ===== B3 + B4 (Patrick-Feedback 14.06.2026, umgesetzt 15.06.) =================
   B3 "Logo staerker integrieren": Das Logo ist fuer dunkle Gruende gemacht
   (Gold auf Navy) und stand bisher frei auf dem hellen Header, wirkte isoliert.
   Es sitzt nun in einer dunklen Box mit feinem Verlauf und Gold-Hairline und ist
   damit in die Kopfzeile eingebettet (Konzept "Logo in dunkler Box", Masterplan §7).
   B4 "Wortmarke mit Logo-E": Der separate Text-Schriftzug PERFECTILE entfaellt.
   Die sichtbare Wortmarke ist jetzt die Logo-Grafik selbst, deren E aus drei
   waagerechten Strichen ohne Mittelstamm besteht (genau Patricks Wunsch). Eine
   Schriftart koennte dieses E nicht abbilden.
   Diese Regeln ueberschreiben additiv die fruehere quadratische .brand__mark
   (war im Markup ungenutzt) und die fruehere freistehende .brand__logo. =========== */
.brand__mark{
  height:58px; width:auto; padding:0;
  background:#10131c;   /* Fallback-Navy, entspricht dem Wortmarken-Hintergrund */
  border:1px solid rgba(233,193,118,.28);
  border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; overflow:hidden;
  box-shadow:0 8px 22px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .4s var(--tx), box-shadow .4s var(--tx);
}
/* Wortmarke (Bildmarke + PERFECTILE mit Logo-E) auf Navy, fuellt die Box randlos */
.brand__mark img{ height:100%; width:auto; object-fit:cover; display:block; border-radius:0; }
.brand:hover .brand__mark{ border-color:rgba(233,193,118,.5); box-shadow:0 10px 26px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.brand__mark--drawer{ height:54px; }
@media (max-width:640px){ .brand__mark{ height:48px; } }

/* ===== CW10-Fix: Galerie-Caption auf Mobil (15.06.2026) ======================
   Die echten Projekt-Captions sind laenger als die fruehere Platzhalter-Beschriftung
   ("Komplettbad · bodengleiche Dusche", "Terrassenbau · Großformatplatten"). Da
   .gal__meta white-space:nowrap traegt und Grid-Items per Default min-width:auto
   haben, zwang die nicht umbrechende Meta-Zeile das figure ueber seine Spalte hinaus
   (horizontaler Overflow ~46px auf 390px, Harness-Befund referenzen). Fix: Grid-Item
   darf schrumpfen (min-width:0), Caption stapelt auf schmalen Schirmen und die Meta
   darf umbrechen. Greift fuer alle Galerie-Gruppen (Baeder und Terrassen). ============ */
@media (max-width:560px){
  .gal{ min-width:0; }
  .gal__cap{ flex-direction:column; align-items:flex-start; gap:6px; }
  .gal__meta{ white-space:normal; padding-top:0; }
}

/* ===== Senior-Review-Fix 15.06.2026: Terrassen-Galerie im Querformat =========
   Die drei vorhandenen Terrassen-Motive sind alle Querformat. Im fruehen
   3/4-Hochrahmen (.gal--tall) blieb von der Gartenmauer-Aufnahme fast nur Rasen
   stehen, die Caption "Naturstein" war nicht eingeloest. Neue Variante .gal--half:
   zwei gleich grosse Querformat-Kacheln (4/3) nebeneinander, kein vertikaler Crop.
   Auf Tablet (6-Spalten-Grid) automatisch volle Breite, auf Mobil gestapelt. */
.gal--half{ grid-column:span 6; }
.gal--half .gal__frame{ aspect-ratio:4/3; }
@media (max-width:560px){
  .gal--half{ grid-column:1 / -1; }
}

/* ===== Brand-Tagline neben dem Logo (V4, Domme-Wahl 15.06.2026) ================
   Die fruehere graue Großbuchstaben-Subline wirkte blass neben dem kraeftigen
   Logo-Schild. Stattdessen die kursive Display-Serife (greift den editorialen
   Headline-Stil der Seite auf) plus Standort "Luxemburg" als Goldakzent.
   Auf Mobil ausgeblendet (siehe @media max-width:960px), das Logo traegt dort. */
.brand__tagline{
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(17px,1.5vw,21px); line-height:1.12;
  color:var(--ink-2); letter-spacing:.01em;
}
.brand__loc{
  font-family:var(--f-ui); font-style:normal;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-d); font-weight:600; margin-top:3px;
}
/* Auf Mobil Tagline + Standort aus (muss NACH der Basis-Regel .brand__text stehen). */
@media (max-width:960px){ .brand__text{ display:none; } }

/* SR-21 Ergaenzung: Listenpunkte ohne Link (Adresse, Oeffnungszeiten)
   erhalten dasselbe vertikale Mass wie die gepolsterten Links, damit der
   Zeilenrhythmus aller Footer-Spalten einheitlich bleibt. */
.foot-col li:not(:has(a)){ padding-block:10px; }

/* SR-12: mobiler Anruf-Pfad auf kontakt.html.
   1. Der Telefon-Link im Seitenkopf-Lead ist als ruhiger Goldlink erkennbar.
   2. Unter 960px rueckt die Direktkontakt-Spalte per order vor das Formular,
      Telefon und E-Mail sind ohne die komplette Formularstrecke erreichbar.
   3. Der Telefon-Sekundaerlink im Drawer rueckt dichter an den CTA heran
      (Drawer-gap 24px minus 12px ergibt ein enges Button-Paar). */
.kpage-head .lead a{
  color:var(--gold-d); font-weight:500;
  border-bottom:1px solid var(--gold-d);
  transition:color .3s var(--tx), border-color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){
  .kpage-head .lead a:hover{ color:var(--ink); border-color:var(--ink); }
}
@media (max-width:960px){
  .kcontact{ order:-1; }
}
.drawer .btn + .btn{ margin-top:-12px; }

/* SR-19: Sprungziele der Gewerke-Artikel auf leistungen.html. Deep-Links
   von den Startseiten-Teasern landen unter dem fixierten Header, ohne dass
   der Zieltitel verdeckt wird (initAnchors greift seitenuebergreifend nicht). */
#fliesen, #sanierung, #terrasse{ scroll-margin-top:116px; }

/* SR-20: ehrliche Hinweiszeile unter dem Referenz-Teaser der Startseite,
   spiegelt die Platzhalter-Kennzeichnung der Referenzseite (.gal-note). */
.refs__note{
  margin-top:clamp(32px,4vw,48px);
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
.refs__note::before{ content:""; width:32px; height:1px; background:var(--gold-d); flex:0 0 auto; }

/* SR-44: Atelier-Badge traegt statt der doppelten 20-Jahre-Kennzahl die
   belegte Aussage Familienbetrieb. Wort statt Zahl, daher eigene Schriftgroesse. */
.badge--word .badge__n{ font-size:20px; line-height:1.2; }

/* ===== Marazzi-Herstellerlogo · Materialwelt leistungen.html (11.06.2026) =====
   Ersetzt das Ornament in der linken 220px-Spalte der .mat-brand-Box. multiply
   blendet den weissen Logokasten in den Papierton, der schwarze Schriftzug bleibt
   (G7, kein Farbknall). Auf Mobil (Box einspaltig) linksbuendig wie der Text. */
.mat-brand__logobox{ display:flex; align-items:center; justify-content:center; }
.mat-brand__logo{ display:block; width:100%; max-width:150px; height:auto; mix-blend-mode:multiply; }
.mat-brand__btn{ margin-top:26px }
@media (max-width:960px){
  .mat-brand__logobox{ justify-content:flex-start; }
  .mat-brand__logo{ max-width:130px; }
}

/* ==================================================================
   CW12 · Einwilligungs-Banner (Consent, E10/G11, 16.06.2026, additiv)
   Schlanke, selbst gehostete Loesung. Tokens only, keine Fremdfarben,
   kein !important, keine Token-Ueberschreibung. NICHT modal (kein
   Cookie-Wall). "Alle ablehnen" steht optisch gleichrangig neben
   "Alle akzeptieren". Markup erzeugt main.js initConsent (Section 9).
   Breakpoints an Systemwerten (560px).
================================================================== */
.consent{
  position:fixed; inset:auto 0 0 0; z-index:60;
  display:flex; justify-content:center;
  padding:clamp(14px,2.5vw,24px);
  pointer-events:none;   /* nur das Panel faengt Klicks, der freie Rand nicht */
}
.consent[hidden]{ display:none; }
.consent__inner{
  pointer-events:auto;
  width:100%; max-width:760px;
  background:var(--bg);
  border:1px solid var(--line);
  border-top:2px solid var(--gold-d);
  border-radius:var(--rad);
  box-shadow:0 18px 50px rgba(14,14,13,.18);
  padding:clamp(22px,3vw,32px);
}
.consent__head{ margin-bottom:14px; }
.consent__title{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(22px,3vw,28px); line-height:1.15; color:var(--ink);
  margin:2px 0 0; outline:none;
}
.consent__text{
  color:var(--ink-2); font-size:14.5px; line-height:1.7; margin:0 0 20px;
}
.consent__text a{ color:var(--gold-d); text-decoration:underline; text-underline-offset:2px; }
.consent__actions{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end;
}
.consent__btn{ padding:14px 24px; font-size:11px; flex:1 1 auto; }
@media (min-width:560px){ .consent__btn{ flex:0 0 auto; } }

/* Granulare Kategorien (Schalter aus, keine Vorauswahl). */
.consent__cats{
  list-style:none; margin:0 0 22px; padding:0;
  border:1px solid var(--line); border-radius:var(--rad); overflow:hidden;
}
.consent__cat{ background:var(--bg); padding:16px 18px; }
.consent__cat + .consent__cat{ border-top:1px solid var(--line-soft); }
.consent__cat-row{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.consent__cat-row--static{ cursor:default; justify-content:space-between; }
.consent__check{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--gold-d); cursor:pointer; }
.consent__cat-name{ font-family:var(--f-ui); font-weight:600; font-size:14px; letter-spacing:.02em; color:var(--ink); }
.consent__cat-always{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); }
.consent__cat-desc{ margin:8px 0 0; padding-left:30px; color:var(--ink-mute); font-size:13px; line-height:1.6; }
.consent__cat-row--static + .consent__cat-desc{ padding-left:0; }

@media (max-width:560px){
  .consent__actions{ justify-content:stretch; }
  .consent__cat-desc{ padding-left:0; }
}

/* Footer-Trigger "Cookie-Einstellungen": Optik wie die Rechtslinks der
   Footer-Bottom-Leiste. Ohne JavaScript ausgeblendet (kein toter Knopf),
   da ohne JS nichts Einwilligungspflichtiges laedt. html.js setzt main.js. */
.foot-consent-item{ display:none; }
html.js .foot-consent-item{ display:inline; }
.foot-consent{
  font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  background:none; border:0;
  padding-block:12px; margin-block:-12px;   /* analog .foot-bottom a, Tap-Ziel ca. 41px */
  cursor:pointer;
  transition:color .3s var(--tx);
}
@media (hover:hover) and (pointer:fine){ .foot-consent:hover{ color:var(--gold-l); } }

/* recht.html: Inline-Trigger zum erneuten Oeffnen der Einwilligung.
   Ebenfalls nur mit JavaScript sichtbar (sonst informiert der Satz allein). */
.legal__consent-trigger{ display:none; }
html.js .legal__consent-trigger{
  display:inline;
  font:inherit; color:var(--gold-d);
  background:none; border:0; padding:0;
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}

/* ==================================================================
   SP-01 (CW13-CSP-Vorbereitung, 16.06.2026): die 16 Layout-Inline-Styles
   der 6 Seiten in Komponentenregeln ueberfuehrt. Werte 1:1 wie zuvor
   inline, exakt auf dieselben Elemente gescopt (Geometrie unveraendert,
   per Snapshot vorher/nachher verifiziert). Danach traegt keine Seite mehr
   ein style="..."-Attribut, Voraussetzung fuer die CW13-CSP ohne
   unsafe-inline. Tokens/Interaktionssprache unveraendert.
================================================================== */
/* Section-Headlines: Eyebrow-zu-h2-Abstand (war inline margin-top:18px).
   #cta-title deckt die vier CTA-Band-Headlines (index/leistungen/referenzen/ueber-uns). */
#philo-title,
#partner-title,
#konward-title,
#cta-title{ margin-top:18px; }
#atelier-title{ margin-top:18px; max-width:14ch; text-wrap:balance; }
#partner-title + .lead{ margin-top:24px; }

/* Startseite: Leistungs-Grid und Referenz-Grid, Referenzen: Detail-Grid */
.services__grid{ margin-top:48px; }
.refs__grid{ margin-top:64px; }
.det-grid{ margin-top:8px; }

/* Startseite, grosse Fliesen-Kachel svc__1 und Terrassen-Kachel svc__3 */
.svc__1 h3{ margin:14px 0 14px; }
.svc__1 .svc__lead{ max-width:380px; }
.svc__1 .arrow{ margin-top:18px; }
.svc__3 .arrow{ margin-top:8px; }


/* ===== Seiten-Hero: Bild hinter dem Seitenkopf der Unterseiten (17.06.2026, Wunsch Domme) =====
   Schlanker als der Startseiten-Hero (kein 92vh), damit die Startseite ihren grossen
   Bildmoment behaelt. Renutzt die Hero-Logik: Vollbild-Bild plus heller Verlauf von links,
   Text darueber. Additiv zu .lpage-head/.rpage-head/.apage-head/.kpage-head. recht.html
   bleibt bewusst ohne Bild. Verlauf nutzt den aktuellen Papierton (#f7f3ea), damit der
   Uebergang zum Seitenhintergrund nahtlos ist. */
.page-hero{ position:relative; overflow:hidden; min-height:clamp(340px, 52vh, 560px);
  display:flex; align-items:center; padding-top:clamp(120px, 14vw, 168px); padding-bottom:clamp(40px, 6vw, 72px); }
.page-hero__bg{ position:absolute; inset:0; z-index:-2; }
.page-hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.page-hero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(247,243,234,.96) 0%, rgba(247,243,234,.86) 32%, rgba(247,243,234,.5) 62%, rgba(247,243,234,.16) 100%); }
.page-hero .wrap{ position:relative; z-index:1; width:100%; }
.lpage-head.page-hero .page-hero__bg img{ object-position:center 50%; }
.rpage-head.page-hero .page-hero__bg img{ object-position:center 44%; }
.apage-head.page-hero .page-hero__bg img{ object-position:center 40%; }
.kpage-head.page-hero .page-hero__bg img{ object-position:center 42%; }
@media (max-width:720px){
  .page-hero{ min-height:clamp(300px, 46vh, 440px); }
  .page-hero__bg::after{ background:linear-gradient(155deg, rgba(247,243,234,.97) 0%, rgba(247,243,234,.9) 46%, rgba(247,243,234,.62) 100%); }
}