/* __DESIGN_SITE__ */
/* ===================================================================
   Habillage unique — sextreff-mecklenburg-vorpommern.de (Astro)
   Direction : bleu Baltique + blanc + sable clair, registre « plage ».
   Zones stylées : sidebar desktop (.sidebar-inner / .sb-nav / .sb-silo-*),
   bandeau mobile (.mobile-guest-top) + barre d'onglets basse (.bottom-bar),
   footer (.footer-v1). Rien d'autre n'est touché.
   =================================================================== */

html:not(#_){
  --baltique:#01579b;       /* bleu Baltique, couleur de marque du site */
  --baltique-profond:#013a66;
  --baltique-clair:#4fc3f7; /* écume / ciel */
  --sable:#f4e6c4;
  --sable-fonce:#e3cd93;
  --ecume:#ffffff;
  --encre:#0b3550;          /* texte sur fond sable/blanc */
}

/* --- animations « plage » : filets d'eau qui dérivent lentement --- */
@keyframes derive-vague-fine{
  0%{background-position-x:0;} 100%{background-position-x:56px;}
}
@keyframes derive-vague-large{
  0%{background-position-x:0;} 100%{background-position-x:120px;}
}

/* ===================== SIDEBAR DESKTOP (fond blanc) ===================== */
/* Filet bleu ondulé en haut de la colonne, avant le logo */
html:not(#_) .sidebar-inner{
  background:var(--ecume);
  position:relative;
  padding-top:20px;
  scrollbar-width:thin;
  scrollbar-color:var(--sable-fonce) transparent;
}
html:not(#_) .sidebar-inner::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:8px;
  background-repeat:repeat-x;
  background-size:56px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8' preserveAspectRatio='none'%3E%3Cpath d='M0 4 C7 0 7 8 14 4 C21 0 21 8 28 4 C35 0 35 8 42 4 C49 0 49 8 56 4' fill='none' stroke='%2301579b' stroke-width='2'/%3E%3C/svg%3E");
  animation:derive-vague-fine 9s linear infinite;
}

