/* ==========================================================================
   gawlix. Startseite.
   Wird nur auf index.php geladen, ohne die alte styles.css.
   Welt: Markenfarben Weiß #f0efed, Schwarz #191919, Rot #c00146; hell, Rot als einziger
   Akzent. Rote Leuchten in drei Zuständen (offen, in Arbeit, läuft von selbst) begleiten
   die Zeitfresser. Keine sichtbaren Kanten zwischen Abschnitten: alle liegen auf dem Seitengrund.
   ========================================================================== */
.gx-start {
  /* Markenfarben (Oscar): Weiß #f0efed, Schwarz #191919, Rot #c00146. Alle übrigen Töne sind davon abgeleitet. */
  --rot: #c00146; --rot-tief: #a3003b;
  --anthrazit: #191919;
  --grund: #f0efed; --grund-hell: #f7f6f4; --grund-ruhe: #e2e0dc;
  --tinte: #191919; --tinte-2: #4d4b47; --linie: #cfccc6;
  --weiss: #f0efed; --karte: #f8f7f5; --flaeche: #f0efed; --linie-hell: #e2dfda;
  /* Schriften (Oscar, 13.09.2026): Figtree für Text, Space Grotesk für Überschriften, Zahlen, Knöpfe und Navigation */
  --schrift: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tasten: 'Space Grotesk', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------------------------------------------------------------- Grundlage */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-color: #8f8c85 #f0efed; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.gx-start *, .gx-start *::before, .gx-start *::after { box-sizing: border-box; }
body.gx-start {
  margin: 0; background: var(--grund); color: var(--tinte);
  font: 400 18px/1.6 var(--schrift); caret-color: var(--rot);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.gx-start ::selection { background: var(--rot); color: #fff; }
.gx-start img { max-width: 100%; }
.gx-start [hidden] { display: none !important; }
.gx-start h1, .gx-start h2, .gx-start h3, .gx-start p, .gx-start li { overflow-wrap: break-word; }
.gx-start :focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
.gx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.gx-breite { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 3vw, 40px); }
.gx-abschnitt { padding-block: clamp(56px, 8vw, 112px); }

/* ---------------------------------------------------------------- Typografie */
.gx-h2 { margin: 0; max-width: 22ch; font: 700 clamp(1.6rem, 1.1rem + 1.75vw, 2.55rem)/1.08 var(--tasten); letter-spacing: -0.02em; text-wrap: balance; }
.gx-h3 { margin: 0 0 14px; font: 700 clamp(1.4rem, 1.1rem + 0.9vw, 2rem)/1.1 var(--tasten); letter-spacing: -0.005em; text-wrap: balance; }
.gx-text p { margin: 0 0 1.05em; max-width: 64ch; }
.gx-text p:last-child { margin-bottom: 0; }
.gx-satz { margin: 0; max-width: 32ch; font: 700 clamp(1.35rem, 1rem + 1.2vw, 2.1rem)/1.22 var(--tasten); letter-spacing: -0.015em; text-wrap: balance; }
.gx-zweispaltig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
@media (min-width: 960px) { .gx-zweispaltig > .gx-h2 { position: sticky; top: 104px; } }
@media (max-width: 959px) { .gx-zweispaltig { grid-template-columns: minmax(0, 1fr); } }
/* Problem-Abschnitt: Foto von Oscar unter der Überschrift (Oscar, 13.09.); am Rechner kleben Überschrift und Foto gemeinsam */
@media (min-width: 960px) { .gx-zweispaltig > .gx-bildkopf { position: sticky; top: 104px; } }
.gx-bildkopf__foto { margin: clamp(24px, 3vw, 36px) 0 0; max-width: 460px; }
.gx-bildkopf__foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 47% 35%;
  border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(25, 25, 25, 0.45);
}
.gx-bildkopf__cta { width: 100%; max-width: 460px; margin-top: 20px; justify-content: center; }
/* Kundenfotos mit Vertrauenszeile unter dem Knopf (Oscar, 13.09.2026): überlappende runde Fotos, daneben Text und Bewertung;
   mittig unter dem Knopf, führt zu den Fallstudien */
.gx-vertrauen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; max-width: 460px; margin-top: 18px; padding-block: 4px; color: var(--tinte); text-decoration: none; }
.gx-vertrauen__bilder { display: flex; flex: none; }
.gx-vertrauen__bilder img { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #e6e3de; box-shadow: 0 0 0 3px var(--weiss); }
.gx-vertrauen__bilder img + img { margin-left: -12px; }
.gx-vertrauen__text { display: grid; gap: 4px; }
.gx-vertrauen__text strong { font: 700 16px/1.2 var(--tasten); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 160ms ease; }
.gx-vertrauen__bewertung { display: flex; align-items: center; gap: 8px; font: 500 14px/1.2 var(--schrift); color: var(--tinte-2); }
.gx-vertrauen__bewertung .gx-sterne svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .gx-vertrauen:hover .gx-vertrauen__text strong { text-decoration-color: currentColor; } }
.gx-vertrauen:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 959px) { .gx-vertrauen { max-width: 520px; } }
.gx-vertrauen__bewertung { white-space: nowrap; }
@media (max-width: 559px) { .gx-vertrauen { gap: 8px 12px; } .gx-vertrauen__bilder img { width: 38px; height: 38px; } .gx-vertrauen__bilder img + img { margin-left: -10px; } .gx-vertrauen__text strong { font-size: 15px; } .gx-vertrauen__bewertung { gap: 6px; font-size: 13px; } .gx-vertrauen__bewertung .gx-sterne svg { width: 12px; height: 12px; } }
@media (max-width: 374px) { .gx-vertrauen { gap: 8px 10px; } .gx-vertrauen__bilder img { width: 32px; height: 32px; } .gx-vertrauen__bilder img + img { margin-left: -9px; } .gx-vertrauen__text strong { font-size: 14px; } }   /* Knopf unter dem Foto, so breit wie das Foto (Oscar, 13.09.) */
/* Derselbe Glanz-Knopf wie im Hero, aber auf hellem Grund füllt er sich beim Hovern schwarz statt hell (Oscar, 13.09.) */
.gx-knopf.gx-knopf--glanz.gx-knopf--auf-hell::before { background: #191919; }
.gx-knopf.gx-knopf--glanz.gx-knopf--auf-hell:focus-visible { color: #ffffff; }
.gx-knopf.gx-knopf--glanz.gx-knopf--auf-hell:focus-visible .gx-knopf__text small { color: #f4a3bd; }
@media (hover: hover) and (pointer: fine) {
  .gx-knopf.gx-knopf--glanz.gx-knopf--auf-hell:hover { color: #ffffff; }
  .gx-knopf.gx-knopf--glanz.gx-knopf--auf-hell:hover .gx-knopf__text small { color: #f4a3bd; }
}
@media (max-width: 959px) { .gx-bildkopf__foto, .gx-bildkopf__cta { max-width: 520px; } }

/* ---------------------------------------------------------------- Hero: Video und Nutzen */
/* Dunkle Fläche mit rotem Schein (Oscar, 13.09.2026), unten gerundet: keine harte Kante zum hellen Rest. */
.gxs-hero {
  /* Oben liegt die Kopfleiste auf dieser Fläche (Kopf als Insel, gawlix-rahmen.css): daher 76px Platz im Innenabstand */
  padding: calc(76px + clamp(24px, 2.8vw, 44px)) 0 clamp(56px, 8vw, 112px);
  /* Ganzer Bereich farbig wie die Wartungsseite: Schwarz mit rotem Schein (Oscar, 13.09.). Oben randlos, unten
     gerundet; sobald gescrollt wird, zieht er sich zur Kachel zusammen (gawlix-rahmen.js setzt data-kopf-gescrollt). */
  margin: 0; border-radius: 0; position: relative; isolation: isolate;
  /* mindestens 95 % der Fensterhöhe, Inhalt senkrecht mittig (Oscar, 13.09.); wird bei viel Inhalt einfach höher */
  min-height: 95vh; min-height: 95svh; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;
  /* statt des roten Scheins nur noch ein schwaches Raumlicht; die Tiefe kommt von den 3D-Kugeln (unten) */
  background:
    radial-gradient(closest-side, rgba(192, 1, 70, 0.16), rgba(140, 2, 53, 0.05) 60%, transparent 80%) 60% 40% / min(1200px, 170vw) min(1200px, 170vw) no-repeat,
    #191919;
  clip-path: inset(0 0 0 0 round 0 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px));
  transition: clip-path 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
:root[data-kopf-gescrollt="true"] .gxs-hero { clip-path: inset(clamp(6px, 0.8vw, 12px) clamp(8px, 1.2vw, 16px) 0 round clamp(24px, 3vw, 40px)); }
/* Am Handy zieht sich der Hero beim Scrollen nicht zur Kachel zusammen, sonst wirkt alles klein und gequetscht (Oscar, 13.09.2026) */
@media (max-width: 767px) { :root[data-kopf-gescrollt="true"] .gxs-hero { clip-path: none; } }
@media (prefers-reduced-motion: reduce) { .gxs-hero { transition: none; } }
.gxs-hero > .gx-breite { width: 100%; box-sizing: border-box; }   /* im Flex-Hero sonst durch margin: auto nur so breit wie der Inhalt */

/* Leuchtkugeln im Hero (Oscar, 13.09.): weich verschwommene rote Lichtkugeln in verschiedenen Tiefen statt des roten
   Scheins, bewusst zurückhaltend (glänzende Kugeln waren zu präsent). Weiche Radialverläufe statt filter: blur, damit
   die Bewegung flüssig bleibt. Sie liegen hinter dem Inhalt und folgen der Maus (gawlix-start.js setzt nur transform):
   vordere stärker, hintere schwächer, der hellere Kern rückt zur Maus. Ohne Maus oder bei reduzierter Bewegung still. */
.gx-kugeln { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }   /* hidden: die Kugeln ragen über den Rand, sonst ließe sich die Seite seitlich scrollen */
.gx-kugel {
  position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgba(214, 16, 78, 0.42) 0%, rgba(192, 1, 70, 0.24) 28%, rgba(150, 2, 56, 0.09) 52%, rgba(150, 2, 56, 0) 70%);
}
.gx-kugel__licht {   /* hellerer Kern, rückt zur Maus */
  position: absolute; inset: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 50% 50%, rgba(255, 92, 140, 0.26) 0%, rgba(236, 40, 96, 0.1) 18%, rgba(236, 40, 96, 0) 34%);
  transform: translate3d(-8%, -9%, 0);
}
.gx-kugel--hinten { width: clamp(560px, 58vw, 900px); left: 56%; top: -12%; opacity: 0.8; }
.gx-kugel--links  { width: clamp(320px, 32vw, 500px); left: -14%; top: 26%; }
.gx-kugel--klein  { width: clamp(160px, 14vw, 220px); left: 16%; top: -8%; opacity: 0.75; }
.gx-kugel--vorne  { width: clamp(240px, 22vw, 340px); left: 38%; top: 60%; }
@media (max-width: 959px) {
  .gx-kugel--hinten { width: 520px; left: 20%; top: 0; }
  .gx-kugel--links  { display: none; }
  .gx-kugel--klein  { display: none; }
  .gx-kugel--vorne  { width: 360px; left: -30%; top: 46%; }
}

/* ---------------------------------------------------------------- Prozess Check (Generator) */
/* clip statt hidden: hidden macht den Abschnitt zum Scrollbereich, dann kleben Summenleiste und Einleitung nicht */
.gxs-check { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.gx-check-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.gx-check-intro .gx-text { margin-top: clamp(18px, 2.4vw, 28px); }
/* Ausstiegs-Fenster (Oscar, 13.09.): will der Besucher die Seite verlassen, fragt es „Welche Informationen fehlen Ihnen?“
   und bietet einen Rückruf an. Verhalten: gawlix-start.js, Versand: api/rueckruf.php */
.gx-ausstieg {
  box-sizing: border-box; width: min(560px, calc(100% - 32px));   /* keine eigene position: das Fenster muss fest im Bildschirm stehen, auch weit unten auf der Seite */ max-width: none; max-height: min(92svh, 960px); margin: auto;
  padding: clamp(20px, 3vw, 32px); border: 0; border-radius: 24px; overflow: auto; overscroll-behavior: contain;
  background: var(--grund); color: var(--tinte); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
}
.gx-ausstieg::backdrop { background: rgba(12, 10, 11, 0.64); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.gx-ausstieg[open] { animation: gx-auf 280ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes gx-auf { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
html:has(.gx-ausstieg[open]) { overflow: hidden; }
.gx-ausstieg__titel { margin: 0; font: 700 clamp(1.45rem, 1.1rem + 1vw, 2rem)/1.1 var(--tasten); letter-spacing: -0.015em; text-wrap: balance; }
.gx-ausstieg__titel:focus { outline: none; }   /* beim Öffnen liegt der Fokus auf der Überschrift (autofocus), damit sie vorgelesen wird */
.gx-ausstieg__zu {
  position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: var(--karte); color: var(--tinte); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--linie-hell); transition: background-color 180ms ease;
}
.gx-ausstieg__zu svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .gx-ausstieg__zu:hover { background: var(--linie-hell); } }
.gx-ausstieg__zu:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.gx-ausstieg__titel { padding-right: 52px; }   /* Platz für den Schließen-Knopf */
.gx-ausstieg__unter { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--tinte-2); }
.gx-ausstieg__feld { display: grid; gap: 6px; margin-top: 18px; font: 600 14px/1.3 var(--tasten); color: var(--tinte); }
.gx-ausstieg__feld input, .gx-ausstieg__feld textarea, .gx-ausstieg__feld select {
  box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1.5px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--tinte); font: 400 16px/1.45 var(--schrift);   /* 16px: iOS zoomt sonst beim Tippen */
}
.gx-ausstieg__feld textarea { min-height: 128px; resize: vertical; }
.gx-ausstieg__feld input:focus, .gx-ausstieg__feld textarea:focus, .gx-ausstieg__feld select:focus { outline: 0; border-color: var(--rot); box-shadow: 0 0 0 4px rgba(192, 1, 70, 0.14); }
.gx-ausstieg__feld [aria-invalid="true"] { border-color: var(--rot); background: #fbeef2; }
.gx-ausstieg__reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 519px) { .gx-ausstieg__reihe { grid-template-columns: minmax(0, 1fr); } }
.gx-ausstieg__knopf { width: 100%; margin-top: 20px; }
.gx-ausstieg__zurueck { display: block; margin: 12px auto 0; }
.gx-ausstieg__fehler { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fbe9ee; color: #6e0028; font-size: 15px; font-weight: 500; }
.gx-ausstieg__feld small { font-weight: 500; color: var(--tinte-2); }
/* Auswahlpunkte in Schritt 1: ganze Zeile klickbar, angehakt rot umrandet */
.gx-ausstieg__themen { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.gx-ausstieg__thema {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; box-sizing: border-box;
  border: 1.5px solid var(--linie); border-radius: 12px; background: var(--karte); cursor: pointer;
  font-size: 16px; line-height: 1.35; color: var(--tinte); transition: border-color 160ms ease, background-color 160ms ease;
}
.gx-ausstieg__thema input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--rot); cursor: pointer; }
.gx-ausstieg__thema:has(input:checked) { border-color: var(--rot); background: #fbeef2; }
.gx-ausstieg__thema:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(192, 1, 70, 0.14); border-color: var(--rot); }
@media (hover: hover) and (pointer: fine) { .gx-ausstieg__thema:hover { border-color: var(--tinte-2); } }
.gx-ausstieg__themen[aria-invalid="true"] .gx-ausstieg__thema { border-color: var(--rot); }
/* Datenschutz-Zustimmung nach den Kontaktfeldern */
.gx-ausstieg__zustimmung { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--tinte-2); cursor: pointer; }
.gx-ausstieg__zustimmung input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rot); cursor: pointer; }
.gx-ausstieg__zustimmung a { color: var(--tinte); }
.gx-ausstieg__zustimmung:has(input[aria-invalid="true"]) { color: #6e0028; }
.gx-ausstieg__falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gx-ausstieg[open] { animation: none; } }
@media (min-width: 960px) { .gx-check-intro { position: sticky; top: 104px; } }
@media (max-width: 959px) { .gx-check-raster { grid-template-columns: minmax(0, 1fr); } }
/* Das Leuchten wächst mit den eingestellten Stunden (gawlix-check.js setzt opacity und transform). */
.gx-check__licht {
  --licht: min(1400px, 120vw);
  position: absolute; z-index: -1; top: calc(var(--licht) * -0.26); right: calc(var(--licht) * -0.34);
  width: var(--licht); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(192, 1, 70, 0.34) 0%, rgba(192, 1, 70, 0.16) 38%, rgba(192, 1, 70, 0.06) 66%, rgba(192, 1, 70, 0) 100%);
  opacity: 0.45; transform: scale(0.82); transform-origin: 66% 34%;
  transition: opacity 800ms var(--aus), transform 1100ms var(--aus);
}
.gx-hero__kopf { max-width: 1160px; margin: 0 auto; text-align: center; }
/* Eyebrow über der Headline (Oscar, 13.09.): kleines Schild wie der Status der Wartungsseite, Ecken wie ein Knopf */
.gx-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 1.6vw, 20px); padding: 7px 14px;
  border: 1px solid rgba(236, 106, 137, 0.35); border-radius: 10px; background: rgba(192, 1, 70, 0.12);
  color: #f9c3d4; font: 600 14px/1.25 var(--tasten); letter-spacing: 0.02em; text-align: left;   /* heller als Rose: über dem Leuchten sonst nur 4,75:1 */
}
.gx-hero__eyebrow-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #ec6a89; }
.gx-hero__titel { margin: 0 auto; max-width: 44ch; font: 700 clamp(1.85rem, 1rem + 2.35vw, 3rem)/1.06 var(--tasten); letter-spacing: -0.025em; color: var(--tinte); text-wrap: balance; }
.gx-hero__lead { margin: clamp(14px, 1.6vw, 22px) auto 0; max-width: 62ch; font: 400 clamp(17px, 1rem + 0.3vw, 20px)/1.55 var(--schrift); color: var(--tinte-2); text-wrap: pretty; }

