/*
    Team Winter – style.css
    Konsolidierte, logisch gegliederte Arbeitsversion

    Gestaltungsprinzipien:
    - Desktop-Container: 1120px
    - Drei-Spalten-Logik: einheitliche Spaltenbreite über Teaser, Sidebar und Hero-Karte
    - Mobile: alle Spalten werden untereinander dargestellt
    - Spezifische Unterseitenregeln stehen am Ende
*/


/* ============================================================
   Lokale Schrift: klassische Ubuntu Font Family
   Quelle: Canonical Ubuntu Font Family, lokal gehostet.
   Die Familie wird als "Ubuntu" registriert, damit die
   bestehende CSS-Logik unverändert bleibt.
   Aktive Schnitte: 400, 500, 600 und 700, jeweils normal/kursiv.
   Die lokalen Dateien liegen als WOFF2 vor, damit der erste Seitenaufbau
   spürbar schneller erfolgt als mit den originalen TTF-Dateien.
   Der frühere 300er/Light-Schnitt wird derzeit nicht verwendet.
   font-weight: 600 wird bewusst auf den Medium-Schnitt gemappt.
============================================================ */


@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-R.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-RI.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-M.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-MI.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-M.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-MI.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-B.woff2') format('woff2');
}

@font-face {
    font-family: 'Ubuntu';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ubuntu/Ubuntu-BI.woff2') format('woff2');
}

/* ============================================================
   1. Variablen, Reset, Basis
============================================================ */

:root {
    --red: #c5232b;
    --yellow: #f1d21a;
    --text: #111;
    --muted: #777;
    --line: #e5e5e5;
    --nav-bg: #eee;
    --light-grey: #f1f1f1;
    --page-bg: #fff;

    --site-width: 1120px;
    --side-col: 360px;
    --grid-gap: 33px;
    --mobile-margin: 17px;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Ubuntu, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--red);
}

/* HTML-Hervorhebungen bewusst auf Medium standardisieren.
   Die klassische Ubuntu-Familie wirkt mit 700 im Fließtext oft zu kräftig. */
strong,
b {
    font-weight: 500;
}

img {
    max-width: 100%;
    height: auto;
}

/* Toggle-Pfeile bewusst mit Systemschrift: ►/▼ sind nicht Teil der
   lokalen Ubuntu-Schrift und sollen zuverlässig per Fallback erscheinen. */
.course-card-toggle-button::after,
.nav .mobile-toggle::after,
.team-card-toggle-button::after {
    font-family: Arial, Helvetica, sans-serif;
}


/* ============================================================
   2. Container und allgemeine Hilfsklassen
============================================================ */

.wrap {
    width: var(--site-width);
    max-width: calc(100% - (2 * var(--mobile-margin)));
    margin: 0 auto;
}

.color-strip {
    height: 6px;
    background: linear-gradient(90deg, #b91f28 0%, #d75b28 57%, #f1dc22 100%);
}

.button {
    display: inline-block;
    padding: 9px 16px;
    border: 0;
    background: var(--red);
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.button:hover,
.button:focus {
    background: #b51f27;
    color: #fff;
}

.outline {
    display: inline-block;
    padding: 7px 13px;
    border: 1px solid var(--red);
    background: #fff;
    color: var(--red);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.outline:hover,
.outline:focus {
    background: var(--red);
    color: #fff;
}

.seminar-anchor {
    scroll-margin-top: 80px;
}


/* ============================================================
   3. Header
============================================================ */

.site-header {
    background: #fff;
}

.header-inner {
    position: relative;
    height: 125px;
}

.logo {
    position: absolute;
    left: 0;
    top: 15px;
    width: 100px;
    height: 100px;
    display: block;
}

.logo img {
    display: block;
    width: 100%;
    height: 100%;
}

.headline {
    position: absolute;
    right: 0;
    top: 20px;
    text-align: right;
}

.headline h1 {
    margin: 0;
    color: #000;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
}

.headline p {
    margin: 13px 0 0;
    color: var(--red);
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}


/* Mobile-Untermenüschalter: Desktop standardmäßig ausblenden */
.mobile-toggle {
    display: none;
}


/* ============================================================
   4. Navigation
============================================================ */

.nav {
    height: 50px;
    background: var(--nav-bg);
}

.nav-inner {
    display: flex;
    align-items: stretch;
}

.nav a,
.nav-item > a {
    display: block;
    height: 50px;
    padding: 15px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.nav a.active {
    background: var(--red);
    color: #fff;
}

.nav a:hover,
.nav-item:hover > a {
    background: #dcdcdc;
}

.nav-item {
    position: relative;
}

.dropdown {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 5px 16px #0002;
    z-index: 10;
}

.dropdown a {
    border-bottom: 1px solid #eee;
    color: #333;
}

.nav-item:hover .dropdown {
    display: block;
}


/* ============================================================
   5. Hero-Bereich
   Desktop als 2-Spalten-Raster:
   links Bild, rechts Seminar-/Teaserkarte mit Sidebar-Breite.
============================================================ */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-col);
    gap: var(--grid-gap);
    align-items: end;
    min-height: 560px;
    position: relative;
}

.hero-image-wrap {
    min-width: 0;
    align-self: end;
}

.hero-img {
    display: block;
    width: min(100%, 660px);
    max-width: none;
    min-width: 560px;
    margin-top: 25px;
}

.home-next-seminar-card {
    width: 100%;
    margin-top: 16px;
    align-self: start;
    border: 0;
    background: var(--light-grey);
    text-align: center;
    box-shadow: none;
    overflow: hidden;
}

.home-next-seminar-card .mini {
    margin: 0;
    padding: 15px 10px;
    background: linear-gradient(90deg, #b91f28 0%, #d75b28 57%, #f1dc22 100%);
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

.home-next-seminar-card-body {
    padding: 20px 17px 22px;
}

.home-next-seminar-card h2 {
    margin: 0 auto 12px;
    color: var(--red);
    font-size: 21px;
    line-height: 1.25;
    font-weight: 500;
    transform: translateY(-2px);
}

.home-next-seminar-image {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 12px;
    background: #fff;
}

.home-next-seminar-title-short .home-next-seminar-image {
    max-width: 320px;
}

.home-next-seminar-title-medium .home-next-seminar-image {
    max-width: 285px;
}

.home-next-seminar-title-long .home-next-seminar-image {
    max-width: 245px;
}

.home-next-seminar-meta {
    margin: 0 auto 5px;
    font-size: 14px;
    line-height: 1.45;
}

.home-next-seminar-location {
    margin-bottom: 0;
}

.home-next-seminar-price {
    margin: 16px 0 15px;
    color: #111;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-2px);
}

.home-next-seminar-action {
    margin: 0;
}


/* ============================================================
   6. Teaser-Boxen
   Drei gleich breite Spalten über die volle Containerbreite.
============================================================ */

.teaser-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    margin: 0 0 26px;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 1px 8px #0002;
}

.teaser-box h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
}

.teaser-box p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
}

/* Ausbildungsübersicht: schlanke Linkkarten ohne zusätzliche Komponentenlogik. */
.training-overview {
    margin: 28px 0 30px;
}

.training-section-title,
.training-overview h2 {
    margin: 0 0 14px;
    color: var(--red);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 500;
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.training-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 15px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.training-card-featured {
    border-left: 3px solid var(--red);
    padding-left: 13px;
}

.training-card h3 {
    margin: 0 0 7px;
    color: var(--red);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.training-card p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
}

.training-card .outline {
    margin-top: auto;
}

/* Touch-Geräte: kein hängender Hover-Zustand bei Übersichtskarten nach Zurück-Navigation. */
@media (hover: none), (pointer: coarse) {
    .training-card .outline:hover,
    .training-card .outline:focus {
        background: #fff;
        color: var(--red);
    }

    .training-card .outline:active {
        background: var(--red);
        color: #fff;
    }
}

/* Ruhiger Beratungs-Hinweis auf der Ausbildungsübersicht.
   Bewusst ohne Kartenkopf, damit er nicht wie ein weiteres Einstiegsseminar wirkt. */
.training-advice-note {
    margin: 34px 0 30px;
    padding: 18px 20px 19px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-left: 3px solid var(--red);
    border-radius: 3px;
}

.training-advice-note h2 {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
}

.training-advice-note p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
}

.training-advice-note p:last-child {
    margin-bottom: 0;
}

.training-advice-note .media-actions {
    margin-top: 14px;
}

.training-entry-area {
    margin-bottom: 30px;
}

.training-entry-block {
    margin: 22px 0 30px;
}

.training-entry-block:last-child {
    margin-bottom: 0;
}

.training-entry-subgroup {
    margin: 0;
}

.training-entry-subgroup + .training-entry-subgroup {
    margin-top: 18px;
}

.training-entry-block .course-section,
.training-entry-block .course-list,
.training-entry-block .course-group {
    margin: 0;
}

.training-entry-block .course-group .course-card {
    margin: 10px 0 0;
}

.training-entry-block .course-group .course-card:first-of-type {
    margin-top: 0;
}

.training-entry-block .course-card:last-child {
    margin-bottom: 0;
}


/* Teamseite: Faktenbox im Inhaltsbereich.
   Die Box gehört nicht zum Hero, sondern dient als kompakter Einstieg
   vor der Trainerliste. Dadurch bleibt der Standard-Hero ruhig und konsistent. */
.team-page .team-facts {
    margin: 22px 0 26px;
}

@media (max-width: 880px) {
    .team-page .team-facts {
        margin: 18px 0 22px;
    }
}
/* ============================================================
   7. Breadcrumb, Hauptlayout und Content
============================================================ */

.breadcrumb {
    margin: 12px 0 24px 18px;
    color: #777;
    font-size: 13px;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-col);
    gap: var(--grid-gap);
}

