/*
 * Gestaltung der Schnuppertage-Anmeldung der HTL Imst.
 *
 * Aufbau:
 *   1. Design-Tokens (Farben aus dem Schullogo, Abstände, Schrift)
 *   2. Grundlagen
 *   3. Kopfbereich und Seitenlayout
 *   4. Komponenten (Schritte, Karten, Auswahl, Formularfelder, Knöpfe, Hinweise)
 *   5. Hilfsklassen
 */

/* ------------------------------------------------------------------ 1. Tokens */
:root {
    color-scheme: light;

    /* Farben aus dem Logo (htllogo.png) */
    --blau: #6680cc;          /* Ellipse im Logo */
    --petrol: #b5d3d7;        /* heller Keil im Logo */
    --orange: #ff9900;        /* Punkt im Logo */

    /* Abgeleitete Töne mit ausreichendem Kontrast für Text und Knöpfe */
    --blau-dunkel: #34479a;
    --blau-hell: #e9eefa;
    --petrol-hell: #eef6f7;
    --petrol-dunkel: #2b6169;
    --orange-text: #9a5700;

    --text: #1b2236;
    --text-leise: #535c73;
    --linie: #d3d9e6;
    --flaeche: #ffffff;
    --hintergrund: #f4f6fb;
    --fehler: #b3261e;
    --fehler-hell: #fdeceb;
    --ok: #1d6f47;
    --ok-hell: #e7f5ee;

    --radius: 14px;
    --schatten: 0 1px 2px rgb(27 34 54 / 6%), 0 8px 24px rgb(27 34 54 / 7%);
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------- 2. Grundlagen */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--hintergrund);
}

h1, h2, h3 {
    line-height: 1.2;
    margin: 0 0 .5em;
}

h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a {
    color: var(--blau-dunkel);
    text-underline-offset: .15em;
}

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

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

[tabindex="-1"]:focus { outline: none; }

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

/* -------------------------------------------- 3. Kopfbereich und Seitenlayout */
.sprunglink {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--flaeche);
    padding: .5rem 1rem;
    z-index: 10;
}
.sprunglink:focus { left: 0; }

.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    position: relative;
}

/* Farbstreifen in den drei Logofarben */
.kopf::after {
    content: "";
    display: block;
    height: 6px;
    background: linear-gradient(90deg,
        var(--blau) 0 60%,
        var(--petrol) 60% 90%,
        var(--orange) 90% 100%);
}

.kopf__innen {
    max-width: 52rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kopf__logo {
    width: clamp(64px, 18vw, 96px);
    height: auto;
    flex: none;
}

.kopf__schule {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-leise);
}

.kopf__titel {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
    color: var(--blau-dunkel);
}

.seite {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
}

.seite--schmal { max-width: 28rem; }

.fuss {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0 1rem 2rem;
    color: var(--text-leise);
    font-size: .9rem;
}

.ladeanzeige { color: var(--text-leise); }

/* ---------------------------------------------------------- 4. Komponenten */
.einleitung {
    font-size: 1.1rem;
    color: var(--text-leise);
    max-width: 40rem;
}

/* Fortschrittsanzeige der drei Schritte */
.schritte {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    counter-reset: schritt;
}

.schritte__eintrag {
    flex: 1;
    counter-increment: schritt;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .85rem;
    color: var(--text-leise);
}

/* Balken über dem Text */
.schritte__eintrag::before {
    content: "";
    height: 6px;
    border-radius: 3px;
    background: var(--linie);
}

.schritte__eintrag--erledigt::before { background: var(--blau); }
.schritte__eintrag--aktuell::before { background: var(--orange); }
.schritte__eintrag--aktuell { color: var(--text); font-weight: 600; }

.schritte__eintrag span::before { content: counter(schritt) ". "; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: clamp(1rem, 3vw, 1.75rem);
    margin-bottom: 1.25rem;
}

.karte--info {
    background: var(--petrol-hell);
    border-color: var(--petrol);
    box-shadow: none;
    font-size: .95rem;
}
.karte--info h3 { color: var(--petrol-dunkel); }
.karte--info p:last-child { margin-bottom: 0; }

/* Auswahlkarten (Ausbildung) und Terminoptionen teilen sich das Grundmuster */
.auswahl {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    border: 0;
    margin: 0;
    padding: 0;
}

.auswahl__karte,
.option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .85rem;
    align-items: start;
    padding: 1rem;
    background: var(--flaeche);
    border: 2px solid var(--linie);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.auswahl__karte:hover,
.option:hover { border-color: var(--blau); }

