/* ============================================================
   ZENTRUM · Designsystem
   ------------------------------------------------------------
   Helles Layout nach Apple-Vorbild: fast weiße Fläche, viel Luft,
   Haarlinien statt Schatten, Typografie mit negativer Laufweite,
   genau EINE farbige Aktionsfarbe.

   Diese eine Farbe ist der Akzent des Kunden (--accent). Struktur,
   Typografie, Radien und Abstände sind fest, die Farbe nicht —
   damit bleibt das White-Labeling aus dem Briefing erhalten.
   ============================================================ */

:root {
  /* Akzent – wird beim Start aus den Einstellungen gesetzt */
  --accent:        #28D0B8;
  --accent-line:   #1c9e8c;   /* Umrandete Aktion, dunkler für Kontrast */
  --accent-soft:   rgba(40, 208, 184, .12);
  --on-accent:     #ffffff;   /* Textfarbe auf dem Akzent, je nach Helligkeit */

  /* Neutrale Töne */
  --carbon:  #1d1d1f;
  --ink:     #1d1d1f;
  --ash:     #6e6e73;
  --mist:    #86868b;
  --line:    #d2d2d7;
  --line-soft:#e8e8ed;
  --frost:   #f5f5f7;
  --surface: #ffffff;
  --pebble:  #e8e8ed;

  --gut:     #1d8a5c;
  --hinweis: #9a6b00;
  --fehler:  #c7362c;
  --gut-bg:     rgba(29,138,92,.10);
  --hinweis-bg: rgba(154,107,0,.10);
  --fehler-bg:  rgba(199,54,44,.10);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Inter, system-ui, "Helvetica Neue", Arial, sans-serif;

  --r-card: 12px;
  --r-input: 10px;
  --r-pill: 980px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 40px; --sp-10: 56px;

  --bar-h: 52px;
  --page:  1160px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Muss vor allen display-Regeln stehen: sonst überschreibt ein
   display:grid das hidden-Attribut und der Anmeldebildschirm bleibt
   über der Anwendung liegen. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: 34px; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.24; }
h3 { font-size: 17px; line-height: 1.3; }
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--accent-line); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   1 · Gerüst
   ============================================================ */
.app { display: none; min-height: 100%; flex-direction: column; }
.app.on { display: flex; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: var(--page); margin: 0 auto; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sp-5); padding: 0 var(--sp-5);
}
.wordmark {
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.wordmark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

/* Zweite Leiste unter der Kopfzeile – die Produktnavigation.
   Bewusst NICHT in der Kopfzeile: deren backdrop-filter würde auf dem
   Handy den Bezugsrahmen für die untere Leiste bilden. */
.nav {
  position: sticky; top: var(--bar-h); z-index: 39;
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 7px max(20px, calc((100% - var(--page)) / 2 + 20px));
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav button {
  appearance: none; border: 0; background: none; font: inherit;
  font-size: 13px; letter-spacing: -.01em; color: var(--ash);
  padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
}
.nav button:hover { color: var(--ink); background: rgba(0,0,0,.04); }
.nav button.on { color: var(--ink); background: var(--pebble); font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.topbar-in .wordmark { margin-right: auto; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0;
  border: 0; cursor: pointer; flex: none;
}

.page { flex: 1; max-width: var(--page); width: 100%; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-10); }
.page-head { margin-bottom: var(--sp-6); display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 220px; }
.page-head .lede { color: var(--ash); font-size: 17px; font-weight: 300; letter-spacing: -.016em; margin-top: 6px; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-line); margin-bottom: var(--sp-2);
}
.section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist); display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-8) 0 var(--sp-3);
}
.section-title:after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ============================================================
   2 · Flächen
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: var(--sp-6);
}
.card { min-width: 0; }
.card.tight { padding: var(--sp-4); }
.card.flat  { background: transparent; border-color: transparent; padding: 0; }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-head h3 { flex: 1; min-width: 0; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .num { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.stat .lbl { font-size: 13px; color: var(--ash); }
.stat .sub { font-size: 12px; color: var(--mist); }

/* Kacheln im Bearbeiten-Modus: Titel oben, Werkzeuge darunter.
   Muss auch in einer Viertel-Breite-Kachel sauber umbrechen. */
.kachel-bearbeiten { display: flex; flex-direction: column; gap: var(--sp-3); }
.kachel-kopf h3 { line-height: 1.25; }
.kachel-info { font-size: 13px; color: var(--mist); margin-top: 4px; }
.kachel-werkzeuge {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
}
.kachel-werkzeuge .schieben { display: flex; gap: 4px; flex: none; }
.kachel-werkzeuge .icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; }
.kachel-werkzeuge .icon-btn:disabled { opacity: .3; cursor: default; background: none; }
.kachel-werkzeuge .entfernen { color: var(--fehler); margin-left: 10px; }
.kachel-werkzeuge .entfernen:hover { background: var(--fehler-bg); border-color: var(--fehler); }
.kachel-werkzeuge .breite-wahl {
  flex: 1 1 128px; min-width: 128px; width: auto; max-width: 100%;
  font-size: 13px; padding: 7px 30px 7px 10px; border-radius: 8px;
}

.empty { text-align: center; color: var(--mist); padding: var(--sp-8) var(--sp-4); font-size: 14px; }
.empty .big { font-size: 17px; color: var(--ash); font-weight: 300; margin-bottom: 6px; }

/* ============================================================
   3 · Aktionen — genau eine gefüllte Farbe
   ============================================================ */
.btn {
  appearance: none; font: inherit; font-size: 15px; letter-spacing: -.014em;
  border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--accent-line);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, opacity .15s; white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 400; }
