/* ==========================================================
   Ja'Dore – Herbst-Dekoration (saisonal, rein visuell)
   Entfernen: <link> zu herbst.css und <script> herbst.js löschen.
   Verändert keine Inhalte, Texte, Links oder Funktionen.
   ========================================================== */

/* ---------- 1. Hero: warme Atmosphäre + 2 Blätter ---------- */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* über Video/Overlay, unter Inhalt (2) und Info-Leiste (3) */
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 144'%3E%3Cg transform='translate(70.0 72.0) rotate(28) translate(-50.0 -55.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C46A43'/%3E%3Cstop offset='.6' stop-color='%239E3F37'/%3E%3Cstop offset='1' stop-color='%237A2E35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4Q53 14 56 22Q61 18 66 15Q65 25 63 34Q72 29 81 25Q78 34 74 42Q84 42 94 45Q86 51 78 56Q82 61 84 67Q74 66 64 64Q65 70 66 77Q60 72 53 68L51 84L49 84L47 68Q40 72 34 77Q35 70 36 64Q26 66 16 67Q18 61 22 56Q14 51 6 45Q16 42 26 42Q22 34 19 25Q28 29 37 34Q35 25 34 15Q39 18 44 22Q47 14 50 4Z' fill='url(%23g)' stroke='url(%23g)' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M50 84Q50 96 47 106M50 80L50 14M50 62L24 46M50 62L76 46M50 62L36 26M50 62L64 26' stroke='%23E9C08F' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") no-repeat left -46px top 21% / 150px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 153 156'%3E%3Cg transform='translate(76.3 78.1) rotate(-38) scale(-1 1) translate(-50.0 -60.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E2B66E'/%3E%3Cstop offset='.55' stop-color='%23C98A4B'/%3E%3Cstop offset='1' stop-color='%23A9542F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4C80 26 88 66 52 104C14 68 18 28 50 4Z' fill='url(%23g)'/%3E%3Cpath d='M51 104L53 118M50 8C51 40 52 72 52 104' stroke='%238A4A2A' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M50 30L66 22M50 30L35 23M51 46L72 37M51 46L30 39M51 62L74 54M51 62L28 56M52 78L70 72M52 78L32 73' stroke='%23F4DDB0' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -34px bottom 128px / 118px auto,
    radial-gradient(ellipse 55% 45% at 0% 8%, rgba(201, 138, 75, .20), transparent 70%),
    radial-gradient(ellipse 45% 40% at 100% 92%, rgba(122, 46, 53, .16), transparent 70%);
  opacity: .92;
}

/* ---------- 2. Langsam fallende Blätter (Container via herbst.js) ---------- */
.jd-fall {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.jd-fall__leaf {
  position: absolute;
  top: -70px;
  left: var(--x, 50%);
  width: var(--s, 30px);
  height: var(--s, 30px);
  opacity: 0;
  animation: jd-fall var(--d, 22s) linear var(--delay, 4s) infinite;
  will-change: transform, opacity;
}
.jd-fall__leaf i {
  display: block;
  width: 100%;
  height: 100%;
  background: no-repeat center / contain;
  animation: jd-sway var(--sw, 6s) ease-in-out infinite alternate;
}
.jd-fall__leaf--maple i  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C46A43'/%3E%3Cstop offset='.6' stop-color='%239E3F37'/%3E%3Cstop offset='1' stop-color='%237A2E35'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4Q53 14 56 22Q61 18 66 15Q65 25 63 34Q72 29 81 25Q78 34 74 42Q84 42 94 45Q86 51 78 56Q82 61 84 67Q74 66 64 64Q65 70 66 77Q60 72 53 68L51 84L49 84L47 68Q40 72 34 77Q35 70 36 64Q26 66 16 67Q18 61 22 56Q14 51 6 45Q16 42 26 42Q22 34 19 25Q28 29 37 34Q35 25 34 15Q39 18 44 22Q47 14 50 4Z' fill='url(%23g)' stroke='url(%23g)' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M50 84Q50 96 47 106M50 80L50 14M50 62L24 46M50 62L76 46M50 62L36 26M50 62L64 26' stroke='%23E9C08F' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); }
.jd-fall__leaf--beech i  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E2B66E'/%3E%3Cstop offset='.55' stop-color='%23C98A4B'/%3E%3Cstop offset='1' stop-color='%23A9542F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4C80 26 88 66 52 104C14 68 18 28 50 4Z' fill='url(%23g)'/%3E%3Cpath d='M51 104L53 118M50 8C51 40 52 72 52 104' stroke='%238A4A2A' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M50 30L66 22M50 30L35 23M51 46L72 37M51 46L30 39M51 62L74 54M51 62L28 56M52 78L70 72M52 78L32 73' stroke='%23F4DDB0' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); }
.jd-fall__leaf--ginkgo i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 110'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23EBCB86'/%3E%3Cstop offset='1' stop-color='%23C79A52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 62C30 60 8 44 5 18C20 8 37 11 47 21L50 30L53 21C63 11 80 8 95 18C92 44 70 60 50 62Z' fill='url(%23g)'/%3E%3Cpath d='M50 62Q51 84 46 106' stroke='%23A77B3E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 60L14 22M50 60L26 16M50 60L40 18M50 60L60 18M50 60L74 16M50 60L86 22' stroke='%23FFF3D6' stroke-width='.8' fill='none' opacity='.45'/%3E%3C/svg%3E"); }
.jd-fall__leaf--oak i    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 130'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23D7B184'/%3E%3Cstop offset='.6' stop-color='%23A97446'/%3E%3Cstop offset='1' stop-color='%237D5232'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 4C50 4 54 12 50 20C60 18 64 28 56 34C68 34 70 46 60 50C72 52 72 66 60 68C70 72 68 86 56 86C62 94 56 104 46 100L42 112L38 112L34 100C24 104 18 94 24 86C12 86 10 72 20 68C8 66 8 52 20 50C10 46 12 34 24 34C16 28 20 18 30 20C26 12 30 4 40 4Z' fill='url(%23g)'/%3E%3Cpath d='M40 10L40 126M40 34L52 28M40 34L28 28M40 52L58 46M40 52L22 46M40 70L58 66M40 70L22 66M40 88L52 86M40 88L28 86' stroke='%23F1DDBE' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); }
.jd-fall.is-paused .jd-fall__leaf,
.jd-fall.is-paused .jd-fall__leaf i { animation-play-state: paused; }

