/* Tischtennis-Übungen TV Welle — mobil zuerst. Farben wie die WhatsApp-Grafiken. */
@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/Inter-Regular.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/Inter-Italic.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../fonts/Inter-Medium.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fonts/Inter-SemiBold.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(../fonts/Inter-Bold.ttf) format("truetype"); }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(../fonts/Inter-ExtraBold.ttf) format("truetype"); }

:root {
  /* Weißer Hintergrund (Svens Wunsch 03.10.2026); Tisch in den Skizzen bleibt blau */
  --bg: #ffffff;
  --karte: #eef3f8;
  --karte-hell: #e1eaf3;
  --dunkel: #123049;   /* Schrift auf Orange */
  --linie: #cfdbe7;
  --orange: #ff8a3d;   /* Flächen */
  --orange-dunkel: #e86f22;
  --akzent: #c95a10;   /* orange Schrift auf Weiß */
  --text: #123049;
  --text-2: #3b5872;
  --text-3: #687f96;
  --rot: #c93c3c;
  --gelb: #f2a900;     /* Sterne */
  --gruen: #2a8f5f;
  --tisch: #1d6a96;    /* Platte in den Skizzen */
  --zone: #ffc79e;     /* helle Zielzone in den Skizzen */
  --radius: 16px;
  --gutter: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--akzent); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
main { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 var(--gutter) 6rem; flex: 1; }

/* ── Kopf ── */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-width: 0; }
.marke span { display: flex; flex-direction: column; line-height: 1.1; }
.marke b { font-weight: 800; font-size: 1.05rem; }
.marke small { color: var(--text-2); font-size: 0.78rem; }
.kopf nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.auswahl-link { color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 8px 10px; border-radius: 999px; background: var(--karte); }
.auswahl-link b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; border-radius: 999px; background: var(--orange); color: var(--dunkel); font-size: 0.8rem; }

/* ── Knöpfe ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange); color: var(--dunkel);
  font: inherit; font-weight: 700; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { background: var(--orange-dunkel); }
.knopf.zweit { background: var(--karte); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf.gefahr { background: transparent; color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.knopf.klein { min-height: 38px; padding: 0 14px; font-size: 0.9rem; }
.link { background: none; border: 0; color: var(--text-2); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }
.aktionen .knopf { flex: 1 1 auto; }

/* ── Filter ── */
.filter { padding: 12px 0 8px; margin-bottom: 4px; }
.kat-leiste { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 2px var(--gutter) 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.kat-leiste::-webkit-scrollbar { display: none; }
.kat-leiste .chip { flex-shrink: 0; scroll-snap-align: start; white-space: nowrap; }
.kat-leiste small { opacity: 0.7; font-weight: 500; }
button.chip { border: 0; color: var(--text); font: inherit; font-size: 0.9rem; }
button.chip.aktiv { color: var(--dunkel); }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; /* 16px verhindert iOS-Zoom */
  color: var(--text); background: var(--karte);
  border: 1px solid var(--linie); border-radius: 12px;
  padding: 11px 12px; min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
select { text-overflow: ellipsis; appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
#suche { margin-bottom: 8px; }
.filter-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.filter-reihe.chips { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--karte); font-size: 0.9rem; cursor: pointer; min-height: 36px; }
.chip input { width: auto; min-height: 0; accent-color: var(--orange); margin: 0; }
.chip.aktiv { background: var(--orange); color: var(--dunkel); font-weight: 600; }
.treffer { margin-left: auto; color: var(--text-2); font-size: 0.9rem; }

/* ── Liste ── */
.gruppe { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); margin: 1.5rem 0 0.6rem; }
#liste { display: grid; gap: 10px; }
.karte { position: relative; background: var(--karte); border-radius: var(--radius); }
.karte-link { display: block; padding: 14px 64px 14px 16px; color: inherit; text-decoration: none; border-radius: var(--radius); }
.karte-link:active { background: var(--karte-hell); }
.karte-kopf { display: flex; gap: 10px; justify-content: space-between; font-size: 0.78rem; color: var(--text-3); margin-bottom: 2px; }
.karte-kopf .kat { display: none; }
.karte h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.karte p { margin: 0 0 8px; color: var(--text-2); font-size: 0.95rem; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--text-2); }
.merken {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--linie);
  background: transparent; color: var(--text); font-size: 1.3rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.merken .haken { display: none; }
.merken[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--dunkel); font-weight: 800; }
.merken[aria-pressed="true"] .plus { display: none; }
.merken[aria-pressed="true"] .haken { display: inline; }
/* flache Liste (Sortierung nach Datum / Filter): Kategorie in der Karte zeigen */
#liste.flach .gruppe { display: none; }
#liste.flach .karte-kopf .kat { display: inline; color: var(--akzent); }
.leer { color: var(--text-2); text-align: center; padding: 2rem 0; }

/* ── Detail ── */
.zurueck { display: inline-block; color: var(--text-2); text-decoration: none; padding: 14px 0 8px; }
.detail .kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.detail .kicker a { text-decoration: none; }
.detail h1 { font-size: 2rem; }
.detail .ziel { font-size: 1.1rem; color: var(--text-2); margin: 0 0 1rem; }
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1rem; }
.fakten div { background: var(--karte); border-radius: 12px; padding: 10px 12px; }
.fakten .breit { grid-column: 1 / -1; }
.fakten dt { font-size: 0.75rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.fakten dd { margin: 0; font-weight: 600; }
.cue { margin: 0 0 1rem; padding: 14px 16px; border-left: 4px solid var(--orange); background: var(--karte); border-radius: 0 12px 12px 0; font-style: italic; font-size: 1.15rem; color: var(--text); }
.detail section { background: var(--karte); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
.detail section h2 { font-size: 1.05rem; margin-bottom: 8px; }
.detail ol, .detail ul { margin: 0; padding-left: 0; list-style: none; }
.detail li { position: relative; padding-left: 30px; margin: 6px 0; }
.punkte li::before { content: ""; position: absolute; left: 8px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.schritte, .stufen { counter-reset: n; }
.schritte li::before, .stufen li::before {
  counter-increment: n; content: counter(n);
  position: absolute; left: 0; top: 0.1em; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.75rem; font-weight: 800;
  background: var(--orange); color: var(--dunkel);
}
.stufen li::before { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 2px var(--orange); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags.sp { margin: -0.4rem 0 1rem; }
.tags.sp a { color: var(--akzent); box-shadow: inset 0 0 0 1px var(--orange); background: transparent; font-weight: 600; }
.tags a { font-size: 0.85rem; color: var(--text-2); background: var(--karte); padding: 4px 10px; border-radius: 999px; text-decoration: none; }
.blaettern { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.blaettern a { color: var(--text-2); text-decoration: none; max-width: 48%; }

/* ── Formular ── */
.formular { display: grid; gap: 14px; }
.formular.schmal { max-width: 360px; }
.formular label { display: grid; gap: 4px; font-weight: 600; font-size: 0.95rem; }
.formular small { font-weight: 400; color: var(--text-3); }
.formular textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.haken-feld { display: flex !important; align-items: center; gap: 10px; min-height: 46px; font-weight: 500 !important; cursor: pointer; }
.haken-feld input { width: 22px; height: 22px; min-height: 0; accent-color: var(--orange); margin: 0; }
.feste-id { margin: 0; color: var(--text-3); font-size: 0.9rem; }
.fehler { background: rgba(201, 60, 60, 0.08); border: 1px solid var(--rot); border-radius: 12px; padding: 4px 14px; margin-bottom: 1rem; }
.fehler p { margin: 8px 0; }
.hinweis { background: var(--karte); border-left: 4px solid var(--orange); border-radius: 8px; padding: 10px 14px; margin: 14px 0 0; }

/* ── Grafik ── */
.grafik-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grafik-layout > * { min-width: 0; }
.auswahl-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 12px; }
.auswahl-zeile { display: flex; align-items: center; gap: 4px; background: var(--karte); border-radius: 12px; padding: 4px 4px 4px 12px; }
.auswahl-zeile .nr { color: var(--akzent); font-weight: 800; width: 22px; flex-shrink: 0; }
.auswahl-zeile .name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.auswahl-zeile button { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); font-size: 1.1rem; cursor: pointer; flex-shrink: 0; }
.auswahl-zeile button:active { background: var(--karte-hell); }
.auswahl-zeile button:disabled { opacity: 0.25; }
.texte { background: var(--karte); border-radius: var(--radius); padding: 4px 14px 14px; }
.texte summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.texte label { display: grid; gap: 4px; font-size: 0.9rem; color: var(--text-2); margin-bottom: 10px; }
.texte input:not([type="checkbox"]) { background: var(--bg); }
.texte .haken-feld { min-height: 36px; margin-bottom: 2px; color: var(--text); }
#leinwand { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 24px rgba(18, 48, 73, 0.18); background: var(--bg); }
.aktionen.klebend { position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); margin-top: 12px; }
.aktionen.klebend .knopf { box-shadow: 0 4px 16px rgba(18, 48, 73, 0.22); }

/* ── Auswahl-Leiste (unten) ── */
.auswahl-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--gutter); padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--karte-hell); border-top: 1px solid var(--linie);
  box-shadow: 0 -4px 16px rgba(18, 48, 73, 0.12);
}
.auswahl-leiste > span { font-weight: 600; }
.auswahl-leiste .knopf { margin-left: auto; min-height: 44px; }
.auswahl-leiste[hidden], [hidden] { display: none !important; }

.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 28px var(--gutter) 90px; max-width: 920px; width: 100%; margin: 0 auto; color: var(--text-3); font-size: 0.85rem; }
.fuss a { color: var(--text-2); }
.fuss-marke { flex-basis: 100%; display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); }
.fuss-marke span { display: flex; flex-direction: column; line-height: 1.3; }
.fuss-marke b { color: var(--text); font-size: 1rem; }
.marke img, .fuss-marke img { flex-shrink: 0; height: auto; }

