/* =========================================================================
   Design-Tokens. Farben, Abstände, Radien und Größen stehen genau hier —
   nirgends im Stylesheet steht ein roher Wert.
   ========================================================================= */
:root{
  color-scheme:light;

  /* --- L01 Cloud Blue. Die sieben vorgegebenen Farben --- */
  --bg:#F5F7FB;               /* Seitengrund, leicht bläulich-grau */
  --surface:#FFFFFF;          /* Karten, Sheets, Dropdowns, Seitenspalte */
  --border:#DCE3EE;           /* Trennlinien */
  --text:#172033;             /* Überschriften und Fließtext */
  --text-2:#667085;           /* Beschreibungen, Labels, Platzhalter */
  --primary:#356DF3;          /* Hauptknöpfe, aktive Zustände, Fokus */
  --accent:#7657E8;           /* Plaketten, Initialen, besondere Akzente */

  /* --- daraus abgeleitet, kein neuer Farbton --- */
  --surface-2:#EFF3FA;        /* Hover-Fläche: Grund Richtung Rand */
  --border-strong:#8D95A3;    /* Rand von Kästchen und Feldern, 3.0:1 (WCAG 1.4.11) */
  --text-3:#667085;           /* Platzhalter = Nebentext, 4.97:1 auf Weiß */
  --primary-ink:#3165E2;      /* Primärfarbe als Text/Symbol, 4.79:1 auf dem Grund */
  --primary-hover:#2857D6;
  --primary-text:#FFFFFF;     /* Beschriftung auf gefüllter Primärfläche */
  --primary-soft:#EBF0FE;     /* Tönung hinter aktiver Navigation und Fokusring */
  --accent-ink:#7254E1;       /* Akzent als Text, 4.81:1 auf dem Grund */
  --accent-soft:#F1EEFD;
  --accent-text:#FFFFFF;
  --danger:#D92D20;           /* Löschen - der einzige Ton außerhalb der Vorgabe */
  --danger-ink:#C0271C;
  --danger-hover:#B0231A;
  --danger-soft:#FDECEA;

  --focus:#356DF3;
  --scrim:rgba(23,32,51,.42);      /* Hintergrund hinter Dialogen */
  --on-toast-hover:rgba(245,247,251,.16);

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;

  --radius-sm:8px;  --radius:12px;  --radius-lg:18px;
  --control:44px;   --control-sm:36px;  --tap:50px;
  --qty-col:34px;   /* Mengenspalte: zwei Ziffern und ein x („99x" misst 33px) */
  --line-item:24px; /* ganzzahlige Zeilenhöhe im Eintrag — hält den Streichstrich scharf */
  --qty-field:72px; /* Mengenfeld in der Eingabezeile */

  --text-sm:14px; --text-base:16px; --text-md:17px; --text-lg:20px; --text-xl:26px;

  --shadow:0 1px 2px rgba(23,32,51,.06);
  --shadow-lg:0 12px 40px rgba(23,32,51,.16);
  --ease:cubic-bezier(.2,.7,.3,1);
  --page:640px;
}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    /* --- D02 Graphite Indigo. Kein reines Schwarz. --- */
    --bg:#111318; --surface:#191D25; --border:#2B313D;
    --text:#E7EAF0; --text-2:#9AA3B2; --primary:#7C8CFF; --accent:#A78BFA;
    /* abgeleitet */
    --surface-2:#232935; --border-strong:#636973; --text-3:#9AA3B2;
    --primary-ink:#7C8CFF; --primary-hover:#95A2FF; --primary-text:#111318; --primary-soft:#1E2437;
    --accent-ink:#A78BFA; --accent-soft:#241E38; --accent-text:#111318;
    --danger:#F08078; --danger-ink:#F08078; --danger-hover:#F59A94; --danger-soft:#2C1D1D;
    --focus:#7C8CFF; --scrim:rgba(5,6,9,.66); --on-toast-hover:rgba(231,234,240,.16);
    --shadow:0 1px 2px rgba(0,0,0,.45);
    --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  /* --- D02 Graphite Indigo. Kein reines Schwarz. --- */
  --bg:#111318; --surface:#191D25; --border:#2B313D;
  --text:#E7EAF0; --text-2:#9AA3B2; --primary:#7C8CFF; --accent:#A78BFA;
  /* abgeleitet */
  --surface-2:#232935; --border-strong:#636973; --text-3:#9AA3B2;
  --primary-ink:#7C8CFF; --primary-hover:#95A2FF; --primary-text:#111318; --primary-soft:#1E2437;
  --accent-ink:#A78BFA; --accent-soft:#241E38; --accent-text:#111318;
  --danger:#F08078; --danger-ink:#F08078; --danger-hover:#F59A94; --danger-soft:#2C1D1D;
  --focus:#7C8CFF; --scrim:rgba(5,6,9,.66); --on-toast-hover:rgba(231,234,240,.16);
  --shadow:0 1px 2px rgba(0,0,0,.45);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
}

