/* MAE TOZAR – gemeinsame Bausteine (Startseite und Leistungsseiten):
   Chips, Segment-Schalter, Plus/Chevron, Marken, Frage-Karten, Richtwert-Schwebeknopf und -Bubble / Bottom-Sheet.
   Werte nur aus css/tokens.css. */

/* ---------- Abschnitte ---------- */
.abschnitt { position: relative; padding-block: var(--abschnitt-y); background: var(--grund); scroll-margin-top: 0; }
.nebel { background: var(--nebel); }
.leistungen { padding-top: 96px; }
.h2 { font: 600 clamp(40px, 4.4vw, 64px)/0.92 var(--display); text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }
.abschnitt-satz { margin-top: 16px; max-width: 62ch; font-size: 18px; color: var(--tinte-leise); }
.kontakt { position: relative; overflow: clip; padding-top: var(--abschnitt-y); background: var(--nacht); color: var(--nacht-schrift); }
.pill-nacht { background: transparent; color: var(--nacht-schrift); border-color: var(--nacht-leise); }
@media (hover: hover) { .pill-nacht:hover { border-color: var(--nacht-schrift); } }
/* ---------- Fuß ---------- */
.fuss { position: relative; padding-top: 120px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.fuss-satz { font: 600 28px/1 var(--display); text-transform: uppercase; color: var(--nacht-schrift); }
.fuss-marke {
  margin-top: 16px; font: 700 clamp(56px, 13.5vw, 220px)/0.9 var(--marke); letter-spacing: -0.04em; white-space: nowrap; color: var(--nacht-schrift);
}
.fuss-marke .a { color: var(--marine-auf-nacht); }
.fuss-marke { width: max-content; max-width: 100%; }
.fuss-marke .zusatz { display: flex; justify-content: space-between; margin-top: 0.2em; padding-inline: 0.03em 0.02em; font: 600 max(11px, 0.2em)/1 var(--text); letter-spacing: 0; color: var(--nacht-schrift); text-transform: uppercase; }
.fuss-links { margin-top: 28px; font-size: 15px; color: var(--nacht-leise); }
.fuss-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--nacht-leise); }

@media (max-width: 767px) {
  .h2 { font-size: 36px; }
  .abschnitt-satz { font-size: 16px; }
  .fuss { padding-top: 96px; }
  .fuss-satz { font-size: 22px; }
}

/* ---------- Chips ---------- */
.chip, .chip-label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-rund);
  font: 600 15px/1.1 var(--text); text-decoration: none; white-space: nowrap;
  background: var(--karte); color: var(--tinte); border: 1.5px solid var(--linie); box-shadow: var(--s-1);
  transition: background-color var(--d-1) var(--kurve), border-color var(--d-1) var(--kurve), color var(--d-1) var(--kurve), transform var(--d-1) var(--kurve);
}
.chip:active { transform: scale(var(--druck)); }
.chip[aria-pressed="true"] { background: var(--marine-tint); border-color: var(--marine); color: var(--marine); }
.chip-link { color: var(--marine); }
.chip-link::after { content: "→"; font-weight: 600; }
@media (hover: hover) { .chip:hover { border-color: var(--marine); } }
.chip-label {
  min-height: 32px; padding: 0 14px; border: 0; box-shadow: none; background: var(--marine-tint); color: var(--marine);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}

/* Auswahl-Chips (Radio/Checkbox im Label) */
.chip-wahl { position: relative; display: inline-flex; }
.chip-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-wahl span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-rund);
  background: var(--karte); border: 1.5px solid var(--linie); box-shadow: var(--s-1); color: var(--tinte);
  font: 600 15px/1.1 var(--text); white-space: nowrap; pointer-events: none;
  transition: background-color var(--d-1) var(--kurve), border-color var(--d-1) var(--kurve), color var(--d-1) var(--kurve);
}
.chip-wahl input:checked + span { background: var(--marine-tint); border-color: var(--marine); color: var(--marine); }
.chip-wahl input:checked + span::before {
  content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg);
}
.chip-wahl input:focus-visible + span { outline: 2px solid var(--aktiv); outline-offset: 3px; }
@media (hover: hover) { .chip-wahl:hover span { border-color: var(--marine); } }

