/**
 * Card Components
 * Juliana y Fadi Tango Website
 * 
 * Basiert auf Design aus privatstunden.php & shows-workshops.php
 * Verschiedene Card-Typen für unterschiedliche Verwendungen
 */

/* ==================== BASE CARD ==================== */

.card {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-glow-white);
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base);
}

.card:hover {
    transform: var(--transform-lift-md);
    box-shadow: var(--shadow-glow-white-strong);
}

/* ==================== CARD VARIANTS ==================== */

/* ==================== BENEFIT CARD (2x2 Grid Style) ==================== */

.card-benefit {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    /* Fluid statt starrem 2rem - komplett ohne Mobile-Anpassung (Fluid-
       Design-Audit Kategorie B2/B3). Desktop-Maximum unverändert. */
    padding: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    text-align: center;
   /* transition: transform var(--transition-base), 
                border-color var(--transition-base);*/
	transition: box-shadow var(--transition-base);
    box-shadow: var(--shadow-glow-gold);
}


.card-benefit:hover {
    /*transform: translateY(-10px);*/
	/*transform: scale(1.05); */
	transform: none;  /*← Explizit: KEINE Translation*/
    border-color: var(--border-color-default);  /*← Explizit: Border bleibt*/
    box-shadow: var(--shadow-glow-gold-strong);/*0px 10px 30px rgba(255, 255, 255, 0.5);*/
}


.card-benefit__icon {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.card-benefit__icon svg {
    width: 48px;
    height: 48px;
    stroke: var(--color-primary);
    fill: none;
    stroke-width: 1.4;
}

.card-benefit h3 {
    color: var(--color-text-accent);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-wide);
}

.card-benefit p {
    color: var(--color-text-primary);
    line-height: 1.7;
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-base);
}

/* Hervorgehobene Karte: goldener Rahmen, größere Typografie.
   Verschoben aus sections.css (lag dort ursprünglich nur scoped auf
   .benefits-section, dadurch außerhalb dieses einen Abschnitts nicht
   nutzbar) - jetzt ein echter, überall einsetzbarer Karten-Modifier. */
.card-benefit--featured {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-gold-strong);
    /* Fluid statt starrem 2.5rem 2rem - komplett ohne Mobile-Anpassung.
       Desktop-Maximum unverändert. Icon-Größe/Schriftgrößen dieser
       Variante bewusst unverändert gelassen (spätere globale
       Typografie-Anpassung, nicht Teil dieses Schritts). */
    padding: clamp(var(--spacing-md), 5vw, var(--spacing-lg-alt))
             clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

.card-benefit--featured .card-benefit__icon svg {
    width: 60px;
    height: 60px;
}

.card-benefit.card-benefit--featured h3 {
    font-size: var(--font-size-6xl);
}

.card-benefit.card-benefit--featured p {
    font-size: var(--font-size-2xl);
}

/* Horizontales Layout: Icon links, Text rechts, linksbündig - statt der
   Standard-Anordnung (Icon oben, Text darunter, zentriert). Übernimmt
   automatisch Farben/Rahmen/Schatten von der Basis-Klasse .card-benefit,
   ändert nur die Anordnung. */
.card-benefit--row {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    text-align: left;
    padding: 1.8rem 2.2rem;
}

.card-benefit--row .card-benefit__icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Kombination --row + --featured: die hervorgehobene Karte soll auch
   innerhalb einer horizontalen Kartenreihe wieder zentriert/vertikal
   erscheinen (entspricht dem bisherigen Verhalten von .vorteil-card--featured).
   Höhere Spezifität (2 Klassen) sorgt für eindeutigen Vorrang, unabhängig
   von der Reihenfolge der Regeln in dieser Datei. */
.card-benefit--row.card-benefit--featured {
    flex-direction: column;
    text-align: center;
}

/* Deaktiviert den Hover-Glow der Basis-Klasse - für Karten, die nicht
   interaktiv/klickbar sind (z.B. reine Info-Karten bei Privatstunden). */