html:not(#_) .sb-logo-text{color:var(--baltique);font-weight:800;letter-spacing:.01em;}
html:not(#_) .sb-logo-dot{
  color:var(--baltique);
  background:var(--sable);
  border-radius:50%;
  padding:3px;
  display:inline-flex;
}

/* Disposition : la nav verticale devient une rangée de galets/pilules qui
   s'enroulent (flex-wrap), plus proche d'un ruban de plage qu'une liste. */
html:not(#_) .sb-nav{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 14px;}
html:not(#_) .sb-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(1,87,155,.22);
  background:var(--ecume); color:var(--baltique);
  font-weight:600; font-size:.85rem;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
html:not(#_) .sb-link:hover{
  background:var(--sable);
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(1,87,155,.18);
}
html:not(#_) .sb-link.active{
  background:linear-gradient(135deg,var(--baltique),var(--baltique-clair));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(1,87,155,.32);
}

html:not(#_) .sb-map-quick-link{
  display:inline-flex; align-items:center; gap:6px;
  margin:2px 0 12px; padding:8px 14px; border-radius:999px;
  background:var(--sable); color:var(--baltique-profond); font-weight:700; font-size:.82rem;
  transition:background .2s ease;
}
html:not(#_) .sb-map-quick-link:hover{background:var(--sable-fonce);}

html:not(#_) .sb-section-title{
  color:var(--baltique-profond); text-transform:uppercase;
  font-size:.72rem; letter-spacing:.11em; margin-top:16px;
}
html:not(#_) .sb-silo-region{color:var(--encre); font-weight:700;}
html:not(#_) .sb-silo-region:hover{color:var(--baltique);}
html:not(#_) .sb-chevron{color:var(--baltique);}
html:not(#_) .sb-silo-ville{color:var(--baltique); transition:color .15s ease;}
html:not(#_) .sb-silo-ville:hover{
  color:var(--baltique-profond);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--sable-fonce);
}

/* ===================== BANDEAU MOBILE (bleu Baltique) ===================== */
html:not(#_) .mobile-guest-top{
  background:linear-gradient(160deg,var(--baltique-profond),var(--baltique));
}
html:not(#_) .mobile-guest-head{border-bottom:1px solid rgba(255,255,255,.16);}
html:not(#_) .mobile-guest-brand{color:#fff; font-weight:800; letter-spacing:.01em;}
html:not(#_) .mobile-guest-login{
  color:#fff; background:rgba(255,255,255,.14);
  padding:6px 14px; border-radius:999px; font-weight:600; font-size:.82rem;
  transition:background .2s ease;
}
html:not(#_) .mobile-guest-login:hover{background:rgba(255,255,255,.24);}
html:not(#_) .mobile-guest-cta-offer{
  color:var(--sable); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em;
}
html:not(#_) .mobile-guest-cta-kw{color:#fff; font-weight:800; font-size:1rem;}
html:not(#_) .mobile-guest-timer-label{color:rgba(255,255,255,.72); font-size:.68rem;}
html:not(#_) .mobile-guest-timer{color:var(--sable); font-weight:800; font-variant-numeric:tabular-nums;}
html:not(#_) .mobile-guest-cta-btn{
  background:var(--sable); color:var(--baltique-profond); font-weight:800;
  border-radius:999px; padding:12px 18px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
html:not(#_) .mobile-guest-cta-btn:hover, html:not(#_) .mobile-guest-cta-btn:active{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.24);
}

/* ===================== BARRE D'ONGLETS BASSE (mobile) ===================== */
html:not(#_) .bottom-bar{background:var(--ecume); border-top:1px solid var(--sable-fonce);}
html:not(#_) .btab{color:#5b7386; transition:color .15s ease;}
html:not(#_) .btab.active{color:var(--baltique);}
html:not(#_) .btab.active .btab-ico{
  display:inline-flex; background:var(--sable); border-radius:50%; padding:4px;
}
html:not(#_) .btab-lbl{font-weight:600;}

/* ===================== FOOTER (sable, vagues bleues en haut) ===================== */
html:not(#_) .footer-v1{
  background:var(--sable);
  color:var(--encre);
  position:relative;
}
html:not(#_) .footer-v1::before{
  content:'';
  position:absolute; top:0; left:0; width:100%; height:20px;
  background-repeat:repeat-x;
  background-size:120px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 C15 2 15 18 30 10 C45 2 45 18 60 10 C75 2 75 18 90 10 C105 2 105 18 120 10 L120 20 L0 20 Z' fill='%2301579b'/%3E%3C/svg%3E");
  animation:derive-vague-large 15s linear infinite;
}
html:not(#_) .footer-v1 h4{color:var(--baltique-profond); font-size:.95rem; letter-spacing:.02em;}
html:not(#_) .footer-v1 p{color:var(--encre); opacity:.85;}
html:not(#_) .footer-v1 a{color:var(--baltique); text-decoration:none;}
html:not(#_) .footer-v1 a:hover{
  color:var(--baltique-profond);
  text-decoration:underline;
  text-decoration-style:wavy;
  text-decoration-color:var(--sable-fonce);
}

/* Disposition : 3 colonnes exactement (la 4e, vide, disparaît) et l'ordre
   met en avant les liens/villes ; le rappel de marque devient une carte. */
html:not(#_) .footer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
html:not(#_) .footer-grid > .footer-col:empty{display:none;}
html:not(#_) .footer-grid > .footer-col:nth-child(1){
  order:3; background:var(--ecume); border:1px solid var(--sable-fonce);
  border-radius:14px; padding:16px 18px; box-shadow:0 3px 10px rgba(1,87,155,.08);
}
html:not(#_) .footer-grid > .footer-col:nth-child(2){order:1;}
html:not(#_) .footer-grid > .footer-col:nth-child(3){order:2;}

html:not(#_) .footer-bottom{
  border-top:1px solid var(--sable-fonce);
  color:var(--encre); opacity:.7; text-align:center;
  padding-top:14px; margin-top:20px;
}

@media (max-width:700px){
  html:not(#_) .footer-grid{grid-template-columns:1fr;}
}

/* --- confort visuel : coupe toutes les dérives dès que demandé --- */
@media (prefers-reduced-motion:reduce){
  html:not(#_) .sidebar-inner::before, html:not(#_) .footer-v1::before{animation:none;}
  html:not(#_) .sb-link, html:not(#_) .mobile-guest-login, html:not(#_) .mobile-guest-cta-btn, html:not(#_) .btab{transition:none;}
}

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