/* ------------------------------------------------------------------ Basis */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--text-base);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2{margin:0;font-weight:650;letter-spacing:-.02em}
.hidden{display:none!important}
.icon{width:20px;height:20px;flex:0 0 auto}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}

/* --------------------------------------------------------- Schaltflächen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control);
  padding:0 var(--space-4);
  border-radius:var(--radius);
  border:1px solid transparent;
  font-size:15px;font-weight:600;
  white-space:nowrap;
  transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease);
}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-block{width:100%}
.btn-primary{background:var(--primary);color:var(--primary-text)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-secondary:hover:not(:disabled){background:var(--surface-2);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.btn-destructive{background:transparent;color:var(--danger-ink);border-color:var(--border)}
.btn-destructive:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}
.btn-icon{
  width:var(--control);height:var(--control);padding:0;
  background:transparent;color:var(--text-2);
}
.btn-icon:hover:not(:disabled){background:var(--surface-2);color:var(--text)}
.btn-inline{height:var(--control-sm);padding:0 var(--space-3);font-size:var(--text-sm)}
.btn-ghost.btn-inline,.btn-destructive.btn-inline{border-color:var(--border)}

/* ---------------------------------------------------------------- Felder */
.input{
  width:100%;
  height:var(--control);
  padding:0 var(--space-3);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  transition:border-color .14s var(--ease);
}
.input::placeholder{color:var(--text-3)}
.input:hover{border-color:var(--border-strong)}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field > span{font-size:var(--text-sm);font-weight:600;color:var(--text-2)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}


/* --------------------------------------------------------------- Meldung */
.status{margin:0 0 var(--space-4);font-size:15px;color:var(--text-2)}
/* Meldungen unten links: dort stören sie beim Abhaken nicht. */
#toast{
  position:fixed;z-index:200;
  left:var(--space-4);
  bottom:calc(84px + env(safe-area-inset-bottom));
  max-width:min(360px,calc(100vw - 2 * var(--space-4)));
  display:none;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--text);color:var(--bg);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  font-size:15px;line-height:1.4;
}
#toast.is-visible{display:flex;animation:toast-in .2s var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#toast.is-error{background:var(--danger);color:var(--primary-text)}
#toast .btn{
  height:var(--control-sm);padding:0 var(--space-3);flex:0 0 auto;
  background:transparent;border:1px solid currentColor;color:inherit;font-size:var(--text-sm);
}
#toast .btn:hover{background:var(--on-toast-hover)}
.status:empty{display:none}
.status-error{color:var(--danger-ink);font-weight:600}
.status-success{color:var(--primary-ink);font-weight:600}
.status-loading::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:var(--space-2);
  border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- Anmeldung */
/* -------------------------------------------------- Anmeldung und Start */
/* Eine ruhige Karte auf dem Seitengrund, mittig — das Zeichen oben, damit man
   sofort sieht, wo man ist. Auf dem Handy wird die Karte randlos. */
