/* =========================================================================
   Touch Clean Objektservice GmbH: Bausteine der Stadtseiten
   Ergänzt styles.css (Landingpage Rhein-Main). Gleiche Tokens, keine neuen Farben.
   Sortiert nach Bauteil, in Seitenreihenfolge. Nur max-width-Abfragen aus dem
   Breakpoint-Satz der LP (1100 / 960 / 760 / 340).
   ========================================================================= */

/* ---------- Hero: mobil eigenes Hochformat, läuft unten in Navy aus ------- */
@media (max-width:760px){
  .hero{background:var(--navy)}
  .hero__bild{bottom:auto;height:min(100svh,900px)}
  .hero__bild::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(rgba(30,58,138,0),var(--navy))}
  .hero__bild img{object-position:50% 0%}
}

/* ---------- Brotkrumen im Hero -------------------------------------------- */
.krumen{margin-bottom:1.1rem;font-size:.8438rem;color:rgba(255,255,255,.66)}
.krumen ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.krumen li{display:flex;align-items:center;gap:.35rem}
.krumen li+li::before{content:"";width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.7}
.krumen a{display:inline-block;padding-block:.6rem;margin-block:-.6rem;text-decoration:none;color:rgba(255,255,255,.82)}
.krumen a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.krumen [aria-current]{color:#fff}
@media (max-width:760px){
  .krumen{margin-bottom:.8rem}
}

/* ---------- Formular-Kacheln (Picks) --------------------------------------- */
.pick{padding-inline:.7rem}
.hero .pick{padding-inline:.5rem;font-size:.8125rem}
@media (max-width:960px){
  .hero .pick{padding-inline:.7rem;font-size:inherit}
}
@media (max-width:340px){
  .pick,.hero .pick{font-size:.8125rem}
}

/* ---------- Steckbrief: Das Wichtigste auf einen Blick -------------------- */
.steckbrief__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.steckbrief__antwort{margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:52ch}
.fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fakt{padding:1.15rem 1.25rem;border-radius:var(--r-card);background:var(--surface)}
.fakt dt{display:flex;align-items:center;gap:.55rem;font-size:.8438rem;font-weight:600;color:var(--muted)}
.fakt dt svg{color:var(--accent);flex:none}
.fakt dd{margin:.4rem 0 0;font-size:1rem;font-weight:500;line-height:1.45;color:var(--ink);text-wrap:pretty}
.fakt dd small{display:block;margin-top:.2rem;font-size:.8438rem;font-weight:400;color:var(--muted);text-wrap:pretty}
@media (max-width:1100px){
  .steckbrief__raster{gap:44px}
}
@media (max-width:960px){
  .steckbrief__raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .fakten{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Einsatzgebiet: Bezirke und Notiz ------------------------------ */
.bezirke{display:grid;gap:16px}
.bezirk{padding:1.3rem 1.4rem;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow)}
.bezirk h3{font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.bezirk__teile{margin-top:.35rem;font-size:.875rem;color:var(--muted);line-height:1.5}
.bezirk p:not(.bezirk__teile){margin-top:.6rem;font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.lokal__notiz{margin-top:1.6rem;padding:1.15rem 1.25rem;border-radius:var(--r-card);background:var(--accent-soft);color:var(--ink-2);font-size:.9375rem;line-height:1.6}
.lokal__notiz b{color:var(--ink);font-weight:600}

/* ---------- Chat: Kontrast Kopfzeile, Datum, Dateiblase ------------------- */
.wa-kopf__wer span{color:#157a40}
.wa-tag{color:#3b4a53}
.blase--datei small{color:#4f5d66}

/* ---------- Fußzeile ------------------------------------------------------- */
.fuss__unten nav{align-items:center}
.fuss__unten button{min-height:44px;padding:.6rem 0}
.fuss__hinweis{font-size:.8125rem;color:rgba(255,255,255,.6)}

/* ---------- Pop-up und Kontaktknopf --------------------------------------- */
.popup__zu{width:44px;height:44px}
.fab{z-index:940}

/* ---------- Sehr schmale Geräte ------------------------------------------- */
@media (max-width:340px){
  .btn{padding-inline:.75rem;font-size:.875rem;gap:.4rem}
}
/* Delta R1 (M-03): Fußlinks mit 44 px Tippfläche */
.fuss__unten nav a{display:inline-flex;align-items:center;min-height:44px}
/* Recht-Delta J-17: KI-Kennzeichnung direkt am Hero-Bild */
.hero__ki{position:absolute;right:16px;bottom:12px;z-index:2;padding:.2rem .55rem;border-radius:6px;background:rgba(11,18,32,.62);color:rgba(255,255,255,.88);font-size:.6875rem;line-height:1.4;pointer-events:none}

/* Formular: Kennzeichnung optionaler Felder (C-01) */
.feld__opt{font-weight:400}