/**
 * PracticaMOS juntos Page Styles  
 * Juliana y Fadi Tango Website
 * 
 * FIXED VERSION - Korrekte Farben, Gradients, Shadows
 * Konsistent mit preise.php, kontakt.php, über-uns.php
 * 
 * @author Senior Developer
 * @version 2.1 FIXED
 */

/* ==================== HERO SECTION ==================== */

/* Struktur (Breite, Höhe, Flex, Position) kommt von der gemeinsamen
   .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische
   Hintergrundbild + der zugehörige Verlauf. */
.hero--practicamos {
    background-image: var(--hero-gradient), 
    url('../../images/practicamos/practicamos-hero.jpg');
}

/* .hero::before, .hero h1, .hero__subtitle liegen zentral in
   components/hero.css. */

/* @keyframes fadeInUp liegt zentral in base.css. */

/* ==================== INTRO SECTION ====================
   Basis-Styling (Box, h2, p) jetzt zentral in css/components/sections.css
   als .intro-section / .intro-section--boxed. Hier nur noch die
   Practicamos-exklusiven Sonderregeln. */

.intro-section p:last-child {
    margin-bottom: 0;
}

/* Text 1 (Lead-Satz) + Aufzählung (Text 2-10): linksbündig und kursiv,
   abweichend vom zentrierten Standard der übrigen .intro-section-Absätze
   (z.B. Text 11 bleibt davon unberührt). */
.intro-wunsch-lead {
    text-align: left;
    font-style: italic;
}

/* Großer erster Buchstabe von Text 1 - identisch zur Technik auf der
   Einsteiger-Seite (inline, kein float, sitzt auf der Grundlinie der
   ersten Zeile, kein Umfließen über mehrere Zeilen). */
.intro-wunsch-lead::first-letter {
    font-family: 'DM Serif Display', serif;
    font-size: 3.2rem;
    color: var(--color-text-secondary);/*var(--color-primary);*/
    line-height: 1;
    font-style: normal;
}

.intro-wunsch-liste {
    list-style: none;
    /* Fluid statt starrem "3rem": Auf Mobile rückt die Liste bis an den
       linken Rand heran (0), sodass der Text unter dem großen "d" von
       .intro-wunsch-lead::first-letter beginnt, statt spürbar weiter
       rechts zu stehen. Desktop bleibt (nahezu) unverändert bei 3rem.
       Die Rampe "9vw - 1.3rem" ist bewusst mit negativem Offset
       verschoben (zwei Referenzpunkte durchgerechnet: ≈0.8rem bei
       375px, ≈3rem bei 768px). clamp() deckelt nach unten bei 0
       (erreicht bei ≤231px) und nach oben bei 3rem. Gleiches Fluid-
       statt-Fixwert-Prinzip wie bei .kurse-aktion (einsteiger.css). */
    padding: 0 0 0 clamp(0rem, 9vw - 1.3rem, 3rem);
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    text-align: left;
}

.intro-wunsch-liste li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.8rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg-alt);
    font-style: italic;
    line-height: var(--line-height-relaxed);
}

.intro-wunsch-liste li::before {
    /* ← Aufzählungszeichen hier frei anpassen, z.B. "✓", "–", "►" ... */
    content: "✧"; /*"•";*/
    position: absolute;
    left: 0.3rem;
    color: var(--color-text-secondary);/*var(--color-primary);*/
    font-weight: var(--font-weight-bold);
    font-style: normal;
    font-size: var(--font-size-2xl);
    line-height: 1.3;
}

/* ==================== TERMINE CARDS ==================== */

.practicamos-termine {
    margin-bottom: var(--spacing-xl);
}

.practicamos-termine h2 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary); /* GOLD */
    text-align: center;
    margin-bottom: var(--spacing-xl);
    letter-spacing: var(--letter-spacing-wider);
}

/* Übernommen aus css/pages/einsteiger.css (.kurse-intro-text) für
   identische Abstände zur Überschrift/zum nächsten Element - dort mit
   fehlendem Leerzeichen ("var(--spacing-sm)0"), hier bewusst korrigiert.
   Bestehende Regel auf der Einsteiger-Seite bleibt unangetastet. */
.kurse-intro-text {
    color: #fff;
    font-size: var(--font-size-2xl);
    margin: var(--spacing-sm) 0 var(--spacing-sm);
    text-align: center;
}

.termine-grid {
    display: grid;
    /* minmax(0, …) erlaubt der Spalte, unter die Kartenbreite zu schrumpfen,
       wenn der Bildschirm schmaler ist (sonst erzwingt das auto-Minimum die
       volle 420px-Breite -> Overflow). Ansonsten volle Kartenbreite, zentriert. */
    grid-template-columns: repeat(auto-fit, minmax(0, var(--event-card-width)));
    justify-content: center;
    gap: var(--spacing-xl);
}

