*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --blue: #1c6bb8;
  --blue-dk: #0c3665;
  --blue-mid: #155baa;
  --blue-lt: #d8ecf9;
  --blue-xlt: #edf6fd;
  --red: #c8102e;
  --red-dk: #9e0c24;
  /* Heller Rot-Akzent für Text auf dunklen Flächen (Kontrast ≥3:1). */
  --red-lt: #ff4d6d;
  --gold: #f5c842;
  --gold-dk: #d4a010;
  /* Semantische Status-Farben (v. a. CMS): Erfolg/Warnung/Fehler. */
  --ok: #166534;
  --green: #2d7d46;
  --warn: #b45309;
  --amber: #b45309;
  --err: #b91c1c;
  --wine: #8e2244;
  --wine-lt: #b8395d;
  --wine-br: #d76c87; /* helleres Weinrot für dunkle Hintergründe (Lesbarkeit) */
  --white: #ffffff;
  --cream: #faf5eb;
  --cream-border: #e8dfc8;
  --text: #0c1e33;
  --text-md: #354c63;
  /* 4,5:1 auch auf der hellgrauen Fläche (#eef2f7) — der frühere Wert
     #637a8f lag mit 4,46:1 bzw. 3,97:1 knapp darunter. */
  --text-sm: #5b7184;
  --border: #d0e4f2;
  --sh1: 0 2px 12px rgba(12, 54, 101, 0.09), 0 1px 4px rgba(12, 54, 101, 0.05);
  --sh2: 0 6px 28px rgba(12, 54, 101, 0.13), 0 2px 8px rgba(12, 54, 101, 0.06);
  --sh3:
    0 16px 52px rgba(12, 54, 101, 0.17),
    0 4px 16px rgba(12, 54, 101, 0.08);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --font-h: "Nunito", sans-serif;
  --font-b: "DM Sans", sans-serif;
  --max-w: 1280px;
}
html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-b);
  color: var(--text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  font-family: var(--font-b);
  cursor: pointer;
}
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 18px;
  }
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f0f6fc;
}
::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 3px;
}

/* ══ HEADER ══ */
/* ── Highlight-Band (schlanke Kacheln über den Angeboten) ──
   Karussell-Ersatz: mehrere Highlights gleichzeitig sichtbar. Liegt im selben
   Creme-Fluss wie die Angebote (kein eigener Hintergrund) und ist bewusst
   kompakt + optisch leichter, damit die Angebote der zentrale Block bleiben.
   Symmetrische Abstände oben/unten. `--accent` je Kachel aus dem Symbol. */
.gq-highlight {
  padding: 44px 0;
}
.gq-highlight-grid {
  display: grid;
  /* 300 statt 248: Bei 248 passten auf mittleren Fenstern zwei Kacheln
     nebeneinander, die dann so schmal waren, dass der Titel alle zwei Wörter
     umbrach. Lieber eine Kachel weniger je Reihe. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.gq-highlight-card {
  --accent: #1c6bb8;
  position: relative;
  display: flex;
  align-items: center;
  /* Umbrechend bei JEDER Breite: Wird die Kachel eng, rutscht der Knopf in
     eine eigene Zeile, statt den Text auf Briefmarkenbreite zu quetschen.
     Vorher galt das erst unter 560 px Fensterbreite — die Kachel kann aber
     auch auf einem breiten Bildschirm schmal sein, weil das Raster mehrere
     nebeneinander legt. Entscheidend ist die Kachel, nicht das Fenster. */
  flex-wrap: wrap;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--accent);
  box-shadow: 0 5px 18px rgba(12, 54, 101, 0.06);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.gq-highlight-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(12, 54, 101, 0.13);
}
.gq-highlight-ic {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--accent);
  background: #eef3f8;
  background: color-mix(in srgb, var(--accent) 13%, #fff);
}
.gq-highlight-ic svg {
  width: 25px;
  height: 25px;
}
.gq-highlight-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Untergrenze für den Text: Unterschreitet die Kachel sie, bricht der Knopf
     um. Ohne diese Grenze gewinnt immer der Knopf (white-space: nowrap). */
  flex: 1 1 165px;
  min-width: 165px;
}
.gq-highlight-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.2;
}
.gq-highlight-text {
  font-family: var(--font-b);
  font-size: 12.5px;
  color: var(--text-sm);
  line-height: 1.35;
}
.gq-highlight-cta {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .gq-highlight {
    padding: 30px 0;
  }
  /* Auf dem Handy unter dem Text ausrichten statt rechts — dort steht die
     Kachel allein und der Blick läuft die linke Kante entlang. */
  .gq-highlight-cta {
    width: 100%;
    margin-left: 0;
    padding-left: 57px;
  }
}

.gq-header {
  background: linear-gradient(180deg, #0c1e33 0%, #0f2540 100%);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid rgba(28, 107, 184, 0.3);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.gq-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--red) 0%,
    #ff4d6d 50%,
    var(--red) 100%
  );
}
.gq-header.scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  border-color: rgba(28, 107, 184, 0.15);
}

/* ── Ankündigungs-Leiste (über dem Header) ──
   Schmaler, wegklickbarer Streifen für EINE aktuelle Botschaft. Liegt im
   normalen Fluss über dem sticky Header: scrollt oben weg, danach dockt der
   Header an. Marken-Rot mit dezentem Shine + pulsierendem Gold-Punkt. */
.gq-announce {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 46px 9px 18px;
  background: linear-gradient(
    90deg,
    var(--red-dk) 0%,
    var(--red) 35%,
    var(--red-lt) 50%,
    var(--red) 65%,
    var(--red-dk) 100%
  );
  background-size: 220% 100%;
  color: #fff;
  text-align: center;
  animation: gq-announce-shine 9s linear infinite;
}
@keyframes gq-announce-shine {
  to {
    background-position: 220% 0;
  }
}
.gq-announce-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: 100%;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.35;
}
.gq-announce-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.7);
  animation: gq-announce-pulse 2s ease-out infinite;
}
@keyframes gq-announce-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(245, 200, 66, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 200, 66, 0);
  }
}
.gq-announce-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.2s;
}
.gq-announce-link:hover .gq-announce-cta {
  background: rgba(255, 255, 255, 0.32);
}
.gq-announce-x {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gq-announce-x:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
@media (max-width: 640px) {
  .gq-announce {
    padding: 8px 38px 8px 12px;
    gap: 8px;
  }
  .gq-announce-link {
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px 9px;
    font-size: 12.5px;
  }
  .gq-announce-cta {
    font-size: 12px;
    padding: 2px 9px;
  }
}
/* Der Zustimmungsbanner fuhr auch dann hoch, wenn Bewegung abbestellt ist. */
@media (prefers-reduced-motion: reduce) {
  .gq-consent {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gq-announce,
  .gq-announce-dot {
    animation: none;
  }
}
.gq-hinner {
  height: 76px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.gq-logo-lnk {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Der <picture>-Wrapper des Logos darf nicht selbst zum Flex-Element werden —
   sonst greifen Höhe und Breite am <img> nicht (gleiche Falle wie bei .gq-kpic). */
.gq-logopic {
  display: contents;
}
.gq-logo {
  height: 44px;
  width: auto;
}
.gq-logo-kroni {
  height: 62px;
  width: auto;
  margin-right: -4px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s;
}
.gq-logo-lnk:hover .gq-logo-kroni {
  transform: rotate(-8deg) scale(1.05);
}
.gq-nav {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}
.gq-navlnk {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: all 0.18s;
  white-space: nowrap;
  position: relative;
}
.gq-navlnk:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.gq-navlnk.active {
  color: #fff;
  background: rgba(28, 107, 184, 0.25);
}
.gq-navlnk.active::before {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
/* Jobs — hervorgehoben */
.gq-navlnk-jobs {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: #22c55e;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
  white-space: nowrap;
  transition: all 0.18s;
  margin-left: 4px;
}
.gq-navlnk-jobs:hover {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.6);
  color: #4ade80;
}
.gq-navlnk-jobs.active {
  background: rgba(34, 197, 94, 0.22);
  border-color: #22c55e;
}
.gq-hactions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
}
.gq-mktbtn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--blue);
  color: #fff;
  padding: 9px 18px;
  min-height: 44px; /* WCAG-Touch-Ziel */
  min-width: 44px;
  border-radius: 40px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
.gq-mktbtn:hover {
  background: var(--blue-mid);
  box-shadow: 0 4px 16px rgba(28, 107, 184, 0.35);
}
.gq-mkt-locpulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: locpulse 1.8s ease-in-out infinite;
}
@keyframes locpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}
.gq-mktname {
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gq-mktdrop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh3);
  border: 1px solid var(--border);
  min-width: 320px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 2000;
}
/* Scrollbar an die abgerundete Bubble anpassen: der globale, gefüllte Track
   (#f0f6fc) würde als eckiges Rechteck bis in die runden Ecken laufen. Hier
   stattdessen transparenter Track + schlanker, abgesetzter Thumb (Overlay-Look),
   damit die runde Ecke durchscheint. */
.gq-mktdrop {
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}
.gq-mktdrop::-webkit-scrollbar {
  width: 10px;
}
.gq-mktdrop::-webkit-scrollbar-track {
  background: transparent;
}
.gq-mktdrop::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 99px;
  /* transparente Border + padding-box = Thumb wird schmaler und schwebt mit
     Abstand, berührt die runden Ecken nicht */
  border: 3px solid transparent;
  background-clip: padding-box;
}
.gq-mktdrop::-webkit-scrollbar-thumb:hover {
  background: var(--wine);
  background-clip: padding-box;
}
.gq-mktdrop-hdr {
  padding: 11px 16px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-sm);
  border-bottom: 1px solid var(--border);
}
/* Gewählter Markt – Kontakt griffbereit oben im Markt-Dropdown
   (Adresse, Öffnungszeiten, Anruf-Button, Link zur Marktseite). */
.gq-mktdrop-cur {
  padding: 12px 16px;
  background: var(--blue-xlt);
  border-bottom: 1px solid var(--blue-lt);
}
.gq-mktdrop-cur-name {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.gq-mktdrop-cur-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-family: var(--font-b);
  font-size: 12px;
  color: var(--text-md);
  line-height: 1.4;
}
.gq-mktdrop-cur-meta svg {
  flex-shrink: 0;
  color: var(--blue);
}
.gq-mktdrop-cur-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.gq-mktdrop-cur-call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
}
.gq-mktdrop-cur-call:hover {
  background: var(--blue-mid);
}
.gq-mktdrop-cur-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--blue);
  text-decoration: none;
}
.gq-mktdrop-cur-more:hover {
  text-decoration: underline;
}
/* Auf dem Handy sind das die wichtigsten Aktionen (anrufen, Route) – darum
   echte 44px-Touch-Ziele (die globale .gq-btn-Regel greift hier nicht). */
@media (max-width: 640px) {
  .gq-mktdrop-cur-call,
  .gq-mktdrop-cur-more {
    min-height: 44px;
  }
}
.gq-mktopt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.14s;
  /* Button-Reset: Optionen sind <button> für Tastaturbedienung. */
  width: 100%;
  text-align: left;
  background: #fff;
  font: inherit;
}
.gq-mktopt:last-child {
  border-bottom: none;
}
.gq-mktopt:hover {
  background: var(--blue-xlt);
}
.gq-mktopt.sel {
  background: var(--blue-xlt);
}
.gq-mktopt-n {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.gq-mktopt-a {
  font-size: 11px;
  color: var(--text-sm);
}
.gq-mktchk {
  color: var(--blue);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  font-weight: 900;
}
.gq-srchbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  color: var(--text-sm);
  transition: all 0.18s;
}
.gq-srchbtn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-xlt);
}
.gq-mtoggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 44px; /* WCAG-Touch-Ziel */
  min-height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .gq-nav {
    display: none;
  }
  .gq-mtoggle {
    display: flex !important;
  }
}
@media (max-width: 560px) {
  .gq-logo {
    height: 48px;
  }
  .gq-hinner {
    height: 66px;
    gap: 10px;
  }
  .gq-mktname {
    max-width: 80px;
  }
}

/* Slightly enlarge visual scale on all subpages (except home) */
body[class^="page-"]:not(.page-home) {
  /* increase relative font-size for rem-based elements */
  font-size: 1.04em;
}
body[class^="page-"]:not(.page-home) .gq-hero-h1 {
  font-size: clamp(52px, 7.5vw, 92px);
}
body[class^="page-"]:not(.page-home) .gq-hero-p {
  font-size: 18px;
}
.gq-mmenu {
  background: #0c1e33;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0 20px;
}
.gq-mmenu-lnk {
  display: block;
  padding: 13px 0;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.18s;
}
.gq-mmenu-lnk:hover {
  color: #fff;
}
.gq-msel {
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231c6bb8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  appearance: none;
}

/* ══ BUTTONS ══ */
.gq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--r-sm);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
}
.gq-btn-pr {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.gq-btn-pr:hover {
  background: var(--blue-mid);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 107, 184, 0.32);
}
.gq-btn-wh {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
}
.gq-btn-wh:hover {
  background: var(--blue-lt);
  transform: translateY(-2px);
}
.gq-btn-rd {
  background: linear-gradient(
    180deg,
    #e01734 0%,
    var(--red) 55%,
    var(--red-dk) 100%
  );
  color: #fff;
  border-color: transparent;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow:
    0 4px 14px rgba(200, 16, 46, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.gq-btn-rd:hover {
  background: linear-gradient(
    180deg,
    #f01e3e 0%,
    #d4112f 55%,
    var(--red-dk) 100%
  );
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(200, 16, 46, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.gq-btn-rd:active {
  transform: translateY(0);
  box-shadow:
    0 3px 10px rgba(200, 16, 46, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Kräftigere, dunklere Rot-Variante (z. B. Schritte-CTA). */
.gq-btn-deep {
  background: linear-gradient(
    180deg,
    var(--red) 0%,
    var(--red-dk) 58%,
    #7c0a1d 100%
  );
  box-shadow:
    0 4px 14px rgba(124, 10, 29, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.gq-btn-deep:hover {
  background: linear-gradient(
    180deg,
    #d31533 0%,
    #9c0c23 58%,
    #74091b 100%
  );
  box-shadow:
    0 10px 28px rgba(124, 10, 29, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.gq-btn-ol {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.gq-btn-ol:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}
.gq-btn-ghost {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
}
.gq-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-2px);
}
.gq-btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}
.gq-btn-lg {
  padding: 14px 30px;
  font-size: 16px;
}
/* Sichtbarer Tastatur-Fokus auf ÖFFENTLICHEN Buttons/Links (a11y – bisher nur
   im Admin gelöst). Heller Ring + dunkler Halo → sichtbar sowohl auf dem
   dunklen Hero/Blau als auch auf der hellen Holz-/Weißfläche. Nur bei
   Tastatur-Fokus (:focus-visible), Maus-Klicks bleiben unverändert. */
.gq-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(12, 54, 101, 0.6);
}
/* Nav-/Logo-Links liegen auf dem DUNKLEN Header – ein mittelblauer Ring hätte
   dort < 3:1 Kontrast (WCAG 1.4.11). Daher derselbe doppelte Ring wie bei den
   Buttons: heller Outline (auf Dunkel sichtbar) + blauer Halo. */
.gq-navlnk:focus-visible,
.gq-navlnk-jobs:focus-visible,
.gq-logo-lnk:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(28, 107, 184, 0.7);
  border-radius: 6px;
}
/* Eingabefelder auf hellem Grund – Basis-Border/Padding kommen aus dem
   Inline-Style der Felder, hier nur der Tastatur-Fokus. */
.gq-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
}
/* Hinweis: das mobile 44px-Touch-Ziel für .gq-btn ist bereits weiter unten im
   640px-Block definiert – hier bewusst NICHT erneut, um keine Dublette zu haben. */

/* ══ HERO ══ */
.gq-hero {
  background: var(--blue-dk);
  /* Vertikal (180°): dunkles Navy oben → helles Marken-Blau (Logo-Blau) unten.
     Die Unterkante ist gleichmäßig #2a7ac6 und trifft damit exakt die solide
     Wellenfüllung darunter (Wave fill in index.tsx) – keine Naht am Übergang.
     Der obere Bereich bleibt dunkel genug für hohen Weiß-Kontrast bei
     Kicker/Headline. */
  background-image: linear-gradient(
    180deg,
    #0a2e56 0%,
    #1a63ad 50%,
    #2a7ac6 100%
  );
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.gq-hero-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 0 0;
  position: relative;
  z-index: 1;
  width: 100%;
}
.gq-hero-body {
  flex: 1;
  min-width: 0;
  padding-bottom: 44px;
}
.gq-hero-kicker {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #fff;
  margin-bottom: 16px;
}
.gq-hero-h1 {
  font-family: "Barlow Condensed", var(--font-h), sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.95;
  margin-bottom: 20px;
  text-wrap: balance;
}
.gq-hero-h1 .accent {
  color: var(--red-lt);
}
.gq-hero-p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.gq-hero-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gq-hero-markt {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13.5px;
  font-family: var(--font-h);
  font-weight: 600;
}
.gq-hero-markt svg {
  color: var(--red-lt);
  flex-shrink: 0;
}
.gq-hero-markt strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}
.gq-hero-right {
  flex-shrink: 0;
  width: 380px;
  align-self: flex-end;
  position: relative;
}
.gq-hero-right img {
  width: 100%;
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.5));
  transform-origin: bottom center;
}
body[class^="page-"]:not(.page-home) .gq-hero-right {
  width: 220px;
}
@media (max-width: 900px) {
  .gq-hero-right {
    width: 240px;
  }
}
@media (max-width: 660px) {
  .gq-hero-right {
    display: none;
  }
  .gq-hero-body {
    padding-bottom: 40px;
  }
  .gq-hero-in {
    padding: 40px 0 0;
  }
}

/* ══ WAVE DIVIDER ══ */
.gq-wave {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.gq-wave svg {
  display: block;
  width: 100%;
}

/* ══ SECTIONS ══ */
.gq-sec {
  padding: 80px 0;
}
.gq-sec-sm {
  padding: 52px 0;
}
@media (max-width: 768px) {
  .gq-sec {
    padding: 52px 0;
  }
  .gq-sec-sm {
    padding: 36px 0;
  }
}

/* ══ SECTIONS mit Holzmaserung ══ */
/* Basis: warmes Off-White — konsistent für alle hellen Sektionen */
:root {
  --bg-warm: #fefcf8;
  --bg-cream: #f9ede0;
}

/* Holzmaserung — WICHTIG: in ihrer ECHTEN Größe kacheln, nicht dehnen.
 *
 * Vorher stand hier `background-size: 100% auto`. Die Maserung ist 1200 px
 * breit; auf einem 2500-px-Bildschirm wurde sie damit auf mehr als das
 * Doppelte gezogen — und weil `auto` die Höhe mitzieht, gleich in beiden
 * Richtungen. Aus feiner Maserung wurden dabei breite, schmierige Querbänder:
 * je größer der Bildschirm, desto grober. Bei genau 1200 px sah sie richtig aus,
 * überall sonst nicht.
 *
 * `filterUnits='userSpaceOnUse'` mit x/y/width/height legt die Filterregion
 * exakt auf das Rechteck. Ohne das ist sie 10 % größer als das Bild, `stitchTiles`
 * stitcht dann an der falschen Kante — und beim Kacheln lief eine sichtbare
 * senkrechte Naht durch die Fläche. Mit deckungsgleicher Region ist sie nahtlos.
 *
 * Deckkraft (0.32) und Frequenzen bleiben wie gestaltet — der Fehler war allein
 * die Skalierung. */
.bg-white {
  background-color: #f6efe3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='560'%3E%3Cfilter id='w' filterUnits='userSpaceOnUse' x='0' y='0' width='1200' height='560'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.34' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.26 0 0 0 0 0.08 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='1200' height='560' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 1200px 560px;
  background-repeat: repeat;
}
.bg-cream {
  background-color: #f1e6d0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='560'%3E%3Cfilter id='w' filterUnits='userSpaceOnUse' x='0' y='0' width='1200' height='560'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.34' numOctaves='4' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.38 0 0 0 0 0.22 0 0 0 0 0.05 0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='1200' height='560' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: 1200px 560px;
  background-repeat: repeat;
}
.bg-blue {
  background-color: #0c3665;
  background-image: none;
}
.bg-dark {
  background-color: #080c10;
  background-image:
    radial-gradient(
      ellipse 320px 320px at 8% 20%,
      rgba(200, 16, 46, 0.18),
      transparent 70%
    ),
    radial-gradient(
    ellipse 280px 280px at 92% 15%,
    rgba(184, 57, 93, 0.14),
    transparent 70%
  ),
    radial-gradient(
    ellipse 400px 300px at 50% 80%,
    rgba(28, 107, 184, 0.16),
    transparent 70%
  ),
    radial-gradient(
    ellipse 200px 200px at 78% 55%,
    rgba(200, 16, 46, 0.10),
    transparent 70%
  ),
    radial-gradient(
    ellipse 160px 160px at 22% 72%,
    rgba(184, 57, 93, 0.09),
    transparent 70%
  );
  position: relative;
  overflow: hidden;
}
/* Bokeh-Lichter */
.bg-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle 3px at 12% 18%,
      rgba(184, 57, 93, 0.7) 0%,
      transparent 100%
    ),
    radial-gradient(
    circle 2px at 28% 42%,
    rgba(255, 255, 255, 0.5) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 4px at 45% 12%,
    rgba(200, 16, 46, 0.8) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 2px at 63% 35%,
    rgba(184, 57, 93, 0.6) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 3px at 78% 22%,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 2px at 88% 48%,
    rgba(200, 16, 46, 0.7) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 5px at 18% 65%,
    rgba(28, 107, 184, 0.5) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 2px at 35% 78%,
    rgba(184, 57, 93, 0.6) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 3px at 55% 58%,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 4px at 72% 75%,
    rgba(200, 16, 46, 0.6) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 2px at 90% 85%,
    rgba(184, 57, 93, 0.5) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 6px at 5% 88%,
    rgba(28, 107, 184, 0.4) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 3px at 40% 95%,
    rgba(200, 16, 46, 0.5) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 2px at 58% 88%,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  ),
    radial-gradient(
    circle 4px at 95% 30%,
    rgba(184, 57, 93, 0.55) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}
/* Konfetti-Streifen */
.bg-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, rgba(184, 57, 93, 0.06) 1px, transparent 1px),
    linear-gradient(225deg, rgba(200, 16, 46, 0.05) 1px, transparent 1px),
    linear-gradient(45deg, rgba(28, 107, 184, 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 60px 60px;
  pointer-events: none;
  z-index: 0;
  animation: confettidrift 20s linear infinite;
}
@keyframes confettidrift {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 80px 80px, -120px 120px, 60px -60px;
  }
}
.bg-dark > * {
  position: relative;
  z-index: 1;
}

/* bg-blue-m = alias */
.bg-blue-m {
  background-color: var(--blue);
  background-image: linear-gradient(
    160deg,
    var(--blue-dk) 0%,
    var(--blue) 100%
  );
}

/* ══ ANGEBOTE (PROSPEKT STYLE) ══
   Edles Anthrazit statt Signalrot – wird überall verwendet, wo der
   Prospekt-Kasten auftaucht (Startseite + /angebote). */
:root {
  --slate: #343b46;
  --slate-dk: #272d36;
}
.gq-prospekt-header {
  background: linear-gradient(180deg, var(--slate) 0%, var(--slate-dk) 100%);
  color: #fff;
  padding: 18px 28px;
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* feine Goldkante als edler Akzent */
  border-bottom: 2px solid var(--wine-lt);
}
.gq-prospekt-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: -0.02em;
}
.gq-prospekt-validity {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 5px 14px;
  border-radius: 40px;
}
.gq-prospekt-body {
  background: rgba(251, 244, 233, 0.55);
  border-radius: 0 0 var(--r) var(--r);
  border: 2px solid var(--slate-dk);
  border-top: none;
  padding: 18px 24px 24px;
}
.gq-prospekt-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 2px;
}
.gq-sec-cta {
  text-align: center;
  margin-top: 28px;
}

/* Markt-Hinweisbanner über dem Angebots-Grid */
.gq-mktnote {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r);
  padding: 10px 16px;
  margin-bottom: 18px;
  font-family: var(--font-h);
}
.gq-mktnote--set {
  background: linear-gradient(90deg, #eef6ff 0%, #f0f9ff 100%);
  border: 1.5px solid #bfdbfe;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a5f;
}
.gq-mktnote--empty {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sm);
}
.gq-mktnote a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.gq-mktnote-name {
  color: var(--blue-dk);
}
.gq-mktnote-switch {
  margin-left: auto;
  font-size: 12px;
  white-space: nowrap;
}

/* Ergebniszeile (Anzahl + Preishinweis) */
.gq-count-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.gq-count-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
.gq-count-cat {
  color: var(--text-sm);
  font-weight: 600;
}
.gq-count-note {
  font-size: 12.5px;
  color: var(--text-sm);
}

/* ══ OFFER CARDS (e-commerce style) ══ */
/* Responsive auto-fill: 4 cols on wide screens, scaling down gracefully —
   ideal when a whole prospekt (~30 offers) is shown at once. */
.gq-ogrid-real {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-auto-flow: dense; /* Doppelkacheln (span 2) reißen sonst Lücken. */
  gap: 18px;
}
@media (max-width: 640px) {
  .gq-ogrid-real {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}

/* ── Mengenstaffel-Doppelkachel (komplett neu) ────────────────────────────
   Belegt zwei Rasterspalten. Aufbau: obere Leiste (Fahne, Warengruppe, Herz),
   darunter „main", unten die Fuß-Leiste. main = HERO (großes Produktbild +
   Name) und LEITER (Preisstufen). Beide füllen die Höhe automatisch → die
   Kachel ist genauso hoch wie die Nachbarkacheln, ohne leeren Raum.
   Breit (Container ≥540px): Bild links | Leiter rechts.
   Schmal: Bild oben, Leiter darunter (Preistreppe). */
.gq-staffel {
  grid-column: span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh1);
}
.gq-staffel.is-top {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.22) inset, var(--sh1);
}
/* container-type auf den INNEREN Wrapper (nicht auf die Karte), damit der
   Schlagschatten in allen Browsern rendert (WebKit beschneidet ihn sonst). */
.gq-staffel-inner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  border-radius: var(--r);
  overflow: hidden;
}
.gq-staffel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 8px;
}
.gq-staffel-flag {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  background: var(--red);
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(226, 0, 26, 0.3);
  white-space: nowrap;
}
.gq-staffel-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gq-staffel-cat {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-xlt);
  border: 1px solid var(--blue-lt);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.gq-staffel-cart {
  flex: 0 0 auto;
}

