/* ==========================================================================
   Chat-Oberflaeche. Setzt tokens.css voraus.

   Haltung: kein Bubble-Spielzeug. Ein aufgeraeumtes Formular, das sich wie ein
   Gespraech anfuehlt. Grosse Tippflaechen, der Traffic kommt vom Handy.
   ========================================================================== */

html, body { height: 100%; }

body.chat {
  background: var(--rf-flaeche-ruhig);
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  height: 100dvh;
  max-width: 640px;
  margin-inline: auto;
  background: var(--rf-weiss);
  box-shadow: 0 0 0 1px var(--rf-linie);
}

@media (min-width: 680px) {
  body.chat { padding-block: var(--rf-a-6); }
  .app {
    height: calc(100dvh - 2 * var(--rf-a-6));
    border-radius: var(--rf-r-l);
    overflow: hidden;
    box-shadow: var(--rf-schatten-2);
  }
}

/* ------------------------------------------------------------- Kopfzeile */

.app__kopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border-bottom: 1px solid var(--rf-linie);
  background: var(--rf-weiss);
}

.zurueck {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rf-text-leise);
  cursor: pointer;
  transition: background-color var(--rf-tempo), color var(--rf-tempo);
}

.zurueck:hover { background: var(--rf-grau-100); color: var(--rf-text); }
.zurueck[hidden] { display: none; }

.app__logo {
  flex: none;
  height: 38px;
  width: auto;
}

.app__marke { flex: 1; min-width: 0; }

.app__name {
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-s);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.app__name span { color: var(--rf-rot); }

.app__stand {
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  line-height: 1.2;
}

.app__schliessen {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--rf-text-leise);
  text-decoration: none;
}

.app__schliessen:hover { background: var(--rf-grau-100); color: var(--rf-text); }

/* Fortschritt */

.fortschritt {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 3px;
  background: var(--rf-grau-100);
}

.fortschritt__balken {
  height: 100%;
  width: 0;
  background: var(--rf-rot);
  transition: width 420ms cubic-bezier(0.2, 0, 0, 1);
}

/* --------------------------------------------------------------- Verlauf */

.app__buehne {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rf-a-5) var(--rf-a-4) var(--rf-a-6);
  scroll-behavior: smooth;
}

.verlauf {
  display: grid;
  gap: var(--rf-a-4);
  margin-bottom: var(--rf-a-6);
}

.verlauf:empty { display: none; }

.verlauf__paar { display: grid; gap: var(--rf-a-3); }

/* ---------------------------------------------------------- Sprechblasen

   Der Bot spricht links in Markenrot, der Kunde antwortet rechts in Weiss
   mit rotem Rand. Beide Blasen haben genau eine eckige Ecke, und zwar die
   zum Sprecher hin. Das ist der uebliche Kniff, der aus zwei Kaesten ein
   Gespraech macht, ohne dass man eine Spitze zeichnen muss.
*/

.blase {
  max-width: 85%;
  padding: var(--rf-a-3) var(--rf-a-4);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.blase--bot {
  justify-self: start;
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 6px rgba(189, 18, 18, 0.28), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.blase--bot a { color: #fff; text-decoration: underline; }

.blase--kunde {
  justify-self: end;
  text-align: left;
  background: var(--rf-weiss);
  color: var(--rf-text);
  border: 2px solid var(--rf-rot);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  font-weight: 600;
}

.verlauf__frage {
  max-width: 85%;
  justify-self: start;
  padding: var(--rf-a-3) var(--rf-a-4);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 2px 6px rgba(189, 18, 18, 0.22), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: var(--rf-t-s);
  line-height: 1.5;
  opacity: 0.72;
}

.verlauf__antwort {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--rf-a-2);
  max-width: 85%;
  padding: var(--rf-a-2) var(--rf-a-4);
  background: var(--rf-weiss);
  color: var(--rf-text);
  border: 2px solid var(--rf-rot);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-size: var(--rf-t-s);
  font-weight: 600;
}

/* --------------------------------------------------- RatzFatz schreibt ... */

.tippt {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--rf-a-2);
  margin-bottom: var(--rf-a-3);
  padding: var(--rf-a-2) var(--rf-a-4);
  background: var(--rf-grau-100);
  border-radius: 18px 18px 18px 4px;
  color: var(--rf-text-leise);
  font-size: var(--rf-t-xs);
}

.tippt__punkte { display: inline-flex; gap: 3px; }

.tippt__punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rf-rot);
  animation: tippen 1.2s infinite ease-in-out both;
}

