/* Weihnachtsturnier Deitingen. Hallennacht: dunkler Grund, Flutlicht in Rot und Gold, Schnee, Lichterkette. */

@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }

:root {
  --bg: #07110d;
  --bg-2: #0b1a14;
  --surface: #10231b;
  --surface-2: #163026;
  --line: rgba(244, 241, 232, .12);
  --line-2: rgba(244, 241, 232, .24);
  --text: #f4f1e8;
  --mute: #a7b7ae;
  --red: #ef2f3c;
  --red-2: #ff5560;
  --gold: #ffc84a;
  --green: #2fd08a;
  --pine: #0f3d2e;
  --navy: #0d224a;
  --good: #2fd08a;
  --bad: #ff6b74;
  --radius: 20px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--font); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-weight: 900; font-stretch: 68%; text-transform: uppercase; line-height: .95; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 2.8rem); margin-top: 1.5em; }
p, ul, ol, dl { margin: 0 0 1em; }
small { font-size: .86em; color: var(--mute); }
.wrap { width: min(100% - 32px, 1140px); margin-inline: auto; }
.narrow { max-width: 800px; }
.measure { max-width: 62ch; }
.muted { color: var(--mute); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 10; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.section { padding-block: clamp(34px, 6vw, 68px); }
.section > h1:first-child, .section > h2:first-child { margin-top: 0; }

/* Kopf: schwebt halbtransparent über der Seite */
.top { position: sticky; top: 0; z-index: 20; background: rgba(7, 17, 13, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .03em; margin-right: auto; padding-block: 8px; }
.brand:hover { color: var(--gold); }
.brand img { width: 54px; }
.brand b { color: var(--gold); font-weight: 800; }
.top nav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.top nav a, .linklike { color: var(--text); text-decoration: none; padding: 8px 13px; font-weight: 600; font-size: .95rem; border-radius: 999px; }
.top nav a:hover, .linklike:hover { background: rgba(244, 241, 232, .1); color: #fff; }
.top nav a[aria-current="page"] { background: var(--text); color: var(--bg); }
.top nav a[href$="anmeldung.php"]:not([aria-current]) { box-shadow: inset 0 0 0 1.5px var(--red); }
.linklike { background: none; border: 0; font-family: inherit; cursor: pointer; }
.inline { display: inline; }
.nav-toggle { display: none; background: none; color: var(--text); border: 1.5px solid var(--line-2); border-radius: 999px; padding: 7px 16px; font: 600 .95rem var(--font); cursor: pointer; }
@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .top nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 14px; }
  .top nav.open { display: flex; }
  .top nav a { font-size: 1.1rem; padding: 11px 14px; }
}

/* Lichterkette */
.lights { display: block; width: 100%; height: 34px; overflow: visible; }
.lights .wire { stroke: rgba(244, 241, 232, .28); stroke-width: 1.2; }
.b-gold { fill: #ffd76a; filter: drop-shadow(0 0 6px #ffc84a) drop-shadow(0 0 14px rgba(255, 200, 74, .7)); }
.b-rot { fill: #ff5a63; filter: drop-shadow(0 0 6px #ef2f3c) drop-shadow(0 0 14px rgba(239, 47, 60, .7)); }
.b-weiss { fill: #fffaf0; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px rgba(255, 255, 255, .6)); }
.b-gruen { fill: #5fe3a6; filter: drop-shadow(0 0 6px #2fd08a) drop-shadow(0 0 14px rgba(47, 208, 138, .7)); }
.garland { height: 34px; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .bulb { animation: glow 2.6s ease-in-out infinite; }
  .bulb:nth-of-type(3n) { animation-delay: .8s; }
  .bulb:nth-of-type(3n+1) { animation-delay: 1.7s; }
}
@keyframes glow { 50% { opacity: .35; } }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 55% at 88% 18%, rgba(239, 47, 60, .42), transparent 70%),
    radial-gradient(55% 60% at 8% 92%, rgba(47, 208, 138, .22), transparent 70%),
    radial-gradient(40% 40% at 60% 70%, rgba(255, 200, 74, .12), transparent 70%),
    linear-gradient(180deg, #0a1a14, var(--bg)); }
.hero-lights { position: absolute; inset: 0 0 auto 0; z-index: 2; }
.hero-in { position: relative; z-index: 2; padding-block: clamp(64px, 9vw, 104px) clamp(34px, 5vw, 60px); }
.hero-place { font-weight: 700; font-stretch: 80%; text-transform: uppercase; letter-spacing: .14em; font-size: .92rem; color: var(--gold); margin-bottom: 1.1em; display: flex; align-items: center; gap: 10px; }
.hero-place::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(239, 47, 60, .25); }
.hero h1 { font-size: clamp(3rem, 13.4vw, 11.2rem); font-stretch: 62%; line-height: .82; letter-spacing: -.012em; margin: 0; position: relative; z-index: 1; }
.hero h1 span { display: block; }
.h-a { color: var(--text); }
.h-b { color: transparent; -webkit-text-stroke: 2px var(--gold); padding-left: .36em; }
@supports not (-webkit-text-stroke: 2px #000) { .h-b { color: var(--gold); } }
.hero-ball { position: absolute; z-index: 2; right: clamp(0px, 3vw, 50px); top: clamp(150px, 21vw, 300px); width: clamp(110px, 24vw, 310px); transform: rotate(14deg); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(255, 200, 74, .28)); }
.ball { display: block; width: 100%; height: auto; }
.ball-seams path { stroke: #0d224a; stroke-width: 3.2; stroke-linecap: round; }
.ball-edge { stroke: rgba(0, 0, 0, .18); stroke-width: 2; }
.ball-cap { fill: var(--gold); }
.ball-ring { stroke: var(--gold); stroke-width: 4; }
@media (prefers-reduced-motion: no-preference) {
  .hero-ball { animation: float 7s ease-in-out infinite; }
}
@keyframes float { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-16px); } }
.hero-row { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 64px); align-items: end; margin-top: clamp(26px, 4vw, 48px); }
.hero-date { display: flex; align-items: flex-end; gap: 14px; }
.d-big { font-weight: 900; font-stretch: 62%; font-size: clamp(4rem, 11vw, 8rem); line-height: .8; color: var(--red-2); letter-spacing: -.02em; }
.d-small { font-weight: 700; font-stretch: 80%; text-transform: uppercase; letter-spacing: .08em; line-height: 1.15; font-size: clamp(.9rem, 1.6vw, 1.1rem); padding-bottom: .15em; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 34ch; color: rgba(244, 241, 232, .92); margin-bottom: 1.1em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero-note { color: var(--mute); }
.hero-closed { border-left: 3px solid var(--gold); padding-left: 14px; font-weight: 600; color: var(--text); margin: 0; }
.countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(30px, 5vw, 56px); }
.countdown dl { display: flex; gap: 10px; margin: 0; }
.countdown dl div { min-width: 82px; padding: 12px 10px 10px; text-align: center; background: rgba(244, 241, 232, .06); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.countdown dd { margin: 0; font-weight: 900; font-stretch: 66%; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mute); margin-top: 5px; }
.countdown p { margin: 0; color: var(--mute); font-weight: 600; }

/* Laufband */
.ticker { position: relative; z-index: 2; background: var(--red); color: #fff; overflow: hidden; transform: rotate(-1.2deg) scale(1.03); margin-block: 18px 30px; box-shadow: 0 14px 40px rgba(239, 47, 60, .35); }
.ticker-run { display: flex; width: max-content; }
.ticker span { font-weight: 900; font-stretch: 66%; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.6rem); padding: 12px 0; white-space: nowrap; display: flex; align-items: center; }
.ticker span::after { content: ""; width: .5em; height: .5em; margin-inline: 1.1em; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-run { animation: ticker 28s linear infinite; }
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* Schnee */
.snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .8;
  background-image:
    radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 110px 90px, #fff 50%, transparent 51%),
    radial-gradient(4px 4px at 190px 150px, rgba(255, 255, 255, .8) 50%, transparent 51%),
    radial-gradient(2px 2px at 60px 200px, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(5px 5px at 260px 60px, rgba(255, 255, 255, .35) 50%, transparent 51%);
  background-size: 300px 260px, 240px 220px, 340px 300px, 200px 240px, 420px 360px; }
@media (prefers-reduced-motion: no-preference) {
  .snow { animation: snow 24s linear infinite; }
}
@keyframes snow { to { background-position: 40px 520px, -30px 440px, 60px 300px, -20px 480px, 30px 360px; } }

@media (max-width: 760px) {
  .hero-row { grid-template-columns: 1fr; align-items: start; }
  .hero-ball { top: 150px; right: 6px; width: 104px; }
  .countdown dt { font-size: .62rem; letter-spacing: .04em; }
  .countdown dl div { padding-inline: 4px; }
  .hero-place { max-width: 60%; }
  .countdown dl { gap: 6px; width: 100%; }
  .countdown dl div { min-width: 0; flex: 1; }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
}

/* Knöpfe */
.btn { display: inline-block; font: 800 1rem/1 var(--font); font-stretch: 85%; text-transform: uppercase; letter-spacing: .04em; padding: 17px 28px; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform .14s, box-shadow .14s, background .14s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-red, .btn-twint { background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(239, 47, 60, .45); }
.btn-red:hover, .btn-twint:hover { background: var(--red-2); color: #fff; box-shadow: 0 14px 38px rgba(239, 47, 60, .6); }
.btn-twint { font-size: 1.08rem; padding: 20px 34px; }
.btn-sun { background: var(--gold); color: #1a1300; box-shadow: 0 10px 28px rgba(255, 200, 74, .28); }
.btn-sun:hover { background: #ffd874; color: #1a1300; }
.btn-line, .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--text); }
.btn-line:hover, .btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-small { font-size: .82rem; padding: 9px 14px; background: #fff; color: #0f3d2e; box-shadow: inset 0 0 0 1.5px #0f3d2e; }
.btn-small:hover { background: #0f3d2e; color: #fff; }
.btn-danger { color: #a81c26; box-shadow: inset 0 0 0 1.5px #a81c26; }
.btn-danger:hover { background: #a81c26; color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Kacheln */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 20px; display: flex; flex-direction: column; min-height: 170px; }
.tile p { margin: 0; }
.tile-k { color: var(--mute); font-weight: 600; font-size: .92rem; }
.tile-v { font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1; margin-top: auto !important; padding-top: 18px; }
.tile-s { color: var(--mute); font-size: .95rem; margin-top: 8px !important; }
.tile-date { grid-row: span 2; background: linear-gradient(150deg, #b3202b, #6d0f18); border-color: transparent; }
.tile-date .tile-k, .tile-date .tile-s { color: rgba(255, 255, 255, .8); }
.tile-date .tile-v { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.tile-place { grid-column: span 2; }
.tile-price { background: linear-gradient(150deg, var(--surface-2), var(--surface)); }
.tile-deadline .tile-v { color: var(--gold); }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr 1fr; } .tile-date, .tile-place { grid-column: span 2; grid-row: auto; } .tile { min-height: 140px; padding: 20px; } }
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .tile-date, .tile-place { grid-column: auto; } .tile { min-height: 0; } }

/* Kategorien */
.code { display: inline-block; font-weight: 900; font-stretch: 70%; font-size: 1.05rem; line-height: 1; background: var(--gold); color: #1a1300; padding: 6px 9px 5px; border-radius: 8px; min-width: 3em; text-align: center; }
.blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 28px; align-items: start; }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 12px; }
.block-time { font-weight: 900; font-stretch: 62%; font-size: clamp(2.6rem, 6vw, 4rem); line-height: .9; margin: 0 0 12px; color: var(--text); }
.block:first-child .block-time { color: var(--red-2); }
.block:nth-child(2) .block-time { color: var(--gold); }
.block-time span { display: block; font-weight: 500; font-stretch: 100%; font-size: .92rem; line-height: 1.4; color: var(--mute); margin-top: 8px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font-size: .8rem; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; }
th.num, td.num { text-align: right; padding-right: 0; }
.cats td small { display: block; }
.cats td.num { font-weight: 800; }
.tag { display: inline-block; background: var(--red); color: #fff; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; margin-left: 8px; border-radius: 999px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 56px; }
.two h2 { margin-top: 0; }
.facts { padding: 0; list-style: none; }
.facts li { margin-bottom: .7em; padding-left: 1.5em; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: .62em; height: .62em; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* Formulare */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; counter-reset: s; font-weight: 600; color: var(--mute); }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; margin-right: 8px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .88rem; font-weight: 800; }
.steps li[aria-current] { color: var(--text); }
.steps li[aria-current]::before { background: var(--red); border-color: var(--red); color: #fff; }
.form fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px 24px 26px; margin: 26px 0 0; }
.form legend { font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: 1.6rem; line-height: 1; padding: 0 10px; margin-left: -10px; }
.form legend small { font-weight: 500; font-stretch: 100%; text-transform: none; font-size: .9rem; }
.f { margin-top: 18px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 20px; align-items: end; }
.row4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0 16px; align-items: end; }
label, .label { display: block; font-weight: 600; margin-bottom: 7px; }
label small { display: block; font-weight: 400; }
input[type="text"], input:not([type]), input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="url"], select, textarea {
  width: 100%; font: 400 1.0625rem/1.3 var(--font); color: var(--text); background: rgba(0, 0, 0, .28); border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px; color-scheme: dark; }
::placeholder { color: #71837a; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(255, 200, 74, .5); outline-offset: 0; border-color: var(--gold); }
.err { color: var(--bad); font-weight: 600; margin: 6px 0 0; font-size: .95rem; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1.5px solid var(--line-2); border-radius: 16px; background: rgba(0, 0, 0, .22); padding: 14px 16px; margin: 0; cursor: pointer; font-weight: 600; position: relative; transition: border-color .12s, background .12s, transform .12s; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.choice small { display: block; font-weight: 400; }
.choice:hover { border-color: var(--text); transform: translateY(-1px); }
.choice:has(input:checked) { border-color: var(--gold); background: rgba(255, 200, 74, .12); box-shadow: 0 0 0 1.5px var(--gold), 0 10px 30px rgba(255, 200, 74, .14); }
.choice:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.choice.is-full { opacity: .45; cursor: not-allowed; transform: none; }
.choice.is-full input { cursor: not-allowed; }
.choice-price { font-weight: 800; white-space: nowrap; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--red); margin: 0; }
.check label { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-weight: 400; align-items: start; }
.check input { margin-top: 3px; }
.check { margin: 26px 0; }
.fine { font-size: .92rem; color: var(--mute); max-width: 60ch; }
.notice { border-left: 4px solid var(--gold); background: var(--surface); border-radius: 0 14px 14px 0; padding: 14px 18px; font-weight: 600; max-width: 62ch; }
.notice-bad { border-color: var(--bad); color: var(--bad); }
.notice-good { border-color: var(--good); color: var(--good); }
.rate { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rate:last-child { border-bottom: 0; padding-bottom: 0; }
.rate .label { margin: 0; font-weight: 500; }
.scale { display: flex; gap: 6px; }
.scale label { margin: 0; position: relative; }
.scale input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.scale span { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-2); border-radius: 50%; font-weight: 800; }
.scale input:checked + span { background: var(--gold); border-color: var(--gold); color: #1a1300; }
.scale input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (max-width: 560px) { .rate { grid-template-columns: 1fr; } .form fieldset { padding-inline: 16px; } }

/* Zusammenfassung, Listen, Ranglisten, Fotos */
.star { fill: var(--gold); }
.ok-star { width: 60px; height: 60px; margin-bottom: 10px; filter: drop-shadow(0 0 18px rgba(255, 200, 74, .6)); }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 22px; max-width: 600px; }
.summary dt, .summary dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.summary dd:last-child, .summary dt:nth-last-of-type(1) { border-bottom: 0; }
.summary dt { color: var(--mute); }
.summary dd { font-weight: 700; }
.teamgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.teamcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px 10px; }
.teamcol h2 { font-size: 1.35rem; margin-top: 0; display: flex; gap: 10px; align-items: center; }
.teamcol ol { padding-left: 1.5em; }
.teamcol li { padding: 4px 0; font-weight: 600; }
.teamcol li::marker { color: var(--mute); font-weight: 400; }
.years { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.years a { font-weight: 800; padding: 7px 18px; box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 999px; text-decoration: none; color: var(--text); }
.years a[aria-current="page"] { background: var(--text); color: var(--bg); box-shadow: none; }
.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px; }
h2 .code { vertical-align: middle; margin-right: 8px; font-size: .5em; }
.rank th[scope="row"] { font-weight: 700; }
.rank tr.first th, .rank tr.first td { background: linear-gradient(90deg, rgba(255, 200, 74, .2), rgba(255, 200, 74, 0)); }
.rank tr.first td:first-child { color: var(--gold); }
.rank td:first-child { width: 4em; padding-right: 14px; font-weight: 900; font-stretch: 70%; font-size: 1.15rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; transition: transform .2s; }
.gallery a:hover img { transform: scale(1.02); outline: 2px solid var(--gold); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--gold); }
.prose h2 { font-size: 1.5rem; }

/* TSV-Hinweis in der Vereinsfarbe */
.tsv { margin-top: 40px; }
.tsv-in { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 60px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px;
  background: radial-gradient(70% 120% at 0% 0%, #1b3f86, var(--navy) 60%); border: 1px solid rgba(255, 255, 255, .12); }
.tsv img { width: clamp(150px, 22vw, 250px); }
.tsv h2 { margin-top: 0; }
.tsv p { max-width: 56ch; color: rgba(244, 241, 232, .9); }
.tsv p:last-child { margin: 1.4em 0 0; }
@media (max-width: 640px) { .tsv-in { grid-template-columns: 1fr; } }

/* Fuss */
.foot { margin-top: 40px; border-top: 1px solid var(--line); color: var(--mute); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 30px; }
.foot b { color: var(--text); }
.foot a { color: var(--text); }
.foot a:hover { color: var(--gold); }
.foot p { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; }

/* OK-Bereich: hell und nüchtern, zum Arbeiten */
.admin { background: #f3f1ec; color: #15241e; font-size: 1rem; }
.admin a { color: #0f3d2e; }
.admin a:hover { color: #a81c26; }
.admin small, .admin .muted { color: #55635c; }
.admin h1, .admin h2 { text-transform: none; font-stretch: 85%; font-weight: 800; line-height: 1.1; color: #0a2b20; }
.admin h1 { font-size: 2rem; }
.admin h2 { font-size: 1.4rem; }
.admin .top { background: #0a2b20; backdrop-filter: none; -webkit-backdrop-filter: none; }
.admin .top a, .admin .linklike { color: #f4f1e8; }
.admin .top nav a[aria-current="page"] { background: var(--gold); color: #0a2b20; }
.admin-main { padding-block: 28px 60px; width: min(100% - 32px, 1320px); }
.admin input[type="text"], .admin input:not([type]), .admin input[type="email"], .admin input[type="tel"], .admin input[type="number"], .admin input[type="password"], .admin input[type="date"], .admin input[type="url"], .admin select, .admin textarea {
  background: #fff; color: #15241e; border-color: #b9c2bc; border-radius: 10px; color-scheme: light; }
.admin input:focus-visible, .admin select:focus-visible, .admin textarea:focus-visible { border-color: #0f3d2e; }
.admin th, .admin td { border-color: #ddd5c4; }
.admin thead th { text-transform: none; letter-spacing: 0; }
.admin .notice { background: #fff; border-color: #0f3d2e; color: #15241e; }
.admin .notice-bad { border-color: #a81c26; color: #a81c26; }
.admin .form fieldset { background: #fff; border-color: #ddd5c4; }
.admin .btn-sun { box-shadow: none; }
.admin .code { background: #0f3d2e; color: var(--gold); font-size: .9rem; }
.flash { background: #fff7df; border: 1.5px solid #e3b24c; border-radius: 10px; padding: 11px 15px; font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin-bottom: 8px; }
.card { background: #fff; border: 1px solid #ddd5c4; border-radius: 12px; padding: 14px 16px; }
.card .big { font-weight: 900; font-stretch: 70%; font-size: 2.2rem; line-height: 1; display: block; margin: 8px 0 4px; color: #0a2b20; }
.card .warn { color: #a81c26; font-weight: 700; }
.switches { display: grid; gap: 10px; max-width: 660px; }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #fff; border: 1px solid #ddd5c4; border-radius: 12px; padding: 13px 16px; }
.switch p { margin: 0; }
.state-on { color: #1c6b47; font-weight: 700; }
.state-off { color: #a81c26; font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 14px 0 18px; }
.toolbar label { margin: 0; font-size: .88rem; }
.toolbar select, .toolbar input { padding: 8px 10px; width: auto; display: block; margin-top: 3px; }
.admin .tablewrap { padding: 0; background: #fff; border-color: #ddd5c4; border-radius: 12px; }
.data { font-size: .92rem; }
.data th, .data td { padding: 9px 10px; }
.data thead th { background: #0a2b20; color: #f4f1e8; white-space: nowrap; font-size: .86rem; }
.data tbody tr:nth-child(even) { background: #faf8f3; }
.strength { white-space: nowrap; }
.strength b { display: inline-block; min-width: 2.4em; font-variant-numeric: tabular-nums; }
.strength meter { width: 64px; height: 10px; vertical-align: middle; }
.pill { display: inline-block; padding: 2px 10px; font-weight: 700; font-size: .82rem; border-radius: 999px; white-space: nowrap; background: #eee; }
.pill-paid { color: #fff; background: #1c6b47; }
.pill-pending { color: #6b4700; background: #fde9b8; }
.pill-expired, .pill-cancelled { color: #55505c; background: #e7e4ea; }
.pill-refunded { color: #fff; background: #a81c26; }
.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.actions .btn { white-space: nowrap; }
.actions form { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.actions select { padding: 6px 8px; width: auto; max-width: 9.5em; font-size: .88rem; }
.adminform { max-width: 820px; }
.adminform fieldset { border: 1px solid #ddd5c4; border-radius: 12px; background: #fff; padding: 4px 18px 20px; margin: 0 0 22px; }
.adminform legend { font-weight: 800; font-size: 1.2rem; padding: 0 8px; color: #0a2b20; }
.grid-cats { display: grid; grid-template-columns: 4.6em 1.3fr 1.1fr 7em 5.5em 5em 6em; gap: 6px 8px; align-items: center; font-size: .92rem; }
.grid-cats input { padding: 8px 9px; }
.grid-cats .head { font-weight: 600; font-size: .84rem; }
.grid-cats label { margin: 0; display: flex; gap: 6px; align-items: center; }
@media (max-width: 800px) { .grid-cats { grid-template-columns: 1fr 1fr; } .grid-cats .head { display: none; } }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumbs figure { margin: 0; background: #fff; border: 1px solid #ddd5c4; border-radius: 10px; padding: 6px; }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 6px; border-radius: 6px; }
.login { max-width: 400px; }
.admin .form.login .f { margin-top: 14px; }

/* Schmale Bildschirme: Kategorientabelle ohne Kopfzeile, lange Wörter dürfen umbrechen */
@media (max-width: 520px) {
  .block { padding: 20px 18px 8px; }
  .cats thead { display: none; }
  .cats td { overflow-wrap: anywhere; }
  .cats th[scope="row"] { padding-right: 10px; }
  .tablewrap { padding-inline: 14px; }
}