/* Fitness Events Deutschland – Stylesheet */

:root {
    --blue:      #004c99;
    --dark:      #000;
    --slate:     #435469;
    --text:      #000;
    --light:     #f5f5f5;
    --border:    #d1d5dc;
    --accent:    #e71f16;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1.2;
}

h4, h5, h6 {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--accent); }

.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------- Header / Navigation ---------- */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Logo oben, Navigation darunter */
.header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 0 10px;
    transition: padding 1s;
}

/* Logohöhe wie im Original, Shrink beim Scrollen von 150px auf 80px */
.site-logo img {
    display: block;
    height: 150px;
    width: auto;
    transition: height 1s;
}

.site-header.is-shrunk .header-inner { padding-top: 10px; }
.site-header.is-shrunk .site-logo img { height: 80px; }

@media (prefers-reduced-motion: reduce) {
    .header-inner,
    .site-logo img { transition: none; }
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #000;
    font: inherit;
    font-size: 27px;
    font-weight: 300;
    text-transform: uppercase;
    padding: 0px 10px;
    cursor: pointer;
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nur die oberste Ebene liegt nebeneinander */
.main-nav > ul {
    display: flex;
    justify-content: center;
    gap: 0;
}

.main-nav li { position: relative; }

/* Schriftgrößen wie im Original: 18px, Weight 300, Versalien */
.main-nav > ul > li > a {
    display: block;
    padding: 10px 10px;
    color: #000;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li.has-children:hover > a { color: var(--blue); }

/* Untermenü: geschlossen, öffnet nur bei Mouse-over */
.main-nav .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 260px;
    background: #fff;
    padding: 0;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    text-align: left;
}

.main-nav li.has-children:hover > .sub-menu,
.main-nav li.has-children:focus-within > .sub-menu { display: flex; }

.sub-menu a {
    display: block;
    padding: 10px 10px;
    color: #000;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
}
.kontaktformular{    visibility: hidden;
    height: 0;}
.sub-menu a:hover { background: var(--blue); color: #fff; }

/* ---------- Hero ---------- */
/* Bildquelle steht per style-Attribut im Markup */
.hero {
    min-height: 800px;
    display: flex;

    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    flex-direction: column;
    /* oben mehr Luft, damit der Header den Inhalt nicht überlagert */
    padding: 9px 0 10px;
    text-align: center;
    background-image: url(/img-tausch/hero-100-1200x900.jpg);
}
.hero-bild{width: 100%;}

/* Textzeilen  verteilen */
.hero .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
        margin-top: 477px;
}

/* im Hero abweichend zur Playfair-Display-Vorgabe für h1 bis h3 */
.hero h1 {
    font-family: 'Roboto Condensed', sans-serif;
    color: var(--light);
    font-size: 87px;
    margin: 0;
        font-weight: 700;
    text-shadow: 7px 7px 4px rgb(21 21 21 / 68%);
        text-decoration: underline;
}

.hero p {
    max-width: 780px;
    margin: 0;
}
.hero .zweitezeile{    font-size: xx-large;
    padding: 0 10px;}

/* Größe der Grundschrift  */
.hero .erstezeile { font-size: 54px; line-height: 1.1; background-color: var(--blue);color:var(--light);padding: 0 10px 0 10px;}
.hero .zweitezeile {background-color: var(--light);}
.btn {
    display: inline-block;
    padding: 14px 34px;
    background: var(--blue);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .05em;
}
.hero .btn{border-radius: 10px;margin-top:15px;}
.btn:hover { background: var(--accent); color: #fff; }

/* ---------- Inhalt ---------- */
.section { padding: 70px 0; }
.section--light { background: var(--light); }
.section h1 { font-size: 34px; margin: 0 0 25px; }

.section p { margin: 0 0 20px; }
.section p:last-child { margin-bottom: 0; }

/* Banner über die gesamte Breite, ohne Container und Innenabstand */
.banner a { display: block; }

.banner a:hover img { opacity: .9; transition: opacity .3s ease; }

.banner picture,
.banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* Willkommens-Sektion und Unterseiten: weiß, zentriert, halbe Fensterbreite */
.willkommen,
.unterseite {
    background: #fff;
    text-align: center;
}

/* halbe Fensterbreite, aber nie breiter als eine gut lesbare Zeile */
.willkommen .container,
.unterseite .container { max-width: min(50vw, 700px); }

#inhalt h2 { text-align: center; }

/* Rechtstexte: Überschriften bleiben zentriert, Fließtext linksbündig */
.rechtsseite p,
.rechtsseite ul,
.rechtsseite li { text-align: left; }

.rechtsseite ul { padding-left: 22px; }
.rechtsseite li { margin-bottom: 12px; }

/* Cookie-Tabellen der Datenschutzerklärung */
.rechtsseite table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}

.rechtsseite th,
.rechtsseite td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    vertical-align: top;
}