.content {
    min-width: 0;
}

.content h1 {
    margin: 3px 0 24px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.content h1::after {
    content: "";
    display: block;
    width: 64px;
    margin-top: 13px;
    border-bottom: 1px solid #ddd;
}

.content p,
.intro p,
.faq p {
    font-size: 15px;
    line-height: 1.65;
}

.intro-img {
    display: block;
    width: 470px;
    max-width: 100%;
    margin: 0 auto 15px;
}

.intro p {
    margin: 0 0 7px;
}

.intro a,
.faq a {
    color: var(--red);
}

hr {
    margin: 40px 0 8px;
    border: 0;
    border-top: 1px solid #ddd;
}

.tags {
    margin-bottom: 38px;
    color: #888;
    font-size: 12px;
}

.tags a {
    margin-right: 15px;
    color: #777;
    text-decoration: none;
}


/* ============================================================
   8. FAQ
============================================================ */

.faq h2 {
    margin: 0 0 30px;
    color: var(--red);
    text-align: center;
    font-size: 25px;
    line-height: 1.25;
}

.faq h3 {
    margin: 22px 0 7px;
    color: var(--red);
    font-size: 20px;
    line-height: 1.3;
}

.faq p {
    margin: 0 0 10px;
}


/* ============================================================
   9. Sidebar
   Gleiche Desktop-Breite wie rechte Hero-Karte.
============================================================ */

.sidebar {
    width: 100%;
    padding-top: 16px;
}

.sidebox {
    margin-bottom: 24px;
    background: var(--light-grey);
    text-align: center;
}

.sidebox h2 {
    margin: 0;
    padding: 15px 10px;
    background: var(--red);
    color: #fff;
    font-size: 16px;
}

.sidebody {
    padding: 26px 17px;
}

.sidebody p,
.sidebody li {
    margin: 5px auto;
    font-size: 14px;
    line-height: 1.5;
}

.sidebody p:last-child,
.sidebody li:last-child {
    margin-bottom: 0;
}

.sidebody img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
    background: #fff;
}

.arrows {
    padding-top: 5px;
    color: #bbb;
    font-size: 20px;
}


/* Kompakte Sidebar-Karte für das nächste Einsteigerseminar.
   Datenbasis ist dieselbe wie im Home-Hero, die Darstellung bleibt aber
   bewusst ruhiger und passt zur Zertifizierungs-/Infokarten-Logik. */
.aside-next-seminar-card .sidebody {
    padding-top: 20px;
}

/* Die nächste-Seminar-Karte nutzt die globale Sidebar-Typografie.
   Nur Seminartitel und Bildgröße bleiben spezifisch. */
.aside-next-seminar-image {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 13px;
    background: #fff;
}

.aside-next-seminar-title {
    margin: 0 auto 9px !important;
    color: var(--red);
    font-size: 19px !important;
    line-height: 1.28 !important;
    font-weight: 500;
}

.aside-next-seminar-meta {
    margin: 0 auto 7px !important;
    color: #333;
}

.aside-next-seminar-action {
    margin: 14px 0 0 !important;
}


/* ============================================================
   10. Footer
============================================================ */

footer {
    margin-top: 40px;
    background: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-bottom: 33px;
}

footer h3 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 500;
}

footer a {
    display: block;
    margin: 2px 0;
    color: #555;
    text-decoration: none;
}

footer,
footer a,
.footer-team p {
    font-size: 15px;
    line-height: 1.45;
}

.footer-team img {
    display: block;
    width: 100%;
    max-width: var(--side-col);
    margin-bottom: 8px;
}

.footer-team p {
    margin: 0;
}

.copyright {
    padding: 18px 0;
    border-top: 1px solid #eee;
    color: #777;
    text-align: center;
    font-size: 13px;
}


/* ============================================================
   11. Standard-Hero für Unterseiten
============================================================ */

.hero-standard-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: 30px;
    background: #fff;
    border: 3px solid var(--yellow);
    text-align: center;
}

.hero-standard-title {
    margin: 0 0 24px;
    color: var(--red);
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.25;
}

