/* Gestaltung der oeffentlichen Nikolausfahrt-Seiten (Buchung, FAQ, Danke-Seite).
 *
 * Die Werte sind aus dkbm.de uebernommen: Die Vereinsseite laeuft auf WordPress mit
 * dem Astra-Theme, dessen Farbpalette dort als --ast-global-color-0..8 im Kopf der
 * Seite steht. Die Namen unten sind sprechend, die Zahl in Klammern nennt jeweils die
 * Astra-Variable, damit ein spaeterer Abgleich mit der Vereinsseite moeglich bleibt.
 */

:root {
    /* Palette von dkbm.de */
    --dkbm-gruen:        #0e7c01;  /* ast-global-color-0: Links, Buttons        */
    --dkbm-gruen-hell:   #38d200;  /* ast-global-color-1: Hover, mit schwarz    */
    --dkbm-ueberschrift: #1e293b;  /* ast-global-color-2                        */
    --dkbm-text:         #334155;  /* ast-global-color-3                        */
    --dkbm-creme:        #fdf8e3;  /* Inhaltsboxen (ast-separate-container)     */
    --dkbm-creme-tief:   #f5efd5;  /* ast-global-color-4: Seite und Kopfleiste  */
    --dkbm-linie:        #d1d5db;  /* ast-global-color-7: feine Trennlinien     */
    --dkbm-eingabe:      #475569;  /* Astra: Textfarbe in Formularfeldern       */

    /* Meldungen. Das Gruen kommt aus der Palette, das Rot ist auf den cremefarbenen
       Hintergrund abgestimmt statt aus dem Bootstrap-Standard uebernommen. */
    --dkbm-erfolg-flaeche: #eaf5e5;
    --dkbm-erfolg-text:    #0b5c01;
    --dkbm-fehler:         #b3261e;
    --dkbm-fehler-flaeche: #fbeae8;

    /* Schrift wie auf dkbm.de: derselbe System-Stack, 16px, Zeilenhoehe 1.65. */
    --dkbm-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-base: 1rem;

    --radius: 4px;
    --schatten: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --gap: 20px;

    /* Astra: --ast-narrow-container-width. Die Buchung ist eine Formularseite und
       bleibt damit so breit wie ein Blogbeitrag auf der Vereinsseite. */
    --breite: 750px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--dkbm-schrift);
    font-size: var(--font-base);
    line-height: 1.65;
    color: var(--dkbm-text);
    background-color: var(--dkbm-creme-tief);
    margin: 0;
    padding: 0;
}

/* --- Kopf- und Fussleiste ------------------------------------------------- */

/* Nachbau der Kopfleiste von dkbm.de: cremefarbene Flaeche, 1px Linie nach unten,
   Mindesthoehe 80px. Bewusst nur Text - ein eingebundenes Logo waere ein Verweis auf
   eine Datei der Vereinsseite und liesse die Buchung mitscheitern, wenn die Adresse
   dort einmal wechselt. */
.site-header {
    background-color: var(--dkbm-creme-tief);
    border-bottom: 1px solid var(--dkbm-linie);
}

