/* ==========================================================================
   Gebäudereinigung Kallo — Stylesheet
   Fonts are self-hosted (assets/fonts/) — no request ever leaves to Google.
   ========================================================================== */

/* --------------------------------------------------------------- Fonts -- */
/* Jost and Karla are variable fonts: one file covers the whole weight range. */

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

/* -------------------------------------------------------------- Tokens -- */

:root {
  /* Markenfarben — Vorgabe Simeon Kusnezov, 07.09.2026. Diese sechs Werte sind
     gesetzt. Zwei Kombinationen sind gesperrt, weil sie unter WCAG-AA reißen:
     --green als Text auf Weiß (2,05:1) und --green-dark auf --navy (2,65:1). */
  --navy: #262e63;
  --green: #8cc63f;        /* nur auf Navy und in der Bildmarke */
  --green-dark: #587d2c;   /* grüner Text und feine Linien auf hellem Grund */
  --green-tint: #e4eed2;   /* ruhige Fläche statt reinem Weiß */
  --navy-tint: #e2e2ef;    /* Trennlinien, zurückgenommene Flächen */
  --navy-wash: #f3f3f9;    /* aufgehellter Navy-Ton für ruhige Flächen */

  /* Abgeleitet: Hover-Stufen und die Helligkeiten, die eine Oberfläche braucht,
     aber kein Logo je verwendet. Alles bleibt im Navy-Farbton. */
  --navy-deep: #1c2350;    /* gedrückter Zustand auf Navy-Flächen */
  --ink: #262e63;          /* Fließtext auf hell — laut Vorgabe immer Navy */
  --body: #454b73;         /* 8,4:1 auf Weiß */
  --muted: #616791;        /* 5,4:1 auf Weiß */
  --on-navy: #e2e2ef;      /* Text auf Navy, 9,9:1 */
  --on-navy-quiet: #b9bcd9;/* Sekundärtext auf Navy, 6,8:1 */
  --numeral: #b9bad3;      /* rein dekorative Ziffern */
  --border: #e2e2ef;
  --border-strong: #cfcfe3;
  --border-quiet: #e8e8f2;
  --whatsapp: #25d366;
  --whatsapp-dark: #1fb857;
  --gold: #f5b400;

  --display: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1240px;
  /* Single source of truth for horizontal breathing room. Shrinks on phones,
     which is half of why nothing overflows any more. */
  --gutter: clamp(18px, 5vw, 28px);
  --radius: 3px;
}

/* --------------------------------------------------------------- Reset -- */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky header instead of hiding beneath it. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--text);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* `clip` (not `hidden`) — it contains stray overflow without breaking
     position: sticky on the header. */
  overflow-x: clip;
}

/* Nothing may push the viewport wider than itself. */
img,
video,
svg,
iframe {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--green-dark);
  text-decoration: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
a:hover { color: var(--navy); }

button { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }

::selection { background: var(--navy); color: #fff; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: #fff;
  color: var(--navy);
  font-family: var(--display);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(38, 46, 99, .22);
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------- Layout --- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(48px, 6vw, 70px) clamp(56px, 8vw, 100px); }

.eyebrow {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .18em;
  /* Sitzt ausschließlich auf Navy — dort ist Grün Basis erlaubt (6,2:1). */
  color: var(--green);
}

.h1,
.h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.1;
  text-wrap: pretty;
}
.h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.08; }
.h2 { font-size: clamp(27px, 4.6vw, 46px); }

.lede {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--body);
  max-width: 52ch;
}

/* A heading on the left, supporting copy on the right — stacks on its own
   once the two no longer fit side by side. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(14px, 3vw, 24px);
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 4vw, 32px);
}
.section-head p {
  margin: 0 0 6px;
  font-size: 16.5px;
  color: var(--muted);
  max-width: 44ch;
  line-height: 1.6;
}

/* ------------------------------------------------------------ Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(15.5px, 1.6vw, 16.5px);
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  /* Long German words never widen the button past the screen. */
  max-width: 100%;
}
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--navy-tint); color: var(--navy); }

