/* ==========================================================================
   CITA DESIGN SYSTEM
   Design-Tokens, Layout-Helfer und Komponenten für alle Seiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
/* ---- Brand constants (same in both themes) ---- */
:root {
  --navy:           #1B3A5C;
  --navy-dark:      #0f2338;
  --navy-90:        rgba(27, 58, 92, 0.9);
  --amber:          #C8832A;
  --amber-dark:     #a86a1e;
  --font-primary:   'Aptos', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --section-pad:    108px;
  --radius:         6px;

  /* ---- Semantic tokens: DARK (default) ---- */
  --bg-page:        #0c1a2a;
  --bg-surface:     #112240;
  --bg-surface-alt: #0f2338;
  --bg-accent:      #1a3454;
  --bg-input:       #1a3050;
  --header-bg:      rgba(12, 26, 42, 0.97);
  --footer-bg:      #060e16;

  --text-primary:   #E8ECF1;
  --text-secondary: #A8B8CC;
  --text-tertiary:  #7A8DA3;
  --text-heading:   #F1F5F9;

  --border-default: rgba(148, 163, 184, 0.15);
  --border-strong:  rgba(148, 163, 184, 0.25);

  --shadow-card:    0 2px 4px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.3);
  --shadow-header:  0 1px 12px rgba(0, 0, 0, 0.3);

  --green-accent:   #4ade80;
  --green-bg:       rgba(74, 222, 128, 0.1);
  --green-border:   rgba(74, 222, 128, 0.2);
  --green-text:     #4ade80;

  --red-accent:     #f87171;
  --red-bg:         rgba(248, 113, 113, 0.08);
  --red-border:     rgba(248, 113, 113, 0.2);

  --problem-bg:     rgba(185, 28, 28, 0.08);
  --problem-border: rgba(185, 28, 28, 0.2);
  --solution-bg:    rgba(22, 163, 74, 0.08);
  --solution-border: rgba(22, 163, 74, 0.2);

  --info-bg:        rgba(200, 131, 42, 0.1);
  --info-border:    rgba(200, 131, 42, 0.25);
  --warning-bg:     rgba(237, 208, 112, 0.1);
  --warning-border: rgba(237, 208, 112, 0.3);
  --warning-text:   #fbbf24;
  --transparency-bg:    rgba(74, 222, 128, 0.06);
  --transparency-border: rgba(74, 222, 128, 0.15);
  --transparency-text:   #4ade80;
  --transparency-ref:    #6ee7a0;
  --transparency-rule:   rgba(74, 222, 128, 0.2);

  /* ---- Backward-compat aliases (auto-switch with theme) ---- */
  --white:          #E8ECF1;
  --off-white:      var(--bg-surface-alt);
  --accent:         var(--bg-accent);
  --accent-dark:    #1e3a5a;
  --text-dark:      var(--text-primary);
  --text-mid:       var(--text-secondary);
  --text-light:     var(--text-tertiary);
  --border:         var(--border-default);
  --payout-green:        var(--green-accent);
  --payout-green-bg:     var(--green-bg);
  --payout-green-border: var(--green-border);
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  --bg-page:        #FFFFFF;
  --bg-surface:     #FFFFFF;
  --bg-surface-alt: #F8FAFC;
  --bg-accent:      #EBF0F6;
  --bg-input:       #FFFFFF;
  --header-bg:      rgba(255, 255, 255, 0.97);
  --footer-bg:      #06101a;

  --text-primary:   #1A1A1A;
  --text-secondary: #4A5568;
  --text-tertiary:  #6B7280;
  --text-heading:   #1B3A5C;

  --border-default: #E2E8F0;
  --border-strong:  rgba(27, 58, 92, 0.15);

  --shadow-card:    0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(27, 58, 92, 0.10);
  --shadow-header:  0 1px 12px rgba(0, 0, 0, 0.07);

  --green-accent:   #16a34a;
  --green-bg:       #e8f5ee;
  --green-border:   #a8d8be;
  --green-text:     #16a34a;

  --red-accent:     #dc2626;
  --red-bg:         #fef9f9;
  --red-border:     #f5d5d5;

  --problem-bg:     #fef9f9;
  --problem-border: #f5d5d5;
  --solution-bg:    #f0faf4;
  --solution-border: #bbddc8;

  --info-bg:        #fffbf4;
  --info-border:    #f5e0bb;
  --warning-bg:     #fffbea;
  --warning-border: #edd070;
  --warning-text:   #7a5800;
  --transparency-bg:    #eef7f1;
  --transparency-border: #b4dcc6;
  --transparency-text:   #1e5c3a;
  --transparency-ref:    #4a8a65;
  --transparency-rule:   #c0e0d0;

  /* Aliases for light */
  --white:          #FFFFFF;
  --off-white:      #F8FAFC;
  --accent:         #EBF0F6;
  --accent-dark:    #d6e1ef;
  --text-dark:      #1A1A1A;
  --text-mid:       #4A5568;
  --text-light:     #6B7280;
  --border:         #E2E8F0;
  --payout-green:        #1a7a4a;
  --payout-green-bg:     #e8f5ee;
  --payout-green-border: #a8d8be;
}

