/* ==========================================================================
   Objektservice Stein — Design-System

   Gedankliche Grundlage: Das Produkt ist nicht "Glanz", sondern
   Verlaesslichkeit ueber ein ganzes Jahr — Turnus, Intervalle, Raeum- und
   Streupflicht von November bis Maerz.

   Die Farben kommen aus dem Logo und nirgendwo sonst her: das Azur der
   Wortmarke, das tiefere Blau von Dach und Tuer, das helle Glanzlicht der
   Fenster, dazu das Schwarz von "STEIN" und die kuehlen Grauwerte der
   Hauswand. Es gibt keine sechste Farbe.
   ========================================================================== */

:root {
  /* Logo — die drei Blautoene der Marke, unveraendert uebernommen */
  --azur:       #00A3DE;   /* Wortmarke "OBJEKTSERVICE", Abzieher */
  --azur-tief:  #0072BC;   /* Dach und Haustuer */
  --azur-hell:  #3ED3F6;   /* Glanzlicht in den Fenstern */

  /* Flaechen — die Grauwerte der Hauswand, kuehl statt beige */
  --beton:      #F2F4F6;   /* Grundflaeche */
  --estrich:    #E5E9ED;   /* abgesetzte Abschnitte */
  --blatt:      #FBFCFD;   /* Karten, Formularflaechen */
  --ink:        #0C1E2B;   /* Schrift und dunkle Baender (15.4:1 auf Beton) */
  --ink-2:      #12354B;   /* abgesetzte dunkle Baender, deutlich blauer */

  /* Schrift */
  --stahl:      #4E6272;   /* Sekundaertext, 5.7:1 auf Beton */
  --blau:       #00629E;   /* Logo-Blau auf Textkontrast gebracht (5.9:1) */
  --blau-hell:  #6FD4F2;   /* nur auf dunklem Grund */

  /* Akzent — dieselbe Rolle wie zuvor das Amber, jetzt in Markenfarbe:
     nur als Flaeche und Kante, nie als Text auf Hell. */
  --signal:     var(--azur);
  --signal-hell:#35BFEE;

  /* Linien */
  --linie:      #CFD6DC;
  --linie-fein: #DFE4E9;
  --linie-dunkel: rgba(255,255,255,.15);

  /* Struktur */
  --wrap:       1280px;
  --header-h:   92px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  /* Typografie */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;

  --ease: cubic-bezier(.2,.6,.35,1);
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--beton);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.hero :focus-visible, .pagehead :focus-visible, .cta-band :focus-visible,
.site-footer :focus-visible, .trustbar :focus-visible { outline-color: var(--signal); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 4.3vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; }
h2 { font-size: clamp(1.75rem, 3.3vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -.015em; line-height: 1.25; }
p  { text-wrap: pretty; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.25rem;
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

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

/* -------------------------------------------------------------- Layout -- */
/* Es gibt nur ein Seitenraster. Die frueher hier stehende schmale Variante
   (.wrap--narrow) hat aus jeder Textseite eine Spalte links und eine leere
   Haelfte rechts gemacht — was der Fliesstext an Platz nicht braucht,
   bekommt jetzt einen eigenen Baustein: siehe .lesen und .split. */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

.section { padding-block: clamp(3.25rem, 7vw, 6rem); }
.section--alt { background: var(--estrich); }
.section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* Genau zwei Spalten: vier Posten ergeben so ein volles Rechteck statt
   einer angebrochenen zweiten Reihe. */
.grid--paar { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid--paar { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- Textbausteine -- */
.lead {
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.62; color: var(--stahl); max-width: 58ch;
}
/* Abschnittsbezeichner: benennt den Abschnitt, ohne der H2/H3-Hierarchie in
   die Quere zu kommen (im Markup ein <p>). Bewusst ohne Versalien — die
   Bezeichnung soll den Abschnitt einordnen, nicht ihn ueberschreien. */
.eyebrow {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  letter-spacing: .01em; color: var(--stahl);
}
.eyebrow::before {
  content: ""; width: 1.4rem; height: 2px; background: var(--signal); flex: none;
}
.cta-band .eyebrow { color: rgba(255,255,255,.66); }

/* ------------------------------------------------------------- Zahlen -- */
/* Drei Kennzahlen unter den Gruenden. Jede zaehlt sich aus dem Datenbestand
   selbst (siehe _zahlen() in src/builders.py) — es kann hier keine Zahl
   stehen, die die Seite nicht einloest. */
.zahlen {
  list-style: none; padding: 0; margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--linie); padding-top: clamp(1.75rem, 3vw, 2.25rem);
}
.zahlen b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.05; color: var(--ink);
  letter-spacing: -.02em;
}
.zahlen span { display: block; margin-top: .35rem; font-size: .93rem; color: var(--stahl); }

.section-head { max-width: 44rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.section-head .lead { margin-top: 1rem; max-width: 40rem; }
/* Abschnittskoepfe stehen links — mittig gesetzte Koepfe waren die Vorlage,
   nicht die Entscheidung. */
.section-head--center { margin-inline: 0; text-align: left; }

.prose > * + * { margin-top: 1.15em; }
.prose p, .prose li { max-width: 66ch; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.prose h3 { margin-top: 1.7em; font-size: 1.18rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1rem; }
.prose li + li { margin-top: .45rem; }
.prose strong { font-weight: 600; }


/* -------------------------------------------------------------- Buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.6rem; border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .97rem; line-height: 1.15;
  background: var(--azur-tief); color: #fff; text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
/* Heller, nicht dunkler: der Verlauf im Logo geht vom tiefen Blau ins Azur. */
.btn:hover { background: var(--azur); color: #fff; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }

.btn--ghost { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.btn--ghost:hover { background: var(--blau); color: #fff; }

.btn--on-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42); }
.btn--on-dark:hover { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }

/* --------------------------------------------------------------- Header -- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--beton);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--linie); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { width: 152px; height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; padding: 0; margin: 0; }
/* Nur die Navigationsliste — die CTA-Gruppe im selben <nav> bringt ihre
   eigenen Schaltflaechen-Stile mit. */
.nav ul a {
  display: block; padding: .55rem .42rem; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; font-size: .935rem; color: var(--ink);
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .18s var(--ease);
}
.nav ul a:hover, .nav ul a:focus-visible { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
.nav ul a[aria-current="page"], .nav ul .is-active > a { font-weight: 700; color: var(--blau); box-shadow: inset 0 -2px 0 var(--azur-tief); }

.has-sub { position: relative; }
.has-sub > a::after {
  content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .42em;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .5;
}
.subnav {
  position: absolute; top: 100%; left: 0; min-width: 285px;
  background: var(--blatt); border: 1px solid var(--linie); border-radius: 2px;
  box-shadow: 0 12px 32px rgba(12,30,43,.14);
  padding: .35rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a { padding: .55rem .75rem; font-size: .92rem; white-space: normal; }
.subnav a:hover { box-shadow: inset 2px 0 0 var(--signal); }

/* Eine einzige CTA-Gruppe im Dokument (siehe layout() in build.py): auf dem
   Desktop eine Zeile neben der Navigation, im Mobilmenue ein Block darunter. */
.header-cta { display: flex; align-items: center; gap: .5rem; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .95rem;
  padding: .5rem .2rem;
}
.header-phone:hover { color: var(--blau); }
.header-phone svg { width: 16px; height: 16px; color: var(--stahl); }

.nav-toggle {
  display: none; margin-left: auto; width: 46px; height: 46px;
  border: 1.5px solid var(--ink); background: transparent; border-radius: 2px;
  cursor: pointer; padding: 0; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 1199px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    flex-direction: column; align-items: stretch; gap: 0;
    /* +3px fuer die Markenkante am oberen Rand der Kopfzeile. */
    position: fixed; inset: calc(var(--header-h) + 3px) 0 0; background: var(--beton); margin: 0;
    padding: 1.25rem var(--gutter) 3rem; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s var(--ease);
    border-top: 1px solid var(--linie);
  }
  .nav.is-open { transform: translateX(0); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--linie-fein); }
  .nav > ul > li > a { font-size: 1.1rem; font-weight: 700; padding: .85rem .25rem; }
  .nav > ul a { box-shadow: none !important; }
  .has-sub > a::after { float: right; margin-top: .5em; }
  .subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--signal);
    border-radius: 0; background: none;
    margin: 0 0 .75rem .25rem; padding: 0 0 0 .75rem; display: none;
  }
  .has-sub.is-open .subnav { display: block; }
  .header-cta { display: grid; gap: .7rem; margin-top: 1.75rem; }
  /* Die Telefonnummer bekommt hier Schaltflaechen-Format — dieselbe Marke,
     dieselbe Reihenfolge, nur groesser als in der Kopfzeile. */
  .header-cta .header-phone {
    justify-content: center; padding: 1.05rem 1.4rem; font-size: 1rem;
    box-shadow: inset 0 0 0 1.5px var(--ink);
  }
  .header-cta .header-phone svg { color: var(--ink); }
}
@media (max-width: 1420px) and (min-width: 1200px) {
  .header-phone { display: none; }
  .nav > ul > li > a { padding: .55rem .36rem; font-size: .9rem; }
  .header-cta .btn { padding: .85rem 1.15rem; font-size: .92rem; }
}
@media (max-width: 1199px) {
  :root { --header-h: 76px; }
  .brand img { width: 146px; }
}

/* ----------------------------------------------------------------- Hero -- */
/* Kein Foto unter einem Verlauf: die Flaeche wird geteilt, das Bild behaelt
   seine eigene Helligkeit und bekommt eine harte Kante zum Textfeld. */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0 0 0 auto; width: 40%; }
.hero-media .ai-img, .hero-media picture { display: block; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(12,30,43,.55) 14%, rgba(12,30,43,0) 42%);
}

.hero-inner {
  position: relative; z-index: 2; max-width: none;
  padding-block: clamp(3.25rem, 6.5vw, 5.5rem) clamp(3rem, 5.5vw, 4.5rem);
}
/* 52vw haelt die Textspalte auch auf schmalen Desktops links vom Bild (40vw). */
.hero-inner > * { max-width: min(46rem, 52vw); }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: inherit; }
.hero .lead { color: rgba(255,255,255,.78); margin-top: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }


@media (max-width: 900px) {
  .hero-media { position: relative; inset: auto; width: 100%; height: 46vw; max-height: 290px; }
  .hero-media::after { background: linear-gradient(180deg, rgba(12,30,43,0) 55%, var(--ink) 100%); }
  .hero-inner { padding-top: clamp(2rem, 5vw, 3rem); }
  .hero-inner > * { max-width: none; }
}

/* ------------------------------------------------------------ Jahresband -- */
/* Das eine laute Element der Seite: welche Leistung wann laeuft. Es ist das
   Verkaufsargument (ganzjaehrige Betreuung) als Informationsgrafik. */
.jahrband { background: var(--ink-2); color: #fff; border-top: 1px solid var(--linie-dunkel); }
.jahr { padding-block: clamp(1.6rem, 3.2vw, 2.5rem); }
.jahr-titel {
  font-family: var(--font-display); font-size: .88rem; font-weight: 600;
  color: rgba(255,255,255,.62); margin-bottom: 1.1rem;
}
.jahr-zeile, .jahr-kopf {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(9rem, 11rem);
  align-items: center; gap: 1.75rem;
}
.jahr-zeile {
  padding-block: .6rem; border-top: 1px solid rgba(255,255,255,.09);
  text-decoration: none; color: inherit;
}
.jahr-zeile:first-of-type { border-top: 0; }
.jahr-name {
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: #fff;
}
.jahr-zeile:hover .jahr-name { color: var(--blau-hell); }
.jahr-note { font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.35; }

.jahr-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.jahr-zelle { height: 11px; background: rgba(255,255,255,.13); }
.jahr-zelle.is-on { background: var(--signal); }

.jahr-kopf { padding-bottom: .55rem; }
.jahr-monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.jahr-monat {
  font-family: var(--font-display); font-size: .68rem; font-weight: 500;
  color: rgba(255,255,255,.45); text-align: center; letter-spacing: .01em;
}
/* Im Dokument steht der volle Monatsname genau einmal. Sichtbar ist die
   Kurzform, die das Stylesheet aus data-kurz erzeugt — bis 860px nur noch
   der Anfangsbuchstabe. Zwei Beschriftungssaetze im Markup braucht das
   nicht. */
.jahr-monat .mn { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.jahr-monat::after { content: attr(data-kurz); }

/* Ein einziger orchestrierter Moment: die belegten Felder laufen einmal ein. */
.jahr-zelle.is-on {
  transform-origin: left center;
  animation: zelle .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes zelle { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .jahr-zelle.is-on { animation: none; } }

@media (max-width: 860px) {
  .jahr-zeile, .jahr-kopf {
    grid-template-columns: 1fr auto; gap: .35rem .75rem;
  }
  .jahr-band, .jahr-monate { grid-column: 1 / -1; }
  .jahr-note { text-align: right; font-size: .82rem; }
  .jahr-kopf .jahr-name, .jahr-kopf .jahr-note { display: none; }
  .jahr-zeile { padding-block: .7rem; }
  .jahr-monat::after { content: attr(data-initial); }
}

/* -------------------------------------------------------- Seitenkopf -- */
.pagehead { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.pagehead-media { position: absolute; inset: 0 0 0 auto; width: 38%; }
.pagehead-media .ai-img, .pagehead-media picture { display: block; height: 100%; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(12,30,43,.55) 16%, rgba(12,30,43,0) 46%);
}
.pagehead-inner {
  position: relative; z-index: 2; max-width: none;
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}
.pagehead-inner > * { max-width: min(44rem, 52vw); }
.pagehead h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.25rem); }
.pagehead .lead { color: rgba(255,255,255,.76); margin-top: 1.15rem; }
.pagehead .hero-actions { margin-top: 1.9rem; }

.pagehead-pattern { background: var(--ink-2); display: grid; place-items: center; }
.pagehead-glyph {
  position: absolute; inset: 0 3% 0 auto; width: clamp(150px, 20vw, 300px);
  display: grid; place-items: center; color: rgba(62,211,246,.12);
}
.pagehead-glyph svg { height: 72%; width: auto; max-width: 100%; stroke-width: .7; }

/* Stadtseiten tragen statt des Symbols ihren Ortsnamen als konturierte
   Wortmarke. Sie laeuft bewusst ueber die rechte Kante hinaus: der Kopf soll
   nach dieser Stadt aussehen und nicht wie ein Schild mit ihrem Namen. */
.pagehead-wort {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.25rem, 7.5vw, 6.5rem); line-height: .9; letter-spacing: -.045em;
  white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1.5px rgba(62,211,246,.32);
}
@supports not (-webkit-text-stroke: 1px red) {
  .pagehead-wort { color: rgba(62,211,246,.16); }
}

