/* ============================================================================
   GlutTrack - site.css
   Das EINZIGE Stylesheet der Website. Es kleidet zwei Dinge:

     1. die Landingpage (docs/website/index.html, index-en.html)
     2. Kopf und Fuss der acht Rechtstext-Seiten - c6s Erzeuger haengt diese
        Datei an sein eigenes Stylesheet an und legt die Partials in den DOM
        (KONFORMITAET-C6 §7/§8).

   DESHALB IST HIER KEINE EINZIGE GLOBALE REGEL ERLAUBT.
   Alles haengt an `.gt-*` oder an `body.gt-landing`. Kein `*`-Reset auf
   Dokumentebene, kein nacktes `body {}`, kein nacktes `h1/p/img {}`, kein
   `:root { color-scheme }` - c6s Seiten bringen das alles selbst mit, und
   diese Datei laeuft dort NACH ihnen. Auch die Variablen tragen `--gt-`,
   damit sie c6s `--grund/--tinte/--glut` nicht ueberschreiben.

   WEITERE REGELN, DIE DIESE DATEI EINHAELT
   · P1  Null externe Ressourcen: kein @import, keine Font-URL, kein CDN.
   · P15 Keine Webfont-Auslieferung. Satoshi/Switzer (die App-Schrift) duerfen
         nach Fontshare-EULA §02 nicht im Web ausgeliefert und nicht nach WOFF2
         gewandelt werden - RECHERCHE-B F1/F2. Deshalb System-Stack, zuerst die
         geometrischen Humanists (Avenir-Familie), die Satoshi am naechsten
         kommen. Poppins steht im Stack als Erbe des alten Briefings; die App
         rendert sie seit dem Founder-Entscheid 2026-08-05 nicht mehr.
   · P11 Ember (#B45309 hell / #F5A623 dunkel) NUR fuer Fortschritt und Glut:
         Ring, Glutkern, Haerte-Balken. Nie Flaeche, nie Link, nie Rahmen eines
         Bedienelements, nie Seitengrund.
   · P12 Helle Palette auf blankem `:root`, dunkle nur in der Media-Query.
   · P14 Kein Layout-Sprung: keine nachladende Schrift, jedes Bild bemasst,
         die Held-Buehne haelt ihr Seitenverhaeltnis vor dem ersten Bild.
   · E6  Bewegung sparsam und langsam; `prefers-reduced-motion` schaltet sie ab.
   ========================================================================= */

/* --- 1. Marken-Werte - DIE EINZIGE QUELLE ------------------------------- */
/* Farben, Schrift und Masse der ganzen Webseite stehen HIER und nirgends
   sonst. Wer den Glut-Ton, die Schrift oder einen Abstand aendern will,
   aendert genau diesen Block - alle neun Seiten ziehen mit, weil c6s Erzeuger
   diese Datei an die Rechtstext-Seiten anhaengt.
   Keine Hexwerte weiter unten in dieser Datei, keine zweite Palette woanders.
   Grundlage ist die R32-Palette der App; die Kontraste sind nachgerechnet und
   in den Kommentaren vermerkt (Founder 12.09.: „wir brauchen eine Haupt-CSS,
   damit man bei Aenderungen EINE Quelle hat").

   ⚠️ DIE RECHTSTEXT-SEITEN GREIFEN DIESE NAMEN AB - MIT FALLBACK.
   c6s Erzeuger bildet seine fuenf Namen darauf ab, z. B.
   `--glut:var(--gt-glut,#b45309)`. Das ist noetig, weil die NACKTE Fassung
   unter `docs/web/**` diese Datei NICHT mitbekommt (nur die Paket-Fassung mit
   Huelle tut das) - ohne Fallback stuenden dort Pflichtangaben auf
   undefinierten Variablen. Folge fuer jede Aenderung hier: wer einen
   `--gt-*`-Namen umbenennt oder einen Wert dreht, muss c6s Fallbacks
   mitziehen. Tor T12 im Bau vergleicht beide Seiten und bricht bei Drift ab. */