@media (min-width: 640px) {
  :root { --gutter: 24px; }
  h1 { font-size: 2.2rem; }
  .filter-reihe { grid-template-columns: repeat(4, 1fr); }
  .kat-leiste { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  #liste { grid-template-columns: 1fr 1fr; }
  .gruppe { grid-column: 1 / -1; }
  .fakten { grid-template-columns: repeat(4, 1fr); }
  .aktionen .knopf { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .grafik-layout { grid-template-columns: 340px minmax(0, 1fr); align-items: start; }
  .grafik-steuerung { position: sticky; top: 64px; }
  #leinwand { max-width: 560px; }
  .aktionen.klebend { max-width: 560px; }
}
@media (hover: hover) {
  .karte-link:hover { background: var(--karte-hell); }
  .merken:hover { border-color: var(--orange); }
  .knopf:hover { filter: brightness(1.06); }
}

/* ── Trainings ── */
.nav-link { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 8px 10px; border-radius: 999px; }
.nav-link.aktiv { color: var(--text); background: var(--karte); }
.seitenkopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; margin-bottom: 8px; }
.seitenkopf h1 { margin: 0; }
.seitenkopf h1 small { font-size: 1rem; font-weight: 500; color: var(--text-3); margin-left: 6px; }
.trainings { display: grid; gap: 10px; }
.training-karte { display: flex; gap: 14px; align-items: stretch; background: var(--karte); border-radius: var(--radius); padding: 12px; color: inherit; text-decoration: none; }
.training-karte:active { background: var(--karte-hell); }
.training-karte.heute { box-shadow: inset 0 0 0 2px var(--orange); }
.tag-datum { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); border-radius: 12px; padding: 6px 0; line-height: 1.15; }
.tag-datum b { font-size: 1.2rem; font-weight: 800; color: var(--akzent); }
.tag-datum small { font-size: 0.75rem; color: var(--text-2); }
.training-karte .inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.training-karte .inhalt b { font-size: 1.05rem; }
.training-karte .inhalt small { color: var(--text-2); font-size: 0.85rem; }
.training-karte .namen { color: var(--text-3) !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kicker-zeile { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); }
.notiz { background: var(--karte); border-radius: 12px; padding: 12px 14px; color: var(--text-2); margin: 0 0 1rem; }
.ablaufplan { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ablaufplan details { background: var(--karte); border-radius: var(--radius); }
.ablaufplan summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.ablaufplan summary::-webkit-details-marker { display: none; }
.ablaufplan summary::after { content: "▾"; margin-left: auto; color: var(--text-3); transition: transform .15s; }
.ablaufplan details[open] summary::after { transform: rotate(180deg); }
.ablaufplan .nr { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--dunkel); font-weight: 800; }
.ablaufplan .titel { display: flex; flex-direction: column; min-width: 0; }
.ablaufplan .titel small { color: var(--text-2); font-size: 0.85rem; }
.plan-inhalt { padding: 0 14px 14px 60px; }
.plan-inhalt ol, .plan-inhalt ul { list-style: none; margin: 0 0 8px; padding: 0; }
.plan-inhalt li { position: relative; padding-left: 30px; margin: 6px 0; }
.ziel-klein { margin: 0 0 6px; color: var(--text-2); }
.cue-klein { margin: 6px 0; font-style: italic; color: var(--text); border-left: 3px solid var(--orange); padding-left: 10px; }
.steig-klein { margin: 6px 0; font-size: 0.9rem; color: var(--text-2); }
.auswahl-zeile .name { display: flex; flex-direction: column; }
.auswahl-zeile .name small { font-weight: 400; color: var(--text-3); font-size: 0.8rem; }
.plan-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 18px; }
.plan-summe { color: var(--text-2); font-size: 0.95rem; }

/* ── Reiter unter dem Kopf ── */
.reiter {
  position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-bottom: 1px solid var(--linie);
}
.reiter a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.reiter a.aktiv { color: var(--text); border-bottom-color: var(--orange); }
.reiter b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--dunkel); font-size: 0.8rem; }
.reiter b.zahl-null { background: var(--karte); color: var(--text-3); }
@media (min-width: 640px) { .reiter { padding-inline: calc((100% - 920px) / 2 + var(--gutter)); grid-template-columns: repeat(3, max-content); gap: 8px; } .reiter a { padding: 0 16px; } }

/* ── Aktive Filter ── */
.filter-aktiv { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid var(--orange); }
.filter-aktiv span { font-size: 0.92rem; color: var(--text); }
.filter-aktiv b { color: var(--akzent); }
select.gesetzt { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }

/* ── Anmeldung, Bewertungen, Kommentare ── */
.kopf-aktionen .ich { color: var(--text-2); font-size: 0.9rem; font-weight: 600; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--karte); text-decoration: none; font-size: 1.1rem; }
.rm-link b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--orange); color: var(--dunkel); font-size: 0.75rem; display: grid; place-items: center; }
.unter-form { color: var(--text-2); margin-top: 1rem; }
.klein-grau { color: var(--text-3); font-size: 0.9rem; margin: 6px 0 0; }
.falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline-form { display: contents; }
.link.gefahr-link { color: var(--rot); }
.bewertung, .kommentare { background: var(--karte); border-radius: var(--radius); padding: 16px; margin-top: 10px; scroll-margin-top: 60px; }
.bewertung h2, .kommentare h2 { font-size: 1.05rem; margin-bottom: 10px; }
.kommentare h2 small { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.sterne-schnitt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sterne-schnitt b { font-size: 1.4rem; font-weight: 800; }
.sterne-schnitt .klein-grau { margin: 0; }
.sterne-gross { position: relative; display: inline-block; font-size: 1.6rem; line-height: 1; letter-spacing: 2px; color: var(--linie); }
.sterne-gross::before { content: "★★★★★"; }
.sterne-gross span { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--gelb); }
.sterne-gross span::before { content: "★★★★★"; }
.sterne-wahl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.sterne-label { color: var(--text-2); font-weight: 600; }
.sterne-reihe { display: inline-flex; }
.stern { width: 48px; height: 48px; border: 0; background: transparent; color: var(--linie); font-size: 2.1rem; line-height: 1; cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent; transition: transform .1s, color .1s; }
.stern.an { color: var(--gelb); }
.stern:active { transform: scale(1.2); }
@media (hover: hover) {
  .sterne-reihe:hover .stern { color: var(--gelb); }
  .sterne-reihe .stern:hover ~ .stern { color: var(--linie); }
}
.sterne-wort { color: var(--gelb); font-weight: 700; min-width: 4em; }
.kommentar { border-top: 1px solid var(--linie); padding: 10px 0; }
.kommentar:first-of-type { border-top: 0; padding-top: 0; }
.kommentar p { margin: 0; overflow-wrap: anywhere; }
.kommentar .kommentar-kopf { font-size: 0.85rem; color: var(--text-3); margin-bottom: 2px; }
.kommentar .kommentar-kopf b { color: var(--text); }
.kommentar.erledigt > p:not(.kommentar-kopf) { color: var(--text-3); }
.marke-erledigt { color: var(--gruen); font-weight: 600; }
.kommentar-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.kommentar-aktionen .link { padding: 4px 8px 4px 0; font-size: 0.85rem; }
.kommentar-form { margin-top: 12px; }
.kommentar-form textarea { background: var(--bg); }
.kommentar-form .knopf { justify-self: start; }
.rm-sterne b { color: var(--gelb); }
a.chip { color: var(--text); text-decoration: none; }
a.chip.aktiv { color: var(--dunkel); }
.rm-liste { display: grid; gap: 10px; margin-top: 12px; }
.rm-karte { background: var(--karte); border-radius: var(--radius); padding: 14px 16px; }
.rm-karte h2 { font-size: 1.1rem; margin-bottom: 4px; }
.rm-karte h2 a { color: var(--text); text-decoration: none; }
.rm-zahlen { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; color: var(--text-2); font-size: 0.9rem; }
.rm-zahlen a { margin-left: auto; }
.nutzer-liste { display: grid; gap: 6px; }
.nutzer-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: var(--karte); border-radius: 12px; padding: 10px 14px; }
.nutzer-zeile .name { display: flex; flex-direction: column; min-width: 0; }
.nutzer-zeile small { color: var(--text-3); font-size: 0.8rem; overflow-wrap: anywhere; }

/* ── Level und Vorschläge ── */
.level { font-weight: 600; }
.level-anfaenger { color: var(--gruen); }
.level-fortgeschritten { color: #a86f00; }
.level-profi { color: var(--rot); }
.vorschlag-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); text-align: center; margin: 2rem 0 0; }
.vorschlag .karte-kopf { margin-bottom: 4px; }
.v-status { font-weight: 700; color: var(--akzent); }
.status-uebernommen .v-status { color: var(--gruen); }
.status-abgelehnt .v-status { color: var(--text-3); }
.status-abgelehnt h2 { color: var(--text-2); }
.vorschlag .meta { margin: 0 0 8px; }
.vorschlag details summary { cursor: pointer; color: var(--text-2); font-size: 0.9rem; padding: 4px 0; }
.v-liste { list-style: none; margin: 6px 0; padding: 0; }
.v-liste li { position: relative; padding-left: 30px; margin: 6px 0; }
.vorschlag .aktionen { margin: 10px 0 6px; }
.v-ablehnen { grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-top: 6px; }
.v-ablehnen input { background: var(--bg); }
@media (min-width: 640px) { .filter-reihe { grid-template-columns: repeat(5, 1fr); } }

