/* ============================================================
   custom.css - eigene Anpassungen
   Wird NACH style.css und dem Farbschema geladen und
   überschreibt diese daher.

   Bitte alle eigenen Styles hier ablegen, nicht in style.css
   (das ist die Template-Datei und wird bei einem Update ersetzt).
   ============================================================ */


/* ============================================================
   1. Kundenstimmen / Testimonial-Carousel  (index.html)
   ============================================================ */

.testimonial-carousel {
    /* --- Stellschrauben --- */
    --tst-size: 1.05rem;      /* Schriftgrösse Zitat (Fliesstext = 1rem) */
    --tst-size-sm: .975rem;   /* Schriftgrösse Zitat auf Mobile */
    --tst-line: 1.85;         /* Zeilenabstand */
    --tst-max: 660px;         /* max. Textbreite für gute Lesbarkeit */

    position: relative;
    margin: 0 auto;
}

/* WICHTIG - Neutralisierung der Template-Vorgaben.
   style.css (Zeile ~10953) biegt Swiper fuer den bildschirmfuellenden
   Hero-Slider um:
       .swiper       { position: absolute; height: 100% !important; }
       .swiper-slide { background: var(--bg-dark-1); }
   Das ergibt hier einen schwarzen Balken und einen Slider ohne Hoehe.
   Beides wird nur fuer dieses Carousel zurueckgesetzt. */

.testimonial-swiper.swiper {
    position: relative;
    height: auto !important;
    width: 100%;
    padding-bottom: 4px;
}

.testimonial-swiper .swiper-wrapper {
    height: auto;
}

.testimonial-swiper .swiper-slide {
    background: transparent;
    height: auto;
}

/* --- einzelnes Zitat --- */

/* Reset: style.css stylt <blockquote> global mit linkem Balken,
   30px Einzug und 24px Schrift - das wollen wir hier nicht. */
.testimonial-item {
    max-width: var(--tst-max);
    margin: 0 auto;
    padding: 0 8px;
    text-align: center;
    border: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* dekoratives Anführungszeichen (ersetzt das Portraitbild der Vorlage) */
.testimonial-item::before {
    content: "\201C";
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 64px;
    line-height: .8;
    height: 38px;
    color: var(--primary-color);
    opacity: .35;
}

.testimonial-text {
    font-size: var(--tst-size);
    line-height: var(--tst-line);
    margin-bottom: 22px;
}

/* Initialen, z.B. B.L.
   Bewusst <cite> statt <footer>: style.css stylt den Element-Selektor
   <footer> global mit schwarzem Hintergrund und 100px Innenabstand. */
.testimonial-author {
    display: block;
    font-style: normal;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--primary-color);
}

.testimonial-author::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin: 0 auto 14px;
    background: var(--primary-color);
    opacity: .4;
}

/* --- Steuerung: Pfeile + Punkte --- */

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 26px;
}

.testimonial-arrow {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(var(--primary-color-rgb), .35);
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.testimonial-arrow:hover,
.testimonial-arrow:focus-visible {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.testimonial-arrow.swiper-button-disabled {
    opacity: .3;
    cursor: default;
}

/* Punkte-Navigation: statisch positionieren, da ausserhalb des Sliders.
   Zwei Klassen als Selektor, damit die Regel die von Swiper zur Laufzeit
   vergebene Klasse .swiper-pagination-horizontal (width: 100%) schlaegt. */
.testimonial-controls .testimonial-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.testimonial-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    background: var(--primary-color);
    opacity: .28;
    transition: opacity .3s ease, transform .3s ease;
}

.testimonial-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.25);
}

@media only screen and (max-width: 767px) {
    .testimonial-text {
        font-size: var(--tst-size-sm);
    }

    .testimonial-item::before {
        font-size: 54px;
        height: 32px;
    }
}

/* --- Variante DUNKEL (weisser Text) ---
   Aktivieren: in index.html bei der Sektion
       class="bg-grey"   ersetzen durch   class="section-dark"
   Der Rest passiert automatisch. */

.section-dark .testimonial-text {
    color: #fff;
}

.section-dark .testimonial-item::before,
.section-dark .testimonial-author {
    color: var(--secondary-color);
}

.section-dark .testimonial-author::before {
    background: var(--secondary-color);
}

.section-dark .testimonial-arrow {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.section-dark .testimonial-arrow:hover,
.section-dark .testimonial-arrow:focus-visible {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #202020;
}

.section-dark .testimonial-pagination .swiper-pagination-bullet {
    background: #fff;
}