/* main: schmal = untereinander (Bild oben, Preistreppe unten) */
.gq-staffel-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── HERO (Bild + Name) ── */
.gq-staffel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px 12px;
}
.gq-staffel-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  background: #fff;
  border: 1px solid var(--blue-lt);
  border-radius: 14px;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gq-staffel-thumb img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gq-staffel-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 60%;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(12, 20, 30, 0.28),
    rgba(12, 20, 30, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
}
.gq-staffel-headinfo {
  flex: 1 1 auto;
  min-width: 0;
}
.gq-staffel-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  color: var(--text);
}
.gq-staffel-name span {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-sm);
}
.gq-staffel-size {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-md);
}
.gq-staffel-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.gq-staffel-headprice {
  flex: 0 0 auto;
  text-align: right;
  margin-left: auto;
}
.gq-staffel-was {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  color: var(--text-sm);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

/* ── LEITER / Preistreppe ── */
.gq-staffel-cols {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.gq-staffel-col {
  /* 1 0 auto = füllt zusätzliche Höhe (gestreckte Kachel), schrumpft aber NIE
     unter den eigenen Inhalt → auf dem Handy überlappen die Stufen nicht. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 9px 15px;
  border-bottom: 1px solid var(--border);
}
/* Menge links; Ersparnis-Pille sitzt darunter (statt unter dem Preis) → die
   Stufen bleiben flach, damit die Doppelkachel so hoch wie eine Normalkachel
   werden kann. */
.gq-staffel-qty {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
}
.gq-staffel-col:last-child {
  border-bottom: 0;
}
.gq-staffel-banner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.15;
  color: var(--text);
  text-align: left;
}
.gq-staffel-tag {
  align-self: flex-start;
  font-family: var(--font-h);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--red);
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.gq-staffel-colbody {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  text-align: right;
}
.gq-staffel-price {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: #161616;
  padding: 6px 12px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.gq-staffel-je {
  font-size: 9.5px;
  font-weight: 800;
  color: #cfd4da;
  margin-right: 3px;
}
.gq-staffel-cur {
  font-size: 12px;
  margin-left: 1px;
}
.gq-staffel-base {
  font-size: 10.5px;
  color: var(--text-sm);
}
.gq-staffel-save {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  color: #fff;
  background: var(--red);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(226, 0, 26, 0.28);
}
.gq-staffel-col.is-best {
  background: linear-gradient(90deg, rgba(226, 0, 26, 0.07), transparent 70%);
}

/* ── Fuß-Leiste ── */
.gq-staffel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #fbfdff;
  font-size: 11.5px;
  color: var(--text-sm);
}
.gq-staffel-bulk {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  color: var(--red);
}
.gq-staffel-foot-pfand {
  margin-left: auto;
}
.gq-staffel--feat {
  text-decoration: none;
  color: inherit;
}

/* ── BREIT: Bild links | Preistreppe rechts ──
   Grenze bewusst niedrig (440px), damit die etwas schmalere Doppelkachel auch
   auf der Startseite (2 von 4 Spalten) und auf schmaleren Desktops horizontal
   geteilt wird – sonst stapelt sie (Bild über Treppe) und wird zu hoch. */
@container (min-width: 440px) {
  .gq-staffel-main {
    flex-direction: row;
    align-items: stretch;
  }
  .gq-staffel-head {
    flex: 1 1 34%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 8px 14px 14px;
    border-right: 1px solid var(--border);
  }
  .gq-staffel-thumb {
    width: 100%;
    height: auto;
    /* basis 0 + min-height 0: das Bild trägt NICHT zur natürlichen Kachelhöhe
       bei (sonst zieht die Bild-Eigenhöhe via flex `min-height: auto` die
       Kachel hoch). So ist die natürliche Staffel-Höhe = Preistreppe ≈ Normal-
       kachel → auf der Startseite gleich hoch. In gestreckten Kacheln (z. B.
       /angebote neben großen Karten) wächst das Bild per flex-grow trotzdem. */
    flex: 1 1 0;
    min-height: 0;
    max-height: 260px;
    border-radius: 16px;
    padding: 12px;
  }
  .gq-staffel-headinfo {
    flex: 0 0 auto;
    text-align: center;
  }
  .gq-staffel-name {
    font-size: 19px;
  }
  .gq-staffel-stickers {
    justify-content: center;
  }
  .gq-staffel-headprice {
    margin-left: 0;
    margin-top: 2px;
    text-align: center;
  }
  .gq-staffel-cols {
    flex: 1 1 66%;
    border-top: 0;
  }
  .gq-staffel-col {
    padding: 12px 18px;
  }
  .gq-staffel-price {
    font-size: 20px;
    padding: 7px 14px;
  }
  .gq-staffel-cur {
    font-size: 14px;
  }
}

/* ── Blaue Marken-Variante (Kachel-Farbe = „Blau") ── */
.gq-staffel--blue {
  background: linear-gradient(160deg, #2f7cc4 0%, #1c5aa0 68%, #124680 100%);
  border-color: transparent;
}
.gq-staffel--blue .gq-staffel-cat {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.gq-staffel--blue .gq-staffel-name {
  color: #fff;
}
.gq-staffel--blue .gq-staffel-name span,
.gq-staffel--blue .gq-staffel-size,
.gq-staffel--blue .gq-staffel-base {
  color: #d6e6f5;
}
.gq-staffel--blue .gq-staffel-was {
  color: #c2d8ef;
}
.gq-staffel--blue .gq-staffel-thumb {
  border-color: rgba(255, 255, 255, 0.5);
}
.gq-staffel--blue .gq-staffel-head {
  border-right-color: rgba(255, 255, 255, 0.18);
}
.gq-staffel--blue .gq-staffel-cols {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.gq-staffel--blue .gq-staffel-col {
  border-color: rgba(255, 255, 255, 0.16);
}
.gq-staffel--blue .gq-staffel-banner {
  color: #fff;
}
.gq-staffel--blue .gq-staffel-col.is-best {
  background: rgba(255, 255, 255, 0.08);
}
.gq-staffel--blue .gq-staffel-foot {
  background: rgba(255, 255, 255, 0.06);
  border-top-color: rgba(255, 255, 255, 0.18);
  color: #c2d8ef;
}
.gq-staffel--blue .gq-staffel-bulk {
  color: #fff;
}

.gq-ocard-real {
  position: relative;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: var(--sh1);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s,
    border-color 0.3s;
}
.gq-ocard-real:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh3);
  border-color: var(--blue-lt);
}

/* category tag (top-left) */
/* Gemeinsame Zeile über dem Produktbild: Warengruppe links, Zusatz/Spar-
   Plakette rechts – garantiert überlappungsfrei (Warengruppe kürzt mit „…"). */
.gq-ocard-toprow {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.gq-ocard-cat {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(237, 246, 253, 0.92);
  border: 1px solid var(--blue-lt);
  padding: 4px 9px;
  border-radius: 40px;
  backdrop-filter: blur(4px);
}

/* Aktions-Badge (top-right, rote Pille) – z. B. NEU / AKTION. */
.gq-ocard-badge {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 11px;
  color: #fff;
  background: var(--red);
  padding: 5px 10px;
  border-radius: 40px;
  box-shadow: 0 3px 10px rgba(226, 0, 26, 0.3);
  white-space: nowrap;
}

/* Reinweiß, ohne Verlauf, Regal-Schatten oder Drop-Shadow: Die Produktfotos
   aus den Aktions-CSVs sind JPEGs mit weißem Hintergrund – jede Tönung oder
   ein Rechteck-Schatten hebt sie als harte Kästen ab. Auf Weiß gehen sie
   nahtlos in die Karte über. */
.gq-ocard-real-img {
  position: relative;
  overflow: hidden;
  height: 244px;
  display: flex;
  /* flex-end = das Produkt „steht" unten (auf dem Schatten); mehr Abstand oben,
     damit es nicht hinter dem Kategorie-Schild klebt. */
  align-items: flex-end;
  justify-content: center;
  padding: 22px 14px 12px;
  background: #fff;
}
/* Blur-up-Vorschau: liegt hinter dem Produktbild und blendet sich aus, sobald
   das richtige Bild geladen ist. Sie ist nur 24 Punkte breit (wenige hundert
   Byte) — die Weichzeichnung macht der Browser. Das leichte Vergrößern
   verdeckt die ausgefransten Ränder, die ein Weichzeichner am Rand erzeugt.
   Setzt voraus, dass das umgebende Element position:relative trägt. */
.gq-img-blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: blur(12px);
  transform: scale(1.06);
  pointer-events: none;
  animation: gq-blur-auf 0.25s ease both;
}
@keyframes gq-blur-auf {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gq-img-blur {
    animation: none;
  }
}

.gq-ocard-real-img img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-ocard-real:hover .gq-ocard-real-img img {
  transform: scale(1.06) translateY(-2px);
}
/* Weicher Boden-/Kontaktschatten unter dem (freigestellten) Produkt, damit es
   nicht aufgeklebt wirkt. Liegt HINTER dem Bild: bei Freistellern (transparent)
   sichtbar, bei Fotos mit weißem Hintergrund dezent verdeckt. */
.gq-ocard-real-img::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  width: 58%;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(12, 20, 30, 0.26),
    rgba(12, 20, 30, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
}
/* Kiste: breiterer, flacherer Boden-Schatten (Flaschen/Dosen bleiben schmal). */
.gq-ocard-real-img--crate::after {
  width: 80%;
  height: 20px;
  bottom: 11px;
}

/* Top-Angebot: kräftiger Rahmen + Band oben (voll breit, wie in der Vorschau).
   Die Warengruppe/Spar-Plakette rutschen bei Top-Angeboten unter das Band. */
/* Top-Angebot: weiße Karte mit rotem „TOP-ANGEBOT"-Band + rotem Rahmen-Akzent. */
.gq-ocard-real.is-top {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(226, 0, 26, 0.22) inset, var(--sh1);
}
.gq-ocard-real.is-top:hover {
  border-color: var(--red);
}
.gq-ocard-top {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  background: var(--red);
  padding: 5px 8px;
}
.gq-ocard-real.is-top .gq-ocard-toprow {
  top: 34px;
}

/* Blaue Marken-Kachel-Variante (Kachel-Farbe = „Blau") für normale Angebote:
   Produkt auf weißem Panel, dunkles Preis-Tag bleibt (gut lesbar auf Blau). */
.gq-ocard-real--blue {
  border-color: transparent;
  background: linear-gradient(160deg, #2f7cc4 0%, #1c5aa0 68%, #124680 100%);
}
.gq-ocard-real--blue:hover {
  border-color: transparent;
}
.gq-ocard-real--blue .gq-ocard-real-img {
  background: #fff;
  margin: 22px 14px 0;
  border-radius: 12px;
  height: 192px;
  padding: 10px 10px 10px;
}
.gq-ocard-real--blue .gq-ocard-name {
  color: #fff;
}
.gq-ocard-real--blue .gq-ocard-sub,
.gq-ocard-real--blue .gq-ocard-size {
  color: #d6e6f5;
}
.gq-ocard-real--blue .gq-ocard-cat {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.gq-ocard-real--blue .gq-ocard-ptag-old {
  color: #c2d8ef;
}
.gq-ocard-real--blue .gq-ocard-real-foot {
  background: rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.18);
}
.gq-ocard-real--blue .gq-ocard-real-pfand {
  color: #c2d8ef;
}
.gq-ocard-real--blue .gq-ocard-cart {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* Aktions-Sticker (Produktzugaben, Vorteilspreis …) über dem Produktbild. */
.gq-ocard-stickers {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  max-width: calc(100% - 20px);
}
.gq-ocard-sticker {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  background: var(--blue);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 5px 11px;
  box-shadow: 0 3px 10px rgba(28, 107, 184, 0.35);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* AktionsartenEditor-Modal: Konfiguration + Live-Vorschau nebeneinander,
   auf schmalen Screens untereinander. */
@media (max-width: 720px) {
  .gq-aktion-body {
    grid-template-columns: 1fr !important;
  }
  .gq-aktion-preview {
    border-left: none !important;
    border-top: 1px solid var(--border);
  }
}

/* body */
.gq-ocard-body {
  padding: 14px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.gq-ocard-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.01em;
}
.gq-ocard-sub {
  font-size: 12px;
  color: var(--text-md);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gq-ocard-size {
  font-size: 11.5px;
  color: var(--text-sm);
}

/* CI-Preis-Tag (Prospekt-Optik): rote „−X €"-Pille + durchgestrichenes
   Original, darunter das dunkle Preis-Tag mit weißem Preis. */
.gq-ocard-ptag {
  /* auto = Preis-Pille sitzt bei ALLEN Karten unten bündig (unabhängig von
     Name-/Sorten-Länge), damit sie über die Reihe fluchtet. */
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
}
.gq-ocard-ptag-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.gq-ocard-ptag-save {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  /* Ersparnis-Pille: jetzt schwarz (Preis-Pille trägt das Rot). */
  background: #161616;
  border-radius: 999px;
  padding: 3px 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}
.gq-ocard-ptag-old {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sm);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.gq-ocard-ptag-price {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 21px;
  line-height: 1;
  color: #fff;
  /* Preis-Pille: jetzt Marken-Rot (vorher schwarz). */
  background: var(--red);
  padding: 6px 13px;
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
  letter-spacing: -0.01em;
}
.gq-ocard-ptag-cur {
  font-size: 14px;
  margin-left: 2px;
}

.gq-ocard-real-foot {
  margin-top: 10px;
  padding: 11px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  background: #fbfdff;
}
.gq-ocard-real-pfand {
  font-size: 11px;
  color: var(--text-sm);
}
.gq-ocard-cart {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: var(--blue-xlt);
  color: var(--blue);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.gq-ocard-cart:hover {
  background: var(--blue);
  color: #fff;
  transform: scale(1.08);
}
/* Gemerkt: rotes, gefülltes Herz. */
.gq-ocard-cart.on {
  background: var(--red);
  color: #fff;
}
.gq-ocard-cart.on:hover {
  background: var(--red-dk);
}
/* "Gemerkt"-Filterchip in der Chip-Leiste. */
.gq-chip-merk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gq-chip-merk:not(.on) svg {
  color: var(--red);
}
.gq-chip-merk.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.gq-chip-merk.on .gq-chip-ct {
  color: #fff;
}

/* ══ MARKT BAND ══ */
.gq-mktband {
  border-radius: var(--r-lg);
  padding: 48px 56px;
  display: flex;
  align-items: center;
  gap: 36px;
  overflow: hidden;
  position: relative;
}
.gq-mktband--glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.gq-mktband-body {
  flex: 1;
  position: relative;
  z-index: 1;
}
.gq-mktband-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.gq-mktband-meta-row {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gq-mktband-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 6px;
}
.gq-mktband-sub {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
}
/* Markt-Besonderheiten (nur W&S) im „Dein Markt"-Band – heller Chip-Stil. */
.gq-mktband-feats {
  margin: 0 0 22px;
}
.gq-mktband-feats-ttl {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* 50 % Weiß ergab auf dem Bandblau (#1f4671) nur 3,7:1 — bei 10,5 px fett
     verfehlt das WCAG AA (4,5:1). 0,72 kommt auf 5,0:1 und bleibt trotzdem
     erkennbar zurückgenommen. */
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 9px;
}
.gq-mktband-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gq-mktband-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 40px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}
.gq-mktband-chip svg {
  color: #6ee7a0;
  flex-shrink: 0;
}
.gq-mktband-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.gq-mktband-sel {
  flex: 1;
  min-width: 220px;
  max-width: 340px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  border: none;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%231c6bb8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  appearance: none;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}
.gq-mktband-kroni {
  width: 200px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.gq-mktband-kroni img {
  width: 100%;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.4));
}
@media (max-width: 768px) {
  .gq-mktband {
    flex-direction: column;
    padding: 32px 24px;
    text-align: center;
    border-radius: var(--r);
  }
  .gq-mktband-row {
    justify-content: center;
  }
  .gq-mktband-kroni {
    display: none;
  }
}

/* ══ WOHLFÜHL CARDS (Sortiment/Gutscheine/Jobs) ══ */
.gq-wcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .gq-wcard-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .gq-wcard-grid {
    grid-template-columns: 1fr;
  }
}
.gq-wcard {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  cursor: pointer;
}
.gq-wcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
  border-color: var(--blue-lt);
}
.gq-wcard-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
}
.gq-wcard-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.gq-wcard-dsc {
  font-size: 14.5px;
  color: var(--text-md);
  flex: 1;
  line-height: 1.65;
}

/* ══ FEATURE STRIP (Partyplaner etc.) ══ */
.gq-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 768px) {
  .gq-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.gq-feature-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gq-feature-img img {
  max-width: 340px;
  width: 100%;
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.4));
}
@media (max-width: 560px) {
  /* Im 1-spaltigen CTA das Maskottchen kleiner halten, damit Text + Button
     im sichtbaren Bereich bleiben (payback, service). */
  .gq-feature-img img {
    max-width: 200px;
  }
}

/* Sortiment: Kategorie-Grid + CTA-Buttons (responsiv). */
.gq-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 48px;
}
.gq-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  .gq-cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 36px;
  }
  .gq-cta-actions {
    flex-direction: column;
  }
  .gq-cta-actions .gq-btn {
    width: 100%;
  }
}

/* ══ SO EINFACH GEHT'S – 3-Schritte-Ablauf (Home) ══ */
/* Karte hebt die 3 Schritte klar von der Holz-/Creme-Textur ab. */
.gq-steps-card {
  max-width: 1040px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh2);
  padding: 48px 48px 44px;
}
.gq-steps-hdr {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 52px;
}
.gq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gq-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}
/* gestrichelte Verbindungslinie hinter den Icon-Kreisen */
.gq-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 50%;
  width: calc(100% + 24px);
  height: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    var(--blue-lt) 0 8px,
    transparent 8px 16px
  );
  z-index: 0;
}
.gq-step-ic {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--blue-dk) 0%, var(--blue) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh2);
  margin-bottom: 22px;
}
.gq-step-ic svg {
  width: 34px;
  height: 34px;
}
.gq-step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dk) 100%);
  color: var(--text);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(12, 54, 101, 0.2);
}
.gq-step-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 7px;
}
.gq-step-dsc {
  font-size: 14.5px;
  color: var(--text-md);
  line-height: 1.6;
  max-width: 240px;
}
@media (max-width: 720px) {
  .gq-steps-card {
    padding: 32px 20px 30px;
  }
  .gq-steps {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 340px;
    margin: 0 auto;
  }
  .gq-step:not(:last-child)::after {
    display: none;
  }
}

/* ══ INFO CARDS ══ */
.gq-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 660px) {
  .gq-info-grid {
    grid-template-columns: 1fr;
  }
}
.gq-info-card {
  border-radius: var(--r-lg);
  padding: 28px 32px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.gq-info-card-white {
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh1);
}
.gq-info-card-blue {
  background: var(--blue-xlt);
  border: 1.5px solid var(--blue-lt);
}
.gq-info-card-img {
  width: 140px;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
}
.gq-info-card-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
}
.gq-info-card-dsc {
  font-size: 14px;
  color: var(--text-md);
  line-height: 1.65;
  margin-bottom: 16px;
}

/* ══ DARK SERVICE GRID ══ */
.gq-dark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) {
  .gq-dark-grid {
    grid-template-columns: 1fr;
  }
}
.gq-dark-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r);
  padding: 24px;
  transition: background 0.2s, transform 0.2s;
}
.gq-dark-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}
.gq-dark-card-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  margin-bottom: 5px;
}
.gq-dark-card-dsc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.55;
}
.gq-feature-p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.gq-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ══ PAYBACK ══ */
.gq-payback {
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1.5px solid var(--cream-border);
  border-left: 5px solid var(--wine-lt);
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.gq-payback-logo {
  height: 56px;
  width: auto;
  object-fit: contain;
}
.gq-payback-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 4px;
}
.gq-payback-sub {
  font-size: 14px;
  color: var(--text-md);
}

/* ══ FILTER CHIPS ══ */
.gq-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Sprungziel für /angebote?cat=… — der Kopfbereich klebt oben, ohne Abstand
   verschwände die Filterleiste beim Anspringen darunter. */
#angebote {
  scroll-margin-top: 96px;
}
.gq-chip {
  padding: 8px 18px;
  border-radius: 40px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text-md);
  transition: all 0.18s;
  white-space: nowrap;
}
.gq-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.gq-chip.on {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: 0 2px 12px rgba(28, 107, 184, 0.28);
}
.gq-chip-ct {
  display: inline-block;
  margin-left: 6px;
  /* Aufgehellt (25 % Weiß) ergab auf dem blauen Chip nur 3,4:1 und auf dem
     roten „Gemerkt"-Chip 4,2:1 — beides unter der WCAG-Schwelle von 4,5:1
     für die weiße Zahl. Abgedunkelt statt aufgehellt: 8:1 auf Blau, 8,7:1
     auf Rot, und die Zahl bleibt als eigene Plakette erkennbar. */
  background: rgba(0, 0, 0, 0.24);
  border-radius: 40px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
}
.gq-chip:not(.on) .gq-chip-ct {
  background: var(--blue-lt);
  /* --blue auf --blue-lt sind 4,49:1 — um ein Hundertstel zu wenig. */
  color: var(--blue-dk);
}

/* ══ SUCHLEISTE (Angebote) ══ */
.gq-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.gq-search-ic {
  position: absolute;
  left: 16px;
  width: 19px;
  height: 19px;
  color: var(--text-sm);
  pointer-events: none;
}
.gq-search-input {
  width: 100%;
  padding: 13px 46px;
  border: 1.5px solid var(--border);
  border-radius: 40px;
  background: #fff;
  font-family: var(--font-b);
  font-size: 15px;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.gq-search-input::placeholder {
  color: var(--text-sm);
}
.gq-search-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 107, 184, 0.15);
}
/* Native Browser-Such-X ausblenden – wir nutzen einen eigenen Clear-Button. */
.gq-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.gq-search-clear {
  position: absolute;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--blue-xlt);
  color: var(--blue);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gq-search-clear:hover {
  background: var(--blue);
  color: #fff;
}
@media (max-width: 640px) {
  .gq-search-input {
    /* 16px verhindert das automatische Zoomen von iOS beim Fokus. */
    font-size: 16px;
    padding: 12px 44px;
  }
}

/* ══ ANGEBOTE PAGE ══ */
.gq-apghero {
  background: var(--blue-dk);
  /* Vertikaler Verlauf (180°) wie der Startseiten-Hero: dunkles Navy oben →
     helles Marken-Blau (#2a7ac6) unten. Die Unterkante ist gleichmäßig #2a7ac6
     und trifft die solide Wellenfüllung darunter (SubHero.tsx) exakt – keine
     Naht. Oben dunkel genug für hohen Weiß-Kontrast bei Eyebrow/Headline. */
  background-image: linear-gradient(
    180deg,
    #0a2e56 0%,
    #1a63ad 50%,
    #2a7ac6 100%
  );
  padding: 44px 0 56px;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.gq-apghero-in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  /* Einheitliche Hero-Höhe über alle Unterseiten (Referenz: Märkte). Kurze
     Heroes (z. B. Jobs) werden auf dieses Maß angehoben → konsistentes Bild. */
  min-height: 248px;
}
.gq-apghero-eyebrow {
  font-family: var(--font-h);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}
.gq-apghero-h1 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.gq-apghero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 40px;
  padding: 6px 16px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
}
/* Sekundäre Hero-Pill-Reihe (unter dem Titel) – Frosted-Glass + Marken-Punkt. */
.gq-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.gq-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gq-hero-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wine-lt);
  box-shadow: 0 0 0 3px rgba(184, 57, 93, 0.25);
  flex-shrink: 0;
}
.gq-hero-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
.gq-apghero-kroni {
  flex-shrink: 0;
  align-self: flex-end;
  position: relative;
  z-index: 2;
}
.gq-apghero-kroni img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: -60px;
}

/* ══ PAYBACK Co-Branding-Bühne ══
   Pointees „stehen" laut Guideline (S. 26/49/53–54) immer auf einer
   PAYBACK-Light-Blue-Bühne – nie auf dunklem/farbigem Grund direkt. Form:
   organisch, im Anschnitt und BEWUSST NICHT kreisförmig (kugelrund sind nur
   die Pointees). Hier als hellblaue Fläche hinter den Pointees. */
.gq-pb-buehne {
  position: absolute;
  z-index: 0;
  background: #cce6ff; /* PAYBACK Light Blue */
  /* asymmetrische Radien → organisch, nicht kreisrund */
  border-radius: 46% 54% 58% 42% / 54% 46% 54% 46%;
  pointer-events: none;
}
/* Hero: Bühne unter dem Pointee, im Anschnitt zur unteren Hero-Kante. */
.gq-pb-buehne--hero {
  width: 124%;
  height: 78%;
  left: -12%;
  bottom: -34px;
}
/* Dunkle CTA-Sektion: Pointee steht auf der hellblauen Bühne. */
.gq-pb-stage {
  position: relative;
}
.gq-pb-stage img {
  position: relative;
  z-index: 1;
}
.gq-pb-buehne--cta {
  width: 96%;
  height: 64%;
  left: 2%;
  bottom: 0;
}
/* Weiße Kontur fürs PAYBACK-Logo auf farbigem Grund (Guideline S. 14):
   weiße Karte hinter dem Logo auf der (Creme-)PAYBACK-Leiste der Startseite. */
.gq-payback-logo-card {
  display: inline-flex;
  align-items: center;
  background: #fff;
  padding: 8px 13px;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
/* Auf Mobil ist der Hero-Pointee ausgeblendet bzw. nur schwache Deko →
   die Hero-Bühne dort nicht zeigen. */
@media (max-width: 768px) {
  .gq-pb-buehne--hero {
    display: none;
  }
}
@media (max-width: 560px) {
  /* Mobil kompakter: weniger Padding, keine feste Mindesthöhe und keine
     dekorativen Pillen – so ist der eigentliche Seiteninhalt (Angebote, Märkte,
     News …) sofort sichtbar statt erst nach einem hohen Banner. */
  .gq-apghero {
    padding: 20px 0 24px;
  }
  .gq-apghero-kroni {
    display: none;
  }
  .gq-apghero-in {
    min-height: 0;
    padding-bottom: 0;
  }
  .gq-apghero-h1 {
    margin-bottom: 6px;
  }
  /* Dekorative Pill-Reihe(n) ausblenden – auf dem Handy nicht nötig. */
  .gq-hero-pills {
    display: none;
  }
}

/* ══ FOOTER ══ */
.gq-footer {
  background: var(--blue-dk);
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 0 28px;
  /* Tiefes Weinrot als Markenakzent – bewusst dunkler/satter als das helle
     Rot der Header-Leiste, damit sich oben und unten klar unterscheiden. */
  border-top: 4px solid var(--wine);
}
.gq-fbrand-txt {
  font-size: 14px;
  line-height: 1.7;
  max-width: 280px;
  color: rgba(255, 255, 255, 0.6);
}
.gq-fsocial {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.gq-fclaim {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--wine);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}
.gq-fclaim-lead {
  display: block;
  font-size: 19px;
  font-weight: 900;
  color: var(--wine-br);
  margin-bottom: 2px;
}
.gq-footer a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.18s;
  font-size: 14px;
}
.gq-footer a:hover {
  color: #fff;
}
.gq-fgrid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .gq-fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 520px) {
  .gq-fgrid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.gq-fcol-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  /* 0.36 ergab auf #0c3665 nur 2,9:1 — zu blass für Fließtextgröße. */
  color: rgba(255, 255, 255, 0.53);
  margin-bottom: 16px;
}
.gq-flinks {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* Mindestens 24 Punkte hohe Trefferfläche (WCAG 2.2, Zielgröße). Die Links
   standen bei 22 Punkten — zwei zu wenig, und mit dem Daumen trifft man
   in einer Liste leicht daneben. */
.gq-flinks a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.gq-fbottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  /* 0.3 ergab auf #0c3665 nur 2,4:1 — die Zeile war kaum zu entziffern. */
  color: rgba(255, 255, 255, 0.53);
  font-family: var(--font-h);
}
.gq-fbottom-legal {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.gq-fbottom-claim {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.gq-flogo {
  height: 42px;
  width: auto;
}
.gq-fsn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none !important;
  transition: all 0.18s;
}
.gq-fsn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

/* ══ TYPOGRAPHY HELPERS ══ */
.sec-title-light {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
  text-wrap: balance;
}
.sec-title-dark {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 46px);
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  text-wrap: balance;
}
.sec-sub-light {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 10px;
  line-height: 1.7;
}
.sec-sub-dark {
  font-size: 16px;
  color: var(--text-md);
  margin-top: 10px;
  line-height: 1.7;
}
.gq-eyebrow-red {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 13px;
  border-radius: 40px;
  margin-bottom: 16px;
}
.gq-eyebrow-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: var(--text);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 13px;
  border-radius: 40px;
  margin-bottom: 16px;
}
.gq-eyebrow-white {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 13px;
  border-radius: 40px;
  margin-bottom: 16px;
}
.sec-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

/* ══ ANIMIERTE BLASEN (Party-Deko) ══
   Drei gestaffelte Animationen teilen sich die Eigenschaften konfliktfrei:
   bubbleUp → transform (Auftrieb + Pop-Scale), bubbleSway → margin-left
   (seitlicher Drift), bubbleGlow → filter/opacity (Funkeln). Pro Blase per
   CSS-Variable steuerbar: --dur, --delay, --tint, --sway, --maxop. */
@keyframes bubbleUp {
  0% {
    transform: translateY(0) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  10% {
    transform: translateY(-6vh) scale(1) rotate(8deg);
    opacity: var(--maxop, 0.6);
  }
  80% {
    opacity: calc(var(--maxop, 0.6) * 0.55);
  }
  100% {
    transform: translateY(-114vh) scale(1.25) rotate(-12deg);
    opacity: 0;
  }
}
@keyframes bubbleSway {
  0%, 100% {
    margin-left: calc(var(--sway, 22px) * -1);
  }
  50% {
    margin-left: var(--sway, 22px);
  }
}
@keyframes bubbleGlow {
  0%, 100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(1.55) saturate(1.4);
  }
}
.gq-bubble-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.gq-bubble {
  position: absolute;
  bottom: -24px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.55),
    var(--tint, rgba(255, 255, 255, 0.12)) 62%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 14px var(--tint, rgba(255, 255, 255, 0.2)),
    inset 0 0 8px rgba(255, 255, 255, 0.3);
  animation:
    bubbleUp var(--dur, 5s) ease-in var(--delay, 0s) infinite,
    bubbleSway calc(var(--dur, 5s) * 0.62) ease-in-out var(--delay, 0s)
    infinite,
    bubbleGlow calc(var(--dur, 5s) * 0.4) ease-in-out var(--delay, 0s) infinite;
}
/* Glanzpunkt — lässt die Blase wie eine echte Sektperle wirken. */
.gq-bubble::before {
  content: "";
  position: absolute;
  top: 14%;
  left: 18%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 70%
  );
}

/* ══ FEUERWERK (Party-Deko) ══
   Realistischer Ablauf pro Zyklus (Dauer --dur): Rakete steigt mit Leuchtspur
   auf (.gq-fw-rocket, 0–20 %), das Zentrum blitzt auf (::before), dann
   explodieren die Funken radial nach außen (.gq-fw-spark mit Kometenschweif)
   und sinken durch die Schwerkraft ab (--grav auf .gq-fw).
   Pro Feuerwerk steuerbar: --color, --dur, --delay, --grav, --launch;
   pro Funke: --a (Winkel), --r (Flugweite), --tail (Schweiflänge). */

