/* ---------- 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;
  --rot:#E5342B;
}
*{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{
  position:relative;
  min-height:100svh;
  min-height:100dvh;
  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(1rem,2.5vw,1.75rem);
  line-height:1.35;
}
.satz.klein{
  font-size:clamp(1rem,1.6vw,1.25rem);
  max-width:52ch;
}
.satz.mittel{
  font-size:clamp(1.3rem,2.7vw,2.1rem);
  line-height:1.25;
  max-width:34ch;
  margin-top:clamp(1.25rem,3vw,2.25rem);
}
.satz .hell{color:var(--weiss)}

/* Text links, Video rechts */
.hero-reihe{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(14rem,26vw,24rem);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
  margin-top:clamp(1.25rem,3vw,2.25rem);
}
.hero-text{min-width:0}
.hero-text .satz.mittel{margin-top:0}
.hero-video{
  position:relative;
  aspect-ratio:1/1;
  border-radius:clamp(1rem,2vw,1.75rem);
  overflow:hidden;
  background:var(--indigo);
  box-shadow:0 18px 50px rgba(58,52,199,.25);
}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover}
.ton{
  position:absolute;right:.75rem;bottom:.75rem;
  width:2.75rem;height:2.75rem;border-radius:999px;border:none;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--indigo);
  display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .18s ease,background .18s ease;
}
.ton:hover{transform:scale(1.06);background:var(--weiss)}
.ton svg{width:1.4rem;height:1.4rem}
.ton .ton-an{display:none}
.ton[aria-pressed="true"] .ton-aus{display:none}
.ton[aria-pressed="true"] .ton-an{display:block}
@media (min-width:721px){
  .hero-text .raus .wort{font-size:clamp(3.2rem,11.5vw,10.5rem)}
}
@media (max-width:720px){
  .hero-reihe{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .hero-video{order:-1;width:100%;max-width:24rem}
  .hero-text .satz.mittel{margin-top:0}
}

/* Signature: das grosse Wort mit Randnotiz */
.raus{
  margin-top:clamp(.5rem,2vw,1.5rem);
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:clamp(.75rem,2vw,1.75rem);
  row-gap:.25rem;
}
.raus .wort{
  font-weight:700;
  color:var(--weiss);
  font-size:clamp(3.2rem,17vw,15rem);
  line-height:.8;
  letter-spacing:-.04em;
  white-space:nowrap;
  margin-left:-.055em;   /* optischer Ausgleich, damit das n bündig sitzt */
  user-select:none;
}
.raus .zusatz{
  font-weight:600;
  color:var(--indigo);
  font-size:clamp(.95rem,1.5vw,1.15rem);
  line-height:1.25;
}

.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(4rem,15vh,9rem) 0 0}
.ueber-karte{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.ueber-block p:last-child{margin-bottom:0}
@media (max-width:900px){
  .ueber-karte{grid-template-columns:1fr;gap:0}
  .ueber-block p:last-child{margin-bottom:1em}
  .ueber-block:last-child p:last-child{margin-bottom:0}
}
.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:0 0 clamp(2rem,7vw,6rem)}
.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);
  display:flex;align-items:flex-end;gap:.16em;
  font-size:clamp(3.2rem,12.5vw,13rem);
  line-height:.82;letter-spacing:-.04em;white-space:nowrap;
  margin-left:-.055em;user-select:none;
}
.name-klein{
  display:flex;flex-direction:column;justify-content:space-between;
  align-self:flex-end;
  font-size:.42em;line-height:.85;letter-spacing:-.03em;
}
.name-klein span{display:block;width:max-content;line-height:.85}
.name{margin-left:0;width:max-content;max-width:none}
.fuss .wrap{overflow:visible}
.fuss{overflow:hidden}
.name-gross{font-size:1em;line-height:.82}

