/* ============================================================
   main.css – ltb.luftsport-sh.de
   Mobile-first | Contao 5.7 | IONOS
   Breakpoints:
     Mobile:            < 769px  (Basis, kein Query)
     Tablet Portrait:   769px – 991px
     Tablet Landscape:  992px – 1199px
     Desktop:           ≥ 1200px
   ============================================================ */

/* -----------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------- */
:root {
    --color-primary:     #004b96;
    --color-accent:      #ae0000;
    --color-blue-light:  #59A5D1;
    --color-blue-search: #5BBCF0;
    --color-grey-light:  #ededed;
    --color-grey-mid:    #c2c2c2;
    --color-text:        #333;
    --font-body:         'Exo 2', Verdana, sans-serif;
    --font-heading:      'Montserrat', Verdana, sans-serif;
}


/* ===========================================================
   1. BASE / RESET
   =========================================================== */

body {
    color: var(--color-text);
    font: 16px var(--font-body);
    margin: 0 auto;
}

p {
    line-height: 1.5rem;
    text-align: justify;
}

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


/* ===========================================================
   2. TYPOGRAFIE
   =========================================================== */

h1, h2, h3, h4,
.info > h3,
.info-items > h3,
.info-items > h3 > a {
    color: var(--color-primary);
    font-family: var(--font-heading);
}

h1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.424rem;
}

h2 {
    font-size: 1.3rem;
    margin-top: 2rem;
}

h3 { font-size: 1.1rem; }

.reSpalte-start h3 {
    font-size: 1.1rem;
    margin-top: 0;
}


/* ===========================================================
   3. LAYOUT – MOBILE (Basis)
   =========================================================== */

/* Desktop-Elemente auf Mobile ausblenden */
#header              { display: none; }
#EigenerBereichSuche { display: none; }
.mod_navigation      { display: none; }

/* Mobile Header */
#mobile-header-menu {
    display: flex;
    padding-right: 1rem;
}

.mobile-hher { flex: 1; }
.mobile-logo { flex: 3; }

.mobile-logo-subtitle {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.mobile-logo-subtitle p { line-height: 1.2rem; }

/* Wrapper */
#wrapper {
    width: 100%;
    max-width: 1200px;
    background: #fff;
    margin: 0 auto;
    z-index: 3;
    position: relative;
    padding-top: 0.5rem;
}

/* Content */
.content,
.content-folgeseiten {
    display: flex;
    padding: .5rem;
    flex-direction: column;
}

/* Artikel */
.mod_article {
    padding-right: 1rem;
    padding-left: .3rem;
}

.mod_article ol li {
    margin-left: 1rem;
    margin-bottom: 1rem;
}

.mod_article li { margin-bottom: 1rem; }

/* Footer – Mobile */
#footer {
    padding: 1rem;
    background-color: var(--color-grey-light);
    display: flex;
    flex-direction: column;
}


/* ===========================================================
   4. HEADER (Desktop-Stile, per Breakpoint aktiviert)
   =========================================================== */

#header {
    color: var(--color-text);
    z-index: 2;
    align-items: center;
}

#header .content-text {
    border-left: 1px solid #ccc;
    margin-left: 1rem;
    color: #777;
    font-size: 0.9rem;
    line-height: 1.1rem;
}

#header > div.content-text.last.block > p {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 2rem;
}

.logo {
    padding-right: 2rem;
    padding-left: 1rem;
    transform: translateX(-20px);
}

#header h1 {
    font-size: 1.5rem;
    color: var(--color-primary);
    font-family: inherit;
    padding-left: 1rem;
    font-variant: small-caps;
}


/* ===========================================================
   5. INHALTSSPALTEN
   =========================================================== */

.info {
    display: flex;
    flex-direction: column;
    flex: 0.8;
}

.content-links {
    padding-right: 2rem;
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    flex: 2.2;
}

.content-links h4 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1rem;
}

