/* TV Muttenz Trainingsideen – Gestaltung
   Farben aus logo.png ausgelesen: Grau #444442, Rot #E5162A */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/jakarta.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --rot: #E5162A;
  --rot-tief: #C30F21;
  --rot-text: #D01225;
  --rot-hauch: #FDECEE;
  --grau: #444442;
  --text: #1F1F1E;
  --text-2: #5E5E5B;
  --text-3: #6B6B67;
  --bg: #F4F4F1;
  --karte: #FFFFFF;
  --feld: #EDEDEA;
  --linie: rgba(31, 31, 30, 0.09);
  --schatten: 0 1px 2px rgba(20, 20, 18, 0.06), 0 8px 24px rgba(20, 20, 18, 0.08);
  --schatten-gross: 0 2px 6px rgba(20, 20, 18, 0.08), 0 18px 48px rgba(20, 20, 18, 0.16);
  --tab-bg: rgba(255, 255, 255, 0.86);
  --skeleton: #E6E6E2;
  --r-gross: 26px;
  --r-mittel: 18px;
  --r-klein: 12px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --tab-h: 64px;
  --schnell: 180ms;
  --mittel: 320ms;
  --federnd: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --sanft: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rot: #E5162A;
    --rot-tief: #D0182A;
    --rot-text: #FF5A68;
    --rot-hauch: rgba(238, 34, 53, 0.16);
    --text: #F3F3F0;
    --text-2: #B4B4AF;
    --text-3: #9A9A94;
    --bg: #111110;
    --karte: #1C1C1B;
    --feld: #262624;
    --linie: rgba(255, 255, 255, 0.08);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
    --schatten-gross: 0 2px 6px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.55);
    --tab-bg: rgba(28, 28, 27, 0.84);
    --skeleton: #262624;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100dvh;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
.ic { width: 24px; height: 24px; flex: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Grundgerüst ---------- */
.app {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--oben) + 8px) 0 calc(var(--tab-h) + var(--unten) + 32px);
}

/* Kopfbereich */
.kopf {
  position: relative;
  padding: 10px 20px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kopf__marke { width: 38px; height: auto; }
.kopf__marke--dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  .kopf__marke--hell { display: none; }
  .kopf__marke--dunkel { display: block; }
}
.kopf__text { display: flex; flex-direction: column; line-height: 1.1; }
.kopf__verein { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-text); }
.kopf__app { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.kopf__ich {
  margin-left: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--karte);
  box-shadow: var(--schatten);
  font-weight: 800; font-size: 15px;
  color: var(--grau);
}
@media (prefers-color-scheme: dark) { .kopf__ich { color: var(--text); } }

.gruss {
  position: relative;
  padding: 18px 20px 6px;
  overflow: hidden;
}
.gruss h1 {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.gruss p { margin: 6px 0 0; color: var(--text-2); font-size: 16px; font-weight: 500; }
.gruss__linien {
  position: absolute;
  right: -40px; top: 6px;
  width: 230px;
  opacity: 0.5;
  pointer-events: none;
}

/* Suchfeld (Startseite: Knopf, der zur Suche führt) */
.suche {
  margin: 18px 20px 0;
  display: flex; align-items: center; gap: 10px;
  height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--karte);
  box-shadow: var(--schatten);
  color: var(--text-3);
  width: calc(100% - 40px);
  text-align: left;
  font-weight: 500;
}

