/* =========================================================
   SACREAH ESSENZEN — Struktur- & Komponenten-Styles
   Baut auf tokens.css auf (Farben/Typo). Diese Datei enthält
   Layout, Komponenten und Bild-Referenzen (echte Asset-Dateien
   statt Base64-Inline, siehe docs/README.md).
   ========================================================= */

:root {
  --white: #fff;
  --sun-icon: url("../assets/images/sun-face.png");
  --hero-bottle: url("../assets/images/hero-bottle-top.jpg");
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{font-family:var(--font-body);background:var(--white);color:var(--ink);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ---- Sonnenmotiv-Trenner (Signature-Element) ---- */
.sun-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 20px;padding:18px 0;}
.sun-divider .dline{flex:1;height:1px;background:var(--hairline);opacity:.45;}
.sun-divider .dmark{width:17px;height:17px;flex-shrink:0;background-image:var(--sun-icon);background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.85;}

/* ---- Platzhalter-Bild-Komponente ---- */
.ph{
  background:radial-gradient(circle at 30% 25%, var(--orange-bright) 0%, var(--orange) 55%, var(--p700) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:16px;
}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 80%, rgba(255,255,255,.14) 0%, transparent 45%);}
.ph svg{width:26px;height:26px;opacity:.85;position:relative;z-index:1;}

/* ---- Layout Grundgerüst ---- */
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--white);box-shadow:0 0 50px rgba(109,46,23,.08);position:relative;padding-top:61px;overflow-x:hidden;}
header.topbar{position:fixed;top:0;left:max(0px, calc(50% - 240px));right:max(0px, calc(50% - 240px));z-index:30;background:var(--white);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 16px;}
header.topbar .brand{grid-column:1;justify-self:start;}
header.topbar .wordmark{grid-column:2;justify-self:center;}
header.topbar .icons{grid-column:3;justify-self:end;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;letter-spacing:.03em;color:var(--ink);font-size:17px;cursor:pointer;}
.brand .logo-img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;}
.icons{display:flex;gap:8px;position:relative;}
.icon-btn{width:34px;height:34px;border-radius:50%;background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;border:none;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--orange-deep);cursor:pointer;}

/* ---- Schriftlogo (Wordmark): SACREAH / Spirale / ESSENZEN ---- */
.wordmark{cursor:pointer;text-align:center;line-height:1;}
.wordmark .wm-main{display:block;font-family:var(--font-display);font-weight:600;letter-spacing:.32em;text-indent:.32em;color:#6D2E17;font-size:14px;text-transform:uppercase;}
.wordmark .wm-div{display:flex;align-items:center;justify-content:center;gap:5px;margin:3px 0 0;}
.wordmark .wm-line{width:36px;height:1px;background:#BD7000;display:inline-block;}
.wordmark .wm-spiral{width:9px;height:9px;color:#BD7000;flex-shrink:0;}
.wordmark .wm-sub{display:block;margin-top:2px;font-family:var(--font-display);font-weight:500;letter-spacing:.28em;text-indent:.28em;color:#BD7000;font-size:8px;text-transform:uppercase;}

/* Dropdown-Menü */
.menu-panel{position:absolute;top:44px;right:0;background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:0 18px 44px rgba(109,46,23,.18);min-width:224px;padding:10px;z-index:40;
    opacity:0;visibility:hidden;transform:translateY(-10px) scale(.95);transform-origin:top right;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;pointer-events:none;}
.menu-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto;}
.menu-panel a{display:flex;align-items:center;padding:12px 14px;border-radius:13px;font-size:14px;font-weight:600;color:var(--ink);transition:background .15s ease,color .15s ease,transform .15s ease;}
.menu-panel a:hover{background:var(--pale);color:var(--orange-deep);transform:translateX(2px);}
.menu-panel .menu-sep{height:1px;background:var(--line);margin:6px 8px;}

main{padding-bottom:2px;}

/* ---- Hero ---- */
.hero{position:relative;background:linear-gradient(180deg,var(--mist) 0%,#fff 100%);padding:24px 20px 26px;overflow:hidden;text-align:center;}
.hero-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle, rgba(232,180,76,.22), transparent 70%);z-index:0;}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;padding:6px 13px;border-radius:20px;position:relative;z-index:1;}
h1.symptom{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:26px;line-height:1.28;margin:14px auto 10px;color:var(--ink);position:relative;z-index:1;max-width:22ch;}
h1.symptom .accent{font-weight:500;color:var(--orange);}
p.subhead{font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:0 auto 14px;position:relative;z-index:1;max-width:32ch;}
.tagline{font-family:var(--font-body);color:var(--orange-deep);font-weight:500;font-size:15.5px;margin:22px 0 14px;position:relative;z-index:1;}
.hero-subline{font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ink-soft);margin-top:10px;position:relative;z-index:1;}

.hero-product{position:relative;z-index:1;display:flex;justify-content:center;margin:6px 0 4px;}
.hero-product .ph{width:140px;height:185px;flex-shrink:0;}
.hero-product .ph svg{width:30px;height:30px;}

.trust-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px;margin:0 auto 4px;max-width:320px;justify-items:start;position:relative;z-index:1;}
.trust-row .feature-item{display:flex;align-items:flex-start;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);text-align:left;}
.trust-row .feature-item svg{width:14px;height:14px;color:var(--orange-deep);flex-shrink:0;margin-top:2px;}

