/* Interaktion 2026-10-07: Feinschliff (Stufe 1) + Akzente (Stufe 2).
   Ruhezustand bleibt pixelgleich – hier stehen nur Hover/Fokus/Aktiv-Zustände und Einmal-Animationen.
   Zurücknehmen: diese Datei + js/interactions.js aus den HTML-Seiten austragen. */
:root{
  --ix-out:cubic-bezier(.23,1,.32,1);
  --ix-lift:cubic-bezier(.2,.8,.2,1);
  --ix-arrow:cubic-bezier(.22,.8,.25,1);
  --ix-in-out:cubic-bezier(.77,0,.175,1);
  --ix-spring:linear(0,.104,.319,.548,.742,.884,.974,1.023,1.043,1.044,1.037,1.027,1.017,1.009,1.003,1,.998,.998,.998,.999,.999,.999,1,1,1);
  --ix-accent:var(--purple);
}

/* ===================== Stufe 1 ===================== */

/* Interaktion 2026-10-07: Buttons – heben + Glow (Hover/Fokus), Druck beim Klicken (Rückmeldung „gedrückt“) */
.button,.hero-actions .direct-cta{transition:transform .3s var(--ix-lift),scale .16s var(--ix-out),background .3s,box-shadow .3s,border-color .3s,color .3s}
.button:focus-visible{transform:translateY(-3px)}
@media(hover:hover) and (pointer:fine){
  .primary:hover{box-shadow:0 7px 28px color-mix(in srgb,var(--ix-accent) 21%,transparent)}
  .secondary:hover,.hero-secondary:hover{border-color:color-mix(in srgb,var(--ix-accent) 45%,transparent);background:color-mix(in srgb,var(--ix-accent) 8%,transparent);color:var(--text)}
}
.primary:focus-visible{box-shadow:0 7px 28px color-mix(in srgb,var(--ix-accent) 21%,transparent)}
.button:active,.hero-actions .direct-cta:active{transform:translateY(0);scale:.97;box-shadow:0 2px 12px color-mix(in srgb,var(--ix-accent) 12%,transparent)}
.secondary:active,.hero-secondary:active{box-shadow:none}

/* Interaktion 2026-10-07: Touch – Hover-Anheben „klebt“ nach dem Tippen nicht mehr, Druck-Feedback bleibt */
@media(hover:none){
  .button:hover,.direct-cta:is(:hover,:focus-visible),.nav-chat:hover{transform:none}
  .package-option:hover .package-inner,.inline-funnel .package-option:hover .package-inner{transform:none}
  .button,.nav-chat,.package-option,.contact-options label,.consent-check,.process-dots button{touch-action:manipulation}
}

