/* ============================================================
   Frontend-Redesign — Header · Hero · Footer
   Wird NACH hochzeitsraetsel.min.css geladen. Eigene Klassen
   sind mit .hr- präfixiert wo sie mit Bootstrap kollidieren
   (btn/nav/card/price). Fonts sind bereits global definiert.
   ============================================================ */
:root{
  --pink:#FEA794; --pink-soft:#FFE6DE; --coral:#F0846F; --coral-deep:#E36159;
  --paper:#FFFCFB; --paper-2:#FFF3EF; --ink:#4A383C; --card:#FFFFFF;
  --gold:#D3B487; --muted:#98868B; --line:#F6E7E1;
  --b-magenta:#E73C7E; --b-cyan:#23A6D5; --b-teal:#23D5AB; --b-orange:#EE7752; --b-yellow:#FFD24A; --b-ink:#1c1220;
  --shadow-soft:0 20px 55px -26px rgba(58,42,46,.4);
  --shadow-lift:0 34px 80px -30px rgba(227,97,89,.45);
  --font-script:'Caveat', ui-rounded, cursive;
  --font-serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --font-sans:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --hr-maxw:1180px;
}
body{background:var(--paper)}
html{scroll-behavior:smooth}
#configurator,.hr-section{scroll-margin-top:96px}
.hr-inner{max-width:var(--hr-maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.hr-eyebrow{font-family:var(--font-serif);font-style:italic;color:var(--coral);font-size:1rem}
.hr-script{font-family:var(--font-script);font-weight:700;line-height:.9}

/* buttons */
.hr-btn{--_g:linear-gradient(100deg,var(--pink),var(--coral));display:inline-flex;align-items:center;gap:10px;
  position:relative;overflow:hidden;border:none;cursor:pointer;font-family:var(--font-sans);font-weight:800;
  color:#fff !important;text-decoration:none;background:var(--_g);border-radius:999px;
  transition:transform .25s,box-shadow .25s;box-shadow:0 14px 30px -12px var(--coral)}
.hr-btn:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 22px 40px -14px var(--coral);color:#fff !important}
.hr-btn::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%)}
.hr-btn:hover::after{animation:hr-sheen .9s ease}
.hr-btn.sm{padding:11px 20px;font-size:.94rem}
.hr-btn.md{padding:14px 26px;font-size:1rem}
.hr-btn.xl{padding:18px 34px;font-size:1.12rem;border-radius:16px}
/* Ein einzelner, betont großer Hero-CTA (ersetzt die zwei Buttons) */
.hr-btn.hero-cta{padding:22px 48px;font-size:1.34rem;font-weight:800;border-radius:18px;gap:13px;
  box-shadow:0 20px 44px -14px var(--coral)}
.hr-btn.hero-cta svg{width:22px;height:22px}
@media(max-width:520px){.hr-btn.hero-cta{width:100%;justify-content:center;padding:20px 24px;font-size:1.18rem}}
.hr-btn.ghost{background:var(--card);color:var(--ink) !important;border:1px solid var(--line);box-shadow:none}
.hr-btn.ghost:hover{border-color:var(--coral);color:var(--coral) !important}
.hr-btn.dark{background:#fff;color:var(--coral-deep) !important}
.hr-btn svg{flex:0 0 auto}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:1030;backdrop-filter:saturate(140%) blur(14px);
  background:rgba(255,252,251,.82);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s;
  animation:hr-drop .7s cubic-bezier(.2,.8,.2,1) both}
.site-head.scrolled{border-bottom-color:var(--line);box-shadow:0 12px 30px -24px rgba(58,42,46,.5)}
.site-head .head-row{display:flex;align-items:center;gap:20px;height:78px}
.site-head .brand-logo{height:34px;width:auto;display:block;mix-blend-mode:multiply}
.hr-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.hr-nav>a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:.94rem;color:var(--muted);
  text-decoration:none;transition:color .2s,background .2s}
