/* ============================================================
   kw-motion.css v2 — Art-Direction-, Motion- & Button-Schicht
   Verbindliche Referenz: kleewein-hero-artdirection-v2.html
   Patterns nutzen nur Klassen; alles Zentrale liegt hier + theme.json.
   Token-Slugs: primary, primary-dark, accent, surface-tint, surface-warm,
   ink, muted, base  ·  custom.radius (Buttons/Karten)
   ============================================================ */

/* ---------- Zentrales Button-System (gilt websiteweit) ---------- */
.wp-block-button__link{
  font-family:var(--wp--preset--font-family--display, monospace);
  font-weight:700;
  border-radius:var(--wp--custom--button-radius, 999px);
  padding:1rem 1.9rem;
  transition:transform .18s ease, box-shadow .18s ease,
             background-color .18s ease, color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover{ transform:translateY(-3px); }
/* Primär (gefüllt, accent) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
  background-color:var(--wp--custom--accent-hover, var(--wp--preset--color--ink));
  box-shadow:0 14px 30px color-mix(in srgb, var(--wp--preset--color--accent) 40%, transparent);
}
/* Sekundär (Outline) */
.is-style-outline .wp-block-button__link{ border:2px solid currentColor; }
.is-style-outline .wp-block-button__link:hover{
  background-color:var(--wp--preset--color--ink);
  color:var(--wp--preset--color--primary);
  border-color:var(--wp--preset--color--ink);
  box-shadow:0 14px 30px color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent);
}
/* Textlinks (Hover zentral) */
.entry-content a:not(.wp-block-button__link){
  color:var(--wp--preset--color--accent);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:color .15s ease;
}
.entry-content a:not(.wp-block-button__link):hover{ color:var(--wp--preset--color--ink); }

/* ---------- Hero (kw-header-x01) ---------- */
.kw-hero{ position:relative; overflow:hidden; }
.kw-hero .wp-block-cover__inner-container{
  width:100%; max-width:1180px; margin-inline:auto;
  padding:clamp(1.5rem,4vw,3rem) 24px;
  display:flex; align-items:flex-end; min-height:inherit;
}
.kw-hero-card{
  max-width:640px; width:100%;
  padding:clamp(28px,4vw,52px);
  border-radius:var(--wp--custom--radius, 18px);
  background:color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);
  color:var(--wp--preset--color--base);
  margin-bottom:clamp(2rem,6vw,4.5rem);
}
/* H1 = Eyebrow (klein, Mono, primary) */
.kw-h1{
  font-family:var(--wp--preset--font-family--display, monospace);
  font-weight:400; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--primary);
  display:flex; align-items:center; gap:10px; margin-bottom:1.4rem;
}
.kw-h1::before{ content:"✦"; font-size:.8rem; }
/* H2 = Elevator Pitch (große Bühne) */
.kw-h2{
  font-family:var(--wp--preset--font-family--display, monospace);
  font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.08; margin-bottom:1.2rem;
}
.kw-h2 mark{ background:transparent; }
/* Erklärender Text */
.kw-sub{ font-size:1.08rem; color:color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent); max-width:34rem; margin-bottom:1.9rem; }
.kw-hero-ctas{ gap:14px; margin-bottom:1.4rem; }
/* Trust-Badge unter den CTAs */
.kw-badge-line{
  font-family:var(--wp--preset--font-family--display, monospace);
  font-size:.85rem; color:color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
  border-top:1px solid rgba(255,255,255,.14); padding-top:1.2rem; margin:0;
}
.kw-badge-line mark{ background:transparent; letter-spacing:2px; }

/* ---------- Marquee-Band (kw-banner-x01) ---------- */
.kw-band{ overflow:hidden; padding:20px 0; border-top:4px solid var(--wp--preset--color--ink); }
.kw-band-track{ display:flex; gap:64px; white-space:nowrap; width:max-content; }
.kw-band.is-marquee .kw-band-track{ animation:kw-marquee 22s linear infinite; }
.kw-band-item{
  font-family:var(--wp--preset--font-family--display, monospace);
  font-weight:700; font-size:1.25rem; margin:0;
  display:flex; align-items:center; gap:64px;
}
.kw-band-item::after{ content:"✦"; }
@keyframes kw-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Scroll-/Load-Reveal ---------- */
.kw-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.kw-reveal.is-visible{ opacity:1; transform:none; }
.kw-d1{ transition-delay:.05s } .kw-d2{ transition-delay:.16s }
.kw-d3{ transition-delay:.28s } .kw-d4{ transition-delay:.4s } .kw-d5{ transition-delay:.52s }

/* Editor: nichts verstecken, nichts animieren */
.editor-styles-wrapper .kw-reveal{ opacity:1; transform:none; }
.editor-styles-wrapper .kw-band-track{ animation:none; }

/* ---------- Barrierearmut ---------- */
@media (prefers-reduced-motion: reduce){
  .kw-band.is-marquee .kw-band-track{ animation:none; }
  .kw-reveal{ opacity:1; transform:none; transition:none; }
  .wp-block-button__link{ transition:none; }
}
:focus-visible{ outline:3px solid var(--wp--preset--color--accent); outline-offset:3px; }

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .kw-hero{ min-height:auto !important; }
  .kw-hero-card{ margin-bottom:2rem; }
}