/* ==========================================================================
   pages.css — Abschnitte, die zu bestimmten Seiten gehören
   --------------------------------------------------------------------------
   WOFÜR: Hero, Leistungsraster, Reichweiten-Abschnitt, Zielgruppen,
          CTA-Band, Aufbau der Leistungs-, Kontakt- und Rechtsseiten.
   ABHÄNGIG VON: tokens.css, style.css, components.css
   BEIM ÄNDERN BEACHTEN: Diese Datei wird zuletzt eingebunden und darf
          deshalb Bausteine im Kontext eines Abschnitts anpassen. Neue
          allgemeine Bausteine gehören trotzdem nach components.css.
   ========================================================================== */

/* ==========================================================================
   1. Hero
   Aufbau: links ein typografischer Block, rechts oben versetzt das
   Leistungsverzeichnis (Baustein .ledger in components.css), darunter ein
   Bild, das nach rechts aus dem Raster herausläuft. Die Asymmetrie ist
   der Punkt — nichts hier ist zentriert.
   ========================================================================== */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 0; }

.hero__grid { align-items: start; }

.hero__intro { grid-column: 1 / 8; }

@media (max-width: 1100px) { .hero__intro { grid-column: 1 / 9; } }
@media (max-width: 900px) { .hero__intro { grid-column: 1 / -1; } }

/* Drei Tonstufen statt eines massiven Blocks: der Auftakt läuft im
   Mittelgewicht, der Kern „einen Ansprechpartner." trägt die volle
   Stärke und schimmert grün, die Pointe „Nicht fünf." tritt in der
   gedämpften Textfarbe zurück — wie ein trockener Nachsatz. */
.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  margin-bottom: var(--sp-5);
  font-weight: 500;
}

.hero__title strong { font-weight: 700; }

.hero__title-quiet { color: var(--text-muted); }

/* Belege im Hero: eine gesetzte Zeile, keine Chips. Jede Angabe trägt ihr
   Zeichen und steht als Fußzeile unter dem Titel. Pillen mit Häkchen sehen
   auf jeder zweiten Seite gleich aus; das hier liest sich wie eine Angabe,
   nicht wie ein Aufkleber. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Jede Angabe trägt ihr Zeichen: Uhr für die Frist, Haus für die
   Begehung, Person für die Zuständigkeit. Das Zeichen führt das Auge,
   die Trennstriche von früher entfallen dadurch. */
.hero__proof li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
}

.hero__proof svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: var(--green-text);
}

/* Die harte Angabe trägt die Farbe, der Rest bleibt ruhig */
.hero__proof strong {
  font-weight: 700;
  color: var(--ink);
}

.hero__aside {
  grid-column: 9 / -1;
  margin-top: var(--sp-8);   /* der Versatz gegenüber dem Textblock */
  min-width: 0;              /* sonst treibt das Verzeichnis die Rasterspalten
                                auseinander und läuft rechts aus dem Container */
}

@media (max-width: 1100px) { .hero__aside { grid-column: 9 / -1; margin-top: var(--sp-6); } }
@media (max-width: 900px) { .hero__aside { grid-column: 1 / -1; margin-top: 0; } }

/* Der Sprung zu den Leistungen, direkt unter dem Verzeichnis */
.hero__all { margin: var(--sp-4) 0 0; }

.hero__all a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--green-text);
  text-decoration: none;
}

@media (hover: hover) {
  .hero__all a:hover { color: var(--ink); }
}

.hero__all svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
  .hero__all a:hover svg { transform: translateX(3px); }
}

/* Zwischen 901 und 1100px ist die Randspalte schmal: die Pos.-Spalte
   fällt weg, damit die Problemzeilen nicht dreizeilig umbrechen. */
@media (max-width: 1100px) and (min-width: 901px) {
  .ledger__row { grid-template-columns: 1fr auto; }
  .ledger__pos { display: none; }
}

/* Auf dem Telefon wird der Hero eine ruhige Spalte: Belege untereinander
   statt umbrechender Fußzeile, Aktionen in voller Breite, dann mit etwas
   Luft das Leistungsverzeichnis. */
