/* ============================================================
   Sabine Padberg · Der Padberg Heilraum
   Design-System: Grün · Gold · Weiß · Magenta
   ============================================================ */

:root {
  --green-deep:   #0d2f24;   /* tiefes Tannengrün */
  --green:        #14422f;
  --green-soft:   #1d5740;
  --green-mist:   #e8efe9;
  --gold:         #c6a35a;
  --gold-light:   #e3cf9a;
  --gold-deep:    #a9853f;
  --magenta:      #b42a6e;
  --magenta-soft: #f7e6ef;
  --white:        #ffffff;
  --cream:        #faf7f0;
  --ink:          #20302a;
  --ink-soft:     #54655e;

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Jost", "Segoe UI", sans-serif;

  --radius: 18px;
  --shadow: 0 18px 50px rgba(13, 47, 36, .14);
  --shadow-soft: 0 8px 26px rgba(13, 47, 36, .09);
  --maxw: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typografie ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--green-deep);
  line-height: 1.15;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1.1rem;
}
.eyebrow.on-dark { color: var(--gold-light); }

.lead { font-size: 1.22rem; color: var(--ink-soft); font-weight: 300; }
.accent { color: var(--magenta); }
.gold-text { color: var(--gold-deep); }
em.soft { font-style: italic; color: var(--ink-soft); }

/* ---------- Goldene Linie ---------- */
.goldline {
  width: 72px; height: 2px; border: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  margin: 1.6rem 0;
}
.center .goldline, .goldline.center { margin-left: auto; margin-right: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 240, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(198, 163, 90, .45);
  box-shadow: 0 4px 24px rgba(13, 47, 36, .08);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 600; color: var(--green-deep);
  letter-spacing: .03em;
  display: flex; align-items: center; gap: .55rem;
}
.brand-paw { width: 36px; height: 36px; filter: drop-shadow(0 2px 6px rgba(13,47,36,.25)); }
.brand span {
  font-weight: 600;
  background: linear-gradient(120deg, var(--gold-deep), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }
.nav-links a {
  color: var(--ink); font-size: .95rem; font-weight: 400;
  letter-spacing: .05em; transition: color .25s;
}
.nav-links a:hover { color: var(--magenta); }
.nav-links a.active { color: var(--gold-deep); }
.nav-links .nav-cta {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--green-deep); padding: .55rem 1.3rem; border-radius: 999px;
  font-weight: 500;
}
.nav-links .nav-cta:hover { color: var(--green-deep); filter: brightness(1.08); }
.nav-toggle { display: none; background: none; border: 0; color: var(--green-deep); font-size: 1.7rem; cursor: pointer; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--cream); flex-direction: column;
    padding: 1.5rem 0 2rem; gap: 1.2rem;
    display: none; border-bottom: 1px solid rgba(198,163,90,.45);
    box-shadow: 0 18px 40px rgba(13,47,36,.15);
  }
  .nav-links.open { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(198,163,90,.22), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(180,42,110,.16), transparent 50%),
    linear-gradient(160deg, var(--green-deep) 0%, var(--green) 55%, #0a241b 100%);
  color: var(--white);
  text-align: center;
  padding: 7rem 24px 6.5rem;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.hero h1 { color: var(--white); }
.hero h1 .gold { color: var(--gold-light); font-style: italic; }
.hero .lead { color: rgba(255,255,255,.82); max-width: 680px; margin: 1.6rem auto 0; }
.hero-badge {
  display: inline-block; margin-bottom: 1.6rem;
  border: 1px solid rgba(198,163,90,.55); border-radius: 999px;
  padding: .45rem 1.4rem; font-size: .85rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-light);
}
.hero-ctas { margin-top: 2.6rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 1.2rem; font-size: .92rem; color: rgba(255,255,255,.6); font-style: italic; }