.guarantee-badge{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;background:var(--sage);color:#fff;
    font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:24px;margin:6px 0 4px;}
.guarantee-badge::before{content:"✓";font-weight:900;}

/* ---- Vollbild-Hero mit Bild (Produkt "wie hingestellt", nicht als Hintergrund) ---- */
.hero-media{position:relative;width:100%;min-height:320px;overflow:hidden;background:#fff;padding:16px 20px 8px;}
.hero-media-inner > .ph{width:100%;height:280px;border-radius:0;position:relative;z-index:1;}
.hero-media-inner > .ph.product-photo{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:20px;
  background-color:#fff;
  background-image:var(--hero-bottle);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 12px 28px rgba(109,46,23,.16);
}
.hero-media-inner > .ph.product-photo::before{display:none;}
.hero-media-inner > .ph.product-photo svg{display:none;}
.hero-media-topbar{position:fixed;top:0;left:max(0px, calc(50% - 240px));right:max(0px, calc(50% - 240px));z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 16px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);}
.hero-media-topbar .brand{grid-column:1;justify-self:start;cursor:pointer;}
.hero-media-topbar .wordmark{grid-column:2;justify-self:center;}
.hero-media-topbar .icons{grid-column:3;justify-self:end;}
.hero-media-topbar .logo-img.on-image{background:transparent;}
.icon-btn.on-image{background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;border:none;}
.hero-media-text{position:relative;z-index:2;padding:14px 0 4px;text-align:left;}
.hero-media-text .product-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.02em;color:var(--ink);margin-top:12px;}
.hero-media-text .product-standard-text{font-family:var(--font-body);font-weight:400;font-size:12.5px;line-height:1.5;color:var(--ink);margin-top:6px;}

.offer-box{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-top:16px;max-width:440px;text-align:center;}
.offer-box .hero-cta{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}

