/* __DESIGN_SITE__ */
/* =========================================================
   Habillage unique — frauen-treffen-sex.de (gabarit Next)
   Direction : prune + lilas, header a bord inferieur incurve
   (clip-path), footer arrondi. Ne touche que header/footer.
   ========================================================= */

:root{
  --fts-prune-900:#33112e;
  --fts-prune-800:#4a1a44;
  --fts-prune-700:#611f57;
  --fts-prune-glow:#7a3a76;
  --fts-lilas-300:#d9b6ec;
  --fts-lilas-200:#ecd6f5;
  --fts-lilas-050:#f8f0fb;
  --fts-texte-clair:#f6ecf8;
}

/* ---------- HEADER ---------- */

header.sticky{
  background:linear-gradient(120deg,var(--fts-prune-900) 0%,var(--fts-prune-700) 55%,var(--fts-prune-glow) 100%);
  backdrop-filter:none;
  border-bottom-color:rgba(217,182,236,.45)!important;
  box-shadow:0 10px 26px -16px rgba(51,17,46,.6);
  animation:fts-entree .7s ease-out;
}

@keyframes fts-entree{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}

/* bord inferieur incurve : une vague douce sous le bandeau,
   sans toucher a la mise en page (purement decoratif) */
header.sticky::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-14px;
  height:28px;
  background:linear-gradient(120deg,var(--fts-prune-700),var(--fts-prune-glow));
  clip-path:ellipse(58% 100% at 50% 0%);
  pointer-events:none;
}

/* logo : pastille lumineuse + teinte claire lisible sur le fond fonce */
header.sticky a[href="/"]{
  color:var(--fts-texte-clair)!important;
  letter-spacing:.01em;
  transition:opacity .2s ease,transform .2s ease;
}
header.sticky a[href="/"]::before{
  content:"";
  display:inline-block;
  width:7px;height:7px;
  margin-right:7px;
  border-radius:50%;
  vertical-align:middle;
  background:radial-gradient(circle at 30% 30%,#fff,var(--fts-lilas-300) 60%,var(--fts-prune-700) 100%);
  box-shadow:0 0 6px 1px rgba(217,182,236,.6);
}
header.sticky a[href="/"]:hover{opacity:.85;transform:translateY(-1px)}

/* boutons icones (login, recherche, menu mobile, espace membres) */
header.sticky button{
  color:var(--fts-lilas-200);
  border-radius:999px;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
header.sticky button:hover{
  color:#fff;
  background-color:rgba(255,255,255,.14);
  transform:translateY(-1px);
}
header.sticky button:focus-visible{
  outline:2px solid var(--fts-lilas-300);
  outline-offset:2px;
}

/* lien "Top 10 Bundeslander" : soulignement qui se deploie au survol */
header.sticky nav button{position:relative}
header.sticky nav button::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--fts-lilas-300);
  transition:right .25s ease;
}
header.sticky nav button:hover::after{right:0}

/* ---------- FOOTER ---------- */

footer.border-t{
  position:relative;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  background:linear-gradient(180deg,var(--fts-lilas-050) 0%,#ffffff 70%);
  border-top-color:rgba(97,31,87,.18)!important;
}

/* motif qui derive tres lentement, discret, derriere le texte */
footer.border-t::before{
  content:"";
  position:absolute;inset:-20% -10%;
  background:
    radial-gradient(38% 45% at 15% 20%,rgba(217,182,236,.35),transparent 70%),
    radial-gradient(32% 40% at 88% 78%,rgba(122,58,118,.22),transparent 70%);
  background-repeat:no-repeat;
  animation:fts-derive 24s ease-in-out infinite alternate;
}
@keyframes fts-derive{
  from{background-position:0 0,0 0}
  to{background-position:6% 4%,-5% -4%}
}

footer.border-t>.container{position:relative;z-index:1}

footer.border-t h3{
  color:var(--fts-prune-800);
  position:relative;
  padding-bottom:8px;
}
footer.border-t h3::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:26px;height:2px;
  background:var(--fts-lilas-300);
}
footer.border-t .lg\:col-span-1 h3{color:var(--fts-prune-800)!important}

footer.border-t a{
  color:var(--fts-prune-700);
  transition:color .2s ease;
}
footer.border-t a:hover{
  color:var(--fts-prune-900);
  text-decoration-color:var(--fts-lilas-300);
}
footer.border-t .pt-8{border-top-color:rgba(97,31,87,.15)!important}

/* ---------- confort visuel : sombre et mouvement reduit ---------- */

@media (prefers-color-scheme:dark){
  header.sticky{border-bottom-color:rgba(217,182,236,.6)!important}
  footer.border-t{background:linear-gradient(180deg,#3d1a38 0%,#2a1027 75%)}
  footer.border-t h3,
  footer.border-t .lg\:col-span-1 h3{color:var(--fts-lilas-200)!important}
  footer.border-t a{color:var(--fts-lilas-050)}
  footer.border-t a:hover{color:var(--fts-lilas-300)}
  footer.border-t p{color:var(--fts-lilas-200)}
}

@media (prefers-reduced-motion:reduce){
  header.sticky,footer.border-t::before{animation:none}
  header.sticky a[href="/"],header.sticky button{transition:none}
}

@media (max-width:480px){
  header.sticky::after{height:16px;bottom:-9px}
  header.sticky a[href="/"]::before{display:none}
  footer.border-t{border-radius:20px 20px 0 0}
}
/* __END_DESIGN_SITE__ */