/* ==========================================================================
   LARWO Group — CMS-Inhalte im Frontend
   --------------------------------------------------------------------------
   Alles, was aus dem Adminpanel kommt und auf der Website erscheint:
     · Bausteine (Bild & Text) und Objekt-Slider auf der Startseite
     · Angebots-Liste auf immobilien.php  (nutzt die .listing-*-Karten aus style.css)
     · Angebots-Detailseite immobilie.php
   Anordnung und Reihenfolge sind von Sylvia übernommen, die Optik ist LARWO:
   dieselben Tokens (--accent, --ink, --muted, --border, --radius-*, --shadow-*),
   dieselben Rundungen und Abstände wie im übrigen Stylesheet.

   Der Editor-Text selbst wird über `.cms-prose` gestaltet — die Gegenstelle dazu
   ist die Editor-Vorschau in system/lib/aic-wysiwyg/aic-wysiwyg.js (injectEditorTheme).
   Ändert sich hier eine Grösse, gehört sie dort nachgezogen, sonst sieht der
   Redakteur beim Schreiben etwas anderes als der Besucher.
   ========================================================================== */

/* ---------- Lichtkasten (Fancybox) ---------- */
/* Aufbau und Verhalten bleiben, wie der Baustein sie mitbringt — nur die Akzentfarbe ist
   LARWOs. Absichtlich HELLER als `--accent`: der Lichtkasten steht auf schwarzem Grund, dort
   verschwindet das Seiten-Blau (#389DF8) im Kontrast. `…-ruhe` trägt die leiseren Stellen
   (Fortschrittsbalken, Rahmen der ruhenden Vorschaubilder).
   Gelesen wird das von system/lib/fancybox/aic-fancybox.js; ohne diese Zeilen bliebe es beim
   Standard-Blau des Bausteins. */
:root {
  --aic-fancybox-akzent:      #6ab6fa;
  --aic-fancybox-akzent-ruhe: #389DF8;
}

/* ---------- Editor-Text (WYSIWYG-HTML) ---------- */
.cms-prose { color: var(--text, var(--ink)); font-size: 16px; line-height: 1.7; }
.cms-prose > *:first-child { margin-top: 0; }
.cms-prose > *:last-child  { margin-bottom: 0; }
.cms-prose p,
.cms-prose div { margin: 0 0 .7em; }
.cms-prose h1 { font-size: 30px; margin: 0 0 .5em; }
.cms-prose h2 { font-size: 22px; margin: 1.1em 0 .45em; }
.cms-prose h3 { font-size: 18px; margin: 1em 0 .4em; }
.cms-prose h4 { font-size: 16px; margin: 1em 0 .35em; }
.cms-prose strong { font-weight: 700; }
.cms-prose em { font-style: italic; }
.cms-prose a { color: var(--accent); }
.cms-prose a:hover { color: var(--accent-dark); }
.cms-prose hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }

/* Aufzählung: Punkt in Akzentfarbe (wie die Editor-Vorschau).
   Listenpunkte stehen enger als Fliesstext: `line-height` 1.45 statt der 1.7 des Absatzes und
   halber Abstand darunter. Eine Aufzählung ist eine Aufzählung, weil ihre Punkte zusammen
   gehören — mit Absatz-Durchschuss zerfällt sie optisch in Einzelzeilen. Dieselben zwei Werte
   stehen in der Editor-Vorschau (aic-wysiwyg.js, injectEditorTheme); wer hier ändert, ändert
   dort mit, sonst schreibt der Betreiber gegen ein Bild, das die Website nicht zeigt. */
