/* ============================================================================
   decor.css – dezente Deko-Motive in farbigen Sektionen.
   ::before = locker gestreute Icons (Higgsfield, freigestellt & getönt)
   ::after  = feines, wiederholbares SVG-Pattern (nur an wenigen Stellen)
   Rein dekorativ; Inhalte liegen darüber (z-index). Footer bleibt bewusst clean.
   ========================================================================== */

/* Positionskontext + Inhalt über der Deko */
.section--paper2,
.section--wood,
.section--korn { position: relative; isolation: isolate; }
.section--paper2 > *,
.section--wood > *,
.section--korn > * { position: relative; z-index: 1; }

/* Gemeinsame Basis der Streu-Ebene */
.section--paper2::before,
.section--wood::before,
.section--korn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; background-repeat: no-repeat;
}

/* --- Helle Sektionen: braune Motive --- */
.section--paper2::before,
.section--korn::before {
  opacity: .085;
  background-image:
    url(/assets/img/deco/wheat-wood.png),
    url(/assets/img/deco/coffee-wood.png),
    url(/assets/img/deco/waffle-wood.png),
    url(/assets/img/deco/bee-wood.png),
    url(/assets/img/deco/bread-wood.png);
  background-position: 4% 24%, 91% 14%, 79% 84%, 21% 88%, 53% 48%;
  background-size: 88px, 66px, 116px, 54px, 100px;
}
/* Variation für jede zweite helle Sektion (versetzter Streu-Satz) */
.section--paper2:nth-of-type(even)::before {
  background-image:
    url(/assets/img/deco/windmill-wood.png),
    url(/assets/img/deco/wheat-wood.png),
    url(/assets/img/deco/coffee-wood.png),
    url(/assets/img/deco/bread-wood.png),
    url(/assets/img/deco/bee-wood.png);
  background-position: 88% 20%, 10% 72%, 66% 86%, 40% 22%, 94% 62%;
  background-size: 108px, 80px, 62px, 92px, 52px;
}

/* --- Dunkle Sektion: creme Motive --- */
.section--wood::before {
  opacity: .11;
  background-image:
    url(/assets/img/deco/windmill-cream.png),
    url(/assets/img/deco/wheat-cream.png),
    url(/assets/img/deco/coffee-cream.png),
    url(/assets/img/deco/bee-cream.png);
  background-position: 5% 20%, 92% 80%, 85% 16%, 16% 84%;
  background-size: 120px, 90px, 64px, 58px;
}

/* --- Ruhiges, wiederholbares Punkt-Raster (nur dunkle Sektion) --- */
/* Gleichmäßig versetzte Punkte, weit gestellt – bewusst schlicht. */
.section--wood::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cg fill='%23F7F3E8'%3E%3Ccircle cx='9.5' cy='9.5' r='1.1'/%3E%3Ccircle cx='28.5' cy='28.5' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Helle Variante des Rasters (Korn-Tint-Fläche, falls genutzt) */
.section--korn::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cg fill='%236E4A2B'%3E%3Ccircle cx='9.5' cy='9.5' r='1'/%3E%3Ccircle cx='28.5' cy='28.5' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Bei sehr schmalen Screens Motive etwas kleiner halten */
@media (max-width: 40rem) {
  .section--paper2::before,
  .section--korn::before,
  .section--wood::before { background-size: 64px, 48px, 84px, 44px, 72px; }
}