/* =========================================================================
   Anytime for Animals - Gestaltung der Tierprofile
   =========================================================================
   Die Farben stammen aus dem Vereinslogo: zwei Magentatoene (heller
   Katzenumriss, dunklerer Schriftzug) und das Grau der Hundesilhouette.

   Das Layout liegt bewusst hier und nicht in Elementor-Einstellungen:
   versioniert, an einer Stelle aenderbar, und es ueberlebt jeden
   Template-Umbau. Elementor liefert die Struktur und die Feldbindungen.
   ========================================================================= */

:root {
  /* --- Marke ------------------------------------------------------------ */
  --a4a-magenta:        #c008b0;   /* Akzent: Schaltflaechen, Hervorhebungen */
  --a4a-magenta-dunkel: #990b8d;   /* Ueberschriften, Hover                  */
  --a4a-magenta-hell:   #fdf2fb;   /* Flaechen, sehr zurueckhaltend          */
  --a4a-grau:           #6d6d6d;   /* Sekundaertext                          */
  --a4a-anthrazit:      #333333;   /* Fliesstext, Ueberschriften             */

  /* --- Flaechen --------------------------------------------------------- */
  --a4a-grund:          #faf8f9;   /* Seitenhintergrund, leicht warm         */
  --a4a-karte:          #ffffff;
  --a4a-linie:          #e8e2e6;

  /* --- Status ----------------------------------------------------------- */
  --a4a-sucht:          #c008b0;
  --a4a-reserviert:     #b8860b;
  --a4a-vermittelt:     #2e7d32;
  --a4a-verstorben:     #8a8a8a;

  /* --- Raster und Form -------------------------------------------------- */
  --a4a-radius:         14px;
  --a4a-radius-klein:   8px;
  --a4a-schatten:       0 1px 2px rgba(51,51,51,.06), 0 6px 20px rgba(51,51,51,.07);
  --a4a-schatten-hoch:  0 2px 4px rgba(51,51,51,.08), 0 14px 34px rgba(153,11,141,.13);
  --a4a-uebergang:      180ms cubic-bezier(.2,.7,.3,1);
}

/* =========================================================================
   1. Kachel in der Uebersicht
   ========================================================================= */

.a4a-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  overflow: hidden;
  transition: transform var(--a4a-uebergang), box-shadow var(--a4a-uebergang);
  height: 100%;
}

.a4a-karte:hover,
.a4a-karte:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--a4a-schatten-hoch);
  border-color: transparent;
}

.a4a-karte__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--a4a-magenta-hell);
  overflow: hidden;
}

.a4a-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}

.a4a-karte:hover .a4a-karte__bild img { transform: scale(1.04); }

.a4a-karte__inhalt {
  padding: 1.1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.a4a-karte__name {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--a4a-anthrazit);
  font-weight: 700;
}

.a4a-karte__unterzeile {
  margin: 0;
  font-size: .92rem;
  color: var(--a4a-grau);
}

/* Die ganze Kachel ist anklickbar, ohne verschachtelte Links */
.a4a-karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* =========================================================================
   2. Statuskennzeichen
   ========================================================================= */

.a4a-status {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .7em;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  background: var(--a4a-sucht);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.a4a-status::before {
  content: "";
  width: .5em; height: .5em;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}

.a4a-status--reserviert { background: var(--a4a-reserviert); }
.a4a-status--vermittelt { background: var(--a4a-vermittelt); }
.a4a-status--verstorben { background: var(--a4a-verstorben); }

/* =========================================================================
   3. Eckdatenzeile (Alter, Groesse, Ort)
   ========================================================================= */

.a4a-eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.a4a-eckdaten li {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .25em .6em;
  border-radius: var(--a4a-radius-klein);
  background: var(--a4a-grund);
  border: 1px solid var(--a4a-linie);
  font-size: .84rem;
  color: var(--a4a-anthrazit);
  white-space: nowrap;
}

/* =========================================================================
   4. Steckbrief auf der Detailseite
   ========================================================================= */

.a4a-steckbrief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .1rem 2rem;
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
}

.a4a-steckbrief__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--a4a-linie);
}

.a4a-steckbrief__zeile:last-child { border-bottom: 0; }

.a4a-steckbrief__bezeichnung {
  color: var(--a4a-grau);
  font-size: .9rem;
}

.a4a-steckbrief__wert {
  color: var(--a4a-anthrazit);
  font-weight: 600;
  text-align: right;
}

/* =========================================================================
   5. Gesundheit und Vertraeglichkeit
   ========================================================================= */

.a4a-merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0; padding: 0;
  list-style: none;
}

.a4a-merkmal {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .4em .8em;
  border-radius: 999px;
  font-size: .87rem;
  border: 1px solid var(--a4a-linie);
  background: var(--a4a-karte);
  color: var(--a4a-anthrazit);
}

