/* ===========================================================================
   Gesundheitsthemen  --  Verweise auf Seiten oeffentlicher Stellen.
   Angelegt 10.08.2026, umgebaut am selben Tag.

   Grundsatz: uebernimmt Variablen, Schriften, Radien und Abstaende des
   Bestands. Es werden KEINE neuen Schriften, Farben oder Schatten erfunden,
   ausser den sechs Rubrikfarben. Die stehen als Inline-Variable --gt-farbe
   an der Karte.

   WARUM DIESE KARTEN ANDERS AUSSEHEN ALS DIE LEISTUNGEN
   Beide sind Kacheln mit Titel und Text, und beide standen kurz
   untereinander auf derselben Seite. Wer schnell liest, haelt sie dann fuer
   dasselbe und denkt, auch diese Texte seien von der Praxis. Deshalb tragen
   diese Karten drei Dinge, die eine Leistung nie hat: die Herkunft ganz
   oben statt eines Sinnbilds, die Zieladresse im Klartext im Fuss, und
   einen getoenten Grund statt des weissen der Leistungen. Der Unterschied
   soll auffallen, bevor man den ersten Buchstaben liest.

   Kontrast: alle sechs Rubrikfarben liegen gegen den getoenten Grund ueber
   6 zu 1, alle Texte ueber 5,2 zu 1. Gefordert waren 4,5 zu 1.
   =========================================================================== */

/* Kein eigener Grund.

   Der Abschnitt hatte einen, und der legte sich als deckende Flaeche ueber
   das Pulsdiagramm, das durch die ganze Seite laeuft: die Linie brach oben
   ab und setzte unten wieder an. Sichtbar sein sollen die Elemente, nicht
   die Flaeche dahinter. Karten, Leiste und Hinweiskasten bringen ihren
   eigenen Grund mit, die brauchen ihn auch. */
.gt-section {
  background: transparent;
  padding: 8px 48px 160px;
  scroll-margin-top: 68px;
}

.gt-wrap { max-width: 1280px; margin: 0 auto; }

/* Der Vorspann laeuft ueber die volle Breite des Textes und passt damit in
   zwei Zeilen statt drei. Darunter stand zuletzt eine Handbreit Leere, weil
   Kopf und Leiste beide ihren Abstand mitbrachten. Luftig soll es bleiben,
   verschenkt nicht. */
.gt-section .section-header { margin-bottom: 26px; }
.gt-section .section-sub { max-width: 860px; margin-left: auto; margin-right: auto; }

/* "Gesundheitsthemen" in die erste Zeile, "anderswo gut erklärt" darunter.
   Als Fliesstext brach der Titel irgendwo mitten im zweiten Teil um, je
   nach Fensterbreite an einer anderen Stelle. */
/* 11.08.2026 (Dirk): stand auf block, der Titel lief dadurch ueber zwei Zeilen
   à 60 Pixel. Jetzt eine Zeile. Auf schmalen Geraeten bricht er weiter um, das
   regelt die Fassung weiter unten. */
.gt-section .section-title em { display: inline; }

/* ---------------------------------------------------------------------------
   Die Zeile darueber: wer die Verweise aussucht und wie oft sie geprueft
   werden. Sie steht bewusst vor den Reitern und nicht im Kleingedruckten
   am Fuss: es ist die Antwort auf die Frage, ob hier jemand etwas tun muss.
   --------------------------------------------------------------------------- */
/* 11.08.2026 (Dirk): Der weisse Kasten ist weg. An seiner neuen Stelle, direkt
   unter der Ueberschrift, steht die Zeile dort, wo sonst der Untertitel des
   Abschnitts steht - und der traegt auf dieser Seite nirgends einen Kasten.
   Ohne Rahmen und Grund liest es sich als das, was es ist: eine Angabe zum
   Abschnitt, keine eigene Meldung. Das Pulsdiagramm laeuft jetzt auch hier
   durch. */
