/*
 * Modernes Erscheinungsbild der Vereinsseite.
 *
 * Liegt als zusätzliche Schicht über den alten Stylesheets (Stylesheet_2016.css,
 * Stundenplan.css, superfish.css) und wird in templates/fe_page.html5 als
 * letztes eingebunden. Zum Abschalten genügt es, die Zeile dort zu entfernen.
 *
 * Vereinsfarben bleiben: Blau #249AD2 und Dunkelblau #145372.
 * Keine externen Schriften (Datenschutz) – es wird die Systemschrift genutzt.
 */

:root {
    --svb-blue: #249ad2;
    --svb-blue-dark: #145372;
    --svb-blue-light: #e8f4fb;
    --svb-blue-soft: #f3f9fd;
    --svb-text: #1f2d3a;
    --svb-muted: #5b6b7a;
    --svb-border: #d5e3ee;
    --svb-card: #ffffff;
    --svb-radius: 12px;
    --svb-radius-sm: 8px;
    --svb-shadow: 0 1px 2px rgba(16, 42, 67, .06), 0 4px 16px rgba(16, 42, 67, .08);
    --svb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- Grundlagen */

html,
body {
    min-height: 100%;
    height: auto;
}

body {
    background: linear-gradient(180deg, var(--svb-blue) 0, #1f8cc0 420px, #e9f2f8 420px, #e9f2f8 100%);
    background-attachment: scroll;
    color: var(--svb-text);
    font: 16px/1.55 var(--svb-font);
    -webkit-font-smoothing: antialiased;
}

#wrapper {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 12px 24px;
}

a {
    color: #0f6ea3;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--svb-blue-dark);
}

h1,
h2,
h3 {
    color: var(--svb-blue-dark);
    font-family: var(--svb-font);
    line-height: 1.25;
    letter-spacing: -.01em;
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: .2em 0 .6em;
}

h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 1.2em 0 .5em;
}

h3 {
    font-size: 1.1rem;
    font-weight: 600;
}

.teaser,
.ce_text p,
.ce_text li {
    font-size: 16px;
    line-height: 1.6;
    word-spacing: normal;
}

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

/* ------------------------------------------------------------------- Karten */

#frontcontainer,
div.mod_article,
div.mod_newslist div.layout_latest,
div.mod_eventlist,
div.gallery_creator,
div#galleryContainer,
div#main div.teamwear {
    margin: 0 0 16px;
    padding: 20px 24px;
    background: var(--svb-card);
    border: 0;
    border-radius: var(--svb-radius);
    box-shadow: var(--svb-shadow);
}

#right div.mod_eventlist,
#right div.mod_article {
    padding: 16px 18px;
}

#right h1 {
    font-size: 1.1rem;
}

/* Keine Abstände über der ersten Überschrift einer Karte */
div.mod_article > :first-child,
div.mod_article > :first-child > h1:first-child,
div.mod_eventlist > h1:first-child,
.mod_eventlist > :first-child {
    margin-top: 0;
}

/* Im Editor sehr klein gesetzter Text (z. B. "gültig ab …") etwas lesbarer */
.rte span[style*="8pt"] {
    color: var(--svb-muted);
    font-size: 13px !important;
}

div.mod_newslist div.layout_latest figure img,
.ce_text figure img,
.image_container img {
    border-radius: var(--svb-radius-sm);
}

p.info {
    color: var(--svb-muted);
    font-size: 14px;
}

/* -------------------------------------------------------------------- Kopf */

#bereich2 {
    margin-top: 12px;
}

/* Kopfbild auf volle Breite (der Slider ist auf 99 % eingestellt) */
#bereich2 div.mod_rocksolid_slider {
    width: 100% !important;
}

div.mod_rocksolid_slider {
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--svb-radius);
    overflow: hidden;
    box-shadow: var(--svb-shadow);
}

/* Abstand zwischen Hauptinhalt und rechter Spalte (nur am Desktop, am Handy stehen sie untereinander) */
@media (min-width: 768px) {
    #container:has(#right) #main > .inside {
        padding-right: 20px;
    }

    #container:has(#left) #main > .inside {
        padding-left: 20px;
    }
}

