/* ------------------------------------------------------------------
   Gemeinsames Design für anabel-dietz.de
   Diese Datei gilt für ALLE Seiten. Änderst du hier etwas,
   ändert es sich überall.
   ------------------------------------------------------------------ */

:root {
  --nacht:     #000000;  /* Hintergrund, reines Schwarz */
  --flaeche:   #161616;  /* Kacheln im Ruhezustand: subtiles, aber sichtbares Grau */
  --flaeche-2: #202020;  /* für Flächen, die NICHT komplett einfärben (z.B. Hinweisboxen) */
  --rand:      #2a2a2a;  /* neutrale Trennlinien */
  --text:      #ffffff;  /* Haupttext, maximaler Kontrast für den Beamer */
  --gedaempft: #888888;  /* Nebentext */

  /* Akzentfarben je Bereich (Rand im Ruhezustand, volle Füllung beim Hover) */
  --akzent:            #5bb8f0;  /* Standard, falls kein Fach passt */
  --links-blau:        #5bb8f0;  /* Für Link-Kacheln bei Fächern ohne eigene
                                     Link-Farbe (Standardwert von --links-akzent) */
  --links-lila:        #9569c9;  /* Für Link-Kacheln bei Physik - Fach-Seiten
                                     biegen --links-akzent lokal hierauf um */
  --links-akzent:      var(--links-blau);  /* Farbe der Link-Kacheln - auf
                                     Fach-Seiten lokal überschreibbar (siehe
                                     physik/index.html), unabhängig von --akzent,
                                     das dort schon auf die Fachfarbe zeigt */
  --mathematik:        #2fb8ac;  /* Türkis/Blaugrün */
  --physik:            #b8496f;  /* Lilarot */
  --nit:               #f2b134;  /* Gelb/Orange */
  --werkeln:           #a8672f;  /* Kupfer/Bronze */
  --unterrichts-tools: #5c5c5c;  /* Mittelgrau */
  --sonstige-tools:    #7d7d7d;  /* Hellgrau (bewusst nicht zu hell, sonst wird der weiße Text beim Hover schlecht lesbar) */

  /* Farbpaletten je Jahrgangsstufe – aktuell nicht auf den Kacheln verwendet,
     aber vorbereitet, falls einzelne Apps später danach eingefärbt werden */
  --mathe-unterstufe:   #3f9e56;  /* Grün */
  --mathe-mittelstufe:  #2fb8ac;  /* Türkis (= Hauptfarbe Mathematik) */
  --mathe-oberstufe:    #5bb8f0;  /* Blau */
  --physik-mittelstufe: #e2574c; /* Rot */
  --physik-oberstufe:   #9569c9; /* Lila */
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 3rem 1.5rem 2.5rem;
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.075rem;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--nacht);
  display: flex;
  flex-direction: column;
}

/* .seite ist eine Spalte, die die ganze Bildschirmhoehe fuellt, damit die
   Fussleiste unten bleibt, auch wenn wenig Inhalt auf der Seite steht. */
