/* ==========================================================================
   Lenz Gebaeudeservice - Stylesheet
   Aesthetik: Handwerk / Industrie. Anthrazit-Chrome, Signal-Amber als Akzent.
   Ein Akzentton, ein Radius-System (2px), ein Theme (hell, mit Dark-Mode-Token).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Flaechen hell */
  --c-page:        #ffffff;   /* Seitenhintergrund */
  --c-surface:     #ffffff;   /* Karten, Formularfelder */
  --c-surface-alt: #eff4f9;   /* abgesetzte Baender, Bild-Fallback */

  /* Chrome dunkel (Navigation, Hero, Footer, CTA-Band).
     Abgeleitet aus dem Logo-Blau, eine Stufe dunkler, damit weisser Text
     sicher ueber WCAG AA liegt. */
  --c-chrome:      #16304a;   /* tiefes Navy, Weiss darauf 11.6:1 */
  --c-chrome-alt:  #1e3f5f;   /* Karten innerhalb der dunklen Flaechen */
  --c-chrome-line: #2d5578;

  /* Logofarben, unveraendert aus der Wortmarke */
  --c-brand:       #22456b;   /* dunkles Blau der Logoform */
  --c-brand-light: #7faad5;   /* helles Blau der Logoform */

  /* Text */
  --c-ink:         #14243a;   /* Fliesstext auf hell, leicht blaustichig */
  --c-ink-soft:    #55677d;   /* 5.1:1 auf --c-page, WCAG AA ok */
  --c-ink-invert:  #f4f5f6;
  --c-ink-invert-soft: #a8bccf; /* 7.4:1 auf --c-chrome */

  /* Linien */
  --c-line:        #dfe6ed;
  --c-line-strong: #bdcad7;

  /* Akzent: Signalfarbe Handwerk.
     Regel: Amber wird NUR als Flaeche/Linie eingesetzt, nie als Textfarbe auf
     Weiss (dort waere der Kontrast zu gering). Text auf Amber ist immer
     --c-chrome (Kontrast 8.9:1). */
  --c-accent:       #f2a30f;
  --c-accent-dark:  #d98f00;  /* Hover */
  --c-accent-deep:  #8a5c00;  /* Amber als Textfarbe, nur auf hell: 4.8:1 */

  /* Status */
  --c-error:       #a8232b;
  --c-error-bg:    #fbeced;

  /* Form.
     Dokumentiertes Radien-System, drei Stufen, ueberall gleich angewendet:
       --r-pill  Bedienelemente: Buttons, Chips, Tags
       --r       Flaechen: Karten, Kacheln, Bilder, Baender
       --r-in    Eingaben: Formularfelder, kleine Bausteine       */
  --r-pill: 999px;
  --r: 14px;
  --r-in: 10px;
  --shadow: 0 1px 2px rgba(23,27,32,.06), 0 8px 24px -12px rgba(23,27,32,.18);
  --shadow-lift: 0 2px 4px rgba(23,27,32,.08), 0 16px 32px -14px rgba(23,27,32,.24);

  /* Raster */
  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Typografie.
     Kein Webfont: null Requests, sofortiger LCP. In /fonts/README.txt steht,
     wie ein selbst gehosteter Grotesk spaeter eingehaengt wird. */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-page:        #101c28;
    --c-surface:     #17273a;
    --c-surface-alt: #13202f;
    --c-chrome:      #0b1620;
    --c-chrome-alt:  #17273a;
    --c-chrome-line: #263d54;
    --c-ink:         #eaf0f6;
    --c-ink-soft:    #9fb2c4;
    --c-line:        #263d54;
    --c-line-strong: #37506a;
    --c-brand-light: #9cc0e4;
    --c-accent-deep: #f2a30f; /* auf dunkel darf Amber Textfarbe sein */
    --c-error:       #f08a92;
    --c-error-bg:    #2a1518;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 16px 32px -14px rgba(0,0,0,.7);
  }
}

/* --------------------------------------------------------------------------
   2. RESET / BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Ankerziele bleiben unter dem klebenden Kopf sichtbar */
:target, [id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Das hidden-Attribut muss jede eigene display-Regel schlagen. Ohne diese
   Zeile bleiben Elemente wie Buttons trotz hidden sichtbar, weil .btn ein
   eigenes display setzt. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--c-surface-alt); } /* Fallback statt Broken-Icon */

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

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-in);
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--c-accent); color: #14243a;
  padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--r) var(--r);
  transition: transform .15s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT-HILFEN
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--chrome { background: var(--c-chrome); color: var(--c-ink-invert); }
.section--alt { background: var(--c-surface-alt); }

.stack > * + * { margin-top: 1rem; }
.rule { height: 1px; background: var(--c-line); border: 0; }

/* --------------------------------------------------------------------------
   4. TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.12; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }

.h-display { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.1rem); letter-spacing: -.03em; }
.h-section  { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.5rem); }
.h-card     { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.2; }

.lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 58ch;
}
.section--chrome .lead, .lead--invert { color: var(--c-ink-invert-soft); }

.prose { max-width: 65ch; }
.prose p + p, .prose > * + * { margin-top: 1rem; }
.prose h3 { margin-top: 2.25rem; font-size: 1.3rem; }
.prose a { color: var(--c-accent-deep); text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* Kleinlabel. Sparsam eingesetzt, siehe Kommentar in den Seiten. */
.kicker {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
.section--chrome .kicker { color: var(--c-accent); }

/* Amber-Kante links: das wiederkehrende Handwerks-Signal der Seite */
.edge {
  border-left: 4px solid var(--c-accent);
  padding-left: clamp(1rem, 2vw, 1.5rem);
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.75rem;
  min-height: 50px;
  border: 2px solid transparent; border-radius: var(--r-pill);
  font-weight: 700; font-size: .97rem; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;              /* CTA bricht nie um */
  transition: background-color .15s var(--ease), border-color .15s var(--ease),
              transform .12s var(--ease), color .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Primaer: Amber-Flaeche, Text anthrazit. Kontrast 8.9:1 */
.btn--primary { background: var(--c-accent); color: #14243a; border-color: var(--c-accent); }
.btn--primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); }

/* Sekundaer auf hell: anthrazit-Rahmen */
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-ink); background: var(--c-surface); }

