/*
 * Der neue Umzugsplaner — Tims Gestaltung (`import/umzugsgut/umzugsplaner-dd-umzug.html`,
 * Zeilen 11–199), übertragen auf einen Baustein in der Hülle der Website.
 *
 * Was anders ist als im Prototyp, und warum (Spec §2):
 *
 * - Alles hängt unter `.upl` und heißt `upl-…`. Der Prototyp war eine eigene
 *   Seite; hier steht er zwischen Kopf, Menü und Fuß der TYPO3-Hülle, deren
 *   Bootstrap `input`, `h2` und `button` schon gestaltet. Ohne Namensraum
 *   färbte jede Regel die Seite ringsum mit.
 * - Die Schriften kommen von unserem Server (`/schriften/`, dort Lizenz und
 *   Herkunft), nicht von `fonts.googleapis.com`.
 * - Kein Dunkelmodus: die Website hat keinen, und ein dunkler Planer in einer
 *   hellen Seite wäre ein Loch in ihr.
 * - Die Fußleiste KLEBT (`sticky`), statt fest zu stehen: sie lässt am Ende des
 *   Planers los, sonst verdeckte sie Seitenfuß und Einwilligungsbanner.
 * - Der Schritttitel ist `h2` (die Seite hat ihr `h1`), die Abschnitte darin
 *   `h3`. Größen wie im Prototyp.
 * - Ausgewähltes trägt Rahmen UND Haken, nicht nur Farbe (WCAG 1.4.1): Gelb
 *   auf Weiß hat 1,6 : 1.
 */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/schriften/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/schriften/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/schriften/bricolage-grotesque-latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/schriften/bricolage-grotesque-latin-800-normal.woff2) format('woff2');
}

.upl {
  --upl-grund: #FFFFFF;
  --upl-flaeche: #FFFFFF;
  --upl-senke: #FBF9F1;
  --upl-tinte: #161616;
  --upl-matt: #5B5A55;
  --upl-linie: #E4E1D7;
  --upl-linie-stark: #CFCBBE;
  --upl-gelb: #F6C700;
  --upl-gelb-tief: #C99F00;
  --upl-gelb-hell: #FFF7D1;
  --upl-gefahr: #A8261D;
  --upl-gefahr-hell: #FBE9E7;
  --upl-r-gross: 16px;
  --upl-r-mittel: 12px;
  --upl-r-klein: 8px;
  --upl-f-titel: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --upl-f-text: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;

  max-width: 540px;
  margin: 0 auto;
  padding: 0 16px;
  background: var(--upl-grund);
  color: var(--upl-tinte);
  font-family: var(--upl-f-text);
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}
.upl *, .upl *::before, .upl *::after { box-sizing: border-box; }
.upl button, .upl input, .upl select, .upl textarea {
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.upl img { max-width: 100%; }
.upl :focus-visible { outline: 3px solid var(--upl-tinte); outline-offset: 2px; }
.upl [hidden] { display: none !important; }
.upl svg { display: block; }

/*
 * `#main` der Hülle trägt `overflow: hidden`, und darin klebt nichts: Kopf und
 * Fuß des Planers scrollten auf der gebauten Seite einfach mit weg (gemessen
 * 24.09.2026, `umzugsplaner-im-bau.test.mjs`). `clip` schneidet dasselbe ab,
 * ist aber kein Rollbehälter; `flow-root` hält den Formatierungskontext, den
 * `hidden` nebenbei gab (umschlossene Floats, kein Durchschlagen der Ränder).
 * Nur auf einer Seite mit Planer — dieses Stylesheet lädt nur dort. Ein
 * Browser ohne `:has` oder `clip` behält `hidden`: der Planer geht dort, er
 * klebt nur nicht.
 */
#main:has(.upl) { overflow: clip; display: flow-root; }

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.upl-kopf {
  position: sticky;
  /* Unter dem Kopf der Website, den das Skript misst (`--upl-oben`). */
  top: var(--upl-oben, 0px);
  z-index: 20;
  background: var(--upl-grund);
  padding: 12px 16px 10px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--upl-linie);
}
.upl-schritte {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.upl-schritte li { margin: 0; padding: 0; }
.upl-schritte button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  cursor: default;
  color: var(--upl-linie-stark);
}
.upl-schritte button svg { width: 16px; height: 16px; }
.upl-schritte button i { display: block; width: 100%; height: 5px; border-radius: 3px; background: var(--upl-linie); }
.upl-schritte button.upl-erledigt { cursor: pointer; color: var(--upl-tinte); }
.upl-schritte button.upl-erledigt i { background: var(--upl-gelb); }
.upl-schritte button[aria-current='step'] { color: var(--upl-tinte); }
.upl-schritte button[aria-current='step'] i { background: var(--upl-tinte); }
.upl-schrittzeile {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 14px;
  color: var(--upl-matt);
}
.upl-raumwerkzeuge { display: flex; gap: 8px; margin-top: 10px; }
.upl-raumwerkzeuge .upl-suche { flex: 1; margin: 0; }
.upl-raumwerkzeuge .upl-suche input { min-height: 44px; }
.upl-raumwerkzeuge .upl-suche svg { top: 11px; }
.upl-raumwerkzeuge .upl-knopf { min-height: 44px; padding: 8px 12px; font-size: 15px; flex: none; }
.upl-kopftelefon { display: none; }