/* ── Sterne im Frontend ── */
.sterne-zeile { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; font-size: 0.9rem; line-height: 1; }
.sterne-zeile b { color: var(--gelb); font-weight: 800; }
.sterne-zeile small { color: var(--text-3); font-size: 0.8rem; }
.sterne-zeile.unbewertet small { font-style: italic; }
.sterne-bar { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 1px; color: var(--linie); white-space: nowrap; }
.sterne-bar::before { content: "★★★★★"; }
.sterne-bar span { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: var(--gelb); }
.sterne-bar span::before { content: "★★★★★"; }
.sterne-link { display: inline-block; text-decoration: none; margin: -2px 0 8px; }
.sterne-link .sterne-zeile { font-size: 1rem; }
.sterne-link .sterne-bar { font-size: 1.35rem; }
.ablaufplan .titel .sterne-zeile { margin: 2px 0; font-size: 0.8rem; }
.ablaufplan .titel .sterne-bar { font-size: 0.9rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Login-Hinweis ganz oben ── */
.login-leiste { padding: 6px var(--gutter); padding-top: max(6px, env(safe-area-inset-top)); background: var(--karte-hell); color: var(--text-2);
  font-size: 0.85rem; text-align: center; border-bottom: 1px solid var(--linie); }
.login-leiste b { color: var(--text); }
.login-leiste a { color: var(--akzent); font-weight: 600; }
.admin-marke { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--orange); color: var(--dunkel); font-size: 0.72rem; font-weight: 800; vertical-align: 1px; }
.login-leiste + .kopf { padding-top: 10px; }
.kommentare details.archiv { margin-top: 10px; border-top: 1px solid var(--linie); padding-top: 6px; }
.kommentare details.archiv summary { cursor: pointer; color: var(--text-3); font-size: 0.9rem; padding: 6px 0; }
.kommentare details.archiv .kommentar:first-of-type { padding-top: 6px; }
.levels { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
dd.levels { display: flex; }
.level-wahl { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.level-wahl legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 6px; }
.level-wahl legend small { font-weight: 400; color: var(--text-3); }
.level-wahl .chip { min-height: 42px; padding: 6px 14px; font-weight: 500 !important; display: inline-flex !important; }
.level-wahl .chip:has(input:checked) { background: var(--orange); color: var(--dunkel); font-weight: 700 !important; }

/* ── Tags ── */
.karte-tags { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--text-3); line-height: 1.4; }
.tag-feld { display: grid; gap: 8px; }
.tag-wahl { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; }
.tag-chip { min-height: 34px; padding: 4px 10px; font-size: 0.85rem; }
.tag-chip small { opacity: 0.6; font-size: 0.75rem; }
.tag-chip[aria-pressed="true"] { background: var(--orange); color: var(--dunkel); font-weight: 700; }
@media (min-width: 640px) { .filter-reihe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .filter-reihe { grid-template-columns: repeat(6, 1fr); } }
.karte.zuletzt { box-shadow: inset 0 0 0 2px var(--orange); }
.skizze-box { margin: 0 0 1rem; }
.skizze-box canvas { display: block; width: 100%; }
.karte-link .sterne-zeile { display: flex; width: max-content; margin: 2px 0 4px; }

/* ── Heller Hintergrund: Eingabefelder weiß mit Rand, Karten mit feinem Rand ── */
input, select, textarea { background-color: #ffffff; }
.karte, .detail section, .bewertung, .kommentare, .rm-karte, .training-karte, .ablaufplan details, .fakten div, .texte, .nutzer-zeile, .auswahl-zeile, .notiz, .cue { box-shadow: inset 0 0 0 1px var(--linie); }
.knopf.zweit { background: #ffffff; }
.tag-datum { background: #ffffff; }
.karte-link:active, .training-karte:active { background: var(--karte-hell); }

/* ── Farbvorschläge (03.10.2026): /?thema=verein | sport | gruen | hell; Auswahl per Cookie ── */
/* --orange = Akzentfläche (Knöpfe, Chips), --dunkel = Schrift auf dieser Fläche, --akzent = Akzent als Schrift */
[data-thema="verein"] {
  --bg: #ffffff; --karte: #f5f5f6; --karte-hell: #ebebed; --linie: #dedee3;
  --text: #1f2328; --text-2: #4a5058; --text-3: #767c86;
  --orange: #d7192d; --orange-dunkel: #b31224; --dunkel: #ffffff; --akzent: #c0142a;
  --tisch: #1e5b86; --zone: #f6b8bf;
}
[data-thema="sport"] {
  --bg: #f3f7fb; --karte: #ffffff; --karte-hell: #e9f0f7; --linie: #d6e1ec;
  --text: #0d2235; --text-2: #3c5368; --text-3: #6b8095;
  --orange: #ff7a1a; --orange-dunkel: #e8650a; --dunkel: #1a1206; --akzent: #c2560a;
  --tisch: #1565c0; --zone: #ffd0a8;
}
[data-thema="gruen"] {
  --bg: #ffffff; --karte: #f1f7f4; --karte-hell: #e3efe8; --linie: #d3e4da;
  --text: #15302a; --text-2: #3d5a51; --text-3: #6c857d;
  --orange: #1f9d6b; --orange-dunkel: #188559; --dunkel: #ffffff; --akzent: #157a52;
  --tisch: #1d5f8a; --zone: #b7e4cf;
}
[data-thema] body, body[data-thema] { background: var(--bg); }

/* ── Skizzen-Vorschaubilder in der Übersicht ── */
.karte.mit-skizze .karte-link { padding-left: 92px; min-height: 140px; }
.mini-skizze { position: absolute; left: 12px; top: 14px; width: 68px; pointer-events: none; }


/* ── Ansicht „Liste“: eine Übung pro Zeile; breit: Infos rechts ── */
[data-ansicht="liste"] #liste { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
@media (min-width: 760px) {
  [data-ansicht="liste"] .karte-link { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; align-items: start; min-height: 0; }
  [data-ansicht="liste"] .karte-link > * { grid-column: 1; }
  [data-ansicht="liste"] .karte-link > .meta { grid-column: 2; grid-row: 1 / span 4; align-self: center; flex-direction: column; gap: 6px; }
  [data-ansicht="liste"] .karte-link > .karte-tags { grid-column: 2; grid-row: 5; margin-top: 0; }
  [data-ansicht="liste"] .karte-link > p { margin-bottom: 0; }
  [data-ansicht="liste"] .karte.mit-skizze .karte-link { min-height: 128px; }
}

/* ── Ansicht „Kacheln“: Raster, Skizze quer oben, darunter nur das Wichtigste ── */
[data-ansicht="kacheln"] #liste { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 12px; }
[data-ansicht="kacheln"] .gruppe { grid-column: 1 / -1; }
[data-ansicht="kacheln"] .karte { display: flex; flex-direction: column; overflow: hidden; }
[data-ansicht="kacheln"] .karte-link,
[data-ansicht="kacheln"] .karte.mit-skizze .karte-link { padding: 0 14px 14px; min-height: 0; flex: 1; display: flex; flex-direction: column; }
[data-ansicht="kacheln"] .mini-skizze { --quer: 1; position: static; display: block; width: calc(100% + 28px); height: 118px; margin: 0 -14px 10px;
  background: color-mix(in srgb, var(--karte-hell) 70%, transparent); }
[data-ansicht="kacheln"] .karte:not(.mit-skizze) .karte-link::before { content: "🏓"; display: grid; place-items: center; height: 118px; margin: 0 -14px 10px;
  font-size: 2.2rem; opacity: 0.35; background: color-mix(in srgb, var(--karte-hell) 70%, transparent); }
[data-ansicht="kacheln"] .karte-link > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9rem; }
[data-ansicht="kacheln"] .karte-tags { display: none; }
[data-ansicht="kacheln"] .merken { top: 10px; right: 10px; transform: none; width: 38px; height: 38px; background: var(--bg); }
[data-ansicht="kacheln"] .karte h3 { font-size: 1.02rem; }

/* ── Menü am Namen: Farben und Ansicht je Mitglied (Hover am Rechner, Antippen am Handy) ── */
.login-leiste { position: relative; z-index: 40; }
.nutzer-menue { position: relative; display: inline-block; }
.nutzer-knopf { border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.nutzer-knopf:hover, .nutzer-menue.offen .nutzer-knopf { background: var(--karte-hell); }
.nutzer-menue .menue { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(320px, 92vw);
  padding: 12px; margin-top: 2px; text-align: left; background: var(--bg); border-radius: 14px;
  box-shadow: 0 8px 28px rgba(18, 48, 73, 0.22), inset 0 0 0 1px var(--linie); }
.nutzer-menue .menue::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* Hover-Brücke */
@media (hover: hover) { .nutzer-menue:hover .menue { display: block; } }
.nutzer-menue.offen .menue { display: block; }
.menue-titel { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 4px 0 6px; }
.menue-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.menue-wahl button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.88rem; color: var(--text); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); }
.menue-wahl button.aktiv { background: var(--orange); color: var(--dunkel); font-weight: 700; box-shadow: none; }
.menue-wahl .farbe i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.15); }
.farbe-hell i { background: #ff8a3d; }
.farbe-verein i { background: #d7192d; }
.farbe-sport i { background: linear-gradient(135deg, #ff7a1a 50%, #1565c0 50%); }
.farbe-gruen i { background: #1f9d6b; }
.menue-fuss { display: block; font-size: 0.8rem; color: var(--text-3); border-top: 1px solid var(--linie); padding-top: 8px; }
@media (max-width: 600px) {
  .nutzer-menue { position: static; }
  .nutzer-menue .menue { left: 12px; right: 12px; width: auto; transform: none; }
}

/* ── Admin-Bereich ── */
.reiter.mit-admin { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 640px) { .reiter.mit-admin { grid-template-columns: repeat(4, max-content); } }
.admin-nav { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 6px; scrollbar-width: none; }
.admin-nav .chip { flex-shrink: 0; text-decoration: none; color: var(--text); }
.admin-nav .chip.aktiv { color: var(--dunkel); }
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 0 14px; }
@media (min-width: 640px) { .zahlen { grid-template-columns: repeat(3, 1fr); } }
.zahl { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--karte); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--linie); }
.zahl b { font-size: 1.8rem; font-weight: 800; line-height: 1.1; color: var(--akzent); }
.zahl span { font-weight: 600; }
.zahl small { color: var(--text-3); font-size: 0.8rem; }
.admin-zwei { display: grid; gap: 10px; }
@media (min-width: 760px) { .admin-zwei { grid-template-columns: 1fr 2fr; } }
.admin-box { background: var(--karte); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; box-shadow: inset 0 0 0 1px var(--linie); }
.admin-box h2 { font-size: 1.05rem; margin-bottom: 8px; }
.admin-box h2 small { color: var(--text-3); font-weight: 500; }
.admin-box p { margin: 8px 0 0; }
.kurzliste { list-style: none; margin: 0; padding: 0; }
.kurzliste li { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); }
.kurzliste li:first-child { border-top: 0; }
.kurzliste li > a { flex: 1; min-width: 0; font-weight: 600; color: var(--text); text-decoration: none; }
.kurzliste time, .verlauf time { margin-left: auto; color: var(--text-3); font-size: 0.82rem; white-space: nowrap; }
.verlauf { list-style: none; margin: 0 0 6px; padding: 0; }
.verlauf li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie); }
.verlauf li:first-child { border-top: 0; }
.verlauf .sym { flex: 0 0 22px; text-align: center; }
.verlauf .was { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.verlauf .was a { color: var(--text); font-weight: 600; text-decoration: none; }
.verlauf .was a:hover { text-decoration: underline; }
.verlauf q { color: var(--text-2); }
.verlauf.kompakt li { padding: 6px 0; font-size: 0.92rem; }
.stern-wert { color: var(--gelb); letter-spacing: 1px; white-space: nowrap; }
.leer-sterne { color: var(--linie); }
.tabelle-rahmen { overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--linie); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabelle th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 10px 12px; background: var(--karte); }
.tabelle td { padding: 10px 12px; border-top: 1px solid var(--linie); vertical-align: top; white-space: nowrap; }
.tabelle td:first-child { white-space: normal; min-width: 170px; }
.tabelle td small { display: block; color: var(--text-3); }
.tabelle td a { color: var(--text); text-decoration: none; }
.tabelle tr.wartet td { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.marke-wartet { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--karte-hell); color: var(--text-2); }
.zahl-klein { font-size: 1rem; font-weight: 500; color: var(--text-3); }
@media (max-width: 600px) { .tabelle th:nth-child(2), .tabelle td:nth-child(2) { display: none; } }

