/* =====================================================================
   ZL Räumungen — Anfrage als Gespräch (/anfrage, seit 23.10.2026;
   Prototyp vom 22.10.2026)
   Bedienung nach Ajeti (chat-offerte.src.css), dort nach Tanner. Farben,
   Schriften und Knöpfe von ZL (style.css, hell.css, paletten.css): kantig,
   ein Akzent. Rot heisst hier Aktion oder Fehler, Hinweise stehen in --info.
   Eigene Variablen heissen --ch-…, damit nichts mit der Seite kollidiert.

   Grundsatz zum Scrollen (MKurti-Hausregel):
   - Es scrollt immer das Dokument, nie ein innerer Container: nur so fährt
     die Browserleiste auf dem Telefon ein.
   - Das Gespräch hängt unten (justify-content: flex-end): Die aktuelle
     Frage steht direkt über den Antworten, die Eingabe klebt am unteren Rand.
   - Ist eine Eingabe höher als 62 % der freien Fläche (Kalender, Fotos,
     Übersicht), klebt nur die Zeile mit Zurück und Weiter (data-gross, JS).
   - Beim Tippen klebt nichts (html.tastatur-offen), das Feld wird über die
     Tastatur gerollt (JS, visualViewport).
   ===================================================================== */

/* --------------------------------------------------------------- Seite
   /anfrage trägt body.ist-chat und main.chat-seite (build.mjs, chatSeite).
   Es scrollt das Dokument, anders als beim früheren Schritt-Formular, das
   die Seite in eine feste Höhe sperrte. Eine Schlusszeile gibt es auf
   dieser Seite nicht (build.mjs, seiteAnfrage). */
body.ist-chat { --slz: 0px; padding-bottom: 0; }
.chat-seite { display: block; }

.ch {
  --ch-luft: clamp(16px, 4vw, 40px);
  --ch-breite: 760px;
  --ch-blase: var(--sunk);
  --ch-gast: var(--hd);
  --ch-gast-hover: var(--navy-2);
  --ch-glas: color-mix(in srgb, var(--card) 90%, transparent);
  --ch-info: var(--info);
  --ch-info-flaeche: color-mix(in srgb, var(--info) 8%, var(--card));
  --ch-fehler: var(--acc);
  --ch-ring: 0 0 0 3px color-mix(in srgb, var(--hd) 18%, transparent);
  --ch-feder: cubic-bezier(.2, .9, .3, 1.15);
  --ch-schnell: .16s ease;
  color: var(--tx);
  font-family: var(--fb);
}
.ch svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch button { font: inherit; }

/* --------------------------------------------------------------- Raster
   Am Bildschirm links der Rand mit Titel und Zusagen, rechts das Gespräch.
   Darunter nur das Gespräch; die h1 bleibt für Vorleser und Suchmaschinen. */
.ch-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .ch-raster { grid-template-columns: clamp(300px, 25vw, 390px) minmax(0, 1fr); }
}

.ch-rand { background: var(--sunk); border-right: 1px solid var(--line); }
.ch-rand__innen {
  position: sticky; top: var(--hd-h);
  padding: 44px 32px 32px; display: flex; flex-direction: column; gap: 20px;
}
.ch-rand .kick { margin-bottom: 0; }
.ch-titel { font-size: clamp(26px, 2.3vw, 34px); }
.ch-rand__lead { font-size: 15.5px; line-height: 1.6; color: var(--tx); }
.ch-zusagen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch-zusagen li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--hd); font-weight: 500; }
.ch-zusagen svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--acc); stroke-width: 2.2; }
.ch-rand__fuss {
  margin-top: 6px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line);
  display: grid; gap: 4px;
}
.ch-rand__frage { font-size: 13px; color: var(--tx-mut); }
.ch-rand__tel { font-family: var(--fd); font-weight: 800; font-size: 22px; color: var(--hd); text-decoration: none; }
.ch-rand__tel:hover { color: var(--acc); }
.ch-rand__wa { font-weight: 600; font-size: 14.5px; color: var(--hd); }