/* Telefonhilfe: Zeiten teilen sich bei genügend Platz die Zeile, schmal darf sie umbrechen. */
.upl-hilfe { font-size: 14px; line-height: 1.35; margin: 0 0 8px; color: var(--upl-matt); }
.upl-hilfezeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.upl-hilfezeile a { white-space: nowrap; }
.upl-hilfe small { font-size: 12px; color: var(--upl-matt); }
.upl-kopftelefon small { display: block; font-size: 12px; color: var(--upl-matt); margin-top: 2px; }
.upl .upl-hilfe-rueckruf {
  border: 0;
  padding: 4px 0;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
  color: var(--upl-tinte);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--upl-gelb-tief);
  text-underline-offset: 3px;
}
.upl-hilfehinweis, .upl-hilfeexit {
  border: 1px solid var(--upl-linie);
  border-radius: var(--upl-r-mittel);
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--upl-senke);
  font-size: 15px;
}
.upl-hilfehinweis p, .upl-hilfeexit p { margin: 0 0 6px; }
.upl-hilfezu { float: right; margin: -4px -6px 0 6px; }
.upl-hilfeexit {
  position: fixed;
  top: calc(var(--upl-oben, 0px) + 96px);
  right: 16px;
  z-index: 45;
  width: min(360px, calc(100vw - 32px));
  box-shadow: 0 6px 24px rgba(20, 20, 20, .15);
}

/*
 * ── Weitermachen-Link: das Band über den Schritten ─────────────────────────
 * Die Adresse, an die der Link ging, steht in jedem Schritt — dort fällt ein
 * Tippfehler auf (Spec §4.1). Leise wie eine Notiz, nicht gelb wie ein Knopf;
 * eine lange Adresse bricht, statt das Band zu sprengen.
 */
.upl-entwurf {
  background: var(--upl-senke);
  border: 1px solid var(--upl-linie);
  border-radius: var(--upl-r-mittel);
  padding: 10px 14px 2px;
  margin: 14px 0 0;
  font-size: 15px;
}
.upl .upl-entwurf p { margin: 0; }
.upl-entwurf strong { background: var(--upl-gelb-hell); padding: 0 3px; border-radius: 3px; overflow-wrap: anywhere; }
.upl-entwurfknoepfe { display: flex; flex-wrap: wrap; column-gap: 16px; }
.upl-entwurfknoepfe .upl-knopf.upl-leise { font-size: 15px; text-align: left; }
.upl .upl-entwurf input { margin: 2px 0 10px; min-height: 44px; font-size: 15px; }

/*
 * ── Fotos: Tims Leiste ─────────────────────────────────────────────────────
 * Vorschaubilder 64 × 64, dahinter die gestrichelte Kachel. Die Dateiwahl
 * liegt unsichtbar über der ganzen Kachel — ein Tipp irgendwo darauf öffnet
 * sie; den Fokusrahmen trägt die Kachel, denn die Wahl selbst ist durchsichtig.
 */