/* Innere Hero (Unterseiten) */
.hero.small { padding: 5rem 24px 4.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: .95rem 2.3rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  letter-spacing: .04em; cursor: pointer; border: 0;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-deep));
  color: var(--green-deep); box-shadow: 0 10px 30px rgba(198,163,90,.35);
}
.btn-magenta {
  background: linear-gradient(135deg, #cf3f85, var(--magenta));
  color: var(--white); box-shadow: 0 10px 30px rgba(180,42,110,.35);
}
.btn-outline {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.55);
}
.btn-outline:hover { border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline-dark {
  background: transparent; color: var(--green-deep);
  border: 1px solid var(--green-soft);
}
.btn-outline-dark:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---------- Sektionen ---------- */
section { padding: 5.5rem 0; }
.section-dark {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(198,163,90,.14), transparent 55%),
    linear-gradient(170deg, var(--green-deep), var(--green));
  color: rgba(255,255,255,.88);
}
.section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark .lead { color: rgba(255,255,255,.78); }
.section-mist { background: var(--green-mist); }
.section-white { background: var(--white); }
.center { text-align: center; }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Karten ---------- */
.cards { display: grid; gap: 1.6rem; margin-top: 3rem; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .cards.three, .cards.two { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border-radius: var(--radius);
  padding: 2.4rem 2.1rem; box-shadow: var(--shadow-soft);
  border-top: 3px solid var(--gold);
  transition: transform .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card.magenta-top { border-top-color: var(--magenta); }
.card.green-top { border-top-color: var(--green-soft); }
.card h3 { margin-bottom: .8rem; }
.card p { color: var(--ink-soft); font-size: .99rem; }
.card .card-link {
  display: inline-block; margin-top: 1.4rem; font-weight: 500;
  color: var(--magenta); letter-spacing: .03em;
}
.card .card-link:hover { color: var(--gold-deep); }

.card-icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1.3rem;
  background: linear-gradient(135deg, var(--green-mist), #fff);
  border: 1px solid var(--gold-light);
}

/* ---------- Phasen / Nummern ---------- */
.phase {
  display: grid; grid-template-columns: 86px 1fr; gap: 1.8rem;
  background: var(--white); border-radius: var(--radius);
  padding: 2.2rem 2.2rem; box-shadow: var(--shadow-soft);
  margin-top: 1.5rem; align-items: start;
}
.phase-num {
  font-family: var(--font-display); font-size: 2.6rem;
  color: var(--gold); border: 1px solid var(--gold-light);
  border-radius: 50%; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.phase h3 { margin-bottom: .5rem; }
.phase p strong { color: var(--green-deep); font-weight: 500; }
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; } .phase-num { width: 56px; height: 56px; font-size: 1.8rem; } }

/* ---------- Listen ---------- */
.check-list { list-style: none; margin-top: 1.6rem; }
.check-list li {
  padding: .55rem 0 .55rem 2.2rem; position: relative; color: var(--ink-soft);
}
.check-list li::before {
  content: "✦"; position: absolute; left: 0; top: .55rem;
  color: var(--gold-deep);
}
.section-dark .check-list li { color: rgba(255,255,255,.82); }
.section-dark .check-list li::before { color: var(--gold-light); }

/* ---------- Preis ---------- */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2.6rem; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--white); border-radius: var(--radius);
  padding: 2.6rem 2rem; text-align: center; box-shadow: var(--shadow-soft);
  border: 1px solid var(--gold-light);
}
.price-card.featured { border: 2px solid var(--gold); box-shadow: var(--shadow); }
.price-card .amount {
  font-family: var(--font-display); font-size: 3.2rem; color: var(--green-deep);
  line-height: 1; margin: .6rem 0;
}
.price-card .per { font-size: .92rem; color: var(--ink-soft); }
.price-tag {
  display: inline-block; background: var(--magenta-soft); color: var(--magenta);
  border-radius: 999px; font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; padding: .3rem 1rem; margin-bottom: .6rem;
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; margin-top: 2.6rem; display: grid; gap: 1.4rem; }
.step {
  background: var(--white); border-radius: var(--radius); padding: 1.9rem 2rem 1.9rem 5.4rem;
  position: relative; box-shadow: var(--shadow-soft);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 1.6rem; top: 1.7rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--green-deep); font-family: var(--font-display); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}