/* Desktop: zwei Spalten, links Video und darunter der Beleg, rechts die Nutzen und direkt darunter der Knopf.
   Handy (unten): die Spalten lösen sich auf (display: contents), Reihenfolge Video, Knopf, Nutzen, Beleg,
   damit der Knopf im ersten Bildschirm liegt.
   Die Überzeile „Weniger Arbeit. Mehr Zeit fürs Geschäft.“ samt Linie darunter ist raus (Oscar, 13.09.). */
.gx-hero__raster {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(28px, 4.5vw, 72px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px);
}
.gx-hero__links, .gx-hero__rechts { min-width: 0; }
/* Video links; bis Oscars Aufnahme da ist, zeigt dieselbe Fläche das Foto (index.php prüft die Datei). */
.gx-hero__video { grid-area: video; margin: 0; }
.gx-video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1147 / 640; object-fit: cover; border-radius: 20px; background: var(--grund-ruhe); box-shadow: 0 30px 60px -36px rgba(25, 25, 25, 0.45); }
/* Echtes Video: 16:9 und ein großer Play-Knopf über dem Standbild (gawlix-start.js blendet ihn beim Start aus) */
.gx-video__rahmen { position: relative; }
.gx-video--film { aspect-ratio: 16 / 9; background: #f4f3f1; }
/* Untertitel in der Textschrift der Seite, dunkle Tafel auf dem hellen Whiteboard-Film */
.gx-video--film::cue { font-family: var(--schrift); line-height: 1.3; color: #f0efed; background: rgba(25, 25, 25, 0.86); }
.gx-video__play {
  position: absolute; inset: 0; margin: auto; display: grid; place-items: center;
  width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--rot); color: #ffffff; box-shadow: 0 16px 34px -14px rgba(40, 0, 15, 0.7);
  transition: transform 200ms var(--aus), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.gx-video__play svg { width: 42%; height: 42%; }   /* das Dreieck im Symbol ist schon optisch ausgeglichen; ein Zusatzversatz machte den Knopf schief */
@media (hover: hover) and (pointer: fine) { .gx-video__play:hover { transform: scale(1.06); background: var(--rot-tief); } }
.gx-video__play:active { transform: scale(0.96); }
/* Nach dem Anhalten pulsiert der Knopf dauerhaft, langsam und weich mit rotem Ring (Oscar, 13.09.; gawlix-start.js
   setzt .gx-video-puls und nimmt sie beim Abspielen weg), nie bei reduzierter Bewegung */
.gx-video__play.gx-video-puls { animation: gx-video-puls 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s infinite; }
@keyframes gx-video-puls {
  0%        { box-shadow: 0 16px 34px -14px rgba(40, 0, 15, 0.7), 0 0 0 0 rgba(192, 1, 70, 0.5); }
  72%, 100% { box-shadow: 0 16px 34px -14px rgba(40, 0, 15, 0.7), 0 0 0 26px rgba(192, 1, 70, 0); }
}
@media (prefers-reduced-motion: reduce) { .gx-video__play.gx-video-puls { animation: none; } }
.gx-video__play:focus-visible { outline: 3px solid #f0efed; outline-offset: 4px; }
/* „Mit Ton ansehen“ oben links, solange das Video stumm von selbst läuft (gawlix-start.js) */
.gx-video__ton {
  position: absolute; left: clamp(10px, 1.2vw, 14px); top: clamp(10px, 1.2vw, 14px);
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; box-sizing: border-box;
  border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(25, 25, 25, 0.88); color: #f0efed; font: 600 15px/1 var(--tasten);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: background-color 200ms ease, transform 160ms var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.gx-video__ton svg { flex: none; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .gx-video__ton:hover { background: var(--rot); } }
.gx-video__ton:active { transform: scale(0.97); }
.gx-video__ton:focus-visible { outline: 3px solid #f0efed; outline-offset: 3px; }
.gx-video__unter { margin-top: 12px; font: 600 14px/1.3 var(--tasten); letter-spacing: 0.04em; color: var(--tinte-2); }
.gx-hero__aktion { grid-area: aktion; margin-top: 22px; }
.gx-hero__cta { width: 100%; justify-content: center; }
.gx-hero__aktion .gx-hero__bewertung { justify-content: center; margin-top: 14px; }   /* 5/5 auf ProvenExpert direkt unter dem Knopf (Oscar, 13.09.) */
.gx-zweitweg { display: inline-block; padding-block: 10px; margin-top: 2px; color: var(--tinte); font: 600 16px/1.25 var(--tasten); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.gx-zweitweg svg { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -3px; }   /* der Pfeil folgt dem letzten Wort, auch beim Umbruch */
@media (hover: hover) and (pointer: fine) { .gx-zweitweg:hover { color: var(--rot); } }
.gx-zweitweg:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 6px; }
.gx-hero__rechts > .gx-nutzen { grid-area: liste; margin-top: 0; }
.gx-hero__rechts > .gx-nutzen li:first-child { border-top: 0; padding-top: 0; }
.gx-hero__beweis { grid-area: beweis; margin-top: 22px; }
.gx-nutzen { list-style: none; margin: clamp(16px, 2vw, 24px) 0 0; padding: 0; border-bottom: 1px solid var(--linie); }
.gx-nutzen li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
/* Haken statt Punkt (Oscar, 13.09.): Lucide „check“ als Maske, Farbe über background */
.gx-nutzen li::before {
  content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; background: var(--rot);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
}
.gx-nutzen strong, .gx-nutzen span { grid-column: 2; }
/* Größen von Oscar vorgegeben (13.09.): Nutzen-Überschrift 18px, Text 15px */
.gx-nutzen strong { display: block; font: 700 18px/1.25 var(--tasten); }
.gx-nutzen span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--tinte-2); }
@media (max-width: 959px) {
  .gx-hero__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "aktion" "liste" "beweis"; }
  .gx-hero__links, .gx-hero__rechts { display: contents; }
  .gx-hero__aktion { margin-top: 24px; }
  .gx-hero__rechts > .gx-nutzen { margin-top: 20px; border-bottom: 0; }   /* sonst doppelte Linie über dem Beleg */
}
/* Rechner: Knopf direkt unter den Nutzen, damit der Hero möglichst ohne Scrollen ins Fenster passt (Oscar, 13.09.),
   bei den ursprünglichen Abständen. Die Unterzeile läuft zweizeilig, und das Video wird nur so breit, wie die
   Fensterhöhe es zulässt. Das Handy bleibt wie oben. */
@media (min-width: 960px) {
  .gxs-hero { padding-top: calc(76px + clamp(14px, 1.8vw, 30px)); padding-bottom: clamp(44px, 6svh, 80px); }   /* oben etwas weniger, seit die Eyebrow dazukam */
  .gx-hero__titel { font-size: 40px; line-height: 1.1; }   /* Größen von Oscar vorgegeben (13.09.): Headline 40px, Subheadline 20px */
  .gx-hero__lead { max-width: 60rem; font-size: 20px; }
  .gx-hero__raster {
    grid-template-columns: minmax(360px, min(660px, calc((100svh - 560px) * 16 / 9))) minmax(380px, 500px);
    justify-content: center;
  }
}

/* Farben auf der dunklen Fläche (wie die Wartungsseite): helle Schrift, roter Knopf, weiße Haken, rote Siegel */
.gxs-hero :focus-visible { outline-color: #f0efed; }
.gxs-hero .gx-hero__titel, .gxs-hero .gx-nutzen strong,
.gxs-hero .gx-beweis__bewertung, .gxs-hero .gx-beweis__kunden strong { color: #ffffff; }
.gxs-hero .gx-hero__lead { color: rgba(240, 239, 237, 0.8); }
.gxs-hero .gx-nutzen span, .gxs-hero .gx-beweis__kunden span, .gxs-hero .gx-video__unter { color: #d9d6ce; }
.gxs-hero .gx-nutzen, .gxs-hero .gx-nutzen li, .gxs-hero .gx-hero__beweis { border-color: rgba(255, 255, 255, 0.14); }
.gxs-hero .gx-nutzen li::before { background: #ffffff; }   /* weiße Haken (Oscar, 13.09.) */
.gxs-hero .gx-sterne { color: #ffffff; }
.gxs-hero .gx-beweis__siegel path:first-child { fill: #c00146; }
.gxs-hero .gx-beweis__siegel path:last-child { stroke: #ffffff; }
/* Hero-Knopf (Oscar, 13.09.): Logorot mit rotem Schein wie der Knopf der Wartungsseite, damit er sich vom dunklen
   Grund abhebt, mit Hörer ohne Kreis und Glanz: ein weicher Schimmer von oben und ein Lichtstreif, der mit dem
   Puls über die Fläche läuft (Oscar, 13.09.). Er pulsiert mit einem rosa Ring und füllt sich beim Hovern von links
   hell mit roter Schrift. Puls und Lichtstreif laufen dauerhaft, langsam und weich (Oscar, 13.09.);
   gawlix-start.js setzt .gx-puls nur, solange der Knopf im Bild ist; Hovern hält den Puls an; bei reduzierter Bewegung nie. */
.gx-knopf.gx-knopf--glanz {
  position: relative; isolation: isolate; overflow: hidden;   /* hidden schneidet nur Füllung und Lichtstreif, nicht den Puls-Ring (box-shadow) */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 38%, rgba(255, 255, 255, 0) 70%), #c00146;
  color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 14px 34px -14px rgba(192, 1, 70, 0.85);
  transition: transform 160ms var(--aus), color 240ms ease;
}
.gx-knopf.gx-knopf--glanz::after {   /* Lichtstreif */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.14) 53%, rgba(255, 255, 255, 0) 64%);
  transform: translateX(-110%);
}
.gx-knopf.gx-knopf--glanz.gx-puls::after { animation: gx-glanz 5.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s infinite; }   /* bei jedem zweiten Puls */
@keyframes gx-glanz { 0% { transform: translateX(-110%); } 32%, 100% { transform: translateX(110%); } }
.gx-knopf.gx-knopf--glanz::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #f0efed;
  clip-path: inset(0 100% 0 0 round 12px); transition: clip-path 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
.gx-knopf.gx-knopf--glanz svg { width: 24px; height: 24px; transition: transform 240ms var(--aus); }   /* nur der Hörer, ohne Kreis (Oscar) */
.gx-knopf.gx-knopf--glanz .gx-knopf__text small { color: #ffeef3; transition: color 240ms ease; }
.gx-knopf.gx-knopf--glanz.gx-puls { animation: gx-puls 2.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s infinite; }
@keyframes gx-puls {   /* Ring wächst weich aus und verblasst, dann kurze Ruhe bis zum nächsten */
  0%        { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 14px 34px -14px rgba(192, 1, 70, 0.85), 0 0 0 0 rgba(236, 106, 137, 0.55); }
  72%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 14px 34px -14px rgba(192, 1, 70, 0.85), 0 0 0 20px rgba(236, 106, 137, 0); }
}
.gx-knopf.gx-knopf--glanz:focus-visible { color: #c00146; }
.gx-knopf.gx-knopf--glanz:focus-visible::before { clip-path: inset(0 0 0 0 round 12px); }
.gx-knopf.gx-knopf--glanz:focus-visible .gx-knopf__text small { color: #6e0028; }@media (prefers-reduced-motion: reduce) { .gx-knopf.gx-knopf--glanz::before, .gx-knopf.gx-knopf--glanz svg { transition: none; } }
.gxs-hero .gx-video { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
/* Handy: die zwei Belege untereinander, damit „Zeitersparnis pro Woche“ und die Kundennamen je in eine Zeile passen */
/* Belege unter dem Video am Handy nebeneinander (Oscar, 13.09.2026), etwas enger gesetzt */
@media (max-width: 559px) { .gxs-hero .gx-beweis__kunden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .gxs-hero .gx-beweis__kunden li { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; } .gxs-hero .gx-beweis__kunden .gx-beweis__siegel { width: 18px; height: 18px; } .gxs-hero .gx-beweis__kunden strong { font-size: 15px; } .gxs-hero .gx-beweis__kunden span { font-size: 12.5px; } }
@media (hover: hover) and (pointer: fine) {
  .gx-knopf.gx-knopf--glanz:hover { background: #c00146; color: #c00146; animation: none; }
  .gx-knopf.gx-knopf--glanz:hover::before { clip-path: inset(0 0 0 0 round 12px); }
  .gx-knopf.gx-knopf--glanz:hover .gx-knopf__text small { color: #6e0028; }
  .gx-knopf.gx-knopf--glanz:hover svg { transform: rotate(-12deg); }}

/* Karte */
.gx-check {
  container-type: inline-size;
  margin: 0; padding: clamp(28px, 4vw, 60px) clamp(22px, 3vw, 44px); border-radius: 24px;   /* mehr Luft in der Box (Oscar, 13.09.2026); seitlich weniger, damit die fünf Stufen nebeneinander passen */
  background: var(--karte);
  box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 36px 72px -40px rgba(120, 0, 44, 0.38);
}
.gx-check__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; }
.gx-check__titel { margin: 0; font: 700 clamp(1.55rem, 1.2rem + 0.9vw, 2.1rem)/1.1 var(--tasten); letter-spacing: -0.005em; color: var(--tinte); }
.gx-check__titel:focus { outline: none; }
/* Box mindestens so hoch wie der Text links daneben, Inhalt mittig (Oscar, 13.09.2026); das Ergebnis darf länger werden */
.gx-check { display: flex; flex-direction: column; justify-content: center; }
/* Spalte rechts: Hinweis über der Box, darunter die Box; die Spalte ist so hoch wie der Text links, die Box füllt den Rest */
.gx-check-spalte { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 960px) { .gx-check-spalte { align-self: stretch; } .gx-check-spalte > .gx-check { flex: 1 1 auto; } }
/* Grüne Zeile über der Box (Oscar, 13.09.2026, bewusst außerhalb der Markenfarben): dunkles Grün für ausreichend Kontrast,
   der Punkt pulsiert langsam wie eine Live-Anzeige */
.gx-check-hinweis { margin-bottom: clamp(14px, 1.6vw, 20px); text-align: center; }
.gx-check-hinweis__eyebrow { display: inline-block; margin: 0; padding: 8px 16px 8px 14px; border-radius: 999px; background: rgba(31, 157, 85, 0.12); box-shadow: inset 0 0 0 1px rgba(31, 157, 85, 0.28); font: 700 15px/1.35 var(--tasten); letter-spacing: 0.01em; color: #0c6331; text-wrap: balance; }   /* grüne transparente Pille (Oscar, 13.09.2026) */
.gx-check-hinweis__punkt { position: relative; display: inline-block; width: 10px; height: 10px; margin-right: 9px; vertical-align: 1px; border-radius: 50%; background: #1f9d55; }   /* im Textfluss, damit der Punkt beim Umbruch am Text bleibt */
.gx-check-hinweis__punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #1f9d55; opacity: 0; }
.gx-check-hinweis.ist-sichtbar .gx-check-hinweis__punkt::after { animation: gx-live 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; }   /* pulsiert nur, solange die Zeile im Bild ist (gawlix-start.js) */
@keyframes gx-live { 0% { transform: scale(1); opacity: 0.55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.gx-check-hinweis__fakten { margin: 10px 0 0; font: 500 14px/1.45 var(--schrift); color: var(--tinte-2); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .gx-check-hinweis__punkt::after { animation: none; opacity: 0; } }
@media (max-width: 559px) { .gx-check-hinweis__eyebrow { font-size: 13.5px; padding: 7px 12px 7px 11px; border-radius: 16px; } .gx-check-hinweis__fakten { font-size: 13px; } }
.gx-quiz--karten .gx-check__eingabe { text-align: center; }
.gx-quiz--karten .gx-check__kopf { flex-direction: column; align-items: center; }
.gx-check__anleitung { max-width: 58ch; margin-inline: auto; line-height: 1.5; text-wrap: balance; }
.gx-quiz--karten .gx-check__basis { text-align: left; }
.gx-check__unter { margin: 0; font: 500 15px/1.35 var(--schrift); color: var(--tinte-2); }

.gx-check__basis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: clamp(22px, 2.4vw, 34px); padding-block: clamp(20px, 2.2vw, 30px); border-block: 1px solid var(--linie-hell); }
.gx-feld { display: grid; align-content: start; gap: 8px; min-width: 0; }
.gx-feld__name { font: 600 15px/1.2 var(--tasten); letter-spacing: 0.01em; color: var(--tinte); }
.gx-feld__klein { font: 500 13px/1 var(--schrift); color: var(--tinte-2); }
.gx-zahlfeld, .gx-eurofeld { display: flex; align-items: stretch; height: 48px; border-radius: 12px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow 160ms ease; }
.gx-zahlfeld:focus-within, .gx-eurofeld:focus-within { box-shadow: inset 0 0 0 2px var(--tinte); }
.gx-zahlfeld button { flex: none; display: grid; place-items: center; width: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--tinte); cursor: pointer; transition: background-color 160ms ease, transform 160ms var(--aus); -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .gx-zahlfeld button:hover { background: rgba(27, 26, 25, 0.06); } }
.gx-zahlfeld button:active { transform: scale(0.92); }
.gx-zahlfeld button:focus-visible { outline: 3px solid var(--tinte); outline-offset: -3px; }
.gx-zahlfeld svg { width: 18px; height: 18px; }
.gx-zahlfeld input, .gx-eurofeld input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--tinte); font: 700 20px/1 var(--tasten); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.gx-eurofeld input { padding-left: 16px; text-align: left; }
.gx-check input[type="number"]::-webkit-inner-spin-button,
.gx-check input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gx-check input[type="number"]:focus-visible { outline: none; }
.gx-eurofeld input::placeholder { color: #6b6861; font-weight: 500; opacity: 1; }
.gx-eurofeld span { display: grid; place-items: center; padding: 0 16px; font: 600 18px/1 var(--tasten); color: var(--tinte-2); }

.gx-check__regler { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.gx-check__regler legend { padding: 0; margin-bottom: 10px; font: 600 15px/1.2 var(--tasten); letter-spacing: 0.01em; color: var(--tinte); }
.gx-regler-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.gx-regler { min-width: 0; }
.gx-regler__kopf { display: flex; align-items: center; gap: 10px; }
.gx-regler__kopf .gx-led { width: 9px; height: 9px; color: var(--tinte); }
.gx-regler__kopf label { flex: 1; min-width: 0; font: 600 16px/1.2 var(--tasten); color: var(--tinte); }
.gx-regler__zeile { display: flex; align-items: center; gap: 12px; }
.gx-regler__zeile input[type="range"] { flex: 1; min-width: 0; }
.gx-regler output { flex: none; min-width: 5.5ch; text-align: right; font: 700 16px/1 var(--tasten); font-variant-numeric: tabular-nums; color: var(--tinte-2); transition: color 200ms ease; }
.gx-regler[data-aktiv="true"] output { color: var(--rot); }
/* Regler: die rote Füllung endet genau unter der Mitte des Griffs (--r von 0 bis 1). */
.gx-regler input[type="range"] {
  --r: 0;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 44px; margin: 0; padding: 0;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.gx-regler input[type="range"]:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; border-radius: 10px; }
.gx-regler input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--rot) 0 calc(13px + (100% - 26px) * var(--r)), #e6e4df calc(13px + (100% - 26px) * var(--r)) 100%);
}
.gx-regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 0; border-radius: 50%;
  background: var(--weiss); box-shadow: 0 0 0 2px var(--rot), 0 6px 12px -6px rgba(27, 26, 25, 0.5);
  transition: transform 160ms var(--aus);
}
.gx-regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.gx-regler input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #e6e4df; }
.gx-regler input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--rot); }
.gx-regler input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 26px; height: 26px; border: 2px solid var(--rot); border-radius: 50%;
  background: var(--weiss); box-shadow: 0 6px 12px -6px rgba(27, 26, 25, 0.5); transition: transform 160ms var(--aus);
}
.gx-regler input[type="range"]:active::-moz-range-thumb { transform: scale(1.12); }
.gx-regler__hinweis { margin: -4px 0 0; font: 400 14px/1.35 var(--schrift); color: var(--tinte-2); }

.gx-check__summe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--linie-hell); }
.gx-summe { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.gx-summe__zahl { min-width: 2ch; font: 700 clamp(1.75rem, 1.45rem + 1vw, 2.5rem)/1 var(--tasten); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--rot); }
.gx-summe__text { max-width: 13ch; font: 600 15px/1.2 var(--tasten); color: var(--tinte-2); }
.gx-check__meldung { flex-basis: 100%; margin: 0; font: 500 15px/1.4 var(--schrift); color: var(--rot-tief); }
/* Desktop: die Summenleiste bleibt am unteren Bildschirmrand, solange die Karte im Bild ist,
   damit „Ergebnis ansehen“ schon im ersten Bildschirm erreichbar ist. Auf dem Handy nicht:
   dort läge sie unter dem Cookie-Knopf unten links. */
@media (min-width: 960px) {
  .gx-check__summe {
    position: sticky; bottom: 0; z-index: 2;
    margin-inline: calc(-1 * clamp(20px, 2.6vw, 34px));
    padding: 16px clamp(20px, 2.6vw, 34px) clamp(18px, 2vw, 26px);
    border-radius: 0 0 24px 24px; background: var(--karte);
    box-shadow: 0 -14px 20px -18px rgba(25, 25, 25, 0.28);
  }
}

/* Knopf */
.gx-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px; box-sizing: border-box;
  border: 0; border-radius: 12px; cursor: pointer; text-decoration: none;
  background: var(--rot); color: #fff;
  font: 700 18px/1.1 var(--tasten); letter-spacing: 0.01em;
  box-shadow: 0 14px 26px -16px rgba(25, 25, 25, 0.45);
  transition: transform 160ms var(--aus), background-color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.gx-knopf svg { flex: none; width: 22px; height: 22px; transition: transform 200ms var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .gx-knopf:hover { background: var(--rot-tief); }
  .gx-knopf:hover .gx-knopf__pfeil { transform: translateX(3px); }
}
.gx-knopf:active { transform: scale(0.97); }
.gx-knopf--gross { min-height: 68px; padding: 10px 26px 10px 22px; text-align: left; }
.gx-knopf__text { display: grid; gap: 4px; }
.gx-knopf__text small { font: 500 14px/1.25 var(--schrift); color: rgba(255, 255, 255, 0.92); }

/* Ergebnis: die Karte wird zum Abschluss */
/* Prozess Check als Aussagen-Karten (Oscar, 13.09., Aufbau wie bei Sixt). Ohne JavaScript stehen alle zehn Aussagen
   untereinander; gawlix-check.js setzt .gx-quiz--karten und zeigt immer nur eine. */
.gx-quiz__fortschritt { display: grid; gap: 10px; margin-top: clamp(22px, 2.4vw, 34px); }
.gx-quiz__zaehler { font: 600 14px/1 var(--tasten); font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.gx-quiz__spur { display: block; height: 6px; overflow: hidden; border-radius: 6px; background: #e6e3de; }
.gx-quiz__fuell { display: block; height: 100%; border-radius: inherit; background: var(--rot); transform: scaleX(0); transform-origin: left center; transition: transform 360ms var(--aus); }
.gx-quiz__fragen { margin-top: clamp(28px, 3vw, 44px); }
.gx-quiz__frage { min-width: 0; margin: 0; padding: 0; border: 0; }
.gx-quiz__frage + .gx-quiz__frage { margin-top: 30px; }
.gx-quiz__aussage { display: block; padding: 0; font: 700 clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem)/1.25 var(--tasten); letter-spacing: -0.01em; color: var(--tinte); text-wrap: balance; }
.gx-quiz__nr { display: block; margin-bottom: 8px; font: 600 13px/1 var(--tasten); color: var(--tinte-2); }
.gx-quiz--karten .gx-quiz__nr { display: none; }   /* mit Karten zeigt die Fortschrittszeile die Nummer */
.gx-quiz--karten .gx-quiz__aussage { min-height: 2.5em; }   /* gleiche Kartenhöhe bei ein- und zweizeiligen Aussagen */
/* Fünf Stufen von „Trifft zu“ bis „Trifft gar nicht zu“ (Oscar, 13.09.2026): nebeneinander, jede mit Auswahlpunkt;
   in schmalen Karten untereinander */
.gx-quiz__antworten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 2.6vw, 36px); }
.gx-quiz__antwort {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-height: 104px; padding: 16px 6px 14px; box-sizing: border-box;
  border: 1.5px solid var(--linie); border-radius: 12px; background: var(--grund); cursor: pointer; text-align: center;
  font: 600 14px/1.25 var(--tasten); color: var(--tinte); hyphens: manual;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--aus);
  -webkit-tap-highlight-color: transparent;
}
.gx-quiz__antwort input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.gx-quiz__antwort:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }
.gx-quiz__antwort::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--linie); background: var(--karte); transition: box-shadow 160ms ease, background-color 160ms ease; }
.gx-quiz__antwort:has(input:checked) { border-color: var(--rot); background: var(--rot); color: #ffffff; }
.gx-quiz__antwort:has(input:checked)::before { background: var(--rot); box-shadow: inset 0 0 0 6px #ffffff; }
@media (hover: hover) and (pointer: fine) { .gx-quiz__antwort:hover { border-color: var(--tinte-2); } }
.gx-quiz__antwort:active { transform: scale(0.98); }
.gx-quiz__navi { margin-top: clamp(18px, 2vw, 28px); }
.gx-quiz__navi .gx-textknopf { gap: 8px; }
.gx-quiz__navi svg { flex: none; width: 18px; height: 18px; }
.gx-quiz__abschluss { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie-hell); }
.gx-quiz--karten .gx-quiz__abschluss { margin-top: clamp(24px, 2.6vw, 38px); padding-top: 0; border-top: 0; }
.gx-quiz__abschlusstitel { margin: 0; font: 700 clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem)/1.2 var(--tasten); color: var(--tinte); }
.gx-quiz__abschlusstitel:focus { outline: none; }
.gx-quiz__abschluss .gx-check__unter { margin-top: 10px; }
.gx-quiz__abschluss .gx-knopf { width: 100%; margin-top: clamp(22px, 2.4vw, 34px); }
.gx-quiz--karten .gx-quiz__frage:not([hidden]), .gx-quiz--karten .gx-quiz__abschluss:not([hidden]) { animation: gx-quiz-rein 340ms var(--aus) both; }
@keyframes gx-quiz-rein { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@container (max-width: 500px) {
  .gx-quiz__antworten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gx-quiz__antwort { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 12px 16px; text-align: left; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-quiz--karten .gx-quiz__frage:not([hidden]), .gx-quiz--karten .gx-quiz__abschluss:not([hidden]) { animation: none; }
  .gx-quiz__fuell, .gx-quiz__antwort { transition: none; }
}
.gx-check__ergebnis:not([hidden]) { animation: gx-ergebnis 460ms var(--aus) both; }
@keyframes gx-ergebnis { from { opacity: 0.3; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gx-ergebnis__satz { margin: 14px 0 0; max-width: 34ch; font: 600 clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem)/1.3 var(--tasten); color: var(--tinte); text-wrap: pretty; }
.gx-ergebnis__satz strong { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rot); white-space: nowrap; }
.gx-ergebnis__fresser { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--tinte-2); }
.gx-ergebnis__fresser strong { color: var(--tinte); font-weight: 600; }
.gx-balken { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0; border-block: 1px solid var(--linie-hell); }
/* Tabelle: pro Mitarbeiter und ganzes Team, Stunden und Euro im Monat und im Jahr */
.gx-tabelle { width: 100%; margin: 16px 0 0; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.gx-tabelle th, .gx-tabelle td { padding: 12px 14px; text-align: right; vertical-align: top; }
.gx-tabelle thead th { padding-block: 0 8px; font: 600 14px/1.2 var(--tasten); letter-spacing: 0.02em; color: var(--tinte-2); }
.gx-tabelle tbody th { text-align: left; font: 600 16px/1.25 var(--tasten); color: var(--tinte); }
.gx-tabelle__klein { display: block; margin-top: 2px; font: 500 14px/1.25 var(--schrift); color: var(--tinte-2); }
.gx-tabelle tbody tr:first-child > * { border-top: 1px solid var(--linie-hell); }
.gx-tabelle td span { display: block; white-space: nowrap; }
.gx-tabelle__std { font: 700 clamp(1.1rem, 0.98rem + 0.4vw, 1.35rem)/1.2 var(--tasten); color: var(--tinte); }
.gx-tabelle__euro { margin-top: 2px; font: 700 clamp(1.1rem, 0.98rem + 0.4vw, 1.35rem)/1.2 var(--tasten); color: var(--rot); }
.gx-tabelle__team > * { background: var(--flaeche); }
.gx-tabelle__team > :first-child { border-radius: 12px 0 0 12px; }
.gx-tabelle__team > :last-child { border-radius: 0 12px 12px 0; }
.gx-balken li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.gx-balken__name { font: 600 15px/1.2 var(--tasten); color: var(--tinte); }
.gx-balken__spur { height: 10px; border-radius: 6px; background: #efedea; overflow: hidden; }
.gx-balken__fuell { display: block; height: 100%; border-radius: inherit; background: var(--rot); transform: scaleX(0); transform-origin: left center; transition: transform 800ms var(--aus); }
.gx-balken li + li .gx-balken__fuell { background: #dc7d9f; }
.gx-balken__wert { font: 700 15px/1 var(--tasten); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--tinte-2); }
/* Rechenweg zum Aufklappen: jede Zahl im Ergebnis lässt sich Zeile für Zeile nachrechnen */
.gx-rechenweg { margin-top: 14px; padding: 0 18px; border-radius: 14px; background: var(--flaeche); }
.gx-rechenweg summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; font: 600 15px/1.2 var(--tasten); color: var(--tinte); }
.gx-rechenweg summary::-webkit-details-marker { display: none; }
.gx-rechenweg summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--aus); }
.gx-rechenweg[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.gx-rechenweg summary:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; border-radius: 10px; }
.gx-rechenweg ol { list-style: none; margin: 0 0 8px; padding: 0; }
.gx-rechenweg li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--linie-hell); font: 500 15px/1.3 var(--schrift); font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.gx-rechenweg li:first-child { border-top: 0; }
.gx-rechenweg li span:last-child { font: 700 15px/1.3 var(--tasten); color: var(--tinte); white-space: nowrap; }
.gx-rechenweg li.gx-rechenweg__ende span:last-child { color: var(--rot); }
.gx-ergebnis__ohne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 14px 0 0; font-size: 16px; line-height: 1.45; color: var(--tinte-2); }
.gx-ergebnis__hinweis { margin: 14px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.55; color: var(--tinte-2); }
.gx-ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.gx-ergebnis__aendern { gap: 8px; margin-left: auto; }   /* bleibt rechts, auch wenn er auf sehr schmalen Bildschirmen umbricht */
.gx-ergebnis__aendern svg { flex: none; width: 18px; height: 18px; }
.gx-ergebnis__aktion { margin-top: 20px; }
.gx-ergebnis__aktion .gx-knopf--gross { width: 100%; justify-content: center; }
/* Beleg unter dem Abschluss-Knopf */
.gx-beweis { display: grid; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie-hell); }
.gx-beweis__bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font: 600 15px/1.2 var(--tasten); letter-spacing: 0.02em; color: var(--tinte); }
.gx-beweis__kunden { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 0; }
.gx-beweis__kunden li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-items: start; }
/* Prüfsiegel (Form „badge-check“, Lucide, ISC-Lizenz): rote Fläche, Haken in Kartenfarbe */
.gx-beweis__siegel { display: block; width: 20px; height: 20px; margin-top: 1px; }
.gx-beweis__siegel path:first-child { fill: var(--rot); }
.gx-beweis__siegel path:last-child { fill: none; stroke: var(--karte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gx-beweis__kunden strong { display: block; font: 700 16px/1.2 var(--tasten); font-variant-numeric: tabular-nums; color: var(--tinte); }
.gx-beweis__kunden span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--tinte-2); }
.gx-textknopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: var(--tinte); font: 600 16px/1 var(--tasten); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .gx-textknopf:hover { color: var(--rot); } }
.gx-ergebnis__annahme { margin: 12px 0 0; font-size: 14px; color: var(--tinte-2); }

