/* www/assets/css/horella-v10-preise.css — eigene Stylesheet-Datei für
   /preise/. Seit dem Wurzeltausch 25.08.2026 aktiv (vormals
   /v10/assets/css/preise.css während der Vorschau). Umbenannt, weil
   www/assets/css/preise.css bereits von einem anderen File belegt sein
   könnte — eigener Name zur Sicherheit. Siehe Zwischenstopp-Antwort
   25.08.2026 (Preise-Fund): Kopf/Fuss rendern mit CDs Regeln, identisch zu
   den anderen sieben Seiten. Der Seitenkoerper (main) behaelt sein
   abgenommenes Aussehen aus der bereits VORHANDENEN, schon auf
   body.page-preise eingegrenzten CSS aus www/assets/css/app.css (Rundenkommentar
   dort: "CD import V5-BUILD, 15.08.2026" — genau zu diesem Zweck damals schon
   eingegrenzt, hier unveraendert weiterverwendet). Nichts davon ist neu
   umgeschrieben oder neu gescoped — alte, bereits eingegrenzte Regeln
   werden 1:1 uebernommen, CDs Regeln bleiben unangetastet.
   Herkunft:
   1) @font-face — aus app.css Zeile 1-30 (selbst gehostet, wie site.css).
   2) CD-Block — kompletter <style>-Inhalt aus
      ui_kits/web/2026-08-25_Unterseite_CD_Rahmen.html, byte-identisch zu
      site.css' CD-Block B (Header/Footer/.btn/.btn-sm/.legal-* — Letzteres
      hier ungenutzt, aber unveraendert mitgefuehrt, siehe Regel "kein
      Kuerzen von CD-CSS").
   3) app.css-Tokens — Zeile 40-219 (Farben/Typo/Spacing/Radius/Schatten/
      Motion), unveraendert. Werden von Block 4 gebraucht (--color-*,
      --radius-*, --shadow-*, --text-sm ...).
   4) app.css .page-preise-Block — Zeile 1113-1386, unveraendert. Bereits vor
      dieser Runde auf body.page-preise main-Inhalte eingegrenzt; deckt jede
      auf der aktuellen Preise-Seite tatsaechlich verwendete Klasse ab
      (.hero, .cards, .card/.card-head/.price*, .rule, .checks, .footnote,
      .legal-note, .cta-zone, .btn.btn-lg, .micro, .faq/.faq-list/.faq-item,
      .dark) — geprueft gegen den Markup-Bestand vor dem Bau. */

/* ---- 1) @font-face, selbst gehostet (aus app.css, unveraendert) ---- */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-normal.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-italic-400.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 2) CD-Block — 2026-08-25_Unterseite_CD_Rahmen.html, <style> unveraendert ---- */
:root{
--ink:#1C2B28;--green:#17796B;--green-dark:#0F5A4F;--green-tint:#E4F0ED;
--apricot:#F2A65A;--apricot-tint:#FDEFDD;
--cream:#FBF7F0;--white:#fff;--muted:#6B7A77;--muted-cream:#5D6B67;
--border:#E6E1D6;--border-strong:#D3CCBC;
--font:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-full:999px;
--ring:0 0 0 3px rgba(23,121,107,.35);
--maxw:1152px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 64px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:var(--green);color:#fff;border-radius:var(--r-sm);padding:12px 26px;font-weight:600;font-size:16px;transition:background .15s ease}
.btn:hover{background:var(--green-dark);color:#fff}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px}

/* Header / Footer — CD-Baustein, identisch auf allen acht Seiten.
   Höhe verriegelt: 72px Inhaltszeile + 1px Trennlinie = 73px, bei jeder Breite. */
.site-header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:72px;min-height:72px;padding:0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);white-space:nowrap}
.nav-r{display:flex;align-items:center;gap:6px;font-size:15px}
.navlink{display:inline-flex;align-items:center;height:44px;padding:0 12px;color:var(--ink);font-weight:500;border-radius:var(--r-sm)}
.navlink:hover{color:var(--green-dark);background:var(--green-tint)}
.burger{display:none;width:44px;height:44px;flex:0 0 auto;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);cursor:pointer}
.burger:hover{background:var(--green-tint);border-color:#BFDBD4}
.hdr-menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:59;background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 14px 28px rgba(28,43,40,.12)}
.hdr-menu[data-open="true"]{display:block}
.hdr-menu-in{max-width:var(--maxw);margin:0 auto;padding:8px 20px 14px;display:grid;gap:2px}
.hdr-menu a{display:flex;align-items:center;min-height:48px;padding:0 8px;font-size:16.5px;font-weight:500;color:var(--ink);border-radius:var(--r-sm)}
.hdr-menu a:hover{background:var(--green-tint);color:var(--green-dark)}
.site-footer{background:var(--white);border-top:1px solid var(--border);padding:26px 0 30px;font-size:14.5px;color:var(--muted-cream)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-links{display:flex;gap:2px;flex-wrap:wrap}
.footer-links a{color:var(--muted-cream);display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-sm)}
.footer-links a:hover{color:var(--green-dark);background:var(--green-tint)}
.footer-legal{margin-top:6px;font-size:13.5px;color:var(--muted)}

