/*
 * Academy – Studienberaterin
 *
 * Bewusst KURZ: Der Aufbau des Blocks liegt im Textbaustein und damit im
 * Page Builder. Hier stehen nur Regeln für das, was das Modul selbst
 * erzeugt — Bild, Video und Verweise.
 */

.academy-berater .academy-berater-img {
    inline-size: 100%;
    block-size: auto;
    display: block;
    /*
     * KEIN fester Zuschnitt.
     *
     * Ein kurzer Versuch mit aspect-ratio ist wieder entfernt: Die
     * Profilbilder sind bereits rund freigestellt. Ein quadratischer
     * Zuschnitt hätte sie beschnitten, ohne dass es einen Gewinn gäbe.
     *
     * Der Unterschied in der Anzeige kommt nicht von den Profilbildern,
     * sondern vom Video-Standbild: Es ist ein Bildschirmfoto im
     * Breitformat. Wo kein Video hinterlegt ist, erscheint das runde
     * Porträt — beides ist so gewollt.
     */
    border-radius: 8px;
}

/* Video im Seitenverhältnis 16:9, ohne feste Höhe — passt sich damit
   jeder Spaltenbreite an. */
.academy-berater .academy-berater-video iframe {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    block-size: auto;
    border: 0;
    border-radius: 8px;
    display: block;
}

/* Telefon und E-Mail: unaufdringlich, aber erkennbar anklickbar. */
.academy-berater a[href^="tel:"],
.academy-berater a[href^="mailto:"] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.academy-berater a[href^="tel:"]:hover,
.academy-berater a[href^="mailto:"]:hover {
    color: #432333;
}

/* ---- Standbild mit Abspielknopf ----
   Verweist auf YouTube, statt einzubetten. Es werden keine Daten
   übertragen, solange niemand klickt — die Einwilligungsfrage stellt sich
   damit gar nicht. */

.academy-berater .academy-berater-play {
    position: relative;
    display: block;
    line-height: 0;
}

/* Der Knopf: weißer Kreis mit Dreieck, beides aus CSS — kein Bild, kein
   Zeichensatz, nichts das ausfallen kann. */
.academy-berater .academy-berater-play-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 4rem;
    block-size: 4rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    transition: transform .15s, background .15s;
}

.academy-berater .academy-berater-play-icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* Leicht nach rechts versetzt: Ein Dreieck wirkt sonst
       linkslastig, weil seine Fläche links liegt. */
    transform: translate(-40%, -50%);
    inline-size: 0;
    block-size: 0;
    border-inline-start: 1.15rem solid #432333;
    border-block-start: .75rem solid transparent;
    border-block-end: .75rem solid transparent;
}

.academy-berater .academy-berater-play:hover .academy-berater-play-icon,
.academy-berater .academy-berater-play:focus-visible .academy-berater-play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

@media (max-width: 700px) {
    .academy-berater .academy-berater-play-icon {
        inline-size: 3rem;
        block-size: 3rem;
    }

    .academy-berater .academy-berater-play-icon::after {
        border-inline-start-width: .85rem;
        border-block-start-width: .55rem;
        border-block-end-width: .55rem;
    }
}

/* ---- Dateiliste (Probe- und Infomaterial) ----
   Das Symbol stand über dem Text statt daneben: Es ist ein Element mit
   eigener Zeilenhöhe, und ohne Ausrichtung sitzt es auf der Grundlinie.
   flex bringt beide auf eine Zeile und richtet sie mittig aus. */
