/* ==========================================================================
   Gästetelefon Content Design System
   gt-modules.css  ·  Version 31
   WordPress Customizer > Zusätzliches CSS  (Version 2 komplett ersetzen)
   Theme: Astra 4.13.x mit Spectra (UAGB)  ·  Präfix: .gt-

   NEU IN V3, die Gestaltungsebene
   - gt-eyebrow, auch als nummerierte Variante
   - gt-wave, die Tonspur als Trenner, tintbar über color
   - gt-badge in vier Ausprägungen
   - gt-numbered, die 01/02/03-Aufzählung
   - gt-versus, kleine Zwei-Wege-Vergleichsbox
   - gt-panel, generische Info- und Vergleichsbox mit Eyebrow
   - gt-list mit vier Aufzählungsstilen
   - gt-quote--pull, große Zitatbox
   - FAQ nummeriert, Linkbox mit Pfeilen und Gruppen
   - gt-hero--split mit Bild
   ========================================================================== */

:root {
  /* Flächen bewusst eigenständig. Die Astra Global Colors liefern auf diesem
     Theme Weiß als Flächenfarbe, dadurch verschwanden alle Modulflächen.
     Nur Akzent und Akzentschrift hängen weiter am Theme. */
  --gt-ink:        #2f2b26;
  --gt-ink-soft:   #5f584f;
  --gt-ink-mute:   #7a7166;
  --gt-accent:     var(--ast-global-color-0, #b0713a);
  --gt-accent-ink: var(--ast-global-color-1, #8c5729);
  --gt-on-accent:  #ffffff;
  --gt-surface:    #f8f4ec;
  --gt-surface-2:  #fffdf8;
  --gt-surface-3:  #f1eadd;
  --gt-line:       #e6ddcd;
  --gt-line-soft:  #f0e9dc;
  --gt-ok:         #2f6b4f;
  --gt-warn:       #8d4a55;
  --gt-radius:     16px;
  --gt-btn-radius: 3px;   /* Buttons eckig wie im Theme. Auf 999px setzen für Pillenform. */
  --gt-radius-sm:  10px;
  --gt-space:      clamp(2.4rem, 6vw, 4rem);
  --gt-measure:    68ch;
  /* Inhaltsbreite des Themes. Astra steht auf 1200px (page-single-max-width).
     Module, die direkt im Inhalt stehen statt in einem Spectra-Container,
     bekommen dessen Innenabstand nicht und muessen sich selbst daran
     halten — sonst stehen sie ueber. */
  --gt-content:    1200px;
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

.gt-section { margin: var(--gt-space) 0; }
.gt-section > :first-child { margin-top: 0; }
.gt-section > :last-child { margin-bottom: 0; }
.gt-measure { max-width: var(--gt-measure); }

.gt-h { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.25; margin: 0 0 .75em; color: var(--gt-ink); }
.gt-sub { font-size: 1.05rem; line-height: 1.45; margin: 0 0 1em; color: var(--gt-ink); font-weight: 600; }
.gt-lead { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.6; color: var(--gt-ink-soft); max-width: var(--gt-measure); }

.gt-check, .gt-fit ul, .gt-price ul, .gt-trust, .gt-linkbox ul, .gt-linkbox__group ul,
.gt-toc ul, .gt-steps, .gt-next, .gt-idealist, .gt-idealist__meta, .gt-list,
.gt-stats, .gt-crumbs ol, .gt-verdict__why, .gt-define__alt, .gt-numbered,
.gt-versus__col ul, .gt-badges {
  margin: 0; padding: 0; list-style: none;
}
.gt-prose ul { list-style: disc; margin: 0 0 1.5em 1.5em; padding: 0; }
.gt-prose ol { list-style: decimal; margin: 0 0 1.5em 1.5em; padding: 0; }
.gt-prose li { margin-bottom: .4em; }

[class*="gt-"] a:focus-visible,
[class*="gt-"] button:focus-visible,
[class*="gt-"] summary:focus-visible,
[class*="gt-"] audio:focus-visible {
  outline: 2px solid var(--gt-accent); outline-offset: 3px; border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Eyebrow
   Kleinschreibung statt Versalien, davor eine kurze Messinglinie.
   -------------------------------------------------------------------------- */

.gt-eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .5em;
  font-size: .88rem; font-weight: 600; line-height: 1.3;
  color: var(--gt-accent-ink);
}
.gt-eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--gt-accent); flex: none; }
.gt-eyebrow--plain::before { display: none; }
.gt-eyebrow--num { counter-increment: gtsec; }
.gt-eyebrow--num::before {
  content: counter(gtsec, decimal-leading-zero);
  width: 1.9rem; height: 1.9rem; background: transparent;
  border: 1.5px solid var(--gt-accent); border-radius: 50%;
  display: grid; place-items: center;
  font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.gt-counted { counter-reset: gtsec; }

.gt-heading { margin: 0 0 1.25rem; }
.gt-heading h2, .gt-heading h3 { margin: 0; line-height: 1.2; color: var(--gt-ink); }
.gt-heading p { margin: .6em 0 0; color: var(--gt-ink-soft); max-width: var(--gt-measure); }

/* --------------------------------------------------------------------------
   Tonspur als Trenner
   Farbe steuerst du über color, Höhe über --gt-wave-h.
   -------------------------------------------------------------------------- */

.gt-wave {
  --gt-wave-h: 32px;
  display: block; width: 100%; height: var(--gt-wave-h);
  color: var(--gt-accent);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cg fill='black'%3E%3Crect x='2' y='16' width='4' height='8' rx='2'/%3E%3Crect x='12' y='11' width='4' height='18' rx='2'/%3E%3Crect x='22' y='6' width='4' height='28' rx='2'/%3E%3Crect x='32' y='14' width='4' height='12' rx='2'/%3E%3Crect x='42' y='3' width='4' height='34' rx='2'/%3E%3Crect x='52' y='12' width='4' height='16' rx='2'/%3E%3Crect x='62' y='17' width='4' height='6' rx='2'/%3E%3Crect x='72' y='8' width='4' height='24' rx='2'/%3E%3Crect x='82' y='13' width='4' height='14' rx='2'/%3E%3Crect x='92' y='5' width='4' height='30' rx='2'/%3E%3Crect x='102' y='15' width='4' height='10' rx='2'/%3E%3Crect x='112' y='10' width='4' height='20' rx='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cg fill='black'%3E%3Crect x='2' y='16' width='4' height='8' rx='2'/%3E%3Crect x='12' y='11' width='4' height='18' rx='2'/%3E%3Crect x='22' y='6' width='4' height='28' rx='2'/%3E%3Crect x='32' y='14' width='4' height='12' rx='2'/%3E%3Crect x='42' y='3' width='4' height='34' rx='2'/%3E%3Crect x='52' y='12' width='4' height='16' rx='2'/%3E%3Crect x='62' y='17' width='4' height='6' rx='2'/%3E%3Crect x='72' y='8' width='4' height='24' rx='2'/%3E%3Crect x='82' y='13' width='4' height='14' rx='2'/%3E%3Crect x='92' y='5' width='4' height='30' rx='2'/%3E%3Crect x='102' y='15' width='4' height='10' rx='2'/%3E%3Crect x='112' y='10' width='4' height='20' rx='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 100%;
}
.gt-wave--sm { --gt-wave-h: 20px; }
.gt-wave--quiet { color: var(--gt-line); }
.gt-wave--divider { margin: var(--gt-space) 0; opacity: .85; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.gt-badges { display: flex; flex-wrap: wrap; gap: .45rem; }
.gt-badge {
  display: inline-block; font-size: .78rem; font-weight: 700; line-height: 1.4;
  border-radius: 999px; padding: .25em .8em;
  border: 1.5px solid var(--gt-accent); color: var(--gt-accent-ink); background: transparent;
}
.gt-badge--solid { background: var(--gt-accent); color: var(--gt-on-accent); }
.gt-badge--ok { border-color: var(--gt-ok); color: var(--gt-ok); }
.gt-badge--warn { border-color: var(--gt-warn); color: var(--gt-warn); }
.gt-badge--quiet { border-color: var(--gt-line); color: var(--gt-ink-mute); background: var(--gt-surface-2); }

/* --------------------------------------------------------------------------
   Nummerierte Aufzählung 01 / 02 / 03
   -------------------------------------------------------------------------- */

.gt-numbered { counter-reset: gtnum; display: grid; gap: 1.4rem; }
.gt-numbered > li { counter-increment: gtnum; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.gt-numbered > li::before {
  content: counter(gtnum, decimal-leading-zero);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); font-weight: 700; line-height: 1;
  color: var(--gt-accent); font-variant-numeric: tabular-nums;
  padding-top: .05em;
}
.gt-numbered h3 { margin: 0 0 .3em; font-size: 1.08rem; color: var(--gt-ink); line-height: 1.3; }
.gt-numbered p { margin: 0; color: var(--gt-ink-soft); max-width: 60ch; }
.gt-numbered--boxed > li { background: var(--gt-surface-2); border: 1px solid var(--gt-line); border-radius: var(--gt-radius); padding: 1.1rem 1.3rem; }
@media (min-width: 760px) {
  .gt-numbered--cols { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .gt-numbered--cols > li { grid-template-columns: 1fr; gap: .5rem; }
}

/* --------------------------------------------------------------------------
   Aufzählungsstile
   -------------------------------------------------------------------------- */

.gt-list { display: grid; gap: .6rem; max-width: var(--gt-measure); }
.gt-list li { position: relative; padding-left: 1.8rem; line-height: 1.55; }
.gt-list--check li::before { content: ""; position: absolute; left: 0; top: .4em; width: 1.05rem; height: .55rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }
.gt-list--cross li::before { content: ""; position: absolute; left: .2rem; top: .68em; width: .85rem; height: 0; border-top: 2.5px solid var(--gt-warn); }
.gt-list--dot li::before { content: ""; position: absolute; left: .25rem; top: .58em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gt-accent); }
.gt-list--arrow li::before { content: ""; position: absolute; left: .2rem; top: .48em; width: .45rem; height: .45rem; border-right: 2.2px solid var(--gt-accent); border-bottom: 2.2px solid var(--gt-accent); transform: rotate(-45deg); }
.gt-list--two { gap: .6rem 2rem; }
@media (min-width: 640px) { .gt-list--two { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Panel, die generische Box
   -------------------------------------------------------------------------- */

.gt-panel { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: clamp(1.15rem, 3vw, 1.6rem); }
.gt-panel > :first-child { margin-top: 0; }
.gt-panel > :last-child { margin-bottom: 0; }
.gt-panel h3 { margin: 0 0 .6em; font-size: 1.1rem; color: var(--gt-ink); }
.gt-panel p { color: var(--gt-ink-soft); }
.gt-panel--accent { border-color: var(--gt-accent); background: var(--gt-surface); }
.gt-panel--rule { border: 0; border-left: 4px solid var(--gt-accent); border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0; background: var(--gt-surface); }
.gt-panels { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gt-panels--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .gt-panels--3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   Versus, kleine Zwei-Wege-Vergleichsbox
   -------------------------------------------------------------------------- */

.gt-versus { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); overflow: hidden; position: relative; display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gt-versus { grid-template-columns: 1fr 1fr; } }
.gt-versus__col { padding: 1.3rem 1.45rem; }
.gt-versus__col + .gt-versus__col { border-top: 1px solid var(--gt-line); }
@media (min-width: 700px) { .gt-versus__col + .gt-versus__col { border-top: 0; border-left: 1px solid var(--gt-line); } }
.gt-versus__col h3 { margin: 0 0 .2em; font-size: 1.08rem; color: var(--gt-ink); }
.gt-versus__meta { margin: 0 0 .9em; font-size: .88rem; color: var(--gt-ink-mute); }
.gt-versus__col ul { display: grid; gap: .45rem; }
.gt-versus__col li { position: relative; padding-left: 1.5rem; font-size: .95rem; color: var(--gt-ink-soft); }
.gt-versus__col li::before { content: ""; position: absolute; left: 0; top: .42em; width: .95rem; height: .5rem; border-left: 2.2px solid var(--gt-ok); border-bottom: 2.2px solid var(--gt-ok); transform: rotate(-45deg); }
.gt-versus__col.is-win { background: var(--gt-surface); }
.gt-versus__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--gt-accent); color: var(--gt-on-accent);
  display: none; place-items: center; font-size: .8rem; font-weight: 700; z-index: 1;
  border: 3px solid var(--gt-surface-2);
}
@media (min-width: 700px) { .gt-versus__mark { display: grid; } }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.gt-hero { background: var(--gt-surface); border-radius: var(--gt-radius); padding: clamp(1.5rem, 4vw, 2.75rem); margin: 0 0 var(--gt-space); }
.gt-hero__title { margin: 0 0 .5em; line-height: 1.15; }
.gt-hero__lead { margin: 0 0 1.5em; max-width: 54ch; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.6; color: var(--gt-ink-soft); }
.gt-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.gt-hero__price { font-weight: 700; color: var(--gt-ink); white-space: nowrap; }
.gt-hero .gt-wave { margin-top: 1.5rem; }

.gt-hero--split { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 840px) { .gt-hero--split { grid-template-columns: 1.1fr .9fr; gap: 2.5rem; } }
.gt-hero__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--gt-radius); display: block; background: var(--gt-line-soft); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.gt-btn { display: inline-block; padding: .95em 1.7em; border-radius: var(--gt-btn-radius); font-weight: 600; line-height: 1.2; text-decoration: none; border: 2px solid var(--gt-accent); background: var(--gt-accent); color: var(--gt-on-accent); transition: background-color .15s linear, border-color .15s linear, color .15s linear; }
.gt-btn:hover, .gt-btn:focus { background: var(--gt-accent-ink); border-color: var(--gt-accent-ink); color: var(--gt-on-accent); }
.gt-btn--ghost { background: transparent; color: var(--gt-accent-ink); }
.gt-btn--ghost:hover, .gt-btn--ghost:focus { background: var(--gt-accent); color: var(--gt-on-accent); }

/* --------------------------------------------------------------------------
   Kurzantwort
   -------------------------------------------------------------------------- */

.gt-answer { border-left: 4px solid var(--gt-accent); background: var(--gt-surface); border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0; padding: 1.25rem 1.5rem; }
.gt-answer__q { margin: 0 0 .4em; font-size: 1.05rem; font-weight: 700; color: var(--gt-ink); }
.gt-answer p { margin: 0 0 .6em; max-width: 62ch; }
.gt-answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Empfehlung vorab
   -------------------------------------------------------------------------- */

.gt-verdict { border: 2px solid var(--gt-accent); border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: .8rem; }
.gt-verdict__label { justify-self: start; font-size: .8rem; font-weight: 700; background: var(--gt-accent); color: var(--gt-on-accent); border-radius: 999px; padding: .25em .9em; }
.gt-verdict__claim { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; line-height: 1.35; color: var(--gt-ink); max-width: 46ch; }
.gt-verdict__why { display: grid; gap: .5rem; }
.gt-verdict__why li { position: relative; padding-left: 1.6rem; color: var(--gt-ink-soft); }
.gt-verdict__why li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: .55rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Definitionsblock
   -------------------------------------------------------------------------- */

.gt-define { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-2); padding: 1.25rem 1.5rem; }
.gt-define dt { font-weight: 700; color: var(--gt-ink); margin: 0 0 .25em; }
.gt-define dd { margin: 0 0 1rem; color: var(--gt-ink-soft); max-width: 62ch; }
.gt-define dd:last-child { margin-bottom: 0; }
.gt-define__alt { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.gt-define__alt li { font-size: .85rem; border: 1px dashed var(--gt-line); border-radius: 999px; padding: .2em .75em; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   Weiterführende Fragen
   -------------------------------------------------------------------------- */

.gt-next { display: grid; gap: .5rem; }
.gt-next li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-2); padding: .9rem 1.1rem; color: var(--gt-ink); text-decoration: none; font-weight: 600; transition: border-color .15s linear, color .15s linear; }
.gt-next li a:hover, .gt-next li a:focus { border-color: var(--gt-accent); color: var(--gt-accent-ink); }
.gt-next li a::after { content: ""; width: .55rem; height: .55rem; border-right: 2.5px solid var(--gt-accent); border-bottom: 2.5px solid var(--gt-accent); transform: rotate(-45deg); flex: none; }

/* --------------------------------------------------------------------------
   Textbeispiele
   -------------------------------------------------------------------------- */

.gt-examples { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gt-examples--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .gt-examples--3 { grid-template-columns: repeat(3, 1fr); } }
.gt-example { border: 1px solid var(--gt-line); border-left: 4px solid var(--gt-accent); border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0; background: var(--gt-surface-2); padding: 1.1rem 1.3rem; display: grid; gap: .6rem; align-content: start; }
.gt-example__label { font-size: .85rem; font-weight: 700; color: var(--gt-accent-ink); margin: 0; }
.gt-example__text { margin: 0; color: var(--gt-ink); line-height: 1.6; }
.gt-example__hint { margin: 0; font-size: .85rem; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   Warnhinweis
   -------------------------------------------------------------------------- */

.gt-warn { border: 1px solid var(--gt-line); border-left: 4px solid var(--gt-warn); border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0; padding: 1.1rem 1.35rem; background: var(--gt-surface-2); }
.gt-warn__title { margin: 0 0 .35em; font-weight: 700; color: var(--gt-warn); }
.gt-warn p { margin: 0; color: var(--gt-ink-soft); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Zahlenleiste
   -------------------------------------------------------------------------- */

.gt-stats { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .gt-stats { grid-template-columns: repeat(4, 1fr); } }
.gt-stats li { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-2); padding: 1rem 1.1rem; }
.gt-stats b { display: block; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.1; color: var(--gt-ink); font-weight: 700; }
.gt-stats span { display: block; margin-top: .3em; font-size: .88rem; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   Ideenliste
   -------------------------------------------------------------------------- */

.gt-idealist { counter-reset: gtidea; display: grid; gap: 1rem; }
.gt-idealist > li { counter-increment: gtidea; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: 1.2rem 1.35rem 1.35rem 3.6rem; position: relative; }
.gt-idealist > li::before { content: counter(gtidea, decimal-leading-zero); position: absolute; left: 1.1rem; top: 1.25rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gt-accent); color: var(--gt-accent-ink); font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.gt-idealist h3 { margin: 0 0 .35em; font-size: 1.08rem; color: var(--gt-ink); }
.gt-idealist p { margin: 0 0 .7em; color: var(--gt-ink-soft); max-width: 62ch; }
.gt-idealist p:last-child { margin-bottom: 0; }
.gt-idealist__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.gt-idealist__meta li { font-size: .82rem; border: 1px solid var(--gt-line); border-radius: 999px; padding: .2em .8em; color: var(--gt-ink-soft); background: #fff; }
.gt-idealist > li.is-own { border-color: var(--gt-accent); background: var(--gt-surface); }

/* --------------------------------------------------------------------------
   Bild und Text
   -------------------------------------------------------------------------- */

.gt-media { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 780px) {
  .gt-media { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .gt-media--flip .gt-media__img { order: 2; }
}
.gt-media__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--gt-radius); display: block; background: var(--gt-line-soft); }
.gt-media__body h3 { margin: 0 0 .5em; font-size: 1.2rem; color: var(--gt-ink); }
.gt-media__body p { margin: 0 0 .8em; color: var(--gt-ink-soft); }
.gt-media__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Inhaltsverzeichnis
   -------------------------------------------------------------------------- */

.gt-toc { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); padding: 1.25rem 1.5rem; }
.gt-toc__title { font-weight: 700; margin: 0 0 .6em; color: var(--gt-ink); }
.gt-toc ul { display: grid; gap: .45rem; }
.gt-toc a { color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Hörprobe
   -------------------------------------------------------------------------- */

.gt-audio { background: var(--gt-surface); border-radius: var(--gt-radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .9rem; }
.gt-audio__label { font-weight: 700; color: var(--gt-ink); margin: 0; }
.gt-audio__hint { margin: 0; color: var(--gt-ink-soft); font-size: .95rem; }
.gt-audio audio { width: 100%; }
.gt-audio .gt-wave { --gt-wave-h: 18px; color: var(--gt-accent); opacity: .55; }

/* --------------------------------------------------------------------------
   Ablauf in Schritten
   -------------------------------------------------------------------------- */

.gt-steps { counter-reset: gtstep; display: grid; gap: 1rem; }
.gt-steps > li { counter-increment: gtstep; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-2); }
.gt-steps > li::before { content: counter(gtstep); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--gt-accent); color: var(--gt-on-accent); font-weight: 700; }
.gt-steps h3 { margin: 0 0 .3em; font-size: 1.05rem; color: var(--gt-ink); }
.gt-steps p { margin: 0; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   Checkliste
   -------------------------------------------------------------------------- */

.gt-check { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .gt-check { grid-template-columns: 1fr 1fr; gap: .6rem 2rem; } }
.gt-check > li { position: relative; padding-left: 1.9rem; line-height: 1.5; }
.gt-check > li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1.15rem; height: .6rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   Vergleichstabelle
   -------------------------------------------------------------------------- */

.gt-table-wrap { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); overflow: hidden; }
.gt-table { width: 100%; border-collapse: collapse; margin: 0; border-width: 0; }
.gt-table th, .gt-table td { padding: .9rem 1rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--gt-line); }
.gt-table thead th { background: var(--gt-surface); font-weight: 700; color: var(--gt-ink); }
.gt-table tbody th { font-weight: 600; color: var(--gt-ink); width: 30%; }
.gt-table tbody tr:last-child th, .gt-table tbody tr:last-child td { border-bottom: 0; }
.gt-table--zebra tbody tr:nth-child(even) { background: rgba(227, 218, 204, .18); }
.gt-table--compact th, .gt-table--compact td { padding: .6rem .8rem; font-size: .94rem; }
.gt-table .gt-is-best { background: rgba(138, 109, 59, .09); box-shadow: inset 3px 0 0 var(--gt-accent); }
.gt-table__flag { display: inline-block; font-size: .72rem; font-weight: 700; background: var(--gt-accent); color: var(--gt-on-accent); border-radius: 999px; padding: .1em .6em; margin-left: .4em; vertical-align: .1em; }

@media (max-width: 782px) {
  .gt-table-wrap { border: 0; border-radius: 0; }
  .gt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
  .gt-table, .gt-table tbody, .gt-table tr, .gt-table th, .gt-table td { display: block; width: auto; }
  .gt-table tr { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); margin-bottom: 1rem; background: var(--gt-surface-2); padding: .25rem 0; }
  .gt-table--zebra tbody tr:nth-child(even) { background: var(--gt-surface-2); }
  .gt-table tbody th { background: var(--gt-surface); border-radius: var(--gt-radius-sm) var(--gt-radius-sm) 0 0; width: auto; }
  .gt-table td { border-bottom: 1px solid var(--gt-line); }
  .gt-table tr td:last-child { border-bottom: 0; }
  .gt-table td::before { content: attr(data-label); display: block; font-size: .82rem; font-weight: 700; color: var(--gt-ink-soft); margin-bottom: .2em; }
  .gt-table .gt-is-best { box-shadow: none; }
}

