/* ============================================================================
   site.css – Design für die Landingpage & Fächer-Seiten "Digitale Lernspiele"
   Nutzt die gleiche Farbpalette wie css/style.css im Planspiel, damit
   Landingpage und Spiel optisch zusammengehören.
   ============================================================================ */

:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --sidebar-bg: #0f172a;
  --sidebar-panel: #1b2740;
  --sidebar-text: #e2e8f0;
  --sidebar-muted: #94a3b8;
  --accent: #14b8a6;
  --accent-dark: #0f9488;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

/* ---- Header ---- */
.site-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-icon { font-size: 28px; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 17px; }
.brand-text small { color: var(--sidebar-muted); font-size: 12.5px; }

.back-link {
  color: var(--sidebar-muted);
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  transition: background 0.15s, color 0.15s;
}
.back-link:hover { background: rgba(148, 163, 184, 0.15); color: var(--sidebar-text); }
.logout-link { margin-left: auto; }
.user-badge { margin-left: auto; color: var(--sidebar-muted); font-size: 13px; white-space: nowrap; }
.user-badge strong { color: var(--sidebar-text); }
/* Der Name ist jetzt ein Link auf die Passwort-Seite (siehe
   auth/kopf-nutzer.php). Er soll trotzdem wie Text im Kopf wirken und nicht
   wie ein Knopf - erst beim Zeigen wird die Unterstreichung sichtbar. */
.user-badge { text-decoration: none; cursor: pointer; }
.user-badge:hover strong { text-decoration: underline; }
.user-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }


/* ---- Main ---- */
.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.intro { max-width: 640px; margin-bottom: 32px; }
.intro h1 { font-size: 28px; margin: 0 0 8px; }
.intro p { color: var(--muted); line-height: 1.5; margin: 0; }

/* ---- Fächer-Grid ---- */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.subject-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 12px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: transform 0.15s, box-shadow 0.15s;
}

a.subject-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  border-color: var(--accent);
}

.subject-card.disabled { opacity: 0.5; cursor: default; }

/* Fach mit Lernspielen, von denen für diese Person keines freigegeben ist:
   ausgegraut wie ein leeres Fach, aber zusätzlich mit einem Schloss am
   Fach-Icon. Der Unterschied zu ".disabled" ist die Bedeutung - hier gibt es
   etwas, es ist nur nicht freigeschaltet, dort gibt es noch gar nichts. */
/* Das Fach-Symbol wird blass, Name und Status bleiben lesbar - man soll ja
   erkennen, um welches Fach es geht und warum es zu ist. Die Kachel als
   Ganzes zu dimmen hätte auch das Schloss verschluckt, und genau das war der
   erste Versuch: Man sah es kaum. */
.subject-card.locked { cursor: default; }
/* Nur das SVG abblenden, nicht den ganzen Behälter: Das Schloss steckt als
   weiteres Kind darin, und eine Abblendung am Elternteil gilt für die ganze
   Gruppe - ein opacity:1 am Kind holt sie nicht zurück. Genau das war beim
   ersten Versuch der Grund, warum das Schloss kaum zu sehen war. */
.subject-card.locked .subject-icon > svg { opacity: 0.4; }
.subject-card.locked .subject-name { opacity: 0.65; }
.subject-card.locked .subject-status { color: var(--muted); font-weight: 600; }

/* Das Schloss hängt an der unteren rechten Ecke des Fach-Symbols. Deshalb
   bekommt das Symbol hier position:relative - ohne das säße das Schloss an
   der Kachel statt am Symbol. Es liegt bewusst AUSSERHALB der Abblendung
   oben, also volle Deckkraft und kräftiger Kontrast. */
.subject-card.locked .subject-icon { position: relative; display: inline-block; }

.subject-lock {
  position: absolute;
  right: -12px;
  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  padding: 6px;
  /* Ohne das würde der Innenabstand von der Breite ABGEZOGEN (global gilt
     box-sizing: border-box, siehe ganz oben) - vom Schloss blieben dann
     3 Pixel übrig. Genau so sah es beim ersten Versuch aus: ein Punkt. */
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--text);
  color: var(--panel);
  box-shadow: 0 0 0 3px var(--panel);
}

.subject-lock svg { width: 100%; height: 100%; }

.subject-icon { font-size: 34px; line-height: 1; }
.subject-name { font-weight: 600; font-size: 15px; }
.subject-status { font-size: 12px; color: var(--muted); }
a.subject-card .subject-status { color: var(--accent-dark); font-weight: 600; }

/* ---- Fach-Unterseite: Spiele-Kacheln ---- */
.game-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

a.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  border-color: var(--accent);
}

