/* cm.netware, Umsetzung v02 "Die Mail wird zum Auftrag"
   Gestaltungswelt: Posteingang und Auftragsformular. Grün führt, viel Weiß, klare Formularlinien. */

/* Schriften als WOFF2, lokal gehostet (Quelle: Google Fonts, Teilmengen latin und latin-ext, geladen am 19.10.2026; Lizenz OFL).
   Die TTF-Dateien in _assets/fonts bleiben als Reserve, werden aber nicht mehr eingebunden. */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/mulish-400-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/mulish-400-normal-latin.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: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../_assets/fonts/woff2/mulish-700-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../_assets/fonts/woff2/mulish-700-normal-latin.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: "Mulish"; font-style: normal; font-weight: 800; font-display: swap; src: url("../_assets/fonts/woff2/mulish-800-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 800; font-display: swap; src: url("../_assets/fonts/woff2/mulish-800-normal-latin.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: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/lora-400-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/lora-400-normal-latin.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: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/lora-400-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("../_assets/fonts/woff2/lora-400-italic-latin.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: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("../_assets/fonts/woff2/lora-500-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 500; font-display: swap; src: url("../_assets/fonts/woff2/lora-500-italic-latin.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; }

:root {
  --green: #9FC518;
  --green-ink: #4A6300;
  --green-deep: #1E2B08;
  --green-tint: #F3F8E3;
  --green-line: #CFE08F;
  --green-soft: #C9D89A;
  --petrol: #23B3A7;
  --petrol-ink: #157A72;
  --petrol-tint: #E4F5F3;
  --ink: #16201A;
  --text: #2B362B;
  --muted: #5A6656;
  --line: #D9DFD2;
  --line-strong: #AEB9A2;
  --paper: #FFFFFF;
  --surface: #F6F8F1;
  --warn: #9A4A0A;
  --warn-tint: #FBEEDF;
  --error: #B3261E;
  --error-tint: #FBE9E7;

  /* Abgeleitete Töne (Polish-Runde 30.09.2026): vorher Literale im Stylesheet */
  --green-hover: #B1D62E;      /* Hauptknopf Hover, DESIGN.md button-primary-hover */
  --on-dark: #EAF0DA;          /* Fließtext auf Grün-Tiefe */
  --on-dark-muted: #C9D89A;    /* Sekundärtext auf Grün-Tiefe (= Grün-Weich) */
  --footer-text: #D5DDCF;      /* Links in der Fußzeile auf Tinte, 12:1 */
  --footer-muted: #B4BFAD;     /* Nebentext in der Fußzeile auf Tinte, 8,8:1 */
  --warn-line: #F0D3B4;        /* Rahmen Chip "Konfidenz mittel", Zitat-Markierung mittel */
  --error-line: #F0C2BD;       /* Rahmen der Fehlermeldung */
  --line-input: #75816F;       /* Rahmen von Eingabefeldern, 3:1 auf Papier (WCAG 1.4.11) */

  --font-ui: "Mulish", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mail: "Lora", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.35rem, 1.4rem + 3.4vw, 4.4rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;

  --radius: 6px;
  --shadow: 0 1px 2px rgba(22, 32, 26, 0.06), 0 8px 24px rgba(22, 32, 26, 0.08);
  --shadow-lift: 0 2px 4px rgba(22, 32, 26, 0.08), 0 18px 40px rgba(22, 32, 26, 0.16);
  --header-h: 72px;
  --jumpnav-h: 0px;            /* Höhe der sticky Sprungnavigation je Breakpoint (unter 720 px nicht sticky) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 720px) { :root { --jumpnav-h: 170px; } }
@media (min-width: 900px) { :root { --jumpnav-h: 150px; } }
@media (min-width: 1000px) { :root { --jumpnav-h: 106px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--green) var(--surface);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  caret-color: var(--green-ink);
  overflow-x: hidden;
}

::selection { background: var(--green); color: var(--ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--green); border: 3px solid var(--surface); border-radius: 8px; }

img { max-width: 100%; height: auto; display: block; }
svg { display: inline-block; vertical-align: middle; }

h1, h2, h3, h4 { font-family: var(--font-ui); color: var(--ink); line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
h4 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 0.35em; }
/* Keine einzelnen Woerter in der letzten Zeile (Hurenkinder): der Browser verteilt die Umbrueche der letzten Zeilen gleichmaessiger */
p, li, dd, dt, figcaption, blockquote, summary, .lede { text-wrap: pretty; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--ink); }
small, .small { font-size: var(--fs-small); }
.muted { color: var(--muted); }

a { color: var(--petrol-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color 0.15s var(--ease); }
a:hover { color: var(--green-ink); }

:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; border-radius: 3px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--green); }

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin: 0 0 0.3em; }

.prose { max-width: 66ch; }
.lede { font-size: 1.2rem; line-height: 1.5; color: var(--text); max-width: 60ch; }

/* Layout */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { .wrap { padding-left: 32px; padding-right: 32px; } }

/* Abstandsmodell: jeder Abschnitt traegt oben und unten denselben Abstand (--section-gap).
   Folgen zwei weisse Abschnitte aufeinander, teilen sie sich den Abstand (der zweite beginnt mit dem halben Mass),
   damit kein doppelter Leerraum entsteht. Vor und nach getoenten oder dunklen Abschnitten bleibt der volle Abstand,
   weil die Farbkante die Trennung traegt und die Ueberschrift innerhalb der Flaeche Luft braucht. */
:root { --section-gap: clamp(56px, 7vw, 96px); }
.section { padding: var(--section-gap) 0; }
.section:not(.section--tint):not(.section--dark) + .section:not(.section--tint):not(.section--dark) { padding-top: calc(var(--section-gap) / 2); }
.section--tint { background: var(--surface); }
.section--dark { background: var(--green-deep); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .muted { color: var(--on-dark-muted); }
.section--dark strong { color: var(--paper); }
.section--dark a { color: var(--paper); }
.section--dark a:hover { color: var(--green); }

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { margin-bottom: 0.4em; }

/* Einspaltige Grids dürfen nicht auf max-content wachsen (Handy: kein horizontaler Überlauf) */
.grid-2, .hero-top, .stage, .fit, .figures, .reasons, .steps, .compare, .fgroups, .topfeatures, .jobs, .footer-grid, .footer-nav, .form-row, .areas, .rows li, .chain li, .areas li, .kv, .form, .fpage-head, .fkind-head, .related, .roles { grid-template-columns: minmax(0, 1fr); }
.grid-2 > *, .hero-top > *, .stage > *, .form-row > *, .compare > * { min-width: 0; }

.grid-2 { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .grid-2--narrow-first { grid-template-columns: 5fr 7fr; } }

/* Skip-Link */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--green-deep); color: var(--paper); font-weight: 700; border-radius: var(--radius); text-decoration: none; transition: top 0.15s; }
.skip-link:focus { top: 12px; }
.skip-link:hover, .skip-link:focus { color: var(--paper); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); position: relative; }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.01em; }
/* Logo: Original-SVG der Website (Bildmarke plus gezeichnete Wortmarke, viewBox 325.7 x 39); Wortmarke erbt die Textfarbe */
.logo svg { width: 176px; height: auto; display: block; }
.logo .logo-wort { fill: currentColor; }
.site-footer .logo svg { width: 160px; }
@media (max-width: 420px) { .logo svg { width: 150px; } }
.logo:hover { color: var(--ink); }