/*
 * Layouts mit eingestellter, aber leerer Seitenspalte (z. B. "Traingszeiten"):
 * Contao reserviert trotzdem Platz – den nehmen wir weg, damit der Inhalt
 * bündig mit Kopf und Menü abschließt.
 */
#container:not(:has(#right)) {
    padding-right: 0 !important;
}

#container:not(:has(#left)) {
    padding-left: 0 !important;
}

/* Sponsoren-Slider in der rechten Spalte als Karte */
#right div.mod_rocksolid_slider {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: var(--svb-card);
}

#container {
    top: 0;
    margin-top: 12px;
}

/* --------------------------------------------------------------- Navigation */

NAV#fishnavi {
    margin: 12px 0 0;
}

.mod_navigation ul.sf-menu {
    float: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 4px;
    background: var(--svb-blue-dark);
    border: 0;
    border-radius: var(--svb-radius);
    box-shadow: var(--svb-shadow);
}

.sf-menu > li {
    background: transparent;
    border-radius: var(--svb-radius-sm);
}

.sf-menu > li > a,
.sf-menu > li > span.active,
.sf-menu > li > strong {
    display: block;
    border: 0;
    border-radius: var(--svb-radius-sm);
    color: #fff;
    font-weight: 500;
    padding: .7em 1em;
}

.sf-menu > li:hover,
.sf-menu > li.sfHover,
.sf-menu > li.active,
.sf-menu > li.trail {
    background: rgba(255, 255, 255, .14);
}

.sf-menu ul {
    padding: 6px;
    background: #fff;
    border-radius: var(--svb-radius-sm);
    box-shadow: 0 8px 24px rgba(16, 42, 67, .18);
}

.sf-menu ul li,
.sf-menu ul ul li {
    background: transparent;
    border-radius: 6px;
}

.sf-menu ul li a,
.sf-menu ul li span.active,
.sf-menu ul li strong {
    border: 0;
    color: var(--svb-blue-dark);
    border-radius: 6px;
}

.sf-menu ul li:hover,
.sf-menu ul li.sfHover,
.sf-menu ul li.active {
    background: var(--svb-blue-light);
}

.sf-arrows .sf-with-ul:after {
    border-top-color: rgba(255, 255, 255, .7);
}

.sf-arrows ul .sf-with-ul:after {
    border-left-color: var(--svb-blue);
}

/* ------------------------------------------------------------------- Fußzeile */

#footer {
    padding: 16px 0 8px;
    font-weight: 500;
}

#footer ul.level_1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 24px;
}

#footer ul.level_1 li {
    float: none;
    margin: 0;
}

#footer ul.level_1 li a,
#footer ul.level_1 li strong {
    color: var(--svb-blue-dark);
}

/* --------------------------------------------------------------- Formulare */

form .formbody {
    max-width: 560px;
}

.widget {
    margin: 0 0 16px;
}

.widget.widget-text,
.widget.widget-textarea {
    max-width: none;
}

label,
.widget legend {
    display: block;
    margin: 0 0 6px;
    color: var(--svb-text);
    font-size: 14px;
    font-weight: 600;
}

.widget legend {
    padding: 0;
}

.widget fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

span.mandatory {
    color: #c0392b;
    margin-left: 2px;
}

select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="url"] {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #c4d3df;
    border-radius: var(--svb-radius-sm);
    color: var(--svb-text);
    font: 16px/1.4 var(--svb-font);
    transition: border-color .15s, box-shadow .15s;
}

textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

select {
    appearance: none;
    padding-right: 36px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23145372' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
}

select:focus,
textarea:focus,
input:focus {
    outline: none;
    border-color: var(--svb-blue);
    box-shadow: 0 0 0 3px rgba(36, 154, 210, .25);
}

/* Checkboxen und Radios: Kästchen neben dem Text */
.checkbox_container > span,
.radio_container > span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox_container label,
.radio_container label {
    display: inline;
    margin: 0;
    font-weight: 400;
    font-size: 15px;
    color: var(--svb-text);
}

input[type="checkbox"],
input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--svb-blue-dark);
}

