/* Konzept-Satz (DESIGN.md 1):
   Solarma SHK & Bau setzt im Haus alles an seinen Platz, vom Rohr in der Wand
   bis zur letzten Fliese, deshalb Archivo breit und gerade fuer die Titel,
   Marineblau als Grund mit Ziegelrot als einzigem Akzent (Waerme, Hauptknopf),
   echte Baustellenfotos randlos statt gerahmt, Bewegung: ANSETZEN (Teile
   fahren gerade herein und sitzen mit kurzem Nachgeben, nichts schwebt).
   Farbvorgabe Chef 2026-10-01: «Blau rot», «Solche farben sind typisch fuer
   heizubg und sanitär»; «benutzt die mehbau Website, da ist alles auch runder
   und moderner» -> die Radien der Site bleiben. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Metrik-Fallback gegen den Sprung beim Swap (Werte aus starter/). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 98.4%;
  ascent-override: 89.3%;
  descent-override: 21.3%;
  line-gap-override: 0%;
}

:root {
  --font: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  /* Titel breiter als der Text: eine Familie, zwei Stimmen (DESIGN.md 3). */
  --display-stretch: 112%;

  --primary: #0f006d;
  --primary-deep: #0a004a;
  /* Rot als zweite Farbe (Chef 2026-10-01: «Mach da paar rote Elemente rein»,
     «Blau rot»): Blau bleibt die Marke, Rot steht fuer Waerme und den
     Hauptknopf. */
  --accent: #c81e1e;
  --accent-deep: #9f1313;
  --accent-soft: #fdeceb;
  /* Rot auf dunklem Grund heller und weniger gesaettigt (DESIGN.md 4):
     #ff6a5e auf #0f006d misst 5,2:1. */
  --accent-on-dark: #ff6a5e;
  --silver-1: #f8f9fc;
  --silver-2: #e6e9f2;
  --silver-3: #c8cfdd;
  --text: #1b2140;
  --muted: #5d6480;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(15, 0, 109, 0.12);
  --radius: 22px;
  --radius-sm: 16px;
  --max-width: 1200px;

  /* Abstaende in drei Stufen, oben ungleich unten (DESIGN.md 5). */
  --pad-eng: clamp(2rem, 4vw, 3rem);
  --pad-base: clamp(4rem, 8vw, 7rem);
  --pad-luft: clamp(6rem, 12vw, 11rem);

  /* Bewegung: Dauern gestaffelt, eine Feder aus der Idee «ansetzen».
     Gerechnet mit node agents/tools/feder.mjs 6 (6 % Nachgeben: ein Teil, das
     sitzt, federt nicht nach wie ein Spielzeug). */
  --dur-instant: 100ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
  --dur-hero: 900ms;
  --dur-settle: 1100ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-set: linear(0, 0.014, 0.053, 0.11, 0.18, 0.258, 0.34, 0.424, 0.505, 0.584, 0.657, 0.725, 0.786, 0.84, 0.887, 0.927, 0.961, 0.989, 1.012, 1.029, 1.042, 1.051, 1.056, 1.059, 1.06, 1.059, 1.056, 1.053, 1.048, 1.044, 1.039, 1.034, 1.029, 1.024, 1.02, 1.016, 1.012, 1.009, 1.006, 1);
  --dur-set: 980ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  position: relative;
}

.site-wrapper,
.page-wrapper,
main {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  /* height: auto ist noetig, sobald die Bilder width- und height-Attribute
     tragen (gegen Layout-Sprung): sonst gewinnt das Attribut gegen
     aspect-ratio und das Bild wird in Originalhoehe gerendert. */
  height: auto;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
}

/* Drei Abstandsstufen, oben ungleich unten (DESIGN.md 5). */
.section {
  padding-block: var(--pad-base) calc(var(--pad-base) * 0.7);
}

.section--luft {
  padding-block: var(--pad-luft) calc(var(--pad-luft) * 0.6);
}

.section--eng {
  padding-block: var(--pad-eng);
}

.section--randlos {
  padding-block: 0;
}

/* Vollton statt Verlauf (DESIGN.md 4: Flaechen in Volltonfarben). */
.silver-bg {
  background: var(--silver-1);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Roter Strich vor der Rubrik (Chef 01.10.: rote Elemente). */
.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}

h1, h2, h3, h4 {
  margin: 0 0 16px;
  line-height: 1.04;
  /* Titel breiter als der Fliesstext: zweite Stimme derselben Familie. */
  font-stretch: var(--display-stretch);
  font-weight: 700;
  text-wrap: balance;
}

/* Startseite mindestens 88px bei 1440, Unterseite mindestens 72px
   (DESIGN.md 3 und 10). */
h1 {
  font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem);
  letter-spacing: -0.03em;
}

.page-head h1,
body.no-hero h1 {
  font-size: clamp(2.4rem, 1rem + 4.2vw, 4.6rem);
}

h2 {
  font-size: clamp(1.9rem, 0.9rem + 2.2vw, 3rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
  color: var(--text);
  text-wrap: pretty;
}

p, li {
  max-inline-size: 68ch;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Knopf flach in Volltonfarbe, ohne Verlauf und ohne Schweben (DESIGN.md 7).
   Rueckmeldung: die Flaeche wischt von links herein, der Knopf gibt beim
   Druecken nach ("ansetzen"). */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-stretch: 104%;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-instant) var(--ease-out);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: currentColor;
  opacity: 0.16;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before {
    transform: scaleX(1);
  }
}

.btn:focus-visible::before {
  transform: scaleX(1);
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Hauptknopf in Rot: Angebot und Kontakt (Chef 01.10.). */
.btn-accent {
  background: var(--accent);
  color: var(--white);
}

.btn-nav,
.btn-footer,
.btn-fab {
  background: var(--silver-2);
  color: var(--primary);
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding: 14px 0;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease, backdrop-filter 0.35s ease;
}

.site-header.scrolled,
.site-header.menu-open,
body.no-hero .site-header {
  background: rgba(15, 0, 109, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
  padding: 10px 0;
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
}

.logo-box {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-copy strong {
  font-size: 1.2rem;
}

.brand-copy small {
  opacity: 0.88;
  font-size: 0.82rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-nav li {
  position: relative;
}

.main-nav a,
.dropdown-toggle {
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: background var(--dur-base) var(--ease-out), color 0.25s ease;
  cursor: pointer;
}

.has-dropdown {
  position: relative;
}

/* optional: slightly bigger hover/focus area on desktop */
@media (min-width: 992px) {
  .has-dropdown {
    padding-bottom: 14px;
    margin-bottom: -14px;
  }
}

.dropdown-toggle .caret {
  transition: transform var(--dur-fast) var(--ease-out);
}

.has-dropdown.open .dropdown-toggle .caret,
.has-dropdown:focus-within .dropdown-toggle .caret {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .has-dropdown:hover .dropdown-toggle .caret {
    transform: rotate(180deg);
  }
}
.has-dropdown {
  position: relative;
}

@media (min-width: 992px) {
  .has-dropdown {
    padding-bottom: 12px;
    margin-bottom: -12px;
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 240px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow);
  padding: 10px;
  display: grid;
  gap: 4px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

@media (min-width: 992px) {
  .has-dropdown:focus-within .dropdown-menu,
  .has-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  @media (hover: hover) and (pointer: fine) {
    .has-dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
  }
}

@media (min-width: 992px) {
  .has-dropdown::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 14px;
  }
}

.dropdown-menu a {
  color: #09003f !important;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  white-space: nowrap;
}

.dropdown-menu a.active {
  color: var(--primary);
}

.dropdown-menu a:focus-visible {
  color: var(--primary);
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .dropdown-menu a:hover {
    color: var(--primary);
  }
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,0.14);
  justify-content: center;
  align-items: center;
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
}

/* Erster Viewport: Bild bis an alle Kanten, Text links auf der ruhigen
   Seite, hoechstens 6 von 12 Spalten (DESIGN.md 2). */
.hero-home {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  isolation: isolate;
  background: var(--primary-deep);
}

/* Foto rechts in voller Hoehe, laeuft nach links ins Marineblau aus
   (Mechanik der Messlatte, DESIGN.md 2). */
.hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(62%, 980px);
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 46%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 46%);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* Unterseiten-Kopf: randloses Foto 68vh, Text links unten, Schleier mit
   Richtung (DESIGN.md 2). Gilt fuer alle Unterseiten. */
.hero {
  min-height: 68vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-image: var(--hero-fallback);
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  overflow: clip;
  isolation: isolate;
}

.hero .hero-content {
  padding-top: 170px;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.hero h1 {
  max-inline-size: 18ch;
}
/* Schleier mit Richtung: dunkel auf der Textseite, offen auf der Bildseite,
   nie flaechig ueber der Bildmitte (DESIGN.md 2). */
/* Schleier mit Richtung: dunkel auf der Textseite, offen ueber dem Foto,
   nie flaechig ueber der Bildmitte (DESIGN.md 2). */
.hero-overlay,
.parallax-band::before {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(94deg, rgba(10, 0, 74, 0.96) 0%, rgba(10, 0, 74, 0.86) 30%, rgba(10, 0, 74, 0.34) 58%, rgba(10, 0, 74, 0.1) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  padding-top: 150px;
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

/* Der Textblock steht links im Raster, hoechstens 6 von 12 Spalten breit
   (DESIGN.md 2). Begrenzt werden die Kinder, damit der Container zentriert
   bleibt und der Text nicht an die Fensterkante rutscht. */
.hero-home h1 {
  max-inline-size: 13ch;
  margin-bottom: 22px;
}

.hero-home p {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  max-inline-size: 46ch;
}

.hero-actions,
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 32px 0 0;
  align-items: center;
}

.split-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}

.split-grid.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

.media-stack {
  display: grid;
  gap: 16px;
}
.photo-placeholder {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 0, 109, 0.2);
  background: #fff;
  overflow: hidden;
  display: block;
  text-align: center;
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow);
}

.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.photo-placeholder.tall {
  min-height: 460px;
}

.photo-placeholder.wide {
  min-height: 380px;
}

.photo-placeholder.small {
  min-height: 230px;
}

.gallery-grid,
.two-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.section-title {
  margin-bottom: 28px;
}

.section-title.center {
  text-align: center;
}

.card-grid.three,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.service-card,
.stat-card,
.value-card,
.contact-card,
.location-card,
.not-found-card {
  background: rgba(255,255,255,0.9);
  border-radius: var(--radius);
  padding: 26px;
  border: 1px solid rgba(15, 0, 109, 0.08);
  box-shadow: var(--shadow);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}@media (hover: hover) and (pointer: fine) {
.service-card:hover,
.value-card:hover,
.contact-card:hover,
.location-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(15, 0, 109, 0.16);
}
}

.service-card a {
  color: var(--primary);
  font-weight: 700;
}

.stats-grid {
  grid-template-columns: repeat(4, 1fr);
}

.stat-card {
  text-align: center;
}

.stat-card strong {
  font-size: 2rem;
  color: var(--primary);
  display: block;
  margin-bottom: 10px;
}

.parallax,
.parallax-band {
  background-attachment: fixed;
}

.parallax-band {
  position: relative;
  padding: 320px 0;
  background-image: var(--band-image);
  background-size: cover;
  background-position: bottom;
    align-items: center;
  text-align: center;
  justify-content: center;
}

.band-content {
  position: relative;
  z-index: 1;
  color: var(--white);
  max-width: 760px;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.band-content .eyebrow{
  color: #fff;
}
.band-content p {
  color: rgba(255,255,255,0.84);
}

.check-list {
  list-style: disc;
  padding-left: 1.25rem;
}

.check-list li::marker {
  color: var(--accent);
}

.check-list li {
  padding-left: 0;
}

.check-list li::before {
  content: none;
}

.contact-banner {
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 34px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(15,0,109,0.95), rgba(41,18,200,0.92));
  color: var(--white);
  box-shadow: var(--shadow);
}

