/* ==========================================================================
   AKM · Motion-Layer (Frontend, ohne Admin)
   --------------------------------------------------------------------------
   Wird ALS LETZTES geladen und überschreibt bewusst Teile von base/sections/
   frames: Buttons, Formularfelder, Karten, Register-Zeilen und Reveals bekommen
   eine eigene Handschrift statt der generischen Pill-/Box-Optik.
   Regeln: nur Tokens aus tokens.css · Hover nur bei echten Zeigergeräten
   (@media (hover:hover)) · Touch bekommt :active-Feedback · alles unter
   prefers-reduced-motion abschaltbar.
   ========================================================================== */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.34,1.36,.64,1);
  --dur-tap:.18s;
}

/* ==========================================================================
   1 · BUTTONS — technische Kante statt Pill, Akzent-Sweep statt Glow-Blase
   ========================================================================== */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:10px;
  padding:.9em 1.5em;
  letter-spacing:.015em;
  transform:translate3d(0,0,0);
  transition:color .35s var(--ease-out-expo),
             border-color .35s var(--ease-out-expo),
             box-shadow .45s var(--ease-out-expo),
             transform .45s var(--ease-spring);
  -webkit-tap-highlight-color:transparent;
}

/* Akzent-Sweep: fährt aus der linken Kante ein, leicht geschert */
.btn:not(.cta__channel)::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  background:linear-gradient(100deg, var(--accent-deep), var(--accent) 52%, var(--accent-bright));
  transform-origin:left center;
  transform:translate3d(-128%,0,0) skewX(-9deg) scaleX(1.2);
  transition:transform .55s var(--ease-out-expo);
}
/* Zeiger-Licht — folgt der Maus (--mx/--my aus motion.js) */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),
             var(--accent-faint), transparent 70%);
  opacity:0;
  transition:opacity .35s var(--ease);
  pointer-events:none;
}

.btn--primary{
  color:var(--accent-bright);
  border-color:var(--accent-deep);
  background:linear-gradient(var(--accent-faint), rgba(95,212,255,.03));
}
.btn--ghost{
  border-color:var(--hairline-strong);
  background:linear-gradient(rgba(255,255,255,.02), transparent);
}
/* Ghost-Sweep bleibt gedeckt: dunkle Fläche + Akzent-Schrift */
.btn--ghost::before{
  background:linear-gradient(100deg, var(--bg-elev-2), #16202c);
}

@media (hover:hover){
  .btn:hover{ transform:translate3d(0,-2px,0); }
  .btn:hover::after{ opacity:1; }
  .btn:not(.cta__channel):hover::before{ transform:translate3d(-2%,0,0) skewX(-9deg) scaleX(1.2); }

  .btn--primary:hover{
    color:var(--bg);
    border-color:var(--accent-bright);
    box-shadow:0 14px 40px -18px var(--accent-glow);
  }
  .btn--ghost:hover{
    color:var(--accent-bright);
    border-color:var(--accent-deep);
    box-shadow:0 14px 34px -22px var(--accent-glow);
  }
}
.btn:active{
  transform:translate3d(0,0,0) scale(.972);
  transition-duration:var(--dur-tap);
}

/* Pfeil (motion.js hängt ihn an primäre Buttons) */
.btn__arrow{
  display:inline-block;
  margin-left:-.15em;
  transform:translate3d(0,0,0);
  transition:transform .45s var(--ease-spring), opacity .3s var(--ease);
  opacity:.75;
}
@media (hover:hover){
  .btn:hover .btn__arrow{ transform:translate3d(.28em,0,0); opacity:1; }
}

/* Tap-/Klick-Welle (motion.js setzt .btn-ripple) */
.btn-ripple{
  position:absolute;
  z-index:-1;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(95,212,255,.55), transparent 68%);
  pointer-events:none;
  animation:akm-ripple .62s var(--ease-out-expo) forwards;
}
@keyframes akm-ripple{
  from{ transform:scale(.2); opacity:.85; }
  to{ transform:scale(16); opacity:0; }
}