.hero-standard-card .button {
    align-self: center;
    padding: 10px 18px;
    font-size: 15px;
}

.hero-standard {
    min-height: 0;
    height: 400px;
    padding: 12px 0;
    align-items: center;
    box-sizing: border-box;
}

.hero-standard .hero-img {
    height: 376px;
    margin-top: 0;
    object-fit: cover;
    object-position: center;
}

.hero-standard .hero-standard-card {
    align-self: center;
    min-height: 0;
    margin-top: 0;
    padding: 42px 22px;
}

.notice-box {
    margin: 0 0 22px;
    border: 1px solid #ddd;
    padding: 18px;
    background: #f1f1f1;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 500;
}


/* ============================================================
   12. Generische Seminar-/Kurskarten im Content
============================================================ */

.course-card {
    margin: 36px 0 24px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.course-card-header {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 24px;
    align-items: center;
    padding: 22px 24px;
    background: #eee;
}

.course-card-toggle {
    position: relative;
    width: 100%;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.course-card-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.course-card-toggle-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    border: 0;
    background: transparent;
    pointer-events: none;
    font-size: 0;
}

.course-card-toggle-button::after {
    content: "\25B8"; /* ► */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding-right: 20px;
    color: var(--red);
    font-size: 22px;
    line-height: 1;
}

.course-card.is-open .course-card-toggle-button::after {
    content: "\25BE"; /* ▼ */
}

.course-card:not(.is-open) .course-card-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

/*
   Wiederverwendbare Card-Titel:
   Kurskarten, Trainerkarten und Medienkarten teilen dieselbe ruhige
   typografische Grundlogik.
*/
.card-title,
.course-card-title,
.team-card-name,
.media-card-title {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

.course-card-number {
    margin: 0;
    color: var(--red);
    font-size: 14px;
    font-weight: 600;
}

.course-card-date,
.course-card-location {
    margin: 0;
    font-weight: 600;
}

.course-card-date {
    margin-bottom: 6px;
}

.course-card-meta-row,
.course-card-detail-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 6px;
    align-items: start;
}

.course-card-meta-label,
.course-card-detail-label {
    white-space: nowrap;
}

.course-card-meta-value,
.course-card-detail-value {
    min-width: 0;
}

.course-card-description .course-card-detail-row {
    margin: 0 0 14px;
}

.course-card-body {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 24px;
    padding: 18px 24px 28px;
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition:
        max-height 350ms cubic-bezier(.25,.8,.25,1),
        padding-top 250ms ease,
        padding-bottom 250ms ease,
        opacity 180ms ease;
}

.course-card-body > * {
    min-height: 0;
}

.course-card-image {
    display: block;
    width: 100%;
}

.course-card-description p {
    margin-bottom: 14px;
}


.course-card-subtitle {
    margin: 0 0 10px;
    color: #333;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
}

.course-card-description-text {
    margin-bottom: 16px;
}

.course-card-description-text p {
    margin: 0 0 8px;
}

.course-card-description-text p:last-child {
    margin-bottom: 0;
}


.course-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding-top: 3px;
}

.course-card-actions .outline {
    margin: 0;
}


/* ============================================================
   Seminargruppen innerhalb eines Lehrgangs
   Zusammengehörige Module eng, neue Lehrgänge deutlich getrennt.
============================================================ */

.course-section {
    margin-top: 20px;
}

.course-section::before {
    content: "";
    display: block;
    width: 64px;
    margin-bottom: 16px;
    border-top: 1px solid #ddd;
}

.course-list {
    margin-bottom: 24px;
}

.course-group {
    margin-top: 20px;
}

.course-group:first-child {
    margin-top: 0;
}

.course-group-title {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.course-group .course-card {
    margin: 10px 0 0;
}

.course-group .course-card:first-of-type {
    margin-top: 0;
}

.course-group-supplement {
    margin-top: 20px;
}


/* ============================================================
   13. Mittlere Desktop-Breiten
   Hero-Bilder möglichst groß halten, ohne die rechte Spalte zu verbreitern.
============================================================ */

@media (min-width: 881px) and (max-width: 1120px) {

    .hero-home {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-col));
        gap: clamp(0px, 1.5vw, var(--grid-gap));
        overflow: hidden;
    }

    .hero-home .home-next-seminar-card {
        width: 100%;
        max-width: var(--side-col);
        justify-self: end;
        transform: none;
    }
}


@media (min-width: 881px) {
    .hero-standard::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 12px;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.15) 10%,
            rgba(0, 0, 0, 0) 60%
        );
    }
}

/* ============================================================
   14. Tablet und Mobile
============================================================ */

