/* =====================================================================
   Bilanzo Preiskarten: EIN Erscheinungsbild fuer Startseite (#preise, front-page.php) und Preisseite
   (.bilanzo-pricing-modern, pricing-table-modern.php). Wort des Besitzers 21.09.2026 17:55: "blau ist ok, aber
   bitte mit abgeschnittenen Ecken, nicht abgerundet". Agent U, 21.09.2026.
   Ecken: clip-path polygon (13 px Fase an allen vier Ecken), unabhaengig von corner-shape (das nur neue Chromium
   koennen, siehe assets/bilanzo-clipped.css). Rahmen auf der Fase: zweischichtig (Karte = Rahmenfarbe, ::before =
   Fuellung 1 px innen, Inhalt darueber). Abstaende 5/8/13/21/34/55, Schriften 10/13/21/34.
   Die Regeln stehen mit hoeherer Spezifitaet als die Inline-Stile der beiden Vorlagen (body #preise ..., .prose ...).
   ===================================================================== */
:root {
  --bpk-fase: 13px;
  --bpk-fase-k: 8px;
  --bpk-rahmen: rgba(17, 17, 17, .14);   /* heller Rand wie vorher; Abgrenzung ueber Schatten (Besitzer 22.09. 06:25) */
  --bpk-blau: #2563EB;
  --empfohlen-farbe: #2563EB;          /* Schalter (Kopf 22.09. 06:30): Blau; auf Wort des Besitzers Gruen #086A50 */
  --bpk-blau-dunkel: #1D4ED8;
  --bpk-akzent: #1BAAC8;
  --bpk-text: #0F172A;
  --bpk-text-2: #52524E;
  --bpk-weiss: #ffffff;
  --bpk-display: 'Plus Jakarta Sans', sans-serif;
  --bpk-sans: 'Inter', -apple-system, sans-serif;
  --bpk-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ---- Raster ---- */
body #preise .pricing-grid,
body .prose .bilanzo-pricing-modern .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  align-items: stretch;
  margin: 0 auto 21px;
  max-width: 1096px;
}
@media (max-width: 1023px) {
  body #preise .pricing-grid,
  body .prose .bilanzo-pricing-modern .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body #preise .plan:nth-child(3),
  body .prose .bilanzo-pricing-modern .pricing-card[data-plan="premium"] { grid-column: 1 / -1; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767px) {
  body #preise .pricing-grid,
  body .prose .bilanzo-pricing-modern .pricing-grid { grid-template-columns: 1fr; }
  body #preise .plan:nth-child(3),
  body .prose .bilanzo-pricing-modern .pricing-card[data-plan="premium"] { max-width: none; }
}

/* ---- Karte: abgeschnittene Ecken, Rahmen auf der Fase ---- */
body #preise .plan,
body .prose .bilanzo-pricing-modern .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 21px 21px;
  margin: 0;
  background: var(--bpk-rahmen);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(var(--bpk-fase) 0, calc(100% - var(--bpk-fase)) 0, 100% var(--bpk-fase), 100% calc(100% - var(--bpk-fase)), calc(100% - var(--bpk-fase)) 100%, var(--bpk-fase) 100%, 0 calc(100% - var(--bpk-fase)), 0 var(--bpk-fase));
  isolation: isolate;
  filter: drop-shadow(0 8px 21px rgba(12, 45, 86, .14));
  transition: transform .2s ease;
  opacity: 1 !important;
  transform: none !important;
  text-align: left;
  color: var(--bpk-text-2);
  font-family: var(--bpk-sans);
}
body #preise .plan::before,
body .prose .bilanzo-pricing-modern .pricing-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bpk-weiss);
  clip-path: polygon(calc(var(--bpk-fase) - 0.6px) 0, calc(100% - var(--bpk-fase) + 0.6px) 0, 100% calc(var(--bpk-fase) - 0.6px), 100% calc(100% - var(--bpk-fase) + 0.6px), calc(100% - var(--bpk-fase) + 0.6px) 100%, calc(var(--bpk-fase) - 0.6px) 100%, 0 calc(100% - var(--bpk-fase) + 0.6px), 0 calc(var(--bpk-fase) - 0.6px));
  z-index: -1;
}
body #preise .plan:hover,
body .prose .bilanzo-pricing-modern .pricing-card:hover { transform: none !important; box-shadow: none; }

/* ---- Empfohlen: gefuellt blau, gleich auf beiden Seiten ---- */
body #preise .plan.plan-featured,
body .prose .bilanzo-pricing-modern .pricing-card.popular { background: var(--empfohlen-farbe); color: var(--bpk-weiss); }
body #preise .plan.plan-featured::before,
body .prose .bilanzo-pricing-modern .pricing-card.popular::before { background: var(--empfohlen-farbe); }