/* Kanal-Buttons (zweizeilig): kein Fill, dafür Scan-Linie über der Oberkante */
.cta__channel{ border-radius:12px; }
.cta__channel::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0);
  transition:transform .5s var(--ease-out-expo);
}
@media (hover:hover){
  .cta__channel:hover::before{ transform:scaleX(1); }
  .cta__channel:hover .cta__channel-label{ color:var(--accent); }
}
.cta__channel--pending{ pointer-events:none; }

/* Sprach-Toggle + Burger bekommen dieselbe Kante */
.lang-toggle{ border-radius:9px; transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .35s var(--ease-spring); }
.lang-toggle:active{ transform:scale(.94); }
.site-nav__burger{ transition:border-color .3s var(--ease), transform .35s var(--ease-spring); }
.site-nav__burger:active{ transform:scale(.94); }

/* ==========================================================================
   2 · FORMULARFELDER — Linie statt Kasten, Fokus zeichnet sich ein
   ========================================================================== */
.field{ position:relative; padding-bottom:2px; }
.field__label{
  transform-origin:left center;
  transition:color .35s var(--ease-out-expo), letter-spacing .45s var(--ease-out-expo), transform .35s var(--ease-out-expo);
}
.field:focus-within .field__label{
  color:var(--accent);
  letter-spacing:.22em;
  transform:translate3d(0,-1px,0);
}

.field__input{
  appearance:none;
  -webkit-appearance:none;
  padding:.7em .15em .62em;
  border:0;
  border-bottom:1px solid var(--hairline-strong);
  border-radius:3px 3px 0 0;
  background:linear-gradient(to top, rgba(95,212,255,.045), transparent 72%);
  color:var(--text);
  font-family:var(--font-text);
  font-size:1.02rem;          /* ≥16px: verhindert iOS-Zoom beim Fokus */
  caret-color:var(--accent);
  transition:background .4s var(--ease), border-color .4s var(--ease), color .3s var(--ease);
}
.field__input:hover{ border-bottom-color:rgba(255,255,255,.22); }
.field__input:focus{
  outline:none;
  border-bottom-color:transparent;
  background:linear-gradient(to top, rgba(95,212,255,.10), transparent 78%);
}
/* Die eigentliche Fokus-Linie: zeichnet sich von links nach rechts */
.field::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:1px;
  height:2px;
  background:linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, var(--accent-bright));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-out-expo), opacity .3s var(--ease);
  opacity:0;
  pointer-events:none;
}
.field:focus-within::after{ transform:scaleX(1); opacity:1; }
/* Weicher Schein unter dem aktiven Feld */
.field::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:14px;
  background:radial-gradient(60% 100% at 50% 0%, var(--accent-glow), transparent 70%);
  filter:blur(6px);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.field:focus-within::before{ opacity:.35; }

.field__input--area{
  min-height:8em;
  line-height:var(--lh-normal);
  resize:vertical;
}
/* Select: eigene Chevron-Marke, kein System-Widget */
select.field__input{
  padding-right:2em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235FD4FF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(to top, rgba(95,212,255,.045), transparent 72%);
  background-repeat:no-repeat, no-repeat;
  background-position:right .25em center, 0 0;
  background-size:12px 8px, auto;
  cursor:pointer;
}
select.field__input:focus{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237EE0FF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(to top, rgba(95,212,255,.10), transparent 78%);
}
select.field__input option{ background:var(--bg-elev); color:var(--text); }

/* Autofill nicht weiß überschreiben lassen */
.field__input:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px var(--bg-elev) inset;
  caret-color:var(--accent);
}

/* Gesendet-Zustand: Hinweis fährt kurz ein */
.form.is-sent .form__hint{ animation:akm-hint-in .5s var(--ease-out-expo) both; }
@keyframes akm-hint-in{
  from{ opacity:0; transform:translate3d(0,6px,0); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   3 · KARTEN & FLÄCHEN — Zeigerlicht, Scan-Kante, ruhiges Anheben
   ========================================================================== */
.pg-card,
.frame,
.pg-split > *,
.founder__point{
  position:relative;
  isolation:isolate;
}
.pg-card{
  overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease),
             transform .55s var(--ease-spring), box-shadow .55s var(--ease-out-expo);
}
.pg-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
             rgba(95,212,255,.10), transparent 68%);
  opacity:0;
  transition:opacity .45s var(--ease);
  pointer-events:none;
}
.pg-card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .6s var(--ease-out-expo);
}
@media (hover:hover){
  .pg-card:hover{
    transform:translate3d(0,-5px,0);
    box-shadow:0 26px 60px -34px rgba(0,0,0,.9);
  }
  .pg-card:hover::before{ opacity:1; }
  .pg-card:hover::after{ transform:scaleX(1); }
  .pg-card:hover h3{ color:var(--accent-bright); }
}
.pg-card h3{ transition:color .35s var(--ease); }
.pg-card:active{ transform:scale(.995); }

