/* ==========================================================================
   pages.css — seitenspezifische Sektionen
   Baut ausschliesslich auf tokens.css auf.
   ========================================================================== */

/* ==========================================================================
   1. HERO (Startseite)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--sp-8), 6vw, var(--sp-10));
  background-color: var(--c-surface);
}

/* Dekoratives Schema im Hintergrund: der angeschnittene Bogen aus dem Logo
   plus eine Leitungsfuehrung. Bewusst dekorativ und deshalb nicht auf
   DOM-Kanten ausgerichtet — aria-hidden im Markup. */
.hero__deco {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__grid {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--sp-9);
  }
}

/* 20ch haelt die Zeile «Ein Ansprechpartner.» zusammen — bei 16ch bleibt
   «Ein» allein auf der ersten Zeile stehen. */
.hero h1 { max-width: 20ch; }

.hero__lead {
  max-width: 52ch;
  margin-top: var(--sp-6);   /* h1 ist hier sehr gross — 24px waeren zu eng */
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

.hero__actions { margin-top: var(--sp-7); }

/* Drei knappe Belege direkt unter dem CTA — beantwortet die erste
   Rueckfrage, bevor sie entsteht. */
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__proof .icon { color: var(--c-accent-ink); }

.hero__arc { --wire-len: 1850; }

/* Die Leitung fasst das Bild an zwei Seiten ein — praezise am DOM
   ausgerichtet, deshalb in CSS statt im dekorativen SVG. */
.hero__media {
  position: relative;
  isolation: isolate;
}

.hero__media::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--sp-6) var(--sp-6) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  border: var(--wire-w) solid var(--c-accent);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-left-radius: var(--wire-radius);
}

/* Abzweigdose am oberen Ende der Leitung — sitzt exakt auf dem Linienende */
.hero__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--sp-5) * -1 - var(--wire-node) / 2 + var(--wire-w) / 2);
  top: calc(var(--sp-6) - var(--wire-node) / 2);
  width: var(--wire-node);
  height: var(--wire-node);
  border: var(--wire-w) solid var(--c-accent);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
}

@media (max-width: 47.999rem) {
  .hero__media::before,
  .hero__media::after { content: none; }
}

/* Kleine Identitaetskarte, die aus dem Bild herausragt */
.hero__badge {
  position: absolute;
  left: calc(var(--sp-5) * -1);
  bottom: calc(var(--sp-6) * -1);
  max-width: 15rem;
  padding: var(--sp-4) var(--sp-5);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-surface);
  box-shadow: var(--sh-pop);
}

@media (max-width: 47.999rem) {
  .hero__badge {
    position: static;
    max-width: none;
    margin-top: var(--sp-4);
    box-shadow: none;
  }
}

.badge__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}

.badge__role {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   1b. EINSATZGEBIET
   Eine Zeile statt einer Kennzahlenleiste: sagt etwas Nachpruefbares
   und traegt gleichzeitig die lokale Relevanz fuer die Suche.
   ========================================================================== */
.arealine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3) var(--sp-5);
  padding-block: var(--sp-5);
  border-block: var(--bw-hair) solid var(--c-line);
}

.arealine__label {
  flex: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* Ortsliste — auch im Fliesstext der Ueber-uns-Seite verwendet */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   2. SEITENKOPF (Unterseiten)
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--sp-7), 5vw, var(--sp-9));
  background-color: var(--c-surface-alt);
}

.page-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  max-width: 46rem;
}

.page-hero h1 { font-size: var(--fs-4xl); }

.page-hero .lead { margin-top: var(--sp-6); }

/* Angeschnittener Bogen links unten — dieselbe Geste wie im CTA-Band,
   nur leiser. */
.page-hero__arc {
  position: absolute;
  right: -10rem;
  bottom: -18rem;
  width: 30rem;
  height: 30rem;
  border: var(--bw-line) solid var(--c-line-strong);
  border-radius: var(--r-pill);
  border-bottom-color: transparent;
  border-left-color: transparent;
  pointer-events: none;
}

/* Auf schmalen Displays laeuft der Bogen durch die Ueberschrift.
   Dekoration, die den Text stoert, gehoert weg. */