/* ── Bilder ── */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.galerie a { display: flex; flex-direction: column; gap: 4px; color: var(--text-2); text-decoration: none; font-size: 0.82rem; }
.galerie img { width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--karte-hell); box-shadow: inset 0 0 0 1px var(--linie); }
.bild-liste { display: grid; gap: 10px; margin-top: 10px; }
.bild-karte { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; background: var(--karte); border-radius: var(--radius); padding: 12px; box-shadow: inset 0 0 0 1px var(--linie); }
.bild-vorschau img { width: 110px; height: 140px; object-fit: cover; object-position: top; border-radius: 8px; display: block; background: var(--karte-hell); }
.bild-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bild-info small { color: var(--text-3); }
.bild-info small a { color: var(--akzent); }
.bild-form { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
@media (min-width: 640px) { .bild-form { grid-template-columns: 1fr 1fr auto; } }
.bild-form input, .bild-form select { min-height: 38px; padding: 6px 10px; font-size: 0.9rem; }

/* ── Suche + Filter-Menü (Mega-Menü am Desktop, Vollbild-Blatt mobil) ── */
.filter { position: relative; }
.filter-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.filter-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text); background: var(--bg); border: 1px solid var(--linie); }
.filter-knopf:hover { border-color: var(--text-3); }
.filter-knopf.gesetzt, .filter-knopf[aria-expanded="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.filter-knopf b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--orange); color: var(--dunkel); font-size: 0.78rem; }
.sortierung { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--text-3); }
.sortierung select { width: auto; min-height: 42px; padding: 6px 34px 6px 12px; font-size: 0.92rem; border-radius: 999px; }
.filter-zeile .treffer { margin-left: auto; font-size: 0.9rem; }
.aktive-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.aktiv-chip { background: color-mix(in srgb, var(--orange) 14%, var(--bg)) !important; color: var(--text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 55%, transparent); font-size: 0.85rem; min-height: 32px; }
.aktive-filter .link { font-size: 0.85rem; }

.filter-panel:not([hidden]) { display: flex; flex-direction: column; }
.panel-kopf { display: none; }
.panel-spalten { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr 1fr; gap: 8px 28px; }
.f-gruppe summary { list-style: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); padding: 2px 0 8px; }
.f-gruppe summary::-webkit-details-marker { display: none; }
.f-auswahl:not(:empty) { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
  background: var(--orange); color: var(--dunkel); font-size: 0.7rem; letter-spacing: 0; vertical-align: 1px; }
.f-optionen { display: grid; gap: 1px; }
.f-tag .f-optionen, .f-datum .f-optionen { max-height: 290px; overflow-y: auto; padding-right: 4px; }
.f-opt { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 0.95rem; }
.f-opt:hover { background: var(--karte); }
.f-opt input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--orange); flex-shrink: 0; }
.f-opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-opt .n { margin-left: auto; color: var(--text-3); font-size: 0.78rem; }
.f-opt:has(input:checked) { font-weight: 600; }
.f-opt.null { opacity: 0.38; }
.panel-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }

@media (min-width: 760px) {
  .filter-panel { position: absolute; left: -12px; right: -12px; top: calc(100% + 8px); z-index: 35; padding: 22px 26px 18px;
    background: var(--bg); border-radius: 18px; box-shadow: 0 18px 50px rgba(18, 48, 73, 0.18), inset 0 0 0 1px var(--linie); }
  .f-gruppe summary { pointer-events: none; }
  /* Organisation und Level teilen sich eine Spalte, damit fünf Spalten reichen */
  .panel-spalten { grid-template-areas: "kat sp level tag datum" "kat sp org tag datum"; }
  .f-kat { grid-area: kat; } .f-sp { grid-area: sp; } .f-level { grid-area: level; } .f-org { grid-area: org; } .f-tag { grid-area: tag; } .f-datum { grid-area: datum; }
}
@media (max-width: 759px) {
  .filter-panel { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
  .panel-kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--gutter);
    padding-top: max(14px, env(safe-area-inset-top)); border-bottom: 1px solid var(--linie); font-size: 1.1rem; }
  .panel-zu { width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--karte); color: var(--text); font-size: 1.1rem; cursor: pointer; }
  .panel-spalten { display: block; flex: 1; overflow-y: auto; padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; }
  .f-gruppe { border-bottom: 1px solid var(--linie); }
  .f-gruppe summary { display: flex; align-items: center; padding: 16px 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); cursor: pointer; }
  .f-gruppe summary::after { content: "▾"; margin-left: auto; color: var(--text-3); transition: transform .15s; }
  .f-gruppe[open] summary::after { transform: rotate(180deg); }
  .f-optionen { padding-bottom: 12px; }
  .f-tag .f-optionen, .f-datum .f-optionen { max-height: none; }
  .f-opt { padding: 10px 4px; font-size: 1rem; }
  .f-opt input { width: 22px; height: 22px; }
  .panel-fuss { margin: 0; padding: 12px var(--gutter); padding-bottom: max(12px, env(safe-area-inset-bottom)); background: var(--bg); }
  .panel-fuss .knopf { flex: 1; }
  body.panel-offen { overflow: hidden; }
  .sortierung span { display: none; }
}
@media (min-width: 760px) {
  .panel-spalten { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .filter-zeile { flex-wrap: nowrap; gap: 8px; }
  .filter-zeile .treffer { white-space: nowrap; font-size: 0.85rem; }
  .sortierung { min-width: 0; }
  .sortierung select { max-width: 150px; }
}
.f-tag .f-optionen, .f-datum .f-optionen { padding-right: 12px; }
.panel-fuss .knopf { white-space: nowrap; }
@media (max-width: 759px) {
  .sortierung select { max-width: 132px; padding-right: 28px; }
  .filter-knopf { padding: 0 14px; }
}

/* ── Kopfzeile mit Suche (Logo · Suche · Aktionen) und eine Filterzeile ── */
.kopf { gap: 14px; }
.kopf .marke { flex-shrink: 0; }
.kopf-suche { position: relative; flex: 1; max-width: 560px; margin: 0 auto; }
.kopf-suche svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.kopf-suche input { min-height: 42px; padding: 8px 14px 8px 40px; border-radius: 999px; background: var(--karte); border-color: var(--karte); }
.kopf-suche input:focus { background: var(--bg); }
.kopf-aktionen { flex-shrink: 0; }
.filter { padding-top: 14px; }
.filter-zeile { margin-top: 0; flex-wrap: nowrap; align-items: center; }
.filter-zeile .aktive-filter { margin: 0; flex: 1; min-width: 0; }
.filter-zeile .aktive-filter[hidden] { display: flex !important; visibility: hidden; }   /* hält die Zeile stabil */
.filter-zeile .treffer { margin-left: auto; white-space: nowrap; }
@media (max-width: 759px) {
  .kopf { gap: 10px; }
  .kopf .marke span { display: none; }                 /* nur das Wappen, damit die Suche Platz hat */
  .kopf-suche input { min-height: 40px; font-size: 16px; }
  .kopf .lang { display: none; }
  .kopf .knopf.klein { padding: 0 12px; min-width: 38px; }
  .kopf .rm-link { width: 36px; height: 36px; }
  .filter-zeile { flex-wrap: wrap; row-gap: 8px; }
  .filter-zeile .aktive-filter { order: 5; flex-basis: 100%; }
  .filter-zeile .aktive-filter[hidden] { display: none !important; }
}
@media (min-width: 760px) {
  .filter-zeile .aktive-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 0;
    mask-image: linear-gradient(to right, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); }
  .filter-zeile .aktive-filter::-webkit-scrollbar { display: none; }
  .filter-zeile .aktive-filter > * { flex-shrink: 0; white-space: nowrap; }
}
@media (min-width: 760px) { .filter-zeile .aktive-filter > .link { display: none; } }