.btn-primary:hover:not(:disabled) { opacity: .86; }
.btn-outline { border-color: var(--accent-line); color: var(--accent-line); }
.btn-outline:hover:not(:disabled) { background: var(--accent-soft); }
.btn-quiet { color: var(--ash); border-color: var(--line); }
.btn-quiet:hover:not(:disabled) { background: rgba(0,0,0,.04); color: var(--ink); }
.btn-ghost { padding: 6px 10px; color: var(--accent-line); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }
.btn-danger { color: var(--fehler); border-color: var(--line); }
.btn-danger:hover:not(:disabled) { background: var(--fehler-bg); border-color: var(--fehler); }
.btn-sm { font-size: 13px; padding: 6px 14px; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); padding: 3px 11px; font-size: 12px; letter-spacing: -.01em;
  background: var(--pebble); color: var(--ash); white-space: nowrap;
}
.tag.ok   { background: var(--gut-bg);     color: var(--gut); }
.tag.warn { background: var(--hinweis-bg); color: var(--hinweis); }
.tag.bad  { background: var(--fehler-bg);  color: var(--fehler); }
.tag.accent { background: var(--accent-soft); color: var(--accent-line); }

/* ============================================================
   4 · Felder
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12px; color: var(--ash); letter-spacing: -.006em; }
.field .hint { font-size: 12px; color: var(--mist); }

input[type=text], input[type=password], input[type=email], input[type=tel],
input[type=date], input[type=number], input[type=search], input[type=color], select, textarea {
  font: inherit; font-size: 16px;           /* 16px verhindert das Zoomen auf iOS */
  letter-spacing: -.014em;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--surface); color: var(--ink); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=color] { padding: 4px; height: 42px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; min-height: 34px; min-width: 34px; }
.check input { appearance: none; width: 22px; height: 22px; flex: none; margin: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; position: relative; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked:after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 44px; height: 26px; border-radius: var(--r-pill);
  background: var(--pebble); position: relative; margin: 0; cursor: pointer; transition: background .18s; }