.tippt__punkt:nth-child(2) { animation-delay: 0.16s; }
.tippt__punkt:nth-child(3) { animation-delay: 0.32s; }

@keyframes tippen {
  0%, 70%, 100% { transform: scale(0.7); opacity: 0.45; }
  35%           { transform: scale(1);   opacity: 1; }
}

/* Aktuelle Frage */

.frage { animation: auftauchen 320ms cubic-bezier(0.2, 0, 0, 1) both; }

@keyframes auftauchen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.frage__text {
  justify-self: start;
  max-width: 85%;
  padding: var(--rf-a-4) var(--rf-a-5);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 3px 10px rgba(189, 18, 18, 0.30), 0 1px 3px rgba(0, 0, 0, 0.10);
  font-size: var(--rf-t-l);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.frage__text a { color: #fff; text-decoration: underline; }

.frage__text p { margin-bottom: var(--rf-a-3); }
.frage__text p:last-child { margin-bottom: 0; }

.frage__klein {
  font-size: var(--rf-t-s);
  /* Steht in der roten Blase, deshalb helles Weiss statt Grau. */
  color: rgba(255, 255, 255, 0.82);
}

.frage__rest {
  display: inline-block;
  margin-top: var(--rf-a-4);
  padding: var(--rf-a-1) var(--rf-a-3);
  border-radius: var(--rf-r-pill);
  /* Sitzt jetzt unter der roten Blase, nicht mehr darin. */
  background: rgba(189, 18, 18, 0.10);
  color: var(--rf-rot);
  font-size: var(--rf-t-xs);
  font-weight: 600;
}

/* ---------------------------------------------------------- Antwortbereich */

.app__antwort {
  border-top: 1px solid var(--rf-linie);
  background: var(--rf-weiss);
  padding: var(--rf-a-4);
  display: grid;
  gap: var(--rf-a-3);
  max-height: 60dvh;
  overflow-y: auto;
}

/* Impressum und Datenschutz stehen auch im Chat ganz unten. */
.app__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-a-1) var(--rf-a-4);
  justify-content: center;
  padding: var(--rf-a-2) var(--rf-a-4) calc(var(--rf-a-3) + env(safe-area-inset-bottom));
  background: var(--rf-weiss);
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
}

.app__fuss a {
  color: var(--rf-text-leise);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app__fuss a:hover { color: var(--rf-text); }

/* Auswahlknoepfe */

.optionen {
  display: grid;
  gap: var(--rf-a-2);
}

.optionen--zwei { grid-template-columns: repeat(2, 1fr); }
.optionen--drei { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 400px) {
  .optionen--drei { grid-template-columns: repeat(2, 1fr); }
}

/* Weniger Rot: die primaeren Knoepfe im Chat sind rot umrandet statt
   gefuellt. Die Sprechblasen bleiben rot. Nur im Chat, die Landingpage
   bleibt unberuehrt. */
.app .rf-knopf--rot {
  background: var(--rf-weiss);
  border: 2px solid var(--rf-rot);
  color: var(--rf-rot);
  box-shadow: none;
}
.app .rf-knopf--rot:hover {
  background: var(--rf-rot);
  border-color: var(--rf-rot);
  color: var(--rf-text-invers);
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-a-3);
  width: 100%;
  min-height: 54px;
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  text-align: left;
  font-size: var(--rf-t-m);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--rf-tempo), background-color var(--rf-tempo),
              color var(--rf-tempo), transform var(--rf-tempo);
}

.option:hover { border-color: var(--rf-schwarz); }
.option:active { transform: scale(0.99); }

.option[aria-pressed="true"] {
  border-color: var(--rf-rot);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
}

.option--mittig { justify-content: center; }

.option__zusatz {
  font-size: var(--rf-t-xs);
  font-weight: 400;
  color: var(--rf-text-leise);
}

.option[aria-pressed="true"] .option__zusatz { color: rgba(255, 255, 255, 0.8); }

/* Reihe mit Beschriftung, etwa Etagen */

.reihe { display: grid; gap: var(--rf-a-2); }

.reihe__titel {
  font-size: var(--rf-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rf-text-leise);
}

.reihe__knoepfe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--rf-a-2);
}

.reihe__knoepfe .option {
  justify-content: center;
  padding-inline: var(--rf-a-2);
  font-size: var(--rf-t-s);
  min-height: 50px;
}

/* Felder */

.feld { display: grid; gap: var(--rf-a-2); }

.feld__titel {
  font-size: var(--rf-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rf-text-leise);
}

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld input[type="date"],
.feld textarea {
  width: 100%;
  min-height: 54px;
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  font-size: var(--rf-t-m);
}