.upl-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.upl-foto { position: relative; width: 64px; height: 64px; }
.upl-foto img {
  display: block; width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--upl-r-klein); border: 1px solid var(--upl-linie); background: var(--upl-senke);
}
.upl-foto.upl-laedt img { opacity: .45; }
.upl-fotoweg {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--upl-linie-stark);
  background: var(--upl-flaeche); color: var(--upl-tinte); cursor: pointer;
}
.upl-fotoweg svg { width: 16px; height: 16px; }
.upl-fotoneu {
  position: relative; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--upl-r-klein);
  background: var(--upl-flaeche); color: var(--upl-tinte); cursor: pointer;
}
/*
 * Der gestrichelte Rand als eigene Schicht: ein Rand an der Kachel selbst
 * läge ausserhalb dessen, was `inset: 0` der Wahl deckt — ein Tipp darauf
 * ginge ins Leere.
 */
.upl-fotoneu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; border: 1.5px dashed var(--upl-gelb-tief);
}
.upl-fotoneu svg { width: 24px; height: 24px; }
.upl-fotoneu input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.upl-fotoneu:has(input:focus-visible) { outline: 3px solid var(--upl-tinte); outline-offset: 2px; }

/* ── Überschriften und Text ─────────────────────────────────────────────── */
.upl h2.upl-titel {
  font-family: var(--upl-f-titel);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 16px 0 6px;
  color: var(--upl-tinte);
  text-transform: none;
}
.upl h3.upl-abschnitt, .upl .upl-blatt h2 {
  font-family: var(--upl-f-titel);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  margin: 28px 0 10px;
  color: var(--upl-tinte);
  text-transform: none;
}
.upl .upl-blatt h2 { margin-top: 0; }
.upl h4 { font-size: 17px; margin: 0; font-family: var(--upl-f-text); font-weight: 700; }
.upl p { margin: 0 0 12px; }
.upl-einleitung { color: var(--upl-matt); margin: 0 0 18px; }
.upl .upl-hinweis { font-size: 15px; color: var(--upl-matt); margin: 4px 0 0; }
.upl-unterlabel { display: block; font-weight: 400; font-size: 15px; color: var(--upl-tinte); margin-top: 2px; }
.upl-unterlabel strong, .upl-hinweis strong, .upl-erklaerung strong { background: var(--upl-gelb-hell); padding: 0 3px; border-radius: 3px; }
.upl a { color: var(--upl-tinte); text-decoration: underline; text-decoration-color: var(--upl-gelb-tief); text-underline-offset: 3px; }

