/* ==========================================================================
   orte.css – Einsatzgebiete und Einbruchstatistik
   Ergänzt style.css und systeme.css um die Bausteine, die nur diese Seiten
   brauchen: Kurzfakten im Kopf, Zahlenkasten, Referenz, Stadtteile,
   Nachbarstädte und die Tabellen der Statistikseite.
   ========================================================================== */

/* --------------------------------------------------------- Icons          */
.ico { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------- Kopf           */
/* Derselbe Kopf wie auf der Startseite – nur mit dem Foto der Stadt. Das
   Motiv liegt rechts; links deckt der Schleier für die Schrift ab. */
.hero--ort h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); }
.hero--ort .hero__photo img { object-position: center 55%; filter: saturate(.8) contrast(1.04); }
.hero--ort .hero__photo::after { background: rgba(15, 37, 68, .38); }
/* Text, Siegel und Leiste stehen untereinander: oben das Raster aus Text
   und Siegel, unten die Glasleiste. Alles läuft im Fluss – keine festen
   Abstände vom Bildrand, die je nach Bildschirm woanders landen. */
.hero--ort { flex-direction: column; align-items: stretch; }
.hero--ort .hero__inner {
  flex: 1;
  align-content: center;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 52px);
}

/* Slogan und Google-Siegel: rechte Spalte, unten bündig mit den Knöpfen,
   rechts bündig mit dem Inhalt. Die Handschrift steht links vom Siegel und
   neigt sich zu ihm hin – eine Absenderzeile, kein loser Aufkleber. */
.hero__marke {
  position: relative; z-index: 4;
  justify-self: end; align-self: end;
  display: flex; align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
}
.hero--ort .hero__marke .hero__hand {
  position: static;
  font-size: clamp(20px, 1.75vw, 28px);
  transform: rotate(-6deg);
  transform-origin: right center;
}
.hero--ort .hero__marke .hero__seal { position: static; }
.hero--ort .hero__marke .hero__seal img { display: block; width: clamp(104px, 8.4vw, 140px); }

@media (max-width: 940px) {
  .hero--ort .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(40px, 12vw, 64px) 28px;
  }
  /* Unter den Knöpfen: Siegel links, Slogan daneben. */
  .hero__marke {
    justify-self: start;
    flex-direction: row-reverse;
    margin-top: 30px;
  }
  .hero--ort .hero__marke .hero__hand {
    font-size: calc(19rem / 16); text-align: left;
    transform: rotate(-4deg); transform-origin: left center;
  }
  .hero--ort .hero__marke .hero__seal img { width: 84px; }
}
.hero__foto-quelle {
  position: absolute; z-index: 4;
  right: var(--gutter, 20px); top: 12px;
  text-align: right;
  margin: 0;
  font-size: calc(11.5rem / 16); line-height: 1.3;
  color: rgba(255, 255, 255, .55);
  max-width: min(60ch, 70%);
}
.hero__foto-quelle a { color: inherit; text-decoration: underline; }
@media (max-width: 940px) { .hero__foto-quelle { display: none; } }
/* Auf dem Handy steht der Nachweis unter dem Kopf statt im Bild. */
.foto-quelle-mobil { display: none; }
@media (max-width: 940px) {
  .foto-quelle-mobil {
    display: block;
    margin: 10px var(--gutter, 20px) 0;
    font-size: calc(11.5rem / 16); color: var(--text-mute);
  }
  .foto-quelle-mobil a { color: inherit; }
}

/* --------------------------------------------------------- Kopf mit Foto  */
/* Lösungsseiten (05.11.2026): Das Foto liegt nicht mehr abgedunkelt hinter
   zwei Absätzen, sondern steht hell daneben – im Sechseckschnitt der
   Service-Sektion (Fabio: „sehr textlastig“). Ein Absatz, ein Knopf, die
   Überschrift zweistufig: Suchbegriff groß, Zusatz kleiner in Hellblau.
   Hinter dem Foto ein versetztes zweites Sechseck als Tiefe. Das Siegel
   ragt über die Unterkante des Fotos, der Slogan steht daneben auf dem
   Navy – auf hellen Fotos (Praxis, Lager) wäre er im Bild kaum lesbar.
   Auf dem Handy steht das Foto über dem Text, ohne Slogan. */
.hero--split {
  min-height: 0;
  background:
    radial-gradient(ellipse 55% 75% at 80% 45%, rgba(79, 168, 238, .2), transparent 70%),
    var(--navy);
}
.hero--split .hero__inner {
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  grid-template-areas: "krumen krumen" "text bild";
  align-items: center;
  padding-block: clamp(28px, 3.4vw, 48px) clamp(36px, 4.4vw, 60px);
}
.hero--split .krumen { grid-area: krumen; margin-bottom: clamp(20px, 2.6vw, 36px); }
.hero--split .hero__inner > div { grid-area: text; }
.hero--split h1 { font-size: clamp(2.2rem, 3.8vw, 3.25rem); }
.hero__zusatz {
  display: block;
  margin-top: .34em;
  font-size: .56em; font-weight: 500;
  line-height: 1.22; letter-spacing: -.01em;
  color: var(--sky);
}
.hero--split .hero__text { max-width: 46ch; }

.hero__bild {
  grid-area: bild;
  position: relative;
  justify-self: end;
  /* breiter würde das Foto auf Laptops (768 px Höhe) unten abgeschnitten */
  width: min(100%, 600px);
  margin: 0;
  /* Platz unter dem Foto für den Slogan und die untere Hälfte des Siegels */
  padding-bottom: clamp(58px, 5vw, 72px);
}
.hero__bild::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, rgba(143, 216, 247, .26), rgba(11, 99, 214, .2));
  clip-path: polygon(13% 0%, 87% 0%, 100% 50%, 87% 100%, 13% 100%, 0% 50%);
  clip-path: url(#hexa);
  transform: translate(4.5%, 6%);
}
.hero__bild > img {
  position: relative;
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: polygon(13% 0%, 87% 0%, 100% 50%, 87% 100%, 13% 100%, 0% 50%);
  clip-path: url(#hexa);
}
.hero--split .hero__marke {
  position: absolute; z-index: 2;
  right: 2%; bottom: 0;
  align-items: flex-end;
}
.hero--split .hero__marke .hero__hand {
  margin-bottom: 4px;
  font-size: clamp(19px, 1.6vw, 25px);
}
.hero--split .hero__marke .hero__seal img { width: clamp(84px, 7.4vw, 116px); }
.hero__bild-quelle {
  margin-top: 8px;
  font-size: calc(11.5rem / 16); color: rgba(255, 255, 255, .55);
}
.hero__bild-quelle a { color: inherit; }

@media (max-width: 940px) {
  .hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "krumen" "bild" "text";
    padding-block: 12px 32px;
  }
  .hero--split .krumen { margin-bottom: 10px; }
  .hero__bild {
    justify-self: center;
    width: min(100%, 560px);
    /* das versetzte Sechseck ragt nach rechts – nicht über den Rand */
    padding: 0 4% 46px 0;
    margin-bottom: 16px;
  }
  .hero__bild::before { right: 4%; }
  .hero--split .hero__marke { right: 0; margin-top: 0; flex-direction: row; }
  .hero--split .hero__marke .hero__hand {
    font-size: calc(17rem / 16); text-align: right;
    transform: rotate(-5deg); transform-origin: right center;
  }
  .hero--split .hero__marke .hero__seal img { width: 76px; }
  .hero--split .eyebrow { font-size: 22px; }
  .hero--split h1 { font-size: clamp(1.8rem, 7.8vw, 2.4rem); overflow-wrap: break-word; hyphens: auto; }
  .hero--split .hero__text { margin-top: 14px; }
  .hero--split .hero__actions { margin-top: 20px; }
}
/* Handy: Foto etwas flacher, nur das Siegel an der Ecke – so bleibt der
   Knopf auf üblichen Handys im ersten Bildschirm. */
@media (max-width: 600px) {
  .hero__bild { padding-bottom: 0; margin-bottom: 20px; }
  .hero__bild::before, .hero__bild > img { aspect-ratio: 16 / 10; }
  .hero--split .hero__marke { bottom: -10px; }
  .hero--split .hero__marke .hero__hand { display: none; }
  .hero--split .hero__marke .hero__seal img { width: 66px; }
}
/* Ab 360 px bleibt der Knopf einzeilig, statt auf zwei Zeilen zu wachsen. */
@media (max-width: 400px) {
  .hero--split .hero__actions .btn { padding-inline: 14px; font-size: calc(16rem / 16); }
}

/* --------------------------------------------------------- Ortsleiste     */
/* Glasleiste an der Unterkante des Kopfs: Das Foto scheint durch, die vier
   Fakten trennen nur Haarlinien. Kein weißer Kasten mehr, der über die
   Bildkante ragt – die Leiste gehört zum Kopf (Durchsicht 22.10.2026). */
.hero__leiste {
  position: relative; z-index: 4;
  width: 100%;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.ortsleiste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0;
  list-style: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px rgba(4, 12, 26, .32);
}
.ortsleiste li {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: clamp(18px, 1.7vw, 24px) clamp(18px, 1.9vw, 28px);
}
.ortsleiste li + li::before {
  content: "";
  position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: rgba(255, 255, 255, .14);
}
.ortsleiste__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(127, 190, 255, .12);
  border: 1px solid rgba(127, 190, 255, .28);
  color: var(--sky);
}
.ortsleiste__icon .ico { width: 20px; height: 20px; }
.ortsleiste strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem); font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.2;
}
.ortsleiste span.ortsleiste__text {
  display: block; margin-top: 4px;
  font-size: calc(13.5rem / 16); line-height: 1.45;
  color: rgba(255, 255, 255, .68);
}

