/* Seiten-Layouts — Galabau Daniel Wolff */

/* ---------- Hero (Start) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--c-hell);
}
.hero__bild { position: absolute; inset: 0; z-index: -1; }
.hero__bild picture { height: 100%; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; }
.hero__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12, 26, 17, 0.72) 0%, rgba(12, 26, 17, 0.38) 55%, rgba(12, 26, 17, 0.15) 100%),
    linear-gradient(to top, rgba(12, 26, 17, 0.65), transparent 40%);
}
.hero__inhalt { width: 100%; padding-block: 8rem 6rem; }
.hero__ort {
  font-size: var(--fs-klein);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sonne);
  margin-bottom: 1.2rem;
}
.hero h1 { color: #fff; max-width: 12ch; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
@media (min-width: 768px) { .hero h1 { max-width: 17ch; } }
.hero__lead { color: rgba(248, 246, 239, 0.92); margin-top: 1.4rem; max-width: 34rem; text-shadow: 0 1px 14px rgba(0,0,0,0.4); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.2rem; }
.hero__pfeil {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 2rem; height: 2rem; color: rgba(248, 246, 239, 0.8);
}
.js-motion .hero__pfeil { animation: nicken 2s ease-in-out infinite; }
@keyframes nicken { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------- Vertrauens-Leiste ---------- */
.leiste { padding-block: 1.6rem; border-bottom: 1px solid var(--c-linie); background: var(--c-creme-hell); }
.leiste__chips { justify-content: center; }
.leiste .chip { border-color: transparent; background: transparent; font-weight: 600; }

/* ---------- Story-Sektion ---------- */
.story-sektion { padding-bottom: var(--raum-sektion); }
.story-sektion .spanne:first-child { margin-bottom: var(--raum-inhalt); }
.story-sektion h2 { max-width: 22ch; }

/* ---------- Karten-Raster ---------- */
.raster-karten {
  display: grid;
  gap: 1.6rem;
  margin-top: var(--raum-inhalt);
}
@media (min-width: 768px) { .raster-karten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .raster-karten { gap: 2rem; } }

/* ---------- Zweispalter ---------- */
.raster-2 {
  display: grid;
  gap: var(--raum-block);
  align-items: center;
}
@media (min-width: 1024px) {
  .raster-2 { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 5rem); }
  .raster-2--tausch > .parallax-rahmen { order: -1; }
}
.raster-2 .parallax-rahmen { box-shadow: var(--schatten-tief); }
.raster-2 .parallax-rahmen img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

/* Haken-Liste */
.haken { display: grid; gap: 0.7rem; margin-block: 1.4rem; max-width: var(--breite-text); }
.haken li { display: flex; gap: 0.7rem; align-items: flex-start; }
.haken li::before {
  content: "";
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--c-moos) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23122619" stroke-width="3.4"><path d="m5 13 4 4L19 7"/></svg>') center / 62% no-repeat;
}

/* Zahlen-Zeile */
.zahlen-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-block: 1.8rem;
}
.zahlen-zeile > div { display: grid; gap: 0.3rem; }

/* ---------- Galerie ---------- */
.galerie-sektion { background: var(--c-creme-hell); }
.galerie {
  display: grid;
  gap: 1.2rem;
  margin-top: var(--raum-inhalt);
}
.galerie figure { display: grid; gap: 0.5rem; }
.galerie img {
  border-radius: var(--radius-gross);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: var(--schatten);
}
.galerie__gross img { aspect-ratio: 16 / 8.5; }
@media (min-width: 768px) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .galerie__gross { grid-column: 1 / -1; }
}

/* ---------- Ablauf-Schritte ---------- */
.schritte {
  display: grid;
  gap: 1.8rem;
  margin-top: var(--raum-inhalt);
  counter-reset: schritt;
  list-style: none;
}
.schritte li {
  position: relative;
  padding: 1.8rem 1.6rem 1.6rem;
  border: 1px solid rgba(248, 246, 239, 0.16);
  border-radius: var(--radius-gross);
  background: rgba(248, 246, 239, 0.05);
}
.schritte__nr {
  display: inline-grid;
  place-content: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--c-moos);
  color: var(--c-tanne-tief);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.schritte h3 { font-size: var(--fs-h4); font-family: var(--f-text); font-weight: 600; margin-bottom: 0.5rem; }
