/*
  Tiempos – Gestaltung im Stil von it-service-commander.de:
  Navy mit feinem Raster, Space Grotesk für Überschriften, IBM Plex Sans für Text,
  IBM Plex Mono für Kennungen. Alle Schriften liegen lokal im Ordner schriften/.
*/

@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schriften/space-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/space-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schriften/space-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schriften/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schriften/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root {
  /* Farben der Webseite */
  --navy: #141b29;          /* dunkle Flächen, z. B. der Regel-Dialog */
  --navy-hell: #1d2636;
  --seite: #202c3e;         /* Hintergrund der Seite – etwas heller als die Dialoge */
  --blue: #2a74a6;
  --blue-dark: #1f6a99;
  --blue-licht: #4598c8;
  --blue-soft: #e7f0f7;

  --ink: #141b29;
  --muted: #5f6775;
  --slate: #333945;
  --soft: #eef2f7;
  --line: #d7dce4;
  --paper: #ffffff;
  --danger: #8e2e22;
  --danger-soft: #f8ecec;
  --auf-navy: #c7d3e2;

  /* Spanische Akzente: Terrakotta und Safran, sparsam eingesetzt */
  --terracotta: #c2572f;
  --safran: #e0a33a;
  --safran-soft: #fbf1dc;
  --safran-deep: #8a5d12;

  --radius: 16px;
  --shadow: 0 24px 60px rgba(5, 10, 20, .45);

  --kopf: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

}

/* Die Farben der Zeitformen stehen in zeiten.css (erzeugt aus daten/zeiten.json). */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100lvh;
  color: var(--auf-navy);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  background-color: var(--seite);
  /* feines Raster wie im Einstieg der Webseite */
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(100% 65% at 50% 0%, rgba(69, 152, 200, .20), transparent 72%);
  background-size: 48px 48px, 48px 48px, 100% 820px;
  background-attachment: fixed, fixed, scroll;
}

/* Am Rechner bleiben links und rechts große Flächen frei – die werden zu den
   Rändern hin heller, damit die Seite nicht zu dunkel wirkt. */
@media (min-width: 900px) {
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(146, 186, 224, .20) 0%,
        rgba(146, 186, 224, .12) 14%,
        rgba(146, 186, 224, .03) 30%,
        transparent 42%,
        transparent 58%,
        rgba(146, 186, 224, .03) 70%,
        rgba(146, 186, 224, .12) 86%,
        rgba(146, 186, 224, .20) 100%);
  }
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid rgba(69, 152, 200, .55);
  outline-offset: 3px;
}
h1, h2, h3, .prompt, .brand-name, .result-badge { font-family: var(--kopf); letter-spacing: -.02em; }