@media (max-width: 1080px) {
  .ortsleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Im 2×2-Raster: senkrechte Linie nur in der rechten Spalte, dazu eine
     waagerechte zwischen den Reihen. */
  .ortsleiste li + li::before { display: none; }
  .ortsleiste li:nth-child(even)::before { display: block; content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255, 255, 255, .14); }
  .ortsleiste li:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: rgba(255, 255, 255, .14); }
}
@media (max-width: 520px) {
  .ortsleiste li { flex-direction: column; gap: 10px; padding: 16px 14px; }
  .ortsleiste__icon { width: 36px; height: 36px; border-radius: 10px; }
  .ortsleiste__icon .ico { width: 18px; height: 18px; }
  .ortsleiste strong { font-size: 1rem; overflow-wrap: break-word; hyphens: auto; }
  .ortsleiste span.ortsleiste__text { font-size: calc(13rem / 16); }
  /* Längere Kacheltexte: deploy.sh (witwen.py) bindet die letzten beiden
     Wörter – trennen dürfen sie trotzdem, sonst ragen sie aus der Kachel. */
  .ortsleiste span.ortsleiste__text { hyphens: auto; overflow-wrap: break-word; }
  /* Lange Kachelnamen nur an den gesetzten Stellen (­) trennen:
     „Außen-überwachung“ statt „Außenüberwa-chung“ (Einfamilienhaus). */
  .ortsleiste--silben strong { hyphens: manual; }
}
@media (max-width: 340px) {
  /* Kleinste Handys: Die Kachel ist nur gut 110 px breit. */
  .ortsleiste strong { font-size: .9rem; }
  .ortsleiste span.ortsleiste__text { overflow-wrap: anywhere; }
}

/* Brotkrumen über der Überschrift */
.krumen {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 18px; padding: 0; list-style: none;
  font-size: calc(14rem / 16); color: var(--on-dark-mute);
}
.krumen li + li::before { content: "›"; margin-right: 6px; }
.krumen a { color: var(--on-dark-dim); text-decoration: none; }
.hero .krumen { position: relative; z-index: 4; }
.krumen a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------- Auf einen Blick */
/* Das Wichtigste in einer Karte: links ein Satz, rechts fünf Fakten mit Icon.
   Für Menschen zum Überfliegen, für KI-Antworten sauber zitierbar. Leitet den
   lokalen Teil der Seite ein. */
.blick {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 0 auto clamp(48px, 6vw, 80px);
  max-width: 1040px;
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--r-2xl);
  background: var(--navy);
  color: var(--on-dark-dim);
  box-shadow: 0 24px 60px rgba(15, 37, 68, .18);
  position: relative;
  overflow: hidden;
}
.blick::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 320px at 0% 0%, rgba(11, 99, 214, .35), rgba(11, 99, 214, 0) 70%);
}
.blick > * { position: relative; }
@media (max-width: 860px) { .blick { grid-template-columns: 1fr; } }
.blick__kopf .eyebrow { color: var(--sky); }
.blick__kopf h2 { margin: 6px 0 14px; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.blick__kopf p { margin: 0; font-size: calc(16.5rem / 16); line-height: 1.65; color: var(--on-dark-dim); }
.blick__liste { margin: 0; display: grid; }
.blick__liste > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 4px 16px;
  padding: 13px 0;
  border-top: 1px solid var(--on-dark-line);
}
.blick__liste > div:first-child { border-top: 0; padding-top: 0; }
.blick__liste > div:last-child { padding-bottom: 0; }
.blick__liste dt {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: calc(15rem / 16);
  color: #fff;
}
.blick__liste dt .ico { width: 20px; height: 20px; color: var(--sky); }
.blick__liste dd { margin: 0; font-size: calc(15.5rem / 16); line-height: 1.5; color: var(--on-dark-dim); }
@media (max-width: 520px) {
  .blick__liste > div { grid-template-columns: 1fr; }
  .blick__liste dd { padding-left: 30px; }
}

/* --------------------------------------------------------- Fließtext      */
.text-spalte { max-width: 760px; margin-inline: auto; }
.text-spalte > p,
.text-spalte > ul { font-size: calc(17rem / 16); line-height: 1.7; color: var(--text-body); }
.text-spalte > p + p { margin-top: 1em; }
.text-spalte h2 { margin-bottom: 18px; }
.text-spalte h3 { margin: 32px 0 10px; font-size: 1.2rem; }

/* --------------------------------------------------------- Zahlenkasten   */
/* Drei Blöcke, drei Aussagen: wie viele, im Vergleich, wie oft gescheitert. */
.lage {
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: clamp(22px, 3vw, 38px);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(15, 37, 68, .04), 0 22px 54px rgba(15, 37, 68, .10);
}
.lage__wo {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 clamp(18px, 2.4vw, 28px);
  font-size: calc(13.5rem / 16); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute);
}
.lage__wo .ico { width: 18px; height: 18px; color: var(--blue); }
.lage__raster {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1fr);
}
.lage__block { padding: 4px clamp(18px, 2.4vw, 32px); }
.lage__block:first-child { padding-left: 0; }
.lage__block:last-child { padding-right: 0; }
.lage__block + .lage__block { border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .lage__raster { grid-template-columns: 1fr; }
  .lage__block { padding: 20px 0; }
  .lage__block + .lage__block { border-left: 0; border-top: 1px solid var(--line); }
  .lage__block:first-child { padding-top: 0; }
  .lage__block:last-child { padding-bottom: 0; }
}
.lage__gross {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.4vw, 4.2rem); font-weight: 700;
  line-height: .95; letter-spacing: -.03em;
  color: var(--navy);
}
.lage__titel { display: block; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: calc(15.5rem / 16); color: var(--text); }
.lage__block:not(.lage__block--zahl) > .lage__titel { margin: 0 0 14px; }
.lage__badge {
  display: inline-block; margin-top: 12px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: calc(13rem / 16); font-weight: 700;
  background: var(--gray-100); color: var(--text-dim);
}
.lage__badge--hoch { background: #FDECE6; color: #B4461C; }
.lage__badge--runter { background: #E7F6EC; color: #1E7A45; }
.lage__klein { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: calc(14rem / 16); line-height: 1.45; color: var(--text-dim); }
.lage__klein .ico { width: 17px; height: 17px; color: var(--amber); flex: none; margin-top: 1px; }

/* Vergleichsbalken */
.lage__vergleich { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lage__vergleich li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  grid-template-areas: "name name" "balken wert";
  gap: 4px 10px; align-items: center;
}
.lage__vname { grid-area: name; font-size: calc(14rem / 16); color: var(--text-dim); }
.lage__vbalken { grid-area: balken; height: 12px; border-radius: 6px; background: var(--gray-100); overflow: hidden; }
.lage__vbalken i { display: block; height: 100%; border-radius: 6px; background: var(--gray-300); }
.lage__vwert { grid-area: wert; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: calc(15rem / 16); color: var(--text-dim); }
.lage__vergleich .ist-hier .lage__vname { color: var(--text); font-weight: 600; }
.lage__vergleich .ist-hier .lage__vbalken i { background: var(--navy); }
.lage__vergleich .ist-hier .lage__vwert { color: var(--navy); }

/* Ring für den Versuchsanteil */
.lage__block--ring { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
@media (max-width: 900px) { .lage__block--ring { flex-direction: row; text-align: left; } }
.lage__ringfeld { position: relative; flex: none; width: 112px; height: 112px; }
.lage__ring { width: 100%; height: 100%; }
.lage__ring-grund { fill: none; stroke: var(--blue-soft); stroke-width: 11; }
.lage__ring-wert { fill: none; stroke: var(--blue); stroke-width: 11; stroke-linecap: round; }
.lage__ringfeld strong {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  color: var(--blue); letter-spacing: -.02em;
}
.lage__block--ring .lage__titel { margin: 0; }
.lage__block--ring .lage__klein { display: block; margin-top: 4px; }

.lage__quelle {
  margin: clamp(20px, 2.6vw, 28px) 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: calc(13.5rem / 16);
  color: var(--text-mute);
}
.lage__quelle a { color: var(--blue); font-weight: 600; }

/* --------------------------------------------------------- Fakten         */
/* Zensus-Werte als kurze Reihe: Zahl groß, Bedeutung darunter. */
.fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(26px, 3vw, 36px) 0 0;
}
@media (max-width: 760px) { .fakten { grid-template-columns: 1fr; } }
.fakt {
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.fakt strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--navy);
}
.fakt span { display: block; margin-top: 6px; font-size: calc(15rem / 16); line-height: 1.5; color: var(--text-dim); }
.fakten__quelle { margin: 14px 0 0; font-size: calc(13.5rem / 16); color: var(--text-mute); }

/* --------------------------------------------------------- Referenz       */
.referenz {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
@media (max-width: 860px) { .referenz { grid-template-columns: 1fr; } }
.referenz__bild { position: relative; min-height: 260px; background: var(--gray-100); }
.referenz__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.referenz__text { padding: clamp(24px, 3.2vw, 44px); }
.referenz__ort {
  margin: 0 0 6px;
  font-size: calc(14rem / 16); font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--blue);
}
.referenz__text h3 { margin: 0 0 18px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.referenz__ablauf { display: grid; gap: 14px; margin: 0; }
.referenz__ablauf dt { font-weight: 700; color: var(--text); font-size: calc(15rem / 16); }
.referenz__ablauf dd { margin: 2px 0 0; color: var(--text-dim); font-size: calc(16rem / 16); line-height: 1.6; }

/* Beispielreferenz: deutlich als solche markiert. Eine ausgedachte Referenz
   darf nie wie eine echte aussehen – orte_bauen.py lässt Seiten mit diesem
   Merkmal beim Deploy ohnehin nicht live gehen. */
[data-platzhalter] { outline: 3px dashed var(--amber); outline-offset: 6px; }
.platzhalter-hinweis {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--navy-900);
  font-size: calc(13rem / 16); font-weight: 700;
  letter-spacing: .02em;
}

/* --------------------------------------------------------- Stimmen        */
.stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.stimmen .tst__card { width: auto; max-width: none; }

/* --------------------------------------------------------- Nachbarn       */
/* Fotokarten: Stadtbild, darüber Name und Fahrzeit. Wirkt wie eine Einladung
   zum Weiterklicken, nicht wie eine Linkliste. */
.nachbarn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.nachbar {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: #fff;
  background: var(--navy);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.nachbar::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 23, 41, .05) 35%, rgba(8, 23, 41, .82) 100%);
}
.nachbar__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
a.nachbar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
a.nachbar:hover .nachbar__bild { transform: scale(1.05); }
.nachbar__zeit {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  font-size: calc(13.5rem / 16); font-weight: 600;
  backdrop-filter: blur(6px);
}
.nachbar__zeit .ico { width: 16px; height: 16px; color: var(--blue); }
.nachbar__fuss {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.nachbar__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.6rem); letter-spacing: -.01em; }
.nachbar__mehr { display: inline-flex; align-items: center; gap: 6px; font-size: calc(14rem / 16); font-weight: 600; color: var(--sky); }
.nachbar__mehr svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
a.nachbar:hover .nachbar__mehr svg { transform: translateX(4px); }
/* Stadt ohne fertige Seite: Karte bleibt, ohne Link und ohne Aufforderung. */
.nachbar.ist-bald .nachbar__mehr { color: rgba(255, 255, 255, .7); font-weight: 500; }
.nachbar.ist-bald .nachbar__mehr svg { display: none; }
.nachbarn__quelle { margin: 12px 0 0; font-size: calc(12rem / 16); color: var(--text-mute); }
.nachbarn__quelle a { color: inherit; }