/* Abzeichen oben rechts in der Karte */
body #preise .plan-badge,
body .prose .bilanzo-pricing-modern .popular-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  transform: none;
  padding: 3px 8px;
  background: var(--bpk-weiss);
  color: var(--empfohlen-farbe);
  border-radius: 0 !important;
  font-family: var(--bpk-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px);
  z-index: 2;
}

/* ---- Kopf: Name, Untertitel ---- */
body #preise .plan-label,
body .prose .bilanzo-pricing-modern .plan-name {
  font-family: var(--bpk-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--bpk-text);
  margin: 0 0 5px;
}
body #preise .plan-featured .plan-label,
body .prose .bilanzo-pricing-modern .popular .plan-name { color: var(--bpk-weiss); }
body .prose .bilanzo-pricing-modern .card-header { text-align: left; margin: 0 0 13px; padding: 0; }
body .prose .bilanzo-pricing-modern .plan-description,
body #preise .plan-price-sub {
  font-family: var(--bpk-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--bpk-text-2);
  margin: 0;
  text-align: left;
}
body .prose .bilanzo-pricing-modern .popular .plan-description,
body #preise .plan-featured .plan-price-sub,
body #preise .plan-featured .plan-price-sub span,
body #preise .plan-featured .plan-discount { color: var(--bpk-weiss); }

/* ---- Preis ---- */
body .prose .bilanzo-pricing-modern .card-pricing { text-align: left; margin: 0 0 13px; }
body .prose .bilanzo-pricing-modern .price-display,
body #preise .plan-price { display: flex; align-items: baseline; justify-content: flex-start; gap: 5px; margin: 0 0 5px; }
body .prose .bilanzo-pricing-modern .price,
body #preise .plan-amount,
body #preise .plan-price-free {
  font-family: var(--bpk-sans);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--bpk-text);
}
body .prose .bilanzo-pricing-modern .currency,
body .prose .bilanzo-pricing-modern .period,
body #preise .plan-currency,
body #preise .plan-period { font-size: 13px; font-weight: 500; color: var(--bpk-text-2); }
body .prose .bilanzo-pricing-modern .popular .price,
body .prose .bilanzo-pricing-modern .popular .currency,
body .prose .bilanzo-pricing-modern .popular .period,
body #preise .plan-featured .plan-amount,
body #preise .plan-featured .plan-price-free,
body #preise .plan-featured .plan-currency,
body #preise .plan-featured .plan-period { color: var(--bpk-weiss); }
body .prose .bilanzo-pricing-modern .billing-info,
body #preise .plan-vat { font-size: 13px; color: var(--bpk-text-2); opacity: 1; }
body .prose .bilanzo-pricing-modern .popular .billing-info,
body #preise .plan-featured .plan-vat { color: var(--bpk-weiss); }

/* ---- Merkmale ---- */
body .prose .bilanzo-pricing-modern .card-features,
body #preise .plan-features { flex: 1 1 auto; margin: 0 0 21px; padding: 13px 0 0; border-top: 1px solid var(--bpk-rahmen); }
body #preise .plan-featured .plan-features,
body .prose .bilanzo-pricing-modern .popular .card-features { border-top-color: rgba(255, 255, 255, .25); }
body .prose .bilanzo-pricing-modern .feature-list { margin: 0; padding: 0; list-style: none; }
body .prose .bilanzo-pricing-modern .feature-list li,
body #preise .plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  margin: 0;
  border: 0;
  font-family: var(--bpk-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--bpk-text-2);
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
body .prose .bilanzo-pricing-modern .popular .feature-list li,
body #preise .plan-featured .plan-feature { color: var(--bpk-weiss); }
body .prose .bilanzo-pricing-modern .feature-icon,
body #preise .plan-check { width: 13px; height: 13px; flex-shrink: 0; margin-top: 4px; color: var(--bpk-akzent); }
body .prose .bilanzo-pricing-modern .popular .feature-icon,
body #preise .plan-featured .plan-check { color: var(--bpk-weiss); }
body .prose .bilanzo-pricing-modern .feature-highlight { font-weight: 600; color: var(--bpk-text); }
body .prose .bilanzo-pricing-modern .popular .feature-highlight,
body .prose .bilanzo-pricing-modern .popular .feature-highlight strong,
body .prose .bilanzo-pricing-modern .popular strong { color: var(--bpk-weiss); }
body #preise .plan-feature-off { color: var(--bpk-text-2); }
body #preise .plan-featured .plan-feature-off { color: var(--bpk-weiss); }
body #preise .plan-discount-blue { color: #0B7A5E; }