/* ---------- Segment-Schalter ---------- */
.segment {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  margin: 0; padding: 4px; border: 0; border-radius: var(--r-3); background: var(--nebel); min-width: 0;
}
.segment-zelle { position: relative; z-index: 1; display: flex; }
.segment-zelle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment-zelle > span {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 14px;
  border-radius: var(--r-2); font: 600 15px/1.15 var(--text); text-align: center; color: var(--tinte-leise); pointer-events: none;
  transition: color var(--d-2) var(--kurve);
}
.segment-zelle > span small { font-weight: 400; font-size: 13px; }
.segment-zelle input:checked + span { color: var(--marine); }
.segment-zelle input:focus-visible + span { outline: 2px solid var(--aktiv); outline-offset: -2px; }
/* Ohne JS: gewählte Zelle selbst weiß; mit JS gleitet der Zeiger (translateX/Y, 260 ms) */
.segment:not(.mit-zeiger) .segment-zelle input:checked + span { background: var(--karte); box-shadow: var(--s-1); }
.segment-zeiger {
  position: absolute; left: 0; top: 0; z-index: 0; width: var(--zw, 0); height: var(--zh, 0); border-radius: var(--r-2);
  background: var(--karte); box-shadow: var(--s-1), inset 0 0 0 1.5px rgb(30 107 230 / .35);
  transform: translate(var(--zx, 0), var(--zy, 0)); opacity: 0;
}
.segment.mit-zeiger .segment-zeiger { opacity: 1; }
.segment.gleitet .segment-zeiger { transition: transform var(--d-2) var(--kurve), width var(--d-2) var(--kurve); }
.segment[data-n="4"], .segment[data-n="5"], .segment[data-n="6"] { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .segment[data-n="4"], .segment[data-n="5"], .segment[data-n="6"] { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Plus / Chevron ---------- */
.plus, .chevron {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--nebel); color: var(--marine);
  transition: transform var(--d-2) var(--kurve), background-color var(--d-2) var(--kurve);
}
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; }
.plus::after { transform: rotate(90deg); }
.chevron::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -6px 0 0 -4px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------- Marke auf Bildern ---------- */
.marke {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 6px 10px; border-radius: var(--r-rund);
  background: rgb(255 255 255 / .92); color: var(--tinte); box-shadow: var(--s-1);
  font: 600 13px/1 var(--text); letter-spacing: 0.06em; text-transform: uppercase;
}
.bild-folgt { display: grid; place-items: center; width: 100%; height: 100%; background: var(--nebel); color: var(--tinte-leise); font: 600 14px/1 var(--text); }

/* ---------- Frage-Karten ---------- */
.frage { background: var(--karte); border-radius: var(--r-3); box-shadow: var(--s-1); transition: box-shadow var(--d-2) var(--kurve); }
.frage + .frage { margin-top: 12px; }
.frage[open] { box-shadow: var(--s-2); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 20px 14px 24px;
  list-style: none; cursor: pointer; font: 600 19px/1.3 var(--text); letter-spacing: -0.01em; border-radius: var(--r-3);
}
.frage summary::-webkit-details-marker { display: none; }
.frage[open] .plus { transform: rotate(45deg); }
.frage .antwort { padding: 0 24px 24px; max-width: 68ch; color: var(--tinte-leise); }
.frage .antwort a { color: var(--marine); }
.frage .antwort .textlink { margin-top: 8px; }
.frage[open] .antwort { animation: einblenden var(--d-2) var(--kurve); }
@keyframes einblenden { from { opacity: 0; transform: translateY(var(--weg-1)); } }
@media (max-width: 767px) {
  .frage summary { font-size: 17px; padding: 12px 14px 12px 18px; }
  .frage .antwort { padding: 0 18px 20px; font-size: 16px; }
}