@media (max-width: 1023px) {
  .ch-rand { border: 0; }
  .ch-rand .kick, .ch-rand__lead, .ch-zusagen, .ch-rand__fuss { display: none; }
  .ch-rand__innen { position: static; padding: 0; }
  .ch-titel {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

/* --------------------------------------------------------------- Gespräch */
.ch-haupt {
  min-width: 0;
  min-height: calc(100vh - var(--hd-h));
  min-height: calc(100svh - var(--hd-h));
  display: flex; flex-direction: column;
  background: var(--card);
}

/* Etappenleiste: klebt unter der Kopfzeile, fünf Etappen mit Bezeichnung,
   je Frage ein Teilstrich (gefüllt = beantwortet, rot = jetzt). */
.ch-etappen {
  position: sticky; top: var(--hd-h); z-index: 60;
  background: var(--ch-glas);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.ch-etappen__liste {
  list-style: none; margin: 0 auto; padding: 12px var(--ch-luft) 10px;
  max-width: calc(var(--ch-breite) + 2 * var(--ch-luft));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.ch-etappe { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ch-etappe__teile { display: flex; gap: 2px; height: 4px; }
.ch-etappe__teil { flex: 1; min-width: 0; background: var(--line); transition: background .25s ease; }
.ch-etappe__teil.ist-voll { background: var(--hd); }
.ch-etappe__teil.ist-jetzt { background: var(--acc); }
.ch-etappe__name {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-family: var(--fd); font-size: 12.5px; font-weight: 600; line-height: 1.25; letter-spacing: .01em;
  color: var(--tx-mut);
}
.ch-etappe__nr { font-weight: 800; flex: none; }
.ch-etappe__kurz { display: none; }
.ch-etappe[data-stand="fertig"] .ch-etappe__name,
.ch-etappe[data-stand="aktiv"] .ch-etappe__name { color: var(--hd); }
.ch-etappe[data-stand="aktiv"] .ch-etappe__nr { color: var(--acc); }

/* Zurück zur Website: nur unter 1024 px, dort fehlt die Kopfzeile der Website
   (Besim, 22.10.2026: «der Header so gesehen weg, damit mehr Platz für den Chat
   bleibt, aber ein kleines Icon mit zurück zur Webseite»). Die Hausregel «Kopf
   klebt immer» gilt hier bewusst nicht, wie bei /karte: Der Chat ist eine
   App-Ansicht, und die meisten Gäste kommen auf dem Telefon aus einer App. Das
   Haus sitzt in der Etappenleiste und kostet keine eigene Zeile. */
.ch-heim, .ch-anruf { display: none; }
@media (max-width: 1023px) {
  body.ist-chat { --hd-h: 0px; }
  body.ist-chat header.hd { display: none; }
  .ch-etappen { display: flex; align-items: stretch; }
  .ch-etappen__liste { flex: 1; min-width: 0; }
  .ch-heim, .ch-anruf {
    flex: none; display: grid; place-items: center; width: 46px; min-height: 44px;
    color: var(--hd); border-right: 1px solid var(--line);
  }
  /* Der Hörer als Gegenstück rechts (23.10.2026): Mit der Kopfzeile fehlt auf
     dem Telefon sonst jede Nummer, und Anrufen ist bei ZL der häufigste Weg. */
  .ch-anruf { border-right: 0; border-left: 1px solid var(--line); color: var(--acc); }
  .ch-heim svg, .ch-anruf svg { width: 20px; height: 20px; }
  .ch-heim:hover, .ch-heim:focus-visible { color: var(--acc); }
  .ch-anruf:hover, .ch-anruf:focus-visible { color: var(--acc-2); }
  .ch-heim:focus-visible, .ch-anruf:focus-visible { outline: 2px solid var(--hd); outline-offset: -4px; }
}

.ch-verlauf {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  width: 100%; max-width: calc(var(--ch-breite) + 2 * var(--ch-luft));
  margin: 0 auto; padding: 28px var(--ch-luft) 20px;
}

/* --------------------------------------------------------------- Blasen */
.blase { display: flex; gap: 10px; align-items: flex-end; min-width: 0; }
/* Die Marke ist das ZL-Quadrat aus dem Logo */
.blase__marke {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--acc); color: var(--acc-ink);
  font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: .06em;
}
.blase__inhalt { background: var(--ch-blase); padding: 14px 18px; max-width: 36rem; min-width: 0; }
.blase__frage { font-family: var(--fd); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: -.005em; color: var(--hd); }
.blase__kontext { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--tx); }

.blase--gast { justify-content: flex-end; }
.blase--gast .blase__inhalt { background: var(--ch-gast); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.4; max-width: 30rem; }
/* Die gegebene Antwort ist ein Knopf: Ein Tipp führt zu ihrer Frage zurück. */
.blase__aendern {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  border: 0; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: background var(--ch-schnell);
}
.blase__aendern:hover { background: var(--ch-gast-hover); }
.blase__aendern svg { width: 14px; height: 14px; flex: none; opacity: .7; }
.ist-gesendet .blase__aendern { cursor: default; }
.ist-gesendet .blase__aendern:hover { background: var(--ch-gast); }
.ist-gesendet .blase__aendern svg { display: none; }

.blase--eintritt { animation: blase-auf 320ms var(--ch-feder) both; }
@keyframes blase-auf {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.tippt { display: inline-flex; gap: 5px; padding: 6px 2px; }
.tippt > span:not(.sr-only) { width: 7px; height: 7px; background: var(--line-2); animation: tippen 1.1s infinite ease-in-out; }
.tippt > span:nth-child(2) { animation-delay: .16s; }
.tippt > span:nth-child(3) { animation-delay: .32s; }
@keyframes tippen {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Foto-Checkliste in der Blase */
.blase__liste-titel { margin-top: 12px; margin-bottom: 8px; font-size: 13.5px; font-weight: 600; color: var(--hd); }
.foto-check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.foto-check li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.3; color: var(--hd); font-weight: 500;
}
.foto-check svg { width: 15px; height: 15px; flex: none; color: var(--tx-mut); }

/* Hinweis: ruhig, nie rot */
.tipp {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 10px;
  padding: 10px 12px; background: var(--ch-info-flaeche); border-left: 3px solid var(--ch-info);
  color: var(--ch-info); font-size: 13.5px; line-height: 1.45;
}
.tipp svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.tipp--test { margin: 0 0 12px; }

/* --------------------------------------------------------------- Eingabe */
.ch-unten {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--ch-glas);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
}
.ch-eingabe, .ch-nav {
  width: 100%; max-width: calc(var(--ch-breite) + 2 * var(--ch-luft));
  margin-inline: auto; padding-inline: var(--ch-luft);
}
.ch-eingabe { padding-top: 16px; }
.ch-eingabe:empty { padding-top: 0; }
.ch-nav {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding-top: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 48px;
}
.ch-nav__zurueck {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 8px 8px 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--fd); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mut);
}
.ch-nav__zurueck:hover { color: var(--hd); }
.ch-nav__zurueck svg { width: 17px; height: 17px; }
.ch-nav__zurueck[hidden] { display: none; }
.ch-nav__zaehler { grid-column: 2; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--tx-mut); }
.ch-nav__weiter { grid-column: 3; display: flex; justify-content: flex-end; }

