/* =========================================================
   Tierfreund Deuschls Hof — Gestaltung
   Aufbau: 1 Grundlagen · 2 Bausteine · 3 Seitenteile · 4 Klein
           5 Schmale Fenster (Tablet und Handy)
   Farben und Abstände stehen ganz oben und lassen sich dort
   zentral ändern.
   ========================================================= */

/* ---------- 1 Grundlagen ---------- */

:root {
  /* Diese Seite ist bewusst hell gestaltet. Die Angabe verhindert, dass
     Browser mit automatischem Dunkelmodus die Farben eigenmächtig umkehren. */
  color-scheme: only light;

  /* Farben */
  --creme:        #fbf7f0;
  --creme-tief:   #f5ecdf;
  --sand:         #ecdfc8;
  --wald:         #22402f;
  --wald-hell:    #37634a;
  --moos:         #6f8f6a;
  /* Dunklere Fassung von --moos für kleine Beschriftungen.
     Gleicher Farbton, aber kontraststark genug (WCAG AA, 4.5:1). */
  --moos-tief:    #4f6b4a;
  --terrakotta:   #c25a2e;
  --terrakotta-d: #a4471f;
  /* Noch dunkler – für Mauszeiger-Zustände, damit auch beim Überfahren
     4.5:1 erhalten bleibt. */
  --terrakotta-t: #8d3c19;
  --honig:        #e0a33f;
  --rose:         #e5c6b0;
  --himmel:       #cfdcd4;
  --tinte:        #1c1b17;
  --grau:         #6c6659;
  /* War #9b9486 – auf Creme nur 2.8:1. Jetzt 5.1:1 und weiterhin
     leiser als der Fließtext. */
  --grau-hell:    #6f6959;
  /* Für die zwei Stellen, an denen graue Schrift auf einer bereits
     abgetönten Fläche steht (Kopfzeilen-Untertitel über dunklen Fotos,
     Erinnerungs-Schildchen). */
  --grau-tief:    #5a5547;
  --linie:        rgba(28, 27, 23, 0.12);
  --weiss:        #fffdf9;

  /* Flächen */
  --grund:        var(--creme);
  --karte:        var(--weiss);
  --text:         var(--tinte);
  --text-leise:   var(--grau);

  /* Schrift */
  --schrift-titel: "Fraunces", "Iowan Old Style", Georgia, serif;
  --schrift-text:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Maße */
  --breite:       1240px;
  --lesebreite:   68ch;
  --radius:       20px;
  --radius-klein: 12px;
  --kopf-hoehe:   76px;

  /* Schatten */
  --schatten-s: 0 1px 2px rgba(28,27,23,.05), 0 4px 12px rgba(28,27,23,.05);
  --schatten-m: 0 2px 6px rgba(28,27,23,.06), 0 16px 40px rgba(28,27,23,.09);
  --schatten-l: 0 4px 12px rgba(28,27,23,.08), 0 28px 70px rgba(28,27,23,.14);

  --uebergang: 260ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 24px); }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Warmer, lebendiger Untergrund statt einer flachen Fläche:
     drei weiche Farbwolken über dem Cremeton. */
  background-color: var(--grund);
  background-image:
    radial-gradient(60rem 40rem at 12% 4%,  rgba(224, 163, 63, .11), transparent 62%),
    radial-gradient(52rem 38rem at 92% 28%, rgba(111, 143, 106, .13), transparent 60%),
    radial-gradient(46rem 34rem at 26% 76%, rgba(229, 198, 176, .18), transparent 64%);
  background-attachment: fixed;
}

/* Feines Papierkorn - macht die Flächen lebendig statt „glatt“. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--wald);
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 20, "WONK" 0;
}

h1 { font-size: clamp(2.6rem, 4.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 2.7vw, 2.7rem); }
h3 { font-size: 1.32rem; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-family: var(--schrift-text); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--terrakotta-d); text-decoration-color: rgba(194,90,46,.35); text-underline-offset: 3px; transition: color var(--uebergang); }
/* Beim Überfahren dunkler statt heller – sonst fällt der Kontrast auf 4.1:1. */
a:hover { color: var(--terrakotta-t); }

img { max-width: 100%; height: auto; display: block; }

ul { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .94em;
  letter-spacing: .01em;
}

::selection { background: var(--sand); color: var(--wald); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wald); color: var(--creme);
  padding: 12px 20px; border-radius: 0 0 var(--radius-klein) 0;
}
.skip:focus { left: 0; }

/* Fokusring aus zwei Farben: der helle Innenring bleibt auf den dunklen
   Flächen (Fuß, Konto, Band, Bildköpfe) sichtbar, der terrakottafarbene
   Außenring auf den hellen. So ist der Ring auf jedem Untergrund
   deutlich zu sehen (WCAG 1.4.11, 3:1). */
:focus-visible {
  outline: 3px solid var(--terrakotta-d);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--weiss);
  border-radius: 4px;
}

/* ---------- 2 Bausteine ---------- */

.breit { width: min(var(--breite), calc(100% - 80px)); margin-inline: auto; }

.lesebreite { max-width: var(--lesebreite); }
.lesebreite--eng { max-width: 62ch; }
.mittig { text-align: center; }

.abschnitt { padding: clamp(64px, 8vw, 116px) 0; position: relative; }

/* Getönte Bänder: warmer Sandton mit weichem Lichtverlauf,
   damit die Seite nicht durchgehend gleich aussieht. */
