/* ============================================
   LocalGantry – Startseite v19 (Entwurf 2026-09-14)
   Additiv zu styles.css. Gilt nur mit body.variant-v19.
   Ziel: Barrierefreiheit, ruhigere Kartenhöhen, kleine
   Korrekturen – kein neues Farbschema.
   ============================================ */

/* ---- Skip-Link (Tastatur: erster Tab springt zum Inhalt) ---- */
body.variant-v19 .skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--color-cyan-accent);
  color: var(--color-navy-bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

body.variant-v19 .skip-link:focus {
  top: calc(var(--header-height) + 0.5rem);
  outline: 3px solid var(--color-navy-bg);
  outline-offset: 2px;
}

/* ---- Sichtbarer Fokus für Tastaturnutzer (nur :focus-visible) ---- */
body.variant-v19 a:focus-visible,
body.variant-v19 button:focus-visible,
body.variant-v19 summary:focus-visible,
body.variant-v19 select:focus-visible {
  outline: 3px solid var(--color-cyan-accent);
  outline-offset: 2px;
}

/* ---- Feature-Karten: Inhalt oben, Aufklapper/Link unten, weniger Leerraum ---- */
body.variant-v19 .feature-grid-v16 .feature-card {
  display: flex;
  flex-direction: column;
}

body.variant-v19 .feature-grid-v16 .feature-card > p:last-of-type {
  margin-bottom: 0;
}

body.variant-v19 .feature-grid-v16 .feature-card details,
body.variant-v19 .feature-grid-v16 .feature-card .feature-card-link {
  margin-top: auto;
  padding-top: 0.9rem;
}

/* ---- Zielgruppen: zwei Kernzielgruppen statt drei, Nebensatz darunter ---- */
body.variant-v19 .audience-grid.audience-grid-v18 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

body.variant-v19 .audience-note-v18 {
  max-width: 56rem;
  margin: 1.4rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
}

@media (max-width: 900px) {
  body.variant-v19 .audience-grid.audience-grid-v18 {
    grid-template-columns: 1fr;
  }
}

/* ---- Vergleichstabelle: Produktspalte klar, aber nicht schreiend ---- */
body.variant-v19 .compare-table td.col-product strong {
  color: var(--color-petrol);
}

/* ---- Hero-Galerie: Kicker als Text-Span (i18n) ---- */
body.variant-v19 .hero-shot-kicker > span {
  display: inline;
}

/* ---- Anker landen nicht unter dem fixierten Header (Fallback für direkte Links) ---- */
body.variant-v19 section[id],
body.variant-v19 [id="kontakt"] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* ---- Details/Summary: Cursor und Abstand einheitlich ---- */
body.variant-v19 details > summary {
  cursor: pointer;
}

/* ---- Reduzierte Bewegung respektieren ---- */
@media (prefers-reduced-motion: reduce) {
  body.variant-v19 .skip-link {
    transition: none;
  }
}

/* Dunkel-Umschalter erst, wenn echte Dunkelaufnahmen existieren. */
body.variant-v19 .shot-theme-toggle[hidden] {
  display: none !important;
}

body.variant-v19 .workflow-start-shot {
  margin: 2rem auto 0;
  max-width: 720px;
  text-align: center;
}

body.variant-v19 .workflow-start-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.variant-v19 .workflow-start-shot figcaption {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* Geführte Produktfolge: bewusst starten, mit getrennten freien Ansichten. */
body.variant-v19 .product-story {
  padding-bottom: 0.8rem;
}

body.variant-v19 .product-story-duration {
  color: #aebbd0;
  font-size: 0.77rem;
  font-variant-numeric: tabular-nums;
}

body.variant-v19 .product-story .hero-shot-stage {
  aspect-ratio: 16 / 10;
}

body.variant-v19 .product-story .hero-shot-expand {
  top: 0.7rem;
  right: 0.7rem;
  left: auto;
  width: 2.35rem;
  height: 2.35rem;
  transform: none;
}

body.variant-v19 .product-story .hero-shot-expand:hover,
body.variant-v19 .product-story .hero-shot-expand:focus-visible {
  transform: scale(1.06);
}

/* Kapitelmarken statt einem durchgehenden Balken: je Szene ein Abschnitt, jeder
   anklickbar. Man sieht, wo man ist, wie viel folgt, und springt gezielt hin. */
body.variant-v19 .product-story-progress {
  display: flex;
  gap: 0.25rem;
  margin: 0.35rem 0 0.2rem;
}

body.variant-v19 .product-story-chapter {
  flex: 1 1 0;
  /* 22 px hoch, damit auch ein Finger die Marke trifft - sichtbar bleibt der
     duenne Strich in der Mitte. */
  height: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Die Trefferflaeche ist hoeher als der sichtbare Strich - 3 px trifft niemand. */
  display: flex;
  align-items: center;
}

body.variant-v19 .product-story-chapter::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.22rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.3);
  transition: background 180ms ease;
}

