@import url('schrift.css');

/* --------------------------------------------------------------
   KOMÜKA Talentabend – Anmeldung

   Farben aus der bestehenden Vereinswebsite komueka.de übernommen,
   nicht vom Plakat: die Anmeldung soll wie eine Unterseite der
   Vereinsseite wirken, nicht wie ein Fremdkörper.

     #494949  Außenfläche          #972a36  Weinrot, Navileiste
     #262626  Inhaltsfläche        #ffa600  Orange des Logos
     #b2b2b2  Sekundärtext         Kopfverlauf #642c33 → #8a2b35

   Auf dunklem Grund gelten andere Regeln als auf hellem: Eingabe-
   felder brauchen einen eigenen, helleren Grund, damit sie als
   Felder erkennbar bleiben, und reines Weiß auf Schwarz flimmert –
   darum #f2f2f2 für Fließtext.
   -------------------------------------------------------------- */
:root {
    --aussen: #494949;
    --flaeche: #262626;
    --flaeche-hoch: #303030;
    --flaeche-tief: #1e1e1e;
    --feld: #333333;

    --wein: #972a36;
    --wein-dunkel: #642c33;
    --wein-hell: #8a2b35;
    --wein-matt: #3a2126;

    --orange: #ffa600;
    --orange-dunkel: #cc8500;
    --orange-matt: #3a2e14;

    --text: #f2f2f2;
    --text-klar: #ffffff;
    --text-leise: #b2b2b2;
    --text-still: #9b9b9b;

    --linie: #3d3d3d;
    --linie-stark: #585858;

    --warnung: #ff9b8c;
    --warnung-flaeche: #3d2320;
    --erfolg: #8fd4a8;
    --erfolg-flaeche: #1f3329;

    --radius: 4px;
    --spalte: 42rem;
}

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

/* Das hidden-Attribut muss immer wirken.
   Der Browser setzt dafür [hidden] { display: none }. Eine eigene Regel
   wie .feld__fehler { display: block } hat dieselbe Spezifität und
   gewinnt, weil sie später kommt – das Element bleibt dann sichtbar,
   obwohl das Skript es ausgeblendet hat. Genau daran blieb eine bereits
   behobene Fehlermeldung unter dem IBAN-Feld stehen. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--aussen);
}

/* --------------------------------------------------------------
   Kopfbereich – Verlauf und Logo wie auf komueka.de
   -------------------------------------------------------------- */
.kopf {
    background: linear-gradient(to bottom, var(--wein-dunkel), var(--wein-hell));
    border-top: 3px solid var(--wein);
    color: var(--text-klar);
    padding: 0.85rem 1.25rem 0.9rem;
}
.kopf__innen { max-width: var(--spalte); margin: 0 auto; }
.kopf__marke { margin: 0; }
.kopf__marke img {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
}
/* Textfassung, falls die Logografik fehlt */
.kopf__marke-text {
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin: 0;
    color: var(--orange);
}
.kopf__anlass {
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    margin: 0.5rem 0 0;
    color: var(--text-klar);
}
.kopf__daten {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: #e4cfd2;
}
.kopf__daten strong { color: var(--text-klar); font-weight: 600; }

/* --------------------------------------------------------------
   Grundgerüst
   -------------------------------------------------------------- */
.huelle {
    max-width: var(--spalte);
    margin: 0 auto;
    padding: 1.5rem 1.25rem 5rem;
    background: var(--flaeche);
    min-height: 60vh;
}
.karte {
    background: var(--flaeche-hoch);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.25rem 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.karte--gold { background: var(--orange-matt); border-color: var(--orange-dunkel); }

/* --------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------- */
.abschnitt {
    background: var(--flaeche-hoch);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.abschnitt--fehler { border-color: var(--warnung); }

.abschnitt__kopf {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1rem 1.15rem;
    background: none;
    border: 0;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    text-align: left;
    color: inherit;
    cursor: pointer;
    list-style: none;
}
.abschnitt__kopf::-webkit-details-marker { display: none; }
.abschnitt__kopf:hover { background: var(--flaeche-tief); }
.abschnitt__kopf:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

.abschnitt__nummer {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--wein);
    color: var(--text-klar);
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 0.9rem;
    display: grid;
    place-items: center;
}
.abschnitt--fehler .abschnitt__nummer {
    background: var(--warnung-flaeche);
    color: var(--warnung);
    box-shadow: inset 0 0 0 1px var(--warnung);
}

.abschnitt__titel {
    flex: 1 1 auto;
    font-family: var(--schrift-display);
    font-weight: 700;
    color: var(--text-klar);
}
.abschnitt__hinweis {
    display: block;
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--text-leise);
    margin-top: 0.15rem;
}
/* Als CSS-Dreieck gezeichnet statt als Schriftzeichen: das Zeichen ▾
   fehlt in Open Sans und faellt sonst auf eine Systemschrift zurueck,
   die je nach Geraet anders aussieht. */
