/* Ladies Manager – Karten in Schwarz/Burgunder.
   Farben laufen über Variablen und lassen sich im Theme überschreiben. */

.lm-grid{
  --lm-ink:#0B0809;
  --lm-surface:#1B1416;
  --lm-line:rgba(201,162,39,.17);
  --lm-accent:#E41779;
  --lm-accent-soft:#F5348C;
  --lm-gold:#C9A227;
  --lm-text:#F2EAE4;
  --lm-muted:#9A8A80;
  --lm-mono:"DM Mono",ui-monospace,monospace;
  --lm-radius:14px;

  display:grid;
  /* Werte aus der Designvorlage: schmalere Kacheln, engeres Raster. */
  grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));
  gap:clamp(.6rem,1.2vw,.9rem);
}

@media(max-width:520px){
  .lm-grid{grid-template-columns:repeat(2,1fr)}
}

/* Auf schmalen Karten haben Region und Livecam nebeneinander keinen Platz –
   "International" allein füllt schon die halbe Breite. Deshalb stapeln sie
   sich dort untereinander an der linken Kante. */
/* Auf schmalen Karten bleibt die Zeile eine Zeile: Region links,
   Livecam rechts unter dem TOP-Abzeichen. Gestapelt links wäre das
   Livecam-Schild von TOP getrennt und würde unter der Region kleben. */
@media(max-width:640px){
  .lm-card__badges{gap:.3rem}
}

.lm-card{
  position:relative;
  border-radius:var(--lm-radius);
  overflow:hidden;
  background:var(--lm-surface);
  border:1px solid var(--lm-line);
  color:var(--lm-text);
  aspect-ratio:3/4;
  isolation:isolate;
  /* Der Inhalt sitzt unten, ohne absolute Positionierung. Das ist die
     Voraussetzung dafür, dass die unsichtbare Klickfläche des Namens
     sich auf die ganze Kachel bezieht und nicht nur auf den Textteil. */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:pointer;
  transition:transform .35s ease,border-color .35s ease;
}
.lm-card:hover{transform:translateY(-5px);border-color:rgba(228,23,121,.55)}

.lm-card > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  transition:transform .6s ease;
}
.lm-card:hover > img{transform:scale(1.05)}

.lm-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(10,7,9,0) 32%,rgba(10,7,9,.55) 58%,rgba(10,7,9,.96));
}

.lm-card__body{
  position:static;
  padding:.8rem;
}

.lm-card__name{
  font-size:1rem;
  font-weight:700;
  line-height:1.15;
  margin:0;
  letter-spacing:-.02em;
}
.lm-card__name a{color:inherit;text-decoration:none}
/* Deckt die gesamte Kachel ab: ein Klick irgendwo auf der Karte öffnet
   das Profil. Nummer und Preis liegen mit z-index:2 darüber und
   bleiben eigenständig anklickbar. */
.lm-card__name a::before{content:"";position:absolute;inset:0;z-index:1}

.lm-card__meta{
  font-family:var(--lm-mono);
  font-size:.68rem;
  color:var(--lm-muted);
  margin:.2rem 0 0;
}

.lm-card__rating{
  font-size:.78rem;
  color:var(--lm-accent-soft);
  letter-spacing:.1em;
  margin:.2rem 0 0;
}

/* Steht an der Stelle der Teaserzeile aus der Vorlage: höchstens zwei
   Zeilen, danach wird abgeschnitten. */