.feld textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

.feld input:focus, .feld textarea:focus { border-color: var(--rf-schwarz); }

.feld__paar { display: grid; gap: var(--rf-a-3); }

@media (min-width: 460px) {
  .feld__paar { grid-template-columns: 1fr 1fr; }
}

/* Zaehler fuer Moebel */

.zaehler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-a-3);
  padding: var(--rf-a-2) var(--rf-a-2) var(--rf-a-2) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  min-height: 56px;
  min-width: 0;
}

.zaehler__name { font-size: var(--rf-t-m); font-weight: 600; overflow-wrap: anywhere; }

.zaehler__steuerung {
  display: flex;
  align-items: center;
  gap: var(--rf-a-1);
}

.zaehler__knopf {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--rf-tempo), background-color var(--rf-tempo);
}

.zaehler__knopf:hover { border-color: var(--rf-schwarz); }
.zaehler__knopf:disabled { opacity: 0.35; cursor: default; }

.zaehler__wert {
  min-width: 2.25rem;
  text-align: center;
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-m);
  font-variant-numeric: tabular-nums;
}

/* Haken */

.haken {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-a-3);
  min-height: 48px;
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  font-size: var(--rf-t-s);
  cursor: pointer;
}

.haken input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--rf-rot);
}

.haken a { color: var(--rf-rot); }

/* Sterne */

.sterne {
  display: flex;
  gap: var(--rf-a-2);
  justify-content: center;
}

.stern {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--rf-grau-300);
  cursor: pointer;
  transition: color var(--rf-tempo), transform var(--rf-tempo);
}

.stern[data-aktiv="ja"] { color: var(--rf-rot); }
.stern:hover { transform: scale(1.08); }

/* --------------------------------------------------------------- Ergebnis */

.ergebnis {
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  background: var(--rf-grau-50);
  padding: var(--rf-a-5);
  margin-top: var(--rf-a-5);
}

.ergebnis__zahl {
  font-family: var(--rf-font-titel);
  font-weight: 800;
  font-size: var(--rf-t-preis);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* Wofuer die Zahl ist. Direkt unter der Zahl, nicht im Kleingedruckten. */
.ergebnis__enthalten {
  font-size: var(--rf-t-s);
  color: var(--rf-text);
  margin-top: var(--rf-a-2);
}

.ergebnis__hinweis {
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  margin-top: var(--rf-a-2);
}

/* Deutlicher Hinweis am groben Preis: sichtbar abgesetzt, nicht kleingedruckt. */
.ergebnis__grobwarnung {
  margin-top: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border-left: 3px solid var(--rf-rot);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  font-size: var(--rf-t-s);
  line-height: 1.5;
  color: var(--rf-text);
}

.ergebnis__posten {
  margin-top: var(--rf-a-4);
  padding-top: var(--rf-a-4);
  border-top: 1px solid var(--rf-linie);
  display: grid;
  gap: var(--rf-a-2);
}

.ergebnis__zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--rf-a-4);
  font-size: var(--rf-t-s);
}

.ergebnis__zeile strong { font-family: var(--rf-font-titel); white-space: nowrap; }

.ergebnis details { margin-top: var(--rf-a-4); }

.ergebnis summary {
  cursor: pointer;
  font-size: var(--rf-t-s);
  font-weight: 600;
  color: var(--rf-rot);
  list-style: none;
}

.ergebnis summary::-webkit-details-marker { display: none; }

.ergebnis details p {
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
  margin-top: var(--rf-a-3);
}

/* Zusammenfassung vor der Zahl */

.zusammenfassung {
  display: grid;
  gap: var(--rf-a-2);
  margin-top: var(--rf-a-4);
  padding: var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  font-size: var(--rf-t-s);
}

.zusammenfassung__zeile {
  display: flex;
  justify-content: space-between;
  gap: var(--rf-a-4);
}

.zusammenfassung__zeile span:first-child { color: var(--rf-text-leise); }
.zusammenfassung__zeile span:last-child { font-weight: 600; text-align: right; }

/* ------------------------------------------------------------- Hinweise */

.hinweis {
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  text-align: center;
}

.fehler {
  font-size: var(--rf-t-s);
  color: var(--rf-rot);
  font-weight: 600;
}

.demo-band {
  background: var(--rf-schwarz);
  color: var(--rf-text-invers);
  font-size: var(--rf-t-xs);
  text-align: center;
  padding: var(--rf-a-2) var(--rf-a-4);
}

/* ------------------------------------------------------------- Fallback */