/* --------------------------------------------------------------------------
   Passt / Passt nicht
   -------------------------------------------------------------------------- */

.gt-fit { display: grid; gap: 1rem; }
@media (min-width: 700px) { .gt-fit { grid-template-columns: 1fr 1fr; } }
.gt-fit__col { border: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); padding: 1.25rem 1.4rem; background: var(--gt-surface-2); }
.gt-fit__col h3 { margin: 0 0 .7em; font-size: 1.05rem; color: var(--gt-ink); }
.gt-fit ul { display: grid; gap: .5rem; }
.gt-fit li { position: relative; padding-left: 1.6rem; line-height: 1.5; }
.gt-fit--yes li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: .55rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }
.gt-fit--no li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .8rem; height: 0; border-top: 2.5px solid var(--gt-warn); }

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.gt-cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gt-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .gt-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.gt-card { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); overflow: hidden; display: flex; flex-direction: column; }
.gt-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--gt-line-soft); }
.gt-card__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.gt-card__title { margin: 0; font-size: 1.1rem; color: var(--gt-ink); }
.gt-card__title a { color: inherit; text-decoration: none; }
.gt-card__title a:hover, .gt-card__title a:focus { color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.gt-card p { margin: 0; color: var(--gt-ink-soft); }
.gt-card__link { margin-top: auto; font-weight: 600; color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.gt-card .gt-eyebrow { margin-bottom: .1em; }

/* --------------------------------------------------------------------------
   Preiskarte
   -------------------------------------------------------------------------- */

.gt-price { border: 2px solid var(--gt-accent); border-radius: var(--gt-radius); padding: clamp(1.35rem, 3vw, 2rem); background: var(--gt-surface-2); display: grid; gap: 1rem; }
.gt-price__amount { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1; color: var(--gt-ink); margin: 0; }
.gt-price__note { margin: 0; color: var(--gt-ink-soft); }
.gt-price ul { display: grid; gap: .5rem; }
.gt-price li { position: relative; padding-left: 1.6rem; }
.gt-price li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: .55rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   FAQ, nummeriert
   -------------------------------------------------------------------------- */

.gt-faq { display: grid; gap: .6rem; counter-reset: gtfaq; }
.gt-faq details { border: 1px solid var(--gt-line); border-left: 3px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-2); counter-increment: gtfaq; transition: border-color .15s linear; }
.gt-faq details:hover { border-left-color: var(--gt-accent); }
.gt-faq details[open] { border-left-color: var(--gt-accent); background: var(--gt-surface); }
.gt-faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 3.4rem; font-weight: 600; color: var(--gt-ink); position: relative; }
.gt-faq summary::-webkit-details-marker { display: none; }
.gt-faq summary::before { content: counter(gtfaq, decimal-leading-zero); position: absolute; left: 1.25rem; top: 1.05rem; font-size: .78rem; font-weight: 700; color: var(--gt-accent); font-variant-numeric: tabular-nums; }
.gt-faq summary::after { content: ""; position: absolute; right: 1.35rem; top: 1.35rem; width: .6rem; height: .6rem; border-right: 2.5px solid var(--gt-accent); border-bottom: 2.5px solid var(--gt-accent); transform: rotate(45deg); transition: transform .18s ease; }
.gt-faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.gt-faq__a { padding: 0 1.5rem 1.25rem 3.4rem; }
.gt-faq__a p { margin: 0 0 .7em; max-width: 62ch; color: var(--gt-ink-soft); }
.gt-faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Zitate
   -------------------------------------------------------------------------- */

