/* glieks.css - Farbrollen, Schrift, Tiefe, Bausteine (.g-*) und Layout der Glieks-Landingpage.
   Wird von index.html nach stil/schriften.css eingebunden; stil/bewegung.css ergänzt alle Übergänge.
   Setzt voraus: die Schriftfamilien "Outfit" und "Source Sans 3" aus stil/schriften.css (Systemstapel als Rückfall).
   Enthält keine Übergänge und keine Animationen - die liegen vollständig in bewegung.css.
   Tiefe (Schatten, Lichtflecken, Glasfläche der Kopfzeile) liegt hier, weil sie auch ohne Bewegung gilt:
   zwei Schattenstufen (--g-schatten-weich im Ruhezustand, --g-schatten-tief bei Berührung), zwei weichgezeichnete
   Farbflecken hinter Karte und Papierstapel, die Kopfzeile ab 900 px als haftende Glasfläche. */


/* ==========================================================================
   Farbrollen und Maße
   Drei Rundungswerte (8/12/16; Zustandsmarken voll rund), zwei Schattenstufen, Haarlinien 1 px.
   ========================================================================== */
:root {
  --g-paper:        #faf9f5;   /* Seitenfläche */
  --g-paper-glas:   rgb(250 249 245 / 82%);   /* Kopfzeile über gescrolltem Inhalt */
  --g-white:        #ffffff;   /* Karte, Eingabezeile */
  --g-petrol:       #185c61;   /* Text und Aktion */
  --g-petrol-hover: #10484d;   /* Aktion bei Berührung */
  --g-muted:        #53696a;   /* Nebentext */
  --g-apricot:      #ffab78;   /* Akzent: Punkt, Unterstreichung, Trennstrich */
  --g-apricot-soft: #fff0e4;   /* aktive Frage, Lichtfleck hinter der Karte */
  --g-sage:         #eef4f0;   /* blasse Fläche, Lichtfleck hinter dem Papierstapel */
  --g-line:         #cad9d5;   /* Haarlinien */
  --g-line-weich:   #e7efec;   /* Haarlinien innerhalb der Karte */
  --g-sage-hell:    #f6f9f7;   /* Kopf- und Fußleiste der Karte */
  --g-punkt-rot:    #fb7a5a;   /* die drei Fensterpunkte der Karte */
  --g-punkt-gelb:   #f5b93f;
  --g-punkt-gruen:  #4fc07e;

  --g-success: #14663f;  --g-success-bg: #eaf5ee;   /* Zustand Fertig */
  --g-soon:    #96410f;  --g-soon-bg:    #fff0e4;   /* Zustand Freigabe nötig */
  --g-working: #175ca5;  --g-working-bg: #eaf3fe;   /* Zustand In Arbeit */

  --g-rund-klein: 8px;    /* Knopf, Frage, Eingabezeile */
  --g-rund:       12px;   /* Fotos */
  --g-rund-gross: 16px;   /* Karte, Vertrauensband */

  /* Zwei Schattenstufen, beide petrolgetönt und weich auslaufend. */
  --g-schatten-weich: 0 24px 60px -12px rgb(24 92 97 / 14%), 0 2px 6px rgb(24 92 97 / 6%);    /* Ruhezustand */
  --g-schatten-tief:  0 40px 90px -16px rgb(24 92 97 / 22%), 0 4px 12px rgb(24 92 97 / 8%);   /* bei Berührung */
  --g-schatten-kopf:  0 12px 32px -16px rgb(24 92 97 / 14%);                                   /* Kopfzeile, gescrollt */

  --g-kopf-versatz: 0px;   /* Höhe der haftenden Kopfzeile; ab 900 px gesetzt, Sprungziele rechnen sie ein */

  --g-titel: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --g-marke: "Outfit", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --g-text:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* ==========================================================================
   Grundlagen
   ========================================================================== */
html { color-scheme: light; background: var(--g-paper); }
body {
  margin: 0;
  color: var(--g-petrol);
  background: var(--g-paper);
  font-family: var(--g-text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
:where(h1, h2, h3, p, figure, ul) { margin: 0; }
:where(h1, h2, h3) { font-family: var(--g-titel); font-weight: 600; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Fokus nie allein durch Farbe: kräftige Kontur mit Abstand. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--g-petrol);
  outline-offset: 3px;
}

/* Sprungmarke: erst bei Tastaturfokus sichtbar, über der Kopfzeile. */
.g-sprung {
  position: absolute; left: 16px; top: -100px; z-index: 30;
  padding: 10px 14px;
  background: var(--g-white); color: var(--g-petrol);
  border: 1px solid var(--g-line); border-radius: var(--g-rund-klein);
  font-family: var(--g-titel); font-size: 15px; font-weight: 500;
  text-decoration: none;
}
.g-sprung:focus { top: 16px; }

/* Nur für Vorleseprogramme. */
.g-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.g-container { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.g-section   { margin-block: 88px; }
.g-muted     { color: var(--g-muted); }
.g-small     { font-size: 14px; }

/* Weichgezeichnete Flecken dürfen seitlich nicht zum Scrollen führen. */
main { overflow-x: clip; }

/* Sprungziele halten Abstand zur haftenden Kopfzeile. */
[id] { scroll-margin-top: calc(var(--g-kopf-versatz) + 24px); }

.g-icon {
  width: 24px; height: 24px; flex: 0 0 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.g-icon--gross { width: 28px; height: 28px; flex-basis: 28px; }

/* Apricot-Punkt und Apricot-Unterstreichung sind die beiden Akzente der Seite. */
.g-accent-dot  { color: var(--g-apricot); }
.g-accent-word {
  text-decoration: underline;
  text-decoration-color: var(--g-apricot);
  text-decoration-thickness: 2px;
  text-underline-offset: .12em;
}

.g-logo { width: 108px; height: auto; flex-shrink: 0; display: block; }

/* Wortmarke im Fließtext: ersetzt das Wort "Glieks"/"glieks" an Textstellen (nicht das Verb "glieksen").
   Die Maße sind gemessen (Seitenverhältnis der Marke 1141 / 412), nicht ändern. Die Pfade tragen ihre
   Farben als Attribute, die Marke erbt daher keine Textfarbe. Kein eigener Unterstrich, auch nicht dort,
   wo eine Hintergrundlinie bei Berührung wächst (.g-nav a, .g-header__anmelden, .g-footer__links a, .g-link > span). */
.g-wort { display: inline-block; line-height: 0; text-decoration: none; }
.g-wort svg { height: 1.1em; aspect-ratio: 1141 / 412; width: auto; vertical-align: -0.24em; }
h1 .g-wort svg, h2 .g-wort svg, h3 .g-wort svg { height: 1.25em; vertical-align: -0.29em; }
.g-nav a .g-wort, .g-header__anmelden .g-wort, .g-footer__links a .g-wort, .g-link > span .g-wort { background-image: none; }


/* ==========================================================================
   Kopfzeile
   Volle Breite als Fläche, der Inhalt liegt im Container. Ab 900 px haftet sie oben als Glasfläche;
   die Haarlinie unten und der Schatten erscheinen erst, wenn gescrollt wurde (html.g-gescrollt aus bewegung.js).
   ========================================================================== */
.g-header { border-bottom: 1px solid transparent; }
.g-header__innen { display: flex; align-items: center; gap: 24px; padding-block: 22px; }
.g-header__marke { display: block; }

/* Wortmarke und Satz bilden eine Einheit, oben wie unten - Apricot-Haarlinie dazwischen. */
.g-claim-tag {
  border-left: 1px solid var(--g-apricot);
  padding-left: 20px;
  font-family: var(--g-titel); font-size: 15px; font-weight: 500;
  letter-spacing: -.005em; white-space: nowrap;
}

.g-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 20px; margin-left: auto; font-size: 14px; }

/* Ruhige Textlinks: die Unterstreichung ist eine Hintergrundlinie, die bei Berührung von links wächst.
   --g-linie-unten setzt sie unter die Textzeile, unabhängig von der Höhe des Berührungsziels. */
.g-nav a, .g-header__anmelden, .g-footer__links a {
  --g-linie-unten: 11px;
  color: inherit; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% - var(--g-linie-unten));
}
.g-nav a:hover, .g-header__anmelden:hover, .g-footer__links a:hover { background-size: 100% 1px; }
.g-nav a, .g-header__anmelden { display: inline-block; padding-block: 12px; line-height: 20px; }
.g-header__anmelden { font-size: 14px; }
.g-footer__links a { --g-linie-unten: 0px; padding-bottom: 2px; }

/* Genau ein gefüllter Knopf je Bildschirm. */
.g-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 22px;
  border: 1px solid var(--g-petrol); border-radius: var(--g-rund-klein);
  background: var(--g-petrol); color: var(--g-white);
  font-family: var(--g-titel); font-size: 15px; font-weight: 600;
  line-height: 1.4; text-decoration: none; white-space: nowrap;
}
.g-button:hover {
  background: var(--g-petrol-hover); border-color: var(--g-petrol-hover);
  box-shadow: var(--g-schatten-tief);
}

/* Textlink mit Zeichen: die dünne Linie steht immer, die kräftige wächst bei Berührung von links darüber. */
.g-link {
  color: var(--g-petrol);
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none;
}
.g-link > span {
  padding-bottom: 2px;
  background-image: linear-gradient(var(--g-petrol), var(--g-petrol)), linear-gradient(var(--g-petrol), var(--g-petrol));
  background-repeat: no-repeat;
  background-size: 0 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
}
.g-link:hover > span { background-size: 100% 2px, 100% 1px; }
.g-link .g-icon { width: 20px; height: 20px; flex-basis: 20px; }


/* ==========================================================================
   Einstieg
   Zwei Spaltenhüllen (.g-hero__text, .g-hero__karte); auf dem Telefon lösen sie sich auf (display: contents),
   damit die Karte direkt unter die Überschrift rückt.
   ========================================================================== */
.g-hero {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: 48px; align-items: start; padding-block: 48px 24px;
}
.g-hero > * { min-width: 0; }
.g-hero h2 {
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 600; letter-spacing: -.038em; line-height: 1.08;
  text-wrap: balance;
}
.g-lead { margin-top: 24px; font-size: 18px; max-width: 52ch; }
.g-hero .g-small { margin-top: 12px; }

/* Vier gleichberechtigte Einstiege; die erste ist hervorgehoben, weil die Szene darunter ihre ist. */
.g-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-block: 28px; }
.g-question {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; text-align: left; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--g-line); border-radius: var(--g-rund-klein);
  background: transparent; color: var(--g-petrol);
  font-family: var(--g-titel); font-size: 15px; font-weight: 500;
  text-decoration: none;
}
.g-question:hover { background: var(--g-apricot-soft); box-shadow: var(--g-schatten-tief); }
.g-question[aria-current="true"] { background: var(--g-apricot-soft); border-bottom-color: var(--g-apricot); }
.g-question .g-icon { width: 20px; height: 20px; flex-basis: 20px; }