:root {
  --gt-grund: #faf6f0; /* Seitengrund      (--bg) */
  --gt-flaeche: #fffdfa; /* Karte            (--surface-1) */
  --gt-flaeche-2: #f3ede4; /* erhoehter Tint   (--surface-2) */
  --gt-linie: #ebe3d8; /* Haarlinie        (--border-hairline) */
  --gt-linie-stark: #d5cbbc; /* (--option-outline) */
  --gt-tinte: #1b1613; /* 16,66:1 auf Grund  (--fg) */
  --gt-tinte-2: #6a6058; /* 5,69:1             (--fg-secondary) */
  --gt-tinte-3: #71675b; /* 5,14:1             (--fg-muted) */
  --gt-glut: #b45309; /* 4,66:1 - NUR Fortschritt (--accent-progress) */
  --gt-spur: #efe6d9; /* (--ring-track) */
  --gt-kontur: #8a7f74; /* Umriss der Schaubilder. Nachgerechnet (WCAG 2.x,
                            Relativluminanz) gegen den Grund, auf dem der Umriss
                            wirklich liegt: 3,85:1 auf der Karte
                            (--gt-flaeche), 3,63:1 auf dem Seitengrund
                            (--gt-grund) - beide ueber den 3:1 aus WCAG 1.4.11.
                            Die App-Spur (#EFE6D9) misst dort 1,22:1 bzw.
                            1,15:1 und waere als bedeutungstragende Grafik zu
                            schwach. */

  /* Geraete-Attrappe - Dekoration, ausdruecklich KEINE Marken-Farbe */
  --gt-gehaeuse: #221f1b;
  --gt-kante: #6e6459;

  /* Schrift: System-Stack, kein Nachladen, kein Sprung, keine Lizenzfrage. */
  --gt-schrift:
    'Avenir Next', Avenir, Poppins, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Masse */
  --gt-schale: 62rem;
  --gt-spalte: 33rem; /* Lesespalte ~64 Zeichen */
  --gt-rand: clamp(1.25rem, 5vw, 2.5rem);
  --gt-luft: clamp(3.25rem, 7vw, 5.5rem);
  --gt-radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gt-grund: #0a0908;
    --gt-flaeche: #191714;
    --gt-flaeche-2: #221f1b;
    --gt-linie: #221f1b;
    --gt-linie-stark: #3a342e;
    --gt-tinte: #ede9e4; /* 16,46:1 */
    --gt-tinte-2: #9a938b; /* 6,56:1 */
    --gt-tinte-3: #928a80; /* 5,84:1 */
    --gt-glut: #f5a623; /* 9,82:1 */
    --gt-spur: #241f1a;
    --gt-kontur: #928a80; /* 5,25:1 auf der Karte, 5,84:1 auf dem Grund */

    --gt-gehaeuse: #0e0d0c;
    --gt-kante: #4a443c;
  }
}

/* --- 2. Grundlagen - ausschliesslich unter .gt-landing / .gt-kopf / .gt-fuss */

body.gt-landing,
body.gt-landing *,
body.gt-landing *::before,
body.gt-landing *::after,
.gt-kopf,
.gt-kopf *,
.gt-fuss,
.gt-fuss * {
  box-sizing: border-box;
}

body.gt-landing {
  margin: 0;
  background: var(--gt-grund);
  color: var(--gt-tinte);
  font-family: var(--gt-schrift);
  font-size: 1.0625rem; /* 17px - die Body-Stufe der App */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body.gt-landing img {
  display: block;
  max-width: 100%;
  height: auto;
}

body.gt-landing h1,
body.gt-landing h2,
body.gt-landing h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/*body.gt-landing p {
  margin: 0;
  text-wrap: pretty;
}
*/
body.gt-landing a {
  color: inherit;
}


/* --- 2a. Rechtstext-Seiten ------------------------------------------------
   Gemeinsame Typografie und Lesespalte fuer Datenschutz, Nutzungsbedingungen,
   Impressum und Support. Durch .gt-textseite bleibt die Landingpage unberuehrt. */
body.gt-textseite,
body.gt-textseite *,
body.gt-textseite *::before,
body.gt-textseite *::after {
  box-sizing: border-box;
}

body.gt-textseite {
  color-scheme: light dark;
  margin: 0;
  background: var(--gt-grund);
  color: var(--gt-tinte);
  font:
    16px/1.65 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-text-size-adjust: 100%;
}

:where(body.gt-textseite) .rahmen {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

:where(body.gt-textseite) header {
  border-bottom: 1px solid var(--gt-linie);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
}

:where(body.gt-textseite) h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

:where(body.gt-textseite) h2 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 2.25rem 0 0.75rem;
}

:where(body.gt-textseite) h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem;
}

