/* ==================================================
   BELLA WILDHERZ – ZUSAMMEN-SEITE
   Seitenspezifische Gestaltung für /Zusammen.
   Lädt nach /css/gemeinsam.css.
================================================== */

/* Seitenhero und Ankündigungsleiste */
/* HOME HERO */
.home-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  background: var(--deep);
}

.home-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 36%, rgba(26,36,22,.48) 68%, rgba(26,36,22,.92) 100%);
  pointer-events: none;
}

.home-hero-text {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  width: min(960px, 100%);
  padding: 0 24px;
}

.hero-sub {
  margin: 12px auto 0;
  max-width: 780px;
  font-size: clamp(.92rem, 2vw, 1.08rem);
  color: rgba(255,255,255,.86);
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.55;
}

/* ANKÜNDIGUNG */
.ankuendigung {
  background: var(--amber);
  color: var(--ink);
  text-align: center;
  padding: 11px 20px;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ==================================================
   ZUSAMMEN: INHALT UND KARTEN
================================================== */

.school-hero-note {
      position: absolute;
      left: 50%;
      bottom: 44px;
      transform: translateX(-50%);
      z-index: 2;
      width: min(980px, calc(100% - 40px));
      text-align: center;
      color: #fff;
      padding: 0 20px;
    }

    .school-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(250,244,232,.9);
      color: var(--forest);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .school-hero-title {
      font-family: "Fraunces", serif;
      font-size: clamp(2.2rem, 6.4vw, 5.1rem);
      line-height: .98;
      font-weight: 900;
      text-shadow: 0 8px 34px rgba(26,36,22,.45);
      margin: 0 auto 12px;
      max-width: 940px;
    }

    .school-hero-title em {
      color: #d9eec8;
      font-style: italic;
    }

    .school-hero-sub {
      max-width: 820px;
      margin: 0 auto;
      color: rgba(255,255,255,.9);
      font-size: clamp(1rem, 2vw, 1.22rem);
      font-weight: 800;
      line-height: 1.55;
    }

    .school-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
      align-items: center;
    }

    .school-panel {
      background: var(--cream);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: var(--radius-xl);
      padding: clamp(22px, 3vw, 34px);
      box-shadow: 0 14px 38px rgba(26,36,22,.07);
    }

    .school-panel h3,
    .school-quote h3 {
      font-family: "Fraunces", serif;
      font-size: 1.35rem;
      line-height: 1.18;
      color: var(--ink);
      margin-bottom: 10px;
    }


    .school-panel p,
    .school-panel li,
    .school-quote p,
    .school-letter p {
      color: #5a6a54;
      line-height: 1.75;
      font-size: .98rem;
    }

    .school-panel ul {
      padding-left: 1.1rem;
      margin-top: 12px;
    }

    .school-two {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
      gap: 22px;
      align-items: stretch;
    }

    .school-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .school-mini-card {
      background: var(--cream);
      border: 1.5px solid rgba(59,94,50,.1);
      border-radius: var(--radius-xl);
      padding: 24px;
      transition: transform .22s, box-shadow .22s;
    }

    .school-mini-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .school-icon {
      width: 74px;
      height: 74px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 0;
    }

    .school-icon img {
      width: 74px;
      height: 74px;
      object-fit: contain;
      display: block;
    }

    .school-mini-card h3 {
      font-family: "Fraunces", serif;
      font-size: 1.18rem;
      margin-bottom: 8px;
      color: var(--ink);
    }

    .school-mini-card p {
      color: #5a6a54;
      line-height: 1.62;
      font-size: .9rem;
    }

    .school-quote {
      background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.72), transparent 34%),
        linear-gradient(135deg, #f5ead2 0%, #d9e4cc 62%, #b8cba7 100%);
      border-radius: 32px;
      padding: clamp(24px, 4vw, 44px);
      border: 1.5px solid rgba(59,94,50,.14);
      position: relative;
      overflow: hidden;
    }

    .school-quote::after {
      content: "🌿";
      position: absolute;
      right: 22px;
      bottom: 8px;
      font-size: clamp(64px, 13vw, 132px);
      opacity: .12;
      transform: rotate(-12deg);
      pointer-events: none;
    }

    .school-quote strong {
      color: var(--forest);
      font-weight: 900;
    }

    .school-quote.school-quote-bg {
      min-height: 320px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: url("/Bilder/Maikafer.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: #fff;
    }

    .school-quote.school-quote-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(26,36,22,.78), rgba(26,36,22,.18));
      z-index: 0;
      pointer-events: none;
    }

    .school-quote.school-quote-bg::after {
      display: none;
    }

    .school-quote.school-quote-bg h3,
    .school-quote.school-quote-bg p,
    .school-quote.school-quote-bg strong {
      position: relative;
      z-index: 1;
      color: #fff;
      text-shadow: 0 3px 16px rgba(26,36,22,.5);
    }

    .school-quote.school-quote-bg h3 {
      font-size: clamp(1.55rem, 3vw, 2.2rem);
    }

    .school-quote.school-quote-bg p {
      max-width: 620px;
      font-weight: 800;
    }

    .school-letter {
      background: #fffdf7;
      border: 1.5px dashed rgba(59,94,50,.22);
      border-radius: var(--radius-xl);
      padding: clamp(22px, 3vw, 32px);
    }

    .school-letter h3 {
      font-family: "Fraunces", serif;
      color: var(--forest);
      font-size: 1.45rem;
      margin-bottom: 14px;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
    }

    .school-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: .78rem;
      font-weight: 900;
      color: var(--forest);
      background: rgba(255,253,247,.75);
      border: 1.5px solid rgba(59,94,50,.1);
    }

    .contact-box {
      background: var(--deep);
      border-radius: var(--radius-xl);
      color: #fff;
      padding: clamp(26px, 4vw, 42px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .contact-box h2 {
      font-family: "Fraunces", serif;
      font-size: clamp(1.65rem, 3vw, 2.5rem);
      margin-bottom: 10px;
    }

    .contact-box p {
      color: rgba(255,255,255,.76);
      line-height: 1.7;
      max-width: 680px;
    }

    .contact-box .btn {
      background: var(--amber);
      color: var(--ink);
      white-space: nowrap;
    }


/* ==================================================
   FLYER-DOWNLOAD
================================================== */

.flyer-download-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(230px, .85fr);
  gap: clamp(20px, 4vw, 36px);
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(244,197,94,.38), transparent 34%),
    linear-gradient(135deg, rgba(250,244,232,.98) 0%, rgba(222,233,210,.96) 54%, rgba(183,204,166,.92) 100%);
  border: 1.5px solid rgba(59,94,50,.14);
  box-shadow: 0 18px 44px rgba(26,36,22,.09);
}