/* Aufstieg der Rakete – von unten hoch zum Explosionspunkt. */
@keyframes fwLaunch {
  0% {
    transform: translateY(var(--launch, 220px));
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  19% {
    transform: translateY(0);
    opacity: 1;
  }
  23%, 100% {
    transform: translateY(0);
    opacity: 0;
  }
}
/* Leuchtspur hinter dem aufsteigenden Kopf (wächst, dann erlischt am Apex). */
@keyframes fwTrail {
  0%, 2% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.2);
  }
  8% {
    opacity: 0.85;
    transform: translateX(-50%) scaleY(1);
  }
  18% {
    opacity: 0.4;
    transform: translateX(-50%) scaleY(0.5);
  }
  22%, 100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
}
/* Explosionsblitz im Zentrum. */
@keyframes fwFlash {
  0%, 18% {
    transform: scale(0);
    opacity: 0;
  }
  24% {
    transform: scale(1.5);
    opacity: 1;
  }
  46%, 100% {
    transform: scale(0.2);
    opacity: 0;
  }
}
/* Funken fliegen radial nach außen (vorher unsichtbar im Zentrum geparkt). */
@keyframes fwBurst {
  0%, 20% {
    transform: rotate(var(--a)) translateY(0) scale(0.5);
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a)) translateY(calc(var(--r, 60px) * -1))
      scale(0.4);
    opacity: 0;
  }
}
/* Schwerkraft: der ganze Funkenball sinkt nach der Explosion ab. */
@keyframes fwGravity {
  0%, 22% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--grav, 18px));
  }
}
.gq-fw-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.gq-fw {
  position: absolute;
  width: 0;
  height: 0;
  animation: fwGravity var(--dur, 3s) cubic-bezier(0.3, 0, 0.7, 1)
    var(--delay, 0s) infinite backwards;
}
/* Explosionsblitz. */
.gq-fw::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0%,
    var(--color, #ffd24a) 55%,
    transparent 72%
  );
  animation: fwFlash var(--dur, 3s) ease-out var(--delay, 0s) infinite
    backwards;
}
/* Aufsteigende Rakete. */
.gq-fw-rocket {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px var(--color, #ffd24a);
  animation: fwLaunch var(--dur, 3s) cubic-bezier(0.15, 0.6, 0.3, 1)
    var(--delay, 0s) infinite backwards;
}
.gq-fw-rocket::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  width: 2px;
  height: 30px;
  transform-origin: top center;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--color, #ffd24a), transparent);
  animation: fwTrail var(--dur, 3s) cubic-bezier(0.15, 0.6, 0.3, 1)
    var(--delay, 0s) infinite backwards;
}
/* Funke mit Kometenschweif. */
.gq-fw-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--color, #ffd24a);
  box-shadow: 0 0 8px 1px var(--color, #ffd24a);
  transform: rotate(var(--a)) translateY(0);
  /* backwards: während des Delays den 0%-Zustand (unsichtbar) zeigen, statt der
     statischen Default-Pose im Zentrum – sonst „kleben" die Funken beim direkten
     Seitenaufruf erst oben, bevor die Rakete von unten startet. */
  animation: fwBurst var(--dur, 3s) cubic-bezier(0.12, 0.6, 0.3, 1)
    var(--delay, 0s) infinite backwards;
}
.gq-fw-spark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 2px;
  height: var(--tail, 12px);
  transform: translateX(-50%);
  transform-origin: top center;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--color, #ffd24a), transparent);
  opacity: 0.6;
}
@keyframes floatY {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}
.gq-float {
  animation: floatY 5s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Job-Beschreibung HTML-Styles */
.gq-job-desc p {
  margin-bottom: 10px;
}
.gq-job-desc ul {
  padding-left: 20px;
  margin-bottom: 10px;
}
.gq-job-desc li {
  margin-bottom: 4px;
}
.gq-job-desc br {
  display: none;
}

/* ══ MÄRKTE SEITE ══ */
.mkt-section {
  padding: 32px 0 60px;
}
.mkt-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
.mkt-map-col {
  position: sticky;
  top: 82px;
}
.mkt-map-canvas {
  width: 100%;
  height: calc(100vh - 170px);
  min-height: 500px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh2);
  overflow: hidden;
}
.mkt-map-attr {
  text-align: center;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-sm);
}
.mkt-map-attr a {
  color: var(--blue);
}

/* Toolbar */
.mkt-list-col {
  width: 100%;
}
.mkt-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.mkt-search {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d0e4f2;
  border-radius: 10px;
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #0c1e33;
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
.mkt-locbtn {
  white-space: nowrap;
  padding: 0 16px;
  height: 42px;
  border: 1.5px solid #d0e4f2;
  border-radius: 10px;
  background: #fff;
  color: #1c6bb8;
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.mkt-locbtn--on {
  background: #1c6bb8;
  color: #fff;
  border-color: #1c6bb8;
}
.mkt-count {
  font-family: "Nunito", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sm);
  margin-bottom: 8px;
}

/* Scroll container */
.mkt-scroll {
  max-height: calc(100vh - 290px);
  overflow-y: auto;
  padding-right: 2px;
}

/* Individual item */
.mkt-item {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: #fff;
  border: 1.5px solid #d0e4f2;
  border-radius: 10px;
  cursor: pointer;
  box-sizing: border-box;
}
.mkt-item--active {
  background: #edf6fd;
  border-color: #1c6bb8;
}
.mkt-item-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px 0;
}
.mkt-item-name {
  font-family: "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #0c1e33;
  margin: 0;
}
.mkt-item-dist {
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1c6bb8;
  white-space: nowrap;
  flex-shrink: 0;
}
.mkt-item-addr {
  font-size: 11px;
  color: var(--text-sm);
  margin: 0 0 2px 0;
}
.mkt-item-tel {
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1c6bb8;
  margin: 0 0 2px 0;
}
.mkt-item-hours {
  font-size: 11px;
  color: #354c63;
  margin: 6px 0 8px 0;
  padding-top: 6px;
  border-top: 1px solid #d0e4f2;
}
.mkt-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.mkt-item-detail,
.mkt-item-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 6px;
  text-align: center;
  text-decoration: none;
  font-family: "Nunito", sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 8px;
  box-sizing: border-box;
  line-height: 1.2;
}
.mkt-item-cta {
  background: #1c6bb8;
  color: #fff;
}
.mkt-item-detail {
  background: #fff;
  color: #1c6bb8;
  border: 1.5px solid #1c6bb8;
}
/* Markt-Besonderheiten (nur W&S): Chip-Liste im aufgeklappten Eintrag. */
.mkt-item-feats {
  margin: 8px 0 10px;
  padding-top: 8px;
  border-top: 1px solid #d0e4f2;
}
.mkt-item-feats-ttl {
  display: block;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sm);
  margin-bottom: 7px;
}
.mkt-feat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mkt-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: #fff;
  border: 1px solid #cfe4f5;
  border-radius: 40px;
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #155baa;
  line-height: 1.4;
}
.mkt-feat-chip svg {
  color: #2d9b57;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   FEATURED TILES  (gq-feat-*)
══════════════════════════════════════════════════ */
.gq-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense; /* Hero-Kacheln (span 2) reißen sonst Lücken. */
  gap: 14px;
}
/* Große „Hero"-Kachel (Top-Deal) über zwei Spalten. */
.gq-feat-tile--hero {
  grid-column: span 2;
}
/* ── Admin: vereinter Angebote-Arbeitsplatz – 4-Schritt-Ablauf ── */
.gq-ws-rail {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gq-ws-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gq-ws-step:hover {
  border-color: #9cc3e6;
}
.gq-ws-step.is-intab {
  background: #f4f8fc;
}
.gq-ws-step.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 107, 184, 0.14);
}
.gq-ws-step-n {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2f7;
  color: var(--text-sm);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 13px;
}
.gq-ws-step.is-active .gq-ws-step-n {
  background: var(--blue);
  color: #fff;
}
.gq-ws-step-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.gq-ws-step-label {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
}
.gq-ws-step-hint {
  font-size: 11px;
  color: var(--text-sm);
}
.gq-ws-step-sep {
  align-self: center;
  width: 16px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .gq-ws-step-hint,
  .gq-ws-step-sep {
    display: none;
  }
}
/* Kompakter Leerzustand statt 8 Platzhalter-Kacheln. */
.gq-feat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 36px 24px;
  border: 1.5px dashed var(--blue-lt);
  border-radius: var(--r-lg);
  background: var(--blue-xlt);
  color: var(--text-md);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 15px;
}
/* Featured-Kachel = kompakte Angebots-Karte (Bild + Name + Preis + Pfand),
   im Stil der /angebote-Karten, aber dichter fürs 4×2-Raster. */
.gq-feat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh1);
  text-decoration: none;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s,
    border-color 0.3s;
}
.gq-feat-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh3);
  border-color: var(--blue-lt);
}
/* Top-Angebot auf der Startseite: weiße Kachel mit rotem Akzent-Streifen oben. */
.gq-feat-tile--top {
  border-color: var(--red);
  box-shadow: inset 0 3px 0 var(--red), var(--sh1);
}
.gq-feat-tile--top:hover {
  border-color: var(--red);
}
/* Blaue Marken-Kachel-Variante (Kachel-Farbe = „Blau") auf der Startseite. */
.gq-feat-tile--blue {
  border-color: transparent;
  background: linear-gradient(160deg, #2f7cc4 0%, #1c5aa0 68%, #124680 100%);
  box-shadow: var(--sh1);
}
.gq-feat-tile--blue:hover {
  border-color: transparent;
}
.gq-feat-tile--blue .gq-feat-tile-img {
  background: #fff;
  margin: 18px 12px 0;
  border-radius: 10px;
  padding: 7px;
  height: 144px;
}
.gq-feat-tile--blue .gq-feat-tile-body {
  /* Auf dem blauen Verlauf wäre die helle Trennlinie ein Fremdkörper. */
  border-top-color: rgba(255, 255, 255, 0.18);
}
.gq-feat-tile--blue .gq-feat-tile-name {
  color: #fff;
}
.gq-feat-tile--blue .gq-feat-tile-sub,
.gq-feat-tile--blue .gq-feat-tile-size,
.gq-feat-tile--blue .gq-feat-tile-meta {
  color: #d6e6f5;
}
.gq-feat-tile--blue .gq-feat-tile-cat {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}
.gq-feat-tile--blue .gq-feat-ptag-old {
  color: #c2d8ef;
}
/* Eine gemeinsame Zeile über dem Bild: Warengruppe links, Zusatz/Spar-Plakette
   rechts. So überlappen sie NIE – auf schmalen Mobil-Kacheln schrumpft die
   Warengruppe mit „…", die rote Plakette behält ihren Platz. */
.gq-feat-tile-toprow {
  position: absolute;
  top: 8px;
  left: 9px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gq-feat-tile-cat {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(237, 246, 253, 0.92);
  border: 1px solid var(--blue-lt);
  padding: 3px 7px;
  border-radius: 40px;
  backdrop-filter: blur(4px);
}
/* savings badge (top-right ribbon) – Pendant zur Angebotskarte */
.gq-feat-tile-save {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dk) 100%);
  padding: 4px 7px;
  border-radius: 40px;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.32);
  white-space: nowrap;
}
.gq-feat-tile-img {
  position: relative;
  height: 176px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Weiß wie die Produktfotos; mehr Abstand oben (frei vom Kategorie-Schild),
     Produkt steht unten. */
  padding: 14px 14px 6px;
  background: #fff;
}
/* Boden-/Kontaktschatten unter dem Produkt (wie auf /angebote). */
.gq-feat-tile-img::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 56%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(12, 20, 30, 0.24),
    rgba(12, 20, 30, 0) 70%
  );
  z-index: 0;
  pointer-events: none;
}
/* Kiste: breiterer, flacherer Boden-Schatten (Flaschen/Dosen bleiben schmal). */
.gq-feat-tile-img--crate::after {
  width: 80%;
  height: 13px;
  bottom: 4px;
}
.gq-feat-tile-img img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-feat-tile:hover .gq-feat-tile-img img {
  transform: scale(1.06) translateY(-2px);
}
/* Textkörper. Die Haarlinie trennt Bild- und Textzone: Die Produktfotos
   bringen ihre eigenen Hintergründe mit (mal schwarzer Kasten, mal blaue
   Kiste, mal weiß freigestellt), und ohne Kante schwebte der Produktname mal
   dicht am Foto, mal in der Luft. */
.gq-feat-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 13px 13px;
  border-top: 1px solid var(--border);
}
.gq-feat-tile-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 13.5px;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.44em;
}
/* Hersteller und Gebinde: je genau EINE Zeile mit fester Höhe.
   Vorher durfte der Hersteller zwei Zeilen belegen („Mönchshof
   BrauSpezialitäten Kulmbacher Brauerei AG") und das Gebinde brach durch den
   angehängten Grundpreis um — dadurch stand der Preis in jeder Kachel einer
   Reihe woanders. Die Zeilen bleiben auch leer stehen, damit Kacheln ohne
   Hersteller-/Gebindeangabe nicht nach oben rutschen. */
.gq-feat-tile-sub,
.gq-feat-tile-size {
  font-size: 10.5px;
  line-height: 1.35;
  min-height: 1.35em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gq-feat-tile-sub {
  color: var(--text-md);
}
.gq-feat-tile-size {
  color: var(--text-sm);
}
/* Kachelfuß: Preis + Fußnote, immer am unteren Rand. */
.gq-feat-foot {
  margin-top: auto;
  padding-top: 8px;
}
/* CI-Preis-Tag (kompakt) für Startseiten-Kacheln: rote „−X €"-Pille +
   durchgestrichenes Original, darunter dunkles Tag mit weißem Preis. */
.gq-feat-ptag {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.gq-feat-ptag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.gq-feat-ptag-save {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  color: #fff;
  /* Ersparnis-Pille: jetzt schwarz (Preis-Pille trägt das Rot). */
  background: #161616;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.gq-feat-ptag-old {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sm);
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.gq-feat-ptag-price {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18.5px;
  line-height: 1;
  color: #fff;
  /* Preis-Pille: jetzt Marken-Rot (vorher schwarz). */
  background: var(--red);
  padding: 4px 10px;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(200, 16, 46, 0.28);
}
.gq-feat-ptag-cur {
  font-size: 12px;
  margin-left: 2px;
}
.gq-feat-tile-badge {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 10px;
  color: #fff;
  background: var(--red);
  padding: 4px 8px;
  border-radius: 40px;
  box-shadow: 0 3px 10px rgba(226, 0, 26, 0.3);
  white-space: nowrap;
}
/* Fußnote (Grundpreis · Pfand). Steht auch leer im Raum, damit Kacheln ohne
   Pfand unten genauso hoch schließen wie die mit. */
.gq-feat-tile-meta {
  font-size: 10px;
  color: var(--text-sm);
  margin-top: 5px;
  min-height: 1.3em;
  line-height: 1.3;
}
/* Aktions-Sticker auf der Startseiten-Kachel: auffällige, kräftige Pille OBEN
   links auf dem Produktbild (nicht unten im Textfluss) – gut sichtbar als
   Kauf-Anreiz. */
.gq-feat-tile-stickers {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  max-width: calc(100% - 16px);
}
.gq-feat-tile-sticker {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  background: var(--blue);
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 4px 11px;
  box-shadow: 0 3px 10px rgba(28, 107, 184, 0.35);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Auf blauen Kacheln invertiert (weiße Pille, blaue Schrift) – bleibt knallig. */
.gq-feat-tile--blue .gq-feat-tile-sticker {
  color: var(--blue-dk);
  background: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.gq-feat-tile-empty {
  align-items: center;
  justify-content: center;
  min-height: 232px;
  background: #f6f9fc;
  border-style: dashed;
  color: #aaa;
}
.gq-feat-tile-empty:hover {
  transform: none;
  box-shadow: var(--sh1);
  border-color: var(--border);
}

/* ── Zusatz-Kacheln (CTA / Countdown / Kategorie / Banner) ──
   Eigenständige, vollflächige Designs statt „leerer" Produktkarten. Alle
   Varianten halten die Mindesthöhe der Angebotskarten, damit das Raster
   ruhig bleibt. */

/* Vollflächige Aktions-Kachel (CTA) – kein Produktbild, klarer Call-to-Action.
   Blauer Verlauf mit Lichtkante + dezent aufsteigenden Bläschen (Getränke!). */
.gq-feat-tile--cta {
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  min-height: 236px;
  background:
    radial-gradient(
      120% 90% at 85% -10%,
      rgba(255, 255, 255, 0.22),
      transparent 55%
    ),
    linear-gradient(150deg, var(--blue) 0%, var(--blue-dk) 100%);
  border-color: var(--blue-dk);
  color: #fff;
}
.gq-feat-tile--cta:hover {
  border-color: var(--blue-mid);
}
/* Inhalt über die dekorativen Bläschen heben (beide sind positioniert). */
.gq-feat-tile--cta > :not(.gq-feat-cta-fx) {
  position: relative;
  z-index: 1;
}
.gq-feat-cta-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.gq-feat-cta-fx span {
  position: absolute;
  bottom: -18px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.1) 65%,
    transparent
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: gqTileBubble var(--d, 7s) linear var(--dl, 0s) infinite;
}
.gq-feat-cta-fx span:nth-child(1) {
  left: 16%;
  width: 12px;
  height: 12px;
  --d: 7.5s;
}
.gq-feat-cta-fx span:nth-child(2) {
  left: 52%;
  width: 8px;
  height: 8px;
  --d: 6s;
  --dl: 2.1s;
}
.gq-feat-cta-fx span:nth-child(3) {
  left: 76%;
  width: 15px;
  height: 15px;
  --d: 8.5s;
  --dl: 3.8s;
}
@keyframes gqTileBubble {
  0% {
    transform: translateY(0) scale(0.55);
    opacity: 0;
  }
  12% {
    opacity: 0.55;
  }
  85% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-260px) scale(1.2);
    opacity: 0;
  }
}
.gq-feat-cta-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
}
.gq-feat-cta-sub {
  font-size: 13px;
  opacity: 0.9;
}
.gq-feat-cta-arrow {
  margin-top: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  font-weight: 900;
  font-size: 17px;
  transition:
    transform 0.25s,
    background 0.25s,
    color 0.25s,
    border-color 0.25s;
}
.gq-feat-tile--cta:hover .gq-feat-cta-arrow {
  transform: translateX(5px);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--blue-dk);
}

/* „Ab Montag neu"-Kachel: dunkle Premiere-Bühne im Stil des Prospekt-Headers
   (Slate + Goldakzent) mit Live-Countdown zur nächsten Ausgabe. */
.gq-feat-tile--coming {
  justify-content: flex-start;
  gap: 7px;
  padding: 16px 15px 15px;
  min-height: 236px;
  background:
    radial-gradient(
      130% 90% at 92% -18%,
      rgba(28, 107, 184, 0.5),
      transparent 60%
    ),
    linear-gradient(160deg, var(--slate) 0%, var(--slate-dk) 100%);
  border-color: var(--slate-dk);
  color: #fff;
}
.gq-feat-tile--coming:hover {
  border-color: rgba(245, 200, 66, 0.55);
}
/* Inhalt über Glanz-Sweep und Kroni heben (alle Kinder sind positioniert). */
.gq-feat-tile--coming
  > :not(.gq-feat-coming-img):not(.gq-feat-coming-shine):not(
    .gq-feat-coming-badge
  ) {
  position: relative;
  z-index: 1;
}
/* Periodischer Glanz-Sweep über die Fläche – macht die Kachel „lebendig". */
.gq-feat-coming-shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 46%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.13) 48%,
    rgba(255, 255, 255, 0.02) 52%,
    transparent
  );
  transform: translateX(-130%) skewX(-16deg);
  animation: gqTileShine 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes gqTileShine {
  0%, 55% {
    transform: translateX(-130%) skewX(-16deg);
  }
  100% {
    transform: translateX(330%) skewX(-16deg);
  }
}
.gq-feat-coming-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.gq-feat-coming-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  /* Freien Raum hälftig über Kopf und über „Zum Prospekt" verteilen –
     zentriert den Inhalt auf hohen Rasterzeilen statt oben zu kleben. */
  margin-top: auto;
  /* Nie unter die (absolute) Aktions-Plakette oben rechts laufen. */
  max-width: calc(100% - 44px);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 200, 66, 0.35);
  padding: 4px 10px;
  border-radius: 40px;
}
.gq-feat-coming-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245, 200, 66, 0.7);
  animation: gq-announce-pulse 2s ease-out infinite;
}
.gq-feat-coming-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.gq-feat-coming-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}
.gq-feat-coming-count {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}
.gq-feat-coming-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
  padding: 6px 7px 5px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 10px rgba(0, 0, 0, 0.18);
}
.gq-feat-coming-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.gq-feat-coming-unit {
  margin-top: 2px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.gq-feat-coming-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
}
.gq-feat-coming-price s {
  font-family: var(--font-b);
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.gq-feat-coming-cta {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  /* Platz für den Kroni unten rechts lassen. */
  max-width: calc(100% - 78px);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s, gap 0.2s;
}
.gq-feat-tile--coming:hover .gq-feat-coming-cta {
  opacity: 1;
  gap: 11px;
}
.gq-feat-coming-img {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 84px;
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
  animation: gqTileFloat 5s ease-in-out infinite;
  pointer-events: none;
}
.gq-feat-tile--hero.gq-feat-tile--coming .gq-feat-coming-img {
  width: 128px;
  max-height: 140px;
}
@keyframes gqTileFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Warengruppen-Kachel: helle Bühne mit Glow hinter dem Motiv und echtem
   „Zur Auswahl"-Button. Zentriert = klar unterscheidbar von Angebotskarten. */
.gq-feat-tile--category {
  min-height: 236px;
  background:
    radial-gradient(120% 80% at 50% -30%, #fff 0%, transparent 60%),
    linear-gradient(180deg, var(--blue-xlt) 0%, #fff 80%);
  border-color: var(--blue-lt);
}
.gq-feat-cat-stage {
  position: relative;
  height: 126px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px 0;
}
.gq-feat-cat-glow {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(28, 107, 184, 0.2) 0%,
    rgba(28, 107, 184, 0.08) 45%,
    transparent 70%
  );
  transition: transform 0.35s ease;
}
.gq-feat-tile--category:hover .gq-feat-cat-glow {
  transform: translate(-50%, -50%) scale(1.2);
}
/* Weißes Podest fürs Motiv: Produktfotos mit weißem JPG-Hintergrund wirken
   sonst als „Kasten" auf der blauen Fläche (Design-Grundregel) – ein bewusster
   weißer Sockel mit Radius + Schatten macht beides sauber: JPGs UND Freisteller. */
.gq-feat-cat-img {
  position: relative;
  height: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(216, 236, 249, 0.8);
  box-shadow: 0 10px 22px rgba(12, 54, 101, 0.12);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.gq-feat-tile--category:hover .gq-feat-cat-img {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(12, 54, 101, 0.18);
}
.gq-feat-cat-img img {
  max-width: 100%;
  max-height: 88px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-feat-tile--category:hover .gq-feat-cat-img img {
  transform: scale(1.07) rotate(-2deg) translateY(-3px);
}
.gq-feat-cat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 10px 13px 14px;
}
.gq-feat-cat-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.gq-feat-cat-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-md);
}
.gq-feat-cat-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 40px;
  background: #fff;
  border: 1.5px solid var(--blue-lt);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--blue);
  box-shadow: 0 3px 10px rgba(12, 54, 101, 0.08);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.gq-feat-tile--category:hover .gq-feat-cat-btn {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(28, 107, 184, 0.32);
}
.gq-feat-cat-arrow {
  transition: transform 0.2s;
}
.gq-feat-tile--category:hover .gq-feat-cat-arrow {
  transform: translateX(3px);
}