/* ---------- Richtwert: Schwebeknopf ---------- */
.rw-knopf {
  position: fixed; z-index: 45; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px; border-radius: var(--r-rund);
  background: var(--marine); color: #fff; box-shadow: var(--s-3); font: 600 16px/1 var(--text); white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity var(--d-3) var(--kurve), transform var(--d-3) var(--kurve), visibility 0s linear var(--d-3), background-color var(--d-2) var(--kurve);
}
html.fab-frei:not(.fab-weg):not(.rw-offen) .rw-knopf { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rw-knopf:active { transform: scale(var(--druck)); }
@media (hover: hover) { .rw-knopf:hover { background: var(--marine-tief); } }
.ic-rechner { position: relative; width: 18px; height: 22px; border: 2px solid currentColor; border-radius: 4px; flex: none; }
.ic-rechner::before { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 5px; border-radius: 1px; background: currentColor; }
.ic-rechner::after { content: ""; position: absolute; left: 3px; top: 10px; width: 3px; height: 3px; border-radius: 1px; background: currentColor; box-shadow: 5px 0 currentColor, 0 5px currentColor, 5px 5px currentColor; }
.rw-knopf-beispiel { padding: 4px 8px; border-radius: var(--r-rund); background: rgb(255 255 255 / .16); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 767px) {
  .rw-knopf { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 52px; padding: 0 18px 0 14px; font-size: 15px; }
}

/* ---------- Richtwert: Fenster (Desktop) / Bottom-Sheet (Handy) ---------- */
.rw-abdunkeln { position: fixed; inset: 0; z-index: 59; background: rgb(var(--schatten-farbe) / .4); opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--kurve), visibility 0s linear var(--d-3); }
.rw-fenster {
  position: fixed; z-index: 60; right: 24px; bottom: 96px; width: 420px; max-height: min(720px, calc(100svh - 120px));
  display: flex; flex-direction: column; border-radius: var(--r-4); background: var(--karte); color: var(--tinte); box-shadow: var(--s-3);
  transform-origin: 100% 100%; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.92);
  transition: opacity var(--d-2) var(--kurve), transform var(--d-2) var(--kurve), visibility 0s linear var(--d-2);
}
.rw-fenster.offen { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-3) var(--kurve), transform var(--d-3) var(--kurve), visibility 0s; }
.rw-griff { display: none; }
.rw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 8px 24px; }
.rw-titel { font: 600 22px/1.2 var(--text); letter-spacing: -0.01em; outline: none; }
.rw-zu { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--nebel); }
.rw-zu::before, .rw-zu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: var(--tinte); transform: rotate(45deg); }
.rw-zu::after { transform: rotate(-45deg); }
.rw-mitte { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 20px; }
.rw-einleitung { font-size: 15px; color: var(--tinte-leise); }
.rw-station { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.rw-label { display: block; margin-bottom: 10px; font: 600 13px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-leise); padding: 0; }
.rw-gruppe + .rw-gruppe { margin-top: 10px; }
.rw-gruppe-label { margin-bottom: 6px; font: 600 13px/1.2 var(--text); color: var(--tinte-leise); }
.rw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-chips .chip-wahl span { min-height: 40px; padding: 0 14px; font-size: 14px; }