.abschnitt--getoent {
  background-color: var(--creme-tief);
  background-image:
    radial-gradient(50rem 26rem at 78% 0%, rgba(255, 253, 249, .85), transparent 62%),
    radial-gradient(40rem 24rem at 8% 100%, rgba(224, 163, 63, .10), transparent 60%);
}
/* Sanft gerundete Übergänge - wirkt weicher als harte Kanten. */
.abschnitt--getoent { border-radius: 44px 44px 0 0; }
.abschnitt--getoent:last-of-type { border-radius: 44px 44px 0 0; }

.abschnitt__kopf { max-width: 62ch; margin: 0 0 clamp(36px, 4vw, 60px); }
.abschnitt__kopf .fuehrung { margin-top: .6em; }

.augenbraue {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--moos-tief);
  margin: 0 0 .9em;
}
.augenbraue--hell { color: var(--weiss); }
.augenbraue--hell a { color: inherit; }

.fuehrung {
  font-size: clamp(1.06rem, 1.4vw, 1.28rem);
  line-height: 1.55; color: var(--text-leise);
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--terrakotta-d); color: var(--weiss);
  font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  padding: 15px 28px; border-radius: 999px;
  text-decoration: none; border: 1.5px solid var(--terrakotta-d);
  box-shadow: var(--schatten-s);
  transition: transform var(--uebergang), background var(--uebergang), box-shadow var(--uebergang);
}
.knopf:hover {
  background: var(--terrakotta-t); border-color: var(--terrakotta-t); color: var(--weiss);
  transform: translateY(-2px); box-shadow: var(--schatten-m);
}
.knopf:active { transform: translateY(0); }
/* Der Knopf bringt einen eigenen Schlagschatten mit und würde den hellen
   Innenring des Fokusrings überschreiben. Hier wird er wieder ergänzt –
   sonst wäre der Ring auf den dunklen Bildflächen kaum zu sehen. */
.knopf:focus-visible { box-shadow: 0 0 0 3px var(--weiss), var(--schatten-m); }
.knopf--geist {
  background: transparent; color: var(--weiss);
  border-color: rgba(255,253,249,.5); box-shadow: none;
}
.knopf--geist:hover { background: rgba(255,253,249,.13); border-color: var(--weiss); color: var(--weiss); }
.knopf--klein { padding: 11px 21px; font-size: .92rem; }

.textlink {
  font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid rgba(194,90,46,.3); padding-bottom: 2px;
  transition: border-color var(--uebergang);
}
.textlink:hover { border-color: var(--terrakotta); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: var(--weiss); border: 1px solid var(--linie);
  color: var(--wald); font-size: .92rem; font-weight: 500; text-decoration: none;
  transition: all var(--uebergang);
}
.chip:hover { background: var(--wald); color: var(--creme); border-color: var(--wald); transform: translateY(-1px); }

.marken { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.3em; }
.marke-chip {
  font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  background: var(--sand); color: var(--wald);
  padding: 5px 13px; border-radius: 999px;
}
/* Auf der eigenen grauen Fläche kam --grau nur auf 4.0:1. */
.marke-chip--erinnerung { background: rgba(108,102,89,.16); color: var(--grau-tief); }

.fahne {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
  background: rgba(28,27,23,.72); color: var(--creme);
  backdrop-filter: blur(6px);
}

/* Für Bewohner, von denen kein Foto mehr existiert:
   eine freundliche Zeichnung auf warmem Farbverlauf.
   Jede Tierart bekommt ihren eigenen Ton. */
.platzhalter {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 14%;
  background: linear-gradient(150deg, var(--sand), var(--creme-tief) 70%);
  color: rgba(34, 64, 47, .42);
  position: relative; overflow: hidden;
}
.platzhalter::before {
  content: ""; position: absolute;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 253, 249, .5);
  filter: blur(6px);
}
.platzhalter svg {
  position: relative; width: 100%; height: auto; max-height: 100%;
  transition: transform 520ms cubic-bezier(.2,.7,.3,1);
}
.tier-karte:hover .platzhalter svg,
.art-kachel:hover .platzhalter svg { transform: scale(1.06) rotate(-1.5deg); }