/* ── Formular ───────────────────────────────────────────────────────────── */
.upl-feld { margin: 0 0 16px; }
.upl-feld > label, .upl .upl-label { display: block; font-weight: 700; margin: 0 0 6px; font-size: 17px; }
.upl-frei { font-weight: 400; color: var(--upl-matt); font-size: 15px; }
.upl input[type=text], .upl input[type=email], .upl input[type=tel], .upl input[type=date],
.upl input[type=number], .upl input[type=search], .upl input:not([type]), .upl select, .upl textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  height: auto;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--upl-linie-stark);
  border-radius: var(--upl-r-mittel);
  background: var(--upl-flaeche);
  font-size: 17px;
  line-height: 1.3;
  box-shadow: none;
}
.upl textarea { min-height: 80px; resize: vertical; }
.upl input:focus, .upl select:focus, .upl textarea:focus {
  border-color: var(--upl-tinte);
  outline: none;
  box-shadow: 0 0 0 3px var(--upl-gelb-hell);
}
.upl-reihe { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
/* `1fr` gibt nicht unter den Mindestinhalt nach, und Chromiums Datumsfeld ist nie schmaler
   als 169 px: „Spätestens“ stand bei 360 px bis 376 px, abgeschnitten. */
.upl-reihe > * { min-width: 0; }
/* Bei 320 px bleiben einem Datumsfeld so 96 px Text: das Kalenderzeichen deckte die letzte Ziffer. */
@media (max-width: 359px) {
  .upl input[type=date] { padding-left: 10px; padding-right: 8px; }
}
.upl-reihe.upl-plz { grid-template-columns: 110px 1fr; }
.upl-reihe.upl-zwei { grid-template-columns: 1fr 1fr; }
.upl-reihe.upl-drei { grid-template-columns: 1fr 1fr 1fr; }
/* Name des Raums und Etage in einer Zeile, die Etage beim Einzug darunter in derselben
   Spalte. Unter 380 px blieben dem Namen keine 170 px: „Kinderzimmer 2“ wäre angeschnitten. */
.upl-reihe.upl-raumkopf { grid-template-columns: 1fr; }
@media (min-width: 380px) {
  .upl-reihe.upl-raumkopf { grid-template-columns: 1fr 1fr; }
  .upl-raumkopf > [data-upl-zeige='etage-einzug'] { grid-column: 2; }
}
.upl-fehler { color: var(--upl-gefahr); font-size: 15px; margin-top: 4px; font-weight: 700; }
.upl-fehler:empty { display: none; }
.upl [aria-invalid='true'] { border-color: var(--upl-gefahr) !important; }
.upl-hat-fehler .upl-wahl button { border-color: var(--upl-gefahr); }

.upl-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.upl-wahl button {
  min-height: 44px;
  padding: 9px 15px;
  border: 1.5px solid var(--upl-linie-stark);
  border-radius: 99px;
  background: var(--upl-flaeche);
  cursor: pointer;
  font-size: 16px;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.upl-wahl button[aria-pressed='true'] {
  background: var(--upl-gelb-hell);
  border-color: var(--upl-tinte);
  font-weight: 700;
}
.upl-wahl button[aria-pressed='true']::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  background: no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}

/* Mit `.upl` davor: die Einwilligung steht in einem `div.upl-feld`, und
   `.upl-feld > label` (block, fett) schlug sonst diese Regel. */
.upl .upl-haken { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; font-weight: 400; margin: 0; }
/* `/umzugsplaner.html` lädt noch `umzug.css` des alten Planers, und das setzt
   `appearance: none` auf jedes input: das Kästchen kippte, zeichnete aber kein
   Häkchen (Tim und Jan, 25.09.2026). */
.upl-haken input { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--upl-gelb-tief); flex: none; }

/* ── Karten ─────────────────────────────────────────────────────────────── */
.upl-karte { background: var(--upl-flaeche); border: 1px solid var(--upl-linie); border-radius: var(--upl-r-gross); padding: 16px; margin: 0 0 12px; }
.upl-karte.upl-sub { background: var(--upl-senke); border-style: dashed; }
.upl-kartenkopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.upl-notiz { background: var(--upl-gelb-hell); border-radius: var(--upl-r-mittel); padding: 12px 14px; font-size: 15px; margin: 0 0 16px; }
/* Unter „bei N Gegenständen …“ in Montagen und Entsorgung: die Gegenstände selbst, aufklappbar. */
.upl-betroffen summary { display: list-item; cursor: pointer; }
.upl-betroffen ul { margin: 8px 0 0; padding-left: 20px; list-style: disc; }
.upl-betroffen li { margin: 2px 0; }
.upl-warnung { background: var(--upl-gefahr-hell); border: 1.5px solid var(--upl-gefahr); border-radius: var(--upl-r-mittel); padding: 14px; margin: 0 0 12px; }
.upl-warnung h4 { color: var(--upl-gefahr); margin-bottom: 4px; }

