/* Schriften (25.10.2026): die bisher fehlenden Dateien, als WOFF */
@font-face { font-family: "Archivo"; src: url("fonts/archivo-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("fonts/kalam-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/nunito-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }

/* Denkste! Nachhilfe – Glas-Akzente (Version 4, 25.10.2026)
   Ergänzt das bestehende Design nur an einzelnen Stellen:
   Kopfleiste, Anfrage-Box, Fakten, die sechs Karten, Fächer und Fragen
   werden zu Milchglas. Dahinter schweben weiche Formen in den Logo-Farben,
   die durch das Glas verschwommen durchscheinen. Alles andere bleibt. */

:root {
  --g-orange: #f65316;
  --g-blau: #00a1f2;
  --g-gruen: #34a755;
  --g-violett: #ce5cf4;
  --g-indigo: #5b65ac;
  --g-rot: #ce2e23;
  --g-glas: linear-gradient(140deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3));
  --g-rand: rgba(255, 255, 255, 0.85);
  --g-schatten: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 22px 50px -26px rgba(35, 38, 46, 0.28);
  --g-blur: blur(24px) saturate(180%);
}

/* ---------- Formen hinter dem Glas ---------- */

.mit-deko { position: relative; }
.mit-deko > :not(.deko) { position: relative; z-index: 1; }
.deko { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deko > span { position: absolute; display: block; will-change: transform; }
.form {
  display: block; width: 100%; height: 100%; border-radius: 28%;
  background:
    radial-gradient(110% 80% at 30% 20%, rgba(255, 255, 255, 0.5), transparent 52%),
    linear-gradient(150deg, color-mix(in srgb, var(--f) 24%, white) 0%, color-mix(in srgb, var(--f) 50%, white) 100%);
  box-shadow: 0 26px 50px -32px color-mix(in srgb, var(--f) 40%, transparent);
  animation: g-schweben var(--d, 14s) ease-in-out infinite alternate;
  animation-delay: var(--v, 0s);
}
.form.rund { border-radius: 50%; }
@keyframes g-schweben {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg); }
  100% { transform: translate3d(var(--dx, 16px), var(--dy, -24px), 0) rotate(10deg); }
}

/* Weicher Farbschleier hinter dem Leitsatz */
.schleier > span { border-radius: 50%; filter: blur(50px); opacity: 0.26; }
.schleier i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--f); animation: g-schweben var(--d, 18s) ease-in-out infinite alternate; animation-delay: var(--v, 0s); }

@media (prefers-reduced-motion: reduce) { .form, .schleier i { animation: none; } }

/* ---------- Glasflächen ---------- */

.site-head .bar {
  background: var(--g-glas);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rand);
  box-shadow: var(--g-schatten);
}
/* Aufklappmenü „Anmelden“: fast deckend, damit es gut lesbar bleibt */
.menu-list { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); }

.hero .cta-row,
.facts > div,
.subject,
.faq-list details {
  background: var(--g-glas);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rand);
  box-shadow: var(--g-schatten);
}

/* Die sechs Karten behalten ihre Farbe, werden aber durchscheinend */
.note-card {
  background: linear-gradient(140deg, color-mix(in srgb, var(--soft) 82%, transparent), color-mix(in srgb, var(--soft) 45%, transparent));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 22px 50px -30px rgba(35, 38, 46, 0.3);
}

/* Leitsatz in Anführungszeichen, Schleier dahinter */
.stmt-sec .wrap { position: relative; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .cta-row, .facts > div, .subject, .faq-list details, .site-head .bar { background: rgba(255, 255, 255, 0.92); }
  .note-card { background: var(--soft); }
}

/* Auf schmalen Bildschirmen weniger Formen */
@media (max-width: 700px) {
  .deko > span.nur-gross { display: none; }
}

/* Überschriften immer vor den Formen (z. B. „Darauf können Sie sich verlassen“) */
.section-head { position: relative; z-index: 2; }

/* Überschrift „Gute Noten unmöglich? Denkste!“ (25.10.2026) */
.hero h1 .denkste-wort { display: block; padding-top: 0.12em; }
.hero h1 .denkste-wort img { display: block; height: 1.25em; width: auto; max-width: 100%; }
.hero .unterzeile {
  margin: var(--s3) 0 0; font-family: "Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", var(--font-h);
  font-weight: 800; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink);
}

/* Professioneller (25.10.2026) */
/* Schlichte Ortszeile statt Etikett im Kopfbereich */
.hero .ort-zeile { margin: 0 0 var(--s2); font-weight: 600; font-size: 17px; color: var(--orange-deep); }
/* Keine Einblend-Animationen beim Scrollen mehr (Kopfbereich und Leitsatz bleiben bewegt) */
.reveal, .reveal.is-in,
.note-card.reveal, .note-card.reveal:nth-child(even), .note-card.reveal .n, .note-card.reveal h4 {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.note-card.reveal p { opacity: 0.82 !important; transform: none !important; transition: none !important; }

/* Sechs Karten: Symbole statt Nummern (25.10.2026) */
.note-card .n.symbol {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--c) 70%, transparent);
  color: var(--c); font-size: 0; letter-spacing: 0;
}
.note-card .n.symbol svg { width: 28px; height: 28px; }

/* Unterseiten (Impressum, Datenschutz, Danke …): Text auf einer Glasfläche */
.unterseite { padding-top: var(--s5); padding-bottom: var(--band); }
.unterseite > .legal {
  margin: 0 auto; max-width: 860px; padding: clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-rand); box-shadow: var(--g-schatten);
}
.unterseite > .legal p, .unterseite > .legal li { max-width: 70ch; }
.unterseite > .legal h2:first-of-type { margin-top: var(--s5); }
@media (max-width: 560px) {
  .unterseite > .legal { padding: 26px 20px; border-radius: var(--r-l); }
  .unterseite > .legal h1 { font-size: 30px; -webkit-hyphens: manual; hyphens: manual; }
}

/* Über uns: Foto ohne Hintergrund, scharf, ohne Zoom, feine Abschlusslinie (25.10.2026) */
.portrait-frame { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
.portrait-frame img { transition: none; transform: none !important; }
.portrait:hover .portrait-frame img { transform: none; }
.portrait-frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(60,60,60,.55) 25%, rgba(60,60,60,.55) 75%, transparent);
}

/* Video liegt immer vor den Formen darunter (25.10.2026) */
.video-sec { position: relative; z-index: 3; }