/* KI-Werk – Handy zuerst. Farben: Werksblau + Sicherheitsgelb wie die Markierungen im Werksbild. */
:root {
  --blau: #0b2545;
  --blau-2: #13315c;
  --gelb: #f5b700;
  --gelb-dunkel: #b98900;
  --grund: #eef1f5;
  --karte: #ffffff;
  --text: #0f172a;
  --text-2: #526077;
  --rand: #d9dfe8;
  --ok: #15803d;
  --warn: #b45309;
  --rot: #c62828;
  --info: #1d4ed8;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .06);
  --nav-hoehe: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 16px);
}
a { color: var(--info); }
h1 { font-size: 1.5rem; margin: .2em 0 .4em; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 0 0 .5em; }
h3 { font-size: .95rem; margin: 1.1em 0 .3em; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); }
p { margin: .4em 0; }
code { font-size: .85em; word-break: break-all; background: #f1f4f8; padding: 1px 4px; border-radius: 4px; }
.leise { color: var(--text-2); }
.klein { font-size: .88rem; }
.gross { font-size: 1.15rem; }
.nur-pc { display: none !important; }

/* ---------- Kopf und Navigation ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--blau); color: #fff;
  padding-top: env(safe-area-inset-top);
  border-bottom: 3px solid var(--gelb);
}
.kopf-innen { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 750; font-size: 1.1rem; }
.logo svg { width: 26px; height: 26px; color: var(--gelb); }
.nav-oben { display: none; }
.person-chip {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  color: #fff; text-decoration: none; font-size: .9rem;
  background: rgba(255, 255, 255, .12); padding: 6px 12px; border-radius: 999px;
}
.person-chip svg { width: 18px; height: 18px; }

.nav-unten {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--rand);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
}
.nav-unten a {
  height: var(--nav-hoehe); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-2); text-decoration: none; font-size: .72rem; font-weight: 600;
}
.nav-unten svg { width: 24px; height: 24px; }
.nav-unten a[aria-current] { color: var(--blau); }
.nav-unten a[aria-current] svg { color: var(--gelb-dunkel); }
.nav-unten a.neu svg { width: 30px; height: 30px; padding: 4px; border-radius: 10px; background: var(--gelb); color: var(--blau); }

.seite { max-width: 1140px; margin: 0 auto; padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); }
.titelzeile { margin-bottom: 10px; }
.titelzeile h1 { margin-bottom: 0; }
.zurueck { display: inline-block; margin: 2px 0 8px; text-decoration: none; font-weight: 600; }

/* ---------- Bausteine ---------- */
.karte {
  background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 16px; margin: 0 0 14px;
}
.karte.schmal { max-width: 520px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 2px solid var(--blau);
  background: var(--blau); color: #fff; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { transform: translateY(1px); }
.knopf.gelb { background: var(--gelb); border-color: var(--gelb); color: var(--blau); }
.knopf.zweit { background: #fff; color: var(--blau); }
.knopf.gefahr { background: #fff; color: var(--rot); border-color: #f0b4b4; }
.knopf.ok { background: var(--ok); border-color: var(--ok); }
.knopf.gross { min-height: 56px; font-size: 1.08rem; width: 100%; }
.knopf.klein { min-height: 36px; padding: 6px 12px; font-size: .9rem; border-radius: 10px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.meldung { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; font-weight: 600; transition: opacity .4s; }
.meldung.ok { background: #e7f6ec; color: #14532d; border: 1px solid #b7e2c4; }
.meldung.fehler { background: #fdecec; color: #7f1d1d; border: 1px solid #f3c0c0; }
.meldung.info { background: #eaf1fe; color: #1e3a8a; border: 1px solid #c4d6fb; }
/* Springt die Seite zu einem Abschnitt, bleibt die Meldung trotzdem sichtbar: direkt unter dem Kopf, der Abschnitt darunter */
.seite > .meldung { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 15; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; }  /* eine lange Meldung verdeckt nie die Seite, sie scrollt in sich */
html:has(.seite > .meldung) { scroll-padding-top: calc(150px + env(safe-area-inset-top)); }
.hinweis-box { background: #fff8e1; border: 1px solid #f2dd9a; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
ul.schlicht { list-style: none; padding: 0; margin: 0; }
ul.schlicht li { padding: 6px 0; border-bottom: 1px solid #eef1f5; }
ul.schlicht li:last-child { border-bottom: 0; }

/* Status eines Teils */
.pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #e2e8f0; color: #334155; }
.pill-neu { background: #e2e8f0; color: #334155; }
.pill-text_fertig { background: #fef9c3; color: #854d0e; }
.pill-freigegeben { background: #dcfce7; color: #166534; }
.pill-in_rutsche { background: #dbeafe; color: #1e40af; }
.pill-in_arbeit { background: #e0e7ff; color: #3730a3; }
.pill-online { background: #ccfbf1; color: #115e59; }
.pill-verkauft { background: #fef3c7; color: #92400e; }
.pill-versendet { background: #f1f5f9; color: #475569; }
.pill-offen { background: #dbeafe; color: #1e40af; }

/* Status einer Figur */
.fstatus { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.fstatus-pause { background: #e2e8f0; color: #475569; }
.fstatus-arbeitet { background: #dbeafe; color: #1e40af; }
.fstatus-wartet { background: #fef3c7; color: #92400e; }
.fstatus-fertig { background: #dcfce7; color: #166534; }
.fstatus-braucht_dich { background: #fee2e2; color: #991b1b; }
.fstatus-pruefen { background: #ffedd5; color: #c2410c; }
.fstatus-verdacht { background: #f3e8ff; color: #7e22ce; }

/* ---------- Werksbild mit Hallen und Figuren ---------- */
.werksbild {
  position: relative; container-type: inline-size;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); margin-bottom: 14px;
  background: #5b6470;
}
.werksbild img { display: block; width: 100%; height: auto; }
.flaeche {
  position: absolute; display: flex; align-items: flex-start; justify-content: center;
  border-radius: 8px; text-decoration: none; transition: background .2s, box-shadow .2s;
}
.flaeche:hover, .flaeche:focus-visible { background: rgba(245, 183, 0, .18); box-shadow: inset 0 0 0 2px var(--gelb); outline: none; }
.schild {
  margin-top: 4%; padding: .25em .6em; border-radius: .45em;
  background: rgba(11, 37, 69, .9); color: #fff; font-weight: 700; white-space: nowrap;
  font-size: clamp(8px, 1.45cqw, 16px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); border-bottom: .18em solid var(--gelb);
}
.flaeche.bau { align-items: center; }
.schild-bau { background: rgba(255, 255, 255, .85); color: var(--blau); border: .14em dashed var(--blau-2); border-bottom-width: .14em; }
.zahl { display: inline-block; min-width: 1.5em; margin-left: .25em; padding: 0 .35em; border-radius: 999px; text-align: center; background: var(--gelb); color: var(--blau); }
.zahl-braucht_dich { background: #ef4444; color: #fff; }
/* Farben wie im Lager (Robin, 03.11.2026): orange zu prüfen, rot echte Probleme, lila Verdacht */
.zahl-rot { background: #ef4444; color: #fff; }
.zahl-orange { background: #f97316; color: #fff; }
.zahl-lila { background: #9333ea; color: #fff; }
.zahl-wartet { background: var(--gelb); }
.zahl-arbeitet { background: #3b82f6; color: #fff; }
.schild-claude { background: rgba(194, 65, 12, .92); }  /* Claude ist der orange LKW „Cloud AI“ */

.figur {
  position: absolute; transform: translate(-50%, -100%);
  width: clamp(24px, 4.6cqw, 62px); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45));
  -webkit-tap-highlight-color: transparent;
}
.figur .mensch { width: 100%; height: auto; }
.figur-name {
  margin-top: -2px; padding: .05em .45em; border-radius: .4em; background: #fff; color: var(--blau);
  font-weight: 750; font-size: clamp(7px, 1.15cqw, 13px); white-space: nowrap;
}
.figur:hover .mensch, .figur:focus-visible .mensch { transform: translateY(-3px); }
.figur:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 8px; }
.blase {
  position: absolute; top: -.2em; right: -.5em; width: 1.5em; height: 1.5em; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: clamp(8px, 1.2cqw, 14px);
  background: #ef4444; color: #fff; border: 2px solid #fff; animation: puls 1.6s infinite;
}
.blase.pause { background: #64748b; animation: none; font-style: italic; }
.fstatus-pause .mensch .auge { transform: scaleY(.2); }
.fstatus-arbeitet .mensch { animation: arbeiten 1.1s ease-in-out infinite; }
.fstatus-braucht_dich .antenne, .fstatus-rahmen-braucht_dich .antenne { fill: #ef4444; animation: blinken 1s steps(2) infinite; }
.mensch .auge { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
@keyframes arbeiten { 50% { transform: translateY(-3px); } }
@keyframes puls { 50% { transform: scale(1.15); } }
@keyframes blinken { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .blase, .fstatus-arbeitet .mensch, .antenne { animation: none !important; } }

/* Hallen-Karten unter dem Bild */
.hallen-karten { display: grid; gap: 12px; }
.halle-karte { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-left: 5px solid #cbd5e1; }
.status-rand-braucht_dich { border-left-color: #ef4444; }
.status-rand-pruefen { border-left-color: #f97316; }
.status-rand-verdacht { border-left-color: #9333ea; }
.status-rand-wartet { border-left-color: var(--gelb); }
.status-rand-fertig { border-left-color: #22c55e; }
.status-rand-arbeitet { border-left-color: #3b82f6; }
.halle-karte h2 { margin: 0; font-size: 1.05rem; }
.halle-karte h2 a { color: inherit; text-decoration: none; }
.halle-karte-text { flex: 1; min-width: 0; }
.halle-karte-text p { margin: .15em 0; }
.karte-figur { flex: none; width: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.karte-figur .mensch { width: 100%; height: auto; }
.leitung-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #e8edf4; color: var(--blau); font-size: 1.6rem; }
.leitung-symbol svg { width: 30px; height: 30px; }
.leitung-symbol.gross { width: 76px; height: 76px; }
.leitung-symbol.gross svg { width: 44px; height: 44px; }
.pfeil { flex: none; font-size: 2rem; line-height: 1; color: var(--text-2); text-decoration: none; padding: 4px 6px; }
.bau-karte { border-left-style: dashed; }

.handy-hinweis { display: flex; gap: 16px; align-items: center; }
.handy-hinweis img { flex: none; border-radius: 8px; background: #fff; }
.ideen { columns: 2; padding-left: 1.2em; }

/* Akte einer Figur */
.akte {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow: auto;
  border: 0; border-radius: 18px; padding: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.akte::backdrop { background: rgba(11, 37, 69, .55); }
.akte-zu { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #eef1f5; font-size: 1.1rem; cursor: pointer; }
.akte-kopf { display: flex; gap: 14px; align-items: center; }
.akte-kopf h2 { margin: 0; font-size: 1.4rem; }
.akte-figur { flex: none; width: 76px; padding: 6px; border-radius: 16px; background: #f1f5f9; border: 3px solid #cbd5e1; cursor: pointer; }
.akte-figur .mensch { width: 100%; height: auto; display: block; }
.fstatus-rahmen-braucht_dich { border-color: #ef4444; }
.fstatus-rahmen-pruefen { border-color: #f97316; }
.fstatus-rahmen-verdacht { border-color: #9333ea; }
.fstatus-rahmen-wartet { border-color: var(--gelb); }
.fstatus-rahmen-fertig { border-color: #22c55e; }
.fstatus-rahmen-arbeitet { border-color: #3b82f6; }
.fstatus-rahmen-pause .auge { transform: scaleY(.2); }
.akte-liste { padding-left: 1.1em; margin: .3em 0; }
.akte-liste li { margin: .2em 0; }

.halle-kopf { display: flex; gap: 14px; align-items: flex-start; }
.halle-kopf h1 { margin: 0 0 .1em; }
.halle-kopf-text { flex: 1; min-width: 0; }

/* Kacheln mit Zahlen */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kachel { background: #fff; border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--text); box-shadow: var(--schatten); border-top: 4px solid #cbd5e1; }
.kachel b { display: block; font-size: 1.5rem; line-height: 1.1; }
.kachel span { font-size: .8rem; color: var(--text-2); }
.pill-rand-text_fertig { border-top-color: #eab308; }
.pill-rand-freigegeben { border-top-color: #22c55e; }
.pill-rand-in_rutsche { border-top-color: #3b82f6; }
.pill-rand-in_arbeit { border-top-color: #6366f1; }
.pill-rand-online { border-top-color: #14b8a6; }
.pill-rand-verkauft { border-top-color: var(--gelb); }
.pill-rand-versendet { border-top-color: #94a3b8; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 12px; }
.formular label, .feld { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
input, select, textarea {
  font: inherit; font-size: 16px; /* 16 px verhindert das Hineinzoomen auf dem iPhone */
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--rand); border-radius: 10px; background: #fff; color: var(--text);
}
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blau-2); box-shadow: 0 0 0 3px rgba(19, 49, 92, .15); }
.haken { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; }
.haken input { width: 22px; height: 22px; flex: none; accent-color: var(--blau); }
fieldset { border: 1.5px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
legend { font-weight: 650; font-size: .92rem; padding: 0 4px; }
.aufklapp { border: 1.5px solid var(--rand); border-radius: 12px; margin: 8px 0; background: #fbfcfe; }
.aufklapp > summary { cursor: pointer; padding: 12px 14px; list-style-position: inside; }
.aufklapp[open] > summary { border-bottom: 1px solid var(--rand); }
.aufklapp > .formular, .aufklapp > .aufklapp-inhalt { padding: 14px; }
.aufklapp.neu { border-style: dashed; }
.sprungmarken { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sprungmarken a { background: #fff; padding: 6px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: var(--schatten); }
.figur-zeile { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 10px; align-items: end; }
.figur-klein .mensch { width: 44px; height: auto; }
.personen { display: grid; gap: 10px; margin-top: 12px; }

/* ---------- Neues Teil ---------- */
.schritt { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.schritt b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blau); color: #fff; font-size: .85rem; flex: none; }
.paket-info { font-size: .9rem; color: var(--text-2); margin-top: 6px; }
.foto-knoepfe { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #e2e8f0; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .weg {
  position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(15, 23, 42, .75); color: #fff; font-size: 1rem; cursor: pointer;
}
.foto .marke-titel { position: absolute; left: 4px; bottom: 4px; background: var(--gelb); color: var(--blau); font-size: .7rem; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.foto .nr { position: absolute; left: 4px; top: 4px; background: rgba(255, 255, 255, .85); font-size: .72rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; }
.foto.fehlt { outline: 3px solid #ef4444; }
.foto-leer { padding: 18px; text-align: center; border: 2px dashed var(--rand); border-radius: 12px; color: var(--text-2); }
.masse { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mass label { font-weight: 600; font-size: .9rem; display: grid; gap: 4px; }
.mass .erkannt { font-size: .8rem; min-height: 1.1em; color: var(--ok); }
.mass .erkannt.nein { color: var(--warn); }
.mass-einheit { position: relative; }
.mass-einheit::after { content: "cm"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-2); font-size: .9rem; pointer-events: none; }
.mass-einheit input { padding-right: 40px; }
.preis-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preis-wahl label { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--rand); border-radius: 12px; padding: 12px 8px; font-weight: 650; cursor: pointer; text-align: center; }
.preis-wahl input { width: auto; accent-color: var(--blau); }
.preis-wahl label:has(input:checked) { border-color: var(--blau); background: #eef3fb; }
.euro-feld { position: relative; }
.euro-feld::after { content: "€"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); }
/* Foto ohne Vorschau (der Browser kann die Datei nicht anzeigen, z. B. HEIC am PC): breite Kachel mit Dateiname, ★ und ✕ stehen rechts */
.foto.ohne-vorschau { grid-column: span 2; aspect-ratio: auto; min-height: 96px; padding: 26px 46px 8px 8px; background: #f1f5f9; border: 1.5px dashed #94a3b8; }
.foto.ohne-vorschau .stern { left: auto; right: 6px; bottom: 6px; }
.foto.ohne-vorschau .marke-titel { left: 30px; top: 4px; bottom: auto; }
.ersatz { display: block; font-size: .78rem; line-height: 1.25; color: var(--text-2); overflow-wrap: anywhere; }
.ersatz b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 2px; color: var(--text); }
.speichern-leiste { position: sticky; bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 8px); z-index: 5; }
html:has(.speichern-leiste) { scroll-padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 80px); }  /* ein angetipptes Feld bleibt über der Leiste */
.speichern-leiste .knopf[disabled] { opacity: 1; background: #475569; border-color: #475569; }  /* lesbar, solange übertragen wird */
.fortschritt-feld { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); }
.fortschritt { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.fortschritt span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.fortschritt.arbeitet span { width: 100% !important; animation: fortschritt-puls 1.2s ease-in-out infinite; }  /* Fortschritt gerade nicht messbar */
@keyframes fortschritt-puls { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .fortschritt.arbeitet span { animation: none; } }
.fortschritt-text { margin: 6px 0 0; font-size: .88rem; font-weight: 600; }
.anmelde-feld { margin-top: 14px; }
.anmelde-feld h2 { margin-bottom: .2em; }

/* ---------- Teile ---------- */
.filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; -webkit-overflow-scrolling: touch; }
.filter a { flex: none; background: #fff; border: 1.5px solid var(--rand); padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .88rem; }
.filter a[aria-current] { background: var(--blau); border-color: var(--blau); color: #fff; }
.teile-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.teile-liste > li > a, .teile-liste > li > .zeile {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--text); box-shadow: var(--schatten);
}
.teile-liste.flach > li > a { box-shadow: none; border: 1px solid #edf0f4; }
.teil-text { flex: 1; min-width: 0; display: grid; }
.teil-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teil-text code { overflow-wrap: anywhere; }  /* lange Namen von Meldungen unter „Bitte ansehen“ */
.mini { width: 58px; height: 58px; flex: none; border-radius: 10px; object-fit: cover; background: #e2e8f0; }
.kein-foto { display: grid; place-items: center; font-size: .65rem; color: var(--text-2); text-align: center; }
.warnung { color: var(--warn); font-weight: 600; }

.teil-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teil-kopf h1 { margin: 0; }
.pruefliste { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pruefliste li { background: #fff1f1; color: #8a1c1c; border: 1px solid #f6caca; padding: 3px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.foto-werkzeug { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 4px; background: linear-gradient(transparent, rgba(15, 23, 42, .6)); }
.foto .weg-form { position: absolute; top: 0; right: 0; margin: 0; }
.foto .marke-titel.oben { top: 4px; bottom: auto; }
.foto-werkzeug form { margin: 0; }
.foto-werkzeug button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .9); font-size: .9rem; cursor: pointer; }
.zeichen { font-size: .8rem; color: var(--text-2); text-align: right; }
.verlauf { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.verlauf li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.zwei-spalten { display: grid; gap: 12px; }
.daten-liste { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.daten-liste dt { color: var(--text-2); }
.daten-liste dd { margin: 0; font-weight: 600; }
.laden-hinweis { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(11, 37, 69, .6); color: #fff; font-weight: 700; font-size: 1.1rem; }
.laden-hinweis.an { display: grid; }

/* ---------- Vinted-Abteilung ---------- */
.konten-board { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.konto-karte { border: 1.5px solid var(--rand); border-radius: 12px; padding: 12px; background: #fbfcfe; }
.konto-karte h3 { margin: 0 0 4px; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 1rem; }
.balken { height: 10px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin: 6px 0 4px; display: flex; }
.balken .g { background: #14b8a6; }
.balken .e { background: #3b82f6; }
.auftrag-konto { margin-top: 14px; }
.auftrag-konto h3 { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 1rem; }
.auftrag-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.auftrag-knoepfe form { margin: 0; }
.startsatz { width: 100%; font-size: .92rem; min-height: 110px; background: #f8fafc; }
.tage { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tage a { background: #fff; border: 1.5px solid var(--rand); padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 600; font-size: .88rem; }
.tage a[aria-current] { background: var(--blau); color: #fff; border-color: var(--blau); }
.einplanen { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.einplanen select { width: auto; min-width: 160px; }

/* ---------- Größere Bildschirme ---------- */
@media (min-width: 760px) {
  .hallen-karten { grid-template-columns: 1fr 1fr; }
  .masse { grid-template-columns: repeat(3, 1fr); }
  .zwei-spalten { grid-template-columns: 1fr 1fr; align-items: start; }
  .knopf.gross { width: auto; min-width: 260px; }
}
@media (min-width: 1000px) {
  body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .nav-unten { display: none; }
  .nur-pc { display: flex !important; }
  .nav-oben { display: flex; gap: 4px; margin-left: 18px; }
  .nav-oben a { color: #dbe4f0; text-decoration: none; font-weight: 600; padding: 8px 12px; border-radius: 10px; }
  .nav-oben a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .nav-oben a[aria-current] { background: rgba(245, 183, 0, .18); color: #fff; box-shadow: inset 0 -2px 0 var(--gelb); }
  .hallen-karten { grid-template-columns: repeat(3, 1fr); }
  .speichern-leiste { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .seite { padding: 20px max(24px, env(safe-area-inset-right)) 20px max(24px, env(safe-area-inset-left)); }
  .seite > .meldung { top: calc(62px + env(safe-area-inset-top)); }  /* der Kopf ist mit dem Menü etwas höher */
}

/* ---------- Menschenfiguren, Hineinzoomen, Innenansicht der Hallen ---------- */
.werksbild-innen { position: relative; transform-origin: 0 0; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.werksbild.zoomt .schild { opacity: 0; transition: opacity .2s; }
.kopf-mini {
  position: relative; display: inline-block; vertical-align: middle; width: 1.75em; height: 1.75em; margin-left: .3em;
  border-radius: 50%; box-shadow: 0 0 0 .14em #fff;
}
.kopf-mini svg { width: 100%; height: 100%; display: block; border-radius: 50%; }
.kopf-mini i {
  position: absolute; right: -.55em; top: -.45em; font-style: normal; font-size: .8em; line-height: 1;
  background: #fff; border-radius: 999px; padding: .1em .2em; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.kopf-mini i.rot { background: #ef4444; color: #fff; font-weight: 800; padding: .1em .38em; animation: puls 1.6s infinite; }
.ring-braucht_dich { box-shadow: 0 0 0 .16em #ef4444; }
.ring-pruefen { box-shadow: 0 0 0 .16em #f97316; }
.ring-verdacht { box-shadow: 0 0 0 .16em #9333ea; }
.kopf-mini i.lila { background: #9333ea; color: #fff; font-weight: 800; padding: .1em .38em; }
.ring-wartet { box-shadow: 0 0 0 .16em var(--gelb); }
.ring-arbeitet { box-shadow: 0 0 0 .16em #3b82f6; }
.ring-fertig { box-shadow: 0 0 0 .16em #22c55e; }

.halle-innen {
  position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
  margin-bottom: 14px; background: #dde3ea; animation: reinzoomen .5s cubic-bezier(.2, .7, .3, 1);
}
.halle-innen > svg { display: block; width: 100%; height: auto; }
@keyframes reinzoomen { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
.zoom-raus {
  position: absolute; left: 10px; top: 10px; background: rgba(11, 37, 69, .85); color: #fff; text-decoration: none;
  font-weight: 700; font-size: .85rem; padding: 5px 10px; border-radius: 999px;
}
.sprechblase rect, .sprechblase path { fill: #64748b; }
.sprechblase text { fill: #fff; }
.blase-braucht_dich rect, .blase-braucht_dich path { fill: #ef4444; }
.blase-pruefen rect, .blase-pruefen path { fill: #f97316; }
.blase-verdacht rect, .blase-verdacht path { fill: #9333ea; }
.blase-wartet rect, .blase-wartet path { fill: #f59e0b; }
.blase-arbeitet rect, .blase-arbeitet path { fill: #2563eb; }
.blase-fertig rect, .blase-fertig path { fill: #16a34a; }
.sprechblase { animation: schweben 2.4s ease-in-out infinite; transform-box: fill-box; }
.blase-braucht_dich { animation: schweben 1.2s ease-in-out infinite; }
@keyframes schweben { 50% { translate: 0 -3px; } }
.innen-figur.pause .auge { transform: scaleY(.2); }
.fstatus-arbeitet .innen-figur.arbeit, .fstatus-braucht_dich .innen-figur.arbeit { animation: arbeiten 1.4s ease-in-out infinite; transform-box: fill-box; }
.blitz { opacity: 0; }
.fstatus-arbeitet .blitz { animation: blitzen 2.2s infinite; }
@keyframes blitzen { 0%, 86%, 100% { opacity: 0; } 90% { opacity: .95; } }
.fstatus-arbeitet .cursor, .fstatus-wartet .cursor { animation: blinken 1s steps(2) infinite; }
.dampf { animation: dampfen 2.6s ease-in-out infinite; }
@keyframes dampfen { 0% { opacity: 0; translate: 0 2px; } 50% { opacity: 1; } 100% { opacity: 0; translate: 0 -3px; } }
.link-knopf { border: 0; background: none; padding: 0; color: var(--info); font: inherit; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .sprechblase, .innen-figur, .blitz, .dampf, .halle-innen { animation: none !important; }
  .werksbild-innen { transition: none; }
}
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.knopf { position: relative; }
.schild .kurz { display: none; }
@container (max-width: 640px) {
  .schild .lang { display: none; }
  .schild .kurz { display: inline; }
}
@media (min-width: 1000px) {
  .halle-innen { max-width: 880px; margin-left: auto; margin-right: auto; }
}

/* Etappe 5: Frieda und Theo über die Claude-API */
.ok-text { color: var(--ok); font-weight: 600; }
.ki-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef4ff; border: 1px solid #c9d8fb; border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; }
.ki-box p { margin: 2px 0 0; }
.ki-box.fehler { background: #fdecec; border-color: #f3c0c0; color: #7f1d1d; }
.ki-dreher { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #c9d8fb; border-top-color: var(--info); animation: ki-dreht 0.9s linear infinite; flex: none; }
@keyframes ki-dreht { to { transform: rotate(360deg); } }
.ki-hinweise { background: #fff8e1; border: 1px solid #f2dd9a; border-radius: 12px; padding: 10px 14px; margin: 12px 0 8px; }
.ki-hinweise ul { margin: 6px 0 0; padding-left: 20px; }
.ki-hinweise li { margin: 3px 0; }
@media (prefers-reduced-motion: reduce) { .ki-dreher { animation: none; } }

/* Halle mit Robins 3D-Innenbild (zuerst die Texterei) */
.halle-innen.bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e7e1d9; }
.halle-innen.bild .innen-raum { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.innen-schild { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); background: var(--blau); color: #fff; font-weight: 800; letter-spacing: .08em; padding: .25em .9em; border-radius: 6px; border-bottom: 3px solid var(--gelb); font-size: clamp(11px, 1.7vw, 16px); white-space: nowrap; }
.innen-person { position: absolute; width: 11%; aspect-ratio: 1; left: var(--x); top: var(--y); transform: translate(-50%, -50%); transition: left 1.8s ease-in-out, top 1.8s ease-in-out; z-index: 2; }
.innen-person.arbeit { --x: var(--x-arbeit); --y: var(--y-arbeit); }
.innen-person.pause { --x: var(--x-pause); --y: var(--y-pause); }
.innen-person > img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; border: 3px solid #fff; outline: 3px solid var(--farbe); box-shadow: 0 8px 18px rgba(15, 23, 42, .35); }
.innen-name { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 18%); background: rgba(255, 255, 255, .92); color: var(--text); font-weight: 700; font-size: clamp(10px, 1.4vw, 13px); padding: 1px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(15, 23, 42, .15); }
.innen-blase { position: absolute; left: 78%; top: -28%; min-width: 2.2em; text-align: center; background: #fff; border-radius: 12px; padding: .15em .5em; font-weight: 800; font-size: clamp(12px, 2vw, 18px); box-shadow: 0 3px 10px rgba(15, 23, 42, .2); }
.innen-blase::after { content: ""; position: absolute; left: 18%; bottom: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }
.innen-blase.blase-braucht_dich { background: #ef4444; color: #fff; }
.innen-blase.blase-braucht_dich::after { border-top-color: #ef4444; }
.innen-blase.blase-pruefen { background: #f97316; color: #fff; }
.innen-blase.blase-pruefen::after { border-top-color: #f97316; }
.innen-blase.blase-verdacht { background: #9333ea; color: #fff; }
.innen-blase.blase-verdacht::after { border-top-color: #9333ea; }
.innen-blase.blase-fertig { color: var(--ok); }
.innen-blase .punkte { display: inline-flex; gap: 3px; align-items: center; height: 1em; }
.innen-blase .punkte i { width: .32em; height: .32em; border-radius: 50%; background: var(--info); animation: tippt 1.1s infinite ease-in-out; }
.innen-blase .punkte i:nth-child(2) { animation-delay: .15s; }
.innen-blase .punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes tippt { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-35%); opacity: 1; } }
.fstatus-arbeitet .innen-person > img { animation: nickt 1.3s ease-in-out infinite; }
.fstatus-pause .innen-person > img, .fstatus-fertig .innen-person > img { animation: atmet 4s ease-in-out infinite; }
.innen-person.laeuft > img { animation: laeuft .42s ease-in-out infinite; }
@keyframes nickt { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes atmet { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes laeuft { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .innen-person { transition: none; }
  .innen-person > img, .innen-blase .punkte i { animation: none !important; }
}
.akte-figur .figur-foto { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.still .halle-innen { animation: none; }
.foto .stern { position: absolute; left: 4px; bottom: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--gelb-dunkel); font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(15, 23, 42, .25); }
.foto .stern:hover, .foto .stern:focus-visible { background: var(--gelb); color: var(--blau); }

/* 3D-Halle mit Robins Szenen: Szene oben, leeres Büro darunter, beim Platzwechsel läuft die Figur */
.halle-innen.szenen .innen-szene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .45s ease; z-index: 1; }
.halle-innen.szenen .innen-szene.weg { opacity: 0; }
.innen-laeufer { position: absolute; z-index: 2; aspect-ratio: 231 / 360; overflow: hidden; transform: translate(-50%, -100%);
  transition: left 2.2s linear, top 2.2s linear, height 2.2s linear; filter: drop-shadow(0 6px 4px rgba(15, 23, 42, .22)); }
.innen-laeufer.links { transform: translate(-50%, -100%) scaleX(-1); }
.innen-laeufer img { height: 100%; width: 400%; max-width: none; display: block; animation: gehen .72s steps(4) infinite; }
@keyframes gehen { to { transform: translateX(-100%); } }
.halle-innen.szenen .innen-blase { z-index: 3; transform: translate(-50%, -100%); transition: opacity .3s ease; }
.halle-innen.szenen .innen-blase::after { left: 50%; margin-left: -6px; }
.halle-innen.szenen .innen-blase.weg { opacity: 0; }
.halle-innen .innen-schild, .halle-innen .zoom-raus { z-index: 4; }
.vorfuehren { position: absolute; z-index: 4; right: 1.5%; top: 3%; display: flex; gap: 4px; opacity: .45; transition: opacity .2s; }
.vorfuehren:hover, .vorfuehren:focus-within { opacity: 1; }
.vorfuehren button { font: inherit; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .18); background: rgba(255, 255, 255, .8); color: var(--text); cursor: pointer; }
.vorfuehren button:hover { background: #fff; }
.vorfuehren button[aria-pressed="true"] { background: var(--blau); color: #fff; border-color: var(--blau); }
@media (prefers-reduced-motion: reduce) { .innen-laeufer img { animation: none; } .innen-laeufer { transition: none; } }

/* Vinted-Abteilung: Zeitfenster je Konto und in den Auftragslisten */
.fenster-liste { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 3px; font-size: .85rem; }
.fenster-liste li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 8px; border-radius: 8px; background: #f1f5f9; }
.fenster-liste li.voll { background: #dcfce7; }
.fenster-liste li.vorbei { opacity: .5; }
.fenster-block { border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 12px; }
.fenster-titel { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auftrag-konto h4 { margin: 8px 0 4px; }
.fenster-zeile { display: grid; grid-template-columns: 2fr 1fr 1fr 70px; gap: 8px; align-items: end; }
@media (max-width: 560px) { .fenster-zeile { grid-template-columns: 1fr 1fr; } }
.pill.sicherheit-hoch { background: #dcfce7; color: #166534; }
.pill.sicherheit-mittel { background: #fef3c7; color: #92400e; }
.pill.sicherheit-niedrig { background: #fee2e2; color: #991b1b; }

/* ---------- Lager nach Robins Entwurf (02.11.2026): Regal mit Kacheln, Farben, Suche ---------- */
.lager-seite .seite { max-width: 1440px; }
.lager-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lager-kopf h2 { margin: 0; }
.lager-titelzeile { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; margin: 2px 0 16px; }
.lager-titelzeile h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 850; letter-spacing: -.02em; color: var(--blau); display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.lager-unterzeile { font-size: 1.1rem; font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.lager-filter { display: flex; gap: 10px; flex-wrap: wrap; }
.lager-filter a { background: #fff; border: 1.5px solid var(--rand); padding: 8px 20px; border-radius: 999px; text-decoration: none; color: var(--text); font-weight: 650; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.lager-filter a[aria-current] { background: var(--blau); border-color: var(--blau); color: #fff; }
.lager-filter .anzahl { font-weight: 500; opacity: .65; }
.lager-suche { margin-left: auto; position: relative; flex: 0 1 290px; min-width: 210px; }
.lager-suche svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }
.lager-suche input { width: 100%; padding: 10px 14px 10px 40px; border: 1.5px solid var(--rand); border-radius: 12px; font: inherit; background: #fff; }
.such-zeile { margin: -6px 0 12px; font-weight: 600; }
.lager-regal { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 18px; padding: 18px; box-shadow: inset 0 1px 3px rgba(15, 23, 42, .05); }
.lager-regal > p, .lager-regal > .knopfreihe { margin: 14px 0 0; }
.lager-sammel { margin: 0 0 14px; }
/* Höchstens 5 Teile pro Reihe (Robin, 02.11.2026), darunter scrollt die Seite. Jede Spalte ist mindestens 200 px
   und mindestens ein Fünftel breit. grid-auto-rows 1fr: Reihen mit nur freien Plätzen sind so hoch wie Reihen mit Teilen */
.lager-kacheln { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 72px) / 5)), 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 560px) { .lager-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lager-regal { padding: 10px; } }
.lager-kachel { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 2.5px solid #cbd5e1; border-radius: 14px; overflow: hidden; user-select: none; box-shadow: var(--schatten); cursor: pointer; }
.lager-kachel.offen { outline: 3px solid var(--gelb); outline-offset: 2px; }
.kachel-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: var(--text); }
.kachel-bild { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #e2e8f0; }
.kachel-text { display: flex; flex-direction: column; gap: 1px; padding: 10px 13px 11px; line-height: 1.3; }
.kachel-nummer { font-size: 1.02rem; }
.kachel-name { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-preis { color: var(--text-2); }
.kachel-status { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 48px; font-weight: 750; background: #f1f5f9; color: #475569; }
.status-symbol { flex: none; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: #94a3b8; color: #fff; font-weight: 900; line-height: 1; }
.status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-rein { margin: 0 0 0 auto; flex: none; }
.pfeil-rutsche { width: 36px; height: 30px; border-radius: 9px; border: 0; background: var(--blau); color: #fff; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.pfeil-rutsche:hover { background: var(--blau-2); }
/* Farben: lila Verdacht, grau in Arbeit, rot fehlt etwas, orange zu prüfen, grün freigegeben */
.lager-kachel.farbe-lila { border-color: #9333ea; }
.farbe-lila .kachel-status, .detail-schild.farbe-lila { background: #f3e8ff; color: #7e22ce; }
.farbe-lila .status-symbol { background: #9333ea; }
.lager-kachel.farbe-grau { border-color: #cbd5e1; }
.farbe-grau .kachel-bild { opacity: .6; }
.farbe-grau .status-symbol { background: #94a3b8; }
.lager-kachel.farbe-rot { border-color: #ef4444; }
.farbe-rot .kachel-status, .detail-schild.farbe-rot { background: #fee2e2; color: #b91c1c; }
.farbe-rot .status-symbol { background: #ef4444; }
.lager-kachel.farbe-orange { border-color: #f97316; }
.farbe-orange .kachel-status, .detail-schild.farbe-orange { background: #ffedd5; color: #c2410c; }
.farbe-orange .status-symbol { background: #f97316; }
.lager-kachel.farbe-gruen { border-color: #22c55e; }
.farbe-gruen .kachel-status, .detail-schild.farbe-gruen { background: #dcfce7; color: #15803d; }
.farbe-gruen .status-symbol { background: #22c55e; }
/* Suchtreffer außerhalb des Lagers (Rutsche, online, verkauft, versendet) */
.lager-kachel.farbe-aus { border-color: #cbd5e1; border-style: dashed; }
.status-in_rutsche .status-symbol, .status-in_arbeit .status-symbol { background: #3b82f6; }
.status-online .status-symbol { background: #14b8a6; }
.status-verkauft .status-symbol { background: #d97706; }
/* Gold: verkauft, bleibt im Regal seines Kontos, bis Robin „Abgeschlossen“ klickt (03.11.2026) */
.lager-kachel.farbe-verkauft { border-color: #d4a017; box-shadow: 0 0 0 2px #fde68a, var(--schatten); }
.farbe-verkauft .kachel-status { background: #fef3c7; color: #92400e; }
.text-gold { color: #a16207; }
.knopf.gold { background: #d4a017; border-color: #d4a017; color: #fff; }
/* Grünes Band „Preischeck“ oben auf der Kachel: Klick zeigt Pauls Analyse */
.kachel-band { position: absolute; top: 0; left: 0; right: 0; z-index: 2; border: 0; padding: 6px 10px; background: #16a34a; color: #fff; font-weight: 800; font-size: .9rem; letter-spacing: .02em; cursor: pointer; text-align: center; }
.kachel-band:hover, .kachel-band:focus-visible { background: #15803d; outline: none; }
.kachel-band.offen { background: #86efac; color: #14532d; }
.band-mini { display: inline-block; background: #16a34a; color: #fff; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 6px; }
.pc-dialog { user-select: text; cursor: auto; width: min(680px, calc(100vw - 24px)); }
.pc-dialog h2 { margin: 0 44px 10px 0; }
.preischeck-box p { margin: 6px 0; }
.pc-preise { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-preise span { display: flex; flex-direction: column; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 6px 12px; }
.pc-preise small { color: var(--text-2); font-size: .75rem; }
.pc-preise b { font-size: 1.15rem; }
.pc-vergleiche, .monate { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0; }
.pc-vergleiche th, .pc-vergleiche td, .monate th, .monate td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.monate { max-width: 420px; }
.preischeck-auf summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Preis eintragen nach einem Preischeck: Robin entscheidet selbst */
.preis-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: #fff7ed; border: 2px solid #f97316; border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.preis-box label { display: flex; align-items: center; gap: 10px; margin: 0; }
.preis-box input { width: 110px; }
/* Felder im großen Fenster direkt anklicken und ändern */
.feld-wert[data-feld] { cursor: text; border-radius: 6px; padding: 0 3px; margin: 0 -3px; transition: background .15s; }
.feld-wert[data-feld]:hover, .feld-wert[data-feld]:focus-visible { background: #fef3c7; outline: 1px dashed #d4a017; }
.feld-wert.bearbeitet { display: block; background: none; outline: none; padding: 0; margin: 0; }
.feld-eingabe { width: 100%; font: inherit; }
textarea.feld-eingabe { min-height: 18em; white-space: pre-wrap; }
.feld-wert.speichert { opacity: .55; }
/* Fotos im großen Fenster per Ziehen umsortieren */
.detail-fotos[data-sortieren] a { cursor: grab; touch-action: pan-x; }
.detail-fotos.sortiert a { cursor: grabbing; }
.detail-fotos a.zieht { opacity: .5; outline: 3px dashed var(--gelb-dunkel); outline-offset: 2px; border-radius: 10px; }
.foto-tipp { margin: 0 0 6px; }
/* Neues Teil: Maße frei einsprechen */
.masse-text textarea { min-height: 7.5em; }
/* Freie Plätze im Regal: werk.js füllt die letzte Reihe auf und das Regal bis unter den Bildschirmrand */
.freier-platz { border: 2px dashed #cbd5e1; border-radius: 14px; background: #f1f5f9; display: grid; place-content: center; justify-items: center; gap: 10px; color: #94a3b8; font-weight: 700; min-height: 180px; }
.freier-platz svg { width: 64px; height: 64px; }
.lager-hinweis { position: fixed; left: 50%; bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 18px); transform: translateX(-50%); background: var(--blau); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 50; font-weight: 600; box-shadow: var(--schatten); }
/* Hellblau: freigegeben, liegt in der Rutsche und wartet auf Claude. Türkis: online auf Vinted. */
.lager-kachel.farbe-hellblau { border-color: #38bdf8; }
.farbe-hellblau .kachel-status, .detail-schild.farbe-hellblau { background: #e0f2fe; color: #0369a1; }
.farbe-hellblau .status-symbol { background: #0ea5e9; }
.lager-detail.rand-hellblau { border-color: #38bdf8; }
.lager-kachel.farbe-online { border-color: #14b8a6; }
.farbe-online .kachel-status { background: #ccfbf1; color: #0f766e; }
.farbe-online .status-symbol { background: #14b8a6; }
/* Kategorie und Sortierung unter der Titelzeile (Lager, Rutsche, Aktuell online) */
.ordnen { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: -4px 0 14px; }
.ordnen label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: var(--text-2); }
.ordnen select { width: auto; min-width: 170px; padding: 8px 12px; border-radius: 12px; }
.text-rot { color: #b91c1c; }

/* Auftragsrutsche nach Robins Entwurf: Warteschlange mit Nummern, hellblaue Kacheln, unten der Startsatz */
.frei-zahl { margin-left: auto; background: #e0f2fe; color: #075985; font-weight: 800; padding: 8px 18px; border-radius: 999px; white-space: nowrap; }
.filterzeile { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: -4px 0 14px; }
.filterzeile .ordnen { margin: 0; }
.regal-titel { margin: 0 0 10px; font-size: 1.35rem; }
.auftrag { display: flex; flex-direction: column; min-width: 0; }
.auftrag > .lager-kachel { flex: 1; }
.auftrag-platz { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 0 8px; font-weight: 750; }
.platz-nr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 800; font-size: .92rem; }
.rutsche-regal .freier-platz { margin-top: 40px; }
/* Konto direkt auf der Kachel ändern (Robin, 03.11.2026) */
.kachel-konto { margin: 0; padding: 0 12px 10px; }
.kachel-konto label { display: block; margin: 0; }
.kachel-konto select { width: 100%; min-width: 0; padding: 6px 6px; border-radius: 10px; font-size: .88rem; font-weight: 700; }
.auftrag-zeilen { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.auftrag-zeilen span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.auftrag-zeilen b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auftrag-zeilen svg { width: 18px; height: 18px; flex: none; color: var(--text-2); }
.auftrag-check { font-size: .86rem; color: var(--text-2); margin-top: 4px; }
.lager-kachel.postet { border-color: #818cf8; }
.lager-kachel.postet .kachel-status { background: #eef2ff; color: #3730a3; }
.rutsche-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--rand); margin-top: 16px; padding-top: 14px; }
.rutsche-fuss p { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; font-size: 1.05rem; }
.rutsche-fuss svg { width: 24px; height: 24px; flex: none; }
.rutsche-fuss .knopf svg { width: 20px; height: 20px; }
.konto-form { display: flex; gap: 8px; align-items: center; }
.konto-form select { width: auto; }
.lauf-abgebrochen { flex-basis: 100%; }

/* Aktuell online (Lars' Extraraum): je Konto ein Regal mit türkisen Kacheln */
.online-gruppe { margin-bottom: 16px; }
.online-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.online-kopf h2 { margin: 0; }
.online-knoepfe { flex-wrap: wrap; gap: 10px; }
.online-knoepfe form { margin: 0; }

/* Ein Teil groß über dem Lager. Meldungen schweben dann darüber, sonst lägen sie verdeckt dahinter */
body.overlay-offen { overflow: hidden; }
body.overlay-offen .seite > .meldung { position: fixed; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 45; width: min(680px, calc(100% - 32px)); margin: 0; box-shadow: 0 6px 24px rgba(15, 23, 42, .3); }
.lager-detail { scroll-margin-top: calc(24px + env(safe-area-inset-top)); }
.lager-overlay { position: fixed; inset: 0; z-index: 40; overflow-y: auto; padding: calc(24px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; justify-content: center; align-items: flex-start; }
.overlay-hintergrund { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); }
.lager-overlay .lager-detail { position: relative; width: min(1100px, 100%); margin: 0; }
.lager-detail { border: 3px solid #cbd5e1; }
.lager-detail.rand-lila { border-color: #9333ea; }
.lager-detail.rand-rot { border-color: #ef4444; }
.lager-detail.rand-orange { border-color: #f97316; }
.lager-detail.rand-gruen { border-color: #22c55e; }
.detail-schild { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 750; padding: 3px 12px 3px 4px; border-radius: 999px; background: #f1f5f9; color: #475569; max-width: 100%; }
.detail-schild .status-symbol { width: 24px; height: 24px; border-radius: 999px; font-size: .85rem; }
.verdacht-box { border: 2px solid #9333ea; background: #faf5ff; border-radius: 12px; padding: 10px 14px; margin: 10px 0; color: #3b0764; }
.verdacht-box p { margin: 4px 0; }
.knopf.lila { background: #9333ea; border-color: #9333ea; color: #fff; }
.text-lila { color: #7e22ce; }
.detail-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-kopf h2 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-blaettern { margin-left: auto; display: flex; gap: 6px; }
.detail-blaettern .knopf { min-height: 38px; min-width: 42px; padding: 6px 10px; }
.detail-fotos { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 6px; -webkit-overflow-scrolling: touch; }
.detail-fotos a { position: relative; flex: none; }
.detail-fotos img { height: 230px; width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; display: block; background: #e2e8f0; }
.detail-fotos .marke-titel, .detail-fotos .nr { position: absolute; left: 6px; top: 6px; font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.detail-fotos .marke-titel { background: var(--gelb); color: var(--blau); }
.detail-fotos .nr { background: rgba(255, 255, 255, .88); }
.detail-inhalt { display: grid; gap: 14px; }
@media (min-width: 900px) { .detail-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.detail-titel { font-size: 1.12rem; font-weight: 750; margin: 4px 0 10px; }
.detail-felder { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0; }
.detail-felder dt { color: var(--text-2); }
.detail-felder dd { margin: 0; font-weight: 600; }
.detail-beschreibung { white-space: pre-wrap; background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 12px; padding: 12px 14px; font-size: .92rem; line-height: 1.45; max-height: 420px; overflow-y: auto; }
.detail-knoepfe { align-items: flex-start; }
.an-theo { flex-basis: 100%; }
.an-theo > summary { list-style: none; display: inline-flex; }
.an-theo > summary::-webkit-details-marker { display: none; }
.an-theo[open] > summary { margin-bottom: 8px; }

.rutsche-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rutsche-zeile { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--rand); border-radius: 12px; padding: 8px; background: #fbfcfe; }
.rutsche-zeile.postet { border-color: #818cf8; background: #eef2ff; }
.rutsche-platz { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--blau); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.rutsche-text { flex: 1; min-width: 0; }
.rutsche-text p { margin: 4px 0; }
.rutsche-zeile-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.konto-schild { display: inline-block; background: #e0f2fe; color: #075985; font-weight: 700; font-size: .8rem; padding: 3px 9px; border-radius: 999px; cursor: default; }
.konto-wahl > summary.konto-schild { cursor: pointer; list-style: none; }
.konto-wahl > summary::-webkit-details-marker { display: none; }
.konto-wahl form { display: flex; gap: 6px; margin-top: 6px; }
.rutsche-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; font-size: .86rem; }
.rutsche-knoepfe form { margin: 0; }
.startsatz-kasten { margin-top: 14px; border-top: 1px dashed var(--rand); padding-top: 10px; }
.startsatz-kasten .startsatz { min-height: 64px; }

.bestand-spalten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bestand-spalte h3 { text-transform: none; letter-spacing: 0; color: var(--text); font-size: 1rem; margin-top: 0; }
.bestand-kachel { display: flex; gap: 10px; border: 1.5px solid var(--rand); border-radius: 12px; padding: 8px; margin-bottom: 8px; background: #fff; }
.bestand-kachel .teil-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kachel-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.kachel-knoepfe form { margin: 0; }
.ki-dreher.klein { width: 14px; height: 14px; border-width: 2px; vertical-align: middle; }
.verkauf-feld { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.verkauf-feld input { font-size: 1.05rem; }
[data-mikro].hoert { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.lars-karten { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lars-karte { border: 2px solid #86efac; border-radius: 12px; padding: 10px 12px; background: #f0fdf4; margin: 0; }
.lars-karte.unsicher { border-color: #fcd34d; background: #fffbeb; }
.lars-karte p { margin: 4px 0; }
.lars-teil { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.lars-teil.wahl { border: 1.5px solid var(--rand); border-radius: 10px; padding: 6px; background: #fff; cursor: pointer; }
.lars-teil.wahl input { flex: none; width: 22px; height: 22px; accent-color: var(--blau); }  /* sonst nimmt der Punkt die ganze Breite, und vom Titel bleibt nichts */
.lars-teil .teil-text { display: flex; flex-direction: column; min-width: 0; }
.lars-aktion { font-size: .95rem; }

/* Buchhaltung (Robin, 03.11.2026): Kennzahlen, Belege, Erlös */
.kennzahlen { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 14px; }
.kennzahl h2 { margin: 0 0 8px; font-size: 1.05rem; }
.kennzahl p { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0; }
.kennzahl .ergebnis { border-top: 1.5px solid #e2e8f0; padding-top: 6px; color: var(--ok); }
.kennzahl .ergebnis.minus { color: #b91c1c; }
.belege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.beleg { border: 1.5px solid #e2e8f0; border-radius: 12px; background: #fff; }
.beleg.zu-pruefen { border-color: #f97316; }
.beleg-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 12px; cursor: pointer; list-style: none; }
.beleg-zeile::-webkit-details-marker { display: none; }
.beleg-zeile .teil-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.beleg-pdf { display: grid; place-items: center; font-weight: 800; color: #b91c1c; font-size: .8rem; }
.beleg-betrag { white-space: nowrap; }
.beleg-betrag.plus { color: var(--ok); }
.beleg-status { white-space: nowrap; font-size: .8rem; font-weight: 750; padding: 3px 9px; border-radius: 999px; }
.beleg-status.offen { background: #ffedd5; color: #c2410c; }
.beleg-status.ok { background: #dcfce7; color: #15803d; }
.beleg-inhalt { padding: 4px 14px 12px; border-top: 1px solid #eef1f5; }
.beleg-form { margin-top: 6px; }
.erloes-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.erloes-form label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .85rem; font-weight: 600; }
.erloes-form input { width: 90px; }
@media (max-width: 560px) { .beleg-zeile { flex-wrap: wrap; } .erloes-form { flex-wrap: wrap; } }

[hidden] { display: none !important; }

/* Anmeldung (BAUPLAN-3.md Abschnitt 4) */
.anmelde-karte { margin: 24px auto; }
.anmelde-karte h1 { margin-top: 0; }
.einladungslink { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; padding: 10px; border: 1px solid var(--rand, #cbd5e1); border-radius: 10px; background: #fff; }

/* Speicher-Anzeige (BAUPLAN-3.md Abschnitt 6) */
.speicher-zeile { margin: 0 0 6px; }
.speicher-balken { height: 14px; margin: 0 0 8px; }
.speicher-balken span { display: block; height: 100%; background: var(--blau-2); }
.speicher.voll .speicher-balken span { background: #ef4444; }
.speicher.voll .speicher-zeile b { color: #b91c1c; }
.speicher-davon { margin: 0 0 2px; }
.speicher-liste { list-style: none; margin: 0; padding: 0; }
.speicher-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #eef1f5; }
.speicher-liste li:last-child { border-bottom: 0; }
.speicher-groesse { font-weight: 650; white-space: nowrap; }
/* Ab 80 %: ein echtes Problem, also rot */
.speicher-warnung { background: #fdecec; color: #7f1d1d; border: 2px solid #ef4444; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.speicher-warnung a { color: #7f1d1d; font-weight: 700; }

/* Seite „Stand“ (BAUPLAN-3.md Abschnitt 5a): kompakte Listen, Zeilen groß genug für den Daumen */
.stand { max-width: 760px; margin: 0 auto; }
.knopf.stand-neu { width: 100%; margin-bottom: 14px; }
.stand-neu svg { width: 26px; height: 26px; flex: none; }
.stand .schlicht li { overflow-wrap: anywhere; }  /* lange Namen bei den Abholern */
.stand-liste { list-style: none; margin: 0; padding: 0; }
.stand-liste > li { border-bottom: 1px solid #eef1f5; }
.stand-liste > li:last-child { border-bottom: 0; }
.stand-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; color: var(--text); text-decoration: none; }
.stand-text { flex: 1; min-width: 0; display: grid; overflow-wrap: anywhere; }
.stand-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-zahl { flex: none; min-width: 1.6em; text-align: right; font-size: 1.15rem; font-weight: 800; }
.stand-preis { flex: none; white-space: nowrap; }
.stand-pfeil { flex: none; color: var(--text-2); font-size: 1.4rem; line-height: 1; }
.stand-zeile .fstatus { flex: none; }
.punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; }
.punkt-lila { background: #9333ea; }
.punkt-rot { background: #ef4444; }
.punkt-orange { background: #f97316; }
.punkt-gruen { background: #22c55e; }
.punkt-grau { background: #94a3b8; }
.punkt-hellblau { background: #38bdf8; }
.punkt-tuerkis { background: #14b8a6; }
.punkt-gold { background: #d4a017; }

/* ---------- Alle Seiten am Handy bedienbar (BAUPLAN-3.md Abschnitt 5a Punkt 3) ----------
   Am PC ab 1000 px bleibt alles, wie es war: Die Regeln hier gelten nur darunter oder mit Finger statt Maus. */
/* Sprungziele landen auf allen Seiten unter dem festen Kopf. Klebt oben eine Meldung, gilt die größere Regel bei .meldung */
html { scroll-padding-top: calc(72px + env(safe-area-inset-top)); }
@media (min-width: 1000px) { .nur-handy { display: none !important; } }

/* Für den Daumen: Knöpfe und alleinstehende Links mindestens 44 px hoch. Das gilt auch auf einem Tablet quer, das schon das Menü vom PC zeigt */
@media (max-width: 999px), (pointer: coarse) {
  .kopf-innen { padding-top: 4px; padding-bottom: 4px; }  /* der Kopf bleibt so hoch wie bisher, .meldung klebt direkt darunter */
  .logo, .person-chip, .knopf.klein, select, .haken, summary, form .link-knopf { min-height: 44px; }
  .sprungmarken a, .pc-vergleiche a, .feld-wert[data-feld] { min-width: 44px; justify-content: center; }
  .teil-text > a { display: flex; align-items: center; min-height: 44px; }
  .nav-oben a { display: flex; align-items: center; min-height: 44px; }
  .zurueck, .zoom-raus, .sprungmarken a, .filter a, .tage a, .lager-filter a, .online-knoepfe a, .pc-vergleiche a, .seite > p.leise.klein > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
  .zurueck { margin: 0; }
  .lager-filter a { gap: .3em; }
  .knopf.klein { padding-top: 8px; padding-bottom: 8px; }
  .detail-blaettern .knopf { min-width: 44px; min-height: 44px; }
  .akte-zu { width: 44px; height: 44px; top: 8px; right: 8px; }
  .akte-kopf { padding-right: 44px; }
  .pc-dialog h2 { margin-right: 54px; }
  .pfeil { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }
  .pfeil-rutsche { width: 44px; height: 44px; }
  .kachel-band { min-height: 44px; }
  .vorfuehren button { min-height: 44px; padding: 8px 12px; }
  .foto-tipp { margin-top: 12px; }  /* die Fläche des Links darin reicht sonst über die Fotos */
  .such-zeile { margin-top: 6px; }  /* ebenso über die Auswahl darüber */
  /* Fotos: die Fläche zum Treffen wächst, der sichtbare Kreis bleibt, denn der Rand ist durchsichtig */
  .foto .weg { top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 5px solid transparent; background-clip: padding-box; }
  .foto .stern { left: 0; bottom: 0; width: 44px; height: 44px; padding: 0; border: 7px solid transparent; background-clip: padding-box; box-shadow: none; }
  .foto.ohne-vorschau .stern { left: auto; right: 0; bottom: 0; }
  .foto-raster:has(.foto-werkzeug) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }  /* drei Knöpfe nebeneinander brauchen Platz */
  .foto-werkzeug form { flex: 0 1 45px; min-width: 0; }
  .foto-werkzeug button { width: 100%; height: 44px; }
  .detail-fotos[data-sortieren] a { touch-action: auto; }  /* Ziehen geht nur mit der Maus, ein Finger darf hier die Seite scrollen */
  /* Felder im großen Fenster direkt antippen und ändern */
  .feld-wert[data-feld] { display: inline-block; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .feld-wert.bearbeitet { display: block; min-height: 0; padding: 0; }
  .detail-felder { align-items: center; }
  /* Links mitten im Text: größere Fläche zum Treffen, die Zeilen bleiben, wo sie sind */
  p a, .meldung a, .speicher-warnung a, .schlicht a, .halle-karte h2 a { padding-top: 12px; padding-bottom: 12px; }
  p > .link-knopf { padding-top: 12px; padding-bottom: 12px; margin-top: -12px; margin-bottom: -12px; }

  /* Nichts schiebt die Seite breiter: Lange Wörter brechen um, breite Tabellen scrollen in ihrem eigenen Behälter */
  html { scroll-padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + 16px); }  /* auch nicht unter die untere Leiste */
  body { overflow-wrap: anywhere; }
  fieldset { min-width: 0; }
  .teile-liste, .belege, .formular { grid-template-columns: minmax(0, 1fr); }
  .logo { flex: none; white-space: nowrap; }
  .person-chip { display: block; min-width: 0; overflow: hidden; line-height: 32px; white-space: nowrap; text-overflow: ellipsis; }  /* ein langer Name wird gekürzt */
  .person-chip svg { margin-right: 6px; vertical-align: middle; }
  .monate, .pc-vergleiche { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .monate th, .monate td, .pc-vergleiche th { white-space: nowrap; }
  .pc-vergleiche td { min-width: 60px; overflow-wrap: normal; }
  .pc-vergleiche td:nth-child(2) { min-width: 130px; }
  .teile-liste > li > .zeile { flex-wrap: wrap; }
  .teile-liste > li > .zeile > .teil-text { flex: 1 1 200px; }  /* Eingabefelder und Knöpfe rutschen in die nächste Zeile */
  .ordnen label, .konto-form { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ordnen select { flex: 1 1 170px; min-width: 0; }
  .konto-form select, .einplanen select { min-width: 0; max-width: 100%; }
  .filterzeile > * { min-width: 0; max-width: 100%; }
  .feld-eingabe { font-size: 16px; }
  .startsatz, .einladungslink, .kachel-konto select { font-size: 16px; }  /* unter 16 px zoomt das iPhone beim Antippen hinein */
  .auftrag-konto b { white-space: normal; overflow-wrap: anywhere; }  /* der ganze Kontoname, die Ziffern am Ende unterscheiden die Konten */
  .lars-karten { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
}

/* Wo es am Handy eng wird: eine Spalte, und die Texte auf den Kacheln brechen um, statt abgeschnitten zu werden */
@media (max-width: 759px) {
  .hallen-karten, .detail-inhalt, .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .lager-suche { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .kachel { padding: 10px 8px; }  /* „Abgeschlossen“ passt in eine Zeile */
  .ordnen label { flex: 1 1 100%; }
  .kachel-status { gap: 6px; padding: 8px; font-size: .88rem; }
  .kachel-status .status-symbol { width: 24px; height: 24px; }
  .status-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.25; white-space: normal; }
  .detail-schild .status-text { display: block; }
  .detail-beschreibung { max-height: none; }
  .beleg-zeile { flex-wrap: wrap; }
  .beleg-zeile .teil-text { flex: 1 1 200px; }
  .handy-hinweis { flex-wrap: wrap; }
  .vorfuehren { display: none; }  /* nur eine Vorführung am PC, in der kleinen Halle verdeckte sie das Bild */
}