@keyframes jd-fall {
  0%   { transform: translate3d(0, 0, 0);          opacity: 0; }
  8%   { opacity: .8; }
  85%  { opacity: .7; }
  100% { transform: translate3d(var(--dx, 60px), 105vh, 0); opacity: 0; }
}
@keyframes jd-sway {
  0%   { transform: translateX(-14px) rotate(-22deg); }
  100% { transform: translateX(14px)  rotate(28deg); }
}

/* ---------- 3. Strategische Details in einzelnen Sektionen ---------- */
#angebot, #wimpern, #massage, #kontakt {
  position: relative;   /* nur Bezugsrahmen für die Deko, kein Layout-Effekt */
  isolation: isolate;   /* Deko liegt hinter dem Inhalt */
}
#angebot::before, #wimpern::before, #massage::before,
#kontakt::before, #kontakt::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* Angebot: Eichenblatt, am rechten Rand angeschnitten */
#angebot::before {
  top: 120px; right: 0;
  width: 70px; height: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 126 151'%3E%3Cg transform='translate(63.0 75.6) rotate(-24) translate(-40.0 -65.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23D7B184'/%3E%3Cstop offset='.6' stop-color='%23A97446'/%3E%3Cstop offset='1' stop-color='%237D5232'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 4C50 4 54 12 50 20C60 18 64 28 56 34C68 34 70 46 60 50C72 52 72 66 60 68C70 72 68 86 56 86C62 94 56 104 46 100L42 112L38 112L34 100C24 104 18 94 24 86C12 86 10 72 20 68C8 66 8 52 20 50C10 46 12 34 24 34C16 28 20 18 30 20C26 12 30 4 40 4Z' fill='url(%23g)'/%3E%3Cpath d='M40 10L40 126M40 34L52 28M40 34L28 28M40 52L58 46M40 52L22 46M40 70L58 66M40 70L22 66M40 88L52 86M40 88L28 86' stroke='%23F1DDBE' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 130px auto;
  background-position: left -30px top 0;
  opacity: .62;
}

/* Wimpern & Augenbrauen: Buchenblatt am linken Rand */
#wimpern::before {
  top: 38%; left: 0;
  width: 66px; height: 170px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 148 155'%3E%3Cg transform='translate(74.2 77.4) rotate(32) translate(-50.0 -60.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E2B66E'/%3E%3Cstop offset='.55' stop-color='%23C98A4B'/%3E%3Cstop offset='1' stop-color='%23A9542F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4C80 26 88 66 52 104C14 68 18 28 50 4Z' fill='url(%23g)'/%3E%3Cpath d='M51 104L53 118M50 8C51 40 52 72 52 104' stroke='%238A4A2A' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M50 30L66 22M50 30L35 23M51 46L72 37M51 46L30 39M51 62L74 54M51 62L28 56M52 78L70 72M52 78L32 73' stroke='%23F4DDB0' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px auto;
  background-position: right -34px top 0;
  opacity: .55;
}

