/**
 * Pricing Component - CORRECTED SPACING
 * Juliana y Fadi Tango Website
 * 
 * FIX: Korrekte Abstände zwischen Karten-Containern
 */

/* ==================== PRICING INTRO ==================== */

.pricing-intro {
    text-align: center;
    font-size: var(--font-size-lg);
    max-width: 800px;
    margin: 0 auto 3rem;
    color: #e0e0e0;
    line-height: 1.8;
}

.pricing-intro--tight {
    margin-bottom: 2rem;
}

/* ==================== AGB HINWEIS ==================== */

.pricing-agb-hint {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-sm);
    border-top: 1px solid #2a2a2a;
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
    text-align: center;
    letter-spacing: 0.3px;
}

.cta-section .pricing-agb-hint {
    border-top-color: #333;
    margin-top: var(--spacing-xl);
    font-size: var(--font-size-xs);
}

.pricing-agb-hint a {
    color: var(--color-gray-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-base);
}

.pricing-agb-hint a:hover {
    color: var(--color-text-secondary);
}

/* ==================== PRICING BOX WRAPPER ==================== */

.pricing-box {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    box-shadow: var(--shadow-glow-white);
    /* Vertikal (oben/unten) unverändert fluid wie zuvor. Horizontal
       (links/rechts) reduziert, aber bewusst nah am .grid-3-col-Gap
       (2.5rem/40px) gehalten: Der im Screenshot sichtbare Abstand
       Box-Rahmen->Karte ist AUSSCHLIESSLICH das eigene Padding dieser
       Box - .container (base.css) liegt eine Ebene weiter außen und
       beeinflusst diesen sichtbaren Innenabstand nicht (Denkfehler in
       der Vorversion: fälschlich als Summe zweier Paddings berechnet,
       dadurch auf 1rem/16px unterkorrigiert - deutlich unter dem
       40px-Kartenabstand, siehe vorheriger Screenshot "Overshoot").
       Neuer Zielwert 2rem liegt näher am Kartenabstand, wirkt spürbar
       reduziert ggü. den ursprünglichen 2.5rem, ohne mit den Karten
       optisch zu verschmelzen. Grenzwerte referenzieren die Projekt-
       Spacing-Skala (variables.css), wo exakt passend - 1.25rem hat
       keine eigene Variable, bleibt daher Literal. */
    padding-block: clamp(1.25rem, 4vw + 0.5rem, var(--spacing-lg-alt));
    padding-inline: clamp(var(--spacing-xs), 4vw, var(--spacing-lg));
    margin: 0 0 2rem 0;
}

.pricing-box .pricing-section {
    margin: 0;
    padding: 0;
}

/* Innere Box (Box in Box) — gleicher Stil wie card-price inkl. Hover */
.pricing-inner-box {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-white);
    padding: 2.5rem;
    margin-top: 1.5rem;
    text-align: center;
}

.pricing-section__subtitle {
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    margin: 1rem 0;
    text-align: center;
}

.pricing-section__text {
    color: #e0e0e0;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.8;
    text-align: center;
}

.pricing-section__cta {
    text-align: center;
}

/* ==================== PRICING SECTION ==================== */

.pricing-section {
    margin: var(--spacing-2xl) 0;
}

.pricing-section h2 {
    color: var(--color-primary);
    font-size: var(--font-size-6xl);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    letter-spacing: var(--letter-spacing-wider);
}

/* ==================== PRICING CARDS GRID ==================== */

/* ==================== EINSTIEGSPREIS-BOX (17,50€) ====================
   Eine Box für den gemeinsamen Preis mehrerer Kurse (Einsteiger &
   Wiedereinsteiger, Fundamentals, Milonga) - im selben Design wie die
   "Unsere Philosophie"-Box auf der Über-Uns-Seite (css/pages/ueber-uns.css),
   aber eigenständig benannt, damit Änderungen an der einen die andere nicht
   beeinflussen. Sitzt innerhalb der äußeren .pricing-box. */