/* Lichtfleck hinter der Karte: ein ruhiger Apricot-Hauch, leicht nach unten rechts versetzt. */
.g-hero__karte { position: relative; z-index: 0; }
.g-hero__karte::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% 0 2% -8%;
  background: radial-gradient(closest-side, var(--g-apricot-soft) 60%, transparent);
  filter: blur(48px);
  opacity: .9;
}


/* ==========================================================================
   Beispielkarte - Laufplan
   Die Karte ist eine gekennzeichnete Beispielansicht ohne bedienbare Teile.
   Der Laufplan zeigt vier Schritte mit Zustandsmarken und eine gezählte Fortschrittszeile.
   ========================================================================== */
.g-arbeitsfenster {
  background: var(--g-white);
  border: 1px solid var(--g-line);
  border-radius: var(--g-rund-gross);
  box-shadow: var(--g-schatten-weich);
  min-width: 0; overflow: hidden;
}
.g-arbeitsfenster__kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--g-line);
  font-size: 14px; background: var(--g-sage-hell);
}
.g-arbeitsfenster__kopf .g-logo { width: 64px; }
.g-arbeitsfenster__titel { font-family: var(--g-titel); font-weight: 500; }
.g-arbeitsfenster__kennzeichnung { margin-left: auto; font-size: 12px; color: var(--g-muted); }