.upl-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: var(--upl-r-mittel);
  border: 0;
  background: var(--upl-gelb);
  color: var(--upl-tinte);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
}
.upl-knopf.upl-rand { background: var(--upl-flaeche); color: var(--upl-tinte); border: 1.5px solid var(--upl-gelb-tief); }
.upl-knopf.upl-leise {
  background: transparent;
  padding: 8px 4px;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: var(--upl-gelb-tief);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.upl-knopf.upl-gefahr { background: transparent; color: var(--upl-gefahr); padding: 8px 4px; min-height: 44px; }
.upl-knopf.upl-breit { width: 100%; }
.upl-knopf[disabled] { opacity: .6; cursor: progress; }
.upl-knopf svg { width: 22px; height: 22px; flex: none; }
.upl-symbolknopf {
  width: 44px;
  height: 44px;
  border-radius: var(--upl-r-klein);
  border: 1.5px solid var(--upl-linie-stark);
  background: var(--upl-flaeche);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.upl-symbolknopf svg { width: 22px; height: 22px; }
.upl-symbolknopf.upl-ohne-rand { border: 0; }

/* ── Etagen ─────────────────────────────────────────────────────────────── */
.upl-etagenname { font-family: var(--upl-f-titel); font-weight: 600; font-size: 19px; }
.upl-etagenname small { font-family: var(--upl-f-text); font-weight: 400; font-size: 14px; color: var(--upl-matt); margin-left: 6px; }
.upl-etage-neu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  border: 2px dashed var(--upl-gelb-tief);
  border-radius: var(--upl-r-gross);
  background: var(--upl-flaeche);
  font-weight: 700;
  cursor: pointer;
}
.upl-etage-neu svg { width: 22px; height: 22px; }
.upl-etagenwahl { border: 1.5px solid var(--upl-gelb-tief); border-radius: var(--upl-r-gross); padding: 14px; background: var(--upl-flaeche); margin-bottom: 12px; }
.upl-etagenraster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.upl-etagenraster + .upl-etagenraster { margin-top: 8px; }
.upl-etagenraster button {
  min-height: 44px;
  border: 1.5px solid var(--upl-linie-stark);
  border-radius: var(--upl-r-mittel);
  background: var(--upl-flaeche);
  cursor: pointer;
  text-align: left;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.3;
}
.upl-etagenraster button small { display: block; color: var(--upl-matt); font-size: 13px; }
.upl-erklaerung { background: var(--upl-senke); border-radius: var(--upl-r-mittel); padding: 12px 14px; font-size: 15px; margin-bottom: 12px; }
.upl-erklaerung ol { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column-reverse; gap: 3px; }
.upl-erklaerung li { display: flex; gap: 10px; align-items: center; margin: 0; }
.upl-erklaerung li span:first-child {
  width: 92px;
  height: 22px;
  border: 1.5px solid var(--upl-linie-stark);
  border-radius: 3px;
  background: var(--upl-flaeche);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.upl-erklaerung li.upl-eg span:first-child { background: var(--upl-gelb-hell); border-color: var(--upl-gelb-tief); }

/* ── Räume ──────────────────────────────────────────────────────────────── */
.upl-raeume { display: grid; gap: 10px; }
.upl-raumkarte {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: var(--upl-flaeche);
  border: 1px solid var(--upl-linie);
  border-radius: var(--upl-r-gross);
  padding: 14px;
  cursor: pointer;
  line-height: 1.4;
}
.upl-raumsymbol {
  width: 48px;
  height: 48px;
  border-radius: var(--upl-r-mittel);
  background: var(--upl-gelb-hell);
  color: var(--upl-tinte);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.upl-raumsymbol svg { width: 26px; height: 26px; }
.upl-raumkarte .upl-raumname { display: block; font-weight: 700; }
.upl-raumkarte .upl-meta { display: block; font-size: 15px; color: var(--upl-matt); }
.upl-raumkarte .upl-weiter { margin-left: auto; color: var(--upl-matt); }
.upl-raumkarte .upl-weiter svg { width: 22px; height: 22px; }
.upl-raum-neu { border: 2px dashed var(--upl-gelb-tief); font-weight: 700; justify-content: center; }
.upl-raum-neu svg { width: 22px; height: 22px; }
.upl-typraster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.upl-typraster button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  border: 1.5px solid var(--upl-linie);
  border-radius: var(--upl-r-mittel);
  background: var(--upl-flaeche);
  cursor: pointer;
  text-align: left;
  min-height: 92px;
  line-height: 1.3;
}
.upl-typraster .upl-raumsymbol { width: 40px; height: 40px; }

/* ── Gegenstände: kompakte Liste ────────────────────────────────────────── */
.upl-suche { position: relative; margin: 0 0 14px; }
.upl-suche svg { position: absolute; left: 12px; top: 14px; width: 20px; height: 20px; color: var(--upl-matt); }
.upl .upl-suche input { padding-left: 40px; }
.upl-liste { background: var(--upl-flaeche); border: 1px solid var(--upl-linie); border-radius: var(--upl-r-gross); overflow: hidden; }
.upl-gruppe { padding: 8px 14px 4px; font-size: 13px; font-weight: 700; color: var(--upl-matt); background: var(--upl-senke); border-top: 1px solid var(--upl-linie); }
.upl-liste > .upl-gruppe:first-child { border-top: 0; }
.upl-posten { border-top: 1px solid var(--upl-linie); }
.upl-liste > .upl-posten:first-child, .upl-gruppe + .upl-posten { border-top: 0; }
.upl-leer-treffer { padding: 12px 14px; }
.upl-postenkopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px 8px 14px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.3;
}
.upl-postenkopf .upl-name { flex: 1; min-width: 0; }
.upl-postenkopf .upl-name small { display: block; font-weight: 400; font-size: 15px; color: var(--upl-matt); }
.upl-postenkopf .upl-pfeil { width: 18px; height: 18px; color: var(--upl-matt); flex: none; transition: transform .15s; }
.upl-posten.upl-offen .upl-postenkopf .upl-pfeil { transform: rotate(90deg); }
.upl-posten.upl-gewaehlt .upl-postenkopf { font-weight: 700; }
.upl-marke {
  min-width: 30px;
  height: 26px;
  padding: 0 8px;
  border-radius: 99px;
  background: var(--upl-gelb);
  color: var(--upl-tinte);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
/* Ein befüllter Hinweis ist SICHTBAR markiert (T13) — im Prototyp stand das nur für Bildschirmleser da. */
.upl-hinweismarke { color: var(--upl-tinte); background: var(--upl-gelb-hell); border-radius: 99px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.upl-hinweismarke svg { width: 16px; height: 16px; }
.upl-posten.upl-offen { background: var(--upl-senke); box-shadow: inset 3px 0 0 var(--upl-gelb); }
.upl-postenkoerper { padding: 4px 14px 14px; }
.upl-postenkoerper .upl-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.upl-postenkoerper .upl-zeile .upl-label { margin: 0; }
.upl-postenkoerper textarea.upl-hat-inhalt { border-color: var(--upl-gelb-tief); background: var(--upl-gelb-hell); }
.upl-schwer {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--upl-gefahr-hell);
  color: var(--upl-gefahr);
  margin-left: 4px;
  vertical-align: 1px;
}
.upl-zaehler { display: flex; align-items: center; border: 1.5px solid var(--upl-linie-stark); border-radius: 99px; background: var(--upl-flaeche); flex: none; }
.upl-zaehler button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 99px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--upl-tinte);
  padding: 0;
}
.upl-zaehler button:disabled { color: var(--upl-linie-stark); cursor: default; }
.upl-zaehler button svg { width: 20px; height: 20px; }
.upl .upl-zaehler input {
  width: 48px;
  min-height: 44px;
  border: 0;
  text-align: center;
  padding: 0;
  font-weight: 700;
  background: transparent;
  box-shadow: none !important;
}
.upl .upl-zaehler.upl-meter input { width: 62px; }
.upl-schalter { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; font-size: 15px; font-weight: 700; margin: 0; }
.upl-schalter input {
  appearance: none;
  -webkit-appearance: none;
  width: 46px;
  height: 28px;
  border-radius: 99px;
  background: var(--upl-linie-stark);
  position: relative;
  cursor: pointer;
  margin: 0;
  flex: none;
  transition: background .15s;
}
.upl-schalter input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.upl-schalter input:checked { background: var(--upl-tinte); }
.upl-schalter input:checked::after { transform: translateX(18px); }
.upl-kartons { display: flex; align-items: center; gap: 12px; }
.upl-kartons > div { flex: 1; }
.upl-alle-kartons { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--upl-linie); }
.upl-alle-kartons strong { color: var(--upl-tinte); }

