/* __DESIGN_SITE__ */
/* ============================================================
   kostenlose-sexdates.de — habillage unique (header / barre mobile / footer)
   Direction : "sport / énergie" — orange vif (#FF6A00) + bleu nuit (#0B1F3A),
   angles coupés (clip-path) sur les boutons. Header desktop : icônes à
   GAUCHE, logo à DROITE (flex-direction inversé) ; mobile : barre bleu nuit ;
   footer : bandes obliques bleu nuit / orange.
   ============================================================ */

:root {
  --ks-navy: #0b1f3a;
  --ks-navy-2: #142a4d;
  --ks-orange: #ff6a00;
  --ks-orange-2: #ff8c2e;
  /* rectangle à coins coupés (chamfer), réutilisé sur les boutons */
  --ks-chamfer: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

/* ---------- HEADER : fond bleu nuit, bordure basse orange épaisse ---------- */
header.sticky.top-0.z-50.w-full.border-b.border-zinc-200 {
  background: linear-gradient(180deg, var(--ks-navy) 0%, var(--ks-navy-2) 100%);
  border-bottom-width: 5px;
  border-bottom-color: var(--ks-orange) !important; /* écrase le style inline d'origine (rose) */
  animation: ksHeaderDrop .6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ksHeaderDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Desktop : on inverse le sens de la rangée -> icônes à gauche, logo à droite */
@media (min-width: 768px) {
  header .flex.h-16.items-center.justify-between.gap-4 {
    flex-direction: row-reverse;
  }
}

/* Logo (variante desktop + variante mobile centrée) : orange vif, gras */
header a[href="/"] {
  color: var(--ks-orange) !important; /* écrase le style inline d'origine (rose) */
  letter-spacing: .01em;
  transition: color .2s ease;
}
header a[href="/"]:hover { color: var(--ks-orange-2) !important; }

/* Déclencheur "Top 10 Bundesländer" : blanc sur nuit, soulignement animé */
header nav button {
  position: relative;
  color: #fff;
  transition: color .2s ease;
}
header nav button:hover { color: var(--ks-orange-2); }
header nav button::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--ks-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
header nav button:hover::after { transform: scaleX(1); }

/* Icônes profil / recherche (desktop) : chips oranges à angles coupés */
header button[aria-label="Login"],
header button[aria-label="Suche"] {
  background: var(--ks-orange);
  color: var(--ks-navy);
  padding: .5rem;
  clip-path: var(--ks-chamfer);
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
header button[aria-label="Login"]:hover,
header button[aria-label="Suche"]:hover {
  background: var(--ks-navy-2);
  color: var(--ks-orange-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 106, 0, .35);
}

/* Hamburger (mobile) : icône blanche sur la barre bleu nuit */
header button[aria-label="Menü"] {
  color: #fff;
  transition: color .2s ease;
}
header button[aria-label="Menü"]:hover { color: var(--ks-orange); }

/* Bouton "Mitgliederbereich" (mobile) : pilule orange à angles coupés,
   scopé à la barre mobile pour ne jamais toucher un futur menu déroulant */
header .md\:hidden.flex.items-center.justify-between.w-full button:has(span) {
  background: var(--ks-orange);
  color: var(--ks-navy);
  padding: .4rem .75rem;
  clip-path: var(--ks-chamfer);
  transition: transform .2s ease, background .2s ease;
}
header .md\:hidden.flex.items-center.justify-between.w-full button:has(span):hover {
  background: var(--ks-orange-2);
  transform: translateY(-1px);
}

/* Bulle "Mach mit!" sous l'icône profil : les icônes sont désormais à
   gauche du header (row-reverse) -> une bulle centrée pourrait sortir de
   l'écran. On l'ancre à gauche de son icône plutôt qu'au centre. */
header .absolute.top-full {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* ---------- FOOTER : bandes obliques bleu nuit / orange ---------- */
footer.border-t.bg-zinc-50 {
  background: linear-gradient(180deg, var(--ks-navy) 0%, var(--ks-navy-2) 100%);
  border-top-width: 6px;
  border-top-color: var(--ks-orange) !important; /* écrase le style inline d'origine (rose) */
  position: relative;
  overflow: hidden;
}
/* bande diagonale orange, discrète, qui dérive lentement */
footer.border-t.bg-zinc-50::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  background: repeating-linear-gradient(135deg, var(--ks-orange) 0 2px, transparent 2px 46px);
  opacity: .1;
  animation: ksStripDrift 22s linear infinite;
  pointer-events: none;
}
@keyframes ksStripDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(60px, 0, 0); }
}
footer.border-t.bg-zinc-50 > .container.mx-auto.px-4 {
  position: relative;
  z-index: 1;
}

/* Titres de colonnes en orange (dont la carte "marque", qui a un style inline) */
footer h3.font-semibold { color: var(--ks-orange); }
footer h3.font-semibold[style] { color: var(--ks-orange) !important; }

/* Texte et liens du footer en clair sur le fond nuit */
footer p.leading-relaxed,
footer p.text-xs { color: rgba(255, 255, 255, .62); }
footer a.transition-colors.inline-block {
  color: rgba(255, 255, 255, .82);
  transition: color .2s ease;
}
footer a.transition-colors.inline-block:hover {
  color: var(--ks-orange-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Séparateur bas de footer, discret sur fond nuit */
footer .border-t.border-zinc-200.pt-8 {
  border-top-color: rgba(255, 255, 255, .15);
}

/* ---------- Accessibilité ---------- */
header a:focus-visible,
header button:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--ks-orange-2);
  outline-offset: 2px;
}

/* ---------- Confort de lecture : on coupe les animations si demandé.
   Même sélecteurs, même spécificité, placés APRÈS -> ils l'emportent
   sans avoir besoin de !important (réservé aux styles inline ci-dessus). */
@media (prefers-reduced-motion: reduce) {
  header.sticky.top-0.z-50.w-full.border-b.border-zinc-200 { animation: none; }
  header nav button::after { transition: none; }
  footer.border-t.bg-zinc-50::before { animation: none; opacity: .06; }
}
/* __END_DESIGN_SITE__ */