/* =========================================================================
   Baender auf der Startseite (11.10.2026)

   Eine Mechanik, zwei Baender: die Staedte (.kcr-tile) und die Kategorien
   (.kcat). Das Laufwerk steckt in .kcr / .kcr-rail / .kcr-nav und in
   resources/views/partials/rail-loop.blade.php — wer ein drittes Band
   braucht, nimmt dieselben drei Klassen und haengt nur seine Kacheln hinein.

   Eine Reihe, die sich endlos dreht: die Staedte stehen DREIMAL im Band,
   und sobald der Blick den zweiten Satz verlaesst, wird um genau eine
   Satzbreite zurueckgesetzt. Weil der Inhalt identisch ist, sieht niemand
   den Sprung — das ist der "Casino"-Eindruck, ohne dass eine Animation
   laufen muss, die auf dem Telefon Strom frisst.

   Reines CSS mit eigenen Namensraeumen: das Tailwind-Bundle ist seit
   23.08. eingefroren, neue Utility-Klassen kaemen nicht mehr an.
   Durchgaengig logische Eigenschaften, damit /ar ohne zweites Regelwerk
   laeuft.
   ========================================================================= */

.kcr {
    --kcr-green: var(--ksa-green, #006C35);
    --kcr-green-dark: var(--ksa-green-dark, #004F26);
    position: relative;
}

/* Das Band selbst: waagerecht scrollbar, Leiste unsichtbar. */
.kcr-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    /* KEIN scroll-behavior: smooth hier. Mit der CSS-Eigenschaft wird auch eine
       einfache Zuweisung von scrollLeft animiert — und eine solche Animation
       wird in einem nicht sichtbaren Tab und bei "reduzierte Bewegung" still
       verworfen, das Band steht dann einfach. Das Weiche macht go() selbst,
       mit hartem Rueckfall. */
    scroll-behavior: auto;
    /* Ein waagerechtes Wischen bis an den Rand soll nicht die Zurueck-Geste des
       Browsers ausloesen — auf dem Telefon sonst ein Seitenwechsel statt eines
       Karussells. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0 8px;
}
.kcr-rail::-webkit-scrollbar { display: none; }
/* Die Kategoriereihe steht bei der Vorlage mit 24 Luecke, die Staedtereihe
   mit 16 — deshalb eine Variante statt eines festen Werts. */
.kcr-rail--24 { gap: 24px; }

/* ================================================================== Kachel */
.kcr-tile {
    position: relative;
    flex: 0 0 auto;
    width: 240px;
    aspect-ratio: 3 / 2;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: var(--kcr-green-dark);
    isolation: isolate;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kcr-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 79, 38, .22); }
.kcr-tile:focus-visible { outline: 3px solid var(--kcr-green); outline-offset: 3px; }

.kcr-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.kcr-tile:hover img { transform: scale(1.05); }

/* Der gruene Schleier. Zwei Staerken, denn er hat zwei Aufgaben:
   - ueber dem Wahrzeichen-SVG (Rueckfall) traegt er die ganze Flaeche und
     darf kraeftig sein;
   - ueber einem echten Stadtfoto darf er nur noch tragen, was der Name
     braucht. Kraeftig ueber einem Foto frisst das Bild auf — die Kachel sah
     dann aus wie ein gruener Block (11.10.2026 am lebenden Objekt gesehen).
   Deshalb bekommt eine Kachel mit Foto .kcr-tile--foto und einen leichten
   Verlauf: oben offen, unten gerade so viel, dass Weiss auf Weiss nicht
   passieren kann. */
.kcr-veil {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 108, 53, .10) 0%, rgba(0, 108, 53, .30) 45%, rgba(0, 62, 30, .88) 100%);
}
.kcr-tile--foto .kcr-veil {
    background:
        linear-gradient(180deg, rgba(0, 108, 53, .00) 0%, rgba(0, 86, 42, .14) 52%, rgba(0, 54, 26, .74) 100%);
}

/* Fallback, solange fuer eine Stadt noch kein Foto da ist: das vorhandene
   Wahrzeichen auf der Markenflaeche. */