/* Sekundaer auf dunkel */
.btn--ghost-invert { background: transparent; color: var(--c-ink-invert); border-color: #58626d; }
.btn--ghost-invert:hover { border-color: var(--c-ink-invert); background: rgba(255,255,255,.07); }

/* WhatsApp: eigene Markenfarbe, dunkler Ton fuer AA-Kontrast mit weissem Text */
.btn--whatsapp { background: #128c4a; color: #fff; border-color: #128c4a; }
.btn--whatsapp:hover { background: #0f7540; border-color: #0f7540; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Textlink mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; text-decoration: none;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 2px;
}
.arrow-link svg { transition: transform .18s var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.section--chrome .arrow-link { color: var(--c-ink-invert); }

/* --------------------------------------------------------------------------
   6. SERVICEZEILE UND NAVIGATION
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--c-brand);
  color: #dbe7f2;
  font-size: .87rem;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 42px; padding-block: .35rem;
}
.topbar-list { display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; list-style: none; padding: 0; }
.topbar-list li { display: flex; align-items: center; }
/* Symbol und Text liegen zusammen im Link, damit die ganze Zeile trifft. */
.topbar-list a { display: inline-flex; align-items: center; gap: .5rem; }
.topbar-list svg { flex: none; color: var(--c-accent); }
.topbar a { text-decoration: none; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar-wa {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: #ffffff; white-space: nowrap;
}
.topbar-wa svg { color: #6ee7a0; }
@media (max-width: 899px) {
  .topbar-hours, .topbar-wa { display: none; }
  .topbar-list { gap: .35rem 1.1rem; }
  .topbar-inner { justify-content: flex-start; }
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-chrome); color: var(--c-ink-invert);
  border-bottom: 1px solid var(--c-chrome-line);
}
.nav {
  display: flex; align-items: center; gap: 1.5rem;
  height: 74px;                      /* Kappe: unter 80px */
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; margin-right: auto;
}
.brand-mark { flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text span { font-size: .72rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-invert-soft); }

.nav-list { display: flex; align-items: center; gap: .25rem; list-style: none; padding: 0; }
.nav-list a, .nav-toggle-sub {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem; border-radius: var(--r-pill);
  text-decoration: none; font-size: .93rem; font-weight: 600;
  color: var(--c-ink-invert); background: none; border: 0; cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav-list a:hover, .nav-toggle-sub:hover { background: rgba(255,255,255,.1); }
.nav-list a[aria-current="page"] { background: rgba(242,163,15,.18); color: var(--c-accent); }

.nav .btn { padding: .65rem 1.35rem; min-height: 46px; font-size: .92rem; }

/* Dropdown Leistungen */
.has-sub { position: relative; }
.nav-toggle-sub svg { transition: transform .18s var(--ease); }
.has-sub[data-open="true"] .nav-toggle-sub svg { transform: rotate(180deg); }
.subnav {
  position: absolute; top: calc(100% + .6rem); left: 0;
  min-width: 290px; list-style: none; padding: .45rem; margin: 0;
  background: var(--c-chrome-alt);
  border: 1px solid var(--c-chrome-line); border-radius: var(--r);
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.65);
  display: none;
}
.has-sub[data-open="true"] .subnav { display: block; }
.subnav a { display: block; padding: .6rem .75rem; font-weight: 600; }
.subnav ul { list-style: none; margin: 0; padding: 0; }

/* Burger */
.nav-burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: inherit; }
.nav-burger span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-burger span + span { margin-top: 6px; }

@media (max-width: 1023px) {
  .nav-burger { display: block; order: 3; }
  .nav-panel {
    position: fixed; inset: 74px 0 auto 0;
    background: var(--c-chrome);
    border-bottom: 1px solid var(--c-chrome-line);
    padding: 1rem var(--gutter) 1.75rem;
    max-height: calc(100dvh - 74px); overflow-y: auto;
    display: none;
  }
  .site-header[data-menu="open"] .nav-panel { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav-list a, .nav-toggle-sub { padding: .8rem .9rem; font-size: 1.02rem; width: 100%;
    border-radius: var(--r-in); }
  .nav-toggle-sub { justify-content: space-between; }
  .subnav {
    position: static; display: block; min-width: 0; border: 0; box-shadow: none;
    background: none; padding: 0 0 .35rem .9rem; margin-left: .5rem;
    border-left: 2px solid var(--c-chrome-line);
  }
  .subnav a { font-weight: 500; font-size: .95rem; }
  .nav-cta { margin-top: 1rem; display: block; }
  .nav-cta .btn { width: 100%; }
}
@media (min-width: 1024px) {
  .nav-panel { display: contents; }
  .nav-cta { display: contents; }
}

/* --------------------------------------------------------------------------
   7. HERO
   Vollflaechiges Foto mit Abdunklung, Text links, Anfragekarte rechts.
   Die Abdunklung ist bewusst kraeftig: Sie muss den Kontrast auch dann
   tragen, wenn spaeter ein helles Foto eingesetzt wird.
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--c-chrome); color: #ffffff;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(14,18,22,.96) 0%,
      rgba(14,18,22,.90) 38%,
      rgba(14,18,22,.72) 62%,
      rgba(14,18,22,.55) 100%);
}
@media (max-width: 899px) {
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(14,18,22,.86) 0%, rgba(14,18,22,.94) 55%);
  }
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; gap: clamp(1.75rem, 3vw, 3rem);
  align-items: center;
  /* Knapp gehalten: Der Hero traegt jetzt das komplette Anfrageformular und
     soll trotzdem in den ersten Bildschirm passen. */
  padding-block: clamp(1.5rem, 2.8vw, 2.5rem);
}
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 1160px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }

.hero h1 { max-width: 17ch; }
/* Zweifarbige Ueberschrift: zweite Zeile traegt die Signalfarbe */
.h-accent { color: var(--c-accent); display: block; }
.hero .lead { margin-top: 1.15rem; color: #ccd4dc; max-width: 46ch; }
.hero .btn-row { margin-top: 1.85rem; }

/* Auszeichnung ueber der Ueberschrift */
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(242,163,15,.16);
  border: 1px solid rgba(242,163,15,.42);
  color: var(--c-accent);
  border-radius: var(--r-pill);
  padding: .4rem 1rem; margin-bottom: 1.1rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* Anfragekarte im Hero. Der kuerzeste Weg vom Foto zur Anfrage. */
.hero-card {
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r);
  padding: clamp(1.35rem, 2.5vw, 1.9rem);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55);
}
.hero-card h2 { font-size: 1.3rem; }
.hero-card > p { margin-top: .4rem; font-size: .93rem; color: var(--c-ink-soft); }
.hero-card .form-card { padding: 0; border: 0; box-shadow: none; background: none; }

/* --------------------------------------------------------------------------
   7b. VERTRAUENSLEISTE unter dem Hero
   -------------------------------------------------------------------------- */
.trustbar { background: var(--c-accent); color: #14243a; }
.trustbar-grid {
  display: grid; gap: 1.25rem;
  padding-block: 1.5rem;
}
@media (min-width: 620px) { .trustbar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .trustbar-grid { grid-template-columns: repeat(4, 1fr); } }
.trustbar-item { display: flex; gap: .85rem; align-items: center; }
.trustbar-item svg { flex: none; }
.trustbar-item b { display: block; font-size: 1rem; line-height: 1.25; }
/* Eigene Zeilenhoehe. Die 1,65 des Fliesstexts sind fuer den kleinen
   Zweizeiler in der Leiste viel zu luftig, die Zeilen fallen auseinander. */
.trustbar-item span {
  display: block; margin-top: .15rem;
  font-size: .87rem; line-height: 1.35; color: #4a3c17;
}
@media (min-width: 980px) {
  .trustbar-item + .trustbar-item { border-left: 1px solid rgba(23,27,32,.2); padding-left: 1.25rem; }
}

/* --------------------------------------------------------------------------
   7c. SEITENKOPF der Unterseiten, gleiche Bildsprache wie der Hero
   -------------------------------------------------------------------------- */
.pagehead { position: relative; isolation: isolate; background: var(--c-chrome);
  color: #ffffff; overflow: hidden; }
.pagehead .hero-bg::after {
  background: linear-gradient(100deg,
    rgba(14,18,22,.96) 0%, rgba(14,18,22,.90) 42%,
    rgba(14,18,22,.74) 68%, rgba(14,18,22,.58) 100%);
}
@media (max-width: 899px) {
  .pagehead .hero-bg::after {
    background: linear-gradient(180deg, rgba(14,18,22,.88) 0%, rgba(14,18,22,.95) 60%);
  }
}
.pagehead-inner { position: relative; z-index: 1; padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }
.pagehead .lead { margin-top: 1rem; color: #ccd4dc; }
.pagehead h1 { max-width: 19ch; }
.pagehead .btn-row { margin-top: 1.75rem; }
.pagehead-grid { position: relative; z-index: 1;
  display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .pagehead-grid { grid-template-columns: 1.05fr .95fr; } }

/* Brotkrumen */
.crumbs { position: relative; z-index: 1; font-size: .85rem; color: #a9b4bf; padding-top: 1.25rem; }
.crumbs a { text-decoration: none; border-bottom: 1px solid currentColor; }
.crumbs span { opacity: .55; padding-inline: .4rem; }

/* --------------------------------------------------------------------------
   8. REGIONSBAND (Einsatzgebiet)
   -------------------------------------------------------------------------- */
.region-band { border-bottom: 1px solid var(--c-line); }
.region-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 800px) { .region-grid { grid-template-columns: minmax(0,15rem) 1fr; gap: 2.5rem; } }
.orte { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.orte li {
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  padding: .35rem .75rem; font-size: .92rem; font-weight: 600;
  background: var(--c-surface);
}

/* --------------------------------------------------------------------------
   9. LEISTUNGS-BENTO (genau 4 Zellen, gemischte Groessen)
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 1rem; }
@media (min-width: 760px)  { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, auto); }
  .bento > :first-child { grid-column: span 2; grid-row: span 2; }
  .bento > :nth-child(4) { grid-column: span 3; }
}

.tile {
  position: relative; display: flex; flex-direction: column;
  min-height: 220px; padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid var(--c-line); border-radius: var(--r);
  background: var(--c-surface);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tile:hover { border-color: var(--c-line-strong); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile:active { transform: translateY(0); }
.tile p { color: var(--c-ink-soft); margin-top: .6rem; font-size: .97rem; }
.tile .arrow-link { margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }
.tile .tag {
  align-self: flex-start; margin-bottom: .9rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: var(--c-accent); color: #14243a; padding: .22rem .55rem; border-radius: var(--r);
}

/* Zelle mit Foto. Der Text sitzt geschlossen unten, wo die Abdunklung am
   staerksten ist. So bleibt der Kontrast unabhaengig vom spaeteren Bild
   sicher ueber WCAG AA, auch bei hellen Aufnahmen. */
.tile--photo {
  min-height: 340px; justify-content: flex-end;
  border: 0; color: #ffffff;
}
/* Ebenen ausdruecklich festgelegt: Bild unten, Abdunklung darueber, Text oben.
   Ohne die explizite z-index-Angabe erbt das Bild als direktes Kind die Ebene
   des Textes und deckt die Abdunklung ab. */
.tile--photo img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.tile--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(10,13,16,.94) 0%,
      rgba(10,13,16,.86) 40%,
      rgba(10,13,16,.60) 70%,
      rgba(10,13,16,.40) 100%);
}
.tile--photo > *:not(img) { position: relative; z-index: 2; }
.tile--photo p { color: #dfe4e9; }
.tile--photo .arrow-link { color: #ffffff; margin-top: 0; padding-top: 1.25rem; }
/* Kennzeichnung oben links, damit sie nicht in den Textblock unten rutscht */
.tile--photo .tag { position: absolute; z-index: 2; top: clamp(1.35rem, 2.5vw, 2rem); left: clamp(1.35rem, 2.5vw, 2rem); margin: 0; }

/* Zelle mit Amber-Flaeche */
.tile--accent { background: var(--c-accent); border-color: var(--c-accent); color: #14243a; }
.tile--accent p { color: #3d2f10; }
.tile--accent .arrow-link { color: #14243a; border-bottom-color: #14243a; }
.tile--accent .tag { background: #14243a; color: var(--c-accent); }

/* --------------------------------------------------------------------------
   10. SPLIT (Bild + Text)
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 880px) {
  .split { grid-template-columns: .9fr 1.1fr; }
  .split--flip > :first-child { order: 2; }
}
.split img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r); }
.split--wide img { aspect-ratio: 4/3; }

/* --------------------------------------------------------------------------
   11. ABLAUF (nummernfreie Schrittfolge auf einer Amber-Linie)
   -------------------------------------------------------------------------- */
.flow { display: grid; gap: 0; border-top: 3px solid var(--c-accent); }
@media (min-width: 820px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow > div { padding: 1.6rem 1.5rem 1.6rem 0; }
@media (min-width: 820px) {
  .flow > div + div { border-left: 1px solid var(--c-line); padding-left: 1.75rem; }
}
@media (max-width: 819px) { .flow > div + div { border-top: 1px solid var(--c-line); } }
.flow h3 { font-size: 1.15rem; }
.flow p { color: var(--c-ink-soft); margin-top: .5rem; font-size: .97rem; }

/* --------------------------------------------------------------------------
   12. LEISTUNGSLISTE (Karten statt Bullet-Liste)
   -------------------------------------------------------------------------- */
.cardgrid { display: grid; gap: 1rem; }
@media (min-width: 660px)  { .cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cardgrid--3 { grid-template-columns: repeat(3, 1fr); } }
.mini {
  padding: 1.25rem 1.35rem;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
  border-left: 4px solid var(--c-accent);
}
.mini h3 { font-size: 1.05rem; }
.mini p { color: var(--c-ink-soft); font-size: .95rem; margin-top: .4rem; }

@media (min-width: 1040px) { .cardgrid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Anklickbare Variante der kleinen Karte, fuer die Querverweise am
   Seitenende. Das ganze Feld ist Ziel, nicht nur die Zeile darin. */
a.mini--link {
  display: flex; flex-direction: column; gap: .1rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease), transform .15s var(--ease),
              box-shadow .15s var(--ease);
}
a.mini--link:hover, a.mini--link:focus-visible {
  border-color: var(--c-accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .5);
}
a.mini--link .arrow-link {
  margin-top: auto; padding-top: .9rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; font-size: .92rem; color: var(--c-accent-deep);
}

/* Haken direkt im Seitenkopf, ueber den Schaltflaechen */
.hero-haken {
  list-style: none; margin: 1.35rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.hero-haken li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .93rem; font-weight: 600; color: var(--c-ink-invert-soft);
}
.hero-haken svg { flex: none; color: var(--c-accent); }

/* Abgrenzung: was NICHT angeboten wird */
.limits { background: var(--c-surface-alt); border-radius: var(--r); padding: clamp(1.35rem, 3vw, 2rem); }
.limits ul { margin: .85rem 0 0; padding-left: 1.15rem; color: var(--c-ink-soft); }
.limits li + li { margin-top: .4rem; }

/* Steckbrief auf der Ueber-mich-Seite: knappe Daten zum Betrieb als
   Beschreibungsliste. Auf schmalen Geraeten stehen Bezeichnung und Angabe
   untereinander, ab Tablet nebeneinander mit fester Spalte links. */
.steckbrief {
  margin-top: 2rem; border-top: 3px solid var(--c-accent);
}
.steckbrief > div {
  display: grid; gap: .15rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--c-line);
}
@media (min-width: 560px) {
  .steckbrief > div { grid-template-columns: 11rem 1fr; gap: 1rem; align-items: baseline; }
}
.steckbrief dt {
  font-weight: 650; font-size: .88rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
.steckbrief dd { margin: 0; color: var(--c-ink); }

/* Verweis am Fuss einer Spalte der Dreierreihe */
.flow .arrow-link { margin-top: .9rem; }

/* Haken-Liste */
.checks { list-style: none; padding: 0; margin-top: 1.25rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; }
.checks li + li { margin-top: .7rem; }
.checks svg { flex: none; margin-top: .34rem; color: var(--c-accent); }

/* --------------------------------------------------------------------------
   13. REFERENZEN
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: 1rem; }
@media (min-width: 780px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
.quote {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r);
  padding: clamp(1.35rem, 3vw, 1.9rem);
  display: flex; flex-direction: column;
}
.quote blockquote { font-size: 1.06rem; line-height: 1.5; font-weight: 500; }
.quote figcaption {
  margin-top: auto; padding-top: 1.1rem;
  font-size: .88rem; color: var(--c-ink-soft);
}
.quote figcaption b { display: block; color: var(--c-ink); font-size: .95rem; }

/* --------------------------------------------------------------------------
   14. CTA-BAND
   -------------------------------------------------------------------------- */
.cta-band { background: var(--c-chrome); color: var(--c-ink-invert); }
.cta-grid { display: grid; gap: 1.75rem; align-items: center; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
@media (min-width: 880px) { .cta-grid { grid-template-columns: 1.3fr auto; gap: 3rem; } }

/* Inhaber-Vertrauenszeile auf den Leistungsseiten */
.owner-note {
  display: flex; gap: 1.1rem; align-items: center;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent); border-radius: var(--r);
  padding: 1.1rem 1.35rem;
}
.owner-note img { width: 64px; height: 64px; flex: none; border-radius: 50%; object-fit: cover; }
.owner-note p { font-size: .95rem; color: var(--c-ink-soft); }
.owner-note b { color: var(--c-ink); }

/* Groessere Fassung fuer die Subunternehmerseite: Dort entscheidet ein
   Betrieb, wen er auf seine Baustelle schickt. Ein Passbild von 64 Pixeln
   traegt diese Aussage nicht. */
.owner-note--gross { gap: 1.4rem; padding: 1.35rem 1.5rem; align-items: center; }
.owner-note--gross img { width: 132px; height: 132px; border-radius: var(--r-in); }
.owner-note--gross p { font-size: 1rem; line-height: 1.6; }
@media (max-width: 520px) {
  .owner-note--gross { flex-direction: column; align-items: flex-start; }
  .owner-note--gross img { width: 108px; height: 108px; }
}

/* --------------------------------------------------------------------------
   15. FORMULAR
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r);
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
  box-shadow: var(--shadow);
}
.form-grid { display: grid; gap: 1.15rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-weight: 700; font-size: .93rem; }
.field .hint { font-size: .84rem; color: var(--c-ink-soft); }
.req { color: var(--c-accent-deep); font-weight: 800; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem; min-height: 50px;
  background: var(--c-page);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-in);
  color: var(--c-ink);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-soft); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--c-ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--c-accent); outline-offset: 1px;
  border-color: var(--c-ink); background: var(--c-surface);
}
.field select { appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 22px, calc(100% - 13px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }

/* Datei-Upload */
.dropzone {
  border: 2px dashed var(--c-line-strong); border-radius: var(--r-in);
  padding: 1.35rem; text-align: center; background: var(--c-page);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--c-accent); background: var(--c-surface); }
.dropzone input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dropzone .fake-btn {
  display: inline-block; margin-bottom: .55rem;
  border: 2px solid var(--c-line-strong); border-radius: var(--r-pill);
  padding: .5rem 1.1rem; font-weight: 700; font-size: .92rem; cursor: pointer;
}
.dropzone:hover .fake-btn { border-color: var(--c-ink); }
.dropzone .hint { font-size: .85rem; color: var(--c-ink-soft); }
.filelist { list-style: none; padding: 0; margin-top: .8rem; font-size: .9rem; text-align: left; }
.filelist li { display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem .8rem; background: var(--c-surface-alt); border-radius: var(--r-in); }
.filelist li + li { margin-top: .35rem; }
.filelist span { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }

/* Einwilligung */
.consent { display: flex; gap: .7rem; align-items: flex-start; }
.consent input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .18rem; accent-color: var(--c-accent-deep); }
.consent label { font-weight: 400; font-size: .92rem; color: var(--c-ink-soft); }
.consent a { color: var(--c-accent-deep); }

/* Fehler / Erfolg / Ladezustand */
.field-error { display: none; font-size: .87rem; font-weight: 600; color: var(--c-error); }
.field[data-invalid="true"] .field-error { display: block; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--c-error); background: var(--c-error-bg); }

.form-status { display: none; border-radius: var(--r); padding: 1rem 1.15rem; font-weight: 600; }
.form-status[data-state="error"] { display: block; background: var(--c-error-bg); color: var(--c-error);
  border: 1px solid currentColor; }
.form-status[data-state="ok"] { display: block; background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-accent); border-left: 4px solid var(--c-accent); }

.btn[data-busy="true"] { pointer-events: none; opacity: .72; }
.btn[data-busy="true"] .btn-label::after {
  content: ""; display: inline-block; width: 1em; text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .btn[data-busy="true"] .btn-label::after { animation: none; content: "..."; } }

/* --------------------------------------------------------------------------
   16. KONTAKTDATEN-BLOCK
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; }
.contact-list li { border-top: 1px solid var(--c-line); }
.contact-list li:last-child { border-bottom: 1px solid var(--c-line); }
/* Die Zeile ohne Verweis, etwa der Standort, braucht denselben Abstand wie
   die verlinkten Zeilen, sonst sitzt sie enger als ihre Nachbarn. */
.contact-list li > p:first-child { padding-top: 1rem; }
.contact-list li > p:last-child  { padding-bottom: 1rem; }
.contact-list dt, .contact-list .k { display: block; font-size: .82rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink-soft); }
.contact-list .v { display: block; font-size: 1.08rem; font-weight: 600; margin-top: .2rem; }
/* Der ganze Eintrag ist die Trefferflaeche, nicht nur der Wert. */
.contact-list a {
  display: block; padding-block: 1rem;
  color: var(--c-ink); text-decoration: none;
}
.contact-list a .v { text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-list a:hover { background: var(--c-surface-alt); }
.contact-list a:hover .v { text-decoration-color: var(--c-ink); }
.contact-list a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.map-slot {
  aspect-ratio: 16/9; width: 100%;
  background: var(--c-surface-alt);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r);
  display: grid; place-content: center; text-align: center; padding: 1.5rem;
  color: var(--c-ink-soft); font-size: .92rem;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--c-chrome); color: var(--c-ink-invert-soft); font-size: .93rem; }
.footer-grid { display: grid; gap: 2.25rem; padding-block: clamp(2.75rem, 5vw, 3.75rem); }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-invert); margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--c-ink-invert); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--c-accent); }
.site-footer .brand { font-size: 1.05rem; margin-bottom: .75rem; }
.footer-bottom {
  border-top: 1px solid var(--c-chrome-line);
  padding-block: 1.35rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .87rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom li + li { margin-top: 0; }

/* --------------------------------------------------------------------------
   18. PLATZHALTER-MARKIERUNG
   Sichtbar, damit vor dem Livegang nichts uebersehen wird.
   Zum Deaktivieren: diesen Block entfernen.
   -------------------------------------------------------------------------- */
.ph {
  background: rgba(242,163,15,.2);
  box-shadow: inset 0 -2px 0 var(--c-accent);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   19. BEWEGUNG
   MOTION_INTENSITY 3: nur Hover/Focus/Active plus ein dezenter Einblendeffekt
   fuer Inhalte, die beim Scrollen in den Viewport kommen (IntersectionObserver).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Grundfall: das markierte Element blendet als Ganzes ein.
     Liegen mehrere davon nebeneinander, kommen sie nacheinander. Den
     Zaehler --i setzt initReveal, gedeckelt bei 7. */
  [data-js="on"] .reveal { opacity: 0; transform: translateY(14px); }
  .reveal[data-shown="true"] {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * .07s);
  }

  /* Raster: der Kasten selbst bleibt stehen, seine Kacheln staffeln sich.
     Die Markierung data-staffel vergibt initReveal ab drei Kindern. */
  [data-js="on"] .reveal[data-staffel] { opacity: 1; transform: none; }
  [data-js="on"] .reveal[data-staffel] > * { opacity: 0; transform: translateY(14px); }
  .reveal[data-staffel][data-shown="true"] > * {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * .07s);
  }

  /* Kopfzeile bekommt beim Scrollen einen Schatten, damit sie sich vom
     Inhalt abhebt. Kein Groessenwechsel: der wuerde den Text darunter
     bei jedem Umschalten um ein paar Pixel verschieben. */
  .site-header {
    transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
  }
  .site-header[data-gescrollt="true"] {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .26);
  }
}