.platzhalter--schafe-ziegen { background: linear-gradient(150deg, #e9e2d2, #f5ecdf 72%); }
.platzhalter--schweine     { background: linear-gradient(150deg, #f0d9cd, #f7ece4 72%); }
.platzhalter--pferde       { background: linear-gradient(150deg, #e3dbcb, #f4ece0 72%); }
.platzhalter--katzen       { background: linear-gradient(150deg, #e6dcc4, #f6efe0 72%); }
.platzhalter--hunde        { background: linear-gradient(150deg, #dfe3d6, #f1f0e5 72%); }
.platzhalter--hasen        { background: linear-gradient(150deg, #ece0cd, #f8f0e4 72%); }
.platzhalter--huehner      { background: linear-gradient(150deg, #f2e3c6, #faf1de 72%); }
.platzhalter--tauben       { background: linear-gradient(150deg, #dde3e2, #f0f2ef 72%); }

.platzhalter span {
  position: relative;
  font-family: var(--schrift-titel); font-size: 3.4rem; font-weight: 600;
  color: rgba(34,64,47,.32);
}

/* Blöcke / Hinweise */
.block {
  border-radius: var(--radius); padding: 28px 32px;
  margin: 2em 0; border: 1px solid var(--linie);
  background: var(--weiss);
}
.block h2, .block h3 { font-size: 1.1rem; margin-bottom: .5em; }
.block--hinweis { border-left: 4px solid var(--terrakotta); }
.block--dank {
  background: linear-gradient(140deg, var(--wald), var(--wald-hell));
  border: none; color: var(--sand);
}
/* Bisher war nur h3 aufgehellt. Die Überschrift im Dank-Block ist aber
   eine h4 und stand damit in Waldgrün auf Waldgrün – praktisch unsichtbar
   (rund 1.2:1). Jetzt gilt die helle Farbe für alle Ebenen. */
.block--dank h2,
.block--dank h3,
.block--dank h4,
.block--dank h5 { color: var(--weiss); }

blockquote {
  margin: 2em 0; padding: 0 0 0 28px;
  border-left: 3px solid var(--moos);
}
blockquote p {
  font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1.42;
  color: var(--wald); font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
blockquote cite {
  display: block; margin-top: .7em; font-style: normal;
  font-size: .9rem; font-weight: 500; color: var(--text-leise);
}

.inhalt-bild { margin: 2.2em 0; }
.inhalt-bild img { border-radius: var(--radius); box-shadow: var(--schatten-m); }

/* ---------- 3 Seitenteile ---------- */

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,246,239,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.kopf.gescrollt { border-bottom-color: var(--linie); background: rgba(250,246,239,.94); }

.kopf__innen {
  width: min(var(--breite), calc(100% - 80px)); margin-inline: auto;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 32px;
}

.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--wald); flex-shrink: 0; }
.marke__zeichen { color: var(--wald); display: grid; place-items: center; }
.marke__text { display: flex; flex-direction: column; line-height: 1.2; }
.marke__text strong {
  font-family: var(--schrift-titel); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--wald);
}
/* Die Kopfzeile ist durchscheinend; steht sie über einem dunklen Foto,
   wird ihr Untergrund dunkler und der Untertitel kam nur auf 3.6:1. */
.marke__text small { font-size: .74rem; color: var(--grau-tief); letter-spacing: .02em; }

.haupt-nav { display: flex; gap: 4px; margin-left: auto; }
.haupt-nav a {
  padding: 9px 15px; border-radius: 999px;
  font-size: .95rem; font-weight: 500; color: var(--wald);
  text-decoration: none; white-space: nowrap;
  transition: background var(--uebergang), color var(--uebergang);
}
.haupt-nav a:hover { background: rgba(34,64,47,.08); color: var(--wald); }
.haupt-nav a.aktiv { background: var(--wald); color: var(--creme); }

/* Menü-Schalter (nur in schmalen Fenstern sichtbar) */
.menue-schalter {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--linie);
  border-radius: 12px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menue-schalter span {
  display: block; width: 19px; height: 1.8px;
  background: var(--wald); border-radius: 2px;
  transition: transform var(--uebergang), opacity var(--uebergang);
}
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }

/* Held (Startseiten-Kopfbild) */
.held {
  position: relative; min-height: min(84vh, 760px);
  display: flex; align-items: flex-end;
  padding: 120px 0 84px;
  background-image: var(--heldbild);
  background-size: cover; background-position: center 42%;
  margin-top: calc(var(--kopf-hoehe) * -1);
}
/* Der Schleier ist im Textbereich (untere zwei Drittel) kräftiger als
   früher. Vorher lag der Kontrast der Überschrift stellenweise bei 2.5:1;
   über dem Bildkopf bleibt es oben weiterhin hell, damit das Foto wirkt. */
.held__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(18,30,22,.90) 0%, rgba(18,30,22,.78) 30%, rgba(18,30,22,.66) 66%, rgba(18,30,22,.26) 84%, rgba(18,30,22,.40) 100%),
    linear-gradient(to right, rgba(18,30,22,.42) 0%, rgba(18,30,22,0) 62%);
}
.held__innen { position: relative; z-index: 2; color: var(--weiss); }
.held__ueber {
  font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--weiss); margin-bottom: 1.1em;
}
.held__titel {
  color: var(--weiss); max-width: 17ch;
  font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1.03;
  margin-bottom: .38em;
}
.held__titel span { display: block; }
.held__betont {
  color: var(--sand);
  font-style: italic; font-variation-settings: "SOFT" 60, "WONK" 1;
}
.held__text {
  max-width: 54ch; font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  color: var(--weiss); margin-bottom: 2.1em;
}
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.held__pfeil {
  position: absolute; bottom: 30px; left: 50%; z-index: 2;
  width: 22px; height: 34px; margin-left: -11px;
  border: 1.5px solid rgba(255,253,249,.45); border-radius: 999px;
}
.held__pfeil::after {
  content: ""; position: absolute; top: 7px; left: 50%; margin-left: -2px;
  width: 4px; height: 7px; border-radius: 2px; background: rgba(255,253,249,.8);
  animation: scrollen 2s ease-in-out infinite;
}
@keyframes scrollen {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(11px); opacity: .25; }
}

/* Eckdaten */
.eckdaten { background: var(--wald); color: var(--sand); padding: 0; }
.eckdaten__innen {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,253,249,.14);
  border-inline: 1px solid rgba(255,253,249,.14);
}
.eckdatum {
  background: var(--wald); padding: 40px 32px;
  display: flex; flex-direction: column; gap: 6px;
}
.eckdatum__wert {
  font-family: var(--schrift-titel); font-size: 2.7rem; font-weight: 600;
  color: var(--weiss); line-height: 1;
}
.eckdatum__text { font-size: .95rem; color: rgba(232,220,198,.82); }

/* Seitenkopf der Unterseiten */
.seitenkopf {
  position: relative; padding: calc(var(--kopf-hoehe) + 92px) 0 92px;
  margin-top: calc(var(--kopf-hoehe) * -1);
  background-image: var(--kopfbild);
  background-size: cover; background-position: center 45%;
  color: var(--weiss);
}
/* Kräftiger als früher: die kleine Zeile über der Überschrift lag sonst
   bei 2.8:1, weil manche Kopfbilder oben sehr hell sind. */
.seitenkopf__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,30,22,.90), rgba(18,30,22,.72) 60%, rgba(18,30,22,.68));
}
.seitenkopf__text { position: relative; z-index: 2; max-width: 56ch; }
.seitenkopf h1 { color: var(--weiss); }
.seitenkopf .fuehrung { color: var(--weiss); }

.seitenkopf--schlicht {
  background: var(--creme-tief); color: var(--text);
  margin-top: 0; padding: clamp(64px, 7vw, 104px) 0 clamp(48px, 5vw, 72px);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf--schlicht h1 { color: var(--wald); }
.seitenkopf--schlicht .fuehrung { color: var(--text-leise); }

/* Tierarten-Kacheln */
.art-gitter {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.art-gitter--gross { grid-template-columns: repeat(3, 1fr); gap: 26px; }

.art-kachel {
  position: relative; overflow: hidden; border-radius: var(--radius);
  text-decoration: none; background: var(--wald);
  box-shadow: var(--schatten-s);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.art-kachel:hover { transform: translateY(-5px); box-shadow: var(--schatten-l); }
/* wie beim Knopf: eigener Schatten, deshalb Innenring hier nachtragen */
.art-kachel:focus-visible { box-shadow: 0 0 0 3px var(--weiss), var(--schatten-m); }
.art-kachel__bild { aspect-ratio: 4 / 3; overflow: hidden; }
.art-kachel__bild img, .art-kachel__bild .platzhalter {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 640ms cubic-bezier(.2,.7,.3,1);
}
.art-kachel:hover .art-kachel__bild img { transform: scale(1.055); }
/* Der Verlauf lief früher schon auf halber Höhe ins Durchsichtige aus.
   Bei hellen Fotos (Tauben, Hühner, Katzen) stand die Überschrift dann
   auf hellem Grund – teils nur 1.9:1. Jetzt trägt der Verlauf höher und
   der Kasten hat oben mehr Luft, damit er weich ausläuft. */
.art-kachel__text {
  position: absolute; inset: auto 0 0 0; padding: 56px 24px 24px;
  background: linear-gradient(to top,
    rgba(18,30,22,.95) 0%, rgba(18,30,22,.92) 50%, rgba(18,30,22,.86) 74%,
    rgba(18,30,22,.45) 92%, transparent 100%);
  color: var(--weiss);
}
.art-kachel__text h3 { color: var(--weiss); margin-bottom: .18em; }
.art-kachel__text p {
  font-size: .92rem; color: rgba(255,253,249,.82); margin-bottom: .5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.art-kachel__text span { font-size: .86rem; font-weight: 600; color: var(--sand); letter-spacing: .01em; }
.art-gitter--gross .art-kachel__bild { aspect-ratio: 3 / 2.2; }

/* Tierkarten */
.tier-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tier-karte {
  background: var(--karte); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--linie); box-shadow: var(--schatten-s);
  transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang);
}
.tier-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); border-color: transparent; }
.tier-karte__link { text-decoration: none; color: inherit; display: block; height: 100%; }
/* Die Karte schneidet ihren Inhalt ab (overflow: hidden), deshalb wäre der
   Fokusring des Verweises unsichtbar. Er wird auf die Karte selbst gelegt. */
.tier-karte__link:focus-visible { outline: none; box-shadow: none; }
/* Rückfallebene für Browser ohne :has() */
.tier-karte:focus-within {
  outline: 3px solid var(--terrakotta-d);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--weiss), var(--schatten-m);
}
.tier-karte:has(.tier-karte__link:focus-visible) {
  outline: 3px solid var(--terrakotta-d);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--weiss), var(--schatten-m);
}
.tier-karte__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--creme-tief); }
.tier-karte__bild img, .tier-karte__bild .platzhalter {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 640ms cubic-bezier(.2,.7,.3,1);
}
.tier-karte:hover .tier-karte__bild img { transform: scale(1.06); }
.tier-karte__text { padding: 20px 22px 24px; }
.tier-karte__text h3 { margin-bottom: .22em; font-size: 1.22rem; }
.tier-karte__text p { font-size: .93rem; color: var(--text-leise); margin-bottom: .9em; }
.tier-karte__mehr {
  font-size: .86rem; font-weight: 600; color: var(--terrakotta-d);
}
.tier-karte--erinnerung .tier-karte__bild img { filter: saturate(.55); }

/* Tierprofil */
.tier-profil {
  display: grid; grid-template-columns: 400px 1fr; gap: 56px;
  align-items: start;
  padding: clamp(40px, 4.5vw, 68px) 0;
  border-top: 1px solid var(--linie);
  scroll-margin-top: calc(var(--kopf-hoehe) + 20px);
}
.tier-profil:first-child { border-top: none; padding-top: 0; }
.tier-profil:nth-child(even) { direction: rtl; }
.tier-profil:nth-child(even) > * { direction: ltr; }

.tier-profil__bild {
  position: sticky; top: calc(var(--kopf-hoehe) + 28px);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten-m); aspect-ratio: 4 / 3;
  background: var(--creme-tief);
}
.tier-profil__bild img, .tier-profil__bild .platzhalter { width: 100%; height: 100%; object-fit: cover; }
.tier-profil__inhalt h2 { font-size: clamp(1.7rem, 2.2vw, 2.2rem); margin-bottom: .35em; }
.tier-profil__inhalt p { color: var(--text); }
.tier-profil__aktion { margin-top: 1.8em; }
.tier-profil__hinweis {
  font-size: .93rem; color: var(--text-leise); font-style: italic;
  margin-bottom: 1em; padding-left: 14px; border-left: 2px solid var(--sand);
}
.tier-profil--erinnerung .tier-profil__bild img { filter: saturate(.5); }
.stand {
  margin-top: 1.6em; font-size: .82rem; color: var(--grau-hell);
  border-top: 1px solid var(--linie); padding-top: .9em;
}

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galerie__stueck {
  margin: 0; border-radius: var(--radius-klein); overflow: hidden;
  aspect-ratio: 3 / 2; box-shadow: var(--schatten-s);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.galerie__stueck:hover { transform: translateY(-3px) scale(1.012); box-shadow: var(--schatten-m); }
.galerie__stueck img { width: 100%; height: 100%; object-fit: cover; }

/* Hilfe-Karten */
.hilfe-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hilfe-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.hilfe-karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-m); }
.hilfe-karte h3 { margin-bottom: .5em; }
.hilfe-karte p { font-size: .96rem; color: var(--text-leise); flex: 1; margin-bottom: 1.4em; }