.rw-flaeche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rw-zahl { display: flex; align-items: baseline; gap: 6px; }
.rw-zahl-feld {
  width: 5.2ch; padding: 0 2px; border: 0; border-bottom: 2px dashed var(--linie); border-radius: 0; background: none;
  font: 600 44px/1.05 var(--display); font-variant-numeric: tabular-nums; color: var(--tinte);
}
.rw-zahl-feld:focus-visible { outline: none; border-bottom-color: var(--aktiv); border-bottom-style: solid; }
.rw-zahl-feld[aria-invalid="true"] { border-bottom-color: var(--marine); }
.rw-einheit { font: 600 22px/1 var(--display); color: var(--tinte-leise); }
.rw-schritte { display: flex; gap: 8px; }
.rw-schritt { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--karte); box-shadow: var(--s-1), inset 0 0 0 1.5px var(--linie); color: var(--marine); font: 600 22px/1 var(--text); transition: transform var(--d-1) var(--kurve); }
.rw-schritt:active { transform: scale(var(--druck)); }
.rw-regler { position: relative; margin-top: 14px; }
.rw-regler-feld {
  --fuell: 50%;
  display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.rw-regler-feld::-webkit-slider-runnable-track { height: 8px; border-radius: var(--r-rund); background: linear-gradient(90deg, var(--aktiv) 0 var(--fuell), var(--nebel) var(--fuell) 100%); }
.rw-regler-feld::-moz-range-track { height: 8px; border-radius: var(--r-rund); background: var(--nebel); }
.rw-regler-feld::-moz-range-progress { height: 8px; border-radius: var(--r-rund); background: var(--aktiv); }
.rw-regler-feld::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 0; border-radius: 50%;
  background: var(--karte); box-shadow: var(--s-2), 0 0 0 1px var(--linie); transition: transform var(--d-1) var(--kurve);
}
.rw-regler-feld::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--karte); box-shadow: var(--s-2), 0 0 0 1px var(--linie); }
.rw-regler.zieht .rw-regler-feld::-webkit-slider-thumb { transform: scale(1.15); }
.rw-regler.zieht .rw-regler-feld::-moz-range-thumb { transform: scale(1.15); }
.rw-regler-feld:focus-visible { outline: none; }
.rw-regler-feld:focus-visible::-webkit-slider-thumb { box-shadow: var(--s-2), 0 0 0 3px var(--aktiv); }
.rw-regler-feld:focus-visible::-moz-range-thumb { box-shadow: var(--s-2), 0 0 0 3px var(--aktiv); }
.rw-marken { position: absolute; left: 14px; right: 14px; top: 26px; height: 4px; pointer-events: none; }
.rw-marke { position: absolute; top: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--tinte-leise); opacity: .5; }
.rw-faehnchen {
  position: absolute; bottom: 40px; left: var(--pos, 50%); translate: -50% 0; padding: 6px 10px; border-radius: var(--r-1);
  background: var(--tinte); color: #fff; font: 600 14px/1 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity var(--d-1) var(--kurve), transform var(--d-1) var(--kurve); pointer-events: none;
}
.rw-regler.zieht .rw-faehnchen { opacity: 1; transform: none; }
.rw-fehler { min-height: 0; margin-top: 6px; font: 600 14px/1.4 var(--text); color: var(--marine); }
.rw-fehler:empty { display: none; }
.rw-optionen .segment { display: grid; width: 100%; }
/* Häufigkeit Unterhaltsreinigung (Miro 2026-10-23): Reihe „im Monat“, darunter „pro Woche“, „einmalig“ über die ganze Breite – auch auf dem Handy 3 Spalten */
.rw-optionen .segment[data-n="7"] { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.rw-optionen .segment[data-n="7"] .segment-zelle:last-of-type { grid-column: 1 / -1; }
.rw-optionen .rw-station { margin-top: 18px; }
.rw-optionen.wechselt { animation: einblenden var(--d-2) var(--kurve); }
.rw-ohne { margin-top: 22px; padding: 16px; border-radius: var(--r-3); background: var(--marine-tint); font-size: 16px; }
.rw-ohne .pill { margin-top: 12px; }

.rw-fuss { flex: none; padding: 16px 24px 20px; border-top: 1px solid var(--linie); background: var(--karte); border-radius: 0 0 var(--r-4) var(--r-4); }
.rw-beispiel { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.rw-band {
  flex: none; display: inline-flex; padding: 4px; border-radius: var(--r-rund);
  background: repeating-linear-gradient(45deg, var(--beispiel) 0 6px, #fff 6px 12px);
}
.rw-plakette { padding: 5px 10px; border-radius: var(--r-rund); background: #fff; color: var(--marine); font: 600 13px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
.rw-hinweis { font-size: 13px; line-height: 1.4; color: var(--tinte-leise); }
.rw-mit-zahl { display: grid; justify-items: start; }
.rw-mit-zahl .rw-periode { white-space: nowrap; }
.rw-ergebnis-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rw-ergebnis-label { font: 600 13px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-leise); }
.rw-spanne { font: 600 44px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--tinte); white-space: nowrap; }
.rw-periode {
  display: inline-flex; margin-top: 8px; padding: 6px 12px; border-radius: var(--r-rund); background: var(--marine-tint); color: var(--marine);
  font: 600 15px/1.2 var(--text);
}
.rw-individuell-titel { font: 600 20px/1.2 var(--text); }
.rw-individuell-satz { margin-top: 4px; font-size: 15px; color: var(--tinte-leise); }
.rw-rechnung { margin-top: 10px; font-size: 14px; }
.rw-rechnung summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--marine); }
.rw-rechnung ol { padding-left: 18px; list-style: decimal; color: var(--tinte-leise); }
.rw-posten { display: grid; gap: 4px; margin-top: 8px; font-size: 14px; }
.rw-posten div { display: flex; justify-content: space-between; gap: 12px; }
.rw-posten dt { color: var(--tinte-leise); }
.rw-posten dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.rw-aktionen { display: grid; gap: 4px; margin-top: 14px; }
.rw-ende { display: grid; justify-items: start; gap: 2px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linie); }
.rw-ende .rw-rechnung { margin-top: 0; width: 100%; }
.rw-aktionen .pill { width: 100%; }
.rw-aktionen .textlink { justify-self: center; }
.rw-mail-hinweis { font-size: 13px; color: var(--tinte-leise); }