.site-header-inner {
    max-width: 1200px;             /* Astra: --ast-normal-container-width */
    width: 90%;
    min-height: 80px;
    margin: 0 auto;
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.site-title {
    margin: 0;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
}

.site-title a {
    color: var(--dkbm-ueberschrift);
    text-decoration: none;
}

.site-title a:hover,
.site-title a:focus-visible {
    color: var(--dkbm-gruen);
}

.site-description {
    margin: 2px 0 0;
    font-size: 0.9375rem;          /* Astra: 15px */
    color: var(--dkbm-text);
}

.site-footer {
    max-width: var(--breite);
    width: 90%;
    margin: 0 auto 40px;
    padding-top: 20px;
    border-top: 1px solid var(--dkbm-linie);
    font-size: 0.875rem;
    text-align: center;
}

/* --- Inhaltsbox ---------------------------------------------------------- */

/* Entspricht .ast-separate-container auf dkbm.de: cremefarbener Kasten auf leicht
   dunklerem Grund. */
.container,
.box {
    max-width: var(--breite);
    width: 90%;
    margin: 40px auto;
    background-color: var(--dkbm-creme);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.box {
    text-align: center;
}

/* --- Schrift ------------------------------------------------------------- */

h1,
h2,
h3 {
    color: var(--dkbm-ueberschrift);
    font-weight: 600;              /* Astra setzt alle Ueberschriften auf 600 */
    margin-top: 0;
}

h1 {
    font-size: clamp(1.875rem, 4vw, 2.25rem);  /* Astra: 30px mobil, 36px Desktop */
    line-height: 1.4;
    margin-bottom: 25px;
}

h2 {
    font-size: clamp(1.5625rem, 3vw, 1.875rem);
    line-height: 1.3;
    margin-bottom: 20px;
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
}

.seiten-titel {
    text-align: center;
    margin-bottom: 30px;
}

a {
    color: var(--dkbm-gruen);
}

/* dkbm.de faerbt Links im Hover auf das helle Gruen um. Als Textfarbe auf dem
   cremefarbenen Grund ist das kaum noch zu lesen, deshalb bleibt hier die Farbe
   stehen und der Hover unterstreicht. Das helle Gruen kommt als Flaeche unter den
   Buttons zum Einsatz, wo es mit schwarzer Schrift gut lesbar ist. */
a:hover,
a:focus-visible {
    color: var(--dkbm-gruen);
    text-decoration: underline;
}

.hinweis {
    margin-top: 10px;
    font-size: 0.875rem;
    color: var(--dkbm-text);
}

/* --- Formular ------------------------------------------------------------ */

form {
    display: grid;
    gap: var(--gap);
}

.form-group {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
    color: var(--dkbm-ueberschrift);
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;            /* Astra-Formularfelder */
    font-family: inherit;
    font-size: 1rem;
    line-height: 24px;
    color: var(--dkbm-eingabe);
    background-color: #ffffff;
    border: 1px solid var(--dkbm-linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

/* Astra gibt einzeiligen Feldern eine feste Hoehe von 40px, dem Textfeld nicht. */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select {
    height: 40px;
    /* 7 + 24 (line-height) + 7 + 2 (Rahmen) = 40px, sonst wird der Text beschnitten. */
    padding-top: 7px;
    padding-bottom: 7px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--dkbm-gruen);
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 124, 1, 0.15);
}

select:disabled {
    background-color: #f4f4f4;
    color: #757575;
    cursor: not-allowed;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

@media (max-width: 700px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;   /* verhindert fette Schrift */
    color: var(--dkbm-text);
}

.checkbox-label input[type="checkbox"] {
    margin: 0;             /* entfernt den Browser-Standardabstand */
    width: auto;
    height: auto;
    transform: scale(1.2);
    accent-color: var(--dkbm-gruen);
}

/* --- Buttons ------------------------------------------------------------- */

/* Farben und Hover-Verhalten wie auf dkbm.de: dunkelgruene Flaeche mit weisser
   Schrift, im Hover das helle Gruen mit schwarzer Schrift. */
button,
.button-link {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--dkbm-gruen);
    border: 1px solid var(--dkbm-gruen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button:hover,
button:focus-visible,
.button-link:hover,
.button-link:focus-visible {
    color: #111111;
    background-color: var(--dkbm-gruen-hell);
    border-color: var(--dkbm-gruen-hell);
    text-decoration: none;
}

/* Auf der Danke-Seite ist der Button ein einzelner Verweis und soll nicht ueber die
   ganze Breite laufen. */
.box .button-link {
    width: auto;
    margin-top: 30px;
}

/* --- Meldungen ----------------------------------------------------------- */

.message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    font-size: 1rem;
}

.success {
    background-color: var(--dkbm-erfolg-flaeche);
    color: var(--dkbm-erfolg-text);
    border-left: 5px solid var(--dkbm-gruen);
}

.error {
    background-color: var(--dkbm-fehler-flaeche);
    color: var(--dkbm-fehler);
    border-left: 5px solid var(--dkbm-fehler);
}

.message a {
    color: inherit;
}

/* Meldung unter einem einzelnen Feld. Sie ersetzt die Sprechblase des Browsers, die
   nach einem gescheiterten Absenden bei jedem Tastendruck erneut aufblitzte
   (siehe js/nikolausfahrt.js). */
.feld-fehler {
    margin: 6px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dkbm-fehler);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--dkbm-fehler);
}

input[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
    border-color: var(--dkbm-fehler);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15);
}

/* --- FAQ ----------------------------------------------------------------- */

.faq-item {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dkbm-linie);
}

.faq-item:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.faq-item h3 {
    margin: 0 0 8px 0;
}

.faq-item p {
    margin: 0;
}

.back-link {
    margin-top: 30px;
    text-align: center;
}

.back-link a {
    font-weight: 600;
    text-decoration: none;
}

/* --- Danke-Seite --------------------------------------------------------- */

.box img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-bottom: 30px;
}

.box h1 {
    color: var(--dkbm-gruen);
}

.box p {
    font-size: 1.0625rem;
}

@media (max-width: 600px) {
    .container,
    .box {
        padding: 20px;
    }
}