/* Neuigkeiten */
.news-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.news-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: 200px 1fr;
  transition: transform var(--uebergang), box-shadow var(--uebergang);
}
.news-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-m); }
.news-karte__bild { overflow: hidden; }
.news-karte__bild img { width: 100%; height: 100%; object-fit: cover; }
.news-karte__text { padding: 26px 28px; }
.news-karte time, .beitrag time {
  display: block; font-size: .82rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--moos-tief); margin-bottom: .6em;
}
.news-karte h3 { font-size: 1.24rem; margin-bottom: .4em; }
.news-karte p {
  font-size: .94rem; color: var(--text-leise); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}

.beitrag { padding: 48px 0; border-top: 1px solid var(--linie); }
.beitrag:first-child { border-top: none; padding-top: 0; }
.beitrag__bild { border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; box-shadow: var(--schatten-m); }
.beitrag h2 { font-size: 1.9rem; margin-bottom: .5em; }

/* Konto */
.konto {
  background: linear-gradient(145deg, var(--wald), var(--wald-hell));
  color: var(--sand); border-radius: var(--radius);
  padding: 40px 44px; box-shadow: var(--schatten-m);
}
.konto__kopf h3 { color: var(--weiss); font-size: 1.5rem; margin-bottom: .3em; }
/* Deckkraft erhöht: am hellen Ende des Verlaufs (--wald-hell) lagen
   diese Zeilen sonst bei 3.9–4.2:1. */
