/* TANIC Portal (Mitgliederbereich) — HELL, im Website-Stil (Konzept Abschnitt 15).
   Heute: neutrales Platzhalter-Design wie die Websites; beim echten Branding werden
   diese Grundwerte über das site-kit gemeinsam mit den Websites getauscht. */
:root {
  --bg: #f6f7f8; --karte: #ffffff; --linie: #e3e6ea;
  --text: #1d2733; --gedimmt: #66707c; --akzent: #0e7490; --akzent-dunkel: #155e75;
  --ok: #15803d; --fehler: #b91c1c; --sperr: #eef0f2;
}
* { box-sizing: border-box; }
/* Das hidden-Attribut muss IMMER gewinnen (Befund 03.08.: .konto-klapp hat display:flex,
   dadurch blieb das Konto-Menue dauerhaft aufgeklappt). Gilt fuer alle Portal-Seiten. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 -apple-system, "Segoe UI", Roboto, sans-serif; }
header.portal { background: var(--karte); border-bottom: 1px solid var(--linie); padding: 12px 22px; display: flex; align-items: center; gap: 0; min-height: 52px; box-sizing: border-box; }
header.portal .sub { margin-left: 10px; }
header.portal .kopf-luecke { flex: 1; }
header.portal a.kopf-reiter { margin-left: 16px; display: inline-flex; align-items: center; line-height: 1; }
header.portal a.kopf-reiter.aktiv { font-weight: 700; }
header.portal b { font-size: 17px; color: var(--akzent-dunkel); }
header.portal .sub { color: var(--gedimmt); font-size: 13px; }
header.portal a { color: var(--akzent); text-decoration: none; font-size: 14px; }
main { max-width: 1140px; margin: 0 auto; padding: 26px 22px 60px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
h1 { font-size: 22px; margin: 0 0 6px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.hinweis { color: var(--gedimmt); }
p.hinweis { font-size: 14px; margin: 4px 0 14px; }
label { display: block; font-size: 13px; color: var(--gedimmt); margin: 12px 0 4px; }
input, textarea, select { width: 100%; padding: 10px 11px; border: 1px solid var(--linie); border-radius: 9px; font: inherit; background: #fff; color: var(--text); }
textarea { min-height: 90px; resize: vertical; }
.zeile { display: flex; gap: 12px; } .zeile > div { flex: 1; }
button.haupt { margin-top: 16px; border: none; background: var(--akzent); color: #fff; border-radius: 10px; padding: 11px 20px; font: inherit; font-weight: 600; cursor: pointer; }
button.haupt:hover { background: var(--akzent-dunkel); }
button.neben { margin-top: 10px; border: 1px solid var(--linie); background: #fff; color: var(--text); border-radius: 10px; padding: 9px 16px; font: inherit; cursor: pointer; }
.meldung { margin-top: 12px; font-size: 14px; } .meldung.ok { color: var(--ok); } .meldung.fehler { color: var(--fehler); }
.devlink { margin-top: 12px; padding: 10px 12px; background: #ecfeff; border: 1px dashed var(--akzent); border-radius: 9px; font-size: 14px; }
.devlink a { color: var(--akzent-dunkel); font-weight: 600; }
a.link { color: var(--akzent); }
.haken { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 14px; color: var(--text); }
.haken input { width: auto; margin-top: 3px; }
.hp { position: absolute; left: -9999px; top: -9999px; }
.nudge { background: #fffbeb; border: 1px solid #f2d34a; border-radius: 10px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px; }
.gesperrt-karte { background: var(--sperr); border: 1px solid var(--linie); border-radius: 14px; padding: 0 0 14px; text-align: center; color: var(--gedimmt); }
.gesperrt-banner { height: 92px; background: repeating-linear-gradient(45deg, #e7eaee, #e7eaee 12px, #eef0f2 12px, #eef0f2 24px); border-radius: 14px 14px 0 0; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.avatar { width: 74px; height: 74px; border-radius: 50%; background: var(--akzent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 600; margin: -37px auto 8px; border: 4px solid var(--karte); }
.avatar.grau { background: #aab2bb; }
.badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; background: #e8eaed; color: var(--gedimmt); }
.badge.wildcard { background: #fef3c7; color: #92400e; }
.badge.mitglied { background: #dcfce7; color: #166534; }
.weiche { display: flex; gap: 14px; flex-wrap: wrap; }
.weiche .option { flex: 1; min-width: 240px; border: 2px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.weiche .option.aktiv { border-color: var(--akzent); }
.weiche .option.bald { opacity: .6; }
.weiche .preis { font-size: 20px; font-weight: 700; color: var(--akzent-dunkel); }

/* Sprachschalter DE·EN in der Kopfzeile + auf der Anmelden-Seite (Tim, 02.08.) */
.sprachwahl { margin-left: 16px; display: inline-flex; gap: 5px; align-items: center; }
.sprachwahl a { color: var(--gedimmt); text-decoration: none; font-size: 12.5px; letter-spacing: .04em; }
.sprachwahl a.aktiv { color: var(--akzent-dunkel); font-weight: 700; }
.sprachwahl i { font-style: normal; color: var(--gedimmt); opacity: .6; }
.sprachwahl .flagge { font-size: 17px; line-height: 1; text-decoration: none; }
.sprachwahl .flagge.aus { filter: grayscale(1); opacity: .4; cursor: default; }
/* Nachrichten-Verlauf als Tabelle (Tim, 03.08.): Datum mit Uhrzeit, dann die Nachricht */
.nachr-tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.nachr-tab th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedimmt); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.nachr-tab td { padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; line-height: 1.5; }
.nachr-tab tr:last-child td { border-bottom: none; }
.nachr-zeit { white-space: nowrap; color: var(--gedimmt); font-size: 13px; width: 1%; }
@media (max-width: 560px) {
  .nachr-tab, .nachr-tab tbody, .nachr-tab tr, .nachr-tab td { display: block; }
  .nachr-tab thead { display: none; }
  .nachr-tab tr { padding: 8px 0; border-bottom: 1px solid var(--linie); }
  .nachr-tab td { border: none; padding: 0 4px; }
  .nachr-zeit { width: auto; margin-bottom: 2px; }
}

