/* ==========================================================================
   proTier e.V. – Stylesheet der öffentlichen Website
   Struktur: Schriften · Tokens · Basis · Layout · Kopf/Navigation · Bausteine ·
   Tierkarten · Startseite · Tierprofil · Listen/Filter · Archiv · Inhalte (Prose) ·
   Gästebuch/Formulare · Fußzeile · Utilities
   ========================================================================== */

/* ---------- Schriften (lokal eingebunden – keine Verbindung zu Google) ---------- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); }
/* Wählbare Schriften (Admin → Gestaltung → Schrift): erst geladen, wenn sie benutzt werden. size-adjust gleicht die breitere Laufweite aus. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 96%; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 100%; src: url("../fonts/urbanist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-style: italic; font-weight: 100 900; font-display: swap; size-adjust: 100%; src: url("../fonts/urbanist-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 98%; src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap; size-adjust: 98%; src: url("../fonts/jost-latin-wght-italic.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  /* Farbwelt der alten Seite: Orange + Grau (aus dem früheren Template übernommen: #ff9a03, #333, #454545, #767676, #d6d6d6).
     Die Grundwerte sind im Admin unter „Gestaltung“ einstellbar: Das Layout gibt sie als <style>:root{…}</style> nach dieser Datei aus
     (src/Support/Theme.php). Die Werte hier sind derselbe Standard als Rückfall; abgeleitete Töne folgen unten per color-mix(). */
  --orange: #ff9a03;         /* Hauptfarbe: Markenorange der alten Seite (Menüpunkte, Knöpfe, Linien) */
  --orange-ink: #944f00;     /* Akzent: Orange für Text auf hellem Grund (Kontrast >= 5:1, auch auf Grau) */
  --dark: #333333;           /* Anthrazit: Navigationsleiste, Fußzeile */
  --area: #454545;           /* Dunkelgrau der alten Seite (Inhaltsfläche von protier-ev.de): dunkle Bereiche */
  --paper: #f3f3f2;          /* Seitenhintergrund (helles Grau) */
  --ink: #262626;            /* Text */
  --header-bg: #ffffff;      /* Kopfbereich; in diese Farbe laufen die Kopfbilder aus */
  --spot-bg: #3e3e3e;        /* hervorgehobene Neuigkeiten: dunkler Grund */
  --spot-accent: #ffcc00;    /* hervorgehobene Neuigkeiten: Gelb für Überschriften und fett gesetzte Stellen */
  --font-scale: 1;           /* Schriftgröße (1 = 100 %) */
  --head-h: 170px;           /* Höhe des Kopfbereichs (große Bildschirme) */
  --logo-h: 140px;           /* Höhe des Logos (große Bildschirme) */
  --head-fade: 40%;          /* Anteil des Kopfbildes, der zur Mitte hin ausläuft */
  --head-left-x: 50%; --head-left-y: 50%; --head-right-x: 100%; --head-right-y: 50%;   /* Bildausschnitt der Kopfbilder */

  /* abgeleitete Töne (Rückfall für Browser ohne color-mix(): die festen Werte der Standardfarben) */
  --paper-2: #e7e7e5;
  --paper-3: #d8d8d5;
  --white: #ffffff;
  --line: #d9d9d6;
  --line-strong: #b8b8b4;
  --ink-2: #4a4a4a;
  --ink-3: #666666;
  --orange-hover: #e98900;
  --orange-soft: #ffe2b3;
  --orange-light: #ffb54a;   /* Hover der Menüpunkte */
  --dark-2: #404040;
  --dark-3: #4a4a4a;
  --dark-deep: #2a2a2a;      /* untere Leiste der Fußzeile */
  --area-2: #4f4f4f;         /* Karten auf dem Dunkelgrau */
  --on-dark: #d6d6d6;
  --danger: #a23b2a;
  --ok: #2f6b45;

  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(18px, 4.2vw, 44px);
  --maxw: 1220px;
  --measure: none;   /* Zeilenlänge der Texte: none = volle Inhaltsbreite wie der Kopfbereich; z. B. 80ch begrenzt sie wieder (gilt überall) */
  --radius: 8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(38, 38, 38, .08);
  --shadow-md: 0 10px 28px -14px rgba(38, 38, 38, .4);
  --header-h: 78px;          /* kompakter Kopf mit Menü-Knopf auf Tablet hochkant und Handy (bis 1020 px) */
  --nav-h: 54px;
  --focus: 0 0 0 3px rgba(255, 154, 3, .6);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --paper-2: color-mix(in srgb, var(--paper) 95%, #000);
    --paper-3: color-mix(in srgb, var(--paper) 89%, #000);
    --line: color-mix(in srgb, var(--paper) 89.5%, #000);
    --line-strong: color-mix(in srgb, var(--paper) 76%, #000);
    --ink-2: color-mix(in srgb, var(--ink) 86%, #fff);
    --ink-3: color-mix(in srgb, var(--ink) 71%, #fff);
    --orange-hover: color-mix(in srgb, var(--orange) 90%, #000);
    --orange-soft: color-mix(in srgb, var(--orange) 30%, #fff);
    --orange-light: color-mix(in srgb, var(--orange) 72%, #fff);
    --dark-2: color-mix(in srgb, var(--dark) 94%, #fff);
    --dark-3: color-mix(in srgb, var(--dark) 89%, #fff);
    --dark-deep: color-mix(in srgb, var(--dark) 82%, #000);
    --area-2: color-mix(in srgb, var(--area) 93%, #fff);
    --focus: 0 0 0 3px color-mix(in srgb, var(--orange) 60%, transparent);
  }
}
:root { --radius-sm: calc(var(--radius) * .625); }

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); font-size: calc(var(--font-scale, 1) * 100%); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--orange-ink); text-decoration-thickness: .08em; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--orange-ink) 45%, transparent); }
a:hover { color: var(--ink); text-decoration-color: var(--orange); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.012em; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 1.5rem + 2.9vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
mark { background: var(--orange-soft); color: inherit; padding: 0 .1em; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 4px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: clamp(2.6rem, 2rem + 3.5vw, 5rem); }
.section--tight { padding-block: clamp(1.8rem, 1.4rem + 2vw, 3rem); }
.section--sand { background: var(--paper-2); }
.section--dark { background: var(--area); color: #ececec; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark a { color: var(--orange-soft); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.2rem, 1rem + 1.2vw, 2.2rem); }
.section__head h2 { margin: 0; }
.section__more { font-weight: 600; white-space: nowrap; }
.section__foot { margin: clamp(1.2rem, 1rem + 1vw, 2rem) 0 0; font-size: 1.1rem; }   /* Link „Weitere Neuigkeiten“ unter den Beiträgen der Startseite */
.eyebrow { display: block; font: 700 .76rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .7rem; }
.section--dark .eyebrow { color: var(--orange); }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.lead--center { max-width: 60ch; margin-inline: auto; }   /* zentrierte Hinweise (Fehlerseite, Startseite) bleiben bewusst schmal */
.muted { color: var(--ink-3); }
.grid { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 1.8rem); }

/* ---------- Kopfzeile & Navigation ----------
   Heller Kopf mit großem Logo in der Mitte; links ein Bild mit Hund und Katze, rechts die Küste Sardiniens – beide laufen zur Mitte hin
   weich in die Hintergrundfarbe aus (Maske, keine Farbfläche: passt zu jeder Kopf-Farbe). Höhe, Logo, Bilder, Ausschnitt und Verlauf
   stellt der Admin unter „Gestaltung“ ein. Darunter wie auf der alten Seite die anthrazitfarbene Navigationsleiste mit orangen
   Menüpunkten und orangem Abschluss. Die Bilder liegen absolut im Kopf mit fester Höhe – nichts verschiebt sich beim Laden. */
.site-header { position: relative; overflow: hidden; background: var(--header-bg); }
.site-header__art { position: absolute; top: 0; bottom: 0; width: min(50%, calc(var(--head-h) * 3.5)); pointer-events: none; }
.site-header__art--left { left: 0; }
.site-header__art--right { right: 0; }
.site-header__art img { width: 100%; height: 100%; object-fit: cover; }
.site-header__art--left img { object-position: var(--head-left-x) var(--head-left-y); }
.site-header__art--right img { object-position: var(--head-right-x) var(--head-right-y); }
.site-header__art--left { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--head-fade)), rgba(0, 0, 0, .78) calc(100% - var(--head-fade) * .72), rgba(0, 0, 0, .42) calc(100% - var(--head-fade) * .44), rgba(0, 0, 0, .13) calc(100% - var(--head-fade) * .18), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--head-fade)), rgba(0, 0, 0, .78) calc(100% - var(--head-fade) * .72), rgba(0, 0, 0, .42) calc(100% - var(--head-fade) * .44), rgba(0, 0, 0, .13) calc(100% - var(--head-fade) * .18), transparent); }
.site-header__art--right { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--head-fade)), rgba(0, 0, 0, .78) calc(100% - var(--head-fade) * .72), rgba(0, 0, 0, .42) calc(100% - var(--head-fade) * .44), rgba(0, 0, 0, .13) calc(100% - var(--head-fade) * .18), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - var(--head-fade)), rgba(0, 0, 0, .78) calc(100% - var(--head-fade) * .72), rgba(0, 0, 0, .42) calc(100% - var(--head-fade) * .44), rgba(0, 0, 0, .13) calc(100% - var(--head-fade) * .18), transparent); }
.site-header__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; height: var(--head-h); padding-block: 8px; }
.brand { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }
.brand img { height: min(var(--logo-h), calc(var(--head-h) - 16px)); width: auto; }
.menu-btn { grid-column: 3; justify-self: end; display: none; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .85rem; border: 2px solid var(--dark); border-radius: 6px; background: #fff; color: var(--dark); font: 700 1rem var(--sans); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover { background: var(--dark); color: #fff; }

.navbar { position: sticky; top: 0; z-index: 60; background: var(--dark); border-bottom: 4px solid var(--orange); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); }
.nav__list { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; list-style: none; margin: 0; padding: .35rem 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  display: inline-flex; align-items: center; padding: .5rem .9rem; border-radius: 6px; background: none;
  font: 700 1rem/1.2 var(--sans); color: var(--orange); text-decoration: none; letter-spacing: .005em;
}
.nav__item.has-sub > .nav__link { padding-right: .35rem; }
.nav__expand { display: inline-grid; place-items: center; width: 24px; height: 38px; margin-left: -.15rem; padding: 0; border: 0; background: none; cursor: pointer; color: var(--orange); border-radius: 6px; }
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__item.is-open > .nav__link, .nav__expand:hover { background: var(--dark-3); color: var(--orange-light); }
.nav__item.is-current > .nav__link, .nav__link[aria-current="page"] { background: var(--orange); color: var(--ink); }
.nav__item.is-current > .nav__expand { color: var(--orange); }
.nav__caret { width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .85; }
.nav__sub {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 16rem; padding: .45rem; margin: 0; list-style: none;
  background: var(--dark); border: 1px solid #555; border-top: 3px solid var(--orange); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 5;
}
.nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub, .nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav__sub a { display: block; padding: .5rem .75rem; border-radius: 5px; color: #f0f0f0; text-decoration: none; font-weight: 600; font-size: .98rem; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--orange); color: var(--ink); }
.navbar__actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav-search { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 6px; color: #f0f0f0; text-decoration: none; font-weight: 600; }
.nav-search svg { width: 20px; height: 20px; }
.nav-search:hover { background: var(--dark-3); color: #fff; }
.search-pop { position: absolute; right: max(var(--gutter), calc((100% - var(--maxw)) / 2)); top: 100%; z-index: 70; width: min(30rem, calc(100vw - 2 * var(--gutter))); background: var(--white); border: 1px solid var(--line-strong); border-top: 4px solid var(--orange); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-md); padding: .9rem; }
.search-form { display: flex; gap: .5rem; }
.search-form input { flex: 1; min-width: 0; }

/* Kleines Logo in der mitlaufenden Menüleiste (große Bildschirme): erscheint, sobald der Kopf mit dem großen Logo aus dem Bild gescrollt
   ist (site.js setzt .is-stuck), damit man immer sieht, auf welcher Seite man ist. Abschaltbar unter „Gestaltung“ (.navbar--no-logo).
   Auf Tablet hochkant und Handy bleibt der kompakte Kopf mit Logo ohnehin stehen.
   Die Menüleiste unter dem Logostreifen gilt ab 1021 px (Laptops, Tablet quer) – darunter der Knopf „Menü“ (Frau Faulstroh, 29.10.2026:
   „Das Menü sollte als Leiste unter dem Logostreifen sein“, nicht als Block vor dem Sardinien-Bild). */
.navbar__brand { display: none; }
@media (min-width: 1021px) {
  /* Menüpunkte linksbündig (nicht per space-between zwischen dem unsichtbaren Logo und den Schaltflächen verteilt) */
  .navbar__inner { justify-content: flex-start; }
  .navbar__actions { margin-left: auto; }
  /* Menüpunkt und Aufklapp-Pfeil sind ein Element: durchgehende Fläche, gemeinsamer Hover, gleiche Höhe */
  .nav__item.has-sub > .nav__link { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .nav__item.has-sub > .nav__expand { align-self: stretch; height: auto; margin-left: 0; border-radius: 0 6px 6px 0; transition: background-color .15s, color .15s; }
  .nav__item.has-sub:hover > .nav__link, .nav__item.has-sub:hover > .nav__expand,
  .nav__item.has-sub:focus-within > .nav__expand, .nav__item.has-sub.is-open > .nav__expand { background: var(--dark-3); color: var(--orange-light); }
  .nav__item.has-sub.is-current > .nav__link, .nav__item.has-sub.is-current > .nav__expand { background: var(--orange); color: var(--ink); }
  .navbar__brand { display: flex; align-items: center; gap: .55rem; flex: none; max-width: 0; margin-right: -1rem; overflow: hidden; opacity: 0; visibility: hidden; color: #fff; text-decoration: none; white-space: nowrap; transition: max-width .3s ease, margin .3s ease, opacity .25s ease, visibility .3s; }
  .navbar__brand img { width: auto; height: 38px; flex: none; }
  .navbar__brand span { font: 700 1.2rem/1 var(--sans); letter-spacing: .01em; }
  .navbar__brand small { font-size: .8em; font-weight: 600; color: var(--orange); }
  .navbar__brand:hover span { color: var(--orange-light); }
  .nav__link { transition: padding .3s ease, background-color .15s, color .15s; }
  .navbar.is-stuck:not(.navbar--no-logo) .navbar__brand { max-width: 13rem; margin-right: 0; opacity: 1; visibility: visible; }
  /* Platz für das Logo – die Leiste bleibt einzeilig: Menüpunkte rücken zusammen, „Suche“ nur als Lupe (Name steht in aria-label) */
  .navbar.is-stuck:not(.navbar--no-logo) .nav__link { padding-inline: .55rem; }
  .navbar.is-stuck:not(.navbar--no-logo) .nav__item.has-sub > .nav__link { padding-right: .25rem; }
  .navbar.is-stuck:not(.navbar--no-logo) .nav-search__label { display: none; }
  /* reicht der Platz trotzdem nicht (schmaler Bildschirm, breite Schrift, Merkliste), stuft site.js ab: .is-tight = „Suche“ nur als Lupe
     und Logo ohne „e.V.“, .is-tighter = nur das Bildzeichen, .is-tightest = Menüpunkte etwas kleiner, .is-nobrand = Logo ganz weg,
     .is-edge = Leiste bis fast an den Rand */
  .navbar.is-tight .nav-search__label, .navbar.is-tight .navbar__brand small { display: none; }
  .navbar.is-tight .nav__link { padding-inline: .6rem; }
  .navbar.is-tighter .navbar__brand span { display: none; }
  .navbar.is-tighter .nav__link, .navbar.is-tighter:not(.navbar--no-logo) .nav__link { padding-inline: .45rem; }
  .navbar.is-tight .nav__item.has-sub > .nav__link, .navbar.is-tighter:not(.navbar--no-logo) .nav__item.has-sub > .nav__link { padding-right: .2rem; }
  .navbar.is-tightest .nav__link, .navbar.is-tightest:not(.navbar--no-logo) .nav__link { padding-inline: .32rem; font-size: .9rem; }
  .navbar.is-tightest .nav__item.has-sub > .nav__link { padding-right: .12rem; }
  .navbar.is-tightest .nav__expand { width: 20px; }
  .navbar.is-tightest .navbar__actions { gap: .25rem; }
  .navbar.is-tightest .navbar__actions .btn--small { padding-inline: .75rem; }
  .navbar.is-nobrand .navbar__brand { display: none; }
  .navbar.is-edge .navbar__inner { padding-inline: 12px; gap: .5rem; }   /* letzte Stufe: Leiste bis fast an den Rand */
  .navbar.is-measuring .nav__link, .navbar.is-measuring .navbar__brand { transition: none; }   /* site.js misst ohne Übergänge */
}
@media (min-width: 1021px) and (max-width: 1320px) {
  .navbar.is-stuck:not(.navbar--no-logo) .navbar__brand span { font-size: 1.05rem; }
  .navbar.is-stuck:not(.navbar--no-logo) .nav__link { padding-inline: .45rem; }
  .navbar.is-stuck:not(.navbar--no-logo) .nav__item.has-sub > .nav__link { padding-right: .2rem; }
}

@media (max-width: 1020px) {
  .site-header { position: sticky; top: 0; z-index: 61; border-bottom: 4px solid var(--orange); }
  .site-header__inner { height: var(--header-h); padding-block: .35rem; }
  .brand img { height: calc(var(--header-h) - 16px); }
  .site-header__art { width: min(44%, calc(var(--header-h) * 3.5)); }   /* kompakter Kopf: Bilder klein, aber in voller Deckkraft – halb durchsichtig wirkten sie auf dem Handy grau und neblig (Frau Faulstroh, 07.11.2026) */
  .site-header--plain-mobile .site-header__art { display: none; }
  .menu-btn { display: inline-flex; }
  .js .navbar { position: fixed; inset: calc(var(--header-h) + 4px) 0 0 0; z-index: 60; border: 0; box-shadow: none; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .js .navbar.is-open { transform: none; visibility: visible; }
  .js .navbar__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1rem; padding-block: .6rem 3rem; }
  .js .nav__list { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0; }
  .js .nav__item { flex-wrap: wrap; border-bottom: 1px solid #555; }
  .js .nav__item.has-sub > .nav__link { flex: 1; padding-right: .3rem; }
  .js .nav__link { padding: 1rem .3rem; font-size: 1.15rem; border-radius: 0; background: none; }
  .js .nav__expand { width: 54px; height: 54px; }
  .js .nav__item.is-current > .nav__link, .js .nav__link[aria-current="page"] { background: none; color: #fff; box-shadow: inset 4px 0 0 var(--orange); padding-left: .8rem; }
  .js .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: var(--dark-2); padding: .3rem 0 .6rem .6rem; min-width: 0; display: none; width: 100%; border-radius: 0; }
  .js .nav__item.is-open > .nav__sub { display: block; }
  .js .nav__item:hover > .nav__sub, .js .nav__item:focus-within > .nav__sub { display: none; }
  .js .nav__item.is-open:hover > .nav__sub, .js .nav__item.is-open:focus-within > .nav__sub { display: block; }
  .js .navbar__actions { justify-content: space-between; }
  .js .search-pop { position: static; width: auto; margin: 0 var(--gutter) 1rem; box-shadow: none; border-radius: var(--radius); }
  .no-js .nav__expand, .no-js .nav__sub { display: none; }
  .no-js .menu-btn { display: none; }
  .no-js .site-header { position: relative; }   /* nicht mitlaufend, aber Bezugsrahmen für die Kopfbilder (bei static überdeckten sie die ganze Seite) */
}
@media (max-width: 520px) { :root { --header-h: 68px; } .menu-btn span { display: none; } .site-header__art { width: 38%; } }

/* ---------- Buttons, Chips, Badges ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .65rem 1.25rem;
  font: 700 1rem/1.2 var(--sans); letter-spacing: .005em; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn--accent:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--ink); }
.btn--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.btn--dark:hover { background: var(--dark-3); border-color: var(--dark-3); }
.btn--ghost { background: transparent; }
.btn--light { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.btn--light:hover { background: #fff; color: var(--dark); }
.btn--small { min-height: 38px; padding: .4rem .9rem; font-size: .92rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-arrow { font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-arrow::after { content: " →"; transition: margin .15s; }
.link-arrow:hover::after { margin-left: .2em; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .3rem .85rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--white); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"], .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font: 700 .76rem/1.4 var(--sans);
  letter-spacing: .04em; text-transform: uppercase; background: var(--white); color: var(--ink); border: 1px solid var(--line-strong);
}
.badge--accent { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.badge--dark { background: var(--dark); border-color: var(--dark); color: #fff; }
.badge--soft { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
.badge--danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.breadcrumbs { font-size: .92rem; color: var(--ink-3); padding-block: 1rem .2rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .55rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .55rem; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Formulare ---------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label, .field .label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field .hint { font-size: .88rem; color: var(--ink-3); }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .8rem; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: var(--focus); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: .92rem; font-weight: 600; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--dark); flex: none; }
.hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.notice { padding: 1rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--white); }
.notice--ok { border-color: #b9d6c4; background: #eef7f1; color: #1d4a2f; }
.notice--error { border-color: #e4b9b0; background: #fbefec; color: #7c2a1c; }
.notice--info { border-color: var(--line-strong); background: var(--paper-2); }

/* ---------- Tierkarten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 255px), 1fr)); gap: clamp(1rem, .7rem + 1.2vw, 1.7rem); list-style: none; margin: 0; padding: 0; }
.acard { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.acard:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px); }
.acard__media { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; }
.acard--animal .acard__media { aspect-ratio: 1; }   /* Tierkarten: quadratische Kopfbilder wie auf der alten Seite (Vorgabe 'k') */
.acard__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .6s ease; }
.acard:hover .acard__media img { transform: scale(1.035); }
.acard__noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-strong); }
.acard__noimg img { width: 38%; opacity: .35; height: auto; object-fit: contain; }
.acard__badges { position: absolute; left: 10px; top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.acard__body { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 1.1rem 1.15rem; }
.acard--animal .acard__body { align-items: center; text-align: center; padding: .8rem 1rem .9rem; }   /* Tierkarten: nur der Name unter dem Bild */
.acard__name { font: 600 1.38rem/1.15 var(--serif); margin: 0; letter-spacing: -.01em; }
.acard__name a { color: var(--ink); text-decoration: none; }
.acard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* ganze Karte klickbar */
.acard:hover .acard__name a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.acard__meta { color: var(--ink-2); font-size: .98rem; margin: 0; }
.acard__where { color: var(--ink-3); font-size: .9rem; margin: .15rem 0 0; }

/* kompakte Kacheln (Archiv "Zuhause gefunden" / "In Memoriam") */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: clamp(.8rem, .5rem + 1vw, 1.3rem); list-style: none; margin: 0; padding: 0; }
.tile { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.tile:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.tile__media { aspect-ratio: 1; background: var(--paper-2); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: .6rem .75rem .75rem; }
.tile__name { font: 600 1.05rem/1.2 var(--serif); margin: 0; }
.tile__name a { color: var(--ink); text-decoration: none; }
.tile__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile:hover .tile__name a { text-decoration: underline; text-decoration-color: var(--orange); }
.tile__date { font-size: .84rem; color: var(--ink-3); margin: .1rem 0 0; }
.tiles--memorial .tile { background: transparent; border-color: var(--line); }
.tiles--memorial .tile__media img { filter: grayscale(.45) sepia(.12); }

/* ---------- Startseite ----------
   Die Bereiche stehen in der Reihenfolge aus Admin → Gestaltung (zuerst die Neuigkeiten). Jeder Bereich sieht hell (Seitenhintergrund)
   und dunkel (.section--dark = Dunkelgrau der alten Seite) gut aus – die Startseite wechselt beide ab (ohne dunkle Flächen: hell/sand). */
.home-sec { scroll-margin-top: calc(var(--nav-h) + 12px); }
.home-narrow { max-width: 820px; margin-inline: auto; }
.section--dark .lead { color: var(--on-dark); }
.section--dark .btn:not(.btn--accent):not(.btn--dark) { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
.section--dark .btn:not(.btn--accent):not(.btn--dark):hover { background: #fff; border-color: #fff; color: var(--ink); }
.section--dark .btn--accent, .section--dark .btn--accent:hover { color: var(--ink); }   /* sonst gewinnt „.section--dark a“: helle Schrift auf Orange (Kontrast 1,7 : 1) */
.section--dark .btn--dark { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.section--dark .btn--dark:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--ink); }
.home-sec:not(.section--dark) .btn--light { border-color: var(--ink); color: var(--ink); }
.home-sec:not(.section--dark) .btn--light:hover { background: var(--ink); color: #fff; }

/* Neuigkeiten: großer Aufmacher mit Bild, daneben bis zu drei weitere, darunter Karten; dazu „Neues von Ehemaligen“ */
.newsboard { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1rem, .6rem + 1.4vw, 1.7rem); align-items: stretch; }
.newsboard--single { grid-template-columns: minmax(0, 1fr); }
.nb-lead, .nb-item, .nb-card, .nb-story { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; }
.nb-lead:hover, .nb-item:hover, .nb-card:hover, .nb-story:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-2px); }
.nb-lead h3 a::after, .nb-item h3 a::after, .nb-card h3 a::after, .nb-story__title::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* ganze Karte klickbar */
.nb-lead__media, .nb-item__media, .nb-card__media, .nb-story__media { display: block; overflow: hidden; background: var(--paper-2); }
.nb-lead__media img, .nb-item__media img, .nb-card__media img, .nb-story__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .6s ease; }
.nb-lead:hover .nb-lead__media img, .nb-item:hover .nb-item__media img, .nb-card:hover .nb-card__media img, .nb-story:hover .nb-story__media img { transform: scale(1.03); }
.nb-lead__media { aspect-ratio: 16 / 10; }
.nb-lead__media.is-small { display: grid; place-items: center; aspect-ratio: auto; padding: clamp(.8rem, .5rem + 1vw, 1.4rem); }
.nb-lead__media.is-small img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.nb-noimg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; }
.nb-lead__media .nb-noimg img, .nb-item__media .nb-noimg img, .nb-card__media .nb-noimg img, .nb-story__media .nb-noimg img { width: 30%; height: auto; opacity: .3; object-fit: contain; }
.nb-lead { display: flex; flex-direction: column; }
.nb-lead__body { padding: clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.1rem, .9rem + 1vw, 1.8rem) 1.5rem; }
.nb-lead h3 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.2rem); margin: 0 0 .55rem; }
.nb-lead p { color: var(--ink-2); font-size: 1.08rem; margin: 0 0 .9rem; }
.nb-lead__body .link-arrow { color: var(--orange-ink); }
.nb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: 0 0 .45rem; font-size: .88rem; font-weight: 600; color: var(--ink-3); }
.nb-side { display: grid; grid-auto-rows: 1fr; gap: clamp(1rem, .6rem + 1.4vw, 1.7rem); }
.nb-item { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.nb-item__media { height: 100%; min-height: 150px; }
.nb-item__body { padding: 1rem 1.15rem 1.1rem; align-self: center; }
.nb-item h3, .nb-card h3 { font-size: 1.22rem; line-height: 1.2; margin: 0 0 .35rem; }
.nb-lead h3 a, .nb-item h3 a, .nb-card h3 a { color: var(--ink); text-decoration: none; }
.nb-lead:hover h3 a, .nb-item:hover h3 a, .nb-card:hover h3 a { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nb-item p, .nb-card p { margin: 0; color: var(--ink-2); font-size: .97rem; line-height: 1.5; }
.nb-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 1.7rem); list-style: none; margin: clamp(1rem, .6rem + 1.4vw, 1.7rem) 0 0; padding: 0; }
.nb-card { display: flex; flex-direction: column; height: 100%; }
.nb-card__media { aspect-ratio: 3 / 2; }
.nb-card__body { padding: .95rem 1.1rem 1.15rem; }
.nb-card__media.is-small img { object-fit: none; object-position: 50% 50%; }   /* kleines Altbild: in Originalgröße statt unscharf aufgezogen */
/* „Auf der Startseite über die volle Breite“ (Sonderaktionen; ebenso bei nur einer Neuigkeit): Aufmacher quer über die ganze Breite –
   oben die Überschrift, darunter die Bilder, dann der Text (Wunsch Frau Faulstroh, 29.10.2026), mittig in einer gut lesbaren Spalte –,
   alle weiteren Neuigkeiten als Kartenreihe darunter */
