/* ================================================================
   KACHELREIHE MIT SLIDER (Franz 20.08.2026)
   Eine Reihe, nie ein Umbruch. Links der feste Teil (Ankerkachel und,
   falls vorhanden, das Musterhotel) - der rollt nicht mit. Rechts die
   Kategorie-Kacheln in einem waagerechten Scroller, weiter per Pfeil um
   genau eine Kachel.

   ----------------------------------------------------------------
   FESTE REGEL (Franz 20.08.2026) - gilt fuer ALLE Magazine, heute und
   kuenftig:
   Die Ankerkachel bleibt IMMER links stehen und rollt NIE mit. Das ist
   kein Layoutdetail, sondern Teil des Versprechens an den 8XREGIOANKER:
   wer als erstes bucht, ist in jeder Ansicht sichtbar, ohne dass
   jemand scrollen muss. Wer diese Reihe umbaut, laesst den festen Teil
   fest - sonst ist das Verkaufsargument des Ankers weg.
   Einzige Ausnahme ist das Handy (siehe unten, ab 900px): dort waere
   eine fest stehende Kachel die halbe Bildschirmbreite, deshalb wischt
   die ganze Reihe am Stueck - der Anker steht dabei an erster Stelle
   und ist ohne Wischen zu sehen.
   ----------------------------------------------------------------

   --ks-sichtbar = wie viele Kacheln die REIHE INSGESAMT zeigt, den
   festen Teil eingerechnet. Desktop 5: also 1 Anker + 4 rollende, oder
   sobald das Musterhotel dazukommt 2 feste + 3 rollende. Immer fuenf.
   Genau darum steht hier die Gesamtzahl und nicht die Zahl der
   rollenden Kacheln - sonst haette die Reihe je nach festem Teil mal
   fuenf, mal sechs Kacheln und die Kachelbreite wuerde springen.
   kachelSlider.js liest den Wert und rechnet daraus EINE Kachelbreite
   --ks-w fuer feste und rollende Kacheln.
   Die Breakpoints stehen ausschliesslich hier.
   Erwartete Farb-Token der einbindenden Seite: --line-light, --navy,
   --gold, --muted.
   ================================================================ */
.kachelreihe{
  --ks-sichtbar:5; --ks-gap:18px; --ks-w:260px;
  display:flex; gap:var(--ks-gap); align-items:stretch;
}
.kr-fest{display:flex; gap:var(--ks-gap); flex:0 0 auto}
.kr-slider{position:relative; flex:1 1 0; min-width:0}
.kr-view{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  /* Luft fuer Schatten und den Hover-Lift der Karten, danach wieder abgezogen */
  padding:10px 0 14px; margin:-10px 0 -14px;
}
.kr-view::-webkit-scrollbar{display:none}
.kr-track{display:flex; gap:var(--ks-gap); width:max-content}
/* Bewusst klassenfrei: die Reihe traegt im Regionalmagazin .card-Kacheln,
   im Deutschland-Magazin .kat-Kacheln. */
.kr-fest > *, .kr-track > *{
  flex:0 0 var(--ks-w); width:var(--ks-w); scroll-snap-align:start;
}
.kr-pfeil{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; padding:0; border-radius:50%;
  border:1px solid var(--line-light,#e1e6ec); background:rgba(255,255,255,.95);
  color:var(--navy,#021e46); cursor:pointer; transition:.15s;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(2,30,70,.18);
}
.kr-pfeil svg{width:18px; height:18px; display:block}
.kr-pfeil:hover:not(:disabled){background:var(--gold,#c9a657); color:#00112e; border-color:var(--gold,#c9a657)}
.kr-pfeil:disabled{opacity:.3; cursor:default; box-shadow:none}
.kr-pfeil.links{left:-8px}
.kr-pfeil.rechts{right:-8px}

@media(max-width:1250px){ .kachelreihe{--ks-sichtbar:4} }
@media(max-width:900px){
  /* Ab hier rollt alles mit: die ganze Reihe wird selbst zum Scroller,
     der innere Viewport gibt das Scrollen ab (nie zwei ineinander).
     Der feste Teil loest sich auf - die einzige Ausnahme von der Regel
     oben, und auch hier steht der Anker als erste Kachel. */
  .kachelreihe{
    --ks-sichtbar:2;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
  }
  .kachelreihe::-webkit-scrollbar{display:none}
  .kr-slider{flex:0 0 auto}
  .kr-view{overflow:visible; scroll-snap-type:none; padding:0; margin:0}
  .kr-pfeil{display:none}
}
@media(max-width:640px){ .kachelreihe{--ks-sichtbar:1.15; --ks-gap:12px} }