.a4a-merkmal--ja        { border-color: #c8e6c9; background: #f3faf3; }
.a4a-merkmal--nein      { border-color: #f0d4d4; background: #fdf5f5; color: var(--a4a-grau); }
.a4a-merkmal--unbekannt { border-style: dashed; color: var(--a4a-grau); }

.a4a-merkmal__zeichen { font-weight: 700; }
.a4a-merkmal--ja   .a4a-merkmal__zeichen { color: var(--a4a-vermittelt); }
.a4a-merkmal--nein .a4a-merkmal__zeichen { color: #c62828; }

/* =========================================================================
   6. Handlungsaufforderung
   ========================================================================= */

.a4a-aktion {
  position: sticky;
  top: 1.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--a4a-magenta-hell);
  border: 1px solid #f0d8ec;
  border-radius: var(--a4a-radius);
}

.a4a-aktion__titel {
  margin: 0 0 .3rem;
  font-size: 1.15rem;
  color: var(--a4a-magenta-dunkel);
}

.a4a-aktion__text {
  margin: 0 0 1rem;
  font-size: .93rem;
  color: var(--a4a-anthrazit);
}

.a4a-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  width: 100%;
  padding: .8em 1.4em;
  border: 0;
  border-radius: 999px;
  background: var(--a4a-magenta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--a4a-uebergang), transform var(--a4a-uebergang);
}

.a4a-knopf:hover,
.a4a-knopf:focus-visible {
  background: var(--a4a-magenta-dunkel);
  color: #fff;
  transform: translateY(-1px);
}

.a4a-knopf--zweit {
  margin-top: .6rem;
  background: transparent;
  color: var(--a4a-magenta-dunkel);
  border: 1.5px solid var(--a4a-magenta);
}

.a4a-knopf--zweit:hover { background: var(--a4a-magenta); color: #fff; }

/* =========================================================================
   7. Filterleiste der Uebersicht
   ========================================================================= */

.a4a-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .9rem 1rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  margin-bottom: 1.6rem;
}

/* =========================================================================
   8. Tastaturbedienung sichtbar halten
   ========================================================================= */

.a4a-karte a:focus-visible,
.a4a-knopf:focus-visible {
  outline: 3px solid var(--a4a-magenta);
  outline-offset: 2px;
}

/* =========================================================================
   9. Kleine Bildschirme zuerst gedacht - hier nur die Ergaenzungen
   ========================================================================= */

@media (max-width: 767px) {
  .a4a-aktion { position: static; }
  .a4a-steckbrief { padding: 1.1rem 1.15rem; }
  .a4a-karte__name { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .a4a-karte,
  .a4a-karte__bild img,
  .a4a-knopf { transition: none; }
  .a4a-karte:hover { transform: none; }
  .a4a-karte:hover .a4a-karte__bild img { transform: none; }
}

/* Kachel ohne Bild: freundlicher Platzhalter statt leerer Flaeche */
.a4a-karte__kein-bild {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;
  opacity: .35;
}

/* =========================================================================
   10. Galerie und Ueberschrift der Detailseite
   ========================================================================= */

.a4a-name {
  margin: 0 0 .6rem;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.1;
  color: var(--a4a-anthrazit);
}

.a4a-galerie__gross {
  display: block;
  border-radius: var(--a4a-radius);
  overflow: hidden;
  background: var(--a4a-magenta-hell);
}

.a4a-galerie__gross img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.a4a-galerie__weitere {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .5rem;
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.a4a-galerie__weitere a {
  display: block;
  border-radius: var(--a4a-radius-klein);
  overflow: hidden;
  border: 1px solid var(--a4a-linie);
  transition: border-color var(--a4a-uebergang), transform var(--a4a-uebergang);
}

.a4a-galerie__weitere a:hover {
  border-color: var(--a4a-magenta);
  transform: translateY(-2px);
}

/* Videos unter der Geschichte ([a4a_videos]) - Ueberschrift wie die
   Elementor-Ueberschriften der Vorlage (Kit-Primaerfarbe, Nunito 800). */
.a4a-videos {
  margin-top: 2.5rem;
}
.a4a-videos__titel {
  margin: 0 0 1rem;
  color: var(--e-global-color-primary, var(--a4a-magenta));
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.2;
}
.a4a-videos__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.a4a-videos__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #1b1b1b;
  border-radius: var(--a4a-radius);
}

.a4a-galerie__weitere img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.a4a-geschichte {
  max-width: 68ch;
  color: var(--a4a-anthrazit);
}

.a4a-geschichte p { margin: 0 0 1em; }
.a4a-geschichte p:last-child { margin-bottom: 0; }

.a4a-geschichte--kurz {
  padding: 1rem 1.2rem;
  background: var(--a4a-magenta-hell);
  border-left: 3px solid var(--a4a-magenta);
  border-radius: 0 var(--a4a-radius-klein) var(--a4a-radius-klein) 0;
}

/* =========================================================================
   11. Seitenrahmen - Kopf, Navigation, Fuss
   =========================================================================
   Kopf und Fuss kommen als Theme-Markup aus hello-elementor 3.5.1 - es gibt
   keine Elementor-Vorlage dafuer (das gerenderte Markup traegt dynamic-header
   bzw. dynamic-footer). Elementor Pro ist aktiv, ein Theme-Builder-Kopf waere
   also moeglich; gestaltet wird hier trotzdem statt geklickt, aus demselben
   Grund wie beim Rest dieser Datei: versioniert, an einer Stelle aenderbar,
   ueberlebt jeden Template-Umbau.

   Die Klassen stammen unveraendert aus template-parts/dynamic-header.php und
   dynamic-footer.php des Themes. Wer das Theme aktualisiert, prueft dort.
   Wer spaeter doch einen Elementor-Kopf baut, kann 11.1 bis 11.4 loeschen -
   sie greifen dann ins Leere, schaden aber nicht.
   ========================================================================= */

:root {
  /* EIN Rahmen fuer alle Seiten (siehe Abschnitt 18): Inhaltsbreite wie im
     Elementor-Kit ("container_width" 1180px) plus Rand. Vorher stand hier
     1140px mit dem Kommentar "deckungsgleich mit Elementor" - das Kit war
     aber auf 1180px gestellt, Kopf und Inhalt lagen 20px versetzt. */
  --a4a-rahmen:      1180px;
  --a4a-rand:        1.25rem;
  --a4a-breite:      calc(var(--a4a-rahmen) + 2 * var(--a4a-rand));
  --a4a-lesebreite:  46rem;   /* ca. 75 Zeichen je Zeile */
  --a4a-kopf-logo:   64px;
  --a4a-fuss-logo:   52px;
}

/* Grundflaeche: die Kacheln brauchen einen Ton, gegen den sie stehen.
   Vorher lagen weisse Karten auf weissem Grund - daher der zerstueckelte
   Eindruck trotz fertiger Kacheln. */
body { background: var(--a4a-grund); }

/* -------------------------------------------------------------------------
   11.1 Kopfzeile
   ------------------------------------------------------------------------- */

.site-header.dynamic-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--a4a-linie);
}

/* Die Adminleiste steht sonst ueber der klebenden Kopfzeile. */
body.admin-bar .site-header.dynamic-header { top: 32px; }

.site-header .header-inner {
  max-width: var(--a4a-breite);
  margin-inline: auto;
  padding: .65rem var(--a4a-rand);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header .site-branding {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-right: auto;   /* schiebt die Navigation nach rechts */
}

/* Das Logo ist ein 423x423-SVG. Ohne Deckel fuellt es den halben Bildschirm. */
.site-header .site-logo img {
  height: var(--a4a-kopf-logo);
  width: auto;
  max-width: none;
  display: block;
}

/* Der Zusatz gehoert neben das Logo, nicht als Waise darunter. */
/* Zwei Zeilen: "Tierschutz für Rumänien:" hervorgehoben, darunter klein die
   drei Aufgaben. Der Umbruch sitzt fest nach "Rumänien:", weil der Untertitel
   sonst nur geschuetzte Leerzeichen hat (scripts/grundlayout.sh). max-width
   muss kuerzer sein als der ganze Text in einer Zeile und laenger als die
   laengere der beiden Zeilen. */
.site-header .site-description {
  margin: 0;
  max-width: 19rem;
  padding-left: .9rem;
  border-left: 1px solid var(--a4a-linie);
  font-size: .78rem;
  line-height: 1.4;
  color: var(--a4a-grau);
}
/* Logo und Untertitel nebeneinander - dafuer ist die Trennlinie links da.
   header-footer.css des Themes laedt NACH diesem Stylesheet und stellt
   .site-branding auf flex-direction: column; deshalb "html body" davor.
   Erst ab 1200px: bei 1100px rutschte das Menue nebeneinander in eine zweite
   Zeile (gemessen 25.09.2026); darunter bleibt es untereinander. */
@media (min-width: 1200px) {
  html body .site-header .site-branding {
    flex-direction: row;
    align-items: center;
    gap: .9rem;
  }
}
/* Darunter (bis zum Burger-Menue bei 1024px) nur das Logo: seit dem Menuepunkt
   "Informationen rund ums Tier" (23.10.2026) passt das Menue sonst nicht mehr
   neben den Untertitel und rutscht in eine zweite Reihe - bei 1100px fehlten
   14px, der Kopf wurde 225px hoch. Unter 1025px ist der Untertitel ohnehin aus. */
@media (max-width: 1199px) {
  .site-header .site-description { display: none; }
}
.site-header .site-description::first-line {
  font-family: var(--e-global-typography-primary-font-family, "Nunito"), "Nunito", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--a4a-magenta-dunkel);
}

/* -------------------------------------------------------------------------
   11.2 Navigation
   ------------------------------------------------------------------------- */

.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .1rem;
}

.site-navigation li { position: relative; }

.site-navigation a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--a4a-radius-klein);
  color: var(--a4a-anthrazit);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
  transition: color var(--a4a-uebergang), background var(--a4a-uebergang);
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
  color: var(--a4a-magenta-dunkel);
  background: var(--a4a-magenta-hell);
}

.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.site-navigation .current_page_item > a,
.site-navigation .current_page_ancestor > a {
  color: var(--a4a-magenta-dunkel);
}

/* Hinweis auf ein Untermenue */
.site-navigation .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  margin-left: .45em;
  width: .42em;
  height: .42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15em) rotate(45deg);
  opacity: .55;
}

/* Das Theme zeichnet einen EIGENEN Pfeil ("▾" an li::after, in der dritten
   Ebene gedreht zu "▸") und haelt dafuer 15px frei - zusammen mit dem Winkel
   oben standen neben jedem Menuepunkt zwei Pfeile.
   "body" vorangestellt: header-footer.css des Themes wird NACH diesem
   Stylesheet geladen und gewaenne bei gleicher Gewichtung. */