.gt-pflege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 26px;
  max-width: 980px;
  margin: 14px auto 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text, #2C332E);
}
.gt-pflege-punkt {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.gt-pflege-punkt svg {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  color: var(--forest, #2A4A38);
}
.gt-pflege strong { color: var(--forest-ink, #1C3125); font-weight: 600; }

@media (max-width: 767px) {
  .gt-pflege {
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    font-size: 14.5px;
    padding: 15px 18px;
    text-align: left;
  }
}

/* ---------- Reiter --------------------------------------------------------
   Ohne JavaScript steht hier das Attribut hidden. Dann gibt es keine
   Knoepfe, die nichts tun. Das JavaScript nimmt das Attribut weg.

   Es sind echte Reiter, keine Filter: es ist immer genau eine Rubrik
   sichtbar. Eine Ansicht mit allen Themen auf einmal gibt es nicht mehr,
   sie war achtunddreissig Karten lang und man musste dreimal rollen, um
   daran vorbeizukommen.                                                     */

.gt-filter[hidden] { display: none !important; }

/* Eine Leiste, kein loser Knopfhaufen.

   Vorher stand hier eine Reihe unterschiedlich breiter Textknoepfe. Der
   laengste sprengte die Zeile, der sechste rutschte in eine zweite, und
   die Reihe sah aus wie zufaellig hingelegt. Jetzt sechs gleich breite
   Felder in einem gemeinsamen Rahmen: das liest sich als ein Bedienteil
   und nicht als sechs einzelne Sachen. */
.gt-filter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  list-style: none;
  margin: 0 0 36px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.1));
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(28, 49, 37, 0.04),
              0 14px 34px -22px rgba(28, 49, 37, 0.3);
}

/* Die Listenpunkte sind die Zellen des Rasters, der Knopf muss sie
   ausfuellen. Sonst sitzt eine schmale Schaltflaeche mitten in einer
   breiten Zelle, und Hintergrund wie Balken des aktiven Reiters fallen
   schmaler aus als das Feld, zu dem sie gehoeren. */
.gt-filter > li { display: flex; }

.gt-reiter {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 9px;
  padding: 16px 8px 14px;
  min-height: 104px;
  border: 0;
  background: transparent;
  color: var(--muted, #676E68);
  font-family: inherit;
  cursor: pointer;
  border-radius: 17px;
  /* 11.08.2026 (Dirk), zweiter Durchgang: kurz auf 700 Millisekunden gestellt,
     wie die Karten. An einem Reiter ist das zu traege - man faehrt beim Suchen
     schnell darueber, und die Kachel kommt der Maus dann hinterher. 300 ist
     hier das Maximum. Die Karten bleiben bei 700, dort schaut man hin und
     liest, da darf die Farbe wandern. */
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              background 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Der Balken oben traegt die Rubrikfarbe und waechst aus der Mitte. */
.gt-reiter::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 0;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--gt-chipfarbe, var(--forest, #2A4A38));
  transform: scaleX(0);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Beim Ueberfahren derselbe Griff wie bei den Leistungskacheln: anheben,
   aufhellen, Schatten darunter. Vorher wechselte nur der Grund um einen
   Hauch, und wer mit der Maus darueberfuhr, sah praktisch nichts. Der
   Balken oben zeigt sich schon zur Haelfte, als Vorschau auf das, was ein
   Klick bringt. */
.gt-reiter:hover {
  color: var(--forest-ink, #1C3125);
  background: var(--white, #fff);
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(28, 49, 37, 0.04),
              0 16px 30px -16px rgba(28, 49, 37, 0.42);
}
.gt-reiter:hover::after { transform: scaleX(0.5); }
.gt-reiter:hover .gt-reiter-icon {
  opacity: 1;
  transform: translateY(-2px) scale(1.06);
  background: rgba(255, 255, 255, 0.95);
}
@supports (background: color-mix(in srgb, red 14%, white)) {
  .gt-reiter:hover .gt-reiter-icon {
    background: color-mix(in srgb, var(--gt-chipfarbe, #2A4A38) 14%, #fff);
  }
}
/* Der aktive Reiter bleibt beim Ueberfahren, wo er ist: er ist schon
   oben, ein zweites Anheben waere nur Zappeln. */
.gt-reiter[aria-selected="true"]:hover { transform: none; }
.gt-reiter[aria-selected="true"]:hover::after { transform: scaleX(1); }

.gt-reiter[aria-selected="true"] {
  color: var(--forest-ink, #1C3125);
  background: var(--white, #fff);
  box-shadow: 0 2px 4px rgba(28, 49, 37, 0.05),
              0 10px 26px -14px rgba(28, 49, 37, 0.4);
}
.gt-reiter[aria-selected="true"]::after { transform: scaleX(1); }

/* Ein Hauch der Rubrikfarbe im Grund des aktiven Reiters, wo der Browser
   Farben mischen kann. Ohne das bleibt es beim schlichten Weiss, was
   ebenfalls traegt. */
@supports (background: color-mix(in srgb, red 8%, white)) {
  .gt-reiter[aria-selected="true"] {
    background: color-mix(in srgb, var(--gt-chipfarbe, #2A4A38) 7%, #fff);
  }
}

.gt-reiter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(28, 49, 37, 0.05);
  color: var(--gt-chipfarbe, var(--forest, #2A4A38));
  opacity: 0.6;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
              background 380ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gt-reiter-icon svg { width: 21px; height: 21px; display: block; }
.gt-reiter:hover .gt-reiter-icon { opacity: 0.85; }
.gt-reiter[aria-selected="true"] .gt-reiter-icon {
  opacity: 1;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
@supports (background: color-mix(in srgb, red 12%, white)) {
  .gt-reiter[aria-selected="true"] .gt-reiter-icon {
    background: color-mix(in srgb, var(--gt-chipfarbe, #2A4A38) 12%, #fff);
  }
}

/* Zwei Zeilen, immer. Die zweite traegt das "und ..." und steht
   zurueckgenommen, damit das Auge zuerst das Thema findet. */
.gt-reiter-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.24;
}
/* Groesser als zuerst gesetzt: die Rubriknamen sind Ueberschriften und
   sollen als solche zu lesen sein, nicht als Beiwerk unter einem Sinnbild. */
.gt-reiter-z1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.gt-reiter-z2 {
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.75;
}

.gt-reiter:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 2px;
  z-index: 2;
}

/* ---------- Tafeln --------------------------------------------------------
   Je Rubrik ein Dreierraster mit zwei Zeilen, also hoechstens sechs Karten.
   Das JavaScript gibt nie mehr aus.                                         */

.gt-tafel[hidden] { display: none !important; }

.gt-tafel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.gt-tafel:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 8px; border-radius: 8px; }

/* ---------- Karte ---------------------------------------------------------
   Die ganze Karte ist der Verweis.                                          */

.gt-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border-radius: 18px;
  /* Getoent, nicht weiss: die Leistungen der Praxis sind weiss. */
  background: var(--cream-soft, #F2EDE1);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.12));
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 380ms cubic-bezier(0.16, 1, 0.3, 1),
              background 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Schmaler Balken in der Rubrikfarbe am linken Rand. */
.gt-karte::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gt-farbe, var(--forest, #2A4A38));
  opacity: 0.85;
}

.gt-karte:hover {
  transform: translateY(-3px);
  background: var(--white, #fff);
  border-color: var(--gt-farbe, rgba(168,137,72,0.32));
  box-shadow: 0 18px 36px -18px rgba(28, 49, 37, 0.28);
}

.gt-karte:focus-visible {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 3px;
  border-radius: 18px;
}

/* --- Herkunftszeile: das Erste, was man sieht --- */
.gt-karte-herkunft {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 13px;
  /* Gestrichelt, weil hier die eigene Seite aufhoert und eine fremde
     anfaengt. Eine durchgezogene Linie waere nur Dekoration. */
  border-bottom: 1px dashed var(--line-strong, rgba(26,31,27,0.18));
}

.gt-karte-herkunft-icon {
  display: inline-flex;
  color: var(--gt-farbe, var(--forest, #2A4A38));
}
.gt-karte-herkunft-icon svg { width: 18px; height: 18px; display: block; }

.gt-karte-herkunft-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gt-farbe, var(--forest, #2A4A38));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gt-karte-herkunft-pfeil {
  display: inline-flex;
  color: var(--muted, #676E68);
  transition: transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
              color 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gt-karte-herkunft-pfeil svg { width: 16px; height: 16px; display: block; }
.gt-karte:hover .gt-karte-herkunft-pfeil {
  transform: translate(2px, -2px);
  color: var(--gt-farbe, var(--forest, #2A4A38));
}

/* --- Titel und Text --- */
.gt-karte-titel {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--forest-ink, #1C3125);
  margin: 0 0 8px;
}

.gt-karte-text {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--text, #2C332E);
  margin: 0 0 16px;
  flex: 1 1 auto;
}

/* --- Fuss: die Zieladresse im Klartext ---
   Sie ist der deutlichste Unterschied zu einer Leistung der Praxis. Wer
   sie liest, weiss vor dem Klick, wo er landet. */
.gt-karte-fuss {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #676E68);
  padding-top: 12px;
  border-top: 1px solid var(--line, rgba(26,31,27,0.07));
  overflow-wrap: anywhere;
}
.gt-karte:hover .gt-karte-fuss { color: var(--forest, #2A4A38); }

/* Nur fuer Vorlesegeraete. */
.gt-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Fusszeile der Rubrik ------------------------------------------
   Ueber die ganze Breite und in Lesegroesse. Vorher endete der Kasten auf
   halber Strecke und stand klein da: ausgerechnet der Satz, der sagt, dass
   die Inhalte nicht von uns sind, war das Unauffaelligste im Abschnitt.   */

.gt-hinweis {
  position: relative;
  margin-top: 40px;
  padding: 26px 30px 26px 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.62) 100%);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.1));
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text, #2C332E);
  width: 100%;
  box-shadow: 0 1px 2px rgba(28, 49, 37, 0.04);
  display: grid;
  gap: 14px 40px;
}

/* Goldener Strich am linken Rand, in der Hoehe des Kastens. */
.gt-hinweis::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--gold, #A88948);
}

.gt-hinweis p { margin: 0; }
.gt-hinweis p + p { margin-top: 0; }
.gt-hinweis strong { color: var(--forest-ink, #1C3125); font-weight: 600; }
/* Der zweite fette Anfang beginnt mitten im Absatz. Ein wenig Luft davor macht
   sichtbar, dass hier ein neuer Gedanke anfaengt, ohne eine Zeile zu kosten. */
.gt-hinweis strong + strong,
.gt-hinweis p strong:not(:first-child) { margin-left: 2px; }

/* 11.08.2026 (Dirk): Hier standen zwei Absaetze in zwei Spalten nebeneinander.
   Aus beiden ist ein Fliesstext geworden, damit der Kasten eine Zeile weniger
   braucht. Die fett gesetzten Anfaenge bleiben und tragen weiter die Gliederung,
   dafuer sind sie da. Eine Spalte ueber die volle Breite ist jetzt richtig, sonst
   stuende der Text links und rechts bliebe die Haelfte leer. */
.gt-hinweis { grid-template-columns: 1fr; }

/* ===========================================================================
   Der Hinweis vor dem Verlassen der Seite.

   Bauart wie die uebrigen Dialoge (.modal / .modal-overlay / .modal-panel /
   .modal-close, geoeffnet ueber die Klasse "open"). Die Grundregeln stehen
   hier mit, nicht nur im Style-Block der Startseite: sonst waere der Dialog
   auf jeder Seite ohne diesen Block ein Kasten unter der Fusszeile.
   =========================================================================== */

.gt-modal {
  position: fixed;
  inset: 0;
  z-index: 9994;            /* knapp unter dem Kalender, ueber den Panel-Dialogen */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gt-modal.open { display: flex; }

.gt-modal .modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28, 49, 37, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 0;
  cursor: pointer;
}

.gt-modal .modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--cream, #F8F5EE);
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(20, 35, 26, 0.32);
}

.gt-modal .modal-close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  color: var(--forest, #2A4A38);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.4s, color 0.4s, transform 0.4s;
}
.gt-modal .modal-close:hover {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  transform: rotate(90deg);
}
.gt-modal .modal-close:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 3px; }

.gt-modal-kopf {
  padding: 30px 30px 18px;
  background: linear-gradient(180deg, var(--white, #fff) 0%, var(--cream, #F8F5EE) 100%);
  border-bottom: 1px solid var(--line, rgba(26,31,27,0.07));
  border-radius: 26px 26px 0 0;
}
.gt-modal-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold, #A88948);
  margin: 0 0 10px;
}
.gt-modal-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--gold, #A88948); opacity: 0.5;
}
.gt-modal-titel {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-size: 25px;
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--forest-ink, #1C3125);
  margin: 0;
  padding-right: 44px;
}
.gt-modal-titel em { font-style: italic; color: var(--gold, #A88948); }

.gt-modal-body { padding: 22px 30px 6px; }
.gt-modal-satz {
  font-size: 16px;
  line-height: 1.68;
  color: var(--text, #2C332E);
  margin: 0 0 16px;
}
.gt-modal-satz strong { color: var(--forest-ink, #1C3125); font-weight: 600; }
.gt-modal-klein { font-size: 14px; color: var(--muted, #676E68); }

/* Die Adresse, auf der man landet. */
.gt-modal-ziel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 13px 16px;
  background: var(--white, #fff);
  border: 1px solid var(--line-strong, rgba(26,31,27,0.14));
  border-radius: 13px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--forest-ink, #1C3125);
  overflow-wrap: anywhere;
}
.gt-modal-ziel-marke {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #676E68);
}

/* Nicht mehr anzeigen. */
.gt-modal-merken {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px 4px;
  cursor: pointer;
  min-height: 44px;
}
.gt-modal-merken input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.gt-modal-merken-kasten {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 7px;
  border: 2px solid var(--line-strong, rgba(26,31,27,0.28));
  background: var(--white, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 260ms, border-color 260ms;
}
.gt-modal-merken-kasten::after {
  content: "";
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5EE' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 200ms;
}
.gt-modal-merken input:checked + .gt-modal-merken-kasten {
  background: var(--forest, #2A4A38);
  border-color: var(--forest, #2A4A38);
}
.gt-modal-merken input:checked + .gt-modal-merken-kasten::after { opacity: 1; }
.gt-modal-merken input:focus-visible + .gt-modal-merken-kasten {
  outline: 3px solid var(--gold, #A88948);
  outline-offset: 2px;
}
.gt-modal-merken-text { font-size: 15px; color: var(--text, #2C332E); }

.gt-modal-fuss {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 30px 26px;
}
.gt-btn {
  flex: 1 1 auto;
  border-radius: 999px;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  min-height: 50px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.gt-btn:focus-visible { outline: 3px solid var(--gold, #A88948); outline-offset: 3px; }
.gt-btn-haupt { background: var(--forest, #2A4A38); color: var(--cream, #F8F5EE); }
.gt-btn-haupt:hover { background: var(--forest-ink, #1C3125); }
.gt-btn-still {
  flex: 0 1 auto;
  background: transparent;
  color: var(--forest, #2A4A38);
  border-color: var(--line-strong, rgba(26,31,27,0.14));
}
.gt-btn-still:hover { background: var(--sage-mist, #DCE5DC); }

/* ---------- Groessen ------------------------------------------------------ */

@media (min-width: 640px) {
  .gt-tafel { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gt-tafel { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
  .gt-section { padding: 8px 20px 110px; }
  /* Sechs gleich breite Felder sind auf einem Telefon zu eng. Deshalb hier
     eine rollbare Reihe, aber mit derselben Form: die Leiste bleibt eine
     Leiste, sie wird nur laenger als der Bildschirm. */
  .gt-filter {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 26px;
    border-radius: 20px;
  }
  .gt-filter::-webkit-scrollbar { display: none; }
  .gt-reiter { flex: 0 0 auto; width: 132px; min-height: 98px; padding: 14px 8px 12px; }
  .gt-reiter-z1 { font-size: 13.5px; }
  .gt-reiter-z2 { font-size: 12px; }

  .gt-karte { padding: 20px 20px 18px; }
  .gt-karte-titel { font-size: 19px; }
  .gt-hinweis { padding: 22px 20px 22px 26px; font-size: 15.5px; }

  .gt-modal { padding: 6px; align-items: flex-end; }
  .gt-modal .modal-panel { border-radius: 24px 24px 0 0; max-height: 90vh; }
  @supports (height: 100dvh) {
    .gt-modal { height: 100dvh; }
    .gt-modal .modal-panel { max-height: 88dvh; }
  }
  .gt-modal-kopf { padding: 26px 22px 16px; border-radius: 24px 24px 0 0; }
  .gt-modal-titel { font-size: 22px; }
  .gt-modal-body { padding: 20px 22px 4px; }
  .gt-modal-fuss { padding: 16px 22px 22px; }
  .gt-btn { flex: 1 1 100%; }
  .gt-btn-still { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-karte, .gt-reiter, .gt-reiter::after, .gt-karte-herkunft-pfeil,
  .gt-modal .modal-close, .gt-btn, .gt-modal-merken-kasten {
    transition: none;
  }
  .gt-karte:hover { transform: none; }
  .gt-modal .modal-close:hover { transform: none; }
  .gt-karte:hover .gt-karte-herkunft-pfeil { transform: none; }
  .gt-reiter::after { transition: none; }
}


/* ===========================================================================
   Nachtrag 11.08.2026 (Dirk)

   Drei Wuensche aus dem Durchgang am Morgen:
   1 Die Ueberschrift soll in eine Zeile passen, das spart Hoehe.
   2 Die Reiter sollen sich beim Zeigen vergroessern statt anzuheben.
   3 Die Karten sollen sich verhalten wie die Leistungen der Praxis: langsam
     ins Dunkelgruene wandern, mit Verlauf, und die Schrift hell mitziehen.
   =========================================================================== */

/* --- 1 Ueberschrift in einer Zeile --------------------------------------- */

/* Alle Abschnitte der Seite tragen ihren Titel zweizeilig, die zweite Zeile
   kursiv. Hier wird daraus eine Zeile: der Abschnitt ist ohnehin lang, und
   zwei Zeilen à 60 Pixel kosten Platz, den die Karten besser gebrauchen.
   Das display steht weiter oben in dieser Datei, dort wo es hingehoert.
   Auf schmalen Geraeten darf der Titel weiter umbrechen, dort ist Hoehe
   billiger als eine Schrift, die niemand mehr lesen kann. */
@media (min-width: 900px) {
  .gt-titel-einzeilig {
    font-size: clamp(38px, 4.4vw, 56px);
    white-space: nowrap;
  }
}


/* --- 2 Reiter: vergroessern statt anheben -------------------------------- */

/* Vorher hob sich der Reiter um drei Pixel an. Jetzt waechst er um ein Viertel.
   Das ist deutlicher zu sehen und passt besser dazu, dass ein Reiter eine
   Auswahl ist und kein Knopf, der sich druecken laesst.

   transform-origin stand kurz auf center bottom. Dadurch wuchs die Kachel nur
   nach oben und sah aus, als schoebe sie sich weg. Jetzt center: sie waechst
   nach allen Seiten gleich und bleibt dort, wo der Zeiger sie erwischt hat. */
.gt-reiter:hover {
  transform: scale(1.25);
  transform-origin: center center;
  z-index: 2;
}

/* Das Symbol im Reiter wuchs bisher zusaetzlich. Zusammen mit den zehn
   Prozent der ganzen Kachel waere das zu viel Bewegung an einer Stelle. */
.gt-reiter:hover .gt-reiter-icon {
  transform: none;
}

/* Der gewaehlte Reiter waechst ebenfalls, sonst wirkt gerade er tot. */
.gt-reiter[aria-selected="true"]:hover {
  transform: scale(1.25);
  transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
  .gt-reiter:hover,
  .gt-reiter[aria-selected="true"]:hover { transform: none; }
}


/* --- 3 Karten wie die Leistungen ---------------------------------------- */

/* Dieselbe Bauart wie .service-item auf der Startseite: der Grund wandert ins
   Dunkelgruene, die Karte hebt sich, die Schrift zieht ins Helle mit. Ein
   Unterschied bleibt mit Absicht: dort ist der Zielgrund flaches Waldgruen,
   hier ein Verlauf von Waldgruen nach Tannendunkel. Die Karten fuehren auf
   fremde Seiten, der Verlauf gibt ihnen etwas mehr Tiefe als den eigenen
   Leistungen.

   Die Zeit von 380 Millisekunden bleibt, wie sie war. */
/* 11.08.2026 (Dirk): Der Wechsel ins Dunkelgruene kam zu hart. Jetzt 700
   Millisekunden statt 380, und eine Kurve, die sanft anlaeuft statt sofort
   loszuspringen. Die Farbe wandert damit sichtbar hinein, statt umzuschalten.
   Alles im selben Takt, auch die Schrift und der Balken, sonst zieht ein Teil
   dem anderen davon. */
.gt-karte,
.gt-karte::before,
.gt-karte .gt-karte-titel,
.gt-karte .gt-karte-text,
.gt-karte .gt-karte-herkunft,
.gt-karte .gt-karte-herkunft-text,
.gt-karte .gt-karte-herkunft-icon,
.gt-karte .gt-karte-herkunft-pfeil,
.gt-karte .gt-karte-fuss {
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              background 700ms cubic-bezier(0.4, 0, 0.2, 1),
              color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 11.08.2026 (Dirk): Das Gruen sprang hart herein, obwohl 700 Millisekunden
   eingestellt waren. Der Grund ist eine Eigenheit von CSS: zwischen einer
   Farbe und einem Verlauf laesst sich nicht ueberblenden. Der Browser hat die
   Zeit deshalb ignoriert und sofort umgeschaltet.

   Jetzt liegt der Verlauf als eigene Ebene ueber der Karte und wird sichtbar
   gemacht statt gewechselt. Deckkraft ist sauber animierbar, damit gilt die
   Zeit in beide Richtungen: langsam herein und ebenso langsam zurueck zur
   Ausgangsfarbe. */
.gt-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(168deg,
    var(--forest, #2A4A38) 0%,
    #24402F 58%,
    var(--forest-ink, #1C3125) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.gt-karte:hover::after,
.gt-karte:focus-within::after { opacity: 1; }

/* Der Balken links und der ganze Inhalt gehoeren ueber die neue Ebene. */
.gt-karte::before { z-index: 2; }
.gt-karte > * { position: relative; z-index: 1; }

.gt-karte:hover,
.gt-karte:focus-within {
  transform: translateY(-5px);
  border-color: var(--forest-ink, #1C3125);
  box-shadow: 0 26px 52px -20px rgba(28, 49, 37, 0.55),
              0 4px 12px rgba(28, 49, 37, 0.10);
}

/* Der Balken am linken Rand wird Gold, wie der Streifen bei den Leistungen. */
.gt-karte:hover::before,
.gt-karte:focus-within::before {
  background: var(--gold, #A88948);
  opacity: 1;
}

/* Die Schrift zieht mit. Der Titel ganz hell, der Beschreibungstext eine
   Spur zurueckgenommen, damit die Ueberschrift fuehrt. */
.gt-karte:hover .gt-karte-titel,
.gt-karte:focus-within .gt-karte-titel {
  color: var(--cream, #F8F5EE);
}

.gt-karte:hover .gt-karte-text,
.gt-karte:focus-within .gt-karte-text {
  color: rgba(248, 245, 238, 0.88);
}

/* Herkunft oben und Ziel im Fuss: gedaempftes Gold, damit klar bleibt, dass
   hier eine fremde Seite steht, und der Titel trotzdem fuehrt. */
.gt-karte:hover .gt-karte-herkunft-text,
.gt-karte:focus-within .gt-karte-herkunft-text,
.gt-karte:hover .gt-karte-fuss,
.gt-karte:focus-within .gt-karte-fuss {
  color: var(--gold-soft, #C9AD77);
}

.gt-karte:hover .gt-karte-herkunft,
.gt-karte:focus-within .gt-karte-herkunft {
  border-bottom-color: rgba(201, 173, 119, 0.45);
}

.gt-karte:hover .gt-karte-herkunft-icon,
.gt-karte:focus-within .gt-karte-herkunft-icon {
  background: var(--gold-soft, #C9AD77);
  color: var(--forest-ink, #1C3125);
}

.gt-karte:hover .gt-karte-herkunft-pfeil,
.gt-karte:focus-within .gt-karte-herkunft-pfeil {
  color: var(--gold-soft, #C9AD77);
}

@media (prefers-reduced-motion: reduce) {
  .gt-karte, .gt-karte::after { transition: none; }
  .gt-karte:hover, .gt-karte:focus-within { transform: none; }
}


/* ---------------------------------------------------------------------------
   Die Marke fuer frische Verweise            11.08.2026 (Dirk)

   Gebaut wie das Schild an den Standortkarten: Pille, Versalien, weite
   Sperrung. Wer die Seite kennt, erkennt die Form wieder.

   Sie sitzt in der Kopfzeile der Karte, rechts neben der Herkunft und links
   vom Pfeil. Ueber dem Titel waere sie dem Text im Weg, unter der Karte
   wuerde sie niemand lesen.

   Drei Stufen: was heute kam, traegt Waldgruen und faellt auf. Was gestern
   kam, ist nur noch eine leise Notiz. Alles Aeltere nennt seit dem 14.08.2026
   sein Datum, aber ohne Pillenform - eine Angabe, keine Auszeichnung. Welche
   Stufe eine Karte bekommt, entscheidet das Skript.
--------------------------------------------------------------------------- */

/* Die Stufe dazwischen: von der Quelle ueberarbeitet   14.08.2026 (Dirk)
   -------------------------------------------------------------------------
   Ein eigener Ton, damit man sie weder mit NEU noch mit GESTERN verwechselt:
   das Gold der Seite, leise hinterlegt. Kein Puls - gepulst wird nur, was
   wirklich neu ist. Der Text ist laenger als bei den anderen Stufen, deshalb
   etwas engere Laufweite; auf schmalen Schirmen faellt das Datum weg, dort
   zaehlt das Wort. */
.gt-karte-neu.ist-ueberarbeitet {
  background: rgba(168, 137, 72, 0.14);
  border-color: rgba(168, 137, 72, 0.30);
  color: #54411A;   /* gerechnet 7,39:1 gegen den hinterlegten Goldton, #5E4A1F kam nur auf 6,41 */
  letter-spacing: 0.06em;
}

/* Dritte Stufe: das Datum aelterer Verweise      14.08.2026 (Dirk)
   -------------------------------------------------------------------------
   Bewusst keine Pille, kein Rahmen, kein Grund. Eine Marke zieht den Blick an
   und verspricht Neuigkeit - das waere hier gelogen. Uebrig bleibt die
   Angabe selbst, an derselben Stelle wie die beiden anderen Stufen, damit das
   Auge sie an jeder Karte am gleichen Fleck findet.

   Die Farbe traegt 7,7:1 gegen den Kartengrund und erfuellt damit AAA, obwohl
   die Schrift klein ist. Ein blasses Grau haette hier nicht gereicht. */
.gt-karte-neu.ist-aelter {
  background: none;
  border-color: transparent;
  /* 14.08.2026 (Dirk): war ein neutrales Graugruen und verschwand im Grund.
     Jetzt das Waldgruen der Seite - dieselbe Farbe wie Ueberschriften und
     Knoepfe, also erkennbar zugehoerig statt beliebig grau. 8,49:1 gegen den
     Kartengrund, damit AAA trotz kleiner Schrift. */
  color: var(--forest, #2A4A38);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding-left: 0;
  padding-right: 0;
}

.gt-karte-neu {
  margin-left: auto;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  /* 14.08.2026 (Dirk): von 10,5 auf 12 Pixel. Die Marke stand kleiner da als
     die Herkunftszeile daneben (11,5) und ging dadurch unter. Jetzt ist sie
     einen Hauch groesser als diese und faellt zuerst ins Auge. */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(42, 74, 56, 0.10);
  color: var(--forest, #2A4A38);
  border: 1px solid rgba(42, 74, 56, 0.18);
  transition: background 700ms cubic-bezier(0.4, 0, 0.2, 1),
              color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Was heute dazukam, bekommt den vollen Ton und einen Punkt davor. */
.gt-karte-neu.ist-heute {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
  border-color: var(--forest, #2A4A38);
}

.gt-karte-neu.ist-heute::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold, #A88948);
  flex: 0 0 auto;
}

/* Hier standen bis zum 14.08.2026 drei Regeln, die der Marke beim Darueberfahren
   helle Schrift gaben. Sie stammen aus einer Zeit, in der die Karte im Hover
   dunkelgruen wurde. Das tut sie nicht mehr: sie wird WEISS, von rgb(242,237,225)
   auf rgb(255,255,255). Helle Schrift auf weissem Grund ergab damit:

     Neu        4,18:1
     Gestern    1,07:1   praktisch unsichtbar
     Seit ...   1,07:1   praktisch unsichtbar

   Alle drei verfehlten AAA, zwei davon jede Lesbarkeit. Gemessen am 14.08. mit
   erzwungenem Hover ueber CDP und 1800 ms Wartezeit - der Uebergang laeuft 700 ms,
   wer frueher misst, sieht Zwischenwerte und haelt den Fehler fuer halb so schlimm.

   Die Regeln sind ersatzlos entfallen. Die Marken behalten im Hover ihre ruhigen
   Farben, und weil der Kartengrund heller wird statt dunkler, steigt der Kontrast
   dabei sogar leicht. Wer hier wieder einen Sonderfall einbaut, muss ihn messen:
   page.hover() taugt dafuer nicht, die feste Kopfleiste verdeckt das Ziel. */

/* Auf schmalen Bildschirmen darf die Marke die Herkunft nicht wegdruecken. */


/* Die beiden Daten unten in der Karte        14.08.2026 (Dirk, zweite Runde)
   -------------------------------------------------------------------------
   Vorher stand das Datum aelterer Verweise oben in der Kopfzeile, gequetscht
   zwischen Herkunft und Pfeil, und war dort zu klein. Zwei Angaben haetten
   dort erst recht keinen Platz. Jetzt stehen sie unten in einer eigenen
   Zeile: mehr Platz, groessere Schrift, und die Kopfzeile traegt nur noch den
   Zustand - neu, gestern oder ueberarbeitet.

   Keine Grossbuchstaben und keine gesperrte Laufweite: das sind Datumsangaben
   zum Lesen, keine Marken zum Auffallen. 8,42:1 gegen den Kartengrund. */
.gt-karte-daten {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(42, 74, 56, 0.16);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--forest, #2A4A38);
}

/* Faehrt man ueber die Karte, wird ihr Grund weiss. Die Linie muss dann
   mitziehen, sonst steht sie ploetzlich zu hart im Bild. */
.gt-karte:hover .gt-karte-daten,
.gt-karte:focus-within .gt-karte-daten {
  border-top-color: rgba(42, 74, 56, 0.22);
}

@media (max-width: 520px) {
  .gt-karte-daten { font-size: 12px; margin-top: 12px; padding-top: 10px; }
}

@media (max-width: 520px) {
  .gt-karte-neu {
    font-size: 12px;
    padding: 4px 9px;
    letter-spacing: 0.05em;
    margin-right: 8px;
  }
}

/* Das Zeichen am Reiter                 neuestes-vorn-20260903 (Dirk 03.09.)
   -------------------------------------------------------------------------
   Ein kleiner Punkt oben rechts am Reiter, wenn dort etwas von heute oder
   gestern liegt. Bewusst kein Text und keine Zahl: die Reiter stehen zu
   sechst nebeneinander und sind schon zweizeilig beschriftet, ein siebtes
   Wort spraengte die Reihe. Der Punkt sitzt absolut und nimmt deshalb keinen
   Platz weg, die Beschriftung rutscht nicht.
   Farbe ist der Hauston, derselbe wie an der Marke auf der Karte.
   ------------------------------------------------------------------------- */
.gt-reiter-neu {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2A4A38;
  /* heller Ring, damit der Punkt auch auf dem eingefaerbten aktiven Reiter
     seine Kante behaelt */
  box-shadow: 0 0 0 2px rgba(248, 245, 238, 0.9);
}

/* Nur fuer Vorleser. Gleiche Bauart wie .sr-only auf der Startseite. */
.gt-reiter-neu-wort {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wer weniger Bewegung eingestellt hat, bekommt trotzdem den Punkt: er
   bewegt sich nicht, er ist nur da. */

/* Der Puls an frischen Karten                    14.08.2026 (Dirk)
   -------------------------------------------------------------------------
   Nur was HEUTE dazukam, atmet einmal kurz. Gestern und aelter bleiben still,
   sonst zappelt das halbe Raster und nichts faellt mehr auf.

   Zwei Durchlaeufe zu 2,2 Sekunden, zusammen 4,4. Das ist Absicht und keine
   Willkuer: WCAG 2.2.2 verlangt eine Pausiermoeglichkeit erst fuer Bewegung,
   die laenger als fuenf Sekunden laeuft. Ein Effekt, der von selbst aufhoert,
   braucht keinen Knopf - und einen Knopf an einer 12-Pixel-Marke wollte
   niemand bedienen.

   Der Ring liegt aussen als box-shadow, nicht als Rahmen: ein Rahmen wuerde
   die Marke bei jedem Puls um zwei Pixel groesser machen und die Zeile
   verschieben. Gepulst wird die Farbe, nicht die Groesse.

   Gestartet wird ueber die Klasse puls-an, die das Skript erst setzt, wenn
   die Karte wirklich im Bild ist. Ohne das waere der Puls vorbei, bevor
   jemand bis zur Rubrik gescrollt hat - sie steht weit unten auf der Seite. */
@keyframes gtPulsRing {
  0%   { box-shadow: 0 0 0 0 rgba(168, 137, 72, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(168, 137, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 137, 72, 0); }
}

.gt-karte-neu.ist-heute.puls-an {
  animation: gtPulsRing 2.2s cubic-bezier(0.4, 0, 0.2, 1) 2;
}

/* Wer Bewegung abbestellt hat, bekommt keine. Die Marke bleibt trotzdem
   dunkelgruen mit goldenem Punkt und damit die auffaelligste der drei. */
@media (prefers-reduced-motion: reduce) {
  .gt-karte-neu.ist-heute.puls-an { animation: none; }
}



/* ---------------------------------------------------------------------------
   Der Wechsel zwischen den Rubriken          11.08.2026 (Dirk)

   Die neue Tafel erscheint nicht mehr hart, sie schiebt sich herein - und zwar
   aus der Richtung, in die geklickt wurde. Ein Reiter weiter rechts holt die
   Karten von rechts, ein Reiter weiter links von links. Das Auge folgt damit
   der Bewegung, die es selbst ausgeloest hat.

   Die Karten laufen leicht versetzt ein, nicht alle im selben Moment. Das ist
   der Unterschied zwischen einer Flaeche, die umspringt, und sechs Karten, die
   ankommen.

   Wichtig: die Klasse wird nach dem Lauf per JavaScript wieder entfernt. Bliebe
   sie stehen, hielte die Animation ihren Endzustand fest, und eine Animation
   schlaegt jede normale Regel - der Hover an den Karten waere danach tot.
--------------------------------------------------------------------------- */
/* 11.08.2026 (Dirk), zweiter Anlauf: die Karten wanderten nur 46 Pixel. Das
   sah nach einem Versetzen aus, nicht nach einem Schieben - Dirk hat es beim
   Durchklicken schlicht nicht bemerkt. Jetzt faehrt die GANZE Tafel als Block
   vom Bildrand herein, ueber die volle Breite des Rasters.

   Damit dabei nichts ueber den Rand haengt und einen Rollbalken erzeugt, wird
   am Raster geklemmt. clip statt hidden, weil hidden aus dem Raster einen
   Rollbereich macht. overflow-clip-margin laesst die Schatten der Karten
   trotzdem stehen. */
.gt-raster {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  .gt-raster {
    overflow-x: clip;
    overflow-clip-margin: 28px;
  }
}

@keyframes gtSchubVonRechts {
  from { opacity: 0.15; transform: translate3d(100%, 0, 0); }
  to   { opacity: 1;    transform: translate3d(0, 0, 0); }
}

@keyframes gtSchubVonLinks {
  from { opacity: 0.15; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1;    transform: translate3d(0, 0, 0); }
}

/* Die Tafel selbst faehrt, nicht die einzelnen Karten. Nur so sieht es aus
   wie ein Blatt, das hereingeschoben wird, und nicht wie sechs Kacheln, die
   unabhaengig voneinander zucken. */
.gt-tafel.kommt-von-rechts,
.gt-tafel.kommt-von-links {
  will-change: transform;
}

.gt-tafel.kommt-von-rechts {
  animation: gtSchubVonRechts 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gt-tafel.kommt-von-links {
  animation: gtSchubVonLinks 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ---------------------------------------------------------------------------
   Was heute kam, meldet sich

   Die Marke fuer den heutigen Tag atmet langsam. Sie wird groesser und wieder
   kleiner, ganz ruhig, und der goldene Punkt geht dabei mit. Kein Blinken:
   das gehoert auf eine Baustelle, nicht auf die Seite einer Arztpraxis.

   transform-origin liegt rechts, weil die Marke am rechten Rand der Kopfzeile
   sitzt. Sonst schoebe sie beim Wachsen den Pfeil zur Seite.
--------------------------------------------------------------------------- */
@keyframes gtNeuAtmet {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.09); }
}

@keyframes gtNeuPunkt {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.25); }
}

.gt-karte-neu.ist-heute {
  transform-origin: right center;
  animation: gtNeuAtmet 2600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 0 0 rgba(168, 137, 72, 0.55);
}

.gt-karte-neu.ist-heute::before {
  animation: gtNeuPunkt 2600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Faehrt jemand ueber die Karte, haelt die Marke an. Wer liest, soll nicht
   nebenbei etwas zappeln sehen. */
.gt-karte:hover .gt-karte-neu.ist-heute,
.gt-karte:focus-within .gt-karte-neu.ist-heute,
.gt-karte:hover .gt-karte-neu.ist-heute::before,
.gt-karte:focus-within .gt-karte-neu.ist-heute::before {
  animation-play-state: paused;
}


/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt beides
   nicht: kein Schub, kein Atmen. Die Marke bleibt trotzdem sichtbar, sie
   traegt ihre Aussage in Farbe und Wort, nicht in der Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .gt-tafel.kommt-von-rechts,
  .gt-tafel.kommt-von-links,
  .gt-karte-neu.ist-heute,
  .gt-karte-neu.ist-heute::before {
    animation: none;
  }
}


/* ==========================================================================
   Nachtlauf 13.08.2026 - Luft zum Bildschirmrand

   Wie beim Kalender: bis 767 Pixel stand das Blatt mit 6 Pixeln Rand am
   unteren Bildschirmrand und war unten randbuendig abgeschnitten.
   ========================================================================== */
@media (max-width: 767px) {
  .gt-modal {
    align-items: center;
    padding-top: max(20px, env(safe-area-inset-top, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    padding-left: max(20px, env(safe-area-inset-left, 0px));
  }
  .gt-modal .modal-panel {
    max-width: 100%;
    max-height: 100%;
    border-radius: 24px;
  }
  @supports (height: 100dvh) {
    .gt-modal .modal-panel { max-height: 100%; }
  }
}