/* Absende-Knopf */
input[type="submit"],
button.submit,
.widget-submit button {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 220px;
    min-height: 48px;
    padding: 12px 28px;
    background: var(--svb-blue-dark);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(20, 83, 114, .3);
    color: #fff;
    cursor: pointer;
    font: 600 16px/1.2 var(--svb-font);
    text-shadow: none;
    transition: background .15s, transform .05s;
}

input[type="submit"]:hover,
button.submit:hover,
.widget-submit button:hover {
    background: #0e3f58;
}

input[type="submit"]:active,
button.submit:active,
.widget-submit button:active {
    transform: translateY(1px);
}

/* Fehlermeldungen von Contao */
p.error,
.widget.error input,
.widget.error select,
.widget.error textarea {
    border-color: #c0392b;
}

p.error {
    margin: 0 0 6px;
    color: #c0392b;
    font-size: 14px;
    font-weight: 600;
}

/* Kontaktformular (altes Layout mit .ce_form.tableless) */
.ce_form.tableless {
    width: 100%;
    margin-top: 0;
    font-family: var(--svb-font);
}

/* ---------------------------------------------------- Veranstaltungs-Anmeldung */

.mod_eventreader p.info,
.mod_eventreader .info {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    background: var(--svb-blue-light);
    border-radius: 999px;
    color: var(--svb-blue-dark);
    font-style: normal;
    font-weight: 600;
}

.booking-price {
    margin: 8px 0 16px;
}

.booking-total {
    margin: 4px 0 20px;
    padding: 14px 16px;
    background: var(--svb-blue-soft);
    border: 1px solid var(--svb-border);
    border-radius: var(--svb-radius-sm);
    font-size: 17px;
}

.booking-total span {
    color: var(--svb-blue-dark);
    font-weight: 700;
}

.booking-payment-hint {
    display: block;
    margin-top: 6px;
    color: var(--svb-muted);
    font-size: 14px;
    line-height: 1.45;
}

/* Hinweisboxen auf der Checkout-Seite */
.ceb-checkout .tl_confirm,
.ceb-checkout .tl_info,
.ceb-checkout .tl_error {
    margin: 0 0 16px;
    padding: 14px 18px;
    border-radius: var(--svb-radius-sm);
    border-left: 4px solid;
}

.ceb-checkout .tl_confirm {
    background: #eaf7ee;
    border-color: #2e9e5b;
}

.ceb-checkout .tl_info {
    background: var(--svb-blue-soft);
    border-color: var(--svb-blue);
}

.ceb-checkout .tl_error {
    background: #fdf0ee;
    border-color: #c0392b;
}

.ceb-checkout-data--table {
    border-collapse: collapse;
}

.ceb-checkout-data--table td {
    padding: 6px 16px 6px 0;
    border-bottom: 1px solid var(--svb-border);
}

.ceb-payment-button {
    display: inline-block;
    padding: 12px 28px;
    background: var(--svb-blue-dark);
    border-radius: 999px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
}

.ceb-payment-test {
    display: inline-block;
    padding: 4px 12px;
    background: #fff4d6;
    border-radius: 999px;
    font-size: 14px;
}

/* ---------------------------------------- Trainingszeiten: Wochenübersicht */

.timetable .timetable_navi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.timetable .timetable_navi div.head {
    float: none;
    width: auto;
    margin: 0;
    font-size: 15px;
}

.timetable .timetable_navi div.head a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--svb-blue-light);
    border-radius: 999px;
    color: var(--svb-blue-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.timetable .timetable_navi div.head a:hover {
    background: #d4eaf7;
}

/* Die nicht verlinkte Überschrift "Kalenderwoche 44 2026" in die Mitte */
.timetable .timetable_navi div.head.current:not(:has(a)) {
    flex: 1 1 auto;
    order: 2;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--svb-blue-dark);
}

.timetable .timetable_navi div.head.previous {
    order: 1;
}

.timetable .timetable_navi div.head.next {
    order: 3;
}

.timetable .timetable_navi div.head.current:has(a) {
    order: 4;
}

table.timetable_body {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 6px 0;
    table-layout: fixed;
}

table.timetable_body td,
table.timetable_body th {
    border: 0;
    vertical-align: top;
}

