/* home.css — eigenständige Marketing-Startseite für parcoeur.
   Lädt KEINE App-CSS (player/restyle/…). Nur die Schrift + das Favicon
   werden als statische Dateien aus /assets geteilt. Look = „Ruhig & Edel"
   (dunkles Navy, Space Grotesk), Farb-Tokens hier lokal gespiegelt. */

/* ── Schrift (lokal aus der App, statisches Asset) ── */
@font-face{
  font-family:'Space Grotesk';
  src:url('/assets/fonts/spacegrotesk.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Flächen / Hintergrund */
  --bg:#06090f;
  --page-grad:radial-gradient(130% 90% at 50% -20%, #131d33 0%, #0a0f1c 55%, #06090f 100%);
  --surface-1:#121b30;
  --surface-2:#172239;
  --surface-3:#243450;

  /* Text */
  --text:#e7ecf5;
  --text-2:#cbd5e1;
  --text-3:#94a3b8;

  /* Akzente */
  --accent:#60a5fa;
  --primary:#3b82f6;
  --primary-d:#1e40af;
  --ok:#22c55e;
  --wave-bar:#586d96;   /* ruhige Wellenform-Balken (ungespielt) */

  /* Linien / Form / Schatten */
  --hairline:rgba(255,255,255,.11);
  --hairline-2:rgba(255,255,255,.16);
  --radius:13px; --radius-lg:18px; --radius-sm:10px;
  --shadow-1:0 2px 6px rgba(0,0,0,.35);
  --shadow-2:0 18px 44px rgba(0,0,0,.5);
  --content-max:1100px;

  --font:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  overflow-x:hidden;
  min-height:100vh;
  position:relative;          /* Bezugsrahmen für die Blüten-Ebene (.bgfx) — damit sie die GANZE Seite abdeckt und mitscrollt */
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  background-image:var(--page-grad);
  background-attachment:fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }

/* ── Feine Körnung gegen Banding/Moiré ──
   Die großen blur(96px)-Blüten erzeugen auf dunklem Grund sichtbare Farb-Stufenringe
   (8-Bit-Banding); wo sich zwei Blüten überlappen, kreuzen sich die Ringe → Interferenz-/Moiré-Muster.
   Ein feTurbulence-Rauschen (overlay, .1) dithert die Stufen weg — identisch zu Login/Restyle.
   z-index:0 → liegt ÜBER den Blüten (.bgfx, ebenfalls 0, aber früher in der Quellreihenfolge),
   aber UNTER dem Inhalt (.nav/main/.foot = z-index:1) → Schrift bleibt scharf. */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.1; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Hintergrund-Effekt (weiche Lichtflecken/„Blüten") ──
   absolute über die GANZE Seitenhöhe → scrollt mit dem Inhalt mit (nicht am Viewport gepinnt).
   Über die volle Höhe verteilt (top in %), damit beim Scrollen immer Blüten im Bild sind.
   Bewegung: wandern + Scale-/Opacity-Puls (sie „leben"). Scale erzwingt Re-Raster der Blur-Ebene →
   Anzahl/Blur bewusst dosiert; falls auf dem iPhone träge, Anzahl oder Blur etwas zurücknehmen. */
.bgfx{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.bgfx .blob{
  position:absolute; border-radius:50%;
  filter:blur(96px); opacity:.55; will-change:transform, opacity;
}
.bgfx .b1{
  width:680px; height:680px; left:-180px; top:1%;
  background:radial-gradient(circle, rgba(96,165,250,.45), transparent 72%);
  animation:float1 19s ease-in-out infinite;
}
.bgfx .b2{
  width:600px; height:600px; right:-180px; top:11%;
  background:radial-gradient(circle, rgba(59,130,246,.40), transparent 72%);
  animation:float2 23s ease-in-out infinite;
}
.bgfx .b3{
  width:520px; height:520px; left:24%; top:23%;
  background:radial-gradient(circle, rgba(34,197,94,.22), transparent 72%);
  animation:float3 28s ease-in-out infinite reverse;
}
.bgfx .b4{
  width:480px; height:480px; right:6%; top:35%;
  background:radial-gradient(circle, rgba(96,165,250,.32), transparent 72%);
  animation:float1 25s ease-in-out infinite reverse;
}
.bgfx .b5{
  width:520px; height:520px; left:-150px; top:48%;
  background:radial-gradient(circle, rgba(99,102,241,.30), transparent 72%);
  animation:float2 29s ease-in-out infinite;
}
.bgfx .b6{
  width:540px; height:540px; right:-150px; top:61%;
  background:radial-gradient(circle, rgba(45,212,191,.22), transparent 72%);
  animation:float3 26s ease-in-out infinite;
}
.bgfx .b7{
  width:500px; height:500px; left:18%; top:74%;
  background:radial-gradient(circle, rgba(59,130,246,.30), transparent 72%);
  animation:float1 31s ease-in-out infinite;
}
.bgfx .b8{
  width:560px; height:560px; right:4%; top:87%;
  background:radial-gradient(circle, rgba(99,102,241,.28), transparent 72%);
  animation:float2 24s ease-in-out infinite reverse;
}
/* Lebendige Wander-Pfade: mehrere Wegpunkte (wandern), Scale-Puls (grösser/kleiner werden),
   Opacity-Puls (atmen/verwischen) → die Blüten „leben". Pro Blüte andere Dauer/Richtung = organisch. */
@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1);            opacity:.46; }
  25%    { transform:translate(120px,80px) scale(1.22);   opacity:.68; }
  55%    { transform:translate(-70px,140px) scale(1.04);  opacity:.5; }
  80%    { transform:translate(-130px,60px) scale(1.32);  opacity:.64; }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1.08);          opacity:.6; }
  30%    { transform:translate(-150px,92px) scale(.82);   opacity:.4; }
  60%    { transform:translate(86px,150px) scale(1.3);    opacity:.68; }
  85%    { transform:translate(132px,44px) scale(1.0);    opacity:.5; }
}
@keyframes float3{
  0%,100%{ transform:translate(0,0) scale(1);             opacity:.5; }
  33%    { transform:translate(112px,-120px) scale(1.34); opacity:.68; }
  66%    { transform:translate(-122px,-46px) scale(.9);   opacity:.42; }
}