.g-dots { display: flex; gap: 6px; flex: none; }
.g-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.g-dots i:nth-child(1) { background: var(--g-punkt-rot); }
.g-dots i:nth-child(2) { background: var(--g-punkt-gelb); }
.g-dots i:nth-child(3) { background: var(--g-punkt-gruen); }

.g-arbeitsfenster__inhalt { padding: 16px; }

/* Die Auftragszeile ist kein Eingabefeld und kein Knopf: es gibt noch keine Verarbeitung dahinter. */
.g-prompt { display: flex; align-items: stretch; gap: 8px; margin-bottom: 16px; }
.g-prompt__field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--g-line); border-radius: var(--g-rund-klein);
  padding: 13px 12px; background: var(--g-white);
  color: var(--g-muted); font-size: 14px;
}
.g-prompt__field .g-icon { width: 20px; height: 20px; flex-basis: 20px; }
.g-prompt__send {
  flex: none; width: 48px; border-radius: var(--g-rund-klein);
  background: var(--g-petrol); color: var(--g-white);
  display: grid; place-items: center;
}
.g-prompt__send .g-icon { width: 22px; height: 22px; flex-basis: 22px; }

.g-tasks { list-style: none; margin: 0; padding: 0; }
.g-task {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--g-line-weich); font-size: 14px;
}

/* Jeder Zustand hat Wort und Zeichen, nie nur einen farbigen Punkt. Die Marke ist voll rund. */
.g-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--g-titel); font-size: 12px; font-weight: 600;
}
.g-status .g-icon { width: 16px; height: 16px; flex-basis: 16px; }
.g-status--done    { background: var(--g-success-bg); color: var(--g-success); }
.g-status--soon    { background: var(--g-soon-bg);    color: var(--g-soon); }
.g-status--working { background: var(--g-working-bg); color: var(--g-working); }

/* Zustandsmarken eines Schritts liegen übereinander; die breiteste bestimmt die Spalte, nichts springt. */
.g-marke { display: grid; justify-items: end; }
.g-marke > .g-status { grid-area: 1 / 1; }

/* Fortschrittszeile: Name, vier Segmente (je Schritt eines), gezählter Stand. */
.g-lauf__stand {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding-top: 12px; font-size: 14px; font-weight: 500;
}
.g-lauf__name { color: var(--g-muted); }
.g-lauf__spur { display: flex; gap: 3px; flex: 1 1 48px; min-width: 48px; height: 4px; }
/* Segmente unterscheiden sich nur durch gefüllt (erledigter Schritt) gegen leer (Haarlinie), nie durch eine Zustandsfarbe.
   Der Füllbalken ist ein inneres Pseudoelement, das von links aufwächst (transform in bewegung.css). */
.g-lauf__seg  { position: relative; flex: 1; border: 1px solid var(--g-line); background: transparent; overflow: hidden; }
.g-lauf__seg::before {
  content: ""; position: absolute; inset: -1px;
  background: var(--g-petrol);
  transform: scaleX(0); transform-origin: left;
}
.g-lauf__seg:nth-child(-n+3) { border-color: var(--g-petrol); }
.g-lauf__seg:nth-child(-n+3)::before { transform: scaleX(1); }
.g-lauf__zahl { display: grid; justify-items: end; text-align: right; }
.g-lauf__zahl > span { grid-area: 1 / 1; white-space: nowrap; }
.g-lauf__satz { font-family: var(--g-titel); font-size: 15px; font-weight: 500; }

/* Phasen: 1 In Arbeit, 2 Freigabe nötig, 3 Fertig, 4 Schlusssatz.
   Ohne Skript gilt data-phase aus dem HTML; das Skript zählt weiter. */
.g-lauf [data-bei] { opacity: 0; visibility: hidden; }
.g-lauf[data-phase="1"] [data-bei~="1"],
.g-lauf[data-phase="2"] [data-bei~="2"],
.g-lauf[data-phase="3"] [data-bei~="3"],
.g-lauf[data-phase="4"] [data-bei~="4"] { opacity: 1; visibility: visible; }
.g-lauf[data-phase="3"] .g-lauf__seg:nth-child(4),
.g-lauf[data-phase="4"] .g-lauf__seg:nth-child(4) { border-color: var(--g-petrol); }
.g-lauf[data-phase="3"] .g-lauf__seg:nth-child(4)::before,
.g-lauf[data-phase="4"] .g-lauf__seg:nth-child(4)::before { transform: scaleX(1); }