.fallback {
  padding: var(--rf-a-6) var(--rf-a-4);
  display: grid;
  gap: var(--rf-a-4);
}

.fallback h1 { font-size: var(--rf-t-h3); }

/* ------------------------------------------------------ Moebelkategorien

   Aufklappbar, zu als Standard. 45 Zeilen auf einmal erschlagen jeden,
   besonders auf dem Handy. Im Kopf steht die Zahl der schon gewaehlten
   Stuecke, damit beim Zuklappen nichts aus dem Blick geraet.
*/

.kategorien { display: grid; gap: var(--rf-a-2); }

.kategorie {
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  overflow: hidden;
  background: var(--rf-weiss);
}

.kategorie--rueckruf { border-color: var(--rf-rot); }

.kategorie__kopf {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 0;
  background: var(--rf-weiss);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--rf-tempo);
}

.kategorie__kopf:hover { background: var(--rf-grau-50); }

.kategorie__name { flex: 1; font-weight: 600; }

.kategorie__zahl {
  flex: none;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding-inline: 7px;
  border-radius: var(--rf-r-pill);
  background: var(--rf-rot);
  color: var(--rf-text-invers);
  font-size: var(--rf-t-xs);
  font-weight: 700;
}

.kategorie__zahl[hidden] { display: none; }

.kategorie__pfeil {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--rf-grau-500);
  border-bottom: 2px solid var(--rf-grau-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--rf-tempo);
}

.kategorie__kopf[aria-expanded="true"] .kategorie__pfeil {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.kategorie__inhalt {
  padding: 0 var(--rf-a-4) var(--rf-a-3);
  border-top: 1px solid var(--rf-linie);
}

.kategorie__inhalt[hidden] { display: none; }

.kategorie__hinweis {
  margin: var(--rf-a-3) 0 var(--rf-a-2);
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
}

/* Rueckfragen unter einer Etagenreihe */

.reihe__zusatz:empty { display: none; }

.reihe__nachfrage {
  display: grid;
  gap: var(--rf-a-2);
  margin-top: var(--rf-a-3);
  padding-top: var(--rf-a-3);
  border-top: 1px dashed var(--rf-linie);
  font-size: var(--rf-t-s);
  color: var(--rf-text-leise);
}

/* display in einer Klasse sticht das hidden-Attribut aus. Ohne diese Regel
   bleibt jedes versteckte .feld sichtbar. */

[hidden] { display: none !important; }

.eingabe--schmal { max-width: 6rem; }

/* Groessenzuordnung, klappt unter einem Moebeleintrag auf */

.zaehler-block { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }

.groessen {
  display: grid;
  gap: var(--rf-a-2);
  padding: var(--rf-a-3) var(--rf-a-3) var(--rf-a-3) var(--rf-a-4);
  margin-top: -1px;
  border: 1px solid var(--rf-linie);
  border-top: none;
  border-radius: 0 0 var(--rf-r-s) var(--rf-r-s);
  background: var(--rf-grau-050, rgba(0,0,0,.02));
}
.groessen:empty { display: none; }

.groessen__titel {
  margin: 0;
  font-size: var(--rf-t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rf-text-leise);
}

/* Beschriftung oben, Auswahlknoepfe als volle Reihe darunter. Nebeneinander
   ging auf dem Handy nicht auf: die Knopfreihe laesst sich nicht kuerzen, die
   Textspalte fiel auf null zusammen und die Beschriftung lief unter die
   Knoepfe. Gestapelt passt es auf jeder Breite. */
.groessen__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.groessen__nr {
  font-size: var(--rf-t-s);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.groessen__mass {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--rf-text-leise);
  margin: -2px 0 2px;
}
.groessen__mass:empty { display: none; }

.montageliste { display: grid; gap: 4px; margin-top: 4px; }
.montageliste .zusatz { padding: 6px 8px; }

.groessen__wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  gap: 4px;
}

.groesse {
  text-align: center;
  overflow-wrap: anywhere;
  border: 1px solid var(--rf-linie);
  background: var(--rf-weiss);
  color: inherit;
  border-radius: var(--rf-r-s);
  padding: .3rem .6rem;
  font-size: var(--rf-t-xs);
  cursor: pointer;
  transition: border-color var(--rf-tempo), background-color var(--rf-tempo);
}
.groesse:hover { border-color: var(--rf-schwarz); }
.groesse[aria-pressed="true"] {
  background: var(--rf-rot);
  border-color: var(--rf-rot);
  color: var(--rf-weiss);
}
.groesse:focus-visible { outline: 2px solid var(--rf-rot); outline-offset: 1px; }