.preistier-box {
    text-align: center;
    margin-top: 2rem;
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-white);
    /* Fluid statt fester 2.5rem: Auf schmalen Screens (z.B. 375px) wirkte
       das feste Padding unproportional groß im Verhältnis zur Kartenbreite.
       clamp(min, bevorzugt, max) skaliert stufenlos zwischen 1.25rem (sehr
       schmal, keine exakt passende Spacing-Variable) und --spacing-lg-alt
       (Desktop, wie zuvor - unverändert, entspricht 2.5rem). */
    padding: clamp(1.25rem, 4vw + 0.5rem, var(--spacing-lg-alt));
}

.preistier-box__price {
    font-size: var(--font-size-6xl-alt);
    color: #fff;
    font-weight: var(--font-weight-normal);
    line-height: 1;
}

.preistier-box__divider {
    height: 1px;
    margin-top: 1.5rem;
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
}

.preistier-box__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.preistier-box__grid--2col {
    grid-template-columns: repeat(2, 1fr);
}

.preistier-box__item {
    padding: 0 1.5rem;
    /* Sprachbewusste Worttrennung für lange Wörter (z.B. "Wiedereinsteiger")
       in den schmalen Grid-Spalten (3-spaltig beim 17,50EUR-, 2-spaltig
       beim 20EUR-Preistier). Bewusst hier auf dem gemeinsamen Wrapper
       gesetzt statt separat auf h3/p - hyphens ist eine vererbte
       Eigenschaft, dadurch gilt sie automatisch für Titel UND
       Beschreibungstext darunter. .preistier-box__item wird
       ausschließlich von renderEinstiegspreisBox()/renderZweiterPreistierBox()
       genutzt (siehe includes/pricing-config.php) - kein Scoping auf eine
       zusätzliche Modifier-Klasse nötig, anders als bei den Preiskarten
       mit Badge (dort musste die Regel gezielt auf einzelne Karten
       begrenzt werden, um andere Karten ohne Badge nicht zu beeinflussen -
       hier gibt es dieses Problem nicht, da kein Badge im Spiel ist). */
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

.preistier-box__item:not(:first-child) {
    border-left: 1px solid #333;
}

.preistier-box__item h3 {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.preistier-box__item p {
    color: #ccc;
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0;
}

/* Ab hier bricht die rechte Spalte (Milonga) zuerst in eine neue Zeile um
   (2 Spalten oben, 1 volle Breite darunter) - horizontale statt vertikale
   Trennlinie für die alleinstehende Zeile. */
@media (max-width: 900px) {
    .preistier-box__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .preistier-box__item:nth-child(3) {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid #333;
        padding: 1.5rem 1.5rem 0;
        margin-top: 0.5rem;
    }
}

/* Schmalste Bildschirme: alle drei komplett untereinander. */
@media (max-width: 600px) {
    .preistier-box__grid,
    .preistier-box__grid--2col {
        grid-template-columns: 1fr;
    }

    .preistier-box__item:not(:first-child) {
        border-left: none;
        border-top: 1px solid #333;
        padding: 1.5rem 0 0;
        margin-top: 0.5rem;
    }

    .preistier-box__item:first-child {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

.pricing-cards {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Stack */
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

/* Desktop: 3 Spalten für Gruppenkurse */
@media (min-width: 768px) {
    .pricing-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Generische Utility: Element spannt 2 der 3 Spalten einer
       .pricing-cards-Reihe (z.B. 10er-Karte im Práctica-Layout). */
    .pricing-span-2 {
        grid-column: span 2;
    }

}

/* =====================================================
 * Aktions-Cards: Subgrid-Alignment
 * =====================================================
 *
 * Außerhalb des @media-Blocks damit die Regeln global
 * gelten und nicht vom Breakpoint abhängen.
 *
 * Mobile: 1 Spalte (grid-template-columns: 1fr)
 * Desktop (>768px): 2 Spalten mit Subgrid-Alignment
 */

/* Mobile: Single-Column */
.pricing-cards--aktion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.aktion-card-outer {
    /* Mobile: Card nimmt vollen Platz */
}

.aktion-card-inner {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.aktion-row {
    /* Fluid statt fester var(--spacing-lg)/2rem - war der Hauptgrund für
       den zu großen Abstand in der 'Neu bei uns'-Box auf Mobile.
       Grenzwerte referenzieren die Projekt-Spacing-Skala. */
    padding-left: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    padding-right: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

.aktion-card-inner h3.aktion-row {
    /* War fester var(--spacing-2xl)/4rem - größter Einzelwert in dieser Box,
       hauptverantwortlich für den zu großen Abstand oben (siehe Screenshot).
       Grenzwerte referenzieren die Projekt-Spacing-Skala. */
    padding-top: clamp(var(--spacing-md), 6vw, var(--spacing-2xl));
    padding-bottom: 0;
    margin-top: 0;
}

.aktion-card-inner .card-price__price.aktion-row {
    padding-top: 0.5rem;
    padding-bottom: 0;
    margin: 0;
}

.aktion-card-inner .card-price__description.aktion-row {
    padding-top: 0.75rem;
    padding-bottom: 0;
    margin: 0;
}

.aktion-feature-divider {
    height: 1px;
    background: var(--color-gray-500);
    margin: 0.75rem var(--spacing-lg);
}

.aktion-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-base);
    border-bottom: 1px solid var(--color-gray-500);
    text-align: left;
}

.aktion-feature:last-child,
.aktion-feature--empty:last-child {
    border-bottom: none;
    padding-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

.aktion-feature__check {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    margin-top: 1px;
}

.aktion-feature--empty {
    border-bottom: 1px solid var(--color-gray-500);
}

/* ==================== AKTION: BREITE BOX (Dritter-Tag-Rabatt) ====================
   Volle Breite, unterhalb der zwei Aktions-Karten. Prozent groß links,
   vertikale Trennlinie, Titel/Beschreibung/Häkchen-Liste rechts daneben.
   Auf Mobile (≤700px) rutschen beide Teile untereinander. */

.aktion-wide {
    display: grid;
    grid-template-columns: auto 1px 1fr;
    align-items: center;
    gap: 0 2.5rem;
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: 12px;
    padding: 2.5rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow-glow-white);
}

.aktion-wide__pct {
    text-align: center;
    font-size: var(--font-size-6xl-alt2);
    color: #fff;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    white-space: nowrap;
}

.aktion-wide__pct-suffix {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    letter-spacing: var(--letter-spacing-wide);
    margin-top: 0.4rem;
    font-weight: var(--font-weight-normal);
}

.aktion-wide__vsep {
    align-self: stretch;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(221, 191, 95, 0.35),
        transparent
    );
}

.aktion-wide__title {
    color: var(--color-primary);
    font-size: var(--font-size-3xl);
    margin-bottom: 0.6rem;
    letter-spacing: 1px;
}

.aktion-wide__desc {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.aktion-wide__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aktion-wide__features li {
    padding: 0.4rem 0 0.4rem 1.6rem;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-base);
    border-bottom: 1px solid var(--color-gray-500);
    position: relative;
}

.aktion-wide__features li:last-child {
    border-bottom: none;
}

.aktion-wide__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.4rem;
    color: var(--color-primary);
    font-weight: bold;
}

/* HINWEIS: War zuvor 700px - auf 768px vereinheitlicht, da .aktion-wide
   gemeinsam mit .preistier-box__grid (siehe oben, 900px/600px-Kaskade) auf
   der Preise-Seite gerendert wird. Layout ist ein einfaches 2-Spalten-Grid
   mit Trennlinie (auto 1px 1fr), Risiko der Anhebung ist gering. */
@media (max-width: 768px) {
    .aktion-wide {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .aktion-wide__vsep {
        display: none;
    }

    .aktion-wide__features li {
        text-align: left;
    }
}

/* Desktop: 2 Spalten mit Subgrid */
@media (min-width: 768px) {
    .pricing-cards--aktion {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--aktion-rows, 7), auto);
        gap: 0 1.5rem;
    }

    .aktion-card-outer {
        /* display:contents macht den Wrapper transparent für das Grid —
           .aktion-card-inner wird zum direkten Grid-Item von pricing-cards--aktion
           und kann so subgrid auf die Parent-Rows anwenden */
        display: contents;
    }

    .aktion-card-inner {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / calc(var(--aktion-rows, 7) + 1);
        flex-direction: unset;
        align-items: unset;
            overflow: hidden;
    }

    /* Badge aus dem Subgrid-Flow nehmen: display:contents auf einem Wrapper
       würde helfen, aber einfacher: grid-area auf badge setzen damit er
       keinen eigenen impliziten Row-Track erzeugt */
    .aktion-card-inner .card-price__badge {
        /* Badge teilt sich Row 1 mit h3, beeinflusst aber nicht die Row-Höhe */
        grid-row: 1;
        grid-column: 1;
        position: absolute;
        /* Macht badge unsichtbar für Grid-Größenberechnung */
        align-self: start;
        justify-self: end;
        height: 0; /* Verhindert dass Badge die Row-Höhe aufbläht */
        overflow: visible;
    }

    /* Explizite Row-Zuweisung für alle Subgrid-Kinder:
       nth-child statt nth-of-type weil alle Divs gezählt werden
       Reihenfolge: badge(1) | h3(1) | price(2) | desc(3) | divider(4) | feat1(5) | feat2(6) | feat3(7)
       Badge und h3 teilen Row 1 */
    .aktion-card-inner > .card-price__badge { grid-row: 1; }
    .aktion-card-inner > h3                 { grid-row: 1; }
    .aktion-card-inner > .card-price__price { grid-row: 2; }
    .aktion-card-inner > .card-price__description { grid-row: 3; align-self: start; }
    .aktion-card-inner > .aktion-feature-divider  { grid-row: 4; }
    .aktion-card-inner > .aktion-feature--1 { grid-row: 5; }
    .aktion-card-inner > .aktion-feature--2 { grid-row: 6; }
    .aktion-card-inner > .aktion-feature--3 { grid-row: 7; }
    .aktion-card-inner > .aktion-feature--4 { grid-row: 8; }
    .aktion-card-inner > .aktion-feature--5 { grid-row: 9; }

    .aktion-feature {
        align-self: stretch;
        text-align: left;
    }
}

/* Volle Breite: einzelne Card füllt die komplette Box aus */
.pricing-cards--full {
    grid-template-columns: 1fr;
    /* War geerbt von .pricing-cards (margin-bottom: 3rem) - für die jetzt
       randlose Práctica-Karte zu viel Leerraum vor dem AGB-Hinweis. */
    margin-bottom: 0.5rem;
}

/* Zentrierte Cards (z.B. Privatstunden - 2 Spalten) */
.pricing-cards--centered {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .pricing-cards--centered {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ehemaliger .practica-section-/.practica-grid-/.practica-item-Block
   entfernt: Die Práctica-Preiskarte wird heute über das modernere
   .card-price--practica-System (components/cards.css) gerendert, dieser
   ganze Block war ein nie bereinigter Vorgänger und daher nie aktiv
   wirksam. */

/* ==================== GUTSCHEIN SECTION ==================== */

.gutschein-section {
    background: var(--gradient-dark);
    padding: 3rem;
    border-radius: 12px;
    border: var(--border-width-medium) solid var(--border-color-default);
    margin-top: 2rem;
}

.gutschein-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.gutschein-image {
    aspect-ratio: 1748 / 1240; /* entspricht dem Seitenverhältnis von
        gutschein-preview.jpg - reserviert den Platz vor dem Laden und
        verhindert so einen Layout-Sprung (CLS), analog zu den festen
        Höhen der übrigen Bild-Container (z.B. .highlight-box-image,
        .feature-image). Bei einem künftigen Bildtausch mit anderem
        Seitenverhältnis muss dieser Wert entsprechend angepasst werden. */
    border-radius: 8px;
    overflow: hidden;
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-white);
    transition: box-shadow var(--transition-base);
}

/*.gutschein-image:hover {
    box-shadow: var(--shadow-glow-white-strong);
}*/

.gutschein-image img {
    width: 100%;
    display: block;
    border-radius: 8px;
    transition: transform 0.5s;
}

.gutschein-image:hover img {
    transform: scale(1.05);
}

.gutschein-info h3 {
    color: var(--color-primary);
    font-size: var(--font-size-5xl);
    margin-bottom: 1.5rem;
}

.gutschein-info p {
    color: #e0e0e0;
    margin-bottom: 2rem;
    line-height: 1.8;
}

.gutschein-feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
}

.gutschein-feature-list li {
    color: #e0e0e0;
    margin-bottom: 1rem;
    padding-left: 2rem;
    position: relative;
}

.gutschein-feature-list li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.gutschein-cta {
    margin-top: 2rem;
}


/* ==================== BUTTONS ==================== */

/* .btn/.btn-primary/.btn-secondary liegen zentral in components/buttons.css.
   Preise-Seite nutzt zusätzlich den Modifier .btn-pill. */

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .gutschein-content {
        grid-template-columns: 1fr;
    }
    
    .gutschein-image {
        order: -1;
    }
}

@media (max-width: 480px) {
    .pricing-section {
        margin: 2rem 0;
    }
    
    .gutschein-section {
        padding: 2rem;
    }
}

/* Aktions-Karten (.aktion-card-inner): Verhindert, dass der Titel bei
   schmalen Karten (einspaltig, siehe @media min-width:768px oben, wo die
   2-Spalten-Subgrid-Ansicht endet) in den Eckbereich umbricht, den das
   diagonale Badge (.card-price__badge--small, fix 110x110px) belegt.
   Symmetrische Verengung statt einseitigem padding-right: Der Titel hat
   text-align:center - einseitiges Padding hätte die Box selbst nach
   links verschoben (Text zentriert sich zwar innerhalb der Box, aber die
   Box läge nicht mehr mittig auf der Karte). Stattdessen wird die Box
   auf BEIDEN Seiten gleich stark schmaler (box-sizing:border-box +
   max-width + margin:auto zum Zentrieren) - das ergibt exakt 100px
   Abstand zum Kartenrand auf jeder Seite, obwohl das Badge nur rechts
   sitzt (nötig, damit die Zentrierung erhalten bleibt). Fester Pixel-
   Wert statt clamp(): die Reserve muss auch bei den schmalsten Screens -
   wo das Problem am stärksten auftritt - immer mindestens die
   Badge-Breite abdecken; ein mit der Breite schrumpfender Wert würde
   dort am wenigsten schützen, wo er am nötigsten wäre.
   Bewusst nur auf diese eine Komponente begrenzt (h3.aktion-row), nicht
   auf alle .card-price__badge-Vorkommen im Projekt (z.B. 10er-Karte,
   Pre-CTA-Aktion nutzen eigene, unabhängige Badge-Implementierungen). */
@media (max-width: 767px) {
    .aktion-card-inner h3.aktion-row {
        box-sizing: border-box;
        max-width: calc(100% - 200px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* Kombi-Angebot-Karte (.card-price--centered-content, ausschließlich dort
   verwendet): identisches Kollisionsproblem und identische Lösung wie bei
   .aktion-card-inner h3.aktion-row oben - selbe Badge-Größe (110px,
   card-price__badge--small), daher gleicher 200px-Wert übernommen statt
   neu berechnet. Siehe ausführlichen Kommentar oben für die Begründung
   der symmetrischen Verengung statt einseitigem padding-right. */
@media (max-width: 767px) {
    .card-price--centered-content h3 {
        box-sizing: border-box;
        max-width: calc(100% - 200px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* 5er-Paket-Karte (Privatstunden, .card-price--badge-narrow): identisches
   Kollisionsproblem und identische Lösung wie oben - gleiche Badge-Größe
   (110px, card-price__badge--small), daher gleicher 200px-Wert.
   Bewusst NICHT auf .card-price--privatstunden direkt gesetzt, da diese
   Basisklasse auch die Einzelstunde-Karte trifft, die kein Badge hat und
   daher nicht unnötig eingeengt werden soll - siehe eigene, zusätzliche
   Modifier-Klasse in includes/pricing-config.php (renderPrivatstundenCards()). */
@media (max-width: 767px) {
    .card-price--badge-narrow h3 {
        box-sizing: border-box;
        max-width: calc(100% - 200px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* 10er-Karte-Kombi (.card-price--practica, gestapeltes/einspaltiges Layout
   unterhalb 768px - siehe @media max-width:768px weiter oben, wo
   grid-template-columns:1fr greift): gleiches Kollisionsprinzip wie bei
   den beiden Regeln oben, aber EIGENER, kleinerer Reservierungswert nötig:
   1) größere Badge-Variante hier (card-price__badge OHNE --small = 130px,
      statt 110px bei Kombi-Angebot/5er-Paket), 2) der Titel hat mit "10er
      Karte Kombi" drei statt zwei natürliche Wörter - ein zu großzügiger
      Reservierungswert (wie die 200px oben) hätte hier einen ungewollten
      DREIzeiligen statt zweizeiligen Umbruch erzwungen (empirisch mit
      Playwright verifiziert: ab 140px reserve kippt es auf 3 Zeilen).
      130px liegt sicher unterhalb dieser Schwelle und ergibt "10er Karte" /
      "Kombi" als saubere zwei Zeilen, ohne Badge-Kollision. Eigene Klasse
      (nicht .card-price--badge-narrow von oben wiederverwendet), da diese
      für die kleinere Badge-Größe kalibriert ist und hier zu wenig
      reservieren würde. Bewusst NICHT auf ".card-price--practica__left h3"
      ungescoped gesetzt - träfe sonst versehentlich AUCH die normale
      Práctica-Karte (Freitag, class="card-price card-price--practica" OHNE
      --boxed/--badge-narrow-lg), die kein Badge hat und daher nicht
      unnötig eingeengt werden soll (gleiches Prinzip wie beim 5er-Paket
      oben). Betrifft NUR .card-price--practica__left h3 (den Titel),
      NICHT die Feature-Liste rechts (card-price--practica__right) - diese
      kollidiert nur im zweispaltigen Desktop-Layout, das ist ein
      separates, noch offenes Thema (siehe Besprechung dazu). */
@media (max-width: 767px) {
    .card-price--badge-narrow-lg .card-price--practica__left h3 {
        box-sizing: border-box;
        max-width: calc(100% - 130px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==================== HYPHENATION (Kombi-Angebot & 10er-Karte-Kombi) ====================
   Sprachbewusste Worttrennung für die BESCHREIBUNGSTEXTE (nicht die Titel -
   die haben ihre eigene Lösung oben via max-width) dieser beiden Karten.
   Auslöser: Texte wie "Fundamentals/Milonga" (siehe combo_description,
   class_pass_10_price_label, class_pass_10_feature_1 in common.php) - ein
   Schrägstrich gilt anders als ein Bindestrich NICHT zuverlässig als
   automatische Browser-Umbruchstelle. Ergänzt <wbr> direkt nach dem "/"
   im Text selbst (siehe common.php, dort separat gepflegt) um eine
   generelle hyphens:auto-Absicherung für den Fall, dass an anderer
   Stelle im Text ein zu langes Wort ungünstig umbrechen würde - gleiches
   Prinzip wie bei der Privatstunden-Seite (body.page-privatstunden),
   hier aber über die bereits vorhandenen, exklusiven Scoping-Klassen
   dieser beiden Karten gescoped (KEINE neuen Klassen nötig):
   - .card-price--centered-content: ausschließlich Kombi-Angebot
   - .card-price--badge-narrow-lg: ausschließlich 10er-Karte-Kombi
   Bewusst NUR auf description/note/features gesetzt, NICHT auf h3 (dort
   soll weiterhin ausschließlich der Bindestrich-Umbruch bzw. die
   max-width-Regel greifen, kein zusätzliches Wörterbuch-Trennverhalten). */
.card-price--centered-content .card-price__description,
.card-price--badge-narrow-lg .card-price--practica__note,
.card-price--badge-narrow-lg .card-price--practica__features {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}