:root {
  /* Warmes Creme wie auf an-metallbau.de (dort --bg: #f4ecdd). Ansage AN
     17.09.2026: das graue Creme aus der Designrunde raus, gelblicher, Richtung
     Cafe. Die drei Stufen liegen im selben Farbton, nur heller und dunkler. */
  --cream: #F4ECDD;
  --cream-light: #FAF5EA;
  --cream-deep: #ECE0C8;
  /* 26.09.2026 (Briefing AN, Punkt 4: "deutlich satter, klarer und
     kontrastreicher, im bestehenden Farbschema"): Bronze wird zu Cognac -
     derselbe Ton, mehr Saettigung. Nur Linien, Flaechen und Akzente. */
  --bronze: #B97A40;
  /* 26.09.2026 (Auftrag Optik, B8): von #97683A auf #805730 abgedunkelt. Der Ton
     traegt Schrift (Links, Vorzeilen, Pflicht-Sternchen) und lag auf Creme bei
     3,7 bis 4,4:1 - jetzt mindestens 4,8:1 auf allen drei Cremestufen und 5,4:1
     fuer Creme-Schrift auf diesem Grund. Flaechen und Linien bleiben --bronze. */
  /* 26.09.2026: #805730 -> #8A4B1E (satter Cognac). Traegt Schrift und die
     wichtigen Knoepfe: mindestens 5,2:1 auf allen Cremestufen, helle Schrift
     darauf 6,6:1. Vorher (Stufe 0) von #97683A auf #805730 abgedunkelt. */
  --bronze-deep: #8A4B1E;
  --bronze-hell: #9C5726; /* Zeiger auf Cognac-Knopf, helle Schrift 5,4:1 */
  --bronze-glow: #E3A866;
  --gold-warm: #EDBD41;
  /* Waerme 26.09.2026 (Ansage AN: "immer noch so ein kuehler, unangenehmer
     Touch"). Ursache gemessen: Schrift- und Flaechentoene waren neutrales Grau
     (#212121, #4A4A4A), Weiss war reines #FFF, der Verlauf ueber dem Kopffoto
     ein blaugruenes Schwarz. Neben Creme wirkt neutrales Grau kalt. Jetzt tragen
     alle dunklen und weissen Toene denselben Braunanteil wie Creme und Bronze.
     Kontraste steigen dabei leicht (design-charakter.md, Tokenliste). */
  /* Briefing Punkt 4/5: kraeftiges Anthrazit statt blassem Grau, tiefes
     Schwarz gezielt fuer die starken Flaechen, dunkles Stahlgrau dazwischen.
     Alle drei warm-neutral, damit nichts kalt neben Creme steht. */
  --ink: #1E1C19;          /* Anthrazit: Schrift, dunkle Knoepfe */
  --tief: #12110F;         /* tiefes Schwarz: Kopfbuehne, Werkstatt, Fuss */
  --stahl: #2F2C28;        /* dunkles Stahlgrau: zweite dunkle Flaeche, Zeiger */
  --ink-soft: #3D3833;     /* Fliesstext: 9,9:1 auf --cream (vorher 7,6:1) */
  --ink-mute: #5C544B; /* auf --cream-deep 5,7:1, auf --cream 6,3:1 (WCAG AA), gemessen 26.09.2026 */
  --line: rgba(185, 122, 64, 0.28);
  --line-soft: rgba(185, 122, 64, 0.14);
  /* Warmes Weiss fuer Karten, Felder und die hellste Flaeche; reines #FFF
     stand als kalter Streifen zwischen den Cremeflaechen. */
  --white: #FFFCF6;
  /* Dunkler Verlauf ueber Fotos (Kopfbuehne): derselbe Braunton wie --ink. */
  --schleier: 18, 17, 15;
  /* Anzeige- und Fliesstextschrift sind seit 12.08.2026 dieselbe (siehe SCHRIFTEN).
     --display bleibt als eigene Variable bestehen: Ueberschriften sollen weiter
     zentral umstellbar sein, ohne jede Regel einzeln anzufassen. */
  --display: 'Manrope', 'Manrope Fallback', -apple-system, sans-serif;
  --body: 'Manrope', 'Manrope Fallback', -apple-system, sans-serif;
  --shadow: 0 2px 10px rgba(34,28,22,.06);
  --shadow-soft: 0 3px 12px rgba(34,28,22,.07);
  --shadow-strong: 0 6px 24px rgba(34,28,22,.10);
  /* Rhythmus und Schrift (Auftrag Optik 26.09.2026, design-charakter.md).
     Zwei Sektionsgroessen statt ueberall 72 px (Befund B1), Fliesstext 17 px
     statt 14-15 px (Befund B2). Jeder Wert steht genau hier; das Handy
     ueberschreibt nur die Werte selbst, nicht die Regeln. */
  /* Rand fuer Bedienelemente (Felder, Schnellzugriff): 3,4:1 auf --cream-deep,
     4,5:1 auf --white - WCAG 1.4.11 verlangt 3:1 fuer die Grenze eines Bedienteils.
     Gemessen mit design-beweis (zustands-probe) am 26.09.2026, warm nachgezogen
     am selben Tag (3,5:1 auf --cream-deep). */
  --rand-bedien: #7E7466;
  --abstand-weit: 104px;
  --abstand-eng: 56px;
  --text: 17px;
  --text-klein: 15px;
  --h2: clamp(30px, 3.6vw, 44px);
}
@media (max-width: 760px) {
  :root { --abstand-weit: 64px; --abstand-eng: 40px; --text: 16px; }
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Sprungmarken nicht unter die klebende Kopfleiste rutschen lassen. */
[id] { scroll-margin-top: 96px; }
body { background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.top-bar { background: var(--tief); color: rgba(246,240,231,0.85); padding: 9px 24px; font-size: 12px; letter-spacing: 0.02em; font-weight: 400; }
.top-bar-inner { max-width: 1380px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.top-bar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top-bar-left a { color: rgba(246,240,231,0.85); display: inline-block; padding: 7px 0; margin: -7px 0; }
.top-bar-left a:hover { color: var(--bronze-glow); }
.top-bar-sep { color: rgba(246,240,231,0.3); }
.top-bar-mute { color: rgba(246,240,231,0.55); }
.top-bar-right { display: flex; gap: 14px; }
.top-bar-right a { color: var(--bronze-glow); font-weight: 500; }
.top-bar-right a:hover { color: var(--cream); }
@media (max-width: 800px) { .top-bar { padding: 8px 16px; font-size: 12.5px; } .top-bar-inner { flex-direction: column; gap: 4px; align-items: center; } .top-bar-left { justify-content: center; gap: 10px; } }
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-dropdown-trigger .caret { font-size: 9px; transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-trigger .caret { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--cream); border: 1px solid var(--line); padding: 12px 0; min-width: 230px; opacity: 0; visibility: hidden; transition: all 0.25s; z-index: 100; box-shadow: 0 12px 32px rgba(34,28,22,0.12); }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
@media (min-width: 1051px) { .nav-dropdown.zu .nav-dropdown-menu { opacity: 0; visibility: hidden; transition: none; } }
.nav-dropdown-menu a { display: block; padding: 9px 22px !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none; color: var(--ink-soft) !important; border: none !important; }
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a:hover { background: var(--cream-deep); color: var(--ink) !important; }
@media (max-width: 1050px) { .nav-dropdown-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; padding: 0; background: transparent; } .nav-dropdown-menu a { padding: 10px 20px !important; } .nav-dropdown-trigger .caret { display: none; } }
.nav-wrap { position: sticky; top: 0; z-index: 50; background: rgba(246,240,231,0.94); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border-bottom: 1px solid var(--line-soft); }
.nav { max-width: 1380px; margin: 0 auto; padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: inline-flex; align-items: center; height: 34px; flex-shrink: 0; }
.nav-logo img { height: 100%; width: auto; filter: brightness(0); }
.nav-menu { display: flex; gap: 26px; align-items: center; }
.nav-menu a { font-size: 15px; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; text-transform: none; position: relative; padding: 8px 0; transition: color 0.2s; }
.nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--bronze); transition: width 0.3s; }
.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.nav-menu a.active { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--cream) !important; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 13px 24px; border: 1px solid var(--ink); transition: background 0.25s, border-color 0.25s; }
.nav-cta:hover { background: var(--stahl); border-color: var(--stahl); }
.nav-cta::after { display: none; }
.hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.hamburger span { width: 22px; height: 1.5px; background: var(--ink); display: block; }
/* Handy-/Tabletmenue. Es haengt sich mit top:100% an die UNTERKANTE des
   Kopfes statt an einen festen Pixelwert. Vorher stand hier top:95px - ein
   Wert, der nur zu einer bestimmten Kopfhoehe passte: Seit der Kontakt-Knopf
   am Handy weg ist, ist der Kopf 66 px hoch, und zwischen ihm und dem
   geoeffneten Menue klaffte eine Luecke von 29 px. Mit dem Bezug auf .nav
   (position: relative) sitzt es bei jeder Kopfhoehe buendig. */
@media (max-width: 1050px) { .nav { padding: 16px 20px; position: relative; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--cream); flex-direction: column; gap: 0; padding: 24px; border-bottom: 1px solid var(--line); z-index: 49; max-height: 78vh; overflow-y: auto; padding-bottom: 80px; } .nav-menu.open { display: flex; } .nav-menu a { padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--line-soft); width: 100%; } .hamburger { display: flex; } }

/* Handy-Menue als Kachelraster statt langer Liste.
   ANSAGE AN 04.09.2026 (mit Bildschirmfoto von netz-westpfalz.de): "Dort ist
   ein Sensor, wenn man aufmacht gleich so kleine Bottoms (...) uebersichtlich
   und etwas kuerzer."
   Die Hauptpunkte bleiben volle Zeilen, ihre Untereintraege stehen zu zweit
   nebeneinander. Das spart bei 14 Eintraegen rund ein Drittel Hoehe, sodass
   das Menue ohne Scrollen auf einen Handybildschirm passt.
   padding-bottom faellt von 80 auf 24 px: Die 80 waren fuer die feste
   Kontaktleiste am unteren Rand gedacht, die seit dem 16.08.2026 ausgeblendet
   wird, solange das Menue offen ist. */
@media (max-width: 1050px) {
  .nav-menu { padding-bottom: 24px; }
  .nav-menu .nav-dropdown-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0 6px !important; }
  .nav-menu .nav-dropdown-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px !important; font-size: 12.5px; line-height: 1.3; border: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.45); }
  .nav-menu .nav-dropdown-trigger { font-weight: 600; }
}
.breadcrumb { max-width: 1100px; margin: 0 auto; padding: 18px 24px 0; font-size: 12.5px; color: var(--ink-mute); }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--bronze-deep); }
.breadcrumb .sep { margin: 0 8px; color: var(--line); }
.hero { background: var(--cream); padding: 72px 24px 56px; border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 800px; margin: 0 auto; }
.hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--bronze-deep); margin-bottom: 24px; }
.hero-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--bronze); flex-shrink: 0; }
/* Ueberschriftengewicht 12.08.2026 von 500 auf 600: In der Serifenschrift trug
   das Medium die Hierarchie, in einer Grotesk steht es zu nah am Fliesstext. */
