/* Invosky.com - Stylesheet
   Aufbau: Kaskadenschichten, light-dark()-Token, Glasflächen über einem
   ruhigen Farbverlauf. Keine Webfonts, kein Framework.

   Grundsatz für Glas: die Rahmenelemente sind durchscheinend, die
   Leseflächen fast deckend. Eine Rechnung muss lesbar bleiben. */

@layer reset, base, theme, layout, components, utilities;

/* ===================== reset ===================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
  ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  :target { scroll-margin-block-start: 5rem; }
}

/* ===================== theme ===================== */
@layer theme {
  :root {
    color-scheme: light dark;

    /* Markenfarben, aus dem Logo entnommen */
    --brand-navy: #011d55;
    --brand-blue: #006efe;
    --brand-cyan: #00b7ff;
    --brand-teal: #00bfb4;

    /* Grundfarben. Die Textfarben sind marineblau abgetönt, damit sie
       zur Wortmarke passen, ohne den Kontrast zu verlieren. */
    --ink:        light-dark(#0b1430, #e7ecf5);
    --ink-2:      light-dark(#46506c, #a3adc4);
    --ink-3:      light-dark(#6d7690, #7f8aa1);
    --accent:     light-dark(#0a4fc4, #7fb4ff);
    --accent-ink: light-dark(#ffffff, #011126);
    --ok:         light-dark(#0a6f66, #4fd6c6);
    --warn:       light-dark(#8a5a11, #dfa96a);
    --bad:        light-dark(#992a20, #e88d80);

    /* Getönte Ableitungen, in oklab gemischt */
    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
    --ok-soft:     color-mix(in oklab, var(--ok) 14%, transparent);
    --warn-soft:   color-mix(in oklab, var(--warn) 16%, transparent);
    --bad-soft:    color-mix(in oklab, var(--bad) 14%, transparent);

    /* Glasflächen. Zwei Stufen: Rahmen durchscheinend, Lesefläche fast deckend. */
    --glass:       light-dark(rgb(255 255 255 / .58), rgb(16 26 48 / .58));
    --glass-solid: light-dark(rgb(255 255 255 / .94), rgb(12 20 38 / .93));
    --glass-deep:  light-dark(rgb(255 255 255 / .40), rgb(10 18 36 / .45));
    --edge:        light-dark(rgb(255 255 255 / .70), rgb(255 255 255 / .10));
    --rule:        light-dark(rgb(1 29 85 / .14), rgb(255 255 255 / .13));
    --rule-strong: light-dark(rgb(1 29 85 / .28), rgb(255 255 255 / .26));
    --blur: 18px;
    --shadow: 0 1px 2px rgb(1 29 85 / .06), 0 8px 28px -12px rgb(1 29 85 / .22);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    --w: 1120px;
    --r: 12px;
    --r-sm: 8px;
  }

  /* Der Hintergrund, den das Glas überhaupt erst sichtbar macht. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(70ch 55ch at 12% -8%,  color-mix(in oklab, var(--brand-cyan) 26%, transparent), transparent 62%),
      radial-gradient(60ch 50ch at 92% 4%,   color-mix(in oklab, var(--brand-teal) 20%, transparent), transparent 60%),
      radial-gradient(80ch 62ch at 50% 108%, color-mix(in oklab, var(--brand-blue) 18%, transparent), transparent 66%),
      light-dark(#eef3f9, #070c18);
  }
}

/* ===================== base ===================== */
@layer base {
  body {
    margin: 0;
    color: var(--ink);
    font: 400 16px/1.6 var(--sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
  a:hover { color: color-mix(in oklab, var(--accent) 70%, var(--ink)); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

  h1 {
    font-size: clamp(1.9rem, 5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 700;
    text-wrap: balance;
  }
  h2, h3 { letter-spacing: -.015em; text-wrap: balance; }
  p { text-wrap: pretty; }
  th { text-wrap: balance; }

  /* Berührungsziele nie unter 44px in der Höhe der Trefferfläche */
  button, [role="button"], summary { min-block-size: 2.25rem; }
}

/* ===================== layout ===================== */
@layer layout {
  .wrap { max-inline-size: var(--w); margin-inline: auto; padding-inline: 20px; }
  .narrow { max-inline-size: 70ch; }

  .site-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    background: var(--glass);
    border-block-end: 1px solid var(--rule);
    box-shadow: 0 1px 0 var(--edge) inset;
  }
  .site-head > .wrap {
    display: flex; align-items: center; gap: 20px;
    min-block-size: 60px; flex-wrap: wrap;
  }
  .brand {
    display: inline-flex; align-items: center; text-decoration: none;
    padding-block: 6px; border-radius: var(--r-sm); flex: 0 0 auto;
  }
  .brand img {
    block-size: 26px; inline-size: auto;
  }
  @media (max-width: 420px) { .brand img { block-size: 22px; } }

  .foot-brand { display: flex; align-items: center; gap: 12px; max-inline-size: 52ch; }
  .foot-brand img { inline-size: 26px; block-size: 26px; flex: 0 0 auto; opacity: .9; }
  .site-nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: .91rem; }
  .site-nav a { color: var(--ink-2); text-decoration: none; padding-block: 4px; }
  .site-nav a:hover, .site-nav a[aria-current="page"] {
    color: var(--accent); text-decoration: underline;
  }

  .head { padding-block: 34px 38px; }
  .lede {
    font-size: clamp(1.05rem, 2.2vw, 1.19rem); line-height: 1.5;
    color: var(--ink-2); max-inline-size: 62ch;
  }
  .tool { padding-block: 26px 34px; }

  .prose { padding-block: 38px 46px; }
  .prose > .wrap > :is(h2, h3, p, ul, ol, dl, table, pre, .cards, .related, figure) {
    /* Langtexte erst rendern, wenn sie in die Nähe des Sichtfelds kommen */
  }
  .prose h2 { font-size: clamp(1.32rem, 3vw, 1.6rem); margin-block: 34px 12px; font-weight: 700; }
  .prose > .wrap > h2:first-child { margin-block-start: 0; }
  .prose h3 { font-size: 1.12rem; margin-block: 24px 8px; font-weight: 600; }
  .prose :is(p, li) { font-size: 1.03rem; line-height: 1.68; }
  .prose p { max-inline-size: 70ch; margin-block-end: 14px; }
  .prose :is(ul, ol) { max-inline-size: 70ch; padding-inline-start: 22px; list-style: revert; }
  .prose li { margin-block-end: 7px; }

  .site-foot {
    margin-block-start: 40px; padding-block: 28px;
    background: var(--glass-deep); border-block-start: 1px solid var(--rule);
    font-size: .88rem; color: var(--ink-2);
  }
  .site-foot > .wrap { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; }
  .site-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
  .site-foot a { color: var(--ink-2); }
}

/* ===================== components ===================== */
@layer components {

  /* --- Glasplatte, die überall wiederverwendet wird --- */
  .pane {
    background: var(--glass);
    border: 1px solid var(--edge);
    border-radius: var(--r);
    box-shadow: var(--shadow);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-head, .pane, .drop, .sheet, .filebar, .related, .cards > *,
    .msg, dialog, [popover] {
      -webkit-backdrop-filter: blur(var(--blur)) saturate(150%);
      backdrop-filter: blur(var(--blur)) saturate(150%);
    }
  }

  /* --- Brotkrumen --- */
  .crumbs { margin-block-end: 14px; }
  .crumbs ol {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0; padding: 0; list-style: none;
    font-size: .84rem; color: var(--ink-3);
  }
  .crumbs li + li::before { content: "/"; margin-inline-end: 6px; color: var(--rule-strong); }
  .crumbs a { color: var(--ink-2); text-decoration: none; }
  .crumbs a:hover { color: var(--accent); text-decoration: underline; }

  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 20px; }
  .chips li {
    font-size: .81rem; color: var(--ink-2);
    background: var(--glass-deep); border: 1px solid var(--edge);
    border-radius: 999px; padding: 5px 11px;
  }

  /* --- Suche --- */
  .site-search { margin-inline-start: auto; position: relative; }
  .site-search input {
    inline-size: clamp(9rem, 22vw, 15rem);
    padding: 7px 12px; font-size: .88rem;
    background: var(--glass-deep); color: var(--ink);
    border: 1px solid var(--rule-strong); border-radius: 999px;
  }
  .site-search input::placeholder { color: var(--ink-3); }
  .site-search input:focus { border-color: var(--accent); }
  .search-results {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px);
    inline-size: min(30rem, 78vw); max-block-size: 60vh; overflow-y: auto;
    background: var(--glass-solid); border: 1px solid var(--edge);
    border-radius: var(--r); box-shadow: var(--shadow);
    padding: 6px; z-index: 30;
  }
  .search-results:not([hidden]) { display: block; }
  .search-results a {
    display: block; padding: 8px 10px; border-radius: var(--r-sm);
    text-decoration: none; color: var(--ink);
  }
  .search-results a:hover, .search-results a:focus-visible,
  .search-results a[aria-selected="true"] { background: var(--accent-soft); }
  .search-results b { display: block; font-size: .93rem; }
  .search-results small { color: var(--ink-3); font-size: .78rem; }
  .search-empty { padding: 10px; font-size: .88rem; color: var(--ink-2); }

  /* --- Ablagefeld --- */
  .drop {
    background: var(--glass);
    border: 2px dashed var(--rule-strong);
    border-radius: var(--r);
    padding: 42px 24px; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
  }
  .drop:hover { border-color: var(--accent); }
  .drop.over {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 12%, var(--glass));
    transform: scale(1.005);
  }
  .drop.busy { cursor: progress; opacity: .6; }
  .drop-title { font-size: clamp(1.1rem, 2.6vw, 1.36rem); font-weight: 600; margin-block-end: 6px; }
  .drop-sub { color: var(--ink-2); font-size: .94rem; }
  .drop-formats {
    margin-block-start: 16px; font-family: var(--mono);
    font-size: .78rem; color: var(--ink-3);
  }

  .paste-row { margin-block-start: 12px; text-align: center; }
  .paste-toggle {
    background: none; border: 0; color: var(--accent); cursor: pointer;
    font-size: .91rem; text-decoration: underline; text-underline-offset: 2px;
  }
  .paste-box { display: none; margin-block-start: 12px; }
  .paste-box.on { display: block; }
  .paste-box textarea {
    inline-size: 100%; min-block-size: 150px; padding: 12px;
    border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
    font: .81rem/1.5 var(--mono);
    background: var(--glass-solid); color: var(--ink); resize: vertical;
  }

  /* --- Beispiele und Auswahlfeld --- */
  .samples { margin-block-start: 16px; text-align: center; }
  .sample-lead { margin-block-end: 10px; font-size: .91rem; color: var(--ink-2); }
  .sample-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
  .sample {
    text-align: start; cursor: pointer;
    background: var(--glass-solid); border: 1px solid var(--edge);
    border-radius: var(--r-sm); padding: 9px 14px;
    font-size: .91rem; font-weight: 600; color: var(--accent); line-height: 1.3;
    box-shadow: var(--shadow);
  }
  .sample:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--glass-solid)); }
  .sample small { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-2); margin-block-start: 2px; }

  .field { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); }
  select {
    appearance: none;
    padding: 8px 34px 8px 12px; font-size: .91rem;
    background: var(--glass-solid); color: var(--ink);
    border: 1px solid var(--rule-strong); border-radius: 999px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  select:focus { border-color: var(--accent); }

  /* --- Schaltflächen --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .94rem; font-weight: 600; padding: 11px 18px;
    border-radius: 999px; cursor: pointer; text-decoration: none;
    border: 1px solid transparent;
    background: var(--accent); color: var(--accent-ink);
    transition: background .15s, box-shadow .15s;
  }
  .btn:hover { background: color-mix(in oklab, var(--accent) 82%, black); color: var(--accent-ink); }
  .btn-quiet {
    background: var(--glass-solid); color: var(--accent); border-color: var(--edge);
    box-shadow: var(--shadow);
  }
  .btn-quiet:hover { background: var(--accent-soft); color: var(--accent); }
  .btn-sm { padding: 6px 13px; font-size: .84rem; }
  .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 14px; }

  /* --- Meldungen --- */
  .msg {
    padding: 14px 16px; border-inline-start: 4px solid;
    border-radius: var(--r-sm); margin-block-start: 16px; font-size: .94rem;
  }
  .msg-bad { background: var(--bad-soft); border-color: var(--bad); }
  .msg-warn { background: var(--warn-soft); border-color: var(--warn); }
  .msg-hint { margin-block-start: 6px; font-size: .91rem; color: var(--ink-2); }
  .msg-hint a { color: var(--accent); }

  .spinner {
    display: inline-block; inline-size: 13px; block-size: 13px;
    margin-inline-end: 9px; vertical-align: -1px;
    border: 2px solid currentColor; border-block-start-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite; opacity: .7;
  }
  @keyframes spin { to { rotate: 360deg; } }

  /* --- Dateiliste --- */
  .filebar {
    background: var(--glass); border: 1px solid var(--edge); border-block-end: 0;
    border-radius: var(--r) var(--r) 0 0; padding: 12px 16px 0;
  }
  .filebar-sum {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-block-end: 10px;
    font-size: .91rem; color: var(--ink-2);
  }
  .ftabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .ftab {
    font-size: .81rem; cursor: pointer; padding: 7px 12px;
    background: var(--glass-deep); border: 1px solid var(--edge); border-block-end: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--ink-2);
    max-inline-size: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ftab:hover { color: var(--accent); }
  .ftab.on { background: var(--glass-solid); color: var(--ink); font-weight: 600; box-shadow: inset 0 2px 0 var(--accent); }
  .ftab.warn { box-shadow: inset 0 2px 0 var(--warn); }
  .ftab.bad { box-shadow: inset 0 2px 0 var(--bad); color: var(--bad); }
  .filebar + .sheet { border-start-start-radius: 0; border-start-end-radius: 0; margin-block-start: 0; }

  /* --- Rechnungsblatt --- */
  .sheet {
    background: var(--glass-solid); border: 1px solid var(--edge);
    border-radius: var(--r); box-shadow: var(--shadow); margin-block-start: 24px;
  }
  .sheet-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 14px 24px;
    border-block-end: 1px solid var(--rule); background: var(--glass-deep);
    border-radius: var(--r) var(--r) 0 0;
  }
  .sheet-bar .fmt { font-family: var(--mono); font-size: .81rem; color: var(--ink-2); }
  .sheet-bar .fmt b { color: var(--ink); font-weight: 600; }
  .sheet-body { padding: 28px 24px 32px; container-type: inline-size; }

  .stamp {
    display: inline-block; border: 2.5px solid currentColor; border-radius: 4px;
    padding: 7px 13px 6px; font: 700 .84rem/1.15 var(--sans);
    rotate: -2.5deg; white-space: nowrap;
  }
  .stamp small { display: block; font-weight: 500; font-size: .69rem; opacity: .82; margin-block-start: 2px; }
  .stamp-ok { color: var(--ok); }
  .btn { box-shadow: 0 2px 10px -4px color-mix(in oklab, var(--accent) 60%, transparent); }
  .stamp-warn { color: var(--warn); }
  .stamp-bad { color: var(--bad); }

  .doc-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-block-end: 4px; }
  .doc-sub { font-family: var(--mono); font-size: .84rem; color: var(--ink-2); margin-block-end: 24px; }

  .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-block-end: 26px; }
  .party { border-block-start: 2px solid var(--ink); padding-block-start: 10px; }
  .party h3 { font-size: .81rem; font-weight: 600; color: var(--ink-2); margin-block-end: 8px; }
  .party .nm { font-weight: 600; font-size: 1.03rem; }
  .party address { font-style: normal; color: var(--ink-2); font-size: .91rem; line-height: 1.55; }
  .party dl {
    margin-block-start: 10px; font-size: .84rem;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 10px; align-items: baseline;
  }
  .party dt { color: var(--ink-3); white-space: nowrap; }
  .party dd { margin: 0; font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }

  .meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2px 20px; padding-block: 14px; margin-block-end: 24px;
    border-block: 1px solid var(--rule);
  }
  .meta.flush { border-block-start: 0; padding-block-start: 0; }
  .meta > div { padding-block: 4px; }
  .meta dt { font-size: .78rem; color: var(--ink-3); }
  .meta dd { margin: 0; font-size: .94rem; font-weight: 600; font-family: var(--mono); font-variant-numeric: tabular-nums; }
  .meta dt a { color: var(--ink-2); }

  h2.sec {
    font-size: 1.05rem; font-weight: 600; margin-block: 28px 10px;
    padding-block-end: 6px; border-block-end: 1px solid var(--rule);
  }

  table { inline-size: 100%; border-collapse: collapse; font-size: .91rem; }
  thead th {
    text-align: start; font-weight: 600; font-size: .78rem; color: var(--ink-2);
    padding: 8px; border-block-end: 1.5px solid var(--ink); white-space: nowrap;
  }
  tbody td { padding: 9px 8px; border-block-end: 1px solid var(--rule); vertical-align: top; }
  :is(td, th).num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .li-name { font-weight: 500; }
  .li-note { color: var(--ink-3); font-size: .81rem; margin-block-start: 2px; max-inline-size: 52ch; }
  .scroll-x { overflow-x: auto; }

  .totals { margin-inline-start: auto; inline-size: min(400px, 100%); margin-block-start: 18px; }
  .totals td { border: 0; padding: 5px 8px; font-size: .94rem; }
  .totals td:first-child { color: var(--ink-2); }
  .totals tr.grand td { border-block-start: 1.5px solid var(--ink); font-weight: 700; font-size: 1.12rem; padding-block-start: 9px; }
  .totals tr.due td { font-weight: 700; color: var(--accent); }

  .checks { font-size: .91rem; }
  .checks li { padding: 7px 0 7px 28px; border-block-end: 1px solid var(--rule); position: relative; }
  .checks li::before { position: absolute; inset-inline-start: 0; inset-block-start: 8px; font-weight: 700; font-family: var(--mono); }
  .checks li.ok::before { content: "OK"; font-size: .69rem; color: var(--ok); inset-block-start: 10px; }
  .checks li.warn::before { content: "!"; color: var(--warn); inset-inline-start: 6px; }
  .checks li.bad::before { content: "X"; font-size: .75rem; color: var(--bad); inset-inline-start: 4px; }
  .bt {
    font-family: var(--mono); font-size: .66rem; font-weight: 500; line-height: 1;
    color: var(--ink-3); margin-inline-start: 5px; cursor: help;
    background: none; border: 0; padding: 1px 3px; border-radius: 3px;
    min-block-size: 0; vertical-align: baseline;
  }
  .bt:hover { color: var(--accent); background: var(--accent-soft); }
  .steps { padding-inline-start: 20px; font-size: .94rem; max-inline-size: 70ch; list-style: revert; }
  .steps li { margin-block-end: 6px; color: var(--ink-2); }
  .terms { font-size: .91rem; color: var(--ink-2); margin-block-start: 6px; max-inline-size: 70ch; }
  .empty { font-size: .94rem; color: var(--ink-2); max-inline-size: 70ch; }
  .note { font-size: .84rem; color: var(--ink-3); margin-block-start: 12px; max-inline-size: 70ch; }
  .attn { margin-block-start: 6px; }

  .copy {
    font-size: .72rem; font-weight: 600; cursor: pointer; margin-inline-start: 8px;
    padding: 3px 8px; border: 1px solid var(--rule-strong); border-radius: 999px;
    background: var(--glass-deep); color: var(--ink-2); vertical-align: 1px; white-space: nowrap;
  }
  .copy:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .copy.done { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }

  .raw { margin-block-start: 24px; }
  .raw summary { cursor: pointer; font-size: .91rem; color: var(--accent); font-weight: 500; }
  .raw pre {
    background: var(--glass-deep); border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 14px; overflow: auto; max-block-size: 460px;
    font: .75rem/1.5 var(--mono); margin-block-start: 10px; white-space: pre;
  }

  /* --- Karten, containerabhängig --- */
  .cards {
    display: grid; gap: 14px; margin-block: 24px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
  .cards > * {
    background: var(--glass); border: 1px solid var(--edge);
    border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow);
  }
  .cards h3 { margin-block-end: 6px; font-size: 1.03rem; }
  .cards p { margin: 0; font-size: .94rem; color: var(--ink-2); line-height: 1.55; }
  .cards a { text-decoration: none; }
  .cards a:hover { text-decoration: underline; }

  .related {
    background: var(--glass-deep); border: 1px solid var(--edge);
    border-radius: var(--r); padding: 20px 22px; margin-block-start: 32px;
  }
  .related h2 { font-size: 1rem; margin-block-end: 10px; }
  .related ul { padding-inline-start: 20px; max-inline-size: none; list-style: revert; }
  .related li { margin-block-end: 5px; font-size: .97rem; }
  .related .linklist { columns: 2; column-gap: 28px; }

  /* --- FAQ als Ziehharmonika, immer nur eine offen --- */
  .faq details {
    border-block-end: 1px solid var(--rule); padding-block: 4px;
  }
  .faq summary {
    cursor: pointer; font-weight: 600; font-size: 1.05rem;
    padding-block: 12px; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; inline-size: 9px; block-size: 9px; flex: 0 0 auto;
    border-inline-end: 2px solid var(--ink-3); border-block-end: 2px solid var(--ink-3);
    rotate: 45deg; transition: rotate .18s;
  }
  .faq details[open] summary::after { rotate: -135deg; }
  .faq details > div { padding-block-end: 14px; max-inline-size: 70ch; color: var(--ink-2); line-height: 1.68; }

  /* --- Feldhilfe im Oberflächen-Dialog --- */
  dialog {
    border: 1px solid var(--edge); border-radius: var(--r); padding: 0;
    background: var(--glass-solid); color: var(--ink);
    max-inline-size: min(34rem, 92vw); box-shadow: var(--shadow);
  }
  dialog::backdrop { background: rgb(1 15 40 / .42); }
  .dlg { padding: 22px 24px 20px; }
  .dlg h2 { font-size: 1.19rem; margin-block-end: 8px; }
  .dlg p { font-size: .94rem; color: var(--ink-2); margin-block-end: 12px; }
  .dlg .btn-row { margin-block-start: 4px; }

  /* Ein- und Ausblenden in der obersten Ebene */
  dialog, [popover] {
    opacity: 0; scale: .97;
    transition: opacity .18s, scale .18s, display .18s allow-discrete, overlay .18s allow-discrete;
  }
  dialog:is(:popover-open, [open]), [popover]:popover-open { opacity: 1; scale: 1; }
  @starting-style {
    dialog[open], [popover]:popover-open { opacity: 0; scale: .97; }
  }
}