.contact-banner p,
.contact-banner .eyebrow {
  color: rgba(255,255,255,0.85);
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.location-card {
  text-align: center;
  font-weight: 700;
  color: var(--primary);
}

.contact-card a {
  color: var(--primary);
  font-weight: 700;
}

.primary-contact {
  margin: 24px 0;
}

.faq-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 34px;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-item {
  border-radius: 18px;
  border: 1px solid rgba(15, 0, 109, 0.1);
  background: linear-gradient(180deg, #ffffff, #f8f9fc);
  padding: 0 22px;
  box-shadow: var(--shadow);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 4px;
  font-weight: 700;
  color: var(--text);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  padding: 0 4px 22px;
}

/* Vollton statt Verlauf (DESIGN.md 4). Nebenbei misst credit-check den
   Kontrast des Agentur-Credits jetzt richtig statt gegen Weiss. */
.site-footer {
  background: var(--primary-deep);
  color: rgba(255, 255, 255, 0.85);
  padding-top: 50px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
}

.footer-brand,
.footer-logo {
  color: var(--white);
}
.footer-brand {
  margin-bottom: 1.5vh;
}


.footer-text,
.footer-list li,
.footer-list a {
  color: rgba(255,255,255,0.8);
}

.footer-list {
  display: grid;
  gap: 10px;
}

.footer-contact-list {
  display: grid;
  gap: 0.85rem;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-list li i {
  width: 18px;
  margin-top: 0.2rem;
  color: silver;
  flex-shrink: 0;
}

.footer-contact-list li a,
.footer-contact-list li span {
  line-height: 1.6;
}

.footer-bottom {
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0 26px;
  color: #fff;
}

.footer-bottom p{
  color: var(--silver-3);
}
.quote-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 11, 31, 0.62);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 60;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  width: min(760px, 100%);
  background: #fff;
  color: var(--text);
  border-radius: 28px;
  padding: 30px;
  position: relative;
  box-shadow: 0 35px 70px rgba(0,0,0,0.2);

  max-height: calc(100dvh - 40px);
  overflow-y: auto;
    overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  color: var(--primary);
  font-size: 1.8rem;
  cursor: pointer;
  background-color: #fff;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.quote-form {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.quote-form label {
  display: grid;
  gap: 8px;
}

.quote-form span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

.quote-form input,
.quote-form textarea,
.quote-form select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(15,0,109,0.12);
  background: #f8f9fd;
  color: var(--text);
}

.quote-form input:focus,
.quote-form textarea:focus,
.quote-form select:focus {
  outline: 2px solid rgba(15, 0, 109, 0.16);
  border-color: rgba(15, 0, 109, 0.28);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.form-status {
  min-height: 24px;
  color: var(--primary);
  font-weight: 600;
}

.not-found-wrap {
  min-height: 70vh;
  padding-top: 120px;
}

.not-found-card {
  max-width: 760px;
  text-align: center;
  margin: 0 auto;
}

.quote-form input,
.quote-form textarea,
.quote-form select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1080px) {
  .main-nav {
    position: fixed;
    top: 84px;
    right: 1rem;
    left: 1rem;
    background: rgba(15, 0, 109, 0.97);
    border-radius: 24px;
    padding: 18px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    align-items: stretch;
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav ul,
  .footer-grid,
  .split-grid,
  .contact-grid,
  .faq-wrap,
  .card-grid.three,
  .stats-grid,
  .location-grid {
    grid-template-columns: 1fr;
  }

  .main-nav ul {
    display: grid;
    gap: 8px;
  }

  .main-nav a,
  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .dropdown-menu {
    position: static;
    min-width: 100%;
    margin-top: 8px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px;
  }


  .dropdown-menu a {
    color: var(--white);
  }

  .has-dropdown.open .dropdown-menu {
    display: grid;
  }

  .mobile-toggle {
    display: inline-flex;
  }

  .btn-nav {
    width: 100%;
  }

  .parallax,
  .parallax-band {
    background-attachment: scroll;
  }

}

@media (max-width: 780px) {
  .section {
    padding-block: var(--pad-base) calc(var(--pad-base) * 0.7);
  }

  .hero {
    min-height: 92vh;
  }

  .hero-content {
    padding-top: 120px;
  }

  .form-grid,
  .gallery-grid,
  .two-card-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .contact-banner,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-box {
    width: 54px;
    height: 54px;
  }

  .brand-copy small {
    font-size: 0.75rem;
  }

  .modal-backdrop {
      place-items: start center;
      padding: 12px;
    }

    .modal-card {
      padding: 24px 18px;
      border-radius: 20px;
      max-height: calc(100dvh - 24px);
      margin: auto 0;
    }

  .quote-fab {
    right: 14px;
    bottom: 14px;
  }

  .btn-fab {
    padding: 12px 18px;
  }


  .hero-actions,
.cta-row {
    flex-direction: column;
    align-items: center;
    margin-inline: 10px;
}


}


.nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
}

.brand {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.main-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li {
  position: relative;
}

.main-nav a,
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  color: inherit;
  padding: 0.4rem 0;
}

.header-actions {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}

.desktop-nav-cta {
  display: inline-flex;
}

.mobile-nav-cta {
  display: none;
}

.mobile-toggle {
  display: none;
}

/* optional: keep dropdown centered under item */
.has-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
}

/* tablet/mobile */
@media (max-width: 991px) {
  .nav-shell {
    min-height: 80px;
  }


  .desktop-nav-cta {
    display: none;
  }

  .mobile-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #fff;
  }

  .mobile-toggle i {
    display: block;
    width: 60px;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    transform: none;
    display: none;
    padding: 1rem;
    margin-top: 0.75rem;
    border-radius: 20px;
    background: rgba(15, 0, 109, 0.98);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
  }

  .main-nav.open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .main-nav li {
    width: 100%;
  }

  .main-nav a,
  .dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.9rem 0;
    color: #fff !important;
  }

  .mobile-nav-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }

  .has-dropdown .dropdown-menu {
    position: static;
    transform: none;
    min-width: 100%;
    margin-top: 0.35rem;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  .nav-shell {
    gap: 0.75rem;
  }

  .brand-copy strong {
    font-size: 0.95rem;
  }

  .logo-box img {
    max-height: 44px;
    width: auto;
  }
}


.main-nav a,
.dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  color: #ffffff;
  padding: 0.5rem 0;
  transition: color var(--dur-base) var(--ease-out), opacity 0.25s ease;
}

.main-nav a::after,
.dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}@media (hover: hover) and (pointer: fine) {
.main-nav a:hover,
.dropdown-toggle:hover,
.main-nav a.active,
.dropdown-toggle[aria-expanded="true"] {
  color: #ffffff;
  background: transparent;
}
}@media (hover: hover) and (pointer: fine) {
.main-nav a:hover::after,
.dropdown-toggle:hover::after,
.main-nav a.active::after,
.dropdown-toggle[aria-expanded="true"]::after {
  transform: scaleX(1);
}
}

.main-nav a:focus-visible,
.dropdown-toggle:focus-visible {
  outline: 3px solid var(--accent-on-dark);
  outline-offset: 2px;
  color: #ffffff;
}

.main-nav a:focus-visible::after,
.dropdown-toggle:focus-visible::after {
  transform: scaleX(1);
}

.main-nav li {
  position: relative;
}

@media (max-width: 991px) {
  .main-nav a,
  .dropdown-toggle {
    color: #ffffff;
    background: transparent;
  }

  .main-nav a::after,
  .dropdown-toggle::after {
    bottom: 0.35rem;
  }
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 0.2rem;
  transition: gap var(--dur-base) var(--ease-out), border-color 0.25s ease, opacity 0.25s ease;
}

.card-link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}


.full-span {
  grid-column: 1 / -1;
}

.quote-form,
.contact-form-card {
  width: 100%;
}

.quote-form fieldset {
  margin: 1.4rem 0 1.2rem;
  padding: 0;
  border: 0;
}

.quote-form legend {
  margin-bottom: 0.9rem;
  font-weight: 700;
  color: var(--primary);
}

.service-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.service-pill {
  display: block;
  cursor: pointer;
}

.service-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.service-pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(15, 0, 109, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%);
  color: #1f2430;
  font-weight: 600;
  text-align: center;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}@media (hover: hover) and (pointer: fine) {
.service-pill:hover span {
  transform: translateY(-2px);
  border-color: rgba(15, 0, 109, 0.4);
  box-shadow: 0 12px 24px rgba(15, 0, 109, 0.08);
}
}

/* Gewaehlter Bereich in Volltonfarbe: der Lila-Blau-Verlauf ist in
   DESIGN.md 4 ausdruecklich verboten. */
.service-pill input:checked + span {
  color: #ffffff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: none;
}

.service-pill input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.turnstile-wrap {
  margin-top: 1.25rem;
}

.form-status {
  margin-top: 1rem;
  min-height: 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.form-status.is-success {
  color: #0f6b2d;
}

.form-status.is-error {
  color: #b42318;
}

.contact-form-card {
  padding: 2rem;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 0, 109, 0.08);
}

@media (max-width: 767px) {
  .service-choices {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 1.2rem;
    border-radius: 18px;
  }
}


.service-list-large {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.service-row-card {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 2rem;
  align-items: stretch;
  padding: 1.5rem;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 0, 109, 0.08);
  border: 1px solid rgba(15, 0, 109, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  height: 480px; /* same height for all cards */
}@media (hover: hover) and (pointer: fine) {
.service-row-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px rgba(15, 0, 109, 0.12);
}
}

.service-row-media {
  height: 100%;
  min-height: 100%;
}

.service-row-media img,
.service-row-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

.service-row-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.service-row-content h3 {
  margin-bottom: 0.9rem;
}

.service-row-content p {
  margin-bottom: 1rem;
  max-width: 62ch;
}

.service-row-content .check-list {
  margin-top: 0.3rem;
}

/* Karte ohne Bild (Wärmepumpen, Foto folgt) */
.service-row-card--text {
  grid-template-columns: 1fr;
  min-height: 0;
}

@media (max-width: 991px) {
  .service-row-card {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.2rem;
    min-height: auto; /* let mobile grow naturally */
    height: auto;
  }

  .service-row-media {
    min-height: 260px;
    height: 260px;
  }
}

.direct-contact-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.contact-mini-card {
  padding: 1.5rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(15, 0, 109, 0.08);
  box-shadow: 0 14px 32px rgba(15, 0, 109, 0.08);
  text-align: center;
}

.contact-mini-card i {
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 0.9rem;
}

.contact-mini-card span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #667085;
}

.contact-mini-card strong,
.contact-mini-card a,
.contact-mini-card small {
  display: block;
}

.contact-mini-card strong,
.contact-mini-card a {
  font-size: 1rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

.contact-mini-card small {
  margin-top: 0.3rem;
  color: #667085;
}

@media (max-width: 991px) {
  .direct-contact-layout {
    grid-template-columns: 1fr;
  }
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--ease-out), transform 0.25s ease;
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-radius: 20px;
  background: rgba(15, 0, 109, 0.96);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.cookie-banner__text strong {
  display: block;
  margin-bottom: 0.35rem;
}

.cookie-banner__text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.6;
}

.cookie-banner__text a {
  color: #fff;
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-banner__actions {
    width: 100%;
    flex-direction: column;
  }

  .cookie-banner__actions .btn {
    width: 100%;
    justify-content: center;
  }
}


.split-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}

.split-grid.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

.media-stack {
  display: grid;
  gap: 16px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.photo-placeholder {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 0, 109, 0.2);
  background: #fff;
  overflow: hidden;
  display: block;
  text-align: center;
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow);
}


.photo-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.home-placeholder img {
  object-fit: contain;
}

.photo-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.video-placeholder {
  position: relative;
  min-height: 460px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff url('/images/logo.png') center center / 140px auto no-repeat;
  box-shadow: var(--shadow);
}

.video-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.photo-placeholder.tall {
  min-height: 460px;
}

.photo-placeholder.wide {
  min-height: 380px;
}

.photo-placeholder.small {
  min-height: 230px;
}