.offer-heading{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--ink);margin:0 0 16px;text-align:center;}
.price-footnote{font-size:11.5px;color:var(--ink-soft);margin-top:8px;}
.price-shipping-note{display:block;font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--ink-soft);margin:2px 0 0;}
.rating-row{display:inline-flex;flex-direction:row;align-items:center;gap:7px;margin-bottom:0;cursor:pointer;}
.rating-row .stars{color:#FFC107;font-size:15px;letter-spacing:1px;}
.rating-row .rating-text{font-size:12px;font-weight:600;color:var(--ink-soft);}

.guarantee-row{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;border-radius:0;padding:14px 20px;box-sizing:border-box;}
.guarantee-row .guarantee-icon{width:19px;height:19px;padding:8px;box-sizing:content-box;background:var(--a50);border-radius:50%;color:var(--ink);flex-shrink:0;}
.guarantee-row span{font-size:12.5px;font-weight:600;color:var(--ink-soft);}

.trust-cards{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.trust-card{display:flex;align-items:flex-start;gap:8px;text-align:left;}
.trust-card svg{width:16px;height:16px;color:var(--orange-deep);flex-shrink:0;margin-top:2px;}
.trust-card-text strong{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink);}
.trust-card-text span{font-family:var(--font-body);font-size:12.3px;line-height:1.4;font-weight:400;color:var(--ink-soft);}

.hero-cta{position:relative;z-index:1;width:100%;margin-top:16px;text-align:center;}
.hero-cta .price{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:12px;}
.hero-cta .price small{font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--ink-soft);margin-left:4px;}
.hero-order-btn{display:inline-block;background:var(--orange);color:#fff;font-weight:700;font-size:14px;padding:10px 52px;border-radius:var(--radius-pill);letter-spacing:.01em;text-decoration:none;}

.sticky-cta{position:sticky;bottom:0;z-index:15;background:rgba(255,246,229,.96);border-top:1px solid var(--line);padding:12px 16px;backdrop-filter:blur(6px);}
.promo-fixed-cta{position:fixed;bottom:0;left:0;right:0;z-index:20;background:rgba(255,246,229,.96);border-top:1px solid var(--line);padding:12px 16px;backdrop-filter:blur(6px);}
.cta{display:block;width:100%;text-align:center;background:var(--orange);
    color:#fff;font-weight:500;font-size:15px;padding:11px 10px;border-radius:14px;border:none;letter-spacing:.02em;}
.cta-hero-style{display:inline-flex;align-items:center;justify-content:center;width:auto;background:var(--orange);color:#fff;border:none;border-radius:8.8px;padding:7.7px 17.6px;font-family:var(--font-body);font-weight:500;font-size:14.85px;letter-spacing:.01em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .18s ease,box-shadow .18s ease;}
.cta-hero-style:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25);}
.cta.secondary{background:transparent;color:var(--ink);border:1.5px solid var(--hairline);}
.cta-devnote{font-size:10.5px;color:var(--ink-soft);text-align:center;margin-top:7px;font-family:monospace;opacity:.7;}
#moreReviewsBtn{display:block;width:fit-content;margin:16px auto 0;padding:8px 22px;border-radius:24px;font-size:13px;}

.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--mist);border-top:1.5px solid var(--hairline);box-shadow:0 -4px 18px rgba(0,0,0,.08);padding:16px;}
.cookie-banner-inner{max-width:520px;margin:0 auto;}
.cookie-banner-inner p{font-size:12.5px;line-height:1.6;color:var(--ink);opacity:.86;margin:0 0 12px;}
.cookie-banner-inner p a{color:var(--ink);text-decoration:underline;}
.cookie-banner-actions{display:flex;gap:10px;}
.cookie-btn{flex:1;text-align:center;font-family:var(--font-body);font-weight:700;font-size:13.5px;padding:12px 10px;border-radius:12px;cursor:pointer;border:none;letter-spacing:.01em;}
.cookie-btn-primary{background:var(--orange);color:#fff;}
.cookie-btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--hairline);}

.wave{display:block;width:100%;height:26px;margin-top:-1px;}

/* ---- Sections ---- */
section{padding:26px 20px;}
section.alt{background:var(--mist);}

