/* ═══════════════════════════════════════════════════════════════════════
   cro.css — Conversion-Komponenten
   Ziel: an style.css anhängen ODER als eigene Datei mit ?v=JJJJMMTT laden.

   Alle Farben mit Fallback, weil die deployte style.css nicht deckungsgleich
   mit templates/css/style.css ist (Drafts nutzen --gray-*, lokal fehlen sie).
   Mobile First: Basis = Handy, Media Query nur nach oben.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --cro-green:   var(--green-dark, #2d5a27);
  --cro-green-2: var(--green-mid, #3d7a35);
  --cro-pale:    var(--green-light, #e8f5e9);
  --cro-border:  var(--border, #c8ddc5);
  --cro-ink:     var(--ink, #1c1c1a);
  --cro-muted:   var(--muted, #5a6a58);
  --cro-orange:  #f5a623;
  --cro-warn-bg: var(--warn-bg, #fff8e1);
  --cro-radius:  10px;
  --cro-shadow:  0 2px 10px rgba(45, 90, 39, .08);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ─── CTA-Buttons ─────────────────────────────────────────────────────
   Eine Buttonklasse, Varianten per Modifier. Mindesthöhe 48 px:
   Touch-Ziel, sonst Fehlklicks auf dem Handy.                          */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.4rem;
  border: 0; border-radius: 8px;
  font: inherit; font-weight: 700; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.cta:hover  { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .16); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid var(--cro-orange); outline-offset: 2px; }