:where(body.gt-textseite) p {
  margin: 0 0 1rem;
}

:where(body.gt-textseite) ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

:where(body.gt-textseite) li {
  margin: 0 0 0.4rem;
}

:where(body.gt-textseite) a {
  color: var(--gt-glut);
}

:where(body.gt-textseite) .stand {
  color: var(--gt-tinte-2);
  font-size: 0.9rem;
  margin: 0;
}

:where(body.gt-textseite) .seiten-nav {
  margin: 2.5rem 0 0;
  font-size: 0.9rem;
}

:where(body.gt-textseite) .seiten-nav a {
  margin-right: 1rem;
  white-space: nowrap;
}

body.gt-landing a:focus-visible,
.gt-kopf a:focus-visible,
.gt-fuss a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

.gt-schale {
  width: 100%;
  max-width: var(--gt-schale);
  margin-inline: auto;
  padding-inline: var(--gt-rand);
}

/* Sprungmarke - sichtbar, sobald sie den Fokus hat (BFSG/WCAG 2.4.1). */
.gt-sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.7rem 1.1rem;
  background: var(--gt-flaeche);
  color: var(--gt-tinte);
  border: 1px solid var(--gt-linie-stark);
  border-radius: 0 0 var(--gt-radius) 0;
  text-decoration: none;
}

.gt-sprung:focus {
  left: 0;
}

/* --- 3. Kopf (Partial - laeuft auch auf c6s Rechtstext-Seiten) -----------
   Der Kopf traegt seit dem Founder-Wort vom 11.09. KEINE Navigation mehr
   („die Menuepunkte oben muessten gar nicht zu sehen sein, die sind ja unten
   im Fuss"). Uebrig ist eine Zeile mit der Wortmarke; die Links leben im Fuss
   (Abschnitt 9) auf jeder Seite und in jeder Breite. Die frueheren Regeln
   `.gt-kopf__wege*`, `.gt-sprache` und die Telefon-Media-Query, die alles
   ausser der Sprache ausblendete, sind damit ersatzlos entfallen - nicht
   auskommentiert: was nichts mehr kleidet, steht hier nicht. */

.gt-kopf {
  font-family: var(--gt-schrift);
  background: var(--gt-grund);
  color: var(--gt-tinte);
  border-bottom: 1px solid var(--gt-linie);
}

.gt-kopf__zeile {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--gt-schale);
  margin-inline: auto;
  /* Haelt die Wortmarke auf derselben Lesekante wie .gt-schale. Die Hoehe
     ergibt sich aus dem 30-px-Zeichen plus dieser Luft (rund 57 px) - der
     Kopf nimmt der Ueberschrift damit kaum noch Platz weg. */
  padding: 0.85rem var(--gt-rand);
}

.gt-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--gt-tinte);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.gt-marke img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

/* Die Wortmarke ist auf den Rechtstext-Seiten der Rueckweg zur Landingpage.
   Damit sie dort als Weg erkennbar ist, zeigt sie die Unterstreichung beim
   Ueberfahren - keine eigene Farbe (P11). */
.gt-marke:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kopf-Menue - NUR auf den Rechtstext-Seiten (Founder 11.09. spaet: „ein
   schoenes Menue bei Datenschutz, Impressum etc., damit ich nicht immer
   runterscrollen muss"; die Landingpage bleibt menuefrei). Dezente Zeile in
   der Kopfleiste: gedaempfte Tinte, Unterstreichung beim Ueberfahren wie die
   Wortmarke, kein eigener Kasten. */
.gt-menue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin-left: auto;
  padding-left: 1.1rem;
}