/* Grosse Eingaben (Kalender, Fotos, Übersicht): Ein klebender Block, der höher
   als das Fenster ist, lässt sich nicht bewegen. Dann scrollt der Block mit,
   kleben bleibt die Zeile mit Zurück und Weiter, über die ganze Breite. */
.ch-unten[data-gross] { position: static; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.ch-unten[data-gross] .ch-nav {
  position: sticky; bottom: 0; z-index: 41; max-width: none;
  padding-inline: max(var(--ch-luft), calc((100% - var(--ch-breite)) / 2));
  background: var(--ch-glas);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
}

/* Knöpfe: .btn/.btn-a/.btn-b der Website, nur etwas kompakter */
.ch-knopf { min-height: 48px; padding: 12px 20px; font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
.ch-knopf svg { width: 18px; height: 18px; }
.ch-knopf:disabled { opacity: .55; cursor: progress; }
.ch-knopf--breit { width: 100%; }

/* Auswahl */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--2, .chips--3 { display: grid; }
.chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Bleibt eine Wahl allein in der letzten Reihe, läuft sie über beide Spalten. */
.chips--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.chip {
  font-family: var(--fd); font-weight: 600; font-size: 15px; line-height: 1.25;
  min-height: 48px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: var(--card); color: var(--hd);
  display: inline-flex; align-items: center; gap: 8px; text-align: left; min-width: 0;
  transition: transform 100ms ease-out, background var(--ch-schnell), border-color var(--ch-schnell), color var(--ch-schnell);
}
.chip:hover { border-color: var(--hd); }
.chip:active { transform: scale(.98); }
.chip[aria-pressed="true"] { background: var(--hd); border-color: var(--hd); color: #fff; }
.chip svg { width: 18px; height: 18px; flex: none; }

/* Wahl mit Erklärzeile (Privat oder Firma, Füllgrad, Ausweichwege bei Fotos) */
.chip--info { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.chip__titel { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.chip__info { font-family: var(--fb); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--tx-mut); overflow-wrap: break-word; max-width: 100%; }
.chip[aria-pressed="true"] .chip__info { color: rgba(255, 255, 255, .82); }

/* Leise Knöpfe: Überspringen und Ausweichwege, gleich gross, zurückhaltend */
.chip--leise { background: var(--sunk); border-color: transparent; }
.chip--leise:hover { border-color: var(--hd); }
.chip--leise > svg { margin-left: auto; color: var(--tx-mut); width: 16px; height: 16px; }
.ch-zeile { display: flex; margin-top: 8px; }
.ch-zeile > .chip { flex: 1; }
.ch-zeile--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Mehrfachauswahl: Kästchen mit Haken */
.chip__box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--line-2); background: var(--card); }
.chip__box svg { width: 14px; height: 14px; opacity: 0; stroke-width: 3; }
.chip[aria-pressed="true"] .chip__box { border-color: #fff; background: #fff; color: var(--hd); }
.chip[aria-pressed="true"] .chip__box svg { opacity: 1; }

/* Füllgrad als Skala: vier Balken, so viele gefüllt wie die Stufe */
.stufe { display: flex; gap: 3px; align-items: flex-end; height: 18px; margin-bottom: 4px; }
.stufe i { width: 7px; background: var(--line-2); }
.stufe i:nth-child(1) { height: 6px; }
.stufe i:nth-child(2) { height: 10px; }
.stufe i:nth-child(3) { height: 14px; }
.stufe i:nth-child(4) { height: 18px; }
.stufe--1 i:nth-child(-n+1), .stufe--2 i:nth-child(-n+2),
.stufe--3 i:nth-child(-n+3), .stufe--4 i { background: var(--hd); }
.chip[aria-pressed="true"] .stufe i { background: rgba(255, 255, 255, .3); }
.chip[aria-pressed="true"] .stufe--1 i:nth-child(-n+1), .chip[aria-pressed="true"] .stufe--2 i:nth-child(-n+2),
.chip[aria-pressed="true"] .stufe--3 i:nth-child(-n+3), .chip[aria-pressed="true"] .stufe--4 i { background: #fff; }

/* Leistungskacheln: Symbol links, Name und Zusatz rechts, zwei pro Reihe */
.kachel { align-items: center; gap: 12px; min-height: 64px; padding: 11px 12px; }
.kachel > svg { width: 26px; height: 26px; color: var(--acc); stroke-width: 1.6; }
.kachel[aria-pressed="true"] > svg { color: #fff; }
.kachel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kachel__name { font-weight: 700; font-size: 15px; line-height: 1.2; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.kachel__zusatz { font-family: var(--fb); font-weight: 400; font-size: 12.5px; line-height: 1.3; color: var(--tx-mut); }
.kachel[aria-pressed="true"] .kachel__zusatz { color: rgba(255, 255, 255, .8); }

/* Felder */
.karte { display: grid; gap: 12px; padding: 16px; background: var(--card); border: 1px solid var(--line); }
.karte__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.karte__reihe--plz { grid-template-columns: 96px minmax(0, 1fr); }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.feld__label { font-family: var(--fd); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--hd); }
.feld__label em { font-style: normal; font-weight: 500; color: var(--tx-mut); }
.feld input, .feld textarea {
  width: 100%; min-height: 48px; font: inherit; font-size: 16px; color: var(--hd); background: var(--card);
  padding: 12px 13px; border: 1.5px solid var(--line-2); border-radius: 0;
  transition: border-color var(--ch-schnell), box-shadow var(--ch-schnell);
}
.feld textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
/* Eigener Fokus statt des roten Rings der Seite: Rot hiesse hier «Fehler». */
.ch .feld input:focus, .ch .feld textarea:focus { outline: none; border-color: var(--hd); box-shadow: var(--ch-ring); }
.feld.ist-fehler input, .feld.ist-fehler textarea { border-color: var(--ch-fehler); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--tx-mut); opacity: .75; }

.eingabezeile { display: flex; gap: 10px; align-items: flex-end; }
.eingabezeile .feld { flex: 1; }
.senden {
  width: 48px; height: 48px; flex: none; border: 0; cursor: pointer;
  background: var(--acc); color: var(--acc-ink); display: grid; place-items: center;
  transition: background var(--ch-schnell);
}
.senden:hover { background: var(--navy); }
.senden svg { width: 20px; height: 20px; }

/* Adressvorschläge (adressen.js, geo.admin.ch) */
.vorschlaege {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  list-style: none; margin: 4px 0 0; padding: 4px;
  background: var(--card); border: 1px solid var(--line-2);
  box-shadow: 0 12px 32px rgba(28, 31, 34, .16); max-height: 280px; overflow: auto;
}
.vorschlaege[hidden] { display: none; }
.vorschlaege.nach-oben { top: auto; bottom: 100%; margin: 0 0 4px; }
.vorschlaege.ist-knapp { max-height: 160px; }
.vorschlag { padding: 9px 12px; min-height: 44px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.vorschlag b { display: block; font-weight: 600; color: var(--hd); }
.vorschlag small { display: block; font-size: 13px; color: var(--tx-mut); }
.vorschlag:hover, .vorschlag[aria-selected="true"] { background: var(--sunk); }

/* Kalender */
.kalender { margin-top: 12px; padding: 12px; border: 1px solid var(--line); background: var(--card); }
.kalender__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kalender__monat { font-family: var(--fd); font-weight: 700; color: var(--hd); }
.kalender__pfeil {
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: var(--sunk); color: var(--hd); display: grid; place-items: center;
}
.kalender__pfeil:disabled { opacity: .35; cursor: default; }
.kalender__pfeil svg { width: 18px; height: 18px; }
.kalender__raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.kalender__wt { text-align: center; font-size: 12px; font-weight: 700; color: var(--tx-mut); padding: 4px 0; }
.kalender__tag { height: 44px; border: 0; cursor: pointer; background: transparent; color: var(--hd); font-weight: 600; font-size: 15px; }
.kalender__tag:hover:not(:disabled) { background: var(--sunk); }
.kalender__tag:disabled { opacity: .3; cursor: default; }
.kalender__tag.ist-heute { box-shadow: inset 0 0 0 1.5px var(--hd); }
.kalender__tag[aria-pressed="true"] { background: var(--hd); color: #fff; }
.kalender__leer { height: 44px; }

/* --------------------------------------------------------------- Fotos */
.fotos { display: grid; gap: 12px; }
.fotos__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fotos__knopf {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px;
  min-height: 88px; padding: 14px 16px; cursor: pointer;
  background: var(--hd); color: #fff;
  font-family: var(--fd); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: .01em;
  transition: background var(--ch-schnell);
}
.fotos__knopf:hover { background: var(--ch-gast-hover); }
.fotos__knopf:focus-within { outline: 3px solid var(--acc); outline-offset: 2px; }
.fotos__knopf svg { width: 26px; height: 26px; stroke-width: 1.7; }
.fotos__knopf input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Ziehen und Ablegen nur, wo es eine Maus gibt */
.fotos__ablage { display: none; margin: 0; padding: 12px; border: 1.5px dashed var(--line-2); text-align: center; font-size: 14px; color: var(--tx-mut); }
@media (hover: hover) and (pointer: fine) {
  .fotos__ablage { display: block; }
}
.ist-ziehen .fotos__ablage { border-color: var(--hd); color: var(--hd); background: var(--sunk); }
.fotos__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fotos__zahl { font-family: var(--fd); font-weight: 700; font-size: 15px; color: var(--hd); }
.fotos__grenze { font-size: 13px; color: var(--tx-mut); }
.fotos__liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.foto { position: relative; aspect-ratio: 1; background: var(--sunk); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto--laden { display: grid; place-items: center; }
/* Sichtbar 30 px, getroffen werden 44 px (::before) */
.foto__weg {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; padding: 0;
  border: 0; cursor: pointer; background: rgba(28, 31, 34, .78); color: #fff; display: grid; place-items: center;
}
.foto__weg::before { content: ""; position: absolute; inset: -7px; }
.foto__weg:hover { background: var(--hd); }
.foto__weg svg { width: 15px; height: 15px; stroke-width: 2.4; }
.fotos__laden { font-size: 13.5px; color: var(--tx-mut); }
.fotos__hinweis {
  padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--ch-fehler);
  background: color-mix(in srgb, var(--ch-fehler) 6%, var(--card)); border-left: 3px solid var(--ch-fehler);
}
.fotos__wege { margin-top: 12px; }
.fotos__wege .chip__titel svg { color: var(--hd); }

/* --------------------------------------------------------------- Übersicht
   Jede Antwort eine Kachel mit «ändern», Zweierreihen, Langes über die Breite. */
.uebersicht { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ue {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; min-height: 64px;
  padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--hd);
  transition: border-color var(--ch-schnell);
}
.ue:hover { border-color: var(--hd); }
.ue--breit { grid-column: 1 / -1; }
.ue__was { font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-mut); }
.ue__wert { font-weight: 600; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.ue__aendern {
  margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--hd); text-decoration: underline; text-underline-offset: 3px;
}
.ue__aendern svg { width: 13px; height: 13px; }
.notiz-schalter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 8px 0;
  border: 0; background: none; cursor: pointer;
  font-weight: 600; font-size: 14.5px; color: var(--hd); text-decoration: underline; text-underline-offset: 3px;
}
.notiz-schalter svg { width: 16px; height: 16px; }
.notiz-schalter[hidden], .notiz[hidden] { display: none; }
.notiz { margin-top: 12px; }
.zustimmung {
  display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 12px; cursor: pointer;
  font-size: 14.5px; line-height: 1.5; color: var(--tx);
}
.zustimmung input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--hd); cursor: pointer; }
.zustimmung a { color: var(--hd); font-weight: 600; }
.zustimmung.ist-fehler { color: var(--ch-fehler); }
.zustimmung.ist-fehler input { outline: 2px solid var(--ch-fehler); outline-offset: 2px; }

.fehler { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--ch-fehler); font-size: 14px; font-weight: 600; }
.fehler svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* --------------------------------------------------------------- Danke */
.danke { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 0 4px; }
.danke__marke {
  width: 60px; height: 60px; display: grid; place-items: center; background: var(--hd); color: #fff;
  animation: blase-auf 420ms var(--ch-feder) both;
}
.danke__marke svg { width: 30px; height: 30px; stroke-width: 2.6; }
.danke__titel { margin-top: 6px; font-size: clamp(20px, 2.4vw, 26px); }
.danke__was {
  margin-top: 8px; font-family: var(--fd); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tx-mut);
}
.danke__ref {
  font-family: var(--fd); font-weight: 800; font-size: clamp(30px, 8.5vw, 46px); line-height: 1.05; letter-spacing: .04em;
  color: var(--hd); border: 2px solid var(--hd); padding: 8px 18px; -webkit-user-select: all; user-select: all;
}
.danke__text { max-width: 32rem; margin-top: 6px; color: var(--tx); }
.danke__knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 540px; margin-top: 10px; }
.danke__knoepfe .ch-knopf { white-space: normal; text-align: center; padding-inline: 12px; line-height: 1.25; }

