/* gp.css — layout like Glueckspanzer, colours of GiveawayShark (11/14/2026, W1).
   Layout model: ~/Projekte/glueckspanzer/website (inline CSS of index.html,
   read only). Colours ONLY from the GS tokens --u-* in assets/unslop.css
   (dark blue; BESTAND.md section 6, column 3). Contract: VERTRAG.md.

   Frame:     header.gp-banner, main.gp-seite, footer.gp-fuss (max 1000 px)
   Header:    a.gp-marke (logo + span.gp-wortmarke), button.gp-menue-knopf,
              nav.gp-kopfnav (header search only since 11/14/2026)
   Sidebar:   div.gp-rahmen > main.gp-seite + aside.gp-leiste (right column,
              11/14/2026; section GP:LEISTE below)
   Blocks:    .gp-kacheln/.gp-kachel, ul.gp-liste/li.gp-karte, section.gp-text,
              aside.gp-hinweis, article.gp-detail/.gp-fliesstext/table.gp-fakten
   Radii:     card 8 px, button 6 px, pill 999 px (like GP).
   Breakpoints like GP: 900, 600, 360 px. Search switches at 960 px
   (assets/kopfsuche.css). This file loads after unslop.css and kopfsuche.css. */

:root {
  --gp-breite: 1000px;
  --gp-r-karte: 8px;
  --gp-r-knopf: 6px;
  /* Tile "electronics": logo steel blue (BESTAND.md section 6, the one
     derived tone of the table). Everything else is a --u-* token. */
  --gp-stahl: #1f3f66;
}

/* ------------------------------------------------------------------ frame */
header.gp-banner,
main.gp-seite,
footer.gp-fuss {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--gp-breite);
  margin-left: auto;
  margin-right: auto;
}