/* Textseite — nur Rahmen, kein Inhalt. Der Rechtstext wird 1:1 hier eingesetzt.
   (Auf der Preise-Seite ungenutzt — kein .legal-Markup hier — aber
   unveraendert mitgefuehrt, siehe Kopfkommentar.) */
.legal{padding:72px 0 96px}
.legal-in{max-width:720px}
.legal h1{font-size:40px;line-height:1.1;letter-spacing:-.024em;font-weight:800}
.legal .stand{margin-top:12px;font-size:14.5px;color:var(--muted)}
.legal-body{margin-top:36px}
.legal-body h2{font-size:22px;line-height:1.25;letter-spacing:-.012em;font-weight:700;margin-top:38px}
.legal-body h3{font-size:17.5px;font-weight:700;margin-top:26px}
.legal-body p,.legal-body li{font-size:16.5px;line-height:1.7;color:var(--muted-cream);text-wrap:pretty}
.legal-body p{margin-top:14px}
.legal-body ul,.legal-body ol{margin-top:14px;padding-left:22px;display:grid;gap:8px}
.legal-body a{color:var(--green-dark);text-decoration:underline;text-underline-offset:2px}
.slot{border:1.5px dashed var(--border-strong);border-radius:var(--r-md);background:var(--white);padding:22px 24px;color:var(--muted)}
.slot b{display:block;color:var(--ink);font-size:15.5px}
.slot p{margin-top:8px;font-size:15px;color:var(--muted)}
.legal-back{margin-top:56px;padding-top:24px;border-top:1px solid var(--border)}

@media (max-width:900px){
.wrap{padding:0 20px}
.nav{height:72px;min-height:72px}
.navlink{display:none}
.burger{display:inline-flex}
.nav-cta{min-height:38px;height:38px;padding:0 14px;font-size:14.5px}
.legal{padding:48px 0 64px}
.legal h1{font-size:31px;letter-spacing:-.02em}
.legal-body h2{font-size:20px}
.footer-top{justify-content:center;text-align:center}
.site-footer{text-align:center}
}

/* ---- 3) app.css-Tokens, Zeile 40-219, unveraendert (exakte Quellzeilen) ---- */
:root {
  /* --- Base palette --- */
  --color-ink: #1c2b28; /* primary text */
  --color-green: #17796b; /* Horella primary */
  --color-green-dark: #0f5a4f; /* hover / press */
  --color-green-tint: #e4f0ed; /* soft green surface (selection, badges) */
  --color-apricot: #f2a65a; /* accent — warmth, highlights, illustration */
  --color-apricot-dark: #d98736; /* accent hover / on-light text-safe-ish */
  --color-apricot-tint: #fcebd6; /* soft accent surface */
  --color-cream: #fbf7f0; /* app background */
  --color-white: #ffffff; /* cards */
  --color-muted: #6b7a77; /* secondary text — 4.6:1 on white */
  --color-border: #e6e1d6; /* hairline borders / dividers */
  --color-border-strong: #d3ccbc; /* stronger divider, input outline */

  /* Status — base */
  --color-success: #2e9e6b;
  --color-success-dark: #1f7a50;
  --color-success-tint: #e1f2e9;
  --color-warning: #e0a11b; /* non-blocking labor-law warning */
  --color-warning-dark: #9a6b08; /* text-safe amber on light */
  --color-warning-tint: #fbefcf;
  --color-danger: #d2553f; /* blocking violation */
  --color-danger-dark: #a93b29;
  --color-danger-tint: #f7e0da;

  /* --- Semantic aliases --- */
  --text-strong: var(--color-ink);
  --text-body: var(--color-ink);
  --text-muted: var(--color-muted);
  --text-on-green: var(--color-white);
  --text-link: var(--color-green);
  --text-link-hover: var(--color-green-dark);

  --surface-app: var(--color-cream);
  --surface-card: var(--color-white);
  --surface-sunken: #f4eee3; /* slightly darker than cream */
  --surface-selected: var(--color-green-tint);

  --border-subtle: var(--color-border);
  --border-default: var(--color-border-strong);
  --border-focus: var(--color-green);

  --action-primary: var(--color-green);
  --action-primary-hover: var(--color-green-dark);
  --action-accent: var(--color-apricot);

  /* Status semantic — use with icon + text, never alone */
  --status-success-fg: var(--color-success-dark);
  --status-success-bg: var(--color-success-tint);
  --status-warning-fg: var(--color-warning-dark);
  --status-warning-bg: var(--color-warning-tint);
  --status-danger-fg: var(--color-danger-dark);
  --status-danger-bg: var(--color-danger-tint);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(23, 121, 107, 0.35);
}
/* ===========================================================================
   Horella — Typography tokens
   Base 17px, line-height 1.5. Scale: 28 / 22 / 18 / 17 / 15 / 13.
   Tabular numerals everywhere times & hours appear.
   =========================================================================== */
