/* CSS (styles.css) */
:root{
  --ink: #24323a;
  --text: #2b3b44;
  --muted: rgba(36,50,58,.72);

  --wine: #800020;
  --slate: #36454f;

  /* fröhlich */
  --peach: #ffd6c8;
  --butter: #fff2b8;
  --blush: #ff9fb7;
  --mint: #d7fff1;

  --bg: #fbfbfc;
  --card: rgba(255,255,255,.92);
  --stroke: rgba(36,50,58,.14);

  --shadow: 0 14px 40px rgba(0,0,0,.10);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.08);

  --radius: 18px;
  --radius-lg: 26px;

  --wrap: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(255,242,184,.75) 0%, rgba(255,242,184,0) 60%),
              radial-gradient(900px 520px at 90% 0%, rgba(255,159,183,.45) 0%, rgba(255,159,183,0) 55%),
              linear-gradient(180deg, #ffffff 0%, var(--bg) 70%);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration: underline; }

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; background:#fff; border:1px solid var(--stroke); border-radius:12px;
  z-index: 9999;
}

.wrap{
  width:min(var(--wrap), 100%);
  margin:0 auto;
  padding: 0 16px;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 0;
}

.brand__name{ font-weight: 900; letter-spacing: .2px; }
.brand__tag{ font-size: 13px; opacity: .82; }

.nav{
  display:none;
  gap:14px;
  align-items:center;
  font-size: 14px;
}
.nav a{ opacity:.9; }
.nav a:hover{ opacity:1; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, var(--wine) 0%, #a1002a 55%, #cf2a57 100%);
  color:#fff;
  font-weight: 800;
  letter-spacing: .1px;
  box-shadow: var(--shadow-soft);
  text-decoration:none;
}
.btn:hover{ filter: brightness(1.02); text-decoration:none; }
.btn:active{ transform: translateY(1px); }

