/* ================================================
   Waldorfkindergarten Farmsen: V2
   Exakter 1:1-Rebuild, Block 1 (Hero)
   Proportionale vw-Skalierung wie die Readymag-Vorlage
   ================================================ */

/* ── FONTS ── */
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dmsans-700italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

/* ── TOKENS ── */
:root {
  --green: #95c11f;
  --green-dark: #7da619;
  --ink: #000;
  --white: #fff;
  --line: #e6e6e6;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font); font-weight: 400;
  color: var(--ink); background: var(--white); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
a { color: var(--green-dark); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--green); }
strong, b { font-weight: 700; }

.skip-link { position: absolute; top: -100%; left: 1rem; z-index: 300; padding: 0.6rem 1.1rem; background: var(--green); color: var(--white); border-radius: 6px; font-weight: 600; }
.skip-link:focus { top: 1rem; }

/* ── HERO (vw-skaliert, wie Original-Canvas) ── */
.hero { position: relative; padding: 4.5vw 0 8vw 5.83vw; }
.hero__inner { position: static; }

/* Logo oben rechts */
.brand { position: absolute; top: 4.24vw; right: 8.2vw; text-align: right; z-index: 5; }
.brand__logo { width: 22vw; margin-left: auto; }
/* Tagline linksbuendig zur Wortmarke. Die Logo-Datei hat links 2,49 Prozent
   ihrer Breite als Leerraum, der wird mit margin-left ausgeglichen, damit der
   Satz optisch genau unter dem F von FARMSEN beginnt. */
.brand__tagline { margin-top: 0.6vw; margin-left: 0.55vw; text-align: left; font-weight: 700; font-size: 1.2vw; color: var(--ink); }

/* Eyebrow (aufrecht, leicht nach oben gedreht) + Headline
   Die Headline-Grafik ist um denselben Winkel und um denselben Drehpunkt
   gekippt wie der Eyebrow. Beide stehen dadurch parallel, der Abstand
   zwischen ihnen bleibt an jeder Stelle gleich. */
.eyebrow { display: inline-block; margin-top: 1.3vw; font-weight: 700; font-style: normal; font-size: 3.5vw; line-height: 1; transform: rotate(-5deg); transform-origin: left center; }
/* margin-left so gesetzt, dass die linke Kante des D von DIE genau unter dem F
   von 'Freie Plaetze!' steht. Der Wert haengt an der Drehung und am Leerraum
   links in der Grafikdatei, deshalb nach jeder Aenderung an beidem nachmessen. */
.headline { display: block; width: 56.2vw; margin-top: -0.8vw; margin-left: -1.175vw; transform: rotate(-5deg); transform-origin: left center; }

/* Body */
.hero__body { margin-top: 5.3vw; }
.hero__text { max-width: 38.4vw; font-size: 1.23vw; line-height: 1.5; }
/* Lead und Kindergartenname bilden zusammen einen zweizeiligen Block, deshalb
   engerer Zeilenabstand als im Fliesstext und kein Abstand dazwischen. */
.hero__text .lead { font-weight: 700; font-size: 1.45vw; line-height: 1.25; margin-bottom: 0; }
.hero__title { font-weight: 700; font-size: 1.45vw; line-height: 1.25; margin: 0 0 1.2vw; }
.hero__subtitle { font-weight: 700; font-size: 1.45vw; line-height: 1.5; margin: 0 0 1.2vw; }
.hero__text p + p { margin-top: 1.2vw; }

/* Termine. Steht in derselben Textspalte wie der Einstiegstext, die Ueberschrift
   nutzt bewusst .hero__subtitle, damit kein zweites Schriftbild entsteht. */
/* Abstufung der Abstaende: Absatz 1x, neuer Termin 2x, Ueberschrift "Termine"
   3x. Ohne diese Staffelung liest sich "Termine" wie ein weiterer Absatz des
   Einstiegstexts statt wie der Anfang eines eigenen Bereichs. */
.dates { margin-top: 3.6vw; }
.dates__item + .dates__item { margin-top: 2.5vw; }
.dates__title { font-weight: 700; font-size: 1.23vw; line-height: 1.5; margin-bottom: 0.3vw; }
.dates__item p + p { margin-top: 0.6vw; }
.dates a { color: var(--ink); }
.dates a:hover { color: var(--green-dark); }

/* Kontakt-Block (rechts, unter dem Kreis)
   Fest unter dem Foto verankert, nach demselben Prinzip wie .hero__slider.
   Im normalen Fluss stand er unter dem gesamten Text, also weit unterhalb des
   Fotos, und liess die rechte Spalte ueber eine Bildschirmhoehe leer.
   Rechnung: Foto beginnt bei top 24.9vw und ist 45.83vw hoch, endet also bei
   70.73vw. Plus 4vw Abstand ergibt 74.73vw. Linke Kante 50vw ist die linke
   Kante des Fotos (100 - 4.17 rechts - 45.83 Breite). */