.g-arbeitsfenster__werkzeuge {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  padding: 12px 14px; border-top: 1px solid var(--g-line); background: var(--g-sage-hell);
}
.g-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; color: var(--g-petrol); font-size: 12px; }
.g-tool .g-icon { width: 18px; height: 18px; flex-basis: 18px; }

.g-arbeitsfenster-hinweis   { margin-top: 14px; text-align: center; color: var(--g-muted); font-size: 14px; }
.g-arbeitsfenster-aktion { display: flex; justify-content: center; margin-top: 4px; }


/* ==========================================================================
   Problemszene - genau eine Szene, deshalb keine Auswahl und kein Karussell
   Die Zeichnung ist freigestellt (transparenter Grund, weiche Ränder) und trägt selbst keinen Schatten,
   keinen Rahmen, keine Rundung; dahinter liegt nur der weichgezeichnete Salbei-Fleck.
   ========================================================================== */
.g-problem {
  position: relative; z-index: 0;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; margin-top: 32px;
}
.g-problem::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% 46% -10% -4%;
  background: radial-gradient(closest-side, var(--g-sage) 60%, transparent);
  filter: blur(40px);
  opacity: .9;
}
.g-problem__image {
  width: 100%; max-width: 618px;
}
.g-problem__title {
  max-width: 18ch;
  font-family: var(--g-titel);
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2;
  font-weight: 500; letter-spacing: -.025em;
}


/* ==========================================================================
   Angebote - offene Bereiche mit feiner Mittellinie, keine schwebenden Karten
   Angebotsillustrationen bleiben ohne Beschnitt und schwebenden Fotorahmen.
   ========================================================================== */
.g-section-title {
  font-family: var(--g-titel);
  font-size: clamp(28px, 3vw, 42px); line-height: 1.16;
  letter-spacing: -.035em; font-weight: 600;
  margin-bottom: 36px; text-wrap: balance;
}
.g-section-title--center { text-align: center; }

.g-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.g-offer {
  min-width: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 40%);
  gap: 24px; align-items: start;
}
.g-offer + .g-offer { padding-left: 32px; border-left: 1px solid var(--g-line); }
.g-offer h3 { font-size: 27px; line-height: 1.2; margin-bottom: 12px; letter-spacing: -.025em; }
.g-offer p  { font-size: 16px; margin-bottom: 12px; }
.g-offer-art {
  width: 100%; max-width: 220px;
  align-self: center;
}
.g-offer-art__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.g-offers-note { text-align: center; margin-top: 28px; color: var(--g-muted); font-size: 15px; }


/* ==========================================================================
   Zugriff, Standort, Leistung - ein weißes Band mit Haarlinie und weichem Schatten
   ========================================================================== */
.g-trust {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 28px; gap: 24px;
  background: var(--g-white); border: 1px solid var(--g-line);
  border-radius: var(--g-rund-gross); box-shadow: var(--g-schatten-weich);
}
.g-trust__item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.g-trust__item + .g-trust__item { border-left: 1px solid var(--g-line); padding-left: 24px; }
.g-trust h3 { font-size: 16px; margin-bottom: 8px; }
.g-trust p  { font-size: 14px; color: var(--g-muted); }
.g-device-note { text-align: center; font-size: 14px; color: var(--g-muted); margin-top: 20px; }


/* ==========================================================================
   Für Entwickler: Glieks hinter Ihrem Produkt - die API als dritter, gleichwertiger Weg (OA-10, OA-11)
   Ein Satz, ein kleines Karussell mit drei Fällen (eine Folie sichtbar, Bild links 3:2 ~200 px, rechts
   Titel und ein Satz), Punkte und Pause-Knopf darunter, ein Link. Deutlich kleiner als eine Angebotskarte;
   das Überblenden zwischen Folien teilt sich die Kartenzyklus-Übergänge aus bewegung.css mit der Beispielkarte.
   ========================================================================== */
.g-produkt__lead { max-width: 72ch; margin: 0 auto; text-align: center; font-size: 17px; color: var(--g-muted); }

.g-karussell { max-width: 640px; margin: 24px auto 0; }
.g-karussell__buehne {
  display: grid;
  background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-rund-gross);
  box-shadow: var(--g-schatten-weich);
}
.g-karussell__buehne:hover, .g-karussell__buehne:focus-within { box-shadow: var(--g-schatten-tief); }

/* Folien liegen übereinander (wie .g-marke > .g-status); data-phase am Karussell schaltet die sichtbare frei. */
.g-karussell__folie {
  grid-area: 1 / 1; min-width: 0;
  display: flex; align-items: center; gap: 20px; padding: 18px 20px;
  opacity: 0; visibility: hidden;
}
.g-karussell[data-phase="1"] .g-karussell__folie[data-folie="1"],
.g-karussell[data-phase="2"] .g-karussell__folie[data-folie="2"],
.g-karussell[data-phase="3"] .g-karussell__folie[data-folie="3"] { opacity: 1; visibility: visible; }

.g-karussell__bild {
  flex: 0 0 190px; width: 190px; aspect-ratio: 3 / 2;
  object-fit: contain; border-radius: var(--g-rund); background: var(--g-sage-hell);
}
.g-karussell__text { min-width: 0; }
.g-karussell__text h3 { font-size: 17px; margin-bottom: 6px; letter-spacing: -.02em; }
.g-karussell__text p { font-size: 14px; line-height: 1.45; color: var(--g-muted); }

.g-karussell__leiste { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 12px; }

