/* ---------- Schrift: lokal, kein Google-CDN ----------
   Dateien nach ./fonts/ legen. Siehe HINWEISE.md.
   Fällt ohne die Dateien sauber auf die Systemschrift zurück. */
@font-face{
  font-family:"Fredoka";
  src:url("fonts/fredoka-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fredoka";
  src:url("fonts/fredoka-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fredoka";
  src:url("fonts/fredoka-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --blau:#6C82EF;
  --indigo:#3A34C7;
  --weiss:#FFFFFF;
  --karte:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  background:var(--blau);
  color:var(--indigo);
  font-family:"Fredoka",system-ui,sans-serif;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

.wrap{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 clamp(1.25rem,5vw,4rem);
}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1.5rem,5vw,4rem) 0 clamp(2rem,6vw,5rem);
}
.frage{
  font-weight:700;
  line-height:.86;
  letter-spacing:-.03em;
  font-size:clamp(3rem,11vw,10.5rem);
}
.frage .preis{color:var(--weiss)}
.satz{
  margin-top:clamp(1.5rem,4vw,3rem);
  font-size:clamp(1.15rem,2.6vw,2.1rem);
  line-height:1.25;
  max-width:26ch;
}
.satz .hell{color:var(--weiss)}

/* Signature: das Wort läuft aus dem Bild */
.raus{
  margin-top:clamp(.5rem,2vw,1.5rem);
  font-weight:700;
  color:var(--weiss);
  font-size:clamp(3.4rem,17vw,15rem);
  line-height:.8;
  letter-spacing:-.04em;
  white-space:nowrap;
  margin-left:-.06em;
  user-select:none;
}

.cta-zeile{
  margin-top:clamp(1.75rem,4vw,3rem);
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 1.25rem;
  align-items:center;
}
.cta{
  display:inline-block;
  background:var(--indigo);
  color:var(--weiss);
  text-decoration:none;
  font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.4rem);
  padding:.85em 1.5em;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  transition:transform .18s ease, background .18s ease;
}
.cta:hover{transform:translateY(-2px);background:#2A24B4}
.cta:focus-visible,a:focus-visible,button:focus-visible{outline:4px solid var(--weiss);outline-offset:3px}
.neben{font-size:clamp(.95rem,1.5vw,1.15rem);color:var(--weiss);opacity:.9}

/* ---------- Über / Ablauf ---------- */
.ueber{padding:clamp(2rem,7vw,5rem) 0 0}
.ueber .karte{max-width:62ch}
.ueber p{
  font-weight:500;line-height:1.55;
  font-size:clamp(1rem,1.7vw,1.2rem);
  margin-bottom:1em;
}
.ueber h2+p{margin-top:.2em}

/* ---------- Buchung ---------- */
.buchung{padding:clamp(2rem,7vw,6rem) 0}
.karte{
  background:var(--karte);
  border-radius:clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1.25rem,3vw,2.5rem);
  box-shadow:0 24px 60px rgba(28,24,120,.18);
}
.karte h2{
  font-size:clamp(1.4rem,3vw,2.4rem);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.35em;
}
.karte p.sub{font-weight:500;font-size:clamp(.95rem,1.6vw,1.1rem);opacity:.75}

/* Click-to-load statt automatischem Drittanbieter-Embed */
.ladefeld{
  margin-top:1.25rem;
  border:2px dashed rgba(58,52,199,.35);
  border-radius:1rem;
  padding:clamp(1.25rem,3vw,2rem);
  text-align:center;
}
.ladefeld p{
  font-weight:500;
  font-size:clamp(.9rem,1.5vw,1rem);
  line-height:1.5;
  max-width:46ch;
  margin:0 auto 1.1rem;
  opacity:.8;
}
#buchung-embed:not(:empty){min-height:640px;margin-top:1.25rem}

/* ---------- Fuß ---------- */
.fuss{padding:clamp(2rem,5vw,4rem) 0 clamp(1.5rem,4vw,3rem)}
.wa{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--indigo);text-decoration:none;font-weight:700;
  font-size:clamp(1.05rem,2vw,1.5rem);
}
.wa:hover{color:var(--weiss)}
.wa svg{width:1.15em;height:1.15em;flex:none}
.rechtliches{
  margin-top:clamp(1rem,3vw,2rem);
  display:flex;gap:1.5rem;flex-wrap:wrap;
  font-weight:500;font-size:1rem;
}
.rechtliches a{color:var(--weiss);text-decoration:none;opacity:.85}
.rechtliches a:hover{text-decoration:underline;opacity:1}
.name{
  margin-top:clamp(1.5rem,4vw,3rem);
  font-weight:700;color:var(--weiss);
  font-size:clamp(3.2rem,15vw,13rem);
  line-height:.82;letter-spacing:-.04em;white-space:nowrap;
  margin-left:-.055em;user-select:none;
}

/* ---------- Rechtstexte ---------- */
.doku{padding:clamp(2.5rem,7vw,6rem) 0}
.doku .karte{max-width:70ch;margin:0 auto}
.doku h1{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:.6em;
}
.doku h2{
  font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:700;
  margin:2em 0 .5em;
}
.doku p,.doku li{font-weight:500;line-height:1.6;margin-bottom:.8em}
.doku ul{margin-left:1.2rem}
.doku a{color:var(--indigo)}
.zurueck{
  display:inline-block;margin-top:2.5rem;
  color:var(--indigo);font-weight:700;text-decoration:none;
}
.zurueck:hover{text-decoration:underline}
.luecke{
  background:#FFE9A8;padding:.1em .35em;border-radius:.25em;
  font-weight:700;
}

/* Einblenden beim Laden */
.auf{opacity:0;transform:translateY(14px);animation:auf .7s cubic-bezier(.2,.7,.3,1) forwards}
.auf:nth-child(1){animation-delay:.05s}
.auf:nth-child(2){animation-delay:.16s}
.auf:nth-child(3){animation-delay:.27s}
.auf:nth-child(4){animation-delay:.38s}
@keyframes auf{to{opacity:1;transform:none}}