/* Darstellung anpassen – goldreserven.de (Flatsome + nmfshop)
   Die Klassen grd-* setzt das Skript auf <html>. */

/* Schrift: Das Child-Theme setzt viele Größen fest in px (oft mit !important),
   Variablen oder Root-% greifen dort nicht. zoom vergrößert Inhalt und Footer
   gleichmäßig und bricht neu um; Kopfleiste und Panel bleiben unverändert. */
html.grd-schrift-1 #main, html.grd-schrift-1 #footer { zoom: 1.15; }
html.grd-schrift-2 #main, html.grd-schrift-2 #footer { zoom: 1.3; }
html.grd-schrift-1 .cyb-recht, html.grd-schrift-2 .cyb-recht { max-width: none; }

/* Hoher Kontrast: Seite schwarz auf weiß, Footer weiß auf schwarz, Links unterstrichen */
html.grd-kontrast body :not(.grd-panel, .grd-panel *, #footer, #footer *) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  border-color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.grd-kontrast body,
html.grd-kontrast #footer, html.grd-kontrast #footer :not(img, svg, svg *) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  border-color: #fff !important;
}
html.grd-kontrast body { background-color: #fff !important; }
html.grd-kontrast #footer a { color: #ffe600 !important; }
html.grd-kontrast body :is(#main, #header) a { text-decoration: underline !important; }
html.grd-kontrast body :is(.button, button, input[type="submit"]):not(.grd-panel *) {
  border: 2px solid #000 !important;
}
html.grd-kontrast .overlay, html.grd-kontrast .bg-overlay { display: none !important; }

/* Bewegung anhalten (Slider zusätzlich per Skript) */
html.grd-ruhig *, html.grd-ruhig *::before, html.grd-ruhig *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Zeilenabstand */
html.grd-zeilen body :is(p, li, dd, dt, td, th, label, blockquote, .product-short-description, .entry-content) {
  line-height: 2 !important;
}
html.grd-zeilen body :is(p, li) { letter-spacing: .02em; word-spacing: .08em; }

/* Großer Mauszeiger */
html.grd-zeiger, html.grd-zeiger * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 7.6-6.4 1.9-2.6 6.6z' fill='%23111' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
html.grd-zeiger :is(a, button, [role="button"], label, select, summary),
html.grd-zeiger :is(a, button, [role="button"], label, select, summary) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 7.6-6.4 1.9-2.6 6.6z' fill='%23dcae33' stroke='%23111' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, pointer !important;
}

/* Links hervorheben */
html.grd-links body a:not(.grd-panel *) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 2px dashed #dcae33 !important;
  outline-offset: 2px;
}
html.grd-links body #main a:not(.button, :has(img)) { background-color: #fff6d6; color: #000 !important; }

/* ── Auslöser im Footer ── */
.cyb-recht-sec .grd-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px auto 0; padding: 8px 18px;
  background: transparent; border: 1px solid rgba(220,174,51,.6); border-radius: 99px;
  color: #e6e6e6; font: inherit; font-size: 14px; line-height: 1.3; letter-spacing: normal;
  text-transform: none; white-space: nowrap; min-height: 0; cursor: pointer;
}
.cyb-recht-sec .grd-knopf svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #dcae33; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cyb-recht-sec .grd-knopf:hover, .cyb-recht-sec .grd-knopf:focus-visible { color: #dcae33; border-color: #dcae33; }
.cyb-recht-sec .grd-knopf:focus-visible { outline: 2px solid #dcae33; outline-offset: 3px; }

/* ── Panel ── */
.grd-panel {
  /* Trusted-Shops-Siegel liegt mit 2147483647 unten links; gleicher Wert, das Panel kommt später im DOM */
  position: fixed; z-index: 2147483647;
  left: 16px; bottom: 16px;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; box-sizing: border-box;
  background: #222220 !important; color: #f2f2f2 !important;
  border: 1px solid rgba(220,174,51,.45); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.45);
  font-family: Lato, system-ui, sans-serif; font-size: 15px; line-height: 1.35; text-align: left;
}
.grd-panel[hidden] { display: none; }
/* Siegel und schwebende Knöpfe (Warenkorb, nach oben) würden das offene Panel am Handy überdecken */
/* Siegel: opacity statt visibility, die inneren Elemente setzen sich selbst wieder sichtbar */
html.grd-offen [id^="trustbadge-container"] { opacity: 0 !important; pointer-events: none !important; }
html.grd-offen .back-to-top { visibility: hidden !important; }
.grd-panel * { box-sizing: border-box; }
.grd-panel .grd-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.grd-panel .grd-titel { margin: 0; padding: 0; font-size: 17px; font-weight: 700; color: #dcae33; letter-spacing: .02em; text-transform: none; }
.grd-panel button {
  margin: 0; min-height: 0; font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none;
  cursor: pointer; color: #f2f2f2; background: transparent;
}
.grd-panel svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.grd-panel .grd-zu { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; }
.grd-panel .grd-zu:hover { background: rgba(255,255,255,.1); }
.grd-panel .grd-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grd-panel .grd-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 86px; padding: 12px 8px; text-align: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.04);
}
.grd-panel .grd-opt svg { color: #dcae33; width: 26px; height: 26px; }
.grd-panel .grd-text { font-size: 14px; line-height: 1.25; text-wrap: balance; overflow-wrap: break-word; }
.grd-panel .grd-wert { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 700; color: #dcae33; }
.grd-panel .grd-opt:hover { background: rgba(255,255,255,.09); }
.grd-panel .grd-opt[aria-pressed="true"] { background: #dcae33; border-color: #dcae33; color: #1b1b1a; }
.grd-panel .grd-opt[aria-pressed="true"] svg, .grd-panel .grd-opt[aria-pressed="true"] .grd-wert { color: #1b1b1a; }
.grd-panel .grd-reset {
  display: block; width: 100%; margin-top: 12px; padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 99px; font-weight: 600; white-space: nowrap;
}
.grd-panel .grd-reset:hover { border-color: #fff; }
.grd-panel .grd-hinweis { margin: 10px 0 0; font-size: 12.5px; color: #bdbdbd; text-align: center; text-wrap: balance; }
.grd-panel button:focus-visible { outline: 2px solid #dcae33; outline-offset: 2px; }
html.grd-kontrast .grd-panel { border-color: #fff; }
@media (max-width: 549px) {
  .grd-panel { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 14px; }
  .grd-panel .grd-opt { min-height: 78px; }
}