/* Zufalls-Karte */
.zufall {
  position: relative;
  margin: 16px 20px 0;
  width: calc(100% - 40px);
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-mittel);
  background: linear-gradient(135deg, #3A3A38 0%, #262625 100%);
  color: #fff;
  text-align: left;
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform var(--schnell) var(--sanft);
}
@media (prefers-color-scheme: dark) { .zufall { background: linear-gradient(135deg, #2A2A28 0%, #1E1E1D 100%); box-shadow: inset 0 0 0 1px var(--linie); } }
.zufall:active { transform: scale(0.98); }
.zufall__wuerfel {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--rot);
  box-shadow: 0 6px 16px rgba(229, 22, 42, 0.45);
}
.zufall__wuerfel .ic { width: 28px; height: 28px; }
.zufall__titel { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.zufall__sub { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 1px; }
.zufall__pfeil { margin-left: auto; opacity: 0.6; }
.zufall__linien { position: absolute; right: -30px; bottom: -14px; width: 190px; opacity: 0.35; pointer-events: none; }
.zufall.ist-wuerfeln .zufall__wuerfel, .tab.ist-wuerfeln .ic, .zweit-knopf.ist-wuerfeln .ic { animation: wuerfeln 700ms var(--sanft); }
.zkarte.neu-gezogen .zkarte__foto img, .zkarte.neu-gezogen .zkarte__inhalt { animation: einblenden 360ms var(--sanft); }
@keyframes wuerfeln {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-80deg) scale(0.86); }
  55% { transform: rotate(200deg) scale(1.12); }
  80% { transform: rotate(340deg) scale(0.96); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Abschnitts-Titel */
.abschnitt { display: flex; align-items: baseline; justify-content: space-between; padding: 30px 20px 12px; }
.abschnitt h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.abschnitt a, .abschnitt button { font-size: 14px; font-weight: 700; color: var(--rot-text); text-decoration: none; min-height: 44px; padding: 0 2px 0 12px; margin: -12px -2px -12px 0; }

/* ---------- Ordner-Kacheln ---------- */
/* «Alle» + 7 Ordner = 8 gleich grosse Kacheln (einheitliches Format) */
.ordner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px;
}
.okachel {
  position: relative;
  aspect-ratio: 1 / 1.08;
  border-radius: var(--r-mittel);
  overflow: hidden;
  color: #fff;
  text-align: left;
  background: var(--o, #666);
  box-shadow: var(--schatten);
  transform: translateZ(0);
  transition: transform var(--schnell) var(--sanft);
}
.okachel:active { transform: scale(0.97); }
.okachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Foto oben sauber, unten ein Band in der Ordnerfarbe – darauf steht die Schrift */
.okachel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--o) 80%, #000) 96%);
}
.okachel__icon {
  position: absolute; z-index: 1; top: 12px; left: 12px;
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--o) 70%, #000);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.okachel__icon .ic { width: 22px; height: 22px; }
.okachel__unten { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; }
.okachel__name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: anywhere; }
.okachel__zahl { font-size: 13px; font-weight: 600; opacity: 0.92; }
.okachel--leer { background: linear-gradient(150deg, color-mix(in srgb, var(--o) 75%, #000) 0%, color-mix(in srgb, var(--o) 92%, #000) 100%); }
.okachel--leer::after { background: none; }

/* Idee ohne Foto: Ordnerfarbe mit grossem Icon */
.ohne-foto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--o) 80%, #fff) 0%, color-mix(in srgb, var(--o) 85%, #000) 100%);
  color: rgba(255, 255, 255, 0.55);
}
.ohne-foto .ic { width: 72px; height: 72px; stroke-width: 1.5; }

/* «Alle Ideen»: gleich gross wie die Ordner, Foto-Mosaik der neusten Ideen */
.okachel--alle { --o: #3A3A38; background: #2C2C2A; }
.okachel--alle .okachel__icon { background: var(--rot); box-shadow: 0 6px 16px rgba(229, 22, 42, 0.4); }
.alle__mosaik {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
}
.alle__mosaik img, .alle__mosaik span { position: static; width: 100%; height: 100%; object-fit: cover; background: #3A3A38; }
.okachel--alle::after { background: linear-gradient(180deg, rgba(30, 30, 29, 0.15) 30%, rgba(30, 30, 29, 0.92) 92%); }

/* ---------- Neu dazugekommen (Karussell) ---------- */
.karussell {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 20px 8px;
  scroll-padding: 0 20px;
  scrollbar-width: none;
}
.karussell::-webkit-scrollbar { display: none; }
.ikarte {
  flex: 0 0 76%;
  max-width: 300px;
  scroll-snap-align: start;
  background: var(--karte);
  border-radius: var(--r-mittel);
  overflow: hidden;
  box-shadow: var(--schatten);
  text-align: left;
  transition: transform var(--schnell) var(--sanft);
}
.ikarte:active { transform: scale(0.98); }
.ikarte__foto { position: relative; aspect-ratio: 4 / 3; background: var(--skeleton); overflow: hidden; }
.ikarte__foto img { width: 100%; height: 100%; object-fit: cover; }
.ikarte__ordner {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--o) 70%, #000); color: #fff;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ikarte__ordner .ic { width: 15px; height: 15px; }
.ikarte__neu {
  position: absolute; right: 10px; top: 10px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--rot); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.ikarte__inhalt { padding: 12px 14px 14px; }
.ikarte__titel { font-weight: 800; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
.ikarte__zeile { margin-top: 3px; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ikarte__meta { margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-3); font-weight: 600; }
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 8px;
  background: var(--feld); color: var(--text-2);
  font-size: 12px; font-weight: 700;
}

/* ---------- Tab-Leiste ---------- */
.tabs {
  position: fixed; z-index: 20;
  left: 0; right: 0; bottom: 0;
  padding-bottom: var(--unten);
  background: var(--tab-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px);
  border-top: 1px solid var(--linie);
}
.tabs__innen {
  max-width: 560px; margin: 0 auto;
  height: var(--tab-h);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
}
.tab {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3);
  font-size: 11px; font-weight: 700;
}
.tab .ic { width: 25px; height: 25px; }
.tab[aria-current="page"] { color: var(--rot-text); }
.tab--plus { position: relative; }
.plus {
  width: 62px; height: 62px;
  margin-top: -26px;
  border-radius: 22px;
  display: grid; place-items: center;
  background: var(--rot);
  color: #fff;
  box-shadow: 0 8px 20px rgba(229, 22, 42, 0.42);
  transition: transform var(--schnell) var(--federnd);
}
.plus .ic { width: 32px; height: 32px; stroke-width: 2.4; }
.tab--plus:active .plus { transform: scale(0.92); }

/* ---------- Bottom Sheet: Erfassen ---------- */
.schleier {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 10, 9, 0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--mittel) var(--sanft);
}
.schleier.offen { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; z-index: 41;
  left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto;
  height: calc(100dvh - var(--oben) - 12px);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--schatten-gross);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 420ms var(--sanft), visibility 0s linear 420ms;
  overflow: hidden;
}
.sheet.offen { transform: translateY(0); visibility: visible; transition: transform 420ms var(--sanft), visibility 0s; }
.sheet__griff { width: 40px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: 0.4; margin: 8px auto 0; flex: none; }
.sheet__kopf { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 14px 8px; flex: none; }
.sheet__kopf h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rund {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--feld); color: var(--text-2);
}
.pill-knopf {
  justify-self: end;
  height: 44px; padding: 0 18px;
  border-radius: 999px;
  background: var(--rot); color: #fff;
  font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(229, 22, 42, 0.3);
  transition: opacity var(--schnell), transform var(--schnell) var(--federnd), box-shadow var(--schnell);
}
.pill-knopf:active { transform: scale(0.95); }
.pill-knopf[aria-disabled="true"] { background: var(--feld); color: var(--text-3); box-shadow: none; }
.fehlt { flex: none; margin: -2px 20px 6px; min-height: 18px; text-align: center; font-size: 13px; color: var(--text-3); font-weight: 600; transition: opacity var(--schnell); }
.fehlt:empty { opacity: 0; }
.sheet__inhalt {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 20px 24px;
}
.sheet__fuss {
  flex: none;
  padding: 12px 20px calc(12px + var(--unten));
  background: var(--bg);
  border-top: 1px solid var(--linie);
}