@media (min-width: 1024px) { .schritte { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Orte ---------- */
.orte-sektion { background: var(--c-tanne-tief); overflow: hidden; }
.orte-sektion .spanne:first-child { margin-bottom: var(--raum-inhalt); }
.orte-band { padding-block: 0.6rem; }
.orte-hinweis { margin-top: 1.6rem; }

/* ---------- Kontakt ---------- */
.kontakt { scroll-margin-top: 90px; }
.kontakt form {
  display: grid;
  gap: 1.1rem;
  background: var(--c-creme-hell);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: var(--schatten);
}
.feld-zeile { display: grid; gap: 1.1rem; }
@media (min-width: 768px) { .feld-zeile { grid-template-columns: 1fr 1fr; } }
.kontakt__direkt { display: grid; gap: 0.8rem; justify-items: start; margin-top: 1.6rem; }
.kontakt .raster-2 { align-items: start; }

/* ---------- Unterseiten ---------- */
.unterhero {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  color: var(--c-hell);
  padding-top: 6rem;
}
.unterhero .hero__bild { position: absolute; inset: 0; z-index: -1; }
.unterhero .hero__schleier {
  background:
    linear-gradient(to top, rgba(12, 26, 17, 0.78), rgba(12, 26, 17, 0.18) 55%),
    linear-gradient(to right, rgba(12, 26, 17, 0.35), transparent 60%);
}
.unterhero__inhalt { width: 100%; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.unterhero h1 { color: #fff; font-size: clamp(2.3rem, 5.5vw, 4.2rem); max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,0.4); }
.unterhero .lead { color: rgba(248, 246, 239, 0.92); margin-top: 1rem; max-width: 36rem; }

.leistungs-liste { display: grid; gap: 1.6rem; margin-top: var(--raum-inhalt); }
@media (min-width: 768px) { .leistungs-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .leistungs-liste--3 { grid-template-columns: repeat(3, 1fr); } }
.leistung {
  background: var(--c-creme-hell);
  border: 1px solid var(--c-linie);
  border-radius: var(--radius-gross);
  padding: 1.8rem 1.6rem;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}
.leistung__icon {
  width: 3rem; height: 3rem;
  border-radius: 12px;
  display: grid; place-content: center;
  background: rgba(127, 176, 105, 0.16);
  color: var(--c-moos-tief);
  margin-bottom: 0.4rem;
}
.leistung__icon svg { width: 1.5rem; height: 1.5rem; }
.leistung ul { display: grid; gap: 0.35rem; font-size: var(--fs-klein); color: var(--c-text-soft); }
.leistung ul li { display: flex; gap: 0.5rem; align-items: baseline; }
.leistung ul li::before { content: "—"; color: var(--c-moos-tief); flex: none; }

/* CTA-Band am Seitenende */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin-inline: auto; }
.cta-band .lead { margin: 1rem auto 0; }
.cta-band__knoepfe { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-top: 2rem; }

/* FAQ */
.faq { max-width: var(--breite-text); margin-top: var(--raum-inhalt); }

/* ---------- Ratgeber / Blog ---------- */
.ratgeber-kopf { padding-top: 9rem; }
.ratgeber-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.ratgeber-filter .chip { cursor: pointer; transition: background var(--zeit), border-color var(--zeit); }
.ratgeber-filter .chip[aria-pressed="true"] {
  background: var(--c-tanne);
  border-color: var(--c-tanne);
  color: var(--c-hell);
}
.ratgeber-raster { display: grid; gap: 1.6rem; margin-top: var(--raum-inhalt); }
@media (min-width: 768px) { .ratgeber-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .ratgeber-raster { grid-template-columns: repeat(3, 1fr); } }
.karte__meta { display: flex; gap: 0.8rem; font-size: var(--fs-klein); color: var(--c-text-soft); }
.karte__meta .kat { color: var(--c-moos-tief); font-weight: 600; }

/* Artikel */
.artikel-kopf { padding-top: 9rem; padding-bottom: 0; }
.artikel-kopf .karte__meta { margin-bottom: 1rem; }
.artikel-kopf h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 24ch; }
.artikel-bild { margin-top: var(--raum-inhalt); }
.artikel-bild img { border-radius: var(--radius-gross); width: 100%; aspect-ratio: 16 / 8; object-fit: cover; box-shadow: var(--schatten); }
.artikel {
  padding-block: var(--raum-block) var(--raum-sektion);
}
.artikel h2 { font-size: var(--fs-h3); margin-top: 2.4rem; margin-bottom: 0.8rem; }
.artikel h3 { font-size: var(--fs-h4); font-family: var(--f-text); font-weight: 600; margin-top: 1.6rem; margin-bottom: 0.5rem; }
.artikel p { margin-bottom: 1rem; }
.artikel ul, .artikel ol { margin: 0 0 1rem 1.2rem; max-width: var(--breite-text); display: grid; gap: 0.4rem; }
.artikel .infobox {
  background: rgba(127, 176, 105, 0.12);
  border-left: 4px solid var(--c-moos-tief);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.6rem 0;
  max-width: var(--breite-text);
}
.artikel .infobox p:last-child { margin-bottom: 0; }
.artikel-fuss {
  border-top: 1px solid var(--c-linie);
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  max-width: var(--breite-text);
}

/* Rechtsseiten */
.rechtsseite { padding-top: 9rem; }
.rechtsseite h1 { margin-bottom: 1.6rem; }
.rechtsseite h2 { font-size: var(--fs-h3); margin-top: 2.2rem; margin-bottom: 0.7rem; }
.rechtsseite p { margin-bottom: 0.8rem; }
.platzhalter {
  background: rgba(233, 180, 76, 0.18);
  border: 1px dashed var(--c-sonne);
  border-radius: 8px;
  padding: 0.15rem 0.5rem;
  font-weight: 600;
}

/* Mobile Anrufleiste: Platz am Seitenende freihalten */
@media (max-width: 1023px) {
  .fuss { padding-bottom: 6rem; }
}