/* Ohrfunkeln Wiedemann — Design-Entwurf von AEVUM.
   Palette aus dem realen Flyer abgeleitet (Plum #6E2D57, Gold-Funkeln, Blush-Rosé). */

:root {
  --plum:      #6E2D57;
  --plum-dk:   #4A1E3A;
  --plum-lt:   #9C4A7C;
  --gold:      #C9A227;
  --gold-dk:   #82680E;
  --ink:       #2B1E27;
  --ink-2:     #5C4A54;
  --ink-3:     #8A7885;
  --pink:      #F8E7EA;
  --pink-2:    #F1D3D9;
  --cream:     #FDF8F6;
  --white:     #FFFFFF;
  --line:      #E9D6DC;

  --display: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-xs: .75rem; --t-sm: .875rem; --t-base: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.5rem; --t-4xl: clamp(2.2rem, 5.6vw, 3.8rem);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 999px;

  --sh-sm: 0 1px 3px rgba(74,30,58,.08), 0 2px 10px rgba(74,30,58,.06);
  --sh-md: 0 8px 28px rgba(74,30,58,.14);
  --sh-lg: 0 30px 70px rgba(74,30,58,.24);

  --ease: cubic-bezier(.22,.61,.36,1);
  --bar-h: 76px;
}
:root { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 8px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-width: 640px) {
  :root { --s24: 68px; --s20: 56px; --s16: 44px; }
}
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--s6); }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--s6); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================ Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--r-full); font-weight: 700; font-size: var(--t-base); text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.btn--primary { background: var(--plum); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--sh-md); background: var(--plum-dk); }
.btn--ghost { background: transparent; color: var(--plum); border: 1.5px solid var(--plum); }
.btn--ghost:hover { background: var(--pink-2); }
.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--sh-sm); }
.btn--gold:hover { transform: translateY(-2px); box-shadow: var(--sh-md); background: var(--gold-dk); color: #fff; }
.btn svg { width: 18px; height: 18px; }

.eyebrow { font-size: var(--t-xs); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk); margin: 0 0 var(--s4); display: block; }
.eyebrow.center { text-align: center; }
.eyebrow--onplum { color: var(--gold); }

/* ============================================================ Sparkle deco */
.spark { position: absolute; color: var(--gold); opacity: .55; }
.spark svg { width: 100%; height: 100%; }

/* ============================================================ Header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(253,248,246,.97); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.hdr.is-stuck { border-color: var(--line); box-shadow: 0 2px 20px rgba(74,30,58,.06); }
.hdr__in { max-width: 1160px; margin: 0 auto; padding: 0 var(--s6); height: var(--bar-h); display: flex; align-items: center; gap: var(--s6); }
.logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--plum); font-family: var(--display); }
.logo b { font-size: 1.5rem; font-style: italic; font-weight: 700; letter-spacing: -.01em; }
.logo i { font-style: normal; font-size: .78rem; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.nav a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav a:hover { color: var(--plum); }
.hdr .btn--gold { margin-left: var(--s2); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--plum); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.nav.is-open ~ .burger span:nth-child(1), .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 99; background: var(--cream); flex-direction: column; align-items: stretch; gap: 0; padding: var(--s6); transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; }
  .nav.is-open { transform: translateX(0); }
  .nav a { padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: var(--t-lg); }
  .nav .btn { margin-top: var(--s6); }
  .hdr .btn--gold:not(.nav .btn) { display: none; }
  .burger { display: block; }
}

/* ============================================================ Hero */
.hero { position: relative; padding: calc(var(--bar-h) + var(--s20)) 0 var(--s20); overflow: hidden; background: linear-gradient(160deg, var(--pink) 0%, var(--cream) 55%); isolation: isolate; }
.hero__deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__deco .spark { width: clamp(18px, 3vw, 34px); height: clamp(18px, 3vw, 34px); }
.hero__in { display: grid; gap: var(--s12); align-items: center; }
@media (min-width: 980px) { .hero__in { grid-template-columns: 1.15fr .85fr; } }
.hero h1 { font-size: var(--t-4xl); font-style: italic; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: var(--plum-dk); max-width: 14ch; }
.hero__lead { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--ink-2); max-width: 46ch; margin: var(--s6) 0 0; line-height: 1.6; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s8); }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); padding: 8px 16px 8px 8px; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 700; color: var(--plum); box-shadow: var(--sh-sm); }
.hero__badge .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; color: var(--ink); flex: none; }
.hero__badge svg { width: 14px; height: 14px; }
.hero__visual { position: relative; display: grid; place-items: center; }
.hero__ring { position: relative; width: min(360px, 78vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--sh-lg); border: 6px solid #fff; }
.hero__ring img { width: 100%; height: 100%; object-fit: cover; }
.hero__ring2 { position: absolute; width: 130px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: var(--sh-md); bottom: -6%; left: -8%; }
.hero__ring2 img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================ USP-Leiste */
.usp { padding: var(--s12) 0; background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.usp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8); }
@media (max-width: 900px) { .usp__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
.usp__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); }
.usp__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--pink); color: var(--plum); display: grid; place-items: center; flex: none; }
.usp__ic svg { width: 24px; height: 24px; }
.usp__item h3 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.usp__item p { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }

/* ============================================================ Section basics */
.sec { padding: var(--s24) 0; }
.sec--tint { background: var(--pink); }
.sec--dark { background: var(--plum-dk); color: var(--cream); }
.sec--dark .ink-2 { color: rgba(253,248,246,.78); }
.sec__head { max-width: 640px; margin: 0 0 var(--s12); }
.sec__head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-style: italic; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.sec--dark h2 { color: #fff; }
.sec__sub { margin-top: var(--s4); color: var(--ink-2); font-size: var(--t-lg); line-height: 1.6; }
.sec--dark .sec__sub { color: rgba(253,248,246,.82); }

/* ============================================================ Über mich */
.about__grid { display: grid; gap: var(--s12); align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .8fr 1.2fr; gap: var(--s16); } }
.about__photo { position: relative; width: min(320px, 70vw); margin: 0 auto; }
.about__photo img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 6px solid #fff; box-shadow: var(--sh-lg); }
.about__photo .spark { width: 30px; height: 30px; top: -6%; right: 2%; }
.about p + p { margin-top: var(--s4); }
.about p { color: var(--ink-2); font-size: var(--t-lg); line-height: 1.7; }
.about__sign { margin-top: var(--s6); font-family: var(--display); font-style: italic; font-size: var(--t-xl); color: var(--plum); }

/* ============================================================ Trust / Hygiene-Leiste */
.trust { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } }
.trust li { list-style: none; display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.trust svg { width: 18px; height: 18px; color: var(--gold-dk); flex: none; margin-top: 2px; }

/* ============================================================ Ablauf (Prozess) */
.steps { display: grid; gap: var(--s6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { background: rgba(253,248,246,.06); border: 1px solid rgba(253,248,246,.16); border-radius: var(--r-lg); padding: var(--s8); }
.step__num { font-family: var(--display); font-style: italic; font-size: var(--t-3xl); color: var(--gold); line-height: 1; }
.step h3 { font-family: var(--sans); font-size: var(--t-lg); font-weight: 700; color: #fff; margin: var(--s3) 0 var(--s2); }
.step p { color: rgba(253,248,246,.78); font-size: var(--t-sm); line-height: 1.6; }

/* ============================================================ Nachsorge-Checkliste */
.aftercare { margin-top: var(--s12); background: rgba(253,248,246,.06); border: 1px solid rgba(253,248,246,.16); border-radius: var(--r-lg); padding: var(--s8); }
.aftercare h3 { font-family: var(--sans); font-size: var(--t-lg); font-weight: 700; color: #fff; margin-bottom: var(--s4); }
.aftercare__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3) var(--s8); }
@media (max-width: 700px) { .aftercare__grid { grid-template-columns: 1fr; } }
.aftercare__grid li { list-style: none; display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: rgba(253,248,246,.82); line-height: 1.5; }
.aftercare__grid svg { width: 17px; height: 17px; color: var(--gold); flex: none; margin-top: 2px; }
.aftercare__grid { margin: 0; padding: 0; }
.aftercare__note { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid rgba(253,248,246,.14); font-size: var(--t-xs); color: rgba(253,248,246,.6); }

/* ============================================================ FAQ */
.faq { display: grid; gap: var(--s3); max-width: 760px; margin: 0 auto; }
.faq__item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s6); }
.faq__item h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 700; margin-bottom: var(--s2); color: var(--plum-dk); }
.faq__item p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* ============================================================ Leistungen */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.svc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.svc:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.svc__ic { width: 46px; height: 46px; border-radius: 50%; background: var(--pink); color: var(--plum); display: grid; place-items: center; margin-bottom: var(--s4); }
.svc__ic svg { width: 22px; height: 22px; }
.svc h3 { font-family: var(--sans); font-size: var(--t-base); font-weight: 700; margin-bottom: var(--s2); }
.svc p { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; }

/* ============================================================ Motive */
.motive { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.motive span { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); padding: 10px 18px; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); box-shadow: var(--sh-sm); }
.motive span svg { width: 14px; height: 14px; color: var(--gold-dk); }

/* ============================================================ Galerie */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); max-width: 640px; margin: 0 auto; }
@media (max-width: 640px) { .gal { grid-template-columns: 1fr; max-width: 320px; } }
.gal__item { text-align: center; }
.gal__item .ring { border-radius: 50%; aspect-ratio: 1; overflow: hidden; border: 6px solid var(--pink); box-shadow: var(--sh-md); }
.gal__item .ring img { width: 100%; height: 100%; object-fit: cover; }
.gal__item span { display: block; margin-top: var(--s3); font-size: var(--t-sm); font-weight: 700; color: var(--plum); }