.konto__kopf p { color: rgba(232,220,198,1); font-size: .95rem; margin-bottom: 1.8em; }
.konto__daten { display: grid; gap: 1px; background: rgba(255,253,249,.14); border-radius: var(--radius-klein); overflow: hidden; margin: 0 0 1.6em; }
.konto__daten > div {
  background: rgba(18,30,22,.34); padding: 16px 20px;
  display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px;
}
.konto__daten dt { font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(232,220,198,.9); }
.konto__daten dd { margin: 0; font-size: 1.06rem; color: var(--weiss); font-weight: 500; }
.konto__daten code {
  background: rgba(255,253,249,.1); padding: 5px 11px; border-radius: 7px;
  cursor: pointer; transition: background var(--uebergang);
  position: relative;
}
.konto__daten code:hover { background: rgba(255,253,249,.2); }
.konto__daten code.kopiert::after {
  content: "kopiert"; position: absolute; left: 100%; margin-left: 10px; top: 50%;
  transform: translateY(-50%); font-family: var(--schrift-text);
  font-size: .76rem; color: var(--sand); white-space: nowrap;
}
.konto__hinweis { font-size: .93rem; color: rgba(232,220,198,1); margin: 0; }
.konto__hinweis strong { color: var(--weiss); }

/* Downloads */
.downloads h3 { font-size: 1.4rem; }
.download-liste { list-style: none; padding: 0; margin: 1.6em 0 0; display: grid; gap: 12px; }
.download-liste a {
  display: flex; flex-direction: column; gap: 3px;
  padding: 20px 24px; border-radius: var(--radius-klein);
  background: var(--karte); border: 1px solid var(--linie);
  text-decoration: none; color: var(--text);
  transition: all var(--uebergang);
}
.download-liste a::after {
  content: "↓"; position: absolute; right: 24px;
  font-size: 1.2rem; color: var(--terrakotta-d);
}
.download-liste li { position: relative; margin: 0; }
.download-liste a:hover { border-color: var(--terrakotta); transform: translateX(3px); }
.download-liste__titel { font-weight: 600; color: var(--wald); }
.download-liste__meta { font-size: .87rem; color: var(--text-leise); }

/* Kontaktkarten */
.kontakt-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kontakt-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 32px 30px;
}
.kontakt-karte h3 {
  font-size: .82rem; font-family: var(--schrift-text); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--moos-tief); margin-bottom: 1em;
}
.kontakt-karte__gross {
  font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1.32;
  color: var(--wald); margin-bottom: .6em;
}
.kontakt-karte__gross a { color: var(--wald); text-decoration: none; }
.kontakt-karte__gross a:hover { color: var(--terrakotta-d); }
.kontakt-karte p:last-child { font-size: .93rem; color: var(--text-leise); margin: 0; }