body .site-navigation ul.menu li.menu-item-has-children::after {
  content: none;
  display: none;
}
body .site-navigation ul.menu li.menu-item-has-children {
  padding-inline-end: 0;
}

.site-navigation .sub-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 10;
  min-width: 246px;
  display: block;
  padding: .4rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  box-shadow: var(--a4a-schatten);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--a4a-uebergang), transform var(--a4a-uebergang), visibility var(--a4a-uebergang);
}

.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.site-navigation .sub-menu a {
  font-weight: 500;
  font-size: .92rem;
  padding: .5rem .7rem;
  white-space: normal;
}

/* Dritte Ebene (Lesenswertes > Emotionen > ...): klappt zur Seite auf, nicht
   nach unten - sonst legt sie sich ueber die zweite. */
.site-navigation .sub-menu .sub-menu {
  top: -.4rem;
  left: calc(100% + .2rem);
}

/* Pfeil zeigt hier nach rechts statt nach unten. */
.site-navigation .sub-menu .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
}

.site-navigation .sub-menu .menu-item-has-children > a::after {
  margin-left: 0;
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

/* Am rechten Fensterrand nach links ausklappen, damit nichts abgeschnitten
   wird. Ohne JavaScript nur fuer den letzten Hauptpunkt zu treffen - das ist
   der Fall, der praktisch auftritt. */
.site-navigation > ul > li:last-child .sub-menu .sub-menu {
  left: auto;
  right: calc(100% + .2rem);
}

/* -------------------------------------------------------------------------
   11.3 Navigation auf kleinen Bildschirmen
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .site-header .site-navigation { display: none; }
  .site-header .site-description { display: none; }
  .site-header .site-logo img { height: 52px; }

  .site-navigation-toggle-holder {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding: 0;
  }

  .site-navigation-toggle {
    background: transparent;
    border: 1px solid var(--a4a-linie);
    border-radius: var(--a4a-radius-klein);
    padding: .5rem .6rem;
    color: var(--a4a-anthrazit);
    cursor: pointer;
  }

  .site-navigation-toggle:hover,
  .site-navigation-toggle[aria-expanded="true"] {
    color: var(--a4a-magenta-dunkel);
    border-color: var(--a4a-magenta);
    background: var(--a4a-magenta-hell);
  }

  .site-navigation-dropdown {
    background: var(--a4a-karte);
    border-top: 1px solid var(--a4a-linie);
    box-shadow: var(--a4a-schatten);
  }

  .site-navigation-dropdown ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem .75rem 1rem;
  }

  .site-navigation-dropdown li { border-bottom: 1px solid var(--a4a-linie); }
  .site-navigation-dropdown li:last-child { border-bottom: 0; }

  .site-navigation-dropdown a { padding: .8rem .4rem; }

  /* Untermenues sind hier eingerueckt statt schwebend. */
  .site-navigation-dropdown .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 0 .9rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Das Theme klappt die Untermenues hier ZU (max-height: 0 an den
     Eintraegen) und oeffnet sie, wenn man den Gruppentitel antippt - der
     Titel selbst fuehrt nirgendwohin. Ohne Pfeil war nicht zu erkennen, dass
     sich hinter "Vermittlung" die Tiere verbergen. */
  /* "body ... ul.menu li" statt kuerzer: Das Theme setzt die Links hier mit
     ".site-navigation-dropdown ul.menu li a { display: block }" - ohne die
     hoehere Gewichtung griff das Flex-Layout nicht, und der Pfeil stand als
     senkrechter Strich direkt hinter dem Wort. */
  body .site-navigation-dropdown ul.menu li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6em;
  }
  .site-navigation-dropdown .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    margin-right: .3rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-.15em) rotate(45deg);
    opacity: .55;
    transition: transform var(--a4a-uebergang);
  }
  .site-navigation-dropdown li.elementor-active > a::after {
    transform: translateY(.1em) rotate(225deg);
  }

  /* Zugeklappte Eintraege sind 0px hoch, ihre Trennlinien zeichnete der
     Browser trotzdem - vier 1px-Linien uebereinander ergaben die dicken
     Doppelstriche zwischen den Gruppentiteln. Linien und Abstand deshalb nur
     im aufgeklappten Zustand. */
  .site-navigation-dropdown .sub-menu li { border-bottom: 0; }
  .site-navigation-dropdown li.elementor-active > .sub-menu { padding-bottom: .4rem; }
  .site-navigation-dropdown li.elementor-active > .sub-menu > li {
    border-bottom: 1px solid var(--a4a-linie);
  }
  .site-navigation-dropdown li.elementor-active > .sub-menu > li:last-child { border-bottom: 0; }

  /* Das Theme zieht unter jeden Link eine eigene Schattenlinie
     ("box-shadow: inset 0 -1px ..."), zusaetzlich zur Trennlinie oben -
     zwischen den Gruppentiteln standen so zwei Striche. */
  body .site-navigation-dropdown ul.menu li a { box-shadow: none; }

  /* Aktueller Eintrag: das Theme faerbt ihn dunkelgrau mit weisser Schrift -
     ein schwerer Block, der mit nichts sonst auf der Seite zusammenpasst. Wie
     am Desktop: Magenta, dazu der zarte Flaechenton. */
  body .site-navigation-dropdown ul.menu li.current-menu-item > a,
  body .site-navigation-dropdown ul.menu li.current-menu-ancestor > a {
    background: var(--a4a-magenta-hell);
    color: var(--a4a-magenta-dunkel);
    border-radius: var(--a4a-radius-klein);
    font-weight: 600;
  }
}

@media (min-width: 1025px) {
  .site-navigation-toggle-holder { display: none; }
}

/* -------------------------------------------------------------------------
   11.4 Fusszeile
   ------------------------------------------------------------------------- */

.site-footer.dynamic-footer {
  margin-top: 4rem;
  background: var(--a4a-karte);
  border-top: 1px solid var(--a4a-linie);
}

.site-footer .footer-inner {
  max-width: var(--a4a-breite);
  margin-inline: auto;
  padding: 2.4rem var(--a4a-rand) 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.site-footer .site-logo img {
  height: var(--a4a-fuss-logo);
  width: auto;
  max-width: none;
  display: block;
}

/* Der Zusatz steht schon im Kopf - zweimal dieselbe Zeile wirkt wie ein Fehler. */
.site-footer .site-description { display: none; }

.site-footer .site-navigation ul { flex-wrap: wrap; gap: .1rem .3rem; }
.site-footer .site-navigation a { font-weight: 500; font-size: .9rem; }

.site-footer .copyright {
  margin-left: auto;
  color: var(--a4a-grau);
  font-size: .85rem;
}

.site-footer .copyright p { margin: 0; }

@media (max-width: 767px) {
  .site-footer .footer-inner { flex-direction: column; align-items: flex-start; }
  .site-footer .copyright { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   11.5 Inhaltsbereich
   ------------------------------------------------------------------------- */

/* Elementors Zeilenraster laesst Kacheln unterschiedlich hoch stehen, weil die
   Schleifenelemente nicht gestreckt werden. .a4a-karte hat bereits height:100%
   - es fehlte nur die Streckung eine Ebene darueber. */
.elementor-loop-container.elementor-grid { align-items: stretch; }
.elementor-loop-container .e-loop-item { display: flex; }
.elementor-loop-container .e-loop-item > .elementor-element { width: 100%; }

/* Seitenzahlen unter der Uebersicht */
.elementor-pagination {
  margin-top: 2.2rem;
  display: flex;
  justify-content: center;
  gap: .35rem;
}

.elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.35rem;
  height: 2.35rem;
  padding: 0 .6rem;
  border-radius: var(--a4a-radius-klein);
  border: 1px solid var(--a4a-linie);
  background: var(--a4a-karte);
  color: var(--a4a-anthrazit);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--a4a-uebergang), background var(--a4a-uebergang), border-color var(--a4a-uebergang);
}

.elementor-pagination .page-numbers:hover {
  color: var(--a4a-magenta-dunkel);
  border-color: var(--a4a-magenta);
}

.elementor-pagination .page-numbers.current {
  background: var(--a4a-magenta);
  border-color: var(--a4a-magenta);
  color: #fff;
}

/* =========================================================================
   12. Bedienelemente der Filterleiste
   =========================================================================
   Die Leiste selbst (.a4a-filter) steht in Abschnitt 7. Hier kommen die
   Felder dazu. Die Leiste baut sich datengetrieben auf - je nach Datenbestand
   stehen zwei bis acht Felder darin, das Layout muss beides tragen.
   ========================================================================= */

.a4a-filter {
  align-items: flex-end;
  gap: .75rem 1rem;
}

.a4a-filter__feld {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 11rem;
}

.a4a-filter__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--a4a-grau);
}