.cms-prose ul { list-style: none; padding-left: 0; margin: .65em 0 .9em; }
.cms-prose ul li { position: relative; padding-left: 24px; margin-bottom: .18em; line-height: 1.45; }
.cms-prose ul li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(.75em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
/* Nummerierung rechtsbündig, damit zweistellige Zahlen nicht in den Text laufen */
.cms-prose ol { list-style: none; counter-reset: cms-ol; padding-left: 0; margin: .65em 0 .9em; }
.cms-prose ol li { position: relative; padding-left: 2.1em; margin-bottom: .18em; line-height: 1.45; counter-increment: cms-ol; }
.cms-prose ol li::before {
  content: counter(cms-ol) '.';
  position: absolute;
  left: 0;
  width: 1.5em;
  text-align: right;
  color: var(--muted);
}

/* Im Editor eingefügte Webstyle-Knöpfe (`a[name^="aic-cbtn-"]`). Hier steht nur das Layout, das
   jeder von ihnen braucht; Farbe, Innenabstand, Rundung und Schatten kommen aus dem Webstyle und
   werden von `includes/webstyle-vars.php` in den Seitenkopf geschrieben.
   Bewusst OHNE `.cms-prose` davor: ein Knopf kann in jedem Editor-Feld stehen, und ohne dieses
   Layout ist er ein Textlink mit Hintergrundfarbe. */
a[name^="aic-cbtn-"] {
  display: inline-block;
  text-decoration: none;
  line-height: 1.2;
  box-sizing: border-box;
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}

/* ---------- Info-Box über der Slideshow ----------
   Ein schmaler Streifen ganz oben, nicht ein Kasten mitten im Inhalt: er soll auffallen, ohne
   die Seite zu sprengen. Der Ton ist LARWOs Akzent-Hellblau — auffällig genug für einen
   Hinweis, aber nicht die Warnfarbe Rot; es geht um Urlaub und Erreichbarkeit, nicht um
   Störungen. Der Name ist `info-hinweis`, weil `.info-box` auf immobilien.php schon die
   Regionen-Kästen bezeichnet. */
.info-hinweis-streifen {
  background: var(--accent-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 14px 24px;
}
.info-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.info-hinweis-zeichen {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.info-hinweis-zeichen svg { width: 26px; height: 26px; }
.info-hinweis .cms-prose { font-size: 15px; line-height: 1.55; color: var(--ink); }
.info-hinweis .cms-prose > *:last-child { margin-bottom: 0; }

/* ---------- Bausteine (Bild & Text) ----------
   Der Abschnitt schliesst enger nach unten ab als ein normaler Abschnitt (72 px). Zwischen dem
   Baustein-Kasten und den Service-Karten darunter standen sonst zweimal 72 px übereinander —
   ein Loch von fast anderthalb Kastenhöhen. Nach oben bleibt der volle Abstand: dort trennt er
   den Kasten vom Seitenkopf. */
.cms-bausteine-abschnitt { padding-bottom: 36px; }
.cms-bausteine { display: flex; flex-direction: column; gap: 28px; }
.cms-baustein {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.cms-baustein-inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px 30px;
}
.cms-baustein.invert .cms-baustein-inner { grid-template-columns: 1fr 300px; }
.cms-baustein.invert .cms-baustein-bild { order: 2; }
.cms-baustein.ohne-bild .cms-baustein-inner { grid-template-columns: 1fr; }
/* Bildhöhe fest auf 2:1, zugeschnitten statt gestaucht.
   Vorher gab es keine Höhenangabe: das Bild behielt seine Naturform. Ein nahezu quadratisches
   Motiv füllte damit auf Tablet und Telefon — wo das Raster einspaltig wird und das Bild die
   volle Breite bekommt — einen ganzen Bildschirm, bevor der erste Satz Text kam. Die Breite war
   nie das Problem, die Höhe schon. `object-fit: cover` schneidet zu, ohne zu verzerren. */
.cms-baustein-bild img,
.cms-baustein-bild picture {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.cms-baustein-bild img {
  display: block;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
.cms-baustein-text h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin-bottom: 10px;
}

/* ---------- Kopfbereich: Bildwechsler mit Textkasten ---------- */
/* Die Bilder liegen HINTER dem Textkasten und wandern, der Kasten steht still.
   Echte <img> statt Hintergrundbild: nur die tragen srcset (passende Grösse je Fenster)
   und den in der Mediathek gepflegten Beschreibungstext als alt. Zugeschnitten wird mit
   object-fit. */
.hero-slider { position: relative; overflow: hidden; }

/* Seitenkopf MIT Bildern: der helle Verlauf weicht dem Bild, und der Text bekommt denselben
   dunklen Kasten wie auf der Startseite — sonst steht er je nach Motiv auf hellem Himmel.
   Ohne Bilder (`.ohne-bilder`) bleibt alles wie bisher: heller Verlauf, dunkler Text, kein
   Kasten. So sieht eine Seite ohne gewähltes Set genauso aus wie vor dem Umbau. */
.page-hero.hero-slider { border-bottom: none; }
.page-hero.hero-slider:not(.ohne-bilder) { background: #0f172a; padding: 64px 24px 60px; }
.page-hero-box { max-width: 820px; margin: 0 auto; }
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box {
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 16px;
  padding: 30px 40px;
}
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box h1 { color: #fff; }
/* Der farbige Teil der Überschrift. Bisher stand er als `style="color:var(--accent)"` direkt im
   Quelltext jeder Seite — er kommt jetzt aus dem Panel und braucht deshalb eine Regel. Sie muss
   spezifischer sein als die weisse h1-Farbe eine Zeile darüber, sonst gewinnt Weiss. */
.page-hero .page-hero-box h1 .accent { color: var(--accent); }
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box p { color: rgba(255,255,255,.88); }
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box .crumb { color: rgba(255,255,255,.72); }
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box .crumb a { color: rgba(255,255,255,.72); }
.page-hero.hero-slider:not(.ohne-bilder) .page-hero-box .crumb a:hover { color: #fff; }
/* Platz unter dem Kasten, damit die Punktreihe nicht auf dem Text sitzt. */
.page-hero.hero-slider:not(.ohne-bilder) .hero-slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: none; border: none; padding: 0; z-index: 2; }
.hero-slider-viewport { position: absolute; inset: 0; overflow: hidden; }
.hero-slider-track {
  display: flex;
  height: 100%;
  transition: transform .7s ease-in-out;
  will-change: transform;
}
.hero-slide { flex: 0 0 100%; height: 100%; }
.hero-slide-img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* KEIN Schleier über den Bildern (Betreiber-Vorgabe 2026-08-08): der Textkasten
   `.services-banner-box` bringt seinen eigenen halbtransparenten dunklen Grund mit und ist
   damit lesbar. Ein zweiter Schleier darüber nähme den Bildern nur die Farbe. */
.hero-slider > .container { position: relative; z-index: 1; }
.hero-slider.ohne-bilder { background: var(--footer-bg); }
/* Platz für die Punktreihe, damit sie nicht auf dem Text sitzt. */
.hero-slider .hero-slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); background: none; border: none; padding: 0; z-index: 2; }
.hero-slider .hero-slider-dots .cms-slider-dot { background: rgba(255,255,255,.5); }
.hero-slider .hero-slider-dots .cms-slider-dot.active { background: #fff; }

/* ---------- Objekt-Slider (Startseite) ---------- */
.cms-slider {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cms-slider-viewport { overflow: hidden; }
.cms-slider-track {
  display: flex;
  transition: transform .5s ease-in-out;
  will-change: transform;
}
.cms-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  padding: 28px 30px;
  align-items: start;
}
.cms-slide.ohne-bild { grid-template-columns: 1fr; }
.cms-slide-bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.cms-slide-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.cms-slide-kopf h3 { font-size: 20px; }
.cms-slide-marke {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: 20px;
}
/* Blätter-Knöpfe: abgerundetes Rechteck wie die Kästen der Seite, nicht rund. In LARWO-Blau
   mit weissem Pfeil und leichter Durchsicht, damit sie über dem Bild nicht erschlagen; beim
   Überfahren volle Deckung. Gilt für alle Slider — Seitenkopf, Objekt-Slider, Bildergalerie.

   Senkrecht **mittig im Slider**. Hier stand `calc(50% - 26px)`: ein Ausgleich für den einen
   Slider, dessen Punktreihe als echter Streifen UNTER den Bildern liegt und die Mitte des
   Kastens dadurch unter die Mitte des Bildes schiebt. Als Grundregel war das falsch — bei
   allen anderen Slidern schweben die Punkte im Bild und kosten keine Höhe, dort sassen die
   Pfeile also 26 px zu hoch. Der Ausgleich gehört an den Slider, der ihn braucht (unten bei
   `.cms-slider`), nicht an alle. */
.cms-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--accent) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 86%, transparent);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  transition: background .15s, border-color .15s, transform .15s;
}
.cms-slider-arrow:hover,
.cms-slider-arrow:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.cms-slider-arrow.prev { left: 28px; }
.cms-slider-arrow.next { right: 28px; }
.cms-slider-arrow svg { width: 20px; height: 20px; }
/* Der EINE Slider mit einer Punktreihe als eigenem Streifen unter den Bildern: dort liegt die
   Mitte des Kastens tiefer als die Mitte des Bildes. Halbe Streifenhöhe (14 px Innenabstand
   oben und unten + 10 px Punkt = 38 px) nach oben, damit die Pfeile im Bild mittig stehen. */
.cms-slider > .cms-slider-arrow { top: calc(50% - 19px); }
.cms-slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
}
.cms-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--muted-soft);
  transition: background .2s, transform .2s;
}
.cms-slider-dot.active { background: var(--accent); transform: scale(1.15); }

