/**
 * Testimonials-Layouts
 * Ausgelagert aus includes/testimonials-display.php (vormals zwei
 * Inline-<style>-Blöcke, die auf jeder Seite mit Testimonials erneut
 * ausgegeben wurden statt einmal zentral geladen zu werden).
 *
 * Zwei Layout-Varianten, ausgewählt über die Klasse am <section>-Tag,
 * die von den jeweiligen Render-Funktionen in testimonials-display.php
 * ohnehin schon gesetzt wird:
 *   .testimonial-cards-layout    -> "cards"-Variante (Startseite)
 *   .testimonial-centered-layout  -> "centered"-Variante (Einsteiger,
 *                                     Privatstunden, Practicamos)
 */

/* ==================== CENTERED-VARIANTE ==================== */

        /* Testimonial Centered Layout (Privatstunden-Style) */
        /* Trennlinie zwischen den Testimonials: siehe .divider--subtle
           in components/divider.css (kombiniert mit .divider--simple). */

        /* Multi-Testimonial: gleicher Stil wie centered, aber mit Abstand */
        .testimonial-multi {
            max-width: 700px;
            margin: 0 auto;
        }

        .testimonial-centered-layout {
            background: var(--gradient-highlight);
            border-radius: 16px;
            padding: 2rem 0.5rem; /*4rem 3rem;*/
            margin: 5rem 0;
            text-align: center;
            border: 1px solid var(--color-primary);
        }
        
        .testimonial-centered-layout h2 {
            color: var(--color-primary);
            font-size: var(--font-size-5xl);
            margin-bottom: 2rem;/*1rem;*/
        }
        
        .testimonial-centered-layout .testimonial-subtitle {
            color: #ccc;
            font-size: var(--font-size-lg);
            margin-bottom: 3rem;
        }
        
        .testimonial-centered-layout .testimonial {
            max-width: 800px;
            margin: 0 auto 3rem;
        }
        
        .testimonial-centered-layout .testimonial:last-child {
            margin-bottom: 0;
        }
        
        .testimonial-centered-layout .testimonial-additional {
            padding-top: 3rem;
            border-top: 1px solid rgba(221, 191, 95, 0.2);
        }
        
        .testimonial-centered-layout .testimonial-quote {
            font-size: var(--font-size-xl);
            font-style: italic;
            color: #e0e0e0;
            line-height: 1.8;
            margin-bottom: 1.3rem;/*2rem;*/
            position: relative;
            padding: 0 2rem;
            /* Begrenzte Zeilenlänge (Measure-Prinzip, ~60-75 Zeichen/Zeile
               als Lesbarkeits-Richtwert) - ohne diese Begrenzung zentriert
               sich der (oft kurze) Zitat-Text in einer auf breiten
               Bildschirmen sehr breiten Box, während die Anführungszeichen
               (::before/::after, positioniert relativ zur Box-Kante) weit
               vom tatsächlichen Text entfernt sitzen bleiben. */
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .testimonial-centered-layout .testimonial-quote::before,
        .testimonial-centered-layout .testimonial-quote::after {
            content: '"';
            font-size: var(--font-size-6xl-alt);
            color: var(--color-primary);
            position: absolute;
        }
        
        .testimonial-centered-layout .testimonial-quote::before {
            left: 0;
            top: -10px;
        }
        
        .testimonial-centered-layout .testimonial-quote::after {
            right: 0;
            bottom: -30px;
        }
        
        .testimonial-centered-layout .testimonial-author {
            color: var(--color-primary);
            font-weight: 600;
            font-size: var(--font-size-lg);
            margin-bottom: -1.2rem;
        }

        /* Autorenzeile: Name gold + Rolle grau in einer Zeile */
        .testimonial-multi__author {
            text-align: center;
            margin-top: 1.25rem;
        }

        .testimonial-multi__name {
            color: var(--color-primary);
            font-weight: 600;
            font-size: var(--font-size-lg);
        }

        .testimonial-multi__separator {
            color: #999;
            font-size: var(--font-size-lg);
        }

        .testimonial-multi__role {
            color: #999;
            font-size: var(--font-size-lg);
        }
        
        /* ===== SCROLL LAYOUT ===== */

        /* Scroll-Variante: Padding oben/unten anpassen,
           links/rechts auf 0 damit Track bündig mit Box-Rand */
        .testimonial-scroll-layout {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 1.5rem;
            /* Box-Design wie original testimonial-section */
            border: var(--border-width-medium) solid var(--border-color-default);
            box-shadow: var(--shadow-glow-white);
            background: var(--gradient-dark);
        }



        .testimonial-scroll-layout h2 {
            padding: 0 3rem;
        }

        /* Viewport: overflow hidden damit andere Slides unsichtbar.
           Kein Padding (weder horizontal noch vertikal) - Slides bleiben
           bündig mit dem Container. Der Puffer für die überstehenden
           Anführungszeichen sitzt NICHT hier, sondern am eigentlichen
           Clipping-Punkt: .ts-scroll-track (siehe dort) - overflow-x:scroll
           dort berechnet overflow-y implizit als 'auto', wodurch bereits
           DORT abgeschnitten wird, bevor der Inhalt überhaupt bei diesem
           äußeren Viewport ankommt. Ein Puffer hier allein reichte daher
           nicht aus. */
        .ts-scroll-viewport {
            overflow: hidden;
        }

        /* Track: scrollbarer Flex-Container — nativ, kein JS.
           overflow-x: scroll statt auto damit scroll-snap immer greift.
           cursor: grab signalisiert Maus-Drag-Möglichkeit.
           WICHTIG: overflow-x ungleich 'visible' lässt den Browser
           overflow-y automatisch als 'auto' berechnen (CSS-Spezifikation,
           nicht 'visible' wie man erwarten könnte) - das schneidet vertikal
           überstehende, absolut positionierte Inhalte ab (z.B. die
           Anführungszeichen bei .testimonial-quote::before/::after, die
           bewusst leicht über ihre eigene Box hinausragen, "schwebender"
           Design-Effekt: top:-10px / bottom:-25px). padding-top/-bottom
           schafft hier den nötigen Puffer, GENAU an der Stelle, wo
           tatsächlich geschnitten wird - nicht am äußeren Viewport. Werte
           müssen zu den dortigen Offsets passen; bei künftigen Anpassungen
           der Offsets diese Werte synchron mit nachziehen. */
        .ts-scroll-track {
            display: flex;
            overflow-x: scroll;
            padding-top: 15px;
            padding-bottom: 30px;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
            gap: 0;
            cursor: grab;
            user-select: none;
        }

        .ts-scroll-track.ts-dragging {
            cursor: grabbing;
            scroll-behavior: auto;
            scroll-snap-type: none;
        }

        .ts-scroll-track::-webkit-scrollbar { display: none; }

        /* Jeder Slide: snap-Punkt.
           100vw würde zu breit sein — wir nutzen calc mit der Section-Breite.
           Der einfachste Weg: Slide nimmt die Breite des Viewports (overflow hidden).
           container-type auf dem Viewport aktiviert container queries. */
        .ts-slide {
            flex: 0 0 100%;
            scroll-snap-align: start;
            text-align: center;
            /* Fluid statt starrem 3rem/48px - stapelte sich mit dem eigenen
               Padding von .testimonial-quote (siehe unten) zu insgesamt
               88px pro Seite, komplett unabhängig von der Bildschirmbreite.
               War nie Teil der systematischen Fluid-Umstellung. Auf Wunsch
               nochmal um ca. 1/3 auf Mobile reduziert (Minimum und
               vw-Faktor gesenkt). Desktop-Maximum unverändert. */
            padding: 0 clamp(var(--spacing-xs), 3.5vw, var(--spacing-xl)) 1rem;
            /* box-sizing damit padding nicht die Breite vergrößert */
            box-sizing: border-box;
        }

        /* Anführungszeichen — identisch zu centered */
        .ts-slide .testimonial-quote {
            font-size: var(--font-size-xl);
            font-style: italic;
            color: #e0e0e0;
            line-height: 1.8;
            position: relative;
            /* Fluid statt starrem 2.5rem/40px - siehe .ts-slide oben für
               den Gesamtzusammenhang. Auf Wunsch nochmal um ca. 1/3 auf
               Mobile reduziert (Minimum und vw-Faktor gesenkt) - bewusst
               weiterhin moderater als bei .ts-slide (Minimum bleibt bei
               --spacing-sm, nicht --spacing-xs): dieses Padding reserviert
               Platz für die Anführungszeichen-Glyphen (::before/::after
               unten), die aktuell ein separates, noch zurückgestelltes
               Thema sind. Zu starke Reduktion hier hätte das Risiko
               erhöht, dass Text und Anführungszeichen kollidieren, bevor
               wir das gezielt angehen. */
            padding: 0 clamp(var(--spacing-sm), 5vw, var(--spacing-lg-alt));
            margin-bottom: 2rem;
            /* Begrenzte Zeilenlänge (Measure-Prinzip) - identischer Fix wie
               bei .testimonial-centered-layout .testimonial-quote weiter
               oben, siehe dortiger Kommentar für die volle Begründung. */
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .ts-slide .testimonial-quote::before {
            content: '"';
            font-size: var(--font-size-6xl-alt);
            color: var(--color-primary);
            position: absolute;
            left: 0;
            top: -10px;
            font-style: normal;
            line-height: 1;
        }

        .ts-slide .testimonial-quote::after {
            content: '"';
            font-size: var(--font-size-6xl-alt);
            color: var(--color-primary);
            position: absolute;
            right: 0;
            bottom: -25px;
            font-style: normal;
            line-height: 1;
        }

        /* Autorenzeile — wie Einsteiger-Seite */
        .ts-author {
            margin-top: 1.5rem;
            text-align: center;
        }

        .ts-author__name {
            color: var(--color-primary);
            font-weight: 600;
            font-size: var(--font-size-lg);
        }

        .ts-author__sep { color: #999; font-size: var(--font-size-lg); }
        .ts-author__role { color: #999; font-size: var(--font-size-lg); }

        /* Punkte-Navigation */
        .ts-dots {
            display: flex;
            justify-content: center;
            gap: 0.6rem;
            margin-top: 1.5rem;
        }

        .ts-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(221, 191, 95, 0.2);
            border: none;
            cursor: pointer;
            padding: 0;
            transition: all 0.25s;
        }

        .ts-dot--active {
            background: var(--color-primary);
            transform: scale(1.3);
        }

        /* Swipe-Hinweis */
        .ts-hint {
            text-align: center;
            font-size: var(--font-size-xs);
            color: rgba(221, 191, 95, 0.35);
            font-family: sans-serif;
            letter-spacing: 1px;
            margin-top: 0.75rem;
        }

        @media (max-width: 768px) {
            .testimonial-centered-layout {
                padding: 3rem 2rem;
            }
            
            .testimonial-centered-layout .testimonial-quote {
                font-size: var(--font-size-md);
                padding: 0 1.5rem;
            }

            .ts-hint { display: none; } /* auf Mobile sowieso intuitiv */
        }

/* ==================== CARDS-VARIANTE ==================== */

        /* Testimonials Cards Layout (Index-Style) */
        .testimonial-cards-layout {
            background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
            padding: 6rem 2rem;
            margin: 4rem 0 0 0;
        }
        
        .testimonial-section.testimonial-cards-layout {
            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 starrem var(--spacing-xl) - die alte Mobile-
               Reduktion (siehe unten, jetzt entfernt) griff wegen eines
               Spezifitäts-Konflikts nie: Diese Regel hat 2 Klassen
               (.testimonial-section.testimonial-cards-layout), die
               Media-Query-Regel nur 1 Klasse (.testimonial-cards-layout)
               - die höhere Spezifität gewann immer, unabhängig von der
               Bildschirmbreite. Fluid macht eine konkurrierende Regel
               überflüssig und behebt den Bug strukturell. */
            padding: clamp(var(--spacing-md), 6vw, var(--spacing-xl));
            /* margin-top bleibt 0 (kein gemeldetes Problem dort).
               margin-bottom fluid ergänzt - der Abstand zum Footer bestand
               bisher nur aus dessen eigenem, festen 1rem-Innenpolster
               (footer.css), wirkte auf Mobile zu eng. Diese Regel ist
               bereits ausschließlich auf der Startseite aktiv (einzige
               Verwendung des 'cards'-Testimonial-Modus) - keine
               zusätzliche Scoping-Regel wie bei der 404-Seite nötig. */
            margin: 0 0 clamp(1.5rem, 6vw, 3rem) 0;
        }
        
        .testimonials-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .testimonials-header {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .testimonials-header h2 {
            font-size: var(--font-size-6xl);
            color: var(--color-primary);
            margin-bottom: 1rem;
        }
        
        .testimonials-header p {
            font-size: var(--font-size-lg);
            color: #ccc;
            max-width: 700px;
            margin: 0 auto;
        }
        
        /* Grid Layout - Responsive basierend auf Anzahl */
        .testimonials-grid {
            display: grid;
            gap: 2.5rem;
        }
        
        /* 1 Testimonial: zentriert, max-width */
        .testimonials-grid.testimonials-count-1 {
            grid-template-columns: 1fr;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* 2 Testimonials: 2 Spalten */
        .testimonials-grid.testimonials-count-2 {
            grid-template-columns: repeat(2, 1fr);
        }
        
        /* 3 Testimonials: 3 Spalten + Subgrid-Rows
           Row 1: Text (1fr — wächst auf längsten Text)
           Row 2: Divider (auto)
           Row 3: Autor (auto) */
        .testimonials-grid.testimonials-count-3 {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr auto auto;
            align-items: start;
        }

        /* Gestapelte Variante: immer 1 Spalte, untereinander statt
           nebeneinander (z.B. Privatstunden-Seite) - überschreibt nur die
           Spaltenzahl, Box/Zitat/Farben bleiben unverändert. Nutzt die
           volle Breite der Container-Box (kein künstliches max-width). */
        .testimonials-grid.testimonials-grid--stacked {
            grid-template-columns: 1fr;
        }
        
        .testimonial-card {
            /* background: var(--gradient-dark); */
            background: var(--color-gray-800);
            border: var(--border-width-medium) solid var(--border-color-default);
            border-radius: 12px;
            /* Fluid statt starrem 2.5rem/2rem Desktop + festem 2rem/1.5rem
               Mobile-Breakpoint - war nie Teil der systematischen Fluid-
               Umstellung (nur der äußere Wrapper .testimonial-section.
               testimonial-cards-layout wurde damals fluid gemacht, die
               einzelne Karte dahinter blieb starr). Desktop-Maxima
               unverändert, Grenzwerte referenzieren die Projekt-Spacing-
               Skala. */
            padding: clamp(var(--spacing-md), 6vw, var(--spacing-lg-alt))
                     clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
            position: relative;
            box-shadow: var(--shadow-glow-white);
            transition: box-shadow 0.3s;
            /* Subgrid: Card spannt alle 3 Rows und übernimmt deren Höhen */
            grid-row: span 3;
            display: grid;
            grid-template-rows: subgrid;
        }
        
       /* .testimonial-card:hover {
            box-shadow: var(--shadow-glow-white-strong);
        }*/
        
        /* Anführungszeichen via CSS — identisch zur Einsteiger-Seite */
        .testimonial-text--quoted {
            font-size: var(--font-size-md);
            color: #e0e0e0;
            line-height: 1.8;
            margin-bottom: 0;
            font-style: italic;
            /* Vertikal zentriert in der Text-Row */
            align-self: center;
            position: relative;
            padding: 0 2rem;
        }

        .testimonial-text--quoted::before {
            content: '"';
            font-size: var(--font-size-6xl-alt);
            color: var(--color-primary);
            position: absolute;
            left: 0;
            top: -10px;
            font-style: normal;
            line-height: 1;
        }

        .testimonial-text--quoted::after {
            content: '"';
            font-size: var(--font-size-6xl-alt);
            color: var(--color-primary);
            position: absolute;
            right: 0;
            bottom: -25px;
            font-style: normal;
            line-height: 1;
        }

        /* Trennlinie zwischen Text und Autor */
        .testimonial-card__divider {
            height: 1px;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(221, 191, 95, 0.2) 20%,
                rgba(221, 191, 95, 0.2) 80%,
                transparent 100%
            );
            margin: 0rem 0;/*1.5rem 0;*/
        }

        /* Autor-Block: Name + Rolle getrennt */
        .testimonial-card__author-block {
            text-align: center;
        }

        .testimonial-card__name {
            font-size: var(--font-size-lg);
            color: var(--color-primary);
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        /* Gestapelte Variante (z.B. Privatstunden-Seite): Auf Desktop steht
           der Autor-Block rechts neben dem Zitat, getrennt durch eine
           vertikale (statt horizontale) Trennlinie. Auf Mobile rutscht er
           automatisch wieder unter den Text (Standard-Verhalten oben). */
        @media (min-width: 768px) {
            .testimonials-grid--stacked .testimonial-card {
                display: grid;
                /* Feste (statt auto-) Breiten für Trennlinie + Autor-Spalte:
                   nur so liegen sie bei allen Karten exakt untereinander,
                   unabhängig davon, wie lang Name/Zusatz im Einzelfall sind. */
                grid-template-columns: 1fr 1px 220px;
                grid-template-rows: auto;
                grid-row: auto;
                align-items: center;
                column-gap: 2rem;
            }

            .testimonials-grid--stacked .testimonial-text--quoted {
                text-align: left;
                padding: 0 2rem 0 2rem;
            }

            .testimonials-grid--stacked .testimonial-card__divider {
                width: 1px;
                height: 100%;
                min-height: 70px;
                background: linear-gradient(
                    to bottom,
                    transparent 0%,
                    rgba(221, 191, 95, 0.3) 15%,
                    rgba(221, 191, 95, 0.3) 85%,
                    transparent 100%
                );
                margin: 0;
            }

            .testimonials-grid--stacked .testimonial-card__author-block {
                text-align: left;
            }
        }

        .testimonial-card__role {
            font-size: var(--font-size-sm);
            color: #999;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .testimonials-grid.testimonials-count-3 {
                grid-template-columns: repeat(2, 1fr);
            }

            /* Bei 3 Karten in einem 2-Spalten-Grid würde die 3. Karte
               sonst linksbündig in einer neuen Zeile landen (Grid-
               Standardverhalten). Spannt stattdessen über beide Spalten
               und zentriert sich darin. Breite wird dynamisch berechnet
               statt geschätzt: 100% bezieht sich hier auf die gesamte
               überspannte Fläche (beide Spalten + Gap dazwischen);
               (100% - Gap) / 2 ergibt exakt die Breite EINER Spalte,
               passt sich also bei jeder Bildschirmbreite automatisch an
               - 2.5rem entspricht dem tatsächlichen .testimonials-grid
               gap-Wert (siehe oben). */
            .testimonials-grid.testimonials-count-3 .testimonial-card:nth-child(3) {
                grid-column: 1 / -1;
                justify-self: center;
                width: calc((100% - 2.5rem) / 2);
            }
        }
        
        @media (max-width: 768px) {
            .testimonials-grid.testimonials-count-2,
            .testimonials-grid.testimonials-count-3 {
                grid-template-columns: 1fr;
            }

            /* Reset der Karte-3-Zentrierung aus dem @media(max-width:1024px)-
               Block oben: Die dortige calc()-Breite setzt einen 2-Spalten-
               Kontext voraus. @media(max-width:1024px) deckt aber auch
               den Bereich ≤768px mit ab (beide Media Queries überlappen),
               wo das Grid inzwischen bereits einspaltig ist. BEIDE
               Eigenschaften müssen zurückgesetzt werden, nicht nur width:
               width:auto allein hätte mit weiterhin aktivem
               justify-self:center dazu geführt, dass die Karte auf ihre
               Inhaltsbreite schrumpft und zentriert wird, statt wie die
               anderen beiden Karten die volle Spaltenbreite auszufüllen
               (deren Standard ist justify-self:stretch) - das erzeugte
               ungleiche linke/rechte Kanten zwischen den Karten. */
            .testimonials-grid.testimonials-count-3 .testimonial-card:nth-child(3) {
                width: auto;
                justify-self: stretch;
            }
        }