.lm-card__tags{
  font-size:.78rem;
  color:var(--lm-muted);
  margin:.15rem 0 .5rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Nummer und Preis liegen in einer gemeinsamen Zeile. Vorher waren es
   zwei inline-block-Elemente, die auf der Schriftlinie ausgerichtet
   wurden – dadurch saß die kleinere Preispille sichtbar zu hoch. */
.lm-card__aktion{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.55rem 0 0;
}

/* Die Nummer ist das Ziel der Karte. Vollflächig Gold wie in der
   Designvorlage: Gold liest sich als Einladung, ein rot gefüllter
   Knopf eher als Stopp. */
.lm-card__tel{
  position:relative;
  z-index:2;
  display:inline-block;
  margin:0;
  padding:.38rem .8rem;
  border-radius:999px;
  background:var(--lm-gold);
  color:#0B0809;
  font-family:var(--lm-mono);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.02em;
  text-decoration:none;
  transition:background .22s,transform .22s;
}
.lm-card__tel:hover{background:#E8CE7A;transform:translateY(-1px)}
.lm-card__tel[hidden]{display:none}

/* Schwarz auf dem kräftigen Pink bringt kaum etwas (4,5:1 statt 4,5:1).
   Erst der hellere Ton aus der Palette macht den Unterschied: 5,5:1. */
.lm-card__preis{
  display:flex;
  align-items:center;
  margin:0;
  padding:.32rem .65rem;
  border-radius:999px;
  background:var(--lm-accent-soft);
  color:#0B0809;
  font-family:var(--lm-mono);
  font-size:.58rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
}

.lm-card a:focus-visible{
  outline:2px solid var(--lm-accent-soft);
  outline-offset:3px;
}

.lm-empty{
  font-family:var(--lm-mono);
  font-size:.85rem;
  color:#9A8A80;
}

.screen-reader-text{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion:reduce){
  .lm-card,.lm-card > img,.lm-card__tel{transition:none}
  .lm-card:hover{transform:none}
  .lm-card:hover > img{transform:none}
}

/* ---------- Archivseiten ---------- */

.lm-archive{
  --lm-accent:#E41779;
  --lm-accent-soft:#F5348C;
  --lm-gold:#C9A227;
  --lm-muted:#9A8A80;
  --lm-line:rgba(201,162,39,.17);
  --lm-mono:"DM Mono",ui-monospace,monospace;
  padding-block:clamp(2.5rem,6vw,4.5rem);
}

.lm-wrap{width:min(100% - 2.5rem,1200px);margin-inline:auto}

.lm-eyebrow{
  font-family:var(--lm-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lm-text);
  font-weight:600;
  margin:0 0 1rem;
}


/* Wie im Kopfband der Startseite: der in <em> gesetzte Teil wird
   magenta, ohne kursiv zu werden. */
.lm-archive__title em{font-style:normal;color:var(--lm-accent);font-weight:500}

/* Gleiche Größe wie die H1 im Kopfband der Startseite. */
.lm-archive__title{
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0 0 1.2rem;
  max-width:22ch;
}
@media(max-width:640px){
  .lm-archive__title{font-size:clamp(1.5rem,7vw,2rem)}
}

.lm-archive__intro{
  max-width:60ch;
  color:var(--lm-muted);
  margin-bottom:clamp(2rem,4vw,3rem);
}

.lm-archive__text{
  max-width:66ch;
  color:var(--lm-muted);
  margin-top:clamp(2.5rem,5vw,4rem);
}

.lm-archive__links{margin-top:clamp(2rem,4vw,3rem)}

.lm-chips{display:flex;flex-wrap:wrap;gap:.55rem}
/* Deutlich als Schaltflächen erkennbar, aber nicht flächig gold – bei
   zehn Bundesländern nebeneinander wäre das erschlagend. */
.lm-chips a{
  font-size:.85rem;
  font-weight:500;
  text-decoration:none;
  padding:.55rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(201,162,39,.45);
  background:rgba(242,234,228,.05);
  color:var(--lm-text);
  transition:color .25s,border-color .25s,background .25s;
}
.lm-chips a:hover{color:#0B0809;border-color:#C9A227;background:#C9A227}

/* ---------- Profilseite ---------- */

.lm-single{
  --lm-ink:#0B0809;
  --lm-surface:#1B1416;
  --lm-line:rgba(201,162,39,.17);
  --lm-accent:#E41779;
  --lm-accent-soft:#F5348C;
  --lm-gold:#C9A227;
  --lm-text:#F2EAE4;
  --lm-muted:#9A8A80;
  --lm-mono:"DM Mono",ui-monospace,monospace;
  padding-block:clamp(2rem,5vw,3.5rem);
  color:var(--lm-text);
}

.lm-single__layout{
  display:grid;
  /* Bildspalte bewusst schmaler als die Textspalte – ein Hochformat in
     halber Seitenbreite wird sonst riesig. */
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
/* Mitlaufender Anrufkasten in der linken Spalte. */
.lm-single__mitlauf{
  position:sticky;
  top:5rem;
  margin-top:1rem;
  padding:1.1rem;
  border-radius:18px;
  border:1px solid var(--lm-line);
  background:linear-gradient(150deg,rgba(228,23,121,.20),rgba(27,20,22,.92));
  text-align:center;
}
.lm-single__mitlauf .lm-single__tel{
  font-size:1rem;
  padding:.6rem 1.2rem;
}
.lm-single__mitlauf .lm-single__preis{
  margin-top:.7rem;
}

@media(max-width:900px){
  .lm-single__layout{grid-template-columns:1fr}

  /* Einspaltig wird die linke Spalte aufgelöst: ihre Teile werden selbst
     zu Rasterfeldern und lassen sich damit einzeln sortieren. So steht
     der Webcam-Kasten ganz unten statt gleich hinter den Bildern. */
  .lm-single__seite{display:contents}

  .lm-single__media{
    order:1;
    max-width:20rem;
    margin-inline:auto;
  }
  .lm-single__info{order:2}

  /* Ohne eigene Reihenfolge stünde das Banner ganz oben – die aufgelöste
     Spalte macht es zu einem eigenen Rasterfeld. Es gehört hinter den
     Text mit den Vorlieben. */
  .lm-werbung{
    order:3;
    max-width:20rem;
    margin-inline:auto;
  }

  .lm-camblock{
    order:4;
    max-width:20rem;
    margin-inline:auto;
    margin-top:.5rem;
  }

  /* Einspaltig steht der Anrufblock ohnehin direkt über dem Text. */
  .lm-single__mitlauf{display:none}
}

/* Die linke Spalte wird über die volle Zeilenhöhe gestreckt. Nur so hat
   der mitlaufende Anrufkasten darin überhaupt Weg zum Wandern. */
.lm-single__seite{
  max-width:20rem;
  align-self:stretch;
}

.lm-single__media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--lm-line);
  background:var(--lm-surface);
}
/* Nur das Hauptbild, nicht die Galerie darunter. Festes Hochformat,
   damit eine sehr hohe Aufnahme die Seite nicht auseinanderzieht. */
.lm-single__media > img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
}
.lm-single__media img{width:100%;height:auto}


.lm-single__title em{font-style:normal;color:var(--lm-accent);font-weight:500}
/* Gleiche Größe wie die H1 im Kopfband der Startseite. Die Profilseite
   behält ihre größere Fassung – dort ist der Name das Hauptmotiv. */
.lm-partner__titel{
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
  max-width:22ch;
}
@media(max-width:640px){
  .lm-partner__titel{font-size:clamp(1.5rem,7vw,2rem)}
}

.lm-partner__text{margin-top:clamp(2rem,4vw,3rem)}
.lm-partner__text h2{font-size:1.15rem;color:var(--lm-text);margin:2rem 0 .6rem}

.lm-single__title{
  font-size:clamp(1.8rem,4.5vw,2.8rem);
  line-height:1.05;
  letter-spacing:-.03em;
  margin:0 0 .5rem;
}

.lm-single__facts{
  font-family:var(--lm-mono);
  font-size:.75rem;
  color:var(--lm-muted);
  margin:0;
}
/* Der Ort führt auf die Regionsseite. Dezent ausgezeichnet – erkennbar
   als Link, ohne die Zeile zu dominieren. */
.lm-single__facts a{
  color:#E8CE7A;
  text-decoration:underline;
  text-decoration-color:rgba(201,162,39,.45);
  text-underline-offset:.22em;
  transition:color .2s,text-decoration-color .2s;
}
.lm-single__facts a:hover{
  color:var(--lm-gold);
  text-decoration-color:var(--lm-gold);
}

/* Nur so breit wie sein Inhalt – als Block über die ganze Spalte wirkt
   der Kasten zu wuchtig für eine einzelne Nummer. */
.lm-single__call{
  display:inline-block;
  margin:1.75rem 0;
  padding:1.15rem 1.25rem;
  border-radius:18px;
  border:1px solid var(--lm-line);
  background:linear-gradient(150deg,rgba(228,23,121,.20),rgba(27,20,22,.92));
}

/* Weiss auf Pink kam nur auf 4,5:1 und wirkte dadurch weich. Dunkel
   auf Gold sind es 8,2:1 – und es passt zu den Kacheln. */
.lm-single__tel{
  display:inline-block;
  padding:.6rem 1.25rem;
  border-radius:999px;
  background:var(--lm-gold);
  color:#0B0809;
  font-family:var(--lm-mono);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 10px 30px -14px rgba(201,162,39,.9);
  transition:background .25s,transform .25s;
}
.lm-single__tel:hover{background:#E8CE7A;transform:translateY(-1px)}

.lm-single__preis{
  display:inline-flex;
  align-items:center;
  margin:.85rem 0 0;
  padding:.4rem .85rem;
  border-radius:999px;
  background:var(--lm-accent-soft);
  color:#0B0809;
  font-family:var(--lm-mono);
  font-size:.78rem;
  font-weight:600;
  line-height:1;
  letter-spacing:.03em;
}

.lm-single__kategorien{margin-top:1.1rem}

/* Wie die Kategorienleiste auf der Startseite: heller Text mit goldenem
   Rand, gefüllt erst beim Überfahren. */

.lm-single__block{margin-top:3.25rem}

.lm-single__label{
  font-family:var(--lm-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lm-text);
  font-weight:600;
  margin:0 0 .8rem;
}

/* Vorlieben sind Angaben, keine Links. Sie bekommen deshalb eine eigene
   Form: leicht abgesetzte Felder mit kleinem Radius statt runder Pillen.
   Die Pillenform bleibt dem Klickbaren vorbehalten, das Feld hebt die
   Begriffe aber trotzdem sauber vom Fließtext ab. */
.lm-taglist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.lm-taglist li{
  padding:.34rem .7rem;
  border:0;
  border-radius:7px;
  background:rgba(242,234,228,.07);
  border-left:2px solid rgba(201,162,39,.5);
  font-size:.8rem;
  line-height:1.4;
  color:var(--lm-text);
}

.lm-single__text{
  max-width:68ch;
  margin-top:2rem;
  color:var(--lm-muted);
}
.lm-single__text p{margin:0 0 1rem}
/* Kleingedrucktes: rechtliche Hinweise, die vollständig dastehen müssen,
   aber den Lesefluss der Seite nicht dominieren sollen. Die Schriftgröße
   steht direkt auf den Absätzen, nicht nur auf dem Kasten – so greift sie
   auch dann, wenn ein Elternelement eine eigene Größe vorgibt. */
.lm-klein{
  margin-top:2.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--lm-line);
}
.lm-klein h3,
.lm-single__text .lm-klein h3{
  font-size:1.05rem;
  font-weight:600;
  line-height:1.3;
  color:var(--lm-text);
  margin:0 0 .6rem;
}
.lm-klein p,
.lm-single__text .lm-klein p{
  font-size:.72rem;
  line-height:1.65;
  color:var(--lm-muted);
  margin:0 0 .55rem;
}

/* Aufzählungen im Fließtext, etwa die Anforderungen auf der Partnerseite. */
.lm-single__text ul{margin:0 0 1rem;padding:0;list-style:none}
.lm-single__text ul li{position:relative;padding-left:1.15rem;margin:0 0 .5rem;line-height:1.6}
.lm-single__text ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:.35rem;
  height:.35rem;
  border-radius:50%;
  background:var(--lm-gold);
}