@media (max-width: 900px) {
  .pagehead-media { position: relative; inset: auto; width: 100%; height: 38vw; max-height: 230px; }
  .pagehead-media::after { background: linear-gradient(180deg, rgba(12,30,43,0) 55%, var(--ink) 100%); }
  .pagehead-media.pagehead-pattern { height: 120px; }
  /* Auf voller Breite ist die Wortmarke keine Randgrafik mehr — sie beginnt
     am Seitenraster wie die Ueberschrift darunter. */
  .pagehead-wort { left: var(--gutter); }
  .pagehead-glyph { right: -4%; width: clamp(140px, 34vw, 220px); }
  .pagehead-inner > * { max-width: none; }
}

/* ---------------------------------------------------------- Brotkrumen -- */
.breadcrumbs { position: relative; z-index: 2; padding-top: 1.25rem; font-family: var(--font-display); font-size: .82rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.55); }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: rgba(255,255,255,.25); }
.breadcrumbs a { color: rgba(255,255,255,.72); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------ Vertrauensband -- */
.trustbar { background: var(--ink-2); color: rgba(255,255,255,.85); }
.trustbar ul {
  display: grid; gap: .7rem 2rem; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  list-style: none; padding: 1.1rem 0; margin: 0;
}
.trustbar li {
  display: flex; align-items: center; gap: .6rem; line-height: 1.3;
  font-family: var(--font-display); font-size: .91rem; font-weight: 500;
}
.trustbar svg { width: 19px; height: 19px; color: var(--signal); flex: none; }

/* ------------------------------------------------- Leistungsverzeichnis -- */
/* Zeilen statt Karten: das Format, in dem eine Hausverwaltung Leistungen
   ohnehin liest. Rechts stehen die einzelnen Positionen. */
.verzeichnis { border-bottom: 1px solid var(--linie); }
.vz-zeile {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linie);
}
.vz-kopf { display: flex; align-items: baseline; gap: .7rem; }
.vz-kopf svg { width: 22px; height: 22px; color: var(--stahl); flex: none; transform: translateY(3px); }
.vz-titel { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -.025em; line-height: 1.12; }
.vz-titel a { color: var(--ink); text-decoration: none; }
.vz-titel a:hover { color: var(--blau); text-decoration: underline; text-decoration-thickness: 2px; }
.vz-text { margin-top: .8rem; color: var(--stahl); max-width: 42ch; }
.vz-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; align-content: start; }
@media (min-width: 620px) { .vz-liste { grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; } }
.vz-liste a {
  font-family: var(--font-display); font-size: .94rem; font-weight: 500;
  color: var(--ink); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--linie);
}
.vz-liste a:hover { color: var(--blau); box-shadow: inset 0 -1px 0 var(--blau); }
@media (max-width: 780px) { .vz-zeile { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Karten -- */
/* Flach und offen: getrennt durch Linien, nicht durch Kaesten und Schatten. */
.card {
  position: relative; background: transparent; border: 0;
  border-top: 1px solid var(--linie); border-radius: 0;
  padding: 1.4rem 0 .5rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--stahl); font-size: .98rem; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { color: inherit; }
.card-link:hover h3, .card-link:hover .card-more { color: var(--blau); }

.card-more {
  display: inline-block; margin-top: .9rem;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink);
  box-shadow: inset 0 -1.5px 0 var(--signal);
}
/* Der angehaengte Pfeil sagt nichts, was der Text nicht schon sagt. */
.card-more svg { display: none; }

.card-icon {
  width: auto; height: auto; background: none; border-radius: 0;
  color: var(--stahl); margin-bottom: .9rem;
}
.card-icon svg { width: 24px; height: 24px; }

.svc-card { padding: 0; border-top: 0; }
.svc-card .svc-media { aspect-ratio: 16/9; overflow: hidden; background: var(--estrich); }
.svc-card .svc-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card .svc-body { padding: 1.25rem 0 0; }
/* Muss die Motivflaeche der Karte ueberschreiben, nicht nur ergaenzen —
   sonst gewinnt der helle Grund von .svc-card .svc-media. */
.svc-card .svc-media--pattern { display: grid; place-items: center;
  background: var(--ink-2); }
.svc-media--pattern svg { width: 56px; height: 56px; color: rgba(62,211,246,.5); }

/* ------------------------------------------------------------- Merkmale -- */
.punkte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
}
.punkt { padding: 1.35rem 0 1.5rem; border-top: 1px solid var(--linie); }
.punkt-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.punkt-kopf svg { width: 20px; height: 20px; color: var(--stahl); flex: none; }
.punkt h3 { font-size: 1.06rem; }
.punkt p { color: var(--stahl); font-size: .96rem; line-height: 1.62; }

