@layer reset, basis, rahmen, bauteile, ansichten;

@view-transition { navigation: auto; }

@font-face { font-family: Inter; src: url(/static/inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

@property --gap { syntax: '<length>'; inherits: false; initial-value: 16px; }
@property --min { syntax: '<length>'; inherits: false; initial-value: 240px; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  button, summary, label[for] { cursor: pointer; }
  table { border-collapse: collapse; width: 100%; }
  :where(ul, ol) { list-style: none; }
  :where(a) { color: inherit; text-decoration: none; }
  :where(h1, h2, h3, h4) { font: inherit; }
  [hidden] { display: none !important; }
}

@layer basis {
  :root {
    color-scheme: light;
    --bg: oklch(1 0 0); --fg: oklch(0.145 0 0);
    --card: oklch(1 0 0); --sidebar: oklch(0.985 0 0);
    --muted: oklch(0.967 0.001 286); --muted-fg: oklch(0.52 0.01 286);
    --border: oklch(0.92 0.004 286); --input: oklch(0.88 0.004 286);
    --ok: oklch(0.55 0.13 150); --warn: oklch(0.6 0.14 65); --bad: oklch(0.56 0.2 27);
    --ring: var(--brand); --ton: var(--muted-fg);
    --radius: 0.625rem;
    --shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 1px 3px oklch(0 0 0 / 0.04);
    --shadow-lg: 0 10px 30px -8px oklch(0 0 0 / 0.18), 0 4px 8px -4px oklch(0 0 0 / 0.08);
    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.5rem;
    --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
      color-scheme: dark;
      --bg: oklch(0.145 0 0); --fg: oklch(0.975 0 0);
      --card: oklch(0.18 0.003 286); --sidebar: oklch(0.165 0.003 286);
      --muted: oklch(0.25 0.004 286); --muted-fg: oklch(0.72 0.01 286);
      --border: oklch(1 0 0 / 0.1); --input: oklch(1 0 0 / 0.16);
      --ok: oklch(0.72 0.15 150); --warn: oklch(0.78 0.14 75); --bad: oklch(0.7 0.18 25);
      --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
    }
  }
  :root[data-theme=dark] {
    color-scheme: dark;
    --bg: oklch(0.145 0 0); --fg: oklch(0.975 0 0);
    --card: oklch(0.18 0.003 286); --sidebar: oklch(0.165 0.003 286);
    --muted: oklch(0.25 0.004 286); --muted-fg: oklch(0.72 0.01 286);
    --border: oklch(1 0 0 / 0.1); --input: oklch(1 0 0 / 0.16);
    --ok: oklch(0.72 0.15 150); --warn: oklch(0.78 0.14 75); --bad: oklch(0.7 0.18 25);
    --shadow: 0 1px 2px oklch(0 0 0 / 0.4);
  }

  body {
    font: 400 var(--text-sm) / 1.5 var(--font);
    font-feature-settings: 'cv11', 'ss01';
    color: var(--fg); background: var(--bg);
    min-height: 100dvh;
    overflow-wrap: break-word; hyphens: auto;
    -webkit-font-smoothing: antialiased;
  }
  @media (pointer: coarse) { body { font-size: 0.9375rem; } }
  h1 { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
  h2 { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; }
  h3 { font-weight: 600; }
  strong, b { font-weight: 600; }
  small, .muted { color: var(--muted-fg); }
  small { font-size: var(--text-xs); }
  p { text-wrap: pretty; }
  :where(p) a, .link { color: var(--brand-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
  ::selection { background: color-mix(in oklab, var(--brand) 25%, transparent); }
  .icon { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .zahl, td[data-art=zahl], th[data-art=zahl] { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
  .mono { font-family: var(--mono); font-size: 0.92em; }

  :where(input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea) {
    width: 100%; min-height: 2.25rem; padding: 0.375rem 0.75rem;
    background: var(--bg); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s;
  }
  :where(input, select, textarea):focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent); }
  :where(input, select, textarea):user-invalid { border-color: var(--bad); }
  :where(textarea) { resize: vertical; line-height: 1.5; }
  :where(select) { appearance: none; padding-inline-end: 2rem; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 1rem; }
  :where(input[type=checkbox], input[type=radio]) { width: 1rem; height: 1rem; accent-color: var(--brand); }
  ::placeholder { color: var(--muted-fg); opacity: 1; }
  @media (pointer: coarse) { :where(input, select, textarea) { font-size: 1rem; min-height: 2.75rem; } }
}

@layer rahmen {
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; min-width: 0; }
  .row { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: center; min-width: 0; }
  .split { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; min-width: 0; }
  .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr)); }
  .eng { --gap: 0.5rem; }
  .weit { --gap: 2rem; }
  .breit { --min: 22rem; }
  .schmal { --min: 10rem; }
  .ende { margin-inline-start: auto; }
  .stack > .btn, .card > .btn { justify-self: start; }

  .shell { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100dvh; }
  .sidebar {
    position: sticky; top: 0; inset: auto; height: 100dvh; width: auto; margin: 0; overflow: auto;
    display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 0.75rem;
    color: inherit; background: var(--sidebar); border: 0; border-inline-end: 1px solid var(--border);
  }
  .haus { display: flex; gap: 0.625rem; align-items: center; padding: 0.375rem; font-weight: 600; line-height: 1.25; }
  .haus small { display: block; font-weight: 400; }
  .logo { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: calc(var(--radius) - 2px); background: var(--akzent); color: var(--akzent-fg); font-weight: 700; letter-spacing: -0.03em; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.06); }
  .nav { display: grid; gap: 2px; align-content: start; }
  .nav small { padding: 1rem 0.625rem 0.25rem; font-weight: 500; }
  .nav a { display: flex; gap: 0.625rem; align-items: center; min-height: 2.25rem; padding: 0.375rem 0.625rem; border-radius: calc(var(--radius) - 2px); color: color-mix(in oklab, var(--fg) 82%, transparent); }
  .nav a:hover { background: var(--muted); color: var(--fg); }
  .nav a[aria-current=page] { background: var(--muted); color: var(--fg); font-weight: 500; }
  .nav a[aria-current=page] .icon { color: var(--brand-text); }
  .nav .zahl { margin-inline-start: auto; color: var(--muted-fg); font-size: var(--text-xs); }

  main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
  .topbar {
    position: sticky; top: 0; z-index: 5; display: flex; gap: 0.75rem; align-items: center; min-height: 3.5rem; padding: 0.5rem 1.5rem;
    background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
  }
  .topbar h1 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .zurueck { margin-inline-start: -0.5rem; }
  .inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-content: start; width: 100%; max-width: 76rem; padding: 1.5rem; }
  .tabbar { display: none; }

  @media (max-width: 52rem) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar:not(:popover-open) { display: none; }
    .sidebar:popover-open { position: fixed; inset: 0 auto 0 0; width: min(19rem, 86vw); height: 100dvh; box-shadow: var(--shadow-lg); }
    .sidebar::backdrop { background: oklch(0 0 0 / 0.35); }
    .topbar { padding-inline: 1rem; }
    .inhalt { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); gap: 1.25rem; }
    .tabbar {
      position: fixed; inset: auto 0 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
      padding: 0.375rem 0.25rem calc(0.375rem + env(safe-area-inset-bottom));
      background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border);
    }
    .tabbar :is(a, button) { display: grid; justify-items: center; gap: 0.125rem; padding: 0.25rem 0; border: 0; background: none; font-size: 0.6875rem; font-weight: 500; color: var(--muted-fg); }
    .tabbar .icon { width: 1.375rem; height: 1.375rem; }
    .tabbar [aria-current=page] { color: var(--brand-text); }
    .tabbar .scan { align-self: center; justify-self: center; width: 3.25rem; height: 3.25rem; place-content: center; border-radius: 999px; background: var(--brand); color: var(--brand-fg); box-shadow: var(--shadow-lg); }
    .tabbar .scan span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
}

