/* ============================================================
   Der Fürther Kleeblatt-Chor — Stylesheet
   Farben aus dem Briefing: Navy, Kleeblattgrün, Creme,
   Papierbeige, Beeren-Magenta.
   ============================================================ */

/* Self-hosted Fonts (statt Google Fonts CDN, aus Datenschutzgründen) */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/poppins-500.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/poppins-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/poppins-800.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/caveat-500.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/caveat-600.woff2') format('woff2');
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/caveat-700.woff2') format('woff2');
}

:root{
  --navy:      #12263a;
  --navy-soft: #1c3b52;
  --green:     #5aaa46;
  --green-dark:#3f5a34;
  --green-soft:#e4efdc;
  --cream:     #faf7f0;
  --paper:     #f5efe1;
  --paper-2:   #efe7d4;
  --beige:     #e7dcc4;
  --magenta:   #b31f4a;
  --magenta-d: #96173c;
  --ink:       #33414f;
  --yellow:    #e0a52e;
  --pastel:    #fdf1f2;   /* zartes Rosé/Blush für den Sektionswechsel */

  --shadow-soft: 0 14px 34px rgba(18,38,58,.10);
  --shadow-card: 0 10px 26px rgba(18,38,58,.12);
  --radius: 14px;
  --maxw: 1140px;

  --font-sans: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-hand: 'Caveat', 'Poppins', cursive;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ color:var(--navy); line-height:1.05; margin:0; }
p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.green{ color:var(--green); }
.magenta{ color:var(--magenta); }
.yellow{ color:var(--yellow); }
.script{ font-family:var(--font-hand); font-weight:600; line-height:1.15; }