/* Tablet */
@media (max-width: 992px) {
  .split-grid,
  .split-grid.reverse,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .photo-placeholder {
    min-height: 320px;
  }

  .photo-placeholder.wide {
    min-height: 300px;
  }

  .photo-placeholder.small {
    min-height: 200px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .section {
    padding: 60px 0;
  }

  .split-grid,
  .split-grid.reverse,
  .contact-grid {
    gap: 24px;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .photo-placeholder {
    min-height: 260px;
  }

  .photo-placeholder.wide {
    min-height: 240px;
  }

  .photo-placeholder.small {
    min-height: 180px;
  }

  .check-list {
    padding-left: 18px;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
  padding-bottom: 28px;
}

.footer-brand,
.footer-logo {
  color: var(--white);
}

.footer-brand {
  margin-bottom: 1.5vh;
}

.footer-text,
.footer-list li,
.footer-list a {
  color: rgba(255,255,255,0.8);
}

.footer-list {
  display: grid;
  gap: 10px;
}

.footer-contact-list {
  display: grid;
  gap: 0.85rem;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-list li i {
  width: 18px;
  margin-top: 0.2rem;
  color: silver;
  flex-shrink: 0;
}

.footer-contact-list li a,
.footer-contact-list li span {
  line-height: 1.6;
}

.footer-bottom {
  display: block;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 18px 0 26px;
  color: #fff;
}

.footer-bottom p {
  color: var(--silver-3);
}
.footer-address-line {
  padding-left: 33px;
}

/* Mobile */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }

  .footer-brand {
    justify-content: center;
    text-align: center;
  }

  .brand-copy {
    text-align: left; /* change to center if you want logo text centered too */
  }

  .footer-list {
    justify-content: center;
  }

  .footer-contact-list li {
    justify-content: center;
    text-align: left;
  }

  .footer-text {
    margin: 0 auto;
    max-width: 520px;
  }

  .footer-bottom {
    text-align: center;
  }
  .footer-address-line {
  padding-left: 0px;

  justify-content: center;
}
}

.whatsapp-float {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 250;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25d366;
  color: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.whatsapp-float i {
  font-size: 1.9rem;
  line-height: 1;
}@media (hover: hover) and (pointer: fine) {
.whatsapp-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}
}

.whatsapp-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.28);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .whatsapp-float {
    left: 14px;
    bottom: 14px;
    width: 54px;
    height: 54px;
  }

  .whatsapp-float i {
    font-size: 1.75rem;
  }
}
/* Ablauf in vier Schritten (SHK-Seite, Chef 2026-10-01). Nummer in Rot. */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  counter-reset: schritt;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.step-list li {
  counter-increment: schritt;
  position: relative;
  padding: 28px 24px 24px;
  background: var(--white);
  border: 1px solid rgba(15, 0, 109, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(15, 0, 109, 0.06);
}

.step-list li::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.step-list h3 {
  margin-bottom: 8px;
}

.step-list p {
  margin: 0;
  color: var(--muted);
}

/* Zusatzzeile in einer Leistungskarte (Hinweis auf solar-ma.de). */
.service-row-note {
  margin-top: 1rem;
  color: var(--muted);
}

.service-row-note a {
  color: var(--accent);
  font-weight: 700;
}

/* Credit der Agentur (agents/CREDIT.md): Farbe aus dem Footer der Site,
   nicht fest im Markup. Herz in Textfarbe. */
.credits-link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
}

.credits-link i {
  color: currentColor;
}@media (hover: hover) and (pointer: fine) {
.credits-link:hover {
  color: #ffffff;
}
}

/* =========================================================================
   SHK-Seite (/shk) und rote Baender. Aufbau nach den Seiten, die der Chef
   am 2026-10-01 geschickt hat: thomas-heizung.ch (Hero mit Foto und zwei
   Knoepfen, Reihe mit Zeichen, rote Vollflaechen-Baender) und kosterag.ch
   (Gewerke als Register mit Zeilen).
   ========================================================================= */

.hero--shk {
  min-height: 62vh;
}

.hero--shk .hero-content {
  padding-top: 170px;
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.hero--shk h1 {
  max-inline-size: 15ch;
}

.hero--shk .hero-claim {
  max-inline-size: 46ch;
  color: rgba(255, 255, 255, 0.9);
}

.hero-kicker {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hero-accent {
  color: #ff6b63;
}

.hero-claim {
  margin: 0 auto;
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.92);
}

/* Vier Gewerke als Spalten mit Zeichen (Muster thomas-heizung.ch). */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: center;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 2rem;
}

.feature h3 {
  color: var(--primary);
  margin-bottom: 10px;
}

.feature p {
  color: var(--muted);
  margin-bottom: 14px;
}

.feature-link {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
  border-bottom: 2px solid rgba(200, 30, 30, 0.3);
  padding-bottom: 2px;
}@media (hover: hover) and (pointer: fine) {
.feature-link:hover {
  border-bottom-color: var(--accent);
}
}

/* Rote Vollflaeche mit Foto und Textkasten (Muster thomas-heizung.ch). */
.band-accent {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--accent-deep), #7d0f0f);
  color: rgba(255, 255, 255, 0.92);
}

.band-accent h2 {
  color: var(--white);
}

.band-accent p {
  color: rgba(255, 255, 255, 0.92);
}

.band-accent-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1fr;
  gap: 2.5rem;
  align-items: center;
}

.band-accent-media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26);
}

.band-accent-media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
}

.band-accent-strong {
  font-weight: 700;
}

.band-accent--center {
  text-align: center;
}

.band-accent--center p {
  max-width: 46rem;
  margin-inline: auto;
}

/* Rubrik auf roter Flaeche: heller Text, weisser Strich. */
.band-accent .eyebrow,
.eyebrow--light {
  color: rgba(255, 255, 255, 0.9);
}

.band-accent .eyebrow::before,
.eyebrow--light::before {
  background: rgba(255, 255, 255, 0.85);
}

.btn-light {
  background: var(--white);
  color: var(--accent-deep);
}@media (hover: hover) and (pointer: fine) {
.btn-light:hover {
  background: var(--silver-2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.7);
}@media (hover: hover) and (pointer: fine) {
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
}

/* Gewerke im Detail als Register mit Zeilen (Muster kosterag.ch). */
.register {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(15, 0, 109, 0.12);
}

.register > li {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 1.5rem 2.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(15, 0, 109, 0.12);
}

.register h3 {
  margin: 0;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.register h3 i {
  color: var(--accent);
  font-size: 1.1rem;
}

.register p {
  margin: 0 0 12px;
}

.register .check-list {
  margin: 0;
}

.register-note {
  margin-top: 12px;
  color: var(--muted);
}

.register-note a {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 991px) {
  .hero--shk {
    min-height: 0;
  }

  .hero--shk .hero-content {
    padding-top: 140px;
    padding-bottom: 70px;
  }

  .band-accent {
    padding: 60px 0;
  }

  .band-accent-grid,
  .register > li {
    grid-template-columns: 1fr;
  }
}

/* Hero-Titel der SHK-Seite groesser als der Standard (Muster der beiden
   Vergleichsseiten: der Titel traegt den ersten Bildschirm). */
.hero--shk h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
}

/* Hinweiszeile nicht ueber die ganze Breite laufen lassen (Lesbarkeit,
   layout-check: hoechstens 80 Zeichen je Zeile). */
.cookie-banner__text {
  max-width: 72ch;
}

/* Textbreite im roten Band und groesserer Titel auf der Startseite
   (layout-check: Zeilenlaenge und H1-Groesse). */
.band-accent--center p {
  max-width: 38rem;
}

.hero-home h1 {
  font-size: clamp(2.4rem, 5.6vw, 5rem);
}

.register p,
.register .check-list {
  max-width: 62ch;
}

@media (min-width: 1200px) {
  .hero-home h1 {
    font-size: 5.5rem;
  }
}

/* ==========================================================================
   19. Bewegung: Choreografie statt Stillstand (DESIGN.md 6)
   Idee aus dem Betrieb: ANSETZEN. Teile fahren gerade herein und sitzen mit
   kurzem Nachgeben (--ease-set, 6 %). Nichts schwebt, nichts dreht sich.
   Ausgangszustaende gelten nur mit .js (boot.js) und nur ohne Bewegungswunsch;
   ohne JS, unter reduced motion und beim Drucken ist alles sofort da.
   ========================================================================== */

/* Zeilenfenster: der Titel steigt zeilenweise herein. Innenabstand plus
   gleich grosser negativer Rand, sonst schneidet das Fenster Umlaute ab. */
.rise {
  display: block;
  overflow: clip;
  padding: 0.08em 0.06em;
  margin: -0.08em -0.06em;
}

.rise > span {
  display: block;
}

/* Akzent auf der Titelzeile: ein Wort in Rot (DESIGN.md 4, hoechstens
   ein Vorkommen im Titel). Auf dunklem Grund die hellere Variante. */
.hero-home h1 em {
  font-style: normal;
  color: var(--accent-on-dark);
}

.hero-kicker {
  display: block;
  overflow: clip;
  margin: 0 0 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  max-inline-size: none;
}

.hero-kicker > span {
  display: block;
}

.hero-lead {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* 1. Auftritt beim Laden: Foto setzt sich, Kicker, drei Titelzeilen,
     Lead, Knoepfe. Fertig nach 1,48 s. Reines CSS, laeuft ohne main.js. */
  .js .hero-media img {
    animation: hero-setzen var(--dur-hero) var(--ease-out) backwards;
  }

  .js .hero-kicker > span,
  .js .hero-home h1 .rise > span {
    animation: zeile-rein var(--dur-set) var(--ease-set) backwards;
  }

  .js .hero-kicker > span { animation-delay: 120ms; }
  .js .hero-home h1 .rise:nth-child(1) > span { animation-delay: 220ms; }
  .js .hero-home h1 .rise:nth-child(2) > span { animation-delay: 320ms; }
  .js .hero-home h1 .rise:nth-child(3) > span { animation-delay: 420ms; }

  .js .hero-lead,
  .js .hero-actions {
    animation: auftritt-weich var(--dur-slow) var(--ease-out) backwards;
  }

  .js .hero-lead { animation-delay: 640ms; }
  .js .hero-actions { animation-delay: 760ms; }

  @keyframes hero-setzen {
    from { transform: scale(1.07); }
    to   { transform: scale(1); }
  }

  @keyframes zeile-rein {
    from { transform: translateY(108%); }
    to   { transform: translateY(0); }
  }

  @keyframes auftritt-weich {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 2. Momente beim Scrollen, jeder anders gebaut. Der Beobachter in main.js
     setzt einmal .is-in; die Art steht hier am data-inview-Wert. */

  /* a) Bildfenster oeffnet sich von der Mitte her. */
  .js [data-inview="bild"]:not(.is-in) {
    clip-path: inset(12% 8%);
  }
  [data-inview="bild"] {
    clip-path: inset(0);
    transition: clip-path var(--dur-settle) var(--ease-out-expo);
  }

  /* b) Zeilen fluchten ein: von links leicht versetzt an die gemeinsame
     Kante, mit kurzem Nachgeben. Signatur-Moment des Elements. */
  .js [data-inview="fluchten"] > * {
    transition: transform var(--dur-set) var(--ease-set),
      opacity var(--dur-slow) var(--ease-out);
  }
  .js [data-inview="fluchten"]:not(.is-in) > * {
    transform: translateX(-26px);
    opacity: 0;
  }
  .js [data-inview="fluchten"] > :nth-child(2) { transition-delay: 70ms; }
  .js [data-inview="fluchten"] > :nth-child(3) { transition-delay: 140ms; }
  .js [data-inview="fluchten"] > :nth-child(4) { transition-delay: 210ms; }
  .js [data-inview="fluchten"] > :nth-child(5) { transition-delay: 280ms; }

  /* c) Der Kernsatz steigt zeilenweise aus seinen Fenstern. */
  .js [data-inview="satz"] .rise > span {
    transition: transform var(--dur-set) var(--ease-set);
  }
  .js [data-inview="satz"]:not(.is-in) .rise > span {
    transform: translateY(106%);
  }
  .js [data-inview="satz"] .rise:nth-child(2) > span { transition-delay: 110ms; }
  .js [data-inview="satz"] .rise:nth-child(3) > span { transition-delay: 220ms; }

  /* d) Eine Linie zieht sich von links auf. */
  .js [data-inview="linie"]::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-settle) var(--ease-out-expo);
  }
  .js [data-inview="linie"].is-in::after {
    transform: scaleX(1);
  }

  /* e) Ein Block setzt sich von unten an seinen Platz. */
  .js [data-inview="setzen"] {
    transition: transform var(--dur-set) var(--ease-set),
      opacity var(--dur-slow) var(--ease-out);
  }
  .js [data-inview="setzen"]:not(.is-in) {
    transform: translateY(26px);
    opacity: 0;
  }

}

/* 4. Seitenwechsel: der Kopf bleibt stehen, der Rest blendet kurz.
   Steht ausserhalb der Media-Query, weil @view-transition nur auf oberster
   Ebene gilt; unter reduced motion schaltet der Browser sie selbst ab. */