.content-links ol li {
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

div.ce_gallery.linkeSpalte { flex: 2.2; }

.ce_gallery.linkeSpalte ul li,
li.download-element,
.download-element ul li {
    list-style-type: none !important;
}

.bildimtext {
    margin-right: 1rem;
    flex-direction: row;
    flex: 2.2;
}

.reSpalte {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    flex: 0.8;
}

.reSpalte-start {
    display: flex;
    flex-direction: column;
    flex: 0.8;
    padding-left: 1rem;
}

.reSpalte-start h2 { margin-top: 0; }


/* ===========================================================
   6. KOMPONENTEN
   =========================================================== */

/*swiper */   
.swiper-button-prev,
.swiper-button-next {
    display: none;
}   


/* --- Info-Teaser-Boxen --- */
.info-items {
    color: #666;
    margin: 0;
    padding: 1.2rem 1.8rem;
    background: #e3e3e3;
    transition: all .2s ease-in-out;
    min-height: 10rem;
    width: 100%;
    box-sizing: border-box;
}

.info-items:nth-child(2n+1) { background: var(--color-grey-light); }

.info-items:hover {
    background-color: var(--color-accent);
    color: #fff;
}

.info-items:hover h2,
.info-items:hover a {
    color: #fff !important;
}

.info-items a:hover { font-weight: bold; }

.info-items p,
.info-items figcaption {
    font-size: .8rem;
    line-height: 1.5;
}

.info-items a.weiter::after {
    font-family: 'Font Awesome 5 free';
    font-weight: 900;
    content: '\f105';
    margin-left: 1rem;
}

/* --- Formulare --- */
#anmeldung div.formbody fieldset {
    padding: 1rem;
    background-color: #fff;
    border: 1px solid var(--color-grey-mid);
}

/* TODO: #ctrl_38 / #ctrl_41 durch stabile CSS-Klassen ersetzen,
   sobald das Anmeldungsformular geprüft wurde */
#anmeldung #ctrl_38.select,
#anmeldung #ctrl_41 {
    width: 100%;
    height: 2rem;
    display: inline-block;
}

#anmeldung.mod_article    { padding-top: 2rem; }
#anmeldung p              { margin-bottom: 1rem; }

#anmeldung .formbody fieldset div.widget.widget-text { margin-bottom: 1rem; }

#danke-fuer-die-anmeldung p { line-height: 1.5rem; }

/* TODO: #ctrl_13 / #ctrl_1 durch stabile CSS-Klassen ersetzen */
#ctrl_13.radio_container,
#ctrl_1 {
    display: flex;
    flex-direction: column;
}

/* Suchfeld (blauer Hintergrund → weißer Placeholder) */
.widget-text.suche input {
    text-align: right;
    text-transform: uppercase;
    letter-spacing: .05rem;
    word-spacing: .1rem;
    background-color: var(--color-blue-search);
}

.widget-text.suche input::placeholder { color: #fff; }

/* --- Tabellen --- */
.tabelle table,
.content-links table { width: 100%; }

.tabelle th,
.content-links th {
    padding: .5rem;
    background-color: var(--color-primary);
    border-right: 1px solid #fff;
    font-size: 1rem;
    font-weight: normal;
    color: #fff;
}

.tabelle tr.even,
.content-links tr.even { background-color: #eee; }

.tabelle td,
.content-links td { padding: .5rem; }

.tabelle tr td p {
    margin-bottom: 0;
    line-height: 1.5rem;
}

.tabelle tr td a {
    font-size: 1rem;
    color: var(--color-accent);
}

/* --- Akkordeon --- */
.ce_accordion .toggler {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1rem 1rem .5rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s ease;
    background-color: var(--color-primary);
}

.ce_accordion .toggler::before {
    font: 900 .8rem 'Font Awesome 5 free';
    content: '\f107';
}

.ce_accordion .toggler.active::before {
    font: 900 .8rem 'Font Awesome 5 free';
    content: '\f106';
}

.externallink p a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f35d';
    font-style: normal;
    font-weight: 900;
    margin-right: .5rem;
    margin-left: 1rem;
}

/* --- Downloads --- */
.download-element > a::before,
.download-element ul li a::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f019';
    font-style: normal;
    font-weight: 900;
    margin-right: 0.5rem;
}