/* --------------------------------------------------------------------------
   2. BASE RESETS für neue Seiten
   -------------------------------------------------------------------------- */
.cita-page {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

.cita-page a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container-cita {
  max-width: 75rem; /* 1200px */
  margin-inline: auto;
  padding-inline: 2.5rem;
}

.section-navy {
  background: var(--navy);
  color: var(--white);
  padding: var(--section-pad) 0;
}

.section-light {
  background: var(--bg-page);
  color: var(--text-primary);
  padding: var(--section-pad) 0;
}

.section-accent {
  background: var(--bg-accent);
  color: var(--text-primary);
  padding: var(--section-pad) 0;
}

/* --------------------------------------------------------------------------
   4. SCROLL-REVEAL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.cita-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow 0.25s;
}

.cita-header.is-scrolled {
  box-shadow: var(--shadow-header);
}

.cita-header__inner {
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cita-logo {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.2px;
  text-decoration: none;
  font-family: var(--font-primary);
}

.cita-logo__dot { color: var(--amber); }

.cita-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cita-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  font-family: var(--font-primary);
}

.cita-nav__link:hover { color: var(--text-heading); }

/* Mobile menu toggle */
.cita-nav__mobile-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-heading);
  padding: 4px;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn-cita {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s var(--ease-out);
  white-space: nowrap;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.btn-cita-primary {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.btn-cita-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  box-shadow: 0 4px 16px rgba(27, 58, 92, 0.22);
  transform: translateY(-1px);
  color: white;
}

.btn-cita-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.btn-cita-secondary:hover {
  background: var(--navy);
  color: white;
  transform: translateY(-1px);
}

.btn-cita-ghost {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-cita-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-cita-white {
  background: white;
  color: var(--navy);
  border-color: white;
}

.btn-cita-white:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.btn-cita--sm {
  padding: 10px 20px;
  font-size: 13px;
}

.btn-cita--lg {
  padding: 15px 32px;
  font-size: 15px;
  min-width: 200px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.cita-card {
  background: var(--bg-surface);
  border-radius: 10px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cita-card--navy {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.cita-card--accent {
  background: var(--accent);
  border-color: var(--border);
}

/* Dashboard card (hero mockup) */
.cita-card--dashboard {
  background: var(--navy);
  border-color: rgba(255, 255, 255, 0.08);
  color: white;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.db-card { }

.db-bar {
  background: var(--navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-bar__dots { display: flex; gap: 5px; }
.db-bar__dots i {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
}
.db-bar__dots i:nth-child(1) { background: #ff5f57; }
.db-bar__dots i:nth-child(2) { background: #febc2e; }
.db-bar__dots i:nth-child(3) { background: #28c840; }

.db-bar__title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-left: auto;
  letter-spacing: 0.04em;
  font-family: var(--font-primary);
}

.db-body { padding: 24px; }

.db-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.db-time {
  font-size: 48px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -2px;
  font-family: var(--font-primary);
}

.db-event { text-align: right; }
.db-event__name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.db-event__detail { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.db-rows { display: flex; flex-direction: column; }

.db-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 13px;
  font-family: var(--font-primary);
}
.db-row:last-child { border-bottom: none; }
.db-row__label { color: var(--text-light); }
.db-row__val { font-weight: 700; color: var(--navy); }
.db-row__val--ok {
  color: var(--green-accent);
  display: flex;
  align-items: center;
  gap: 5px;
}
.db-row__val--ok::before {
  content: '';
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%2316a34a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.db-row__val--muted { color: #94a3b8; font-weight: 500; }

.db-footer {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg-surface-alt);
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-family: var(--font-primary);
}
.db-footer__label { color: var(--text-light); }
.db-footer__val { font-weight: 600; color: var(--text-light); font-style: italic; }

/* Floating stat pill */
.db-stat-pill {
  position: absolute;
  bottom: -14px;
  left: -14px;
  background: var(--amber);
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(200, 131, 42, 0.35);
  font-family: var(--font-primary);
}
.db-stat-pill strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.5px;
}

/* --------------------------------------------------------------------------
   8. SECTION EYEBROW & HEADINGS
   -------------------------------------------------------------------------- */
.section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
  font-family: var(--font-primary);
}

.cita-blockquote {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 28px;
  max-width: 680px;
  padding-left: 24px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-primary);
}
.cita-blockquote p {
  margin: 0 0 20px;
  color: rgba(255, 255, 255, 0.88);
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
}
.cita-blockquote footer {
  font-style: normal;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cita-blockquote footer strong {
  color: white;
  font-weight: 700;
}
.cita-blockquote footer span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   9. TABS (Problem-Sektion)
   -------------------------------------------------------------------------- */
.cita-tab-nav {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 36px;
}

.cita-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 20px 12px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.18s, border-color 0.18s;
}
.cita-tab-btn:hover { color: rgba(255, 255, 255, 0.75); }
.cita-tab-btn.is-active {
  color: white;
  border-bottom-color: var(--amber);
}

.cita-tab-panel {
  display: none;
}
.cita-tab-panel.is-active { display: block; }
.cita-tab-panel p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
  max-width: 580px;
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   10. PROOF GRID
   -------------------------------------------------------------------------- */
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  align-items: stretch;
}

.proof-item {
  padding: 44px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
  display: flex;
  flex-direction: column;
}
.proof-item:nth-child(2n) { border-right: none; }
.proof-item:nth-child(3),
.proof-item:nth-child(4) { border-bottom: none; }
.proof-item:hover { background: var(--bg-surface-alt); }

.proof-step {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 20px;
  font-family: var(--font-primary);
}

.proof-item h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 10px;
  letter-spacing: -0.2px;
  font-family: var(--font-primary);
}

.proof-item p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  font-family: var(--font-primary);
}

.offline-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--amber);
  color: white;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 12px;
  font-family: var(--font-primary);
}

.proof-stat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px 44px;
  background: var(--bg-accent);
  border: 1px solid var(--border-default);
  border-top: none;
}

.proof-stat-num {
  font-size: 52px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -2px;
  line-height: 1;
  white-space: nowrap;
  font-family: var(--font-primary);
}

.proof-stat-copy {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 420px;
  font-family: var(--font-primary);
}
.proof-stat-copy strong { color: var(--text-heading); }

/* --------------------------------------------------------------------------
   11. TRANSPARENZ SPLIT-VIEW
   -------------------------------------------------------------------------- */
.split-view {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.split-view__main { min-width: 0; }
.split-view__aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.split-card__header {
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
}
.split-card__header--guest {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
}
.split-card__header--organizer {
  background: rgba(200, 131, 42, 0.15);
  color: var(--amber);
}
.split-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.split-card__body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: var(--font-primary);
}

/* Guest checkout mockup */
.checkout-event { font-size: 14px; font-weight: 600; color: white; margin-bottom: 4px; }
.checkout-date { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-bottom: 24px; }

.checkout-ticket {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.checkout-ticket__name { font-size: 14px; color: white; font-weight: 500; }
.checkout-ticket__price { font-size: 18px; font-weight: 700; color: white; }

.checkout-no-surcharge {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.checkout-no-surcharge::before { content: '✓'; color: var(--green-accent); font-size: 11px; }

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
}
.checkout-total__label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.checkout-total__price { font-size: 22px; font-weight: 700; color: white; }

.checkout-btn {
  width: 100%;
  background: white;
  color: var(--navy);
  border: none;
  border-radius: var(--radius);
  padding: 13px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-top: auto;
}

/* Organizer calc mockup */
.calc-row { margin-bottom: 20px; }
.calc-row__label { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-bottom: 7px; font-weight: 500; }

.calc-price-input {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  overflow: hidden;
}
.calc-price-input__prefix {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-primary);
}
.calc-price-input__val {
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 700;
  color: white;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-primary);
  -moz-appearance: textfield;
}
.calc-price-input__val::-webkit-outer-spin-button,
.calc-price-input__val::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-price-input:focus-within { border-color: rgba(255, 255, 255, 0.7); }

.calc-fee-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-primary);
}
.calc-fee-row:last-of-type { border-bottom: none; }