/* alle Inhalte ÜBER dem Hintergrund */
.nav, main, .foot{ position:relative; z-index:1; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; cursor:pointer; border:1px solid transparent;
  border-radius:var(--radius); padding:11px 20px;
  font-family:var(--font); font-size:15px; font-weight:600;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:14px 26px; font-size:16px; border-radius:var(--radius-lg); }

/* Primär-Buttons (Anmelden, Anfrage senden) — EXAKT wie der App-Play-Button #play.btn.main
   (restyle.css): voller Akzent oben → gleicher Blauton 76% abgedunkelt unten, halbtransparenter
   Akzent-Rand, KEIN Schatten. Hover hellt auf + Rand kräftiger, Active drückt leicht. */
.btn-primary{
  background:linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 76%, #000));
  border:1px solid color-mix(in srgb, var(--primary) 55%, transparent); color:#fff; font-weight:700;
  box-shadow:none;
}
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.08); border-color:color-mix(in srgb, var(--primary) 72%, transparent); }
.btn-primary:active{ transform:translateY(1px) scale(.99); }

.btn-ghost{
  background:rgba(255,255,255,.04);
  border-color:var(--hairline-2); color:var(--text);
}
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--accent); transform:translateY(-1px); }

/* ── Kopfzeile ── */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; max-width:var(--content-max); margin:0 auto;
  padding:18px 24px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; color:#fff; }
