.litter-overview{display:grid;grid-template-columns:1fr 1fr;gap:34px 8%;margin-bottom:65px;padding-bottom:42px;border-bottom:1px solid var(--line)}.litter-title h2{font-size:48px}.litter-title>p:last-child{color:#756c5f}.litter-parent-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.litter-parent-pair img{width:100%;aspect-ratio:1.25;object-fit:cover;display:block}.litter-parent-pair a>span{display:block;font:28px var(--serif);padding-top:12px}.litter-parent-pair small{display:block;font:10px var(--sans);letter-spacing:1.7px;color:#81725d;margin-bottom:5px}.litter-parent-pair b{font:18px var(--sans);float:right}.litter-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin:6px 0 0;padding:28px 0 0;border-top:1px solid var(--line);gap:25px}.litter-facts dt{font-size:12px;color:#837562;margin-bottom:9px}.litter-facts dd{margin:0;font:25px var(--serif)}.litter-facts dd small{font:12px var(--sans);display:block;margin-top:5px;color:#837562}.litter-development{border-top:1px solid var(--line);padding-top:50px;margin-top:60px}.litter-development>p:not(.eyebrow){max-width:720px;color:#786e61}.story-feature{display:grid;grid-template-columns:1.05fr 1fr;background:#ece6db;min-width:0}.journal article.story-feature{border:0;padding:0}.story-image{display:block;overflow:hidden}.story-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.story-image:hover img{transform:scale(1.025)}.story-feature>.story-image{aspect-ratio:1.1}.story-feature-copy{padding:clamp(25px,4vw,60px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.story-feature-copy .eyebrow{color:#7d6847;font-size:11px;margin-bottom:30px}.story-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:#817360}.story-meta>span{font-weight:500}.story-meta time{color:#8b8071}.story-feature h3{font-size:clamp(34px,3.5vw,52px);line-height:1.05;margin:18px 0 22px}.story-feature-copy>p:not(.eyebrow){color:#766b5c;font-size:16px;line-height:1.8}.story-feature-copy .text-link{margin-top:12px}.journal-divider{padding:65px 0 20px}.journal-divider .eyebrow{margin:0}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:45px}.story-card>.story-image{aspect-ratio:1.65}.story-card>div{padding:25px 0}.story-card h2{font-size:36px;margin:16px 0}.story-card p{color:#756b5d}.story-header{max-width:1120px;margin:auto;text-align:center;padding-top:42px;padding-bottom:50px}.story-header .breadcrumb{display:block;text-align:left}.story-header .story-meta{justify-content:center}.story-header h1{font-size:clamp(48px,6vw,82px);margin:28px 0}.story-deck{font:26px/1.45 var(--serif);max-width:700px;margin:0 auto 24px;color:#80725d}.story-byline{font-size:12px;color:#887c6b}.story-hero{max-width:1060px;margin:0 auto;width:86%;height:480px;overflow:hidden}.story-hero img{width:100%;height:100%;object-fit:cover;object-position:center 40%}.story-body{max-width:740px;padding:60px 30px;margin:auto;font:18px/1.9 var(--sans);color:#665e52}.story-body>p:first-child{font:29px/1.5 var(--serif);color:var(--ink)}.story-body p{margin-bottom:28px}.story-body .sample-note{font:12px/1.6 var(--sans);border-top:1px solid var(--line);padding-top:20px;margin-top:38px}.story-next{display:flex;max-width:1060px;margin:0 auto 60px;padding:35px 0;border-top:1px solid var(--line);width:86%;justify-content:space-between;align-items:center;gap:30px}.story-next h2{font-size:32px;margin:8px 0 0}.story-next .eyebrow{font-size:11px}.story-next .text-link{white-space:nowrap}@media(max-width:760px){.litter-overview{grid-template-columns:1fr;gap:25px}.litter-title h2{font-size:40px}.litter-facts{grid-template-columns:1fr 1fr;gap:25px 15px}.litter-facts dd{font-size:23px}.litter-parent-pair{gap:18px}.story-feature,.story-grid{grid-template-columns:1fr}.story-feature>.story-image{aspect-ratio:1.3}.journal article.story-feature{padding:0}.story-feature-copy{padding:30px}.story-feature-copy .eyebrow{margin-top:0;margin-bottom:20px}.story-feature h3{font-size:40px}.story-feature .story-meta{font-size:11px}.story-grid{gap:20px}.story-card h2{font-size:33px}.story-header{padding-top:25px}.story-header h1{font-size:48px}.story-deck{font-size:24px}.story-hero{height:330px;width:100%}.story-body{padding:40px 7%;font-size:16px}.story-body>p:first-child{font-size:26px}.story-next{flex-direction:column;align-items:start}.journal .section-heading>.text-link{margin-bottom:25px}.story-feature-copy>p:not(.eyebrow){font-size:16px}}

/* ---- PHP port additions ---------------------------------------------------- */
/* A card or profile whose cat has no photo yet: a calm block in the photo's place. */
.photo-missing{display:block;width:100%;aspect-ratio:1;background:#e9e2d6}
.profile-photo.photo-missing{aspect-ratio:1}
/* A parent that is not published is named on the litter, but not linked. */
.litter-parent-pair>div>span{display:block;font:28px var(--serif);padding-top:12px}
.litter-parent-pair .photo-missing{aspect-ratio:1.25}
/* Development timeline photos. */
.timeline .eyebrow{margin:0 0 6px}
.timeline-photo{display:block;max-width:100%;height:auto;margin-top:18px}
/* PHP photos carry width/height attributes (they reserve space while loading).
   Where the design shapes a photo with aspect-ratio alone, height:auto lets
   the ratio win over the attribute. */
.litter-parent-pair img,.profile-photo{height:auto}
/* Admin preview of a journal story: a bar above the normal page. */
.preview-banner{position:sticky;top:0;z-index:30;background:#303c2c;color:#f6f3ed;text-align:center;padding:10px 16px;font:500 13px/1.5 var(--sans)}
.preview-banner a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- Outlined gold buttons: every "go on" link ------------------------------
   Section links („Wurfbox entdecken →"), card links („Mehr über Aurora →",
   „Alba kennenlernen →"), story links („Geschichte lesen →", „Weiterlesen →")
   and „Mehr über uns →". Outline = go on. Solid gold is reserved for contact
   actions, so the hierarchy stays clear.
   A light gold tone (12 %) behind the text makes them noticeable at rest;
   hover fills them with gold. Contrast-checked on every background they sit
   on: text #6f5b3a is 4.7:1 on the beige story tile, 5.3:1 on the paper and
   5.7:1 on a white card; #d1b78c on the dark Wurfbox is 5.9:1. Hover: ink on
   #b29a71 5.4:1, dark on #d1b78c 7.6:1. The light --gold (#b29a71) alone is
   only 2.4:1 on paper: backgrounds and borders only, never text on paper. */
.button-outline{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:12px 26px;border:1.5px solid #a08658;border-radius:2px;background:rgba(178,154,113,.12);color:#6f5b3a;font:500 14px/1.2 var(--sans);letter-spacing:.3px;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.button-outline:hover{background:#b29a71;border-color:#b29a71;color:var(--ink)}
.button-outline:focus-visible{outline:2px solid #6f5b3a;outline-offset:4px}
.button-outline span{transition:transform .2s}
.button-outline:hover span{transform:translateX(3px)}
/* Only the buttons standing on the dark Wurfbox itself; the kitten cards
   inside it are light and keep the normal colours. */
.litter .section-intro .button-outline,.litter .section-more .button-outline{border-color:#d1b78c;background:rgba(209,183,140,.12);color:#d1b78c}
.litter .section-intro .button-outline:hover,.litter .section-more .button-outline:hover{background:#d1b78c;border-color:#d1b78c;color:#282923}
.litter .section-intro .button-outline:focus-visible,.litter .section-more .button-outline:focus-visible{outline-color:#d1b78c}
/* Where the old text links sat. */
.pet-copy .button-outline{margin-top:8px}
.story-feature-copy .button-outline{margin-top:12px}
.about .button-outline{margin-top:25px}
.story-next .button-outline{white-space:nowrap;flex-shrink:0}
.section-intro>p{margin:0}
.cats .section-heading>.section-intro{max-width:320px}
.cats .section-intro>p{color:#766e63;font-size:15px}
/* Under the introduction on desktop; after the cards on mobile. */
.section-more--top{margin-top:22px}
.journal .section-more--top{margin-top:0}
.section-more--bottom{display:none;margin:34px 0 0}
@media(max-width:760px){
  .section-more--top{display:none}
  .section-more--bottom{display:block}
  .section-more--bottom .button-outline{width:100%}
}
@media(prefers-reduced-motion:reduce){.button-outline span{transition:none}.button-outline:hover span{transform:none}}

/* ---- Solid gold buttons: contact actions only --------------------------------
   „Für Alba anfragen →", „Kennenlernen →", „Anfrage senden →". Navigation uses
   the outlined buttons above, so solid gold always means "get in touch".
   Ink on #b29a71 is 5.4:1, on the hover #c4a978 6.5:1. */
.button-gold{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:12px 26px;border:1.5px solid #b29a71;border-radius:2px;background:#b29a71;color:var(--ink);font:500 14px/1.2 var(--sans);letter-spacing:.3px;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.button-gold:hover{background:#c4a978;border-color:#c4a978}
.button-gold:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.button-gold span{transition:transform .2s}
.button-gold:hover span{transform:translateX(3px)}
.pet-copy .button-gold.kitten-contact{margin-top:14px}
.about .button-gold,.contact .button-gold{margin-top:25px}
@media(prefers-reduced-motion:reduce){.button-gold span{transition:none}.button-gold:hover span{transform:none}}

/* ---- Contact form (/kontakt/) ------------------------------------------------ */
.contact-page .large{margin-bottom:10px}
.contact-form{margin-top:36px;display:grid;gap:22px}
.contact-field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.contact-field>span,.contact-field legend{font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:#6f5b3a;padding:0}
.contact-field small{text-transform:none;letter-spacing:0;font-weight:400;color:#8a7f6d}
.contact-field input,.contact-field select,.contact-field textarea{width:100%;font:16px/1.5 var(--sans);color:var(--ink);background:#fffdf8;border:1px solid #cfc6b5;border-radius:2px;padding:12px 14px}
.contact-field textarea{resize:vertical;min-height:170px}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus{outline:2px solid #b29a71;outline-offset:1px;border-color:#b29a71}
.contact-field [aria-invalid="true"]{border-color:#a23e34}
.contact-error{font-size:13px;color:#a23e34}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.contact-grid .contact-field:first-child{grid-column:1/-1}
.choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.choice{display:inline-flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid #cfc6b5;border-radius:2px;background:#fffdf8;font-size:15px;cursor:pointer}
.choice:has(input:checked){border-color:#a08658;background:rgba(178,154,113,.14)}
.choice input{accent-color:#6f5b3a}
.contact-privacy{font-size:13px;color:#7a7163;margin:-4px 0 0}
.contact-form .button-gold{justify-self:start}
.contact-note{padding:14px 18px;border-left:3px solid #a23e34;background:#f7ece8;color:#7d2f27;font-size:14px}
/* The honeypot: off-screen for people, still in the form for bots. */
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-kitten{display:flex;align-items:center;gap:18px;margin:28px 0 0;padding:14px;border:1px solid #d9d2c6;background:#fffdf8;max-width:460px}
.contact-kitten img,.contact-kitten .photo-missing{width:84px;height:84px;object-fit:cover;flex:0 0 84px}
.contact-kitten .eyebrow{margin:0 0 4px;font-size:11px}
.contact-kitten-name{font:30px/1.1 var(--serif);margin:0}
.contact-kitten-meta{font-size:13px;color:#7a7163;margin:4px 0 0}
.contact-thanks{text-align:left}
.contact-thanks .button-outline{margin-top:20px}
@media(max-width:760px){
  .contact-grid{grid-template-columns:1fr}
  .contact-form .button-gold{justify-self:stretch}
}
.contact-field[hidden]{display:none}

/* Narrow text pages (Kennenlernen, Über uns). The prototype's .narrow set
   max-width:1000px on the section itself, INCLUDING its side padding (7 %,
   more above 1600 px): the wider the window, the smaller the text area.
   The limit now applies to the content only; the padding comes on top. */
.section.narrow{box-sizing:content-box;max-width:820px}

/* Radio buttons in the contact choices keep their natural size: the general
   field rule (full width, border, padding) must not reach them. The focus
   ring goes around the whole choice instead of the small dot. */
.contact-field .choice input{width:auto;padding:0;margin:0;border:0;background:none}
.contact-field .choice input:focus{outline:none}
.choice:has(input:focus-visible){outline:2px solid #b29a71;outline-offset:2px}
.choice{white-space:nowrap}
/* On phones the three choices always stack, full width, like the fields below. */
@media(max-width:760px){
  .choices{flex-direction:column}
  .choice{width:100%;white-space:normal}
}

/* Header "Kennenlernen →": a contact action, so solid gold like the other
   contact buttons, compact for the header (44 px, still a good touch target).
   Ink on #b29a71 5.4:1, on the hover #c4a978 6.5:1. The general
   `.header nav>a:hover` turns text gold, which must not reach this button. */
.header nav>a.nav-contact{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:10px 20px;border:0;border-radius:2px;background:#b29a71;color:var(--ink);font-weight:500;transition:background .2s}
.header nav>a.nav-contact:hover{background:#c4a978;color:var(--ink)}
.header nav>a.nav-contact:focus-visible{outline:2px solid #d4bb91;outline-offset:3px}
.header nav>a.nav-contact span{margin-left:0;transition:transform .2s}
.header nav>a.nav-contact:hover span{transform:translateX(3px)}
@media(max-width:760px){
  .header nav.open>a.nav-contact{justify-content:center;min-height:48px;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){.header nav>a.nav-contact span{transition:none}.header nav>a.nav-contact:hover span{transform:none}}