/* Weiche Umsortierung beim Rotieren */
@media (prefers-reduced-motion:no-preference){
  .lm-grid[data-rotate="1"] .lm-card{transition:transform .35s ease,border-color .35s ease,opacity .4s ease}
}

/* ---------- Galerie auf der Profilseite ---------- */

.lm-gallery{
  list-style:none;
  padding:0;
  margin:.6rem 0 0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.6rem;
}
.lm-gallery li{margin:0}
/* Ungerade Anzahl: das letzte Bild füllt die Zeile, statt eine Lücke
   stehen zu lassen. */
.lm-gallery li:last-child:nth-child(odd){
  grid-column:span 2;
}
.lm-gallery li:last-child:nth-child(odd) a{aspect-ratio:16/9}
.lm-gallery a{
  display:block;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.17);
  aspect-ratio:3/4;
}
.lm-gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.lm-gallery a:hover img{transform:scale(1.05)}
.lm-gallery a:focus-visible{outline:2px solid #E41779;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .lm-gallery img{transition:none}
  .lm-gallery a:hover img{transform:none}
}

/* ---------- Partnerbanner ---------- */

.lm-ads{
  padding-block:clamp(1.5rem,3vw,2.25rem);
}
/* Gleiche Machart wie die Beschriftung "Kategorien" im Theme. */
.lm-ads__label{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:#F2EAE4;
  margin:0 0 1.1rem;
  text-align:left;
}
.lm-ads__note{
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9A8A80;
  margin:0 0 1rem;
  text-align:center;
}
.lm-ads__note{
  text-align:center;
  margin:1rem 0 0;
}
/* Werbeplatz auf der Profilseite. Etwas schmaler als die Bildspalte,
   damit das Banner die Nummer darüber nicht erschlägt. */