.gt-quote { border: 0; border-left: 4px solid var(--gt-accent); background: var(--gt-surface); border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0; margin: 0; padding: 1.4rem 1.6rem; font-style: normal; font-size: 1.05rem; }
.gt-quote p { margin: 0 0 .8em; color: var(--gt-ink); }
.gt-quote footer { display: flex; align-items: center; gap: .7rem; color: var(--gt-ink-soft); font-size: .95rem; }
.gt-quote footer img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }

.gt-quote--pull { border: 1px solid var(--gt-line); border-left: 0; border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 3vw, 1.8rem); position: relative; }
.gt-quote--pull::before { content: "„"; position: absolute; left: clamp(1rem, 3vw, 1.6rem); top: -.15em; font-size: clamp(4rem, 9vw, 6rem); line-height: 1; color: var(--gt-accent); opacity: .28; font-family: Georgia, serif; }
.gt-quote--pull p { position: relative; font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.5; }
.gt-quotes { display: grid; gap: 1rem; }
@media (min-width: 820px) { .gt-quotes--2 { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Vertrauensleiste
   -------------------------------------------------------------------------- */

.gt-trust { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.gt-trust li { border: 1px solid var(--gt-line); border-radius: 999px; padding: .35em .9em; font-size: .9rem; color: var(--gt-ink-soft); background: var(--gt-surface-2); }

/* --------------------------------------------------------------------------
   Hinweisbox
   -------------------------------------------------------------------------- */

.gt-note { border: 1px dashed var(--gt-line); border-radius: var(--gt-radius-sm); padding: 1.1rem 1.35rem; background: var(--gt-surface-2); }
.gt-note strong { color: var(--gt-ink); }
.gt-note p { margin: 0; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.gt-cta { background: var(--gt-accent); color: var(--gt-on-accent); border-radius: var(--gt-radius); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1rem; justify-items: start; position: relative; overflow: hidden; }
.gt-cta h2, .gt-cta p { color: var(--gt-on-accent); margin: 0; }
.gt-cta h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; }
.gt-cta p { max-width: 52ch; opacity: .93; }
.gt-cta .gt-eyebrow { color: var(--gt-on-accent); opacity: .85; }
.gt-cta .gt-eyebrow::before { background: var(--gt-on-accent); }
.gt-cta .gt-btn { background: var(--gt-on-accent); color: var(--gt-accent-ink); border-color: var(--gt-on-accent); }
.gt-cta .gt-btn:hover, .gt-cta .gt-btn:focus { background: var(--gt-surface); border-color: var(--gt-surface); color: var(--gt-accent-ink); }
.gt-cta .gt-wave { position: absolute; left: 0; right: 0; bottom: 0; --gt-wave-h: 26px; color: var(--gt-on-accent); opacity: .22; }
.gt-cta--quiet { background: var(--gt-surface); border: 1px solid var(--gt-line); }
.gt-cta--quiet h2 { color: var(--gt-ink); }
.gt-cta--quiet p { color: var(--gt-ink-soft); opacity: 1; }
.gt-cta--quiet .gt-eyebrow { color: var(--gt-accent-ink); opacity: 1; }
.gt-cta--quiet .gt-eyebrow::before { background: var(--gt-accent); }
.gt-cta--quiet .gt-wave { color: var(--gt-accent); opacity: .18; }
.gt-cta--quiet .gt-btn { background: var(--gt-accent); color: var(--gt-on-accent); border-color: var(--gt-accent); }
.gt-cta--quiet .gt-btn:hover, .gt-cta--quiet .gt-btn:focus { background: var(--gt-accent-ink); border-color: var(--gt-accent-ink); color: var(--gt-on-accent); }

/* --------------------------------------------------------------------------
   Linkbox
   -------------------------------------------------------------------------- */

.gt-linkbox { border-top: 2px solid var(--gt-line); padding-top: 1.4rem; }
.gt-linkbox__title { font-weight: 700; margin: 0 0 .8em; color: var(--gt-ink); }
.gt-linkbox ul { display: grid; gap: .1rem; }
@media (min-width: 700px) { .gt-linkbox ul { grid-template-columns: 1fr 1fr; gap: .1rem 2rem; } }
.gt-linkbox li a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .7rem .2rem; border-bottom: 1px solid var(--gt-line-soft);
  color: var(--gt-ink); text-decoration: none; line-height: 1.45;
  transition: color .15s linear;
}
.gt-linkbox li a::before { content: ""; width: .45rem; height: .45rem; border-right: 2.2px solid var(--gt-accent); border-bottom: 2.2px solid var(--gt-accent); transform: rotate(-45deg); flex: none; position: relative; top: -.15em; }
.gt-linkbox li a:hover, .gt-linkbox li a:focus { color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.gt-linkbox__groups { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .gt-linkbox__groups { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.gt-linkbox__group h3 { margin: 0 0 .5em; font-size: .95rem; color: var(--gt-ink-mute); font-weight: 600; }

/* --------------------------------------------------------------------------
   Sticky Leiste
   -------------------------------------------------------------------------- */

.gt-sticky { display: none; }
@media (max-width: 782px) {
  .gt-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 98; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: var(--gt-surface-2); border-top: 1px solid var(--gt-line); box-shadow: 0 -2px 10px rgba(47, 43, 38, .08); }
  .gt-sticky__price { font-weight: 700; color: var(--gt-ink); line-height: 1.2; }
  .gt-sticky__price small { display: block; font-weight: 400; font-size: .8rem; color: var(--gt-ink-soft); }
  .gt-sticky .gt-btn { padding: .8em 1.3em; }
  .gt-sticky-spacer { display: block; height: 5rem; }
}
.gt-sticky-spacer { display: none; }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.gt-crumbs { font-size: .9rem; color: var(--gt-ink-soft); margin: 0 0 1.25rem; }
.gt-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.gt-crumbs li::after { content: "›"; margin-left: .5rem; color: var(--gt-line); }
.gt-crumbs li:last-child::after { content: ""; }
.gt-crumbs a { color: var(--gt-ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Bild mit Bildunterschrift
   -------------------------------------------------------------------------- */

.gt-figure { margin: 0; }
.gt-figure img { width: 100%; height: auto; border-radius: var(--gt-radius); display: block; }
.gt-figure figcaption { margin-top: .6rem; font-size: .9rem; color: var(--gt-ink-soft); }

/* --------------------------------------------------------------------------
   Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gt-btn, .gt-faq summary::after, .gt-faq details, .gt-next li a, .gt-linkbox li a { transition: none; }
}

/* --------------------------------------------------------------------------
   V4: Korrekturen aus dem ersten Livetest
   -------------------------------------------------------------------------- */

/* Band: getönter Abschnitt, gibt der Seite Rhythmus statt gleichförmigem Weiß */
.gt-band { background: var(--gt-surface); border-radius: var(--gt-radius); padding: clamp(1.5rem, 4vw, 2.75rem); }
.gt-band--deep { background: var(--gt-surface-3); }
.gt-band > :first-child { margin-top: 0; }
.gt-band > :last-child { margin-bottom: 0; }

/* Ganze Spalte hervorheben statt einzelner Zellen */
.gt-table--hl2 tbody td:nth-child(2) { background: rgba(176, 113, 58, .08); box-shadow: inset 3px 0 0 var(--gt-accent); }
.gt-table--hl2 thead th:nth-child(2) { background: rgba(176, 113, 58, .16); }
@media (max-width: 782px) {
  .gt-table--hl2 tbody td:nth-child(2) { box-shadow: none; }
}

/* Bildplatzhalter: sichtbar als Platzhalter, nicht als Fehler */
.gt-imgph { display: block; width: 100%; aspect-ratio: 4 / 3; border: 2px dashed var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface); display: grid; place-items: center; color: var(--gt-ink-mute); font-size: .9rem; text-align: center; padding: 1rem; }

/* Bild mit Rahmen, für Produktfotos */
.gt-figure--frame img { border: 1px solid var(--gt-line); }
.gt-figure--wide img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Hero bekommt garantiert eine Fläche, auch wenn das Theme Weiß liefert */
.gt-hero { background: var(--gt-surface); }
.gt-hero--plain { background: transparent; padding-left: 0; padding-right: 0; }

/* Etwas engerer Abstand, wenn zwei Module inhaltlich zusammengehören */
.gt-section--tight { margin-top: calc(var(--gt-space) * .45); }

/* Trustleiste mittig unter dem Hero */
.gt-trust--inline { gap: .4rem .5rem; }
.gt-trust--inline li { font-size: .82rem; padding: .25em .7em; }

/* --------------------------------------------------------------------------
   V5: Korrekturen und zwei neue Module
   -------------------------------------------------------------------------- */

/* Welle: kleine Variante war eine Haarlinie, jetzt mit Mindesthöhe und
   als kurzer zentrierter Trenner nutzbar */
.gt-wave--sm { --gt-wave-h: 26px; }
.gt-wave--center { max-width: 280px; margin-left: auto; margin-right: auto; }

/* Preisbox: der Button wurde durch das Grid auf volle Breite gezogen */
.gt-price { justify-items: start; gap: .6rem; }
.gt-price__amount { margin-top: .2rem; }
.gt-price ul { margin: .5rem 0; }
.gt-price .gt-btn { margin-top: .5rem; }

/* Zahlenleiste bekommt eine Akzentkante, sonst schwimmt sie */
.gt-stats li { border-top: 3px solid var(--gt-accent); }

/* Pull-Quote: Anführungszeichen saß auf der Kante */
.gt-quote--pull { padding-top: clamp(2.6rem, 6vw, 3.4rem); }
.gt-quote--pull::before { top: .35rem; opacity: .22; }

/* --------------------------------------------------------------------------
   NEU: Notizzettel für anlassspezifische Tipps
   Das Modul, das eine Anlassseite von der nächsten unterscheidet.
   -------------------------------------------------------------------------- */

.gt-notepad {
  position: relative;
  background: #fffdf5;
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius);
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2rem) clamp(1.5rem, 4vw, 2rem) clamp(3.2rem, 7vw, 4rem);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 33px, var(--gt-line-soft) 33px, var(--gt-line-soft) 34px);
  overflow: hidden;
}
/* Randlinie wie auf einem Block */
.gt-notepad::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: clamp(2rem, 5vw, 2.6rem);
  width: 1px; background: rgba(141, 74, 85, .28);
}
/* Klebestreifen oben */
.gt-notepad::after {
  content: "";
  position: absolute; top: -10px; left: 50%;
  width: 108px; height: 26px; transform: translateX(-50%) rotate(-1.6deg);
  background: rgba(176, 113, 58, .16);
  border-left: 1px dashed rgba(176, 113, 58, .3);
  border-right: 1px dashed rgba(176, 113, 58, .3);
}
.gt-notepad__title { margin: 0 0 .8em; font-size: 1.15rem; color: var(--gt-ink); line-height: 1.3; }
.gt-notepad ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.gt-notepad li { position: relative; padding-left: 1.7rem; color: var(--gt-ink-soft); line-height: 1.55; }
.gt-notepad li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .85rem; height: 0; border-top: 2px solid var(--gt-accent);
}
.gt-notepad li strong { color: var(--gt-ink); }
.gt-notepad p { margin: 1em 0 0; color: var(--gt-ink-mute); font-size: .92rem; }

