/* Casa Semplice, erzeugt von _tools/bauen.py aus css/src/*.css. Nicht von Hand aendern.
   Entscheide und Tokens: DESIGN.md im Projektordner. */

/* ===== src/00-basis.css ===== */
/* 00 Basis: Schrift, Tokens, Reset, Typografie, Raster, Wortmarke, Knöpfe.
   Dunkles Negativ der Studio-Seite. Scharfe Kanten, Haarlinien, keine Schatten,
   keine Verläufe auf Flächen, keine Zusatzfarbe. Entscheide: ../../../../DESIGN.md */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0E0E0E;
  --bg-2: #161616;
  --bg-3: #1E1E1E; /* nur Tabellenzeile im Hover und Formularfelder im Fokus */
  --ink: #FFFFFF;
  --ink-dim: #A8A8A8;
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .42);
  --font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 64px;
  /* Raster: 12 Spalten, vertikal im 8-px-Takt */
  --rand: clamp(20px, 5vw, 88px);
  --gap: clamp(16px, 2vw, 32px);
  --wrap: 1680px;
  --kapitel: clamp(120px, 18vh, 240px);
  --takt: 8px;
  /* Schriftskala (R5-B): genau sechs Stufen, alles andere erbt. Ausnahme nur die Wortmarke (.wm, .mark, Slogan). */
  --t-h1: clamp(1.65rem, 1rem + 2.2vw, 3.5rem);          /* H1 aller Seiten, ca. 26 bis 56 px (49 px bei 1512) */
  --t-h2: clamp(1.375rem, .9rem + 1.8vw, 2.6rem);         /* Kapitel, Indexzeilen, Zahlen, ca. 22 bis 42 px */
  --t-h3: clamp(1.15rem, 1.05rem + .5vw, 1.5rem);        /* H3, Lead, Kernsätze, ca. 19 bis 24 px */
  --t-text: clamp(1.0625rem, 1rem + .13vw, 1.125rem);    /* Fliesstext, Formularfelder, 17 bis 18 px */
  --t-klein: clamp(.8125rem, .78rem + .1vw, .875rem);    /* Notizen, Bildunterschriften, Knöpfe, 13 bis 14 px */
  --t-label: clamp(.6875rem, .66rem + .08vw, .75rem);    /* Beschriftungen in Versalien, 11 bis 12 px */
  /* Aliase für ältere Regeln */
  --gutter: var(--rand);
  --sec: var(--kapitel);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-text);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-top: var(--nav-h);
  overflow-x: hidden;
  overflow-x: clip;
}
img, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2 { margin: 0; font-weight: 720; line-height: .95; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; hyphens: manual; }
h3, h4 { margin: 0; font-weight: 640; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; hyphens: manual; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-text); }
.lead, summary { text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }

.skip { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--ink); color: var(--bg); padding: 12px 18px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Raster */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--rand)); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid12 > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .grid12 > .sp-1-5 { grid-column: 1 / 6; }
  .grid12 > .sp-7-12 { grid-column: 7 / 13; }
}
.sec { padding-top: var(--kapitel); padding-bottom: var(--kapitel); }
.sec--tight { padding-top: calc(var(--kapitel) * .5); padding-bottom: calc(var(--kapitel) * .5); }

/* Typografie */
.eyebrow { display: block; font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 1.6em; line-height: 1.4; }
.eyebrow b { font-weight: 640; color: var(--ink); margin-right: .9em; }
/* Grössenklassen: nur Alias auf die Skala (Element h1 gewinnt über .h-l/.h-xl, siehe unten) */
.h-xxl, .h-xl, .h-l { font-size: var(--t-h2); line-height: .98; }
h1.h-xxl, h1.h-xl, h1.h-l { font-size: var(--t-h1); }
.h-m { font-size: var(--t-h3); font-weight: 640; line-height: 1.15; letter-spacing: .01em; }
.lead { font-size: var(--t-h3); line-height: 1.45; font-weight: 380; color: var(--ink); max-width: 46ch; }
.body { color: var(--ink-dim); max-width: 62ch; }
.body strong, .lead strong { color: var(--ink); font-weight: 560; }
.body a, .text-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; background-origin: border-box; transition: background-size .45s var(--ease); }
.body a:hover, .text-link:hover, .body a:focus-visible, .text-link:focus-visible { background-size: 100% 1px; }
.note { font-size: var(--t-klein); color: var(--ink-dim); line-height: 1.6; max-width: 72ch; }
.zahl { font-size: var(--t-h1); font-weight: 200; line-height: .9; font-variant-numeric: tabular-nums; }
.mass { font-size: var(--t-label); font-weight: 480; letter-spacing: .16em; text-transform: uppercase; }

/* Wortmarke CASA | SEMPLICE (ohne Studio-Slogan) */
.wm { display: inline-flex; align-items: baseline; gap: .34em; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1; hyphens: manual; }
.wm .lg-b { font-weight: 800; letter-spacing: .015em; }
.wm .lg-sep { font-weight: 300; letter-spacing: normal; opacity: .45; transform: translateY(-.04em); }   /* wie Studio-Live: Trenner ohne Laufweite, Lücke links und rechts gleich (WP15b, L1) */
.wm .lg-l { font-weight: 300; letter-spacing: .18em; }
.nav .wm { font-size: 15px; }

/* Knöpfe: Fläche steigt beim Hover von unten (scaleY), Rahmen bleibt */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .8em;
  min-height: 56px; padding: 0 2em;
  font: 600 var(--t-klein)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; text-align: center;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink); cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--ease); }
.btn:active, .btn:focus-visible { color: var(--ink); }
.btn:active::before, .btn:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) {
  .btn:hover { color: var(--ink); }
  .btn:hover::before { transform: scaleY(1); }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost::before { display: none; }
@media (hover: hover) { .btn--ghost:hover { border-color: var(--ink); } }
.btn--ghost:active, .btn--ghost:focus-visible { border-color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 1.3em; }
.btn svg { width: 16px; height: 10px; flex: none; transition: transform .6s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 599px) { .btn-row .btn:not(.btn--sm) { width: 100%; } }

/* Gitterkinder dürfen schmaler werden als ihr Inhalt (sonst Überlauf bei 320 px) */
.two > *, .form-grid > *, .sec-head > *, .marc > *, .g-hero-grid > *, .grid12 > * { min-width: 0; }
.note, .body, .lead { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ===== src/10-rahmen.css ===== */
/* 10 Rahmen: Leiste, Menü, Handy-Leiste, Kapitellinie, Fuss, Bewegungszustände (Phase 1),
   Sicherheit für Druck, ohne JS und bei hängenden Einblendungen. */

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav-in { height: 100%; display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); }
.nav .wm { margin-right: auto; }
.nav-links { display: none; align-items: center; gap: clamp(16px, 1.9vw, 30px); }
.nav-links a { position: relative; font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); padding: 8px 0; transition: color .4s var(--ease); white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right center; transition: transform .7s var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.nav-cta { display: none; }
.burger { width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; display: grid; place-content: center; gap: 6px; padding: 0; }
.burger span { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Schmale Handys (360 px): engerer Abstand, damit der Menüknopf nicht über den Rand ragt (WP14) */
@media (max-width: 399px) { .nav-in { gap: 8px; } }
/* Unter 360 px passt der Wechselschalter nicht neben die Wortmarke; er steht im Fuss */
@media (max-width: 359px) { .nav .ws { display: none; } }
@media (min-width: 1180px) {
  .nav-links, .nav-cta { display: flex; }
  .burger { display: inline-flex; }
}
.menu { position: fixed; inset: var(--nav-h) 0 0 0; background: var(--bg); z-index: 99; display: block; overflow-y: auto; padding: 28px var(--rand) 120px; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease), visibility 0s linear .9s; }
.menu.open { visibility: visible; clip-path: inset(0); transition: clip-path .9s var(--ease), visibility 0s; }
.menu .menu-link, .menu .btn { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s var(--ease), transform .5s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }
.menu.open .menu-link, .menu.open .btn { opacity: 1; transform: none; transition-duration: .9s, 1.1s, .45s, .45s; transition-delay: calc(var(--i, 0) * 60ms + 220ms), calc(var(--i, 0) * 60ms + 220ms), 0s, 0s; }
.menu > :nth-child(2) { --i: 1; } .menu > :nth-child(3) { --i: 2; } .menu > :nth-child(4) { --i: 3; } .menu > :nth-child(5) { --i: 4; } .menu > :nth-child(6) { --i: 5; } .menu > :nth-child(7) { --i: 6; }
.menu a.menu-link { display: block; font-size: var(--t-h2); font-weight: 640; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line); }
.menu .btn { margin-top: 32px; width: 100%; }


/* Handy-Leiste: die ganze Leiste ist der Knopf (56 px, Daumenzone). Sie erscheint
   nach dem Hero und geht weg, sobald Schluss-Aufruf oder Formular im Bild sind.
   Unsichtbar bedeutet auch nicht fokussierbar (visibility). Ohne JS immer da. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: .8em;
  height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--ink); color: var(--bg); border-top: 1px solid var(--ink);
  font: 600 var(--t-klein)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  visibility: hidden; transform: translateY(100%);
  transition: transform .8s var(--ease), visibility 0s linear .8s;
}
.sticky-cta.show, html:not(.js) .sticky-cta { visibility: visible; transform: none; transition: transform .8s var(--ease), visibility 0s; }
.sticky-cta svg { width: 16px; height: 10px; flex: none; }
.sticky-cta:active { background: var(--bg); color: var(--ink); }
.sticky-cta:focus-visible { outline: 2px solid var(--bg); outline-offset: -6px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body.has-sticky { padding-bottom: 0; }

/* Kapitellinie: jedes Kapitel beginnt mit einer Haarlinie, die Nummer sitzt am linken Rand.
   Die Nummer kommt aus data-kap (bauen.py zählt die Kapitel einer Seite). */
.sec { position: relative; }
.sec--line, .cta-end { border-top: 1px solid var(--line); }
.sec[data-kap]::after {
  content: attr(data-kap); position: absolute; top: 0; left: max(var(--rand), calc((100% - var(--wrap)) / 2));
  transform: translateY(-50%); padding-right: 14px; background: var(--bg);
  font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; line-height: 1; color: var(--ink-dim); pointer-events: none;
}
/* Kopfbereiche tragen keine eigene Unterkante, die Kapitellinie des nächsten Kapitels genügt */
.hero, .g-hero, .page-head { border-bottom: 0; }

