/* Page styles for /preise/, the legal pages and 404 (moved out of the inline <style> blocks of src/pages/*).
   Loaded after the Tailwind build; these rules are unlayered and win over main.css. */

/* ===== src/pages/preise/01-plans.html ===== */
  #plans .pl-h1 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; letter-spacing: -0.015em; line-height: 1.06; font-size: 40px; color: var(--color-ink); text-wrap: balance; }
  @media (min-width: 1024px) { #plans .pl-h1 { font-size: 60px; line-height: 1.04; } }
  #plans .pl-sub { font-size: 17px; line-height: 26px; color: var(--color-ink-2); }
  @media (min-width: 1024px) { #plans .pl-sub { font-size: 19px; line-height: 29px; } }

  /* billing toggle: the app's segmented control, as a radio group */
  #plans .seg > button { height: 36px; padding-inline: 14px; display: inline-flex; align-items: center; gap: 8px; }
  @media (pointer: coarse), (max-width: 1023px) { #plans .seg > button { height: 40px; } }
  #plans .seg > button[aria-checked="true"] { background: #fff; color: var(--color-ink); box-shadow: 0 0 0 1px rgb(26 25 23 / 0.1), 0 1px 2px rgb(26 25 23 / 0.06); }
  #plans .pl-save { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--color-ink-3); }

  /* plan cards: three equal sheets on one shared grid (no staircase). From 1024 px every card is a subgrid over the
     same 8 rows (name, description, price, billing note, button, rule, intro, list), so prices, buttons and card
     bottoms sit on one line across all three. Team is marked by its shadow and the badge only. */
  #plans .pl-grid { display: grid; gap: 12px; }
  #plans .pl-card { position: relative; border-radius: var(--radius-blatt); background: #fffefb linear-gradient(180deg, #fffefb 0%, #fbf9f5 100%); box-shadow: 0 0 0 1px rgb(50 33 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.9); padding: 24px; }
  @media (min-width: 1024px) { #plans .pl-card { padding: 32px 32px 36px; } }
  #plans .pl-card.is-pop { box-shadow: var(--sh-blatt); z-index: 2; }
  @media (min-width: 1024px) {
    #plans .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); gap: 0 16px; align-items: stretch; }
    #plans .pl-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    #plans .pl-head, #plans .pl-body { display: contents; }
    #plans .pl-list { align-self: start; }
  }
  /* below 1024 px the cards stack, Team first */
  @media (max-width: 1023px) { #plans .pl-card.is-pop { order: -1; } }
  /* 640 to 1023 px: one card per row, split in two columns (offer left, contents right) */
  @media (min-width: 640px) and (max-width: 1023px) {
    #plans .pl-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; padding: 28px 32px 32px; }
    #plans .pl-card .pl-rule { display: none; }
    #plans .pl-body { padding-top: 2px; }
  }
  #plans .pl-card .pl-rule { background: rgb(50 33 0 / 0.1); }
  #plans .pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 24px; }
  #plans .pl-name { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--color-ink); }
  #plans .pl-badge { display: inline-flex; align-items: center; height: 22px; padding-inline: 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: #fff; background: var(--color-ink); }
  #plans .pl-desc { font-size: 14px; line-height: 20px; color: var(--color-ink-2); }
  #plans .pl-price { display: flex; align-items: baseline; gap: 10px; }
  #plans .pl-fig { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; font-variant-numeric: tabular-nums lining-nums; font-size: 52px; line-height: 56px; letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap; }
  /* "Auf Anfrage" is set smaller; the top padding puts its baseline on the baseline of the 52 px figures */
  #plans .pl-fig-text { font-size: 36px; line-height: 56px; letter-spacing: -0.012em; padding-top: var(--pl-fig-shift, 4px); }
  #plans .pl-unit { font-size: 14px; line-height: 20px; color: var(--color-ink-2); }
  #plans .pl-bill { display: grid; font-size: 13px; line-height: 18px; color: var(--color-ink-3); min-height: 18px; }
  /* both billing notes share one cell, the hidden one keeps its height: the toggle never moves the buttons */
  #plans .pl-bill > span { grid-area: 1 / 1; }
  #plans .pl-bill > .pl-off { visibility: hidden; }
  #plans .pl-rule { height: 1px; background: var(--color-line); margin-block: 24px 20px; }
  #plans .pl-intro { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--color-ink); }
  #plans .pl-list { display: grid; gap: 10px; margin-top: 12px; }
  #plans .pl-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--color-ink); }
  #plans .pl-list svg { flex: none; margin-top: 2px; color: var(--color-ink); }
  #plans .pl-soon-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
  #plans .pl-soon { flex: none; height: 20px; font-size: 11px; line-height: 20px; padding-inline: 6px; }
  /* one note line under the cards, on the left edge like everything below */
  #plans .pl-net { font-size: 13px; line-height: 18px; color: var(--color-ink-3); }

/* ===== src/pages/preise/02-compare.html ===== */
  /* the comparison as an annex to a contract: a sheet with a running head, ruled like a document */
  #compare .cm-shell { border-radius: var(--radius-blatt); overflow: clip; padding: 18px 12px 12px; }
  @media (min-width: 640px) { #compare .cm-shell { padding: 28px 40px 32px; } }
  #compare .cm-shell .blatt-kopf { margin-bottom: 8px; }
  #compare thead th { position: sticky; top: 64px; z-index: 2; }
  @media (min-width: 1024px) { #compare thead th { top: 80px; } }
  /* desktop, head stuck under the floating bar: a strip of sheet above it, so no rows run past beside the bar
     (.is-stuck from the script in 02-compare.html; the sheet's clip keeps the strip inside the sheet) */
  @media (min-width: 1024px) { #compare table.is-stuck thead th:first-child::before { content: ""; position: absolute; left: -48px; top: -80px; width: 200vw; height: 80px; background: #fdfcf8; pointer-events: none; } }
  #compare table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 20px; }
  #compare col.cm-plan { width: 70px; }
  @media (min-width: 640px) { #compare col.cm-plan { width: 22%; } }
  @media (min-width: 1024px) { #compare col.cm-plan { width: 160px; } }
  @media (min-width: 1280px) { #compare col.cm-plan { width: 200px; } }
  @media (max-width: 639px) { #compare col.cm-plan { width: 66px; } #compare tbody td .num { font-size: 11px; letter-spacing: -0.01em; } #compare .cm-shell { padding: 16px 8px 8px; } }
  /* collapsed by default: one button opens the table */
  #compare .cm-sum { list-style: none; cursor: pointer; gap: 8px; }
  #compare .cm-sum::-webkit-details-marker { display: none; }
  #compare .cm-sum-close { display: none; }
  #compare .cm-details[open] .cm-sum-open { display: none; }
  #compare .cm-details[open] .cm-sum-close { display: inline; }
  #compare .cm-chev { transition: transform 180ms var(--ease); }
  #compare .cm-details[open] .cm-chev { transform: rotate(180deg); }
  #compare thead th { height: 48px; padding: 0 12px; font-family: var(--font-display); font-size: 17px; line-height: 20px; font-weight: 500; color: var(--color-ink); text-align: center; background: #fdfcf8; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-ink-2); }
  #compare thead th { vertical-align: bottom; padding-bottom: 12px; }
  #compare thead th:first-child { text-align: left; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--color-ink-3); padding-left: 0; }
  #compare tbody th, #compare tbody td { height: 44px; padding: 10px 12px; border-bottom: 1px solid rgb(50 33 0 / 0.09); vertical-align: middle; }
  #compare tbody tr:last-child th, #compare tbody tr:last-child td { border-bottom: 0; }
  #compare tbody th { text-align: left; font-weight: 400; color: var(--color-ink); padding-left: 0; }
  #compare tbody td { text-align: center; color: var(--color-ink); }
  #compare tbody td svg { display: block; margin-inline: auto; }
  #compare tbody td .num { font-size: 13px; color: var(--color-ink-2); }
  #compare tbody td .status { font-size: 12px; height: 20px; padding-inline: 6px; }
  #compare .cm-group th { height: 40px; padding: 22px 0 6px; font-family: var(--font-display); font-variation-settings: "opsz" 24; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--color-ink); text-align: left; border-bottom: 1px solid rgb(50 33 0 / 0.16); }
  #compare .cm-group th .cm-par { color: var(--color-ink-3); margin-right: 6px; font-variant-numeric: lining-nums; }
  #compare .cm-no { display: inline-block; width: 10px; height: 1.5px; border-radius: 1px; background: var(--color-ink-4); vertical-align: middle; }
  #compare .cm-soon-m { display: none; font-weight: 500; }
  #compare .cm-note { display: block; font-size: 12px; line-height: 16px; color: var(--color-ink-3); margin-top: 2px; }
  @media (max-width: 639px) {
    #compare table { font-size: 13px; line-height: 18px; }
    #compare thead th { padding: 0 4px 12px; font-size: 12px; }
      #compare tbody th { padding-left: 0; padding-right: 8px; }
    #compare tbody td { padding-inline: 2px; }
    #compare tbody td .num { font-size: 12px; }
    /* phones: the pill moves under the feature name, the plan cell keeps the dot (text stays for screen readers) */
    #compare .cm-soon { padding-inline: 7px; gap: 0; }
    /* the label moves under the feature name (.cm-soon-m, read there); the cell keeps only the dot */
    #compare .cm-soon-t { display: none; }
    #compare .cm-soon-m { display: inline-flex; margin-top: 6px; }
  }

/* ===== src/pages/preise/03-faq.html ===== */
  #pricing-faq .fq-list { border-top: 1px solid var(--color-line-strong); }
  #pricing-faq .fq-item { border-bottom: 1px solid var(--color-line); }
  #pricing-faq .fq-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; text-align: left; font-size: 17px; line-height: 26px; font-weight: 500; color: var(--color-ink); border-radius: 6px; transition: color 180ms var(--ease); }
  #pricing-faq .fq-btn > span { text-wrap: balance; }
  #pricing-faq .fq-btn:hover .fq-chev { color: var(--color-ink); }
  #pricing-faq .fq-chev { flex: none; color: var(--color-ink-3); transition: transform 180ms var(--ease); }
  #pricing-faq .fq-btn[aria-expanded="true"] .fq-chev { transform: rotate(180deg); color: var(--color-ink); }
  #pricing-faq .fq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 240ms var(--ease); }
  #pricing-faq.js .fq-panel { grid-template-rows: 0fr; }
  #pricing-faq.js .fq-panel.is-open { grid-template-rows: 1fr; }
  #pricing-faq .fq-in { overflow: hidden; }
  #pricing-faq .fq-in p { padding: 0 48px 22px 0; font-size: 15px; line-height: 24px; color: var(--color-ink-2); max-width: 680px; }

/* ===== src/pages/preise/04-cta.html ===== */
  #pricing-cta .pc-h2 { color: #fff; }
  #pricing-cta .pc-sub { color: rgb(247 246 244 / 0.74); font-size: 17px; line-height: 26px; }
  #pricing-cta .pc-note { color: rgb(247 246 244 / 0.7); font-size: 13px; line-height: 18px; }

/* ===== legal pages (Impressum, Datenschutz, AGB) ===== */
  /* reading layout for the legal pages (Impressum, Datenschutz, AGB) */
  .legal .lg-col { max-width: 72ch; margin-inline: auto; }
  .legal .lg-h1 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; letter-spacing: -0.015em; line-height: 1.06; font-size: 38px; color: var(--color-ink); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  @media (min-width: 1024px) { .legal .lg-h1 { font-size: 52px; line-height: 1.04; } }
  .legal .lg-stand { font-size: 14px; line-height: 20px; color: var(--color-ink-3); }
  .legal .lg-body { font-size: 16px; line-height: 26px; color: var(--color-ink-2); }
  .legal .lg-body h2, .legal .lg-body h3 { text-wrap: balance; }
  .legal .lg-body h2 { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; color: var(--color-ink); margin-top: 44px; scroll-margin-top: 88px; }
  .legal .lg-body h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-ink); margin-top: 28px; }
  .legal .lg-body p, .legal .lg-body ul, .legal .lg-body ol, .legal .lg-body dl, .legal .lg-body .lg-table { margin-top: 12px; }
  .legal .lg-body ul { list-style: disc; padding-left: 1.25em; }
  .legal .lg-body ol { list-style: decimal; padding-left: 1.4em; }
  .legal .lg-body li + li { margin-top: 6px; }
  .legal .lg-body li::marker { color: var(--color-ink-3); }
  .legal .lg-body strong { font-weight: 600; color: var(--color-ink); }
  .legal .lg-body a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-line-strong); text-underline-offset: 3px; }
  .legal .lg-body a:hover { text-decoration-color: currentColor; }
  .legal .lg-addr { color: var(--color-ink); }
  .legal .lg-dl { display: grid; grid-template-columns: 1fr; gap: 2px 24px; }
  .legal .lg-dl dt { font-size: 14px; line-height: 22px; color: var(--color-ink-3); margin-top: 10px; }
  .legal .lg-dl dd { color: var(--color-ink); }
  @media (min-width: 640px) { .legal .lg-dl { grid-template-columns: 200px 1fr; } .legal .lg-dl dt, .legal .lg-dl dd { margin-top: 10px; } .legal .lg-dl dt { line-height: 26px; } }
  .legal .lg-toc { font-size: 14px; line-height: 22px; }
  .legal .lg-toc ol { margin-top: 8px; columns: 1; }
  @media (min-width: 640px) { .legal .lg-toc ol { columns: 2; column-gap: 32px; } }
  .legal .lg-toc li { break-inside: avoid; }
  .legal .lg-toc a { display: inline-block; min-height: 24px; padding-block: 1px; color: var(--color-ink-2); text-decoration: none; }
  .legal .lg-toc a:hover { color: var(--color-ink); text-decoration: underline; }
  .legal .lg-table { overflow-x: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--color-line); background: var(--color-panel); }
  .legal .lg-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
  .legal .lg-table th { text-align: left; font-weight: 600; color: var(--color-ink); background: var(--color-sunk); padding: 10px 14px; }
  .legal .lg-table td { vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--color-line); color: var(--color-ink-2); }
  .legal .lg-table td:first-child { color: var(--color-ink); font-weight: 500; }
  @media (max-width: 639px) { .legal .lg-stack thead { display: none; } .legal .lg-stack tr { display: block; padding: 10px 0; } .legal .lg-stack tr + tr { border-top: 1px solid var(--color-line); } .legal .lg-stack td { display: block; border: 0; padding: 2px 14px; } }

  /* Document layout (grafik team A): the legal text sits on a contract sheet (.blatt), set in Newsreader like the
     contract pages on the home page; section numbers hang in a margin column left of the text (inline on phones).
     Wording is unchanged: numbers are only wrapped in .lg-nr. Tables, key-value labels and the contents list stay in
     the UI face. */
  .legal .lg-col { max-width: 880px; }
  .legal .lg-sheet { padding: 28px 20px 44px; }
  @media (min-width: 768px) { .legal .lg-sheet { padding: 56px 72px 72px 136px; } }
  .legal .lg-sheet > .label { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgb(50 33 0 / .1); }
  .legal .lg-body { font-family: var(--font-display); font-variation-settings: "opsz" 14; font-size: 16.5px; line-height: 27px; }
  .legal .lg-body h2 { position: relative; font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 24; font-size: 21px; line-height: 28px; letter-spacing: -0.005em; margin-top: 40px; }
  .legal .lg-body h3 { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 24; font-size: 17px; line-height: 26px; margin-top: 26px; }
  .legal .lg-nr { color: var(--color-ink-3); font-weight: 400; font-variant-numeric: tabular-nums lining-nums; margin-right: .35em; }
  @media (min-width: 768px) { .legal .lg-nr { position: absolute; right: calc(100% + 24px); top: 0; margin: 0; white-space: nowrap; } }
  .legal .lg-body strong { font-weight: 600; }
  .legal .lg-dl dt, .legal .lg-table, .legal .lg-toc { font-family: var(--font-sans); }
  .legal .lg-table { border-radius: 4px; }

  /* round Paul: sheet 768 px (60 to 80 characters per line), one size for p and li (overrides main.css
     ":where(.blatt) p" 15 px), AGB title breaks only at the soft hyphen, dt on the dd line height */
  .legal .lg-col { max-width: 768px; }
  .legal .lg-body p { font-size: inherit; line-height: inherit; }
  .legal .lg-h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
  .legal .lg-dl dt { line-height: 27px; }

/* ===== all pages: anchor targets land below the fixed header with 16 px air. Phones: 64 px bar. Desktop: the floating
   bar (16 px from the top, 64 px high) ends at 80 px once the page has scrolled, which every anchor jump does. ===== */
main [id] { scroll-margin-top: 80px; }
.legal .lg-body h2[id] { scroll-margin-top: 88px; }
@media (min-width: 1024px) { main [id] { scroll-margin-top: 96px; } .legal .lg-body h2[id] { scroll-margin-top: 104px; } }

/* iOS Safari zooms into inputs under 16 px; keep form fields at 16 px on touch widths. */
@media (max-width: 767px) { .ct-input, input[type=email], input[type=text], select, textarea { font-size: 16px; } }
/* 320 to 339: the long legal titles keep inside the column ("Geschäftsbedingungen", "§ 12 Schlussbestimmungen" on one line) */
@media (max-width: 339px) { .legal .lg-h1 { font-size: 32px; } .legal .lg-body h2 { font-size: 19px; } }