.seite {
  max-width: 40rem;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.seite > footer { margin-top: auto; }

/* --- Kopf (Unterseiten) ------------------------------------------- */

h1 {
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.untertitel {
  margin: 0 0 3.5rem;
  max-width: 34rem;
  color: var(--gedaempft);
}
.seite-kategorien .untertitel { margin-bottom: 2.5rem; }

/* Fach-Switch: kleiner Umschalter oben auf Seiten, die es fachübergreifend
   in sehr ähnlichem Aufbau gibt (z. B. GeoGebra-Sammlung, künftig auch
   andere geteilte Unterseiten) - führt per Link auf die jeweils andere
   Fach-Version derselben Seite. */
.fach-switch { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.fach-switch a {
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--gedaempft);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.fach-switch a.aktiv { border-color: var(--akzent); color: var(--text); background: rgba(255, 255, 255, .06); }
.fach-switch a:hover, .fach-switch a:focus-visible { color: var(--text); border-color: var(--akzent); outline: none; }

.zurueck {
  display: inline-block;
  margin-bottom: 2.25rem;
  color: var(--gedaempft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.zurueck:hover,
.zurueck:focus-visible { color: var(--text); border-bottom-color: var(--akzent); outline: none; }

/* --- Startseite: Kopf + Kachel-Pyramide --------------------------- */

.start-kopf { text-align: center; margin-bottom: 3rem; }
.start-kopf h1 {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Drei einfache, zentrierte Reihen uebereinander (3 Faecher / 2 Tools /
   1 Werkeln) statt eines Rasters – dadurch ist jede Kachel ueberall exakt
   gleich breit (feste Breite, keine Prozent-/fr-Aufteilung), und die
   Pyramidenform ergibt sich einfach daraus, dass jede Reihe zentriert ist
   und weniger Kacheln enthaelt. */
.pyramide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.pyramide-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
}

.start-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 12rem;
  min-height: 110px;
  padding: 1.5rem 1.25rem;
  background: var(--flaeche);
  border: 1px solid var(--eigen, var(--akzent));
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  transition: background-color .25s ease, transform .25s ease;
}
.start-kachel:hover,
.start-kachel:focus-visible {
  background-color: var(--eigen, var(--akzent));
  transform: translateY(-3px);
  outline: none;
}
.start-kachel .name {
  font-size: 1.3rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.start-kachel .unterzeile {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.start-kachel:hover .unterzeile,
.start-kachel:focus-visible .unterzeile { color: rgba(255, 255, 255, 0.85); }
.start-kachel .status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
.start-kachel.geplant { opacity: .5; pointer-events: none; }

/* --- Abschnitt (auf den Unterseiten, z.B. "Apps") ----------------- */

.abschnitt { margin-bottom: 3.25rem; }

.abschnitt h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gedaempft);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rand);
}

/* --- Kachel (eine App, auf den Unterseiten) ----------------------- */

.kachel {
  display: block;
  margin-bottom: 0.8rem;
  padding: 1.15rem 1.35rem;
  background: var(--flaeche);
  border: 1px solid var(--eigen, var(--akzent));
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.kachel:hover,
.kachel:focus-visible {
  background-color: var(--eigen, var(--akzent));
  transform: translateY(-2px);
  outline: none;
}

.kachel .name { display: block; font-size: 1.3rem; font-weight: 600; }
.kachel .info { display: block; margin-top: 0.15rem; color: var(--gedaempft); font-size: 1rem; }
.kachel:hover .info,
.kachel:focus-visible .info { color: rgba(255, 255, 255, 0.85); }

.kachel.geplant { opacity: .55; pointer-events: none; }

/* --- Kategorien (Fach-Übersichtsseiten mit mehreren Kachel-Gruppen) --
   Für Fach-Seiten, auf denen Apps nach Zielgruppe/Zweck gruppiert werden:
   Schüler-Apps, Lehrer-Demos, kleine Spiele für den Unterrichtseinstieg,
   externe Links. Jede Gruppe ist eine eigene Spalte (wrapt auf schmalen
   Bildschirmen automatisch untereinander). Braucht mehr Breite als der
   normale, schmale Lesefluss - deshalb .seite-kategorien auf der Seite
   zusätzlich zu .seite setzen. */

.seite-kategorien { max-width: 78rem; }

.kategorien {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 2.2rem;
  align-items: start;
}
.kategorie h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gedaempft);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rand);
}
/* Rutscht eine Kategorie mangels Platz in eine neue Zeile (siehe
   kategorien.js), bekommt sie hier oben mehr Abstand - deutlich als
   neue Zeile erkennbar, aber nicht komplett abgesetzt. */
.kategorie.kategorie-umgebrochen { margin-top: 3rem; }

.kategorie-hinweis {
  margin: 0 0 1.1rem;
  padding-top: 0.2rem;
  color: var(--gedaempft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.kachel-raster {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kachel-leer {
  margin: 0;
  padding: 1rem 1rem;
  border: 1px dashed var(--rand);
  border-radius: 8px;
  color: var(--gedaempft);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

/* Flache App-Kachel: Piktogramm links, Name/Schlagwörter/Klassen rechts
   in einer Zeile - bewusst flach statt quadratisch, damit auf einer
   Kategorien-Spalte mehrere Apps ohne Scrollen sichtbar sind (wichtig für
   Querformat auf iPad/Beamer). Zwei Aufbauten:
   - einfacher Link: <a class="kachel-app kachel-app-inhalt">
   - mit QR-Knopf: <div class="kachel-app"><button class="qr-knopf">…
     </button><a class="kachel-app-inhalt">…</a></div>
   In beiden Fällen übernimmt .kachel-app Hintergrund/Rahmen/Hover,
   .kachel-app-inhalt das Innenlayout. overflow:hidden sorgt dafür, dass
   die dreieckige QR-Ecke (siehe .qr-knopf) sauber an der abgerundeten
   Kachel-Ecke endet. */
.kachel-app {
  position: relative;
  overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--eigen, var(--akzent));
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
/* Färbt die ganze Kachel nur, wenn der Link-Teil selbst gehovert/fokussiert
   ist - nicht schon, wenn nur der QR-Knopf (der optisch darüber liegt)
   gehovert wird. Der QR-Knopf hat dafür sein eigenes Hover (siehe unten). */
.kachel-app:has(.kachel-app-inhalt:hover),
.kachel-app:has(.kachel-app-inhalt:focus-visible) { background-color: var(--eigen, var(--akzent)); transform: translateY(-2px); }
.kachel-app-inhalt:focus-visible { outline: none; }

.kachel-app-inhalt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  height: 6.75rem;
  padding: 0.65rem 0.8rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
/* Macht bei der Zwei-Elemente-Variante (Div + Link + QR-Knopf) die ganze
   Kachel klickbar, nicht nur den Link-Text - der QR-Knopf liegt per
   z-index darüber und bleibt separat klickbar. */
a.kachel-app-inhalt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

.kachel-app .piktogramm { width: 1.9rem; height: 1.9rem; flex: none; }
.kachel-app .text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kachel-app .name,
.kachel-app .info,
.kachel-app .klassen {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.kachel-app .name { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.kachel-app .info { font-size: 0.75rem; color: var(--gedaempft); line-height: 1.3; }
.kachel-app .klassen {
  font-size: 0.7rem;
  color: var(--gedaempft);
  line-height: 1.3;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}
.kachel-app .optional { opacity: .68; }
.kachel-app:has(.kachel-app-inhalt:hover) .info, .kachel-app:has(.kachel-app-inhalt:hover) .klassen,
.kachel-app:has(.kachel-app-inhalt:focus-visible) .info, .kachel-app:has(.kachel-app-inhalt:focus-visible) .klassen { color: rgba(255, 255, 255, 0.85); }

.kachel-app.geplant { opacity: .5; pointer-events: none; }
.kachel-app-inhalt.extern .name::after {
  content: '↗'; margin-left: 0.3em; font-size: 0.8em; color: var(--gedaempft);
}
.kachel-app:has(.kachel-app-inhalt:hover) .name::after,
.kachel-app:has(.kachel-app-inhalt:focus-visible) .name::after { color: rgba(255, 255, 255, 0.85); }

/* Dreieckige "Lesezeichen"-Ecke statt kleinem Quadrat-Knopf - bewusst
   größer und auffälliger, damit man beim Antippen auf dem Tablet nicht
   stattdessen die App öffnet. */
.qr-knopf {
  position: absolute; z-index: 2; top: 0; right: 0;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 0.32rem 0.36rem 0 0;
  margin: 0;
  background: var(--rand);
  border: none;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease;
}
.qr-knopf:hover,
.qr-knopf:focus-visible { background: var(--eigen, var(--akzent)); outline: none; }
.qr-knopf svg { width: 1rem; height: 1rem; }

/* Kachel-Inhalt mit QR-Knopf braucht rechts etwas Luft, damit lange
   Namen/Zeilen nicht unter die Ecke des Knopfs laufen. */
.kachel-app-inhalt.hat-qr { padding-right: 2.8rem; }

/* Link-Kachel ("Links") - dieselbe .kachel-app-Struktur wie die
   App-Kacheln (inkl. QR-Knopf), aber als Modifier deutlich flacher: zwei
   Link-Kacheln + der Zwischenraum sind zusammen etwas weniger hoch als
   eine App-Kachel, damit das Raster über beide Kategorien hinweg ruhig
   wirkt. Kein Schlagwort/Klassen-Schema - nur Piktogramm, Name, Pfeil.
   Farbe kommt über --links-akzent (Standard: blau, siehe :root) - auf
   Fach-Seiten kann --links-akzent lokal umgebogen werden (Physik: lila),
   damit Links als eigene Kategorie erkennbar bleiben, aber trotzdem zum
   Fach passen. */
.kachel-app.link-kachel { border-color: var(--links-akzent); }
.kachel-app.link-kachel:has(.kachel-app-inhalt:hover),
.kachel-app.link-kachel:has(.kachel-app-inhalt:focus-visible) { background-color: var(--links-akzent); }
.link-kachel .kachel-app-inhalt {
  height: 2.9rem;
  padding: 0.3rem 0.6rem;
  gap: 0.55rem;
}
.link-kachel .piktogramm { width: 1.3rem; height: 1.3rem; }
.link-kachel .name { font-size: 0.86rem; }
.link-kachel .qr-knopf {
  width: 1.7rem; height: 1.7rem;
  padding: 0.16rem 0.2rem 0 0;
}
.link-kachel .qr-knopf svg { width: 0.65rem; height: 0.65rem; }
.link-kachel .qr-knopf:hover,
.link-kachel .qr-knopf:focus-visible { background: var(--links-akzent); }
.link-kachel .kachel-app-inhalt.hat-qr { padding-right: 1.7rem; }

/* --- QR-Modal (öffnet sich über dem qr-knopf einer Kachel) --------- */

.qr-modal {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(0, 0, 0, .78);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.qr-modal[hidden] { display: none; }
.qr-modal-karte {
  position: relative;
  width: 100%; max-width: 19rem;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 2.1rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
}
.qr-modal-karte img { display: block; width: 100%; max-width: 15rem; height: auto; background: #fff; border-radius: 6px; padding: 0.6rem; }
.qr-modal-name { margin: 0; font-weight: 600; }
.qr-modal-url { margin: 0; font-size: 0.8rem; color: var(--gedaempft); word-break: break-all; }
.qr-modal-hinweis { margin: 0; font-size: 0.75rem; color: var(--gedaempft); }
.qr-modal-schliessen {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: transparent; border: 1px solid var(--rand); color: var(--gedaempft);
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qr-modal-schliessen:hover,
.qr-modal-schliessen:focus-visible { color: var(--text); border-color: var(--text); outline: none; }

/* --- Fuß, einheitlich auf jeder Seite ------------------------------ */

footer {
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rand);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--gedaempft);
  text-align: center;
}
@media (min-width: 600px) {
  footer { flex-direction: row; justify-content: space-between; text-align: left; }
}
footer nav a { color: var(--gedaempft); text-decoration: none; letter-spacing: 0.05em; transition: color .2s ease; }
footer nav a:hover, footer nav a:focus-visible { color: var(--text); outline: none; }
footer nav span { margin: 0 0.5rem; opacity: .4; }
footer p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}