.flyer-download-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -70px auto;
  width: 230px;
  height: 230px;
  background: radial-gradient(circle, rgba(59,94,50,.16), transparent 66%);
  pointer-events: none;
}

.flyer-download-copy,
.flyer-download-preview {
  position: relative;
  z-index: 1;
}

.flyer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,253,247,.72);
  color: var(--forest);
  border: 1.5px solid rgba(59,94,50,.12);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .35px;
}

.flyer-download-copy h3 {
  font-family: "Fraunces", serif;
  color: var(--ink);
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.08;
  margin-bottom: 12px;
}

.flyer-download-copy p {
  color: #5a6a54;
  line-height: 1.75;
  font-size: .98rem;
  max-width: 720px;
}

.flyer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.flyer-download-preview {
  display: flex;
  justify-content: center;
}

.flyer-paper {
  width: min(260px, 100%);
  aspect-ratio: 1 / 1.414;
  border-radius: 18px;
  padding: 18px 16px;
  background:
    linear-gradient(180deg, rgba(255,253,247,.98), rgba(246,231,196,.98));
  border: 2px solid rgba(59,94,50,.18);
  box-shadow: 0 18px 34px rgba(26,36,22,.16), inset 0 0 0 7px rgba(255,255,255,.32);
  transform: rotate(2deg);
}

.flyer-paper-top {
  font-family: "Fraunces", serif;
  color: var(--forest);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
}

.flyer-paper-title {
  margin-top: 12px;
  color: var(--ink);
  font-size: .96rem;
  font-weight: 900;
}

.flyer-paper-lines {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.flyer-paper-lines span {
  height: 10px;
  border-radius: 999px;
  background: rgba(59,94,50,.18);
}

.flyer-paper-lines span:nth-child(2) {
  width: 78%;
}

.flyer-paper-lines span:nth-child(3) {
  width: 64%;
}

.flyer-paper-qr {
  width: 82px;
  height: 82px;
  margin: 28px auto 0;
  border: 2px dashed rgba(59,94,50,.55);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(59,94,50,.72);
  font-weight: 900;
  letter-spacing: 1px;
}

    @media (max-width: 900px) {
      .school-two,
      .contact-box,
      .flyer-download-card {
        grid-template-columns: 1fr;
      }

      .school-card-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {
      .school-hero-note {
        bottom: 28px;
      }

      .school-actions .btn,
      .contact-box .btn,
      .flyer-actions .btn {
        width: 100%;
      }
    }