@layer reset, tokens, base, layout, components, modules, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, fieldset, legend { margin: 0; padding: 0; }
  fieldset { border: 0; min-width: 0; }
  img { max-width: 100%; }
  button, input, select { font: inherit; color: inherit; }
}

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@layer tokens {
  :root {
    --bg: light-dark(#e8eaee, #0f0f12);          /* Seite */
    --panel: light-dark(#ffffff, #18181b);       /* Bereiche (Ebene 1) */
    --raised: light-dark(#f6f7f9, #212127);      /* Karten, Felder (Ebene 2) */
    --overlay: light-dark(#ffffff, #2a2a32);     /* Dialoge, Menüs (Ebene 3) */
    --canvas: light-dark(#f3f4f7, #212127);      /* ruhige Flächen, z. B. Arbeitsplatz */
    --tile: light-dark(#f6f7f9, #ececf1);
    --field: light-dark(#ffffff, #212127);       /* Eingabefelder */
    --edge: light-dark(#0000, #26262d);          /* feine Kante um Bereiche im Dunkeln */
    /* Text */
    --ink: light-dark(#161a26, #ececf1);
    --mute: light-dark(#5f6678, #a1a1ae);        /* mindestens 4,5:1 auf allen Flächen */
    --faint: light-dark(#8a90a0, #7a7a88);       /* nur Deaktiviertes und Dekor */
    --on-ink: light-dark(#ffffff, #0f0f12);      /* Schrift auf --ink-Flächen */
    /* Linien */
    --line: light-dark(#d5d9e1, #2e2e36);        /* Haarlinien, dekorativ */
    --field-line: light-dark(#7d8496, #7a7a88);  /* Rand von Eingabefeldern: mindestens 3:1 */
    --acc: light-dark(#3b3bff, #9a9aff);
    --acc-strong: light-dark(#2525d6, #b4b4ff);
    --acc-soft: light-dark(#e7e7ff, #26264f);
    --acc-wash: light-dark(#3b3bff22, #9a9aff33);
    --on-acc: light-dark(#ffffff, #0f0f12);
    /* Auswahl (Chips) */
    --sel-bg: light-dark(#161a26, #26264f);
    --sel-fg: light-dark(#ffffff, #b4b4ff);
    --sel-line: light-dark(#161a26, #9a9aff);
    /* Status */
    --danger: light-dark(#b3261e, #ff9b93);
    --danger-soft: light-dark(#fbe3e1, #3a1c1a);
    --on-danger: light-dark(#ffffff, #0f0f12);
    --ok: light-dark(#12612a, #8de0a5);
    --ok-soft: light-dark(#dff3e4, #17301f);
    /* Schatten, Scrim, Schachbrett der Freisteller-Vorschau */
    --scrim: light-dark(#161a2699, #0009);
    --shade-sm: light-dark(#0003, #0006);
    --shade-lg: light-dark(#0004, #0008);
    --knob: light-dark(#ffffff, #ffffff);
    --chk-a: light-dark(#e5e7ec, #8e8e9a);
    --chk-b: light-dark(#ffffff, #a6a6b2);
    --stage: light-dark(#ececf1, #8e8e9a);
    --stage-dot: light-dark(#c9ceda, #7f7f8c);
    --stage-ink: light-dark(#5f6678, #0f0f12);
    --stage-acc: light-dark(#3b3bff, #1a1a7a);
    /* Maße und Schrift */
    --radius: 14px;
    --radius-sm: 8px;
    --tap: 40px;              /* Mindestgröße für Touch-Ziele */
    --font: "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --serif: Georgia, "Times New Roman", serif;
    /* Bewegung */
    --ease-out: cubic-bezier(.23, 1, .32, 1);        /* Ein- und Ausblenden, Druck-Rückmeldung */
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);    /* Bewegung auf dem Bildschirm */
    --ease-sheet: cubic-bezier(.32, .72, 0, 1);      /* Bottom-Sheet, wie iOS */
    --t-press: 140ms;
    --t-fade: 200ms;
    --t-sheet: 300ms;
    --t-sheet-exit: 220ms;
    --t-exit: 160ms;
  }
  :root[data-stage="light"] { --stage: #ececf1; --stage-dot: #c9ceda; --stage-ink: #5f6678; --stage-acc: #3b3bff; }
  :root[data-stage="mid"]   { --stage: #8e8e9a; --stage-dot: #7f7f8c; --stage-ink: #0f0f12; --stage-acc: #1a1a7a; }
  :root[data-stage="dark"]  { --stage: #18181b; --stage-dot: #2e2e36; --stage-ink: #a1a1ae; --stage-acc: #9a9aff; }
  @media (prefers-contrast: more) {
    :root { --line: light-dark(#8a90a0, #7a7a88); --edge: light-dark(#8a90a0, #7a7a88); }
  }
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --bg: #e8eaee; --panel: #ffffff; --raised: #f6f7f9; --overlay: #ffffff; --canvas: #f3f4f7; --tile: #f6f7f9; --field: #ffffff; --edge: #0000;
      --ink: #161a26; --mute: #5f6678; --faint: #8a90a0; --on-ink: #ffffff; --line: #d5d9e1; --field-line: #7d8496;
      --acc: #3b3bff; --acc-strong: #2525d6; --acc-soft: #e7e7ff; --acc-wash: #3b3bff22; --on-acc: #ffffff;
      --sel-bg: #161a26; --sel-fg: #ffffff; --sel-line: #161a26;
      --danger: #b3261e; --danger-soft: #fbe3e1; --on-danger: #ffffff; --ok: #12612a; --ok-soft: #dff3e4;
      --scrim: #161a2699; --shade-sm: #0003; --shade-lg: #0004; --knob: #ffffff; --chk-a: #e5e7ec; --chk-b: #ffffff;
      --stage: #ececf1; --stage-dot: #c9ceda; --stage-ink: #5f6678; --stage-acc: #3b3bff;
    }
  }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-gutter: stable; }
  html:has(dialog[open]) { overflow: hidden; }
  body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
  p, .hint, .sub, .empty { text-wrap: pretty; }
  a, button, input, select, label, [role="button"] { touch-action: manipulation; }
  button, [role="button"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  h1 { font-size: 30px; font-style: italic; letter-spacing: -.5px; }
  h2 { font-size: 20px; }
  h3 { font-size: 16px; }
  label { display: block; font-size: 13px; color: var(--mute); margin: 12px 0 4px; }
  input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--field); min-height: var(--tap); }
  ::placeholder { color: var(--mute); opacity: 1; }
  input[type=checkbox], input[type=range] { width: auto; min-height: 0; padding: 0; accent-color: var(--acc); }
  :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  [aria-invalid="true"] { border-color: var(--danger); }
  dialog { border: 0; border-radius: var(--radius); padding: 22px; width: min(720px, 94vw); max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; box-shadow: 0 20px 60px var(--shade-lg); background: var(--overlay); color: var(--ink); }
  dialog::backdrop { background: var(--scrim); }
  dialog[data-closing] { pointer-events: none; }
  .grab { display: none; }
}

@layer layout {
  .topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 28px; }
  .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .layout { display: grid; grid-template-columns: minmax(300px, 1fr) 440px minmax(240px, 300px); gap: 20px; padding: 0 28px 28px; align-items: start; }
  .layout > * { min-width: 0; }
  .panel { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 18px; }
  .panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; }
  .panel-head--full { width: 100%; }
  .meta { color: var(--mute); font-size: 13px; }
  #stage { display: flex; flex-direction: column; align-items: center; }
  @media (max-width: 1000px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    #stage { order: -1; }
  }
  @media (max-width: 560px) { .topbar, .layout { padding-inline: 16px; } }
}

@layer components {
  /* Buttons */
  button { cursor: pointer; border: 1px solid var(--ink); background: transparent; padding: 7px 14px; border-radius: 999px; min-height: 36px; }
  button:active:not(:disabled) { background: var(--ink); color: var(--on-ink); }
  button:disabled { opacity: .45; cursor: not-allowed; }
  button.pri { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
  button.pri:active:not(:disabled) { background: var(--acc-strong); border-color: var(--acc-strong); }
  @media (hover: hover) and (pointer: fine) {
    button:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); }
    button.pri:hover:not(:disabled) { background: var(--acc-strong); border-color: var(--acc-strong); }
  }
  button.small { padding: 4px 12px; font-size: 13px; min-height: 30px; }

  /* Suche */
  .search { margin-bottom: 10px; -webkit-appearance: none; appearance: none; }
  .search::-webkit-search-cancel-button { cursor: pointer; }
  .card .n small.tg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hint--tip { margin-top: 8px; }

  /* Kategorie-Filter */
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
  .chips button { padding: 3px 11px; font-size: 13px; min-height: 30px; border-color: var(--line); }
  .chips button[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-line); }

  /* Kleiderschrank-Karten */
  #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .card { position: relative; border: 2px solid transparent; border-radius: 10px; background: var(--tile); cursor: pointer; overflow: hidden; }
  .card.used { border-color: var(--acc); }
  .card img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: contain; padding: 6px; filter: drop-shadow(0 2px 3px var(--shade-sm)); }
  .card img.mb { filter: none; }
  .mb { mix-blend-mode: multiply; }
  .card .n { padding: 6px 8px 8px; font-size: 13px; line-height: 1.25; background: var(--raised); overflow-wrap: anywhere; hyphens: auto; }
  .card .n small { display: block; color: var(--mute); }
  .card .n a.h { display: block; color: var(--acc); font-size: 12px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (hover: hover) and (pointer: fine) { .card .n a.h:hover { text-decoration: underline; } }
  .card .x { position: absolute; top: 5px; right: 5px; display: none; gap: 4px; }
  .card:focus-within .x { display: flex; }
  @media (hover: hover) and (pointer: fine) { .card:hover .x { display: flex; } }
  @media (hover: none) { .card .x { display: flex; } }
  .x button { padding: 0; width: 28px; height: 28px; min-height: 0; background: var(--overlay); border-radius: 50%; font-size: 13px; line-height: 1; display: grid; place-items: center; }
  .x button:active:not(:disabled) { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
  @media (hover: hover) and (pointer: fine) { .x button:hover:not(:disabled) { background: var(--acc); border-color: var(--acc); color: var(--on-acc); } }
  .empty { color: var(--mute); padding: 30px 6px; text-align: center; grid-column: 1 / -1; }
  .empty--tight { padding: 10px 0; }

  /* Anprobe-Board */
  #wrap { position: relative; max-width: 100%; }
  #board { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 400px; height: 600px; background: var(--stage) radial-gradient(var(--stage-dot) 1px, transparent 1px) 0 0 / 20px 20px; border-radius: 10px; overflow: hidden; touch-action: none; }
  #board .p { position: absolute; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
  #board .p.sel { outline: 2px dashed var(--stage-acc); outline-offset: 3px; }
  #board .hint { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--stage-ink); padding: 40px; pointer-events: none; }
  .rot-ctl { position: absolute; width: 0; height: 0; pointer-events: none; }
  .rot-stem { position: absolute; left: -1px; width: 2px; background: var(--stage-acc); }
  .rot-knob { position: absolute; left: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--knob); border: 2px solid var(--stage-acc); cursor: grab; pointer-events: auto; touch-action: none; box-shadow: 0 1px 4px var(--shade-sm); }
  .rot-knob:active { cursor: grabbing; }
  @media (prefers-reduced-motion: no-preference) { #board.snap .p { transition: left .3s ease, top .3s ease, width .3s ease, transform .3s ease; } }
  .tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
  .sub { color: var(--mute); font-size: 13px; margin-top: 8px; text-align: center; }
  .ver { color: var(--mute); font-size: 12px; text-align: center; padding: 4px 16px calc(84px + env(safe-area-inset-bottom)); }
  .ver button { background: none; border: 0; padding: 10px 6px; font: inherit; color: var(--acc-strong); text-decoration: underline; cursor: pointer; min-height: var(--tap); }

  /* Ebenen- und Preisliste unter dem Board */
  #sum { width: 100%; margin-top: 16px; }
  #sum .r { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
  #sum .r.on { background: var(--acc-soft); }
  #sum .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: none; padding: 2px 4px; min-height: 0; border-radius: 4px; }
  #sum .nm:active:not(:disabled) { background: none; color: var(--acc); }
  @media (hover: hover) and (pointer: fine) { #sum .nm:hover:not(:disabled) { background: none; color: var(--acc); text-decoration: underline; } }
  #sum .lay { display: flex; gap: 2px; flex: none; }
  #sum .lay button { padding: 0; width: 24px; height: 24px; min-height: 0; font-size: 10px; border-color: var(--line); line-height: 1; }
  #sum a { color: var(--acc); text-decoration: none; font-weight: 600; }
  #sum .t { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 2px; font-weight: 600; }
  #sum .m { color: var(--mute); font-size: 12px; font-weight: 400; margin-top: 2px; }
  #sum .m--head { margin: 0 0 4px; }

  /* Gespeicherte Outfits */
  .out { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
  .mini { position: relative; width: 84px; height: 126px; flex: none; background: var(--stage); border-radius: 6px; overflow: hidden; }
  .mini > div { background: var(--stage); position: absolute; left: 0; top: 0; width: 400px; height: 600px; transform: scale(.21); transform-origin: 0 0; }
  .mini img { position: absolute; }
  .out b { font-weight: 600; display: block; word-break: break-word; }
  .out small { color: var(--mute); }
  .out .b { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .out .b button { padding: 2px 10px; font-size: 13px; min-height: 30px; }

  /* Formulare im Dialog */
  #dlgTitle:focus { outline: 0; }   /* nimmt beim Öffnen den Fokus, damit kein Feld vorausgewählt ist und die Tastatur nicht aufspringt */
  #dlg .sec { margin-top: 14px; padding: 14px; background: var(--raised); border-radius: var(--radius); }
  #dlg .sec--link { margin-top: 12px; }
  #dlg .sec > label:first-child, #dlg .g2 label { margin-top: 0; }
  #dlg .g2 + .g2, #dlg .g2 + .hint { margin-top: 12px; }
  #dlg .sec-title { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; font-family: inherit; }
  #dlg .sec .hint { margin-top: 6px; }
  #imgPick { margin-top: 12px; }
  #pickRow { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding: 3px; margin-inline: -3px; scroll-snap-type: x proximity; }
  #pickRow button { flex: none; width: 68px; height: 84px; min-height: 0; padding: 0; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--tile); scroll-snap-align: start; }
  #pickRow button[aria-pressed="true"] { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-wash); }
  #pickRow img { display: block; width: 100%; height: 100%; object-fit: contain; }
  #pickRow .wait { flex: none; width: 68px; height: 84px; border-radius: var(--radius-sm); background: var(--tile); opacity: .6; }
  #dlg .sec--link #status { margin-top: 4px; }
  #dlg .sec--link #status:empty { min-height: 0; margin: 0; }
  #dlg .row input { flex: 1 1 auto; min-width: 0; }
  .row { display: flex; gap: 8px; }
  .row button { flex: none; }
  .row select { width: 84px; flex: none; }
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ck { display: flex; align-items: center; gap: 6px; color: var(--ink); margin: 0; }
  .ck--spaced { margin-top: 10px; }
  .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
  #status { color: var(--mute); font-size: 13px; min-height: 18px; margin-top: 6px; }
  #status.err { color: var(--danger); }
  #panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .cap { font-size: 12px; color: var(--mute); margin-bottom: 4px; }
  #drop, #res { border-radius: 10px; min-height: 230px; display: grid; place-items: center; text-align: center; color: var(--mute); padding: 8px; overflow: hidden; }
  #drop { border: 2px dashed var(--line); cursor: pointer; }
  #drop.over { border-color: var(--acc); background: var(--acc-soft); }
  #drop.has { border: 2px solid var(--line); cursor: default; padding: 0; background: var(--tile); }
  #pv { position: relative; display: inline-block; line-height: 0; cursor: crosshair; touch-action: none; max-width: 100%; }
  #pv img { max-width: 100%; max-height: 300px; display: block; user-select: none; -webkit-user-drag: none; }
  #selbox { position: absolute; border: 2px solid var(--acc); background: var(--acc-wash); display: none; pointer-events: none; }
  #res { border: 2px solid var(--line); background: conic-gradient(var(--chk-a) 25%, var(--chk-b) 0 50%, var(--chk-a) 0 75%, var(--chk-b) 0) 0 0 / 16px 16px; }
  #res img { max-width: 100%; max-height: 300px; display: block; }
  #opts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; }
  #opts button { padding: 4px 12px; font-size: 13px; min-height: 30px; }
  @media (max-width: 560px) { #panes, .g2 { grid-template-columns: 1fr; } }
}

@layer modules {
  .hint { color: var(--mute); font-size: 13px; }
  .status { min-height: 1.4em; font-size: 13px; color: var(--mute); }
  .status.err { color: var(--danger); }
  .badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-strong); vertical-align: middle; }

  .bench { width: 100%; margin-top: 16px; padding: 12px; background: var(--canvas); border-radius: 10px; }
  .bench h3 { margin-bottom: 4px; }
  .ctl { display: grid; grid-template-columns: 7.5em 1fr 3.5em; gap: 8px; align-items: center; margin-top: 8px; }
  .ctl label { margin: 0; }
  .ctl input[type=range] { width: 100%; }
  .ctl output { text-align: right; font-variant-numeric: tabular-nums; }
  .bench-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .bench fieldset:disabled { opacity: .55; }
}

@layer modules {
  .fab { display: none; }

  .card .x { align-items: center; }
  .card .x .acts { display: flex; gap: 4px; }
  .card .x .more { display: none; }
  .x button { min-height: 0; }
  .card .x .more { width: 36px; height: 36px; font-size: 22px; padding-bottom: 6px; box-shadow: 0 1px 4px var(--shade-sm); border-color: var(--line); }
  @media (hover: none), (max-width: 560px) {
    .card .x { display: flex; top: 4px; right: 4px; }
    .card .x .acts { display: none; }
    .card .x .more { display: grid; }
  }
  /* Wunschliste und Preisverlauf */
  .card .badge { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-strong); font-size: 11px; font-weight: 600; pointer-events: none; }
  .card.wish img { opacity: .8; }
  .pc { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .pc--down { background: var(--ok-soft); color: var(--ok); }
  .pc--up { background: var(--danger-soft); color: var(--danger); }
  #sum .tag { flex: none; padding: 0 7px; border-radius: 999px; background: var(--acc-soft); color: var(--acc-strong); font-size: 11px; font-weight: 600; }
  #sum .t--buy { border-top: 1px solid var(--line); color: var(--acc-strong); margin-top: 6px; padding-top: 6px; }
  #priceHistory { margin-top: 10px; }
  #priceList { margin: 0; padding: 0; list-style: none; font-size: 13px; max-height: 7.5em; overflow: auto; }
  #priceList li { padding: 2px 0; border-top: 1px solid var(--line); }
  #priceList li:first-child { border-top: 0; font-weight: 600; }
  .menu-title { font-size: 18px; margin-bottom: 12px; overflow-wrap: anywhere; }
  .menu-list { display: grid; gap: 8px; }
  .menu-list button { min-height: 48px; text-align: left; padding-inline: 18px; border-radius: 14px; }
  .menu-list .danger { color: var(--danger); border-color: var(--danger); }
  .menu-list .danger:active:not(:disabled) { background: var(--danger); color: var(--on-danger); }
  @media (hover: hover) and (pointer: fine) { .menu-list .danger:hover:not(:disabled) { background: var(--danger); color: var(--on-danger); } }
  @media (min-width: 561px) { #menuDlg { width: min(360px, 94vw); } }

  #sum, #priceList, #count, .card .n small, .pc, .out small { font-variant-numeric: tabular-nums; }

  @media (pointer: coarse) {
    button { min-height: 44px; }
    .chips button, .out .b button, #opts button, button.small { min-height: 40px; }
    input, select { min-height: 44px; }
    #sum .lay { gap: 8px; }
    #sum .lay button, .card .x .more { position: relative; }
    #sum .lay button { width: 32px; height: 32px; }
    #sum .lay button::after { content: ""; position: absolute; inset: -6px -4px; }
    .card .x .more::after { content: ""; position: absolute; inset: -4px; }
  }

  @media (max-width: 560px) {
    /* iOS zoomt bei Eingabefeldern unter 16px */
    input, select { font-size: 16px; }
    h1 { font-size: 26px; }
    .topbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; }
    .topbar .actions button:not(.pri) { padding-inline: 10px; font-size: 13px; }
    #addBtn { display: none; }
    .fab { display: grid; place-items: center; position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; font-size: 30px; line-height: 1; box-shadow: 0 6px 18px var(--shade-lg); }
    .layout { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .panel { padding: 14px; }

    /* Dialoge als Bottom-Sheet */
    dialog { width: 100vw; max-width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
    .foot { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); background: var(--overlay); padding-block: 10px; }
    .ctl { grid-template-columns: 6em 1fr 3.2em; }
  }
}

@layer modules {
  /* Runde Icon-Buttons (Rückgängig, Wiederholen, Design, Mehr) */
  .ibtn { width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; border-color: var(--line); font-size: 20px; line-height: 1; }
  .ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ibtn svg .solid { fill: currentColor; }
  .more-btn { display: none; }
  .tools .wide { min-width: 8.5em; }

  #toasts { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: max(24px, env(safe-area-inset-bottom)); display: grid; justify-items: center; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
  .toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--overlay); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px var(--shade-lg); font-size: 14px; }
  .toast--err { border-color: var(--danger); }
  .toast button { border: 0; background: none; color: var(--acc); font-weight: 600; padding: 6px 12px; min-height: 36px; border-radius: 8px; }
  .toast button:active:not(:disabled) { background: var(--acc-soft); color: var(--acc-strong); }
  @media (hover: hover) and (pointer: fine) { .toast button:hover:not(:disabled) { background: var(--acc-soft); color: var(--acc-strong); } }

  /* Eigener Dialog für Rückfragen und Namenseingabe */
  @media (min-width: 561px) { #uiDlg, #moreDlg { width: min(420px, 94vw); } }   /* am Smartphone gilt das Bottom-Sheet in voller Breite */
  #uiText { margin-top: 8px; color: var(--mute); }
  #uiOk.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }

  @media (max-width: 560px) {
    #exp, #imp { display: none; }
    .more-btn { display: grid; }
    #toasts { bottom: calc(88px + env(safe-area-inset-bottom)); }
    .topbar .actions { flex-wrap: nowrap; }
  }
  @media (pointer: coarse) {
    .ibtn { width: 44px; height: 44px; }
  }

  @media (max-width: 560px) {
    .grab { display: block; position: relative; height: 32px; margin: -18px -16px -12px; touch-action: none; cursor: grab; }
    .grab::before { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--faint); }
  }

  @media (prefers-reduced-motion: no-preference) {
    button { transition: background-color var(--t-press) ease, color var(--t-press) ease, border-color var(--t-press) ease, transform var(--t-press) var(--ease-out); }
    button:active:not(:disabled) { transform: scale(.97); }
    .ibtn:active:not(:disabled) { transform: scale(.92); }
    .fab:active { transform: scale(.94); }
    .card { transition: border-color .15s ease, transform var(--t-press) var(--ease-out); }
    .card:active { transform: scale(.98); }
    .card.enter { animation: card-in 300ms var(--ease-out); }
    #board .p { transition: filter .12s ease; }
    #board .p:active { filter: drop-shadow(0 10px 14px var(--shade-lg)); }
    dialog[open] { animation: dlg-in var(--t-fade) var(--ease-out); }
    dialog[open]::backdrop { animation: fade-in var(--t-fade) ease-out; }
    dialog[open][data-closing] { animation: dlg-out var(--t-exit) var(--ease-out) forwards; }
    dialog[open][data-closing]::backdrop { animation: fade-out var(--t-exit) ease-out forwards; }
    .toast { animation: toast-in var(--t-fade) var(--ease-out); }
    .toast--out { animation: toast-out var(--t-exit) var(--ease-out) forwards; }
    ::view-transition-group(root) { animation-duration: .2s; }
    @media (max-width: 560px) {
      dialog[open] { animation: sheet-in var(--t-sheet) var(--ease-sheet); }
      dialog[open][data-closing] { animation: sheet-out var(--t-sheet-exit) var(--ease-sheet) forwards; }
      dialog[open][data-closing="drag"] { animation: none; }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    dialog[open], dialog[open]::backdrop { animation: fade-in var(--t-press) ease-out; }
  }
  @keyframes card-in { from { opacity: 0; transform: scale(.92); } }
  @keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @keyframes dlg-out { to { opacity: 0; transform: scale(.98); } }
  @keyframes sheet-in { from { transform: translateY(100%); } }
  @keyframes sheet-out { to { transform: translateY(100%); } }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
}

@layer modules {
  /* Aus dem Shop übernehmen */

  /* Ideen: Vorschläge, Packliste, Verkaufstext */
  .head-act { display: flex; gap: 6px; }
  @media (min-width: 561px) { #ideaDlg, #saleDlg { width: min(520px, 94vw); } }
  .idea-list { list-style: none; margin: 6px 0 0; padding: 0; }
  .idea-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
  .idea-strip { flex: 0 0 100%; display: flex; gap: 2px; overflow: hidden; }
  .idea-strip img { flex: none; width: 34px; height: 46px; object-fit: contain; padding: 2px; background: var(--tile); border-radius: 6px; }
  .idea-list .t { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
  .idea-list small { display: block; color: var(--mute); }
  #packList h3 { margin: 14px 0 2px; font-size: 14px; }
  #packList h3 small { font-weight: 400; color: var(--mute); }
  #packList ul { list-style: none; margin: 0; padding: 0; }
  #packList li { padding: 4px 0; }
  #saleText { display: block; width: 100%; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--field); color: inherit; font: inherit; line-height: 1.45; resize: vertical; }

  /* Kalender und Auswertung */
  @media (min-width: 561px) { #calDlg { width: min(520px, 94vw); } }
  .cal-nav { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
  .cal-nav h3 { flex: 1; text-align: center; }
  #calGrid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
  #calGrid th { font-size: 12px; font-weight: 600; color: var(--mute); padding: 4px 0; }
  #calGrid td { padding: 0; }
  .cal-day { position: relative; display: grid; place-items: center; width: 100%; height: 40px; min-height: 0; padding: 0; border-color: transparent; border-radius: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
  .cal-day--out { color: var(--mute); }
  .cal-day[aria-current="date"] { border-color: var(--ink); }
  .cal-day[aria-pressed="true"] { background: var(--sel-bg); color: var(--sel-fg); border-color: var(--sel-line); }
  .cal-day i { position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; box-sizing: border-box; }
  .cal-day i.worn { background: var(--acc); }
  .cal-day i.plan { border: 1.5px solid var(--acc); }
  .cal-day[aria-pressed="true"] i.worn { background: var(--sel-fg); }
  .cal-day[aria-pressed="true"] i.plan { border-color: var(--sel-fg); }
  .cal-day-title { margin-top: 14px; font-size: 16px; }
  .cal-day-title:focus { outline: none; }
  .cal-list, .stat-list { list-style: none; margin: 6px 0 0; padding: 0; }
  .cal-list li, .stat-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
  .cal-list .t, .stat-list .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .cal-list small, .stat-list small { display: block; color: var(--mute); }
  .cal-list li.cal-empty { color: var(--mute); }
  .cal-empty { color: var(--mute); padding: 10px 0; }
  .cal-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  #calHint { margin-top: 8px; }
  .stat-list img { flex: none; width: 36px; height: 48px; object-fit: contain; padding: 2px; background: var(--tile); border-radius: 6px; }
  .stat-list .v { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
  #calStats h3 { margin-top: 14px; }
  @media (pointer: coarse) { .cal-day { height: 44px; } }
}

@media (forced-colors: active) {
  button, input, select { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight; }
}

@layer utilities {
  [hidden] { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--on-ink); padding: 8px 14px; border-radius: 8px; z-index: 10; }
  .skip:focus { top: 8px; }
}