/* ══════════════════════════════════════════════════════════════════════════
   Kompakte Standortauswahl  ·  [glattt_standorte]
   ══════════════════════════════════════════════════════════════════════════

   Drei Darstellungen aus denselben Daten — Pillen, Foto-Streifen, Typo-Zeile.
   Gedacht für Footer und schmale Spalten, deshalb zwei Grundregeln:

   1. **Alle Farben kommen aus `--go-*`.** Der Footer ist mal creme, mal weiß,
      mal dunkel; getauscht wird nur der Token-Satz, nie eine Regel.
   2. **Die Enge wird am Container gemessen, nicht am Fenster.** Eine
      Footer-Spalte ist auch auf einem 1920-px-Bildschirm schmal — Media
      Queries würden dort das Desktop-Layout erzwingen.

   Die Schrift wird bewusst geerbt (`font-family: inherit`), damit das Element
   die Hausschrift der Seite trägt und keine zweite mitbringt.
   ══════════════════════════════════════════════════════════════════════════ */

.glattt-orte {
  --go-flaeche:    #FFFFFF;
  --go-text:       #1A1712;
  --go-schwach:    #6D6555;
  --go-linie:      rgba(225, 181, 32, .40);
  --go-band:       #BCEEE2;
  --go-band-hell:  #CDF3EA;
  --go-band-text:  #10312B;
  --go-tempo:      .24s;
  --go-kurve:      cubic-bezier(.22, 1, .36, 1);

  container-type: inline-size;
  container-name: glattt-orte;

  display: flex;
  flex-direction: column;
  gap: .85rem;
  font-family: inherit;
  color: var(--go-text);
}

/* Dunkler Untergrund: nur die Tokens wechseln */
.glattt-orte-grund-dunkel {
  --go-flaeche:  rgba(255, 255, 255, .06);
  --go-text:     #FBF7EC;
  --go-schwach:  #B6AC97;
  --go-linie:    rgba(225, 181, 32, .46);
}

/* Mint-Untergrund: Hier muss der Akzent tauschen — eine Mint-Leiste auf
   Mint wäre unsichtbar. Creme übernimmt die Rolle, Mint bleibt die Fläche. */
.glattt-orte-grund-mint {
  --go-flaeche:    rgba(255, 255, 255, .74);
  --go-text:       #10312B;
  --go-schwach:    #33665B;
  --go-linie:      rgba(154, 122, 18, .38);
  --go-band:       #FFFCF4;
  --go-band-hell:  #FFFFFF;
  --go-band-text:  #1A1712;
}

.glattt-orte-titel {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--go-schwach);
  line-height: 1.4;
}

/* Theme-Durchgriff: Salient gibt Links im Footer eigene Farben und
   Unterstreichungen — hier nicht. */
.glattt-orte .glattt-ort,
.glattt-orte .glattt-ort:hover,
.glattt-orte .glattt-ort:focus {
  text-decoration: none;
  box-shadow: none;
}
.glattt-orte .glattt-ort-pfeil {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  transition: transform var(--go-tempo) var(--go-kurve);
}

/* Einlauf: läuft erst, wenn das Element ins Bild kommt — im Footer wäre eine
   Animation beim Seitenaufruf längst vorbei, bevor jemand hinsieht.
   Ohne JavaScript (Klasse fehlt) ist alles regulär sichtbar. */
.glattt-orte.glattt-orte-animiert .glattt-ort {
  opacity: 0;
  transform: translateY(8px);
}
.glattt-orte.glattt-orte-animiert.ist-sichtbar .glattt-ort {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--go-kurve), transform .5s var(--go-kurve);
  transition-delay: calc(var(--glattt-ort-i, 0) * 55ms);
}

/* ══ Pillen ═══════════════════════════════════════════════════════════════ */
.glattt-orte-pillen .glattt-orte-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.glattt-orte-pillen .glattt-ort {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem 1rem .4rem .4rem;
  background: var(--go-flaeche);
  border: 1px solid var(--go-linie);
  border-radius: 999px;
  color: var(--go-text);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  transition: background var(--go-tempo) ease,
              border-color var(--go-tempo) ease,
              transform var(--go-tempo) var(--go-kurve);
}
.glattt-orte-pillen .glattt-ort-foto {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center;
  transition: transform .28s var(--go-kurve);
}
/* Ohne Foto (Institut ohne Bild) darf links kein Loch bleiben */
.glattt-orte-pillen .glattt-ort:not(:has(.glattt-ort-foto)) { padding-left: 1rem; }
.glattt-orte-pillen .glattt-ort:hover,
.glattt-orte-pillen .glattt-ort:focus-visible {
  background: var(--go-band);
  border-color: transparent;
  color: var(--go-band-text);
  transform: translateY(-2px);
}
.glattt-orte-pillen .glattt-ort:hover .glattt-ort-foto { transform: scale(1.09); }