/* ---------- Garantie ---------- */
.guarantee {
  background: linear-gradient(135deg, var(--magenta-soft), #fff);
  border: 1px solid rgba(180,42,110,.25); border-radius: var(--radius);
  padding: 2.6rem; text-align: center; max-width: 760px; margin: 3rem auto 0;
}
.guarantee h3 { color: var(--magenta); }

/* ---------- Portal ---------- */
.portal-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.portal-card-head {
  padding: 2rem 2.2rem 1.6rem;
  background: linear-gradient(150deg, var(--green-deep), var(--green-soft));
  color: var(--white);
}
.portal-card-head.magenta { background: linear-gradient(150deg, #8e1f55, var(--magenta)); }
.portal-card-head h3 { color: var(--white); }
.portal-card-head p { color: rgba(255,255,255,.78); font-size: .95rem; margin-top: .3rem; }
.portal-card-body { padding: 1.6rem 2.2rem 2.2rem; }
.portal-links { list-style: none; }
.portal-links li { border-bottom: 1px solid var(--green-mist); }
.portal-links li:last-child { border-bottom: 0; }
.portal-links a {
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem .2rem; color: var(--ink); font-weight: 400;
  transition: color .2s, padding-left .2s;
}
.portal-links a:hover { color: var(--magenta); padding-left: .6rem; }
.portal-links .pl-icon { font-size: 1.15rem; width: 1.6rem; text-align: center; color: var(--gold-deep); }
.portal-links .soon { margin-left: auto; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); background: var(--cream); border: 1px solid var(--gold-light); border-radius: 999px; padding: .15rem .7rem; }

/* ---------- Platzhalter-Bild ---------- */
.ph-img {
  border-radius: var(--radius); min-height: 320px;
  background:
    radial-gradient(circle at 30% 30%, rgba(198,163,90,.35), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(180,42,110,.25), transparent 55%),
    linear-gradient(150deg, var(--green-mist), #dfe9e1);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-soft); font-family: var(--font-display);
  font-size: 1.25rem; font-style: italic; text-align: center; padding: 2rem;
  border: 1px solid rgba(198,163,90,.4);
}

/* ---------- Zweispaltig ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* ---------- Quote ---------- */
.bigquote {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-style: italic; color: var(--green-deep); line-height: 1.4;
}
.section-dark .bigquote { color: var(--gold-light); }

/* ---------- CTA-Band ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(198,163,90,.25), transparent 55%),
    linear-gradient(135deg, var(--green-deep), var(--green));
  border-radius: calc(var(--radius) + 6px);
  padding: 4rem 3rem; text-align: center; color: var(--white);
  box-shadow: var(--shadow);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.8); max-width: 620px; margin: 1rem auto 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: #081f17; color: rgba(255,255,255,.65);
  padding: 3.5rem 0 2rem; font-size: .92rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--font-display); color: var(--gold-light);
  font-size: 1.2rem; margin-bottom: 1rem; font-weight: 500;
}
.site-footer a { color: rgba(255,255,255,.65); transition: color .2s; display: inline-block; padding: .18rem 0; }
.site-footer a:hover { color: var(--gold-light); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; text-align: center;
  border-top: 1px solid rgba(198,163,90,.2); font-size: .85rem;
  color: rgba(255,255,255,.45);
}

/* ---------- Kleinigkeiten ---------- */
.spacer-s { height: 1.5rem; }
.badge-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.badge {
  border: 1px solid var(--gold-light); color: var(--gold-deep);
  border-radius: 999px; padding: .35rem 1.1rem; font-size: .85rem; letter-spacing: .06em;
}
.section-dark .badge { border-color: rgba(198,163,90,.5); color: var(--gold-light); }

/* ============================================================
   SPIRIT-LAYER · weicher, beseelter, weniger corporate
   ============================================================ */

body {
  background:
    radial-gradient(ellipse 900px 500px at 110% -5%, rgba(198,163,90,.10), transparent 60%),
    radial-gradient(ellipse 700px 480px at -10% 30%, rgba(180,42,110,.06), transparent 60%),
    var(--cream);
}

/* Karten: weicher, ohne harte Kante */
.card {
  border-top: none;
  border: 1px solid rgba(198,163,90,.28);
  border-radius: 26px;
  background:
    radial-gradient(circle at 85% -10%, rgba(198,163,90,.13), transparent 55%),
    var(--white);
}
.card.magenta-top { border-color: rgba(180,42,110,.3);
  background: radial-gradient(circle at 85% -10%, rgba(180,42,110,.10), transparent 55%), var(--white); }
.card.green-top { border-color: rgba(29,87,64,.3); }

.phase, .step, .price-card, .portal-card { border-radius: 26px; }

/* Ornament-Trenner: ☽ ✦ ☾ */
.ornament {
  text-align: center; color: var(--gold-deep);
  font-size: 1.25rem; letter-spacing: 1.2rem; padding-left: 1.2rem;
  margin: 1.4rem 0; user-select: none;
}
.section-dark .ornament, .hero .ornament { color: var(--gold-light); }

/* Sanftes Schweben für Symbole */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.floaty { animation: floaty 5s ease-in-out infinite; display: inline-block; }

/* Funkelnde Sterne im Hero */
.hero { isolation: isolate; }
.star {
  position: absolute; color: rgba(227,207,154,.85); z-index: -1;
  animation: twinkle 4s ease-in-out infinite; pointer-events: none;
}
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.85);} 50% { opacity: .95; transform: scale(1.1);} }

/* Pfoten-Spur als zartes Wasserzeichen */
.pawtrail {
  position: absolute; font-size: 1.3rem; opacity: .12; pointer-events: none;
  transform: rotate(-20deg); z-index: -1; letter-spacing: 2.6rem; white-space: nowrap;
}