.feldtitel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 22px 0 10px; font-size: 14px; font-weight: 800; letter-spacing: -0.005em; }
.feldtitel:first-child { margin-top: 6px; }
.feldtitel small { font-weight: 600; color: var(--text-3); font-size: 13px; }
.pflicht { color: var(--rot-text); }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fotos--leer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fslot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--karte);
  box-shadow: var(--schatten);
}
.fslot img { width: 100%; height: 100%; object-fit: cover; animation: einblenden var(--mittel) var(--sanft); }
.fslot__weg {
  position: absolute; top: 4px; right: 4px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fslot__weg .ic { width: 18px; height: 18px; }
.fslot__weg::after { content: ""; position: absolute; inset: -6px; }
.fslot--neu {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid var(--linie);
  background: var(--karte); box-shadow: none;
  color: var(--text-2); font-size: 13px; font-weight: 700;
}
.fslot--neu .ic { width: 28px; height: 28px; }
.fslot--kamera { background: var(--rot-hauch); border-color: color-mix(in srgb, var(--rot) 30%, transparent); color: var(--rot-text); }
.fslot--laden::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%) var(--skeleton);
  background-size: 200% 100%;
  animation: schimmer 1.1s linear infinite;
}
.hinweis {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 10px;
  font-size: 13px; color: var(--text-2); font-weight: 500;
}
.hinweis .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--text-3); }

