/* beta-invite.css — die Beta-Zugangsseiten: /beta-zugang/ und /en/beta-access/
 * fuer Eltern, /beta-paedagogik/ fuer Paedagog*innen und Hochschulen.
 *
 * Eigene Datei statt beta.css, weil die Seiten verschiedene Aufgaben haben:
 * /beta/ gibt fertigen Tester*innen den Link, diese Seiten sind der Weg
 * hinein. Die Gestaltung folgt dem Website-Refresh und dem App-System
 * (docs/DESIGN_GUIDELINES.md): Burgund auf Creme, ein Akzent pro Flaeche,
 * BauhausBugler nur fuer die Marken-Momente, Lexend fuer alles andere, Radius
 * 16 fuer Flaechen und 12 fuer Buttons und Felder, weiche schwebende Kapseln
 * statt harter Kanten, wenig Reiz.
 *
 * Die Tokens kommen aus .bn-page in v2.css, hier wird kein Hex erfunden.
 */

.bn-invite{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0, rgba(125,8,69,.07) 0, transparent 70%),
    linear-gradient(180deg, #fff9f0 0, var(--bn-bg) 100%);
  padding:104px 0 8px;
  text-align:center;
}
.bn-invite-eyebrow{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(125,8,69,.07);
  color:var(--bn-burgundy);
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
}
.bn-invite h1{
  font-family:"Bauhaus Bugler",var(--bn-sans);
  font-weight:700;
  font-size:clamp(32px,5vw,46px);
  line-height:1.12;
  letter-spacing:.5px;
  color:var(--bn-burgundy);
  margin:0 0 14px;
}
.bn-invite-sub{
  font-size:clamp(16px,2.2vw,19px);
  color:var(--bn-text-muted);
  max-width:460px;
  margin:0 auto;
}

/* Geraete-Umschalter: vollrunde Kapsel, das Web-Pendant zur schwebenden
   Navigation der App. */
.bn-invite-toggle{
  display:inline-flex;
  gap:4px;
  padding:5px;
  margin:26px auto 0;
  background:var(--bn-surface);
  border-radius:999px;
}
.bn-invite-toggle button{
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:var(--bn-sans);
  font-size:15px;
  font-weight:600;
  color:var(--bn-text-muted);
  padding:10px 20px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.bn-invite-toggle button svg{width:18px;height:18px;display:block}
.bn-invite-toggle button.is-active{
  background:#fff;
  color:var(--bn-burgundy);
  box-shadow:0 2px 10px rgba(125,8,69,.12);
}

/* Panels */
.bn-invite-panels{
  max-width:600px;
  margin:0 auto;
  padding:0 0 8px;
}
.bn-invite-panel{display:none}
.bn-invite-panel.is-active{display:block}

.bn-invite-card{
  background:#fff;
  border:1px solid var(--bn-border);
  border-radius:var(--bn-radius);
  box-shadow:0 12px 32px rgba(125,8,69,.07);
  padding:28px 26px;
  margin-top:22px;
  text-align:left;
}
.bn-invite-card h2{
  font-family:"Bauhaus Bugler",var(--bn-sans);
  font-weight:700;
  font-size:20px;
  letter-spacing:.4px;
  color:var(--bn-text);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.bn-invite-card h2 svg{width:22px;height:22px;color:var(--bn-burgundy)}

/* Nummerierte Schritte */
.bn-invite-steps{
  list-style:none;
  counter-reset:step;
  margin:0 0 22px;
  padding:0;
}
.bn-invite-steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 16px 42px;
  color:var(--bn-text);
  font-size:15px;
  line-height:1.5;
}
.bn-invite-steps li:last-child{padding-bottom:0}
.bn-invite-steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:-1px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--bn-burgundy);
  color:#fff;
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bn-invite-steps li::after{
  content:"";
  position:absolute;
  left:13px;
  top:28px;
  bottom:4px;
  width:2px;
  background:var(--bn-surface);
}
.bn-invite-steps li:last-child::after{display:none}