.hero__contact { position: absolute; top: 74.73vw; left: 50vw; right: 4.17vw; margin: 0; }
.hero__contact h2 { color: var(--green); font-weight: 700; font-size: 1.9vw; line-height: 1.3; }
/* width:max-content haelt den Satz 'Dann freut sich ... auf Ihren Anruf.' in einer
   Zeile. Der Absatz waechst dafuer nach rechts in den vorhandenen Aussenabstand,
   die linke Kante des Kontaktblocks bleibt unter dem runden Foto stehen. */
.hero__contact .c-lead { margin-top: 0.7vw; width: max-content; font-size: 1.7vw; line-height: 1.3; color: var(--ink); font-weight: 400; }
.hero__contact .c-lead strong { font-weight: 700; }
.hero__contact .c-lead a { color: var(--ink); font-weight: 400; }
.hero__contact .c-lead a:hover { color: var(--green-dark); }
.hero__contact .c-small { margin-top: 1.3vw; font-size: 1.15vw; line-height: 1.42; color: var(--ink); }
.hero__contact .c-small a { color: var(--ink); }
.hero__contact .c-small a:hover { color: var(--green-dark); }
.hero__contact .c-addr { margin-top: 1.6vw; }

/* ── HERO-SLIDER (rundes Foto, mehrere Motive) ── */
.hero__slider {
  position: absolute; top: 24.9vw; right: 4.17vw;
  width: 45.83vw; aspect-ratio: 1 / 1;
}
.hero__photo {
  position: absolute; inset: 0;
  border-radius: 50%; overflow: hidden; background: var(--line);
}
.slider__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.7s ease;
}
.slider__slide.is-active { opacity: 1; }

/* Bild-Headlines: Heading-Wrapper, Bild fuellt die Breite */
.hero__headline { margin: 0; }
.faq__headline img, .jobs__headline img { width: 100%; }

/* ── FAQ ── */
.faq { position: relative; padding: 6.2vw 0 8vw 5.83vw; }
.faq__headline { display: block; width: 30.5vw; margin-bottom: 9vw; }
.faq__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5vw; max-width: 83.2vw; }
.faq__item + .faq__item { margin-top: 2.2vw; }
.faq__item h3 { font-size: 1.2vw; font-weight: 700; line-height: 1.3; margin-bottom: 0.45vw; }
.faq__item p { font-size: 1.2vw; line-height: 1.3; }
.faq__item p + p { margin-top: 0.8vw; }
.faq__col--black .faq__item h3 { color: var(--ink); }
.faq__col--green .faq__item h3 { color: var(--green); }
.faq__item .hl { color: var(--green); font-weight: 700; }

/* ── JOBS / STELLENANZEIGE ── */
.jobs { position: relative; padding: 6vw 0 6vw 5.83vw; }
.jobs__headline { display: block; width: 26.6vw; margin-bottom: 3.2vw; }
.jobs__subtitle { font-weight: 700; font-size: 2.0vw; line-height: 1.3; margin-bottom: 3.5vw; }
.jobs__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2vw; max-width: 88.2vw; align-items: start; }
.jobs__col p { font-size: 1.2vw; line-height: 1.4; max-width: 39vw; }
.jobs__col p + p { margin-top: 1vw; }
.jobs__col h3 { color: var(--green); font-weight: 700; font-size: 1.2vw; line-height: 1.3; margin: 1.7vw 0 0.7vw; }
/* Die linke Spalte beginnt mit einem Absatz, die rechte mit einer Ueberschrift.
   Ohne diese Regel startet die rechte Spalte um den Ueberschriften-Abstand tiefer. */
.jobs__col > h3:first-child { margin-top: 0; }
.jobs__col ul { margin-top: 0.4vw; }
.jobs__col li { position: relative; padding-left: 1.3vw; font-size: 1.2vw; line-height: 1.35; max-width: 39vw; }
.jobs__col li + li { margin-top: 0.45vw; }
.jobs__col li::before { content: "–"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.jobs__apply { margin-top: 1.7vw; }
.jobs__apply p + p { margin-top: 0.4vw; }
.jobs__apply a { color: var(--green); font-weight: 700; }

/* ── SCROLL-REVEAL: obere Ebene gleitet ueber die naechste Sektion weg ──
   Fruehere Bloecke liegen OBEN (hoeherer z-index) und decken mit eigenem
   Hintergrund die naechste Sektion ab. Die naechste Sektion bleibt ruhig
   stehen, waehrend die obere Ebene nach oben weggleitet und sie freigibt.
   Die Bewegung laeuft ueber eine scroll-gebundene CSS-Animation vollstaendig
   auf dem Compositor: daher absolut ruckelfrei, der Text steht still.
   Browser ohne Unterstuetzung zeigen die Seite statisch in exakter
   1:1-Position (kein Effekt, aber komplett stabil). */
.hero { z-index: 4; background: var(--white); }
.reveal { position: relative; background: var(--white); }
.faq.reveal         { z-index: 3; }
.jobs.reveal        { z-index: 2; }
.site-footer.reveal { z-index: 1; }

@keyframes reveal-slide {
  from { transform: translateY(calc(-1 * var(--rev-dist, 100vh))); }
  to   { transform: translateY(0); }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-slide linear both;
      animation-timeline: scroll(root block);
      animation-range: var(--rev-start, 0px) var(--rev-end, 0px);
      will-change: transform;
    }
  }
}

