/* ================================================================
   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} }

/* ================================================================
   BEITRAGSREIHE_SLIDER_2026_09_11 (Franz 11.09.2026, woertlich):
     "Gastgeberbeitraege maximal 3 sichtbar. mit Pfeil links und rechts scroll bar."

   Dieselbe Reihe wie oben, nur mit DREI statt fuenf sichtbaren Kacheln. Die
   Beitragskachel traegt Bild, Zeile, Headline und Teaser - bei fuenf nebeneinander
   waere davon nichts mehr zu lesen. Einen festen Teil gibt es hier nicht: bei den
   Beitraegen steht kein Anker vorn, alle drei rollen mit.

   Die Breakpoints stehen bewusst HIER und nicht in den Seiten - der Dateikopf oben
   verlangt das, damit eine Aenderung nicht an drei Stellen nachgezogen werden muss.
   Sie stehen hinter den allgemeinen Regeln, deshalb gewinnen sie bei gleicher
   Spezifitaet.
   ================================================================ */
.kachelreihe.beit-reihe{--ks-sichtbar:3}
@media(max-width:1250px){ .kachelreihe.beit-reihe{--ks-sichtbar:2} }
@media(max-width:900px){  .kachelreihe.beit-reihe{--ks-sichtbar:2} }
@media(max-width:640px){  .kachelreihe.beit-reihe{--ks-sichtbar:1.15} }

/* Ist gar kein Beitrag da, steht statt der Kacheln ein Hinweiskasten in der Spur.
   Der darf nicht auf Kachelbreite schrumpfen - er bekommt die ganze Reihe.
   Die Pfeile blendet kachelSlider.js von selbst aus, sobald es nichts zu rollen gibt. */
.kr-track.kr-leer{width:100%}
.kr-track.kr-leer > *{flex:1 1 100%; width:100%}