.frame{ transition:transform .55s var(--ease-spring), border-color .45s var(--ease), box-shadow .55s var(--ease-out-expo); }

/* Register-Zeilen (Standbeine / Referenzen): Fläche wischt von links auf */
.ledger__row{ position:relative; isolation:isolate; overflow:hidden; }
.ledger__row::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg, var(--accent-faint), rgba(95,212,255,.02) 55%, transparent);
  transform:translate3d(-100%,0,0);
  transition:transform .6s var(--ease-out-expo);
}
.ledger__go{ transition:transform .5s var(--ease-spring), color .35s var(--ease); }
@media (hover:hover){
  .ledger__row:hover::before{ transform:translate3d(0,0,0); }
  .ledger__row:hover .ledger__go{ transform:translate3d(.4em,0,0); color:var(--accent-bright); }
}
.ledger__row:active::before{ transform:translate3d(0,0,0); }

/* Auswahl-Schalter / Tabs (Social-Media-Seite): Zustand wird sichtbar bewegt */
.sm-switch__opt,
.sm-tab{ transition:color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease-spring); }
.sm-switch__opt:active,
.sm-tab:active{ transform:scale(.985); }
@media (hover:hover){
  .sm-switch__opt:hover,
  .sm-tab:hover{ transform:translate3d(0,-2px,0); }
}

/* Abschluss-CTA-Block: sehr langsames Atmen des Scheins, kaum merklich */
.pg-cta{ position:relative; overflow:hidden; }
.pg-cta::after{
  content:"";
  position:absolute;
  left:50%; bottom:-40%;
  width:min(120%, 900px);
  aspect-ratio:1;
  translate:-50% 0;
  background:radial-gradient(circle, var(--accent-faint), transparent 62%);
  pointer-events:none;
  animation:akm-breathe 9s var(--ease) infinite;
}
@keyframes akm-breathe{
  0%,100%{ opacity:.5; scale:.94; }
  50%    { opacity:.95; scale:1.04; }
}

/* ==========================================================================
   4 · REVEALS — Maske + zarte Unschärfe statt reines Einblenden
   ========================================================================== */
[data-reveal]{
  transform:translate3d(0,30px,0);
  filter:blur(6px);
  transition:opacity .8s var(--ease-out-expo),
             transform .9s var(--ease-out-expo),
             filter .8s var(--ease-out-expo),
             clip-path .9s var(--ease-out-expo);
}
[data-reveal="left"]{ transform:translate3d(-36px,0,0); }
[data-reveal="right"]{ transform:translate3d(36px,0,0); }
[data-reveal="scale"]{ transform:scale(.95); }
[data-reveal].is-revealed{ filter:blur(0); }

/* Überschriften kommen unter einer Kante hervor */
h1[data-reveal], h2[data-reveal],
.hero__title[data-reveal], .cta__title[data-reveal],
.services__title[data-reveal], .process__title[data-reveal],
.proof__title[data-reveal], .founder__title[data-reveal]{
  clip-path:inset(0 0 60% 0);
  transform:translate3d(0,14px,0);
  filter:blur(4px);
}
h1[data-reveal].is-revealed, h2[data-reveal].is-revealed,
.hero__title[data-reveal].is-revealed, .cta__title[data-reveal].is-revealed,
.services__title[data-reveal].is-revealed, .process__title[data-reveal].is-revealed,
.proof__title[data-reveal].is-revealed, .founder__title[data-reveal].is-revealed{
  clip-path:inset(-20% -20% -20% -20%);
  filter:blur(0);
}