/* --------------------------------------------------------- Ortskarten     */
/* Übersichtsseite: je Stadt eine Karte mit eigenem Satz, keine Linkliste. */
.ortskarten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 960px) { .ortskarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ortskarten { grid-template-columns: 1fr; } }
.ortskarte {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
a.ortskarte:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.ortskarte h3 { margin: 0 0 4px; font-size: 1.2rem; }
.ortskarte__zeit { font-size: calc(14rem / 16); color: var(--blue); font-weight: 600; }
.ortskarte p { margin: 12px 0 0; font-size: calc(15.5rem / 16); line-height: 1.55; color: var(--text-dim); }
.ortskarte__mehr { margin-top: auto; padding-top: 14px; font-size: calc(14.5rem / 16); font-weight: 600; color: var(--blue); }
.ortskarte--bald .ortskarte__mehr { color: var(--text-mute); }

/* --------------------------------------------------------- Tabellen       */
.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(15rem / 16);
  font-variant-numeric: tabular-nums;
}
.tabelle th, .tabelle td {
  padding: 12px 16px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabelle th:first-child, .tabelle td:first-child { text-align: left; white-space: normal; }
.tabelle thead th {
  font-size: calc(13rem / 16); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-mute);
  background: var(--gray-50);
}
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle .hoch { color: #B4461C; font-weight: 700; }
.tabelle .summe td { font-weight: 700; background: var(--gray-50); }
.tabelle__fuss { margin: 12px 0 0; font-size: calc(13.5rem / 16); color: var(--text-mute); }

/* --------------------------------------------------------- Balken         */
/* Zehnjahreskurve als Balken – ohne Diagrammbibliothek. Die Höhe kommt als
   --w aus dem HTML, der Versuchsanteil als --v. */
.balken {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: end;
  gap: clamp(6px, 1vw, 14px);
  height: 260px;
  margin: 0; padding: 0; list-style: none;
}
.balken li { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.balken__saeule {
  position: relative;
  width: 100%;
  height: calc(var(--w) * 1%);
  border-radius: 6px 6px 0 0;
  background: var(--navy-500);
}
.balken__saeule::after {
  /* unterer Teil: Versuche */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--v) * 1%);
  background: var(--sky);
}
.balken li:last-child .balken__saeule { background: var(--blue); }
.balken__wert { font-size: calc(12.5rem / 16); font-weight: 700; color: var(--text); margin-bottom: 4px; }
.balken__jahr { margin-top: 6px; font-size: calc(12.5rem / 16); color: var(--text-mute); }
.legende { display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: calc(14rem / 16); color: var(--text-dim); }
.legende span { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 560px) {
  .balken { height: 200px; }
  .balken__wert { font-size: calc(10.5rem / 16); }
  .balken__jahr { font-size: calc(11rem / 16); }
}

.tabelle a,
.text-spalte > p a,
.text-spalte li a { color: var(--blue); font-weight: 600; text-decoration: none; }
.tabelle a:hover,
.text-spalte > p a:hover,
.text-spalte li a:hover { text-decoration: underline; }
.text-spalte li + li { margin-top: .6em; }

/* --------------------------------------------------------- Mehr Icons     */
/* Leistungskarten: die Leistungs-Icons der Startseite. */
.feature__bild { display: block; width: 64px; height: 64px; margin-bottom: 16px; }
.feature__bild img { width: 100%; height: 100%; object-fit: contain; }
.feature .svc__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Karten mit Foto (Lösungsseiten, „Was dazugehört“, 05.11.2026): Das Foto
   läuft randlos bis an die Kartenkante, die Ecken schneidet die Karte selbst.
   Der Link sitzt unten, damit er in einer Reihe überall auf gleicher Höhe
   steht. */