@media (max-width: 48rem) {
  .page-hero__arc { display: none; }
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent-ink); }

.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: var(--sp-3);
  height: var(--wire-w);
  margin-right: var(--sp-2);
  vertical-align: middle;
  border-radius: var(--r-pill);
  background-color: var(--c-line-strong);
}

/* ==========================================================================
   3. LEISTUNGEN
   ========================================================================== */
.service-card .card__title { font-size: var(--fs-lg); }

/* Detailblock: abwechselnd Text links / Bild links.
   Bild und Text werden gemeinsam umgebrochen, nicht einzeln. */
.service-block {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-block);
}

.service-block + .service-block { border-top: var(--bw-hair) solid var(--c-line); }

/* Erster und letzter Block liegen bereits im Sektionspolster — sonst
   entsteht dort doppelte Luft. */
.service-block:first-child { padding-top: 0; }
.service-block:last-child { padding-bottom: 0; }

@media (min-width: 60rem) {
  .service-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-9);
  }

  .service-block:nth-child(even) .service-block__media { order: -1; }
}

.service-block__body > * + * { margin-top: var(--sp-5); }

/* Der Eyebrow bleibt auch hier eng an seiner Ueberschrift — sonst haetten
   die Leistungsbloecke einen anderen Rhythmus als der Rest der Seite. */
.service-block__body > .eyebrow + * { margin-top: var(--sp-4); }

.service-block__title { font-size: var(--fs-2xl); }

/* ==========================================================================
   4. UEBER UNS / UEBER MICH
   ========================================================================== */
.value-item {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--bw-line) solid var(--c-accent);
}

.value-item__title { font-size: var(--fs-lg); }
.value-item__text { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ==========================================================================
   5. KONTAKT
   ========================================================================== */
.contact-grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .contact-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-9);
  }
}

.contact-panel {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-surface-alt);
}

.contact-list {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
}

.contact-list__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.contact-list__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  border: var(--bw-hair) solid var(--c-line);
  color: var(--c-accent-ink);
}

.contact-list dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.contact-list dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-md);
}

.contact-list dd a { color: var(--c-text); text-decoration: none; }
.contact-list dd a:hover { color: var(--c-accent-ink); }

.contact-list dd small {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* Stoerungs-Hinweis: der einzige rote Faden neben dem Haupt-CTA */
.urgent {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: var(--bw-line) solid var(--c-brand-ink);
  border-radius: var(--r-card);
  background-color: var(--c-surface);
}

.urgent__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.urgent__text { font-size: var(--fs-sm); color: var(--c-text-muted); }

.map-embed {
  aspect-ratio: var(--ar-wide);
  border-radius: var(--r-card);
}

/* ==========================================================================
   6. RECHTSTEXTE (Impressum, Datenschutz)
   ========================================================================== */
.prose {
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--c-text-muted);
}

.prose > * + * { margin-top: var(--sp-4); }

.prose h2 {
  margin-top: var(--sp-8);
  font-size: var(--fs-xl);
  color: var(--c-text);
  scroll-margin-top: calc(var(--header-h) + var(--sp-6));
}

.prose h3 {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  color: var(--c-text);
}

.prose ul,
.prose ol {
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}

.prose li { padding-left: var(--sp-1); }

.prose li::marker { color: var(--c-accent-ink); }

.prose dl { display: grid; gap: var(--sp-3); }
.prose dt { font-weight: var(--fw-semi); color: var(--c-text); }
.prose dd { margin: 0; }

.prose strong { color: var(--c-text); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2xs);
}

.prose caption {
  text-align: left;
  padding-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.prose th,
.prose td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--bw-hair) solid var(--c-line);
}

.prose th {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.table-scroll {
  overflow-x: auto;
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
}

/* Inhaltsverzeichnis der Rechtsseiten */
.toc {
  padding: var(--sp-5);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-surface-alt);
}

.toc__head {
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
}

.toc ol {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-left: var(--sp-5);
  font-size: var(--fs-xs);
}

.legal-updated {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: var(--c-n-100);
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   7. FAQ-Breite
   ========================================================================== */
.faq { max-width: 52rem; }