/* TeacherCubs — shared styles for subpages (modules / about / impressum / support) */
:root {
  --bear: #5C3A1E;
  --bear-deep: #3F2510;
  --bear-soft: #8B5E3C;
  --paw: #E8C9A0;
  --paw-soft: #F4E2C7;
  --cream: #FDF7EE;
  --cream-2: #FBF1E0;
  --mint: #C7E5D2;
  --peach: #F8D7C2;
  --lavender: #D5D2EE;
  --butter: #F5E2A7;
  --sky: #C9DCEC;
  --ink: #2A1D10;
  --muted: #6E5A47;
  --line: rgba(92,58,30,.14);
  --tile-shadow: 0 12px 30px -12px rgba(92,58,30,.25), 0 2px 6px rgba(92,58,30,.08);
  --glass: rgba(255,255,255,.55);
  --glass-line: rgba(255,255,255,.7);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.55;
}
h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--bear); }
p { margin: 0; line-height: 1.6; }
a { color: var(--bear); text-decoration: none; }
a:hover { color: var(--bear-deep); }

.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(199,229,210,.85), transparent 60%),
    radial-gradient(55% 45% at 88% 18%, rgba(245,226,167,.7), transparent 65%),
    radial-gradient(70% 60% at 75% 95%, rgba(213,210,238,.7), transparent 65%),
    radial-gradient(60% 60% at 10% 90%, rgba(248,215,194,.7), transparent 65%),
    var(--cream);
}

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(253, 247, 238, 0.72);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 28px;
}
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 4px; margin-left: 12px; flex: 1; flex-wrap: nowrap; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px;
  color: var(--bear); font-weight: 600; font-size: 15px;
  white-space: nowrap;
  transition: background .2s;
}
.nav-links a:hover { background: rgba(92,58,30,.06); }
.nav-links a.active { background: rgba(92,58,30,.1); }
.nav-cta { display: flex; gap: 10px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px;
  border: none; cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s, background .2s;
}
.btn-primary {
  background: var(--bear); color: var(--cream);
  box-shadow: 0 8px 20px -8px rgba(92,58,30,.6);
}
.btn-primary:hover { background: var(--bear-deep); color: var(--cream); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,.6); color: var(--bear);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,.9); color: var(--bear-deep); }
.btn-cream { background: var(--cream); color: var(--bear-deep); }
.btn-cream:hover { background: white; }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* Sub-page hero */
.page-hero {
  max-width: 1080px; margin: 0 auto;
  padding: 80px 28px 40px;
  text-align: center;
}
.page-hero .eyebrow {
  display: inline-block;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: 13px; letter-spacing: 0.16em;
  color: var(--bear-soft); text-transform: uppercase;
  margin-bottom: 14px;
}
.page-hero h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05; color: var(--bear-deep);
  margin: 0 auto;
}
.page-hero p.lead {
  margin: 22px auto 0; font-size: 19px; color: var(--muted);
  max-width: 640px;
}

/* Sections */
section.page { max-width: 1240px; margin: 0 auto; padding: 40px 28px 80px; }

/* Footer */
footer.foot {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  background: rgba(253, 247, 238, 0.6);
}
.foot-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 40px 28px 24px;
  display: flex; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; align-items: center;
}
.foot-inner img { height: 28px; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--bear); }
.foot-bottom-text { color: var(--muted); font-size: 13px; }

@media (max-width: 1080px) {
  .nav-links a { padding: 8px 10px; font-size: 14px; }
}

@media (max-width: 920px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
}

@media (max-width: 520px) {
  /* Schmales Display: Es bleibt der eine Knopf stehen, der zählt — der
     Einstieg in die App (btn-primary). Nebenwege wandern ohnehin in die
     Fußzeile. Dieselbe Regel steht inline in index.html. */
  .nav-cta .btn-ghost { display: none; }
}