.card-benefit--static:hover {
    box-shadow: var(--shadow-glow-gold);
}

/* Featured-Karte im static-Zustand: Hover soll exakt den Ruhezustand
   beibehalten (verstärkter Glow + goldener Rahmen), keine Abschwächung
   durch die Basis-Klasse. */
.card-benefit--featured.card-benefit--static:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-gold-strong);
}

/* Engeres Padding - für dichter gepackte Grid-Layouts (z.B. 4 gleichwertige
   Karten nebeneinander), unabhängig vom umschließenden Grid-Typ. */
.card-benefit--compact {
    padding: 1rem;
}

/* ==================== PRICE CARD ==================== */

.card-price {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    /* Fluid statt starrem var(--spacing-xl) var(--spacing-lg) - war
       komplett ohne Mobile-Anpassung (Fluid-Design-Audit Kategorie B1).
       Desktop-Maximum unverändert identisch zum bisherigen Fixwert,
       Minimum reduziert für schmale Screens. Grenzwerte referenzieren
       die Projekt-Spacing-Skala. */
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl))
             clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
    text-align: center;
    transition: transform var(--transition-base), 
                box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-glow-white);
    /* Flex-Column: ermöglicht margin-top: auto auf Features,
       damit diese immer auf gleicher Höhe starten */
    display: flex;
    flex-direction: column;
}

.card-price:hover {
    /*transform: translateY(-10px);*/
    /*box-shadow: var(--shadow-glow-white-strong);/*0px 10px 30px rgba(255, 255, 255, 0.5);*/
}

/* Vertikal zentrierter Inhalt als GANZES (statt oben ausgerichtet) - für
   Karten ohne Features/CTA-Button (die sich sonst per margin-top:auto ans
   Ende schieben würden). Wichtig, wenn die Karte in einer Reihe neben
   einer höheren Karte steht und per CSS Grid auf deren Höhe gestreckt
   wird - sonst bleibt unten ungewollt Leerraum stehen. */
.card-price--centered-content {
    justify-content: center;
}

.card-price h3 {
    font-size: var(--font-size-4xl);
    color: var(--color-text-accent);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1.3;
    min-height: 2.6em; /* reserviert Platz für 2 Zeilen, damit Preise darunter fluchten */
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
}

.card-price__price {
    font-size: var(--font-size-6xl-alt);
    color: var(--color-white);
    font-weight: var(--font-weight-normal);
    margin: var(--spacing-md) 0;
}

.card-price__price span {
    font-size: var(--font-size-xl);
    color: var(--color-gray-300);
}

.card-price__price-asterisk {
    font-size: var(--font-size-xl);
    color: var(--color-gray-300);
    vertical-align: super;
    margin-left: 2px;
}

.card-price__note {
    font-size: var(--font-size-sm);
    color: var(--color-gray-300);
    margin: -0.75rem 0 var(--spacing-md);
}

.card-price__label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-300);
    margin-top: -1rem;
    letter-spacing: 1.65px;
}

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

/* Privatstunden-Karten (Einzelstunde/5er Paket) - Titel sind immer
   einzeilig, die für mehrzeilige Titel (z.B. Preise-Seite: Fundamentals,
   Themenkurs) reservierte Mindesthöhe erzeugt hier nur unnötig großen
   Leerraum zum Preis. Gescoped über den Kartentyp (nicht die Seite), damit
   es konsistent auf der Privatstunden- UND der Preise-Seite greift - beide
   nutzen dieselbe renderPrivatstundenCards()-Funktion. */
.card-price--privatstunden h3 {
    font-size: var(--font-size-5xl);
    min-height: 0;
    margin-bottom: 0.25rem;
}

.card-price--privatstunden .card-price__price {
    margin-top: 0.25rem;
}

.card-price__description {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-base);
    /* Verteilt mehrzeiligen, zentrierten Text gleichmäßiger über die
       Zeilen (statt "so viel wie möglich in Zeile 1") - behebt die
       optisch schiefe/asymmetrische Wirkung bei ungleich langen Zeilen.
       Wird von älteren Browsern einfach ignoriert (normaler Umbruch). */
    text-wrap: balance;
}

