/* ══════════════════════════════════════════════════════════════════════════
   tierkarte.css — das Aussehen einer Tierkarte, EINMAL.

   A-1105 (17.09.2026). Torstens Bildschirmfoto von /sucht-zuhause: das Foto
   ihrer Katze fuellte unbeschnitten die halbe Seite, die Karten standen
   untereinander statt nebeneinander.

   Der Grund war keine vergessene Zeile, sondern die Stelle: `.cat-card` und
   `.cats-grid` standen in startseite.css, und die laedt nur die Startseite.
   Die eigene Seite aus A-1102 baut dieselben Karten (zuhauseKarte) und
   bekam dafuer keine einzige Regel.

   Abschreiben waere die falsche Antwort gewesen. Dann haetten zwei Seiten
   dasselbe Aussehen an zwei Stellen stehen, und beim naechsten Feilen
   pflegt jemand nur eine davon — genau das, wovor der Kommentar bei den
   .post-* Regeln seit A-607 warnt. Die Regeln stehen deshalb hier, und
   beide Seiten laden diese Datei.

   NICHT hierher gehoeren:
     · Die Themenfassungen (html[data-layout="edel"] .cat-photo und so fort).
       Die stehen in style.css, das ohnehin jede Seite laedt, und gewinnen
       ueber ihre hoehere Spezifitaet — unabhaengig von der Ladereihenfolge.
     · Alles, was nur auf der Startseite vorkommt (#ruhestand, die
       Abschnittsabstaende). Das bleibt in startseite.css.
   ══════════════════════════════════════════════════════════════════════════ */

.cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }

.cat-card {
  background: var(--warm-white); border-radius: 2px; overflow: hidden;
  box-shadow: 0 2px 20px var(--shadow); transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
.cat-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px var(--shadow-deep); }

.cat-photo {
  aspect-ratio: 3/4; overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--cream-dark), var(--border));
}
.cat-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
/* Nur mit echtem Zeigegeraet. Auf dem Handy bleibt :hover nach dem
   Antippen haengen — nach dem Wischen blieb das Bild also dauerhaft
   vergroessert stehen, und vom Motiv war kaum noch etwas zu sehen. */
@media (hover: hover) {
  .cat-card:hover .cat-photo img { transform: scale(1.04); }
}
.cat-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: rgba(139,94,60,0.2); }
/* Beim Durchwischen: ganzes Bild statt Ausschnitt. Das erste Foto ist
   bewusst als Portraet gewaehlt und bleibt beschnitten. */
.cat-photo.ganzes-bild img,
.kitten-photo.ganzes-bild img { object-fit: contain; position: relative; z-index: 1; }
.cat-photo.ganzes-bild::before,
.kitten-photo.ganzes-bild::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--pf); background-size: cover; background-position: center;
  filter: blur(18px) saturate(1.08); transform: scale(1.15); opacity: 0.8;
}
.kitten-photo { position: relative; }

.cat-gender {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(107,68,35,0.85); color: white; backdrop-filter: blur(4px);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: 1px;
  /* A-228: ueber dem Foto bleiben. Beim Durchwischen hebt .ganzes-bild
     das Bild auf z-index 1 — ohne eigenen Wert rutschte das Abzeichen
     dahinter (Torstens Fund am Handy). */
  z-index: 2;
}
.cat-gender.male { background: rgba(80, 100, 140, 0.85); }

.cat-info { padding: 1.75rem; }
.cat-name { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--amber-dark); margin-bottom: 0.2rem; }
.cat-breed { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-gold); margin-bottom: 0.85rem; }
.cat-desc { font-size: 0.9rem; color: var(--text-soft); line-height: 1.7; margin-bottom: 1rem; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cat-tag {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-muted); background: var(--cream-dark);
  padding: 0.2rem 0.55rem; border-radius: 1px;
}
.cat-tag-health {
  color: #2D6A4F; background: #D8F3DC;
}

/* ── Die Abzeichen und die Zeilen darunter ── */
.cat-home-badge { display: inline-block; background: var(--badge-home); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; margin-bottom: 0.5rem; }
.cat-young-badge { display: inline-block; background: var(--badge-young); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; margin-bottom: 0.5rem; }
.cat-color { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.cat-ems { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--rose-gold); margin-bottom: 0.45rem; }
.cat-guest-badge { display: inline-block; background: var(--badge-guest); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; margin-bottom: 0.5rem; }
/* A-515: „Im Ruhestand" und „Adoptiert". Beide sagen dasselbe — dieses
   Tier ist nicht zu haben —, deshalb dieselbe ruhige Farbe. Sie sollen
   sich von „Sucht Zuhause" (warm, ein Angebot) klar unterscheiden. */
.cat-neutral-badge { display: inline-block; background: var(--badge-neutral); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; margin-bottom: 0.5rem; }
/* A-1381: „Showkatze" haengt am Haken, nicht am Stand, und kann neben
   jedem anderen Abzeichen stehen. Die Farbe steht in style.css
   (--badge-show), hier nur die Form - dieselbe wie bei allen Abzeichen. */