.g-karussell__punkte { display: flex; gap: 2px; }
.g-karussell__punkt {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  display: grid; place-items: center; border-radius: 50%;
}
.g-karussell__punkt::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--g-petrol); background: transparent;
}
.g-karussell__punkt[aria-current="true"]::before { background: var(--g-petrol); }

.g-karussell__pause {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; padding: 4px; color: var(--g-muted);
  font-family: var(--g-titel); font-size: 13px; font-weight: 500;
}
.g-karussell__pause .g-icon { width: 18px; height: 18px; flex-basis: 18px; }
.g-karussell__pause-icon--play, .g-karussell__pause-text--play { display: none; }
.g-karussell__pause[aria-pressed="true"] .g-karussell__pause-icon--pause,
.g-karussell__pause[aria-pressed="true"] .g-karussell__pause-text--pause { display: none; }
.g-karussell__pause[aria-pressed="true"] .g-karussell__pause-icon--play,
.g-karussell__pause[aria-pressed="true"] .g-karussell__pause-text--play { display: inline-flex; }

.g-produkt__aktion { display: flex; justify-content: center; margin-top: 20px; }


/* ==========================================================================
   Herkunft und Fußzeile
   Herkunft und Betriebsort sind zwei Aussagen; der Betriebsort steht getrennt weiter oben.
   ========================================================================== */
.g-origin {
  display: grid; grid-template-columns: 1.1fr 1fr;
  align-items: end; gap: 24px;
}

/* Haarlinie über der Containerbreite, mit Abstand nach unten. Eine Regel, zwei Stellen:
   vor der Herkunft (an .g-origin) und vor den Angeboten (#angebote), keine eigene Farbe. */
.g-haarlinie-oben { border-top: 1px solid var(--g-line); padding-top: 28px; }
.g-origin h2 { font-size: 25px; line-height: 1.25; margin-bottom: 12px; }
.g-origin p  { font-size: 15px; color: var(--g-muted); margin-bottom: 8px; }
/* Die Heide-Datei ist bereits blass und freigestellt; sie trägt keinen Schatten und keinen Rahmen. */
.g-origin__landscape { width: 100%; max-width: 489px; justify-self: end; }

.g-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  margin-top: 24px; padding-block: 24px;
  border-top: 1px solid var(--g-line); font-size: 13px;
}
.g-footer .g-logo { width: 96px; }
.g-footer__claim {
  border-left: 1px solid var(--g-apricot); padding-left: 20px;
  font-family: var(--g-titel); font-size: 15px; font-weight: 500;
}
.g-footer__links { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }


/* ==========================================================================
   Unterseiten (Impressum, Datenschutz): ein Textblock unter derselben Kopfzeile
   ========================================================================== */
.g-unterseite { max-width: 62ch; padding-block: 48px; min-height: 40vh; }
.g-unterseite h1 { font-size: clamp(30px, 3.2vw, 44px); letter-spacing: -.035em; line-height: 1.12; margin-bottom: 20px; }

/* Rechtstexte (AGB, AVV, Datenschutz, Impressum, KI-Hinweise, Y-215
   Punkt (a)): breiter als der Fliesstext-Rahmen oben (Tabellen in avv.md/
   datenschutz.md brauchen mehr Platz), sonst dieselbe Fläche. */
.g-unterseite.g-recht { max-width: 74ch; }
.g-recht .g-recht__fassung {
  color: var(--g-muted); font-size: 14px; margin-bottom: 32px;
  padding-bottom: 16px; border-bottom: 1px solid var(--g-line);
}
.g-recht h2 {
  font-family: var(--g-titel); font-size: 20px; letter-spacing: -.02em;
  margin-top: 36px; margin-bottom: 12px;
}
.g-recht p { margin-bottom: 12px; }
.g-recht hr { border: none; border-top: 1px solid var(--g-line); margin-block: 28px; }
.g-recht ul { margin: 0 0 16px; padding-left: 22px; }
.g-recht li { margin-bottom: 6px; }
.g-recht code {
  background: var(--g-sage-hell); border-radius: 4px; padding: 1px 5px;
  font-size: .92em;
}
.g-recht a { color: var(--g-petrol); }
.g-recht a:hover { color: var(--g-petrol-hover); }
/* Y-608 Punkt (e) (BS-492): dezenter Ersatz fuer die rohen
   [ANWALT: ...]-Marker - der Wortlaut bleibt im title-Attribut
   (Klartext beim Ueberfahren/Antippen), die Anzeige selbst faellt
   bewusst nicht auf (kein Warnrot, keine Fettschrift). */
.g-recht__pruefung {
  color: var(--g-muted); font-style: italic; cursor: help;
  border-bottom: 1px dotted var(--g-muted);
}
.g-recht table {
  width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px;
}
.g-recht th, .g-recht td {
  text-align: left; vertical-align: top; padding: 8px 10px;
  border: 1px solid var(--g-line);
}
.g-recht th { background: var(--g-sage-hell); font-family: var(--g-titel); font-weight: 500; }
@media (max-width: 640px) {
  .g-recht table, .g-recht thead, .g-recht tbody, .g-recht th, .g-recht td, .g-recht tr { display: block; }
  .g-recht thead { display: none; }
  .g-recht tr { margin-bottom: 14px; border: 1px solid var(--g-line); border-radius: var(--g-rund-klein); }
  .g-recht td { border: none; border-bottom: 1px solid var(--g-line-weich); }
  .g-recht td:last-child { border-bottom: none; }
}


/* ==========================================================================
   Haftende Kopfzeile ab 900 px: Glasfläche, Haarlinie und Schatten erst nach dem Scrollen.
   ========================================================================== */