/* Interaktion 2026-10-07: Navbar-Kontakt-Buttons – Fokus wie Hover, kurzer Druck */
.nav-chat{transition:border-color .2s,background .2s,transform .3s var(--ix-lift),scale .16s var(--ix-out)}
.nav-wa:focus-visible{transform:translateY(-1px);border-color:#3ddc8499;background:#3ddc8414}
.nav-tg:focus-visible{transform:translateY(-1px);border-color:#43b3f199;background:#43b3f114}
.nav-chat:active{transform:none;scale:.96}

/* Interaktion 2026-10-07: Text-Links – Farbe/Unterstrich gleiten statt springen */
.header nav a,.footer-links a,.footer-business a,.text-link,.legal a,.consent-check a{transition:color .2s,border-color .2s,text-decoration-color .2s}
.header nav a:focus-visible,.footer-links a:focus-visible{color:#fff}
@media(hover:hover) and (pointer:fine){
  .text-link:not(.about .text-link):hover{border-bottom-color:currentColor}
  .legal a:hover,.consent-check a:hover{color:color-mix(in srgb,#d4bbff 70%,#fff)}
}
.text-link:not(.about .text-link):focus-visible{border-bottom-color:currentColor}
.about .text-link:focus-visible{color:#ffc2e6;border-bottom-color:#ffc2e6}

/* Interaktion 2026-10-07: Logo – die Ringe drehen sich kurz mit Feder (Rückmeldung „Startseite“) */
.logo .logo-dot{transition:rotate 600ms var(--ix-spring)}
@media(hover:hover) and (pointer:fine){a.logo:hover .logo-dot{rotate:-28deg}}
a.logo:focus-visible .logo-dot{rotate:-28deg}

/* Interaktion 2026-10-07: Preiskarten – leicht anheben, Rand nimmt den Akzent an (zeigt: diese Karte ist dran) */
.price-card{transition:translate .4s var(--ix-lift),border-color .25s,box-shadow .4s}
@media(hover:hover) and (pointer:fine){
  .price-card:hover{translate:0 -4px;border-color:color-mix(in srgb,var(--ix-accent) 35%,transparent);box-shadow:0 18px 40px #0005}
  .price-card.featured:hover{border-color:color-mix(in srgb,#a28bcc 80%,#fff)}
}
.price-card:focus-within{border-color:color-mix(in srgb,var(--ix-accent) 35%,transparent)}
.price-card.featured:focus-within{border-color:color-mix(in srgb,#a28bcc 80%,#fff)}

/* Interaktion 2026-10-07: Ablauf-Punkte – Hover zeigt, dass sie klickbar sind */
@media(hover:hover) and (pointer:fine){.process-dots button:not([aria-current]):hover:after{background:color-mix(in srgb,#3c3747 60%,#c5adff)}}
.process-dots button:not([aria-current]):focus-visible:after{background:color-mix(in srgb,#3c3747 60%,#c5adff)}

/* Interaktion 2026-10-07: Formular – Auswahl reagiert spürbar */
.package-inner{transition:transform .25s var(--ix-lift),scale .16s var(--ix-out),border-color .25s,background .25s,box-shadow .25s}
.package-option:active .package-inner{scale:.985}
.package-option input:checked+.package-inner .selection-check{animation:ix-pop 600ms var(--ix-spring)}
.selection-check{transition:background-color .2s,border-color .2s,color .2s}
.contact-options label>span{transition:background .2s,border-color .2s,color .2s,scale .16s var(--ix-out)}
@media(hover:hover) and (pointer:fine){.contact-options label:hover>span{border-color:color-mix(in srgb,#b49ad6 60%,transparent);color:#d8cce6}}
.contact-options label:active>span{scale:.97}
.contact-options input:checked+span{animation:ix-pop-soft 600ms var(--ix-spring)}
.consent-box{transition:background .2s,border-color .2s,color .2s}
.consent-check input:checked+.consent-box{animation:ix-pop 600ms var(--ix-spring)}
@keyframes ix-pop{from{scale:.75}}
@keyframes ix-pop-soft{from{scale:.95}}
/* Fehler: kurzes Schütteln, nur wenn das vorhandene Skript ein Feld als ungültig markiert */
.big-input[aria-invalid=true],.consent-check input[aria-invalid=true]+.consent-box{animation:ix-shake .3s var(--ix-out)}
@keyframes ix-shake{20%{translate:-4px 0}40%{translate:4px 0}60%{translate:-3px 0}80%{translate:2px 0}}
.funnel-back{transition:color .2s}
.funnel-back span{transition:transform .2s var(--ix-out)}
.funnel-back:focus-visible{color:#fff}.funnel-back:focus-visible span{transform:translateX(-3px)}


/* ===================== Stufe 2 ===================== */

/* Interaktion 2026-10-07: Spotlight auf den Preiskarten – ein weiches Licht folgt der Maus (lenkt den Blick auf die Karte unter dem Zeiger) */
.ix-spot{isolation:isolate}
.ix-spot::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--ix-accent) 13%,transparent),transparent 70%);
  opacity:0;transition:opacity .4s var(--ix-out)}
@media(hover:hover) and (pointer:fine){.ix-spot:hover::after{opacity:1}}

/* Interaktion 2026-10-07: Text-Roll in der Navigation – Wort rollt nach oben, Kopie rollt nach */
.ix-roll{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.1em;margin-block:-.1em}
.ix-roll__in{display:inline-block;position:relative;transition:translate .45s var(--ix-out)}
.ix-roll__copy{position:absolute;left:0;top:calc(100% + .1em)}
@media(hover:hover) and (pointer:fine){.header nav a:hover .ix-roll__in{translate:0 calc(-100% - .1em)}}
.header nav a:focus-visible .ix-roll__in{translate:0 calc(-100% - .1em)}

/* Interaktion 2026-10-07: Preise zählen beim ersten Sichtbarwerden hoch (Breite bleibt durch die unsichtbare echte Zahl reserviert) */
.ix-count{position:relative}
.ix-count.is-counting{color:transparent}
.ix-count__ghost{position:absolute;inset:0;color:var(--text);white-space:nowrap;text-align:right}

/* Interaktion 2026-10-07: Überschriften – Zeilen gleiten nacheinander unscharf→scharf herein (nur unterhalb des ersten Bildschirms) */
.ix-js .ix-line{display:inline-block}
.ix-js [data-ix-lines]:not(.is-visible) .ix-line{opacity:0;translate:0 .3em;filter:blur(6px)}
.ix-js [data-ix-lines].is-visible .ix-line{transition:opacity .6s var(--ix-out),translate .6s var(--ix-out),filter .6s var(--ix-out);transition-delay:calc(var(--i) * 90ms)}

/* Interaktion 2026-10-07: Preiskarten blenden gestaffelt ein (Muster wie die Portfolio-Karten der Seite) */
.ix-js .ix-reveal:not(.is-visible){opacity:.4;translate:0 22px}
.ix-js .ix-reveal.is-visible{animation:ix-reveal .75s var(--ix-out) backwards}
.ix-js .ix-reveal.is-visible:nth-child(2){animation-delay:.08s}
.ix-js .ix-reveal.is-visible:nth-child(3){animation-delay:.16s}
@keyframes ix-reveal{from{opacity:.4;translate:0 22px}}

/* ===================== Bewegung reduzieren ===================== */
/* Die Seite schaltet global alle Transitions/Animationen ab. Zusätzlich: keine Positionswechsel bei Hover/Fokus/Druck,
   kein Spotlight, Startzustände sofort sichtbar. Farb-/Randwechsel bleiben als Zustandsanzeige. */
@media(prefers-reduced-motion:reduce){
  .button:hover,.button:focus-visible,.button:active,.hero-actions .direct-cta:active,.nav-chat:hover,.nav-chat:focus-visible,.nav-chat:active,
  .price-card:hover,.package-option:active .package-inner,.contact-options label:active>span{transform:none;translate:none;scale:none}
  .package-option:hover .package-inner,.inline-funnel .package-option:hover .package-inner{transform:none}
  a.logo .logo-dot{rotate:none!important}
  .header nav a .ix-roll__in{translate:none!important}
  .ix-spot::after{display:none}
  .ix-js [data-ix-lines] .ix-line,.ix-js .ix-reveal{opacity:1!important;translate:none!important;filter:none!important}
}
@media(prefers-contrast:more){.ix-spot::after{display:none}}