#google-reviews-widget{max-width:480px;margin:0 auto;}
#google-reviews-widget .ti-rating-text,#google-reviews-widget .ti-rating.ti-rating-large{font-size:15px !important;}
section.warum-anders{background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;}
section.erfahrungsberichte-section,section.vorteile-section,section.final-cta{background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;}
section.final-cta{background:#fff;padding-top:17px;padding-bottom:17px;}
.final-cta-divider{width:100%;height:1px;background:var(--hairline);opacity:.5;margin:18px auto;}
section.section-tight-bottom{padding-bottom:4px;}
section.section-tight-bottom p.body-text{margin-bottom:0;}
section.section-tight-bottom + .sun-divider{padding-top:6px;}
.team-photo{width:100%;height:250px;overflow:hidden;}
.team-photo img{width:100%;height:175%;object-fit:cover;object-position:top;display:block;}
.team-photo-2{width:100%;height:230px;overflow:hidden;}
.team-photo-2 img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.step-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
h2.h2{font-family:var(--font-display);font-weight:600;font-size:17px;margin:0 0 12px;color:var(--ink);letter-spacing:.03em;}
h3.h3{font-family:var(--font-display);font-weight:700;font-size:16px;margin:16px 0 6px;color:var(--ink);}
p.body-text{font-size:14px;line-height:1.68;margin:0 0 12px;color:var(--ink);opacity:.86;}

.founder-box{display:flex;gap:13px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:12px;}
.founder-box .ph{width:50px;height:50px;border-radius:50%;flex-shrink:0;}
.founder-box .ph svg{width:18px;height:18px;}
.founder-box p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink);opacity:.86;}

.list-check{list-style:none;padding:0;margin:0;font-size:13.8px;line-height:1.75;}
.list-check li{padding-left:22px;position:relative;margin-bottom:8px;}
.list-check li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--orange-deep);opacity:.8;}

.essence-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;}
.essence-card h4{margin:0 0 7px;font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--orange-deep);}
.essence-card ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink);opacity:.82;line-height:1.6;}

.photo-row{display:flex;gap:10px;margin:16px 0;}
.photo-row .ph{flex:1;height:118px;}
.photo-row .ph svg{width:22px;height:22px;}

.doubt-item, .faq-item{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px 15px;margin-bottom:9px;}
.doubt-item summary, .faq-item summary{font-weight:700;font-size:13.8px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink);}
.doubt-item summary::after, .faq-item summary::after{content:"＋";color:var(--gold);font-size:15px;flex-shrink:0;}
.doubt-item[open] summary::after, .faq-item[open] summary::after{content:"－";}
.doubt-item p, .faq-item p{font-size:13.3px;color:var(--ink);opacity:.86;margin:9px 0 0;line-height:1.65;}

.other-link{display:flex;align-items:center;justify-content:space-between;background:var(--white);border:1px solid var(--line);
    border-radius:16px;padding:14px 16px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink);margin-top:16px;cursor:pointer;}
.other-link span.arrow{color:var(--orange-deep);font-size:17px;}
.cta-hero-style-link{display:inline-flex;width:auto;justify-content:center;gap:8px;border:none;border-radius:8px;padding:7px 16px;font-family:var(--font-body);font-size:13.5px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease;}
.cta-hero-style-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.12);}
.cta-hero-style-link span.arrow{font-size:13.5px;}

.final-cta{text-align:center;}
.final-cta .price{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--ink);margin-bottom:4px;}
.final-cta .price small{display:block;font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ink-soft);margin:2px 0 0;}
.final-cta .shipping-note{font-size:12px;color:var(--ink-soft);margin-top:14px;}