.a4a-filter__auswahl {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: .5rem 2rem .5rem .7rem;
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius-klein);
  background-color: var(--a4a-karte);
  /* Pfeil als Grafik, damit das Feld in allen Browsern gleich aussieht. */
  background-image: linear-gradient(45deg, transparent 50%, var(--a4a-grau) 50%),
                    linear-gradient(135deg, var(--a4a-grau) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
  background-size: .32rem .32rem, .32rem .32rem;
  background-repeat: no-repeat;
  color: var(--a4a-anthrazit);
  font: inherit;
  font-size: .92rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--a4a-uebergang), box-shadow var(--a4a-uebergang);
}

.a4a-filter__auswahl:hover { border-color: var(--a4a-magenta); }

.a4a-filter__auswahl:focus-visible {
  outline: 3px solid var(--a4a-magenta);
  outline-offset: 1px;
  border-color: var(--a4a-magenta);
}

.a4a-filter__schalter {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  flex: 0 0 auto;
}

/* Der Knopf aus Abschnitt 6 ist auf volle Breite ausgelegt - hier nicht. */
.a4a-knopf--schmal {
  width: auto;
  padding: .55em 1.2em;
  font-size: .92rem;
}

.a4a-filter__zuruecksetzen {
  font-size: .88rem;
  color: var(--a4a-grau);
  text-decoration: underline;
  text-underline-offset: .15em;
  white-space: nowrap;
}

.a4a-filter__zuruecksetzen:hover { color: var(--a4a-magenta-dunkel); }

/* Auf kleinen Bildschirmen zwei Felder je Zeile, Schalter darunter. */
@media (max-width: 767px) {
  .a4a-filter { padding: .8rem .85rem; }
  .a4a-filter__feld { flex: 1 1 8.5rem; }
  .a4a-filter__schalter { flex: 1 1 100%; justify-content: space-between; }
}

/* -------------------------------------------------------------------------
   12.1 Ergebniszeile
   ------------------------------------------------------------------------- */

.a4a-treffer {
  margin: -.6rem 0 1.4rem;
  font-size: .92rem;
  color: var(--a4a-grau);
}

.a4a-treffer--leer {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--a4a-magenta-hell);
  border: 1px solid #f0d8ec;
  border-radius: var(--a4a-radius);
  color: var(--a4a-anthrazit);
  font-size: 1rem;
}

.a4a-treffer--leer a {
  color: var(--a4a-magenta-dunkel);
  font-weight: 600;
}

/* =========================================================================
   13. Notfall und Handicap
   =========================================================================
   Die alte Seite fuehrte "Notfall / Handicap" als eigene Rubrik. Hier sind es
   Merkmale am Tier statt einer separaten Liste - so koennen sie nicht mehr
   veralten, und ein Notfall faellt in JEDER Uebersicht auf, nicht nur in der
   dafuer vorgesehenen. */

.a4a-marken {
  position: absolute;
  top: .7rem;
  left: .7rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: calc(100% - 1.4rem);
}

/* Innerhalb der Markenleiste nicht mehr einzeln positionieren */
.a4a-marken .a4a-status {
  position: static;
  top: auto;
  left: auto;
}

/* Detailseite: [a4a_status] steht dort in der Textspalte ueber den Eckdaten,
   nicht ueber einem Foto. Absolut positioniert (wie auf den Kacheln) lag das
   Kennzeichen ueber dem ersten Eckdaten-Label (gemeldet 25.09.2026). */
html body.single-tier .a4a-marken:not(.e-loop-item .a4a-marken),
html body.single-tier .a4a-status:not(.e-loop-item .a4a-status) {
  position: static;
  max-width: none;
}
html body.single-tier .a4a-marken:not(.e-loop-item .a4a-marken) {
  margin-bottom: .25rem;
}
html body.single-tier .a4a-status:not(.e-loop-item .a4a-status):not(.a4a-marken .a4a-status) {
  width: max-content;
  margin-bottom: .25rem;
}

.a4a-status--notfall {
  background: #c62828;
  animation: a4a-notfall 2.4s ease-in-out infinite;
}

.a4a-status--handicap { background: #5b6bbf; }

@keyframes a4a-notfall {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,.18), 0 0 0 5px rgba(198,40,40,.22); }
}

@media (prefers-reduced-motion: reduce) {
  .a4a-status--notfall { animation: none; }
}

/* Ankreuzfelder in der Filterleiste */
.a4a-filter__feld--schalter { display: flex; align-items: flex-end; }

.a4a-filter__ankreuz {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55em .9em;
  border: 1px solid var(--a4a-linie);
  border-radius: 999px;
  background: var(--a4a-karte);
  cursor: pointer;
  font-size: .92rem;
  white-space: nowrap;
}

.a4a-filter__ankreuz:has(input:checked) {
  border-color: var(--a4a-magenta);
  background: var(--a4a-magenta-hell);
  color: var(--a4a-magenta-dunkel);
  font-weight: 600;
}

.a4a-filter__ankreuz input { accent-color: var(--a4a-magenta); }

/* =========================================================================
   14. Beitragsliste (Sammelseiten wie "Weihnachtsgeschichten")
   ========================================================================= */

.a4a-beitragsliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.a4a-beitragsliste__eintrag {
  padding: 1.2rem 1.35rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  transition: border-color var(--a4a-uebergang), box-shadow var(--a4a-uebergang);
}

.a4a-beitragsliste__eintrag:hover {
  border-color: var(--a4a-magenta);
  box-shadow: var(--a4a-schatten);
}

.a4a-beitragsliste__titel {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  line-height: 1.25;
}

.a4a-beitragsliste__titel a {
  color: var(--a4a-anthrazit);
  text-decoration: none;
}

.a4a-beitragsliste__titel a:hover { color: var(--a4a-magenta-dunkel); }

.a4a-beitragsliste__datum {
  margin: 0 0 .4rem;
  font-size: .85rem;
  color: var(--a4a-grau);
}

.a4a-beitragsliste__auszug {
  margin: 0;
  font-size: .94rem;
  color: var(--a4a-grau);
  line-height: 1.55;
}

/* =========================================================================
   15. Happy End - Fotoraster
   ========================================================================= */

.a4a-foto {
  position: relative;
  border-radius: var(--a4a-radius);
  overflow: hidden;
  background: var(--a4a-magenta-hell);
  aspect-ratio: 1;
}

.a4a-foto__inhalt {
  display: block;
  width: 100%;
  height: 100%;
}

.a4a-foto__bild,
.a4a-foto__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}

.a4a-foto__name,
.a4a-foto__datum {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 .7rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.a4a-foto__name {
  bottom: .55rem;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}

.a4a-foto__datum {
  bottom: .18rem;
  font-size: .78rem;
  opacity: .9;
}

/* Verlauf, damit die Schrift auf hellen Fotos lesbar bleibt */
.a4a-foto__inhalt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent);
  pointer-events: none;
}