.card-price__features {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0;
    text-align: left;
    /* HINWEIS: margin-top: auto war hier — wurde entfernt.
       Features der Aktions-Cards werden über aktion-card-inner gesteuert,
       da die Aktions-Cards das Subgrid-System nutzen (nicht card-price__features). */
}

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

.card-price__features li:last-child {
    border-bottom: none;
}

/* .card-price__features--compact entfernt: nie ins Markup eingebunden,
   Markup nutzt durchgängig nur die Basis .card-price__features. */

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

/* .card-price__info entfernt: nie ins Markup eingebunden. */

.card-price__location {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-base);
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
}

.card-price__location a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.card-price__location a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

/* Featured Badge für Price Card
 *
 * Funktionsprinzip:
 * Das Badge liegt in einem unsichtbaren quadratischen Container (overflow:hidden
 * liegt auf .card-price), der exakt in der rechten oberen Ecke positioniert ist.
 * Das Band selbst wird mit translateX(-50%) + rotate(45deg) diagonal gezogen.
 * Durch diesen Ansatz ist die Zentrierung text-längen-unabhängig, da immer
 * der gleiche Rotationspunkt (top:0, right:0) genutzt wird.
 */
.card-price__badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;     /* Seitenlänge des imaginären Dreiecks */
    height: 130px;    /* muss gleich width sein */
    overflow: hidden;
    pointer-events: none;
}

.card-price__badge::after {
    content: attr(data-badge);
    position: absolute;
    top: 28px;
    right: -36px;
    width: 160px;     /* breiter als die Diagonale des Containers */
    background: var(--color-primary);
    color: var(--color-black);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 1.5px;
    text-align: center;
    padding: 5px 0;
    transform: rotate(45deg);
    white-space: nowrap;
}

/* Badge Variante: Klein (für 2- oder 3-spaltige Grids) */
.card-price__badge--small {
    width: 110px;
    height: 110px;
}

.card-price__badge--small::after {
    top: 22px;
    right: -32px;
    width: 140px;
    font-size: var(--font-size-xs);
    padding: 4px 0;
}

/* Badge Standard (für 1-spaltige oder große Boxen wie 10er Karte) */
/* Nutzt die Basis-Werte oben */

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

@media (max-width: 768px) {
    .card {
        padding: var(--spacing-lg);
    }
}

/* ==================== PRICE CARD - ERSPARNIS STYLE ==================== */
/* Für badge_style = 'ersparnis' (practicamos-juntos.php Style) */

.card-price__highlight-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color-default);
    text-align: center;
}

.card-price__badge-inline {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

.card-price__ersparnis {
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-md);
    margin: var(--spacing-sm) 0 0 0;
    letter-spacing: var(--letter-spacing-base);
}

/* ==================== PRÁCTICA CARD — Zweispaltiges Layout ==================== */

.card-price--practica {
    display: grid;
    /* Spalten: Info | Features */
    grid-template-columns: 1fr 1fr;
    /* Rows: Inhalt | Adresse */
    grid-template-rows: auto auto;
    text-align: left;
    /* Kein overflow:hidden damit Location-Row voll durchlaufen kann */
    /* "Innere Box" bewusst entfernt: die Karte sitzt bereits in der
       äußeren .pricing-box - eine eigene Box-Optik hier würde eine
       "Box in der Box" erzeugen. */
    background: none;
    border: none;
    box-shadow: none;
    /* Ohne sichtbaren Rahmen braucht es nicht mehr das großzügige
       Innen-Padding der Basis-.card-price (var(--spacing-2xl) oben/unten
       = 4rem) - das wirkte hier nur wie unnötiger Leerraum. */
    /* Horizontal fluid statt fixem var(--spacing-lg)=32px - war der
       einzige Wert in der gesamten Practica-Karten-Kette, der bei
       schmalen Viewports NICHT mitschrumpfte. clamp()-Koeffizient 4vw
       bewusst so gewählt, dass bei 300px exakt 12px erreicht werden
       (4vw * 300px = 12px), Maximum (32px) bleibt ab 800px Breite
       erhalten - Desktop-Darstellung unverändert. Vertikales Padding
       (0.5rem) bleibt bewusst fix, davon nicht betroffen. */
    padding: 0.5rem clamp(0.75rem, 4vw, var(--spacing-lg));
}