.hero h1, .hero-buehne h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 52px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; }
.hero-lead { font-size: 18px; line-height: 1.75; color: var(--ink-soft); max-width: 680px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.knopf-reihe { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
/* Schnellzugriff unter der Hero-Buehne. Am Handy zwei Spalten, am Rechner
   eine Reihe. Mindesthoehe 48 px - es sind Bedienpunkte, keine Textlinks. */
.schnellzugriff { background: var(--cream-deep); border-bottom: 1px solid var(--line); padding: 14px 20px; }
.schnellzugriff-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.schnellzugriff a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.25; transition: all 0.2s; }
.schnellzugriff a:hover { border-color: var(--bronze); color: var(--bronze-deep); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
/* Handy (Befund B7, 26.09.2026): "Welche Treppe passt?" brach in zwei Zeilen, und
   bei fuenf Punkten stand der fuenfte allein in der letzten Reihe. Jetzt eine
   Zeile je Knopf und der letzte ueber die volle Breite, wenn die Zahl ungerade ist. */
@media (max-width: 760px) {
  .schnellzugriff-inner { grid-template-columns: 1fr 1fr; }
  .schnellzugriff a { white-space: nowrap; font-size: 13.5px; padding: 8px 6px; }
  .schnellzugriff-inner > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Unter 380 px passt "Betontreppe belegen" nicht mehr in eine halbe Zeile - dort
   darf wieder umgebrochen werden; minmax(0, 1fr), damit keine Spalte waechst. */
@media (max-width: 379px) {
  .schnellzugriff-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .schnellzugriff a { white-space: normal; }
}
/* Fahrzeiten als kompakte Reihe statt als Liste - siehe Begruendung in
   build/seiten/region/_fabrik.mjs. */
.fahrzeit-hinweis { font-size: 14px; color: var(--ink-mute); margin-bottom: 10px !important; }
.fahrzeit-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.fahrzeit { display: inline-flex; align-items: baseline; gap: 6px; background: var(--cream-light); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; color: var(--ink-soft); }
.fahrzeit b { color: var(--ink); font-weight: 600; }
.stats-band { background: var(--cream-light); border-bottom: 1px solid var(--line); padding: 32px 24px; }
.stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.stat-num { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 8px; }
.stat-lbl { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .stat-num { font-size: 21px; } }
.body-section { background: var(--white); padding: var(--abstand-eng) 24px; border-bottom: 1px solid var(--line); }
.body-inner { max-width: 760px; margin: 0 auto; }
.body-inner h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--ink); margin: 48px 0 16px; letter-spacing: -0.01em; line-height: 1.2; }
.body-inner h2:first-child { margin-top: 0; }
.body-inner h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 32px 0 10px; }
.body-inner p { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }
.body-inner p:last-child { margin-bottom: 0; }
.body-inner ul { margin: 0 0 16px 20px; }
/* Nummerierte Liste: Der globale Reset (*{margin:0;padding:0}) nimmt <ol> den
   Einzug. Bewusst padding-left statt margin-left – die Ziffern stehen in der
   Marker-Box LINKS vom Listenpunkt; ohne Innenabstand landen sie ausserhalb
   des Listenkastens und werden nicht angezeigt (im Browser gemessen,
   17.08.2026). Gebraucht seit dem Ablauf in fuenf Schritten auf /ueber-uns/. */
.body-inner ol { margin: 0 0 16px; padding-left: 24px; }
.body-inner li { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
.body-inner a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.body-inner a:hover { color: var(--ink); border-bottom-color: var(--bronze); }
.body-inner dl { margin: 24px 0; border: 1px solid var(--line); }
.body-inner dt { font-size: 15px; font-weight: 600; color: var(--ink); padding: 16px 20px 8px; line-height: 1.35; }
.body-inner dd { font-size: 14px; line-height: 1.75; color: var(--ink-soft); padding: 0 20px 16px; border-bottom: 1px solid var(--line-soft); }
.body-inner dd:last-child { border-bottom: none; }
/* Vorzeile: seit 26.09.2026 in normaler Schreibung statt 11-px-Versalien auf
   jeder Sektion (Befund B2); sie steht nur noch, wo sie etwas sagt, was die
   Ueberschrift nicht sagt (design-charakter.md). */
.section-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--bronze-deep); margin-bottom: 14px; }
.section-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--bronze); flex-shrink: 0; }
.section-title { font-family: var(--display); font-size: var(--h2); font-weight: 700; color: var(--ink); margin-bottom: 36px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.faq-section { background: var(--cream-light); padding: var(--abstand-eng) 24px; border-bottom: 1px solid var(--line); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.faq-item summary { font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; padding: 20px 52px 20px 24px; position: relative; list-style: none; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--bronze); font-weight: 300; transition: transform 0.2s; line-height: 1; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item .faq-answer { padding: 16px 24px 20px; font-size: var(--text-klein); line-height: 1.75; color: var(--ink-soft); border-top: 1px solid var(--line-soft); }
/* Verweise in Antworten sichtbar machen. Ohne diese Regel erben sie
   "a { color: inherit; text-decoration: none }" aus dem Grundgeruest und sind
   von Fliesstext nicht zu unterscheiden – die Verweise in die Tiefe der Seite
   waren damit praktisch wirkungslos. Gestaltung wie bei den uebrigen
   Inline-Verweisen (Bronze mit feiner Unterlinie). */
.faq-item .faq-answer a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.faq-item .faq-answer a:hover { color: var(--ink); border-bottom-color: var(--bronze); }
.cta-section { background: var(--cream-deep); padding: var(--abstand-weit) 24px; text-align: center; border-top: 1px solid var(--line); }
.cta-inner { max-width: 600px; margin: 0 auto; }
.cta-section h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 36px); font-weight: 600; color: var(--ink); margin-bottom: 20px; letter-spacing: -0.01em; overflow-wrap: anywhere; hyphens: auto; }
.cta-section p { font-size: var(--text); line-height: 1.75; color: var(--ink-soft); margin-bottom: 28px; }
.cta-btn { display: inline-block; background: var(--bronze-deep); color: var(--white) !important; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 18px 40px; transition: background 0.25s; }
.cta-btn:hover { background: var(--bronze-hell); }
/* Kurzes Beratungsformular im hellen Abschlussbereich (Ansage AN 16.08.2026).
   Eingabefelder mind. 48 px hoch – auf dem Handy muss der Daumen sie treffen. */
