/* Ergänzungen zu UIkit. Farben und Proportionen folgen der Masterseite
   tierheim.com (Grün #7fab16, Text #62615f, Inhaltsbreite 960 px).
   Schriften bewusst systemseitig - keine Google Fonts (DSGVO). */

:root {
  /* Farbset 1:1 aus dem Original-CSS der Altseite, nach Häufigkeit gewichtet.
     (192b1d24…css, 880 KB - ausgezählt, nicht geschätzt) */
  /* Palette 2026-08 (Olivgrün + Petrol + Karminrot). Die Grün-Variablen
     tragen jetzt Oliv-Töne, damit die ganze Seite ohne Einzelregeln umfärbt. */
  --th-gruen:       #8ea604;   /* Akzent, Links, Buttons  (Oliv)       */
  --th-gruen-dunkel:#6a7d03;   /* Hover, Rahmen           (Oliv dunkel)*/
  --th-gruen-hell:  #cdd98a;   /* Flächen, Karten-Oberkante (Oliv hell)*/
  --th-text:        #4a4948;   /* Fließtext, Überschriften             */
  --th-dunkel:      #3c4a4e;   /* dunkle Flächen, Fuß     (Petrol-dunkel)*/
  --th-grau:        #8a8482;   /* Meta, Hinweise                       */
  --th-grau-hell:   #cecece;   /* Rahmen, Trenner                      */
  --th-flaeche:     #f6f8f8;   /* helle Blockflächen                   */
  --th-flaeche-2:   #eef3f4;   /* zweite Blockfläche                   */
  --th-petrol:      #50808e;   /* zweite Akzentfarbe      (Petrol)     */
  --th-warnung:     #790000;   /* Fehlermeldungen in Formularen 20x */
  --th-hinweis:     #fffbcc;   /* Hinweisfläche                  8x */
}

body {
  font-family: "Source Sans Pro", "Trebuchet MS", system-ui, sans-serif;
  color: var(--th-text);
}

h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3 { color: var(--th-text); font-weight: 600; }
h1 { font-size: 1.9rem; line-height: 1.25; }
h2 { font-size: 1.4rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; }