@media (max-width: 600px) {
  /* Nebeneinander bräche jede Angabe für sich um und die Zeile zerfiele —
     auf dem Telefon stehen die drei Belege deshalb untereinander. */
  .hero__proof {
    display: grid;
    gap: var(--sp-3);
  }
  .hero__proof li { padding-block: 0; }


  .hero .actions { gap: var(--sp-3); }
  .hero .actions .btn { width: 100%; }

  .hero__aside { margin-top: var(--sp-6); }
}

/* Hero-Bild als breite, gerundete Fläche */
.hero__media {
  margin-top: var(--section-tight);
  position: relative;
}

.hero__media img {
  width: 100%;
  height: clamp(240px, 36vw, 480px);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   2. Leistungsraster — vier Blöcke, bewusst ungleich groß
   ========================================================================== */
.services-grid { gap: var(--sp-5); }

.services-grid .card:nth-child(1) { grid-column: span 7; }
.services-grid .card:nth-child(2) { grid-column: span 5; }
.services-grid .card:nth-child(3) { grid-column: span 5; }
.services-grid .card:nth-child(4) { grid-column: span 7; }

@media (max-width: 900px) {
  .services-grid .card:nth-child(n) { grid-column: span 6; }
}

/* Die großen Karten bekommen ein Bild, die kleinen leben von Typografie
   und Leistungsliste. */
.services-grid .card__media img { height: clamp(180px, 22vw, 280px); }

/* Die Textkarten stehen neben höheren Bildkarten. Der Inhalt wird über
   die Höhe verteilt statt oben zusammengedrängt. */
.services-grid .card--text .card__body {
  padding-top: var(--sp-6);
  justify-content: space-between;
}

/* ==========================================================================
   3. Reichweite — der Abschnitt zum bundesweiten Einsatz
   Dunkle Fläche, weil dieser Punkt der wichtigste Unterschied zum
   Wettbewerb ist und optisch stehen bleiben soll.
   ========================================================================== */
.reach__grid { align-items: center; }

.reach__text { grid-column: 1 / 7; }
.reach__panel { grid-column: 8 / -1; }

@media (max-width: 900px) {
  .reach__text, .reach__panel { grid-column: 1 / -1; }
}

.reach__title { max-width: 16ch; }

.reach__args { list-style: none; margin-top: var(--sp-6); }

.reach__args li {
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line-green);
  transition: padding-left var(--dur) var(--ease);
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
}

@media (max-width: 620px) { .reach__args li { grid-template-columns: 1fr; gap: var(--sp-2); } }

@media (hover: hover) {
  .reach__args li:hover { padding-left: var(--sp-3); }
}

.reach__args .reach__key {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: var(--width-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--green-text);
}

.reach__args .reach__val { color: var(--ink-80); font-size: var(--fs-small); }

/* ==========================================================================
   4. Zielgruppen
   ========================================================================== */
.audience__grid { gap: var(--sp-5); }

.audience__item {
  grid-column: span 3;
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

@media (hover: hover) {
  .audience__item:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: var(--green);
  }
}

@media (max-width: 900px) { .audience__item { grid-column: span 3; } }
@media (max-width: 700px) { .audience__item { grid-column: span 6; } }

.audience__item h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-3);
  /* Lange Komposita wie "Eigentümergemeinschaften" brauchen in schmalen
     Spalten die Silbentrennung, sonst laufen sie über. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.audience__item p { font-size: var(--fs-small); color: var(--text-muted); }

.audience__benefit {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--green-text);
}

/* Hinweis für Privatkunden unter den vier Karten: bewusst klein, mit
   Link in die Anfragestrecke — die Karten selbst bleiben unverändert. */
