/*
Theme Name: EXINA e.V.
Theme URI: https://exinaev.de
Description: Child-Theme von Hello Elementor für die Vereinswebsite EXINA e.V.
Author: Achim Rosenhagen
Author URI: https://achimrosenhagen.de
Template: hello-elementor
Version: 0.9.0
Text Domain: exinaev
*/

/* ------------------------------------------------------------------- Bewegung */

html {
    scroll-behavior: smooth;
}

/* Seitenkopf: das Motiv liegt zunächst im Dunkeln und hellt beim Laden auf.
   Bis zum 10.08.2026 lief es andersherum — das Bild stand offen da und dunkelte
   ab, blieb also dunkel zurück. Der Verein möchte es umgekehrt.

   Das Keyframe nennt nur den Anfangswert; der Endwert ist die im Kit gesetzte
   Deckkraft, die dadurch nicht doppelt gepflegt werden muss. Seit dem 13.08.2026
   steht keine Schrift mehr im Motiv (siehe unten), der Schleier muss also für
   nichts mehr Kontrast tragen — er bleibt allein als Bewegung. */

@keyframes exv-aufhellen {
    from {
        opacity: 1;
    }
}

.exv-kopfbild::before {
    animation: exv-aufhellen 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Ken Burns: das Motiv wandert und wächst über 24 Sekunden und läuft dann rückwärts.
   Sichtbar, aber ruhig — der Kopf soll nicht wie ein Standbild wirken.

   ⚠ Die Bewegung liegt auf einem ::after mit `background-image: inherit`, nicht auf
   dem Element selbst. Elementor setzt das Motiv als Hintergrund des Abschnitts; ein
   `transform` dort verschöbe den ganzen Kopf samt Schrift. Das ::after erbt dasselbe
   Bild, ohne dass die Adresse ein zweites Mal irgendwo stehen müsste — sie steht je
   Seite in Elementors erzeugtem CSS und ist von hier aus gar nicht bekannt.

   `isolation` macht den Abschnitt zum eigenen Stapelraum. Ohne das rutschte das
   ::after mit `z-index: -1` hinter den Abschnitt und wäre unsichtbar; `overflow`
   hält den vergrößerten Ausschnitt in seinen Grenzen.

   ⚠ Auf den Lehrgangs-Seiten stand der Hintergrund bisher fest (`bg_fest`, ein
   Parallaxe-Erbe aus dem Bestand). Das ::after scrollt mit und deckt ihn ab — eine
   Bewegung je Motiv, nicht zwei gegeneinander. */

.exv-kopfbild {
    isolation: isolate;

    /* ⚠ Ohne Vorrang laeuft der um 22 % vergroesserte Pseudoinhalt aus dem Kasten
       heraus: die Seite bekommt einen waagerechten Rollbalken und das Bild schiebt
       sich ueber den folgenden Inhalt. Elementor setzt `overflow` je Element mit
       zwei Klassen; eine Themeregel mit einer Klasse verliert das. */
    overflow: hidden !important;
}

.exv-kopfbild::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: inherit;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    transform-origin: 50% 50%;
    animation: exv-kenburns 24s ease-in-out infinite alternate;
}

/* ⚠ Der erste Anlauf war unsichtbar: 7 % Vergrösserung über 36 Sekunden sind 0,19 %
   je Sekunde, und das nimmt kein Auge wahr. Jetzt 22 % über 24 Sekunden, also knapp
   1 % je Sekunde — fünfmal so schnell und als Bewegung erkennbar, ohne zu stören.

   Der Schwenk bleibt in den Grenzen der Vergrösserung: bei 22 % liegen 11 % Reserve
   an jeder Kante, verschoben wird um 4 %. Mehr, und die Bildkante käme ins Bild. */
@keyframes exv-kenburns {
    from {
        transform: scale(1) translate(0, 0);
    }

    to {
        transform: scale(1.22) translate(-4%, -2.5%);
    }
}

/* ⚠ `.exv-kopftafel` stand hier bis zum 13.08.2026: die dunkle Fläche hinter jeder
   Zeile einer Überschrift, die IM Motiv stand. Der Verein möchte die Überschrift unter
   dem Motiv sehen (Frau Gheczy über Frau Carius) — damit steht keine Schrift mehr auf
   einem Bild, und die Fläche ist ersatzlos entfallen, samt `@keyframes exv-tafel`.

   Wer die Schrift wieder ins Bild holt, braucht sie zurück: Weiß auf dem hellsten
   Motiv liegt ohne Fläche bei 2,3:1, WCAG AA verlangt 4,5:1 (gemessen am 10.08.2026,
   als der Verein die Motive aufhellen ließ). Die Fassung steht in git. */


/* „Nach oben" — auf jeder Seite aller vier Auftritte, erzeugt in functions.php.
   Ohne JavaScript bleibt der Knopf hidden und stört nicht.

   ⚠ Der Selektor nennt das Element MIT der Klasse. Elementors Kit setzt allen
   Knöpfen `padding: 14px 28px` über `.elementor-kit-4 button` — zwei Klassen und
   ein Element, mehr als eine Klasse allein. Ohne den Aufschlag wuchs der runde
   Knopf auf 56 × 46 px, weil der Innenabstand die Breite bestimmte statt der
   angegebenen. Gemessen, nicht geraten. */