.rechtsseite th {
    background: var(--light);
    color: var(--dark);
}

.impressionen-grid {
    display: grid;
    gap: 30px;
    margin-top: 40px;
    grid-auto-flow: column;
}
.teaser-grid {  display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
    gap: 30px;
    margin-top: 40px;
}
.zielgruppen .teaser-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));*/
    gap: 30px;
    margin-top: 40px;
}
.teaser {
    background: #fff;
    border: 1px solid var(--border);
    padding: 30px;
}

.teaser h3 { margin-top: 0; }

/* Listen in Karten */
.teaser ul {
    margin: 0;
    padding-left: 22px;
}

.teaser li { margin-bottom: 10px; }
.teaser li:last-child { margin-bottom: 0; }

/* Impressionen-Rubriken: rahmenlos, verlinktes Bild statt Button */
.rubriken .teaser { border: none; padding: 0; }

.rubrik-bild { display: block; }

.rubrik-bild img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity .3s ease;
}

.rubrik-bild:hover img { opacity: .8; }

/* Zielgruppen-Karten: rahmenlos, dicht an der Einleitung */
.zielgruppen { padding-top: 0; }
.zielgruppen .teaser-grid { margin-top: 0; }
.zielgruppen .teaser { border: none; }
.zielgruppen h4{font-weight: bold; text-transform:none;}

/* ---------- Bildergalerien (CSS-Grid, feste Kachelgröße) ---------- */
.galerie-sektion { text-align: center; }
.galerie-sektion .galerie-datum { color: var(--slate); margin: 0 0 30px; }

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    grid-auto-flow: dense;
}
    .galerie-item:is(:nth-child(2), :nth-child(7), :nth-child(12), :nth-child(17), :nth-child(23), :nth-child(28), :nth-child(35)) {
    grid-column: span 2;
    grid-row: span 2;}
.galerie-item a { display: block; }
.galerie-item img {
    display: block;
    width: 100%;
    /* height: auto überschreibt das height-HTML-Attribut (Breite/Höhe-Reservierung
       der Originalbilder), sonst gewinnt dessen Seitenverhältnis gegen aspect-ratio */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--light); /* Platzhalterfläche, bis das Bild geladen ist */
    transition: opacity .3s ease;
    object-position: top;
}

.galerie-item a:hover img { opacity: .8; }