/* Ordner-Auswahl */
.owahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.owahl__knopf {
  display: flex; align-items: center; gap: 10px;
  min-height: 54px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  text-align: left;
  transition: background var(--schnell), box-shadow var(--schnell), transform var(--schnell) var(--federnd);
}
.owahl__knopf:active { transform: scale(0.97); }
.owahl__icon {
  flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--o) 16%, transparent);
  color: color-mix(in srgb, var(--o) 70%, #000);
  transition: background var(--schnell), color var(--schnell);
}
.owahl__icon .ic { width: 22px; height: 22px; }
.owahl__knopf[aria-checked="true"] {
  background: color-mix(in srgb, var(--o) 12%, var(--karte));
  box-shadow: inset 0 0 0 2px var(--o);
}
.owahl__knopf[aria-checked="true"] .owahl__icon { background: color-mix(in srgb, var(--o) 80%, #000); color: #fff; }
.owahl__haken { margin-left: auto; width: 20px; height: 20px; color: var(--o); opacity: 0; transform: scale(0.5); transition: all var(--schnell) var(--federnd); }
.owahl__knopf[aria-checked="true"] .owahl__haken { opacity: 1; transform: scale(1); }

/* Eingabefelder */
.eingabe {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  font-size: 17px; font-weight: 600;
  outline: none;
  transition: box-shadow var(--schnell);
  -webkit-appearance: none; appearance: none;
}
.eingabe::placeholder { color: var(--text-3); font-weight: 500; }
.eingabe:focus { box-shadow: inset 0 0 0 2px var(--rot); }
textarea.eingabe {
  min-height: 150px;
  resize: none;
  line-height: 1.5;
  font-weight: 500;
  font-size: 16px;
  overflow: hidden;
}
.unter-feld { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.mit-icon { position: relative; }
.mit-icon .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 21px; height: 21px; pointer-events: none; }
.mit-icon .eingabe { padding-left: 44px; }

/* Chips (Altersgruppen, Dauer) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; min-width: 56px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  font-weight: 700; font-size: 15px;
  transition: all var(--schnell) var(--sanft);
}
.chip:active { transform: scale(0.95); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--rot); color: #fff; box-shadow: 0 4px 12px rgba(229, 22, 42, 0.28); }
.chips--alter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.chips--alter .chip { min-width: 0; padding: 0; }
.dauer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dauer { flex-wrap: nowrap; }
.dauer .chip { min-width: 0; flex: 1; padding: 0 6px; }
.dauer__einheit { flex: 0 0 96px; }
.dauer .eingabe { width: 100%; text-align: center; padding: 14px 38px 14px 10px; }
.dauer__einheit { position: relative; }
.dauer__einheit::after { content: "Min."; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 700; font-size: 14px; pointer-events: none; }

/* Speichern-Knopf */
.gross-knopf {
  width: 100%; height: 56px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rot); color: #fff;
  font-weight: 800; font-size: 17px; letter-spacing: -0.005em;
  box-shadow: 0 8px 20px rgba(229, 22, 42, 0.3);
  transition: transform var(--schnell) var(--federnd), opacity var(--schnell), box-shadow var(--schnell);
}
.gross-knopf:active { transform: scale(0.98); }
.gross-knopf[aria-disabled="true"] { opacity: 0.45; box-shadow: none; }
.fuss-hinweis { text-align: center; font-size: 13px; color: var(--text-3); font-weight: 600; margin-bottom: 8px; min-height: 18px; }

/* Erfolg */
.erfolg {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  pointer-events: none;
}
.erfolg__kreis {
  width: 112px; height: 112px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rot); color: #fff;
  box-shadow: 0 16px 40px rgba(229, 22, 42, 0.45);
  animation: erfolg 1100ms var(--federnd) forwards;
}
.erfolg__kreis .ic { width: 58px; height: 58px; stroke-width: 2.6; }
.erfolg__kreis path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: haken 400ms 180ms var(--sanft) forwards; }
@keyframes erfolg {
  0% { transform: scale(0.3); opacity: 0; }
  25% { transform: scale(1.06); opacity: 1; }
  40% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0; }
}
@keyframes haken { to { stroke-dashoffset: 0; } }