.lm-werbung{
  margin-top:1rem;
  max-width:16rem;
  margin-inline:auto;
}
.lm-werbung a{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--lm-line);
  transition:transform .25s,border-color .25s;
}
.lm-werbung a:hover{transform:translateY(-2px);border-color:#C9A227}
.lm-werbung img{display:block;width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  .lm-werbung a{transition:none}
  .lm-werbung a:hover{transform:none}
}

.lm-ads__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,215px));
  gap:clamp(.6rem,1.4vw,.9rem);
  justify-content:center;
}
.lm-ads__grid a{
  display:block;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.17);
  line-height:0;
  transition:transform .3s ease,border-color .3s ease;
}
.lm-ads__grid a:hover{transform:translateY(-3px);border-color:#C9A227}
.lm-ads__grid img{width:100%;height:auto;display:block}

@media (prefers-reduced-motion:reduce){
  .lm-ads__grid a{transition:none}
  .lm-ads__grid a:hover{transform:none}
}

/* ---------- Webcam ---------- */

/* Der Webcam-Kasten steht links unter den Bildern, nicht neben der
   Nummer – so bleibt der Anruf die eindeutige Hauptaktion. */
.lm-camblock{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  border:1px solid rgba(201,162,39,.3);
  background:linear-gradient(150deg,rgba(228,23,121,.08),rgba(27,20,22,.94));
}

.lm-cam{
  display:inline-block;
  padding:.6rem 1.3rem;
  border-radius:999px;
  background:#E41779;
  color:#0B0809;
  font-size:.85rem;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  transition:background .25s,transform .25s;
}
.lm-cam:hover{background:#F5348C;transform:translateY(-1px)}

.lm-card__cam{
  display:inline-block;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.55rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(228,23,121,.9);
  padding:.2rem .5rem;
  border-radius:999px;
  margin-bottom:.35rem;
}

@media (prefers-reduced-motion:reduce){
  .lm-cam{transition:none}
  .lm-cam:hover{transform:none}
}

/* ---------- Topgirls ---------- */

.lm-grid--top{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){.lm-grid--top{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.lm-grid--top{grid-template-columns:repeat(2,minmax(0,1fr))}}

.lm-card--top{
  border-color:rgba(201,162,39,.6);
  box-shadow:0 0 0 1px rgba(201,162,39,.18),0 14px 42px -20px rgba(201,162,39,.55);
}
.lm-card--top:hover{
  border-color:rgba(232,206,122,.9);
  box-shadow:0 0 0 1px rgba(201,162,39,.3),0 18px 50px -18px rgba(201,162,39,.75);
}

/* Wandernder Glanz auf der Rahmenkante */
@property --lm-winkel{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

.lm-card--top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  padding:1.5px;
  pointer-events:none;
  background:conic-gradient(from var(--lm-winkel),
    rgba(201,162,39,.20) 0%,
    rgba(201,162,39,.20) 8%,
    rgba(255,242,205,.95) 14%,
    rgba(232,206,122,.55) 20%,
    rgba(201,162,39,.20) 28%,
    rgba(201,162,39,.20) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:lm-rand 4.5s linear infinite;
}
.lm-grid--top .lm-card--top:nth-child(2)::before{animation-delay:-.9s}
.lm-grid--top .lm-card--top:nth-child(3)::before{animation-delay:-1.8s}
.lm-grid--top .lm-card--top:nth-child(4)::before{animation-delay:-2.7s}
.lm-grid--top .lm-card--top:nth-child(5)::before{animation-delay:-3.6s}

@keyframes lm-rand{to{--lm-winkel:360deg}}

@media (prefers-reduced-motion:reduce){
  .lm-card--top::before{animation:none;background:rgba(201,162,39,.55)}
}

/* Ausgeblendete Karten kosten keine Rechenzeit. */
.lm-card[style*="display: none"]::before,
.lm-card[style*="display:none"]::before{animation:none}

/* TOP sitzt rechts oben. Das Livecam-Schild rutscht darunter, siehe
   weiter unten bei .lm-card--top .lm-card__cam. */
.lm-card__top{
  position:absolute;top:.6rem;right:.6rem;z-index:4;
  pointer-events:none;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:#0B0809;background:#C9A227;
  padding:.24rem .62rem;border-radius:999px;
  box-shadow:0 4px 14px -6px rgba(201,162,39,.9);
}


/* ---------- Standort auf der Karte ---------- */

/* Region und Livecam liegen in einer gemeinsamen Zeile. Getrennt
   positioniert überlappten sie sich bei langen Namen wie "International". */
.lm-card__badges{
  position:absolute;
  top:.6rem;
  left:.6rem;
  right:.6rem;
  z-index:3;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.4rem;
  pointer-events:none;
}
/* Die Abzeichenzeile bleibt oben – rechts ist jetzt TOP, deshalb wird
   nur das Livecam-Schild eine Zeile tiefer geschoben. Als relative
   Verschiebung, damit die Zeile selbst nicht verrutscht. */
/* Livecam sitzt direkt unter TOP, knapp darunter. */
.lm-card--top .lm-card__cam{position:relative;top:1.7rem}

/* TOP liegt über der Abzeichenzeile. Damit ein langer Regionsname wie
   "Niederösterreich" nicht darunter durchläuft, wird der Platz für TOP
   von der Breite abgezogen und der Rest abgeschnitten. */
.lm-card--top .lm-card__region{max-width:calc(100% - 4.6rem)}

.lm-card__region{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  /* Reine Beschriftung: Klicks gehen an die Kachel darunter durch. */
  pointer-events:none;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#E8CE7A;
  /* Fast deckend: bei 70 Prozent schlug das Foto durch, und auf hellen
     Stellen wirkte dasselbe Abzeichen deutlich blasser als auf dunklen. */
  background:rgba(10,7,9,.88);
  border:1px solid rgba(201,162,39,.25);
  padding:.25rem .55rem;
  border-radius:999px;
}

.lm-card__cam{
  flex:0 0 auto;
  margin:0;
  pointer-events:none;
}


/* ---------- Lightbox ---------- */

.lm-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(6,4,5,.94);
}
.lm-lightbox.is-offen{display:flex}
body.lm-lightbox-offen{overflow:hidden}

.lm-lightbox img{
  max-width:min(100%,900px);
  max-height:88vh;
  width:auto;
  height:auto;
  border-radius:10px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}

.lm-lightbox__zu,
.lm-lightbox__pfeil{
  flex:0 0 auto;
  background:rgba(242,234,228,.08);
  border:1px solid var(--lm-line);
  color:var(--lm-text);
  border-radius:999px;
  cursor:pointer;
  line-height:1;
  transition:background .2s,border-color .2s,color .2s;
}
.lm-lightbox__zu:hover,
.lm-lightbox__pfeil:hover{background:var(--lm-gold);border-color:var(--lm-gold);color:#0B0809}

.lm-lightbox__zu{
  position:absolute;
  top:1rem;right:1rem;
  width:44px;height:44px;
  font-size:1.6rem;
}
.lm-lightbox__pfeil{
  width:44px;height:44px;
  font-size:1.8rem;
}

@media(max-width:640px){
  .lm-lightbox__pfeil{position:absolute;bottom:1.2rem}
  .lm-lightbox__pfeil--links{left:1.2rem}
  .lm-lightbox__pfeil--rechts{right:1.2rem}
}