/* Testmodus: die Nutzlast lesbar, ohne Fotodaten. Kein innerer Scrollbereich. */
.ch-test { margin-top: 22px; padding: 12px 14px; border: 1px dashed var(--line-2); background: var(--sunk); text-align: left; }
.ch-test summary { cursor: pointer; min-height: 32px; font-family: var(--fd); font-weight: 700; color: var(--hd); }
.ch-test p { margin-top: 8px; font-size: 13.5px; color: var(--tx); overflow-wrap: anywhere; }
.ch-test code { font-size: 12.5px; }
.ch-test__nutzlast {
  margin: 10px 0 0; padding: 10px; background: var(--card); border: 1px solid var(--line);
  font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}

/* Ohne JavaScript und Honigtopf */
.ch-ohne-js { padding: 16px 18px; background: var(--sunk); border: 1px solid var(--line); }
.ch-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------- Chat-Anmutung
   Besim, 22.10.2026: «damit es ein wenig mehr nach Chat aussieht». Wie bei
   Ajeti und in den Nachrichten-Apps: Sprechblasen mit einer spitzen Ecke zur
   Marke hin (die Marke steht unten, also unten), rundes Profilbild, Etappen als
   Mitteilung in der Mitte, das Gespräch auf getöntem Grund mit weissen Blasen,
   Antworten als gerundete Knöpfe. Die Website bleibt kantig, der Chat ist die
   Ausnahme. Zum Vergleich zeigt /#form=kantig dieselbe Ansicht ohne Rundungen. */
