/* =========================================================================
   Ruvendi — Design System
   -------------------------------------------------------------------------
   Ein einziges, modulares Stylesheet für die gesamte Website.
   Aufbau:  1) Tokens (Light/Dark)  2) Reset/Base  3) Typografie
            4) Layout  5) Buttons  6) Header/Nav  7) Hero
            8) Sektionen/Cards  9) Geräte-Mockups & Platzhalter
           10) Pricing 11) FAQ 12) Footer 13) Animationen 14) Utilities
           15) Responsive 16) A11y / Reduced Motion
   Farben, Abstände, Radien und Schatten laufen über CSS-Variablen,
   damit sich Theme und Marke an einer Stelle anpassen lassen.
   ========================================================================= */

/* 1) ------------------------------------------------------------- Tokens */
:root {
  /* Marke */
  --brand: #164B50;
  --brand-600: #10393D;
  --brand-700: #0C2C2F;
  --accent: #E5A340;

  /* Flächen & Text (Light) */
  --bg: #ffffff;
  --bg-subtle: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --border: #e6e9f0;
  --border-strong: #d3d8e3;
  --text: #0b1220;
  --text-muted: #5a6478;
  --text-faint: #8a93a6;

  /* Effekte */
  --ring: rgba(22, 75, 80, .38);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .14);
  --glow: 0 20px 80px rgba(22, 75, 80, .22);

  /* Radien */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Abstände */
  --space-section: clamp(64px, 9vw, 128px);
  --container: 1140px;

  /* Typo */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --header-h: 68px;
}

:root[data-theme="dark"] {
  --bg: #0a0d14;
  --bg-subtle: #0d121c;
  --surface: #111828;
  --surface-2: #0f1522;
  --border: #1e2636;
  --border-strong: #29344a;
  --text: #eef2f9;
  --text-muted: #a2acc4;
  --text-faint: #6f7a92;
  --brand: #3E9AA4;
  --brand-600: #3E9AA4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 30px 70px rgba(0, 0, 0, .6);
  --glow: 0 20px 90px rgba(62, 154, 164, .35);
  color-scheme: dark;
}

/* 2) -------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* 3) ----------------------------------------------------------- Typografie */
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; }
.h-display { font-size: clamp(2.4rem, 6vw, 4.1rem); letter-spacing: -0.035em; }
.h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
p { color: var(--text-muted); }
.lead { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--text-muted); }
.eyebrow {
  display: inline-block; font-size: .82rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.gradient-text {
  background: linear-gradient(120deg, var(--brand), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 4) --------------------------------------------------------------- Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }
.container-narrow { max-width: 760px; }
section { padding-block: var(--space-section); }
.section-head { max-width: 680px; margin: 0 auto 52px; text-align: center; }
.section-head p { margin-top: 14px; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.bg-subtle { background: var(--bg-subtle); }
.divider { height: 1px; background: var(--border); border: 0; }

/* 5) --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: .96rem;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease,
    background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-600); box-shadow: var(--glow); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { color: var(--brand); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* 6) -------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -.02em; font-size: 1.12rem; }
.brand .logo-mark { width: 28px; height: 28px; color: #164B50; }
:root[data-theme="dark"] .brand .logo-mark { color: #F5F3EE; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 8px 12px; border-radius: var(--r-sm); font-size: .95rem; font-weight: 550;
  color: var(--text-muted); transition: color .2s ease, background .2s ease;
}
.nav-links a:hover { color: var(--text); background: var(--bg-subtle); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); display: inline-grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); }

/* Sprachumschalter */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); }
.lang-switch button { border: 0; background: transparent; color: var(--text-muted); font-size: .72rem;
  font-weight: 700; letter-spacing: .03em; padding: 5px 8px; border-radius: var(--r-pill);
  text-transform: uppercase; transition: background .2s, color .2s; }
.lang-switch button[aria-current="true"] { background: var(--brand); color: #fff; }
.lang-switch button:hover:not([aria-current="true"]) { color: var(--text); }
.mobile-menu .lang-switch { align-self: flex-start; margin-top: 14px; }
@media (max-width: 720px) { .nav-actions .lang-switch { display: none; } }

/* Mobile-Navigation */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: 55;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 16px 22px 26px; display: none; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-lg);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 13px 10px; border-radius: var(--r-sm); font-weight: 550; font-size: 1.05rem; }
.mobile-menu a:hover { background: var(--bg-subtle); }
.mobile-menu .btn { margin-top: 10px; }

/* 7) ----------------------------------------------------------------- Hero */
.hero { position: relative; padding-top: clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px; z-index: -1;
  background:
    radial-gradient(60% 60% at 25% 20%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%),
    radial-gradient(50% 50% at 85% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  filter: blur(10px); opacity: .9;
}
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 30px; max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 18px; font-size: .9rem; color: var(--text-faint); display: flex; gap: 8px; align-items: center; }
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border); font-size: .82rem; font-weight: 600;
  color: var(--text-muted); box-shadow: var(--shadow-sm);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* 8) ----------------------------------------------------- Sektionen & Cards */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.card .icon {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 18px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: .96rem; }
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-split.reverse .feature-media { order: -1; }
.feature-list { display: grid; gap: 14px; margin-top: 22px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); }
.feature-list .check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--brand); margin-top: 2px; }
.stat-grid { text-align: center; }
.stat .num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 750; letter-spacing: -.03em; }
.stat .label { color: var(--text-muted); font-size: .95rem; }

