/* GunPoint Marketing-Aktion (Portlet GpAktion) – Farben/Schriften aus den Theme-Variablen, Bildplatte wie im Theme */
.gp-ak { --gp-ak-accent: var(--gp-accent); margin: 2.5rem 0; color: var(--gp-ink); }
.gp-ak-head { max-width: 760px; margin-bottom: 1.5rem; }
.gp-ak-align-mitte .gp-ak-head { margin-left: auto; margin-right: auto; text-align: center; }
.gp-ak-headline { font-family: var(--gp-display); font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.05; margin: .2rem 0 .6rem; }
.gp-ak-intro { color: var(--gp-muted); margin: 0; }
.gp-ak-accent { color: var(--gp-ak-accent); }

.gp-ak-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.gp-ak-item { display: flex; flex-direction: column; border-radius: var(--gp-radius, 6px); overflow: hidden; min-width: 0; }
.gp-ak-card-flaeche .gp-ak-item { background: var(--gp-surface); box-shadow: inset 0 0 0 1px var(--gp-line); }
.gp-ak-card-dunkel .gp-ak-item { background: var(--gp-dark); color: #F2F2F0; --gp-ink: #F2F2F0; --gp-muted: #B9BCC2; }
.gp-ak-card-offen .gp-ak-item { background: transparent; }

/* 1 Spalte: Bild neben dem Text, Seite und Breite wählbar */
@media (min-width: 768px) {
  .gp-ak-cols-1 .gp-ak-item { display: grid; grid-template-columns: var(--gp-ak-media, 50%) 1fr; align-items: stretch; }
  .gp-ak-cols-1.gp-ak-img-rechts .gp-ak-item { grid-template-columns: 1fr var(--gp-ak-media, 50%); }
  .gp-ak-cols-1.gp-ak-img-rechts .gp-ak-media { order: 2; }
  .gp-ak-cols-1 .gp-ak-body { padding: 2rem 2.25rem; justify-content: center; }
}

.gp-ak-media { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: var(--gp-plate); box-shadow: inset 0 0 0 1px var(--gp-plate-edge); }
.gp-ak-fig { position: relative; max-width: 100%; }
/* Bildausschnitt: fester Rahmen, Bild (mit Punkten) mittig, Zoom über die Breite – überstehende Ränder werden abgeschnitten */
.gp-ak-frame { position: relative; width: 100%; overflow: hidden; }
.gp-ak-frame .gp-ak-fig { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); }
.gp-ak-imglink, .gp-ak-imglink picture { display: block; width: 100%; height: 100%; }
.gp-ak-fig img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: var(--gp-blend, multiply); }
.gp-ak-noimg { padding: 3rem 1rem; color: var(--gp-muted); text-align: center; font-size: .9rem; }
.gp-ak-badge { position: absolute; top: .9rem; left: .9rem; z-index: 3; font-family: var(--gp-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; padding: .35rem .65rem; border-radius: 3px; color: #fff; background: var(--gp-ak-accent); }
.gp-ak-badge-dunkel { background: #15171B; }
.gp-ak-badge-gruen { background: var(--gp-ok, #2E7D32); }
.gp-ak-badge-gelb { background: #FFBB00; color: #15171B; }

.gp-ak-body { display: flex; flex-direction: column; gap: .7rem; padding: 1.25rem 1.35rem 1.4rem; flex: 1; }
.gp-ak-align-mitte .gp-ak-body { text-align: center; align-items: center; }
.gp-ak-title { font-family: var(--gp-ak-title-font, var(--gp-display)); font-size: var(--gp-ak-title-size, 1.7rem); color: var(--gp-ak-title-color, inherit);
  line-height: 1.08; margin: 0; }
.gp-ak-multi .gp-ak-title { font-size: calc(var(--gp-ak-title-size, 1.7rem) * .72); }
.gp-ak-title a { color: inherit; text-decoration: none; }
.gp-ak-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gp-ak-text { font-family: var(--gp-ak-text-font, var(--gp-body)); font-size: var(--gp-ak-text-size, 1rem); color: var(--gp-ak-text-color, var(--gp-muted)); line-height: 1.55; }
.gp-ak-text p, .gp-ak-text ul { margin: 0 0 .5rem; }
.gp-ak-text ul { padding-left: 1.1rem; }
.gp-ak-text li::marker { color: var(--gp-ak-accent); }
.gp-ak-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.gp-ak-align-mitte .gp-ak-chips { justify-content: center; }
.gp-ak-chips span { border: 1px solid var(--gp-line); border-radius: 3px; padding: .25rem .55rem; font-size: .82rem; font-weight: 600; }

.gp-ak-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin-top: auto; padding-top: .3rem; }
.gp-ak-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.gp-ak-price b { font-family: var(--gp-display); font-size: 1.8rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gp-ak-price s { color: var(--gp-muted); font-size: .9rem; }
.gp-ak-save { background: var(--gp-ak-accent); color: #fff; font-weight: 700; font-size: .78rem; padding: .15rem .4rem; border-radius: 3px; }
.gp-ak-avail { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--gp-muted); }
.gp-ak-avail i { width: .55rem; height: .55rem; border-radius: 50%; background: #9AA0A6; }
.gp-ak-avail-ok i { background: var(--gp-ok, #2E7D32); }
.gp-ak-avail-warn i { background: var(--gp-warn, #E0A100); }
.gp-ak-cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.gp-ak-align-mitte .gp-ak-cta { justify-content: center; }
.gp-ak-cartform { margin: 0; }

/* Punkte auf dem Bild */
.gp-ak-dot { position: absolute; z-index: 2; width: 1.9rem; height: 1.9rem; margin: -.95rem 0 0 -.95rem; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: var(--gp-ak-accent); color: #fff; font: 700 .8rem/1 var(--gp-ak-dot-font, var(--gp-body)); cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.gp-ak-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--gp-ak-accent); opacity: 0; animation: gp-ak-puls 2.2s ease-out infinite; }
.gp-ak-dots-puls .gp-ak-dot span, .gp-ak-dots-callout .gp-ak-dot span { display: none; }
.gp-ak-dots-puls .gp-ak-dot::before, .gp-ak-dots-callout .gp-ak-dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; }
@keyframes gp-ak-puls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gp-ak-dot::after { animation: none; } }

.gp-ak-tip { position: absolute; z-index: 4; width: max-content; max-width: min(240px, 46%); padding: .55rem .7rem; border-radius: 4px;
  background: rgba(21, 23, 27, .92); color: #fff; font: .82rem/1.35 var(--gp-ak-dot-font, var(--gp-body)); box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  pointer-events: none; opacity: 0; transition: opacity .15s; transform: translate(1.4rem, -50%);
  margin-left: var(--gp-ak-sx, 0px); margin-top: var(--gp-ak-sy, 0px); }
.gp-ak-tip b { display: block; font-size: .9rem; margin-bottom: .1rem; color: #fff; }
.gp-ak-tip span { color: #D6D8DC; }
.gp-ak-tip-links { transform: translate(calc(-100% - 1.4rem), -50%); }
.gp-ak-dot:hover + .gp-ak-tip, .gp-ak-dot:focus-visible + .gp-ak-tip, .gp-ak-dot.is-open + .gp-ak-tip { opacity: 1; }

/* Callouts: Text immer sichtbar, Linie vom Punkt zum Kasten */
.gp-ak-dots-callout .gp-ak-tip { opacity: 1; transform: translate(2.6rem, -50%); }
.gp-ak-dots-callout .gp-ak-tip-links { transform: translate(calc(-100% - 2.6rem), -50%); }
.gp-ak-dots-callout .gp-ak-tip::before { content: ""; position: absolute; top: calc(50% - var(--gp-ak-sy, 0px)); width: 1.7rem; border-top: 2px solid var(--gp-ak-accent); }
.gp-ak-dots-callout .gp-ak-tip-rechts::before { right: 100%; }
.gp-ak-dots-callout .gp-ak-tip-links::before { left: 100%; }
.gp-ak-tip-oben { transform: translate(-50%, calc(-100% - 1.4rem)); }
.gp-ak-tip-unten { transform: translate(-50%, 1.4rem); }
.gp-ak-dots-callout .gp-ak-tip-oben { transform: translate(-50%, calc(-100% - 2.6rem)); }
.gp-ak-dots-callout .gp-ak-tip-unten { transform: translate(-50%, 2.6rem); }
.gp-ak-dots-callout .gp-ak-tip-oben::before, .gp-ak-dots-callout .gp-ak-tip-unten::before { top: auto; left: calc(50% - var(--gp-ak-sx, 0px)); width: 0; height: 1.7rem; border-top: 0; border-left: 2px solid var(--gp-ak-accent); }
.gp-ak-dots-callout .gp-ak-tip-oben::before { top: 100%; }
.gp-ak-dots-callout .gp-ak-tip-unten::before { bottom: 100%; }

/* Legende: bei „Nummern“ immer, sonst nur auf dem Handy (dort statt Tooltips/Callouts) */
.gp-ak-legend { display: none; margin: 0; padding-left: 1.3rem; font-family: var(--gp-ak-dot-font, var(--gp-body)); font-size: .9rem; color: var(--gp-muted); }
.gp-ak-legend li { margin-bottom: .3rem; }
.gp-ak-legend li::marker { color: var(--gp-ak-accent); font-weight: 700; }
.gp-ak-legend b { color: var(--gp-ink); }
.gp-ak-dots-nummer .gp-ak-legend { display: block; }
.gp-ak-dots-nummer .gp-ak-tip { display: none; }
@media (max-width: 767.98px) {
  .gp-ak-tip { display: none; }
  .gp-ak-legend { display: block; }
  .gp-ak-dot span { display: block !important; }
  .gp-ak-dot::before { display: none; }
  .gp-ak-dot { width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .gp-ak-multi .gp-ak-tip { display: none; }
  .gp-ak-multi .gp-ak-legend { display: block; }
  .gp-ak-multi .gp-ak-dot span { display: block !important; }
  .gp-ak-multi .gp-ak-dot::before { display: none; }
}

/* Punkte-Helfer (?gp_punkte=1) und Composer-Vorschau: 10-%-Raster */
.gp-ak-helper .gp-ak-fig, .gp-ak-preview .gp-ak-fig { cursor: crosshair;
  background-image: linear-gradient(rgba(200, 16, 46, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(200, 16, 46, .35) 1px, transparent 1px);
  background-size: 10% 10%; }
.gp-ak-helper .gp-ak-fig img, .gp-ak-preview .gp-ak-fig img { opacity: .85; }
.gp-ak-coord { position: fixed; z-index: 9999; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #15171B; color: #fff;
  padding: .6rem 1rem; border-radius: 4px; font: 600 .95rem/1.3 Consolas, monospace; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.gp-ak-mark { position: absolute; z-index: 5; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FFBB00; border: 2px solid #15171B; pointer-events: none; }

/* Mehrere Karten: Raster und Maße der Produktboxen des Shops (Desktop 4, Tablet 3, Handy 2 je Reihe, 32 px Abstand).
   Weniger Karten stehen mittig im Raster, mehr Karten werden zum Slider (Pfeile, Wischen, optional Automatik). */
.gp-ak-multi { --gp-ak-gap: 32px; --gp-ak-k: 2; }
.gp-ak-multi .gp-ak-grid { gap: var(--gp-ak-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-ak-multi .gp-ak-item { grid-column: span 2; }
.gp-ak-n-1 .gp-ak-first { grid-column: 2 / span 2; }
.gp-ak-multi .gp-ak-media { margin: 0; padding: 12px; }
.gp-ak-multi .gp-ak-body { padding: 1rem 1rem 1.15rem; gap: .55rem; }
.gp-ak-multi .gp-ak-price b { font-size: 1.45rem; }
.gp-ak-card-flaeche.gp-ak-multi .gp-ak-item { box-shadow: none; border: 1px solid var(--gp-line); }
@media (min-width: 768px) {
  .gp-ak-multi { --gp-ak-k: 3; }
  .gp-ak-multi .gp-ak-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gp-ak-n-1 .gp-ak-first { grid-column: 3 / span 2; }
  .gp-ak-n-2 .gp-ak-first { grid-column: 2 / span 2; }
}
@media (min-width: 1200px) {
  .gp-ak-multi { --gp-ak-k: 4; }
  .gp-ak-multi .gp-ak-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .gp-ak-n-1 .gp-ak-first { grid-column: 4 / span 2; }
  .gp-ak-n-2 .gp-ak-first { grid-column: 3 / span 2; }
  .gp-ak-n-3 .gp-ak-first { grid-column: 2 / span 2; }
}
@media (max-width: 767.98px) { .gp-ak-multi { --gp-ak-gap: 16px; } }

/* Slider: Handy ab 3, Tablet ab 4, Desktop ab 5 Karten */
.gp-ak-track { position: relative; }
.gp-ak-nav { display: none; position: absolute; z-index: 6; top: 134px; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 1px solid var(--gp-line);
  border-radius: 50%; background: #fff; color: var(--gp-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; place-items: center; transition: opacity .15s; }
.gp-ak-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gp-ak-nav:hover { color: var(--gp-ak-accent); }
.gp-ak-nav[disabled] { opacity: 0; pointer-events: none; }
.gp-ak-prev { left: -22px; }
.gp-ak-next { right: -22px; }
@media (max-width: 767.98px) {
  .gp-ak-s-sm .gp-ak-grid { display: flex; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .gp-ak-s-md .gp-ak-grid { display: flex; }
  .gp-ak-s-md .gp-ak-nav { display: grid; }
}
@media (min-width: 1200px) {
  .gp-ak-s-xl .gp-ak-grid { display: flex; }
  .gp-ak-s-xl .gp-ak-nav { display: grid; }
}
.gp-ak-multi .gp-ak-grid { scroll-behavior: smooth; }
.gp-ak-s-sm .gp-ak-grid, .gp-ak-s-md .gp-ak-grid, .gp-ak-s-xl .gp-ak-grid { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.gp-ak-s-sm .gp-ak-grid::-webkit-scrollbar, .gp-ak-s-md .gp-ak-grid::-webkit-scrollbar, .gp-ak-s-xl .gp-ak-grid::-webkit-scrollbar { display: none; }
.gp-ak-s-sm .gp-ak-item, .gp-ak-s-md .gp-ak-item, .gp-ak-s-xl .gp-ak-item {
  flex: 0 0 calc((100% - (var(--gp-ak-k) - 1) * var(--gp-ak-gap)) / var(--gp-ak-k)); scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .gp-ak-multi .gp-ak-grid { scroll-behavior: auto; } }
.gp-ak-card-offen.gp-ak-multi .gp-ak-media { border-radius: var(--gp-radius, 6px); }

/* Zeitsteuerung und Countdown */
.gp-ak[hidden], .gp-ak [hidden], .gp-ak-leer { display: none !important; }
.gp-ak-cols-1 .gp-ak-cd-leiste, .gp-ak-cols-1 .gp-ak-note-card { grid-column: 1 / -1; }
.gp-ak-note { display: inline-block; margin: 0 0 .75rem; padding: .3rem .6rem; border-radius: 3px; background: #FFF4CC; color: #5C4600;
  border: 1px dashed #C9A100; font-size: .8rem; font-weight: 600; }
.gp-ak-note-card { display: block; margin: 0; border-radius: 0; border-width: 0 0 1px; }
.gp-ak-cd { display: flex; align-items: center; gap: .45rem; font-family: var(--gp-ak-dot-font, var(--gp-body)); font-weight: 600; line-height: 1.2; }
.gp-ak-cd svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gp-ak-cd-time { font-family: var(--gp-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.gp-ak-cd-leiste { justify-content: center; flex-wrap: wrap; padding: .55rem .9rem; background: var(--gp-ak-accent); color: #fff; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.gp-ak-cd-leiste .gp-ak-cd-time { font-size: 1.05rem; }
.gp-ak-cd-preis { margin-top: auto; color: var(--gp-ak-accent); font-size: .9rem; }
.gp-ak-cd-preis + .gp-ak-buy { margin-top: 0; }
.gp-ak-cd.is-ended { background: #5F6368; }
.gp-ak-cd-preis.is-ended { background: none; color: var(--gp-muted); }
.gp-ak-media .gp-ak-cd-leiste { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; flex-wrap: nowrap; gap: .35rem; padding: .4rem .6rem;
  font-size: .72rem; white-space: nowrap; }
.gp-ak-media .gp-ak-cd-leiste .gp-ak-cd-label { overflow: hidden; text-overflow: ellipsis; }
.gp-ak-media .gp-ak-cd-leiste .gp-ak-cd-time { font-size: .9rem; }