/* Reine Bild-Promo (custom ohne Text/Preis): Bild füllt die Kachel. */
.gq-feat-tile--banner {
  min-height: 236px;
}
.gq-feat-tile--banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-feat-tile--banner:hover > img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .gq-feat-cta-fx span,
  .gq-feat-coming-shine,
  .gq-feat-coming-dot,
  .gq-feat-coming-img {
    animation: none;
  }
}
@media (max-width: 900px) {
  .gq-feat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .gq-feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Zwei Spalten à ~165 px: Der Herstellername passt dort NIE hinein — er
     stand nur noch als abgeschnittene graue Zeile über dem Preis („Anheuser
     Busch Inbev De…") und kostete Platz, ohne etwas zu sagen. Weg damit;
     unterscheiden lassen sich die Angebote über Name und Gebinde. */
  .gq-feat-tile-sub {
    display: none;
  }
  /* Grundpreis + Pfand brauchen hier zwei Zeilen. Beide sind Pflichtangaben
     und dürfen nicht abgeschnitten werden — also Platz für zwei Zeilen
     reservieren, damit die Kacheln trotzdem gleich hoch schließen. */
  .gq-feat-tile-meta {
    min-height: 2.6em;
  }
  /* Schmale Kacheln (~165px): Countdown & Bühnen kompakter. */
  .gq-feat-tile--coming {
    padding: 14px 12px 13px;
  }
  .gq-feat-coming-head {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 0.06em;
  }
  .gq-feat-coming-title {
    font-size: 15px;
  }
  .gq-feat-coming-count {
    gap: 5px;
  }
  .gq-feat-coming-cell {
    min-width: 40px;
    padding: 5px 5px 4px;
  }
  .gq-feat-coming-num {
    font-size: 16px;
  }
  .gq-feat-coming-img {
    width: 64px;
    max-height: 74px;
  }
  .gq-feat-coming-cta {
    max-width: calc(100% - 60px);
  }
  .gq-feat-cat-stage {
    height: 106px;
    padding-top: 14px;
  }
  .gq-feat-cat-img img {
    max-height: 86px;
  }
  .gq-feat-cta-title {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE POLISH
══════════════════════════════════════════════════ */
html,
body {
  width: 100%;
  max-width: 100%;
}
/* Horizontalen Überlauf NICHT an html/body clippen – ein Clip am Wurzelelement
   pinnt auf iOS/Android sonst position:fixed (den Kroni-Button) ans Dokument
   statt an den Viewport, sodass er beim Scrollen mitwandert. Stattdessen clippt
   der Seiten-Wrapper. overflow-y bleibt sichtbar (clip + visible ist erlaubt),
   die Sticky-Kopfzeile funktioniert dadurch weiter. */
.gq-page {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
main {
  width: 100%;
  min-width: 0;
}

/* ── Kein automatisches Hineinzoomen beim Antippen eines Feldes (iOS) ──
   iOS Safari zoomt die Seite selbsttätig heran, sobald ein Eingabefeld den
   Fokus bekommt und dessen Schrift kleiner als 16 px ist — und es zoomt
   danach NICHT wieder heraus. Der Besucher steht anschließend vergrößert auf
   der Seite und muss von Hand herauszoomen. Gemeldet für den Kroni-Chat
   (Eingabefeld 14,5 px); dieselbe Falle hatten die beiden Auswahlfelder auf
   der Stellenseite (14 px).

   BEWUSST NICHT über `user-scalable=no` / `maximum-scale=1` im viewport-Tag
   gelöst: Das nähme auch das absichtliche Aufziehen weg (WCAG 2.1 AA,
   Erfolgskriterium 1.4.4 „Textgröße ändern"), und iOS ignoriert es seit
   Version 10 beim Zwei-Finger-Zoom ohnehin — der Auto-Zoom bliebe also, das
   gewollte Zoomen wäre weg. Genau verkehrt herum.

   Stattdessen: Auf Touch-Geräten haben Eingabefelder mindestens 16 px, dann
   zoomt iOS gar nicht erst. Nachgemessen — auf der ganzen öffentlichen Seite
   liegt kein Feld ÜBER 16 px, es wird also nichts kleiner.

   `!important` ist hier nötig: Der Kroni-Chat stammt aus dem Entwurf und
   trägt seine Schriftgröße als Inline-Stil, und der schlägt jede Regel aus
   dem Stylesheet. Schieberegler, Kästchen und Schalter sind ausgenommen —
   die lösen keinen Zoom aus, hängen aber teils an ihrer Größe. */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
      [type="color"]
    ):not([type="file"]):not([type="submit"]):not([type="button"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Tippziele auf dem Handy ──
   Mit der Maus reicht ein 15 px hoher Link; mit dem Daumen nicht. Die
   folgenden Elemente lagen bei der Durchsicht unter 24 px Höhe und sind
   eigenständige Ziele (kein Link mitten im Fließtext — der ist ausgenommen,
   weil ihn die Zeilenhöhe des Absatzes ohnehin schützt). */
@media (hover: none) and (pointer: coarse) {
  /* Die Schiene des Partyplaner-Reglers ist nur 8 px hoch — und genau das
     ist die Fläche, auf der der Finger den Griff überhaupt fassen kann.
     `content-box` + Innenabstand vergrößert NUR die Trefferfläche auf 36 px;
     der negative Außenabstand nimmt die Hälfte davon aus dem Layout, damit
     die Regler optisch dort bleiben, wo sie sind. Der Farbverlauf wird auf
     die Inhaltsfläche geklippt und bleibt deshalb 8 px dünn. */
  .gq-pp-regler {
    box-sizing: content-box;
    padding: 14px 0;
    margin: -7px 0;
    /* `!important` ist hier nötig: Der Regler bekommt seinen Farbverlauf als
       Inline-Stil über die KURZSCHRIFT `background:` — und die setzt
       background-clip stillschweigend auf den Standard zurück. Ohne das
       wüchse der Verlauf auf die volle Trefferfläche und der Regler würde
       zum dicken Balken. Eine `!important`-Regel aus dem Stilblatt schlägt
       einen einfachen Inline-Stil. */
    background-clip: content-box !important;
  }
  .gq-pp-regler:focus-visible {
    outline-offset: -4px;
  }
  /* Rechtszeile der Fußzeile: 22 px hohe Links in einer Reihe. */
  .gq-fbottom-legal a,
  .gq-fbottom-legal button {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }
  /* Telefonnummer in der Marktliste — auf dem Handy DER Knopf schlechthin. */
  .mkt-item-tel a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
  /* Einzeln stehende Aktionslinks. */
  .gq-tip-legal-link,
  .gq-tip-crumb a,
  .gq-mktnote-switch,
  .gq-pp-mehr {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
  }
  /* Marktname in der Liste — der Hauptweg in die Filiale. */
  .mkt-item-namelink {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }
}

/* ── Kleinstschrift auf dem Handy ──
   Am Schreibtisch liest sich 9 px Versalschrift noch; auf einem Telefon in
   der Hand nicht mehr. Betroffen waren die Warengruppen-Plakette der
   Startseiten-Kacheln, der Zeitraum im Bühnen-Stempel und zwei Kleinzeilen.
   Nur auf schmalen Bildschirmen angehoben — am Rechner bleibt die feinere
   Abstufung erhalten. */
@media (max-width: 600px) {
  .gq-feat-tile-cat {
    font-size: 10.5px;
  }
  .gq-feat-tile-size,
  .gq-feat-tile-meta {
    font-size: 11px;
  }
  .gq-ocard-cat {
    font-size: 11px;
  }
  .mkt-item-feats-ttl {
    font-size: 11px;
  }
  /* Telefon, E-Mail und Adressen in Impressum und Datenschutz. */
  .gq-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}

a,
button,
input,
select,
textarea {
  max-width: 100%;
}
/* Nummerierte Streifen statt Karten-Stack: volle Breite, Gold-Akzent beim
   Hover, große Outline-Ziffern als grafisches Element. */
.gq-home-link-stack {
  display: flex;
  flex-direction: column;
}
.gq-home-link-card {
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 24px 8px;
  text-decoration: none;
  transition: background 0.2s, padding-left 0.25s ease;
}
.gq-home-link-card:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.gq-home-link-card:hover {
  background: rgba(255, 255, 255, 0.06);
  padding-left: 24px;
}
.gq-home-link-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 48px;
  line-height: 1;
  min-width: 66px;
  flex-shrink: 0;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(215, 108, 135, 0.95);
  transition: color 0.2s, -webkit-text-stroke-color 0.2s;
}
.gq-home-link-card:hover .gq-home-link-num {
  color: var(--wine-br);
  -webkit-text-stroke-color: var(--wine-br);
}
.gq-home-link-body {
  flex: 1;
  min-width: 0;
}
.gq-home-link-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 4px;
}
.gq-home-link-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  max-width: 560px;
}
.gq-home-link-cta {
  flex-shrink: 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  transition: color 0.2s, transform 0.25s ease;
}
.gq-home-link-card:hover .gq-home-link-cta {
  color: var(--wine-br);
  transform: translateX(4px);
}
.gq-jobs-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gq-mmenu-hero,
.gq-mmenu-actions {
  display: none;
}

@keyframes menuRise {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes menuFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 1180px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .gq-hinner {
    gap: 14px;
  }
  /* Mehr Einträge in der Nav → enger setzen, damit alles in einer Zeile bleibt. */
  .gq-nav {
    gap: 0;
  }
  .gq-navlnk {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13.5px;
  }
  .gq-navlnk-jobs {
    padding-left: 11px;
    padding-right: 11px;
  }
}

@media (max-width: 1024px) {
  .gq-header {
    background:
      linear-gradient(90deg, rgba(200, 16, 46, 0.22), transparent 32%),
      linear-gradient(180deg, rgba(12, 30, 51, 0.98), rgba(10, 38, 68, 0.98));
  }
  .gq-hinner {
    justify-content: space-between;
  }
  .gq-mtoggle {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.18s, color 0.18s, transform 0.18s;
  }
  .gq-mtoggle.is-open {
    background: #fff;
    color: var(--blue-dk);
    transform: rotate(2deg);
  }
  /* Vollbild-Overlay: deckt Ankündigung, Header und Seite ab. */
  .gq-mmenu {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(
        130% 80% at 100% 0%,
        rgba(28, 107, 184, 0.32),
        transparent 58%
      ),
      linear-gradient(180deg, #071827 0%, #0a2238 55%, #061320 100%);
    border: none;
    border-radius: 0;
    box-shadow: none;
    animation: menuFade 0.2s ease;
  }
  .gq-mmenu-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .gq-mmenu-logo {
    display: flex;
    align-items: center;
  }
  .gq-mmenu-logo img {
    height: 42px;
    width: auto;
    display: block;
  }
  .gq-mmenu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
  }
  .gq-mmenu-close:hover {
    background: rgba(255, 255, 255, 0.16);
  }
  .gq-mmenu-close:active {
    transform: scale(0.94);
  }
  .gq-mmenu-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
  }
  .gq-mmenu-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 136px;
    overflow: hidden;
    padding: 18px 136px 18px 18px;
    border-radius: 18px;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.03)
      ),
      linear-gradient(160deg, rgba(21, 91, 170, 0.88), rgba(130, 18, 48, 0.78));
    border: 1px solid rgba(255, 255, 255, 0.13);
  }
  .gq-mmenu-hero-copy {
    position: relative;
    z-index: 1;
  }
  .gq-mmenu-hero-copy span {
    display: inline-block;
    margin-bottom: 6px;
    font-family: var(--font-h);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }
  .gq-mmenu-hero-copy strong {
    display: block;
    max-width: 210px;
    color: #fff;
    font-family: var(--font-h);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.08;
  }
  .gq-mmenu-hero-copy p {
    max-width: 210px;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.45;
  }
  .gq-mmenu-kroni {
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 142px;
    max-width: 42%;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.35));
    transform: rotate(4deg);
  }
  .gq-mmenu-actions {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .gq-mmenu-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 14px;
    background: #fff;
    color: var(--blue-dk);
    text-decoration: none;
    font-family: var(--font-h);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  }
  .gq-mmenu-action-red {
    background: var(--red);
    color: #fff;
  }
  .gq-mmenu-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .gq-mmenu-lnk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.11);
    color: rgba(255, 255, 255, 0.84);
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .gq-mmenu-lnk.active {
    color: #fff;
    background: rgba(28, 107, 184, 0.52);
    border-color: rgba(216, 236, 249, 0.42);
  }
  .gq-mmenu-lnk-jobs,
  .gq-mmenu-lnk-jobs.active {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.16);
  }
  .gq-hero-in,
  .gq-apghero-in {
    gap: 24px;
  }
  .gq-hero-right {
    width: min(32vw, 300px);
  }
  .gq-apghero-kroni img {
    max-height: 210px;
  }
  .mkt-layout {
    grid-template-columns: 1fr;
  }
  .mkt-map-col {
    position: static;
    order: -1;
  }
  .mkt-map-canvas {
    height: 420px;
    min-height: 360px;
  }
  .mkt-scroll {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --r-lg: 18px;
  }
  .container {
    padding-left: 18px;
    padding-right: 18px;
  }
  .gq-header {
    position: sticky;
  }
  .gq-logo {
    height: 40px;
  }
  .gq-mktbtn {
    padding: 8px 12px;
    font-size: 13px;
  }
  .gq-mktdrop {
    right: 0;
    min-width: min(340px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    max-height: min(420px, calc(100vh - 96px));
  }
  .gq-hero-in {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 44px;
    min-height: 460px;
  }
  .gq-hero-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 42px;
  }
  .gq-hero-h1,
  body[class^="page-"]:not(.page-home) .gq-hero-h1 {
    font-size: clamp(36px, 12vw, 58px);
    letter-spacing: 0;
  }
  .gq-hero-p,
  body[class^="page-"]:not(.page-home) .gq-hero-p {
    font-size: 16px;
    margin-bottom: 26px;
  }
  .gq-hero-ctas {
    align-items: stretch;
  }
  .gq-hero-ctas .gq-btn,
  .gq-mktband-row .gq-btn,
  .gq-payback .gq-btn {
    width: 100%;
  }
  .gq-btn-lg {
    padding: 13px 20px;
    font-size: 15px;
  }
  .gq-prospekt-header {
    padding: 16px 18px;
    align-items: flex-start;
  }
  .gq-prospekt-body {
    padding: 16px;
  }
  .gq-ogrid-real {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .gq-ocard-real-img {
    height: 202px;
    padding: 10px 12px 10px;
  }
  .gq-ocard-body {
    padding: 12px 12px 4px;
  }
  .gq-ocard-real-foot {
    padding: 10px 12px;
  }
  .gq-apghero {
    padding: 34px 0 42px;
    overflow: hidden;
  }
  .gq-apghero-in {
    position: relative;
    flex-direction: column;
    min-height: 220px;
  }
  .gq-apghero-kroni {
    display: block;
    position: absolute;
    right: -18px;
    bottom: -52px;
    z-index: 0;
    width: 158px;
    opacity: 0.2;
    pointer-events: none;
    transform: rotate(-6deg);
  }
  .gq-apghero-kroni img {
    width: 100% !important;
    height: auto !important;
    max-height: none;
  }
  .gq-apghero-in > div:first-child {
    position: relative;
    z-index: 1;
  }
  .gq-info-card {
    align-items: flex-start;
    padding: 24px;
  }
  .gq-payback {
    /* Mobil stapeln: Logo-Karte (flex-shrink:0) + Text nebeneinander quetscht
       den Text in eine zu schmale Spalte → Wort-für-Wort-Umbruch. Vertikal
       stapeln gibt dem Text die volle Breite. */
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 24px;
  }
  .gq-payback-logo-card {
    /* Logo-Karte behält ihre natürliche Breite (kein voller weißer Balken). */
    align-self: flex-start;
  }
  .gq-jobs-filter-grid {
    grid-template-columns: 1fr;
  }
  .gq-home-link-card {
    align-items: flex-start;
    gap: 14px;
    padding: 20px 4px;
  }
  .gq-home-link-card:hover {
    padding-left: 4px;
  }
  .gq-home-link-num {
    font-size: 34px;
    min-width: 46px;
  }
  .gq-home-link-title {
    font-size: 19px;
  }
  .gq-home-link-cta {
    display: none;
  }
  .mkt-section {
    padding: 24px 0 44px;
  }
  .mkt-map-canvas {
    height: 360px;
    min-height: 320px;
    border-radius: var(--r);
  }
}

@media (max-width: 640px) {
  .gq-hinner {
    height: 64px;
    gap: 8px;
  }
  .gq-logo {
    height: 36px;
  }
  .gq-mktname {
    max-width: 92px;
  }
  .gq-mktbtn {
    gap: 5px;
    padding: 8px 10px;
    min-height: 44px; /* WCAG-Touch-Ziel */
    min-width: 44px;
  }
  .gq-mmenu {
    inset: 0;
    padding: 0;
    border-radius: 0;
  }
  .gq-mmenu-hero {
    min-height: 124px;
    padding: 16px 112px 16px 16px;
  }
  .gq-mmenu-hero-copy strong {
    font-size: 20px;
  }
  .gq-mmenu-kroni {
    width: 122px;
  }
  .gq-sec {
    padding: 44px 0;
  }
  .gq-sec-sm {
    padding: 32px 0;
  }
  .gq-btn {
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }
  .gq-job-row-btn {
    flex-wrap: wrap;
  }
  .gq-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .gq-chips::-webkit-scrollbar {
    display: none;
  }
  .gq-chip {
    flex: 0 0 auto;
    padding: 10px 16px;
  }
  .gq-wcard {
    padding: 22px;
  }
  .gq-ocard-real,
  .gq-info-card,
  .gq-home-link-card {
    box-shadow:
      0 10px 28px rgba(12, 54, 101, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.7) inset;
  }
  .gq-feat-tile {
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(12, 54, 101, 0.14);
  }
  .gq-hero-right {
    display: block;
    position: absolute;
    right: -30px;
    bottom: -4px;
    z-index: 0;
    width: min(58vw, 230px);
    opacity: 0.28;
    pointer-events: none;
  }
  .gq-hero-right img {
    filter: drop-shadow(0 20px 38px rgba(0, 0, 0, 0.48));
  }
  .gq-mktband {
    align-items: flex-start;
    padding: 28px 20px 116px;
    text-align: left;
  }
  .gq-mktband-body {
    width: 100%;
  }
  .gq-mktband-row {
    justify-content: flex-start;
  }
  .gq-mktband-kroni {
    display: block;
    position: absolute;
    right: -6px;
    bottom: -14px;
    width: 120px;
    opacity: 0.34;
    pointer-events: none;
  }
  .gq-info-card {
    display: block;
  }
  .gq-info-card-img {
    width: 96px;
    margin-bottom: 14px;
  }
  .gq-footer {
    padding-top: 44px;
  }
  .gq-fbottom {
    align-items: flex-start;
    flex-direction: column;
  }
  .mkt-toolbar {
    grid-template-columns: 1fr;
  }
  .mkt-locbtn {
    width: 100%;
    min-height: 44px;
  }
  /* 16px verhindert iOS-Auto-Zoom beim Fokus; größere Tap-Höhe. */
  .mkt-search {
    font-size: 16px;
    padding: 12px 14px;
  }
}

@media (max-width: 460px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
  .gq-mktbtn svg:last-child,
  .gq-mktbtn .gq-mkt-locpulse {
    display: none;
  }
  .gq-mktname {
    max-width: 78px;
  }
  .gq-mtoggle {
    width: 36px;
    min-width: 44px; /* WCAG-Touch-Ziel */
    min-height: 44px;
  }
  .gq-mmenu-actions {
    grid-template-columns: 1fr;
  }
  .gq-mmenu-hero {
    padding-right: 96px;
  }
  .gq-mmenu-kroni {
    right: -8px;
    width: 108px;
  }
  .gq-hero-h1,
  body[class^="page-"]:not(.page-home) .gq-hero-h1,
  .gq-apghero-h1 {
    font-size: clamp(32px, 11vw, 44px);
  }
  .gq-hero-kicker,
  .gq-eyebrow-white,
  .gq-eyebrow-red,
  .gq-eyebrow-gold {
    letter-spacing: 0.07em;
  }
  .gq-prospekt-header {
    border-radius: 12px 12px 0 0;
  }
  .gq-prospekt-body {
    border-radius: 0 0 12px 12px;
    padding: 12px;
  }
  /* 2-Spalten-Angebotsraster (aus dem 640px-Block) bewusst beibehalten –
     halbiert die Seitenlänge und macht die Deals scanbar. */
  .gq-hero-in {
    min-height: 430px;
  }
  .gq-hero-right {
    right: -46px;
    width: min(64vw, 210px);
    opacity: 0.22;
  }
  .gq-apghero-kroni {
    right: -42px;
    width: 146px;
    opacity: 0.17;
  }
  .gq-home-link-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    align-items: center;
  }
  .gq-home-link-body {
    grid-column: 2;
  }
  .mkt-map-canvas {
    height: 300px;
    min-height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gq-mmenu {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════
   ADMIN PANEL  (gq-adm-*)
══════════════════════════════════════════════════ */

/* Hide site header/footer on admin pages */
body.page-admin .gq-announce,
body.page-admin .gq-header,
body.page-admin .gq-footer {
  display: none;
}
body.page-admin main {
  padding: 0;
}

/* Shell: sidebar + main */
.gq-adm-shell {
  display: flex;
  min-height: 100vh;
  background: #f1f5f9;
}

/* Sidebar */
.gq-adm-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #0c1e33;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.gq-adm-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.gq-adm-sidebar-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.01em;
}
.gq-adm-sidebar-tag {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--wine-lt);
  padding: 2px 7px;
  border-radius: 4px;
}
.gq-adm-nav {
  flex: 1;
  padding: 12px 0;
}
.gq-adm-nav-section {
  padding: 14px 20px 5px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); /* Kontrast >= 4.5:1 gegen #0c1e33 */
}
.gq-adm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  min-height: 44px; /* WCAG-Touch-Ziel */
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
  background: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
}
.gq-adm-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.gq-adm-nav-item--active {
  background: rgba(28, 107, 184, 0.25) !important;
  color: #fff !important;
  border-left-color: var(--blue) !important;
}
.gq-adm-nav-item--logout {
  color: rgba(255, 100, 100, 0.75);
}
.gq-adm-nav-item--logout:hover {
  color: #ff6b6b;
}
.gq-adm-nav-icon {
  flex-shrink: 0;
  opacity: 0.85;
}
.gq-adm-sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0 12px;
}

/* Main area */
.gq-adm-main {
  flex: 1;
  min-width: 0;
  /* Seitenabstand skaliert mit der Breite (mehr Luft auf großen Monitoren).
     Bewusst großzügig, damit der Inhalt schon auf mittleren Screens nicht bis
     an den rechten Rand läuft. */
  padding: 32px clamp(24px, 5vw, 80px) 64px;
}
/* Inhaltsbreite deckeln + zentrieren, damit auf breiten Screens nichts
   randlos auseinanderläuft und Zeilen nicht zu lang werden. */
.gq-adm-main-inner {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 768px) {
  .gq-adm-shell {
    flex-direction: column;
  }
  .gq-adm-sidebar {
    width: 100%;
    min-height: unset;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .gq-adm-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .gq-adm-main {
    padding: 20px 18px 40px;
  }
}

/* Header */
.gq-adm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.gq-adm-header-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 26px;
  color: var(--text);
  line-height: 1.2;
}
.gq-adm-header-sub {
  font-size: 14px;
  color: var(--text-sm);
  margin-top: 4px;
}

/* Status cards */
.gq-adm-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .gq-adm-cards-row {
    grid-template-columns: 1fr;
  }
}
.gq-adm-status-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 20px 22px;
  box-shadow: var(--sh1);
}
.gq-adm-status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gq-adm-status-icon {
  font-size: 18px;
}
.gq-adm-status-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.gq-adm-status-count {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}
.gq-adm-status-count-label {
  font-size: 16px;
  font-weight: 600;
}
.gq-adm-status-meta {
  font-size: 13px;
  color: var(--text-md);
  line-height: 1.7;
}
.gq-adm-status-empty {
  font-size: 14px;
  color: var(--text-sm);
  padding: 12px 0;
}
/* Action card */
.gq-adm-action-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--sh1);
  flex-wrap: wrap;
}
.gq-adm-action-icon {
  font-size: 32px;
  flex-shrink: 0;
}
.gq-adm-action-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 3px;
}
.gq-adm-action-desc {
  font-size: 13px;
  color: var(--text-md);
}

/* Admin form elements */
.gq-adm-label {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sm);
  margin-bottom: 6px;
}

/* Alert banners */
.gq-adm-alert {
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.gq-adm-alert-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}
.gq-adm-alert-err {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* Login page */
.gq-adm-login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  padding: 24px;
}
.gq-adm-login-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sh2);
}
.gq-adm-login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.gq-adm-login-brand {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  color: var(--text);
}
.gq-adm-login-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 6px;
}
.gq-adm-login-sub {
  font-size: 14px;
  color: var(--text-sm);
  margin-bottom: 20px;
}

/* ── Admin: editor panels (settings / news / jobs) ── */
.gq-adm-panel {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: var(--sh1);
}
.gq-adm-panel-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 2px;
}
.gq-adm-panel-desc {
  font-size: 13px;
  color: var(--text-sm);
  margin-bottom: 16px;
}
.gq-adm-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .gq-adm-field-grid {
    grid-template-columns: 1fr;
  }
}
.gq-adm-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gq-adm-field--full {
  grid-column: 1 / -1;
}
.gq-adm-field-label {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-md);
}
/* Erläuterung unter einem Eingabefeld — sagt, wofür die Angabe gebraucht
   wird. Bewusst zurückhaltend, damit sie das Feld nicht überstrahlt. */
.gq-adm-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-sm);
  margin-top: 5px;
}
.gq-adm-input {
  display: block;
  width: 100%;
textarea.gq-adm-input {
  resize: vertical;
  min-height: 92px;
  font-family: var(--font-b);
  line-height: 1.55;
}
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-family: var(--font-b);
  color: var(--text);
  background: #fff;
  transition: border-color 0.15s;
  resize: vertical;
}
.gq-adm-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(28, 107, 184, 0.18);
}
/* Sichtbarer Tastatur-Fokus auf Buttons & Sidebar-Nav (a11y). */
.gq-adm-btn:focus-visible,
.gq-adm-nav-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.gq-adm-field-hint {
  font-family: var(--font-b);
  font-size: 12px;
  color: var(--text-sm);
}
.gq-adm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-md);
}
/* Pill-Switch (an = grün, aus = grau) statt nativer Checkbox. */
.gq-adm-toggle input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 40px;
  background: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  transition: background 0.18s;
}
.gq-adm-toggle input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}
.gq-adm-toggle input:checked {
  background: var(--green);
}
.gq-adm-toggle input:checked::after {
  transform: translateX(16px);
}
.gq-adm-toggle input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Admin: Markt-Features (Zubehör) Auswahl ── */
.gq-adm-feat-section {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gq-adm-feat-hint {
  font-family: var(--font-b);
  font-size: 12px;
  color: var(--text-sm);
  margin: 0 0 6px;
}
.gq-adm-feat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gq-adm-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-md);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 40px;
  padding: 7px 14px 7px 11px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gq-adm-feat-chip:hover {
  border-color: var(--blue);
}
.gq-adm-feat-chip--on {
  background: #f0fdf4;
  border-color: var(--green);
  color: #166534;
}
/* Checkbox als kleines rundes Häkchen-Feld (grün bei „vorhanden"). */
.gq-adm-feat-chip input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.gq-adm-feat-chip input:checked {
  background: var(--green);
  border-color: var(--green);
}
.gq-adm-feat-chip input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gq-adm-feat-chip input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Admin: sticky save bar ── */
.gq-adm-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  /* opak (kein durchscheinender Button mehr); gleiche Breite wie die
     Content-Spalte, daher verschwindet scrollender Inhalt sauber dahinter. */
  margin-top: 8px;
  padding: 14px 0;
  background: #fff;
  border-top: 1.5px solid var(--border);
}
.gq-adm-savemsg {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-md);
}
.gq-adm-savemsg--ok {
  color: var(--ok);
}
.gq-adm-savemsg--err {
  color: var(--err);
}
.gq-adm-alert-ok {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: var(--ok);
}

/* ── Admin: buttons ── */
.gq-adm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s,
    opacity 0.16s;
}
.gq-adm-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Primär = Blau (speichern/erstellen). Rot ist im CMS ausschließlich für
   destruktive Aktionen reserviert (gq-adm-btn-danger). */
.gq-adm-btn-primary {
  background: var(--blue);
  color: #fff;
}
.gq-adm-btn-primary:hover:not(:disabled) {
  background: var(--blue-dk);
}
/* Solider Danger-Button (z. B. „endgültig löschen") – Outline-Variante bleibt
   gq-adm-btn-danger; diese hier für die seltene gefüllte Gefahr-Aktion. */
.gq-adm-btn-danger-solid {
  background: var(--red);
  color: #fff;
}
.gq-adm-btn-danger-solid:hover:not(:disabled) {
  background: var(--red-dk);
}
.gq-adm-btn-ghost {
  background: #fff;
  color: var(--text-md);
  border-color: var(--border);
}
.gq-adm-btn-ghost:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: var(--blue);
  color: var(--blue);
}
.gq-adm-btn-sm {
  padding: 6px 12px;
  font-size: 12.5px;
}
/* Mini-Fortschrittsbalken (unbestimmt) für laufende KI-Freisteller-Jobs */
.gq-adm-aibar {
  position: relative;
  display: inline-block;
  width: 74px;
  height: 6px;
  border-radius: 999px;
  background: #f1e4d2;
  overflow: hidden;
}
.gq-adm-aibar span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5b301, #e8791f);
  animation: gqAdmAibar 1.1s ease-in-out infinite;
}
@keyframes gqAdmAibar {
  to {
    left: 100%;
  }
}
.gq-adm-btn-danger {
  background: #fff;
  color: #b91c1c;
  border-color: #fecaca;
}
.gq-adm-btn-danger:hover {
  background: #fef2f2;
}

/* ── Admin: list rows (news / jobs) ── */
.gq-adm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gq-adm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--sh1);
}
.gq-adm-row-thumb {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f4f8;
}
.gq-adm-row-main {
  flex: 1;
  min-width: 0;
}
.gq-adm-row-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gq-adm-row-meta {
  font-size: 12.5px;
  color: var(--text-sm);
  margin-top: 2px;
}
.gq-adm-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gq-adm-badge {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 40px;
  color: #fff;
}
.gq-adm-badge--off {
  background: #94a3b8;
}
.gq-adm-badge--on {
  background: var(--green);
}
.gq-adm-badge--draft {
  background: var(--amber);
}
/* Token-basierte Badge-Farben (Gruppen, Kategorien, Typen) statt Inline-Hex. */
.gq-adm-badge--blue,
.gq-adm-badge--wvg {
  background: var(--blue);
}
.gq-adm-badge--green {
  background: var(--green);
}
.gq-adm-badge--amber {
  background: var(--amber);
}
.gq-adm-badge--wine,
.gq-adm-badge--ws {
  background: var(--wine-lt);
}
.gq-adm-badge--gray {
  background: #94a3b8;
}

/* ── Admin: status group badge ── */
.gq-adm-group-badge {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 3px 10px;
  border-radius: 40px;
}

/* ── Admin: media library grid ── */
.gq-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.gq-media-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.gq-media-thumb {
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gq-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gq-media-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gq-media-name {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gq-media-meta {
  font-size: 11px;
  color: var(--text-sm);
}
.gq-media-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Prospekt-Viewer (PDF-Modal) */
@keyframes gqFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.gq-pv-act:hover {
  background: rgba(255, 255, 255, 0.32) !important;
}
/* On phones the title + three action buttons don't fit one row, which
   pushed the ✕ close button off-screen. Drop the text labels (keep the
   icons) so "Neuer Tab", "Download" and ✕ all stay reachable. */
@media (max-width: 560px) {
  .gq-pv-act-label {
    display: none;
  }
}

/* ══════════════════════════════════════════════════
   PARTYPLANER  (gq-pp-*)
══════════════════════════════════════════════════ */

/* ── Hero ── */
.gq-pp-hero {
  /* Größe an die übrigen Unterseiten (.gq-apghero) angeglichen. */
  padding: 44px 0 56px;
}
.gq-pp-hero-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  /* gleiche Hero-Höhe wie die übrigen Unterseiten (.gq-apghero-in) */
  min-height: 248px;
}
.gq-pp-hero-body {
  flex: 1;
  min-width: 0;
}
.gq-pp-hero-h1 {
  font-family: "Barlow Condensed", var(--font-h), sans-serif;
  font-weight: 800;
  /* Größe wie der Standard-Sub-Hero (.gq-apghero-h1). */
  font-size: clamp(28px, 4.5vw, 52px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin: 4px 0 16px;
  text-wrap: balance;
}
.gq-pp-hero-accent {
  background: linear-gradient(
    90deg,
    var(--wine-br) 0%,
    #f3b8c8 45%,
    var(--wine-br) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ppShimmer 3.5s linear infinite;
}
@keyframes ppShimmer {
  to {
    background-position: -200% 0;
  }
}
.gq-pp-hero-p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 18px;
}
.gq-pp-hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.gq-pp-hero-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 40px;
  padding: 5px 14px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}
.gq-pp-hero-kroni {
  flex-shrink: 0;
  width: 240px;
  /* vor dem Feuerwerk (.gq-fw-zone hat z-index: 2). */
  position: relative;
  z-index: 3;
}
.gq-pp-hero-kroni img {
  width: 100%;
  filter: drop-shadow(0 28px 56px rgba(0, 0, 0, 0.55));
}

/* ── Planer-Karte ── */
.gq-pp {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh2);
  overflow: hidden;
}
.gq-pp-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  align-items: stretch;
}

/* Eingabe-Panel (Anthrazit) */
.gq-pp-panel {
  background: linear-gradient(170deg, var(--slate) 0%, var(--slate-dk) 100%);
  padding: 28px 26px 32px;
  color: #fff;
}
.gq-pp-panel-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  color: #fff;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--wine-lt);
}
.gq-pp-field {
  display: block;
  margin-bottom: 20px;
}
.gq-pp-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gq-pp-field-label {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}
.gq-pp-field-head .gq-pp-field-label {
  margin-bottom: 0;
}
.gq-pp-field-value {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  color: var(--wine-lt);
}

/* Range-Slider */
.gq-pp-range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 40px;
  background: linear-gradient(
    90deg,
    var(--wine-lt) var(--p, 50%),
    rgba(255, 255, 255, 0.16) var(--p, 50%)
  );
  outline: none;
  cursor: pointer;
}
.gq-pp-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--wine-lt);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s;
}
.gq-pp-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}
.gq-pp-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--wine-lt);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* Fokus-Ring: Gold mit voller Deckkraft (≈7:1 auf dem Anthrazit-Panel),
   abgesetzt durch einen dunklen Innenring – erfüllt WCAG 1.4.11. */
.gq-pp-range:focus-visible {
  box-shadow: 0 0 0 2px var(--slate-dk), 0 0 0 4px var(--gold);
}

/* Anlass-Buttons */
.gq-pp-occ-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gq-pp-occ {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: left;
}
.gq-pp-occ:hover {
  background: rgba(255, 255, 255, 0.12);
}
.gq-pp-occ.on {
  background: rgba(184, 57, 93, 0.16);
  border-color: var(--wine-lt);
  color: var(--wine-lt);
}