.hr-nav>a:hover{color:var(--ink);background:color-mix(in srgb,var(--pink) 32%,transparent)}
.head-cta{margin-left:8px}
/* FAQ dropdown */
.drop{position:relative}
.drop-t{background:none;border:none;font:inherit;cursor:pointer;padding:9px 14px;border-radius:999px;
  font-weight:600;font-size:.94rem;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.drop-t:hover,.drop:focus-within .drop-t{color:var(--ink);background:color-mix(in srgb,var(--pink) 32%,transparent)}
.drop-m{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:260px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--pink);border-radius:16px;
  box-shadow:var(--shadow-soft);padding:8px;opacity:0;visibility:hidden;transition:.2s;z-index:1040}
.drop:hover .drop-m,.drop:focus-within .drop-m{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-m a{display:block;padding:9px 12px;border-radius:10px;color:var(--ink);font-weight:500;font-size:.92rem;text-decoration:none}
.drop-m a:hover{background:color-mix(in srgb,var(--pink) 24%,transparent);color:var(--coral-deep)}
.drop-sep{height:1px;background:var(--line);margin:6px 4px}
@media(max-width:960px){.hr-nav{display:none}}
/* burger + mobile menu */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  border:1px solid var(--line);border-radius:13px;background:var(--card);cursor:pointer;padding:0}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:0 auto;border-radius:2px;transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){.burger{display:flex;margin-left:auto}.head-cta{display:none}}
.mobile-nav{position:fixed;top:78px;left:0;right:0;bottom:0;z-index:1020;background:var(--paper);
  /* Unten großzügig Platz lassen: auf der Startseite sitzt die fixe Warenkorb-/
     Kassenleiste (.ed-side, min-height 62px) am unteren Rand und würde sonst den
     letzten Menü-Button verdecken. Safe-Area für Geräte mit Home-Indicator. */
  padding:16px clamp(18px,5vw,30px) calc(96px + env(safe-area-inset-bottom));overflow-y:auto;display:flex;flex-direction:column;
  transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .28s,transform .28s,visibility .28s}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav>a{padding:15px 12px;border-radius:12px;font-weight:700;font-size:1.12rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-nav>a:hover{background:color-mix(in srgb,var(--pink) 24%,transparent);color:var(--coral-deep)}
.mnav-group{padding:8px 0;border-bottom:1px solid var(--line)}
.mnav-label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);padding:8px 12px 4px}
.mnav-group a{display:block;padding:11px 12px 11px 24px;border-radius:10px;font-weight:600;font-size:1rem;color:var(--muted);text-decoration:none}
.mnav-group a:hover{background:color-mix(in srgb,var(--pink) 20%,transparent);color:var(--coral-deep)}
.mobile-nav .hr-btn{margin-top:18px;justify-content:center;font-size:1.06rem;padding:16px}

/* ---------- Hero ---------- */
.hr-hero{position:relative;padding:clamp(46px,6.5vw,86px) 0 clamp(24px,3vw,40px);
  background:radial-gradient(1300px 680px at 86% -14%, color-mix(in srgb,var(--pink) 26%,transparent), transparent 64%),
    radial-gradient(920px 560px at -12% 0%, color-mix(in srgb,var(--pink) 15%,transparent), transparent 62%)}
.hr-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hr-floaty{position:absolute;bottom:-8%;opacity:0;color:var(--pink);animation:hr-floatUp linear infinite}
.hr-hero .hr-inner{position:relative;z-index:1}
.hero-head{max-width:800px;margin:0 auto;text-align:center}
.hero-head h1{font-family:var(--font-serif);font-weight:700;font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.03;
  margin:.32em 0 .12em;color:var(--ink);text-wrap:balance}