.ch { --ch-r: 20px; --ch-r-spitz: 6px; --ch-r-feld: 14px; --ch-r-klein: 8px; --ch-r-rund: 999px; --ch-wand: var(--sunk); }
html[data-chat-form="kantig"] .ch { --ch-r: 0px; --ch-r-spitz: 0px; --ch-r-feld: 0px; --ch-r-klein: 0px; --ch-r-rund: 0px; }

.ch-haupt { background: var(--ch-wand); }
.blase__marke { border-radius: var(--ch-r-rund); }
.blase--zl .blase__inhalt {
  background: var(--card);
  border-radius: var(--ch-r) var(--ch-r) var(--ch-r) var(--ch-r-spitz);
  box-shadow: 0 1px 2px rgba(28, 31, 34, .07), 0 0 0 1px rgba(28, 31, 34, .05);
}
.blase--gast .blase__inhalt { border-radius: var(--ch-r) var(--ch-r) var(--ch-r-spitz) var(--ch-r); }
.foto-check li, .tipp { border-radius: var(--ch-r-klein); }
.tipp { border-left: 0; box-shadow: inset 3px 0 0 var(--ch-info); }

/* Etappen als Mitteilung in der Mitte, wie das Datum in einer Nachrichten-App.
   Die erste stellt ZL vor (die Etappe zeigt die Leiste oben). */