/* Servicekarte: Titel und Unterzeile links, Schalter rechts. */
.upl-dienst .upl-schalter { justify-content: space-between; width: 100%; margin: 0; }
.upl-dienst .upl-schalter > span { font-size: 17px; }
.upl-dienst .upl-schalter small { display: block; font-weight: 400; color: var(--upl-matt); font-size: 15px; }
.upl-dienstinhalt { margin-top: 14px; }

/* ── Fuß: klebt, und lässt am Ende des Planers los ──────────────────────── */
.upl-fuss {
  position: sticky;
  /* Die Bildschirmtastatur kann nur den sichtbaren Ausschnitt verkleinern. */
  bottom: var(--upl-sicht-unten, 0px);
  z-index: 30;
  background: var(--upl-flaeche);
  border-top: 1px solid var(--upl-linie);
  margin: 24px -16px 0;
  /*
   * Ein kurzer Schritt reicht bis an den unteren Rand: steht der Planer an
   * seinem Anfang, endet der Fuß nicht mitten im Bild (Tim, 25.09.2026 —
   * „Umzugsgut“ ohne Raum bei 1440 × 900: Fuß bei 538–639 px, darunter der
   * Seitenfuss). Der Platz kommt VOR den Fuß: ein klebender Fuß rückt nur nach
   * oben, nie unter seine Lage im Fluss — eine Mindesthöhe am Formular stünde
   * leer unter ihm. Das Skript misst `--upl-oben-anfang` (wo der Kopf der
   * Website endet, wenn der Planer an seinem Anfang steht) und `--upl-inhalt`
   * (Formular bis Schrittende plus Fuß, ohne diesen Rand). Ohne Skript bleibt
   * es bei 24 px.
   */
  margin-top: max(24px, calc(100vh - var(--upl-oben-anfang, 0px) - var(--upl-inhalt, 100vh)));
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.upl-fussinnen { display: flex; gap: 10px; align-items: center; }
.upl-fuss .upl-weiter-knopf { flex: 1; }
/* Der Seitenblick gehört nur zur Seitenspalte ab 992 px — darunter nie, auch wenn das Skript ihn zeigt. */
.upl-seitenblick { display: none; }
.upl-last { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--upl-matt); margin: 0 0 8px; }
.upl-lastbalken { flex: 1; height: 8px; border-radius: 4px; background: var(--upl-senke); border: 1px solid var(--upl-linie); overflow: hidden; }
.upl-lastbalken i { display: block; height: 100%; width: 0; background: var(--upl-gelb); transition: width .3s; }
.upl-last b { color: var(--upl-tinte); font-size: 15px; }