a { color: var(--th-gruen); }
a:hover { color: #6a7d03; }

.th-kopf { border-bottom: 3px solid var(--th-gruen); background: #fff; }
.uk-logo { color: var(--th-text); font-weight: 700; }
.uk-logo .th-punkt { color: var(--th-gruen); }
.uk-navbar-nav > li > a { color: var(--th-text); font-size: .95rem; text-transform: none; }
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a { color: var(--th-gruen); }

.uk-button-primary { background: var(--th-gruen); }
.uk-button-primary:hover { background: #6a7d03; }
.uk-label { background: var(--th-gruen); }

/* Akzentstreifen läuft gerade aus - Rundung nur auf der Gegenseite,
   sonst biegt der Rand mit und wirkt dreidimensional. */
.th-akzent {
  border-left: 4px solid var(--th-gruen);
  border-radius: 0 6px 6px 0;
  background: var(--th-flaeche);
  padding: 1rem 1.25rem;
}

/* Einrichtungs-Karte: Akzentstreifen oben läuft gerade aus - obere Ecken
   eckig, sonst biegt der Rand in die Rundung (3D-Effekt). Regel gilt projektweit. */
.th-einrichtung { border-top: 3px solid var(--th-gruen-hell); border-radius: 0 0 6px 6px; }
.th-einrichtung .uk-card-title { font-size: 1.05rem; }

/* Sidebar wie auf der Masterseite */
.th-sidebar .uk-card { background: var(--th-flaeche); }
.th-sidebar h3 {
  font-size: 1rem; margin: 0 0 .5rem;
  padding-bottom: .4rem; border-bottom: 2px solid var(--th-gruen);
}
.th-sidebar ul { font-size: .92rem; }

/* Inhaltsbereich aus dem WordPress-Bestand */
.th-inhalt img { max-width: 100%; height: auto; }
.th-inhalt table { width: 100%; }
/* Breite Inhalte scrollen in sich selbst - die Seite darf nie schieben (390 px). */
.th-inhalt table,
.th-inhalt pre { display: block; overflow-x: auto; }

address { font-style: normal; }

.th-meta { color: var(--th-grau); font-size: .88rem; }

/* Zeitfalle im Meldeformular - für Menschen unsichtbar, für Bots ein Köder.
   Nicht display:none, das erkennen manche Bots. */
.th-falle { position: absolute; left: -9999px; height: 0; overflow: hidden; }


/* --- weitere Übernahmen aus dem Original-Farbset --- */
.uk-section-secondary { background: var(--th-dunkel); }
.uk-section-secondary,
.uk-section-secondary p { color: #e8e8e4; }
.uk-section-secondary h3 { color: #fff; }
.uk-section-secondary a { color: var(--th-gruen-hell); }

.uk-alert-danger { background: #fdf1f1; color: var(--th-warnung);
                   border-left: 4px solid var(--th-warnung); border-radius: 0 6px 6px 0; }
.uk-alert-warning { background: var(--th-hinweis); color: #6b5d00; }

.uk-breadcrumb > * > * { color: var(--th-grau); }
.uk-table th { color: var(--th-text); }
hr, .uk-hr { border-top-color: var(--th-grau-hell); }
.uk-card-default { border: 1px solid #e9e9e9; }
.uk-accordion-title { color: var(--th-text); font-size: 1.08rem; font-weight: 600; }
.uk-accordion-title:hover { color: var(--th-gruen-dunkel); }
.uk-legend { color: var(--th-text); }

/* Logo wie im Original: freigestellt im weißen Kopf, mit Höhenbegrenzung.
   Ohne max-height sprengt die PNG-Datei den Navigationsbalken. */
.uk-logo img { max-height: 52px; width: auto; }
.uk-navbar-item.uk-logo { padding-left: 0; }
@media (max-width: 639px) { .uk-logo img { max-height: 40px; } }

/* Iconset (assets/img/icons.svg) - currentColor, an die Textzeile angepasst */
.th-ic{width:1.05em;height:1.05em;vertical-align:-.16em;flex:none}
.th-ic-lg{width:1.6em;height:1.6em}
.uk-label .th-ic{width:.9em;height:.9em;vertical-align:-.08em}

/* ============ Ortsseiten-Design (aus den Mustern übernommen) ============ */
:root{ --gruen:var(--th-gruen); --gruen-d:var(--th-gruen-dunkel); --gruen-h:var(--th-gruen-hell);
       --gruen-bg:var(--th-flaeche); --linie:var(--th-linie); --meta:var(--th-grau); }

/* Hero einheitlich Petrol - gleiche Optik wie Bundesland/Kreis (Direktantwort + Fakten) */
.th-hero{background:linear-gradient(135deg,var(--th-petrol) 0%,#3d6470 100%);
         color:#fff;border-radius:8px;margin:.6rem 0 1.5rem;padding:1.7rem 1.8rem 1.5rem}
.th-hero h1{color:#fff;font-size:2rem;margin:0 0 14px}
.th-antwort{background:rgba(255,255,255,.14);border:none;border-left:4px solid #fff;
            border-radius:0 8px 8px 0;padding:14px 18px;max-width:840px}
.th-antwort p{margin:0;font-size:1.1rem;line-height:1.5;color:#fff}
.th-antwort strong{color:#fff}
.th-nah{display:inline-block;background:#fff;color:var(--th-petrol);font-weight:700;border-radius:7px;padding:2px 10px}
.th-fakten{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.th-fakt{background:rgba(255,255,255,.14);border:none;border-radius:6px;padding:.55rem .9rem;font-size:.95rem;color:rgba(255,255,255,.92)}
.th-fakt b{display:block;font-size:1.5rem;color:#fff;line-height:1.1}

/* Klebende Sprungnavigation */
.th-jump{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--th-linie);
         margin:0 -20px 24px;padding:0 8px}
.th-jump-inner{display:flex;gap:2px;overflow-x:auto}
.th-jump a{white-space:nowrap;padding:12px 12px;font-size:.9rem;font-weight:600;color:var(--th-text);
           border-bottom:3px solid transparent}
.th-jump a:hover{color:var(--th-gruen-dunkel);border-bottom-color:var(--th-gruen-hell);text-decoration:none}

/* Abschnitts-Überschriften mit Icon */
.th-inhalt h2, .th-ort h2{font-size:1.5rem;margin:1.8rem 0 .4rem;display:flex;align-items:center;gap:10px}
.th-ort h2 .th-ic-h{width:26px;height:26px;color:var(--th-gruen-dunkel);flex:none}
/* Anker landen unter der klebenden Sprungnav: genug Abstand. */
.th-ort section[id]{scroll-margin-top:70px}

/* Sidebar "Auf einen Blick" */
.th-blick .kv{display:flex;justify-content:space-between;font-size:.95rem;padding:6px 0;
              border-bottom:1px dashed var(--th-linie)}
.th-blick .kv:last-child{border:0}
.th-blick .kv b{color:var(--th-gruen-dunkel)}

/* ===== Karten aus dem Muster (th-Präfix) ===== */
.th-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.th-card{border:1px solid var(--th-linie);border-top:3px solid var(--th-gruen-hell);border-radius:0 0 10px 10px;padding:16px 18px;background:#fff}
.th-card.th-top1{border-top-color:var(--th-gruen);background:var(--th-flaeche)}
.th-card h3{font-size:17px;margin:0 0 8px}
.th-card .th-adr{color:var(--th-grau);font-size:15px;font-style:normal;margin:0 0 8px}
.th-card .th-row{display:flex;align-items:center;gap:8px;font-size:15px;margin:3px 0}
.th-card .th-row svg{width:16px;height:16px;fill:var(--th-gruen-dunkel);flex:none}
.th-badge{display:inline-block;background:var(--th-gruen);color:#fff;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:20px;margin-left:6px}
.th-badge.km{background:var(--th-petrol);color:#fff}
.th-oz{background:var(--th-flaeche);border-radius:7px;padding:7px 10px;font-size:14px;margin-top:8px;color:var(--th-dunkel)}
.th-tiere{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.th-tier{display:block;border:1px solid var(--th-linie);border-radius:10px;overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .2s ease,transform .2s ease}
.th-tier:hover{box-shadow:0 4px 14px rgba(60,74,78,.16);transform:translateY(-2px)}
.th-tier:hover h4{color:var(--th-gruen-dunkel)}
.th-tier .th-foto{height:110px;background:var(--th-flaeche);background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;color:var(--th-gruen-hell);font-size:36px}
.th-tier .th-foto-leer{font-size:44px}
.th-tier .th-in{padding:10px 12px}
.th-tier .th-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--th-rot)}
.th-tier .th-lab.g{color:var(--th-gruen-dunkel)}
.th-tier h4{margin:2px 0;font-size:15px}
.th-tier p{margin:0;font-size:13px;color:var(--th-grau)}
.th-hinweis{border-left:4px solid var(--blau);border-radius:0 8px 8px 0;background:var(--blau-bg);padding:16px 20px;margin:0 0 14px}
.th-hinweis b{color:var(--blau)}
.th-cta{background:var(--th-gruen);color:#fff;border-radius:12px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.th-cta h3{color:#fff;margin:0 0 4px;font-size:20px}
.th-cta p{margin:0;color:#eef6dc}
.btn{display:inline-block;background:#fff;color:var(--th-gruen-dunkel);font-weight:700;padding:12px 22px;border-radius:8px;white-space:nowrap}
.btn.gruen{background:var(--th-gruen);color:#fff;border:2px solid var(--th-gruen)}

/* ============ Aufwärmung: Bilder & Wärme ============ */
/* Hero zweispaltig mit Foto */
.th-hero-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media(min-width:720px){.th-hero-grid{grid-template-columns:1.4fr 1fr}}
.th-hero-bild{border-radius:14px;overflow:hidden;box-shadow:0 6px 24px rgba(71,69,56,.12);aspect-ratio:3/2}
.th-hero-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:719px){.th-hero-bild{aspect-ratio:16/9}}

/* Adoptieren-Teaser mit Fotos */
.th-adopt{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 4px}
@media(max-width:560px){.th-adopt{grid-template-columns:1fr}}
.th-adopt a{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/10;text-decoration:none}
.th-adopt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.th-adopt a:hover img{transform:scale(1.05)}
.th-adopt span{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;font-size:1.15rem;font-weight:700;
                background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* Tiersuche-Panel (einladend, auch wenn leer) */
.th-suche{display:grid;grid-template-columns:1fr;gap:0;border-radius:14px;overflow:hidden;
          border:1px solid var(--th-linie);margin:6px 0}
@media(min-width:640px){.th-suche{grid-template-columns:200px 1fr}}
.th-suche-bild{background:var(--th-gruen-hell) center/cover;min-height:150px;display:flex;align-items:center;justify-content:center}
.th-suche-bild svg{width:64px;height:64px;color:#fff;opacity:.9}
.th-suche-text{padding:22px 24px;background:linear-gradient(135deg,#eef2da,#fff)}
.th-suche-text h3{margin:0 0 6px;font-size:1.25rem}
.th-suche-text p{margin:0 0 14px;color:var(--th-text)}

/* Longtail-Fließtext */
.th-fliess{margin:6px 0 4px;max-width:820px}
.th-fliess p{margin:0 0 12px;line-height:1.65}

/* ---------------------------------------------------- Karte (Leaflet + OSM) */
/* Klick-zum-Laden: der Consent-Layer deckt die Karte, bis der Nutzer klickt. */
.th-map-wrap { position: relative; margin: 1rem 0 1.5rem; }
.th-map {
  height: 380px; width: 100%;
  border: 1px solid #e2e2dd; border-radius: 6px;
  background: #eef1ea;
}
.th-map-consent {
  position: absolute; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background: #eef1ea; border: 1px solid #e2e2dd; border-radius: 6px;
}
.th-map-consent > div { max-width: 30rem; }
.th-map-consent .th-ic-lg { color: var(--th-gruen-dunkel); width: 40px; height: 40px; }
.th-map-consent p { margin: .5rem 0 1rem; color: var(--th-text); font-size: .92rem; }
.leaflet-popup-content { font-size: .9rem; line-height: 1.35; }
.leaflet-container { border-radius: 6px; font: inherit; }
@media (max-width: 640px) { .th-map { height: 300px; } }

/* ============================================================ Palette (neu) */
/* Muster fuer Uebersichtsseiten (Bundesland/Kreis). Scope .th-uebersicht,
   damit Ortsseiten vorerst unberuehrt bleiben (Palette-Entscheidung offen). */
:root {
  --th-petrol2: #50808e;   /* Leitfarbe Uebersicht */
  --th-oliv:    #8ea604;   /* Primaer-Alternative  */
  --th-rot:     #b3001b;   /* Signal               */
  --th-taupe:   #ad9b9a;   /* neutrale Flaeche      */
  --th-hell:    #e8f1f2;   /* heller Hintergrund    */
}

.th-uebersicht a { color: var(--th-petrol2); }
.th-uebersicht h2 {
  border-bottom: 2px solid var(--th-petrol2);
  padding-bottom: .3rem; margin-top: 2rem;
}

/* Hero */
.th-bl-hero {
  background: linear-gradient(135deg, var(--th-petrol2) 0%, #3d6470 100%);
  color: #fff; border-radius: 8px;
  padding: 1.8rem 1.8rem 1.5rem; margin: .6rem 0 1.5rem;
}
.th-bl-hero h1 { color: #fff; margin: 0 0 .5rem; }
.th-bl-lead { color: rgba(255,255,255,.94); max-width: 46rem; margin: 0 0 1.2rem; }
.th-bl-lead strong { color: #fff; }
.th-bl-fakten { display: flex; flex-wrap: wrap; gap: .7rem; }
.th-bl-fakt {
  background: rgba(255,255,255,.14); border-radius: 6px;
  padding: .6rem .9rem; min-width: 8.5rem; flex: 1 1 8.5rem;
}
.th-bl-fakt strong { display: block; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.th-bl-fakt span { font-size: .82rem; color: rgba(255,255,255,.9); }

.th-bl-hint { color: #6b6a66; font-size: .92rem; margin-top: -.4rem; }

/* Kreis-Karten (Akzentkante links, eckig - flaches Design) */
.th-kreis-grid {
  display: grid; gap: .7rem; margin: 1rem 0 .5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.th-kreis-card {
  background: var(--th-hell); border: 1px solid #dbe6e8;
  border-left: 4px solid var(--th-petrol2);
  border-radius: 0 6px 6px 0; padding: .7rem .9rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.th-kreis-name { font-weight: 600; color: #333; }
.th-kreis-zahl { color: var(--th-petrol2); font-size: .95rem; }
.th-kreis-zahl strong { font-size: 1.05rem; }
.th-kreis-meta { color: #7a7a76; font-size: .8rem; }

/* Ortslisten in Spalten */
.th-ort-spalten { columns: 2; }
@media (min-width: 640px) { .th-ort-spalten { columns: 3; } }
.th-ort-spalten-eng { columns: 2; }
@media (min-width: 640px) { .th-ort-spalten-eng { columns: 4; } }
.th-ort-spalten ul { margin: 0; }
.th-ort-spalten li { break-inside: avoid; }

/* Uebersicht-Scope: Buttons + Karten-Pin auf die Leitfarbe Petrol */
.th-uebersicht .uk-button-primary { background: var(--th-petrol2); }
.th-uebersicht .uk-button-primary:hover { background: #3d6470; }
.th-uebersicht .th-map-consent .th-ic-lg { color: var(--th-petrol2); }

/* Staedte-mit-Tierheim-Kacheln (Uebersichtsseiten) */
.th-stadt-grid {
  display: grid; gap: .7rem; margin: 1rem 0 .5rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}
.th-stadt-card {
  display: flex; flex-direction: column; gap: .1rem;
  background: #fff; border: 1px solid #dbe6e8;
  border-left: 4px solid var(--th-gruen);   /* Stadt = Oliv (Ebene Stadt) */
  border-radius: 0 6px 6px 0; padding: .65rem .85rem;
  text-decoration: none;
}
.th-stadt-card:hover { border-color: var(--th-petrol2); background: var(--th-hell); }
.th-stadt-name { font-weight: 600; color: var(--th-gruen-dunkel); font-size: 1.02rem; }
.th-stadt-card:hover .th-stadt-name { color: var(--th-petrol2); }
.th-stadt-heime { color: #55605f; font-size: .88rem; }
.th-stadt-ew { color: #8a8a86; font-size: .78rem; }

/* h2 mit Icon im Uebersicht-Scope (FAQ) sauber ausrichten */
.th-uebersicht h2 { display: flex; align-items: center; gap: 8px; }
.th-uebersicht h2 .th-ic-h { width: 24px; height: 24px; color: var(--th-petrol2); flex: none; }

/* ---------------------------------------------- Tier-Hubs: Rassen + Ratgeber */
/* Rasse-Verzeichnis als kompakte Chips (Shortdial) */
.th-rassen { margin: 1.5rem 0; }
.th-rassen h2 { margin-bottom: .6rem; }
.th-rasse-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.th-rasse {
  display: inline-block; padding: .38rem .8rem;
  background: var(--th-flaeche); border: 1px solid #e0e6d8;
  border-radius: 20px; font-size: .92rem; color: var(--th-gruen-dunkel);
  text-decoration: none; line-height: 1.2;
}
.th-rasse:hover { background: var(--th-petrol); border-color: var(--th-petrol); color: #fff; }

/* "Rund um den Hund" - Ratgeber-Karten (Nutzerfuehrung) */
.th-ratgeber-grid {
  display: grid; gap: .7rem; margin: 1rem 0 .5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.th-ratgeber-card {
  display: flex; align-items: center; min-height: 3.1rem;
  padding: .7rem .95rem; background: #fff;
  border: 1px solid #e2e6ea; border-left: 4px solid var(--th-gruen);
  border-radius: 0 6px 6px 0; font-weight: 600; color: var(--th-gruen-dunkel);
  text-decoration: none; line-height: 1.25;
}
.th-ratgeber-card:hover { border-left-color: var(--th-petrol); color: var(--th-petrol); background: var(--th-hell); }

/* ---------------------------------------------- Ratgeber-Elemente (Hub-Texte) */
/* Tabellen */
.th-tabelle { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.th-tabelle caption { text-align: left; font-weight: 600; color: var(--th-text); margin-bottom: .4rem; }
.th-tabelle th, .th-tabelle td { padding: .6rem .8rem; border-bottom: 1px solid #e6e6e2; text-align: left; vertical-align: top; }
.th-tabelle thead th { background: var(--th-petrol); color: #fff; border-bottom: none; }
.th-tabelle tbody tr:nth-child(even) { background: var(--th-flaeche); }
.th-tabelle td strong { color: var(--th-gruen-dunkel); }

/* Info-/Tipp-Box */
.th-tipp {
  background: var(--th-hell); border: 1px solid #dbe6e8;
  border-left: 4px solid var(--th-petrol); border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem; margin: 1.2rem 0;
}
.th-tipp h3 { margin: 0 0 .5rem; display: flex; align-items: center; gap: 8px; color: var(--th-petrol); font-size: 1.08rem; }
.th-tipp h3 .th-ic { width: 22px; height: 22px; }
.th-tipp ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.th-tipp li { margin: .25rem 0; }

/* Nummerierte Prozess-Schritte */
.th-schritte { list-style: none; counter-reset: s; padding: 0; margin: 1.2rem 0; }
.th-schritte > li { counter-increment: s; position: relative; padding: .2rem 0 1rem 3rem; }
.th-schritte > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--th-gruen); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.th-schritte > li:not(:last-child)::after {
  content: ""; position: absolute; left: .97rem; top: 2rem; bottom: 0; width: 2px; background: #e0e6d8;
}
.th-schritte b { color: var(--th-gruen-dunkel); }

/* Bilder in Ratgeber-/Hub-Texten */
.th-bild { display: block; width: 100%; height: auto; border-radius: 8px; margin: 1.2rem 0; }
.th-bild-figur { margin: 1.2rem 0; }
.th-bild-figur figcaption { font-size: .85rem; color: var(--th-grau); margin-top: .35rem; }
@media (min-width: 640px) {
  .th-bild-rechts { float: right; width: 40%; max-width: 340px; margin: .2rem 0 1rem 1.4rem; }
}

/* Lead-Bild zentriert, begrenzte Breite (kein Upscaling bei quadratischen Motiven) */
.th-bild-lead { display: block; width: 100%; max-width: 520px; height: auto;
                border-radius: 8px; margin: 1.2rem auto; }

/* -------------------------------------------------- Rasse-Portrait (Steckbrief) */
.th-portrait { display: grid; gap: 1.5rem; margin: 1rem 0 1.5rem; }
@media (min-width: 720px) { .th-portrait { grid-template-columns: 1fr 300px; align-items: start; } }
.th-portrait-bild img { width: 100%; height: auto; border-radius: 8px; }

/* Steckbrief-Box */
.th-steckbrief { width: 100%; border-collapse: collapse; background: var(--th-flaeche);
  border: 1px solid #e2e6ea; border-radius: 8px; overflow: hidden; font-size: .95rem; }
.th-steckbrief caption { caption-side: top; background: var(--th-petrol); color: #fff;
  font-weight: 700; padding: .6rem .9rem; text-align: left; }
.th-steckbrief th, .th-steckbrief td { padding: .5rem .9rem; border-bottom: 1px solid #e6e6e2; text-align: left; }
.th-steckbrief th { color: var(--th-grau); font-weight: 600; width: 42%; vertical-align: top; }
.th-steckbrief td { color: var(--th-text); }
.th-steckbrief tr:last-child th, .th-steckbrief tr:last-child td { border-bottom: none; }

/* Eignungs-Ampel */
.th-ampel { list-style: none; padding: 0; margin: 1rem 0 1.5rem; }
.th-ampel li { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center;
  gap: .8rem; padding: .35rem 0; }
.th-ampel-label { color: var(--th-text); }
.th-ampel-bar { height: 8px; border-radius: 5px; background: #e6e6e2; position: relative; }
.th-ampel-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.th-ampel-bar.hoch   i { width: 90%; background: var(--th-petrol); }
.th-ampel-bar.mittel i { width: 55%; background: var(--th-petrol); }
.th-ampel-bar.gering i { width: 25%; background: var(--th-petrol); }
.th-ampel-wert { font-size: .85rem; color: var(--th-grau); white-space: nowrap; }

/* Charakter-Chips (nutzt .th-rasse-grid/.th-rasse-Optik, nicht klickbar) */
.th-eigenschaft { display: inline-block; padding: .32rem .75rem; background: var(--th-hell);
  border: 1px solid #dbe6e8; border-radius: 20px; font-size: .9rem; color: var(--th-petrol); }

/* Adoptions-CTA */
.th-cta { background: linear-gradient(135deg, var(--th-petrol) 0%, #3d6470 100%);
  color: #fff; border-radius: 8px; padding: 1.4rem 1.6rem; margin: 1.5rem 0; }
.th-cta h2 { color: #fff; margin: 0 0 .5rem; }
.th-cta p { color: rgba(255,255,255,.92); margin: 0 0 1rem; }
.th-cta .uk-button-primary { background: #fff; color: var(--th-petrol); }
.th-cta .uk-button-primary:hover { background: var(--th-hell); }

/* Pro & Contra (Rasseseiten) */
.th-procontra { display: grid; gap: 1rem; margin: 1.2rem 0 1.5rem; }
@media (min-width: 640px) { .th-procontra { grid-template-columns: 1fr 1fr; } }
.th-pro, .th-contra { padding: 1rem 1.2rem; border: 1px solid #e2e6ea; border-radius: 0 8px 8px 0; }
.th-pro { background: #f2f6e8; border-left: 4px solid var(--th-gruen); }
.th-contra { background: #fbeef0; border-left: 4px solid var(--th-rot); }
.th-pro h3, .th-contra h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.th-pro h3 { color: var(--th-gruen-dunkel); }
.th-contra h3 { color: var(--th-rot); }
.th-procontra ul { margin: 0; padding-left: 1.1rem; }
.th-procontra li { margin: .28rem 0; }

/* Ort-Autovervollstaendigung (/tier-melden/) */
.th-ac { position: relative; }
.th-ac-liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 3px 0 0; padding: 4px 0; list-style: none; background: #fff;
  border: 1px solid var(--th-linie, #d8dcdc); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto;
}
.th-ac-liste li { padding: 7px 12px; cursor: pointer; font-size: .95rem; }
.th-ac-liste li span { color: var(--th-grau, #6b7280); font-size: .85rem; }
.th-ac-liste li:hover, .th-ac-liste li.th-ac-aktiv { background: var(--th-flaeche, #eef3f4); }

/* Redaktions-Backend Meldungen */
.th-verw-tab { width: 100%; border-collapse: collapse; font-size: .92rem; }
.th-verw-tab th, .th-verw-tab td { padding: .5rem .6rem; border-bottom: 1px solid var(--th-linie, #e3e6e6); vertical-align: top; text-align: left; }
.th-verw-tab tr:hover td { background: var(--th-flaeche, #f4f7f7); }
.th-badge-status { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: .8rem; font-weight: 700; }
.th-st-aktiv { background: #e5f0d8; color: #4a6a12; }
.th-st-unbestaetigt { background: #fdeecf; color: #8a5a00; }
.th-st-geschlossen, .th-st-abgelaufen { background: #eceff0; color: #6b7280; }

/* Statistik-Dashboard */
.th-stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 1rem 0 1.5rem; }
.th-stat-kachel { background: var(--th-flaeche, #f6f8f8); border-radius: 8px; padding: .8rem 1rem; text-align: center; }
.th-stat-kachel b { display: block; font-size: 1.7rem; color: var(--th-petrol, #50808e); line-height: 1.1; }
.th-stat-kachel { color: var(--th-grau, #6b7280); font-size: .85rem; }
.th-stat-diagramm { background: var(--th-flaeche, #f6f8f8); border-radius: 8px; padding: .8rem; margin-bottom: 1rem; }
.th-stat-tab td, .th-stat-tab th { padding: .35rem .5rem; }
.th-stat-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.th-stat-bar { display: block; height: 8px; background: #e3e8e9; border-radius: 5px; overflow: hidden; min-width: 60px; }
.th-stat-bar > span { display: block; height: 100%; background: var(--th-petrol, #50808e); border-radius: 5px; }

/* Startseite: Tierart-Karten, Karte, Adoption, Schritte */
.th-tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 1rem 0 2.2rem; }
.th-tier-card { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 3px 12px rgba(60,74,78,.14); }
.th-tier-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.th-tier-card:hover img { transform: scale(1.06); }
.th-tier-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .85rem; color: #fff; font-weight: 700; font-size: 1.15rem; background: linear-gradient(transparent, rgba(0,0,0,.62)); }

.th-karte-sektion { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin: 1rem 0 2.2rem; }
@media (min-width: 720px) { .th-karte-sektion { grid-template-columns: 340px 1fr; } }
.th-karte-bild { background: var(--th-flaeche, #f6f8f8); border-radius: 12px; padding: 1.2rem; }
.th-karte-bild img { width: 100%; height: auto; display: block; }

.th-adopt-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; margin: 1rem 0 2.2rem; }
@media (min-width: 720px) { .th-adopt-grid { grid-template-columns: 1fr 1fr; } }
.th-adopt-bild img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 4px 16px rgba(60,74,78,.14); }


/* Startseite: Ort-Schnellsuche in der Kartensektion */
.th-karte-h { margin: 0 0 .6rem; }
.th-ort-suche { margin: 1rem 0 .6rem; max-width: 460px; }

/* "Tier melden" hebt sich als eigene Aktion ab - Karminrot statt Grün */
.uk-button.th-btn-melden { background: var(--th-rot, #b3001b); color: #fff; }
.uk-button.th-btn-melden:hover { background: #8a0016; }

/* Unabhaengigkeits-Hinweis: sichtbar oben, im Quelltext aber ganz hinten.
   body als Flex-Spalte, die Leiste per order:-1 an den visuellen Anfang. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.th-hinweisleiste { order: -1; background: var(--th-flaeche-2, #eef3f4);
  border-bottom: 1px solid #dbe2e3; color: #5c6162; }
.th-hinweisleiste p { margin: 0; padding: 6px 0; font-size: 12.5px; line-height: 1.45;
  text-align: center; }
.th-hinweisleiste strong { color: #444; }

/* "Tier melden" im Menü in Signal-Rot (wie die Buttons) */
.uk-navbar-nav > li > a.th-nav-melden,
.uk-nav > li > a.th-nav-melden { color: var(--th-rot, #b3001b); font-weight: 700; }
.uk-navbar-nav > li > a.th-nav-melden:hover,
.uk-nav > li > a.th-nav-melden:hover { color: #8a0016; }

/* Aushang-Vorschau auf dem Meldeformular */
.th-aushang-vorschau{float:right;width:210px;max-width:42%;margin:0 0 1rem 1.4rem;text-align:center}
.th-aushang-vorschau img{width:100%;height:auto;border:1px solid var(--th-linie);border-radius:8px;box-shadow:0 4px 16px rgba(60,74,78,.16)}
.th-aushang-vorschau figcaption{margin-top:.5rem;font-size:12px;color:var(--th-grau)}
@media (max-width:640px){.th-aushang-vorschau{float:none;width:200px;max-width:60%;margin:.5rem auto 1.4rem}}

/* Art-getrennte Hinführung (Hunde/Katzen) auf Ortsseiten */
.th-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.th-2col h3{margin:0 0 .3rem;font-size:1.1rem}
@media (max-width:640px){.th-2col{grid-template-columns:1fr;gap:12px}}

/* Öffnungszeiten-Abschnitt auf Ortsseiten */
.th-oz{display:grid;gap:10px;margin:.4rem 0 1rem}
.th-oz-item{padding:10px 14px;background:var(--th-flaeche);border-left:4px solid var(--th-gruen);border-radius:0 6px 6px 0}
.th-oz-item b{display:block;color:var(--th-gruen-dunkel);margin-bottom:3px}
.th-oz-item span{color:var(--th-text)}

/* Eigenschaften-Badges auf der Tier-Detailseite */
.th-merkmale{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0 1.2rem}
.th-merkmal{display:inline-flex;align-items:center;gap:6px;background:var(--th-flaeche);
            border:1px solid var(--th-linie);border-radius:20px;padding:5px 14px;font-size:.92rem}
.th-merkmal::before{content:"✓";color:var(--th-gruen-dunkel);font-weight:700}

/* Ehrliches Statistik-Band (Nachfrage + echte Funderfolge) */
.th-statband{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 22px}
.th-statband>div{flex:1 1 200px;background:var(--th-flaeche);border-left:4px solid var(--th-gruen);border-radius:0 10px 10px 0;padding:14px 18px}
.th-statband b{display:block;font-size:1.7rem;line-height:1.15;color:var(--th-gruen-dunkel)}
.th-statband span{font-size:.9rem;color:var(--th-grau)}

/* Stadt-Statistik-Zeile auf Ortsseiten (Nachfrage + echte Funde) */
.th-ort-stat{background:var(--th-flaeche-2);border-left:4px solid var(--th-gruen);border-radius:0 8px 8px 0;
             padding:10px 14px;margin:0 0 18px;font-size:.98rem;display:flex;align-items:center;gap:8px}
.th-ort-stat .th-ic-h{color:var(--th-gruen-dunkel);flex:none;width:20px;height:20px}
.th-ort-stat strong{color:var(--th-gruen-dunkel)}

/* AdSense-Anzeigenblöcke - reservierter Platz (CLS) + dezentes "Anzeige"-Label */
.th-ad{margin:24px 0;text-align:center;min-height:100px;clear:both}
.th-ad-label{display:block;font-size:11px;color:var(--th-grau);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.th-ad ins{margin:0 auto}