/*
 * Portal-Styles ohne Build-Schritt (direkt ausgeliefert, siehe ADR-008).
 * Farben und Schriften zentral: :root = Club-Branding, .theme-elternhockey = Elternhockey-Branding.
 */
:root {
    /* Club-Branding (club-raffelberg.com) – Standard für die Plattform */
    --color-primary: #315433;
    --color-primary-dark: #2f5633;
    --color-primary-light: #63a37b;
    --color-primary-lightest: #a9cbb4;
    --color-primary-contrast: #ffffff;
    --color-header: #33363b;
    --color-accent: #315433;
    --color-bg: #f2f3f2;
    --color-surface: #ffffff;
    --color-text: #33363b;
    --color-muted: #5a5f66;
    --color-border: #d6d9dc;
    --radius: 10px;
    --font: "Titillium", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Titillium", system-ui, sans-serif;
    --weight-display: 600;
}

/* Elternhockey-Branding (eh.club-raffelberg.com) für Turnierseiten mit theme = elternhockey */
.theme-elternhockey {
    --color-primary: #78887f;
    --color-primary-dark: #5b6861;
    --color-primary-light: #a1aca6;
    --color-primary-lightest: #aeb8b2;
    --color-header: #78887f;
    --color-accent: #5b6861;
    --color-bg: #f3f5f4;
    --color-text: #313131;
    --color-muted: #5b6861;
    --color-border: #d5dbd8;
    --font: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: "Lobster", Georgia, serif;
    --weight-display: 400;
}

@font-face { font-family: "Titillium"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/titillium-400.woff") format("woff"); }
@font-face { font-family: "Titillium"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("../fonts/titillium-600.woff") format("woff"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/raleway-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/raleway-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/raleway-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Lobster"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/lobster-latin-400.woff2") format("woff2"); }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--color-primary-dark); }

.container {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem;
}

main.container { flex: 1; padding-top: 1.5rem; padding-bottom: 2rem; }

.site-header {
    background: var(--color-header);
    color: var(--color-primary-contrast);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.site-header__logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
}

.site-header__brand {
    color: inherit;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}

.site-header__subtitle { opacity: .9; font-size: .95rem; }

.site-header__text { display: flex; flex-direction: column; line-height: 1.2; }

.hero h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    color: var(--color-primary-dark);
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 0 .35rem;
}

.hero__dates {
    margin: 0 0 1.25rem;
    color: var(--color-muted);
    font-weight: 600;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.card > :first-child { margin-top: 0; }

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 1.25rem 0;
}

.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

.notice {
    margin: 0;
    padding: .8rem 1rem;
    border-left: 4px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-primary-lightest) 25%, var(--color-surface));
    border-radius: 4px;
}

.notice--closed { border-left-color: var(--color-primary-light); background: var(--color-bg); }

/* Deutlicher Hinweis, z. B. „Neue Bankverbindung“ über den Kontodaten */
.notice--important {
    margin: 1rem 0;
    border: 2px solid #b3261e;
    border-left-width: 6px;
    background: #fbeeed;
    color: #5c1410;
    font-weight: 700;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: .9rem;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Turnierliste */
.card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    margin-bottom: 1rem;
    border-left: 5px solid var(--color-primary);
    transition: box-shadow .15s;
}

.card--link:hover, .card--link:focus-visible { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }

.card--link h2 { margin: 0 0 .25rem; font-size: 1.3rem; color: var(--color-primary-dark); }

.card__meta { margin: 0; color: var(--color-muted); font-weight: 600; }

.card__status { margin: .6rem 0 0; font-weight: 600; color: var(--color-primary); }

.card__status--closed { color: var(--color-muted); }

/* Buttons */
.button {
    display: inline-block;
    padding: .8rem 1.4rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary-dark);
    color: var(--color-primary-contrast);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button:hover, .button:focus-visible { filter: brightness(.88); }

/* Formular */
.form fieldset {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
}

.form legend {
    font-weight: 700;
    color: var(--color-primary-dark);
    padding: 0;
    margin-bottom: .5rem;
}

.field { margin-bottom: 1rem; }

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