@media (max-width: 880px) {

    .site-header::before {
        display: none;
        content: none;
    }

    body {
        font-size: 14px;
        line-height: 1.5;
    }

    .color-strip {
        height: 4px;
    }

    .wrap {
        width: auto;
        max-width: none;
        margin: 0 var(--mobile-margin);
    }

    .header-inner {
        height: auto;
        padding: 16px 0 14px;
        text-align: center;
    }

    .logo {
        position: static;
        width: 80px;
        height: 80px;
        margin: 0 auto 10px;
    }

    .headline {
        position: static;
        margin: 0;
        text-align: center;
    }

    .headline h1 {
        font-size: 18px;
        line-height: 1.2;
    }

    .headline p {
        margin-top: 8px;
        font-size: 12px;
    }

    .hero {
        display: block;
        min-height: 0;
        height: auto;
        padding-top: 3px;
    }

    .hero-img {
        width: 100%;
        max-width: 640px;
        min-width: 0;
        margin: 0 auto 15px;
    }

    .home-next-seminar-card,
    .hero-standard-card,
    .sidebar {
        width: 100%;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-next-seminar-card {
        margin-bottom: 15px;
    }

    .home-next-seminar-card .mini {
        padding: 12px 8px;
        font-size: 16px;
    }

    .home-next-seminar-card-body {
        padding: 18px 13px;
    }

    .home-next-seminar-image,
    .home-next-seminar-title-short .home-next-seminar-image,
    .home-next-seminar-title-medium .home-next-seminar-image,
    .home-next-seminar-title-long .home-next-seminar-image {
        max-width: 480px;
        margin-bottom: 13px;
    }

    .home-next-seminar-card h2 {
        font-size: 20px;
    }

    .home-next-seminar-meta {
        font-size: 14px;
    }

    .hero-standard-card {
        padding: 24px 18px;
        border-width: 2px;
    }

    .hero-standard {
        height: auto;
        padding-top: 12px;
        padding-bottom: 16px;
        box-shadow: none;
    }

    .hero-standard .hero-img {
        height: auto;
        margin-bottom: 20px;
    }

    .hero-standard .hero-standard-card {
        width: calc(100% - 36px);
        max-width: 360px;
        margin-top: 0;
        padding: 30px 18px;
    }

    .hero-standard-title {
        font-size: 21px;
    }

    .hero-standard-card .button,
    .button,
    .outline {
        font-size: 14px;
    }

    .button {
        padding: 8px 14px;
    }

    .outline {
        padding: 6px 11px;
    }

    .home-next-seminar-price {
        margin: 14px 0 13px;
        font-size: 30px;
    }

    .teaser-box {
        display: block;
        margin: 0 0 18px;
        padding: 18px 20px;
        box-shadow: 0 1px 6px #0002;
    }

    .teaser-box article {
        margin-bottom: 16px;
    }

    .teaser-box article:last-child {
        margin-bottom: 0;
    }

    .teaser-box h3 {
        margin-bottom: 7px;
        font-size: 20px;
    }


    .training-overview {
        margin: 24px 0;
    }

    .training-section-title,
.training-overview h2 {
        font-size: 21px;
    }

    .training-grid {
        display: block;
    }

    .training-card {
        margin-bottom: 12px;
        padding: 14px 15px;
    }

    .training-card:last-child {
        margin-bottom: 0;
    }

    .training-entry-block {
        margin: 20px 0 26px;
    }

    .training-entry-subgroup + .training-entry-subgroup {
        margin-top: 16px;
    }

    .training-advice-note {
        margin: 28px 0 26px;
        padding: 16px 17px 17px;
    }

    .training-advice-note h2 {
        font-size: 20px;
    }

    .breadcrumb {
        margin: 0 0 20px;
        font-size: 13px;
    }

    .layout {
        display: block;
    }

    .content h1 {
        margin-bottom: 18px;
        font-size: 21px;
        line-height: 1.25;
    }

    .content h1::after {
        width: 33px;
        margin-top: 8px;
    }

    .content p,
    .intro p,
    .faq p {
        font-size: 15px;
    }

    .intro-img {
        width: 100%;
        max-width: 640px;
        margin-bottom: 12px;
    }

    .intro p {
        margin-bottom: 6px;
    }

    hr {
        margin: 25px 0 7px;
    }

    .tags {
        margin-bottom: 30px;
        font-size: 13px;
    }

    .tags a {
        margin-right: 7px;
    }

    .faq h2 {
        margin-bottom: 26px;
        font-size: 24px;
        line-height: 1.2;
    }

    .faq h3 {
        margin: 18px 0 6px;
        font-size: 21px;
        line-height: 1.25;
    }

    .sidebar {
        display: block;
        padding-top: 18px;
    }

    .sidebox {
        margin-bottom: 18px;
    }

    .sidebox h2 {
        padding: 12px 8px;
        font-size: 16px;
    }

    .sidebody {
        padding: 18px 13px;
    }

    .sidebody p {
        margin-bottom: 12px;
    }

    .arrows {
        padding-top: 8px;
        font-size: 18px;
    }

    .notice-box {
        padding: 16px 18px;
        font-size: 17px;
    }

    .course-card-header,
    .course-card-body {
        display: block;
        padding: 18px 20px;
    }

    .course-card-title {
        font-size: 22px;
    }

    .course-card-number,
    .course-card-image {
        margin-bottom: 16px;
    }

    footer {
        margin-top: 33px;
    }

    .footer-grid {
        display: block;
        padding-bottom: 33px;
    }

    footer section {
        margin-bottom: 20px;
    }

    footer h3 {
        margin-bottom: 5px;
    }

    footer,
    footer a,
    .footer-team p {
        font-size: 15px;
    }

    .footer-team img {
        max-width: var(--side-col);
        margin: 0 auto 10px;
    }

    .copyright {
        padding: 13px 0;
        font-size: 11px;
    }
}

/* Teilnehmer-Feedback: automatische lokale Bild-/PDF-Navigation ohne externe Abhängigkeiten */
.testimonial-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: height 350ms cubic-bezier(.25,.8,.25,1);
}

.testimonial-slide {
    display: none;
}

.testimonial-slide.is-active {
    display: block;
}

.testimonial-frame {
    width: 100%;
}

.testimonial-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #fff;
}

/* Die globale Sidebar-Regel .sidebody img setzt Außenabstände für normale
   Sidebar-Bilder. In der animierten Testimonial-Viewport-Höhe würden diese
   Margins nicht zuverlässig mitgemessen und können den unteren Rand abschneiden. */
.testimonial-box .testimonial-image {
    margin: 0 auto;
}

.testimonial-pdf-card {
    width: 100%;
}

.testimonial-pdf-frame {
    display: block;
    width: 100%;
    height: 320px;
    border: 1px solid #ddd;
    background: #fff;
}

.testimonial-pdf-action {
    margin: 11px 0 0 !important;
}

.testimonial-pdf-action .outline {
    width: auto;
}

.testimonial-empty {
    margin: 0 !important;
    color: #555;
}

.testimonial-arrows {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
}

.testimonial-arrows button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 10px;
}

.testimonial-arrows button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ============================================================
   Navigation – aktive Unterpunkte und mobiles Klappmenü
   ------------------------------------------------------------
   Die vormals angehängten mobilen Korrekturblöcke sind hier
   zusammengeführt: Listenrahmen, aktive Elternpunkte, größere
   Pfeilfläche und feste Pfeile ohne Rotation.
============================================================ */

.dropdown a.active-sub,
.dropdown a.active-sub::before {
    color: var(--red);
}

@media (max-width: 880px) {

    .nav {
        display: block;
        height: auto;
        margin: 0 0 18px;
        background: transparent;
    }

    .nav .nav-inner {
        display: block;
        width: calc(100% - (2 * var(--mobile-margin))) !important;
        max-width: 640px;
        margin: 0 auto !important;
        background: var(--nav-bg);
    }

    .nav .nav-item,
    .nav .nav-item-single {
        position: relative;
        border-right: 1px solid #d0d0d0;
        border-bottom: 1px solid #d0d0d0;
        border-left: 1px solid #d0d0d0;
    }

    .nav .nav-item:first-child,
    .nav .nav-item-single:first-child {
        border-top: 1px solid #d0d0d0;
    }

    .nav .nav-item > a,
    .nav .nav-item-single > a {
        display: block;
        height: auto;
        padding: 12px 46px 12px 24px;
        color: #333;
        background: var(--nav-bg);
        font-size: 16px;
        line-height: 1.3;
        transition:
            background-color 180ms ease,
            color 180ms ease;
    }

    .nav .nav-item > a.active,
    .nav .nav-item-single > a.active,
    .nav .nav-item > a.active:hover,
    .nav .nav-item-single > a.active:hover,
    .nav .nav-item:hover > a.active {
        background: var(--red);
        color: #fff;
    }

    .nav .nav-item > a:hover,
    .nav .nav-item-single > a:hover,
    .nav .nav-item:hover > a {
        background: #ddd;
        color: #333;
    }

    .nav .mobile-toggle,
    .nav .nav-item.open .mobile-toggle {
        position: absolute;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 120px !important;
        height: 48px !important;
        min-height: 0 !important;
        padding: 0 20px 0 0 !important;
        border: 0;
        background: transparent;
        color: var(--red);
        font-size: 0 !important;
        line-height: 1 !important;
        cursor: pointer;
        transform: none !important;
        transition: color 180ms ease;
    }

    .nav .nav-item > a.active + .mobile-toggle {
        color: #fff;
    }

    .nav .mobile-toggle::after {
        content: "\25B8"; /* ► */
        display: block;
        color: inherit;
        font-size: 20px;
        line-height: 20px;
        transform: none !important;
        transition: color 180ms ease;
    }

    .nav .nav-item.open .mobile-toggle::after {
        content: "\25BE"; /* ▼ */
        transform: none !important;
    }

    .nav .dropdown {
        display: none;
        position: static;
        min-width: 0;
        background: #f7f7f7;
        box-shadow: none;
    }

    .nav .nav-item:not(.open) .dropdown {
        display: none !important;
    }

    .nav .nav-item.open .dropdown {
        display: block !important;
    }

    .nav .dropdown a {
        display: block;
        height: auto;
        padding: 10px 16px 10px 42px;
        border-top: 1px solid #ddd;
        background: #f7f7f7;
        color: #333;
        font-size: 15px;
        line-height: 1.3;
    }

    .nav .dropdown a:hover {
        background: #fff;
    }

    .nav .dropdown a.active-sub {
        background: #fff;
        color: var(--red);
    }
}

