/* ============================================================
   Lernspiegel – Schüler-Bereich (Online-Übungen)
   Geerbt von style.css-Variablen, eigenes minimalistisches Layout
   ============================================================ */

/* ── Basis ── */
body.ueben-body {
  background: var(--bg-app);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.ueben-header {
  background: var(--primary);
  color: #fff;
  padding: 0 1.5rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}
.ueben-header .logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ueben-header .logo img {
  height: 32px;
  width: auto;
}
.ueben-header-title {
  flex: 1 1 0;
  min-width: 0;
  font-size: .95rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 .75rem;
  pointer-events: none;
}
.ueben-header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.ueben-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.ueben-header-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}
.ueben-header-name {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ueben-header-chips {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ueben-chip {
  font-size: .7rem;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  border-radius: 999px;
  padding: .1rem .55rem;
  white-space: nowrap;
}
a.ueben-chip-link {
  text-decoration: none;
  transition: background .15s;
}
a.ueben-chip-link:hover {
  background: rgba(255,255,255,.3);
  color: #fff;
  text-decoration: none;
}
.ueben-badges-link {
  /* Runde Icon-Buttons – gleiche Form und Grösse wie der Avatar. */
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
  text-decoration: none;
  transition: background .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.ueben-link-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--accent, #3b82f6); color: #fff;
  font-size: .62rem; line-height: 16px; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 2px var(--primary, #1E3A5F);
}
/* Alle Zähler blau: offene Aufträge sind ein To-do, und auch die Fehler-Kiste
   soll nicht rot «Fehler!» signalisieren, sondern «zum Nachüben». */
.ueben-link-count--todo { background: var(--accent, #3b82f6); }
.ueben-badges-link:hover {
  background: rgba(255,255,255,.4);
  color: #fff;
  text-decoration: none;
}
.ueben-link-icon { font-size: 1.1rem; line-height: 1; }
.ueben-link-label { display: none; }
/* Aktiver Nav-Eintrag (Tab-Stil): heller Pill statt versteckt. */
.ueben-badges-link.is-active { background: #fff; color: var(--primary); }
.ueben-badges-link.is-active:hover { background: #fff; color: var(--primary); }
/* Sobald die Header-Links sichtbar sind (>1200px; darunter Bottom-Nav), die
   Icon-Buttons zu Pillen mit Label ausbauen. Der (dann redundante) Seitentitel
   wird auf Nav-Seiten ausgeblendet, siehe layout_start.php. */
@media (min-width: 1201px) {
  .ueben-badges-link { width: auto; border-radius: 999px; padding: 0 .75rem; gap: .4rem; }
  .ueben-link-label  { display: inline; font-size: .85rem; font-weight: 600; white-space: nowrap; }
}
.ueben-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  padding: .4rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
  text-decoration: none;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.ueben-logout-btn:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
  text-decoration: none;
}

/* ── Hauptinhalt ── */
.ueben-main {
  flex: 1;
  padding: 2rem 1rem;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.ueben-body-wide .ueben-main { max-width: 1200px; }
@media (max-width: 1280px) {
  .ueben-body-wide .ueben-main { max-width: 880px; }
}

/* ── Flash-Meldungen ── */
.ueben-flash {
  padding: .85rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: .95rem;
  font-weight: 500;
}
.ueben-flash.error   { background: var(--danger-light);  color: #991B1B; }
.ueben-flash.success { background: var(--success-light); color: #166534; }
.ueben-flash.info    { background: var(--accent-light);  color: #1E40AF; }

/* ── Login ── */
.ueben-login-wrap {
  max-width: 400px;
  margin: 3rem auto 0;
}
.ueben-login-wrap h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: .4rem;
  color: var(--primary);
  text-align: center;
}
.ueben-login-wrap .subtitle {
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-size: .95rem;
  text-align: center;
}
.ueben-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2rem;
}

/* ── Formular ── */
.ueben-form .form-group {
  margin-bottom: 1.25rem;
}
.ueben-form label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: .4rem;
}
.ueben-form input[type="text"],
.ueben-form input[type="password"] {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--font);
  transition: border-color var(--transition);
  background: #f3f4f6;
}
.ueben-form input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.ueben-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  min-height: 44px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: background var(--transition), transform var(--transition);
  text-decoration: none;
}
.ueben-btn:hover { text-decoration: none; transform: translateY(-1px); }
.ueben-btn:active { transform: translateY(0); }
.ueben-btn-primary {
  background: var(--accent);
  color: #fff;
}
.ueben-btn-primary:hover { background: #2563EB; }
.ueben-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
}
.ueben-btn-ghost:hover { background: var(--neutral-light); }
.ueben-btn-sm {
  padding: .45rem 1rem;
  font-size: .875rem;
  min-height: 36px;
}

/* Im Login-Formular: volle Breite */
.ueben-card .ueben-btn-primary,
.ueben-form .ueben-btn-primary {
  width: 100%;
}

/* ── Dashboard ── */
.ueben-page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.5rem;
  overflow-wrap: anywhere;
}
.ueben-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 1rem;
}

/* ── Übungskarte ── */
/* Fächer-Filter für offene Übungen (nur bei genug Aufträgen/Fächern eingeblendet) */
.ueben-subject-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .5rem 0 1rem;
}
.ueben-subj-chip {
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.ueben-subj-chip[data-subject-filter]:not([data-subject-filter=""])::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--chip-color, var(--primary));
  flex-shrink: 0;
}
.ueben-subj-chip:hover { border-color: var(--primary); }
.ueben-subj-chip.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.ueben-subj-chip.is-active::before { background: #fff; }
/* Anzahl offener Übungen im Chip: sitzt als kleine Pille im Chip, damit auf einen
   Blick klar ist, wie viel hinter jedem Fach steckt. */
.ueben-subj-count {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  min-width: 1.25rem;
  text-align: center;
}
.ueben-subj-chip.is-active .ueben-subj-count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

.exercise-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  margin-bottom: .75rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow var(--transition), border-color var(--transition);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
}
.exercise-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--accent);
  border-left-color: var(--primary);
}
.exercise-card .ex-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.3rem;
  margin-top: .1rem;
}
.exercise-card .ex-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.exercise-card .ex-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: .2rem;
}
.exercise-card .ex-desc {
  font-size: .875rem;
  color: var(--text-secondary, #4B5563);
  margin-bottom: .3rem;
  line-height: 1.45;
}
.exercise-card .ex-subject {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: .2rem;
}
.exercise-card .ex-subject-sep {
  color: var(--text-muted);
  font-weight: 400;
}
.exercise-card .ex-meta {
  font-size: .8rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .6rem;
  align-items: center;
}
/* Trenner zwischen den Meta-Angaben (Ergebnis · Aufgaben · Datum …); mittiger
   Mittelpunkt wie in der Fach-Zeile darüber, beruhigt die Icon-Reihe. */
.exercise-card .ex-meta > span:not(:first-child)::before {
  content: "·";
  margin-right: .6rem;
  color: var(--text-muted);
  font-weight: 400;
}
/* Schwierigkeit als Chip in der Meta-Zeile. Farben wie in der Bibliothek
   (pages/ueben/library.php), damit die Kinder dieselbe Einstufung wiedererkennen. */
.ueben-diff { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .72rem; font-weight: 600; line-height: 1.5; }
.ueben-diff-1 { background: var(--success-light); color: #166534; }
.ueben-diff-2 { background: var(--warning-light); color: #92400E; }
.ueben-diff-3 { background: var(--danger-light);  color: #991B1B; }

.exercise-card .ex-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.exercise-card .ex-badge {
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 20px;
  white-space: nowrap;
}
/* Inline-Source-Badges (🎯 Empfehlung, 📖 Bibliothek) neben dem Titel. */
.exercise-card .ex-source-badge {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .55rem;
  font-size: .72rem;
  font-weight: 600;
  /* line-height: 1.97 ergibt zusammen mit font-size: .72rem eine Linebox
     von ~1.42rem — gleich gross wie die Parent-Linebox (.ex-title:
     1.05rem × 1.35 = 1.4175rem). Damit landet der Badge-Inhalt exakt
     auf der Text-Linie der Parent-Zeile, ohne dass vertical-align
     sub-pixel-rundet. */
  line-height: 1.97;
  border-radius: 999px;
  vertical-align: baseline;
  white-space: nowrap;
}
.exercise-card .ex-source-badge-assignment {
  background: #DBEAFE;
  color: #1E40AF;
}
.exercise-card .ex-source-badge-recommendation {
  background: #FEF3C7;
  color: #92400E;
}
.exercise-card .ex-source-badge-self_library {
  background: #EDE9FE;
  color: #5B21B6;
}
.exercise-card .ex-source-badge-onboarding {
  background: #CFFAFE;
  color: #155E75;
}
.badge-open     { background: var(--accent-light);   color: var(--accent); }
.badge-done     { background: var(--success-light);  color: #15803D; }
.badge-official { background: var(--warning-light);  color: #92400E; }
.badge-community{ background: var(--neutral-light);  color: var(--text-muted); }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.empty-state p { font-size: .95rem; }

/* ── Kachel-Navigation ── */
.ueben-tile-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}
.ueben-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.ueben-tile:hover { transform: translateY(-1px); text-decoration: none; }
.ueben-tile.unanswered {
  background: var(--neutral-light);
  color: var(--text-muted);
  border-color: var(--border);
}
.ueben-tile.unanswered:hover { border-color: var(--accent); color: var(--accent); }
.ueben-tile.answered {
  background: var(--success-light);
  color: #15803D;
  border-color: var(--success);
}
.ueben-tile.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Finish-Bar ── */
.ueben-finish-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--success-light);
  border: 1.5px solid var(--success);
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  font-weight: 600;
  font-size: .95rem;
  color: #166534;
}
.ueben-finish-bar .ueben-btn-primary {
  width: auto;
  background: #16a34a;
}
.ueben-finish-bar .ueben-btn-primary:hover { background: #15803D; }

/* ── Fortschrittsbalken ── */
.ueben-progress-bar {
  height: 6px;
  background: var(--neutral-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ueben-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s ease;
}

/* ── Übungsbereich ── */
.ueben-exercise-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ueben-question-counter {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
}
.ueben-question-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}
.ueben-question-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.ueben-question-media {
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.ueben-question-media img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  background: #fff;
}
.ueben-question-media audio {
  width: 100%;
}

/* Multiple Choice / T/F Optionen */
.ueben-options { display: flex; flex-direction: column; gap: .6rem; }
.ueben-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  min-height: 44px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  user-select: none;
}
.ueben-option:hover           { border-color: var(--accent); background: var(--accent-light); }
.ueben-option.selected        { border-color: var(--accent); background: var(--accent-light); }
.ueben-option.correct         { border-color: var(--success); background: var(--success-light); }
.ueben-option.incorrect       { border-color: var(--danger);  background: var(--danger-light); }
.ueben-option.missed          { border-color: var(--success); background: var(--success-light); opacity: .7; }
.ueben-option input[type="radio"],
.ueben-option input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); }
.ueben-option-text { font-size: .95rem; }

/* Lückentext */
.gap-text-container { font-size: 1rem; line-height: 2.2; }
.gap-input {
  display: inline-block;
  min-width: clamp(60px, 20vw, 100px);
  border: none;
  border-bottom: 2px solid var(--accent);
  background: transparent;
  font-family: var(--font);
  font-size: 1rem;
  padding: .1rem .3rem;
  text-align: center;
  color: var(--text-primary);
  outline: none;
}
.gap-input:focus { border-bottom-color: var(--primary); }
.gap-input.correct   { border-bottom-color: var(--success); color: var(--success); }
.gap-input.incorrect { border-bottom-color: var(--danger);  color: var(--danger); }

/* Dropdown-Lückentext */
.gap-select {
  display: inline-block;
  min-width: clamp(80px, 25vw, 120px);
  font-family: var(--font);
  font-size: .95rem;
  padding: .15rem .4rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: #fff;
  color: var(--text-primary);
  vertical-align: middle;
}

/* Reihenfolge / Ordering */
.ordering-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .75rem;
  touch-action: none;
}
.ordering-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: box-shadow .15s;
}
.ordering-item:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ordering-item.dragging { opacity: .5; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.ordering-handle {
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: grab;
  flex-shrink: 0;
}
.ordering-text { flex: 1; }
.ordering-arrows {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex-shrink: 0;
}
.ordering-arrows button {
  border: none;
  background: var(--bg-subtle, #f3f4f6);
  color: var(--text-muted);
  border-radius: 3px;
  padding: 0 .4rem;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1.4;
}
.ordering-arrows button:hover { background: var(--border); color: var(--text-primary); }

/* Matching / Zuordnung */
.matching-wrap { display: flex; flex-direction: column; gap: .5rem; }
.matching-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}
.matching-item {
  padding: .6rem 1rem;
  border-radius: var(--radius);
  background: var(--neutral-light);
  font-size: .9rem;
  text-align: center;
}
.matching-select {
  width: 100%;
  padding: .6rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: .9rem;
  background: #fff;
}
.matching-arrow { color: var(--text-muted); text-align: center; }

/* Navigations-Buttons */
.ueben-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.ueben-nav .ueben-btn { min-width: 100px; }
#btn-finish-early { display: none; }

/* ── Auswertung ── */
.ueben-result-header {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
}
.ueben-result-score {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.ueben-result-score .score-10 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-top: .25rem;
}
.ueben-result-label {
  display: inline-block;
  margin-top: .75rem;
  padding: .35rem 1rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .9rem;
}
.answer-review { display: flex; flex-direction: column; gap: 1rem; }
.answer-item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--neutral);
}
.answer-item.is-correct   { border-left-color: var(--success); }
.answer-item.is-incorrect { border-left-color: var(--danger); }
.answer-item .ai-question {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .5rem;
  color: var(--text-secondary);
}
.answer-item .ai-answer {
  font-size: .9rem;
  margin-bottom: .35rem;
}
.answer-item .ai-explanation {
  font-size: .85rem;
  color: var(--text-muted);
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
/* Aufgabe nach dem Versuch bearbeitet (pages/ueben/result.php): Hinweis über
   der Antwort, die dann aus dem Schnappschuss kommt. */
.answer-item .ai-changed {
  font-size: .82rem;
  color: var(--text-secondary);
  background: var(--bg-app);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: .35rem .6rem;
  margin: 0 0 .5rem;
}
.result-icon { font-size: 1.2rem; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .ueben-main { max-width: none; padding: 1.5rem 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .matching-row { grid-template-columns: 1fr; }
  .matching-arrow { display: none; }
  .ueben-nav { flex-wrap: wrap; }
}

@media (max-width: 540px) {
  .ueben-main { padding: 1.25rem .75rem; }
  .ueben-card { padding: 1.5rem 1.25rem; }
  .ueben-question-card { padding: 1.25rem; }
  .matching-row { grid-template-columns: 1fr; }
  .matching-arrow { display: none; }
  .ueben-result-score { font-size: 3rem; }
  .ueben-tile { width: 40px; height: 40px; }
  .answer-item { padding: 1rem 1.1rem; }
}

@media (max-width: 480px) {
  .ueben-header { padding: 0 .75rem; }
  .ueben-header-title { display: none; }
  .ueben-header-meta { display: none; }
  .ueben-header .logo { font-size: 1rem; }
  .ueben-header-right { gap: .4rem; }
  .ueben-badges-link { padding: .25rem .4rem; }
}

@media (max-width: 375px) {
  .exercise-card { flex-direction: column; gap: .6rem; }
  .exercise-card .ex-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .ueben-header-right { gap: .3rem; }
  .ueben-badges-link { padding: .2rem .3rem; }
  .ueben-avatar { width: 30px; height: 30px; font-size: .9rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Statistik-Seite (/ueben/statistik)

   Kindgerecht heisst hier: grosse Zahlen, ein Emoji als Anker, ein Wort statt
   einer Prozentzahl. Die Wörter und Emojis sind dieselben wie auf der
   Ergebnisseite (resultScoreLabel / motivText), damit ein Kind sie wiedererkennt.
   ═══════════════════════════════════════════════════════════════════════════ */

.ueben-stats-page { width: 100%; box-sizing: border-box; }

.ueben-stat-hallo {
  font-size: 1.5rem; font-weight: 800; color: var(--text-primary);
  margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ueben-stat-intro { color: var(--text-secondary); font-size: .95rem; line-height: 1.5; margin: 0 0 1.25rem; }

.ueben-stats-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 1.25rem 1.35rem; margin-bottom: 1rem;
}
.ueben-stats-card h2 {
  font-size: 1.05rem; margin: 0 0 1rem; color: #0f172a;
  display: flex; align-items: center; gap: .5rem;
}
.ueben-stats-card h2 .kopf-icon { font-size: 1.3rem; line-height: 1; }

/* ── Die drei grossen Zahlen ──────────────────────────────────────────────── */
.ueben-stat-kacheln { display: flex; gap: .75rem; flex-wrap: wrap; }
.ueben-stat-kachel {
  flex: 1 1 130px; border-radius: 14px; padding: .9rem .75rem; text-align: center;
  border: 2px solid transparent;
}
.ueben-stat-kachel .kachel-icon { font-size: 1.6rem; line-height: 1; display: block; margin-bottom: .5rem; }
.ueben-stat-kachel .kachel-zahl { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.ueben-stat-kachel .kachel-text { font-size: .82rem; font-weight: 600; margin-top: .1rem; }
.ueben-stat-kachel--serie  { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ueben-stat-kachel--woche  { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.ueben-stat-kachel--total  { background: #dcfce7; border-color: #86efac; color: #166534; }

/* ── Fächer: ein Emoji und ein Wort statt einer nackten Prozentzahl ───────── */
.ueben-stat-fach { display: flex; align-items: center; gap: .85rem; }
.ueben-stat-fach + .ueben-stat-fach { margin-top: .9rem; }
.ueben-stat-fach-emoji {
  font-size: 1.75rem; line-height: 1; width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc; border-radius: 50%;
}
.ueben-stat-fach-body { flex: 1; min-width: 0; }
.ueben-stat-fach-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap;
}
.ueben-stat-fach-name { font-weight: 700; color: #1e293b; font-size: .98rem; }
.ueben-stat-fach-wort { font-weight: 700; font-size: .85rem; }
.ueben-stat-fach-zahl { color: #64748b; font-size: .8rem; font-weight: 500; }
.ueben-stat-balken { background: #f1f5f9; border-radius: 999px; height: 12px; overflow: hidden; }
.ueben-stat-balken > span { display: block; height: 100%; border-radius: 999px; }

/* ── Stärken und Wachstum: beide freundlich, keine Alarmfarbe ─────────────── */
.ueben-stat-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.ueben-stat-box { border-radius: 14px; padding: 1rem 1.1rem; border: 2px solid; }
.ueben-stat-box--stark  { background: #f0fdf4; border-color: #bbf7d0; }
.ueben-stat-box--wachst { background: #eef2ff; border-color: #c7d2fe; }
.ueben-stat-box-titel { font-weight: 800; margin-bottom: .75rem; font-size: .98rem; display: flex; align-items: center; gap: .45rem; }
.ueben-stat-box--stark  .ueben-stat-box-titel { color: #166534; }
.ueben-stat-box--wachst .ueben-stat-box-titel { color: #3730a3; }
.ueben-stat-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ueben-stat-liste a { text-decoration: none; color: inherit; display: block; }
.ueben-stat-eintrag {
  background: rgba(255,255,255,.75); border-radius: 10px; padding: .55rem .7rem;
  display: flex; align-items: center; gap: .6rem; transition: transform .12s;
}
.ueben-stat-liste a:hover .ueben-stat-eintrag { transform: translateX(2px); }
.ueben-stat-eintrag-emoji { font-size: 1.35rem; line-height: 1; flex-shrink: 0; }
.ueben-stat-eintrag-body { min-width: 0; flex: 1; }
.ueben-stat-eintrag-titel { font-weight: 700; color: #1e293b; font-size: .9rem; overflow-wrap: anywhere; }
.ueben-stat-eintrag-meta { color: #64748b; font-size: .78rem; margin-top: .1rem; }
.ueben-stat-leer { margin: 0; color: #475569; font-size: .88rem; line-height: 1.5; }

/* ── Woher die Übungen kamen: Kacheln statt gestapeltem Balken ────────────── */
.ueben-stat-quellen { display: flex; gap: .75rem; flex-wrap: wrap; }
.ueben-stat-quelle {
  flex: 1 1 120px; text-align: center; border-radius: 14px; padding: .85rem .6rem;
  background: #f8fafc; border: 2px solid #e2e8f0;
}
.ueben-stat-quelle-icon { font-size: 1.5rem; line-height: 1; display: block; }
.ueben-stat-quelle-zahl { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.2; margin-top: .15rem; }
.ueben-stat-quelle-text { font-size: .8rem; color: #475569; font-weight: 600; }

@media (max-width: 540px) {
  .ueben-stats-page { padding: 0 .5rem; }
  .ueben-stats-card { padding: 1rem; border-radius: 14px; }
  .ueben-stat-hallo { font-size: 1.3rem; }
  .ueben-stat-kachel .kachel-zahl { font-size: 1.7rem; }
  .ueben-stat-fach-emoji { font-size: 1.5rem; width: 2.2rem; height: 2.2rem; }
}

/* ══ Schüler-Dashboard (/ueben/dashboard) ══════════════════════════════════════
   Kacheln, «Jetzt üben» (grosse Karten) und «Bisher geübt» (Reiter mit
   kompakten Zeilen). Markup: pages/ueben/dashboard.php (dbKarte(), dbZeile()). */
/* ── Kacheln unter der Levelanzeige: Fehler-Kiste und Bibliothek ── */
.k-kacheln { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .5rem; }
.k-kachel {
  /* Allein ganze Breite, zu zweit je die Hälfte. Passen zwei Kacheln mit
     14rem nicht nebeneinander (Handy), stehen sie untereinander. */
  flex: 1 1 14rem; min-width: 0;
  display: flex; align-items: center; gap: .65rem; padding: .65rem .85rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  color: inherit; text-decoration: none; transition: border-color var(--transition);
}
.k-kachel:hover, .k-kachel:focus-visible { border-color: var(--accent); }
.k-kachel-ico {
  flex: none; width: 34px; height: 34px; border-radius: 10px; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center; background: var(--primary-xlight);
}
.k-kachel-titel { display: block; font-weight: 600; font-size: .9rem; color: var(--text-primary); line-height: 1.2; white-space: nowrap; }
.k-kachel-sub { display: block; font-size: .76rem; color: var(--text-muted); }
.k-zahl {
  display: inline-block; margin-left: .3rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--accent-light); color: #1D4ED8; font-size: .72rem; font-weight: 700; line-height: 1.35rem; vertical-align: middle;
}

/* ── Überschriften ── */
.k-h { display: flex; align-items: center; gap: .45rem; margin: 2rem 0 .75rem; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }

/* ── Karten «Jetzt üben» ── */
.k-karte {
  position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; grid-template-areas: "i k a";
  align-items: center; gap: .4rem 1rem; padding: 1rem 1.15rem; margin-bottom: .7rem;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 5px solid var(--accent);
  border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.k-karte.rec, .k-karte.einstieg { background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%); border-color: #C7D2FE; border-left-color: #6366F1; }
.k-karte.weiter { border-left-color: #F97316; }
.k-karte.pausiert { border-left-color: var(--neutral); opacity: .8; }
.k-karte.mit-verwerfen { padding-right: 2.9rem; }
.k-ico {
  grid-area: i; width: 2.6rem; height: 2.6rem; border-radius: 12px; font-size: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent-light); /* wie früher .ex-icon */
}
.k-karte.weiter .k-ico { background: #FFEDD5; color: #9A3412; }
.k-karte.rec .k-ico, .k-karte.einstieg .k-ico { background: #E0E7FF; }
.k-kopf { grid-area: k; min-width: 0; }
.k-label { display: inline-block; margin-bottom: .25rem; padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.k-label.rec { background: #E0E7FF; color: #4338CA; }
.k-label.neu { background: var(--accent-light); color: #1D4ED8; }
.k-titel .k-neu { margin: 0 0 0 .3rem; vertical-align: .12em; white-space: nowrap; }
.k-kopf .k-label, .k-kopf .ex-rec-tip { vertical-align: middle; }
.k-kopf .ex-rec-tip { margin-bottom: .25rem; }
.k-titel { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; overflow-wrap: anywhere; }
.k-beschreibung {
  margin-top: .15rem; font-size: .85rem; line-height: 1.4; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.k-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .35rem; font-size: .8rem; color: var(--text-muted); }
/* Chips brechen bei Bedarf um: Ein langer Fachname («Natur, Mensch,
   Gesellschaft (NMG)») mit grosser Systemschrift machte die Seite auf dem
   Handy sonst breiter als den Bildschirm. */
.k-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: .8rem; background: var(--bg-app); max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.k-chip i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.k-chip.frist-bald { background: #FFEDD5; color: #9A3412; font-weight: 600; }
.k-chip.zeit { background: #EDE9FE; color: #6D28D9; font-weight: 600; }
.k-chip.zeit-laeuft { background: var(--danger-light); color: #B91C1C; font-weight: 700; }
.k-meta .ueben-diff { font-size: .8rem; padding: .12rem .5rem; border-radius: 999px; line-height: 1.35; }
.k-fortschritt { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; font-size: .78rem; color: var(--text-secondary); }
.k-balken { flex: 0 1 180px; height: 8px; border-radius: 999px; background: #FDE6CF; overflow: hidden; }
.k-balken span { display: block; height: 100%; border-radius: 999px; background: #F97316; }
.k-hinweis { margin-top: .4rem; font-size: .76rem; color: var(--text-secondary); line-height: 1.4; }
.k-aktion { grid-area: a; }
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.15rem;
  border-radius: 12px; border: 0; background: #2563EB; color: #fff;
  font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; transition: background var(--transition);
}
.k-btn:hover, .k-btn:focus-visible { background: #1D4ED8; color: #fff; }
.k-btn.weiter { background: #EA580C; }
.k-btn.weiter:hover, .k-btn.weiter:focus-visible { background: #C2410C; }
.resume-discard {
  position: absolute; top: .55rem; right: .55rem; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: var(--bg-app); color: #9A3412;
  font-size: .95rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s, transform .12s;
}
.resume-discard:hover { background: var(--danger-light); color: #991B1B; transform: scale(1.08); }
.resume-discard:focus-visible { outline: 2px solid #F97316; outline-offset: 1px; }
#discard-modal .ueben-modal { max-width: 480px; padding: 2rem 2rem 1.5rem; }
#discard-modal .ueben-modal-body { font-size: .92rem; }

/* ── Bisher geübt ── */
.mk-verlauf { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.mk-tabs { display: flex; gap: .35rem; padding: .45rem .9rem 0; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
/* Reiter: der aktive ist klar abgehoben (Fläche, Unterstrich, fett, farbiges
   Emoji), die inaktiven sind zurückgenommen (grau, Emoji blass). */
.mk-tab {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .8rem .6rem; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 10px 10px 0 0; background: transparent;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: background .15s, color .15s;
}
.mk-tab .ico { filter: grayscale(1); opacity: .55; transition: filter .15s, opacity .15s; }
.mk-tab:hover { color: var(--text-secondary); background: var(--bg-app-soft); }
.mk-tab:hover .ico { filter: none; opacity: .85; }
.mk-tab .n { font-size: .72rem; min-width: 1.35rem; padding: 0 .35rem; line-height: 1.35rem; border-radius: 999px; background: var(--bg-app); color: var(--text-muted); text-align: center; }
.mk-tab.aktiv, .mk-tab.aktiv:hover { color: var(--primary); font-weight: 700; background: var(--accent-light); border-bottom-color: var(--primary); }
.mk-tab.aktiv .ico { filter: none; opacity: 1; }
.mk-tab.aktiv .n { background: var(--primary); color: #fff; }
.mk-tab.abgelaufen .n { background: var(--danger-light); color: #B91C1C; }
.mk-tab.abgelaufen.aktiv .n { background: #B91C1C; color: #fff; }
.mk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mk-erklaerung { margin: 0; padding: .75rem 1.25rem; font-size: .82rem; line-height: 1.45; color: var(--text-muted); }
.mk-monat { padding: .9rem 1.25rem .35rem; font-size: .78rem; font-weight: 700; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--bg-app-soft); }
.mk-zeile {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto auto; align-items: center; gap: .75rem;
  padding: .7rem 1.25rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s;
}
.mk-zeile[hidden], .mk-monat[hidden], .mk-fuss[hidden], .mk-mehr[hidden], .mk-alle[hidden] { display: none; }
.mk-zeile:hover { background: var(--primary-xlight); }
.mk-zeile.ohne-auswertung { cursor: default; }
.mk-zeile.ohne-auswertung:hover { background: transparent; }
.mk-ico { position: relative; font-size: 1.15rem; text-align: center; }
.mk-titel { display: block; font-weight: 600; font-size: .95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.mk-titel:hover, a.mk-titel:focus-visible, .mk-zeile[data-href]:hover .mk-titel { color: #2563EB; }
.mk-fach { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--text-muted); }
.mk-fach i { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; flex: none; }
.mk-versuche { white-space: nowrap; }
.mk-wert { position: relative; white-space: nowrap; font-size: .85rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; font-variant-numeric: tabular-nums; }
.mk-wert.gut { background: var(--success-light); color: #15803D; }
.mk-wert.mittel { background: #FFEDD5; color: #C2410C; }
.mk-wert.top { background: var(--accent-light); color: #1D4ED8; }
a.mk-wert { display: inline-flex; align-items: center; padding-right: .45rem; text-decoration: none; transition: box-shadow .12s; }
a.mk-wert::after { content: '›'; margin-left: .35rem; font-size: 1.1rem; line-height: 0; }
.mk-zeile:hover a.mk-wert, a.mk-wert:focus-visible { box-shadow: 0 0 0 2px currentColor inset; outline: none; }
.mk-wert.zu { display: inline-flex; align-items: center; gap: .3rem; cursor: help; }
.mk-wert.zu .schloss { font-size: .72rem; opacity: .75; }
.mk-datum { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-akt { display: flex; align-items: center; }
.mk-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.3rem; padding: 0 .9rem; border-radius: 999px;
  background: var(--accent-light); color: #1D4ED8; font-size: .84rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .12s;
}
.mk-knopf:hover, .mk-knopf:focus-visible { background: #CFE2FF; color: #1D4ED8; }
.mk-knopf.leer { visibility: hidden; }
.mk-fuss { display: flex; justify-content: center; padding: .8rem; }
.mk-mehr { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: .88rem; color: #2563EB; cursor: pointer; }
.mk-mehr:hover { text-decoration: underline; }
.mk-alle { font-size: .82rem; color: var(--text-muted); }

/* Tooltips am Quellen-Symbol und an der gesperrten Pille (wie .ex-rec-tip) */
.mk-ico[data-tip], .mk-wert[data-tip] { cursor: help; outline: none; }
.mk-ico[data-tip]::after, .mk-wert[data-tip]::after {
  content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: max-content; max-width: min(240px, 60vw); padding: .5rem .7rem; border-radius: .45rem;
  background: #0F172A; color: #F8FAFC; font-size: .75rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22); pointer-events: none; opacity: 0; transition: opacity .12s;
}
.mk-ico[data-tip]::after { left: calc(100% + 10px); }
.mk-wert[data-tip]::after { right: calc(100% + 10px); }
.mk-ico[data-tip]:hover::after, .mk-ico[data-tip]:focus-visible::after,
.mk-wert[data-tip]:hover::after, .mk-wert[data-tip]:focus-visible::after { opacity: 1; }

/* ── Frühere Schuljahre ── */
.ueben-prev-years { margin-top: 2.5rem; }
.ueben-prev-years > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem;
  border: 1px solid var(--border); border-radius: 16px; background: var(--bg-card); font-weight: 700;
}
.ueben-prev-years > summary::-webkit-details-marker { display: none; }
.ueben-prev-count { color: var(--text-muted); font-weight: 400; font-size: .85rem; }
.ueben-prev-chevron { margin-left: auto; color: var(--text-muted); transition: transform .2s; }
.ueben-prev-years[open] > summary .ueben-prev-chevron { transform: rotate(180deg); }
.mk-frueher { margin-top: .75rem; }

/* ── Handy ── */
@media (max-width: 560px) {
  .k-karte { grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-areas: "i k" "i a"; padding: .8rem .85rem; gap: .35rem .75rem; }
  .k-karte.mit-verwerfen { padding-right: 2.6rem; }
  .k-ico { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; align-self: start; margin-top: .15rem; }
  .k-aktion { justify-self: start; margin-top: .2rem; }
  .k-btn { min-height: 42px; padding: 0 1rem; font-size: .9rem; }
  .k-titel { font-size: .98rem; }
  .k-meta { gap: .3rem .35rem; font-size: .76rem; margin-top: .3rem; }
  .k-nur-gross, .k-lang { display: none !important; }
  .k-fortschritt { white-space: nowrap; }
  .k-balken { flex: 1 1 auto; }
  .k-label { margin-bottom: .15rem; }
  .k-kachel { padding: .55rem .65rem; gap: .5rem; }
  .k-kachel-ico { width: 30px; height: 30px; font-size: 1rem; }
  .k-kachel-titel { white-space: normal; }
  .mk-tabs, .mk-monat, .mk-erklaerung { padding-left: .9rem; padding-right: .9rem; }
  /* Reiter teilen sich die Breite statt seitlich zu scrollen: Emoji und
     Zahl oben, das Wort darunter. So passen alle drei auch auf schmale
     Handys und mit grösserer Systemschrift. */
  .mk-tabs { gap: .2rem; padding-left: .4rem; padding-right: .4rem; overflow-x: visible; }
  .mk-tab { flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: center; gap: .15rem .3rem; padding: .45rem .25rem .5rem; font-size: .8rem; text-align: center; }
  .mk-tab .txt { order: 3; flex: 0 0 100%; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; line-height: 1.2; }
  .mk-zeile { grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "i t a" "i m a"; row-gap: .15rem; padding: .7rem .9rem; }
  .mk-ico { grid-area: i; }
  .mk-tb { grid-area: t; min-width: 0; }
  .mk-akt { grid-area: a; }
  .mk-unter { grid-area: m; display: flex; gap: .5rem; align-items: center; }
  .mk-knopf { width: 44px; height: 44px; padding: 0; font-size: 1rem; }
  .mk-knopf .txt { display: none; }
  .mk-ico[data-tip]::after { display: none; }
  .mk-wert[data-tip]::after { right: auto; left: 0; top: auto; bottom: calc(100% + 8px); transform: none; }
}
@media (min-width: 561px) {
  .mk-unter { display: contents; }
  /* Ergebnis und Datum mit fester Breite, damit «Nochmals» davor in jeder
     Zeile an derselben Stelle steht. */
  .mk-wert { min-width: 4.4rem; text-align: center; justify-content: center; justify-self: end; }
  .mk-datum { min-width: 4.1rem; text-align: right; } /* passt «gestern» */
}