/*
 * Rennanmeldung im Frontend (Shortcode [kcs_rennanmeldung]).
 *
 * Farben als Variablen, damit sie sich an ein Theme anpassen lassen, ohne die
 * Regeln anzufassen. Die Werte hier stammen vom dunklen Theme von
 * kartclub-sh.ch; fuer ein helles Theme genuegt es, die sechs Werte zu
 * ersetzen.
 */

.kcs-anm {
    --anm-flaeche: #23262a;
    --anm-feld:    #2a2d31;
    --anm-rand:    #36393d;
    --anm-text:    #c2c0bc;
    --anm-hell:    #e6e1d5;
    --anm-akzent:  #c09457;
    --anm-fehler:  #e06c5e;

    color: var(--anm-text);
    max-width: 52rem;
}

.kcs-anm__kopf { margin-bottom: 1.2rem; }
.kcs-anm__kopf h3 { margin: 0 0 .2rem; color: var(--anm-hell); }
.kcs-anm__kopf p { margin: 0; opacity: .8; font-size: .9rem; }

/* Der Honigtopf muss fuer Bots im Markup stehen, fuer Menschen aber weg sein.
   display:none wuerde von manchen Bots erkannt — darum aus dem Bild schieben. */
.kcs-anm__topf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kcs-anm__reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .kcs-anm__reihe { grid-template-columns: 1fr; }
}

.kcs-anm__feld { display: block; }
.kcs-anm__feld > span { display: block; margin-bottom: .3rem; font-size: .85rem; color: var(--anm-akzent); }

.kcs-anm__feld input,
.kcs-anm__feld select {
    width: 100%;
    padding: .55rem .7rem;
    background: var(--anm-feld);
    border: 1px solid var(--anm-rand);
    border-radius: 5px;
    color: var(--anm-hell);
    font-size: .95rem;
}

.kcs-anm__feld input:focus-visible,
.kcs-anm__feld select:focus-visible {
    outline: 2px solid var(--anm-akzent);
    outline-offset: 1px;
}

.kcs-anm__feld--fehler input,
.kcs-anm__feld--fehler select { border-color: var(--anm-fehler); }

.kcs-anm__fehler {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--anm-fehler);
}

.kcs-anm__fehler--oben {
    margin: 0 0 1rem;
    padding: .6rem .8rem;
    border: 1px solid var(--anm-fehler);
    border-radius: 5px;
}

.kcs-anm__leise { font-size: .82rem; opacity: .75; }

/* ── Haftungsverzicht ───────────────────────────────────────────────── */

.kcs-anm__haft {
    margin: 1.4rem 0;
    padding: 1rem;
    background: var(--anm-flaeche);
    border: 1px solid var(--anm-rand);
    border-radius: 8px;
}

.kcs-anm__haft--fehler { border-color: var(--anm-fehler); }
.kcs-anm__haft-titel { margin: 0 0 .5rem; color: var(--anm-hell); }
.kcs-anm__haft-box summary { cursor: pointer; font-size: .9rem; color: var(--anm-akzent); }

.kcs-anm__haft-text {
    max-height: 320px;
    overflow-y: auto;
    margin-top: .75rem;
    padding: .9rem 1rem;
    background: #1a1c1f;
    border: 1px solid var(--anm-rand);
    border-radius: 6px;
    font-size: .84rem;
    line-height: 1.6;
}

.kcs-anm__haft-text h3:first-child,
.kcs-anm__haft-text h4:first-child,
.kcs-anm__haft-text p:first-child { margin-top: 0; }
.kcs-anm__haft-text h3, .kcs-anm__haft-text h4, .kcs-anm__haft-text h5,
.kcs-anm__haft-text strong { color: var(--anm-hell); }
.kcs-anm__haft-text h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.kcs-anm__haft-text h4 { font-size: .95rem; margin: 1rem 0 .35rem; }
.kcs-anm__haft-text h5 { font-size: .88rem; margin: .8rem 0 .3rem; }
.kcs-anm__haft-text p { margin: 0 0 .6rem; }
.kcs-anm__haft-text ul { margin: 0 0 .7rem 1.1rem; padding: 0; }
.kcs-anm__haft-text blockquote {
    margin: .7rem 0;
    padding: .5rem .8rem;
    border-left: 3px solid var(--anm-akzent);
    background: rgba(192, 148, 87, .1);
}
.kcs-anm__haft-text hr { border: 0; border-top: 1px solid var(--anm-rand); margin: 1rem 0; }
.kcs-anm__haft-text table { width: 100%; border-collapse: collapse; margin: .6rem 0; font-size: .82rem; }
.kcs-anm__haft-text th, .kcs-anm__haft-text td {
    border: 1px solid var(--anm-rand);
    padding: .35rem .5rem;
    text-align: left;
    vertical-align: top;
}
.kcs-anm__haft-text th { background: var(--anm-flaeche); }