/* ---- HUB / Übersicht ---- */
.hub-hero{padding:26px 20px 6px;background:linear-gradient(180deg,var(--mist),#fff);position:relative;overflow:hidden;text-align:center;}
.hub-hero h1{font-family:var(--font-display);font-weight:700;font-size:24px;margin:8px auto 8px;color:var(--ink);position:relative;z-index:1;}
.hub-hero h1 .promo-sub{display:block;font-family:var(--font-body);font-weight:500;font-size:16px;color:var(--ink-soft);margin-top:6px;margin-bottom:8px;white-space:nowrap;}
.hub-hero p{font-size:13.8px;color:var(--ink-soft);margin:0 auto;position:relative;z-index:1;max-width:38ch;line-height:1.6;}

/* ---- Aktion / Rabatt-Kampagne ---- */
.promo-hero-img{display:block;width:100%;height:180px;object-fit:cover;}
.promo-banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
  background:linear-gradient(135deg,var(--gold),var(--orange-deep));color:#fff;padding:10px 16px;font-size:12.5px;
  font-family:var(--font-body);font-weight:500;cursor:pointer;}
.promo-banner-text{line-height:1.5;}
.promo-banner .promo-code{font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.22);padding:2px 8px;border-radius:8px;margin:0 2px;}
.promo-copy-btn{flex-shrink:0;background:#fff;color:var(--orange-deep);border:none;border-radius:var(--radius-pill);padding:6px 14px;font-family:var(--font-body);font-weight:600;font-size:11.5px;cursor:pointer;transition:transform .15s,background .2s,color .2s;}
.promo-copy-btn:active{transform:scale(.96);}
.promo-copy-btn.copied{background:var(--sage);color:#fff;}
.promo-box{border:1.5px solid var(--hairline);border-radius:20px;padding:16px 18px 18px;margin:0 auto;position:relative;z-index:1;background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;}
.promo-box p{margin-left:0;margin-right:0;}
.promo-hero .promo-code-box{display:inline-flex;align-items:center;gap:10px;background:var(--pale);border:1.5px dashed var(--hairline);border-radius:var(--radius-pill);padding:8px 8px 8px 16px;margin:14px 0 8px;position:relative;z-index:1;}
.promo-code-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);}
.promo-hero .promo-code-box .promo-code{font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:.04em;text-transform:uppercase;}
.promo-howto{font-size:12px;color:var(--ink-soft);position:relative;z-index:1;}
.promo-recap{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.promo-trust-row{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 20px 20px;text-align:center;}

/* ---- Kurz-Check (Spray-Finder) ---- */
.kurzcheck-box{margin:18px 20px 6px;background:linear-gradient(rgba(246,240,230,.72),rgba(246,240,230,.72)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;border:1px solid var(--hairline);border-radius:20px;padding:22px 20px 24px;text-align:center;box-shadow:0 10px 28px rgba(109,46,23,.10);overflow:hidden;}
.kc-step{animation:kcFade .35s ease;}
@keyframes kcFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.kc-progress{display:flex;justify-content:center;gap:6px;margin-bottom:14px;}
.kc-progress .dot{width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s;}
.kc-progress .dot.active{background:var(--orange-deep);transform:scale(1.3);}
.kc-icon{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--orange-deep));color:#fff;font-family:var(--font-body);font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 6px 16px rgba(189,112,0,.3);}
.kc-icon.kc-icon-done{background:linear-gradient(135deg,#8fae5a,#5f8a3c);box-shadow:0 6px 16px rgba(95,138,60,.3);}
.kc-title{font-family:var(--font-display);font-weight:700;font-size:17px;margin:0 0 7px;color:var(--ink);}
.kc-text{font-size:13.5px;color:var(--ink);opacity:.86;line-height:1.6;margin:0 0 16px;}
.kc-btn{display:inline-block;padding:12px 26px;}
.cta.secondary.kc-btn{background:#fff;color:var(--ink);border:1.5px solid var(--hairline);box-shadow:0 4px 14px rgba(109,46,23,.12);}
.kc-question{font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--ink);margin-bottom:16px;line-height:1.4;}
.kc-options{display:flex;flex-direction:column;gap:10px;}
.kc-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1.5px solid var(--orange);color:var(--ink);font-weight:700;font-size:13.8px;padding:14px 16px;border-radius:14px;box-shadow:0 3px 10px rgba(189,112,0,.08);transition:transform .15s ease,box-shadow .15s ease,background .15s ease;text-align:left;}
.kc-option .kc-arrow{color:var(--orange-deep);font-weight:700;flex-shrink:0;transition:transform .15s ease;}
.kc-option:hover{background:var(--pale);box-shadow:0 5px 14px rgba(189,112,0,.16);}
.kc-option:hover .kc-arrow{transform:translateX(3px);}
.kc-option:active{transform:scale(.98);}
.kc-result .cta{margin-top:4px;}

.category-title{font-family:var(--font-body);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);padding:22px 20px 10px;}
details.card{border:1px solid var(--line);border-radius:16px;margin:0 20px 10px;background:#fff;overflow:hidden;}
details.card summary{list-style:none;display:flex;align-items:center;gap:13px;padding:11px 13px;cursor:pointer;}
details.card summary .card-thumb{width:46px;height:58px;flex-shrink:0;object-fit:contain;background:var(--pale);border-radius:8px;padding:4px;}
details.card summary .meta{flex:1;}
details.card summary .meta .name{font-weight:700;font-size:13.8px;color:var(--ink);}
details.card summary .meta .cat{font-size:11px;color:var(--ink-soft);margin-top:1px;}
details.card summary .chev{color:var(--orange-deep);font-size:19px;transition:transform .2s;flex-shrink:0;}
details.card[open] summary .chev{transform:rotate(45deg);}
details.card .card-body{padding:0 16px 16px 16px;font-size:13.3px;color:var(--ink);opacity:.86;line-height:1.6;}
details.card .card-body .go-btn{display:inline-block;background:var(--orange);color:#fff;font-weight:700;font-size:12.5px;padding:9px 16px;border-radius:20px;border:none;margin-top:4px;}
details.card .card-body .soon{font-size:12px;color:var(--ink-soft);}

/* ---- Kontakt ---- */
.contact-card{display:flex;align-items:center;gap:14px;background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;}
section.kontakt-section{background:linear-gradient(rgba(246,240,230,.4),rgba(246,240,230,.4)),url("../assets/images/kurzcheck-bg.jpg") center/cover no-repeat;}
.contact-card .c-portrait{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.contact-card .c-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 15%;transform:scale(2.3);transform-origin:center 22%;}
.contact-card .c-name{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--ink);}
.contact-card .c-role{font-size:12px;font-weight:600;color:var(--orange-deep);margin:2px 0 4px;}
.contact-card .c-phone{font-size:12.5px;color:var(--ink);opacity:.86;}
.phone-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;}
.phone-link:hover{opacity:.7;}
.phone-icon{width:13px;height:13px;flex-shrink:0;}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.form-group .opt{color:var(--ink-soft);font-weight:400;}
.form-group input, .form-group textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-family:var(--font-body);font-size:13.5px;color:var(--ink);background:var(--mist);}
.form-group textarea{min-height:90px;resize:vertical;}
.form-check{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--ink);opacity:.86;margin-bottom:16px;}
.form-check input{margin-top:2px;}
.captcha-box{background:var(--pale);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--orange-deep);font-weight:600;margin-bottom:14px;}

