/* ========================================================================= nordischehunde.de — style.css Design: „Warm & erinnernd" — warme, foto-geführte Erinnerungs-Identität. Warme Serif-Headlines (Fraunces) + ruhiger Sans-Body (Source Sans 3) + dosierte Handschrift (Caveat). Erdige, entsättigte Palette aus Fell, Birke, Salbei/Flechte und Lappland-Winter; tiefes Waldgrün nur für Würde-Flächen. Akzentfarbe = das „Loh" der Hunde. ========================================================================= */ /* ---------------------------- Schriften --------------------------------- */ /* Fonts werden in der Entwicklung per Google-Fonts-CDN geladen (siehe der HTML-Seiten). Vor dem Go-Live: woff2 selbst hosten (DSGVO) und hier wieder @font-face einsetzen. Familien: Fraunces (Serif-Headlines), Source Sans 3 (Text/UI), Caveat (Handschrift-Akzent). */ /* ---------------------------- Design-Tokens ----------------------------- */ :root { /* Schriften (Entwicklung: Google-Fonts-CDN) */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-script: 'Caveat', cursive; /* Palette „Warm & erinnernd" – warm-erdig, entsättigt, foto-geführt. Helles Grundtheme; tiefes Waldgrün nur für Würde-Flächen. */ --spruce: #23312a; /* tiefer, warmer Waldton: „In Erinnerung" + Footer + Hero-Overlay */ --pine: #4a6850; /* Salbei-/Flechtengrün – Links, sekundäre Buttons */ --pine-deep: #3a5240; /* Hover */ --moss: #e3e6d8; /* zarte grünlich-warme Fläche */ --tan: #a86534; /* das „Loh" der Hunde – DER eine warme Akzent (AA: weiße Schrift ~4.6:1) */ --tan-deep: #8f5728; /* Akzent-Hover + kleiner Akzenttext (AA-sicher) */ --tan-ink: #7d4c22; /* dunkler Loh für kleinen Text auf Birke (AA ≥5:1) */ --tan-soft: #cda06a; /* heller Loh auf Dunkel (Hero-Script, Spruce-Eyebrow) */ --birch: #e8dfcc; /* warmes Birken-Beige – Bänder/Sektionen */ --snow: #f6f1e7; /* Seitenhintergrund (warmes Off-White) */ --white: #fffdf8; /* Karten/erhöhte Flächen (leicht cremig) */ --ink: #241f19; /* Fließtext / Überschriften (warmes Braun-Schwarz) */ --muted: #6b5f50; /* sekundärer Text (warmes Taupe) */ --frost: #dfe2d6; /* zarte Trennflächen */ --line: rgba(36,31,25,.12); --red: #9e4a34; /* Preiselbeer/Rost – seltener Akzent + dezente Fehlerfarbe */ --container: 1180px; --narrow: 760px; --r-sm: 10px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px; --sh-sm: 0 2px 10px rgba(22,39,31,.06); --sh-md: 0 16px 40px rgba(22,39,31,.12); --sh-lg: 0 30px 70px rgba(22,39,31,.18); --ease: cubic-bezier(.4,0,.2,1); } /* ------------------------------- Reset ---------------------------------- */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { font-family:var(--font-sans); color:var(--ink); background:var(--snow); line-height:1.7; font-size:1rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img { max-width:100%; height:auto; display:block; } a { color:var(--pine); text-decoration:none; transition:color .25s var(--ease); } a:hover { color:var(--pine-deep); } h1,h2,h3,h4 { font-family:var(--font-serif); color:var(--ink); line-height:1.14; font-weight:600; letter-spacing:0; } ::selection { background:var(--tan); color:#fff; } .container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:26px; } .script { font-family:var(--font-script); font-weight:500; letter-spacing:.01em; } /* Eyebrow / Label */ .eyebrow { display:inline-flex; align-items:center; gap:.55em; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--tan-deep); } .eyebrow::before { content:""; width:26px; height:2px; background:var(--tan); border-radius:2px; } /* ------------------------------ Buttons --------------------------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:inherit; font-weight:700; font-size:1rem; line-height:1; padding:.95em 1.6em; border:0; border-radius:var(--r-pill); cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease); white-space:nowrap; } .btn-primary { background:var(--pine); color:#fff; box-shadow:var(--sh-sm); } .btn-primary:hover { background:var(--pine-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-md); } .btn-accent { background:var(--tan); color:#fff; box-shadow:var(--sh-sm); } .btn-accent:hover { background:var(--tan-deep); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-md); } .btn-ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { background:var(--white); color:var(--pine-deep); transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--pine); } .btn-light { background:rgba(255,255,255,.12); color:#fff; backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5); } .btn-light:hover { background:#fff; color:var(--pine-deep); transform:translateY(-2px); } .btn-sm { padding:.62em 1.15em; font-size:.92rem; } .btn-lg { padding:1.05em 1.9em; font-size:1.06rem; } /* ------------------------------ Header ---------------------------------- */ .header { position:sticky; top:0; z-index:100; background:var(--snow); border-bottom:1px solid var(--line); transition:background .3s var(--ease), border-color .3s var(--ease); } .header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; } .logo { font-family:var(--font-serif); font-weight:700; font-size:1.4rem; color:var(--ink); letter-spacing:-.01em; transition:color .3s var(--ease); } .logo span { color:var(--tan); } .nav { display:flex; align-items:center; gap:28px; } .nav a { color:var(--ink); font-weight:600; font-size:.97rem; transition:color .25s var(--ease); } .nav a:hover, .nav a.is-active { color:var(--pine); } /* Header transparent über dem Hero, fest beim Scrollen */ body.has-hero .header { position:fixed; left:0; right:0; background:transparent; border-color:transparent; } body.has-hero .header .logo, body.has-hero .header .nav a { color:#fff; } body.has-hero .header .nav-toggle-bar { background:#fff; } body.has-hero .header.is-scrolled { background:var(--snow); border-color:var(--line); box-shadow:var(--sh-sm); } body.has-hero .header.is-scrolled .logo { color:var(--ink); } body.has-hero .header.is-scrolled .logo span { color:var(--tan); } body.has-hero .header.is-scrolled .nav a { color:var(--ink); } body.has-hero .header.is-scrolled .nav a:hover { color:var(--pine); } body.has-hero .header.is-scrolled .nav-toggle-bar { background:var(--ink); } body.has-hero .header .nav .btn-primary { color:#fff; } /* Hamburger */ .nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:transparent; border:0; cursor:pointer; } .nav-toggle-bar { display:block; width:24px; height:2px; margin-inline:auto; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease); } .nav-toggle.is-active .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-active .nav-toggle-bar:nth-child(2){ opacity:0; } .nav-toggle.is-active .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* --------------------------- Mobiles Menü ------------------------------- */ .mobile-menu { position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; } .mobile-menu.is-open { visibility:visible; pointer-events:auto; } .mobile-menu-backdrop { position:absolute; inset:0; background:rgba(22,39,31,.5); opacity:0; transition:opacity .3s ease; } .mobile-menu.is-open .mobile-menu-backdrop { opacity:1; } .mobile-menu-panel { position:absolute; top:0; right:0; height:100%; width:min(86vw,360px); background:var(--snow); box-shadow:var(--sh-lg); padding:22px; display:flex; flex-direction:column; gap:18px; transform:translateX(100%); transition:transform .34s var(--ease); } .mobile-menu.is-open .mobile-menu-panel { transform:translateX(0); } .mobile-menu-head { display:flex; align-items:center; justify-content:space-between; } .mobile-menu-close { width:42px; height:42px; border:0; background:var(--moss); border-radius:var(--r-sm); color:var(--ink); font-size:1.1rem; cursor:pointer; } .mobile-menu-links { display:flex; flex-direction:column; gap:4px; margin-top:8px; } .mobile-menu-links a { display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:var(--r-sm); color:var(--ink); font-weight:600; } .mobile-menu-links a:hover { background:var(--moss); color:var(--pine); } .mobile-menu-links a i { color:var(--tan); width:20px; text-align:center; } .mobile-menu-cta { margin-top:auto; } /* ------------------------------- Hero ----------------------------------- */ .hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; } .hero-media { position:absolute; inset:0; z-index:0; } .hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 40%; } .hero-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(22,39,31,.45) 0%, rgba(22,39,31,.10) 32%, rgba(22,39,31,.55) 78%, rgba(22,39,31,.86) 100%), linear-gradient(95deg, rgba(22,39,31,.55) 0%, rgba(22,39,31,0) 55%); } .hero-inner { position:relative; z-index:1; width:100%; padding-block:0 clamp(54px,9vh,104px); padding-top:120px; } .hero .eyebrow { color:#fff; } .hero .eyebrow::before { background:var(--tan); } .hero h1 { color:#fff; font-size:clamp(2.5rem,6.2vw,4.7rem); line-height:1.06; letter-spacing:-.01em; max-width:16ch; margin:.5em 0 .42em; text-shadow:0 2px 30px rgba(0,0,0,.25); } .hero h1 .script { display:block; font-family:var(--font-script); font-weight:500; font-size:.66em; letter-spacing:0; color:var(--tan-soft); line-height:1; margin-bottom:.04em; -webkit-text-fill-color:var(--tan-soft); } .hero-sub { font-size:clamp(1.05rem,1.6vw,1.28rem); color:rgba(255,255,255,.92); max-width:52ch; margin-bottom:2em; font-weight:500; } .hero-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .hero-trust { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.2); } .hero-trust span { display:inline-flex; align-items:center; gap:.5em; font-size:.86rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.85); } .hero-trust i { color:var(--tan); } .scroll-cue { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:1; color:rgba(255,255,255,.7); font-size:1.1rem; animation:bob 2.4s var(--ease) infinite; } @keyframes bob { 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,7px);} } /* ----------------------------- Sections --------------------------------- */ .section { padding-block:clamp(64px,9vw,112px); } .section--birch { background:var(--birch); } .section--spruce { background:var(--spruce); color:rgba(255,255,255,.86); } .section--spruce h2, .section--spruce h3 { color:#fff; } .section-head { max-width:var(--narrow); margin-bottom:clamp(38px,5vw,58px); } .section-head.center { margin-inline:auto; text-align:center; } .section-head h2 { font-size:clamp(1.85rem,3.6vw,2.85rem); margin:.4em 0 .35em; } .section-head p { color:var(--muted); font-size:1.12rem; } .section--spruce .section-head p { color:rgba(255,255,255,.72); } /* Intro-Statement */ .intro-statement { max-width:880px; } .intro-statement p { font-size:clamp(1.3rem,2.5vw,1.85rem); line-height:1.5; font-weight:600; letter-spacing:-.01em; color:var(--ink); } .intro-statement .hl { color:var(--pine); } /* Trust-Pfeiler */ .pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:clamp(40px,5vw,60px); } .pillar { background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--sh-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } .pillar:hover { transform:translateY(-4px); box-shadow:var(--sh-md); } .pillar-ic { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:var(--moss); color:var(--pine); font-size:1.3rem; margin-bottom:18px; } .pillar h3 { font-size:1.22rem; margin-bottom:8px; } .pillar p { color:var(--muted); font-size:1rem; } /* ---------------------------- Welpen (Wurf) ----------------------------- */ .litter-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 30px; margin-bottom:clamp(34px,4vw,48px); } .litter-tag { display:inline-flex; align-items:center; gap:.6em; align-self:flex-start; background:var(--spruce); color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:9px 16px; border-radius:var(--r-pill); margin-bottom:16px; } .litter-tag i { color:var(--tan); } .litter-head .lh-text { max-width:60ch; } .litter-head h2 { font-size:clamp(1.85rem,3.6vw,2.85rem); margin-bottom:.3em; } .litter-head p { color:var(--muted); font-size:1.08rem; } .litter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .pup { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--white); box-shadow:var(--sh-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .pup:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); } .pup-photo { position:relative; aspect-ratio:4/5; overflow:hidden; } .pup-photo img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .pup:hover .pup-photo img { transform:scale(1.06); } .pup-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(22,39,31,.72) 100%); } .pup-name { position:absolute; left:18px; bottom:14px; z-index:1; color:#fff; } .pup-name strong { display:block; font-family:var(--font-serif); font-size:1.32rem; font-weight:600; letter-spacing:0; line-height:1.05; } .pup-name span { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.82); letter-spacing:.04em; } .litter-note { margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; } .litter-note p { color:var(--muted); font-size:1rem; } /* --------------------------- Split / Teaser ----------------------------- */ .split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; } .split-media { position:relative; } .split-media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-md); aspect-ratio:4/3; object-fit:cover; } .split-media .tag-float { position:absolute; left:-14px; bottom:-14px; background:var(--white); border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--sh-md); display:flex; align-items:center; gap:12px; } .split-media .tag-float i { color:var(--tan); font-size:1.4rem; } .split-media .tag-float b { font-size:1.4rem; line-height:1; } .split-media .tag-float span { font-size:.82rem; color:var(--muted); } .split-body h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); margin:.35em 0 .5em; } .split-body p { color:var(--muted); font-size:1.1rem; margin-bottom:1.1em; } .split-body .check { list-style:none; margin:0 0 1.6em; display:grid; gap:10px; } .split-body .check li { display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-weight:500; } .split-body .check i { color:var(--pine); margin-top:.25em; } /* ------------------------------ CTA-Band -------------------------------- */ .cta-band { position:relative; overflow:hidden; } .cta-band .container { position:relative; z-index:1; text-align:center; } .cta-band h2 { font-size:clamp(2rem,4vw,3rem); max-width:18ch; margin:0 auto .5em; } .cta-band p { color:rgba(255,255,255,.78); max-width:48ch; margin:0 auto 2em; font-size:1.12rem; } .cta-band .hero-cta { justify-content:center; } .glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; } .glow-a { width:420px; height:420px; background:var(--pine); top:-160px; right:-80px; } .glow-b { width:360px; height:360px; background:var(--tan); bottom:-180px; left:-60px; opacity:.32; } /* --------------------- Unsere Hunde (3 aktuelle) ------------------------ */ .dogs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media (max-width:760px){ .dogs-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); } } /* --------------------------- In Erinnerung ----------------------------- */ .memorial-dogs { margin-top:6px; } .memorial-dog { padding:18px 0; border-top:1px solid rgba(255,255,255,.14); } .memorial-dog:first-child { border-top:0; padding-top:0; } .memorial-dog .md-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:5px; } .memorial-dog .md-name { font-family:var(--font-serif); font-size:1.3rem; font-weight:600; color:#fff; letter-spacing:0; } .memorial-dog .md-years { font-size:.86rem; font-weight:700; letter-spacing:.06em; color:var(--tan-soft); } .memorial-dog .md-text { color:rgba(255,255,255,.7); font-size:1rem; } .split-media .tag-float > div { display:flex; flex-direction:column; line-height:1.25; } .section--spruce .eyebrow { color:var(--tan-soft); } .section--spruce .eyebrow::before { background:var(--tan-soft); } .section--spruce .split-body p, .section--spruce .intro-statement p { color:rgba(255,255,255,.75); } .section--spruce .split-body .check li { color:rgba(255,255,255,.9); } .section--spruce .split-body .check i { color:var(--tan); } /* --------------------------- Subpage-Intro ----------------------------- */ .page-intro { padding:120px 0 clamp(40px,6vw,68px); background:radial-gradient(120% 90% at 85% -20%,rgba(46,90,73,.10),transparent 60%),var(--birch); } .page-intro .eyebrow { margin-bottom:14px; } .page-intro h1 { font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.03em; margin-bottom:.35em; } .page-intro p { color:var(--muted); font-size:1.15rem; max-width:62ch; } .back-link { display:inline-flex; align-items:center; gap:.5em; margin-bottom:18px; padding-block:8px; margin-top:-8px; font-weight:700; font-size:.92rem; color:var(--pine); } /* ----------------------------- Timeline -------------------------------- */ .timeline { position:relative; max-width:820px; margin:0 auto; } .timeline::before { content:""; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background:var(--line); } .tl-item { position:relative; padding-left:64px; padding-bottom:clamp(34px,5vw,52px); } .tl-item:last-child { padding-bottom:0; } .tl-dot { position:absolute; left:13px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--tan); border:4px solid var(--snow); box-shadow:0 0 0 1px var(--line); } .tl-date { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tan-deep); margin-bottom:5px; } .tl-item h3 { font-size:1.3rem; margin-bottom:8px; } .tl-item > p { color:var(--muted); margin-bottom:16px; max-width:60ch; } .tl-media { border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); aspect-ratio:3/2; background:var(--moss); } .tl-media img { width:100%; height:100%; object-fit:cover; object-position:center 32%; } /* Video-Stationen: hoch-/quer-/quadratformatige Clips zentriert auf dunklem Grund */ .tl-media--video { aspect-ratio:auto; background:var(--spruce); display:flex; justify-content:center; align-items:center; } .tl-media--video video { width:auto; height:auto; max-width:100%; max-height:min(60vh,560px); display:block; } /* --------------------------- 7 Welpen ---------------------------------- */ .pups7 { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:860px){ .pups7 { grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .pups7 { grid-template-columns:repeat(2,1fr); } } .collar { width:11px; height:11px; border-radius:50%; display:inline-block; box-shadow:0 0 0 1.5px rgba(255,255,255,.6); } .pup-name span { display:inline-flex; align-items:center; gap:6px; } .pup-badge { position:absolute; top:12px; right:12px; z-index:2; background:var(--tan); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill); } /* --------------------------- Hunde-Profil ------------------------------ */ .profile { display:grid; grid-template-columns:5fr 6fr; gap:clamp(28px,5vw,64px); align-items:start; } .profile-media img { width:100%; border-radius:var(--r-lg); box-shadow:var(--sh-md); aspect-ratio:4/5; object-fit:cover; } .profile-info .eyebrow { margin-bottom:10px; } .profile-info h2 { font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.6em; } .steckbrief { margin:0; } .steckbrief div { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:13px 0; border-bottom:1px solid var(--line); } .steckbrief div:last-child { border-bottom:0; } .steckbrief dt { color:var(--muted); font-weight:600; } .steckbrief dd { margin:0; font-weight:600; text-align:right; } .collar-dot { width:13px; height:13px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:8px; box-shadow:0 0 0 1.5px var(--line); } .docs-list { list-style:none; margin:0; max-width:var(--narrow); display:grid; gap:10px; } .docs-list li { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; font-weight:600; } .doc-status { flex:none; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tan-deep); background:var(--moss); padding:4px 11px; border-radius:var(--r-pill); } .docs-note { color:var(--muted); max-width:var(--narrow); font-size:1.08rem; } .album-empty { text-align:center; border:1.5px dashed var(--line); border-radius:var(--r-lg); padding:clamp(36px,6vw,68px) clamp(20px,4vw,40px); background:var(--white); } .album-empty i { font-size:2rem; color:var(--tan); margin-bottom:14px; display:block; } .album-empty h3 { font-size:1.4rem; margin-bottom:8px; } .album-empty p { color:var(--muted); max-width:48ch; margin:0 auto; } .album-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; } .album-item { display:block; aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--moss); box-shadow:var(--sh-sm); cursor:zoom-in; } .album-item img { width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); } .album-item:hover img { transform:scale(1.06); } @media (max-width:860px){ .profile { grid-template-columns:1fr; } .profile-media { max-width:440px; } } /* Lightbox (Album-Vollbild) */ .lightbox { position:fixed; inset:0; z-index:300; background:rgba(22,20,16,.92); display:none; align-items:center; justify-content:center; padding:24px; } .lightbox.is-open { display:flex; } .lightbox img { max-width:95vw; max-height:90vh; border-radius:var(--r-md); box-shadow:var(--sh-lg); } .lightbox-close { position:absolute; top:18px; right:22px; background:rgba(255,255,255,.14); color:#fff; border:0; width:46px; height:46px; border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer; transition:background .2s var(--ease); } .lightbox-close:hover { background:var(--tan); } /* --------------------- Inhalt: Fließtext / Legal --------------------- */ .prose { max-width:var(--narrow); } .prose > p { color:var(--ink); line-height:1.8; margin-bottom:1.15em; } .prose h2 { font-size:clamp(1.5rem,3vw,2.15rem); margin:1.5em 0 .5em; } .prose h2:first-child { margin-top:0; } .prose h3 { font-size:1.25rem; margin:1.5em 0 .4em; } .prose ul { list-style:none; margin:0 0 1.3em; display:grid; gap:.7em; } .prose ul li { position:relative; padding-left:1.5em; color:var(--ink); line-height:1.7; } .prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--tan); } .prose a { color:var(--pine); font-weight:600; text-decoration:underline; text-underline-offset:2px; } .prose strong { font-weight:700; color:var(--ink); } .legal h2 { font-size:1.3rem; } .legal p { margin-bottom:.8em; } /* Rasse-Steckbrief (Fakten-Kacheln) */ .breed-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; } .bf { background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; } .bf b { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tan-deep); font-weight:700; margin-bottom:5px; } .bf span { font-weight:600; color:var(--ink); } /* ------------------------------ Footer ---------------------------------- */ .footer { background:var(--spruce); color:rgba(255,255,255,.72); padding:56px 0 40px; } .footer .logo { color:#fff; } .footer .logo span { color:var(--tan); } .footer-grid { display:flex; flex-wrap:wrap; gap:26px 60px; justify-content:space-between; align-items:flex-start; } .footer-brand { max-width:34ch; } .footer-brand p { margin-top:12px; font-size:.95rem; color:rgba(255,255,255,.6); } .footer-col h4 { color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; } .footer-col a { display:block; color:rgba(255,255,255,.74); font-weight:500; padding:5px 0; } .footer-col a:hover { color:#fff; } .f-social { display:flex; gap:12px; margin-top:18px; } .f-social a { width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.09); color:#fff; font-size:1.02rem; transition:background .25s var(--ease), transform .25s var(--ease); } .f-social a:hover { background:var(--tan); transform:translateY(-2px); } .footer-base { margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.5); } /* --------------------- A11y: Tastatur-Fokus & Anker-Offset ------------- */ :focus-visible { outline:3px solid var(--tan); outline-offset:2px; border-radius:3px; } .btn:focus-visible, .f-social a:focus-visible, .mobile-menu-close:focus-visible { outline-offset:3px; } /* heller Fokusring vor dunklen/fotografischen Flächen */ body.has-hero .header a:focus-visible, .section--spruce a:focus-visible, .footer a:focus-visible, .lightbox-close:focus-visible, .hero a:focus-visible { outline-color:#fff; } /* Eyebrow-Kontrast auf Birke (AA) */ .section--birch .eyebrow, .page-intro .eyebrow { color:var(--tan-ink); } .section--birch .eyebrow::before, .page-intro .eyebrow::before { background:var(--tan-ink); } [id] { scroll-margin-top:90px; } .btn, .nav-toggle, .pup, .album-item { touch-action:manipulation; } .skip-link { position:absolute; left:50%; transform:translateX(-50%) translateY(-130%); top:8px; z-index:300; background:var(--pine); color:#fff; padding:10px 18px; border-radius:var(--r-pill); font-weight:600; transition:transform .2s var(--ease); } .skip-link:focus { transform:translateX(-50%) translateY(0); color:#fff; } /* --------------------- Reveal-Animation (initReveal) -------------------- */ [data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); } [data-reveal].is-visible { opacity:1; transform:none; } [data-reveal][data-delay="1"]{ transition-delay:.08s; } [data-reveal][data-delay="2"]{ transition-delay:.16s; } [data-reveal][data-delay="3"]{ transition-delay:.24s; } /* ----------------------------- Responsive ------------------------------- */ @media (max-width:980px){ .nav { display:none; } .nav-toggle { display:flex; } .header-inner { height:66px; } .pillars { grid-template-columns:1fr; } .litter-grid { grid-template-columns:repeat(2,1fr); } .dogs-grid { grid-template-columns:repeat(2,1fr); } .split { grid-template-columns:1fr; } .split-media { order:-1; } } @media (max-width:520px){ .container { padding-inline:20px; } .litter-grid { grid-template-columns:1fr 1fr; gap:14px; } .hero-cta .btn { flex:1 1 auto; } .footer-col a { padding:9px 0; } } /* ------------------------- Reduced Motion ------------------------------- */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } [data-reveal]{ opacity:1; transform:none; } }