/* ══════════════════════════════════════════════════════════
   unifina Green Theme Override  –  v5 2026
   Überlagert das blaue Design mit dem neuen Grün-System
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

/* ── CSS-Variablen: Grün-System ───────────────────────────── */
:root {
  /* Surfaces */
  --cream:  #F8F6F1;
  --smoke:  #F0EDE7;

  /* Grün-Hierarchie */
  --g900:   #0D2318;
  --g800:   #1B3B2A;
  --g700:   #245C3C;
  --g600:   #2E7D52;
  --g500:   #3D9A66;
  --g400:   #5BB57F;
  --g100:   #D6F0E4;
  --g50:    #EEF8F3;
  --mint:   #A8E6C2;
  --gold:   #B5893A;

  /* Text */
  --t-h:  #0F2018;
  --t-b:  #2C4A3A;
  --t-m:  #4E7264;
  --t-s:  #7A9E8E;

  /* Borders */
  --bdr:   rgba(15,32,24,.10);
  --bdr2:  rgba(15,32,24,.18);
  --bdr-g: rgba(61,154,102,.35);

  /* Shadows */
  --sh-sm: 0 1px 4px rgba(15,32,24,.07), 0 2px 10px rgba(15,32,24,.05);
  --sh-md: 0 2px 12px rgba(15,32,24,.09), 0 6px 24px rgba(15,32,24,.07);
  --sh-lg: 0 4px 24px rgba(15,32,24,.12), 0 12px 48px rgba(15,32,24,.09);

  /* Map legacy blue vars → green */
  --brand:        #3D9A66;
  --brand-dark:   #1B3B2A;
  --brand-light:  #EEF8F3;
  --primary-color:#3D9A66;
  --primary-dark: #1B3B2A;
  --primary-light:#EEF8F3;
  --success-color:#3D9A66;

  --text:   #2C4A3A;
  --muted:  #4E7264;
  --line:   rgba(15,32,24,.12);
  --card:   #FFFFFF;
  --bg:     #F8F6F1;
  --shadow: var(--sh-md);
  --radius: 14px;
}