/* ---- Erfahrungsberichte (Zitate in Caveat, laut Styleguide) ---- */
.review-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.review-card:hover{border-color:var(--p400);box-shadow:0 2px 10px rgba(0,0,0,.06);}
.review-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.review-card .stars{color:var(--p400);font-size:14px;letter-spacing:1px;}
.review-card p{font-family:var(--font-quote);font-size:18px;line-height:1.4;color:var(--ink);margin:0;}
.review-badge{font-size:10px;font-weight:700;letter-spacing:.2px;color:var(--orange-deep);background:rgba(232,180,76,.16);padding:3px 9px;border-radius:20px;white-space:nowrap;}
.review-source{margin-top:10px;font-size:11.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:3px;}

/* ---- Beratung / Calendly ---- */
.booking-placeholder{border:1.5px dashed var(--hairline);background:var(--a50);border-radius:16px;padding:22px 18px;text-align:center;}
.bp-icon{font-size:26px;margin-bottom:8px;}
.booking-placeholder .cta-devnote{margin-top:12px;opacity:.85;}
.calendly-embed{min-width:100%;height:650px;border-radius:16px;overflow:hidden;border:1px solid var(--line);}

/* ---- Startseite ---- */
.start-hero-wrap{position:relative;}
.start-hero-stage{position:relative;margin-bottom:14px;}
.start-hero{position:relative;width:100%;min-height:560px;overflow:hidden;}
.start-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;}
.start-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,11,6,.28) 0%, rgba(24,13,7,.55) 40%, rgba(16,9,5,.96) 100%);}
.start-hero-bottle-wrap{position:absolute;right:-8%;bottom:-50px;height:180px;z-index:5;}
.start-hero-bottle{position:relative;display:block;height:100%;width:auto;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));}
.start-hero-bottle-shadow{position:absolute;left:49.7%;bottom:10%;transform:translateX(-50%);width:58px;height:14px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(15,8,4,.32) 0%, rgba(15,8,4,.18) 55%, rgba(15,8,4,0) 80%);filter:blur(1.5px);}
.start-hero-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 24px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.start-hero-h1{font-family:var(--font-display);font-weight:600;font-size:25px;line-height:1.32;letter-spacing:.04em;margin:0 0 16px;max-width:14.5ch;color:#fff;}
.start-hero-promo{align-self:stretch;overflow:hidden;margin:9px -24px 35px;}
.start-hero-promo-track{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform;animation:heroPromoScroll 22s linear infinite;}
.start-hero-promo-text{font-family:var(--font-body);font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.02em;color:var(--orange-bright);white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.4);-webkit-text-size-adjust:100%;text-size-adjust:100%;}
.start-hero-promo-dot{font-size:14px;color:var(--orange-bright);opacity:.6;margin:0 18px;white-space:nowrap;}
@keyframes heroPromoScroll{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
.start-hero-cta{display:inline-flex;align-items:center;background:#fff;color:var(--ink);border:none;border-radius:8px;padding:7px 16px;font-family:var(--font-body);font-weight:500;font-size:13.5px;letter-spacing:.01em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:transform .18s ease,box-shadow .18s ease;}
.start-hero-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25);}
.start-hero-wrap .start-hero-rating{display:flex;justify-content:center;width:100%;gap:5px;}
.start-hero-wrap .start-hero-rating .stars{font-size:13px;}
.start-hero-wrap .start-hero-rating .rating-text{font-size:11px;}

