* { box-sizing: border-box; }
:root { color-scheme: light; --ink:#102f4b; --focus:#0b4076; }
html { min-height:100%; }
body {
  min-height:100vh; min-height:100dvh; margin:0; display:flex; flex-direction:column;
  color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-color:#def6ff;
  background-image:url('/assets/images/hintergrund.webp');
  background-position:center center; background-repeat:no-repeat;
  /* Proportionen erhalten: nie auf Bildschirmbreite und -höhe verzerren. */
  background-size:cover;
}
a { color:inherit; }
a:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.landing { flex:1; display:flex; justify-content:center; align-items:center; padding:3rem 1.25rem 2rem; text-align:center; }
.landing-content { display:flex; flex-direction:column; align-items:center; gap:clamp(1.15rem,2.5vw,2rem); width:min(92vw,800px); }
.brand-logo { display:block; width:min(100%,710px); height:auto; filter:drop-shadow(0 5px 8px rgba(17,64,92,.1)); }
.tagline { margin:0; font-size:clamp(1.05rem,2.2vw,1.7rem); font-weight:800; text-wrap:balance; text-shadow:0 2px 10px rgba(255,255,255,.9); }
.primary-link {
  display:inline-flex; align-items:center; justify-content:center; gap:.85rem;
  border:2px solid #28516d; border-radius:999px;
  background:linear-gradient(180deg,#fff0a6 0%,#ffdc69 58%,#ffd15c 100%);
  color:#133b5d; padding:.88rem 1.6rem;
  font-size:clamp(.98rem,1.4vw,1.15rem); font-weight:800; line-height:1.3;
  text-decoration:none; box-shadow:0 5px 0 #d99f39,0 11px 20px rgba(44,84,105,.22);
  transition:transform .16s ease,box-shadow .16s ease;
}
.primary-link:hover { transform:translateY(-2px); box-shadow:0 7px 0 #d99f39,0 15px 25px rgba(44,84,105,.22); }
.primary-link:active {transform:translateY(2px);box-shadow:0 2px 0 #d99f39,0 5px 10px rgba(44,84,105,.2)}
.button-icon {display:block; width:1.4rem; height:1.4rem; flex:none; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.button-arrow {font-size:1.45em;line-height:1; font-weight:800;}
.site-footer {text-align:center; padding:1rem; display:flex;justify-content:center;gap:.8rem; flex-wrap:wrap;font-size:.9rem; background:rgba(255,255,255,.62);backdrop-filter:blur(5px)}
.site-footer a:hover {text-decoration-thickness:2px}
.legal-page { width:min(92%,760px);margin:3rem auto;padding:clamp(1.5rem,4vw,3rem);background:rgba(255,255,255,.95);border-radius:20px;box-shadow:0 14px 32px #366f8433;line-height:1.65;flex:1 }
.legal-page h1,.learning-card h1 {line-height:1.2}
.notice,.status-note {padding:1rem;background:#fff3d5;border-left:4px solid #d79c23;border-radius:8px}
.back-link {display:inline-block;margin-bottom:1.5rem}
.learning-page {flex:1;width:min(92%,850px);margin:2rem auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}
.learning-logo {width:min(100%,440px);height:auto}
.learning-card {text-align:center;background:rgba(255,255,255,.95);padding:clamp(1.4rem,4vw,3rem);border-radius:22px;line-height:1.55;box-shadow:0 12px 28px #366f8430}
.eyebrow {font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:#286e97}
@media (max-width:650px) {
 body {background-size:cover;background-position:center center;}
 .landing {padding:2rem 1.1rem 1.5rem}
 .landing-content {gap:1.5rem}
 .primary-link {padding:.9rem 1.05rem;gap:.55rem}
 .site-footer {padding-bottom:max(1rem,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{transition:none!important}}

/* Eigenständige Themenübersicht; beeinflusst weder Startseite noch Lernmodule. */
.topic-directory{flex:1;width:min(1080px,92%);margin:0 auto;padding:2rem 0 4rem}
.topic-directory-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-bottom:2rem}
.topic-directory-back{align-self:flex-start;font-weight:700;text-decoration:none;color:#245c78;padding:.4rem 0}
.topic-directory-back:hover{text-decoration:underline}
.topic-directory-logo{width:min(310px,70vw);height:auto;margin:.2rem 0 1rem;filter:drop-shadow(0 5px 8px #11405c1a)}
.topic-directory-header h1{font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin:0}
.topic-directory-header p:not(.eyebrow){margin:.3rem 0 0;line-height:1.5}
.directory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:1.25rem}
.directory-card{display:flex;flex-direction:column;gap:.85rem;background:rgba(255,255,255,.94);border:2px solid #b8dce9;border-radius:22px;padding:1.65rem;text-decoration:none;box-shadow:0 9px 22px #2560811c;transition:transform .15s,box-shadow .15s}
.directory-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px #2560812b}
.directory-card h2{font-size:clamp(1.3rem,2.3vw,1.65rem);line-height:1.25;margin:0}
.directory-card p{line-height:1.5;margin:0;flex:1}
.directory-card-group{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#286e97}
.directory-card-cta{color:#1a5576;font-weight:800;margin-top:.65rem}
.directory-empty{text-align:center;background:#ffffffec;border-radius:18px;padding:2rem}
.footer-topic-link{font-weight:650}
@media(prefers-reduced-motion:reduce){.directory-card{transition:none}}