/* Buttons */
.bn-invite-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  box-sizing:border-box;
  background:var(--bn-burgundy);
  color:#fff;
  font-family:var(--bn-sans);
  font-size:16px;
  font-weight:600;
  border:1.5px solid var(--bn-burgundy);
  padding:14px 20px;
  border-radius:12px;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,transform .15s;
}
.bn-invite-cta:hover{background:#5e2240;border-color:#5e2240;transform:translateY(-1px)}
.bn-invite-cta svg{width:20px;height:20px}
.bn-invite-cta[disabled]{opacity:.55;pointer-events:none}
.bn-invite-cta.is-disabled{background:#d8cfc8;border-color:#d8cfc8;pointer-events:none}
.bn-invite-cta-secondary{
  background:#fff;
  color:var(--bn-burgundy);
}
.bn-invite-cta-secondary:hover{background:#fdf2f7;border-color:var(--bn-burgundy)}
.bn-invite-cta + .bn-invite-cta{margin-top:10px}

/* Formular */
.bn-invite-form{margin:0}
.bn-invite-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--bn-text);
  margin:0 0 6px;
}
.bn-invite-form input[type="email"]{
  width:100%;
  box-sizing:border-box;
  font-family:var(--bn-sans);
  font-size:16px;
  color:var(--bn-text);
  background:#fff;
  border:1px solid var(--bn-border);
  border-radius:12px;
  padding:13px 14px;
  margin:0 0 12px;
}
.bn-invite-form input[type="email"]::placeholder{color:#9aa0a6}
.bn-invite-form input[type="email"]:focus{
  outline:none;
  border-color:var(--bn-burgundy);
  box-shadow:0 0 0 3px rgba(125,8,69,.12);
}
/* Honeypot: fuer Menschen unsichtbar, faengt Bots */
.bn-invite-form .bn-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.bn-invite-fineprint{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--bn-text-muted);
}

/* Zweite Adresse, eingeklappt. Die meisten brauchen sie nicht, deshalb steht
   sie hinter einem Pfeil und nicht als zweites Pflichtfeld im Weg. */
.bn-invite-more{margin:0 0 12px}
.bn-invite-more > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--bn-burgundy);
  padding:2px 0;
}
.bn-invite-more > summary::-webkit-details-marker{display:none}
/* Pfeil VOR dem Text, nicht dahinter: als letztes Flex-Element wandert er an
   den rechten Rand der Zeile und landet dort unter dem schwebenden
   bloomie-Knopf. Zu heisst nach rechts, offen nach unten. */
.bn-invite-caret{
  flex:0 0 auto;
  width:0;
  height:0;
  border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent;
  border-left:5.5px solid currentColor;
  transition:transform .15s;
}
.bn-invite-more[open] .bn-invite-caret{transform:rotate(90deg)}
.bn-invite-more-body{padding:12px 0 0}
.bn-invite-more-body .bn-invite-fineprint{margin:0}
.bn-invite-fineprint a{color:var(--bn-burgundy);text-decoration:underline}
.bn-invite-msg{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.55;
}
.bn-invite-msg.is-ok{color:#2f7d32}
.bn-invite-msg.is-error{color:#b3261e}
/* Nach dem Absenden bleibt nur die Antwort stehen. */
.bn-invite-form.is-done .bn-invite-formfields{display:none}

.bn-invite-note{
  margin:16px 0 0;
  padding:12px 14px;
  background:var(--bn-surface);
  border-radius:12px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--bn-text-muted);
}
.bn-invite-linkhint{
  font-size:12.5px;
  color:#9aa0a6;
  margin:10px 0 0;
  word-break:break-all;
  text-align:center;
}

/* Hinweis am Computer: die App laeuft auf dem Handy. */
.bn-invite-desktop{
  max-width:600px;
  margin:0 auto;
  padding:14px 18px;
  border:1px dashed var(--bn-border);
  border-radius:12px;
  font-size:14px;
  line-height:1.5;
  color:var(--bn-text-muted);
  text-align:center;
}
.bn-invite-desktop.is-hidden{display:none}

/* Rechtszeile, bewusst leise und trotzdem lesbar */
.bn-invite-legal{
  max-width:600px;
  margin:16px auto 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--bn-text-muted);
  text-align:center;
}

/* Hilfe */
.bn-invite-help{text-align:center;padding:8px 0 8px}
.bn-invite-help p{color:var(--bn-text-muted);font-size:14.5px;margin:0}
.bn-invite-help a{color:var(--bn-burgundy);font-weight:600}

