/* __DESIGN_SITE__ */
/* ============================================================
   treffen-erotik.de — direction "ambre / noir"
   Header et footer passent sur un fond noir chaud, un liseré
   ambre dérive lentement juste sous le header, les liens
   s'animent (soulignement) au survol. Rien d'autre n'est touché
   (grille de profils, fiches, formulaires, age gate, prelinker).

   Ajoutée après les feuilles du site : à spécificité égale, elle
   gagne déjà (ordre d'apparition). Pour aller plus haut on
   ancre sur une classe existante de l'élément (jamais de classe
   inventée) ; !important n'est posé que sur les deux couleurs
   fixées en style="" inline (logo, bordures), impossibles à
   dépasser autrement.
   ============================================================ */

:root{
  --te-noir-900:#0d0906;
  --te-noir-800:#18110a;
  --te-ambre-700:#b9790f;
  --te-ambre-500:#f5a623;
  --te-ambre-400:#ffc66b;
  --te-texte:#f2e6d2;
  --te-texte-dim:#a89572;
}

/* -------- confort de lecture : on coupe tout mouvement -------- */
@media (prefers-reduced-motion: reduce){
  header.sticky.top-0,
  header.sticky.top-0::after,
  header nav .font-medium,
  header nav .font-medium::after,
  header button[aria-label="Login"],
  header button[aria-label="Suche"],
  header button[aria-label="Menü"],
  header button:has(span.sm\:inline),
  footer a.text-zinc-600,
  footer a.text-zinc-600::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ===================== HEADER ===================== */

header.sticky.top-0{
  background:linear-gradient(180deg,var(--te-noir-900) 0%,var(--te-noir-800) 100%);
  backdrop-filter:none;
  border-bottom-color:rgba(245,166,35,.35) !important; /* couleur posée en style="" inline sur le header */
  box-shadow:0 8px 22px -14px rgba(245,166,35,.4);
  animation:te-header-in .5s ease-out both;
}
@keyframes te-header-in{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* liseré ambre qui dérive lentement, collé sous le header */
header.sticky.top-0::after{
  content:"";
  position:absolute; left:0; right:0; top:100%; height:3px;
  background:linear-gradient(90deg,transparent,var(--te-ambre-700) 20%,var(--te-ambre-500) 50%,var(--te-ambre-400) 60%,var(--te-ambre-700) 80%,transparent);
  background-size:200% 100%;
  animation:te-liseret 5s linear infinite;
  pointer-events:none;
}
@keyframes te-liseret{
  from{ background-position:0% 0; }
  to{ background-position:200% 0; }
}

/* logo (desktop + mobile) : couleur posée en style="" inline sur le lien -> ciblé par le href */
header a[href="/"]{
  color:var(--te-ambre-500) !important;
  text-shadow:0 0 12px rgba(245,166,35,.35);
}

/* navigation desktop ("Top 10 Bundesländer" et tout lien de nav similaire) */
header nav .font-medium{
  color:var(--te-texte-dim);
  position:relative;
  transition:color .25s ease;
}
header nav .font-medium:hover, header nav .font-medium:focus-visible{
  color:var(--te-ambre-500);
}
header nav .font-medium::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--te-ambre-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
header nav .font-medium:hover::after, header nav .font-medium:focus-visible::after{
  transform:scaleX(1);
}

/* icônes du header (login, recherche, menu, espace membre mobile) */
header button[aria-label="Login"],
header button[aria-label="Suche"],
header button[aria-label="Menü"],
header button:has(span.sm\:inline){
  color:var(--te-texte);
  transition:color .2s ease, transform .2s ease, filter .2s ease;
}
header button[aria-label="Login"],
header button[aria-label="Suche"],
header button[aria-label="Menü"]{
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
header button:has(span.sm\:inline){ min-height:44px; }
header button[aria-label="Login"]:hover, header button[aria-label="Login"]:focus-visible,
header button[aria-label="Suche"]:hover, header button[aria-label="Suche"]:focus-visible,
header button[aria-label="Menü"]:hover, header button[aria-label="Menü"]:focus-visible,
header button:has(span.sm\:inline):hover, header button:has(span.sm\:inline):focus-visible{
  color:var(--te-ambre-500);
  transform:translateY(-1px);
  filter:drop-shadow(0 2px 6px rgba(245,166,35,.4));
}

/* ===================== FOOTER ===================== */

footer.border-t{
  background:linear-gradient(180deg,var(--te-noir-800) 0%,var(--te-noir-900) 100%);
  border-top-color:rgba(245,166,35,.3) !important; /* couleur posée en style="" inline sur le footer */
}

/* titres de colonne (Navigation, Rechtliche Hinweise, Bundesländer) */
footer .text-zinc-900{ color:var(--te-ambre-400); }

/* nom du site en tête de footer : couleur posée en style="" inline */
footer .lg\:col-span-1 h3{ color:var(--te-ambre-500) !important; }

/* texte discret (tagline, copyright, mention d'âge) */
footer .text-zinc-500{ color:var(--te-texte-dim); }

/* liens (navigation, mentions légales, Bundesländer) */
footer a.text-zinc-600{
  color:var(--te-texte-dim);
  position:relative;
  transition:color .25s ease;
}
footer a.text-zinc-600::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--te-ambre-500);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
footer a.text-zinc-600:hover, footer a.text-zinc-600:focus-visible{
  color:var(--te-ambre-500);
}
footer a.text-zinc-600:hover::after, footer a.text-zinc-600:focus-visible::after{
  transform:scaleX(1);
}

/* lien de la mention d'âge (hérite déjà de la couleur du paragraphe) */
footer .underline:hover, footer .underline:focus-visible{
  color:var(--te-ambre-500);
}
/* __END_DESIGN_SITE__ */