/* --------------------------------------------------------------------------
   19b. SCROLLGEBUNDENE BEWEGUNG
   Laeuft ueber animation-timeline und damit im Compositor, ohne Scroll-
   Listener. Browser ohne Unterstuetzung zeigen schlicht den Normalzustand,
   deshalb steht hier nichts, was fuer die Lesbarkeit gebraucht wird.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Hero: das Bild wandert langsamer als die Seite. Die Ueberdeckung von
       8 % faengt die Verschiebung ab, damit unten kein Rand frei wird. */
    .hero-bg img {
      animation: hero-schieben linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
      will-change: transform;
    }
    @keyframes hero-schieben {
      from { transform: scale(1.08) translate3d(0, -1.5%, 0); }
      to   { transform: scale(1.08) translate3d(0, 2.5%, 0); }
    }

    /* Fotos setzen sich beim Eintreten sanft in ihren Rahmen */
    .gallery img,
    .svc-figure img,
    .split > img {
      animation: bild-setzen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    @keyframes bild-setzen {
      from { transform: scale(1.06); }
      to   { transform: scale(1); }
    }
  }
}

/* Messpunkt fuer den Schatten der Kopfzeile, ohne Einfluss auf das Layout */
.kopf-wache {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   20. DRUCK
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .btn, .map-slot { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* --------------------------------------------------------------------------
   21. RECHTSHINWEIS auf Impressum und Datenschutz
   -------------------------------------------------------------------------- */
.legal-warn {
  background: var(--c-accent);
  color: #14243a;
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 2.5rem;
}
.legal-warn h2 { font-size: 1.15rem; }
.legal-warn p { margin-top: .6rem; max-width: 70ch; }
.legal-warn p + p { margin-top: .5rem; }

.legal dl { margin-top: .75rem; }
.legal dt { font-weight: 700; margin-top: 1rem; }
.legal dd { margin: .1rem 0 0; color: var(--c-ink-soft); }

/* --------------------------------------------------------------------------
   22. ERGAENZUNGEN zum Foto-Hero
   -------------------------------------------------------------------------- */
.btn--block { width: 100%; }

/* Kacheln der Leistungen bekommen ein Bild, damit das Raster nicht rein
   textlich wirkt. Siehe Referenzen: Foto plus kurzer Text verkauft besser. */
.tile--img { padding: 0; overflow: hidden; }
.tile--img .tile-figure { position: relative; aspect-ratio: 16 / 10; }
.tile--img .tile-figure img { width: 100%; height: 100%; object-fit: cover; }
.tile--img .tile-body { padding: clamp(1.25rem, 2.2vw, 1.6rem); display: flex;
  flex-direction: column; flex: 1; }
.tile--img .tile-body .arrow-link { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

/* --------------------------------------------------------------------------
   23. ANLAGEN-GALERIE
   Fuenf Bilder, fuenf Zellen, keine Luecke. Das erste Bild laeuft breit,
   die uebrigen bilden ein ruhiges Raster darunter.
   -------------------------------------------------------------------------- */
.gallery { display: grid; gap: 1rem; }
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery > :first-child { grid-column: span 2; }
}
@media (min-width: 1060px) {
  /* Vier Spalten, zwei Reihen, acht Zelleinheiten.
     Das grosse Bild belegt vier davon, die vier kleinen je eine.
     Damit geht das Raster genau auf, ohne Luecke. */
  .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; }
  .gallery > :first-child { grid-column: span 2; grid-row: span 2; }
}

.gallery figure {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r); background: var(--c-surface-alt);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figure { aspect-ratio: 4 / 3; }
@media (min-width: 1060px) {
  .gallery figure { aspect-ratio: auto; min-height: 220px; }
  .gallery > :first-child { min-height: 460px; }
}

/* Bildunterschrift nur, wenn sie eine echte Information traegt */
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1rem .8rem;
  background: linear-gradient(to top, rgba(10,16,24,.9), rgba(10,16,24,0));
  color: #ffffff; font-size: .88rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   24. GOOGLE-BEWERTUNGEN
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 900px) { .reviews { grid-template-columns: minmax(0, 20rem) 1fr; } }

.reviews-summary {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: clamp(1.35rem, 3vw, 1.9rem);
  box-shadow: var(--shadow);
}
.reviews-logo { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .95rem; }
.reviews-score {
  display: flex; align-items: baseline; gap: .6rem; margin-top: 1rem;
}
.reviews-score b { font-size: 2.9rem; line-height: 1; letter-spacing: -.03em; }
.reviews-score span { color: var(--c-ink-soft); font-size: .95rem; }
.reviews-summary .btn { margin-top: 1.35rem; width: 100%; }
.reviews-summary .arrow-link { margin-top: 1rem; font-size: .92rem; }

/* Sternreihe. Der Wert steht zusaetzlich als Text fuer Screenreader daneben. */
.stars { display: inline-flex; gap: 2px; margin-top: .55rem; }
.stars svg { color: #f2a30f; }
.stars svg.leer { color: var(--c-line-strong); }

.review-list { display: grid; gap: 1rem; }
@media (min-width: 620px) { .review-list { grid-template-columns: repeat(2, 1fr); } }

.review {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.6rem);
  display: flex; flex-direction: column;
}
.review-head { display: flex; align-items: center; gap: .75rem; }
.review-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  display: grid; place-content: center; font-weight: 700; font-size: 1rem;
}
.review-head b { display: block; font-size: .97rem; }
.review-head time { font-size: .84rem; color: var(--c-ink-soft); }
.review p { margin-top: .9rem; font-size: .97rem; line-height: 1.55; }
.review .stars { margin-top: .7rem; }

/* ==========================================================================
   25. KASTEN-BAUSTEINE
   Struktur nach dem Vorbild klassischer Handwerks-Seiten: Karten, die sich
   ueberlappen, Abzeichen auf Bildecken, runde Icon-Plaketten.
   Farben bleiben durchgehend Navy und Amber.
   ========================================================================== */

/* --- Runde Icon-Plakette, das wiederkehrende Element ---------------------- */
.chip {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; display: grid; place-content: center;
  background: var(--c-accent); color: #14243a;
}
.chip--sm { width: 38px; height: 38px; }
.chip--ghost { background: rgba(242,163,15,.16); color: var(--c-accent);
  border: 1px solid rgba(242,163,15,.35); }
/* Das Google-Zeichen steht frei, ohne umschliessenden Kreis */
.google-zeichen { flex: none; display: flex; }

/* --- Bewertungszeile im Hero --------------------------------------------- */
.hero-proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  margin-top: 1.65rem;
}
.hero-proof > div { display: flex; align-items: center; gap: .7rem; }
.hero-proof b { display: block; font-size: 1.02rem; line-height: 1.2; }
.hero-proof span { display: block; font-size: .84rem; color: var(--c-ink-invert-soft); }

/* --- Bild-Collage --------------------------------------------------------- */
.collage { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .collage { grid-template-columns: 1.25fr .75fr; }
  /* Beide Plaetze ausdruecklich vergeben. Ohne das vertauscht die
     automatische Verteilung Bild und Karte, sobald die Karte eine eigene
     Zeilenangabe bekommt. */
  .collage > figure { grid-column: 1; grid-row: 1 / -1; }
  .collage > .collage-card { grid-column: 2; grid-row: 1 / -1; align-self: end; }
  .collage > figure:only-child { grid-column: 1 / -1; }
}
.collage figure { position: relative; margin: 0; border-radius: var(--r);
  overflow: hidden; background: var(--c-surface-alt); }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage > :not(:first-child) { aspect-ratio: 4 / 3; }
/* Einspaltig braucht das grosse Bild ein eigenes Verhaeltnis. Ab zwei Spalten
   richtet es sich an der Hoehe der beiden rechten Kaesten aus, sonst enden die
   Spalten unterschiedlich hoch. */