.beratung-formular { text-align: left; }
.beratung-formular label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.beratung-formular input, .beratung-formular textarea { width: 100%; min-height: 48px; background: var(--white); border: 1px solid #BBB0A2; border-radius: 2px; color: var(--ink); font-family: inherit; font-size: 16px; padding: 12px 14px; margin-bottom: 12px; }
.beratung-formular textarea { min-height: 72px; resize: vertical; }
.beratung-formular input::placeholder, .beratung-formular textarea::placeholder { color: #73695E; }
.beratung-formular input:focus, .beratung-formular textarea:focus { outline: 2px solid var(--bronze-glow); outline-offset: 1px; border-color: transparent; }
.beratung-formular .pflicht { color: var(--bronze-deep); }
.beratung-formular button { width: 100%; border: 0; font-family: inherit; cursor: pointer; margin-top: 4px; }
.beratung-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .beratung-reihe { grid-template-columns: 1fr; gap: 0; } }
.beratung-fuss { font-size: 12.5px !important; line-height: 1.65; color: var(--ink-soft) !important; margin: 16px 0 0 !important; }
/* Bedienelemente, die ohne JavaScript nichts tun, bleiben verborgen.
   !important, weil eigene display-Regeln sonst gegen [hidden] gewinnen. */
[hidden] { display: none !important; }
.beratung-fotos { margin: 4px 0 14px; }
/* 17.09.2026 (Audit vor der Umschaltung): '.beratung-formular input' setzt 100 %
   Breite und schlug diese Klasse - das unsichtbare Feld stand absolut positioniert
   mit voller Breite rechts neben seinem Block und schob die Seite 20 px (Handy)
   bzw. 340 px (Rechner) ueber den rechten Rand; am Handy wurde dadurch die ganze
   Seite minimal verkleinert dargestellt. Deshalb !important und clip. */
.beratung-fotos-feld { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px !important; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
/* Die Klasse allein verliert gegen '.beratung-formular label' (gleiche Zahl
   an Klassen, aber dort kommt ein Typ dazu) - der Knopf lief dadurch ueber
   die volle Breite und sah aus wie ein Eingabefeld. */
.beratung-formular label.beratung-fotos-knopf { display: inline-block; border: 1px solid rgba(185,122,64,0.55); border-radius: 2px; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; padding: 11px 20px; cursor: pointer; text-transform: none !important; margin: 0 !important; }
.beratung-fotos-knopf:hover { border-color: var(--bronze-glow); background: rgba(185,122,64,0.12); }
.beratung-fotos-feld:focus-visible + .beratung-fotos-knopf { outline: 2px solid var(--bronze-glow); outline-offset: 2px; }
.beratung-fotos-liste { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.beratung-fotos-liste.hat-bilder { color: var(--ink); }
.beratung-meldung { font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; padding: 11px 14px; border-radius: 2px; display: none; }
.beratung-meldung.sichtbar { display: block; }
.beratung-meldung.laeuft { background: var(--cream-light); color: var(--ink); }
.beratung-meldung.schlecht { background: #f9e6e0; border: 1px solid #d9a695; color: #6b2417; }
/* Helle Fassung derselben Bauteile fuer das grosse Formular auf /kontakt/. */
.anhang-fotos-knopf { cursor: pointer; }
.anhang-liste { display: block; font-size: 13px !important; color: var(--ink-mute) !important; margin: 12px 0 0 !important; }
.anhang-liste.hat-bilder { color: var(--ink) !important; font-weight: 600; }
.formular .beratung-meldung { color: var(--ink); }
.formular .beratung-meldung.laeuft { background: var(--cream); }
.formular .beratung-meldung.schlecht { background: #f9e6e0; border-color: #d9a695; color: #6b2417; }
/* ── Terminbuchung ─────────────────────────────────────────────────────── */
.termin-block { background: var(--cream); padding: var(--abstand-eng) 24px; }
.termin-inner { max-width: 760px; margin: 0 auto; }
.termin-vorspann { color: var(--ink-soft); line-height: 1.75; margin: 0 0 32px; }
.termin-formular { background: var(--white); border: 1px solid var(--line); border-radius: 3px; padding: 28px; }
.termin-schritt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze); margin: 0 0 12px; }
.termin-schritt:not(:first-child) { margin-top: 28px; }
.termin-kalender { border: 1px solid var(--line); border-radius: 3px; padding: 14px; }
.termin-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.termin-kopf strong { font-size: 16px; }
.termin-kopf button { width: 38px; height: 38px; border: 1px solid var(--line); background: transparent; border-radius: 3px; cursor: pointer; font-size: 16px; color: var(--ink); }
.termin-kopf button:disabled { opacity: 0.3; cursor: default; }
.termin-wochentage, .termin-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.termin-wochentage span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-mute); padding-bottom: 6px; }
.termin-tag { aspect-ratio: 1; min-height: 40px; border: 1px solid transparent; background: transparent; border-radius: 3px; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink); }
.termin-tag:hover:not(:disabled) { border-color: var(--bronze); }
.termin-tag:disabled { color: var(--ink-mute); opacity: 0.35; cursor: default; }
.termin-tag.leer { border: 0; cursor: default; }
.termin-tag.gewaehlt { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 700; }
.termin-hinweis { font-size: 12.5px; color: var(--ink-mute); margin: 10px 0 0; }
.termin-art { display: flex; gap: 10px; flex-wrap: wrap; }
.termin-artknopf { border: 1px solid var(--line); background: transparent; border-radius: 3px; padding: 12px 20px; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink); }
.termin-artknopf.gewaehlt { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 600; }
.termin-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.termin-zeit { border: 1px solid var(--line); background: transparent; border-radius: 3px; padding: 12px 6px; cursor: pointer; font-family: inherit; font-size: 15px; color: var(--ink); }
.termin-zeit:hover { border-color: var(--bronze); }
.termin-zeit.gewaehlt { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 700; }
.termin-auswahl { background: var(--cream); border-left: 3px solid var(--bronze); padding: 14px 16px; margin: 22px 0 0; font-size: 15px; }
.termin-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.termin-formular label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 5px; }
.termin-formular input, .termin-formular textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 3px; background: var(--white); font-family: inherit; font-size: 16px; color: var(--ink); padding: 12px 14px; margin-bottom: 14px; }
.termin-formular textarea { min-height: 84px; resize: vertical; }
.termin-formular .pflicht { color: var(--bronze); }
.termin-fehler { background: #f9e6e0; border: 1px solid #d9a695; color: #6b2417; border-radius: 3px; padding: 12px 14px; margin: 18px 0 0; font-size: 14px; }
.termin-senden { width: 100%; border: 0; cursor: pointer; margin-top: 6px; }
.termin-fuss { font-size: 12.5px; color: var(--ink-mute); line-height: 1.65; margin: 14px 0 0; }
@media (max-width: 640px) { .termin-reihe { grid-template-columns: 1fr; } .termin-formular { padding: 20px 16px; } }
/* 26.09.2026 (Befund B8): Hier stand rgba(246,240,231,0.8) - Schrift fuer
   einen dunklen Grund, 1,12:1 auf dem hellen Abschlussband. Eine einzige Regel
   fuer die Links, damit keine zweite, weiter unten stehende gewinnt.
   Darunter stand ausserdem ein Block, der Name und Telefon unter 600 px wieder
   nebeneinander stellte (Platzhalter abgeschnitten) - ersatzlos entfernt, es
   gilt die einspaltige Regel bei 620 px. build/kontrast.mjs prueft das. */
.beratung-fuss a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze-deep); text-underline-offset: 3px; }
.beratung-fuss a:hover { color: var(--bronze-deep); }
.btn-primary { display: inline-block; background: var(--ink); color: var(--white) !important; padding: 14px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; transition: background 0.25s; }
.btn-primary:hover { background: var(--stahl); }
/* font-family/cursor, damit die Klasse auch auf <button> passt (Datenschutz: Einwilligung aendern). */
.btn-secondary { display: inline-block; background: transparent; color: var(--ink) !important; border: 1px solid var(--ink); padding: 14px 28px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.btn-secondary:hover { background: var(--ink); color: var(--cream) !important; }
/* Dachmarken-Ergaenzungen */
.kachel-section { background: var(--cream); padding: var(--abstand-weit) 24px; border-bottom: 1px solid var(--line); }
.kachel-inner { max-width: 1100px; margin: 0 auto; }
.kachel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Vier Kacheln im Dreier-Raster ergaeben 3+1 – eine steht allein in der zweiten
   Reihe. Darum eine Vierer-Variante, gleiches Muster wie spalten4 bei referenzKarten. */
.kachel-grid.vier { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kachel-grid.vier .kachel { padding: 18px 0 0; }
@media (max-width: 980px) { .kachel-grid.vier { grid-template-columns: repeat(2, 1fr); } }
/* Linien statt Karten (design-charakter.md, Achse Kanten): kein Kasten, kein
   Schatten, kein Anheben - eine Bronze-Linie oben wie eine Anrisslinie. */
.kachel { display: flex; flex-direction: column; background: transparent; border: 0; border-top: 2px solid var(--bronze); padding: 20px 0 0; color: var(--ink); }
.kachel:hover .kachel-label, .kachel:focus-visible .kachel-label { text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 4px; }
/* Bildkachel: Das Foto traegt die Kachel, der Bronze-Strich oben entfaellt. */
.kachel-mit-bild { padding: 0; border-top: 0; }
.kachel-bild { display: block; overflow: hidden; }
.kachel-bild img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.45s ease; }
.kachel-mit-bild:hover .kachel-bild img { transform: scale(1.04); }
.kachel-mit-bild .kachel-text { display: flex; flex-direction: column; flex: 1; padding: 16px 0 0; }
.kachel:not(.kachel-mit-bild) .kachel-text { display: flex; flex-direction: column; flex: 1; }
.kachel:hover .kachel-label { color: var(--bronze-deep); }
.kachel-label { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.kachel-desc { font-size: var(--text-klein); color: var(--ink-soft); line-height: 1.55; flex: 1; }
.kachel-mehr { font-size: 14px; font-weight: 700; color: var(--bronze-deep); margin-top: 12px; }
/* BEFUND 04.09.2026 (Browser, 390 px): .kachel-grid wurde hier einspaltig,
   die Variante .vier aber nicht - fuer sie endete die Verkleinerung bei
   zwei Spalten (980 px). Zwei Kacheln zu je 204 px passen nicht in 390 px,
   /metallbau/ lief dadurch 22 px seitlich ueber. Beide Varianten gehoeren
   am Handy in eine Spalte. */
@media (max-width: 680px) { .kachel-grid, .kachel-grid.vier { grid-template-columns: 1fr; } }
.split-section { background: var(--white); padding: var(--abstand-weit) 24px; border-bottom: 1px solid var(--line); }
.split-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split-inner img { border: 1px solid var(--line); }
.split-foto { min-width: 0; }
.split-foto a { display: block; border-radius: var(--radius); }
.split-foto figcaption { padding-top: 12px; font-size: var(--text-klein); line-height: 1.55; color: var(--ink-mute); }
.split-text h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--ink); margin-bottom: 16px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.split-text p { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); margin-bottom: 14px; }
.split-text ul { margin: 0 0 16px 20px; }
.split-text li { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); margin-bottom: 4px; }
.hilfe-section { padding: var(--abstand-weit) 24px; background: var(--cream); border-bottom: 1px solid var(--line); }
.hilfe-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 3fr; gap: 64px; align-items: start; }
.hilfe-kopf p { font-size: var(--text); color: var(--ink-soft); line-height: 1.7; margin-top: 18px; }
.hilfe-stand { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 14px; color: var(--ink-mute); }
.hilfe-stand progress { width: 112px; height: 4px; border: 0; background: var(--line); accent-color: var(--bronze-deep); }
.hilfe-stand progress::-webkit-progress-bar { background: var(--line); }
.hilfe-stand progress::-webkit-progress-value { background: var(--bronze-deep); }
.treppenhilfe fieldset { border: 0; min-width: 0; margin-bottom: 28px; }
.treppenhilfe legend { font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 20px; }
.hilfe-wahl { display: flex; align-items: flex-start; gap: 14px; border: 1px solid var(--rand-bedien); border-radius: var(--radius); background: var(--white); padding: 16px; margin-bottom: 10px; cursor: pointer; }
.hilfe-wahl input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 4px; accent-color: var(--bronze-deep); }
.hilfe-wahl strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 600; }
.hilfe-wahl small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-mute); }
.hilfe-wahl:has(input:checked) { border-color: var(--ink); background: var(--cream-deep); box-shadow: inset 3px 0 var(--bronze-deep); }
.hilfe-wahl:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.hilfe-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hilfe-knoepfe button { min-height: 44px; cursor: pointer; font-family: inherit; }
.hilfe-ergebnis h3 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; margin: 12px 0; }
.hilfe-ergebnis p { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }
.hilfe-foto { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); background: var(--cream-deep); margin-bottom: 24px; }
.hilfe-foto img { width: 100%; height: 100%; object-fit: cover; }
.hilfe-ergebnis .hilfe-hinweis { font-size: 14px; color: var(--ink-mute); }
.hilfe-ergebnis .btn-primary { background: var(--bronze-deep); }
.hilfe-ergebnis .btn-primary:hover { background: var(--bronze-hell); }
.hilfe-section [hidden] { display: none; }
@media (max-width: 860px) { .hilfe-inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) { .hilfe-section { padding-left: 20px; padding-right: 20px; } .treppenhilfe legend { font-size: 23px; } .hilfe-wahl { padding: 14px; } }
@media (max-width: 860px) { .split-inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) { .split-foto { order: -1; } }
.ref-section { background: var(--cream-deep); padding: var(--abstand-weit) 24px; border-bottom: 1px solid var(--line); }
.ref-inner { max-width: 1100px; margin: 0 auto; }
/* minmax(0, 1fr) statt 1fr: Bei blossem "1fr" ist das Minimum die Inhaltsbreite,
   und ein langer Material-Chip wie "Nussbaum europaeisch geoelt" macht seine
   Spalte breiter als die anderen – dann sind auch die Bilder ungleich gross. */
.ref-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* Seit 26.09.2026 drei statt vier je Reihe: groessere Projektbilder (Briefing AN, Punkt 7). */
.ref-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ref-card { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s; }
.ref-card:hover { border-color: var(--bronze); }
.ref-card picture img, .ref-card > img, .ref-card-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* Bildbereich der Referenzkarte oeffnet die Diaschau des Projekts. */
/* flex: none, sonst streckt die Karte im Grid das Bild mit, sobald eine
   Nachbarkarte mehr Chips hat und die Zeile hoeher wird. */
.ref-card-bild { position: relative; display: block; width: 100%; flex: none; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.ref-card-bild img { transition: transform 0.35s; }
.ref-card-bild:hover img { transform: scale(1.04); }
.ref-card-bild:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }
.ref-bildzahl { position: absolute; right: 10px; bottom: 10px; background: rgba(20,18,16,.78); color: var(--cream); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; padding: 5px 10px; text-transform: uppercase; }
.ref-mehr { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--bronze-deep); border-bottom: 2px solid var(--bronze); }
.ref-mehr:hover { color: var(--ink); }
.ref-card-body { padding: 20px 22px 22px; }
.ref-ort { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 4px; }
.ref-meta { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; }
/* Material-Chip: sagt auf einen Blick, woraus die Stufen sind. Die Farbe folgt
   dem Werkstoff – Holz warm, Naturstein kuehl, Keramik/HIMACS anthrazit –, damit
   sich die Bauarten in einer Reihe von Karten optisch unterscheiden. */