body.variant-v19 .product-story-chapter:hover::before,
body.variant-v19 .product-story-chapter:focus-visible::before {
  background: rgba(148, 163, 184, 0.6);
}

body.variant-v19 .product-story-chapter.is-done::before {
  background: #22d3ee;
}

/* Die laufende Szene fuellt sich in ihrer Anzeigedauer - damit wird aus der Angabe
   "ca. 36 Sekunden" etwas Sichtbares. */
body.variant-v19 .product-story-chapter.is-active::before {
  background-color: rgba(148, 163, 184, 0.3);
  background-image: linear-gradient(#22d3ee, #22d3ee);
  background-repeat: no-repeat;
  /* Steht die Vorfuehrung, ist die aktuelle Szene voll markiert; laeuft sie,
     uebernimmt die Animation ab null. */
  background-size: 100% 100%;
}

body.variant-v19 .product-story-chapter.is-active.is-running::before {
  animation: lg-chapter-fill var(--chapter-duration, 12s) linear forwards;
}

body.variant-v19 .product-story-chapter.is-active.is-paused::before {
  animation-play-state: paused;
}

@keyframes lg-chapter-fill {
  from { background-size: 0% 100%; }
  to   { background-size: 100% 100%; }
}

/* Die App-Ansichten sind keine Szenenfolge - dort fuehrt die Leiste nichts vor.
   Die Marke sitzt an der Leiste selbst, weil diese in der Grossansicht in die
   Lightbox wandert und ein Zustand am Elternteil dort nicht mehr greifen wuerde. */
body.variant-v19 .product-story-progress.is-app-view { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  body.variant-v19 .product-story-chapter.is-active.is-running::before { animation: none; }
  body.variant-v19 .product-story-chapter.is-active::before { background: #22d3ee; }
}

body.variant-v19 .product-story-controls {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem auto;
  gap: 0.45rem;
  align-items: stretch;
}

/* Der beschriftete Weg in die Grossansicht. Das Symbol allein oben in der
   Kopfzeile wurde uebersehen - dort steht sonst nichts zum Anfassen. */
body.variant-v19 .product-story-zoom {
  padding-inline: 0.7rem;
  white-space: nowrap;
}

body.variant-v19 .product-story-zoom i {
  margin-right: 0.35rem;
}

body.variant-v19 .product-story .hero-shot-stage img[data-story-zoom] {
  cursor: zoom-in;
}

body.variant-v19 .product-story-controls button,
body.variant-v19 .product-views button {
  min-height: 2.4rem;
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 0.55rem;
  background: rgba(8, 15, 29, 0.72);
  color: #e2e8f0;
  cursor: pointer;
}

body.variant-v19 .product-story-controls button:hover,
body.variant-v19 .product-story-controls button:focus-visible,
body.variant-v19 .product-views button:hover,
body.variant-v19 .product-views button:focus-visible,
body.variant-v19 .product-views button.is-active {
  border-color: #22d3ee;
  background: #0e7490;
}

body.variant-v19 .product-story-play {
  font-weight: 700;
}

body.variant-v19 .product-story-play i {
  margin-right: 0.35rem;
}

body.variant-v19 .product-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.8rem;
}

body.variant-v19 .product-views-label {
  width: 100%;
  color: #aebbd0;
  font-size: 0.77rem;
  font-weight: 650;
}

body.variant-v19 .product-views button {
  flex: 1 1 9rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1.25;
}

/* (ersetzt durch .is-app-view .product-story-progress { visibility: hidden }) */

@media (prefers-reduced-motion: reduce) {
  body.variant-v19 .product-story-progress span {
    transition: none;
  }
}

@media (max-width: 600px) {
  body.variant-v19 .product-story .hero-shot-expand {
    width: 2.1rem;
    height: 2.1rem;
  }

  body.variant-v19 .product-views button {
    flex-basis: 100%;
  }
}

/* Die Bedienung bleibt außerhalb der vollständigen Appaufnahme. */
body.variant-v19 .product-story .hero-shot-toolbar { gap: .6rem; flex-wrap: wrap; }
body.variant-v19 .product-story .hero-shot-expand { position: static; flex: 0 0 auto; margin-left: auto; opacity: 1; }
/* Grossansicht: Schliessen oben rechts, Blaettern an den Seitenraendern neben dem
   Bild, Vorfuehrung unten. Jede Sorte Bedienelement hat ihren festen Platz, und
   keines liegt auf der Appaufnahme. */
body.variant-v19 .shot-lightbox {
  padding: .75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: .4rem .75rem;
  /* v17 setzt place-items: center - damit saesse das Schliessen-Kreuz auf halber
     Hoehe seiner Zeile statt oben. Hier bestimmt jedes Element seinen Platz. */
  place-items: stretch;
}
body.variant-v19 .shot-lightbox-content { display: contents; }
/* Platziert wird die <picture>-Huelle, nicht das <img> darin: nur sie ist ein Kind
   des Rasters. Platziert man das Bild, bleibt die Huelle unplatziert, rutscht per
   Auto-Platzierung in Zeile 1 und schiebt Bildunterschrift und Bedienleiste aus dem
   Fenster - genau das war der Fehler. min-height: 0 laesst die Bildzeile schrumpfen,
   damit die Leiste unten immer Platz behaelt. */
body.variant-v19 .shot-lightbox-content picture {
  grid-column: 2; grid-row: 2;
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0;
}
body.variant-v19 .shot-lightbox-content img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 0;
}
body.variant-v19 .shot-lightbox-content p {
  grid-column: 1 / -1; grid-row: 3;
  margin: 0; text-align: center; font-size: .9rem; font-weight: 600;
}
body.variant-v19 .shot-lightbox-arrow,
body.variant-v19 .shot-lightbox-close { position: static; transform: none; width: 2.75rem; height: 2.75rem; }
body.variant-v19 .shot-lightbox-prev { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; }
body.variant-v19 .shot-lightbox-next { grid-column: 3; grid-row: 2; align-self: center; justify-self: end; }
body.variant-v19 .shot-lightbox-close { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
body.variant-v19 .shot-lightbox-arrow:hover,
body.variant-v19 .shot-lightbox-arrow:focus-visible { transform: none; }

body.variant-v19 .shot-lightbox-bar {
  grid-column: 1 / -1; grid-row: 4;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  width: min(52rem, 100%); justify-self: center;
}
body.variant-v19 .shot-lightbox-bar .product-story-progress,
body.variant-v19 .shot-lightbox-bar .product-story-controls { width: 100%; }
/* In der Grossansicht blaettern die grossen Seitenpfeile; und vergroessern
   laesst sich hier nichts mehr. */
body.variant-v19 .shot-lightbox-bar [data-story-prev],
body.variant-v19 .shot-lightbox-bar [data-story-next],
body.variant-v19 .shot-lightbox-bar .product-story-zoom { display: none; }
body.variant-v19 .shot-lightbox-bar .product-story-controls { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 600px) {
  body.variant-v19 .shot-lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0,1fr) auto auto auto; }
  body.variant-v19 .shot-lightbox-content picture { grid-column: 1 / -1; grid-row: 2; }
  body.variant-v19 .shot-lightbox-close { grid-column: 2; grid-row: 1; }
  body.variant-v19 .shot-lightbox-content p { grid-column: 1 / -1; grid-row: 3; }
  body.variant-v19 .shot-lightbox-bar { grid-column: 1 / -1; grid-row: 4; }
  body.variant-v19 .shot-lightbox-prev { grid-column: 1; grid-row: 5; justify-self: end; }
  body.variant-v19 .shot-lightbox-next { grid-column: 2; grid-row: 5; justify-self: start; }
}