.shell {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 56px;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Kennungen in Schreibmaschinenschrift, wie die Labels auf der Webseite */
.kennung {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px;
  color: var(--blue-licht); font-family: var(--mono); font-size: .74rem;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.kennung::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Kopfleiste ------------------------------------------------------------ */

/* Der Kopf läuft über die ganze Breite, der Inhalt darunter bleibt schmal. */
.kopfbereich {
  margin-bottom: 20px;
  background: linear-gradient(180deg, rgba(10, 15, 24, .55), rgba(10, 15, 24, 0));
}
.kopf-innen { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding-top: 12px; }

/* Schmale Infozeile über dem Menü – wie die Servicezeile auf der Webseite. */
.infozeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 2px 9px; color: #8ba0ba;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase;
}
.infozeile-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sprach-form { flex: none; }
.sprach-wahl {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px;
}
.sprach-knopf {
  border: 0; border-radius: 999px; padding: 3px 9px; background: transparent; color: #8ba0ba;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; cursor: pointer;
}
.sprach-knopf:hover { color: white; }
.sprach-knopf.aktiv { background: rgba(69, 152, 200, .22); color: #d6ebfa; cursor: default; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 2px 2px 14px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; }
.brand-mark {
  display: grid; flex: none; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: rgba(69, 152, 200, .14); border: 1px solid rgba(69, 152, 200, .35);
}
.brand-mark span {
  position: relative; width: 22px; height: 17px;
  border-top: 3px solid var(--blue-licht); border-bottom: 3px solid var(--blue-licht);
}
.brand-mark span::before, .brand-mark span::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%;
}
.brand-mark span::before { top: -5px; left: 2px; background: #e8f1f8; }
/* Ein Tupfer Safran – der spanische Akzent der Marke. */
.brand-mark span::after { bottom: -5px; right: 2px; background: var(--safran); }
.brand-name { color: white; font-size: 1.3rem; font-weight: 700; line-height: 1.15; white-space: nowrap; }

/* Das Menü steht als Textzeile rechts, genau wie auf der Webseite. */
.top-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; }
.top-button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; border: 0; border-radius: 8px;
  padding: 0 11px; background: transparent; color: #c3d2e2;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.top-button::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--safran); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.top-button:hover { color: white; }
.top-button:hover::after, .top-button[aria-current="page"]::after { transform: scaleX(1); }
.top-button svg { flex: none; width: 18px; height: 18px; }
.top-button--stark {
  margin-left: 8px; border-radius: 9px; padding: 0 15px;
  background: var(--blue); color: white;
}
/* Der Weg zurück zur Übung ist als Schaltfläche erkennbar. */
.top-button--zurueck {
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; padding: 0 14px;
  background: rgba(255, 255, 255, .05);
}
.top-button--zurueck::after { content: none; }
.top-button--zurueck:hover { border-color: rgba(69, 152, 200, .55); background: rgba(69, 152, 200, .18); }
.top-button--stark::after { content: none; }
.top-button--stark:hover { background: var(--blue-dark); color: white; }
.icon-button { width: 38px; padding: 0; }
.konto-form { display: flex; align-items: center; }
.konto-knopf {
  gap: 9px; margin-left: 6px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 0 14px 0 5px; background: rgba(255, 255, 255, .05);
}
.konto-knopf::after { content: none; }
.konto-knopf:hover { background: rgba(69, 152, 200, .16); }
.konto-bild { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.konto-name { font-family: var(--text); font-size: .86rem; letter-spacing: 0; text-transform: none; }

/* Azulejo: ein feiner Farbstreifen als Abschluss der Kopfleiste –
   vom Blau der Webseite zum Safran und Terrakotta spanischer Fliesen. */
.azulejo {
  height: 3px;
  background: linear-gradient(90deg,
    var(--blue) 0%, var(--blue-licht) 28%, var(--safran) 62%, var(--terracotta) 100%);
  opacity: .85;
}

.hinweis-leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin: 0 0 14px; padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid var(--blue-licht);
  border-radius: 12px; background: rgba(255, 255, 255, .04);
  color: var(--auf-navy); font-size: .86rem;
}
.hinweis-leiste a { color: var(--blue-licht); font-weight: 600; }

/* Karte ----------------------------------------------------------------- */

.card {
  overflow: hidden; background: var(--paper); color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
[data-farbe] { --tense: #4a5365; --tense-soft: #eef0f4; --tense-deep: #39414f; }

.card-head { padding: 16px 26px 18px; border-bottom: 1px solid var(--line); }
/* Flexibel, damit weitere Zeitformen einfach in die nächste Zeile rutschen. */
.mode-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); }
.mode-tab {
  flex: 1 1 78px; min-width: 0;
  min-height: 40px; border: 0; border-radius: 9px; padding: 6px 8px;
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.mode-tab:hover { color: var(--ink); }
.mode-tab[aria-pressed="true"] { color: white; box-shadow: 0 6px 14px rgba(20, 27, 41, .22); }

.round-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; color: var(--muted);
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.round-status-side { display: flex; align-items: center; gap: 8px; }
.score, .streak { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.score { background: var(--tense-soft); color: var(--tense-deep); }
/* Die Serie bekommt den warmen spanischen Ton. */
.streak { background: var(--safran-soft); color: var(--safran-deep); font-weight: 600; }
.streak span[aria-hidden] { color: var(--safran); }
.end-round {
  border: 0; padding: 0; background: none; color: var(--tense-deep);
  font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap;
}
.end-round:hover { color: var(--ink); }

.progress-track { height: 10px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #e3e8ee; }
.progress-fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--tense);
  transition: width .45s cubic-bezier(.2, .9, .3, 1), background .2s ease;
}

/* Aufgabe --------------------------------------------------------------- */

.exercise { padding: clamp(26px, 5vw, 42px) clamp(20px, 5vw, 46px) clamp(26px, 4vw, 38px); }
.question-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.tense-pill, .verb-pill {
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.tense-pill { background: var(--tense-soft); color: var(--tense-deep); }
.verb-pill { border: 1px solid var(--line); color: var(--muted); background: white; text-transform: none; letter-spacing: .02em; }

.prompt { margin: 0 0 8px; font-size: clamp(1.5rem, 4.2vw, 2.25rem); line-height: 1.4; font-weight: 700; letter-spacing: -.03em; }
.blank {
  display: inline-block; min-width: 4.4ch; margin: 0 .06em; padding: 0 .16em;
  border: 0; border-bottom: 4px solid var(--tense);
  background: transparent; color: var(--tense-deep);
  font: inherit; line-height: 1.15; text-align: center; transition: background .2s ease;
}
.blank.solved { border-radius: 6px 6px 0 0; background: var(--tense-soft); }
/* Die Linie ist von Anfang an etwa so lang wie die gesuchte Form. */
.blank-input {
  border-radius: 6px 6px 0 0; caret-color: var(--tense);
  width: calc((var(--zeichen, 6) + 1) * 1ch); max-width: 100%;
}
.blank-input:focus { background: var(--tense-soft); outline: 0; }
.translation { margin: 0 0 26px; color: var(--muted); font-size: .98rem; }

.action-row { display: flex; flex-direction: column; gap: 14px; }
.primary-button {
  width: 100%; max-width: 300px; min-height: 56px; border: 0; border-radius: 14px; padding: 0 22px;
  background: var(--tense); color: white; font-family: var(--kopf); font-size: 1.02rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 5px 0 var(--tense-deep), 0 12px 20px rgba(20, 27, 41, .18);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease, background .2s ease;
}
.primary-button:hover { filter: brightness(1.07); }
.primary-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tense-deep), 0 4px 10px rgba(20, 27, 41, .14); }

.tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.accent-row { display: flex; gap: 6px; }
.accent-key {
  width: 38px; height: 36px; border: 1px solid var(--line); border-radius: 9px;
  background: #f6f8fb; color: var(--slate); font-weight: 600; cursor: pointer;
}
.accent-key:hover { border-color: #aeb6c3; background: white; }
.text-button {
  border: 0; padding: 5px 0; background: transparent; color: var(--muted); font-weight: 600;
  text-decoration: underline; text-decoration-color: #bdc4cf; text-underline-offset: 4px; cursor: pointer;
}
.text-button:hover { color: var(--tense-deep); }
.text-button.danger { color: var(--danger); text-decoration-color: #d9a9a2; }

/* Rückmeldung ----------------------------------------------------------- */

.feedback { display: flex; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 14px; animation: rise .22s ease-out; }
.feedback.correct { background: var(--tense-soft); color: var(--tense-deep); }
.feedback.wrong { background: var(--danger-soft); color: var(--danger); }
.feedback.close { background: var(--soft); color: var(--slate); }
.feedback.info { background: var(--tense-soft); color: var(--tense-deep); }
.feedback-icon {
  position: relative; display: grid; flex: none; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 255, 255, .8); color: inherit; font-size: 1.15rem; font-weight: 700;
}
.feedback-body { min-width: 0; }
.feedback-title { margin: 0; font-family: var(--kopf); font-size: 1.04rem; font-weight: 700; }
.feedback-copy { margin: 3px 0 0; font-size: .94rem; }
.feedback-copy strong { font-weight: 700; }
.feedback-tip { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid rgba(20, 27, 41, .14); font-size: .9rem; }
.forms-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  border: 0; padding: 0; background: none; color: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.forms-toggle::before {
  content: "+"; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 7px; background: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1;
}
.forms-toggle[aria-expanded="true"]::before { content: "−"; }

/* Konjugationstabelle --------------------------------------------------- */

.conjugation-panel { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; animation: rise .22s ease-out; }
.table-pager { display: none; }
.pager-button {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 10px; background: white;
  color: var(--slate); font-size: 1.2rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.pager-button:hover { border-color: #aeb6c3; }
.pager-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pager-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--tense); }
.pager-hint { border-radius: 999px; padding: 3px 8px; background: var(--tense-soft); color: var(--tense-deep); font-size: .62rem; }

.table-scroll { overflow-x: auto; }
.conjugation-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .84rem; table-layout: fixed; }
.conjugation-table th, .conjugation-table td { padding: 9px 11px; text-align: left; }
.conjugation-table thead th {
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  background: #f6f8fb; color: var(--muted);
}
.conjugation-table thead th:first-child { width: 17%; position: sticky; left: 0; z-index: 2; }
.conjugation-table tbody th, .conjugation-table tbody td { border-top: 1px solid #e1e5eb; }
.conjugation-table tbody th { position: sticky; left: 0; background: white; color: var(--muted); font-weight: 600; }
.conjugation-table tbody tr.target-person th { color: var(--ink); background: var(--soft); }
.conjugation-table td.target-column { background: var(--tense-soft); color: var(--tense-deep); }
.conjugation-table td.target-form { color: white; background: var(--tense); font-weight: 700; }

/* Ergebnis -------------------------------------------------------------- */

.result { padding: 44px 28px 48px; text-align: center; }
.result-badge {
  position: relative; display: grid; place-items: center; width: max-content; min-width: 92px; height: 92px;
  margin: 0 auto 18px; border-radius: 26px; padding: 0 15px; background: var(--tense); color: white;
  font-size: 1.55rem; font-weight: 700; white-space: nowrap; transform: rotate(-3deg);
  box-shadow: 0 12px 26px rgba(20, 27, 41, .22);
}
.result h2 { margin: 0 0 8px; font-size: 1.9rem; }
.result p { max-width: 430px; margin: 0 auto 24px; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; border: 0; border-radius: 12px; padding: 0 20px;
  background: var(--blue); color: white; font-family: var(--kopf); font-weight: 700;
  text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 var(--blue-dark);
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.button:hover { filter: brightness(1.08); }
.button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blue-dark); }
.result .button { background: var(--tense); box-shadow: 0 4px 0 var(--tense-deep); }
.result .button:active { box-shadow: 0 1px 0 var(--tense-deep); }
.button.secondary { border: 1px solid var(--line); background: white; color: #37506a; box-shadow: 0 4px 0 #d5dae2; }
.button.secondary:hover { color: var(--blue-dark); }
.button.secondary:active { box-shadow: 0 1px 0 #d5dae2; }
.button.weit { width: 100%; }

/* Dialoge --------------------------------------------------------------- */

.sheet {
  width: min(540px, calc(100% - 24px));
  max-height: min(88vh, 780px);
  max-height: min(86svh, 780px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 0; border-radius: var(--radius); background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.sheet::backdrop { background: rgba(10, 16, 28, .66); }
.sheet[open] { animation: rise .2s ease-out; }
.sheet-head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 22px 12px; background: var(--paper);
}
.sheet.dark { background: var(--navy); color: white; }
.sheet.dark .sheet-head { background: var(--navy); }
.sheet-head h2 { margin: 0; font-size: 1.2rem; }
.close-button {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px;
  background: var(--soft); color: var(--slate); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.close-button:hover { background: #e1e7ee; }
.sheet.dark .close-button { background: rgba(255, 255, 255, .1); color: white; }
.sheet-body { padding: 8px 22px 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.sheet-intro { margin: 0 0 18px; color: var(--muted); font-size: .9rem; }
.sheet.dark .sheet-intro { color: var(--auf-navy); }
.sheet-foot {
  position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px; margin: 18px -22px -22px; padding: 16px 22px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: #f6f8fb;
}

/* Am Rechner stehen die Zeiten nebeneinander – so muss man kaum scrollen. */
@media (min-width: 900px) {
  .sheet--weit { width: min(940px, calc(100% - 48px)); }
  .regel-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: start; }
  .regel-raster .tense-note + .tense-note { margin-top: 0; }
}

.tense-note { position: relative; padding-left: 18px; }
.tense-note::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 5px; width: 4px; border-radius: 999px; background: var(--note); }
.tense-note + .tense-note { margin-top: 20px; }
.tense-note h3 { margin: 0 0 5px; font-size: 1rem; color: var(--note-text); }
.tense-note p { margin: 0 0 8px; color: var(--auf-navy); font-size: .9rem; }
.tense-note .example { margin: 0 0 9px; color: white; font-style: italic; }
.marker-list { display: flex; flex-wrap: wrap; gap: 6px; }
.marker-list span {
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 4px 9px;
  color: #eef3f8; font-family: var(--mono); font-size: .72rem;
}

/* Einstellungen --------------------------------------------------------- */

.field { margin: 0 0 18px; border: 0; padding: 0; }
.field legend {
  margin-bottom: 8px; padding: 0; color: #46536b;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.choice-group { display: inline-flex; flex-wrap: wrap; gap: 4px; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--soft); }
.choice { position: relative; }
.choice input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice span {
  display: block; min-height: 38px; border-radius: 9px; padding: 8px 14px;
  color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer;
}
.choice span:hover { color: var(--ink); }
.choice input:checked + span { color: white; background: var(--blue); }
.choice input:focus-visible + span { outline: 3px solid rgba(42, 116, 166, .45); outline-offset: 2px; }

.check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.check { position: relative; }
.check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.check-pill {
  display: block; border: 2px solid var(--line); border-radius: 999px; padding: 8px 14px;
  color: var(--muted); font-family: var(--mono); font-size: .76rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.check input:checked + .check-pill { color: white; border-color: transparent; }
.check input:focus-visible + .check-pill { outline: 3px solid rgba(42, 116, 166, .45); outline-offset: 2px; }
.field-note { margin: 8px 0 0; color: #7c8492; font-size: .78rem; }

.verb-details { border-top: 1px solid var(--line); }
.verb-details summary { padding: 14px 0 4px; font-size: .92rem; font-weight: 700; cursor: pointer; }
.verb-cloud { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0 2px; }
.verb-cloud span { border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; background: #f6f8fb; color: var(--muted); font-size: .8rem; }
.verb-cloud strong { color: var(--ink); font-weight: 600; }

/* Lernstand ------------------------------------------------------------- */

.stats-device-hinweis { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark); font-size: .82rem; font-weight: 600; }
.stats-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-metric { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 7px; text-align: center; background: #f6f8fb; }
.stats-metric strong { display: block; font-family: var(--kopf); font-size: 1.2rem; line-height: 1.1; }
.stats-metric span {
  display: block; margin-top: 4px; color: var(--muted);
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.tense-bars { display: grid; gap: 9px; margin-top: 16px; }
.tense-bar { display: grid; grid-template-columns: 92px 1fr 72px; align-items: center; gap: 10px; font-family: var(--mono); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tense-bar-track { height: 8px; border-radius: 999px; background: #e3e8ee; overflow: hidden; }
.tense-bar-fill { height: 100%; border-radius: inherit; background: var(--bar); }
.tense-bar-value { color: var(--muted); text-align: right; }
.stats-tip { margin: 16px 0 0; color: var(--muted); font-size: .88rem; }
.stats-details { margin-top: 14px; border-top: 1px solid var(--line); }
.stats-details summary { padding: 13px 0 9px; color: #46536b; font-size: .86rem; font-weight: 700; cursor: pointer; }
.stats-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.stats-table th, .stats-table td { padding: 7px 8px; text-align: left; border-bottom: 1px solid #e7eaf0; white-space: nowrap; }
.stats-table thead th {
  position: sticky; top: 0; z-index: 1; background: #f6f8fb; color: var(--muted);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
}
.stats-table thead th:first-child { text-align: left; }
.stats-table th:not(:first-child), .stats-table td:not(:first-child) { text-align: center; }
.zeit-kurz { display: none; }
.stats-table td.stat-weak { color: var(--danger); background: var(--danger-soft); font-weight: 700; }
.stats-table td.stat-strong { color: var(--blue-dark); background: var(--blue-soft); font-weight: 700; }
.reset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muted); font-size: .86rem; }

/* Konto, Profil, Mitglieder --------------------------------------------- */

.konto-karte { max-width: 470px; margin: 0 auto; }
.konto-inhalt { padding: clamp(24px, 5vw, 36px); }
.konto-inhalt h1 { margin: 0 0 8px; font-size: 1.6rem; }
.konto-text { margin: 0 0 20px; color: var(--muted); font-size: .94rem; }
.konto-fehler { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--danger-soft); color: var(--danger); font-size: .9rem; font-weight: 600; }
.konto-ok { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); font-size: .9rem; font-weight: 600; }
.konto-form-felder { display: grid; gap: 15px; min-width: 0; }
.feld { display: grid; gap: 5px; min-width: 0; }
.feld > span {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #46536b;
}
.feld small { color: #7c8492; font-size: .78rem; }
.feld input {
  width: 100%; min-width: 0;
  min-height: 52px; border: 2px solid #cbd2dc; border-radius: 12px; padding: 10px 14px;
  background: white; color: var(--ink); font-size: 1rem; font-weight: 500;
}
.feld input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); outline: 0; }
/* Der Code bleibt im Feld, auch auf schmalen Geräten. */
.code-feld input {
  font-family: var(--mono); font-size: clamp(1.15rem, 7vw, 1.7rem); font-weight: 600;
  letter-spacing: clamp(.18em, 2.6vw, .45em);
  text-align: center; padding-left: clamp(.18em, 2.6vw, .45em); padding-right: 0;
}
.konto-wechsel { margin: 18px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.9; }
.konto-wechsel a { color: var(--blue-dark); font-weight: 600; }
.konto-mail { font-family: var(--mono); color: var(--ink); }

.bild-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.bild-wahl { position: relative; }
.bild-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bild-wahl img {
  display: block; width: 100%; aspect-ratio: 1; border: 2px solid var(--line); border-radius: 14px;
  background: #f6f8fb; cursor: pointer; transition: border-color .15s ease, transform .15s ease;
}
.bild-wahl img:hover { border-color: #aeb6c3; transform: translateY(-2px); }
.bild-wahl input:checked + img { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.bild-wahl input:focus-visible + img { outline: 3px solid rgba(42, 116, 166, .45); outline-offset: 2px; }
.bild-wahl--eigen img { border-style: solid; border-color: var(--blue-licht); }
.bild-upload { display: grid; gap: 12px; margin-top: 16px; }
.bild-upload input[type="file"] {
  width: 100%; border: 1px dashed var(--line); border-radius: 12px; padding: 11px 13px;
  background: #f8fafc; color: var(--muted); font-size: .86rem;
}
.bild-upload input[type="file"]::file-selector-button {
  margin-right: 12px; border: 0; border-radius: 8px; padding: 7px 13px;
  background: var(--blue); color: white; font: inherit; font-weight: 600; cursor: pointer;
}
.bild-upload .check { justify-self: start; }

.profil-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profil-bild { width: 72px; height: 72px; border-radius: 18px; background: #f6f8fb; border: 1px solid var(--line); }
.profil-kopf h1 { margin: 0 0 2px; }

.seiten-kopf { padding: clamp(22px, 4vw, 32px) clamp(20px, 4vw, 32px) 10px; }
.seiten-kopf h1 { margin: 0 0 6px; font-size: 1.5rem; }
.seiten-kopf p { margin: 0; color: var(--muted); font-size: .92rem; }
.seiten-kopf .kennung { color: var(--blue-dark); }
.seiten-leer { padding: 0 24px 24px; color: var(--muted); }
.seiten-fuss { padding: 14px 24px 24px; margin: 0; }
.mitglieder-tabelle { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.mitglieder-tabelle th, .mitglieder-tabelle td { padding: 11px 14px; text-align: left; border-top: 1px solid #e7eaf0; white-space: nowrap; }
.mitglieder-tabelle thead th {
  /* Überschriften dürfen umbrechen, damit die Tabelle in die Karte passt. */
  white-space: normal; line-height: 1.3;
  border-top: 0; background: #f6f8fb; color: var(--muted);
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.mitglieder-tabelle tbody th { font-weight: 700; }
.mitglieder-tabelle td:last-child { white-space: normal; }
.mitglieder-name { display: inline-flex; align-items: center; gap: 10px; }
.mitglieder-name form { margin-left: 2px; line-height: 0; }
.mitglieder-name img { width: 34px; height: 34px; border-radius: 10px; background: #f6f8fb; }
.mitglieder-tabelle tr.ich { background: var(--blue-soft); }
.ich-marke { border-radius: 999px; padding: 2px 8px; background: var(--blue); color: white; font-family: var(--mono); font-size: .62rem; font-weight: 600; }

.mitglieder-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px clamp(20px, 4vw, 32px) 18px;
}
.such-form { display: flex; gap: 8px; flex: 1 1 240px; }
.such-form input {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 13px; background: white; color: var(--ink); font-size: .94rem; font-weight: 500;
}
.such-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); outline: 0; }
.such-form .button { padding: 10px 16px; }
.filter-gruppe { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f1f4f8; }
.filter-knopf {
  border-radius: 999px; padding: 7px 14px; color: var(--muted); text-decoration: none;
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
}
.filter-knopf:hover { color: var(--ink); }
.filter-knopf.aktiv { background: white; color: var(--blue-dark); box-shadow: 0 1px 3px rgba(20, 27, 41, .12); }
/* Sortierbare Spaltenköpfe */
.sortier-knopf {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.sortier-knopf:hover { color: var(--blue-dark); }
.sortier-pfeil { opacity: 0; transition: opacity .15s ease; }
.sortier-knopf:hover .sortier-pfeil { opacity: .5; }
.mitglieder-tabelle thead th.sortiert { color: var(--blue-dark); background: var(--blue-soft); }
.mitglieder-tabelle thead th.sortiert .sortier-pfeil { opacity: 1; }

/* Trefferquote als Balken */
.quote { display: inline-flex; align-items: center; gap: 8px; }
.quote-balken {
  position: relative; flex: none; width: 54px; height: 7px;
  border-radius: 999px; background: #e3e8ee; overflow: hidden;
}
.quote-balken > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--t-indefinido), var(--t-presente));
}
.quote-wert { font-variant-numeric: tabular-nums; }

/* Grüner Punkt: heute schon geübt */
.mitglieder-bild { position: relative; display: inline-flex; flex: none; }
.aktiv-punkt {
  position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border: 2px solid white; border-radius: 50%; background: #2f9e63;
}
.mitglieder-tabelle tr.ich .aktiv-punkt { border-color: var(--blue-soft); }

/* Ausklappbare Zeile mit den selteneren Werten */
.detail-knopf {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid transparent; border-radius: 9px; padding: 0;
  background: transparent; color: #9aa3b2; font-size: .95rem; line-height: 1; cursor: pointer;
  transition: transform .18s ease, color .15s ease, border-color .15s ease;
}
.detail-knopf:hover { border-color: var(--line); color: var(--blue-dark); }
tr.offen .detail-knopf { transform: rotate(180deg); color: var(--blue-dark); }
.detailzeile td {
  padding: 0 14px 13px 58px; border-top: 0;
}
.detailzeile .detail-wert {
  display: inline-flex; align-items: baseline; gap: 7px; margin-right: 18px;
  font-size: .82rem;
}
.detailzeile .detail-wert span {
  color: var(--muted); font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.mitglieder-tabelle tr.ich + .detailzeile { background: var(--blue-soft); }

/* Die eigenen Gruppen über der Liste */
.eigene-gruppen { display: grid; gap: 8px; padding: 0 clamp(16px, 4vw, 24px) 16px; }
.eigene-gruppe {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  border: 1px solid var(--blue); border-radius: 14px; padding: 13px 16px;
  background: var(--blue-soft); color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.eigene-gruppe-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eigene-gruppe-name { font-family: var(--kopf); font-size: 1.05rem; font-weight: 700; }
.eigene-gruppe-werte {
  grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px; color: var(--blue-dark);
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.eigene-gruppe-pfeil {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  color: var(--blue-dark); font-size: 1.2rem; transition: transform .18s ease;
}
.gruppen-einladung {
  margin: 0 clamp(16px, 4vw, 24px) 16px; padding: 11px 14px;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font-size: .88rem;
}
.gruppen-einladung a { color: var(--blue-dark); font-weight: 600; }

.mitglieder-text { display: grid; gap: 3px; }
.mitglieder-zeile { display: inline-flex; align-items: center; gap: 7px; }
.leiter-marke {
  border-radius: 999px; padding: 2px 8px; background: var(--safran-soft); color: var(--safran-deep);
  font-family: var(--mono); font-size: .62rem; font-weight: 600; white-space: nowrap;
}
.gruppen-marken { display: flex; flex-wrap: wrap; gap: 4px; }
.gruppen-marke {
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px;
  color: var(--muted); font-family: var(--mono); font-size: .6rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.gruppen-marke:hover { border-color: var(--blue); color: var(--blue-dark); }

.leiter-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; max-width: 230px; margin: 8px 0 0 44px; }
.mini-knopf {
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
  background: white; color: var(--muted);
  font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; text-align: left;
}
.mini-knopf:hover { border-color: var(--blue); color: var(--blue-dark); }
.mini-knopf.gefahr:hover { border-color: var(--danger); color: var(--danger); }

/* Blättern ---------------------------------------------------------------- */

.blaettern {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding: 12px clamp(16px, 4vw, 24px);
  border-top: 1px solid var(--line); background: #f8fafc;
  color: var(--muted); font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.blaettern-tasten { display: inline-flex; align-items: center; gap: 8px; }
.blaetter-knopf {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink);
  font-size: 1rem; text-decoration: none;
}
.blaetter-knopf:hover { border-color: var(--blue); color: var(--blue-dark); }
.blaetter-knopf.leer { color: #c3cad6; background: #f1f4f8; }
.blaettern-groesse { display: inline-flex; align-items: center; gap: 6px; }
.blaettern-groesse .groesse {
  border-radius: 7px; padding: 3px 8px; color: var(--muted); text-decoration: none;
}
.blaettern-groesse a.groesse:hover { background: #e9eef4; color: var(--ink); }
.blaettern-groesse .groesse.aktiv { background: var(--blue); color: white; }

/* Gruppen ----------------------------------------------------------------- */

.seiten-meldung {
  margin: 0 clamp(16px, 4vw, 24px) 14px; padding: 11px 14px; border-radius: 12px;
  font-size: .9rem; font-weight: 600;
}
.seiten-meldung.fehler { background: var(--danger-soft); color: var(--danger); }

.gruppen-liste { display: grid; gap: 12px; margin: 0; padding: 0 clamp(16px, 4vw, 24px) 4px; list-style: none; }
.gruppen-karte {
  display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 16px; background: #fbfcfe;
}
.gruppen-karte.dabei { border-color: var(--blue); background: var(--blue-soft); }
.gruppen-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.gruppen-name { color: var(--ink); font-family: var(--kopf); font-size: 1.12rem; font-weight: 700; text-decoration: none; }
.gruppen-name:hover { color: var(--blue-dark); }
.gruppen-zeile {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0; color: var(--muted);
  font-family: var(--mono); font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
}
.gruppen-leiter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: .86rem; }
.gruppen-leiter-titel { color: var(--muted); font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.leiter-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.leiter-person img { width: 22px; height: 22px; border-radius: 50%; background: #f6f8fb; }
.gruppen-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.gruppe-anlegen { padding: 18px clamp(16px, 4vw, 24px) 4px; border-top: 1px solid var(--line); }
.gruppe-anlegen h2 { margin: 0 0 10px; font-size: 1.05rem; }
.gruppe-anlegen .such-form input { min-height: 44px; }
.gruppe-anlegen .verb-details { margin-top: 14px; }

.freund-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px;
  background: white; color: #8c96a6; font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.freund-knopf:hover { border-color: var(--blue); color: var(--blue); }
.freund-knopf.ist-freund { border-color: #e2b23f; background: #fdf6e4; color: #d59a16; }

/* Fußzeile -------------------------------------------------------------- */

.footer { display: grid; gap: 5px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; color: #9fb0c4; font-size: .8rem; }
.footer a { color: var(--blue-licht); font-weight: 600; text-underline-offset: 3px; }
/* Deckende Fläche, damit das Raster des Hintergrunds nicht durchscheint. */
.version-button {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 5px 13px;
  background: #253143; color: #dce6f1;
  font-family: var(--mono); font-size: .72rem; font-weight: 600; cursor: pointer;
}
.version-button::after { content: "Änderungen"; border-radius: 999px; padding: 2px 7px; background: #2d5774; color: #cfe7f8; font-size: .64rem; }
.version-button:hover { border-color: var(--blue-licht); color: white; }

.release + .release { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.release h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.release-tag { border-radius: 999px; padding: 3px 9px; background: var(--blue-soft); color: var(--blue-dark); font-family: var(--mono); font-size: .64rem; font-weight: 600; }
.release ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.release li { margin-bottom: 5px; }

/* Animationen ----------------------------------------------------------- */

@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes confettiFly {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); opacity: 0; }
}
.pop { animation: pop .45s cubic-bezier(.2, 1.3, .4, 1); }
.shake { animation: shake .45s ease-in-out; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; background: var(--c); animation: confettiFly .9s ease-out forwards; }

/* Schmale Bildschirme --------------------------------------------------- */

/* Reicht der Platz für das Textmenü nicht mehr, bleiben die Sinnbilder. */
/* Statt Beschriftungen stehen hier Schaltflächen mit Sinnbildern –
   groß genug zum Tippen und deutlich sichtbar. */
@media (max-width: 860px) {
  .top-actions { gap: 6px; }
  .top-button {
    width: 46px; min-height: 46px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
    background: rgba(255, 255, 255, .06);
  }
  .top-button:hover, .top-button:active { background: rgba(69, 152, 200, .2); border-color: rgba(69, 152, 200, .5); }
  .top-button svg { width: 23px; height: 23px; }
  .top-button span:not(.konto-name) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .top-button::after { content: none; }
  .top-button--stark, .konto-knopf, .top-button--zurueck { width: auto; }
  .top-button--zurueck { padding: 0 13px; }
  .top-button--zurueck span:not(.konto-name) {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
  .top-button--stark { padding: 0 16px; border-color: var(--blue); background: var(--blue); }
  .top-button--stark:hover, .top-button--stark:active { background: var(--blue-dark); border-color: var(--blue-dark); }
  .top-button--stark span:not(.konto-name) {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
  .konto-knopf { padding: 0 6px; }
  .konto-bild { width: 32px; height: 32px; }
}

@media (max-width: 640px) {
  .shell { width: calc(100% - 20px); padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
  .kopf-innen { width: calc(100% - 20px); padding-top: 8px; }
  .kopfbereich { margin-bottom: 16px; }
  .infozeile { padding-bottom: 8px; }
  .infozeile-text { font-size: .62rem; letter-spacing: .1em; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 0 2px 12px; }
  .top-actions { width: 100%; gap: 6px; justify-content: flex-end; }
  .top-actions > *, .konto-form { flex: none; }
  .top-button--stark { margin-left: 0; }
  .konto-name { display: none; }
  .konto-knopf { margin-left: 0; padding: 0 5px; }
  .azulejo { margin-bottom: 14px; }
  .brand { gap: 10px; }
  .brand-mark { width: 40px; height: 40px; }
  .card-head { padding: 14px 16px 12px; }
  /* Auf dem Handy zwei Reiter je Zeile. */
  .mode-tab { flex: 1 1 calc(50% - 4px); padding: 9px 4px; }
  .exercise { padding: 24px 18px 26px; }
  .primary-button { max-width: none; }
  .feedback { gap: 11px; padding: 14px 15px; }
  .feedback-icon { width: 32px; height: 32px; font-size: 1rem; }
  .table-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--line); background: #f6f8fb;
  }
  .conjugation-table { min-width: 0; table-layout: auto; }
  .conjugation-table thead th:first-child { width: 40%; }
  .conjugation-table .col-tense { display: none; }
  .conjugation-table[data-column="presente"] .col-presente,
  .conjugation-table[data-column="perfecto"] .col-perfecto,
  .conjugation-table[data-column="indefinido"] .col-indefinido,
  .conjugation-table[data-column="imperfecto"] .col-imperfecto { display: table-cell; }
  /* Mitglieder: aus jeder Tabellenzeile wird eine Karte – nichts wird mehr abgeschnitten. */
  .mitglieder-leiste { gap: 10px; }
  .such-form { flex: 1 1 100%; }
  .table-scroll { overflow: visible; }
  .mitglieder-tabelle { display: block; min-width: 0; }
  .mitglieder-tabelle thead { display: none; }
  .mitglieder-tabelle tbody { display: block; }
  .mitglieder-tabelle tr {
    /* Drei Werte je Karte – jeder auf einer eigenen Zeile, nichts bricht um. */
    display: grid; grid-template-columns: 1fr; gap: 2px;
    padding: 13px 16px; border-top: 1px solid #e7eaf0;
  }
  .mitglieder-tabelle tbody th, .mitglieder-tabelle td {
    display: block; padding: 0; border: 0; white-space: normal;
  }
  .mitglieder-tabelle tbody th { grid-column: 1 / -1; margin-bottom: 7px; }
  .mitglieder-tabelle td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    padding: 3px 0; font-weight: 600;
  }

  /* Die ausgeklappten Werte hängen an der Karte darüber. */
  .mitglieder-tabelle tr.detailzeile { display: block; padding: 0 16px 14px; border-top: 0; }
  .mitglieder-tabelle tr.detailzeile td {
    display: flex; flex-wrap: wrap; gap: 4px 20px;
    padding: 11px 0 0; border-top: 1px solid #e7eaf0;
  }
  .mitglieder-tabelle tr.detailzeile td::before { content: none; }
  .detailzeile .detail-wert { margin-right: 0; }
  .mitglieder-tabelle td::before {
    content: attr(data-spalte); color: var(--muted);
    font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Lernstand: sichtbar steht das Kürzel, vorgelesen wird der volle Name. */
  .zeit-lang {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
  }
  .zeit-kurz { display: inline; }
  .stats-table-wrap { max-height: max(320px, 40svh); }
  .stats-table { font-size: .72rem; }
  .stats-table th, .stats-table td { padding: 7px 4px; }
  .stats-table thead th { font-size: .58rem; letter-spacing: .02em; }
  .stats-table tbody th { font-size: .76rem; }

  .tense-bar { grid-template-columns: 82px 1fr 66px; }
  .sheet { width: calc(100% - 16px); max-height: 92vh; max-height: 90svh; }
  .sheet-head { padding: 16px 18px 10px; }
  .sheet-body { padding: 6px 18px 24px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .sheet-foot { margin: 18px -18px -24px; padding: 14px 18px 18px; }
  .sheet-foot .button { flex: 1 1 auto; padding: 0 12px; }
  .choice-group { display: flex; width: 100%; }
  .choice { flex: 1 1 auto; text-align: center; }
  .choice span { padding: 8px 10px; font-size: .86rem; }
  .footer { font-size: .82rem; }
}

@media (max-width: 400px) {
  .top-actions { gap: 4px; }
  .top-button { width: 42px; min-height: 42px; }
  .top-button svg { width: 21px; height: 21px; }
  .top-button--stark, .konto-knopf, .top-button--zurueck { width: auto; }
  .top-button--stark { padding: 0 13px; }
  .top-button--zurueck { padding: 0 11px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 1.2rem; }
}

/* Bewegung beim Überfahren ----------------------------------------------- */

/* Nur dort, wo es eine echte Maus gibt – auf dem Handy bliebe der Zustand kleben. */
@media (hover: hover) and (pointer: fine) {
  .mitglieder-tabelle tbody tr.hauptzeile { transition: background .18s ease; }
  .mitglieder-tabelle tbody tr.hauptzeile:hover { background: #f4f7fb; }
  .mitglieder-tabelle tbody tr.ich.hauptzeile:hover { background: #dceaf6; }
  .mitglieder-name img { transition: transform .18s ease; }
  .mitglieder-tabelle tbody tr.hauptzeile:hover .mitglieder-name img { transform: scale(1.08); }

  /* Der Stern ist zurückhaltend und wird erst beim Überfahren kräftig. */
  .mitglieder-tabelle tbody tr.hauptzeile .freund-knopf:not(.ist-freund) { opacity: .45; }
  .mitglieder-tabelle tbody tr.hauptzeile:hover .freund-knopf { opacity: 1; }
  .freund-knopf:hover { transform: scale(1.12); }

  .eigene-gruppe:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 27, 41, .16); }
  .eigene-gruppe:hover .eigene-gruppe-pfeil { transform: translateX(4px); }
  .gruppen-karte { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .gruppen-karte:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 27, 41, .12); }
  .top-button--zurueck svg { transition: transform .18s ease; }
  .top-button--zurueck:hover svg { transform: translateX(-3px); }
  .filter-knopf, .groesse, .gruppen-marke, .mini-knopf, .blaetter-knopf {
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  }
  .blaetter-knopf:hover { transform: translateY(-1px); }
  .bild-wahl img { transition: transform .18s ease, border-color .15s ease, box-shadow .18s ease; }
  .bild-wahl img:hover { transform: translateY(-2px) scale(1.04); }
  .mode-tab:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .55); }
  .accent-key { transition: transform .15s ease, border-color .15s ease, background .15s ease; }
  .accent-key:hover { transform: translateY(-2px); border-color: var(--tense); }
  .card { transition: box-shadow .25s ease; }
}

/* Wer Animationen abschaltet – in den Einstellungen oder im Betriebssystem –,
   bekommt dieselbe Oberfläche, nur ohne Bewegung. */
body[data-animationen="0"] *,
body[data-animationen="0"] *::before,
body[data-animationen="0"] *::after {
  transition: none !important; animation: none !important;
}
body[data-animationen="0"] .mitglieder-tabelle tbody tr.hauptzeile:hover .mitglieder-name img,
body[data-animationen="0"] .eigene-gruppe:hover,
body[data-animationen="0"] .gruppen-karte:hover,
body[data-animationen="0"] .freund-knopf:hover,
body[data-animationen="0"] .bild-wahl img:hover,
body[data-animationen="0"] .accent-key:hover,
body[data-animationen="0"] .blaetter-knopf:hover,
body[data-animationen="0"] .top-button--zurueck:hover svg,
body[data-animationen="0"] .eigene-gruppe:hover .eigene-gruppe-pfeil {
  transform: none !important;
}
body[data-animationen="0"] .mitglieder-tabelle tbody tr.hauptzeile .freund-knopf { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .eigene-gruppe:hover, .gruppen-karte:hover, .freund-knopf:hover,
  .bild-wahl img:hover, .accent-key:hover, .blaetter-knopf:hover,
  .mitglieder-tabelle tbody tr.hauptzeile:hover .mitglieder-name img { transform: none !important; }
}