/* ── Blätter: natives <dialog>, unten angesetzt wie Tims Blatt ──────────── */
.upl-blatt {
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  max-height: calc(var(--upl-sicht-hoehe, 100dvh) * .92);
  top: var(--upl-sicht-oben, 0px);
  bottom: var(--upl-sicht-unten, 0px);
  margin: auto auto 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--upl-flaeche);
  color: var(--upl-tinte);
  overflow: hidden;
  font-family: var(--upl-f-text);
  font-size: 17px;
  line-height: 1.5;
}
.upl-blatt[open] { display: flex; flex-direction: column; }
.upl-blattinhalt { overflow: auto; min-height: 0; overscroll-behavior: contain; }
.upl-blattzu, .upl-blattfuss { flex: none; }
.upl-blattfuss { padding-top: 8px; background: var(--upl-flaeche); }
.upl-blattfuss > .upl-knopf + .upl-knopf { margin-top: 8px; }
.upl-blatt::backdrop { background: rgba(20, 20, 20, .45); }
.upl-blattzu { display: flex; justify-content: flex-end; margin: -8px -4px 0; }
.upl-meldung {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  background: var(--upl-tinte);
  color: var(--upl-grund);
  padding: 12px 16px;
  border-radius: var(--upl-r-mittel);
  z-index: 60;
  max-width: min(500px, calc(100% - 32px));
  font-size: 15px;
  /* Sie schwebt über dem Formular und trägt nur Text: ein Tipp auf sie gilt dem Feld darunter. */
  pointer-events: none;
}
.upl-meldung:empty { display: none; }

