/* ==========================================================================
   Flirtlotse — composants
   Charte derivee des visuels de reference : noir + magenta 343deg + cyan 187deg
   ========================================================================== */
:root{
  --fl-noir:#07050A; --fl-panneau:#120A12; --fl-bord:#2A1420;
  --fl-magenta:#E00040; --fl-magenta-tief:#B00040; --fl-rose:#FF2E7A;
  --fl-cyan:#19D3E8; --fl-text:#F2ECEF; --fl-text-weich:#B9AAB4;
}
body{background:var(--fl-noir);color:var(--fl-text);-webkit-font-smoothing:antialiased}

/* --- CTA principal : magenta plein, energie graffiti --- */
.fl-cta{
  --_bg:var(--fl-magenta);
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05rem 2.2rem;
  font-family:"Archivo Black","Arial Black",Impact,sans-serif;
  font-size:clamp(1rem,.9rem + .4vw,1.15rem);
  text-transform:uppercase;letter-spacing:.045em;line-height:1;
  color:#fff !important;text-decoration:none;
  background:var(--_bg);
  border:0;border-radius:2px;
  position:relative;isolation:isolate;
  box-shadow:0 0 0 0 rgba(224,0,64,.55), 0 10px 26px -12px rgba(224,0,64,.9);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.fl-cta::after{           /* coulure de peinture sous le bouton */
  content:"";position:absolute;left:12%;right:12%;bottom:-7px;height:9px;z-index:-1;
  background:
    radial-gradient(6px 9px at 12% 0,var(--_bg) 98%,transparent 100%),
    radial-gradient(4px 7px at 38% 0,var(--_bg) 98%,transparent 100%),
    radial-gradient(7px 11px at 63% 0,var(--_bg) 98%,transparent 100%),
    radial-gradient(4px 6px at 86% 0,var(--_bg) 98%,transparent 100%);
  opacity:.9;transition:opacity .25s ease;
}
.fl-cta:hover,.fl-cta:focus-visible{
  --_bg:var(--fl-rose);
  transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(255,46,122,.22), 0 16px 34px -14px rgba(255,46,122,1);
}
.fl-cta:focus-visible{outline:3px solid var(--fl-cyan);outline-offset:3px}
.fl-cta:active{transform:translateY(0)}
.fl-cta__pfeil{font-size:1.1em;line-height:0;transition:transform .18s ease}
.fl-cta:hover .fl-cta__pfeil{transform:translateX(4px)}

/* --- CTA secondaire : contour cyan, l accent rare des visuels --- */
.fl-cta--zweit{
  background:transparent;color:var(--fl-cyan) !important;
  border:2px solid var(--fl-cyan);
  box-shadow:none;padding:.95rem 2rem;
}
.fl-cta--zweit::after{display:none}
.fl-cta--zweit:hover{background:var(--fl-cyan);color:#07050A !important;
  box-shadow:0 12px 30px -14px rgba(25,211,232,.9);transform:translateY(-2px)}

/* --- CTA pleine largeur en fin de page money --- */
.fl-cta-block{
  margin:3rem 0;padding:2.4rem clamp(1.2rem,4vw,2.6rem);
  background:linear-gradient(135deg,#1A0A16 0%,#0B0610 100%);
  border:1px solid var(--fl-bord);border-left:4px solid var(--fl-magenta);
  border-radius:3px;position:relative;overflow:hidden;
}
.fl-cta-block::before{  /* halo magenta diffus, comme les eclaboussures */
  content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(224,0,64,.30),transparent 62%);pointer-events:none;
}
.fl-cta-block h2,.fl-cta-block h3{margin-top:0;color:var(--fl-text)}
.fl-cta-block p{color:var(--fl-text-weich);max-width:56ch}
.fl-cta-block__hinweis{
  margin-top:1rem;font-size:.85rem;color:var(--fl-text-weich);letter-spacing:.02em;
}

/* --- Titres : soulignement cyan pulverise --- */
.fl-titel-akzent{position:relative;display:inline-block}
.fl-titel-akzent::after{
  content:"";position:absolute;left:0;right:-4%;bottom:-.18em;height:.13em;
  background:var(--fl-cyan);border-radius:60% 40% 55% 45%/100% 100% 40% 60%;
  opacity:.85;filter:blur(.4px);
}

/* --- Panneau / carte --- */
.fl-karte{
  background:var(--fl-panneau);border:1px solid var(--fl-bord);border-radius:3px;
  padding:1.6rem 1.5rem;transition:border-color .2s ease,transform .2s ease;
}
.fl-karte:hover{border-color:var(--fl-magenta);transform:translateY(-2px)}

/* --- Hero : image sombre + texte a gauche, comme les visuels --- */
.fl-hero{
  position:relative;min-height:clamp(380px,52vw,560px);
  display:flex;align-items:center;
  background:var(--fl-noir) center/cover no-repeat;
}
.fl-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,5,10,.94) 0%,rgba(7,5,10,.80) 42%,rgba(7,5,10,.25) 100%);
}
.fl-hero__inhalt{position:relative;max-width:44ch;padding:2rem clamp(1.2rem,5vw,3.5rem)}
.fl-hero h1{margin:0 0 .6em}
.fl-hero p{color:var(--fl-text-weich);font-size:1.15rem;margin-bottom:1.8rem}

/* --- Mention obligatoire sur lien commercial --- */
.fl-werbung{
  display:inline-block;margin-left:.6em;padding:.15em .5em;
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--fl-text-weich);border:1px solid var(--fl-bord);border-radius:2px;
  vertical-align:middle;font-family:var(--wp--preset--font-family--text)
}

@media (prefers-reduced-motion:reduce){
  .fl-cta,.fl-cta__pfeil,.fl-karte{transition:none}
  .fl-cta:hover{transform:none}
}

/* --- Page d'accueil --- */
.fl-hero__kicker{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--fl-cyan);margin:0 0 1.1rem}
.fl-hero h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem)}
.fl-hero__aktionen{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;margin-top:2rem}
.fl-inhalt{max-width:760px;margin:0 auto;padding:3.5rem 1.2rem 4rem}
.fl-inhalt h2{margin-top:3.2rem}
.fl-vorspann{font-size:1.2rem;color:var(--fl-text-weich)}
.fl-wege,.fl-portale{display:grid;gap:1.1rem;margin:2rem 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fl-wege .fl-karte h3,.fl-portale .fl-karte h3{margin-top:0;color:var(--fl-rose)}
.fl-karte--portal{border-top:3px solid var(--fl-magenta)}
.fl-inhalt ol{padding-left:1.3rem}
.fl-inhalt ol li{margin-bottom:.7rem}
@media(max-width:640px){.fl-hero__aktionen .fl-cta{width:100%;justify-content:center}}