/* =====================================================================
   Race Day Shots – Ergänzungen zu main.css
   Wird NACH main.css geladen. main.css bleibt unangetastet.

   Gestalterische Linie, abgeleitet aus main.css:
   - Kanten sind scharf (border-radius: 0). Runde Ecken brechen den
     Charakter der Seite.
   - Gold ist Akzent, kein Flächenfarbton: Haarlinien, Ziffern, Labels.
   - Beschriftungen in Versalien mit weiter Laufweite.
   - Rot als Fläche, Schwarz als Tiefe, Weiß als Ruhe.
   ===================================================================== */

:root {
    --rds-rot:      #270F0F;
    --rds-rot-2:    #3D1818;
    --rds-gold:     #C9A961;
    --rds-gold-2:   #E0C880;
    --rds-schwarz:  #0A0A0A;
    --rds-text:     #1A1A1A;
    --rds-grau:     #666;
    --rds-grau-2:   #999;
    --rds-linie:    rgba(39, 15, 15, .12);
    --rds-linie-h:  rgba(255, 255, 255, .12);
}

.container.schmal { max-width: 820px; }

/* Fehlte in main.css – ohne das stehen alle Überschriften linksbündig,
   obwohl die Abschnitte auf Mitte gebaut sind. */
.section-header.center { text-align: center; }
.section-header.center .section-subtitle { margin-left: auto; margin-right: auto;
                                           max-width: 60ch; }
.section-dark .section-subtitle { color: rgba(255,255,255,.75); }

/* ---------------------------------------------------------------------
   BUTTONS
   .btn-outline aus main.css ist weiß – auf hellem Grund unsichtbar.
   Deshalb hier eine dunkle Variante und eine Regel für helle Abschnitte.
   --------------------------------------------------------------------- */

.btn-dunkel { background: transparent; color: var(--rds-rot); border-color: var(--rds-rot); }
.btn-dunkel:hover { background: var(--rds-rot); color: #fff; }

.section:not(.section-dark) .btn-outline,
.leer-hinweis .btn-outline { color: var(--rds-rot); border-color: var(--rds-rot); }
.section:not(.section-dark) .btn-outline:hover,
.leer-hinweis .btn-outline:hover { background: var(--rds-rot); color: #fff; }

.btn-gold-linie { background: transparent; color: var(--rds-gold); border-color: var(--rds-gold); }
.btn-gold-linie:hover { background: var(--rds-gold); color: var(--rds-rot); }

/* ---------------------------------------------------------------------
   NAVIGATION & BROTKRUMEN
   --------------------------------------------------------------------- */

.nav-link.aktiv { color: var(--rds-gold); }
.nav-link.aktiv::after { width: 100%; }

.brotkrumen {
    padding: 1.1rem 0;
    font-size: .78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rds-grau-2);
    border-bottom: 1px solid var(--rds-linie);
}
.brotkrumen a { color: var(--rds-gold); text-decoration: none; }
.brotkrumen a:hover { color: var(--rds-rot); }
.brotkrumen span { margin: 0 .5rem; }

/* ---------------------------------------------------------------------
   SEITENKOPF DER UNTERSEITEN

   In main.css hat .page-hero ein margin-top von 80px. Der Header ist
   aber position:fixed und damit aus dem Fluss – der Seitenkopf ist also
   das erste Element im Fluss. Sein oberer Aussenabstand faellt dadurch
   aus dem body heraus (Margin Collapsing), schiebt den body nach unten
   und darueber wird das weisse html-Element sichtbar.

   Deshalb: Abstand raus, stattdessen Innenabstand. Der Header liegt dann
   wie auf der Startseite ueber dem Bild.
   --------------------------------------------------------------------- */

/* Hier stand vorher eine Hintergrundregel für html. Die ist nicht nötig:
   Sobald der Aussenabstand weg ist, faellt nichts mehr aus dem body
   heraus und der weisse Streifen entsteht gar nicht erst. Mit der Regel
   hat html den Hintergrund des body ueberschrieben – dadurch wurden
   Flaechen dunkel, die hell sein sollen. */

.page-hero {
    margin-top: 0;
    padding-top: 90px;   /* Platz für den Header über dem Bild */
}
.page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(39,15,15,.75) 0%, rgba(10,10,10,.9) 100%);
}
.page-hero-content { position: relative; z-index: 2; text-align: center;
                     padding: 0 2rem; max-width: 900px; }
.page-hero-icon { display: block; font-size: 2.5rem; margin-bottom: 1rem; }
.page-hero-title {
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1rem;
}
.page-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 1px;
    color: rgba(255,255,255,.8);
    margin-bottom: 2rem;
}
.page-hero .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   PARTNERLOGOS
   --------------------------------------------------------------------- */

.logo-band { padding: 3rem 0; border-bottom: 1px solid var(--rds-linie); }

/*
 * Logos kommen in sehr unterschiedlichen Formaten – ein breites
 * Schriftzuglogo neben einem quadratischen Wappen. Nur die Hoehe zu
 * begrenzen reicht deshalb nicht: Das quadratische wirkt winzig, das
 * breite erschlaegt alles.
 *
 * Loesung: Jedes Logo bekommt eine gleich grosse Flaeche, und das Bild
 * passt sich darin ein (object-fit: contain). So sind alle optisch
 * gleich gewichtet, ohne dass ein Logo verzerrt wird.
 */
.logo-band-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2.5rem 3rem;
    align-items: center;
    justify-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.logo-band-bild {
    width: 100%;
    max-width: 150px;
    height: 70px;
    object-fit: contain;
    filter: grayscale(100%) drop-shadow(0 2px 4px rgba(0, 0, 0, .28));
    opacity: .6;
    transition: all var(--transition-base, .3s);
}
.logo-band-bild:hover {
    filter: grayscale(0%) drop-shadow(0 4px 10px rgba(0, 0, 0, .38));
    opacity: 1;
    transform: translateY(-2px);
}

/* Auf dunklem Grund traegt ein schwarzer Schatten nichts bei –
   dort hebt ein heller Schein die Logos ab. */
.section-dark .logo-band-bild,
.section-schwarz .logo-band-bild {
    filter: grayscale(100%) brightness(1.6) drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
    opacity: .7;
}
.section-dark .logo-band-bild:hover,
.section-schwarz .logo-band-bild:hover {
    filter: grayscale(0%) drop-shadow(0 4px 12px rgba(0, 0, 0, .6));
    opacity: 1;
}

@media (max-width: 700px) {
    .logo-band-reihe { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 2rem; }
    .logo-band-bild { height: 54px; max-width: 120px; }
}

/* Zelle statt Bild als Rasterelement: So sind verlinkte und
   unverlinkte Logos exakt gleich gross. */
.logo-band-zelle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
}
.logo-band-zelle a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

@media (max-width: 700px) {
    .logo-band-zelle { height: 54px; }
}


/* ---------------------------------------------------------------------
   PROBLEM / ZIELGRUPPEN
   --------------------------------------------------------------------- */

.problem-intro {
    max-width: 58ch;
    margin: 1.5rem auto 0;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.9;
    color: var(--rds-grau);
}
.problem-intro p:last-child { margin-bottom: 0; }

.zielgruppen-tabs { margin-top: 4rem; }

/* Hinweis ueber den Reitern – ohne ihn erkennt niemand, dass hier
   etwas zu waehlen ist */
.zielgruppen-hinweis {
    display: block;
    margin-bottom: 1.2rem;
    font-size: .78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    color: var(--rds-gold);
}

.zielgruppen-knoepfe {
    display: flex;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}

/* Bewusst als Kasten mit Rahmen: eine reine Textzeile mit Unterstrich
   liest sich wie eine Ueberschrift, nicht wie etwas zum Anklicken. */
.zielgruppe-knopf {
    position: relative;
    padding: .9rem 2rem;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rds-rot);
    background: transparent;
    border: 1px solid rgba(39,15,15,.25);
    cursor: pointer;
    transition: all var(--transition-base, .3s);
}
.zielgruppe-knopf:hover {
    color: var(--rds-gold);
    border-color: var(--rds-gold);
    transform: translateY(-2px);
}
.zielgruppe-knopf.aktiv {
    color: var(--rds-rot);
    background: var(--rds-gold);
    border-color: var(--rds-gold);
}
/* Kleiner Zeiger nach unten am aktiven Reiter – zeigt, wohin er gehoert */
.zielgruppe-knopf.aktiv::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -8px;
    width: 14px; height: 14px;
    background: var(--rds-gold);
    transform: translateX(-50%) rotate(45deg);
}

/*
 * Ohne JavaScript stehen alle Zielgruppen untereinander. Erst wenn das
 * Skript die Reiter uebernommen hat, setzt es .js-reiter – dann wird
 * umgeschaltet. So geht kein Inhalt verloren, falls das Skript nicht
 * laedt: schlimmstenfalls steht mehr da, nie weniger.
 */
.zielgruppe-inhalt { max-width: 760px; margin: 0 auto 3rem; }

.js-reiter .zielgruppe-inhalt { display: none; margin-bottom: 0; }
.js-reiter .zielgruppe-inhalt.aktiv { display: block; animation: rds-auf .4s ease; }
@keyframes rds-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.zielgruppe-einleitung {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    line-height: 1.5;
    color: var(--rds-rot);
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Schmerzpunkte: karierte Marke statt Aufzählungspunkt –
   es sind Feststellungen, keine Vorteile. */
.schmerzpunkte { list-style: none; padding: 0; margin: 0 0 3rem; }
.schmerzpunkte li {
    position: relative;
    padding: 1rem 0 1rem 2.4rem;
    line-height: 1.7;
    color: var(--rds-text);
    border-bottom: 1px solid var(--rds-linie);
}
.schmerzpunkte li:first-child { border-top: 1px solid var(--rds-linie); }
.schmerzpunkte li::before {
    content: '';
    position: absolute;
    left: .4rem; top: 1.5rem;
    width: 10px; height: 10px;
    background-image:
        linear-gradient(45deg, var(--rds-gold) 25%, transparent 25%, transparent 75%, var(--rds-gold) 75%),
        linear-gradient(45deg, var(--rds-gold) 25%, transparent 25%, transparent 75%, var(--rds-gold) 75%);
    background-size: 5px 5px;
    background-position: 0 0, 2.5px 2.5px;
}
.section-dark .schmerzpunkte li { color: rgba(255,255,255,.85); border-color: var(--rds-linie-h); }
.section-dark .schmerzpunkte li:first-child { border-top-color: var(--rds-linie-h); }

/*
 * Der Gedanke ist der emotionale Kern des Abschnitts – der Satz, in dem
 * sich jemand wiedererkennen soll. Deshalb bekommt er Gewicht: grosses
 * Anfuehrungszeichen als Marke, goldene Kante links, deutlich mehr Luft.
 * Ein grauer Kasten wirkt daneben wie eine Randnotiz.
 */
.gedanke {
    position: relative;
    max-width: 56ch;
    margin: 0 auto 3rem;
    padding: 2.5rem 2.5rem 2.5rem 4.5rem;
    font-size: clamp(1.2rem, 2.2vw, 1.65rem);
    line-height: 1.5;
    color: var(--rds-rot);
    background: linear-gradient(135deg, rgba(201,169,97,.16), rgba(201,169,97,.04));
    border-left: 4px solid var(--rds-gold);
}
.gedanke::before {
    content: '\201E';
    position: absolute;
    left: 1.2rem;
    top: 1.4rem;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--rds-gold);
    opacity: .55;
}
.gedanke::after { content: ''; }

.section-dark .gedanke,
.section-schwarz .gedanke {
    color: #fff;
    background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}

.zielgruppe-inhalt > .btn { display: flex; margin: 0 auto; max-width: 420px; }

