/* Betrieb Digital – globale Styles
   Layout und Tokens stehen 1:1 aus dem Design als Inline-Styles im HTML.
   Hier: Schriften, Basis, responsive Umschaltungen, Animationszustände. */

/* Schriften lokal (Variable Fonts, latin) – kein Drittanbieter-CDN */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/archivo-var.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-var.woff2') format('woff2'); }

html, body { margin: 0; padding: 0; background: #FFFFFF; scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
* { box-sizing: border-box; }
a { color: #1A2C52; text-decoration: none; }
a:hover { color: #2F6BE6; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
[data-reel-track]::-webkit-scrollbar { display: none; }
[id] { scroll-margin-top: 64px; }
#termin { scroll-margin-top: 96px; }
/* Nur für Bildschirmleser sichtbar */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid #2F6BE6; outline-offset: 3px; border-radius: 4px; }
#kontakt :focus-visible, #anfragen :focus-visible { outline-color: #7FA6F5; }

/* Rechtliches: Linkfarben wie im Design */
.legal a { color: #2F6BE6; }
.legal a:hover { color: #1A2C52; }

/* Header-Navigation unter 1080px ausblenden */
@media (max-width: 1079.98px) { .site-nav { display: none !important; } }

/* Hero: schwebende Karte rückt mobil ins Bild */
/* Mobil: Karte unter das Foto schieben (leicht überlappend), damit sie das Bild nicht verdeckt */
@media (max-width: 759.98px) { .hero-card { position: relative !important; left: auto !important; bottom: auto !important; margin: -56px auto 0; } }

/* Kalender: sobald die Karten untereinander stehen, sitzt der Pfeil im Zwischenraum und zeigt nach unten */
@media (max-width: 1087.98px) {
  .plan-arrow { position: static !important; transform: rotate(90deg) !important; justify-self: center; margin: -16px 0; }
}

.cta-lift:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(47,107,230,0.3); }

/* Bild-Slots: Platzhalter liegt unter dem Bild und bleibt sichtbar, solange die Datei fehlt */
.slot { position: absolute; inset: 0; }
.slot-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 14px; font-weight: 600; color: #8391AB; }
.slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-avatar { position: static; }
.slot-img.is-missing { display: none; }

/* Reels */
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.reel-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; color: #A9B8D4; font-size: 12px; font-weight: 600; line-height: 1.4; }
.reel-spinner { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.16); border-top-color: rgba(255,255,255,0.7); animation: reel-spin .9s linear infinite; }
.is-error > .reel-ph .reel-spinner { display: none; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
.reel-snd { position: absolute; right: 10px; bottom: 36px; z-index: 2; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 999px; background: rgba(10,19,38,0.7); color: #FFFFFF; font: 600 11px Manrope, sans-serif; cursor: pointer; }
.has-video > .reel-video { display: block; }
.has-video > .reel-ph { display: none; }
.has-video > .reel-snd { display: flex; }
.reel-video { cursor: pointer; }
.reel-play { position: absolute; left: 50%; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 60px; height: 60px; margin: -30px 0 0 -30px; padding: 0 0 0 3px; border: none; border-radius: 999px; background: rgba(10,19,38,0.7); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.35); cursor: pointer; transition: transform .2s, background .2s; }
.reel-play:hover { background: rgba(47,107,230,0.92); transform: scale(1.06); }
.has-video:not(.is-playing) > .reel-play { display: flex; }

/* Einblenden beim Scrollen (Texte, Karten, Bilder). main.js vergibt .reveal und entfernt es nach dem Einblenden wieder. */
.reveal-on:not(.reveal-ready) [data-section="Hero"] > div { opacity: 0; }
.reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease var(--rd, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--rd, 0ms); }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* Animation A – Kalender (Zustand per Klasse .in auf [data-plan]) */
.plan-line { width: 100%; }
/* Problem-Tabelle: mobil nur Ortstermin und Ergebnis, damit nichts seitlich gescrollt werden muss */
.pt { display: grid; grid-template-columns: 84px repeat(4, minmax(78px, 1fr)); min-width: 440px; }
@media (max-width: 559.98px) { .pt { grid-template-columns: 80px repeat(2, minmax(0, 1fr)); min-width: 0; } .pt .pt-mid { display: none; } }
.js [data-plan]:not(.in) .plan-cell { opacity: 0; transform: translateY(8px) scale(.92); }
.js [data-plan]:not(.in) .plan-line { width: 0; }

/* Animation B – Benachrichtigungen */
.js .msg:not(.on) { opacity: 0; transform: translateY(-10px) scale(.96); }

/* CTA-Logo */
@keyframes bd-board-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bd-clip-drop { 0% { opacity: 0; transform: translateY(-16px); } 70% { opacity: 1; transform: translateY(1.5px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bd-letters-in { 0% { opacity: 0; transform: translateY(7px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bd-badge-pop { 0% { opacity: 0; transform: scale(.2); } 62% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bd-plus-draw { 0% { stroke-dashoffset: 20; } 100% { stroke-dashoffset: 0; } }
.cta-mark { position: relative; width: 90px; height: 90px; flex: none; }
.cta-board { width: 90px; height: 90px; border-radius: 16px; background: linear-gradient(160deg,#1A2C52,#101D38); box-shadow: 0 18px 40px rgba(15,27,51,0.26); display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; animation: bd-board-in .55s cubic-bezier(.16,.84,.36,1) 0s both; }
.cta-sheet { animation: bd-letters-in .4s cubic-bezier(.16,.84,.36,1) .2s both; }
.cta-clip { animation: bd-clip-drop .42s cubic-bezier(.16,.84,.36,1) .32s both; }
.cta-letters { animation: bd-letters-in .4s cubic-bezier(.16,.84,.36,1) .54s both; }
.cta-badge { position: absolute; top: -6px; right: -7px; width: 28px; height: 28px; border-radius: 999px; background: #2F6BE6; border: 3px solid #F4F7FB; display: flex; align-items: center; justify-content: center; transform-origin: 50% 50%; animation: bd-badge-pop .46s cubic-bezier(.16,.84,.36,1) .88s both; }
.cta-plus { stroke-dasharray: 20; animation: bd-plus-draw .34s cubic-bezier(.16,.84,.36,1) 1.12s both; }

/* Calendly */
.calendly-frame { width: 100%; height: 700px; border: 0; border-radius: 12px; display: block; }

/* Reduzierte Bewegung: Endzustände statisch zeigen */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .plan-cell, .plan-line, .msg, .cta-lift { transition: none !important; }
  .reel-spinner { animation: none; }
  .cta-board, .cta-sheet, .cta-clip, .cta-letters, .cta-badge, .cta-plus { animation: none; }
}