/* Wow-Momente (mfmotion, 22.10.2026) */

/* 1. Startbild mit Tiefe */
.region { position: relative; }
.wow-tiefe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; pointer-events: none; }

.region.wow-tiefe-an::after { display: none; }

/* 2. Herzschlag-Linie am Rand */
.wow-linie { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
/* Ruhig: Farben der Seite (Hellblau der Schritt-Linien, Türkis vom Slogan), dünn, ohne Leuchten */
.wow-linie-spur { fill: none; stroke: #e2ebf5; stroke-width: 2; stroke-linejoin: round; }
.wow-linie-weg { fill: none; stroke: #5e93cf; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wow-linie-punkt { fill: #fff; stroke: #58becf; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.wow-schlag .wow-linie-punkt { animation: wow-poch .9s cubic-bezier(.23, 1, .32, 1) 1; fill: #58becf; }
@keyframes wow-poch { 0%, 100% { transform: scale(1) } 20% { transform: scale(1.5) } 40% { transform: scale(1.05) } 60% { transform: scale(1.3) } }

/* 3. Rund um die Uhr: Kontaktband von Morgen bis Nacht */
/* Tag-Verlauf fest im Band, Nacht-Verlauf als Ebene darüber: Scrollen ändert nur deren opacity (keine Neuberechnung, kein Neumalen) */
.contact-band.wow-tag { position: relative; overflow: hidden; background: linear-gradient(180deg, #2563b0 0%, #3b7fd0 100%); }
.contact-band.wow-tag > .wrap { position: relative; z-index: 1; }
.wow-himmel { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wow-nacht { position: absolute; inset: 0; background: linear-gradient(180deg, #0a1a33 0%, #14335c 100%); opacity: 0; will-change: opacity; }
.wow-sterne { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.wow-sterne i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: wow-funkeln 2.4s ease-in-out infinite; }
@keyframes wow-funkeln { 50% { opacity: .25 } }
.wow-uhr { position: absolute; right: 5%; top: 26px; text-align: right; color: #fff; }
.wow-uhr-zeit { display: block; font-size: clamp(40px, 5vw, 68px); font-weight: 700; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; opacity: .92; }
.wow-uhr-text { display: block; font-size: 16px; font-weight: 600; opacity: .9; margin-top: 8px; }
@media (max-width: 800px) {
  /* Handy: Uhr steht über dem Inhalt, Inhalt rückt darunter */
  .wow-uhr { right: auto; left: 24px; top: 22px; text-align: left; }
  .wow-uhr-zeit { font-size: 44px; }
  .wow-uhr-text { font-size: 13px; margin-top: 4px; }
  .contact-band.wow-tag > .wrap { padding-top: 78px; }
}

/* 4. Sichtbarere Bewegung: weiter Weg, leichtes Wachsen, etwas länger */
.kx .kx-r { transition: opacity .75s var(--ease), transform .85s var(--ease); }
.kx :is(.home-intro h1,.home-intro .prose,.target,.contact-band h2,.contact-band>.wrap>p,.contact-card,.section-heading,.preview-person,.route-links,.hero-copy>*,.kx-visual,.connection-strip li,.quick-facts li,.section-links,.editorial-split>*,.steps li,.benefit,.faq details,.team-card,.gvp-seal,.section>h2,.section>.prose,.section>p):not(.kx-in) { opacity: 0; transform: translateY(42px) scale(.97); }
.kx .kx-visual.kx-r:not(.kx-in) { transform: translateY(50px) scale(.92) rotate(-1.5deg); }
.kx-w > span { transition-duration: .8s; }

/* 5. Namenskarten mit Initialen, bis echte Fotos da sind (Startseite und Über Kelbert) */
.portrait-initialen, .team-initialen { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, #e3f6f5, #c7dcef); }
.team-initialen { height: 192px; padding: 0; }
.initialen { position: relative; z-index: 1; width: 124px; height: 124px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #58becf; box-shadow: 0 10px 26px #15365720; color: #153657; font-size: 42px; font-weight: 650; letter-spacing: 1px; }
.initialen-ekg { position: absolute; left: 0; top: 50%; width: 100%; height: 40px; transform: translateY(-50%); }
.initialen-ekg path { fill: none; stroke: #58becf; stroke-width: 2; stroke-linejoin: round; opacity: .55; vector-effect: non-scaling-stroke; }

/* 6. Weiche Übergänge zwischen den Seiten, Kopf bleibt stehen */
@view-transition { navigation: auto; }
.site-header { view-transition-name: kopf; }
::view-transition-old(root) { animation: wow-raus .22s cubic-bezier(.23, 1, .32, 1) both; }
::view-transition-new(root) { animation: wow-rein .38s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes wow-raus { to { opacity: 0; transform: translateY(-8px); } }
@keyframes wow-rein { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* 7. Karte Berlin mit Standort Hellersdorf */
.anfahrt-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.anfahrt-karte { margin: 0; padding: 18px; border-radius: 16px; background: linear-gradient(160deg, #f4f9fc, #eaf6fa); border: 1px solid #d8e7ef; }
.anfahrt-karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.karte-berlin { fill: #ffffff; stroke: #96bce2; stroke-width: 2; stroke-linejoin: round; }
.karte-weg { fill: none; stroke: #5e93cf; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.karte-mitte circle { fill: #96bce2; }
.anfahrt-karte text { font-family: inherit; font-size: 24px; font-weight: 600; fill: #153657; text-anchor: middle; }
.anfahrt-karte text.karte-klein, .anfahrt-karte .karte-mitte text { font-size: 21px; font-weight: 500; fill: #4c6378; }
@media (max-width: 800px) {
  .anfahrt-karte text { font-size: 38px; }
  .anfahrt-karte text.karte-klein, .anfahrt-karte .karte-mitte text { font-size: 33px; }
}
/* Punkt 13: Brandenburg als blasse Fläche rund um Berlin */
.karte-land { fill: #e3edf6; }
.anfahrt-karte text.karte-land-name { fill: #6d86a0; font-weight: 600; letter-spacing: 1px; text-anchor: start; }
.anfahrt-karte text.karte-land-name[text-anchor="end"] { text-anchor: end; }
.anfahrt-karte text.karte-stadt { fill: #96a9bd; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.karte-punkt { fill: #58becf; stroke: #fff; stroke-width: 3; }
.karte-ring { fill: none; stroke: #58becf; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.karte-an .karte-weg { transition: stroke-dashoffset 1.6s cubic-bezier(.77, 0, .175, 1) .2s; stroke-dashoffset: 0; }
.karte-an .karte-ring { animation: wow-ring 2s cubic-bezier(.23, 1, .32, 1) 1.6s 4; }
.karte-an .karte-ring-2 { animation-delay: 2.1s; }
@keyframes wow-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@media (max-width: 800px) { .anfahrt-grid { grid-template-columns: 1fr; } }

/* 8. Rückmeldung: Knöpfe geben beim Drücken nach, Kontaktkarten heben sich, Telefonnummer reagiert */
.button:active { transform: scale(.97); transition-duration: .12s; }
.contact-card { transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s cubic-bezier(.23, 1, .32, 1), background-color .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .contact-card:hover { transform: translateY(-4px); background: #24476c; box-shadow: 0 18px 36px #0a1a3340; }
  .phone { transition: color .2s ease; }
  .phone:hover { color: #83d9ef; }
  .contact-card:hover .phone { animation: wow-klingeln .5s ease 1; }
}
@keyframes wow-klingeln { 0%, 100% { transform: none; } 25% { transform: translateX(-2px) rotate(-1deg); } 50% { transform: translateX(2px) rotate(1deg); } 75% { transform: translateX(-1px); } }
@media (prefers-reduced-motion: reduce) { .contact-card:hover, .contact-card:hover .phone, .button:active { transform: none; animation: none; } }
@media (prefers-reduced-motion: reduce) { .karte-weg { stroke-dashoffset: 0; } }
/* Über Kelbert: Initialen-Karten wie Stefans Fotokarte (weiß, Kreis 142 px) */
.team-initialen { background: #fff; border-bottom: 1px solid var(--line); }
.team-initialen .initialen { width: 142px; height: 142px; font-size: 46px; box-shadow: 0 8px 18px #15365722; }

/* Punkt 12: Fotos im selben runden Rahmen wie die Initialen */
.portrait-photo { display: grid; place-items: center; background: linear-gradient(145deg, #e3f6f5, #c7dcef); }
.portrait-photo img { position: relative; z-index: 1; width: 124px; height: 124px; border-radius: 50%; border: 3px solid #58becf; box-shadow: 0 10px 26px #15365720; object-fit: cover; object-position: center 30%; }
.team-photo.team-initialen img { position: relative; z-index: 1; border: 3px solid #58becf; }

/* Punkt 14: Fragen in Gruppen */
.faq-gruppe { margin: 36px 0 12px; font-size: 22px; color: var(--navy); }
.faq-section > h2 + .faq-gruppe { margin-top: 0; }

/* Kelberts Knopf-Hover (site.css) am Handy ohne Sprung nach oben */
@media (hover: none) { .button:hover { transform: none; } }

/* 9. Knöpfe direkt unter der Hauptüberschrift der Startseite */
.intro-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.intro-knoepfe .button { margin: 0; }
@media (max-width: 480px) { .intro-knoepfe .button { flex: 1 1 100%; } }

/* 10. Hinweis bei den noch gesperrten Formularen */
.form-hinweis { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid #58becf; border-radius: 8px; background: #eaf6fa; font-size: 16px; line-height: 1.5; }
.form-hinweis a { font-weight: 600; white-space: nowrap; }

/* Druck: alle Inhalte sichtbar, bewegte Ebenen weg */
@media print {
  .kx *, .kx-w > span { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .wow-linie, .wow-tiefe, .wow-himmel, .skip, .menu-toggle { display: none !important; }
  .karte-weg { stroke-dashoffset: 0 !important; }
  .contact-band.wow-tag > .wrap { padding-top: 0; }
}