@layer bauteile {
  .btn {
    --btn-bg: var(--brand); --btn-fg: var(--brand-fg); --btn-rand: transparent;
    display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; flex: none;
    min-height: 2.25rem; padding: 0.375rem 0.875rem; border: 1px solid var(--btn-rand); border-radius: calc(var(--radius) - 2px);
    background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; line-height: 1.25; text-align: center;
    box-shadow: var(--shadow); transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
  }
  .btn:hover { background: color-mix(in oklab, var(--btn-bg) 88%, var(--fg)); }
  .btn:disabled { opacity: 0.5; pointer-events: none; }
  .btn[data-art=zweit] { --btn-bg: var(--muted); --btn-fg: var(--fg); box-shadow: none; }
  .btn[data-art=rand] { --btn-bg: var(--bg); --btn-fg: var(--fg); --btn-rand: var(--input); }
  .btn[data-art=still] { --btn-bg: transparent; --btn-fg: inherit; box-shadow: none; }
  .btn[data-art=gefahr] { --btn-bg: var(--bad); --btn-fg: oklch(1 0 0); }
  .btn[data-groesse=klein] { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: var(--text-xs); }
  .btn[data-groesse=gross] { min-height: 2.75rem; padding: 0.5rem 1.25rem; font-size: var(--text-base); }
  .btn[data-groesse=icon] { width: 2.25rem; padding: 0; }
  @media (pointer: coarse) { .btn { min-height: 2.75rem; } .btn[data-groesse=icon] { width: 2.75rem; } }

  [data-ton=ok] { --ton: var(--ok); }
  [data-ton=warn] { --ton: var(--warn); }
  [data-ton=bad] { --ton: var(--bad); }
  [data-ton=info] { --ton: var(--brand-text); }
  .badge {
    display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.0625rem 0.5rem; border-radius: 999px;
    font-size: var(--text-xs); font-weight: 500; line-height: 1.25rem; white-space: nowrap;
    color: var(--ton); background: color-mix(in oklab, var(--ton) 11%, transparent);
  }
  .badge::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 99px; background: currentColor; }

  .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; min-width: 0; padding: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow); }
  .card > header { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: space-between; }
  .card > header p { flex-basis: 100%; color: var(--muted-fg); }
  .card > .voll { margin-inline: -1.25rem; }
  .card > .voll:last-child { margin-block-end: -1.25rem; }

  .stat { display: grid; gap: 0.25rem; align-content: start; padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow); transition: border-color 0.15s; }
  a.stat:hover { border-color: color-mix(in oklab, var(--ton) 45%, var(--border)); }
  .stat span { display: flex; gap: 0.5rem; align-items: center; color: var(--muted-fg); font-weight: 500; }
  .stat span .icon { color: var(--ton); }
  .stat strong { font-size: var(--text-2xl); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

  .field { display: grid; gap: 0.375rem; align-content: start; min-width: 0; }
  .field label { font-weight: 500; }
  .formular { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
  .formular .ganz { grid-column: 1 / -1; }

  .table { font-size: var(--text-sm); }
  .table th { height: 2.5rem; padding: 0 0.75rem; text-align: start; font-weight: 500; color: var(--muted-fg); border-bottom: 1px solid var(--border); white-space: nowrap; }
  .table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
  .table [data-art=zahl] { text-align: end; }
  .table tbody tr { transition: background-color 0.1s; }
  .table tbody tr:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }
  .table tr:last-child td { border-bottom: 0; }
  .table td:first-child a { font-weight: 500; }
  .table td:first-child a::after { content: ''; position: absolute; inset: 0; }
  .table tr { position: relative; }
  @container (max-width: 40rem) {
    .table thead { display: none; }
    .table tr { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); }
    .table td { display: block; padding: 0; border: 0; text-align: start; }
    .table td:first-child { grid-column: 1 / -1; }
    .table td[data-art=zahl] { grid-column: 2; grid-row: 2; text-align: end; }
    .table td[data-art=klein] { color: var(--muted-fg); font-size: var(--text-xs); }
  }
  .card, .inhalt { container-type: inline-size; }

  .liste { display: grid; }
  .liste > li { border-bottom: 1px solid var(--border); }
  .liste > li:last-child { border-bottom: 0; }
  .liste > li > a, .liste .eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem; align-items: center; padding: 0.75rem 1.25rem; }
  .liste > li > a:hover { background: color-mix(in oklab, var(--muted) 60%, transparent); }
  .liste small { grid-column: 1; }
  .liste .zahl { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: end; gap: 0.25rem; }
  .liste .aktionen { grid-column: 1 / -1; margin-block-start: 0.375rem; }
  .liste .eintrag > a:hover strong { text-decoration: underline; }

  .chips { display: flex; gap: 0.375rem; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
  .chips a { display: inline-flex; gap: 0.375rem; align-items: center; flex: none; min-height: 2rem; padding: 0.25rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 500; color: var(--muted-fg); background: var(--bg); }
  .chips a:hover { color: var(--fg); }
  .chips a[aria-current=page] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
  .chips a small { color: inherit; opacity: 0.75; font-variant-numeric: tabular-nums; }

  .kette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); counter-reset: s; }
  .kette li { display: grid; gap: 0.375rem; justify-items: start; padding-block-start: 0.75rem; border-block-start: 3px solid var(--border); font-size: var(--text-xs); font-weight: 500; color: var(--muted-fg); }
  .kette li[data-stand=fertig] { border-color: var(--brand); color: var(--fg); }
  .kette li[data-stand=jetzt] { border-color: var(--brand); color: var(--brand-text); }
  .kette li + li { margin-inline-start: 4px; }
  @container (max-width: 34rem) { .kette li > * { display: none; } }

  .empty { display: grid; gap: 0.5rem; justify-items: center; padding: 2.5rem 1rem; text-align: center; color: var(--muted-fg); }
  .empty .icon { width: 2rem; height: 2rem; stroke-width: 1.5; }
  .empty strong { color: var(--fg); }
  .empty p { max-width: 32rem; }

  .dialog { margin: auto; width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.25rem; gap: 1rem; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg); }
  .dialog[open] { display: grid; }
  .dialog::backdrop { background: oklch(0 0 0 / 0.4); backdrop-filter: blur(2px); }
  .dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  @media (max-width: 52rem) { .dialog { width: 100vw; max-width: none; margin: auto 0 0; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); } }

  .toast { position: fixed; z-index: 50; inset: auto 1rem 1rem auto; display: flex; gap: 0.625rem; align-items: center; max-width: min(26rem, calc(100vw - 2rem)); padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: rein 0.25s ease-out, raus 0.3s ease-in 4.5s forwards; }
  .toast .icon { color: var(--ton); }
  @media (max-width: 52rem) { .toast { inset: 1rem 1rem auto; } }
  @keyframes rein { from { opacity: 0; translate: 0 0.5rem; } }
  @keyframes raus { to { opacity: 0; visibility: hidden; } }

  .hinweis { display: flex; gap: 0.75rem; align-items: start; padding: 0.875rem 1rem; border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--ton) 30%, var(--border)); background: color-mix(in oklab, var(--ton) 7%, var(--card)); }
  .hinweis > .icon { margin-block-start: 0.125rem; color: var(--ton); }

  .kopf { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; justify-content: space-between; }
  .kopf > div { display: grid; gap: 0.25rem; min-width: 0; }
  .kopf p { color: var(--muted-fg); }

  .such { position: relative; flex: 1; max-width: 24rem; }
  .such .icon { position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%; color: var(--muted-fg); pointer-events: none; }
  .such input { padding-inline-start: 2.25rem; }

  .daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1.25rem; }
  .daten dt { color: var(--muted-fg); }
  @container (max-width: 26rem) { .daten { grid-template-columns: minmax(0, 1fr); gap: 0 0; } .daten dd { margin-block-end: 0.625rem; } }

  .avatar { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 99px; background: var(--muted); font-size: var(--text-xs); font-weight: 600; }
  hr { border: 0; border-top: 1px solid var(--border); }
  kbd { padding: 0 0.3rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; font: 500 var(--text-xs) var(--mono); }
}