.ch-trenner { display: flex; justify-content: center; margin: 6px 0 0; }
.ch-trenner span {
  padding: 5px 12px; border-radius: var(--ch-r-rund);
  background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid var(--line);
  font-family: var(--fd); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tx-mut); text-align: center;
}
.ch-trenner--start span { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 12px; }
.ch-trenner--start b { color: var(--hd); font-weight: 800; }

/* Profilkarte am Gesprächsanfang, wie bei einem Geschäftskonto in WhatsApp.
   Nur auf hohen Telefonen: Dort bliebe über der ersten Frage sonst eine leere
   Fläche. Auf kurzen Telefonen braucht es den Platz für die Kacheln, am
   Bildschirm steht dasselbe in der linken Spalte. */
.ch-profil { display: none; }
@media (max-width: 1023px) and (min-height: 780px) {
  .ch-profil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin: 0 0 6px; }
  .ch-trenner--start { display: none; }
}
.ch-profil__marke {
  width: 64px; height: 64px; margin-bottom: 8px; display: grid; place-items: center; border-radius: var(--ch-r-rund);
  background: var(--acc); color: var(--acc-ink); font-family: var(--fd); font-weight: 800; font-size: 20px; letter-spacing: .06em;
  box-shadow: 0 0 0 4px var(--card), 0 2px 10px rgba(28, 31, 34, .12);
}
.ch-profil__name { font-family: var(--fd); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--hd); }
.ch-profil__was { font-family: var(--fd); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mut); }
.ch-profil__zusagen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.ch-profil__zusagen span {
  padding: 5px 11px; border-radius: var(--ch-r-rund); background: var(--card); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--hd);
}