.abschnitt__pfeil {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 0.36rem solid transparent;
    border-right: 0.36rem solid transparent;
    border-top: 0.42rem solid var(--text-still);
    transition: transform 0.15s ease;
}
.abschnitt[open] .abschnitt__pfeil { transform: rotate(180deg); }

.abschnitt__inhalt { padding: 0.25rem 1.15rem 1.35rem; border-top: 1px solid var(--linie); }

/* --------------------------------------------------------------
   Felder
   -------------------------------------------------------------- */
.feld { margin: 1.15rem 0 0; }
.feld:first-child { margin-top: 0.9rem; }

.feld > label,
.feld__beschriftung {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: var(--text-klar);
}
.feld__pflicht { color: var(--orange); margin-left: 0.15rem; }
.feld__hilfe { font-size: 0.875rem; color: var(--text-leise); margin: 0 0 0.45rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="month"],
input[type="search"], select, textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-klar);
    background: var(--feld);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--text-still); }
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 166, 0, 0.25);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--warnung);
    background: var(--warnung-flaeche);
}
/* Der Kalenderknopf ist auf dunklem Grund sonst kaum zu sehen */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.75); }

.feld__fehler {
    display: block;
    color: var(--warnung);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.3rem;
}

.feld--kurz input { max-width: 9rem; }
.feld--mittel input { max-width: 16rem; }

.reihe { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.reihe > * { flex: 1 1 9rem; min-width: 0; }

.wahl { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.wahl__option { position: relative; }
.wahl__option input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.wahl__option span {
    display: block;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    font-size: 0.95rem;
    background: var(--feld);
    color: var(--text);
}
.wahl__option input:checked + span {
    background: var(--wein);
    border-color: var(--wein);
    color: var(--text-klar);
    font-weight: 600;
}
.wahl__option input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

.haken { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.55rem 0; font-size: 0.98rem; }
.haken input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.22rem;
    accent-color: var(--orange);
}

.liste { margin-top: 0.7rem; }
.liste__zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
    padding: 0.7rem;
    background: var(--flaeche-tief);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
}
.liste__zeile > div { flex: 1 1 8rem; min-width: 0; }
.liste__zeile label { display: block; font-size: 0.8rem; color: var(--text-leise); margin-bottom: 0.2rem; }
.liste__zeile input { padding: 0.45rem 0.55rem; font-size: 0.95rem; }

.liste__weg {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    color: var(--warnung);
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}
.liste__weg:hover { background: var(--warnung-flaeche); border-color: var(--warnung); }

.liste__alter {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--text-leise);
    padding-bottom: 0.55rem;
    min-width: 5.5rem;
}
.liste__alter[data-minderjaehrig="ja"] { color: var(--orange); font-weight: 600; }

