/* =====================================================================
   ERPLight Unterseiten — Design-Schicht im Stil der neuen Startseite (Musterseiten 27.10.2026)
   Liegt NACH dem bisherigen Stil-Code der Seite (der bleibt für das Layout der Bausteine) und stellt die
   Designsprache um: Grundwerte (Flächen, Radien, Schatten, kein Verlauf), Kopfzeile der Startseite, Hero,
   Etiketten, Karten, FAQ, «Verwandte Themen», Schluss-Banner. Ruhig: keine Verläufe, keine bunten Symbole,
   keine Einblend-Animationen. Farben wie public/landing.html (Indigo #4f46e5, Text #0f172a / #475569).
   ===================================================================== */
:root {
  --bg-soft: #f8fafc;
  --bg-glass: rgba(255, 255, 255, 0.8);
  --primary-light: #eef2ff;
  --primary-soft: #eef2ff;
  --primary-line: #c7d2fe;
  --primary-gradient: #4f46e5;
  --link: #4f46e5;
  --accent: #6366f1;
  --hairline: rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.14);
  --shadow-lg: 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 48px -24px rgba(15, 23, 42, 0.22);
  --shadow-xl: var(--shadow-lg);
  --shadow-glow: none;
  --shadow-btn: 0 1px 2px rgba(15, 23, 42, 0.12), 0 6px 16px -6px rgba(79, 70, 229, 0.5);
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --gutter: clamp(16px, 4vw, 32px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-soft: #0f172a;
    --bg-glass: rgba(11, 17, 32, 0.8);
    --primary-light: rgba(99, 102, 241, 0.16);
    --primary-soft: rgba(99, 102, 241, 0.16);
    --primary-line: rgba(129, 140, 248, 0.42);
    --primary-gradient: #4f46e5;
    --link: #a5b4fc;
    --accent: #818cf8;
    --hairline: rgba(148, 163, 184, 0.16);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.4), 0 30px 60px -30px rgba(0, 0, 0, 0.75);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -6px rgba(99, 102, 241, 0.6);
  }
}
.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Keine Einblend-Animationen: alles sofort sichtbar — auch ohne JavaScript und bei «weniger Bewegung» */
.animate-on-scroll, .animate-fade-up { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }

/* ---------- Knöpfe wie in der App (12 px Radius, ruhiger Schein beim Hauptknopf) ---------- */
.btn { min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: 12px; font-size: 0.9375rem; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25; gap: 8px; text-align: center; transition: background-color 0.2s var(--ease), border-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.btn-large { min-height: 52px; padding: 12px 26px; border-radius: 14px; font-size: 1.0625rem; }
.btn-small { min-height: 38px; padding: 8px 16px; border-radius: 10px; }
.btn-primary, .btn-primary:visited { background: #4f46e5; color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { background: #4338ca; color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-btn); }
.btn-primary::after, .btn-primary::before { display: none; }
.btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); box-shadow: none; }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-hover); color: var(--text-primary); transform: none; }
.btn-ghost { background: transparent; color: var(--text-secondary); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn svg { flex-shrink: 0; }

/* ---------- Kopfzeile der Startseite (Logo · Features Preise FAQ · Anmelden, Kostenlos starten · ☰) ---------- */
/* Kopfzeile klebt oben: overflow-x: hidden auf html/body (fast alle Unterseiten) machte body zum Scroll-Behälter → sticky
   griff nicht. clip schneidet genauso ab (kein Querscrollen), ohne Scroll-Behälter */
html, body { overflow-x: clip; }
header.nav { position: sticky; top: 0; left: auto; right: auto; z-index: 100; padding: 0; background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; box-shadow: none; transition: border-color 0.3s var(--ease); }
header.nav.scrolled { border-bottom-color: var(--hairline); }
header.nav .nav-container { max-width: calc(1200px + 2 * var(--gutter)); height: 64px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
header.nav .nav-logo { justify-self: start; font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; }
.nav-logo .erp { color: var(--text-primary); }
.nav-logo .light { color: var(--link); }
header.nav .nav-links { display: flex; gap: 32px; }
header.nav .nav-link { padding: 8px 2px; color: var(--text-secondary); font-size: 0.9375rem; font-weight: 500; text-decoration: none; }
header.nav .nav-link:hover { color: var(--text-primary); }
header.nav .nav-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
header.nav .mobile-menu-btn { display: none; position: static; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0;
  border-radius: 12px; background: transparent; color: var(--text-primary); cursor: pointer; }
header.nav .mobile-menu-btn:hover { background: var(--bg-hover); }
header.nav .mobile-menu-btn .i { width: 22px; height: 22px; }
header.nav .mobile-menu-btn .zu, header.nav .mobile-menu-btn[aria-expanded="true"] .auf { display: none; }
header.nav .mobile-menu-btn[aria-expanded="true"] .zu { display: block; }
header.nav .mobile-menu { position: static; inset: auto; width: auto; height: auto; transform: none; visibility: visible; opacity: 1;
  padding: 4px var(--gutter) 20px; background: var(--bg-body); border-top: 1px solid var(--hairline); box-shadow: none; overflow: visible; }
header.nav .mobile-menu[hidden] { display: none; }
header.nav .mobile-menu-link { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0; background: none; color: var(--text-primary); font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
header.nav .mobile-menu-link .i { width: 18px; height: 18px; color: var(--text-muted); }
header.nav .mobile-menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
@media (max-width: 820px) {
  header.nav .nav-container { height: 56px; grid-template-columns: 1fr auto; gap: 8px; }
  header.nav .nav-links, header.nav .desktop-only { display: none; }
  header.nav .mobile-menu-btn { display: inline-flex; margin-right: -8px; }
  header.nav .nav-actions .btn-small { min-height: 36px; padding: 6px 14px; font-size: 0.875rem; }
}
@media (min-width: 821px) { header.nav .mobile-menu { display: none !important; } }

/* Die alte Kopfzeile war «fixed» — Breadcrumb und Hero hielten dafür 4–5rem frei; die neue läuft im Fluss mit */
.breadcrumb { margin-top: 0; padding-top: 14px; background: transparent; border-bottom: 0; }
.breadcrumb-list { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; font-size: 0.8125rem; color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-primary); }
.freshness-badge { padding: 0; margin-top: 6px; background: none; border: 0; border-radius: 0; color: var(--text-muted); font-size: 0.8125rem; }
@media (max-width: 768px) { .breadcrumb { margin-top: 0; padding-top: 10px; } .breadcrumb-list { padding: 0; } .freshness-badge { font-size: 0.75rem; padding: 0; } }

/* ---------- Hero: ruhig, ohne Verlauf; zweite Titelzeile einfarbig in der Akzentfarbe ---------- */
.hero { background: transparent; }
.hero-bg { display: none; }
.hero-badge { background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-secondary); font-weight: 500; box-shadow: none; }
.hero-badge svg { color: var(--link); flex-shrink: 0; }
.hero-title, .hero h1, .hero-hub h1 { font-weight: 700; letter-spacing: -0.04em; line-height: 1.08; text-wrap: balance; }
.gradient-text, .hero h1 .highlight, .hero-title .highlight {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--link); }
.hero-subtitle { color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.trust-item svg, .hero-trust-item svg { color: var(--success); }

/* ---------- Abschnitts-Kopf: Etikett als farbiger Text (wie «Features»), Titel kräftig, ohne Pille ---------- */
.section-badge, .section-tag { display: block; width: auto; margin: 0 0 10px; padding: 0; background: none; border: 0; border-radius: 0;
  color: var(--link); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.section-header h2, .section-title { font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; text-wrap: balance; }
.section-header p, .section-subtitle { color: var(--text-secondary); }

/* ---------- Antwort-Box und «Gut zu wissen»: ruhige Fläche statt Farbbalken ---------- */
.intro-answer { background: var(--bg-soft); border: 1px solid var(--hairline); border-left: 1px solid var(--hairline); border-radius: var(--radius-xl); box-shadow: none; }
.fact-highlight { background: var(--bg-surface); border: 1px solid var(--border-color); border-left: 1px solid var(--border-color); border-radius: 14px; }
.fact-highlight strong { color: var(--link); }

/* ---------- Karten: hellgraue Kachel, Haarlinie, kein Schweben ---------- */
.feature-card, .step-card, .mistake-card, .info-card, .card, .checklist-item, .content-block, .pricing-card, .step {
  border-radius: var(--radius-xl); box-shadow: none; }
.feature-card, .step-card, .mistake-card, .info-card { background: var(--bg-soft); border: 1px solid var(--hairline); }
.feature-card:hover, .step-card:hover, .mistake-card:hover, .info-card:hover, .card:hover, .checklist-item:hover, .pricing-card:hover {
  transform: none; box-shadow: none; }
.feature-card h3, .step-card h3, .mistake-card h3, .info-card h3 { font-weight: 650; letter-spacing: -0.02em; }
/* Symbole einheitlich in Indigo (vorher grün, blau, orange, pink …) */
.feature-icon, .feature-icon.green, .feature-icon.blue, .feature-icon.purple, .feature-icon.orange, .feature-icon.pink, .feature-icon.teal,
.feature-icon.red, .feature-icon.yellow, .info-card-icon, .form-section-icon {
  background: var(--primary-soft); color: var(--link); border-radius: 14px; box-shadow: none; }
.step-number, .checklist-number, .qg-step-num { background: var(--primary-soft); color: var(--link); box-shadow: none; }
.step-number svg, .checklist-number svg { stroke: currentColor; }
.form-section .form-section-icon, .form-section-header .form-section-icon { background: var(--primary-soft); color: var(--link); }
.mistake-icon { background: var(--danger-bg, #fef2f2); color: #b91c1c; box-shadow: none; }
@media (prefers-color-scheme: dark) { .mistake-icon { background: rgba(239, 68, 68, 0.16); color: #fca5a5; } }

/* ---------- FAQ: ruhige Liste mit Trennlinien (wie die Startseite), nichts eingerahmt ---------- */
.faq-grid, .faq-list { display: block; max-width: 800px; margin-left: auto; margin-right: auto; border-top: 1px solid var(--border-color); }
.faq-item { margin: 0; background: none; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; box-shadow: none; }
.faq-item:hover, .faq-item.active { background: none; border-color: var(--border-color); box-shadow: none; }
.faq-question { padding: 20px 4px; gap: 16px; background: none; font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.faq-question:hover { background: none; color: var(--link); }
.faq-icon, .faq-question svg { color: var(--text-muted); flex-shrink: 0; }
.faq-answer { background: none; }
.faq-answer p, .faq-answer-content { color: var(--text-secondary); }

/* ---------- Verwandte Themen: Strich-Symbol in Indigo-Kachel statt Emoji ---------- */
.related-topics { background: var(--bg-body); }
.related-topics { padding: clamp(40px, 5vw, 64px) 0; }
.related-topics:not(:has(.container)), .related-topics > .container { padding-left: var(--gutter); padding-right: var(--gutter); }
.related-topics h2 { margin: 0 0 1.75rem; padding-top: 0; border-top: 0; text-align: center; font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.related-link { display: flex; align-items: center; text-decoration: none; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-surface);
  color: var(--text-primary); font-weight: 500; box-shadow: none; transform: none; }
.related-link:hover { border-color: var(--primary-line); background: var(--primary-soft); color: var(--text-primary); transform: none; box-shadow: none; }
.related-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--link); font-size: 17px; }
.related-icon .i { width: 17px; height: 17px; }
@media (prefers-color-scheme: dark) { .related-topics { background: var(--bg-body); } .related-link { background: var(--bg-surface); } }

/* ---------- Schluss: ruhige helle Fläche statt Farbverlauf-Banner (wie «Weniger Papierkram») ---------- */
.cta-section { background: var(--bg-soft); }
.cta-card, .cta-box { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; overflow: visible; }
.cta-card::before, .cta-card::after, .cta-section::before, .cta-section::after, .hero::before, footer.footer::before, .usecase-card::before { display: none; }
.usecase-card:hover { transform: none; box-shadow: none; }
.cta-card h2, .cta-content h2, .cta-section h2 { color: var(--text-primary); font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; text-wrap: balance; }
.cta-card p, .cta-content p, .cta-section p { color: var(--text-secondary); }
.cta-card .btn-primary, .cta-section .btn-primary { background: #4f46e5; color: #fff; border-color: transparent; }
.cta-card .btn-primary:hover, .cta-section .btn-primary:hover { background: #4338ca; color: #fff; }
.cta-card .btn-secondary, .cta-section .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); }
.cta-card .btn-secondary:hover, .cta-section .btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }

/* ---------- Formulare (Generatoren): Eingabefelder wie in der App ---------- */
.form-group input, .form-group select, .form-group textarea, .generator-form input, .generator-form select, .generator-form textarea {
  border: 1.5px solid var(--border-color); border-radius: 10px; background-color: var(--bg-surface); color: var(--text-primary); box-shadow: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .generator-form input:focus, .generator-form select:focus, .generator-form textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); }
.pricing-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Bank-Seiten: der Generator-Rahmen war nirgends begrenzt — am Desktop klebte das Formular am linken Rand (Fund 27.10.) */
.generator-section > .container { max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.iban-box { background: var(--bg-soft); border: 1px solid var(--border-color); border-radius: var(--radius-xl); }
.iban-box h3 { color: var(--text-primary); margin-top: 0; }
.iban-box .iban-value { margin-left: auto; text-wrap: balance; }
/* Überschriften eine Stufe höher (Reihenfolge für Bildschirmleser), Grösse wie vorher */
.hero-visual > h2 { margin-bottom: 1.5rem; font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: normal; color: var(--text-primary); }
.step-content h3 { margin-bottom: 0.25rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
.pricing-card h3 { margin-bottom: 0.5rem; font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: normal; }
.bank-link { border-radius: 10px; box-shadow: none; }
.bank-link:hover { transform: none; box-shadow: none; }

/* =====================================================================
   Alle Unterseiten-Familien (Umstellung 27.10.2026): Ratgeber, Werkzeuge, Bank, Vergleich, Übersichten
   ===================================================================== */

/* Grundwerte für Seiten ohne eigene (Support, Datenschutz, AGB, englische Seiten) — :where() hat Gewicht 0,
   die Werte einer Seite gewinnen also immer */
:where(:root) {
  --bg-body: #ffffff; --bg-surface: #ffffff; --bg-hover: #f1f5f9; --border-color: #e2e8f0; --border-hover: #cbd5e1;
  --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #5c6978; --primary: #4f46e5; --success: #10b981;
}
@media (prefers-color-scheme: dark) {
  :where(:root) {
    --bg-body: #0b1120; --bg-surface: #1e293b; --bg-hover: #334155; --border-color: #334155; --border-hover: #475569;
    --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --primary: #818cf8;
  }
}

/* Ruhe: keine Dauer-Animationen (Pulsieren, Leuchten, Glitzern, Schweben, Einblenden) — nützliche bleiben:
   Scroll-Hinweis bei Tabellen, Lade-Kreisel, Häkchen nach dem PDF */
.hero-visual, .hero-mockup, .vs-card, .price-item, .software-card, .comparison-card, .comparison-card:hover, .why-visual,
.btn-glow, .btn-glow:hover, .cta-icon, .floating-card, .qg-cta-pulse, .live-dot { animation: none; }
.hero-badge::after, .btn-primary::before, .underline-animated::after, .animated-bg { display: none; }
.hero h1, .hero-badge, .hero-cta, .hero-demo, .hero-stats, .hero-subtitle { animation: none; opacity: 1; transform: none; }
/* Demo-Seite: Einblenden beim Scrollen aus, alles sofort sichtbar */
.reveal, .trust-item, .step-card, .benefit-card, .comparison-table, .faq-item { opacity: 1; transform: none; }
.reveal { transition: none; }
.btn-glow, .btn-glow:hover { box-shadow: var(--shadow-btn); }
.hero-visual, .hero-mockup, .why-visual { box-shadow: var(--shadow-md); }
.vs-card.erplight, .price-item.highlight, .software-card.featured, .pricing-card.featured, .pricing-card.recommended, .direction-card.active {
  box-shadow: none; border-color: var(--link); animation: none; }
.store-btn:hover, .usecase-badge, .cta-box-button, .cta-box-button:hover { box-shadow: none; }

/* Verlaufs-Schrift → einfarbig (Übersicht QR-Rechnung, Demo, Logo der Demo-Seite) */
.hero-hub h1 .highlight, .section-title .highlight, .cta-box-title .highlight, .comparison-logo.erplight, header.nav .nav-logo .light, .footer-logo .light {
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--link); }

/* Flächen ohne Verlauf */
footer.footer { background: var(--bg-soft); border-top: 1px solid var(--hairline); }
.footer-divider { background: var(--hairline); }
.breadcrumb-current { background: none; border: 0; padding: 0; box-shadow: none; color: var(--text-primary); }
.why-section, .usecases-section { background: var(--bg-body); }
.qr-info-content { background: var(--bg-soft); border-color: var(--hairline); }
.qg-cta { background: var(--bg-soft); border-color: var(--hairline); box-shadow: none; }
.comparison-table th.highlight-col { background: var(--primary-soft); }
.comparison-table td.highlight-col { background: rgba(79, 70, 229, 0.04); }
.comparison-table th.highlight-col::after { display: none; }
.usecase-highlight { background: #ecfdf5; }
.usecase-highlight.pro { background: var(--primary-soft); }
.sidebar-avatar { background: var(--primary); }
.cta-box-button { background: #4f46e5; color: #fff; }
.cta-box-button:hover { background: #4338ca; color: #fff; }

/* Symbol-Kacheln einheitlich: Indigo-Strich auf zartem Indigo (vorher grün, blau, lila, orange, Verläufe).
   Mit Bedeutung bleiben farbig: Fehler-Karten (rot), MWST-Grenze befreit/pflichtig (grün/gelb). */
.reason-icon[class], .need-icon, .tip-icon, .benefit-icon, .card-icon, .usecase-icon, .usecase-card:hover .usecase-icon,
.template-icon, .bank-hub-icon, .cta-icon, .qg-cta-icon, .specific-icon[class], .special-icon[class], .stat-card-mini .stat-icon[class],
.category-header[class] .category-icon, .comparison-header[class] .comparison-icon, .method-icon[class], .form-section-icon[class], .bqg .form-section-icon[class] {
  background: var(--primary-soft); color: var(--link); box-shadow: none; }
.usecase-icon svg, .usecase-card:hover .usecase-icon svg, .bank-hub-icon svg, .cta-icon svg, .template-icon svg { color: var(--link); stroke: currentColor; }
.template-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-left: auto; margin-right: auto; border-radius: 14px; font-size: 0; }
.template-icon .i { width: 24px; height: 24px; }
/* Schritt-Symbol: nur Indigo-Strich (auf manchen Seiten ungestaltete Box — ein Kachel-Grund würde zum breiten Streifen) */
.step-icon { color: var(--link); }

/* Vorher fest eingefärbte Symbole (Preisstufen, Anwendungsfälle, Tipps im Fehler-Karten-Look; .tipps-icon setzt Grün mit !important) */
.symbol-neutral, .mistake-icon.symbol-neutral { background: var(--primary-soft); color: var(--link); }
.mistake-icon.tipps-icon { background: var(--primary-soft) !important; color: var(--link) !important; }

/* Einfache Seiten (Support, Datenschutz, AGB, englische Seiten): Kopfzeile nur mit Logo (+ «erplight.ch»), eigene Farbwerte
   der Seiten auf die Startseite abgestimmt; Schrift Inter, wo vorhanden — sonst Systemschrift (keine neue Google-Anfrage) */
header.nav.nav-einfach .nav-container { display: flex; align-items: center; justify-content: space-between; }
body.seite-einfach { --bg: #ffffff; --bg-card: #f8fafc; --text: #0f172a; --text-muted: #5c6978; --border: #e2e8f0; --accent: #4f46e5; --link: #4f46e5;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
.seite-einfach .contact-card, .seite-einfach .address-block, .seite-einfach .info-card { border-radius: var(--radius-xl); border-color: var(--hairline); background: var(--bg-soft); }
.seite-einfach .info-card .icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 12px;
  background: var(--primary-soft); color: var(--link); font-size: 20px; }
@media (prefers-color-scheme: dark) {
  body.seite-einfach { --bg: #0b1120; --bg-card: #0f172a; --text: #f8fafc; --text-muted: #94a3b8; --border: #334155; --accent: #a5b4fc; --link: #a5b4fc; }
}

/* Store-Knöpfe der Browser-Erweiterung (englische Seite) wie auf «IBAN prüfen»: Umriss-Knöpfe statt Markenfarben */
.btn-chrome, .btn-edge, .btn-workspace { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: none; }
.btn-chrome:hover, .btn-edge:hover, .btn-workspace:hover { border-color: var(--link); color: var(--link); transform: none; box-shadow: none; }

/* Schloss vor den Datenschutz-Hinweisen, Vorteile der Browser-Erweiterung */
.i-text { vertical-align: -0.14em; margin-right: 0.3em; color: var(--text-muted); }
.ext-feature-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 8px;
  background: var(--primary-soft); color: var(--link); vertical-align: middle; }
.ext-feature-icon .i { width: 16px; height: 16px; }

/* ---------- Kontrast ≥ 4.5 (axe, Fund 27.10. — auch auf den heutigen Seiten): Marken, Generator-Knopf, Rechtstext-Fenster ---------- */
.badge-yes { background: #ecfdf5; color: #047857; }
.badge-no { background: #fef2f2; color: #b91c1c; }
.footer-badge.swiss { background: #fef2f2; color: #b91c1c; }
.footer-badge.dsgvo { background: #ecfdf5; color: #047857; }
.bqg .btn-primary, .bqg .cta-card .btn-primary { background: #4f46e5; color: #fff; }
.bqg .btn-primary:hover, .bqg .cta-card .btn-primary:hover { background: #4338ca; color: #fff; }
.bqg .cta-card { background: var(--bg-soft); border: 1px solid var(--hairline); }
.bqg .cta-card h2, .bqg .cta-card h3 { color: var(--text-primary); }
.bqg .cta-card p { color: var(--text-secondary); }

/* Kontrast ≥ 4.5 auf allen Unterseiten (axe 27.10., Umstellung): farbige Schrift auf zart gefärbtem Grund — vorher teils
   unsichtbar (Einblend-Animation) und darum nie geprüft. Rot über den Farbwert --danger (hell und dunkel getrennt). */
:root { --danger: #b91c1c; }
/* Grün/Rot/Blau-Schrift auf hellen Marken (bleiben auch im Dunkeln hell) */
.method-verdict.good, .need-card .essential.need-priority { color: #047857; }
.method-verdict.bad { color: #b91c1c; }
.need-card .important.need-priority { color: #1d4ed8; }
/* … und solche mit eigenem Dunkel (Gegenstück unten im Dunkel-Block) */
.badge-green, #preview-badge:not(.yellow):not(.orange):not(.red), .info-card-header.new .info-card-status span, .comparison-table td.yes,
.comparison-price.free, .price-cell.free, .step-time, .usecase-highlight { color: #047857; }
.comparison-cell span[style*="--success"] { color: #047857 !important; }
.preview-warning, .info-card-header.old .info-card-status span, .comparison-table td.no { color: #b91c1c; }
.pricing-badge, .recommended-badge, .method-recommended-badge, .sidebar-avatar, .btn-copy, .copy-btn { background: #4f46e5; color: #fff; }
.btn-copy:hover, .copy-btn:hover { background: #4338ca; }
.related-links a { color: var(--link); }
.seite-einfach a[style*="color:#6366f1"] { color: #4f46e5 !important; }

/* Dark Mode: Links in Abschnitten lesbar (CLAUDE.md), Knöpfe behalten Indigo mit weisser Schrift (Kontrast ≥ 4.5) */
@media (prefers-color-scheme: dark) {
  section a { color: #a5b4fc; text-decoration-color: rgba(165, 180, 252, 0.4); }
  .btn-primary, .btn-primary:visited, .cta-card .btn-primary, .cta-section .btn-primary { background: #4f46e5; color: #fff; }
  .btn-primary:hover { background: #4338ca; }
  section a.btn-primary, section a.btn-primary:visited { color: #fff; }
  section a.btn-secondary { color: var(--text-primary); }
  .badge-yes, .footer-badge.dsgvo { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
  .badge-no, .footer-badge.swiss { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
  .badge-neutral { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
  .bqg .btn-primary, .bqg .cta-card .btn-primary { background: #4f46e5; color: #fff; }
  .legal-modal a, .legal-modal-content a { color: #a5b4fc; }
  /* Kontrast im Dunkeln: Indigo-Schrift auf dunklem Indigo heller, Grün/Rot auf dunklem Grund hell, gedämpfte Schrift heller */
  :root { --danger: #f87171; }
  .comparison-table th.highlight-col, .price-item.highlight .price-item-name, .age-btn.active, .bvg-btn.active, .direction-card.active,
  .content-cta-inline a, .comparison-verdict a { color: #a5b4fc; }
  .preview-header .preview-badge:not([id]) { background: rgba(99, 102, 241, 0.16); color: #a5b4fc; }
  .badge-green, #preview-badge:not(.yellow):not(.orange):not(.red), .info-card-header.new .info-card-status span, .comparison-table td.yes,
  .comparison-price.free, .price-cell.free, .step-time { color: #6ee7b7; }
  .comparison-cell span[style*="--success"] { color: #6ee7b7 !important; }
  .preview-warning, .info-card-header.old .info-card-status span, .comparison-table td.no { color: #fca5a5; }
  .category-tags span { color: #cbd5e1; }
  .usecase-highlight { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
  .usecase-highlight.pro { background: var(--primary-soft); color: #a5b4fc; }
  .rate-examples span, .qg-opt { color: #cbd5e1; }
  .seite-einfach .subtitle, .seite-einfach .subtitle em { color: #94a3b8; }
  .seite-einfach a[style*="color:#6366f1"] { color: #a5b4fc !important; }
}
@media (prefers-reduced-motion: reduce) { .btn-primary:hover { transform: none; } }

/* ---------- Breite Tabellen am Handy: «Scrollen ➜» überall gleich und sichtbar (Raffaele 27.10.: «hier steht das Scrollen
   nicht») — vorher mal grauer Kleintext rechts, mal ein Balken, und nach dem ersten Wischen für immer weg (Seiten-Skripte
   setzen display:none). Jetzt wie auf der IBAN-Seite: Balken in Indigo direkt über der Tabelle, ruhig (ohne Wackeln). ---------- */
@media (max-width: 768px) {
  .scroll-hint { display: flex !important; align-items: center; justify-content: flex-start; gap: 0.5rem; margin: 0; padding: 0.5rem 1rem;
    background: var(--primary-light); color: var(--link); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; text-align: left;
    border-radius: 12px 12px 0 0; animation: none !important; transform: none;  }
  /* Tabelle passt ohne Querscrollen: Seiten-Skript setzt .passt am Scroll-Container → kein «Scrollen ➜» (G-13a) */
  .passt .scroll-hint { display: none !important; }
  .passt::after { opacity: 0; } /* auch kein Ausblend-Verlauf am rechten Rand */
  /* Vergleichstabelle «Generator vs. ERPLight» (13 Seiten): erste Spalte schmal, damit die zweite gleich zu sehen ist —
     vorher füllte «Feature» die ganze Breite und die anderen Spalten begannen ausserhalb */
  table.comparison-table { min-width: 500px; }
  table.comparison-table th:first-child, table.comparison-table td:first-child { width: 150px; }
  .comparison-header > div, .comparison-row > div { font-size: .75rem; }
  .badge-yes, .badge-no, .badge-neutral { font-size: .75rem; }
}
.scroll-hint *, .scroll-hint svg { animation: none !important; }
@media (min-width: 769px) { .scroll-hint { display: none !important; } }

/* =====================================================================
   Gesamtprüfung 06.11.2026 — Optik-Bericht tasks/seo-gesamtpruefung-2026-11/optik.md (Fund-Nummer in Klammern).
   Jede Regel einzeln im Testbrowser geprüft (Agent G), zusammen im Test-Branch nachgeprüft.
   ===================================================================== */

/* Native Bedienelemente (Kontrollkästchen, Auswahllisten, Datumswähler, Scrollbalken) im Dunkelmodus dunkel (G-07) */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
input[type="checkbox"], input[type="radio"] { accent-color: #4f46e5; }

/* Knöpfe und Felder in der Seitenschrift statt Arial (G-22); Sprungziele nicht unter der klebenden Kopfzeile (G-05) */
:where(button, input, select, textarea) { font-family: inherit; }
:where([id]) { scroll-margin-top: 72px; }

/* Links im Fliesstext in Indigo statt Browser-Blau, unterstrichen (G-03, G-136) — Gewicht 0, Seitenregeln gewinnen */
:where(main, section, .intro-answer, .fact-highlight) :where(a:not([class])) { color: var(--link); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
:where(main, section, .intro-answer, .fact-highlight) :where(a:not([class])):hover { text-decoration-color: currentColor; }
.info-card h3 a, .feature-card h3 a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.article-container p a, .related-links a { text-decoration: underline; text-underline-offset: 2px; }

/* Ruhige Fläche statt Farbbalken links (G-11) */
.content-cta-inline, .qg-note, .qg-abgrenzung, .expert-quote, .seite-einfach .info-box {
  background: var(--bg-soft); border: 1px solid var(--hairline); border-left: 1px solid var(--hairline); border-radius: 14px; }

/* Mehrzeilige Überschriften nicht so locker (G-12) — Gewicht 0: ersetzt nur geerbte Werte */
:where(h2) { line-height: 1.2; }
:where(h3) { line-height: 1.35; }

/* Rechtstext-Fenster: Schliessen-Knopf überall 44 px (G-16), am Handy überall gleich (G-72) */
.legal-modal-close { width: 44px; height: 44px; }
/* Rechtstext-Fenster auch am Desktop als Spalte: Kopf und Fuss («Verstanden») immer ganz sichtbar, nur der Text scrollt
   (vorher pauschal 80vh − 140px für den Text → Knopf unten 6–14 px abgeschnitten, Hinweis Raffaele 06.11.) */
.legal-modal { display: flex; flex-direction: column; }
.legal-modal-header, .legal-modal-footer { flex-shrink: 0; }
.legal-modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }

/* MWST-Grenze befreit/pflichtig: im Dunkelmodus getönt statt Pastell (G-17) */
@media (prefers-color-scheme: dark) {
  .threshold-header.exempt .threshold-icon { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
  .threshold-header.liable .threshold-icon { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
}
.feature-icon svg, .threshold-icon svg, .mistake-icon svg { stroke-linecap: round; stroke-linejoin: round; }

/* Hervorhebungen auf den Vergleichsseiten lesbar (G-46, Kontrast vorher 2.2 : 1) */
.savings-highlight, .savings-badge, .card-tag { color: #047857; }
@media (prefers-color-scheme: dark) { .savings-highlight, .savings-badge, .card-tag { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; } }
.preview-header .preview-badge:not([id]) { background: var(--primary-soft); color: #4338ca; }
@media (prefers-color-scheme: dark) { .preview-header .preview-badge:not([id]) { background: rgba(99, 102, 241, 0.16); color: #a5b4fc; } }
.rate-percent.reduced, .rate-percent.special { color: var(--link); }
.rate-examples span { font-size: .75rem; }

/* Werkzeug-Kopf ohne Halbrahmen (G-63); Schritt-Karte im Hero linksbündig wie am Desktop (G-31) */
.tool-hero .intro-answer.tool-intro { border: 0; background: none; }
.hero-visual > h2, .hero-visual .steps { text-align: left; }

/* «Letzte Aktualisierung» bündig mit Breadcrumb und Titel (G-32, vorher Inline-Stil aus add-freshness-signals.py) */
.freshness-zeile { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
/* Seiten mit Breadcrumb im .container (1200 px / 1.5rem): «Letzte Aktualisierung» bündig mit der Breadcrumb (W3b, 17 Seiten gemessen) */
body:has(.breadcrumb > .container) .freshness-zeile { max-width: 1200px; padding: 0 1.5rem; }
@media (max-width: 768px) { .freshness-zeile { padding: 0 1rem; } }

/* Tabellen ohne Leerstreifen im Rahmen (G-35); Muster-Rechnung oben bündig (G-98); 4 «Verwandte Themen» als 2 × 2 (G-33) */
.data-table-wrapper > .data-table { margin: 0; }
.data-table-scroll-container { margin: 1.5rem 0; }
.checklist-grid > .invoice-mockup { align-self: start; }
@media (min-width: 640px) { .related-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menü am Handy wie auf allen Seiten (G-30); kleine Links mit mindestens 24 px Klickfläche (G-140) */
header.nav .mobile-menu { gap: 0; }
header.nav .mobile-menu-cta .btn { padding: 10px 12px; }
.breadcrumb a, .footer-title a, .footer-bottom a, .footer-legal a { display: inline-flex; align-items: center; min-height: 24px; }

@media (max-width: 768px) {
  /* Felder mindestens 16 px — sonst zoomt Safari beim Antippen in die Seite (G-04) */
  /* :is() gibt select/textarea das Gewicht des input-Teils — sonst gewinnt z. B. .form-group select und das iPhone zoomt (W3a);
     grosse Betragsfelder (.amount-input, 20–24 px) behalten ihre Grösse (W3b) */
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.amount-input), select, textarea) { font-size: 16px; }
  /* Tippflächen (G-21) */
  .btn-copy, .copy-btn, .sg-del, .btn-remove-pos { min-height: 40px; min-width: 40px; }
  /* Rechtstext-Fenster (G-72) */
  .legal-modal { max-height: calc(100dvh - 2rem); }
  .legal-modal-title { font-size: 1rem; }
}
@media (max-width: 640px) {
  /* Hero-Knöpfe so breit wie die Inhaltsspalte (G-25) */
  .hero .hero-cta { padding-left: 0; padding-right: 0; }
}
@media (max-width: 480px) {
  /* Hero-Etikett kompakt (G-24) */
  .hero-badge { font-size: .8125rem; padding: 6px 12px; }
  /* Lange Wörter mit Trennstrich statt mitten im Wort umgebrochen oder abgeschnitten (G-19) */
  :where(h1, h2, h3, .hero-title, .section-title, .bank-link) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  /* Muster-Rechnungen der Ratgeber: Beträge nicht angeschnitten (G-101) */
  .mockup-body { padding: 1rem; }
  .mockup-row { padding: .5rem .625rem; gap: .5rem; }
  .mockup-row > span:first-child { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
  .amount-cell { min-width: 0; flex-shrink: 0; } /* nicht schrumpfen, sonst überdeckt «CHF» die Beschreibung (W6) */
}
@media (max-width: 360px) {
  /* Sehr schmale Handys / 400 % Zoom (G-19, G-45) */
  .bank-links { grid-template-columns: 1fr; }
  .bank-hub-grid { grid-template-columns: 1fr !important; }
  .hero h1, .hero-title, .cta-card h2, .cta-content h2, .cta-section h2 { font-size: 1.625rem; }
  .content-text h2 { font-size: 1.5rem; }
  .btn-large { padding-inline: 16px; font-size: 1rem; }
}