/* ---------- 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 in Lesegeschwindigkeit */
.auf{opacity:0;transform:translateY(14px);animation:auf .8s cubic-bezier(.2,.7,.3,1) forwards}
.hero .frage{animation-delay:.15s}
.hero .satz:nth-of-type(1){animation-delay:.65s}
.hero .satz:nth-of-type(2){animation-delay:1.3s}
.hero .satz:nth-of-type(3){animation-delay:2.5s}
.hero .hero-text .satz.mittel{animation-delay:1.3s}
.hero .hero-text .satz.klein{animation-delay:2.5s}
.hero .hero-video{animation-delay:1s}
.hero .raus{animation-delay:3.2s}
.hero .cta-zeile{animation-delay:4.5s}
@keyframes auf{to{opacity:1;transform:none}}

/* Pfeil nach unten – sitzt rechts neben der Schaltfläche,
   rutscht bei zu wenig Platz automatisch darunter und zentriert sich dort */
.pfeil{
  color:var(--weiss);
  opacity:0;
  width:clamp(2.2rem,4vw,3rem);
  height:clamp(2.2rem,4vw,3rem);
  margin-left:auto;
  display:grid;
  place-items:center;
  animation:pfeilAuf .8s ease 5.4s forwards, pfeilWippen 2.2s ease-in-out 6.2s infinite;
}
.pfeil svg{width:100%;height:100%}
.pfeil:hover{color:var(--indigo)}
@keyframes pfeilAuf{to{opacity:.85}}
@keyframes pfeilWippen{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(.45rem)}
}
@media (max-width:640px){
  .pfeil{margin-inline:auto;margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .pfeil{opacity:.85;animation:none}
}

/* ---------- Buchungswidget ---------- */
#buchung{margin-top:1.5rem;min-height:8rem}
.buchung-meldung{font-weight:500;line-height:1.5;opacity:.75}
.buchung-meldung.fehler{color:#B4231C;opacity:1}

/* Dauerwahl (nur interne Seite) */
.buchung-dauer{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.buchung-dauerknopf{
  font-family:inherit;font-weight:600;font-size:.95rem;
  padding:.5em 1.1em;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--indigo);
  border:2px solid rgba(58,52,199,.25);
  transition:background .15s ease,border-color .15s ease;
}
.buchung-dauerknopf:hover{border-color:var(--indigo)}
.buchung-dauerknopf.aktiv{background:var(--indigo);color:var(--weiss);border-color:var(--indigo)}

/* Monatsansicht links, Zeiten rechts */
.kalender{
  display:grid;
  grid-template-columns:minmax(16rem,20rem) 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
@media (max-width:720px){
  .kalender{grid-template-columns:1fr}
}
.kal-kopf{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:.9rem;gap:.5rem;
}
.kal-monat{font-weight:700;font-size:clamp(1.05rem,2vw,1.25rem)}
.kal-nav{display:flex;gap:.35rem}
.kal-nav button{
  font-family:inherit;font-size:1rem;line-height:1;
  width:2.1rem;height:2.1rem;border-radius:999px;cursor:pointer;
  background:rgba(58,52,199,.08);color:var(--indigo);
  border:none;display:grid;place-items:center;
  transition:background .15s ease;
}
.kal-nav button:hover:not(:disabled){background:rgba(58,52,199,.18)}
.kal-nav button:disabled{opacity:.25;cursor:default}
.kal-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.kal-wt{
  text-align:center;font-size:.75rem;font-weight:600;
  opacity:.45;padding-bottom:.3rem;
}
.kal-tag{
  aspect-ratio:1;display:grid;place-items:center;
  font-family:inherit;font-weight:600;font-size:.95rem;
  border:none;background:none;border-radius:999px;
  color:rgba(58,52,199,.3);cursor:default;padding:0;
}
.kal-tag.frei{
  background:var(--indigo);color:var(--weiss);cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.kal-tag.frei:hover{background:#2A24B4;transform:scale(1.06)}
.kal-tag.aktiv{box-shadow:0 0 0 3px rgba(58,52,199,.35)}
.kal-leer{visibility:hidden}

.kal-zeiten h3{
  font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);
  margin-bottom:.75rem;
}
.kal-hinweis{font-weight:500;opacity:.6;line-height:1.5}

.buchung-zeiten{display:flex;flex-wrap:wrap;gap:.5rem}
.buchung-zeit{
  font-family:inherit;font-weight:600;font-size:1rem;
  padding:.6em 1.1em;border-radius:999px;cursor:pointer;
  background:rgba(58,52,199,.08);color:var(--indigo);
  border:2px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.buchung-zeit:hover{background:rgba(58,52,199,.16);border-color:var(--indigo)}

/* Formular */
.buchung-formular{display:grid;gap:1rem;max-width:34rem}
.buchung-formular label{
  display:grid;gap:.35rem;font-weight:600;
  font-size:clamp(.95rem,1.5vw,1.05rem);
}
.buchung-formular input,.buchung-formular textarea{
  font-family:inherit;font-size:1rem;font-weight:500;
  padding:.7em .9em;border-radius:.75rem;
  border:2px solid rgba(58,52,199,.25);
  background:#fff;color:var(--indigo);width:100%;
}
.buchung-formular input:focus,.buchung-formular textarea:focus{
  outline:none;border-color:var(--indigo);
}
.buchung-formular .cta{justify-self:start}
.buchung-optional{font-weight:500;opacity:.55}
.buchung-gewaehlt{
  font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);
  display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;
}
.buchung-zurueck{
  font-family:inherit;font-size:.9rem;font-weight:600;
  background:none;border:none;cursor:pointer;
  color:var(--indigo);opacity:.6;text-decoration:underline;
}
.buchung-zurueck:hover{opacity:1}
.buchung-hinweis{font-weight:500;font-size:.95rem;min-height:1.2em}
.buchung-hinweis.fehler{color:#B4231C}
.buchung-falle{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.buchung-fertig h3{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:700;margin-bottom:.5em}
.buchung-fertig p{font-weight:500;line-height:1.55;margin-bottom:.6em}

/* ---------- Paket / feste Plätze ---------- */
.paket{padding:clamp(2rem,7vw,6rem) 0}
.paket-karte{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
@media (max-width:760px){
  .paket-karte{grid-template-columns:1fr}
  .paket-preis{order:-1;min-width:0;width:100%}
}
.paket-marke{
  display:inline-block;
  background:#FFE9A8;color:var(--indigo);
  font-weight:700;font-size:clamp(.8rem,1.3vw,.95rem);
  letter-spacing:.02em;text-transform:uppercase;
  padding:.4em .9em;border-radius:999px;
  margin-bottom:1rem;
}
.paket-text h2{margin-bottom:.5em}
.paket-text p{
  font-weight:500;line-height:1.55;
  font-size:clamp(1rem,1.7vw,1.2rem);
  max-width:52ch;
}
.paket-liste{
  list-style:none;
  margin:1.5rem 0 0;
  display:grid;gap:.6rem;
  max-width:52ch;
}
.paket-liste li{
  display:flex;gap:.7rem;align-items:flex-start;
  font-weight:500;line-height:1.45;
  font-size:clamp(.95rem,1.6vw,1.1rem);
}
.paket-haken{
  flex:none;width:1.5em;height:1.5em;border-radius:999px;
  background:rgba(58,52,199,.1);color:var(--indigo);
  display:grid;place-items:center;
  font-weight:700;font-size:.9em;margin-top:.1em;
}
.paket-cta{
  margin-top:1.75rem;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem 1.25rem;
}
.paket-neben{
  font-weight:500;font-size:clamp(.9rem,1.4vw,1rem);
  opacity:.7;max-width:30ch;line-height:1.4;
}
.paket-preis{
  background:var(--indigo);color:var(--weiss);
  border-radius:clamp(1rem,2.5vw,2rem);
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3.5vw,3rem);
  display:grid;justify-items:center;text-align:center;
  min-width:clamp(12rem,22vw,16rem);
}
.paket-alt{
  position:relative;
  font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);
  opacity:.6;
}
.paket-alt::after{
  content:"";position:absolute;left:-.15em;right:-.15em;top:52%;
  height:.14em;background:var(--rot);border-radius:1em;
  transform:rotate(-7deg);
}
.paket-neu{
  font-weight:700;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(3.8rem,8vw,6.5rem);
  margin-top:.1em;
}
.paket-einheit{font-weight:600;font-size:clamp(1rem,1.6vw,1.2rem);margin-top:.5em}
.paket-bedingung{
  font-weight:500;font-size:clamp(.8rem,1.3vw,.95rem);
  opacity:.7;margin-top:.35em;
}

/* durchgestrichene alte Platzzahlen im Badge: Korrektur steht etwas höher daneben */
.paket-zahlen{display:inline-flex;gap:.3em;align-items:baseline}
.paket-weg{position:relative;opacity:.55}
.paket-weg::after{
  content:"";position:absolute;left:-.12em;right:-.12em;top:50%;
  height:.16em;background:var(--rot);border-radius:1em;
  transform:rotate(-10deg);
}
.paket-weg:nth-child(even)::after{transform:rotate(9deg)}
.paket-jetzt{
  position:relative;top:-.35em;
  font-size:1.1em;
  transform:rotate(-6deg);display:inline-block;
}

/* ---------- Admin ---------- */
.admin{padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,5vw,4rem);max-width:60rem}
.admin-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.admin-kopf h1{color:var(--weiss);font-weight:700;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.03em}
.admin-werkzeuge{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.admin-info{color:var(--weiss);opacity:.85;font-weight:500}
.admin-fehler{color:#FFD5D2;font-weight:600;min-height:1.2em;margin-top:.75rem}
.karte .admin-fehler{color:#B4231C}
.admin-knopf{
  font-family:inherit;font-weight:700;font-size:.95rem;
  padding:.55em 1.1em;border-radius:999px;cursor:pointer;
  background:var(--weiss);color:var(--indigo);border:none;
}
.admin-knopf.leise{background:transparent;color:var(--weiss);border:2px solid rgba(255,255,255,.5)}
.admin-login{max-width:26rem}
.admin-login form{display:grid;gap:1rem}
.admin-login label{display:grid;gap:.35rem;font-weight:600}
.admin-login input{
  font-family:inherit;font-size:1.05rem;padding:.7em .9em;border-radius:.75rem;
  border:2px solid rgba(58,52,199,.25);color:var(--indigo);
}
.admin-login input:focus{outline:none;border-color:var(--indigo)}
.admin-login .cta{justify-self:start}

.schueler{margin-bottom:1.25rem}
.schueler-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin-bottom:.75rem}
.schueler-kopf h2{margin:0;font-size:clamp(1.3rem,2.5vw,1.8rem)}
.leise{font-weight:500;opacity:.6;font-size:.95rem}
.schueler-arbeiten{font-weight:600;background:#FFE9A8;padding:.4em .8em;border-radius:.6rem;display:inline-block;margin-bottom:.75rem}
.unzugeordnet{border:3px dashed #E5342B}

.stunden{display:grid;gap:.5rem}
.stunde{border:2px solid rgba(58,52,199,.15);border-radius:1rem;overflow:hidden}
.stunde.fertig{border-color:rgba(58,52,199,.08);opacity:.8}
.stunde.kommend{border-style:dashed}
.stunde summary{
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  padding:.75rem 1rem;cursor:pointer;font-weight:700;list-style:none;
}
.stunde summary::-webkit-details-marker{display:none}
.stunde summary::before{content:"▸";opacity:.5;font-size:.9em}
.stunde[open] summary::before{content:"▾"}
.stunde-dauer{font-weight:500;opacity:.6}
.stunde-status{margin-left:auto;font-weight:600;font-size:.9rem;opacity:.7}
.stunde.fertig .stunde-status{color:#1E8E4A;opacity:1}
.stunde-form{display:grid;gap:.75rem;padding:0 1rem 1rem}
.stunde-titel{font-weight:500;opacity:.75;font-size:.95rem}
.stunde-form label{display:grid;gap:.3rem;font-weight:600;font-size:.95rem}
.stunde-form textarea,.stunde-form select{
  font-family:inherit;font-size:1rem;font-weight:500;padding:.6em .8em;
  border-radius:.6rem;border:2px solid rgba(58,52,199,.2);color:var(--indigo);background:#fff;width:100%;
}
.stunde-form textarea:focus,.stunde-form select:focus{outline:none;border-color:var(--indigo)}
.stunde-aktionen{display:flex;align-items:center;gap:1rem}
.cta.klein{font-size:1rem;padding:.6em 1.3em}
.stunde-meldung{font-weight:500;opacity:.7}

.admin [hidden]{display:none!important}

/* Admin: Gruppen, Briefing, Arbeiten, Ausblenden */
.gruppe{margin-bottom:.75rem}
.gruppe-titel{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.5;margin:.5rem 0 .35rem}
.stunde{margin-bottom:.5rem}
.stunde.offen{border-color:#E5342B}
.stunde.offen .stunde-status{color:#E5342B;opacity:1}
.stunde-weg{
  font-family:inherit;font-size:1.1rem;line-height:1;width:1.7rem;height:1.7rem;
  border-radius:999px;border:none;background:rgba(58,52,199,.08);color:var(--indigo);
  cursor:pointer;opacity:.5;flex:none;
}
.stunde-weg:hover{opacity:1;background:#FFD5D2;color:#B4231C}
.stunde .stunde-titel{padding:0 1rem .5rem}
.schueler.hat-offen{box-shadow:0 24px 60px rgba(28,24,120,.18),0 0 0 3px #E5342B inset}
.marken{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.marke{font-weight:600;font-size:.9rem;padding:.35em .75em;border-radius:.6rem;background:rgba(58,52,199,.08)}
.marke.kommend{background:#FFE9A8}
.marke.vorbei{background:#DDF5E4;color:#1E6B3A}

.briefing{padding:0 1rem 1rem;display:grid;gap:.75rem}
.briefing-arbeit{font-weight:600;background:#FFE9A8;padding:.5em .8em;border-radius:.6rem}
.briefing-letzte{background:rgba(58,52,199,.05);border-radius:.75rem;padding:.75rem .9rem}
.briefing-letzte h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;margin-bottom:.4rem}
.briefing-letzte p{font-weight:500;line-height:1.45;margin-bottom:.4rem}
.briefing-label{display:inline-block;font-weight:700;font-size:.8rem;opacity:.6;min-width:6.5rem}
.briefing .stunde-form{padding:0}

.leise-knopf{
  font-family:inherit;font-weight:600;font-size:.9rem;background:none;border:none;
  color:var(--indigo);opacity:.65;cursor:pointer;text-decoration:underline;padding:0;
}
.leise-knopf:hover{opacity:1}
.leise-knopf.gefahr{color:#B4231C}
.leise-knopf.hell{color:var(--weiss);opacity:.9}

.arbeiten{margin-top:1rem;border-top:2px solid rgba(58,52,199,.1);padding-top:.75rem}
.arbeiten-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.arbeiten h3{font-size:1rem;font-weight:700}
.arbeit-liste{list-style:none;display:grid;gap:.3rem}
.arbeit{display:flex;flex-wrap:wrap;gap:.3rem .75rem;align-items:baseline;font-weight:500;padding:.35rem .6rem;border-radius:.5rem}
.arbeit.kommend{background:#FFF6D6}
.arbeit-datum{font-weight:700;min-width:5.5rem}
.arbeit-ergebnis{font-weight:700;background:#DDF5E4;color:#1E6B3A;padding:.1em .5em;border-radius:.4rem}
.arbeit-notiz{opacity:.65;font-size:.9rem}
.arbeit .arbeit-bearbeiten{margin-left:auto;font-size:.8rem}
.arbeit-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.6rem;margin-top:.6rem;padding:.75rem;background:rgba(58,52,199,.05);border-radius:.75rem}
.arbeit-form label{display:grid;gap:.25rem;font-weight:600;font-size:.85rem}
.arbeit-form label.breit,.arbeit-form .stunde-aktionen{grid-column:1/-1}
.arbeit-form input{
  font-family:inherit;font-size:.95rem;font-weight:500;padding:.5em .7em;border-radius:.5rem;
  border:2px solid rgba(58,52,199,.2);color:var(--indigo);background:#fff;width:100%;
}
.arbeit-form input:focus{outline:none;border-color:var(--indigo)}
.ausgeblendet-schalter{margin:.5rem 0 1rem}
.ausgeblendet-liste{list-style:none;display:grid;gap:.5rem;font-weight:500}
.ausgeblendet-liste li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.admin-knopf:disabled{opacity:.7;cursor:default}
#inhalt.laedt{opacity:.5}

/* Admin: Ansichten + Schülertabelle */
.admin-tabs{display:flex;gap:.25rem;background:rgba(58,52,199,.25);padding:.25rem;border-radius:999px}
.admin-tab{font-family:inherit;font-weight:700;font-size:.95rem;padding:.5em 1.1em;border-radius:999px;border:none;cursor:pointer;background:transparent;color:var(--weiss)}
.admin-tab.aktiv{background:var(--weiss);color:var(--indigo)}
.filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.filter-knopf{font-family:inherit;font-weight:700;font-size:.9rem;padding:.45em 1em;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.18);color:var(--weiss);border:2px solid transparent}
.filter-knopf span{opacity:.7;font-weight:600;margin-left:.3em}
.filter-knopf.aktiv{background:var(--weiss);color:var(--indigo)}
.admin-hinweis{color:var(--weiss);font-weight:500;background:rgba(58,52,199,.35);padding:.7em 1em;border-radius:.75rem;margin-bottom:1rem;line-height:1.45}
.tabelle-karte{padding:clamp(.5rem,1.5vw,1rem)}
.tabelle-scroll{overflow-x:auto}
.tabelle{width:100%;border-collapse:collapse;font-weight:500;font-size:.95rem;min-width:56rem}
.tabelle th{text-align:left;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5;padding:.6rem .6rem;border-bottom:2px solid rgba(58,52,199,.12);white-space:nowrap}
.tabelle td{padding:.55rem .6rem;border-bottom:1px solid rgba(58,52,199,.08);vertical-align:top;white-space:nowrap}
.tabelle td.tab-name{white-space:normal;min-width:11rem}
.tabelle td.tab-name .leise{display:block;font-size:.85rem}
.tabelle tr.status-inaktiv td{opacity:.55}
.tabelle tr:hover td{background:rgba(58,52,199,.04)}
.status{display:inline-block;font-weight:700;font-size:.8rem;padding:.2em .6em;border-radius:.5rem;background:rgba(58,52,199,.1)}
.status.aktiv{background:#DDF5E4;color:#1E6B3A}
.status.pause{background:#FFE9A8}
.status.inaktiv{background:rgba(58,52,199,.08);opacity:.8}
@media (max-width:640px){.admin-kopf{flex-direction:column;align-items:flex-start}}

/* WhatsApp-Link im weißen Kasten nach der Buchung */
.buchung-fertig .wa{margin-top:.75rem}
.buchung-fertig .wa:hover{color:#2A24B4}

/* Mobil: Hero darf nicht breiter als der Bildschirm werden */
.hero > .wrap{min-width:0}
@media (max-width:720px){
  .frage{font-size:clamp(2.2rem,9.4vw,10.5rem)}
  .raus .wort{font-size:clamp(3rem,15.5vw,15rem)}
}