/* =====================================================================
   DRK Neureut – Stylesheet für externe HiOrg-Seiten
   (Öffentliche Termine, Dienst-Anforderung, Kursliste, Anmeldeformular)

   Version 2 – 25.09.2026
   Änderungen gegenüber Version 1:
   - Neu: Abschnitt "Öffentliche Termine" (table.midtable) – Rahmen,
     Zeilenabstände, Zebra-Streifen, Datum/Zeit ohne Zeilenumbruch
   - Tabellenschrift 14px (Seitenschrift bleibt 15px), damit die
     Terminliste nicht umbricht
   - Layout-Rahmen (table.maintable / td.menuecol) abgesichert, falls
     HiOrg das Standard-Stylesheet durch dieses ersetzt
   - Handy: Terminliste horizontal scrollbar statt gequetscht
   ===================================================================== */

:root {
    --drk-rot:        #E60005;  /* DRK-Rot – gegen CD-Leitfaden prüfen */
    --drk-rot-dunkel: #B80004;  /* Hover/aktiv */
    --drk-rot-hell:   #FDE8E8;  /* markierte Zeilen, Hinweise */
    --text:           #222222;
    --text-grau:      #5A5A5A;
    --linie:          #D9D9D9;
    --flaeche:        #F4F4F4;
    --weiss:          #FFFFFF;
    --schrift: "Open Sans", Arial, Helvetica, sans-serif;
    --radius: 4px;
}

/* ---------- Grundlayout ---------- */
body {
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--weiss);
    margin: 0;
    padding: 16px;
}

h1, h2, #tnmeld_ueberschrift {
    font-family: var(--schrift);
}

h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--weiss);
    background-color: var(--drk-rot);
    text-align: left;
    padding: 12px 16px;
    margin: 0 0 20px;
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--drk-rot);
    margin: 24px 0 12px;
}

hr {
    border: 0;
    height: 2px;
    background-color: var(--drk-rot);
    color: var(--drk-rot);
}

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

/* ---------- Seitenrahmen (Menüspalte + Inhalt) ---------- */
table.maintable {
    width: 100%;
    max-width: 1200px;
    border-collapse: collapse;
    margin: 0 auto;
}

table.maintable > tbody > tr > td {
    vertical-align: top;
}

td.menuecol {
    width: 180px;
    padding: 0 12px 12px 0;
}

td.maincol {
    padding: 0 0 0 20px;
}

/* ---------- Links ---------- */
a, a:visited {
    color: var(--drk-rot);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--drk-rot-dunkel);
    text-decoration: underline;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--drk-rot);
    outline-offset: 2px;
}

a.link_anmeldung {
    color: var(--drk-rot);
    font-weight: 700;
}

/* ---------- Tabellen (Kursliste) ---------- */
table.kurstab {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border-color: var(--linie);
}

table.kurstab td, table.kurstab th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--linie);
}

/* ---------- Öffentliche Termine (termine.php) ---------- */
table.midtable {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--linie);
    border-top: 3px solid var(--drk-rot);
    font-size: 14px;
    line-height: 1.4;
    background-color: var(--weiss);
}

table.midtable th {
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    color: var(--text);
    background-color: var(--flaeche);
    padding: 8px 10px;
    border-bottom: 1px solid var(--linie);
}

table.midtable td {
    font-size: 14px;
    padding: 7px 10px;
    vertical-align: top;
    border-bottom: 1px solid var(--linie);
}

/* Datum und Uhrzeit nicht umbrechen */
table.midtable td:nth-child(1),
table.midtable td:nth-child(2) {
    white-space: nowrap;
}

/* HiOrg setzt im Datum ein <wbr> – sonst bricht "2026" trotzdem um */
table.midtable wbr {
    display: none;
}

/* Datum etwas hervorheben */
table.midtable td:nth-child(1) {
    font-weight: 600;
}