.card-price--practica.card-price--boxed {
    background: var(--gradient-dark);
    border: var(--border-width-medium) solid var(--border-color-default);
    box-shadow: var(--shadow-glow-white);
    /* Fluid statt fester 4rem/2rem: War auf schmalen Screens der größte
       Padding-Wert im gesamten Preise-Bereich und wirkte unproportional
       (siehe Mobile-Audit). clamp() skaliert stufenlos zwischen
       --spacing-md (schmal) und --spacing-2xl (Desktop, wie zuvor) bzw.
       --spacing-sm und --spacing-lg seitlich. */
    padding: clamp(var(--spacing-md), 5vw + 0.5rem, var(--spacing-2xl)) clamp(var(--spacing-sm), 3vw, var(--spacing-lg));
}

.card-price--practica__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.01rem 1.75rem; /*1rem 1.75rem;*/
}

.card-price--practica__right {
    display: flex;
    align-items: center;
    padding: 0.01rem 1.75rem; /*1rem 1.75rem;*/
    border-left: 1px solid rgba(221, 191, 95, 0.2);
}

/* h3 + Preis linksbündig, kein extra Margin */
.card-price--practica .card-price__price {
    text-align: center;
    margin: 0;
}

/* Hinweis-Text */
.card-price--practica__note {
    font-size: var(--font-size-sm);
    color: var(--color-white);
    letter-spacing: var(--letter-spacing-base);
    line-height: 1.5;
    margin: 0;
}

/* Adresse: volle Breite über beide Spalten
 * Trennlinie: goldener Gradient (identisch zu card-price__location
 * und den Terminkarten), mit kurzem Abstand zur vertikalen Mittellinie
 * Schriftgröße/Padding/letter-spacing bewusst identisch zu .event-location
 * (css/components/termine.css) - beide zeigen dasselbe UI-Konzept
 * (Icon + verlinkte Adresse + goldene Trennlinie) und sollen einheitlich
 * wirken, obwohl sie technisch getrennte Komponenten sind. */
.card-price--practica__location {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    /* Horizontal fluid statt fixem 1.75rem=28px - war wie das Padding
       von .card-price--practica selbst komplett unverändert über alle
       Breiten hinweg. clamp()-Koeffizient 4.67vw bewusst so gewählt,
       dass bei 300px exakt 14px erreicht werden (4.67vw * 300px ≈ 14px),
       Maximum (28px) bleibt ab 600px Breite erhalten - Desktop-
       Darstellung unverändert. Vertikales Padding (0.75rem) bleibt
       bewusst fix, davon nicht betroffen. */
    padding: 0.75rem clamp(0.875rem, 4.67vw, 1.75rem);
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-base);
    background-image: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
}

.card-price--practica__location a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s;
}

.card-price--practica__location a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Farbe zentral über Variable statt im SVG-Attribut hardcodiert (siehe
   pricing-config.php: dort stroke/fill="currentColor", erbt von hier). */
.card-price--practica__location-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-pin-red);
}

/* Features */
.card-price--practica__features {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.card-price--practica__features li {
    padding: 0.5rem 0 0.5rem 1.6rem;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-base);
    border-bottom: 1px solid var(--border-color-default);
    line-height: 1.5;
    position: relative;
}

.card-price--practica__features li:last-child {
    border-bottom: none;
}

.card-price--practica__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Mobile: einspaltig
   HINWEIS: War zuvor 767px (Inkonsistenz zu allen anderen 768px-Stellen im
   Projekt) - auf den projektweiten Standard-Breakpoint 768px korrigiert,
   damit .card-price--practica bei exakt 768px Breite (z.B. Tablet Hochformat)
   nicht abweichend vom Rest der Seite dargestellt wird. */