.newsboard--wide { grid-template-columns: minmax(0, 1fr); }
.nb-more--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-more--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-more--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.newsboard--wide .nb-lead { --nb-pad: clamp(1.1rem, .8rem + 1.6vw, 2.6rem); display: flex; flex-direction: column; align-items: center; }
.newsboard--wide .nb-lead > * { width: min(100%, 58rem); }
.newsboard--wide .nb-lead__top { padding: clamp(1.3rem, 1rem + 1.4vw, 2.4rem) var(--nb-pad) 0; }
.newsboard--wide .nb-lead__top h3 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); }
.newsboard--wide .nb-lead__media { width: min(calc(100% - 2 * var(--nb-pad)), calc(58rem - 2 * var(--nb-pad))); min-height: 0; margin-top: clamp(.9rem, .7rem + .6vw, 1.3rem); aspect-ratio: 2 / 1; border-radius: var(--radius-sm); }
.newsboard--wide .nb-lead__media.is-small { aspect-ratio: auto; padding: 0; background: none; }   /* kleines Bild (z. B. Fotostreifen): in Originalgröße, mittig */
.newsboard--wide .nb-lead__body { padding: clamp(1rem, .8rem + .8vw, 1.5rem) var(--nb-pad) clamp(1.3rem, 1rem + 1.2vw, 2.2rem); }
.newsboard--wide .nb-lead--spot .nb-lead__body { flex: none; }
@media (max-width: 1100px) { .nb-more--row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } }

/* Hervorgehobene Neuigkeiten („Dunkel hervorheben“ im Admin): dunkler Grund, Text weiß, Überschriften und fett gesetzte Stellen gelb –
   wie der Aufmacher der alten Startseite. Farben unter „Gestaltung“ (--spot-bg, --spot-accent). */
.nb-lead--spot, .nb-item--spot, .nb-card--spot, .acard--spot, .article-spot { background: var(--spot-bg); border-color: var(--spot-bg); color: #fff; }
.nb-lead--spot:hover, .nb-item--spot:hover, .nb-card--spot:hover, .acard--spot:hover { border-color: var(--spot-accent); }
.nb-lead--spot .nb-lead__media, .nb-item--spot .nb-item__media, .nb-card--spot .nb-card__media, .acard--spot .acard__media { background: var(--spot-bg); }
.nb-lead--spot h3 a, .nb-item--spot h3 a, .nb-card--spot h3 a, .acard--spot .acard__name a { color: var(--spot-accent); }
.nb-lead--spot:hover h3 a, .nb-item--spot:hover h3 a, .nb-card--spot:hover h3 a, .acard--spot:hover .acard__name a { text-decoration-color: currentColor; }
.nb-lead--spot p, .nb-item--spot p, .nb-card--spot p, .acard--spot .acard__meta { color: #fff; }
.nb-lead--spot strong, .nb-item--spot strong, .nb-card--spot strong, .acard--spot strong { color: var(--spot-accent); }
.nb-lead--spot .nb-meta, .nb-item--spot .nb-meta, .nb-card--spot .nb-meta, .acard--spot .news-date { color: rgba(255, 255, 255, .72); }
.nb-lead--spot .nb-lead__body .link-arrow { color: var(--spot-accent); }
.nb-lead--spot .nb-lead__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }   /* Text mittig im verbleibenden Platz statt dunkler Leerfläche unten */
.nb-lead--spot .nb-lead__body .link-arrow { align-self: flex-start; }
@media (max-width: 700px) { .nb-lead--spot p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } }
.nb-lead--spot .nb-noimg img, .nb-item--spot .nb-noimg img, .nb-card--spot .nb-noimg img { filter: invert(1); opacity: .45; }
.article-spot { margin: .4rem 0 2rem; padding: clamp(1.2rem, .7rem + 2vw, 2.4rem) clamp(1.1rem, .5rem + 2.6vw, 2.6rem) clamp(1.4rem, .8rem + 2vw, 2.4rem); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.article-spot .article-head { padding-top: 0; }
.article-spot h1 { color: var(--spot-accent); }
.article-spot .news-date { color: rgba(255, 255, 255, .72); }
.article-spot .prose { color: #fff; }
.article-spot .prose :is(h2, h3, h4, strong, b) { color: var(--spot-accent); }
.article-spot .prose a { color: var(--spot-accent); }
.article-spot .prose a:hover { color: #fff; }
.article-spot .prose blockquote { border-left-color: var(--spot-accent); color: #fff; }
.article-spot .prose blockquote cite, .article-spot .prose figcaption { color: rgba(255, 255, 255, .75); }
.article-spot .prose :is(th, td) { border-bottom-color: rgba(255, 255, 255, .2); }
.article-spot .prose hr { border-color: rgba(255, 255, 255, .25); }
.article-spot .prose > :last-child { margin-bottom: 0; }
.nb-stories { margin-top: clamp(1.8rem, 1.2rem + 1.8vw, 2.8rem); }
.nb-stories__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1rem; padding-top: 1.1rem; border-top: 3px solid var(--orange); }
.nb-stories__head h3 { margin: 0; font-size: 1.4rem; }
.nb-stories__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, .5rem + 1vw, 1.3rem); list-style: none; margin: 0; padding: 0; }
.nb-story { display: flex; align-items: center; gap: .85rem; padding-right: .9rem; min-height: 88px; }
.nb-story__media { flex: none; align-self: stretch; width: 96px; }
.nb-story__title { font: 600 1.02rem/1.25 var(--serif); color: var(--ink); text-decoration: none; padding-block: .6rem; }
.nb-story:hover .nb-story__title { text-decoration: underline; text-decoration-color: var(--orange); }
.section--dark .nb-stories__head h3 { color: #fff; }
.home-sec .nb-story__title { color: var(--ink); }

/* Tiervermittlung: Einleitung, Schnellsuche, Startseiten-Tiere */
.adopt-intro { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem 3rem; align-items: end; margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }
.adopt-intro h2 { margin-bottom: .45rem; }
.adopt-intro .lead { margin: 0; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: var(--ink-2); }
.hero__facts li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; background: var(--orange); border-radius: 50%; margin-right: .5rem; transform: translateY(-1px); }
.adopt-intro__facts { flex-direction: column; gap: .55rem; margin: 0; font-size: 1.02rem; font-weight: 600; }
.section--dark .hero__facts { color: #f0f0f0; }
.home-sec .quickfinder__card { box-shadow: var(--shadow-md); }
.adopt-head { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.adopt-head--first { margin-top: 0; }   /* ohne Einleitung und Schnellsuche stehen die Tiere oben im Bereich */
/* Eigene Bereiche der Startseite (Admin → Startseite → Eigene Bereiche): Text, Tierkarten wie im Tierfinder, Knopf */
.home-block__text { margin: 0 0 1.6rem; }
.home-block__text > :last-child { margin-bottom: 0; }
.home-block__cards { margin: 0; }
.home-block__more { margin: 1.6rem 0 0; }
.adopt-head__title { margin: 0; font-size: clamp(1.45rem, 1.15rem + .9vw, 1.95rem); }
.adopt-more { margin-top: 1.8rem; }

/* Kennzahlen */
.home-sec--kennzahlen { padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* alle Kennzahlen in einer Reihe, auch mit der Kachel „Kastrationen“ */
.stats--single { text-align: center; }   /* seit 06.11.2026 nur noch die Kastrationen (keine Tierzahlen): eine Kachel, mittig */
.home-sec--kennzahlen:not(.section--dark) .stats { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.stat { padding: 1.4rem 1.4rem; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat__num { display: block; font: 600 clamp(2rem, 1.4rem + 1.6vw, 2.9rem)/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.stat__label { display: block; margin-top: .35rem; color: var(--ink-2); font-size: .98rem; }
.stat__note { display: block; margin-top: .25rem; color: var(--ink-3); font-size: .85rem; }
.stat a { text-decoration: none; color: inherit; display: block; }
.stat a:hover .stat__num { color: var(--orange-ink); }
.section--dark .stat { border-color: rgba(255, 255, 255, .2); }
.section--dark .stat__num { color: #fff; }
.section--dark .stat__label, .section--dark .stat__note { color: var(--on-dark); }
.section--dark .stat a:hover .stat__num { color: var(--orange); }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.6vw, 2rem); counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding-top: 3.2rem; border-top: 2px solid var(--line-strong); counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; top: .75rem; left: 0; font: 600 1.6rem/1 var(--serif); color: var(--orange-ink); }
.steps h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.section--dark .steps li { border-top-color: rgba(255, 255, 255, .28); }
.section--dark .steps li::before { color: var(--orange); }
.section--dark .steps p { color: var(--on-dark); }

/* Gästebuch */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 1rem + 1.5vw, 2.4rem); }
.quote { margin: 0; padding: 1.4rem 0 0; border-top: 3px solid var(--orange); }
.quote blockquote { margin: 0 0 1rem; font: italic 400 1.14rem/1.55 var(--serif); color: var(--ink); }
.quote figcaption { font-size: .93rem; color: var(--ink-2); }
.quote figcaption strong { color: var(--ink); }
.section--dark .quote blockquote, .section--dark .quote figcaption strong { color: #fff; }
.section--dark .quote figcaption { color: var(--on-dark); }

/* Helfen */
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .8rem + 1.6vw, 2rem); }
.help-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); display: flex; flex-direction: column; gap: .6rem; }
.help-card h3 { margin: 0; font-size: 1.35rem; }
.help-card p { margin: 0; color: var(--ink-2); flex: 1; }
.section--dark .help-card { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); }
.section--dark .help-card p { color: var(--on-dark); }
.postcard { display: block; margin-inline: auto; max-width: 100%; border-radius: var(--radius); }

@media (max-width: 1100px) {
  .newsboard { grid-template-columns: minmax(0, 1fr); }
  .nb-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .nb-lead__media { aspect-ratio: auto; min-height: 100%; }
  .nb-lead__body { align-self: center; }
  .nb-side { grid-auto-rows: auto; }
  .nb-stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .adopt-intro { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* ungerade Anzahl: die letzte Kachel über die ganze Breite */
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .section--dark .stat:nth-child(n+3) { border-top-color: rgba(255, 255, 255, .2); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-grid, .help-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nb-lead { display: flex; }
  .nb-lead__media { aspect-ratio: 16 / 10; min-height: 0; }
  .nb-item { grid-template-columns: 112px minmax(0, 1fr); }
  .nb-item__media { min-height: 112px; }
  .nb-item__body { padding: .8rem .9rem; }
  .nb-item h3, .nb-card h3 { font-size: 1.08rem; }
  .nb-item p, .nb-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .94rem; }
  .nb-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .nb-card__media { aspect-ratio: auto; min-height: 112px; }
  .nb-card__media.is-small img { object-fit: cover; }   /* Handy: Vorschaubild 112 px – verkleinert, nicht ausgeschnitten */
  .nb-card__body { padding: .8rem .9rem; }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .nb-stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nb-story { flex-direction: column; align-items: stretch; gap: 0; padding: 0; } .nb-story__media { width: auto; aspect-ratio: 4 / 3; } .nb-story__title { padding: .55rem .7rem .7rem; font-size: .98rem; } }

/* ---------- Tierprofil ---------- */
.animal {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); column-gap: clamp(1.8rem, 1rem + 3vw, 4rem); row-gap: 0; align-items: start;
  grid-template-areas: "gallery head" "gallery info" "body info";
  padding-block: 1.4rem clamp(2rem, 1.5rem + 3vw, 4rem);
}
.animal__gallery { grid-area: gallery; min-width: 0; }
.animal__head { grid-area: head; min-width: 0; }
.animal__info { grid-area: info; min-width: 0; }
.animal__body { grid-area: body; min-width: 0; margin-top: 2.2rem; }
.gallery__main { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.gallery__main--thumb img { object-fit: contain; background: var(--paper-2); }
.gallery__count { position: absolute; right: 12px; bottom: 12px; background: rgba(20, 20, 20, .72); color: #fff; padding: .2rem .65rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
/* Galerie oben: Querformat 4:3 wie die Fotoblöcke im Text (gleicher Bildausschnitt bzw. weißer Rand aus dem Admin) */
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.gallery__thumbs a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid transparent; background: var(--paper-2); }
@media (max-width: 560px) { .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } }
.gallery__thumbs a:hover, .gallery__thumbs a[aria-current="true"] { border-color: var(--orange); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; list-style: none; margin: 1.5rem 0; padding: 0; }
.gallery-grid a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-grid a:hover img { transform: scale(1.04); }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }   /* Handy: zwei Fotos nebeneinander statt eines je Zeile */
/* Fotoalben auf Veranstaltungsseiten: Sprungleiste, Überschrift je Album, Galerie darunter */
.album-nav { align-items: center; margin: 1.8rem 0 0; }
.album-nav__label { font-weight: 700; margin-right: .2rem; }
.album-title { margin: 2.2rem 0 .3rem; scroll-margin-top: calc(var(--nav-h) + 24px); }
.album-title small { display: block; margin-top: .2rem; font: 500 1rem/1.4 var(--sans); color: var(--ink-3); }
.album-title + .gallery-grid { margin-top: .9rem; }

