/* Geschichten + Unterseiten (FSS neu). Ergänzt style.css (nutzt dessen Tokens), Präfix g-. Nur neue Klassen, nichts aus style.css überschrieben. */

/* Titelbild-Ausschnitt (Hero und Karten): Köpfe nicht kappen */
.pos-top{object-position:50% 8%}
.pos-up{object-position:50% 24%}
.pos-mid{object-position:50% 50%}
.pos-bot{object-position:50% 100%}

/* lange Titelwoerter im Story-Hero: trennen statt ins Bild laufen */
.story-t h1,.phead h1{overflow-wrap:break-word}

/* Lesespalten-Abschnitte: dichter als die Standard-Sektion, Text läuft über mehrere Blöcke */
.sec.g-sec{padding-block:clamp(18px,2.6vw,36px)}
.story+#main-start+.g-sec{padding-top:var(--sp)}
article>.sec.g-sec:last-child{padding-bottom:var(--sp)}

/* Lesespalte */
.g-prose{max-width:44rem;margin-inline:auto}
.g-prose--left{margin-inline:0}
.g-prose--after{margin-top:clamp(32px,5vw,56px)}
.g-prose>:first-child{margin-top:0}
.g-prose>:last-child{margin-bottom:0}
.g-prose h2{font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);margin:1.7em 0 .5em}
.g-prose h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin:1.5em 0 .45em}
.g-prose .kick{margin-bottom:.7em}
.g-prose .g-kap{margin-top:clamp(32px,5vw,56px);margin-bottom:.4em}
.g-prose .g-kap+h2{margin-top:0}
.g-prose .lede{margin-bottom:1em}
.g-prose ul,.step ul{margin:0 0 1.1em}
.g-prose li,.step li{padding-left:1.4em;position:relative;margin-bottom:.3em}
.g-prose li::before,.step li::before{content:"";position:absolute;left:0;top:.8em;width:.7em;height:2px;background:var(--red)}
.g-prose a,.step a:not(.btn){color:var(--red-d);text-underline-offset:.15em}
.g-prose a:hover,.step a:not(.btn):hover{color:var(--red)}
.navy .g-prose a{color:#fff}
.g-prose blockquote{margin:1.6em 0}
.g-prose .actions{margin-top:1.2em}
.g-vers{font-size:clamp(1.25rem,1.05rem + .9vw,1.7rem);line-height:1.45;margin:1.6em 0}
.g-vers p{margin:0 0 .7em}
.g-vers p:last-child{margin-bottom:0}
.g-ein{font-family:var(--f-head);font-weight:600;font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);line-height:1.3;text-wrap:balance}
.g-note{margin:clamp(20px,3vw,32px) 0 0;font-size:.95rem;opacity:.85}

/* Einzelbilder */
.g-fig{margin:1.8em auto}
.g-prose>.g-fig:first-child{margin-top:0}
.g-fig figcaption{font-size:.9rem;line-height:1.5;margin-top:.7em;opacity:.85}
.g-mw-38{max-width:38rem}.g-mw-32{max-width:32rem}.g-mw-26{max-width:26rem}.g-mw-20{max-width:20rem}
.g-logo{max-width:12rem;margin-inline:0}
.g-logo .media{background:transparent}

/* Galerie: natürliche Seitenverhältnisse */
.g-gal{column-gap:clamp(14px,2vw,24px)}
.g-gal__i{margin:0 0 clamp(14px,2vw,24px);break-inside:avoid}
.g-gal--few,.g-gal--many{columns:1}
@media(min-width:560px){.g-gal--few,.g-gal--many{columns:2}}
@media(min-width:860px){.g-gal--many{columns:3}}

/* Kartenraster (Übersicht, Hunde, Flyer) */
.g-grid{display:grid;gap:clamp(20px,2.5vw,36px)}
@media(min-width:560px){.g-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g-grid{grid-template-columns:repeat(3,1fr)}}
.g-grid>li{display:flex}
.g-grid>li>.card{flex:1 1 auto;width:100%}
.g-card .card-b h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.g-card .card-b h3 a{text-decoration:none}
.g-card .card-b h3 a:hover{text-decoration:underline}
.g-dogs .card .media{aspect-ratio:4/5}
.g-dogs .card-b h3{margin-bottom:.3em}
.g-flyers .card .media{aspect-ratio:210/297}
.g-flyers .card-b h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);margin-bottom:.4em}
.g-flyer .actions{margin-top:1.2em}

/* Vorherige / Nächste Geschichte */
.sec.g-pn{padding-block:clamp(32px,5vw,64px);background:var(--cream)}
.g-pn ul{display:grid;gap:clamp(14px,2vw,24px)}
@media(min-width:760px){.g-pn ul{grid-template-columns:1fr 1fr}.g-pn__next{grid-column:2;text-align:right}}
.g-pn li{display:flex}
.g-pn__a{display:block;width:100%;text-decoration:none;background:#fff;border:1px solid rgba(37,63,103,.18);border-radius:6px;padding:clamp(18px,2.4vw,28px);transition:border-color .3s}
.g-pn__a:hover,.g-pn__a:focus-visible{border-color:var(--red)}
.g-pn__a .kick{display:block;margin:0 0 .6em}
.g-pn__t{display:block;font:600 clamp(1.15rem,1rem + .6vw,1.45rem)/1.3 var(--f-head);text-wrap:balance}
.g-pn__d{display:block;font-size:.9rem;margin-top:.5em;opacity:.8}

/* Hunde-Block auf Creme: Karten brauchen wieder volle Sektionshöhe */
.sec.g-sec.cream{padding-block:var(--sp)}

/* Unterseiten-Titel mit sehr langem Wort (Datenschutzerklärung): kleiner, damit es auf 375 px in eine Zeile passt */
.phead h1.m{font-size:clamp(1.6rem,1.1rem + 2.3vw,2.8rem)}