/* Mystik-Karten für die Landingpage (Orakel & Quiz Teaser) */
.mystic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
@media (max-width: 880px) { .mystic-grid { grid-template-columns: 1fr; } }
.mystic-card {
  position: relative; border-radius: 30px; padding: 3rem 2.5rem; text-align: center;
  overflow: hidden; color: var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgba(198,163,90,.35), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(180,42,110,.3), transparent 55%),
    linear-gradient(165deg, #0d2f24, #14422f 70%, #0a241b);
  border: 1px solid rgba(198,163,90,.5);
  box-shadow: 0 24px 60px rgba(13,47,36,.35);
  transition: transform .35s, box-shadow .35s;
}
.mystic-card:hover { transform: translateY(-8px); box-shadow: 0 34px 80px rgba(13,47,36,.45); }
.mystic-card.rose {
  background:
    radial-gradient(circle at 50% 0%, rgba(227,207,154,.3), transparent 60%),
    radial-gradient(circle at 15% 100%, rgba(13,47,36,.55), transparent 70%),
    linear-gradient(165deg, #7d1c4c, #b42a6e 75%, #5e1238);
  border-color: rgba(247,217,232,.45);
}
.mystic-card h3 { color: var(--white); font-size: 1.9rem; margin: .8rem 0 .6rem; }
.mystic-card p { color: rgba(255,255,255,.82); font-size: 1rem; }
.mystic-card .big-symbol { font-size: 3.2rem; filter: drop-shadow(0 0 22px rgba(227,207,154,.8)); }
.mystic-card .btn { margin-top: 1.8rem; }
.mystic-card .mc-tag {
  position: absolute; top: 1.3rem; right: 1.3rem;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .25rem .8rem;
  color: rgba(255,255,255,.75);
}

/* Sanfter Embrace-Hintergrund für helle Sektionen */
.section-soft {
  background:
    radial-gradient(ellipse 800px 400px at 90% 0%, rgba(198,163,90,.14), transparent 60%),
    radial-gradient(ellipse 700px 420px at 5% 100%, rgba(180,42,110,.08), transparent 60%),
    linear-gradient(170deg, #fdfbf5, #f4eee0);
}

/* Herzschlag-Puls für CTAs */
@keyframes heartbeat { 0%,100% { box-shadow: 0 10px 30px rgba(180,42,110,.35);} 50% { box-shadow: 0 10px 44px rgba(180,42,110,.65);} }
.btn-magenta.pulse { animation: heartbeat 2.6s ease-in-out infinite; }

/* Fade-in beim Scrollen */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Italic-Botschaften */
.whisper {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.25rem; color: var(--green-soft);
}
.hero .whisper, .section-dark .whisper { color: var(--gold-light); }

/* ============================================================
   MAGENTA-SPLASH · Farbtupfer für mehr Lebendigkeit
   ============================================================ */

/* Goldlinie endet jetzt in Magenta */
.goldline {
  background: linear-gradient(90deg, var(--gold), var(--gold-light) 50%, var(--magenta));
}

/* Eyebrows in Magenta — kleine Knaller über den Headlines */
.eyebrow { color: var(--magenta); }
.eyebrow.on-dark { color: #f3a9cd; }

/* Jeder zweite Stern funkelt magenta */
.star:nth-of-type(even) { color: #e87bb2; }

/* Karten-Icons: jede zweite mit Magenta-Aura */
.cards .card:nth-child(even) .card-icon {
  border-color: rgba(180,42,110,.5);
  background: linear-gradient(135deg, var(--magenta-soft), #fff);
  box-shadow: 0 0 18px rgba(180,42,110,.2);
}
.cards .card:nth-child(odd) .card-icon {
  box-shadow: 0 0 18px rgba(198,163,90,.25);
}

/* Listen: jede zweite Pfote/Funke in Magenta */
.check-list li:nth-child(even)::before { color: var(--magenta); }

/* Phasen: 02 leuchtet magenta */
.phase:nth-of-type(even) .phase-num {
  color: var(--magenta); border-color: rgba(180,42,110,.45);
  background: radial-gradient(circle, rgba(180,42,110,.08), transparent 70%);
}

/* Steps: Nummern mit Gold-Magenta-Verlauf */
.step::before {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, #cf3f85);
  color: #fff;
}

/* Badges: jede zweite in Magenta */
.badge-row .badge:nth-child(even) {
  border-color: rgba(180,42,110,.45); color: var(--magenta);
  background: var(--magenta-soft);
}
.section-dark .badge-row .badge:nth-child(even) {
  border-color: rgba(232,123,178,.55); color: #f3a9cd; background: rgba(180,42,110,.18);
}

/* Ornament-Trenner: Mitte magenta angehaucht */
.ornament {
  background: linear-gradient(90deg, var(--gold-deep), var(--magenta) 50%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-dark .ornament, .hero .ornament {
  background: linear-gradient(90deg, var(--gold-light), #f3a9cd 50%, var(--gold-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hero: kräftigerer Magenta-Schleier */
.hero {
  background:
    radial-gradient(ellipse at 75% 20%, rgba(198,163,90,.22), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(180,42,110,.28), transparent 52%),
    radial-gradient(ellipse at 95% 90%, rgba(207,63,133,.16), transparent 45%),
    linear-gradient(160deg, var(--green-deep) 0%, var(--green) 55%, #0a241b 100%);
}

/* Helle Sektionen: zarter Magenta-Hauch */
.section-mist {
  background:
    radial-gradient(ellipse 700px 380px at 95% 8%, rgba(180,42,110,.10), transparent 60%),
    radial-gradient(ellipse 600px 350px at 2% 95%, rgba(198,163,90,.12), transparent 60%),
    var(--green-mist);
}

/* Pfotenspur leicht magenta schimmern lassen */
.pawtrail { color: #e87bb2; opacity: .18; }

/* Footer-Herzschlag */
.footer-bottom { color: rgba(232,123,178,.55); }

/* Mystic-Card (grün) bekommt magenta Lichtkante */
.mystic-card { box-shadow: 0 24px 60px rgba(13,47,36,.35), 0 0 40px rgba(180,42,110,.12); }

/* Hero-Badge mit Magenta-Schimmer */
.hero-badge { box-shadow: 0 0 26px rgba(180,42,110,.25); }

/* CTA-Band: magenta Aurora dazu */
.cta-band {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(198,163,90,.25), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(207,63,133,.3), transparent 50%),
    linear-gradient(135deg, var(--green-deep), var(--green));
}

/* Preis: Zahl mit Magenta-Akzent */
.price-card.featured .amount { color: var(--magenta); }
.price-card.featured { border-color: rgba(180,42,110,.5); box-shadow: 0 18px 50px rgba(180,42,110,.18); }

/* Portal: Icons abwechselnd magenta */
.portal-links li:nth-child(even) .pl-icon { filter: hue-rotate(300deg); }

/* ============================================================
   ELEMENT-FARBEN · Erde, Wasser, Feuer, Luft durch die ganze Seite
   ============================================================ */
:root {
  --el-erde:   #40916c;
  --el-wasser: #2aa5a0;
  --el-feuer:  #d4498d;
  --el-luft:   #8d99d6;
}

/* Karten zyklisch in Element-Farben: Rand + Icon-Aura */
.cards .card:nth-child(4n+1) { border-color: rgba(64,145,108,.45);
  background: radial-gradient(circle at 85% -10%, rgba(64,145,108,.16), transparent 55%), var(--white); }
.cards .card:nth-child(4n+2) { border-color: rgba(42,165,160,.45);
  background: radial-gradient(circle at 85% -10%, rgba(42,165,160,.16), transparent 55%), var(--white); }
.cards .card:nth-child(4n+3) { border-color: rgba(212,73,141,.45);
  background: radial-gradient(circle at 85% -10%, rgba(212,73,141,.14), transparent 55%), var(--white); }
.cards .card:nth-child(4n+4) { border-color: rgba(141,153,214,.55);
  background: radial-gradient(circle at 85% -10%, rgba(141,153,214,.18), transparent 55%), var(--white); }

.cards .card:nth-child(4n+1) .card-icon { border-color: var(--el-erde);   box-shadow: 0 0 18px rgba(64,145,108,.35); background: linear-gradient(135deg, #e3f1e9, #fff); }
.cards .card:nth-child(4n+2) .card-icon { border-color: var(--el-wasser); box-shadow: 0 0 18px rgba(42,165,160,.35); background: linear-gradient(135deg, #e0f4f3, #fff); }
.cards .card:nth-child(4n+3) .card-icon { border-color: var(--el-feuer);  box-shadow: 0 0 18px rgba(212,73,141,.35); background: linear-gradient(135deg, #fbe6f0, #fff); }
.cards .card:nth-child(4n+4) .card-icon { border-color: var(--el-luft);   box-shadow: 0 0 18px rgba(141,153,214,.4);  background: linear-gradient(135deg, #eceefb, #fff); }

/* Listenpunkte wandern durch die Elemente */
.check-list li:nth-child(4n+1)::before { color: var(--el-erde); }
.check-list li:nth-child(4n+2)::before { color: var(--el-wasser); }
.check-list li:nth-child(4n+3)::before { color: var(--el-feuer); }
.check-list li:nth-child(4n+4)::before { color: var(--el-luft); }

/* Phasen 01/02/03 = Erde / Feuer / Wasser */
.phase:nth-of-type(1) .phase-num { color: var(--el-erde);   border-color: rgba(64,145,108,.5);  background: radial-gradient(circle, rgba(64,145,108,.1), transparent 70%); }
.phase:nth-of-type(2) .phase-num { color: var(--el-feuer);  border-color: rgba(212,73,141,.5);  background: radial-gradient(circle, rgba(212,73,141,.1), transparent 70%); }
.phase:nth-of-type(3) .phase-num { color: var(--el-wasser); border-color: rgba(42,165,160,.5);  background: radial-gradient(circle, rgba(42,165,160,.1), transparent 70%); }

/* Steps: Nummern in Element-Verläufen */
.steps .step:nth-child(4n+1)::before { background: linear-gradient(135deg, #74c69d, var(--el-erde)); color: #fff; }
.steps .step:nth-child(4n+2)::before { background: linear-gradient(135deg, #6fd1cc, var(--el-wasser)); color: #fff; }
.steps .step:nth-child(4n+3)::before { background: linear-gradient(135deg, #e87bb2, var(--el-feuer)); color: #fff; }
.steps .step:nth-child(4n+4)::before { background: linear-gradient(135deg, #b3bce8, var(--el-luft)); color: #fff; }

/* Badges in Element-Farben */
.badge-row .badge:nth-child(4n+1) { border-color: rgba(64,145,108,.5);  color: #2d6a4f; background: #eaf4ee; }
.badge-row .badge:nth-child(4n+2) { border-color: rgba(42,165,160,.5);  color: #14746f; background: #e4f4f3; }
.badge-row .badge:nth-child(4n+3) { border-color: rgba(212,73,141,.5);  color: #ad2160; background: #fbe9f2; }
.badge-row .badge:nth-child(4n+4) { border-color: rgba(141,153,214,.6); color: #3d4a8a; background: #edeffb; }
.section-dark .badge-row .badge:nth-child(4n+1) { color: #9ed8bb; background: rgba(64,145,108,.18); }
.section-dark .badge-row .badge:nth-child(4n+2) { color: #8fe0dc; background: rgba(42,165,160,.18); }
.section-dark .badge-row .badge:nth-child(4n+3) { color: #f3a9cd; background: rgba(212,73,141,.18); }
.section-dark .badge-row .badge:nth-child(4n+4) { color: #c3cbf2; background: rgba(141,153,214,.2); }

/* Goldlinie: Element-Schimmer */
.goldline {
  background: linear-gradient(90deg, var(--el-erde), var(--el-wasser) 30%, var(--gold) 55%, var(--el-feuer) 80%, var(--el-luft));
}

/* Hero & CTA-Band: alle vier Elemente als Aurora */
.hero {
  background:
    radial-gradient(ellipse at 75% 15%, rgba(198,163,90,.2), transparent 50%),
    radial-gradient(ellipse at 12% 80%, rgba(212,73,141,.26), transparent 50%),
    radial-gradient(ellipse at 92% 85%, rgba(42,165,160,.22), transparent 45%),
    radial-gradient(ellipse at 40% 110%, rgba(141,153,214,.18), transparent 45%),
    linear-gradient(160deg, var(--green-deep) 0%, var(--green) 55%, #0a241b 100%);
}
.cta-band {
  background:
    radial-gradient(ellipse at 15% 25%, rgba(42,165,160,.28), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(212,73,141,.3), transparent 50%),
    radial-gradient(ellipse at 55% 0%, rgba(141,153,214,.2), transparent 45%),
    linear-gradient(135deg, var(--green-deep), var(--green));
}

/* Helle Sektionen: zarte Element-Wolken */
.section-soft {
  background:
    radial-gradient(ellipse 750px 380px at 92% 5%, rgba(42,165,160,.12), transparent 60%),
    radial-gradient(ellipse 650px 380px at 5% 90%, rgba(212,73,141,.10), transparent 60%),
    radial-gradient(ellipse 500px 300px at 50% 110%, rgba(141,153,214,.10), transparent 60%),
    linear-gradient(170deg, #fdfbf5, #f4eee0);
}
.section-mist {
  background:
    radial-gradient(ellipse 700px 380px at 95% 8%, rgba(212,73,141,.09), transparent 60%),
    radial-gradient(ellipse 600px 350px at 2% 95%, rgba(42,165,160,.12), transparent 60%),
    radial-gradient(ellipse 500px 320px at 55% -10%, rgba(141,153,214,.08), transparent 60%),
    var(--green-mist);
}

/* Sterne funkeln in allen Elementfarben */
.star:nth-of-type(3n) { color: #8fe0dc; }
.star:nth-of-type(4n) { color: #c3cbf2; }

/* Mystic-Cards: Wasser- & Luft-Schimmer */
.mystic-card { border-color: rgba(42,165,160,.45); }
.mystic-card.rose { border-color: rgba(141,153,214,.5); }

/* Eyebrows wechseln pro Sektion durch die Elemente */
section:nth-of-type(4n+1) .eyebrow { color: var(--el-feuer); }
section:nth-of-type(4n+2) .eyebrow { color: #14746f; }
section:nth-of-type(4n+3) .eyebrow { color: #3d4a8a; }
section:nth-of-type(4n+4) .eyebrow { color: #2d6a4f; }
section .eyebrow.on-dark { color: #f3a9cd; }

/* Whisper-Zeilen in Wasser-Türkis */
.whisper { color: #14746f; }

/* Preis-Raten-Karte in Wasser-Türkis */
.price-card:not(.featured) { border-color: rgba(42,165,160,.45); }
.price-card:not(.featured) .amount { color: #14746f; }

/* Guarantee: Luft-Lavendel-Hauch */
.guarantee {
  background: linear-gradient(135deg, var(--magenta-soft), #edeffb 80%, #fff);
  border-color: rgba(141,153,214,.4);
}

/* Footer-Zeile: besser lesbar */
.footer-bottom { color: rgba(250,247,240,.8); }
.footer-bottom a { color: var(--gold-light); }

/* ---------- Fotos ---------- */
figure.photo-frame{
  margin:0; border-radius:var(--radius); overflow:hidden; min-height:320px;
  box-shadow:0 18px 50px rgba(0,0,0,.16); border:1px solid rgba(198,163,90,.4);
  background:linear-gradient(150deg,var(--green-mist),#dfe9e1);
}
figure.photo-frame img{ width:100%; height:100%; min-height:320px; object-fit:cover; display:block; }
.hero-cutout{
  display:block; margin:2.6rem auto 0; max-height:430px; width:auto;
  filter:drop-shadow(0 20px 42px rgba(0,0,0,.5));
}
@media(max-width:880px){ .hero-cutout{ max-height:330px; } figure.photo-frame,figure.photo-frame img{ min-height:260px; } }

/* Hero mit Foto-Hintergrund (Startseite) */
.hero.hero-photo{
  background:
    linear-gradient(160deg, rgba(11,47,36,.86), rgba(13,55,42,.74) 50%, rgba(10,36,27,.92)),
    url('img/hero-dogs.jpg');
  background-size: cover, cover;
  background-position: center, center 20%;
  background-repeat: no-repeat, no-repeat;
}

/* ============ Shamanic / Quantum Animationen ============ */
@media (prefers-reduced-motion: no-preference){

  /* Sanfte Aura, die langsam durch den Hero driftet */
  .hero{ position:relative; }
  .hero::before{
    content:""; position:absolute; inset:-15%; z-index:0; pointer-events:none;
    background:
      radial-gradient(38% 38% at 22% 28%, rgba(198,163,90,.20), transparent 60%),
      radial-gradient(34% 34% at 80% 72%, rgba(180,42,110,.18), transparent 60%),
      radial-gradient(30% 30% at 60% 18%, rgba(120,200,170,.12), transparent 60%);
    filter: blur(8px);
    animation: auraDrift 22s ease-in-out infinite alternate;
  }
  @keyframes auraDrift{
    0%{ transform:translate3d(0,0,0) scale(1); opacity:.85; }
    50%{ transform:translate3d(2.5%, -2%, 0) scale(1.08); opacity:1; }
    100%{ transform:translate3d(-2%, 2.5%, 0) scale(1.04); opacity:.9; }
  }
  /* Inhalt immer über Aura + Partikel */
  .hero > *{ position:relative; z-index:2; }
  .hero canvas.fx-quantum{ position:absolute; inset:0; z-index:1; pointer-events:none; }

  /* Goldlinie mit wanderndem Schimmer */
  .goldline{ position:relative; overflow:hidden; }
  .goldline::after{
    content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,245,220,.9), transparent);
    animation: sheen 6s ease-in-out infinite;
  }
  @keyframes sheen{ 0%{left:-45%} 55%{left:115%} 100%{left:115%} }

  /* Mystische Symbole atmen sanft */
  .big-symbol{ animation: breathe 6s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{ transform:translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(198,163,90,0)); }
    50%{ transform:translateY(-6px) scale(1.05); filter:drop-shadow(0 6px 18px rgba(198,163,90,.35)); } }

  /* Karten schweben beim Hover leicht auf */
  .mystic-card, .card{ transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
  .mystic-card:hover, .card:hover{ transform:translateY(-6px); box-shadow:0 22px 60px rgba(13,55,42,.18); }
}

/* ===== Hero: bessere Lesbarkeit + zentrierter Claim ===== */
.hero.hero-photo{
  background:
    radial-gradient(58% 60% at 50% 44%, rgba(5,24,17,.60), transparent 72%),
    linear-gradient(160deg, rgba(10,40,30,.90), rgba(11,47,36,.82) 50%, rgba(8,30,22,.95)),
    url('img/hero-dogs.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 20%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.hero h1, .hero .lead, .hero .hero-badge, .hero .whisper, .hero .hero-note, .hero .ornament{
  text-shadow: 0 2px 16px rgba(0,0,0,.55);
}
.hero{ text-align:center; }
.hero .hero-badge{ margin-left:auto; margin-right:auto; }

/* ===== Hero v2: kein Grün, keine Sterne, Claim mittig ===== */
.hero.hero-photo{
  background:
    radial-gradient(60% 62% at 50% 42%, rgba(8,6,10,.50), transparent 72%),
    linear-gradient(165deg, rgba(28,21,26,.82), rgba(18,14,18,.90) 55%, rgba(10,8,12,.95)),
    url('img/hero-dogs.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 22%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.hero .star, .hero .pawtrail, .hero .ornament{ display:none !important; }
.hero::before{ display:none !important; }
.hero .hero-badge{ display:block; width:max-content; max-width:92%; margin:0 auto 1.6rem auto; }

/* ===== Happy Hundebesitzer (Testimonials) ===== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem; text-align:left; }
@media(max-width:880px){ .testi-grid{ grid-template-columns:1fr; } }
.testi{ margin:0; background:#fff; border:1px solid rgba(198,163,90,.35); border-radius:18px;
  padding:1.7rem 1.6rem; box-shadow:0 14px 38px rgba(13,55,42,.08); position:relative; }
.testi::before{ content:"\201C"; font-family:Georgia,serif; font-size:3.2rem; line-height:1;
  color:rgba(198,163,90,.45); position:absolute; top:.6rem; left:1rem; }
.testi blockquote{ margin:0; padding-top:1.2rem; font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic; font-size:1.16rem; line-height:1.55; color:#2a2a2a; }
.testi figcaption{ margin-top:1rem; font-weight:500; letter-spacing:.02em; color:#7A4A52; }

/* ===== Hero v3: helleres Overlay, Hunde-Augen sichtbar ===== */
.hero.hero-photo{
  background:
    radial-gradient(70% 72% at 50% 46%, rgba(8,5,10,.55), rgba(8,5,10,.16) 66%, transparent 100%),
    linear-gradient(180deg, rgba(14,11,16,.42), rgba(12,10,14,.50)),
    url('img/hero-dogs.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center 20%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.hero h1, .hero .lead, .hero .hero-badge, .hero .whisper, .hero .hero-note{
  text-shadow: 0 2px 18px rgba(0,0,0,.62), 0 1px 3px rgba(0,0,0,.5);
}

/* ===== Social-Icons im Footer ===== */
.social{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin:.4rem 0 1.4rem; }
.social a{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(198,163,90,.55); border-radius:50%; color:var(--gold-light); transition:all .3s ease; }
.social a:hover{ background:var(--gold-light); color:#0d2f24; transform:translateY(-3px); box-shadow:0 8px 20px rgba(198,163,90,.3); }
.social svg{ width:20px; height:20px; display:block; }

/* ===== Claim-Badge: pulsieren, leuchten, pop ===== */
@media (prefers-reduced-motion: no-preference){
  .hero .hero-badge{ position:relative; overflow:hidden; animation: badgePulse 2.8s ease-in-out infinite; }
  @keyframes badgePulse{
    0%,100%{ box-shadow:0 0 14px rgba(214,182,110,.25); transform:scale(1); border-color:rgba(214,182,110,.55); }
    50%{ box-shadow:0 0 28px rgba(214,182,110,.6), 0 0 54px rgba(180,42,110,.3); transform:scale(1.04); border-color:rgba(214,182,110,1); }
  }
  .hero .hero-badge::after{
    content:""; position:absolute; top:0; left:-65%; width:50%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,250,238,.75), transparent);
    transform:skewX(-18deg); animation: badgeShine 3.8s ease-in-out infinite; pointer-events:none;
  }
  @keyframes badgeShine{ 0%{left:-65%} 55%{left:130%} 100%{left:130%} }
  .hero .hero-badge .floaty{ animation: badgeMoon 2.8s ease-in-out infinite; }
  @keyframes badgeMoon{ 0%,100%{opacity:.7} 50%{opacity:1; text-shadow:0 0 10px rgba(214,182,110,.9)} }
}