.mat-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 11px; border: 1px solid; max-width: 100%; }
.mat-chip::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: currentColor; }
.mat-holz { color: #8a5f33; border-color: rgba(185,122,64,.45); background: rgba(185,122,64,.10); }
.mat-stein { color: #4a5560; border-color: rgba(74,85,96,.35); background: rgba(74,85,96,.08); }
.mat-mineral { color: #3b3b40; border-color: rgba(59,59,64,.35); background: rgba(59,59,64,.07); }
.mat-reihe { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ref-preis { font-size: 12.5px; color: var(--bronze-deep); font-weight: 600; margin-top: 8px; }
@media (max-width: 900px) { .ref-grid, .ref-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ref-grid, .ref-grid-4 { grid-template-columns: 1fr; } }
/* Kontaktformular. Bewusst grosszuegig gebaut: Es ist die einzige Stelle, an der
   aus einem Besucher eine Anfrage wird – enge Felder kosten Auftraege.
   font-size 16px bei den Feldern ist kein Zufall: Darunter zoomt iOS-Safari beim
   Antippen automatisch in die Seite hinein und der Besucher muss zurueckwischen. */
.formular { max-width: 760px; background: var(--cream-light); border: 1px solid var(--line); padding: 28px 30px 32px; }
.formular-legende { font-size: 13px; line-height: 1.6; color: var(--ink-mute); margin: 0; }
.formular-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.formular label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 22px 0 8px; }
.formular .pflicht { color: var(--bronze-deep); font-weight: 700; }
.formular input, .formular textarea, .formular select { width: 100%; border: 1px solid var(--line); background: var(--white); padding: 15px 16px; font-family: var(--body); font-size: 16px; line-height: 1.45; color: var(--ink); }
.formular textarea { min-height: 120px; resize: vertical; }
/* appearance:none + eigener Pfeil, damit das Auswahlfeld in jedem Browser genauso
   hoch und breit aussieht wie die Textfelder daneben. */
.formular select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23A98457' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.formular input::placeholder, .formular textarea::placeholder { color: #73695E; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 2px solid var(--bronze); outline-offset: -1px; }
/* :user-invalid statt :invalid – meldet erst, wenn der Besucher das Feld verlassen
   hat, nicht schon beim ersten Buchstaben. Aeltere Browser zeigen einfach nichts. */
.formular input:user-invalid, .formular textarea:user-invalid { border-color: #B4402F; }
.formular button { margin-top: 28px; cursor: pointer; border: none; padding: 17px 36px; font-size: 14px; }
.formular-fuss { font-size: 12.5px; line-height: 1.65; color: var(--ink-mute); margin-top: 16px; }
/* Fotofeld im grossen Formular. Reiht sich wie ein normales Feld ein.
   Das echte Dateiauswahl-Feld laesst sich nicht gestalten - es liegt deshalb
   unsichtbar, aber bedienbar hinter dem Label, das den sichtbaren Knopf abgibt
   (.beratung-fotos-feld, geteilt mit dem Abschlussband). Nicht display:none:
   damit verschwaende es auch fuer Tastatur und Screenreader. */
.formular-fotos { margin-top: 6px; }
.formular label.anhang-fotos-knopf { display: inline-block; margin: 0; cursor: pointer; text-transform: none; }
.beratung-fotos-feld:focus-visible + .anhang-fotos-knopf { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 620px) {
  .formular { padding: 24px 20px 28px; }
  .formular-reihe { grid-template-columns: 1fr; }
  .formular button { width: 100%; }
  /* Am Handy ueber die volle Breite - dort wird getippt, nicht gezielt. */
  .formular label.anhang-fotos-knopf { display: block; text-align: center; }
}
/* Projektanfrage zuerst, Terminwahl als eigenstaendige zweite Moeglichkeit. */
.kontakt-section { background: var(--white); padding: 64px 24px 72px; }
.kontakt-kopf, .kontakt-grid { max-width: 1100px; margin: 0 auto; }
.kontakt-kopf { margin-bottom: 44px; }
.kontakt-kopf h1 { max-width: 850px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; letter-spacing: -.035em; margin-bottom: 20px; }
.kontakt-kopf > p { max-width: 650px; color: var(--ink-soft); font-size: 17px; }
.kontakt-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; }
.kontakt-grid h2 { font-size: 24px; font-weight: 600; margin-bottom: 24px; }
.kontakt-direkt p { margin-bottom: 24px; color: var(--ink-soft); }
.kontakt-direkt a:not(.btn-secondary) { border-bottom: 1px solid var(--line); }
.kontakt-direkt .kontakt-telefon { font-size: 25px; color: var(--ink); }
.kontakt-direkt .knopf-reihe { display: flex; align-items: center; gap: 18px; }
.kontakt-textlink { display: inline-flex; align-items: center; min-height: 44px; }
.kontakt-adresse { padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.kontakt-anfrage { min-width: 0; }
.termin-option-wrap { background: var(--white); padding: 0 24px 64px; }
.termin-option { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.termin-option > summary { cursor: pointer; padding: 28px 52px 28px 0; position: relative; list-style: none; }
.termin-option > summary::-webkit-details-marker { display: none; }
.termin-option > summary::after { content: '+'; font-size: 28px; position: absolute; right: 16px; top: 24px; }
.termin-option[open] > summary::after { content: '−'; }
.termin-option > summary strong { display: block; font-size: 23px; font-weight: 600; }
.termin-option > summary span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.termin-option .termin-block { padding: 36px 24px; }
@media (max-width: 760px) {
  .kontakt-section { padding: 36px 20px 48px; }
  .kontakt-kopf { margin-bottom: 32px; }
  .kontakt-kopf > p { font-size: 16px; }
  .kontakt-grid { grid-template-columns: 1fr; gap: 28px; }
  .kontakt-grid h2 { margin-bottom: 16px; font-size: 22px; }
  .kontakt-direkt p { margin-bottom: 16px; }
  .kontakt-direkt .kontakt-adresse { display: none; }
  .kontakt-direkt .knopf-reihe { margin-top: 16px; }
  .kontakt-anfrage .formular { padding: 20px 16px 24px; }
  .termin-option-wrap { padding: 0 20px 48px; }
  .termin-option > summary strong { font-size: 20px; }
  .termin-option .termin-block { padding: 28px 0; }
}
.footer { background: var(--tief); color: rgba(246,240,231,0.7); padding: 36px 24px 20px; font-size: 13px; }
.footer a { color: rgba(246,240,231,0.7); }
.footer a:hover { color: var(--bronze-glow); }
.footer-grid { max-width: 1100px; margin: 0 auto 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze-glow); margin-bottom: 10px; }
.footer p, .footer li { font-size: 13px; line-height: 1.7; }
.footer ul { list-style: none; }
/* 17.09.2026: Listenlinks in der Fusszeile waren 17 px hoch und dicht gestapelt -
   Innenabstand hebt jede Tippflaeche auf rund 26 px, ohne die Liste zu strecken. */
.footer li a { display: inline-block; padding: 4px 0; margin: -2px 0; }
/* 05.10.2026 (Lighthouse, Tippflaeche): auch die Links im Kontaktabsatz (Telefon, Mobil, E-Mail) bekommen Innenabstand. */
.footer p a { display: inline-block; padding: 4px 0; margin: -2px 0; }
.footer-bottom { max-width: 1100px; margin: 0 auto; border-top: 1px solid rgba(185,122,64,0.15); padding-top: 14px; align-items: center; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(246,240,231,0.5); }
/* Am Handy zwei Spalten statt einer (Ansage AN 28.08.2026: "im unteren Teil
   aufgeraeumt, nicht so lang, vielleicht in zweier Reihe").
   Untereinander war der Fussbereich rund 1000 px hoch - man scrollte an drei
   Listen und vier Kanal-Knoepfen vorbei, bis das Ende kam. Die Anschrift steht
   ueber beide Spalten, weil Strasse und Ort sonst umbrechen; die beiden
   Linklisten stehen nebeneinander. */
@media (max-width: 760px) {
  .footer { padding: 28px 20px 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 20px; margin-bottom: 20px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer h3 { margin-bottom: 7px; }
  .footer p, .footer li { line-height: 1.6; }
  .social-block { padding-top: 18px; margin-bottom: 16px; }
  .social-block p { margin-bottom: 11px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
}
.social-links { display: inline-flex; align-items: center; gap: 12px; }
/* 17.09.2026: 15-px-Symbole ohne Rand waren 15 x 15 px Tippflaeche - unter der
   Daumengroesse. Innenabstand statt groesserem Symbol, Optik bleibt. */
.social-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 9px; margin: -9px 0; color: rgba(246,240,231,0.75); }
.social-links a:hover { color: var(--bronze-glow); }
.social-links svg { width: 15px; height: 15px; display: block; }
/* Kanalblock im Fussbereich. Die Knoepfe sind mindestens 44 px hoch – darunter
   trifft ein Daumen nicht zuverlaessig (Befund 17.08.2026: vorher 15 px). */
.social-block { max-width: 1100px; margin: 0 auto 22px; border-top: 1px solid rgba(185,122,64,0.15); padding-top: 22px; }
.social-block p { color: rgba(246,240,231,0.55); margin-bottom: 14px; }
.social-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.social-buttons a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(185,122,64,0.3); border-radius: 999px; color: rgba(246,240,231,0.85); font-size: 13px; line-height: 1; }
.social-buttons a:hover { color: var(--ink); background: var(--bronze-glow); border-color: var(--bronze-glow); }
.social-buttons svg { width: 18px; height: 18px; display: block; flex: none; }
@media (max-width: 760px) { .social-buttons a { flex: 1 1 calc(50% - 5px); justify-content: center; } }
/* Ein echtes Projektfoto traegt den Einstieg; der Verlauf sichert die Lesbarkeit. */
.hero-buehne { position: relative; isolation: isolate; background: var(--tief); color: #fff; }
.hero-buehne-grid { max-width: 1380px; margin: 0 auto; min-height: 640px; display: flex; align-items: flex-end; }
.hero-buehne-text { position: relative; z-index: 1; width: 100%; padding: 88px 48px 64px; }
.hero-buehne-bild { position: absolute; inset: 0; z-index: -2; }
.hero-buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--motiv, 50% 50%); }
.hero-buehne::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--schleier),.85), rgba(var(--schleier),.52) 45%, rgba(var(--schleier),.08) 100%); }
.hero-buehne h1 { color: #fff; max-width: 740px; font-size: clamp(38px, 4.8vw, 66px); letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.hero-buehne .hero-eyebrow { color: #fff; font-size: 14px; letter-spacing: .02em; }
.hero-buehne .hero-eyebrow::before { background: rgba(255,255,255,.7); }
.hero-buehne .hero-lead { max-width: 590px; font-size: 18px; color: rgba(255,255,255,.94); line-height: 1.65; }
.hero-buehne .btn-primary { background: var(--bronze-deep); color: var(--white) !important; }
.hero-buehne .btn-primary:hover { background: var(--bronze-hell); }
/* Absenden im grossen Formular auf /kontakt/ - wie im Anfragebereich eine wichtige Aktion (design-charakter.md). */
.formular .btn-primary { background: var(--bronze-deep); }
.formular .btn-primary:hover { background: var(--bronze-hell); }
.hero-buehne .btn-secondary { border-color: rgba(255,255,255,.7); color: #fff !important; }
.hero-buehne .btn-secondary:hover { background: rgba(255,255,255,.14); }
.hero-trust { display: flex; align-items: center; gap: 8px; margin-top: 26px; font-size: 12px; color: rgba(255,255,255,.88); flex-wrap: wrap; }
.hero-trust .sterne { color: #edc58d; letter-spacing: 1px; font-size: 14px; }
.hero-trust a { border-bottom: 1px solid rgba(255,255,255,.5); }
@media (max-width: 760px) {
  .hero-buehne-grid { min-height: 600px; }
  .hero-buehne-text { padding: 128px 20px 32px; }
  /* 26.09.2026 (Auftrag Optik, Kontrast im Browser gemessen): Vorzeile und H1
     lagen am Handy ueber dem hellen Teil des Fotos, schlechtester Pixel 2,3:1
     bzw. 2,7:1. Der Verlauf ist jetzt im Textbereich dichter; oben bleibt ein
     Streifen Foto frei. */
  .hero-buehne::after { background: linear-gradient(0deg, rgba(var(--schleier),.94), rgba(var(--schleier),.86) 50%, rgba(var(--schleier),.78) 70%, rgba(var(--schleier),.1) 100%); }
  .hero-buehne-bild img { object-position: var(--motiv-mobil, var(--motiv, 60% 50%)); }
  .hero-buehne h1 { font-size: clamp(32px, 8.7vw, 42px); margin-bottom: 20px; }
  .hero-buehne .hero-lead { font-size: 16px; }
  .hero-buehne .hero-eyebrow { margin-bottom: 14px; font-size: 13px; }
  .hero-buehne .hero-ctas { margin-top: 24px; gap: 10px; }
  .hero-buehne .hero-ctas a { padding: 13px 16px; font-size: 14.5px; }
  .hero-trust { margin-top: 18px; }
}
.bild-karten-section { background: var(--white); padding: var(--abstand-weit) 24px; border-top: 1px solid var(--line-soft); }
.bild-karten-inner { max-width: 1100px; margin: 0 auto; }
.bild-karten-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
.bild-karten-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weitere-bilder { margin-top: 32px; }
.weitere-bilder > summary { cursor: pointer; display: inline-block; min-height: 48px; padding: 13px 26px; border: 1px solid var(--ink); font-weight: 500; font-size: 15px; list-style: none; }
.weitere-bilder > summary::-webkit-details-marker { display: none; }
.weitere-bilder > summary::before { content: '+ '; }
.weitere-bilder[open] > summary::before { content: '\2212 '; }
.weitere-bilder > summary:hover { background: var(--ink); color: var(--cream); }
.weitere-bilder[open] > summary { margin-bottom: 28px; }
.bild-karte img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.bild-karte.bild-frei img { aspect-ratio: 4/3; object-fit: contain; background: #fefefe; }
.bild-karte figcaption { font-size: 14px; color: var(--ink-mute); line-height: 1.5; padding-top: 10px; }
@media (max-width: 900px) { .bild-karten-grid { grid-template-columns: repeat(2, 1fr); } }
.gebietskarte-section { background: var(--white); padding: var(--abstand-eng) 24px; border-top: 1px solid var(--line-soft); }
.gebietskarte-inner { max-width: 1100px; margin: 0 auto; }
.gebietskarte-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.gebietskarte-svg { width: 100%; height: auto; background: var(--cream); border: 1px solid var(--line); }
.gebietskarte-liste li { margin-bottom: 14px; list-style: none; }
.gebietskarte-liste a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); }
.gebietskarte-liste a:hover { color: var(--bronze-deep); }
.gebietskarte-liste span { display: block; font-size: 13px; color: var(--ink-mute); }
@media (max-width: 900px) { .gebietskarte-grid { grid-template-columns: 1fr; } }
.kontakt-leiste { display: none; }
@media (max-width: 960px) {
  /* env(safe-area-inset-bottom): auf iPhones liegt unten die Home-Leiste ueber
     der Seite. Ohne diesen Zuschlag klebt die Leiste darunter. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .kontakt-leiste { display: grid; grid-template-columns: 1fr 1fr 1.25fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .kontakt-leiste a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 15px 10px; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
  /* 16.08.2026 (Meldung AN, Bildschirmfoto vom Handy): Die Leiste (z-index 60)
     lag ueber dem geoeffneten Menue (z-index 49) und verdeckte dessen letzte
     Eintraege. Solange das Menue offen ist, tritt sie zurueck. */
  body:has(.nav-menu.open) .kontakt-leiste { display: none; }
  /* Gleiches Problem beim Einwilligungs-Banner (z-index 90): Es lag ueber dem
     offenen Menue und verdeckte dessen letzte Eintraege. Es tritt ebenfalls
     zurueck, solange das Menue offen ist, und kommt danach wieder. */
  body:has(.nav-menu.open) .einwilligung { display: none; }
  .kontakt-leiste .anrufen { background: var(--cream); color: var(--ink); }
  .kontakt-leiste .whatsapp { background: var(--ink); color: var(--white); }
  .kontakt-leiste .anfrage { background: var(--bronze-deep); color: var(--white); }
  /* 04.09.2026: Genau ab hier steht die feste Leiste mit "Anfrage stellen"
     am unteren Rand. Der Kontakt-Knopf oben im Kopf sagt dasselbe ein
     zweites Mal und kostet am Handy die halbe Kopfzeile - dieselbe Art
     Doppelung, die AN an der oberen Leiste beanstandet hat. Zwischen 960
     und 1050 px bleibt er stehen: Dort gibt es die feste Leiste noch nicht. */
  .nav-cta { display: none; }
}
/* Diaschau: Vorschaubild als Knopf, damit es mit Tastatur bedienbar ist. */
.bild-oeffnen { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.bild-oeffnen img { display: block; width: 100%; transition: transform 0.35s; }
.bild-karte { overflow: hidden; }
.bild-oeffnen:hover img { transform: scale(1.03); }
.bild-oeffnen:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.diaschau { position: fixed; inset: 0; z-index: 200; background: rgba(20,18,16,.94); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; }
.diaschau[hidden] { display: none; }
.dia-buehne { max-width: 1200px; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; }
.dia-buehne img { max-width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
.dia-buehne figcaption { color: var(--cream); font-size: 14.5px; text-align: center; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.dia-zaehler { color: var(--bronze-glow); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.dia-marke { color: var(--bronze-glow); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; width: 100%; }
.dia-marke[hidden] { display: none; }
.dia-pfeil, .dia-schliessen { background: rgba(255,255,255,.10); color: var(--cream); border: 1px solid rgba(255,255,255,.22); cursor: pointer; font-family: inherit; line-height: 1; flex: none; }
.dia-pfeil { width: 52px; height: 52px; font-size: 30px; }
.dia-pfeil:hover, .dia-schliessen:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.dia-schliessen { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; font-size: 26px; }
.dia-pfeil:focus-visible, .dia-schliessen:focus-visible { outline: 2px solid var(--bronze-glow); outline-offset: 2px; }
@media (max-width: 720px) {
  /* Auf dem Handy wird gewischt – die Pfeile wuerden nur das Bild verkleinern. */
  .diaschau { padding: 12px; }
  .dia-pfeil { display: none; }
  .dia-buehne img { max-height: 68vh; }
}
/* Die Kontaktleiste macht waehrend der Cookie-Auswahl Platz. */
.einwilligung { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--white); border-top: 2px solid var(--bronze); box-shadow: 0 -4px 20px rgba(34,28,22,.12); }
.einwilligung[hidden] { display: none; }
body.einwilligung-sichtbar .kontakt-leiste { display: none; }
/* 16.08.2026 (Meldung AN vom Handy): "unten sind manche Sachen ueberdeckt und
   man kann die nicht draufklicken". Zweite Ursache neben der Kontaktleiste:
   Solange das Banner steht, deckt es auf dem Handy die komplette Fusszeile zu -
   die Links darunter sind nicht erreichbar, bis jemand das Banner beantwortet.
   Deshalb bekommt die Seite so lange unten Platz in Bannerhoehe; die Hoehe
   setzt das Skript, weil sie vom Textumbruch abhaengt. */
body.einwilligung-sichtbar { padding-bottom: var(--einwilligung-hoehe, 220px); }
.einwilligung-inhalt { max-width: 1100px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.einwilligung-inhalt p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; flex: 1 1 420px; }
.einwilligung-inhalt a { color: var(--bronze-deep); border-bottom: 1px solid var(--line); }
.einwilligung-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 0 0 auto; }
/* Beide Knoepfe bewusst gleich gross und gleich auffaellig – Ablehnen darf
   nicht schwerer zu finden sein als Zustimmen. */
.einwilligung-knoepfe button { flex: 1 1 0; min-height: 44px; font-family: inherit; font-size: 13px; font-weight: 600; padding: 10px 18px; border: 1px solid var(--rand-bedien); background: var(--white); color: var(--ink); cursor: pointer; white-space: nowrap; }
.einwilligung-knoepfe button:hover { background: var(--cream-deep); }
@media (max-width: 960px) {
  .einwilligung-inhalt { padding: 12px 16px; gap: 10px; }
  .einwilligung-inhalt p { font-size: 14px; line-height: 1.5; }
  .einwilligung-knoepfe { width: 100%; }
  .einwilligung-knoepfe button { padding: 10px; }
}
.mini-cta { max-width: 1100px; margin: 0 auto; padding: 0 24px 56px; }
.mini-cta-box { background: var(--cream-deep); border-left: 3px solid var(--bronze); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mini-cta-box p { font-size: 15px; color: var(--ink-soft); margin: 0; }
.galerie-band { background: var(--ink); padding: 6px 0; }
.galerie-band-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.galerie-band img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
@media (max-width: 900px) { .galerie-band-grid { grid-template-columns: repeat(3, 1fr); } .galerie-band-grid img:nth-child(n+4) { display: none; } }
.bewertungen-section { background: var(--cream); padding: var(--abstand-weit) 24px; }
.bewertungen-inner { max-width: 1100px; margin: 0 auto; }
.bewertungen-kopf { background: transparent; padding: 0 0 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.bewertungen-sterne { color: var(--bronze); font-size: 18px; letter-spacing: 2px; }
.bewertungen-wert { font-size: 22px; font-weight: 700; color: var(--ink); }
.bewertungen-quelle { font-size: 13px; color: var(--ink-mute); }
/* Spaltenfluss statt Raster.
   BEFUND 17.08.2026 (im Browser bei 1280 px gemessen): Im Raster zwingt die
   hoechste Karte einer Zeile die beiden anderen auf ihre Hoehe. Eine Bewertung
   ist 751 Zeichen lang, die uebrigen rund 240 - dadurch standen neben ihr zwei
   Karten mit je rund 300 px leerer Flaeche, und der Block war unnoetig hoch.
   Mit columns ist jede Karte nur so hoch wie ihr eigener Text. Die Lesereihen-
   folge laeuft dann spaltenweise statt zeilenweise, was bei nebeneinander
   stehenden Kundenstimmen ohne Rangfolge nicht stoert. */
.bewertungen-grid { columns: 3; column-gap: 20px; }
.bewertung-card { background: transparent; color: var(--ink-soft); border-left: 1px solid var(--line); padding: 8px 24px; display: flex; flex-direction: column; gap: 14px; break-inside: avoid; margin-bottom: 20px; }
.bewertung-card .bewertungen-sterne { font-size: 15px; }
/* Auf neun Zeilen begrenzt, sichtbar mit "..." gekuerzt.
   Eine der sechs Google-Bewertungen ist 751 Zeichen lang, die uebrigen rund
   240. Ungekuerzt macht sie den Block fast doppelt so hoch wie noetig, und
   gelesen wird eine Textwand ohnehin nicht. Gekuerzt wird nur die Anzeige -
   der vollstaendige Text steht hinter "Alle Bewertungen ansehen" im
   Google-Profil, das oben im Kopf des Blocks verlinkt ist. */
.bewertung-text { font-size: var(--text-klein); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.bewertung-name { font-size: 13px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .bewertungen-grid { columns: 2; } }
@media (max-width: 600px) { .bewertungen-grid { columns: 1; } }
.video-section { background: var(--cream); padding: var(--abstand-eng) 24px; }
.video-inner { max-width: 1100px; margin: 0 auto; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.video-grid.eins { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }
.video-karte { background: var(--white); border: 1px solid var(--line); }
.video-buehne { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--ink); color: var(--cream); display: block; border: 0; padding: 0; cursor: pointer; overflow: hidden; }
.video-buehne img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .72; transition: opacity .25s, transform .25s; }
.video-buehne:hover img { opacity: .85; transform: scale(1.03); }
.video-buehne .video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-buehne .video-play span { width: 64px; height: 64px; border-radius: 50%; background: rgba(185,122,64,.94); display: flex; align-items: center; justify-content: center; transition: transform .25s; }
.video-buehne:hover .video-play span { transform: scale(1.08); }
.video-buehne .video-play svg { width: 22px; height: 22px; margin-left: 3px; fill: #fff; }
.video-karte-text { padding: 18px 22px 22px; }
.video-karte-text h3 { font-size: 17px; margin: 0 0 6px; }
.video-karte-text p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.video-hinweis { font-size: 12.5px; color: var(--ink-mute); margin-top: 18px; line-height: 1.6; }
/* Hochkant (YouTube-Shorts, 9:16). Alle Videos des Kanals sind Shorts – in der
   16:9-Buehne stuende jedes zwischen zwei breiten schwarzen Balken und fuellte
   nur ein Drittel der Kartenbreite. Darum eine eigene, schmalere Bahn. */
.video-grid.hochkant { grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 840px; margin: 0 auto; }
.video-grid.hochkant.zwei { grid-template-columns: repeat(2, 1fr); max-width: 566px; }
.video-grid.hochkant.eins { grid-template-columns: 1fr; max-width: 292px; }
.video-grid.hochkant .video-buehne { aspect-ratio: 9/16; }
.video-grid.hochkant .video-karte-text { padding: 14px 16px 18px; }
.video-grid.hochkant .video-karte-text h3 { font-size: 15px; }
.video-grid.hochkant .video-play span { width: 52px; height: 52px; }
@media (max-width: 900px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-grid.hochkant { grid-template-columns: repeat(2, 1fr); max-width: 440px; }
}
@media (max-width: 520px) { .video-grid.hochkant, .video-grid.hochkant.zwei { grid-template-columns: minmax(0, 1fr); max-width: 280px; } }
.gal-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; }
.gal-filter button { font: inherit; font-size: 13.5px; padding: 9px 18px; border: 1px solid var(--line); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: all .18s; }
.gal-filter button:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.gal-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.gal-projekt { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 44px; }
.gal-projekt:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.gal-projekt.aus { display: none; }
.gal-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.gal-kopf h3 { font-size: 21px; margin: 0; }
.gal-ort { font-size: 13px; color: var(--bronze-deep); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.gal-text { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; margin: 0 0 14px; max-width: 70ch; }
.gal-daten { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.gal-daten li { font-size: 12.5px; color: var(--ink-soft); background: var(--cream-deep); padding: 5px 12px; }
.gal-daten li b { color: var(--ink); font-weight: 600; }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gal-grid button { padding: 0; border: 0; background: var(--ink); cursor: zoom-in; display: block; overflow: hidden; }
.gal-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .3s, opacity .3s; }
.gal-grid button:hover img { transform: scale(1.05); opacity: .9; }
.gal-grid button.aus { display: none; }
.gal-mehr { margin-top: 14px; font-size: 13.5px; color: var(--bronze-deep); background: none; border: 0; border-bottom: 1px solid var(--bronze); padding: 0 0 2px; cursor: pointer; font-family: inherit; }
.lightbox { position: fixed; inset: 0; background: rgba(20,18,16,.94); display: none; align-items: center; justify-content: center; z-index: 999; padding: 24px; }
.lightbox.auf { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; object-fit: contain; }
.lightbox-bu { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(246,240,231,.92); font-size: 13.5px; text-align: center; max-width: 80%; line-height: 1.6; }
.lightbox-zu, .lightbox-nav { position: absolute; background: none; border: 0; color: var(--cream); font-size: 34px; cursor: pointer; padding: 10px 16px; line-height: 1; }
.lightbox-zu { top: 10px; right: 14px; }
.lightbox-nav.vor { right: 6px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.zur { left: 6px; top: 50%; transform: translateY(-50%); }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .gal-kopf h3 { font-size: 18px; } }
/* Am Handy schrumpfen die Abschnitts-Innenabstaende.
   BEFUND 17.08.2026 (AN: "der Abstand stimmt nicht"): Jeder Abschnitt trug fest
   "padding: 72px 24px" - auf 390 px Breite genauso wie auf 1280 px. Bei elf
   Abschnitten der Startseite waren das rund 1600 px reiner Leerraum, durch den
   man sich scrollen musste.
   Der Block steht ganz am ENDE von BASIS_CSS: Eine @media-Regel erhoeht die
   Spezifitaet NICHT, also gewinnt bei Gleichstand die spaetere Regel. Weiter
   oben eingefuegt blieb er wirkungslos - im Browser nachgemessen standen dort
   weiterhin 72 px. */
@media (max-width: 760px) {
  .body-section, .faq-section, .cta-section, .kachel-section,
  .split-section, .ref-section, .bild-karten-section, .gebietskarte-section,
  .bewertungen-section, .video-section { padding-left: 20px; padding-right: 20px; }
  .section-title { margin-bottom: 26px; }
}
/* Abstand und Flaeche je Aufruf (sektionArt in bausteine.mjs, design-charakter.md).
   Mit Typ-Selektor, damit sie die Voreinstellung der Sektionsklasse schlagen,
   gleich wo sie im Stylesheet stehen. */
section.sektion-eng { padding-top: var(--abstand-eng); padding-bottom: var(--abstand-eng); }
section.sektion-weit { padding-top: var(--abstand-weit); padding-bottom: var(--abstand-weit); }
section.flaeche-weiss { background: var(--white); }
section.flaeche-creme { background: var(--cream); }
section.flaeche-hell { background: var(--cream-light); }
section.flaeche-tief { background: var(--cream-deep); }
/* Hauptkachel: die wichtigste Leistung doppelt so gross (Befund B6). Bei sechs
   Kacheln ergibt das ein volles 3x3-Raster: Hauptkachel 2x2, zwei daneben,
   drei darunter. */
.kachel-grid.mit-haupt .kachel-haupt { grid-column: span 2; grid-row: span 2; }
.kachel-haupt .kachel-bild { flex: 1; position: relative; width: 100%; min-height: 320px; }
/* Das Foto fuellt die Flaeche, bestimmt aber nicht die Hoehe - die kommt aus den
   beiden Kacheln daneben. Sonst dehnt das Hochformat das ganze Raster. */
.kachel-haupt .kachel-bild picture, .kachel-haupt .kachel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kachel-haupt .kachel-bild img { aspect-ratio: auto; }
.kachel-haupt .kachel-label { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
/* Die Beschreibung waechst in der Hauptkachel nicht mit - sonst teilen sich Foto
   und Text den freien Platz, und zwischen Text und Linktext klafft eine Luecke
   (gesehen am 26.09.2026 bei 1440 px). Den Platz nimmt allein das Foto. */
.kachel-haupt .kachel-desc, .kachel-haupt .kachel-text { flex: none; }
@media (max-width: 680px) {
  .kachel-grid.mit-haupt .kachel-haupt { grid-column: auto; grid-row: auto; }
  .kachel-haupt .kachel-bild { min-height: 0; aspect-ratio: 4/3; flex: none; }
}
/* Arbeitsbeispiele mit Hauptbild (Befund B3): erstes Foto 2x2, sechs Fotos
   fuellen dann ein 3x3-Raster. Bei zwei Spalten ueber die volle Breite; das
   sechste Foto entfaellt dort, sonst stuende es allein in der letzten Reihe. */
.bild-karten-grid.mit-hauptbild > .bild-karte:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.bild-karten-grid.mit-hauptbild > .bild-karte:first-child a { flex: 1; display: block; position: relative; width: 100%; min-height: 320px; }
.bild-karten-grid.mit-hauptbild > .bild-karte:first-child picture, .bild-karten-grid.mit-hauptbild > .bild-karte:first-child img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bild-karten-grid.mit-hauptbild > .bild-karte:first-child img { aspect-ratio: auto; }
@media (max-width: 900px) {
  .bild-karten-grid.mit-hauptbild > .bild-karte:first-child { grid-row: auto; }
  .bild-karten-grid.mit-hauptbild > .bild-karte:first-child a { min-height: 0; aspect-ratio: 4/3; flex: none; }
  .bild-karten-grid.mit-hauptbild > .bild-karte:nth-child(6):last-child { display: none; }
}
/* Ablauf in Schritten mit Foto. */
.schritte-section { background: var(--cream-light); padding: var(--abstand-eng) 24px; border-bottom: 1px solid var(--line); }
.schritte-inner { max-width: 1100px; margin: 0 auto; }
.schritte-liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: none; }
.schritt img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }
.schritt-nr { display: block; font-size: 15px; font-weight: 700; color: var(--bronze-deep); margin: 18px 0 6px; padding-top: 10px; border-top: 2px solid var(--bronze); width: 32px; }
.schritt h3 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.schritt p { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); }
@media (max-width: 860px) { .schritte-liste { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 760px) { .schritte-section { padding-left: 20px; padding-right: 20px; } }
/* Das Werkstatt-Band (design-charakter.md): die einzige dunkle Inhaltsflaeche.
   Foto randlos links (7/12), Fakten rechts; am Handy Foto oben. Keine Bewegung. */
.werkstatt-band { background: var(--tief); color: var(--cream); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
.werkstatt-band-bild { position: relative; margin: 0; min-height: 460px; width: 100%; }
.werkstatt-band-bild picture, .werkstatt-band-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.werkstatt-band-bild img { object-fit: cover; object-position: var(--motiv, 50% 45%); }
.werkstatt-band-bild figcaption { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--cream-deep); font-size: 14px; line-height: 1.5; padding: 10px 16px; max-width: 80%; }
.werkstatt-band-text { padding: var(--abstand-weit) 48px; max-width: 580px; align-self: center; }
.werkstatt-band-text h2 { font-family: var(--display); font-size: var(--h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--cream); margin-bottom: 18px; text-wrap: balance; }
.werkstatt-band-text p { font-size: var(--text); line-height: 1.7; color: var(--cream-deep); margin-bottom: 28px; }
.werkstatt-band-text p + p, .werkstatt-band-text ul + p { margin-top: -12px; }
.werkstatt-band-text ul { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; }
.werkstatt-band-text li { font-size: var(--text-klein); line-height: 1.6; color: var(--cream-deep); padding-left: 18px; position: relative; }
.werkstatt-band-text li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--bronze-glow); }
.werkstatt-band-text strong { color: var(--cream); }
.werkstatt-band-text a:not(.werkstatt-link) { color: var(--cream); text-decoration: underline; text-decoration-color: var(--bronze-glow); text-underline-offset: 3px; }
.werkstatt-fakten { display: grid; gap: 18px; margin: 0 0 30px; }
.werkstatt-fakten div { border-top: 1px solid rgba(217,167,105,.45); padding-top: 12px; display: grid; grid-template-columns: 124px 1fr; gap: 16px; align-items: baseline; }
.werkstatt-fakten dt { font-size: 22px; font-weight: 700; color: var(--bronze-glow); letter-spacing: -0.01em; }
.werkstatt-fakten dd { font-size: var(--text-klein); line-height: 1.55; color: var(--cream-deep); }
.werkstatt-link { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px; border: 1px solid var(--bronze-glow); border-radius: var(--radius); color: var(--cream); font-weight: 600; font-size: 15px; }
.werkstatt-link:hover, .werkstatt-link:focus-visible { background: var(--bronze-glow); color: var(--ink); }
@media (max-width: 900px) {
  .werkstatt-band { grid-template-columns: 1fr; }
  .werkstatt-band-bild { min-height: 0; aspect-ratio: 3/2; }
  .werkstatt-band-text { padding: 40px 20px 56px; max-width: none; }
  .werkstatt-fakten div { grid-template-columns: 104px 1fr; }
}
/* ---- Manufaktur-Ausbau (Briefing AN 26.09.2026). Grosse echte Bilder,
   dunkle Flaechen als Anker, Cognac nur als Akzent. Werte aus den Tokens. */
.hero-buehne.gross .hero-buehne-grid { min-height: min(88vh, 880px); }
.hero-buehne.gross .hero-buehne-text { padding-bottom: 56px; }
.hero-buehne.gross::after { background: linear-gradient(90deg, rgba(var(--schleier),.84), rgba(var(--schleier),.5) 46%, rgba(var(--schleier),.06) 100%), linear-gradient(0deg, rgba(var(--schleier),.6), rgba(var(--schleier),0) 38%); }
.hero-buehne.gross h1 { font-size: clamp(40px, 5.4vw, 76px); max-width: 860px; letter-spacing: -.035em; }
.hero-buehne.gross .hero-lead { font-size: 20px; line-height: 1.55; max-width: 600px; }
.hero-vertrauen { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 16px 44px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.24); max-width: 900px; }
.hero-vertrauen > div { display: flex; flex-direction: column; gap: 3px; }
.hero-vertrauen .stat-num, .hero-vertrauen .merkmal-titel { display: block; font-size: 24px; font-weight: 700; color: var(--white); margin: 0; letter-spacing: -0.01em; line-height: 1.1; }
.hero-vertrauen .stat-lbl { font-size: 13.5px; line-height: 1.4; color: rgba(255,252,246,.86); }
.hero-vertrauen a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.hero-vertrauen .sterne { color: var(--bronze-glow); font-size: 15px; letter-spacing: 1px; margin-left: 4px; }
@media (max-width: 760px) {
  .hero-buehne.gross .hero-buehne-grid { min-height: 0; }
  .hero-buehne.gross .hero-buehne-text { padding: 64px 20px 28px; }
  .hero-buehne.gross::after { background: linear-gradient(0deg, rgba(var(--schleier),.94), rgba(var(--schleier),.86) 65%, rgba(var(--schleier),.72) 85%, rgba(var(--schleier),.25) 100%); }
  .hero-buehne.gross h1 { font-size: clamp(30px, 8.2vw, 40px); margin-bottom: 16px; }
  .hero-buehne.gross .hero-lead { font-size: 16px; }
  .hero-buehne.gross .hero-ctas { margin-top: 18px; }
  .hero-buehne.gross .hero-ctas a { padding: 12px; font-size: 14px; }
  .hero-vertrauen { grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 30px; padding-top: 18px; }
  .hero-vertrauen .stat-num, .hero-vertrauen .merkmal-titel { font-size: 20px; }
}

.bauarten-section { background: var(--cream); padding: var(--abstand-weit) 24px; border-bottom: 1px solid var(--line); }
.bauarten-inner { max-width: 1240px; margin: 0 auto; }
.bauarten-kopf { max-width: 720px; margin-bottom: 52px; }
.bauarten-kopf .section-title { margin-bottom: 16px; }
.bauarten-einleitung { font-size: var(--text); line-height: 1.7; color: var(--ink-soft); }
.bauarten-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 64px 28px; }
.bauart { grid-column: span 2; display: flex; flex-direction: column; color: var(--ink); }
.bauart.breit { grid-column: span 3; }
.bauart-bild { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; background: var(--cream-deep); }
.bauart.breit .bauart-bild { aspect-ratio: 4 / 3; }
.bauart-bild picture, .bauart-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bauart-bild img { object-fit: cover; object-position: var(--motiv, 50% 50%); }
.bauart-text { display: flex; flex-direction: column; flex: 1; padding-top: 22px; }
.bauart h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.bauart-claim { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ink); margin-bottom: 8px; }
.bauart-desc { font-size: 16px; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.bauart-mehr { align-self: flex-start; margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--bronze-deep); text-decoration: underline; text-decoration-color: var(--bronze); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bauart:hover .bauart-mehr, .bauart:focus-visible .bauart-mehr { color: var(--ink); }
.bauart-haupt { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.bauart-haupt .bauart-bild { aspect-ratio: 1 / 1; }
.bauart-haupt .bauart-text { padding: 0; flex: none; }
.bauart-haupt h3 { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.025em; margin-bottom: 14px; }
.bauart-haupt .bauart-claim { font-size: 22px; margin-bottom: 14px; }
.bauart-haupt .bauart-desc { font-size: var(--text); flex: none; }
@media (max-width: 900px) {
  .bauarten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; }
  .bauart, .bauart.breit { grid-column: span 1; }
  .bauart:last-child:nth-child(even) { grid-column: 1 / -1; }
  .bauart-haupt { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 24px; }
  .bauart-haupt .bauart-bild { aspect-ratio: 4 / 3; }
}
@media (max-width: 620px) {
  .bauarten-raster { grid-template-columns: 1fr; gap: 44px; }
  .bauart-bild, .bauart.breit .bauart-bild { aspect-ratio: 4 / 3; }
  .bauart h3 { font-size: 24px; }
  .bauarten-kopf { margin-bottom: 36px; }
}

.werkstatt-mosaik { background: var(--tief); color: var(--cream); padding: var(--abstand-weit) 24px; }
.wm-inner { max-width: 1240px; margin: 0 auto; }
.wm-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; margin-bottom: 52px; }
.werkstatt-mosaik .section-eyebrow { color: var(--bronze-glow); }
.werkstatt-mosaik .section-eyebrow::before { background: var(--bronze-glow); }
.wm-kopf h2 { font-size: clamp(38px, 5.2vw, 68px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--white); text-wrap: balance; }
.wm-lead { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--bronze-glow); margin-bottom: 12px; }
.wm-kopf p:not(.wm-lead) { font-size: var(--text); line-height: 1.7; color: var(--cream-deep); }
.wm-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 230px; gap: 16px; }
.wm-raster figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--stahl); grid-column: span 4; }
.wm-raster .wm-1 { grid-column: 1 / span 7; grid-row: span 2; }
.wm-raster .wm-2, .wm-raster .wm-3 { grid-column: span 5; }
.wm-raster picture, .wm-raster img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wm-raster img { object-fit: cover; object-position: var(--motiv, 50% 50%); }
.wm-raster figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px; font-size: 14px; line-height: 1.45; color: var(--cream-light); background: linear-gradient(0deg, rgba(var(--schleier),.9), rgba(var(--schleier),0)); }
.wm-fuss { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: 44px; }
.wm-fuss .werkstatt-fakten { flex: 1 1 640px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.wm-fuss .werkstatt-fakten div { display: block; }
.wm-fuss .werkstatt-fakten dt { margin-bottom: 4px; }
@media (max-width: 900px) {
  .wm-kopf { grid-template-columns: 1fr; margin-bottom: 36px; }
  .wm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 10px; }
  .wm-raster figure, .wm-raster .wm-2, .wm-raster .wm-3 { grid-column: span 1; }
  .wm-raster .wm-1 { grid-column: 1 / -1; grid-row: span 2; }
  .wm-raster figure:last-child:nth-child(even) { grid-column: 1 / -1; }
  .wm-raster figcaption { font-size: 12.5px; padding: 28px 10px 8px; }
  .wm-fuss .werkstatt-fakten { grid-template-columns: 1fr 1fr; flex-basis: 100%; }
}

