/*
  Tarif-Karten: Preisraster mit optionaler Hervorhebung. Gleiche Grundmuster wie
  faq-accordion (Section-Hintergrund via data-hintergrund, immer explizit vom
  Aufrufer gesetzt) und card (eyebrow-Badge, Akzent-Token, Container-Queries statt
  Media-Queries). Faerbung ausschliesslich ueber System-Tokens -- kein neuer
  Farbwert, --farbe-akzent kommt unveraendert aus der Marken-Datei (Brand-Petrol).
*/@layer komponenten{.tarif-karten{container-type:inline-size;padding-block:var(--space-16)}.tarif-karten[data-hintergrund="gray"]{background:var(--farbe-flaeche)}.tarif-karten[data-hintergrund="white"]{background:var(--farbe-grund)}.tarif-karten__titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-2xl);font-weight:var(--weight-normal);color:var(--farbe-text);text-align:center;margin-block-end:var(--space-8)}.tarif-karten__untertitel,.tarif-karten__preis-hinweis{max-width:52rem;margin-inline:auto;text-align:center;color:var(--farbe-text-gedaempft)}.tarif-karten__untertitel{margin-block:calc(var(--space-8) * -1) var(--space-3);font-size:var(--text-base);line-height:var(--leading-relaxed)}.tarif-karten__preis-hinweis{margin-block:0 var(--space-8);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.tarif-karten__grid{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--space-6)}.tarif-karten__toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:0.35rem;margin:0 auto var(--space-8);border:1px solid var(--farbe-linie);border-radius:999px;background:color-mix(in srgb, var(--farbe-grund) 88%, transparent);box-shadow:var(--shadow-sm)}.tarif-karten[data-hintergrund="white"] .tarif-karten__toggle{background:color-mix(in srgb, var(--farbe-flaeche) 92%, transparent)}.tarif-karten__toggle-knopf{appearance:none;border:0;background:transparent;color:var(--farbe-text-gedaempft);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);border-radius:999px;padding:0.65rem 1rem;cursor:pointer;transition:background var(--transition-base),color var(--transition-base)}.tarif-karten__toggle-knopf[aria-pressed="true"]{background:var(--farbe-akzent);color:var(--farbe-akzent-kontrast, #fff)}/* Spalten nach tatsaechlicher Breite: Der Container ist die ganze Section, der
     Inhalt sitzt aber im Seitenrand -- bei 48rem war 3-spaltig zu eng (Karte
     ragte bei 768 px ueber den Rand). minmax(0, 1fr) laesst Spalten schrumpfen,
     statt vom Karteninhalt (min-content) aufgeweitet zu werden. */@container (min-width: 40rem){.tarif-karten__grid{grid-template-columns:repeat(2, minmax(0, 1fr));align-items:start}}@container (min-width: 64rem){.tarif-karten__grid{grid-template-columns:repeat(3, minmax(0, 1fr))}}.tarif-karten__karte{position:relative;display:flex;flex-direction:column;gap:var(--space-4);background:var(--farbe-grund);border:1px solid var(--farbe-linie);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-6);transition:box-shadow var(--transition-base),transform var(--transition-base)}/* Karten bleiben auch auf hintergrund="white" von der Section abgesetzt --
     gleiches Umkehr-Prinzip wie faq-accordion__item. */.tarif-karten[data-hintergrund="white"] .tarif-karten__karte{background:var(--farbe-flaeche)}.tarif-karten__karte[data-hervorgehoben="true"]{border-color:var(--farbe-akzent);box-shadow:var(--shadow-xl)}@container (min-width: 48rem){.tarif-karten__karte[data-hervorgehoben="true"]{transform:translateY(-0.5rem)}}.tarif-karten__badge{align-self:flex-start}.tarif-karten__name{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-xl);font-weight:var(--weight-normal);line-height:var(--leading-snug);color:var(--farbe-text)}.tarif-karten__preis{display:flex;align-items:baseline;gap:var(--space-2);font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--farbe-akzent)}.tarif-karten__dauer{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:var(--weight-normal);color:var(--farbe-text-gedaempft)}.tarif-karten__beschreibung{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft)}.tarif-karten__features{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;padding:0;margin:0}.tarif-karten__feature{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--farbe-text)}.tarif-karten__feature-icon{flex-shrink:0;display:inline-flex;width:1.1rem;height:1.1rem;color:var(--farbe-akzent);margin-block-start:0.15rem}.tarif-karten__feature-icon svg{width:100%;height:100%}.tarif-karten__cta{margin-block-start:auto;padding-block-start:var(--space-2)}.tarif-karten__cta .btn{width:100%;justify-content:center}.tarif-karten__vergleich{margin-block-start:var(--space-12);border-top:1px solid color-mix(in srgb, var(--farbe-linie) 82%, transparent);padding-block-start:var(--space-10)}.tarif-karten__vergleich-titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-2xl);font-weight:var(--weight-normal);color:var(--farbe-text);text-align:center;margin-block-end:var(--space-3)}.tarif-karten__vergleich-einleitung,.tarif-karten__fussnote{max-width:56rem;margin-inline:auto;text-align:center;color:var(--farbe-text-gedaempft)}.tarif-karten__vergleich-einleitung{margin-block:0 var(--space-6);font-size:var(--text-base);line-height:var(--leading-relaxed)}.tarif-karten__vergleich-wrap{overflow-x:auto;border:1px solid var(--farbe-linie);border-radius:var(--radius-xl);background:var(--farbe-grund);box-shadow:var(--shadow-md)}.tarif-karten[data-hintergrund="white"] .tarif-karten__vergleich-wrap{background:var(--farbe-flaeche)}.tarif-karten__vergleich-tabelle{width:100%;min-width:48rem;border-collapse:collapse}.tarif-karten__vergleich-tabelle th,.tarif-karten__vergleich-tabelle td{padding:var(--space-4);border-bottom:1px solid color-mix(in srgb, var(--farbe-linie) 80%, transparent);text-align:left;vertical-align:top}.tarif-karten__vergleich-tabelle thead th{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--farbe-text);background:color-mix(in srgb, var(--farbe-akzent) 7%, var(--farbe-grund))}.tarif-karten[data-hintergrund="white"] .tarif-karten__vergleich-tabelle thead th{background:color-mix(in srgb, var(--farbe-akzent) 7%, var(--farbe-flaeche))}.tarif-karten__vergleich-tabelle tbody th{width:25%;min-width:14rem;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--farbe-text)}.tarif-karten__vergleich-tabelle tbody td{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text)}.tarif-karten__vergleich-tabelle td[data-betont="true"]{background:color-mix(in srgb, var(--farbe-akzent) 5%, transparent)}.tarif-karten__gruppenzeile th{font-size:var(--text-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--farbe-text-gedaempft);background:color-mix(in srgb, var(--farbe-akzent) 4%, transparent)}.tarif-karten__status{display:inline-flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-medium)}.tarif-karten__status::before{content:'';inline-size:0.6rem;block-size:0.6rem;border-radius:999px;background:var(--farbe-akzent);flex-shrink:0}.tarif-karten__status--neutral::before{background:var(--farbe-text-gedaempft)}.tarif-karten__fussnote{margin-block-start:var(--space-4);font-size:var(--text-sm);line-height:var(--leading-relaxed)}}