/* --------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------- */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 1.2rem;
    font-family: var(--schrift-text);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
}
.knopf--haupt { background: var(--wein); color: var(--text-klar); }
.knopf--haupt:hover { background: var(--wein-hell); color: var(--text-klar); }
.knopf--zweit { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.knopf--zweit:hover { background: var(--feld); border-color: var(--text-still); color: var(--text-klar); }
.knopf--klein { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.knopf--gold { background: var(--orange); color: #2b1d00; }
.knopf--gold:hover { background: var(--orange-dunkel); color: #2b1d00; }
.knopf:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.knopf[disabled] { opacity: 0.55; cursor: not-allowed; }

.leiste {
    position: sticky;
    bottom: 0;
    background: var(--flaeche-tief);
    border-top: 1px solid var(--linie-stark);
    padding: 0.8rem 1.25rem;
    margin: 1rem -1.25rem -5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.leiste__stand { flex: 1 1 100%; font-size: 0.85rem; color: var(--text-leise); order: 3; }

/* --------------------------------------------------------------
   Meldungen
   -------------------------------------------------------------- */
.meldung {
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--wein);
    background: var(--wein-matt);
    margin-bottom: 1rem;
    font-size: 0.98rem;
}
.meldung--fehler { border-color: var(--warnung); background: var(--warnung-flaeche); }
.meldung--erfolg { border-color: var(--erfolg); background: var(--erfolg-flaeche); }
.meldung--gold { border-color: var(--orange); background: var(--orange-matt); }
.meldung p:first-child { margin-top: 0; }
.meldung p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------
   Bestätigungen
   -------------------------------------------------------------- */
.bestaetigung {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--flaeche-tief);
}
.bestaetigung--offen { border-color: var(--orange); background: var(--orange-matt); }
.bestaetigung__titel { font-weight: 600; font-size: 0.98rem; margin: 0 0 0.25rem; color: var(--text-klar); }
.bestaetigung__text { font-size: 0.9rem; color: var(--text); margin: 0 0 0.5rem; }
.bestaetigung__quelle { font-size: 0.8rem; color: var(--text-still); }
.bestaetigung__abweichung { margin-top: 0.5rem; }
.bestaetigung__abweichung textarea { min-height: 4rem; }

/* --------------------------------------------------------------
   Dateien
   -------------------------------------------------------------- */
.upload {
    border: 2px dashed var(--linie-stark);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    background: var(--flaeche-tief);
}
.upload.ist-ziel { border-color: var(--orange); background: var(--orange-matt); }
.upload input[type="file"] { display: none; }

.dateien { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.dateien li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--linie);
    font-size: 0.93rem;
}
.dateien li:last-child { border-bottom: 0; }
.dateien__name { flex: 1 1 auto; word-break: break-word; }
.dateien__groesse { color: var(--text-still); font-size: 0.82rem; }
.dateien__beschreibung { color: var(--text-leise); font-size: 0.85rem; }

.balken { height: 4px; background: var(--linie); border-radius: 2px; overflow: hidden; margin-top: 0.5rem; }
.balken > div { height: 100%; background: var(--orange); width: 0; transition: width 0.2s ease; }

a { color: var(--orange); }
a:hover { color: var(--text-klar); }

/* --------------------------------------------------------------
   Fußbereich
   -------------------------------------------------------------- */
.fuss {
    background: linear-gradient(to bottom, var(--wein-hell), var(--wein-dunkel));
    color: #e4cfd2;
    font-size: 0.85rem;
    padding: 1.1rem 1.25rem 1.6rem;
}
.fuss p { max-width: var(--spalte); margin: 0 auto; }
.fuss p + p { margin-top: 0.4rem; }
.fuss a { color: var(--orange); }

.nur-vorlesen {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 30rem) {
    .abschnitt__kopf { padding: 0.85rem 0.9rem; }
    .abschnitt__inhalt { padding: 0.25rem 0.9rem 1.2rem; }
    .huelle { padding: 1rem 0.9rem 5rem; }
    .leiste { margin: 1rem -0.9rem -5rem; padding: 0.75rem 0.9rem; }
    .knopf { width: 100%; }
    .leiste .knopf { flex: 1 1 100%; }
}

/* --------------------------------------------------------------
   Hilfsklassen
   Ersetzen die früheren style-Attribute in den Templates. Die
   Content-Security-Policy erlaubt keine Inline-Styles – dadurch
   bleiben style-src und script-src beide ohne 'unsafe-inline'.
   -------------------------------------------------------------- */
.u-m0        { margin: 0; }
.u-mt0       { margin-top: 0; }
.u-mb0       { margin-bottom: 0; }
.u-mt-xs     { margin-top: 0.5rem; }
.u-mt-s      { margin-top: 0.7rem; }
.u-mt-m      { margin-top: 0.9rem; }
.u-mt-l      { margin-top: 1.25rem; }
.u-mb-xs     { margin: 0 0 0.35rem; }
.u-mb-s      { margin: 0 0 0.5rem; }
.u-einzug    { margin-left: 1.75rem; }
.u-hilfe-einzug { font-size: 0.85rem; color: var(--text-leise); margin: 0 0 0.8rem 1.75rem; }

.u-klein     { font-size: 0.9rem; }
.u-klein-2   { font-size: 0.93rem; }
.u-klein-3   { font-size: 0.87rem; }
.u-winzig    { font-size: 0.8rem; }
.u-grau      { color: var(--text-leise); }
.u-blass     { color: var(--text-still); }
.u-warnfarbe { color: var(--warnung); }
.u-erfolgfarbe { color: var(--erfolg); }
.u-fett      { font-weight: 600; }
.u-mono      { font-family: ui-monospace, monospace; font-size: 0.92rem; }
.u-nowrap    { white-space: nowrap; }

.u-notiz     { font-size: 0.85rem; color: var(--text-leise); }
.u-notiz-eng { font-size: 0.82rem; color: var(--text-leise); }
.u-notiz-mini{ font-size: 0.8rem; color: var(--text-leise); }
.u-zwischentitel { margin: 0.9rem 0 0.3rem; font-weight: 600; font-size: 0.9rem; color: var(--text-klar); }
.u-zwischentitel--eng { margin: 0.6rem 0 0.2rem; font-weight: 600; font-size: 0.9rem; color: var(--text-klar); }
.u-karte-titel {
    font-family: var(--schrift-display);
    font-weight: 700;
    color: var(--orange);
    margin-top: 0;
}
.u-karte-titel--klein { font-size: 1.4rem; }

.u-voll      { width: 100%; }
.u-flex-auto { flex: 1 1 auto; }
.u-flex-12   { flex: 1 1 12rem; }
.u-flex-breit-11 { flex: 2 1 11rem; }
.u-flex-breit-12 { flex: 2 1 12rem; }
.u-reihe-eng { display: flex; gap: 0.4rem; }
.u-schmal    { max-width: 34rem; }
.werte--eng  { grid-template-columns: minmax(6rem, 8rem) 1fr; }

.u-gema-eintrag { border-bottom: 1px solid var(--linie); padding: 0.4rem 0; font-size: 0.9rem; }

/* ------------------------------------------------------------------
   Karten: Freikarten und gekaufte Karten sichtbar getrennt.

   Vorher standen beide in einem Block, und die Kategoriefelder
   enthielten die Freikarten mit – niemand konnte sicher sagen, ob die
   zwei Freikarten in den drei eingetragenen Karten stecken oder
   dazukommen. Jetzt sind es zwei Kästen mit eigener Überschrift.
   ------------------------------------------------------------------ */
.kartenblock {
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1rem;
}

.kartenblock--kauf {
    border-color: var(--wein);
}

.kartenblock__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linie);
    font-family: var(--schrift-display);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text-klar);
}