.gt-menue a {
  color: var(--gt-tinte);
  opacity: 0.72;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Der Eintrag, der auf die aktuelle Seite zeigt, ist kein Weg mehr, sondern
   Text - er sagt nur noch, wo man steht (Founder 13.09.: Selbst-Links machen
   keinen Sinn). Er bleibt an seinem Platz, damit die Reihe nicht springt. */
.gt-menue__hier {
  color: var(--gt-tinte);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.gt-menue a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sprachwechsel - auf JEDER Seite oben rechts (Founder 11.09. spaet: „diesen
   Switch machen zwischen Deutsch und Englisch"). Kleine Pille am rechten
   Rand; auf der Landingpage steht sie allein (margin-left uebernimmt dort
   das Auffuellen), auf den Rechtsseiten hinter dem Menue. */
.gt-sprache {
  margin-left: auto;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--gt-linie);
  border-radius: 999px;
  color: var(--gt-tinte);
  opacity: 0.8;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.gt-menue + .gt-sprache {
  margin-left: 1.1rem;
}

.gt-sprache:hover {
  opacity: 1;
  border-color: var(--gt-tinte);
}

/* Schmale Schirme: das Menue bricht unter die Wortmarke, die Pille bleibt
   rechts oben in der ersten Zeile. */
@media (max-width: 640px) {
  .gt-kopf__zeile {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
  .gt-menue {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
  }
  .gt-menue a {
    font-size: 0.9rem;
  }
  /* Das Menue ist in die eigene Zeile gewandert - die Pille gewinnt das
     Auffuellen zurueck und sitzt wieder rechts aussen in Zeile 1. */
  .gt-menue + .gt-sprache {
    margin-left: auto;
  }
}

/* --- 4. Held ------------------------------------------------------------ */

.gt-held {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--gt-luft);
}

.gt-held__paar {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 58rem) {
  .gt-held__paar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  }
}

.gt-held h1 {
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: 1.1rem;
}

.gt-held h1 span {
  display: block;
}

.gt-held h1 span + span {
  color: var(--gt-tinte-2);
}

.gt-vorspann {
  max-width: var(--gt-spalte);
  color: var(--gt-tinte-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

/* Der Wie-Abschnitt (Founder 12.09.: „Ergebnis zuerst, danach das, was man
   tut"). Eigener Block zwischen Held und Karten, gleiche Bauform wie .gt-was:
   Trennlinie oben, Ueberschrift, ein Absatz. */
.gt-training {
  padding-block: var(--gt-luft);
  border-top: 1px solid var(--gt-linie);
}

.gt-training h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 0.85rem;
}

/* Der Wie-Abschnitt hat dieselbe Bauform wie der Held: Text links, Figur
   rechts, beide auf einer Hoehe (Founder 12.09.: „die Animation rechts …
   auf dem Desktop richtig machen"). Unter 48rem stapelt es, die Figur steht
   dann unter dem Text und bleibt klein genug, um nicht zu erschlagen.
   Die Figur ist ein STILLES Einzelbild aus der Haus-Figuren-Familie der App
   (assets/lottie/discipline-weights-app-light, „wie im Training"), kein
   Lottie-Player und damit kein Skript. Die Anzeige-Masse stehen ZUSAETZLICH
   als width/height am <img>, damit die Seite auch mit alter CSS im
   Zwischenspeicher richtig aussieht (Founder-Fund 12.09.). */
.gt-training__paar {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.gt-training__figur {
  margin: 0;
  /* Schmale Schirme: die Figur steht unter dem Text und mittig - links
     angeschlagen wirkte sie dort verloren (Founder 12.09.). */
  justify-self: center;
}

body.gt-landing .gt-figur {
  display: block;
  height: clamp(132px, 16vw, 196px);
  width: auto;
  max-width: 100%;
}

@media (min-width: 48rem) {
  .gt-training__paar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .gt-training__figur {
    justify-self: end;
  }
}

.gt-training p {
  max-width: var(--gt-spalte);
  color: var(--gt-tinte-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

.gt-store {
  margin-top: 1.75rem;
  max-width: var(--gt-spalte);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gt-tinte-3);
}

.gt-store strong {
  display: block;
  color: var(--gt-tinte);
  font-weight: 600;
}

/* Der einzige Handlungsweg der Seite („Schreib uns" → support.html). Er behaelt
   die Browser-Unterstreichung - ohne sie waere er in der gedaempften Store-Zeile
   nicht als Link zu erkennen - und traegt die volle Tinte (16,66:1 hell /
   16,46:1 dunkel), nicht die Ember-Farbe: Ember ist P11-gebunden an Fortschritt
   und Glut, nie an ein Bedienelement. */
.gt-store a {
  color: var(--gt-tinte);
  text-underline-offset: 3px;
}

/* Atmender Glutkern - der einzige Ember-Fleck im Kopfbereich (P11). */
.gt-ring {
  display: block;
  width: 58px;
  height: 58px;
  margin-bottom: 1.4rem;
}

/* Der Held-Ring liegt auf dem SEITENGRUND (--gt-grund), nicht auf der Karte -
   dagegen ist gerechnet. Die Spur traegt die KONTUR-Farbe, nicht die App-Spur
   (#EFE6D9): die App-Spur misst hier 1,15:1 (hell) bzw. 1,22:1 (dunkel) - als
   Teil einer bedeutungstragenden Grafik zu wenig (WCAG 1.4.11 verlangt 3:1).
   Kontur misst 3,63:1 (hell) / 5,84:1 (dunkel). Das ist der engste Wert der
   ganzen Seite; wer an der Palette dreht, rechnet genau ihn nach. Damit die
   Spur trotzdem ruhig bleibt, ist sie duenn und der Glut-Bogen liegt dicker
   darueber. */
.gt-ring__spur {
  fill: none;
  stroke: var(--gt-kontur);
  stroke-width: 5;
}

.gt-ring__glut {
  fill: none;
  stroke: var(--gt-glut);
  stroke-width: 9;
  stroke-linecap: round;
}

.gt-ring__kern {
  fill: var(--gt-glut);
  transform-origin: 60px 60px;
  animation: gt-atem 5.5s ease-in-out infinite;
}

@keyframes gt-atem {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.88;
  }
  50% {
    transform: scale(1.075);
    opacity: 1;
  }
}

/* --- 5. Geraete-Attrappe mit Ueberblendung ------------------------------- */

.gt-geraet {
  width: min(100%, 17.5rem);
  margin-inline: auto;
  padding: 9px;
  background: var(--gt-gehaeuse);
  border: 1px solid var(--gt-kante);
  border-radius: 34px;
  box-shadow: 0 22px 50px -28px rgba(27, 22, 19, 0.55);
}

.gt-schirm {
  position: relative;
  /* Haelt die Hoehe VOR dem ersten Bild - kein Layout-Sprung (P14). */
  aspect-ratio: 600 / 1295;
  overflow: hidden;
  border-radius: 26px;
  background: var(--gt-gehaeuse);
}

.gt-schirm img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: gt-blende 18s ease-in-out infinite;
}

.gt-schirm img:nth-child(1) {
  animation-delay: 0s;
}

.gt-schirm img:nth-child(2) {
  animation-delay: 6s;
}

.gt-schirm img:nth-child(3) {
  animation-delay: 12s;
}

@keyframes gt-blende {
  0% {
    opacity: 1;
  }
  27.7% {
    opacity: 1;
  }
  33.3% {
    opacity: 0;
  }
  94.4% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.gt-bildzeile {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gt-tinte-3);
}

/* --- 6. Karten ---------------------------------------------------------- */

.gt-was {
  padding-block: var(--gt-luft);
  border-top: 1px solid var(--gt-linie);
}

.gt-was h2 {
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.gt-karten {
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 42rem) {
  .gt-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gt-karte {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.35rem, 3vw, 1.8rem);
  background: var(--gt-flaeche);
  border: 1px solid var(--gt-linie);
  border-radius: var(--gt-radius);
}

.gt-karte h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.gt-karte p {
  color: var(--gt-tinte-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.gt-buehne {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 62px;
  margin-bottom: 0.6rem;
}

.gt-buehne svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
}

/* Ein Bild statt eines Schaubilds in der Karte (Founder 12.09.). Es steht auf
   einer eigenen, hoeheren Buehne: die Figuren-Zeichnung braucht mehr Flaeche
   als ein Schaubild aus Balken, sonst wird sie zur Briefmarke. Der Rand des
   PNG ist beim Rendern auf die Zeichnung beschnitten (Alpha-Bounding-Box), so
   sitzt sie ohne Luftpolster in der Buehne und der Abstand zur Ueberschrift
   stimmt. Die `body.gt-landing`-Vorsilbe ist noetig, weil die globale
   Bild-Regel sonst sticht (0,1,2 gegen 0,1,1). */
.gt-buehne--bild {
  height: 96px;
  margin-bottom: 0.35rem;
}

body.gt-landing .gt-karte__bild {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left bottom;
}

/* Wellenform: neutrale Kontur - Erfassen ist kein Fortschritt (P11). */
.gt-welle rect {
  fill: var(--gt-kontur);
}

/* Haerte S1-S5: die gewaehlte Stufe traegt die Glut. */
.gt-haerte rect {
  fill: var(--gt-spur);
  stroke: var(--gt-kontur);
  stroke-width: 1;
}

.gt-haerte rect.gt-gewaehlt {
  fill: var(--gt-glut);
  stroke: var(--gt-glut);
}

/* Gleiche Messung, anderer Grund: die Schaubilder der Karten liegen auf
   --gt-flaeche. Kontur darauf 3,85:1 (hell) / 5,25:1 (dunkel); mit der
   App-Spur faellt der Kreis auf 1,22:1 bzw. 1,10:1 und damit unter die 3:1
   aus WCAG 1.4.11. */
.gt-kreis {
  fill: none;
  stroke: var(--gt-kontur);
  stroke-width: 5;
}

.gt-bogen {
  fill: none;
  stroke: var(--gt-glut);
  stroke-width: 9;
  stroke-linecap: round;
}

.gt-kern {
  fill: var(--gt-glut);
}

.gt-kern--matt {
  fill: var(--gt-kontur);
}

/* --- 8. Fussbereich der Landingpage ------------------------------------- */

.gt-fussbereich {
  border-top: 1px solid var(--gt-linie);
  background: var(--gt-flaeche-2);
}

/* --- 9b. Protokoll-Zeile im Fuss ---------------------------------------
   Der vollstaendige Absatz „Diese Webseite" stand hier bis zum 12.09. als
   aufklappbarer Block - 316 Woerter, die wortgleich in der
   Datenschutzerklaerung stehen. Founder: „wozu das alles noch einmal im
   Futter, wir haben doch eine Datenschutzerklaerung." Die Rechts-Sitzung hat
   den Wegfall freigegeben (Auffindbarkeit ist ueber den Fuss-Link gegeben,
   Tor T8 erzwingt ihn je Sprache), mit einer Auflage: EINE Zeile am Ort der
   Erhebung, damit ein Besucher, der nur die Website liest, die Erklaerung auf
   sich bezieht - der Fuss-Link heisst „Datenschutz" und liest sich sonst wie
   die Erklaerung zur App. Der Deep-Link springt auf `#webseite`, den Anker des
   Absatzes in privacy.html. */
.gt-protokoll {
  max-width: var(--gt-schale);
  margin-inline: auto;
  padding: 0 var(--gt-rand);
  color: var(--gt-tinte-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.gt-protokoll a {
  color: var(--gt-tinte);
  text-underline-offset: 3px;
}

/* --- 9. Fuss (Partial - laeuft auch auf c6s Rechtstext-Seiten) ----------- */

.gt-fuss {
  font-family: var(--gt-schrift);
  color: var(--gt-tinte-2);
  border-top: 1px solid var(--gt-linie);
}

.gt-fuss__zeile {
  display: flex;
    flex-wrap: wrap;
    /* align-items: center; */
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    /* width: 100%; */
    /* max-width: var(--gt-schale); */
    /* margin-inline: auto; */
    padding: 1.4rem var(--gt-rand) 0.8rem;
}

.gt-fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.gt-fuss a {
  color: var(--gt-tinte-2);
  text-decoration: none;
  border-bottom: 1px solid var(--gt-linie-stark);
}

.gt-fuss a:hover {
  color: var(--gt-tinte);
}

.gt-fuss__recht {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--gt-tinte-3);
}

/* --- 10. Ruhe-Einstellung des Geraets ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gt-ring__kern,
  .gt-schirm img {
    animation: none;
  }

  /* Ohne Bewegung bleibt genau ein Bild stehen. */
  .gt-schirm img {
    opacity: 0;
  }

  .gt-schirm img:nth-child(1) {
    opacity: 1;
  }
}

.sweb {
    font-family: var(--gt-schrift); font-size: 0.85rem; color: var(--gt-tinte-2); margin: 0;
    padding: 1.4rem var(--gt-rand);    border-top: 1px solid var(--gt-linie); background: var(--gt-flaeche-2);
}
 


/* Abstand des Seitenfusses; bewusst auf die beiden Seitentypen begrenzt. */
:where(body.gt-landing, body.gt-textseite) footer {
/*  margin-top: 3rem;
  padding-top: 1.25rem;*/
  font-size: 0.85rem;
}

/* --- 11. Cookie-Einwilligung -------------------------------------------- */
.gt-cookie,
.gt-cookie *,
.gt-cookie *::before,
.gt-cookie *::after,
.gt-cookie-einstellungen,
.gt-cookie-einstellungen * {
  box-sizing: border-box;
}

.gt-cookie {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  width: min(1180px, calc(100% - 2rem));
  transform: translate(-50%, 0.75rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.1rem;
  color: #f5f5f5;
  background: #1d1d1d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.15rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.gt-cookie.gt-cookie--show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.gt-cookie[hidden] {
  display: none;
}

.gt-cookie__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--gt-schrift);
  font-size: 0.9rem;
  line-height: 1.45;
  color: #eeeeee;
}

.gt-cookie__text strong {
  color: #ffffff;
}

.gt-cookie__text a {
  color: #ffffff;
  text-underline-offset: 3px;
}

.gt-cookie__text span {
  display: inline-block;
  margin-inline: 0.45rem;
  opacity: 0.65;
}

.gt-cookie__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

.gt-cookie__btn,
.gt-cookie-action {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  padding: 0.75rem 1rem;
  min-height: 2.8rem;
}

.gt-cookie__btn--yes,
.gt-cookie-action--yes {
  border-color: var(--gt-glut);
}

.gt-cookie__btn:hover,
.gt-cookie-action:hover {
  background: rgba(255, 255, 255, 0.14);
}

.gt-cookie__btn--yes:hover,
.gt-cookie-action--yes:hover {
  border-color: var(--gt-glut);
}

.gt-cookie__btn:focus-visible,
.gt-cookie-action:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.gt-cookie-einstellungen {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--gt-linie);
  border-radius: var(--gt-radius);
  background: var(--gt-flaeche);
}

.gt-cookie-einstellungen p:first-child {
  margin-top: 0;
}

.gt-cookie-einstellungen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0;
}

.gt-cookie-action {
  color: var(--gt-tinte);
  border-color: var(--gt-linie-stark);
  background: var(--gt-flaeche-2);
}

.gt-cookie-action--yes {
  border-color: var(--gt-glut);
}

.gt-cookie-action--yes:hover {
  border-color: var(--gt-glut);
}

.gt-cookie-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.gt-cookie-table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.gt-cookie-table th,
.gt-cookie-table td {
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--gt-linie);
  text-align: left;
  vertical-align: top;
}

.gt-cookie-table th {
  background: var(--gt-flaeche-2);
}

@media (max-width: 48rem) {
  .gt-cookie {
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
  }

  .gt-cookie__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 34rem) {
  .gt-cookie {
    width: calc(100% - 1rem);
    bottom: calc(0.5rem + env(safe-area-inset-bottom));
    padding: 0.9rem;
  }

  .gt-cookie__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-cookie {
    transition: none;
  }
}