/* brand-theme.css — cal.diy Custom CSS für die Buchungsseite.
 *
 * Abgeleitet aus dem verbindlichen Designsystem:
 *   infra/calcom-config/kalender-ci.css  (Tokens + Stile, Quelle der Wahrheit)
 *   infra/calcom-config/DESIGN.md         (Design-Richtlinie: Do's & Don'ts)
 * CI: „Andreas Heinze · Mentoring für Väter" — editorial, ruhig, autoritativ.
 *
 * Warum diese Datei separat ist (nicht einfach kalender-ci.css importieren):
 * cal.diy wird als fertiges Image deployed (KEIN Fork) — sein Markup trägt die
 * kalender-ci-Klassen (.btn, .cal__day …) NICHT. Deshalb mappen wir die CI-Tokens
 * hier auf cal.diys eigene Theme-Variablen (--cal-*) und DOM-Selektoren.
 *
 * Einfügen in: cal.diy → Settings → Appearance → Custom CSS (org-weit oder pro Event-Type).
 */

/* ——— Schriften (1:1 aus kalender-ci.css) ——————————————————————— */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1;1,9..144,400..700,0..100,0..1&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ——— CI-Tokens (1:1 aus kalender-ci.css) ——————————————————————— */
:root {
  --bg:          oklch(0.97 0.012 75);
  --bg-2:        oklch(0.94 0.014 75);
  --bg-deep:     oklch(0.22 0.04 240);
  --bg-deep-ink: oklch(0.96 0.012 75);
  --ink:   oklch(0.22 0.02 45);
  --ink-2: oklch(0.40 0.02 45);
  --ink-3: oklch(0.58 0.015 45);
  --line:   oklch(0.88 0.014 75);
  --line-2: oklch(0.80 0.018 75);
  --accent:     oklch(0.62 0.12 70);
  --accent-ink: oklch(0.98 0.01 75);
  --danger:     oklch(0.50 0.14 25);
  --brand-navy: #1d3d5e;
  --cta-pink:       rgb(230, 0, 126);
  --cta-pink-hover: #C4006B;
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
  --rad: 2px;
  --rad-input: 8px;
  --pill: 999px;
}

/* ——— cal.diy Theme-Variablen auf CI-Tokens mappen ————————————————
   cal.diy stylt fast alles über --cal-* Variablen. Sie zu überschreiben ist der
   sauberste Brand-Weg (greift konsistent, ohne jedes Element einzeln zu treffen). */
:root,
.light,
[data-theme="light"] {
  --cal-bg:           var(--bg);          /* Creme statt Weiß (DESIGN.md: nie #fff als BG) */
  --cal-bg-emphasis:  var(--bg-2);
  --cal-bg-subtle:    var(--bg-2);
  --cal-bg-muted:     var(--bg-2);
  --cal-bg-inverted:  var(--bg-deep);     /* Navy für dunkle Flächen */

  --cal-text:          var(--ink);
  --cal-text-emphasis: var(--ink);
  --cal-text-subtle:   var(--ink-2);
  --cal-text-muted:    var(--ink-3);
  --cal-text-inverted: var(--bg-deep-ink);

  --cal-border:          var(--line);     /* Linien statt Schatten */
  --cal-border-subtle:   var(--line);
  --cal-border-emphasis: var(--line-2);
  --cal-border-booker:   var(--line);

  --cal-brand:          var(--accent);    /* Messing für aktive Zustände/Auswahl */
  --cal-brand-emphasis: oklch(0.55 0.13 70);
  --cal-brand-text:     var(--accent-ink);
}

/* ——— Seite: Creme-Grund, Inter als UI-Font ——————————————————————— */
body,
.bg-default,
.bg-subtle,
main {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* ——— Überschriften → Fraunces (Serif, editorial) ————————————————— */
h1, h2, h3,
.font-cal,
[class*="text-2xl"], [class*="text-3xl"], [class*="text-xl"] {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* ——— Mono-Labels: Zeit-Slots, Wochentage, Eyebrows ——————————————— */
[data-testid="time"],
.calendar-weekdays,
[class*="uppercase"] {
  font-family: var(--mono) !important;
  letter-spacing: 0.08em !important;
}

/* ——— Haupt-CTA (Buchung bestätigen) → Pink, Pille (sparsam, EIN CTA) ——— */
button[type="submit"],
[data-testid="confirm-book-button"] {
  background-color: var(--cta-pink) !important;
  border-color: var(--cta-pink) !important;
  color: #fff !important;
  border-radius: var(--pill) !important;
  box-shadow: none !important;
  transition: transform .2s, background .2s;
}
button[type="submit"]:hover,
[data-testid="confirm-book-button"]:hover {
  background-color: var(--cta-pink-hover) !important;
  border-color: var(--cta-pink-hover) !important;
  transform: translateY(-1px);
}

/* ——— Zeit-Slots → Messing-Akzent, leicht gerundet, Linien statt Schatten ——— */
[data-testid="time"] {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--rad-input) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
[data-testid="time"]:hover {
  border-color: var(--accent) !important;
  background: var(--bg-2) !important;
}

/* ——— Formularfelder → leicht gerundet, Messing-Fokus ————————————— */
input, textarea, select {
  border-radius: var(--rad-input) !important;
  border-color: var(--line) !important;
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* ——— Linien statt Schatten: Schlagschatten projektweit entschärfen ————— */
[class*="shadow"] { box-shadow: none !important; }

/* ============================================================
   Single-CTA-Fokus (Phase 5 SC-3): alles ausblenden, was ablenkt.
   Buchungsseite zeigt genau EINE Aktion — kein cal-Branding, keine Navigation,
   keine weiteren Event-Types, keine Profil-Links.
   ============================================================ */
[data-testid="powered-by"],
.cal-powered-by,
a[href*="cal.com"],
a[href*="cal.diy"],
nav.booking-nav,
.event-types-list,
.profile-social-links {
  display: none !important;
}

/* ——— "Indem Sie fortfahren stimmen Sie ... cal.com zu" ausblenden ——— */
[data-testid="booking-terms"],
p:has(a[href*="terms"]),
p:has(a[href*="privacy"]) {
  display: none !important;
}

/* ——— Bestätigungsseite: "Bestätigen Sie Ihre Daten" → "Ihre Daten für den Termin" ——— */
[data-testid="confirm-book-button"] + * h2,
[data-testid="confirm-header"],
h2[data-testid="booking-confirm-title"] {
  visibility: hidden;
  position: relative;
}
[data-testid="confirm-book-button"] + * h2::before,
[data-testid="confirm-header"]::before,
h2[data-testid="booking-confirm-title"]::before {
  content: "Ihre Daten für den Termin";
  visibility: visible;
  position: absolute;
  left: 0;
}