.switch input:after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch input:checked { background: var(--accent); }
.switch input:checked:after { left: 21px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.form-grid .w2 { grid-column: span 2; }

.searchbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.searchbar input, .searchbar select { width: auto; min-width: 160px; flex: 0 1 auto; font-size: 15px; padding: 8px 12px; }
.searchbar .grow { flex: 1 1 200px; min-width: 0; }

/* ============================================================
   5 · Listen und Tabellen
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mist); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.list td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr { cursor: pointer; }
table.list tbody tr:hover { background: var(--frost); }
table.list td.right, table.list th.right { text-align: right; }
table.list .mono { font-variant-numeric: tabular-nums; color: var(--ash); white-space: nowrap; }
.strong { color: var(--ink); font-weight: 500; }
.muted  { color: var(--mist); }

.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.row:last-child { border-bottom: none; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 15px; }
.row .s { font-size: 13px; color: var(--mist); }
.row .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.person { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer; }
.person:hover { border-color: var(--mist); }
.person .ini { width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--pebble); color: var(--ash); display: grid; place-items: center; font-size: 14px; font-weight: 600; }

/* ============================================================
   6 · Sheet (Bearbeiten) — auf dem Handy von unten
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; z-index: 61; background: var(--surface);
  top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.sheet.wide { width: min(920px, 100%); }
.sheet.on { transform: none; }
.sheet-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); flex: none;
}
.sheet-head h2 { flex: 1; min-width: 0; font-size: 19px; }
.sheet-body { flex: 1; overflow: auto; padding: var(--sp-5); -webkit-overflow-scrolling: touch; }
.sheet-foot {
  flex: none; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line);
  display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--surface);
}
.icon-btn { appearance: none; border: 0; background: none; cursor: pointer; color: var(--ash);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; flex: none; }
.icon-btn:hover { background: rgba(0,0,0,.05); color: var(--ink); }

/* ============================================================
   7 · Klappbare Abschnitte (Formulare)
   ============================================================ */
.acc { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); margin-bottom: var(--sp-3); overflow: hidden; }
.acc-head {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: 14px var(--sp-4); background: none; border: 0; font: inherit; cursor: pointer; text-align: left;
}
.acc-head:hover { background: var(--frost); }
.acc-head .ic { font-size: 17px; flex: none; }
.acc-head .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.acc-head .n { font-size: 12px; color: var(--mist); font-variant-numeric: tabular-nums; }
.acc-head .chev { color: var(--mist); transition: transform .2s; flex: none; }
.acc.open .acc-head .chev { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.acc.open .acc-body { display: block; }

.progress { height: 3px; background: var(--pebble); border-radius: var(--r-pill); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--sp-2); }
.photo { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--pebble); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .x { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; border: 0; cursor: pointer; font-size: 13px; line-height: 1; }
.photo-add {
  display: grid; place-items: center; aspect-ratio: 4/3; border: 1px dashed var(--line);
  border-radius: 8px; color: var(--mist); font-size: 13px; cursor: pointer; background: var(--frost); text-align: center; padding: 8px;
}
.photo-add:hover { border-color: var(--accent); color: var(--accent-line); }

/* ============================================================
   8 · Rückmeldungen
   ============================================================ */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
  padding-bottom: env(safe-area-inset-bottom); width: min(440px, calc(100% - 32px)); }
