/* __DESIGN_SITE__ */
/* ============================================================
   sextreff-schleswig-holstein.de — habillage unique (gabarit Next)
   Direction : « phare maritime » — bleu profond, blanc, jaune phare.
   Rayures fines façon pavillon en tête de header, logo passé à
   DROITE, footer bleu nuit avec liens en jaune phare.
   Palette : bleu profond #0b3d63 · bleu mer #155d92 · jaune phare
   #ffd23f · blanc #ffffff.
   ============================================================ */

/* ===================== EN-TÊTE (desktop + mobile) ===================== */

/* Fond clair bleuté + bordure basse renforcée. Chaîne de classes
   utilitaires = spécificité suffisante pour l'emporter sur le
   gabarit (bg-white/95…), sans dépendre de l'ordre de chargement.
   border-bottom-color est posée EN LIGNE par le gabarit : !important
   obligatoire pour la remplacer. */
header.sticky.top-0.z-50.w-full.border-b.border-zinc-200{
  background-color:#eef6fb;
  border-bottom-width:2px;
  border-bottom-color:#0b3d63 !important;
  padding-top:7px; /* laisse la place à la rayure ci-dessous */
}

/* Rayures façon pavillon marin (bleu / blanc / jaune), qui dérivent
   lentement sur toute la largeur du header — visibles en desktop
   ET en mobile puisqu'elles appartiennent au <header> lui-même. */
header.sticky.top-0.z-50.w-full::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:7px;
  background-image:repeating-linear-gradient(
    90deg,
    #0b3d63 0, #0b3d63 18px,
    #ffffff 18px, #ffffff 36px,
    #ffd23f 36px, #ffd23f 40px,
    #ffffff 40px, #ffffff 58px
  );
  background-size:58px 100%;
  animation:sh-stripe-drift 14s linear infinite;
}
@keyframes sh-stripe-drift{
  from{ background-position-x:0; }
  to{ background-position-x:-58px; }
}

/* Logo passé à DROITE : on inverse l'ordre du conteneur flex
   desktop (logo / nav / actions dans le DOM). Le bloc mobile est un
   AUTRE enfant du même parent, masqué en desktop par le gabarit lui-
   même (md:hidden) : ce row-reverse ne le concerne pas. */
header .flex.h-16.items-center.justify-between.gap-4{
  flex-direction:row-reverse;
}

/* Logo (l'ancre href="/" existe une fois en desktop, une fois en
   mobile ; couleur posée en ligne par le gabarit → !important). */
header a[href="/"]{
  color:#0b3d63 !important;
  font-weight:800;
  letter-spacing:.01em;
  position:relative;
  transition:color .2s ease, filter .2s ease;
}
header a[href="/"]:hover{
  color:#155d92 !important;
  filter:drop-shadow(0 0 6px rgba(255,210,63,.55));
}
/* Trait jaune qui se déploie sous le logo au survol (desktop) */
header a[href="/"]::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:#ffd23f;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s ease;
}
header a[href="/"]:hover::before{
  transform:scaleX(1);
  transform-origin:left;
}
/* Petit phare : point qui pulse à côté du logo, desktop seulement
   (le conteneur .hidden.md:flex…flex-shrink-0 SANS gap est unique à
   ce bloc — nav a gap-6, les actions ont gap-4). */
header .hidden.md\:flex.items-center.flex-shrink-0 a[href="/"]::after{
  content:"";
  display:inline-block;
  width:7px; height:7px;
  margin-left:9px;
  border-radius:50%;
  background:#ffd23f;
  vertical-align:middle;
  animation:sh-beacon 2.6s ease-in-out infinite;
}
@keyframes sh-beacon{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,210,63,.55); transform:scale(1); }
  50%{ box-shadow:0 0 0 6px rgba(255,210,63,0); transform:scale(1.2); }
}

/* Menu déroulant « Top 10 Bundesländer » */
header nav button{
  color:#0b3d63;
  transition:color .2s ease;
}
header nav button:hover{
  color:#7a4f00;
}

/* Icônes connexion / recherche (desktop) */
header .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{
  color:#0b3d63;
  transition:color .2s ease, transform .2s ease;
}
header .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{
  color:#7a4f00;
  transform:translateY(-2px);
}