.cta--offerte    { background: var(--cro-orange); color: #1c1c1a; width: 100%; }
.cta--offerte:hover { background: #ffb52e; color: #1c1c1a; }
.cta--produkt,
.cta--shop       { background: var(--cro-green); color: #fff; }
.cta--produkt:hover, .cta--shop:hover { background: var(--cro-green-2); color: #fff; }
.cta--newsletter { background: var(--cro-green-2); color: #fff; }
/* Neutraler Händler-Link: sichtbar sekundär, damit der bezahlte Klick vorne
   bleibt, aber gut genug erkennbar, dass Schweizer ihn finden. */
.cta--neutral {
  background: #fff; color: var(--cro-green);
  box-shadow: inset 0 0 0 2px var(--cro-border);
}
.cta--neutral:hover { background: var(--cro-pale); color: var(--cro-green); }

/* ─── "Kurz gesagt" — above the fold ────────────────────────────────── */
.kurz-gesagt {
  background: var(--cro-pale);
  border-left: 4px solid var(--cro-green);
  border-radius: 0 var(--cro-radius) var(--cro-radius) 0;
  padding: 1.1rem 1.25rem; margin: 1.25rem 0 2rem;
}
.kurz-gesagt__titel {
  margin: 0 0 .5rem; font-weight: 800; font-size: .95rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cro-green);
}
.kurz-gesagt__liste { margin: 0 0 1rem; padding-left: 1.1rem; }
.kurz-gesagt__liste li { margin-bottom: .35rem; }
.kurz-gesagt__liste li:last-child { margin-bottom: 0; }

/* ─── Inhaltsverzeichnis ────────────────────────────────────────────── */
.toc {
  background: #fff; border: 1.5px solid var(--cro-border);
  border-radius: var(--cro-radius); padding: .9rem 1.1rem; margin: 0 0 2rem;
}
.toc__titel {
  font-weight: 700; color: var(--cro-green); cursor: pointer;
  list-style: none; padding: .15rem 0;
}
.toc__titel::-webkit-details-marker { display: none; }
.toc__titel::after { content: " ▾"; color: var(--cro-muted); }
.toc details[open] .toc__titel::after { content: " ▴"; }
.toc__liste { margin: .75rem 0 0; padding-left: 1.35rem; }
.toc__liste li { margin-bottom: .3rem; }
.toc__liste a { color: var(--cro-green-2); text-decoration: none; }
.toc__liste a:hover { text-decoration: underline; }

/* ─── Produktkarte ──────────────────────────────────────────────────── */
.pkarte {
  display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--cro-border);
  border-radius: var(--cro-radius); box-shadow: var(--cro-shadow);
  overflow: hidden; margin: 1.8rem 0;
}
.pkarte__bild { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pkarte__body { padding: 1.1rem 1.25rem 1.25rem; }
.pkarte__name { margin: 0 0 .6rem; font-weight: 800; font-size: 1.05rem; color: var(--cro-green); }

.pkarte__daten {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem;
  margin: 0 0 .8rem; font-size: .92rem;
}
.pkarte__daten dt { color: var(--cro-muted); }
.pkarte__daten dd { margin: 0; font-weight: 600; }

.pkarte__preis { margin: 0 0 .6rem; font-weight: 800; font-size: 1.15rem; color: var(--cro-ink); }
.pkarte__preis small { display: block; font-weight: 400; font-size: .78rem; color: var(--cro-muted); }
.pkarte__urteil { margin: 0 0 .9rem; font-size: .95rem; }
.pkarte__warnung {
  background: var(--cro-warn-bg); border-left: 3px solid var(--cro-orange);
  padding: .6rem .8rem; margin: 0 0 .9rem; font-size: .9rem; border-radius: 0 6px 6px 0;
}
.pkarte__shops { display: flex; flex-direction: column; gap: .5rem; }

@media (min-width: 620px) {
  .pkarte { flex-direction: row; }
  .pkarte__bild { width: 240px; flex: 0 0 240px; aspect-ratio: auto; }
  .pkarte__shops { flex-direction: row; flex-wrap: wrap; }
  .pkarte__shops .cta { flex: 1 1 auto; }
}

/* ─── Hardware-Karte (autarkie-kompass, technischer Look) ───────────── */
.hwkarte {
  background: #fff; border: 1px solid #d8dde3; border-radius: var(--cro-radius);
  padding: 1.1rem 1.25rem; margin: 1.8rem 0;
}
.hwkarte__kopf { margin-bottom: .8rem; }
.hwkarte__kat {
  display: inline-block; padding: .15rem .55rem; margin-bottom: .35rem;
  background: #eef2f6; border-radius: 4px;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #4a5568;
}
.hwkarte__name { margin: 0; font-weight: 800; font-size: 1.05rem; }
.hwkarte__tabelle { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: .9rem; }
.hwkarte__tabelle th,
.hwkarte__tabelle td { padding: .4rem .6rem; border-bottom: 1px solid #eef2f6; text-align: left; }
.hwkarte__tabelle th { width: 45%; font-weight: 500; color: #5a6472; }
.hwkarte__tabelle td { font-weight: 600; font-variant-numeric: tabular-nums; }
.hwkarte__preis { margin: 0 0 .5rem; font-weight: 800; }
.hwkarte__preis small { display: block; font-weight: 400; font-size: .78rem; color: var(--cro-muted); }
.hwkarte__urteil { margin: 0 0 .8rem; font-size: .95rem; }
.hwkarte__warnung {
  background: #fff4f4; border-left: 3px solid #c62828;
  padding: .6rem .8rem; margin: 0 0 .9rem; font-size: .9rem; border-radius: 0 6px 6px 0;
}
.hwkarte__shops { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ─── Offerte: Teaser + Formular ────────────────────────────────────── */
.offerte-teaser {
  background: linear-gradient(135deg, #fff8ec 0%, #fff3dc 100%);
  border: 1.5px solid #f3d9a4; border-radius: var(--cro-radius);
  padding: 1.15rem 1.3rem; margin: 2rem 0;
}
.offerte-teaser__titel { margin: 0 0 .4rem; font-weight: 800; font-size: 1.05rem; color: #7a4f00; }
.offerte-teaser p { margin-bottom: .9rem; }

.offerte {
  background: #fff; border: 2px solid var(--cro-green); border-radius: var(--cro-radius);
  padding: 1.35rem 1.3rem 1.5rem; margin: 2.5rem 0; box-shadow: var(--cro-shadow);
}
.offerte__titel { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 800; color: var(--cro-green); }
.offerte__intro { margin: 0 0 1.2rem; color: var(--cro-muted); font-size: .95rem; }
.offerte__grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 620px) {
  .offerte__grid { grid-template-columns: 1fr 1fr; }
  .offerte__grid .feld--voll { grid-column: 1 / -1; }
}
.feld { display: flex; flex-direction: column; gap: .3rem; }
.feld label { font-weight: 600; font-size: .92rem; }
.feld .pflicht { color: #c62828; }
.feld input, .feld select, .feld textarea {
  min-height: 46px; padding: .6rem .7rem;
  border: 1.5px solid var(--cro-border); border-radius: 7px;
  font: inherit; font-size: 1rem;  /* 16px — verhindert iOS-Zoom beim Fokus */
  background: #fff; color: var(--cro-ink);
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--cro-green-2); box-shadow: 0 0 0 3px rgba(61, 122, 53, .15);
}
.feld input:user-invalid { border-color: #c62828; }
.feld__hilfe { font-size: .82rem; color: var(--cro-muted); }
.feld--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.feld--check input { min-height: auto; width: 20px; height: 20px; margin-top: .2rem; flex: 0 0 auto; }
.feld--check label { font-weight: 400; font-size: .88rem; }
/* Honeypot: für Menschen unsichtbar, für Bots ausfüllbar. Nicht display:none —
   manche Bots erkennen das und lassen das Feld dann leer. */
.offerte__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.offerte__status { margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 7px; font-weight: 600; }
.offerte__status--ok   { background: #e7faf0; color: #085229; border: 1px solid #13ce66; }
.offerte__status--fail { background: #ffeded; color: #661d1d; border: 1px solid #ff4949; }

/* ─── Sticky-CTA (nur Mobile, nur Offerte-Seiten) ───────────────────── */
.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cro-border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
}
.sticky-cta .cta { flex: 1 1 auto; }
.sticky-cta__close {
  flex: 0 0 auto; width: 40px; height: 40px;
  background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--cro-muted); cursor: pointer;
}
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cta, .cta:hover { transition: none; transform: none; }
}

/* ─── Transparenzhinweis ────────────────────────────────────────────── */
.affiliate-hinweis {
  margin: 2.5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--cro-border);
  font-size: .82rem; color: var(--cro-muted);
}

/* ═══ Mini-Script für Sticky-CTA — ans Body-Ende, nicht in eine .js-Datei
       (< 1 KB, ein Request gespart):

<script>
(function () {
  var el = document.getElementById('stickyCta');
  if (!el || sessionStorage.getItem('stickyCtaZu')) return;
  var an = false;
  function pruef() {
    var tief = (scrollY + innerHeight) / document.body.scrollHeight;
    if (tief > 0.4 && !an) { el.hidden = false; an = true; }
  }
  addEventListener('scroll', pruef, { passive: true });
  pruef();
  el.querySelector('.sticky-cta__close').onclick = function () {
    el.hidden = true;
    sessionStorage.setItem('stickyCtaZu', '1');
  };
})();
</script>
   ═══════════════════════════════════════════════════════════════════ */