/* meryverse_core — Rahmen jeder Portal-Seite (UI-Kit Phase 2)
 *
 * Kopf, Fuß und Seitenrahmen an EINER Stelle statt als Kopie je Template.
 * Wird im Portal als /static/core/frame.css direkt nach tokens.css und
 * fokus.js geladen — über /static/, weil `static` in der allowed-Menge von
 * require_login steht (abgemeldete Seiten brauchen den Rahmen auch) und keine
 * eigene Route nötig ist. Danach kommen die App-Styles; sie behalten das
 * letzte Wort. Alle Selektoren sind an Klassen gebunden, nie an nackte
 * Elemente wie `footer` — native HTML-Bausteine (Info Material) und Dialoge
 * enthalten eigene <footer>, die nicht getroffen werden dürfen.
 *
 * Plan: plans/2026-10-03-ui-bedienelemente-vereinheitlichen.md (Workspace).
 */

:root {
  --kopf: 64px;                               /* Höhe der Kopfzeile */
  --seitenrand: clamp(16px, 5vw, 48px);       /* waagerechter Seitenrand */
}

/* ── Kopfzeile (Makro kopf in templates/_header.html) ──────────────────────
 * F5: Logo + meryverse | App-Icon + App-Name links, rechts Aktionen,
 * „← Übersicht", runder Hilfe-Knopf, User-Chip (Link /profil), Abmelden.
 * 64 px, sticky; bis 760 px Icon-Form (Texte weg, Umbruch erlaubt, die
 * Mitte bekommt eine eigene Zeile), unter 420 px ohne Schriftzug.
 * Übergänge nur auf konkrete Eigenschaften — `transition: all` würde den
 * Fokusring aus der Textfarbe einblenden. */
.portal-kopf {
  /* z 30: über dem Seiteninhalt, aber UNTER allen App-Overlays (Dialog-
     Hintergründe ab 40, Admin-Seitenleiste 90, Core-Modal 3000). */
  position: sticky; top: 0; z-index: 30;
  box-sizing: border-box;
  /* Container: Die Kopf-Regeln unten richten sich nach der Breite des KOPFS,
     nicht des Fensters (Admin: Seitenleiste nimmt 260 px weg; Seiten mit
     Mitte-Slot brauchen mehr Platz). Umbruch statt Überlappen, falls doch
     etwas nicht passt (nachgemessen 2026-10-04: 11 Seiten × 14 Breiten). */
  container-type: inline-size;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  min-height: var(--kopf);
  padding: 8px var(--seitenrand);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.portal-kopf--statisch { position: relative; }
.kopf-links { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }  /* die Mitte gibt zuerst nach */
.kopf-marke {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text); text-decoration: none;
}
.kopf-marke img { display: block; width: 28px; height: 28px; border-radius: 7px; }
.kopf-strich { flex: none; width: 1px; height: 22px; background: var(--border2); }
.kopf-app {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent2);
}
.kopf-app-icon { flex: none; width: 24px; height: 24px; border-radius: 6px; }
.kopf-symbol { border-radius: 0; }
.kopf-app-name, .kopf-unter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kopf-unter { color: var(--text3); text-transform: none; letter-spacing: 0.02em; }
.kopf-unter::before { content: "·"; margin-right: 8px; color: var(--border2); }
.kopf-mitte { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.kopf-knopf {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text3); text-decoration: none; background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px;
  transition: color 0.15s, border-color 0.15s;
}
.kopf-knopf:hover { color: var(--text2); border-color: var(--border2); }
.kopf-hilfe {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--accent2); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--border2);
  transition: color 0.15s, background-color 0.15s;
}
.kopf-hilfe:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.kopf-user {
  position: relative; display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; color: var(--text3); text-decoration: none;
  transition: color 0.15s;
}
.kopf-user:hover { color: var(--text2); }
.kopf-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--bg);
}
.kopf-kurz { display: none; }
/* Kompakt-Form (Texte weg, Symbole): sobald der Kopf selbst schmal ist. */
@container (max-width: 820px) {
  .kopf-lang, .kopf-user-name, .kopf-unter { display: none; }
  .kopf-kurz { display: block; }
  .kopf-knopf { padding: 6px 9px; }
}
/* Mit Mitte-Slot (Lernkarten, Spiele) braucht die Mitte den Platz: rechts
   schon früher kompakt. Ist es dann noch zu eng, bekommt die Mitte eine
   eigene Zeile (hier generisch ab 700 px; breitere Mitten setzen in der
   App-CSS einen eigenen @container-Wert, z. B. lernkarten.css). */