/* ===================== utilities ===================== */
@layer utilities {
  .visually-hidden {
    position: absolute; inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  [hidden] { display: none !important; }
}

/* ===================== Anpassungen ===================== */

/* Lange Textseiten erst rendern, wenn sie gebraucht werden */
@layer utilities {
  .prose .related, .prose .cards { content-visibility: auto; contain-intrinsic-size: auto 260px; }
}

@container (max-width: 620px) {
  .parties { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .parties { grid-template-columns: 1fr; gap: 20px; }
  .sheet-body { padding: 20px 14px 24px; }
  .drop { padding: 32px 16px; }
  .head { padding-block: 26px 30px; }
  .related .linklist { columns: 1; }
  .site-search { inline-size: 100%; margin-inline-start: 0; }
  .site-search input { inline-size: 100%; }
}

/* Positionen auf kleinen Schirmen als Karten */
@media (max-width: 640px) {
  table.lines, table.lines tbody, table.lines tr, table.lines td { display: block; inline-size: 100%; }
  table.lines thead { position: absolute; inset-inline-start: -9999px; }
  table.lines tr {
    border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 8px 10px; margin-block-end: 10px;
  }
  table.lines td {
    border: 0; padding-block: 3px;
    display: flex; justify-content: space-between; gap: 12px; text-align: end;
  }
  table.lines td::before { content: attr(data-label); color: var(--ink-3); font-size: .78rem; text-align: start; }
  table.lines td[data-label="Bezeichnung"] { display: block; text-align: start; }
  table.lines td[data-label="Bezeichnung"]::before { display: block; margin-block-end: 2px; }
  .scroll-x { overflow-x: visible; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* Bewegung sparsam */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* Erzwungene Farben: Glas weg, Kanten sichtbar */
@media (forced-colors: active) {
  .pane, .sheet, .drop, .cards > *, .related, .filebar, dialog, [popover], .site-head {
    background: Canvas; border: 1px solid CanvasText; backdrop-filter: none;
  }
  .btn { border: 1px solid ButtonText; }
  body::before { display: none; }
}

/* Drucken: kein Glas, kein Verlauf, nur die Rechnung */
@media print {
  body::before { display: none; }
  body { background: #fff; color: #000; }
  .site-head, .site-foot, .head, .prose, .drop, .paste-row, .paste-box,
  .samples, .filebar, .sheet-bar .btn-row, .raw, .site-search, .steps { display: none !important; }
  .sheet {
    border: 0; margin: 0; background: #fff; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sheet-bar { background: #fff; border-block-end: 1px solid #000; padding: 0 0 10px; border-radius: 0; }
  .sheet-body { padding: 0; }
  .tool { padding: 0; }
  a { color: #000; text-decoration: none; }
  @page { margin: 16mm; }
}

/* Kurzantwort ganz oben. Bewusst hervorgehoben, weil Suchmaschinen und
   KI-Antworten knappe, direkte Antworten bevorzugt aufgreifen. */
@layer components {
  .answer {
    background: color-mix(in oklab, var(--accent) 9%, var(--glass-solid));
    border: 1px solid var(--edge);
    border-inline-start: 4px solid var(--accent);
    border-radius: var(--r-sm);
    padding: 16px 20px;
    margin-block-end: 26px;
    max-inline-size: 74ch;
  }
  .answer p { margin: 0; font-size: 1.03rem; line-height: 1.6; }
  .answer strong { color: var(--accent); }
}

/* Begriffslisten. Semantisch ein dl, damit im Text keine Reihe fetter
   Marken mit Doppelpunkt entsteht. */
@layer components {
  .deflist { max-inline-size: 70ch; margin-block: 16px; }
  .deflist dt {
    font-weight: 600; font-family: var(--mono); font-size: .94rem;
    margin-block-start: 12px;
  }
  .deflist dd {
    margin: 2px 0 0; padding-inline-start: 14px;
    border-inline-start: 2px solid var(--rule); color: var(--ink-2);
  }
}