/* __DESIGN_SITE__ */
/* ==================================================================
   sexkontakte-hessen.de — habillage Art Déco
   Vert profond + jaune moutarde. Filets doubles, capitales espacées.
   Trois zones : sidebar desktop, bandeau + barre d'onglets mobiles,
   footer. Rien d'autre n'est touché (grille de profils, fiches,
   formulaires, age gate, prelinker intouchables).
   ================================================================== */

html:not(#_){
  --dg:#0f3d2b;       /* vert profond — fond principal des 3 zones */
  --dg2:#0c2f21;      /* vert plus sombre — bandeau CTA / barre d'onglets */
  --gold:#d9a521;     /* jaune moutarde — filets doubles, accents */
  --gold-lt:#f0c34a;  /* moutarde clair — survol, texte sur fond sombre */
  --cream:#f2e8d0;    /* texte clair sur le vert */
}

/* ------------------------------------------------------------------
   1. SIDEBAR DESKTOP — colonne pleine hauteur, logo en capitales
   espacées séparé par un double filet, liens verticaux, bordure
   droite en double filet doré (motif Art Déco répété dans les 3 zones).
   ------------------------------------------------------------------ */
html:not(#_) .sidebar{
  background:var(--dg);
  border-right:6px double var(--gold);
  box-shadow:2px 0 18px rgba(0,0,0,.25);
}
html:not(#_) .sidebar-inner{
  background:transparent;               /* le panneau blanc du gabarit disparaît */
  animation:sbFadeIn .7s ease-out both;  /* légère entrée au chargement */
}
@keyframes sbFadeIn{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:translateX(0)}
}

/* frise Art Déco fine qui dérive lentement en tête de colonne (surface
   étroite, jamais un grand aplat animé) */
html:not(#_) .sidebar-inner::before{
  content:"";
  display:block;
  height:8px;
  margin:0 0 18px;
  background-image:repeating-linear-gradient(135deg,var(--gold) 0 6px,transparent 6px 12px);
  background-size:24px 8px;
  opacity:.5;
  animation:chevronDerive 16s linear infinite;
}
@keyframes chevronDerive{to{background-position:120px 0}}