.calc-payout-block {
  background: var(--payout-green-bg);
  border: 1px solid var(--payout-green-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calc-payout-block__label { font-size: 12px; color: var(--payout-green); font-weight: 600; }
.calc-payout-block__val { font-size: 22px; font-weight: 700; color: var(--payout-green); }

/* Transparenz claims */
.tclaim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.tclaim {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.tclaim__icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.tclaim__title { font-size: 13px; font-weight: 700; color: white; margin-bottom: 4px; font-family: var(--font-primary); }
.tclaim__text { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; font-family: var(--font-primary); }

/* --------------------------------------------------------------------------
   12. RECHNER (Zeitersparnis)
   -------------------------------------------------------------------------- */
.rechner-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 36px;
}

.form-field { margin-bottom: 32px; }
.form-field:last-child { margin-bottom: 0; }

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.field-label-row label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  font-family: var(--font-primary);
}
.field-hint { font-size: 12px; color: var(--text-light); font-style: italic; }

/* Range input */
input[type="range"].cita-range {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: var(--accent-dark);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type="range"].cita-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(27, 58, 92, 0.3);
  transition: transform 0.1s;
}
input[type="range"].cita-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].cita-range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.slider-row input[type="range"].cita-range { flex: 1; }

.slider-num {
  width: 72px;
  padding: 7px 10px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  text-align: center;
  outline: none;
  flex-shrink: 0;
  transition: border-color 0.15s;
  background: var(--bg-input);
  -moz-appearance: textfield;
}
.slider-num:focus { border-color: var(--navy); }
.slider-num::-webkit-outer-spin-button,
.slider-num::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Select */
.select-wrap { position: relative; }
.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-mid);
  pointer-events: none;
}
select.cita-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-input);
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}
select.cita-select:focus { border-color: var(--navy); }

.auto-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--amber);
  background: rgba(200, 131, 42, 0.1);
  border: 1px solid rgba(200, 131, 42, 0.3);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  margin-left: 6px;
  vertical-align: middle;
  transition: opacity 0.3s;
}
.auto-badge.is-hidden { opacity: 0; }