/* Zaehler mit freier Eingabe, etwa fuer Kartons. Bei groesseren Zahlen ist
   Tippen schneller als vierzigmal auf Plus zu druecken. */

.zaehler__eingabe {
  width: 3.75rem;
  height: 40px;
  text-align: center;
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  background: var(--rf-weiss);
  color: inherit;
  font-family: var(--rf-font-titel);
  font-weight: 700;
  font-size: var(--rf-t-m);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.zaehler__eingabe::-webkit-outer-spin-button,
.zaehler__eingabe::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.zaehler__eingabe:focus-visible {
  outline: 2px solid var(--rf-rot);
  outline-offset: 1px;
}

/* Zweizeiliger Zaehler: Bezeichnung oben, typisches Mass klein darunter */

.zaehler__text { display: grid; gap: 2px; min-width: 0; }

.zaehler__mass {
  font-size: 11px;
  line-height: 1.3;
  color: var(--rf-text-leise);
}

/* Zusatzleistungen */

.zusatz {
  display: flex;
  align-items: flex-start;
  gap: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  background: var(--rf-weiss);
  cursor: pointer;
  transition: border-color var(--rf-tempo), background-color var(--rf-tempo);
}

.zusatz:hover { border-color: var(--rf-rot); background: var(--rf-grau-50); }
.zusatz:has(input:checked) { border-color: var(--rf-rot); }

.zusatz input { margin-top: 3px; flex: none; }
.zusatz__text { display: grid; gap: 2px; }
.zusatz__name { font-weight: 600; }

.zusatz__hinweis {
  font-size: var(--rf-t-xs);
  line-height: 1.4;
  color: var(--rf-text-leise);
}

/* Fotos ------------------------------------------------------------------
   Das Dateifeld selbst ist unbrauchbar haesslich und laesst sich nicht
   gestalten. Deshalb liegt es unsichtbar da und der Kunde klickt das
   Label, das wie jeder andere Knopf aussieht. Ausgeblendet wird es nicht
   mit display:none, sonst waere es auch fuer die Tastatur weg. */

.nur-lesbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.datei { cursor: pointer; }
.nur-lesbar:focus-visible + .datei,
.datei:focus-within { outline: 2px solid var(--rf-rot); outline-offset: 2px; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--rf-a-2);
}
.galerie:empty { display: none; }

.galerie__bild {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-s);
  overflow: hidden;
  background: var(--rf-grau-50, #f4f4f4);
}

.galerie__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galerie__weg {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--rf-weiss);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.galerie__weg:hover { background: var(--rf-rot); }
.galerie__weg:focus-visible { outline: 2px solid var(--rf-weiss); outline-offset: -2px; }

/* ------------------------------------------------- Vertrauen am Preis */

.vertrauen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rf-a-1) var(--rf-a-2);
  margin-top: var(--rf-a-3);
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  text-align: center;
}

.vertrauen__sterne { color: #f5a623; letter-spacing: 0.05em; }
.vertrauen strong { color: var(--rf-text); }
.vertrauen__teams { flex-basis: 100%; }

/* Zusage bei Anfrage, nur wenn ANREIZ_TEXT gesetzt ist. */
.anreiz {
  margin-top: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px dashed var(--rf-rot);
  border-radius: var(--rf-r-s);
  font-size: var(--rf-t-s);
  font-weight: 600;
  text-align: center;
}

.anruf { display: grid; gap: var(--rf-a-1); }
.anruf__nummer { white-space: nowrap; }

/* ----------------------------------------------- Ansprechpartner, Team */

.person {
  display: flex;
  align-items: center;
  gap: var(--rf-a-3);
  margin-top: var(--rf-a-3);
  padding: var(--rf-a-3) var(--rf-a-4);
  border: 1px solid var(--rf-linie);
  border-radius: var(--rf-r-m);
  background: var(--rf-weiss);
}

.person__bild {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  background: var(--rf-grau-100);
}

.person__text { display: grid; gap: 2px; font-size: var(--rf-t-s); line-height: 1.3; }
.person__text strong { font-family: var(--rf-font-titel); font-size: var(--rf-t-m); }
.person__ueber { font-size: var(--rf-t-xs); color: var(--rf-text-leise); }

.teamfoto { margin: 0; }
.teamfoto img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: 50% 45%;
  border-radius: var(--rf-r-m);
}
.teamfoto figcaption {
  margin-top: var(--rf-a-1);
  font-size: var(--rf-t-xs);
  color: var(--rf-text-leise);
  text-align: center;
}