.btn--ghost { border-color: rgba(255, 255, 255, .65); color: #fff; font-weight: 500; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); color: #fff; }

.btn--whatsapp { background: var(--whatsapp); color: #fff; width: fit-content; }
.btn--whatsapp:hover { background: var(--whatsapp-dark); color: #fff; }

.btn--outline {
  border-color: var(--navy);
  color: var(--navy);
  padding: 9px 20px;
  font-size: 15.5px;
}
.btn--outline:hover { background: var(--navy); color: #fff; }

.link-arrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------- Topbar --- */

.topbar {
  background: var(--navy);
  color: var(--on-navy);
  font-size: 13.5px;
}
.topbar .shell {
  padding-block: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.topbar__hours { margin-left: auto; }
.topbar__tel { color: #fff; font-weight: 500; white-space: nowrap; }
.topbar__tel:hover { color: var(--green); }

/* ------------------------------------------------------------- Header --- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header .shell {
  padding-block: 12px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

/* Kompaktfassung. Die Hauptfassung ist fast quadratisch und bräuchte 191 px
   Breite, um lesbar zu bleiben — das ergäbe eine über 200 px hohe sticky
   Kopfzeile. Hier trägt deshalb die Kompaktfassung den Header; sie bringt den
   Schriftzug KALLO selbst mit, ein CSS-Nachbau der Wortmarke daneben wäre laut
   Vorgabe ohnehin nicht erlaubt. */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img { height: clamp(46px, 8vw, 68px); width: auto; display: block; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 500;
}
.nav a { color: var(--ink); }
.nav a:hover { color: var(--green-dark); }
.nav a.btn--outline { color: var(--navy); }
.nav a.btn--outline:hover { color: #fff; }

/* Hamburger — hidden until the nav actually stops fitting. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--navy);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  min-height: clamp(460px, 78vh, 660px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__img {
  animation: heroZoom 2.4s ease-out both;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(28, 35, 80, .92) 0%,
    rgba(28, 35, 80, .55) 38%,
    rgba(28, 35, 80, .12) 70%,
    rgba(28, 35, 80, .25) 100%);
}
.hero__body {
  position: relative;
  padding-block: clamp(90px, 14vw, 120px) clamp(44px, 7vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vw, 24px);
}
.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(32px, 7.4vw, 66px);
  line-height: 1.08;
  color: #fff;
  max-width: 720px;
  text-wrap: pretty;
}
.hero h1 span { color: var(--green); }
.hero p {
  margin: 0;
  color: var(--on-navy);
  font-size: clamp(16px, 2.2vw, 18.5px);
  line-height: 1.65;
  max-width: 520px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Fractional star bar — a gold layer clipped over a dim one, so 4,7 and 4,9 are
   actually distinguishable instead of both rounding to five full stars. Both
   layers carry identical text and metrics, so the clip lands where it should. */
.stars {
  position: relative;
  display: inline-block;
  /* Both score blocks are flex containers, which would stretch this to the full
     column width — and the fill percentage is measured against it, so it has to
     hug the five glyphs exactly. */
  width: max-content;
  white-space: nowrap;
  line-height: 1;
}
/* The score blocks are flex containers, whose `display` would otherwise beat the
   UA rule for [hidden] and show an empty pill before the rating loads. */
[data-google-rating][hidden] { display: none; }
[data-google] { font-variant-numeric: tabular-nums; }
/* Block layout on both layers keeps the glyph runs pixel-identical, so the
   clipped layer lands exactly on top of the dim one. */
.stars__base { display: block; color: rgba(255, 255, 255, .32); }
.stars__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;                 /* set inline from the live rating */
  overflow: hidden;
  color: var(--gold);
}
.reviews .stars__base { color: rgba(255, 255, 255, .32); }

/* Google rating pill in the hero */
.rating-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
}
.rating-link:hover { color: var(--green); }
.rating-link__value { font-family: var(--display); font-weight: 600; font-size: 16px; }
.rating-link__stars { color: var(--gold); letter-spacing: 1.5px; font-size: 13.5px; }
.rating-link__count {
  color: var(--on-navy);
  font-size: 14px;
  border-bottom: 1px solid rgba(226, 226, 239, .5);
}

@keyframes heroZoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* -------------------------------------------------------------- Facts --- */

.facts { border-bottom: 1px solid var(--border); }
.facts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.fact {
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--border);
}
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; border-right: none; }
.fact__text { display: flex; flex-direction: column; gap: 3px; }
.fact__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
}
.fact__sub { font-size: 15px; color: var(--muted); }

/* The icons carry the mobile layout. On the wide strip the vertical dividers
   already do that job, so they stay out of the way there. */
.fact__icon { display: none; }
.fact__icon svg { width: 22px; height: 22px; }

/* --------------------------------------------------------- Leistungen --- */

/* The original `72px 1.1fr 1fr` was the main overflow culprit: it demanded
   roughly 800px of width and simply spilled off a phone screen. */
.service {
  border-top: 1px solid var(--border);
  padding-block: clamp(30px, 5vw, 44px);
  display: grid;
  grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
}
.service:last-of-type { border-bottom: 1px solid var(--border); }
.service__num {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 44px);
  color: var(--numeral);
  line-height: 1;
}
.service__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.service__body h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 28px);
  color: var(--navy);
}
.service__body p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body);
  max-width: 52ch;
}
.service__body a { align-self: flex-start; }
.service__media {
  width: 100%;
  height: clamp(200px, 30vw, 300px);
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.service__placeholder {
  background: repeating-linear-gradient(45deg,
    var(--navy-wash), var(--navy-wash) 16px, #e8e8f2 16px, #e8e8f2 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service__placeholder span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
  background: rgba(255, 255, 255, .9);
  padding: 6px 12px;
  border-radius: var(--radius);
}

/* -------------------------------------------------------------- Claim --- */

.claim {
  position: relative;
  margin-top: clamp(40px, 6vw, 60px);
  overflow: hidden;
}
.claim img {
  display: block;
  width: 100%;
  height: clamp(280px, 45vw, 420px);
  object-fit: cover;
  object-position: center 55%;
}
.claim__overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 35, 80, .5);
  display: flex;
  align-items: center;
}
.claim__overlay p {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 5vw, 44px);
  color: #fff;
  max-width: 640px;
  line-height: 1.25;
}