/* Kein :hover, kein :focus-within: die Kachel ist bewusst nicht anklickbar
   (siehe [a4a_kachel_foto]). Ein Hover-Effekt wuerde Interaktion andeuten,
   die es nicht gibt. */

/* =========================================================================
   16. Happy End - Jahresgliederung ([a4a_happyend])
   ========================================================================= */

.a4a-he__jahr {
  margin: 2.6rem 0 .9rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--a4a-magenta);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.15;
}

.a4a-he__jahr:first-child { margin-top: 0; }

.a4a-he__raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .7rem;
}

/* In diesem Raster traegt die Kachel nur das Foto - keine Beschriftung,
   also auch kein Verlauf darunter. */
.a4a-he .a4a-foto { margin: 0; }
.a4a-he .a4a-foto__bild,
.a4a-he .a4a-foto__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   17. Inhaltsseiten (Block-Editor)

   Gilt fuer normale Seiten und Beitraege, die mit dem Block-Editor gepflegt
   werden (Helfen, Ratgeber, Ueber uns ...). Die Elementor-Seiten und die
   Tierprofile haben eigene Regeln weiter oben und sind hier ausgenommen:
   Den Rahmen ".a4a-inhalt" setzt inhaltsseiten.php nur, wenn die Seite
   NICHT mit Elementor gebaut ist.
   ========================================================================= */

.a4a-inhalt {
  color: var(--a4a-anthrazit);
  font-size: 1.06rem;
  line-height: 1.72;
  padding-bottom: 3rem;
}

/* Textbloecke in einer ruhigen Lesespalte - LINKSBUENDIG an der Kante des
   gemeinsamen Rahmens (Abschnitt 18), nicht zentriert: Titel, Text,
   Kachelraster und die Elementor-Seiten beginnen so alle auf derselben Linie.
   Zentriert lag der Text auf breiten Bildschirmen 200px weiter rechts als
   der Titel der Nachbarseite. Spalten, Galerien und Kacheln nutzen den
   ganzen Rahmen. */
.a4a-inhalt > * {
  max-width: var(--a4a-lesebreite);
  margin-left: 0;
  margin-right: auto;
}
.a4a-inhalt > .wp-block-columns,
.a4a-inhalt > .wp-block-gallery,
.a4a-inhalt > .a4a-unterseiten {
  max-width: none;
}

.a4a-inhalt p { margin: 0 0 1.05em; }

/* --- Ueberschriften ------------------------------------------------------ */