main.gp-seite {
  display: block;
  min-height: 40vh;
  padding: 22px 20px 36px;
  background: var(--u-bg-tief, #071a33);
  border-left: 1px solid var(--u-linie, rgba(143,180,255,.16));
  border-right: 1px solid var(--u-linie, rgba(143,180,255,.16));
  color: var(--u-text, #eef3fb);
  font-size: 15px;
  line-height: 1.5;
}
main.gp-seite h1 { margin: 0 0 10px; color: var(--u-text, #eef3fb); font-size: 26px; line-height: 1.2; font-weight: 700; }
/* h1 like GP: 26 px, phone 23 px (W7, 11/14/2026). unslop.css forces
   `html:root body main h1:not(#u-k)` to 28/40 px with !important; this
   selector is one class stronger (.gp-seite), so it wins regardless of order.
   Only inside main.gp-seite — every page frame carries it. */
html:root body main.gp-seite h1:not(#u-k) { margin: 0 0 10px !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: normal !important; }
html:root body main.gp-seite .gp-detail h1:not(#u-k) { margin: 0 0 12px !important; }
@media (max-width: 600px) {
  html:root body main.gp-seite h1:not(#u-k) { font-size: 23px !important; }
}
main.gp-seite h2 { margin: 0 0 12px; color: var(--u-text, #eef3fb); font-size: 19px; line-height: 1.25; font-weight: 700; }
/* Section h2 like GP (19 px / 1.25 / 700 at every width; 11/14/2026). unslop.css
   forces `html:root body main h2:not(#u-k)` to 20/24 px weight 500 with
   !important; one class more (.gp-seite) wins. Headings inside cards, guide
   cards and asides keep the stronger unslop rule (:is(.card.item, …, aside)). */
html:root body main.gp-seite h2:not(#u-k) { font-size: 19px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: normal !important; }
main.gp-seite .gp-intro { margin: 0 0 20px; color: var(--u-text-2, #b3c2da); font-size: 16px; }
main.gp-seite a:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 2px; }

/* ----------------------------------------------------------------- banner */
header.gp-banner {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  min-height: 140px;
  margin-top: 14px;
  padding: 0 22px 0 18px;
  /* Solid colour, no gradient: unslop.css forbids background-image on every
     element except <html> (":not(html) { background-image: none !important }"). */
  background-color: var(--u-bg, #0a2142);
  border-bottom: 3px solid var(--u-akzent, #d32f2f);
  color: var(--u-text, #eef3fb);
  font-size: 15px;
  line-height: 1.5;
}
header.gp-banner .gp-marke {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--u-text, #eef3fb);
  text-decoration: none;
}
header.gp-banner .gp-logo {
  flex: none;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
header.gp-banner .gp-wortmarke {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--u-text, #eef3fb);
  text-shadow: 0 2px 0 var(--u-bg-tief, #071a33);
  overflow-wrap: break-word;
}
/* GP a.marke has no hover effect (11/14/2026: wordmark underline removed). */
header.gp-banner a:focus-visible,
header.gp-banner button:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 2px; }

/* Main navigation: right of the brand */
header.gp-banner .gp-kopfnav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
}

/* Header search inside the banner: field height like the menu button */
header.gp-banner .kopfsuche { flex: 0 1 auto; }

/* Menu button: only on the phone and only with JS (assets/menue.js) */
header.gp-banner .gp-menue-knopf { display: none; }

@media (max-width: 900px) {
  header.gp-banner .gp-wortmarke { font-size: 34px; }
  header.gp-banner .gp-logo { width: 96px; height: 96px; }
}

/* Search on the phone (<= 960 px, magnifier): the opened field covers the
   banner (the bar of the old header was one row; the banner is taller). The
   result list hangs directly below the banner instead of a fixed offset. */
@media (max-width: 960px) {
  header.gp-banner .kopfsuche { order: 0; }
  html body header.gp-banner .kopfsuche.ist-offen .kopfsuche-form {
    position: absolute;
    z-index: 65;
    inset: 0;
    align-items: center;
    padding: 0 14px;
    background-color: var(--u-bg, #0a2142);
  }
  html body header.gp-banner .kopfsuche.ist-offen .kopfsuche-lupe { left: 24px; }
  html body header.gp-banner .kopfsuche-liste {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    width: auto;
    max-height: min(70vh, 520px);
    padding: 6px 14px;
    border-radius: 0 0 var(--gp-r-karte) var(--gp-r-karte);
  }
}

@media (max-width: 600px) {
  header.gp-banner { margin-top: 0; min-height: 0; padding: 12px 14px; gap: 10px 12px; }
  header.gp-banner .gp-logo { width: 64px; height: 64px; }
  header.gp-banner .gp-wortmarke { font-size: 28px; overflow-wrap: normal; }

  /* With JS: one row — brand | Menu | magnifier; categories fold out below. */
  .js-menue header.gp-banner { flex-wrap: nowrap; }
  .js-menue header.gp-banner .gp-marke { flex: 1 1 auto; gap: 10px; }
  .js-menue header.gp-banner .gp-logo { width: 52px; height: 52px; }
  /* Wordmark size follows the free row width (W10, 11/14/2026): 100vw minus
     everything else in the row (padding 2x14, logo 52, gaps 10+12+12, Menu
     ~96, magnifier 36, 15 px desktop scrollbar as reserve) divided by the
     text width per px of font size ("GiveawayShark" 800: ~7.5). Text and
     free width grow with the same slope, so the gap to the Menu button stays
     the 12 px row gap at every width; it never overflows into the button. */
  .js-menue header.gp-banner .gp-wortmarke { font-size: clamp(12px, calc((100vw - 262px) / 7.6), 28px); white-space: nowrap; }
  .js-menue header.gp-banner .gp-menue-knopf {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--u-linie-2, rgba(143,180,255,.28));
    border-radius: var(--gp-r-knopf);
    background: var(--u-flaeche, #0f2a50);
    color: var(--u-text, #eef3fb);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .js-menue header.gp-banner .gp-menue-knopf:hover { border-color: var(--u-fokus, #8fb4ff); background: var(--u-erhoben, #15335c); }
  .js-menue header.gp-banner .gp-menue-knopf[aria-expanded="true"] {
    border-color: var(--u-akzent, #d32f2f);
    background: var(--u-akzent, #d32f2f);
    color: var(--u-akzent-text, #fff);
  }
  .js-menue header.gp-banner .gp-kopfnav { flex: none; margin-left: 0; gap: 8px; }
  main.gp-seite { padding: 20px 14px 28px; border: 0; }
  main.gp-seite h1 { font-size: 23px; }
}

@media (max-width: 360px) {
  .js-menue header.gp-banner { padding: 10px; gap: 8px; }
  .js-menue header.gp-banner .gp-marke { gap: 8px; }
  .js-menue header.gp-banner .gp-logo { width: 40px; height: 40px; }
  /* Same rule, compact row: padding 2x10, logo 40, gaps 3x8, Menu as text
     only (~63; the label stays, the icon goes), magnifier 36, reserve 15. */
  .js-menue header.gp-banner .gp-wortmarke { font-size: clamp(12px, calc((100vw - 204px) / 7.6), 18px); }
  .js-menue header.gp-banner .gp-menue-knopf { gap: 6px; padding: 0 9px; }
  .js-menue header.gp-banner .gp-menue-knopf svg { display: none; }
}

/* GP:LEISTE START */
/* Sidebar on the LEFT like the Glueckspanzer sidebar (user request 11/14/2026
   "Auf die linke Seite das Menue", replaces the right-hand sidebar of the same
   day). Markup from seitenleiste.php:
   div.gp-rahmen > main.gp-seite + aside#gp-leiste.gp-leiste > div.gp-leiste-block.
   The DOM order stays main -> aside like GP (content first for keyboard and
   screen readers; the skip link a.skip -> #content keeps working); only the
   grid puts the sidebar into column 1. GP .rahmen: 180px | 1fr, 170 px at
   <= 900 px, gap 20 px, padding 22px 10px. Page width stays 1000 px.
   Colours: --u-* tokens only (fallbacks inside var() only). */
.gp-rahmen {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 0 20px;
  width: 100%;
  max-width: var(--gp-breite);
  margin-left: auto;
  margin-right: auto;
  padding: 22px 10px 36px;
  background: var(--u-bg-tief, #071a33);
  border-left: 1px solid var(--u-linie, rgba(143,180,255,.16));
  border-right: 1px solid var(--u-linie, rgba(143,180,255,.16));
}
.gp-rahmen > main.gp-seite {
  grid-column: 2;
  grid-row: 1;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.gp-leiste { grid-column: 1; grid-row: 1; min-width: 0; color: var(--u-text, #eef3fb); font-size: 15px; line-height: 1.5; }
.gp-leiste-block {
  margin-bottom: 18px;
  background: var(--u-flaeche, #0f2a50);
  border: 1px solid var(--u-linie, rgba(143,180,255,.16));
}
/* Box heading like GP .seitenleiste h2 (user 11/14/2026: "Auch das Design der
   Ueberschrift nehmen"): a filled bar without an underline, bold 16/1.3,
   padding 10/12. GP: dark banner green with gold text -> GS: banner navy
   --u-bg with the highlight tone --u-fokus (the GS counterpart of the GP gold,
   same mapping as the hover states). Contrast 7.9:1. Solid colour instead of
   GP's gradient: unslop.css forbids background-image. */
.gp-leiste h2 {
  margin: 0;
  padding: 10px 12px;
  background: var(--u-bg, #0a2142);
  color: var(--u-fokus, #8fb4ff);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}
/* unslop.css sets every h2 to weight 500 with !important; one id-level
   :not() makes the box heading bold like GP (same trick as main.gp-seite h1). */
html:root body .gp-leiste h2:not(#u-k) { font-weight: 700 !important; font-size: 16px !important; line-height: 1.3 !important; letter-spacing: normal !important; }
.gp-leiste h2 a { color: var(--u-fokus, #8fb4ff); text-decoration: none; }
.gp-leiste h2 a:hover { text-decoration: underline; }
.gp-leiste ul, .gp-leiste ol { margin: 0; padding: 0; list-style: none; }
.gp-leiste li + li { border-top: 1px solid var(--u-linie, rgba(143,180,255,.16)); }
.gp-leiste li a {
  display: block;
  padding: 9px 12px;
  border-left: 3px solid transparent;
  color: var(--u-text, #eef3fb);
  line-height: 1.35;
  text-decoration: none;
}
/* GP .seitenleiste li a:hover: lighter surface, highlight colour, underline. */
.gp-leiste li a:hover { background: var(--u-erhoben, #15335c); color: var(--u-fokus, #8fb4ff); text-decoration: underline; }
/* GP marks the current page with the accent edge, the lighter surface and its link colour. */
.gp-leiste li a[aria-current] { border-left-color: var(--u-akzent, #d32f2f); background: var(--u-erhoben, #15335c); color: var(--u-fokus, #8fb4ff); font-weight: 600; }
.gp-leiste a:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: -2px; }

/* Top 3 with medals 1-3 (GP: gold/silver/bronze; here the GS tones
   --u-mittel / --u-text-2 / --u-hoch, ribbon in --u-akzent). Solid colours:
   unslop.css forbids background-image on every element except <html>. */
.gp-leiste .gp-top-liste a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; isolation: isolate; }
.gp-leiste .gp-top-nr {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  border: 1px solid var(--u-bg-tief, #071a33);
  border-radius: 50%;
  background-color: var(--m-ton);
  box-shadow: inset 0 0 0 2px var(--u-linie-2, rgba(143,180,255,.28)), var(--u-knopf-licht, inset 0 1px 0 rgba(255,255,255,.12));
  color: var(--u-bg-tief, #071a33);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.gp-leiste .gp-top-nr::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 10px;
  transform: translateX(-50%);
  background-color: var(--u-akzent, #d32f2f);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.gp-leiste .gp-top-liste li:nth-child(1) .gp-top-nr { --m-ton: var(--u-mittel, #e5a23a); }
.gp-leiste .gp-top-liste li:nth-child(2) .gp-top-nr { --m-ton: var(--u-text-2, #b3c2da); }
.gp-leiste .gp-top-liste li:nth-child(3) .gp-top-nr { --m-ton: var(--u-hoch, #f0794a); }
.gp-leiste .gp-top-text { display: flex; flex-direction: column; min-width: 0; }
.gp-leiste .gp-top-name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gp-leiste .gp-top-wert { margin-top: 2px; color: var(--u-text-2, #b3c2da); font-size: 13px; line-height: 1.2; }
.gp-leiste .gp-top-liste a:hover { text-decoration: none; }
.gp-leiste .gp-top-liste a:hover .gp-top-text { text-decoration: underline; }
.gp-leiste .gp-top-liste a:hover .gp-top-wert { color: var(--u-fokus, #8fb4ff); }

@media (max-width: 900px) {
  .gp-rahmen { grid-template-columns: 170px minmax(0, 1fr); }
}
/* Phone like GP: one column, the sidebar comes AFTER the content (no JS);
   with JS (html.js-menue) it is hidden and the Menu button opens it as a
   panel over the top of the content (assets/menue.js, class .offen). */
@media (max-width: 600px) {
  .gp-rahmen { grid-template-columns: minmax(0, 1fr); padding: 20px 14px 28px; border: 0; }
  .gp-rahmen > main.gp-seite, .gp-leiste { grid-column: auto; grid-row: auto; }
  .gp-leiste { margin-top: 32px; font-size: 16px; }
  .gp-leiste li a, .gp-leiste .gp-top-liste a { padding: 11px 14px; }
  .js-menue .gp-rahmen { position: relative; }
  .js-menue .gp-leiste {
    display: none;
    position: absolute;
    z-index: 40;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 14px 14px 0;
    background: var(--u-bg-tief, #071a33);
    border-bottom: 3px solid var(--u-akzent, #d32f2f);
    box-shadow: var(--u-schatten-menue, 0 8px 24px rgba(0,0,0,.4));
  }
  .js-menue .gp-leiste.offen { display: block; }
}
/* GP:LEISTE ENDE */

/* ----------------------------------------------------------------- footer */
footer.gp-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  margin-bottom: 28px;
  padding: 14px 20px;
  background-color: var(--u-bg, #0a2142);
  border-top: 3px solid var(--u-akzent, #d32f2f);
  color: var(--u-text-2, #b3c2da);
  font-size: 14px;
  line-height: 1.5;
}
footer.gp-fuss .gp-fuss-marke { margin: 0; color: var(--u-text-2, #b3c2da); font-size: 15px; font-weight: 700; }
footer.gp-fuss .gp-fuss-links { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 0 -10px; }
footer.gp-fuss .gp-fuss-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--gp-r-knopf);
  color: var(--u-text, #eef3fb);
  text-decoration: none;
}
/* Hover like GP (11/14/2026, user: "hover like Glueckspanzer, without the extras"):
   GP .fuss-links a:hover = light surface + highlight colour, NO underline.
   GP highlight gold #f4cf52 -> GS highlight --u-fokus (the GS link tone). */
footer.gp-fuss .gp-fuss-links a:hover { background: rgba(255,255,255,.1); color: var(--u-fokus, #8fb4ff); text-decoration: none; }
footer.gp-fuss .gp-fuss-links a:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 0; }
footer.gp-fuss .gp-fuss-links a[aria-current] { color: var(--u-fokus, #8fb4ff); font-weight: 600; }
@media (max-width: 600px) {
  footer.gp-fuss { display: block; margin-bottom: 0; padding: 16px 14px 10px; }
  footer.gp-fuss .gp-fuss-marke { margin-bottom: 4px; }
  footer.gp-fuss .gp-fuss-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
  footer.gp-fuss .gp-fuss-links a { min-height: 44px; }
}
@media (max-width: 360px) {
  footer.gp-fuss .gp-fuss-links { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ tiles */
.gp-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 32px;
}
.gp-kachel {
  --kf: var(--u-erhoben, #15335c);
  position: relative;
  display: block;
  min-height: 136px;
  overflow: hidden;
  padding: 16px 18px 60px;
  background: var(--kf);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s;
}
/* Hover like GP (.kacheln li:hover): the tile turns a darker shade of its own
   colour (--kh), background-color .15s — no filter. */
.gp-kachel--neu { --kf: var(--u-erhoben, #15335c); --kh: var(--u-flaeche, #0f2a50); }
.gp-kachel--geld { --kf: var(--u-akzent, #d32f2f); --kh: var(--u-akzent-hover, #b9282a); }
.gp-kachel--technik { --kf: var(--gp-stahl); --kh: var(--u-erhoben, #15335c); }
.gp-kachel:hover { background: var(--kh); }
.gp-kachel::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 90px; height: 90px;
  background: rgba(0,0,0,.2);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.gp-kachel b { display: block; margin-bottom: 6px; font-size: 20px; line-height: 1.2; font-weight: 700; }
.gp-kachel span { display: block; padding-right: 30px; font-size: 15px; line-height: 1.4; }
.gp-kachel svg { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 56px; height: 56px; }
.gp-kachel:hover b { text-decoration: underline; text-underline-offset: 3px; }
main.gp-seite .gp-kachel { color: #fff; }
main.gp-seite .gp-kachel:focus-visible,
.gp-kachel:focus-visible { outline: 3px solid var(--u-fokus, #8fb4ff); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .gp-kachel { transition: none; } }
@media (max-width: 600px) {
  .gp-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gp-kachel:first-child { grid-column: 1 / -1; }
  .gp-kachel { min-height: 128px; padding: 12px 14px 54px; }
  .gp-kachel::after { width: 74px; height: 74px; }
  .gp-kachel b { font-size: 17px; }
  .gp-kachel span { padding-right: 0; font-size: 14px; }
  .gp-kachel svg { right: 6px; bottom: 6px; width: 48px; height: 48px; }
}
@media (max-width: 340px) {
  .gp-kacheln { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ cards */
.gp-liste { margin: 0; padding: 0; list-style: none; }
.gp-karte,
.gp-detail,
.gp-hinweis {
  margin: 0 0 16px;
  background: var(--u-flaeche, #0f2a50);
  color: var(--u-text, #eef3fb);
  border: 1px solid var(--u-linie-2, rgba(143,180,255,.28));
  border-radius: var(--gp-r-karte);
  overflow: hidden;
}
.gp-karte h3 {
  margin: 0 20px;
  padding: 16px 0 8px;
  border-bottom: 1px solid var(--u-linie, rgba(143,180,255,.16));
  font-size: 20px;
  line-height: 1.25;
}
.gp-karte h3 a,
main.gp-seite .gp-karte h3 a { color: var(--u-text, #eef3fb); text-decoration: none; transition: none; }
/* GP .liste h3 a:hover: underline only, no transition (unslop.css fades the
   underline colour of every main a:not([class]) — not on GP). */
.gp-karte h3 a:hover,
main.gp-seite .gp-karte h3 a:hover { text-decoration: underline; }
.gp-karte p { margin: 12px 20px 0; }
.gp-karte .gp-teaser { color: var(--u-text-2, #b3c2da); overflow-wrap: break-word; }
.gp-karte .gp-preis { margin-bottom: 16px; font-weight: 700; overflow-wrap: break-word; }
.gp-karte > p:last-child { margin-bottom: 16px; }
.gp-fussband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 12px 20px;
  background-color: var(--u-erhoben, #15335c);
  border-top: 1px solid var(--u-linie, rgba(143,180,255,.16));
}
.gp-fussband-daten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.gp-fussband b { font-weight: 600; }
.gp-gewinne, .gp-ende { white-space: nowrap; color: var(--u-text-2, #b3c2da); }
.gp-gewinne b, .gp-ende b { color: var(--u-text, #eef3fb); }

/* Effort pill (gh_aufwand_stufe(): gering/mittel/hoch) */
.gp-aufwand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.gp-aufwand::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.gp-aufwand--gering { color: var(--u-gut, #4cc38a); background: color-mix(in srgb, var(--u-gut, #4cc38a) 14%, transparent); }
.gp-aufwand--mittel { color: var(--u-mittel, #e5a23a); background: color-mix(in srgb, var(--u-mittel, #e5a23a) 14%, transparent); }
.gp-aufwand--hoch { color: var(--u-hoch, #f0794a); background: color-mix(in srgb, var(--u-hoch, #f0794a) 14%, transparent); }

/* Button "Enter" (cards) and the big button of the detail page */
.gp-knopf,
main.gp-seite .gp-knopf {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--gp-r-knopf);
  background: var(--u-akzent, #d32f2f);
  color: var(--u-akzent-text, #fff);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.gp-knopf:hover,
main.gp-seite .gp-knopf:hover { background: var(--u-akzent-hover, #b9282a); color: var(--u-akzent-text, #fff); }
.gp-knopf:focus-visible { outline: 2px solid var(--u-fokus, #8fb4ff); outline-offset: 2px; }
@media (max-width: 600px) {
  .gp-karte h3 { margin: 0 16px; font-size: 19px; }
  .gp-karte p { margin: 12px 16px 0; }
  .gp-fussband { padding: 12px 16px; }
  .gp-fussband .gp-knopf { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------- text sections */
.gp-text { margin: 24px 0 0; padding: 20px 0 0; border-top: 3px solid var(--u-akzent, #d32f2f); }
.gp-text p { margin: 0; color: var(--u-text-2, #b3c2da); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.gp-text p + p { margin-top: 12px; }
.gp-text ul, .gp-text ol { margin: 12px 0 0; padding-left: 20px; color: var(--u-text-2, #b3c2da); font-size: 16px; line-height: 1.6; }
.gp-text a, main.gp-seite .gp-text a { color: var(--u-fokus, #8fb4ff); }

/* ------------------------------------------------------------- note box */
.gp-hinweis { margin-top: 24px; padding: 20px 28px; color: var(--u-text-2, #b3c2da); font-size: 14px; }
.gp-hinweis h2 { margin: 0 0 8px; font-size: 17px; color: var(--u-text, #eef3fb); }
.gp-hinweis p { margin: 0; }
.gp-hinweis p + p { margin-top: 8px; }
.gp-hinweis a, main.gp-seite .gp-hinweis a { color: var(--u-fokus, #8fb4ff); }
@media (max-width: 600px) { .gp-hinweis { padding: 16px; } }

/* ---------------------------------------------------- detail page (W4) */
.gp-detail { padding: 24px 28px; }
.gp-detail h1 { margin: 0 0 12px; }
.gp-detail h2 { margin: 24px 0 12px; font-size: 20px; }
.gp-fliesstext p { margin: 0 0 12px; color: var(--u-text-2, #b3c2da); font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.gp-fakten { width: 100%; margin: 0; border-collapse: collapse; border-top: 1px solid var(--u-linie, rgba(143,180,255,.16)); }
.gp-fakten th, .gp-fakten td { padding: 10px 0; border-bottom: 1px solid var(--u-linie, rgba(143,180,255,.16)); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.gp-fakten th { width: 200px; padding-right: 16px; font-weight: 600; color: var(--u-text, #eef3fb); }
.gp-fakten td { color: var(--u-text-2, #b3c2da); }
.gp-detail .gp-knopf { margin: 24px 0 8px; padding: 12px 28px; font-size: 17px; }
@media (max-width: 600px) {
  .gp-detail { padding: 20px 16px; }
  .gp-detail h1 { font-size: 23px; }
  .gp-fakten, .gp-fakten tbody, .gp-fakten tr, .gp-fakten th, .gp-fakten td { display: block; width: auto; }
  .gp-fakten th { padding: 10px 0 0; border-bottom: 0; }
  .gp-fakten td { padding-top: 2px; }
  .gp-detail .gp-knopf { display: block; text-align: center; }
}

/* Visually hidden, read aloud */
.gp-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}