/* ── Eine Navigationszeile über die volle Breite: Reiter links, Filter/Sortierung rechts (nur Übersicht) ── */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.reiter, .reiter.mit-admin { display: block; padding: 0; padding-top: env(safe-area-inset-top); }
.reiter-innen { position: relative; display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter); }
.reiter-tabs { display: flex; flex-shrink: 0; }
.reiter-tabs a { padding: 0 14px; font-weight: 500; font-size: 0.95rem; color: var(--text-2); letter-spacing: -0.005em; }
.reiter-tabs a.aktiv { font-weight: 600; color: var(--text); }
.reiter .filter { flex: 1; min-width: 0; padding: 0; }
.reiter .filter-zeile { gap: 12px; }
.reiter a.chip, .reiter .filter a { border: 0; min-height: 0; }
.filter-knopf { min-height: 36px; padding: 0 14px; font-weight: 500; font-size: 0.92rem; }
.filter-knopf b { min-width: 20px; height: 20px; font-size: 0.72rem; font-weight: 600; }
.aktiv-chip { font-weight: 500; min-height: 28px !important; padding: 3px 10px !important; font-size: 0.82rem !important; }
.sortierung select { min-height: 36px; font-size: 0.88rem; font-weight: 500; }
.filter-zeile .treffer { font-size: 0.88rem; color: var(--text-3); }
.filter-zeile .treffer b { font-weight: 600; color: var(--text-2); }
.sortierung span { font-size: 0.85rem; }
@media (min-width: 760px) {
  .reiter .filter-panel { left: var(--gutter); right: var(--gutter); top: calc(100% + 1px); border-radius: 0 0 18px 18px; }
}
@media (max-width: 759px) {
  .reiter-innen { flex-wrap: wrap; gap: 0; padding: 0; }
  .reiter-tabs { flex-basis: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .reiter-tabs a { padding: 0 6px; }
  .reiter .filter { flex-basis: 100%; padding: 8px var(--gutter) 10px; border-top: 1px solid var(--linie); }
}
/* Überschriften/Texte insgesamt etwas feiner */
.karte h3 { font-weight: 650; letter-spacing: -0.01em; }
h1 { font-weight: 750; letter-spacing: -0.02em; }
.gruppe { font-weight: 600; }

/* ── Nutzer-Menü in der Kopfzeile (ersetzt die Leiste „Du bist eingeloggt als“) ── */
.kopf-aktionen { display: flex; align-items: center; gap: 8px; }
.kopf .nutzer-menue { position: relative; }
.kopf .nutzer-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 12px; border-radius: 999px;
  background: var(--karte); font-size: 0.92rem; font-weight: 500; color: var(--text); }
.kopf .nutzer-knopf .name { font-weight: 600; }
.kopf .nutzer-knopf .admin-marke { margin: 0; }
.kopf .nutzer-knopf .pfeil { color: var(--text-3); font-size: 0.8rem; }
.kopf .nutzer-knopf .initial { display: none; }
.kopf .nutzer-menue .menue { left: auto; right: 0; transform: none; top: calc(100% + 6px); }
.kopf .nutzer-menue .menue::before { top: -10px; height: 10px; }
.menue-kopf { display: block; font-size: 0.85rem; color: var(--text-3); padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--linie); }
.menue-kopf b { color: var(--text); }
@media (max-width: 759px) {
  .kopf .nutzer-knopf { padding: 0; width: 38px; min-height: 38px; justify-content: center; background: var(--orange); color: var(--dunkel); }
  .kopf .nutzer-knopf .initial { display: inline; font-weight: 700; }
  .kopf .nutzer-knopf .name, .kopf .nutzer-knopf .admin-marke, .kopf .nutzer-knopf .pfeil { display: none; }
  .kopf .nutzer-menue { position: static; }
  .kopf .nutzer-menue .menue { left: 12px; right: 12px; width: auto; }
  .kopf { position: relative; }
}

/* Korrekturen Navigationszeile */
.reiter .filter { position: static; }
.reiter .treffer b { display: inline; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--text-2); font-size: inherit; }
@media (max-width: 759px) {
  .reiter .filter-zeile { flex-wrap: wrap; }
  .reiter .filter-zeile .treffer { margin-left: auto; }
  .reiter .sortierung select { max-width: 128px; }
}
.kopf { position: relative; z-index: 30; }
.menue-links { display: none; }
@media (max-width: 759px) {
  .kopf .rm-link { display: none; }
  .menue-links.nur-mobil { display: flex; flex-direction: column; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
  .menue-links a { display: flex; align-items: center; gap: 8px; padding: 9px 2px; color: var(--text); text-decoration: none; font-weight: 500; }
  .menue-links b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--dunkel); font-size: 0.72rem; display: inline-grid; place-items: center; }
  .reiter .filter-zeile { gap: 8px; }
  .reiter .filter-knopf { padding: 0 12px; }
  .reiter .sortierung select { max-width: 120px; }
}
/* Datum nicht mehr auf den Karten; Kopfzeile nur noch für die Kategorie in der flachen Sortierung */
.karte-kopf:not(:has(.kat:not(:empty))) { display: none; }
#liste:not(.flach) .karte-kopf { display: none; }
.galerie figure { position: relative; margin: 0; }
.bild-weg { position: absolute; top: 6px; right: 6px; }
.bild-weg button { width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(18, 48, 73, 0.75); color: #fff; cursor: pointer; font-size: 0.85rem; }
.bild-weg button:hover { background: var(--rot); }
.inline-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.inline-upload label.knopf { cursor: pointer; }

/* ── „Themen“ als erster Menüpunkt, sieht aus wie ein Reiter ── */
.themen-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--text-2); letter-spacing: -0.005em; }
.themen-tab:hover, .themen-tab[aria-expanded="true"], .themen-tab.gesetzt { color: var(--text); }
.themen-tab[aria-expanded="true"] { border-bottom-color: var(--orange); }
.themen-tab .pfeil { font-size: 0.75rem; color: var(--text-3); transition: transform .15s; }
.themen-tab[aria-expanded="true"] .pfeil { transform: rotate(180deg); }
.themen-tab b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--orange); color: var(--dunkel); font-size: 0.72rem; font-weight: 600; }
.themen-tab b[hidden] { display: none !important; }
@media (max-width: 759px) {
  .themen-tab { padding: 0 4px; font-size: 0.9rem; }
  .reiter-tabs a { font-size: 0.9rem; }
  .reiter.mit-admin .reiter-tabs a[href="./?admin"] { display: none; }
  .reiter .filter-zeile .aktive-filter[hidden] + .treffer { margin-left: 0; }
}
.reiter .themen-tab[aria-expanded="true"] { border-bottom: 3px solid var(--orange) !important; color: var(--text); }
.reiter-tabs { gap: 6px; }
@media (max-width: 759px) { .reiter-tabs { gap: 0; } }

/* ══ Schlichter Stil (Svens Wunsch 03.10.2026): eckige, einfarbige Buttons ohne Schatten, Suche nur als Linie ══ */
.knopf, .knopf.klein, .knopf.zweit, .knopf.gefahr, .chip, button.chip, a.chip, .aktiv-chip, .tag-chip,
.menue-wahl button, .nutzer-knopf, .rm-link, .merken, .favorit, .sortierung select, select, input, textarea,
.filter-knopf, .panel-zu, .daumen-knopf, .stern, .level-wahl .chip, .bild-weg button, .inline-upload label.knopf {
  border-radius: 0 !important;
}
.knopf { box-shadow: none !important; filter: none !important; font-weight: 600; letter-spacing: 0; }
.knopf:hover { background: var(--orange-dunkel); }
.knopf.zweit { background: transparent !important; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie) !important; }
.knopf.zweit:hover { box-shadow: inset 0 0 0 1px var(--text-3) !important; background: transparent !important; }
.knopf.gefahr { background: transparent !important; box-shadow: inset 0 0 0 1px var(--rot) !important; }
.knopf.klein { min-height: 36px; }
.aktionen.klebend .knopf { box-shadow: none !important; }

/* Suche: kein Hintergrund, nur eine Linie */
.kopf-suche input, .kopf-suche input:focus { background: transparent !important; border: 0; border-bottom: 1px solid var(--linie);
  border-radius: 0; padding-left: 30px; outline: none; }
.kopf-suche input:focus { border-bottom-color: var(--orange); box-shadow: 0 1px 0 0 var(--orange); }
.kopf-suche svg { left: 4px; }

/* Kopfzeile: Icons und Name ohne Flächen */
.kopf .rm-link { background: transparent; width: 36px; height: 36px; }
.kopf .rm-link:hover { background: var(--karte); }
.kopf .rm-link b, .themen-tab b, .reiter b, .filter-knopf b, .menue-links b { border-radius: 2px !important; }
.kopf .nutzer-knopf { background: transparent; padding: 0 6px; }
.kopf .nutzer-knopf:hover, .kopf .nutzer-menue.offen .nutzer-knopf { background: var(--karte); }
.admin-marke { border-radius: 2px; }
@media (max-width: 759px) {
  .kopf .nutzer-knopf { background: var(--orange); }
}

/* Chips, Auswahl, Karten-Knopf */
.chip, button.chip, a.chip { box-shadow: inset 0 0 0 1px var(--linie); background: transparent; }
.chip.aktiv, button.chip.aktiv, a.chip.aktiv { box-shadow: none; background: var(--orange); }
.aktiv-chip { box-shadow: inset 0 0 0 1px var(--orange) !important; background: transparent !important; }
.merken { border-width: 1px; }
.sortierung select, select, input, textarea { box-shadow: none; }
.filter-panel, .nutzer-menue .menue { border-radius: 0 !important; }
.f-opt { border-radius: 0; }
.galerie img, .bild-vorschau img { border-radius: 0; }

/* ══ Redesign 03.10.2026 (Vorbild baudgirl.com): volle Breite, kräftige Display-Schrift, flache Listen mit Linien ══ */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-Italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: italic; font-weight: 500 900; font-display: swap; src: url(../fonts/Montserrat-Italic-latinext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --breite: 1440px; --display: Montserrat, Inter, system-ui, sans-serif; }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
main, .fuss { max-width: var(--breite); }

/* Typografie: Display-Schrift fett und kursiv für Überschriften */
h1 { font-family: var(--display); font-weight: 800; font-style: italic; letter-spacing: -0.025em; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.05; }
.detail h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); margin-bottom: 0.4rem; }
.marke b { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.02em; }
.gruppe { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em; text-transform: none;
  color: var(--text); margin: 2.6rem 0 0; padding-bottom: 10px; border-bottom: 2px solid var(--text); grid-column: 1 / -1; }
.karte h3 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; }
.detail section h2, .bewertung h2, .kommentare h2, .admin-box h2, .rm-karte h2 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.015em; }
.kicker, .kicker-zeile, .detail .kicker { letter-spacing: 0.14em; }