.a4a-inhalt h2,
.a4a-inhalt h3,
.a4a-inhalt h4 {
  line-height: 1.25;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* h1 im Inhalt gibt es nur auf der Startseite: dort ersetzt der Vereinsname
   den ausgeblendeten Seitentitel "Startseite". */
.a4a-inhalt h1 {
  margin: .6rem 0 1.2rem;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  line-height: 1.12;
  color: var(--a4a-magenta-dunkel);
  text-wrap: balance;
}

.a4a-inhalt h2 {
  margin: 2.4rem 0 .8rem;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  color: var(--a4a-magenta-dunkel);
}

.a4a-inhalt h3 {
  margin: 1.9rem 0 .55rem;
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
  color: var(--a4a-anthrazit);
}

.a4a-inhalt h4 {
  margin: 1.5rem 0 .4rem;
  font-size: 1.08rem;
}

/* Erste Ueberschrift direkt unter dem Seitentitel nicht so weit absetzen */
.a4a-inhalt > h2:first-child,
.a4a-inhalt > h3:first-child { margin-top: .4rem; }

/* --- Links und Listen ---------------------------------------------------- */

.a4a-inhalt a:not(.wp-block-button__link):not(.a4a-unterseiten__link) {
  color: var(--a4a-magenta-dunkel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.a4a-inhalt a:not(.wp-block-button__link):not(.a4a-unterseiten__link):hover {
  color: var(--a4a-magenta);
  text-decoration-thickness: 2px;
}

.a4a-inhalt ul.wp-block-list,
.a4a-inhalt ol.wp-block-list {
  padding-left: 1.35rem;
  margin-bottom: 1.3em;
}
.a4a-inhalt ul.wp-block-list li::marker { color: var(--a4a-magenta); }
.a4a-inhalt .wp-block-list li { margin-bottom: .35em; padding-left: .2rem; }

/* --- Bilder ---------------------------------------------------------------- */

.a4a-inhalt .wp-block-image {
  margin: 1.8rem 0;
}
.a4a-inhalt .wp-block-image img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0;
  border-radius: var(--a4a-radius);
  box-shadow: var(--a4a-schatten);
}
/* Hochformat nicht ueber den ganzen Bildschirm strecken */
.a4a-inhalt > .wp-block-image img { max-height: 34rem; width: auto; }

.a4a-inhalt .wp-element-caption {
  margin-top: .6rem;
  font-size: .9rem;
  color: var(--a4a-grau);
}

/* --- Galerie --------------------------------------------------------------- */

.a4a-inhalt .wp-block-gallery.has-nested-images {
  gap: .7rem;
  margin: 2rem 0;
}
.a4a-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image {
  margin: 0;
}
.a4a-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image img {
  border-radius: var(--a4a-radius-klein);
  box-shadow: none;
  max-height: none;
}

/* --- Spalten ---------------------------------------------------------------- */

.a4a-inhalt .wp-block-columns {
  gap: 1.6rem;
  margin: 2rem 0;
}
.a4a-inhalt .wp-block-column > :first-child { margin-top: 0; }
.a4a-inhalt .wp-block-column > :last-child { margin-bottom: 0; }
.a4a-inhalt .wp-block-column .wp-block-image { margin: 0 0 1rem; }
.a4a-inhalt .wp-block-column .wp-block-image img { width: 100%; object-fit: cover; }

/* In schmalen Spalten brach "Transportkostenzuschuss" mitten im Wort um
   ("Transportkostenz-uschuss"). Mit Silbentrennung trennt der Browser nach
   deutschen Regeln - die Seite ist als de-DE ausgezeichnet. */
.a4a-inhalt .wp-block-column {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Spalten mit Bild und direkt folgender Ueberschrift (die Gebuehrenuebersicht
   im Vermittlungsablauf): gleiches Bildformat, damit die Ueberschriften auf
   einer Linie stehen. Hochformat-Portraets auf "Unser Team" haben keine
   Ueberschrift direkt unter dem Bild und bleiben unberuehrt. */
.a4a-inhalt .wp-block-column:has(> .wp-block-image + .wp-block-heading) .wp-block-image img {
  aspect-ratio: 4 / 3;
}

/* Fehlt in so einer Reihe einer Spalte das Bild (im Vermittlungsablauf war
   "Kastrierte Hunde" schon auf der alten Seite ein toter Link), steht ihre
   Ueberschrift sonst eine Bildhoehe zu hoch. Derselbe Platzhalter wie bei den
   Kacheln ohne Bild haelt die Reihe auf einer Linie. */
.a4a-inhalt .wp-block-columns:has(> .wp-block-column > .wp-block-image + .wp-block-heading)
  > .wp-block-column:has(> .wp-block-heading:first-child)::before {
  content: "🐾";
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
  border-radius: var(--a4a-radius);
  background: var(--a4a-magenta-hell);
  font-size: 2.4rem;
  opacity: .55;
}

/* Vier und mehr Spalten sind erst auf breiten Bildschirmen lesbar. Dazwischen
   zwei je Reihe; unter 782px stapelt WordPress sie ohnehin untereinander.
   !important, weil der Kern "flex-wrap: nowrap !important" setzt - bei
   gleichem Rang entscheidet die hoehere Spezifitaet dieser Regel. */
@media (min-width: 782px) and (max-width: 1100px) {
  .a4a-inhalt .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
    flex-wrap: wrap !important;
  }
  .a4a-inhalt .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column {
    flex-basis: calc(50% - .8rem) !important;
    flex-grow: 0;
  }
}

/* Spalten, die nur Bild + Knopf tragen (Ratgeber, Startseite), als Kachel */
.a4a-inhalt .wp-block-column:has(> .wp-block-image):has(> .wp-block-buttons) {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.1rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  overflow: hidden;
}
.a4a-inhalt .wp-block-column:has(> .wp-block-image):has(> .wp-block-buttons) .wp-block-image img {
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: 4 / 3;
}
.a4a-inhalt .wp-block-column:has(> .wp-block-image):has(> .wp-block-buttons) > :not(.wp-block-image) {
  padding: 0 1.1rem;
}
.a4a-inhalt .wp-block-column:has(> .wp-block-image):has(> .wp-block-buttons) > .wp-block-buttons {
  margin-top: auto;
}

/* --- Knoepfe ------------------------------------------------------------------ */

.a4a-inhalt .wp-block-buttons {
  gap: .6rem;
  margin: 1.4rem 0;
}
.a4a-inhalt .wp-block-button__link {
  display: inline-block;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  background: var(--a4a-magenta);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--a4a-uebergang), transform var(--a4a-uebergang);
}
.a4a-inhalt .wp-block-button__link:hover,
.a4a-inhalt .wp-block-button__link:focus-visible {
  background: var(--a4a-magenta-dunkel);
  color: #fff;
  transform: translateY(-1px);
}

/* --- Hauptknoepfe: Hunde- und Katzenvermittlung (Startseite) -------------------
 * Die Vermittlung ist die Hauptaufgabe der Seite, deshalb zwei grosse Kacheln
 * mit Tier-Symbol statt zweier Pillen. Die Symbole sind einfarbige SVG-Masken
 * und nehmen die Schriftfarbe an; sie liegen als data:-Adresse im Stylesheet,
 * es wird also nichts nachgeladen. Unter 560px untereinander, Symbol links.
 * Auf der Startseite stehen sie im Hero neben dem Titelbild (siehe unten). */

.a4a-inhalt .wp-block-buttons.a4a-hauptknoepfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2.5rem;
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button {
  width: auto;
  margin: 0;
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 100%;
  min-height: 10rem;
  padding: 1.5rem 1rem;
  border-radius: var(--a4a-radius);
  font-family: var(--e-global-typography-primary-font-family, "Nunito"), "Nunito", system-ui, sans-serif;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem);
  font-weight: 800;
  text-align: center;
  box-shadow: var(--a4a-schatten-hoch);
  transition: background var(--a4a-uebergang), transform var(--a4a-uebergang), box-shadow var(--a4a-uebergang);
}
.a4a-inhalt .a4a-hauptknopf-katze .wp-block-button__link {
  background: var(--a4a-magenta-dunkel);
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link:hover,
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link:focus-visible {
  background: #7d0873;
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(51,51,51,.1), 0 20px 40px rgba(153,11,141,.22);
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link:focus-visible {
  outline: 3px solid var(--a4a-magenta);
  outline-offset: 3px;
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  background: currentColor;
  -webkit-mask: var(--a4a-symbol) center / contain no-repeat;
          mask: var(--a4a-symbol) center / contain no-repeat;
}
.a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link::after {
  content: var(--a4a-zusatz);
  font-family: var(--e-global-typography-text-font-family, "Source Sans 3"), "Source Sans 3", system-ui, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  opacity: .85;
}
/* Hund mit Schlappohren, Katze mit Spitzohren; Augen und Nase sind Aussparungen
   (gegenlaeufig gezeichnet, Fuellregel nonzero). */
.a4a-hauptknopf-hund {
  --a4a-zusatz: "Zu den Hunden →";
  --a4a-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 12H44C48 12 50 16 50 22V38C50 50 42 58 32 58C22 58 14 50 14 38V22C14 16 16 12 20 12ZM20 12L20 30C20 38 18 44 14 44C10 44 6 40 6 32C6 20 12 12 20 12ZM44 12C52 12 58 20 58 32C58 40 54 44 50 44C46 44 44 38 44 30ZM27.5 32A3.5 3.5 0 1 0 20.5 32A3.5 3.5 0 1 0 27.5 32ZM43.5 32A3.5 3.5 0 1 0 36.5 32A3.5 3.5 0 1 0 43.5 32ZM27 44C27 48 30 50 32 50C34 50 37 48 37 44Z'/%3E%3C/svg%3E");
}
.a4a-hauptknopf-katze {
  --a4a-zusatz: "Zu den Katzen →";
  --a4a-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 6L24 20H40L54 6V34C54 48 44 58 32 58C20 58 10 48 10 34ZM26.5 36A3.5 3.5 0 1 0 19.5 36A3.5 3.5 0 1 0 26.5 36ZM44.5 36A3.5 3.5 0 1 0 37.5 36A3.5 3.5 0 1 0 44.5 36ZM29 44L32 48L35 44Z'/%3E%3C/svg%3E");
}
@media (max-width: 559px) {
  .a4a-inhalt .wp-block-buttons.a4a-hauptknoepfe {
    grid-template-columns: minmax(0, 1fr);
    gap: .75rem;
  }
  .a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1rem;
    row-gap: .1rem;
    justify-items: start;
    min-height: 0;
    padding: 1.1rem 1.25rem;
    text-align: left;
  }
  .a4a-inhalt .a4a-hauptknoepfe .wp-block-button__link::before {
    grid-row: 1 / span 2;
    width: 2.9rem;
    height: 2.9rem;
    align-self: center;
  }
}

/* --- Hero der Startseite: Hunde-Kachel | Titelbild | Katzen-Kachel ------------
 * Gruppe .a4a-hero mit Bild- und Knopf-Block (seiten-neu-aufbauen.mjs). Der
 * Knopf-Block loest sich per display:contents auf, damit seine zwei Knoepfe
 * selbst Rasterzellen links und rechts vom Bild werden. Das Bild ist nur
 * 831 px breit - die mittlere Spalte bleibt darunter, damit es scharf bleibt.
 * Bis 1100px: Bild oben, Kacheln nebeneinander darunter; bis 559px untereinander. */

.a4a-inhalt > .wp-block-group.a4a-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-areas: "hund bild katze";
  gap: 1rem;
  align-items: stretch;
  max-width: none;
  margin: 1.5rem 0 2.75rem;
}
.a4a-inhalt .a4a-hero > * {
  margin: 0;
}
.a4a-inhalt .a4a-hero > .wp-block-buttons.a4a-hauptknoepfe {
  display: contents;
}
.a4a-inhalt .a4a-hero .a4a-hauptknopf-hund  { grid-area: hund; }
.a4a-inhalt .a4a-hero .a4a-hauptknopf-katze { grid-area: katze; }
.a4a-inhalt .a4a-hero > .wp-block-image {
  grid-area: bild;
  max-width: 831px;
  justify-self: center;
}
.a4a-inhalt .a4a-hero > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: var(--a4a-radius);
}
.a4a-inhalt .a4a-hero .a4a-hauptknoepfe .wp-block-button__link {
  height: 100%;
  min-height: 12rem;
  font-size: clamp(1.1rem, .6rem + 1.1vw, 1.55rem);
  hyphens: auto;
}
@media (max-width: 1100px) {
  .a4a-inhalt > .wp-block-group.a4a-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "bild bild" "hund katze";
  }
  /* volle Breite, damit Bild und Kacheln an derselben Kante stehen
     (hoechstens ~14 % ueber der Bildgroesse) */
  .a4a-inhalt .a4a-hero > .wp-block-image {
    max-width: none;
    justify-self: stretch;
  }
  .a4a-inhalt .a4a-hero .a4a-hauptknoepfe .wp-block-button__link {
    min-height: 9rem;
  }
}
@media (max-width: 559px) {
  .a4a-inhalt > .wp-block-group.a4a-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bild" "hund" "katze";
    gap: .75rem;
  }
  .a4a-inhalt .a4a-hero .a4a-hauptknoepfe .wp-block-button__link {
    min-height: 0;
    font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem);
  }
}