:root {
  --font-sans:
    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (px) */
  --text-2xl: 28px; /* page / screen titles */
  --text-xl: 22px; /* section headers */
  --text-lg: 18px; /* card titles, emphasised body */
  --text-base: 17px; /* body — deliberately large */
  --text-sm: 15px; /* secondary text, dense tables */
  --text-xs: 13px; /* labels, meta, captions */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.5;

  /* Weights — never below 400 */
  --weight-regular: 400;
  --weight-medium: 500; /* labels, buttons */
  --weight-semibold: 600; /* titles, emphasis */
  --weight-bold: 700;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.02em; /* small all-caps labels */

  /* Numeric feature: apply to any time/hour/money value */
  --numeric-tabular: "tnum" 1, "lnum" 1; /* @kind other */
}

/* Utility: tabular numerals for schedules, timesheets, balances */
.tabular-nums {
  font-feature-settings:
    "tnum" 1,
    "lnum" 1;
  font-variant-numeric: tabular-nums;
}
/* ===========================================================================
   Horella — Spacing tokens (4px base grid, generous by design)
   =========================================================================== */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Touch target minimum (iOS + accessible web) */
  --touch-min: 44px;

  /* Common container widths */
  --width-content: 720px; /* forms, wizards */
  --width-shell: 1280px; /* full planner */
}
/* ===========================================================================
   Horella — Radius tokens (soft, friendly — never sharp, never pill-everything)
   =========================================================================== */
:root {
  --radius-xs: 4px; /* chips, small badges */
  --radius-sm: 8px; /* inputs, buttons */
  --radius-md: 12px; /* cards, shift cards */
  --radius-lg: 16px; /* modals, side panels */
  --radius-xl: 24px; /* large illustration surfaces */
  --radius-full: 999px; /* avatars, toggles, pill tags */
}
/* ===========================================================================
   Horella — Elevation & shadow tokens
   Soft, warm-tinted shadows (never hard black). Low elevation everywhere;
   the UI is calm and flat-ish, lifting only interactive/floating surfaces.
   =========================================================================== */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(28, 43, 40, 0.06);
  --shadow-sm:
    0 1px 3px rgba(28, 43, 40, 0.08), 0 1px 2px rgba(28, 43, 40, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 43, 40, 0.1);
  --shadow-lg: 0 12px 28px rgba(28, 43, 40, 0.14);
  --shadow-drag: 0 16px 32px rgba(28, 43, 40, 0.22); /* shift card while dragging */

  /* z-layers */
  --z-base: 0; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-dropdown: 200; /* @kind other */
  --z-panel: 300; /* @kind other */ /* side panel */
  --z-modal: 400; /* @kind other */
  --z-toast: 500; /* @kind other */
}
/* ===========================================================================
   Horella — Motion tokens
   Calm and quick. Ease-out for enters, gentle standard for moves. No bounce.
   =========================================================================== */
:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --duration-slow: 260ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
  }
}

/* ---- 4) app.css .page-preise-Block, Zeile 1113-1386, unveraendert (exakte Quellzeilen) ---- */
.page-preise .hero {
  text-align: center;
  padding: 64px 24px 0;
}
.page-preise .hero h1 {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
  /* max-width/margin reset: the shared .hero h1 rule (820px / 0 auto 20px)
     would otherwise leak through on properties the CD file doesn't set —
     CD's own reset zeroes these, so 0/none is the CD-rendered value here too. */
  max-width: none;
  margin: 0;
}
.page-preise .hero .lede {
  margin-top: 14px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-size: 19.5px;
  text-wrap: pretty;
  /* max-width/margin-x reset: same leak as above, from the shared .hero .lede
     rule (620px / auto centering + 32px bottom margin). */
  max-width: none;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}