.brandHeart{ width:26px; height:26px; color:#fff; }
.brandName{ font-size:21px; font-weight:700; letter-spacing:.2px; }

.navLinks{ display:flex; align-items:center; gap:24px; }
.navLinks a{ color:var(--text-2); font-size:15px; font-weight:500; transition:color .15s ease; }
.navLinks a:hover{ color:#fff; }
.navLinks .navLogin{ color:#fff; font-weight:700; }

/* ── Hero (füllt den ersten Bildschirm, Inhalt vertikal zentriert) ── */
.hero{
  box-sizing:border-box;
  max-width:var(--content-max); margin:0 auto;
  padding:124px 24px 64px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
.eyebrow{
  margin:0 0 14px; text-transform:uppercase; letter-spacing:.16em;
  font-size:12.5px; font-weight:600; color:var(--accent);
}
.heroTitle{
  margin:0 0 20px; font-size:clamp(42px, 6vw, 70px);
  line-height:1.03; font-weight:700; letter-spacing:-.02em;
}
.heroLead{
  margin:0 0 28px; max-width:48ch;
  font-size:clamp(17px, 2.2vw, 22px); color:var(--text-2);
}
.heroCtas{ display:flex; flex-wrap:wrap; gap:12px; }

.heroArt{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; }
/* Kein Schein mehr hinter dem Herz — die Tiefe kommt jetzt allein aus den Hintergrund-„Blüten" (.bgfx). */
.heroGlow{ position:relative; display:flex; justify-content:center; align-items:center; }
.heroHeart{
  position:relative; z-index:1;
  width:min(310px, 66%); height:auto; color:var(--accent);
  animation:heroArtIn .9s cubic-bezier(.22,.61,.36,1) both;
}
/* „parcoeur"-Wortmarke unter dem Herz (wie der Login). Herz ist bewusst kleiner,
   damit Herz + Schriftzug zusammen NICHT höher werden als der Textblock links. */
.heroName{
  font-family:var(--font); font-weight:700;
  font-size:clamp(30px, 4.6vw, 52px); line-height:1;
  letter-spacing:.4px; color:#fff;
  animation:heroArtIn .9s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroArtIn{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:none } }
/* Beim Eintreten EINMAL — wie der Login-Bildschirm: sanfter Equalizer-Puls der Balken
   + Glanz-Sweep, gestaffelt links→rechts; danach ruhig (KEIN Dauer-Puls). */
.heroHeart rect{ transform-box:fill-box; transform-origin:center;
  animation:heroEq 1.1s ease-in-out 1 both, heroSweep 1.7s ease-out 1 both; }
.heroHeart rect:nth-child(1){ animation-delay:0s }
.heroHeart rect:nth-child(2){ animation-delay:.07s }
.heroHeart rect:nth-child(3){ animation-delay:.14s }
.heroHeart rect:nth-child(4){ animation-delay:.21s }
.heroHeart rect:nth-child(5){ animation-delay:.28s }
.heroHeart rect:nth-child(6){ animation-delay:.35s }
.heroHeart rect:nth-child(7){ animation-delay:.42s }
.heroHeart rect:nth-child(8){ animation-delay:.49s }
.heroHeart rect:nth-child(9){ animation-delay:.56s }
.heroHeart rect:nth-child(10){ animation-delay:.63s }
@keyframes heroEq{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.84) } }
@keyframes heroSweep{ 0%{ fill:currentColor } 45%{ fill:#d4e4ff } 100%{ fill:currentColor } }
@media (prefers-reduced-motion:reduce){ .heroHeart rect{ animation:none } }

/* Hero: Eyebrow → Titel → Lead laufen beim Laden sanft gestaffelt ein */
.eyebrow, .heroTitle, .heroLead{ animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both; }
.eyebrow{ animation-delay:.06s }
.heroTitle{ animation-delay:.18s }
.heroLead{ animation-delay:.34s }
@keyframes heroIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .eyebrow, .heroTitle, .heroLead{ animation:none } }

/* ── Abschnitte ── */
.section{ max-width:var(--content-max); margin:0 auto; padding:64px 24px; }
.sectionTitle{
  margin:0 0 32px; font-size:clamp(26px, 3.4vw, 34px);
  font-weight:700; letter-spacing:-.01em; text-align:center;
}

/* Funktions-Karten */
.cards{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  padding:24px 20px; box-shadow:var(--shadow-1);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--hairline-2); box-shadow:var(--shadow-2); }
.cardIco{
  width:46px; height:46px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; color:var(--accent);
  background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.25);
}
.cardIco svg{ width:24px; height:24px; }
.card h3{ margin:0 0 8px; font-size:18px; font-weight:700; }
.card p{ margin:0; font-size:14.5px; color:var(--text-3); }

/* Für Vereine (zweispaltig) */
.section-split{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.section-split .sectionTitle{ text-align:left; }
.splitLead{ margin:0 0 22px; font-size:clamp(17px, 2.2vw, 22px); color:var(--text-2); }
.checkList{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checkList li{
  position:relative; padding-left:34px; font-size:clamp(17px, 2.2vw, 22px); color:var(--text);
}
.checkList li::before{
  content:""; position:absolute; left:0; top:2px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(34,197,94,.16); border:1px solid rgba(34,197,94,.45);
}
.checkList li::after{
  content:""; position:absolute; left:7px; top:8px;
  width:8px; height:4px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok);
  transform:rotate(-45deg);
}

.splitArt{ display:flex; justify-content:center; }
.miniWave{
  display:flex; align-items:center; gap:7px; height:160px;
  padding:28px 30px; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--hairline); box-shadow:var(--shadow-2);
}
.miniWave span{
  width:8px; border-radius:6px; background:var(--accent); opacity:.85;
  animation:eq 1.4s ease-in-out infinite;
}
.miniWave span:nth-child(odd){ background:var(--primary); }
.miniWave span:nth-child(1){ height:30%; animation-delay:-.1s }
.miniWave span:nth-child(2){ height:55%; animation-delay:-.3s }
.miniWave span:nth-child(3){ height:80%; animation-delay:-.5s }
.miniWave span:nth-child(4){ height:60%; animation-delay:-.2s }
.miniWave span:nth-child(5){ height:95%; animation-delay:-.6s }
.miniWave span:nth-child(6){ height:45%; animation-delay:-.4s }
.miniWave span:nth-child(7){ height:75%; animation-delay:-.15s }
.miniWave span:nth-child(8){ height:50%; animation-delay:-.55s }
.miniWave span:nth-child(9){ height:85%; animation-delay:-.35s }
.miniWave span:nth-child(10){ height:40%; animation-delay:-.25s }
.miniWave span:nth-child(11){ height:70%; animation-delay:-.45s }
.miniWave span:nth-child(12){ height:55%; animation-delay:-.05s }
.miniWave span:nth-child(13){ height:90%; animation-delay:-.5s }
.miniWave span:nth-child(14){ height:35%; animation-delay:-.3s }
.miniWave span:nth-child(15){ height:60%; animation-delay:-.2s }
@keyframes eq{
  0%,100%{ transform:scaleY(.5); }
  50%{ transform:scaleY(1); }
}

/* Abschluss-CTA */
.cta{ text-align:center; }
.ctaLead{ margin:0 0 28px; font-size:clamp(17px, 2.2vw, 22px); color:var(--text-2); }

/* ── Abschnitts-Trenner: kleiner Equalizer (Wellen-Motiv) zwischen ausblendenden Haarlinien ──
   3x zwischen den Abschnitten (Hero→Features, Features→Vereine, Vereine→Kontakt).
   Rein dekorativ (aria-hidden), ruhig, ohne Dauer-Effekt — bricht nie horizontal
   aus (an --content-max gebunden, 24px Seiteninnenraum wie die Sektionen). */
.sep{
  display:flex; align-items:center; justify-content:center; gap:18px;
  width:100%; max-width:var(--content-max);
  margin:8px auto; padding:0 24px; box-sizing:border-box;
}
/* Haarfeine Linien, die zum Rand hin auf 0 ausblenden (innen zum Equalizer voll) */
.sep .sepLine{
  flex:1 1 auto; min-width:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--hairline) 50%, transparent 100%);
}
.sep .sepLine:first-child{ background:linear-gradient(90deg, transparent 0%, var(--hairline) 100%); }
.sep .sepLine:last-child{ background:linear-gradient(90deg, var(--hairline) 0%, transparent 100%); }
/* 5 ruhige Balken, unterschiedliche Höhen, abwechselnd Akzent/Primär (wie .miniWave) */
.sep .sepEq{ flex:0 0 auto; display:flex; align-items:flex-end; gap:5px; height:22px; padding:0 2px; }
.sep .sepEq i{ display:block; width:4px; border-radius:4px; background:var(--accent); opacity:.9; }
.sep .sepEq i:nth-child(odd){ background:var(--primary); }
.sep .sepEq i:nth-child(1){ height:38%; }
.sep .sepEq i:nth-child(2){ height:64%; }
.sep .sepEq i:nth-child(3){ height:100%; }
.sep .sepEq i:nth-child(4){ height:58%; }
.sep .sepEq i:nth-child(5){ height:30%; }
@media (max-width:560px){
  .sep{ gap:12px; margin:4px auto; }
  .sep .sepEq{ gap:4px; height:18px; }
}