.slider-impact {
  font-size: 12px;
  color: var(--amber);
  font-weight: 500;
  margin-top: 8px;
  min-height: 18px;
  font-family: var(--font-primary);
}

/* Rechner Output */
.calc-output {
  background: var(--navy);
  border-radius: 8px;
  padding: 48px 40px;
  text-align: center;
  position: sticky;
  top: 80px;
  color: white;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-output__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
  font-family: var(--font-primary);
}

.calc-output__num {
  font-size: 108px;
  font-weight: 700;
  color: white;
  line-height: 0.9;
  letter-spacing: -4px;
  margin-bottom: 12px;
  font-family: var(--font-primary);
}

.calc-output__unit {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  margin-bottom: 20px;
  font-family: var(--font-primary);
}

.calc-output__msg {
  font-size: 20px;
  font-weight: 600;
  color: var(--green-text);
  margin-bottom: 36px;
  line-height: 1.4;
  font-family: var(--font-primary);
}

.calc-breakdown {
  margin: 20px 0 28px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  text-align: left;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-primary);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row span:first-child { color: rgba(255, 255, 255, 0.7); }
.breakdown-row span:last-child { color: rgba(255, 255, 255, 0.8); font-weight: 600; }

.calc-output__disclaimer {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 18px;
  line-height: 1.55;
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   13. PRICING CARDS
   -------------------------------------------------------------------------- */
.pricing-toggle {
  display: inline-flex;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 48px;
  gap: 2px;
}

.ptoggle {
  background: none;
  border: none;
  padding: 9px 18px;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
}
.ptoggle.is-active {
  background: var(--navy);
  color: white;
  box-shadow: 0 1px 6px rgba(27, 58, 92, 0.2);
}

.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
  align-items: stretch;
}

.pricing-card {
  border: 1.5px solid var(--border-default);
  border-radius: 8px;
  padding: 32px;
  transition: all 0.2s var(--ease-out);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
}
.pricing-card:hover { box-shadow: var(--shadow-card); }
.pricing-card--featured {
  border-color: var(--amber);
  border-width: 2px;
  background: var(--bg-accent);
}

.card-rec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--amber);
  color: white;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-family: var(--font-primary);
}

.card-plan {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 10px;
  font-family: var(--font-primary);
}

.card-price {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 4px;
  font-family: var(--font-primary);
}
.card-price sup { font-size: 18px; vertical-align: top; margin-top: 8px; letter-spacing: 0; }

.card-period {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 6px;
  font-family: var(--font-primary);
}
.card-alt {
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 24px;
  min-height: 18px;
  font-family: var(--font-primary);
}

.card-desc {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
  flex: 1;
  font-family: var(--font-primary);
}

.pricing-card .btn-cita {
  width: 100%;
  justify-content: center;
  font-size: 14px;
  padding: 11px;
  margin-top: auto;
}

.platform-note {
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 16px;
  font-family: var(--font-primary);
}
.platform-note strong { color: var(--text-primary); }

.price-fine {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   14. FOUNDER SECTION
   -------------------------------------------------------------------------- */
.founder-photo-placeholder {
  aspect-ratio: 3 / 4;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  text-align: center;
  padding: 16px;
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   15. FOOTER
   -------------------------------------------------------------------------- */
.cita-footer {
  background: var(--footer-bg);
  padding: 32px 0;
}

.cita-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cita-footer__logo {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-primary);
}

.cita-footer__links {
  display: flex;
  gap: 24px;
}
.cita-footer__links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s;
  text-decoration: none;
  font-family: var(--font-primary);
}
.cita-footer__links a:hover { color: rgba(255, 255, 255, 0.7); }

.cita-footer__copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   16. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb-bar {
  background: var(--bg-surface-alt);
  border-bottom: 1px solid var(--border-default);
  padding: 10px 0;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-light);
  font-family: var(--font-primary);
}
.breadcrumb-inner a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb-inner a:hover { color: var(--text-heading); }
.breadcrumb-sep { opacity: 0.4; }
.breadcrumb-current { color: var(--text-heading); font-weight: 500; }

/* --------------------------------------------------------------------------
   17. ACCORDION (Features-Seite)
   -------------------------------------------------------------------------- */
.accordion-list { list-style: none; padding: 0; margin: 0; }

.accordion-package {
  border-bottom: 1px solid var(--border);
}

.pkg-header { padding: 48px 0 0; }

.pkg-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
  font-family: var(--font-primary);
}

.pkg-header h2 {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.6px;
  line-height: 1.2;
  padding-bottom: 36px;
  border-bottom: 2px solid var(--navy);
  margin-bottom: 0;
  font-family: var(--font-primary);
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}
.accordion-item:last-child { border-bottom: none; }

.accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-primary);
}
.accordion-trigger:hover .accordion-q-text { color: var(--text-heading); }

.accordion-q-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.accordion-q-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  transition: color 0.15s;
  font-family: var(--font-primary);
}

.accordion-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

.callout-badge {
  display: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
  white-space: nowrap;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--font-primary);
}