.kartenblock__notiz {
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-leise);
}

.kartenblock .feld:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Hinweisfelder klebten am darüberliegenden Eingabefeld – innerhalb
   eines Abschnitts brauchen sie Luft nach oben.
   ------------------------------------------------------------------ */
.abschnitt__inhalt .meldung {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.abschnitt__inhalt .meldung:first-child { margin-top: 0; }
.feld + .meldung { margin-top: 1rem; }
.meldung + .feld { margin-top: 1rem; }

/* Summenkasten meldet, wenn die Höchstzahl überschritten ist. */
.karte--warnung {
    border-color: var(--wein);
    background: rgba(151, 42, 54, 0.18);
}
.js-summe-warnung {
    font-size: 0.9rem;
    color: #ff9b9b;
}

/* Liste der fehlenden Angaben über dem Formular. */
.fehlerliste {
    margin: 0.5rem 0 0.6rem;
    padding-left: 1.2rem;
}
.fehlerliste li { margin-bottom: 0.25rem; }
.fehlerliste a { color: inherit; }
.fehlerliste a:hover { color: var(--text-klar); }

/* ------------------------------------------------------------------
   Künstleransicht für die Verwaltung: Hinweisleiste und Sperre.

   Das Formular trägt in dieser Ansicht inert, lässt sich also nicht
   bedienen. Zusätzlich die Eingaben blass zeichnen, damit niemand auf
   den Gedanken kommt, hier etwas nachtragen zu können.
   ------------------------------------------------------------------ */
.vorschau-leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius);
    background: rgba(255, 166, 0, 0.14);
    border: 1px solid var(--orange);
}
.vorschau-leiste a { color: var(--orange); }

form[data-vorschau] input,
form[data-vorschau] select,
form[data-vorschau] textarea {
    opacity: 0.75;
}
form[data-vorschau] .abschnitt__pfeil { display: none; }

/* Gesperrter Abschnitt beim Erfassen durch die Verwaltung. */
.feldgruppe {
    border: 0;
    margin: 0;
    padding: 0;
}
.feldgruppe[disabled] { opacity: 0.55; }