/* Massagesessel (dunkle Sektion): goldenes Ginkgoblatt unten rechts */
#massage::before {
  bottom: 40px; right: 0;
  width: 70px; height: 140px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 136'%3E%3Cg transform='translate(64.5 67.8) rotate(-18) translate(-50.0 -55.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23EBCB86'/%3E%3Cstop offset='1' stop-color='%23C79A52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 62C30 60 8 44 5 18C20 8 37 11 47 21L50 30L53 21C63 11 80 8 95 18C92 44 70 60 50 62Z' fill='url(%23g)'/%3E%3Cpath d='M50 62Q51 84 46 106' stroke='%23A77B3E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 60L14 22M50 60L26 16M50 60L40 18M50 60L60 18M50 60L74 16M50 60L86 22' stroke='%23FFF3D6' stroke-width='.8' fill='none' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px auto;
  background-position: left -26px top 0;
  opacity: .75;
}

/* Kontakt: kleines Blätterpaar unten links */
#kontakt::before {
  bottom: 30px; left: 0;
  width: 60px; height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 147 154'%3E%3Cg transform='translate(73.3 77.0) rotate(-30) scale(-1 1) translate(-50.0 -60.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E2B66E'/%3E%3Cstop offset='.55' stop-color='%23C98A4B'/%3E%3Cstop offset='1' stop-color='%23A9542F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 4C80 26 88 66 52 104C14 68 18 28 50 4Z' fill='url(%23g)'/%3E%3Cpath d='M51 104L53 118M50 8C51 40 52 72 52 104' stroke='%238A4A2A' stroke-width='1.6' fill='none' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M50 30L66 22M50 30L35 23M51 46L72 37M51 46L30 39M51 62L74 54M51 62L28 56M52 78L70 72M52 78L32 73' stroke='%23F4DDB0' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 110px auto;
  background-position: right -40px bottom 0;
  opacity: .5;
}
#kontakt::after {
  bottom: 118px; left: 0;
  width: 34px; height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 147 149'%3E%3Cg transform='translate(73.7 74.3) rotate(40) translate(-50.0 -55.0)'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23EBCB86'/%3E%3Cstop offset='1' stop-color='%23C79A52'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 62C30 60 8 44 5 18C20 8 37 11 47 21L50 30L53 21C63 11 80 8 95 18C92 44 70 60 50 62Z' fill='url(%23g)'/%3E%3Cpath d='M50 62Q51 84 46 106' stroke='%23A77B3E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 60L14 22M50 60L26 16M50 60L40 18M50 60L60 18M50 60L74 16M50 60L86 22' stroke='%23FFF3D6' stroke-width='.8' fill='none' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px auto;
  background-position: right -12px bottom 0;
  opacity: .5;
}

/* ---------- 4. Responsive ---------- */
@media (max-width: 1024px) {
  #hero::after {
    background-size: 118px auto, 92px auto, auto, auto;
    background-position: left -40px top 20%, right -28px bottom 120px, 0 0, 0 0;
  }
  #angebot::before { width: 54px; background-size: 100px auto; background-position: left -24px top 0; }
  #wimpern::before { width: 50px; background-size: 98px auto; background-position: right -26px top 0; }
  #massage::before { width: 54px; background-size: 92px auto; background-position: left -20px top 0; }
  #kontakt::before { width: 46px; background-size: 84px auto; background-position: right -30px bottom 0; }
  #kontakt::after  { display: none; }
}

@media (max-width: 768px) {
  /* Mobile: deutlich reduziert – nur ein Blatt im Hero + ein Detail */
  #hero::after {
    background-size: 78px auto, 0 0, auto, 0 0;
    background-position: left -36px top 88px, 0 0, 0 0, 0 0;
  }
  #angebot::before { top: 84px; width: 40px; height: 110px; background-size: 78px auto; background-position: left -18px top 0; opacity: .5; }
  #wimpern::before, #massage::before, #kontakt::before { display: none; }
  .jd-fall__leaf:nth-child(n+3) { display: none; }
}

/* ---------- 5. Barrierefreiheit: keine Bewegung bei reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .jd-fall { display: none; }
}

/* Druckansicht ohne Deko */
@media print {
  #hero::after, .jd-fall,
  #angebot::before, #wimpern::before, #massage::before,
  #kontakt::before, #kontakt::after { display: none !important; }
}