/* --- Listen mit Icons --- */
.liste ul li { line-height: 1.5rem; }

.liste ul {
    padding-left: 1.6rem;
    text-indent: -1.7rem;
    margin-left: 0.4rem;
}

.liste li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f138';
    font-size: 0.9rem;
    font-weight: 900;
    margin-right: 0.8rem;
    color: #ccc;
}

.liste-stop li::before {
    font-family: 'Font Awesome 5 free';
    font-weight: 900;
    content: '\f256';
    margin-right: 1rem;
}

.liste-stop ul li {
    padding-left: 2rem;
    text-indent: -2rem;
}

/* --- Icon-Klassen (Tel, Fax, Mail etc.) --- */
p.tel,
p.mobil,
p.fax { letter-spacing: .05rem; }

.tel::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f095';
    font-size: 0.9rem;
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--color-text);
}

.mobil::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f3cd';
    font-size: 0.9rem;
    font-weight: 900;
    margin-right: 0.8rem;
    color: var(--color-text);
}

.fax::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f1ac';
    font-size: 0.9rem;
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--color-text);
}

.mail::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f1fa';
    font-size: 0.9rem;
    font-weight: 900;
    margin-right: 0.5rem;
    color: var(--color-text);
}

/* --- Footer-Inhalt --- */
#footer p {
    color: #444;
    letter-spacing: .05rem;
}

#footer h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0 0 1rem;
    font: 700 .87rem/1rem var(--font-heading);
    color: #444;
    text-transform: uppercase;
    letter-spacing: .05rem;
    border-bottom: 1px solid #cccccc;
}

#footer .metanav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- Datenschutz --- */
.datenschutz ul li {
    margin-right: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    list-style-type: square;
}

.datenschutz ol li {
    margin-top: 1rem;
    margin-left: 1.1rem;
}

.datenschutz ol.lower-alpha {
    margin-bottom: 1rem;
    list-style-type: lower-alpha !important;
}

.datenschutz ol > ul > li {
    margin-top: 1rem;
    margin-left: 3rem;
}

/* --- Utility-Klassen --- */
.float_right > img { padding-left: 1rem; }

.blue {
    color: var(--color-primary) !important;
    font-weight: 700;
}

.border-dotted {
    border-bottom: 1px dotted #2CAAE4;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }

.checkbox_container.kopie-senden span { display: flex; }


/* ===========================================================
   7. TABLET PORTRAIT  (769px – 991px)
   =========================================================== */

@media (min-width: 769px) and (max-width: 991px) {

    #EigenerBereichSuche,
    #header,
    #nav { display: none; }

    #mobile-header-menu { display: flex; }

    .mobile-logo-subtitle {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.8rem;
        padding-left: 1rem;
    }

    #wrapper { width: 100% !important; }

    .mod_article {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* ===========================================================
   8. TABLET LANDSCAPE  (992px – 1199px)
   =========================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

    .mobile-logo,
    .mobile-logo-subtitle,
    #nav,
    #EigenerBereichSuche { display: none !important; }

    #header {
        display: flex;
        justify-content: flex-end;
        padding-bottom: 1rem;
        padding-right: 2rem;
        padding-top: 0;
    }

    #wrapper { width: 100% !important; }

    .mod_article {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


/* ===========================================================
   9. DESKTOP  (≥ 1200px)
   =========================================================== */

@media (min-width: 1200px) {

 /* Mobile-Elemente ausblenden */
    #mobile-header,
    #mobile-header-menu,
    .mobile-logo-subtitle,
    #naviMobile { display: none; }

    /* ↓ DAS FEHLT */
    .mod_navigation      { display: block; }
    #EigenerBereichSuche { display: block; }

    /* Hintergrundbild (absoluter Pfad – funktioniert unabhängig
       vom Speicherort der CSS-Datei) */
    body {
        background-image: url('/files/Bilder/Seitenaufbau/bg_ueber_den_wolken.jpg');
        background-position: left top;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* Wrapper */
    #wrapper { max-width: 1060px; }

    /* Header */
    #header {
        display: flex;
        padding: 3rem 2rem 2rem;
        max-width: 1060px;
    }
    
    

    /* Suchleiste */
    #suche {
        text-align: right;
        width: 1060px;
        margin: 0 auto;
        padding-top: 2rem;
    }

    #search > div > div::before {
        font-family: 'Font Awesome 5 free';
        font-weight: 900;
        content: '\f002';
        color: #fff;
        height: 30px;
        z-index: 1;
        text-align: center;
        line-height: 30px;
    }

    #search input {
        border-radius: 0;
        font-size: .8rem;
        line-height: 1rem;
        color: #fff;
        text-transform: uppercase;
        word-spacing: .1rem;
        border: none;
        width: 15rem;
        padding: 0.6rem;
        background: none;
        outline: none;
    }

    #search > div:nth-child(1) {
        display: flex;
        flex-direction: row-reverse;
    }

    /* Suchfeld Desktop: dunklere Hintergrundfarbe, Breite bei Fokus.
       letter-spacing, text-align und ::placeholder kommen aus der Basis-Regel. */
    #search .widget-text.suche input {
        background-color: rgba(0, 75, 150, .4);
    }

    #search .widget-text.suche input:focus {
        width: 700px;
        transition: all .2s ease;
    }

    /* Content-Spalten auf Desktop nebeneinander */
    .content,
    .content-folgeseiten { padding: 0; }

    /* Artikel */
    .mod_article {
        margin-left: 1rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Bildimtext auf Desktop */
    div.bildimtext div.content-text h2 { margin-bottom: 0; }

    /* Footer auf Desktop nebeneinander */
    #footer {
        padding: 2rem;
        flex-direction: row;
        justify-content: space-between;
    }
}