button.exv-nach-oben {
    /* ⚠ Der Kit setzt `padding: 14px 28px` auf JEDEN Knopf. Der Selektor dort wiegt
       genauso viel wie dieser — wer gewinnt, entschied bisher die Ladereihenfolge, und
       die kippte, als Elementors je Element erzeugtes CSS neu geschrieben wurde. Aus
       dem runden Knopf wurde ein breites Rechteck mit verrutschtem Pfeil. */
    width: 46px !important;
    height: 46px !important;
    padding: 0 !important;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    background: #333c4e;
    color: #fff;
    cursor: pointer;
    transition: background-color 200ms ease, transform 200ms ease;
}

button.exv-nach-oben[hidden] {
    display: none;
}

button.exv-nach-oben:hover,
button.exv-nach-oben:focus-visible {
    background: #f09a3e;
    transform: translateY(-2px);
}

/* Der Pfeil ist gezeichnet, nicht gesetzt: ein Schriftzeichen haenge an der
   Schriftart, ein Symbol-Paket an einem weiteren Ladevorgang. */
.exv-nach-oben-pfeil {
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

@media (max-width: 767px) {
    button.exv-nach-oben {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }
}

/* Hinweis auf einen der anderen Lehrgänge, unten im Eingangsbereich.

   Im Bestand war das eine Laufschrift, die langsam von rechts nach links zog. Hier
   springt der Kasten einmal von unten herein — mit Überschwung, er schiesst über
   seinen Platz hinaus und pendelt sich ein — und meldet sich danach alle sechs
   Sekunden mit einem kurzen, schnellen Wackeln.

   Das Wackeln nimmt nur die ersten Prozente des Ablaufs ein; dazwischen steht der
   Kasten still. Was dauernd in Bewegung ist, liest niemand mehr.

   ⚠ Jeder Zwischenschritt muss `translate(-50%, …)` mitführen. `transform` ist EINE
   Eigenschaft: ein Schritt, der nur `rotate()` nennt, wirft die waagerechte
   Zentrierung weg, und der Kasten springt beim Wackeln nach rechts. */

.exv-querverweis {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 2;
    max-width: calc(100% - 40px);
    text-decoration: none;
    transform: translateX(-50%);
    animation:
        exv-quer-herein 900ms ease-out 800ms both,
        exv-quer-wackeln 6s linear 1700ms infinite;
}

.exv-querverweis:hover,
.exv-querverweis:focus-visible {
    background-color: #fb8748;
}

/* Der Überschwung steckt in den Zwischenschritten, nicht in der Zeitkurve — sonst
   federte beides gegeneinander und die Bewegung wirkte unruhig statt schwungvoll.

   ⚠ In Pixeln, nicht in Prozent. Prozent bezieht sich bei `translate` auf die eigene
   Höhe des Kastens; bei rund 40 px kamen aus „-22 %" ganze 9 px Überschwung heraus —
   gemessen und viel zu wenig, um als Sprung zu wirken. */
@keyframes exv-quer-herein {
    0% {
        opacity: 0;
        transform: translate(-50%, 150px);
    }

    48% {
        opacity: 1;
        transform: translate(-50%, -20px);
    }

    66% {
        transform: translate(-50%, 10px);
    }

    80% {
        transform: translate(-50%, -6px);
    }

    91% {
        transform: translate(-50%, 3px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

/* Alle sechs Sekunden ein kurzes, hartes Wackeln: fünf Ausschläge in 0,6 Sekunden.
   `linear` an der Animation, nicht `ease-in-out` — die weiche Kurve nahm dem Wackeln
   die Kanten und es wirkte wie ein Schweben. Die restlichen 5,4 Sekunden steht der
   Kasten vollkommen still; ohne die lange Ruhe wäre es Zappeln statt eines Winkens.

   ⚠ Das Wackeln steht am ANFANG des Ablaufs, nicht am Ende. Am Ende käme der erste
   Ausschlag erst 5,4 Sekunden nach dem Hereinspringen — gemessen bei 7,2 s, und bis
   dahin hat der Blick den Kasten längst verlassen. Die Verzögerung der Animation ist
   so gesetzt, dass der erste Ausschlag unmittelbar auf den Sprung folgt. */
@keyframes exv-quer-wackeln {
    0% {
        transform: translate(-50%, 0) rotate(0deg);
    }

    2% {
        transform: translate(-50%, 0) rotate(-3deg);
    }

    4% {
        transform: translate(-50%, 0) rotate(3deg);
    }

    6% {
        transform: translate(-50%, 0) rotate(-2.4deg);
    }

    8% {
        transform: translate(-50%, 0) rotate(1.8deg);
    }

    10% {
        transform: translate(-50%, 0) rotate(-0.8deg);
    }

    12%, 100% {
        transform: translate(-50%, 0) rotate(0deg);
    }
}

@media (max-width: 767px) {
    .exv-querverweis {
        bottom: 20px;
    }
}

.exv-karte {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
    will-change: transform;
}

.exv-karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(51, 60, 78, 0.12);
    border-color: #f09a3e;
}

a.exv-karte {
    text-decoration: none;
}

.elementor-button,
.wpcf7 .wpcf7-submit {
    transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}

.elementor-button:hover,
.wpcf7 .wpcf7-submit:hover {
    transform: translateY(-2px);
}

.elementor-icon-box-wrapper .elementor-icon {
    transition: transform 220ms ease;
}

.exv-karte:hover .elementor-icon {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .exv-karte,
    .elementor-button,
    .elementor-icon,
    .exv-preisband-rate,
    .exv-nach-oben,
    .wpcf7 .wpcf7-submit {
        transition: none;
    }

    .exv-karte:hover,
    .elementor-button:hover,
    .exv-karte:hover .elementor-icon,
    .exv-nach-oben:hover,
    .exv-nach-oben:focus-visible,
    .wpcf7 .wpcf7-submit:hover {
        transform: none;
    }

    .elementor-invisible {
        visibility: visible !important;
        animation: none !important;
    }

    /* Ohne Animation gilt sofort die im Kit gesetzte Deckkraft */
    .exv-kopfbild::before {
        animation: none;
    }

    /* Das Motiv steht still — der Ausschnitt bleibt der vergrößerte, sonst sprünge
       der Bildausschnitt gegenüber der bewegten Fassung. */
    .exv-kopfbild::after {
        animation: none;
        transform: scale(1.1);
    }

    /* Der Hinweis steht sofort da und meldet sich nicht — die Positionierung muss
       dabei erhalten bleiben, sonst rutscht er aus der Mitte. */
    .exv-querverweis {
        animation: none;
        transform: translateX(-50%);
    }
}

/* ------------------------------------------------------------------ Elementor */

.elementor-icon-box-title,
.elementor-icon-box-description {
    overflow-wrap: anywhere;
}

.elementor-icon-box-wrapper .elementor-icon-box-title {
    margin-bottom: 2px;
}

/* Symbol und erste Textzeile auf eine Linie: der Titel bringt einen Außenabstand mit */
.elementor-widget-icon-box .elementor-icon-box-title {
    margin-top: 0;
}

/* Die senkrechte Ausrichtung regelt Elementor je Box (oben bei Beschreibung,
   mittig ohne). Hier wird das Symbol nur innerhalb seiner Spalte zentriert —
   ohne align-self, das die Zentrierung der Box aushebeln würde. */
.elementor-widget-icon-box .elementor-icon-box-icon {
    display: flex;
    align-items: center;
    min-height: 1.5em;
}

.elementor-icon-box-icon .elementor-icon {
    line-height: 1;
}

/* --------------------------------------------------------------- Masonry */

/* ⚠ Zwei Klassen, nicht eine — und die eigene Variable dazu.

   `.exv-masonry` und Elementors `.e-con` haben dieselbe Spezifitaet (je eine Klasse).
   Wer gewinnt, entschied damit die Ladereihenfolge der Stylesheets, und die kippte:
   Elementor setzt `display: var(--display)`, die Kachel-Klasse `e-flex` setzt
   `--display: flex`. Ergebnis war ein Flex-Container — und auf einem Flex-Container
   wirkt `column-count` nicht. Die Karten standen einspaltig untereinander, obwohl das
   Bauskript `exv_masonry(..., 2)` sagt (exina/global#82).

   `.exv-masonry.e-con` schlaegt beides; `--display: block` loest Elementors eigene
   Variable zusaetzlich richtig auf, statt sie zu ueberfahren. */
.exv-masonry,
.exv-masonry.e-con {
    /* ⚠ `!important` ist hier kein Faulheitszeichen, sondern die einzige Regel, die
       traegt. Der Gegner ist Elementors JE ELEMENT erzeugtes CSS
       (`.elementor-19 .elementor-element.elementor-element-69bca09 { --display: flex }`)
       — zwei Klassen plus Nachkomme, und die Nummer wechselt mit jedem Neubau. Eine
       Klassenregel kann das nicht schlagen, und einen Selektor mit einer erzeugten
       Nummer nachzubauen hiesse, ihn bei jedem Bau nachzuziehen. */
    --display: block !important;

    display: block !important;
    column-gap: 30px;
}

.exv-masonry > .e-con,
.exv-masonry > .elementor-element {
    break-inside: avoid;
    margin-bottom: 30px;
    width: 100%;
}

.exv-masonry-2 {
    column-count: 2;
}

.exv-masonry-3 {
    column-count: 3;
}

.exv-masonry-4 {
    column-count: 4;
}

@media (max-width: 1024px) {
    .exv-masonry-3,
    .exv-masonry-4 {
        column-count: 2;
    }
}

@media (max-width: 767px) {
    .exv-masonry-2,
    .exv-masonry-3,
    .exv-masonry-4 {
        column-count: 1;
    }
}

/* --------------------------------------------------------- Veranstaltungen */

/* Die Liste kommt aus dem Kurzcode [exv_veranstaltungen], nicht aus Elementor —
   das Aussehen der Karten steht deshalb hier statt im Bauskript. */

.exv-termine {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.exv-termin {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid #E7E4E2;
}

.exv-termin-bild {
    flex: 0 0 300px;
    max-width: 300px;
}

.exv-termin-motiv {
    display: block;
    width: 100%;
    height: auto;
}

.exv-termin-inhalt {
    flex: 1 1 auto;
    min-width: 0;
}

.exv-termin-titel {
    margin: 0 0 14px;
    font-size: 26px;
    line-height: 1.3;
}

/* Bezeichnung und Angabe stehen nebeneinander, solange Platz ist */
.exv-termin-angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 20px;
    margin: 0 0 20px;
    padding: 16px 0;
    border-top: 1px solid #E7E4E2;
    border-bottom: 1px solid #E7E4E2;
    font-size: 16px;
}

.exv-termin-angaben dt {
    margin: 0;
    font-weight: 700;
    color: #333C4E;
}

.exv-termin-angaben dd {
    margin: 0;
    color: #5E656D;
}

.exv-termin-text > :first-child {
    margin-top: 0;
}

.exv-termin-text > :last-child {
    margin-bottom: 0;
}

/* Einzelansicht: das Motiv steht über dem Text statt daneben */
.exv-termin-bild--einzeln {
    float: none;
    max-width: 300px;
    margin: 0 0 24px;
}

.exv-termine-leer {
    padding: 40px 0;
    text-align: center;
    font-size: 18px;
}

@media (max-width: 767px) {
    .exv-termin {
        flex-direction: column;
        gap: 24px;
        padding: 24px;
    }

    .exv-termin-bild {
        flex-basis: auto;
        max-width: 100%;
        align-self: center;
    }

    /* Nebeneinander wird bei schmalen Zeilen zu Bezeichnung über Angabe */
    .exv-termin-angaben {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .exv-termin-angaben dd {
        margin-bottom: 10px;
    }
}

/* Waagerechte Bahn (Teilnehmerstimmen): feste Höhe, eine Karte je Rastpunkt.
   Die Hülle und die Pfeile setzt exinaev.js; ohne JavaScript bleibt gewischt
   und gescrollt, nur die Pfeile fehlen. */

.exv-bahn {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
    /* Ohne min-width wächst das Flex-Element auf seinen Inhalt und schiebt die
       ganze Seite waagerecht auf — der Überlauf gehört in die Bahn, nicht ins Fenster. */
    min-width: 0;
    width: 100%;
}

.exv-bahn::-webkit-scrollbar {
    display: none;
}

.exv-bahn > .e-con {
    flex: 0 0 340px;
    width: 340px;
    max-width: 340px;
    height: 320px;
    scroll-snap-align: start;
    overflow: hidden;
}

/* Fünf Zeilen passen in die feste Höhe; ohne die Klemme schneidet der Kasten
   mitten durch eine Zeile statt sauber mit Auslassungspunkten zu enden. */
.exv-bahn .exv-stimme-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exv-bahn .exv-stimme-text p {
    margin-bottom: 0;
}

.exv-bahn-huelle {
    position: relative;
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.exv-bahn-huelle .exv-bahn-knopf {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #E7E4E2;
    border-radius: 50%;
    background: #FFFFFF;
    color: #333C4E;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(51, 60, 78, 0.14);
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.exv-bahn-huelle .exv-bahn-knopf:hover,
.exv-bahn-huelle .exv-bahn-knopf:focus-visible {
    background: #F09A3E;
    border-color: #F09A3E;
    color: #FFFFFF;
}

.exv-bahn-huelle .exv-bahn-knopf[hidden] {
    display: none;
}

.exv-bahn-huelle .exv-bahn-knopf--zurueck {
    left: -22px;
}

.exv-bahn-huelle .exv-bahn-knopf--vor {
    right: -22px;
}

@media (max-width: 1024px) {
    /* Auf Tablet und Handy wird gewischt — Pfeile nehmen nur Platz weg. */
    .exv-bahn-huelle .exv-bahn-knopf {
        display: none;
    }

    .exv-bahn > .e-con {
        flex-basis: 280px;
        width: 280px;
        max-width: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exv-bahn {
        scroll-behavior: auto;
    }
}

/* Info-Leiste der Startseite: Trennstriche stehen zwischen den Punkten —
   sobald sie untereinander stehen, muss der Strich waagerecht liegen. */

.exv-flexpunkt + .exv-flexpunkt {
    border-left: 1px solid #E7E4E2;
}

@media (max-width: 1024px) {
    .exv-flexpunkt {
        justify-content: flex-start;
    }

    .exv-flexpunkt + .exv-flexpunkt {
        border-left: 0;
        border-top: 1px solid #E7E4E2;
        padding-top: 16px;
    }
}

/* Liegende Personenkarte (Kontaktaufruf im Fußbereich): sobald Bild und Angaben
   untereinander stehen, gehört auch der Text unter das mittige Bild — sonst klebt
   er am linken Rand. */

@media (max-width: 767px) {
    .exv-person-liegend .elementor-widget-heading,
    .exv-person-liegend .elementor-widget-text-editor {
        text-align: center;
    }

    /* Zeichen und Angabe bleiben als Paar beieinander; mittig steht das Paar,
       nicht seine beiden Teile. */
    .exv-person-liegend .elementor-widget-icon-box {
        align-self: center;
        width: fit-content;
    }
}

/* Klappzeichen auf Handy und Tablet: es braucht nur seine eigene Breite. Bleibt das
   Menüfeld auf Navigationsbreite, drängt es das größere Logo in eine zweite Zeile. */

@media (max-width: 1024px) {
    /* Das Feld reicht über die volle Höhe der Kopfzeile: das aufgeklappte Menü hängt
       an seiner Unterkante (top: 100%) und legte sich sonst über das Logo. */
    .elementor-location-header .elementor-widget-nav-menu {
        width: auto;
        flex: 0 0 auto;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .elementor-location-header .elementor-menu-toggle {
        margin-top: auto;
        margin-bottom: auto;
    }

    /* Elementor hängt das aufgeklappte Menü ans Klappzeichen und rechnet die Werte
       beim Öffnen in den Stil hinein. Es gehört aber unter die ganze Kopfzeile —
       sonst beginnt es auf halber Höhe des Logos. */
    .elementor-location-header .elementor-widget-nav-menu {
        position: static;
    }

    .elementor-location-header .elementor-nav-menu--dropdown {
        top: 100% !important;
        left: 0 !important;
        right: 0;
        width: auto !important;
    }

    /* Auf den Lehrgangs-Sites liegt die Ankerleiste unter der Kopfzeile und trägt
       dieselbe Ebene — ohne diesen Vorrang verschwindet der erste Menüpunkt dahinter. */
    .exv-kopfzeile {
        z-index: 100;
    }
}

/* Kopfleiste: schmal, Symbol und Text auf einer Zeile */

.exv-topbar .elementor-widget-icon-box {
    margin: 0;
}

.exv-topbar .elementor-icon-box-wrapper {
    align-items: center;
}

.exv-topbar .elementor-icon-box-title {
    margin: 0;
}

/* Kopfbereich bleibt beim Scrollen stehen, die orangefarbene Leiste rollt weg */

.elementor-location-header .elementor-sticky--effects {
    box-shadow: 0 2px 12px rgba(51, 60, 78, 0.12);
}

.elementor-location-header .elementor-sticky--effects .e-con-inner {
    padding-top: 12px;
    padding-bottom: 12px;
    transition: padding 200ms ease;
}

/* Beim Mitfahren wird nur die Leiste flacher. Das Logo bleibt, wie es ist: mit der
   Vereinszeile ist jede Verkleinerung eine unleserliche Zeile statt einer kleinen. */

/* Verlinkte Karten: orangefarbener Rahmen, Weltkugel als Hinweis */

a.exv-verlinkt .elementor-icon {
    transition: transform 200ms ease;
}

a.exv-verlinkt:hover {
    background-color: #fffaf4;
}

a.exv-verlinkt:hover .elementor-icon {
    transform: translateX(3px);
}

/* Personen ohne Foto: kompaktes Format, damit die Spalten ruhig bleiben */

.exv-person-kompakt .elementor-widget-heading {
    margin-bottom: 0;
}

/* Lange Mailadressen in Karten sauber umbrechen statt abschneiden */
.exv-karte .elementor-icon-box-title,
.exv-person-liegend .elementor-icon-box-title {
    overflow-wrap: anywhere;
    hyphens: none;
}

/* ---------------------------------------------------------- Contact Form 7 */

.exv-formular p {
    margin: 0 0 18px;
}

.exv-formular-reihe {
    display: flex;
    gap: 18px;
}

.exv-formular-reihe > .exv-feld {
    flex: 1 1 0;
}

.exv-feld {
    position: relative;
}

.exv-feld .wpcf7-form-control-wrap {
    display: block;
}

.exv-formular input[type="text"],
.exv-formular input[type="email"],
.exv-formular input[type="tel"],
.exv-formular textarea {
    width: 100%;
    padding: 24px 14px 8px;
    background: #ffffff;
    border: 1px solid #ddd8d4;
    border-radius: 2px;
    color: #333c4e;
    font-size: 16px;
    line-height: 1.5;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.exv-formular textarea {
    padding-top: 28px;
    resize: vertical;
}

.exv-formular input::placeholder,
.exv-formular textarea::placeholder {
    color: transparent;
}

.exv-formular input:focus,
.exv-formular textarea:focus {
    outline: none;
    border-color: #f09a3e;
    box-shadow: 0 0 0 3px rgba(240, 154, 62, 0.18);
}

.exv-feld > label {
    position: absolute;
    top: 14px;
    left: 15px;
    color: #5e656d;
    font-size: 16px;
    pointer-events: none;
    transition: top 160ms ease, font-size 160ms ease, color 160ms ease;
}

.exv-feld:has(input:focus) > label,
.exv-feld:has(textarea:focus) > label,
.exv-feld:has(input:not(:placeholder-shown)) > label,
.exv-feld:has(textarea:not(:placeholder-shown)) > label {
    top: 6px;
    color: #f09a3e;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.exv-einwilligung {
    color: #5e656d;
    font-size: 14px;
    line-height: 1.75;
}

.exv-einwilligung .wpcf7-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.exv-einwilligung .wpcf7-list-item-label {
    line-height: 1.75;
}

.exv-einwilligung input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 5px;
    width: 16px;
    height: 16px;
    accent-color: #f09a3e;
}

.exv-einwilligung a {
    color: #f09a3e;
}

.exv-formular .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

.exv-formular .wpcf7-submit {
    padding: 13px 29px;
    background: #f09a3e;
    border: 0;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.exv-formular .wpcf7-submit:hover {
    background: #333c4e;
}

.exv-formular .wpcf7-not-valid {
    border-color: #d64545;
}

.exv-formular .wpcf7-not-valid-tip {
    color: #d64545;
    font-size: 14px;
}

@media (max-width: 767px) {
    .exv-formular-reihe {
        flex-direction: column;
        gap: 0;
    }
}

/* Lehrgangs-Sites: Ankerleiste mit Sublogo */

.exv-ankerleiste .elementor-nav-menu a {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Vereinsnavigation auf den Lehrgangs-Sites: gedaempft, der Zweig "Lehrgaenge" traegt die Marke

   ⚠ Die Marke sitzt seit dem 18.08.2026 allein in der Unterstreichung darunter, nicht
   mehr in der Schriftfarbe (exina/global#61): oranger Text auf Weiss ergibt 2,23:1,
   verlangt sind 4,5:1. Der Zweig hebt sich weiterhin ab — die uebrigen Punkte stehen
   gedaempft auf #6C7179, dieser dunkel auf #333C4E (11,07:1) und mit orangem Strich. */

.exv-vereinsnav .elementor-nav-menu a[href*="/lehrgaenge"],
.exv-vereinsnav .elementor-nav-menu a[href*="/lehrgaenge"]:hover {
    color: #333c4e !important;
}

/* Der aktive Zweig traegt dieselbe Unterstreichung wie beim Ueberfahren */
.exv-vereinsnav .elementor-nav-menu--main a[href*="/lehrgaenge"]::after {
    opacity: 1 !important;
    width: 100% !important;
    background-color: #f09a3e !important;
    transform: none !important;
}

/* Auswahlfelder: eigene Gestaltung, damit die schwebende Beschriftung nicht auf dem Wert liegt */

.exv-formular select {
    width: 100%;
    padding: 24px 38px 8px 14px;
    background: #ffffff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235e656d' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px 8px;
    border: 1px solid #ddd8d4;
    border-radius: 2px;
    color: #333c4e;
    font-size: 16px;
    line-height: 1.5;
    appearance: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.exv-formular select:focus {
    outline: none;
    border-color: #f09a3e;
    box-shadow: 0 0 0 3px rgba(240, 154, 62, 0.18);
}

/* Ein Auswahlfeld hat immer einen Wert — die Beschriftung steht deshalb dauerhaft oben */
.exv-feld:has(select) > label {
    top: 6px;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.exv-feld:has(select:focus) > label {
    color: #f09a3e;
}

.exv-hinweis,
.exv-pflicht {
    margin: -6px 0 0;
    color: #5e656d;
    font-size: 13px;
}

/* Ablauf als senkrechte Zeitleiste — Gestaltungsmuster der Lehrgangs-Sites */

.exv-zeitleiste .exv-schritt {
    position: relative;
}

/* Die Linie laeuft vom Fuss des Kreises bis zum Kopf des naechsten */
.exv-zeitleiste .exv-schritt::before {
    position: absolute;
    top: 58px;
    left: 29px;
    width: 2px;
    height: calc(100% - 58px);
    background: #333c4e;
    transform: translateX(-1px);
    content: "";
}

.exv-zeitleiste .exv-schritt:last-child {
    padding-bottom: 0;
}

.exv-zeitleiste .exv-schritt:last-child::before {
    display: none;
}

.exv-zeitleiste .exv-schritt-marke {
    flex: 0 0 58px;
    align-self: flex-start;
    justify-content: center;
    width: 58px;
    height: 58px;
    min-height: 58px;
    background: #333c4e;
    border-radius: 50%;
}

.exv-zeitleiste .exv-schritt-marke .elementor-widget-icon,
.exv-zeitleiste .exv-schritt-marke .elementor-widget-container,
.exv-zeitleiste .exv-schritt-marke .elementor-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.exv-zeitleiste .exv-schritt-marke .elementor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.exv-zeitleiste .exv-schritt-marke .elementor-icon svg,
.exv-zeitleiste .exv-schritt-marke .elementor-icon i {
    display: block;
    fill: #ffffff;
}

@media (max-width: 767px) {
    .exv-zeitleiste .exv-schritt-marke {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        min-height: 46px;
    }

    .exv-zeitleiste .exv-schritt::before {
        top: 46px;
        left: 23px;
        height: calc(100% - 46px);
    }
}

/* Akkordeon der Lehrgangsinhalte — Abstaende wie im Bestand */

.exv-lehrgangsinhalte .elementor-accordion .elementor-accordion-item {
    margin-bottom: 10px;
    border: 1px solid #e7e4e2;
}

.exv-lehrgangsinhalte .elementor-accordion .elementor-accordion-item:last-child {
    margin-bottom: 0;
}

.exv-lehrgangsinhalte .elementor-tab-title {
    transition: background-color 160ms ease;
}

.exv-lehrgangsinhalte .elementor-tab-title:hover {
    background-color: #f2efed;
}

.exv-modul-stunden {
    margin: 0 0 14px;
    padding: 10px 16px;
    background: #333c4e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.exv-modul-text > .exv-modul-stunden {
    display: inline-block;
    margin-bottom: 18px;
}

/* Vorteile: freistehende Haekchenlisten statt Karten */

.exv-vorteilsblock .elementor-icon-list-item {
    align-items: flex-start;
}

.exv-vorteilsblock .elementor-icon-list-icon {
    padding-top: 4px;
}

.exv-vorteilsblock .elementor-icon-list-text {
    line-height: 1.7;
}

/* Preistafeln: der Betrag traegt den Block */

.exv-preistafel .elementor-heading-title {
    line-height: 1.15;
}

.exv-preistafel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.exv-preistafel li {
    margin: 0 0 6px;
}

/* Preistafeln: das Preisband traegt den Betrag, die beste Option hebt sich ab */

.exv-preistafel {
    align-self: stretch;
}

.exv-preisband {
    margin: 6px 0;
}

.exv-preisband .elementor-heading-title {
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.exv-preistafel-beste {
    box-shadow: 0 18px 44px rgba(44, 47, 57, 0.22);
}

/* Orange gehoert der besten Option. Die Raten faerben sich erst, wenn die Karte
   unter dem Zeiger liegt — bis dahin traegt nur eine Tafel die Signalfarbe.
   Der Wechsel haengt an der KARTE, nicht am Band: wer die Karte ansteuert, meint
   das Angebot, nicht die Zahl.

   ⚠ Das !important ist noetig, nicht bequem. Elementor schreibt die Farbe je
   Element als `.elementor-6 .elementor-element.elementor-element-XXXX:not(…)` —
   vier Klassen. Eine Regel aus dem Theme kommt da nicht heran, und die Kennung
   XXXX aendert sich bei jedem Neubau, laesst sich also nicht nachbilden. Ohne
   das Schluesselwort blieb das Band grau und die Regel sah nur so aus, als
   griffe sie (am 10.08.2026 gemessen, nicht vermutet). */
.exv-preisband-rate {
    transition: background-color 200ms ease;
}

.exv-preistafel:hover .exv-preisband-rate,
.exv-preistafel:focus-within .exv-preisband-rate {
    background-color: #f09a3e !important;
}

/* Die Marke liegt ueber der Ecke und draengt den Inhalt nicht nach unten */
.exv-preistafel {
    position: relative;
}

.exv-preismarke {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    margin: 0;
}

.exv-preismarke p {
    margin: 0;
    padding: 3px 10px;
    background: #f09a3e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Alle Tafeln teilen dieselbe Zeilenhoehe, damit Band und Knopf fluchten */
.exv-preiszusatz {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2em;
}

.exv-preiszusatz p {
    margin: 0;
}

.exv-preisliste .elementor-icon-list-items {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.exv-preisliste .elementor-icon-list-item {
    align-items: flex-start;
    text-align: left;
}

.exv-preisliste .elementor-icon-list-icon {
    flex: 0 0 auto;
    padding-top: 5px;
}

.exv-preistafel .elementor-button-wrapper {
    margin-top: auto;
}

.exv-preistafel .elementor-icon-list-items {
    width: 100%;
}

.exv-preistafel .elementor-icon-list-item {
    align-items: flex-start;
}

.exv-preistafel .elementor-icon-list-icon {
    padding-top: 4px;
}

.exv-preistafel .elementor-button-wrapper {
    margin-top: 6px;
}

/* Lehrgangs-Sites: etwas groesserer Fliesstext, naeher am Bestand (16/32) */

.exv-lehrgangsseite .elementor-widget-text-editor,
.exv-lehrgangsseite .elementor-icon-list-text {
    font-size: 17px;
    line-height: 2;
}

.exv-lehrgangsseite .exv-preiszusatz,
.exv-lehrgangsseite .exv-hinweis,
.exv-lehrgangsseite .exv-pflicht,
.exv-lehrgangsseite .exv-modul-dauer,
.exv-lehrgangsseite .elementor-location-footer .elementor-widget-text-editor {
    font-size: inherit;
    line-height: inherit;
}

.exv-lehrgangsseite .exv-preiszusatz p {
    font-size: 14px;
    line-height: 1.5;
}

.exv-lehrgangsseite .exv-preismarke p {
    font-size: 10px;
    line-height: 1.6;
}

/* Fixierter Kopf der Lehrgangs-Sites: weisse Zeile mit Logo plus Ankerleiste.
   Beim Scrollen faellt die Vereinsnavigation weg und das Logo wird kleiner. */

.exv-kopfhalter.elementor-sticky--effects {
    box-shadow: 0 2px 14px rgba(51, 60, 78, 0.16);
}

.exv-kopfhalter.elementor-sticky--effects .exv-vereinsnav {
    display: none;
}

.exv-kopfhalter .exv-kopfzeile .e-con-inner {
    transition: padding 200ms ease;
}

.exv-kopfhalter.elementor-sticky--effects .exv-kopfzeile .e-con-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}


.exv-ankerleiste .exv-sublogo .elementor-heading-title {
    display: inline-block;
    padding-left: 16px;
    border-left: 3px solid #f09a3e;
    line-height: 1.3;
}

.exv-ankerleiste .exv-sublogo a {
    color: inherit;
    transition: color 160ms ease;
}

.exv-ankerleiste .exv-sublogo a:hover {
    color: #f09a3e;
}

@media (max-width: 1024px) {
    .exv-ankerleiste .exv-sublogo .elementor-heading-title {
        padding-left: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .exv-kopfhalter .exv-kopfzeile .e-con-inner {
        transition: none;
    }
}

/* Preisreihe: weniger als drei Tafeln stehen mittig statt gestreckt */

.exv-preisreihe {
    justify-content: center;
}

.exv-preisreihe > .exv-preistafel {
    flex: 0 1 33%;
}

@media (max-width: 1024px) {
    .exv-preisreihe > .exv-preistafel {
        flex-basis: 100%;
    }
}

/* Modulinhalt zweispaltig: Text links, Karte der Lehrenden rechts */

.exv-modul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 34px;
    align-items: start;
}

.exv-modul-text > p:first-child,
.exv-modul-text > .exv-modul-label:first-child {
    margin-top: 0;
}

/* Die Karte selbst noch einmal zweispaltig: Bild links, Angaben rechts */
.exv-dozent {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e7e4e2;
    border-top: 3px solid #f09a3e;
}

.exv-dozent + .exv-dozent {
    margin-top: 14px;
}

.exv-dozent-bild {
    grid-row: 1 / span 2;
    margin: 0;
    overflow: hidden;
}

.exv-dozent-bild img {
    display: block;
    width: 100%;
    height: auto;
}

.exv-dozent-kopf {
    align-self: center;
}

.exv-dozent-angaben {
    grid-column: 1 / -1;
}

.exv-dozent-rolle {
    margin: 0;
    color: #f09a3e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
}

.exv-dozent-name {
    margin: 2px 0 0;
    color: #333c4e;
    font-family: "Roboto Slab", Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.exv-dozent-label {
    margin: 14px 0 4px;
    color: #333c4e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
}

.exv-dozent-angaben > .exv-dozent-label:first-child {
    margin-top: 4px;
}

.exv-dozent ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.exv-dozent li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 15px;
    color: #5e656d;
    font-size: 14px;
    line-height: 1.6;
}

.exv-dozent li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #f09a3e;
    content: "\203A";
}

@media (max-width: 1024px) {
    .exv-modul {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .exv-dozent {
        max-width: 480px;
    }
}

@media (max-width: 480px) {
    .exv-dozent {
        grid-template-columns: 1fr;
    }

    .exv-dozent-bild {
        grid-row: auto;
        max-width: 140px;
    }
}

.exv-dozent-team {
    grid-template-columns: 1fr;
}

.exv-dozent-team .exv-dozent-angaben > .exv-dozent-rolle {
    margin-bottom: 10px;
}

/* Aufzählungen im Modultext — im Bestand tragen sie einen erheblichen Teil des Inhalts */

.exv-modul-liste {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.exv-modul-liste li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 22px;
}

.exv-modul-liste li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: #f09a3e;
    font-weight: 700;
    content: "\2713";
}

.exv-modul-label {
    margin: 20px 0 10px;
    color: #333c4e;
    font-family: "Roboto Slab", Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}

/* ── Barrierefreiheit ─────────────────────────────────────────────────────────
   Der Sprunglink muss beim Tabben SICHTBAR werden. Hello Elementor versteckt ihn
   mit clip: rect(0,0,0,0) und setzt ihn beim Fokus nicht zurueck — gemessen am
   2026-08-11 mit Lighthouse („Skip links are not focusable"). Damit ist er fuer
   Tastaturnutzer da, aber unsichtbar: man springt ins Nichts. */
.skip-link.screen-reader-text:focus,
.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    display: block;
    padding: 12px 20px;
    background: #333C4E;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* Ein sichtbarer Fokus auf allem, was man mit der Tastatur erreicht. Elementor
   setzt outline: none auf Knoepfe und Links. */
.exv-inhalt a:focus-visible,
.exv-inhalt button:focus-visible,
.exv-inhalt input:focus-visible,
.exv-inhalt select:focus-visible,
.exv-inhalt textarea:focus-visible,
header a:focus-visible,
footer a:focus-visible {
    outline: 3px solid #333C4E;
    outline-offset: 2px;
}

/* Ein Link im Fliesstext muss auch ohne Farbwahrnehmung als Link erkennbar sein
   (WCAG 1.4.1). Die Hausfarbe hob sich vom Fliesstext nur um 2,31:1 ab — gefordert
   waeren 3:1 —, also traegt der Link zusaetzlich eine Unterstreichung. Gemessen am
   2026-08-12 mit axe („Links rely on color to be distinguishable").

   ⚠ Seit dem 18.08.2026 ist der Link nicht mehr orange, sondern dunkel wie eine
   Ueberschrift (exina/global#61: oranger Text auf Weiss sind 2,23:1). Damit ist der
   Abstand zum Fliesstext auf 1,88:1 GESUNKEN — die Unterstreichung ist jetzt das
   einzige Merkmal und damit wichtiger als vorher, nicht unwichtiger.

   Das Orange sitzt deshalb im STRICH. Er ist Flaeche, keine Schrift, und faellt
   nicht unter die 4,5:1 — so behaelt der Link seine Hausfarbe, ohne sie dorthin zu
   legen, wo sie den Kontrast reisst.

   ⚠ `text-decoration-color` braucht die Langform. Die Kurzform `text-decoration`
   setzt die Farbe auf currentColor zurueck; ein zweiter Regelsatz daneben verliert
   ausserdem gegen diesen Selektor. Beides gehoert in DIESE Regel.

   Nur Text-Links: Knoepfe, Navigation und Symbolkacheln sind an Form und Platz
   erkennbar und stehen ausserhalb von .exv-inhalt beziehungsweise tragen
   .elementor-button. */
.exv-inhalt p a:not(.elementor-button):not(.elementor-icon),
.exv-inhalt li a:not(.elementor-button):not(.elementor-icon) {
    text-decoration-line: underline;
    text-decoration-color: #f09a3e;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.exv-inhalt p a:not(.elementor-button):not(.elementor-icon):hover,
.exv-inhalt p a:not(.elementor-button):not(.elementor-icon):focus-visible,
.exv-inhalt li a:not(.elementor-button):not(.elementor-icon):hover,
.exv-inhalt li a:not(.elementor-button):not(.elementor-icon):focus-visible {
    text-decoration-color: #2c2f39;
}