.hero-head h1 .hr-script{display:inline-block;color:var(--coral);font-size:1.3em;transform:rotate(-3deg);padding:0 .05em}
.hero-head .hr-eyebrow{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:4px}
.hero-head .hr-eyebrow::before,.hero-head .hr-eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
.hero-sub{max-width:600px;margin:.55em auto 0;color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.18rem)}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hr-trust{display:flex;gap:14px 26px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.92rem}
.hr-trust b{color:var(--ink)}
.hr-stars{color:var(--gold);letter-spacing:2px}
.hr-proof{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 18px;box-shadow:var(--shadow-soft);font-size:.92rem;color:var(--ink);margin-bottom:8px}
.hr-proof b{font-weight:800}
a.hr-proof{text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
a.hr-proof:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift);border-color:var(--pink)}
a.hr-proof svg{color:var(--muted)}

/* Bewertungs-Badge + Pflicht-Transparenzhinweis (§ 5b Abs. 3 UWG), zentriert im Hero */
/* Sitzt jetzt UNTER den Trust-Punkten am Fuß des Hero → Abstand nach oben. */
.hr-proof-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:20px}
.hr-proof-wrap .hr-proof{margin-bottom:0}
.hr-proof-note{max-width:520px;font-size:.84rem}
.hr-proof-note summary{list-style:none;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;
  gap:5px;padding:2px 6px;border-radius:8px;transition:color .2s}
.hr-proof-note summary::-webkit-details-marker{display:none}
.hr-proof-note summary::before{content:"ⓘ";font-size:.95em}
.hr-proof-note summary:hover,.hr-proof-note[open] summary{color:var(--ink)}
.hr-proof-note[open] summary{font-weight:600}
.hr-proof-pop{margin-top:8px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;box-shadow:var(--shadow-soft);color:var(--muted);line-height:1.5}
.hr-proof-pop p{margin:0 0 8px}
.hr-proof-pop p:last-child{margin-bottom:0}
.hr-proof-pop a{color:var(--coral-deep);text-decoration:underline}

/* Site-weiter News-/Ankündigungsstreifen */
.hr-news{background:color-mix(in srgb,var(--pink) 34%,#fff);border-bottom:1px solid var(--line)}
.hr-news[hidden]{display:none}
.hr-news-inner{position:relative;max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 44px}
.hr-news-tag{flex:none;background:var(--coral);color:#fff;font-weight:800;font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px}
.hr-news-txt{margin:0;color:var(--ink);font-size:.92rem;line-height:1.4}
.hr-news-txt a{color:var(--coral-deep);font-weight:600;text-decoration:underline;margin-left:6px;white-space:nowrap}
.hr-news-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:1.35rem;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px;transition:color .2s}
.hr-news-x:hover{color:var(--ink)}
@media(max-width:560px){.hr-news-txt a{display:block;margin-left:0;margin-top:2px}}

/* reassurance strip */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(44px,5.2vw,72px)}
@media(max-width:860px){.assure{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.assure{grid-template-columns:1fr}}
.assure .a{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow-soft);
  transition:transform .25s,box-shadow .25s}
.assure .a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.assure .a .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  background:color-mix(in srgb,var(--pink) 26%,transparent);color:var(--coral-deep);margin-bottom:12px}
.assure .a b{display:block;font-size:1.02rem;color:var(--ink);margin-bottom:3px}
.assure .a p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.assure .a a{color:var(--coral-deep);font-weight:700}
.assure .a.hero-note{background:linear-gradient(135deg,color-mix(in srgb,var(--pink) 30%,#fff),#fff);
  border-color:color-mix(in srgb,var(--pink) 40%,transparent)}

/* ---------- product cards ---------- */
.hr-section{max-width:var(--hr-maxw);margin:clamp(30px,4vw,52px) auto 0;padding:0 clamp(18px,4vw,40px)}
.hr-card{position:relative;border-radius:28px;overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.hr-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.hr-tag{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.15em;padding:8px 14px;border-radius:999px}
.hr-card.raetsel{display:grid;grid-template-columns:1.02fr .98fr;background:var(--card);border:1px solid var(--line)}
@media(max-width:880px){.hr-card.raetsel{grid-template-columns:1fr}}
.raetsel-media{position:relative;display:grid;place-items:center;padding:26px;
  background:radial-gradient(120% 120% at 20% 10%, color-mix(in srgb,var(--pink) 34%,transparent), transparent 55%),var(--paper-2)}
.raetsel-media img{width:100%;max-width:520px;height:auto;border-radius:12px;box-shadow:0 26px 50px -24px rgba(58,42,46,.5)}
.badge-float{position:absolute;top:20px;left:20px;background:#fff;color:var(--coral-deep);font-weight:800;font-size:.82rem;
  padding:9px 15px;border-radius:999px;box-shadow:var(--shadow-soft);display:flex;align-items:center;gap:7px}
.raetsel-body{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center}
.raetsel-body .hr-tag{background:color-mix(in srgb,var(--pink) 36%,transparent);color:var(--coral-deep);align-self:flex-start}
.raetsel-body h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2.6vw,2.3rem);margin:16px 0 6px;line-height:1.1;color:var(--ink)}
.raetsel-body .lead{color:var(--muted);margin:0 0 18px}
.hr-feat{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px}
.hr-feat li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink)}
/* Der Text MUSS in .tx stehen: als Flex-Container macht li aus jedem Kind ein
   eigenes Flex-Element — ein <b> im Text riss den Punkt sonst in Spalten
   auseinander statt umzubrechen. .tx haelt alles in einem Element zusammen,
   min-width:0 erlaubt den Umbruch statt Ueberlauf. */