.kopf-reiter.mit-zahl { font-weight: 700; }
.kopf-zahl { background: var(--akzent); color: #fff; border-radius: 999px; font-size: 11px;
  font-weight: 700; padding: 1px 7px; margin-left: 6px; display: inline-block; line-height: 1.5; }
/* Im Dunkelmodus ist --akzent hell - dann braucht der Badge dunkle Schrift (Kontrast) */
:root[data-theme="dunkel"] .kopf-zahl { color: #08131a; }
/* Nachrichten-Symbole folgen dem Thema statt fester Hellmodus-Farben */
.nachr-ok { color: var(--ok); font-weight: 700; }
.nachr-fehler { color: var(--fehler); font-weight: 700; }
.nachr-info { color: var(--gedimmt); }

/* Konto-Menü rechts in der Kopfzeile (Tim, 03.08. - FBK-CCC97B84): die Reiterleiste bleibt auf
   jeder Seite gleich, Mein Profil / Einstellungen / Abmelden stecken in EINEM Klappmenü,
   das den eigenen Namen trägt. */
/* Zwei Klappmenues in der Kopfzeile (Uebersicht + Konto) teilen sich Mechanik und Optik */
.kopf-menue { position: relative; display: inline-flex; margin-left: 16px; }
header.portal .kopf-menue-knopf { margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--akzent); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
header.portal .kopf-menue-knopf.aktiv { font-weight: 700; }
header.portal .kopf-menue-knopf .pfeil { font-size: 10px; color: var(--gedimmt); }
.konto-knopf { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px 4px 5px;
  border: 1px solid transparent; border-radius: 999px; background: none; color: var(--akzent);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.konto-knopf:hover, .konto-menue.offen .konto-knopf { border-color: var(--linie); background: var(--bg); }
.konto-knopf.aktiv { font-weight: 700; }
.konto-knopf img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--linie); }
.konto-knopf .konto-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-knopf .pfeil { font-size: 10px; color: var(--gedimmt); }
.kopf-klapp { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 200px;
  display: flex; flex-direction: column; padding: 6px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: 12px; box-shadow: 0 10px 26px rgba(10, 14, 20, .16); }