/* Liste: keine Kästen, sondern Zeilen mit feinen Linien; Hover hebt die Zeile leicht ab */
#liste { gap: 0 !important; }
.karte { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--linie); }
.karte-link { border-radius: 0; padding-top: 18px; padding-bottom: 18px; }
.karte-link:hover, .karte-link:active { background: color-mix(in srgb, var(--karte) 70%, transparent); }
.karte.zuletzt { box-shadow: inset 3px 0 0 var(--orange) !important; }
.merken { background: transparent; }
@media (min-width: 900px) {
  [data-ansicht="spalten"] #liste { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important; column-gap: 40px !important; }
}
/* Kacheln: klare Rahmen statt Flächen */
[data-ansicht="kacheln"] #liste { gap: 24px !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }
[data-ansicht="kacheln"] .gruppe { margin-bottom: 0; }
[data-ansicht="kacheln"] .karte { border: 1px solid var(--linie); }
[data-ansicht="kacheln"] .karte:hover { border-color: var(--text-3); }
[data-ansicht="kacheln"] .karte-link:hover { background: transparent; }
[data-ansicht="kacheln"] .mini-skizze, [data-ansicht="kacheln"] .karte:not(.mit-skizze) .karte-link::before { background: color-mix(in srgb, var(--karte) 80%, transparent); }

/* Alle übrigen Kästen: flach, ohne Rundung und Fläche – Struktur über Linien */
.detail section, .bewertung, .kommentare, .admin-box, .rm-karte, .training-karte, .ablaufplan details, .notiz, .texte, .bild-karte,
.nutzer-zeile, .zahl, .fakten div, .vorschlag, .tabelle-rahmen {
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.detail section, .bewertung, .kommentare, .admin-box, .rm-karte, .bild-karte, .nutzer-zeile, .ablaufplan details, .training-karte {
  border-top: 1px solid var(--linie); padding-left: 0; padding-right: 0; }
.ablaufplan details, .training-karte { padding-left: 0; }
.training-karte:hover { background: color-mix(in srgb, var(--karte) 70%, transparent) !important; }
.fakten { gap: 0 24px; }
.fakten div { border-top: 2px solid var(--text); padding: 8px 0 10px; }
.zahl { border-top: 3px solid var(--text); padding-left: 0; }
.cue { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-left: 4px solid var(--orange); font-family: var(--display); font-weight: 600; }
.notiz { border-left: 3px solid var(--linie); padding: 4px 0 4px 14px; }
.texte { border: 1px solid var(--linie); }
.tabelle-rahmen { border-top: 2px solid var(--text); }
.tabelle th { background: transparent; }

/* Übungsseite breit: Text links, Tischskizze rechts mitlaufend */
@media (min-width: 1024px) {
  .detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); column-gap: 56px; align-items: start; }
  .detail > * { grid-column: 1; }
  .detail > .skizze-box { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 130px; }
  .bewertung, .kommentare, main > .aktionen, .blaettern { max-width: calc(100% - 476px); }
}
.formular { max-width: 860px; }