.hr-feat .tx{flex:1 1 auto;min-width:0;line-height:1.5}
.hr-feat .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--pink) 34%,transparent);color:var(--coral-deep);margin-top:1px;font-size:.8rem}
.pricerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hr-price{display:flex;flex-direction:column;line-height:1.15}
.hr-price .amt{font-family:var(--font-serif);font-weight:700;font-size:2rem;color:var(--ink)}
.hr-price .amt small{font-size:1rem;color:var(--muted);font-family:var(--font-sans);font-weight:600}
.hr-price .cap{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.hr-card.bingo{display:grid;grid-template-columns:.9fr 1.1fr;color:#fff;border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 130% at 100% 0%, rgba(255,255,255,.18), transparent 44%),
    linear-gradient(135deg,var(--b-magenta),#b5286a 44%,var(--b-cyan))}
@media(max-width:880px){.hr-card.bingo{grid-template-columns:1fr}}
.bingo-media{position:relative;display:grid;place-items:center;padding:34px;overflow:hidden}
.confetti-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bingo-media>*{position:relative;z-index:1}
.bingo-body{padding:clamp(26px,3.4vw,46px);display:flex;flex-direction:column;justify-content:center}
.bingo-body .hr-tag{background:rgba(255,255,255,.18);color:#fff;align-self:flex-start}
.bingo-body h2{font-family:var(--font-serif);font-size:clamp(1.6rem,2.6vw,2.3rem);margin:16px 0 8px;line-height:1.1;color:#fff}
.bingo-body .lead{color:rgba(255,255,255,.92);margin:0 0 18px}
.bingo-body .hr-feat{margin-bottom:20px}
.bingo-body .hr-feat li{color:#fff;font-size:.96rem}
.bingo-body .hr-feat li b{font-weight:800}
.bingo-body .hr-feat .ic{background:rgba(255,255,255,.22);color:#fff}
.bingo-body .hr-price .amt{color:#fff}.bingo-body .hr-price .cap{color:rgba(255,255,255,.8)}.bingo-body .hr-price .amt small{color:rgba(255,255,255,.85)}
.bingo-card{background:#fff;border-radius:16px;padding:14px;width:max-content;margin:0 auto;
  box-shadow:0 28px 50px -20px rgba(0,0,0,.55);transform:rotate(-3deg)}
.bingo-top{display:flex;justify-content:center;gap:8px;margin-bottom:9px}
.bingo-top span{font-family:var(--font-script);font-weight:700;font-size:1.7rem;width:40px;text-align:center;line-height:1}
.bingo-top span:nth-child(1){color:var(--b-magenta)}.bingo-top span:nth-child(2){color:var(--b-orange)}
.bingo-top span:nth-child(3){color:var(--b-teal)}.bingo-top span:nth-child(4){color:var(--b-cyan)}.bingo-top span:nth-child(5){color:var(--b-magenta)}
.bingo-grid{display:grid;grid-template-columns:repeat(5,38px);gap:6px}
.bingo-grid b{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-size:.9rem;font-weight:700;color:var(--b-ink);background:#F3F1F6}
.bingo-grid b.free{background:linear-gradient(135deg,var(--b-magenta),var(--b-orange));color:#fff}
.bingo-grid b.daub{color:#fff;position:relative}
.bingo-grid b.daub::after{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7,transparent 45%),var(--b-teal);mix-blend-mode:multiply}
.bingo-grid b.daub.m::after{background:radial-gradient(circle at 35% 30%,#fff7,transparent 45%),var(--b-magenta)}
.bingo-grid b.daub.c::after{background:radial-gradient(circle at 35% 30%,#fff7,transparent 45%),var(--b-cyan)}
@media(max-width:520px){.bingo-grid{grid-template-columns:repeat(5,30px)}.bingo-grid b{width:30px;height:30px}}

/* reveal */
.hr-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.hr-reveal.in{opacity:1;transform:none}

/* ---------- Footer ---------- */
.hr-foot{margin-top:clamp(56px,8vw,110px);background:var(--ink);color:#F3E7E2;position:relative}
.hr-foot::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.foot-cta{text-align:center;padding:clamp(42px,6vw,76px) 0 8px}
.foot-cta .hr-script{color:var(--pink);font-size:clamp(2rem,5vw,3.1rem);display:block}
.foot-cta h2{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.3rem);margin:.08em 0 .7em;color:#fff}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding:clamp(30px,4vw,50px) 0;
  border-top:1px solid rgba(255,255,255,.1);margin-top:34px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--pink);margin:0 0 16px}
.foot-grid p,.foot-grid a{color:rgba(243,231,226,.72);font-size:.95rem}
.foot-grid a{display:block;padding:5px 0;text-decoration:none;transition:color .2s,transform .2s}
.foot-grid a:hover{color:#fff;transform:translateX(3px)}
.foot-brand b{font-size:1.3rem;color:#fff;letter-spacing:-.01em}
.foot-brand b span{color:var(--pink)}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s}
.socials a:hover{background:var(--coral);transform:translateY(-3px)}
.hr-copyright{text-align:center;padding:22px 0;border-top:1px solid rgba(255,255,255,.1);color:rgba(243,231,226,.6);font-size:.85rem}
.hr-copyright .heart{color:var(--pink)}

/* ---------- Widerrufsbutton (§ 356a BGB, Pflicht seit 19.06.2026) ----------
   Muss ständig erreichbar, gut lesbar und farblich hervorgehoben sein — also
   kein Textlink. Zwei Klassen tief, weil .foot-grid a{display:block;padding:5px 0}
   sonst gewinnt (genau der Bug, der die VerifyTrust-Karte zerlegt hat). */
.foot-grid .wf-btn{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 16px;
  border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#fff;font-size:.86rem;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.foot-grid .wf-btn:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:none}
.foot-grid .wf-btn svg{flex:0 0 auto}

/* ---------- Widerrufs-Formular + Bestätigungsseite ---------- */
.wf{max-width:640px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,20px) 70px}
.wf-head{margin-bottom:26px}
.wf-head h1{font-family:var(--font-sans);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 12px;color:var(--ink)}
.wf-lead{color:var(--muted);font-size:1.05rem;line-height:1.65;margin:0}
.wf-done-ico{display:block;width:52px;height:52px;border-radius:50%;margin-bottom:16px;
  background:#4caf7d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/26px no-repeat}

.wf-alert{border-radius:11px;padding:12px 15px;margin-bottom:20px;font-size:.92rem;line-height:1.55}
.wf-alert-bad{background:#fdeeec;color:#97372f;border:1px solid #f6d5d0}

.wf-form{display:grid;gap:22px}
.wf-group{border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:0;background:var(--card)}
.wf-group legend{float:none;width:auto;padding:0 8px;margin:0 0 4px -8px;font-size:.95rem;font-weight:800;color:var(--ink)}
.wf-hint{font-size:.83rem;color:var(--muted);margin:0 0 14px}
.wf-field{margin-bottom:14px}
.wf-field:last-child{margin-bottom:0}
.wf-field label{display:block;font-size:.86rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.wf-req{font-weight:400;color:var(--coral);font-size:.76rem}
.wf-field input[type=text],.wf-field input[type=email],.wf-field input[type=date],.wf-field textarea{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 13px;font-size:16px;color:var(--ink);
  background:var(--paper);font-family:inherit;transition:border-color .18s,box-shadow .18s}
.wf-field input:focus,.wf-field textarea:focus{outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pink) 30%,transparent);background:#fff}
.wf-field small{display:block;margin-top:5px;font-size:.76rem;color:var(--muted);line-height:1.5}
.wf-field textarea{resize:vertical}

.wf-declare{padding:14px 16px;border-radius:12px;background:var(--pink-soft);border:1px solid var(--pink)}
.wf-declare p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink)}

.wf-check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.84rem;
  color:var(--muted);line-height:1.55}
.wf-check input{flex:0 0 auto;width:19px;height:19px;margin-top:1px;accent-color:var(--coral)}

.wf-submit{display:flex;width:100%;align-items:center;justify-content:center;border:none;cursor:pointer;
  font-family:var(--font-sans);font-weight:800;font-size:1rem;color:#fff;border-radius:999px;padding:15px 28px;
  background:linear-gradient(100deg,var(--pink),var(--coral));box-shadow:0 14px 30px -12px var(--coral);
  transition:transform .2s,box-shadow .2s}
.wf-submit:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px var(--coral)}

.wf-foot{font-size:.83rem;color:var(--muted);line-height:1.6;margin:0}

.wf-receipt{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:0 0 22px;padding:18px 20px;
  border-radius:14px;background:var(--paper-2);border:1px solid var(--line)}
.wf-receipt dt{font-size:.82rem;color:var(--muted)}
.wf-receipt dd{margin:0;font-size:.95rem;font-weight:700;color:var(--ink)}
.wf-receipt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;color:var(--coral-deep)}
.wf-note{font-size:.9rem;color:var(--muted);line-height:1.65;margin:0 0 14px}

/* ---------- VerifyTrust ----------
   Das Widget bringt eigenes CSS mit (.vt-widget-container/.vt-widget-card,
   weiße Karte, blaues Icon). Wir geben ihm feste Plätze und ziehen es optisch
   an die Marke heran.

   ACHTUNG, hier lag ein Bug: Die Widget-Karte IST ein <a>, und der Footer hat
   .foot-grid a{display:block;padding:5px 0}. Spezifität (0,1,1) schlägt die
   Anbieter-Regel .vt-widget-card (0,1,0) — die Karte wurde also von inline-flex
   auf block gezwungen und Icon/Text/Score-Ring stapelten untereinander. Alle
   Layout-Eigenschaften der Karte müssen deshalb hier explizit gesetzt werden
   und mindestens zwei Klassen tief sein, sonst gewinnt der Footer wieder. */
.vt-slot{margin-top:22px}
.vt-slot h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:var(--pink);margin:0 0 12px}
.vt-slot .vt-widget-container{text-align:left;width:100%}

/* Layout gegen .foot-grid a zurückerobern (display + padding!). */
.vt-slot .vt-widget-card,
.ed-trust .vt-widget-card{display:inline-flex;align-items:center;padding:10px 14px;max-width:100%;width:100%;
  box-shadow:none;border-radius:14px;text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.vt-slot .vt-widget-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.vt-slot .vt-widget-card:hover{background:rgba(255,255,255,.1);border-color:var(--pink);transform:translateY(-2px);box-shadow:none}
.vt-slot .vt-widget-card .vt-name{color:#fff}
.vt-slot .vt-widget-card .vt-label{color:var(--pink)}
.vt-slot .vt-widget-card .vt-icon-box{background:rgba(255,255,255,.1);color:var(--pink)}
/* Score-Ring darf nicht zusammengedrückt werden, wenn die Spalte schmal wird. */
.vt-slot .vt-widget-card .vt-score-ring,
.ed-trust .vt-widget-card .vt-score-ring{flex:0 0 42px}
.vt-slot .vt-widget-card .vt-content,
.ed-trust .vt-widget-card .vt-content{min-width:0}

/* Im Konfigurator-Panel: direkt unter dem Kasse-Button, helle Umgebung. */
.ed-trust{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.ed-trust .vt-widget-card{border:1px solid var(--line);border-radius:12px;background:#fff}
.ed-trust .vt-widget-card:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:none}

/* Fallback, solange/falls verifytrust.ai nicht antwortet — gleiche Optik.
   Ebenfalls ein <a>, also dieselbe Vorsichtsmaßnahme wie oben. */
.vt-slot .vt-fallback,
.ed-trust .vt-fallback{display:inline-flex;align-items:center;gap:12px;width:100%;padding:10px 14px;
  border-radius:12px;border:1px solid var(--line);background:#fff;text-decoration:none;
  transition:border-color .2s,transform .2s}
.vt-slot .vt-fallback:hover,
.ed-trust .vt-fallback:hover{transform:translateY(-2px);border-color:var(--coral)}
.vt-fallback-ico{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:var(--pink-soft);color:var(--coral)}
.vt-fallback-txt{line-height:1.25;text-align:left}
.vt-fallback-txt small{display:block;font-size:9px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.vt-fallback-txt b{font-size:14px;color:var(--ink)}
.vt-slot .vt-fallback{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.vt-slot .vt-fallback-txt b{color:#fff}
.vt-slot .vt-fallback-ico{background:rgba(255,255,255,.1);color:var(--pink)}

/* keyframes */
@keyframes hr-drop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes hr-sheen{to{transform:translateX(130%)}}
@keyframes hr-floatUp{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.85}85%{opacity:.45}100%{transform:translateY(-92vh) rotate(220deg);opacity:0}}
@keyframes hr-rise{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(-260px) rotate(360deg);opacity:0}}
@keyframes hr-bubbleIn{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
.hr-stagger>*{opacity:0;transform:translateY(18px);animation:hr-up .8s cubic-bezier(.2,.8,.2,1) forwards}
.hr-stagger>*:nth-child(1){animation-delay:.05s}.hr-stagger>*:nth-child(2){animation-delay:.16s}
.hr-stagger>*:nth-child(3){animation-delay:.27s}.hr-stagger>*:nth-child(4){animation-delay:.38s}
.hr-stagger>*:nth-child(5){animation-delay:.49s}.hr-stagger>*:nth-child(6){animation-delay:.60s}
@keyframes hr-up{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .site-head,.hr-stagger>*{animation:none}
  .hr-floaty,.confetti-layer{display:none}
  .hr-reveal{opacity:1;transform:none}.hr-stagger>*{opacity:1;transform:none}
}