/* Malermeisterbetrieb Lennert Kock · Stil nach dem Figma-Entwurf
   Farben: Dunkelblau #04275c, Orange #f2710c, Gold #e8931a.
   Orange als Textfarbe auf Weiß ist zu hell (2,9:1), deshalb steht Text in
   --orange-text und der Knopfgrund in --orange-knopf. Flächen, Linien und
   Zeichen bleiben im Orange des Entwurfs. */

:root {
  --blau: #04275c;
  --dunkel: #14203a;
  --orange: #f2710c;
  --orange-text: #b85408;
  --orange-knopf: #c4550a;
  --gold: #e8931a;
  --text: #55606f;
  --hell: #f8f9fa;
  --rand: rgba(20, 32, 58, 0.12);
  --schatten: 0 10px 26px rgba(20, 32, 58, 0.08);
  --schatten-stark: 0 14px 34px rgba(20, 32, 58, 0.12);
  --rund: 14px;
  --kopf-hoehe: 92px;
  /* Das Logo ist im Entwurf so groß, dass es unter die Kopfleiste ins Bild ragt */
  --logo-breite: 150px;
  --logo-hoehe: calc(var(--logo-breite) / 1.582);
  --bereich: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* der Entwurf setzt Fliesstext auf 19 px bei 1900 px Breite */
  font-size: clamp(17px, 15.1px + 0.2vw, 19px);
  line-height: 1.6;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: 'Libre Baskerville', Georgia, serif;
  color: var(--blau);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px; }
a { color: var(--blau); }

.bereich {
  width: min(100% - 40px, var(--bereich));
  margin-inline: auto;
}
.bereich.schmal { width: min(100% - 40px, 760px); }

.abschnitt { padding: clamp(48px, 6vw, 84px) 0; }
.abschnitt--hell { background: var(--hell); }
.abschnitt--dunkel { background: var(--blau); color: rgba(255, 255, 255, 0.82); }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }

.ober {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin: 0 0 10px;
}
.ober a { color: inherit; }
.ober--mitte { text-align: center; }
.ober--hell, .abschnitt--dunkel .ober { color: var(--orange); }

.vorspann { max-width: 62ch; }
.vorspann--mitte, .mitte { text-align: center; margin-inline: auto; }

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

.sprungmarke {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blau); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; transition: top 0.15s;
}
.sprungmarke:focus { top: 12px; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--orange-knopf);
  outline-offset: 2px;
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 34px; border-radius: 10px; border: 1.5px solid transparent;
  background: var(--orange-knopf); color: #fff;
  font: inherit; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 20px rgba(232, 147, 26, 0.28);
  transition: transform 0.15s, background 0.15s;
}
.knopf:hover { background: #a8480a; transform: translateY(-1px); }
.knopf--rand {
  background: transparent; color: var(--orange-text);
  border-color: var(--orange); box-shadow: none;
}
.knopf--rand:hover { background: rgba(242, 113, 12, 0.08); color: var(--orange-text); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 21px; margin-top: 26px; }
.abschnitt--dunkel .knopf--rand, .banner .knopf--rand { color: var(--orange); }

.mehr {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; color: var(--orange-text); text-decoration: none;
}
.mehr:hover { text-decoration: underline; }
.mehr--hell { color: var(--gold); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  transition: box-shadow 0.2s;
}
.kopf--gescrollt { box-shadow: 0 2px 14px rgba(4, 39, 92, 0.1); }
.kopf__innen {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--kopf-hoehe);
}
.kopf__logo { display: block; margin-right: auto; align-self: center; }
.kopf__logo img { width: var(--logo-breite); height: auto; transition: width 0.2s; }
@media (min-width: 900px) {
  :root { --logo-breite: clamp(200px, 19vw, 360px); }
  .kopf__logo {
    align-self: start; margin-top: 14px;
    /* der Teil des Logos, der unter der Leiste liegt, zaehlt nicht zur Kopfhoehe */
    margin-bottom: calc(var(--kopf-hoehe) - var(--logo-hoehe) - 14px);
  }
  .kopf--gescrollt .kopf__logo { align-self: center; margin: 0 auto 0 0; }
  .kopf--gescrollt .kopf__logo img { width: 170px; }
}