.bestseller-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;}
.bestseller-trust span{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:6px;}

.bestseller-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px;}
.bestseller-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;background:color-mix(in srgb, var(--mist) 30%, #fff 70%);border:1px solid var(--line);border-radius:8px;padding:0;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.bestseller-card:hover{border-color:var(--p400);box-shadow:0 4px 14px rgba(109,46,23,.1);}
.bestseller-thumb{width:100%;aspect-ratio:1/1;background:var(--mist);}
.bestseller-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.bestseller-body{width:100%;padding:8px 10px 10px;}
.bestseller-name{font-family:var(--font-body);font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.25;min-height:calc(1.25em * 3);display:flex;align-items:center;justify-content:center;}
.bestseller-price{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--orange-deep);margin-top:3px;}

@media (min-width: 900px){
  .start-hero-stage{margin-bottom:44px;}
  .start-hero{min-height:640px;}
  .start-hero-bg{object-position:center 24%;}
  .start-hero-bottle-wrap{height:180px;bottom:-40px;right:max(24px, calc(50% - 480px));}
  .start-hero-content{padding:0 24px 56px;max-width:640px;margin:0 auto;}
  .start-hero-h1{font-size:34px;max-width:14.5ch;}
  .start-hero-promo-text{font-size:19px;}
  .start-hero-promo-dot{font-size:16px;margin:0 22px;}
  .start-hero-cta{padding:8px 20px;font-size:14.5px;}

  .bestseller-grid{grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:20px;}
}

/* Startseite: zusätzliche, seitenspezifische Feinheiten */
.start-page h2.h2-final-cta{font-size:15px;}
.start-page section.final-cta{padding-bottom:10px;}
.start-page .trust-row .feature-item{font-weight:400;}
.start-page .bestseller-trust span{font-weight:400;}
.start-page .bestseller-name{font-weight:500;}
.start-page .bestseller-price{font-family:var(--font-body);font-weight:500;}
.start-page section.alt,
.start-page .start-bestseller{text-align:center;}
.start-page .start-bestseller .bestseller-trust{justify-content:center;}
.start-page .start-bestseller{padding-bottom:32px;}
.start-page .start-bestseller + .warum-anders{padding-top:26px;}
.start-page .list-check{display:inline-block;text-align:left;margin:0 auto;}