/* ---- Knopf: abgeschnittene Ecken, blau ---- */
body .prose .bilanzo-pricing-modern .card-action { margin-top: auto; text-align: left; }
body .prose .bilanzo-pricing-modern .btn-plan,
body #preise .plan-cta {
  position: relative;
  display: block;
  width: 100%;
  margin-top: auto;
  padding: 13px 21px;
  background: var(--bpk-blau);
  color: var(--bpk-weiss) !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--bpk-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  clip-path: polygon(var(--bpk-fase-k) 0, calc(100% - var(--bpk-fase-k)) 0, 100% var(--bpk-fase-k), 100% calc(100% - var(--bpk-fase-k)), calc(100% - var(--bpk-fase-k)) 100%, var(--bpk-fase-k) 100%, 0 calc(100% - var(--bpk-fase-k)), 0 var(--bpk-fase-k));
  isolation: isolate;
  transition: background .2s ease;
}
body .prose .bilanzo-pricing-modern .btn-plan::before,
body #preise .plan-cta::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bpk-weiss);
  clip-path: polygon(calc(var(--bpk-fase-k) - 0.6px) 0, calc(100% - var(--bpk-fase-k) + 0.6px) 0, 100% calc(var(--bpk-fase-k) - 0.6px), 100% calc(100% - var(--bpk-fase-k) + 0.6px), calc(100% - var(--bpk-fase-k) + 0.6px) 100%, calc(var(--bpk-fase-k) - 0.6px) 100%, 0 calc(100% - var(--bpk-fase-k) + 0.6px), 0 calc(var(--bpk-fase-k) - 0.6px));
  z-index: -1;
}
/* Normale Karte: weisser Knopf mit blauem Rand und blauer Schrift (Text liegt ueber ::before) */
body .prose .bilanzo-pricing-modern .btn-plan,
body #preise .plan-cta { color: var(--bpk-blau) !important; }
body .prose .bilanzo-pricing-modern .btn-plan:hover::before,
body #preise .plan-cta:hover::before { background: #EEF4F8; }
/* Empfohlen: gefuellter weisser Knopf, blaue Schrift; und der Hauptknopf der Preisseite gleich */
body .prose .bilanzo-pricing-modern .popular .btn-plan,
body #preise .plan-featured .plan-cta { background: var(--bpk-weiss) !important; color: var(--empfohlen-farbe) !important; }
body .prose .bilanzo-pricing-modern .popular .btn-plan::before,
body #preise .plan-featured .plan-cta::before { background: var(--bpk-weiss); }
body .prose .bilanzo-pricing-modern .popular .btn-plan:hover::before,
body #preise .plan-featured .plan-cta:hover::before { background: #EEF4F8; }
body .prose .bilanzo-pricing-modern .btn-plan:focus-visible,
body #preise .plan-cta:focus-visible { outline: 2px solid var(--bpk-blau); outline-offset: 3px; }

/* ---- Gruender-Band der Preisseite: gleiche Ecken ---- */
body .prose .bilanzo-pricing-modern .pricing-gruender {
  border-radius: 0;
  border: 0;
  background: #EEF4F8;
  clip-path: polygon(var(--bpk-fase) 0, calc(100% - var(--bpk-fase)) 0, 100% var(--bpk-fase), 100% calc(100% - var(--bpk-fase)), calc(100% - var(--bpk-fase)) 100%, var(--bpk-fase) 100%, 0 calc(100% - var(--bpk-fase)), 0 var(--bpk-fase));
}
body .prose .bilanzo-pricing-modern .pricing-gruender-aktion .btn-plan { display: block; }
/* Umschalter-Pille und Sparbadge der Preisseite: keine runden Ecken */
body .prose .bilanzo-pricing-modern .billing-toggle { border-radius: 0; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
body .prose .bilanzo-pricing-modern .save-badge { border-radius: 0; clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }

/* ---- Startseite: Umschalter und weitere Knoepfe im Preisabschnitt, gleiche Fase wie auf der Preisseite ---- */
body #preise .billing-toggle { border-radius: 0; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
body #preise .billing-option { border-radius: 0; clip-path: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px); }
body #preise .billing-option[role="button"]:focus-visible { outline: 2px solid var(--bpk-blau); outline-offset: 3px; }
body #preise .btn:not(.plan-cta) { border-radius: 0; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }

/* ---- Startseite, weitere Bloecke in #preise (Boris 21.09.): Rechner, FAQ, Vergleichstabelle ohne runde Ecken,
   FAQ-Symbol im geoeffneten Zustand kein Halbgeviertstrich ---- */
body #preise .blz-roi-toggle, body #preise .blz-roi-inner, body #preise .blz-roi-result, body #preise .bfaq-item, body #preise .bcmp-scroll {
  border-radius: 0;
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px);
}
body #preise .blz-roi-toggle button, body #preise .blz-roi-cta {
  border-radius: 0;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
body #preise .bfaq-item[open] summary::after { content: "\00D7"; }

/* ---- Boris-Endlauf 21.09.: Vergleichstabellen-Zeilen (400 px) und Lernmodell-Hinweis ohne Rundung, Rabatt-Text lesbar ---- */
body #preise .bcmp-table tbody tr, body #preise .learning-note { border-radius: 0; }
body #preise .learning-note { clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 13px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); }
body #preise .billing-discount { color: #086A50; }