.kopf__schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--rand); border-radius: 10px;
  color: var(--blau); cursor: pointer;
}
.kopf__schalter-zu { display: none; }
.kopf--offen .kopf__schalter-auf { display: none; }
.kopf--offen .kopf__schalter-zu { display: block; }

.kopf__nav a, .kopf__leistungen {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(85, 96, 111, 0.95); text-decoration: none;
}
.kopf__nav a[aria-current], .kopf__leistungen--aktiv { color: var(--dunkel); font-weight: 600; }
.kopf__leistungen {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.kopf__cta { padding: 12px 30px; font-size: 0.85rem; }

@media (max-width: 899px) {
  .kopf__menue {
    position: fixed; inset: var(--kopf-hoehe) 0 auto; z-index: 40;
    display: none; flex-direction: column; gap: 18px;
    padding: 22px 20px 30px; background: #fff;
    border-top: 1px solid var(--rand);
    box-shadow: 0 16px 30px rgba(4, 39, 92, 0.12);
    max-height: calc(100vh - var(--kopf-hoehe)); overflow-y: auto;
  }
  .kopf--offen .kopf__menue { display: flex; }
  .kopf__nav { display: flex; flex-direction: column; gap: 16px; }
  .kopf__nav a, .kopf__leistungen { font-size: 1rem; text-transform: none; letter-spacing: 0; }
  .kopf__unter { display: none; flex-direction: column; gap: 12px; padding: 12px 0 4px 14px; }
  .kopf__gruppe--offen .kopf__unter { display: flex; }
  .kopf__unter a { font-size: 0.95rem; color: var(--text); }
  body.menue-offen { overflow: hidden; }
}

@media (min-width: 900px) {
  .kopf__schalter { display: none; }
  .kopf__menue { display: flex; align-items: center; gap: 34px; }
  .kopf__nav { display: flex; align-items: center; gap: 30px; }
  .kopf__gruppe { position: relative; }
  .kopf__unter {
    position: absolute; top: 100%; left: -18px; z-index: 60;
    display: none; flex-direction: column; gap: 12px; min-width: 250px;
    margin-top: 14px;
    padding: 18px; background: #fff; border: 1px solid var(--rand);
    border-radius: 12px; box-shadow: var(--schatten-stark);
  }
  /* unsichtbare Bruecke ueber den Abstand, sonst faellt der Mauszeiger
     auf dem Weg nach unten aus der Gruppe und das Menue klappt zu */
  .kopf__unter::before {
    content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
  }
  .kopf__gruppe:hover .kopf__unter, .kopf__gruppe--offen .kopf__unter { display: flex; }
  .kopf__unter a { font-size: 0.9rem; text-transform: none; letter-spacing: 0; color: var(--text); }
  .kopf__unter a:hover { color: var(--orange-text); }
}

/* Hero der Startseite */
.hero {
  position: relative; overflow: hidden; background: #fff;
  display: grid; align-items: center;
}
/* Platzhalter haelt das Verhaeltnis des Entwurfs, der Inhalt darf hoeher werden */
.hero::before {
  content: ""; grid-area: 1 / 1; aspect-ratio: 1904 / 689;
}
.hero > * { grid-area: 1 / 1; }
.hero__bild { position: absolute; inset: 0; }
/* Das Bild kommt fertig zugeschnitten aus dem Entwurf und fuellt die Flaeche. Wird der
   Kopf hoeher als im Entwurf, schneidet der Browser links ab, wo nur Wand ist, und die
   Person am rechten Rand bleibt stehen */
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__innen { position: relative; padding: clamp(18px, 2.6vw, 70px) 0; }
/* Die Schrift folgt der Breite, damit der Kopf das Verhaeltnis aus dem Entwurf
   (1904 zu 689) haelt und der Bildausschnitt genau wie in Figma steht */
.hero h1 { font-size: clamp(1.55rem, 0.55rem + 2.4vw, 3.1rem); line-height: 1.5; margin-bottom: clamp(8px, 0.8vw, 14px); }
.hero .knopfreihe { margin-top: clamp(12px, 1.5vw, 26px); }
.hero__innen > * { max-width: 660px; }
.hero__zeile { color: var(--orange-text); }
.hero__text { font-size: clamp(0.95rem, 0.6rem + 0.55vw, 1.25rem); margin-bottom: 0; }

@media (max-width: 699px) {
  .hero { display: block; }
  .hero::before { display: none; }
  .hero__bild { position: relative; height: 260px; display: block; }
  .hero__bild img { height: 100%; max-height: none; object-fit: cover; object-position: 88% 50%; }
  .kopfbild__bild::after { display: none; }
  .hero__innen { padding: 34px 0 48px; }
  .hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
  .hero__text { font-size: 1.02rem; }
}

/* Kopfbereich der Unterseiten */
.kopfbild {
  position: relative; overflow: hidden; background: #fff;
  display: grid; align-items: center;
}
.kopfbild::before {
  content: ""; grid-area: 1 / 1; aspect-ratio: 1904 / 318; min-height: 300px;
}
.kopfbild > * { grid-area: 1 / 1; }
.kopfbild__bild { position: absolute; inset: 0; }
.kopfbild__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.kopfbild__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, #fff 12%, rgba(255, 255, 255, 0.93) 52%, rgba(255, 255, 255, 0.12) 96%);
}
.kopfbild__innen { position: relative; padding: clamp(44px, 6vw, 86px) 0; }
.kopfbild__innen > * { max-width: 640px; }
.kopfbild__text { font-size: 1.02rem; }
.kopfbild--mitte .kopfbild__innen { text-align: center; }
.kopfbild--mitte .kopfbild__innen > * { margin-inline: auto; max-width: 720px; }
.kopfbild--mitte .knopfreihe { justify-content: center; }
@media (max-width: 699px) {
  .kopfbild { display: block; }
  .kopfbild::before { display: none; }
  .kopfbild__bild { position: relative; height: 230px; }
  .kopfbild__bild img { object-position: 86% 50%; }
  .kopfbild__innen { padding: 30px 0 42px; }
}