.nav-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; }
/* Kompakter Demo-Knopf neben dem Burger (nur unter 900 px) */
.nav-demo { margin-left: auto; flex: none; min-height: 44px; padding: 10px 14px; }
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded="true"] .ic-burger { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: block; }

.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-nav li { margin: 0; }
.site-nav a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; font-weight: 700; border-radius: var(--radius); }
.site-nav a:hover { background: var(--green-tint); color: var(--green-ink); }
.site-nav li:not(.nav-cta) a[aria-current="page"] { color: var(--green-ink); box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
.site-nav .nav-cta { margin-top: 8px; }
.site-nav .nav-cta a { display: inline-flex; }
.site-header.is-open .site-nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px 16px 20px; box-shadow: var(--shadow); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-header .nav-demo { display: none; }
  .site-nav { display: block !important; position: static !important; }
  .site-nav ul { flex-direction: row; align-items: center; gap: 4px; }
  .site-nav li:not(.nav-cta) a[aria-current="page"] { border-radius: 0; box-shadow: inset 0 -2px 0 var(--green); }  /* gerader Strich, keine Rundung (JR 19.10.2026) */
  .site-nav .nav-cta { margin-top: 0; margin-left: 12px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn-primary:hover { background: var(--green-hover); color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(159, 197, 24, 0.35); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-secondary { background: var(--paper); color: var(--green-ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--green-ink); color: var(--green-ink); background: var(--green-tint); }
.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
.btn-ghost:hover { color: var(--green-ink); background: var(--green-tint); }
.section--dark .btn-secondary { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.4); }
.section--dark .btn-secondary:hover { border-color: var(--green); color: var(--green); background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* CTA-Streifen (nach größeren Blöcken) */
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; margin-top: clamp(32px, 5vw, 56px); border: 1px solid var(--green-line); background: var(--green-tint); border-radius: var(--radius); }
.cta-strip p { margin: 0; max-width: 56ch; }
.cta-strip strong { display: block; }
.section--dark .cta-strip { background: rgba(255,255,255,0.06); border-color: rgba(159,197,24,0.4); }

/* Hero */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-top { display: grid; gap: 24px 48px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
@media (min-width: 900px) { .hero-top { grid-template-columns: 7fr 5fr; } }
.hero h1 { max-width: 13ch; }
.hero .lede { margin-bottom: 20px; }
.hero-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: var(--fs-small); }
.hero-facts li { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.hero-facts svg { width: 16px; height: 16px; color: var(--green-ink); flex: none; }

/* Bühne: Posteingang + Auftragsmaske (Signatur-Interaktion) */
.stage { position: relative; display: grid; gap: 20px; }
@media (min-width: 900px) { .stage { grid-template-columns: 5fr 7fr; gap: 28px; align-items: start; } }

.pane { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.pane-head strong { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; }
.chip-new { background: var(--green); color: var(--ink); }
.chip-example { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.chip-ok { background: var(--green-tint); color: var(--green-ink); border: 1px solid var(--green-line); }
.chip-mid { background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-line); }

/* Mail */
.mail { font-family: var(--font-mail); font-size: 0.98rem; line-height: 1.55; transition: transform 0.7s var(--ease), box-shadow 0.4s var(--ease), opacity 0.3s; }
.mail.is-lifted { box-shadow: var(--shadow-lift); z-index: 5; will-change: transform; }
.mail.is-snap { transition: none; }
.mail-meta { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.mail-meta dt { font-weight: 700; color: var(--muted); }
.mail-meta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mail-body { padding: 14px 16px 16px; color: var(--text); }
.mail-body p { margin-bottom: 0.8em; }
.mail-attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.mail-attach svg { width: 16px; height: 16px; }
mark.q { background: transparent; color: inherit; border-radius: 2px; padding: 0 1px; transition: background-color 0.35s var(--ease); }
mark.q.is-on { background: var(--green-line); color: var(--ink); }
mark.q.is-mid.is-on { background: var(--warn-line); }

/* Auftragsmaske (stilisiert) */
.form-pane { position: relative; }
.dropzone { margin: 14px 16px 0; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: var(--radius); display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-small); min-height: 58px; transition: border-color 0.3s, background-color 0.3s; }
.dropzone svg { width: 22px; height: 22px; flex: none; color: var(--green-ink); }
.dropzone .dz-idle, .dropzone .dz-file { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.dropzone .dz-file { display: none; }
.dz-file strong { overflow-wrap: anywhere; }
.dropzone.is-target { border-color: var(--green-ink); background: var(--green-tint); }
.dropzone.is-filled { border-style: solid; border-color: var(--green-line); background: var(--green-tint); color: var(--ink); }
.dropzone.is-filled .dz-idle { display: none; }
.dropzone.is-filled .dz-file { display: inline-flex; }
.dz-progress { position: relative; height: 3px; margin: 8px 16px 0; background: var(--line); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity 0.2s; }
.dz-progress span { position: absolute; inset: 0; background: var(--green); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s linear; }
.dz-progress.is-on { opacity: 1; }
.dz-progress.is-on span { transform: scaleX(1); }

.fields { list-style: none; margin: 0; padding: 8px 16px 6px; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 560px) { .field { grid-template-columns: 128px minmax(0, 1fr); } }
.field:last-child { border-bottom: 0; }
.field-label { font-size: var(--fs-small); font-weight: 700; color: var(--muted); padding-top: 3px; }
.field-value { min-height: 1.6em; color: var(--ink); font-weight: 700; position: relative; }
.field-value .val { opacity: 0; transform: translateY(4px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); display: inline; }
.field-value .placeholder { color: var(--muted); font-weight: 400; }
.field-note { grid-column: 1 / -1; display: none; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
@media (min-width: 560px) { .field-note { grid-column: 2; } }
.field-note .cite { font-family: var(--font-mail); font-style: italic; color: var(--text); }
.field.is-filled .field-value .val { opacity: 1; transform: none; }
.field.is-filled .field-value .placeholder { display: none; }
.field.is-filled .field-note { display: flex; }
.field.is-mid .field-value { color: var(--warn); }

.form-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--line); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); }
.form-foot .btn { opacity: 0.45; pointer-events: none; transition: opacity 0.4s; }
.form-foot.is-ready .btn { opacity: 1; pointer-events: auto; }
.form-foot .hint { font-size: var(--fs-small); color: var(--muted); max-width: 34ch; }
.stage-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; font-size: var(--fs-small); color: var(--muted); }
.stage-note button { font-size: var(--fs-small); }

/* Screenshot-Figuren */
.shot { margin: 0; }
.shot img { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.shot figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; max-width: 70ch; }

/* Szene / Text-Blöcke */
/* Kundenstimmen: Stimmen von aussen, deshalb Lora (Two-Voices-Regel); Register-Zeile mit Linie oben, kein Kasten */
.voices { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .voices { grid-template-columns: repeat(3, 1fr); } }
.voices li { margin: 0; padding-top: 16px; border-top: 2px solid var(--ink); display: grid; gap: 14px; }
.voices blockquote { margin: 0; font-family: var(--font-mail); font-size: 1.05rem; line-height: 1.55; color: var(--text); }
.voices blockquote p { margin: 0; }
.voices blockquote p::before { content: "\201E"; }
.voices blockquote p::after { content: "\201C"; }
.voices figcaption { font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); }
.voices figcaption strong { display: block; color: var(--ink); font-weight: 700; }
.voices figure { margin: 0; display: grid; gap: 14px; }
.voices .topic { font-size: var(--fs-small); font-weight: 700; color: var(--green-ink); }

.scene { border-top: 2px solid var(--ink); padding-top: 20px; }
.scene p:first-of-type { font-size: 1.2rem; line-height: 1.5; }
.callout { padding: 20px 22px; border: 1px solid var(--green-line); background: var(--green-tint); border-radius: var(--radius); }
.callout h3 { margin-bottom: 0.3em; }

/* Ergebnisse als Formularzeilen */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.rows li { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); margin: 0; }
@media (min-width: 720px) { .rows li { grid-template-columns: minmax(180px, 1fr) 2fr; } }
.rows .k { font-weight: 800; color: var(--ink); }
.rows .v { color: var(--text); }