.screen-center{
  min-height:100dvh;display:grid;place-items:center;
  padding:var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
}
.card{
  width:min(100%,400px);
  padding:var(--space-6);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.card-mark{display:block;width:56px;height:56px;margin-bottom:var(--space-4);border-radius:14px}
.brand{margin:0;font-size:var(--text-xl);font-weight:680;letter-spacing:-.03em}
.brand-sub{color:var(--text-2);margin:var(--space-2) 0 var(--space-6);font-size:15px}
.card .field{margin-bottom:var(--space-4)}
.card .btn{margin-top:var(--space-2)}
@media(max-width:420px){
  .screen-center{place-items:center stretch}
  .card{padding:var(--space-5);border:0;background:transparent;box-shadow:none}
}
#boot{opacity:0;animation:fade-in .2s var(--ease) .15s forwards}
@keyframes fade-in{to{opacity:1}}
.boot-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.boot-inner .card-mark{margin-bottom:var(--space-3)}
.boot-bar{width:104px;height:3px;margin-top:var(--space-4);border-radius:2px;background:var(--border);overflow:hidden}
.boot-bar span{display:block;width:40%;height:100%;background:var(--primary);border-radius:2px;
  animation:slide 1.1s ease-in-out infinite}
@keyframes slide{from{transform:translateX(-110%)}to{transform:translateX(320%)}}

/* ---------------------------------------------------------------- Gerüst */
/* Kopf und Ränder stehen fest; gescrollt wird nur der Inhalt. Sonst wandert
   auf dem Handy die ganze Seite mit, sobald die Liste länger wird. */
.shell{
  max-width:1040px;margin:0 auto;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
}
.topbar{
  flex:0 0 auto;z-index:20;
  display:flex;align-items:center;gap:var(--space-1);
  height:60px;
  padding:0 var(--space-3);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border);
}
#title{
  flex:1;min-width:0;padding:0 var(--space-2);
  font-size:var(--text-lg);font-weight:660;letter-spacing:-.022em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.content{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:var(--space-5) var(--space-4) var(--space-6);
  max-width:var(--page);margin:0 auto;width:100%;
}

