/* ==========================================================================
   Gemeinsames Design der Lernwebseite: "Dunkelblau" (Soft Glass), Stand 08.10.2026.
   Wird auf JEDER Seite NACH dem seiteneigenen CSS eingebunden (direkt vor </head>):
     <link rel="stylesheet" href="/_gemeinsam/design.css">
   Enthaelt (ueber design-basis.css) die Variablen --d-* und die Abbildung der alten Variablen sowie
   die gemeinsamen Komponenten: Kopf, Kacheln (.tile), Bereichsueberschriften, Kapitelkacheln, Toast, .lw-*-Bausteine.
   Familien-Zusaetze danach: design-uebung.css, design-formular.css, design-haeppchen.css, design-lernwoerter.css,
   design-raetsel.css, design-lektuere.css (diese nutzt nur design-basis.css). Geschichten: geschichten.css.
   Regeln: Tippflaechen >= 44 px, Wortart-Farben (Nomen rot, Verb blau, Adjektiv gruen) nur in Wortart-Darstellungen,
   Niveau-Farben nur als Etikett mit Wort (Rahmen 6c).
   ========================================================================== */
@import url("design-basis.css");

/* Kopfleiste und Zurueck-Knopf */
.zurueck{background:var(--d-card-bg);border:var(--d-card-border);color:var(--d-ink);border-radius:var(--d-r-s);
  box-shadow:var(--d-small-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.zurueck:active{transform:translateY(2px);box-shadow:none}
.hub-header{padding-top:48px}
.leiste + .hub-header{padding-top:20px}
.hub-title{font-size:clamp(2rem,6vw,2.8rem);line-height:1.15;color:var(--d-ink)}
.hub-sub{color:var(--d-ink-soft);font-size:1.05rem}
.pokal{background:var(--d-card-bg);border:var(--d-card-border);border-radius:var(--d-r-m);box-shadow:var(--d-small-shadow);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.pokal:active{transform:translateY(2px);box-shadow:none}

/* Bereichsueberschriften */
.section-block{--sec:var(--d-honig)}
.section-block.alt{--sec:var(--d-tuerkis)}
.section-title{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:7px 18px 7px 14px;border:var(--d-card-border);
  border-left:var(--d-card-border);border-radius:999px;background:var(--d-card-bg);font-size:1.05rem;color:var(--d-ink);
  box-shadow:var(--d-small-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.section-title::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sec);flex:none}
.hub-grid{gap:var(--d-gap)}

/* Kacheln: Glas mit Lichtkante, Akzent ueber --acc */
.tile{--acc:var(--d-honig);--acc-bg:var(--d-honig-bg)}
.accent-honig{--acc:var(--d-honig);--acc-bg:var(--d-honig-bg)}
.accent-lila{--acc:var(--d-lila);--acc-bg:var(--d-lila-bg)}
.accent-tuerkis{--acc:var(--d-tuerkis);--acc-bg:var(--d-tuerkis-bg)}
.accent-amber{--acc:var(--d-amber);--acc-bg:var(--d-amber-bg)}
.tile{background:var(--d-card-bg);border:var(--d-card-border);border-radius:var(--d-r-l);box-shadow:var(--d-card-shadow);
  color:var(--d-ink);min-height:172px;padding:22px 18px;gap:12px;position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .15s ease,box-shadow .15s ease}
.tile::before{content:"";position:absolute;right:-40px;bottom:-40px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--acc) 0,transparent 68%);opacity:var(--d-blob);pointer-events:none}
.tile-icon{width:58px;height:58px;display:grid;place-items:center;flex:none;font-size:1.9rem;line-height:1;
  border-radius:20px;background:var(--acc-bg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 6px 12px -8px var(--acc)}
.tile-name{font-size:1.15rem;color:var(--d-ink)}
.tile-topics,.tile-meta{color:var(--d-ink-soft);font-size:.86rem;font-weight:700;line-height:1.5}
.tile-active::after{content:"\2192";position:absolute;right:16px;top:18px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:var(--acc-bg);color:var(--d-ink);font-weight:800;font-size:1.1rem}
@media(hover:hover){.tile-active:hover,.kap-card:hover{transform:translateY(-4px);box-shadow:var(--d-pop-shadow)}}
.tile-active:active,.kap-card:active{transform:scale(.97);box-shadow:var(--d-small-shadow)}
.tile-placeholder{opacity:.7;border-style:dashed}
.tile-badge{background:var(--d-surface-2);border:2px solid var(--d-line);color:var(--d-ink-soft)}
.tile-achtung{--acc:var(--d-amber);--acc-bg:var(--d-amber-bg);background-color:#4E3523;background-image:linear-gradient(150deg,rgba(255,165,102,.28),rgba(255,165,102,.10));
  border:1.5px solid rgba(255,165,102,.7)}

/* Schmale Bildschirme (Handy): zwei Spalten bleiben, Kacheln werden kompakter, lange Woerter werden getrennt */
.tile-name{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:480px){
  .tile{padding:16px 13px;min-height:150px;gap:10px}
  .tile-name{font-size:1.02rem}
  .tile-icon{width:50px;height:50px;font-size:1.6rem;border-radius:16px}
  .tile-active::after{right:12px;top:14px;width:32px;height:32px}
}

/* Wortarten-Kacheln: Rand in der Wortart-Farbe (Nomen rot, Verb blau, Adjektiv gruen) */
.tile.t-nomen{--acc:var(--d-nomen);--acc-bg:var(--d-nomen-bg);--rand:var(--d-nomen-rand)}
.tile.t-verb{--acc:var(--d-verb);--acc-bg:var(--d-verb-bg);--rand:var(--d-verb-rand)}
.tile.t-adjektiv{--acc:var(--d-adjektiv);--acc-bg:var(--d-adjektiv-bg);--rand:var(--d-adjektiv-rand)}
.tile.t-mix{--acc:var(--d-honig);--acc-bg:var(--d-honig-bg);--rand:rgba(255,201,94,.75)}
.tile.t-nomen,.tile.t-verb,.tile.t-adjektiv,.tile.t-mix{border:1.5px solid var(--rand);font:inherit;color:inherit}
.tile.t-nomen::after,.tile.t-verb::after,.tile.t-adjektiv::after,.tile.t-mix::after{content:"";position:absolute;left:0;right:0;top:0;
  width:auto;height:5px;border-radius:0;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.tile-stars{color:var(--d-honig)}

/* Kapitelkacheln (Lektuere) */
.kap-grid{gap:12px}
.kap-card{background:var(--d-card-bg);border:var(--d-card-border);border-top:3px solid var(--d-lila);border-radius:var(--d-r-m);
  box-shadow:var(--d-card-shadow);color:var(--d-ink);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.kap-nr{color:var(--d-nr-ink)}
.kap-card.soon{border-style:dashed;box-shadow:none;opacity:.65}
.kap-bald{color:var(--d-ink-soft)}

/* Hinweis-Sprechblase */
.toast{background:var(--d-surface);color:var(--d-ink);border:1px solid rgba(255,255,255,.3);box-shadow:var(--d-pop-shadow)}

/* Anmelde-Knopf (anmeldung.css nutzt --lw-lila / --lw-lila-d) */
.lw-knopf{box-shadow:0 4px 0 var(--lw-lila-d,#2E4AA8)}

/* Seitenleiste mit Legende (Wortarten) */
.legend span{color:var(--d-ink-soft)}


/* Doppelkonsonanten-Kacheln (t-a .. t-d): gleicher Rand-Stil wie die Wortart-Kacheln, Akzentfarben des Portals */
.tile.t-a{--acc:var(--d-lila);--acc-bg:var(--d-lila-bg);--rand:rgba(175,160,255,.75)}
.tile.t-b{--acc:var(--d-tuerkis);--acc-bg:var(--d-tuerkis-bg);--rand:rgba(69,215,208,.75)}
.tile.t-c{--acc:var(--d-amber);--acc-bg:var(--d-amber-bg);--rand:rgba(255,165,102,.75)}
.tile.t-d{--acc:var(--d-honig);--acc-bg:var(--d-honig-bg);--rand:rgba(255,201,94,.75)}
.tile.t-a,.tile.t-b,.tile.t-c,.tile.t-d{border:1.5px solid var(--rand);font:inherit;color:inherit}
.tile.t-a::after,.tile.t-b::after,.tile.t-c::after,.tile.t-d::after{content:"";position:absolute;left:0;right:0;top:0;
  width:auto;height:5px;border-radius:0;background:var(--acc);box-shadow:0 0 14px var(--acc)}

/* ---------- Gemeinsame Bausteine der Skripte (anmeldung.js, uebung-wertung.js, wertung.js, speicher.js) ----------
   Diese Skripte fuegen ihr CSS erst zur Laufzeit ein; :root:root erhoeht die Spezifitaet. */
:root:root .lw-leiste{color:var(--d-ink-soft)}
:root:root .lw-leiste #lwText b{color:var(--d-ink)}
:root:root .lw-leiste #lwText .lw-warn{color:var(--d-bad)}
:root:root .lw-home,:root:root .lw-neu{background:var(--d-card-bg);border:var(--d-card-border);color:var(--d-ink);
  box-shadow:var(--d-small-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root:root .lw-neu.confirm{border-color:var(--d-bad);color:var(--d-bad)}
:root:root .lw-modal{background:rgba(3,10,40,.65)}
:root:root .lw-modal .lw-box,:root:root .lw-menue{background:var(--d-surface);color:var(--d-ink);
  border:1px solid rgba(255,255,255,.3);box-shadow:var(--d-pop-shadow)}
:root:root .lw-modal button.lw-wahl{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.26);color:var(--d-ink)}
:root:root .lw-modal button.lw-wahl:hover{border-color:var(--d-honig)}
:root:root .lw-menue button{color:var(--d-ink)}
:root:root .lw-menue .lw-hinweis{color:var(--d-ink-soft)}
:root:root #lw-sichern{background:var(--d-surface);border:1px solid rgba(255,255,255,.3);color:var(--d-ink);box-shadow:var(--d-small-shadow)}