@media (max-width: 768px) {
    .card-price--practica {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .card-price--practica__left,
    .card-price--practica__right {
        /* Fluid statt fixem 1.25rem 1.5rem - war unabhängig vom bereits
           fluiden äußeren Padding (.card-price--practica.card-price--boxed
           oben) und blieb bei sehr schmalen Viewports (~300px) unverändert
           groß, während das äußere Padding längst weiter geschrumpft war.
           Dadurch wirkte die Práctica-Card bei ~300px unsymmetrisch/eng.
           Minimum bei 300px auf 0.5rem (8px) gesetzt. Nebeneffekt: um
           dieses Minimum exakt bei 300px zu erreichen, wird der
           horizontale Maximalwert bei 768px dadurch ebenfalls leicht
           reduziert (~1.3rem statt zuvor 1.5rem) - visuell nicht
           relevant, aber falls der ursprüngliche 768px-Wert exakt
           erhalten bleiben soll, gerne separat nachschärfen. */
        padding: clamp(0.5rem, 2.7vw, 1.25rem) clamp(0.5rem, 2.7vw, 1.5rem);
    }

    .card-price--practica__right {
        border-left: none;
        border-top: 1px solid rgba(221, 191, 95, 0.2);
    }

    .card-price--practica .card-price__price {
        text-align: center;
    }

    .card-price--practica__features li {
        text-align: left;
    }

    .card-price--practica__location {
        justify-content: center;
    }
}

/* ==================== RESPONSIVE (480px) ==================== */

@media (max-width: 480px) {
    /* Normale Benefit-Karten in .card-benefit--row (Icon neben Titel)
       wechseln auf sehr schmalen Screens auf gestapeltes Layout - gleiche
       Formel, die .card-benefit--row.card-benefit--featured bereits bei
       jeder Breite nutzt, hier nur zusätzlich für die "normalen" Karten
       ab 480px aktiviert. */
    .card-benefit--row {
        flex-direction: column;
        text-align: center;
    }

    .card-benefit--row .card-benefit__icon {
        margin-bottom: var(--spacing-sm);
    }
}

/* ==================== HYPHENATION (Privatstunden-Seite) ====================
   Sprachbewusste Worttrennung für den "Benefits"- und den "Ablauf"-Block.
   Bewusst NUR auf der Privatstunden-Seite aktiv (gescopt über die
   body.page-privatstunden-Klasse) - .card-benefit selbst wird
   projektweit auch auf der Einsteiger- und der Shows-&-Workshops-Seite
   verwendet, dort soll sich am Verhalten NICHTS ändern. Alle CSS-Dateien
   werden zentral in head-meta.php auf JEDER Seite geladen (kein
   page-spezifisches Nachladen), daher reicht die Datei-Zugehörigkeit
   allein nicht als Scoping - die Body-Klasse ist der eigentliche Anker.

   hyphens:auto trennt lange Wörter (v.a. deutsche Komposita wie
   "Kontaktaufnahme") automatisch nach dem Sprach-Wörterbuch, das der
   Browser anhand von <html lang="..."> wählt - eine einzige Regel deckt
   dadurch automatisch sowohl die deutsche als auch die englische
   Version der Seite korrekt ab. Bewusst auf .card-benefit/.process-step
   selbst gesetzt (nicht erst auf h3/p einzeln) - hyphens ist eine
   vererbte Eigenschaft, dadurch gilt sie automatisch für Überschriften
   UND Fließtext innerhalb dieser Container, ohne beide Selektoren
   separat pflegen zu müssen. Alle vier Schreibweisen (Standard +
   -webkit-/-moz-/-ms--Präfixe) zusammen für größtmögliche
   Browser-Kompatibilität, unabhängig vom Browser-Alter. */
body.page-privatstunden .card-benefit,
body.page-privatstunden .process-step {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}