/* Show badges when context is active */
[data-active-context="verein"] .callout-badge--verein { display: inline; }
[data-active-context="bar"] .callout-badge--bar { display: inline; }

.accordion-arrow {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: var(--text-light);
  margin-top: 2px;
}
.accordion-arrow svg { transition: transform 0.25s var(--ease-out); }
.accordion-item.is-open .accordion-arrow { background: var(--navy); border-color: var(--navy); color: white; }
.accordion-item.is-open .accordion-arrow svg { transform: rotate(180deg); }

.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s var(--ease-out);
}
.accordion-item.is-open .accordion-content { max-height: var(--content-height, 400px); }

.accordion-answer {
  padding: 0 0 28px;
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.78;
  max-width: 720px;
  font-family: var(--font-primary);
}
.accordion-answer strong { color: var(--text-primary); }

.offline-note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--amber);
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   18. CONTEXT TOGGLE (Features Hero)
   -------------------------------------------------------------------------- */
.context-toggle {
  display: inline-flex;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}

.ctx-btn {
  background: none;
  border: none;
  padding: 9px 20px;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.18s;
}
.ctx-btn.is-active {
  background: var(--navy);
  color: white;
  box-shadow: 0 1px 6px rgba(27, 58, 92, 0.2);
}
.ctx-btn:not(.is-active):hover { color: var(--text-heading); background: var(--bg-accent); }

/* --------------------------------------------------------------------------
   19. FILTER BAR (Features-Seite)
   -------------------------------------------------------------------------- */
.filter-bar {
  background: var(--bg-accent);
  padding: 28px 0;
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 62px;
  z-index: 100;
}

.filter-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
}

.filter-icon {
  position: absolute;
  left: calc(2.5rem + 14px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  pointer-events: none;
  font-style: normal;
  font-size: 15px;
}

.feature-filter {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-input);
  outline: none;
  transition: border-color 0.15s;
}
.feature-filter:focus { border-color: var(--navy); }
.feature-filter::placeholder { color: var(--text-light); }

.no-results {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-mid);
  font-family: var(--font-primary);
}
.no-results a { color: var(--amber); font-weight: 600; }
.no-results.is-visible { display: block; }

/* --------------------------------------------------------------------------
   20. PREISRECHNER PAGE
   -------------------------------------------------------------------------- */
.page-hero--navy {
  background: var(--navy);
  padding: 64px 0 56px;
  color: white;
}

.hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
  font-family: var(--font-primary);
}

.page-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px;
  align-items: start;
}

.form-block {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.form-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.form-block__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
  font-family: var(--font-primary);
}

.pill-toggle {
  display: inline-flex;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
  width: 100%;
}
.pill-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  line-height: 1.35;
}
.pill-btn.is-active { background: var(--navy); color: white; box-shadow: 0 1px 6px rgba(27, 58, 92, 0.2); }
.pill-btn:not(.is-active):hover { color: var(--text-heading); background: var(--bg-accent); }

.manual-row {
  display: none;
  gap: 12px;
  margin-top: 12px;
  align-items: flex-end;
}
.manual-row.is-visible { display: flex; }
.manual-field { flex: 1; }
.manual-field label {
  font-size: 12px;
  color: var(--text-light);
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-family: var(--font-primary);
}
.manual-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  background: var(--bg-input);
  outline: none;
  transition: border-color 0.15s;
}
.manual-field input:focus { border-color: var(--navy); }

.field-note {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 8px;
  line-height: 1.55;
  font-family: var(--font-primary);
}

.mode-toggle {
  display: inline-flex;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
  width: 100%;
  margin-bottom: 28px;
}
.mode-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 11px 14px;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  line-height: 1.4;
}
.mode-btn.is-active { background: var(--navy); color: white; box-shadow: 0 1px 6px rgba(27, 58, 92, 0.2); }
.mode-btn:not(.is-active):hover { color: var(--text-heading); background: var(--bg-accent); }

.price-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 10px;
  display: block;
  font-family: var(--font-primary);
}
.price-input-wrap { position: relative; }
.price-input-wrap .euro-sign {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--text-light);
  pointer-events: none;
  font-weight: 300;
}
.price-input {
  width: 100%;
  padding: 16px 16px 16px 36px;
  border: 2px solid var(--border-default);
  border-radius: 8px;
  font-family: var(--font-primary);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-heading);
  background: var(--bg-input);
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.price-input:focus { border-color: var(--navy); }
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.slider-wrap { margin-top: 14px; }
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-family: var(--font-primary);
}

.transparency-note {
  background: var(--transparency-bg);
  border: 1px solid var(--transparency-border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--transparency-text);
  line-height: 1.6;
  font-family: var(--font-primary);
}
.transparency-note strong { font-weight: 700; }
.transparency-note .study-ref {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--transparency-rule);
  font-size: 12px;
  color: var(--transparency-ref);
  font-style: italic;
}

.threshold-note {
  display: none;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--warning-text);
  margin-top: 12px;
  font-family: var(--font-primary);
}
.threshold-note.is-visible { display: block; }