.btn--ghost{
  background: rgba(255,255,255,.8);
  color: var(--slate);
  border: 1px solid var(--stroke);
  box-shadow: none;
}
.btn--ghost:hover{ background:#fff; }

.btn--small{ padding: 10px 12px; font-size: 14px; }
.btn--wide{ width:100%; }

.hero{
  position: relative;
  overflow: hidden;
  padding: 28px 0 14px;
}
.hero__bg{
  position:absolute; inset:0;
  pointer-events:none;
  opacity: .92;
  background:
    radial-gradient(800px 420px at 15% 15%, rgba(215,255,241,.65) 0%, rgba(215,255,241,0) 55%),
    radial-gradient(900px 520px at 90% 20%, rgba(255,214,200,.75) 0%, rgba(255,214,200,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.15) 100%);
}
.hero__bg::after{
  content:"";
  position:absolute;
  right:-120px;
  top:-60px;
  width: 520px;
  height: 760px;
  background-repeat:no-repeat;
  background-size: contain;
  background-position: right top;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.12));
  opacity: .95;

  /* Frau-Illustration als eingebettete SVG (Data-URI) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='520' height='760' viewBox='0 0 520 760' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(260 160) rotate(90) scale(520 360)'%3E%3Cstop stop-color='%23FFF2B8'/%3E%3Cstop offset='1' stop-color='%23FF9FB7' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='dress' x1='140' y1='210' x2='410' y2='680' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23800020'/%3E%3Cstop offset='1' stop-color='%23CF2A57'/%3E%3C/linearGradient%3E%3ClinearGradient id='skin' x1='220' y1='160' x2='330' y2='260' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFD6C8'/%3E%3Cstop offset='1' stop-color='%23F6BBAA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='520' height='760' fill='url(%23g)'/%3E%3Cpath d='M337 156c0 44-33 80-74 80s-74-36-74-80 33-80 74-80 74 36 74 80z' fill='url(%23skin)'/%3E%3Cpath d='M178 170c18-46 53-72 93-72 47 0 89 35 100 90 3 16-9 29-25 28-34-1-58-13-74-36-20 28-49 42-90 42-20 0-31-22-4-52z' fill='%2324323A' fill-opacity='0.92'/%3E%3Cpath d='M208 236c-18 26-30 64-34 108-7 83 41 135 25 214-7 34-45 66-10 90 27 19 120 26 168 0 41-22-2-56-10-90-19-85 36-130 25-214-5-44-16-82-34-108-31 20-79 20-130 0z' fill='url(%23dress)'/%3E%3Cpath d='M176 343c-25 44-55 64-78 76-13 7-18 23-10 36 7 12 22 16 35 10 27-14 63-39 94-93 7-13 3-30-10-37-12-7-28-3-31 8z' fill='%23FFD6C8' fill-opacity='0.92'/%3E%3Cpath d='M344 343c25 44 55 64 78 76 13 7 18 23 10 36-7 12-22 16-35 10-27-14-63-39-94-93-7-13-3-30 10-37 12-7 28-3 31 8z' fill='%23FFD6C8' fill-opacity='0.92'/%3E%3Ccircle cx='382' cy='520' r='10' fill='%23FFFFFF' fill-opacity='0.65'/%3E%3Ccircle cx='412' cy='486' r='7' fill='%23FFFFFF' fill-opacity='0.55'/%3E%3Ccircle cx='356' cy='470' r='6' fill='%23FFFFFF' fill-opacity='0.45'/%3E%3C/svg%3E");
}

.hero__grid{
  position:relative;
  display:grid;
  gap: 18px;
  align-items: start;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--wine);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--stroke);
  padding: 8px 12px;
  border-radius: 999px;
  margin: 0 0 10px;
}

.hero h1{
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.08;
  font-size: clamp(32px, 4vw, 52px);
  color: var(--ink);
}

.lead{
  margin: 0 0 14px;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--muted);
  max-width: 60ch;
}

.hero__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.chip{
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
}

.hero__cta{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 14px;
}

.mini-proof{
  display:grid;
  gap: 10px;
  margin-top: 6px;
}
.mini-proof__item{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  border-radius: var(--radius);
  padding: 12px 12px;
}
.mini-proof__kicker{
  font-weight: 900;
  font-size: 12px;
  color: var(--wine);
  margin-bottom: 4px;
}
.mini-proof__text{ color: var(--muted); }

.hero__card{
  position: relative;
}

.card{
  background: #fff;
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 16px 16px;
  box-shadow: var(--shadow);
}
.card--glass{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
}
.card__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
}
.card__divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 14px 0;
}
.muted{ color: var(--muted); }
.micro{ font-size: 12px; opacity: .8; margin: 12px 0 0; }

.checklist{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 8px;
}
.check{
  display:inline-flex;
  width: 22px;
  height: 22px;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(128,0,32,.10);
  color: var(--wine);
  font-weight: 900;
  margin-right: 8px;
}
.checklist--compact{ gap: 7px; }

.strip{
  padding: 10px 0 22px;
}
.strip__grid{
  display:grid;
  gap: 10px;
}
.strip__box{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 14px;
  background:
    radial-gradient(500px 240px at 10% 0%, rgba(255,242,184,.55) 0%, rgba(255,242,184,0) 55%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
}
.strip__title{ font-weight: 900; margin-bottom: 4px; color: var(--ink); }
.strip__text{ color: var(--muted); }

.section{
  padding: 24px 0;
}
.section--soft{
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(215,255,241,.55) 0%, rgba(215,255,241,0) 60%),
    radial-gradient(900px 520px at 90% 40%, rgba(255,214,200,.55) 0%, rgba(255,214,200,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.18));
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.section__head{
  margin-bottom: 14px;
}
.section__head h2{
  margin:0 0 8px;
  font-size: 24px;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.sub{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

.grid-2{
  display:grid;
  gap: 12px;
}
.panel{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 14px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft);
}
.panel--warn{
  background: rgba(255,255,255,.72);
  border-color: rgba(128,0,32,.22);
}
.panel h3{ margin:0 0 8px; font-size: 18px; }
.bullets{
  margin: 0;
  padding-left: 18px;
  display:grid;
  gap: 8px;
  color: var(--text);
}

.cards{
  display:grid;
  gap: 12px;
}
.cards .card{
  position: relative;
  overflow:hidden;
}
.card__badge{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), #cf2a57);
  box-shadow: 0 10px 20px rgba(128,0,32,.18);
}
.card h3{ margin: 0 44px 8px 0; font-size: 18px; color: var(--ink); }
.card p{ margin: 0 0 10px; color: var(--muted); }
.result{
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(128,0,32,.06);
  border: 1px solid rgba(128,0,32,.14);
  color: var(--text) !important;
}

.format{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}
.format__box{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 14px 14px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-soft);
}
.format__box h3{ margin:0 0 8px; font-size: 18px; color: var(--ink); }

.punch{
  margin-top: 14px;
  border-left: 6px solid var(--wine);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.punch p{ margin:0; color: var(--ink); }

.cta-band{
  margin-top: 14px;
  display:grid;
  gap: 12px;
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  padding: 16px 16px;
  box-shadow: var(--shadow);
}
.cta-band__copy h3{ margin:0 0 6px; font-size: 18px; color: var(--ink); }
.cta-band__copy p{ margin:0; color: var(--muted); }

.faq{
  display:grid;
  gap: 10px;
}
.faq__item{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-soft);
  padding: 0;
  overflow:hidden;
}
.faq__item summary{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 800;
  color: var(--ink);
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+";
  float:right;
  font-weight: 900;
  color: var(--wine);
}
.faq__item[open] summary::after{ content:"–"; }
.faq__body{
  padding: 0 14px 14px;
  color: var(--muted);
  line-height: 1.7;
}

.footer{
  padding: 22px 0 90px;
}
.footer__grid{
  display:grid;
  gap: 14px;
  align-items: start;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 18px;
}
.footer__brand{ font-weight: 900; }
.footer__tag{ opacity: .85; }
.footer__micro{ margin-top: 6px; font-size: 12px; opacity: .8; }
.footer__links{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  opacity: .92;
}

.sticky-cta{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.sticky-cta__title{ font-weight: 900; color: var(--ink); }
.sticky-cta__sub{ font-size: 12px; opacity: .8; }

@media (min-width: 920px){
  .nav{ display:flex; }
  .hero{ padding: 46px 0 20px; }
  .hero__grid{
    grid-template-columns: 1.3fr 0.9fr;
    gap: 22px;
  }
  .strip__grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .grid-2{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cards{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .format{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .cta-band{
    grid-template-columns: 1.2fr 0.8fr;
  }
  .footer__grid{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .sticky-cta{ display:none; }
}