/* Mechanismus: Ablauf-Kette */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chain li { position: relative; display: grid; gap: 4px 20px; padding: 18px 0 18px 28px; margin: 0; border-left: 1px solid var(--line-strong); }
.chain li::before { content: ""; position: absolute; left: -6px; top: 26px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--green-ink); }
.chain li.is-ai::before { background: var(--green); border-color: var(--green); }
.chain h3 { margin: 0; }
.chain p { margin: 0; max-width: 62ch; }

/* Funktionsbereiche als Formular-Register */
.areas { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-strong); }
@media (min-width: 720px) { .areas { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.areas li { margin: 0; padding: 6px 0 8px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 16px); }
.areas a { font-weight: 800; color: var(--ink); text-decoration: none; padding: 9px 0; display: inline-flex; align-items: center; gap: 8px; }
.areas a svg { width: 16px; height: 16px; color: var(--green-ink); transition: transform 0.15s var(--ease); }
.areas a:hover { color: var(--green-ink); }
.areas a:hover svg { transform: translateX(3px); }
.areas > li > span:not(.chip) { color: var(--muted); font-size: var(--fs-small); }

/* Passt es? */
.fit { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px 32px; }
@media (min-width: 720px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit li { margin: 0; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.fit h3 { margin-bottom: 0.25em; }
.fit p { color: var(--text); margin: 0; }
.placeholder-box { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px 20px; color: var(--muted); font-family: var(--font-mail); font-style: italic; }

/* Belege / Kennzahlen */
.figures { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 32px; }
@media (min-width: 560px) { .figures { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures li { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.25); }
.figures .num { display: block; font-size: var(--fs-h2); font-weight: 800; color: var(--paper); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.figures .lbl { color: var(--on-dark-muted); font-size: var(--fs-small); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.proof-list li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.proof-list svg { width: 18px; height: 18px; flex: none; color: var(--green); margin-top: 4px; }

/* Warum jetzt */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.reasons li { margin: 0; padding-top: 16px; border-top: 2px solid var(--green); }
.reasons h3 { margin-bottom: 0.3em; }
.reasons p { margin: 0; }

/* Ablauf-Schritte (Demo) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: schritt; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.steps li { margin: 0; padding: 14px 0 0; border-top: 2px solid var(--ink); counter-increment: schritt; }
.steps h3 { margin-bottom: 0.3em; display: flex; align-items: baseline; gap: 10px; }
.steps h3::before { content: counter(schritt) "."; font-variant-numeric: tabular-nums; color: var(--green-ink); flex: none; }
.steps p { margin: 0; color: var(--text); }

/* Hosting-Vergleich */
.compare { display: grid; gap: 20px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; gap: 32px; } }
.compare > div { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.compare h3 { margin-bottom: 0.5em; }
.compare ul { margin: 0; padding-left: 1.1em; }

/* Funktionsseite: Sprungnavigation. Unter 720 px eine einzeilige, aufklappbare Bereichsauswahl (nicht sticky);
   ab 720 px alle 13 Pillen umbrechend und sticky unter der Kopfzeile. Scrollt nie seitlich. */
.jumpnav { background: var(--paper); border-bottom: 1px solid var(--line); }
.jumpnav summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 0; cursor: pointer; font-size: var(--fs-small); font-weight: 700; color: var(--text); }
.jumpnav summary::-webkit-details-marker { display: none; }
.jumpnav summary strong { color: var(--ink); }
.jumpnav summary .jn-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); }
.jumpnav summary svg { width: 18px; height: 18px; flex: none; transition: transform 0.2s var(--ease); }
.jumpnav details[open] summary svg { transform: rotate(180deg); }
.jumpnav summary:hover { color: var(--green-ink); }
.jumpnav ul { list-style: none; margin: 0; padding: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.jumpnav li { margin: 0; }
.jumpnav a { display: inline-block; padding: 10px 14px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; color: var(--text); text-decoration: none; border: 1px solid transparent; }
.jumpnav a:hover { background: var(--green-tint); color: var(--green-ink); }
.jumpnav a[aria-current="page"] { background: var(--green); color: var(--ink); }
@media (min-width: 720px) {
  .jumpnav { position: sticky; top: var(--header-h); z-index: 90; }
  .jumpnav summary { display: none; }
  .jumpnav ul { padding: 10px 0; }
}
@media (min-width: 900px) { .jumpnav a { padding: 7px 12px; } }

/* Funktions-Unterseiten: Prozess-Kategorien (Variante 1) und Rollen (Variante 2) */
.fpage-head { display: grid; gap: 24px 48px; align-items: start; }
@media (min-width: 900px) { .fpage-head { grid-template-columns: 7fr 5fr; } }
.fpage-head .lede { max-width: 58ch; }
.fkind { padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 16px); }
.jumpnav + .fkind, .jumpnav-wrap + .fkind { padding-top: 40px; border-top: 0; }
/* Blockkopf der Bereichsseiten: Ueberschrift ueber die volle Breite, kein Vorspann mehr (JR, 19.10.2026; vorher 4/8-Spalten mit dreizeiligem Umbruch) */
.fkind-head { display: block; margin-bottom: 24px; }
.fkind-head h2 { text-wrap: balance; }
.fkind-head h2 { margin: 0; scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 16px); }
.fkind-head p { margin: 0; max-width: 62ch; color: var(--text); }
.fkind--auto { background: var(--surface); }
.fkind--auto .fgroup li::before { background: var(--green); }
.when { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--green-ink); background: var(--green-tint); border: 1px solid var(--green-line); border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; hyphens: auto; }
.role-tag { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; }
.related { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 32px; }
@media (min-width: 720px) { .related { grid-template-columns: 1fr 1fr; } }
.related li { margin: 0; padding: 6px 0 10px; border-top: 1px solid var(--line); }
.related a { display: block; padding: 11px 0 6px; font-weight: 800; color: var(--ink); text-decoration: none; }
.related a:hover { color: var(--green-ink); }
.related span { display: block; color: var(--muted); font-size: var(--fs-small); }
.roles { display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .roles { grid-template-columns: 1fr 1fr; } }
.role { border-top: 2px solid var(--ink); padding-top: 14px; }
.role h3 { margin-bottom: 4px; }
.role .who { color: var(--muted); font-size: var(--fs-small); margin-bottom: 12px; }
.role ul { list-style: none; margin: 0; padding: 0; }
.role li { padding: 8px 0 8px 22px; margin: 0; border-bottom: 1px solid var(--line); position: relative; }
.role li::before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--green); box-sizing: border-box; }