/* ============================================================
   Teamseite – Trainerkarten im Stil der Seminarcards
   Bild links/oben bündig, Accordion mit ruhigen Pfeilen.
============================================================ */

.team-page .team-list {
    margin-top: 24px;
}

.team-list > h2 {
    margin: 0 0 18px;
    color: var(--red);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
}

.team-card {
    margin: 20px 0 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.team-card:first-of-type {
    margin-top: 0;
}

.team-card-header {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    position: relative;
    width: 100%;
    min-height: 200px;
    padding: 0 70px 0 0;
    border: 0;
    background: #eee;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.team-card-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.team-card-image-wrap {
    display: block;
    align-self: start;
    width: 150px;
    height: 200px;
    margin: 0;
    overflow: hidden;
    border: 0;
    background: #fff url('/images/team/default-trainer.jpg') center top / cover no-repeat;
}

.team-card-image {
    display: block;
    width: 150px;
    height: 200px;
    max-width: none;
    object-fit: cover;
    object-position: center top;
}

.team-card-summary {
    display: block;
    min-width: 0;
    padding: 18px 0 14px;
}

.team-card-name {
    display: block;
    margin-bottom: 8px;
}

.team-card-role {
    display: block;
    margin: 0;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.team-card-meta {
    display: block;
    margin-top: 8px;
    color: var(--red);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.team-card-toggle-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 100%;
    pointer-events: none;
    font-size: 0;
}

.team-card-toggle-button::after,
.team-card.is-open .team-card-toggle-button::after {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding-right: 25px;
    color: var(--red);
    font-size: 22px;
    line-height: 1;
    transform: none;
}

.team-card-toggle-button::after {
    content: "\25B8"; /* ► */
}

.team-card.is-open .team-card-toggle-button::after {
    content: "\25BE"; /* ▼ */
}

.team-card-body {
    overflow: hidden;
    max-height: 1600px;
    padding: 20px 24px 24px;
    opacity: 1;
    transition:
        max-height 350ms cubic-bezier(.25,.8,.25,1),
        padding-top 250ms ease,
        padding-bottom 250ms ease,
        opacity 180ms ease;
}

.team-card:not(.is-open) .team-card-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.team-card-text p {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.65;
}

.team-card-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 880px) {

    .team-list > h2 {
        font-size: 22px;
    }

    .team-card-header {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 14px;
        min-height: 150px;
        padding: 0 54px 0 0;
    }

    .team-card-image-wrap,
    .team-card-image {
        width: 150px;
        height: 200px;
    }

    .team-card-summary {
        padding: 12px 0 10px;
    }

    .team-card-name {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .team-card-role {
        font-size: 13px;
        line-height: 1.35;
    }

    .team-card-toggle-button::after,
    .team-card.is-open .team-card-toggle-button::after {
        padding-right: 20px;
        font-size: 22px;
    }

    .team-card-body {
        padding: 16px 18px 20px;
    }
}


/* ============================================================
   Trainerdetailseite
   Große Profilkarte in derselben Designsprache wie Team- und Seminarcards.
============================================================ */

.trainer-profile {
    margin-top: 24px;
}

.trainer-profile-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.trainer-profile-header {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    background: #eee;
}

.trainer-profile-image-wrap {
    display: block;
    width: 320px;
    min-height: 320px;
    background: #fff url('/images/team/default-trainer.jpg') center top / cover no-repeat;
    overflow: hidden;
}

.trainer-profile-image {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center top;
}

.trainer-profile-summary {
    padding: 30px 34px 28px 0;
}

.trainer-profile-name {
    margin: 0 0 10px;
    color: var(--red);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
}

/* Trainernamen sind H1-Elemente; dieser spezifische Selektor überschreibt
   die allgemeine .content h1-Regel auf der Trainerdetailseite. */
.content h1.trainer-profile-name {
    font-weight: 500;
}

.trainer-profile-role {
    margin: 0 0 14px;
    color: #333;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 500;
}

.trainer-profile-meta {
    margin: 10px 0 0;
    color: var(--red);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
}

.trainer-profile-body {
    padding: 24px 30px 30px;
}

.trainer-profile-text p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
}

.trainer-profile-text p:last-child {
    margin-bottom: 0;
}

.trainer-profile-actions {
    margin-top: 20px;
}

.trainer-profile-back-button {
    min-width: 82px;
    text-align: center;
}

.trainer-profile-courses {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.trainer-profile-courses h2 {
    margin: 0 0 14px;
    color: var(--red);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

.trainer-course-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.trainer-course-list li {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    line-height: 1.55;
}

.trainer-course-title {
    display: block;
    font-weight: 600;
}

.trainer-course-meta {
    display: block;
    color: #555;
    font-size: 14px;
}

.team-card-profile-link {
    margin-top: 18px !important;
}

/* Nach Rückkehr vom Trainerprofil kann der vorher geklickte Link noch :focus behalten.
   Deshalb wird nur der eigentliche Button-Link zurückgesetzt, nicht der ganze Absatz.
   Echtes Mouseover und Tastaturfokus bleiben über die normalen .outline-Regeln sichtbar. */
.team-card-profile-link .outline:focus:not(:focus-visible) {
    background: #fff;
    color: var(--red);
}

@media (max-width: 880px) {

    .trainer-profile-header {
        display: block;
    }

    .trainer-profile-image-wrap {
        width: 100%;
        min-height: 0;
    }

    .trainer-profile-image {
        height: auto;
        max-height: none;
    }

    .trainer-profile-summary {
        padding: 22px 20px 24px;
    }

    .trainer-profile-name {
        font-size: 25px;
    }

    .trainer-profile-role {
        font-size: 15px;
    }

    .trainer-profile-body {
        padding: 20px 20px 24px;
    }
}


@media (min-width: 881px) and (max-width: 1120px) {
    .trainer-profile-header { display:block; }
    .trainer-profile-image-wrap { width:100%; max-width:420px; min-height:0; }
    .trainer-profile-image { width:100%; height:auto; max-height:520px; }
    .trainer-profile-summary { padding:22px 28px 24px; }
}

/* Allgemeine Sprungziele: etwas Abstand zum oberen Fensterrand lassen. */
main [id],
.team-card,
.course-card,
.course-group,
.seminar-anchor {
    scroll-margin-top: 80px;
}

button.trainer-profile-back-button {
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}

/* ============================================================
   Medienseite: TV-Mitschnitte und Videos
============================================================ */

.media-list {
    margin-top: 24px;
}

.media-card {
    margin: 0 0 28px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
}

.media-card-header {
    padding: 16px 20px 13px;
    background: var(--light-grey);
    border-bottom: 1px solid #ddd;
}

.media-card-title {
    margin-bottom: 7px;
}

.media-meta {
    margin: 0;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.media-card-body {
    padding: 18px 20px 20px;
}

.media-intro p {
    margin: 0 0 8px;
}

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

/* Kurzer Trenner nach redaktionellen Metainformationen in Fachartikeln.
   Die Linie bleibt bewusst schmal, damit sie nicht wie ein Abschnittsumbruch wirkt. */
.article-meta-note {
    margin-bottom: 6px;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.article-meta-divider {
    display: block;
    width: 82px;
    height: 1px;
    margin: 0 0 15px;
    border: 0;
    background: #d6d6d6;
}

/* Kompakte fette Einstiegsliste in Fachartikeln.
   Sie spart Breite neben rechts stehenden Autorenbildern, ohne die
   normalen Listen im weiteren Artikeltext zu verändern. */
.article-lead-list {
    margin: 8px 0 12px;
    padding-left: 0;
    list-style-position: inside;
    font-weight: 700;
}

.article-lead-list li {
    margin: 0 0 7px;
    line-height: 1.55;
}

.article-lead-list li:last-child {
    margin-bottom: 0;
}

.media-frame {
    position: relative;
    width: 100%;
    margin: 0 0 16px;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
}

.media-frame::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.media-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-actions {
    margin: 15px 0 0;
}

.media-actions a {
    margin-right: 8px;
    margin-bottom: 8px;
}

.media-note {
    margin: 0 0 14px;
    padding: 13px 15px;
    background: #fafafa;
    border-left: 3px solid var(--red);
    color: #555;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 880px) {
    .media-card-header,
    .media-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .media-card-title {
        font-size: 22px;
    }
}


/* ============================================================
   Wissensseite: Abbildungen und Literatur
============================================================ */

.knowledge-figure-card {
    margin: 26px 0 24px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.knowledge-figure-card img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.knowledge-figure-card figcaption {
    margin: 12px 0 0;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
}

.eye-pattern-figure img {
    max-width: 720px;
}

@media (max-width: 880px) {
    .knowledge-figure-card {
        margin-top: 20px;
        padding: 10px;
    }

    .knowledge-figure-card figcaption {
        font-size: 13px;
    }
}

/* Unaufdringlicher Literaturblock für Wissensseiten */
.reference-block {
    margin: 24px 0 9px;
    padding-top: 18px;
    border-top: 1px solid #ddd;
}

.reference-block h2 {
    margin: 0 0 12px;
    color: var(--red);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
}

.reference-list {
    margin: 0;
    padding-left: 22px;
}

.reference-list li {
    margin: 0 0 10px;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
}

.reference-list li:last-child {
    margin-bottom: 0;
}


/* ============================================================
   Anmeldung / Buchungsformular
============================================================ */

.booking-page .intro {
    margin-bottom: 22px;
}

/* Gemeinsamer Rahmen: Seminarkarte und Formular wirken wie ein zusammenhängender Schritt. */
.booking-panel {
    margin: 0 0 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.booking-panel-course {
    background: #fff;
}

/* Ausgewählte Anmeldung: dauerhaft geöffnete Seminarcard-Optik */
.booking-panel .booking-course-card.course-card {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.booking-course-card .course-card-header {
    cursor: default;
}

.booking-course-card .course-card-body {
    max-height: none !important;
    padding-bottom: 22px;
    opacity: 1 !important;
}

.booking-course-description p:first-child {
    margin-top: 0;
}

.booking-course-meta-label {
    margin: 0 0 4px;
    color: #555;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.booking-summary-note {
    margin: 16px 0 0 !important;
    color: #555;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.booking-form-card {
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 24px 24px;
}

.booking-form-card::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0 0 18px;
    background: #ddd;
}

.booking-form-card h2 {
    margin: 0 0 18px;
    color: var(--red);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
}

.booking-form {
    margin: 0;
}

.booking-form label {
    display: block;
    margin: 0 0 15px;
}

.booking-form label > span {
    display: block;
    margin: 0 0 5px;
    color: #333;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.booking-form em {
    color: var(--red);
    font-style: normal;
}

.booking-form input[type="text"],
.booking-form input[type="email"],
.booking-form input[type="tel"],
.booking-form select,
.booking-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 9px 10px;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    outline: 2px solid rgba(197, 35, 43, 0.22);
    border-color: var(--red);
}

.booking-form textarea {
    resize: vertical;
}

.booking-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.booking-form-grid label {
    margin-bottom: 15px;
}

.booking-form-grid-small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-checkbox {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin-top: 5px !important;
}

.booking-checkbox input {
    margin-top: 4px;
    flex: 0 0 auto;
}

.booking-checkbox span {
    margin: 0 !important;
    color: #333;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.booking-required {
    margin: 4px 0 14px !important;
    color: #777;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.booking-actions {
    margin: 0 !important;
}

.booking-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-alert {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid #ddd;
    background: #f8f8f8;
}

.booking-alert p {
    margin: 0 0 8px !important;
}

.booking-alert p:last-child {
    margin-bottom: 0 !important;
}

.booking-alert-error {
    border-left: 4px solid var(--red);
}

.booking-error-list {
    margin: 10px 0 0;
    padding-left: 22px;
}

.booking-error-list li {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.45;
}

.booking-error-list li:last-child {
    margin-bottom: 0;
}

.booking-inline-action {
    margin: 16px 0 0 !important;
}

.booking-history-link {
    min-width: 118px;
    text-align: center;
}

@media (max-width: 880px) {
    .booking-panel {
        margin-bottom: 20px;
    }

    .booking-form-card {
        padding: 0 20px 20px;
    }

    .booking-form-card::before {
        margin-bottom: 16px;
    }

    .booking-form-grid,
    .booking-form-grid-small {
        display: block;
    }

    .booking-form-card h2 {
        font-size: 20px;
    }
}

/* ============================================================
   Partnerseite: kleine Bild-Aufzählungen
   ------------------------------------------------------------
   Eine schmale Icon-Spalte steht neben dem Text. Der Fallback
   ist ein roter Punkt. Wenn ein Bild vorhanden ist und lädt,
   liegt es über dem Fallback. So gibt es keine kaputten Bilder
   und keinen zusätzlichen Punkt neben geladenen Bildern.
============================================================ */

.partner-link-list {
    margin: 0;
}

.partner-link-item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
    margin: 0 0 11px;
}

.partner-link-item:last-child {
    margin-bottom: 0;
}

.partner-link-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex: 0 0 18px;
    overflow: hidden;
}

/* Fallback für die aktuelle partner.php:
   Der Punkt ist vorhanden, wird aber von einem geladenen Bild überdeckt. */
.partner-link-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--red);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

/* Fallback für ältere/alternative Ausgabe:
   Wird nur sichtbar, wenn der Wrapper ausdrücklich als Fallback markiert ist. */
.partner-link-icon-wrap-fallback {
    background: none;
}

.partner-link-icon-wrap-fallback::after {
    content: "•";
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

/* Geladene Bilder liegen über jedem Fallback-Punkt. */
.partner-link-icon {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
    background: #fff;
}

.partner-link-main {
    min-width: 0;
}

.partner-link-title {
    display: flex;
    align-items: center;
    min-height: 18px;
    line-height: 1.25;
}

.partner-link-title a {
    font-weight: 500;
}

.partner-link-description {
    margin-top: 3px;
    line-height: 1.42;
}


/* ============================================================
   Wissensseiten: Bilder im Fließtext
   ------------------------------------------------------------
   Für Seiten wie Virginia Satir, Milton H. Erickson und NLP und
   Politik. Die Abbildung steht am Desktop rechts im Fließtext
   und wird mobil zentriert. Die Werte sind bewusst allgemein.
============================================================ */

.knowledge-inline-figure,
.virginia-satir-inline-figure {
    float: right;
    width: 320px;
    max-width: 48%;
    margin: 2px 0 14px 24px;
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.knowledge-inline-figure img,
.virginia-satir-inline-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.knowledge-inline-figure figcaption,
.virginia-satir-inline-figure figcaption {
    margin: 8px 0 0;
    color: #555;
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
}

/* Optionale Richtungs- und Größenklassen für mehrere frei platzierbare
   Fließtextbilder mit Caption, z.B. auf geschichte.php. */
.knowledge-inline-figure.figure-left {
    float: left;
    margin: 2px 24px 14px 0;
}

.knowledge-inline-figure.figure-small {
    width: 260px;
    max-width: 42%;
}

.knowledge-inline-figure.figure-wide {
    width: 380px;
    max-width: 54%;
}

.knowledge-inline-page .media-intro::after,
.knowledge-person-page .media-intro::after,
.virginia-satir-page .media-intro::after,
.milton-erickson-page .media-intro::after,
.nlp-politik-page .media-intro::after {
    content: "";
    display: block;
    clear: both;
}

.knowledge-inline-page .reference-block,
.knowledge-person-page .reference-block,
.virginia-satir-page .reference-block,
.milton-erickson-page .reference-block,
.nlp-politik-page .reference-block {
    clear: both;
}

@media (max-width: 880px) {
    .knowledge-inline-figure,
    .knowledge-inline-figure.figure-left,
    .knowledge-inline-figure.figure-small,
    .knowledge-inline-figure.figure-wide,
    .virginia-satir-inline-figure {
        float: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 18px;
    }
}



/* Systemische Ein-Sichten: Bullet-Liste im Artikel etwas lesbarer setzen.
   Die Regel ist bewusst eng auf diese Seite begrenzt, damit normale Listen
   im übrigen Wissensbereich unverändert bleiben. */
.systemische-einsichten-page .media-intro > ul {
    margin: 10px 0 15px;
    padding-left: 27px;
}

.systemische-einsichten-page .media-intro > ul > li {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.66;
    letter-spacing: 0.006em;
}

.systemische-einsichten-page .media-intro > ul > li:last-child {
    margin-bottom: 0;
}


/* ============================================================
   Lehrgangs-/Programmseiten aus lehrgaenge
   ------------------------------------------------------------
   Die Seiten bleiben SEO-spezifische PHP-Hüllen; Inhalte kommen
   aus der alten Sekretariatstabelle. Dieser Block sorgt für
   ruhigere Textabstände, aktive einfache HTML-Tags und einen
   Button im gleichen Stil wie bei einzelnen Seminarkarten.
============================================================ */

.program-page .program-intro {
    margin-bottom: 26px;
}

.program-richtext p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
}

.program-richtext p:last-child {
    margin-bottom: 0;
}

.program-richtext a {
    color: var(--red);
    font-weight: 500;
}

.program-richtext ul,
.program-richtext ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.program-richtext li {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.6;
}

.program-main-text {
    margin-bottom: 18px;
}

.program-field {
    margin: 0;
}

/* Kursorte:/Kosten: werden jetzt direkt in den ersten Absatz eingefügt.
   Dadurch entstehen keine eigenen Überschriftenabstände mehr. */
.program-field .program-richtext p {
    margin-bottom: 0;
}

.program-booking-cta {
    margin: 18px 0 2px;
    padding: 14px 16px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-left: 3px solid var(--red);
}

.program-booking-cta-text {
    margin: 0 0 10px !important;
    color: #333;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.program-booking-cta .booking-inline-action {
    margin: 0 !important;
}

.program-page .program-booking-button {
    margin-top: 0;
}

.program-courses {
    margin-top: 30px;
}

@media (max-width: 880px) {
    .program-courses {
        margin-top: 24px;
    }
}

/* ============================================================
   Navigation – lange Haupt- und Untermenüpunkte
   ------------------------------------------------------------
   Desktop-Hauptpunkte bleiben einzeilig; Untermenüpunkte dürfen
   sauber umbrechen und bekommen automatische Höhe.
============================================================ */

@media (min-width: 881px) {
    .nav-inner {
        flex-wrap: nowrap;
    }

    .nav .nav-item > a,
    .nav .nav-item-single > a {
        white-space: nowrap;
    }

    .nav .dropdown {
        min-width: 285px;
    }

    .nav .dropdown a {
        height: auto;
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
        line-height: 1.35;
        white-space: normal;
    }
}


/* ============================================================
   Wissensseite: NLP-Literaturliste
   ------------------------------------------------------------
   Kompakte Empfehlungsliste für eine kommerzielle NLP-Seite:
   vier Abschnitte, kurze Sprunglinks, klare Literaturkarten.
============================================================ */

.literature-page .literature-lead {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
}

.literature-crosslinks {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.literature-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
}

.literature-nav a {
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--red);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
}

.literature-nav a:hover,
.literature-nav a:focus {
    border-color: var(--red);
    background: #fff8f8;
}

.literature-section {
    margin: 28px 0 0;
}

.literature-section h2 {
    margin: 0 0 8px;
    color: var(--red);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
}

.literature-section h2::after {
    content: "";
    display: block;
    width: 46px;
    margin-top: 7px;
    border-bottom: 1px solid #ddd;
}

.literature-section-intro {
    margin: 0 0 12px;
    color: #333;
    font-size: 14px;
    line-height: 1.58;
}

.literature-list {
    display: grid;
    gap: 9px;
}

.literature-item,
.periodical-card {
    padding: 12px 14px 13px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.literature-title-row {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: flex-start;
}

.literature-title,
.periodical-title {
    margin: 0;
    color: var(--red);
    font-size: 17px;
    line-height: 1.28;
    font-weight: 500;
}

.periodical-title a {
    text-decoration: none;
}

.periodical-title a:hover,
.periodical-title a:focus {
    text-decoration: underline;
}

.literature-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    flex: 0 0 auto;
    max-width: 38%;
}

.literature-badge {
    display: inline-block;
    padding: 2px 5px;
    background: #eee;
    color: #555;
    font-size: 11px;
    line-height: 1.2;
}

.literature-authors {
    margin: 5px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600;
}

.literature-meta,
.literature-identifiers,
.literature-note,
.periodical-publisher,
.periodical-note {
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
}

.literature-meta,
.periodical-publisher {
    color: #555;
}

.periodical-publisher {
    font-weight: 600;
}

.literature-identifiers {
    color: #444;
}

.literature-separator {
    color: #bbb;
}

.literature-note,
.periodical-note {
    color: #333;
}

.periodical-grid {
    display: grid;
    gap: 9px;
}

@media (max-width: 880px) {

    .literature-section {
        margin-top: 24px;
    }

    .literature-section h2 {
        font-size: 20px;
    }

    .literature-title-row {
        display: block;
    }

    .literature-badges {
        justify-content: flex-start;
        max-width: none;
        margin-top: 7px;
    }

    .literature-nav a {
        font-size: 12px;
    }
}

/* ============================================================
   Rechtliche Informationsseiten: AGB, Impressum, Datenschutz
   ------------------------------------------------------------
   Schlichte Leseseiten ohne eigene visuelle Sonderwelt. Die
   Regeln ergänzen bestehende media-card-Optik nur um ruhigere
   Textabstände, klare Zwischenüberschriften und kompakte Listen.
============================================================ */

.legal-page .media-card-body {
    padding: 24px 26px 26px;
}

.legal-text h2 {
    margin: 22px 0 8px;
    color: var(--red);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
}

.legal-text h2:first-child {
    margin-top: 0;
}

.legal-text h3 {
    margin: 16px 0 7px;
    color: #333;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.legal-text p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
}

.legal-text p:last-child {
    margin-bottom: 0;
}

.legal-text ul,
.legal-text ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.legal-text li {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.6;
}

.legal-text address {
    margin: 0 0 14px;
    font-style: normal;
    font-size: 15px;
    line-height: 1.6;
}

.legal-side-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-side-list li {
    margin: 0 0 7px;
    font-size: 14px;
    line-height: 1.45;
}

.legal-side-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 880px) {
    .legal-page .media-card-body {
        padding: 20px 18px 22px;
    }
}

/* ============================================================
   Kontaktseite
============================================================ */

.contact-blocks {
    margin: 18px 0 0;
}

.contact-block {
    margin: 0 0 24px;
}

.contact-block h3 {
    margin: 0 0 7px;
}

.contact-block p {
    margin: 0 0 7px;
}

.contact-block .contact-action {
    margin-top: 12px;
    margin-bottom: 3px;
}

.contact-form-card {
    margin: 18px 0 26px;
    padding: 18px 20px 20px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-left: 3px solid var(--red);
    border-radius: 3px;
}

.contact-form-card h2 {
    margin: 0 0 8px;
    color: var(--red);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
}

.contact-form-lead {
    margin: 0 0 16px !important;
}

.contact-form {
    margin: 0;
}

.contact-form label {
    display: block;
    margin: 0 0 14px;
}

.contact-form label > span {
    display: block;
    margin: 0 0 5px;
    color: #333;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}

.contact-form em {
    color: var(--red);
    font-style: normal;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    background: #fff;
    color: #111;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 9px 10px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: 2px solid rgba(197, 35, 43, 0.22);
    border-color: var(--red);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.contact-form-grid label {
    margin-bottom: 14px;
}

.contact-form-checkbox {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    margin-top: 4px !important;
}

.contact-form-checkbox input {
    margin-top: 4px;
    flex: 0 0 auto;
}

.contact-form-checkbox span {
    margin: 0 !important;
    color: #333;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

.contact-form-required {
    margin: 4px 0 14px !important;
    color: #777;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.contact-form-actions {
    margin: 0 !important;
}

.contact-form-secondary-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-alert {
    margin: 0 0 16px;
    padding: 13px 15px;
    border: 1px solid #ddd;
    background: #fff;
}

.contact-alert p {
    margin: 0 0 8px !important;
}

.contact-alert p:last-child {
    margin-bottom: 0 !important;
}

.contact-alert ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

.contact-alert li {
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.45;
}

.contact-alert-error {
    border-left: 4px solid var(--red);
}

.contact-form-card-success {
    border-left-color: #ddd;
}

.contact-alert-success {
    border-left: 4px solid var(--red);
}

@media (max-width: 880px) {
    .contact-form-card {
        margin: 16px 0 24px;
        padding: 16px 17px 18px;
    }

    .contact-form-grid {
        display: block;
    }

    .contact-form-card h2 {
        font-size: 20px;
    }
}


/* ============================================================
   31. Anfahrt und Karten-Fallback
   ------------------------------------------------------------
   Die statische Karte bleibt lokal. Google Maps wird auf der
   Anfahrtsseite erst nach aktivem Klick geladen.
============================================================ */

.course-card-location-link,
.home-next-seminar-location-link,
.aside-next-seminar-location-link {
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid rgba(197, 35, 43, 0.35);
}

.route-map-shell {
    margin-bottom: 24px;
}

.route-map {
    margin: 15px 0 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: var(--light-grey);
}

.map-view-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid #ddd;
    background: #f7f7f7;
}

.map-view-button,
.map-route-button {
    font-family: inherit;
}

.map-view-button.is-active,
.map-view-button.is-active:hover,
.map-view-button.is-active:focus {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.route-map-canvas {
    background: var(--light-grey);
}

.route-map img {
    display: block;
    width: 100%;
    height: auto;
}

.route-map figcaption {
    padding: 10px 12px 9px;
    color: #666;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.route-map-placeholder {
    padding: 18px;
}

.route-map-placeholder p {
    margin: 0;
}

.route-map-placeholder code {
    font-size: 0.92em;
}

.google-map-frame {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
}

@media (max-width: 680px) {
    .map-view-actions {
        gap: 10px;
    }

    .google-map-frame {
        height: 300px;
    }
}