/* Preisrechner Result */
.result-section {
  background: var(--navy);
  border-radius: 8px;
  padding: 36px 32px;
  margin-top: 40px;
  color: white;
}
.result-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
  font-family: var(--font-primary);
}
.result-id { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; font-family: var(--font-primary); }
.result-main { display: flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.result-eur { font-size: 24px; font-weight: 700; color: rgba(255, 255, 255, 0.7); font-family: var(--font-primary); }
.result-val { font-size: 72px; font-weight: 700; color: var(--green-text); letter-spacing: -3px; line-height: 0.9; font-family: var(--font-primary); }
.result-msg { font-size: 14px; color: var(--green-text); margin-bottom: 24px; font-family: var(--font-primary); }

.fee-breakdown {
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 16px;
}
.fee-breakdown__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 12px;
  font-family: var(--font-primary);
}
.fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-family: var(--font-primary);
}
.fee-row:last-of-type { border-bottom: none; }
.fee-name { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); }
.fee-val { font-weight: 700; color: rgba(255, 255, 255, 0.8); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot--platform { background: var(--amber); }
.fee-total {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 13px;
  font-weight: 700;
  color: white;
  font-family: var(--font-primary);
}

/* Dev params panel */
.params-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
.params-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary);
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}
.params-toggle:hover { color: var(--text-heading); }
.params-toggle svg { transition: transform 0.2s; }
.params-toggle.is-open svg { transform: rotate(180deg); }

.params-grid {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
  padding: 20px;
  background: var(--bg-surface-alt);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}
.params-grid.is-visible { display: grid; }
.param-item label { display: block; font-size: 11px; color: var(--text-light); margin-bottom: 5px; font-family: var(--font-primary); }
.param-item input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.15s;
}
.param-item input:focus { border-color: var(--navy); }

.calc-disclaimer {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.65;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-primary);
}
.calc-disclaimer strong { color: var(--text-secondary); }

/* Sidebar */
.calc-sidebar {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 24px;
}
.sidebar-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 12px;
  font-family: var(--font-primary);
}
.sidebar-card p {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.7;
  font-family: var(--font-primary);
}
.sidebar-card ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sidebar-card li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
  font-family: var(--font-primary);
}
.sidebar-card li::before { content: '✓'; color: var(--amber); font-weight: 700; flex-shrink: 0; margin-top: 1px; }

.fee-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.fee-table td { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-mid); font-family: var(--font-primary); }
.fee-table td:last-child { text-align: right; font-weight: 700; color: var(--text-heading); }
.fee-table tr:last-child td { border-bottom: none; }

.sidebar-cta {
  background: var(--navy);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}
.sidebar-cta p { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; line-height: 1.6; font-family: var(--font-primary); }

/* Bridge section */
.bridge-section {
  background: var(--bg-accent);
  border-top: 1px solid var(--border-default);
  padding: 64px 0;
  text-align: center;
}
.bridge-section p {
  font-size: 17px;
  color: var(--text-mid);
  margin-bottom: 28px;
  line-height: 1.7;
  font-family: var(--font-primary);
}
.bridge-section strong { color: var(--text-heading); }

.bridge-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Bridge section (dark variant for features page) */
.bridge-section--navy {
  background: var(--navy);
  border-top: none;
  padding: 80px 0;
  color: white;
  text-align: center;
}
.bridge-section--navy .bridge-stat {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  font-weight: 600;
  font-family: var(--font-primary);
}
.bridge-section--navy .bridge-quote {
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
  line-height: 1.35;
  margin-bottom: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-primary);
}
.bridge-section--navy .bridge-quote em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   21. INTER-BOX (Pricing section)
   -------------------------------------------------------------------------- */
.inter-box {
  background: var(--bg-accent);
  border-left: 3px solid var(--text-heading);
  padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 48px;
  max-width: 640px;
  font-family: var(--font-primary);
}
.inter-box strong { color: var(--text-heading); }

/* --------------------------------------------------------------------------
   21a. INDEX PAGE — HERO, TABS, PRICING CARDS
   -------------------------------------------------------------------------- */

/* Hero 2-column layout */
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-text { min-width: 0; }
.hero-visual { min-width: 0; }

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.hero-trust-item {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: var(--font-primary);
}

/* Proof stats (4-column row) */
.proof-grid--4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.proof-num {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
  font-family: var(--font-primary);
}
.proof-label {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.5;
  font-family: var(--font-primary);
}

/* Tabs (light variant for problem/solution) */
.cita-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cita-tab {
  padding: 9px 22px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--font-primary);
  color: var(--text-secondary);
  background: var(--bg-accent);
  border: 1.5px solid var(--border-default);
  cursor: pointer;
  transition: all 0.15s;
}
.cita-tab:hover { background: var(--bg-surface); color: var(--text-heading); }
.cita-tab.is-active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  font-weight: 600;
}

/* Problem / Solution comparison */
.tab-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 840px;
  margin: 0 auto;
}
.tab-problem,
.tab-solution {
  padding: 32px;
  border-radius: 12px;
}
.tab-problem { background: var(--problem-bg); border: 1.5px solid var(--problem-border); }
.tab-solution { background: var(--solution-bg); border: 1.5px solid var(--solution-border); }