.animal__head h1 { margin: .15rem 0 .3rem; font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem); }
.animal__sub { font-size: 1.15rem; color: var(--ink-2); margin: 0 0 1rem; }
.animal__badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .5rem; }
.facts { margin: 1.4rem 0 0; border-top: 2px solid var(--ink); }
.facts__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: .2rem 1rem; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding-top: .15rem; }
.facts dd { margin: 0; }
.facts .note { display: block; color: var(--ink-3); font-size: .92rem; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .45rem; background: var(--line-strong); transform: translateY(-1px); }
.dot--ja { background: var(--ok); } .dot--nein { background: var(--danger); } .dot--vermutlich, .dot--bedingt { background: var(--orange); } .dot--vermutlich_nein { background: #c47a3a; }
.contact-box { margin-top: 1.8rem; padding: 1.4rem; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); }
.contact-box h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.person { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1rem; }
.person__img { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--paper-2); }
.person__img img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font: 600 1.15rem/1.2 var(--serif); margin: 0; }
.person__role { margin: 0; color: var(--ink-3); font-size: .92rem; }
.contact-lines { margin: 0 0 1rem; padding: 0; list-style: none; font-size: .98rem; }
.adopted-banner { display: flex; gap: 1rem; align-items: center; margin: 1.2rem 0 0; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--paper-2); color: var(--dark); font-weight: 600; }
.memorial-banner { margin: 1.2rem 0 0; padding: 1.2rem 1.3rem; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); text-align: center; }
.memorial-banner p { margin: 0; font: italic 400 1.2rem/1.5 var(--serif); }
.memorial-banner small { display: block; margin-top: .35rem; font: 600 .82rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.video { position: relative; aspect-ratio: 16 / 9; background: #151515 center / cover no-repeat; border-radius: var(--radius); overflow: hidden; margin: 1.6rem 0; }
.video button { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer; display: grid; place-items: center; font: 600 1rem var(--sans); gap: .6rem; align-content: center; }
.video button:hover { background: rgba(0, 0, 0, .5); }
.video button svg { width: 64px; height: 64px; }
.video small { max-width: 34ch; opacity: .85; font-weight: 500; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.animal-body { max-width: var(--measure); }
.section-title { font-size: 1.6rem; margin: 2.2rem 0 1rem; }

@media (max-width: 900px) {
  .animal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gallery" "info" "body"; }
  .animal__gallery { margin: .4rem 0 1.4rem; }
  .animal__body { margin-top: 1.6rem; }
  .facts__row { grid-template-columns: 8rem 1fr; }
}

/* ---------- Listen & Filter ---------- */
.page-head { padding-block: 1.2rem .6rem; }
.page-head h1 { margin-bottom: .3em; }
.page-head .lead { margin-bottom: 0; }
.filters { margin: 1.4rem 0 1.6rem; padding: 1.1rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.filters summary { display: none; }
.filters__row { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: end; }
.filters__row + .filters__row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.filters .field { min-width: 11rem; flex: 1 1 11rem; }
.filters .field--search { flex: 2 1 16rem; }
.filters .checks { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.filters .btn-row { margin-left: auto; }
.result-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1.1rem; color: var(--ink-2); }
.result-bar strong { color: var(--ink); }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.empty { padding: 3rem 1.2rem; text-align: center; background: var(--white); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty h2 { font-size: 1.5rem; }
.pager { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 2.4rem 0 0; }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 .8rem; display: inline-grid; place-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; }
.pager a:hover { border-color: var(--ink); }
.pager [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager .gap { border: 0; background: none; min-width: 20px; padding: 0; }
@media (max-width: 760px) {
  .filters summary { display: flex; justify-content: space-between; align-items: center; font-weight: 700; cursor: pointer; list-style: none; min-height: 40px; }
  .filters summary::-webkit-details-marker { display: none; }
  .filters summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
  .filters[open] summary::after { content: "–"; }
  .filters:not([open]) .filters__body { display: none; }
  .filters[open] .filters__body { margin-top: 1rem; }
  .filters .btn-row { margin-left: 0; width: 100%; }
}

/* ---------- Archiv ---------- */
.year-nav { margin: 1.2rem 0 1.4rem; }
.year-nav .chips { gap: .4rem; }
.archive-tools { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: end; justify-content: space-between; margin-bottom: 1.2rem; }
.segmented { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.segmented a { padding: .5rem 1rem; text-decoration: none; color: var(--ink); font-weight: 600; border-left: 1.5px solid var(--ink); }
.segmented a:first-child { border-left: 0; }
.segmented a:hover { background: var(--paper-2); }
.segmented a[aria-current="true"] { background: var(--ink); color: #fff; }
.memorial-intro { max-width: var(--measure); margin: 0 0 2rem; text-align: center; }
.memorial-intro blockquote { font: italic 400 1.2rem/1.6 var(--serif); margin: 0; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(1.2rem, 1rem + 1.4vw, 2.2rem) 1.4rem; list-style: none; margin: 0; padding: 0; }
.member { display: flex; flex-direction: column; gap: .15rem; position: relative; }
.member__img { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); margin-bottom: .6rem; border: 1px solid var(--line); }
.member__img img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font: 600 1.2rem/1.2 var(--serif); margin: 0; }
.member__name a { color: var(--ink); text-decoration: none; }
.member__name a::after { content: ""; position: absolute; inset: 0; }
.member__role { margin: 0; color: var(--ink-2); font-size: .95rem; white-space: pre-line; }
.member__mail { position: relative; z-index: 2; font-size: .92rem; }
/* Zum Gedenken: Karten drei nebeneinander – siehe Abschnitt „Inhalte und Feinschliff“ am Dateiende */
.member__dates { color: var(--ink-3); font-size: .9rem; }
.avatar { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--paper-2), var(--paper-3)); color: var(--ink-3); font: 600 2.2rem var(--serif); }

/* ---------- Inhalte (Prose) ---------- */
.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose p:has(> br:only-child) { margin-block: 0; }   /* Leerzeile aus dem Texteditor: nur die Zeile, ohne Absatzabstand darauf */
.prose h2 { margin-top: 2.2em; } .prose h3 { margin-top: 1.8em; } .prose h4 { margin-top: 1.5em; }
.prose img { border-radius: var(--radius-sm); margin: 1.2rem 0; }
.prose p.center, .prose h2.center, .prose h3.center { text-align: center; }
.prose p.right { text-align: right; }
/* Bilder sind Blöcke: in zentrierten (bzw. rechtsbündigen) Absätzen und im Gedenk-Text selbst ausrichten, sonst kleben sie in der breiten Spalte links */
.prose p.center img, .prose h2.center img, .prose h3.center img, .memorial-intro .prose img { margin-inline: auto; }
.prose p.right img { margin-left: auto; }
.prose ul, .prose ol { margin: 0 0 1.2em; } .prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 4px solid var(--orange); font: italic 400 1.22rem/1.6 var(--serif); color: var(--ink); }
.prose blockquote cite { display: block; margin-top: .5rem; font: 600 .92rem var(--sans); font-style: normal; color: var(--ink-3); }
.prose blockquote cite::before { content: "– "; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .98rem; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--paper-2); font-weight: 700; }
.prose a { overflow-wrap: anywhere; }
.prose a[href$=".pdf"]::before, .prose a[href$=".doc"]::before, .prose a[href$=".docx"]::before { content: "↓ "; font-weight: 700; }
.prose .table-wrap { overflow-x: auto; }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; padding-bottom: clamp(2rem, 1.5rem + 3vw, 4.5rem); }
.page-layout--single { grid-template-columns: minmax(0, 1fr); }
.page-layout--member { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.subnav { position: sticky; top: calc(var(--nav-h) + 24px); border-top: 3px solid var(--orange); padding-top: .8rem; }
.subnav h2 { font: 700 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; }
.subnav ul { list-style: none; margin: 0; padding: 0; }
.subnav a { display: block; padding: .4rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--orange-ink); }
.subnav a[aria-current="page"] { font-weight: 700; }
.child-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-top: 2rem; list-style: none; padding: 0; }
.child-card { display: block; height: 100%; padding: 1.2rem 1.3rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.child-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); color: var(--ink); }
.child-card h3 { margin: 0 0 .3rem; font-size: 1.2rem; }
.child-card p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.article-head { max-width: var(--measure); padding-block: 1rem .5rem; }
/* Beitragsseite: Text links, weitere Beiträge rechts (ab 961 px nebeneinander) */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.article-layout--single { grid-template-columns: minmax(0, 1fr); }
.article-side { border-top: 3px solid var(--orange); padding-top: .8rem; margin-top: 1.4rem; }
.article-side h2 { font: 700 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3rem; }
.side-news { list-style: none; margin: 0 0 1rem; padding: 0; }
.side-news__item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.side-news__item:hover strong { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.side-news__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); background: var(--paper-2); }
.side-news__media img { width: 100%; height: 100%; object-fit: cover; }
.side-news__text strong { display: block; font: 600 1.08rem/1.25 var(--serif); }
.side-news__text .news-date { display: block; margin-bottom: .15rem; }
@media (max-width: 960px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-side { margin-top: 2.4rem; } }
.article-head .news-date { display: block; margin-bottom: .4rem; }
@media (max-width: 960px) { .page-layout { grid-template-columns: 1fr; } .subnav { position: static; } }

/* ---------- Gästebuch / Kontakt ---------- */
.gb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.gb-form { padding: 1.4rem; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); }
.gb-form h2 { font-size: 1.4rem; }
/* Das Formular ist gut 1000 px hoch (mit Fehlermeldungen bis ~1200 px): Nur auf sehr hohen Bildschirmen bleibt es beim Scrollen stehen.
   Auf allen anderen würde sein unterer Teil – der Absende-Knopf – nie in den sichtbaren Bereich kommen. */
@media (min-width: 961px) and (min-height: 1300px) { .gb-form { position: sticky; top: calc(var(--nav-h) + 24px); } }
.gb-entry { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: .4rem 2rem; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.gb-entry:first-child { border-top: 2px solid var(--ink); }
.gb-entry__who { font-size: .95rem; color: var(--ink-3); }
.gb-entry__name { display: block; font: 600 1.15rem/1.25 var(--serif); color: var(--ink); }
.gb-entry__text { max-width: var(--measure); }
.gb-entry__text p { margin-bottom: .8em; }
.gb-reply { margin-top: 1rem; padding: .9rem 1.1rem; background: var(--paper-2); border-left: 4px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .98rem; }
.gb-reply strong { display: block; font: 700 .78rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: .3rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; padding-bottom: 4rem; }
.address-card { padding: 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.address-card h2 { font-size: 1.3rem; }
.address-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; }
.address-card dt { color: var(--ink-3); font-weight: 600; } .address-card dd { margin: 0; }
@media (max-width: 960px) { .gb-layout, .contact-layout { grid-template-columns: 1fr; } .gb-form { position: static; order: -1; } }
@media (max-width: 640px) { .gb-entry { grid-template-columns: 1fr; gap: .3rem; } }

/* ---------- Suche ---------- */
.search-hit { padding: 1rem 0; border-bottom: 1px solid var(--line); max-width: var(--measure); }
.search-hit h3 { margin: 0 0 .2rem; font-size: 1.2rem; }
.search-hit p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.search-hit .kind { font: 700 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); }

