/* Sektionen: generisch, Race, Chiens, Promesses, Adopter, Zitat, Chiots Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 404-712 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ /* ============ SEKTIONEN ============ */ section.block { padding: 110px 0; } section.block.alt { background: var(--bg-alt); transition: background 0.5s ease; } .lead-in { font-family: var(--font-display); font-style: italic; /* dunkleres Teal statt --accent: auf Olive 5.31:1 (accent nur 4.02). Dunkle Sections überschreiben mit --band-kicker. */ font-size: 19px; color: #44605F; margin-bottom: 10px; } .section-head { margin-bottom: 54px; max-width: 640px; } .section-head h2, .split-text h2 { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 460; line-height: 1.14; letter-spacing: -0.01em; text-wrap: balance; } /* :not(.lead-in): Specificity-Falle — ohne sie überschreibt diese Regel den Teal-Kicker in JEDEM section-head (gleicher Bug wie bei .split-text) */ .section-head p:not(.lead-in) { margin-top: 14px; color: var(--ink-soft); font-size: 17px; } .split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .split-photo { position: relative; } .split-photo img { border-radius: var(--radius); aspect-ratio: 4/4.6; object-fit: cover; width: 100%; box-shadow: 0 24px 60px rgba(35,28,20,0.16); } .photo-tag { position: absolute; left: 20px; bottom: 20px; z-index: 1; background: var(--card-bg); color: var(--ink); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; padding: 9px 16px; border-radius: 999px; box-shadow: 0 6px 18px rgba(30,24,18,0.15); } .split-text h2 { margin-bottom: 22px; } /* :not(.lead-in):not(.sub): sonst schlägt diese Regel Teal-Kicker UND .profil .sub (Specificity (0,2,1) > (0,2,0) — beide wurden grau statt accent gerendert). Accent #4E7473 auf Creme = 4.57:1, knapp über AA — NICHT weiter aufhellen! */ .split-text p:not(.lead-in):not(.sub) { margin-bottom: 16px; color: var(--ink-soft); } .split-text p strong { color: var(--ink); font-weight: 600; } .badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; list-style: none; margin-left: 0; padding-left: 0; } .badge { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--accent-2); color: var(--accent-2-text, var(--accent-2)); } /* Häkchen: liest sich als Nachweis, nicht als Button (false affordance). Alt-Text-Syntax "/ ''" markiert es für Screenreader als dekorativ. */ .badge::before { content: "✓ "; content: "✓ " / ""; color: var(--accent); } /* La Race: Sticky-Foto + Zeitleiste auf eigenem Grund */ /* Seit dem Zwei-Farben-System sind Body-Grund und race-bg identisch (Olive); die früheren #race-Scoped-Töne sind jetzt globale Defaults. */ #race { background: var(--race-bg); transition: background 0.5s ease; } .race-layout { display: grid; grid-template-columns: 0.85fr 1.3fr; gap: 64px; align-items: start; } /* clamp: auf niedrigen Viewports rutscht der Pin so weit hoch, dass die Notiz-Karte sichtbar bleibt. 640 ≈ gerenderte Höhe von .race-side (Anatomie-Tafel 4:3 bei 0.85fr-Spalte + Caption + Note-Karte): neu prüfen, wenn Bild, Caption-Text oder Spaltenverhältnis ändern! */ .race-side { position: sticky; top: clamp(12px, calc(100vh - 640px), 130px); } /* Anatomie-Tafel: natürliches 4:3, ungecroppt (Tafel nie beschneiden!), feiner Caramel-Rahmen — Tafel-Grund und Olive sind fast, nicht exakt gleich */ .race-side img { width: 100%; display: block; border: 1px solid rgba(150,104,59,0.32); border-radius: var(--radius); } .race-caption { margin-top: 12px; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 14.5px; color: var(--ink-soft); } .race-note { margin-top: 22px; padding: 22px 24px; /* warm getönt statt SaaS-Weiß: liest sich als Teil der Olive-Section */ background: #FDFBF4; border: 1px solid rgba(150,104,59,0.22); /* Fallback ohne color-mix() */ border: 1px solid color-mix(in srgb, var(--accent-2) 22%, transparent); border-radius: var(--radius); box-shadow: 0 10px 34px rgba(35,28,20,0.08); font-size: 15.5px; color: var(--ink-soft); } .race-note strong { color: var(--ink); } .tl { position: relative; padding-left: 36px; } .tl::before { /* left 10 = Linien-Mitte 11px — deckungsgleich mit der Punkt-Mitte (Dot: content-box, 16px + 2×3px Border, left -36 → Mitte bei 11px) */ content: ""; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: rgba(78,116,115,0.4); /* Fallback ohne color-mix() */ background: color-mix(in srgb, var(--accent) 40%, transparent); } .tl-item { position: relative; padding-bottom: 40px; } .tl-item:last-child { padding-bottom: 0; } .tl-item::before { content: ""; position: absolute; left: -36px; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--race-bg); box-shadow: 0 0 0 2px rgba(78,116,115,0.55); /* Fallback ohne color-mix() */ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); } .tl-item .when { font-family: var(--font-display); font-style: italic; /* accent-2-text statt accent-2: 4.95:1 auf Olive (accent-2 nur 3.77) */ font-size: 17px; color: var(--accent-2-text, var(--accent-2)); display: block; margin-bottom: 6px; } .tl-item h3 { font-family: var(--font-display); font-size: 24px; font-weight: 520; margin-bottom: 10px; } .tl-item p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 12px; } .tl-item ul { margin: 0 0 12px 18px; font-size: 15px; color: var(--ink-soft); } .tl-item li { margin-bottom: 5px; } /* Hunde-Portraits (unter den Karten) */ .profil { margin-top: 70px; } .profil .split-photo img { aspect-ratio: 4/3.6; } .split-swap .split-photo { order: 2; } .crop-high { object-position: center 30%; } /* Expositions: Pokale stehen am unteren Bildrand — Crop MUSS unten ankern */ #expositions .split-photo img { aspect-ratio: 3/4; object-position: center bottom; } .expo-cta { margin-top: 22px; } .profil h3 { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 36px); font-weight: 480; margin-bottom: 6px; } .profil .sub { font-family: var(--font-display); font-style: italic; color: var(--accent); font-size: 18px; margin-bottom: 16px; } .profil p { color: var(--ink-soft); margin-bottom: 14px; } /* Adopter: 7 Schritte (echte Sequenz) */ /* Adopter: dunkles Tannengrün-Band (User-Entscheid; stellt zugleich den Wechsel-Rhythmus Olive→Dunkel→Olive→Dunkel her — vorher Olive³ ohne Seam). Layout: Schritte links + sticky Dossier-Karte rechts (füllt die 324px Leerraum-Spalte; Creme-Karte auf Fir = Umkehrung der Chiots-Karte). */ #adopter { background: var(--band-bg); } #adopter .section-head h2 { color: var(--band-ink); } #adopter .lead-in { color: var(--band-kicker); } #adopter .section-head p:not(.lead-in) { color: var(--band-body); } .adopt-grid { display: grid; grid-template-columns: minmax(0,1fr) 350px; gap: 76px; align-items: start; } .steps { max-width: none; } /* #adopter-Scoping: .step ist ein generischer Name — ungescoped würden die band-Farben bei künftiger CMS-Wiederverwendung auf hellem Grund lecken */ #adopter .step-list { list-style: none; margin: 0; padding: 0; } #adopter .step { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid rgba(245,241,230,0.18); } #adopter .step:first-child { border-top: none; padding-top: 10px; } /* Kreis weg: nackte kursive Caramel-Ziffer (Vokabular von .p-num/.lc-times). Der Teal-Kreis war ein Waisen-Pattern und hätte auf Fir 1.97:1. */ #adopter .step-num { color: var(--band-num); font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1; display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 10px; padding-top: 3px; } #adopter .step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 530; margin-bottom: 8px; color: var(--band-ink); } #adopter .step p { font-size: 15.5px; color: var(--band-body); margin-bottom: 10px; } .phase-label { display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--band-kicker); margin: 44px 0 6px; } .steps > .phase-label:first-child { margin-top: 0; } .phase-label::after { content: ""; flex: 1; height: 1px; background: rgba(245,241,230,0.18); } .phase-label .pl-num { letter-spacing: 0.08em; font-size: 14.5px; } .adopt-rail { position: sticky; top: calc(var(--header-h) + 24px); } .dossier-card { background: var(--creme); color: var(--ink); border-radius: var(--radius); padding: 32px 30px 26px; box-shadow: 0 18px 40px rgba(0,0,0,0.18); } .dossier-card .dc-kicker { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--accent-2-text); margin-bottom: 6px; } .dossier-card h3 { font-family: var(--font-display); font-size: 25px; font-weight: 520; margin-bottom: 6px; } .dossier-card ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14.5px; color: var(--ink-soft); } .dossier-card li { padding: 11px 0 11px 26px; border-top: 1px solid rgba(128,116,100,0.22); line-height: 1.45; position: relative; margin: 0; } .dossier-card li:first-child { border-top: none; padding-top: 2px; } .dossier-card li::before { content: "\2713"; content: "\2713" / ""; position: absolute; left: 2px; color: var(--accent); font-size: 14px; } .dossier-card .dc-note { margin-top: 14px; font-size: 13.5px; font-style: italic; font-family: var(--font-display); color: var(--ink-soft); } .rail-cta { margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: 16.5px; line-height: 1.5; color: var(--band-body); } .rail-cta a { color: var(--band-kicker); text-underline-offset: 3px; } /* Promesses: dunkles Tannengrün-Band — löst das Beige-Salbei-Beige-Sandwich (Salbei war der einzige Kühlton zwischen zwei Warmtönen bei gleicher Helligkeit) und gibt dem Schwur der Seite sein Gewicht. Kontraste auf #2E4640: Creme 9.2:1 · Body #D8DED4 7.4:1 · Kicker #9DBFBD 5.1:1 · Ziffern #D2A876 4.65:1 */ #promesses { background: var(--band-bg); } #promesses .section-head h2 { color: var(--band-ink); } #promesses .lead-in { color: var(--band-kicker); } .values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; } .values > li { padding: 8px 36px; /* Subgrid: Ziffer/h3/p teilen sich Zeilen — Absätze starten auf einer Linie, auch wenn eine Überschrift zweizeilig umbricht (1024px). VERTRAG: exakt 3 Kinder (span.p-num + h3 + p) je li — span 3! */ display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } .values > li + li { border-left: 1px solid rgba(245,241,230,0.18); } .values .p-num { display: block; font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--band-num); margin-bottom: 8px; } .values h3 { font-family: var(--font-display); font-size: 24px; font-weight: 520; margin-bottom: 10px; color: var(--band-ink); text-wrap: balance; } .values p { font-size: 15.5px; color: var(--band-body); } /* Nos chiens: dunkles Tannengrün (User-Wunsch, validiert: Olive→Fir 7.92:1 ersetzt den unsichtbaren Olive→Salbei-Seam 1.05:1). Text via --band-Tokens. */ #chiennes { background: var(--band-bg); } #chiennes .section-head h2, #chiennes .profil h3 { color: var(--band-ink); } #chiennes .lead-in { color: var(--band-kicker); } #chiennes .section-head p:not(.lead-in) { color: var(--band-body); } #chiennes .profil p { color: var(--band-body); } #chiennes .profil .sub { color: var(--band-kicker); } /* Teal #7FA9A8 wäre 3.94:1 — Fail */ .dog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .dog-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/4.4; display: block; } .dog-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .dog-card:hover img { transform: scale(1.02); } /* Kräftigerer, höherer Schleier: Eyebrow saß bei 33–39% Kartenhöhe, wo der alte Verlauf nur noch α≈0.25 hatte (Spirit-Karte: Median 1.95:1 = unsichtbar) */ .dog-card .veil2 { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,18,14,0.88) 0%, rgba(15,18,14,0.42) 48%, rgba(0,0,0,0) 78%); } .dog-card .label { position: absolute; left: 28px; right: 28px; bottom: 26px; color: #F6F0E4; text-shadow: 0 1px 8px rgba(15,18,14,0.55); /* Sicherheitsnetz für helle Foto-Hotspots */ } .dog-card .label .kicker { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: #F6F0E4; font-weight: 700; } .dog-card .label h3 { font-family: var(--font-display); font-size: 34px; font-weight: 480; line-height: 1.1; margin-top: 6px; } .dog-card .label p { font-size: 16.5px; line-height: 1.35; opacity: 0.85; margin-top: 6px; font-style: italic; font-family: var(--font-display); text-wrap: pretty; } .quote-band { position: relative; min-height: 440px; display: flex; align-items: center; overflow: hidden; /* Desktop: klassischer fixed-Hintergrund (dort funktioniert er einwandfrei) */ background-image: url("../img/accueil-15.jpg"); /* Moderne Formate nachgestellt — Browser ohne image-set() behalten das JPEG der Zeile darueber (117 kB gegen 25 kB als AVIF). */ background-image: image-set(url("../img/v/accueil-15.avif") type("image/avif"), url("../img/v/accueil-15.webp") type("image/webp"), url("../img/accueil-15.jpg") type("image/jpeg")); background-size: cover; background-position: center 55%; background-attachment: fixed; } /* Desktop braucht die JS-Ebene nicht */ .qb-media { display: none; } /* Nur Touch: eigene Bildebene statt background-attachment: fixed. Grund: iOS ignoriert `fixed`, und ein per background-position verschobenes Bild ohne Höhenreserve gibt den Rand frei (die Kachel-Wiederholung wurde sichtbar). Diese Ebene ist oben/unten 70px größer als der Container und wird per transform bewegt — GPU-beschleunigt, ohne Blitzer. */ @media (hover: none) { .quote-band { background-image: none; background-attachment: scroll; background-color: var(--cine-bg); } .qb-media { display: block; position: absolute; left: 0; right: 0; top: -70px; bottom: -70px; z-index: 0; background: url("../img/accueil-15.jpg") 26% 50% / cover no-repeat; background-image: image-set(url("../img/v/accueil-15.avif") type("image/avif"), url("../img/v/accueil-15.webp") type("image/webp"), url("../img/accueil-15.jpg") type("image/jpeg")); /* kein will-change: translate3d promoviert die Ebene bereits; ein dauerhafter Extra-Layer kostet auf dem Handy nur Speicher */ } } .quote-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(12,14,11,0.74) 0%, rgba(12,14,11,0.32) 55%, rgba(12,14,11,0.12) 100%); } .quote-inner { position: relative; z-index: 2; color: #F4EEE2; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: 90px 28px; } .quote-inner blockquote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.25; max-width: 22ch; text-wrap: balance; } .quote-inner cite { display: block; margin-top: 22px; font-style: normal; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose-2); } .quote-inner .btn { margin-top: 34px; } /* Faire-part de naissance: dunkelgrüne Schmuck-Karte auf hellem Grund. Farb-Scoping mit #chiots-Präfix ist PFLICHT: .split-text p:not(...) (0,3,1) würde sonst ink-soft auf Tannengrün erzwingen (1.8:1). */ .litter-card { background: var(--band-bg); border-radius: var(--radius); padding: 38px 40px; position: relative; box-shadow: 0 24px 60px rgba(35,28,20,0.20); } .litter-card::before { /* Innenrahmen wie eine gedruckte Geburtsanzeige */ content: ""; position: absolute; inset: 10px; pointer-events: none; border: 1px solid rgba(245,241,230,0.22); border-radius: calc(var(--radius) - 6px); } .lc-status { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--band-num); margin-bottom: 16px; } .lc-lockup { font-family: var(--font-display); font-weight: 460; font-size: 32px; line-height: 1.2; color: var(--band-ink); margin-bottom: 8px; } .lc-times { font-size: 30px; padding: 0 10px; color: var(--band-num); font-weight: 400; } .lc-tbd { font-style: italic; font-size: 23px; color: var(--band-kicker); font-weight: 400; } #chiots .litter-card .parents { font-style: italic; font-family: var(--font-display); color: var(--band-body); margin: 10px 0 24px; font-size: 15.5px; } #chiots .litter-card .btn-primary { background: var(--creme); color: var(--ink); box-shadow: none; } #chiots .litter-card .btn-primary:hover { background: #fff; } #chiots .split-photo img { aspect-ratio: 4/3.4; } #chiots .photo-tag { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 14.5px; letter-spacing: 0.02em; } .demo-note { margin-top: 18px; font-size: 12px; color: var(--ink-soft); border-top: 1px dashed rgba(128,116,100,0.35); padding-top: 12px; max-width: 60ch; } /* Pflichtangaben zu einem angebotenen Wurf (Art. L.214-8-1 Code rural). Steht nur auf der Seite, wenn wirklich Welpen angeboten werden — deshalb bewusst sachlich statt werblich: eine weiße Karte mit Kennzahlen, klar vom erzählenden Text der Section getrennt. Alles unter #chiots gescoped, damit die Farbregeln der Section (.split-text p:not(...) → ink-soft) hier nichts umfärben. */ #chiots .cession { margin-top: 22px; padding: 24px 26px 20px; background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(128,116,100,0.22); box-shadow: 0 10px 26px rgba(35,28,20,0.07); } #chiots .cs-titel { font-family: var(--font-display); font-weight: 520; font-size: 19px; line-height: 1.25; color: var(--ink); margin: 0 0 4px; } #chiots .cs-portee { margin-top: 16px; } #chiots .cs-portee:first-of-type { margin-top: 12px; } #chiots .cs-nom { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--accent-2-text); margin: 0 0 8px; } #chiots .cs-liste { list-style: none; margin: 0; padding: 0; } #chiots .cs-liste li { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; padding: 8px 0; margin: 0; font-size: 14px; line-height: 1.4; border-top: 1px solid rgba(128,116,100,0.18); } #chiots .cs-liste li:first-child { border-top: none; padding-top: 2px; } #chiots .cs-was { color: var(--ink-soft); } #chiots .cs-wert { color: var(--ink); font-weight: 600; text-align: right; } #chiots .cs-note { margin: 10px 0 0; font-size: 13.5px; font-style: italic; font-family: var(--font-display); color: var(--ink-soft); } #chiots .cs-fuss { margin: 16px 0 0; padding-top: 12px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid rgba(128,116,100,0.18); } @media (max-width: 700px) { /* Schmal reissen Beschriftung und Wert ohnehin um — dann lieber sauber untereinander als halb rechts, halb links ausgerichtet. */ #chiots .cs-liste li { display: block; } #chiots .cs-was { display: block; font-size: 13px; } #chiots .cs-wert { display: block; text-align: left; margin-top: 2px; } }