/* ── Fusszeile ── */
.foot{
  max-width:var(--content-max); margin:0 auto;
  padding:36px 24px 48px; margin-top:24px;
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.footBrand{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:#fff; }
.footHeart{ width:20px; height:20px; color:#fff; }
.footLinks{ display:flex; flex-wrap:wrap; gap:20px; }
.footLinks a{ color:var(--text-3); font-size:14px; transition:color .15s ease; }
.footLinks a:hover{ color:#fff; }
.footCopy{ margin:0; color:var(--text-3); font-size:14px; }

/* ── Alles fürs Üben: Feature-Zeilen (Geräte-Bild + Text, abwechselnd) ── */
.features{ text-align:center; }

.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:56px;
  align-items:center; max-width:980px; margin:0 auto; text-align:left;
}
.feature + .feature{ margin-top:64px; }
.feature--reverse .featureMedia{ order:2; }
.featureMedia{ display:flex; justify-content:center; }
/* Icon sitzt auf gleicher Höhe wie die Überschrift (nicht mehr darüber gestapelt) */
.featureHead{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.featureIco{
  width:64px; height:64px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:16px; color:var(--accent);
  background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.25);
}
.featureIco svg{ width:34px; height:34px; }
.featureText h3{ margin:0; font-size:24px; font-weight:700; letter-spacing:-.01em; }
.featureText p{ margin:0; font-size:clamp(17px, 2.2vw, 22px); color:var(--text-2); line-height:1.6; }
.featureText b{ color:#fff; font-weight:700; }

/* Geräte-Rahmen */
.dvPhone{
  width:230px; max-width:72%; border-radius:30px; padding:10px;
  background:linear-gradient(155deg,#243049,#0b1220);
  border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.08);
}
/* Bild-Eckenradius konzentrisch zum Rahmen (30 − 10 padding = 20):
   so schneidet die Rundung NICHT mehr in die Topbar-Buttons (☰ / K-Avatar). */
.dvPhone img{ display:block; width:100%; height:auto; border-radius:20px; }
.dvTablet{
  width:100%; max-width:470px; border-radius:24px; padding:12px;
  background:linear-gradient(155deg,#243049,#0b1220);
  border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.08);
}
.dvTablet img{ display:block; width:100%; height:auto; border-radius:13px; }

@media (max-width:820px){
  .feature{ grid-template-columns:1fr; gap:26px; max-width:470px; text-align:center; }
  .feature + .feature{ margin-top:52px; }
  .feature--reverse .featureMedia{ order:0; }
  .featureHead{ justify-content:center; }
  .dvPhone{ width:230px; max-width:74vw; }
}

/* ── Rechtsseiten (Impressum / Datenschutz) ── */
.legal{ max-width:760px; margin:0 auto; padding:100px 24px 72px; position:relative; z-index:1; }
.legalBack{ display:inline-block; margin-bottom:18px; color:var(--text-3); font-size:14.5px; }
.legalBack:hover{ color:#fff; }
.legal h1{ font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-.01em; margin:0 0 22px; }
.legal h2{ font-size:19px; font-weight:700; color:#fff; margin:30px 0 8px; }
.legal p, .legal li{ font-size:15.5px; line-height:1.7; color:var(--text-2); margin:0 0 12px; }
.legal a{ color:var(--accent); }
.legal a:hover{ text-decoration:underline; }
.legal ul{ margin:0 0 12px; padding-left:22px; }
.legalNote{ margin-top:30px; padding:14px 16px; border-radius:var(--radius);
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.32); color:var(--text-2); font-size:14px; }

/* ── Kontaktformular ── */
.kontaktForm{ max-width:540px; margin:6px auto 0; text-align:left; display:grid; gap:14px; }
.kfRow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.kontaktForm input, .kontaktForm textarea{
  width:100%; font-family:var(--font); font-size:15.5px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--hairline-2); border-radius:var(--radius);
  padding:13px 15px; outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.kontaktForm input::placeholder, .kontaktForm textarea::placeholder{ color:var(--text-3); }
.kontaktForm input:focus, .kontaktForm textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(96,165,250,.18); }
.kontaktForm textarea{ resize:vertical; min-height:96px; }
.kfHp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.kfSubmit{ justify-self:center; margin-top:4px; }
.kfNote{ margin:8px 0 0; text-align:center; font-size:15px; font-weight:600; }
.kfNote--ok{ color:var(--ok); }
.kfNote--err{ color:#fca5a5; }
@media (max-width:560px){ .kfRow{ grid-template-columns:1fr; } }

/* ── Scroll-Reveal: Inhalte laufen herein / wachsen beim Scrollen ── */
html.js .reveal{
  opacity:0; transform:translateY(32px);
  transition:opacity .75s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
html.js .reveal--grow{ transform:scale(.85); }
html.js .feature .featureMedia.reveal{ transform:translateX(-50px) scale(.96); }
html.js .feature--reverse .featureMedia.reveal{ transform:translateX(50px) scale(.96); }
html.js .featureText.reveal{ transition-delay:.12s; }
html.js .reveal.is-visible{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ── Responsive ── */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; padding-top:92px; text-align:center; }
  .heroLead{ margin-left:auto; margin-right:auto; }
  .heroCtas{ justify-content:center; }
  .heroArt{ order:-1; }
  .heroHeart{ width:min(250px, 62%); }
  .heroName{ font-size:clamp(28px, 9vw, 44px); }
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .section-split{ grid-template-columns:1fr; gap:24px; }
  .section-split .sectionTitle{ text-align:center; }
  .splitLead{ text-align:center; }
  /* Mobile: Abstände allgemein straffer */
  .section{ padding:44px 20px; }
  .showcaseLead{ margin-bottom:30px; }
  .feature{ gap:20px; }
  .feature + .feature{ margin-top:38px; }
  .sectionTitle{ margin-bottom:24px; }
}
@media (max-width:560px){
  .navLinks{ gap:14px; }
  .navLinks a:not(.navLogin){ display:none; }   /* Mobile: nur Anmelden-Button */
  .cards{ grid-template-columns:1fr; }
  .foot{ justify-content:center; text-align:center; flex-direction:column; }
}

/* Bewegung reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
}