/* ---------- Fußzeile ---------- */
.site-footer { margin-top: auto; background: var(--dark); color: var(--on-dark); font-size: .98rem; border-top: 4px solid var(--orange); }
.site-footer a { color: #ececec; text-decoration-color: rgba(255, 255, 255, .35); }
.site-footer a:hover { color: var(--orange); text-decoration-color: var(--orange); }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2.4rem; padding-block: clamp(2.4rem, 2rem + 2vw, 4rem); }
.footer__logo img { height: 74px; width: auto; margin-bottom: 1rem; }
.footer__title { font: 700 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin: 0 0 .9rem; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer address { font-style: normal; }
.footer__bottom { background: var(--dark-deep); border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.1rem; font-size: .9rem; }
.footer__bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
.footer__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.footer__iban { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto 1fr auto; background: rgba(14, 14, 14, .94); color: #fff; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; font-size: .95rem; }
/* Großansicht: das Foto immer ganz zeigen. Die Zeile des Rasters hat die Höhe der Fläche (minmax(0, 1fr)) – vorher richtete sie sich nach dem
   Bild, max-height: 100 % griff nicht, und große Fotos (vor allem Hochformate, z. B. Jaska) liefen unten aus dem Bildschirm (06.11.2026) */
.lb__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; overflow: hidden; padding: 0 3.2rem; }
.lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb button { border: 0; background: rgba(255, 255, 255, .1); color: #fff; width: 46px; height: 46px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.lb button:hover { background: rgba(255, 255, 255, .25); }
.lb__prev, .lb__next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__prev { left: .6rem; } .lb__next { right: .6rem; }
.lb__cap { padding: .8rem 1rem 1.2rem; text-align: center; font-size: .95rem; min-height: 3rem; }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 1rem; }
.center-text { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; }
body.site { display: flex; flex-direction: column; min-height: 100vh; }
body.site main { flex: 1 0 auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  .site-header, .navbar, .site-footer, .breadcrumbs, .contact-box form, .filters, .pager, .btn, .gallery__thumbs, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; } a { color: #000; text-decoration: none; }
  .animal { grid-template-columns: 1fr; }
}

/* ---------- Ergänzungen ---------- */
.info-box { margin: 0 0 1.2rem; padding: .9rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: var(--radius-sm); }
.info-box summary { cursor: pointer; font-weight: 700; }
.info-box[open] summary { margin-bottom: .8rem; }
.archive-tools { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between; margin: 0 0 1.2rem; }
.field legend.label { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: .35rem; }
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.gallery__main--thumb { aspect-ratio: auto; display: inline-block; padding: 12px; background: var(--white); cursor: zoom-in; }
.gallery__main--thumb img { width: auto; height: auto; max-width: 100%; object-fit: contain; }
.gallery__main--thumb .gallery__count { display: none; }
/* Titelbild eines Beitrags: in Originalgröße (nie breiter als der Text), nicht auf die volle Breite aufgezogen */
.gallery__main--natural { aspect-ratio: auto; display: inline-block; max-width: 100%; overflow: visible; background: none; border: 0; }
.gallery__main--natural img { width: auto; height: auto; max-width: 100%; object-fit: contain; border-radius: var(--radius); }
.gallery__main--natural .gallery__count { display: none; }
/* Zu kleine Bilder (z. B. 150-Pixel-Vorschaubilder der alten Seite) in Karten nicht unscharf aufziehen, sondern in Originalgröße mittig zeigen */
.acard__media.is-small img, .news-lead__media.is-small img { object-fit: none; object-position: 50% 50%; }
.search-form .btn { flex: none; }
.facts:empty { display: none; }

/* Grid-Kinder dürfen schrumpfen (verhindert horizontalen Überlauf auf dem Handy) */
.hero__grid > *, .news-grid > *, .page-layout > *, .gb-layout > *, .contact-layout > *, .footer__grid > *, .quote-grid > *, .help-grid > * { min-width: 0; }
.hero__photos { max-width: 100%; }

/* mehrere Videos als Raster */
.videos { margin: 1.6rem 0; }
.videos .video { margin: 0; }
.videos--multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.videos--multi .video button small { display: none; }
.videos--multi .video button svg { width: 48px; height: 48px; }
.video button small a { color: #fff; }

/* ---------- Karte der Pflegestellen ---------- */
.map-box { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); min-height: 22rem; }
.map-gate { display: grid; place-items: center; min-height: 22rem; padding: 2rem; text-align: center;
  background: radial-gradient(ellipse at 30% 20%, rgba(255,154,3,.14), transparent 60%), repeating-linear-gradient(135deg, transparent 0 22px, rgba(38,38,38,.035) 22px 23px); }
.map-gate > div { max-width: 36rem; }
.map-gate h2 { font-size: 1.5rem; }
.map-canvas { height: clamp(24rem, 62vh, 40rem); width: 100%; z-index: 1; }
.map-pin span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }   /* ohne Anzahl (06.11.2026) */
.map-pin:focus-visible span, .map-pin:hover span { background: var(--ink); color: #fff; }
.map-popup ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.map-popup li + li { margin-top: .4rem; }
.map-popup a { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--ink); }
.map-popup img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }
.map-more { margin: .4rem 0 0; color: var(--ink-3); }
.place-list { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2 22rem; column-gap: 2rem; }
.place-list li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .1rem; }
.place-list strong { font-family: var(--serif); font-size: 1.05rem; }

/* ---------- Tierfinder (Filter mit Live-Zählern) ----------
   Filter über den Bildreihen (Frau Faulstroh, 29.10.2026: „Suchkriterien wieder oberhalb der Bildreihen“, „3, besser 4 Kopfbilder in einer Reihe“):
   am Computer als Kasten mit vier Spalten über der Liste, am Handy/Tablet (≤ 960 px) als Schublade. */