/* ── Farbschema „Nacht“ (dunkel wie baudgirl.com, Magenta-Akzent) ── */
[data-thema="nacht"] {
  --bg: #1c1b21; --karte: #26252c; --karte-hell: #302f37; --linie: #3a3842;
  --text: #f5efe8; --text-2: #c7c1bb; --text-3: #8f8a93;
  --orange: #e0287f; --orange-dunkel: #c41d6c; --dunkel: #ffffff; --akzent: #ff4fa0;
  --tisch: #285d8c; --zone: #f6a9cd; --gelb: #ffc53d; --gruen: #4cc38a; --rot: #ff6b6b;
  color-scheme: dark;
}
[data-thema="nacht"] input, [data-thema="nacht"] select, [data-thema="nacht"] textarea { background-color: var(--karte) !important; }
[data-thema="nacht"] .kopf-suche input { background: transparent !important; }
[data-thema="nacht"] .level-fortgeschritten { color: #f0b429; }
[data-thema="nacht"] .level-profi { color: #ff7a7a; }
.farbe-nacht i { background: linear-gradient(135deg, #1c1b21 50%, #e0287f 50%); }

/* ── Kopfzeile ganz schlicht: nur Name; „+ Übung“ als Menüpunkt; Zahlen ohne Kästchen ── */
.kopf .nutzer-knopf { background: transparent !important; color: var(--text); font-weight: 600; padding: 0 4px; }
.kopf .nutzer-knopf:hover { background: transparent !important; color: var(--akzent); }
.reiter b, .reiter .auswahl-zahl { display: inline; min-width: 0; height: auto; padding: 0; margin-left: 4px; border-radius: 0 !important;
  background: none !important; color: var(--akzent); font-size: 0.8rem; font-weight: 600; }
.reiter b.zahl-null { color: var(--text-3); font-weight: 500; }
.zahl-schlicht { margin-left: 4px; color: var(--akzent); font-size: 0.8rem; font-weight: 600; }
.reiter-tabs a.tab-neu { color: var(--akzent); font-weight: 600; }
.reiter-tabs a.tab-neu:hover { color: var(--text); }
.menue-links { display: flex !important; flex-direction: column; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.menue-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 2px; color: var(--text); text-decoration: none; font-weight: 500; }
.menue-links a:hover { color: var(--akzent); }
.menue-links small { color: var(--akzent); font-size: 0.8rem; font-weight: 600; }
.menue-links .nur-mobil { display: none; }
@media (max-width: 759px) {
  .reiter-tabs a.tab-neu { display: none; }
  .menue-links .nur-mobil { display: flex; }
  .kopf .nutzer-knopf { background: transparent !important; color: var(--text); width: auto; padding: 0 2px; }
  .kopf .nutzer-knopf .initial { display: none; }
  .kopf .nutzer-knopf .name { display: inline; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
  .kopf .nutzer-knopf .pfeil { display: inline; }
}
@media (max-width: 759px) {
  .reiter-tabs { grid-auto-columns: auto; justify-content: space-between; padding: 0 6px; }
  .reiter-tabs a, .themen-tab { padding: 0 6px; font-size: 0.86rem; white-space: nowrap; }
}

/* Baudgirl-Details: Monospace-Beschriftungen, weit gesperrt */
:root { --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace; }
.kicker, .detail .kicker, .kicker-zeile, .fakten dt, .f-gruppe summary, .menue-titel, .tabelle th, .zahl span, .sterne-zeile.unbewertet small {
  font-family: var(--mono); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; font-style: normal; }
.fakten dt, .menue-titel { font-size: 0.7rem; }
.sterne-zeile.unbewertet small { font-size: 0.66rem; letter-spacing: 0.12em; }
@media (max-width: 759px) { .f-gruppe summary { font-family: inherit; letter-spacing: 0; text-transform: none; font-weight: 700; } }
/* „Nacht“ noch näher an baudgirl.com */
[data-thema="nacht"] { --bg: #17161b; --karte: #201f25; --karte-hell: #2a2930; --linie: #34323b; --orange: #c2227f; --orange-dunkel: #a81c6d; --akzent: #e4459c; }
[data-thema="nacht"] .gruppe, [data-thema="nacht"] .fakten div, [data-thema="nacht"] .zahl, [data-thema="nacht"] .tabelle-rahmen { border-color: #3d3a45; }
[data-thema="nacht"] h1 { color: #f7f1ea; }
.farbe-nacht i { background: linear-gradient(135deg, #17161b 50%, #c2227f 50%); }
/* Rückmeldungs-Blase am ＋-Knopf */
.blase { position: absolute; z-index: 70; transform: translateY(-100%); padding: 8px 12px; background: var(--text); color: var(--bg);
  font-size: 0.85rem; font-weight: 600; line-height: 1.3; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; }
.blase.da { opacity: 1; transform: translateY(calc(-100% - 4px)); }
.blase.weg { opacity: 0; }
/* Kacheln: Tags doch anzeigen (Svens Wunsch) */
[data-ansicht="kacheln"] .karte-tags { display: block !important; margin-top: auto; padding-top: 8px; }
/* Mobil: offenes Themen-Blatt liegt über allem (sonst verdeckt die Kopfzeile das ✕) */
@media (max-width: 759px) {
  body.panel-offen .reiter { z-index: 100; }
  body.panel-offen .kopf { z-index: 10; }
  .panel-kopf { position: sticky; top: 0; z-index: 2; background: var(--bg); }
  .panel-zu { width: 44px; height: 44px; font-size: 1.3rem; }
}
.reiter .panel-kopf b { margin: 0; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.35rem; color: var(--text); }

/* ── Profil und Profilbilder (quadratisch, passend zum schlichten Stil) ── */
.avatar { display: inline-block; flex-shrink: 0; object-fit: cover; vertical-align: middle; background: var(--karte-hell); }
.avatar-leer { display: inline-grid; place-items: center; color: var(--text-2); font-weight: 700; font-family: var(--display); font-style: italic; }
.profil-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.profil-link:hover b { color: var(--akzent); }
.kommentar-kopf .profil-link { gap: 6px; }
.kopf .nutzer-knopf { gap: 8px; }
.kopf .nutzer-knopf .kopf-avatar { width: 26px; height: 26px; }
.profil-kopf { display: flex; align-items: center; gap: 24px; padding: 20px 0 12px; }
.profil-kopf h1 { margin: 2px 0 4px; }
.profil-kopf .ziel { margin: 0 0 4px; }
.profil-bild { width: 120px; height: 120px; }
.profil-ueber { max-width: 760px; white-space: normal; color: var(--text-2); border-left: 3px solid var(--orange); padding-left: 14px; }
.profil-bild-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#profil-vorschau { width: 72px; height: 72px; }
h1.mit-avatar { display: flex; align-items: center; gap: 14px; }
@media (max-width: 759px) {
  .profil-kopf { gap: 16px; }
  .profil-bild { width: 84px; height: 84px; }
  .kopf .nutzer-knopf .kopf-avatar { width: 24px; height: 24px; }
  .kopf .nutzer-knopf .name { display: none; }
}
/* Textseiten (Was ist das? / Impressum) */
.textseite { max-width: 760px; padding: 24px 0 8px; }
.textseite h2 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }
.textseite ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.textseite li { position: relative; padding-left: 26px; margin: 8px 0; }
.textseite .ziel { font-size: 1.15rem; }
.textseite code { font-size: 0.85em; word-break: break-word; }

/* ══ Matchtipps (04.10.2026): Mentaltipps aus Svens Vortrag ══ */
.tipps-held { padding: 24px 0 8px; max-width: 760px; }
.tipps-held h1 { font-family: var(--display); font-weight: 900; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 12px; }
.tipps-held h1 span { color: var(--orange); }
.tipps-held .ziel { font-size: 1.15rem; color: var(--text-2); margin: 0; }
.tipps-held .ziel b { color: var(--text); }
.tipps-admin { margin: 14px 0 0; }
.tipps-sprung { display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px; scrollbar-width: none; }
.tipps-sprung .chip { flex-shrink: 0; white-space: nowrap; }
.tipps-regeln { margin: 18px 0 8px; padding: 18px 18px 14px; background: var(--karte); box-shadow: inset 4px 0 0 var(--orange), inset 0 0 0 1px var(--linie); max-width: 760px; }
.tipps-regeln h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; margin: 0 0 10px; }
.tipps-teil { max-width: 760px; margin-top: 2rem; }
.tipps-teil > h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; letter-spacing: -0.01em; margin: 0; }
.tipps-unter { margin: 2px 0 12px; color: var(--text-2); font-style: italic; }
.tipp { background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); margin-bottom: 8px; }
.tipp summary { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; list-style: none; }
.tipp summary::-webkit-details-marker { display: none; }
.tipp summary::after { content: "▾"; margin-left: auto; color: var(--text-3); transition: transform .15s; }
.tipp[open] summary::after { transform: rotate(180deg); }
.tipp .nr { flex: 0 0 auto; font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--orange); min-width: 2ch; }
.tipp .titel { display: flex; flex-direction: column; min-width: 0; }
.tipp .titel small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.tipp .titel b { font-size: 1.08rem; font-weight: 650; }
.tipp-inhalt { padding: 0 16px 16px; line-height: 1.55; }
.tipps-regeln .tipp-inhalt { padding: 0; }
.tipp-inhalt p { margin: 0 0 10px; }
.tipp-inhalt h4 { margin: 16px 0 6px; font-size: 1rem; }
.tipp-punkte, .tipp-nummern, .tipp-vergleich { list-style: none; margin: 0 0 10px; padding: 0; }
.tipp-punkte li { position: relative; padding-left: 22px; margin: 5px 0; }
.tipp-punkte li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 7px; height: 7px; background: var(--orange); transform: rotate(45deg); }
.tipp-punkte li.unter { margin-left: 22px; color: var(--text-2); }
.tipp-punkte li.unter::before { background: var(--text-3); width: 5px; height: 5px; }
.tipp-nummern li { display: flex; gap: 12px; align-items: baseline; margin: 8px 0; font-size: 1.05rem; }
.tipp-nummern .nr { font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--orange); min-width: 1.2ch; }
.tipp-vergleich li { display: flex; gap: 10px; margin: 5px 0; }
.tipp-vergleich i { font-style: normal; font-weight: 800; flex: 0 0 auto; }
.tipp-vergleich .nein i { color: var(--rot); }
.tipp-vergleich .ja i { color: var(--gruen); }
.tipp-fazit { color: var(--akzent); font-weight: 600; }
.tipp-merksatz { margin: 12px 0; padding: 16px 18px; background: var(--text); color: var(--bg); font-family: var(--display); font-style: italic; font-weight: 700; font-size: 1.2rem; line-height: 1.35; }
.tipp-merksatz b { color: var(--orange); }
.tipp-kasten { margin: 12px 0; padding: 12px 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--linie), inset 4px 0 0 var(--orange); }
.tipp-kasten p { margin: 0; }
.tipp-label { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 4px; }
.tipp-bearbeiten { display: inline-block; margin-top: 6px; font-size: 0.85rem; }
.tipp-neu { display: inline-block; margin-top: 4px; font-size: 0.9rem; }
.tipps-gesperrt { max-width: 760px; margin: 18px 0; padding: 22px 18px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); text-align: center; }
.tipps-gesperrt h2 { margin: 4px 0 8px; }
.tipps-gesperrt .aktionen { justify-content: center; }
.tipps-schloss { font-size: 2rem; margin: 0; }
.tipps-vorschau { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.tipps-vorschau li { padding: 10px 14px; border-bottom: 1px solid var(--linie); color: var(--text-2); filter: blur(0.3px); }
.tipps-vorschau li::before { content: "🔒 "; font-size: 0.8em; }
.tipp-text { font-family: var(--mono); font-size: 0.9rem; min-height: 320px; }
.tipp-hilfe summary { cursor: pointer; color: var(--text-2); font-size: 0.92rem; }
.tipp-hilfe dl { display: grid; gap: 4px; margin: 8px 0 0; }
.tipp-hilfe dl div { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 10px; font-size: 0.9rem; }
.tipp-hilfe dd { margin: 0; color: var(--text-2); }
@media (max-width: 759px) {
  .reiter-tabs .tab-neu { display: none; }
  /* sechs Reiter passen nicht nebeneinander: Zeile wischbar, aktiver Reiter wird per app.js sichtbar gescrollt */
  .reiter-tabs { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .reiter-tabs::-webkit-scrollbar { display: none; }
  .reiter-tabs a, .reiter-tabs .themen-tab { padding: 0 11px; white-space: nowrap; }
}

/* Ersteller auf der Übungsseite, Zahlen + Verlauf im Profil (04.10.2026) */
.titel-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; margin: -2px 0 8px; }
.titel-meta .sterne-link { margin: 0; }
.ersteller { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--text-3);
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; }   /* wie „Noch keine Bewertung“ */
.ersteller b { color: var(--text-2); font-weight: 600; }
.ersteller .profil-link { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.ersteller .profil-link:hover b { text-decoration: underline; }
.profil-zahlen { margin: 16px 0; }
.profil-zahlen .zahl { cursor: default; }

/* SpinZentrale-Logo (Inline-SVG): Fläche und Schrift folgen dem Farbschema */
.logo-sh { display: block; flex-shrink: 0; }
.logo-sh rect { fill: var(--orange); }
.logo-sh g { fill: var(--dunkel); }

/* Wortmarke wie Svens Entwurf (04.10.2026): SH-Quadrat so hoch wie Name + Unterzeile, Name groß, Unterzeile schlicht */
.kopf .marke { gap: 14px; }
.kopf .marke span { line-height: 1; }
.kopf .marke b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.85rem; letter-spacing: -0.025em; }
.kopf .marke small { font-family: Inter, system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-top: 6px; }
@media (max-width: 1100px) { .kopf .marke b { font-size: 1.5rem; } .kopf .marke small { font-size: 0.78rem; } .kopf .marke .logo-sh { width: 46px; height: 46px; } }
@media (max-width: 759px) { .kopf .marke .logo-sh { width: 40px; height: 40px; } }
.fuss-marke .logo-sh { width: 56px; height: 56px; }

/* Wortmarke als SVG mit Ball-i-Punkt (04.10.2026): Höhe folgt der Schriftgröße von b */
.wortmarke { display: block; height: 1.23em; width: auto; overflow: visible; margin: -0.18em 0 -0.05em -0.02em; }
.wortmarke .wm-text { fill: currentColor; }
.wortmarke .wm-flug { fill: var(--orange); }
/* Handy: statt SH-Quadrat die Wortmarke mit Ball-i-Punkt (ohne Unterzeile), Sven 04.10.2026 */
@media (max-width: 759px) {
  .kopf .marke .logo-sh, .kopf .marke small { display: none; }
  .kopf .marke span { display: flex; }
  .kopf .marke b { font-size: 1.3rem; }
}

/* ── Favoriten (04.10.2026): Herz über dem ＋ auf der Karte, Knopf auf der Übungsseite ── */
.favorit {
  position: absolute; top: calc(50% - 26px); right: 10px; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie);
  background: transparent; color: var(--text-2); font-size: 1.25rem; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.karte .merken { top: calc(50% + 26px); }
.favorit .herz-voll, .favorit-text .herz-voll { display: none; }
.favorit[aria-pressed="true"], .favorit-text[aria-pressed="true"] { color: var(--orange); border-color: var(--orange); }
.favorit[aria-pressed="true"] .herz-leer, .favorit-text[aria-pressed="true"] .herz-leer { display: none; }
.favorit[aria-pressed="true"] .herz-voll, .favorit-text[aria-pressed="true"] .herz-voll { display: inline; }
@media (hover: hover) { .favorit:hover { border-color: var(--orange); color: var(--orange); } }
[data-ansicht="kacheln"] .favorit { top: 10px; right: 56px; transform: none; width: 38px; height: 38px; background: var(--bg); }
[data-ansicht="kacheln"] .karte .merken { top: 10px; }
.fav-tab b { margin-left: 2px; }

/* ── Tags als Wolke im Themen-Menü + anklickbare Tags auf den Karten (04.10.2026) ── */
@media (min-width: 760px) {
  .panel-spalten { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr;
    grid-template-areas: "kat sp level" "kat sp tag"; }
}
.f-tag .f-optionen { display: flex; flex-wrap: wrap; gap: 6px; max-height: none; overflow: visible; padding-right: 0; }
.f-tag .f-opt { position: relative; gap: 5px; padding: 5px 10px; border: 1px solid var(--linie); border-radius: 0; font-size: 0.85rem; }
.f-tag .f-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.f-tag .f-opt span { overflow: visible; }
.f-tag .f-opt .n { margin-left: 0; }
.f-tag .f-opt:has(input:checked) { background: var(--orange); border-color: var(--orange); color: var(--dunkel); }
.f-tag .f-opt:has(input:checked) .n { color: inherit; }
.f-tag .f-opt:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.f-tag .f-opt.mehr { display: none; }
.f-tag.alle .f-opt.mehr, .f-tag .f-opt.mehr:has(input:checked) { display: flex; }
.tag-alle { margin-top: 10px; font-size: 0.85rem; }
.tag-link { cursor: pointer; }
.tag-link:hover { color: var(--orange); text-decoration: underline; }
@media (max-width: 759px) { .f-tag .f-opt { padding: 8px 12px; font-size: 0.95rem; } }

/* ── Reiter „Trainings“ mit Aufklappmenü (04.10.2026) ── */
.reiter .tab-trainings.aktiv { color: var(--text); border-bottom: 3px solid var(--orange); font-weight: 600; }
.tab-menue { position: fixed; z-index: 40; min-width: 220px; display: flex; flex-direction: column; padding: 6px 0;
  background: var(--bg); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), inset 0 0 0 1px var(--linie); }
