/* ==========================================================================
   Japanische Motive — dezent · SVG-only · performant
   ========================================================================== */

:root {
  /* Pattern-Tiles (inline SVG) */
  --motif-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath fill='none' stroke='%23ff5500' stroke-width='0.75' d='M0 24Q12 4 24 24Q36 4 48 24'/%3E%3Cpath fill='none' stroke='%23ff5500' stroke-width='0.75' d='M0 12Q12-8 24 12Q36-8 48 12'/%3E%3C/svg%3E");
  --motif-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23a68b4b' stroke-width='0.55'%3E%3Cpath d='M16 2L30 16L16 30L2 16Z'/%3E%3Cpath d='M16 2v28M2 16h28M5 5l22 22M27 5L5 27'/%3E%3C/g%3E%3C/svg%3E");
  --motif-shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%232e2e2e' stroke-width='0.5'/%3E%3Ccircle cx='0' cy='14' r='11' fill='none' stroke='%232e2e2e' stroke-width='0.5'/%3E%3Ccircle cx='28' cy='14' r='11' fill='none' stroke='%232e2e2e' stroke-width='0.5'/%3E%3Ccircle cx='14' cy='0' r='11' fill='none' stroke='%232e2e2e' stroke-width='0.5'/%3E%3Ccircle cx='14' cy='28' r='11' fill='none' stroke='%232e2e2e' stroke-width='0.5'/%3E%3C/svg%3E");
  --motif-brush-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 120' preserveAspectRatio='none'%3E%3Cpath d='M5 0Q8 28 6 58Q3 88 5 120Q2 88 4 58Q7 28 5 0Z' fill='%23000'/%3E%3C/svg%3E");
  --motif-gold: #a68b4b;
  --motif-pattern-opacity: 0.05;
}

/* Sektions-Hintergründe */
.section--pattern {
  position: relative;
  isolation: isolate;
}

.section--pattern > .container {
  position: relative;
  z-index: 1;
}

.section--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--motif-pattern-opacity);
}

#judo.section--pattern::before {
  background-image: var(--motif-seigaiha);
  background-size: 52px 26px;
  background-repeat: repeat;
}

#verein.section--pattern::before {
  background-image: var(--motif-asanoha);
  background-size: 34px 34px;
  background-repeat: repeat;
  opacity: 0.05;
}

#kontakt.section--pattern::before {
  background-image: var(--motif-shippo);
  background-size: 30px 30px;
  background-repeat: repeat;
  opacity: 0.04;
}

@media (max-width: 47.99rem) {
  #judo.section--pattern::before {
    background-size: 70px 35px;
    opacity: 0.045;
  }

  #verein.section--pattern::before {
    background-size: 46px 46px;
    opacity: 0.04;
  }

  #kontakt.section--pattern::before {
    background-size: 40px 40px;
    opacity: 0.035;
  }
}

/* Hero-Deko: siehe css/hero.css — Desktop-Enso-Größe */
@media (min-width: 43.76rem) and (max-width: 63.99rem) {
  .hero-landing__enso {
    top: 2%;
    right: -12%;
    width: min(70vw, 32rem);
    height: min(70vw, 32rem);
    opacity: 0.55;
  }
}

@media (min-width: 64rem) {
  .hero-landing__enso {
    top: 4%;
    right: 2%;
    width: min(36vw, 22rem);
    height: min(36vw, 22rem);
    opacity: 0.5;
  }
}

/* ==========================================================================
   Sektions-Trenner
   ========================================================================== */
.section-ornament {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-md) 0;
  background: transparent;
  pointer-events: none;
}

.section-ornament svg {
  display: block;
  width: auto;
  height: clamp(1.25rem, 3vw, 2.5rem);
  max-height: 40px;
  color: var(--motif-gold);
  opacity: 0.55;
}

.section-ornament--cream {
  background: var(--cream);
}

.section-ornament--white {
  background: var(--white);
}

.section-ornament--grey {
  background: var(--grey-bg);
}

/* ==========================================================================
   Buttons — Tusche-Spritzer beim Hover
   ========================================================================== */
.btn-primary {
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow 0.35s var(--ease);
}

@media (hover: hover) {
  .btn-primary:hover {
    box-shadow:
      0 4px 20px var(--accent-glow),
      0 0 0 1px rgba(255, 85, 0, 0.12),
      0 0 28px 10px rgba(255, 85, 0, 0.18);
  }

  .btn-ghost:hover,
  .btn-outline:hover {
    box-shadow:
      0 2px 12px rgba(46, 46, 46, 0.06),
      0 0 20px 6px rgba(255, 85, 0, 0.08);
  }
}

/* ==========================================================================
   Dark Mode — angepasste Motiv-Farben
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --motif-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'%3E%3Cpath fill='none' stroke='%23ff7a3d' stroke-width='0.75' d='M0 24Q12 4 24 24Q36 4 48 24'/%3E%3Cpath fill='none' stroke='%23ff7a3d' stroke-width='0.75' d='M0 12Q12-8 24 12Q36-8 48 12'/%3E%3C/svg%3E");
    --motif-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23c9b896' stroke-width='0.55'%3E%3Cpath d='M16 2L30 16L16 30L2 16Z'/%3E%3Cpath d='M16 2v28M2 16h28M5 5l22 22M27 5L5 27'/%3E%3C/g%3E%3C/svg%3E");
    --motif-shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%23e8e4dc' stroke-width='0.45'/%3E%3Ccircle cx='0' cy='14' r='11' fill='none' stroke='%23e8e4dc' stroke-width='0.45'/%3E%3Ccircle cx='28' cy='14' r='11' fill='none' stroke='%23e8e4dc' stroke-width='0.45'/%3E%3Ccircle cx='14' cy='0' r='11' fill='none' stroke='%23e8e4dc' stroke-width='0.45'/%3E%3Ccircle cx='14' cy='28' r='11' fill='none' stroke='%23e8e4dc' stroke-width='0.45'/%3E%3C/svg%3E");
    --motif-gold: #c9b896;
  }

  .hero-landing__kanji-bg {
    -webkit-text-stroke-color: rgba(232, 228, 220, 0.2);
  }

  .hero-landing__dojo-vertical {
    color: #f5f2eb;
    opacity: 0.35;
  }

  .section-ornament svg {
    color: var(--motif-gold);
    opacity: 0.45;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-landing__enso-path {
    animation: none;
    stroke-dashoffset: 95;
  }

  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-outline:hover {
    box-shadow: 0 4px 20px var(--accent-glow);
  }
}