html:not(#_) .sb-logo{
  display:flex;align-items:center;gap:.6em;
  padding-bottom:14px;margin-bottom:12px;
  border-bottom:5px double var(--gold);
}
html:not(#_) .sb-logo-dot{color:var(--gold)}
html:not(#_) .sb-logo-text{
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-weight:700;
  font-size:1rem;
}

html:not(#_) .sb-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:22px}
html:not(#_) .sb-link{
  position:relative;
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.8rem;
  font-weight:600;
  padding:10px 6px;
  transition:color .2s ease;
}
html:not(#_) .sb-link .sb-ico{color:var(--gold);transition:transform .2s ease}
html:not(#_) .sb-link::after{
  content:"";
  position:absolute;left:6px;right:6px;bottom:4px;
  height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
html:not(#_) .sb-link:hover, html:not(#_) .sb-link.active{color:var(--gold-lt)}
html:not(#_) .sb-link:hover .sb-ico, html:not(#_) .sb-link.active .sb-ico{transform:translateX(2px)}
html:not(#_) .sb-link:hover::after, html:not(#_) .sb-link.active::after{transform:scaleX(1)}

html:not(#_) .sb-map-quick-link{
  display:inline-flex;align-items:center;gap:.5em;
  margin-bottom:16px;padding:8px 14px;
  border:2px solid var(--gold);border-radius:999px;
  color:var(--gold-lt);
  text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;
  transition:background .2s ease,color .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{background:var(--gold);color:var(--dg)}

html:not(#_) .sb-section-title{
  border-top:4px double var(--gold);
  padding-top:10px;margin-top:4px;margin-bottom:8px;
  color:var(--gold);
  text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:700;
}
html:not(#_) .sb-silo-region{
  color:var(--cream);
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:700;
}
html:not(#_) .sb-chevron{color:var(--gold)}
html:not(#_) .sb-silo-ville{
  color:rgba(242,232,208,.78);
  font-size:.75rem;
  transition:color .2s ease,padding-left .2s ease;
}
html:not(#_) .sb-silo-ville:hover{color:var(--gold-lt);padding-left:4px}

html:not(#_) .sidebar-inner{scrollbar-width:thin;scrollbar-color:rgba(217,165,33,.5) transparent}

/* ------------------------------------------------------------------
   2. BANDEAU + BARRE D'ONGLETS MOBILES — bandeau sombre (vert profond),
   CTA en pilule dorée, double filet en séparateur de blocs.
   ------------------------------------------------------------------ */
html:not(#_) .mobile-guest-top{background:var(--dg)}
html:not(#_) .mobile-guest-head{
  border-bottom:3px double var(--gold);
  padding:10px 14px;
}
html:not(#_) .mobile-guest-brand{
  color:var(--cream) !important;
  text-transform:uppercase;letter-spacing:.2em;font-weight:700;
}
html:not(#_) .mobile-guest-login{
  color:var(--gold-lt) !important;
  border:2px solid var(--gold);border-radius:999px;
  padding:5px 14px;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;
}
html:not(#_) .mobile-guest-cta{background:var(--dg2);padding:10px 14px 12px}
html:not(#_) .mobile-guest-cta-offer{color:var(--cream);text-transform:uppercase;letter-spacing:.08em;font-size:.66rem;opacity:.85}
html:not(#_) .mobile-guest-cta-kw{color:var(--gold-lt);font-weight:700}
html:not(#_) .mobile-guest-timer-label{color:rgba(242,232,208,.7);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}
html:not(#_) .mobile-guest-timer{color:var(--gold);font-weight:700}
html:not(#_) .mobile-guest-cta-btn{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;
  background:linear-gradient(135deg,var(--gold-lt),var(--gold));
  color:var(--dg) !important;
  border-radius:999px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-size:.84rem;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.38)}

html:not(#_) .bottom-bar{
  background:var(--dg2);
  border-top:5px double var(--gold);
}
html:not(#_) .btab{color:rgba(242,232,208,.72);transition:color .2s ease}
html:not(#_) .btab-ico{transition:transform .2s ease}
html:not(#_) .btab.active{color:var(--gold-lt)}
html:not(#_) .btab.active .btab-ico, html:not(#_) .btab:hover .btab-ico{transform:translateY(-2px)}

/* ------------------------------------------------------------------
   3. FOOTER — même vert profond, double filet en tête, logo en
   capitales très espacées avec double soulignement, liens présentés
   en 4 fausses colonnes (mise en page multi-colonnes CSS) séparées
   par des filets doubles — le gabarit ne fournit qu'une seule liste
   de liens à plat, pas de titres de colonne dans le HTML.
   ------------------------------------------------------------------ */
html:not(#_) .footer-v2{
  background:var(--dg);
  border-top:6px double var(--gold);
  padding:34px 0 26px;
}
html:not(#_) .footer-row{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
html:not(#_) .footer-logo{
  color:var(--gold) !important;
  text-transform:uppercase;letter-spacing:.3em;font-weight:700;font-size:1.05rem;
  padding-bottom:10px;
  border-bottom:5px double var(--gold);
}
html:not(#_) .footer-links{
  column-count:4;column-gap:2.2rem;column-rule:3px double var(--gold);
  max-width:900px;width:100%;text-align:left;
  padding-top:14px;border-top:3px double rgba(217,165,33,.5);
}
html:not(#_) .footer-links a{
  display:block;color:var(--cream);
  text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;
  padding:5px 0;break-inside:avoid;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
html:not(#_) .footer-links a:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
html:not(#_) .footer-copy{
  color:rgba(242,232,208,.65);
  text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;
}

/* footer sur une seule colonne sous 600 px, deux entre 600 et 860 px */
@media (max-width:600px){
  html:not(#_) .footer-links{column-count:1;column-rule:none;max-width:100%}
}
@media (min-width:601px) and (max-width:860px){
  html:not(#_) .footer-links{column-count:2}
}

/* ------------------------------------------------------------------
   Réduction de mouvement — coupe toutes les animations/transitions
   introduites ci-dessus.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html:not(#_) .sidebar-inner, html:not(#_) .sidebar-inner::before, html:not(#_) .sb-link, html:not(#_) .sb-link::after, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .btab-ico, html:not(#_) .footer-links a{
    animation:none !important;transition:none !important;
  }
}

@media (prefers-reduced-motion: reduce){html:not(#_) .sidebar-inner{animation:none !important;transition:none !important;}}
/* __END_DESIGN_SITE__ */