.feature { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--jumpnav-h) + 16px); }
.feature .section-head { margin-bottom: 28px; }
.feature .section-head p { max-width: 62ch; }
.fgroups { display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .fgroups { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.fgroup h3 { font-size: var(--fs-body); font-weight: 800; padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 10px; }
.fgroup ul { list-style: none; margin: 0; padding: 0; }
.fgroup li { padding: 8px 0 8px 22px; margin: 0; border-bottom: 1px solid var(--line); position: relative; }
.fgroup li::before { content: ""; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--green); box-sizing: border-box; }
.topfeatures { display: grid; gap: 24px 40px; }
@media (min-width: 720px) { .topfeatures { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .topfeatures { grid-template-columns: repeat(3, 1fr); } }
.topfeatures div { padding-top: 14px; border-top: 2px solid var(--green); }
.topfeatures h3 { font-size: var(--fs-body); margin-bottom: 0.3em; }
.topfeatures p { margin: 0; color: var(--text); font-size: var(--fs-small); }
.feature-shot { margin-top: 32px; }

/* Funktions-Unterseiten: Brotkrumen, Kopf ohne Bild, Beispiel-Feldzeilen */
.breadcrumb { margin-bottom: 10px; font-size: var(--fs-small); color: var(--muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb .sep { color: var(--muted); }
.breadcrumb a { display: inline-block; padding: 11px 0; color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-ink); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.fpage-head h1 .chip { vertical-align: middle; margin-left: 8px; font-size: 0.85rem; }
.fpage-head--text { grid-template-columns: minmax(0, 1fr); }
.example-pane .fields { padding-bottom: 4px; }
.example-pane .field-value { font-size: var(--fs-body); }
.example-pane .field-note { display: flex; font-family: var(--font-ui); font-style: normal; font-size: var(--fs-small); color: var(--muted); }
.example-pane .field-note span { max-width: 40ch; }
.areas .chip { justify-self: start; margin-top: 2px; }

/* Formular */
.form { display: grid; gap: 18px; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form label, .form legend { display: block; font-weight: 700; font-size: var(--fs-small); color: var(--ink); margin-bottom: 6px; padding: 0; }
.form .optional { font-weight: 400; color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-input); border-radius: var(--radius); padding: 11px 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--green-ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--green-ink); box-shadow: 0 0 0 3px rgba(159, 197, 24, 0.4); }
.form textarea { min-height: 140px; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form .choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.form .choices label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; font-size: var(--fs-body); }
.form input[type="checkbox"], .form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--green-ink); margin: 0; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--fs-body); }
.form .consent input { margin-top: 4px; flex: none; }
.form .err { display: none; color: var(--error); font-size: var(--fs-small); margin-top: 6px; font-weight: 700; }
.form.was-validated :invalid, .form [aria-invalid="true"] { border-color: var(--error); background: var(--error-tint); }
.form.was-validated .is-invalid .err { display: block; }
.form-status { display: none; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--green-line); background: var(--green-tint); color: var(--ink); }
.form-status.is-on { display: block; }
.form-status.is-error { border-color: var(--error-line); background: var(--error-tint); }