/* Segment-Buttons */
.gq-pp-seg {
  display: flex;
  gap: 6px;
}
.gq-pp-seg-hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-style: italic;
}
.gq-pp-seg-btn {
  flex: 1;
  padding: 9px 6px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.gq-pp-seg-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.gq-pp-seg-btn.on {
  background: #fff;
  border-color: #fff;
  color: var(--slate-dk);
}

/* Toggle */
.gq-pp-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-top: 4px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
}
.gq-pp-toggle small {
  display: block;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.gq-pp-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gq-pp-toggle-track {
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.gq-pp-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-pp-toggle input:checked + .gq-pp-toggle-track {
  background: var(--wine-lt);
  border-color: var(--wine-lt);
}
.gq-pp-toggle input:checked + .gq-pp-toggle-track::after {
  transform: translateX(20px);
}
.gq-pp-toggle input:focus-visible + .gq-pp-toggle-track {
  box-shadow: 0 0 0 2px var(--slate-dk), 0 0 0 4px var(--gold);
}
.gq-pp-occ:focus-visible,
.gq-pp-seg-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── Getränke-Mix-Regler ── */
.gq-pp-mix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.gq-pp-mix-reset {
  background: none;
  border: none;
  /* größere Tap-Fläche, Optik via negativem Margin unverändert */
  padding: 8px 6px;
  margin: -8px -6px;
  cursor: pointer;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.gq-pp-mix-reset:hover {
  color: #fff;
}
.gq-pp-mix-row {
  display: grid;
  grid-template-columns: 96px 1fr 40px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gq-pp-mix-name {
  font-family: var(--font-b);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}
.gq-pp-range--mix {
  margin: 0;
  min-width: 0;
}
.gq-pp-mix-pct {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 12.5px;
  color: var(--wine-lt);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gq-pp-mix-note {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}

/* ── Ergebnisse ── */
.gq-pp-results {
  padding: 28px 30px 30px;
  min-width: 0;
}
.gq-pp-stats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
.gq-pp-stat {
  background: var(--cream);
  border: 1.5px solid var(--cream-border);
  border-radius: var(--r);
  padding: 16px 18px;
}
.gq-pp-stat-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gq-pp-stat-big .gq-pp-stat-num {
  font-size: 42px;
  color: var(--red);
}
.gq-pp-stat-unit {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-sm);
  margin-left: 5px;
}
.gq-pp-stat-lbl {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-sm);
  margin-top: 3px;
}

.gq-pp-block {
  margin-bottom: 26px;
}
.gq-pp-block-title {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gq-pp-block-title::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: var(--border);
}

/* Getränkemix-Balken */
.gq-pp-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}
.gq-pp-bar-label {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-md);
}
.gq-pp-bar-track {
  height: 16px;
  border-radius: 40px;
  background: #f0f3f7;
  overflow: hidden;
}
.gq-pp-bar {
  position: relative;
  height: 100%;
  border-radius: 40px;
  transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.gq-pp-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  animation: ppSheen 3.2s ease-in-out infinite;
}
@keyframes ppSheen {
  0%, 55% {
    background-position: 130% 0;
  }
  100% {
    background-position: -90% 0;
  }
}
.gq-pp-bar--beer {
  background: linear-gradient(180deg, #f8d56b, var(--gold-dk));
}
.gq-pp-bar--soft {
  background: linear-gradient(180deg, #ff9f43, #e07b1f);
}
.gq-pp-bar--water {
  background: linear-gradient(180deg, #6fb8ec, var(--blue));
}
.gq-pp-bar--wine {
  background: linear-gradient(180deg, #b04a66, #7e2c44);
}
.gq-pp-bar--sekt {
  background: linear-gradient(180deg, #f3e0b0, #d9b76a);
}
.gq-pp-bar--spirits {
  background: linear-gradient(180deg, #9286e0, #5d4fc0);
}
.gq-pp-bar-val {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Einkaufslisten-Karten */
.gq-pp-packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.gq-pp-pack {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 16px 16px 14px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gq-pp-pack:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh1);
}
.gq-pp-pack--hl {
  background: rgba(184, 57, 93, 0.1);
  border-color: var(--wine-lt);
}
.gq-pp-pack-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}
.gq-pp-pack--hl .gq-pp-pack-num {
  color: var(--wine);
}
.gq-pp-pack-unit {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  margin-top: 6px;
}
.gq-pp-pack-sub {
  font-size: 11.5px;
  color: var(--text-sm);
  margin-top: 2px;
}

.gq-pp-tip {
  margin-top: 14px;
  background: rgba(184, 57, 93, 0.12);
  border: 1px solid rgba(142, 34, 68, 0.35);
  border-left: 4px solid var(--wine-lt);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b5410;
}

/* Extras */
.gq-pp-extras {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gq-pp-extra {
  background: var(--blue-xlt);
  border: 1.5px solid var(--blue-lt);
  border-radius: 40px;
  padding: 7px 15px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--blue-dk);
}

/* Aktionen */
.gq-pp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gq-pp-printmsg {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--wine);
  font-family: var(--font-h);
}
.gq-pp-note {
  font-size: 12.5px;
  color: var(--text-sm);
  margin-top: 14px;
  line-height: 1.6;
}

/* ── Verleih (auf Blau) ── */
.gq-pp-verleih {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gq-pp-verleih-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: 24px 22px;
  transition: background 0.2s, transform 0.2s;
}
.gq-pp-verleih-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}
.gq-pp-verleih-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-sm);
  background: rgba(184, 57, 93, 0.16);
  border: 1px solid rgba(184, 57, 93, 0.35);
  color: var(--wine-lt);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.gq-pp-verleih-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  margin-bottom: 6px;
}
.gq-pp-verleih-dsc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.6;
}
.gq-pp-verleih-note {
  margin-top: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

/* ── Countdown-Timeline ── */
.gq-pp-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 0;
}
.gq-pp-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Gestrichelter Connector hinter den Plaketten – die opaken Kreise decken die
   Enden ab, sodass nur das Stück zwischen zwei Schritten sichtbar bleibt. */
.gq-pp-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: calc(100% + 24px);
  height: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    90deg,
    var(--blue-lt) 0 7px,
    transparent 7px 14px
  );
  z-index: 0;
}
.gq-pp-step-dot {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--blue-dk) 0%, var(--blue) 100%);
  border: 3px solid #fff;
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(12, 54, 101, 0.28);
  /* schwebt mit kleinem Abstand über der Karte; der Connector liegt auf
     Plaketten-Höhe und damit frei über den Karten. */
  margin-bottom: 18px;
}
.gq-pp-step-card {
  width: 100%;
  flex: 1;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 24px 22px;
  text-align: center;
}
.gq-pp-step-when {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--red);
  margin-bottom: 7px;
}
.gq-pp-step-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18.5px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.gq-pp-step-dsc {
  font-size: 14px;
  color: var(--text-md);
  line-height: 1.6;
}

/* ── Scroll-Reveal (nur aktiv, wenn ScrollFx "gq-fx" auf <body> setzt) ── */
body.gq-fx [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.gq-fx [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
body.gq-fx [data-reveal-delay="1"] {
  transition-delay: 0.08s;
}
body.gq-fx [data-reveal-delay="2"] {
  transition-delay: 0.16s;
}
body.gq-fx [data-reveal-delay="3"] {
  transition-delay: 0.24s;
}
body.gq-fx [data-reveal-delay="4"] {
  transition-delay: 0.32s;
}
body.gq-fx [data-reveal-delay="5"] {
  transition-delay: 0.4s;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .gq-pp-grid {
    grid-template-columns: 320px 1fr;
  }
  .gq-pp-hero-kroni {
    width: 260px;
  }
}
@media (max-width: 900px) {
  .gq-pp-grid {
    grid-template-columns: 1fr;
  }
  .gq-pp-verleih {
    grid-template-columns: 1fr 1fr;
  }
  .gq-pp-timeline {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .gq-pp-step:nth-child(2)::after {
    display: none;
  }
}
@media (max-width: 640px) {
  .gq-pp-hero {
    padding: 34px 0 42px;
  }
  .gq-pp-hero-kroni {
    position: absolute;
    right: -28px;
    bottom: -8px;
    width: min(50vw, 200px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
  }
  .gq-pp-hero-in {
    position: relative;
  }
  .gq-pp-hero-body {
    position: relative;
    z-index: 1;
  }
  .gq-pp-results {
    padding: 22px 18px 24px;
  }
  .gq-pp-panel {
    padding: 22px 18px 26px;
  }
  .gq-pp-stats {
    grid-template-columns: 1fr 1fr;
  }
  .gq-pp-stat-big {
    grid-column: 1 / -1;
  }
  .gq-pp-bar-row {
    grid-template-columns: 86px 1fr 56px;
    gap: 8px;
  }
  .gq-pp-verleih {
    grid-template-columns: 1fr;
  }
  .gq-pp-timeline {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .gq-pp-step::after {
    display: none !important;
  }
  .gq-pp-actions .gq-btn {
    width: 100%;
  }
  /* Touch-Ziele auf mind. 44 px (Apple/Android-Empfehlung) */
  .gq-pp-seg-btn,
  .gq-pp-occ {
    min-height: 44px;
  }
  .gq-pp-range {
    height: 8px;
  }
  .gq-pp-range::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .gq-pp-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gq-pp-hero-accent {
    animation: none;
  }
  .gq-pp-bar {
    transition: none;
  }
  .gq-pp-bar::after {
    animation: none;
  }
  body.gq-fx [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Großflächige Dauer-Animationen abschalten (WCAG 2.3.3) – gilt
     seitenübergreifend für Hero-Maskottchen und die Blasen-Deko. */
  .gq-float {
    animation: none;
  }
  .gq-bubble-zone,
  .gq-fw-zone {
    display: none;
  }
}

/* Visually-hidden: Inhalt nur für Screenreader (z. B. Status-Ansagen). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════
   SERVICE-SEITE  (gq-svc-*)
══════════════════════════════════════════════════ */

/* Verleih-Feature-Karten (auf hell) */
.gq-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .gq-svc-grid {
    grid-template-columns: 1fr;
  }
}
.gq-svc-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px 26px;
  box-shadow: var(--sh1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s,
    border-color 0.25s;
}
.gq-svc-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--blue-mid));
}
.gq-svc-card--red::before {
  background: linear-gradient(90deg, var(--red), #e0344f);
}
.gq-svc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh3);
  border-color: var(--blue-lt);
}
.gq-svc-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(160deg, var(--blue-dk), var(--blue));
  box-shadow: 0 8px 20px rgba(28, 107, 184, 0.28);
}
.gq-svc-card--red .gq-svc-icon {
  background: linear-gradient(160deg, var(--red-dk), var(--red));
  box-shadow: 0 8px 20px rgba(200, 16, 46, 0.28);
}
.gq-svc-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.gq-svc-dsc {
  font-size: 14.5px;
  color: var(--text-md);
  line-height: 1.65;
  margin-bottom: 18px;
  flex: 1;
}
.gq-svc-link {
  align-self: flex-start;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
}
.gq-svc-card--red .gq-svc-link {
  color: var(--red);
}
.gq-svc-card:hover .gq-svc-link {
  gap: 10px;
}
.gq-svc-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--gold);
  color: #3a2c00;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 40px;
}

/* 3-Schritte Mini-Flow */
.gq-svc-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 640px) {
  .gq-svc-steps {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.gq-svc-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gq-svc-step-n {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-xlt);
  color: var(--blue);
  border: 1.5px solid var(--blue-lt);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.gq-svc-step-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.gq-svc-step-dsc {
  font-size: 13.5px;
  color: var(--text-md);
  line-height: 1.55;
}

/* Markt-Services auf Blau – Glaskarten */
.gq-svc-blue-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
  .gq-svc-blue-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .gq-svc-blue-grid {
    grid-template-columns: 1fr;
  }
}
.gq-svc-glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: 24px 22px;
  transition: background 0.2s, transform 0.2s;
}
.gq-svc-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}
.gq-svc-glass-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(245, 200, 66, 0.16);
  border: 1px solid rgba(245, 200, 66, 0.32);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.gq-svc-glass-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  margin-bottom: 6px;
}
.gq-svc-glass-dsc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.6;
}

/* Bezahl-Streifen */
.gq-svc-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.gq-svc-pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  padding: 9px 18px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
}
.gq-svc-pay-chip svg {
  opacity: 0.85;
}

/* ── Rechtstext-Seiten (Impressum / Datenschutz) ── */
.gq-legal {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--font-b);
  color: var(--text-md);
  font-size: 15px;
  line-height: 1.75;
  /* Fließtext gehört auf eine echte weiße Karte, nicht auf die Holzmaserung. */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh1);
  padding: clamp(24px, 5vw, 44px);
}
.gq-legal h2 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 25px);
  color: var(--text);
  letter-spacing: -0.01em;
  margin: 44px 0 16px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--border);
}
.gq-legal > h2:first-child {
  margin-top: 0;
}
.gq-legal h3 {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  margin: 28px 0 8px;
}
.gq-legal p {
  margin: 0 0 14px;
}
.gq-legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.gq-legal a:hover {
  color: var(--blue-dk);
}
.gq-legal ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.gq-legal li {
  margin-bottom: 5px;
}
.gq-legal strong {
  color: var(--text);
  font-weight: 700;
}
/* Adress-/Info-Karte (z. B. verantwortliche Stellen im Impressum) */
.gq-legal-card {
  /* Hebt sich sonst nicht von der weißen .gq-legal-Karte ab. */
  background: var(--blue-xlt);
  border: 1.5px solid var(--border);
  border-left: 5px solid var(--blue);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 18px;
  line-height: 1.65;
}
.gq-legal-card h3 {
  margin-top: 0;
}
.gq-legal-card-region {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-bottom: 6px;
}
/* Formaler Hervorhebungs-Block (z. B. Widerspruch Art. 21 DSGVO) */
.gq-legal-callout {
  background: var(--blue-xlt);
  border: 1px solid var(--blue-lt);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-md);
}
.gq-legal-stand {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-sm);
  font-size: 13px;
}

/* ── Service: Trust-Leiste (Kennzahlen) ── */
.gq-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}
@media (max-width: 700px) {
  .gq-trust {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}
.gq-trust-item {
  text-align: center;
  padding: 18px 12px;
  background: var(--cream);
  border: 1.5px solid var(--cream-border);
  border-radius: var(--r);
}
.gq-trust-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.gq-trust-num .star {
  color: var(--gold);
}
.gq-trust-lbl {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-sm);
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Service: Kundenstimmen ── */
.gq-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 860px) {
  .gq-testi-grid {
    grid-template-columns: 1fr;
  }
}
.gq-testi {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 26px 24px;
  box-shadow: var(--sh1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gq-testi-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}
.gq-testi-quote {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-md);
  flex: 1;
}
.gq-testi-quote::before {
  content: "\201E"; /* „ */
}
.gq-testi-quote::after {
  content: "\201C"; /* " */
}
.gq-testi-who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gq-testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--blue-dk), var(--blue));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
}
.gq-testi-name {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.gq-testi-loc {
  font-size: 12.5px;
  color: var(--text-sm);
}

/* ── Service: FAQ-Akkordeon (native <details>) ── */
.gq-faq {
  max-width: 760px;
}
.gq-faq-item {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: #fff;
  margin-bottom: 10px;
  box-shadow: var(--sh1);
  overflow: hidden;
}
.gq-faq-item[open] {
  border-color: var(--blue-lt);
}
.gq-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.gq-faq-q::-webkit-details-marker {
  display: none;
}
.gq-faq-q::after {
  content: "";
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.gq-faq-item[open] .gq-faq-q::after {
  transform: rotate(-135deg);
}
.gq-faq-q:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.gq-faq-a {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-md);
}

/* ══════════════════════════════════════════════════
   FEHLERSEITEN (gq-err-*)
══════════════════════════════════════════════════ */
.gq-err {
  min-height: 64vh;
  display: flex;
  align-items: center;
}
.gq-err-in {
  text-align: center;
  max-width: 580px;
  margin: 0 auto;
}
.gq-err-kroni {
  width: 150px;
  margin: 0 auto 4px;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5));
}
.gq-err-code {
  font-family: "Barlow Condensed", var(--font-h), sans-serif;
  font-weight: 800;
  font-size: clamp(72px, 16vw, 150px);
  line-height: 0.9;
  color: #fff;
  letter-spacing: 0.02em;
}
.gq-err-code .accent {
  color: var(--red-lt);
}
.gq-err-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 30px);
  color: #fff;
  margin: 4px 0 10px;
}
.gq-err-p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 26px;
}
.gq-err-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════
   EXKLUSIVMARKEN (gq-brand-*)
══════════════════════════════════════════════════ */
.gq-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 860px) {
  .gq-brand-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .gq-brand-grid {
    grid-template-columns: 1fr;
  }
}
.gq-brand-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--sh1);
  text-decoration: none;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s,
    border-color 0.25s;
}
.gq-brand-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh3);
  border-color: var(--blue-lt);
}
/* Logo-Bereich der Marken-Karte (echte Marken-Logos, /brands/*). */
.gq-brand-logo {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.gq-brand-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.gq-brand-mono {
  width: 58px;
  height: 58px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-family: "Barlow Condensed", var(--font-h), sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: #fff;
}
.gq-brand-mono--blue {
  background: linear-gradient(160deg, var(--blue-dk), var(--blue));
}
.gq-brand-mono--red {
  background: linear-gradient(160deg, var(--red-dk), var(--red));
}
.gq-brand-mono--gold {
  background: linear-gradient(160deg, var(--gold-dk), var(--gold));
  color: #3a2c00;
}
.gq-brand-mono--slate {
  background: linear-gradient(160deg, var(--slate-dk), var(--slate));
}
.gq-brand-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.gq-brand-tag {
  font-size: 13.5px;
  color: var(--text-md);
  line-height: 1.55;
  flex: 1;
}
.gq-brand-link {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--blue);
  display: inline-flex;
  gap: 6px;
  transition: gap 0.2s;
}
.gq-brand-card:hover .gq-brand-link {
  gap: 10px;
}

/* GFGH-Partner (zwei breite Karten auf Blau) */
.gq-gfgh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px) {
  .gq-gfgh-grid {
    grid-template-columns: 1fr;
  }
}
.gq-gfgh-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: 26px 28px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.gq-gfgh-card:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}
.gq-gfgh-eyebrow {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}
/* Weiße Logo-Platte für die GFGH-Logos (Querformat, weißer Hintergrund). */
.gq-gfgh-logo {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 16px 20px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}
.gq-gfgh-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.gq-gfgh-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 20px;
  color: #fff;
}
.gq-gfgh-link {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
  transition: gap 0.2s, color 0.2s;
}
.gq-gfgh-card:hover .gq-gfgh-link {
  gap: 10px;
  color: var(--gold);
}

/* ══════════════════════════════════════════════════
   MARKT-DETAILSEITE  (/maerkte/[id]  – gq-mktd-*)
══════════════════════════════════════════════════ */
.gq-mktd-hero {
  background:
    radial-gradient(
      120% 90% at 100% 0%,
      rgba(28, 107, 184, 0.4),
      transparent 60%
    ),
    /* Vertikal dunkel→hell (Marken-Blau) wie die übrigen Heroes. Kein Wellen-
       Übergang darunter → keine Naht, freie Farbwahl. */ linear-gradient(
        180deg,
        #0a2e56 0%,
        #1a63ad 55%,
        #2a7ac6 100%
      );
  color: #fff;
  padding: 26px 0 40px;
  position: relative;
}
.gq-mktd-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.gq-mktd-crumbs a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.gq-mktd-crumbs a:hover {
  color: #fff;
}
.gq-mktd-crumbs-cur {
  color: #fff;
}
.gq-mktd-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 14px;
  border-radius: 40px;
  margin-bottom: 14px;
}
.gq-mktd-hero-badge svg {
  color: var(--red-lt);
}
.gq-mktd-h1 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(26px, 5.5vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 12px;
  text-wrap: balance;
}
.gq-mktd-sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
}

.gq-mktd-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) {
  .gq-mktd-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.gq-mktd-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gq-mktd-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 22px 24px;
}
.gq-mktd-card-ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-xlt);
  border: 1.5px solid var(--blue-lt);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gq-mktd-card-body {
  min-width: 0;
}
.gq-mktd-card-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
.gq-mktd-card-txt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-md);
}
.gq-mktd-card-meta {
  font-size: 13px;
  color: var(--text-sm);
  margin-top: 6px;
}
.gq-mktd-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.gq-mktd-link:hover {
  text-decoration: underline;
}
.gq-mktd-hours {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gq-mktd-hours li {
  font-size: 14.5px;
  color: var(--text-md);
  font-weight: 600;
}
.gq-mktd-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.gq-mktd-feat {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--blue-dk);
  background: var(--blue-xlt);
  border: 1px solid var(--blue-lt);
  border-radius: 40px;
  padding: 5px 12px;
}

.gq-mktd-mapwrap {
  position: sticky;
  top: 90px;
}
@media (max-width: 860px) {
  .gq-mktd-mapwrap {
    position: static;
    order: -1;
  }
}
.gq-mkt-minimap {
  width: 100%;
  height: 420px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh1);
  background: var(--blue-xlt);
}
@media (max-width: 860px) {
  .gq-mkt-minimap {
    height: 300px;
  }
}
.gq-mkt-minimap--empty {
  display: flex;
}

.gq-mktd-offers {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: linear-gradient(135deg, #0c3665 0%, #1c6bb8 100%);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  box-shadow: var(--sh1);
}
.gq-mktd-offers-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  color: #fff;
  margin-bottom: 4px;
}
.gq-mktd-offers-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}
.gq-mktd-offers .gq-btn {
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .gq-mktd-offers {
    padding: 20px;
  }
  .gq-mktd-offers .gq-btn {
    width: 100%;
  }
}
.gq-mktd-back {
  margin-top: 28px;
  text-align: center;
}
.gq-mktd-back a {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--blue);
  text-decoration: none;
}
.gq-mktd-back a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   PAYBACK-Seite – eigener Marken-Look (Blau + Gelb).
   Nur hier: kein Holz-Creme, sondern zartes PAYBACK-Blau mit dezentem
   Punktraster und weichen Blau/Gelb-Glows. Der Rest der Seite behält die
   Creme-/Holz-Textur (globale .bg-white / .bg-cream bleiben unberührt).
   ══════════════════════════════════════════════════════════════════════ */

/* Helle Flächen (inkl. Wellen-Streifen): Holz raus, klares PAYBACK-Blau rein.
   Bewusst kräftig genug, damit der Wellen-Streifen nicht „weiß" gegen das
   Dunkelblau wirkt. */
body.page-payback .bg-white {
  background-color: #c6dcf2;
  /* gleiches Punktraster wie die Sektionen → Wellen-Streifen wirkt nicht „weiß" */
  background-image: radial-gradient(
    rgba(0, 48, 135, 0.08) 1.4px,
    transparent 1.4px
  );
  background-size: 23px 23px;
  background-repeat: repeat;
}
/* Sektionen erben Grundton + gleichmäßiges Punktraster von .bg-white oben –
   bewusst KEINE Ecken-Glows (die erzeugten einen Links-Rechts-Helligkeitsverlauf,
   v. a. an den Wellen sichtbar). So ist die Fläche überall gleichmäßig. */

/* Blaue Sektion: dezente, SYMMETRISCHE Tiefe (zentriert, kein L-R-Verlauf). */
body.page-payback section.bg-blue {
  background-image: radial-gradient(
    120% 90% at 50% 0%,
    rgba(255, 215, 0, 0.07),
    transparent 60%
  );
}
/* Hero-Pill in PAYBACK-Gelb getönt (Marken-Pop). */
body.page-payback .gq-apghero-pill {
  background: rgba(255, 215, 0, 0.16);
  border-color: rgba(255, 215, 0, 0.5);
  color: #fff;
}
/* Hero-Tag-Pills: roter Punkt → PAYBACK-Gelb. */
body.page-payback .gq-hero-pill::before {
  background: #ffd700;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.25);
}
/* Gelber Akzent-Unterstrich unter den Sektions-Titeln. */
body.page-payback .sec-title-dark {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
body.page-payback .sec-title-dark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54px;
  height: 4px;
  border-radius: 2px;
  background: #ffd700;
  transform: translateX(-50%);
}

/* ══════════════════════════════════════════════════
   EIGENMARKEN-LOGO-BAND (Startseite)  (gq-marquee / gq-brandstrip-*)
══════════════════════════════════════════════════ */
.gq-brandstrip-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.gq-marquee {
  overflow: hidden;
  /* Sanftes Ein-/Ausblenden an den Rändern */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.gq-marquee-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  padding: 4px 0;
  animation: gqMarquee 36s linear infinite;
}
.gq-marquee:hover .gq-marquee-track {
  animation-play-state: paused;
}
@keyframes gqMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* Weiße Chips: Logos liegen auf reinem Weiß (NICHT auf der Holzmaserung),
   damit sie klar lesbar sind – siehe Design-Grundregel in CLAUDE.md. */
.gq-marquee-logo {
  flex: 0 0 auto;
  height: 96px;
  width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh1);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.gq-marquee-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2);
  border-color: var(--blue-lt);
}
.gq-marquee-logo:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.gq-marquee-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* dezente Graustufe → volle Farbe beim Hover; deutlich lesbarer als vorher */
  filter: grayscale(0.85);
  opacity: 0.82;
  transition: filter 0.3s, opacity 0.3s;
}
.gq-marquee-logo:hover img {
  filter: none;
  opacity: 1;
}
@media (max-width: 560px) {
  .gq-marquee-track {
    gap: 14px;
  }
  .gq-marquee-logo {
    height: 80px;
    width: 170px;
    padding: 12px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gq-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gq-marquee-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 28px 48px;
  }
  /* Duplikat-Logos im statischen Zustand ausblenden (nur die ersten 6 zeigen). */
  .gq-marquee-track > :nth-child(n+7) {
    display: none;
  }
  .gq-marquee-logo img {
    filter: none;
    opacity: 1;
  }
}

/* ── Admin: sticky Toolbar über langen Listen (Suche/Filter/Aktionen) ── */
.gq-adm-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 14px;
  background: #f1f5f9;
  border-bottom: 1.5px solid var(--border);
}
.gq-adm-toolbar-count {
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-sm);
}

/* ── Admin: kompakte Datentabelle ── */
.gq-adm-table-wrap {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh1);
  overflow: hidden;
}
@media (max-width: 768px) {
  .gq-adm-table-wrap {
    overflow-x: auto;
  }
}
.gq-adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.gq-adm-table th {
  text-align: left;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sm);
  background: #f8fafc;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
.gq-adm-table td {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-md);
  vertical-align: middle;
}
.gq-adm-table tbody tr:first-child td {
  border-top: none;
}
.gq-adm-table tbody tr:hover {
  background: #f8fafc;
}
.gq-adm-table-name {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
}
.gq-adm-table-actions-cell {
  text-align: right;
  white-space: nowrap;
}
.gq-adm-table-actions {
  display: inline-flex;
  gap: 6px;
}

/* ── Admin: geteilter Leerzustand ── */
.gq-adm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: var(--r);
  color: var(--text-sm);
}
.gq-adm-empty-title {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-md);
}
.gq-adm-empty-sub {
  font-size: 13.5px;
}

/* ── Admin: Dashboard-Überblick (verlinkte Kennzahlen) ── */
.gq-adm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .gq-adm-stats {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .gq-adm-stats {
    grid-template-columns: 1fr;
  }
}
.gq-adm-stat {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--sh1);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gq-adm-stat:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--sh2);
}
.gq-adm-stat-ic {
  color: var(--blue);
  margin-bottom: 8px;
}
.gq-adm-stat-num {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 3px;
}
.gq-adm-stat-label {
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-sm);
}
.gq-adm-stat--alert {
  border-color: #fcd9b6;
  background: #fffbf5;
}
.gq-adm-stat--alert .gq-adm-stat-ic,
.gq-adm-stat--alert .gq-adm-stat-label {
  color: var(--amber);
}

/* ── Neuigkeiten: klickbare Karten + Detailseite ── */
.gq-news-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.gq-news-link:hover {
  transform: translateY(-3px);
}
.gq-news-link:hover .gq-news-card {
  box-shadow: 0 14px 30px rgba(12, 54, 101, 0.16);
  border-color: var(--blue-lt);
}
/* „Zurück"-Link über dem Beitrag */
.gq-news-back {
  display: inline-block;
  margin-bottom: 20px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
  text-decoration: none;
}
.gq-news-back:hover {
  text-decoration: underline;
}
/* Großes Beitragsbild auf der Detailseite (weiße Karte, responsiv) */
.gq-news-detail-img {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 28px;
  text-align: center;
}
.gq-news-detail-img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

/* Chips (Kategorie/Tag) */
.gq-news-chip {
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 12px;
  border-radius: 40px;
  white-space: nowrap;
}
.gq-news-chip-sm {
  font-size: 10px;
  padding: 2px 10px;
  align-self: flex-start;
}

/* Angepinnter Beitrag (breite Karte) */
.gq-news-pinned {
  background: linear-gradient(135deg, #0c3665 0%, #1c6bb8 100%);
  border-radius: var(--r-lg);
  padding: clamp(22px, 5vw, 36px) clamp(20px, 5vw, 44px);
  display: flex;
  gap: 36px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.gq-news-pinned-img {
  width: clamp(280px, 42%, 560px);
  height: auto;
  border-radius: var(--r);
  flex-shrink: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
.gq-news-pinned-h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 30px);
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.18;
}
.gq-news-pinned-teaser {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin: 0 0 14px;
  max-width: 520px;
}
.gq-news-pinned-date {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-h);
  font-weight: 600;
}
.gq-news-pinned-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
}

/* Karten-Raster */
.gq-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}
.gq-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh1);
  transition: box-shadow 0.22s, border-color 0.22s;
}
.gq-news-card-img {
  background: var(--blue-xlt);
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gq-news-card-img img {
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.15));
}
.gq-news-card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gq-news-card-h3 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
  line-height: 1.3;
  margin: 10px 0 8px;
}
.gq-news-card-teaser {
  font-size: 13px;
  color: var(--text-md);
  line-height: 1.6;
  margin: 0 0 14px;
}
.gq-news-card-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.gq-news-card-date {
  font-size: 12px;
  color: var(--text-sm);
  font-family: var(--font-h);
  font-weight: 600;
}
.gq-news-card-more {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--blue);
}

/* ── Popup / Modal ── */
.gq-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 18, 30, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 64px) 16px;
  overflow-y: auto;
  animation: gq-modal-fade 0.16s ease;
}
@keyframes gq-modal-fade {
  from {
    opacity: 0;
  }
}
.gq-modal {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: gq-modal-pop 0.18s ease;
}
@keyframes gq-modal-pop {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}
.gq-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: background 0.15s, transform 0.15s;
}
.gq-modal-x:hover {
  background: #fff;
  transform: rotate(90deg);
}
.gq-modal-scroll {
  max-height: 88vh;
  overflow-y: auto;
}
.gq-modal-img {
  background: var(--blue-xlt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.gq-modal-img img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  border-radius: var(--r-sm);
}
.gq-modal-body {
  padding: 24px clamp(20px, 4vw, 34px) 30px;
  font-family: var(--font-b);
  color: var(--text-md);
  font-size: 15px;
  line-height: 1.75;
}
.gq-modal-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gq-modal-date {
  font-size: 12px;
  color: var(--text-sm);
  font-family: var(--font-h);
  font-weight: 600;
}
.gq-modal-h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 14px;
}
.gq-modal-body p {
  margin: 0 0 14px;
}
@media (max-width: 560px) {
  .gq-news-pinned-img {
    width: 100%;
  }
}