/* ------------------------------------------------------------ Checkliste -- */
.checklist { list-style: none; padding: 0; display: grid; gap: .95rem; font-size: .99rem; color: var(--stahl); }
.checklist.grid--2 { gap: 1.05rem 2.5rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist li > div { min-width: 0; }
.checklist li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: .3rem; border-radius: 0;
  background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1E2B' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.checklist strong {
  display: block; margin-bottom: .1rem; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .97rem;
}
.checklist strong a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 var(--linie); }
.checklist strong a:hover { color: var(--blau); box-shadow: inset 0 -1px 0 var(--blau); }
.checklist--dark { color: rgba(255,255,255,.72); }
.checklist--dark strong { color: #fff; }

/* ----------------------------------------------------------- Split-Bloc -- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--wide-text { grid-template-columns: 1.2fr .8fr; align-items: start; }
  .split--reverse .split-media { order: 2; }
  /* Bild bekommt mehr Fläche und läuft über die volle Höhe des Textblocks. */
  .split--bild-gross { grid-template-columns: 1fr 1.1fr; align-items: stretch; }
  .split--bild-gross .split-media,
  .split--bild-gross .ai-img,
  .split--bild-gross picture { display: block; height: 100%; }
  .split--bild-gross .split-media img { height: 100%; min-height: 26rem; object-fit: cover; }
  .split > aside { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}
.split-media { position: relative; }
.split-media img { border-radius: 2px; width: 100%; }

/* --------------------------------------------------------------- Ablauf -- */
.steps {
  counter-reset: s; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 2px solid var(--ink);
}
.step { position: relative; padding: 1.4rem clamp(1rem, 2.5vw, 2rem) 1.5rem 0; background: none; border: 0; border-radius: 0; }
.step + .step { border-left: 1px solid var(--linie); padding-left: clamp(1rem, 2.5vw, 2rem); }
.step::before {
  counter-increment: s; content: counter(s) ".";
  font-family: var(--font-display); font-weight: 800; font-size: .82rem;
  color: var(--stahl); display: block; margin-bottom: .7rem;
}
.step h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.step p { color: var(--stahl); font-size: .95rem; line-height: 1.6; }

/* ------------------------------------------------------ Staedteverzeichnis */
/* Ein Verzeichnis, keine Kachelwand: eine Zeile je Stadt, durch Haarlinien
   getrennt wie die FAQ. Nutzt die volle Breite und bleibt bei jeder Anzahl
   von Staedten ruhig -- keine angebrochene letzte Reihe. */
.orte { border-top: 1px solid var(--linie); }
.ort-zeile {
  display: block; padding: 1.25rem 0 1.4rem; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
/* Wie bei den FAQ: die Zeile mit dem Namen laeuft ueber die volle Breite,
   der Pfeil sitzt an ihrem Ende. Der Fliesstext darunter bleibt lesbar kurz. */
.ort-name {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .45rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: -.015em; color: var(--ink); transition: color .2s var(--ease);
}
.ort-name::before {
  content: ""; flex: 1; order: 1; height: 1px; background: var(--linie);
}
.ort-name::after {
  content: ""; order: 2; flex: none; width: 10px; height: 10px; margin-right: .8rem;
  border-right: 2px solid var(--stahl); border-bottom: 2px solid var(--stahl);
  transform: rotate(-45deg);
  transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.ort-text { display: block; color: var(--stahl); font-size: .98rem; line-height: 1.65; max-width: 66ch; }
.ort-zeile:hover .ort-name { color: var(--blau); }
.ort-zeile:hover .ort-name::after {
  border-color: var(--blau); transform: translateX(5px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ort-zeile:hover .ort-name::after { transform: rotate(-45deg); }
}

/* ------------------------------------------------------------- Linkleiste */
/* Am Fuss einer Stadtseite standen die Nachbarstaedte frueher als Absatz aus
   Verweisen; am Fuss einer Detailseite stand ein zweites Kartenraster. Beides
   ist dasselbe Bedürfnis: eine Handvoll Wege, auf einen Blick lesbar. */
.linkleiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linie);
}
.linkleiste-feld {
  display: block; padding: 1.1rem 0 1.3rem;
  border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit;
}
.linkleiste-titel {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.015em; color: var(--ink);
}
.linkleiste-titel::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--stahl); border-bottom: 2px solid var(--stahl);
  transform: rotate(-45deg);
  transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.linkleiste-note {
  display: block; margin-top: .3rem; font-size: .88rem; color: var(--stahl);
  line-height: 1.4;
}
.linkleiste-feld:hover .linkleiste-titel { color: var(--blau); }
.linkleiste-feld:hover .linkleiste-titel::after {
  border-color: var(--blau); transform: translateX(4px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .linkleiste-feld:hover .linkleiste-titel::after { transform: rotate(-45deg); }
}

/* ----------------------------------------------------------- Ortsspalte -- */
/* Die Stadtseite bekommt neben dem Fliesstext eine Spalte mit dem, was nur
   fuer diesen Ort gilt: Besonderheit, harte Fakten, Stadtteile. Frueher
   standen diese drei Dinge als eigene Abschnitte untereinander — jetzt
   fuellen sie die Haelfte, die sonst leer blieb. */
.ort-panel { border-top: 3px solid var(--signal); padding-top: 1.4rem; }
.ort-panel .eyebrow {
  margin-bottom: .9rem; color: var(--ink); font-size: .88rem; font-weight: 700;
}
.ort-panel .eyebrow::before { display: none; }
.ort-panel .ort-merkmal { margin-top: 0; }
.ort-panel-titel {
  margin-top: 1.6rem; font-family: var(--font-display); font-size: .93rem;
  font-weight: 600; color: var(--stahl); letter-spacing: 0;
}
.ort-teile {
  list-style: none; padding: 0; margin-top: .8rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.ort-teile li {
  padding: .35rem .7rem; background: var(--blatt); border: 1px solid var(--linie);
  border-radius: 2px; font-family: var(--font-display); font-size: .88rem;
  font-weight: 500; color: var(--ink);
}
.ort-panel .form-note { margin-top: 1.1rem; }

/* ------------------------------------------------------ Leistungsraster -- */
/* Vier Felder in einem durchgehenden Liniennetz — anders als die Karten
   (nur Oberkante) und anders als der Ablauf (nur Trennlinien dazwischen). */
.raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--linie); border-left: 1px solid var(--linie);
}
.raster-feld {
  display: block; padding: clamp(1.25rem, 2.5vw, 1.9rem);
  border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
  transition: background .18s var(--ease);
}
.raster-feld:hover { background: var(--blatt); color: inherit; }
.section--alt .raster-feld:hover { background: var(--beton); }
.raster-feld svg { width: 24px; height: 24px; color: var(--stahl); margin-bottom: .9rem; }
.raster-feld h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.raster-feld:hover h3 { color: var(--blau); }
.raster-feld p { color: var(--stahl); font-size: .95rem; line-height: 1.6; }

/* --------------------------------------------------------- Gebietsringe -- */
/* Drei Ringe um Gladbeck statt einer Stadtliste im Fliesstext. Bewusst keine
   Landkarte: eine Karte behauptet Grenzen, die es nicht gibt. Die Ringe
   zeigen nur, was wir wirklich sagen — die Entfernung entscheidet. */
.gebiet { border-top: 3px solid var(--signal); padding-top: 1.4rem; }
.gebiet-titel {
  font-family: var(--font-display); font-size: .88rem; font-weight: 700;
  color: var(--ink); margin-bottom: .6rem;
}
.radar { display: block; width: 100%; max-width: 300px; margin: 0 auto .6rem; }
.radar-ring { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.radar-ring--1 { stroke: var(--azur-tief); stroke-width: 1.6; }
.radar-ring--2 { stroke: var(--azur); }
.radar-ring--3 { stroke: var(--linie); stroke-dasharray: 3 4; }
.radar-punkt { fill: var(--ink); }
/* Die Ringnummern sitzen auf der Linie — der Grundton als Kontur darunter
   schneidet sie frei, damit die Ziffer nicht durchgestrichen wirkt. */
.radar-nr {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  fill: var(--stahl); text-anchor: middle;
  stroke: var(--beton); stroke-width: 4px; paint-order: stroke fill;
}
.section--alt .radar-nr { stroke: var(--estrich); }
.radar-ort {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  fill: var(--ink); text-anchor: middle;
}

.gebiet-ringe { list-style: none; padding: 0; margin: 0; }
.ring { padding: 1rem 0; border-top: 1px solid var(--linie); }
.ring-marke {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  color: var(--ink); letter-spacing: -.015em;
}
.ring-nr {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid var(--azur-tief); border-radius: 50%;
  font-size: .76rem; font-weight: 700; color: var(--blau);
}
.ring-note { margin-top: .3rem; font-size: .92rem; color: var(--stahl); line-height: 1.5; }
.ring-orte {
  margin-top: .45rem; font-family: var(--font-display); font-size: .88rem;
  color: var(--ink); line-height: 1.55;
}
/* Die Ringspalte ist zu hoch zum Mitlaufen — sie bleibt stehen. */
.split > aside.gebiet { position: static; }

/* ----------------------------------------------------------- Lesespalte -- */
/* Reine Textseiten hatten eine schmale Spalte links und eine leere Haelfte
   rechts. Statt den Text zu strecken, bekommt die freie Spalte die
   Abschnitte der Seite als Sprungmarken. */
.lesen { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
/* Die Textspalte bleibt so breit wie der Text selbst — sonst laufen die
   Trennlinien vor den Zwischenueberschriften ins Leere. */
.lesen > .prose { max-width: 44rem; }
@media (min-width: 900px) {
  .lesen { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); }
  /* Der Datenschutztext hat mehr Abschnitte als der Schirm hoch ist — das
     Verzeichnis scrollt dann in sich selbst statt ueber den Rand zu laufen. */
  .lesen-nav {
    position: sticky; top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto;
  }
}
.lesen-titel {
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  color: var(--stahl); padding-bottom: .6rem; border-bottom: 2px solid var(--ink);
}
.lesen-nav ol { list-style: none; padding: 0; margin: 0; counter-reset: k; }
.lesen-nav li { border-bottom: 1px solid var(--linie-fein); }
.lesen-nav a {
  display: flex; gap: .6rem; padding: .7rem 0; text-decoration: none;
  font-family: var(--font-display); font-size: .93rem; font-weight: 500;
  line-height: 1.35; color: var(--ink);
}
.lesen-nav a::before {
  counter-increment: k; content: counter(k, decimal-leading-zero);
  flex: none; color: var(--stahl); font-size: .8rem; font-weight: 700;
  padding-top: .1em;
}
.lesen-nav a:hover { color: var(--blau); }
/* Rechtstexte numerieren ihre Abschnitte selbst — ein zweiter Zaehler davor
   waere nur eine Zahl, die neben einer anderen Zahl steht. */
.lesen-nav--roh a::before { content: none; }

/* Gegliederter Fliesstext: eine Haarlinie vor jeder Zwischenueberschrift.
   Ein langer Text zerfaellt damit sichtbar in Abschnitte, ohne dass am Text
   selbst etwas geaendert wird. */
.prose--gegliedert > h2 { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.prose--gegliedert > h2:not(:first-child) {
  border-top: 1px solid var(--linie); padding-top: 1.5rem; margin-top: 2.4em;
}

/* ------------------------------------------------------------------ FAQ -- */
/* Ueberschrift links, Fragen rechts: das Band nutzt die volle Breite,
   statt eine schmale Spalte mit leerer rechter Haelfte stehen zu lassen. */
.band-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.band-split > .section-head { margin-bottom: 0; }
@media (min-width: 900px) {
  .band-split { grid-template-columns: minmax(15rem, 23rem) minmax(0, 1fr); }
  .band-split > .section-head { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
/* In der schmalen Kopfspalte darf der Vorspann nicht in Fuenf-Wort-Zeilen
   zerfallen — dort zaehlt Lesbarkeit mehr als Groesse. */
@media (min-width: 900px) {
  .band-split > .section-head .lead { font-size: 1.06rem; line-height: 1.6; }
}
.faq { display: block; border-top: 1px solid var(--linie); }
.faq details { border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--ink);
  letter-spacing: -.01em;
}
.faq summary:hover { color: var(--blau); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .6rem; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--stahl); border-bottom: 2px solid var(--stahl);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq .faq-body { padding: 0 0 1.4rem; color: var(--stahl); max-width: 66ch; }
.faq .faq-body > * + * { margin-top: .8rem; }

/* ---------------------------------------------------------- Handlungsband */
.cta-band { background: var(--ink); color: rgba(255,255,255,.78); border-top: 3px solid var(--signal); }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 52ch; }
.cta-inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: 1.35fr 1fr; } }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------- Kontakt -- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-card { background: var(--blatt); border: 1px solid var(--linie); border-radius: 3px; padding: clamp(1.4rem, 3vw, 2.1rem); }
.section--alt .contact-card { background: var(--beton); }
.contact-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: flex; gap: .9rem; align-items: flex-start; }
.contact-list .ci { flex: none; width: 22px; height: 22px; background: none; border-radius: 0; color: var(--stahl); margin-top: .55rem; display: grid; place-items: center; }
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list b {
  display: block; font-family: var(--font-display); font-size: .8rem; letter-spacing: .01em;
  text-transform: none; color: var(--stahl); font-weight: 600; margin-bottom: .1rem;
}
.contact-list a { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; color: var(--ink); text-decoration: none; box-shadow: inset 0 -1.5px 0 var(--signal); }
.contact-list a:hover { color: var(--blau); }
.contact-list span.val { font-size: 1rem; }

