/* ==========================================================
   Schulstart — gemeinsamer Stil
   Farbwelt an den Anne-Frank-Unterricht angelehnt, aber
   heller und wärmer: es geht um einen Anfang, nicht um
   Geschichte.
   ========================================================== */

:root {
  /* Smaragd als Grundton: tiefes Waldgrün, dazu ein helles Smaragd
     als Akzent und ein warmes Messing als Gegenpol. Ruhig genug,
     dass Text darauf gut liest, aber deutlich anders als die
     nächtliche Blauwelt des Anne-Frank-Unterrichts. */
  --dark:   #061713;
  --deep:   #0A2620;
  --card:   #10362D;
  --panel:  #17493C;
  --rand:   rgba(214,236,226,.14);

  --smaragd:      #3EBE93;   /* heller Akzent, für Überschriften und Marken */
  --smaragd-tief: #1E7A60;   /* Flächen und Verläufe */
  --messing:      #D9A94E;   /* warmer Gegenpol, sparsam */

  --cream:  #E4F0E9;
  --white:  #F4FAF7;
  --muted:  #7FA396;

  --gruen:  #3FA96B;   /* Ampel */
  --gelb:   #D9A93B;
  --rot:    #C0523F;

  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --radius: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, .serif { font-family: var(--font-serif); font-weight: 700; }

a { color: inherit; }

/* ── Hintergrund: weiche Lichtflecken, ruhig ── */
.grund {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 15% 10%, #0F3A2F 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 85%, #17322C 0%, transparent 60%),
    linear-gradient(160deg, var(--dark) 0%, var(--deep) 100%);
}
.grund::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--bg-bild, none);
  background-size: cover; background-position: center;
  opacity: .16; filter: grayscale(.3);
}

/* ── Startseite ── */
.start {
  position: relative; z-index: 1;
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem); text-align: center;
}
.start h1 {
  margin: 0; font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: -.02em; line-height: 1.05;
}
.start .unter {
  margin: .3rem 0 0; font-family: var(--font-serif); font-size: clamp(1.3rem, 4vw, 2rem);
  color: var(--smaragd); letter-spacing: .06em; text-transform: lowercase;
}
.start .lead {
  margin: 1.2rem auto 0; max-width: 34ch; color: var(--cream); opacity: .85;
  font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.5;
}
.knoepfe {
  margin-top: clamp(2rem, 6vw, 3.2rem); display: flex; flex-direction: column;
  gap: .9rem; width: min(30rem, 100%);
}
.knopf {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem; border: 1px solid rgba(239,229,210,.16);
  border-radius: var(--radius); background: rgba(16,54,45,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  text-decoration: none; text-align: left;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              border-color .3s var(--ease);
}
.knopf:hover { transform: translateY(-3px); background: rgba(23,73,60,.82);
               border-color: rgba(62,190,147,.5); }
.knopf--haupt { background: linear-gradient(135deg, var(--smaragd-tief), #14614C);
                border-color: transparent; }
.knopf--haupt:hover { background: linear-gradient(135deg, #269073, #17705A); }
.knopf__zeichen { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
                  border-radius: 11px; background: rgba(0,0,0,.22); }
.knopf__zeichen svg { width: 22px; height: 22px; fill: none; stroke: var(--messing);
                      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.knopf--haupt .knopf__zeichen svg { stroke: var(--white); }
.knopf__text b { display: block; font-size: 1.0625rem; }
.knopf__text span { display: block; font-size: .875rem; color: var(--cream); opacity: .75; }
.fuss { margin-top: 2.5rem; font-size: .8125rem; color: var(--muted); }

/* ── Bildplatz ─────────────────────────────────────────────
   Solange kein Bild da ist, soll der Platz nur andeuten, wo
   etwas hinkommt — und nichts verdecken. Deshalb: keine Fläche,
   nur eine feine Kontur, und er liegt hinter allem anderen.
   Sobald ein Bild eingesetzt ist, wird er ein normales Element.
   ─────────────────────────────────────────────────────────── */
.bildplatz {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: transparent center/cover no-repeat;
  border: 1px dashed rgba(62,190,147,.28);
  display: grid; place-items: end start;
  z-index: 0;                     /* ohne Bild immer im Hintergrund */
  pointer-events: none;           /* nimmt keine Klicks weg */
}
.bildplatz__hinweis {
  padding: .3rem .5rem; font-size: .6875rem; line-height: 1.2;
  color: var(--smaragd); opacity: .55; font-family: var(--font-sans);
  letter-spacing: .04em;
}
.bildplatz[data-bild] {
  border: 0; z-index: auto; pointer-events: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.4);
}
.bildplatz[data-bild] .bildplatz__hinweis { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}