/* Kartenbild: liegt bei uns selbst (bilder/karte-hof.jpg), keine eingebettete
   Karte eines fremden Anbieters. Deshalb padding:0 + overflow:hidden statt
   der sonstigen Kartenpolsterung - das Bild reicht bis an den runden Rand. */
/* Zwei Klassen zusammen im Selektor, nicht nur .kontakt-karte__karte: Die
   Karte traegt beide Klassen zugleich, und eine spaetere Regel fuer schmale
   Bildschirme setzt .kontakt-karte pauschal ein Innenpolster. Gleiche
   Spezifitaet plus spaetere Position im Text wuerde dort gewinnen und das
   randlose Kartenbild wieder einruecken. */
.kontakt-karte.kontakt-karte__karte { margin-top: 22px; padding: 0; overflow: hidden; }
.kontakt-karte__karte img { display: block; width: 100%; height: auto; }
.kontakt-karte__karte figcaption {
  padding: 14px 20px; font-size: .82rem; color: var(--text-leise);
}
.kontakt-karte__karte figcaption a { color: var(--moos-tief); }
.kontakt-karte__karte figcaption a:hover { color: var(--terrakotta-d); }

.impressum-karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 4px solid var(--wald);
  border-radius: var(--radius); padding: 32px 34px; margin-bottom: 2em;
}
.impressum-karte h3 { font-size: 1.1rem; }

/* Wunschliste */
.wunsch-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; align-items: start; }
.wunsch-gruppe {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 30px 32px;
}
.wunsch-gruppe h2 {
  font-size: 1.3rem; padding-bottom: .6em; margin-bottom: .9em;
  border-bottom: 1px solid var(--linie);
}
.wunsch-liste { list-style: none; padding: 0; margin: 0; }
.wunsch { display: flex; gap: 13px; padding: 11px 0; border-bottom: 1px dashed var(--linie); }
.wunsch:last-child { border-bottom: none; }
.wunsch__haken {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 4px;
  border: 1.5px solid var(--moos); border-radius: 5px;
  position: relative; background: var(--creme);
}
.wunsch__haken::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid var(--moos);
  border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
  opacity: .3;
}
.wunsch__text { display: flex; flex-direction: column; }
.wunsch__text strong { font-weight: 600; color: var(--text); font-size: .99rem; }
.wunsch__text small { font-size: .87rem; color: var(--text-leise); margin-top: 2px; }

/* Band */
.band {
  position: relative; padding: clamp(72px, 8vw, 112px) 0;
  background-image: var(--bandbild); background-size: cover; background-position: center 55%;
  color: var(--weiss); text-align: center;
}
.band__schleier { position: absolute; inset: 0; background: rgba(18,30,22,.8); }
.band__innen { position: relative; z-index: 2; max-width: 60ch; margin-inline: auto; }
.band h2 { color: var(--weiss); }
.band p { color: rgba(255,253,249,.86); font-size: 1.1rem; }
.band__adresse { font-weight: 600; letter-spacing: .02em; margin-bottom: 2em !important; }
.band .held__knoepfe { justify-content: center; }
.band--schlicht { background: var(--wald); }
.band--schlicht .band__schleier { display: none; }

/* Fuß */
.fuss { background: var(--wald); color: rgba(232,220,198,.78); padding: 76px 0 0; margin-top: 0; }
.fuss__innen {
  width: min(var(--breite), calc(100% - 80px)); margin-inline: auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr .8fr; gap: 48px;
  padding-bottom: 56px;
}
.fuss h2 { color: var(--weiss); font-size: 1.3rem; margin-bottom: .5em; }
.fuss h3 {
  color: var(--sand); font-size: .8rem; letter-spacing: .12em;
  text-transform: uppercase; margin: 0 0 .8em;
}
.fuss__spalte h3 ~ h3 { margin-top: 1.8em; }
.fuss p { font-size: .95rem; margin-bottom: 1em; }
/* .55 ergab nur 3.7:1 auf --wald – auf .82 angehoben (5.8:1). */
.fuss small { color: rgba(232,220,198,.82); font-size: .84rem; }
.fuss a { color: var(--sand); text-decoration: none; }
.fuss a:hover { color: var(--weiss); text-decoration: underline; }
/* Telefon und E-Mail stehen im Fuß mitten im Text und unterschieden sich
   bisher nur durch einen winzigen Farbunterschied (1.5:1) vom übrigen
   Text. Eine Unterstreichung macht sie auch ohne Farbe erkennbar
   (WCAG 1.4.1). Die Verweislisten bleiben unverändert. */
.fuss p a { text-decoration: underline; text-underline-offset: 3px; }
.fuss__text { max-width: 34ch; color: rgba(232,220,198,.82); }
.fuss__nav { display: flex; flex-direction: column; gap: 9px; }
.fuss__nav a { font-size: .95rem; }
.fuss__unten {
  border-top: 1px solid rgba(255,253,249,.13);
  width: min(var(--breite), calc(100% - 80px)); margin-inline: auto;
  padding: 24px 0 30px;
  display: flex; justify-content: space-between; align-items: center;
}
.fuss__unten p { margin: 0; font-size: .87rem; color: rgba(232,220,198,.82); }
.fuss__nav--rechtlich { flex-direction: row; gap: 22px; }
.fuss__nav--rechtlich a { font-size: .87rem; }

/* ---------- 4 Klein: Bewegung und Druck ---------- */