.auswahl__karte:has(input:checked),
.option:has(input:checked) {
    border-color: var(--blau-dunkel);
    background: var(--blau-hell);
}

.auswahl__karte:has(input:focus-visible),
.option:has(input:focus-visible) {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

.auswahl__karte input,
.option input {
    grid-row: 1 / span 3;
    width: 1.35rem;
    height: 1.35rem;
    margin: .1rem 0 0;
    accent-color: var(--blau-dunkel);
}

.auswahl__titel,
.option__titel { font-weight: 700; }

.auswahl__text,
.option__text { color: var(--text-leise); font-size: .95rem; }

.auswahl__karte--gesperrt,
.option--gesperrt {
    cursor: not-allowed;
    background: #f1f2f5;
    color: var(--text-leise);
}
.auswahl__karte--gesperrt:hover,
.option--gesperrt:hover { border-color: var(--linie); }

.option-liste {
    display: grid;
    gap: .6rem;
    border: 0;
    margin: 0 0 1.5rem;
    padding: 0;
}

.option-liste legend {
    padding: 0;
    margin-bottom: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blau-dunkel);
}

.badge {
    display: inline-block;
    padding: .05rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: var(--petrol-hell);
    color: var(--petrol-dunkel);
    border: 1px solid var(--petrol);
}
.badge--knapp { background: #fff3df; color: var(--orange-text); border-color: var(--orange); }
.badge--voll { background: #eceef3; color: var(--text-leise); border-color: var(--linie); }

/* Formularfelder */
.feld { margin-bottom: 1.1rem; }

.feld label {
    display: block;
    font-weight: 600;
    margin-bottom: .3rem;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="password"] {
    width: 100%;
    font: inherit;
    padding: .7rem .8rem;
    border: 2px solid var(--linie);
    border-radius: 10px;
    background: var(--flaeche);
    color: var(--text);
}

.feld input:focus-visible { border-color: var(--blau-dunkel); outline-offset: 0; }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }

.feld__hilfe { margin: .3rem 0 0; font-size: .9rem; color: var(--text-leise); }
.feld__fehler { margin: .3rem 0 0; font-size: .9rem; color: var(--fehler); font-weight: 600; }

.zustimmung {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin: 1rem 0 .25rem;
    cursor: pointer;
}
.zustimmung input {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .15rem;
    flex: none;
    accent-color: var(--blau-dunkel);
}

/* Knöpfe */
.aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.knopf {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: .75rem 1.4rem;
    border: 2px solid var(--blau-dunkel);
    border-radius: 999px;
    background: var(--blau-dunkel);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.knopf:hover { background: #283a82; border-color: #283a82; }
.knopf[disabled] { opacity: .6; cursor: progress; }

.knopf--zweit { background: var(--flaeche); color: var(--blau-dunkel); }
.knopf--zweit:hover { background: var(--blau-hell); border-color: var(--blau-dunkel); }

.knopf--gefahr { background: var(--flaeche); border-color: var(--fehler); color: var(--fehler); }
.knopf--gefahr:hover { background: var(--fehler-hell); border-color: var(--fehler); }

.knopf--klein { padding: .35rem .9rem; font-size: .9rem; }

/* Hinweise */
.hinweis {
    padding: .8rem 1rem;
    border-radius: 10px;
    border: 1px solid;
    margin: 0 0 1.25rem;
}
.hinweis--fehler { background: var(--fehler-hell); border-color: var(--fehler); color: #7d1a14; }
.hinweis--ok { background: var(--ok-hell); border-color: var(--ok); color: #14502f; }
.hinweis--warnung { background: #fff3df; border-color: var(--orange); color: #6b3d00; }

/* Zusammenfassung (Schritt 3 und Anmeldeübersicht) */
.zusammenfassung {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.zusammenfassung__eintrag {
    display: grid;
    gap: .1rem;
    padding: .8rem 1rem;
    border-left: 6px solid var(--blau);
    background: var(--blau-hell);
    border-radius: 0 10px 10px 0;
}
.zusammenfassung__titel { font-weight: 700; }
.zusammenfassung__zeit { color: var(--text-leise); }

.erfolgssymbol {
    display: inline-grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--ok);
    color: #fff;
    font-weight: 700;
    margin-bottom: .5rem;
}

/* ------------------------------------------------------------ 5. Hilfsklassen */
.nur-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Honeypot-Feld: für Menschen unsichtbar, von Bots ausgefüllt */
.honig {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.klein { font-size: .9rem; color: var(--text-leise); }