/* ==================== NEUE TERMINKARTEN (event-card Stil) ==================== */
/* Hinweis: Die Tagesansicht nutzt jetzt das Karussell der Startseite
   (.scroll-carousel/.scroll-carousel__track aus components/scroll-carousel.css), daher
   entfällt das frühere eigene .pm-termine-grid. */

/* Breite/Anordnung kommen vom Grid; keine zusätzlichen Card-Regeln nötig. */
.pm-event-card {
    /* (bewusst leer – Layout steuert das Grid) */
}

/* ==================== BOTSCHAFT SECTION ==================== */

.practicamos-message {
    /* Fluid statt starrer 3rem/3rem - komplett ohne Mobile-Anpassung
       (Fluid-Design-Audit Kategorie B2/B3). Desktop-Maxima unverändert. */
    margin: clamp(var(--spacing-lg), 6vw, var(--spacing-xl)) 0;
    padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
    background: var(--gradient-dark); /* GRADIENT */
    border: var(--border-width-medium) solid var(--border-color-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-glow-white); /* SHADOW */
}

.practicamos-message__intro {
    text-align: center;
    font-size: var(--font-size-2xl);
    color: var(--color-primary); /* GOLD */
    margin-bottom: var(--spacing-xl);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-base);
}

.practicamos-message__content p {
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-lg);
    letter-spacing: var(--letter-spacing-base);
}

.practicamos-message__content p:last-of-type {
    margin-bottom: var(--spacing-md);
}

.practicamos-message__signature {
    text-align: right;
    font-style: italic;
    color: var(--color-primary); /* GOLD */
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-lg);
    letter-spacing: var(--letter-spacing-wide);
}

/* ==================== PREISE SECTION ==================== */

.practicamos-preise {
    margin: var(--spacing-xl) 0;
}

.practicamos-preise h2 {
    font-size: var(--font-size-5xl);
    color: var(--color-primary); /* GOLD */
    text-align: center;
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-wider);
}

.practicamos-preise__subtitle {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    text-align: center;
    margin: var(--spacing-3xl) 0 var(--spacing-xl);
    letter-spacing: var(--letter-spacing-wider);
}

.practicamos-preise__separator {
    height: 2px;
    border: none;
    margin: var(--spacing-3xl) 0 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--color-primary) 15%,
        var(--color-primary) 85%,
        transparent 100%
    );
}

.practicamos-preise__intro {
    text-align: center;
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    letter-spacing: var(--letter-spacing-base);
}

.practicamos-preise__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.practicamos-preise__karte-wrapper {
    margin-top: var(--spacing-xl);
    display: flex;
    justify-content: center;
}

@media (min-width: 768px) {
    .practicamos-preise__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .practicamos-preise__grid--single {
        grid-template-columns: 1fr;
    }
}

/* Ehemaliger .practicamos-impressions-/.impressions-grid-/.impression-card-
   Block entfernt: vollständig ausgearbeitetes CSS für eine Bilder-Galerie,
   die aber nie ins Markup dieser Seite eingebunden wurde (auch nicht in
   den älteren Dateiversionen auffindbar) - daher nie aktiv wirksam. */

/* Ehemaliger .practicamos-cta-Block entfernt: vollständig ausgearbeitetes
   CSS für einen Abschluss-Aufruf-Bereich, der aber nie ins Markup dieser
   Seite eingebunden wurde (auch nicht in den älteren Dateiversionen
   auffindbar) - daher nie aktiv wirksam.

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

@media (max-width: 768px) {
    /* h1/.hero__subtitle-Verkleinerung kommt bereits von der
       gemeinsamen .hero-Regel (components/hero.css). */
    
    .termine-grid {
        /* War fest var(--spacing-xl)/3rem/48px, keine Mobile-Reduktion
           vorhanden (siehe Mobile-Audit). Bewusst hier in der globalen
           .termine-grid-Regel (nicht seitenspezifisch gescoped), wirkt
           daher konsistent auf allen Seiten, die diese Klasse nutzen
           (Einsteiger, PracticaMOS, ggf. weitere) - gleiche Konvention
           wie bereits im Projekt-Kommentar zu .page-einsteiger .termine-grid
           beschrieben. */
        gap: var(--spacing-md);
    }
}

/* .card-price--gold-border entfernt: nie ins Markup eingebunden. */

/* Pausen-Hinweis-Styling: siehe css/components/pause-notice.css
   (seitenübergreifend genutzt, u.a. auch bei Einsteiger). */

/* Tab-Umschalter-Styling: siehe css/components/tabs.css
   (seitenübergreifend genutzt, u.a. auch bei Einsteiger). */