/* Kontakt / Impressum */
.addr { font-style: normal; line-height: 1.7; }
.kv { display: grid; gap: 8px 24px; margin: 0; }
@media (min-width: 720px) { .kv { grid-template-columns: 220px 1fr; } }
.kv dt { font-weight: 700; color: var(--ink); }
.kv dd { margin: 0 0 8px; }
@media (min-width: 720px) { .kv dd { margin-bottom: 0; } }
.notice { padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-family: var(--font-mail); font-style: italic; }

/* Karriere */
.jobs { display: grid; gap: 24px; }
@media (min-width: 900px) { .jobs { grid-template-columns: 1fr 1fr; gap: 32px; } }
.job { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.job h3 { margin-bottom: 0.2em; }
.job .meta { color: var(--muted); font-size: var(--fs-small); margin-bottom: 14px; }
.job h4 { margin-top: 14px; }
.job ul { margin: 0; padding-left: 1.1em; }

/* Page-Intro */
.page-intro { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); background: var(--surface); border-bottom: 1px solid var(--line); }
.page-intro h1 { max-width: 26ch; hyphens: auto; overflow-wrap: anywhere; }  /* 26ch statt 18ch: "Cloud in Deutschland oder dein eigener Server" brach dreizeilig (JR 19.10.2026) */
.page-intro .lede { margin-top: 12px; }