/* ══ Foto-Streifen ════════════════════════════════════════════════════════ */
.glattt-orte-streifen .glattt-orte-reihe {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
}
.glattt-orte-streifen .glattt-ort {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--go-flaeche);
  border: 1px solid var(--go-linie);
  color: var(--go-text);
  transition: transform .26s var(--go-kurve), box-shadow .26s ease;
}
.glattt-orte-streifen .glattt-ort-foto {
  display: block;
  height: 74px;
  background-size: cover;
  background-position: center;
  transition: transform .45s var(--go-kurve);
}
/* Die Leiste ist im Streifen die Mint-Fläche: Text links, Pfeil rechts. */
.glattt-orte-streifen .glattt-ort-leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .7rem .55rem;
  background: var(--go-band);
  color: var(--go-band-text);
  transition: background var(--go-tempo) ease;
}
.glattt-orte-streifen .glattt-ort-text { min-width: 0; }
.glattt-orte-streifen .glattt-ort-stadt,
.glattt-orte-streifen .glattt-ort-strasse {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glattt-orte-streifen .glattt-ort-stadt {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}
.glattt-orte-streifen .glattt-ort-strasse {
  font-size: .7rem;
  opacity: .72;
}
.glattt-orte-streifen .glattt-ort:hover,
.glattt-orte-streifen .glattt-ort:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .55);
}
.glattt-orte-streifen .glattt-ort:hover .glattt-ort-foto { transform: scale(1.07); }
.glattt-orte-streifen .glattt-ort:hover .glattt-ort-leiste { background: var(--go-band-hell); }
.glattt-orte-streifen .glattt-ort:hover .glattt-ort-pfeil { transform: translateX(3px); }

/* ══ Typo-Zeile ═══════════════════════════════════════════════════════════ */
.glattt-orte-typo .glattt-orte-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.glattt-orte-typo .glattt-ort {
  display: flex;
  padding: .1rem 1.35rem;
  border-left: 1px solid var(--go-linie);
  color: var(--go-text);
}
.glattt-orte-typo .glattt-ort:first-child {
  border-left: 0;
  padding-left: 0;
}
.glattt-orte-typo .glattt-ort-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
/* Pillen: die Leiste trägt nur den Namen, der Textblock bleibt eine Zeile */
.glattt-orte-pillen .glattt-ort-leiste,
.glattt-orte-pillen .glattt-ort-text { display: inline-flex; align-items: center; }
.glattt-orte-typo .glattt-ort-stadt {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  position: relative;
  display: inline-block;
}
/* Unterstreichung wächst von links — kein Farbwechsel nötig, damit die Zeile
   auf jedem Untergrund gleich funktioniert. */
.glattt-orte-typo .glattt-ort-stadt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--go-band);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--go-kurve);
}
.glattt-orte-typo .glattt-ort:hover .glattt-ort-stadt::after,
.glattt-orte-typo .glattt-ort:focus-visible .glattt-ort-stadt::after {
  transform: scaleX(1);
}
.glattt-orte-typo .glattt-ort-strasse {
  font-size: .74rem;
  color: var(--go-schwach);
}

/* ══ Tastatur ═════════════════════════════════════════════════════════════ */
.glattt-orte .glattt-ort:focus-visible {
  outline: 2px solid var(--go-linie);
  outline-offset: 3px;
  border-radius: 6px;
}
.glattt-orte-pillen .glattt-ort:focus-visible { border-radius: 999px; }

/* ══ Enge Container ═══════════════════════════════════════════════════════ */
@container glattt-orte (max-width: 620px) {
  .glattt-orte-streifen .glattt-orte-reihe { grid-template-columns: repeat(2, 1fr); }
  .glattt-orte-typo .glattt-orte-reihe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem 0;
  }
  .glattt-orte-typo .glattt-ort:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@container glattt-orte (max-width: 380px) {
  .glattt-orte-streifen .glattt-ort-foto { height: 58px; }
}

/* Ohne Container-Query-Unterstützung (ältere Browser) greift ersatzweise die
   Fensterbreite — gröber, aber besser als ein Überlauf. */
@supports not (container-type: inline-size) {
  @media (max-width: 620px) {
    .glattt-orte-streifen .glattt-orte-reihe { grid-template-columns: repeat(2, 1fr); }
    .glattt-orte-typo .glattt-orte-reihe {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem 0;
    }
    .glattt-orte-typo .glattt-ort:nth-child(odd) { border-left: 0; padding-left: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .glattt-orte *,
  .glattt-orte *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .glattt-orte.glattt-orte-animiert .glattt-ort { opacity: 1; transform: none; }
}