.zeigt-sich { opacity: 0; transform: translateY(22px); }
.zeigt-sich.sichtbar {
  opacity: 1; transform: none;
  transition: opacity 720ms cubic-bezier(.2,.7,.3,1), transform 720ms cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .zeigt-sich { opacity: 1; transform: none; }
}

/* ---------- 5 Schmale Fenster: Tablet und Handy ----------

   Von breit nach schmal:
     1080px  aus vier Spalten werden zwei
     1060px  Klappmenü statt waagrechter Menüleiste
      860px  schmalere Ränder, Tippflächen auf 44 px
      760px  alles einspaltig
      560px  Handy: Schriftgrade, Abstände, Kopfbilder
      340px  sehr schmale Geräte

   Alles steht ausschließlich in Media Queries – am PC (ab 1081 px)
   ändert sich dadurch nichts. Farbwerte werden hier nirgends
   angefasst, damit die geprüften Kontraste erhalten bleiben.        */

/* ----- 1080 px: zwei statt vier Spalten ----- */
@media (max-width: 1080px) {
  .art-gitter, .tier-gitter, .hilfe-gitter, .galerie { grid-template-columns: repeat(2, 1fr); }
  .art-gitter--gross { grid-template-columns: repeat(2, 1fr); }
  .fuss__innen { grid-template-columns: repeat(2, 1fr); }
  .tier-profil { grid-template-columns: 300px 1fr; gap: 36px; }

  /* Diese beiden blieben bisher bis 760 px breit stehen und waren auf
     dem Tablet zu eng: die Kontaktkarten (drei Spalten à 209 px) und
     die Neuigkeiten-Karten, deren Text auf 144 px zusammenschrumpfte. */
  .kontakt-gitter { grid-template-columns: repeat(2, 1fr); }
  .news-gitter    { grid-template-columns: 1fr; }

  /* Ein Beitrag ohne Foto bekam trotzdem die 200 px breite Bildspalte.
     Sein Text stand dann in diesen 200 px und wurde abgeschnitten
     („Neuankömmling: Dirndl“ auf der Startseite bei 768 px). */
  .news-karte:not(:has(.news-karte__bild)) { grid-template-columns: 1fr; }
}

/* ----- 1060 px: Klappmenü statt Menüleiste -----
   Die waagrechte Menüleiste braucht 1018 px (Wortmarke 245 + Menü 611
   + Knopf 98 + zwei Abstände). Von 1058 px abwärts schob sie die Seite
   auf jeder Seite waagrecht heraus – auch auf dem iPad quer (1024 px).
   Deshalb klappt das Menü hier bereits zusammen, nicht erst bei 860 px. */