/* Logo-Cloud (Referenzen, Platzhalter) */
.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; opacity: .85; }
.logo-chip {
  height: 34px; min-width: 118px; padding: 0 18px; border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong); display: grid; place-items: center;
  color: var(--text-faint); font-weight: 650; font-size: .82rem; letter-spacing: .02em;
}

/* Testimonials */
.quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); }
.quote p { color: var(--text); font-size: 1.02rem; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.avatar-ph { width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--accent)); opacity: .85; }
.who .meta strong { display: block; font-size: .92rem; }
.who .meta span { font-size: .82rem; color: var(--text-faint); }

/* 9) --------------------------------------------- Geräte-Mockups & Platzhalter */
/* Beschriftete Platzhalter — später 1:1 durch echte Bilder ersetzen. */
.ph {
  position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface-2));
  border: 1px dashed var(--border-strong); display: grid; place-items: center; text-align: center;
  min-height: 200px; color: var(--text-faint);
}
.ph::after {
  content: attr(data-label); position: absolute; inset: auto 0 12px 0;
  font-size: .78rem; font-weight: 650; letter-spacing: .02em; color: var(--text-faint);
}
.ph .ph-inner { padding: 22px; display: grid; gap: 8px; place-items: center; }
.ph .ph-icon { width: 40px; height: 40px; opacity: .55; }
.ph .ph-title { font-weight: 650; color: var(--text-muted); font-size: .95rem; }
/* Echte Bildschirmfotos (seit 2026-08-16) — sie ersetzen die Platzhalter.
   `.shot` behält das Seitenverhältnis des Bildes bei: Ein hochkantes
   Telefonbild in einen 4:3-Kasten zu zwingen hieße entweder beschneiden
   (dann fehlt die Hälfte der Ansicht) oder Balken links und rechts. */
.shot {
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-lg);
}
/* Papier bleibt Papier — auch im Dunkelmodus.
   `rechnung-beispiel.png` ist mit **transparentem** Hintergrund exportiert
   (`sips -g hasAlpha` → yes; die vier Telefonaufnahmen dagegen nicht). Ohne
   diese Regel scheint im Dunkelmodus die dunkle Seite durch die Rechnung und
   die schwarze Schrift verschwindet. Ein Beleg ist ein weisses Blatt, egal
   welches Design der Betrachter eingestellt hat. Gilt bewusst fuer alle
   `.shot`-Bilder: undurchsichtige Aufnahmen deckt es ohnehin ab, und die
   naechste transparente Datei laeuft nicht wieder in dieselbe Falle. */
.shot img { display: block; width: 100%; height: auto; background: #fff; }
.shot figcaption {
  padding: 10px 14px; font-size: .82rem; color: var(--text-faint);
  border-top: 1px solid var(--border);
}
/* Telefon-Aufnahme in einer Textspalte nicht über die volle Breite ziehen */
.shot-phone { max-width: 320px; margin-inline: auto; }
/* Bildschirmfoto im CSS-iPhone. Die Aufnahme bringt ihre **eigene**
   Statusleiste samt Dynamic Island mit — die gezeichnete Kerbe wird deshalb
   ausgeblendet, sonst lägen zwei übereinander. */
.iphone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone.has-shot .notch { display: none; }

/* Zwei Bilder untereinander in einer Medienspalte (Export-Ansicht + PDF) */
.stack-2 { display: grid; gap: 18px; }

.ph-16x9 { aspect-ratio: 16 / 9; min-height: 0; }
.ph-4x3 { aspect-ratio: 4 / 3; min-height: 0; }
.ph-square { aspect-ratio: 1 / 1; min-height: 0; }

/* iPhone-Frame (reines CSS) mit Platzhalter-Screen */
.device { --w: 300px; width: var(--w); margin-inline: auto; max-width: 100%; }
.iphone {
  position: relative; width: var(--w); aspect-ratio: 300 / 610; margin-inline: auto; max-width: 82vw;
  border-radius: 46px; padding: 12px;
  background: linear-gradient(160deg, #2b3242, #0c0f16);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.06);
}
.iphone .screen {
  position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 20%, #0e1320), #0b0f18);
  display: grid; place-items: center; text-align: center; color: #cdd6ea;
}
.iphone .notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 108px; height: 26px; border-radius: var(--r-pill); background: #05070b;
}
.iphone .screen .scr-label { padding: 20px; font-size: .9rem; font-weight: 600; opacity: .92; }
.float-card {
  position: absolute; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: .82rem; font-weight: 600;
}
.hero-media { position: relative; }
.hero-media .float-1 { top: 8%; left: -6%; }
.hero-media .float-2 { bottom: 12%; right: -4%; }

/* 10) -------------------------------------------------------------- Pricing */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.price-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); position: relative;
}
.price-card.featured { border-color: var(--brand); box-shadow: var(--glow); }
.price-card .tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--r-pill); text-transform: uppercase;
}
.price-card .plan { font-weight: 700; font-size: 1.15rem; }
.price-card .price { font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; margin: 10px 0 2px; }
.price-card .price small { font-size: .9rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.price-card .desc { color: var(--text-muted); font-size: .92rem; min-height: 42px; }
.price-card ul { display: grid; gap: 11px; margin: 22px 0 26px; }
.price-card ul li { display: flex; gap: 10px; font-size: .93rem; color: var(--text); }
.price-card ul li .check { color: var(--brand); flex: none; }
.price-card ul li.muted { color: var(--text-faint); }
.price-card .btn { margin-top: auto; }

/* 11) ------------------------------------------------------------------ FAQ */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 6px;
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  list-style: none; cursor: pointer; padding: 16px 16px; font-weight: 600; display: flex;
  justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .25s ease; flex: none; color: var(--text-faint); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 16px 18px; color: var(--text-muted); }