.magazin-section { background: var(--white); padding: var(--abstand-weit) 0; border-bottom: 1px solid var(--line); }
.magazin-kopf { max-width: 1240px; margin: 0 auto 44px; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.magazin-kopf .section-title { margin-bottom: 12px; }
.magazin-hinweis { font-size: var(--text); line-height: 1.65; color: var(--ink-soft); max-width: 640px; }
.magazin-links { display: flex; flex-wrap: wrap; gap: 12px; }
.magazin-reihe { max-width: 1240px; margin: 0 auto 36px; padding: 0 24px; display: grid; gap: 28px; }
.magazin-weitere { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.magazin-reihe.gross-zwei { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.magazin-reihe.zwei-gross { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.magazin-reihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.magazin-stapel { display: grid; grid-template-rows: 1fr 1fr; gap: 28px; }
.mag-bild { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.mag-bild a { position: relative; display: block; width: 100%; flex: 1; min-height: 280px; overflow: hidden; border-radius: var(--radius); background: var(--cream-deep); }
.mag-bild picture, .mag-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mag-bild img { object-fit: cover; object-position: var(--motiv, 50% 50%); }
.gross-zwei > .mag-bild a, .zwei-gross > .mag-bild a { min-height: 680px; }
.magazin-reihe.zwei .mag-bild a { min-height: 0; aspect-ratio: 4 / 3; flex: none; }
.mag-bild figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
.mag-titel { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.mag-fakten { font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); }
.magazin-reihe.breit { max-width: none; padding: 0; margin: 56px 0; }
.breit .mag-bild { position: relative; }
.breit .mag-bild a { border-radius: 0; min-height: 0; aspect-ratio: 21 / 9; flex: none; }
.breit .mag-bild figcaption { position: absolute; left: max(24px, calc((100% - 1240px) / 2 + 24px)); bottom: 28px; max-width: min(460px, calc(100% - 48px)); padding: 14px 18px; border-radius: var(--radius); background: var(--tief); }
.breit .mag-titel { color: var(--white); }
.breit .mag-fakten { color: var(--cream-deep); }
@media (max-width: 900px) {
  .magazin-reihe.gross-zwei, .magazin-reihe.zwei-gross { grid-template-columns: 1fr; }
  .zwei-gross > .magazin-stapel { order: 2; }
  .gross-zwei > .mag-bild a, .zwei-gross > .mag-bild a { min-height: 0; aspect-ratio: 4 / 5; flex: none; }
  .magazin-stapel { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 16px; }
  .magazin-stapel .mag-bild a { min-height: 0; aspect-ratio: 1 / 1; flex: none; }
  .breit .mag-bild a { aspect-ratio: 4 / 3; }
  .breit .mag-bild figcaption { position: static; max-width: none; margin: 0; border-radius: 0; padding: 14px 24px; }
}
@media (max-width: 560px) {
  .magazin-reihe { gap: 20px; margin-bottom: 28px; }
  .magazin-reihe.zwei { grid-template-columns: 1fr; }
}

.spezial-section { background: var(--stahl); color: var(--cream); padding: var(--abstand-weit) 24px; }
.spezial-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.spezial-bild { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1 / 1; }
.spezial-bild picture, .spezial-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spezial-bild img { object-fit: cover; }
.spezial-section .section-eyebrow { color: var(--bronze-glow); }
.spezial-section .section-eyebrow::before { background: var(--bronze-glow); }
.spezial-text h2 { font-size: var(--h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--white); margin-bottom: 20px; text-wrap: balance; }
.spezial-text p { font-size: var(--text); line-height: 1.7; color: var(--cream-deep); margin-bottom: 14px; }
.spezial-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.btn-hell { display: inline-flex; align-items: center; min-height: 48px; padding: 13px 26px; border-radius: var(--radius); background: var(--cream); color: var(--ink); font-size: 15px; font-weight: 700; transition: background .2s; }
.btn-hell:hover, .btn-hell:focus-visible { background: var(--white); }
.spezial-neben { margin-top: 30px !important; padding-top: 20px; border-top: 1px solid rgba(255,252,246,.16); font-size: 15px !important; }
.spezial-neben a { color: var(--bronze-glow); text-decoration: underline; text-underline-offset: 3px; }
.spezial-neben a:hover { color: var(--white); }
.spezial-section :focus-visible, .werkstatt-mosaik :focus-visible { outline-color: var(--cream); }
@media (max-width: 900px) {
  .spezial-inner { grid-template-columns: 1fr; gap: 32px; }
}

.anfrage-section { text-align: left; }
.anfrage-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.anfrage-section h2 { font-size: clamp(34px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: 20px; text-wrap: balance; }
.anfrage-section .anfrage-text p { font-size: 19px; line-height: 1.6; margin-bottom: 28px; }
.whatsapp-knopf { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 24px; border-radius: var(--radius); background: var(--ink); color: var(--white); font-size: 16px; font-weight: 700; transition: background .2s; }
.whatsapp-knopf:hover { background: var(--stahl); }
.whatsapp-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.anfrage-section .anfrage-telefon { font-size: 15px; margin: 20px 0 0; }
.anfrage-telefon a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--bronze); text-underline-offset: 3px; }
.anfrage-section .beratung-formular { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-soft); }
.beratung-formular select { width: 100%; min-height: 48px; background: var(--white); border: 1px solid var(--rand-bedien); border-radius: var(--radius-klein); color: var(--ink); font-family: inherit; font-size: 16px; padding: 10px 14px; margin-bottom: 12px; }
.beratung-formular select:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.beratung-formular .optional { font-weight: 400; color: var(--ink-mute); }
.anfrage-section .cta-btn { min-height: 56px; font-size: 17px; }
@media (max-width: 900px) {
  .anfrage-inner { grid-template-columns: 1fr; gap: 32px; }
  .anfrage-section .beratung-formular { padding: 22px 18px; }
  .anfrage-section .anfrage-text p { font-size: 17px; }
  .whatsapp-knopf { width: 100%; justify-content: center; }
}

/* Referenzkarten (Briefing Punkt 7): hoehere Bilder, Titel "Bauart · Ort". */
.ref-grid .ref-card-bild img { aspect-ratio: 4 / 5; }
@media (max-width: 560px) { .ref-grid .ref-card-bild img { aspect-ratio: 4 / 3; } }

/* Bewegung (Briefing Punkt 11): Bilder und Texte blenden beim Scrollen leicht
   ein, Projektbilder zoomen unter dem Zeiger minimal. Nur, wenn der Besucher
   keine reduzierte Bewegung eingestellt hat, und nur, wenn das Skript die
   Klasse "bewegung" gesetzt hat - ohne JavaScript bleibt alles sichtbar. Der
   erste Bildschirm bewegt sich nicht (Kopfbuehne hat keine einblenden-Klasse). */
@media (prefers-reduced-motion: no-preference) {
  html.bewegung .einblenden { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1); }
  html.bewegung .einblenden.sichtbar { opacity: 1; transform: none; }
  .bauart-bild img, .mag-bild img, .wm-raster img, .spezial-bild img, .bild-karte img { transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
  .bauart:hover .bauart-bild img, .mag-bild a:hover img, .wm-raster figure:hover img, .bild-oeffnen:hover img { transform: scale(1.035); }
}
@media print { html.bewegung .einblenden { opacity: 1 !important; transform: none !important; } }

/* ---- Ecken und Hoehen (Ansage AN 17.09.2026, mit Bildschirmfotos vom Handy):
   "Ecken minimal abrunden, nicht so kantig, und alles ein bisschen schmaeler
   von der Hoehe her." Eine Stelle fuer alle Kaesten, Knoepfe und Felder;
   steht bewusst am Ende, damit sie die Einzelregeln oben ueberstimmt. */
:root { --radius: 6px; --radius-klein: 4px; }
.btn-primary, .btn-secondary, .nav-cta, .cta-btn, .formular button, .beratung-formular button,
.weitere-bilder > summary, .teilen-knopf, .mappen-kopieren, .karte-block .btn-secondary,
.formular label.anhang-fotos-knopf, .beratung-formular label.beratung-fotos-knopf,
.termin-art label, .termin-art button, button[data-einwilligung] { border-radius: var(--radius); }
.formular input, .formular textarea, .formular select, .beratung-formular input, .beratung-formular textarea,
.termin-formular input, .termin-formular textarea, .termin-tag { border-radius: var(--radius-klein); }
.ref-card, .mappen-karte, .formular, .mini-cta-box, .schnellzugriff a,
.nav-menu .nav-dropdown-menu a, .kontakt-leiste a, .faq-item, .beratung-meldung, .gal-daten li,
.bild-karte img, .bild-karte a, .kachel-bild, .ref-card-bild, .split-bild img, .split-section img,
.bewertungen-kopf, .termin-option { border-radius: var(--radius); }
.ref-card, .kachel-bild, .ref-card-bild, .mappen-karte { overflow: hidden; }
.btn-primary, .btn-secondary { padding: 12px 24px; }
.nav-cta { padding: 11px 20px; }
.cta-btn { padding: 15px 34px; }
.formular button { padding: 14px 30px; }
.formular input, .formular textarea, .formular select { padding: 12px 14px; }
.formular textarea { min-height: 108px; }
.beratung-formular input, .beratung-formular textarea, .termin-formular input, .termin-formular textarea { min-height: 44px; }
.formular label { margin: 18px 0 7px; }
.schnellzugriff a { min-height: 44px; padding: 8px 12px; }
.weitere-bilder > summary { min-height: 44px; padding: 11px 24px; }
.kontakt-leiste a { min-height: 48px; padding: 13px 10px; }
@media (max-width: 1050px) {
  .nav-menu .nav-dropdown-menu a { min-height: 40px; padding: 6px 12px !important; }
}
/* Audit 19.09.2026, Punkt 1.3: sichtbare Verfasserangabe auf den Ratgebern. */
.verfasser-box { font-size: 14px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 34px; }
/* ---- Zustaende (Auftrag Optik, Detailrunde 26.09.2026, gemessen mit der
   design-beweis-Probe). Steht am Ende, damit es die Einzelregeln oben schlaegt.
   - Jedes Bedienteil zeigt einen Fokusring: btn-secondary, der Kontakt-Knopf im
     Kopf und die Karten hatten keinen, die Formularfelder einen Bronze-Ring mit
     1,7 bis 2,8:1 auf Weiss.
   - Felder und Schnellzugriff mit Rand --rand-bedien statt fast unsichtbarer Linie.
   - Fokus darf nicht unter festen Leisten verschwinden (WCAG 2.4.11): am Handy
     die Kontaktleiste unten, solange sichtbar das Einwilligungsbanner. */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.hero-buehne :focus-visible, .werkstatt-band :focus-visible, .footer :focus-visible, .top-bar :focus-visible { outline-color: var(--cream); }
.beratung-formular input:focus, .beratung-formular textarea:focus,
.formular input:focus, .formular textarea:focus, .formular select:focus,
.termin-formular input:focus, .termin-formular textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.bild-oeffnen:focus-visible, .ref-card-bild:focus-visible { outline-color: var(--ink); }
.beratung-formular input, .beratung-formular textarea, .formular input, .formular textarea, .formular select,
.termin-formular input, .termin-formular textarea { border-color: var(--rand-bedien); }
.schnellzugriff a { border-color: var(--rand-bedien); }
@media (max-width: 760px) { html { scroll-padding-bottom: 88px; } }
html:has(body.einwilligung-sichtbar) { scroll-padding-bottom: calc(var(--einwilligung-hoehe, 220px) + 16px); }