/* Kartensymbol mit Abstand zum Ort */
table.midtable .karten_link_termine {
    margin-left: 8px;
}

/* "Details"-Spalte rechtsbündig */
table.midtable td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* Zebra-Streifen nur bei Zeilen ohne eigene Kategoriefarbe */
table.midtable tr.col1:nth-child(even) {
    background-color: #FAFAFA;
}

table.midtable tr:hover {
    background-color: var(--drk-rot-hell);
}

/* ---------- Zeilenfarben ---------- */
.colA { background-color: var(--weiss); }
.colB { background-color: var(--flaeche); }
.col1 { background-color: #FFFFFF; }   /* Termine */
.col2 { background-color: #FBEAEA; }   /* Einsätze */
.col3 { background-color: #F4F4F4; }   /* Kurse */
/* .col4 – .col19: Kategoriefarben aus HiOrg bewusst unverändert */

tr.mouse { background-color: var(--drk-rot-hell); }
tr.klick { background-color: #F8CFCF; }
tr.trenn { background-color: #E6E6E6; }

/* ---------- Meldungen ---------- */
div.fehler, #anmeldung-container #fehler, #externe-kursliste #fehler {
    background-color: var(--drk-rot);
    color: var(--weiss);
    border: 0;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    padding: 12px;
}

span.fehlertext {
    background-color: var(--drk-rot);
    color: var(--weiss);
    border-radius: var(--radius);
    padding: 2px 6px;
}

div.info {
    background-color: var(--flaeche);
    color: var(--text);
    border: 0;
    border-left: 4px solid var(--drk-rot);
    border-radius: var(--radius);
    font-size: 14px;
    text-align: left;
    padding: 10px 12px;
}

/* =====================================================================
   Externe Kursliste
   ===================================================================== */
#externe-kursliste, #anmeldung-container {
    font-family: var(--schrift);
    color: var(--text);
    max-width: 960px;
}

#externe-kursliste #div-ueberschrift {
    font-size: 1.75rem;
    color: var(--drk-rot);
    border-bottom: 3px solid var(--drk-rot);
    padding-bottom: 8px;
}

#externe-kursliste #div-vorwort,
#externe-kursliste .kurstyp-kurz-beschr {
    font-size: 15px;
    color: var(--text);
}

#externe-kursliste .kurstypen .kurstyp-container:not(:last-child),
#externe-kursliste .termine-container {
    border-bottom: 1px solid var(--linie);
}

#externe-kursliste .kurstyp-bezeichnung,
#externe-kursliste .kurstyp-bezeichung {
    font-size: 1.15rem;
    color: var(--text);
}

#externe-kursliste .termine-monat {
    font-size: 1.2rem;
    color: var(--drk-rot);
    border-left: 4px solid var(--drk-rot);
    padding-left: 10px;
}

#externe-kursliste .termine-start-ende-datum,
#externe-kursliste .lehrgangsdauer-normal,
#externe-kursliste .lehrgangsdauer-fett {
    font-size: 14px;
}

#externe-kursliste .div-termine-zeit,
#externe-kursliste .kurs-ort,
#externe-kursliste .kurs-ausbilder,
#externe-kursliste .kurs-bemerkung,
#externe-kursliste .freie-plaetze-container {
    font-size: 13px;
    color: var(--text-grau);
}

#externe-kursliste .keine-termine,
#externe-kursliste #keine-kurse-text {
    color: var(--text-grau);
}

/* ---------- Buttons ----------
   !important nur bei Farben, weil die Button-Farbe im HiOrg-Original
   nicht in dieser Datei steht (vermutlich Inline oder zweite CSS-Datei). */
#externe-kursliste a, #anmeldung-container a {
    border-radius: var(--radius);
}