/* --- Partnerkarten (Startseite) --------------------------------------------------
 * Spaltenzeilen .a4a-partner (seiten-neu-aufbauen.mjs, partnerKarten()): jede
 * Spalte = Link-Ueberschrift + Logo. Das Logo sitzt in einem Feld fester Hoehe,
 * egal ob das Original ein schmales Banner oder ein hohes Plakat ist; der Name
 * steht darunter. Die ganze Karte ist klickbar: das ::after des
 * Ueberschrift-Links deckt sie ab. Selektoren mit .wp-block-columns.a4a-partner,
 * damit sie die allgemeinen Spalten-Bildregeln (auch die mobilen) schlagen. */

.a4a-inhalt .wp-block-columns.a4a-partner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.15rem;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  box-shadow: var(--a4a-schatten);
  transition: transform var(--a4a-uebergang), box-shadow var(--a4a-uebergang);
}
.a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column:hover,
.a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--a4a-schatten-hoch);
}
.a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column:has(a:focus-visible) {
  outline: 3px solid var(--a4a-magenta);
  outline-offset: 3px;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-image {
  order: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.5rem;
  margin: 0 0 1rem;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading a {
  color: var(--a4a-anthrazit);
  text-decoration: none;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading a:focus-visible {
  outline: none;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading::after {
  content: "Website besuchen ↗";
  display: block;
  margin-top: .35rem;
  font-family: var(--e-global-typography-text-font-family, "Source Sans 3"), "Source Sans 3", system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--a4a-magenta);
}
.a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column:hover .wp-block-heading a {
  color: var(--a4a-magenta-dunkel);
}
@media (max-width: 781px) {
  .a4a-inhalt .wp-block-columns.a4a-partner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .75rem 0;
  }
  .a4a-inhalt .wp-block-columns.a4a-partner > .wp-block-column {
    padding: .8rem .75rem .9rem;
  }
  .a4a-inhalt .wp-block-columns.a4a-partner .wp-block-image {
    height: 6.5rem;
    margin-bottom: .75rem;
  }
  .a4a-inhalt .wp-block-columns.a4a-partner .wp-block-heading {
    font-size: .95rem;
  }
}

/* --- Zitat, Trenner ------------------------------------------------------------- */

.a4a-inhalt .wp-block-quote {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--a4a-magenta);
  border-radius: 0 var(--a4a-radius-klein) var(--a4a-radius-klein) 0;
  background: var(--a4a-magenta-hell);
  font-style: italic;
}
.a4a-inhalt .wp-block-quote p:last-child { margin-bottom: 0; }
/* Quelle ("Zitat-Quelle" im Editor): aufrecht, kleiner, mit Gedankenstrich */
.a4a-inhalt .wp-block-quote cite {
  display: block;
  margin-top: .7rem;
  font-size: .95rem;
  font-style: normal;
  font-weight: 600;
  color: var(--a4a-magenta-dunkel);
}
.a4a-inhalt .wp-block-quote cite::before { content: "— "; }

.a4a-inhalt .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--a4a-linie);
  margin: 2.4rem 0;
}

/* --- Unterseiten als Kacheln ([a4a_unterseiten]) --------------------------------- */

.a4a-unterseiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.a4a-unterseiten__eintrag { margin: 0; }

/* Doppelte Klasse mit Absicht: Das Theme unterstreicht Links mit
   ".page-content a" - das wiegt schwerer als eine einzelne Klasse. */
.a4a-inhalt .a4a-unterseiten__link,
.a4a-inhalt .a4a-unterseiten__link:hover {
  text-decoration: none;
}

.a4a-unterseiten__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform var(--a4a-uebergang), box-shadow var(--a4a-uebergang), border-color var(--a4a-uebergang);
}
.a4a-unterseiten__link:hover,
.a4a-unterseiten__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--a4a-schatten-hoch);
  border-color: transparent;
}

.a4a-unterseiten__bild {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--a4a-magenta-hell);
}
.a4a-unterseiten__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.a4a-unterseiten__platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2.4rem;
  opacity: .5;
}

.a4a-unterseiten__text {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem 1.15rem 1.2rem;
}
.a4a-unterseiten__titel {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--a4a-magenta-dunkel);
}
.a4a-unterseiten__kurz {
  font-size: .93rem;
  line-height: 1.5;
  color: var(--a4a-grau);
}

/* --- Aktuelles ([a4a_beitraege], inhaltsseiten.php) ------------------------------- */

.a4a-beitraege__meta {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--a4a-grau);
}

/* Kategorie-Reiter ueber der Liste */
.a4a-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.4rem 0 0;
}
/* :not() hebt die Gewichtung auf die der allgemeinen Link-Regel
   (.a4a-inhalt a:not(...):not(...)), die sonst unterstreicht. */
.a4a-inhalt .a4a-reiter a:not(.a4a-unterseiten__link) {
  padding: .4rem .9rem;
  border: 1px solid var(--a4a-linie);
  border-radius: 999px;
  background: var(--a4a-karte);
  color: var(--a4a-anthrazit);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.a4a-inhalt .a4a-reiter a:not(.a4a-unterseiten__link):hover { border-color: var(--a4a-magenta); color: var(--a4a-magenta-dunkel); }
.a4a-inhalt .a4a-reiter a[aria-current="page"]:not(.a4a-unterseiten__link) {
  background: var(--a4a-magenta);
  border-color: var(--a4a-magenta);
  color: #fff;
}
.a4a-blaettern {
  display: flex;
  justify-content: space-between;
  margin-top: 1.6rem;
}

/* Einzelner Beitrag: Datum/Kategorie oben, Rueckweg unten */
.a4a-inhalt .a4a-beitrag-meta {
  margin: 0 0 1.2rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--a4a-grau);
}
.a4a-inhalt .a4a-beitrag-zurueck {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--a4a-linie);
  font-weight: 600;
}

/* --- Downloads (Datei-Block): Karte mit PDF-Kennzeichen und Knopf ------------------- */