.feature--foto {
  --pad: clamp(24px, 2.2vw, 32px);
  padding: var(--pad);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.feature__foto {
  display: block;
  width: calc(100% + 2 * var(--pad)); max-width: none;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) clamp(20px, 2vw, 24px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.feature--foto h3 + p { margin-bottom: 16px; }
.feature--foto .svc__foot { margin-top: auto; }

/* Zensus-Fakten */
/* Illustrierte Icons aus dem Sicherheitscheck – dieselbe Bildsprache wie dort. */
.fakt__bild { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 0 14px; }

/* Referenz: Ablauf mit Icons */
.referenz__ablauf > div { display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; }
.referenz__ablauf .ablauf__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.referenz__ablauf .ablauf__icon .ico { width: 18px; height: 18px; }

/* Ortskarten der Übersicht */
.ortskarte__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ortskarte__kopf .ortsleiste__icon { width: 40px; height: 40px; }
.ortskarte__kopf h3 { margin: 0; }
.ortskarte__zeit { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.ortskarte__zeit .ico { width: 16px; height: 16px; }

/* Statistikseite: Erkenntnisse als Karten */
.erkenntnisse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 760px) { .erkenntnisse { grid-template-columns: 1fr; } }
.erkenntnis {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.erkenntnis h3 { margin: 0 0 10px; font-size: 1.15rem; }
.erkenntnis p { margin: 0; font-size: calc(15.5rem / 16); line-height: 1.6; color: var(--text-dim); }
.erkenntnis .feature__icon { margin-bottom: 16px; }

/* Grenzen der Zahlen: Liste mit Icons */
.grenzen { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.grenzen li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: calc(16.5rem / 16); line-height: 1.6; color: var(--text-body); }
.grenzen .ico { color: var(--amber); margin-top: 2px; }

/* Kurzantwort mit Icon */
.kurzantwort { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.kurzantwort > .ico { width: 28px; height: 28px; color: var(--blue); margin-top: 2px; }
.kurzantwort p { margin: 0; }

/* --------------------------------------------------------- Stadtkarte     */
/* Wie die Saarland-Karte der Startseite, eine Ebene tiefer: Stadtgrenze aus
   OpenStreetMap, Bezirke als getönte Flächen, Stadtteile als Punkte.
   Gezeichnet von tools/stadtkarte.py. */
.stadtkarte { max-width: 900px; margin-top: clamp(24px, 3vw, 36px); }
.stadtkarte svg { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.stadtkarte__bezirk { stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
:root { --bezirk-0: #CFE2FA; --bezirk-1: #E6F1FD; --bezirk-2: #A9CCF4; --bezirk-3: #C8EDFB; }
.stadtkarte__bezirk--0 { fill: var(--bezirk-0); }
.stadtkarte__bezirk--1 { fill: var(--bezirk-1); }
.stadtkarte__bezirk--2 { fill: var(--bezirk-2); }
.stadtkarte__bezirk--3 { fill: var(--bezirk-3); }
.legende-bezirke .b0 { background: var(--bezirk-0); }
.legende-bezirke .b1 { background: var(--bezirk-1); }
.legende-bezirke .b2 { background: var(--bezirk-2); }
.legende-bezirke .b3 { background: var(--bezirk-3); }
/* Die Stadtgrenze liegt als eigene Linie über den Bezirken. */
.stadtkarte__grenze { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linejoin: round; }
.stadtkarte__teil {
  fill: none;
  stroke: #fff; stroke-width: 1.2; stroke-dasharray: 3 3;
  opacity: .9;
}
.stadtkarte__name { font-size: calc(14rem / 16); }
.stadtkarte .karte__punkt { stroke-width: 1.8; }
.stadtkarte__sitz-halo { fill: var(--blue); opacity: .18; }
.stadtkarte__sitz-punkt { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.stadtkarte__sitz-name {
  font-family: var(--font-hand);
  font-size: calc(22rem / 16); font-weight: 600;
  fill: var(--blue);
  stroke: #fff; stroke-width: 4; stroke-linejoin: round; paint-order: stroke fill;
}

/* Legende: welcher Bezirk welche Stadtteile umfasst. Auf dem Handy trägt sie
   die Namen allein – dort wären sie in der Karte zu klein. */
.legende-bezirke {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
@media (max-width: 600px) { .legende-bezirke { grid-template-columns: 1fr; } }
.legende-bezirke li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: calc(15rem / 16); line-height: 1.5; color: var(--text-dim); }
.legende-bezirke i { width: 18px; height: 18px; border-radius: 5px; margin-top: 2px; border: 1px solid rgba(11, 99, 214, .25); }
.legende-bezirke strong { display: block; color: var(--text); font-family: var(--font-display); }

@media (max-width: 760px) {
  .stadtkarte svg { width: 100%; margin-left: 0; }
  .stadtkarte__sitz-name { font-size: calc(34rem / 16); stroke-width: 6; }
  .stadtkarte .karte__punkt { r: 7; }
}

/* --------------------------------------------------------- Ablauf         */
/* Vier Schritte über dem Sicherheitscheck – beantwortet vor dem Formular,
   was nach dem Absenden passiert. Bilder aus dem Ablauf der Startseite. */
.ablauf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin: 0 0 clamp(36px, 4.5vw, 56px); padding: 0; list-style: none;
  counter-reset: none;
}
@media (max-width: 900px) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf__schritt {
  position: relative;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.ablauf__schritt img { width: 88px; height: auto; margin: 4px auto 14px; }
.ablauf__nr {
  position: absolute; top: 14px; left: 14px;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-display); font-size: calc(14rem / 16); font-weight: 700;
}
.ablauf__schritt h3 { margin: 0 0 6px; font-size: 1.08rem; }
.ablauf__schritt p { margin: 0; font-size: calc(15rem / 16); line-height: 1.5; color: var(--text-dim); }
/* Auf dem Handy wird der Ablauf zur Wischreihe (data-wischen) – die Karten
   behalten dort ihren Aufbau mit Bild oben. */
@media (max-width: 860px) { .ablauf { margin-bottom: 0; } .ablauf + .wischpunkte { margin-bottom: clamp(32px, 6vw, 44px); } }

/* --------------------------------------------------------- Gemeinden      */
/* Übersichtsseite: alle 52 Gemeinden nach Landkreis, zum Aufklappen. Wer aus
   Lebach oder Perl kommt, soll seinen Ort finden, ohne bis zu den Fragen
   scrollen zu müssen. */
.gemeinden { margin-top: clamp(36px, 4.5vw, 56px); }
.gemeinden h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.gemeinden > p { margin: 0 0 20px; max-width: 70ch; font-size: calc(16.5rem / 16); line-height: 1.6; color: var(--text-dim); }
.gemeinden__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 960px) { .gemeinden__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gemeinden__raster { grid-template-columns: 1fr; } }
.gemeinden__kreis {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.gemeinden__kreis[open] { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.gemeinden__kreis summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}
.gemeinden__kreis summary::-webkit-details-marker { display: none; }
.gemeinden__kreis summary::after {
  content: "+"; margin-left: auto;
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-weight: 700; transition: transform .25s var(--ease);
}
.gemeinden__kreis[open] summary::after { transform: rotate(45deg); background: var(--blue); color: #fff; }
.gemeinden__kreis summary .ico { color: var(--blue); width: 20px; height: 20px; }
.gemeinden__kreis summary strong { display: block; font-family: var(--font-display); color: var(--text); font-size: calc(15.5rem / 16); }
.gemeinden__kreis summary small { display: block; font-size: calc(13rem / 16); color: var(--text-mute); }
.gemeinden__kreis ul {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 0; padding: 2px 18px 18px 50px; list-style: none;
  font-size: calc(15rem / 16); line-height: 1.7; color: var(--text-body);
}
.gemeinden__kreis a { color: var(--blue); font-weight: 600; text-decoration: none; }
.gemeinden__kreis a:hover { text-decoration: underline; }

/* Leistungen kompakt: vier Karten in einer Reihe, ganz anklickbar. */
.leistungen-kompakt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 960px) { .leistungen-kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .leistungen-kompakt { grid-template-columns: 1fr; } }
.leistungen-kompakt .feature { display: block; text-decoration: none; color: inherit; }
.leistungen-kompakt .feature h3 { color: var(--text); }
.leistungen-kompakt .feature:hover h3 { color: var(--blue); }

/* Karten, deren Zielseite noch nicht fertig ist: gleiche Form, kein Link. */
.ortskarte--bald { cursor: default; }
.ortskarte--bald:hover { transform: none; box-shadow: none; border-color: var(--line); }
.leistungen-kompakt .feature.ist-bald:hover { transform: none; }

/* --------------------------------------------------------- Wischreihen    */
/* Auf dem Handy: Kartenreihen mit data-wischen werden zu einer Reihe zum
   Wischen, die nächste Karte schaut angeschnitten herein. Die Punkte darunter
   baut orte.js. Wie die Leistungsreihe der Startseite. */
.wischpunkte { display: none; }
@media (max-width: 860px) {
  /* body davor: schlägt die Rasterregeln der Kartenreihen, egal wo sie in
     der Datei stehen. */
  body [data-wischen] {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter, 20px) * -1);
    padding-inline: var(--gutter, 20px);
    padding-block: 4px 12px;
  }
  body [data-wischen]::-webkit-scrollbar { display: none; }
  body [data-wischen] > * { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; }
  /* Kein Einfahren in der Reihe: Der Versatz aus main.js ragte unten über
     die Reihe hinaus und machte sie kreuz und quer verschiebbar – so lange,
     bis jede Karte einmal hereingewischt war. Die Karten stehen gleich da. */
  body [data-wischen] > .reveal { opacity: 1; transform: none; transition: none; }
  body [data-wischen] > .feature:hover { transform: none; }
  .wischpunkte {
    display: flex; justify-content: center; gap: 7px;
    margin-top: 14px;
  }
  .wischpunkte[hidden] { display: none; }
  .wischpunkte button {
    width: 7px; height: 7px; padding: 0; border: 0;
    border-radius: 50%;
    background: var(--gray-300);
    cursor: pointer;
    transition: background-color .25s var(--ease), width .25s var(--ease);
  }
  .wischpunkte button.is-active { width: 22px; border-radius: var(--r-pill); background: var(--blue); }
}

/* --------------------------------------------------------- Stadtkarte mobil */
/* Auf dem Handy wären die Namen in der Karte zu klein. Dort tragen die Orte
   Nummern, die Namen stehen darunter als Liste. Ein Tipp auf Nummer oder Name
   hebt den Ort hervor und nennt ihn über der Liste. */
.stadtkarte__nrkreis, .stadtkarte__nr, .stadtkarte__liste, .stadtkarte__gewaehlt { display: none; }
@media (max-width: 760px) {
  .stadtkarte { overflow: hidden; }
  .stadtkarte svg {
    width: calc(var(--zoom, 1) * 100%);
    max-width: none;
    margin-left: calc(var(--versatz, 0%) * -1);
  }
  .stadtkarte .karte__punkt { display: none; }
  .stadtkarte__nrkreis {
    display: block;
    fill: var(--navy); stroke: #fff; stroke-width: 2.5;
    transition: fill .2s var(--ease);
  }
  .stadtkarte__nr {
    display: block;
    fill: #fff; font-family: var(--font-display); font-weight: 700;
    pointer-events: none;
  }
  .stadtkarte__ort { cursor: pointer; }
  .stadtkarte__ort.ist-aktiv .stadtkarte__nrkreis { fill: var(--blue); }
  .stadtkarte .stadtkarte__name { display: none; }

  .stadtkarte__gewaehlt {
    display: block; min-height: 1.5em;
    margin: 8px 0 0; text-align: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
    color: var(--blue);
  }
  .stadtkarte__liste {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 10px 0 0; padding: 0; list-style: none;
  }
  .stadtkarte__liste button {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 6px 8px;
    border: 0; border-radius: var(--r);
    background: transparent; text-align: left;
    font: inherit; font-size: calc(14.5rem / 16); color: var(--text-body);
    cursor: pointer;
  }
  .stadtkarte__liste button span {
    display: grid; place-items: center; flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--navy); color: #fff;
    font-family: var(--font-display); font-size: calc(12rem / 16); font-weight: 700;
  }
  .stadtkarte__liste button.ist-aktiv { background: var(--blue-soft); color: var(--text); font-weight: 600; }
  .stadtkarte__liste button.ist-aktiv span { background: var(--blue); }
  .stadtkarte .karte__quelle { margin-top: 12px; }
  /* Der Firmensitz-Marker würde auf dem Handy die Nummern verdecken – dort
     steht er in der Liste (St. Johann trägt den Zusatz). */
  .stadtkarte__sitz { display: none; }
  .stadtkarte__liste { gap: 2px 10px; }
  .stadtkarte__liste button { padding: 4px 6px; font-size: calc(14rem / 16); line-height: 1.3; }
  .stadtkarte__liste em { font-style: normal; }
  .stadtkarte__liste small { display: block; font-size: calc(12rem / 16); color: var(--blue); font-weight: 600; }
}

/* ==========================================================================
   Leistungsseiten – Bausteine
   ========================================================================== */

/* Häkchenliste */
.hakenliste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.hakenliste li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: calc(15.5rem / 16); line-height: 1.5; color: var(--text-body); }
.hakenliste .ico { width: 20px; height: 20px; color: var(--blue); margin-top: 1px; }
.section--dark .hakenliste li { color: var(--on-dark-dim); }

/* Zuhause oder Betrieb: zwei große Karten mit Bild */
.wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr; } }
.weg {
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.weg__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.weg__text { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 32px); }
.weg__text .eyebrow { margin-bottom: 2px; }
.weg__text h3 { margin: 0 0 8px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.weg__text > p { margin: 0; font-size: calc(16rem / 16); line-height: 1.6; color: var(--text-dim); }
.weg__link { margin: auto 0 0 !important; padding-top: 18px; }

/* Typkarten: Kamera-Bauformen, Methoden, Probleme */
.typen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.typ {
  display: flex; flex-direction: column;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.typ > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.typ__text { padding: clamp(18px, 2vw, 24px); display: flex; flex-direction: column; flex: 1; }
.typ__text h3 { margin: 0 0 8px; font-size: 1.12rem; }
.typ__text p { margin: 0; font-size: calc(15rem / 16); line-height: 1.55; color: var(--text-dim); }
.typ__text .typ__wo { margin-top: auto; padding-top: 12px; font-size: calc(13.5rem / 16); font-weight: 600; color: var(--blue); }
.text-spalte + .typen, .typen + .text-spalte, .text-spalte + .hinweis, .typen + .hinweis { margin-top: clamp(24px, 3vw, 36px); }

/* Schrittfolge: vier Schritte als Kacheln. Hieß früher „kette“ – der Name
   ist seit der AJAX-Seite in systeme.css vergeben (Leitstellen-Pfeile), und
   beide Regeln zusammen zerdrückten die Kacheln. */
.schrittfolge {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; list-style: none;
  counter-reset: none;
}
@media (max-width: 900px) { .schrittfolge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .schrittfolge { grid-template-columns: 1fr; } }
.schrittfolge li {
  position: relative;
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.schrittfolge__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 50%; background: var(--navy); color: var(--sky);
}
.schrittfolge strong { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--text); margin-bottom: 6px; }
.schrittfolge li > span:last-child { display: block; font-size: calc(15rem / 16); line-height: 1.5; color: var(--text-dim); }
/* Zusatzzeile unter dem Schrittnamen und die Leitstelle als letzter Schritt
   hervorgehoben, darunter ein Hinweis zu den Alarmbildern (Einfamilienhaus,
   Julian 05.11.2026). */
.schrittfolge__ziel { display: block; margin: -2px 0 8px; font-style: normal; font-size: calc(13.5rem / 16); font-weight: 600; color: var(--blue); }
.schrittfolge li.schrittfolge__leitstelle { background: var(--navy); }
.schrittfolge__leitstelle .schrittfolge__icon { background: var(--blue); color: #fff; }
.schrittfolge__leitstelle strong { color: #fff; }
.schrittfolge li.schrittfolge__leitstelle > span:last-child { color: rgba(255, 255, 255, .78); }
/* .hinweis--leitstelle hatte links eine blaue Leiste (inset 4px). Seit
   11.11.2026 ohne – Fabio mag die Randleisten nicht. Die Klasse bleibt als
   Haken für spätere Änderungen. */
.hinweis + .text-spalte { margin-top: clamp(24px, 3vw, 36px); }

/* Vergleichstabellen */
.tabelle-rahmen--vergleich { box-shadow: var(--shadow-sm); border: 0; }
.tabelle--vergleich th, .tabelle--vergleich td { white-space: normal; text-align: left; vertical-align: top; line-height: 1.5; }
.tabelle--vergleich thead th { font-size: calc(14rem / 16); letter-spacing: 0; text-transform: none; color: var(--text); font-family: var(--font-display); }
.tabelle--vergleich td:first-child { font-weight: 600; color: var(--text); width: 22%; }
@media (max-width: 700px) { .tabelle--vergleich { min-width: 620px; } }

/* Hinweisbox */
.hinweis {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  max-width: 820px; margin-inline: auto;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  background: var(--blue-soft);
}
.hinweis > .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--surface); color: var(--blue); }
.hinweis strong { display: block; font-family: var(--font-display); color: var(--text); margin-bottom: 6px; }
.hinweis p { margin: 0; font-size: calc(15.5rem / 16); line-height: 1.6; color: var(--text-body); }

/* Städte-Links auf Leistungsseiten */
.stadtlinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.stadtlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  font-weight: 600; font-size: calc(15rem / 16); color: var(--text); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.stadtlink .ico { width: 18px; height: 18px; color: var(--blue); }
a.stadtlink:hover { border-color: var(--blue); color: var(--blue); }
.stadtlink--alle { background: var(--navy); border-color: var(--navy); color: #fff; }
.stadtlink--alle svg { width: 16px; height: 16px; }
a.stadtlink--alle:hover { color: #fff; background: var(--blue); border-color: var(--blue); }

/* Weitere Leistungen: drei Karten */
.leistungen-kompakt--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .leistungen-kompakt--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Bildnachweis vor dem Abschluss */
.bildnachweis { margin: 0 auto; padding-block: 0 24px; font-size: calc(12rem / 16); color: var(--text-mute); }
.bildnachweis a { color: inherit; }
/* Typkarte ohne Foto: Icon-Fläche im selben Format wie die Bilder. */
.typ__flaeche {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background: radial-gradient(260px 200px at 30% 20%, rgba(11, 99, 214, .45), rgba(11, 99, 214, 0) 70%), var(--navy);
  color: var(--sky);
}
.typ__flaeche .ico { width: 64px; height: 64px; stroke-width: 1.4; }
.hinweis > div { min-width: 0; }
.hinweis p { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 480px) { .hinweis { grid-template-columns: 1fr; } }
/* Abstand auch dann, wenn die (auf dem Desktop unsichtbare) Punkt-Navigation
   der Wischreihe dazwischensteht. */
.wischpunkte + .hinweis, .wischpunkte + .text-spalte, .schrittfolge + .text-spalte { margin-top: clamp(24px, 3vw, 36px); }
/* Hinweis direkt unter Wegen oder Karten (Einzelhandel, Lager, Büro). :where
   hält das Gewicht niedrig, damit .bereiche__hinweis weiter seinen Abstand setzt. */
:where(.wege, .features) + .hinweis { margin-top: clamp(24px, 3vw, 36px); }

/* Anruf unter dem Ablauf: steht außerhalb der Wischreihe, damit er auf dem
   Handy immer sichtbar ist – egal, welche Karte gerade vorne liegt. */
.ablauf__ruf {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 24px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  padding: clamp(16px, 2vw, 20px) clamp(18px, 2.4vw, 28px);
  max-width: 820px;
  border-radius: var(--r-xl);
  background: var(--blue-soft);
  text-align: center;
}
.ablauf__ruf p { margin: 0; font-size: calc(15.5rem / 16); color: var(--text-body); }
.ablauf__ruf strong { color: var(--text); }
.ablauf__ruf-knopf { display: inline-flex; align-items: center; gap: 10px; }
.ablauf__ruf-knopf svg { width: 18px; height: 18px; }
.ablauf { margin-bottom: clamp(20px, 2.6vw, 28px); }
.wischpunkte + .ablauf__ruf { margin-top: 18px; }
@media (max-width: 860px) {
  .ablauf__ruf { flex-direction: column; }
  .ablauf__ruf-knopf { width: 100%; justify-content: center; }
}

/* Alle neun Städte auf den Leistungsseiten: 3×3 statt 4-4-1. */
.nachbarn--alle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .nachbarn--alle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nachbarn__alle { margin: clamp(20px, 2.6vw, 28px) 0 0; text-align: center; }
.nachbarn__alle .btn { display: inline-flex; align-items: center; gap: 8px; }
.nachbarn__alle svg { width: 16px; height: 16px; }

/* ==========================================================================
   Leistungsseiten – Bild vor Text
   Schaubild, Systemkarten, Alarm-Ablauf am Handy, Bild mit Text, Bildband.
   Zuerst auf der Alarmanlagen-Seite (Pilot 10/2026): Was man sieht, bleibt
   hängen – der Text steht weiter vollständig im HTML.
   ========================================================================== */

/* --------------------------------------------------------- Schaubild      */
/* Haus im Schnitt, darüber Punkte zum Antippen, daneben die Karte des
   gewählten Geräts. Ohne Skript stehen alle Geräte als Liste da; orte.js
   setzt .ist-bereit und zeigt dann immer eins. */
.schaubild {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
  grid-template-areas: "bild karte" "bild nav";
  grid-template-rows: auto auto;
  gap: 16px clamp(20px, 3vw, 40px);
  align-content: center;
}
.schaubild__bild {
  grid-area: bild; align-self: center; position: relative;
  border-radius: var(--r-2xl); overflow: hidden;
  background: var(--navy-900); box-shadow: var(--shadow);
}
.schaubild__bild > img { display: block; width: 100%; height: auto; }
.schaubild__punkt {
  --groesse: clamp(24px, 2.5vw, 34px);
  position: absolute; left: var(--x); top: var(--y);
  width: var(--groesse); height: var(--groesse);
  margin: calc(var(--groesse) / -2) 0 0 calc(var(--groesse) / -2);
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--navy);
  font: 700 clamp(11px, 1vw, 14px)/1 var(--font-display);
  box-shadow: 0 0 0 4px rgba(143, 216, 247, .3), 0 4px 14px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.schaubild__punkt::after {
  content: ""; position: absolute; inset: -3px;
  border: 2px solid var(--sky); border-radius: 50%;
  opacity: 0; animation: schaubild-puls 2.6s var(--ease) infinite;
  pointer-events: none;
}
.schaubild__punkt:hover { transform: scale(1.12); }
.schaubild__punkt:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.schaubild__punkt[aria-pressed="true"] {
  background: var(--blue); color: #fff; transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(11, 99, 214, .4), 0 6px 18px rgba(0, 0, 0, .4);
}
.schaubild__punkt[aria-pressed="true"]::after { border-color: #fff; }
@keyframes schaubild-puls {
  0% { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}

.schaubild__liste { grid-area: karte; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.schaubild__geraet {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
/* Gerätebilder aus tools/geraete_bilder.py: eng um das Gerät geschnitten. */
.schaubild__geraet > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.schaubild__text { padding: clamp(18px, 2vw, 24px); }
.schaubild__wo {
  display: block; margin-bottom: 4px;
  font: 700 12.5px/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--blue);
}
.schaubild__text h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 1.7vw, 1.4rem); }
.schaubild__text p { margin: 0; font-size: calc(15.5rem / 16); line-height: 1.6; color: var(--text-dim); }
/* Mit Skript: alle Karten in derselben Zelle – die Höhe richtet sich nach
   der längsten, die Pfeile darunter springen nicht. */
.schaubild.ist-bereit .schaubild__geraet {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s .35s;
}
.schaubild.ist-bereit .schaubild__geraet.ist-aktiv {
  visibility: visible; opacity: 1;
  transition: opacity .35s var(--ease);
}
.schaubild__nav { grid-area: nav; display: none; align-items: center; justify-content: space-between; gap: 12px; }
.schaubild.ist-bereit .schaubild__nav { display: flex; }
.schaubild__zahl { font: 700 15px/1 var(--font-display); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.schaubild__pfeil {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--text);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.schaubild__pfeil svg { width: 20px; height: 20px; }
.schaubild__pfeil:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 900px) {
  .schaubild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bild" "karte" "nav"; grid-template-rows: none; }
  .schaubild__bild { border-radius: var(--r-xl); }
}
/* Handy: Karte quer – quadratisches Bild links, Text rechts. Quadrat statt
   Kartenhöhe: sonst schnitte ein hoher, schmaler Streifen flache Geräte wie
   Zentrale oder Rauchmelder an den Seiten ab. */
@media (max-width: 600px) {
  .schaubild__geraet { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; }
  .schaubild__geraet > img { width: 112px; height: 112px; margin-left: 12px; aspect-ratio: 1; border-radius: var(--r-lg); }
  .schaubild__text { padding: 14px 16px; }
  .schaubild__text h3 { font-size: 1.1rem; margin-bottom: 4px; }
  .schaubild__text p { font-size: calc(14.5rem / 16); line-height: 1.5; }
  .schaubild__wo { font-size: calc(11.5rem / 16); }
}

/* --------------------------------------------------------- Alarm-Ablauf   */
/* Vier Schritte, daneben ein Handy mit dem, was Sie in dem Moment sehen.
   orte.js schaltet weiter, solange der Block im Bild ist (.laeuft), und hält
   an, sobald jemand einen Schritt antippt. Ohne Skript: alle Schritte, das
   Handy zeigt den ersten. */
.alarmfilm {
  display: grid;
  grid-template-columns: auto minmax(0, 460px);
  grid-template-areas: "handy schritte";
  justify-content: center; align-items: center;
  gap: clamp(32px, 6vw, 88px);
  margin-bottom: clamp(28px, 3.6vw, 44px);
}
.alarmfilm__handy { grid-area: handy; }
.alarmfilm__schritte { grid-area: schritte; position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* Die weiße Karte gleitet von Schritt zu Schritt, statt an einem zu
   verschwinden und am nächsten aufzutauchen. orte.js misst den aktiven
   Schritt und setzt --gx/--gy/--gb/--gh; ohne Skript trägt der Schritt
   selbst die Karte. */
.alarmfilm.ist-bereit .alarmfilm__schritte::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: var(--gb, 0); height: var(--gh, 0);
  transform: translate(var(--gx, 0), var(--gy, 0));
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow);
}
.alarmfilm.gleitet .alarmfilm__schritte::before {
  transition: transform .7s var(--ease), width .7s var(--ease), height .7s var(--ease);
}
.alarmfilm__schritt {
  position: relative; overflow: hidden;
  padding: 18px 22px 20px;
  border-radius: var(--r-xl);
  opacity: .6;
  transition: opacity .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.alarmfilm__schritt:hover, .alarmfilm__schritt.ist-aktiv { opacity: 1; }
.alarmfilm:not(.ist-bereit) .alarmfilm__schritt.ist-aktiv { background: var(--surface); box-shadow: var(--shadow); }
.alarmfilm__schritt button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 0; border: 0; background: none;
  font: 700 1.1rem/1.3 var(--font-display); color: var(--text); text-align: left;
  cursor: pointer;
}
.alarmfilm__schritt button::after { content: ""; position: absolute; inset: 0; }
.alarmfilm__schritt button:focus-visible { outline: none; }
.alarmfilm__schritt:has(button:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.alarmfilm__nr {
  position: relative;
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gray-200); color: var(--text-dim);
  font-size: calc(14rem / 16);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.ist-aktiv .alarmfilm__nr { background: var(--blue); color: #fff; }
/* Erledigte Schritte bekommen einen Haken statt der Zahl. */
.alarmfilm__schritt.ist-erledigt .alarmfilm__nr {
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9 6.1-6.6' fill='none' stroke='%230B63D6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  color: transparent;
}
/* Die Zeit bis zum nächsten Schritt: ein feiner Ring, der sich um die
   Zahl schließt. Nur solange der Ablauf von selbst weiterschaltet. */
.alarmfilm__ring {
  position: absolute; top: -6px; left: -6px;
  width: 44px; height: 44px; max-width: none; overflow: visible;
  transform: rotate(-90deg);
  border-radius: 50%;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.alarmfilm__ring circle {
  fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.alarmfilm.laeuft .ist-aktiv .alarmfilm__ring { opacity: 1; box-shadow: inset 0 0 0 2px var(--blue-soft); }
.alarmfilm.laeuft .ist-aktiv .alarmfilm__ring circle { animation: alarmfilm-ring var(--dauer, 4.5s) linear forwards; }
@keyframes alarmfilm-ring { to { stroke-dashoffset: 0; } }
.alarmfilm__schritt p { margin: 6px 0 0 44px; font-size: calc(15.5rem / 16); line-height: 1.55; color: var(--text-dim); }

/* Das Handy */
.handy {
  width: clamp(236px, 23vw, 272px); aspect-ratio: 9 / 18.4;
  padding: 10px; border-radius: 46px;
  background: linear-gradient(150deg, #34495F, #0A1B33 38%, #081729);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), var(--shadow-lg);
}
.handy__schirm {
  position: relative; height: 100%;
  border-radius: 37px; overflow: hidden;
  background: radial-gradient(140% 90% at 20% 0%, #2B5188 0%, #0F2544 52%, #081729 100%);
  color: #fff; font-family: var(--font-body);
}
.handy__insel { position: absolute; z-index: 3; top: 10px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: var(--r-pill); background: #000; }
.handy__leiste {
  position: absolute; z-index: 2; top: 15px; left: 26px; right: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font: 600 12.5px/1 var(--font-display);
  transition: color .4s var(--ease);
}
.handy__symbole { display: flex; gap: 5px; }
.handy__symbole svg { height: 10px; width: auto; fill: currentColor; }
.handy__schirm:has(.szene--foto.ist-aktiv) .handy__leiste { color: var(--navy); }

.szene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 52px 14px 18px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.szene.ist-aktiv, .alarmfilm:not(.ist-bereit) .szene--sperre {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
:where(.szene) p { margin: 0; }
.handy__datum { margin-top: 10px; text-align: center; font-size: calc(13rem / 16); color: rgba(255, 255, 255, .78); }
.handy__uhr { text-align: center; font: 600 64px/1.05 var(--font-display); letter-spacing: -.02em; }
.handy__uhr--klein { font-size: calc(44rem / 16); }

/* 1 · Melder löst aus: Grundriss in einer Glaskarte */
.handy__glas {
  margin-top: auto; padding: 12px 12px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.handy__absender { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: calc(11.5rem / 16); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.grundriss { display: block; width: 100%; height: auto; }
.grundriss rect, .grundriss path { fill: none; stroke: rgba(143, 216, 247, .65); stroke-width: 2.5; stroke-linecap: round; }
.grundriss rect { fill: rgba(255, 255, 255, .04); }
.grundriss text { font: 600 10.5px var(--font-body); fill: rgba(255, 255, 255, .55); text-anchor: middle; }
.grundriss .grundriss__tuer { stroke: #FF6B5E; stroke-width: 5; }
.grundriss__punkt { fill: #FF6B5E; }
.grundriss__welle { fill: none; stroke: #FF6B5E; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: handy-welle 1.6s var(--ease) infinite; }
.handy__zeile { margin-top: 10px; font-size: calc(12.5rem / 16); color: rgba(255, 255, 255, .75); }
.handy__zeile strong { display: block; font: 700 15px/1.3 var(--font-display); color: #fff; }

/* 2 · Sirene und Nachricht */
.handy__meldung {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  margin-top: 18px; padding: 11px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94); color: var(--text-body);
  font-size: calc(12.5rem / 16); line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.szene--meldung.ist-aktiv .handy__meldung { animation: handy-herein .55s var(--ease) both .15s; }
.handy__meldung strong { display: block; font: 700 13.5px/1.3 var(--font-display); color: var(--navy); }
.handy__meldung time { font-size: calc(11rem / 16); color: var(--text-mute); }
.handy__app-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--danger); color: #fff; }
.handy__app-icon .ico { width: 20px; height: 20px; }
.handy__sirene { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-bottom: 18px; font-size: calc(13rem / 16); font-weight: 600; color: rgba(255, 255, 255, .85); }
.handy__wellen { position: relative; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255, 107, 94, .18); color: #FF8A7F; }
.handy__wellen .ico { width: 34px; height: 34px; }
.handy__wellen::before, .handy__wellen::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid rgba(255, 107, 94, .6); border-radius: 50%;
  animation: handy-welle 1.8s var(--ease) infinite;
}
.handy__wellen::after { animation-delay: .9s; }

/* 3 · Bild prüfen: App-Ansicht, hell */
.szene--foto { background: #F3F6FA; color: var(--navy); padding-top: 50px; }
.handy__titel { font: 700 17px/1.3 var(--font-display); }
.handy__unter { font-size: calc(12.5rem / 16); color: var(--text-dim); }
.szene--anruf .handy__unter { color: rgba(255, 255, 255, .7); }
.handy__foto { position: relative; margin: 12px 0 14px; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: var(--navy-900); }
.handy__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; filter: grayscale(1) contrast(1.08) brightness(.95); }
.handy__rec, .handy__erkannt {
  position: absolute; left: 8px;
  padding: 4px 8px; border-radius: var(--r-pill);
  font: 700 10.5px/1 var(--font-display); color: #fff;
}
.handy__rec { top: 8px; background: rgba(8, 23, 41, .7); }
.handy__erkannt { bottom: 8px; background: var(--blue); }
.handy__knopf {
  display: block; margin-top: 8px; padding: 11px;
  border-radius: 12px; text-align: center;
  background: var(--gray-200); color: var(--navy);
  font: 700 13.5px/1 var(--font-display);
}
.handy__knopf--rot { margin-top: auto; background: var(--danger); color: #fff; }

/* 4 · Leitstelle reagiert: Anruf */
.szene--anruf {
  align-items: center; text-align: center;
  padding-top: 76px;
  background: radial-gradient(120% 70% at 50% 0%, #2B5188 0%, #0F2544 60%, #081729 100%);
}
.handy__avatar { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 14px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--sky); }
.handy__avatar .ico { width: 38px; height: 38px; }
.handy__anrufer { font: 600 26px/1.2 var(--font-display); }
.handy__status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px; padding: 8px 14px 8px 10px;
  border-radius: 14px; text-align: left;
  background: rgba(23, 163, 74, .2); color: #7BE0A0;
  font: 700 11.5px/1.2 var(--font-display);
}
.handy__status .ico { width: 20px; height: 20px; flex: none; }
.szene--anruf.ist-aktiv .handy__status { animation: handy-herein .5s var(--ease) both 1.2s; }
.handy__anruf { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding: 0 22px 20px; }
.handy__rund { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.handy__rund svg { width: 24px; height: 24px; fill: #fff; }
.handy__rund--rot { background: var(--danger); }
.handy__rund--rot svg { transform: rotate(135deg); }
.handy__rund--gruen { background: var(--green); }
.szene--anruf.ist-aktiv .handy__rund--gruen { animation: handy-wippen 1s var(--ease) infinite; }

@keyframes handy-welle { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes handy-herein { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes handy-wippen { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* Handy-Bildschirm des Besuchers: Schritte als vier Reiter über dem Handy,
   der Text des gewählten darunter. */
@media (max-width: 760px) {
  .alarmfilm { grid-template-columns: minmax(0, 1fr); grid-template-areas: "schritte" "handy"; justify-items: center; gap: 22px; }
  .alarmfilm__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .alarmfilm__schritt { display: contents; }
  .alarmfilm__schritt button {
    position: relative;
    flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: 10px 4px; border-radius: var(--r-lg);
    font-size: calc(12.5rem / 16); line-height: 1.25; text-align: center;
    opacity: .65;
    transition: opacity .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  }
  .alarmfilm__schritt.ist-aktiv button { opacity: 1; }
  .alarmfilm:not(.ist-bereit) .alarmfilm__schritt.ist-aktiv button { background: var(--surface); box-shadow: var(--shadow-sm); }
  .alarmfilm.ist-bereit .alarmfilm__schritte::before { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
  .alarmfilm__schritt p {
    grid-row: 2; grid-column: 1 / -1;
    margin: 6px 0 0; text-align: center;
    visibility: hidden; opacity: 0;
  }
  .alarmfilm__schritt.ist-aktiv p, .alarmfilm:not(.ist-bereit) .alarmfilm__schritt:first-child p { visibility: visible; opacity: 1; transition: opacity .35s var(--ease); }
  .handy { width: min(250px, 72vw); }
}
@media (prefers-reduced-motion: reduce) {
  .schaubild__punkt::after, .grundriss__welle, .handy__wellen::before, .handy__wellen::after, .handy__rund--gruen { animation: none !important; }
  .alarmfilm.gleitet .alarmfilm__schritte::before { transition: none; }
}

/* --------------------------------------------------------- Bild mit Text  */
.bildtext { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .bildtext { grid-template-columns: minmax(0, 1fr); } }
.bildtext__bild { position: relative; margin: 0; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow); }
.bildtext__bild img { display: block; width: 100%; height: auto; }
.bildtext__marke {
  position: absolute; bottom: 14px; left: 14px;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(8, 23, 41, .78); color: #fff;
  font: 700 13px/1 var(--font-display); letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bildtext__marke--rechts { left: calc(50% + 14px); }
.bildtext__text h2 { margin: 4px 0 16px; }
.bildtext__text > p { margin: 0; font-size: calc(17rem / 16); line-height: 1.7; color: var(--text-body); }
.bildtext__text > p + p { margin-top: 1em; }

/* Abschnitt „Alarmanlagen können bereits abschrecken“ (Privatkunden, Julian
   05.11.2026): der Werbesatz als Frage am Rand, darunter die Entwicklung der
   Einbrüche als kleine Kurve. Eine Farbe je Säule – den Anteil der
   gescheiterten Versuche zeigt hier bewusst nichts mehr. */
.bildtext__text > p.bildtext__frage {
  margin-top: 1.1em;
  /* ohne blaue Leiste links (Fabio, 11.11.2026) */
  font-family: var(--font-display);
  font-size: calc(19rem / 16); font-weight: 600; line-height: 1.45;
  color: var(--navy);
}
.entwicklung {
  margin: 1.4em 0 0;
  padding: clamp(18px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.entwicklung figcaption strong {
  display: block;
  font-family: var(--font-display); font-size: calc(16rem / 16); font-weight: 600;
  color: var(--text);
}
.entwicklung figcaption span {
  display: block; margin-top: 4px;
  font-size: calc(15rem / 16); line-height: 1.55; color: var(--text-dim);
}
.balken--kompakt {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: auto;
  margin-top: 18px;
}
/* Feste Skala statt Prozent der Zeile: Sonst nehmen Wert und Jahr den
   Säulen Höhe weg, und alle stehen gleich hoch. 100 = 120 px. */
.balken--kompakt .balken__saeule { height: calc(var(--w) * 1.2px); flex-shrink: 0; }
.balken--kompakt .balken__saeule::after { display: none; }
.entwicklung__quelle {
  margin: 12px 0 0;
  font-size: calc(12.5rem / 16); line-height: 1.4; color: var(--text-mute);
}
.bildtext__text > .entwicklung + p { margin-top: 1.2em; }

/* --------------------------------------------------------- Vorstellung    */
/* Wer zu Ihnen kommt: großes, helles Foto der beiden mit Geräten in der Hand,
   daneben ihre eigene Geschichte in einem Satz. Darunter die drei Schritte
   als Karten mit ganzem Foto – auf dem Handy eine Wischreihe, damit die
   Bilder groß bleiben. Persönlich statt Galerie. */
.vorstellung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 900px) { .vorstellung { grid-template-columns: minmax(0, 1fr); } }
.vorstellung__bild { position: relative; margin: 0 0 30px; }
.vorstellung__bild img { display: block; width: 100%; height: auto; border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); }
.vorstellung__seit {
  position: absolute; right: -28px; bottom: -34px;
  max-width: 220px; margin: 0; padding: 16px 20px;
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow);
  font-size: calc(14rem / 16); line-height: 1.4; color: var(--text-dim);
}
.vorstellung__seit strong { display: block; margin-bottom: 2px; font: 700 1.55rem/1.15 var(--font-display); color: var(--navy); }
/* Ab Tablet steht das Foto über die ganze Breite – das Kärtchen bleibt drin. */
@media (max-width: 900px) { .vorstellung__seit { right: 14px; } }
@media (max-width: 520px) {
  /* Rechts unten läge das Bedienteil darunter – links ist Platz. */
  .vorstellung__seit { left: 14px; right: auto; max-width: 170px; padding: 11px 14px; font-size: calc(12.5rem / 16); bottom: -24px; }
  .vorstellung__seit strong { font-size: 1.2rem; }
}
.vorstellung__text h2 { margin: 4px 0 24px; }
.vorstellung__zitat { margin: 0 0 30px; }
.vorstellung__zitat p { margin: 0; font: 600 clamp(1.15rem, 1.6vw, 1.32rem)/1.5 var(--font-display); color: var(--text); }
.vorstellung__zitat footer { margin-top: 10px; font-size: calc(14.5rem / 16); color: var(--text-dim); }
.vorstellung__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0; }
.vorstellung__telefon {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 1.12rem/1 var(--font-display); color: var(--text); text-decoration: none;
  transition: color .2s var(--ease);
}
/* Kreis als eigenes Element: Innenabstand direkt am SVG schneidet in
   Safari den Hörer an. */
.vorstellung__hoerer {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); color: #fff;
}
.vorstellung__hoerer svg { width: 20px; height: 20px; overflow: visible; }
.vorstellung__telefon:hover { color: var(--blue); }
.vorstellung__schritte {
  counter-reset: schritt;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: clamp(64px, 7vw, 96px) 0 0; padding: 0; list-style: none;
}
.vorstellung__schritte li {
  counter-increment: schritt;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.vorstellung__schritte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Die Nummer sitzt auf der Kante zwischen Foto und Text. */
.vorstellung__schritte div { position: relative; padding: 34px clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 28px); }
.vorstellung__schritte div::before {
  content: counter(schritt);
  position: absolute; top: -21px; left: clamp(20px, 2.2vw, 26px);
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font: 700 17px/1 var(--font-display);
  box-shadow: 0 0 0 4px var(--surface);
}
.vorstellung__schritte h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.vorstellung__schritte p { margin: 0; font-size: calc(15.5rem / 16); line-height: 1.55; color: var(--text-dim); }

/* --------------------------------------------------- Leistungsübersicht  */
/* Neu nach Julians Vorgaben (27.10.2026): Einleitung, vier Bereiche,
   Objektarten, Warum wir, Terminanfrage. */
.hero__text + .hero__text { margin-top: 12px; }
/* Drei Absätze Einleitung: breiter laufen lassen, damit die Knöpfe auf
   üblichen Bildschirmen noch ohne Scrollen zu sehen sind. */
.hero--lang .hero__text { max-width: 60ch; }

/* Vier Bereiche: zwei Absätze je Karte, darunter ein eigener Knopf. */
.bereiche .weg__text > p + p { margin-top: 10px; }
.bereiche .weg__link .btn { width: 100%; justify-content: center; text-align: center; }
.bereiche__hinweis { margin-top: clamp(28px, 3.4vw, 40px); }
@media (max-width: 860px) { .bereiche .weg__bild { aspect-ratio: 2 / 1; } }

/* Objektarten: Privat und Gewerbe gleich gewichtet nebeneinander – beide
   Karten zwei Reihen hoch (2 × 1 und 3 + 2). */
.objekte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 1040px; margin-inline: auto;
}
@media (max-width: 860px) { .objekte { grid-template-columns: 1fr; } }
.objekte__gruppe {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.objekte__gruppe h3 {
  margin: 0 0 16px;
  font-size: calc(13rem / 16); letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
.objekte__gruppe ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.objekte__gruppe:first-child ul { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .objekte__gruppe ul, .objekte__gruppe:first-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Auf dem Handy passt „Einfamilienhaus“ nicht in eine halbe Spalte. */
@media (max-width: 520px) {
  .objekte__gruppe ul, .objekte__gruppe:first-child ul { grid-template-columns: 1fr; }
}
.objekte__gruppe li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r);
  background: var(--gray-50);
  font-family: var(--font-display); font-weight: 600; font-size: calc(15.5rem / 16); line-height: 1.3; color: var(--text);
}
.objekte__gruppe .ico { width: 24px; height: 24px; flex: none; color: var(--blue); }
/* Weg zu den Seiten für Privatkunden und Unternehmen (seit 05.11.2026). */
.objekte__mehr { margin: 18px 0 0; font-size: calc(15rem / 16); }

/* Warum Konrad & Konrad */
.vorteile__titel { margin: 22px 0 0; font-family: var(--font-display); font-weight: 700; color: var(--text); }
.vorteile { margin-top: 12px; }
.vorteile__fuss { margin: 18px 0 0; font-size: calc(14.5rem / 16); line-height: 1.55; color: var(--text-mute); }

/* Terminanfrage: Text links, Formular als weiße Karte rechts. */
.termin__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
@media (max-width: 900px) { .termin__raster { grid-template-columns: 1fr; } }
.termin .lede + .lede { margin-top: 12px; }
.termin__gebiet {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  margin: 24px 0 0; font-size: calc(15.5rem / 16); line-height: 1.55; color: var(--on-dark-dim);
}
.termin__gebiet .ico { width: 22px; height: 22px; color: var(--sky); margin-top: 1px; }
.termin__ruf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 28px 0 0; color: #fff; font-weight: 600; }
.termin__form {
  position: relative;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow);
}
.termin__form h3 { margin: 0 0 4px; font-size: clamp(1.2rem, 1.7vw, 1.4rem); color: var(--text); }
.termin__form h3 span { white-space: nowrap; }
.termin__form .field textarea { min-height: 84px; }
@media (max-width: 520px) { .termin__form .form__row { grid-template-columns: 1fr; } }
/* Aus kontakt.css, das diese Seite nicht lädt. */
.termin__form .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.termin__form .field input.is-invalid,
.termin__form .field textarea.is-invalid { border-color: var(--danger); }
.termin__form .consent input.is-invalid + span { color: var(--danger); }

/* ---------------------------------------------------- Videotechnik ----- */
/* Für wen: Gewerbe breiter als Privat (Julian: Gewerbe stärker zeigen),
   beide Bilder gleich hoch, damit die Texte auf einer Linie beginnen. */
@media (min-width: 861px) {
  .wege--gewerbe { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .wege--gewerbe .weg__bild { aspect-ratio: auto; height: clamp(220px, 21vw, 290px); }
}
.wege--gewerbe .weg__text > p + p { margin-top: 10px; }
.split .hakenliste + p { margin-top: 18px; color: var(--text-dim); }
/* Schild zur Einsatzkarte: Das Gebiet endet nicht am Kartenrand. Am Desktop
   rückt es unten in die Karte, auf dem Handy steht es darunter – dort wäre
   es Saarbrücken und Pirmasens im Weg. */
.karte-weiter { position: relative; z-index: 2; display: flex; justify-content: center; margin: 14px 0 0; }
@media (min-width: 701px) { .karte-weiter { margin-top: -68px; } }
.linienkarte__weiter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--navy); color: #fff; box-shadow: 0 4px 14px rgba(15, 37, 68, .18);
  font-family: var(--font-display); font-weight: 600; font-size: calc(14.5rem / 16); line-height: 1.2;
}
.linienkarte__weiter svg { width: 15px; height: 15px; color: var(--sky); flex: none; }
#rueckruf .lede + .lede { margin-top: 12px; }
/* Welle nach dem dunklen Rückruf-Abschnitt: ohne den Versatz blieb an der
   Naht eine helle Haarlinie stehen. */
.section--dark + .section--alt::before { top: -2px; }
.nowrap { white-space: nowrap; }

/* Kontaktblock statt Sicherheitscheck ({{KONTAKT}}, Unternehmen): Spalten
   und Formular aus kontakt.css, hier nur der Rückruf-Knopf. */
.kontakt__knopf { margin: 14px 0 0; }
.kontakt__knopf .btn svg { width: 18px; height: 18px; }

/* Rückruf-Kasten statt Sicherheitscheck ({{RUECKRUF}}, Gewerbe): Der Knopf
   öffnet das Rückruf-Fenster der Hülle (main.js, data-rueckruf-oeffnen). */
.rueckruf-kasten {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 48px);
  border-radius: var(--r-2xl);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}
.rueckruf-kasten h3 { margin: 0 0 10px; font-size: clamp(calc(22rem / 16), 2.4vw, calc(28rem / 16)); }
.rueckruf-kasten p { max-width: 58ch; margin: 0 auto 22px; color: var(--text-body); }
.rueckruf-kasten .btn { display: inline-flex; align-items: center; gap: 10px; }
.rueckruf-kasten .btn svg { width: 18px; height: 18px; }
.rueckruf-kasten .rueckruf-kasten__notiz { margin: 14px auto 0; font-size: calc(14rem / 16); }
@media (max-width: 600px) { .rueckruf-kasten .btn { width: 100%; justify-content: center; } }