.form-grid { display: grid; gap: 1.05rem; }
.form-note { font-size: .88rem; color: var(--stahl); }

/* -------------------------------------------------------- Einsatzgebiet -- */
/* Frueher standen die Staedte als Pillen nebeneinander: sechs Kaestchen mit
   je "Gebäudereinigung <Ort>", jedes so breit wie sein Ortsname, das letzte
   allein in der zweiten Reihe. Jetzt tragen gleich breite Spalten den
   Ortsnamen gross, die wiederholte Leistung klein darueber -- dasselbe
   Liniennetz wie bei den Nachbarstaedten am Fuss einer Stadtseite. */
.ortband {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linie);
}
.ortband-feld {
  display: block; padding: 1rem 0 1.15rem;
  border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit;
}
.ortband-vor {
  display: block; font-family: var(--font-display); font-size: .76rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stahl);
}
.ortband-ort {
  display: flex; align-items: center; gap: .5rem; margin-top: .25rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.015em; color: var(--ink); transition: color .2s var(--ease);
}
.ortband-ort::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--stahl); border-bottom: 2px solid var(--stahl);
  transform: rotate(-45deg);
  transition: transform .25s var(--ease), border-color .2s var(--ease);
}
.ortband-feld:hover .ortband-ort { color: var(--blau); }
.ortband-feld:hover .ortband-ort::after {
  border-color: var(--blau); transform: translateX(4px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ortband-feld:hover .ortband-ort::after { transform: rotate(-45deg); }
}

/* -------------------------------------------------- Vertrauenssignale -- */
/* Referenzen und Bewertungen sind gebaut, aber leer, solange es keine echten
   gibt (src/trust.py). Vorschau der leeren Struktur: TRUST_PREVIEW=1. */
.referenzen { display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.referenz-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.referenz-bilder figure { margin: 0; position: relative; }
.referenz-bilder img { width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4/3; }
.referenz-bilder figcaption {
  position: absolute; left: 0; bottom: 0; padding: .18rem .5rem;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
}
.referenz-leer { aspect-ratio: 4/3; background: var(--estrich);
  border: 1px dashed var(--linie); }
.referenz h3 { margin-top: 1rem; font-size: 1.1rem; }
.referenz-leistung { font-family: var(--font-display); font-size: .88rem;
  font-weight: 600; color: var(--stahl); margin-top: .2rem; }
.referenz p { color: var(--stahl); font-size: .96rem; margin-top: .5rem; }

.bewertungen { display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.bewertung { margin: 0; padding: 1.4rem 0 0; border-top: 1px solid var(--linie);
  color: var(--stahl); }
.bewertung-sterne { color: var(--blau); letter-spacing: .12em; font-size: 1.05rem; }
.bewertung p + p { margin-top: .7rem; }
.bewertung footer { margin-top: .9rem; font-family: var(--font-display);
  font-size: .88rem; font-weight: 600; color: var(--ink); }
.bewertung footer span { font-weight: 500; color: var(--stahl); }

/* Nur im Vorschaumodus sichtbar — nie in der Auslieferung. */
.platzhalter {
  margin-top: 1rem; padding: .55rem .8rem; background: repeating-linear-gradient(
    45deg, var(--estrich), var(--estrich) 8px, transparent 8px, transparent 16px);
  border: 1px dashed var(--stahl);
  font-family: var(--font-display); font-size: .85rem; color: var(--stahl);
}

/* ------------------------------------------------ Ortsangaben Stadtseite -- */
/* Was diese Stadt von den anderen unterscheidet — steht bewusst direkt unter
   dem Fliesstext und nicht in einer Kachelreihe. */
.ort-merkmal {
  margin-top: 2rem; padding-left: 1.1rem; border-left: 2px solid var(--signal);
  max-width: 66ch; color: var(--stahl);
}
.ortsfakten {
  list-style: none; padding: 0; margin-top: 1.6rem; display: grid; gap: .75rem;
  max-width: 66ch; font-size: .96rem; color: var(--stahl);
}
.ortsfakten li { display: flex; gap: .7rem; align-items: flex-start; }
.ortsfakten svg { width: 19px; height: 19px; flex: none; margin-top: .15rem; color: var(--stahl); }

/* --------------------------------------------------------------- Footer -- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding-block: clamp(2.75rem, 5vw, 4rem) 0; font-size: .95rem; }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; } }
.site-footer h2, .site-footer h3 {
  font-family: var(--font-display); color: #fff; font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; text-transform: none; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.site-footer a { color: rgba(255,255,255,.7); text-decoration: none; }
.site-footer a:hover { color: #fff; box-shadow: inset 0 -1px 0 var(--signal); }
.footer-brand img { width: 200px; height: auto; margin-bottom: 1.1rem; }
.footer-brand p { max-width: 36ch; }
.footer-contact { display: grid; gap: .5rem; margin-top: 1.15rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; color: #fff; }
.footer-contact svg { width: 16px; height: 16px; color: var(--signal); flex: none; }
.footer-address { display: flex; gap: .5rem; margin-top: .9rem; font-style: normal; line-height: 1.5; }
.footer-address svg { width: 16px; height: 16px; color: var(--signal); flex: none; margin-top: .2rem; }
.footer-bottom {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem); border-top: 1px solid var(--linie-dunkel);
  padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem 1.75rem;
  align-items: center; justify-content: space-between; font-size: .88rem;
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; }

/* ------------------------------------------------- KI-Kennzeichnung Bild -- */
.ai-img { position: relative; display: block; }
.ai-badge {
  position: absolute; right: .5rem; bottom: .5rem; z-index: 3;
  padding: .16rem .45rem; border-radius: 2px;
  background: rgba(12,30,43,.62); border: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-display);
  font-size: .62rem; line-height: 1.35; letter-spacing: .01em;
  color: rgba(255,255,255,.8); white-space: nowrap; pointer-events: none;
}
@media (max-width: 560px) { .ai-badge { font-size: .58rem; padding: .12rem .38rem; } }

/* -------------------------------------------------------- Sticky Mobil-CTA */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  gap: .55rem; padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom));
  background: var(--beton); border-top: 1px solid var(--linie);
}
.mobile-bar .btn { flex: 1; padding: .8rem 1rem; font-size: .93rem; }
@media (max-width: 720px) { .mobile-bar { display: flex; } body { padding-bottom: 70px; } }

/* ----------------------------------------------------------- Bewegung -- */
/* Die abschnittsweise Einblendung ist ersatzlos entfallen — sie hat nichts
   gezeigt, was ohne sie nicht sichtbar waere. Klasse bleibt fuer die Markup-
   Kompatibilitaet bestehen. */
.reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Rechtstext */
.legal { font-size: 1rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2.4rem; }
.legal h3 { font-size: 1.06rem; margin-top: 1.5rem; }
.legal p, .legal ul { color: var(--stahl); }