@container (max-width: 1220px) {
  .kopf-mitte ~ .kopf-rechts .kopf-lang,
  .kopf-mitte ~ .kopf-rechts .kopf-user-name { display: none; }
  .kopf-mitte ~ .kopf-rechts .kopf-kurz { display: block; }
}
@container (max-width: 700px) {
  .kopf-mitte { order: 3; flex-basis: 100%; }
}
@media (max-width: 760px) {
  .kopf-links { flex: 1 1 0; }
  .kopf-rechts { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
}
@media (max-width: 420px) {
  .kopf-wortmarke { display: none; }
}
@media print {
  .portal-kopf { display: none; }
}

/* ── Fußzeile (Partial templates/_footer.html) ─────────────────────────────
 * Standard laut CLAUDE.md §5: Trennlinie oben, links Logo + Autor, rechts
 * Copyright + Version, bis 600 px gestapelt und zentriert. Klebt unten, wenn
 * die Seite body {display:flex; flex-direction:column} + main {flex:1} hat. */
.portal-footer {
  flex: none;
  border-top: 1px solid var(--border);
  padding: 20px var(--seitenrand);
}
.portal-footer .footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.portal-footer .footer-brand { display: flex; align-items: center; gap: 8px; opacity: 0.6; }
.portal-footer .footer-logo { border-radius: 4px; display: block; }
.portal-footer .footer-text {
  font-family: var(--mono); font-size: 11px; color: var(--text3); text-decoration: none;
}
.portal-footer a.footer-text { transition: color 0.15s; }
.portal-footer a.footer-text:hover { color: var(--text2); }
@media (max-width: 600px) {
  .portal-footer .footer-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* Variante mit Feedback-Knopf in der Mitte (Chor, footer_feedback im Partial):
 * 1fr | auto | 1fr zentriert den Knopf exakt; der Datenschutz-Link steht dann
 * neben „by Martin Hampel". */
.portal-footer--feedback .footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.portal-footer--feedback .footer-brand { justify-self: start; }
.portal-footer--feedback .footer-feedback { justify-self: center; }
.portal-footer--feedback .footer-copy { justify-self: end; }
@media (max-width: 600px) {
  .portal-footer--feedback .footer-inner { grid-template-columns: 1fr; justify-items: center; }
  .portal-footer--feedback .footer-brand,
  .portal-footer--feedback .footer-feedback,
  .portal-footer--feedback .footer-copy { justify-self: center; }
}

/* ── Seiten mit Karte in der Mitte (Anmeldung, Passwort-Reset, Telegram …) ──
 * Der body ist dort eine zentrierte Flex-Spalte. rahmen-fuss: Fußzeile über
 * die volle Breite an den unteren Rand. rahmen-karte-mittig: die eine Karte
 * steht senkrecht mittig zwischen oberem Rand und Fußzeile. */
body.rahmen-fuss > .portal-footer { align-self: stretch; margin-top: auto; }
body.rahmen-karte-mittig > .card { margin-block: auto; }

/* ── Inhalts-Container ────────────────────────────────────────────────────
 * Zentrierte Spalte mit Seitenrand. Standard 1200 px (Chor, Admin-Listen),
 * --mittel 960 px (Profil), --schmal 760 px (Timetracker, Formulare). */
.mxh-seite {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding-inline: var(--seitenrand);
}
.mxh-seite--mittel { max-width: 960px; }
.mxh-seite--schmal { max-width: 760px; }

/* ── Tabellen-Standard ────────────────────────────────────────────────────
 * Grundform aus den Admin-Listen (Feedback, Kontakt, Telegram-Log): volle
 * Breite, Trennlinien, Spaltenköpfe in Mono-Versalien. Zeilen-Hover und
 * Klick-Optik bleiben Sache der Seite (nicht jede Zeile ist klickbar). */
.mxh-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mxh-tabelle th, .mxh-tabelle td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
.mxh-tabelle th {
  font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Sticky-Falle (Vorfälle V3.144.5 Spiele, V3.145.1 Lernkarten/TT) ────
 * position: sticky klebt nur, solange das Dokument selbst scrollt. Zwei
 * Muster machen den <body> zum Scroll-Container und lassen Kopfzeilen nach
 * einer Bildschirmhöhe wegrutschen:
 *   1. body { height: 100% }  (der Inhalt läuft über den body hinaus)
 *   2. overflow(-x) ≠ visible auf html UND body gleichzeitig
 * Deshalb: Höhe und overflow-x nur auf html, nie zusätzlich auf body.
 * Bewusst KEINE globale Regel hier — html { overflow-x: hidden } würde auf
 * Seiten, die body { overflow-x: hidden } setzen, genau Muster 2 erzeugen.
 * Wächter: tests/test_frame.py im Portal (dokumentierte Ausnahmen dort). */