.cat-show-badge { display: inline-block; background: var(--badge-show, #A8893A); color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 20px; margin-bottom: 0.5rem; margin-left: 0.3rem; }
.cat-guest-note { font-size: 0.82rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.5rem; }
.cat-guest-note a { color: var(--amber-dark); font-style: normal; }
/* A-1303: display:table statt inline-block - eigene Zeile, aber nur so breit
   wie der Text (der Strich darunter bleibt kurz). Ohne Beschreibung stand der
   Link sonst neben der Status-Plakette (Torstens Handy, 28.09.2026). */
.cat-detail-link { display: table; margin-top: 0.85rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-gold); text-decoration: none; border-bottom: 1px solid var(--rose-gold); padding-bottom: 2px; transition: opacity 0.2s; }
.cat-detail-link:hover { opacity: 0.65; }

/* A-1459: die Klappknoepfe der eigenen Seiten (/katzen, /kater, ...).
   Nur dort gebaut (karteKlappHtml im Worker); auf der Startseite gibt es
   sie nicht. Eine offene Karte wird hoeher - die Nachbarn in der Reihe
   sollen dabei nicht mitwachsen, und sie soll beim Lesen nicht huepfen. */
#tierseite-grid { align-items: start; }
#tierseite-grid .cat-card:has(.karte-knopf[aria-expanded="true"]),
#tierseite-grid .cat-card:has(.karte-knopf[aria-expanded="true"]):hover { transform: none; }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.karte-knopf {
  font-family: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.45rem 0.75rem; border: 1px solid var(--rose-gold); border-radius: 2px;
  background: transparent; color: var(--rose-gold); cursor: pointer; transition: background 0.2s, color 0.2s;
}
.karte-knopf[aria-expanded="true"] { background: var(--rose-gold); color: #fff; }
/* Am Handy bliebe :hover nach dem Antippen haengen - dann saehe ein
   zugeklappter Knopf aus wie ein offener. */
@media (hover: hover) { .karte-knopf:hover { background: var(--rose-gold); color: #fff; } }
.karte-feld { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); font-size: 0.9rem; line-height: 1.6; }
.karte-feld[hidden] { display: none; }

@media (max-width: 640px) {
  .cats-grid { grid-template-columns: 1fr; }
}

/* A-1481: die Kartenform „Breit" der eigenen Tierseiten (settings.kartenForm,
   kartenForm im Worker). Wie Silkes alte Jimdo-Seite: eine Katze je Zeile,
   links auf halber Breite das Bild, rechts die Infos und die Klappknoepfe.
   Die grosse Karte hebt sich beim Zeigen nicht an (sie wuerde springen), und
   am Handy steht das Bild wieder ueber den Infos. Farben und Schriften
   bleiben die des Designs - hier steht nur die Anordnung. */
/* A-1497 (Torsten, 10.10.2026: „nicht seitenfüllend … so ungefähr drei
   Viertel"): bis Build 1237 stand hier max-width: 1080px. Jetzt folgt Breit
   der Seitenbreite des Designs (und der eigenen Wahl), wie alle Raster. */
.cats-grid.karten-breit { grid-template-columns: 1fr; gap: 2.5rem; max-width: none; }
/* A-1497: auf den eigenen Tierseiten deckelte zusaetzlich die Seite selbst
   (katzen.html & Co.: .page { max-width: 1100px } im Kopf) - das waren
   Torstens „drei Viertel". In der Breitform gilt dort die Rasterbreite des
   Designs (--raster-breite, A-1351). Kachelseiten bleiben, wie sie sind. */
section.page:has(> #tierseite-grid.karten-breit) { max-width: var(--raster-breite, 1360px); }
/* A-1497: Breit gibt es auch im Abschnitt der Startseite. Deren Karte
   (startseite.js renderCatCard) traegt die Bildpunkte als eigenes Element
   zwischen Foto und Infos - im Zweispalter waere das eine eigene Zelle. Ein
   Tipp aufs Foto zeigt ohnehin alle Bilder. Der Text darf lang sein wie auf
   der eigenen Seite (dort setzt der Server 12 Zeilen am Element). */
.karten-breit .cat-card > .kitten-dots { display: none; }
.karten-breit .cat-desc.txt-klapp { --klapp-zeilen: 12; }
.karten-breit .cat-card { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.karten-breit .cat-card:hover { transform: none; }
/* A-1489: Magazin versetzt jede zweite Karte nach unten, Show und Verspielt
   kippen sie (style.css, html[data-layout=…] … :nth-child, Spezifitaet
   0,3,1). In der Breitform ergibt das schiefe Abstaende und schraege grosse
   Fotos - hier steht jede Karte gerade, auch beim Zeigen. */
html[data-layout] .cats-grid.karten-breit > *:nth-child(n) { transform: none; }
html[data-layout="magazin"] .cats-grid.karten-breit { padding-bottom: 0; }
/* A-1485 (Torsten, 10.10.2026: „ganze Bild zeigen", „die Katze die ganze
   Seite einnimmt", „zweite dann rechts und links vertauschen"): das Foto in
   seinem eigenen Format statt auf 4:5 beschnitten; ohne Foto behaelt der
   Platzhalter eine feste Hoehe. Am PC steht bei jeder zweiten Karte das Bild
   rechts (Zickzack), am Handy geht die Karte von Rand zu Rand. */
.karten-breit .cat-photo { aspect-ratio: auto; background: none; }
.karten-breit .cat-photo img { height: auto; }
.karten-breit .cat-photo:has(.cat-photo-placeholder) { aspect-ratio: 4/5; }
.karten-breit .cat-card:nth-child(even) .cat-photo { order: 2; }
.karten-breit .cat-info { padding: 2.25rem 2.5rem; }
.karten-breit .cat-name { font-size: 2rem; line-height: 1.25; margin-bottom: 0.5rem; }
.karten-breit .cat-desc { font-size: 0.98rem; }
@media (max-width: 700px) {
  .karten-breit .cat-card { display: block; border-radius: 0; }
  .cats-grid.karten-breit { margin-left: -2rem; margin-right: -2rem; }
  .karten-breit .cat-info { padding: 1.75rem; }
  .karten-breit .cat-name { font-size: 1.6rem; }
}