/* Antwortbereich wie das Eingabefeld eines Chats: weiss, hebt sich vom Grund ab */
.ch-unten { background: color-mix(in srgb, var(--card) 94%, transparent); border-top-color: var(--line); box-shadow: 0 -10px 24px rgba(28, 31, 34, .05); }
.chip, .kachel { border-radius: var(--ch-r-feld); }
.chips:not(.chips--2):not(.chips--3) > .chip:not(.chip--info) { border-radius: var(--ch-r-rund); }
.chip__box { border-radius: min(6px, var(--ch-r-feld)); }
.karte, .kalender, .vorschlaege, .ue, .danke, .ch-test, .fotos__ablage { border-radius: var(--ch-r-feld); }
.feld input, .feld textarea { border-radius: var(--ch-r-klein); }
.vorschlag, .kalender__tag, .kalender__pfeil, .foto, .foto__weg { border-radius: var(--ch-r-klein); }
.foto img { border-radius: inherit; }   /* ohne overflow:hidden, sonst schneidet es die Tippfläche des × ab */
.fotos__knopf { border-radius: var(--ch-r-feld); }
.senden, .ch .ch-knopf { border-radius: var(--ch-r-rund); }
.ch .ch-knopf { text-transform: none; letter-spacing: .01em; }
.ch-nav__zurueck { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; }