/* ---------- Seitenkopf mit Hintergrundbild ---------- */
/* Bildquelle steht per style-Attribut im Markup, Seitenverhältnis des Bildes (2000x750) */
.seitenkopf {
    background-color: var(--dark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    aspect-ratio: 8 / 3;
}

/* ---------- Fakten ---------- */
.fakten {
    background: #fff;
    text-align: center;
}
.grayklasse{background-color: #d1d5dc;}
.grayklasse .teaser{background:none;}
.fakten-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.fakt p { margin: 0; }

/* Kreis im Stil der Social-Icons, Durchmesser ein Drittel größer (66px -> 88px) */
.fakt-kreis {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 40px;
}

/* große Zahl wie im Original: Playfair Display, 44px, fett */
.fakt-zahl {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

.fakt-label { color: var(--slate); }

/* ---------- Buchung (Eventfrog-Widget) ---------- */
.buchung {
    background: #fff;
    text-align: center;
}

/* nimmt den Einbettungscode auf; Mindesthöhe verhindert Springen beim Laden */
.buchung-widget {
    max-width: 900px;
    margin: 0 auto;
    min-height: 200px;
}

.buchung-platzhalter {
    padding: 80px 20px;
    border: 1px dashed var(--border);
    color: var(--slate);
}

/* ---------- Kontaktformular ---------- */
.kontaktformular {
    background: var(--border); /* Footergrau #d1d5dc */
    text-align: center;
}

.kontaktformular .container { max-width: min(50vw, 700px); }

.kontaktformular form { text-align: left; }

/* Auswahl "Teilnahme als" */
.formular-teilnahme {
    border: none;
    margin: 0 0 25px;
    padding: 0;
}

.formular-teilnahme legend {
    padding: 0;
    margin-bottom: 8px;
    color: var(--dark);
    font-weight: 700;
}

.formular-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    cursor: pointer;
}

.formular-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--blue);
}

.formular-feld { margin-bottom: 20px; }

.formular-feld label {
    display: block;
    margin-bottom: 6px;
    color: var(--dark);
    font-weight: 700;
}

.formular-feld input,
.formular-feld textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--dark);
    font: inherit;
}

.formular-feld input:focus,
.formular-feld textarea:focus {
    outline: 2px solid var(--blue);
    outline-offset: -1px;
}