.audience__note {
  max-width: 62ch;
  margin-top: var(--sp-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.audience__note strong { color: var(--ink); }

/* Zwischenruf unter dem Ablauf: ein Satz, ein Knopf. Eine weiße Karte
   auf der Papierfläche, die zur Anfrage überleitet, bevor die Nachweise
   kommen — der Weg zum Angebot soll nie weiter als einen Bildschirm
   entfernt sein. */
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.inline-cta__text { margin: 0; color: var(--text-muted); max-width: 52ch; }
.inline-cta__text strong { color: var(--ink); }

@media (max-width: 560px) {
  .inline-cta { padding: var(--sp-5); }
  .inline-cta .btn { width: 100%; }
}

/* ==========================================================================
   5. CTA-Band — das eine großflächige grüne Element pro Seite
   ========================================================================== */
.cta {
  background: var(--green);
  color: var(--ink);
  border-radius: var(--radius-lg);
  margin-inline: var(--gutter);
}

@media (max-width: 700px) {
  .cta { margin-inline: 0; border-radius: 0; }
}

.cta__grid { align-items: center; }

.cta__text { grid-column: 1 / 7; }
.cta__form { grid-column: 7 / -1; }

@media (max-width: 900px) {
  .cta__text, .cta__form { grid-column: 1 / -1; }
}

.cta h2 { color: var(--ink); max-width: 18ch; }
.cta p { color: var(--ink); }

.cta .btn--primary { background: var(--ink); color: var(--white); }
@media (hover: hover) {
  .cta .btn--primary:hover { background: var(--ink-deep); color: var(--white); }
}

/* Der Rahmen ist Ink mit 35 % Deckung, damit er auf dem Grün sitzt, ohne
   einen eigenen Farbwert zu brauchen. */
.cta .btn--ghost { border-color: color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
@media (hover: hover) {
  .cta .btn--ghost:hover { border-color: var(--ink); }
}

/* Im grünen Band ist das Formular die Hauptaktion. Telefon läuft als
   Kontur, WhatsApp als unterstrichener Textlink in Schriftfarbe — grüne
   Schrift auf Grün wäre unlesbar. */
.cta .link-icon { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Formular im grünen Band steht auf weißem Grund, damit die Felder
   ausreichend Kontrast haben. */
.cta__card {
  background: var(--surface);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 560px) { .cta__card { padding: var(--sp-5); } }

/* ==========================================================================
   6. Seitenkopf der Unterseiten
   ========================================================================== */
.page-head {
  position: relative;   /* Bezug für den Registerreiter */
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: var(--section-tight);
}

/* Nur der Winterdienst-Seitenkopf trägt die Schneefläche. Sie liegt hinter
   dem Inhalt, deshalb bekommt der Text eine eigene Ebene. */
.page-head--snow {
  position: relative;
  /* clip statt hidden: schneidet die Flocken ebenso am Rand ab, erzeugt
     aber keinen Scroll-Container und lässt damit position: sticky des
     Registerreiters darin unangetastet. */
  overflow: clip;
}

.page-head--snow > .wrap { position: relative; z-index: 1; }

/* Der Abschnitt direkt unter dem Seitenkopf rückt näher heran */
.page-head + .section { padding-top: var(--sp-4); }

.page-head__grid { align-items: end; }
.page-head__text { grid-column: 1 / 8; }
.page-head__meta { grid-column: 9 / -1; }

@media (max-width: 900px) {
  .page-head__text, .page-head__meta { grid-column: 1 / -1; }
  .page-head__meta { margin-top: var(--sp-5); }
}

/* Brotkrumen */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin-bottom: var(--sp-5);
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: var(--width-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-muted); text-decoration: none; }
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--green-text); text-decoration: underline; }
}
.breadcrumb li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--line); }

/* ==========================================================================
   7. Leistungsseiten
   Zweispaltiger Aufbau: Text links, klebende Anfragebox rechts.
   ========================================================================== */
.service__grid { align-items: start; gap: var(--sp-8) var(--sp-7); }

/* Der Fließtext steht auf einer weißen Fläche, nicht direkt auf dem
   Off-White-Grund. Das trennt Lesetext und Seitenhintergrund und macht
   lange Leistungsseiten übersichtlich. */
.service__main {
  grid-column: 1 / 8;
  padding: var(--sp-8);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 620px) { .service__main { padding: var(--sp-5); } }