.field input, .field textarea, .field select {
    width: 100%;
    padding: .65rem .75rem;
    font: inherit;
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.field input:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.is-invalid { border-color: #b3261e !important; }

.field-error { color: #b3261e; font-size: .9rem; margin: .3rem 0 0; }

.choice { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; cursor: pointer; }

.choice input { margin-top: .3rem; accent-color: var(--color-primary-dark); width: 1.1rem; height: 1.1rem; flex: none; }

.hint { color: var(--color-muted); margin-top: 0; }

.subheading { font-weight: 600; margin: 1rem 0 .5rem; }

.reinforcement { padding-left: 1.7rem; }

.req { color: #b3261e; }

.alert {
    border: 1px solid #e3b4b0;
    background: #fbeeed;
    border-radius: 6px;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
}

.alert ul { margin: .4rem 0 0; padding-left: 1.2rem; }

.form .button { margin-top: 1.5rem; width: 100%; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reference { font-size: 1.25rem; letter-spacing: .05em; }

@media (min-width: 40rem) {
    .form .button { width: auto; }
    .hero h1 { font-size: 2.6rem; }
    .card { padding: 1.75rem; }
}

/* Teilnehmerkarte: Kartenbild vom eigenen Server, Markierungen darübergelegt */
.card--flush { padding: 0; overflow: hidden; }
.map { position: relative; width: 100%; background: #aad3df; }
.map img { display: block; width: 100%; height: 100%; }
.map__pin {
    position: absolute;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #d1495b;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    cursor: pointer;
}
.map__pin:hover, .map__pin:focus { z-index: 2; outline: none; transform: scale(1.25); }
.map__tip {
    display: none;
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    width: max-content; max-width: 220px;
    padding: .4rem .6rem;
    border-radius: 6px;
    background: #fff;
    color: var(--color-text, #222);
    font-size: .85rem; line-height: 1.3; text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.map__pin:hover .map__tip, .map__pin:focus .map__tip { display: block; }
/* Am Rand: Hinweis nach unten bzw. zur Mitte hin öffnen, damit er nicht abgeschnitten wird */
.map__pin--below .map__tip { bottom: auto; top: 22px; }
.map__pin--left .map__tip { left: -6px; transform: none; }
.map__pin--right .map__tip { left: auto; right: -6px; transform: none; }
.map__credit { margin: 0; padding: .4rem .8rem; font-size: .75rem; color: #666; }
.team-list { margin: 0; padding: 0; list-style: none; }
.team-list li { padding: .45rem 0; border-bottom: 1px solid #eee; }
.team-list li:last-child { border-bottom: 0; }
.team-list span { display: block; color: #666; font-size: .9rem; }

/* Logos (Mannschaft, Hall of Fame): rund, Bild vollständig sichtbar (ADR-037) */
.logo { display: inline-block; flex: none; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--color-border); }
.logo--empty { display: inline-block; background: var(--color-bg); }
.team-list--logos li { display: flex; align-items: center; gap: .75rem; }
.team-list .team-list__category { color: var(--color-primary); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.logo-field { display: flex; align-items: flex-start; gap: 1rem; }
.logo-field .field { flex: 1; }

/* Börse „Spielgemeinschaften“ */
.squad-entry__head { display: flex; align-items: flex-start; gap: 1rem; }
.squad-entry__head h2 { margin: 0; }
.squad-entry__head p { margin: .25rem 0; }
.squad-entry details { margin-top: 1rem; }
.squad-entry summary { list-style: none; min-height: 48px; }
.squad-entry summary::-webkit-details-marker { display: none; }

/* Spenden statt Gastgeschenk */
.donation__head { display: flex; align-items: center; gap: 1rem; }
.donation__logo { flex: none; object-fit: contain; }
.donation__total { padding: .75rem 1rem; border-radius: var(--radius); background: var(--color-primary-lightest); }

/* Unterkünfte */
.lodging-intro { margin: 0 0 1rem; color: var(--color-muted); }
.lodging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}
.lodging {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.1rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius);
}
.lodging p { margin: 0; }
.lodging__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.lodging__name { margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--color-primary-dark); }
.lodging__distance {
    display: inline-flex; align-items: center; gap: .2rem;
    flex-shrink: 0;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary-lightest) 45%, var(--color-surface));
    color: var(--color-primary-dark);
    font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.lodging__distance svg { width: .95rem; height: .95rem; fill: currentColor; }
.lodging__price { font-weight: 600; }
.lodging__address, .lodging__phone { color: var(--color-muted); font-size: .95rem; }
.lodging__notes { font-size: .95rem; font-style: italic; }
.lodging__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.lodging__button {
    padding: .4rem .85rem;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    color: var(--color-primary-dark);
    font-size: .9rem; font-weight: 600;
    text-decoration: none;
}
.lodging__button:hover, .lodging__button:focus-visible { background: color-mix(in srgb, var(--color-primary-lightest) 35%, var(--color-surface)); }
.lodging__button--primary { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-primary-contrast); }
.lodging__button--primary:hover, .lodging__button--primary:focus-visible { background: var(--color-primary-dark); filter: brightness(.9); }

/* Turnierseite: zentrale Anlaufstelle */
.hero__venue { margin: -.9rem 0 1.25rem; color: var(--color-muted); font-size: .95rem; }
.hub { margin-top: 2rem; }
.hub__title { margin: 0 0 .25rem; font-size: 1.35rem; color: var(--color-primary-dark); }
.hub__intro { margin: 0 0 1rem; color: var(--color-muted); }
.hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.hub__grid li { display: flex; }
.tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    width: 100%;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
a.tile:hover, a.tile:focus-visible { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.tile__icon { width: 1.8rem; height: 1.8rem; margin-bottom: .2rem; fill: var(--color-primary-dark); }
.tile__title { font-weight: 700; font-size: 1.05rem; color: var(--color-primary-dark); }
.tile__text { color: var(--color-muted); font-size: .92rem; line-height: 1.4; }
.tile--soon { background: transparent; border-style: dashed; }
.tile--soon .tile__icon { fill: var(--color-primary-light); }
.tile--soon .tile__title { color: var(--color-muted); }

/* Zelten */
.field-hint { margin: .3rem 0 0; color: var(--color-muted); font-size: .9rem; }
.card h2 { margin: 0 0 .6rem; font-size: 1.2rem; color: var(--color-primary-dark); }
.card + .card, .card + form.card, form.card + p { margin-top: 1rem; }
.camping__info { margin-top: 1rem; }
.camping__plan .button { margin-top: .5rem; }

/* Team-Bereich */
.team-box {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
}
.team-box p { margin: 0; }
.team-box__status { margin-bottom: .6rem !important; font-weight: 600; color: var(--color-primary-dark); }
.team-box__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.team-box__logout {
    padding: .35rem .8rem;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary-dark);
    font: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer;
}
.team-box__title { margin-bottom: .7rem !important; font-size: .95rem; }
.team-box__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.team-box__fields label { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 11rem; font-size: .85rem; font-weight: 600; }
.team-box__fields input {
    padding: .55rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit; font-weight: 400;
}
.team-box__fields .button { padding: .6rem 1.2rem; }
.team-box .field-error { margin-bottom: .6rem; }
.tile--locked { background: transparent; border-style: dashed; opacity: .75; }
.tile--locked .tile__icon { fill: var(--color-muted); }
.tile--locked .tile__title { color: var(--color-muted); }
.team-note { margin: .75rem 0 1rem; }
.facts--compact { margin: .5rem 0 1rem; }
.catering-total { font-size: 1.1rem; font-weight: 700; color: var(--color-primary-dark); }
.paid { color: #1b7a3a; font-weight: 700; }

/* Seite „Euer Team“: Absage */
.form--danger { border-top: 3px solid #b3261e; }
.button--danger { background: #b3261e; border-color: #b3261e; color: #fff; }

/* Verpflegung: ein Block je Angebot */
.catering-offer { border: 0; border-top: 1px solid var(--color-primary-lightest); margin: 0; padding: .8rem 0 0; }
.catering-offer legend { font-weight: 700; padding: 0; }