.tab-menue[hidden] { display: none; }
.reiter .tab-menue a { justify-content: flex-start; min-height: 44px; padding: 0 16px; border: 0; margin: 0; font-weight: 500; color: var(--text-2); }
.reiter .tab-menue a:hover, .reiter .tab-menue a.aktiv { color: var(--text); background: var(--karte); }
.reiter .tab-menue a b { margin-left: 6px; }

/* Inhalt + Fußzeile linksbündig wie Kopf und Reiter, auch auf breiten Bildschirmen (Sven 04.10.2026) */
main, .fuss { margin-left: 0; margin-right: auto; }
/* Erster Reiter („Themen“) bündig mit Logo und Inhalt (Sven 04.10.2026) */
@media (min-width: 760px) { .reiter-tabs > :first-child { padding-left: 0; } }

/* ── Aufräumen 04.10.2026 ── */
/* Begrüßung für Gäste auf der Startseite */
.gast-held { padding: 26px 0 30px; margin-bottom: 8px; border-bottom: 1px solid var(--linie); max-width: 860px; }
.gast-held h1 { font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; margin: 4px 0 12px; }
.gast-held p:not(.kicker-zeile) { color: var(--text-2); font-size: 1.05rem; max-width: 640px; margin: 0 0 18px; }
.gast-held .aktionen { margin: 0; }
/* eckig wie alle Knöpfe: Tags und Schwerpunkte auf der Übungsseite */
.tags a { border-radius: 0 !important; }
/* Datumskachel in „Meine Trainings“ passend zum Farbschema statt weiß */
.tag-datum { background: var(--bg) !important; box-shadow: inset 0 0 0 1px var(--linie); border-radius: 0; }
/* Tag-Auswahl in Formularen als Wolke: erst 15, Rest aufklappbar, kein Scrollkasten */
.tag-wahl { max-height: none !important; overflow: visible !important; }
.tag-wahl .tag-chip.mehr { display: none; }
.tag-wahl.alle .tag-chip.mehr, .tag-wahl .tag-chip.mehr[aria-pressed="true"] { display: inline-flex; }
.tag-wahl-alle { flex-basis: 100%; text-align: left; font-size: 0.85rem; margin-top: 4px; }
/* Leer-Hinweis im Plan linksbündig, 404 mit Abstand */
.leer.links { text-align: left; }
.mit-abstand { margin-top: 1.5rem; }
/* Datenschutz-Text */
.textseite.lang h2 { margin-top: 1.8rem; }
.textseite.lang p, .textseite.lang li { max-width: 760px; }
/* Themen-Menü am PC nie höher als der Bildschirm: Spalten scrollen, Fuß mit „Zurücksetzen/Anzeigen“ bleibt sichtbar */
@media (min-width: 760px) {
  .filter-panel:not([hidden]) { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .filter-panel .panel-spalten { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .filter-panel .panel-fuss { flex-shrink: 0; }
}

/* ── Geteilte Trainings (04.10.2026) ── */
.abschnitt { margin: 2rem 0 0.8rem; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.3rem; }
.marke-geteilt { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 0.7rem; font-weight: 700; vertical-align: 2px;
  color: var(--akzent); box-shadow: inset 0 0 0 1px var(--orange); }
.training-kommentare { margin-top: 1.6rem; }
.training-kommentare .kommentar { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.training-kommentare .kommentar p { margin: 0 0 4px; }
.training-kommentare .kommentar-kopf { font-size: 0.85rem; color: var(--text-2); }
.training-kommentare .kommentar-kopf .inline-form { display: inline; }

/* Teilen mit einzelnen Trainern */
.teilen-box { margin-top: 1.4rem; padding: 0 16px; box-shadow: inset 0 0 0 1px var(--linie); }
.teilen-box summary { cursor: pointer; padding: 14px 0; font-weight: 700; }
.teilen-box summary small { font-weight: 400; color: var(--text-2); margin-left: 6px; }
.teilen-box .formular { padding-bottom: 16px; }
.teilen-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; max-height: 320px; overflow-y: auto; }
.teilen-liste .haken-feld { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.teilen-liste .haken-feld[hidden] { display: none; }
.teilen-liste small { color: var(--text-3); }
.teilen-suche { margin-bottom: 8px; }

/* Alles mittig in max. 1440px, Kopf, Reiter, Inhalt und Fuß bündig (Sven 05.10.2026) – ersetzt das Linksbündige vom 04.10. */
main, .fuss { margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
  .kopf, .reiter-innen { --seite: max(var(--gutter), calc((100% - var(--breite)) / 2 + var(--gutter))); padding-left: var(--seite); padding-right: var(--seite); }
  .reiter .filter-panel { left: var(--seite); right: var(--seite); }
}

/* Training teilen: Mitglieder + öffentlicher Link (05.10.2026) */
.teilen-titel { font-size: 1rem; margin: 18px 0 6px; }
.link-zeile { display: flex; gap: 8px; }
.link-zeile input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }

/* Handbuch (05.10.2026): Inhaltsverzeichnis als Sprungmarken, Abschnitte unter dem klebenden Reiter lesbar */
.handbuch .inhalt { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 18px 0 8px; }
.handbuch .inhalt a { padding: 6px 12px; background: var(--karte); color: var(--text); font-size: 0.9rem; text-decoration: none; }
.handbuch .inhalt a:hover { background: var(--orange); color: var(--dunkel); }
.handbuch h2, .handbuch h3 { scroll-margin-top: 80px; }
.handbuch h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.handbuch ol.schritte { list-style: none; padding: 0; margin: 0 0 10px; }
.handbuch ol.schritte li { padding-left: 32px; }

/* Favorit: kurzer Herz-Puls als Rückmeldung (05.10.2026) */
@keyframes fav-puls { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
.favorit.fav-puls .herz-voll, .favorit-text.fav-puls .herz-voll { display: inline-block; animation: fav-puls .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .favorit.fav-puls .herz-voll, .favorit-text.fav-puls .herz-voll { animation: none; } }

/* Freunde (06.10.2026): Knopf im Profilkopf, Liste im eigenen Profil, Marke in der Teilen-Liste, Punkt am Namensknopf */
.freund-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.freund-marke { display: inline-block; padding: 3px 10px; font-size: 0.85rem; font-weight: 600; background: var(--karte); color: var(--text-2); }
.freund-marke.ja { background: var(--orange); color: var(--dunkel); }
.teilen-liste .freund-marke { padding: 1px 7px; font-size: 0.75rem; }
.freund-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 20px; }
.freund-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.freund-zeile[hidden] { display: none; }
.freund-zeile .profil-link { min-width: 0; }
.freund-zeile .profil-link span { display: flex; flex-direction: column; min-width: 0; }
.freund-zeile .profil-link small { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freund-knoepfe { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.freund-knoepfe .knopf.klein { min-height: 32px; padding: 0 10px; font-size: 0.82rem; }
.freund-knoepfe .freund-marke { display: none; }
.freunde-finden { margin-top: 18px; }
.freunde-finden summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.freunde-finden summary small { font-weight: 400; color: var(--text-2); margin-left: 6px; }
.freunde-suche { margin: 8px 0; }
.freunde-box { scroll-margin-top: 80px; }
.nutzer-knopf { position: relative; }
.freund-punkt { position: absolute; top: 2px; left: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--bg); }

/* ── Übung anlegen (seit 09.10.2026): KI-Kasten, Wahl „Nur für mich / Für alle“, private Übungen ── */
.ki-kasten { background: var(--karte); border-left: 4px solid var(--orange); padding: 14px 16px; margin: 0 0 22px; display: grid; gap: 10px; }
.ki-kasten h2 { margin: 0; font-size: 1.15rem; }
.ki-kasten p { margin: 0; }
.ki-kasten textarea { width: 100%; min-height: 96px; resize: vertical; line-height: 1.45; }
.ki-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ki-zeile .knopf small { font-weight: 400; opacity: 0.8; margin-left: 6px; }
.ki-status { padding: 8px 12px; background: var(--bg); border: 1px solid var(--linie); }
.ki-status.fehler { border-color: var(--rot); margin: 0; }
.ki-status.ok { border-color: var(--gruen); }
.ki-kasten.arbeitet .ki-status::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid var(--orange); border-right-color: transparent; border-radius: 50%; animation: ki-dreh 0.8s linear infinite; }
@keyframes ki-dreh { to { transform: rotate(360deg); } }
#uebung-form { scroll-margin-top: 90px; }
#uebung-form.ki-gefuellt input:not([type=checkbox]):not([type=radio]), #uebung-form.ki-gefuellt textarea, #uebung-form.ki-gefuellt select {
  outline: 2px solid var(--orange); outline-offset: 1px; transition: outline-color 1s; }
.sichtbar-wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sichtbar-wahl legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.formular .sichtbar-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--karte); border: 2px solid transparent; cursor: pointer; font-weight: 400; }
.formular .sichtbar-opt:has(input:checked) { border-color: var(--orange); }
.sichtbar-opt input { width: auto; min-height: 0; margin-top: 4px; accent-color: var(--orange); }
.sichtbar-opt span { display: grid; gap: 2px; }
.sichtbar-opt small { color: var(--text-2); }
.privat-marke { display: inline-block; margin: 4px 0 0; padding: 3px 10px; background: var(--karte); font-size: 0.88rem; color: var(--text-2); }
.privat-box { margin-top: 28px; padding: 14px 16px; background: var(--karte); border-left: 4px solid var(--linie); }
.privat-box h2 { margin-top: 0; }
.privat-schloss { font-size: 0.85em; }