/*
 * Buchungslust: Google-Platz-Plakette auf den Bild-Kacheln (01.10.2026, Daniel/Claude).
 * Ticket-Abriss wie bei einer Bordkarte: Abschnitt in Glut mit dem Platz, Perforation mit ausgestanzten
 * Kerben, Rest in Sand mit Suchbegriff. Steht unten rechts neben der Linkzeile. Rueckbau: Ordner loeschen.
 */

/* Textbereich als Raster: alles volle Breite, nur Linkzeile und Plakette teilen sich die letzte Zeile. */
.sbt-kacheln-block .bl-rang-kachel .sbt-kacheln-stimmung-inhalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
}
.sbt-kacheln-block .bl-rang-kachel .sbt-kacheln-stimmung-inhalt > * {
  grid-column: 1 / -1;
}
.sbt-kacheln-block .bl-rang-kachel .sbt-kacheln-stimmung-inhalt > .sbt-kacheln-stimmung-los {
  grid-column: 1;
  white-space: nowrap;
}
.sbt-kacheln-block .bl-rang-kachel .sbt-kacheln-stimmung-inhalt > .bl-rang {
  grid-column: 2;
}

.sbt-kacheln-block .bl-rang {
  --bl-rang-stub: 42px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  max-width: 200px;
  border-radius: 7px;
  background: #f4efe7;
  color: #12262b;
  box-shadow: 0 8px 20px rgba(6, 16, 19, 0.35);
  pointer-events: none;
  -webkit-mask:
    radial-gradient(circle 4.5px at var(--bl-rang-stub) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 4.5px at var(--bl-rang-stub) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle 4.5px at var(--bl-rang-stub) 0, #0000 96%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 4.5px at var(--bl-rang-stub) 100%, #0000 96%, #000) bottom / 100% 51% no-repeat;
  transform: rotate(-2deg);
  transition: transform 0.4s ease;
}
.sbt-kacheln-block .bl-rang-kachel:hover .bl-rang {
  transform: rotate(0deg);
}
.sbt-kacheln-block .bl-rang-stub {
  flex: none;
  width: var(--bl-rang-stub);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0 5px;
  background: #d9652b;
  color: #fff;
  border-right: 1.5px dashed rgba(18, 38, 43, 0.45);
}
.sbt-kacheln-block .bl-rang-stub small {
  font: 700 7.5px/1 var(--sb-schrift-titel, "Montserrat", sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
}
.sbt-kacheln-block .bl-rang-stub b {
  font: 800 22px/1 var(--sb-schrift-titel, "Montserrat", sans-serif);
  margin-top: 2px;
}
.sbt-kacheln-block .bl-rang-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 11px 6px 9px;
  min-width: 0;
}
.sbt-kacheln-block .bl-rang-info small {
  font: 700 8px/1.2 var(--sb-schrift-titel, "Montserrat", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b04f1c;
  white-space: nowrap;
}
.sbt-kacheln-block .bl-rang-info small i {
  font-style: normal;
  color: rgba(18, 38, 43, 0.55);
  margin-left: 3px;
}
.sbt-kacheln-block .bl-rang-keyword {
  font: 700 12px/1.2 var(--sb-schrift-titel, "Montserrat", sans-serif);
  letter-spacing: -0.005em;
}

@media (prefers-reduced-motion: reduce) {
  .sbt-kacheln-block .bl-rang {
    transition: none;
  }
}