.kopf-klapp a, .kopf-klapp button { display: block; width: 100%; margin: 0; padding: 9px 12px; border: none;
  border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px;
  text-align: left; text-decoration: none; cursor: pointer; }
.kopf-klapp a:hover, .kopf-klapp button:hover { background: var(--bg); }
.kopf-klapp a.aktiv { font-weight: 700; color: var(--akzent-dunkel); }
.kopf-klapp .trenner { height: 1px; margin: 5px 4px; background: var(--linie); }
.konto-menue .kopf-klapp { left: auto; right: 0; }

/* Privatsphäre-Kacheln (Tim, 02.08.) */
.priv-kacheln { display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 16px; }
.priv-kachel { cursor:pointer; border:2px solid var(--linie); border-radius:14px; padding:10px; width:180px;
  text-align:center; transition:border-color .12s, transform .12s; }
.priv-kachel:hover { transform:translateY(-2px); }
.priv-kachel.gewaehlt { border-color:var(--akzent); box-shadow:0 0 0 3px rgba(37,99,168,.18); }
.priv-card { background:#1b2333; color:#fff; border-radius:12px; padding:22px 10px 16px; display:flex;
  flex-direction:column; align-items:center; gap:9px; }
.priv-ava { width:56px; height:56px; border-radius:50%; background:#2563a8; display:flex; align-items:center;
  justify-content:center; font-size:24px; color:#fff; overflow:hidden; }
.priv-ava img { width:100%; height:100%; object-fit:cover; }
.priv-ava.anon { background:#2a3347; }
.priv-badge { font-size:9.5px; letter-spacing:.06em; font-weight:700; padding:3px 9px; border-radius:999px; }
.priv-badge.blau { background:#0d3b66; color:#fff; }
.priv-badge.grau { background:#4b5563; color:#fff; }
.priv-label { font-size:12.5px; margin-top:8px; color:var(--gedimmt); line-height:1.4; }
.karte .ev-detail { border-top:1px solid var(--linie); margin-top:12px; padding-top:12px; }
.ev-detail img.ev-bild { max-width:100%; max-height:260px; object-fit:contain; border-radius:10px; display:block; margin-bottom:10px; }
.teiln-liste { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.teiln-liste span { background:rgba(37,99,168,.1); border:1px solid var(--linie); border-radius:999px;
  padding:3px 12px; font-size:13px; }

/* Teilnehmer-Kacheln + Kostenkalkulation (Tim, 02.08.) */
.teiln-kacheln { display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
.tk { background:#1b2333; color:#fff; border-radius:14px; padding:18px 12px 14px; width:150px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.tk-ava { width:62px; height:62px; border-radius:50%; background:#2563a8; overflow:hidden; display:flex;
  align-items:center; justify-content:center; font-size:20px; font-weight:700; border:3px solid #3b82c4; }
.tk-ava.gold { border-color:#d4a017; box-shadow:0 0 0 2px rgba(212,160,23,.35); }
.tk-ava img { width:100%; height:100%; object-fit:cover; }
.tk-name { font-size:14px; line-height:1.3; }
.tk-badge { font-size:8.5px; letter-spacing:.07em; font-weight:800; padding:3px 9px; border-radius:999px; background:#0d3b66; color:#fff; white-space:nowrap; }
.tk-stats { display:flex; gap:0; margin-top:2px; }
.tk-stats span { display:flex; flex-direction:column; font-size:8.5px; letter-spacing:.06em; color:#9aa7bd;
  padding:0 10px; }
.tk-stats span + span { border-left:1px solid #2c3852; }
.tk-stats b { font-size:16px; color:#fff; }
.kosten-block { border:1px solid var(--linie); border-radius:12px; padding:12px 14px; margin-top:14px; }
.kosten-tab { border-collapse:collapse; margin:8px 0 2px; font-size:13.5px; }
.kosten-tab td { padding:3px 18px 3px 0; }
.kosten-tab td:last-child { text-align:right; padding-right:0; }
.kosten-tab tr.summe td { border-top:1px solid var(--linie); font-weight:700; padding-top:6px; }

/* Eingeklappte Event-Karte (Tim, 02.08.): Thumbnail links, Infos rechts, Klick klappt auf */
.ev-kopf { display:flex; gap:14px; align-items:flex-start; cursor:pointer; }
.ev-thumb { width:96px; height:96px; border-radius:12px; object-fit:cover; flex:none; }
.ev-thumb.leer { background:#1b2333; display:flex; align-items:center; justify-content:center; font-size:34px; }
.pfeil-auf { color:var(--akzent); font-size:15px; }
.ev-kopf:hover .pfeil-auf { transform:translateY(1px); }

/* Social-Prüfen-Knopf (Tim, 02.08.) */
.sozial-pruefen { font-size: 11.5px; margin-left: 8px; color: var(--akzent); }
.ev-kopf-rechts { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; max-width:280px; }
.ev-kopf-aktion { display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
.ev-kopf-aktion .haupt, .ev-kopf-aktion .neben { padding:8px 14px; font-size:13.5px; }

/* Farbige Status-Badges (Tim, 02.08.) */
.badge.gelb { background:#fdf3d7; color:#8a6d1a; }
.badge.gruen { background:#ddf3e4; color:#1b7a3d; }
.badge.grau { background:#ececec; color:#666; }

/* Große Profil-Kachel (Tim, 02.08.) - Optik wie die Athleten-Detailkachel der Website */
.gk { background:#141a26; color:#fff; border-radius:18px; padding:22px; display:flex; gap:26px; flex-wrap:wrap; }
.gk-links { flex:1 1 300px; min-width:260px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.gk-action { width:100%; border-radius:14px; overflow:hidden; aspect-ratio:4/3; }
.gk-action img { width:100%; height:100%; object-fit:cover; display:block; }
.gk-rechts { flex:1 1 300px; min-width:260px; display:flex; flex-direction:column; gap:10px; }
.gk-stats { display:flex; gap:10px; }
.gk-box { flex:1; background:#1d2534; border-radius:12px; padding:14px 10px; text-align:center; }
.gk-box b { display:block; font-size:26px; }
.gk-box span { font-size:10px; letter-spacing:.08em; color:#8b93a7; }
.gk-erste { background:#1d2534; border-radius:12px; padding:12px 14px; text-align:center; }
.gk-erste b { display:block; font-size:15px; }
.gk-erste span { font-size:10px; letter-spacing:.08em; color:#8b93a7; }
.gk-awards { display:flex; flex-direction:column; gap:6px; }
.gk-award { border:1.5px solid #d4af37; color:#f0c14b; border-radius:999px; padding:4px 14px; font-size:12.5px; font-weight:600; width:fit-content; }

/* Handy-Tauglichkeit (Tim, 02.08.): Kopfzeile umbrechen, engere Abstände, Karten stapeln */
@media (max-width: 720px) {
  header.portal { flex-wrap: wrap; row-gap: 4px; padding: 10px 12px; }
  header.portal .sub { display: none; }
  header.portal a.kopf-reiter { font-size: 13px; margin-left: 0; margin-right: 14px; }
  header.portal .kopf-menue-knopf { font-size: 13px; }
  .kopf-menue { margin-left: 0; margin-right: 14px; }
  /* Am Handy stehen im Kopf ZWEI feste Zeilen (Tim, 03.08. - FBK-4C726A53): oben der Vereinsname,
     rechts daneben Konto-Menue und Sprache, darunter die Reiter. Vorher passte das Konto-Menue
     nicht mehr neben die Reiter und rutschte allein in eine dritte Zeile - dort stand es dann
     mitten im Nichts, die Flaggen abgehaengt am Rand. Die Reihenfolge macht order:, das HTML
     bleibt auf allen Seiten unveraendert. */
  header.portal b { order: 1; }
  header.portal .konto-menue { order: 2; margin-left: auto; margin-right: 0; }
  header.portal .sprachwahl { order: 3; margin-left: 14px; }
  /* Die Luecke ist am Handy der Zeilenumbruch: volle Breite, aber ohne eigene Hoehe */
  header.portal .kopf-luecke { order: 4; flex-basis: 100%; height: 0; }
  header.portal .kopf-menue:not(.konto-menue),
  header.portal a.kopf-reiter { order: 5; }
  /* Am Handy klappen beide Menues unter der GANZEN Kopfzeile auf (Befund 03.08.: sonst legt
     sich das Uebersicht-Menue ueber den Konto-Knopf und faengt dessen Tipp ab) */
  header.portal { position: relative; }
  .kopf-menue { position: static; }
  .kopf-klapp, .konto-menue .kopf-klapp { left: 12px; right: 12px; top: 100%; min-width: 0; }
  .konto-knopf { font-size: 13px; padding: 3px 8px 3px 4px; }
  .konto-knopf .konto-name { max-width: 110px; }
  main { padding: 16px 12px 50px; }
  .karte { padding: 14px 14px; border-radius: 12px; }
  .ev-kopf { flex-wrap: wrap; }
  .ev-thumb { width: 72px; height: 72px; }
  .ev-kopf-rechts { flex-direction: row; align-items: center; width: 100%; max-width: none; justify-content: flex-end; gap: 10px; }
  .gk { padding: 14px; gap: 16px; }
  .priv-kacheln { justify-content: center; }
  /* Zwei Felder nebeneinander werden am Handy zu schmal (Tim, 02.08.: Handynummer war nur noch
     ein Stummel neben der Vorwahl) - deshalb stapeln sich Formularzeilen hier untereinander. */
  .zeile { flex-wrap: wrap; }
  .zeile > div { flex: 1 1 100%; min-width: 0; }
}

/* ---------- Dunkel-Modus (Tim, 02.08.): Auswahl in den Einstellungen, portal-basis.js setzt
   data-theme="dunkel" aufs <html>-Element. Website-Kacheln (tk/gk/priv-card) sind ohnehin dunkel. */
:root[data-theme="dunkel"] {
  --bg: #12151a; --karte: #1c2027; --linie: #2b313a;
  --text: #e7e9ee; --gedimmt: #98a1ad; --akzent: #38bdc8; --akzent-dunkel: #7dd3dc;
  --ok: #4ade80; --fehler: #f87171; --sperr: #22262e;
}
:root[data-theme="dunkel"] input, :root[data-theme="dunkel"] textarea, :root[data-theme="dunkel"] select { background: #14181e; }
:root[data-theme="dunkel"] button.haupt { color: #08131a; }
:root[data-theme="dunkel"] button.haupt:hover { background: #7dd3dc; }
:root[data-theme="dunkel"] button.neben { background: #1c2027; }
:root[data-theme="dunkel"] .devlink { background: #14313a; }
:root[data-theme="dunkel"] .nudge { background: #2c2712; border-color: #8a7a1e; }
:root[data-theme="dunkel"] .badge { background: #2b313a; color: var(--gedimmt); }
:root[data-theme="dunkel"] .badge.wildcard { background: #3b3117; color: #f2d491; }
:root[data-theme="dunkel"] .badge.mitglied { background: #143220; color: #86efac; }
:root[data-theme="dunkel"] .badge.gelb { background: #3b3117; color: #f2d491; }
:root[data-theme="dunkel"] .badge.gruen { background: #143220; color: #86efac; }
:root[data-theme="dunkel"] .badge.grau { background: #2b313a; color: #98a1ad; }
:root[data-theme="dunkel"] .gesperrt-banner { background: repeating-linear-gradient(45deg, #20242b, #20242b 12px, #262b33 12px, #262b33 24px); }
:root[data-theme="dunkel"] .avatar.grau { background: #4a5158; }