/* ---------------------------------------------------------------- Zeilen */
/* Listen als Kacheln: klar abgegrenzt, angenehm zu treffen. */
.tiles{display:flex;flex-direction:column;gap:var(--space-3)}
.tile{
  display:flex;align-items:center;gap:var(--space-3);
  width:100%;min-height:74px;
  padding:var(--space-4);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-align:left;
  transition:border-color .14s var(--ease),background .14s var(--ease),transform .12s var(--ease);
}
.tile:hover{border-color:var(--border-strong);background:var(--surface-2)}
.tile:active{transform:translateY(1px)}
.tile-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tile-name{
  font-size:var(--text-md);font-weight:640;letter-spacing:-.014em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Auch ohne Text bleibt die Zeile stehen — sonst wären die Kacheln ungleich hoch. */
.tile-meta{font-size:var(--text-sm);color:var(--text-2);min-height:1.5em}

.rows{display:flex;flex-direction:column;gap:2px}
.row{
  display:flex;align-items:center;gap:var(--space-3);
  width:100%;min-height:var(--tap);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius);
  text-align:left;
  transition:background .14s var(--ease);
}
.row:hover{background:var(--surface-2)}
.row.is-active{background:var(--primary-soft)}
.row-main{flex:1;min-width:0;font-size:var(--text-md);font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.is-active .row-main{color:var(--primary-ink)}
.badge{
  flex:0 0 auto;min-width:26px;padding:2px var(--space-2);
  border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:13px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;
}
.row-chevron{
  width:8px;height:8px;flex:0 0 auto;
  border:solid var(--text-3);border-width:2px 2px 0 0;transform:rotate(45deg);
  transition:transform .16s var(--ease),border-color .16s var(--ease);
}
.row:hover .row-chevron{border-color:var(--primary);transform:rotate(45deg) translate(2px,-2px)}
.rows + .btn{margin-top:var(--space-4)}
/* Immer erreichbar, auch bei zwanzig Listen. */
/* Eine schwebende Aktion, je nach Bildschirm: „+" in der Übersicht,
   „Fertig" sobald etwas abgehakt ist. */
/* Nur wenn der schwebende Knopf wirklich da ist, wird unten Platz für ihn frei
   gehalten. Vorher standen dort immer 148px — man konnte ins Leere scrollen,
   obwohl gar nichts verdeckt war. Die Navigationsleiste liegt neben dem Inhalt,
   nicht darüber, und war doppelt gerechnet. */
.shell:has(#fab:not(.hidden)) .content{padding-bottom:calc(var(--space-4) + 56px)}

#fab{
  position:fixed;z-index:60;
  right:var(--space-4);
  bottom:calc(84px + env(safe-area-inset-bottom));
  min-width:52px;height:52px;
  padding:0 var(--space-4);
  border-radius:999px;
  background:var(--primary);color:var(--primary-text);
  box-shadow:var(--shadow-lg);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:16px;font-weight:650;
  transition:transform .14s var(--ease),background .14s var(--ease);
}
#fab.is-round{padding:0;width:52px}
#fab .icon{width:24px;height:24px}
#fab:hover{background:var(--primary-hover)}
#fab:active{transform:scale(.94)}

/* ----------------------------------------------------------------- Liste */
/* Die Eingabezeile klebt oben: bei einer langen Liste bleibt „+" erreichbar,
   ohne nach oben zu scrollen. Die negativen Ränder ziehen sie über die Polster
   des Inhalts, damit beim Scrollen nichts seitlich daran vorbeiläuft. */
.composer{
  /* Der Haftpunkt ist um das obere Polster des Inhalts nach oben versetzt,
     sonst bliebe darüber ein Spalt, durch den Einträge durchlaufen. */
  position:sticky;top:calc(var(--space-5) * -1);z-index:20;
  display:grid;grid-template-columns:var(--qty-field) minmax(0,1fr) var(--control-sm);
  gap:var(--space-2);
  margin:calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.composer .input{height:var(--control-sm);padding:0 var(--space-2);font-size:15px}
.composer .btn{height:var(--control-sm);padding:0}
.composer .btn span{display:none}
.items{display:flex;flex-direction:column}
.item{display:flex;align-items:center;min-height:var(--tap)}
.item + .item{border-top:1px solid var(--border)}
.item-body{
  flex:1;min-width:0;
  display:flex;
  padding:var(--space-3) var(--space-2);
  border-radius:var(--radius-sm);text-align:left;
}
/* Feste Mengenspalte: alle Zahlen stehen rechtsbündig untereinander, das Produkt
   beginnt überall an derselben Kante — „3x Kaffee" steht damit dicht beisammen. */
.item-line{
  position:relative;min-width:0;max-width:100%;
  display:grid;grid-template-columns:var(--qty-col) minmax(0,max-content);
  align-items:baseline;
  gap:var(--space-2);
}
.item-body:hover{background:var(--surface-2)}
/* Kleiner Knopf am Zeilenende — für Bearbeiten, Speichern, Löschen. */
.row-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;
  border-radius:var(--radius-sm);color:var(--text-3);
  transition:background .14s var(--ease),color .14s var(--ease);
}
.row-icon .icon{width:18px;height:18px}
.row-icon:hover{background:var(--surface-2);color:var(--text)}
.row-icon.is-primary{color:var(--primary-ink)}
.row-icon.is-primary:hover{background:var(--primary-soft)}
.row-icon.is-danger{color:var(--danger-ink)}
.row-icon.is-danger:hover{background:var(--danger-soft)}

/* Bearbeiten geschieht in der Zeile selbst. */
.item.is-editing{gap:var(--space-2);padding:var(--space-2) 0}
.item.is-editing .input{height:38px;font-size:15px}
.item.is-editing .input[name="quantity"]{width:84px;flex:0 0 auto}
.item.is-editing .input[name="name"]{flex:1;min-width:0}
/* Gleiche Farbe wie das Produkt, nur kräftiger — die Zahl trägt, sie schreit nicht.
   Rechtsbündig, damit „3x" und „12x" auf derselben Kante enden. */
.item-qty{
  font-size:var(--text-base);font-weight:700;color:var(--text);line-height:var(--line-item);
  font-variant-numeric:tabular-nums;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.item-name{
  min-width:0;
  font-size:var(--text-md);font-weight:430;letter-spacing:-.012em;line-height:var(--line-item);
  /* Lange Namen brechen um, statt abgeschnitten zu werden — bei
     „Bio-Vollkorn-Dinkelbrot geschnitten" will man alles lesen. Getrennt wird
     bevorzugt an Bindestrichen, erst zur Not mitten im Wort. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;overflow-wrap:break-word;hyphens:auto;
}
/* Abgehakt: EIN durchgehender Strich über Menge und Namen. Als eigene Linie —
   eine Textdekoration malt nicht über die Mengenspalte hinweg und ließe eine Lücke.
   Damit sie in jeder Zeile gleich dick wirkt, ist sie 2px hoch und alle Zeilen
   liegen auf ganzen Pixeln (siehe --line-item). Erledigtes bleibt einzeilig,
   sonst träfe der Strich ins Leere. */
.item.is-checked .item-qty,
.item.is-checked .item-name{color:var(--text-2)}
.item.is-checked .item-name{-webkit-line-clamp:1}
.item.is-checked .item-line::after{
  content:"";position:absolute;left:0;right:0;
  top:calc(50% - 2px);height:2px;   /* eine Spur über der Mitte — dort sitzt die x-Höhe */
  background:var(--text-2);border-radius:1px;
}
/* Eine Linie trennt Offenes von Erledigtem. */
.done-head{
  margin:var(--space-5) 0 var(--space-2);
  padding-top:var(--space-4);
  border-top:2px solid var(--border);
  font-size:var(--text-sm);font-weight:650;color:var(--text-2);
}


/* ------------------------------------------------------------ Abschnitte */
/* Wer bin ich — steht über allem, nicht in einer Kachel. */
.identity{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.identity-avatar{
  width:48px;height:48px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font-size:16px;font-weight:700;
}
.identity-text{display:flex;flex-direction:column;min-width:0}
.identity-text strong{font-size:var(--text-md);font-weight:650}
.identity-text small{font-size:var(--text-sm);color:var(--text-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.account-rows{margin-top:var(--space-5)}
.account-rows .row{border-bottom:1px solid var(--border);border-radius:0}
.account-rows .row:last-child{border-bottom:0}
.row-text{flex:1;min-width:0;display:flex;flex-direction:column}
.row-sub{font-size:var(--text-sm);color:var(--text-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.list-actions{margin-top:var(--space-5)}

.section{margin-bottom:var(--space-6)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  margin-bottom:var(--space-3)}
.section-head h2{font-size:var(--text-md)}
.hint{margin:var(--space-3) 0 0;font-size:var(--text-sm);line-height:1.55;color:var(--text-2)}
.people{display:flex;flex-direction:column}
.person{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap);padding:var(--space-2) 0}
.person + .person{border-top:1px solid var(--border)}
.avatar{
  width:36px;height:36px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:700;
}
.person-text{flex:1;min-width:0;display:flex;flex-direction:column}
.person-text strong{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-text small{font-size:var(--text-sm);color:var(--text-2)}
.invite{padding:var(--space-3);margin-bottom:var(--space-3);background:var(--surface-2);border-radius:var(--radius)}
/* Kopieren und Teilen teilen sich eine Zeile. */
.invite-actions{display:flex;gap:var(--space-2)}
.invite-actions .btn{flex:1;min-width:0}
/* Offene Einladungslinks: Text links, Löschen rechts. */
.invite-row{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:var(--tap);padding:var(--space-2) 0;
}
.invite-row + .invite-row{border-top:1px solid var(--border)}
.invite-text{flex:1;min-width:0;display:flex;flex-direction:column}
.invite-text strong{font-size:15px;font-weight:600}
.invite-text small{font-size:var(--text-sm);color:var(--text-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.invite code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;
  word-break:break-all;color:var(--text)}

.segmented{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--surface-2);border-radius:var(--radius)}
.segment{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-sm);border-radius:var(--radius-sm);
  color:var(--text-2);font-size:var(--text-sm);font-weight:600;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.segment:hover{color:var(--text)}
.segment.is-active{background:var(--surface);color:var(--primary-ink);box-shadow:var(--shadow)}
.segment .icon{width:16px;height:16px}

/* --------------------------------------------------------- Leere Zustände */
.empty{text-align:center;padding:var(--space-7) var(--space-4)}
.empty-title{margin:0;font-size:var(--text-md);font-weight:600}
.empty-hint{margin:var(--space-2) 0 var(--space-5);color:var(--text-2);font-size:15px}
.empty .btn{margin:0 auto}

/* ---------------------------------------------------------------- Sheet */
#backdrop{position:fixed;inset:0;z-index:120;background:var(--scrim);display:none}
#backdrop.is-open{display:block;animation:fade-in .16s var(--ease) forwards;opacity:0}
#sheet{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(100%,480px);
  background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--space-2) var(--space-5) max(var(--space-5),env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);
  animation:rise .22s var(--ease);
}
@keyframes rise{from{transform:translate(-50%,12px)}to{transform:translate(-50%,0)}}
/* Rückfrage im Dialog: Frage, darunter Abbrechen und die Antwort. */
.ask{margin:0 0 var(--space-5);font-size:var(--text-md);line-height:1.5;color:var(--text-1)}
.ask-actions{display:flex;gap:var(--space-2)}
.ask-actions .btn{flex:1;min-width:0}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:var(--space-2) auto var(--space-4)}
.sheet-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.sheet-head h2{flex:1;font-size:var(--text-lg)}

/* Navigationsleiste: zwei Ziele, beide mit Symbol und Wort. */
#nav{
  flex:0 0 auto;
  display:flex;gap:var(--space-2);
  padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--bg);
}
.nav-item{
  flex:1;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;
  border-radius:var(--radius);
  color:var(--text-2);
  font-size:12px;font-weight:600;letter-spacing:.01em;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.nav-item .icon{width:23px;height:23px}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.is-active{color:var(--primary-ink)}
.nav-item.is-active .icon{stroke-width:2.3}
.nav-item:active{transform:translateY(1px)}

/* --------------------------------------------------------------- Desktop */
#sidebar{display:none}
.sidebar-empty{color:var(--text-2);font-size:15px;margin:0 0 var(--space-3)}
.sidebar-foot{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border)}
.side-nav{
  display:flex;align-items:center;gap:var(--space-3);
  width:100%;min-height:var(--control);
  padding:0 var(--space-3);
  border-radius:var(--radius);
  color:var(--text-2);font-size:15px;font-weight:600;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.side-nav:hover{background:var(--surface-2);color:var(--text)}
.side-nav.is-active{background:var(--primary-soft);color:var(--primary-ink)}
@media(min-width:900px){
  .shell{
    display:grid;
    overflow:hidden;
    grid-template-columns:250px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    grid-template-areas:"side head" "side main";
    column-gap:var(--space-6);
    padding:0 var(--space-5);
    align-items:start;
  }
  .topbar{grid-area:head;background:transparent;backdrop-filter:none;padding:0}
  .content{grid-area:main;padding:var(--space-5) 0 var(--space-7);margin:0}
  #sidebar{
    grid-area:side;display:block;
    height:100%;overflow-y:auto;
    padding:var(--space-5) 0;
  }
  /* Neben der Seitenspalte steht der Knopf ohnehin immer sichtbar. */
  #fab{bottom:var(--space-5)}
  #fab.is-round{display:none}
  #nav{display:none}
  #toast{bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}
  /* Mit Beschriftung braucht der Knopf wieder seine Polster. */
  .composer .btn span{display:inline}
  .composer .btn{padding:0 var(--space-4)}
  .composer{grid-template-columns:88px minmax(0,1fr) max-content}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  #boot{opacity:1}
}