tr.timetable_days th {
    text-align: left;
    padding: 10px 8px;
    background: var(--svb-blue-dark);
    border-radius: var(--svb-radius-sm) var(--svb-radius-sm) 0 0;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

tr.timetable_days th .head {
    color: #fff;
}

tr.timetable_events td {
    min-height: 90px;
    height: 90px;
    padding: 6px;
    background: var(--svb-blue-soft);
    border-radius: 0 0 var(--svb-radius-sm) var(--svb-radius-sm);
}

/* Heute hervorheben (dunkleres Blau, damit weiße Schrift gut lesbar bleibt) */
tr.timetable_days th.today {
    background: #0c6a99;
}

tr.timetable_events td.today {
    background: #dff0fa;
    box-shadow: inset 0 0 0 2px var(--svb-blue);
}

tr.timetable_days th.weekend,
tr.timetable_days th.weekday {
    color: #fff;
}

.timetable .event {
    margin: 0 0 6px;
    padding: 8px 10px;
    background: #fff;
    border-left: 4px solid var(--svb-blue);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .08);
}

.timetable .event_title {
    margin: 0;
    color: var(--svb-blue-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.timetable .event_title span.event_time {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 2px;
    color: var(--svb-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
}

.timetable .event_location {
    margin-top: 2px;
    color: var(--svb-muted);
    font-size: 12px;
    text-align: left;
}

/* -------------------------------- Trainingszeiten: Tabelle "Übungsbetrieb" */

/*
 * Die Tabelle wird im Editor gepflegt und bringt feste Breiten, Höhen und
 * Farben als Inline-Styles mit. Diese werden hier überschrieben, damit sie
 * sich wie eine moderne Liste verhält und auf dem Handy umbricht.
 */
.ce_text .rte table {
    width: 100% !important;
    max-width: 900px;
    height: auto !important;
    border-collapse: collapse;
    margin: 8px 0 16px;
}

.ce_text .rte table tr,
.ce_text .rte table td {
    height: auto !important;
}

.ce_text .rte table td {
    padding: 8px 12px;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.45;
}

.ce_text .rte table td span {
    font-size: inherit !important;
}

.ce_text .rte table td:first-child {
    width: 34%;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ce_text .rte table td:nth-child(2) {
    width: 22%;
}

/* Einträge: dezentes Zebra statt kräftigem Hellblau */
.ce_text .rte table tr {
    border-bottom: 1px solid #edf3f8;
}

.ce_text .rte table tr[style*="99ccff"] {
    background: var(--svb-blue-soft) !important;
}

/* Gruppen-Überschriften (Schwimmkurse, Fortgeschrittene, …) */
.ce_text .rte table tr:has(strong) {
    background: transparent !important;
    border-bottom: 2px solid var(--svb-blue);
}

.ce_text .rte table tr:has(strong) td {
    padding-top: 22px;
    color: var(--svb-blue-dark);
    font-size: 16px;
}

.ce_text .rte table tr:has(strong) td:first-child {
    white-space: normal;
}

/* Abschnitts-Überschriften (grau hinterlegt im Editor) */
.ce_text .rte table tr[style*="c0c0c0"] {
    background: var(--svb-blue-dark) !important;
    border: 0;
}

.ce_text .rte table tr[style*="c0c0c0"] td {
    padding: 10px 12px;
    color: #fff;
    border-radius: 0;
}

/* Leerzeilen zwischen den Gruppen fallen weg, der Abstand kommt von der Überschrift */
.ce_text .rte table tr:not(:has(strong, a, span)) {
    display: none;
}

/* "Druckversion" als Knopf */
.ce_text .rte a[href$=".pdf"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--svb-blue-light);
    border-radius: 999px;
    color: var(--svb-blue-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.ce_text .rte a[href$=".pdf"]::before {
    content: "⤓";
}

/* ------------------------------------------------------- Barrierefreiheit */

/* "Zum Inhalt springen": unsichtbar, bis man mit der Tab-Taste darauf kommt */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 10000;
    padding: 10px 18px;
    background: #fff;
    border-radius: var(--svb-radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    color: var(--svb-blue-dark);
    font-weight: 700;
}

.skip-link:focus {
    top: 12px;
}

#main:focus {
    outline: none;
}

/* Deutlich sichtbarer Fokus bei Tastaturbedienung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #f5a623;
    outline-offset: 2px;
    border-radius: 4px;
}

.sf-menu a:focus-visible {
    outline-offset: -3px;
}

/* Untermenüs auch per Tastatur öffnen */
.sf-menu li:focus-within > ul {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Keine Animationen, wenn im System "Bewegung reduzieren" eingestellt ist */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ---------------------------------------------------------------- Handy */

@media (max-width: 767px) {
    body {
        background: linear-gradient(180deg, var(--svb-blue) 0, #1f8cc0 260px, #e9f2f8 260px, #e9f2f8 100%);
    }

    #wrapper {
        padding: 0 8px 16px;
    }

    #frontcontainer,
    div.mod_article,
    div.mod_newslist div.layout_latest,
    div.mod_eventlist,
    div.gallery_creator {
        padding: 16px;
    }

    h1 {
        font-size: 1.35rem;
    }

    /* Kopf: Wappen kleiner, Banner flacher */
    #bereich2 {
        height: auto !important;
    }

    div#bereich2 div.mod_randomImage img {
        width: 96px;
        height: 96px;
    }

    div.mod_rocksolid_slider {
        min-height: 120px;
    }

    /* Navigation: Einträge als Kacheln, zwei pro Zeile */
    .sf-menu > li {
        flex: 1 1 calc(50% - 4px);
    }

    .sf-menu > li > a,
    .sf-menu > li > span.active,
    .sf-menu > li > strong {
        padding: .65em .8em;
        font-size: 15px;
        white-space: normal;
    }

    /* Wochenübersicht: Tage untereinander, Tage ohne Training ausblenden */
    table.timetable_body,
    table.timetable_body tbody {
        display: grid;
        grid-template-columns: 1fr;
        border-spacing: 0;
    }

    table.timetable_body tr {
        display: contents;
    }

    table.timetable_body td,
    table.timetable_body th {
        display: block;
        width: auto;
        height: auto !important;
        min-height: 0;
    }

    tr.timetable_days th {
        margin-top: 10px;
    }


    tr.timetable_days th:nth-child(1) { order: 1; }
    tr.timetable_events td:nth-child(1) { order: 2; }
    tr.timetable_days th:nth-child(2) { order: 3; }
    tr.timetable_events td:nth-child(2) { order: 4; }
    tr.timetable_days th:nth-child(3) { order: 5; }
    tr.timetable_events td:nth-child(3) { order: 6; }
    tr.timetable_days th:nth-child(4) { order: 7; }
    tr.timetable_events td:nth-child(4) { order: 8; }
    tr.timetable_days th:nth-child(5) { order: 9; }
    tr.timetable_events td:nth-child(5) { order: 10; }
    tr.timetable_days th:nth-child(6) { order: 11; }
    tr.timetable_events td:nth-child(6) { order: 12; }
    tr.timetable_days th:nth-child(7) { order: 13; }
    tr.timetable_events td:nth-child(7) { order: 14; }

    /* Tage ohne Training: kurzer Hinweis statt leerer Fläche */
    tr.timetable_events td:not(:has(.event)) {
        padding: 8px 12px;
    }

    tr.timetable_events td:not(:has(.event)) .events::before {
        content: "Kein Training";
        color: var(--svb-muted);
        font-size: 14px;
    }

    .timetable .timetable_navi div.head.current:not(:has(a)) {
        flex-basis: 100%;
        order: 0;
    }

    /* Übungsbetrieb-Tabelle: jede Zeile als kleiner Block */
    .ce_text .rte table,
    .ce_text .rte table tbody {
        display: block;
    }

    .ce_text .rte table tr {
        display: flex;
        flex-wrap: wrap;
        gap: 0 12px;
        padding: 8px 10px;
    }

    .ce_text .rte table td {
        display: block;
        width: auto !important;
        padding: 0;
        white-space: normal !important;
    }

    .ce_text .rte table td:first-child {
        flex: 1 1 100%;
        font-weight: 600;
    }

    .ce_text .rte table tr:has(strong) td {
        padding-top: 14px;
    }

    .ce_text .rte table tr[style*="c0c0c0"] td {
        padding: 0;
    }

    /* Formulare: Knopf über die volle Breite */
    input[type="submit"],
    button.submit,
    .widget-submit button {
        width: 100%;
    }
}