.tab-context-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  font-family: var(--font-primary);
}
.tab-problem .tab-context-label { color: var(--red-accent); }
.tab-solution .tab-context-label { color: var(--green-accent); }

.tab-problem-list,
.tab-solution-list { display: flex; flex-direction: column; gap: 14px; }

.tab-problem-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  font-family: var(--font-primary);
}
.tab-problem-item span {
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
  font-size: 16px;
}
.tab-problem-item p { margin: 0; }

.tab-problem-item--bad { color: var(--text-primary); }
.tab-problem-item--bad span { color: var(--red-accent); }
.tab-problem-item--good { color: var(--text-primary); }
.tab-problem-item--good span { color: var(--green-accent); }

/* Transparenz dark calc card */
.split-calc-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 28px;
}

/* Pricing card elements (BEM-style) */
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.pricing-tag {
  display: inline-block;
  background: var(--amber);
  color: white;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 3px;
  margin-bottom: 16px;
  font-family: var(--font-primary);
}
.pricing-card__name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
  margin-bottom: 10px;
  font-family: var(--font-primary);
}
.pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}
.pricing-card__amount {
  font-size: 42px;
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -1.5px;
  line-height: 1;
  font-family: var(--font-primary);
}
.pricing-card__period {
  font-size: 14px;
  color: var(--text-light);
  font-family: var(--font-primary);
}
.pricing-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-default);
  font-family: var(--font-primary);
}
.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pricing-card__features li {
  font-size: 14px;
  color: var(--text-mid);
  font-family: var(--font-primary);
  padding-left: 20px;
  position: relative;
}
.pricing-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green-accent);
  font-weight: 700;
}
.pricing-card__note {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  margin-top: 8px;
  font-family: var(--font-primary);
}

/* Ghost button light variant (on dark sections) */
.btn-cita-ghost.btn-cita--light {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-cita-ghost.btn-cita--light:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   21b. PREISRECHNER PAGE
   -------------------------------------------------------------------------- */

/* Two-column layout */
.preisrechner-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.preisrechner-main {
  min-width: 0;
}
.preisrechner-sidebar {
  position: sticky;
  top: 88px;
}

/* Block wrapper */
.calc-block { margin-bottom: 32px; }

/* Labels */
.calc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 10px;
  font-family: var(--font-primary);
}

/* Payment toggle */
.payment-toggle,
.mode-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
}
.payment-btn,
.mode-btn {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
  line-height: 1.4;
}
.payment-btn + .payment-btn,
.mode-btn + .mode-btn {
  border-left: 1px solid var(--border);
}
.payment-btn.is-active,
.mode-btn.is-active {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
}
.payment-btn:hover:not(.is-active),
.mode-btn:hover:not(.is-active) {
  background: var(--bg-accent);
  color: var(--text-heading);
}

.calc-hint {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 8px;
  line-height: 1.5;
  font-family: var(--font-primary);
}

/* Price input */
.calc-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.calc-input-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface);
  transition: border-color 0.15s;
}
.calc-input-wrap:focus-within {
  border-color: var(--navy);
}
.calc-currency {
  padding: 10px 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--bg-accent);
  border-right: 1px solid var(--border-default);
  font-family: var(--font-primary);
  line-height: 1;
}
.calc-input {
  padding: 10px 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
  background: transparent;
  border: none;
  outline: none;
  width: 120px;
  font-family: var(--font-primary);
  -moz-appearance: textfield;
}
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.calc-range-hint {
  font-size: 12px;
  color: var(--text-light);
  font-family: var(--font-primary);
  white-space: nowrap;
}

/* Slider */
.calc-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--accent);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(27, 58, 92, 0.25);
  transition: transform 0.1s;
}
.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  background: var(--navy);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.calc-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-light);
  margin-top: 6px;
  font-family: var(--font-primary);
}

/* Result box */
.calc-result-box {
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 24px;
}
.calc-result-row--main {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.calc-result-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.calc-result-item:last-child { text-align: right; }
.calc-result-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-primary);
}
.calc-result-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-heading);
  font-family: var(--font-primary);
  line-height: 1;
}
.calc-result-value--green {
  color: var(--green-accent);
}
.calc-result-arrow {
  font-size: 20px;
  color: var(--text-light);
  flex-shrink: 0;
  margin-top: 16px;
}
.calc-result-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0 16px;
}

/* Breakdown rows */
/* Preisrechner: override dark-bg .calc-breakdown from Rechner section */
.calc-result-box .calc-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: none;
  padding: 0;
  border-radius: 0;
  text-align: left;
  margin: 0;
}
.calc-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--text-mid);
}
.calc-breakdown-label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text-mid);
  font-family: var(--font-primary);
}
.calc-breakdown-detail {
  font-size: 12px;
  color: var(--text-light);
  margin-left: 4px;
}
.calc-breakdown-value { font-weight: 600; color: var(--text-primary); }
.calc-breakdown-value--fee { color: var(--text-mid); }

/* Info box */
.calc-info-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 24px;
  font-family: var(--font-primary);
}