/* --------------------------------------------------------------------------
   NEU: Buchungsbox mit Bild
   Ersetzt die reine Preiskarte am Seitenende.
   -------------------------------------------------------------------------- */

.gt-booking {
  border: 2px solid var(--gt-accent);
  border-radius: var(--gt-radius);
  background: var(--gt-surface-2);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .gt-booking { grid-template-columns: .85fr 1.15fr; } }
.gt-booking__media { position: relative; background: var(--gt-surface); }
.gt-booking__media img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.gt-booking__body { padding: clamp(1.4rem, 4vw, 2.1rem); display: grid; gap: .6rem; justify-items: start; align-content: center; }
.gt-booking__amount { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--gt-ink); margin: .1rem 0 0; }
.gt-booking__note { margin: 0; color: var(--gt-ink-soft); }
.gt-booking ul { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .5rem; }
.gt-booking li { position: relative; padding-left: 1.6rem; color: var(--gt-ink-soft); }
.gt-booking li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: .55rem; border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok); transform: rotate(-45deg); }
.gt-booking .gt-btn { margin-top: .4rem; }
.gt-booking__fine { margin: .2rem 0 0; font-size: .86rem; color: var(--gt-ink-mute); }

/* --------------------------------------------------------------------------
   V6: UX-Durchsicht aller Vorlagen
   -------------------------------------------------------------------------- */

/* 1. Zu viele Boxen mit linker Akzentkante sahen gleich aus.
      Jede Box bekommt jetzt ein eigenes Erkennungsmerkmal. */

/* Kurzantwort: Chip oben links, etwas größere Schrift. Das AEO-Modul muss
   auf den ersten Blick als Antwort lesbar sein. */
.gt-answer { position: relative; padding-top: 1.7rem; margin-top: .7rem; }
.gt-answer__label { position: absolute; top: -.75rem; left: 1rem; margin: 0; background: var(--gt-accent); color: var(--gt-on-accent); font-size: .74rem; font-weight: 700; padding: .25em .8em; border-radius: 999px; }
.gt-answer p { font-size: 1.04rem; }

/* Empfehlung: dicke Kante oben statt Rahmen rundum, sonst verwechselbar
   mit Preis- und Buchungsbox */
.gt-verdict { border: 1px solid var(--gt-line); border-top: 5px solid var(--gt-accent); background: var(--gt-surface-3); }

/* Textbeispiel: getönte Fläche und Chip statt Akzentkante */
.gt-example { border-left: 1px solid var(--gt-line); border-radius: var(--gt-radius-sm); background: var(--gt-surface-3); }
.gt-example__label { display: inline-block; justify-self: start; background: var(--gt-surface-2); border: 1px solid var(--gt-line); border-radius: 999px; padding: .15em .7em; font-size: .78rem; }

/* Warnhinweis: Titel als Chip in Rosé, damit er auch ohne Farbe erkennbar ist */
.gt-warn__title { display: inline-block; background: rgba(141, 74, 85, .1); border-radius: 999px; padding: .15em .7em; font-size: .82rem; }

/* 2. Inhaltsverzeichnis wurde bei langen Seiten zur Bleiwüste:
      jetzt zweispaltig und nummeriert */
.gt-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: gttoc; display: grid; gap: .45rem .75rem; }
@media (min-width: 640px) { .gt-toc ol { grid-template-columns: 1fr 1fr; } }
.gt-toc ol li { counter-increment: gttoc; display: flex; gap: .6rem; align-items: baseline; }
.gt-toc ol li::before { content: counter(gttoc, decimal-leading-zero); font-size: .76rem; font-weight: 700; color: var(--gt-accent); font-variant-numeric: tabular-nums; flex: none; }

/* 3. Definition: die Synonyme brauchten eine Einleitung */
.gt-define__alt::before { content: "Auch genannt:"; font-size: .85rem; color: var(--gt-ink-mute); align-self: center; }

/* 4. Karten reagieren nur auf ihren Link, nicht auf jede Mausbewegung */
.gt-card:has(a:hover), .gt-card:has(a:focus-visible) { border-color: var(--gt-accent); }

/* 5. Neue Module, die den anderen Formaten fehlten */

/* Autorenzeile für AEO und How-To */
.gt-author { display: flex; gap: 1rem; align-items: center; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: 1rem 1.2rem; }
.gt-author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; background: var(--gt-surface); }
.gt-author__name { margin: 0; font-weight: 700; color: var(--gt-ink); }
.gt-author__role { margin: 0; font-size: .9rem; color: var(--gt-ink-soft); }

/* Metazeile unter der Überschrift: Stand, Lesezeit */
.gt-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1.2rem; font-size: .86rem; color: var(--gt-ink-mute); }

/* Bildgalerie, später für die Modellübersicht */
.gt-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) {
  .gt-gallery--3 { grid-template-columns: repeat(3, 1fr); }
  .gt-gallery--4 { grid-template-columns: repeat(4, 1fr); }
}
.gt-gallery figure { margin: 0; }
.gt-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--gt-radius-sm); border: 1px solid var(--gt-line); display: block; background: var(--gt-surface); }
.gt-gallery figcaption { margin-top: .45rem; font-size: .88rem; color: var(--gt-ink-soft); text-align: center; }

/* Zusatzzeile im CTA, etwa "mehr als 8 Modelle" mit Link zur Übersicht */
.gt-cta__meta { margin: 0; font-size: .9rem; opacity: .92; }
.gt-cta__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gt-cta--quiet .gt-cta__meta { color: var(--gt-ink-soft); opacity: 1; }
.gt-cta--quiet .gt-cta__meta a { color: var(--gt-accent-ink); }

/* --------------------------------------------------------------------------
   V7: Hörprobe kräftiger, Modellmodul, Video
   -------------------------------------------------------------------------- */

/* Hörprobe war zu dünn: jetzt eigene Fläche, Rahmen, Tonspur als Rückgrat
   und optional ein Produktbild links. */
.gt-audio {
  background: var(--gt-surface-2);
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius);
  padding: clamp(1.4rem, 4vw, 2rem);
  gap: 1rem;
  position: relative;
}
.gt-audio audio { width: 100%; height: 44px; }
.gt-audio__label { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; }
.gt-audio__label::before { content: ""; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gt-accent); flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 60% no-repeat, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 60% no-repeat exclude, linear-gradient(#000,#000); }
.gt-audio__bg { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); --gt-wave-h: 74px; color: var(--gt-accent); opacity: .07; pointer-events: none; }
.gt-audio > :not(.gt-audio__bg) { position: relative; }

/* Variante mit Produktbild */
.gt-audio--rich { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .gt-audio--rich { grid-template-columns: 132px 1fr; gap: 1.5rem; align-items: center; } }
.gt-audio__art { margin: 0; }
.gt-audio__art img { width: 100%; max-width: 132px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--gt-line); background: var(--gt-surface); display: block; }
.gt-audio__main { display: grid; gap: .8rem; }

/* --------------------------------------------------------------------------
   Modellmodul
   -------------------------------------------------------------------------- */