/* ------------------------------------------------------ Privat/Gewerbe --- */

.audience { background: var(--navy); }
.audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(56px, 8vw, 90px);
}
.audience__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.audience__col:first-child {
  padding-right: clamp(24px, 4vw, 48px);
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.audience__col:last-child { padding-left: clamp(24px, 4vw, 48px); }
.audience__col h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(23px, 3.4vw, 30px);
  color: #fff;
  line-height: 1.2;
  text-wrap: pretty;
}
.audience__col > p {
  margin: 0;
  color: var(--on-navy);
  font-size: 16.5px;
  line-height: 1.7;
}
.audience__list { display: flex; flex-direction: column; margin-top: 6px; }
.audience__list span {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--on-navy);
  font-size: 16px;
}

/* --------------------------------------------------------- Einsatzgeb. --- */

.region {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.region__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.region__list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  max-width: 480px;
}
.region__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.region__row:last-child { border-bottom: 1px solid var(--border); }
.region__row span:first-child {
  font-family: var(--display);
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--ink);
}
.region__row--home span:first-child { font-weight: 600; color: var(--navy); }
.region__badge { font-size: 14px; color: var(--green-dark); font-weight: 700; white-space: nowrap; }
.region__img {
  width: 100%;
  height: clamp(280px, 45vw, 480px);
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* --------------------------------------------------------- Bewertungen --- */

/* Navy-Band wie der Privat/Gewerbe-Abschnitt: weißer Text, grüne Überschrift.
   Auf Navy ist Grün Basis erlaubt und kommt auf 6,2:1. */
.reviews { background: var(--navy); }
.reviews .h2 { color: var(--green); }
.reviews .shell {
  padding-block: clamp(56px, 8vw, 90px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}
.reviews__score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}
.reviews__value {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 40px);
  color: #fff;
  line-height: 1;
}
.reviews__meta { display: flex; flex-direction: column; gap: 2px; }
.reviews__stars { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.reviews__count { font-size: 14px; color: var(--on-navy-quiet); }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.review {
  margin: 0;
  padding: 4px 36px;
  border-right: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.review:first-child { padding-left: 0; }
.review:last-child { padding-right: 0; border-right: none; }
/* A lone review has no neighbour to sit against. One column and a larger type
   size read as a deliberate pull quote instead of a card stranded in a third
   of the row — the column rules below would otherwise be invisible anyway. */
.reviews__grid--single { grid-template-columns: minmax(0, 1fr); }
.reviews__grid--single .review { padding: 0; max-width: 58ch; }
.reviews__grid--single .review p { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.6; }
.review__stars { color: var(--gold); letter-spacing: 2px; font-size: 14px; }
.review p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--on-navy);
}
.review cite {
  /* Reviews differ in length; pushing the attribution down keeps the cites on
     one line across the columns instead of stepping with the quote heights. */
  margin-top: auto;
  padding-top: 4px;
  font-style: normal;
  font-family: var(--display);
  font-size: 14.5px;
  color: var(--on-navy-quiet);
}
.reviews__disclaimer {
  margin: 0;
  font-size: 13px;
  color: var(--on-navy-quiet);
  max-width: 76ch;
  line-height: 1.6;
}
/* Auf Navy trägt nur Weiß den Fließtext; die Unterstreichung macht den Link
   kenntlich, ohne eine zweite Farbe einzuführen. */