/* Footer */
.site-footer { background: var(--ink); color: var(--footer-text); padding: 48px 0 32px; margin-top: clamp(48px, 8vw, 96px); }
.site-footer .logo { color: var(--paper); }
.site-footer .logo:hover { color: var(--paper); }
.footer-grid { display: grid; gap: 32px; }
.footer-nav { display: grid; gap: 32px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.2fr 3fr; } .footer-nav { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.site-footer h2 { color: var(--paper); font-size: var(--fs-body); font-weight: 700; line-height: 1.4; letter-spacing: 0; margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer li:last-child { padding-top: 6px; }
.site-footer a { display: inline-block; padding: 11px 0; color: var(--footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--green); }
.site-footer p { color: var(--footer-muted); font-size: var(--fs-small); max-width: 44ch; }
.footer-legal { display: inline-flex; gap: 20px; }
.footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--fs-small); color: var(--footer-muted); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (min-width: 900px) {
  .site-footer a { padding: 6px 0; }
  .site-footer li:last-child { padding-top: 0; }
  .breadcrumb a { padding: 8px 0; }
}

/* Hilfsklassen */
.mt-2 { margin-top: 16px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Startseite, Stand 19.10.2026: roter Faden in vier Schritten, Bild neben Text, abwechselnd links und rechts */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 6vw, 72px); counter-reset: flow; }
.flow-step { margin: 0; display: grid; gap: clamp(20px, 4vw, 48px); align-items: center; counter-increment: flow; padding-top: clamp(20px, 3vw, 32px); border-top: 2px solid var(--ink); }
.flow-step > * { min-width: 0; }
.flow-text h3 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); margin-bottom: 0.45em; }
.flow-text h3::before { content: counter(flow); flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--green); color: var(--ink); font-size: 1rem; font-variant-numeric: tabular-nums; align-self: center; }
.flow-text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .flow-step { grid-template-columns: 5fr 7fr; }
  .flow-step:nth-child(even) { grid-template-columns: 7fr 5fr; }
  .flow-step:nth-child(even) .flow-text { order: 2; }
  .flow-step:nth-child(even) .shot { order: 1; }
}