.zielgruppen-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                       gap: 3rem; margin-top: 3.5rem; }
.zielgruppen-spalte h3 {
    margin-bottom: 1.2rem; padding-bottom: .8rem;
    font-size: 1.05rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold); border-bottom: 1px solid var(--rds-linie-h);
}
.zielgruppen-spalte .schmerzpunkte { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   LEISTUNGEN
   --------------------------------------------------------------------- */

/* Haarfuge statt Abstand: das Raster wirkt gebaut statt zusammengewürfelt */
.leistungs-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2px;
    margin-top: 3.5rem;
    background: var(--rds-linie-h);
}
.section:not(.section-dark) .leistungs-gitter { background: var(--rds-linie); }

.leistungs-karte { background: var(--rds-rot); transition: background var(--transition-base, .3s); }
.section:not(.section-dark) .leistungs-karte { background: #fff; }
.leistungs-karte:hover { background: var(--rds-rot-2); }
.section:not(.section-dark) .leistungs-karte:hover { background: var(--off-white, #F8F8F8); }

.leistungs-bild { aspect-ratio: 3/2; overflow: hidden; }
.leistungs-bild img { width: 100%; height: 100%; object-fit: cover; display: block;
                      filter: saturate(.9); transition: transform .7s ease, filter .4s; }
.leistungs-karte:hover .leistungs-bild img { transform: scale(1.05); filter: none; }

.leistungs-text { padding: 2.2rem; }
.leistungs-icon { display: block; font-size: 1.8rem; margin-bottom: 1rem; }
.leistungs-text h3 { margin-bottom: 1rem; font-size: 1.35rem; letter-spacing: 1.5px;
                     text-transform: uppercase; line-height: 1.2; }
.leistungs-text p { margin-bottom: 1.5rem; line-height: 1.8; opacity: .85; }

.leistungs-link {
    display: inline-flex; align-items: center; gap: .6rem;
    padding-bottom: .3rem;
    font-size: .8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold); text-decoration: none;
    border-bottom: 1px solid rgba(201,169,97,.4);
}
.leistungs-link::after { content: '→'; transition: transform var(--transition-fast, .2s); }
.leistungs-link:hover { border-bottom-color: var(--rds-gold); }
.leistungs-link:hover::after { transform: translateX(5px); }

.business-hinweis {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2.5rem; flex-wrap: wrap;
    margin-top: 3.5rem; padding: 2.5rem;
    border: 1px solid rgba(201,169,97,.3);
}
.business-hinweis h3 { margin-bottom: .6rem; letter-spacing: 2px; text-transform: uppercase;
                       color: var(--rds-gold); font-size: 1.15rem; }
.business-hinweis p { margin: 0; max-width: 58ch; opacity: .85; }

/* ---------------------------------------------------------------------
   ABLAUF
   --------------------------------------------------------------------- */

.ablauf-schritte { list-style: none; padding: 0; margin: 3.5rem auto 0; max-width: 780px; }
.ablauf-schritte li { display: flex; gap: 2rem; padding: 2rem 0;
                      border-bottom: 1px solid var(--rds-linie); }
.ablauf-schritte li:first-child { border-top: 1px solid var(--rds-linie); }
.section-dark .ablauf-schritte li { border-color: var(--rds-linie-h); }
.ablauf-nummer { flex: none; min-width: 3rem; font-size: 2.4rem; line-height: 1;
                 letter-spacing: 1px; color: rgba(201,169,97,.5); }
.ablauf-schritte h3 { margin-bottom: .5rem; font-size: 1.15rem; letter-spacing: 1.5px;
                      text-transform: uppercase; }
.ablauf-schritte p { margin: 0; line-height: 1.8; opacity: .85; }

/* ---------------------------------------------------------------------
   USP
   --------------------------------------------------------------------- */

.usp-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
              gap: 2.5rem; margin-top: 3.5rem; }
.usp-karte { padding-top: 1.5rem; border-top: 2px solid var(--rds-gold); }
.usp-icon { display: block; font-size: 1.6rem; margin-bottom: .8rem; }
.usp-karte h3 { margin-bottom: .7rem; font-size: 1.05rem; letter-spacing: 1.5px;
                text-transform: uppercase; }
.usp-karte p { margin: 0; line-height: 1.8; opacity: .85; }

/* ---------------------------------------------------------------------
   REFERENZEN
   --------------------------------------------------------------------- */

.referenz-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
                   gap: 2.5rem; margin-top: 3.5rem; }
.referenz { margin: 0; padding: 2.2rem; border: 1px solid var(--rds-linie-h); }
.section:not(.section-dark) .referenz { border-color: var(--rds-linie); }
.referenz blockquote { margin: 0 0 1.8rem; padding: 0; border: none;
                       font-size: 1.05rem; line-height: 1.85; opacity: .9; }
.referenz blockquote::before { content: '„'; }
.referenz blockquote::after  { content: '“'; }
.referenz figcaption { display: flex; align-items: center; gap: 1rem;
                       padding-top: 1.2rem; border-top: 1px solid var(--rds-linie-h); }
.section:not(.section-dark) .referenz figcaption { border-top-color: var(--rds-linie); }
/* Das Porträt war mit 46px kaum mehr als ein Punkt – bei einer
   Kundenstimme ist das Gesicht aber der halbe Beleg. */
.referenz-bild {
    width: 84px;
    height: 84px;
    object-fit: cover;
    flex: none;
    border: 1px solid rgba(201,169,97,.35);
}
.referenz figcaption { gap: 1.3rem; }

@media (max-width: 600px) {
    .referenz-bild { width: 64px; height: 64px; }
}
.referenz figcaption strong { display: block; font-size: .95rem; letter-spacing: 1px; }
.referenz figcaption em { display: block; font-style: normal; font-size: .75rem;
                          letter-spacing: 2px; text-transform: uppercase; color: var(--rds-gold); }

/* ---------------------------------------------------------------------
   PORTFOLIO-GALERIE
   In main.css nicht vorhanden – hier vollständig definiert.
   --------------------------------------------------------------------- */

.emotion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 240px;
    gap: 2px;
    margin-top: 3.5rem;
}
.emotion-item { position: relative; overflow: hidden; background: var(--rds-schwarz);
                cursor: zoom-in; }

/* Hochformat belegt zwei Reihen, Highlights zwei Spalten.
   Dadurch entsteht ein Rhythmus statt einer gleichförmigen Kachelwand. */
.emotion-item.portrait { grid-row: span 2; }
.emotion-item.emotion-highlight { grid-column: span 2; grid-row: span 2; }

.emotion-image { width: 100%; height: 100%; }
.emotion-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(.92);
    transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .4s;
}
.emotion-item:hover img { transform: scale(1.06); filter: none; }

.emotion-item::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(transparent 55%, rgba(10,10,10,.55));
    opacity: 0;
    transition: opacity var(--transition-base, .3s);
    pointer-events: none;
}
.emotion-item:hover::after { opacity: 1; }

.emotion-titel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1.5rem 1.2rem 1.1rem;
    font-size: .8rem; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
    opacity: 0; transform: translateY(8px);
    transition: all var(--transition-base, .3s);
}
.emotion-item:hover .emotion-titel { opacity: 1; transform: none; }