.kcr-mark {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(160deg, #0b7a3f 0%, var(--kcr-green) 55%, var(--kcr-green-dark) 100%);
}
.kcr-mark svg { width: 64px; height: 64px; color: rgba(255,255,255,.9); }

.kcr-name {
    position: absolute; z-index: 2; inset-inline-start: 14px; inset-block-end: 12px;
    color: #fff; font-size: 17px; line-height: 22px; font-weight: 700;
    text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.kcr-name small { display: block; font-size: 13px; line-height: 18px; font-weight: 500; opacity: .85; }

/* ================================================================== Pfeile */
.kcr-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid #e4e4e7; border-radius: 999px;
    background: #fff; color: #18181b; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.kcr-nav:hover { background: var(--kcr-green); border-color: var(--kcr-green); color: #fff; }
.kcr-nav:focus-visible { outline: 3px solid var(--kcr-green); outline-offset: 2px; }
.kcr-prev { inset-inline-start: -18px; }
.kcr-next { inset-inline-end: -18px; }
[dir="rtl"] .kcr-nav svg { transform: scaleX(-1); }

@media (max-width: 767px) {
    .kcr-tile { width: 180px; border-radius: 12px; }
    .kcr-name { font-size: 15px; line-height: 20px; }
    .kcr-name small { font-size: 12px; }
    /* Auf dem Telefon wischt man; die Pfeile wuerden nur Platz kosten. */
    .kcr-nav { display: none; }
}

/* =========================================================================
   Kategorie-Karte (.kcat) — Aufbau und Masse an mobile.de „Ausgewaehlte
   Kategorien" vermessen (11.10.2026, 1440 px):
     Karte 205 x 179, Radius 16, innen 16, Luecke 24
     Buehne 91 hoch · Luecke 16 · Fusszeile 40  (16+91+16+40+16 = 179)
     Symbolkachel 40 x 40 Radius 8, danach 12 Abstand
     Titel 16/20 Gewicht 700 · Unterzeile 12/20 Gewicht 400

   Zwei Entscheidungen des Inhabers (11.10.2026), die vom Vorbild abweichen:

   1. EINE Karte, EIN Verlauf. Erst lief Markengruen gegen Weiss im Wechsel,
      das zerriss die Reihe; dann waren alle acht voll gruen, das wurde eine
      Wand. Jetzt: die Karte ist oben weiss mit schwarzer Schrift und laeuft
      nach unten in ein sehr helles Gruen aus. Die Zeichen stehen damit so da
      wie auf einem echten Schild — dunkel auf Weiss — und die Marke kommt
      von unten dazu, wo das Symbol und der Titel sitzen.

   2. KEIN Schild auf der Buehne. Dort stand das ganze Bauteil <x-ksa-plate>
      mit Rahmen, Zellen und Wappen — bei 91 px Hoehe ein Haufen Linien, und
      achtmal nebeneinander ein Zaun. Jetzt stehen nur noch die ZEICHEN da,
      als Satz: oben die arabische Zeile (Ziffern links, Buchstaben rechts),
      darunter die lateinische. Das ist genau die Anordnung eines saudischen
      Kennzeichens, nur ohne Blech.
   ========================================================================= */
.kcat {
    --kcat-green: var(--ksa-green, #006C35);
    /* Groesse kommt je Karte aus dem Markup (--kcat-basis, --kcat-bst), der
       Telefonmassstab aus der Medienabfrage. Zwei getrennte Groessen, weil ein
       Wert im style-Attribut jede Medienabfrage schlaegt. */
    --kcat-skala: 1;
    flex: 0 0 auto;
    width: 205px;
    min-height: 179px;
    padding: 16px;
    /* Kein echter Rahmen: der wuerde 2 px addieren und die vermessene Hoehe
       von 179 auf 181 treiben. */
    border: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    /* Oben weiss, unten ein Hauch Gruen. Die obere Haelfte bleibt bewusst rein
       weiss, damit die Zeichen darauf wie auf einem Schild stehen; der Verlauf
       setzt erst darunter ein und traegt die Fusszeile. */
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #ffffff 38%,
            rgba(0, 132, 61, .07) 66%,
            rgba(0, 132, 61, .22) 100%);
    /* Die Linie ist ein innerer Schatten, kein Rahmen: ein echter Rahmen wuerde
       2 px addieren und die vermessene Hoehe von 179 auf 181 treiben. */
    box-shadow: inset 0 0 0 1px rgba(9, 24, 16, .09), 0 1px 2px rgba(9, 24, 16, .04);
    transition: transform .18s ease, box-shadow .18s ease;
}
.kcat:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(0, 108, 53, .38), 0 14px 30px rgba(0, 62, 30, .16);
}
.kcat:focus-visible { outline: 3px solid var(--kcat-green); outline-offset: 3px; }

/* ================================================= Buehne: nur die Zeichen */
.kcat-stage { height: 91px; display: grid; place-items: center; }

/* Zwei Zeilen, zwei Spalten — Ziffern links, Buchstaben rechts, genau wie auf
   dem Schild. Die Spalten stehen untereinander auf einer Kante, deshalb ein
   Raster und keine zwei getrennten Zeilen. */
.kcat-zeichen {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 15px;
    row-gap: 7px;
    justify-content: center;
    align-items: baseline;
    color: #111318;
    direction: ltr;
}
.kcat-ziffer {
    font-size: calc(var(--kcat-basis, 40px) * var(--kcat-skala));
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}
.kcat-buchstabe {
    font-size: calc(var(--kcat-basis, 40px) * var(--kcat-skala) * var(--kcat-bst, .60));
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: .06em;
    color: #4b5159;
    white-space: nowrap;
}
/* Die lateinische Zeile ist die Lesehilfe, nicht die Hauptsache. */
.kcat-lat {
    font-size: 11px; line-height: 16px; font-weight: 600;
    letter-spacing: .16em;
    /* 11 px brauchen 4,5:1 — #8b9099 kam nur auf 3,07 gegen das fast weisse
       Feld und war damit die einzige Stelle der Karte unter der Schwelle. */
    color: #6b7079;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kcat-lat--l { letter-spacing: .22em; }

/* ================================================================ Fusszeile */
.kcat-foot { display: flex; align-items: center; gap: 12px; height: 40px; margin-top: 16px; }
.kcat-ico {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px;
    display: grid; place-items: center; font-size: 17px;
    /* Weisse Kachel auf dem leicht gruenen Grund: das Symbol bekommt damit
       eine klare Kante, ohne dass ein zweiter Farbton dazukommt. */
    background: #fff; color: var(--kcat-green);
    box-shadow: inset 0 0 0 1px rgba(0, 108, 53, .20);
}
.kcat-txt { min-width: 0; }
.kcat-h { display: block; font-size: 16px; line-height: 20px; font-weight: 700; color: #111318; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcat-p { display: block; font-size: 12px; line-height: 20px; font-weight: 400; color: #5b6269; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 767px) {
    .kcat { width: 182px; min-height: 170px; --kcat-skala: .86; }
    .kcat-h { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .kcat, .kcat:hover { transition: none; transform: none; }
}

/* =========================================================================
   Plattenkarte im Band (.kpp) — „Popular Plates", 12.10.2026

   Vorher ein 3er-Raster ueber drei Zeilen. Der Inhaber wollte EINE Zeile,
   endlos in beide Richtungen, und pro Druck genau EINE Karte weiter — das
   Band traegt deshalb data-schritt="1" (siehe partials/rail-loop).

   Breite 352 + 24 Luecke = 376: bei 1232 Spaltenbreite stehen drei Karten
   ganz da und die vierte lugt hervor. Dieses Hervorlugen ist Absicht, es ist
   das einzige, was ohne Pfeil verraet, dass es weitergeht.
   ========================================================================= */
.kpp {
    flex: 0 0 auto;
    width: 352px;
    display: block;
    padding: 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #f0f1f2, 0 1px 2px rgba(9, 24, 16, .04);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kpp:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(0, 108, 53, .30), 0 14px 30px rgba(0, 62, 30, .12);
}
.kpp:focus-visible { outline: 3px solid var(--ksa-green, #006C35); outline-offset: 3px; }

/* Feste Buehne: eine lange und eine quadratische Platte brauchen gleich viel
   Platz, sonst stehen die Preise darunter nicht auf einer Linie. */
.kpp-stage { height: 130px; display: grid; place-items: center; }
.kpp-stage > div { width: 100%; margin-inline: auto; }

.kpp-foot { text-align: center; margin-top: 16px; }
.kpp-preis { display: block; font-size: 20px; line-height: 26px; font-weight: 800; color: var(--ksa-green, #006C35); }
.kpp-views { display: block; font-size: 12px; line-height: 18px; color: #6b7079; margin-top: 2px; font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
    .kpp { width: 290px; padding: 18px; }
    .kpp-stage { height: 112px; }
}

/* ======================================================= Buchstabenkarte (.klet)
   Die 17 Buchstaben laufen seit dem 13.10.2026 als EINE Zeile im Endlosband
   statt als 6er-Raster (Inhaber). Bewusst schmal: als Laufband soll die Reihe
   lesbar bleiben und nicht als Wand wirken. Aussehen wie die Rasterkarte
   vorher -- weiss, heller Rahmen, gruen beim Zeigen.

   Der Rahmen steckt in einem inneren Schatten und nicht in `border`: ein echter
   Rahmen addiert 2 px und verschiebt die Satzbreite, mit der das Laufwerk
   rechnet. Dieselbe Ueberlegung wie bei .kcat. */
.klet {
    flex: 0 0 auto;
    width: 118px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 14px 10px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e4e4e7;
    text-decoration: none;
    transition: box-shadow .16s ease, transform .16s ease;
}
.klet:hover {
    box-shadow: inset 0 0 0 1px var(--kcr-green), 0 6px 16px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}
.klet:focus-visible { outline: 3px solid var(--kcr-green); outline-offset: 3px; }
.klet-ar {
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: #18181b;
    direction: rtl;
}
.klet:hover .klet-ar { color: var(--kcr-green); }
.klet-la {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
    color: #a1a1aa;
}
@media (max-width: 640px) {
    .klet { width: 104px; min-height: 84px; }
    .klet-ar { font-size: 26px; }
}