/* Zufalls-Ergebnis */
.zkarte {
  position: fixed; z-index: 51;
  left: 16px; right: 16px; top: 50%;
  max-width: 420px; margin: 0 auto;
  transform: translateY(-50%) scale(0.9);
  opacity: 0; pointer-events: none; visibility: hidden;
  background: var(--karte);
  border-radius: var(--r-gross);
  overflow: hidden;
  box-shadow: var(--schatten-gross);
  transition: transform 380ms var(--federnd), opacity 220ms, visibility 0s linear 220ms;
}
.zkarte.offen { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; visibility: visible; transition: transform 380ms var(--federnd), opacity 220ms, visibility 0s; }
.zkarte__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.zkarte__zu { position: absolute; z-index: 1; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.5); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.zkarte__zu .ic { width: 20px; height: 20px; }
.zkarte__foto img { width: 100%; height: 100%; object-fit: cover; }
.zkarte__inhalt { padding: 16px 18px 18px; }
.zkarte__titel { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.zkarte__text { margin: 8px 0 0; color: var(--text-2); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.zkarte__knoepfe { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }
.zkarte__knoepfe .gross-knopf { height: 50px; font-size: 16px; }
.zweit-knopf {
  height: 50px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--feld); font-weight: 800; font-size: 16px;
}
.zweit-knopf .ic { width: 20px; height: 20px; }

/* Meldung unten */
.meldung {
  position: fixed; z-index: 70;
  left: 50%; bottom: calc(var(--tab-h) + var(--unten) + 18px);
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 14px;
  background: #262625; color: #fff;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--schatten-gross);
  opacity: 0; pointer-events: none;
  transition: all 260ms var(--sanft);
}
.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Skeleton */
.skel { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%) var(--skeleton); background-size: 200% 100%; animation: schimmer 1.1s linear infinite; }
@media (prefers-color-scheme: dark) { .skel { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%); } }
.skel.okachel { box-shadow: none; }
.skel.okachel::after { display: none; }
@keyframes schimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Einblenden der Kacheln */
.rein { animation: rein 460ms var(--sanft) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rein { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes einblenden { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .erfolg__kreis { animation: none; opacity: 1; }
}

@media (max-width: 380px) {
  .gruss__linien { width: 160px; right: -50px; top: 2px; }
}

/* Etwas grössere Handys / Tablets */
@media (min-width: 420px) {
  .gruss h1 { font-size: 38px; }
}

/* =====================================================================
   Weitere Ansichten: Ordner/Suche, Detail, Papierkorb, Anmeldung, Dialoge
   ===================================================================== */

a.okachel, a.ikarte, a.gkachel, a.suche, a.tab, a.ordner-chip, a.papierkorb-link, a.gross-knopf { text-decoration: none; color: inherit; }
a.okachel { display: block; color: #fff; }
a.suche { display: flex; }
a.ikarte { display: block; }
.app.ansicht-rein > * { animation: rein 320ms var(--sanft) both; }
body.ohne-tabs .tabs { display: none; }
body.ohne-tabs .app { padding-bottom: calc(var(--unten) + 24px); }
.rund.ist-wuerfeln .ic { animation: wuerfeln 700ms var(--sanft); }

/* Runde Knöpfe: Varianten */
.rund--karte { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.rund--rot { background: var(--rot); color: #fff; box-shadow: 0 6px 16px rgba(229, 22, 42, 0.35); }
.rund--glas {
  background: rgba(20, 20, 18, 0.42); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Seitenkopf mit Zurück */
.seitenkopf { display: flex; align-items: center; gap: 12px; padding: 12px 20px 6px; }
.seitenkopf__titel { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.seitenkopf__titel h1 { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.seitenkopf__zahl { font-size: 13px; color: var(--text-3); font-weight: 600; margin-top: 2px; min-height: 18px; }
.seitenkopf__icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--o) 80%, #000); color: #fff;
}

/* Suchfeld (echtes Eingabefeld) */
.suchfeld { position: relative; margin: 14px 20px 0; }
.suchfeld > .ic { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.suchfeld input {
  width: 100%; height: 52px;
  padding: 0 48px 0 50px;
  border: 0; border-radius: 16px;
  background: var(--karte);
  box-shadow: var(--schatten);
  font-size: 17px; font-weight: 600;
  outline: none;
  -webkit-appearance: none; appearance: none;
}
.suchfeld input::-webkit-search-cancel-button { display: none; }
.suchfeld input::placeholder { color: var(--text-3); font-weight: 500; }
.suchfeld input:focus { box-shadow: var(--schatten), inset 0 0 0 2px var(--rot); }
.suchfeld__leeren {
  position: absolute; right: 4px; top: 4px;
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: var(--text-3);
}
.suchfeld__leeren .ic { width: 20px; height: 20px; }

/* Filter nach Ordner und Alter */
.filterleiste {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 14px 20px 2px;
}
.filterleiste + .filterleiste { padding-top: 8px; }
.filterleiste::-webkit-scrollbar { display: none; }
.fchip {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border-radius: 999px;
  background: var(--karte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  font-weight: 700; font-size: 14px;
  transition: all var(--schnell) var(--sanft);
}
.fchip .ic { width: 18px; height: 18px; color: color-mix(in srgb, var(--o, var(--text-2)) 75%, #000); }
@media (prefers-color-scheme: dark) { .fchip .ic { color: color-mix(in srgb, var(--o, var(--text-2)) 75%, #fff); } }
.fchip[aria-pressed="true"] { background: var(--grau); color: #fff; box-shadow: none; }
.fchip[aria-pressed="true"][style] { background: color-mix(in srgb, var(--o) 72%, #000); }
.fchip[aria-pressed="true"] .ic { color: #fff; }
@media (prefers-color-scheme: dark) { .fchip[aria-pressed="true"]:not([style]) { background: var(--text); color: var(--bg); } }
.fchip--alter { min-width: 56px; justify-content: center; }
.filter-label { flex: none; align-self: center; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-right: 2px; }

/* Galerie: alle Kacheln gleich gross */
.galerie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; padding: 16px 20px 0;
}
.gkachel {
  display: block;
  background: var(--karte);
  border-radius: var(--r-mittel);
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: transform var(--schnell) var(--sanft);
}
.gkachel:active { transform: scale(0.97); }
.gkachel.skel { aspect-ratio: 1 / 1.32; box-shadow: none; }
.gkachel__foto { position: relative; aspect-ratio: 1 / 1; background: var(--skeleton); overflow: hidden; }
.gkachel__foto img { width: 100%; height: 100%; object-fit: cover; }
.gkachel__ordner { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.mini-ordner {
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--o) 75%, #000); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}
.mini-ordner .ic { width: 17px; height: 17px; }
.gkachel__inhalt { padding: 10px 12px 12px; }
.gkachel__titel {
  font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.gkachel__zeile { margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.gkachel__tags { display: flex; gap: 4px; margin-top: 8px; overflow: hidden; height: 22px; }
.gkachel__tags .tag { padding: 2px 7px; font-size: 11px; }
.plus-zahl { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); font-size: 11px; }

/* Leere Zustände */
.leer { text-align: center; padding: 48px 28px 24px; color: var(--text-2); }
.leer--galerie { grid-column: 1 / -1; padding-top: 32px; }
.leer--klein { padding: 24px 28px 0; }
.leer__icon {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--feld); color: var(--text-3);
}
.leer__icon .ic { width: 34px; height: 34px; }
.leer h2 { margin: 0 0 6px; font-size: 20px; color: var(--text); letter-spacing: -0.02em; }
.leer p { margin: 0; font-size: 15px; }
.leer__knopf { width: auto; padding: 0 22px; margin: 18px auto 0; display: inline-flex; }

.papierkorb-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin: 26px 20px 0;
  color: var(--text-3); font-weight: 700; font-size: 14px;
}
.papierkorb-link .ic { width: 20px; height: 20px; }

/* ---------- Detailansicht ---------- */
.app:has(.detail) { padding-top: 0; }
.detail__buehne {
  position: relative;
  height: min(52svh, 440px);
  background: #1A1A19;
  overflow: hidden;
}
.detail__buehne--leer { height: calc(220px + var(--oben)); }
.detail__fotos {
  display: flex; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.detail__fotos::-webkit-scrollbar { display: none; }
.detail__foto { flex: 0 0 100%; height: 100%; scroll-snap-align: center; cursor: zoom-in; }
.detail__foto img { width: 100%; height: 100%; object-fit: cover; }
.detail__punkte {
  position: absolute; left: 0; right: 0; bottom: 42px;
  display: flex; justify-content: center; gap: 6px; pointer-events: none;
}
.detail__punkte span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: all var(--schnell); }
.detail__punkte span.aktiv { width: 20px; border-radius: 4px; background: #fff; }
.detail__zurueck, .detail__bearbeiten { position: absolute; top: calc(var(--oben) + 12px); }
.detail__zurueck { left: 16px; }
.detail__bearbeiten { right: 16px; }
.detail__karte {
  position: relative;
  margin-top: -28px;
  padding: 22px 20px 8px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
}
.detail__ordner { display: flex; flex-wrap: wrap; gap: 8px; }
.ordner-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--o) 14%, var(--karte));
  color: color-mix(in srgb, var(--o) 72%, #000);
  font-weight: 700; font-size: 14px;
}
@media (prefers-color-scheme: dark) { .ordner-chip { color: color-mix(in srgb, var(--o) 65%, #fff); background: color-mix(in srgb, var(--o) 22%, var(--karte)); } }
.ordner-chip .ic { width: 18px; height: 18px; }
.detail__titel { margin: 14px 0 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.detail__von { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--text-2); }
.detail__von strong { color: var(--text); }
.avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--grau); color: #fff; font-weight: 800; font-size: 14px;
}
@media (prefers-color-scheme: dark) { .avatar { background: var(--feld); color: var(--text); } }
.detail__fakten { display: grid; gap: 10px; margin-top: 18px; }
.fakt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 16px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie);
}
.fakt > .ic { flex: none; width: 22px; height: 22px; color: var(--rot-text); }
.fakt small { display: block; font-size: 12px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fakt strong { display: block; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.kommentar { margin-top: 20px; font-size: 17px; line-height: 1.55; overflow-wrap: anywhere; }
.kommentar p { margin: 0 0 12px; }
.kommentar ol, .kommentar ul {
  margin: 0 0 14px; padding: 0;
  list-style: none;
  border-radius: 18px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
}
.kommentar li {
  position: relative;
  padding: 12px 16px 12px 52px;
  border-top: 1px solid var(--linie);
  font-weight: 600;
}
.kommentar li:first-child { border-top: 0; }
.kommentar ol li::before {
  content: attr(data-nr);
  position: absolute; left: 12px; top: 10px;
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--rot); color: #fff; font-size: 14px; font-weight: 800;
}
.kommentar ul li::before {
  content: "";
  position: absolute; left: 22px; top: 21px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rot);
}
.kommentar__leer { color: var(--text-3); font-size: 15px; }
.detail__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.detail__knoepfe .zweit-knopf { height: 52px; }
.detail__geaendert { text-align: center; color: var(--text-3); font-size: 13px; font-weight: 600; margin: 14px 0 0; }
.gefahr-text { color: var(--rot-text); }

/* Vollbild: Foto im aufgenommenen Format */
.vollbild {
  position: fixed; inset: 0; z-index: 80;
  background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 220ms, visibility 0s linear 220ms;
}
.vollbild.offen { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms, visibility 0s; }
.vollbild__band { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.vollbild__band::-webkit-scrollbar { display: none; }
.vollbild__bild { flex: 0 0 100%; height: 100%; display: grid; place-items: center; scroll-snap-align: center; padding: calc(var(--oben) + 64px) 0 calc(var(--unten) + 48px); }
.vollbild__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vollbild__zu { position: absolute; top: calc(var(--oben) + 12px); right: 16px; }
.vollbild__zahl { position: absolute; left: 0; right: 0; bottom: calc(var(--unten) + 16px); text-align: center; color: rgba(255, 255, 255, 0.8); font-weight: 700; font-size: 14px; }

/* ---------- Papierkorb ---------- */
.papierkorb__hinweis { display: flex; gap: 8px; margin: 12px 20px 0; color: var(--text-2); font-size: 14px; font-weight: 500; }
.papierkorb__hinweis .ic { flex: none; width: 20px; height: 20px; color: var(--text-3); }
.pliste { display: grid; gap: 12px; padding: 16px 20px 0; }
.pzeile {
  display: flex; gap: 12px; padding: 12px;
  border-radius: var(--r-mittel); background: var(--karte); box-shadow: var(--schatten);
}
.pzeile__foto { position: relative; flex: none; width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--skeleton); }
.pzeile__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); }
.pzeile__foto .ohne-foto .ic { width: 34px; height: 34px; }
.pzeile__text { flex: 1; min-width: 0; }
.pzeile__text strong { display: block; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.pzeile__text small { display: block; margin-top: 3px; color: var(--text-3); font-size: 13px; font-weight: 600; }
.pzeile__knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.klein-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  border-radius: 12px; background: var(--feld);
  font-weight: 700; font-size: 14px;
}
.klein-knopf .ic { width: 18px; height: 18px; }

/* ---------- Anmeldung ---------- */
.login {
  min-height: calc(100dvh - var(--oben) - var(--unten) - 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 24px; text-align: center;
}
.login__logo { width: min(230px, 62vw); height: auto; }
.login__logo.kopf__marke--dunkel { display: none; }
@media (prefers-color-scheme: dark) { .login__logo.kopf__marke--hell { display: none; } .login__logo.kopf__marke--dunkel { display: block; } }
.login__titel { margin: 18px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.login__frage { margin: 22px 0 10px; color: var(--text-2); font-weight: 700; }
.login__namen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 360px; }
.login__namen .chip { min-width: 96px; }
.passwort { position: relative; width: 100%; max-width: 360px; margin-top: 18px; }
.passwort .eingabe { padding-right: 52px; }
.passwort__auge { position: absolute; right: 4px; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--text-3); }
.login .gross-knopf { max-width: 360px; margin-top: 12px; }
.login__fehler { min-height: 20px; margin: 12px 0 0; color: var(--rot-text); font-weight: 700; font-size: 14px; }

/* ---------- Dialog (Rückfrage, Profil) ---------- */
.dialog {
  position: fixed; z-index: 52;
  left: 12px; right: 12px; bottom: calc(var(--unten) + 12px);
  max-width: 440px; margin: 0 auto;
  padding: 22px 18px 16px;
  border-radius: 26px;
  background: var(--karte);
  box-shadow: var(--schatten-gross);
  transform: translateY(30px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform 320ms var(--federnd), opacity 200ms, visibility 0s linear 220ms;
}
.dialog.offen { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform 320ms var(--federnd), opacity 200ms, visibility 0s; }
.dialog__titel { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; text-align: center; }
.dialog__text { margin: 8px 0 0; color: var(--text-2); font-size: 15px; text-align: center; }
.dialog__knoepfe { display: grid; gap: 8px; margin-top: 18px; }
.dialog__knoepfe .gross-knopf, .dialog__knoepfe .zweit-knopf { height: 52px; }
.dialog__liste { display: grid; gap: 6px; margin-top: 16px; }
.dialog__eintrag {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 0 16px;
  border-radius: 16px; background: var(--feld);
  font-weight: 700; font-size: 16px; text-align: left;
}
.dialog__eintrag .ic { width: 22px; height: 22px; }
.dialog__abbrechen { width: 100%; margin-top: 8px; }

/* Meldung mit Knopf (z. B. Rückgängig) */
.meldung { display: flex; align-items: center; gap: 14px; }
.meldung.mit-knopf.sichtbar { pointer-events: auto; }
.meldung__knopf { min-height: 40px; padding: 0 12px; margin: -8px -8px -8px 0; border-radius: 10px; color: #FF8A94; font-weight: 800; }
body.ohne-tabs .meldung { bottom: calc(var(--unten) + 18px); }

.zkarte__aus { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rot-text); margin-bottom: 6px; }
.zkarte__foto .ohne-foto .ic, .ikarte__foto .ohne-foto .ic { width: 72px; height: 72px; }
.detail__alter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.detail__alter > .ic { width: 22px; height: 22px; color: var(--text-3); margin-right: 4px; }
.tag--gross { padding: 5px 10px; font-size: 14px; border-radius: 10px; }
.detail__kurz { margin: 8px 0 0; font-size: 18px; line-height: 1.4; color: var(--text-2); font-weight: 600; }
.suchfeld__leeren[hidden] { display: none; }
.meldung.mit-knopf { width: calc(100% - 32px); max-width: 420px; justify-content: space-between; }
.meldung__knopf { flex: none; }
.variante-knopf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin-top: 4px;
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--rot) 25%, transparent);
  background: var(--rot-hauch); color: var(--rot-text);
  font-weight: 800; font-size: 15px;
}
.variante-knopf .ic { width: 20px; height: 20px; }

/* Lea, 2. Prüfung */
.filterleiste { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.fchip--alter[aria-pressed="true"] { background: var(--rot); color: #fff; }
.owahl__knopf[data-haupt]::after {
  content: "Haupt"; margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--o) 80%, #000); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
#f-kurz { text-overflow: ellipsis; }
.pzeile { flex-wrap: wrap; }
.pzeile__text { flex: 1 1 0; }
.pzeile__knoepfe { flex: 1 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.pzeile__knoepfe .klein-knopf { justify-content: center; }