.kontaktformular .btn {
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

/* Event-Karten in der Sektion "inhalt" */
/* Bild randlos links, Innenabstand daher am Textteil */
.event {
    display: flex;
    flex-direction: row;
    background: var(--border);
    border-color: #c8cdd2;
    padding: 0;
    overflow: hidden;
}

/* Einheitliches Format, unabhängig von den Originalmaßen */
.event-bild {
    display: block;
    width: 40%;
    height: auto;
    aspect-ratio: 556 / 382;
    object-fit: cover;
}
.event-logo {
    display: block;
    width: 18%;
    height: auto;
    aspect-ratio: 556 / 382;
    object-fit: cover;
}
.event-logo-mobile{display:none;height: 0;}
.event-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 30px;
    text-align: left;
}
.event-body h1{margin: 0 0 9px; color: #000; font-weight: 700;    font-size: 34px; font-family: 'Roboto Condensed', sans-serif;}
.event-meta { margin: 0 0 2px; }
.event-meta p { margin: 0 0 2px; }

/* Einzelangaben des Events */
.event-meta .ort { color: #000; font-weight: 700;    font-size: 34px; }
.event-meta .veranstalter{font-size: 21px;font-weight: 700;     margin-bottom: 10px!important;}
.event-meta .datum {font-size: 34px;font-weight: 700; }
.event-link-container{display: block;}
.event-link {
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 24px;
    border: 1px solid var(--blue);
    color: var(--light);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 10px;
    background-color: var(--blue);
}
a.bodylife{background-color:#9e0d1e;border: 1px solid #9e0d1e;}
.bodylife .event-logo{width:25%;}
.event-link:hover { background: var(--blue); color: #fff; }
.event-link:after{
    content: var(--fa);}

/* ---------- Ansprechpartner ---------- */
.ansprechpartner {
    background: #fff;
    text-align: center;
}

.kontakt-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
    margin-top: 50px;
}

.kontakt img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 18px;
}

.kontakt-name { font-size: 19px; margin: 0 0 4px;text-transform: none }
.kontakt-rolle { color: var(--slate); margin: 0 0 4px; }
.kontakt-fon { margin: 0 0 4px; }
.kontakt-mail { margin: 0; }

/* ---------- Partner-Karussell ---------- */
.partner {
    background: #fff;
    text-align: center;
}

.karussell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 50px;
}

/* Waagerechte Bahn mit Einrasten pro Logo */
.karussell-track {
    display: flex;
    gap: 50px;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.karussell-track::-webkit-scrollbar { display: none; }

.karussell-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* vier Logos gleichzeitig, Abzug für die drei Lücken */
.karussell-item {
    flex: 0 0 calc((100% - 600px) / 4);
    scroll-snap-align: start;
}

.karussell-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    background: #fff;
}

.karussell-nav {
    flex: 0 0 44px;
    height: 44px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--blue);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.karussell-nav:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.karussell-nav[disabled] { opacity: .35; cursor: default; }
.karussell-nav[disabled]:hover { background: #fff; border-color: var(--border); color: var(--blue); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--border);
    color: #000;
    padding: 60px 0 0;
}

.site-footer a { color: #000; }

/* Alle Footer-Links außer den Social-Icons: weicher Wechsel auf Schwarz */
.footer-links a,
.footer-extern a,
.footer-copyright a {
    display: inline-block;
    padding: 4px 10px;
    transition: background-color .3s ease, color .3s ease;
}

.footer-links a:hover,
.footer-copyright a:hover {
    background-color: #000;
    color: #fff;
}

/* Der blaue bodyLIFE-Schriftzug bleibt auf Weiß lesbar */
.footer-extern a:hover { background-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .footer-links a,
    .footer-extern a,
    .footer-copyright a { transition: none; }
}

/* Reihenfolge: Social, Menü, bodyLIFE-Hinweis mit Logo, Copyright */
.social-line {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 0;
    margin: 0 0 30px;
}

.social-line a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border: 1px solid #000;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 30px;
    transition: background-color .3s ease, color .3s ease;
}

.social-line a:hover { background: #fff; color: #000; }

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 0 0 40px;
    padding: 0;
}

.footer-extern {
    text-align: center;
    margin: 0 0 40px;
}

.footer-extern p { margin: 0 0 6px; }
.footer-extern img { display: block; max-width: 240px; height: auto; }

.footer-copyright {
    margin: 0;
    padding: 22px 0;
    text-align: center;
    font-size: 16px;
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .main-nav { display: none; width: 100%; }
    .site-header.is-shrunk .site-logo img {
    height: 69px;
}
    .main-nav.is-open { display: block; }
    .header-inner { padding: 0;gap:0;}
/*.site-header.is-shrunk .header-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 0 10px;
    transition: padding 1s;
    flex-direction: row-reverse;
    justify-content: space-between;
}
*/
    .site-logo img { height: 100px; }
    .main-nav > ul { flex-direction: column; text-align: center; }
    /* Ohne Maus klappen die Untermenüs im Burger-Menü mit auf */
    .section{padding-bottom: 10px;}
    .main-nav .sub-menu {
        display: flex;
        position: static;
        min-width: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        text-align: center;
    }
    .sub-menu a { color: var(--slate); }
    .set-cross .fa-bars{visibility: hidden;    width: 0;}
    .set-cross .fa-xmark{visibility: visible;}
    .fa-xmark{visibility:  hidden; width: 0;}
    .hero { min-height: 600px; padding: 0;        background-image: url(/img-tausch/hero-100-833x900.jpg);
        background-size: 100vw;justify-content: flex-end;}
    .hero .container{margin-top: 0;}
    .hero h1 { font-size: 34px; }
    .hero .erstezeile { font-size: 38px; }
    .event{flex-direction: column;}
    .event-body{padding: 10px;}
    .event-bild{width: 100%;}
    .event-link-container{display: flex; justify-content: space-between;}
    .event-logo{display:none;height: 0;}
    .event-logo-mobile{    display: block;
    width: 40%;
    height: auto;
    object-fit: cover;position: relative;}
   .bodylife .event-logo-mobile {display: block;
    width: 40%;
    height: auto;
    object-fit: cover;position: relative;
    top: 10%;
    left: 5%;}
    /* Willkommens-Sektion nutzt mobil die volle Breite */
    .willkommen .container,
    .unterseite .container,
    .kontaktformular .container { max-width: 100%; }
    /* zwei Logos statt vier */
    .karussell-item { flex: 0 0 calc((100% - 30px) / 2); }
    /* Fakten in zwei Spalten */
    .fakten-grid { grid-template-columns: repeat(2, 1fr); }
    /* Galerie in zwei Spalten */
    .galerie { grid-template-columns: repeat(2, 1fr); }
}