/* ── Schriften ────────────────────────────────────────────── */
body,
.navbar, .nav-link, .nav-menu, button, input, select, textarea {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3,
.section-title,
.logo-text,
.hero h1,
.plan-price,
.kpi-value {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* ── Body / Background ────────────────────────────────────── */
body { background: var(--cream) !important; color: var(--t-b) !important; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background: var(--g900) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) !important;
}

.logo-text { color: var(--mint) !important; }
.logo { color: var(--mint) !important; }

.nav-link {
  color: rgba(255,255,255,.72) !important;
  font-weight: 400 !important;
}
.nav-link:hover,
.nav-link.active { color: #fff !important; }

/* CTA im Nav */
.navbar .cta-button,
.nav-menu .cta-button {
  background: var(--g500) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 9px 22px !important;
  font-weight: 600 !important;
  transition: background .2s, transform .15s !important;
}
.navbar .cta-button:hover { background: var(--g600) !important; transform: translateY(-1px) !important; }

/* Mobile hamburger */
.hamburger,
.hamburger::before,
.hamburger::after { background: rgba(255,255,255,.75) !important; }

/* Mobile menu */
.nav-menu.open,
.nav-menu-open { background: var(--g900) !important; }
@media(max-width:768px) {
  .nav-menu {
    background: var(--g900) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
  .nav-link { color: rgba(255,255,255,.75) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
}

/* ── Language switcher (injiziert per JS) ─────────────────── */
.u-lsw {
  display: flex; gap: 2px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 3px;
  margin-left: 8px;
}
.u-lb {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-size: .72rem; font-weight: 700;
  padding: 4px 9px; border-radius: 999px;
  transition: all .18s; font-family: 'DM Sans', sans-serif;
  letter-spacing: .05em; line-height: 1;
}
.u-lb:hover { color: rgba(255,255,255,.88); }
.u-lb.on { background: var(--mint); color: var(--g900); font-weight: 800; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary, .btn-submit, .cta-button:not(.nav-link) {
  background: var(--g500) !important;
  border-color: var(--g500) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(61,154,102,.28) !important;
  transition: background .2s, box-shadow .2s, transform .15s !important;
}
.btn-primary:hover, .btn-submit:hover { background: var(--g600) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 20px rgba(61,154,102,.38) !important; }

.btn-secondary {
  background: transparent !important;
  color: var(--g700) !important;
  border: 1.5px solid var(--bdr2) !important;
  border-radius: 999px !important;
}
.btn-secondary:hover { background: var(--g50) !important; border-color: var(--bdr-g) !important; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero { background: linear-gradient(155deg, var(--cream) 0%, #E8F5EE 100%) !important; }

.hero h1, .hero-title { color: var(--t-h) !important; }
.hero h1 em, .hero-title em { color: var(--g500) !important; }

.hero-live-dot {
  background: var(--g400) !important;
  box-shadow: 0 0 0 4px rgba(91,181,127,.2) !important;
}
.hero-live-label { color: var(--g700) !important; font-weight: 600 !important; }

.hero-pill {
  background: #fff !important;
  border: 1px solid var(--bdr) !important;
  color: var(--t-b) !important;
  box-shadow: var(--sh-sm) !important;
}

.hero-card {
  background: #fff !important;
  border-color: var(--bdr) !important;
  box-shadow: var(--sh-md) !important;
}
.hero-card-title { color: var(--g800) !important; }
.hero-card-row strong { color: var(--g700) !important; }

/* ── Sections ─────────────────────────────────────────────── */
.section { background: #fff; }
.section-muted { background: var(--cream) !important; }

/* eyebrow label */
.eyebrow {
  background: var(--g50) !important;
  color: var(--g700) !important;
  border: 1px solid var(--g100) !important;
}

/* ── KPI / Stats ──────────────────────────────────────────── */
.kpi-value { color: var(--g600) !important; }
.kpi-card { border-color: var(--bdr) !important; box-shadow: var(--sh-sm) !important; }
.kpi-card:hover { border-color: var(--bdr-g) !important; box-shadow: var(--sh-md) !important; }

/* ── Calculator cards ─────────────────────────────────────── */
.rechner-card, .calculator-card, .calc-card {
  background: #fff !important;
  border: 1.5px solid var(--bdr) !important;
  box-shadow: var(--sh-sm) !important;
  border-radius: var(--radius) !important;
}
.rechner-card:hover, .calculator-card:hover, .calc-card:hover {
  border-color: var(--bdr-g) !important;
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px) !important;
}
.rechner-card.featured { border-color: var(--g400) !important; }
.rechner-btn, .calc-btn { background: var(--g500) !important; color: #fff !important; border-radius: 999px !important; }
.rechner-btn:hover { background: var(--g600) !important; }
.calc-badge { border-radius: 999px !important; }
.badge-blue  { background: var(--g500) !important; }
.badge-green { background: var(--g400) !important; }

/* ── Features / Trust ─────────────────────────────────────── */
.feature-card, .trust-card {
  background: #fff !important;
  border: 1.5px solid var(--bdr) !important;
  box-shadow: var(--sh-sm) !important;
  border-radius: var(--radius) !important;
}
.feature-card:hover, .trust-card:hover {
  border-color: var(--bdr-g) !important;
  box-shadow: var(--sh-md) !important;
}
.feature-icon {
  background: linear-gradient(135deg, var(--g600), var(--g500)) !important;
  box-shadow: 0 4px 16px rgba(61,154,102,.28) !important;
}
.feature-icon i {
  color: #fff !important;
  font-size: 1.5rem !important;
}

/* ── Pricing ──────────────────────────────────────────────── */
.plan-card {
  background: #fff !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-sm) !important;
}
.plan-card.featured {
  background: var(--g900) !important;
  border-color: var(--g500) !important;
  box-shadow: var(--sh-lg) !important;
}
.plan-badge { background: var(--g500) !important; color: #fff !important; border-radius: 999px !important; }
.plan-card.featured .plan-price,
.plan-card.featured .plan-title,
.plan-card.featured .plan-desc,
.plan-card.featured li { color: rgba(255,255,255,.85) !important; }
.plan-card.featured .plan-price strong { color: #fff !important; }
.plan-check { color: var(--g400) !important; }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-card, .faq-item { border-color: var(--bdr) !important; }
.faq-card:hover { border-color: var(--bdr-g) !important; }
.faq-icon { background: var(--g50) !important; color: var(--g600) !important; }
.faq-toggle-icon { color: var(--g500) !important; }
.faq-link { color: var(--g700) !important; }
.faq-link:hover { color: var(--g500) !important; }

/* ── Blog ─────────────────────────────────────────────────── */
.blog-card, .article-card {
  background: #fff !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-sm) !important;
}
.blog-card:hover, .article-card:hover { border-color: var(--bdr-g) !important; box-shadow: var(--sh-md) !important; transform: translateY(-2px) !important; }
.blog-category, .article-tag { background: var(--g50) !important; color: var(--g700) !important; border-radius: 999px !important; }
.read-more { color: var(--g600) !important; }

/* ── Forms ────────────────────────────────────────────────── */
.form-card { box-shadow: 0 20px 50px rgba(13,35,24,.12) !important; border-radius: var(--radius) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--g500) !important;
  box-shadow: 0 0 0 3px rgba(61,154,102,.14) !important;
}
input[type="checkbox"] { accent-color: var(--g500) !important; }

/* ── CTA Panel ────────────────────────────────────────────── */
.cta-panel {
  background: linear-gradient(135deg, var(--g900) 0%, var(--g800) 100%) !important;
  border-radius: var(--radius) !important;
  color: #fff !important;
}
.cta-panel h2, .cta-panel p { color: rgba(255,255,255,.9) !important; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--g900) !important;
  color: rgba(255,255,255,.6) !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
.footer strong,
.footer .footer-logo { color: var(--mint) !important; font-family: 'Playfair Display', serif !important; }
.footer a { color: rgba(255,255,255,.5) !important; transition: color .2s !important; }
.footer a:hover { color: #fff !important; }
.footer-links { border-color: rgba(255,255,255,.08) !important; }

/* ── Glossar ──────────────────────────────────────────────── */
.glossary-letter { color: var(--g600) !important; border-bottom-color: var(--g100) !important; }
.glossary-item { border-color: var(--bdr) !important; }
.glossary-term { color: var(--t-h) !important; font-family: 'Playfair Display', serif !important; }

/* ── Trust Block (v5) ─────────────────────────────────────── */
.trust-card-v5 {
  background: #fff;
  border: 1.5px solid var(--bdr);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .22s, border-color .22s;
}
.trust-card-v5:hover { box-shadow: var(--sh-md); border-color: var(--bdr-g); }
.trust-icon-v5 {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--g50); display: flex;
  align-items: center; justify-content: center; font-size: 1.25rem;
}
.trust-tag-v5 {
  display: inline-block; margin-top: 4px;
  font-size: .74rem; font-weight: 700;
  color: var(--g700); background: var(--g50);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--g100);
}

/* ── Footer Badges ────────────────────────────────────────── */
.hero-badge-bar {
  background: #fff;
  border-bottom: 1px solid var(--bdr);
  padding: 14px 0;
}
.hero-badge-bar .container {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 600; color: var(--t-m);
}
.hero-badge .badge-check { color: var(--g500); }

/* ── Legal Disclaimer ─────────────────────────────────────── */
.legal-disclaimer {
  font-size: .76rem; color: rgba(255,255,255,.35);
  line-height: 1.55; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 12px;
}
.legal-disclaimer strong { color: rgba(255,255,255,.5); }

/* ── Comparison bars ──────────────────────────────────────── */
.comparison-bar { border-color: var(--bdr) !important; }
.bar-fill { background: var(--g500) !important; }

/* ── Process steps ────────────────────────────────────────── */
.step-number {
  background: var(--g50) !important; color: var(--g700) !important;
  border: 2px solid var(--g400) !important;
  font-family: 'Playfair Display', serif !important;
}

/* ── Calendar ─────────────────────────────────────────────── */
.calendar-card, .month-card {
  background: #fff !important;
  border: 1.5px solid var(--bdr) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--sh-sm) !important;
}
.calendar-card:hover { border-color: var(--bdr-g) !important; box-shadow: var(--sh-md) !important; }

/* ── App Preview ──────────────────────────────────────────── */
.preview-card, .app-card { border-color: var(--bdr) !important; }
.preview-tab { color: var(--t-m) !important; }
.preview-tab.active { color: var(--g700) !important; border-bottom-color: var(--g500) !important; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .u-lsw { display: none; }
}

/* ── FAQ Hub cards ──────────────────────── */
.feature-title {
  color: var(--g900) !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.feature-card {
  text-decoration: none !important;
  color: var(--t-b) !important;
}
.feature-card * { text-decoration: none !important; }
.feature-description {
  color: var(--t-m) !important;
  font-size: .9rem !important;
}
.feature-card:hover .feature-icon {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(61,154,102,.38) !important;
}
/* Fix secondary color gradient (was cyan, now green) */
.feature-card::before {
  background: linear-gradient(90deg, var(--g400), var(--mint)) !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM – Vollständig für alle Geräte
   Mobile (320px) · Phone (480px) · Tablet (768px)
   iPad (1024px) · Notebook (1280px) · Desktop (1440px+)
   ══════════════════════════════════════════════════════════════ */

/* ── Fluid Container ───────────────────────────────────────── */
:root {
  --container:   1440px;   /* War 1200px – jetzt volle Breite */
  --pad-x:       5%;       /* Seitenabstand relativ */
  --pad-x-lg:    6%;
}

/* Grundregel: Container nutzt volle Breite minus Padding */
.container {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
  box-sizing: border-box !important;
}

/* Sections: immer volle Breite */
.section,
section {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Navbar: volle Breite ──────────────────────────────────── */
.navbar {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}
.navbar .container {
  max-width: 1440px !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
}

/* ── Hero: volle Breite ────────────────────────────────────── */
.hero {
  width: 100% !important;
  padding-left: var(--pad-x) !important;
  padding-right: var(--pad-x) !important;
  box-sizing: border-box !important;
}

/* ── Grids: fluid ──────────────────────────────────────────── */
.kpi-grid,
.kzg,
.rechner-grid,
.calculator-grid,
.calc-grid,
.rg,
.feature-grid,
.fg,
.calendar-grid,
.kg,
.preview-grid,
.pricing-grid,
.prg,
.trust-grid,
.faq-grid,
.benefits-grid {
  width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════
   GROSSE BILDSCHIRME: 1441px – 2560px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1441px) {
  :root { --pad-x: 7%; }

  .container {
    max-width: 1600px !important;
  }

  /* Mehr Spalten auf Ultra-Wide */
  .kpi-grid,
  .kzg        { grid-template-columns: repeat(6, 1fr) !important; }
  .rechner-grid,
  .rg         { grid-template-columns: repeat(4, 1fr) !important; }
  .feature-grid,
  .fg         { grid-template-columns: repeat(3, 1fr) !important; }
  .pricing-grid,
  .prg        { grid-template-columns: repeat(3, 1fr) !important; max-width: none !important; }
  .benefits-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Schriften skalieren */
  .section-title,
  h2.section-title { font-size: clamp(2rem, 2.8vw, 3.2rem) !important; }
  h1               { font-size: clamp(2.5rem, 3.5vw, 4rem)  !important; }
}

/* ══════════════════════════════════════════════════════════════
   NOTEBOOK / DESKTOP: 1280px – 1440px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1440px) {
  :root { --pad-x: 5.5%; }
  .container { max-width: 1360px !important; }
}

/* ══════════════════════════════════════════════════════════════
   STANDARD DESKTOP: 1025px – 1279px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1279px) {
  :root { --pad-x: 4%; }
  .container { max-width: 100% !important; }

  .kpi-grid,
  .kzg        { grid-template-columns: repeat(3, 1fr) !important; }
  .rechner-grid,
  .rg         { grid-template-columns: repeat(3, 1fr) !important; }
  .pricing-grid,
  .prg        { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════════
   IPAD / TABLET: 769px – 1024px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --pad-x: 4%; }
  .container { max-width: 100% !important; }

  /* Nav: kompakt aber sichtbar */
  .nav-links         { gap: 12px !important; }
  .nav-link          { font-size: .82rem !important; }

  /* Hero: 2 Spalten mit weniger Höhe */
  .hero-grid,
  .hero              { grid-template-columns: 1fr 1fr !important; gap: 24px !important; padding-top: 100px !important; }

  /* Grids: 2 Spalten */
  .kpi-grid,
  .kzg               { grid-template-columns: repeat(2, 1fr) !important; }
  .rechner-grid,
  .rg                { grid-template-columns: repeat(2, 1fr) !important; }
  .calculator-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .feature-grid,
  .fg                { grid-template-columns: repeat(2, 1fr) !important; }
  .trust-grid        { grid-template-columns: repeat(2, 1fr) !important; }
  .benefits-grid     { grid-template-columns: repeat(2, 1fr) !important; }
  .calendar-grid,
  .kg                { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing: 1 Spalte (zu eng für 3) */
  .pricing-grid,
  .prg               { grid-template-columns: 1fr !important; max-width: 480px !important; margin: 0 auto !important; }

  /* Section padding reduzieren */
  .section           { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Schriften */
  .section-title,
  h2.section-title   { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
  h1                 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
}

/* ══════════════════════════════════════════════════════════════
   SMARTPHONE LANDSCAPE / KLEINES TABLET: 481px – 768px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
  :root { --pad-x: 5%; }
  .container { max-width: 100% !important; }

  /* Nav: hamburger */
  .nav-links { display: none; }
  .nav-toggle,
  .hbg       { display: flex !important; }
  .nav-menu.open,
  .mobnav.open { display: block !important; }

  /* Hero: 1 Spalte */
  .hero-grid,
  .hero       { grid-template-columns: 1fr !important; padding-top: 90px !important; min-height: auto !important; }

  /* Grids: 2 Spalten */
  .kpi-grid,
  .kzg        { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .rechner-grid,
  .rg         { grid-template-columns: repeat(2, 1fr) !important; }
  .feature-grid,
  .fg         { grid-template-columns: repeat(2, 1fr) !important; }
  .calendar-grid,
  .kg         { grid-template-columns: repeat(2, 1fr) !important; }
  .pricing-grid,
  .prg        { grid-template-columns: 1fr !important; }
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Section */
  .section    { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Schriften */
  h1          { font-size: clamp(1.6rem, 5vw, 2.2rem) !important; }
  .section-title { font-size: clamp(1.4rem, 4vw, 1.9rem) !important; }

  /* Pricing cards: nebeneinander */
  .plan-card  { padding: 24px 20px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE: 320px – 480px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --pad-x: 4%; }
  .container { max-width: 100% !important; padding-left: 16px !important; padding-right: 16px !important; }

  /* Nav */
  .nav-links { display: none !important; }
  .nav-toggle,
  .hbg       { display: flex !important; }
  .u-lsw     { display: none !important; } /* Lang-switcher im Mob-Menu */

  /* Hero: 1 Spalte, kompakt */
  .hero-grid,
  .hero         { grid-template-columns: 1fr !important; padding: 80px 16px 40px !important; min-height: auto !important; }
  .hero h1      { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  .hero p       { font-size: .95rem !important; }
  .hero-actions,
  .crow         { flex-direction: column !important; gap: 10px !important; }
  .hero-actions a,
  .crow a,
  .btn-primary,
  .btn-secondary { width: 100% !important; text-align: center !important; justify-content: center !important; }

  /* Alle Grids: 1 Spalte */
  .kpi-grid,
  .kzg,
  .rechner-grid,
  .rg,
  .calculator-grid,
  .feature-grid,
  .fg,
  .calendar-grid,
  .kg,
  .pricing-grid,
  .prg,
  .trust-grid,
  .preview-grid,
  .faq-grid,
  .benefits-grid,
  .hero-kz,
  [class*="grid"] { grid-template-columns: 1fr !important; }

  /* Prozess-Schritte: gestapelt */
  .ps,
  .steps-grid    { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ps::before    { display: none !important; }

  /* Section */
  .section       { padding-top: 40px !important; padding-bottom: 40px !important; }
  .section-header { margin-bottom: 24px !important; }

  /* Schriften */
  h1             { font-size: clamp(1.4rem, 7vw, 1.8rem) !important; }
  .section-title { font-size: clamp(1.3rem, 6vw, 1.7rem) !important; }
  .section-subtitle { font-size: .9rem !important; }

  /* Pricing: 1 Spalte */
  .plan-card     { padding: 20px 16px !important; }
  .plan-price    { font-size: 2rem !important; }

  /* Hero KPI cards: 2 Spalten auf kleinen Phones */
  .hero-kz       { grid-template-columns: 1fr 1fr !important; }
  .hero-metrics,
  .pills         { flex-direction: column !important; gap: 8px !important; }

  /* KPI values */
  .kpi-value,
  .kzv           { font-size: 1.5rem !important; }

  /* CTA buttons: volle Breite */
  .cta-row       { flex-direction: column !important; gap: 10px !important; }
  .cta-row a,
  .cta-panel .btn-primary,
  .cta-panel .btn-secondary { width: 100% !important; text-align: center !important; }

  /* FAQ: volle Breite */
  .faq-list,
  .faq-l        { width: 100% !important; }

  /* Footer */
  .footer-row,
  .ftg          { flex-direction: column !important; gap: 24px !important; }

  /* Form: volle Breite */
  .form-card    { padding: 24px 16px !important; margin: 0 !important; border-radius: 12px !important; }

  /* Nav mobile: Logo kleiner */
  .logo-text    { font-size: 1.2rem !important; }
}

/* ══════════════════════════════════════════════════════════════
   ALLGEMEIN: Fluid Typography & Touch-Targets
   ══════════════════════════════════════════════════════════════ */

/* Buttons: Touch-freundlich (min 44px) */
.btn-primary, .btn-secondary, .btn-nav, .btn-p, .btn-g,
.cta-button, .rechner-btn, .btn-submit,
button { min-height: 44px !important; }

/* Bilder: immer responsiv */
img { max-width: 100% !important; height: auto !important; }

/* Overflow verhindern */
body { overflow-x: hidden !important; }

/* Section-Header: nie breiter als der Bildschirm */
.section-header { max-width: min(760px, 90%) !important; }

/* Rechner-Grid Karten: min. 280px Breite */
.rechner-card,
.calc-card  {
  min-width: 0 !important;
  width: 100% !important;
}

/* Verhindern dass Texte überlaufen */
h1, h2, h3, p { overflow-wrap: break-word !important; word-break: break-word !important; }

/* Feature-Icon auf kleinen Geräten */
@media (max-width: 480px) {
  .feature-icon,
  .fi { width: 48px !important; height: 48px !important; font-size: 1rem !important; }
  .benefit-card .icon { width: 40px !important; height: 40px !important; }
}