.service__side { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

@media (max-width: 1000px) {
  .service__main { grid-column: 1 / 9; }
  .service__side { grid-column: 9 / -1; }
}

@media (max-width: 900px) {
  .service__main, .service__side { grid-column: 1 / -1; }
  .service__side { position: static; }
}

/* Die Spalten dürfen schmaler werden als ihr breitester Inhalt. Sonst
   weitet die Abgrenzungstabelle (nowrap-Kopfzeile in .table-scroll) das
   1fr-Raster und die Seite scrollt auf 360 px waagerecht — obwohl die
   Tabelle in ihrem eigenen Container scrollen könnte. */
.service__main, .service__side { min-width: 0; }

.service__main h2 { margin-top: var(--sp-8); }
.service__main h2:first-child { margin-top: 0; }
.service__main h3 { margin-top: var(--sp-6); }
.service__main p, .service__main ul { max-width: 68ch; }

/* Abgrenzungstabelle: welche Leistung wofür zuständig ist */
.delimit { margin-top: var(--sp-6); }

/* ==========================================================================
   8. Kontaktseite
   ========================================================================== */
.contact__grid { align-items: start; }
.contact__form {
  grid-column: 1 / 8;
  padding: var(--sp-7);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 620px) { .contact__form { padding: var(--sp-5); } }
.contact__info { grid-column: 9 / -1; }

@media (max-width: 900px) {
  .contact__form, .contact__info { grid-column: 1 / -1; }
  .contact__info { margin-top: var(--sp-7); }
}

/* ==========================================================================
   9. Rechtstexte — schmale Spalte, klare Gliederung
   ========================================================================== */
/* Rechtstexte ebenfalls auf weißer Fläche, in Lesebreite */
.legal {
  max-width: 76ch;
  padding: var(--sp-8);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (max-width: 620px) { .legal { padding: var(--sp-5); } }
.legal h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
.legal h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); }
.legal ul { margin: 0 0 var(--sp-4) 1.2rem; list-style: disc; }
.legal li { margin-bottom: var(--sp-2); }
.legal dl { margin: 0 0 var(--sp-5); }
.legal dt { font-weight: 700; margin-top: var(--sp-4); }
.legal dd { margin: 0; color: var(--text-muted); }

/* Häkchenlisten behalten im Rechtstext ihre eigene Form — die Regeln für
   Fließtext-Aufzählungen darüber greifen hier nicht. */
.legal .check-list { margin-left: 0; list-style: none; }
.legal .check-list li { margin-bottom: var(--sp-3); }

/* ==========================================================================
   10. Über uns
   ========================================================================== */
.about__grid { align-items: center; }
.about__text { grid-column: 1 / 7; }
.about__media { grid-column: 7 / -1; }

@media (max-width: 900px) {
  .about__text, .about__media { grid-column: 1 / -1; }
  .about__media { margin-top: var(--sp-6); }
}

/* Wechselseitig versetzte Text-Bild-Blöcke */
.alt-block { align-items: center; }
.alt-block + .alt-block { margin-top: var(--section); }
.alt-block__text { grid-column: 1 / 7; }
.alt-block__media { grid-column: 7 / -1; }
.alt-block--flip .alt-block__text { grid-column: 7 / -1; }
.alt-block--flip .alt-block__media { grid-column: 1 / 7; grid-row: 1; }

@media (max-width: 900px) {
  .alt-block__text,
  .alt-block__media,
  .alt-block--flip .alt-block__text,
  .alt-block--flip .alt-block__media { grid-column: 1 / -1; grid-row: auto; }
}

/* ==========================================================================
   11. Übersichtsseite Leistungen
   ========================================================================== */
.overview__item { grid-column: span 6; }

@media (max-width: 900px) { .overview__item { grid-column: span 6; } }

/* ==========================================================================
   12. Dankeseite / Statusmeldung nach dem Absenden
   ========================================================================== */
.thanks { text-align: left; max-width: 52ch; }


/* ==========================================================================
   13. FAQ-Block
   Linksbündig im Raster statt mittig — die Seite kennt keine zentrierten
   Textblöcke.
   ========================================================================== */
.faq-block { max-width: 62rem; }
.faq-block .faq { margin-top: var(--sp-7); }


/* ==========================================================================
   14. Seite „Angebot anfordern“ — die Anfragestrecke
   Zwei Spalten: links die Schritte, rechts die Gründe, warum man sie zu
   Ende geht. Auf schmalen Viewports wandert die rechte Spalte nach unten,
   damit die Strecke oben steht.
   ========================================================================== */
.funnel__grid { align-items: start; }
.funnel__main { grid-column: 1 / 8; }
.funnel__aside { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--sp-5)); }

@media (max-width: 900px) {
  .funnel__main, .funnel__aside { grid-column: 1 / -1; }
  .funnel__aside { position: static; margin-top: var(--sp-7); }
}

.funnel__card {
  padding: var(--sp-7);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Schrittwechsel: der neue Schritt fährt sanft ein */
.funnel__step { animation: step-in var(--dur-slow) var(--ease-out); }

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .funnel__step { animation: none; }
}

@media (max-width: 560px) { .funnel__card { padding: var(--sp-5); } }