/* 12) --------------------------------------------------------------- Footer */
.site-footer { background: var(--bg-subtle); border-top: 1px solid var(--border); padding-block: 64px 34px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { font-size: .92rem; margin-top: 14px; max-width: 32ch; }
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 14px; font-weight: 650; }
.footer-col a { display: block; padding: 5px 0; color: var(--text-muted); font-size: .93rem; transition: color .2s; }
.footer-col a:hover { color: var(--brand); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); font-size: .86rem; color: var(--text-faint); }
.footer-bottom .langs { display: flex; gap: 14px; }

/* 13) ------------------------------------------------------------ Animationen */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.floaty { animation: float 6s ease-in-out infinite; }

/* 14) ------------------------------------------------------------- Utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 20px; } .mb-3 { margin-bottom: 32px; }
.max-60 { max-width: 60ch; } .mx-auto { margin-inline: auto; }
.cta-band {
  background: linear-gradient(135deg, var(--brand), var(--brand-700));
  color: #fff; border-radius: var(--r-xl); padding: clamp(38px, 6vw, 66px); text-align: center; box-shadow: var(--glow);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.86); max-width: 52ch; margin: 14px auto 26px; }
.cta-band .btn-primary { background: #fff; color: var(--brand-700); }
.cta-band .btn-primary:hover { background: #eef2ff; }
.cta-band .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: #fff;
  padding: 10px 16px; border-radius: var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Legal / Prosa-Seiten */
.legal { padding-block: clamp(48px, 7vw, 90px); }
.legal .container { max-width: 820px; }
.legal h1 { margin-bottom: 8px; }
.legal .updated { color: var(--text-faint); font-size: .9rem; margin-bottom: 36px; }
.legal h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.08rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--text-muted); }
.legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin: 12px 0; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.legal .lang-switch { display: inline-flex; gap: 8px; margin-bottom: 28px; }

/* Kontaktformular */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .9rem; font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-status { font-size: .9rem; font-weight: 600; padding: 10px 14px; border-radius: var(--r-sm); margin: 0; }
.form-status.ok { color: var(--brand); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.form-status.error { color: #d92d20; background: color-mix(in srgb, #d92d20 12%, transparent); }
.btn[disabled] { opacity: .6; cursor: default; pointer-events: none; }

/* --- Werkzeug „Projektdatei erstellen" (projekt.html) ------------------- */
/* Zweispaltiges Formular, das auf schmalen Geräten einspaltig wird. Ein
   Bauleiter füllt das eher am Rechner aus, der Empfänger liest am Telefon. */
.grid-2-form { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.grid-2-form .field-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .grid-2-form { grid-template-columns: 1fr; } }

.hint { font-size: .85rem; color: var(--text-faint); margin: 4px 0 0; }
.field .hint { margin-top: 0; }

.projekt-block {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px; margin-top: 16px; background: var(--surface);
}
.projekt-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}

/* Textknopf, der wie ein Link aussieht, aber einer bleibt: ein <button>,
   damit Tastatur und Screenreader ihn als Aktion melden, nicht als Ziel. */
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--brand); font: inherit; font-size: .88rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

.gate-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .88rem; color: var(--text-muted); background: var(--surface);
}

/* `hidden` gegen die Anzeige-Regeln der Bausteine durchsetzen: Ohne das
   zeigt der Browser eine `display:grid`-Section trotz hidden-Attribut. */
[hidden] { display: none !important; }

/* Fokus-Sichtbarkeit (A11y) */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-sm);
}

/* Page-Header (Unterseiten) */
.page-hero { padding-block: clamp(56px, 8vw, 100px) 0; text-align: center; }
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero p { max-width: 56ch; margin: 16px auto 0; }

/* 15) ------------------------------------------------------------ Responsive */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-media { order: -1; }
  .feature-split { grid-template-columns: 1fr; gap: 32px; }
  .feature-split.reverse .feature-media { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .nav-links, .nav-actions .btn.desktop-only { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .section-head { margin-bottom: 36px; }
}

/* 16) -------------------------------------------------- Reduced Motion (A11y) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}