/* Streifen mit den Einsatzgebieten */
.ortestreifen { background: var(--blau); color: #fff; }
.ortestreifen__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; padding: 28px 0; text-align: center;
  font-size: 0.95rem; font-weight: 500;
}
.ortestreifen__titel {
  color: var(--orange); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 0.85rem;
}
.ortestreifen__punkt {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex: none;
}
@media (max-width: 699px) { .ortestreifen__punkt { display: none; } }

/* Drei Vorteilskarten */
.usp {
  display: grid; gap: 22px; margin-inline: auto; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.usp__karte {
  background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  padding: 30px 26px 26px; text-align: center; box-shadow: var(--schatten-stark);
}
.usp__karte h2 { font-size: 1.3rem; margin-bottom: 8px; }
.usp__karte p { margin: 0; font-size: 0.95rem; }
.usp__zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 18px;
  border-radius: 15px; background: var(--orange); color: #fff; font-size: 1.4rem;
}

/* Zwei Spalten: Text und Bild */
.zweier { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .zweier { grid-template-columns: 1fr 1fr; }
  .zweier--bild-links .zweier__bild { order: -1; }
}
.zweier__bild img {
  border-radius: var(--rund); width: 100%;
  box-shadow: 18px 18px 0 var(--orange), var(--schatten-stark);
}
/* Startseite: Bild 558 breit wie im Entwurf (Group 8), leicht eingerueckt */
.zweier--bild-links .zweier__bild {
  padding-right: 18px; padding-bottom: 18px;
  max-width: 596px; margin-left: 20px;
}
.zweier--bild-links .zweier__bild img { aspect-ratio: 558 / 378; object-fit: cover; }
@media (max-width: 899px) {
  .zweier__bild img { box-shadow: 12px 12px 0 var(--orange), var(--schatten-stark); }
  .zweier--bild-links .zweier__bild { padding-right: 12px; padding-bottom: 12px; }
}
.zweier__text .fliesstext p:last-child { margin-bottom: 0; }
.zweier__text { max-width: 600px; }
.zweier__text .fliesstext { max-width: 520px; }

.haken { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
/* im Entwurf stehen vor den Stichpunkten runde Punkte (7 px), keine Haken */
.haken li { position: relative; padding-left: 22px; font-size: 0.97rem; }
.haken li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}

/* Bildpaar mit orangem Versatz, Masse aus dem Entwurf (Group 10).
   Das kleine Bild sitzt frei ueber dem grossen, sein oranger Versatz liegt
   links unten, der des grossen Bildes rechts unten. */