/* Rechnungsschema (kein Screenshot): dieselbe Formularsprache wie Posteingang und Auftragsmaske */
.invoice { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.invoice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.invoice-title { font-weight: 800; }
.invoice-rows { margin: 0; padding: 6px 16px 10px; }
.invoice-rows > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.invoice-rows > div:last-child { border-bottom: 0; }
.invoice-rows dt { font-size: var(--fs-small); color: var(--muted); }
.invoice-rows dd { margin: 0; }
@media (min-width: 560px) { .invoice-rows > div { grid-template-columns: 120px minmax(0, 1fr); } }

/* Kundenstimmen als Sprechblasen: Blase in Papier mit Zipfel, darunter Kürzel, Name und Rolle; Lora für die fremde Stimme */
.bubbles { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px 32px; }
@media (min-width: 900px) { .bubbles { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.bubbles li { margin: 0; }
.bubbles figure { margin: 0; display: grid; gap: 18px; }
.bubbles blockquote { position: relative; margin: 0; padding: 20px 22px 22px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px; font-family: var(--font-mail); font-size: 1.05rem; line-height: 1.55; color: var(--text); }
.bubbles blockquote::before, .bubbles blockquote::after { content: ""; position: absolute; left: 30px; width: 0; height: 0; border-style: solid; }
.bubbles blockquote::before { bottom: -15px; border-width: 15px 14px 0 0; border-color: var(--line-strong) transparent transparent transparent; }
.bubbles blockquote::after { bottom: -13px; border-width: 13px 12px 0 0; border-color: var(--paper) transparent transparent transparent; }
.bubbles blockquote p { margin: 0; }
.bubbles blockquote p::before { content: "\201E"; }
.bubbles blockquote p::after { content: "\201C"; }
.bubbles .topic { display: block; margin-bottom: 8px; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; color: var(--green-ink); }
.bubbles figcaption { display: flex; align-items: center; gap: 12px; padding-left: 6px; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--muted); }
.bubbles figcaption strong { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; }
.bubbles .avatar { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--green-tint); border: 1px solid var(--green-line); color: var(--green-ink); font-weight: 800; letter-spacing: 0.02em; }

/* Kennzahlen-Nachsatz und Bereichszeile */
.trust-note { margin: clamp(24px, 4vw, 40px) 0 0; max-width: 70ch; color: var(--on-dark); }
.area-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area-links li { margin: 0; }
.area-links a { display: inline-block; padding: 10px 14px; border-radius: 999px; font-size: var(--fs-small); font-weight: 700; color: var(--ink); text-decoration: none; border: 1px solid var(--line-strong); }
.area-links a:hover { background: var(--green-tint); color: var(--green-ink); border-color: var(--green-line); }

/* Funktionen-Seite, Stand 19.10.2026: Top-Features zuerst, darunter die Bereiche als abgesetzte Kacheln mit Knopf (Wunsch JR) */
.feature--first { border-top: 0; }
.areas-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.areas-grid li { margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius); scroll-margin-top: calc(var(--header-h) + 16px); }
.areas-grid h3 { font-size: 1.1rem; margin-bottom: 0.3em; }
.areas-grid p { margin: 0; color: var(--text); font-size: var(--fs-small); }
.areas-grid .btn { align-self: flex-start; margin-top: auto; padding: 10px 16px; font-size: var(--fs-small); }
.areas-grid .btn svg { width: 16px; height: 16px; }
/* Bereichs-Pillen auf dunklem Grund (Startseite) */
.section--dark .area-links a { color: var(--paper); border-color: rgba(255,255,255,0.35); }
.section--dark .area-links a:hover { background: rgba(255,255,255,0.1); color: var(--paper); border-color: var(--green); }