@media (max-width: 1060px) {
  /* Der Menü-Schalter war ein Flex-Element ohne Schrumpfsperre und
     wurde bei 320 px von 44 px auf 21 px zusammengedrückt. */
  .kopf__innen { gap: 14px; }
  .marke { min-width: 0; min-height: 44px; }
  .marke__text { min-width: 0; }
  .menue-schalter { display: flex; flex: 0 0 44px; }

  .haupt-nav {
    position: absolute; top: var(--kopf-hoehe); left: 0; right: 0;
    display: none; flex-direction: column; gap: 2px;
    background: var(--creme); border-bottom: 1px solid var(--linie);
    /* oben Platz für den Spendenknopf; seitlich bündig mit dem Inhalt */
    padding: 86px 40px 20px;
    box-shadow: var(--schatten-m);
    max-height: calc(100vh - var(--kopf-hoehe));
    max-height: calc(100dvh - var(--kopf-hoehe));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .haupt-nav.offen { display: flex; }
  .haupt-nav a {
    display: flex; align-items: center; min-height: 48px;
    padding: 11px 16px; border-radius: var(--radius-klein); font-size: 1rem;
  }

  /* „Pate werden“ verschwand am Handy ersatzlos aus der Kopfzeile –
     auf einer Seite, die von Patenschaften lebt. Der Knopf steht jetzt
     als erster, deutlichster Eintrag im geöffneten Klappmenü. */
  .kopf__innen > .knopf--klein { display: none; }
  .haupt-nav.offen ~ .knopf--klein {
    display: inline-flex; justify-content: center;
    position: absolute; z-index: 2;
    top: calc(var(--kopf-hoehe) + 16px); left: 40px; right: 40px;
    padding: 14px 22px; font-size: 1rem;
  }

  /* Tippflächen auf mindestens 44 px. Ab hier ist die Seite auf
     Fingerbedienung ausgelegt (iPad quer, Handy), deshalb gilt das
     im selben Bereich wie das Klappmenü.
     Beim Textlink wächst die Fläche nach oben – so bleibt die
     Unterstreichung dicht am Wort. */
  .fuss__nav { gap: 0; }
  .fuss__nav a { display: block; padding: 11px 0; }
  .fuss__nav--rechtlich { flex-wrap: wrap; gap: 0 22px; }
  .chip { padding: 12px 18px; }
  /* align-self verhindert, dass der Verweis als Flex-Element der
     Hilfe-Karte auf volle Breite gezogen wird und seine Unterstreichung
     bis zum Kartenrand läuft. */
  .textlink { display: inline-block; align-self: flex-start; padding-top: 16px; }
  .konto__daten code { display: inline-block; padding: 13px 14px; }
  .download-liste a { padding-right: 52px; }
}

/* ----- 860 px: schmalere Ränder ----- */
@media (max-width: 860px) {
  .breit, .kopf__innen, .fuss__innen, .fuss__unten { width: calc(100% - 36px); }
  .haupt-nav { padding-inline: 18px; }
  .haupt-nav.offen ~ .knopf--klein { left: 18px; right: 18px; }
}

/* ----- 760 px: einspaltig ----- */
@media (max-width: 760px) {
  .art-gitter, .art-gitter--gross, .tier-gitter, .hilfe-gitter,
  .news-gitter, .kontakt-gitter, .wunsch-gitter, .eckdaten__innen,
  .fuss__innen { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .tier-profil, .news-karte { grid-template-columns: 1fr; }
  .tier-profil:nth-child(even) { direction: ltr; }
  .tier-profil__bild { position: static; }
  .konto, .wunsch-gruppe { padding: 26px 22px; }
  .konto__daten > div { grid-template-columns: 1fr; gap: 4px; }
  .fuss__unten { flex-direction: column; gap: 14px; }

  /* Einspaltig hatte das Bild keine Zeilenhöhe mehr (height: 100 %
     einer automatischen Zeile ergibt 0) – die Fotos der Neuigkeiten
     waren am Handy schlicht unsichtbar. */
  .news-karte__bild { aspect-ratio: 16 / 9; }
  .news-karte__text { padding: 22px 24px; }

  .eckdatum { padding: 26px 22px; }
  .fuss { padding-top: 52px; }
  .fuss__innen { gap: 34px; padding-bottom: 40px; }
}

/* ----- 560 px: Handy ----- */
@media (max-width: 560px) {
  .breit, .kopf__innen, .fuss__innen, .fuss__unten { width: calc(100% - 32px); }
  .haupt-nav { padding-inline: 16px; }
  .haupt-nav.offen ~ .knopf--klein { left: 16px; right: 16px; }

  /* Überschriften: 2.6rem bzw. 3rem sind die PC-Untergrenzen und füllen
     am Handy den halben Bildschirm. Lange deutsche Wörter dürfen hier
     trennen – „Meerschweinchen“ schob die Seite sonst um 42 px zur Seite. */
  h1 { font-size: clamp(1.95rem, 8.2vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  h3 { font-size: 1.16rem; }
  h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
  body { overflow-wrap: break-word; }
  /* Fließtext, Führungstext und Bildunterschriften behalten am Handy
     bewusst ihre Größe – kleiner darf hier nichts werden. */

  /* 64 px Luft über und unter jedem Abschnitt sind am Handy zu viel. */
  .abschnitt { padding: clamp(40px, 9vw, 64px) 0; }
  .abschnitt__kopf { margin-bottom: 26px; }
  .abschnitt--getoent, .abschnitt--getoent:last-of-type { border-radius: 26px 26px 0 0; }
  .block { padding: 22px 20px; }
  .impressum-karte, .kontakt-karte, .hilfe-karte { padding: 24px 22px; }
  blockquote { padding-left: 18px; }
  blockquote p { font-size: 1.16rem; }

  /* Kopfbild der Startseite: es verbrauchte 97 % der ersten
     Bildschirmhöhe, bevor der erste Satz kam. */
  .held { min-height: min(64vh, 500px); padding: 96px 0 40px; }
  .held__titel { font-size: clamp(2.1rem, 9.6vw, 2.9rem); max-width: none; }
  .held__ueber { margin-bottom: .8em; }
  .held__text { margin-bottom: 1.7em; }
  .held__knoepfe { gap: 10px; }
  .held__knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
  .held__pfeil { display: none; }

  /* Kopfbild der Unterseiten: bei den Tierarten bis zu 82 % der Höhe. */
  .seitenkopf { padding: calc(var(--kopf-hoehe) + 30px) 0 34px; }
  .seitenkopf--schlicht { padding: 44px 0 34px; }

  /* Auf den Kacheln verdeckte der Textverlauf fast das ganze Foto. */
  .art-kachel__bild, .art-gitter--gross .art-kachel__bild { aspect-ratio: 3 / 2.6; }
  .art-kachel__text { padding: 46px 20px 20px; }

  .galerie { gap: 12px; }
  .tier-karte__text { padding: 18px 20px 22px; }
  .tier-profil { padding: 34px 0; gap: 24px; }
  .beitrag { padding: 34px 0; }
  .beitrag h2 { font-size: 1.55rem; }
  .band { padding: clamp(52px, 12vw, 72px) 0; }

  /* Spendenkonto: das Kopierfeld war 29 px hoch, und die Rückmeldung
     „kopiert“ stand rechts außerhalb des Bildschirms. */
  .konto { padding: 24px 18px; }
  .konto__daten > div { padding: 14px 16px; }
  .konto__daten code.kopiert::after {
    position: static; margin: 0 0 0 10px; transform: none;
  }
  .download-liste a { padding: 18px 48px 18px 18px; }
  .wunsch-gruppe { padding: 22px 20px; }
}

/* ----- 340 px: sehr schmale Geräte ----- */
@media (max-width: 340px) {
  /* Bei 320 px passten Wortmarke (245 px) und Schalter nicht in die
     Kopfzeile; der Schalter wurde auf 21 px erdrückt. Ab 341 px reicht
     der Platz wieder für den Untertitel – dort bleibt er stehen. */
  .marke__text small { display: none; }
  .marke__text strong { font-size: .94rem; }
  .kopf__innen { gap: 10px; }
  .galerie { grid-template-columns: 1fr; }
}

@media print {
  .kopf, .fuss, .held__pfeil, .band, .knopf { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .abschnitt { padding: 12pt 0; }
}