/* ------------------------------------------- Telefon
   Schrift eine Stufe kleiner als am Bildschirm (Besim, 22.10.2026). Felder
   bleiben bei 16 px (.feld input/select/textarea), sonst zoomt iOS beim
   Antippen ins Bild. Tippziele bleiben ab 44 px. */
@media (max-width: 900px) {
  .ch { --ch-luft: 16px; }
  .ch-verlauf { padding: 16px var(--ch-luft) 12px; gap: 11px; }
  .blase__marke { width: 28px; height: 28px; font-size: 10.5px; }
  .blase__inhalt { padding: 11px 13px; }
  .ch-trenner span { font-size: 10.5px; }
  .blase__frage { font-size: 15px; }
  .blase__kontext { margin-top: 5px; font-size: 13.5px; line-height: 1.5; }
  .blase--gast .blase__inhalt { font-size: 14px; }
  .blase__liste-titel, .foto-check li, .tipp { font-size: 13px; }
  .ch-eingabe { padding-top: 10px; }
  .ch-nav { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ch-nav__zurueck { font-size: 12px; }
  .ch-nav__zaehler { font-size: 12px; }
  .chip { font-size: 14px; padding: 10px 12px; }
  .chip__info { font-size: 12.5px; }
  .chips { gap: 7px; }
  .kachel { gap: 10px; padding: 10px; min-height: 56px; }
  .kachel > svg { width: 21px; height: 21px; }
  .kachel__name { font-size: 13.5px; }
  .kachel__zusatz { font-size: 11.5px; }
  .karte { padding: 12px; gap: 10px; }
  .feld__label { font-size: 12px; }
  .vorschlag { font-size: 14px; }
  .vorschlag small { font-size: 12px; }
  .kalender__tag { font-size: 14px; }
  .ch-knopf { font-size: 13px; }
  .fotos__zahl { font-size: 14px; }
  .fotos__grenze, .fotos__laden { font-size: 12.5px; }
  .ue__was { font-size: 10px; }
  .ue__wert { font-size: 13.5px; }
  .ue__aendern { font-size: 12px; }
  .zustimmung, .fehler { font-size: 13.5px; }
  .danke__titel { font-size: 19px; }
  /* Beim Tippen klebt nichts: Die Tastatur verdeckt den unteren Rand, genau dort
     klebte die Eingabe. Darunter bleibt Platz, damit das Feld über die Tastatur rollt. */
  html.tastatur-offen .ch-unten,
  html.tastatur-offen .ch-unten[data-gross] .ch-nav { position: static; }
  html.tastatur-offen .ch-haupt { padding-bottom: 50svh; }
}
/* Schmale Telefone: kurze Etappennamen, Fotos in Viererreihen; Telefon und
   E-Mail untereinander (eine Adresse passt nicht in eine halbe Breite). */
@media (max-width: 620px) {
  .ch-etappen__liste { gap: 5px; padding: 10px 12px 8px; }
  /* Steht unten ein Weiter-Knopf («Mit 3 Fotos weiter»), fällt der Zähler weg:
     Zu dritt passte die Zeile nicht und schob die Seite seitlich (Entsorgung). */
  .ch-nav:has(.ch-nav__weiter > *) .ch-nav__zaehler { display: none; }
  .ch-nav__weiter { min-width: 0; }
  .ch .ch-nav__weiter .ch-knopf { padding-inline: 16px; }
  .ch-etappe__lang { display: none; }
  .ch-etappe__kurz { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ch-etappe__name { font-size: 11px; gap: 4px; letter-spacing: 0; }
  .fotos__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fotos__knopf { min-height: 80px; padding: 12px 14px; font-size: 14px; }
  .danke__knoepfe .ch-knopf { font-size: 13px; letter-spacing: .05em; }
  /* Haus und Hörer kosten zusammen 80 px (23.10.2026). Gleich breite Spalten
     schnitten dann «1 Leistung» ab, während «4 Ort» Platz übrig hatte: Die
     Spalten richten sich darum nach ihrem Namen und teilen den Rest gleich. */
  .ch-etappen__liste { grid-template-columns: repeat(5, minmax(0, auto)); }
  .ch-heim, .ch-anruf { width: 40px; }
}
@media (max-width: 480px) {
  .karte__reihe--kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .chips--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .blase--eintritt, .danke__marke { animation: none; }
  .tippt > span { animation: none; }
  .ch-etappe__teil { transition: none; }
}