.gt-models { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gt-models--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gt-models--4 { grid-template-columns: repeat(4, 1fr); } }
.gt-model { border: 1px solid var(--gt-line); border-radius: var(--gt-radius); background: var(--gt-surface-2); padding: 1.1rem 1.1rem 1.3rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; }
.gt-model__img { display: block; width: 100%; max-width: 190px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; background: var(--gt-surface); }
.gt-model__name { margin: .3rem 0 0; font-size: 1.08rem; color: var(--gt-ink); }
.gt-model__desc { margin: 0; font-size: .93rem; color: var(--gt-ink-soft); }
.gt-model__tag { align-self: center; font-size: .76rem; font-weight: 700; border: 1.5px solid var(--gt-accent); color: var(--gt-accent-ink); border-radius: 999px; padding: .18em .75em; }
.gt-model__link { margin-top: auto; padding-top: .4rem; font-weight: 600; color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.gt-model.is-pick { border-color: var(--gt-accent); background: var(--gt-surface); }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.gt-video { margin: 0; }
.gt-video video { width: 100%; height: auto; display: block; border-radius: var(--gt-radius); background: var(--gt-ink); }
.gt-video figcaption { margin-top: .7rem; font-size: .9rem; color: var(--gt-ink-soft); }
.gt-video--portrait video { max-width: 420px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   V8: Ablauf als verbundene Linie
   Variante von gt-numbered. Mobil senkrechte Linie, ab 760px waagerecht.
   -------------------------------------------------------------------------- */

.gt-numbered--flow { gap: 0; grid-template-columns: 1fr; }
.gt-numbered--flow > li { position: relative; grid-template-columns: 3rem 1fr; gap: 1.1rem; padding-bottom: 1.8rem; align-items: start; }
.gt-numbered--flow > li:last-child { padding-bottom: 0; }
.gt-numbered--flow > li::before {
  content: counter(gtnum, decimal-leading-zero);
  position: relative; z-index: 1;
  width: 3rem; height: 3rem; padding-top: 0;
  border-radius: 50%; border: 2px solid var(--gt-accent);
  background: var(--gt-surface-2);
  display: grid; place-items: center;
  font-size: .95rem; line-height: 1;
}
.gt-numbered--flow > li::after {
  content: ""; position: absolute;
  left: 1.5rem; top: 3rem; bottom: .2rem;
  width: 2px; margin-left: -1px;
  background: var(--gt-line);
}
.gt-numbered--flow > li:last-child::after { display: none; }

@media (min-width: 760px) {
  .gt-numbered--flow { grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
  .gt-numbered--flow--4 { grid-template-columns: repeat(4, 1fr); }
  .gt-numbered--flow > li { grid-template-columns: 1fr; gap: .9rem; padding-bottom: 0; }
  .gt-numbered--flow > li::after {
    left: 3.4rem; right: -1.8rem; top: 1.5rem; bottom: auto;
    width: auto; height: 2px; margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   V9: Zahlenleiste und Linkbox neu
   -------------------------------------------------------------------------- */

/* Zahlenleiste: vier Einzelkarten wirkten wie Kartensalat.
   Jetzt eine zusammenhängende Fläche mit Trennlinien und Messingstrich
   über der Zahl, gleiches Motiv wie beim Eyebrow. */
.gt-stats {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius);
  background: var(--gt-surface-2);
  overflow: hidden;
}
.gt-stats li {
  border: 0; border-radius: 0; background: transparent;
  border-top: 0;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.1rem, 3vw, 1.4rem);
  border-bottom: 1px solid var(--gt-line);
}
.gt-stats li:nth-child(odd) { border-right: 1px solid var(--gt-line); }
.gt-stats li:nth-last-child(-n+2) { border-bottom: 0; }
.gt-stats li::before { content: ""; display: block; width: 1.6rem; height: 2px; background: var(--gt-accent); margin-bottom: .7rem; }
.gt-stats b { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gt-stats span { margin-top: .35em; font-size: .87rem; color: var(--gt-ink-mute); }
@media (min-width: 760px) {
  .gt-stats { grid-template-columns: repeat(4, 1fr); }
  .gt-stats li { border-bottom: 0; border-right: 1px solid var(--gt-line); }
  .gt-stats li:last-child { border-right: 0; }
}
/* Direkt unter dem Hero soll die Leiste eng anschließen */
.gt-stats--tight { margin-top: calc(var(--gt-space) * -.55); }

/* Linkbox: der Bereich sah nach Fußnote aus, und die Gruppen erzeugten
   zusammen mit den zweispaltigen Listen versehentlich vier Spalten. */
.gt-linkbox {
  border-top: 0;
  background: var(--gt-surface);
  border-radius: var(--gt-radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
.gt-linkbox__title {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.15rem; font-weight: 700; margin: 0 0 1.2rem; color: var(--gt-ink);
}
.gt-linkbox__title::before { content: ""; width: 1.6rem; height: 2px; background: var(--gt-accent); flex: none; }
.gt-linkbox__group h3 { margin: 0 0 .7em; font-size: .95rem; font-weight: 700; color: var(--gt-ink); }
.gt-linkbox ul,
.gt-linkbox__group ul { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .gt-linkbox > ul { grid-template-columns: 1fr 1fr; gap: .5rem; } }
.gt-linkbox li a {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .8rem 1rem;
  background: var(--gt-surface-2);
  border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius-sm);
  color: var(--gt-ink); text-decoration: none; font-weight: 600; line-height: 1.4;
  transition: border-color .15s linear, background-color .15s linear;
}
.gt-linkbox li a::before { content: none; }
.gt-linkbox li a::after {
  content: ""; flex: none;
  width: .5rem; height: .5rem;
  border-right: 2.2px solid var(--gt-accent); border-bottom: 2.2px solid var(--gt-accent);
  transform: rotate(-45deg);
}
.gt-linkbox li a:hover, .gt-linkbox li a:focus { background: #fff; border-color: var(--gt-accent); color: var(--gt-accent-ink); text-decoration: none; }

/* --------------------------------------------------------------------------
   V10: USP-Zeile mit Icons
   Ersetzt die Pillen unter dem Hero. Pillen und Pill-Button konkurrierten,
   und bei drei Einträgen brach die Reihe unschön um.
   -------------------------------------------------------------------------- */

.gt-usps { display: grid; gap: .8rem 1.8rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
@media (min-width: 620px) {
  .gt-usps--2 { grid-template-columns: repeat(2, 1fr); }
  .gt-usps--3 { grid-template-columns: repeat(3, 1fr); }
}
.gt-usps li { display: flex; align-items: flex-start; gap: .65rem; font-size: .92rem; line-height: 1.4; color: var(--gt-ink-soft); }
.gt-usps li::before {
  content: ""; flex: none;
  width: 1.45rem; height: 1.45rem; margin-top: -.05em;
  background: var(--gt-accent);
  -webkit-mask: var(--gt-icon) center / contain no-repeat;
  mask: var(--gt-icon) center / contain no-repeat;
}
/* Größere Variante, etwa als eigener Abschnitt statt im Hero */
.gt-usps--lg li { font-size: 1rem; gap: .8rem; }
.gt-usps--lg li::before { width: 1.9rem; height: 1.9rem; }

/* Iconset. Klasse auf das li, das Icon kommt aus der Variablen. */
.gt-icon-shipping { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208h13v9H3z'/%3E%3Cpath%20d='M16%2011h3.2l1.8%202.4V17H16z'/%3E%3Ccircle%20cx='7'%20cy='18.5'%20r='1.7'/%3E%3Ccircle%20cx='18'%20cy='18.5'%20r='1.7'/%3E%3C/svg%3E"); }
.gt-icon-power { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='7'%20width='14'%20height='10'%20rx='2.5'/%3E%3Cpath%20d='M20%2010.5v3'/%3E%3Cpath%20d='M7.5%2012h6'/%3E%3C/svg%3E"); }
.gt-icon-hand { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020s-6.5-4.2-6.5-8.6A3.7%203.7%200%200%201%2012%208.8a3.7%203.7%200%200%201%206.5%202.6C18.5%2015.8%2012%2020%2012%2020z'/%3E%3C/svg%3E"); }
.gt-icon-clock { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.2'/%3E%3Cpath%20d='M12%207.2V12l3%201.9'/%3E%3C/svg%3E"); }
.gt-icon-check { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.2'/%3E%3Cpath%20d='M8.4%2012.2l2.5%202.5%204.7-4.9'/%3E%3C/svg%3E"); }
.gt-icon-globe { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8.2'/%3E%3Cpath%20d='M3.8%2012h16.4'/%3E%3Cpath%20d='M12%203.8c2.2%202.3%203.3%205.1%203.3%208.2S14.2%2017.9%2012%2020.2c-2.2-2.3-3.3-5.1-3.3-8.2S9.8%206.1%2012%203.8z'/%3E%3C/svg%3E"); }
.gt-icon-mic { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3.5'%20width='6'%20height='10'%20rx='3'/%3E%3Cpath%20d='M5.5%2011.5a6.5%206.5%200%200%200%2013%200'/%3E%3Cpath%20d='M12%2018v2.5'/%3E%3C/svg%3E"); }
.gt-icon-shield { --gt-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203.5l7%202.8v5c0%204.2-2.9%207.4-7%209.2-4.1-1.8-7-5-7-9.2v-5z'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   V12: Aktionszeile, Buttongrößen, Abstandshilfen
   -------------------------------------------------------------------------- */

/* Zentrierte Aktionszeile, etwa unter einem Kartenraster */
.gt-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem; margin-top: 1.8rem; }
.gt-actions--start { justify-content: flex-start; }

/* Große Variante für einen sekundären Weg, der trotzdem auffallen soll */
.gt-btn--lg { padding: 1.1em 2.2em; font-size: 1.02rem; }
.gt-btn--ghost { background: transparent; color: var(--gt-accent-ink); border-color: var(--gt-accent); }
.gt-btn--ghost:hover, .gt-btn--ghost:focus { background: var(--gt-accent); border-color: var(--gt-accent); color: var(--gt-on-accent); }

/* Abstandshilfen, damit kein Inline-CSS nötig ist */
.gt-mt { margin-top: 1rem; }
.gt-mt-lg { margin-top: 1.5rem; }

/* Hörprobe: die Bildspalte darf nicht leer bleiben, wenn kein Bild da ist */
.gt-audio--rich:not(:has(.gt-audio__art)) { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   V13: Preisangabe "ab"
   -------------------------------------------------------------------------- */

.gt-from { font-size: .42em; font-weight: 600; color: var(--gt-ink-mute); margin-right: .3em; vertical-align: .42em; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Magazin, ab Version 14
   Drei Module für die kuratierte Bloghubseite.
   -------------------------------------------------------------------------- */

/* Einstiege nach Situation. Große klickbare Kacheln statt Kategorienavigation. */
.gt-paths { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .gt-paths { grid-template-columns: repeat(3, 1fr); } }
.gt-paths > li { margin: 0; }
.gt-path {
  display: flex; flex-direction: column; gap: .45rem; height: 100%;
  padding: 1.4rem 1.4rem 1.5rem; text-decoration: none;
  background: var(--gt-surface-2); border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius); border-top: 3px solid var(--gt-accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gt-path:hover, .gt-path:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(47,43,38,.09); }
.gt-path__eyebrow { margin: 0; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gt-accent-ink); font-weight: 700; }
.gt-path__title { margin: 0; font-size: 1.18rem; line-height: 1.3; color: var(--gt-ink); font-weight: 700; }
.gt-path__text { margin: 0; color: var(--gt-ink-soft); font-size: .96rem; line-height: 1.5; }
.gt-path__more { margin-top: auto; padding-top: .5rem; color: var(--gt-accent-ink); font-weight: 600; font-size: .93rem; }

/* Aufmacher. Ein Stück groß, Bild und Text nebeneinander. */
.gt-feature {
  display: grid; gap: 0; grid-template-columns: 1fr; align-items: stretch;
  background: var(--gt-surface-2); border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius); overflow: hidden;
}
@media (min-width: 860px) { .gt-feature { grid-template-columns: 1.05fr 1fr; } }
.gt-feature__media { margin: 0; }
.gt-feature__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; display: block; background: var(--gt-line-soft); }
.gt-feature__body { padding: clamp(1.4rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.gt-feature__title { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.22; color: var(--gt-ink); }
.gt-feature__title a { color: inherit; text-decoration: none; }
.gt-feature__title a:hover, .gt-feature__title a:focus { color: var(--gt-accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.gt-feature__text { margin: 0; color: var(--gt-ink-soft); line-height: 1.6; }
.gt-feature__more { margin-top: .3rem; color: var(--gt-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Beitragsliste. Kompakt, mit Rubrik links und Trennlinien. */
.gt-postlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gt-line); }
.gt-postlist > li { margin: 0; border-bottom: 1px solid var(--gt-line); }
.gt-post { display: grid; gap: .15rem .9rem; grid-template-columns: 1fr; padding: .95rem .2rem; text-decoration: none; }
@media (min-width: 720px) { .gt-post { grid-template-columns: 8.5rem 1fr; align-items: baseline; padding: 1.05rem .2rem; } }
.gt-post:hover, .gt-post:focus-visible { background: var(--gt-surface-3); }
.gt-post__rubrik { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gt-ink-mute); font-weight: 700; padding-top: .15em; }
.gt-post__title { font-size: 1.03rem; line-height: 1.35; color: var(--gt-ink); font-weight: 600; }
.gt-post:hover .gt-post__title, .gt-post:focus-visible .gt-post__title { color: var(--gt-accent-ink); }
.gt-post__text { grid-column: 1 / -1; margin: .2rem 0 0; color: var(--gt-ink-soft); font-size: .94rem; line-height: 1.5; }
@media (min-width: 720px) { .gt-post__text { grid-column: 2 / -1; } }

/* Abschnittskopf mit Link nach rechts, für die Rubriken im Magazin. */
.gt-rail { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; margin: 0 0 .9rem; }
.gt-rail h2, .gt-rail h3 { margin: 0; }
.gt-rail__more { color: var(--gt-accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }

/* --------------------------------------------------------------------------
   Produktdetailseite, ab Version 15
   Buybox mit Galerie links und Kaufspalte rechts, dazu Stil-Chips.
   -------------------------------------------------------------------------- */

.gt-pdp { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .gt-pdp { grid-template-columns: 1.1fr .9fr; } }

.gt-pdp__media { margin: 0; display: grid; gap: .7rem; }
.gt-pdp__stage {
  margin: 0; border: 1px solid var(--gt-line); border-radius: var(--gt-radius);
  background: var(--gt-surface-2); overflow: hidden;
}
.gt-pdp__stage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.gt-pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; list-style: none; margin: 0; padding: 0; }
.gt-pdp__thumbs > li { margin: 0; }
.gt-pdp__thumbs figure { margin: 0; border: 1px solid var(--gt-line); border-radius: calc(var(--gt-radius) - 4px); overflow: hidden; background: var(--gt-surface-2); }
.gt-pdp__thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

.gt-pdp__buy { display: flex; flex-direction: column; gap: .9rem; }
@media (min-width: 900px) { .gt-pdp__buy { position: sticky; top: 1.5rem; } }
.gt-pdp__name { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.12; color: var(--gt-ink); }
.gt-pdp__claim { margin: 0; color: var(--gt-ink-soft); font-size: 1.02rem; line-height: 1.55; }
.gt-pdp__price { margin: .2rem 0 0; display: flex; align-items: baseline; gap: .4rem; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 700; color: var(--gt-ink); line-height: 1; }
.gt-pdp__price small { font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--gt-ink-mute); }
.gt-pdp__usps { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .45rem; }
.gt-pdp__usps > li { margin: 0; padding-left: 1.8rem; position: relative; color: var(--gt-ink-soft); font-size: .97rem; line-height: 1.45; }
.gt-pdp__usps > li::before {
  content: ""; position: absolute; left: 0; top: .4em; width: 1.05rem; height: .55rem;
  border-left: 2.5px solid var(--gt-ok); border-bottom: 2.5px solid var(--gt-ok);
  transform: rotate(-45deg);
}
.gt-pdp__box { margin-top: .4rem; padding: 1.1rem 1.2rem; background: var(--gt-surface-2); border: 1px solid var(--gt-line); border-radius: var(--gt-radius); border-top: 3px solid var(--gt-accent); }
.gt-pdp__box .gt-btn { width: 100%; text-align: center; }
.gt-pdp__fine { margin: .6rem 0 0; font-size: .86rem; color: var(--gt-ink-mute); line-height: 1.45; }
.gt-pdp__meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; padding: 0; list-style: none; }
.gt-pdp__meta > li { margin: 0; font-size: .8rem; letter-spacing: .02em; color: var(--gt-ink-soft); background: var(--gt-surface-3); border: 1px solid var(--gt-line); border-radius: 999px; padding: .28rem .7rem; }

/* Stil-Chips, etwa Deko-Richtungen und Locations */
.gt-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.gt-chips > li {
  margin: 0; padding: .42rem .85rem; font-size: .92rem; color: var(--gt-ink);
  background: var(--gt-surface-2); border: 1px solid var(--gt-line); border-radius: 999px;
}
.gt-chips--accent > li { border-color: var(--gt-accent); color: var(--gt-accent-ink); background: var(--gt-surface-3); }

/* --------------------------------------------------------------------------
   Korrekturen, ab Version 16
   -------------------------------------------------------------------------- */

/* Das Theme unterstreicht Links im Inhaltsbereich. Auf Buttons sieht das
   aus wie ein Textlink und schwächt den wichtigsten Klick der Seite. */
.gt-btn,
.gt-btn:hover,
.gt-btn:focus,
.gt-btn:visited { text-decoration: none; }

/* Abstände in der Buybox: Das Theme gibt p und ul eigene Außenabstände,
   die sich mit dem Grid-Gap addieren. Deshalb hier auf null und der
   Abstand kommt ausschließlich aus dem gap. */
.gt-pdp__buy > * { margin-top: 0; margin-bottom: 0; }
.gt-pdp__buy { gap: .75rem; }
.gt-pdp__price { margin: .1rem 0 0; }
.gt-pdp__usps { margin: 0; }
.gt-pdp__box { margin-top: .25rem; }
.gt-pdp__box p:last-child { margin-bottom: 0; }
.gt-pdp__meta { margin-top: .15rem; }

/* --------------------------------------------------------------------------
   Mobile Korrekturen, ab Version 17
   -------------------------------------------------------------------------- */

/* 1. Ablaufmodul: Ohne Wrapper-Element landete der Absatz durch die
   automatische Grid-Platzierung in der schmalen Zahlenspalte und brach
   nach jedem zweiten Buchstaben um. Alle Kinder gehören in Spalte zwei.
   Das funktioniert mit und ohne Wrapper. */
.gt-numbered > li > * { grid-column: 2; min-width: 0; }
@media (min-width: 760px) {
  .gt-numbered--flow > li > *,
  .gt-numbered--cols > li > * { grid-column: 1; }
}
.gt-steps > li > * { grid-column: 2; min-width: 0; }

/* 2. Ungleiche Kacheln: 1fr erlaubt Spalten, die breiter werden als ihr
   Anteil, sobald ein langes Wort nicht umbricht. minmax(0, 1fr) verhindert
   das und macht alle Spalten wirklich gleich breit. */
.gt-models, .gt-stats, .gt-cards, .gt-panels, .gt-paths,
.gt-examples, .gt-gallery, .gt-fit, .gt-versus, .gt-usps {
  grid-auto-columns: minmax(0, 1fr);
}
.gt-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gt-models--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gt-models--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (min-width: 760px) { .gt-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Drei Modelle auf schmalen Geräten: zwei oben, eines allein darunter
   sieht nach Fehler aus. Untereinander wirkt ruhiger. */
@media (max-width: 519px) {
  .gt-models--3 { grid-template-columns: minmax(0, 1fr); }
  .gt-models--3 .gt-model { flex-direction: row; align-items: center; text-align: left; gap: 1rem; }
  .gt-models--3 .gt-model__img { width: 5.5rem; max-width: 5.5rem; flex: none; margin: 0; }
  .gt-models--3 .gt-model__name { margin: 0; }
}

/* 3. USP-Zeile unter dem Hero-Button: Sie stand zu weit ab und war zu
   luftig für mobile Geräte. */
.gt-usps { margin-top: 1rem; gap: .55rem 1.8rem; }
.gt-usps li { font-size: .88rem; gap: .55rem; }
.gt-usps li::before { width: 1.25rem; height: 1.25rem; }
@media (min-width: 620px) { .gt-usps { margin-top: 1.5rem; gap: .8rem 1.8rem; } .gt-usps li { font-size: .92rem; } }

/* 4. Vertrauensleiste: Die Pillen wirkten wie Filterchips und zerfielen
   auf Mobilgeräten in ungleiche Reihen. Jetzt eine durchgehende Zeile
   mit Messingpunkten als Trenner. */
.gt-trust { align-items: center; gap: .35rem .9rem; }
.gt-trust li {
  border: 0; border-radius: 0; padding: 0; background: none;
  font-size: .86rem; letter-spacing: .01em; color: var(--gt-ink-soft);
  display: flex; align-items: center; gap: .9rem;
}
.gt-trust li::after {
  content: ""; width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--gt-accent); opacity: .55; flex: none;
}
.gt-trust li:last-child::after { display: none; }
/* Variante, falls die Leiste doch einmal als Pillen gebraucht wird */
.gt-trust--pills li { border: 1px solid var(--gt-line); border-radius: 999px; padding: .35em .9em; background: var(--gt-surface-2); }
.gt-trust--pills li::after { display: none; }

/* --------------------------------------------------------------------------
   Mobile Feinschliff, ab Version 18
   -------------------------------------------------------------------------- */

/* 1. Magazinboxen randlos.
   Der seitliche Einzug ließ die Kacheln schmal und eingeklemmt wirken.
   Auf schmalen Geräten laufen sie jetzt bis an den Bildschirmrand und
   behalten den Innenabstand. Betrifft nur die Magazinmodule. */
@media (max-width: 619px) {
  .gt-path, .gt-feature {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    border-left: 0; border-right: 0;
    border-radius: 0;
  }
  .gt-path { padding-inline: 1.25rem; }
  .gt-feature__body { padding-inline: 1.25rem; }
  .gt-paths { gap: .8rem; }
}

/* 2. USP-Zeile unter dem Hero-CTA.
   Sie stand frei im Raum und wirkte angehängt. Eine feine Linie darüber
   fasst sie als eigenen Block zusammen, ohne einen Kasten zu bauen. */
.gt-hero__actions + .gt-usps,
.gt-hero .gt-usps {
  margin-top: 1.15rem; padding-top: 1.05rem;
  border-top: 1px solid var(--gt-line);
}
@media (max-width: 619px) {
  .gt-hero .gt-usps { gap: .5rem; }
  .gt-hero .gt-usps li { align-items: center; }
}

/* 3. Tabellen als Karten.
   Vorher stand die Spaltenbezeichnung über dem Wert, wodurch jede Zeile
   drei Zeilen hoch wurde und die Karte sehr lang. Jetzt stehen Bezeichnung
   und Wert nebeneinander, der Wert bekommt mehr Kontrast, und die
   hervorgehobene Spalte ist wieder erkennbar. */
@media (max-width: 782px) {
  .gt-table tr { padding: 0; overflow: hidden; }
  .gt-table tbody th {
    padding: .7rem 1rem; font-size: .97rem; color: var(--gt-ink);
    border-bottom: 1px solid var(--gt-line);
  }
  .gt-table td {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: .3rem .9rem; align-items: baseline;
    padding: .6rem 1rem; color: var(--gt-ink);
  }
  .gt-table td::before {
    margin-bottom: 0; font-size: .78rem; font-weight: 600;
    letter-spacing: .02em; color: var(--gt-ink-mute);
    line-height: 1.35;
  }
  /* Die eigene Spalte bleibt auch als Karte markiert */
  .gt-table--hl2 tbody td:nth-child(2) {
    background: var(--gt-surface-3);
    border-left: 3px solid var(--gt-accent);
    padding-left: calc(1rem - 3px);
  }
  .gt-table--hl2 tbody td:nth-child(2)::before { color: var(--gt-accent-ink); }
}
/* Zellen ohne data-label, etwa in zweispaltigen Faktentabellen, bekommen
   keine leere Bezeichnungsspalte. */
@media (max-width: 782px) {
  .gt-table td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .gt-table td:not([data-label])::before { display: none; }
}

@media (max-width: 479px) {
  .gt-table td[data-label] { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}

/* --------------------------------------------------------------------------
   Ab Version 19
   -------------------------------------------------------------------------- */

/* 1. Buchungsbox: dieselbe Ursache wie in der Buybox. Das Theme vergibt
   an Absätze und Listen eigene Außenabstände, die sich mit dem Gitterabstand
   addieren. Der Abstand kommt jetzt ausschließlich aus dem gap. */
.gt-booking__body > * { margin-top: 0; margin-bottom: 0; }
.gt-booking__body { gap: .55rem; }
.gt-booking__amount { margin: 0; }
.gt-booking ul { margin: .25rem 0 0; }
.gt-booking .gt-btn { margin-top: .55rem; }
.gt-booking__fine { margin: 0; }
@media (max-width: 619px) {
  .gt-booking__body { padding: 1.3rem 1.25rem 1.45rem; gap: .5rem; }
  .gt-booking__media img { min-height: 180px; }
}

/* 2. Der schwebende Warenkorb-Knopf des Shops liegt unten rechts und
   überdeckte den Button in der Sticky-Leiste. Die Leiste hält jetzt
   rechts Platz frei. Falls der Knopf woanders sitzt, den Wert anpassen. */
@media (max-width: 782px) {
  .gt-sticky { padding-right: 4.6rem; }
  .gt-sticky .gt-btn { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Produktseite, Feinschliff ab Version 20
   -------------------------------------------------------------------------- */

/* 1. Abstände in der Kaufspalte, jetzt mit höherer Spezifität, damit sie
   Themeregeln sicher schlagen. Der Abstand kommt nur aus dem gap. */
.gt-pdp .gt-pdp__buy > * { margin-top: 0; margin-bottom: 0; }
.gt-pdp .gt-pdp__buy { gap: .7rem; }
.gt-pdp .gt-pdp__claim { margin: 0; }
.gt-pdp .gt-pdp__price { margin: .15rem 0 0; }
.gt-pdp .gt-pdp__usps { margin: .1rem 0 0; gap: .4rem; }
.gt-pdp .gt-pdp__usps > li { font-size: .96rem; line-height: 1.4; }
.gt-pdp .gt-pdp__box { margin-top: .35rem; }
.gt-pdp .gt-pdp__meta { margin-top: .2rem; }

@media (max-width: 619px) {
  .gt-pdp { gap: 1.2rem; }
  .gt-pdp .gt-pdp__buy { gap: .6rem; }
  .gt-pdp .gt-pdp__name { font-size: 1.75rem; }
  .gt-pdp .gt-pdp__claim { font-size: .97rem; }
  .gt-pdp .gt-pdp__price { font-size: 2rem; }
  .gt-pdp .gt-pdp__box { padding: 1rem 1.05rem; }
}

/* 2. Galerie auf schmalen Geräten.
   Vier feste Vorschaubilder unter einem großen Bild sehen aus wie ein
   Karussell, sind aber ohne JavaScript nicht klickbar. Als scrollbarer
   Streifen mit Einrastpunkten ist es ehrlich und spart Höhe. */
@media (max-width: 619px) {
  .gt-pdp__stage img { aspect-ratio: 4 / 3; }
  .gt-pdp__thumbs {
    display: flex; gap: .55rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .2rem;
  }
  .gt-pdp__thumbs::-webkit-scrollbar { display: none; }
  .gt-pdp__thumbs > li { flex: 0 0 38%; scroll-snap-align: start; }
}

/* 3. Die kleinen Merkmale unter dem Buchungskasten waren Pillen und damit
   der einzige Rest der alten Optik. Jetzt dieselbe Zeile mit Messingpunkten
   wie die Vertrauensleiste. */
.gt-pdp__meta { gap: .3rem .85rem; align-items: center; }
.gt-pdp__meta > li {
  border: 0; border-radius: 0; padding: 0; background: none;
  display: flex; align-items: center; gap: .85rem;
  font-size: .84rem; color: var(--gt-ink-soft);
}
.gt-pdp__meta > li::after {
  content: ""; width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--gt-accent); opacity: .55; flex: none;
}
.gt-pdp__meta > li:last-child::after { display: none; }

/* --------------------------------------------------------------------------
   Produktseite, Ausbau ab Version 21
   Modellwechsler, Datumsabfrage, Zusicherung, Ankernavigation
   -------------------------------------------------------------------------- */

/* Modellwechsler: alle Modelle als Reihe, das aktuelle hervorgehoben.
   Damit springt jemand zwischen Modellen, ohne zur Übersicht zu müssen. */
.gt-switch { display: flex; gap: .55rem; list-style: none; margin: 0; padding: .1rem 0 .3rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.gt-switch::-webkit-scrollbar { display: none; }
.gt-switch > li { flex: none; scroll-snap-align: start; margin: 0; }
.gt-switch a, .gt-switch span {
  display: grid; justify-items: center; gap: .3rem; width: 4.6rem;
  text-decoration: none; color: var(--gt-ink-soft); font-size: .74rem; line-height: 1.15; text-align: center;
}
.gt-switch img {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--gt-line); background: var(--gt-surface-2);
  transition: border-color .15s ease, transform .15s ease;
}
.gt-switch a:hover img, .gt-switch a:focus-visible img { border-color: var(--gt-accent); transform: translateY(-1px); }
.gt-switch .is-current img { border-color: var(--gt-accent); box-shadow: 0 0 0 3px var(--gt-surface-3); }
.gt-switch .is-current { color: var(--gt-ink); font-weight: 700; }

/* Datumsabfrage in der Buybox. Ein echtes Formular, das ohne Skript
   funktioniert. Booqable wird zusätzlich eingebunden, nicht anstelle. */
.gt-pdp__form { display: grid; gap: .55rem; }
.gt-pdp__form label { font-size: .84rem; font-weight: 600; color: var(--gt-ink); }
.gt-pdp__form input[type="date"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem;
  padding: .7em .85em; color: var(--gt-ink); background: var(--gt-surface);
  border: 1px solid var(--gt-line); border-radius: calc(var(--gt-radius) - 4px);
}
.gt-pdp__form input[type="date"]:focus { outline: 2px solid var(--gt-accent); outline-offset: 2px; }

/* Zusicherung unter dem Button: Stornobedingung und Lieferung in zwei
   Zeilen, weil das die zwei Fragen sind, die vor dem Klick offen sind. */
.gt-pdp__assure { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .3rem; }
.gt-pdp__assure > li { position: relative; padding-left: 1.35rem; font-size: .84rem; line-height: 1.45; color: var(--gt-ink-soft); }
.gt-pdp__assure > li::before {
  content: ""; position: absolute; left: .1rem; top: .5em; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--gt-ok); opacity: .8;
}

/* Bewertungszeile: schlicht, verlinkt, keine Sterne ohne echte Zahl. */
.gt-pdp__reviews { margin: 0; font-size: .86rem; color: var(--gt-ink-soft); }
.gt-pdp__reviews a { color: var(--gt-accent-ink); font-weight: 600; }

/* Ankernavigation innerhalb der Seite: eine Zeile, scrollbar, klebt
   auf größeren Geräten unter dem Kopf. */
.gt-anchors { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .35rem 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--gt-line); border-bottom: 1px solid var(--gt-line); }
.gt-anchors::-webkit-scrollbar { display: none; }
.gt-anchors > li { flex: none; margin: 0; }
.gt-anchors a {
  display: block; padding: .45rem .8rem; border-radius: 999px; white-space: nowrap;
  font-size: .88rem; font-weight: 600; color: var(--gt-ink-soft); text-decoration: none;
}
.gt-anchors a:hover, .gt-anchors a:focus-visible { background: var(--gt-surface-3); color: var(--gt-accent-ink); }
@media (min-width: 900px) { .gt-anchors { position: sticky; top: 0; z-index: 5; background: var(--gt-surface); } }

/* Hörprobe direkt unter der Buybox: etwas kompakter als das Band. */
.gt-pdp-audio .gt-audio { margin-top: 0; }

/* --------------------------------------------------------------------------
   Ab Version 22
   -------------------------------------------------------------------------- */

/* Beschriftung über dem Buchungselement. Booqable erlaubt nur eine globale
   Buttonbeschriftung, den Modellnamen liefern wir deshalb selbst. */
.gt-pdp__buylabel {
  margin: 0 0 .6rem; font-size: .92rem; font-weight: 700; color: var(--gt-ink);
  display: flex; align-items: center; gap: .55rem;
}
.gt-pdp__buylabel::before { content: ""; width: 1.2rem; height: 2px; background: var(--gt-accent); flex: none; }

/* Modellwechsler sitzt jetzt unter der Buybox und bekommt etwas Luft
   sowie eine feine Linie, damit er als eigener Bereich lesbar ist. */
.gt-switch { padding-top: .9rem; border-top: 1px solid var(--gt-line); }

/* --------------------------------------------------------------------------
   Ab Version 23
   -------------------------------------------------------------------------- */

/* Galerie mit beliebig vielen Bildern.
   Vorher ein starres Vierer-Raster, das bei einer oder zwei Aufnahmen
   unnatürlich breite Kacheln erzeugte. Jetzt feste Kachelbreite in einer
   umbrechenden Reihe, damit ein, zwei, drei oder sechs Bilder gleich
   aussehen. */
.gt-pdp__thumbs { display: flex; flex-wrap: wrap; gap: .6rem; }
.gt-pdp__thumbs > li { flex: 0 0 5.4rem; max-width: 5.4rem; }
@media (max-width: 619px) {
  .gt-pdp__thumbs { flex-wrap: nowrap; }
  .gt-pdp__thumbs > li { flex: 0 0 5rem; max-width: 5rem; }
}

/* --------------------------------------------------------------------------
   Ab Version 24
   Galerie mit Vergrößerung, ohne JavaScript, und Einsatzbilder
   -------------------------------------------------------------------------- */

/* Vergrößerung über :target. Der Anker öffnet die Ebene, ein Klick auf den
   Hintergrund oder auf Schließen führt zurück. Funktioniert im Block
   "Individuelles HTML", weil kein Skript gebraucht wird. */
.gt-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 27, 24, .88);
}
.gt-lightbox:target { display: flex; }
.gt-lightbox__bg { position: absolute; inset: 0; cursor: zoom-out; }
.gt-lightbox figure { position: relative; margin: 0; max-width: min(92vw, 60rem); max-height: 86vh; }
.gt-lightbox img {
  display: block; max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--gt-radius); background: var(--gt-surface-2);
}
.gt-lightbox figcaption {
  margin-top: .7rem; color: #f3efe9; font-size: .9rem; text-align: center;
  display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap;
}
.gt-lightbox figcaption a { color: #f3efe9; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.gt-lightbox__close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  background: rgba(255,255,255,.92); color: var(--gt-ink); font-size: 1.3rem; line-height: 1;
}
.gt-lightbox__close:hover, .gt-lightbox__close:focus-visible { background: #fff; }

/* Vorschaubilder sind jetzt Links */
.gt-pdp__thumbs a, .gt-pdp__stage a { display: block; cursor: zoom-in; }
.gt-pdp__thumbs figure { transition: border-color .15s ease; }
.gt-pdp__thumbs a:hover figure, .gt-pdp__thumbs a:focus-visible figure { border-color: var(--gt-accent); }
.gt-pdp__zoom {
  margin: .5rem 0 0; font-size: .82rem; color: var(--gt-ink-mute);
}

/* Einsatzbilder: echte Fotos von Feiern, bewusst getrennt von den
   Produktaufnahmen. */
.gt-shots { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .gt-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gt-shots > li { margin: 0; }
.gt-shots figure { margin: 0; border: 1px solid var(--gt-line); border-radius: var(--gt-radius); overflow: hidden; background: var(--gt-surface-2); }
.gt-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gt-shots a { display: block; cursor: zoom-in; }
.gt-shots a:hover figure, .gt-shots a:focus-visible figure { border-color: var(--gt-accent); }

/* --------------------------------------------------------------------------
   Ab Version 25
   Übersichtsseite der Modelle
   -------------------------------------------------------------------------- */

/* Beratende Kacheln: Empfehlung je Anlass, führt direkt zum Modell. */
.gt-advice { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) { .gt-advice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .gt-advice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gt-advice > li { margin: 0; }
.gt-advice a {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .3rem 1rem;
  height: 100%; align-content: start; padding: 1.1rem 1.2rem; text-decoration: none;
  background: var(--gt-surface-2); border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius); border-left: 3px solid var(--gt-accent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gt-advice a:hover, .gt-advice a:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(47,43,38,.09); }
.gt-advice img { grid-row: 1 / 4; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; background: var(--gt-surface-3); }
.gt-advice__anlass { margin: 0; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gt-ink-mute); font-weight: 700; }
.gt-advice__modell { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--gt-ink); line-height: 1.25; }
.gt-advice__warum { margin: 0; font-size: .93rem; color: var(--gt-ink-soft); line-height: 1.5; }

/* Modellraster mit Preis und Merkmalen */
.gt-plp { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .gt-plp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gt-plp { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gt-plp > li { margin: 0; }
.gt-plp__card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none;
  background: var(--gt-surface-2); border: 1px solid var(--gt-line);
  border-radius: var(--gt-radius); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gt-plp__card:hover, .gt-plp__card:focus-visible { transform: translateY(-2px); border-color: var(--gt-accent); box-shadow: 0 10px 26px rgba(47,43,38,.10); }
.gt-plp__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--gt-surface-3); }
.gt-plp__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.gt-plp__name { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--gt-ink); line-height: 1.2; }
.gt-plp__farbe { margin: 0; font-size: .82rem; color: var(--gt-ink-mute); }
.gt-plp__text { margin: .15rem 0 0; font-size: .9rem; color: var(--gt-ink-soft); line-height: 1.45; }
.gt-plp__foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gt-plp__preis { font-weight: 700; color: var(--gt-ink); }
.gt-plp__preis small { font-weight: 400; font-size: .75rem; color: var(--gt-ink-mute); }
.gt-plp__mehr { font-size: .88rem; font-weight: 600; color: var(--gt-accent-ink); }
.gt-plp__card:hover .gt-plp__mehr { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Ab Version 26
   Modellleiste als eigenständiger Block
   -------------------------------------------------------------------------- */

/* Variante ohne Überschrift und ohne Trennlinie, zentriert.
   Bricht auf schmalen Geräten um, statt seitwärts zu scrollen. Beim
   Scrollen wäre sonst das erste Modell angeschnitten, sobald zentriert
   wird. */
.gt-switch--center {
  border-top: 0; padding-top: 0;
  flex-wrap: wrap; justify-content: center;
  overflow: visible;
  gap: .9rem .5rem;
  /* Schrumpft auf die Breite der Bubbles und wird als Ganzes zentriert.
     Damit kann kein umgebender Container die Elemente auseinanderziehen,
     egal welche Ausrichtung dort gesetzt ist.

     Steht das Modul direkt im Inhalt statt in einem Container, ist 100%
     die volle Seitenbreite — dann haelt gt-blocks.css es aufs Raster,
     siehe scripts/gt-bridge.py. */
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.gt-switch--center > li { flex: 0 0 auto; scroll-snap-align: none; }


/* --------------------------------------------------------------------------
   Ab Version 28
   -------------------------------------------------------------------------- */

/* Größere Bubbles für die Startseite. Auf den Produktseiten bleibt die
   Leiste klein, dort ist sie Navigation neben dem Produkt. Auf der
   Startseite ist sie ein eigener Abschnitt und darf Platz bekommen. */
.gt-switch--center a, .gt-switch--center span { width: 6.6rem; font-size: .82rem; gap: .45rem; }
.gt-switch--center img { width: 5.4rem; height: 5.4rem; border-width: 3px; }
@media (min-width: 900px) {
  .gt-switch--center a, .gt-switch--center span { width: 7.6rem; font-size: .86rem; }
  .gt-switch--center img { width: 6.4rem; height: 6.4rem; }
  .gt-switch--center { gap: 1rem .7rem; }
}

/* --------------------------------------------------------------------------
   Ab Version 29
   Modellleiste auf Mobilgeräten als scrollbares Karussell
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .gt-switch--center {
    /* Eine Reihe, seitwärts scrollbar. Die Zentrierung von oben wird
       zurückgenommen, sonst wäre beim Scrollen das erste Modell
       angeschnitten statt des letzten. */
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    padding-inline: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: .55rem;
  }
  .gt-switch--center::-webkit-scrollbar { display: none; }
  .gt-switch--center > li { scroll-snap-align: start; }

  /* Vier Bubbles passen, die fünfte wird angeschnitten. Genau das macht
     sichtbar, dass es weitergeht. */
  .gt-switch--center a, .gt-switch--center span { width: 5.2rem; font-size: .78rem; }
  .gt-switch--center img { width: 4.6rem; height: 4.6rem; border-width: 2px; }

  /* Rechts ausblenden, damit der Anschnitt nicht wie ein Fehler aussieht */
  .gt-switch--center {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
}
@media (max-width: 400px) {
  .gt-switch--center a, .gt-switch--center span { width: 4.8rem; font-size: .74rem; }
  .gt-switch--center img { width: 4.2rem; height: 4.2rem; }
}

/* --------------------------------------------------------------------------
   Ab Version 30
   Modellleiste, robuste Struktur gegen fremde Bildlinks
   -------------------------------------------------------------------------- */

/* Problem: Manche WordPress-Erweiterungen verlinken Bilder im Inhalt
   automatisch auf die Mediendatei. Liegt unser Bild im Link, entsteht ein
   Link im Link. Das ist ungültig, der Browser bricht den äußeren Link ab,
   und ein Klick auf das Bild landet auf der Bilddatei statt auf der Seite.

   Lösung: Das Bild liegt NICHT mehr im Link. Der Link umfasst nur den
   Namen und legt sich über die ganze Kachel. Das Bild nimmt keine Klicks
   mehr an, damit ein fremder Bildlink wirkungslos bleibt.
   Das alte Markup funktioniert weiterhin, die Regeln darunter greifen nur
   bei direkten Kindern von li. */

.gt-switch > li { position: relative; display: grid; justify-items: center; align-content: start; gap: .3rem; }
.gt-switch > li > img {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--gt-line); background: var(--gt-surface-2);
  pointer-events: none;
  transition: border-color .15s ease, transform .15s ease;
}
.gt-switch > li > a,
.gt-switch > li > span {
  width: auto; display: block; text-align: center; line-height: 1.15;
  font-size: .74rem; color: var(--gt-ink-soft); text-decoration: none;
}
.gt-switch > li > a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.gt-switch > li:hover > img { border-color: var(--gt-accent); transform: translateY(-1px); }
.gt-switch > li > a:focus-visible { outline: 2px solid var(--gt-accent); outline-offset: 3px; border-radius: 4px; }
.gt-switch > li.is-current > img { border-color: var(--gt-accent); box-shadow: 0 0 0 3px var(--gt-surface-3); }
.gt-switch > li.is-current > span { color: var(--gt-ink); font-weight: 700; }

/* Größen der zentrierten Variante auf die neue Struktur übertragen */
.gt-switch--center > li { width: 6.6rem; }
.gt-switch--center > li > img { width: 5.4rem; height: 5.4rem; border-width: 3px; }
.gt-switch--center > li > a, .gt-switch--center > li > span { font-size: .82rem; }
@media (min-width: 900px) {
  .gt-switch--center > li { width: 7.6rem; }
  .gt-switch--center > li > img { width: 6.4rem; height: 6.4rem; }
  .gt-switch--center > li > a, .gt-switch--center > li > span { font-size: .86rem; }
}
@media (max-width: 767px) {
  .gt-switch--center > li { width: 5.2rem; }
  .gt-switch--center > li > img { width: 4.6rem; height: 4.6rem; border-width: 2px; }
  .gt-switch--center > li > a, .gt-switch--center > li > span { font-size: .78rem; }
}
@media (max-width: 400px) {
  .gt-switch--center > li { width: 4.8rem; }
  .gt-switch--center > li > img { width: 4.2rem; height: 4.2rem; }
  .gt-switch--center > li > a, .gt-switch--center > li > span { font-size: .74rem; }
}

/* --------------------------------------------------------------------------
   Ab Version 31
   Bildvergrößerung ohne Anker
   -------------------------------------------------------------------------- */

/* Warum die Umstellung:
   Die erste Fassung öffnete und schloss über Anker und :target. Astra
   fängt Klicks auf Sprungmarken ab, um sanft zu scrollen, und verhindert
   dabei das Setzen der Adresse. Folge: Die Ebene ging auf, ließ sich aber
   nicht mehr schließen, die Seite sprang nur hin und her.

   Jetzt steuert eine versteckte Checkbox die Ebene. Labels statt Links,
   also keine Sprungmarke, die abgefangen werden könnte. Weiterhin ohne
   JavaScript und damit im Block "Individuelles HTML" lauffähig. */

.gt-lb {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
}
.gt-lb:checked + .gt-lightbox { display: flex; }

.gt-lightbox label { cursor: pointer; }
.gt-lightbox__bg { cursor: zoom-out; }
.gt-lightbox figcaption label {
  color: #f3efe9; text-decoration: underline; text-underline-offset: 3px; font-weight: 600;
}

/* Auslöser in Galerie, Vorschaubildern und Einsatzbildern */
.gt-pdp__stage > label, .gt-pdp__thumbs label, .gt-shots label { display: block; cursor: zoom-in; }
.gt-pdp__thumbs label figure, .gt-shots label figure { transition: border-color .15s ease; }
.gt-pdp__thumbs label:hover figure, .gt-shots label:hover figure { border-color: var(--gt-accent); }

/* Tastaturbedienung: Die Checkbox bleibt erreichbar. Mit Tab anspringen,
   mit Leertaste öffnen und wieder schließen. */
.gt-lb:focus-visible + .gt-lightbox { outline: 2px solid var(--gt-accent); }