/* ---------- reusable icon color ---------- */
svg use{ color:inherit; }
.mini-heart{ width:.9em; height:.9em; color:var(--magenta); display:inline-block; vertical-align:middle; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; font-size:1rem;
  padding:.7em 1.3em; border-radius:10px;
  cursor:pointer; border:none; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-magenta{ background:var(--magenta); color:#fff; box-shadow:0 8px 18px rgba(179,31,74,.28); }
.btn-magenta:hover{ background:var(--magenta-d); transform:translateY(-2px); }
.btn-lg{ font-size:1.05rem; padding:.85em 1.5em; }
.btn-tilt{ transform:rotate(-2deg); }
.btn-tilt:hover{ transform:rotate(-2deg) translateY(-2px); }
.btn-arrow{ width:1.4em; height:.9em; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  color:var(--magenta); font-weight:600;
}
.link-arrow .btn-arrow{ width:1.5em; transition:transform .15s; }
.link-arrow:hover .btn-arrow{ transform:translateX(4px); }

/* ============================================================
   DEKO-NOTEN (überall verstreut)
   Vier unterschiedliche, klar erkennbare Notentypen (Achtel, Achtel
   verbunden, Viertel, Sechzehntel) als gefüllte Silhouetten – jede
   Instanz mit eigener Farbe, Größe, Position und leichter Drehung.
   Jedes ::before/::after überzieht die ganze Sektion als transparente
   Ebene und trägt mehrere Noten als gestapelte Hintergrundebenen.
   ============================================================ */
.warum::before, .warum::after,
.antonia::before, .antonia::after,
.orga::before, .orga::after,
.faq-section::before, .faq-section::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-repeat:no-repeat;
}
.warum::before{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%23b31f4a'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%23b31f4a'/><path d='M23 6 C34 10 36 22 27 30 C33 21 30 14 23 15 Z' fill='%23b31f4a'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%2312263a'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%2312263a'/></svg>");
  background-position: 7% 64px, 92% 130px;
  background-size: 26px 39px, 20px 30px;
}
.warum::after{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><ellipse cx='10' cy='48' rx='9' ry='7' transform='rotate(-14 10 48)' fill='%235aaa46'/><ellipse cx='41' cy='48' rx='9' ry='7' transform='rotate(-14 41 48)' fill='%235aaa46'/><rect x='17.5' y='14' width='4.5' height='36' rx='2' fill='%235aaa46'/><rect x='48.5' y='8' width='4.5' height='42' rx='2' fill='%235aaa46'/><path d='M17.5 14 L53 8 L53 16 L17.5 22 Z' fill='%235aaa46'/></svg>");
  background-position: 90% calc(100% - 90px);
  background-size: 54px 54px;
}
.antonia::before{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%2312263a'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%2312263a'/><path d='M23 6 C34 10 36 20 28 27 C33 19 30 13 23 14 Z' fill='%2312263a'/><path d='M23 16 C34 20 36 30 28 37 C33 29 30 23 23 24 Z' fill='%2312263a'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%23e0a52e'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%23e0a52e'/></svg>");
  background-position: 93% 90px, 4% 40px;
  background-size: 30px 45px, 18px 27px;
}
.antonia::after{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%235aaa46'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%235aaa46'/></svg>");
  background-position: 3% calc(100% - 140px);
  background-size: 24px 36px;
}
.orga::before{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><ellipse cx='10' cy='48' rx='9' ry='7' transform='rotate(-14 10 48)' fill='%23b31f4a'/><ellipse cx='41' cy='48' rx='9' ry='7' transform='rotate(-14 41 48)' fill='%23b31f4a'/><rect x='17.5' y='14' width='4.5' height='36' rx='2' fill='%23b31f4a'/><rect x='48.5' y='8' width='4.5' height='42' rx='2' fill='%23b31f4a'/><path d='M17.5 14 L53 8 L53 16 L17.5 22 Z' fill='%23b31f4a'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%235aaa46'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%235aaa46'/><path d='M23 6 C34 10 36 22 27 30 C33 21 30 14 23 15 Z' fill='%235aaa46'/></svg>");
  background-position: 5% 70px, 95% 20px;
  background-size: 44px 44px, 22px 33px;
}
.orga::after{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%23e0a52e'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%23e0a52e'/></svg>");
  background-position: 92% calc(100% - 60px);
  background-size: 26px 39px;
}
.faq-section::before{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%235aaa46'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%235aaa46'/><path d='M23 6 C34 10 36 22 27 30 C33 21 30 14 23 15 Z' fill='%235aaa46'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><ellipse cx='11' cy='48' rx='9' ry='7' transform='rotate(-18 11 48)' fill='%23b31f4a'/><rect x='18.5' y='6' width='4.5' height='43' rx='2' fill='%23b31f4a'/></svg>");
  background-position: 94% 50px, 4% calc(100% - 80px);
  background-size: 28px 42px, 20px 30px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(18,38,58,.06);
}
.header-inner{
  display:flex; align-items:center; gap:2rem;
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:flex-start; gap:14px; }
.brand-name{
  font-weight:800; color:var(--navy);
  font-size:.95rem; line-height:.98; letter-spacing:-.01em;
}
.brand-name.light{ color:#fff; }
.brand-claim{
  font-family:var(--font-hand); font-weight:600;
  color:var(--green); font-size:1.05rem; line-height:1; padding-top:2px;
}
.main-nav{ display:flex; gap:1.8rem; margin-left:auto; font-weight:500; }
.main-nav a{ color:var(--navy); padding:4px 0; position:relative; }
.main-nav a:hover{ color:var(--green); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--green); border-radius:2px;
}
.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:56px 0 40px; background:#fff; }
.hero-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:36px; align-items:center; }
.hero-title{
  font-size:clamp(2.4rem,5.4vw,4.3rem); font-weight:800; letter-spacing:-.02em;
  position:relative; display:inline-block;
  transform:rotate(-2.5deg); transform-origin:left center;
}
.clover-inline{ width:.9em; height:.9em; color:var(--green); position:absolute; margin-left:.15em; margin-top:.1em; }
.hero-claim{
  font-size:2rem; color:var(--green); margin:1.2rem 0 1.4rem;
}
.hero-lead{ font-size:1.15rem; max-width:30rem; color:var(--ink); }
.hero-lead + .btn{ margin-top:.6rem; }

/* ----- collage ----- */
.hero-collage{ position:relative; }
.hero-img{ width:100%; height:auto; display:block; position:relative; z-index:1; }
.deco{ position:absolute; z-index:2; }
.note{ color:var(--navy); }
.note.na{ width:32px; height:42px; top:6px; left:-64px; transform:rotate(-14deg); }
.note.nb{ width:26px; height:34px; top:190px; left:-44px; transform:rotate(12deg); color:var(--green); }
.note.nc{ width:30px; height:40px; bottom:24px; left:-58px; transform:rotate(-7deg); }
.heart.ha{ width:26px; height:24px; color:var(--magenta); top:-14px; right:-6px; transform:rotate(8deg); }