.collage > :first-child { aspect-ratio: 3 / 4; }
@media (min-width: 720px) {
  .collage > :first-child { aspect-ratio: auto; height: 100%; }
}

/* Abzeichen, das ueber die Bildecke laeuft */
.collage-badge {
  position: absolute; top: 0; left: 0;
  background: var(--c-chrome); color: #ffffff;
  border-radius: 0 0 var(--r) 0;
  padding: 1rem 1.35rem .95rem 1.25rem;
  font-weight: 800; line-height: 1.05;
}
.collage-badge b { display: block; font-size: 1.5rem; letter-spacing: -.02em; }
.collage-badge span { display: block; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }

/* Auszeichnungskarte statt drittem Bild */
.collage-card {
  background: var(--c-accent); color: #14243a;
  border-radius: var(--r); padding: 1.35rem;
  display: flex; flex-direction: column; justify-content: center; gap: .75rem;
  aspect-ratio: 4 / 3;
}
.collage-card .chip { background: #14243a; color: var(--c-accent); }
.collage-card b { font-size: 1.12rem; line-height: 1.25; }

/* --- Inhaber-Visitenkarte -------------------------------------------------- */
.person { display: flex; align-items: center; gap: .85rem; }
.person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.person b { display: block; font-size: .98rem; }
.person span { display: block; font-size: .85rem; color: var(--c-ink-soft); }

/* --- Abschnittskopf mit Aktion rechts -------------------------------------- */
.sec-head { display: grid; gap: 1.25rem; align-items: end; margin-bottom: 2rem; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 1fr auto; } }

/* --- Icon-Karten plus Bildreihe -------------------------------------------- */
.svc-grid { display: grid; gap: 1rem; }
@media (min-width: 620px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-grid { grid-template-columns: repeat(4, 1fr); } }