@view-transition { navigation: auto; }

.site-header {
  view-transition-name: kopf;
}

@media print {
  [data-inview] { clip-path: none !important; }
}

/* ==========================================================================
   20. Startseite: Element mit Aufgabe, Beleg, zweite Hoehe, Betrieb
   ========================================================================== */

/* --- Die Anliegen-Leiste: ordnet den Anlass dem Gewerk zu ---------------- */
.anliegen__kopf {
  max-width: 44ch;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.anliegen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--silver-2);
}

.anliegen__liste li {
  border-bottom: 1px solid var(--silver-2);
  max-inline-size: none;
}

.anliegen__liste a {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 7fr) minmax(0, 5fr) 2.5rem;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 10px;
  isolation: isolate;
}

/* Rueckmeldung: die Flaeche laeuft von links voll, der Pfeil faehrt an die
   Kante, die Nummer wechselt auf Rot. */
.anliegen__liste a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--silver-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .anliegen__liste a:hover::before { transform: scaleX(1); }
  .anliegen__liste a:hover .anliegen__pfeil { transform: translateX(6px); }
  .anliegen__liste a:hover .anliegen__nr { color: var(--accent); }
}

.anliegen__liste a:focus-visible::before { transform: scaleX(1); }
.anliegen__liste a:focus-visible .anliegen__nr { color: var(--accent); }

.anliegen__nr {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--silver-3);
  transition: color var(--dur-base) var(--ease-out);
}

.anliegen__sache {
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}

.anliegen__gewerk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 700;
  color: var(--primary);
  font-size: 0.98rem;
}

.anliegen__gewerk small {
  font-weight: 400;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
}

.anliegen__pfeil {
  justify-self: end;
  color: var(--accent);
  transition: transform var(--dur-base) var(--ease-out);
}

.anliegen__fuss {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  color: var(--muted);
}

.anliegen__fuss a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .anliegen__fuss a:hover { color: var(--accent); }
}

@media (max-width: 860px) {
  .anliegen__liste a {
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem;
    row-gap: 6px;
  }
  .anliegen__gewerk {
    grid-column: 2;
    font-size: 0.9rem;
  }
}

/* --- Beleg: drei Fotos fast auf Stoss, randlos --------------------------- */
.beleg {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  background: var(--primary-deep);
}

.beleg figure {
  position: relative;
  margin: 0;
  overflow: clip;
}

.beleg__gross {
  grid-row: span 2;
}

.beleg img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.beleg__gross img { min-height: 460px; }

.beleg figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 36px 20px 14px;
  color: #fff;
  font-size: 0.82rem;
  background: linear-gradient(0deg, rgba(10, 0, 74, 0.85), transparent);
}

@media (max-width: 760px) {
  .beleg {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .beleg__gross { grid-row: auto; }
  .beleg__gross img { min-height: 300px; }
}

/* --- Zweite Hoehe: ein Satz in H1-Groesse auf dunkler Vollflaeche -------- */
.kernsatz {
  background: var(--primary-deep);
  color: #fff;
}

.kernsatz__text {
  margin: 0;
  max-inline-size: 18ch;
  font-size: clamp(2.3rem, 1rem + 4.4vw, 5rem);
  line-height: 1.02;
  font-weight: 700;
  font-stretch: var(--display-stretch);
  letter-spacing: -0.03em;
  color: #fff;
}

.kernsatz__text em {
  font-style: normal;
  color: var(--accent-on-dark);
}

/* --- Betrieb: ungleiches Raster 7/5 ------------------------------------- */
.betrieb__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.betrieb__bild {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.betrieb__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.betrieb__bild figcaption {
  padding: 10px 2px 0;
  font-size: 0.84rem;
  color: var(--muted);
}

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

/* Sekundaerknopf auf hellem Grund: Haarlinie statt Flaeche. */
.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(15, 0, 109, 0.22);
}

/* --- Schwebende Knoepfe erst nach dem ersten Bildschirm ------------------
   DESIGN.md 2: kein Panel und kein WhatsApp-Blob im Fold. Beide haengen an
   der Klasse, die der Kopf ohnehin beim Scrollen bekommt (kein neues JS). */
.whatsapp-float,
.quote-fab {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

body:has(.site-header.scrolled) .whatsapp-float,
body:has(.site-header.scrolled) .quote-fab,
body.no-hero .whatsapp-float,
body.no-hero .quote-fab {
  opacity: 1;
  visibility: visible;
}

.whatsapp-float {
  width: 50px;
  height: 50px;
  box-shadow: none;
}

.whatsapp-float svg {
  width: 26px;
  height: 26px;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover {
    transform: scale(1.06);
    box-shadow: none;
  }
}

/* Hero-Feinschliff: jede Titelzeile bleibt eine Zeile (ab Tablet), das Foto
   zeigt die vier Leute rechts der Maskenkante. */
.hero-media img {
  object-position: 62% 44%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 12%, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 12%, #000 36%);
}

@media (min-width: 900px) {
  .hero-home h1 {
    max-inline-size: none;
  }
  .hero-home h1 .rise > span {
    white-space: nowrap;
  }
}

/* Bildflaechen begrenzen: der Belegstreifen traegt eine Bildschirmhoehe,
   nicht zwei (layout-check, Rhythmus der Startseite). */
.beleg {
  max-height: 68vh;
}

.beleg img,
.beleg__gross img {
  min-height: 0;
  height: 100%;
}

@media (max-width: 760px) {
  .beleg { max-height: none; }
  .beleg img { min-height: 240px; }
}

/* --- Eine Groessenskala: 13 / 16 / 19 / 23 / 46 / 88 px bei 1440 ---------
   DESIGN.md 3 und 10: hoechstens 7 gerenderte Schriftgroessen je Seite. */
.eyebrow,
.hero-kicker,
.beleg figcaption,
.betrieb__bild figcaption,
.anliegen__gewerk small {
  font-size: 0.8rem;
}

.anliegen__nr,
.anliegen__gewerk {
  font-size: 1rem;
}

.hero-home p.hero-lead {
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.1875rem);
}

.anliegen__sache {
  font-size: clamp(1.1rem, 0.9rem + 0.55vw, 1.4375rem);
}

/* Der Kernsatz traegt die zweite Hoehe und liegt deshalb auf der H1-Groesse. */
.kernsatz__text {
  font-size: clamp(2.3rem, 1rem + 5.2vw, 6rem);
}

/* Kernsatz auf dieselbe Groesse wie der Hero-Titel (eine Groesse weniger). */
@media (min-width: 1200px) {
  .kernsatz__text { font-size: 5.5rem; }
}

/* Auftritt auch auf den Unterseiten: Kicker und Titelzeilen steigen aus
   ihren Fenstern, Lead und Knoepfe folgen (DESIGN.md 6 Punkt 2). */
.hero h1 em,
.hero--shk h1 em {
  font-style: normal;
  color: var(--accent-on-dark);
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero .hero-kicker > span,
  .js .hero h1 .rise > span {
    animation: zeile-rein var(--dur-set) var(--ease-set) backwards;
  }

  .js .hero .hero-kicker > span { animation-delay: 100ms; }
  .js .hero h1 .rise:nth-child(1) > span { animation-delay: 200ms; }
  .js .hero h1 .rise:nth-child(2) > span { animation-delay: 300ms; }
  .js .hero h1 .rise:nth-child(3) > span { animation-delay: 400ms; }

  /* Titel ohne Zeilenfenster (die uebrigen Unterseiten) setzt sich weich. */
  .js .hero h1:not(:has(.rise)),
  .js .hero .hero-claim,
  .js .hero .hero-actions {
    animation: auftritt-weich var(--dur-slow) var(--ease-out) backwards;
  }

  .js .hero h1:not(:has(.rise)) { animation-delay: 200ms; }
  .js .hero .hero-claim { animation-delay: 560ms; }
  .js .hero .hero-actions { animation-delay: 680ms; }
}

/* Rueckmeldung auf den Textlinks der Unterseiten (motion-check Punkt 3):
   der Unterstrich zieht sich unter dem Wort auf. */
.feature-link,
.register a,
.band-accent-copy a:not(.btn),
.contact-card a,
.footer-nav a,
.site-footer a:not(.btn) {
  transition: color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover,
  .site-footer a:not(.btn):hover {
    color: var(--accent-on-dark);
  }
}

/* Pause-Knopf auf dem Video: klein, deckend, Tap-Ziel 44px. */
.video-placeholder {
  position: relative;
}

.video-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-deep);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .video-pause:hover { background: var(--accent); }
}

.video-pause:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Bilder aus kleinen Quellen (elektro.jpg, 1000px) nicht ueber ihre
   doppelte Anzeigebreite ziehen (Retina-Regel, layout-check). */
@media (max-width: 991px) {
  .service-row-media img,
  .photo-placeholder img {
    max-width: 500px;
    margin-inline: auto;
  }
}

/* Zeilenlaenge auch dort, wo Absaetze in Rastern stehen. */
.service-row-content p,
.split-grid p,
.section-title p {
  max-inline-size: 66ch;
}

/* Bildspalten sind figure: Standard-Margin der Figur zuruecknehmen. */
figure.media-stack {
  margin: 0;
}

/* Zeilenlaenge: Archivo laeuft breiter als die ch-Einheit vermuten laesst,
   deshalb 62ch statt 66ch (layout-check misst hoechstens 80 Zeichen). */
p, li,
.service-row-content p,
.split-grid p,
.section-title p {
  max-inline-size: 62ch;
}

/* Handy und kleines Tablet: das Foto steht oben und laeuft nach unten in die
   Flaeche aus, der Text sitzt darunter. Sonst liegt der Titel auf den
   Gesichtern (Hero-Matrix 360 bis 820 px, DESIGN.md 2). */
@media (max-width: 900px) {
  .hero-media {
    inset: 0 0 auto 0;
    width: 100%;
    height: 56%;
  }

  .hero-media img {
    object-position: 58% 26%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 97%);
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 0, 74, 0.2) 0%, rgba(10, 0, 74, 0.42) 40%, rgba(10, 0, 74, 0.92) 62%, var(--primary-deep) 78%);
  }

  .hero-home .hero-content {
    padding-top: clamp(1rem, 54vh, 26rem);
    padding-bottom: clamp(2rem, 5vh, 3rem);
  }
}

/* Am Handy stehen Kicker, Titel, Lead und Knoepfe auf derselben linken Kante
   (DESIGN.md 5: Reihenfolge und Ausrichtung wie im DOM). */
@media (max-width: 900px) {
  .hero-home .hero-actions,
  .hero .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin-inline: 0;
  }

  .hero-home .hero-actions .btn,
  .hero .hero-actions .btn {
    flex: 1 1 auto;
  }

  .hero-home .hero-kicker,
  .hero .hero-kicker {
    position: relative;
    z-index: 2;
  }
}

/* Lead im Seitenkopf: gleiche Zeilenlaenge wie der Hero der Startseite. */
.hero .hero-claim,
.hero-claim {
  max-inline-size: 46ch;
}

/* Lead im Kopf steht auf derselben linken Kante wie Kicker und Titel
   (DESIGN.md 2: kein zentrierter Textblock im Hero). */
.hero-claim {
  margin-inline: 0;
}

/* Ablauf als Zeilen an einer Linie statt als vier gleiche Karten
   (DESIGN.md 5, Scanner struktur-schrittnummern). Die Schritte sitzen an
   einer gemeinsamen Kante: dieselbe Idee wie die Anliegen-Leiste. */
.step-list {
  display: block;
  border-top: 1px solid var(--silver-2);
  max-width: 54rem;
}

.step-list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 4px clamp(14px, 2vw, 26px);
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 24px) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--silver-2);
  border-radius: 0;
  box-shadow: none;
}

.step-list li::before {
  position: static;
  grid-row: span 2;
  align-self: start;
  width: auto;
  height: auto;
  margin: 0;
  background: transparent;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
}

.step-list li h3,
.step-list li strong {
  margin: 0;
  grid-column: 2;
}

.step-list li p {
  margin: 0;
  grid-column: 2;
  color: var(--muted);
}

@media (max-width: 560px) {
  .step-list li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
}

/* Register: Text und Liste nebeneinander statt untereinander in einer
   schmalen Spalte, damit die rechte Haelfte nicht leer bleibt. */
.register > li {
  grid-template-columns: minmax(170px, 3fr) minmax(0, 5fr) minmax(0, 5fr);
  align-items: start;
}