/* Fuss */
.footer { border-top: 1px solid var(--line); padding: clamp(56px, 9vh, 110px) 0 40px; }
.footer .wm { font-size: clamp(1.5rem, 4.2vw, 2.8rem); }
.footer-grid { display: grid; gap: 44px; margin-top: clamp(40px, 7vh, 72px); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; } }
.footer .fh { text-transform: uppercase; font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; color: var(--ink-dim); margin-bottom: 1.2em; }
.footer li { margin-bottom: .55em; }
.footer a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); font-size: var(--t-text); }
.footer a:hover { border-color: var(--ink); }
.footer address { font-style: normal; color: var(--ink-dim); font-size: var(--t-text); line-height: 1.65; }
.footer .note { margin-bottom: .8em; }
.footer-bottom { margin-top: clamp(44px, 7vh, 80px); padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; font-size: var(--t-klein); color: var(--ink-dim); }
.footer-bottom a { font-size: var(--t-klein); }
body.has-sticky .footer { padding-bottom: calc(56px + 40px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body.has-sticky .footer { padding-bottom: 40px; } }

/* Bewegung (Phase 1, Stand 1.10.2026), Regeln unverändert übernommen ─────────
   Ausgangszustände gelten NUR unter html.mo (gesetzt vom Kopf-Skript, wenn die
   Bewegung nicht reduziert ist). Fällt das Skript aus, nimmt der Failsafe .mo nach
   4 s weg und alles ist sichtbar. Fertige Elemente tragen .rv-done und sind dann
   unabhängig vom Skript sichtbar. Animiert werden nur transform, opacity, clip-path. */

/* Lenis */
html.lenis, html.lenis body { height: auto; }
/* Mit Bewegung scrollt das Skript selbst weich. Ein natives scroll-behavior: smooth würde das Zurücksetzen von
   ScrollTrigger beim Neumessen (refresh) verzögern und den Pin falsch berechnen (Start um den Scrollstand verschoben). */
html.mo { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Standard: Fliesstext, Eyebrows, Knoepfe, Listen, Karten (24 px Weg) */
.mo .rv:not(.rv-done) { opacity: 0; transform: translate3d(0, 24px, 0); }
/* Ueberschriften und Satzzeilen: steigen aus Masken (Zeilen per Skript) */
.mo :is(h1, h2, .rv-lines).rv:not(.rv-done) { opacity: 1; transform: none; }
.mo :is(h1, h2, .rv-lines).rv:not(.sp) { visibility: hidden; }
.ln { display: block; overflow: hidden; padding: .14em 0 .1em; margin: -.14em 0 -.1em; }
.ln.ln-done { overflow: visible; }
.ln-i { display: block; }
/* Regler: Bild oeffnet per Vorhang von unten, Legende blendet nach */
.mo .ba-fig.rv:not(.rv-done) { opacity: 1; transform: none; }
.mo .ba-fig.rv:not(.rv-done) .ba { clip-path: inset(100% 0 0 0); }
.mo .ba-fig.rv:not(.rv-done) .ba-cap { opacity: 0; transform: translate3d(0, 16px, 0); }
/* Karten: Karte blendet ein, Bild oeffnet per Vorhang */
.mo .card.rv:not(.rv-done) .card-img { clip-path: inset(100% 0 0 0); }
/* Marc: Portrait per Vorhang, Text blendet ein */
.mo .marc.rv:not(.rv-done) { opacity: 1; transform: none; }
.mo .marc.rv:not(.rv-done) .marc-fig { clip-path: inset(100% 0 0 0); }
.mo .marc.rv:not(.rv-done) > div { opacity: 0; transform: translate3d(0, 24px, 0); }
/* Listen mit Linien: Zeilen gestaffelt */
.mo .list-ruled.rv:not(.rv-done) { opacity: 1; transform: none; }
.mo .list-ruled.rv:not(.rv-done) li { opacity: 0; transform: translate3d(0, 16px, 0); }
/* Abschnittslinien zeichnen sich */
.mo .sec--line, .mo .cta-end { position: relative; border-top-color: transparent; }
.mo .sec--line::before, .mo .cta-end::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease); pointer-events: none; }
.mo .sec--line.ln-in::before, .mo .cta-end.ln-in::before { transform: scaleX(1); }
/* Sicherheit 1: hängt eine Einblendung (schnelles Scrollen, Sprung, Skriptfehler), setzt das
   Kopf-Skript (bauen.py, MOTION_BOOT) spätestens 2.5 s nach der letzten Bewegung und bei
   pageshow die Klasse rv-force auf jedes noch versteckte Element im oder über dem Bild.
   Die Regeln stehen mit !important über allen Inline-Werten von GSAP. */
.rv-force,
.rv-force .ba, .rv-force .ba-cap, .rv-force .card-img, .rv-force .marc-fig, .rv-force.marc > div,
.rv-force .ln-i, .rv-force li, .rv-force .prices-note {
  opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important;
}

/* Sicherheit 2: reduzierte Bewegung. Das Kopf-Skript setzt .mo dann gar nicht erst;
   hier stehen nur die Übergänge. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}

/* Sicherheit 3: Druck. Dunkel auf Hell, jeder Text sichtbar, Bedienelemente weg. */
@media print {
  :root { --bg: #fff; --bg-2: #f2f2f2; --bg-3: #e8e8e8; --ink: #000; --ink-dim: #444; --line: rgba(0, 0, 0, .22); --line-strong: rgba(0, 0, 0, .55); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  img, figure, .ba, .zch { break-inside: avoid; }   /* Bilder nicht über Seitengrenzen schneiden (WP14, L3) */
  body { padding-top: 0; overflow: visible; }
  .nav, .menu, .burger, .sticky-cta, .skip, .ws { display: none !important; }
  body.has-sticky .footer { padding-bottom: 40px; }
  .hero { display: block; min-height: 0; }
  .mo .rv, .mo .rv .ba, .mo .rv .ba-cap, .mo .rv .card-img, .mo .rv .marc-fig, .mo .marc.rv > div,
  .mo .ln-i, .mo .rv li, .mo .prices-note {
    opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important;
  }
  .mo .sec--line, .mo .cta-end { border-top-color: var(--line); }
  .mo .sec--line::before, .mo .cta-end::before { display: none; }
  .ln { overflow: visible; }
  .sec { padding-top: 48px; padding-bottom: 48px; break-inside: auto; }
  .ba-fig, .card, .sign { break-inside: avoid; }
}

/* ===== src/40-start.css ===== */
/* V2: Startseite und gemeinsame Komponenten. */
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 7vh, 80px); }
.sec-head .body, .sec-head .lead { margin: 0; }
@media (min-width: 900px) { .sec-head--split { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 64px; } }