/* Aufklappmenue "Funktionen" (Runde 6, 19.10.2026): am Handy als eingerueckte Liste im Burger-Menue, ab 900 px als Leiste unter der Kopfzeile */
.site-nav .has-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.site-nav .has-sub > a { grid-column: 1; }
.sub-toggle { grid-column: 2; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.sub-toggle:hover { background: var(--green-tint); color: var(--green-ink); }
.sub-toggle svg { width: 18px; height: 18px; transition: transform 0.15s var(--ease); }
.has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
.site-nav .sub { grid-column: 1 / -1; display: none; list-style: none; margin: 0; padding: 2px 0 8px 10px; flex-direction: column; gap: 2px; }
.has-sub.is-open .sub { display: flex; }
.site-nav .sub a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-weight: 600; color: var(--text); }
.site-nav .sub a:hover { color: var(--green-ink); }
.site-nav .sub .ico { width: 22px; height: 22px; flex: none; color: var(--green-ink); }
.site-nav .sub-all a { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; border-radius: 0; }
@media (min-width: 900px) {
  .site-nav .has-sub { display: flex; align-items: center; position: static; }
  .sub-toggle { width: 32px; height: 36px; margin-left: -6px; }
  .site-nav .sub { position: absolute; left: 0; right: 0; top: 100%; z-index: 110; display: none; padding: 16px 24px 18px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
  .site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub, .site-nav .has-sub.is-open .sub { display: flex; }
  .site-nav .sub > li { flex: 0 0 calc(33.333% - 11px); }
  .site-nav .sub > li.sub-all { flex-basis: 100%; }
  .site-nav .sub-all a { justify-content: flex-start; margin-top: 8px; padding-top: 14px; }
}

/* Piktogramm je Bereich: Kreis in Gruen-Hauch mit Gruen-Linie, Zeichen in Gruen-Tinte */
.area-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--green-tint); border: 1px solid var(--green-line); color: var(--green-ink); }
.area-ico .ico { width: 22px; height: 22px; }
.area-ico--lg { width: 56px; height: 56px; }
.area-ico--lg .ico { width: 30px; height: 30px; }
.areas-grid h3 { display: flex; align-items: center; gap: 12px; }
.fpage-head h1 { display: flex; align-items: center; gap: 16px; max-width: none; }
.fpage-head h1 > span:last-child { max-width: 18ch; }
@media (max-width: 480px) { .fpage-head h1 { gap: 12px; } .area-ico--lg { width: 48px; height: 48px; } .area-ico--lg .ico { width: 26px; height: 26px; } }

/* Korrektur 19.10.2026: Beim Hineinfahren ins Menue verschwand es, weil der Listenpunkt nur so hoch war wie der Link
   und die Maus auf dem Weg zur Leiste den Hover-Bereich verliess. Der Punkt fuellt jetzt die ganze Kopfzeilenhoehe,
   dazu eine unsichtbare Bruecke oben an der Leiste. */
@media (min-width: 900px) {
  .site-nav .has-sub { align-self: stretch; min-height: var(--header-h); }
  .site-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
}

/* Ueber uns, Partner (Runde 9, 19.10.2026): Logos als Vertrauensblock, flache Spalten mit Linie oben, kein Kartenraster */
.partners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.partners li { margin: 0; padding-top: 20px; border-top: 2px solid var(--ink); }
.partner-logo { display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap; min-height: 64px; margin-bottom: 18px; }
.partner-logo img { display: block; width: auto; height: auto; max-height: 56px; max-width: 220px; }
.partner-logo--pair { gap: 16px 22px; }
.partner-logo--pair img:first-child { max-width: 170px; }
.partner-logo--pair img:last-child { max-height: 36px; max-width: 150px; }
.partner-role { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--green-ink); margin-bottom: 4px; }
.partners h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.partners p { margin: 0 0 0.6em; color: var(--text); }
.partners p:last-child { margin-bottom: 0; }
.made-in { display: grid; gap: 4px 32px; }
.made-in h3 { margin: 0; text-align: center; }

/* Startseite, Schritte: Verweise in die Bereiche als Knoepfe wie auf der Funktionen-Seite (JR, 19.10.2026) */
.flow-text .btn-row { margin-top: 4px; }
.flow-text .btn { padding: 10px 16px; font-size: var(--fs-small); }
.flow-text .btn svg { width: 16px; height: 16px; }

/* Abschnitt nur mit Demo-Kasten direkt vor der Fusszeile (Ueber uns): unten kein eigener Abstand, den liefert der Fusszeilen-Abstand (JR, 19.10.2026) */
.section--cta { padding-bottom: 0; }