/* ====================================================================
   STUNDENPLAN-ANSICHT
   --------------------------------------------------------------------
   Zeitraster: Spalte 1 = Uhrzeiten, weitere Spalten = Unterrichtstage.
   Kurs-Blöcke sind server-seitig per grid-row/grid-column positioniert
   (siehe tango-unterricht-practicamos-juntos.php). Kursart-Badges NUR
   hier, nicht in der Kartenansicht.
   ==================================================================== */
.stundenplan {
    display: grid;
    grid-template-columns: 64px repeat(var(--stundenplan-tage), 1fr);
    /* 2 Kopfzeilen (Wochentag + naechstes Datum) + 1 Zeile am Ende fuer die Adress-Fusszeile */
    grid-template-rows: 44px 30px repeat(var(--stundenplan-rows), minmax(20px, 1fr)) 44px;
    gap: 2px;
    background: var(--color-black);/*#1c1c1c;*//*#191919;*//*#000;*//*background: var(--gradient-dark);*//*background: #000;*/
    border: 1px solid var(--color-gray-600);
    border-radius: 10px;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto;
	box-shadow: var(--shadow-glow-white); 
}

.stundenplan__corner {
    grid-column: 1;
    grid-row: 1 / 3;
    background: #191919;/*#1c1c1c;*/
}

.stundenplan__head {
    grid-row: 1;
    grid-column: var(--grid-column);
    background: #191919;/*#1c1c1c;*/
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-4xl);/*1.05rem;*/
    letter-spacing: var(--letter-spacing-normal);
    text-align: center;
    padding: 0.3rem;
}

.stundenplan__head-datum {
    grid-row: 2;
    grid-column: var(--grid-column);
    background: #191919;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-300);
    font-size: var(--font-size-base);
    font-weight: 400;
    letter-spacing: 0.5px;
}

.stundenplan__time {
    grid-column: 1;
    grid-row: var(--grid-row-start) / var(--grid-row-end);
    background: #191919;/*#161616;*/
    color: var(--color-primary);
    font-size: var(--font-size-xl);/*1rem;*/
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2px 4px 0 4px;
}

.stundenplan__col-bg {
    grid-column: var(--grid-column);
    grid-row: 3 / var(--grid-row-end);
    background: var(--color-gray-700);
}

.stundenplan__kurs {
    grid-column: var(--grid-column);
    grid-row: var(--grid-row-start) / var(--grid-row-end);
    background: var(--kurs-bg);
    color: var(--kurs-fg);
    border: var(--kurs-border);
    border-radius: var(--border-radius-sm);
    padding: 0.35rem 0.5rem;
    font-size: var(--font-size-md);
    line-height: 1.3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 1px;
}

.stundenplan__kurs-name {
    font-weight: 700;
    font-size: var(--font-size-xl);
    /* Mehr Luft zur Uhrzeit-Zeile darunter */
    margin-bottom: var(--spacing-xs);
}

/* Uhrzeit- und "Mehr Infos"-Zeile teilen sich denselben Aufbau:
   feste Icon-Spalte (gleiche Breite wie unten) + Text daneben. Dadurch
   liegen Uhr-Icon und Info-Icon exakt übereinander, und auch der
   Textbeginn beider Zeilen ist sauber ausgerichtet. */
.stundenplan__kurs-zeit {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--font-size-base);
    opacity: 0.85;
    /* Mehr Abstand zur "Mehr Infos"-Zeile darunter */
    margin-bottom: 0.45rem;
}

.stundenplan__kurs-zeit .kurs-clock-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* rem statt em - siehe Erklärung an .kurs-clock-icon svg weiter unten */
    width: 1.3rem;
    flex-shrink: 0;
}

.stundenplan__kurs-zeit .kurs-clock-icon svg {
    /* Fester rem-Wert statt em: em wäre relativ zur jeweils umgebenden
       Zeile (Uhrzeit hat 0.95rem, "Mehr Infos" 0.9rem) und ergäbe dadurch
       zwei UNTERSCHIEDLICHE Pixelgrößen trotz gleicher em-Zahl - das war
       der Fehler. Mit rem sind beide Icons garantiert exakt gleich groß.
       Keine eigene Farbe - erbt die Textfarbe der Uhrzeit-Zeile.*/
    width: 1.2rem;
    height: 1.2rem;
}

/* "Mehr Infos"-Hinweis: gleiche Icon-Spaltenbreite wie die Uhrzeit-Zeile
   darüber, damit Icons und Textbeginn exakt übereinander liegen. */
.stundenplan__kurs-info {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: var(--font-size-sm);
    opacity: 0.85;
}

.stundenplan__kurs-info .kurs-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* rem statt em, exakt dieselben Werte wie .kurs-clock-icon oben:
       macht Spaltenbreite UND Icon-Durchmesser unabhängig vom
       unterschiedlichen Kontext-Font (0.95rem Zeit vs. 0.9rem Info). */
    width: 1.3rem;
    flex-shrink: 0;
}

