/* Media Queries — MUSS als letztes Stylesheet geladen werden Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 913-1017 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ /* ============ RESPONSIVE ============ */ @media (max-width: 1180px) { .nav-side a:not(.nav-phone) { padding: 8px 9px; font-size: 13px; } .nav-phone { margin-left: 6px; padding: 9px 13px !important; } .adopt-grid { grid-template-columns: minmax(0,1fr) 300px; gap: 48px; } } @media (max-width: 1060px) { .nav-side { display: none; } .nav-burger { display: flex; } .header-grid { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 900px) { .brand-center img { width: 108px; height: 108px; top: 14px; } .swall { grid-template-columns: repeat(2, 1fr); } .swall-cta { grid-column: 1 / -1; grid-row: auto; padding: 34px 20px; } .split, .dog-cards, .values, .feed-grid, .race-layout { grid-template-columns: 1fr; } .race-layout { gap: 40px; } /* Tablet hoch: 4/4.6-Porträt füllte sonst den ganzen Viewport, Headline rutschte unter den Fold. Auf Phones (384px Bildhöhe) ohne Effekt. */ .split-photo img { max-height: 58vh; } .split-text p { max-width: 62ch; } /* LA RACE einspaltig: Sticky MUSS weg (Foto pinnte, Timeline scrollte DRÜBER — Text auf Hundefoto). Reihenfolge bleibt DOM-Reihenfolge (Foto → Fazit-Karte → Timeline): visuelle Umsortierung per `order` würde Screenreader-Lesereihenfolge und Auge auseinanderreißen (WCAG 1.3.2). */ .race-side { position: static; } /* Dossier-Karte: einspaltig als Abschluss-Recap hinter den Schritten (DOM-Reihenfolge bleibt — keine order-Tricks, WCAG 1.3.2) */ .adopt-grid { grid-template-columns: 1fr; gap: 44px; } .adopt-rail { position: static; max-width: 560px; } /* Karten: 4/4.4 unbegrenzt = 712×783px-Monolith auf Tablet hoch (Label unterm eigenen Fold). Auf Phones (367px) ohne Effekt. */ .dog-card { max-height: 58vh; } /* Gestapelt zurück zu Foto-zuerst: order:2 riss sonst Marvels Foto unter den Text (visuell ≠ DOM/Screenreader — gleiche WCAG-1.3.2-Logik wie #race) */ .split-swap .split-photo { order: 0; } .values > li { display: block; padding-inline: 20px; } .values > li + li { border-left: none; border-top: 1px solid rgba(245,241,230,0.18); margin-top: 18px; padding-top: 26px; } /* Mobile: Start mit beiden Augen, Zoom-Ziel ist das linke Auge (mittig = nur Fell) */ .ch-eyes img { object-position: 26% 50%; } .cine-title { bottom: 4%; } /* Eyebrow einzeilig halten (unter 480px fällt „Noyelles-Godault" weg) */ .cine-title .place { font-size: clamp(10px, 2.6vw, 11.5px); letter-spacing: 0.09em; white-space: nowrap; } /* CTAs nebeneinander statt gestapelt — spart ~70px Höhe, dadurch wird der Scroll-Hinweis überhaupt erst sichtbar (iPhone-Befund) */ .cine-title { padding: 0 16px; } .cine-ctas { gap: 8px; flex-wrap: nowrap; margin-top: 20px; } .cine-ctas .btn { padding: 11px 14px; font-size: 12.5px; letter-spacing: 0; white-space: nowrap; flex: 0 1 auto; } /* Kleineres Logo (108px statt 148px) -> Schlusszeile darf höher stehen */ .line-3 { padding-top: max(14dvh, 148px); } /* Schmalformat: seitlicher Schleier enger, sonst frisst er das Motiv */ .letterbox::after { background: linear-gradient(90deg, var(--cine-bg) 2%, rgba(0,0,0,0) 24% 76%, var(--cine-bg) 98%), linear-gradient(180deg, var(--cine-bg) calc(var(--strip-t, 37%) - 10%), rgba(0,0,0,0) calc(var(--strip-t, 37%) + 4%) calc(100% - var(--strip-b, 37%) - 4%), var(--cine-bg) calc(100% - var(--strip-b, 37%) + 10%)); } /* Motiv nach rechts schieben (kleinerer X-Wert = Subjekt wandert nach rechts): der Hundekopf lag sonst genau unter der Headline. Scrim vertikal statt horizontal — auf Schmalformat wirkt L→R nicht. */ .quote-band { min-height: 520px; } .qb-media { background-position: 26% 50%; } .quote-band::before { background: linear-gradient(180deg, rgba(12,14,11,0.28) 0%, rgba(12,14,11,0.72) 46%, rgba(12,14,11,0.50) 100%); } .quote-inner { padding: 70px 22px; } /* Frühere Würfe: drei Welpen je Reihe, und die Kopfzeile des Jahrgangs bricht um — Jahr und Eltern nebeneinander, die Anzahl darunter. */ #chiots .portees { margin-top: 64px; } /* Nur die beiden Maße ändern sich — die Spaltenrechnung im Stylesheet bleibt dieselbe. Passt die gewünschte Spaltenzahl nicht mehr in die Breite, bricht die Reihe von selbst früher um; mittig bleibt sie trotzdem. */ #chiots .pup-cards { --breit: 112px; --luecke: 14px; gap: 26px var(--luecke); } #chiots .pup-rund img { width: 96px; height: 96px; } #chiots .pt-kopf { flex-wrap: wrap; gap: 10px 16px; padding-right: 26px; position: relative; } #chiots .pt-kopf::after { position: absolute; right: 4px; top: 30px; margin: 0; } #chiots .pt-zahl { flex-basis: 100%; } #chiots .pt-portrait img { width: 46px; height: 46px; } } @media (max-width: 480px) { /* Auf dem Handy passen höchstens drei Gesichter nebeneinander; die Reihe bricht dort von selbst um. Zehn Welpen sind damit vier kurze Reihen statt eines Bildschirms voller Karten. */ #chiots .pup-cards { --breit: 94px; --luecke: 10px; gap: 22px var(--luecke); } #chiots .pup-rund img { width: 84px; height: 84px; box-shadow: 0 0 0 2px rgba(78,116,115,0.28); } #chiots .pup-name { font-size: 17px; } #chiots .pup-note { font-size: 12px; } /* Das Paar darf umbrechen — „Falco vom Hasenborn" passt sonst nicht neben die Mutter. Das × bleibt dabei bei ihr, sonst beginnt eine Zeile damit. */ /* Das Elternpaar bekommt auf dem Handy eine eigene Zeile und bleibt darin ZUSAMMEN: Vorher rutschte das Foto des Vaters allein in die nächste Zeile, weil Jahreszahl und Paar sich eine Zeile teilten. Jetzt steht die Jahreszahl für sich, das Paar darunter über die volle Breite — und mit kleineren Gesichtern passen beide nebeneinander. Umbrechen darf die Reihe weiterhin — nur nicht mitten durch ein Elternteil: `flex: 0 0 auto` hält Foto und Name zusammen. Ein Versuch mit `nowrap` sah auf 320 px übel aus, dort schrumpften die Namen unter ihre eigene Wortbreite und schoben sich übereinander. Jetzt passt alles bis hinunter zu 360 px in eine Zeile, und darunter wandert der Vater sauber in die zweite. */ /* Gemessen statt geschätzt: Mit „Mystic × Falco vom Hasenborn" braucht das Paar 291 px, zur Verfügung stehen 274 px auf einem 360er und 304 px auf einem 390er. Kleinere Gesichter (30 statt 34), engere Abstände (7 statt 9) und eine Spur kleinere Schrift sparen die fehlenden 17 px — damit passt die Reihe ab 360 px in eine Zeile. Darunter bricht sie um, und das ist richtig so: Bei 234 px wäre der Rüdenname sonst unleserlich klein. */ #chiots .pt-paar { flex-basis: 100%; flex-wrap: wrap; gap: 7px; } #chiots .pt-elter { flex: 0 0 auto; gap: 7px; } #chiots .pt-name { font-size: 14.5px; } #chiots .pt-x { font-size: 14px; } #chiots .pt-portrait img { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(78,116,115,0.28); } /* Kurzform der Ortszeile: bleibt lesbar statt 8px-Fliegendreck */ .cine-title .place-mid { display: none; } /* Timeline: Einzug verringern (mehr Zeilenbreite), Items dichter. Dot-Mitte bleibt bei 11px — Linie (left 10) passt weiterhin. */ .tl { padding-left: 28px; } .tl-item::before { left: -28px; } .tl-item { padding-bottom: 30px; } #adopter .step { grid-template-columns: 40px 1fr; gap: 14px; } #adopter .step-num { font-size: 24px; padding-right: 4px; } .dossier-card { padding: 26px 22px 22px; } } /* Kurze Viewports (Laptops 768p, Landscape-Phones): kompaktere Hero-Typo */ @media (max-height: 720px) { .cine-title h1 { font-size: clamp(26px, 4vw, 44px); } .cine-title .place { font-size: 11px; } .cine-ctas { margin-top: 18px; } .btn { padding: 12px 22px; font-size: 14px; } /* Kompakt statt weg: gerade auf Laptops ist der Scroll-Hinweis wichtig */ .scroll-cue { margin-top: 12px; font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .qb-media { transform: none !important; } html { scroll-behavior: auto; } /* Die Schritt-Navigation bleibt (Swiper läuft mit speed≈0 weiter), aber nichts bewegt sich mehr: Zustände schalten hart um statt zu gleiten. */ .chapter, .chapter img, .letterbox, .letterbox::after, .veil, .cine-title, .cine-line { transition: none !important; } .chapter img { transform: none !important; } .cine-title, .cine-line { transform: none !important; } }