/* ===========================================================
   RESERVE – DERZEIT NICHT GENUTZTE MODULE
   Vom Hauptverband übernommen, hier aktuell nicht im Einsatz.
   Bei Bedarf nach oben in den passenden Abschnitt verschieben.
   =========================================================== */

/* --- Nachrichtenmodul / Aktuelles --- */
.aktuelles {
    display: flex;
    flex: 2.2;
}

.aktuelles-archiv .ce_text {
    display: flex;
    flex-direction: column;
}

.aktuelles-archiv .layout_short {
    margin-top: 1rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ddd;
}

.mod_newsreader .layout_full h2 {
    font-size: 1.5rem;
    line-height: 2;
    color: var(--color-primary);
}

.mod_newsreader .layout_full .image_container.float_right { width: 30%; }

.aktuelles-items {
    display: flex;
    flex-wrap: wrap;
}

.aktuelles-items .layout_short {
    width: 100%;
    flex-direction: column;
    padding: 0 1rem 1rem;
}

.aktuelles-items .even {
    margin-bottom: 1rem;
    border-right: 1px solid #ccc;
}

.aktuelles-items .layout_short h3 a {
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--color-primary);
}

@media (min-width: 992px) {
    .aktuelles-items .layout_short { width: 45%; }
}

@media (min-width: 1200px) {
    .mod_newsreader .layout_full figure.image_container.float_right { width: 30%; }
}

/* --- Terminmodul / Events --- */
.layout_upcoming {
    margin-bottom: .5rem;
    font-size: .8rem;
}

.mod_eventlist .layout_teaser.upcoming.odd {
    padding: .5rem;
    background-color: #ddd;
    border-bottom: 1px solid #f2b151;
}

.mod_eventlist .layout_teaser.upcoming.even {
    padding-right: .5rem;
    padding-bottom: .5rem;
    padding-left: .5rem;
}

.mod_eventlist h2 { font-size: 1.1rem; }

.mod_eventlist .layout_teaser.upcoming h3 > a { color: var(--color-primary); }

.mod_eventlist div.header {
    padding: .5rem;
    background-color: var(--color-accent);
    color: #fff;
}

.mod_eventlist table,
.event.layout_full table {
    width: 100%;
    height: auto;
}

.mod_eventlist table td { padding: .2rem; }

/* --- Newsletter (mod_subscribe) --- */
.mod_subscribe.info-items > h2:hover { color: #fff !important; }