/* ── Übersicht ──────────────────────────────────────────────────────────── */
.upl-gross { font-family: var(--upl-f-titel); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -.03em; }
.upl-gross::after { content: ''; display: block; width: 64px; height: 6px; background: var(--upl-gelb); margin-top: 10px; border-radius: 3px; }
.upl-summe { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--upl-linie); }
.upl-summe:first-child { border-top: 0; }
.upl-summe > span:last-child { color: var(--upl-matt); text-align: right; }
/* Die Unterzeile (Mail · Telefon, Etage · Teile, Anschrift) unter ihre Zeile, nicht dahinter. */
.upl-summe small { display: block; font-weight: 400; font-size: 15px; color: var(--upl-matt); }
.upl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.upl-ohne-skript { background: var(--upl-gelb-hell); border-radius: var(--upl-r-mittel); padding: 12px 14px; }

/*
 * Ein fokussiertes Feld soll nicht unter einem der zwei Köpfe (Website und
 * Planer, beide klebend) oder unter dem Fuß liegen — iOS über der Tastatur
 * ebenso wie der Sprung zum ersten Fehler. Dazu die Wahlknöpfe und „Etage
 * hinzufügen“: auf sie springt der Fokus bei einer fehlenden Anrede oder Etage.
 * Nicht jeder Knopf — ein Rand am klebenden Fuß rollte die Seite bei jedem Tab.
 */
.upl input, .upl select, .upl textarea, .upl-wahl button, .upl [data-upl-tu="etage-neu"] {
  scroll-margin: calc(var(--upl-oben, 0px) + var(--upl-kopf, 76px) + 16px) 0 160px;
}

@media (prefers-reduced-motion: reduce) {
  .upl *, .upl *::before, .upl *::after { transition: none !important; }
}

/*
 * ── Ab 992 px: Formular links, Seitenspalte rechts ─────────────────────────
 * Tims Vorlage ist eine 540-px-Spalte, und darunter bleibt sie es Bildpunkt
 * für Bildpunkt. Am Desktop stand sie als Streifen in der Mitte, „Weiter“ als
 * Leiste ganz unten, links und rechts je 450 px leer (Kunde, 27.09.2026). Hier
 * wird der Fuß zur Karte neben dem Formular, die unter dem Planerkopf klebt.
 */
@media (min-width: 992px) {
  .upl {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    column-gap: 40px;
    align-content: start;
    /* Ein kurzer Schritt reicht trotzdem bis an den unteren Rand (Tim, 25.09.2026). */
    min-height: calc(100vh - var(--upl-oben-anfang, 0px));
  }
  .upl > * { grid-column: 1; }
  .upl > .upl-kopf { grid-column: 1 / -1; }
  .upl-kopf > nav, .upl-kopf > .upl-schrittzeile { padding-right: 210px; }
  .upl-kopftelefon { display: block; position: absolute; top: 12px; right: 16px; text-align: right; font-size: 14px; }
  .upl > .upl-fuss {
    grid-column: 2;
    /*
     * Über ALLE Zeilen der linken Spalte: mehr Zeilen, als das Formular Kinder
     * im Fluss hat (auch mit allen Schritten und Blättern der Vorschau sind es
     * keine 20), leere Zeilen sind 0 px hoch. Ein klebendes Rasterelement
     * klebt innerhalb seines Rasterbereichs — so lässt der Fuß am Ende des
     * Formulars los statt am Ende der ersten Zeile.
     */
    grid-row: 2 / span 40;
    align-self: start;
    position: sticky;
    top: calc(var(--upl-oben, 0px) + var(--upl-kopf, 76px) + 24px);
    bottom: auto;
    margin: 24px 0 0;
    padding: 18px;
    border: 1px solid var(--upl-linie);
    border-radius: var(--upl-r-gross);
  }
  .upl-seitenblick:not([hidden]) { display: block; margin: -6px 0 12px; font-size: 15px; }
  .upl-seitenblick .upl-summe { padding: 8px 0; }
  .upl-last { flex-wrap: wrap; }
  .upl-lastbalken { flex-basis: 100%; order: -1; }

  /* Die Blätter als Dialog in der Mitte, nicht als Telefonblatt am Rand. */
  .upl-blatt {
    margin: auto;
    max-height: min(86vh, 760px);
    max-height: min(calc(var(--upl-sicht-hoehe, 100dvh) * .86), 760px);
    padding-bottom: 20px;
    border-radius: 22px;
  }
  .upl-meldung { bottom: 24px; }
}