@media (min-width: 900px) {
  :root { --g-kopf-versatz: 93px; }
  .g-header {
    position: sticky; top: 0; z-index: 20;
    background: var(--g-paper-glas);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
  }
  html.g-gescrollt .g-header { border-bottom-color: var(--g-line); box-shadow: var(--g-schatten-kopf); }
}


/* ==========================================================================
   Schmale Schirme
   ========================================================================== */
@media (max-width: 1100px) {
  .g-header__innen { flex-wrap: wrap; }
  .g-nav { width: 100%; margin-left: 0; order: 3; }
  .g-header__innen .g-button { margin-left: auto; }
  .g-offer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .g-hero { grid-template-columns: 1fr; gap: 32px; }
  .g-hero h2 { font-size: clamp(34px, 6vw, 50px); }
  .g-arbeitsfenster { max-width: 620px; }
  .g-problem { grid-template-columns: 1fr; gap: 24px; }
  .g-problem::before { inset: -6% 10% 30% -4%; }
  .g-trust { grid-template-columns: 1fr; }
  .g-trust__item + .g-trust__item { border-left: 0; border-top: 1px solid var(--g-line); padding-left: 0; padding-top: 20px; }
}

/* Telefon: Kopfzeile in zwei knappen Zeilen, Karte direkt unter der Überschrift, Karte kompakt. */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .g-container { width: calc(100% - 40px); }
  .g-section { margin-block: 52px; }

  /* Zeile 1: Wortmarke, Satz, Anmelden - Zeile 2: die vier Navigationslinks. Der Demo-Knopf entfällt,
     die Karte folgt ohnehin direkt. */
  .g-header__innen { gap: 8px 10px; padding-block: 10px; }
  .g-header__innen .g-logo { width: 84px; }
  .g-claim-tag { font-size: 13px; line-height: 1.2; padding-left: 10px; white-space: normal; }
  .g-header__innen .g-button { display: none; }
  .g-header__anmelden { --g-linie-unten: 6px; margin-left: auto; padding-block: 8px; }
  .g-nav { gap: 0 14px; font-size: 13.5px; }
  .g-nav a { --g-linie-unten: 3px; padding-block: 5px; }

  /* Einstieg: Spaltenhüllen aufgelöst, Reihenfolge Überschrift, Karte, Bildunterschrift, Link, Lead, Kleintext, Fragen, Notiz. */
  .g-hero { padding-block: 16px 8px; gap: 0; }
  .g-hero__text, .g-hero__karte { display: contents; }
  .g-hero__karte::before { display: none; }
  .g-hero h2 { order: 1; font-size: clamp(27px, 7.6vw, 34px); line-height: 1.1; }
  .g-arbeitsfenster { order: 2; margin-top: 18px; }
  .g-arbeitsfenster-hinweis { order: 3; }
  .g-arbeitsfenster-aktion { order: 4; }
  .g-lead { order: 5; margin-top: 28px; font-size: 17px; }
  .g-hero .g-small { order: 6; }
  .g-questions { order: 7; grid-template-columns: 1fr; margin-block: 22px; }
  .g-hero__text > p:last-child { order: 8; }

  /* Karte kompakt: Innenabstände 14 px, Schrift 14/13 px, Wortmarke im Kopf entfällt (steht direkt darüber). */
  .g-arbeitsfenster__kopf { padding: 10px 14px; gap: 10px; font-size: 13px; }
  .g-arbeitsfenster__kopf .g-logo { display: none; }
  .g-arbeitsfenster__kennzeichnung { font-size: 11px; }
  .g-arbeitsfenster__inhalt { padding: 14px; }
  .g-prompt { margin-bottom: 12px; }
  .g-prompt__field { padding: 10px 12px; font-size: 13px; }
  .g-prompt__send { width: 42px; }
  .g-task { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; padding: 9px 2px; font-size: 13px; }
  .g-task > .g-icon { width: 20px; height: 20px; flex-basis: 20px; }
  .g-status { font-size: 11px; padding: 4px 8px; }
  .g-lauf__stand { padding-top: 10px; font-size: 13px; }
  .g-lauf__satz { font-size: 14px; }
  .g-arbeitsfenster__werkzeuge { padding: 8px 14px; gap: 0 10px; }
  .g-tool { font-size: 12px; padding: 4px 0; }

  .g-offers, .g-origin { grid-template-columns: 1fr; }
  .g-offer + .g-offer { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--g-line); }
  .g-problem__title { max-width: 22ch; }
  .g-section-title--center { text-align: left; }
  .g-trust { padding: 22px; }
  .g-origin__landscape { max-width: 380px; justify-self: start; }
  .g-footer__links { margin-left: 0; width: 100%; }

  .g-produkt__lead { text-align: left; margin: 0; }
  .g-karussell { margin-top: 24px; }
  .g-karussell__folie { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .g-karussell__bild { flex-basis: auto; width: 100%; max-width: 220px; }
  .g-produkt__aktion { justify-content: flex-start; margin-top: 22px; }
}

/* Wortgruppen, die nie getrennt umbrechen duerfen (z. B. Ortsnamen am Satzende). */
.g-zusammen { white-space: nowrap; }


/* Kompakter Einstieg; Abnahme in evidence/astra-landing-kompakt.md.
   CSS-Ausschnitt entfernt nur den freien Textraum des bestehenden Markenmotivs. */