.finder__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, .8rem + 1vw, 1.6rem); align-items: start; }
.finder__layout > * { min-width: 0; }
.finder__panel {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.finder__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: inherit; }
.finder__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem .3rem; }
.finder__title { margin: 0; font-size: 1.3rem; }
.finder__close { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.finder__panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 1.1rem .6rem; overscroll-behavior: contain; }
.fgroup { margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.fgroup:first-child { border-top: 0; padding-top: .5rem; }
.fgroup__title { display: block; width: 100%; padding: 0; margin: 0 0 .6rem; font: 700 .78rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
legend.fgroup__title { float: left; }   /* Legende wie ein normaler Block (sonst landet das Padding des Fieldsets unter der Überschrift) */
.fgroup > legend + * { clear: both; }
.fgroup .hint { margin: .55rem 0 0; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.optgrid { display: flex; flex-wrap: wrap; gap: .4rem; }
.optlist { display: grid; gap: 1px; margin-inline: -.5rem; }
.opt { position: relative; display: inline-block; }
.opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__label { display: inline-flex; align-items: center; gap: .45rem; }
.opt--chip .opt__label { padding: .4rem .5rem .4rem .8rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .93rem; line-height: 1.2; transition: background .12s, border-color .12s; }
.opt--chip:hover .opt__label { border-color: var(--ink); }
.opt--chip input:checked + .opt__label { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.opt--list { display: block; }
.opt--list .opt__label { display: flex; align-items: center; justify-content: space-between; gap: .6rem; position: relative; padding: .5rem .5rem .5rem 2.3rem; border-radius: 6px; font-weight: 600; font-size: .98rem; }
.opt--list .opt__label::before { content: ""; position: absolute; left: .55rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -.575rem; border: 1.5px solid var(--ink-3); border-radius: 4px; background: var(--white); }
.opt--list:hover .opt__label { background: var(--paper-2); }
.opt--list input:checked + .opt__label::before { background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23262626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: var(--orange); }
.opt.is-disabled .opt__label { opacity: .42; }
.opt.is-disabled input { cursor: not-allowed; }
.opt input:focus-visible + .opt__label { box-shadow: var(--focus); }
.geo { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem; gap: .5rem; }
.finder__panel-foot { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--line); background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); }
.finder__apply, .finder__toggle, .finder__overlay { display: none; }
.js .finder__submit { display: none; }
.finder__reset-btn { flex: 1; }

.finder__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; margin-bottom: .9rem; }
.finder__count { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.finder__count strong { color: var(--ink); font: 600 1.5rem/1 var(--serif); }
.finder__tools { display: flex; align-items: center; gap: .6rem; }
.finder__sort { display: flex; align-items: center; gap: .5rem; }
.finder__sort label { font-weight: 600; font-size: .92rem; color: var(--ink-2); white-space: nowrap; }
.finder__sort select { width: auto; min-height: 42px; padding-block: .35rem; }
.finder__badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 .78rem/1 var(--sans); }
.finder__quick, .finder__active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 .75rem; }
.finder__quick:empty, .finder__active:empty { display: none; }
.finder__label { margin-right: .15rem; font: 700 .76rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.chip--quick { min-height: 36px; padding: .22rem .75rem; font-size: .92rem; }
.chip--quick[aria-current="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.finder__active .chip.is-active { background: var(--dark); border-color: var(--dark); }
.finder__active .chip.is-active:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.finder__reset { margin-left: .25rem; font-weight: 700; font-size: .92rem; }
.finder__list { transition: opacity .15s; }
.finder__list.is-loading { opacity: .45; pointer-events: none; }
.finder__list .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .finder__list .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .finder__list .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .finder__list .cards { gap: .7rem; } .finder__list .acard--animal .acard__body { padding: .55rem .5rem .65rem; } }   /* Handy: zwei Tiere nebeneinander (Karte = Foto + Name) */
@media (max-width: 339px) { .finder__list .cards { grid-template-columns: minmax(0, 1fr); } }
/* Computer: kompakter Kasten – „Zurücksetzen“ rechts neben der Überschrift, Filtergruppen in zwei Reihen à vier Spalten
   (Reihe 1: Suche, Alter, Geschlecht, Wo lebt das Tier · Reihe 2: Größe, In meiner Nähe, Verträglich mit, Besonderes) */
@media (min-width: 961px) {
  .finder__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .finder__panel-head { grid-column: 1; grid-row: 1; padding: .7rem 1.3rem 0; }
  .finder__panel-foot { grid-column: 2; grid-row: 1; padding: .7rem 1.3rem 0; border: 0; background: none; }
  .finder__reset-btn { flex: none; min-height: 38px; padding-block: .3rem; }
  .finder__panel-body { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.2rem, .6rem + 1.6vw, 2.4rem); overflow: visible; padding: 0 1.3rem .35rem; }
  .finder__panel-body .fgroup, .finder__panel-body .fgroup:first-child { padding: .5rem 0 .7rem; border-top: 0; }
  .finder__panel-body .fgroup__title { margin-bottom: .45rem; }
  .finder__panel-body .fgroup__example { display: none; }   /* das Beispiel steht schon im Suchfeld */
  .finder__panel-body .optgrid { gap: .3rem; }
  .finder__panel-body .opt--chip .opt__label { padding: .28rem .4rem .28rem .65rem; font-size: .88rem; }
  .finder__panel-body .optlist { display: flex; flex-wrap: wrap; gap: 0 .1rem; }
  .finder__panel-body .opt--list .opt__label { padding-block: .28rem; font-size: .93rem; }
  .finder__panel-body .fgroup .hint { margin-top: .35rem; font-size: .8rem; }
  .fgroup--q { order: 1; } .fgroup--species { order: 2; } .fgroup--age { order: 3; } .fgroup--sex { order: 4; } .fgroup--loc { order: 5; }
  .fgroup--size { order: 6; } .fgroup--geo { order: 7; } .fgroup--compat { order: 8; } .fgroup--feat { order: 9; }
}
@media (min-width: 961px) and (max-width: 1140px) { .finder__panel-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finder__count:focus { outline: none; }
.relax { display: grid; gap: .5rem; margin: 1.1rem auto 1.5rem; padding: 0; list-style: none; max-width: 30rem; }
.relax a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); text-decoration: none; font-weight: 600; text-align: left; }
.relax a:hover { border-color: var(--orange); background: var(--orange-soft); }
.acard__video { position: absolute; right: 10px; bottom: 10px; padding: .28rem .6rem; border-radius: 999px; background: rgba(24, 24, 24, .78); color: #fff; font: 600 .76rem/1 var(--sans); letter-spacing: .02em; }
.acard__where strong { color: var(--ink-2); }

@media (max-width: 960px) {
  .finder__layout { grid-template-columns: minmax(0, 1fr); }
  .finder__panel { position: static; max-height: none; }
  .js .finder__toggle { display: inline-flex; align-items: center; gap: .45rem; }
  .js .finder__panel {
    position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; top: auto; max-height: 90vh; max-height: 90dvh; border: 0; border-top: 4px solid var(--orange); border-radius: 18px 18px 0 0;
    transform: translateY(104%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s; box-shadow: 0 -14px 40px rgba(0, 0, 0, .35);
  }
  /* beim Öffnen sofort sichtbar (sonst lässt sich der Fokus nicht setzen), beim Schließen erst nach dem Hinausgleiten verborgen */
  .js .finder__panel.is-open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .js .finder__overlay { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(20, 20, 20, .55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .js .finder__overlay.is-open { opacity: 1; visibility: visible; }
  .js .finder__close { display: inline-grid; place-items: center; }
  .js .finder__apply { display: inline-flex; flex: 2; }
  .js .finder__panel-foot { border-radius: 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .finder__sort label { display: none; }
}
@media (max-width: 520px) { .finder__tools { width: 100%; } .finder__tools .finder__sort { flex: 1; } .finder__sort select { width: 100%; } }
@media print { .finder__panel, .finder__tools, .finder__quick, .finder__overlay { display: none !important; } .finder__layout { display: block; } }

/* ---------- Schnellsuche auf der Startseite ---------- */
.quickfinder { position: relative; z-index: 3; margin-top: calc(-1 * clamp(1.8rem, 1rem + 2.6vw, 3.2rem)); margin-bottom: clamp(1.2rem, .8rem + 1.4vw, 2rem); }
.quickfinder__card { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(8.5rem, .5fr) minmax(9.5rem, .55fr) auto; gap: .9rem 1.3rem; align-items: end; padding: 1.2rem 1.5rem 1.3rem; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.quickfinder__intro h2, .quickfinder__intro h3 { margin: 0 0 .15rem; font-size: 1.35rem; color: var(--ink); }
.quickfinder__intro p { margin: 0; color: var(--ink-2); font-size: .98rem; line-height: 1.4; }
.quickfinder__species { display: flex; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.quickfinder .field label, .quickfinder__card .field label { font-size: .85rem; }
.quickfinder__species .opt--chip .opt__label { padding: .5rem .95rem; }
@media (max-width: 1100px) { .quickfinder__card { grid-template-columns: 1fr 1fr; } .quickfinder__intro, .quickfinder__species { grid-column: 1 / -1; } .quickfinder .btn, .quickfinder__card .btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .quickfinder__card { grid-template-columns: 1fr; padding: 1.1rem 1.1rem 1.2rem; } .quickfinder .btn, .quickfinder__card .btn { width: 100%; } }

/* ---------- Verwaltungsleiste (nur für angemeldete Redakteure) ---------- */
.adminbar { background: #1f1f1f; color: #e6e6e6; font-size: .9rem; border-bottom: 2px solid var(--orange); }
.adminbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.2rem; min-height: 42px; padding-block: .25rem; }
.adminbar__preview { color: var(--orange); font-weight: 700; }
.adminbar__links { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; }
.adminbar a, .adminbar button { color: #fff; font: 600 .9rem var(--sans); text-decoration: none; background: none; border: 0; padding: .35rem .1rem; cursor: pointer; }
.adminbar a:hover, .adminbar button:hover { color: var(--orange); text-decoration: underline; }
.adminbar a.adminbar__edit { padding: .3rem .8rem; border-radius: 6px; background: var(--orange); color: var(--ink); }
.adminbar a.adminbar__edit:hover { background: var(--orange-hover); color: var(--ink); text-decoration: none; }
.adminbar form { display: inline; margin: 0; }
@media print { .adminbar { display: none !important; } }

.finder__wish { margin: 1.6rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--orange); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); }

/* ---------- Teilen ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.share__label { font: 700 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: .2rem; }
.share__link { display: inline-flex; align-items: center; min-height: 36px; padding: .25rem .8rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font: 600 .9rem var(--sans); text-decoration: none; cursor: pointer; }
.share__link:hover { border-color: var(--orange); background: var(--orange-soft); color: var(--ink); }
@media print { .share { display: none !important; } }

/* ---------- Spenden ---------- */
.donate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.6vw, 1.8rem); margin-bottom: 1.6rem; }
.donate__card { padding: 1.5rem 1.6rem; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.donate__card--wide { grid-column: 1 / -1; }
.donate__card h2 { margin: 0 0 .9rem; font-size: 1.45rem; }
.donate__list { display: grid; gap: .55rem; margin: 0; }
.donate__list > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .15rem 1rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.donate__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.donate__list dt { font: 700 .78rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.donate__list dd { margin: 0; overflow-wrap: anywhere; }
.donate__value { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .02em; }
.donate__big { margin: .2rem 0 .6rem; font-size: 1.12rem; overflow-wrap: anywhere; }
.donate__note { margin: 0; color: var(--ink-2); font-size: .98rem; }
.donate__copy { margin-left: .4rem; padding: .22rem .7rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font: 600 .84rem var(--sans); cursor: pointer; vertical-align: baseline; }
.donate__copy:hover { border-color: var(--orange); background: var(--orange-soft); }
.donate__thanks { margin: 0 0 4rem; text-align: center; font: italic 400 1.25rem/1.5 var(--serif); color: var(--ink-2); }
@media (max-width: 800px) { .donate { grid-template-columns: minmax(0, 1fr); } .donate__list > div { grid-template-columns: minmax(0, 1fr); } }
@media print { .donate__copy { display: none; } }

/* ---------- Merkliste ---------- */
.fav { position: absolute; z-index: 3; right: 10px; top: 10px; display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink-2); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .12s, background .12s, color .12s; }
.fav svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.fav:hover { transform: scale(1.08); color: var(--ink); }
.fav.is-on { background: var(--orange); color: var(--ink); }
.fav.is-on svg { fill: currentColor; }
.fav--profile { position: static; display: inline-flex; width: auto; height: 42px; padding: 0 1rem 0 .8rem; gap: .45rem; margin: 0 0 1rem; border-radius: 999px; background: var(--white); border: 1.5px solid var(--line-strong); box-shadow: none; font: 600 .95rem var(--sans); }
.fav--profile.is-on { background: var(--orange); border-color: var(--orange); }
.nav-fav { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border-radius: 6px; color: var(--orange); text-decoration: none; font-weight: 700; }
.nav-fav[hidden] { display: none; }
.nav-fav svg { fill: currentColor; }
.nav-fav:hover { background: var(--dark-3); color: var(--orange-light); }
.nav-fav__count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: var(--orange); color: var(--ink); font: 800 .78rem/1 var(--sans); }
.nav-fav__label { display: none; }   /* am Computer nur Herz + Zähler, damit die Menüleiste einzeilig bleibt */
@media (max-width: 1020px) { .nav-fav__label { display: inline; } }
@media (min-width: 1021px) and (max-width: 1300px) { .nav-search__label { display: none; } }

/* ---------- Sicherheitsfrage (Captcha) ---------- */
.captcha { padding: .9rem 1rem 1rem; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--white); }
.captcha > label { font-weight: 600; }
.captcha__q { color: var(--ink); white-space: normal; }
.captcha__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.captcha__row input { flex: 0 1 12rem; min-width: 7rem; }
.captcha .hint { font-size: .88rem; }

/* === Fotoblöcke im Text (Bildergruppen an ihrer Stelle in der Beschreibung) und umflossene Einzelbilder === */
.prose .photo-block { margin: 1.4rem 0 1.6rem; padding: 0; clear: both; }
.prose .photo-block .gallery-grid { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.prose .photo-block li { margin: 0; }
.prose .photo-block img { margin: 0; border-radius: 0; }
.photo-block__item { position: relative; cursor: zoom-in; }
.photo-block__item:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.photo-block__item.is-small img { object-fit: none; object-position: 50% 50%; }
.prose img.img-left { float: left; max-width: min(45%, 360px); height: auto; margin: .3rem 1.4rem 1rem 0; }
.prose img.img-right { float: right; max-width: min(45%, 360px); height: auto; margin: .3rem 0 1rem 1.4rem; }
.prose img.img-center { display: block; max-width: 100%; height: auto; margin: 1.2rem auto; }
.prose:has(img.img-left, img.img-right)::after { content: ""; display: table; clear: both; }   /* umflossene Bilder ragen nicht aus dem Text */
@media (max-width: 560px) {
  .prose .photo-block .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .prose img.img-left, .prose img.img-right { float: none; display: block; max-width: 100%; margin: 1rem 0; }
}
@media print { .prose .photo-block .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* === Wichtige Direktkontakte (Seite verein/direktkontakte): je Zuständigkeit Überschrift + Kontaktabsatz als Karte === */
.prose[data-page="verein/direktkontakte"] { max-width: 46rem; }
.prose[data-page="verein/direktkontakte"] > h2 {
  margin: 1.2rem 0 0; padding: .9rem 1.25rem .35rem; background: var(--white);
  border: 1px solid var(--line); border-top: 4px solid var(--orange); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3;
}
.prose[data-page="verein/direktkontakte"] > h2:first-child { margin-top: 0; }
.prose[data-page="verein/direktkontakte"] > h2 + p {
  margin: 0; padding: .2rem 1.25rem 1.05rem; background: var(--white);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); line-height: 1.8;
}
.prose[data-page="verein/direktkontakte"] > h2 + p strong { font-size: 1.08em; }
.prose[data-page="verein/direktkontakte"] a[href^="tel:"] { white-space: nowrap; }

/* === Tier-Verlauf: „Lebensweg“ im Tierprofil (Zeitleiste der öffentlichen Stationen) === */
.lifeline { margin-top: 1.8rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.lifeline__title { margin: 0 0 .8rem; font: 700 .86rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.lifeline__list { list-style: none; margin: 0; padding: 0; }
.lifeline__item { position: relative; display: grid; gap: .05rem; padding: 0 0 .9rem 1.55rem; }
.lifeline__item:last-child { padding-bottom: 0; }
.lifeline__item::before { content: ""; position: absolute; left: .32rem; top: .55rem; bottom: -.35rem; width: 2px; background: var(--line); }
.lifeline__item:last-child::before { display: none; }
.lifeline__item::after { content: ""; position: absolute; left: 0; top: .3rem; width: .78rem; height: .78rem; border-radius: 50%; background: var(--white); border: 2px solid var(--line-strong); box-sizing: border-box; }
.lifeline__item--in_vermittlung::after, .lifeline__item--adoptiert::after { border-color: var(--orange); }
.lifeline__item--zuhause_gefunden::after { border-color: var(--ok); background: var(--ok); }
.lifeline__item--in_memoriam::after { border-color: var(--ink-3); background: var(--ink-3); }
.lifeline__item--dauerpflege::after { border-color: var(--orange-ink); }
.lifeline__item.is-current::after { box-shadow: 0 0 0 3px var(--orange-soft); }
.lifeline__date { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.lifeline__text { font-weight: 600; color: var(--ink); }
.lifeline__item.is-current .lifeline__text { color: var(--ink); }
.lifeline__note { font-size: .92rem; color: var(--ink-2); }

/* === Videos === */
/* Player für eigene Videos und YouTube erst nach Klick (templates/partials/video_player.php, videos.php, assets/js/video-player.js) */
.vlist { margin: 2rem 0; }
.vlist__title { margin-top: 0; }
.vlist__grid { display: grid; gap: 1.4rem; }
.vlist--multi .vlist__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.6rem 1.2rem; align-items: start; }
.vplayer { margin: 0; min-width: 0; }
.prose .vplayer, .vplayer--inline { margin: 1.8rem 0; }
.vplayer--portrait { width: min(100%, calc(min(78vh, 760px) * var(--vp-r, .5625))); margin-inline: auto; }
.vplayer__stage { position: relative; aspect-ratio: var(--vp-ar, 16 / 9); background: #151515; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: #fff; }
.vplayer__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.vplayer img.vplayer__poster { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.vplayer__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vplayer__big { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: .65rem; width: 100%; padding: 1rem; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .55)); color: #fff; font: 600 1rem/1.3 var(--sans); text-align: center; cursor: pointer; }
.vplayer__bigicon svg { display: block; width: 76px; height: 76px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); transition: transform .15s ease; }
.vplayer__bigicon circle { fill: rgba(255, 255, 255, .94); transition: fill .15s; }
.vplayer__bigicon path { fill: var(--ink); }
.vplayer__big:hover .vplayer__bigicon circle, .vplayer__big:focus-visible .vplayer__bigicon circle { fill: var(--orange); }
.vplayer__big:hover .vplayer__bigicon svg { transform: scale(1.06); }
.vplayer__big:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; box-shadow: none; border-radius: var(--radius); }
.vplayer__biglabel { max-width: 34ch; text-shadow: 0 1px 3px rgba(0, 0, 0, .75); }
.vplayer__bigdur { display: inline-block; margin-left: .25rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .62); font-size: .84rem; font-variant-numeric: tabular-nums; text-shadow: none; }
.vplayer__stage.is-started .vplayer__big { display: none; }
.vplayer__stage.is-started.is-ended .vplayer__big { display: grid; }
.vlist--multi .vp-biglabel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vlist--multi .vplayer__bigicon svg { width: 60px; height: 60px; }
/* YouTube: Hinweis zum Datenschutz am unteren Rand */
.vplayer__stage--yt .vplayer__big { padding-bottom: 3rem; }
.vplayer__note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; padding: .45rem .8rem; background: rgba(0, 0, 0, .66); color: #ececec; font-size: .78rem; line-height: 1.35; text-align: center; }
.vplayer__note a { color: #fff; }
.vlist--multi .vplayer__note { font-size: .72rem; padding: .35rem .6rem; }
/* Bedienleiste */
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: .25rem; padding: 1.8rem .5rem .4rem; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .74)); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.vplayer__stage.is-started .vp-bar { opacity: 1; visibility: visible; }
.vplayer__stage.is-started.is-idle .vp-bar { opacity: 0; visibility: hidden; }
.vplayer__stage.is-idle { cursor: none; }
.vp-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; }
.vp-btn svg { width: 24px; height: 24px; fill: currentColor; }
.vp-btn:hover { background: rgba(255, 255, 255, .16); }
.vp-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.vp-btn[aria-pressed="true"] { color: var(--orange); }
.vp-time { flex: none; padding: 0 .3rem; font: 600 .82rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.vp-seekwrap { --vp-pos: 0%; position: relative; flex: 1; min-width: 50px; height: 30px; display: flex; align-items: center; }
.vp-seekwrap::before, .vp-buf, .vp-seekwrap::after { content: ""; position: absolute; left: 0; height: 5px; border-radius: 3px; pointer-events: none; }
.vp-seekwrap::before { right: 0; background: rgba(255, 255, 255, .28); }
.vp-buf { width: 0; background: rgba(255, 255, 255, .5); }
.vp-seekwrap::after { width: var(--vp-pos); background: var(--orange); }
input.vp-seek, input.vp-vol { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; }
input.vp-seek { position: relative; z-index: 1; width: 100%; height: 30px; }
input.vp-vol { flex: none; width: 76px; height: 30px; }
input.vp-seek::-webkit-slider-runnable-track { height: 30px; background: transparent; }
input.vp-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
input.vp-seek::-moz-range-track { height: 30px; background: transparent; }
input.vp-vol::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
input.vp-seek::-webkit-slider-thumb, input.vp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: 7.5px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
input.vp-vol::-webkit-slider-thumb { margin-top: -5.5px; }
input.vp-seek::-moz-range-thumb, input.vp-vol::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
input.vp-seek:focus-visible, input.vp-vol:focus-visible { outline: none; box-shadow: none; }
input.vp-seek:focus-visible::-webkit-slider-thumb, input.vp-vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 154, 3, .85); }
input.vp-seek:focus-visible::-moz-range-thumb, input.vp-vol:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 154, 3, .85); }
.vp-spin { position: absolute; left: 50%; top: 50%; z-index: 2; display: none; width: 48px; height: 48px; margin: -24px 0 0 -24px; border: 4px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: vp-spin .8s linear infinite; pointer-events: none; }
.vplayer__stage.is-started.is-waiting .vp-spin { display: block; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vp-spin { animation-duration: 2.4s; } .vplayer__bigicon svg, .vp-bar { transition: none; } }
.vp-error { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding: .8rem 1rem; background: rgba(0, 0, 0, .86); color: #fff; font-size: .95rem; }
.vp-error a { color: var(--orange-soft); }
.vplayer__stage:fullscreen, .vplayer__stage.is-fullscreen { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; background: #000; }
.vplayer__stage video::cue { font: 500 1.05rem/1.35 var(--sans); background: rgba(0, 0, 0, .78); }
/* Bildunterschrift */
.vplayer__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin-top: .55rem; font-size: .95rem; line-height: 1.45; color: var(--ink-2); }
.vplayer__title { font-weight: 700; color: var(--ink); }
.vplayer__dur { color: var(--ink-3); font-size: .88rem; font-variant-numeric: tabular-nums; }
.vplayer__desc { flex-basis: 100%; }
.vlist--multi .vp-vol, .vlist--multi .vp-time { display: none; }
@media (max-width: 560px), (hover: none) {
  .vp-vol { display: none; }
  .vp-time { font-size: .76rem; padding: 0 .15rem; }
  .vplayer__bigicon svg { width: 62px; height: 62px; }
}
@media (max-width: 380px) { .vp-time { display: none; } }
@media print { .vp-bar, .vplayer__big, .vplayer__note { display: none !important; } }

/* === Flaggen auf Tierfotos (lebt in Deutschland / noch auf Sardinien) – templates/partials/flag.php === */
.flag { position: absolute; z-index: 2; display: inline-flex; line-height: 0; border-radius: 3px; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 2px 7px rgba(0, 0, 0, .5); cursor: help; }
.flag > img, .acard .acard__media .flag > img, .tile .tile__media .flag > img, .animal .gallery__main .flag > img {
  display: block; width: auto; height: 18px; max-width: none; object-fit: contain; border-radius: 2px; transform: none; filter: none; transition: none; }
.flag--card { left: 12px; bottom: 12px; }
.flag--tile { left: 8px; bottom: 8px; }
.tile .tile__media .flag--tile > img { height: 15px; }
.tile__media { position: relative; }
.flag--profile { left: 14px; top: 14px; }
.animal .gallery__main .flag--profile > img { height: 24px; }
@media print { .flag { box-shadow: none; } }

/* === Inhalte und Feinschliff === */
/* Texte stehen immer linksbündig über die volle Breite. Zentrierte Absätze von der alten Seite (class="center", oft nach wenigen Wörtern
   umbrochen) wirkten wie eine schmale Säule in der Mitte („Nano möchte endlich ankommen dürfen“). Bilder in solchen Absätzen bleiben mittig. */
.prose p.center, .prose h2.center, .prose h3.center, .prose h4.center, .prose p.right { text-align: start; }
/* Tabellen von der alten Seite: leere Abstandsspalten nehmen keinen Platz weg; am Handy seitlich verschiebbar statt über den Rand */
.prose td:empty, .prose th:empty { padding: 0; }
@media (max-width: 640px) { .prose table { display: block; max-width: 100%; overflow-x: auto; } }

/* Zum Gedenken: drei Karten nebeneinander (Tablet zwei, Handy eine) – Foto, Name, Aufgabe, Sterbedatum, Anfang des Textes; „Weiterlesen“ klappt auf */
.memorials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .5rem + 1.6vw, 1.75rem); align-items: start; margin-block: 2rem 4rem; }
@media (max-width: 1020px) { .memorials { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .memorials { grid-template-columns: minmax(0, 1fr); } }
.memorial { display: flex; flex-direction: column; padding: clamp(1.2rem, .9rem + 1vw, 1.8rem); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--dark-3); border-radius: var(--radius); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--nav-h) + 24px); }
.memorial__head { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.memorial__photo { width: 128px; aspect-ratio: 1; flex: none; overflow: hidden; border-radius: 50%; background: var(--paper-2); box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line); margin-bottom: 1.1rem; }
.memorial__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6); }
.memorial__name { margin: 0; font: 600 clamp(1.35rem, 1.2rem + .5vw, 1.6rem)/1.2 var(--serif); letter-spacing: -.01em; }
.memorial__role { margin: .35rem 0 0; min-height: 2.9em; color: var(--ink-3); font-size: .95rem; line-height: 1.45; text-wrap: balance; }
.memorial__dates { margin: .45rem 0 0; font-weight: 600; color: var(--ink-2); }
.memorial__text { font-size: .98rem; }
.js .memorial__text { max-height: 15.5em; overflow: hidden; }
.js .memorial__text.is-clamped { -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.js .memorial.is-open .memorial__text { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.memorial__more { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-top: .8rem; padding: .35rem .1rem; border: 0; background: none; color: var(--orange-ink); font: 700 .95rem/1.2 var(--sans); cursor: pointer; }
.memorial__more[hidden] { display: none; }
.memorial__more::after { content: "▾"; font-size: .9em; transition: transform .2s; }
.memorial.is-open .memorial__more::after { transform: rotate(180deg); }
.memorial__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.memorial__more:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }
@media (max-width: 640px) { .memorial__role { min-height: 0; } }
@media print { .js .memorial__text { max-height: none; -webkit-mask-image: none; mask-image: none; } .memorial__more { display: none; } .memorials { grid-template-columns: 1fr; } }

/* ---------- Teamseiten: Bilder im Text als ruhige Reihen gleich großer Bilder ----------
   Html::teamGallery() sammelt die Bilder aus den Absätzen in einem <div class="team-pics"> am Ende des Textes.
   Jedes Bild steht in einem 4:3-Rahmen (wie 640×480), vollständig sichtbar (contain); kleinere oder anders geformte Bilder
   sitzen mit weißem Rand darin. Drei je Reihe, auf dem Handy zwei, auf sehr schmalen Bildschirmen auch zwei (kleinerer Abstand). */
.prose .team-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.prose .team-pics__item { display: block; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .35rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); overflow: hidden; line-height: 0; transition: box-shadow .15s ease, border-color .15s ease; }
.prose .team-pics__item:hover { border-color: var(--line-strong); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.prose .team-pics__item:focus-visible { outline: none; box-shadow: var(--focus); }
.prose .team-pics__item img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; background: #fff; border-radius: 0; float: none; cursor: zoom-in; }
@media (max-width: 640px) { .prose .team-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 1.2rem 0; } .prose .team-pics__item { padding: .25rem; } }
/* in den schmalen Gedenkkarten nur zwei Bilder je Reihe, sonst werden sie winzig */
.memorial__text.prose .team-pics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }

/* Online-Spendenformular
   /spenden/online (templates/site/donation_form.php, js/donation.js) und Danke-Seite. Drei Schritte als fieldset, rechts die mitlaufende
   Zusammenfassung (am Handy vor dem Absenden-Knopf). Ohne JavaScript sind alle Felder sichtbar; mit JavaScript klappt eine Auswahlkarte
   erst beim Anhaken auf (per :has() – Browser ohne :has() zeigen einfach alles). */
.don-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.4rem clamp(1.5rem, 1rem + 2vw, 2.8rem); align-items: start; margin-bottom: 2.4rem; }
.don-form > * { grid-column: 1; min-width: 0; }
.don-form > .don-side { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 1rem); }
.don-required-note { margin: 0; font-size: .92rem; color: var(--ink-3); }
.don-req { color: var(--danger); font-weight: 700; }
.don-step { margin: 0; padding: clamp(1.1rem, .8rem + 1.2vw, 1.8rem); min-width: 0; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.don-step > legend { float: left; width: 100%; display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; padding: 0; font: 600 clamp(1.3rem, 1.15rem + .6vw, 1.65rem)/1.2 var(--serif); color: var(--ink); }
.don-step > legend + * { clear: both; }
.don-step__no { display: inline-grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--dark); color: #fff; font: 700 1.05rem/1 var(--sans); }
.don-step__intro { margin: 0 0 .9rem; color: var(--ink-2); }
.don-group-title { margin: 1.5rem 0 .65rem; font: 700 .8rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.don-step__intro + .don-group-title, .don-art-error + .don-group-title { margin-top: .4rem; }
.don-terms { margin: 0 0 .8rem; padding: .7rem .95rem; background: var(--paper); border-left: 4px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .93rem; color: var(--ink-2); }
.don-art-error { margin: 0 0 .6rem; }

/* Auswahlkarten */
.don-opts { display: grid; gap: .7rem; }
.don-opt { background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.don-opt:hover { border-color: var(--ink-3); }
.don-opt.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); background: #fffaf2; }
.don-opt:has(.don-opt__check:checked) { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); background: #fffaf2; }
.don-opt:has(.don-opt__check:focus-visible) { box-shadow: 0 0 0 1px var(--orange), var(--focus); }
.don-opt__head { display: flex; align-items: flex-start; gap: .75rem; padding-left: 1rem; }
.don-opt__check { flex: none; width: 1.35rem; height: 1.35rem; margin: 1rem 0 0; accent-color: var(--dark); cursor: pointer; }
.don-opt__label { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem; padding: .85rem 1rem .1rem 0; cursor: pointer; }
.don-opt__title { font: 600 1.15rem/1.3 var(--serif); color: var(--ink); }
.don-opt__price { font: 700 .9rem/1.3 var(--sans); color: var(--orange-ink); white-space: nowrap; }
.don-opt__desc { margin: .25rem 0 0; padding: 0 1rem .85rem 3.1rem; font-size: .93rem; line-height: 1.5; color: var(--ink-3); }
.don-opt__body { display: grid; gap: 1rem; margin: 0 1rem 1.1rem 3.1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.js .don-opt:not(:has(.don-opt__check:checked)) .don-opt__body { display: none; }
.don-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: start; }
div.don-row:not(.don-opt__body) { display: grid; gap: 1rem; }

/* Betrag mit €-Zeichen, Rhythmus als Auswahlknöpfe, Kastrationen als Kacheln */
.don-amount { position: relative; max-width: 12rem; }
.don-amount input { padding-right: 2.2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.don-amount__cur { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-weight: 700; pointer-events: none; }
.don-rhythm, .don-for, .don-castr { min-width: 0; margin: 0; padding: 0; border: 0; }
.don-rhythm legend, .don-for legend, .don-castr legend { margin-bottom: .45rem; padding: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.don-for { display: grid; gap: .45rem; }
.don-for .field { margin: .15rem 0 0 1.85rem; max-width: 26rem; }
.don-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.don-chip { position: relative; display: inline-flex; }
.don-chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.don-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .95rem; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; font-size: .93rem; cursor: pointer; }
.don-chip span:hover { border-color: var(--ink); }
.don-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.don-chip input:focus-visible + span { box-shadow: var(--focus); }
.don-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; }
.don-tile { position: relative; display: block; }
.don-tile input { position: absolute; left: .8rem; top: .85rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--dark); }
.don-tile > span { display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .6rem .8rem .65rem 2.45rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; }
.don-tile > span:hover { border-color: var(--ink); }
.don-tile input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.don-tile input:focus-visible + span { box-shadow: var(--focus); }
.don-tile__name { font-weight: 700; }
.don-tile__price { color: var(--orange-ink); font-weight: 700; font-size: .92rem; }
.don-castr.has-error .don-tile > span { border-color: var(--danger); }

/* Angaben und Bankverbindung */
.don-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
#so-step-3 .don-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.don-grid .don-wide, .don-plzort { grid-column: 1 / -1; }
.don-plzort { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem 1.2rem; }
.don-iban, .don-bic { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.don-iban::placeholder, .don-bic::placeholder { text-transform: none; }
.don-ok { display: block; color: var(--ok); font-size: .88rem; font-weight: 600; }
.don-ok:empty { display: none; }
.don-ok::before { content: "✓ "; }
.don-mandate { margin: 1.4rem 0 1.1rem; padding: 1rem 1.2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .93rem; color: var(--ink-2); }
.don-mandate h3 { margin: 0 0 .5rem; font: 700 1rem/1.35 var(--sans); color: var(--ink); }
.don-mandate p { margin: 0 0 .55rem; }
.don-mandate p:last-child { margin-bottom: 0; }
.don-mandate__note { font-style: italic; }
.don-checks { display: grid; gap: .8rem; }
.don-checks .check { font-size: 1rem; font-weight: 400; }

/* Zusammenfassung, Papier-Alternative, Absenden */
.don-summary, .don-paper { padding: 1.15rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.don-summary { border-top: 4px solid var(--orange); box-shadow: var(--shadow-sm); }
.don-paper { margin-top: 1rem; font-size: .95rem; }
.don-paper--end { display: none; margin: 0 0 1.6rem; }
.don-nowrap { white-space: nowrap; }
.don-paper p { margin: 0 0 .5rem; }
.don-paper p:last-child { margin-bottom: 0; }
.don-side h2 { margin: 0 0 .7rem; font-size: 1.2rem; }
.don-summary__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.don-summary__list li { display: grid; gap: .1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.don-summary__list span { font-variant-numeric: tabular-nums; }
.don-summary__list span.is-missing { color: var(--danger); }
.don-summary__list small { color: var(--ink-3); font-size: .88rem; overflow-wrap: anywhere; }
.don-summary__empty { margin: 0; color: var(--ink-3); font-size: .95rem; }
.don-summary__note { margin: .8rem 0 0; color: var(--ink-3); font-size: .88rem; }
.don-send { display: grid; gap: 1rem; justify-items: start; }
.don-send .captcha { justify-self: stretch; }
.don-send__btn { min-width: min(100%, 18rem); padding: .8rem 1.6rem; font-size: 1.08rem; }
.don-send__btn.is-busy { opacity: .75; cursor: progress; }
.don-send__note { margin: 0; max-width: 62ch; color: var(--ink-3); font-size: .9rem; }

/* Meldungen */
.don-alert, .don-errors { margin: 0 0 1.4rem; }
.don-errors h2 { margin: 0 0 .5rem; font: 700 1.1rem/1.3 var(--sans); color: inherit; }
.don-errors ul { margin: 0; padding-left: 1.2rem; }
.don-errors li + li { margin-top: .2rem; }
.don-errors a { color: inherit; font-weight: 600; }
.don-errors:focus, .don-alert:focus { outline: 3px solid var(--danger); outline-offset: 2px; }

/* Hinweise zu Spendenbescheinigung und Gemeinnützigkeit (Einstellung donation_tax_note) */
.don-taxnote { max-width: 52rem; margin: 0 0 4rem; padding: 1.1rem 1.35rem; background: var(--paper-2); border-left: 4px solid var(--line-strong); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); font-size: .9rem; }
.don-taxnote h2 { margin: 0 0 .6rem; font: 700 1rem/1.3 var(--sans); color: var(--ink); }
.don-taxnote p { margin: 0 0 .6rem; }
.don-taxnote p:last-child { margin-bottom: 0; }

/* Danke-Seite */
.don-thanks { padding-bottom: 4rem; }
.don-thanks > * { max-width: 52rem; }
.don-thanks__h { margin: 2rem 0 .8rem; font-size: 1.35rem; }
.don-thanks__list { display: grid; gap: .5rem; margin: 0 0 1.8rem; padding-left: 1.2rem; }

/* Links auf das Online-Formular in Seitentexten („Oder bequem online ausfüllen“) erscheinen als Knopf – unabhängig vom Editor */
.prose a[href^="/spenden/online"] { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin: .25rem 0; padding: .55rem 1.15rem; border-radius: var(--radius-sm); background: var(--orange); color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-sm); overflow-wrap: normal; }
.prose a[href^="/spenden/online"]::after { content: "→"; }
.prose a[href^="/spenden/online"]:hover { background: var(--orange-hover); color: var(--ink); }
.prose a[href^="/spenden/online"]:focus-visible { outline: none; box-shadow: var(--focus); }

@media (max-width: 960px) {
  .don-form { grid-template-columns: minmax(0, 1fr); }
  .don-form > .don-side { grid-column: 1; grid-row: auto; position: static; }
  .don-paper--side { display: none; }
  .don-paper--end { display: block; }
}
@media (max-width: 640px) {
  .don-grid, #so-step-3 .don-grid { grid-template-columns: minmax(0, 1fr); }
  .don-row, div.don-row:not(.don-opt__body) { grid-template-columns: minmax(0, 1fr); }
  .don-opt__desc { padding-left: 1rem; }
  .don-opt__body { margin-left: 1rem; }
  .don-for .field { margin-left: 0; }
  .don-send__btn { width: 100%; }
}
@media print { .don-side, .don-send { display: none; } .js .don-opt:not(:has(.don-opt__check:checked)) { display: none; } }

/* ---------- Soziale Netzwerke und Partner ----------
   Karten für Facebook und Instagram (Startseite), das Partnerfeld „Einkaufen und helfen“ (zooplus, als Anzeige gekennzeichnet), die schmale
   Leiste am rechten Rand (große Bildschirme) und die Symbole in der Fußzeile. Alles sind einfache Links – kein Skript, keine Fremdverbindung.
   Die Markenfarben der Netzwerke bleiben bewusst, wie man sie kennt; Schrift darauf ist weiß (Kontrast mindestens 4,5 : 1). */
:root {
  --fb: #0866ff; --fb-deep: #063fa6;
  --ig-a: #5b51d8; --ig-b: #833ab4; --ig-c: #c13584; --ig-d: #d02a78; --ig-glow: #f77737;
}
.net-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* Karten: zurückhaltend wie das Partnerfeld (Wunsch Frau Faulstroh 30.10.2026: „sehr dominant“, die Leiste am Rand weist ja auch darauf hin) –
   weiße Karte, Markenfarbe nur im runden Symbol und als Kante links; die ganze Karte ist klickbar */
.netcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.8rem, .6rem + 1vw, 1.2rem); }
.netcards--single { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.netcards > * { min-width: 0; }
.netcard {
  --brand: var(--fb); --brand-ink: var(--fb-deep);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; gap: .15rem 1rem;
  padding: 1rem 1.2rem; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius);
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s;
}
.netcard--instagram { --brand: var(--ig-c); --brand-ink: var(--ig-b); }
.netcard > :not(.netcard__icon) { grid-column: 2; }
.netcard__icon { grid-row: 1 / span 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--brand); color: #fff; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.netcard--instagram .netcard__icon { background: linear-gradient(45deg, var(--ig-glow) 0%, var(--ig-d) 40%, var(--ig-b) 75%, var(--ig-a) 100%); }
.netcard__icon .net-icon { width: 1.35rem; height: 1.35rem; }
.netcard__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .6rem; }
.netcard .netcard__head h3 { margin: 0; color: var(--ink); font-size: 1.2rem; }
.netcard .netcard__link { color: inherit; text-decoration: none; }
.netcard .netcard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* ganze Karte klickbar */
.netcard .netcard__link:focus-visible { box-shadow: none; }
.netcard:has(.netcard__link:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }
.netcard__handle { margin: 0; font: 600 .85rem/1.3 var(--sans); color: var(--ink-3); overflow-wrap: anywhere; }
.netcard .netcard__text { margin: .2rem 0 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.netcard__cta { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; color: var(--brand-ink); font: 700 .92rem/1.2 var(--sans); transition: gap .2s; }
.netcard__cta .net-icon { width: .95rem; height: .95rem; stroke-width: 2.4; }
@media (hover: hover) {
  .netcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .netcard:hover .netcard__icon { transform: rotate(-9deg) scale(1.08); }
  .netcard:hover .netcard__cta { gap: .65rem; text-decoration: underline; text-underline-offset: 3px; }
}

/* Partnerfeld „Einkaufen und helfen“ (zooplus): weiße Karte mit oranger Kante, das Werbebild in Originalgröße, dahinter eine Pfotenspur */
.shopband {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 2rem;
  margin-top: clamp(1rem, .8rem + 1.6vw, 1.8rem); padding: clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(1.2rem, .9rem + 1.6vw, 2.2rem) clamp(1.1rem, .9rem + 1vw, 1.6rem) clamp(1.1rem, .9rem + 1vw, 1.6rem);
  border: 1px solid var(--line); border-left: 6px solid var(--orange); border-radius: calc(var(--radius) + 2px); background: var(--white); color: var(--ink);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.shopband::after {   /* Pfotenspur hinter dem Knopf; läuft nach links aus, damit sie nie hinter dem Text liegt */
  content: ""; position: absolute; z-index: -1; right: .6rem; top: 50%; width: 17rem; height: 8rem; margin-top: -4rem; background: url("../img/pfoten.svg") right center / contain no-repeat; opacity: .08; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%); mask-image: linear-gradient(to right, transparent, #000 55%);
}
.shopband__tag { position: absolute; top: .65rem; right: 1rem; font: 700 .68rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.shopband__media { display: block; flex: none; line-height: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.shopband__media img { width: 160px; height: 160px; }
.shopband__body { min-width: 0; }
.shopband .eyebrow { margin-bottom: .45rem; color: var(--orange-ink); }   /* auch im dunklen Bereich: das Feld ist eine weiße Karte */
.shopband h3 { margin: 0 0 .45rem; color: var(--ink); font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); }
.shopband p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.shopband .shopband__note { margin-top: .6rem; font-size: .88rem; line-height: 1.5; color: var(--ink-3); }
.shopband .btn--accent { color: var(--ink); }
.shopband__cta .net-icon { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) { .shopband:hover .shopband__media { transform: rotate(-2deg) scale(1.03); box-shadow: 0 0 0 1px var(--line), var(--shadow-md); } }
@media (max-width: 960px) {
  .shopband { grid-template-columns: auto minmax(0, 1fr); }
  .shopband__cta { grid-column: 1 / -1; justify-self: start; }
  .shopband::after { top: auto; bottom: .8rem; margin-top: 0; width: 12rem; height: 5.6rem; }
}
@media (max-width: 760px) {
  .netcards { grid-template-columns: minmax(0, 1fr); }
  .shopband { grid-template-columns: minmax(0, 1fr); border-left-width: 1px; border-top: 6px solid var(--orange); padding-top: 1.7rem; }
  .shopband__media { justify-self: start; }
  .shopband__media img { width: 120px; height: 120px; }
  .shopband__cta { justify-self: stretch; }
  .shopband::after { width: 10rem; height: 4.6rem; }
}

/* Schmale Leiste am rechten Rand (nur große Bildschirme; schmal genug für den Rand neben dem Inhalt): zwei Knöpfe, beim Darüberfahren
   oder Antippen mit der Tastatur schiebt sich der Name heraus. Abschaltbar unter Gestaltung → Soziale Netzwerke. */
.social-rail { display: none; }
@media (min-width: 1100px) {
  .social-rail { position: fixed; z-index: 55; right: 0; top: 50%; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; transform: translateY(-50%); animation: rail-in .7s cubic-bezier(.2, .8, .2, 1) 1s both; }
  .social-rail__link { display: flex; align-items: center; justify-content: flex-end; width: 42px; height: 44px; overflow: hidden; border-radius: 12px 0 0 12px; color: #fff; text-decoration: none; white-space: nowrap; box-shadow: -2px 3px 12px -5px rgba(0, 0, 0, .55); transition: width .3s cubic-bezier(.2, .8, .2, 1), filter .2s; }
  .social-rail__link:hover, .social-rail__link:focus-visible { width: 148px; filter: brightness(1.07); color: #fff; }
  .social-rail__link:focus-visible { border-radius: 12px 0 0 12px; box-shadow: var(--focus), -2px 3px 12px -5px rgba(0, 0, 0, .55); }
  .social-rail__label { flex: none; padding-left: 1rem; font: 700 .95rem/1 var(--sans); letter-spacing: .01em; }
  .social-rail__icon { display: grid; place-items: center; flex: none; width: 42px; height: 44px; }
  .social-rail__icon .net-icon { width: 1.35rem; height: 1.35rem; }
  .social-rail__link--facebook { background: var(--fb); }
  .social-rail__link--instagram { background: linear-gradient(135deg, var(--ig-a), var(--ig-b) 30%, var(--ig-c) 70%, var(--ig-d)); }
}
@keyframes rail-in { from { transform: translate(100%, -50%); } to { transform: translate(0, -50%); } }

/* Fußzeile: Netzwerke als Knöpfe mit Markensymbol, darunter das Partnerfeld klein */
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.site-footer .footer-social__link { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1.05rem .35rem .4rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; color: #fff; font-weight: 600; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.site-footer .footer-social__link:hover { border-color: var(--orange); background: rgba(255, 255, 255, .08); color: #fff; transform: translateY(-2px); }
.footer-social__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: #fff; }
.footer-social__icon .net-icon { width: 1.15rem; height: 1.15rem; }
.footer-social__link--facebook .footer-social__icon { background: var(--fb); }
.footer-social__link--instagram .footer-social__icon { background: linear-gradient(135deg, var(--ig-a), var(--ig-b) 30%, var(--ig-c) 70%, var(--ig-d)); }
.footer__title--sub { margin-top: 1.7rem; }
.footer-shop { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.footer-shop__media { display: block; line-height: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.footer-shop__media img { width: 4.6rem; height: 4.6rem; }
.footer-shop p { margin: 0; font-size: .93rem; line-height: 1.5; }
.footer-shop__tag { display: block; margin-bottom: .25rem; font: 700 .66rem/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--orange); }
@media print { .social-rail, .netcards, .shopband { display: none !important; } }