.register p {
  max-inline-size: 42ch;
}

.register .check-list {
  max-inline-size: 42ch;
}

.register h3 svg {
  color: var(--accent);
  flex: none;
}

@media (max-width: 900px) {
  .register > li {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Anliegen-Zeile ohne Nummernspalte: Anlass, Gewerk, Pfeil. */
.anliegen__liste a {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) 2.5rem;
}

.anliegen__sache {
  max-inline-size: 28ch;
}

@media (max-width: 860px) {
  .anliegen__liste a {
    grid-template-columns: minmax(0, 1fr) 1.75rem;
  }
  .anliegen__gewerk {
    grid-column: 1;
  }
  .anliegen__sache {
    max-inline-size: none;
  }
}

/* Der Belegstreifen hat eine feste Hoehe statt einer Obergrenze: mit
   max-height liefen die Bilder aus ihrer Section heraus und verdeckten die
   folgende (Kernsatz). */
.beleg {
  max-height: none;
  height: clamp(380px, 62vh, 640px);
  overflow: clip;
}

.beleg figure {
  min-height: 0;
}

.beleg img,
.beleg__gross img {
  height: 100%;
  min-height: 0;
}

@media (max-width: 760px) {
  .beleg {
    height: auto;
  }
  .beleg img {
    height: auto;
    min-height: 220px;
    aspect-ratio: 4 / 3;
  }
}

/* <picture> ist ein zusaetzlicher Kasten um das Bild: er darf das Layout
   nicht veraendern (Hero, Belegstreifen, Bildspalten). */
picture {
  display: contents;
}

/* Figuren aus dem Bild-Partial tragen die Layoutklasse selbst. */
.beleg figure,
.betrieb__bild figure {
  margin: 0;
}

.betrieb__bild figure {
  border-radius: var(--radius-sm);
  overflow: clip;
}

/* Seitenkopf ohne Foto (Impressum, Datenschutz): dunkle Vollflaeche statt
   leerem Hintergrund, Kopfzeile bleibt hell darueber (DESIGN.md 2). */
.hero--ohne-bild {
  min-height: 46vh;
  background: var(--primary-deep);
}

.hero--ohne-bild .hero-overlay {
  display: none;
}

/* ==========================================================================
   21. Befunde des design-review vom 2026-10-02
   ========================================================================== */

/* BLOCKER: Zwischen 992 und 1080 px war weder das Menue noch der Hamburger
   sichtbar (eine Basisregel stand nach ihrer eigenen Media-Query). Der Knopf
   gehoert ueberall dorthin, wo das Menue ausgeblendet ist. */
@media (max-width: 1080px) {
  .mobile-toggle {
    display: inline-flex;
  }
}

/* Kopf auf Normhoehe (DESIGN.md 5: 64 bis 72 px Desktop, 56 bis 64 mobil).
   Vorher 120 px, der Hero verlor eine ganze Zeile. */
.site-header {
  padding: 10px 0;
}

.site-header.scrolled,
.site-header.menu-open,
body.no-hero .site-header {
  padding: 8px 0;
}

.logo-box {
  width: 46px;
  height: 46px;
  border-radius: 13px;
}

.brand-copy strong {
  font-size: 1.05rem;
}

.brand-copy small {
  font-size: 0.74rem;
}

.main-nav a,
.dropdown-toggle {
  padding: 9px 13px;
}

.site-header .btn {
  padding: 11px 20px;
}

/* Telefon im Kopf (DESIGN.md 5, PRUEFEN.md 7: nicht nur im Footer). */
.header-tel {
  display: none;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  padding: 9px 4px;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (min-width: 1081px) {
  .header-tel { display: inline-flex; }
}

@media (hover: hover) and (pointer: fine) {
  .header-tel:hover { color: var(--accent-on-dark); }
}

.header-tel:focus-visible {
  outline: 3px solid var(--accent-on-dark);
  outline-offset: 3px;
}

.header-tel svg { flex: none; }

/* Hero fuellt das Fenster, auch hohe (vorher feste 900 px). */
.hero-home {
  min-height: 100svh;
}

/* Schleier hoechstens .85 auf der Textseite (DESIGN.md 2), sonst
   verschwindet die Person am linken Bildrand. */
.hero-overlay {
  background: linear-gradient(94deg, rgba(10, 0, 74, 0.85) 0%, rgba(10, 0, 74, 0.78) 30%, rgba(10, 0, 74, 0.3) 58%, rgba(10, 0, 74, 0.08) 100%);
}

/* Kicker gegen H1 mindestens 1:7 (DESIGN.md 3). Die allgemeine Regel
   .hero-home p hatte ihn auf 20 px gezogen. */
.hero-home p.hero-kicker,
.hero p.hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  max-inline-size: none;
}

/* Knopfreihe folgt der Ausrichtung ihres Textes. */
.cta-row.center {
  justify-content: center;
}

/* Body ist kein Scroll-Container (DESIGN.md 5, REFERENZ.md 11). */
html,
body {
  overflow-x: clip;
}

/* Hinweisleiste unten statt Panel ueber dem Hero (DESIGN.md 2 und 7).
   Sie bleibt, weil sie informiert; Einwilligung braucht es nicht, die Site
   setzt nur technisch notwendige Technologien (Text der Leiste). */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  top: auto;
  z-index: 200;
  max-width: none;
  margin: 0;
  padding: 10px 0;
  background: var(--primary-deep);
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 22px;
  width: min(var(--max-width), calc(100% - 2rem));
  margin: 0 auto;
  padding: 0;
}

.cookie-banner__text strong {
  display: none;
}

.cookie-banner__text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
  max-inline-size: 78ch;
}

.cookie-banner__text a {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: none;
}

.cookie-banner__actions .btn {
  padding: 9px 18px;
  font-size: 0.82rem;
}

/* Die schwebenden Knoepfe weichen der Leiste aus, um ihre echte Hoehe
   (am Handy bis 195 px, gemessen) statt um einen festen Wert. */
body:has(.cookie-banner.is-visible) .whatsapp-float,
body:has(.cookie-banner.is-visible) .quote-fab {
  transform: translateY(calc(-1 * var(--cookie-hoehe, 74px) - 12px));
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Register: die Textspalte war bei mittleren Breiten nur 159 px breit
   (design-review). Gewerkname schmal, Text und Liste teilen sich den Rest
   erst ab 1100 px; darunter steht die Liste unter dem Text. */
.register > li {
  grid-template-columns: minmax(150px, 2fr) minmax(0, 7fr);
}

.register > li > div {
  display: grid;
  gap: 0 clamp(18px, 3vw, 40px);
}

@media (min-width: 1100px) {
  .register > li > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.register p,
.register .check-list {
  max-inline-size: 48ch;
}

/* Die Zeilenlaengen-Regel gilt Textelementen, nicht Listen, die ein Layout
   tragen (Register, Anliegen-Leiste, Ablauf, Menues, Karten). */
.register > li,
.anliegen__liste li,
.step-list li,
.main-nav li,
.dropdown-menu li,
.footer-nav li,
.check-list li {
  max-inline-size: none;
}

.check-list li {
  max-inline-size: 48ch;
}

/* Telefon im Kopf erst, wenn daneben Platz ist (sonst bricht das Menue). */
.header-tel {
  display: none;
}

@media (min-width: 1280px) {
  .header-tel {
    display: inline-flex;
  }
}

/* Eine Skala, sechs Groessen bei 1440: 13 / 16 / 19 / 22 / 46 / 88 px.
   Die Ergaenzungen aus dem Review hatten drei weitere eingefuehrt. */
.header-tel,
.anliegen__fuss,
.register p,
.register .check-list li {
  font-size: 1rem;
}

.cookie-banner__text p,
.cookie-banner__actions .btn,
.hero-home p.hero-kicker,
.hero p.hero-kicker,
.step-list li p,
.beleg figcaption,
.betrieb__bild figcaption,
.anliegen__gewerk small,
.eyebrow {
  font-size: 0.8rem;
}

/* strong und h3 auf die Skala (sie brachten 17 und 21 px dazu). */
strong {
  font-size: inherit;
}

h3 {
  font-size: 1.375rem;
}

/* Logo-Zeile auf die Skala: 16 und 13 px statt 17 und 12
   (layout-check: hoechstens 7 gerenderte Groessen). */
.brand-copy strong {
  font-size: 1rem;
}

.brand-copy small {
  font-size: 0.8rem;
}

/* Bild im roten Band kleiner: die Quelle floor ist 1152 px breit, mehr gibt
   das Material nicht her. So bleibt die Retina-Regel erfuellt. */
.band-accent-media img,
.band-accent-media picture img {
  max-width: 560px;
  margin-inline: auto;
}

/* Sichtbarer Fokus auf allem, was bedient wird (PRUEFEN.md 3). Bisher hatten
   Formularfelder, Absendeknopf und Footer-Links keinen eigenen Ring. */
.quote-form input:focus-visible,
.quote-form textarea:focus-visible,
.quote-form select:focus-visible,
.contact-form-card input:focus-visible,
.contact-form-card textarea:focus-visible,
.contact-form-card select:focus-visible,
.site-footer a:focus-visible,
.footer-nav a:focus-visible,
.anliegen__fuss a:focus-visible,
.card-link:focus-visible,
.feature-link:focus-visible,
.credits-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-footer a:focus-visible,
.footer-nav a:focus-visible,
.credits-link:focus-visible {
  outline-color: var(--accent-on-dark);
}

/* Kontaktblock: Aufforderung links, Angaben rechts als Liste statt als drei
   gleiche Karten mit Zeichen (DESIGN.md 5 und 7). */
.kontakt-direkt {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.kontakt-daten {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px clamp(16px, 2.5vw, 32px);
  align-items: baseline;
}

.kontakt-daten dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.kontakt-daten dt svg {
  color: var(--accent);
  flex: none;
}

.kontakt-daten dd {
  margin: 0;
  color: var(--text);
  max-inline-size: 42ch;
}

.kontakt-daten a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .kontakt-daten a:hover { color: var(--accent); }
}

@media (max-width: 860px) {
  .kontakt-direkt { grid-template-columns: 1fr; }
  .kontakt-daten { grid-template-columns: 1fr; gap: 4px; }
  .kontakt-daten dd { margin-bottom: 12px; }
}

/* Copyright-Zeile des Footers mittig wie der Credit darunter: die allgemeine
   Zeilenlaengen-Regel hatte sie nach links gezogen (design-review). */
.footer-bottom p,
.footer-legal p {
  max-inline-size: none;
}

/* Telefonnummer in der Fussnote der Anliegen-Leiste nicht umbrechen. */
.anliegen__fuss a[href^="tel:"] {
  white-space: nowrap;
}

/* Zwei harte Rottoene neben den Tokens (design-review). */
.hero-accent {
  color: var(--accent-on-dark);
}

/* Kurze Handy-Fenster (360x640, 375x667, 390x664): das Foto bekommt weniger
   Hoehe, damit Titel, Lead und Hauptknopf in den ersten Bildschirm passen.
   Die Gesichter bleiben dabei ganz im Bild (Hero-Matrix). */
@media (max-width: 900px) and (max-height: 700px) {
  .hero-media {
    height: 40%;
  }

  .hero-overlay {
    background: linear-gradient(180deg, rgba(10, 0, 74, 0.2) 0%, rgba(10, 0, 74, 0.45) 26%, rgba(10, 0, 74, 0.92) 44%, var(--primary-deep) 60%);
  }

  .hero-home .hero-content {
    padding-top: clamp(1rem, 38vh, 16rem);
    padding-bottom: 1.5rem;
  }

  .hero-home h1 {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }

  .hero-home p.hero-lead {
    font-size: 0.95rem;
  }

  .hero-home .hero-actions {
    margin-top: 18px;
    gap: 10px;
  }
}

/* Auswahlkacheln: Kaestchen sicher ausblenden (es blitzte in der rechten
   Spalte durch), Vollton statt Verlauf, Rueckmeldung ohne Schweben. */
.service-pill {
  position: relative;
}

.service-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.service-pill span {
  background: var(--silver-1);
  border-radius: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .service-pill:hover span {
    transform: none;
    border-color: rgba(15, 0, 109, 0.4);
    background: var(--silver-2);
    box-shadow: none;
  }
}

/* Telefon im Kopf erst, wenn das Menue daneben wirklich Platz hat. */
.header-tel {
  display: none;
}

@media (min-width: 1420px) {
  .header-tel {
    display: inline-flex;
  }
}

/* Der Kontaktblock braucht keinen Luft-Abstand vor dem Formular. */
.kontakt-direkt + * {
  margin-top: 0;
}

/* Menuepunkte bleiben einzeilig: «Über uns» brach bei jeder Breite um und
   zog die Kopfzeile auf 92 px (Soll 64 bis 72). */
.main-nav a,
.dropdown-toggle,
.header-tel {
  white-space: nowrap;
}

/* Kopfzeile auf Normhoehe (DESIGN.md 5: 64 bis 72 px Desktop). Gemessen
   waren es 112 px: Logo, zweizeiliger Markenblock und Menuepunkte zusammen. */
@media (min-width: 1081px) {
  .nav-shell {
    min-height: 0;
  }

  .logo-box {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .main-nav a,
  .dropdown-toggle {
    padding: 7px 11px;
  }

  .site-header .btn {
    padding: 9px 17px;
  }

  .mobile-nav-cta {
    display: none;
  }
}

/* Telefon im Kopf nur, wenn daneben wirklich Platz ist (gemessen: bei 1440
   ueberlappte es das Menue um 123 px). */
.header-tel {
  display: none;
}

@media (min-width: 1700px) {
  .header-tel {
    display: inline-flex;
  }
}

/* Die Kopfzeile darf breiter laufen als der Textinhalt: in 1200 px passen
   Logo, sieben Menuepunkte, Telefon und Knopf nicht nebeneinander. */
@media (min-width: 1081px) {
  .site-header .container {
    width: min(1480px, calc(100% - 2.5rem));
  }
}

.header-tel {
  display: none;
}

@media (min-width: 1360px) {
  .header-tel {
    display: inline-flex;
  }
}

.header-tel {
  display: none;
}

@media (min-width: 1300px) {
  .header-tel {
    display: inline-flex;
  }
}

/* Gemessen: ab 1380 px steht das Telefon neben dem Menue ohne Ueberlappung. */
.header-tel {
  display: none;
}

@media (min-width: 1380px) {
  .header-tel {
    display: inline-flex;
  }
}

/* --- Preise in der Zeile statt als Karten (DESIGN.md 5) ----------------- */
.preisliste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--silver-2);
  max-width: 54rem;
}

.preisliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--silver-2);
  max-inline-size: none;
}