/* torn / deckled paper edge (via SVG-Filter auf Pseudo-Element) */
.paper{ background:transparent; position:relative; }
.paper::before{
  content:""; position:absolute; inset:-3px; background:var(--paper);
  filter:url(#torn)
         drop-shadow(0 6px 10px rgba(18,38,58,.16))
         drop-shadow(0 24px 40px rgba(18,38,58,.28));
  z-index:0;
}
.paper > *{ position:relative; z-index:1; }
.tape{
  position:absolute; top:-12px; left:60%; width:78px; height:26px;
  background:#8ba05a; opacity:.75; transform:rotate(-8deg);
  box-shadow:0 2px 5px rgba(0,0,0,.12);
}

/* ============================================================
   COMMUNITY
   ============================================================ */
.community{ padding:30px 0 26px; background:linear-gradient(180deg,var(--cream),#fff); position:relative; }
.community-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.community-card{
  padding:32px 34px; border-radius:8px 14px 10px 16px / 16px 8px 16px 10px;
  transform:rotate(-1deg);
}
.town{ width:200px; height:auto; float:right; margin:-6px 0 0 18px; }
.town-img{ width:240px; height:auto; float:right; margin:-8px -6px 6px 20px; }
.community-title{ font-size:2rem; font-weight:800; margin-bottom:1rem; }
.community-card p{ margin:0; color:var(--ink); }

.stats{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.stat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; flex:1; }
.stat-icon{ width:46px; height:36px; color:var(--navy); margin-bottom:6px; }
.stat-icon.green{ color:var(--green); }
.stat-label{ font-size:.95rem; color:var(--ink); }
.stat-num{ font-size:2.6rem; font-weight:800; color:var(--navy); line-height:1; }
.stat-mini{ font-weight:700; color:var(--navy); line-height:1.05; }
.stat-divider{ width:1px; align-self:stretch; border-left:2px dotted var(--beige); margin:6px 0; }

.squiggle{ display:block; width:220px; height:12px; margin:22px auto 0; }

/* ============================================================
   REHEARSAL / PROBEN
   ============================================================ */
.rehearsal{ padding:40px 0 54px; background:#fff; }
.rehearsal-grid{
  display:grid; grid-template-columns:.9fr 1fr 1.1fr; gap:34px; align-items:start;
}

.proben-blob{
  position:relative; background:var(--navy); color:#fff;
  padding:34px 30px; border-radius:40px 30px 46px 28px / 30px 44px 28px 46px;
  box-shadow:var(--shadow-card); margin-top:14px;
}
.tape-green{ background:#8ba05a; left:20px; top:-12px; }
.proben-head{
  font-family:var(--font-sans); color:#fff; letter-spacing:.12em;
  font-size:1.5rem; margin-bottom:18px;
}
.proben-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.proben-list li{ display:flex; gap:14px; align-items:flex-start; font-size:.98rem; line-height:1.35; }
.proben-list svg{ width:26px; height:26px; color:var(--green); flex:none; margin-top:2px; }

/* middle note column */
.proben-note{ position:relative; padding-top:6px; }
.notepad{
  padding:26px 26px 30px; border-radius:4px; transform:rotate(-2deg);
  border-radius:6px 8px 6px 8px;
}
.clip{
  position:absolute; top:-10px; left:24px; width:22px; height:46px;
  border:4px solid #b7b9be; border-radius:10px; background:transparent;
}
.notepad-title{ font-size:1.5rem; color:var(--navy); margin:0 0 12px; }
.checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; align-items:flex-start; gap:10px; font-weight:500; color:var(--navy); }
.checklist svg{ width:22px; height:22px; flex:none; margin-top:2px; }

.bubble{ position:relative; padding:14px 18px; border-radius:18px; display:inline-block; }
.bubble p{ margin:0; }
.bubble-magenta{
  color:var(--magenta); position:absolute; top:34px; right:-18px;
  font-size:1.3rem; text-align:center;
}
.bubble-magenta::after{
  content:""; position:absolute; inset:0; border:2px solid var(--magenta);
  border-radius:20px 20px 20px 4px; z-index:-1;
}
.doodle-bird{ width:90px; margin-top:8px; }

/* right copy column */
.proben-copy{ position:relative; padding-top:8px; display:flex; gap:18px; align-items:flex-start; }
.proben-copy-text{ flex:1 1 auto; min-width:0; }
.proben-aside{ flex:0 0 132px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.proben-copy-title{ font-size:2rem; font-weight:800; margin-bottom:1rem; }
.proben-copy-text > p{ max-width:24rem; }
.bubble-outline{
  color:var(--magenta); text-align:center; font-size:1.15rem;
  width:132px; padding:16px 14px; position:relative;
}
.bubble-outline::after{
  content:""; position:absolute; inset:0; border:2px solid var(--magenta);
  border-radius:20px 20px 4px 20px; z-index:-1;
}
.doodle-clap{ width:76px; }

/* ============================================================
   BAND / MITSINGEN
   ============================================================ */
.band{ background:var(--green-soft); padding:30px 0; }
.band-grid{ display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center; }
.band-intro{ display:flex; align-items:center; gap:14px; }
.band-clover{ width:56px; height:56px; flex:none; }
.band-note{ font-size:1.3rem; color:var(--navy); }

.band-points{ display:flex; align-items:center; gap:26px; justify-content:center; flex-wrap:wrap; }
.kurz-label{
  background:var(--navy); color:#fff; font-family:var(--font-hand);
  font-size:1.2rem; padding:4px 14px; border-radius:8px; transform:rotate(-2deg);
}
.point{ display:flex; align-items:center; gap:10px; font-weight:600; color:var(--navy); }
.point svg{ width:34px; height:34px; color:var(--navy); flex:none; }
.point svg.magenta{ color:var(--magenta); }
.point svg.yellow{ color:var(--yellow); }

.band-sticky{
  padding:16px 20px; transform:rotate(3deg); font-size:1.15rem; color:var(--navy);
}
.band-sticky p{ margin:0; }

/* ============================================================
   SHARED (neue Sektionen)
   ============================================================ */
.kicker{
  display:block; font-family:var(--font-hand); font-weight:600;
  color:var(--green); font-size:1.5rem; line-height:1; margin-bottom:8px;
}
.kicker.light{ color:#a9e08f; }
.section-title{ font-size:clamp(1.8rem,3.4vw,2.4rem); font-weight:800; line-height:1.1; }
.section-title.light{ color:#fff; }
.section-head{ margin-bottom:38px; }
.section-head.center{ text-align:center; }
.section-head.center .kicker{ font-size:1.7rem; }
.note-center{ max-width:44rem; margin:30px auto 0; text-align:center; color:var(--ink); }
.magenta-hand{ color:var(--magenta); font-weight:700; }

/* Titel-Akzent: normaler Text + handgezeichneter rosa Unterstrich */
.underline-hand{
  color:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C50 2 92 3 132 7 C162 10 182 10 196 6' fill='none' stroke='%23b31f4a' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 100%;
  background-size:100% .4em;
  padding-bottom:.12em;
}

/* ----- Hero-Erweiterungen ----- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green-soft); color:var(--green-dark);
  font-weight:600; font-size:.9rem; padding:7px 14px; border-radius:30px;
  margin-bottom:18px;
}
.eyebrow-clover{ width:18px; height:18px; color:var(--green); }
.hero-bullets{
  list-style:none; margin:1.4rem 0 1.6rem; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;
}
.hero-bullets li{ display:flex; align-items:center; gap:9px; font-weight:500; color:var(--navy); }
.hero-bullets svg{ width:20px; height:20px; color:var(--green); flex:none; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-ghost{ background:transparent; color:var(--navy); border:2px solid rgba(18,38,58,.18); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.hero-trust{ display:flex; align-items:center; gap:12px; margin-top:22px; font-size:.95rem; color:var(--ink); }
.trust-dots{ display:inline-flex; }
.trust-dots span{
  width:26px; height:26px; border-radius:50%; border:2px solid var(--cream); margin-left:-8px;
}
.trust-dots span:nth-child(1){ background:#5aaa46; margin-left:0; }
.trust-dots span:nth-child(2){ background:#e0a52e; }
.trust-dots span:nth-child(3){ background:#b31f4a; }
.trust-dots span:nth-child(4){ background:#12263a; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:var(--navy); color:var(--cream); overflow:hidden; padding:16px 0; }
.marquee-track{
  display:inline-flex; align-items:center; gap:22px; white-space:nowrap;
  will-change:transform; animation:marquee 32s linear infinite;
}
.marquee-track span{ font-weight:600; font-size:1.05rem; }
.marquee-dot{ color:var(--green); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   WARUM / ÜBER UNS
   ============================================================ */
.warum{ background:#f7f5f5; padding:64px 0; position:relative; overflow:hidden; }
.warum-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.warum-copy .lead{ font-size:1.15rem; color:var(--ink); margin-top:1rem; }
.thoughts{ list-style:none; margin:.6rem 0 2rem; padding:0 4px; display:flex; flex-direction:column; gap:24px; }
.thoughts li{
  --bc:var(--navy);
  position:relative; align-self:flex-start; max-width:82%;
  padding:12px 24px; background:#fff; border:2.5px solid var(--bc); border-radius:26px;
  font-family:var(--font-hand); font-weight:600; font-size:1.5rem; line-height:1.15;
  color:var(--navy); box-shadow:0 6px 14px rgba(18,38,58,.06);
  transform:rotate(-2deg); transition:transform .18s;
}
.thoughts li:nth-child(even){ align-self:flex-end; transform:rotate(2deg); }
.thoughts li:nth-child(3n+2){ --bc:var(--magenta); color:var(--magenta); }
.thoughts li:nth-child(3n+3){ --bc:var(--green-dark); color:var(--green-dark); }
.thoughts li:hover{ transform:rotate(0) scale(1.02); }
/* Gedankenblasen-Schwänzchen (zwei Pünktchen) */
.thoughts li::before,
.thoughts li::after{
  content:""; position:absolute; background:#fff; border:2.5px solid var(--bc); border-radius:50%;
}
.thoughts li::before{ width:14px; height:14px; left:28px; bottom:-10px; }
.thoughts li::after{ width:8px; height:8px; left:18px; bottom:-20px; }
.thoughts li:nth-child(even)::before{ left:auto; right:28px; }
.thoughts li:nth-child(even)::after{ left:auto; right:18px; }
.callout{ padding:22px 26px; transform:rotate(-1deg); }
.callout p{ margin:0; font-size:1.15rem; font-weight:600; color:var(--navy); }
.callout em{ color:var(--magenta); font-style:normal; }
.warum-visual{ position:relative; text-align:center; }
.warum-img{ width:100%; max-width:420px; height:auto; }
.warum-visual .callout{ margin:22px auto 0; max-width:440px; text-align:left; }
.warum-visual .note.wn1{ width:30px; height:40px; color:var(--green); top:0; left:6%; transform:rotate(-12deg); }
.warum-visual .note.wn2{ width:26px; height:34px; color:var(--navy); bottom:8%; right:8%; transform:rotate(10deg); }

/* ============================================================
   ANTONIA
   ============================================================ */
.antonia{ background:#fff; padding:64px 0; position:relative; overflow:hidden; }
.antonia-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.antonia-visual{ position:relative; padding:10px 30px; min-width:0; }
.portrait-card{ width:280px; max-width:100%; margin:0 auto; padding:16px 16px 20px; transform:rotate(-2deg); }
.portrait-img{
  aspect-ratio:4/5; background:var(--green-soft); border-radius:6px;
  display:grid; place-items:center; overflow:hidden;
}
.portrait-img svg{ width:96px; height:96px; color:var(--green); }
.portrait-img img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
.portrait-cap{ text-align:center; font-size:1.4rem; color:var(--navy); margin:12px 0 0; }
.antonia-badge{
  position:absolute; background:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; line-height:1.15;
}
.antonia-badge strong{ color:var(--navy); font-size:.95rem; }
.antonia-badge small{ color:var(--ink); font-size:.72rem; }
.antonia-badge.badge-a{ top:6px; right:0; transform:rotate(3deg); }
.antonia-badge.badge-b{ bottom:14px; left:0; transform:rotate(-4deg); max-width:150px; }
.big-quote{
  margin:1.2rem 0 1.4rem; padding:6px 0 6px 20px; border-left:4px solid var(--magenta);
  font-family:var(--font-hand); font-size:1.7rem; line-height:1.2; color:var(--navy);
}
.antonia-copy p{ color:var(--ink); }
.antonia-copy .btn{ margin-top:8px; }

/* ============================================================
   ABLAUF / STEPS
   ============================================================ */
.ablauf{ background:#fff; padding:64px 0 30px; }
.steps{ list-style:none; margin:0; padding:14px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:start; }
.step{ position:relative; text-align:center; padding:0 6px; }
/* Zickzack: gerade Schritte nach unten versetzt */
.step:nth-child(even){ transform:translateY(34px); }
/* Schlängellinie als Verbinder (leicht schräg zum nächsten Schritt) */
.step:not(:last-child)::after{
  content:""; position:absolute; top:22px; left:calc(50% + 42px); right:calc(-50% + 42px); height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 q10 -7 20 0 t20 0' fill='none' stroke='%235aaa46' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/40px 16px;
}
.step:nth-child(odd):not(:last-child)::after{ transform:rotate(9deg); transform-origin:0 50%; }
.step:nth-child(even)::after{ transform:rotate(-9deg); transform-origin:0 50%; }
/* Blob-Nummern, leicht schräg */
.step-num{
  width:60px; height:60px; background:var(--navy); color:#fff;
  border-radius:47% 53% 51% 49% / 53% 48% 52% 47%;
  font-weight:800; font-size:1.55rem; display:grid; place-items:center; margin:0 auto 18px;
  position:relative; z-index:1; box-shadow:0 8px 18px rgba(18,38,58,.22);
  transform:rotate(-5deg);
}
.step:nth-child(even) .step-num{ background:var(--magenta); transform:rotate(5deg); border-radius:53% 47% 49% 51% / 47% 52% 48% 53%; }
/* kleine Doodles über der Nummer */
.step-doodle{
  position:absolute; top:-16px; left:50%; width:28px; height:28px;
  transform:translateX(6px) rotate(-14deg); z-index:2;
}
.step:nth-child(even) .step-doodle{ transform:translateX(-34px) rotate(12deg); }
.d-clover{ color:var(--green); }
.d-note{ color:var(--navy); }
.d-sparkle{ color:var(--yellow); }
.d-heart{ color:var(--magenta); }
.step h3{ font-size:1.1rem; margin-bottom:8px; }
.step p{ color:var(--ink); font-size:.95rem; margin:0; }

/* ============================================================
   ORGANISATORISCHES
   ============================================================ */
.orga{ background:#f7f5f5; padding:48px 0 64px; position:relative; overflow:hidden; }
.ablauf-bridge{
  text-align:center; color:var(--green-dark); font-size:1.5rem;
  margin:0 auto 14px; max-width:30rem; line-height:1.2;
}
.bridge-arrow{ display:block; width:34px; height:46px; margin:6px auto 0; color:var(--magenta); animation:bridgeBounce 1.8s ease-in-out infinite; }
@keyframes bridgeBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.orga-head{ margin-bottom:30px; }
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.info-card{ padding:30px 26px; text-align:center; }
.info-icon{ width:42px; height:42px; color:var(--green); margin-bottom:12px; }
.info-card h3{ font-size:1.2rem; margin-bottom:8px; }
.info-card p{ color:var(--ink); margin:0; }
.info-card-accent::before{ background:var(--green-soft) !important; }
.info-card-accent .info-icon{ color:var(--green-dark); }
.info-card-accent h3{ color:var(--green-dark); }

/* Info-Cards Farbwechsel Grün/Rosa */
.info-grid .info-card:nth-child(1)::before{ background:#e4efdc !important; }
.info-grid .info-card:nth-child(1) .info-icon{ color:var(--green); }
.info-grid .info-card:nth-child(2)::before{ background:#fdf1f2 !important; }
.info-grid .info-card:nth-child(2) .info-icon{ color:var(--magenta); }

/* Raum-Steckbrief */
.room-card{
  margin-top:26px; padding:30px 34px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:30px; align-items:stretch;
}
.room-card .kicker{ font-size:1.4rem; margin-bottom:4px; }
.room-card h3{ font-size:1.4rem; margin-bottom:10px; }
.room-card p{ color:var(--ink); max-width:60ch; }
.room-features{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:12px 26px;
}
.room-features li{ display:flex; align-items:center; gap:10px; color:var(--navy); font-weight:500; }
.room-features svg{ width:22px; height:22px; color:var(--green); flex:none; }
.room-link{ margin-top:18px; }

.room-card__map{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.room-card__map iframe{
  width:100%; flex:1; min-height:220px; border:0; border-radius:var(--radius);
  filter:grayscale(.15) contrast(1.02);
}

/* ============================================================
   ANMELDUNG / FORMULAR
   ============================================================ */
.anmeldung{ background:var(--navy); color:#fff; padding:60px 0 66px; }
/* Ablauf-Schritte im blauen Bereich (helle Varianten) */
.join-head{ margin-bottom:6px; }
.join-steps{ margin-bottom:52px; }
.anmeldung .step h3{ color:#fff; }
.anmeldung .step p{ color:#c9d4de; }
.anmeldung .step-num{ background:#fff; color:var(--navy); }
.anmeldung .step:nth-child(even) .step-num{ background:var(--magenta); color:#fff; }
.anmeldung .d-clover{ color:#a9e08f; }
.anmeldung .d-note{ color:#eaf0f5; }
.anmeldung .d-sparkle{ color:var(--yellow); }
.anmeldung .d-heart{ color:var(--magenta); }
.anmeldung .step:not(:last-child)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 q10 -7 20 0 t20 0' fill='none' stroke='%237fc55f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-wrap{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:end; }
/* Verspielter Pfeil-Cue statt Intro-Text – sitzt auf Höhe des CTA-Buttons und zeigt darauf */
.form-cue{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding-bottom:34px; }
.cue-text{ font-size:2.6rem; color:#fff; line-height:1.05; }
.cue-arrow{
  width:170px; height:auto; color:var(--magenta); transform:rotate(0deg);
  animation:cueNudge 1.8s ease-in-out infinite;
}
@keyframes cueNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(10px); } }
.form-intro p{ color:#c9d4de; }
.perks{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.perks li{ display:flex; align-items:center; gap:10px; color:#eaf0f5; font-weight:500; }
.perks svg{ width:20px; height:20px; color:#a9e08f; flex:none; }

.form{ background:#fff; border-radius:20px; padding:28px; box-shadow:0 20px 44px rgba(0,0,0,.28); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field-label{ font-weight:600; color:var(--navy); font-size:.9rem; }
.field-hint{ color:var(--ink); font-weight:400; }
.field input{
  font:inherit; padding:12px 14px; border:2px solid #e0dccf; border-radius:10px;
  background:var(--cream); color:var(--navy); transition:border-color .15s;
}
.field input:focus{ outline:none; border-color:var(--green); }
.checkbox{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ink); margin-bottom:18px; }
.checkbox input{ width:20px; height:20px; margin-top:2px; accent-color:var(--green); flex:none; }
.checkbox a{ color:var(--magenta); text-decoration:underline; }
.btn-full{ width:100%; justify-content:center; }
.form-footnote{ text-align:center; font-size:.82rem; color:var(--ink); margin:12px 0 0; }

.form-success{ background:#fff; border-radius:20px; padding:40px 32px; text-align:center; box-shadow:0 20px 44px rgba(0,0,0,.28); }
.success-doodle svg{ width:64px; height:64px; color:var(--green); }
.form-success h3{ font-size:1.5rem; margin:10px 0; }
.form-success p{ color:var(--ink); margin:0; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{ background:#fff; padding:56px 0 64px; position:relative; overflow:hidden; }
.faq-head{ text-align:center; margin-bottom:34px; }
.faq-kicker{ display:block; color:var(--green); font-size:1.6rem; line-height:1; margin-bottom:4px; }
.faq-title{ font-size:2.2rem; font-weight:800; }

.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:#fff; border:2px solid rgba(18,38,58,.09);
  border-radius:16px; box-shadow:0 6px 16px rgba(18,38,58,.05);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.faq-item[open]{
  border-color:var(--green);
  box-shadow:0 12px 26px rgba(18,38,58,.12);
}
.faq-item summary{
  list-style:none; cursor:pointer; user-select:none; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 22px; font-weight:700; font-size:1.06rem; color:var(--navy);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:none; width:28px; height:28px;
  background:center/contain no-repeat; transition:transform .25s;
}
.faq-item[open] summary::after{ transform:rotate(16deg) scale(1.14); }
.faq-item[open] summary{ color:var(--green-dark); }
/* Musiknoten & Herz im Wechsel als Toggle-Icon */
.faq-list > details:nth-child(4n+1) summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M24 62V16l24-6v40' fill='none' stroke='%235aaa46' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='16' cy='62' rx='11' ry='8.5' fill='%235aaa46'/%3E%3Cellipse cx='40' cy='56' rx='11' ry='8.5' fill='%235aaa46'/%3E%3C/svg%3E");
}
.faq-list > details:nth-child(4n+2) summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M24 62V16l24-6v40' fill='none' stroke='%23b31f4a' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='16' cy='62' rx='11' ry='8.5' fill='%23b31f4a'/%3E%3Cellipse cx='40' cy='56' rx='11' ry='8.5' fill='%23b31f4a'/%3E%3C/svg%3E");
}
.faq-list > details:nth-child(4n+3) summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cpath d='M24 62V16l24-6v40' fill='none' stroke='%2312263a' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='16' cy='62' rx='11' ry='8.5' fill='%2312263a'/%3E%3Cellipse cx='40' cy='56' rx='11' ry='8.5' fill='%2312263a'/%3E%3C/svg%3E");
}
.faq-list > details:nth-child(4n+4) summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 34C9 25 3 19 3 12 3 7 7 4 11 4c3 0 6 2 9 6 3-4 6-6 9-6 4 0 8 3 8 8 0 7-6 13-17 22z' fill='%23b31f4a'/%3E%3C/svg%3E");
}
.faq-answer{ padding:0 22px 20px; }
.faq-answer p{ margin:0; color:var(--ink); line-height:1.6; max-width:60ch; }
.faq-item[open] .faq-answer{ animation:faqReveal .28s ease; }
@keyframes faqReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.faq-outro{
  display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;
  max-width:760px; margin:44px auto 0;
}
.faq-cta{ text-align:center; }
.faq-cta .script{ font-size:1.6rem; color:var(--navy); margin-bottom:12px; }
.faq-img{ width:100%; max-width:360px; height:auto; justify-self:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy); color:#e6ecf2; padding-top:44px; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px;
  padding-bottom:30px;
}
.footer-brand .brand-name{ color:#fff; font-size:1.05rem; }
.footer-brand .brand-claim{ display:block; margin-top:10px; color:#8fd07a; }
.footer-col h4{ text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; color:#fff; margin-bottom:14px; }
.footer-col a{ display:block; color:#c2ccd6; margin-bottom:8px; }
.footer-col a:hover{ color:#8fd07a; }
.socials{ display:flex; gap:12px; margin-top:14px; }
.socials a{ width:34px; height:34px; margin:0; color:#e6ecf2; }
.socials svg{ width:34px; height:34px; }
.socials a:hover{ color:#ff6f9c; }

/* Legal-Zeile im blauen Footer */
.footer-legal{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:18px 0 28px; border-top:1px solid rgba(255,255,255,.12);
  color:#9fadba; font-size:.9rem;
}
.footer-legal-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a{ color:#c2ccd6; }
.footer-legal a:hover{ color:#fff; }
.footer-clover{ width:26px; height:26px; margin-left:auto; color:#8fd07a; }

/* ============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ============================================================ */
.legal{ background:#fff; padding:56px 0 80px; }
.legal-back{ display:inline-flex; align-items:center; gap:.45em; color:var(--magenta); font-weight:600; margin-bottom:28px; }
.legal-back svg{ width:1.3em; height:.9em; transform:rotate(180deg); }
.legal-back:hover svg{ transform:rotate(180deg) translateX(4px); }
.legal h1{ font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; margin-bottom:6px; }
.legal .legal-updated{ color:var(--ink); font-size:.9rem; margin-bottom:2.4rem; }
.legal-body{ max-width:68ch; }
.legal-body h2{ font-size:1.25rem; font-weight:800; color:var(--navy); margin:2.2rem 0 .7rem; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--ink); margin:0 0 1rem; }
.legal-body address{ font-style:normal; color:var(--ink); margin:0 0 1rem; line-height:1.6; }
.legal-body a{ color:var(--magenta); text-decoration:underline; }

.legal-todo{
  background:var(--pastel); border-left:4px solid var(--magenta);
  padding:16px 20px; border-radius:8px; margin:0 0 2.2rem; max-width:68ch;
  font-size:.95rem; color:var(--ink);
}
.legal-todo mark{ background:none; color:var(--magenta); font-weight:700; padding:0; }
.legal-placeholder{
  background:var(--pastel); color:var(--magenta-d); font-weight:600;
  padding:1px 6px; border-radius:4px;
}
.legal-body ul{ color:var(--ink); margin:0 0 1rem; padding-left:1.3em; }
.legal-body li{ margin-bottom:.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
.nav-cta-mobile{ display:none; }
@media (max-width:960px){
  .main-nav, .header-inner .btn-magenta{ display:none; }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; margin-left:auto;
    background:none; border:none; cursor:pointer; padding:6px;
  }
  .nav-toggle span{ width:26px; height:3px; background:var(--navy); border-radius:3px; transition:.2s; }
  .main-nav.open{
    display:flex; flex-direction:column; gap:1rem; position:absolute; top:100%; left:0; right:0;
    background:var(--cream); padding:20px 24px; box-shadow:var(--shadow-soft); margin-left:0;
  }
  .main-nav.open .nav-cta-mobile{ display:inline-flex; margin-top:.4rem; }
  .header-inner{ position:relative; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-collage{ min-height:0; }
  .warum-grid,
  .antonia-grid,
  .form-wrap,
  .room-card{ grid-template-columns:1fr; gap:36px; }
  .warum-grid > *,
  .antonia-grid > *,
  .form-wrap > *{ min-width:0; }
  .room-card__map iframe{ min-height:260px; }
  .cue-arrow{ width:110px; animation:none; }
  .form-cue{ padding-bottom:10px; }
  .steps{ grid-template-columns:1fr 1fr; gap:34px 20px; }
  .step:nth-child(even){ transform:none; }
  .step:not(:last-child)::after{ display:none; }
  .info-grid{ grid-template-columns:1fr; }
  .faq-outro{ grid-template-columns:1fr; gap:20px; }
  .antonia-visual{ padding:10px 20px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }

  /* Deko-Noten: auf Tablet/Mobile ausblenden, damit sie nicht mit Text kollidieren
     oder unsichtbar über den Rand hinausragen */
  .warum::before, .warum::after,
  .antonia::before, .antonia::after,
  .orga::before, .orga::after,
  .faq-section::before,
  .hero-collage .deco{ display:none; }

  /* Antonia-Badges: innerhalb des Viewports halten statt am Rand überzustehen */
  .antonia-badge.badge-a{ right:8px; top:0; }
  .antonia-badge.badge-b{ left:8px; bottom:6px; }
}
@media (max-width:560px){
  .hero-title{ font-size:3rem; }
  .hero-bullets{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .steps{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .room-features{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom-inner{ flex-wrap:wrap; gap:14px; }
  .antonia-badge{ padding:8px 11px; }
  .antonia-badge strong{ font-size:.85rem; }
  .antonia-badge small{ font-size:.66rem; }
}