#externe-kursliste a.buttons,
#externe-kursliste a.button-anmelden,
#externe-kursliste .btn-anmelden,
#externe-kursliste .btn-anmeldeform,
#anmeldung-container #btn-senden,
#anmeldung-container #btn-senden-weitere-tn,
#anmeldung-container #btn-weitere-tn,
#anmeldung-container #btn-vertrag-abschliessen {
    background-color: var(--drk-rot) !important;
    color: var(--weiss) !important;
    border: 0;
    font-weight: 700;
    height: auto;
    min-height: 44px;           /* Touch-Ziel */
    box-sizing: border-box;
    text-decoration: none;
}

#externe-kursliste a.buttons:hover,
#externe-kursliste a.button-anmelden:hover,
#externe-kursliste .btn-anmelden:hover,
#externe-kursliste .btn-anmeldeform:hover,
#anmeldung-container #btn-senden:hover,
#anmeldung-container #btn-senden-weitere-tn:hover,
#anmeldung-container #btn-weitere-tn:hover,
#anmeldung-container #btn-vertrag-abschliessen:hover {
    background-color: var(--drk-rot-dunkel) !important;
    text-decoration: none;
}

/* Sekundär-Buttons (Zurück/Weiter): weiß mit roter Kontur */
#externe-kursliste .button-zurueck,
#anmeldung-container .button-zurueck,
#anmeldung-container #button-weiter {
    background-color: var(--weiss) !important;
    color: var(--drk-rot) !important;
    border: 2px solid var(--drk-rot);
    width: auto;
    min-width: 120px;
    min-height: 44px;
    box-sizing: border-box;
}

#externe-kursliste .button-zurueck:hover,
#anmeldung-container .button-zurueck:hover,
#anmeldung-container #button-weiter:hover {
    background-color: var(--drk-rot-hell) !important;
}

/* =====================================================================
   Anmeldeformular
   ===================================================================== */
#anmeldung-container #titel,
#anmeldung-container #meine-daten,
#anmeldung-container .anmeld-best-title,
#anmeldung-container #anmeld-best-kurstyp {
    color: var(--drk-rot);
}

#anmeldung-container #kurs-zeiten,
#anmeldung-container .kurs-daten,
#anmeldung-container .kg-zusatz,
#anmeldung-container #rechnung-typ-text,
#anmeldung-container #gesamtpreis-zusatz,
#anmeldung-container #text-keine-gebuehr {
    font-size: 14px;
}

#anmeldung-container .daten-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-grau);
}

/* Eingabefelder: 16px verhindert Auto-Zoom auf iPhones */
#anmeldung-container input[type=text],
#anmeldung-container input[type=email],
#anmeldung-container input[type=tel],
#anmeldung-container input[type=date],
#anmeldung-container select {
    font-family: var(--schrift);
    font-size: 16px;
    color: var(--text);
    padding: 6px 8px;
    border: 1px solid #9A9A9A;
    border-radius: var(--radius);
    background-color: var(--weiss);
}

#anmeldung-container .daten-inhalt {
    height: 44px;
}

#anmeldung-container input[type=text]:focus,
#anmeldung-container select:focus {
    border-color: var(--drk-rot);
}

#anmeldung-container input[type=radio],
#anmeldung-container input[type=checkbox] {
    accent-color: var(--drk-rot);
    width: 18px;
    height: 18px;
}

/* Graue Flächen einheitlich */
#anmeldung-container #div-rechnungtyp,
#anmeldung-container #div-tn-daten,
#anmeldung-container #div-firma-daten,
#anmeldung-container .firma-pers-info,
#anmeldung-container #div-weitere-anmeldung-erfolgreich,
#anmeldung-container #anmeld-best {
    background-color: var(--flaeche);
    border-radius: var(--radius);
}

#anmeldung-container #tn-gesamtpreis {
    font-size: 1.3rem;
    color: var(--drk-rot);
}

#anmeldung-container .input_error_text,
#anmeldung-container #paypal-fehler-text {
    color: var(--drk-rot);
}