/* ============================================================ Kontakt */
.contact { display: grid; gap: var(--s12); }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.ccard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s8); box-shadow: var(--sh-sm); }
.ccard h3 { font-family: var(--sans); font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--s3); }
.cinfo { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.cinfo li { display: flex; gap: var(--s3); align-items: center; }
.cinfo svg { width: 19px; height: 19px; color: var(--gold-dk); flex: none; }
.cinfo a { text-decoration: none; font-weight: 600; color: var(--ink); display: inline-block; padding: 4px 0; }
.cinfo a:hover { color: var(--plum); }

/* ============================================================ Footer */
.ft { background: var(--plum-dk); color: rgba(253,248,246,.72); padding: var(--s16) 0 var(--s8); }
.ft__grid { display: grid; gap: var(--s8); grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr; gap: var(--s6); } }
.ft__logo { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-style: italic; font-size: 1.3rem; color: #fff; margin-bottom: var(--s3); }
.ft p { font-size: var(--t-sm); line-height: 1.6; }
.ft h4 { font-family: var(--sans); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-bottom: var(--s3); }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ft a { text-decoration: none; font-size: var(--t-sm); color: rgba(253,248,246,.72); display: inline-block; padding: 6px 0; }
.ft a:hover { color: #fff; }
.ft__btm { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid rgba(253,248,246,.14); display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between; font-size: var(--t-xs); color: rgba(253,248,246,.55); }

/* ============================================================ Pitch banner (AEVUM) */
.pitch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink); color: #fff; font-size: var(--t-xs); text-align: center; padding: 10px var(--s4); }
.pitch b { color: var(--gold); }
.pitch svg { width: 12px; height: 12px; color: var(--gold); vertical-align: -1px; }

/* ============================================================ Reveal
   Nur mit JS (html.js via Inline-Script im Head) starten Elemente unsichtbar —
   ohne JS, bei Print und in Fullpage-Screenshots bleibt alles sichtbar. */
html.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rise { opacity: 1; transform: none; } }
@media print {
  .rise { opacity: 1 !important; transform: none !important; }
  .hdr, .pitch { position: static; }
}

/* ============================================================ Legal pages */
.legal-hdr { padding: var(--s6) 0; border-bottom: 1px solid rgba(253,248,246,.14); background: var(--plum-dk); }
.legal-hdr .wrap { display: flex; align-items: center; justify-content: space-between; }
.legal-back { font-size: var(--t-sm); font-weight: 600; color: rgba(253,248,246,.7); text-decoration: none; }
.legal-back:hover { color: #fff; }
.legal { padding: var(--s16) 0 var(--s24); }
.legal h1 { font-size: var(--t-3xl); margin-bottom: var(--s8); font-style: italic; }
.legal h2 { font-size: var(--t-xl); margin: var(--s12) 0 var(--s3); color: var(--ink); font-family: var(--sans); }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.7; }
.legal a { color: var(--plum); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--plum-dk); }
.legal .legal__note { font-size: var(--t-sm); font-style: italic; color: var(--ink-3); background: var(--pink); border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s12); }

/* ============================================================ AEVUM Paket-Info */
.aevpkg{--aevpkg-bg:#211119;--aevpkg-ink:#F8E7EA;--aevpkg-dim:#C9AFBB;--aevpkg-acc:#C9A227;
  all:initial;display:block;box-sizing:border-box;background:var(--aevpkg-bg);color:var(--aevpkg-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.15rem,4vw,2.5rem);border-top:1px solid rgba(201,162,39,.35)}
.aevpkg *{box-sizing:border-box}
.aevpkg__in{max-width:1100px;margin:0 auto;display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media (min-width:860px){.aevpkg__in{grid-template-columns:1fr 1.15fr;align-items:start}}
.aevpkg__kick{margin:0 0 .9rem;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--aevpkg-acc);font-weight:700}
.aevpkg__h{margin:0;font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);line-height:1.15;font-weight:600;
  color:var(--aevpkg-ink);letter-spacing:-.01em}
.aevpkg__sub{margin:.9rem 0 0;color:var(--aevpkg-dim);font-size:.98rem;max-width:44ch}
.aevpkg__price{margin:1.4rem 0 0;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.aevpkg__num{font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);font-weight:700;color:var(--aevpkg-acc);
  letter-spacing:-.02em;line-height:1}
.aevpkg__once{color:var(--aevpkg-dim);font-size:.9rem}
.aevpkg__list{margin:0;padding:0;list-style:none;display:grid;gap:.7rem}
.aevpkg__list li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:.96rem;color:var(--aevpkg-ink)}
.aevpkg__list svg{width:17px;height:17px;margin-top:.28rem;flex:none;stroke:var(--aevpkg-acc);
  fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.aevpkg__note{margin:1.6rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(248,231,234,.12);
  color:var(--aevpkg-dim);font-size:.83rem;max-width:70ch}
.aevpkg__note b{color:var(--aevpkg-ink);font-weight:600}
.aevpkg__h svg{width:.85em;height:.85em;margin-right:.45em;vertical-align:-.06em;
  stroke:var(--aevpkg-acc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Platz für den fixierten Pitch-Banner, damit er den Paket-Hinweis nicht verdeckt */
.aevpkg{padding-bottom:calc(clamp(2rem,5vw,3.5rem) + 52px)}
@media (max-width:640px){.aevpkg{padding-bottom:calc(2rem + 96px)}}