.g-start {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  gap: 48px; padding-block: 64px 48px; margin-bottom: 24px;
}
.g-start > * { min-width: 0; }
.g-start__text h1 {
  font-size: clamp(42px, 4vw, 64px); line-height: 1.06;
  font-weight: 600; letter-spacing: -.04em; margin-bottom: 24px;
}
.g-start__text p { font-size: 19px; line-height: 1.55; max-width: 47ch; color: var(--g-muted); }
.g-start__text p + p { margin-top: 8px; }
.g-start__aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 28px; }
.g-start__bild { position: relative; aspect-ratio: 1.4; overflow: hidden; mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 88%, transparent);
  mask-composite: intersect; }
.g-start__bild img { position: absolute; width: 145%; max-width: none; height: auto; right: -2%; bottom: -15%; }
.g-start + #leistungen { margin-top: 24px; }
@media (max-width: 899px) {
  .g-start { gap: 24px; padding-block: 40px 24px; }
  .g-start__text h1 { font-size: clamp(38px, 5vw, 52px); }
}
@media (max-width: 700px) {
  .g-start { grid-template-columns: 1fr; padding-block: 28px 0; gap: 24px; }
  .g-start__text h1 { font-size: clamp(36px, 9vw, 48px); margin-bottom: 20px; }
  .g-start__text p { font-size: 17px; }
  .g-start__aktionen { margin-top: 24px; align-items: stretch; flex-direction: column; gap: 16px; }
  .g-start__aktionen .g-button { justify-content: center; min-height: 48px; }
  .g-start__aktionen .g-link { align-self: center; }
  .g-start__bild { width: min(100%, 440px); justify-self: center; }
}



/* ==========================================================================
   Leistungsbereiche - sechs Motive im 4:3-Raster (Medienpaket 02-leistungsbereiche, Y-170a).
   Dieselbe Flaeche/dasselbe Seitenverhaeltnis je Kachel (LIESMICH.md); die Illustration
   zeigt eine Leistung, keine tatsaechlichen Daten - object-fit: contain statt cover, damit
   nichts von der bereits exakt 4:3 gelieferten Zeichnung beschnitten wird.
   ========================================================================== */
.g-leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; }
.g-leistung { min-width: 0; }
.g-leistung__bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--g-sage-hell); border-radius: var(--g-rund);
}
.g-leistung h3 {
  margin-top: 16px; font-size: 19px; line-height: 1.25; letter-spacing: -.02em;
}
.g-leistung p { margin-top: 6px; font-size: 15.5px; color: var(--g-muted); }

@media (max-width: 899px) {
  .g-leistungen { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}
@media (max-width: 640px) {
  .g-leistungen { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}


/* ==========================================================================
   Demos - fuenf Musikbeispiele und drei Werbespots (Y-541, BS-427). Dieselbe
   Kartensprache wie .g-trust (weisse Flaeche, Haarlinie, weicher Schatten);
   Musik und Videos je ein 3er-Raster, die Hochformat-Videokarte schmaler und
   zentriert statt gestreckt.
   ========================================================================== */
.g-demos__untertitel {
  font-size: 20px; letter-spacing: -.01em; text-align: center;
  margin-top: 40px; margin-bottom: 18px;
}
.g-demos__untertitel:first-of-type { margin-top: 28px; }

.g-demos-musik, .g-demos-video { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.g-demo-karte {
  min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-rund-gross);
  box-shadow: var(--g-schatten-weich);
}
.g-demo-karte figcaption { display: flex; flex-direction: column; gap: 2px; }
.g-demo-karte__titel { font-family: var(--g-titel); font-weight: 600; font-size: 16px; line-height: 1.3; }
.g-demo-karte__stil  { font-size: 13.5px; color: var(--g-muted); }
.g-demo-karte__ki {
  align-self: flex-start; font-size: 12px; color: var(--g-muted);
  border: 1px solid var(--g-line); border-radius: var(--g-rund-klein); padding: 2px 8px;
}
.g-demo-musik audio { width: 100%; }
.g-demo-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--g-sage-hell); border-radius: var(--g-rund); object-fit: contain;
}
.g-demo-video--hoch { max-width: 240px; margin-inline: auto; }
.g-demo-video--hoch video { aspect-ratio: 9 / 16; }

