/* =========================================================
   K&S AUTOMOBILE — Selecteur de langue (drapeaux)
   ---------------------------------------------------------
   Charge sur toutes les pages publiques par layout/head.php,
   apres style.css et avant les feuilles propres aux pages.
   Balisage : app/Views/partials/sprachwahl.php.

   Regles :
   - les drapeaux ne sont JAMAIS masques, a aucune largeur ;
   - cible tactile >= 32 px, meme sur les plus petits ecrans ;
   - l'en-tete est sombre dans ses deux etats (.transparent
     sur le hero, .solid apres defilement) : un seul jeu de
     couleurs suffit ;
   - langue active : pleine opacite + anneau dore ; l'autre
     est attenuee, et reprend sa couleur au survol et au focus.

   Les paliers suivent ceux de l'en-tete dans style.css au
   10.09.2026 : telephone masque <= 1260, burger <= 1120, logo
   comprime <= 560, bouton masque <= 540, sous-titre masque
   <= 360, nom masque <= 300. Si ces paliers changent, refaire
   la mesure (logo + drapeaux + bouton + burger <= largeur utile).
   ========================================================= */

.sprachwahl{
  display:flex;align-items:center;gap:0;
  flex:none;
}

/* 2 x 32 px = 64 px : la cible tactile minimale, sans marge perdue. */
.sprachwahl__link{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex:none;
  border-radius:8px;
  opacity:.6;
  transition:opacity .25s ease,transform .25s ease;
  -webkit-tap-highlight-color:transparent;
}

.sprachwahl__flagge{
  display:block;width:24px;height:16px;
  border-radius:3px;overflow:hidden;
  /* Liseré discret : le noir du drapeau allemand ne se fond pas dans l'en-tete. */
  box-shadow:0 0 0 1px rgba(255,255,255,.3);
  filter:saturate(.7);
  transition:box-shadow .25s ease,filter .25s ease;
}
.sprachwahl__flagge svg{display:block;width:100%;height:100%;}

/* Langue active */
.sprachwahl__link[aria-current="true"]{opacity:1;}
.sprachwahl__link[aria-current="true"] .sprachwahl__flagge{
  filter:none;
  box-shadow:0 0 0 2px var(--gold-2,#e9cc6d),0 0 0 4px rgba(233,204,109,.2);
}

/* Survol et focus clavier */
.sprachwahl__link:hover,
.sprachwahl__link:focus-visible{opacity:1;}
.sprachwahl__link:hover .sprachwahl__flagge,
.sprachwahl__link:focus-visible .sprachwahl__flagge{filter:none;}
.sprachwahl__link:not([aria-current="true"]):hover .sprachwahl__flagge{
  box-shadow:0 0 0 2px rgba(255,255,255,.75);
}
.sprachwahl__link:focus{outline:none;}
.sprachwahl__link:focus-visible{
  outline:2px solid var(--gold-2,#e9cc6d);outline-offset:1px;
}
@media (hover:hover){
  .sprachwahl__link:not([aria-current="true"]):hover{transform:translateY(-1px);}
}
@media (prefers-reduced-motion:reduce){
  .sprachwahl__link,.sprachwahl__flagge{transition:none;}
  .sprachwahl__link:hover{transform:none;}
}

/* Contraste renforce (Windows) : les drapeaux restent visibles et
   la langue active garde un repere. */
@media (forced-colors:active){
  .sprachwahl__link{opacity:1;}
  .sprachwahl__link[aria-current="true"]{outline:2px solid CanvasText;outline-offset:1px;}
}

/* ---------------------------------------------------------
   Place dans l'en-tete
   ---------------------------------------------------------
   Les drapeaux occupent 64 px + un ecart. L'en-tete etait deja
   au plus juste (le conteneur plafonne a 1180 px, soit 1132 px
   utiles) : cette place est reprise sur les espacements, palier
   par palier, pour qu'aucun lien ne passe sur deux lignes et que
   le burger reste toujours dans l'ecran. Aucun element n'est
   masque ici : les paliers de masquage restent ceux de style.css.
   --------------------------------------------------------- */

/* Navigation visible (> 1120 px) */
@media (min-width:1121px){
  .header-inner{gap:16px;}
  .main-nav{gap:0;}
  .main-nav a{padding-left:11px;padding-right:11px;}
  .main-nav a.active::after{left:11px;right:11px;}
  .header-actions{gap:10px;}
  .site-header .header-actions .btn-sm{padding-left:16px;padding-right:16px;}
}
/* Navigation + telephone (> 1260 px) : configuration la plus serree,
   le conteneur plafonnant a 1132 px utiles quelle que soit la largeur. */
@media (min-width:1261px){
  .main-nav a{padding-left:8px;padding-right:8px;}
  .main-nav a.active::after{left:8px;right:8px;}
}

/* Burger (<= 1120 px) */
@media (max-width:1120px){
  .header-actions{gap:10px;}
}
/* Bouton encore visible et logo pas encore comprime (561-640 px) */
@media (min-width:561px) and (max-width:640px){
  .header-inner{gap:12px;}
  .header-actions{gap:8px;}
  .site-header .header-actions .btn-sm{padding-left:16px;padding-right:16px;}
}

/* Logo comprime (<= 560 px, style.css) */
@media (max-width:560px){
  .header-inner{gap:12px;}
  .header-actions{gap:8px;}
  .sprachwahl__flagge{width:22px;height:15px;}
  /* Le sous-titre anglais (« Car Dealership Wesermünde ») est plus long que
     le nom de marque : il passe sur deux lignes au lieu d'elargir le logo et
     de pousser le burger hors de l'ecran. Le sous-titre allemand tient sur
     une ligne et n'est pas touche. */
  html[lang="en"] .logo-word span{width:0;min-width:100%;}
}

/* Bouton « Jetzt verkaufen » masque (<= 540 px) : logo + drapeaux + burger.
   Les ecarts ne se resserrent qu'en dessous de 430 px, la place suffit avant. */
@media (max-width:430px){
  .header-inner{gap:10px;}
  .header-actions{gap:6px;}
  .logo{gap:10px;}
  .nav-toggle{width:40px;height:40px;}
}
@media (max-width:380px){
  .logo-word b{font-size:.94rem;}
  .logo-word span{letter-spacing:.04em;}
}
@media (max-width:340px){
  .header-inner{gap:8px;}
  .logo{gap:8px;}
  .logo-word b{font-size:.88rem;letter-spacing:0;}
}
@media (max-width:320px){
  .header-inner{gap:6px;}
  .header-actions{gap:4px;}
  .logo{gap:6px;}
  .logo-word b{font-size:.8rem;}
  .nav-toggle{width:38px;height:38px;}
}
/* <= 300 px : style.css ne garde que le monogramme. */
@media (max-width:300px){
  .header-actions{gap:6px;}
  .sprachwahl__flagge{width:20px;height:13px;}
}