/* ============================================================
   pleyer ai - Coming Soon
   Ergaenzt premium.css nur um das, was diese eine Seite zusaetzlich
   braucht. Keine neuen Farben, keine neuen Fonts, keine neuen
   Radien: alles uebernimmt die vorhandenen --Variablen aus
   premium.css. Kein <style> Tag, kein style Attribut irgendwo,
   siehe .htaccess CSP (style-src 'self', ohne unsafe-inline).
   ============================================================ */

/* Nav-Pille zeigt hier nur das Logo, kein Menue: den rechten
   Trennstrich von .nav__brand (premium.css) fuer den Alleinstand
   entfernen statt eine neue Nav-Variante zu bauen. */
.nav .nav__brand:only-child {
  border-right: none;
  margin-right: 0;
  padding-right: 22px;
}

/* Footer hat hier nur Markenblock + eine Spalte (Rechtliches/Kontakt)
   statt der drei Nav-Spalten aus premium.css: Grid-Template anpassen,
   sonst bleiben zwei leere Spuren rechts stehen. */
.footer__grid--coming-soon {
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 640px) {
  .footer__grid--coming-soon {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------- Eyebrow "Marktstart": deutlich lesbarer als Standard-Eyebrow,
   Akzentfarbe wie .accent statt dem gedaempften Standard-Grau --------- */
.eyebrow--marktstart {
  font-size: 0.8125rem;
  padding: 9px 20px;
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(191, 255, 0, 0.35);
}

/* ---------- Hero-H1: "KI-Automatisierung" darf nie umbrechen ----------
   nowrap auf dem Wort selbst (nicht auf der ganzen H1), Schriftgroesse
   bei sehr schmalen Viewports reduziert, damit das Wort bei 320 px ohne
   horizontalen Overflow in eine Zeile passt (siehe Messung in der
   Uebergabe/Bericht, gegen echtes Rendering geprueft, nicht geschaetzt). */
.hero-title .nowrap {
  white-space: nowrap;
}
@media (max-width: 430px) {
  .hero-title {
    font-size: clamp(1.7rem, 8.6vw, 2.4rem);
  }
}

/* ---------- Pflichthinweise (oberhalb von Was-kommt und Formular) --- */
.notice-box {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 32px);
  background: var(--bg-card-strong);
  border: 1px solid var(--hair-strong);
  border-radius: 20px;
}
.notice-box__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notice-box__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--fg-muted);
}
.notice-box__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.notice-box__list b { color: var(--fg); font-weight: 500; }

/* ---------- Was kommt: nutzt .bento/.bento__card aus premium.css,
   nur der Abschlusssatz unter den Karten ist eigenes CSS --------- */
/* premium.css schiebt den Text per margin-top:auto an den Kartenboden;
   bei unterschiedlich langen Texten stehen die Beschreibungen dann auf
   verschiedenen Hoehen. Hier direkt unter den Titel. */
.bento__card .bento__desc {
  margin-top: 12px;
}
/* premium.css zieht zwischen 721 und 1100 px die letzte Karte ueber die
   volle Breite (gebaut fuer fuenf Karten). Hier sind es sechs, also
   bleibt die letzte Karte halbbreit neben ihrer Nachbarin. */
@media (min-width: 721px) and (max-width: 1100px) {
  .bento > article:last-child { grid-column: span 2; }
}
.wk-note {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--fg-dim);
}

/* ---------- Kontakt: Erstgespraech direkt buchen, danach E-Mail-Hinweis
   (Kontaktformular am 17.09.2026 entfernt, siehe COMING-SOON.md) ----------
   .booking-cal selbst kommt aus premium.css (geteilte Komponente mit der
   Wartungsseite). Hier nur der Abstand zum folgenden Trenner "Lieber per
   E-Mail?" zwischen Kalender und Mail-Hinweis. */
.cta-final .booking-cal {
  margin-bottom: 8px;
}
.cta-final__divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 40px auto;
  color: var(--fg-dim);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cta-final__divider::before,
.cta-final__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hair-strong);
}

/* ---------- Kontakt: Mail-Link neben dem Formular-Intro ---------- */
.cta-final__maillink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  color: var(--accent);
  font-family: 'Geist Mono', monospace;
  font-size: 0.875rem;
  border-bottom: 1px solid rgba(191, 255, 0, 0.3);
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease-out);
}
.cta-final__maillink:hover { border-bottom-color: var(--accent); }

/* ---------- AGB: Stand-Zeile am Ende des Fließtexts ----------
   Ersetzt das Inline-Style-Attribut aus dem Wurzel-agb.html, das die
   Coming-Soon-CSP (style-src 'self', ohne unsafe-inline) nicht zulaesst. */
.legal__stand {
  margin-top: 40px;
  color: var(--fg-dim);
  font-size: 0.8125rem;
}