@media (max-width: 767px) {
  .rw-fenster {
    left: 0; right: 0; bottom: 0; width: auto; max-height: 88svh; border-radius: var(--r-4) var(--r-4) 0 0;
    transform: translateY(100%); opacity: 1; transform-origin: 50% 100%;
    transition: transform var(--d-2) var(--kurve), visibility 0s linear var(--d-2);
  }
  .rw-fenster.offen { transform: translateY(var(--zug, 0px)); transition: transform var(--d-3) var(--kurve), visibility 0s; }
  .rw-fenster.zieht { transition: none; }
  .rw-fuss { border-radius: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .rw-griff { display: block; width: 36px; height: 5px; margin: 10px auto 0; border-radius: var(--r-rund); background: var(--linie); }
  .rw-kopf { padding-top: 6px; touch-action: none; }
  .rw-griff-zone { touch-action: none; }
  .rw-mitte { padding: 0 20px 16px; }
  .rw-fuss { padding-inline: 20px; }
  .rw-gruppe .rw-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .rw-gruppe .rw-chips::-webkit-scrollbar { display: none; }
  .rw-spanne { font-size: 36px; }
  .rw-fuss { padding-top: 12px; }
  .rw-beispiel { margin-bottom: 8px; align-items: center; }
  .rw-periode { margin-top: 4px; padding: 4px 10px; font-size: 14px; }
  .rw-aktionen { margin-top: 10px; }
  .rw-einleitung { font-size: 14px; }
  .rw-station { margin-top: 16px; }
  html.rw-modal .rw-abdunkeln { opacity: 1; visibility: visible; transition: opacity var(--d-3) var(--kurve), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-fenster, .rw-fenster.offen { transform: none; }
  .rw-fenster { opacity: 0; }
  .rw-fenster.offen { opacity: 1; }
}