@container (max-width: 560px) {
  .gx-regler-liste { grid-template-columns: minmax(0, 1fr); }
  .gx-balken li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; }
  .gx-tabelle th, .gx-tabelle td { padding-inline: 10px; }
  .gx-balken__spur { grid-column: 1 / -1; grid-row: 2; }
  .gx-knopf--gross { width: 100%; }
}
@container (max-width: 380px) {
  .gx-check__basis { grid-template-columns: minmax(0, 1fr); }
  .gx-beweis__kunden { grid-template-columns: minmax(0, 1fr); }
  /* Termin-Knopf im Ergebnis: Text in einer Zeile wie beim Knopf am Seitenende */
  .gx-ergebnis__aktion .gx-knopf--gross { padding-inline: 16px; }
  .gx-ergebnis__aktion .gx-knopf--gross svg { display: none; }
  .gx-ergebnis__aktion .gx-knopf__text > span { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-check__ergebnis:not([hidden]) { animation: none; }
  .gx-check__licht, .gx-balken__fuell { transition: none; }
}

/* ---------------------------------------------------------------- Band */
/* Kein Flächenwechsel: der große Satz steht auf dem Seitengrund, oben und unten eine Linie. */
/* Was ein wachsender Betrieb erwarten kann (Oscar, 13.09.; ersetzt das rote Band): drei Punkte mit Symbol, kurzer
   Überschrift und Text. Symbole neutral in Tinte auf Kartenweiß, denn Rot bleibt das Signal der offenen Zeitfresser. */
/* Moderner (Oscar, 13.09.2026): Überschrift mittig, drei zentrierte Punkte ohne Linien, große Symbolkacheln. Kommen die Punkte
   ins Bild, füllen sich die Kacheln nacheinander von unten mit Rot, das Symbol wird weiß (gawlix-start.js setzt .ist-gefuellt).
   Ohne JavaScript oder bei reduzierter Bewegung stehen sie gefüllt da. */
.gx-wachstum .gx-h2 { margin-inline: auto; max-width: 22ch; text-align: center; }
.gx-wachstum__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: clamp(40px, 5.4vw, 72px) 0 0; padding: 0; }
.gx-wachstum__punkt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gx-wachstum__symbol {
  --verzoegerung: 0ms;
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  width: clamp(76px, 7vw, 96px); height: clamp(76px, 7vw, 96px); border-radius: 22px;
  background: var(--karte); color: var(--tinte);
  box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.08), 0 18px 36px -24px rgba(25, 25, 25, 0.35);
}
.gx-wachstum__symbol::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, #e0245e 0%, var(--rot) 55%, #9e0039 100%);
  clip-path: inset(100% 0 0 0);
}
/* Nur das Füllen ist animiert; das Zurücksetzen beim Laden geschieht ohne Übergang */
.gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol { transition: color 420ms var(--aus) calc(var(--verzoegerung) + 260ms), box-shadow 700ms var(--aus) var(--verzoegerung); }
.gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol::before { transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1) var(--verzoegerung); }
.gx-wachstum__symbol svg { width: clamp(34px, 3.2vw, 44px); height: clamp(34px, 3.2vw, 44px); stroke-width: 1.8; }
.gx-wachstum__punkt:nth-child(2) .gx-wachstum__symbol { --verzoegerung: 220ms; }
.gx-wachstum__punkt:nth-child(3) .gx-wachstum__symbol { --verzoegerung: 440ms; }
/* gefüllt: Standard ohne JavaScript, mit JavaScript erst beim Hineinscrollen */
.gx-wachstum__symbol, .gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 22px 40px -18px rgba(192, 1, 70, 0.55); }
.gx-wachstum__symbol::before, .gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol::before { clip-path: inset(0 0 0 0); }
.gx-wachstum-an .gx-wachstum__punkt:not(.ist-gefuellt) .gx-wachstum__symbol { color: var(--tinte); box-shadow: inset 0 0 0 1px rgba(25, 25, 25, 0.08), 0 18px 36px -24px rgba(25, 25, 25, 0.35); }
.gx-wachstum-an .gx-wachstum__punkt:not(.ist-gefuellt) .gx-wachstum__symbol::before { clip-path: inset(100% 0 0 0); }
.gx-wachstum__titel { margin: clamp(20px, 2.2vw, 28px) 0 0; font: 700 clamp(1.2rem, 1rem + 0.6vw, 1.45rem)/1.2 var(--tasten); letter-spacing: -0.01em; text-wrap: balance; }
.gx-wachstum__text { margin: 10px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
@media (max-width: 859px) {
  .gx-wachstum__liste { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-wachstum__symbol, .gx-wachstum__symbol::before, .gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol, .gx-wachstum-an .gx-wachstum__punkt.ist-gefuellt .gx-wachstum__symbol::before { transition: none; }
}

/* Prozess Check in Rot (Oscar, 13.09.2026: „Gradient Rot und Dunkelrot, nur der Check, damit man weiß: hier kann ich selbst
   was machen“). Die Box bekommt den Verlauf; die Farbwerte der Seite werden in der Box auf Hell umgestellt, Antwortkacheln und
   Knöpfe bleiben hell, damit sie als Bedienelemente erkennbar sind. */
.gx-check.gx-quiz {
  --tinte: #ffffff; --tinte-2: rgba(255, 255, 255, 0.9); --linie: rgba(255, 255, 255, 0.4); --linie-hell: rgba(255, 255, 255, 0.22); --flaeche: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #c8054b 0%, #a3003c 48%, #5e0024 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -36px rgba(120, 0, 44, 0.65);
}
.gx-check.gx-quiz ::selection { background: #ffffff; color: #7a0030; }
/* Fortschritt */
.gx-check .gx-quiz__spur { background: rgba(255, 255, 255, 0.22); }
.gx-check .gx-quiz__fuell { background: #ffffff; }
/* Antwortkacheln hell auf Rot, gewählt in Tinte */
.gx-check .gx-quiz__antwort { border-color: transparent; background: #f8f7f5; color: #191919; box-shadow: 0 10px 22px -16px rgba(40, 0, 15, 0.6); }
.gx-check .gx-quiz__antwort::before { background: #f8f7f5; box-shadow: inset 0 0 0 2px #b9b5ae; }
@media (hover: hover) and (pointer: fine) { .gx-check .gx-quiz__antwort:hover { border-color: #191919; } }
.gx-check .gx-quiz__antwort:has(input:checked) { border-color: #191919; background: #191919; color: #ffffff; }
.gx-check .gx-quiz__antwort:has(input:checked)::before { background: #191919; box-shadow: inset 0 0 0 6px #ffffff; }
.gx-check .gx-quiz__antwort:has(input:focus-visible) { outline-color: #ffffff; }
/* Felder */
.gx-check .gx-zahlfeld input::placeholder, .gx-check .gx-eurofeld input::placeholder { color: rgba(255, 255, 255, 0.72); }
@media (hover: hover) and (pointer: fine) { .gx-check .gx-zahlfeld button:hover { background: rgba(255, 255, 255, 0.14); } }
/* Knöpfe: weiß mit roter Schrift, beim Überfahren Tinte */
.gx-check .gx-knopf { background: #ffffff; color: #a3003c; box-shadow: 0 16px 30px -18px rgba(40, 0, 15, 0.7); }
.gx-check .gx-knopf .gx-knopf__text small { color: #7a0030; }
@media (hover: hover) and (pointer: fine) {
  .gx-check .gx-knopf:hover { background: #191919; color: #ffffff; }
  .gx-check .gx-knopf:hover .gx-knopf__text small { color: rgba(255, 255, 255, 0.85); }
  .gx-check .gx-textknopf:hover { color: #ffdce6; }
}
.gx-check .gx-check__meldung { color: #ffffff; font-weight: 600; }
/* Ergebnis */
.gx-check .gx-ergebnis__satz strong, .gx-check .gx-tabelle__euro, .gx-check .gx-rechenweg li.gx-rechenweg__ende span:last-child { color: #ffdce6; }
.gx-check .gx-balken__spur { background: rgba(255, 255, 255, 0.2); }
.gx-check .gx-balken__fuell { background: #ffffff; }
.gx-check .gx-balken li + li .gx-balken__fuell { background: rgba(255, 255, 255, 0.62); }
.gx-check .gx-sterne { color: #ffffff; }
.gx-check .gx-beweis__siegel path:first-child { fill: #ffffff; }
.gx-check .gx-beweis__siegel path:last-child { stroke: #a3003c; }

/* ---------------------------------------------------------------- Die sechs Zeitfresser */
.gx-leitungen { list-style: none; margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; border-top: 1px solid var(--linie); }
.gx-leitung { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(24px, 4vw, 64px); padding-block: clamp(22px, 3vw, 40px); border-bottom: 1px solid var(--linie); scroll-margin-top: 110px; }
.gx-leitung__kopf { min-width: 0; }
.gx-leitung__name { margin: 0; font: 700 clamp(1.3rem, 1rem + 0.8vw, 1.75rem)/1.12 var(--tasten); color: var(--tinte); text-wrap: balance; transition: color 300ms ease; }
.gx-leitung__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 13px/1 var(--tasten); letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinte-2); transition: color 300ms ease; }
.gx-leitung__status .gx-led { width: 11px; height: 11px; }
.gx-leitung[data-zustand="offen"] .gx-leitung__status { color: var(--rot); }
.gx-leitung[data-zustand="aus"] .gx-leitung__name { color: var(--tinte-2); }
.gx-leitung p { margin: 0; max-width: 62ch; }
.gx-leitungen + .gx-satz { margin-top: clamp(40px, 6vw, 72px); }
@media (max-width: 759px) { .gx-leitung { grid-template-columns: minmax(0, 1fr); } }

/* Endlosschleife der Zeitfresser (Oscar, 13.09., Vorlage: Grafik auf andreasbaulig.de): ein ∞ aus sechs Segmenten in
   Rottönen, links und rechts je drei kurze Blöcke, darunter die Summe. gawlix-start.js setzt .gx-schleife--aktiv, zeichnet die
   Segmente nach und setzt .ist-da, .ist-aktiv und .ist-komplett. Ohne diese Klassen steht alles fertig da. */
.gx-schleife { margin-top: clamp(32px, 5vw, 64px); }
.gx-schleife__schluss { margin: 24px auto 0; max-width: 52ch; font: 600 clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem)/1.45 var(--tasten); color: #f0efed; text-align: center; text-wrap: balance; }   /* direkt unter dem Knopf, kleiner als ein Absatzsatz (Oscar, 13.09.) */
/* Dunkle Fläche wie der Hero (Oscar, 13.09.), abgerundet, mit schwachem rotem Raumlicht; der Abschnitt ist breiter, damit das ∞ groß wird */
.gx-abschnitt--dunkel {
  margin-inline: clamp(8px, 1.2vw, 16px); border-radius: clamp(24px, 3vw, 40px); color: #f0efed;
  background: radial-gradient(closest-side, rgba(192, 1, 70, 0.22), rgba(140, 2, 53, 0.07) 60%, transparent 80%) 50% 48% / min(1400px, 170vw) min(1400px, 170vw) no-repeat, #191919;
}
#leitungen .gx-breite { max-width: 1360px; }
.gx-abschnitt--dunkel .gx-h2, .gx-abschnitt--dunkel .gx-satz { color: #ffffff; }
.gx-abschnitt--dunkel :focus-visible { outline-color: #f0efed; }
.gx-abschnitt--dunkel .gx-leitung__name { color: #ffffff; }
.gx-abschnitt--dunkel .gx-leitung[data-zustand="aus"] .gx-leitung__name { color: #a9a59c; }
.gx-abschnitt--dunkel .gx-leitung__status { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-leitung[data-zustand="offen"] .gx-leitung__status { color: #f4a3bd; }
.gx-abschnitt--dunkel .gx-leitung p, .gx-abschnitt--dunkel .gx-schleife .gx-leitung p { color: #d9d6ce; }   /* doppelt, weil .gx-schleife .gx-leitung p weiter unten sonst gewinnt */
.gx-abschnitt--dunkel .gx-leitung__stunden { background: rgba(236, 106, 137, 0.16); color: #f9c3d4; }
.gx-abschnitt--dunkel .gx-schleife__nr { background: #f0efed; color: #191919; }
.gx-abschnitt--dunkel .gx-schleife__punkt.ist-aktiv .gx-schleife__nr { background: #c00146; color: #ffffff; }
.gx-abschnitt--dunkel .gx-schleife__klein, .gx-abschnitt--dunkel .gx-schleife__hinweis { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-schleife__zahl { color: #ff6b93; }
.gx-abschnitt--dunkel .gx-schleife__einheit, .gx-abschnitt--dunkel .gx-schleife__satz, .gx-abschnitt--dunkel .gx-schleife__hinweis a { color: #ffffff; }
/* Rundherum: 4 und 1 über den beiden Schleifen, 5 und 2 links und rechts, 6 und 3 darunter; Pfeile im SVG zeigen auf das Segment */
.gx-schleife__raster {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.1fr) minmax(0, 2.1fr) minmax(200px, 1fr);
  grid-template-areas: ". p4 p1 ." "p5 grafik grafik p2" ". p6 p3 .";
  gap: 8px clamp(16px, 2vw, 32px); align-items: center;
}
.gx-schleife__punkt { max-width: 260px; }
.gx-schleife__punkt[data-leitung="1"], .gx-schleife__punkt[data-leitung="4"] { align-self: end; justify-self: center; }
.gx-schleife__punkt[data-leitung="3"], .gx-schleife__punkt[data-leitung="6"] { align-self: start; justify-self: center; }
.gx-schleife__punkt[data-leitung="5"] { justify-self: end; }
.gx-schleife__punkt[data-leitung="2"] { justify-self: start; }
.gx-schleife__liste { display: contents; }
.gx-schleife__grafik { grid-area: grafik; margin: 0; min-width: 0; }
.gx-schleife__grafik svg { display: block; width: 100%; height: auto; overflow: visible; }
.gx-schleife .gx-leitung { display: block; min-width: 0; padding: 0; border: 0; scroll-margin-top: 110px; }
.gx-schleife__punkt[data-leitung="1"] { grid-area: p1; }
.gx-schleife__punkt[data-leitung="2"] { grid-area: p2; }
.gx-schleife__punkt[data-leitung="3"] { grid-area: p3; }
.gx-schleife__punkt[data-leitung="4"] { grid-area: p4; }
.gx-schleife__punkt[data-leitung="5"] { grid-area: p5; }
.gx-schleife__punkt[data-leitung="6"] { grid-area: p6; }
.gx-schleife__kopfzeile { display: flex; align-items: center; gap: 10px; }
.gx-schleife__nr {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--tinte); color: #ffffff; font: 700 14px/1 var(--tasten); transition: background-color 300ms ease;
}
.gx-schleife .gx-leitung__name { font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.3rem); }
.gx-schleife .gx-leitung__status { margin: 10px 12px 0 0; }
.gx-leitung__stunden {
  display: inline-flex; align-items: center; margin: 10px 0 0; padding: 5px 10px; border-radius: 8px; vertical-align: top;
  background: rgba(192, 1, 70, 0.08); color: var(--rot); font: 700 13px/1 var(--tasten); font-variant-numeric: tabular-nums;
}
.gx-schleife .gx-leitung p { margin: 8px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--tinte-2); }
/* Die Grafik */
.gx-schleife__spur { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 52; }
/* Segmente als ineinandergreifende Pfeile (Oscar, 13.09.): gefüllte Formen mit Spitze und Kerbe; gezeichnet wird über die Maske */
.gx-schleife__teil { stroke: none; }
.gx-schleife__teil--1 { fill: #c00146; }
.gx-schleife__teil--2 { fill: #e0245e; }
.gx-schleife__teil--3 { fill: #9e0039; }
.gx-schleife__teil--4 { fill: #d11852; }
.gx-schleife__teil--5 { fill: #b5104a; }
.gx-schleife__teil--6 { fill: #e33d6c; }
.gx-schleife__maske { fill: none; stroke: #ffffff; stroke-width: 96; stroke-linecap: butt; }
.gx-schleife__kreuzung { fill: none; stroke: #2a1620; stroke-width: 14; stroke-linejoin: round; }   /* Rand nur im Kreuzungspunkt: 3 greift über 6 */
.gx-schleife__pfeil { fill: none; stroke: rgba(240, 239, 237, 0.7); stroke-width: 3; stroke-linecap: round; transition: opacity 400ms ease; }
/* Pfeil-Ebene über dem ganzen Raster; die Pfeile selbst berechnet gawlix-start.js aus den gemessenen Blöcken und Segmenten */
.gx-schleife__raster { position: relative; }
.gx-schleife__pfeile { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gx-schleife__pfeile .gx-schleife__spitze { fill: rgba(240, 239, 237, 0.85); }
.gx-schleife__pfeile .gx-schleife__pfeil:not([d]) { display: none; }
.gx-schleife__spitze { fill: rgba(240, 239, 237, 0.85); }
.gx-schleife__schrift { fill: #ffffff; font-family: 'Space Grotesk', 'Figtree', system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; transition: opacity 400ms ease; }
.gx-schleife__marke { transition: opacity 300ms ease; }
.gx-schleife__marke circle { fill: #f0efed; stroke: #191919; stroke-width: 5; }
.gx-schleife__marke text { fill: #191919; font-family: 'Space Grotesk', 'Figtree', system-ui, sans-serif; font-size: 19px; font-weight: 700; }
/* Summe */
.gx-schleife__summe { display: grid; justify-items: center; margin-top: clamp(28px, 4vw, 52px); text-align: center; }
.gx-schleife__klein { margin: 0; font: 600 14px/1.3 var(--tasten); color: var(--tinte-2); }
.gx-schleife__zahlzeile { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; margin: 8px 0 0; }
.gx-schleife__zahl { font: 700 clamp(3rem, 2rem + 3vw, 4.8rem)/1 var(--tasten); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--rot); }
.gx-schleife__einheit { font: 600 18px/1.2 var(--tasten); color: var(--tinte); }
.gx-schleife__satz { margin: 12px 0 0; font: 700 clamp(1.2rem, 1rem + 0.6vw, 1.5rem)/1.2 var(--tasten); color: var(--tinte); text-wrap: balance; transition: opacity 500ms ease, transform 500ms cubic-bezier(0.23, 1, 0.32, 1); }
.gx-schleife__hinweis { margin: 8px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--tinte-2); text-wrap: pretty; }
.gx-schleife__hinweis a { color: var(--tinte); font-weight: 600; }
.gx-schleife__cta { width: 100%; max-width: 460px; margin-top: 20px; justify-content: center; }
/* Mit JavaScript: leer beginnen, dann nachzeichnen */
.gx-schleife--aktiv .gx-schleife__schrift, .gx-schleife--aktiv .gx-schleife__marke, .gx-schleife--aktiv .gx-schleife__pfeil { opacity: 0; }
.gx-schleife--aktiv .gx-schleife__schrift.ist-da, .gx-schleife--aktiv .gx-schleife__marke.ist-da, .gx-schleife--aktiv .gx-schleife__pfeil.ist-da { opacity: 1; }
.gx-schleife--aktiv .gx-schleife__satz { opacity: 0; transform: translateY(8px); }
.gx-schleife--aktiv.ist-komplett .gx-schleife__satz { opacity: 1; transform: none; }
.gx-schleife__punkt.ist-aktiv .gx-schleife__nr { background: var(--rot); }
@media (max-width: 1099px) {
  .gx-schleife__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "grafik grafik" "p1 p4" "p2 p5" "p3 p6"; gap: clamp(20px, 3vw, 32px); }
  .gx-schleife__grafik { margin-bottom: 8px; }
  .gx-schleife__punkt { max-width: none; justify-self: stretch !important; align-self: start !important; }
  .gx-schleife__pfeil { display: none; }   /* die Blöcke stehen jetzt unter der Grafik, nicht mehr rundherum */
}
@media (max-width: 639px) {
  .gx-schleife__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "grafik" "p1" "p2" "p3" "p4" "p5" "p6"; }
  .gx-schleife__schrift { display: none; }   /* auf dem Handy wäre die Schrift im Band zu klein, die Blöcke darunter tragen die Namen */
  .gx-schleife__marke circle { stroke-width: 6; }
  .gx-schleife__marke text { font-size: 26px; }
  .gx-schleife__marke circle { r: 26; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-schleife__schrift, .gx-schleife__marke, .gx-schleife__satz, .gx-schleife__nr { transition: none; }
}

/* ---------------------------------------------------------------- Ansatz */
.gx-fragenliste { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 64ch; }
.gx-fragenliste li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linie); font: 600 clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem)/1.35 var(--tasten); }
.gx-fragenliste li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--rot); transform: translateY(-2px); }
.gx-unterblock { margin-top: clamp(56px, 8vw, 104px); }
.gx-drei { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--tinte); }
.gx-drei li { padding: 20px clamp(12px, 2vw, 28px) 0 0; font: 600 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.35 var(--tasten); }
.gx-drei li + li { padding-left: clamp(12px, 2vw, 28px); border-left: 1px solid var(--linie); }
@media (max-width: 759px) {
  .gx-drei { grid-template-columns: minmax(0, 1fr); }
  .gx-drei li { padding-bottom: 16px; }
  .gx-drei li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
}
.gx-abschluss { margin-top: clamp(40px, 6vw, 72px); }
.gx-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 80px); align-items: start; }
@media (max-width: 859px) { .gx-paar { grid-template-columns: minmax(0, 1fr); } }
.gx-einstieg { margin-top: 20px; }
.gx-satz--nah { margin-top: 12px; }

/* ---------------------------------------------------------------- Vorher / nachher */
.gx-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: stretch; margin-top: clamp(32px, 5vw, 56px); }
.gx-spalte { border-radius: 20px; padding: clamp(22px, 3vw, 40px); }
.gx-spalte--heute { background: var(--anthrazit); color: #e4e2dc; }
.gx-spalte--system { background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08); }
.gx-ablaufsatz { margin: 0; font: 500 clamp(1.1rem, 0.98rem + 0.4vw, 1.35rem)/1.75 var(--schrift); }
.gx-ablaufsatz + .gx-ablaufsatz { margin-top: 1em; }
.gx-glied .gx-led { width: 9px; height: 9px; margin: 0 0.45em 0 0.1em; vertical-align: 0.08em; }
.gx-anker { white-space: nowrap; }
.gx-spalte__anfang { display: block; margin-bottom: 12px; font: 700 clamp(1.4rem, 1.1rem + 0.9vw, 2rem)/1.1 var(--tasten); letter-spacing: -0.005em; }
.gx-spalte--heute .gx-spalte__anfang { color: var(--weiss); }
.gx-spalte--weiter { grid-column: 1 / -1; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08); }
/* Jeder Schritt eine eigene Zeile mit Leuchte: nichts bricht mitten im Satz um */
.gx-glieder { list-style: none; display: grid; gap: 8px; margin: 6px 0 0; padding: 0; }
.gx-glieder li { display: grid; grid-template-columns: 9px minmax(0, 1fr); column-gap: 12px; align-items: start; font: 500 clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem)/1.5 var(--schrift); }
.gx-glieder .gx-led { width: 9px; height: 9px; margin-top: 0.6em; }
.gx-spalte--system .gx-ablaufsatz { font-weight: 500; }
@media (max-width: 859px) { .gx-vergleich { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Große Kundenstimme auf rotem Verlauf */
/* Oscar, 13.09.2026: eingerückte Fläche wie die dunklen Abschnitte, Verlauf Rot bis Dunkelrot, Zitat groß und mittig */
.gx-stimme-gross {
  width: min(920px, calc(100% - 32px)); margin-inline: auto; box-sizing: border-box; border-radius: clamp(22px, 2.6vw, 32px); color: #ffffff;   /* schmale Box statt voller Breite (Oscar, 13.09.2026) */
  background: radial-gradient(90% 120% at 12% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #c8054b 0%, #a3003c 50%, #5e0024 100%);
}
.gx-stimme-gross__figur { position: relative; max-width: 680px; margin: 0 auto; text-align: center; }
.gx-stimme-gross__zeichen { display: block; width: clamp(32px, 3.4vw, 44px); height: clamp(32px, 3.4vw, 44px); margin: 0 auto; color: rgba(255, 255, 255, 0.28); }
.gx-stimme-gross__sterne { display: flex; justify-content: center; gap: 3px; margin-top: clamp(10px, 1.2vw, 14px); color: #ffffff; }
.gx-stimme-gross__sterne svg { width: 16px; height: 16px; }
.gx-stimme-gross__text { margin: clamp(12px, 1.4vw, 18px) 0 0; }
.gx-stimme-gross__text p { margin: 0 auto; max-width: 54ch; font: 600 clamp(1.08rem, 0.92rem + 0.55vw, 1.4rem)/1.5 var(--tasten); letter-spacing: -0.01em; color: #ffffff; text-wrap: balance; }
.gx-stimme-gross__wer { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(18px, 2vw, 26px); text-align: left; }
.gx-stimme-gross__bild { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.gx-stimme-gross__wer strong { display: block; font: 700 16px/1.2 var(--tasten); color: #ffffff; }
.gx-stimme-gross__wer span span { display: block; margin-top: 3px; font: 500 14px/1.3 var(--schrift); color: rgba(255, 255, 255, 0.9); }
.gx-abschnitt.gx-stimme-gross { padding-block: clamp(44px, 5.5vw, 80px); }   /* kompakter als die übrigen Abschnitte (Oscar, 13.09.2026: „etwas kleiner“) */
.gx-stimme-gross ::selection { background: #ffffff; color: #7a0030; }

/* ---------------------------------------------------------------- Fragen als Karten (#ohne-vorwissen) */
/* Oscar, 13.09.2026: Überschrift und Einleitung mittig; die Fragen hängen untereinander an einer Schnur (Nagel oben, Öse an
   jeder Karte), am Ende hängt „Aus diesen Antworten entsteht die Lösung.“ als rote Karte und schwingt aus.
   Einflug: gawlix-start.js setzt html.gx-fragen-an und .ist-da; die Schnur zieht sich von oben, die Karten fliegen abwechselnd
   von links und rechts in die Mitte, zuletzt schwingt die Lösungskarte. Ohne JavaScript oder bei reduzierter Bewegung steht alles. */
.gx-fragen-karten { overflow-x: clip; }
.gx-fragen-karten__kopf { max-width: 760px; margin-inline: auto; text-align: center; }
.gx-fragen-karten__kopf .gx-h2 { margin-inline: auto; max-width: 22ch; }
.gx-fragen-karten__lead { margin: clamp(14px, 1.8vw, 20px) auto 0; font-size: clamp(17px, 1rem + 0.2vw, 19px); line-height: 1.55; color: var(--tinte-2); }
.gx-fragen-karten__liste { --abstand-loesung: clamp(36px, 4vw, 50px); position: relative; list-style: none; display: grid; gap: clamp(26px, 3vw, 34px); max-width: 600px; margin: clamp(64px, 7vw, 88px) auto 0; padding: 0; }
.gx-fragen-karten__liste::before { content: ""; position: absolute; z-index: 0; left: 50%; top: -40px; bottom: calc(-1 * var(--abstand-loesung)); width: 2px; margin-left: -1px; border-radius: 2px; background: #b3afa7; transform-origin: top center; }
.gx-fragen-karten__liste::after { content: ""; position: absolute; z-index: 1; left: 50%; top: -48px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--tinte); box-shadow: 0 2px 6px rgba(25, 25, 25, 0.35); }
.gx-frage-karte {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 28px); border-radius: 18px; background: var(--karte);
  box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 24px 48px -32px rgba(25, 25, 25, 0.45); transform-origin: top center;
}
.gx-frage-karte::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--karte); box-shadow: inset 0 0 0 2px #a9a59c; }
.gx-frage-karte:nth-child(odd) { rotate: -0.8deg; }
.gx-frage-karte:nth-child(even) { rotate: 0.8deg; }
.gx-frage-karte__symbol { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fbeef2; color: var(--rot); }
.gx-frage-karte__symbol svg { width: 22px; height: 22px; }
.gx-frage-karte__text { margin: 0; font: 700 clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem)/1.3 var(--tasten); letter-spacing: -0.005em; color: var(--tinte); text-wrap: balance; }
/* Lösungskarte am Ende der Schnur */
.gx-fragen-karten__loesung {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 460px; margin: var(--abstand-loesung, 44px) auto 0; padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px);
  border-radius: 20px; text-align: center; color: #ffffff; transform-origin: top center;
  background: radial-gradient(90% 120% at 15% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #c8054b 0%, #a3003c 55%, #5e0024 100%);
  box-shadow: 0 30px 60px -28px rgba(120, 0, 44, 0.65);
}
.gx-fragen-karten__liste + .gx-fragen-karten__loesung { margin-top: clamp(36px, 4vw, 50px); }
.gx-fragen-karten__loesung::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 3px #a3003c; }
.gx-fragen-karten__loesung-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.gx-fragen-karten__loesung-symbol svg { width: 22px; height: 22px; }
.gx-fragen-karten__loesung p { margin: 0; font: 700 clamp(1.25rem, 1rem + 0.8vw, 1.6rem)/1.25 var(--tasten); letter-spacing: -0.01em; text-wrap: balance; }
/* Einflug und Ausschwingen */
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da)::before { transform: scaleY(0); }
.gx-fragen-an .gx-fragen-karten__liste.ist-da::before { transition: transform 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da)::after { opacity: 0; transform: scale(0.4); }
.gx-fragen-an .gx-fragen-karten__liste.ist-da::after { transition: opacity 300ms ease, transform 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) .gx-frage-karte { opacity: 0; filter: blur(6px); }
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) .gx-frage-karte:nth-child(odd) { transform: translate(-190px, -12px) rotate(-10deg); }
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) .gx-frage-karte:nth-child(even) { transform: translate(190px, -12px) rotate(10deg); }
.gx-fragen-an .gx-fragen-karten__liste.ist-da .gx-frage-karte { transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1), transform 950ms cubic-bezier(0.34, 1.3, 0.64, 1), filter 600ms ease; transition-delay: var(--einflug-verzoegerung, 0ms); }
.gx-frage-karte:nth-child(1) { --einflug-verzoegerung: 250ms; }
.gx-frage-karte:nth-child(2) { --einflug-verzoegerung: 420ms; }
.gx-frage-karte:nth-child(3) { --einflug-verzoegerung: 590ms; }
.gx-frage-karte:nth-child(4) { --einflug-verzoegerung: 760ms; }
.gx-frage-karte:nth-child(5) { --einflug-verzoegerung: 930ms; }
.gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) + .gx-fragen-karten__loesung { opacity: 0; }
.gx-fragen-an .gx-fragen-karten__liste.ist-da + .gx-fragen-karten__loesung { animation: gx-schwingen 2.8s cubic-bezier(0.25, 0.8, 0.35, 1) 1650ms both; }
@keyframes gx-schwingen {
  0% { opacity: 0; transform: translateY(-40px) rotate(14deg); }
  14% { opacity: 1; transform: translateY(0) rotate(12deg); }
  32% { transform: rotate(-8deg); }
  50% { transform: rotate(5deg); }
  68% { transform: rotate(-2.5deg); }
  84% { transform: rotate(1deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}
@media (max-width: 599px) {
  .gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) .gx-frage-karte:nth-child(odd) { transform: translate(-90px, -10px) rotate(-8deg); }
  .gx-fragen-an .gx-fragen-karten__liste:not(.ist-da) .gx-frage-karte:nth-child(even) { transform: translate(90px, -10px) rotate(8deg); }
}

/* ---------------------------------------------------------------- Fragen als Chat (#fragen) */
/* Oscar, 13.09.2026: Chatfenster; Fragen als eigene Nachrichten rechts (Tinte), Antworten von Oscar links (hell, mit Foto).
   gawlix-start.js blendet die Antworten aus und zeigt beim Antippen kurz „schreibt …“; ohne JavaScript steht alles da. */
.gx-faq-chat__kopf { max-width: 720px; margin-inline: auto; text-align: center; }
.gx-faq-chat__kopf .gx-h2 { margin-inline: auto; }
.gx-faq-chat__lead { margin: clamp(12px, 1.6vw, 18px) 0 0; font-size: clamp(17px, 1rem + 0.2vw, 19px); line-height: 1.55; color: var(--tinte-2); }
.gx-chat { max-width: 760px; margin: clamp(32px, 4vw, 52px) auto 0; padding: clamp(16px, 2.6vw, 30px); border-radius: 28px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 40px 80px -48px rgba(25, 25, 25, 0.5); }
.gx-chat__kopf { display: flex; align-items: center; gap: 12px; padding: 2px 4px clamp(14px, 1.8vw, 18px); border-bottom: 1px solid var(--linie-hell); }
.gx-chat__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.gx-chat__name { display: grid; gap: 2px; margin: 0; }
.gx-chat__name strong { font: 700 16px/1.2 var(--tasten); color: var(--tinte); }
.gx-chat__name span { font-size: 14px; line-height: 1.2; color: var(--tinte-2); }
.gx-chat__verlauf { display: grid; gap: 14px; padding-top: clamp(16px, 2vw, 22px); }
.gx-chat__paar { display: grid; gap: 10px; }
.gx-chat__frage {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; max-width: min(88%, 520px); min-height: 48px; padding: 12px 14px 12px 18px;
  border: 0; border-radius: 20px 20px 6px 20px; background: var(--tinte); color: #ffffff; cursor: pointer; text-align: left;
  font: 600 16px/1.35 var(--tasten); transition: background-color 180ms ease, transform 160ms var(--aus);
}
.gx-chat__frage svg { flex: none; width: 18px; height: 18px; opacity: 0.8; transition: transform 240ms var(--aus); }
.gx-chat__frage[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .gx-chat__frage:hover { background: #33302f; } }
.gx-chat__frage:active { transform: scale(0.98); }
.gx-chat__frage:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.gx-chat__antwort, .gx-chat__ende { justify-self: start; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: end; gap: 10px; max-width: min(92%, 600px); }
.gx-chat__mini { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.gx-chat__antwort p, .gx-chat__ende-blase { margin: 0; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: #eceae6; font-size: 16px; line-height: 1.6; color: var(--tinte); }
.gx-chat__antwort:not([hidden]) { animation: gx-chat-rein 380ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes gx-chat-rein { from { opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: left bottom; } to { opacity: 1; transform: none; } }
.gx-chat__tippen { justify-self: start; display: inline-flex; gap: 5px; margin-left: 40px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: #eceae6; }
.gx-chat__tippen span { width: 7px; height: 7px; border-radius: 50%; background: #8f8b84; animation: gx-tippen 1s ease-in-out infinite; }
.gx-chat__tippen span:nth-child(2) { animation-delay: 150ms; }
.gx-chat__tippen span:nth-child(3) { animation-delay: 300ms; }
@keyframes gx-tippen { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.gx-chat__ende { margin-top: clamp(8px, 1.4vw, 14px); }
.gx-chat__ende-blase p { margin: 0; font-weight: 600; }
.gx-chat__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; }
.gx-chat__whatsapp { min-height: 46px; padding: 0 18px; background: var(--tinte); font-size: 16px; }
.gx-chat__whatsapp svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .gx-chat__whatsapp:hover { background: #33302f; } }
.gx-chat__termin { font-size: 15px; }
@media (max-width: 479px) { .gx-chat__frage { max-width: 94%; font-size: 15px; } .gx-chat__antwort, .gx-chat__ende { max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .gx-chat__antwort:not([hidden]) { animation: none; } .gx-chat__tippen span { animation: none; } .gx-chat__frage, .gx-chat__frage svg { transition: none; } }

/* ---------------------------------------------------------------- Anfrage als Nachrichten-Simulation */
/* Oscar, 13.09.2026: links Text und Vergleich, rechts ein dunkles Fenster mit den automatischen Meldungen einer Anfrage.
   gawlix-start.js setzt html.gx-sim-an und blendet die Meldungen nacheinander ein; ohne JavaScript stehen alle da. */
.gx-sim-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 959px) { .gx-sim-raster { grid-template-columns: minmax(0, 1fr); } }
.gx-sim-text .gx-text { margin-top: clamp(18px, 2.4vw, 26px); }
.gx-sim-vergleich { list-style: none; display: grid; gap: 12px; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; }
.gx-sim-vergleich li { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.4; color: var(--tinte-2); }
.gx-sim-vergleich strong { font: 700 17px/1.4 var(--tasten); color: var(--tinte); }
.gx-sim-vergleich .gx-led { width: 12px; height: 12px; margin-inline: 3px; }
.gx-sim-vergleich .gx-beweis__siegel { flex: none; width: 18px; height: 18px; margin: 0; }
.gx-sim-text .gx-satz { margin-top: clamp(24px, 3vw, 36px); }

.gx-sim { margin: 0; padding: clamp(14px, 1.8vw, 20px); border-radius: 24px; background: #191919; color: #f0efed; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -40px rgba(25, 25, 25, 0.65); }
.gx-sim__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.gx-sim__titel { font: 700 16px/1.2 var(--tasten); color: #ffffff; }
.gx-sim__klein { margin-left: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); font: 600 12px/1 var(--tasten); letter-spacing: 0.06em; text-transform: uppercase; color: #d9d6ce; vertical-align: 2px; }
.gx-sim__status { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--tasten); letter-spacing: 0.1em; text-transform: uppercase; color: #d9d6ce; }
.gx-sim__status .gx-led { color: #f0efed; }
.gx-sim__liste { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; padding: 0; }
.gx-sim__schritt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: opacity 300ms var(--aus), transform 400ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 300ms ease;
}
.gx-sim__symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--rot); color: #ffffff; }
.gx-sim__symbol svg { width: 20px; height: 20px; }
.gx-sim__schritt strong { display: block; font: 700 15px/1.25 var(--tasten); color: #ffffff; }
.gx-sim__schritt div span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: #c9c5bd; }
.gx-sim__schritt time { align-self: start; padding-top: 2px; font: 600 12px/1 var(--tasten); font-variant-numeric: tabular-nums; color: #a9a59c; white-space: nowrap; }
.gx-sim-an .gx-sim__schritt:not(.ist-da) { opacity: 0; transform: translateY(14px) scale(0.98); }
.gx-sim-an .gx-sim__schritt.ist-neu { box-shadow: inset 0 0 0 1px rgba(236, 106, 137, 0.55); }
.gx-sim__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 40px; margin-top: 12px; padding: 0 6px; }
.gx-sim__hinweis { font-size: 13px; color: #a9a59c; }
.gx-sim__nochmal { min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: #ffffff; font: 600 14px/1 var(--tasten); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gx-sim__nochmal:focus-visible { outline: 3px solid #f0efed; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 479px) { .gx-sim__schritt { grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; padding: 11px 12px; } .gx-sim__symbol { width: 36px; height: 36px; } .gx-sim__schritt time { display: none; } }
@media (prefers-reduced-motion: reduce) { .gx-sim__schritt { transition: none; } }

/* ---------------------------------------------------------------- Referenzen */
#referenzen > .gx-breite > .gx-h2 { margin-inline: auto; max-width: 24ch; text-align: center; }   /* Überschrift wieder mittig (Oscar, 13.09.2026) */
/* Je Fall eine Kachel (Oscar, 13.09.2026): Hintergrund ist die unscharfe Kundenseite unter einer hellen Schicht (links dichter,
   wo der Text steht), links Ausgangszustand, Lösung und Ergebnis mit rotem Pinselstrich hinter der Überschrift, der nach
   rechts unten abfällt, rechts eine weiße Karte mit den beiden Abläufen nebeneinander. */
.gx-kachel { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(32px, 4.4vw, 56px); padding: clamp(24px, 4vw, 56px); border-radius: 28px; background: #e6e3de; box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.06), 0 40px 80px -50px rgba(25, 25, 25, 0.45); scroll-margin-top: 100px; }
.gx-kachel + .gx-kachel { margin-top: clamp(24px, 3vw, 40px); }
.gx-kachel__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; transform: scale(1.1); filter: blur(8px); }   /* nachgeweicht: harte Kanten im Screenshot verschwinden */
.gx-kachel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(240, 239, 237, 0.94) 0%, rgba(240, 239, 237, 0.9) 42%, rgba(240, 239, 237, 0.6) 100%); }
.gx-kachel__kopf .gx-h3 { margin: 0; }
.gx-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 14px 0 0; padding: 0; }
.gx-fakten li { display: grid; grid-template-columns: 20px auto; column-gap: 10px; align-items: start; font-size: 17px; line-height: 1.45; color: var(--tinte); }
.gx-fakten .gx-beweis__siegel { margin-top: 2px; }
.gx-fakten strong { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Kennzahlen auch auf kleineren Rechnern in einer Zeile (Oscar, 13.09.2026): etwas kleinere Schrift und engere Abstände */
@media (min-width: 560px) and (max-width: 1279px) { .gx-fakten { gap: 8px 20px; } .gx-fakten li { font-size: 15.5px; column-gap: 8px; } }
.gx-kachel__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(28px, 3.4vw, 44px); }
.gx-kachel__teil + .gx-kachel__teil { margin-top: clamp(22px, 2.4vw, 30px); }
.gx-kachel__teil .gx-text p { max-width: none; color: var(--tinte); }
/* Überschrift auf Pinselstrich: der Strich ist ein gestrecktes SVG und leicht nach rechts unten gedreht */
.gx-pinsel { position: relative; z-index: 0; display: inline-block; margin: 0 0 12px; padding: 6px 18px 6px 12px; font: 700 17px/1.2 var(--tasten); letter-spacing: 0.01em; color: #ffffff; }
.gx-pinsel::before { content: ""; position: absolute; z-index: -1; inset: -4px -10px -6px -8px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 48%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23c00146%22 d=%22M6 12C40 7 92 5 140 6c40 1 74 2 96 5-5 5 2 9-3 14 4 5-4 10-1 15-42 3-102 4-152 3-30-1-56 1-76-3 5-5-2-10 3-15-5-5 2-9-1-13Z%22/%3E%3Cpath fill=%22%23c00146%22 d=%22M226 9l11 1-3 4ZM3 38l8 3-9 1Z%22/%3E%3Cpath fill=%22none%22 stroke=%22%239e0039%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 opacity=%22.55%22 d=%22M24 17c60-4 130-3 196 1M16 31c70 3 140 3 208-1%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: rotate(1.8deg); transform-origin: center; }
.gx-kachel__ablaeufe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 30px 60px -36px rgba(25, 25, 25, 0.45); }
.gx-prozess__titel { margin: 0; font: 700 17px/1.2 var(--tasten); color: var(--tinte); }
.gx-prozess__ort { margin: 3px 0 14px; font-size: 13px; line-height: 1.35; color: var(--tinte-2); overflow-wrap: anywhere; }
.gx-prozess__schritte { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.gx-prozess__schritte li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; column-gap: 12px; font: 600 15px/1.3 var(--schrift); color: var(--tinte); }
.gx-prozess__schritte li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 30px; height: 10px; width: 2px; background: rgba(25, 25, 25, 0.18); }
.gx-prozess__symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--tinte-2); color: var(--tinte); }
.gx-prozess__symbol svg { width: 16px; height: 16px; }
.gx-prozess__schritte li:last-child .gx-prozess__symbol { background: var(--tinte); color: #ffffff; box-shadow: none; }

/* Rechte Spalte der Kachel: Abläufe, darunter das Kundenzitat (nur mit echtem Zitat, siehe $gxZitate in index.php) */
.gx-kachel__rechts { display: grid; gap: clamp(14px, 1.6vw, 20px); align-content: start; min-width: 0; }
.gx-zitat { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; margin: 0; padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 30px 60px -36px rgba(25, 25, 25, 0.45); }
.gx-zitat__bild { display: block; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.gx-zitat__zeichen { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--rot); color: #ffffff; }
.gx-zitat__zeichen svg { width: 28px; height: 28px; }
.gx-zitat__sterne { display: flex; gap: 2px; color: var(--rot); }
.gx-zitat__sterne svg { width: 16px; height: 16px; }
.gx-zitat__text { margin: 10px 0 0; }
.gx-zitat__text p { margin: 0; font: 500 16px/1.6 var(--schrift); color: var(--tinte); }
.gx-zitat__wer { margin-top: 14px; font: 700 15px/1.3 var(--tasten); color: var(--tinte); }
.gx-zitat__wer span { display: block; margin-top: 3px; font: 500 13px/1.3 var(--schrift); color: var(--tinte-2); }
@media (max-width: 559px) { .gx-zitat { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } }

/* Schluss des Abschnitts mittig: die gemeinsame Frage und die Bewertung */
.gx-fall-schluss { margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(36px, 4.4vw, 60px); border-top: 1px solid var(--linie); text-align: center; }
.gx-fall-schluss .gx-satz { margin-inline: auto; max-width: 36ch; }
.gx-fall-schluss__cta { margin-top: clamp(26px, 3vw, 36px); }   /* Knopf zwischen Frage und Bewertung (Oscar, 13.09.2026) */
.gx-fall-schluss__cta + .gx-bewertung { margin-top: 18px; display: flex; }
.gx-bewertung { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; font: 600 16px/1 var(--tasten); letter-spacing: 0.03em; }
.gx-sterne { display: inline-flex; gap: 2px; color: var(--rot); }
.gx-sterne svg { width: 18px; height: 18px; }

@media (max-width: 959px) {
  .gx-kachel__raster { grid-template-columns: minmax(0, 1fr); }
  .gx-kachel::before { background: rgba(240, 239, 237, 0.9); }
}
@media (max-width: 559px) {
  .gx-kachel { border-radius: 22px; }
  .gx-kachel__ablaeufe { grid-template-columns: minmax(0, 1fr); }
  .gx-fakten { flex-direction: column; }
}

/* ---------------------------------------------------------------- Zusammenarbeit */
/* Die Lösung vor den Schritten (Oscar, 13.09.2026): mittige Überschrift und Einleitung, drei Karten mit dunkler Symbolkachel,
   Beispielen als kleine Marken (Ecken wie Knöpfe, keine Pillen) und dem Schlusssatz mittig */
.gx-loesung__kopf { max-width: 820px; margin-inline: auto; text-align: center; }
.gx-loesung__kopf .gx-h2 { margin-inline: auto; max-width: 24ch; }
.gx-loesung__lead { margin: clamp(16px, 2vw, 24px) auto 0; max-width: 62ch; font-size: clamp(17px, 1rem + 0.2vw, 19px); line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.gx-loesung__liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin: clamp(36px, 4.6vw, 60px) 0 0; padding: 0; }
.gx-loesung__karte { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 30px 60px -40px rgba(25, 25, 25, 0.4); }
.gx-loesung__symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--tinte); color: #ffffff; box-shadow: 0 12px 24px -14px rgba(25, 25, 25, 0.6); }
.gx-loesung__symbol svg { width: 24px; height: 24px; }
.gx-loesung__titel { margin: 20px 0 10px; font: 700 clamp(1.2rem, 1rem + 0.6vw, 1.45rem)/1.2 var(--tasten); letter-spacing: -0.01em; text-wrap: balance; }
.gx-loesung__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
.gx-loesung__beispiele { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 20px 0 0; }
.gx-loesung__beispiele li { padding: 6px 10px; border-radius: 8px; background: #ecebe8; font: 600 13px/1.2 var(--tasten); color: var(--tinte); }
.gx-loesung__schluss { margin: clamp(36px, 4.6vw, 60px) auto 0; text-align: center; max-width: 30ch; }
/* Lösung auf dunkler Fläche (Oscar, 13.09.2026): Karten leicht aufgehellt, Symbolkacheln rot, Texte hell */
.gx-abschnitt--dunkel .gx-loesung__lead { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-loesung__karte { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); }
.gx-abschnitt--dunkel .gx-loesung__symbol { background: var(--rot); box-shadow: 0 12px 26px -12px rgba(192, 1, 70, 0.7); }
.gx-abschnitt--dunkel .gx-loesung__titel { color: #ffffff; }
.gx-abschnitt--dunkel .gx-loesung__text { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-loesung__beispiele li { background: rgba(255, 255, 255, 0.08); color: #f0efed; }
@media (min-width: 860px) and (max-width: 1099px) { .gx-loesung__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px) { .gx-loesung__liste { grid-template-columns: minmax(0, 1fr); } }
/* Zusammenarbeit in drei Kacheln rechts neben Foto und Knopf (Oscar, 13.09.2026): „Verstehen“, „Planen“, „Umsetzen“;
   darin die fünf Schritte wörtlich, jeder mit eigenem Symbol. Die dritte Kachel ist der Abschluss und trägt die rote Nummer gefüllt. */
.gx-phasen { list-style: none; display: grid; gap: clamp(14px, 1.6vw, 20px); margin: 0; padding: 0; counter-reset: none; }
.gx-phase { padding: clamp(22px, 2.6vw, 34px); border-radius: 20px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 30px 60px -40px rgba(25, 25, 25, 0.4); }
.gx-phase__kopf { display: flex; align-items: center; gap: 14px; }
.gx-phase__nr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--rot); color: var(--rot); font: 700 18px/1 var(--tasten); font-variant-numeric: tabular-nums; }
.gx-phase:last-child .gx-phase__nr { background: var(--rot); color: #ffffff; box-shadow: 0 10px 22px -12px rgba(192, 1, 70, 0.6); }
.gx-phase__titel { margin: 0; font: 700 clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem)/1.1 var(--tasten); letter-spacing: -0.01em; }
.gx-phase__schritte { list-style: none; margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; }
.gx-phase__schritt { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-block: 16px; border-top: 1px solid var(--linie-hell); }
.gx-phase__schritt:last-child { padding-bottom: 0; }
.gx-phase__symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fbeef2; color: var(--rot); }
.gx-phase__symbol svg { width: 22px; height: 22px; }
.gx-phase__schrittname { margin: 2px 0 6px; font: 700 17px/1.25 var(--tasten); color: var(--tinte); }
.gx-phase__text { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--tinte-2); text-wrap: pretty; }
@media (max-width: 559px) { .gx-phase__schritt { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } .gx-phase__symbol { width: 40px; height: 40px; } }
.gx-schritte { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gx-schritt { padding: 0 clamp(12px, 1.4vw, 20px); border-left: 1px solid var(--linie); }
.gx-schritt:first-child { padding-left: 0; border-left: 0; }
.gx-nr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rot); color: var(--rot); font: 700 18px/1 var(--tasten); font-variant-numeric: tabular-nums; }
.gx-schritt h4 { margin: 16px 0 8px; font: 700 20px/1.15 var(--tasten); text-wrap: balance; }
.gx-schritt p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinte-2); }
@media (max-width: 979px) {
  .gx-schritte { grid-template-columns: minmax(0, 1fr); }
  .gx-schritt, .gx-schritt:first-child { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; border-left: 0; border-top: 1px solid var(--linie); }
  .gx-schritt .gx-nr { grid-row: span 2; }
  .gx-schritt h4 { margin-top: 8px; }
}

/* ---------------------------------------------------------------- Haltung */
.gx-haltung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.gx-haltung .gx-text { margin-top: clamp(20px, 3vw, 32px); }
.gx-foto { margin: 0; }
.gx-foto img { display: block; width: 100%; height: auto; border-radius: 20px; }
.gx-foto figcaption { margin-top: 12px; font: 600 14px/1.3 var(--tasten); letter-spacing: 0.04em; color: var(--tinte-2); }
.gxs-haltung .gx-satz { margin-top: clamp(28px, 4vw, 44px); }
/* Stimmen über die Zusammenarbeit: zwei Bewertungen nebeneinander unter dem Abschnitt, am Handy untereinander */
.gx-stimmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: stretch; margin-top: clamp(40px, 5.6vw, 80px); }   /* beide Boxen gleich hoch */
@media (max-width: 859px) { .gx-stimmen { grid-template-columns: minmax(0, 1fr); } }
.gx-zitat__sterne + .gx-zitat__text { margin-top: 10px; }
.gx-zitat__inhalt > .gx-zitat__text:first-child { margin-top: 0; }
.gx-zitat__bild { object-position: 50% 22%; }
.gx-claim { margin: 20px 0 0; font: 600 clamp(1rem, 0.9rem + 0.3vw, 1.2rem)/1.2 var(--tasten); letter-spacing: 0.05em; color: var(--rot); }
@media (max-width: 859px) { .gx-haltung { grid-template-columns: minmax(0, 1fr); } .gx-foto { max-width: 420px; } }
/* Haltung auf dunkler Fläche (Oscar, 13.09.2026): links Foto, Knopf und Kundenfotos, am Rechner sticky neben dem Text */
.gx-haltung__links { display: grid; gap: 0; min-width: 0; }
@media (min-width: 860px) { .gx-haltung__links { position: sticky; top: 104px; } }
/* Foto wieder im Hochformat wie vorher (Oscar, 13.09.2026) */
.gx-haltung__cta { width: 100%; margin-top: 20px; justify-content: center; }
.gxs-haltung .gx-vertrauen { max-width: none; }
.gx-abschnitt--dunkel .gx-foto figcaption { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-text p { color: #e6e3de; }
.gx-abschnitt--dunkel .gx-claim { color: #f4a3bd; }
.gx-abschnitt--dunkel .gx-vertrauen { color: #ffffff; }
.gx-abschnitt--dunkel .gx-vertrauen__bilder img { box-shadow: 0 0 0 3px #191919; }
.gx-abschnitt--dunkel .gx-vertrauen__bewertung { color: #d9d6ce; }
.gx-abschnitt--dunkel .gx-vertrauen:focus-visible { outline-color: #f0efed; }
@media (max-width: 859px) { .gx-haltung__cta, .gxs-haltung .gx-vertrauen { max-width: 420px; } }

/* ---------------------------------------------------------------- Fragen */
.gx-fragen { margin-top: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--linie); }
.gx-frage { border-top: 1px solid var(--linie); }
.gx-frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 0; cursor: pointer; font: 700 clamp(19px, 1rem + 0.5vw, 24px)/1.25 var(--tasten); }
.gx-frage summary::-webkit-details-marker { display: none; }
.gx-frage summary:focus-visible { outline: 3px solid var(--tinte); outline-offset: 4px; border-radius: 6px; }
.gx-frage__knopf { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--tinte); color: var(--tinte); transition: transform 220ms var(--aus), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.gx-frage__knopf svg { width: 16px; height: 16px; }
.gx-frage[open] .gx-frage__knopf { transform: rotate(45deg); background: var(--rot); color: #fff; box-shadow: none; }
.gx-frage__antwort { margin: 0; padding: 0 0 24px; max-width: 64ch; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Schluss */
.gxs-schluss { padding-bottom: clamp(72px, 10vw, 136px); }
/* Schluss nach Oscars Vorlage (13.09.2026): dunkle Fläche, alles mittig */
.gx-ende { text-align: center; }
.gx-abschnitt.gx-ende { padding-block: clamp(72px, 9vw, 128px); margin-bottom: clamp(8px, 1.2vw, 16px); }
.gx-ende__zeile { margin: 0; font: 700 clamp(13px, 0.75rem + 0.15vw, 14px)/1.2 var(--tasten); letter-spacing: 0.18em; text-transform: uppercase; color: #f4a3bd; }
.gx-ende__titel { margin: clamp(14px, 1.6vw, 20px) auto 0; max-width: 24ch; font: 700 clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem)/1.05 var(--tasten); letter-spacing: -0.025em; color: #ffffff; text-wrap: balance; }
.gx-ende__text { margin: clamp(22px, 2.6vw, 32px) auto 0; max-width: 58ch; font-size: clamp(17px, 1rem + 0.35vw, 21px); line-height: 1.6; color: #d9d6ce; text-wrap: balance; }
.gx-ende__text + .gx-ende__text { margin-top: clamp(16px, 2vw, 24px); }
.gx-ende__text strong { font-weight: 700; color: #ffffff; }
.gx-ende__foto { display: block; width: clamp(84px, 8vw, 108px); height: clamp(84px, 8vw, 108px); margin: 0 auto clamp(18px, 2vw, 24px); border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 4px #191919, 0 0 0 6px rgba(244, 163, 189, 0.55), 0 20px 40px -18px rgba(192, 1, 70, 0.6); }
.gx-ende__aktionen { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 12px 14px; margin-top: clamp(30px, 3.4vw, 44px); }
.gx-ende__aktionen .gx-knopf.gx-knopf--whatsapp { width: auto; min-height: 68px; margin-top: 0; padding: 10px 24px; background: #f8f7f5; color: #191919; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .gx-ende__aktionen .gx-knopf.gx-knopf--whatsapp:hover { background: #ffffff; color: #191919; } }
.gx-ende__name { margin: 16px 0 0; font-size: 14px; color: #bdb9b1; }
@media (max-width: 559px) { .gx-ende__aktionen > *, .gx-ende__aktionen .gx-knopf.gx-knopf--whatsapp { width: 100%; } }
.gx-schluss { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.gx-schluss__text .gx-text { margin-top: clamp(18px, 2.4vw, 28px); }
.gx-schluss__text .gx-satz { margin-top: clamp(20px, 3vw, 32px); }
.gx-schluss__karte { padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--karte); box-shadow: 0 0 0 1px rgba(25, 25, 25, 0.08), 0 36px 72px -40px rgba(120, 0, 44, 0.38); }
.gx-schluss__person { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gx-schluss__person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.gx-schluss__person p { display: grid; gap: 2px; margin: 0; }
.gx-schluss__person strong { font: 700 18px/1.2 var(--tasten); color: var(--tinte); }
.gx-schluss__person span { font-size: 15px; line-height: 1.3; color: var(--tinte-2); }
.gx-schluss__cta { width: 100%; justify-content: center; }
.gx-schluss__karte .gx-zweitweg { margin-top: 8px; }
/* WhatsApp (Oscar, 13.09.2026): heller Knopf mit Rahmen unter dem Gesprächs-Knopf, dazu ein schwebender Knopf unten rechts.
   Farben aus der Marke (Tinte statt WhatsApp-Grün), erkennbar am Symbol. */
.gx-knopf.gx-knopf--whatsapp { width: 100%; justify-content: center; margin-top: 12px; background: var(--karte); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--tinte); }
@media (hover: hover) and (pointer: fine) { .gx-knopf.gx-knopf--whatsapp:hover { background: var(--tinte); color: #ffffff; } }
.gx-whatsapp {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 150;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px; box-sizing: border-box; border-radius: 12px;
  background: var(--tinte); color: #ffffff; font: 600 15px/1 var(--tasten); text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px -14px rgba(25, 25, 25, 0.6);
  transition: opacity 260ms var(--aus), transform 260ms var(--aus), background-color 180ms ease, visibility 0s linear 0s;
}
.gx-whatsapp svg { flex: none; width: 22px; height: 22px; }
/* Oben auf der Seite (Kopf noch nicht gescrollt) ausgeblendet; ohne JavaScript bleibt er sichtbar */
:root[data-kopf-gescrollt="false"] .gx-whatsapp { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }
@media (hover: hover) and (pointer: fine) { .gx-whatsapp:hover { background: #2e2c2d; } }
.gx-whatsapp:active { transform: scale(0.97); }
.gx-whatsapp:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
@media (max-width: 639px) {
  .gx-whatsapp { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .gx-whatsapp svg { width: 26px; height: 26px; }
  .gx-whatsapp__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.gx-whatsapp.ist-verdeckt, :root[data-kopf-gescrollt="false"] .gx-whatsapp.ist-verdeckt { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms; }
@media (prefers-reduced-motion: reduce) { .gx-whatsapp, :root[data-kopf-gescrollt="false"] .gx-whatsapp, .gx-whatsapp.ist-verdeckt, :root[data-kopf-gescrollt="false"] .gx-whatsapp.ist-verdeckt { transition: none; } }   /* auch das Ausblenden oben ohne Übergang */
@media (max-width: 959px) { .gx-schluss { grid-template-columns: minmax(0, 1fr); } }
/* Schmale Handys: der Knopftext passt in eine Zeile */
@media (max-width: 420px) {
  .gx-schluss__karte { padding: 18px; }
  .gx-schluss__cta { padding-inline: 16px; }
  .gx-schluss__cta svg { display: none; }
  .gx-schluss__cta .gx-knopf__text > span { font-size: 17px; }
}

/* Handy-Feinschliff (Oscar, 13.09.2026): größere Tippfläche für den Textlink unter der Zeitfresser-Summe, ohne das Layout zu verschieben */
.gx-schleife__hinweis a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* Knopftext am Handy kurz und in einer Zeile, Inhalt mittig im Knopf (Oscar, 13.09.2026) */
.gx-cta-kurz { display: none; }
@media (max-width: 559px) {
  .gx-cta-lang { display: none; }
  .gx-cta-kurz { display: inline; }
  .gx-knopf.gx-knopf--gross { justify-content: center; gap: 10px; padding-inline: 16px; }
  .gx-knopf--gross .gx-knopf__text > span { white-space: nowrap; }
  .gx-knopf--gross .gx-knopf__text small { font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 374px) {
  .gx-knopf.gx-knopf--gross svg { display: none; }   /* auf sehr schmalen Handys ohne Hörer, damit beide Zeilen passen */
  .gx-knopf--gross .gx-knopf__text small { font-size: 12px; }
}

/* Breiter roter Pinselstrich hinter „Das Problem sind nicht die fünf Minuten. …“ (Oscar, 13.09.2026: nicht unterstreichen,
   der Pinsel liegt hinter dem ganzen Text). Jede Zeile hat ihren eigenen Strich in voller Höhe, die Schrift bleibt schwarz (Oscar).
   Mehr Zeilenabstand, damit die Striche einzeln stehen; der Satz rückt so weit nach links, wie der Strich übersteht, damit der
   Text bündig zu den Absätzen bleibt. Die Striche bleiben innerhalb des Absatzes und berühren keinen anderen Text.
   gawlix-start.js teilt den Satz in Zeilen und zieht die Striche beim Hineinscrollen nacheinander durch. */
.gx-satz.gx-satz--pinsel { line-height: 1.5; margin-inline-start: -0.26em; }
.gx-satz--pinsel .gx-pinsel-text, .gx-satz--pinsel .gx-pinsel-zeile,
.gx-pinsel-kurz .gx-pinsel-text, .gx-pinsel-kurz .gx-pinsel-zeile {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 60%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23ea4f7a%22 d=%22M8 10C120 4 260 8 400 6c160-2 320 3 460 0 60-1 100 1 132 3l8 7-6 8 6 9-7 9 5 8c-58 5-138 2-278 5-160 3-320-2-470 1-100 2-180-2-244-4l-6-8 7-9-6-9 7-8Z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23c00146%22 stroke-width=%222%22 stroke-linecap=%22round%22 opacity=%22.3%22 d=%22M30 22c270-4 620 2 940-2M20 41c300 4 640-2 960 1%22/%3E%3C/svg%3E");   /* helleres Rot (#ea4f7a), damit schwarze Schrift lesbar bleibt: 4,94:1 */
  background-repeat: no-repeat; background-position: left center; background-size: 100% 1.3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.04em 0.3em 0.06em 0.26em;
}
.gx-pinsel-an .gx-satz--pinsel .gx-pinsel-zeile, .gx-pinsel-an .gx-pinsel-kurz .gx-pinsel-zeile {
  background-size: 0% 1.3em;
  transition: background-size 800ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 450ms);
}
.gx-pinsel-an .gx-satz--pinsel.ist-da .gx-pinsel-zeile, .gx-pinsel-an .gx-pinsel-kurz.ist-da .gx-pinsel-zeile { background-size: 100% 1.3em; }
/* Verschwinden beim Herausscrollen: schneller und von der letzten Zeile her */
.gx-pinsel-an .gx-satz--pinsel:not(.ist-da) .gx-pinsel-zeile, .gx-pinsel-an .gx-pinsel-kurz:not(.ist-da) .gx-pinsel-zeile { transition: background-size 480ms cubic-bezier(0.65, 0, 0.35, 1) calc(var(--rueck, 0) * 180ms); }
@media (prefers-reduced-motion: reduce) { .gx-pinsel-an .gx-satz--pinsel .gx-pinsel-zeile, .gx-pinsel-an .gx-pinsel-kurz .gx-pinsel-zeile { transition: none; } }

/* Pinsel auch hinter den Ablauf-Überschriften der Fallstudien (Oscar, 13.09.2026): Bewerbermanagement, Kundenmanagement,
   Rezeptanfrage, Terminbuchung. Gleiches Verhalten wie beim Kernsatz; der Titel rückt um den Überstand nach links und bekommt
   etwas Luft nach unten, damit der Strich die Zeile darunter nicht berührt. */
.gx-prozess__titel.gx-pinsel-kurz { display: block; margin-inline-start: -0.26em; margin-bottom: 4px; line-height: 1.5; }