.game-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--sidebar-bg);
}
/* Statt eines Bildschirmfotos trägt jede Karte ein gezeichnetes Motiv: eine
   flache Skizze dessen, was man im Spiel tut. Das bleibt bei jeder Änderung am
   Spiel richtig, ist auf jedem Bildschirm scharf und wiegt ein Tausendstel
   eines Fotos. */
.game-motiv { width: 100%; height: 100%; display: block; }
.game-info { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 18px; }
.game-name { font-weight: 600; font-size: 16px; }
.game-desc { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ---- Nicht freigegebenes Lernspiel ---- */
/* Die Kachel bleibt vollständig lesbar - man soll sehen, was es gibt und was
   einen erwartet, wenn es freigegeben wird. Sie ist nur sichtbar gedämpft,
   trägt ein Schloss und ist kein Link (siehe faecher/kacheln.php). Die
   eigentliche Sperre sitzt im Server, nicht hier. */
.game-card.locked { cursor: default; }
.game-card.locked .game-motiv { opacity: 0.28; filter: grayscale(1); }
.game-card.locked .game-name,
.game-card.locked .game-desc { opacity: 0.6; }

/* Das Schloss muss auf dem dunklen Motiv sofort erkennbar sein - beim ersten
   Versuch ging es in der Vorschau-Grafik unter. Deshalb hell auf einer
   abgedunkelten Scheibe statt nur grau auf grau. */
.game-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
}

.game-lock svg {
  width: 34px;
  height: 34px;
  padding: 13px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  box-sizing: content-box;
}

.game-locked-note {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Footer ---- */
.site-footer {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
}
.site-version { font-size: 11px; opacity: 0.6; margin-top: 4px; }

/* Impressum, Datenschutz, Lizenzen - stehen in der Fußzeile JEDER Seite
   (siehe fusszeile.php) und zusätzlich auf der Anmeldeseite. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  margin: 10px 0 6px;
}
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ---- Rechtstexte (Impressum, Datenschutz, Lizenzen) ---- */
/* Schmale Spalte statt voller Breite: Fließtext liest sich ab etwa 70 Zeichen
   je Zeile schlecht, und diese Seiten sind reiner Fließtext. */
.rechtstext { max-width: 760px; }
.rechtstext h1 { margin: 0 0 18px; }
.rechtstext h2 { margin: 30px 0 8px; font-size: 19px; }
.rechtstext h3 { margin: 20px 0 6px; font-size: 15px; }
.rechtstext p, .rechtstext li { line-height: 1.6; }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin-bottom: 6px; }
.rechtstext code {
  background: rgba(148, 163, 184, 0.16);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.rechtstext blockquote {
  margin: 10px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--border);
  color: var(--muted);
}
.rechtstext .sub { color: var(--muted); font-size: 14px; }
.rechtstext .stand { margin-top: 36px; color: var(--muted); font-size: 13px; }

/* Die ausfuehrlichen Datenschutzhinweise am Anfrageformular stehen in einem
   <details>. Ausgeklappt sind es drei Absaetze, die das Formular so weit nach
   unten schieben, dass genau dort niemand mehr liest. Zugeklappt bleiben die
   Kernangaben sichtbar (wer verantwortlich ist, dass keine Schuelerdaten
   erhoben werden), und wer es genau wissen will, klappt auf.
   Art. 13 verlangt, dass die Information VOR dem Absenden verfuegbar ist. Das
   ist sie: auf derselben Seite, einen Klick entfernt, ohne Seitenwechsel. */
.dsgvo-details { margin-top: 10px; }
.dsgvo-details > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
  /* Das Standard-Dreieck faellt weg, damit der eigene Pfeil unten nicht
     doppelt erscheint. list-style fuer Firefox, ::-webkit-details-marker fuer
     Safari, und Safari braucht beides. */
  list-style: none;
}
.dsgvo-details > summary::-webkit-details-marker { display: none; }
.dsgvo-details > summary::before {
  content: '\25B8';
  display: inline-block;
  width: 1.1em;
  transition: transform 0.15s ease;
}
.dsgvo-details[open] > summary::before { transform: rotate(90deg); }
.dsgvo-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.dsgvo-details p { margin: 0 0 8px; }
.dsgvo-details p:last-child { margin-bottom: 0; }

/* Der Kasten, der auf noch auszufüllende Platzhalter hinweist. Bewusst
   auffällig: Er soll verschwinden, sobald die Angaben eingetragen sind. */
.hinweis-kasten {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid #f59e0b;
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  font-size: 14px;
  line-height: 1.5;
}

.lizenztabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
.lizenztabelle th, .lizenztabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lizenztabelle th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Hinweis auf der Startseite, dass die Lernspiele fuer das iPad gebaut sind.
   Bewusst kleiner und ruhiger als der Einleitungstext: Es ist eine Randnotiz,
   keine Warnung. */
.geraete-hinweis { margin-top: 10px; font-size: 13.5px; color: var(--muted); }