/* Kennzahlen: die Ziffern schieben sich hoch */
.stats__num{ transition:color .4s var(--ease); }

/* ==========================================================================
   5 · SEITENFORTSCHRITT + NAV-DETAILS
   ========================================================================== */
.akm-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:calc(var(--z-nav) + 1);
  background:linear-gradient(90deg, var(--accent-deep), var(--accent) 55%, var(--accent-bright));
  transform:scaleX(var(--p,0));
  transform-origin:left;
  opacity:.85;
  pointer-events:none;
  will-change:transform;
}
.site-nav.is-splash ~ .akm-progress,
body.is-splash .akm-progress{ opacity:0; }

/* Aktiver Nav-Link: Knoten pulsiert leise mit */
.site-nav__links a.is-active::after{ animation:akm-line 3.4s var(--ease) infinite; }
@keyframes akm-line{
  0%,100%{ opacity:1; }
  50%    { opacity:.45; }
}

/* Mobiles Menü: Einträge laufen gestaffelt ein */
@media (max-width:820px){
  .site-nav__links > *{
    opacity:0;
    transform:translate3d(18px,0,0);
    transition:opacity .4s var(--ease-out-expo), transform .5s var(--ease-out-expo);
  }
  .site-nav.is-open .site-nav__links > *{ opacity:1; transform:none; }
  .site-nav.is-open .site-nav__links > *:nth-child(1){ transition-delay:.10s; }
  .site-nav.is-open .site-nav__links > *:nth-child(2){ transition-delay:.16s; }
  .site-nav.is-open .site-nav__links > *:nth-child(3){ transition-delay:.22s; }
  .site-nav.is-open .site-nav__links > *:nth-child(4){ transition-delay:.28s; }
  .site-nav.is-open .site-nav__links > *:nth-child(5){ transition-delay:.34s; }
  .site-nav.is-open .site-nav__links > *:nth-child(6){ transition-delay:.40s; }

  /* Touch: Buttons volle Breite lesbar, Trefferfläche ≥44px */
  .btn{ min-height:48px; }
  .field__input{ min-height:46px; }
}

/* Textlink-Unterstrich etwas lebendiger */
.link{ transition:background-size .5s var(--ease-out-expo), color .3s var(--ease); }

/* ==========================================================================
   6 · reduced motion — alles ruhig stellen
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .btn:not(.cta__channel)::before,
  .btn::after,
  .pg-card::before,
  .pg-card::after,
  .ledger__row::before,
  .pg-cta::after,
  .field::before{ display:none; }
  .btn:hover,
  .pg-card:hover,
  .sm-switch__opt:hover,
  .sm-tab:hover{ transform:none; }
  [data-reveal]{ filter:none !important; clip-path:none !important; }
  .akm-progress{ display:none; }
  @media (max-width:820px){
    .site-nav__links > *{ opacity:1; transform:none; }
  }
}


/* ==========================================================================
   2026-07-28 · Kontaktkarte — klar umrandete Felder statt Unterstrich-Optik.
   Die Flourish-Overlays (.field::before/::after, Verlauf-Hintergründe) sind
   in der Karte abgeschaltet: sie erzeugten Artefakte über dem Select.
   ========================================================================== */
.form{ gap:var(--sp-6); }
.form .field{ gap:var(--sp-2); }
.form .field__label{ letter-spacing:var(--tracking-eyebrow, .16em); }
.form .field:focus-within .field__label{ letter-spacing:var(--tracking-eyebrow, .16em); transform:none; }
.form .field::before,
.form .field::after{ display:none; content:none; }
.form .field__input{
  padding:.78em .9em;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-sm);
  background-color:var(--bg-elev-2);
  background-image:none;
  box-shadow:none;
}
.form select.field__input{
  padding-right:2.6em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235FD4FF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95em center;
  background-size:12px 8px;
}
.form .field__input:hover{ border-color:rgba(255,255,255,.2); }
.form .field__input:focus{
  border-color:var(--accent-deep);
  background-color:var(--bg-elev);
  box-shadow:0 0 0 3px rgba(95,212,255,.12);
}
.form .field__input::placeholder{ color:var(--text-dim); }
.form__hint{ margin-top:var(--sp-2); }