/* ── Admin: Bildauswahl (Upload / Bibliothek statt Pfad eintippen) ── */
.gq-imgpick {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gq-imgpick-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gq-imgpick-preview {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #f8fafc;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gq-imgpick-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.gq-imgpick-empty {
  font-size: 11px;
  color: var(--text-sm);
  text-align: center;
  padding: 0 6px;
}
.gq-imgpick-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gq-imgpick-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gq-imgpick-lib {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #f8fafc;
  max-height: 240px;
  overflow-y: auto;
}
.gq-imgpick-lib-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-sm);
  padding: 8px;
}
.gq-imgpick-lib-item {
  aspect-ratio: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.gq-imgpick-lib-item:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.gq-imgpick-lib-item.is-sel {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(28, 107, 184, 0.3);
}
.gq-imgpick-lib-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Admin: Vorschau der Ankündigungs-Leiste ── */
.gq-adm-announce-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: linear-gradient(
    90deg,
    var(--red-dk),
    var(--red) 50%,
    var(--red-dk)
  );
  color: #fff;
  border-radius: var(--r-sm);
  padding: 11px 16px;
  margin-bottom: 16px;
  font-family: var(--font-h);
  font-weight: 700;
  font-size: 13.5px;
}
.gq-adm-announce-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.gq-adm-announce-preview-text {
  flex: 1;
  min-width: 140px;
}
.gq-adm-announce-preview-cta {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 40px;
  padding: 3px 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   COOKIE-/CONSENT-BANNER  (gq-consent / mkt-map-consent)
══════════════════════════════════════════════════ */
.gq-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  background: #fff;
  border-top: 3px solid var(--gold);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  padding: 18px 0;
  animation: menuRise 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.gq-consent-in {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.gq-consent-text {
  flex: 1;
  min-width: 280px;
}
.gq-consent-ttl {
  display: block;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 4px;
}
.gq-consent-text p {
  font-size: 13.5px;
  color: var(--text-md);
  line-height: 1.6;
  max-width: 780px;
}
.gq-consent-text a {
  color: var(--blue);
  font-weight: 700;
}
.gq-consent-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
/* „Auswählen" steht gleichrangig neben Ablehnen und Zustimmen (erste Ebene),
   tritt farblich aber zurück — es ist der Weg zur Feinauswahl, keine dritte
   Entscheidung. */
.gq-consent-more {
  border-color: var(--border);
  color: var(--text-md);
}
.gq-consent-more:hover {
  border-color: var(--blue);
  color: var(--blue-dk);
  background: transparent;
}

/* ── Feinauswahl (klappt in derselben Leiste auf) ── */
.gq-consent-opts {
  /* Volle Breite in einer eigenen Zeile: `.gq-consent-in` ist ein
     umbrechendes Flexbett, `order: 3` schiebt den Block hinter Text und
     Knöpfe — auf dem Handy also direkt unter die Knopfreihe. */
  flex: 1 1 100%;
  order: 3;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.gq-consent-opts fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.gq-consent-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
}
.gq-consent-opt:hover {
  border-color: var(--blue-lt);
}
.gq-consent-opt.is-fest {
  background: var(--blue-xlt);
  cursor: default;
}
.gq-consent-opt input {
  /* Reicht als Antippfläche (44 px hoch ist die ganze Zeile). */
  width: 19px;
  height: 19px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--blue);
  cursor: inherit;
}
.gq-consent-opt-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gq-consent-opt-txt strong {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
}
.gq-consent-opt-txt span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-md);
}
.gq-consent-opt-fest {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-dk);
  background: #fff;
  border: 1px solid var(--blue-lt);
  border-radius: 999px;
  padding: 2px 8px;
}
.gq-consent-opts-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 13px;
}
.gq-consent-opts-foot p {
  margin: 0;
  font-size: 12px;
  color: var(--text-sm);
}
@media (max-width: 600px) {
  .gq-consent-in {
    padding: 0 18px;
  }
  .gq-consent-actions {
    width: 100%;
  }
  .gq-consent-actions .gq-btn {
    flex: 1;
  }
  /* Auf dem Handy passen nur zwei Knöpfe nebeneinander. „Auswählen" rutscht
     deshalb in die zweite Zeile — damit stehen Ablehnen und Zustimmen
     nebeneinander und gleich groß. Andernfalls läge „Alle akzeptieren"
     allein auf voller Breite und hätte sichtbar mehr Gewicht als
     „Nur notwendige"; gleichwertig muss beides sein. */
  .gq-consent-more {
    order: 3;
    flex-basis: 100%;
  }
  /* Aufgeklappt wird die Leiste hoch. Sie darf den Bildschirm nicht ganz
     füllen — sonst ist „Auswahl speichern" nicht mehr erreichbar. */
  .gq-consent {
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .gq-consent-opts-foot .gq-btn {
    width: 100%;
  }
}

/* Karten-Platzhalter (vor Consent) – große Karte */
.mkt-map-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-xlt);
  border: 1.5px dashed var(--blue-lt);
}
.mkt-map-consent-in {
  text-align: center;
  max-width: 360px;
  padding: 28px;
}
.mkt-map-consent-in svg {
  color: var(--blue);
  margin-bottom: 10px;
}
.mkt-map-consent-in p {
  font-size: 14px;
  color: var(--text-md);
  line-height: 1.6;
  margin-bottom: 16px;
}
.mkt-map-consent-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

/* Karten-Platzhalter – Mini-Karte (Markt-Detailseite) */
.gq-mkt-minimap-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  background: var(--blue-xlt);
  border: 1.5px dashed var(--blue-lt);
}
.gq-mkt-minimap-consent p {
  font-size: 13px;
  color: var(--text-md);
  line-height: 1.5;
  margin: 0;
}

/* Footer-Link "Cookie-Einstellungen" (Button als Link gestylt) */
.gq-foot-cookie {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  /* Erbt die Schrift der Zeile: Als einziges <button> zwischen lauter <a>
     stand „Cookie-Einstellungen" vorher in der Fließtextschrift und sah
     dadurch heller und fremd aus. */
  font-family: inherit;
  font-size: 14px;
  transition: color 0.18s;
}
.gq-foot-cookie:hover {
  color: #fff;
}

/* ── Admin: Rechtstexte-Editor (HTML + Live-Vorschau) ── */
.gq-legal-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1000px) {
  .gq-legal-edit {
    grid-template-columns: 1fr;
  }
}
.gq-adm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 2;
}
.gq-legal-preview {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  max-height: 480px;
  overflow: auto;
}
/* Vorschau entspricht dem öffentlichen Stand, nur kompakter. */
.gq-legal-preview .gq-legal {
  max-width: none;
  font-size: 14px;
}
.gq-legal-preview .gq-legal h2 {
  font-size: 19px;
  margin: 22px 0 10px;
}
.gq-legal-preview .gq-legal h3 {
  font-size: 15px;
}

/* ── Admin: Marken-Editor ── */
.gq-brandedit-logo {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gq-brandedit-logo-preview {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-sm);
  font-size: 11px;
  text-align: center;
  padding: 6px;
}
.gq-brandedit-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.gq-brandedit-thumb {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 12px;
}
.gq-brandedit-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ══ EXPANSION-SEITE (/expansion) ══
   B2B-Seite für Flächenanbieter. Alle Inhaltsflächen liegen auf echten
   weißen Karten bzw. auf Blau/Dunkel – nie direkt auf der Holzmaserung
   von .bg-white (Lesbarkeit + freigestellte Karten-Grafik). */

/* Hinweis-Banner („aktuell keine Flächensuche") */
.gq-exp-notice {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1.5px solid #f3d38a;
  border-left: 5px solid var(--warn);
  border-radius: var(--r);
  padding: 20px 24px;
  box-shadow: var(--sh1);
  margin-bottom: 36px;
}
.gq-exp-notice-ico {
  flex-shrink: 0;
  color: var(--warn);
  margin-top: 1px;
}
.gq-exp-notice-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 16px;
  color: #7c4a06;
  margin-bottom: 4px;
}
.gq-exp-notice-txt {
  font-size: 14px;
  line-height: 1.65;
  color: #8a5a13;
  max-width: 70ch;
}
@media (max-width: 520px) {
  .gq-exp-notice {
    padding: 18px;
    gap: 12px;
  }
}

/* Expansionsgebiet: Karte + Grenzen */
.gq-exp-geo {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .gq-exp-geo {
    grid-template-columns: 1fr;
  }
}
.gq-exp-map {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gq-exp-map img {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 10px 26px rgba(12, 54, 101, 0.16));
}
.gq-exp-borders {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gq-exp-border {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.gq-exp-border:last-of-type {
  border-bottom: 0;
}
.gq-exp-dir {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue-xlt);
  border: 1.5px solid var(--blue-lt);
  color: var(--blue);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.gq-exp-border-lbl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  color: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.gq-exp-border-val {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
}
.gq-exp-orte {
  margin-top: 16px;
  background: var(--blue-xlt);
  border: 1.5px solid var(--blue-lt);
  border-radius: var(--r);
  padding: 16px 20px;
}
.gq-exp-orte-lbl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 3px;
}
.gq-exp-orte-val {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 16px;
  color: var(--blue-dk);
  line-height: 1.45;
}
@media (max-width: 520px) {
  .gq-exp-borders {
    padding: 22px 20px;
  }
  .gq-exp-map {
    padding: 18px;
  }
}

/* Anforderungs-Karten (blauer Abschnitt).
   340px-Minimum → am Desktop 3 Spalten, damit die 5 Karten als 3 + 2 brechen.
   Bei 260px wären es 4 Spalten und die 5. Karte stünde als Waise allein in
   Reihe 2. auto-fit bleibt, weil im CMS Karten abschaltbar sind (1–5 Stück). */
.gq-exp-krit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}
@media (max-width: 400px) {
  /* Sehr schmale Geräte: 340px-Minimum würde sonst überlaufen. */
  .gq-exp-krit-grid {
    grid-template-columns: 1fr;
  }
}
.gq-exp-krit {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r);
  padding: 24px 22px 22px;
  transition: background 0.2s, transform 0.2s;
}
.gq-exp-krit:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}
.gq-exp-krit-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: rgba(245, 200, 66, 0.16);
  border: 1px solid rgba(245, 200, 66, 0.32);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.gq-exp-krit-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  margin-bottom: 10px;
}
.gq-exp-krit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gq-exp-krit-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.gq-exp-krit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.85;
}

/* Kontakt-Abschluss (dunkel): Text + Visitenkarte */
.gq-exp-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .gq-exp-contact {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.gq-exp-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 30px 32px;
  box-shadow: var(--sh3);
  font-style: normal;
}
.gq-exp-card-tag {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--red);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.gq-exp-card-co {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.3;
}
.gq-exp-card-co2 {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-md);
}
.gq-exp-card-addr {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-md);
  margin-top: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.gq-exp-card-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}
.gq-exp-card-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 14.5px;
}
.gq-exp-card-row dt {
  flex: 0 0 62px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-sm);
}
.gq-exp-card-row dd {
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gq-exp-card-row a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}
.gq-exp-card-row a:hover {
  text-decoration: underline;
}
@media (max-width: 520px) {
  .gq-exp-card {
    padding: 24px 22px;
  }
}

/* ══ KRONIS TIPPS  (/tipps – gq-tip-*) ══
   Kampagnen-Seite aus der Design-Runde 08/2026. Eigener Namespace, keine
   Änderungen an Bestandsklassen. Bühnen = große Farbkarten im Container;
   CMS-Farben (Akzent-Verlauf, Ink, Silhouette) kommen als Inline-Styles. */

/* ── Seitenkopf ── */
.gq-tip-head {
  padding: 22px 0 4px;
}
.gq-tip-crumb {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --text-sm ergibt auf der Holzmaserung (#f6efe3) nur 3,9:1 und verfehlt
     WCAG AA; --text-md liegt bei 7,8:1. Gilt ebenso für die Rechtszeile. */
  color: var(--text-md);
  margin-bottom: 14px;
}
.gq-tip-crumb b {
  color: var(--blue-dk);
}
/* ── Aktionsband ──
   Ein leicht gekipptes, seitenbreites Rot trägt Kroni, Titel, Vorspann und
   den Laufzeit-Stempel. Es ersetzt die frühere Kopfzeile (blauer Titel +
   Sprechblase), die auf der Holzmaserung schwebte und den Kopf optisch nicht
   an die Bühnen darunter band.
   `.gq-tip-bandwrap` gibt nur senkrecht Luft — der seitliche Überstand des
   Bandes wird von `.gq-page { overflow-x: clip }` geklippt. Die Drehung sitzt
   auf `.gq-tip-band`, weil `.gq-reveal` (auf dem Wrapper) am Ende
   `transform: none` setzt und die Kippung sonst wieder verschwände. */
.gq-tip-bandwrap {
  /* Oben Platz für Kronis Kopf, unten für seine Füße — beide ragen über die
     Bandkante hinaus, und geklippt würde das sichtbar abschneiden. */
  padding: 52px 0 34px;
}
.gq-tip-band {
  position: relative;
  width: calc(100% + 120px);
  margin-left: -60px;
  transform: rotate(-1.1deg);
  background: linear-gradient(
    92deg,
    #8f0b20 0%,
    var(--red) 22%,
    var(--red) 72%,
    #9e0c24 100%
  );
  border-top: 3px solid var(--cream);
  border-bottom: 3px solid var(--cream);
  box-shadow: 0 18px 44px rgba(120, 8, 26, 0.32);
}
/* Feine Diagonalstreifen + Lichtkegel — nimmt die Streifen der Bühnen auf. */
.gq-tip-band-stripes,
.gq-tip-band-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gq-tip-band-stripes {
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.07) 0,
    rgba(255, 255, 255, 0.07) 2px,
    rgba(255, 255, 255, 0) 2px,
    rgba(255, 255, 255, 0) 18px
  );
}
.gq-tip-band-glow {
  background: radial-gradient(
    70% 140% at 18% 40%,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0) 60%
  );
}
/* Das Band ist 120 px breiter als die Seite und sitzt 60 px weiter links.
   Damit sein Inhalt trotzdem exakt auf der Textspalte der übrigen Seite
   steht, bekommt der innere Container beides zurückgerechnet: 60 px mehr
   Innenabstand je Seite und 120 px mehr Höchstbreite. Ohne das rutschte auf
   schmalen Bildschirmen (wo die Höchstbreite nicht greift) der ganze Inhalt
   um 60 px nach links aus dem Bild. */
.gq-tip-band-in {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  min-height: 190px;
  max-width: calc(var(--max-w) + 120px);
  padding-left: 92px;
  padding-right: 92px;
}
/* KroniPic liefert <picture display:contents> — dadurch werden BEIDE Kinder
   zu Flex-Elementen, auch das <source>. Als nulbreites Element schiebt es
   eine zusätzliche Lücke vor Kroni und zählt bei der Restplatzverteilung mit
   (er landete dadurch in der Mitte statt links). Hier ausblenden. */
.gq-tip-band-in source {
  display: none;
}
@media (max-width: 768px) {
  .gq-tip-band-in {
    padding-left: 78px;
    padding-right: 78px;
  }
}
.gq-tip-band-kroni {
  width: 252px;
  height: auto;
  flex: 0 0 auto;
  /* Ragt oben und unten über das Band hinaus und dreht sich gegen die
     Bandneigung zurück, damit er senkrecht steht. */
  margin: -54px 0 -32px;
  transform: rotate(1.1deg);
  filter: drop-shadow(0 16px 26px rgba(60, 4, 12, 0.45));
}
.gq-tip-band-txt {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 0;
}
.gq-tip-band-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  /* 0,92 statt 0,82 wie im Entwurf: auf #c8102e ergibt 0,82 nur 4,3:1 und
     verfehlt bei 14 px die WCAG-Schwelle von 4,5:1. */
  color: rgba(255, 255, 255, 0.92);
}
.gq-tip-band-h1 {
  margin: 0;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 3px 0 rgba(94, 6, 18, 0.45);
}
.gq-tip-band-sub {
  margin: 7px 0 0;
  max-width: 52ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
}
/* Laufzeit als Stempel: das ENDE groß (danach fragt der Besucher), der
   Beginn klein darunter. */
.gq-tip-band-stamp {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 22px 15px;
  background: var(--cream);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px var(--cream),
    inset 0 0 0 4px var(--red),
    0 10px 26px rgba(60, 4, 12, 0.3);
  transform: rotate(2.6deg);
}
.gq-tip-band-stamp-top {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9e0c24;
}
.gq-tip-band-stamp-big {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--red);
  white-space: nowrap;
}
/* Freitext-Laufzeit aus dem CMS: beliebig lang, darf umbrechen. */
.gq-tip-band-stamp-big--frei {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  white-space: normal;
  max-width: 15ch;
  text-align: center;
}
.gq-tip-band-stamp-sub {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9e0c24;
  white-space: nowrap;
}

/* Sprungmarken links, Teilen rechts — eine Zeile unter dem Band. */
.gq-tip-chipbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.gq-tip-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
}
.gq-tip-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  color: var(--blue-dk);
  text-decoration: none;
}
.gq-tip-chip:hover {
  border-color: var(--blue);
  text-decoration: none;
  color: var(--blue-dk);
}
.gq-tip-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Bühne ── */
.gq-tip-buehne {
  position: relative;
  padding-bottom: 26px;
}
.gq-tip-field {
  position: relative;
  margin-top: 112px;
}
.gq-tip-crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.gq-tip-word {
  position: absolute;
  top: 9%;
  left: -30px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: clamp(170px, 22vw, 300px);
  line-height: 0.78;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  /* Hauchdünne Füllung + kräftigerer Stroke: das Wort soll als Wasserzeichen
     LESBAR sein, nicht nur erahnbar. */
  color: rgba(255, 255, 255, 0.05);
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.52);
  white-space: nowrap;
  user-select: none;
}
.gq-tip-buehne--flip .gq-tip-word {
  left: auto;
  right: -30px;
}
.gq-tip-tex {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.065) 0 2px,
    rgba(255, 255, 255, 0) 2px 16px
  );
}
.gq-tip-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 118%,
    rgba(0, 0, 0, 0.34),
    rgba(0, 0, 0, 0) 62%
  );
}
/* Tiefe statt flacher Fläche: warmes Spotlight hinter dem Produkt … */
.gq-tip-crop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    48% 64% at 74% 54%,
    rgba(255, 244, 214, 0.32),
    rgba(255, 244, 214, 0) 70%
  );
}
.gq-tip-buehne--flip .gq-tip-crop::before {
  background: radial-gradient(
    48% 64% at 26% 54%,
    rgba(255, 244, 214, 0.32),
    rgba(255, 244, 214, 0) 70%
  );
}
/* … plus dunkle Ober-Kante (Naht zur Holzfläche) und abgedunkelte Text-Seite
   (hebt den weißen Text) — spiegelt bei gespiegelten Bühnen mit. */
.gq-tip-crop::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Textseite deutlich abdunkeln: weiße Typo muss auch auf den hellen
     Verlaufsanteilen (Bernstein/Orange) sicher lesbar sein. */
  background:
    linear-gradient(180deg, rgba(25, 9, 0, 0.24), rgba(0, 0, 0, 0) 15%),
    linear-gradient(
      90deg,
      rgba(20, 7, 0, 0.5),
      rgba(20, 7, 0, 0.26) 34%,
      rgba(0, 0, 0, 0) 58%
    );
}
.gq-tip-buehne--flip .gq-tip-crop::after {
  background:
    linear-gradient(180deg, rgba(25, 9, 0, 0.24), rgba(0, 0, 0, 0) 15%),
    linear-gradient(
      270deg,
      rgba(20, 7, 0, 0.5),
      rgba(20, 7, 0, 0.26) 34%,
      rgba(0, 0, 0, 0) 58%
    );
}
.gq-tip-bubs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gq-tip-bub {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  animation: gqTipRise 8s linear infinite;
}
@keyframes gqTipRise {
  0% {
    transform: translateY(24px) scale(0.8);
    opacity: 0;
  }
  22% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-190px) scale(1.15);
    opacity: 0;
  }
}
.gq-tip-in {
  position: relative;
  min-height: 494px;
  /* Flex, damit die Textspalte die volle Bühnenhöhe bekommt und die
     Preiskarte per margin-top:auto immer unten andocken kann. */
  display: flex;
  align-items: stretch;
}

/* Stempel (überlappt die Bühnenkante) */
.gq-tip-stamp {
  position: absolute;
  top: -30px;
  left: 22px;
  z-index: 6;
  transform: rotate(-6deg);
}
.gq-tip-buehne--flip .gq-tip-stamp {
  left: auto;
  right: 22px;
}
.gq-tip-stamp-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 18px 12px;
  background: var(--cream);
  border: 2.5px solid var(--red);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 2px var(--cream),
    inset 0 0 0 4px var(--red),
    0 10px 26px rgba(0, 0, 0, 0.25);
  color: var(--red);
}
.gq-tip-stamp-l1 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gq-tip-stamp-l2 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gq-tip-stamp-l2::before,
.gq-tip-stamp-l2::after {
  content: "";
  width: 14px;
  height: 1.5px;
  background: var(--red);
  opacity: 0.55;
}

/* Produkt-Held */
.gq-tip-hero {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: min(560px, 44vw);
  z-index: 3;
}
.gq-tip-hero--flasche {
  width: min(365px, 28vw);
}
/* Flaschen dürfen höher sein als Kisten: schlankes Format, mehr Präsenz. */
.gq-tip-hero--flasche img {
  max-height: 600px;
}
.gq-tip-buehne--flip .gq-tip-hero {
  right: auto;
  left: 0;
}
@media (min-width: 1360px) {
  .gq-tip-hero {
    right: -28px;
  }
  .gq-tip-buehne--flip .gq-tip-hero {
    right: auto;
    left: -24px;
  }
}
.gq-tip-hero-shadow {
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 78%;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0.46),
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(3px);
}
.gq-tip-hero-rot {
  position: relative;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.3));
}
/* Die Schräg-Drehung liegt auf dem BILD, nicht auf dem animierten
   Container: die Einblende-Animation (gqTipProdIn) belegt dessen
   transform und würde die Drehung sonst erst NACH dem Ausspielen
   „reinspringen" lassen (Produkt lädt gerade, kippt dann sichtbar). */
.gq-tip-hero-rot > img,
.gq-tip-hero-rot > svg {
  transform: rotate(2.5deg);
  transform-origin: 50% 100%;
}
.gq-tip-buehne--flip .gq-tip-hero-rot > img,
.gq-tip-buehne--flip .gq-tip-hero-rot > svg {
  transform: rotate(-3deg);
}
.gq-tip-hero img,
.gq-tip-hero svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  /* Produktfotos MIT weißem Hintergrund (JPG statt Freisteller) wirken durch
     die Rundung wie eine bewusste Foto-Karte; echte Freisteller-PNGs bleiben
     unbeeinflusst. */
  border-radius: 12px;
}

/* Kroni am Produkt */
/* Kroni: je Rubrik eine eigene Figur, Position und Haltung — nicht mehr
   alle identisch an derselben Stelle. Die Dreh-Haltung liegt auf dem BILD,
   weil die Bob-Animation die transform des Containers belegt. */
.gq-tip-kroni {
  position: absolute;
  z-index: 6;
}
.gq-tip-kroni svg,
.gq-tip-kroni img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
/* Bier: Kroni mit Prozent-Schild, steht unten an der Kiste */
.gq-tip-kroni--bier {
  left: -128px;
  bottom: -10px;
  width: 150px;
}
.gq-tip-kroni--bier img {
  transform: rotate(-7deg);
}
/* Spirituose: Kroni mit Drink, prostet auf halber Höhe neben der Flasche
   (immer zur Textseite hin — sonst ragt er aus der Seite). */
.gq-tip-kroni--spirit {
  left: -118px;
  bottom: 12%;
  width: 134px;
}
.gq-tip-kroni--spirit img {
  transform: rotate(-6deg);
}
/* Limo: Kroni mit Eis, hüpft weiter oben neben der Kiste */
.gq-tip-kroni--limo {
  left: -148px;
  bottom: 36%;
  width: 138px;
}
.gq-tip-kroni--limo img {
  transform: rotate(9deg);
}
/* Gespiegelte Bühnen: Kroni wechselt zur Textseite, Haltung spiegelt mit */
.gq-tip-buehne--flip .gq-tip-kroni--bier {
  left: auto;
  right: -128px;
}
.gq-tip-buehne--flip .gq-tip-kroni--bier img {
  transform: rotate(7deg);
}
.gq-tip-buehne--flip .gq-tip-kroni--spirit {
  left: auto;
  right: -118px;
}
.gq-tip-buehne--flip .gq-tip-kroni--spirit img {
  transform: rotate(6deg);
}
.gq-tip-buehne--flip .gq-tip-kroni--limo {
  left: auto;
  right: -148px;
}
.gq-tip-buehne--flip .gq-tip-kroni--limo img {
  transform: rotate(-9deg);
}

/* Sticker */
/* Sticker leben jetzt IM Produkt-Container (.gq-tip-hero) und docken an
   dessen Kanten an — sie wirken „aufgeklebt", statt bei großen Bildern
   mitten auf dem Produkt (Logo!) zu landen. */
.gq-tip-stickers {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}
.gq-tip-sticker {
  position: absolute;
}
.gq-tip-sticker-in {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
  white-space: nowrap;
}
.gq-tip-sticker--1 {
  left: -6%;
  top: 3%;
  transform: rotate(-7deg);
}
.gq-tip-sticker--1 .gq-tip-sticker-in {
  background: var(--gold);
  color: #0c1e33;
}
.gq-tip-sticker--2 {
  right: -5%;
  bottom: 22%;
  transform: rotate(6deg);
}
.gq-tip-sticker--2 .gq-tip-sticker-in {
  background: var(--cream);
  color: var(--blue-dk);
}
.gq-tip-sticker--3 {
  left: -9%;
  bottom: 8%;
  transform: rotate(5deg);
}
.gq-tip-sticker--3 .gq-tip-sticker-in {
  background: var(--blue);
  color: #fff;
}
/* Gespiegelte Bühnen brauchen keine eigenen Sticker-Positionen mehr —
   die Sticker sitzen produkt-relativ und spiegeln automatisch mit. */

/* Text + Preis-Störer */
.gq-tip-copy {
  position: relative;
  z-index: 4;
  width: min(590px, 53%);
  padding: 62px 0 0;
  display: flex;
  flex-direction: column;
}
.gq-tip-buehne--flip .gq-tip-copy {
  margin-left: auto;
}
.gq-tip-eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}
.gq-tip-headline {
  margin: 0 0 14px;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.35), 0 6px 26px rgba(0, 0, 0, 0.28);
}
.gq-tip-story {
  margin: 0 0 8px;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.gq-tip-story + .gq-tip-story {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.86);
}
.gq-tip-card {
  transform: rotate(-1.1deg);
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.3);
  padding: 18px 20px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Immer unten an der Bühne, ragt über die Kante hinaus (wie der Stempel
     oben) — unabhängig davon, wie lang der Text darüber ist. */
  margin-top: auto;
  margin-bottom: -40px;
}
.gq-tip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.gq-tip-rowl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.gq-tip-top {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--gold);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #0c1e33;
}
.gq-tip-label {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0c1e33;
}
.gq-tip-statt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sm);
}
.gq-tip-statt s {
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}
.gq-tip-statt b {
  color: var(--red);
}
.gq-tip-info {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-sm);
}
.gq-tip-pills {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gq-tip-save {
  background: #161616;
  color: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(2.5deg);
}
.gq-tip-price {
  background: var(--red);
  color: #fff;
  border-radius: 12px;
  padding: 12px 20px 13px;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: rotate(-2.5deg);
  box-shadow: 0 10px 24px rgba(200, 16, 46, 0.4);
}

/* Rechtszeile unter der Bühne (Platz für die überhängende Preiskarte) */
.gq-tip-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 62px;
}
.gq-tip-legal-txt {
  font-size: 12px;
  line-height: 1.45;
  /* Kontrast auf der Holzmaserung: siehe .gq-tip-crumb. */
  color: var(--text-md);
}
.gq-tip-ab18 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-md);
}
.gq-tip-ab18-badge {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--blue-dk);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 8px;
  line-height: 15px;
  text-align: center;
}
.gq-tip-legal-link {
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  color: var(--blue);
  white-space: nowrap;
}

/* ── Bewegung: REINE CSS-Animationen (kein JavaScript nötig) ──
   Einblenden beim Seitenaufbau über @keyframes + animation-fill-mode:
   backwards — der Versteckt-Zustand lebt NUR in den Keyframes, nie in den
   Basis-Styles. Konsequenz: Ohne Animations-Unterstützung (oder mit
   „Bewegung aus") ist alles sofort sichtbar, mit ihr spielt die Design-
   Choreografie. Läuft überall dort, wo auch das übrige CSS läuft —
   unabhängig von Skripten, Hydration oder Browser-Alter. */