.stundenplan__kurs-info .kurs-info-icon svg {
    /* Jetzt ein SVG (statt Font-Zeichen "ⓘ") mit identischer stroke-width
       wie .kurs-clock-icon svg - dadurch garantiert gleicher Durchmesser
       UND gleiche Strichstärke, was bei einer Font-Glyphe nicht zuverlässig
       einstellbar war (liegt am jeweiligen Font-Design, nicht an CSS).
       Größe identisch zur Uhr (1.2rem) für bessere Lesbarkeit. */
    width: 1.2rem;
    height: 1.2rem;
}

/* Adresszeile als Fußzeile INNERHALB des Stundenplan-Grids – bewusst mit
   identischer Optik zur Kopfzeile (Tag/Datum), damit sie optisch als Teil
   der Tabelle wirkt statt als separater Kasten darunter. */
.stundenplan__foot {
    grid-column: var(--grid-column);
    grid-row: var(--grid-row-start);
    background: #1c1c1c;
    color: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    /* Zurückgenommen (war 1.1rem) - zu groß für die feste 44px-Fußzeile. */
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.5rem;
    letter-spacing: 0.3px;
}

.stundenplan__foot a {
    color: var(--color-gray-200);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

.stundenplan__foot-leer {
    color: #666;
}

.stundenplan__corner-foot {
    grid-column: 1;
    grid-row: var(--grid-row-start);
    background: #1c1c1c;
}

/* ==================== MOBIL: eigene Swipe-Panel-Ansicht ==================== */

/* Mobil-Panels sind standardmäßig ausgeblendet (Desktop zeigt das Zeitraster) */
.stundenplan-mobile {
    display: none;
}

.stundenplan-hinweis {
    display: none;
}

@media (max-width: 900px) {
    /* Desktop-Zeitraster ausblenden */
    .stundenplan {
        display: none;
    }

    /* Mobil-Panels: horizontal swipebar mit Scroll-Snap. Jeder Tag ist ein
       eigenständiges Panel mit eigener Adresse – kein geteiltes Raster,
       daher robust unabhängig von den Desktop-Grid-Positionen. */
    .stundenplan-mobile {
        display: flex;
        gap: var(--spacing-sm);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--spacing-xs);
    }

    .stundenplan-mobile__day {
        /* Fluid statt starrem "86%": Bei großen Mobil-/Tablet-Breiten
           (z.B. 899px) ergab 86% eine fast bildschirmfüllende, überbreite
           Karte. clamp() erzeugt drei Zonen: Ceiling 420px (~50% bei
           899px, greift bis ~700px), dazwischen lineare Rampe mit 60vw
           (~65% Verhältnis Karte:Container), Boden 240px ab ~400px
           (~83% bei 320px - bewusst nah am alten 86%, da kleine Handys
           mit der ursprünglichen Breite bereits gut funktionierten). */
        flex: 0 0 clamp(320px, 60vw, 420px);
        scroll-snap-align: start;
        background: linear-gradient(180deg, var(--color-gray-750) 0%, #121212 100%);
        border: 1px solid var(--color-gray-600);
        border-radius: 10px;
        padding: 1rem 1.1rem 1.2rem;
    }

    .stundenplan-mobile__head {
        color: var(--color-primary);
        font-size: var(--font-size-lg);
        letter-spacing: var(--letter-spacing-normal);
        margin-bottom: 0.8rem;
        display: flex;
        flex-direction: column;
    }

    .stundenplan-mobile__datum {
        color: var(--color-gray-300);
        font-size: var(--font-size-xs);
        font-weight: 400;
        margin-top: 2px;
    }

    .stundenplan-mobile__kurs {
        background: var(--kurs-bg);
        color: var(--kurs-fg);
        border: var(--kurs-border);
        padding: 0.5rem 0.7rem;
        margin-bottom: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .stundenplan-mobile__leer {
        color: #777;
        font-size: var(--font-size-sm);
        font-style: italic;
    }

    .stundenplan-mobile__adresse {
        margin-top: 0.8rem;
        padding-top: 0.7rem;
        border-top: 1px solid var(--color-gray-500);
        font-size: var(--font-size-sm);
        color: var(--color-gray-200);
        display: flex;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .stundenplan-mobile__adresse a {
        color: var(--color-gray-200);
        text-decoration: none;
        transition: color var(--transition-base);
    }

    .stundenplan-mobile__adresse a:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

    /* Wisch-Andeutung, damit erkennbar ist dass mehr Tage folgen */
    .stundenplan-hinweis {
        display: block;
        text-align: center;
        color: #888;
        font-size: var(--font-size-sm);
        margin: 0.8rem auto 0;
    }
}