/* ===================== BARRE MOBILE ===================== */
/* Rayures et logo déjà couverts ci-dessus (::before du <header>,
   règle générale sur a[href="/"]). Éléments propres au mobile : */
header .md\:hidden.flex.items-center.justify-between.w-full button[aria-label="Menü"]{
  color:#0b3d63;
}
/* Bouton « Mitgliederbereich » (espace membre) en petite pastille navy */
header .md\:hidden.flex.items-center.justify-between.w-full button:last-child{
  color:#ffffff;
  background:#0b3d63;
  border-radius:999px;
  padding:8px 12px;
  min-height:36px;
  transition:background .2s ease, transform .2s ease;
}
header .md\:hidden.flex.items-center.justify-between.w-full button:last-child span{
  color:#ffffff;
}
header .md\:hidden.flex.items-center.justify-between.w-full button:last-child:hover{
  background:#155d92;
  transform:translateY(-1px);
}

/* ===================== PIED DE PAGE ===================== */
footer.border-t.bg-zinc-50{
  background:linear-gradient(180deg,#0b3d63 0%,#06263f 100%);
  border-top-width:3px;
  border-top-color:#ffd23f !important; /* posée en ligne par le gabarit */
  position:relative;
}
/* Rayure décorative statique en tête de pied de page (aucune
   animation ajoutée ici : le budget d'animation est déjà tenu). */
footer.border-t.bg-zinc-50::before{
  content:"";
  position:absolute;
  top:-3px; left:0; right:0;
  height:3px;
  background-image:repeating-linear-gradient(90deg,#ffd23f 0 20px,#0b3d63 20px 40px);
}

/* Nom du site en pied de page (couleur posée en ligne) */
footer h3[style]{
  color:#ffffff !important;
}
footer p.text-sm.text-zinc-600,
footer p.text-xs.text-zinc-500{
  color:#a9c7dd;
}

/* Titres des colonnes (Navigation / Mentions légales / Bundesländer) */
footer h3.text-sm.font-semibold.text-zinc-900{
  color:#ffd23f;
}

/* Liens du pied de page : jaune phare, blanc au survol */
footer a.text-sm.text-zinc-600,
footer a.text-xs.text-zinc-500{
  color:#ffd23f;
}
footer a.text-sm.text-zinc-600:hover,
footer a.text-xs.text-zinc-500:hover{
  color:#ffffff;
}
footer a.underline{
  color:#ffd23f;
  text-decoration-color:#ffd23f;
}
footer a.underline:hover{
  color:#ffffff;
  text-decoration-color:#ffffff;
}

/* Séparateur avant la barre du bas (disclaimer + sitemap) */
footer .border-t.border-zinc-200{
  border-top-color:rgba(255,255,255,.15) !important;
}

/* ===================== Mode sombre système ===================== */
/* Le header original ne bascule que 2 éléments en dark: (nav et
   icônes). On assombrit tout le bandeau clair pour rester cohérent
   et garder le contraste ; le pied de page est déjà en bleu nuit. */
@media (prefers-color-scheme:dark){
  header.sticky.top-0.z-50.w-full.border-b.border-zinc-200{
    background-color:#0e2c44;
  }
  header a[href="/"]{ color:#ffffff !important; }
  header a[href="/"]:hover{ color:#ffd23f !important; }
  header nav button{ color:#cfe3f2; }
  header nav button:hover{ color:#ffd23f; }
  header .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button{ color:#cfe3f2; }
  header .hidden.md\:flex.items-center.gap-4.flex-shrink-0 button:hover{ color:#ffd23f; }
  header .md\:hidden.flex.items-center.justify-between.w-full button[aria-label="Menü"]{ color:#cfe3f2; }
}

/* ===================== Réduction des animations ===================== */
@media (prefers-reduced-motion:reduce){
  header.sticky.top-0.z-50.w-full::before{ animation:none; }
  header .hidden.md\:flex.items-center.flex-shrink-0 a[href="/"]::after{ animation:none; }
}
/* __END_DESIGN_SITE__ */