@media (max-width: 899px) {
  .g-demos-musik, .g-demos-video { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .g-demo-video--hoch { grid-column: span 2; }
}
@media (max-width: 640px) {
  .g-demos-musik, .g-demos-video { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .g-demo-video--hoch { grid-column: auto; max-width: 220px; }
}


/* Anwendungsschau: dieselbe Box, fester Raum fuer alle Texte und Motive.
   Beleg: evidence/astra-landing-anwendungsschau.md. */
.g-start__szenentexte { display: grid; margin-top: 26px; }
.g-start__szene { grid-area: 1 / 1; min-width: 0; padding-bottom: 30px; position: relative; }
.g-start__szene[aria-hidden="true"] { visibility: hidden; opacity: 0; }
.g-start__szene h2 { font-size: 24px; line-height: 1.25; margin-bottom: 10px; letter-spacing: -.025em; }
.g-start__szene p { margin: 0; font-size: 18px; }
.g-start__ausblick { position: absolute; bottom: 0; left: 0; color: #78522f; font-size: 13px; font-weight: 600; }
a.g-start__ausblick { text-decoration: underline; text-underline-offset: 3px; }
a.g-start__ausblick:hover, a.g-start__ausblick:focus-visible { color: #5b3d22; }
.g-start__aktionen { margin-top: 18px; }
.g-start__schau { min-width: 0; }
.g-start__schau .g-start__bild { width: 100%; aspect-ratio: 1.55; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 89%, transparent); }
.g-boxwelt { display: block; width: 100%; height: 100%; }
.g-start__steuerung { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.g-start__steuerung[hidden], .g-start__pause[hidden] { display: none; }
.g-start__auswahl { display: flex; justify-content: center; flex-wrap: wrap; gap: 3px 10px; }
.g-start__auswahl button, .g-start__pause {
  appearance: none; border: 0; background: transparent; color: var(--g-petrol);
  font: inherit; font-size: 13px; cursor: pointer; padding: 10px 2px; min-height: 44px;
}
.g-start__auswahl button { border-bottom: 2px solid transparent; }
.g-start__auswahl button[aria-pressed="true"] { border-color: var(--g-petrol); font-weight: 600; }
.g-start__pause { text-decoration: underline; text-underline-offset: 4px; min-width: 76px; }
.g-start__steuerung button:focus-visible { outline: 2px solid var(--g-petrol); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 700px) {
  .g-start__szene h2 { font-size: 22px; }
  .g-start__szene p { font-size: 17px; }
  .g-start__szenentexte { margin-top: 20px; }
  .g-start__schau { width: 100%; }
  .g-start__steuerung { gap: 4px; margin-top: 2px; }
  .g-start__auswahl { gap: 0 12px; }
}

/* Owner 24.09.2026: Werbevideos als Vorschaubild mit Abspielknopf, Wiedergabe gross im Overlay. */
.g-demos__erklaerung { max-width: 62ch; margin: -6px auto 22px; text-align: center; color: var(--g-muted); font-size: 15px; line-height: 1.6; }
.g-demo-video__oeffnen { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--g-sage-hell); border-radius: var(--g-rund); overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.g-demo-video--hoch .g-demo-video__oeffnen { aspect-ratio: 9 / 16; }
.g-demo-video__oeffnen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.g-demo-video__oeffnen:hover img, .g-demo-video__oeffnen:focus-visible img { transform: scale(1.03); }
.g-demo-video__oeffnen:focus-visible { outline: 3px solid var(--g-petrol); outline-offset: 3px; }
.g-demo-video__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.g-demo-video__play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--g-petrol); }
.g-demo-overlay { padding: 0; border: 0; background: #000; border-radius: var(--g-rund-gross); width: min(1100px, 94vw); max-height: 92vh; }
.g-demo-overlay--hoch { width: min(480px, 90vw); }
.g-demo-overlay::backdrop { background: rgba(10, 30, 32, .78); }
.g-demo-overlay video { display: block; width: 100%; max-height: 92vh; }
.g-demo-overlay__zu { position: absolute; right: 10px; top: 8px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 26px; line-height: 40px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .g-demo-video__oeffnen img { transition: none; } }
.g-demos-video { align-items: start; }

/* Owner 24.09.2026 (Kleinschritt "Landing-Demos"): Imagefilm-Buehne ganz oben im
   Abschnitt "Demos" - volle Breite, 16:9, dieselbe Knopf-Optik wie die Werbevideos
   (.g-demo-video__oeffnen), aber ohne Karten-Look. data-film-bereit am Container
   schaltet per CSS zwischen Abspielknopf und Platzhalter um (siehe Kommentar in
   index.html und skript/demos.js) - kein weiterer Eingriff noetig, wenn der Film
   fertig ist. */
.g-imagefilm { margin-bottom: 12px; }
.g-imagefilm__buehne { position: relative; max-width: 860px; margin: 0 auto; }
.g-imagefilm__oeffnen { display: none; }
.g-imagefilm[data-film-bereit="1"] .g-imagefilm__oeffnen { display: block; }
.g-imagefilm[data-film-bereit="1"] .g-imagefilm__platzhalter { display: none; }
.g-imagefilm__platzhalter {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--g-rund);
  overflow: hidden; background: var(--g-sage-hell);
}
.g-imagefilm__platzhalter img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-imagefilm__hinweis {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: rgba(10, 30, 32, .82); color: #fff; font-size: 14px; font-weight: 600;
  padding: 8px 18px; border-radius: var(--g-rund-klein); white-space: nowrap;
}

/* Galerie "So sieht Glieks aus" - Screenshots aus dem Kundensystem, als Karten wie
   .g-demo-karte. Zweispaltig per auto-fit (aktuell drei Karten - die vierte,
   Schnittplatz, fehlt noch, siehe Baubericht); passt sich ohne Aenderung an, sobald
   eine vierte Karte dazukommt (2x2). */
.g-galerie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; max-width: 720px; margin: 0 auto;
}
.g-galerie__karte {
  appearance: none; margin: 0; padding: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--g-white); border: 1px solid var(--g-line); border-radius: var(--g-rund-gross);
  box-shadow: var(--g-schatten-weich); overflow: hidden;
}
.g-galerie__karte:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 340px; margin-inline: auto; width: 100%; }
.g-galerie__karte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .3s ease; }
.g-galerie__karte:hover img, .g-galerie__karte:focus-visible img { transform: scale(1.03); }
.g-galerie__karte:focus-visible { outline: 3px solid var(--g-petrol); outline-offset: 3px; }
.g-galerie__titel { padding: 12px 16px; font-family: var(--g-titel); font-weight: 600; font-size: 15px; color: var(--g-petrol); }
@media (prefers-reduced-motion: reduce) { .g-galerie__karte img { transition: none; } }
@media (max-width: 640px) {
  .g-galerie { grid-template-columns: 1fr; max-width: 420px; }
  .g-galerie__karte:last-child:nth-child(odd) { max-width: none; }
}

/* Overlay traegt jetzt Video ODER Bild (skript/demos.js blendet um). */
.g-demo-overlay__bild { display: none; width: 100%; max-height: 92vh; object-fit: contain; }

.g-recht__bild{max-width:100%;height:auto;display:block;border-radius:6px;border:1px solid #e3e8ea}