/*
 * shared.css  –  Klassentreffen '96 · Freie Waldorfschule Frankfurt
 * ─────────────────────────────────────────────────────────────────
 * Gemeinsame Design-Basis für alle Seiten und Unterseiten.
 * Einbinden: <link rel="stylesheet" href="/shared.css">
 *
 * Enthält: @font-face, CSS Custom Properties, Reset, Basis-Typografie,
 *          Layout-Helfer, Animationen, Scroll-Reveal, gemeinsame Komponenten.
 *
 * Seitenspezifische Styles (Hero, Programm, Dialog etc.) gehören NICHT
 * hierher, sondern in das jeweilige <style>-Tag der Seite.
 */

/* ============ LOKALE SCHRIFTARTEN ============ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/CormorantGaramond-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Gloock';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Gloock-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Caveat-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Caveat-SemiBold.woff2') format('woff2');
}

/* ============ FARBPALETTE ============ */
:root {
  --cream:        #f5ecd9;
  --cream-light:  #faf4e6;
  --ocher:        #d4a24c;
  --terracotta:   #c06a3f;
  --rose:         #d88b7a;
  --sun-deep:     #d97f2a;
  --ink:          #3d2817;
  --ink-soft:     #5c4328;
  --violet-deep:  #6d4e8c;
  --violet-soft:  #b89ccf;
  --plum:         #7a4e7e;
}

/* ============ RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ============ BODY & HINTERGRUND ============ */
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(232, 168, 56, 0.18), transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(216, 139, 122, 0.15), transparent 60%),
    radial-gradient(ellipse at 50% 85%, rgba(139, 166, 120, 0.12), transparent 55%),
    radial-gradient(ellipse at 10% 70%, rgba(184, 156, 207, 0.18), transparent 55%),
    radial-gradient(ellipse at 95% 90%, rgba(139, 106, 168, 0.14), transparent 55%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Papier-Textur */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* ============ TYPOGRAFIE ============ */
h1, h2, h3 {
  font-family: 'Gloock', 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
}

p { margin-bottom: 1.2em; }

a {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px dotted var(--terracotta);
  transition: all 0.3s ease;
}
a:hover { color: var(--sun-deep); border-bottom-style: solid; }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

/* ============ LAYOUT ============ */
.container { max-width: 820px; margin: 0 auto; padding: 2rem; }
section { padding: 9rem 0 6rem; position: relative; }
section + section { padding-top: 11rem; }

/* ============ SECTION-LABELS ============ */
.section-label {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--violet-deep);
  margin-bottom: 0.5rem;
  display: block;
}

.section-title {
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  margin-bottom: 2.5rem;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.5rem;
  width: 60%; height: 3px;
  background: linear-gradient(to right, var(--ocher), var(--violet-soft), transparent);
  border-radius: 2px;
}

/* ============ ANIMATIONEN ============ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ SCROLL-REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ GEMEINSAME KOMPONENTEN ============ */

/* Primär-Button (Terrakotta, ausgefüllt) */
.btn-primary {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.15s ease;
  text-decoration: none;
  border-bottom: none;
}
.btn-primary:hover {
  background: var(--sun-deep);
  color: #fff;
  border-bottom: none;
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Sekundär-Button (Ocher, Rahmen) */
.btn-secondary {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 2px solid var(--ocher);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  font-family: 'Gloock', serif;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--sun-deep);
  color: var(--ink);
  border-bottom: 2px solid var(--sun-deep);
}

/* Karte / Panel */
.card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 162, 76, 0.3);
  border-radius: 16px;
  padding: 2rem;
}

/* Statusmeldungen */
.msg-success {
  background: rgba(139, 166, 120, 0.2);
  border: 1px solid rgba(139, 166, 120, 0.5);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  color: var(--ink);
  font-style: italic;
}
.msg-error {
  background: rgba(192, 106, 63, 0.12);
  border: 1px solid rgba(192, 106, 63, 0.4);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  color: var(--terracotta);
}

/* Formulare */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream-light);
  border: 1.5px solid var(--ocher);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(192, 106, 63, 0.15);
}

label {
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.4rem;
}

/* Zurück-Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: var(--ink-soft);
  border-bottom: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.back-link:hover { opacity: 1; color: var(--terracotta); border-bottom: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 640px) {
  body { font-size: 17px; }
  section { padding: 6rem 0 4rem; }
  section + section { padding-top: 7rem; }
}