.toast {
  background: var(--carbon); color: #fff; border-radius: var(--r-pill);
  padding: 11px 20px; font-size: 14px; letter-spacing: -.01em; text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); animation: rise .22s ease-out; max-width: 100%;
}
.toast.bad { background: var(--fehler); }
.toast.ok  { background: var(--gut); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.note { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; font-size: 14px; background: var(--surface); }
.note.warn { border-color: rgba(154,107,0,.35); background: var(--hinweis-bg); color: #7a5500; }
.note.bad  { border-color: rgba(199,54,44,.35); background: var(--fehler-bg);  color: #97281f; }
.note.info { background: var(--frost); color: var(--ash); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--accent); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--sp-8); color: var(--mist); font-size: 14px; }

/* ============================================================
   9 · Anmeldung
   ============================================================ */
.login { min-height: 100%; display: grid; place-items: center; padding: var(--sp-5); background: var(--frost); }
.login-box { width: min(400px, 100%); text-align: center; }
.login-box .mark { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-line); }
.login-box h1 { font-size: 40px; margin: var(--sp-3) 0 var(--sp-1); letter-spacing: -.03em; }
.login-box .sub { color: var(--ash); font-size: 19px; font-weight: 300; letter-spacing: -.02em; margin-bottom: var(--sp-8); }
.login-box .fields { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.login-box .btn { width: 100%; margin-top: var(--sp-4); }
.login-foot { margin-top: var(--sp-8); font-size: 12px; color: var(--mist); }

/* ============================================================
   10 · Handy
   ============================================================ */
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3, .span-4 { grid-column: span 2; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .w2 { grid-column: span 1; }
  h1 { font-size: 28px; }
  .page { padding: var(--sp-5) var(--sp-4) var(--sp-10); }
}

@media (max-width: 640px) {
  /* backdrop-filter macht die Kopfzeile zum Bezugsrahmen für
     position:fixed – die untere Navigation bliebe sonst oben kleben. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .span-1, .span-2, .span-3, .span-4 { grid-column: span 1; }
  .topbar-in { padding: 0 var(--sp-4); gap: var(--sp-3); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 45;
    background: rgba(255,255,255,.94);
    border-top: 1px solid var(--line); border-bottom: none;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-between; gap: 0; }
  /* Sieben Einträge müssen nebeneinander in 390 px passen – sonst wird
     die Seite breiter als der Bildschirm und die feste Leiste rutscht raus. */
  .nav button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px;
    font-size: 10px; letter-spacing: -.02em; padding: 6px 2px; }
  .nav .navlang { display: none; }
  .nav .navkurz { display: block; width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav button.on { background: none; color: var(--accent-line); font-weight: 500; }
  .nav .navic { display: block; line-height: 0; }
  .nav .sym { width: 21px; height: 21px; margin: 0 auto; }
  .page { padding-bottom: 96px; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 94vh;
    border-left: 0; border-top-left-radius: 16px; border-top-right-radius: 16px;
    transform: translateY(100%); }
  .sheet.on { transform: none; }
  .sheet-foot .btn { flex: 1; }
  .card { padding: var(--sp-4); }
  .toasts { bottom: 88px; }
}

@media (min-width: 641px) { .navic, .navkurz { display: none; } }

.sym { width: 22px; height: 22px; display: block; }

/* ============================================================
   11 · Finger statt Maus
   Zeigegeräte ohne Genauigkeit bekommen größere Schaltflächen.
   Gilt für Handy und Tablet, nicht für die Maus am Schreibtisch.
   ============================================================ */
@media (pointer: coarse) {
  .avatar { width: 40px; height: 40px; font-size: 13px; }
  .btn { padding: 12px 20px; min-height: 44px; }
  .btn-sm { padding: 10px 17px; min-height: 42px; }
  .btn-ghost { padding: 10px 13px; min-height: 42px; }
  .kachel-werkzeuge .breite-wahl { padding: 10px 30px 10px 10px; }

  .check { min-height: 44px; min-width: 44px; }
  .check input { width: 26px; height: 26px; border-radius: 7px; }
  .check input:checked:after { left: 8px; top: 3px; width: 7px; height: 13px; }

  .switch { min-height: 44px; }
  .switch input { width: 52px; height: 31px; }
  .switch input:after { width: 25px; height: 25px; }
  .switch input:checked:after { left: 24px; }

  .icon-btn { width: 44px; height: 44px; }
  .kachel-werkzeuge .icon-btn { width: 44px; height: 40px; }
  .btn-sm { padding: 9px 16px; }
  .acc-head { padding: 16px var(--sp-4); }
  table.list tbody tr { min-height: 44px; }
}

/* Tablet: breite Navigation, aber mit Fingermaßen */
@media (pointer: coarse) and (min-width: 641px) {
  .nav button { padding: 11px 15px; }
  .nav { padding-top: 6px; padding-bottom: 6px; }
}

/* ============================================================
   12 · Tabellen auf dem Handy
   Eine Tabelle mit sieben Spalten quer zu scrollen ist auf dem
   Bau keine Bedienung. Jede Zeile wird deshalb zur Karte, die
   Spaltenüberschrift steht als Beschriftung davor (data-l).
   ============================================================ */
/* Umschalter zwischen Tabelle und kompakter Liste */
.nur-schmal { display: none; }
@media (max-width: 640px) {
  .nur-breit { display: none; }
  .nur-schmal { display: block; }
  .nur-schmal .row { align-items: flex-start; }
  .nur-schmal .row .s { white-space: normal; }
  .nur-schmal .row .tag { margin-top: 3px; }
  .breite-hinweis { flex: 1 1 100%; font-size: 12px; color: var(--mist); }

  .searchbar { gap: var(--sp-2); }
  .searchbar input, .searchbar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .searchbar .grow, .searchbar > .btn { flex: 1 1 100%; }

  .table-wrap { border: none; background: none; border-radius: 0; overflow-x: visible; }
  table.list { border-collapse: separate; border-spacing: 0; }
  table.list thead { display: none; }
  table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); margin-bottom: 10px; overflow: hidden;
  }
  table.list tbody tr:hover { background: var(--surface); }
  table.list td {
    display: flex; gap: var(--sp-3); align-items: baseline;
    padding: 10px var(--sp-4); border-bottom: 1px solid var(--line-soft);
    text-align: left !important; white-space: normal;
  }
  table.list td:last-child { border-bottom: none; }
  table.list td:before {
    content: attr(data-l); flex: 0 0 38%; min-width: 0;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--mist); line-height: 1.5;
  }
  table.list td[data-l=""]:before { display: none; }
  table.list td > * { flex: 1; min-width: 0; }
  table.list .mono { white-space: normal; }
}

@media print {
  .topbar, .nav, .sheet-foot, .btn, .toasts { display: none !important; }
  body { background: #fff; }
  .card { border: none; padding: 0; }
  .page { max-width: none; padding: 0; }
}