/* ── PAGE-PEEL-SCHATTIERUNG ──
   Schattenband an der Unterkante jeder oberen "Seite", das auf die
   darunterliegende Sektion faellt. Gibt dem Auge die Tiefe der uebereinander
   liegenden Ebenen, wie in der Readymag-Vorlage. Immer sichtbar, unabhaengig
   von der Scroll-Animation. Rein dekorativ (pointer-events:none). */
.hero::after,
.faq.reveal::after,
.jobs.reveal::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 3.5vw; min-height: 26px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
  pointer-events: none; z-index: 6;
}

/* ── FOOTER ── */
.site-footer { padding: 5vw 5.83vw 4vw; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2vw; max-width: 88.2vw; align-items: start; }
.footer-traeger-logo { width: 17vw; margin-bottom: 1.2vw; }
.footer-col p { font-size: 1.0vw; line-height: 1.55; }
.footer-col p + p { margin-top: 0.7vw; }
.footer-col a { color: var(--green-dark); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4vw 2vw; }
.footer-links a { color: var(--ink); font-weight: 700; font-size: 1.0vw; }
.footer-links a:hover { color: var(--green-dark); }
.footer-copyright { margin-top: 1.5vw; font-size: 0.95vw; }

/* ── RESPONSIVE (mobil) ── */
@media (max-width: 760px) {
  .hero { padding: 1.5rem 1.25rem 2.5rem; }
  /* Auf dem Handy ist die Tagline breiter als das Logo. Der Kasten richtet sich
     deshalb nach dem breitesten Element und dockt rechts an, Logo und Tagline
     stehen darin beide linksbuendig. So bleibt die Tagline in einer Zeile. */
  .brand { position: static; width: max-content; margin-left: auto; margin-bottom: 1.25rem; text-align: left; }
  .brand__logo { margin-left: 0; }
  .brand__logo { width: 150px; }
  .brand__tagline { margin-left: 4px; font-size: 0.9rem; }
  .eyebrow { font-size: 1.7rem; }
  /* Wie am Desktop: Wert so gewaehlt, dass das D von DIE unter dem F von
     'Freie Plaetze!' steht. Prozent, damit es bei jeder Handybreite passt. */
  .headline { width: 88%; margin-left: -1.7%; margin-top: 0.4rem; }
  .hero__body { margin-top: 1.6rem; }
  .hero__text { max-width: none; font-size: 15px; line-height: 1.5; }
  .hero__text .lead { font-size: 1.05rem; line-height: 1.25; margin-bottom: 0; }
  .hero__title { font-size: 1.05rem; line-height: 1.25; margin: 0 0 1rem; }
  .hero__subtitle { font-size: 1.05rem; margin: 0 0 1rem; }
  .hero__text p + p { margin-top: 1rem; }
  .dates { margin-top: 3rem; }
  .dates__item + .dates__item { margin-top: 2rem; }
  .dates__title { font-size: 15px; margin-bottom: 0.25rem; }
  .dates__item p + p { margin-top: 0.5rem; }
  .hero__slider { position: relative; top: auto; right: auto; width: min(78vw, 420px); margin: 2rem auto 0; }
  .hero__contact { position: static; top: auto; left: auto; right: auto; max-width: none; margin: 2.5rem 0 0; }
  .hero__contact h2 { font-size: 1.3rem; }
  .hero__contact .c-lead { width: auto; font-size: 1.15rem; }
  .hero__contact .c-small { font-size: 0.95rem; }

  .faq { padding: 2rem 1.25rem 2.5rem; }
  .faq__headline { width: 70%; margin-bottom: 2rem; }
  .faq__cols { grid-template-columns: 1fr; column-gap: 0; max-width: none; }
  .faq__col + .faq__col { margin-top: 2.2rem; }
  .faq__item h3 { font-size: 1rem; }
  .faq__item p { font-size: 0.95rem; line-height: 1.5; }
  .faq__item p + p { margin-top: 0.8rem; }

  .jobs { padding: 2rem 1.25rem 2.5rem; }
  .jobs__headline { width: 60%; margin-bottom: 1.5rem; }
  .jobs__subtitle { font-size: 1.3rem; margin-bottom: 1.5rem; }
  .jobs__cols { grid-template-columns: 1fr; column-gap: 0; max-width: none; }
  .jobs__col + .jobs__col { margin-top: 2rem; }
  .jobs__col p, .jobs__col li { font-size: 0.95rem; line-height: 1.5; max-width: none; }
  .jobs__col h3 { font-size: 1rem; margin: 1.4rem 0 0.6rem; }
  .jobs__col > h3:first-child { margin-top: 1.4rem; }
  .jobs__col li { padding-left: 1rem; }

  .site-footer { padding: 2rem 1.25rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; max-width: none; }
  .footer-traeger-logo { width: 200px; }
  .footer-col p, .footer-links a, .footer-copyright { font-size: 0.9rem; }
}