.preisliste__was {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

.preisliste__preis {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  white-space: nowrap;
}

.preisliste small {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

.preisliste__fuss {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* ==========================================================================
   22. Breite Fenster und Knoepfe (Befund User 2026-10-02 am 1920er Schirm)
   ========================================================================== */

/* Auf breiten Schirmen sass der Textblock im zentrierten 1200er-Container:
   links blieb eine tote Flaeche, der Titel lief ueber die Leute im Foto.
   Der Hero bekommt deshalb einen eigenen, breiteren Container, das Foto
   etwas weniger Breite, und der Titel bleibt in seiner Haelfte. */
@media (min-width: 901px) {
  .hero-home .container,
  .hero .container {
    width: min(1640px, calc(100% - 5rem));
  }

  /* Das Foto nimmt die rechte Haelfte, der Titel bleibt links davon.
     Gemessen von 940 bis 2560 px: keine Zeile reicht mehr in die
     deckende Zone der Maske. */
  .hero-media {
    width: min(52%, 1180px);
  }

  .hero-home h1 {
    max-inline-size: 15ch;
  }
}

@media (min-width: 1700px) {
  .hero-media {
    width: min(52%, 1280px);
  }
}

/* Sekundaere Wege sind Textlinks mit Pfeil, keine zweite und dritte Pille
   (DESIGN.md 7: Primaer flach in der Akzentfarbe, Sekundaer als Textlink).
   Drei gleich grosse Knoepfe nebeneinander lasen sich als Baukasten. */
.btn-ghost {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 15px 2px;
  color: var(--primary);
  font-weight: 700;
  gap: 8px;
  overflow: visible;
}

.btn-ghost::before {
  display: none;
}

.btn-ghost::after {
  content: "";
  width: 18px;
  height: 10px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Der Strich unter dem Wort zieht sich auf, der Pfeil faehrt mit. */
.btn-ghost > span,
.btn-ghost {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover {
    color: var(--accent);
    transform: none;
  }
  .btn-ghost:hover::after {
    transform: translateX(5px);
  }
}

.btn-ghost:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.btn-ghost:active {
  transform: none;
}

/* Abstand zwischen Hauptknopf und den Textwegen. */
.cta-row {
  gap: clamp(14px, 2vw, 28px);
}

/* ==========================================================================
   23. Befunde design-review und anti-ai vom 2026-10-02 (zweiter Durchgang)
   ========================================================================== */

/* Die acht Bauleistungen lagen als formgleiche weisse Karten mit 28 px
   Radius und Schlagschatten vor (DESIGN.md 5: Karten mit Linie statt
   Schatten, kein Bauplan mehr als zweimal). Jetzt Zeilen an einer Kante,
   wie das Register und die Anliegen-Leiste. */
.service-row-card {
  padding: clamp(22px, 2.6vw, 32px) 0;
  border: 0;
  border-bottom: 1px solid var(--silver-2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.service-list-large > .service-row-card:first-child {
  border-top: 1px solid var(--silver-2);
}

@media (hover: hover) and (pointer: fine) {
  .service-row-card:hover {
    transform: none;
    box-shadow: none;
  }
}

.service-row-media {
  border-radius: var(--radius-sm);
  overflow: clip;
}

/* Rot heisst auf dieser Site «Angebot». Wege zwischen gleichrangigen
   Standbeinen sind deshalb Textlinks, kein roter Knopf (design-review). */
.betrieb__text .cta-row .btn-accent[href] {
  background: transparent;
  color: var(--primary);
  border: 0;
  border-radius: 0;
  padding: 15px 2px;
  font-weight: 700;
  gap: 8px;
}

/* Footer-Spaltentitel sind h4 nach h2: als h3-Stufe auszeichnen, damit die
   Ueberschriftenfolge auf jeder Seite stimmt (axe heading-order). */
.site-footer h3,
.site-footer h4 {
  font-size: 1rem;
}

/* Sprungmarke zum Inhalt (PRUEFEN.md 3: erster Tabstopp). */
.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 400;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: 0;
}

/* Stimmen ohne Ueberschrift: drei Zitate nebeneinander, Name und Quelle
   darunter (DESIGN.md 5, schreiber.md 5: woertlich, mit Quelle). */
.stimmen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
}

.stimmen__liste li {
  max-inline-size: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stimmen blockquote {
  margin: 0;
  position: relative;
  padding-top: 26px;
}

/* Zitatzeichen als zwei Striche: dieselbe Kante wie die Register-Zeilen. */
.stimmen blockquote::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 26px;
  height: 3px;
  background: var(--accent);
}

.stimmen blockquote p {
  margin: 0;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.1875rem);
  line-height: 1.45;
  color: var(--text);
  max-inline-size: 34ch;
}

.stimmen cite {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-style: normal;
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
}

.stimmen cite small {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
}

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

/* Das Ausweichen der schwebenden Knoepfe vor der Hinweisleiste ist eine
   Lageaenderung: unter prefers-reduced-motion ohne Uebergang (motion-check 5). */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .quote-fab {
    transition: opacity var(--dur-base) linear, visibility var(--dur-base) linear;
  }
}

/* Bilder tragen hoechstens eine Haarlinie an Radius (DESIGN.md 5: Bilder
   0 bis 2 px). Das Betriebsfoto hatte 16 px neben randlosen Belegfotos. */
.betrieb__bild,
.betrieb__bild figure,
.service-row-media,
.media-stack .photo-placeholder {
  border-radius: 2px;
}

/* ==========================================================================
   24. Das Haus im Schnitt im ersten Bild (Chef und User 2026-10-03)
   User: «soll ich das animierte haus nochmals einbauen?», Chef: «Gern»,
   «Zu Oberst wärmepumpen», «Muss hervorgehoben werden». Variante «Element
   im ersten Bild» (DESIGN.md 2): Text links, das Haus rechts, am Handy das
   Haus oben. Die Waermepumpe leuchtet dauerhaft, ihr Schild ist rot.
   Zeichnung: partials/haus-svg.ejs, Schilder: partials/haus.ejs.
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero-home--haus {
  align-items: center;
  background: var(--primary-deep);
}

.hero-home--haus .hero-content {
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding-top: clamp(84px, 11vh, 128px);
  padding-bottom: clamp(2rem, 6vh, 4rem);
}

.hero-home--haus .hero-text {
  min-width: 0;
}

.hero-home--haus h1 {
  font-size: clamp(2.4rem, 11vw, 4rem);
  max-inline-size: none;
}

/* Das Zeilenfenster schneidet nur oben und unten (der Titel steigt von
   unten herein), nie seitlich: ein langes Wort bleibt ganz. */
.hero-home--haus h1 .rise {
  overflow-x: visible;
  overflow-y: clip;
  /* seitlich kein Ausgleich noetig: der Titel steht buendig mit dem Kicker */
  padding-inline: 0;
  margin-inline: 0;
}

@media (min-width: 901px) {
  .hero-home--haus .hero-content {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  /* 88 px bei 1440 (DESIGN.md 3), kleiner nur dort, wo die Spalte enger
     wird: die laengste Zeile «Wärmepumpen» (gemessen 685 px bei 88 px)
     bleibt von 901 bis 2560 px in ihrer Spalte. */
  .hero-home--haus h1 {
    font-size: clamp(2.6rem, 6.2vw, 5.5rem);
  }
}

/* --- Zeichnung und Schilder ------------------------------------------- */
.haus--hero {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 820px;
  justify-self: end;
}

.haus--hero .haus__figure {
  margin: 0;
}

.haus__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Linien auf Marineblau */
.haus--hero .haus__line { fill: none; stroke: rgba(232, 236, 248, 0.8); stroke-width: 2.4; stroke-linejoin: miter; stroke-linecap: square; }
.haus--hero .haus__line--thin { stroke: rgba(200, 207, 221, 0.78); stroke-width: 1.6; }
.haus--hero .haus__line--ground,
.haus--hero .haus__line--roof { stroke: var(--silver-1); stroke-width: 3; }
.haus--hero .haus__board { fill: rgba(255, 255, 255, 0.07); }
.haus--hero .haus__air { fill: none; stroke: rgba(200, 207, 221, 0.6); stroke-width: 1.4; stroke-dasharray: 2 3; }
.haus--hero .haus__fan,
.haus--hero .haus__fan-blades { fill: none; stroke: rgba(200, 207, 221, 0.6); stroke-width: 1.6; }
.haus--hero .haus__fan-blades { transform-box: fill-box; transform-origin: 50% 50%; }
.haus--hero .haus__floors { display: none; }
.haus--hero .haus__panel { fill: #1c2a78; stroke: rgba(232, 236, 248, 0.7); stroke-width: 1; }
.haus--hero .haus__cells { fill: none; stroke: rgba(232, 236, 248, 0.45); stroke-width: 0.9; }
.haus--hero .haus__wire { fill: none; stroke: var(--accent-on-dark); stroke-width: 4.2; stroke-linejoin: miter; stroke-linecap: butt; transition: opacity var(--dur-base) var(--ease-out); }
.haus--hero .haus__leader { fill: none; stroke: rgba(232, 236, 248, 0.5); stroke-width: 1.2; }
.haus--hero .haus__node { fill: var(--primary-deep); stroke: var(--accent-on-dark); stroke-width: 3; transform-box: fill-box; transform-origin: 50% 50%; transition: fill var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-set); }
.haus--hero .haus__zone > * { fill: var(--accent-on-dark); fill-opacity: 0; transition: fill-opacity var(--dur-base) var(--ease-out); }
.haus--hero a.haus__zone { cursor: pointer; }

/* Die Waermepumpe ist hervorgehoben: Geraet in vollen Linien, Zone und
   Anschluss leuchten dauerhaft. */
.haus--hero .haus__wp { stroke: var(--silver-1); stroke-width: 2.2; }
.haus--hero .haus__zone--wp.is-active > * { fill-opacity: 0.24; }
.haus--hero [data-node="wp"] { fill: var(--accent-on-dark); transform: scale(1.35); }

/* Schilder: Lage aus den Koordinaten der Zeichnung (640 x 540). */
.haus__schilder {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.schild {
  position: absolute;
  left: calc(var(--x) / 640 * 100%);
  /* Zeichnung im Hero ab y 100 (viewBox 0 100 640 440, haus-svg crop) */
  top: calc((var(--y) - 100) / 440 * 100%);
  max-inline-size: none;
  pointer-events: auto;
}

.schild--rechts { transform: translateY(-50%); }
.schild--links { transform: translate(-100%, -50%); }
.schild--oben { transform: translateY(-100%); }

.schild a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 24px;
  padding: 0.38em 0.7em;
  border: 1px solid rgba(232, 236, 248, 0.42);
  border-radius: 6px;
  background: rgba(10, 0, 74, 0.78);
  color: var(--silver-1);
  /* Bei 1440 genau 13 px (Skala der Site), am Handy mindestens 11 px. */
  font-size: clamp(0.6875rem, 2.2cqi, 0.8rem);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.schild--wp a {
  padding: 0.5em 0.8em 0.55em;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--white);
  font-size: clamp(0.75rem, 2.75cqi, 1rem);
}

.schild__sub {
  font-size: 0.8rem;
  font-weight: 500;
}

.schild a:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

.schild a:active {
  transform: scale(0.97);
}

/* Schmale Zeichnung (Handy): Unterzeile weg, sonst laeuft das rote Schild
   ueber den Rand. */
@container (max-width: 520px) {
  .schild__sub { display: none; }
}

/* Zeigen oder Fokus auf ein Schild (oder seine Zone im Bild): Zone,
   Anschluss und Leitungsweg leuchten, die uebrigen Leitungen treten
   zurueck. Tastaturfokus immer, Zeiger nur hinter (hover: hover). */
.haus--hero:has(.schild a:focus-visible) .haus__wire { opacity: 0.25; }
.haus--hero:has([data-gewerk="dach"] a:focus-visible) .haus__zone--dach > *,
.haus--hero:has([data-gewerk="klima"] a:focus-visible) .haus__zone--klima > *,
.haus--hero:has([data-gewerk="bad"] a:focus-visible) .haus__zone--bad > *,
.haus--hero:has([data-gewerk="bau"] a:focus-visible) .haus__zone--bau > *,
.haus--hero:has([data-gewerk="wp"] a:focus-visible) .haus__zone--wp > *,
.haus--hero:has([data-gewerk="technik"] a:focus-visible) .haus__zone--technik > * { fill-opacity: 0.18; }
.haus--hero:has([data-gewerk="dach"] a:focus-visible) [data-wire="solar"],
.haus--hero:has([data-gewerk="klima"] a:focus-visible) :is([data-wire="solar"], [data-wire="klima"]),
.haus--hero:has([data-gewerk="bad"] a:focus-visible) [data-wire="haus"],
.haus--hero:has([data-gewerk="bau"] a:focus-visible) [data-wire="haus"],
.haus--hero:has([data-gewerk="wp"] a:focus-visible) :is([data-wire="solar"], [data-wire="wp"], [data-wire="waerme"]),
.haus--hero:has([data-gewerk="technik"] a:focus-visible) :is([data-wire="waerme"], [data-wire="heizkoerper"], [data-wire="haus"]) { opacity: 1; }
.haus--hero:has([data-gewerk="dach"] a:focus-visible) [data-node="dach"],
.haus--hero:has([data-gewerk="klima"] a:focus-visible) [data-node="klima"],
.haus--hero:has([data-gewerk="bad"] a:focus-visible) [data-node="bad"],
.haus--hero:has([data-gewerk="bau"] a:focus-visible) [data-node="bau"],
.haus--hero:has([data-gewerk="technik"] a:focus-visible) [data-node="technik"] { fill: var(--accent-on-dark); transform: scale(1.35); }

@media (hover: hover) and (pointer: fine) {
  .schild a:hover { border-color: var(--accent-on-dark); background: var(--accent); color: var(--white); }
  .schild--wp a:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
  .haus--hero:has(.schild:hover, .haus__zone:hover) .haus__wire { opacity: 0.25; }
  .haus--hero:has([data-gewerk="dach"]:hover, .haus__zone--dach:hover) .haus__zone--dach > *,
  .haus--hero:has([data-gewerk="klima"]:hover, .haus__zone--klima:hover) .haus__zone--klima > *,
  .haus--hero:has([data-gewerk="bad"]:hover, .haus__zone--bad:hover) .haus__zone--bad > *,
  .haus--hero:has([data-gewerk="bau"]:hover, .haus__zone--bau:hover) .haus__zone--bau > *,
  .haus--hero:has([data-gewerk="wp"]:hover, .haus__zone--wp:hover) .haus__zone--wp > *,
  .haus--hero:has([data-gewerk="technik"]:hover, .haus__zone--technik:hover) .haus__zone--technik > * { fill-opacity: 0.18; }
  .haus--hero:has([data-gewerk="dach"]:hover, .haus__zone--dach:hover) [data-wire="solar"],
  .haus--hero:has([data-gewerk="klima"]:hover, .haus__zone--klima:hover) :is([data-wire="solar"], [data-wire="klima"]),
  .haus--hero:has([data-gewerk="bad"]:hover, .haus__zone--bad:hover) [data-wire="haus"],
  .haus--hero:has([data-gewerk="bau"]:hover, .haus__zone--bau:hover) [data-wire="haus"],
  .haus--hero:has([data-gewerk="wp"]:hover, .haus__zone--wp:hover) :is([data-wire="solar"], [data-wire="wp"], [data-wire="waerme"]),
  .haus--hero:has([data-gewerk="technik"]:hover, .haus__zone--technik:hover) :is([data-wire="waerme"], [data-wire="heizkoerper"], [data-wire="haus"]) { opacity: 1; }
  .haus--hero:has([data-gewerk="dach"]:hover, .haus__zone--dach:hover) [data-node="dach"],
  .haus--hero:has([data-gewerk="klima"]:hover, .haus__zone--klima:hover) [data-node="klima"],
  .haus--hero:has([data-gewerk="bad"]:hover, .haus__zone--bad:hover) [data-node="bad"],
  .haus--hero:has([data-gewerk="bau"]:hover, .haus__zone--bau:hover) [data-node="bau"],
  .haus--hero:has([data-gewerk="technik"]:hover, .haus__zone--technik:hover) [data-node="technik"] { fill: var(--accent-on-dark); transform: scale(1.35); }
  .haus--hero:has(.haus__zone--dach:hover) [data-gewerk="dach"] a,
  .haus--hero:has(.haus__zone--klima:hover) [data-gewerk="klima"] a,
  .haus--hero:has(.haus__zone--bad:hover) [data-gewerk="bad"] a,
  .haus--hero:has(.haus__zone--bau:hover) [data-gewerk="bau"] a,
  .haus--hero:has(.haus__zone--technik:hover) [data-gewerk="technik"] a { border-color: var(--accent-on-dark); background: var(--accent); color: var(--white); }
}

/* --- Handy und kleines Tablet: das Haus oben, der Text darunter --------- */
@media (max-width: 900px) {
  .hero-home--haus {
    align-items: flex-start;
  }

  .hero-home--haus .hero-content {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 76px;
    padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }

  /* Ein order-Tausch auf der Seite (DESIGN.md 5): im DOM steht der Text
     zuerst (Titel vor den Schildern), im Bild steht das Haus oben. */
  .haus--hero {
    order: -1;
    justify-self: center;
    max-width: 560px;
  }
}

/* Kurze Handy-Fenster: das Haus kleiner, damit Titel und Hauptknopf in den
   ersten Bildschirm passen. */
@media (max-width: 900px) and (max-height: 760px) {
  .haus--hero { max-width: min(560px, 36svh * 1.4545); }
  .hero-home--haus h1 { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-home--haus .hero-actions { margin-top: 18px; }
}

/* Kicker am Handy auf einer Zeile (bei 0.2em Sperrung brach er um). */
@media (max-width: 480px) {
  .hero-home--haus p.hero-kicker { letter-spacing: 0.08em; }
}

/* --- Auftritt beim Laden (DESIGN.md 6): das Haus zeichnet sich, die
   Module setzen an, die Leitung wird verlegt, die Schilder setzen an ihren
   Anschluessen an, zuletzt die Waermepumpe; ihr Ventilator dreht einmal.
   Reines CSS, laeuft ohne main.js; unter reduce ist alles sofort da. ---- */
@keyframes haus-linie { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes haus-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes haus-modul { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes haus-knoten { from { transform: scale(0); } }
@keyframes haus-zone { from { fill-opacity: 0; } }
@keyframes schild-an { from { opacity: 0; transform: translateX(var(--von, -12px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes schild-wp { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes haus-luefter { to { transform: rotate(360deg); } }

/* Tempo des Auftritts: User 2026-10-03 «die animation sieht nice aus, aber
   könntest du es irgendwie um 33% verlangsamen?», danach «noch weitere 25
   langsamer pls». Alle Dauern und Verzoegerungen des Hauses haengen an
   diesem Faktor (1 = Fassung vom Morgen, 1.333 = ein Drittel langsamer,
   1.667 = davon nochmals 25 Prozent). Der Auftritt endet damit nach rund
   2,9 s statt 1,73 s (handbuch/DESIGN.md 6 nennt 1,8 s; Wunsch des Users). */
:root {
  --haus-t: 1.667;
}

@media (prefers-reduced-motion: no-preference) {
  .js .haus--hero .haus__line,
  .js .haus--hero .haus__wire,
  .js .haus--hero .haus__leader {
    stroke-dasharray: 1;
  }

  .js .haus--hero .haus__line { animation: haus-linie calc(820ms * var(--haus-t)) var(--ease-lay) calc(120ms * var(--haus-t)) backwards; }
  .js .haus--hero .haus__line--thin { animation-delay: calc(240ms * var(--haus-t)); }
  .js .haus--hero .haus__detail { animation-duration: calc(640ms * var(--haus-t)); animation-delay: calc(380ms * var(--haus-t)); }
  .js .haus--hero :is(.haus__board, .haus__air, .haus__fan, .haus__fan-blades) { animation: haus-auf calc(420ms * var(--haus-t)) var(--ease-out) calc(620ms * var(--haus-t)) backwards; }

  .js .haus--hero .haus__module { animation: haus-modul calc(var(--dur-set) * var(--haus-t)) var(--ease-set) backwards; }
  .js .haus--hero .haus__module:nth-child(1) { animation-delay: calc(420ms * var(--haus-t)); }
  .js .haus--hero .haus__module:nth-child(2) { animation-delay: calc(480ms * var(--haus-t)); }
  .js .haus--hero .haus__module:nth-child(3) { animation-delay: calc(540ms * var(--haus-t)); }
  .js .haus--hero .haus__module:nth-child(4) { animation-delay: calc(600ms * var(--haus-t)); }

  .js .haus--hero .haus__wire { animation: haus-linie calc(360ms * var(--haus-t)) linear backwards; }
  .js .haus--hero [data-wire="solar"] { animation-duration: calc(380ms * var(--haus-t)); animation-delay: calc(760ms * var(--haus-t)); }
  .js .haus--hero [data-wire="klima"] { animation-duration: calc(120ms * var(--haus-t)); animation-delay: calc(860ms * var(--haus-t)); }
  .js .haus--hero [data-wire="wp"] { animation-duration: calc(240ms * var(--haus-t)); animation-delay: calc(980ms * var(--haus-t)); }
  .js .haus--hero [data-wire="haus"] { animation-duration: calc(380ms * var(--haus-t)); animation-delay: calc(1000ms * var(--haus-t)); }
  .js .haus--hero [data-wire="heizkoerper"] { animation-duration: calc(200ms * var(--haus-t)); animation-delay: calc(1100ms * var(--haus-t)); }
  .js .haus--hero [data-wire="waerme"] { animation-duration: calc(260ms * var(--haus-t)); animation-delay: calc(1100ms * var(--haus-t)); }

  .js .haus--hero .haus__node { animation: haus-knoten calc(380ms * var(--haus-t)) var(--ease-set) backwards; }
  .js .haus--hero [data-node="dach"] { animation-delay: calc(800ms * var(--haus-t)); }
  .js .haus--hero [data-node="klima"] { animation-delay: calc(940ms * var(--haus-t)); }
  .js .haus--hero [data-node="technik"] { animation-delay: calc(1120ms * var(--haus-t)); }
  .js .haus--hero [data-node="wp"] { animation-delay: calc(1200ms * var(--haus-t)); }
  .js .haus--hero [data-node="bau"] { animation-delay: calc(1280ms * var(--haus-t)); }
  .js .haus--hero [data-node="bad"] { animation-delay: calc(1340ms * var(--haus-t)); }

  .js .haus--hero .haus__leader { animation: haus-linie calc(180ms * var(--haus-t)) linear backwards; }
  .js .haus--hero [data-leader="dach"] { animation-delay: calc(860ms * var(--haus-t)); }
  .js .haus--hero [data-leader="klima"] { animation-delay: calc(1000ms * var(--haus-t)); }
  .js .haus--hero [data-leader="technik"] { animation-delay: calc(1180ms * var(--haus-t)); }
  .js .haus--hero [data-leader="wp"] { animation-delay: calc(1240ms * var(--haus-t)); }
  .js .haus--hero [data-leader="bau"] { animation-delay: calc(1320ms * var(--haus-t)); }
  .js .haus--hero [data-leader="bad"] { animation-delay: calc(1380ms * var(--haus-t)); }

  .js .schild a { animation: schild-an calc(460ms * var(--haus-t)) var(--ease-set) backwards; }
  .js .schild--links a { --von: 12px; }
  .js .schild[data-gewerk="dach"] a { animation-delay: calc(900ms * var(--haus-t)); }
  .js .schild[data-gewerk="klima"] a { animation-delay: calc(1040ms * var(--haus-t)); }
  .js .schild[data-gewerk="technik"] a { animation-delay: calc(1200ms * var(--haus-t)); }
  .js .schild[data-gewerk="bau"] a { animation-delay: calc(1240ms * var(--haus-t)); }
  .js .schild[data-gewerk="bad"] a { animation-delay: calc(1290ms * var(--haus-t)); }
  .js .schild--wp a { transform-origin: 0 100%; animation: schild-wp calc(480ms * var(--haus-t)) var(--ease-set) calc(1220ms * var(--haus-t)) backwards; }

  .js .haus--hero .haus__zone--wp.is-active > * { animation: haus-zone calc(480ms * var(--haus-t)) var(--ease-out) calc(1220ms * var(--haus-t)) backwards; }
  .js .haus--hero .haus__fan-blades { animation: haus-auf calc(420ms * var(--haus-t)) var(--ease-out) calc(620ms * var(--haus-t)) backwards, haus-luefter calc(520ms * var(--haus-t)) var(--ease-out) calc(1220ms * var(--haus-t)) 1; }

}

/* Pflichtfelder im Formular (Chef 2026-10-03): Stern in der Akzentfarbe,
   ein Hinweis ueber dem Formular. */
.pflicht {
  color: var(--accent);
  font-weight: 700;
}

.pflicht-hinweis {
  margin: 0 0 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* Waermepumpen im Menue hervorgehoben (Chef 2026-10-03): roter Punkt und
   fett, damit der Punkt nicht mit dem Unterstrich der aktiven Seite
   verwechselt wird. */
.main-nav a.nav-hervor {
  font-weight: 700;
}

.main-nav a.nav-hervor::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent-on-dark);
}

/* Anliegen-Leiste: die Waermepumpe steht zuoberst und ist getoent
   (Chef 2026-10-03: «Muss hervorgehoben werden»). Ton statt Seitenstreifen
   (DESIGN.md 5 verbietet farbige Streifen an Karten). */
.anliegen__liste .anliegen--hervor a {
  background: var(--accent-soft);
}

.anliegen--hervor .anliegen__sache {
  font-weight: 700;
}

.anliegen--hervor .anliegen__gewerk {
  color: var(--accent-deep);
}

/* Seite /waermepumpe: Kopf mit dem Ausschnitt des Hauses um die
   Waermepumpe (kein eigenes Foto vorhanden), 72 Prozent der Fensterhoehe
   wie die uebrigen Unterseiten. */
.hero-home.kopf-wp {
  min-height: 72svh;
}

.haus--kopf {
  max-width: 460px;
}

.haus--hero .haus__svg--zoom .haus__line { stroke-width: 1.5; }
.haus--hero .haus__svg--zoom .haus__line--thin,
.haus--hero .haus__svg--zoom .haus__air,
.haus--hero .haus__svg--zoom .haus__fan,
.haus--hero .haus__svg--zoom .haus__fan-blades { stroke-width: 1; }
.haus--hero .haus__svg--zoom .haus__line--roof,
.haus--hero .haus__svg--zoom .haus__line--ground { stroke-width: 1.8; }
.haus--hero .haus__svg--zoom .haus__wp { stroke-width: 1.6; }
.haus--hero .haus__svg--zoom .haus__wire { stroke-width: 2.6; }
.haus--hero .haus__svg--zoom .haus__node { stroke-width: 2; }

@media (max-width: 900px) {
  .haus--kopf { max-width: 300px; }
}

/* Textlink auf dunklem Grund (Kopf /waermepumpe). */
.btn-ghost--hell {
  color: var(--white);
}

.btn-ghost--hell:focus-visible {
  outline-color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost--hell:hover { color: var(--accent-on-dark); }
}

/* Ausschnitt bleibt Ausschnitt: ohne overflow hidden zeichnete das SVG den
   Rest des Hauses ueber den Titel (Kopf /waermepumpe). */
.haus__svg--zoom {
  overflow: hidden;
}

.quote-form .pflicht,
.service-select legend .pflicht {
  color: var(--accent);
}

/* Kernsatz: ein ganzer Satz ab 40 Zeichen hoechstens 72 px (DESIGN.md 3,
   layout-check seit 2026-10-03). */
@media (min-width: 1200px) {
  .kernsatz__text { font-size: 4.375rem; }
}

/* Kopfzeile mit «Wärmepumpen» als erstem Punkt (2026-10-03): der Punkt ist
   laenger als «Start», das absolut zentrierte Menue lief bei 1081 bis
   1200 px ueber Logo und Knopf und bei 1440 px ins Telefon (gemessen).
   Engere Abstaende ueberall, zwischen 1081 und 1279 px steht das Menue im
   Fluss zwischen Logo und Knopf, das Telefon erst ab 1420 px. */
@media (min-width: 1081px) {
  .main-nav ul {
    gap: 1rem;
  }
}

@media (min-width: 1081px) and (max-width: 1279px) {
  .main-nav {
    position: static;
    transform: none;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .main-nav ul {
    gap: 0.4rem;
  }

  .main-nav a,
  .dropdown-toggle {
    padding: 7px 8px;
  }
}

.header-tel {
  display: none;
}

@media (min-width: 1420px) {
  .header-tel {
    display: inline-flex;
  }
}

/* Breite Schirme: Text und Haus teilen sich die Breite, das Haus waechst
   bis 820 px (bei 1920 vorher 708 px neben viel leerer Flaeche). */
@media (min-width: 1600px) {
  .hero-home--haus:not(.kopf-wp) .hero-content {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --- Befunde design-review Runde 10 (2026-10-03) ----------------------- */

/* Echte Fotos im ersten Bild: der Hero der Startseite laesst unten Platz,
   der randlose Belegstreifen folgt direkt (DESIGN.md 0 und 2). */
@media (min-width: 901px) {
  .hero-home--haus:not(.kopf-wp) {
    min-height: 86svh;
  }
}

/* Kicker: Sperrung hoechstens 0.12em, Versalformen fuer Satzzeichen
   (DESIGN.md 3, typo-check). */
.hero-home p.hero-kicker,
.hero p.hero-kicker,
.hero-kicker {
  letter-spacing: 0.12em;
  font-feature-settings: "case" 1;
}

/* Telefon im Kopf auch zwischen 1120 und 1419 px: nur das Zeichen, die
   Nummer bleibt fuer Screenreader im Link (Kopf ohne Telefon, Review S2).
   Darunter fehlt der Platz (bei 1081 px wurde der Kopf 91 px hoch). */
@media (min-width: 1120px) and (max-width: 1419px) {
  .header-tel {
    display: inline-flex;
    padding: 9px;
  }

  .header-tel span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Handy-Menue: deckende Flaeche (der Titel schien durch), der hervor-
   gehobene Punkt steht links an seinem Wort. */
@media (max-width: 1080px) {
  .main-nav {
    background: var(--primary);
  }

  .main-nav a.nav-hervor {
    justify-content: flex-start;
    gap: 0.6rem;
  }
}

/* Foto im roten Band ohne Schlagschatten (DESIGN.md 5). */
.band-accent-media {
  box-shadow: none;
}

/* Kopf /waermepumpe: die Linien des Ausschnitts laufen links weich aus,
   statt offen im Leeren zu enden. */
.haus--kopf .haus__svg {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

/* Pfeil im Menue als SVG (das Zeichen fiel auf eine Ersatzschrift zurueck). */
.dropdown-toggle .caret {
  display: inline-flex;
}

/* Verlegen statt Agentur-Kurve: die Linien beschleunigen und sitzen dann
   (DESIGN.md 6, Review anti-ai 2026-10-03). */
:root {
  --ease-lay: cubic-bezier(0.6, 0, 0.25, 1);
}

/* Kicker der Startseite als Faktzeile: normale Schreibung, keine Sperrung. */
.hero-home p.hero-kicker.hero-kicker--fakt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.86);
}

/* Telefon im Hero als Textlink mit Hoerer, nicht als zweite Pille. */
.hero-tel {
  gap: 10px;
}

.hero-tel::after {
  display: none;
}

.hero-tel svg {
  flex: none;
}

/* Kein Einzelwort in der letzten Zeile der Kleinzeilen (typo-check 390). */
.anliegen__gewerk small {
  text-wrap: pretty;
}

/* Das rote Schild ragt rechts ueber die Zeichnung hinaus (bei 1440 bis 4 px
   an den Fensterrand). Zeichnung und Schilder ruecken gemeinsam ein. */
.haus--hero:not(.haus--kopf) .haus__figure {
  margin-right: 7%;
}

.haus--hero:not(.haus--kopf) .haus__schilder {
  inset: 0 7% 0 0;
}

/* Am Handy liegt die Angebots-Pille nicht ueber dem Text, solange der
   Cookie-Hinweis offen ist (design-review 2026-10-03); WhatsApp bleibt. */
@media (max-width: 760px) {
  body:has(.cookie-banner.is-visible) .quote-fab {
    opacity: 0;
    visibility: hidden;
  }
}

/* Momente beim Scrollen mit Richtung statt reinem Eintritt (motion-check,
   DESIGN.md 6 Punkt 4): das Teamfoto zieht von unten auf wie ein Teil, das
   angesetzt wird; die schwebenden Knoepfe fahren von rechts an ihren Platz. */
@media (prefers-reduced-motion: no-preference) {
  /* Zugeschnitten wird das Bild im Block, nicht der Block selbst: ein ganz
     zugeschnittenes Ziel meldet dem IntersectionObserver keine Flaeche und
     loest nie aus (gemessen). */
  [data-inview="aufziehen"] > * {
    clip-path: inset(0);
    transition: clip-path var(--dur-set) var(--ease-lay);
  }

  .js [data-inview="aufziehen"]:not(.is-in) > * {
    clip-path: inset(100% 0 0 0);
  }

  .whatsapp-float,
  .quote-fab {
    translate: 18px 0;
    transition: opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      translate var(--dur-slow) var(--ease-out);
  }

  body:has(.site-header.scrolled) .whatsapp-float,
  body:has(.site-header.scrolled) .quote-fab,
  body.no-hero .whatsapp-float,
  body.no-hero .quote-fab {
    translate: none;
  }
}

@media print {
  [data-inview="aufziehen"] > * { clip-path: none !important; }
}

/* Sprungziele nicht unter dem fixierten Kopf (User 2026-10-03: «wenn ich auf
   klima klicke dann sehe ich den abschnitt klima nicht»). Gemessen vorher:
   17 von 24 Ankern auf /shk, /photovoltaik und /waermepumpe landeten mit der
   Ueberschrift unter dem Kopf (60 px Desktop, 96 px Handy). Gilt auch fuer
   den Fokussprung auf ein fehlerhaftes Formularfeld. */
[id] {
  scroll-margin-top: 116px;
}

@media (min-width: 1081px) {
  [id] {
    scroll-margin-top: 84px;
  }
}