.svc {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.svc:hover { border-color: var(--c-accent); transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.svc:active { transform: translateY(0); }
.svc-body { padding: 1.05rem 1.15rem; }
.svc-body h3 { font-size: 1rem; margin-top: .7rem; }
.svc-body p { margin-top: .4rem; font-size: .88rem; line-height: 1.5; color: var(--c-ink-soft); }

.svc-figure { position: relative; margin-top: auto; aspect-ratio: 16 / 9;
  background: var(--c-surface-alt); }
/* Absolut positioniert, damit allein das Seitenverhaeltnis der Flaeche zaehlt.
   Sonst bestimmt das Bild die Hoehe und ein Hochformat-Foto zieht die ganze
   Kartenreihe in die Laenge. */
.svc-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.svc-body > .chip { width: 38px; height: 38px; }
.svc-body > .chip svg { width: 19px; height: 19px; }

.svc-figure .chip {
  position: absolute; right: .75rem; bottom: .75rem;
  transition: transform .18s var(--ease);
}
.svc:hover .svc-figure .chip { transform: translateX(4px); }

/* --- Abschlussband mit Kontaktpanel ---------------------------------------- */
.closer { position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-chrome); color: #ffffff; }
.closer-grid { position: relative; z-index: 1; display: grid; gap: 0; }
@media (min-width: 940px) { .closer-grid { grid-template-columns: 1.15fr .85fr; } }

.closer-text { padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  padding-right: clamp(0rem, 4vw, 3rem); }
.closer-text .lead { color: #ccd4dc; margin-top: .9rem; }
.closer-text .btn-row { margin-top: 1.85rem; }

.closer-panel {
  background: var(--c-brand);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  align-self: center;
  margin-block: clamp(0rem, 3vw, 2.5rem);
}
.closer-panel ul { list-style: none; padding: 0; }
.closer-panel li { display: flex; gap: 1rem; align-items: flex-start; padding-block: 1.1rem; }
.closer-panel li + li { border-top: 1px solid rgba(255,255,255,.16); }
.closer-panel b { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9c3dc; }
.closer-panel a, .closer-panel .wert {
  display: block; margin-top: .2rem; font-size: 1.04rem; font-weight: 600;
  color: #ffffff; text-decoration: none;
}
.closer-panel a:hover { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   26. EINWILLIGUNGSFLAECHE fuer das Bewertungs-Widget
   Zwei-Klick-Loesung: Vor dem Klick wird nichts vom Anbieter geladen, es
   fliessen also keine Besucherdaten an Dritte. Erst der Klick startet das
   Widget. Die Entscheidung wird lokal gemerkt.
   -------------------------------------------------------------------------- */
.consent-gate {
  border: 2px dashed var(--c-line-strong); border-radius: var(--r);
  background: var(--c-surface-alt);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  display: grid; place-items: center; gap: .8rem;
  min-height: 260px;
}
.consent-gate h3 { font-size: 1.12rem; }
.consent-gate p { max-width: 46ch; font-size: .93rem; color: var(--c-ink-soft); }
.consent-gate .btn { margin-top: .35rem; }
.consent-gate a { color: var(--c-accent-deep); }
.consent-gate .chip { margin-bottom: .2rem; }

/* Ladezustand mit Platzhaltern in der Form des spaeteren Inhalts */
.consent-gate[data-state="laedt"] { display: block; text-align: left; border-style: solid; }
.skeleton-list { display: grid; gap: 1rem; }
@media (min-width: 620px) { .skeleton-list { grid-template-columns: repeat(2, 1fr); } }
.skeleton {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: 1.4rem; min-height: 168px;
}
.skeleton-line {
  height: 11px; border-radius: 6px; background: var(--c-line);
  margin-bottom: .7rem;
}
.skeleton-line:nth-child(1) { width: 45%; height: 15px; margin-bottom: 1.1rem; }
.skeleton-line:nth-child(4) { width: 72%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton-line { animation: pulsieren 1.4s ease-in-out infinite; }
  .skeleton-line:nth-child(2) { animation-delay: .1s; }
  .skeleton-line:nth-child(3) { animation-delay: .2s; }
  .skeleton-line:nth-child(4) { animation-delay: .3s; }
}
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Fehlerfall: der Anbieter antwortet nicht */
.consent-gate[data-state="fehler"] { border-color: var(--c-error); background: var(--c-error-bg); }
.consent-gate[data-state="fehler"] p { color: var(--c-error); }

/* --------------------------------------------------------------------------
   27. BEWERTUNGSLISTE fuer beliebig viele Eintraege
   Bei ungerader Anzahl laeuft der letzte Eintrag ueber die volle Breite,
   damit am Ende der Reihe keine Luecke stehen bleibt.
   -------------------------------------------------------------------------- */
@media (min-width: 620px) {
  .review-list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Auf der Startseite bekommen die Bewertungen mehr Platz: Zusammenfassung
   oben quer, Bewertungen darunter in drei Spalten. */
.reviews--breit { display: block; }
.reviews--breit .reviews-summary {
  display: grid; gap: 1.25rem; align-items: center;
  margin-bottom: 1.25rem;
}
@media (min-width: 800px) {
  .reviews--breit .reviews-summary { grid-template-columns: auto auto 1fr auto auto; }
  .reviews--breit .reviews-summary .btn { width: auto; margin-top: 0; }
  .reviews--breit .reviews-summary .arrow-link { margin-top: 0; }
}
.reviews--breit .reviews-score { margin-top: 0; }
.reviews--breit .reviews-logo { white-space: nowrap; }
@media (min-width: 1000px) {
  .reviews--breit .review-list { grid-template-columns: repeat(3, 1fr); }
  .reviews--breit .review-list > :last-child:nth-child(odd) { grid-column: auto; }
  /* Bei genau vier Eintraegen zwei Reihen zu zwei, das wirkt ruhiger als 3+1 */
  .reviews--breit .review-list:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Reine Sternebewertung ohne Text --------------------------------------- */
.review--kurz { justify-content: flex-start; }
.review-ohne-text {
  margin-top: .8rem; font-size: .9rem; color: var(--c-ink-soft); font-style: italic;
}

/* ==========================================================================
   28. MOBIL
   Ein Handwerker wird unterwegs gesucht. Alles hier zahlt darauf ein, dass
   die Seite mit einem Daumen bedienbar ist.
   ========================================================================== */

/* --- Tippflaechen: nichts unter 44 Pixeln --------------------------------- */
@media (max-width: 1023px) {
  .nav-burger {
    width: 48px; height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin-right: -.5rem;                 /* optisch buendig zur Kante */
  }
  .brand { min-height: 48px; }
}

@media (max-width: 767px) {
  /* Telefon und E-Mail muessen sich treffen lassen */
  .contact-list .v a,
  .contact-list .v {
    display: block; padding-block: .55rem; min-height: 44px;
  }
  .site-footer li a,
  .footer-bottom li a {
    display: inline-flex; align-items: center; padding-block: .6rem; min-height: 44px;
  }
  /* Telefon und E-Mail sind die wichtigsten Ziele der Seite */
  .topbar-list li a { display: flex; align-items: center; min-height: 44px; }
  .topbar-list li { min-height: 44px; }

  /* Kontaktpanel im Abschlussband */
  .closer-panel a { padding-block: .5rem; min-height: 44px; }
  .closer-panel li { padding-block: .85rem; }
  .arrow-link { padding-block: .5rem; }
  .crumbs a { display: inline-block; padding-block: .55rem; }
  .crumbs { padding-top: .75rem; }
  .subnav a { min-height: 46px; display: flex; align-items: center; }

  /* Einwilligungshaken etwas groesser, das Label bleibt mit klickbar */
  .consent input { width: 26px; height: 26px; }
  .consent label { padding-block: .2rem; }
}

/* --- Feste Aktionsleiste am unteren Rand ---------------------------------- */
.aktionsleiste { display: none; }

@media (max-width: 767px) {
  .aktionsleiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--c-chrome);
    border-top: 1px solid var(--c-chrome-line);
    /* Platz fuer die Gestenleiste auf randlosen Geraeten */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,.5);
  }
  .aktionsleiste a {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 58px; padding: .5rem;
    font-weight: 700; font-size: .97rem; text-decoration: none;
    color: #ffffff;
    transition: background-color .15s var(--ease);
  }
  .aktionsleiste a:active { background: rgba(255,255,255,.1); }
  .aktionsleiste a + a { border-left: 1px solid var(--c-chrome-line); }
  .aktionsleiste .wa { background: #128c4a; }
  .aktionsleiste .wa:active { background: #0f7540; }
  .aktionsleiste svg { flex: none; }

  /* Die Leiste darf nichts verdecken */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { margin-bottom: 0; }
}

/* --- Weitere Anpassungen fuers kleine Display ------------------------------ */
@media (max-width: 767px) {
  /* Buttons im Hero und in den Baendern ueber die volle Breite, gut treffbar */
  .hero .btn-row .btn,
  .cta-band .btn-row .btn,
  .closer-text .btn-row .btn,
  .pagehead .btn-row .btn { flex: 1 1 100%; }

  /* Bewertungszeile untereinander, sonst wird es gequetscht */
  .hero-proof { gap: .85rem; flex-direction: column; align-items: flex-start; }

  /* Abschlussband: Panel bekommt Aussenabstand statt Randkontakt */
  .closer-panel { margin-block: 0 clamp(2rem, 6vw, 3rem); }
  .closer-text { padding-right: 0; }

  /* Ortsliste kompakter */
  .orte li { font-size: .87rem; padding: .3rem .65rem; }

  /* Galerie und Collage einspaltig, aber nicht endlos hoch */
  .gallery figure, .collage > :first-child { aspect-ratio: 4 / 3; }
  /* Die Auszeichnungskarte braucht nur so viel Hoehe wie ihr Text */
  .collage-card { aspect-ratio: auto; padding: 1.25rem; }
}

/* Sehr schmale Geraete */
@media (max-width: 359px) {
  .aktionsleiste a { font-size: .9rem; gap: .4rem; }
}

/* --------------------------------------------------------------------------
   29. FUENFERRASTER
   Fuenf Karten gehen in drei oder vier Spalten nie sauber auf. Sechs Spalten
   loesen das: obere Reihe drei Karten zu je zwei Spalten, untere Reihe zwei
   Karten zu je drei. Keine Luecke, und die unteren bekommen mehr Gewicht.
   -------------------------------------------------------------------------- */
.grid-5 { display: grid; gap: 1rem; }
@media (min-width: 620px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .grid-5 { grid-template-columns: repeat(6, 1fr); }
  /* Muss die Vollbreiten-Regel aus der Zweispalten-Ansicht ueberschreiben,
     deshalb hier ebenfalls auf :last-child gemuenzt. */
  .grid-5 > *,
  .grid-5 > :last-child:nth-child(odd) { grid-column: span 2; }
  .grid-5 > :nth-child(4),
  .grid-5 > :nth-child(5):last-child { grid-column: span 3; }
}

/* Vierer bleibt beim gewohnten Raster */
.grid-4 { display: grid; gap: 1rem; }
@media (min-width: 620px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Erfahrungskarte: Icon, Titel, kurze Erlaeuterung */
.feld {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: clamp(1.25rem, 2.4vw, 1.7rem);
  display: flex; flex-direction: column; gap: .85rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.feld:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow); }
.feld h3 { font-size: 1.08rem; }
.feld p { color: var(--c-ink-soft); font-size: .95rem; }
.feld ul { list-style: none; padding: 0; margin-top: .2rem; font-size: .92rem; color: var(--c-ink-soft); }
.feld li { padding-left: 1.1rem; position: relative; }
.feld li + li { margin-top: .3rem; }
.feld li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-accent);
}

/* Zwischenüberschrift im Untermenü, trennt Privat- von Firmenkundschaft */
.subnav-trenner {
  padding: .85rem .75rem .4rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-ink-invert-soft);
  border-top: 1px solid var(--c-chrome-line); margin-top: .35rem;
}

/* Zwischenueberschrift in einer langen Kachelauswahl */
.kachel-gruppe {
  margin: 1.15rem 0 .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
.kachel-gruppe:first-of-type { margin-top: .25rem; }

/* ==========================================================================
   30. MEHRSTUFIGES ANFRAGEFORMULAR
   Ohne JavaScript stehen alle Schritte untereinander und das Formular
   funktioniert wie ein gewoehnliches. Mit JavaScript wird daraus ein
   Ablauf mit einzelnen Schritten.
   ========================================================================== */

/* --- Fortschritt ---------------------------------------------------------- */
.wiz-fortschritt { display: none; }
[data-js="on"] .wiz-fortschritt {
  display: flex; align-items: center; gap: .5rem;
  list-style: none; padding: 0; margin-bottom: 1.5rem;
}
.wiz-fortschritt li {
  flex: 1; display: flex; flex-direction: column; gap: .45rem;
  font-size: .78rem; font-weight: 600; color: var(--c-ink-soft);
}
.wiz-fortschritt li::before {
  content: ""; height: 4px; border-radius: 2px; background: var(--c-line);
  transition: background-color .25s var(--ease);
}
.wiz-fortschritt li[data-status="aktiv"] { color: var(--c-ink); }
.wiz-fortschritt li[data-status="aktiv"]::before,
.wiz-fortschritt li[data-status="fertig"]::before { background: var(--c-accent); }
@media (max-width: 559px) {
  .wiz-fortschritt li { font-size: 0; }        /* nur die Balken bleiben */
  .wiz-fortschritt li[data-status="aktiv"] { font-size: .78rem; }
}

/* --- Schritte -------------------------------------------------------------- */
.wiz-schritt { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wiz-schritt + .wiz-schritt { margin-top: 2.25rem; }
[data-js="on"] .wiz-schritt + .wiz-schritt { margin-top: 0; }
.wiz-schritt legend {
  padding: 0; font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25;
}
.wiz-hinweis { margin-top: .4rem; font-size: .93rem; color: var(--c-ink-soft); }
.wiz-schritt .form-grid { margin-top: 1.35rem; }

/* --- Kachelauswahl --------------------------------------------------------- */
.kachelwahl { display: grid; gap: .75rem; margin-top: 1.35rem; }
@media (min-width: 520px) { .kachelwahl { grid-template-columns: repeat(2, 1fr); } }
.kachelwahl--schmal { grid-template-columns: 1fr; }
@media (min-width: 520px) { .kachelwahl--schmal { grid-template-columns: repeat(2, 1fr); } }

.kachel { position: relative; display: block; cursor: pointer; }
.kachel input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.kachel > span {
  display: flex; align-items: flex-start; gap: .8rem;
  min-height: 64px; padding: .95rem 1.05rem;
  background: var(--c-surface);
  border: 2px solid var(--c-line); border-radius: var(--r-in);
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              transform .12s var(--ease);
}
.kachel:hover > span { border-color: var(--c-line-strong); }
.kachel:active > span { transform: translateY(1px); }
.kachel input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.kachel input:checked + span {
  border-color: var(--c-accent);
  background: rgba(242,163,15,.09);
}
.kachel b { display: block; font-size: .97rem; line-height: 1.3; }
.kachel small { display: block; margin-top: .2rem; font-size: .85rem; color: var(--c-ink-soft); }

/* Haken erscheint bei Auswahl */
.kachel-haken {
  flex: none; width: 22px; height: 22px; margin-left: auto; margin-top: .1rem;
  border: 2px solid var(--c-line-strong); border-radius: 50%;
  display: grid; place-content: center; color: transparent;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.kachel input:checked + span .kachel-haken {
  background: var(--c-accent); border-color: var(--c-accent); color: #14243a;
}
/* Mehrfachauswahl wird eckig dargestellt, damit der Unterschied klar ist */
.kachel input[type="checkbox"] + span .kachel-haken { border-radius: 6px; }

.kachel-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface-alt); color: var(--c-ink);
  display: grid; place-content: center;
}
.kachel input:checked + span .kachel-icon { background: var(--c-accent); color: #14243a; }

/* --- Gewaehlte Leistung als Merker oben ------------------------------------ */
.wiz-gewaehlt {
  display: none; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .7rem .95rem; margin-bottom: 1.25rem;
  background: var(--c-surface-alt); border-radius: var(--r-in);
  font-size: .92rem;
}
[data-js="on"] .wiz-gewaehlt[data-sichtbar="ja"] { display: flex; }
.wiz-gewaehlt b { font-weight: 700; }
.wiz-gewaehlt button {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-weight: 700; font-size: .9rem; color: var(--c-accent-deep);
  text-decoration: underline; text-underline-offset: 3px;
  padding: .35rem; min-height: 34px;
}

/* --- Steuerung ------------------------------------------------------------- */
.wiz-nav { display: none; }
[data-js="on"] .wiz-nav {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line);
}
.wiz-nav .btn--zurueck { margin-right: auto; }
@media (max-width: 519px) {
  .wiz-nav .btn { flex: 1 1 100%; }
  .wiz-nav .btn--zurueck { order: 2; }
}

/* Ohne JavaScript ist der normale Absendeknopf sichtbar, mit JavaScript nicht */
[data-js="on"] .wiz-ohne-js { display: none; }

/* --- Zusammenfassung im letzten Schritt ------------------------------------ */
.wiz-zusammenfassung {
  margin-top: 1.35rem; padding: 1.1rem 1.25rem;
  background: var(--c-surface-alt); border-radius: var(--r-in);
  border-left: 3px solid var(--c-accent);
  font-size: .93rem;
}
.wiz-zusammenfassung dt {
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-soft);
}
.wiz-zusammenfassung dd { margin: .15rem 0 0; }
.wiz-zusammenfassung div + div { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   31. FORMULAR IM HERO
   Die Karte ist deutlich schmaler als eine Seitenspalte. Deshalb hier eine
   kompaktere Fassung: zwei Spalten Kacheln ohne Unterzeile, engere Abstaende.
   Medienabfragen richten sich nach dem Fenster, nicht nach der Karte, also
   werden die Regeln ueber die Karte selbst gesetzt.
   -------------------------------------------------------------------------- */
.hero-card--wizard { padding: clamp(1.1rem, 2vw, 1.5rem); }

.hero-card--wizard .kachelwahl {
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem; margin-top: 1rem;
}
.hero-card--wizard .kachel > span {
  flex-direction: column; align-items: flex-start; gap: .45rem;
  min-height: 0; padding: .7rem .75rem;
}
/* Unterzeile und Haken kosten in der schmalen Karte nur Platz */
.hero-card--wizard .kachelwahl:first-of-type .kachel small,
.hero-card--wizard .kachelwahl:first-of-type .kachel-haken { display: none; }
.hero-card--wizard .kachel b { font-size: .9rem; line-height: 1.25; }
.hero-card--wizard .kachel-icon { width: 30px; height: 30px; }

.hero-card--wizard .wiz-schritt legend { font-size: 1.15rem; }
.hero-card--wizard .wiz-hinweis { font-size: .88rem; }
.hero-card--wizard .form-grid { gap: .8rem; margin-top: 1rem; }
.hero-card--wizard .field textarea { min-height: 92px; }
.hero-card--wizard .wiz-nav { margin-top: 1.25rem; padding-top: 1.1rem; }
.hero-card--wizard .wiz-fortschritt { margin-bottom: 1.1rem; }

/* Ab Schritt 2 wieder einspaltig, dort stehen laengere Beschriftungen */
.hero-card--wizard .wiz-schritt[data-schritt="2"] .kachelwahl { grid-template-columns: 1fr; }
.hero-card--wizard .wiz-schritt[data-schritt="2"] .kachel > span {
  flex-direction: row; align-items: center;
}
.hero-card--wizard .wiz-schritt[data-schritt="2"] .kachel-haken { display: grid; }

/* WhatsApp gehoert im Hero nicht in die Schrittsteuerung */
.hero-card--wizard .wiz-nav .btn--whatsapp { display: none; }

@media (max-width: 519px) {
  .hero-card--wizard .kachelwahl { grid-template-columns: 1fr; }
  .hero-card--wizard .kachel > span { flex-direction: row; align-items: center; }
}

/* Fuenf Leistungskacheln auf der Startseite: sechs Spalten, obere Reihe drei
   Kacheln zu je zwei, untere zwei zu je drei. Keine Luecke am Ende. */
/* Zwei, drei oder vier gleich breite Kacheln. Ohne diese Regeln griffe
   die Grundregel mit vier Spalten, und zwei Kacheln stuenden schmal
   nebeneinander statt die Reihe auszufuellen. */
@media (min-width: 1040px) {
  .svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Fuenf Kacheln, drei oben und zwei unten. Wird noch auf der
   Subunternehmerseite gebraucht, dort sind es fuenf Arbeitsbereiche. */
@media (min-width: 1040px) {
  .svc-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .svc-grid--5 > * { grid-column: span 2; }
  .svc-grid--5 > :nth-child(4), .svc-grid--5 > :nth-child(5) { grid-column: span 3; }
}
@media (min-width: 620px) and (max-width: 1039px) {
  .svc-grid--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Die Leistungskacheln auf der Startseite sind eine Uebersicht, kein
   Schwerpunkt. Ab Tablet bleiben sie deshalb kompakter als die Kartenraster
   auf den Unterseiten: flacheres Bild, engerer Innenabstand, kleinere
   Schrift. Am Handy bleibt alles wie gehabt, dort zaehlt Lesbarkeit. */
@media (min-width: 620px) {
  /* Feste Hoehe statt Seitenverhaeltnis: die untere Reihe ist breiter,
     mit einem Verhaeltnis waeren ihre Bilder deutlich hoeher als oben. */
  .svc-grid--4 .svc-figure { aspect-ratio: auto; height: 168px; }
  .svc-grid--4 .svc-body { padding: .85rem .95rem 1rem; }
  .svc-grid--4 .svc-body h3 { font-size: .95rem; margin-top: .55rem; }
  .svc-grid--4 .svc-body p { font-size: .84rem; margin-top: .3rem; }
  .svc-grid--4 .svc-body > .chip { width: 32px; height: 32px; }
  .svc-grid--4 .svc-body > .chip svg { width: 16px; height: 16px; }
  .svc-grid--4 .chip--sm { width: 26px; height: 26px; }
}

/* ==========================================================================
   32. ERSPARNISRECHNER
   ========================================================================== */
.rechner { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
/* Rasterzellen duerfen unter ihre Inhaltsbreite schrumpfen, sonst laeuft der
   Rechner auf schmalen Displays seitlich aus dem Bild. */
.rechner > * { min-width: 0; }
@media (min-width: 940px) { .rechner { grid-template-columns: 1.05fr .95fr; } }

.rechner-eingabe {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r); padding: clamp(1.35rem, 3vw, 2rem);
}

/* Schieberegler mit Wertanzeige */
.schieber + .schieber { margin-top: 1.5rem; }
.schieber-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .55rem;
}
.schieber-kopf label { font-weight: 700; font-size: .95rem; }
.schieber-wert {
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums;
  background: var(--c-surface-alt); border-radius: var(--r-pill);
  padding: .2rem .8rem; white-space: nowrap;
}
.schieber-hinweis { margin-top: .4rem; font-size: .85rem; color: var(--c-ink-soft); }
.schieber-hinweis--sammel {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--c-line);
  font-size: .82rem; line-height: 1.55;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: none; cursor: pointer; padding: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--c-line);
}
input[type="range"]::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--c-line);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%; background: var(--c-accent);
  border: 3px solid var(--c-surface);
  box-shadow: 0 1px 4px rgba(20,36,58,.35);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-accent); border: 3px solid var(--c-surface);
  box-shadow: 0 1px 4px rgba(20,36,58,.35);
}
input[type="range"]:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; }

