/* ============================================================
   main.css – jugend.luftsport-sh.de
   Mobile-first | Contao 5.7 | IONOS
   Breakpoints (wie seko / ltb):
     Mobile:            < 769px  (Basis, kein Query)
     Tablet:             769px – 1199px
     Desktop:           >= 1200px
   ============================================================ */

/* -----------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------- */
:root {
    --color-primary:    #004b96;
    --color-accent:     #ae0000;
    --color-grey-light: #ededed;
    --color-grey-mid:   #c2c2c2;
    --color-text:       #333;
    --color-search-bg:  rgba(0, 75, 150, .4);
    --font-body:        'Exo 2', Verdana, sans-serif;
    --font-heading:     'Montserrat', Verdana, sans-serif;
    /* Eigene, hellere Nav-Farbpalette (weicht von --color-primary ab) */
    --color-nav:         #59A5D1;
    --color-nav-hover:   #1a71a5;
    --color-nav-arrow:   #05466C;
    --color-nav-icon-bg: #0482C6;
}


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

.mm-page {
    background-image: none;
}

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);
}

.liste ul li {
    line-height: 1.5rem;
}


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

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

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

h2, h3 {
    font-size: 1.1rem;
}


/* ===========================================================
   3. LAYOUT / WRAPPER / HEADER
   =========================================================== */

#wrapper {
    max-width: 1060px;
    width: 98%;
    background: #fff;
    margin: 0 auto;
    z-index: 3;
    position: relative;
}

#header {
    padding: 3rem 2rem 2rem;
    color: var(--color-text);
    max-width: 1060px;
    z-index: 2;
    align-items: center;
}

#header .content-image {
    padding-right: 2rem;
    border-right: 1px solid #ccc;
}

#header .content-text,
#header .ce_text {
    font-size: .9rem;
    line-height: 1.1rem;
    color: #777;
    padding-left: 2rem;
}

#header .content-text p,
#header > div.ce_text.last.block > p {
    margin-top: 0;
    margin-bottom: 0;
}

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

#header h1,
#header .content-text .rte p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-variant: small-caps;
}

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

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

@media (min-width: 769px) {
    .mod_article {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}


/* ===========================================================
   4. STARTSEITEN-LAYOUT (3-spaltig)
   -----------------------------------------------------------
   .content
     └─ .content-links   (Hauptspalte, ~2/3 Breite ab Tablet)
          └─ .aktuelles-items   (Nachrichtenmodul)
               └─ .layout_short  (einzelne News, 2 Unterspalten
                                   ab Tablet)
     └─ .info            (Infospalte, ~1/3 Breite ab Tablet)

   Mobile: alles einspaltig untereinander.
   Ab Tablet (769px): .content-links / .info nebeneinander,
   innerhalb .content-links die News zusätzlich 2-spaltig.

   Nur die Startseite nutzt .aktuelles-items – auf allen
   anderen Seiten mit .content-links + .info bleibt die
   Nachrichten-2-Spalten-Regel wirkungslos, da dort kein
   .aktuelles-items existiert.
   =========================================================== */

.content {
    display: flex;
    flex-direction: column;
    padding: .5rem;
}

.content-folgeseiten {
    display: flex;
    flex-direction: column;
}

.content-links {
    width: 100%;
    padding: 0 0 2rem;
    display: flex;
    flex-direction: column;
}

.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;
}

.info,
.reSpalte {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* .reSpalte wird auf Folgeseiten statt .info für die rechte
   Spalte verwendet und hat zusätzlich vertikalen Abstand */
.reSpalte {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Nachrichtenmodul: mobil einspaltig */
.aktuelles-items {
    display: flex;
    flex-wrap: wrap;
}

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

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

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

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

div.ce_gallery.linkeSpalte {
    flex: 2.2;
}

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

@media (min-width: 769px) {
    .content,
    .content-folgeseiten {
        flex-direction: row;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .content {
        padding: 1rem;
    }

    .content-links {
        flex: 0 0 68%;
        max-width: 68%;
        padding: 0;
    }

    .content-links {
        padding-right: 1rem;
        padding-bottom: 2rem;
    }

    .info,
    .reSpalte {
        flex: 0 0 28%;
        max-width: 28%;
    }

    /* Nachrichtenmodul: 2 Spalten nebeneinander */
    .aktuelles-items {
        gap: 2rem;
    }

    .aktuelles-items .layout_short {
        width: calc(50% - 1rem);
    }

    .aktuelles-items .layout_short.even {
        margin-bottom: 1rem;
        border-bottom: none;
        padding-bottom: 0;
    }
}


/* ===========================================================
   5. INFO-BOXEN
   =========================================================== */

.info-items {
    color: #666;
    margin: 0;
    padding: 1.2rem 1.8rem;
    background: var(--color-grey-light);
    transition: all .2s ease-in-out;
    min-height: 10rem;
    width: 100%;
    box-sizing: border-box;
}

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

.info-items:hover h2,
.info-items:hover a,
.mod_subscribe.info-items > h2:hover {
    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;
}

/* Aktuelles-Archiv (Detailseite eines News-Beitrags) */
.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 figure.image_container.float_right {
    width: 60%;
}

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


/* ===========================================================
   6. TERMINE / TERMIN-SIDEBAR (externe Einbindung von
      luftsport-sh.de, siehe Kalender-Integrations-Doku)
   =========================================================== */

.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 .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;
}

/* Termin-Sidebar (externe Termine von luftsport-sh.de) */
.termin-sidebar-eintrag a:hover div,
#termine-sidebar.info-items:hover div {
    color: #fff !important;
}

.info-items .termin-sidebar-eintrag a:hover {
    font-weight: normal !important;
    text-decoration: underline !important;
}


/* ===========================================================
   7. 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);
}


/* ===========================================================
   8. AKKORDEON (Contao-Inhaltselement ce_accordion)
   =========================================================== */

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

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

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


/* ===========================================================
   9. ICONS / KONTAKT
   =========================================================== */

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

p.tel, p.mobil, p.fax {
    letter-spacing: .05rem;
}

.float_right > img,
.content-text.media--right figure img,
.content-text.media--right > img {
    padding-left: 1rem;
}

.content-text.media--left figure img,
.content-text.media--left > img {
    padding-right: 1rem;
}

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

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

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

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

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

.liste li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f138';
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    margin-right: 0.8rem;
    color: var(--color-grey-mid);
}

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

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

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

.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;
}


/* ===========================================================
   10. 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;
}


/* ===========================================================
   11. FOOTER
   =========================================================== */

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

#footer p {
    color: #444;
    letter-spacing: .05rem;
}

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

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

@media (min-width: 1200px) {
    
body{
    background-image: url("/files/Bilder/Seitenaufbau/bg_ueber_den_wolken.jpg");
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position: left top;
    background-attachment: fixed;
    }
    
    #footer {
        padding: 2rem 3rem;
        flex-direction: row;
        justify-content: space-between;
    }
}


/* ===========================================================
   12. FORMULARE (allgemein, gilt für alle Formulare)
   =========================================================== */

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

#anmeldung .select,
#anmeldung select {
    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;
}

.radio_container,
.checkbox_container {
    display: flex;
    flex-direction: column;
}

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

::placeholder {
    color: #fff;
}

@media (max-width: 768px) {
    select {
        width: 50%;
    }

    .liste ul {
        width: 100%;
    }
}