/* Dev params panel */
.dev-panel {
  border: 1px dashed var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 8px;
}
.dev-panel__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-light);
  cursor: pointer;
  font-family: var(--font-primary);
  list-style: none;
  user-select: none;
}
.dev-panel__toggle::-webkit-details-marker { display: none; }
.dev-panel__toggle:hover { color: var(--text-heading); background: var(--bg-accent); }
.dev-panel__body {
  padding: 16px;
  border-top: 1px dashed var(--border-default);
  background: var(--bg-surface-alt);
}
.dev-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.dev-param { display: flex; flex-direction: column; gap: 4px; }
.dev-param__label {
  font-size: 11px;
  color: var(--text-light);
  font-family: var(--font-primary);
}
.dev-param__input {
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--text-primary);
  background: var(--bg-input);
  outline: none;
  -moz-appearance: textfield;
}
.dev-param__input:focus { border-color: var(--navy); }
.dev-param__input::-webkit-outer-spin-button,
.dev-param__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dev-panel__reset {
  padding: 6px 12px;
  font-size: 12px;
  font-family: var(--font-primary);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.dev-panel__reset:hover { background: var(--bg-accent); color: var(--text-heading); }

/* Sidebar cards */
.sidebar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 24px;
}
.sidebar-card--accent {
  background: var(--bg-accent);
  border-color: var(--border-default);
}
.sidebar-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
  font-family: var(--font-primary);
}
.sidebar-card__subtitle {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 20px;
  font-family: var(--font-primary);
}

/* Example rows */
.example-rows { display: flex; flex-direction: column; gap: 10px; }
.example-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  font-family: var(--font-primary);
  color: var(--text-mid);
}
.example-row--total {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-dark);
  font-weight: 600;
}
.example-row--payout {
  padding-top: 10px;
  border-top: 2px solid var(--border-default);
  color: var(--green-accent);
  font-weight: 700;
  font-size: 15px;
}
.example-value { font-weight: 600; color: var(--text-dark); }
.example-value--fee { color: var(--text-light); font-weight: 500; }
.example-value--green { color: var(--green-accent); font-weight: 700; }

.sidebar-cta {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: none;
  font-family: var(--font-primary);
}
.sidebar-cta:hover { text-decoration: underline; }

/* Sidebar FAQ */
.sidebar-faq { display: flex; flex-direction: column; gap: 16px; }
.sidebar-faq-item { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.sidebar-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-faq-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
  line-height: 1.4;
  font-family: var(--font-primary);
}
.sidebar-faq-a {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-primary);
}

/* --------------------------------------------------------------------------
   22. THEME TOGGLE
   -------------------------------------------------------------------------- */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--bg-accent);
}

/* Dark mode (default): show sun icon (switch to light) */
.theme-toggle__icon--moon { display: none; }
.theme-toggle__icon--sun  { display: block; }

/* Light mode: show moon icon (switch to dark) */
[data-theme="light"] .theme-toggle__icon--moon { display: block; }
[data-theme="light"] .theme-toggle__icon--sun  { display: none; }

/* Smooth transition only after first user interaction */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}

/* --------------------------------------------------------------------------
   23. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  :root { --section-pad: 68px; }

  .container-cita { padding-inline: 1.25rem; }
  .cita-header__inner { padding-inline: 1.25rem; }
  .cita-nav .cita-nav__link { display: none; }
  .cita-nav .theme-toggle { display: flex; }
  .cita-nav__mobile-btn { display: flex; }

  .proof-grid { grid-template-columns: 1fr; }
  .proof-item { border-right: none !important; }
  .proof-item:nth-child(3) { border-bottom: 1px solid var(--border) !important; }
  .proof-item:nth-child(4) { border-bottom: none !important; }

  .proof-stat-bar { flex-direction: column; gap: 16px; text-align: center; }

  .split-view { grid-template-columns: 1fr; }
  .tclaim-grid { grid-template-columns: 1fr; }

  .price-cards { grid-template-columns: 1fr; max-width: 380px; }
  .pricing-card--featured { transform: none; }

  .calc-output { position: static; }
  .calc-output__num { font-size: 80px; }

  .page-grid { grid-template-columns: 1fr; }
  .calc-sidebar { position: static; }

  .cita-footer__inner { flex-direction: column; text-align: center; }
  .cita-footer__links { flex-wrap: wrap; justify-content: center; }

  .params-grid { grid-template-columns: 1fr; }
  .result-val { font-size: 52px; }

  .filter-bar { top: 62px; }
  .filter-inner { padding: 0 1.25rem; }
  .filter-icon { left: calc(1.25rem + 14px); }

  .bridge-ctas { flex-direction: column; align-items: center; }

  .preisrechner-layout { grid-template-columns: 1fr; }
  .preisrechner-sidebar { position: static; }
  .dev-params-grid { grid-template-columns: 1fr; }

  .hero-layout { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .proof-grid--4col { grid-template-columns: 1fr 1fr; }
  .tab-content-grid { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: 1fr; max-width: 400px; }

  .pkg-header h2 { font-size: 22px; }
  .accordion-q-text { font-size: 15px; }

  .db-stat-pill { display: none; }
}