/* ==========================================================================
   Zustände & Breakpoints, die im Entwurf per JavaScript gesetzt wurden.
   Wird nach pages.css geladen.
   ========================================================================== */

/* ---------- Startseite · Hero (unter 1100px: Bild oben verankert, Text unten) ---------- */
.home-hero__div1 { position: absolute; inset: -6% 0; height: auto; }
.home-hero__img1 { width: 100%; margin-left: 0; object-position: 48% 0%; transform-origin: 50% 0%; transform: scale(1.08); }
.home-hero__div2 { display: block; }
.home-hero__div3, .home-hero__div4 { display: none; }
.home-hero__div6 { padding: clamp(150px, 34vh, 300px) clamp(20px, 4vw, 48px) clamp(84px, 12vh, 120px); }

@media (min-width: 1100px) {
	.home-hero__img1 { width: 140%; margin-left: -8%; object-position: 50% 30%; transform-origin: 50% 50%; transform: none; }
	.home-hero__div2 { display: none; }
	.home-hero__div3, .home-hero__div4 { display: block; }
	.home-hero__div6 { padding: clamp(130px, 18vh, 180px) clamp(20px, 4vw, 48px) clamp(96px, 14vh, 150px); }
}

/* ---------- Startseite · Ablauf: geschwungene Verbindungslinie erst ab 1000px ---------- */
.home-ablauf__svg1 { display: none; }
@media (min-width: 1000px) { .home-ablauf__svg1 { display: block; } }

/* ---------- Startseite · Instagram-Raster ---------- */
.home-instagram__div2 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .home-instagram__div2 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .home-instagram__div2 { grid-template-columns: repeat(6, 1fr); } }

/* ---------- FAQ-Akkordeon ---------- */
.faq__item { border: 1px solid rgba(179, 145, 79, .18); }
.faq__item.is-open { border-color: rgba(179, 145, 79, .6); }
.faq__icon { transform: rotate(0deg); background: transparent; color: #1f3a2a; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: #1f3a2a; color: #e6c886; }
.faq__answer { display: none; }
.faq__item.is-open .faq__answer { display: block; }

/* ---------- Mein Tier – Mein Spiegel · Module (hell / letztes Modul dunkel) ---------- */
.mtms-inhalt__div2 { background: linear-gradient(180deg, #fffdf9 0%, #f6f1e6 100%); color: #24302a; border: 1px solid rgba(179, 145, 79, .22); }
.mtms-inhalt__div3 { color: #b3914f; }
.mtms-inhalt__div2.is-dark { background: linear-gradient(160deg, #27483a 0%, #1f3a2a 60%, #182f22 100%); color: #f5f0e6; border-color: transparent; }
.mtms-inhalt__div2.is-dark .mtms-inhalt__div3 { color: #e6c886; }

/* ---------- Formularfelder ----------
   Im Entwurf erben die Eingabefelder der Startseite die Schrift nicht (Systemschrift, Zeilenhöhe „normal“ = 51px Feldhöhe).
   Wir setzen überall Jost, behalten aber die Feldhöhe des Entwurfs bei. */
.home-kontakt__form1 .field--dark { line-height: 18px; }

/* ---------- Sehr breite Bildschirme (ab 1500px, z. B. 27–32 Zoll) ----------
   Der Entwurf ist auf ~1440px ausgelegt. Darüber (Wunsch Fernando):
   Hero-Text breiter fassen (bis 1920px), damit der Text links vom Motiv bleibt statt davor zu rücken,
      und den Text etwas höher setzen. Bis 1500px bleibt alles exakt wie im Entwurf. */
@media (min-width: 1500px) {
	/* Nur der Hero-Text wird breiter gefasst. Der Header bleibt bewusst im 1320px-Raster des Entwurfs,
	   damit der Abstand Logo ↔ Navigation auf grossen Bildschirmen nicht weiter wächst (Wunsch Fernando). */
	.home-hero__div6, .subhero__inner { max-width: min(1920px, 92vw); }
	.home-hero__div6 { padding-bottom: clamp(140px, 19vh, 240px); }
}

/* ---------- Smartphones (unter 700px): Startseiten-Hero passt in den SICHTBAREN Bereich ----------
   Der Entwurf rechnet mit 100vh und 34vh Abstand oben. Auf echten Handys zieht der Browser seine Leisten ab –
   der Textblock rutschte dadurch unter die Browserleiste (Wunsch Fernando). Deshalb: sichtbare Höhe (svh),
   kompakterer Textblock, Stichpunkte erst ab 700px. */
@media (max-width: 699px) {
	.home-hero__section1 { min-height: 100svh; }
	.home-hero__div6 { padding: 120px clamp(20px, 4vw, 48px) 76px; }
	.home-hero__div1 { inset: -16% 0 -6%; } /* Foto höher ansetzen: Augen und Mund bleiben über dem Text frei */
	.home-hero__div8 { margin-bottom: 16px; font-size: 11px; letter-spacing: .2em; gap: 10px; white-space: nowrap; }
	.home-hero__div8 .eyebrow__line--gold { width: 24px; flex: none; }
	.home-hero__p1 { margin-top: 18px; }
	.home-hero__div9 { margin-top: 26px; gap: 12px; }
	.home-hero__div10, .home-hero__div11 { display: none; }
}

/* ---------- Geschwungene Linien weich ein-/ausblenden ----------
   Die Linien liegen in Boxen, die mitten in der Sektion beginnen bzw. enden – ihr Anfang/Ende wirkte „abgeschnitten“
   (Wunsch Fernando). Rechts verankerte Boxen blenden von links ein, links verankerte nach rechts aus. */
.home-hero__div5, .stripes--subhero, .home-mein-tier-mein-spiegel__div1, .leist-kurse__div1,
.card__stripes, .home-ablauf__svg2, .preise-liste__svg1 {
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.stripes--top-left, .home-faq__div1 {
	-webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 60%, transparent 100%);
}