/* Ausrichtung als kleine Kacheln */
.rechner .kachelwahl { grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .5rem; }
@media (min-width: 620px) {
  /* Vier Speicherstufen passen in eine Zeile, drei Ausrichtungen ebenso */
  .rechner .kachelwahl { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
.rechner .kachel > span { min-height: 0; padding: .65rem .8rem; }
.rechner .kachel b { font-size: .92rem; }
.rechner .kachel-haken { width: 18px; height: 18px; }

/* Ergebnis */
.rechner-ergebnis {
  background: var(--c-chrome); color: #ffffff;
  border-radius: var(--r); padding: clamp(1.35rem, 3vw, 2rem);
}
/* Mitlaufendes Ergebnis nur, wenn die Spalten nebeneinander stehen */
@media (min-width: 940px) {
  .rechner-ergebnis { position: sticky; top: 96px; }
}
.rechner-gross { margin-top: .35rem; }
.rechner-gross b {
  display: block; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem);
  line-height: 1; letter-spacing: -.03em; color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.rechner-gross span { display: block; margin-top: .4rem; color: #c3d0dc; font-size: .95rem; }

.rechner-zeilen { list-style: none; padding: 0; margin-top: 1.5rem; }
/* display auf der Zeile schlaegt das eingebaute [hidden], darum ausdruecklich.
   Ohne das stand die Speicherzeile auch ohne Speicher mit 0 kWh da. */
.rechner-zeilen li[hidden] { display: none; }
.rechner-zeilen li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .7rem; border-top: 1px solid var(--c-chrome-line);
  font-size: .94rem;
}
.rechner-zeilen span:first-child { color: #b6c4d2; }
.rechner-zeilen b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechner-ergebnis .btn { width: 100%; margin-top: 1.5rem; }

.rechner-fussnote {
  margin-top: 1.1rem; font-size: .82rem; line-height: 1.5; color: #9fb0c0;
}

/* Ohne JavaScript hat der Rechner keinen Nutzen */
.rechner-ohne-js {
  background: var(--c-surface-alt); border-radius: var(--r);
  padding: 1.35rem; font-size: .95rem; color: var(--c-ink-soft);
}
[data-js="on"] .rechner-ohne-js { display: none; }
/* Ohne Skript rechnet nichts, dann sollen auch keine Regler dastehen. Die
   Klasse hiess frueher .rechner-block; beim Umbau auf den Ablauf lief die
   Regel ins Leere und man sah funktionslose Schieber. */
.rechner--ablauf { display: none; }
[data-js="on"] .rechner--ablauf { display: block; }

/* Deutlicher Fotohinweis, wo ein Bild die Anfrage wirklich trägt */
.foto-wichtig {
  background: rgba(242,163,15,.12);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-in);
  padding: .85rem 1.05rem; margin-bottom: .8rem;
  font-size: .92rem; line-height: 1.55; color: var(--c-ink);
}
.foto-wichtig b { display: block; margin-bottom: .25rem; }

/* --- Kamera direkt aus dem Formular ---------------------------------------- */
.dropzone-knoepfe {
  display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
  margin-bottom: .6rem;
}
.dropzone .fake-btn { margin-bottom: 0; display: inline-flex; align-items: center; gap: .5rem; }

/* Die Kamera erscheint nur, wo es auch eine gibt. Auf dem Desktop waere der
   Knopf nur verwirrend, dort oeffnet capture ohnehin nur den Dateidialog. */
.fake-btn--kamera { display: none; }
@media (pointer: coarse) {
  .fake-btn--kamera {
    display: inline-flex;
    background: var(--c-accent); border-color: var(--c-accent); color: #14243a;
  }
  .dropzone:hover .fake-btn--kamera { border-color: var(--c-accent-dark); background: var(--c-accent-dark); }
  /* Auf dem Handy ist die Kamera der naheliegende Weg, deshalb zuerst */
  .dropzone-knoepfe { flex-direction: column; }
  .dropzone .fake-btn { justify-content: center; min-height: 48px; }
}

.dropzone input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }

.dropzone-leeren {
  margin-top: .7rem; background: none; border: 0; cursor: pointer;
  font-size: .88rem; font-weight: 600; color: var(--c-ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  padding: .4rem; min-height: 40px;
}
.dropzone-leeren:hover { color: var(--c-ink); }

/* --- Terminbuchung --------------------------------------------------------- */
.dauer-anzeige {
  display: flex; align-items: center; min-height: 50px;
  padding: .8rem 1rem;
  background: var(--c-surface-alt); border-radius: var(--r-in);
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.dauer-anzeige[data-zu-kurz="ja"] {
  background: var(--c-error-bg); color: var(--c-error);
}

/* Platz für den Kalender des Buchungsdienstes */
.kalender-platz {
  border: 2px dashed var(--c-line-strong); border-radius: var(--r);
  background: var(--c-surface-alt);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center;
  display: grid; place-items: center; gap: .7rem; min-height: 240px;
}
.kalender-platz p { max-width: 52ch; font-size: .93rem; color: var(--c-ink-soft); }
.kalender-platz code {
  font-family: var(--font-mono); font-size: .86rem;
  background: var(--c-surface); padding: .15rem .45rem; border-radius: 4px;
}

/* ==========================================================================
   33. BEWERTUNGEN ALS LAUFBAND
   Eine Reihe, die von rechts nach links durchlaeuft. Die Karten stehen
   zweimal hintereinander, dadurch laesst sich die Spur um genau die Haelfte
   verschieben und springt beim Neustart nicht sichtbar.
   ========================================================================== */
.laufband {
  position: relative;
  overflow: hidden;
  /* An den Raendern ausblenden, damit der Schnitt nicht hart wirkt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Volle Fensterbreite, auch wenn die Sektion eingerueckt ist */
.laufband--breit {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: 0;
}

.laufband-spur {
  display: flex;
  gap: 1rem;
  width: max-content;
  align-items: stretch;
}
.laufband-spur > * { flex: 0 0 clamp(268px, 78vw, 360px); }

@media (prefers-reduced-motion: no-preference) {
  .laufband-spur {
    animation: laufband var(--laufdauer, 48s) linear infinite;
  }
  /* Zum Lesen anhalten, per Maus wie per Tastatur */
  .laufband:hover .laufband-spur,
  .laufband:focus-within .laufband-spur { animation-play-state: paused; }
}

@keyframes laufband {
  from { transform: translate3d(0, 0, 0); }
  /* Halbe Strecke plus ein Abstand, weil die Spur den doppelten Satz enthaelt */
  to   { transform: translate3d(calc(-50% - .5rem), 0, 0); }
}

/* Ohne Bewegung: die Kopie entfaellt, die Reihe wird von Hand verschiebbar */
@media (prefers-reduced-motion: reduce) {
  .laufband { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .laufband-spur > .laufband-kopie { display: none; }
  .laufband-spur { padding-inline: var(--gutter); }
  .laufband--breit { width: auto; margin-left: 0; }
}

/* Hinweis unter dem Band */
.laufband-hinweis {
  margin-top: 1rem; font-size: .87rem; color: var(--c-ink-soft);
}

/* ==========================================================================
   34. HAEUFIGE FRAGEN
   Aufklappbar, damit die Seite nicht zur Textwueste wird. Ohne JavaScript:
   details und summary bringen das Verhalten von Haus aus mit.
   ========================================================================== */
.faq { border-top: 1px solid var(--c-line); }
.faq details {
  border-bottom: 1px solid var(--c-line);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.15rem 0; cursor: pointer;
  font-weight: 700; font-size: 1.04rem; line-height: 1.35;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent-deep); }
.faq summary::after {
  content: ""; flex: none;
  width: 13px; height: 13px; margin-right: .2rem;
  border-right: 2.5px solid var(--c-accent); border-bottom: 2.5px solid var(--c-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > div {
  padding-bottom: 1.3rem;
  max-width: 68ch; color: var(--c-ink-soft); font-size: .97rem; line-height: 1.65;
}
.faq details > div p + p { margin-top: .8rem; }
.faq details > div a { color: var(--c-accent-deep); text-underline-offset: 3px; }

/* --- Ortsverzeichnis --------------------------------------------------------- */
.orte-liste { display: grid; gap: .6rem; list-style: none; padding: 0; }
@media (min-width: 560px)  { .orte-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .orte-liste { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .orte-liste { grid-template-columns: repeat(4, 1fr); } }

.orte-liste a {
  /* Seit die Zeitangabe weg ist, steht nur noch der Ortsname in der Zeile.
     Zentriert sitzt er ruhiger als linksbuendig mit Rest an Leerraum. */
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem .95rem; min-height: 48px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-in); text-decoration: none;
  transition: border-color .15s var(--ease), transform .12s var(--ease);
}
.orte-liste a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.orte-liste b { font-size: .96rem; }
.orte-liste span { margin-left: auto; font-size: .83rem; color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.orte-liste a:focus-visible { border-color: var(--c-accent); }

/* ==========================================================================
   35. LEISTUNGSSEITEN
   Aufbau nach dem Muster klassischer Dienstleisterseiten: Kopf mit Bild,
   Vertrauensleiste, Einstiegstext, Leistungsraster, Person, Arbeitsweise,
   drei Schritte, Anfrage, Bewertungen, Querverweise, Fragen.
   ========================================================================== */

/* --- Kopf mit Bild rechts statt vollflaechigem Hintergrund --------------- */
.pagehead--split {
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(233, 170, 44, .16) 0%, transparent 55%),
    var(--c-chrome);
}
.pagehead--split .wrap { position: relative; z-index: 1; }
.kopf-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
  padding-block: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 940px) { .kopf-grid { grid-template-columns: 1.15fr .85fr; } }
.kopf-bild { margin: 0; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.kopf-bild img { display: block; width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3; }
@media (max-width: 939px) { .kopf-bild { order: -1; } .kopf-bild img { aspect-ratio: 16 / 10; } }

/* --- Einstiegstext ------------------------------------------------------- */
.section--schmal { padding-block: clamp(2rem, 4vw, 3rem); }
.einstieg {
  max-width: 74ch;
  border-left: 4px solid var(--c-accent);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
}
.einstieg p { font-size: clamp(1.02rem, .98rem + .35vw, 1.15rem); line-height: 1.7;
  color: var(--c-ink-soft); }
.einstieg b { color: var(--c-ink); }

/* --- Leistungsraster auf dunklem Grund ----------------------------------- */
.edge--invert { border-left-color: var(--c-accent); }
.lk-raster { display: grid; gap: .85rem; }
@media (min-width: 620px)  { .lk-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .lk-raster { grid-template-columns: repeat(3, 1fr); } }
.lk {
  background: var(--c-chrome-alt); border: 1px solid var(--c-chrome-line);
  border-radius: var(--r); padding: 1.2rem 1.3rem;
}
.lk h3 { font-size: 1rem; color: var(--c-ink-invert); }
.lk p { margin-top: .45rem; font-size: .91rem; line-height: 1.55;
  color: var(--c-ink-invert-soft); }

/* --- Person hinter dem Betrieb ------------------------------------------ */
.persoenlich { background: var(--c-accent); color: #14243a; }
.persoenlich-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
@media (min-width: 780px) { .persoenlich-grid { grid-template-columns: 190px 1fr; } }
.persoenlich-grid img {
  width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r); border: 3px solid rgba(255, 255, 255, .55);
}
.persoenlich h2 { color: #14243a; }
.persoenlich p { margin-top: .85rem; max-width: 62ch; line-height: 1.65; color: #23324a; }
.persoenlich-name { font-size: .95rem; color: #4a3c17 !important; }
.persoenlich .btn-row { margin-top: 1.5rem; }
.btn--dunkel { background: var(--c-chrome); color: var(--c-ink-invert); border-color: var(--c-chrome); }
.btn--dunkel:hover { background: #0e1218; border-color: #0e1218; }
.btn--ghost-dunkel { background: transparent; color: #14243a; border-color: rgba(20, 36, 58, .45); }
.btn--ghost-dunkel:hover { background: rgba(20, 36, 58, .1); border-color: #14243a; }

/* --- Drei Schritte ------------------------------------------------------- */
.schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0; }
.schritte li {
  counter-increment: schritt;
  position: relative; padding: 0 0 1.6rem 3.4rem;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-accent); color: #14243a;
  font-weight: 750; font-size: 1.02rem;
}
/* Verbindungslinie zwischen den Schritten */
.schritte li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.2rem; top: 2.55rem; bottom: .35rem;
  width: 2px; background: var(--c-line);
}
.schritte h3 { font-size: 1.1rem; }
.schritte p { margin-top: .4rem; color: var(--c-ink-soft); font-size: .96rem; line-height: 1.6; }

/* --- Kontaktwege neben dem Formular -------------------------------------- */
.kontaktwege { display: grid; gap: .6rem; margin-top: 1.75rem; }
.kontaktwege a {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .85rem 1.1rem; min-height: 44px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-in); text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.kontaktwege a:hover, .kontaktwege a:focus-visible { border-color: var(--c-accent); }
.kontaktwege span { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-ink-soft); }
.kontaktwege b { font-size: 1rem; }

/* --- Karten am Seitenende: Pfeil unter dem Text -------------------------- */
.svc-body .arrow-link {
  margin-top: .9rem; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; font-size: .88rem; color: var(--c-accent-deep);
}

/* Fehlendes Foto sichtbar machen, statt ein beliebiges Motiv einzusetzen,
   das etwas anderes zeigt. Gleiche Flaeche wie ein echtes Kartenbild. */
.bild-fehlt {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem;
  background: repeating-linear-gradient(135deg,
    var(--c-surface-alt) 0 12px, transparent 12px 24px), var(--c-surface);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-soft);
}
.bild-fehlt span {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-accent); color: #14243a;
  padding: .25rem .6rem; border-radius: var(--r-in);
}

/* ==========================================================================
   36. BEWERTUNGSFORMULAR
   Sterne sind echte Optionsfelder. Das eigentliche Eingabefeld liegt
   unsichtbar unter dem Symbol, damit Tastatur und Screenreader die Reihe
   wie eine normale Auswahl behandeln.
   ========================================================================== */
.wrap--eng { max-width: 760px; }

.sterne-wahl { border: 0; padding: 0; margin: 0; }
.sterne-wahl legend { font-weight: 700; font-size: 1.05rem; padding: 0; }

.sterne-reihe { display: flex; gap: .35rem; margin-top: 1rem; }
.stern { position: relative; display: block; cursor: pointer; line-height: 0; }
.stern input {
  position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer;
}
.stern svg {
  width: 46px; height: 46px;
  fill: var(--c-line); stroke: var(--c-line-strong); stroke-width: 1;
  transition: fill .12s var(--ease), transform .12s var(--ease);
}
/* Bis zum ausgewaehlten Stern alles gefuellt: Geschwister nach dem
   markierten Feld bleiben grau, davor faerbt die Reihe per Hover-Trick. */
.sterne-reihe:hover .stern svg { fill: var(--c-accent); stroke: var(--c-accent-deep); }
.sterne-reihe .stern:hover ~ .stern svg { fill: var(--c-line); stroke: var(--c-line-strong); }
.stern input:checked ~ svg,
.sterne-reihe[data-wert] .stern svg { fill: var(--c-accent); stroke: var(--c-accent-deep); }
.sterne-reihe[data-wert="1"] .stern:nth-child(n+2) svg,
.sterne-reihe[data-wert="2"] .stern:nth-child(n+3) svg,
.sterne-reihe[data-wert="3"] .stern:nth-child(n+4) svg,
.sterne-reihe[data-wert="4"] .stern:nth-child(n+5) svg {
  fill: var(--c-line); stroke: var(--c-line-strong);
}
.stern input:focus-visible ~ svg {
  outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px;
}
.stern:active svg { transform: scale(.92); }

.sterne-text {
  margin-top: .6rem; min-height: 1.4em;
  font-weight: 650; color: var(--c-ink-soft);
}

/* --- Die beiden Zweige nach der Auswahl --------------------------------- */
.bw-kasten {
  margin-top: 1.75rem; padding: clamp(1.2rem, 3vw, 1.75rem);
  background: var(--c-surface-alt); border-radius: var(--r);
  border-left: 4px solid var(--c-accent);
}
.bw-kasten--gut { border-left-color: #2e7d52; }
.bw-kasten p { margin-top: .6rem; color: var(--c-ink-soft); line-height: 1.6; }
.bw-klein { font-size: .9rem; margin-top: 1rem !important; }

/* Schaltflaeche, die wie ein Textlink aussieht */
.link-knopf {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--c-accent-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-knopf:hover { color: var(--c-ink); }

@media (max-width: 460px) {
  .stern svg { width: 40px; height: 40px; }
}

/* --- Kompakte Leiste, etwa auf der Startseite -------------------------- */
.bewertungsleiste { border-top: 1px solid var(--c-line); }
.bwl-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 860px) { .bwl-grid { grid-template-columns: 1.15fr .85fr; } }
.bwl-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
@media (min-width: 860px) { .bwl-wahl { align-items: flex-end; } }
.sterne-reihe--kurz .stern svg { width: 38px; height: 38px; }
.bwl-fallback { font-weight: 650; }

/* Hinweis vor dem Sprung zu Google */
.bw-weiter {
  margin-top: 1rem; padding: .7rem .95rem;
  background: var(--c-surface); border-radius: var(--r-in);
  border-left: 3px solid #2e7d52;
  font-size: .93rem; color: var(--c-ink-soft);
}

/* Ortsliste in der Kontaktbox: laeuft als Fliesstext, damit sie die Box
   nicht sprengt. Die Orte bleiben lesbar und zaehlen weiter als Suchwoerter. */
.closer-panel .wert--orte {
  font-weight: 500; font-size: .92rem; line-height: 1.5;
  color: var(--c-ink-invert-soft);
}

/* ==========================================================================
   37. ABLAUF IN DREI SCHRITTEN
   Nummerierte Liste statt der frueheren Spaltenreihe. Die Verbindungslinie
   laeuft hinter den Ziffern durch und macht sichtbar, dass es eine Reihen-
   folge ist und keine drei gleichrangigen Kaesten.
   ========================================================================== */
.ablauf {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.75rem;
  counter-reset: ablauf;
}
/* Erst ab 1040 px nebeneinander. Bei vier Schritten waere ein Zweierraster
   dazwischen ungluecklich: die Verbindungslinie muesste ueber den Zeilen-
   umbruch springen. Darunter bleibt es eine senkrechte Liste. */
@media (min-width: 1040px) { .ablauf { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.ablauf li { position: relative; display: flex; gap: 1rem; align-items: flex-start; }
@media (min-width: 1040px) { .ablauf li { display: block; } }

.ablauf-nr {
  flex: none;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-accent); color: #14243a;
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  position: relative; z-index: 1;
}

/* Verbindungslinie: am Handy senkrecht neben den Ziffern, ab Tablet waagerecht
   zwischen ihnen. Beim letzten Schritt entfaellt sie. */
.ablauf li:not(:last-child)::before {
  content: ""; position: absolute; background: var(--c-line-strong);
}
.ablauf li:not(:last-child)::before {
  left: 1.47rem; top: 3rem; bottom: -1.75rem; width: 2px;
}
@media (min-width: 1040px) {
  .ablauf li:not(:last-child)::before {
    left: 3rem; top: 1.47rem; bottom: auto; right: -1.25rem;
    width: auto; height: 2px;
  }
}

.ablauf h3 { font-size: 1.12rem; line-height: 1.3; }
@media (min-width: 1040px) { .ablauf h3 { margin-top: 1.1rem; } }
.ablauf p {
  margin-top: .5rem; color: var(--c-ink-soft);
  font-size: .97rem; line-height: 1.6; max-width: 42ch;
}

/* Sternleiste innerhalb des Bewertungsabschnitts */
.bwl-zeile {
  margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid var(--c-line);
  display: grid; gap: 1rem; align-items: center;
}
@media (min-width: 820px) { .bwl-zeile { grid-template-columns: 1fr auto; gap: 2rem; } }
.bwl-zeile b { display: block; font-size: 1.08rem; }
.bwl-zeile > div > span { display: block; margin-top: .3rem; color: var(--c-ink-soft); font-size: .95rem; }
.bwl-zeile .sterne-text { margin-top: .45rem; font-size: .92rem; }
@media (min-width: 820px) { .bwl-zeile .bwl-wahl { align-items: flex-end; } }

/* Kennzeichnung freiwilliger Felder. Gegenstueck zum Pflichtstern, damit
   niemand ein Bild sucht, das gar nicht verlangt wird. */
.optional {
  font-weight: 500; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-ink-soft);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: .1rem .45rem; margin-left: .35rem; vertical-align: middle;
}

/* Hinweis zum Zwanzigjahreswert, enger an die Zeilen darueber gesetzt */

/* Haftungshinweis unter dem Rechner */
.rechner-haftung {
  margin-top: 1.75rem; max-width: 78ch;
  font-size: .85rem; line-height: 1.6; color: var(--c-ink-soft);
  border-left: 3px solid var(--c-line-strong);
  padding-left: 1rem;
}

/* Seitenkopf mit Formular daneben, wie im Hero der Startseite. Der Kopf
   braucht dafuer mehr Hoehe und die Brotkrumen ruecken in die Textspalte. */
.pagehead--form { padding-block: 0; }
.pagehead--form .hero-grid { padding-block: clamp(1.75rem, 4vw, 3rem); }
.pagehead--form .crumbs { margin-bottom: 1.25rem; }
.pagehead--form .hero-proof { margin-block: 1.35rem; }

/* --- Formular im Seitenkopf kompakter ----------------------------------- */
/* Im Kopf steht das Formular neben dem Text und darf die Seite nicht in die
   Laenge ziehen. Zwei Massnahmen: die Auswahlkacheln zweispaltig, und der
   WhatsApp-Knopf entfaellt, weil er direkt darueber im Kopf schon steht. */
@media (min-width: 940px) {
  /* Engere Kacheln: 64 px Mindesthoehe und 0,95 rem Innenabstand sind fuer
     eine eigene Seite richtig, im Kopf summieren sie sich bei sechs Kacheln
     auf ueber 400 px. */
  .pagehead--form .kachel > span { min-height: 0; padding: .6rem .8rem; }
  .pagehead--form .kachel b { font-size: .92rem; }
  .pagehead--form .kachelwahl { gap: .5rem; margin-top: 1rem; }
  .pagehead--form .form-card { padding: 1.35rem 1.5rem; }
  .pagehead--form .wiz-hinweis { margin-bottom: .2rem; }
  /* Welche Leistung gewaehlt ist, sagt schon die Ueberschrift daneben */
  .pagehead--form .wiz-gewaehlt { display: none !important; }
}
/* WhatsApp steht im Kopf bereits als Knopf neben der Ueberschrift */
.pagehead--form .wiz-nav .btn--whatsapp { display: none; }

/* Am Handy stapeln sich Text und Formular, der Kopf wird dadurch lang.
   Etwas engere Kacheln helfen, die Mindesthoehe bleibt aber ueber den
   44 px, die eine Tippflaeche braucht. */
@media (max-width: 939px) {
  .pagehead--form .kachel > span { min-height: 52px; padding: .7rem .9rem; }
  .pagehead--form .kachelwahl { gap: .55rem; margin-top: 1rem; }
  .pagehead--form .wiz-gewaehlt { display: none !important; }
  .pagehead--form .hero-proof { margin-block: 1rem; }
}

/* --- Karten: Pfeil immer auf gleicher Hoehe ----------------------------- */
/* Ohne das sitzt der Pfeil bei kurzem Text hoeher als bei langem, und die
   Karten wirken unterschiedlich gross, obwohl sie es nicht sind. */
.svc-body { display: flex; flex-direction: column; flex: 1; }
.svc-body .arrow-link { margin-top: auto; padding-top: .9rem; }

/* Im Kopf mit Formular darf das Bild mehr zeigen: Die Textspalte liegt links
   und braucht dort Deckung, rechts sitzt die Formularkarte mit eigenem
   Hintergrund und schirmt selbst ab. Deshalb ein flacherer Verlauf als auf
   den Seitenkoepfen ohne Formular. */
@media (min-width: 940px) {
  .pagehead--form .hero-bg::after {
    background: linear-gradient(100deg,
      rgba(14,18,22,.88) 0%, rgba(14,18,22,.70) 38%,
      rgba(14,18,22,.34) 62%, rgba(14,18,22,.18) 100%);
  }
}
@media (max-width: 939px) {
  .pagehead--form .hero-bg::after {
    background: linear-gradient(180deg, rgba(14,18,22,.72) 0%, rgba(14,18,22,.90) 55%);
  }
}

/* --------------------------------------------------------------------------
   ARBEITSSCHRITTE (nummeriertes Raster)
   Sechs Punkte, die aufeinander folgen. Die Nummer traegt die Reihenfolge,
   damit man sie nicht aus der Reihenfolge der Karten erraten muss.
   -------------------------------------------------------------------------- */
.arbeitsschritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 660px)  { .arbeitsschritte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .arbeitsschritte { grid-template-columns: repeat(3, 1fr); } }

.arbeitsschritte li {
  position: relative; overflow: hidden;
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem 1.4rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Akzent oben statt links: Die Nummer steht schon links und braucht den Platz. */
.arbeitsschritte li::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c-accent);
}
@media (hover: hover) {
  .arbeitsschritte li:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(10, 16, 24, .09);
  }
}

.arbeitsschritt-nr {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-accent-deep);
  font-size: 1.02rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.arbeitsschritte h3 { font-size: 1.05rem; line-height: 1.3; }
.arbeitsschritte p {
  color: var(--c-ink-soft); font-size: .95rem; margin-top: .45rem; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   BILDER VERGROESSERN (Lightbox)
   Die Galerie zeigt Ausschnitte. Wer ein Detail sehen will, klickt das Bild an.
   Ohne Skript bleibt alles wie bisher, nur eben nicht vergroesserbar.
   -------------------------------------------------------------------------- */
.gallery figure button.bild-zoom {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.gallery figure button.bild-zoom:focus-visible {
  outline: 3px solid var(--c-accent); outline-offset: -3px;
}
/* Lupe erst beim Zeigen, damit das Bild in Ruhe wirkt */
.gallery figure button.bild-zoom::after {
  content: ""; position: absolute; right: .7rem; bottom: .7rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(10, 16, 24, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4 21 21M10.5 7.6v5.8M7.6 10.5h5.8'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  opacity: 0; transition: opacity .2s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .gallery figure:hover button.bild-zoom::after { opacity: 1; }
}
@media (hover: none) {
  .gallery figure button.bild-zoom::after { opacity: .9; }
}
button.bild-zoom:focus-visible::after { opacity: 1; }

dialog.lightbox {
  /* Der Dialog fuellt das Fenster, das Bild sitzt mittig darin. Nur so
     bleiben Schliessen und Pfeile immer im sichtbaren Bereich, egal wie
     hoch oder breit das Bild ist. */
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: none;
  display: none;
  color: #ffffff;
}
dialog.lightbox[open] {
  display: grid; grid-template-rows: 1fr auto;
  align-items: center; justify-items: center;
  padding: clamp(3.5rem, 7vh, 5rem) clamp(3.5rem, 6vw, 6rem) 1.5rem;
}
dialog.lightbox::backdrop { background: rgba(8, 12, 18, .93); }
dialog.lightbox img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r);
  background: #0d1218;
}
.lightbox-text {
  margin: 1rem 0 0; max-width: 62ch;
  text-align: center; font-size: .92rem; line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.lightbox-schliessen,
.lightbox-blaettern {
  position: fixed; z-index: 1;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #ffffff; font-size: 1.6rem; line-height: 1;
  cursor: pointer;
  transition: background .18s ease;
}
.lightbox-schliessen:hover,
.lightbox-blaettern:hover { background: rgba(255, 255, 255, .32); }
.lightbox-schliessen:focus-visible,
.lightbox-blaettern:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.lightbox-schliessen { top: .9rem; right: .9rem; }
.lightbox-blaettern { top: 50%; transform: translateY(-50%); }
.lightbox-blaettern[data-richtung="zurueck"] { left: .9rem; }
.lightbox-blaettern[data-richtung="vor"] { right: .9rem; }

/* Schmale Geraete: neben dem Bild ist kein Platz, die Pfeile wandern nach
   unten. Die 44 px Mindestgroesse bleiben dabei erhalten. */
@media (max-width: 700px) {
  dialog.lightbox[open] { padding: 3.75rem .75rem 5.25rem; }
  .lightbox-blaettern { top: auto; bottom: 1rem; transform: none; }
  .lightbox-blaettern[data-richtung="zurueck"] { left: calc(50% - 4.2rem); }
  .lightbox-blaettern[data-richtung="vor"] { right: calc(50% - 4.2rem); }
  .lightbox-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arbeitsschritte li { transition: none; }
  .arbeitsschritte li:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   RECHNER ALS ABLAUF
   Drei Schritte untereinander statt Eingabe und Ergebnis nebeneinander.
   Je Schritt ist genau einer sichtbar, darum keine zweite Spalte mehr.
   -------------------------------------------------------------------------- */
.rechner--ablauf {
  /* Setzt das zweispaltige Raster von .rechner ausser Kraft: Im Ablauf ist
     immer nur ein Schritt sichtbar, eine zweite Spalte gaebe es also nicht
     zu fuellen. */
  grid-template-columns: none;
  max-width: 46rem; margin-inline: auto;
}
.rechner-stufe[hidden] { display: none; }


.rechner-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.rechner-nav .btn { flex: 1 1 14rem; }

/* Schritt 2: Kontakt. Dunkler Kasten wie das Ergebnis, damit der Ablauf
   sichtbar auf die Zielgerade einbiegt. */
.rechner-kontakt {
  background: var(--c-chrome); color: #ffffff;
  border-radius: var(--r); padding: clamp(1.35rem, 3vw, 2rem);
}
.rechner-kontakt h3 { font-size: 1.25rem; line-height: 1.3; }
.rechner-kontakt-text {
  margin-top: .6rem; font-size: .92rem; line-height: 1.6; color: #c3d0dc;
}

/* Die getroffene Auswahl als Gedaechtnisstuetze */
.rechner-merker {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem;
  margin: 1.2rem 0 0; padding: .9rem 1rem;
  background: rgba(255, 255, 255, .06); border-radius: var(--r-in);
  font-size: .86rem;
}
.rechner-merker dt { color: #8fa0b2; }
.rechner-merker dd { margin: 0; color: #e6ecf2; font-weight: 600; }

.rechner-kontakt .btn--zurueck,
.rechner-stufe .btn--zurueck { margin-top: .9rem; }
.rechner-kontakt .btn--zurueck {
  width: 100%; background: transparent;
  color: #dbe4ec; border-color: var(--c-chrome-line);
}
.rechner-kontakt .btn--zurueck:hover {
  border-color: #dbe4ec; background: rgba(255, 255, 255, .07);
}

.rechner-form { margin-top: 1rem; display: grid; gap: .8rem; }
.rechner-form .field { margin: 0; }
.rechner-form label { color: #dbe4ec; font-size: .87rem; font-weight: 600; }
.rechner-form input[type="text"] {
  width: 100%; margin-top: .3rem;
  min-height: 46px; padding: .6rem .85rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--c-chrome-line);
  border-radius: var(--r-in);
  color: #ffffff; font: inherit; font-size: .95rem;
}
.rechner-form input[type="text"]::placeholder { color: #8fa0b2; }
.rechner-form input[type="text"]:focus-visible {
  outline: 3px solid var(--c-accent); outline-offset: 1px;
  border-color: var(--c-accent); background: rgba(255, 255, 255, .1);
}
.rechner-form .field[data-invalid="true"] input { border-color: #ff8f7a; }
.rechner-form .field-error { color: #ffb09c; font-size: .82rem; margin-top: .3rem; }
.rechner-form .consent {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  margin-top: .2rem;
}
.rechner-form .consent input { margin-top: .2rem; width: 20px; height: 20px; }
.rechner-form .consent label { font-weight: 400; font-size: .82rem; line-height: 1.5; color: #b6c4d2; }
.rechner-form .consent a { color: var(--c-accent); }
.rechner-form .consent .field-error { grid-column: 1 / -1; }
.rechner-form .form-status:empty { display: none; }
.rechner-form .form-status {
  font-size: .85rem; line-height: 1.5; color: #c3d0dc;
}
.rechner-form .form-status[data-state="error"] { color: #ffb09c; }
.rechner-form .btn { margin-top: .2rem; width: 100%; }

/* Solange gesperrt ist, traegt der Knopf im Schloss die Handlung.
   Zwei gleich aussehende Knoepfe untereinander waeren nur verwirrend. */
[data-rechner][data-gesperrt="ja"] .rechner-cta { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-rechner][data-gesperrt="ja"] [data-verdeckt] { filter: blur(9px); }
}

/* --------------------------------------------------------------------------
   UEBERSICHT: GRUPPEN UND KOMPAKTE KACHELN
   -------------------------------------------------------------------------- */
/* Die Zwischenzeile hatte keine eigene Regel und sass dadurch ohne Abstand
   auf der Kachelreihe darueber. */
.gruppen-titel {
  margin: 2.75rem 0 1rem;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-ink-soft);
}
.gruppen-titel:first-child { margin-top: 0; }

/* Dreizehn Leistungen nebeneinander: Die Kacheln duerfen hier kleiner
   ausfallen als auf der Startseite, wo nur vier stehen. */
@media (min-width: 1240px) {
  .svc-grid--kompakt { grid-template-columns: repeat(5, 1fr); }
}
.svc-grid--kompakt { gap: .75rem; }
.svc-grid--kompakt .svc-figure { aspect-ratio: 21 / 9; }
.svc-grid--kompakt .svc-body { padding: .7rem .8rem .8rem; }
.svc-grid--kompakt .svc-body h3 { font-size: .9rem; margin-top: 0; line-height: 1.25; }
.svc-grid--kompakt .svc-body p { font-size: .79rem; line-height: 1.4; margin-top: .25rem; }
.svc-grid--kompakt .svc-body .arrow-link { margin-top: .55rem; font-size: .79rem; }

/* --------------------------------------------------------------------------
   BUCHUNGSKALENDER (Cal.com)
   Die Einbettung bringt ihre eigene Gestaltung mit. Hier steht nur, wie viel
   Platz sie bekommt und dass sie nicht aus der Seite laeuft.
   -------------------------------------------------------------------------- */
.kalender-einbettung {
  border: 1px solid var(--c-line); border-radius: var(--r);
  background: var(--c-surface);
  overflow: hidden;
}
.kalender-einbettung > div {
  width: 100%; min-height: 640px; overflow: auto;
}
@media (max-width: 700px) {
  .kalender-einbettung > div { min-height: 560px; }
}

/* --------------------------------------------------------------------------
   BESTAETIGUNG NACH DEM ABSENDEN
   Mittiger Dialog mit gezeichnetem Haken. Erscheint zusaetzlich zur
   Statuszeile unter dem Absendeknopf, siehe zeigeBestaetigung() in site.js.
   -------------------------------------------------------------------------- */
dialog.bestaetigung {
  border: 0; padding: 0; background: none;
  max-width: min(30rem, calc(100vw - 2rem));
  color: var(--c-ink);
  /* Der globale Reset setzt margin auf 0, damit faellt die Zentrierung weg,
     die der Browser fuer modale Dialoge sonst selbst uebernimmt. */
  margin: auto;
}
dialog.bestaetigung::backdrop {
  background: rgba(8, 12, 18, .72);
  opacity: 0; transition: opacity .25s var(--ease);
}
dialog.bestaetigung[data-an]::backdrop { opacity: 1; }

.bestaetigung-inner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .55);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  text-align: center;
  /* Startzustand: leicht kleiner und nach unten versetzt */
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
dialog.bestaetigung[data-an] .bestaetigung-inner {
  opacity: 1; transform: none;
}

.bestaetigung-inner h2 {
  font-size: clamp(1.3rem, 1.15rem + .7vw, 1.6rem);
  line-height: 1.2; margin-top: 1.1rem;
}
.bestaetigung-inner p {
  color: var(--c-ink-soft); margin-top: .6rem; line-height: 1.55;
}
.bestaetigung-inner .btn { margin-top: 1.6rem; }

/* Der Haken: Ring und Linie werden nacheinander gezeichnet. Umgesetzt ueber
   die Strichlaenge, dadurch braucht es kein zweites Bild und keine Grafik
   in doppelter Ausfuehrung fuer hell und dunkel. */
.bestaetigung-haken {
  display: grid; place-items: center;
  width: 72px; height: 72px; margin: 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 18%, transparent);
}
.bestaetigung-haken svg { width: 52px; height: 52px; overflow: visible; }
.bestaetigung-haken .ring,
.bestaetigung-haken .haken {
  stroke: var(--c-accent-deep, var(--c-accent));
  stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
}
.bestaetigung-haken .ring  { stroke-dasharray: 145; stroke-dashoffset: 145; }
.bestaetigung-haken .haken { stroke-dasharray: 36;  stroke-dashoffset: 36;  }
dialog.bestaetigung[data-an] .ring {
  animation: haken-zeichnen .5s var(--ease) .1s forwards;
}
dialog.bestaetigung[data-an] .haken {
  animation: haken-zeichnen .3s var(--ease) .45s forwards;
}
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }

/* Ohne Bewegung: alles sofort fertig gezeichnet, nichts blitzt auf. */
@media (prefers-reduced-motion: reduce) {
  dialog.bestaetigung::backdrop,
  .bestaetigung-inner { transition: none; }
  .bestaetigung-haken .ring,
  .bestaetigung-haken .haken { stroke-dashoffset: 0; }
  dialog.bestaetigung[data-an] .ring,
  dialog.bestaetigung[data-an] .haken { animation: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Ertragsrechner auf dem Handy: Regler enger stellen

   Am Schreibtisch stehen die drei Regler mit 1,5 rem Abstand gut da. Auf
   375 px Breite kostet das unnötig Höhe, weil ohnehin alles untereinander
   liegt. Hier auf 0,85 rem herunter, und die Beschriftung rückt näher an
   ihren Regler — zusammen spart das rund 50 px, ohne dass es gedrängt wirkt.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .schieber + .schieber { margin-top: .85rem; }
  .schieber-kopf { margin-bottom: .3rem; }
  .schieber-hinweis { margin-top: .25rem; }
}