@layer ansichten {
  .grow { flex: 1; min-width: 8rem; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nurtelefon { display: none; }
  @media (max-width: 52rem) { .nurtelefon { display: inline-flex; } }
  .spalten { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
  @container (max-width: 56rem) { .spalten { grid-template-columns: minmax(0, 1fr); } }
  .verlauf { display: grid; gap: 0.75rem; }
  .verlauf li { display: grid; gap: 0.125rem; padding-inline-start: 0.875rem; border-inline-start: 2px solid var(--border); }
  .rezepttext { white-space: pre-line; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--muted); font-family: var(--mono); font-size: var(--text-xs); }
  .posten { table-layout: fixed; }
  .posten th:nth-child(1) { width: 9.5rem; } .posten th:nth-child(3) { width: 5rem; } .posten th:nth-child(4) { width: 7rem; } .posten th:nth-child(5) { width: 7rem; } .posten th:nth-child(6) { width: 3rem; }
  .posten input { min-height: 2rem; padding: 0.25rem 0.5rem; box-shadow: none; }
  .posten td { padding-block: 0.375rem; }
  .posten td[data-art=zahl] input { text-align: end; }
  .posten tfoot td { border-top: 1px solid var(--border); font-weight: 500; }
  .posten td:first-child a::after { content: none; }
  .posten select { min-height: 2rem; padding-block: 0.25rem; box-shadow: none; }
  @container (max-width: 40rem) {
    .posten, .posten tbody, .posten tfoot { display: block; }
    .posten tbody tr { grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem 2.75rem; grid-template-areas: 'text text text text' 'hmv hmv zahler zahler' 'menge preis preis weg'; align-items: end; gap: 0.5rem; }
    .posten td:nth-child(1) { grid-area: hmv; } .posten td:nth-child(2) { grid-area: text; } .posten td:nth-child(3) { grid-area: menge; } .posten td:nth-child(4) { grid-area: preis; } .posten td:nth-child(5) { grid-area: zahler; } .posten td:nth-child(6) { grid-area: weg; }
    .posten td:not(:last-child)::before { content: attr(data-label); display: block; margin-block-end: 0.25rem; font-size: var(--text-xs); color: var(--muted-fg); text-align: start; }
    .posten td input, .posten td:first-child input, .posten td[data-art=zahl] input { width: 100%; }
    .posten tfoot tr { display: flex; justify-content: space-between; }
    .posten tfoot td:empty { display: none; }
  }
  .werkstueck h2 { font-size: var(--text-lg); }
  .farbe { width: 1rem; height: 1rem; flex: none; }

  .anmeldung { display: grid; place-items: center; min-height: 100dvh; padding: 1rem; background: var(--sidebar); }
  .anmeldung > .card { width: min(26rem, 100%); padding: 2rem; gap: 1.25rem; }

  [data-flaeche=seite] body { display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); }
  .seitenkopf { position: sticky; top: 0; z-index: 5; display: flex; gap: 0.5rem 1rem; align-items: center; padding: 0.5rem max(1rem, calc((100% - 69rem) / 2)); background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .seitennav { display: flex; margin-inline-start: auto; }
  .seitennav a, .seitenfuss nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.625rem; border-radius: calc(var(--radius) - 2px); color: var(--muted-fg); font-weight: 500; }
  .seitennav a:hover, .seitennav a[aria-current=page], .seitenfuss nav a:hover { color: var(--fg); }
  .nurrechner { display: inline-flex; }
  .menue { inset: 3.75rem 1rem auto auto; width: min(18rem, calc(100vw - 2rem)); margin: 0; padding: 0.375rem; color: inherit; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow-lg); }
  .menue:popover-open { display: grid; }
  .menue a { display: flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem; border-radius: calc(var(--radius) - 2px); font-weight: 500; }
  .menue a:hover { background: var(--muted); }
  .seiteninhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; align-content: start; width: 100%; max-width: 72rem; margin: 0 auto; padding: 2rem 1.5rem 5rem; container-type: inline-size; }
  .held { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; justify-items: start; max-width: 50rem; padding-block: 2rem 0; }
  .held h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); letter-spacing: -0.035em; line-height: 1.05; overflow-wrap: anywhere; }
  .gross { font-size: var(--text-lg); color: var(--muted-fg); max-width: 40rem; }
  .seiteninhalt .card > .icon, .seiteninhalt .card h2 .icon { width: 1.5rem; height: 1.5rem; color: var(--brand-text); }
  .seiteninhalt .card h2 { display: flex; gap: 0.5rem; align-items: center; }
  ul.card.liste { padding: 0; gap: 0; }
  a.card { transition: border-color 0.15s; }
  a.card:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); }
  .pfad { display: flex; flex-wrap: wrap; gap: 0 0.25rem; align-items: center; color: var(--muted-fg); }
  .pfad a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .pfad a:hover { color: var(--fg); }
  .beitrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .beitrag .held { padding-block: 0; gap: 1rem; }
  .beitrag .held h1 { font-size: clamp(1.875rem, 4.5vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.12; }
  .lesen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
  .lesen > nav { gap: 0.25rem; padding: 0.75rem; }
  .lesen > nav small { padding: 0.25rem 0.625rem; font-weight: 500; }
  .lesen > nav .nav a { min-height: 2.75rem; }
  @container (min-width: 62rem) {
    .lesen { grid-template-columns: minmax(0, 44rem) minmax(14rem, 18rem); justify-content: space-between; }
    .lesen > nav { grid-column: 2; grid-row: 1; position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow: auto; }
    .lesen > nav .nav a { min-height: 2.25rem; }
  }
  .text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; max-width: 44rem; font-size: var(--text-base); line-height: 1.7; container-type: inline-size; }
  .text h2 { margin-block-start: 1.5rem; font-size: var(--text-xl); line-height: 1.3; scroll-margin-block-start: 5rem; text-wrap: balance; }
  .text h3 { margin-block-start: 0.5rem; font-size: var(--text-lg); line-height: 1.4; }
  .text :is(ul, ol) { display: grid; gap: 0.375rem; padding-inline-start: 1.25rem; }
  .text ul { list-style: disc; }
  .text ol { list-style: decimal; }
  .text li::marker { color: var(--muted-fg); }
  .text a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  .text code { padding: 0.0625rem 0.3rem; border-radius: 4px; background: var(--muted); font-family: var(--mono); font-size: 0.875em; }
  .text dl { display: grid; gap: 0.25rem; }
  .text dt { margin-block-start: 0.75rem; font-weight: 600; }
  .text .table { font-size: var(--text-sm); line-height: 1.5; }
  .text .table th { height: auto; padding-block: 0.5rem; white-space: normal; vertical-align: bottom; }
  .rollen { min-width: 0; overflow-x: auto; }
  .text .hinweis p { margin: 0; }
  @container (max-width: 40rem) {
    :is(.text, [data-ausgabe]) .table tr { grid-template-columns: minmax(0, 1fr); }
    .text .table tr { padding-inline: 0; }
    :is(.text, [data-ausgabe]) .table :is(td, td[data-art=zahl]) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.75rem; grid-column: auto; grid-row: auto; text-align: start; }
    :is(.text, [data-ausgabe]) .table td[data-label]::before { content: attr(data-label); min-width: 0; overflow-wrap: anywhere; color: var(--muted-fg); font-size: var(--text-xs); line-height: 1.5rem; }
  }
  .ablage { position: relative; display: grid; justify-items: center; gap: 0.375rem; padding: 2rem 1rem; border: 2px dashed var(--input); border-radius: var(--radius); text-align: center; color: var(--muted-fg); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
  .ablage:hover, .ablage:focus-within, .ablage[data-ueber] { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 5%, transparent); }
  .ablage input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .ablage .icon { width: 1.75rem; height: 1.75rem; color: var(--brand-text); }
  .ablage strong { color: var(--fg); }
  [data-ausgabe] canvas { width: 100%; }
  [data-ausgabe] .grid { --min: 8.5rem; }
  [data-ausgabe] .stat strong { font-size: var(--text-xl); overflow-wrap: anywhere; }
  [data-oeffnen=stl] canvas { aspect-ratio: 16 / 10; max-height: 28rem; touch-action: none; cursor: grab; }
  .schaufenster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: 1.5rem; align-items: end; }
  .bildschirm { overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg); }
  .bildschirm[data-geraet=telefon] { width: 100%; max-width: 18rem; justify-self: center; border-radius: 1.75rem; border-width: 6px; border-color: var(--fg); }
  .bildschirm img { width: 100%; height: auto; }
  .farben { display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); justify-content: center; gap: clamp(0.5rem, 3cqi, 2rem); }
  .farben .bildschirm[data-geraet=telefon] { border-width: clamp(3px, 0.8cqi, 6px); border-radius: clamp(0.75rem, 3cqi, 1.75rem); }
  @media (max-width: 44rem) {
    .schaufenster { grid-template-columns: minmax(0, 1fr); }
    .schaufenster > :first-child { display: none; }
    .bildschirm:not(.farben *) { justify-self: center; width: 100%; max-width: 18rem; border-radius: 1.75rem; border-width: 6px; border-color: var(--fg); }
  }
  .seitenfuss { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; padding: 2.5rem max(1rem, calc((100% - 69rem) / 2)); color: var(--muted-fg); background: var(--sidebar); border-top: 1px solid var(--border); }
  .seitenfuss strong { color: var(--fg); }
  .seitenfuss nav { display: flex; flex-wrap: wrap; align-content: start; margin-inline: -0.625rem; }
  @media (max-width: 52rem) { .seitennav, .nurrechner { display: none; } .seitenkopf > .row { margin-inline-start: auto; } }
  @media (max-width: 40rem) { .seitenkopf .haus small { display: none; } .seiteninhalt { padding: 1.5rem 1rem 3rem; gap: 2.5rem; } }
  @media print {
    body:has([data-druck]) * { visibility: hidden; }
    [data-druck], [data-druck] * { visibility: visible; }
    [data-druck] { position: absolute; inset: 0 0 auto; border: 0; box-shadow: none; }
  }
}
@layer ansichten {
  @media (max-width: 52rem) {
    .topbar .btn:has(.icon) { width: 2.75rem; padding: 0; }
    .topbar .btn:has(.icon) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
@layer ansichten {
  .scanzeile .such { max-width: none; }
  .werkstueck[data-ton] { border-color: color-mix(in oklab, var(--ton) 45%, var(--border)); }
  .werkstueck header a { min-width: 0; }
}