/* Sichtbarer Fokus, 3 px Burgund mit 2 px Abstand (Design-Guidelines §6). */
.bn-invite a:focus-visible,
.bn-invite-panels a:focus-visible,
.bn-invite-panels button:focus-visible,
.bn-invite-panels input:focus-visible,
.bn-invite-toggle button:focus-visible,
.bn-invite-help a:focus-visible{
  outline:3px solid var(--bn-burgundy);
  outline-offset:2px;
}

@media (max-width:600px){
  .bn-invite{padding:88px 0 4px}
  .bn-invite-card{padding:22px 18px}
  .bn-invite-toggle button{padding:9px 15px;font-size:14px}
}

@media (prefers-reduced-motion: reduce){
  .bn-invite-toggle button,
  .bn-invite-caret,
  .bn-invite-cta{transition:none}
  .bn-invite-cta:hover{transform:none}
}

/* Dunkelmodus. Nur diese Seite laedt die Datei, die Regeln bleiben also auf
   /beta-zugang/ und /en/beta-access/ beschraenkt. Dieselbe Palette wie
   beta.css und wie die dunkle Mail: dunkle Flaechen, helles Rosa dort, wo
   sonst Burgund traegt, damit der Kontrast reicht. */
@media (prefers-color-scheme: dark){
  body{background:#161214;color:#e7e1de}
  /* .bn-page traegt in v2.css die helle Creme-Flaeche und liegt ueber body.
     Ohne diese Zeile bleibt zwischen Hero und Footer ein heller Streifen. */
  .bn-page{background:#161214;color:#e7e1de}
  .bn-floatnav{background:rgba(22,18,20,.85);border-bottom-color:rgba(255,255,255,.08)}
  .bn-floatnav-link{color:#cbbfbd}
  .bn-floatnav-logo span{color:#FFB000}
  .bn-invite{background:linear-gradient(180deg,#1d1417 0,#161214 100%)}
  .bn-invite-eyebrow{background:rgba(239,131,177,.12);color:#ef83b1}
  .bn-invite h1{color:#ef83b1}
  .bn-invite-sub{color:#cbbfbd}
  .bn-invite-toggle{background:#241d20}
  .bn-invite-toggle button{color:#a59c98}
  .bn-invite-toggle button.is-active{background:#34292d;color:#ef83b1;box-shadow:none}
  .bn-invite-card{background:#211c1f;border-color:#352d31;box-shadow:none}
  .bn-invite-card h2{color:#fff}
  .bn-invite-card h2 svg{color:#ef83b1}
  .bn-invite-steps li{color:#d8d2cf}
  .bn-invite-steps li::after{background:#352d31}
  .bn-invite-cta{background:#7d0845;border-color:#7d0845}
  .bn-invite-cta-secondary{background:transparent;color:#ef83b1;border-color:#ef83b1}
  .bn-invite-cta-secondary:hover{background:#34292d}
  .bn-invite-form label{color:#d8d2cf}
  .bn-invite-form input[type="email"]{background:#1b1518;border-color:#3d2c34;color:#f1ece9}
  .bn-invite-form input[type="email"]:focus{border-color:#ef83b1;box-shadow:0 0 0 3px rgba(239,131,177,.18)}
  .bn-invite-fineprint{color:#a59c98}
  .bn-invite-more > summary{color:#ef83b1}
  .bn-invite-fineprint a{color:#ef83b1}
  .bn-invite-msg.is-ok{color:#7fd083}
  .bn-invite-msg.is-error{color:#f0938a}
  .bn-invite-note{background:#2a2326;color:#cbbfb9}
  .bn-invite-legal{color:#8c8581}
  .bn-invite-desktop{border-color:#3d3438;color:#a59c98}
  .bn-invite-linkhint{color:#8c8581}
  .bn-invite-help p{color:#a59c98}
  .bn-invite-help a{color:#ef83b1}
  .bn-invite a:focus-visible,
  .bn-invite-panels a:focus-visible,
  .bn-invite-panels button:focus-visible,
  .bn-invite-panels input:focus-visible,
  .bn-invite-toggle button:focus-visible,
  .bn-invite-help a:focus-visible{outline-color:#ef83b1}
  .bn-footer{background:#161214;color:#a59c98}
  .bn-footer a{color:#cbbfbd}
}