.bildpaar { position: relative; padding-bottom: 8.9%; }
.bildpaar__gross {
  display: block; width: 86.9%;
  border-radius: var(--rund); box-shadow: var(--schatten-stark);
  aspect-ratio: 558 / 451; object-fit: cover;
}
.bildpaar__klein {
  position: absolute; left: 36.8%; top: 37%; width: 63.2%;
  border-radius: var(--rund);
  box-shadow: -17px 15px 0 var(--orange), var(--schatten-stark);
  aspect-ratio: 406 / 305; object-fit: cover;
}
/* Ueber uns: flacheres grosses Bild (540 zu 360), das dort ebenfalls einen
   orangen Versatz hat */
.bildpaar--ueber { padding-bottom: 7.1%; }
.bildpaar--ueber .bildpaar__gross {
  width: 81.3%; aspect-ratio: 540 / 360;
  box-shadow: 18px 18px 0 var(--orange), var(--schatten-stark);
}
.bildpaar--ueber .bildpaar__klein { left: 38.9%; top: 24.1%; width: 61.1%; }

/* Leistungskarten */
.leistungen {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px; margin: 34px 0 0; padding: 0; list-style: none;
}
.leistungen > li { display: flex; flex: 0 1 calc(25% - 14px); min-width: 250px; }
@media (max-width: 1099px) { .leistungen > li { flex-basis: calc(50% - 9px); } }
@media (max-width: 639px) { .leistungen > li { flex-basis: 100%; } }
.leistung {
  display: grid; gap: 4px; width: 100%;
  padding: 24px 24px 22px; background: #fff;
  border: 1px solid var(--rand); border-radius: var(--rund);
  box-shadow: var(--schatten); text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.leistung:hover, .leistung:focus-visible { transform: translateY(-3px); box-shadow: var(--schatten-stark); border-color: var(--orange); }
.leistung__nr { font-size: 0.85rem; font-weight: 700; color: var(--orange-text); }
.leistung__strich { width: 28px; height: 3px; border-radius: 2px; background: var(--orange); margin: 6px 0 12px; }
.leistung__titel {
  font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.28rem;
  color: var(--dunkel); line-height: 1.2;
}
.leistung__unter { font-size: 0.9rem; color: var(--text); margin-top: 8px; }
.leistung__pfeil { justify-self: end; margin-top: 14px; color: var(--orange-text); font-size: 1.1rem; }

/* Referenzstreifen der Startseite */
.kopfzeile {
  display: flex; flex-wrap: wrap; gap: 18px 30px;
  align-items: flex-end; justify-content: space-between; margin-bottom: 28px;
}
.kopfzeile > div { max-width: 62ch; }
.kopfzeile h2 { margin-bottom: 10px; }
.abschnitt--dunkel .vorspann { color: rgba(255, 255, 255, 0.78); }

.streifen {
  display: grid; gap: 16px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.streifen img {
  width: 100%; aspect-ratio: 10 / 9; object-fit: cover; border-radius: 12px;
}
/* im Entwurf schliesst jede Kachel oben mit einer orangen Kante ab */
.streifen > li { border-top: 4px solid var(--orange); border-radius: 12px 12px 0 0; overflow: hidden; }
.streifen > li img, .streifen > li .vergleich__bilder { border-radius: 0 0 12px 12px; }

/* Vierte Kachel: Giebel vor und nach dem Anstrich, Kante per Regler */
.vergleich__bilder {
  position: relative; border-radius: 12px; overflow: hidden; line-height: 0;
}
.vergleich__nachher {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.vergleich__bild { border-radius: 0; }
.vergleich__strich {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(4, 39, 92, 0.25);
  transform: translateX(-1px); pointer-events: none;
}
.vergleich__griff {
  position: absolute; top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; background: #fff; color: var(--blau);
  box-shadow: var(--schatten-stark);
}
.vergleich__regler {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0; padding: 0;
  background: none; border: 0; appearance: none; cursor: ew-resize;
}
.vergleich__regler::-webkit-slider-thumb {
  appearance: none; width: 34px; height: 100%; background: transparent; cursor: ew-resize;
}
.vergleich__regler::-moz-range-thumb {
  width: 34px; height: 100%; border: 0; background: transparent; cursor: ew-resize;
}
.vergleich__regler:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Fragen */
.fragen { display: grid; gap: 16px; margin-top: 28px; align-items: start; }
@media (min-width: 760px) { .fragen--zwei { grid-template-columns: repeat(2, 1fr); } }
.frage {
  background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  padding: 20px 22px;
}
.frage summary {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.02rem;
  color: var(--dunkel); list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; margin-left: auto; align-self: center;
  width: 11px; height: 11px; border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange); border-radius: 1px;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s;
}
.frage[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.frage summary:hover, .frage summary:focus-visible { color: var(--orange-text); }
.frage__zeichen {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--orange); color: #fff; font-weight: 700;
}
.frage__antwort { margin: 14px 0 0; font-size: 0.95rem; }

/* Kundenstimmen */
.stimmen {
  display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.stimme {
  background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  padding: 24px; box-shadow: var(--schatten); font-size: 0.93rem;
}
.stimme__sterne { color: var(--gold); letter-spacing: 2px; }
.stimme__zitat { display: block; color: var(--orange); font-weight: 700; font-size: 2.4rem; line-height: 1; font-family: 'Libre Baskerville', Georgia, serif; margin-bottom: 6px; }
.stimme p { margin: 12px 0 0; }
.stimme__name { display: block; margin-top: 14px; font-weight: 700; color: var(--dunkel); }
.google {
  display: inline-flex; flex-direction: column; gap: 8px;
  padding: 14px 26px 16px; border-radius: 14px; background: var(--orange-knopf);
  color: #fff; text-decoration: none;
}
.google:hover { background: #a8480a; }
.google__zeile { display: flex; align-items: center; gap: 14px; }
.google__g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--orange-knopf); font-weight: 700; font-size: 1.05rem;
}
.google__note { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.google__sterne { font-size: 0.95rem; letter-spacing: 3px; }
.google__text { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }

/* Leistungsseiten: Umfang und Ablauf */
/* vier feste Spalten wie im Entwurf, drei Kacheln fuellen die Reihe also nicht */
.umfang, .ablauf {
  display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: none;
}
@media (max-width: 1099px) { .umfang, .ablauf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .umfang, .ablauf { grid-template-columns: 1fr; } }
.umfang__karte, .schritt {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--rund);
  padding: 30px 26px; box-shadow: var(--schatten);
}
.umfang__nr, .schritt__nr {
  display: block; font-size: 0.85rem; font-weight: 700; color: var(--orange-text);
  margin-bottom: 12px;
}
.umfang__karte h3, .schritt h3 { font-size: 1.15rem; color: var(--dunkel); margin-bottom: 6px; }
.umfang__karte p, .schritt p { margin: 0; font-size: 0.93rem; }
.abschnitt--dunkel .schritt, .abschnitt--dunkel .umfang__karte {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none; color: rgba(255, 255, 255, 0.82);
}
.abschnitt--dunkel .schritt h3, .abschnitt--dunkel .umfang__karte h3 { color: #fff; }
.abschnitt--dunkel .schritt__nr, .abschnitt--dunkel .umfang__nr { color: #f9a35a; }
.abschnitt--dunkel .ober { color: var(--orange); }

/* Referenzgalerie */
.filter { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 34px; }
.chip {
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--rand);
  background: #fff; color: var(--text); font: inherit; font-size: 0.87rem; cursor: pointer;
}
.chip:hover { border-color: var(--orange); color: var(--orange-text); }
.chip--aktiv { background: var(--blau); border-color: var(--blau); color: #fff; }

/* drei Spalten wie im Entwurf (447 px Kacheln bei 1400 px Bereich) */
.galerie {
  display: grid; gap: 18px; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 899px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .galerie { grid-template-columns: 1fr; } }
.kachel__knopf {
  display: block; width: 100%; padding: 0; border: 0; border-radius: var(--rund);
  background: none; cursor: pointer; overflow: hidden; box-shadow: var(--schatten);
}
.kachel__knopf img {
  width: 100%; aspect-ratio: 447 / 350; object-fit: cover;
  transition: transform 0.25s;
}
/* der Entwurf setzt die mittleren sechs Reihen hochkant (447 zu 451) */
.kachel--hoch .kachel__knopf img, .kachel--hoch .vergleich__bilder { aspect-ratio: 447 / 451; }
.kachel .vergleich__bilder { border-radius: var(--rund); box-shadow: var(--schatten); }
.kachel .vergleich__bild { width: 100%; height: 100%; object-fit: cover; }
.kachel__knopf:hover img { transform: scale(1.03); }
.galerie__leer { margin-top: 26px; text-align: center; }

/* Großansicht */
[hidden] { display: none !important; }
.lupe {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 39, 92, 0.92); padding: 24px;
}
body.lupe-offen { overflow: hidden; }
.lupe__figur { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.lupe__bild { max-height: 80vh; width: auto; margin-inline: auto; border-radius: 10px; }
.lupe__text { color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; margin-top: 14px; }
.lupe__knopf {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 0; border-radius: 12px;
  background: var(--orange); color: #fff; cursor: pointer;
}
.lupe__zu { top: 20px; right: 20px; }
.lupe__zurueck { left: 20px; top: 50%; transform: translateY(-50%); }
.lupe__vor { right: 20px; top: 50%; transform: translateY(-50%); }

/* Kontakt */
.kontakt { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) { .kontakt { grid-template-columns: 1.5fr 1fr; } }
.formular, .direkt { border-radius: 16px; border-top: 5px solid var(--orange); }
.formular { background: #fff; box-shadow: var(--schatten-stark); padding: 30px; }
.formular__paar { display: grid; gap: 0 18px; }
@media (min-width: 600px) { .formular__paar { grid-template-columns: 1fr 1fr; } }
.feld { display: grid; gap: 6px; margin-bottom: 18px; }
.feld label { font-size: 0.85rem; font-weight: 600; color: var(--blau); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 0.95rem; color: var(--dunkel);
  padding: 13px 16px; border: 1px solid rgba(4, 39, 92, 0.22);
  border-radius: 8px; background: var(--hell); width: 100%;
}
.feld textarea { resize: vertical; }
.formular__hinweis { font-size: 0.83rem; }
.formular__senden { margin: 0; display: flex; justify-content: flex-end; }
.honig { position: absolute; left: -9999px; }

.direkt { background: var(--blau); color: rgba(255, 255, 255, 0.92); padding: 30px; }
.direkt h2 { color: #fff; font-size: 1.5rem; }
.direkt__liste { margin: 22px 0 0; }
.direkt__liste dt {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-top: 18px;
}
.direkt__liste dd { margin: 4px 0 0; font-size: 0.97rem; }
/* im Direktkontakt ohne Unterstrich, die Zeilen stehen fuer sich */
.direkt__liste a { color: #fff; text-decoration: none; }
.direkt__liste a:hover, .direkt__liste a:focus-visible { text-decoration: underline; }

/* Abschlussblock */
.banner { background: var(--blau); color: rgba(255, 255, 255, 0.78); border-top: 5px solid var(--orange); }
.banner__innen {
  display: flex; flex-wrap: wrap; gap: 24px 40px;
  align-items: center; justify-content: space-between;
  padding: clamp(48px, 5.6vw, 84px) 0;
}
.banner h2 { color: #fff; }
.banner p { margin: 0; max-width: 54ch; }
.banner .knopfreihe { margin: 0; }

/* Rechtstexte */
.rechtstext { font-size: 0.97rem; }
.rechtstext h2 { font-size: 1.35rem; margin-top: 34px; }
.rechtstext h3 { font-size: 1.1rem; margin-top: 24px; }

/* Fuß */
.fuss { background: #fff; border-top: 1px solid var(--rand); padding-top: clamp(40px, 5vw, 64px); }
.fuss__innen {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fuss__logo { width: 190px; }
.fuss__adresse { font-style: normal; font-size: 0.87rem; color: var(--blau); margin-top: 22px; line-height: 1.8; }
.fuss__adresse a { text-decoration: none; }
.fuss__adresse a:hover { text-decoration: underline; }
.fuss__titel {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 14px;
}
.fuss__spalte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.fuss__spalte a { font-size: 0.87rem; color: var(--blau); text-decoration: none; }
.fuss__spalte a:hover { text-decoration: underline; }
.fuss__unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 40px; padding: 20px 0 26px;
  border-top: 1px solid var(--rand); font-size: 0.82rem;
}
.fuss__unten p { margin: 0; }
.fuss__contentura img { width: 120px; height: auto; }