/* Karten (nur GVS-Seite) */
.cards { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; display: block; text-decoration: none; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s; }
.card:hover { border-color: var(--line-strong); }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.card-img picture { display: block; height: 100%; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
.card-txt { padding: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; }
.card-txt .no { font-size: var(--t-label); letter-spacing: .22em; color: var(--ink-dim); font-weight: 520; }
.card-txt h3 { font-size: var(--t-h3); }
.card-txt p { margin: 0; color: var(--ink-dim); font-size: var(--t-text); max-width: 46ch; }

/* Vorher-Nachher-Regler: Basis (Gewerkseiten, Projekte, GVS, Referenzkapitel). Einheitliche Komponente für alle Unterseiten. */
.ba-grid { display: grid; gap: clamp(30px, 4vw, 56px) clamp(18px, 2vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-fig { margin: 0; }
.ba { --pos: 50%; position: relative; aspect-ratio: var(--ar, 3 / 2); overflow: hidden; background: var(--bg-2); user-select: none; -webkit-user-select: none; border: 1px solid var(--line); }
.ba picture, .ba img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba img { object-fit: cover; pointer-events: none; }
.ba-vor { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 1px; margin-left: -.5px; background: var(--ink); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--ink); color: var(--bg); display: grid; place-content: center; pointer-events: none; }
.ba-knob svg { width: 24px; height: 13px; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.ba:has(.ba-range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.ba-tag { position: absolute; top: 14px; z-index: 2; background: var(--ink); color: var(--bg); font-size: var(--t-label); line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: .85em 1.1em; pointer-events: none; }
.ba-tag--l { left: 14px; }
.ba-tag--r { right: 14px; }
.ba-cap { margin-top: 16px; display: grid; gap: 4px; }
.ba-cap b { font-size: var(--t-klein); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.ba-cap span { font-size: var(--t-text); color: var(--ink-dim); line-height: 1.55; max-width: 62ch; }
.ba-hint { margin-top: clamp(28px, 4vh, 44px); }

/* ── Kapitel 5: Ablauf als Zeitachse (eine Linie, drei Punkte) ── */
.zeit { --z: 1; position: relative; margin-top: clamp(40px, 7vh, 80px); }
.zeit-linie { position: absolute; background: var(--ink); left: 5px; top: 6px; bottom: 6px; width: 1px; transform: scaleY(var(--z)); transform-origin: center top; pointer-events: none; }
.zeit-liste { display: grid; gap: 40px; list-style: none; margin: 0; padding: 0; }
.zeit-item { position: relative; padding-left: 44px; }
.zeit-pt { position: absolute; left: 0; top: 4px; width: 11px; height: 11px; background: var(--ink); }
.zeit-item h3 { font-size: var(--t-h3); margin-bottom: 10px; }
.zeit-item p { margin: 0; color: var(--ink-dim); max-width: 40ch; }
@media (min-width: 900px) {
  .zeit-linie { left: 0; right: 0; top: 5px; bottom: auto; width: auto; height: 1px; transform: scaleX(var(--z)); transform-origin: left center; }
  .zeit-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .zeit-item { padding-left: 0; padding-top: 44px; }
  .zeit-pt { top: 0; }
}
.ablauf-titel { margin-bottom: 0; }

/* ── Kapitel 6: Richtpreise als Designstück ── */
/* Linien und Text beginnen auf der Rasterkante (WP15b): kein Einzug, keine negativen Ränder */
.prl { container-type: inline-size; --pad: 0px; }
.prl-liste { margin: 0; }
.prl-zeile { position: relative; }
.prl-zeile::before, .prl-zeile:last-child::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(var(--ln, 1)); transform-origin: left center; pointer-events: none; }
.prl-zeile::before { top: 0; }
.prl-zeile:first-child::before { background: var(--line-strong); }
.prl-zeile:last-child::after { bottom: 0; }
.prl-link { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; padding: clamp(16px, 1.8vw, 24px) var(--pad); color: var(--ink); text-decoration: none; transition: background-color .35s var(--ease); }
.prl-link:focus-visible { background: var(--bg-3); outline-offset: -3px; }
.prl-arbeit { display: grid; gap: 4px; align-content: end; }
.prl-name { font-size: var(--t-h3); line-height: 1.25; }
.prl-label { font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); }
.prl-spanne { display: grid; gap: 4px; justify-items: start; }
.prl-zahl { font-size: var(--t-h2); font-weight: 200; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prl-einheit { font-size: var(--t-label); font-weight: 520; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.prl-cta { display: none; align-items: center; gap: .8em; font-size: var(--t-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transition: opacity .35s var(--ease); white-space: nowrap; }
.prl-cta svg { width: 16px; height: 10px; flex: none; }
.prices-note { margin-top: 1.6em; }
@container (min-width: 440px) {
  .prl-link { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
  .prl-spanne { justify-items: end; text-align: right; }
  .prl-zahl { font-size: var(--t-h2); }
}
@container (min-width: 760px) {
  .prl-link { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .prl-cta { display: inline-flex; }
  .prl-zahl { font-size: var(--t-h2); }
}
@media (hover: hover) {
  .prl-link:hover .prl-cta { opacity: 1; }
}
.prl-link:focus-visible .prl-cta { opacity: 1; }

/* Kompakter Ansprechpartner (Seitenleiste von Anfrage und Gewerkseiten) */
.marc { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.marc-role { margin: 14px 0 26px; }
.marc a.mail { font-size: var(--t-h3); font-weight: 500; overflow-wrap: anywhere; }
/* Ansprechperson: Porträt 4:5 in voller Spaltenbreite (höchstens 400 px), Name, Rolle und Mail direkt darunter.
   Quelle marc-1280.webp (1280 px breit), wird nie über 1280 px hinaus vergrössert. */
.marc--kompakt { grid-template-columns: 1fr; gap: 20px; align-items: start; }
.marc--kompakt .marc-fig { margin: 0; width: 100%; max-width: 400px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); }
.marc--kompakt .marc-fig picture { display: block; width: 100%; height: 100%; }
.marc--kompakt .marc-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.marc--kompakt .h-m { font-size: var(--t-h3); }
.marc--kompakt .marc-role { margin: 6px 0 14px; font-size: var(--t-klein); letter-spacing: .04em; text-transform: none; color: var(--ink-dim); }
.marc--kompakt a.mail { font-size: var(--t-klein); overflow-wrap: anywhere; }
/* breite Kästen (Ratgeber-Schluss, GVS): Porträt links neben dem Text */
@media (min-width: 700px) {
  .rg-kasten .marc--kompakt { grid-template-columns: minmax(180px, 260px) 1fr; gap: clamp(24px, 3vw, 40px); align-items: center; }
  .rg-kasten .marc--kompakt .marc-fig { max-width: none; }
}
.gvs-marc .marc--kompakt .marc-fig { max-width: 320px; }
.kontakt-neutral .body { margin: 0 0 14px; }
.kontakt-neutral a.mail { font-size: var(--t-klein); overflow-wrap: anywhere; }

/* FAQ */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 1.4em 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 0 1.6em; color: var(--ink-dim); max-width: 66ch; }
.faq .ans p:last-child { margin-bottom: 0; }

/* Schluss-Aufruf der Unterseiten (Projekte, Ratgeber) */
.cta-end { text-align: left; }
.cta-end h2 { max-width: 14ch; margin-bottom: clamp(24px, 4vh, 44px); }
.cta-end .lead { margin-bottom: 36px; }
/* Studio-Index gespiegelt. Die Menüzeilen sind auf allen Seiten dieselbe Komponente. */
html[data-seite="index"] body { padding-top: 0; }
.topbar { position:absolute; inset:0 0 auto; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:clamp(18px,3vh,30px) var(--rand); font-size: var(--t-label); font-weight:480; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
/* Wie studiosemplice.ch: Leiste über die volle Breite, Seitenrand 4vw (20 bis 64 px), Schalter ganz links am Rand, Rechtsblock ganz rechts */
.topbar.wrap { max-width:none; padding-left:clamp(20px,4vw,64px); padding-right:clamp(20px,4vw,64px); }
.topbar-right { display:flex; align-items:center; gap:26px; }
.topbar a { text-decoration:none; }
.topbar-right a { color:var(--ink); border-bottom:1px solid var(--line-strong); padding:10px 0; }
.start-hero { height:62svh; min-height:420px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:36px; padding:80px var(--rand) 52px; position:relative; }
.mark { display:inline-flex; align-items:baseline; margin:0; font-size:clamp(1.8rem,7vw,7.5rem); white-space:nowrap; line-height:1; }
.mark .lg-b { font-weight:800; letter-spacing:.015em; overflow:hidden; }
.mark .lg-sep { font-weight:300; opacity:.45; margin:0 .34em; }
.lg-l-col,.wm-semplice { display:inline-flex; flex-direction:column; align-items:flex-start; }
.mark .lg-l { font-weight:300; letter-spacing:.18em; overflow:hidden; }
.mark .ch { display:inline-block; }
.mark .lg-l .ch:last-child { letter-spacing:0; }
.mark-motto,.wm-motto { font-size:10px; font-weight:400; line-height:1.2; color:var(--ink-dim); text-transform:uppercase; white-space:nowrap; letter-spacing:0; margin-top:12px; }
.wm-motto { margin-top:6px; font-size:10px; }
.footer .wm-motto { font-size:11px; margin-top:10px; }
.hero-cue { position:absolute; bottom:18px; font-size: var(--t-label); letter-spacing:.22em; color:var(--ink-dim); text-transform:uppercase; text-decoration:none; display:flex; align-items:center; gap:12px; }
.hero-cue i { width:1px; height:22px; background:var(--line-strong); }
.index-head { display:flex; justify-content:space-between; gap:20px; padding:20px var(--rand); font-size: var(--t-label); font-weight:480; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); }
.index-menu { border-top:1px solid var(--line); }
.menu-row { position:relative; overflow:hidden; display:grid; grid-template-columns:72px minmax(0,1fr) auto auto; align-items:baseline; gap:clamp(14px,2.5vw,40px); padding:clamp(18px,3vh,28px) var(--rand); border-bottom:1px solid var(--line); text-decoration:none; }
.menu-row::before { content:""; position:absolute; inset:0; background:var(--ink); transform:scaleY(0); transform-origin:bottom; transition:transform .55s var(--ease); }
.menu-row>* { position:relative; z-index:1; transition:color .45s var(--ease),transform .45s var(--ease),opacity .45s var(--ease); }
.menu-row:hover::before,.menu-row:focus-visible::before { transform:scaleY(1); }
.menu-row:hover>*,.menu-row:focus-visible>* { color:var(--bg); }
.menu-row:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; }
.m-num { font-size: var(--t-label); font-weight:480; letter-spacing:.24em; color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.m-label { font-size: var(--t-h2); font-weight:520; font-stretch:116%; text-transform:uppercase; letter-spacing:.015em; line-height:1.08; }
.menu-row:hover .m-label,.menu-row:focus-visible .m-label { transform:translateX(.3em); }
.m-desc { font-size: var(--t-klein); color:var(--ink-dim); font-weight:340; text-align:right; }
.m-arrow { font-size: var(--t-text); font-weight:300; opacity:.4; }
.menu-row:hover .m-arrow,.menu-row:focus-visible .m-arrow { opacity:1; }
.menu-row--klein .m-label { font-size: var(--t-h3); }
.menu-row--klein { padding-top:18px; padding-bottom:18px; }
.start-seo { max-width:62ch; padding:clamp(48px,8vh,88px) 0; margin:0 auto; font-size: var(--t-text); color:var(--ink-dim); }
.botbar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px 28px; padding:32px var(--rand) 24px; border-top:1px solid var(--line); font-size: var(--t-klein); color:var(--ink-dim); }
.botbar .b-group { display:flex; flex-wrap:wrap; gap:18px; }
.botbar a { text-decoration:none; border-bottom:1px solid var(--line); }
.bildhinweis { font-size: var(--t-klein); line-height:1.65; color:var(--ink-dim); max-width:92ch; padding-top:24px; margin-top:24px; border-top:1px solid var(--line); }
.botbar .bildhinweis { flex-basis:100%; margin-top:8px; }
.menu .menu-row { padding-left:0; padding-right:0; }
.burger { width:auto; min-width:44px; margin:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); font: 500 var(--t-label)/1 var(--font); letter-spacing:.12em; text-transform:uppercase; }
@media(max-width:860px) {
 .start-hero { height:56svh; }
 .mark { font-size:clamp(1.5rem,7vw,2.6rem); }
 .topbar-right>span { display:none; }
 .menu-row { grid-template-columns:40px minmax(0,1fr) 20px; gap:8px 12px; }
 .m-label { font-size: var(--t-h3); overflow-wrap:anywhere; }
 .m-desc { grid-column:2; grid-row:2; text-align:left; font-size: var(--t-label); }
 .m-arrow { grid-column:3; grid-row:1; }
 .index-head { font-size: var(--t-label); letter-spacing:.1em; }
 .start-seo { margin:0; } /* Review V2: .wrap polstert schon mit --rand; Aussenrand dazu gab 20 px Querscroll bei 360/390 */
 .nav-cta { display:none; }
}
@media(max-width:359px) { .nav .wm { font-size: var(--t-klein); } .burger { font-size: var(--t-label); letter-spacing:.08em; } }
/* Generator-V2: derselbe Index läuft im Menü und am Seitenrand. */
.topbar-rechts { display:flex; align-items:center; gap:26px; }
.topbar-rechts a { color:var(--ink); border-bottom:1px solid var(--line-strong); padding:10px 0; }
.start-hero>.wrap { text-align:center; display:flex; flex-direction:column; align-items:center; gap:30px; }
.start-index.wrap { width:100%; max-width:none; padding-left:0; padding-right:0; }
.index-head h2 { margin:0; font:inherit; letter-spacing:inherit; color:inherit; }
.start-hinweis { font-size: var(--t-label); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim); text-decoration:none; }
.botbar nav { display:flex; flex-wrap:wrap; gap:12px 20px; }
.mo .ba-fig.rv:not(.rv-done) .ba { clip-path:none; }
@media(max-width:860px) { .topbar-rechts>span { display:none; } }
.m-arrow svg { display:block; width:18px; height:12px; }
.start-hinweis::after { content:""; display:block; width:1px; height:24px; margin:10px auto 0; background:var(--line-strong); }

@media(min-width:861px) { .nav-cta { display:inline-flex; } }

/* ===== src/42-baustelle.css ===== */
/* R6: «Eine Baustelle in zwölf Sekunden». Schnitt durch einen Raum als Strichzeichnung unter der Wortmarke.
   Das Markup ist der fertige Raum. Ohne Skript, bei reduzierter Bewegung und im Druck bleibt er so stehen,
   die acht Namen stehen dann als Liste darunter. Linien 1 px (--u = viewBox-Einheiten je Bildschirm-Pixel, setzt casa-baustelle.js bei Grössenänderung; vector-effect: non-scaling-stroke bricht in Chrome die Strichanimation mit pathLength), Farben nur --ink und --ink-dim. */
.start-hero { height: auto; min-height: max(420px, 62svh); }
@media (max-width: 860px) { .start-hero { height: auto; min-height: 56svh; } }
.start-kopf { display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 4vh, 40px); width: max-content; max-width: 100%; min-width: min(100%, 21rem); }
.bs { --u: 1; margin: 0; width: min(100%, 46rem, 82svh); contain: inline-size; text-align: center; }
.bs-box { position: relative; aspect-ratio: 640 / 300; }
.bs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; color: var(--ink); }
.bs-svg path, .bs-svg circle { fill: none; stroke: var(--ink); stroke-width: var(--u, 1); stroke-linejoin: miter; stroke-linecap: butt; }
.bs-svg .d { stroke: var(--ink-dim); }
.bs-svg .f { fill: var(--bg); }
.bs-svg .ns { stroke: none; }
.bs-svg .bs-sc { fill: url(#bs-sch); stroke: none; }
.bs-svg .bs-h { stroke: var(--ink-dim); opacity: .55; stroke-width: var(--u, 1); }
@media (max-width: 860px) { .bs { --u: 1.4; } }
@media (max-width: 520px) { .bs { --u: 1.8; } }
.bs-svg .dr { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.bs-svg .bs-ml { opacity: .3; }
.bs-svg [data-bs="werkzeug"], .bs-svg [data-bs="funken"] { visibility: hidden; }

/* Beschriftung: Name des Gewerks (Maske) und Fortschritt mit acht Marken. Gleiche Box wie die Liste, kein Sprung. */
.bs-cap { position: relative; margin-top: 14px; }
.bs-lauf { display: none; }
.bs-name { position: relative; height: 1.4rem; margin: 0; overflow: hidden; font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); line-height: 1.4rem; }
.bs-n { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }
.bs-n b, .bs-liste b { font-weight: 520; color: var(--ink-dim); margin-right: .9em; font-variant-numeric: tabular-nums; }
.bs-prog { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 16px; }
.bs-s { display: block; position: relative; height: 1px; background: var(--line); overflow: hidden; }
.bs-s u { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.bs-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 12px; align-content: start; font-size: var(--t-label); font-weight: 520; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-align: left; }
@media (max-width: 520px) { .bs-liste { grid-template-columns: repeat(2, 1fr); gap: 4px 12px; font-size: .625rem; letter-spacing: .1em; } }

@media (prefers-reduced-motion: no-preference) {
  .bs-cap { height: 3.2rem; }
  .bs-lauf { display: block; }
  .bs-liste { position: absolute; width: 1px; height: 1px; inset: auto; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bs:not(.bs-bereit) .bs-svg { opacity: 0; animation: bs-sicher 1ms linear 3.5s forwards; }
  .bs-svg { transition: opacity .9s var(--ease); }
}
@keyframes bs-sicher { to { opacity: 1; } }
@media print {
  .bs-svg { opacity: 1 !important; animation: none !important; }
  .bs-lauf { display: none !important; }
  .bs-cap { height: auto !important; }
  .bs-liste { position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important; white-space: normal !important; }
}

/* Review Opus: Wortmarke braucht Abstand zur oberen Leiste */
@media (min-width: 861px) { .start-hero { padding-top: clamp(120px, 16vh, 180px); } }

/* ===== src/45-showpiece.css ===== */
/* R5-D: Showpieces (Startseite «Ein Raum, vier Arbeitsschritte», Projekte-Galerie), Seitenwechsel.
   Ohne Skript und bei reduzierter Bewegung gilt der statische Stand: Regler bei 50 %, Etiketten als Liste, vertikale Projektliste.
   Nur transform, opacity, clip-path. Schrift nur ueber --t-*. */

/* ── Startseite ── */
.sp5 { position: relative; background: var(--bg); }
.sp5-bild { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; max-height: 72svh; background: var(--bg-2); }
.sp5-v, .sp5-nach { position: absolute; inset: 0; }
.sp5 picture, .sp5 img { display: block; width: 100%; height: 100%; }
.sp5 img { object-fit: cover; }
.sp5-nach { clip-path: inset(0 50% 0 0); }
.sp5-linie { position: absolute; inset: 0; border-right: 1px solid var(--ink); transform: translate3d(-50%, 0, 0); pointer-events: none; }
.sp5-plakette { top: auto; bottom: 14px; z-index: 3; }
.sp5-leiste { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) auto; gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding-top: clamp(20px, 3.5svh, 36px); padding-bottom: clamp(20px, 3.5svh, 36px); }
.sp5-titel { display: grid; margin: 0; font-size: var(--t-h1); font-weight: 500; line-height: 1.06; letter-spacing: .01em; text-transform: uppercase; }
.sp5-t1, .sp5-t2 { grid-area: 1 / 1; display: block; }
.sp5-t2 { display: none; }
.sp5 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.sp5 .ln-i { display: block; }
.sp5-on .sp5-t2 { display: block; }
.sp5-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.sp5-s { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.sp5-s::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.sp5-f { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.sp5-n { font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; color: var(--ink-dim); }
.sp5-l { font-size: var(--t-klein); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.sp5-knopf { justify-self: end; white-space: nowrap; }
@media (min-width: 768px) {
  .sp5-on .sp5-pin { height: 100svh; padding-top: var(--nav-h); display: flex; flex-direction: column; box-sizing: border-box; }
  .sp5-on .sp5-bild { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
  .sp5-on .sp5-leiste { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
}
@media (max-width: 1023px) and (min-width: 768px) { .sp5-leiste { grid-template-columns: minmax(0, 1fr) auto; } .sp5-schritte { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 767px) {
  .sp5-bild { aspect-ratio: auto; height: min(125vw, 50svh); max-height: none; }
  .sp5-leiste { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 14px; padding-bottom: 16px; }
  .sp5-titel { font-size: var(--t-h2); }
  .sp5-schritte { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sp5-s { flex-direction: row; align-items: baseline; gap: 14px; padding: 7px 0; }
  .sp5-knopf { justify-self: stretch; min-height: 48px; }
  .sp5-on { min-height: calc(220svh); } /* Sticky haelt nur im Inhaltsbereich des Elternelements: Scrollweg = Hoehe minus Buehne */
  .sp5-on .sp5-pin { position: sticky; top: 12px; background: var(--bg); }
}
@media print { .sp5-on .sp5-pin { height: auto !important; } .sp5-knopf { opacity: 1 !important; visibility: visible !important; } }

/* ── Projekte: horizontale Galerie (nur mit Skript, ab 1024 px, ohne reduzierte Bewegung) ── */
.gal-prog { display: none; }
@media (min-width: 1024px) {
  .gal-on .gal { --bw: min(50vw, calc((100svh - 300px) * 1.5)); position: relative; height: 100svh; overflow: hidden; background: var(--bg); }
  .gal-on .gal-prog { display: flex; align-items: center; gap: 20px; position: absolute; z-index: 3; top: calc(var(--nav-h) + 20px); left: var(--rand); right: var(--rand); }
  .gal-z { font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; line-height: 1; }
  .gal-bahn { position: relative; flex: 1; height: 1px; background: var(--line); }
  .gal-l { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
  .gal-on .gal-track { display: flex; height: 100%; width: max-content; padding-left: var(--rand); }
  .gal-on .pr { flex: 0 0 auto; height: 100%; margin: 0; padding: calc(var(--nav-h) + 64px) clamp(56px, 7vw, 140px) 40px 0; display: flex; align-items: center; box-sizing: border-box; }
  .gal-on .pr > .wrap { display: grid; grid-template-columns: var(--bw) clamp(260px, 24vw, 400px); grid-template-rows: auto auto 1fr auto; column-gap: clamp(32px, 4vw, 72px); width: auto; max-width: none; margin: 0; padding: 0; align-content: center; }
  .gal-on .pr-kopf { grid-column: 2; grid-row: 1; margin: 0 0 12px; }
  .gal-on .pr-kopf { display: block; }
  .gal-on .pr-kopf h2 { font-size: var(--t-h1); line-height: 1.05; margin: 0 0 10px; }
  .gal-on .pr-kopf .lead { margin: 0; }
  .gal-on .pr--paar .rk-bild:first-child { position: relative; z-index: 0; }
  .gal-on .pr > .wrap > .note { grid-column: 2; grid-row: 2; margin: 0; }
  .gal-on .pr-bilder { display: contents; }
  .gal-on .pr-bilder .rk-bild:first-child { grid-column: 1; grid-row: 1 / 5; align-self: start; }
  .gal-on .pr-bilder .rk-bild:nth-child(2) { grid-column: 2; grid-row: 4; align-self: end; }
  .gal-on .g-zeigen-foto { overflow: hidden; }
  .gal-on .pr--paar .pr-bilder .rk-bild:nth-child(2) { grid-column: 1; grid-row: 1 / 5; align-self: start; position: relative; z-index: 1; }
  .gal-on .pr--paar .rk-bild:first-child figcaption { visibility: hidden; }
  .gal-on .pr--paar .rk-bild:nth-child(2) .g-zeigen-foto { clip-path: inset(0 calc((100 - var(--p, 0)) * 1%) 0 0); }
  .gal-on .pr--paar .rk-bild:nth-child(2) .ba-tag { left: auto; right: 14px; }
  .gal-on .pr--paar .rk-bild:nth-child(2)::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 3 / 2; border-right: 1px solid var(--ink); transform: translate3d(calc((var(--p, 0) - 100) * 1%), 0, 0); pointer-events: none; }
}

/* Druck: Galerie und Showpiece als normale Liste, nichts verborgen */
@media print {
  .pin-spacer { height: auto !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  .gal-on .gal, .sp5-on { position: static !important; height: auto !important; min-height: 0 !important; overflow: visible !important; width: auto !important; transform: none !important; inset: auto !important; }
  .gal-on .gal-track { display: block; width: auto; transform: none !important; padding: 0; }
  .gal-on .gal-prog { display: none !important; }
  .gal-on .pr { height: auto; padding: 24px 0; display: block; }
  .gal-on .pr > .wrap { display: block; }
  .gal-on .pr-bilder { display: grid; }
  .gal-on .pr-kopf, .gal-on .pr > .wrap > .note { opacity: 1 !important; transform: none !important; }
  .gal-on .pr--paar .rk-bild:nth-child(2) .g-zeigen-foto { clip-path: none; }
  .gal-on .pr--paar .rk-bild:nth-child(2)::after { display: none; }
  .gal-on .pr--paar .rk-bild:first-child figcaption { visibility: visible; }
  .sp5-nach { clip-path: inset(0 50% 0 0) !important; }
  .sp5-t1 .ln-i { transform: none !important; } .sp5-t2 { display: none !important; }
  .sp5-s { opacity: 1 !important; }
}

/* ── Seitenwechsel: kurzes Abblenden (Browser ohne Unterstuetzung: nichts) ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(root) { animation-duration: .25s; }
}

/* R5 Review: keine Trennung mitten im Wort in der Galerie (Lead war «Malerarbeit / en») */
.gal-on .pr-kopf .lead { overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 12ch; }
.gal-on .pr-kopf { min-width: 0; }

/* ===== src/50-gewerk.css ===== */
/* V2 Leistungsseiten: Kopf mit einem Schieber, Zeichen, Leistungsumfang,
   echte Ergebnisbilder und Reels, Preise, Ablauf und Anfrage.
   Der erste Bildschirm steht ohne Intro sofort vollständig da. */

/* ── Kopf ── */
.g-hero { padding-top: clamp(16px, 3vh, 44px); padding-bottom: clamp(40px, 6vh, 72px); }
.g-kopf { display: grid; gap: clamp(22px, 3.5vh, 36px) clamp(32px, 5vw, 80px); align-items: start; }
.g-text { min-width: 0; }
.g-hero .crumbs { margin-bottom: clamp(14px, 2.4vh, 28px); }
.g-hero h1 { line-height: .98; overflow-wrap: break-word; hyphens: manual; margin-bottom: clamp(16px, 2.6vh, 26px); }
.g-hero .lead { margin: 0 0 clamp(20px, 3vh, 30px); }
.g-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.g-preislink { font-size: var(--t-klein); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6; }
@media (max-width: 599px) {
  .g-aktion .btn { width: 100%; white-space: normal; padding: 14px .8em; line-height: 1.4; gap: .6em; letter-spacing: .08em; font-size: var(--t-klein); }   /* Runde 4: einzeilig bei 360 px */
  .g-preislink { margin-top: 2px; }
}
.g-bild { margin: 0; min-width: 0; display: grid; gap: 12px; align-content: start; }
.g-foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.g-foto picture, .g-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-foto img { object-fit: cover; }
.g-bild .ba { width: 100%; }
.g-cap { margin: 0; font-size: var(--t-klein); line-height: 1.55; max-width: 62ch; }
@media (min-width: 900px) {
  .g-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .g-hero .lead { font-size: var(--t-h3); }
  /* Foto und Regler bleiben im ersten Bildschirm: Hoehe hoechstens Fenster minus Leiste und Bildunterschrift */
  .g-foto, .g-bild .ba { max-height: calc(100svh - var(--nav-h) - 120px); }
}

/* ── Die drei Zeichen: nummerierte Zeilen, keine Karten ── */
.g-zeichen { border-top: 1px solid var(--line-strong); list-style: none; margin: 0; padding: 0; }
.g-zeichen-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: clamp(18px, 2.4vh, 28px) 0; border-bottom: 1px solid var(--line); }
.g-zeichen-row b { font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.g-zeichen-row p { margin: 0; font-size: var(--t-h3); font-weight: 380; line-height: 1.35; max-width: 34ch; }
.g-note { margin: 22px 0 0; }

/* ── Formular der Gewerkseiten: Titel passt in die Spalte (lange Gewerkwoerter wie GIPSERARBEITEN) ── */
.g-form #anfrage h2 { font-size: var(--t-h1); overflow-wrap: break-word; }

/* ── Gemeinsame Bausteine, auch von anderen Seiten genutzt (Anfrage, Projekte, Ratgeber, Impressum) ── */
.two { display: grid; gap: clamp(28px, 5vw, 80px); }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1.4fr; align-items: start; } }
.list-ruled { border-top: 1px solid var(--line-strong); }
.list-ruled li { padding: 1.15em 0; border-bottom: 1px solid var(--line); font-size: var(--t-text); line-height: 1.4; display: flex; gap: 1.1em; align-items: baseline; }
/* Listenmarker: kleines Quadrat, 6 px, weiss, keine Rundung (liest sich nicht als Gedankenstrich) */
.list-ruled li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--ink); transform: translateY(-.3em); }
.other-gw { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.other-gw a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 1.3em 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--t-h3); font-weight: 640; text-transform: uppercase; letter-spacing: .03em; }
.other-gw a span { transition: transform .7s var(--ease); }
.other-gw a:hover span, .other-gw a:focus-visible span { transform: translateX(14px); }
.other-gw svg { width: 20px; height: 12px; flex: none; transition: transform .7s var(--ease); }
.other-gw a:hover svg, .other-gw a:focus-visible svg { transform: translateX(4px); }

/* V2: ein Schieber und ein Leistungsumfang. */
.g-kopf:has(.g-text:only-child) { grid-template-columns:1fr; }
.g-hero .g-text:only-child { max-width:70ch; }
.g-zeigen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:24px; align-items:start; }
.g-zeigen-grid figure { margin:0; min-width:0; }
.g-zeigen-grid .g-foto { aspect-ratio:4/5; }
.g-zeigen-grid figcaption { margin-top:14px; font-size: var(--t-klein); color:var(--ink-dim); }
.ba-beispiel { position:absolute; z-index:3; left:14px; bottom:14px; background:var(--bg); color:var(--ink); font-size: var(--t-label); line-height:1.2; font-weight:500; letter-spacing:.12em; text-transform:uppercase; padding:.85em 1em; pointer-events:none; }
.ba { contain:layout paint; }
.ba-tag.aus { opacity:0; }
.ba-range { -webkit-tap-highlight-color:transparent; }
.reel { position:relative; aspect-ratio:9/16; background:var(--bg-2); overflow:hidden; }
.reel video { display:block; width:100%; height:100%; object-fit:cover; }
.reel-toggle { position:absolute; bottom:14px; left:14px; background:var(--bg); color:var(--ink); border:1px solid var(--ink); padding:12px; font: 500 var(--t-label)/1 var(--font); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.preis-band { border-top:1px solid var(--line); padding:20px 0; display:grid; gap:12px; }
.preis-band-label { display:flex; justify-content:space-between; gap:20px; font-size: var(--t-klein); }
.preis-band-track { height:14px; background:var(--bg-3); position:relative; }
.preis-band-fill { position:absolute; height:100%; left:var(--von,0%); width:calc(var(--bis,100%) - var(--von,0%)); background:var(--ink); transform-origin:left; }
.zeit--5 .zeit-liste { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:899px) { .g-bild .ba,.g-bild .g-foto { aspect-ratio:4/5; } .g-zeigen-grid { grid-template-columns:1fr; } .zeit--5 .zeit-liste { grid-template-columns:1fr; } }
.g-zeigen-foto { position:relative; aspect-ratio:4/5; overflow:hidden; }
.g-zeigen-foto picture,.g-zeigen-foto img { width:100%; height:100%; }
.g-zeigen-foto img { object-fit:cover; }
.g-zeigen-grid { margin-top:32px; }
.preis-band-zahl { color:var(--ink-dim); font-variant-numeric:tabular-nums; }
.ba-ziehen { position:absolute; z-index:2; right:14px; bottom:14px; background:var(--bg); color:var(--ink); font-size: var(--t-label); font-weight:500; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; padding:.85em 1em; pointer-events:none; }
.ba-z-touch { display:none; }
.ba.ba-benutzt .ba-ziehen { opacity:0; }
@media(hover:none) { .ba-z-maus { display:none; } .ba-z-touch { display:inline; } }
@media(prefers-reduced-motion:reduce) { .preis-band-fill { transform:none!important; } .zeit { --z:1!important; } }
@media print { .preis-band-fill { transform:none!important; } .zeit { --z:1!important; } .ba-range,.ba-ziehen,.reel-toggle { display:none; } }
@media(max-width:599px) {
 .g-hero .lead { font-size: var(--t-h3); line-height:1.45; }
 .g-region { font-size: var(--t-klein); line-height:1.5; margin-bottom:18px; }
 .g-hero .crumbs { font-size: var(--t-label); letter-spacing:.1em; }
}

.preis-band-achse { display:flex; justify-content:space-between; font-size: var(--t-label); letter-spacing:.04em; color:var(--ink-dim); font-variant-numeric:tabular-nums; margin-top:-4px; }
.preis-band-lab { color:var(--ink-dim); }
.preis-band-einheit { font-size: var(--t-klein); }

/* Mittlere Breiten: Textspalte breiter, damit lange Wörter der H1 (Ausbesserungen, Einbauschränke) nicht brechen */
@media (min-width: 900px) and (max-width: 1279px) { .g-kopf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* R5-E: Praxisbilder ruhiger, nie grösser als die Quelle (Dateien 1280 bis 1920 px, DPR 2) */
.g-zeigen-grid { grid-template-columns: repeat(auto-fill, minmax(0, 460px)); justify-content: start; }
.g-zeigen-foto--32 { aspect-ratio: 3 / 2; }
@media (max-width: 899px) { .g-zeigen-grid { grid-template-columns: 1fr; } }

/* ===== src/60-formular.css ===== */
/* 60 Formular und Anfrageblock */

.form-wrap { max-width: 720px; }
.field { position: relative; margin-bottom: clamp(22px, 3vh, 30px); }
.field label, .group legend { display: block; font-size: var(--t-label); font-weight: 520; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: .8em; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  display: block; width: 100%; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-strong);
  padding: .7em 0; font: 400 var(--t-text)/1.5 var(--font); border-radius: 0; outline: none; -webkit-appearance: none; appearance: none;
}
.field :is(input, textarea, select):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }   /* Ring wie überall (WP14, L1) */
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
/* Linie unten zeichnet sich bei Fokus (2 px weiss), das Label bleibt ruhig */
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform .8s var(--ease); pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); }
.field:has(.upload)::after, .field:has(.chk)::after { display: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); opacity: .7; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%23A8A8A8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 26px; }
.field select option { background: #161616; color: #fff; }
.row2 { display: grid; gap: 0 clamp(20px, 3vw, 40px); }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.group { border: 0; padding: 0; margin: 0 0 clamp(22px, 3vh, 30px); min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.chk { position: relative; display: inline-flex; align-items: center; gap: .7em; cursor: pointer; font-size: var(--t-text); line-height: 1.35; }
.chk input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; position: relative; transition: background-color .2s, border-color .2s; margin: 0; }
.chk input:checked { background: var(--ink); border-color: var(--ink); }
.chk input:checked::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.checks--pills .chk { border: 1px solid var(--line-strong); padding: .75em 1.1em .75em .9em; transition: border-color .2s, background-color .2s; }
.checks--pills .chk:has(input:checked) { border-color: var(--ink); background: rgba(255, 255, 255, .06); }
.chk--block { display: flex; align-items: flex-start; color: var(--ink-dim); font-size: var(--t-klein); line-height: 1.55; margin-bottom: 16px; }
.chk--block input { margin-top: .15em; }
.chk--block a { color: var(--ink); border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.upload { position: relative; border: 1px dashed var(--line-strong); padding: 26px 20px; text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.upload:hover, .upload:focus-within { border-color: var(--ink); background: rgba(255, 255, 255, .04); }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload b { display: block; font-size: var(--t-klein); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.upload span { display: block; font-size: var(--t-klein); color: var(--ink-dim); margin-top: 4px; }
.upload .files { color: var(--ink); margin-top: 8px; font-size: var(--t-klein); overflow-wrap: anywhere; }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-msg { display: none; margin-top: 22px; border: 1px solid var(--line-strong); padding: 18px 20px; font-size: var(--t-text); line-height: 1.55; }
.form-msg.show { display: block; }
.form-msg a { color: var(--ink); }
.form-box { border: 1px solid var(--line); background: var(--bg-2); padding: clamp(24px, 4vw, 56px); }
.form-grid { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 1000px) { .form-grid { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.aside { display: grid; gap: 36px; }
.aside h3 { font-size: var(--t-klein); letter-spacing: .2em; color: var(--ink-dim); font-weight: 520; margin-bottom: 14px; }

/* ── Schritte (WP6): ohne JS stehen alle Schritte untereinander, casa-formular.js setzt .fs-on ── */
.fp { display: none; position: relative; height: 2px; background: var(--line); margin-bottom: clamp(28px, 4vh, 44px); overflow: hidden; }
.fs-on .fp { display: block; }
.fp-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--fp, .3333)); transform-origin: left center; transition: transform .9s var(--ease); }
.fstep-no { margin: 0 0 .9em; font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.4; }
.fstep-h { font-size: var(--t-h3); margin-bottom: clamp(22px, 3.5vh, 34px); outline-offset: 6px; }
form:not(.fs-on) .fstep + .fstep { margin-top: clamp(36px, 6vh, 56px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--line); }
.fnav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
form:not(.fs-on) [data-weiter], form:not(.fs-on) [data-zurueck] { display: none; }
@media (max-width: 599px) { .fnav { flex-direction: column-reverse; } .fnav .btn { width: 100%; } }
.fnote { margin: 16px 0 0; }

/* Fehler: Weiss mit 2 px weissem Balken links, keine Zusatzfarbe. Erkennbar an Text und Balken. */
.ferr { margin: 10px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--ink); color: var(--ink); font-size: var(--t-klein); font-weight: 450; line-height: 1.5; }
.field.is-fehler :is(input, textarea, select) { border-bottom-color: var(--ink); }
.field.is-fehler .upload { border-style: solid; border-color: var(--ink); }
.group.is-fehler .chk { border-color: var(--ink); }
.field-chk .ferr { margin: -4px 0 18px; }

/* Checkbox GVS-Mitglied neben der Quelle, Label ohne Eyebrow-Stil */
.field--chk { align-self: end; }
.field--chk label.chk, .field--chk .chk-text { font-weight: 400; }
.field--chk label.chk { display: inline-flex; margin: 0; font-size: var(--t-text); letter-spacing: 0; text-transform: none; color: var(--ink); }
.field--chk::after { display: none; }
.upload:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Aside und GVS-Formular ohne Seitenleiste */
.form-grid--solo { grid-template-columns: minmax(0, 1fr); }
.form-grid--solo .form-box { max-width: 820px; }

/* ── GVS-Seite: Mitgliedervorteil als eigene Zeile, Kasten Marc ── */
/* H1 der GVS-Seite: Headline, Lead und Knopf sollen im ersten Bildschirm stehen (WP14) */
.page-head .gvs-h1 { line-height: .98; max-width: 22ch; }
.gvs-zeile { display: grid; gap: 10px 48px; padding: clamp(22px, 3.5vh, 36px) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.gvs-zeile .eyebrow { margin: 0; }
.gvs-zeile p { margin: 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.4; max-width: 40ch; }
@media (min-width: 900px) { .gvs-zeile { grid-template-columns: minmax(200px, 1fr) 2fr; align-items: baseline; } }
.gvs-marc { border: 1px solid var(--line-strong); padding: clamp(22px, 3vw, 40px); max-width: 720px; display: grid; gap: 22px; }
.gvs-marc .note { margin: 0; }
.gvs-paar { padding-bottom: clamp(56px, 8vh, 96px); }

/* ── Danke: zentriert, Linie mit erstem Punkt erledigt ── */
.dk .wrap { text-align: center; }
.dk .h-xxl { margin-bottom: clamp(8px, 2vh, 20px); }
.dk .zeit { max-width: 980px; margin-left: auto; margin-right: auto; text-align: left; }
.dk .zeit-pt { background: var(--bg); border: 1px solid var(--ink); }
.dk .zeit-item--ok .zeit-pt { background: var(--ink); }
.dk-satz { margin: clamp(32px, 6vh, 56px) auto clamp(28px, 5vh, 44px); max-width: 34ch; }
.dk .btn-row { justify-content: center; }
@media (min-width: 900px) {
  .dk .zeit-item { text-align: center; }
  .dk .zeit-pt { left: 50%; margin-left: -5px; }
  .dk .zeit-item p { margin-left: auto; margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) { .fp-fill { transition: none; } }
@media print {
  .fp, .fnav [data-weiter], .fnav [data-zurueck] { display: none !important; }
  .fstep[hidden] { display: block !important; }
}

/* Fehlerfeld: die Fokuslinie liegt am Feld selbst (nicht unter der Meldung) */
.field:has(.ferr:not([hidden]))::after { display: none; }
.field.is-fehler :is(input, textarea, select):focus { border-bottom-width: 2px; padding-bottom: calc(.7em - 1px); }
.chk--block + .row2 { margin-top: 24px; }

/* Hinweis unter den Gewerk-Pillen (Schadstoffcheck: Weitergabe an eine Fachstelle) */
.fhint { margin: 14px 0 0; max-width: 62ch; color: var(--ink-dim); }
.fhint[hidden], [data-partner-normal][hidden], [data-partner-schad][hidden] { display: none; }


/* ── WP15b: /anfrage mit Formular im ersten Bildschirm ── */
.page-head--form { padding-top: clamp(20px, 3.4vh, 40px); padding-bottom: clamp(56px, 9vh, 112px); }
.page-head--form .crumbs { margin-bottom: 1.4em; }
.page-head--form h1 { max-width: none; margin-bottom: clamp(10px, 1.6vh, 16px); }
.page-head--form .lead { font-size: var(--t-h3); margin: 0 0 clamp(16px, 2.4vh, 24px); }
.page-head--form .form-box { padding: clamp(20px, 2.4vw, 36px); }
.page-head--form .fp { margin-bottom: clamp(18px, 2.4vh, 24px); }
.page-head--form .fstep-h { margin-bottom: clamp(14px, 2vh, 20px); }
.page-head--form .fstep-no { margin-bottom: .5em; }
.page-head--form .form-grid { align-items: start; }
.page-head--form .aside { padding-top: clamp(48px, 7vh, 72px); }
@media (max-width: 999px) { .page-head--form .aside { padding-top: 0; } }
/* ── GVS-Kopf: links Titel, Lead, Knopf; rechts Ansprechpartner und drei Eckdaten ── */
.gvs-kopf { display: grid; gap: clamp(28px, 4vh, 44px) clamp(32px, 5vw, 80px); align-items: start; }
.gvs-text, .gvs-rechts { min-width: 0; }
.gvs-rechts { display: grid; gap: 20px; align-content: start; }
.gvs-rechts .eyebrow { margin: 0; }
.gvs-rechts .gvs-marc { border: 1px solid var(--line-strong); padding: clamp(18px, 2.4vw, 28px); max-width: none; display: block; }
@media (min-width: 900px) { .gvs-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .gvs-rechts { padding-top: clamp(48px, 8vh, 96px); } }
.aside .marc h3 { font-size: var(--t-text); letter-spacing: .01em; color: var(--ink); font-weight: 640; margin: 0 0 6px; }

/* ===== src/70-unterseiten.css ===== */
/* 70 Unterseiten: Seitenkopf, Projekte, Ratgeber, GVS, Danke und 404 */

.page-head { padding-top: clamp(56px, 10vh, 120px); padding-bottom: clamp(48px, 8vh, 96px); }
.page-head h1 { overflow-wrap: break-word; margin-bottom: clamp(20px, 3vh, 36px); max-width: 16ch; }
.crumbs { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 2.2em; }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--line); }
.crumbs a:hover { color: var(--ink); border-color: var(--ink); }

/* Projekte (WP7): ein Objekt in voller Laenge, Bilder randlos, kein Raster, kein Filter.
   Der Regler (.rk-regler) und die Einzelbilder (.rk-bild) kommen aus 40-start.css. */
.pr { padding-top: calc(var(--kapitel) * .55); padding-bottom: calc(var(--kapitel) * .3); }
.pr-kopf { display: grid; gap: clamp(18px, 3vh, 32px); margin-bottom: clamp(28px, 4.5vh, 52px); }
.pr-kopf .eyebrow { margin-bottom: 1.1em; }
.pr-kopf .lead { margin: 0; }
@media (min-width: 900px) { .pr-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap); } }
.pr-paar { margin-top: clamp(28px, 4.5vh, 52px); }
.pr .rk-regler + .pr-paar { margin-top: clamp(32px, 5vh, 56px); }
.pr .rk-raum { margin-bottom: 14px; }
.pr-bilder { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100vw; margin-left: calc(50% - 50vw); }
@media (min-width: 900px) { .pr-bilder { grid-template-columns: 1fr 1fr; } }
/* Ein einzelnes Ergebnisbild: volle Breite, aber nie hoeher als ein Bildschirm */
.pr-bilder--1 .rk-bild { aspect-ratio: auto; height: min(66.67vw, calc(100svh - var(--nav-h) - 120px)); }
.pr-hinweis { margin: clamp(20px, 3vh, 32px) 0 0; }

/* Ratgeber (minimal, bis die Artikel da sind) */
.facts { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.facts li { padding: 1.3em 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.facts b { font-size: var(--t-h3); font-weight: 640; line-height: 1.25; }
.facts span { color: var(--ink-dim); max-width: 62ch; }
.rg-text { margin-top: 24px; }

/* GVS */
.partner-line { font-size: var(--t-klein); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); padding: 14px 0; border-bottom: 1px solid var(--line); }
.vorteil { border: 1px solid var(--ink); padding: clamp(24px, 3.4vw, 44px); max-width: 780px; }
.vorteil p { margin: 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.4; }

/* Danke, 404 */
.center-page { min-height: calc(100svh - var(--nav-h) - 200px); display: grid; align-content: center; padding: clamp(60px, 12vh, 140px) 0; }

/* 404 (WP7): zentriert, Zeichnung im Zustand abgeklebt, darunter die Wege weiter. Verweise wurzelabsolut (bauen.py). */
.e404 { min-height: calc(100svh - var(--nav-h) - 120px); display: grid; align-content: center; padding: clamp(40px, 8vh, 96px) 0 clamp(56px, 9vh, 112px); }
.e404-in { display: grid; justify-items: center; text-align: center; }
.e404 .eyebrow { margin-bottom: 1.2em; }
.e404 h1 { max-width: 30ch; margin-bottom: clamp(24px, 4vh, 44px); }
.e404-fig .zb .zn { display: inline; }
.e404-fig .zb b { margin-right: .9em; }   /* Runde 4: die Beschriftung nennt den Namen (S1 Abkleben), auch in der schmalen Zeichenfläche */
.e404-fig { width: min(88%, 520px, 42svh * 560 / 360); margin-bottom: clamp(28px, 5vh, 52px); text-align: left; transform: translateX(11.4%); }   /* die Wand (nicht das Bezugsschild) sitzt in der Mitte */
.e404-links { display: grid; width: min(100%, 640px); border-top: 1px solid var(--line-strong); text-align: left; }
.e404-links a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 56px; padding: .9em 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--t-text); font-weight: 640; text-transform: uppercase; letter-spacing: .03em; }
.e404-links a span { transition: transform .7s var(--ease); }
.e404-links a:hover span, .e404-links a:focus-visible span { transform: translateX(14px); }
.e404-links svg { width: 20px; height: 12px; flex: none; transition: transform .7s var(--ease); }
.e404-links a:hover svg, .e404-links a:focus-visible svg { transform: translateX(4px); }
@media (min-width: 900px) { .e404-links { display: flex; flex-wrap: wrap; justify-content: center; width: auto; gap: 0 36px; border-top: 0; } .e404-links a { border-bottom: 1px solid var(--line-strong); font-size: var(--t-klein); letter-spacing: .16em; min-height: 48px; gap: 14px; } }

/* Inversionswelle (WP7, ART-DIRECTION 5): nur Startseite, nur mit html.welle (setzt das Kopf-Skript bei ?von=studio).
   Eine weisse Flaeche liegt ueber allem und traegt die Casa-Leiste in Schwarz auf Weiss, mit denselben Klassen wie die
   echte Leiste (gleiche Position). Nach 0.12 s faehrt die Unterkante von unten nach oben (clip-path, 1.1 s, expo.out).
   Die Schnittlinie (1 px, weiss) laeuft 4 px unter der Kante mit; sonst verschmoelze sie mit der weissen Flaeche.
   Sie wird auf Hoehe der Leiste abgeschnitten (eigener Container). Die Animation endet im vollen Clip: auch ohne
   Skript bleibt am Ende nichts sichtbar. Ohne html.welle ist alles display: none. */
.welle-box { display: none; --bg: #FFFFFF; --ink: #0E0E0E; --ink-dim: #5E5E5E; --line: rgba(0, 0, 0, .16); --line-strong: rgba(0, 0, 0, .42); }
html.welle .welle-box { display: block; }
.welle-fl { position: fixed; inset: 0; z-index: 300; background: #FFFFFF; pointer-events: none; animation: welle-fahrt 1.1s cubic-bezier(0.16, 1, 0.3, 1) .12s both; }
.welle-box .nav { position: absolute; }
.welle-lnc { position: fixed; inset: 0; z-index: 301; pointer-events: none; clip-path: inset(var(--nav-h) 0 0 0); }
.welle-ln { position: absolute; inset: 0; animation: welle-linie 1.1s cubic-bezier(0.16, 1, 0.3, 1) .12s both; }
.welle-ln i { position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: #FFFFFF; }
@keyframes welle-fahrt { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes welle-linie { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } }
@media (prefers-reduced-motion: reduce) { html.welle .welle-box { display: none; } }
@media print { .welle-box { display: none !important; } }

/* WP16a: Kopf der Projekte-Seite mit Beweisbild rechts (Handy: unter dem Text), Kurzbloecke fuer Staefa und Immensee */
.page-head--bild { padding-bottom: clamp(32px, 5vh, 64px); }
.pk-kopf { display: grid; gap: clamp(24px, 4vh, 40px); }
.pk-text h1 { max-width: 12ch; }
.pk-bild { position: relative; margin: 0; aspect-ratio: 3 / 2; background: var(--bg-2); overflow: hidden; }
.pk-bild picture, .pk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .pk-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--gap); }
  .pk-bild { max-height: calc(100svh - var(--nav-h) - 160px); aspect-ratio: auto; height: min(46vw, calc(100svh - var(--nav-h) - 160px)); }
}
.pr-kurz { padding-top: calc(var(--kapitel) * .3); }
.pr-kurz .rk-zeile { margin-bottom: 0; }

/* R5-E: Projektbilder höchstens 720 css px breit, nicht mehr randlos über 100vw (Hochskalierung) */
.pr-bilder { width: auto; margin-left: 0; gap: clamp(16px, 2vw, 28px); max-width: calc(720px * 2 + 28px); }
.pr-bilder .rk-bild { margin: 0; }
.pr-bilder figcaption { margin-top: 12px; font-size: var(--t-klein); color: var(--ink-dim); }

/* ===== src/75-ratgeber.css ===== */
/* 75 Ratgeber (WP12): Liste als Zeilen, Artikel einspaltig 62ch, Tabellen, Kasten Marc.
   Nur Hover und Fokus bewegen sich. Aller Text steht ohne Skript, ohne Bewegung und im Druck da. */

/* Liste: Nummer, Titel, Lesezeit, Pfeil. Hover: Zeile wird --bg-2 (ART-DIRECTION 4). */
.rg-liste { border-top: 1px solid var(--line-strong); list-style: none; margin: 0; padding: 0; }
.rg-zeile a {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto 20px; align-items: center;
  column-gap: clamp(14px, 2.4vw, 36px); min-height: 72px; padding: 1.15em clamp(0px, 1vw, 16px);
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background-color .45s var(--ease);
}
.rg-zeile a:hover, .rg-zeile a:focus-visible { background: var(--bg-2); }
.rg-nr { font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.rg-titel { font-size: var(--t-h3); font-weight: 640; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: break-word; }
.rg-zeit { font-size: var(--t-label); font-weight: 520; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.rg-zeile svg { width: 20px; height: 12px; transition: transform .6s var(--ease); }
.rg-zeile a:hover svg, .rg-zeile a:focus-visible svg { transform: translateX(6px); }
@media (max-width: 599px) {
  .rg-zeile a { grid-template-columns: 2.4em minmax(0, 1fr) 20px; grid-template-areas: "nr zeit pf" "ti ti ti"; row-gap: .6em; }
  .rg-nr { grid-area: nr; }
  .rg-zeit { grid-area: zeit; }
  .rg-zeile svg { grid-area: pf; }
  .rg-titel { grid-area: ti; }
}
.rg-uebersicht { padding-top: calc(var(--kapitel) * .4); }

/* Artikelkopf: lange Titel brauchen weniger Grösse als die H1 der Unterseiten */
.rg-kopf .rg-h1 { max-width: 22ch; line-height: 1; }
.rg-kopf .lead { max-width: 52ch; }

/* Text */
.rg-art { padding-top: calc(var(--kapitel) * .5); }
.rg-text { max-width: 62ch; }
.rg-text p, .rg-text li { font-size: var(--t-text); line-height: 1.65; font-weight: 350; overflow-wrap: break-word; }
@media (max-width: 599px) { .rg-text p, .rg-text li { font-size: var(--t-text); } }
.rg-text p { margin: 0 0 1.15em; }
.rg-text strong { font-weight: 600; }
.rg-text a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; background-origin: border-box; transition: background-size .45s var(--ease); }
.rg-text a:hover, .rg-text a:focus-visible { background-size: 100% 1px; }
.rg-text h2 { font-size: var(--t-h2); line-height: 1.05; margin: clamp(52px, 8vh, 88px) 0 .6em; overflow-wrap: break-word; }
.rg-text > h2:first-child, .rg-text > p:first-child + h2 { margin-top: clamp(36px, 6vh, 64px); }
.rg-text h3 { font-size: var(--t-h3); margin: 2em 0 .6em; }
.rg-text ul, .rg-text ol { margin: 0 0 1.4em; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rg-text ul li, .rg-text ol li { padding: .75em 0; border-bottom: 1px solid var(--line); }
.rg-text ol { counter-reset: rg; }
.rg-text ol li { counter-increment: rg; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 1em; }
.rg-text ol li::before { content: counter(rg); font-size: var(--t-label); font-weight: 640; letter-spacing: .16em; color: var(--ink-dim); padding-top: .55em; font-variant-numeric: tabular-nums; }

/* Hinweis (z. B. Steuern): Rahmen statt Farbe */
.rg-hinweis { border: 1px solid var(--line-strong); padding: clamp(18px, 2.4vw, 28px); margin: 0 0 2em; font-size: var(--t-text) !important; line-height: 1.55 !important; }

/* Zeichnung im Artikel */
.rg-fig { margin: 2em 0 2.4em; }
.rg-fig .zch-cap { margin-top: 14px; }
.rg-text .rg-fig .zch-t { font-size: var(--t-label); line-height: 1.4; font-weight: 480; margin: 0; }

/* Tabelle: auf dem Handy als Zeilen mit Beschriftung (kein seitliches Scrollen) */
.rg-tab { margin: 0 0 1.6em; }
.rg-tab table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: var(--t-text); line-height: 1.5; }
.rg-tab th, .rg-tab td { text-align: left; vertical-align: top; padding: .8em 1em .8em 0; border-bottom: 1px solid var(--line); font-weight: 350; overflow-wrap: break-word; }
.rg-tab thead th { font-size: var(--t-label); font-weight: 520; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); border-bottom-color: var(--line-strong); }
.rg-tab tbody th { font-weight: 560; }
.rg-tab td { font-variant-numeric: tabular-nums; }
.rg-tab tbody tr:hover { background: var(--bg-2); }
@media (max-width: 599px) {
  .rg-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rg-tab tr { display: block; padding: .8em 0; border-bottom: 1px solid var(--line); }
  .rg-tab th, .rg-tab td { display: block; padding: .15em 0; border: 0; }
  .rg-tab td::before { content: attr(data-l); display: block; font-size: var(--t-label); font-weight: 520; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
}

.rg-schluss-zeile { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); }

/* Schluss: Kasten Marc und weitere Beiträge */
.rg-ende .wrap { display: grid; gap: clamp(48px, 8vh, 96px); }
.rg-kasten { border: 1px solid var(--line-strong); padding: clamp(24px, 3.6vw, 48px); max-width: 780px; display: grid; gap: clamp(18px, 3vh, 28px); justify-items: start; }
.rg-kasten h2, .rg-kasten .lead, .rg-kasten .marc { margin: 0; }
.rg-kasten .marc { max-width: 100%; }
.rg-weitere .eyebrow { margin-bottom: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  .rg-zeile a, .rg-zeile svg, .rg-text a { transition: none; }
}
@media print {
  .rg-zeile a:hover { background: none; }
  .rg-kasten { break-inside: avoid; }
}

/* «Mehr dazu» auf den Leistungsseiten: ruhige Zeilen ohne Nummer, Titel in normaler Schreibweise */
.rg-liste--ruhig .rg-zeile a { grid-template-columns: minmax(0, 1fr) auto 20px; min-height: 64px; padding-left: 0; padding-right: 0; }
.rg-liste--ruhig .rg-titel { font-size: var(--t-text); font-weight: 520; letter-spacing: 0; text-transform: none; line-height: 1.3; }
@media (max-width: 599px) {
  .rg-liste--ruhig .rg-zeile a { grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "ti pf" "zeit zeit"; row-gap: .5em; }
}

/* ===== src/80-einsatzgebiet.css ===== */
/* 80 Einsatzgebiet (WP11): Karte aus Code und drei ruhige Textkapitel.
   Die Karte ist ein statisches SVG mit eigenen Klassen für Kopf, Städtepunkte, Beschriftungen, Muster und Textraster.
   Ohne JS, bei reduzierter Bewegung und im Druck steht die Karte fertig gezeichnet da. */

/* ── Kopf: H1 und Lead links, Karte rechts. Der Kopf des Gewerks (50-gewerk.css) liefert das Raster. ── */
html[data-seite="einsatzgebiet"] .g-hero h1 { max-width: 22ch; }
.eg-bild .gebietskarte { width: 100%; }
@media (min-width: 900px) {
  /* Karte samt Legende bleibt im ersten Bildschirm: Breite aus der Resthöhe, Seitenverhältnis der Karte 640 zu 407 */
  .eg-bild .gebietskarte { max-width: calc((100svh - var(--nav-h) - 300px) * 1.572); }
}

/* ── Städtepunkte: Quadrate in festen Bildschirm-Pixeln (Strich mit eckigem Abschluss, Länge 0) ── */
.gebietskarte .kd { stroke-linecap: square; stroke-linejoin: miter; }
.gebietskarte .kd-a { stroke: var(--ink); stroke-width: calc(9px * var(--zs)); }
.gebietskarte .kd-b { stroke: var(--bg); stroke-width: calc(5px * var(--zs)); }
.gebietskarte .kd-r { stroke: var(--line-strong); stroke-width: calc(23px * var(--zs)); }
.gebietskarte .kd-g { stroke: var(--bg); stroke-width: calc(21px * var(--zs)); }
.gebietskarte .kd-s { stroke: var(--ink); stroke-width: calc(13px * var(--zs)); }
/* Muster: Abstand und Strichstärke bleiben in Bildschirm-Pixeln (6 px Schraffur). Browser, die das nicht kennen,
   zeigen den Abstand in Kartenmassstab, das sieht nur etwas dichter oder lockerer aus. */
.gebietskarte pattern { transform: scale(var(--zs)); }
.gebietskarte #k-h, .gebietskarte #k-l { transform: rotate(45deg) scale(var(--zs)); }

/* ── Beschriftung der Städte im Eyebrow-Stil: 11 px, 480, 0.16em, Versalien (HTML, feste Grösse) ── */
.kl { position: absolute; background: var(--bg); padding: 3px 4px; margin: -3px -4px; white-space: nowrap; font: 480 var(--t-label)/1 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.kl--r { transform: translate(14px, -50%); }
.kl--l { transform: translate(calc(-100% - 14px), -50%); }
.kl--o { transform: translate(-50%, calc(-100% - 11px)); }
.kl--u { transform: translate(-50%, 11px); }
.kl--sitz { color: var(--ink); font-weight: 640; }
.kl--sitz.kl--r { transform: translate(18px, -50%); }
.kl i { font-style: normal; font-weight: 480; color: var(--ink-dim); margin-left: .9em; }
/* Schmale Karte: nur die wichtigsten Orte beschriftet, die Punkte bleiben */
@container (max-width: 520px) {
  .kl--x, .kl i { display: none; }
  .kl { padding: 2px 3px; margin: -2px -3px; }   /* Hintergrund bleibt: Linien des Landes schneiden die Buchstaben sonst (WP14) */
  .kl--sitz.kl--r { transform: translate(-50%, 15px); }
}

/* ── Legende: Muster statt S-Nummer ── */
.eg-leg li { align-items: center; }
.eg-leg b { min-width: 0; width: 28px; height: 14px; display: block; flex: none; }
.eg-leg svg { position: static; inset: auto; display: block; width: 28px; height: 14px; color: var(--ink); overflow: hidden; }
.eg-hinweis { margin: 0; }

/* ── Textkapitel: Überschrift links, Inhalt rechts (wie die Gewerkseiten) ── */
.eg-grid { display: grid; gap: clamp(28px, 4vw, 64px); }
.eg-grid > * { min-width: 0; }
@media (min-width: 900px) { .eg-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: var(--gap); } }
.eg-grid h2 { margin: 0; overflow-wrap: break-word; }
.eg-gruppen { border-top: 1px solid var(--line-strong); }
.eg-g { padding: clamp(18px, 2.4vh, 28px) 0; border-bottom: 1px solid var(--line); }
.eg-g h3 { font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; color: var(--ink-dim); margin: 0 0 .8em; }
@media (max-width: 599px) { .eg-g h3 { font-size: var(--t-label); } }
.eg-g p { margin: 0; font-size: var(--t-text); font-weight: 380; line-height: 1.5; max-width: 52ch; }
.eg-projekte { margin: clamp(18px, 2.4vh, 28px) 0 0; }
.eg-intro { margin: 0 0 clamp(20px, 3vh, 32px); }
.eg-intro a { white-space: normal; }

/* Drei Dinge zum Schicken: eine Zeile, drei Spalten ab 900 px */
.eg-schick { display: grid; border-top: 1px solid var(--line-strong); }
.eg-s { padding: clamp(16px, 2.2vh, 26px) 0; border-bottom: 1px solid var(--line); }
.eg-s h3 { font-size: var(--t-label); font-weight: 520; letter-spacing: .22em; color: var(--ink-dim); margin: 0 0 .7em; }
@media (max-width: 599px) { .eg-s h3 { font-size: var(--t-label); } }
.eg-s p { margin: 0; font-size: var(--t-text); line-height: 1.55; max-width: 34ch; }
@media (min-width: 1100px) {
  .eg-schick { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .eg-s { border-bottom: 0; }
}

@media print {
  .kl { color: #000; }
  .gebietskarte .kd-a, .gebietskarte .kd-s { stroke: #000; }
  .gebietskarte .kd-b, .gebietskarte .kd-g { stroke: #fff; }
  .gebietskarte .kd-r { stroke: rgba(0, 0, 0, .42); }
  .kl-lab [data-a] { opacity: 1 !important; }
}

/* V2: eigenständige statische Kartenbasis, vollständig ohne JavaScript. */
.gebietskarte { margin:0; container-type:inline-size; --zs:1; }
.gebietskarte-box { position:relative; width:100%; }
.gebietskarte-box > svg { position:absolute; inset:0; width:100%; height:100%; display:block; color:var(--ink); overflow:visible; }
.gebietskarte .zs { stroke:currentColor; stroke-width:1.5; stroke-linejoin:miter; }
.gebietskarte .zf { stroke-width:1; }
.gebietskarte .zh { stroke:var(--line-strong); stroke-width:1; }
.gebietskarte .zg { stroke-dasharray:6 4; }
.gebietskarte .zk { fill:var(--bg); }
.gebietskarte .zt { fill:var(--bg-2); }
.gebietskarte .zp { fill:var(--line-strong); }
.gebietskarte-lab { position:absolute; inset:0; pointer-events:none; }
.gebietskarte-cap { display:grid; gap:14px; margin-top:24px; }
.gebietskarte-t { font-size: var(--t-label); font-weight:480; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.gebietskarte-liste { display:grid; border-top:1px solid var(--line-strong); }
.gebietskarte-liste li { display:flex; gap:1.1em; align-items:baseline; padding:.8em 0; border-bottom:1px solid var(--line); font-size: var(--t-klein); color:var(--ink-dim); }