@keyframes gqTipIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gqTipProdIn {
  from {
    opacity: 0;
    transform: translateY(70px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gqTipStampIn {
  0% {
    opacity: 0;
    transform: scale(1.7) rotate(-13deg);
  }
  55% {
    opacity: 1;
    transform: scale(0.95) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes gqTipStickIn {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }
  70% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.gq-tip-rv {
  animation: gqTipIn 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.gq-tip-anim-prod {
  animation: gqTipProdIn 0.95s cubic-bezier(0.16, 0.86, 0.28, 1) 0.15s
    backwards;
}
.gq-tip-anim-stamp {
  animation: gqTipStampIn 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) 0.4s backwards;
}
.gq-tip-anim-stick {
  display: inline-block;
  animation: gqTipStickIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.gq-tip-anim-typo {
  animation: gqTipDrift 22s ease-in-out infinite alternate;
}
@keyframes gqTipDrift {
  from {
    transform: translateX(-22px);
  }
  to {
    transform: translateX(24px);
  }
}
.gq-tip-anim-kroni {
  animation: gqTipBob 3.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes gqTipBob {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-9px) rotate(-3.5deg);
  }
}
.gq-tip-anim-pill {
  animation: gqTipPulse 5s ease-in-out infinite;
}
@keyframes gqTipPulse {
  0%, 86%, 100% {
    transform: rotate(-2.5deg) scale(1);
  }
  91% {
    transform: rotate(-2.5deg) scale(1.055);
  }
  96% {
    transform: rotate(-2.5deg) scale(0.985);
  }
}
/* CMS-Schalter „Bewegung aus" + Systemeinstellung „Bewegung reduzieren":
   alle Animationen aus, alles sofort sichtbar (Basis-Styles sind sichtbar). */
.gq-tip--still .gq-tip-rv,
.gq-tip--still .gq-tip-anim-prod,
.gq-tip--still .gq-tip-anim-stamp,
.gq-tip--still .gq-tip-anim-stick,
.gq-tip--still .gq-tip-anim-typo,
.gq-tip--still .gq-tip-anim-kroni,
.gq-tip--still .gq-tip-anim-pill,
.gq-tip--still .gq-tip-bub {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .gq-tip-rv,
  .gq-tip-anim-prod,
  .gq-tip-anim-stamp,
  .gq-tip-anim-stick,
  .gq-tip-anim-typo,
  .gq-tip-anim-kroni,
  .gq-tip-anim-pill,
  .gq-tip-bub {
    animation: none !important;
  }
}

/* ── Scroll-Reveal (Progressive Enhancement, /tipps-reveal.js) ──
   Das Skript setzt `gq-tip-scroll` aufs <html> (nur wenn Bewegung erlaubt
   und IntersectionObserver da ist) und markiert jede Bühne beim Erreichen
   mit `is-in`. Bis dahin liegen die Elemente exakt im from-Zustand ihrer
   Keyframes; `is-in` entfernt das `animation: none` wieder → die Animation
   startet frisch, die Choreografie zündet also wirklich BEIM Scrollen.
   Ohne JS existiert `gq-tip-scroll` nie → die Lade-Animation oben bleibt
   der Fallback, es wird nie etwas dauerhaft versteckt. */
.gq-tip-scroll .gq-tip-buehne:not(.is-in) .gq-tip-rv {
  animation: none;
  opacity: 0;
  transform: translateY(26px);
}
.gq-tip-scroll .gq-tip-buehne:not(.is-in) .gq-tip-anim-prod {
  animation: none;
  opacity: 0;
  transform: translateY(70px) scale(0.965);
}
.gq-tip-scroll .gq-tip-buehne:not(.is-in) .gq-tip-anim-stamp {
  animation: none;
  opacity: 0;
  transform: scale(1.7) rotate(-13deg);
}
.gq-tip-scroll .gq-tip-buehne:not(.is-in) .gq-tip-anim-stick {
  animation: none;
  opacity: 0;
  transform: scale(0.35);
}

/* ── Mobil (≤ 900 px): Produkt oben, Text darunter auf der Farbfläche ── */
@media (max-width: 900px) {
  /* Band: Kroni und Stempel bleiben in der ersten Zeile (Kroni links,
     Stempel rechts), der Text rutscht darunter — sonst würde der Stempel
     als drittes Element allein eine dritte Zeile aufmachen. */
  .gq-tip-bandwrap {
    padding: 40px 0 26px;
  }
  .gq-tip-band-in {
    gap: 14px 20px;
    min-height: 0;
  }
  .gq-tip-band-kroni {
    width: 150px;
    margin: -34px 0 -20px;
  }
  .gq-tip-band-txt {
    flex: 1 1 100%;
    order: 3;
    padding: 0 0 20px;
  }
  .gq-tip-band-stamp {
    /* Kroni links, Stempel rechts in derselben Zeile — der Text darunter. */
    margin-left: auto;
    padding: 10px 16px 11px;
  }
  .gq-tip-band-stamp-big {
    font-size: 22px;
  }
  .gq-tip-field {
    margin-top: 74px;
  }
  .gq-tip-word {
    font-size: 172px;
    top: 44px;
    -webkit-text-stroke-width: 2px;
  }
  .gq-tip-in {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .gq-tip-hero,
  .gq-tip-buehne--flip .gq-tip-hero {
    /* relative statt static: Sticker/Kroni (absolute Kinder) müssen am
       PRODUKT ankern — sonst docken sie an der ganzen Bühne an und ragen
       rechts aus dem Bildschirm. WICHTIG: inset zurücksetzen — die
       Desktop-Offsets (bottom: 76px …) würden bei relative sonst als
       Verschiebung nach oben wirken (Bild ragte 120 px über die Bühne). */
    position: relative;
    inset: auto;
    order: 0;
    width: min(330px, 72%);
    margin: -46px auto 0;
  }
  .gq-tip-hero--flasche,
  .gq-tip-buehne--flip .gq-tip-hero--flasche {
    width: min(210px, 52%);
  }
  /* Bild-Höhe auf Mobil hart deckeln: hohe Flaschen-Freisteller sollen die
     Bühne nicht sprengen; contain hält die Proportionen. (Bewusst auf
     hero-rot gescopet — der Kroni daneben bleibt unberührt.) */
  .gq-tip-hero-rot img,
  .gq-tip-hero-rot svg {
    max-height: min(340px, 44vh);
    margin: 0 auto;
  }
    /* Mobil: ein Platz für alle Varianten (unten rechts am Produkt) —
     .gq-tip-in-Prefix schlägt die Rubrik-/Flip-Regeln (später + gleich
     spezifisch). */
  .gq-tip-in .gq-tip-kroni {
    left: auto;
    right: -26px;
    bottom: -10px;
    width: 88px;
  }
  .gq-tip-copy,
  .gq-tip-buehne--flip .gq-tip-copy {
    order: 1;
    width: 100%;
    margin-left: 0;
    padding: 30px 0 0;
  }
  .gq-tip-stamp,
  .gq-tip-buehne--flip .gq-tip-stamp {
    top: -24px;
    left: 10px;
    right: auto;
  }
  .gq-tip-stamp-in {
    padding: 8px 12px 9px;
  }
  .gq-tip-stamp-l1 {
    font-size: 12px;
  }
  .gq-tip-stamp-l2 {
    /* 9 px Versalschrift mit Sperrung ist auf dem Handy zu klein. */
    font-size: 11px;
  }
  .gq-tip-sticker--1 {
    left: auto;
    right: -4px;
    top: -6px;
    transform: rotate(7deg);
  }
  .gq-tip-sticker--2,
  .gq-tip-sticker--3 {
    display: none;
  }
  .gq-tip-sticker-in {
    padding: 8px 12px;
    font-size: 12px;
    /* Sicherheitsnetz: überlange Sticker-Texte laufen nie aus dem Bild */
    display: inline-block;
    max-width: 74vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gq-tip-card {
    max-width: 100%;
    margin-bottom: -26px;
  }
  .gq-tip-price {
    padding: 9px 15px 10px;
    font-size: clamp(30px, 8.4vw, 40px);
  }
  .gq-tip-legal {
    padding-top: 46px;
  }
  .gq-tip-legal-link {
    margin-left: 0;
  }
}

/* ── Flacker-Schutz für Schatten-Filter: Alle Elemente mit
   filter: drop-shadow(…) bekommen vom Browser eine eigene GPU-Ebene.
   Wird die erst WÄHREND des Seitenaufbaus angelegt, zeigen Safari/Chrome
   gelegentlich kurz ein leicht dunkles Rechteck (uninitialisierte
   Layer-Textur) — sporadisch, nach Reload weg. will-change: filter legt
   die Ebene sofort und dauerhaft an, ohne bestehende transforms
   (Rotationen/Animationen) anzufassen. ── */
.gq-logo-kroni,
.gq-hero-right img,
.gq-mktband-kroni img,
.gq-wcard-img,
.gq-feature-img img,
.gq-info-card-img,
.gq-apghero-kroni img,
.gq-feat-coming-img,
.gq-mmenu-kroni,
.gq-pp-hero-kroni img,
.gq-err-kroni,
.gq-news-card-img img,
.gq-exp-map img,
.gq-tip-hero-rot,
.gq-tip-kroni img {
  will-change: filter;
}

/* ── Barrierefreiheit: Skip-Link + einheitlicher Tastatur-Fokusring ── */
.gq-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--blue-dk);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}
.gq-skip:focus {
  left: 0;
}
/* Sichtbarer Fokus NUR bei Tastatur-Navigation (nicht bei Maus-Klicks) —
   ein Ring für die ganze Seite statt Browser-Zufall je Element. */
:focus-visible {
  outline: 3px solid var(--gold, #f5c842);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Druck: Kunden drucken Angebots-/Tipps-Listen. Deko, Navigation und
   Interaktives raus, weißer Grund, lesbarer Text, Karten kompakt. ── */
@media print {
  .gq-header,
  .gq-footer,
  .gq-announce,
  .gq-consent,
  .gq-no-print,
  .gq-tipteaser,
  .gq-bn,
  .gq-hero,
  .gq-tip-kroni,
  .gq-tip-stickers,
  .gq-tip-bubs,
  .gq-tip-word,
  .gq-tip-tex,
  .gq-tip-vig,
  .gq-tip-crop,
  .gq-tip-chipbar,
  .gq-ocard-tippband,
  nav {
    display: none !important;
  }
  body,
  .bg-white,
  .bg-cream,
  .bg-blue,
  .bg-dark {
    background: #fff !important;
    background-image: none !important;
    color: #000 !important;
  }
  /* Reveal-/Bühnen-Animationen: im Druck ist IMMER alles sichtbar */
  .gq-reveal,
  .gq-tip-rv,
  .gq-tip-anim-prod,
  .gq-tip-anim-stamp,
  .gq-tip-anim-stick {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .gq-tip-field {
    background: #fff !important;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 24px !important;
  }
  .gq-tip-eyebrow,
  .gq-tip-headline,
  .gq-tip-story,
  .gq-tip-stamp-in {
    color: #000 !important;
    text-shadow: none !important;
  }
  .gq-tip-buehne,
  .gq-ocard-real,
  .gq-staffel {
    break-inside: avoid;
  }
  .gq-ocard-real,
  .gq-staffel,
  .gq-tip-card {
    box-shadow: none !important;
    border: 1px solid #ddd;
  }
  .gq-tip-card {
    margin-bottom: 12px !important;
    transform: none !important;
  }
  a {
    color: #000 !important;
    text-decoration: none !important;
  }
}

/* ── Nahtlose Seitenübergänge (View Transitions, Progressive Enhancement):
   Browser ohne Unterstützung ignorieren die Regel und laden wie bisher. ── */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── Sitewide Scroll-Reveal (dezent, /reveal.js): gleiche Mechanik wie die
   Tipps-Bühnen — Versteckt-Zustand existiert NUR, wenn das Script die
   html-Klasse gesetzt hat; ohne JS spielt die Lade-Animation, ohne
   Animations-Support ist alles sofort sichtbar. ── */
.gq-reveal {
  animation: gqRevealIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
@keyframes gqRevealIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.gq-rvon .gq-reveal:not(.is-in) {
  animation: none;
  opacity: 0;
  transform: translateY(16px);
}
/* Fade-Variante (Wellen-Verbinder): nur Opazität — eine Verschiebung würde
   die nahtlose Kante zur Nachbar-Sektion aufreißen. */
.gq-reveal--fade {
  animation-name: gqRevealFade;
}
html.gq-rvon .gq-reveal--fade:not(.is-in) {
  transform: none;
}
@keyframes gqRevealFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gq-reveal {
    animation: none !important;
  }
}

/* ── „Kronis Tipps"-Banner auf /angebote (1:1 aus dem freigegebenen Design,
   components/TippsBanner.tsx). Bewegung REIN CSS: Einblenden über Keyframes
   mit backwards-Fill (ohne Animations-Support sofort sichtbar, kein JS),
   Hover-Lift/Slab-Rise/CTA-Zoom als transitions, Typo-Drift als Loop. ── */
@keyframes gqBnIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.gq-rv-h {
  animation: gqBnIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
/* Outline-Display-Typo (Design: „-webkit-text-stroke ist inline nicht
   zuverlässig" — deshalb als Klasse) */
.gq-monat {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  user-select: none;
}
.gq-typo {
  animation: gqDrift 22s ease-in-out infinite alternate;
}
@keyframes gqDrift {
  from {
    transform: translateX(-22px);
  }
  to {
    transform: translateX(24px);
  }
}
.gq-bn {
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}
.gq-bn:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(12, 54, 101, 0.32);
  text-decoration: none;
}
.gq-bn-slab {
  transition: transform 0.5s cubic-bezier(0.16, 0.86, 0.28, 1);
}
.gq-bn:hover .gq-bn-slab {
  transform: skewX(-9deg) translateY(-9px);
}
.gq-bn-cta {
  transition:
    transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    background 0.2s ease;
}
.gq-bn:hover .gq-bn-cta {
  transform: scale(1.05);
  /* !important: muss den Inline-Hintergrund der Pille überstimmen (im
     Design-Export dieselbe Konstellation — dort griff das Abdunkeln nie). */
  background: #a80d26 !important;
}
@media (max-width: 820px) {
  .gq-bn-slab {
    display: none;
  }
}
/* CMS „Bewegung aus" (Klasse sitzt am Banner selbst) + Systemeinstellung */
.gq-still.gq-rv-h,
.gq-still .gq-rv-h {
  animation: none !important;
}
.gq-still.gq-bn,
.gq-still.gq-bn .gq-bn-slab,
.gq-still.gq-bn .gq-bn-cta {
  transition: none !important;
}
.gq-still .gq-typo,
.gq-still.gq-bn .gq-typo {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .gq-rv-h,
  .gq-typo {
    animation: none !important;
  }
  .gq-bn,
  .gq-bn-slab,
  .gq-bn-cta {
    transition: none !important;
  }
}

/* ── Eckband „Kronis Tipp" auf öffentlichen Angebotskacheln: verbindet die
   Angebote sichtbar mit der Kampagnen-Seite (gleiche Stempel-Optik). ── */
.gq-ocard-tippband {
  position: absolute;
  /* Unter der Chip-Zeile, bündig zu deren linker Kante (12px). NICHT
     negativ einrücken: die Kachel hat overflow:hidden (Bild-Zoom), ein
     Überstand würde am Kartenrand glatt abgeschnitten — der Stempel verlöre
     Rundung und linke Doppellinie. */
  top: 40px;
  left: 12px;
  z-index: 6;
  padding: 5px 10px 6px;
  background: var(--cream);
  border: 2px solid var(--red);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1.5px var(--cream),
    inset 0 0 0 3px var(--red),
    0 4px 10px rgba(0, 0, 0, 0.18);
  transform: rotate(-4deg);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.gq-ocard-tippband:hover {
  transform: rotate(-4deg) scale(1.07);
  color: var(--red);
  text-decoration: none;
}

/* Kurzzeitig ausgeblendete Tipps-Bühnen: Der Server rendert WVG, ein Skript
   im Seitenkopf blendet sie für W&S-Märkte aus, bis die Insel umgeschaltet
   hat. Lieber eine leere Fläche für einen Wimpernschlag als die Tipps eines
   fremden Marktes — deren Preise gelten dort nicht. */
html[data-tipps-warten] .gq-tip-chipbar,
html[data-tipps-warten] .gq-tip-buehne {
  visibility: hidden;
}

/* ── Zubringer: Tipps-Band (Startseite) — Banner-Optik wie auf /angebote:
   dunkelblau, Riesen-Outline-Typo, Hover-Lift. ── */
.gq-tipteaser {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  background: var(--blue-dk);
  background-image: linear-gradient(135deg, #0a2e56 0%, #155baa 100%);
  border-radius: var(--r-lg);
  padding: 18px 24px;
  box-shadow: var(--sh2);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease;
}
.gq-tipteaser::after {
  content: "TIPPS";
  position: absolute;
  right: -14px;
  top: -34px;
  z-index: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 150px;
  line-height: 0.8;
  letter-spacing: -0.035em;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.gq-tipteaser > * {
  position: relative;
  z-index: 1;
}
.gq-tipteaser:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(12, 54, 101, 0.32);
  text-decoration: none;
}
.gq-tipteaser-stamp {
  transform: rotate(-4deg);
  padding: 7px 12px 8px;
  background: var(--cream);
  border: 2px solid var(--red);
  border-radius: 9px;
  box-shadow:
    inset 0 0 0 1.5px var(--cream),
    inset 0 0 0 3px var(--red);
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}
.gq-tipteaser-txt {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.4;
  color: #fff;
}
.gq-tipteaser-dots {
  display: inline-flex;
  gap: 5px;
  margin-right: 9px;
  vertical-align: -1px;
}
.gq-tipteaser-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.gq-tipteaser-cta {
  flex-shrink: 0;
}

/* ── Abschluss der Tipps-Seite: ruhiges Band nach der letzten Bühne.
   Echte weiße Karte, weil .bg-white eine Holzmaserung ist (Deko-Regel). ── */
.gq-tip-outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 40px;
  padding: 20px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1);
}
.gq-tip-outro-kroni {
  width: 76px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
  will-change: filter;
}
.gq-tip-outro-txt {
  flex: 1 1 320px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gq-tip-outro-txt strong {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  color: var(--blue-dk);
}
.gq-tip-outro-txt span {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-md);
}
.gq-tip-outro-cta {
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .gq-tip-outro {
    padding: 18px;
    gap: 12px 16px;
  }
  .gq-tip-outro-kroni {
    width: 58px;
  }
  .gq-tip-outro-cta {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

/* Teilen als vollwertige Pille — als Textlink war sie auf der Holzmaserung
   kaum zu erkennen. Steht rechts in der Chip-Zeile unter dem Aktionsband. */
.gq-tip-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--blue);
  cursor: pointer;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  color: var(--blue-dk);
  box-shadow: 0 4px 12px rgba(12, 54, 101, 0.12);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}
.gq-tip-share:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-1px);
}
.gq-tip-share svg {
  width: 17px;
  height: 17px;
}
.gq-tip-share-label {
  letter-spacing: 0.01em;
}

/* Kronis-Tipps-Zeile auf der Marktdetailseite (unter dem Angebote-Teaser). */
.gq-mktd-tipps {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.gq-mktd-tipps-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.gq-mktd-tipps-list {
  flex: 1 1 220px;
  min-width: 0;
  font-size: 14px;
  color: var(--text-md);
}
.gq-mktd-tipps-link {
  margin-left: auto;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.gq-mktd-tipps-link:hover {
  color: var(--blue-dk);
  text-decoration: underline;
}

/* WebP-Wrapper der Kroni-Grafiken: durchreichen, damit das <img> selbst das
   Layout-Element bleibt (Flex-Reihenfolge, absolute Ankerpunkte, Breiten). */
.gq-kpic {
  display: contents;
}

/* ── Besucher-Dashboard (Admin → System & Wartung) ───────────────────────── */
.gq-dash {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gq-dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.gq-dash-tile {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
}
.gq-dash-tile-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-sm);
}
.gq-dash-tile-val {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.15;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.gq-dash-tile-sub {
  font-size: 12px;
  color: var(--text-md);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gq-dash-delta {
  font-weight: 800;
  font-size: 11.5px;
  white-space: nowrap;
}
.gq-dash-delta.up {
  color: var(--ok);
}
.gq-dash-delta.down {
  color: var(--warn);
}

.gq-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gq-dash-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-md);
}
.gq-dash-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.12);
}
.gq-dash-range {
  display: inline-flex;
  gap: 4px;
  background: var(--blue-xlt);
  border-radius: 999px;
  padding: 3px;
}
.gq-dash-rbtn {
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--blue-dk);
}
.gq-dash-rbtn.is-on {
  background: var(--blue);
  color: #fff;
}

.gq-dash-chartwrap {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 12px 8px;
}
.gq-dash-chart {
  display: block;
  width: 100%;
  height: auto;
}
.gq-dash-axis {
  font-family: var(--font-b);
  font-size: 10px;
  fill: var(--text-sm);
}
.gq-dash-tip {
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-size: 12.5px;
  color: var(--text-md);
  min-height: 20px;
}
.gq-dash-tip b {
  color: var(--blue-dk);
}
.gq-dash-tip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.gq-dash-tip i,
.gq-dash-devlegend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.gq-dash-hint {
  color: var(--text-sm);
}
.gq-dash-empty {
  padding: 10px 2px;
  font-size: 13px;
  color: var(--text-sm);
}

.gq-dash-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .gq-dash-split {
    grid-template-columns: 1fr;
  }
}
.gq-dash-subttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sm);
  margin-bottom: 10px;
}
.gq-dash-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gq-dash-bar {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-md);
}
.gq-dash-bar-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gq-dash-bar-track {
  height: 10px;
  background: var(--blue-xlt);
  border-radius: 999px;
  overflow: hidden;
}
.gq-dash-bar-fill {
  display: block;
  height: 100%;
  background: #1c6bb8;
  border-radius: 999px;
}
.gq-dash-bar-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--blue-dk);
}
.gq-dash-devbar {
  height: 14px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.gq-dash-devfill {
  display: block;
  height: 100%;
  background: #1c6bb8;
}
.gq-dash-devlegend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-md);
}
.gq-dash-devlegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gq-dash-note {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-sm);
}

/* ── Angebotskachel: flächendeckender Link zur Detailseite ────────────────
   Kein <a> um die ganze Karte (der Merken-Knopf liegt darin — ein <button>
   in einem <a> wäre ungültig). Stattdessen spannt sich dieses <a> über die
   Karte; Herz und Eckband liegen darüber. */
.gq-ocard-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.gq-ocard-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.gq-ocard-cart {
  position: relative;
  z-index: 5;
}
.gq-ocard-tippband {
  /* NUR die Ebene anheben — die Positionierung steht weiter oben und muss
     `absolute` bleiben. Stand hier `position: relative`, wurde das Eckband
     zum Flex-Element der Kachel (.gq-ocard-real ist eine Spalte) und zog
     sich als Balken über die gesamte Kartenbreite. */
  z-index: 5;
}
.gq-ocard-real-foot {
  position: relative;
  z-index: 4;
}


/* ── Ortsverzeichnis auf /maerkte ────────────────────────────────────────
   Serverseitig gerenderte Links auf alle Marktseiten: Ohne sie stünde im
   HTML kein Weg dorthin (die Liste ist eine Insel) und Google fände die
   Seiten nur über die Sitemap. */
.gq-mktidx-ttl {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 30px);
  color: var(--blue-dk);
  margin: 0 0 6px;
}
.gq-mktidx-sub {
  margin: 0 0 20px;
  font-size: 14.5px;
  color: var(--text-md);
  max-width: 62ch;
}
/* Echte weiße Karte, KEINE Holzfläche darunter (Deko-Regel in CLAUDE.md):
   Das Ortsverzeichnis ist ein großer Block aus Kleintext und Links. Direkt auf
   der Maserung war er schlecht lesbar — das Rauschen läuft quer durch jede
   Zeile und frisst den Kontrast der 14,5-px-Schrift. Auf reinem Weiß steht der
   Text ruhig, und die Fläche ringsum bleibt Holz. */
.gq-mktidx-karte {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: 0 24px 50px -42px rgba(13, 43, 80, 0.5);
}
.gq-mktidx {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 22px;
}
.gq-mktidx-ort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.gq-mktidx-ortname {
  font-family: var(--font-h);
  font-weight: 800;
  color: var(--blue-dk);
}
.gq-mktidx-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.gq-mktidx-links a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gq-mktidx-links a:hover {
  border-bottom-color: currentColor;
}

/* Marktname in der Liste ist jetzt ein echter Link auf die Marktseite. */
.mkt-item-namelink {
  color: inherit;
  text-decoration: none;
}
.mkt-item-namelink:hover {
  text-decoration: underline;
}

/* Nachbarfilialen auf der Marktdetailseite. */
.gq-mktd-nachbarn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 28px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.gq-mktd-nachbarn-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sm);
  margin: 0 0 8px;
}
.gq-mktd-nachbarn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gq-mktd-nachbarn-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
}
.gq-mktd-nachbarn-list a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.gq-mktd-nachbarn-list a:hover {
  text-decoration: underline;
}
.gq-mktd-nachbarn-list span {
  font-size: 12.5px;
  color: var(--text-sm);
  font-variant-numeric: tabular-nums;
}


/* ═══ Angebots-Detailseite (/angebote/<slug>) ══════════════════════════════
   Aufbau nach der freigegebenen Vorlage: helle Sektionsfläche, darauf weiße
   Karten. Gezeigt wird ausschließlich, was die Aktionsliste liefert —
   Gebinde, Verpackung, Hersteller, Warengruppe, Preis, Grundpreis, Pfand,
   Laufzeit. Fehlt eine Angabe, entfällt der Block, statt leer dazustehen. */
.gq-adet-page {
  /* Holzmaserung wie auf allen anderen Flächen (Klasse bg-white am Element) —
     ein flaches Beige stand hier als einzige Seite aus dem Gesamtbild heraus. */
  padding: 26px 0 56px;
}
.gq-adet-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(12, 54, 101, 0.07);
  padding: clamp(18px, 3vw, 34px);
  margin-bottom: 18px;
}
.gq-adet-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sm);
  margin-bottom: 18px;
}
.gq-adet-crumb a {
  color: inherit;
  text-decoration: none;
}
.gq-adet-crumb a:hover {
  color: var(--blue);
}
.gq-adet-crumb b {
  color: var(--blue-dk);
}

.gq-adet-top {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.15fr;
  gap: 26px 38px;
  align-items: start;
}
@media (max-width: 820px) {
  .gq-adet-top {
    grid-template-columns: 1fr;
  }
}
/* Bildbühne.
   Die Produktfotos der Aktionsliste haben einen WEISSEN, nicht transparenten
   Hintergrund. Ein Schlagschatten am <img> umrandet deshalb das weiße Rechteck
   statt das Produkt — genau das sah aus wie „weißes Viereck auf grauem Grund".
   Lösung: reinweiße Fläche + mix-blend-mode: multiply. Weiß multipliziert sich
   weg, das Produkt bleibt stehen; der weiche Bodenschatten darunter scheint
   dadurch sichtbar durch. Freisteller (transparente PNGs aus der eigenen
   Pipeline) tragen zusätzlich einen echten Schlagschatten — siehe .is-frei. */
.gq-adet-imgbox {
  position: relative;
  /* Reines Weiß, nicht die Holzfläche: Produktfotos versänken sonst in der
     Maserung (siehe Design-Grundregel im Projekt-Handbuch). */
  background: #fff;
  border: 1px solid rgba(12, 54, 101, 0.08);
  border-radius: 18px;
  /* FESTE Höhe, nicht min-height: Eine Kiste ist breit und flach, eine
     Einzelflasche schmal und hoch. Mit min-height wuchs die Bühne beim
     Umschalten um 57 Punkte — die ganze Seite ruckte. Jetzt bleibt der Rahmen
     stehen und nur der Inhalt wechselt. Das Seitenverhältnis der Fotos bleibt
     dabei unangetastet; eine Kiste auf Flaschenhöhe zu ziehen hieße, sie seitlich
     abzuschneiden. */
  height: clamp(340px, 40vw, 470px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 22px 34px;
  /* Eigener Stapelkontext, damit das Multiplizieren nur gegen diese Fläche
     wirkt und nicht gegen alles, was zufällig dahinterliegt. */
  isolation: isolate;
  overflow: hidden;
}
/* Weicher Bodenschatten — lässt das Produkt stehen statt schweben. */
.gq-adet-imgbox::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(62%, 340px);
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(12, 54, 101, 0.19),
    rgba(12, 54, 101, 0) 72%
  );
  pointer-events: none;
}
.gq-adet-imgbox img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  /* Füllt die feste Bühne so weit, wie das Seitenverhältnis es zulässt. */
  max-height: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Freigestellte Bilder haben echte Transparenz — hier trägt ein Schlagschatten
   das Produkt, und multiply darf entfallen. */
.gq-adet-imgbox.is-frei img {
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.16));
}
.gq-adet-imgbox.is-frei::after {
  display: none;
}
.gq-adet-noimg {
  font-size: 13px;
  color: var(--text-sm);
}
.gq-adet-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  /* über dem Produktbild — sonst verschwindet die Fahne dahinter */
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}

.gq-adet-cat {
  display: inline-block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-xlt);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}
.gq-adet-name {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--blue-dk);
  margin: 12px 0 6px;
  text-wrap: balance;
}
.gq-adet-sub {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--text-md);
}

/* ── Preiskarte ── */
.gq-adet-price {
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px 14px;
  margin-bottom: 16px;
}
.gq-adet-price-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.gq-adet-plabel {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sm);
}
.gq-adet-pmain {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--red);
}
.gq-adet-pnum {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(38px, 6vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.gq-adet-pcur {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 22px;
}
.gq-adet-grund {
  text-align: right;
}
.gq-adet-grund strong {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}
.gq-adet-save {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-md);
}
.gq-adet-save b {
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
}
.gq-adet-price-foot {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-md);
}
.gq-adet-price-foot strong {
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}
.gq-adet-rest {
  background: #fdeaee;
  color: var(--red-dk);
  font-weight: 800;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 4px 11px;
}
.gq-adet-pfand {
  color: var(--text-sm);
}

/* ── Aktionen ── */
.gq-adet-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gq-adet-merk,
.gq-adet-share {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 14px;
  padding: 14px 24px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #fff;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.gq-adet-merk.on {
  background: var(--red);
  border-color: var(--red);
}
.gq-adet-merk:hover,
.gq-adet-share:hover {
  transform: translateY(-1px);
}
.gq-adet-share {
  background: #fff;
  color: var(--blue-dk);
  border-color: var(--border);
}
.gq-adet-share:hover {
  border-color: var(--blue);
}
/* Herz-Impuls beim Merken — kurz, einmalig, ohne Dauerbewegung. */
.gq-adet-merk.puls svg {
  animation: gq-herzpuls 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes gq-herzpuls {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.45);
  }
  60% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gq-adet-merk.puls svg {
    animation: none;
  }
}

/* ── PAYBACK ── */
.gq-adet-payback {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-cream);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.gq-adet-pbadge {
  flex-shrink: 0;
  background: #0046be;
  color: #fff;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  border-radius: 10px;
  padding: 10px 14px;
}
.gq-adet-payback-txt strong {
  display: block;
  font-size: 14.5px;
  color: var(--blue-dk);
}
.gq-adet-payback-txt small {
  font-size: 12.5px;
  color: var(--text-md);
}