.kcs-anm__haken {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: .9rem;
    font-size: .9rem;
    cursor: pointer;
}

.kcs-anm__haken input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: .1rem; }

/* ── Absenden und Bestätigung ───────────────────────────────────────── */

/* Themes stylen `button` global — OceanWP faerbt ihn blau. Darum zwei Klassen
   plus Elementname statt eines nackten `.kcs-anm__senden`: Das gewinnt gegen
   die Theme-Regel, ohne dass es !important braucht. */
.kcs-anm button.kcs-anm__senden {
    padding: .7rem 1.6rem;
    background: var(--anm-akzent);
    background-image: none;
    border: 0;
    border-radius: 5px;
    color: #16181b;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.kcs-anm button.kcs-anm__senden:hover,
.kcs-anm button.kcs-anm__senden:focus {
    background: var(--anm-akzent);
    color: #16181b;
    filter: brightness(1.08);
}

.kcs-anm__erfolg {
    padding: 1.2rem;
    background: var(--anm-flaeche);
    border: 1px solid var(--anm-akzent);
    border-radius: 8px;
}

.kcs-anm__erfolg h3 { margin: 0 0 .5rem; color: var(--anm-hell); }

.kcs-anm__hinweis {
    margin: .8rem 0;
    padding: .6rem .8rem;
    border-left: 3px solid var(--anm-akzent);
    background: rgba(192, 148, 87, .1);
    font-size: .9rem;
}

.kcs-anm__leer { opacity: .8; }

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

/* ── Rennauswahl (mehrere Rennen auf einmal) ───────────────────────── */

.kcs-anm__rennen {
    margin: 0 0 1.4rem;
    padding: 1rem;
    border: 1px solid var(--anm-rand);
    border-radius: 8px;
    background: var(--anm-flaeche);
}

.kcs-anm__rennen legend {
    padding: 0 .4rem;
    color: var(--anm-akzent);
    font-size: .9rem;
}

.kcs-anm__alle { margin: 0 0 .6rem; }

.kcs-anm__textknopf {
    background: none;
    border: 0;
    padding: 0;
    color: var(--anm-akzent);
    font-size: .82rem;
    text-decoration: underline;
    cursor: pointer;
}

.kcs-anm__rennzeile {
    padding: .7rem .8rem;
    margin-bottom: .5rem;
    border: 1px solid var(--anm-rand);
    border-radius: 6px;
}

.kcs-anm__rennzeile--an { border-color: var(--anm-akzent); }
.kcs-anm__rennzeile--fehler { border-color: var(--anm-fehler); }

.kcs-anm__renncheck {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    cursor: pointer;
}

.kcs-anm__renncheck input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: .15rem; }
.kcs-anm__renncheck strong { display: block; color: var(--anm-hell); }
.kcs-anm__renncheck .kcs-anm__leise { display: block; }

.kcs-anm__rennwahl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: .7rem 0 0 1.75rem;
}

@media (max-width: 600px) {
    .kcs-anm__rennwahl { grid-template-columns: 1fr; margin-left: 0; }
}

/* ── Bestätigung mit mehreren Rennen ───────────────────────────────── */

.kcs-anm__liste { margin: .6rem 0 1rem; padding-left: 1.2rem; }
.kcs-anm__liste li { margin-bottom: .3rem; }
.kcs-anm__liste strong { color: var(--anm-hell); }

/* ── Liste der Angemeldeten ([kcs_angemeldete]) ─────────────────────── */

.kcs-liste {
    --anm-flaeche: #23262a;
    --anm-rand:    #36393d;
    --anm-text:    #c2c0bc;
    --anm-hell:    #e6e1d5;
    --anm-akzent:  #c09457;

    color: var(--anm-text);
    max-width: 52rem;
}

.kcs-liste__titel { margin: 0 0 .5rem; color: var(--anm-hell); }
.kcs-liste__zahl { margin: 0 0 1rem; font-size: .9rem; opacity: .8; }
.kcs-liste__leer { opacity: .8; }

.kcs-liste__gruppe { margin-bottom: 1.4rem; }

.kcs-liste__kategorie {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 0 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--anm-rand);
    color: var(--anm-akzent);
    font-size: 1rem;
}

.kcs-liste__anzahl {
    font-size: .78rem;
    font-weight: 400;
    opacity: .7;
}

