/* =========================================================
   Trumer Holz PWA – app.css (v2.0, Material Design 3)
   Farbrollen aus Seed #826043 Holzbraun (Trumer-Logo; material-color-utilities 0.3.0, SchemeFidelity),
   "final" = Orange für Abschließen & buchen. Hell/Dunkel über html[data-theme].
   Schrift Roboto + Icons Material Symbols selbst ausgeliefert (assets/, Lizenzen in assets/fonts/LICENSES.txt).
   ========================================================= */

@font-face{ font-family:Roboto; font-style:normal; font-weight:100 900; font-display:swap; src:url(../assets/fonts/roboto-latin-wght.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:Roboto; font-style:normal; font-weight:100 900; font-display:swap; src:url(../assets/fonts/roboto-latin-ext-wght.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Farbrollen: hell ---------- */
:root{
  color-scheme: light;
  --md-primary:#67482d; --md-on-primary:#ffffff; --md-primary-container:#826043; --md-on-primary-container:#ffe1ca;
  --md-brand:#826043;
  --md-secondary:#6d5b4d; --md-on-secondary:#ffffff; --md-secondary-container:#f6decc; --md-on-secondary-container:#736153;
  --md-error:#ba1a1a; --md-on-error:#ffffff; --md-error-container:#ffdad6; --md-on-error-container:#93000a;
  --md-surface:#fff8f5; --md-on-surface:#1e1b18; --md-on-surface-variant:#4f453d;
  --md-surface-container-lowest:#ffffff; --md-surface-container-low:#fbf2ed; --md-surface-container:#f5ece8;
  --md-surface-container-high:#efe6e2; --md-surface-container-highest:#e9e1dc;
  --md-outline:#81756c; --md-outline-variant:#d3c4b9;
  --md-inverse-surface:#34302d; --md-inverse-on-surface:#f8efea; --md-inverse-primary:#e9be9b;
  --md-final:#cc4900; --md-on-final:#ffffff;
  --md-success:#006b2c; --md-success-container:#c8f5cf; --md-on-success-container:#00391a;
  --md-warn-container:#ffe0b3; --md-on-warn-container:#613b00; --md-warn:#855300;
  --md-scrim:rgba(0,0,0,.4);
}
/* ---------- Farbrollen: dunkel ---------- */
html[data-theme="dark"]{
  color-scheme: dark;
  --md-primary:#e9be9b; --md-on-primary:#452a12; --md-primary-container:#826043; --md-on-primary-container:#ffe1ca;
  --md-brand:#826043;
  --md-secondary:#d9c2b1; --md-on-secondary:#3c2e22; --md-secondary-container:#544437; --md-on-secondary-container:#c7b1a1;
  --md-error:#ffb4ab; --md-on-error:#690005; --md-error-container:#93000a; --md-on-error-container:#ffdad6;
  --md-surface:#161310; --md-on-surface:#e9e1dc; --md-on-surface-variant:#d3c4b9;
  --md-surface-container-lowest:#110e0b; --md-surface-container-low:#1e1b18; --md-surface-container:#231f1c;
  --md-surface-container-high:#2d2927; --md-surface-container-highest:#383431;
  --md-outline:#9c8e84; --md-outline-variant:#4f453d;
  --md-inverse-surface:#e9e1dc; --md-inverse-on-surface:#34302d; --md-inverse-primary:#79583b;
  --md-final:#f66018; --md-on-final:#ffffff;
  --md-success:#62df7d; --md-success-container:#00522a; --md-on-success-container:#c8f5cf;
  --md-warn-container:#5a3a00; --md-on-warn-container:#ffddb3; --md-warn:#ffc174;
  --md-scrim:rgba(0,0,0,.6);
}

:root{
  --radius-xs:4px; --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-xl:28px; --radius-full:999px;
  --elev-1:0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2:0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
  --ease:cubic-bezier(.2,0,0,1);

  /* Alte Namen, falls JS sie inline nutzt (z. B. style.color = "var(--danger)") */
  --danger: var(--md-error);
  --text-secondary: var(--md-on-surface-variant);
  --primary: var(--md-primary);
  --border: var(--md-outline-variant);
}

/* ---------- Basis ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.5; letter-spacing:.01em;
  color:var(--md-on-surface); background:var(--md-surface);
  -webkit-tap-highlight-color:transparent;
}
a{ color:var(--md-primary); }
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; }
:focus-visible{ outline:2px solid var(--md-primary); outline-offset:2px; }

/* Icons (Material Symbols, SVG-Sprite) */
.icon{ width:24px; height:24px; flex:0 0 auto; fill:currentColor; display:inline-block; vertical-align:middle; }
.icon--s{ width:18px; height:18px; }
.icon--l{ width:28px; height:28px; }

/* ---------- Layout ---------- */
.app{ min-height:100vh; display:flex; flex-direction:column; }
.content{ padding:16px; flex:1 1 auto; width:100%; max-width:760px; margin:0 auto; }
.footer{ text-align:center; color:var(--md-on-surface-variant); font-size:.75rem; letter-spacing:.03em; padding:16px 0 24px; }

/* ---------- Top App Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:20; height:64px; padding:0 4px 0 4px;
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  background:var(--md-surface); transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
.topbar--scrolled{ background:var(--md-surface-container); }
.topbar__actions, .topbar > div:last-child{ display:flex; align-items:center; gap:4px; }
.brand{ display:flex; align-items:center; gap:4px; min-width:0; }
.brand__home{ display:inline-flex; align-items:center; padding:8px; border-radius:var(--radius-full); }
.brand__logo--wide{ height:34px; width:auto; max-width:56vw; }
.logo--dark{ display:none !important; }
html[data-theme="dark"] .logo--light{ display:none !important; }
html[data-theme="dark"] .logo--dark{ display:block !important; }

/* Icon Button (48px Touch-Ziel) */
.iconbtn{
  width:48px; height:48px; border:0; border-radius:var(--radius-full); background:transparent;
  color:var(--md-on-surface-variant); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; text-decoration:none; flex:0 0 auto;
}
.iconbtn::before{ content:""; position:absolute; inset:4px; border-radius:inherit; background:currentColor; opacity:0; transition:opacity .15s; }
.iconbtn:hover::before{ opacity:.08; }
.iconbtn:active::before{ opacity:.12; }

/* ---------- Navigation Drawer (Burger-Menü, von rechts) ---------- */
.menuwrap{ position:static; }
.scrim{ position:fixed; inset:0; background:var(--md-scrim); z-index:40; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.scrim--open{ opacity:1; pointer-events:auto; }
.mainmenu{
  position:fixed; top:0; right:0; bottom:0; width:min(320px, 86vw); z-index:41;
  background:var(--md-surface-container-low); border-radius:var(--radius-l) 0 0 var(--radius-l);
  padding:12px; display:flex; flex-direction:column; gap:2px; box-shadow:var(--elev-1);
  transform:translateX(105%); transition:transform .3s var(--ease); visibility:hidden;
}
.mainmenu[hidden]{ display:flex; }
.mainmenu--open{ transform:none; visibility:visible; }
.mainmenu__head{ display:flex; align-items:center; justify-content:space-between; padding:4px 4px 12px 16px; color:var(--md-on-surface-variant); font-size:.875rem; font-weight:500; letter-spacing:.006em; }
.mainmenu__item{
  display:flex; align-items:center; gap:12px; height:56px; padding:0 24px 0 16px; border-radius:var(--radius-full);
  color:var(--md-on-surface-variant); text-decoration:none; font-weight:500; font-size:.875rem; letter-spacing:.006em;
}
.mainmenu__item:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.mainmenu__item--active{ background:var(--md-secondary-container); color:var(--md-on-secondary-container); }
.mainmenu__item--sep{ margin-top:auto; }
.mainmenu__divider{ height:1px; background:var(--md-outline-variant); margin:8px 16px; }

/* ---------- Cards ---------- */
.card{ background:var(--md-surface-container-low); border-radius:var(--radius-m); overflow:hidden; }
.card + .card, .settings + .settings{ margin-top:16px; }
.card__header{ padding:16px 16px 8px; }
.card__header--row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.card__title{ font-size:1.375rem; line-height:1.27; font-weight:400; }
.card__body{ padding:8px 16px 16px; }
.card__subtitle{ color:var(--md-on-surface-variant); font-size:.875rem; }

.status{ font-size:.875rem; color:var(--md-on-surface-variant); }

/* ---------- Buttons ---------- */
.btn{
  font:inherit; font-size:.875rem; font-weight:500; letter-spacing:.006em;
  height:40px; padding:0 24px; border-radius:var(--radius-full); border:1px solid var(--md-outline);
  background:transparent; color:var(--md-primary); cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden;
  transition:box-shadow .15s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .15s; }
.btn:hover::before{ opacity:.08; }
.btn:active::before{ opacity:.12; }
.btn .icon{ width:18px; height:18px; margin-left:-8px; }
/* Filled */
.btn-primary{ background:var(--md-primary); color:var(--md-on-primary); border-color:transparent; }
.btn-primary:hover{ box-shadow:var(--elev-1); }
/* Outlined / Text */
.btn--ghost{ background:transparent; color:var(--md-primary); border-color:var(--md-outline); }
.btn--text{ border-color:transparent; padding:0 12px; }
/* Tonal */
.btn--tonal{ background:var(--md-secondary-container); color:var(--md-on-secondary-container); border-color:transparent; }
/* Final (Orange): Abschließen & buchen */
.btn--final{ background:var(--md-final); color:var(--md-on-final); border-color:transparent; }
.btn--final:hover{ box-shadow:var(--elev-1); }
/* Groß, volle Breite (Lager, Handschuhe) */
.btn--block{ display:flex; width:100%; height:56px; font-size:1rem; border-radius:var(--radius-l); }
.btn--block .icon{ width:24px; height:24px; }
/* Deaktiviert (MD3: 12 % Fläche, 38 % Text) */
.btn:disabled, .btn[disabled]{ cursor:not-allowed; box-shadow:none; }
.btn:disabled::before{ opacity:0; }
.btn-primary:disabled, .btn--tonal:disabled{ background:color-mix(in srgb, var(--md-on-surface) 12%, transparent); color:color-mix(in srgb, var(--md-on-surface) 38%, transparent); }
.btn--ghost:disabled{ border-color:color-mix(in srgb, var(--md-on-surface) 12%, transparent); color:color-mix(in srgb, var(--md-on-surface) 38%, transparent); }
/* Final deaktiviert: mildes Orange statt Grau, damit klar bleibt, welcher Schritt hier folgt */
.btn--final:disabled{ background:color-mix(in srgb, var(--md-final) 35%, var(--md-surface)); color:color-mix(in srgb, var(--md-on-final) 85%, transparent); }
html[data-theme="dark"] .btn--final:disabled{ background:color-mix(in srgb, var(--md-final) 18%, var(--md-surface-container-low)); color:color-mix(in srgb, var(--md-on-surface) 38%, transparent); }
.btn__plus{ display:none; }

/* ---------- Text Fields (Outlined, Label schwebt immer oben) ---------- */
.field{ display:flex; flex-direction:column; position:relative; margin-top:6px; }
.field > span{
  position:absolute; top:-8px; left:12px; padding:0 4px; z-index:1;
  font-size:.75rem; line-height:16px; letter-spacing:.03em; color:var(--md-on-surface-variant);
  background:var(--fieldbg, var(--md-surface-container-low)); pointer-events:none;
}
.field:focus-within > span{ color:var(--md-primary); }
input, select{
  width:100%; height:56px; font:inherit; font-size:1rem; padding:0 16px;
  border:1px solid var(--md-outline); border-radius:var(--radius-xs);
  background:transparent; color:var(--md-on-surface); outline:none;
}
input::placeholder{ color:var(--md-on-surface-variant); opacity:.7; }
input:hover{ border-color:var(--md-on-surface); }
input:focus{ border:2px solid var(--md-primary); padding:0 15px; }
.field--error input{ border-color:var(--md-error); }
.field--error > span{ color:var(--md-error); }
.modal__panel .field > span{ --fieldbg:var(--md-surface-container-high); }

/* ---------- Suche ---------- */
.searchbox{ padding:8px 16px 12px; }
.searchrow{ display:flex; gap:8px; align-items:stretch; }
.searchrow--5050{ display:grid; grid-template-columns:1fr auto; gap:8px; }
.searchwrap{ position:relative; width:100%; min-width:0; }
.searchwrap input{ padding-left:48px; height:56px; border-radius:var(--radius-xl); border:0; background:var(--md-surface-container-high); }
.searchwrap input:focus{ border:0; padding-left:48px; box-shadow:inset 0 0 0 2px var(--md-primary); }
.searchwrap .icon--lead{ position:absolute; left:14px; top:16px; color:var(--md-on-surface-variant); pointer-events:none; }
.searchrow--5050 .btn{ height:56px; border-radius:var(--radius-l); padding:0 20px; }
#searchHint{ margin-top:8px; }
#searchHint:empty{ display:none; }

/* Spinner (MD3 circular indicator) */
.spinner{
  position:absolute; right:16px; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:50%;
  border:3px solid color-mix(in srgb, var(--md-primary) 25%, transparent); border-top-color:var(--md-primary);
  opacity:0; pointer-events:none; animation:spin .8s linear infinite;
}
.spinner--on{ opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Segmented Buttons (Filter, Abholort, Packstück-Typ, Theme) ---------- */
.listfilter, .typepick, .segmented{
  display:flex; border:1px solid var(--md-outline); border-radius:var(--radius-full); overflow:hidden;
}
.listfilter{ margin:4px 16px 0; }
.listfilter__btn, .typepick__btn, .segmented__btn{
  flex:1 1 0; min-width:0; height:48px; padding:0 8px; border:0; border-left:1px solid var(--md-outline);
  background:transparent; color:var(--md-on-surface); font:inherit; font-size:.875rem; font-weight:500; letter-spacing:.006em;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; white-space:nowrap; position:relative;
}
.listfilter__btn:first-child, .typepick__btn:first-child, .segmented__btn:first-child{ border-left:0; }
.listfilter__btn:hover, .typepick__btn:hover, .segmented__btn:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.listfilter__btn--on, .typepick__btn--on, .segmented__btn--on{ background:var(--md-secondary-container) !important; color:var(--md-on-secondary-container); }
.listfilter__btn--on::before, .typepick__btn--on::before, .segmented__btn--on::before{
  content:""; width:18px; height:18px; flex:0 0 18px;
  background:currentColor; -webkit-mask:url("../assets/check.svg") center/18px no-repeat; mask:url("../assets/check.svg") center/18px no-repeat;
}
.listfilter__count{ font-size:.75rem; color:inherit; opacity:.8; font-variant-numeric:tabular-nums; }
.listfilter__count::before{ content:"("; } .listfilter__count::after{ content:")"; }
.listfilter__count:empty{ display:none; }
.listinfo{ padding:8px 16px 8px; font-size:.75rem; letter-spacing:.03em; color:var(--md-on-surface-variant); }
/* Packstück-Typ im Dialog etwas höher */
#typePick{ margin-bottom:20px; }
#typePick .typepick__btn{ height:56px; font-size:1rem; }

/* ---------- Listen ---------- */
.list{ display:flex; flex-direction:column; }
.item{
  display:flex; gap:16px; align-items:center; padding:12px 16px; min-height:72px;
  border-top:1px solid var(--md-outline-variant); background:transparent; color:var(--md-on-surface);
}
.item:first-child{ border-top:0; }
.list:not(:empty){ border-top:1px solid var(--md-outline-variant); }
.item--click{ cursor:pointer; position:relative; }
.item--click:hover{ background:color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.item--click:active{ background:color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
.item__lead{ width:40px; height:40px; border-radius:var(--radius-full); background:var(--md-primary-container); color:var(--md-on-primary-container); display:flex; align-items:center; justify-content:center; flex:0 0 40px; }
.item__lead--done{ background:var(--md-success-container); color:var(--md-on-success-container); }
.item__lead--err{ background:var(--md-error-container); color:var(--md-on-error-container); }
.item__lead--muted{ background:color-mix(in srgb, var(--md-on-surface) 12%, transparent); color:color-mix(in srgb, var(--md-on-surface) 38%, transparent); }
.item__left{ flex:1 1 auto; min-width:0; }
.item__nr{ font-size:1rem; font-weight:500; letter-spacing:.009em; }
.item__meta{ color:var(--md-on-surface-variant); font-size:.875rem; letter-spacing:.016em; line-height:1.43; }
.item__meta b{ font-weight:500; color:var(--md-on-surface-variant); }
.item__right{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.listmore{ display:block; width:100%; height:56px; border:0; border-top:1px solid var(--md-outline-variant); background:transparent; color:var(--md-primary); font:inherit; font-size:.875rem; font-weight:500; cursor:pointer; }
.listmore[hidden]{ display:none; }

/* Chips / Badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center; gap:4px; height:32px; min-width:44px; padding:0 12px;
  border:1px solid var(--md-outline-variant); border-radius:var(--radius-s);
  font-size:.875rem; font-weight:500; color:var(--md-on-surface-variant); background:transparent;
}
.badge--done{ background:var(--md-success-container); color:var(--md-on-success-container); border-color:transparent; }
.chip{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border-radius:var(--radius-s); font-size:.75rem; font-weight:500; letter-spacing:.03em; }
.chip--done{ background:var(--md-success-container); color:var(--md-on-success-container); }
.chip--err{ background:var(--md-error-container); color:var(--md-on-error-container); }
.chip--warn{ background:var(--md-warn-container); color:var(--md-on-warn-container); }
/* Versandart in der Liste (Material 3):
   buchbar (Spedition) = gefüllt in Primärfarbe (höchste Betonung),
   nicht buchbar = "disabled"-Stil (on-surface 12 % Fläche, 38 % Text) */
.chip--freight{ background:var(--md-primary); color:var(--md-on-primary); font-weight:600; }
.chip--neutral{ background:color-mix(in srgb, var(--md-on-surface) 12%, transparent); color:color-mix(in srgb, var(--md-on-surface) 38%, transparent); }
.item__chips{ margin-top:4px; display:flex; flex-wrap:wrap; gap:4px; }

/* ---------- Dialoge (Modal) ---------- */
.modal{
  position:fixed; inset:0; background:var(--md-scrim); display:none; align-items:center; justify-content:center;
  padding:24px 16px; z-index:50;
}
.modal--open{ display:flex; animation:fadein .2s var(--ease); }
.modal__panel{
  width:min(560px, 100%); max-height:calc(100vh - 48px); overflow:auto;
  background:var(--md-surface-container-high); border-radius:var(--radius-xl); box-shadow:var(--elev-3);
  animation:dialogin .25s var(--ease);
}
.modal__header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:20px 12px 8px 24px; font-size:1.5rem; line-height:1.33; }
.modal__header > div{ font-weight:400 !important; }
.modal__header .btn--ghost, .modal__header .iconbtn{ border:0; }
.modal__body{ padding:8px 24px 20px; color:var(--md-on-surface-variant); }
.modal__body .field{ color:var(--md-on-surface); }
.modal__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.modal__actions .btn--ghost{ border-color:transparent; padding:0 12px; }
@keyframes fadein{ from{ opacity:0; } }
@keyframes dialogin{ from{ opacity:0; transform:scale(.92); } }
.modal .status{ white-space:pre-line; overflow-wrap:anywhere; }
#pkgModalStatus:empty{ display:none; }
.scanvideo{ width:100%; max-height:55vh; background:#000; border-radius:var(--radius-m); }

/* ---------- Snackbar ---------- */
.snackbar{
  position:fixed; left:50%; bottom:16px; transform:translate(-50%, 24px); z-index:60;
  width:min(560px, calc(100% - 32px)); min-height:48px; padding:14px 16px; border-radius:var(--radius-xs);
  background:var(--md-inverse-surface); color:var(--md-inverse-on-surface); box-shadow:var(--elev-3);
  font-size:.875rem; letter-spacing:.016em; white-space:pre-line; display:flex; align-items:center; gap:12px;
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .25s var(--ease);
}
.snackbar--open{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.snackbar--error{ background:var(--md-error-container); color:var(--md-on-error-container); }
.snackbar__text{ flex:1 1 auto; }
.snackbar__btn{ background:none; border:0; color:var(--md-inverse-primary); font:inherit; font-weight:500; cursor:pointer; padding:8px; }
.snackbar--error .snackbar__btn{ color:var(--md-on-error-container); }

/* ---------- Modus-Banner (Test/Live) ---------- */
.modebar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px;
  border-radius:var(--radius-m); font-size:.875rem; line-height:1.43; letter-spacing:.016em;
}
.modebar--test{ background:var(--md-warn-container); color:var(--md-on-warn-container); }
.modebar--live{ background:var(--md-success-container); color:var(--md-on-success-container); }
.modebar__tag{ font-weight:700; letter-spacing:.08em; font-size:.75rem; padding:4px 8px; border-radius:var(--radius-s); border:1px solid currentColor; }
.modebar__text{ flex:1 1 220px; }
.modebar__link{ color:inherit; font-weight:500; margin-left:auto; }

/* ---------- Detailseite ---------- */
.productpick{ margin-top:20px; }
.productpick__label{ font-size:.875rem; font-weight:500; color:var(--md-on-surface-variant); margin-bottom:8px; }
.hint--info{ color:var(--md-on-surface-variant); font-size:.875rem; margin-top:8px; }
.hint--warn{ color:var(--md-error); font-size:.875rem; margin-top:8px; white-space:pre-line; }
.booking{ margin-top:16px; padding:16px; border-radius:var(--radius-m); background:var(--md-surface-container-highest); line-height:1.5; }
.booking__title{ font-weight:500; font-size:1rem; margin-bottom:4px; }
.booking--booked{ background:var(--md-success-container); color:var(--md-on-success-container); }
.booking--failed, .booking--unknown{ background:var(--md-error-container); color:var(--md-on-error-container); }
.booking__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.booking--booked .btn--ghost{ color:var(--md-on-success-container); border-color:currentColor; }
.completebar{ padding:16px; border-top:1px solid var(--md-outline-variant); }
.dn__number{ font-size:1.75rem; line-height:1.29; font-weight:400; }
.dn__meta{ margin-top:4px; }

/* Aktualisieren */
.refresh{ display:flex; align-items:center; gap:4px; }
.refresh__time{ font-size:.75rem; letter-spacing:.03em; color:var(--md-on-surface-variant); white-space:nowrap; }

/* ---------- Einstellungen / Info ---------- */
.settings__body{ padding:8px 16px 16px; display:flex; flex-direction:column; gap:16px; }
.settings__text{ margin:0; color:var(--md-on-surface-variant); font-size:.875rem; }
.settings .status{ white-space:pre-line; }
.settings .status:empty{ display:none; }
.infolist{ display:grid; grid-template-columns:max-content 1fr; gap:12px 24px; margin:0; padding:8px 16px 16px; font-size:.875rem; }
.infolist dt{ color:var(--md-on-surface-variant); }
.infolist dd{ margin:0; overflow-wrap:anywhere; }
.infook{ color:var(--md-success); font-weight:500; }
.infoerr{ color:var(--md-error); font-weight:500; }
.infomuted{ color:var(--md-on-surface-variant); font-size:.875em; }

/* Login */
.login{ max-width:440px; margin:0 auto; padding-top:48px; }
.login .card__header{ padding:24px 24px 8px; }
.login .card__body{ padding:16px 24px 24px; display:flex; flex-direction:column; gap:20px; }
.login__error{ background:var(--md-error-container); color:var(--md-on-error-container); padding:12px 16px; border-radius:var(--radius-m); font-size:.875rem; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 380px){
  .content{ padding:12px; }
  .listfilter__btn{ font-size:.8rem; padding:0 4px; }
}

/* ---------- Release Notes (Info) ---------- */
.releases{ padding:0 0 8px; }
.release{ border-top:1px solid var(--md-outline-variant); }
.release:first-child{ border-top:0; }
.release__head{ list-style:none; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 16px; cursor:pointer; }
.release__head::-webkit-details-marker{ display:none; }
.release__head:hover{ background:color-mix(in srgb, var(--md-on-surface) 6%, transparent); }
.release__version{ font-weight:500; flex:1 1 auto; }
.release__date{ font-size:.875rem; color:var(--md-on-surface-variant); white-space:nowrap; }
.release__chevron{ color:var(--md-on-surface-variant); transition:transform .2s var(--ease); }
.release[open] .release__chevron{ transform:rotate(90deg); }
.release__notes{ margin:0; padding:0 16px 16px 40px; color:var(--md-on-surface-variant); font-size:.875rem; line-height:1.6; }

/* Lieferadresse auf der Detailseite (vollständig) */
.dn__addr{ margin-top:12px; padding:12px 16px; border-radius:12px; background:var(--md-surface-container-low); }
.dn__addrlabel{ font-size:.75rem; font-weight:500; letter-spacing:.05em; color:var(--md-on-surface-variant); margin-bottom:4px; }
.dn__addrlines{ font-size:.9375rem; line-height:1.45; color:var(--md-on-surface); }
.dn__contact{ margin-top:8px; font-size:.875rem; line-height:1.6; color:var(--md-on-surface-variant); }
.dn__contact b{ font-weight:500; }
.dn__contact a{ color:var(--md-primary); text-decoration:none; word-break:break-all; }

/* Häkchen-Zeile (z. B. Tracking-Mail im Buchen-Dialog) */
.checkrow{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.9375rem; }
.checkrow input{ width:20px; height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:var(--md-primary); }

/* Packstücke (Phase 2): Summenzeile, Vorlagen im Dialog */
.pkgtotals{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:0 16px 12px; font-size:.875rem; color:var(--md-on-surface-variant); }
.pkgtotals b{ font-weight:500; color:var(--md-on-surface); }
.pkgtemplates{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.pkgtemplates button{ height:32px; padding:0 12px; border-radius:var(--radius-s); border:1px solid var(--md-outline-variant); background:transparent; color:var(--md-on-surface-variant); font:inherit; font-size:.8125rem; cursor:pointer; }
.pkgtemplates button:hover{ background:color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
.status--warn{ color:var(--md-warn) !important; }
#pkgLockedHint .icon{ width:18px; height:18px; vertical-align:-3px; }