.a4a-inhalt .wp-block-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .6rem 0;
  padding: .85rem 1rem .85rem 1.1rem;
  font-size: 1rem; /* WordPress setzt Dateibloecke auf .8em */
  background: var(--a4a-karte);
  border: 1px solid var(--a4a-linie);
  border-radius: var(--a4a-radius);
  box-shadow: var(--a4a-schatten);
}
.a4a-inhalt .wp-block-file > a:not(.wp-block-file__button) {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--a4a-anthrazit);
  font-weight: 700;
  text-decoration: none;
}
.a4a-inhalt .wp-block-file > a:not(.wp-block-file__button)::before {
  content: "PDF";
  flex: none;
  padding: .3rem .45rem;
  border-radius: 6px;
  background: var(--a4a-magenta-hell);
  color: var(--a4a-magenta-dunkel);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.a4a-inhalt .wp-block-file > a:not(.wp-block-file__button):hover { color: var(--a4a-magenta-dunkel); }
/* a.wp-block-file__button: Gewichtung der allgemeinen Link-Regel, die sonst
   die Schrift magenta auf magenta faerbt und unterstreicht. */
.a4a-inhalt .wp-block-file a.wp-block-file__button {
  flex: none;
  margin: 0;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--a4a-magenta);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.a4a-inhalt .wp-block-file a.wp-block-file__button:hover { background: var(--a4a-magenta-dunkel); color: #fff; }
@media (max-width: 480px) {
  .a4a-inhalt .wp-block-file { flex-wrap: wrap; }
}

/* --- Kleine Bildschirme ------------------------------------------------------------ */

@media (max-width: 781px) {
  /* Gestapelte Spalten: ein Hochformat-Portraet ("Unser Team") fuellte sonst
     den ganzen Bildschirm, bevor der Name kam. */
  .a4a-inhalt .wp-block-column .wp-block-image img {
    max-height: 24rem;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  /* ...ausser in Reihen mit festem Bildformat - dort volle Breite */
  .a4a-inhalt .wp-block-column:has(> .wp-block-image + .wp-block-heading) .wp-block-image img {
    width: 100%;
    max-height: none;
  }
}

@media (max-width: 600px) {
  /* Der Seitenrand kommt jetzt fuer alle Seiten aus Abschnitt 18. */
  .a4a-inhalt { font-size: 1rem; }
  .a4a-inhalt h2 { margin-top: 1.9rem; }
  .a4a-inhalt .wp-block-columns { gap: 1.1rem; }
}

/* =========================================================================
   18. Schriften und gemeinsamer Seitenrahmen - fuer ALLE Seiten

   Vorher gab es drei Rahmen: Block-Seiten zentriert in 46rem, Elementor-
   Seiten 1180px, deren Titel aber 1140px (vom Theme), dazu Kontakt in einem
   eigenen 760px-Container. Der Seitentitel sprang von Seite zu Seite um
   gut 200px. Jetzt leitet sich alles aus --a4a-rahmen und --a4a-rand ab
   (Abschnitt 11): Kopf, Fuss, Titel und Inhalt beginnen auf derselben Linie.

   Mehrere Regeln tragen ein vorangestelltes "html body": Die Theme-Styles
   (reset.css, theme.css, header-footer.css) werden NACH diesem Stylesheet
   geladen und gewaennen bei gleicher Gewichtung.
   ========================================================================= */

/* --- Schriften: aus dem Elementor-Kit ------------------------------------ */

/* Die Schriften stehen im Kit (Website-Einstellungen > Globale Schriftarten):
   Ueberschriften Nunito, Fliesstext Source Sans 3. Dort griffen sie aber nur
   in Elementor-Bausteinen, die ausdruecklich darauf verweisen - Theme und
   Block-Seiten liefen in der Systemschrift. Die Regeln hier lesen die
   Kit-Variablen: Wer die Schrift im Kit aendert, aendert sie ueberall.
   Die Schriftdateien liegen lokal (elementor_local_google_fonts). */

html body,
html body :is(button, input, select, textarea) {
  font-family: var(--e-global-typography-text-font-family, "Source Sans 3"), "Source Sans 3",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html body :is(h1, h2, h3, h4, h5, h6, .entry-title, .elementor-heading-title,
              .a4a-karte__name, .a4a-unterseiten__titel, .a4a-beitragsliste__titel,
              .a4a-aktion__titel) {
  font-family: var(--e-global-typography-primary-font-family, "Nunito"), "Nunito",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
}

html body :is(h1, .entry-title) {
  font-weight: var(--e-global-typography-primary-font-weight, 800);
}

/* Lange deutsche Woerter in grosser Schrift: "verhaltensauffaelligen" im
   Titel der Laborseite passte auf dem Handy nicht in die Zeile, die Seite
   liess sich seitwaerts wischen. Silbentrennung (lang="de"), und wo selbst die
   nicht reicht, ein Umbruch statt Ueberlauf. */
html body :is(h1, h2, h3, h4, .entry-title) {
  hyphens: auto;
  overflow-wrap: break-word;
}
html body :is(h2, h3, h4, h5, h6) {
  font-weight: var(--e-global-typography-secondary-font-weight, 700);
}

/* --- Rahmen: Block-Seiten und Beitraege ---------------------------------- */

/* Das Theme gibt .site-main je nach Fensterbreite 500/600/800/1140px -
   dadurch stand der Text bei 1000px Breite in 800px, daneben breite Leere. */
html body:not([class*=elementor-page-]) .site-main {
  max-width: var(--a4a-breite);
  margin-inline: auto;
  padding-inline: var(--a4a-rand);
}

/* --- Rahmen: Elementor-Seiten (Hunde, Katzen, Kontakt ...) --------------- */

/* Der Seitentitel des Themes steht dort ausserhalb des Elementor-Inhalts. */
html body[class*=elementor-page-] .site-main > .page-header {
  max-width: var(--a4a-breite);
  margin-inline: auto;
  padding-inline: var(--a4a-rand);
}

/* Titel ohne eigene Breite und ohne Innenabstand - die Kante setzt der Rahmen.
   theme.css gibt ".page-header .entry-title" ab 1200px "max-width: 1140px"
   und zentriert ihn: So stand der Titel 20px rechts vom Text. */
html body .page-header .entry-title {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Kopf und Fuss: dieselbe Rechnung. Abschnitt 11 setzt hier schon den
   Rahmen, theme.css ueberschrieb ihn aber ab 1200px mit 1140px und gab dem
   Kopf eigene 10px Innenabstand - das Logo stand 40px rechts vom Text. */
html body .site-header .header-inner,
html body .site-footer .footer-inner {
  max-width: var(--a4a-breite);
  margin-inline: auto;
  padding-inline: var(--a4a-rand);
}

/* Oberste Elementor-Container: Rand wie ueberall. Elementor setzt sonst 10px,
   der Inhalt stand auf mittleren Breiten 10px weiter aussen als der Titel. */
/* Nach POSITION, nicht nach Klasse: Die programmatisch angelegte Tier-Vorlage
   markiert auch ihre inneren Spalten als "e-parent" - eine Regel auf
   .e-parent traf sie mit, Galerie und Name standen 20px eingerueckt.
   Die Tierkacheln der Uebersicht sind eigene Elementor-Dokumente
   (.e-loop-item) und bleiben unberuehrt. */
html body .elementor:not(.e-loop-item) > .e-con {
  --padding-left: var(--a4a-rand);
  --padding-right: var(--a4a-rand);
}

/* Verschachtelte Container (die zwei Spalten oben im Tierprofil): kein
   seitlicher Rand - den Abstand zwischen den Spalten haelt die Spaltenluecke. */
html body .elementor:not(.e-loop-item) > .e-con .e-con:not(.e-loop-item .e-con) {
  --padding-left: 0px;
  --padding-right: 0px;
}

/* Kacheln der Uebersichten (Hunde, Katzen, Tier-Archiv): Elementors 10px
   Innenrand im Kachel-Dokument schob die erste Kachel hinter die Kante des
   Rahmens. Den Abstand zwischen den Kacheln haelt die Rasterluecke. */
html body .e-loop-item > .e-con {
  --padding-left: 0px;
  --padding-right: 0px;
}

/* Fliesstext in Elementor-Seiten in Lesebreite - vorher liefen die
   Einleitungen auf "Hunde" ueber die vollen 1180px, rund 180 Zeichen je Zeile. */
html body .page-content .elementor-widget-text-editor {
  max-width: var(--a4a-lesebreite);
}

/* Kontakt: Text und Formular in Lesebreite, an der Rahmenkante
   (Container-Klasse "a4a-lesespalte", gesetzt von elementor-titel-bereinigen.php). */
html body .e-con.a4a-lesespalte > .e-con-inner > .elementor-element,
html body .e-con.a4a-lesespalte > .elementor-element {
  width: 100%;
  max-width: var(--a4a-lesebreite);
}

/* Selbstauskunft: Abschnitte im Formular (HTML-Felder aus
   migration/selbstauskunft-formular.php). Erster Abschnitt ohne Abstand oben. */
html body .elementor-form .a4a-formular-abschnitt {
  margin: 1.6rem 0 .1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--a4a-linie);
  font-size: 1.2rem;
  color: var(--a4a-magenta-dunkel);
}
html body .elementor-form .elementor-field-group:first-child .a4a-formular-abschnitt {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
html body .elementor-form .a4a-formular-hinweis {
  margin: .35rem 0 0;
  font-size: .92rem;
  color: var(--a4a-grau);
}