.kcs-liste__tab {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.kcs-liste__tab th {
    padding: .3rem .5rem;
    text-align: left;
    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}

.kcs-liste__tab td {
    padding: .35rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: var(--anm-hell);
}

/* Startnummern sind Ziffernkolonnen — sie sollen untereinander stehen. */
.kcs-liste__nr {
    width: 4rem;
    font-variant-numeric: tabular-nums;
}

/* ── Strecke: Bild und Karte ([kcs_rennen_strecke]) ─────────────────── */

.kcs-strecke {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.kcs-strecke__bild {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Die Hoehe setzt der Shortcode als Attribut — hier nur Breite und Rahmen,
   damit sich beides ohne Stylesheet-Aenderung je Einbindung steuern laesst. */
.kcs-strecke__karte {
    width: 100%;
    border: 0;
    border-radius: 6px;
}

.kcs-strecke__weg {
    margin: 0;
    font-size: .85rem;
}

.kcs-strecke__weg a { color: #c09457; }

.kcs-strecke__adresse {
    display: block;
    margin-top: .2rem;
    opacity: .7;
}

/* ── Vereinskalender ([kcs_rennkalender]) ───────────────────────────── */

/* Anders als das Anmeldeformular bringt der Kalender **keine eigenen Farben**
   mit: Er steht auf der Startseite mitten im Seiteninhalt, und der ist mal
   hell und mal dunkel. Der erste Entwurf setzte helle Schrift voraus und war
   auf hellem Grund praktisch unlesbar. Darum erbt er die Textfarbe und setzt
   nur Struktur — die einzige eigene Farbe ist der Akzent des Knopfes. */
.kcs-kal {
    --kal-akzent: #c09457;
    color: inherit;
}

.kcs-kal__titel { margin: 0 0 .8rem; font-size: 22px; }
.kcs-kal__leer { opacity: .75; }

/* Groesser als die uebrigen Listen des Plugins: Der Kalender steht auf der
   Startseite und wird ueberflogen, nicht gelesen. Neben der alten wpDataTable
   trat er sichtbar zurueck.
 *
 * Zwei Dinge sind hier Absicht:
 *
 * 1. **Pixel statt rem.** `rem` haengt an der Wurzelgroesse, und die setzt das
 *    Theme. 1.05rem war darum je nach Seite kleiner als gedacht.
 * 2. **Der Elementname im Selektor** (`table.kcs-kal__tab`, `.kcs-kal td`).
 *    OceanWP setzt Schriftgroessen auf `td` und `table`; bei gleicher
 *    Spezifitaet gewinnt, was spaeter geladen wird — und das ist nicht
 *    verlaesslich unser Stylesheet. */
.kcs-kal table.kcs-kal__tab {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    line-height: 1.5;
}

.kcs-kal table.kcs-kal__tab th {
    padding: .5rem .6rem;
    /* OceanWP faerbt Tabellenzellen selbst — ohne das Erben nimmt der
       Kalender die Themenfarbe statt die seiner Umgebung. */
    color: inherit;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
    border-bottom: 2px solid currentColor;
}

.kcs-kal table.kcs-kal__tab td {
    padding: 12px 10px;
    color: inherit;
    font-size: 17px;
    border-bottom: 1px solid currentColor;
    /* Die Linie soll andeuten, nicht trennen — volle Deckung wäre ein Gitter. */
    border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* Datumsspalte als Ziffernkolonne — sie soll untereinander stehen. */
.kcs-kal__datum {
    width: 8.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kcs-kal__tun { width: 9rem; }

/* Vergangenes bleibt sichtbar, tritt aber zurueck: Der Jahreskalender ist
   auch ein Rueckblick, und ein Loch in der Liste verwirrt mehr als es hilft. */
.kcs-kal__vorbei td { opacity: .5; }

.kcs-kal a.kcs-kal__knopf {
    display: inline-block;
    padding: .45rem .95rem;
    background: var(--kal-akzent);
    background-image: none;
    border: 0;
    border-radius: 4px;
    color: #16181b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}

.kcs-kal a.kcs-kal__knopf:hover,
.kcs-kal a.kcs-kal__knopf:focus {
    filter: brightness(1.08);
    color: #16181b;
}

@media (max-width: 600px) {
    .kcs-kal__tab th:nth-child(3),
    .kcs-kal__tab td:nth-child(3) { display: none; }
}

/* „ab 01.11.2026" — die Anmeldung steht noch bevor. Zurueckhaltend, aber da:
   Eine leere Zelle laesst den Leser raetseln, ob er etwas uebersehen hat. */
.kcs-kal__spaeter {
    font-size: 14px;
    opacity: .65;
    white-space: nowrap;
}