/* Entwurf A „Sanftes Aquarell“
   Palette: Tom, nach Doreens Aquarell-Flyer · Gestaltung: Vince
   Regel von Bill: nur Farben, Schriften, Flächen und Dekoration.
   Texte, Aufbau und Layout bleiben unverändert. */

@import url("fonts.css");

:root {
  --bg: #f7f5ea;          /* Aquarellpapier */
  --bg-alt: #eef2e1;      /* Salbei-Papier */
  --card: #fffdf6;
  --text: #2b2a22;
  --muted: #5d5a4d;
  --heading: #2f5a35;     /* Waldgrün aus Doreens Flyer-Titel */
  --accent: #4f7d3f;
  --accent-dark: #3f6833;
  --accent-soft: rgba(111, 154, 82, 0.16);
  --sun: #f3d77a;
  --sun-soft: #fbf1cf;
  --roof: #b9573f;
  --earth: #8a5a2b;       /* Erdbraun aus „Komm in meine bunte Welt!“ */
  --rose: #e9c6be;
  --star: #e0a526;
  --forest: #2f4b33;
  --forest-2: #3b5a3f;
  --line: rgba(47, 90, 53, 0.14);
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --hand: "Caveat", "Noteworthy", "Bradley Hand", cursive;

  /* Papierstruktur und Aquarell-Flächen (SVG-Rauschen, keine Bilddateien) */
  --paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .3  0 0 0 0 .2  .1 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wash-green: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.009 .014' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .70  0 0 0 0 .44  1.5 0 0 0 -.62'/></filter><rect width='600' height='400' filter='url(%23w)'/></svg>");
  --wash-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.008 .012' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .97  0 0 0 0 .86  0 0 0 0 .52  1.4 0 0 0 -.62'/></filter><rect width='600' height='400' filter='url(%23w)'/></svg>");
  --wash-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.008 .013' numOctaves='4' seed='23'/><feColorMatrix values='0 0 0 0 .33  0 0 0 0 .47  0 0 0 0 .32  .85 0 0 0 -.36'/></filter><rect width='600' height='400' filter='url(%23w)'/></svg>");
  /* Gemalter, leicht ausgefranster Rand für Fotos */
  --rough: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><filter id='r' x='-5%' y='-5%' width='110%' height='110%'><feTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' seed='5'/><feDisplacementMap in='SourceGraphic' scale='3.2'/></filter><rect x='2.2' y='2.2' width='95.6' height='95.6' rx='2.5' fill='white' filter='url(%23r)'/></svg>");
}

body { background-color: var(--bg); background-image: var(--paper); }
h1, h2 { color: var(--heading); }
h1 em, h2 em { color: var(--accent); }
.eyebrow { font-family: var(--hand); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: var(--earth); }

/* Navigation */
.nav { background: rgba(247, 245, 234, 0.9); }

/* Flächen mit Aquarell-Wolken */
.hero { background-image: var(--wash-sun), var(--wash-green); background-size: 70% 120%, 120% 100%; background-position: 115% -20%, -30% 120%; background-repeat: no-repeat; }
.section-alt { background-color: var(--bg-alt); background-image: var(--wash-green); background-size: 140% 130%; background-position: center; }
.section-dark { background-color: var(--forest); background-image: var(--wash-deep); background-size: 140% 130%; }
.section-dark h2 em { color: var(--sun); }
.footer { background-color: var(--forest); background-image: var(--wash-deep); background-size: 160% 160%; }

/* Fotos mit gemaltem Rand */
.hero-photo, .photo-grid figure, .portrait-placeholder {
  -webkit-mask-image: var(--rough); mask-image: var(--rough);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  border-radius: 6px;
}

/* Porträt von Doreen statt Platzhalter */
.portrait-placeholder { background: url("../img/doreen-portraet.jpg") center 22% / cover no-repeat; }
.portrait-placeholder > div { visibility: hidden; }

/* Karten wie Papierschnipsel */
.card, .fact, .info-card, .form-card, .step, .g-review, .animal, .review-summary { background: var(--card); box-shadow: 0 1px 0 rgba(47, 90, 53, 0.08), 0 6px 18px -12px rgba(47, 90, 53, 0.35); }
.card .icon { background: var(--sun-soft); color: var(--earth); border-radius: 50% 46% 52% 44%; }
.btn { border-radius: 999px; }
.btn-primary { background: var(--accent); }
.proof li, .chips li { box-shadow: inset 0 0 0 1px var(--line); }
.timeline li::before { background: var(--earth); box-shadow: 0 0 0 5px rgba(138, 90, 43, 0.14); }
.ritual { background: var(--sun-soft); background-image: var(--wash-sun); background-size: 160% 200%; }
.quote p { font-family: var(--hand); font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 700; }

/* ---------- Aquarell-Tiere (dezent, nur auf hellen Flächen) ---------- */
.hero, .section { position: relative; overflow: clip; }
.hero > .container, .section > .container { position: relative; z-index: 1; }
.deco::after, .hero::before, .section[aria-labelledby="blick"]::after, .section[aria-labelledby="warum"]::after,
.section[aria-labelledby="tiere"]::after, #ueber-mich::after, .section[aria-labelledby="ablauf"]::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.hero::before { background-image: url("../img/tier-bussard.svg"); width: 190px; height: 132px; top: 22px; right: 4%; transform: rotate(-4deg); }
.section[aria-labelledby="blick"]::after { background-image: url("../img/tier-schaf.svg"); width: 120px; height: 122px; top: 70px; right: 6%; }
.section[aria-labelledby="warum"]::after { background-image: url("../img/tier-kueken.svg"); width: 96px; height: 106px; top: 80px; right: 8%; }
.section[aria-labelledby="tiere"]::after { background-image: url("../img/tier-hund.svg"); width: 122px; height: 198px; top: 60px; right: 5%; }
#ueber-mich::after { background-image: url("../img/tier-frosch.svg"); width: 84px; height: 78px; bottom: 50px; right: 6%; }
.section[aria-labelledby="ablauf"]::after { background-image: url("../img/tier-schaf-2.svg"); width: 116px; height: 110px; top: 60px; right: 6%; }

@media (max-width: 820px) {
  .hero::before { width: 120px; height: 84px; top: 8px; right: 2%; opacity: 0.9; }
  .section[aria-labelledby="blick"]::after, .section[aria-labelledby="warum"]::after,
  .section[aria-labelledby="ablauf"]::after { width: 74px; height: 74px; top: 38px; right: 3%; }
  .section[aria-labelledby="tiere"]::after { width: 70px; height: 114px; top: 30px; right: 3%; }
  #ueber-mich::after { display: none; }
}
@media (max-width: 560px) {
  .hero::before { width: 96px; height: 66px; top: 4px; }
}