.page-preise .cta-zone .btn,
.page-preise .dark .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--color-green);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 26px;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.page-preise .cta-zone .btn:hover,
.page-preise .dark .btn:hover {
  background: var(--color-green-dark);
  color: #fff;
}
.page-preise .cta-zone .btn.btn-lg,
.page-preise .dark .btn.btn-lg {
  min-height: 56px;
  padding: 16px 34px;
  font-size: 17.5px;
}
.page-preise .cards {
  max-width: 920px;
  margin: 0 auto;
  padding: 52px 24px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
.page-preise .card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px 34px 34px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-preise .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--color-green);
}
.page-preise .card.paid {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.page-preise .card.paid::before {
  background: linear-gradient(90deg, var(--color-green), var(--color-apricot));
}
.page-preise .card-head {
  min-height: 132px;
}
.page-preise .price {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.page-preise .price-unit {
  margin-top: 8px;
  font-size: 16.5px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-weight: 500;
}
.page-preise .price-scope {
  margin-top: 4px;
  font-size: 16.5px;
  color: var(--color-muted);
}
.page-preise .rule {
  height: 1px;
  background: var(--color-border);
  margin: 0 0 22px;
}
.page-preise .checks {
  list-style: none;
  display: grid;
  gap: 14px;
  /* margin/max-width reset: the shared .checks rule (24px auto 0 / 420px)
     would otherwise leak through — CD's own reset zeroes these. */
  margin: 0;
  max-width: none;
}
.page-preise .checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.45;
  text-wrap: pretty;
  /* padding reset: the shared .checks li rule (8px 0) would otherwise leak
     through on top of the 14px grid gap above. */
  padding: 0;
}
.page-preise .checks li svg {
  flex: none;
  margin-top: 3px;
}
.page-preise .checks li:first-child {
  font-weight: 600;
}
.page-preise .footnote {
  text-align: center;
  font-size: 14.5px;
  color: var(--color-muted);
  padding: 20px 24px 0;
}
.page-preise .legal-note {
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.page-preise .cta-zone {
  text-align: center;
  padding: 34px 24px 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.page-preise .micro {
  font-size: 14.5px;
  color: var(--color-muted);
}
.page-preise .faq {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px 24px 96px;
}
.page-preise .faq h2 {
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.page-preise .faq-list {
  margin-top: 28px;
  display: grid;
  gap: 14px;
}
.page-preise .faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}
.page-preise .faq-item h3 {
  font-size: 17px;
  font-weight: 600;
}
.page-preise .faq-item p {
  margin-top: 7px;
  color: #5d6b67; /* --text-muted-on-cream, CD token — does not resolve here */
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}
.page-preise .faq-item p .tnum {
  font-feature-settings: "tnum" 1;
}
.page-preise .dark {
  background: #14332c; /* --surface-inverse, CD token — does not resolve here */
  color: #fff;
  text-align: center;
  padding: 80px 24px;
}
.page-preise .dark h2 {
  /* color reset: the shared h1,h2,h3,h4 rule sets color: var(--text-strong)
     (dark ink) directly on h2, which beats inherited color even though
     .dark itself sets color:#fff — CD's dark band needs the heading white. */
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.page-preise .dark p {
  margin-top: 10px;
  color: #c9d6d1; /* --text-muted-on-inverse, CD token — does not resolve here */
  font-size: 17px;
}
.page-preise .dark .btn {
  margin-top: 28px;
}
.page-preise .dark .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
}
@media (max-width: 820px) {
  .page-preise .hero {
    padding-top: 40px;
  }
  .page-preise .hero h1 {
    font-size: 36px;
  }
  .page-preise .hero .lede {
    font-size: 17px;
  }
  .page-preise .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 32px;
    max-width: 520px;
  }
  .page-preise .card {
    padding: 28px 22px 26px;
  }
  .page-preise .card-head {
    min-height: 0;
  }
  .page-preise .price {
    font-size: 42px;
  }
  .page-preise .rule {
    margin-top: 22px;
  }
  .page-preise .cta-zone .btn {
    width: 100%;
  }
  .page-preise .faq {
    padding: 64px 24px 72px;
  }
  .page-preise .faq h2 {
    font-size: 26px;
  }
  .page-preise .dark {
    padding: 60px 24px;
  }
  .page-preise .dark h2 {
    font-size: 27px;
  }
  .page-preise .dark .btn {
    width: 100%;
  }
}