.highlight-badge {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    padding: .3rem .8rem;
    font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-rot); background: var(--rds-gold);
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: center; justify-content: center;
    padding: 3rem;
    background: rgba(10,10,10,.96);
}
.lightbox.active { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-close {
    position: absolute; top: 1.5rem; right: 2rem;
    width: 48px; height: 48px;
    font-size: 2rem; line-height: 1;
    color: #fff; background: none; border: 1px solid rgba(255,255,255,.25);
    cursor: pointer;
}
.lightbox-close:hover { border-color: var(--rds-gold); color: var(--rds-gold); }

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */

.faq-eintrag { border-bottom: 1px solid var(--rds-linie-h); }
.section:not(.section-dark) .faq-eintrag { border-bottom-color: var(--rds-linie); }
.faq-eintrag:first-of-type { border-top: 1px solid var(--rds-linie-h); }
.section:not(.section-dark) .faq-eintrag:first-of-type { border-top-color: var(--rds-linie); }

.faq-eintrag summary {
    position: relative;
    padding: 1.5rem 3rem 1.5rem 0;
    font-size: 1.05rem; letter-spacing: .5px;
    cursor: pointer; list-style: none;
}

/*
 * Eine im Editor gewaehlte Groesse muss gewinnen. Ohne diese Regel
 * ueberstimmt ".faq-eintrag summary" jede t-Klasse, weil zwei
 * Selektoren spezifischer sind als einer – die Auswahl im Panel hatte
 * dann sichtbar keine Wirkung.
 */
.faq-eintrag summary.t-s   { font-size: clamp(.86rem, 1.3vw, .95rem); }
.faq-eintrag summary.t-m   { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.faq-eintrag summary.t-l   { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.faq-eintrag summary.t-xl  { font-size: clamp(1.6rem, 3.6vw, 2.6rem); }
.faq-eintrag summary.t-xxl { font-size: clamp(2.1rem, 6vw, 4.2rem); }

/* Dasselbe Problem an allen anderen Stellen mit fester Groesse */
.leistungs-karte h3[class*="t-"],
.usp-karte h3[class*="t-"],
.blog-karte h3[class*="t-"],
.kurs-modul h3[class*="t-"],
.kurs-ergebnis h3[class*="t-"],
.referenz blockquote[class*="t-"],
.section-title[class*="t-"],
.section-subtitle[class*="t-"] { font-size: inherit; }

.leistungs-karte h3.t-s,   .usp-karte h3.t-s,   .blog-karte h3.t-s,
.kurs-modul h3.t-s,        .kurs-ergebnis h3.t-s,
.section-title.t-s,        .section-subtitle.t-s   { font-size: clamp(.86rem, 1.3vw, .95rem) !important; }
.leistungs-karte h3.t-m,   .usp-karte h3.t-m,   .blog-karte h3.t-m,
.kurs-modul h3.t-m,        .kurs-ergebnis h3.t-m,
.section-title.t-m,        .section-subtitle.t-m   { font-size: clamp(1rem, 1.6vw, 1.15rem) !important; }
.leistungs-karte h3.t-l,   .usp-karte h3.t-l,   .blog-karte h3.t-l,
.kurs-modul h3.t-l,        .kurs-ergebnis h3.t-l,
.section-title.t-l,        .section-subtitle.t-l   { font-size: clamp(1.15rem, 2.2vw, 1.5rem) !important; }
.leistungs-karte h3.t-xl,  .usp-karte h3.t-xl,  .blog-karte h3.t-xl,
.kurs-modul h3.t-xl,       .kurs-ergebnis h3.t-xl,
.section-title.t-xl,       .section-subtitle.t-xl  { font-size: clamp(1.6rem, 3.6vw, 2.6rem) !important; }
.leistungs-karte h3.t-xxl, .usp-karte h3.t-xxl, .blog-karte h3.t-xxl,
.kurs-modul h3.t-xxl,      .kurs-ergebnis h3.t-xxl,
.section-title.t-xxl,      .section-subtitle.t-xxl { font-size: clamp(2.1rem, 6vw, 4.2rem) !important; }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
    content: ''; position: absolute; right: .5rem; top: 50%;
    width: 12px; height: 2px; background: var(--rds-gold); transform: translateY(-50%);
}
.faq-eintrag summary::before {
    content: ''; position: absolute; right: 1rem; top: 50%;
    width: 2px; height: 12px; background: var(--rds-gold); transform: translateY(-50%);
    transition: opacity var(--transition-fast, .2s);
}
.faq-eintrag[open] summary::before { opacity: 0; }
.faq-eintrag > div { padding: 0 3rem 1.8rem 0; line-height: 1.85; opacity: .85; }
.faq-eintrag > div p:last-child { margin-bottom: 0; }

/* =====================================================================
   RENNKALENDER
   Aufgebaut wie ein Zeitplan an der Boxenmauer: durchgehende Liste,
   Datumsblock links, Verfügbarkeit rechts, Haarlinien dazwischen.
   ===================================================================== */

.termin-liste { margin-top: 3.5rem; border-top: 1px solid var(--rds-linie); }

.termin {
    display: grid;
    grid-template-columns: 92px 1fr 220px;
    gap: 2rem;
    align-items: center;
    padding: 1.8rem 1.5rem 1.8rem 0;
    border-bottom: 1px solid var(--rds-linie);
    border-left: 3px solid transparent;
    transition: all var(--transition-base, .3s);
}
.termin:hover { border-left-color: var(--rds-gold); background: var(--off-white, #F8F8F8);
                padding-left: 1.5rem; }
.termin-booked { opacity: .55; }

.termin-datum { text-align: center; padding: .9rem .5rem;
                background: var(--rds-rot); color: #fff; }
.termin-limited .termin-datum { background: var(--rds-rot-2); }
.termin-booked  .termin-datum { background: #4A4A4A; }
.termin-tag   { display: block; font-size: 2.1rem; line-height: 1; letter-spacing: 1px; }
.termin-monat { display: block; font-size: .75rem; letter-spacing: 3px; margin-top: .3rem;
                color: var(--rds-gold); }
.termin-jahr  { display: block; font-size: .68rem; letter-spacing: 2px; opacity: .5;
                margin-top: .15rem; }

.termin-serie {
    display: inline-block; margin-bottom: .5rem; padding: .2rem .7rem;
    font-size: .65rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold); border: 1px solid rgba(201,169,97,.45);
}
.termin-inhalt h3 { margin: 0 0 .4rem; font-size: 1.3rem; letter-spacing: 1px;
                    text-transform: uppercase; line-height: 1.2; }
.termin-inhalt h3 a { color: inherit; text-decoration: none; }
.termin-inhalt h3 a:hover { color: var(--rds-gold); }
.termin-info   { margin: 0 0 .3rem; color: var(--rds-grau); font-size: .92rem;
                 letter-spacing: .5px; }
.termin-zusatz { margin: 0; color: var(--rds-grau-2); font-size: .85rem; }
.termin-links  { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .7rem; }
.termin-links a {
    font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold); text-decoration: none;
    border-bottom: 1px solid rgba(201,169,97,.35); padding-bottom: 2px;
}
.termin-links a:hover { border-bottom-color: var(--rds-gold); }

.termin-status { text-align: right; }
.verfuegbarkeit {
    display: inline-block; margin-bottom: .5rem; padding: .3rem .9rem;
    font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-rot); background: var(--rds-gold);
}
.termin-limited .verfuegbarkeit { background: transparent; color: var(--rds-gold);
                                  border: 1px solid var(--rds-gold); }
.termin-booked  .verfuegbarkeit { background: transparent; color: var(--rds-grau);
                                  border: 1px solid var(--rds-linie); }
.termin-status p { margin: 0 0 .7rem; font-size: .8rem; line-height: 1.5;
                   color: var(--rds-grau-2); }
.termin-countdown { display: block; margin-bottom: .9rem; font-size: .7rem;
                    letter-spacing: 2px; text-transform: uppercase; color: var(--rds-grau-2); }
.termin-status .btn { padding: .7rem 1.6rem; font-size: .75rem; }

.termin-rueckblick { list-style: none; padding: 0; margin: 3rem 0 0;
                     columns: 2; column-gap: 3.5rem; }
.termin-rueckblick li { padding: .9rem 0; border-bottom: 1px solid var(--rds-linie-h);
                        break-inside: avoid; font-size: .95rem; }
.termin-rueckblick li a { color: #fff; text-decoration: none; }
.termin-rueckblick li a:hover { color: var(--rds-gold); }
.termin-rueckblick span { display: inline-block; min-width: 100px;
                          font-size: .78rem; letter-spacing: 1.5px; color: var(--rds-gold); }
.termin-rueckblick em { display: block; margin-left: 100px; font-style: normal;
                        font-size: .78rem; letter-spacing: 1px; opacity: .45; }

.leer-hinweis { text-align: center; padding: 5rem 1.5rem; border: 1px solid var(--rds-linie); }
.leer-hinweis h2 { margin-bottom: 1rem; letter-spacing: 2px; text-transform: uppercase; }
.leer-hinweis p  { margin-bottom: 2rem; color: var(--rds-grau); }

/* =====================================================================
   KONTAKTFORMULAR
   Dunkle Fläche für das Formular, damit der eigentliche Zweck der Seite
   sofort erkennbar ist. Eingaben ohne Kästen, nur mit Grundlinie.
   ===================================================================== */

.kontakt-gitter { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem;
                  align-items: start; }

.kontakt-formular { padding: 3rem; background: var(--rds-rot); color: #fff; }

.anfrage-form .form-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-feld { margin-bottom: 1.6rem; }
.form-feld label {
    display: block; margin-bottom: .6rem;
    font-size: .72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold);
}
.form-feld input,
.form-feld select,
.form-feld textarea {
    width: 100%;
    padding: .9rem 0;
    font-family: inherit;
    font-size: 1rem;
    letter-spacing: .5px;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.25);
    border-radius: 0;
    transition: border-color var(--transition-base, .3s);
}
.form-feld select option { color: var(--rds-text); background: #fff; }
.form-feld input::placeholder,
.form-feld textarea::placeholder { color: rgba(255,255,255,.35); }
.form-feld input:focus,
.form-feld select:focus,
.form-feld textarea:focus { outline: none; border-bottom-color: var(--rds-gold); }
.form-feld textarea { resize: vertical; line-height: 1.8; min-height: 130px; }

.einwilligung { margin-top: 2rem; }
.einwilligung label {
    display: flex; gap: .9rem; align-items: flex-start;
    font-size: .88rem; letter-spacing: 0; text-transform: none; font-weight: 400;
    color: rgba(255,255,255,.75); cursor: pointer;
}
.einwilligung input { width: auto; margin-top: .3rem; flex: none; accent-color: var(--rds-gold); }
.einwilligung a { color: var(--rds-gold); }

.anfrage-form .btn { margin-top: 2rem; }
.anfrage-form .btn-primary { background: var(--rds-gold); color: var(--rds-rot);
                             border-color: var(--rds-gold); }
.anfrage-form .btn-primary:hover { background: var(--rds-gold-2); border-color: var(--rds-gold-2); }
.form-hinweis { margin-top: 1.2rem; font-size: .78rem; line-height: 1.6;
                color: rgba(255,255,255,.45); }

/* Honigtopf: für Menschen unsichtbar, für Bots verlockend.
   Bewusst kein display:none – das erkennen manche Bots. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kontakt-info h2 { font-size: 1.4rem; letter-spacing: 2px; text-transform: uppercase;
                   margin-bottom: 1.5rem; }
.kontakt-liste { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.kontakt-liste li { padding: 1.1rem 0; border-bottom: 1px solid var(--rds-linie); }
.kontakt-liste li:first-child { border-top: 1px solid var(--rds-linie); }
.kontakt-liste strong { display: block; margin-bottom: .3rem;
                        font-size: .7rem; letter-spacing: 2px; text-transform: uppercase;
                        color: var(--rds-gold); }
.kontakt-liste a { color: var(--rds-text); text-decoration: none;
                   border-bottom: 1px solid var(--rds-linie); }
.kontakt-liste a:hover { color: var(--rds-gold); border-bottom-color: var(--rds-gold); }

.hinweis-kasten { padding: 2rem; border-left: 3px solid var(--rds-gold);
                  background: rgba(201,169,97,.08); }
.hinweis-kasten h2, .hinweis-kasten h3 { margin-top: 0; margin-bottom: .8rem;
                                         letter-spacing: 1.5px; text-transform: uppercase;
                                         font-size: 1.1rem; }
.hinweis-kasten p:last-child { margin-bottom: 0; }
.hinweis-kasten.erfolg { background: rgba(76,175,125,.1); border-left-color: #4CAF7D; }
.hinweis-kasten.fehler { background: rgba(224,90,78,.1);  border-left-color: #E05A4E; }
.kontakt-formular .hinweis-kasten { background: rgba(255,255,255,.06); }
.kontakt-formular .hinweis-kasten a { color: var(--rds-gold); }

/* =====================================================================
   ÜBER MICH
   ===================================================================== */

.zeitstrahl { position: relative; max-width: 860px; margin: 0 auto; padding-left: 3rem; }
.zeitstrahl::before {
    content: ''; position: absolute; left: 7px; top: .6rem; bottom: .6rem;
    width: 1px; background: linear-gradient(rgba(201,169,97,.7), rgba(201,169,97,.05));
}
.zeitstrahl-punkt { position: relative; padding-bottom: 3.5rem; }
.zeitstrahl-punkt::before {
    content: ''; position: absolute; left: -3rem; top: .5rem;
    width: 15px; height: 15px; background: var(--rds-gold); transform: rotate(45deg);
}
.zeitstrahl-jahr { display: block; margin-bottom: .6rem; font-size: .78rem;
                   letter-spacing: 3px; text-transform: uppercase; color: var(--rds-gold); }
.zeitstrahl-inhalt h3 { margin-bottom: .8rem; font-size: 1.3rem; letter-spacing: 1.5px;
                        text-transform: uppercase; }
.zeitstrahl-inhalt p { line-height: 1.85; opacity: .85; }
.zeitstrahl-bild { margin-top: 1.5rem; max-width: 480px; overflow: hidden; }
.zeitstrahl-bild img { width: 100%; height: auto; display: block; }


.gross-zitat { margin: 0; padding: 0; border: none;
               font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.35; letter-spacing: 1px;
               color: var(--rds-rot); }
.gross-zitat::before { content: '„'; }
.gross-zitat::after  { content: '“'; }
.zitat-quelle { margin-top: 1.5rem; font-size: .78rem; letter-spacing: 3px;
                text-transform: uppercase; color: var(--rds-gold); }

/* =====================================================================
   BLOG
   ===================================================================== */

.kategorie-filter { display: flex; justify-content: center; flex-wrap: wrap;
                    margin-bottom: 3.5rem; border-bottom: 1px solid var(--rds-linie); }
.kategorie-knopf {
    padding: .9rem 1.6rem;
    font-size: .78rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-grau); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: all var(--transition-base, .3s);
}
.kategorie-knopf:hover { color: var(--rds-rot); }
.kategorie-knopf.aktiv { color: var(--rds-rot); border-bottom-color: var(--rds-gold); }

.blog-featured { margin-bottom: 4rem; }
.blog-featured a { display: grid; grid-template-columns: 1.25fr 1fr;
                   text-decoration: none; color: inherit; }
.blog-featured-bild { aspect-ratio: 16/10; overflow: hidden; background: var(--rds-schwarz); }
.blog-featured-bild img { width: 100%; height: 100%; object-fit: cover; display: block;
                          transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.blog-featured:hover .blog-featured-bild img { transform: scale(1.04); }
.blog-featured-text { padding: 3rem; background: var(--rds-rot); color: #fff;
                      display: flex; flex-direction: column; justify-content: center; }
.blog-featured-text h2 { margin: .8rem 0 1.2rem; font-size: clamp(1.4rem, 2.6vw, 2.1rem);
                         line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; }
.blog-featured-text p { margin-bottom: 1.8rem; line-height: 1.85; color: rgba(255,255,255,.75); }

.blog-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: 2px; margin-top: 3.5rem; background: var(--rds-linie); }
.section-dark .blog-gitter { background: var(--rds-linie-h); }
.blog-karte { background: #fff; transition: background var(--transition-base, .3s); }
.section-dark .blog-karte { background: var(--rds-rot); }
.blog-karte:hover { background: var(--off-white, #F8F8F8); }
.section-dark .blog-karte:hover { background: var(--rds-rot-2); }
.blog-karte a { display: block; text-decoration: none; color: inherit; }
.blog-karte-bild { aspect-ratio: 16/10; overflow: hidden; background: var(--rds-schwarz); }
.blog-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block;
                       transition: transform .7s ease; }
.blog-karte:hover .blog-karte-bild img { transform: scale(1.05); }
.blog-karte-text { padding: 1.8rem; }
.blog-karte-meta { display: block; margin-bottom: .7rem; font-size: .7rem;
                   letter-spacing: 2px; text-transform: uppercase; color: var(--rds-gold); }
.blog-karte-text h3 { margin-bottom: .7rem; font-size: 1.2rem; line-height: 1.25;
                      letter-spacing: 1px; text-transform: uppercase; }
.blog-karte-text p { margin: 0; font-size: .92rem; line-height: 1.75; opacity: .75; }

.blaettern-frontend { display: flex; align-items: center; justify-content: center;
                      gap: 2rem; margin-top: 4rem;
                      font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
                      color: var(--rds-grau-2); }

/* --- Einzelbeitrag ---------------------------------------------------- */

.beitrag-hero { position: relative; height: clamp(420px, 68vh, 760px); overflow: hidden;
                margin-top: 0; }
.beitrag-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beitrag-hero-overlay { position: absolute; inset: 0;
                        background: linear-gradient(transparent 50%, rgba(10,10,10,.45)); }


@media (max-width: 700px) {
    .beitrag-hero { height: clamp(340px, 55vh, 520px); }
}

/* Beitrag ohne Titelbild: der Inhalt braucht denselben Abstand,
   den sonst das Bild schafft. */
.beitrag > .container:first-child { padding-top: 110px; }
.beitrag-hero + .container { padding-top: 0; }

.beitrag-kopf { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--rds-linie);
                margin-bottom: 3rem; }
.beitrag-badge { display: inline-block; margin-bottom: 1.2rem; padding: .35rem 1rem;
                 font-size: .68rem; letter-spacing: 3px; text-transform: uppercase;
                 color: var(--rds-gold); border: 1px solid rgba(201,169,97,.45); }
.beitrag-titel { font-size: clamp(1.9rem, 4.5vw, 3.2rem); line-height: 1.1;
                 letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.5rem; }
.beitrag-meta { display: flex; gap: 1.5rem; flex-wrap: wrap;
                font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
                color: var(--rds-grau-2); }
.beitrag-meta a { color: var(--rds-gold); text-decoration: none; }

.beitrag-inhalt { font-size: 1.08rem; line-height: 1.95; color: var(--rds-text); }
.beitrag-inhalt p { margin-bottom: 1.6rem; }
.beitrag-inhalt h2 { margin: 3.5rem 0 1.4rem; font-size: clamp(1.4rem, 2.8vw, 2rem);
                     line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase;
                     color: var(--rds-rot); }
.beitrag-bild { margin: 3rem 0; }
.beitrag-bild img { width: 100%; height: auto; display: block; }
.beitrag-bild figcaption { margin-top: .9rem; font-size: .78rem; letter-spacing: 1.5px;
                           text-transform: uppercase; color: var(--rds-grau-2);
                           text-align: center; }
.beitrag-zitat { margin: 3rem 0; padding: 2rem 2.5rem;
                 font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.55;
                 color: var(--rds-rot); background: rgba(201,169,97,.09);
                 border-left: 3px solid var(--rds-gold); }
.beitrag-zitat::before { content: '„'; }
.beitrag-zitat::after  { content: '“'; }
.beitrag-cta { margin: 3rem 0; text-align: center; }
.beitrag-video { position: relative; margin: 3rem 0; padding-bottom: 56.25%; overflow: hidden; }
.beitrag-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.beitrag-trenner { margin: 3.5rem auto; width: 80px; border: none;
                   border-top: 2px solid var(--rds-gold); }
.beitrag-galerie { margin-top: 4rem; }

.beitrag-teilen { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap;
                  padding: 2.5rem 0 4rem; border-top: 1px solid var(--rds-linie); }
.beitrag-teilen span { font-size: .7rem; letter-spacing: 3px; text-transform: uppercase;
                       color: var(--rds-grau-2); }
.beitrag-teilen a { font-size: .78rem; letter-spacing: 2px; text-transform: uppercase;
                    color: var(--rds-rot); text-decoration: none;
                    border-bottom: 1px solid rgba(201,169,97,.5); padding-bottom: 2px; }
.beitrag-teilen a:hover { color: var(--rds-gold); border-bottom-color: var(--rds-gold); }

/* --- Rechtstexte ------------------------------------------------------ */
.rechtstext { line-height: 1.95; }
.rechtstext p { margin-bottom: 1.4rem; }
/* Rechtstexte uebernehmen die im Editor gewaehlte Farbe. Fett darf die
   Farbe nicht pauschal auf Dunkelrot ueberschreiben. Alte <b>-Inhalte und
   semantische <strong>-Inhalte verhalten sich dadurch identisch. */
.rechtstext strong, .rechtstext b { color: inherit; font-weight: 700; }

/* --- Footer: Einstieg ins Panel --------------------------------------- */
.admin-einstieg { color: inherit; text-decoration: none; cursor: default; }
.admin-einstieg:hover { color: var(--rds-gold); }

/* =====================================================================
   MOBIL
   ===================================================================== */

@media (max-width: 1024px) {
    .kontakt-gitter { grid-template-columns: 1fr; gap: 3rem; }
    .blog-featured a { grid-template-columns: 1fr; }
    .emotion-grid { grid-auto-rows: 200px; }
}

@media (max-width: 900px) {
    .termin { grid-template-columns: 76px 1fr; gap: 1.5rem; padding-right: 0; }
    .termin-status { grid-column: 1 / -1; text-align: left;
                     display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .termin-status p { flex: 1 1 100%; margin: 0; }
    .termin-rueckblick { columns: 1; }
    .zielgruppen-knoepfe { flex-direction: column; }
    .zielgruppe-knopf { border-bottom: 1px solid var(--rds-linie);
                        border-left: 2px solid transparent; }
    .zielgruppe-knopf.aktiv { border-bottom-color: var(--rds-linie);
                              border-left-color: var(--rds-gold); }
    .business-hinweis { flex-direction: column; align-items: flex-start; }
    .ablauf-schritte li { flex-direction: column; gap: .8rem; }
}

@media (max-width: 640px) {
    .kontakt-formular { padding: 2rem 1.5rem; }
    .anfrage-form .form-reihe { grid-template-columns: 1fr; gap: 0; }
    .blog-featured-text { padding: 2rem 1.5rem; }
    .zeitstrahl { padding-left: 2.2rem; }
    .zeitstrahl-punkt::before { left: -2.2rem; width: 12px; height: 12px; }
    .emotion-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .emotion-item.emotion-highlight { grid-column: span 2; }
    .gedanke { padding: 1.5rem; }
    .leistungs-text { padding: 1.8rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .zielgruppe-inhalt.aktiv { animation: none; }
    .emotion-item img, .blog-karte-bild img, .leistungs-bild img { transition: none; }
    .emotion-item:hover img { transform: none; }
}

/* =====================================================================
   TEXTGRÖSSEN
   Im Panel je Block einstellbar. Bewusst nur Größe und Element –
   die Schrift bleibt überall dieselbe, sonst zerfällt das Bild.
   Alle Werte skalieren mit der Bildschirmbreite mit.
   ===================================================================== */

.t-xs  { font-size: clamp(.72rem, 1.1vw, .82rem);  letter-spacing: 3px;
         text-transform: uppercase; }
.t-s   { font-size: clamp(.86rem, 1.3vw, .95rem);  letter-spacing: 1px; }
.t-m   { font-size: clamp(1rem, 1.6vw, 1.15rem);   letter-spacing: .5px; }
.t-l   { font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: 1px;  line-height: 1.45; }
.t-xl  { font-size: clamp(1.6rem, 3.6vw, 2.6rem);  letter-spacing: 2px;  line-height: 1.15; }
.t-xxl { font-size: clamp(2.1rem, 6vw, 4.2rem);    letter-spacing: 3px;  line-height: 1.05; }

/* Kicker bekommen unabhängig vom Element die Akzentfarbe */
.section-label, span.t-xs { display: block; color: var(--rds-gold); margin-bottom: 1rem; }
.section-dark .section-label, .section-dark span.t-xs { color: var(--rds-gold); }

/* Überschriften behalten ihre Versalien, auch wenn die Größe wechselt */
h1.t-l, h2.t-l, h3.t-l, h1.t-xl, h2.t-xl, h3.t-xl,
h1.t-xxl, h2.t-xxl, h3.t-xxl { text-transform: uppercase; }

/* Fließtext in groß darf nicht zu eng laufen */
p.t-l, p.t-xl, div.t-l, div.t-xl { line-height: 1.6; max-width: 62ch; }
.section-header.center p.t-l,
.section-header.center div.t-l { margin-left: auto; margin-right: auto; }

/* =====================================================================
   NÄCHSTES RENNWOCHENENDE AUF DER STARTSEITE
   ===================================================================== */



.rennen-karte {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem;
    border: 1px solid rgba(201,169,97,.3);
}

.rennen-datum { text-align: center; padding: 1.2rem .8rem; background: rgba(0,0,0,.3);
                border-bottom: 3px solid var(--rds-gold); }
.rennen-tag   { display: block; font-size: 3rem; line-height: 1; letter-spacing: 1px; }
.rennen-monat { display: block; margin-top: .4rem; font-size: .85rem; letter-spacing: 3px;
                color: var(--rds-gold); }
.rennen-jahr  { display: block; font-size: .72rem; letter-spacing: 2px; opacity: .5; }

.rennen-inhalt h3 { margin: .4rem 0 .6rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
                    letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.15; }
.rennen-inhalt h3 a { color: inherit; text-decoration: none; }
.rennen-inhalt h3 a:hover { color: var(--rds-gold); }
.rennen-ort { margin: 0 0 .8rem; color: rgba(255,255,255,.7); letter-spacing: .5px; }

.rennen-countdown {
    display: inline-block;
    padding: .3rem .9rem;
    font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
    color: var(--rds-gold); border: 1px solid rgba(201,169,97,.45);
}

.rennen-aktion { text-align: right; }
.rennen-aktion .verfuegbarkeit { margin-bottom: .8rem; }

.rennen-weitere {
    display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center;
    margin-top: 2.5rem; padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.rennen-weitere a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; }
.rennen-weitere a:hover { color: var(--rds-gold); }
.rennen-weitere span { display: block; font-size: .72rem; letter-spacing: 2px;
                       color: var(--rds-gold); }

@media (max-width: 800px) {
    .rennen-karte { grid-template-columns: 100px 1fr; gap: 1.5rem; padding: 1.5rem; }
    .rennen-aktion { grid-column: 1 / -1; text-align: left; }
    .rennen-tag { font-size: 2.2rem; }
}

/* =====================================================================
   TEXTFARBEN AUS DEM EDITOR
   Bewusst eine feste Palette statt freier Farbwahl: So bleibt die
   Farbwelt der Seite erhalten, auch wenn viele Texte gepflegt werden.
   ===================================================================== */

.f-gold   { color: var(--rds-gold); }

/* Gold-Flow aus dem Live-Editor auch auf der normalen Website.
   Die Klasse wird bereits sicher gespeichert; bisher fehlte auf der
   Livesite lediglich die zugehoerige Darstellung/Animation. */
.f-gold-flow {
    color: #C9A961;
    background-image: linear-gradient(
        105deg,
        #B28C38 0%,
        #C9A961 36%,
        #D9B95A 43%,
        #F1DC91 47%,
        #FFF4C4 50%,
        #F1DC91 53%,
        #D9B95A 57%,
        #C9A961 64%,
        #B28C38 100%
    );
    background-size: 300% 100%;
    background-position: 200% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-text-fill-color: transparent;
    animation: rds-gold-flow 4.6s linear infinite;
}

@keyframes rds-gold-flow {
    from { background-position: 200% 50%; }
    to   { background-position: -200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .f-gold-flow {
        animation: none;
        background-position: 50% 50%;
    }
}
.f-rot    { color: var(--rds-rot); }
.f-hell   { color: #fff; }
.f-dunkel { color: var(--rds-schwarz); }
.f-grau   { color: var(--rds-grau); }

/* Auf dunklen Abschnitten ist Dunkelrot unlesbar – dort Gold nehmen */
.section-dark .f-rot, .cta-section .f-rot, .kontakt-formular .f-rot { color: var(--rds-gold); }

.zentriert { text-align: center; }
.rechts    { text-align: right; }

/* Editor-Inhalte in Fließtexten sauber setzen */
.beitrag-inhalt ul, .beitrag-inhalt ol,
.rechtstext ul, .rechtstext ol { margin: 0 0 1.6rem 1.4rem; line-height: 1.9; }
.beitrag-inhalt li, .rechtstext li { margin-bottom: .5rem; }
.beitrag-inhalt a, .rechtstext a { color: var(--rds-gold);
                                   border-bottom: 1px solid rgba(201,169,97,.4); }

/* =====================================================================
   ABSCHNITTSFARBEN

   .section-dark ist in main.css bereits das Dunkelrot der Marke.
   Hier kommen zwei Varianten dazu, damit nicht jeder farbige Abschnitt
   identisch aussieht – und damit die Bausteine, die für hellen Grund
   gebaut sind, auf farbigem Grund lesbar bleiben.

   Gedachte Abfolge der Startseite:
   Bild → hell → ROT → hell → ROT → hell → ROT → hell → SCHWARZ →
   hell → ROT → hell → Bild
   ===================================================================== */

/* Schwarz: für Bildstrecken. Fotos stehen auf dunklem Grund besser. */
.section-schwarz { background: var(--rds-schwarz); }


/* --- Bausteine auf farbigem Grund lesbar halten ---------------------- */

.section-dark .problem-intro { color: rgba(255,255,255,.75); }

.section-dark .zielgruppen-knoepfe { border-bottom-color: var(--rds-linie-h); }

.section-dark .zielgruppe-einleitung { color: #fff; }

.section-dark .gedanke {
    color: var(--rds-gold-2);
    background: rgba(0,0,0,.28);
    border-left-color: var(--rds-gold);
}

.section-dark .ablauf-nummer { color: rgba(201,169,97,.6); }

.section-dark .faq-eintrag summary { color: #fff; }
.section-dark .faq-eintrag > div { color: rgba(255,255,255,.8); }

.section-dark .kategorie-knopf { color: rgba(255,255,255,.6); }
.section-dark .kategorie-knopf:hover,
.section-dark .kategorie-knopf.aktiv { color: var(--rds-gold); border-bottom-color: var(--rds-gold); }

.section-dark .blog-karte-text p { color: rgba(255,255,255,.7); }
.section-dark .termin-rueckblick li a { color: #fff; }

/* Auf Schwarz braucht das Bildraster keine Fugenfarbe, die auffällt */
.section-schwarz .emotion-grid { gap: 3px; }
.section-schwarz .section-title { color: #fff; }

/* Helle Abschnitte: Kicker bleibt Gold, Überschrift Dunkelrot */
.section:not(.section-dark) .section-title { color: var(--rds-rot); }

/* =====================================================================
   ABSCHNITTSFARBEN

   In main.css hat .section keinen eigenen Hintergrund – die Abschnitte
   sind durchsichtig und erscheinen dadurch weiss. Hier bekommen sie
   feste Flaechen, damit ein Rhythmus entsteht:

     weiss  -> Inhalt zum Lesen und Vergleichen
     hell   -> ruhige Zwischenstufe, trennt zwei weisse Abschnitte
     rot    -> emotionale Abschnitte, die haengen bleiben sollen
     schwarz-> Bilder; Fotos wirken auf dunklem Grund staerker

   Zwei gleiche Flaechen stehen nie nebeneinander.
   ===================================================================== */

.section { background: var(--white, #fff); }

.section-hell { background: var(--off-white, #F8F8F8); }

/* .section-dark aus main.css ist bereits Dunkelrot – hier nur ergaenzt */
.section-dark .section-title,
.section-dark h2, .section-dark h3 { color: #fff; }

.section-schwarz {
    background: var(--dark-bg, #0A0A0A);
    color: rgba(255,255,255,.85);
}
.section-schwarz h2, .section-schwarz h3, .section-schwarz .section-title { color: #fff; }
.section-schwarz .section-subtitle { color: rgba(255,255,255,.7); }
.section-schwarz .section-label { color: var(--rds-gold); }

/* --- Bausteine auf roten und schwarzen Flaechen ---------------------- */

.section-dark .zielgruppen-knoepfe,
.section-schwarz .zielgruppen-knoepfe { border-bottom-color: var(--rds-linie-h); }


.section-dark .zielgruppe-einleitung,
.section-schwarz .zielgruppe-einleitung { color: #fff; }

.section-dark .problem-intro,
.section-schwarz .problem-intro { color: rgba(255,255,255,.75); }

.section-dark .gedanke,
.section-schwarz .gedanke {
    color: #fff;
    background: rgba(0,0,0,.25);
    border-left-color: var(--rds-gold);
}

.section-dark .faq-eintrag > div,
.section-schwarz .faq-eintrag > div { color: rgba(255,255,255,.8); }

.section-schwarz .ablauf-schritte li { border-color: var(--rds-linie-h); }
.section-schwarz .referenz { border-color: var(--rds-linie-h); }
.section-schwarz .blog-gitter { background: var(--rds-linie-h); }
.section-schwarz .blog-karte { background: #141010; }
.section-schwarz .blog-karte:hover { background: #1C1616; }
.section-schwarz .blog-karte-text h3 { color: #fff; }
.section-schwarz .blog-karte-text p { color: rgba(255,255,255,.7); }

/* Auf dunklen Flaechen hat .btn-outline wieder seine urspruengliche
   weisse Fassung – die Aufhellung fuer helle Abschnitte greift dort nicht */
.section-dark .btn-outline,
.section-schwarz .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.section-dark .btn-outline:hover,
.section-schwarz .btn-outline:hover { background: var(--rds-gold);
                                      border-color: var(--rds-gold); color: var(--rds-rot); }

/* Nächstes Rennwochenende steht jetzt auf Schwarz statt auf Rot,
   damit nicht zwei rote Flaechen aneinanderstossen */

.naechstes-rennen .rennen-karte { background: rgba(39,15,15,.55); }
.naechstes-rennen .rennen-datum { background: var(--rds-rot); }

/* Portfolio auf Schwarz: die Fotos bekommen mehr Kontrast */
.emotion-gallery.section-schwarz .emotion-grid { gap: 3px; }

/* Abgeschaltete Abschnitte verschwinden vollständig */
.logo-band.aus { display: none; }

/* Hero und Abschlussbereich als Bildflächen */
.page-hero { background-size: cover; background-position: center; }
.cta-background { position: absolute; inset: 0; background-size: cover;
                  background-position: center; }
.cta-overlay { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(39,15,15,.82), rgba(10,10,10,.92)); }

/* =====================================================================
   GRÖSSEN AUS DEM EDITOR

   Die Klassen sitzen auf einem <span> innerhalb von Absätzen und
   Überschriften. Damit sie sich auch dort durchsetzen, wo der
   umgebende Block eine eigene Schriftgröße mitbringt, stehen sie
   hier noch einmal mit etwas höherem Gewicht.
   ===================================================================== */

.beitrag-inhalt .t-xs, .rechtstext .t-xs, .section .t-xs { font-size: clamp(.72rem, 1.1vw, .82rem); }
.beitrag-inhalt .t-s,  .rechtstext .t-s,  .section .t-s  { font-size: clamp(.86rem, 1.3vw, .95rem); }
.beitrag-inhalt .t-m,  .rechtstext .t-m,  .section .t-m  { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.beitrag-inhalt .t-l,  .rechtstext .t-l,  .section .t-l  { font-size: clamp(1.15rem, 2.2vw, 1.5rem);
                                                           line-height: 1.45; }
.beitrag-inhalt .t-xl, .rechtstext .t-xl, .section .t-xl { font-size: clamp(1.6rem, 3.6vw, 2.6rem);
                                                           line-height: 1.15; }
.beitrag-inhalt .t-xxl,.rechtstext .t-xxl,.section .t-xxl{ font-size: clamp(2.1rem, 6vw, 4.2rem);
                                                           line-height: 1.05; }

/* Ein span mit eigener Größe braucht eine eigene Zeile, sonst
   drückt es die Zeilenhöhe des Absatzes auseinander */
span.t-xl, span.t-xxl { display: inline-block; line-height: 1.1; }

/* =====================================================================
   BUTTONS AUS DEM PANEL
   Die Farbvarianten sind bewusst begrenzt: gefüllt für die wichtigste
   Handlung, Linie für alles daneben. Mehr Varianten würden nur dazu
   führen, dass am Ende jeder Button gleich laut ruft.
   ===================================================================== */

.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
.section-header + .hero-buttons,
.cta-content .hero-buttons { justify-content: center; }
.page-hero .hero-buttons { justify-content: center; }
.about-text .hero-buttons { margin-top: 2rem; }

/* Reiter auf roten und schwarzen Flaechen */
.section-dark .zielgruppe-knopf,
.section-schwarz .zielgruppe-knopf {
    color: #fff;
    border-color: rgba(255,255,255,.35);
}
.section-dark .zielgruppe-knopf:hover,
.section-schwarz .zielgruppe-knopf:hover {
    color: var(--rds-gold);
    border-color: var(--rds-gold);
}
.section-dark .zielgruppe-knopf.aktiv,
.section-schwarz .zielgruppe-knopf.aktiv {
    color: var(--rds-rot);
    background: var(--rds-gold);
    border-color: var(--rds-gold);
}

/* =====================================================================
   FREI PLATZIERTE ELEMENTE
   Werden über die Live-Bearbeitung eingefügt. Das Raster hat zwölf
   Spalten – daraus ergeben sich volle, zwei Drittel, halbe und
   Drittelbreite, ohne dass etwas krumm aufgeht.
   ===================================================================== */

.inhalte-bereich {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    align-items: start;
}
.inhalte-bereich:empty { display: none; }

.inhalt-element { grid-column: span 12; }
.inhalt-element.breite-zweidrittel { grid-column: span 8; }
.inhalt-element.breite-halb        { grid-column: span 6; }
.inhalt-element.breite-drittel     { grid-column: span 4; }

.inhalt-element img { width: 100%; height: auto; display: block; }

.inhalt-bildtext {
    margin: .8rem 0 0;
    font-size: .82rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rds-grau-2);
}

.inhalt-text { line-height: 1.9; }
.inhalt-text p:last-child { margin-bottom: 0; }

.inhalt-abstand { height: 3rem; }

/* Ein Bereich mit Inhalt bekommt Luft nach oben */
.inhalte-bereich:not(:empty) { margin-top: 3rem; }

@media (max-width: 900px) {
    .inhalt-element.breite-zweidrittel,
    .inhalt-element.breite-halb { grid-column: span 12; }
    .inhalt-element.breite-drittel { grid-column: span 6; }
}
@media (max-width: 600px) {
    .inhalt-element.breite-drittel { grid-column: span 12; }
    .inhalte-bereich { gap: 1.5rem; }
}

/* Zweite Spalte im Über-mich-Block: nimmt auf, was neben dem Text
   stehen soll. Bleibt leer, wenn nichts eingefügt wurde. */
.about-spalte:empty { display: none; }
.about-spalte .inhalte-bereich { gap: 1.5rem; }
.about-spalte img { width: 100%; height: auto; }

@media (max-width: 900px) {
    .about-spalte { margin-top: 2.5rem; }
}

/* =====================================================================
   FLÄCHEN SETZEN SICH DURCH

   Abschnitte bringen teils eigene Hintergründe mit (Logoleiste, Zitat,
   Rennwochenende). Die haben die im Panel gewählte Fläche überstimmt –
   deshalb liess sich dort die Farbe nicht ändern. Mit zwei Klassen im
   Selektor gewinnt die Wahl aus dem Panel zuverlässig, ohne dass jede
   künftige Komponente einzeln nachgezogen werden muss.
   ===================================================================== */

.section.section-hell    { background: var(--off-white, #F8F8F8); }
.section.section-dark    { background: var(--rds-rot); color: rgba(255,255,255,.9); }
.section.section-schwarz { background: var(--rds-schwarz); color: rgba(255,255,255,.85); }

.section.section-dark h1, .section.section-dark h2, .section.section-dark h3,
.section.section-schwarz h1, .section.section-schwarz h2, .section.section-schwarz h3 {
    color: #fff;
}

/* Der Rennblock passt sich jetzt an, statt immer dunkel zu sein */
.section-dark .rennen-karte,
.section-schwarz .rennen-karte { background: rgba(0,0,0,.3); border-color: rgba(201,169,97,.35); }
.section:not(.section-dark):not(.section-schwarz) .rennen-karte {
    background: rgba(39,15,15,.04);
    border-color: var(--rds-linie);
}
.section:not(.section-dark):not(.section-schwarz) .rennen-inhalt h3 { color: var(--rds-rot); }
.section:not(.section-dark):not(.section-schwarz) .rennen-ort { color: var(--rds-grau); }

/* Hintergrund des Zitatkastens – im Live-Editor wählbar */
.gedanke.flaeche-gold    { background: linear-gradient(135deg, rgba(201,169,97,.16), rgba(201,169,97,.04)); }
.gedanke.flaeche-hell    { background: var(--off-white, #F8F8F8); }
.gedanke.flaeche-rot     { background: var(--rds-rot); color: #fff; }
.gedanke.flaeche-schwarz { background: var(--rds-schwarz); color: #fff; }
.gedanke.flaeche-ohne    { background: transparent; }

.gedanke.flaeche-rot::before,
.gedanke.flaeche-schwarz::before { color: var(--rds-gold); opacity: .8; }

/* =====================================================================
   HINTERGRUND EINZELNER KÄSTEN
   Im Live-Editor je Element einstellbar. Die Textfarbe passt sich mit
   an – ein dunkler Kasten mit dunkler Schrift wäre unlesbar.
   ===================================================================== */

.hg-keiner { background: none !important; border-left-color: var(--rds-gold); }
.hg-gold   { background: linear-gradient(135deg, rgba(201,169,97,.2), rgba(201,169,97,.06)) !important; }
.hg-hell   { background: var(--off-white, #F0EFED) !important; }
.hg-rot    { background: var(--rds-rot) !important; color: #fff !important; }
.hg-dunkel { background: var(--rds-schwarz) !important; color: rgba(255,255,255,.9) !important; }

.hg-rot::before, .hg-dunkel::before { color: var(--rds-gold); }
.hg-rot a, .hg-dunkel a { color: var(--rds-gold); }

/* =====================================================================
   SAISON-THEMES

   Der Schmuck liegt über der Seite, nimmt aber keine Klicks entgegen
   (pointer-events: none) und steht unter dem Menü – sonst würde er die
   Bedienung stören. Bewegt wird ausschließlich mit transform, das
   überlässt die Arbeit der Grafikkarte und ruckelt nicht.
   ===================================================================== */

/* --- Band unter dem Menü --------------------------------------------- */

.theme-band {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    z-index: 999;
    pointer-events: none;
}

.theme-band-linie {
    height: 3px;
    background: linear-gradient(90deg,
        var(--theme-akzent, #C9A961) 0%,
        var(--theme-akzent-2, #E0C880) 50%,
        var(--theme-akzent, #C9A961) 100%);
}

.theme-band-verlauf {
    height: 5px;
    background: linear-gradient(90deg,
        transparent, var(--theme-akzent, #C9A961) 20%,
        var(--theme-akzent-2, #E0C880) 50%,
        var(--theme-akzent, #C9A961) 80%, transparent);
}

/* Zackenkante wie Schnee auf einem Dach */
.theme-band-zacken {
    height: 14px;
    background: var(--theme-akzent-2, #E0C880);
    -webkit-mask-image: radial-gradient(circle at 10px 0, transparent 9px, #000 10px);
    mask-image: radial-gradient(circle at 10px 0, transparent 9px, #000 10px);
    -webkit-mask-size: 20px 14px;
    mask-size: 20px 14px;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    transform: scaleY(-1);
}

/* Zielflagge */
.theme-band-zielflagge {
    height: 12px;
    background-image:
        linear-gradient(45deg, #0A0A0A 25%, transparent 25%, transparent 75%, #0A0A0A 75%),
        linear-gradient(45deg, #0A0A0A 25%, transparent 25%, transparent 75%, #0A0A0A 75%);
    background-color: #FFFFFF;
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Lichterkette */
.theme-band-lichter {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 26px;
    background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
}
.theme-band-lichter span {
    width: 10px;
    height: 14px;
    margin-top: 2px;
    border-radius: 0 0 50% 50%;
    background: var(--theme-akzent-2, #E0C880);
    box-shadow: 0 0 10px var(--theme-akzent-2, #E0C880);
    animation: theme-blinken 3s ease-in-out infinite;
    animation-delay: calc(var(--nr) * .18s);
}
/* Jede dritte Lampe in der zweiten Farbe – sonst wirkt es wie eine
   Leuchtstoffröhre statt wie eine Lichterkette */
.theme-band-lichter span:nth-child(3n) {
    background: var(--theme-akzent, #C9A961);
    box-shadow: 0 0 10px var(--theme-akzent, #C9A961);
}
@keyframes theme-blinken {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* --- Zierecken -------------------------------------------------------- */

.theme-ecke {
    position: fixed;
    top: 84px;
    z-index: 997;
    font-size: 2.2rem;
    line-height: 1;
    opacity: .8;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.theme-ecke-links  { left: 1.2rem;  transform: rotate(-12deg); }
.theme-ecke-rechts { right: 1.2rem; transform: rotate(12deg); }

/* --- Hinweisbalken ---------------------------------------------------- */

.theme-banner {
    position: relative;
    z-index: 996;
    padding: .7rem 0;
    font-size: .85rem;
    letter-spacing: 1px;
    text-align: center;
    color: var(--rds-schwarz);
    background: var(--theme-akzent-2, #E0C880);
}
.theme-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}
.theme-banner a {
    color: var(--rds-schwarz);
    font-weight: 700;
    text-decoration: underline;
}
.theme-zeichen { font-size: 1.1rem; }

@media (max-width: 900px) {
    .theme-band  { top: 70px; }
    .theme-ecke  { top: 74px; font-size: 1.6rem; }
    .theme-banner { font-size: .78rem; padding: .6rem 1rem; }
    /* Auf schmalen Bildschirmen weniger Schmuck – dort zählt jedes
       Quäntchen Leistung, und viel Bewegung lenkt stärker ab */
    .theme-schmuck span:nth-child(n+9) { display: none; }
}

@media (max-width: 600px) {
    .theme-ecke-rechts { display: none; }   /* dort sitzt das Logo */
}

/*
 * Wer im System ruhige Darstellung eingestellt hat, bekommt keine
 * Bewegung. Das ist kein Beiwerk: Bewegte Elemente können bei manchen
 * Menschen Übelkeit oder Migräne auslösen.
 */
@media (prefers-reduced-motion: reduce) {
    .theme-schmuck { display: none; }
    .theme-band-lichter span { animation: none; }
}

@media print {
    .theme-band, .theme-banner, .theme-schmuck, .theme-ecke { display: none; }
}

/* =====================================================================
   NEWSLETTER

   Steht über der Fußzeile. Wer so weit gelesen hat, ist der beste
   Kandidat – ein Formular gleich oben würde nur stören.
   ===================================================================== */

.newsletter-block {
    padding: 4rem 1.5rem;
    text-align: center;
    background: var(--rds-rot);
    color: #fff;
}
.newsletter-block h3 {
    margin-bottom: 1rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}
.newsletter-block > p {
    max-width: 54ch;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
    color: rgba(255,255,255,.75);
}

.newsletter-form { max-width: 640px; margin: 0 auto; }

.newsletter-felder {
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,.2);
}
.newsletter-felder input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 1rem 1.2rem;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: rgba(0,0,0,.28);
    border: none;
    border-radius: 0;
}
.newsletter-felder input::placeholder { color: rgba(255,255,255,.4); }
.newsletter-felder input:focus {
    outline: none;
    background: rgba(0,0,0,.45);
    box-shadow: inset 0 -2px 0 var(--rds-gold);
}
.newsletter-felder .btn { flex: none; border-radius: 0; }

/* Der Vorname ist optional und darf schmaler sein */
.newsletter-felder input[name="nl_name"] { flex: 0 1 170px; }

.newsletter-einwilligung {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.4rem;
    font-size: .82rem;
    line-height: 1.6;
    text-align: left;
    color: rgba(255,255,255,.6);
    cursor: pointer;
}
.newsletter-einwilligung input {
    margin-top: .25rem;
    flex: none;
    accent-color: var(--rds-gold);
}
.newsletter-einwilligung a { color: var(--rds-gold); }

.newsletter-meldung {
    max-width: 54ch;
    margin: 0 auto 1.8rem;
    padding: .9rem 1.4rem;
    font-size: .92rem;
    border-left: 3px solid var(--rds-gold);
    background: rgba(255,255,255,.08);
}
.newsletter-meldung.fehler { border-left-color: #E05A4E; }

/* Beschriftungen, die nur Vorleseprogramme brauchen */
.visuell-versteckt {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .newsletter-block { padding: 3rem 1.2rem; }
    .newsletter-felder { flex-direction: column; gap: 1px; }
    .newsletter-felder input[name="nl_name"] { flex: 1 1 auto; }
    .newsletter-felder .btn { width: 100%; }
}

/* =====================================================================
   WARTELISTE
   ===================================================================== */

.warteliste {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem;
    background: var(--rds-rot);
    color: #fff;
}
.warteliste-kompakt { padding: 2rem; }

.warteliste-kopf { text-align: center; margin-bottom: 2.5rem; }

.warteliste-marke {
    display: inline-block;
    margin-bottom: 1.2rem;
    padding: .35rem 1rem;
    font-size: .7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--rds-gold);
    border: 1px solid rgba(201,169,97,.45);
}
.warteliste-kopf h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.3rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: .8rem;
}
.warteliste-unter {
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: var(--rds-gold);
    margin-bottom: 1.5rem;
}
.warteliste-text {
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.85;
    color: rgba(255,255,255,.78);
}
.warteliste-zahl {
    margin-top: 1.5rem;
    font-size: .85rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,.6);
}
.warteliste-zahl strong { color: var(--rds-gold); }

.warteliste-meldung {
    margin-bottom: 1.8rem;
    padding: .9rem 1.4rem;
    font-size: .92rem;
    background: rgba(255,255,255,.08);
    border-left: 3px solid var(--rds-gold);
}
.warteliste-meldung.fehler { border-left-color: #E05A4E; }

/* Die Felder folgen dem Kontaktformular – dieselbe Bauweise, damit
   niemand zweimal lernen muss, wie ein Formular hier aussieht */
.warteliste-form .form-feld label { color: var(--rds-gold); }
.warteliste-form .form-feld input,
.warteliste-form .form-feld select,
.warteliste-form .form-feld textarea {
    width: 100%;
    padding: .9rem 0;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.25);
    border-radius: 0;
}
.warteliste-form .form-feld select option { color: var(--rds-text); background: #fff; }
.warteliste-form .form-feld input:focus,
.warteliste-form .form-feld select:focus,
.warteliste-form .form-feld textarea:focus {
    outline: none;
    border-bottom-color: var(--rds-gold);
}
.warteliste-form .form-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.warteliste-form .btn { width: 100%; margin-top: 2rem; }
.warteliste-form .btn-primary {
    background: var(--rds-gold);
    color: var(--rds-rot);
    border-color: var(--rds-gold);
}

@media (max-width: 640px) {
    .warteliste { padding: 2rem 1.5rem; }
    .warteliste-form .form-reihe { grid-template-columns: 1fr; gap: 0; }
}

/* Beim Sprung zur Rückmeldung nicht unter dem festen Menü landen */
#newsletter, [id^="warteliste-"] { scroll-margin-top: 110px; }

/* Die Rückmeldung soll auffallen, wenn man dorthin springt */
.newsletter-meldung, .warteliste-meldung { animation: rds-melden .5s ease; }
@keyframes rds-melden {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .newsletter-meldung, .warteliste-meldung { animation: none; }
}

/* =====================================================================
   EINGEBETTETE VIDEOS MIT EINWILLIGUNG

   Der Platzhalter hat dieselben Maße wie das spätere Video – sonst
   springt das Layout beim Laden, und alles darunter rutscht.
   ===================================================================== */

.video-einbettung {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    background: var(--rds-schwarz);
    background-size: cover;
    background-position: center;
}
.video-einbettung iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(160deg, rgba(39,15,15,.96), rgba(10,10,10,.96));
}

.video-zeichen {
    font-size: 2.2rem;
    line-height: 1;
    color: var(--rds-gold);
}

.video-titel {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

.video-text {
    max-width: 46ch;
    margin: 0;
    font-size: .85rem;
    line-height: 1.65;
    color: rgba(255,255,255,.7);
}

.video-knoepfe {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: .4rem;
}
.video-knoepfe .btn { padding: .8rem 1.6rem; font-size: .78rem; }
.video-knoepfe .btn-outline { color: #fff; border-color: rgba(255,255,255,.45); }

.video-fuss {
    margin: 0;
    font-size: .72rem;
    color: rgba(255,255,255,.45);
}
.video-fuss a { color: rgba(255,255,255,.6); text-decoration: underline; }

/* Nach erteilter Erlaubnis: Vorschaubild mit Abspielknopf */
.video-einbettung.bereit .video-hinweis {
    background: linear-gradient(transparent 40%, rgba(10,10,10,.55));
    padding: 0;
}
.video-start {
    width: 74px;
    height: 74px;
    border: 2px solid rgba(255,255,255,.85);
    border-radius: 50%;
    background: rgba(10,10,10,.45);
    cursor: pointer;
    transition: all .25s;
}
.video-start::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-left: 28px;
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}
.video-start:hover {
    background: var(--rds-gold);
    border-color: var(--rds-gold);
    transform: scale(1.08);
}
.video-start:hover::after { border-left-color: var(--rds-rot); }

@media (max-width: 600px) {
    .video-text { font-size: .78rem; }
    .video-knoepfe { flex-direction: column; width: 100%; }
    .video-knoepfe .btn { width: 100%; }
    .video-zeichen { font-size: 1.6rem; }
}

/* =====================================================================
   COOKIE-EINSTELLUNGEN IM FUSS
   ===================================================================== */

.cookie-knopf {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.cookie-knopf:hover { color: var(--rds-gold); border-bottom-color: var(--rds-gold); }

/* Anzeige des Zustimmungsstands in der Datenschutzerklärung */
.consent-stand {
    padding: 1.5rem 1.8rem;
    margin: 2rem 0;
    background: rgba(201,169,97,.08);
    border-left: 3px solid var(--rds-gold);
}
.consent-stand h3 {
    margin-top: 0;
    font-size: 1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.consent-liste { list-style: none; padding: 0; margin: 1rem 0; }
.consent-liste li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem 0;
    font-size: .92rem;
    border-bottom: 1px solid var(--rds-linie);
}
.consent-liste li:last-child { border-bottom: none; }
.consent-zeichen { font-weight: 700; }
.consent-ja   { color: #3D8B5F; }
.consent-nein { color: #B3413A; }
.consent-zeit { font-size: .82rem; color: var(--rds-grau-2); }

/* =====================================================================
   KURSSEITE
   ===================================================================== */

.kurs-problem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.kurs-problem-punkt h3 {
    margin-bottom: .8rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--rds-gold);
}
.kurs-problem-punkt p { line-height: 1.8; }

.kurs-kernsatz {
    max-width: 60ch;
    margin: 3rem auto 0;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(201,169,97,.3);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.8;
    text-align: center;
}

.kurs-ergebnisse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.kurs-ergebnis {
    padding: 2rem;
    border: 1px solid var(--rds-linie);
    border-top: 3px solid var(--rds-gold);
}
.kurs-ergebnis h3 {
    margin-bottom: .8rem;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.kurs-ergebnis p { line-height: 1.75; color: var(--rds-grau); }

/* Module: nummerierte Liste, die Nummer trägt die Struktur */
.kurs-module { list-style: none; padding: 0; max-width: 780px; margin: 0 auto; }
.kurs-modul {
    display: flex;
    gap: 2rem;
    padding: 1.8rem 0;
    border-bottom: 1px solid var(--rds-linie);
}
.kurs-modul:last-child { border-bottom: none; }
.modul-nummer {
    flex: none;
    font-family: var(--font-heading, "bebas-neue-pro", sans-serif);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--rds-gold);
    opacity: .55;
}
.kurs-modul h3 {
    margin-bottom: .5rem;
    font-size: 1.1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.kurs-modul p { line-height: 1.75; color: var(--rds-grau); margin: 0; }

/* Passt das zu dir */
.kurs-passt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}
.passt-spalte h3 {
    margin-bottom: 1.2rem;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.passt-ja h3   { color: #3D8B5F; }
.passt-nein h3 { color: var(--rds-grau-2); }
.passt-spalte ul { list-style: none; padding: 0; }
.passt-spalte li {
    position: relative;
    padding: .6rem 0 .6rem 1.8rem;
    line-height: 1.7;
    border-bottom: 1px solid var(--rds-linie);
}
.passt-spalte li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}
.passt-ja li::before   { content: '✓'; color: #3D8B5F; }
.passt-nein li::before { content: '–'; color: var(--rds-grau-2); }
.passt-hinweis {
    margin-top: 1.5rem;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--rds-grau);
}

/* Kurs oder Betreuung */
.kurs-vergleich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.vergleich-karte {
    position: relative;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(255,255,255,.15);
}
.vergleich-hervor { border-color: var(--rds-gold); }
.vergleich-marke {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .3rem .8rem;
    font-size: .68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rds-gold);
    border: 1px solid rgba(201,169,97,.4);
}
.vergleich-karte h3 {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.vergleich-karte ul { list-style: none; padding: 0; margin-bottom: 1.5rem; }
.vergleich-karte li {
    padding: .55rem 0 .55rem 1.5rem;
    position: relative;
    line-height: 1.65;
    font-size: .95rem;
}
.vergleich-karte li::before {
    content: '';
    position: absolute;
    left: 0; top: 1.15rem;
    width: 6px; height: 6px;
    background: var(--rds-gold);
}
.vergleich-fuer {
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .9rem;
    line-height: 1.7;
    font-style: italic;
    opacity: .75;
}
.vergleich-karte .btn { margin-top: 1.2rem; }

.kurs-fliesstext { line-height: 1.9; }
.kurs-fliesstext p { margin-bottom: 1.4rem; }

.kurs-hinweis .section-title { margin-bottom: 1rem; }

@media (max-width: 760px) {
    .kurs-passt, .kurs-vergleich { grid-template-columns: 1fr; gap: 2rem; }
    .kurs-modul { gap: 1.2rem; }
    .modul-nummer { font-size: 1.2rem; }
}

/* Hinweis auf einen unveröffentlichten Beitrag */
.blog-entwurf {
    position: sticky;
    top: 80px;
    z-index: 900;
    padding: .8rem 1.5rem;
    font-size: .85rem;
    letter-spacing: 1px;
    text-align: center;
    color: var(--rds-schwarz);
    background: #E0C880;
}
.blog-entwurf a { color: var(--rds-rot); font-weight: 700; text-decoration: underline; }

/* Angebotszeile im Hero – nennt in drei Worten was es hier gibt.
   Steht über der Überschrift, damit der Claim nicht allein erklären muss. */
.hero-angebot {
    display: block;
    margin-bottom: 1.2rem;
    font-size: clamp(.78rem, 1.6vw, .95rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--rds-gold);
}

@media (max-width: 700px) {
    .hero-angebot { letter-spacing: 2.5px; margin-bottom: .8rem; }
}

/* =====================================================================
   V77 – Mobile Polish: Rennkalender & zentrale Formflaechen
   ===================================================================== */
@media (max-width: 700px) {
    .termin-liste { margin-top: 2rem; }
    .termin {
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 1rem;
        padding: 1.25rem 0;
    }
    /* Auf Touchgeraeten keine seitliche Verschiebung beim Hover/Fokus. */
    .termin:hover { padding-left: 0; background: transparent; border-left-color: transparent; }
    .termin-datum { padding: .72rem .3rem; }
    .termin-tag { font-size: 1.75rem; }
    .termin-monat { font-size: .68rem; letter-spacing: 2px; }
    .termin-jahr { font-size: .62rem; }
    .termin-serie { margin-bottom: .4rem; letter-spacing: 1.3px; }
    .termin-inhalt { min-width: 0; }
    .termin-inhalt h3 { font-size: 1.08rem; overflow-wrap: anywhere; }
    .termin-info,
    .termin-zusatz { overflow-wrap: anywhere; }
    .termin-links { gap: .65rem 1rem; }
    .termin-status { gap: .65rem; padding-top: .15rem; }
    .termin-status .btn { width: 100%; justify-content: center; }
    .termin-status .verfuegbarkeit { margin-bottom: 0; }
    .termin-countdown { margin-bottom: 0; }

    .termin-rueckblick { margin-top: 2rem; }
    .termin-rueckblick span { display: block; min-width: 0; margin-bottom: .2rem; }
    .termin-rueckblick em { margin-left: 0; }

    .kontakt-gitter { gap: 2rem; }
    .kontakt-formular { padding: 1.6rem 1rem; }
    .form-feld input,
    .form-feld select,
    .form-feld textarea { font-size: 16px; }
}

@media (max-width: 560px) {
    .rennen-karte {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 1rem;
        padding: 1.1rem;
    }
    .rennen-datum { padding: .8rem .45rem; }
    .rennen-tag { font-size: 1.8rem; }
    .rennen-inhalt { min-width: 0; }
    .rennen-inhalt h3 { overflow-wrap: anywhere; }
    .rennen-aktion { grid-column: 1 / -1; }
    .rennen-aktion .btn { width: 100%; }
    .rennen-weitere { gap: 1.1rem; margin-top: 1.5rem; padding-top: 1.3rem; }
}

/* V69 – unauffälliges Sprachmenü in der Hauptnavigation */
.nav-sprache {
    position: relative;
    margin-left: .25rem;
}
.sprachmenue {
    position: relative;
}
.sprachmenue > summary {
    list-style: none;
}
.sprachmenue > summary::-webkit-details-marker {
    display: none;
}
.nav-link.nav-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-width: 3.65rem;
    padding-left: .58rem;
    padding-right: .58rem;
    border: 1px solid rgba(201,169,97,.30);
    border-radius: 999px;
    color: var(--rds-gold, #c9a961);
    cursor: pointer;
    user-select: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.nav-link.nav-lang::after {
    display: none;
}
.nav-link.nav-lang:hover,
.sprachmenue[open] > .nav-lang {
    border-color: rgba(201,169,97,.72);
    background: rgba(201,169,97,.06);
}
.nav-lang-icon {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .88;
}
.nav-lang-chevron {
    width: 8px;
    height: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .68;
    transition: transform .18s ease;
}
.sprachmenue[open] .nav-lang-chevron {
    transform: rotate(180deg);
}
.sprachmenue-dropdown {
    position: absolute;
    z-index: 50;
    top: calc(100% + .65rem);
    right: 0;
    width: 154px;
    padding: .38rem;
    border: 1px solid rgba(201,169,97,.22);
    border-radius: 12px;
    background: rgba(17,14,14,.97);
    box-shadow: 0 14px 36px rgba(0,0,0,.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.sprachmenue-dropdown::before {
    content: '';
    position: absolute;
    top: -.65rem;
    left: 0;
    right: 0;
    height: .65rem;
}
.sprachmenue-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .62rem .72rem;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: .02em;
    transition: background .16s ease, color .16s ease;
}
.sprachmenue-option:hover {
    background: rgba(255,255,255,.055);
    color: var(--rds-gold, #c9a961);
}
.sprachmenue-option.aktiv {
    color: var(--rds-gold, #c9a961);
    background: rgba(201,169,97,.075);
}
.sprachmenue-option small {
    color: currentColor;
    font-size: .64rem;
    font-weight: 700;
    opacity: .58;
}
.sprachmenue-option.aktiv small::before {
    content: '• ';
}

@media (max-width:900px) {
    .nav-sprache {
        margin: .35rem 0 0;
    }
    .sprachmenue {
        display: inline-block;
    }
    .nav-link.nav-lang {
        display: inline-flex;
        justify-content: center;
    }
    .sprachmenue-dropdown {
        position: static;
        width: 154px;
        margin-top: .45rem;
        box-shadow: none;
        background: rgba(255,255,255,.035);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .sprachmenue-dropdown::before {
        display: none;
    }
}

/* =====================================================================
   V71.1 – COMPACT HEADER / CONVERSION ENTRY POINTS
   ===================================================================== */
@media (min-width: 901px) {
    .nav-menu {
        gap: clamp(.8rem, 1.45vw, 1.55rem);
    }
}

.nav-gruppe {
    position: relative;
}
.nav-dropdown {
    position: relative;
}
.nav-dropdown > summary {
    list-style: none;
}
.nav-dropdown > summary::-webkit-details-marker {
    display: none;
}
.nav-gruppe-trigger {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    position: relative;
    padding: .5rem 0;
    border: 0;
    background: none;
    color: var(--white);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
}
.nav-gruppe-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent-gold);
    transition: width .25s ease;
}
.nav-gruppe-trigger:hover,
.nav-gruppe-trigger.aktiv,
.nav-dropdown[open] > .nav-gruppe-trigger {
    color: var(--accent-gold);
}
.nav-gruppe-trigger:hover::after,
.nav-gruppe-trigger.aktiv::after,
.nav-dropdown[open] > .nav-gruppe-trigger::after {
    width: 100%;
}
.nav-gruppe-trigger svg {
    width: 8px;
    height: 6px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
}
.nav-dropdown[open] > .nav-gruppe-trigger svg {
    transform: rotate(180deg);
}
.nav-dropdown-panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + .7rem);
    left: -.6rem;
    min-width: 210px;
    padding: .45rem;
    border: 1px solid rgba(201,169,97,.22);
    border-radius: 13px;
    background: rgba(17,14,14,.97);
    box-shadow: 0 16px 42px rgba(0,0,0,.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.nav-dropdown-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -.7rem;
    height: .7rem;
}
.nav-dropdown-link {
    display: block;
    padding: .7rem .78rem;
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    text-decoration: none;
    font-size: .78rem;
    letter-spacing: .035em;
    transition: background .16s ease, color .16s ease;
}
.nav-dropdown-link:hover,
.nav-dropdown-link.aktiv {
    background: rgba(201,169,97,.08);
    color: var(--rds-gold, #c9a961);
}

.nav-link.nav-projekt {
    padding: .62rem .88rem;
    border: 1px solid rgba(201,169,97,.58);
    border-radius: 999px;
    color: var(--rds-gold, #c9a961);
    letter-spacing: 1.35px;
    white-space: nowrap;
}
.nav-link.nav-projekt::after { display: none; }
.nav-link.nav-projekt:hover,
.nav-link.nav-projekt.aktiv {
    color: #0d0b0b;
    background: var(--rds-gold, #c9a961);
    border-color: var(--rds-gold, #c9a961);
}

@media (max-width: 900px) {
    .nav-menu {
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 7rem;
    }
    .nav-gruppe,
    .nav-dropdown {
        width: min(320px, 100%);
        text-align: center;
    }
    .nav-gruppe-trigger {
        justify-content: center;
        width: 100%;
        padding: .9rem 0;
        font-size: 1.1rem;
        letter-spacing: 2.5px;
    }
    .nav-gruppe-trigger::after { display: none; }
    .nav-dropdown-panel {
        position: static;
        width: min(280px, 100%);
        min-width: 0;
        margin: .35rem auto 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255,255,255,.035);
    }
    .nav-dropdown-panel::before { display: none; }
    .nav-dropdown-link {
        padding: .72rem .8rem;
        font-size: .86rem;
    }
    .nav-link.nav-projekt {
        margin-top: .15rem;
        padding: .78rem 1.1rem;
    }
}

/* =====================================================================
   V71.1 – FREI PLATZIERBARES KONTAKTFORMULAR
   ===================================================================== */
.rds-kontakt-einbettung {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.12);
    overflow: hidden;
}
.rds-kontakt-einbettung.rds-kontakt-transparent {
    background: transparent;
    color: inherit;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.rds-kontakt-einbettung.rds-kontakt-hell {
    background: #f5f2ed;
    color: var(--rds-text, #1a1717);
}
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld label,
.rds-kontakt-einbettung.rds-kontakt-hell .form-hinweis,
.rds-kontakt-einbettung.rds-kontakt-hell .rds-kontakt-kopf p,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld label,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-hinweis,
.rds-kontakt-einbettung.rds-kontakt-transparent .rds-kontakt-kopf p {
    color: inherit;
}
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld input,
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld select,
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld textarea,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld input,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld select,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld textarea {
    color: inherit;
    border-bottom-color: rgba(39,15,15,.3);
}
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld input::placeholder,
.rds-kontakt-einbettung.rds-kontakt-hell .form-feld textarea::placeholder,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld input::placeholder,
.rds-kontakt-einbettung.rds-kontakt-transparent .form-feld textarea::placeholder {
    color: rgba(39,15,15,.42);
}
.rds-kontakt-kopf {
    margin-bottom: 2rem;
}
.rds-kontakt-kopf h2 {
    margin: .35rem 0 .55rem;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    line-height: 1.04;
}
.rds-kontakt-kopf p {
    margin: 0;
    max-width: 650px;
    color: rgba(255,255,255,.68);
}
.rds-kontakt-kompakt {
    max-width: 760px;
    padding: 2rem;
}
.rds-kontakt-kompakt .form-feld { margin-bottom: 1.05rem; }
.rds-kontakt-kompakt .anfrage-form .btn { margin-top: 1.1rem; }
.rds-kontakt-einbettung .einwilligung label {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}
.rds-kontakt-einbettung .einwilligung input[type="checkbox"] {
    width: auto;
    min-width: 18px;
    margin-top: .2rem;
}
.rds-kontakt-einbettung .einwilligung a { color: var(--rds-gold, #c9a961); }

@media (max-width: 680px) {
    .rds-kontakt-einbettung {
        border-radius: 14px;
        padding: 1.5rem 1rem;
    }
    .rds-kontakt-kopf { margin-bottom: 1.35rem; }
}


/* =====================================================================
   V88 – MOBILE NAVIGATION + SICHTBARER SPRACHWECHSEL
   main.css hatte das Overlay mit z-index:-1 hinter der Website liegen.
   Diese Regeln liegen absichtlich in site.css (wird spaeter geladen), damit
   der mobile Zustand eindeutig ist und DE/EN auch bei geschlossenem Menue
   jederzeit erreichbar bleibt.
   ===================================================================== */
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    position: relative;
    z-index: 1004;
}

.mobile-language-switch {
    display: none;
}

@media (max-width: 900px) {
    body.rds-mobile-menu-open {
        overflow: hidden !important;
    }

    .header-container {
        position: relative;
    }

    .header .logo {
        position: relative;
        z-index: 1004;
    }

    .mobile-header-actions {
        margin-left: auto;
    }

    .mobile-toggle {
        display: flex !important;
        position: relative;
        z-index: 1004;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
    }

    .nav-menu {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding: 7rem 1.4rem 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1.35rem !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: rgba(10,10,10,.985) !important;
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        z-index: 1002 !important;
        transform: translate3d(-100%,0,0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .32s !important;
    }

    .nav-menu.active {
        left: 0 !important;
        transform: translate3d(0,0,0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease !important;
    }

    /* Sprache liegt mobil bewusst im Header und nicht versteckt im Burger. */
    .nav-menu > .nav-sprache {
        display: none !important;
    }

    .mobile-language-switch {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 3px;
        border: 1px solid rgba(201,169,97,.48);
        border-radius: 999px;
        background: rgba(9,9,9,.58);
        box-shadow: 0 5px 20px rgba(0,0,0,.16);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .mobile-language-option {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 28px;
        padding: 0 .45rem;
        border-radius: 999px;
        color: rgba(255,255,255,.74);
        text-decoration: none;
        font-size: .72rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .08em;
        transition: background .16s ease, color .16s ease, box-shadow .16s ease;
    }

    .mobile-language-option.aktiv {
        color: #15100b;
        background: var(--rds-gold, #c9a961);
        box-shadow: 0 3px 12px rgba(201,169,97,.18);
    }

    .mobile-language-separator {
        width: 1px;
        height: 15px;
        background: rgba(201,169,97,.26);
    }
}

@media (max-width: 390px) {
    .header-container {
        padding-left: 1rem;
        padding-right: .75rem;
    }
    .mobile-header-actions {
        gap: .3rem;
    }
    .mobile-language-switch {
        height: 34px;
    }
    .mobile-language-option {
        min-width: 30px;
        height: 26px;
        padding: 0 .32rem;
        font-size: .67rem;
    }
}

/* =====================================================================
   V123 – Blogbeiträge: saubere Hero-Kante + Live-Editor-Wrapper neutral
   ===================================================================== */
.rds-blog-beitrag .rds-blog-block { display: contents; }
.rds-blog-beitrag .beitrag { margin-top: 0; }
.rds-blog-beitrag .beitrag-hero > .rds-bild-stelle,
.rds-blog-beitrag .beitrag-hero > .rds-bild-stelle > img {
    width: 100%;
    height: 100%;
}
.rds-blog-beitrag .beitrag-hero > .rds-bild-stelle > img { object-fit: cover; }