.gq-adet-tiers {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px 14px;
  margin-bottom: 14px;
}
.gq-adet-tiers-ttl {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-sm);
  margin-bottom: 6px;
}
.gq-adet-tiers table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.gq-adet-tiers th,
.gq-adet-tiers td {
  text-align: left;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.gq-adet-tiers tr:last-child th,
.gq-adet-tiers tr:last-child td {
  border-bottom: 0;
}
.gq-adet-tiers th {
  font-weight: 700;
  color: var(--text-md);
}
.gq-adet-tiers td {
  font-weight: 800;
  color: var(--blue-dk);
}
.gq-adet-tiers-base {
  font-weight: 500 !important;
  color: var(--text-sm) !important;
  text-align: right !important;
}
.gq-adet-aktionen {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gq-adet-aktionen li {
  background: var(--blue);
  color: #fff;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 12.5px;
  padding: 7px 14px;
  border-radius: 999px;
}

/* ── Marktbezug (dunkle Fläche wie in der Vorlage) ── */
.gq-adet-markt {
  background: var(--blue-dk);
  color: #fff;
  border-radius: 18px;
  padding: 20px 24px;
}
.gq-adet-markt .gq-adet-plabel {
  color: rgba(255, 255, 255, 0.65);
}
.gq-adet-markt strong {
  display: block;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 24px;
  margin: 2px 0 6px;
}
.gq-adet-markt p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
}
.gq-adet-marktlinks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gq-adet-marktlinks a {
  background: #fff;
  color: var(--blue-dk);
  border-radius: 12px;
  padding: 10px 16px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
}
.gq-adet-marktlinks a.ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}

/* ── Faktenleiste ── */
.gq-adet-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.gq-adet-facts dt {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sm);
}
.gq-adet-facts dd {
  margin: 3px 0 0;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--blue-dk);
}

/* ── Beschreibungstext (nur mit aktiviertem Schalter) ── */
.gq-adet-copy h2,
.gq-adet-more-ttl,
.gq-adet-stoebern h2 {
  font-family: var(--font-h);
  font-weight: 900;
  color: var(--blue-dk);
  margin: 0 0 12px;
}
.gq-adet-copy h2 {
  font-size: 24px;
}
.gq-adet-more-ttl,
.gq-adet-stoebern h2 {
  font-size: 22px;
}
.gq-adet-copy p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-md);
  max-width: 62ch;
}

/* ── Empfehlungen ── */
.gq-adet-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.gq-adet-mcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gq-adet-mcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2);
}
.gq-adet-mimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
}
.gq-adet-mimg img {
  max-height: 116px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.gq-adet-mname {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 14px;
  color: var(--blue-dk);
  line-height: 1.25;
}
.gq-adet-msize {
  font-size: 12.5px;
  color: var(--text-sm);
}
.gq-adet-mprice {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 18px;
  color: var(--red);
  margin-top: 2px;
}

/* ── Weiter stöbern ── */
.gq-adet-stoebern-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.gq-adet-stoebern-chips a {
  background: var(--bg-cream);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--text-md);
  text-decoration: none;
}
.gq-adet-stoebern-chips a:hover {
  background: var(--blue-xlt);
  color: var(--blue-dk);
}
.gq-adet-stoebern-chips a.is-strong {
  background: var(--blue-dk);
  color: #fff;
  font-weight: 700;
}
.gq-adet-legal {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sm);
  max-width: 78ch;
}
.gq-adet-tipp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--cream);
  border: 2px solid var(--red);
  border-radius: 14px;
  text-decoration: none;
}
.gq-adet-tipp b {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.gq-adet-tipp span {
  font-size: 14px;
  color: var(--text-md);
}

/* ── Herz mit Zähler in der Kopfzeile ─────────────────────────────────────
   Erscheint erst, wenn etwas gemerkt ist. Der kurze Impuls beim Merken ist
   die Rückmeldung „angekommen", ohne dass eine Meldung aufpoppt. */
.gq-merkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  text-decoration: none;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gq-merkbtn:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.gq-merkbtn svg {
  color: var(--red-lt);
}
.gq-merkbtn.puls {
  animation: gq-merkpuls 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.gq-merkbtn.puls svg {
  animation: gq-herzpuls 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes gq-merkpuls {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gq-merkbtn.puls,
  .gq-merkbtn.puls svg {
    animation: none;
  }
}
@media (max-width: 560px) {
  .gq-merkbtn-zahl {
    display: none;
  }
  .gq-merkbtn {
    padding: 7px 9px;
  }
}

/* ── Merklisten-Seite ────────────────────────────────────────────────────── */
/* Der Einkaufszettel für den nächsten Marktbesuch. Aufbau nach der
   freigegebenen Vorlage: Marktkarte, Kopfzeile mit Fortschritt, gruppierte
   Posten links, Zusammenfassung rechts (klebt beim Scrollen mit). Die Fläche
   trägt die Holzmaserung wie alle anderen Seiten — die Inhalte stehen auf
   echten weißen Karten, damit Produktfotos und Zahlen sauber lesbar bleiben. */
.gq-merk-page {
  padding: 26px 0 60px;
  min-height: 46vh;
}
.gq-merk-hinweis {
  margin: 0 0 16px;
  background: #e7f0fc;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-dk);
}

/* ── Marktkarte ── */
.gq-merk-markt {
  background: #fff;
  border-radius: 22px;
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  box-shadow: 0 22px 44px -34px rgba(13, 43, 80, 0.6);
}
.gq-merk-mpin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--blue-xlt);
  color: var(--blue);
  flex: none;
}
.gq-merk-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-sm);
}
.gq-merk-mname {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 22px;
  color: var(--blue-dk);
  margin-top: 3px;
}
.gq-merk-mtrenn {
  width: 1px;
  height: 44px;
  background: var(--border);
}
.gq-merk-madr {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-md);
  font-weight: 500;
  max-width: 34ch;
}
.gq-merk-mzeit {
  /* #1d9f6b erreichte auf Weiß nur 3,4:1. Das Marken-Grün liegt bei 5,1:1. */
  color: var(--green);
  font-weight: 700;
}
/* Vorrats-Hinweis in der Marktkarte: bewusst zurückhaltend, aber vorhanden —
   die Liste sagt NICHT zu, dass ein Artikel in dieser Filiale vorrätig ist. */
.gq-merk-mvorrat {
  font-size: 13px;
  color: var(--text-sm);
  font-weight: 600;
}
.gq-merk-mlinks {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Knöpfe ── */
.gq-merk-btn,
.gq-merk-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.gq-merk-btn {
  background: var(--blue);
  border: none;
  color: #fff;
}
.gq-merk-btn:hover {
  background: var(--blue-dk);
}
.gq-merk-btn-ghost {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--blue-dk);
}
.gq-merk-btn-ghost:hover {
  border-color: var(--blue-dk);
}

/* ── Kopfzeile mit Fortschritt ── */
.gq-merk-kopf {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin: 34px 0 18px;
}
.gq-merk-kopf h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  color: var(--blue-dk);
  margin: 0;
}
.gq-merk-kopf p {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--text-md);
  font-weight: 500;
}
.gq-merk-kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gq-merk-fortschritt {
  text-align: right;
}
.gq-merk-flabel {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-md);
}
.gq-merk-fbar {
  width: 210px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  /* margin-left:auto — der Block ist rechtsbündig, ein Balken fester Breite
     würde sonst links kleben und unter der Beschriftung verrutschen. */
  margin: 7px 0 0 auto;
  overflow: hidden;
}
.gq-merk-fbar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #1d9f6b;
  transition: width 0.25s ease;
}
.gq-merk-leeren {
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-md);
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.gq-merk-leeren:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Zwei Spalten: Posten + Zusammenfassung ── */
.gq-merk-spalten {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.gq-merk-karte {
  flex: 1 1 620px;
  min-width: 0;
  background: #fff;
  border-radius: 24px;
  padding: 8px clamp(16px, 2.2vw, 30px) 22px;
  box-shadow: 0 30px 60px -46px rgba(13, 43, 80, 0.55);
}
.gq-merk-seite {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}

/* ── Warengruppen-Abschnitt ── */
.gq-merk-gruppe {
  padding-top: 22px;
}
.gq-merk-gkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}
.gq-merk-gcat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.gq-merk-gct {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-sm);
}
.gq-merk-glinie {
  flex: 1;
  height: 2px;
  background: #f2ece2;
}

/* ── Eine Zeile = ein Posten ── */
.gq-merk-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 2px dashed #f2ece2;
  /* Bewusst NICHT umbrechend: Häkchen, Bild, Name, Menge, Preis und das
     Entfernen gehören optisch in EINE Zeile. Bricht sie um, landet das kleine
     × mitten im Block und die Zeile liest sich nicht mehr von links nach
     rechts durch. Für schmale Geräte gibt es weiter unten eine eigene,
     bewusst gestaltete Anordnung. */
  flex-wrap: nowrap;
}
.gq-merk-zeile.is-done {
  opacity: 0.55;
}
.gq-merk-zeile.is-done .gq-merk-name {
  text-decoration: line-through;
}
.gq-merk-haken {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: #fff;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.gq-merk-haken svg {
  opacity: 0;
  transition: opacity 0.15s;
}
.gq-merk-haken:hover {
  border-color: #1d9f6b;
}
.gq-merk-haken[aria-pressed="true"] {
  background: #1d9f6b;
  border-color: #1d9f6b;
}
.gq-merk-haken[aria-pressed="true"] svg {
  opacity: 1;
}
.gq-merk-bild {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  /* Echtes Weiß: Produktfotos haben einen weißen Hintergrund und würden auf
     einer getönten Fläche als Kasten erscheinen. */
  background: #fff;
  border: 1px solid rgba(12, 54, 101, 0.07);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.gq-merk-bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.gq-merk-text {
  flex: 1 1 auto;
  min-width: 0;
}
.gq-merk-name {
  display: block;
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--blue-dk);
  text-decoration: none;
}
.gq-merk-name:hover {
  color: var(--blue);
}
.gq-merk-meta {
  font-size: 14px;
  color: var(--text-md);
  font-weight: 500;
  margin-top: 3px;
  /* Lange Herstellernamen dürfen zwei Zeilen brauchen, aber nicht die halbe
     Karte auffressen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gq-merk-chips {
  display: flex;
  gap: 7px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gq-merk-chip {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
}
.gq-merk-chip.is-rot {
  background: #fbe8ec;
  color: var(--red);
}
.gq-merk-chip.is-blau {
  background: var(--blue-xlt);
  color: var(--blue);
}

/* ── Mengen-Wähler ── */
.gq-merk-menge {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  background: #f6f3ed;
  border-radius: 999px;
  padding: 4px;
}
.gq-merk-menge button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--blue-dk);
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.gq-merk-menge button:hover:not(:disabled) {
  background: var(--blue-xlt);
}
.gq-merk-menge button:disabled {
  opacity: 0.4;
  cursor: default;
}
.gq-merk-menge span {
  min-width: 38px;
  text-align: center;
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: var(--blue-dk);
  font-variant-numeric: tabular-nums;
}

/* ── Preisblock ── */
.gq-merk-preis {
  flex: none;
  min-width: 118px;
  text-align: right;
}
.gq-merk-pnum {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.gq-merk-punit {
  font-size: 13px;
  color: var(--text-md);
  font-weight: 600;
  margin-top: 2px;
}
.gq-merk-ppfand {
  font-size: 12px;
  color: var(--text-sm);
  font-weight: 600;
  margin-top: 1px;
}
.gq-merk-weg {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-sm);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.gq-merk-weg:hover {
  background: #fbe8ec;
  color: var(--red);
}
.gq-merk-fehlend {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--text-sm);
  font-weight: 500;
}
.gq-merk-fehlend a {
  font-weight: 700;
  color: var(--blue);
}
/* Aufräum-Knopf im Hinweis — liest sich wie ein Link, ist aber eine Aktion. */
.gq-merk-aufraeumen {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}
.gq-merk-aufraeumen:hover {
  color: var(--red);
}
.gq-merk-ohnepreis {
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-sm);
}

/* ── Zusammenfassung ── */
.gq-merk-summe {
  background: var(--blue-dk);
  border-radius: 24px;
  padding: 26px 26px 22px;
  color: #fff;
}
.gq-merk-summe .gq-merk-label {
  color: rgba(255, 255, 255, 0.55);
}
.gq-merk-zeile2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}
.gq-merk-zeile2:first-of-type {
  margin-top: 18px;
}
.gq-merk-zeile2 strong {
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.gq-merk-strich {
  display: block;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  margin: 18px 0;
}
.gq-merk-gesamt {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.gq-merk-gesamt span {
  font-size: 17px;
  font-weight: 700;
}
.gq-merk-gesamt b {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gq-merk-summe p {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  /* Etwas heller als zuvor: Der Text enthält jetzt den rechtlichen Hinweis und
     muss lesbar sein, nicht dekorativ. */
  color: rgba(255, 255, 255, 0.72);
}
.gq-merk-summe p strong {
  color: #fff;
  font-weight: 700;
}
.gq-merk-aktionen {
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 30px 60px -46px rgba(13, 43, 80, 0.55);
}
.gq-merk-aktionen .gq-merk-btn,
.gq-merk-aktionen .gq-merk-btn-ghost {
  border-radius: 16px;
  padding: 15px;
  width: 100%;
}
.gq-merk-payback {
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--blue-dk);
  font-weight: 600;
  box-shadow: 0 30px 60px -46px rgba(13, 43, 80, 0.55);
}
/* Das echte PAYBACK-Logo. Der frühere blaue Kasten mit gesetztem „PAY BACK"
   war ein Nachbau der Wort-Bild-Marke — nach den Partner-Richtlinien nicht
   zulässig. Jetzt steht hier die Originalgrafik, unverzerrt. */
.gq-merk-pblogo {
  flex: none;
}
.gq-adet-payback-logo {
  margin-bottom: 3px;
}
.gq-merk-payback small {
  display: block;
  color: var(--text-sm);
  font-weight: 500;
  font-size: 13px;
}

/* ── Leerzustand ── */
.gq-merk-leer {
  margin: 34px 0 0;
  background: #fff;
  border-radius: 24px;
  padding: clamp(34px, 5vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 30px 60px -46px rgba(13, 43, 80, 0.55);
}
.gq-merk-leer h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
  color: var(--blue-dk);
  margin: 0;
}
.gq-merk-leer-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.gq-merk-leer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-md);
  max-width: 460px;
}

/* ── Schmale Bildschirme ── */
@media (max-width: 860px) {
  .gq-merk-seite {
    position: static;
  }
  .gq-merk-mlinks {
    margin-left: 0;
    width: 100%;
  }
  .gq-merk-kopf-rechts {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
}
/* Schmale Geräte: Häkchen, Bild und Name bleiben oben, Menge und Preis
   rücken als eigene Reihe darunter — statt sechs Elemente in eine Zeile zu
   quetschen. Das Raster hält beide Reihen sauber untereinander. */
@media (max-width: 720px) {
  .gq-merk-zeile {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "haken bild  text  text"
      "menge menge preis weg";
    align-items: center;
    gap: 10px 12px;
  }
  .gq-merk-haken {
    grid-area: haken;
  }
  .gq-merk-bild {
    grid-area: bild;
    width: 62px;
    height: 62px;
  }
  .gq-merk-text {
    grid-area: text;
  }
  .gq-merk-weg {
    grid-area: weg;
  }
  .gq-merk-menge {
    grid-area: menge;
    justify-self: start;
  }
  .gq-merk-preis {
    grid-area: preis;
    justify-self: end;
    min-width: 0;
  }
  .gq-merk-name {
    font-size: 17px;
  }
  .gq-merk-fbar {
    width: 140px;
  }
}

/* ── Als Zettel drucken ──
   Auf Papier zählt die Liste, nicht die Gestaltung: Kopf, Fuß, Kroni-Bühne,
   Chat-Knopf und die Bedienelemente fallen weg; die Posten stehen
   untereinander mit Menge, Name und Preis. */
@media print {
  .gq-header,
  .gq-footer,
  .gq-apghero,
  .gq-merk-mlinks,
  .gq-merk-aktionen,
  .gq-merk-leeren,
  .gq-merk-weg,
  .gq-merk-menge button,
  .gq-kroni-fab,
  .gq-consent,
  .gq-topbar {
    display: none !important;
  }
  .gq-merk-page {
    background: #fff !important;
    padding: 0;
  }
  .gq-merk-karte,
  .gq-merk-markt,
  .gq-merk-summe {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
  .gq-merk-summe {
    background: #fff !important;
    color: #000 !important;
  }
  .gq-merk-summe .gq-merk-label,
  .gq-merk-zeile2,
  .gq-merk-summe p {
    color: #333 !important;
  }
  .gq-merk-zeile2 strong,
  .gq-merk-gesamt {
    color: #000 !important;
  }
  .gq-merk-spalten {
    display: block;
  }
  .gq-merk-zeile {
    break-inside: avoid;
  }
  .gq-merk-menge span {
    min-width: 0;
  }
}

/* ── Bildergalerie der Angebotsseite (Gebinde + Einzelflasche) ───────────── */
.gq-adet-gal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gq-adet-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.gq-adet-thumb {
  flex: 1 1 0;
  min-width: 86px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gq-adet-thumb:hover {
  transform: translateY(-2px);
}
.gq-adet-thumb.is-on {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue) inset;
}
.gq-adet-thumb img {
  height: 62px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.gq-adet-thumb span {
  font-family: var(--font-h);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sm);
}
.gq-adet-thumb.is-on span {
  color: var(--blue-dk);
}

/* ── Partyplaner: Einblendungen des Seitenentwurfs ────────────────────────
   Der Hero setzt seine Zeilen auf `opacity:0` und blendet sie per Animation
   ein. Fehlen die Keyframes, bleibt die Überschrift dauerhaft unsichtbar —
   deshalb stehen sie hier und nicht als Inline-Block in der Route.
   Es sind Einblendungen beim Laden, KEINE Scroll-Animationen: Inhalt weiter
   unten ist von Anfang an da. */
@keyframes gqBeam {
  0%, 100% { opacity: .16; transform: rotate(var(--a, 0deg)) scaleY(1); }
  50% { opacity: .42; transform: rotate(calc(var(--a, 0deg) + 5deg)) scaleY(1.12); }
}
@keyframes gqBounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(8px); opacity: 1; }
}
@keyframes gqFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes gqGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.08); }
}
@keyframes gqConfetti {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    transform: translateY(860px) rotate(var(--rot, 540deg));
    opacity: 0;
  }
}
@keyframes gqLetter {
  0% { opacity: 0; transform: translateY(70%) scaleY(1.5); filter: blur(9px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes gqStrobe {
  0%, 100% { opacity: .25; }
  50% { opacity: .7; }
}
@keyframes gqUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* Wer Bewegung abbestellt hat, sieht die Seite fertig statt leer: die
   Animation entfällt, die Endwerte gelten sofort. */
@media (prefers-reduced-motion: reduce) {
  .page-partyplaner [style*="gqLetter"],
  .page-partyplaner [style*="gqUp"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .page-partyplaner [style*="gqConfetti"] {
    opacity: 0 !important;
    animation: none !important;
  }
  .page-partyplaner [style*="gqBeam"],
  .page-partyplaner [style*="gqFloat"],
  .page-partyplaner [style*="gqGlow"],
  .page-partyplaner [style*="gqStrobe"],
  .page-partyplaner [style*="gqBounce"] {
    animation: none !important;
  }
}

/* ── Partyplaner: Regler, Einkaufsliste, Druck ────────────────────────────
   Der Seitenentwurf arbeitet mit Inline-Stilen. Was sich damit nicht sagen
   lässt — Schieberegler-Griffe, Zustände, Druckausgabe — steht hier. */

/* Der Griff des Schiebereglers. Ohne eigene Regel setzt Safari seinen
   Standardgriff, der deutlich höher ist als die 8 Punkte hohe Schiene und
   sichtbar darüber hinausragt. Die Schiene selbst (Farbverlauf mit dem
   Füllstand) bleibt im Inline-Stil, weil sie sich mit dem Wert ändert. */
.gq-pp-regler::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #c8102e;
  box-shadow: 0 2px 8px rgba(20, 32, 46, 0.22);
  transition: transform 0.15s;
}
.gq-pp-regler::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.gq-pp-regler::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #c8102e;
  box-shadow: 0 2px 8px rgba(20, 32, 46, 0.22);
}
.gq-pp-regler:focus-visible {
  outline: 3px solid #14202e;
  outline-offset: 6px;
  border-radius: 40px;
}

/* Zeile der Einkaufsliste: die ganze Zeile ist die Schaltfläche zum Abhaken,
   nicht nur das Kästchen — auf dem Handy trifft man sonst zu knapp. */
.gq-pp-zeile {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.gq-pp-zeile:hover .gq-pp-haken {
  border-color: #c8102e;
}
.gq-pp-zeile:focus-visible {
  outline: 2px solid #14202e;
  outline-offset: 2px;
  border-radius: 8px;
}
.gq-pp-haken {
  width: 19px;
  height: 19px;
  border: 1.5px solid #b9ad9a;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gq-pp-haken[data-ab="1"] {
  background: #c8102e;
  border-color: #c8102e;
  color: #fff;
}

/* Das Druckblatt „Dein Partyplan" liegt im Markup, ist am Bildschirm aber
   unsichtbar — gedruckt wird nur es. */
.gq-pp-blatt {
  display: none;
}

/* Druckansicht: Auf Papier gehört der Partyplan, nicht die Website. Alles wird
   unsichtbar geschaltet, das Blatt wieder sichtbar und an den Seitenanfang
   gestellt — das ist der zuverlässige Weg, weil er nicht davon abhängt, wie
   tief das Blatt im Seitengerüst hängt. */
@media print {
  /* Acht Millimeter Rand: Randlos druckt kaum ein Gerät, und was in den
     nicht bedruckbaren Bereich ragt, schiebt der Treiber auf eine zweite
     Seite. */
  @page {
    size: A4;
    margin: 8mm;
  }

  /* Alles ausblenden, was das Blatt weder enthält noch dazugehört. Wichtig:
     `display:none`, nicht `visibility:hidden` — Letzteres versteckt nur die
     Farbe und lässt die Höhe stehen, sodass Chrome über die ganzen neuntausend
     Punkte der Seite paginiert und acht Blätter druckt. */
  body.page-partyplaner *:not(:has(.gq-pp-blatt)):not(.gq-pp-blatt):not(
      .gq-pp-blatt *
    ) {
    display: none !important;
  }
  /* Rückfall für Browser ohne :has() — dort bleibt wenigstens nichts stehen,
     was nicht aufs Papier gehört. */
  body.page-partyplaner * {
    box-shadow: none !important;
    animation: none !important;
  }
  body.page-partyplaner .gq-pp-blatt {
    display: flex !important;
    flex-direction: column;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    /* Das Blatt ist auf 210 mm entworfen; gedruckt wird es auf die nutzbare
       Breite von 194 mm heruntergerechnet. So bleibt der Entwurf maßhaltig und
       passt trotzdem sicher auf ein Blatt — auch wenn eine lange Marktadresse
       eine Zeile mehr braucht. `zoom` skaliert das Layout wirklich, anders als
       `transform`, das nur das Bild verzerrt und den Platzbedarf beibehält. */
    width: 210mm;
    min-height: 297mm;
    zoom: 0.92;
    background: #fff !important;
    color: #14202e;
    page-break-after: avoid;
    break-after: avoid;
  }
  /* Die Farbflächen (schwarzer Kopf, roter Streifen, Mix-Balken) sind der
     Entwurf — ohne das hier druckt Chrome sie weg. */
  body.page-partyplaner .gq-pp-blatt,
  body.page-partyplaner .gq-pp-blatt * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.page-partyplaner .gq-pp-blatt > div {
    break-inside: avoid;
  }
  /* Die Vorfahren des Blattes tragen Layout der Website — auf Papier stören
     ihre Abstände und Hintergründe. */
  body.page-partyplaner:has(.gq-pp-blatt) *:has(.gq-pp-blatt) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
  }
}

/* ══ ADMIN → UPDATES & FASSUNG (/admin/updates) ══
   Beantwortet: Läuft das zuletzt eingespielte Paket wirklich auf diesem
   Server? Die laufende Fassung steht deshalb als ruhige, große Karte oben,
   nicht als Textzeile zwischen anderen Angaben. */
.gq-upd-jetzt {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--blue);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  margin-bottom: 30px;
}
.gq-upd-jetzt-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.gq-upd-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-md);
}
.gq-upd-version {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1;
  color: var(--blue-dk);
}
.gq-upd-jetzt-titel {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.gq-upd-jetzt-datum {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text-md);
  margin-top: 2px;
}
.gq-upd-fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}
.gq-upd-fakten dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-md);
  margin-bottom: 3px;
}
.gq-upd-fakten dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.gq-upd-sub {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-md);
}
.gq-upd-hinweis,
.gq-upd-warn {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
}
.gq-upd-hinweis {
  background: #f4f7fb;
  color: var(--text-md);
}
.gq-upd-warn {
  background: #fdf3f4;
  border: 1px solid #f0c9ce;
  color: #8c2733;
}
.gq-upd-hinweis code,
.gq-upd-warn code {
  font-size: 12.5px;
  background: rgba(12, 54, 101, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Art der Änderung — Wortmarke statt Farbe allein (Barrierefreiheit). */
.gq-upd-art {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.gq-upd-art--fix {
  background: #eaf3fd;
  color: #14508f;
  border-color: #c3ddf6;
}
.gq-upd-art--feature {
  background: #eaf7ee;
  color: #1c6b39;
  border-color: #c2e5cf;
}
.gq-upd-art--sicherheit {
  background: #fdf0ea;
  color: #96411a;
  border-color: #f3d0bd;
}
.gq-upd-art--wartung {
  background: #f1f2f4;
  color: #4a5361;
  border-color: #dcdfe4;
}

.gq-upd-h2 {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 19px;
  color: var(--blue-dk);
  margin: 0 0 14px;
}

/* Zeitstrahl: die senkrechte Linie liegt auf der Marke, nicht dahinter —
   sonst wandert sie bei unterschiedlich hohen Einträgen sichtbar aus. */
.gq-upd-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gq-upd-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0 12px;
  padding-bottom: 22px;
}
.gq-upd-eintrag:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.gq-upd-marke {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--border);
  margin: 5px 0 0 6px;
  position: relative;
  z-index: 1;
}
.gq-upd-eintrag.is-jetzt .gq-upd-marke {
  border-color: var(--blue);
}
.gq-upd-inhalt {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.gq-upd-eintrag.is-jetzt .gq-upd-inhalt {
  border-color: #bcd6f2;
  box-shadow: 0 0 0 3px rgba(24, 103, 194, 0.08);
}
.gq-upd-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.gq-upd-nr {
  font-family: var(--font-h);
  font-weight: 900;
  font-size: 17px;
  color: var(--blue-dk);
}
.gq-upd-datum {
  font-size: 13px;
  color: var(--text-md);
}
.gq-upd-jetzt-chip {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--blue);
  padding: 3px 9px;
  border-radius: 999px;
}
.gq-upd-titel {
  margin: 6px 0 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.gq-upd-punkte {
  margin: 8px 0 0;
  padding-left: 18px;
}
.gq-upd-punkte li {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-md);
  margin-bottom: 4px;
}

/* Fassungs-Marke unten in der Seitenleiste — auf jeder CMS-Seite sichtbar. */
.gq-adm-version {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text-md);
  text-decoration: none;
  border: 1px dashed var(--border);
  text-align: center;
}
.gq-adm-version strong {
  color: var(--blue-dk);
  font-weight: 800;
}
.gq-adm-version:hover {
  border-style: solid;
  border-color: var(--blue);
  color: var(--blue-dk);
}

@media (max-width: 640px) {
  .gq-upd-fakten {
    gap: 12px 22px;
  }
  .gq-upd-eintrag {
    grid-template-columns: 20px 1fr;
  }
  .gq-upd-eintrag:not(:last-child)::before {
    left: 9px;
  }
  .gq-upd-marke {
    margin-left: 3px;
  }
}

/* ══ KOPFZEILE: darf nie über den Bildschirmrand hinauslaufen ══
   Fehlerbild (iPhone 13, 390 px): Sobald ein Angebot gemerkt war, erschien
   das Herz in der Kopfzeile — und schob den Menü-Knopf 35 px aus dem Bild.
   Er war weder sichtbar noch antippbar, die Navigation damit unerreichbar.
   Ohne gemerktes Angebot lag er bei 379 px, also haarscharf drin; die 38 px
   des Herzens kippten es.

   Ursache: In .gq-hinner standen Logo UND Aktionsbereich auf
   `flex-shrink: 0`. Nichts durfte nachgeben, also lief die Zeile über.

   Regel jetzt: Nachgeben darf ausschließlich der Markt-Wähler — sein Text
   kürzt sich mit Auslassungspunkten. Herz und Menü-Knopf geben NIE nach,
   denn ohne sie ist die Seite auf dem Handy nicht mehr bedienbar. */
.gq-hinner {
  min-width: 0;
}
.gq-hactions {
  flex-shrink: 1;
  min-width: 0;
}
.gq-hactions .gq-mktbtn {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.gq-mktname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Unverhandelbar: ohne diese beiden ist die Navigation weg. */
.gq-merkbtn,
.gq-mtoggle {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  /* Auf schmalen Geräten zusätzlich Luft schaffen, damit der Markt-Wähler
     nicht bis zur Unlesbarkeit zusammenschrumpft. */
  .gq-hinner {
    gap: 6px;
  }
  .gq-hactions {
    gap: 4px;
  }
  .gq-hactions .gq-mktbtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 360px) {
  /* Sehr schmale Geräte (iPhone SE 1. Generation, 320 px): Mit gemerktem
     Angebot fehlten zuletzt noch 3 px. Abstände und Innenabstand weiter
     zusammenziehen — die 44-px-Tippziele bleiben unangetastet, die sind
     Barrierefreiheits-Vorgabe und nicht verhandelbar. */
  .gq-hinner {
    gap: 4px;
  }
  .gq-hactions {
    gap: 2px;
  }
  .gq-hactions .gq-mktbtn {
    padding-left: 9px;
    padding-right: 9px;
    gap: 4px;
  }
  .gq-merkbtn {
    padding-left: 9px;
    padding-right: 9px;
  }
}