/* ---------- Angebots-Liste (immobilien.php) ---------- */
/* Die Karten selbst sind .listing-* aus style.css — hier nur, was die CMS-Daten
   zusätzlich mitbringen: Objektnummer und der Hinweis auf eine leere Liste. */
/* Objektnummer und Sparten-Kennzeichen in einer Zeile, die Überschrift darunter. Der Abstand
   dazwischen ist bewusst etwas grösser als eine blosse Zeilenlücke: die Kopfzeile ordnet ein,
   die Überschrift ist der Inhalt — ohne Luft dazwischen lasen sich beide als ein Block. */
.listing-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: .45em;
}
.listing-nr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
/* Rubrik der Karte — Gewerberäume · Mietwohnungen · Kaufobjekte, also genau das, was im Panel
   unter Angebote eingestellt wird. Bei Sylvia sagt das die Seitenüberschrift, weil dort jede
   Rubrik ihre eigene Seite hat; hier liegen alle in einem Raster, also trägt es die Karte. */
.listing-rubrik {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.listing-leer {
  text-align: center;
  color: var(--muted);
  padding: 40px 18px;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ---------- Detailseite ----------
   Die Abstände der beiden Zurück-Knöpfe standen hier UND in css/objekt-detail.css. Zwei
   Stellen für eine Sache: cms.css wird später geladen und überschrieb, wer in der anderen
   Datei etwas änderte, sah keine Wirkung. Sie stehen jetzt nur noch in objekt-detail.css,
   dem Stylesheet dieser Seite. */

/* Textblöcke: jeder Kasten endet an seinem Inhalt.
   `.objekt-grid-halves` streckt die Kästen einer Reihe auf gleiche Höhe (`align-items: stretch`
   plus `.block-box { height: 100% }`) — das passte, solange dort zwei bewusst gepaarte Hälften
   standen. Die CMS-Blöcke sind unterschiedlich lang; ein zweizeiliger „Sonstiges"-Kasten neben
   einer 40-zeiligen „Verkehrsanbindung" wurde dadurch zu einem grossen weissen Feld. */
.cms-bloecke { align-items: start; }
.cms-bloecke .block-box { height: auto; }
/* Überschrift eines Textblocks: senkrechter Strich in LARWO-Blau davor, Text schwarz.
   Der Strich trägt die Hausfarbe, die Überschrift bleibt ruhig lesbar — farbige Überschriften
   nebeneinander lassen die Seite unruhig wirken. */
.cms-bloecke .block-title {
  position: relative;
  padding-left: 14px;
  color: var(--ink);
}
.cms-bloecke .block-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* Eckdaten: LARWO-Kacheln (wie .fact-card, aber ohne Symbol) */
.cms-eck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
/* Kachel mit blauem Kopfstreifen: der Feldname sitzt als weisse Zeile auf LARWO-Blau über dem
   Wert. Vorher stand er klein und grau IN der Kachel — bei zwanzig Kacheln nebeneinander
   verschwamm dadurch, wo eine aufhört und die nächste anfängt.
   Der Streifen geht bis an die Kante, deshalb hat die Kachel selbst keinen Innenabstand mehr
   (`overflow: hidden` schneidet ihn an der Rundung ab) und dt/dd bringen ihren eigenen mit. */
.cms-eck-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.cms-eck-item dt {
  background: var(--accent);
  color: #fff;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.cms-eck-item dd { margin: 0; padding: 12px 14px 14px; font-size: 16px; color: var(--ink); }
/* Füll-Kachel: gleicht nur das Raster aus und darf keinen blauen Streifen tragen —
   sonst sähe eine leere Kachel wie ein Feld ohne Wert aus. */
.cms-eck-item.is-filler { box-shadow: none; background: var(--bg-alt); border-style: dashed; }
.cms-eck-item.is-filler dt { background: transparent; }
.cms-eck-item.is-filler dt, .cms-eck-item.is-filler dd { visibility: hidden; }

/* PDF-Anlagen */
.cms-pdf-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }
.cms-pdf-liste a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px solid transparent;
  border-radius: var(--btn-radius, var(--radius-sm));
  padding: 10px 18px;
  font-size: 15px;
  transition: background .15s, border-color .15s;
}
/* Beim Überfahren der klassische blaue Knopf — Fläche in LARWO-Blau, Schrift und Symbol weiss.
   Vorher wurde er heller (weisser Grund, blauer Rand); auf einer hellen Seite sah das eher
   nach „ausgegraut" aus als nach „anklickbar". */
.cms-pdf-liste a:hover,
.cms-pdf-liste a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cms-pdf-liste svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Bildergalerie als Slider (Abschnitt „Impressionen") */
.objekt-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #0f172a; }
.objekt-slider-viewport { overflow: hidden; }
.objekt-slider-track { display: flex; transition: transform .4s ease-in-out; will-change: transform; }
.objekt-slide { flex: 0 0 100%; display: block; }
.objekt-slide img { width: 100%; height: clamp(240px, 46vw, 560px); object-fit: cover; }
.objekt-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  max-width: 80%;
  flex-wrap: wrap;
  justify-content: center;
}
.objekt-slider-dots .cms-slider-dot { background: rgba(255,255,255,.55); }
.objekt-slider-dots .cms-slider-dot.active { background: #fff; }
.objekt-slider-leer {
  text-align: center;
  color: var(--muted);
  padding: 48px 18px;
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ---------- Schmalere Fenster ---------- */
@media (max-width: 860px) {
  .cms-baustein-inner,
  .cms-baustein.invert .cms-baustein-inner { grid-template-columns: 1fr; gap: 18px; }
  .cms-baustein.invert .cms-baustein-bild { order: 0; }
  .cms-slide { grid-template-columns: 1fr; gap: 18px; padding: 20px; }

  /* KEINE Pfeile auf Telefon und schmalem Tablet (Betreiber-Vorgabe 2026-08-08):
     sie liegen dort über dem Inhalt, sind mit dem Daumen kaum zu treffen und stehen dem
     Bild im Weg. Bedient wird gewischt — das kann jeder Slider hier (scripts/cms-slider.js),
     genau wie bei Sylvia. Sichtbar bleiben die Punkte: sie zeigen, wie viele Bilder es
     gibt und wo man steht. */
  .cms-slider-arrow { display: none; }

  /* Punkte kleiner und enger, damit auch eine lange Bilderreihe in eine Zeile passt. */
  .cms-slider-dots { gap: 6px; padding: 12px; }
  .cms-slider-dot { width: 8px; height: 8px; }
  .objekt-slider-dots { max-width: 92%; gap: 6px; }
}