footer.site-footer{background:var(--mist);color:var(--ink);padding:26px 20px;font-size:12px;line-height:1.75;}
footer.site-footer .logo-img{width:36px;height:36px;border-radius:50%;margin-bottom:12px;display:block;}
footer.site-footer a{text-decoration:underline;text-decoration-color:rgba(109,46,23,.4);}
footer.site-footer .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 16px;}

/* =========================================================
   DESKTOP / TABLET (≥ 900px)
   Echtes mehrspaltiges Layout mit mehr Weißraum.
   Mobile-Regeln oben bleiben unverändert (Basis-Layout);
   hier nur Overrides für breitere Screens.
   ========================================================= */
@media (min-width: 900px){
  /* .app trägt keine feste Breite mehr — Section-Hintergründe
     (Farben/Bilder) laufen bis zum Bildschirmrand, wie auf einer
     "echten" Webseite. Die Zentrierung des Inhalts passiert pro
     Section über Padding (calc/max), nicht über einen Container. */
  .app{max-width:none;box-shadow:none;padding-top:65px;}
  header.topbar{left:0;right:0;padding:14px max(32px, calc(50% - 560px));}
  .hero-media-topbar{left:0;right:0;padding:14px max(32px, calc(50% - 560px));}

  main.hub-main{max-width:1080px;margin:0 auto;padding:0 32px 36px;}

  .hub-hero{padding:40px max(32px, calc(50% - 350px)) 10px;}
  .sun-divider{margin:0 max(20px, calc(50% - 350px));}

  /* ---- Hero: Bild links, Text rechts, Hintergrund voll breit ---- */
  .hero-media{padding:24px max(32px, calc(50% - 560px)) 24px;}
  .hero-media-inner{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:56px;align-items:center;}
  .hero-media-inner > .ph.product-photo{width:100%;height:auto;}
  .hero-media-text{padding:0;}

  .trust-row{margin:0 0 4px;max-width:520px;}
  .hero-cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px;max-width:none;}
  .hero-cta .price{margin-bottom:0;}
  .hero-cta .price-footnote{flex-basis:100%;margin-top:0;}

  /* Auf Desktop bleibt das Rückgaberecht im Aktion-Promo-Banner als eigene Box (kein Full-Bleed, sonst bricht das 2-Spalten-Layout) */
  .guarantee-row{width:auto;margin-left:0;margin-right:0;border-radius:14px;padding:10px 14px;justify-content:flex-start;}

  /* ---- Produktseiten-Sections: Hintergrund voll breit, Text mittig ---- */
  section{padding:36px max(32px, calc(50% - 350px));}
  section.section-tight-bottom{padding-bottom:6px;}
  .photo-row .ph{height:150px;}

  /* ---- Team-Fotos: bei voller Breite höher, damit Gesichter sichtbar bleiben ---- */
  .team-photo{height:480px;}
  .team-photo img{height:100%;object-position:top;}
  .team-photo-2{height:420px;}
  .team-photo-2 img{object-position:top;}

  /* ---- Hub: Themensprays als Grid ---- */
  main.hub-main{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;align-content:start;align-items:start;}
  main.hub-main .category-title{grid-column:1/-1;}
  main.hub-main details.card{margin:0 0 10px;}

  /* ---- Kontakt: Karten nebeneinander ---- */
  .contact-cards-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  .contact-cards-row .contact-card{margin-bottom:0;}

  /* ---- Kurz-Check Box zentriert, etwas breiter ---- */
  .kurzcheck-box{max-width:620px;margin:22px auto 6px;}

  /* ---- Sticky-CTA: voller Balken, Button mittig ---- */
  .sticky-cta{padding:14px max(32px, calc(50% - 560px));}
  .sticky-cta .cta{max-width:420px;margin:0 auto;}
  .promo-fixed-cta{padding:14px max(32px, calc(50% - 560px));}
  .promo-fixed-cta .cta{max-width:420px;margin:0 auto;}

  footer.site-footer{padding:36px max(32px, calc(50% - 350px));}
}