.reviews a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reviews a:hover { color: var(--green); }

/* ------------------------------------------------------------ Kontakt --- */

.contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.contact__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.contact__rows { display: flex; flex-direction: column; margin-top: 10px; max-width: 460px; }
.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.contact__row:last-child { border-bottom: 1px solid var(--border); }
.contact__row dt { font-family: var(--display); font-size: 15px; color: var(--muted); }
.contact__row dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink);
  text-align: right;
  /* Long e-mail addresses wrap instead of widening the page. */
  overflow-wrap: anywhere;
}
.contact__row dd a { font-weight: 500; color: var(--ink); }
.contact__row dd a:hover { color: var(--green-dark); }

.socials { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.socials a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
/* Each network keeps its own brand colour on hover/focus; --brand is set per
   link below so the rule itself stays in one place. */
.socials a:hover,
.socials a:focus-visible {
  background: var(--brand, var(--navy));
  border-color: var(--brand, var(--navy));
  color: #fff;
}
.socials__link--instagram { --brand: #E1306C; }
.socials__link--facebook  { --brand: #1877F2; }
.socials__link--tiktok    { --brand: #010101; }
.socials__link--youtube   { --brand: #FF0000; }

/* --------------------------------------------------------------- Form --- */

.form {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  min-width: 0;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: var(--text);
  /* 16px minimum stops iOS Safari zooming in — and that zoom is itself a
     classic source of "the page is suddenly wider than the screen". */
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible { outline-offset: 1px; }

.form__consent {
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
}
.form__consent input { width: auto; margin-top: 3px; flex-shrink: 0; }

/* Honeypot: invisible to people, irresistible to bots. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.55;
}
.form__status[hidden] { display: none; }
.form__status--ok { background: var(--green-tint); border: 1px solid #c3d9a0; color: #3f5d1f; }
.form__status--error { background: #fdeeee; border: 1px solid #f2c4c4; color: #9b2c2c; }

.form button[disabled] { opacity: .6; cursor: progress; }

.cf-turnstile:empty { display: none; }

/* --------------------------------------------------------------- Grid --- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 24px 20px;
}
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gallery img,
.gallery video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.gallery figcaption {
  font-family: var(--display);
  font-size: 14px;
  color: var(--muted);
}

.gallery-cta {
  border-top: 1px solid var(--border);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gallery-cta p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(18px, 2.6vw, 20px);
  color: var(--navy);
}

/* ------------------------------------------------------------- Footer --- */

.footer { background: var(--navy); }
.footer .shell {
  padding-block: clamp(32px, 5vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 24px);
  justify-content: space-between;
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
/* Die Hauptfassung, hier in der Negativvariante. Sie ist der einzige Ort auf der
   Seite, an dem das vollständige Logo dicht an der Mindestgröße von 191 px steht. */
.footer__logo {
  width: clamp(150px, 20vw, 191px);
  height: auto;
  display: block;
}
.footer__sub,
.footer__copy { color: var(--on-navy-quiet); font-size: 14px; }
.footer nav {
  display: flex;
  gap: clamp(14px, 3vw, 26px);
  font-size: 15px;
  flex-wrap: wrap;
}
.footer nav a { color: var(--on-navy); }
.footer nav a:hover { color: #fff; }

/* ---------------------------------------------------------- Rechtstexte -- */

.legal-header { border-bottom: 1px solid var(--border); }
.legal-header .shell {
  padding-block: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.legal-header a.back { margin-left: auto; font-family: var(--display); font-size: 16px; }

.legal {
  max-width: 820px;
  margin-inline: auto;
  padding-block: clamp(44px, 7vw, 60px) clamp(64px, 10vw, 90px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.legal h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 6vw, 38px);
  color: var(--navy);
}
.legal h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 3vw, 22px);
  color: var(--navy);
}
.legal__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(16px, 2vw, 17px);
  line-height: 1.7;
}
.legal__block p { margin: 0; color: var(--body); }
.legal__block ul { margin: 4px 0 0; padding-left: 20px; color: var(--body); }
.legal__block li { margin-bottom: 6px; }
.legal a { overflow-wrap: anywhere; }
.legal__meta { margin: 0; font-size: 15px; color: var(--muted); }
.legal__note {
  margin: 0;
  background: #fff7e6;
  border: 1px solid #f0dfb2;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 15px;
  color: #7a621f;
  line-height: 1.6;
}

/* ------------------------------------------------------------- Reveal --- */

/* Scroll-in animation. Guarded behind `.js` so that without JavaScript every
   element is simply visible rather than stuck at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ================================================================
   Responsive — everything above is the wide layout; below it degrades
   in deliberate steps rather than overflowing.
   ================================================================ */

/* --- Tablet landscape: the three-column service rows lose their image
       column and stack it underneath the copy. ------------------------- */
@media (max-width: 960px) {
  .service {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .service__media,
  .service__placeholder {
    grid-column: 1 / -1;
    height: clamp(200px, 42vw, 280px);
  }
}

/* --- Nav no longer fits: collapse into a toggle panel. --------------- */
@media (max-width: 900px) {
  html { scroll-padding-top: 80px; }

  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(38, 46, 99, .12);
    padding: 8px var(--gutter) 20px;
    font-size: 17px;
    /* Collapsed by default; `display` keeps it out of the tab order too. */
    display: none;
  }
  .nav[data-open='true'] { display: flex; }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav a.btn--outline {
    margin-top: 14px;
    border-bottom-width: 1.5px;
    justify-content: center;
    padding: 13px 20px;
  }

  /* The audience columns lose their vertical divider and stack. */
  .audience__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); }
  .audience__col:first-child {
    padding-right: 0;
    border-right: none;
    padding-bottom: clamp(32px, 6vw, 48px);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  .audience__col:last-child { padding-left: 0; }

  .region { grid-template-columns: minmax(0, 1fr); }
  .region__img {
    height: clamp(240px, 55vw, 380px);
    order: -1;
    /* The photo is a 3:4 portrait squeezed into a short landscape box, so most
       of it is cropped away. Centred, the crop lands on 23–77% — all foliage,
       with the squeegee on the glass cut off above. Pulling the focal point up
       keeps the actual window cleaning in frame. */
    object-position: center 25%;
  }

  .contact { grid-template-columns: minmax(0, 1fr); }
}

/* --- Reviews and facts go single-file. ------------------------------- */
@media (max-width: 820px) {
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .review {
    padding: 22px 0;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .review:first-child { padding-top: 0; border-top: none; }
  .review:last-child { padding-bottom: 0; }

}

/* --- Facts as a two-column block. Deliberately bounded at the bottom: below
       620px the facts become icon rows, and these nth-child paddings would
       otherwise win on specificity and knock the gutters off. ------------- */
@media (min-width: 621px) and (max-width: 820px) {
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 22px 20px; }
  .fact:nth-child(2n) { padding-right: 0; border-right: none; }
  .fact:nth-child(2n + 1) { padding-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
}

/* --- Phone. ---------------------------------------------------------- */
@media (max-width: 620px) {
  /* Opening hours are the least important thing in the topbar — drop them
     first so the phone number keeps its own line. */
  .topbar__hours { display: none; }
  .topbar .shell { justify-content: space-between; }
  .topbar__tel { margin-left: auto; }

  .service { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .service__num { font-size: 30px; }

  /* Stacked, the three facts lose the dividers that gave them structure and
     read as loose text. Restore it as a tinted, full-bleed band of icon rows. */
  .facts {
    background: var(--navy-wash);
    border-top: 1px solid var(--border);
  }
  .facts .shell { padding-inline: 0; }
  .facts__grid { grid-template-columns: minmax(0, 1fr); }

  .fact,
  /* The wide layout strips the outer padding off the first and last column;
     as stacked rows they all need the same gutter back. */
  .fact:first-child,
  .fact:last-child {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    padding: 15px var(--gutter);
    border-right: none;
    border-top: 1px solid rgba(38, 46, 99, .14);
  }
  .fact:first-child { border-top: none; }

  .fact__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* Without this the circle squashes into an oval when the label wraps. */
    flex: 0 0 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-strong);
    color: var(--green-dark);
  }
  .fact__title { font-size: 16.5px; }
  .fact__sub { font-size: 14.5px; line-height: 1.45; }

  .form__row { grid-template-columns: minmax(0, 1fr); }

  .contact__row { flex-direction: column; gap: 4px; align-items: flex-start; }
  .contact__row dd { text-align: left; }

  .hero__actions .btn { width: 100%; }
  .rating-link { width: 100%; margin-left: 0; }

  .gallery { gap: 18px 14px; }

  .footer .shell { flex-direction: column; align-items: flex-start; }
}

/* --- Very narrow phones (≈320px). ------------------------------------ */
@media (max-width: 380px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- Motion/print -- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .topbar, .header, .nav-toggle, .hero__img, .socials, .form { display: none; }
  body { color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 11px; }
}