.academy-berater ul.filelist > li,
ul.filelist > li {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Der Dateiname nimmt den freien Platz, der Knopf bleibt rechts. */
ul.filelist > li > a.file {
    flex: 1 1 auto;
    min-inline-size: 0;
}

ul.filelist > li > a.sppb-btn {
    flex: 0 0 auto;
}

/* Abstand zwischen Überschrift und Kasten — in der bisherigen Seite
   waren es 32px. */
.academy-berater > h2 {
    margin-block-end: 2rem;
    text-align: center;
}

/* =====================================================================
   Beraterblock: Kreis, Rahmen, Abstände (1.4.0)

   Zum Einsatz: {berater_video_bild} in <div class="berater-medien">
   einfassen. Der Kreis entsteht dann aus CSS — kein zusätzliches Bild,
   das geladen werden muss.
   ===================================================================== */

.berater-medien {
    position: relative;
    /* Platz für den Kreis, der links unten übersteht. Mehr als zuvor —
       er soll deutlicher hinausragen. */
    padding: 0 0 5rem 6rem;
}

/* Der violette Kreis, versetzt nach links unten.
   Als ::before statt als Bild: skaliert mit, lädt nichts nach. */
.berater-medien::before {
    content: "";
    position: absolute;
    /* Weiter nach links unten versetzt — negative Werte lassen ihn über
       den Bereich hinausragen, wie in der Vorlage. */
    inset-block-end: -1.5rem;
    inset-inline-start: -2.5rem;
    inline-size: 68%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #a486bc;
    z-index: 0;

    /*
     * Beim Scrollen wachsen.
     *
     * animation-timeline: view() koppelt die Bewegung an die Sichtbarkeit
     * des Elements — ohne JavaScript, ohne Scroll-Ereignisse, die bei
     * jedem Rad-Impuls feuern.
     *
     * Browser, die das nicht kennen, ignorieren die Zeilen: Der Kreis
     * steht dann still. Kein Fehler, nur kein Effekt.
     */
    /*
     * Beim Scrollen mitwandern (Parallax).
     *
     * Der Kreis bewegt sich langsamer als die Seite: Beim Herunterscrollen
     * sinkt er etwas nach, beim Hochscrollen steigt er zurück. Das erzeugt
     * Tiefe, ohne dass etwas springt.
     *
     * animation-timeline: view() koppelt die Bewegung an die Sichtbarkeit —
     * ohne JavaScript und ohne Scroll-Ereignisse, die bei jedem
     * Rad-Impuls feuern würden.
     *
     * Browser, die das nicht kennen, ignorieren die Zeilen: Der Kreis
     * steht dann still. Kein Fehler, nur kein Effekt.
     */
    animation: berater-kreis linear both;
    animation-timeline: view();
    /* Über die volle Sichtbarkeit, damit die Bewegung gleichmäßig
       verläuft statt in einem kurzen Fenster. */
    animation-range: entry 0% exit 100%;
}

@keyframes berater-kreis {
    /* Von oben nach unten — bewusst klein gehalten. 40px reichen für den
       Eindruck von Tiefe; mehr wirkt unruhig. */
    from { transform: translateY(-40px); }
    to   { transform: translateY(40px); }
}

/*
 * Wer ruhige Darstellung eingestellt hat, bekommt keine Bewegung.
 *
 * Das ist eine Systemeinstellung, die Menschen mit Migräne oder
 * Gleichgewichtsstörungen setzen. Sie zu übergehen kann körperliches
 * Unwohlsein auslösen — deshalb hier ohne Ausnahme.
 */
@media (prefers-reduced-motion: reduce) {
    .berater-medien::before {
        animation: none;
    }
}

/* Weißer Rahmen um das Bild, mit leichtem Schatten — er hebt das Bild
   vom Kreis ab. */
.berater-medien > * {
    position: relative;
    z-index: 1;
    display: block;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.berater-medien img {
    border-radius: 0;
}

/* ---- Abspielknopf ----
   Nach unten versetzt, dorthin wo im Standbild die Bedienleiste sitzt.
   Vorher stand er mittig und überlagerte das Gesicht. */
.academy-berater .academy-berater-play-icon {
    inset-block-start: auto;
    inset-block-end: 14%;
    transform: translate(-50%, 0);
}

.academy-berater .academy-berater-play:hover .academy-berater-play-icon,
.academy-berater .academy-berater-play:focus-visible .academy-berater-play-icon {
    transform: translate(-50%, 0) scale(1.08);
}

/* ---- Textspalte ---- */
.academy-berater h2,
.academy-berater h3 {
    margin: 0 0 1.25rem;
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 700;
    color: #432333;
}

.academy-berater p {
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

/* "Studienberaterin & Astrologin" — dieselbe Farbe wie die Rolle auf der
   Profilseite, damit beide Seiten zusammenpassen. */
.academy-berater .berater-rolle {
    margin-block-end: .35rem;
    color: #7a4f8c;
    font-weight: 700;
}

.academy-berater .berater-name {
    margin-block-end: 1.25rem;
    font-size: 1.35rem;
}

@media (max-width: 900px) {
    .academy-berater h2,
    .academy-berater h3 {
        font-size: 1.9rem;
        line-height: 2.3rem;
    }

    .berater-medien {
        padding: 0 0 2rem 2rem;
    }
}

/* Bewegung je Modul abschaltbar. */
.academy-berater--ruhig .berater-medien::before {
    animation: none;
}