#anmeldung-container .div-zahlart {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    max-width: 100%;
    box-sizing: border-box;
}

#anmeldung-container .text-13 a:visited {
    color: var(--drk-rot);
}

/* =====================================================================
   Handy / Tablet
   ===================================================================== */
@media (max-width: 768px) {
    body {
        padding: 12px;
        font-size: 16px;
    }

    h1 {
        font-size: 1.35rem;
    }

    table.kurstab,
    table.midtable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menüspalte über den Inhalt statt daneben */
    table.maintable,
    table.maintable > tbody,
    table.maintable > tbody > tr,
    td.menuecol,
    td.maincol {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    td.menuecol {
        padding: 0 0 12px;
    }

    td.maincol {
        padding: 0;
    }

    /* Kursliste: Spalten untereinander statt nebeneinander */
    #externe-kursliste #div-vorwort,
    #externe-kursliste #div-img-ueberschrift,
    #externe-kursliste .kurstyp-bez-beschr,
    #externe-kursliste .div-kurstyp-img,
    #externe-kursliste .termine-datum-container,
    #externe-kursliste .termine-kurs,
    #externe-kursliste .termine-button-anmeld-plaetze,
    #externe-kursliste .kurs-ort-container {
        display: block;
        width: 100%;
        text-align: left;
    }

    #externe-kursliste #div-vorwort {
        margin-bottom: 20px;
    }

    #externe-kursliste #img-ueberschrift,
    #externe-kursliste .div-kurstyp-img img {
        max-width: 160px;
    }

    #externe-kursliste .termine-kurs {
        margin: 8px 0;
    }

    #externe-kursliste .btn-anmelden,
    #externe-kursliste a.button-anmelden,
    #externe-kursliste a.buttons {
        width: 100%;
    }

    /* Formular: alle Felder volle Breite */
    #anmeldung-container .block-1-4,
    #anmeldung-container .block-1-2,
    #anmeldung-container .block-3-4 {
        flex: 0 0 100%;
    }

    #anmeldung-container .daten-reihe {
        gap: 0;
    }

    #anmeldung-container #kurs-daten-text,
    #anmeldung-container #kurs-daten-img,
    #anmeldung-container #firma-anschrift-disabled,
    #anmeldung-container #firma-daten-bearbeiten,
    #anmeldung-container #text-anmeldung-erfolgreich,
    #anmeldung-container #anmeld-best-text,
    #anmeldung-container #div-veranstort-adresse {
        display: block;
        width: 100%;
        text-align: left;
        margin-left: 0;
    }

    #anmeldung-container #kursbild-img {
        max-width: 160px;
        margin-top: 16px;
    }

    #anmeldung-container #div-tn-daten,
    #anmeldung-container #div-firma-daten {
        padding: 16px;          /* statt 20px 90px 20px 15% */
    }

    #anmeldung-container #anmeld-best-text-container {
        padding: 20px 16px;
    }

    #anmeldung-container .firma-pers-info {
        padding-left: 16px;
    }

    #anmeldung-container #div-kursinfos-gesamtpreis,
    #anmeldung-container #paypal-fehler,
    #anmeldung-container #paypal-text,
    #anmeldung-container #btn-zurueck-anmeld-erfolgreich {
        margin-left: 0;
    }

    #anmeldung-container #rechnung-typ-text {
        width: calc(100% - 40px);
    }

    /* Buttons untereinander, volle Breite */
    #anmeldung-container #div-btns {
        text-align: left;
    }

    #anmeldung-container #btn-senden,
    #anmeldung-container #btn-senden-weitere-tn,
    #anmeldung-container #btn-vertrag-abschliessen,
    #anmeldung-container #btn-zurueck,
    #anmeldung-container .button-zurueck,
    #anmeldung-container #button-weiter,
    #anmeldung-container .div-zahlart,
    #anmeldung-container #paypal-button-container {
        display: block;
        width: 100%;
        margin: 10px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}