/* ══════════════════════════════════════════════════════════════════════════
   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; }
/* A-1891 (offen aus A-1889, Torsten 06.11.2026 am Handy: zwei gleiche
   Karten, „Mehr erfahren" verschieden groß): Chromes Font Boosting
   vergrößert Text je Block nach Textmenge - eine Karte mit Beschreibung
   bekam größere Schrift als eine ohne. text-size-adjust an der ganzen Seite
   (A-1888) machte auf Torstens Handy ALLE Schrift größer und ist zurück-
   genommen. Ein Block mit gesetzter Höchsthöhe ist vom Boosting
   ausgenommen; der Wert ist so groß, dass er nie greift. */
.cat-card .cat-info { max-height: 1000000px; }
.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; }
}

/* A-1789 (Torsten, 30.10.2026: „die Startseite ist ja eigentlich immer
   irgendwie gleich"; Entwurf konzept/2a71d00140ef2a2e, am 31.10. „alle"):
   zwei Kartenformen mehr neben Kacheln und Breit, gewaehlt wie Breit
   (settings.kartenForm).
   Karussell: eine Reihe zum Wischen, am Handy schaut die naechste Karte
   rechts heraus; am PC drei Karten und Pfeile (gemeinsam.js). Der Text
   steht nicht auf der Karte, er kommt mit „Mehr erfahren".
   Liste: rundes Foto, Name, Farbe, Titel - fuer grosse Bestaende, Ruhestand
   und Familie. Am PC zwei Spalten.
   Die Kipp- und Versatz-Designs (style.css) passen zu keiner von beiden,
   die Karten stehen gerade wie bei Breit. */
html[data-layout] .cats-grid.karten-karussell > *:nth-child(n),
html[data-layout] .cats-grid.karten-liste > *:nth-child(n) { transform: none; }
html[data-layout="magazin"] .cats-grid.karten-liste { padding-bottom: 0; }
/* Magazin weitet die Luecke (style.css, 0,2,1); die Kartenbreite des
   Karussells rechnet mit 1.5rem, sonst passen am PC nur zwei Karten. */
html[data-layout] .cats-grid.karten-karussell { gap: 1.5rem; padding-bottom: 1rem; }
.karten-karussell .cat-card:hover, .karten-liste .cat-card:hover { transform: none; }
.karussell-rahmen { position: relative; }
.cats-grid.karten-karussell {
  display: flex; justify-content: flex-start; gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.5rem 0.25rem 1rem;
}
.cats-grid.karten-karussell::-webkit-scrollbar { display: none; }
.cats-grid.karten-karussell .cat-card { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; left: auto !important; }
.cats-grid.karten-karussell .cat-desc { display: none; }
.karussell-pfeil {
  position: absolute; top: 40%; z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--warm-white); color: var(--amber-dark); box-shadow: 0 2px 12px var(--shadow-deep);
  font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.karussell-pfeil.zurueck { left: -12px; }
.karussell-pfeil.weiter { right: -12px; }
.karussell-pfeil[hidden] { display: none; }
.cats-grid.karten-liste { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.cats-grid.karten-liste .cat-card { display: flex; align-items: center; gap: 1.2rem; padding: 0.8rem; }
.cats-grid.karten-liste .cat-photo { flex: 0 0 110px; width: 110px; height: 110px; aspect-ratio: 1; border-radius: 50%; }
.cats-grid.karten-liste .cat-photo-placeholder { font-size: 2.5rem; }
.cats-grid.karten-liste .cat-gender, .cats-grid.karten-liste .cat-card > .kitten-dots, .cats-grid.karten-liste .cat-desc,
.cats-grid.karten-liste .karte-knoepfe, .karten-liste .karte-feld { display: none; }
.cats-grid.karten-liste .cat-info { padding: 0; }
.cats-grid.karten-liste .cat-detail-link { margin-top: 0.5rem; }
@media (max-width: 700px) {
  .cats-grid.karten-karussell .cat-card { flex-basis: 78%; }
  .karussell-pfeil { display: none; }
  .cats-grid.karten-liste { grid-template-columns: 1fr; }
  .cats-grid.karten-liste .cat-photo { flex-basis: 80px; width: 80px; height: 80px; }
}

/* A-1790 (OFFEN.md 6 Teil 2): die Kitten je Wurf als Karussell
   (settings.kartenForm.welpen, Klasse am #litters-container). Mit der id,
   weil der Vollmodus (startseite.css, 0,2,1) das Raster mittig setzt - im
   Karussell schnitte das die erste Karte links ab. Am PC vier Karten, am
   Handy schaut die naechste rechts heraus. Kippende Designs stehen gerade. */
#litters-container.kitten-karussell .kitten-grid {
  display: flex; justify-content: flex-start; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.5rem 0.25rem 1rem;
}
#litters-container.kitten-karussell .kitten-grid::-webkit-scrollbar { display: none; }
#litters-container.kitten-karussell .kitten-card { flex: 0 0 calc((100% - 3rem) / 4); scroll-snap-align: start; left: auto !important; }
html[data-layout] #litters-container.kitten-karussell .kitten-card:nth-child(n),
#litters-container.kitten-karussell .kitten-card:hover { transform: none; }
@media (max-width: 700px) {
  #litters-container.kitten-karussell .kitten-card { flex-basis: 62%; }
}

/* A-1790: das Zahlenband unter dem Kopfbild (Entwurf „gross", Torsten
   31.10.2026). Je Zahl eine Spalte, am Handy zwei je Reihe. Schrift und
   Farbe wie die Abschnittstitel. */
section#zahlen.zahlenband { padding: 2.6rem 2rem; border-bottom: 1px solid var(--border); }
.zb-reihe { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: 0 auto; text-align: center; row-gap: 1.6rem; }
.zb-zahl { flex: 1 1 0; min-width: 9rem; }
.zb-zahl[hidden] { display: none; }
/* Alle Zahlen ausgeblendet: fuer Besucher kein leerer Streifen, mit dem
   Stift bleibt das Band da (Knopf „Zahlen"). */
html:not([data-be="an"]) section#zahlen.zahlenband:not(:has(.zb-zahl:not([hidden]))) { display: none; }
.zb-zahl b {
  display: block; font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 3rem; font-weight: 600; line-height: 1; color: var(--amber-dark);
  /* Cormorant setzt Mediaevalziffern: „2011" las sich als „2OII", die 1 als I. */
  font-variant-numeric: lining-nums;
}
.zb-zahl small {
  display: block; margin-top: 0.45rem; font-size: 0.82rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 700px) {
  section#zahlen.zahlenband { padding: 2rem 1rem; }
  .zb-zahl { flex: 0 0 50%; min-width: 0; }
  .zb-zahl b { font-size: 2.3rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A-1814 (Preis-Umbau Build 2): der Preis als „Bühne". Stand bis 1493 in
   startseite.css; seit der Preis ein Baustein ist, steht er auch auf eigenen
   Seiten und in Abschnitten, und die laden startseite.css nicht (dieselbe
   Lage wie die Tierkarte, A-1105). Gebaut vom Server (preisBuehneHtml).
   ══════════════════════════════════════════════════════════════════════════ */
/* A-1813 (Preis-Umbau Build 1): die Darstellung „Bühne" (Torsten
   02.11.: „edel, aber präsent", Bilderseite konzepte/preise-umbau).
   Ein ruhiges Band über die ganze Breite, der Betrag gross, darunter
   die Bedingungen in einer Pille und die Kacheln als Kreise. */
.preise-band.pr-buehne-band, .baustein-preis.pr-buehne-band { background: var(--cream-dark); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.preis-box.pr-buehne { max-width: 820px; margin: 0 auto; text-align: center; border: 0; padding: 3.2rem 0.5rem 3rem; }
.pr-buehne .pr-ueber { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose-gold); }
.pr-buehne .pr-betrag { font-family: 'Cormorant Garamond', serif; font-variant-numeric: lining-nums; font-size: 4.4rem; font-weight: 600; color: var(--amber-dark); line-height: 1; margin: 0.5rem 0 0.4rem; }
.pr-buehne .pr-zwei { display: flex; justify-content: center; margin: 0.6rem 0 0.2rem; }
.pr-buehne .pr-zwei > div { flex: 0 1 280px; padding: 0 1.6rem; min-width: 0; }
.pr-buehne .pr-zwei > div + div { border-left: 1px solid var(--rose-gold); }
.pr-buehne .pr-zwei .pr-was { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-soft); }
.pr-buehne .pr-zwei .pr-betrag { font-size: 3.6rem; margin: 0.3rem 0 0.2rem; }
.pr-buehne .pr-adulte { max-width: 560px; margin: 0.6rem auto 0; color: var(--text-muted); font-size: 0.86rem; font-style: italic; white-space: pre-line; line-height: 1.6; }
.pr-buehne .pr-ico { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pr-buehne .pr-bed { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.1rem; margin: 1.1rem auto 0.2rem; max-width: calc(100% - 1rem); width: fit-content;
  font-size: 0.84rem; color: var(--amber-dark); background: var(--card-bg); border: 1px solid var(--border); border-radius: 40px; padding: 0.6rem 1.4rem; }
.pr-buehne .pr-bed span { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.pr-buehne .pr-bed .pr-ico { width: 22px; height: 22px; color: var(--rose-gold); }
.pr-buehne .pr-bed a { color: var(--rose-gold); text-decoration: none; border-bottom: 1px solid var(--rose-gold); font-size: 0.8rem; }
.pr-buehne .pr-zier { display: flex; align-items: center; gap: 0.7rem; justify-content: center; margin: 1.4rem auto 1.4rem; max-width: 300px; }
.pr-buehne .pr-zier::before, .pr-buehne .pr-zier::after { content: ""; flex: 1; height: 1px; background: var(--rose-gold); opacity: 0.6; }
.pr-buehne .pr-zier i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--rose-gold); }
.pr-buehne .pr-text-oben, .pr-buehne .pr-text-unten { max-width: 560px; margin: 0 auto 1.8rem; color: var(--text-soft); font-size: 1rem; line-height: 1.7; white-space: pre-line; }
.pr-buehne .pr-text-unten { margin: 2rem auto 0; font-size: 0.95rem; }
.pr-buehne .pr-kacheln { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 0; max-width: 760px; margin: 0 auto; }
.pr-buehne .pr-kachel { flex: 0 0 25%; padding: 0 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: var(--text-soft); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pr-buehne .pr-kreis { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--rose-gold); display: grid; place-items: center; color: var(--amber-dark); background: var(--card-bg); }
.pr-buehne .pr-knopf { display: inline-block; margin-top: 1.8rem; padding: 0.75rem 1.8rem; background: var(--amber-dark); color: var(--auf-amber-dark); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; }
@media (max-width: 600px) {
  .preis-box.pr-buehne { padding: 2.4rem 1rem 2.2rem; }   /* A-1818: seitlich nicht 0 */
  .pr-buehne .pr-betrag { font-size: 3.4rem; }
  .pr-buehne .pr-zwei > div { padding: 0 0.8rem; }
  .pr-buehne .pr-zwei .pr-betrag { font-size: 2.3rem; }
  .pr-buehne .pr-zwei .pr-was { font-size: 0.68rem; letter-spacing: 0.14em; }
  .pr-buehne .pr-bed { border-radius: 14px; flex-direction: column; gap: 0.45rem; }
  .pr-buehne .pr-kacheln { gap: 1.2rem 0; }
  .pr-buehne .pr-kachel { flex-basis: 33.3%; padding: 0 0.25rem; font-size: 0.78rem; }
  .pr-buehne .pr-kreis { width: 50px; height: 50px; }
}
/* A-1814: die freien Tiere unter dem Preis, rundes Foto und Name. */
.pr-buehne .pr-tiere { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 1rem; margin: 0.9rem auto 0.3rem; }
.pr-buehne .pr-tier { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 64px; text-decoration: none; color: var(--text-soft); font-size: 0.78rem; line-height: 1.2; overflow-wrap: anywhere; }
.pr-buehne .pr-tier-foto { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid var(--rose-gold); display: grid; place-items: center; background: var(--card-bg); }
.pr-buehne .pr-tier-foto img { width: 100%; height: 100%; object-fit: cover; }
.pr-buehne .pr-tiere-leer { margin: 0.7rem 0 0.2rem; font-size: 0.84rem; color: var(--text-muted); }
.pr-buehne .pr-tiere-leer a { color: var(--rose-gold); text-decoration: none; border-bottom: 1px solid var(--rose-gold); }
/* Der Baustein auf einer eigenen Seite: dasselbe Band, ohne die Breite des
   ganzen Fensters (er steht im Textcontainer). */
.baustein-preis { margin: 1.5rem 0; }
.baustein-preis .preis-box.pr-buehne { margin: 0 auto; text-align: center; padding: 2.6rem 1rem 2.4rem; }
.baustein-preis-warum { color: var(--text-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   A-1815 (Preis-Umbau Build 3): die drei anderen Darstellungen, je Stelle
   gewählt (Bilderseite konzepte/preise-umbau, Abschnitt 3). Dieselben Teile
   wie die Bühne (preisBuehneHtml), nur anders angeordnet. Grundregeln unter
   .pr-preis, die Anordnung unter .pr-spalten, .pr-urkunde, .pr-band. Auf dem
   dunklen Grund stehen Schrift und Zeichen in var(--auf-amber-dark), denn
   nicht jede Farbwelt will dort Weiß.
   ══════════════════════════════════════════════════════════════════════════ */
.preis-box.pr-preis { max-width: 1000px; margin: 0 auto; border: 0; padding: 3rem 0.5rem; text-align: left; }
.pr-preis .pr-ueber { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rose-gold); }
.pr-preis .pr-betrag { font-family: 'Cormorant Garamond', serif; font-variant-numeric: lining-nums; font-weight: 600; line-height: 1; font-size: 3.8rem; margin: 0.6rem 0 0.8rem; }
.pr-preis .pr-ico { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pr-preis .pr-zwei { display: flex; flex-direction: column; gap: 0.9rem; margin: 0.6rem 0 1rem; }
.pr-preis .pr-zwei > div { min-width: 0; }
.pr-preis .pr-zwei > div + div { border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-top: 0.9rem; }
.pr-preis .pr-zwei .pr-was { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.pr-preis .pr-zwei .pr-betrag { font-size: 2.6rem; margin: 0.3rem 0 0.2rem; }
.pr-preis .pr-adulte { margin-top: 0.4rem; font-size: 0.85rem; font-style: italic; opacity: 0.85; white-space: pre-line; line-height: 1.6; }
.pr-preis .pr-bed { display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; margin: 1rem 0 1.1rem; font-size: 0.84rem; }
.pr-preis .pr-bed span { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; }
.pr-preis .pr-bed a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; font-size: 0.8rem; }
.pr-preis .pr-text-oben, .pr-preis .pr-text-unten { font-size: 0.95rem; line-height: 1.7; white-space: pre-line; }
.pr-preis .pr-text-unten { margin-top: 1.2rem; }
.pr-preis .pr-h { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--amber-dark); margin: 0 0 1rem; }
.pr-preis .pr-kachel { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pr-preis .pr-kreis { display: grid; place-items: center; flex: none; color: var(--rose-gold); }
.pr-preis .pr-knopf { display: inline-block; margin-top: 1.4rem; padding: 0.75rem 1.8rem; background: var(--amber-dark); color: var(--auf-amber-dark); text-decoration: none; font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 2px; }
.pr-preis .pr-tiere { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin: 0.6rem 0 0.3rem; }
.pr-preis .pr-tier { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 64px; text-decoration: none; color: inherit; font-size: 0.78rem; line-height: 1.2; overflow-wrap: anywhere; }
.pr-preis .pr-tier-foto { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 1px solid currentColor; display: grid; place-items: center; background: var(--card-bg); }
.pr-preis .pr-tier-foto img { width: 100%; height: 100%; object-fit: cover; }
.pr-preis .pr-tiere-leer { margin: 0.6rem 0 0.2rem; font-size: 0.84rem; opacity: 0.85; }
.pr-preis .pr-tiere-leer a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* Zwei Spalten: links ein dunkler Kasten mit dem Preis, rechts hell, was
   im Preis steckt. */
.preise-band.pr-spalten-band, .baustein-preis.pr-spalten-band { background: var(--card-bg); }
.pr-spalten .pr-innen { display: grid; grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: center; }
.pr-spalten .pr-innen.pr-allein { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pr-spalten .pr-links { background: var(--amber-dark); color: var(--auf-amber-dark); padding: 2.4rem 2rem; border-radius: 4px; position: relative; min-width: 0; }
.pr-spalten .pr-links::after { content: ""; position: absolute; inset: 8px; border: 1px solid currentColor; opacity: 0.25; border-radius: 2px; pointer-events: none; }
.pr-spalten .pr-links .pr-ueber { color: inherit; opacity: 0.75; }
.pr-spalten .pr-links .pr-text-oben { opacity: 0.85; }
.pr-spalten .pr-links .pr-bed .pr-ico { color: inherit; opacity: 0.85; }
.pr-spalten .pr-links .pr-knopf { background: var(--auf-amber-dark); color: var(--amber-dark); position: relative; z-index: 1; }
.pr-spalten .pr-rechts { min-width: 0; }
.pr-spalten .pr-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pr-spalten .pr-kachel { padding: 0.75rem 0.9rem; background: var(--cream); border-radius: 4px; color: var(--text); }
.pr-spalten .pr-rechts .pr-text-unten { color: var(--text-soft); font-size: 0.92rem; }

/* Urkunde: ein Blatt mit doppeltem Rand, je Preis ein Siegel auf der
   oberen Kante, darunter genau seine Tiere und sein Text. */
.preise-band.pr-urkunde-band, .baustein-preis.pr-urkunde-band { background: linear-gradient(180deg, var(--cream) 0%, var(--card-bg) 100%); }
.preis-box.pr-urkunde { padding-top: 5rem; }
.pr-urkunde .pr-blatt { position: relative; max-width: 640px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--rose-gold);
  padding: 0 2.4rem 2.4rem; text-align: center; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.25); color: var(--text); }
/* Der zweite Rand als eigene Linie unter dem Siegel (ein outline läge
   darüber und striche den Betrag durch). */
.pr-urkunde .pr-blatt::before { content: ""; position: absolute; inset: -7px; border: 1px solid var(--rose-gold); pointer-events: none; }
.pr-urkunde .pr-spalten-u { position: relative; z-index: 1; }
.pr-urkunde .pr-spalten-u { display: grid; grid-template-columns: 1fr; margin-bottom: 1rem; }
.pr-urkunde .pr-zweispaltig .pr-spalten-u { grid-template-columns: 1fr 1fr; }
.pr-urkunde .pr-sp { display: flex; flex-direction: column; align-items: center; padding: 0 0.6rem; min-width: 0; }
.pr-urkunde .pr-zweispaltig .pr-sp + .pr-sp { border-left: 1px solid var(--border); }
.pr-urkunde .pr-siegel { width: 132px; height: 132px; border-radius: 50%; background: var(--amber-dark); color: var(--auf-amber-dark); display: grid; place-items: center; text-align: center;
  box-shadow: 0 0 0 6px var(--card-bg), 0 0 0 7px var(--rose-gold); margin: -66px 0 0.8rem; }
.pr-urkunde .pr-siegel span { display: block; font-family: 'Cormorant Garamond', serif; font-variant-numeric: lining-nums; font-size: 2.1rem; font-weight: 600; line-height: 1; }
.pr-urkunde .pr-siegel small { display: block; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.8; margin-bottom: 0.25rem; }
.pr-urkunde .pr-tiere { justify-content: center; color: var(--text-soft); }
.pr-urkunde .pr-tier-foto { color: var(--rose-gold); }
.pr-urkunde .pr-tiere-leer { color: var(--text-muted); }
.pr-urkunde .pr-adulte { color: var(--text-muted); margin: 0 0 0.2rem; }
.pr-urkunde .pr-bed { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 0 0 1.4rem; padding: 0.7rem; background: var(--cream); border-radius: 3px; color: var(--amber-dark); }
.pr-urkunde .pr-bed .pr-ico { color: var(--rose-gold); }
.pr-urkunde .pr-h { font-size: 1.9rem; margin: 0 0 0.4rem; }
.pr-urkunde .pr-text-oben { color: var(--text-soft); margin-bottom: 1.4rem; }
.pr-urkunde .pr-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1.6rem; text-align: left; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.pr-urkunde .pr-kachel { padding: 0.5rem 0; border-bottom: 1px dotted var(--border); }
.pr-urkunde .pr-text-unten { color: var(--text-soft); font-size: 0.92rem; }

/* Dunkles Band: über die ganze Breite dunkel, links der Preis, rechts der
   Rest, die Kacheln als Pillen. */
.preise-band.pr-band-band, .baustein-preis.pr-band-band { background: var(--amber-dark); color: var(--auf-amber-dark); }
.preis-box.pr-band { padding: 2.6rem 0.5rem; color: var(--auf-amber-dark); }
.pr-band .pr-innen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.4rem; align-items: center; }
.pr-band .pr-innen.pr-allein { grid-template-columns: auto; justify-content: center; text-align: center; }
.pr-band .pr-preisblock { padding-right: 2.4rem; border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent); min-width: 0; }
.pr-band .pr-allein .pr-preisblock { padding-right: 0; border-right: 0; }
.pr-band .pr-rest { min-width: 0; }
.pr-band .pr-ueber { color: inherit; opacity: 0.7; }
.pr-band .pr-knopf { background: transparent; color: inherit; border: 1px solid currentColor; margin-top: 0.8rem; }
.pr-band .pr-bed { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 1rem; }
.pr-band .pr-bed .pr-ico, .pr-band .pr-kreis { color: inherit; opacity: 0.85; }
.pr-band .pr-text-oben { opacity: 0.85; margin-bottom: 1.1rem; }
.pr-band .pr-text-unten { opacity: 0.8; font-size: 0.9rem; }
.pr-band .pr-kacheln { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pr-band .pr-kachel { gap: 0.5rem; padding: 0.5rem 0.85rem; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 30px; font-size: 0.84rem; }

@media (max-width: 760px) {
  .pr-spalten .pr-innen { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .pr-spalten .pr-links { text-align: center; padding: 2rem 1.4rem; }
  .pr-spalten .pr-links .pr-bed { align-items: center; }
  .pr-spalten .pr-links .pr-tiere { justify-content: center; }
  .pr-band .pr-innen { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .pr-band .pr-preisblock { border-right: 0; padding-right: 0; text-align: center; }
  .pr-band .pr-preisblock .pr-tiere { justify-content: center; }
  .pr-band .pr-rest { text-align: center; }
  .pr-band .pr-bed { align-items: center; justify-content: center; }
  .pr-band .pr-kacheln { justify-content: center; }
  /* Zwei Preise am Handy nebeneinander, wie bei der Bühne. */
  .pr-spalten .pr-zwei, .pr-band .pr-zwei { flex-direction: row; justify-content: center; gap: 0; }
  .pr-spalten .pr-zwei > div, .pr-band .pr-zwei > div { flex: 0 1 50%; padding: 0 0.8rem; }
  .pr-spalten .pr-zwei > div + div, .pr-band .pr-zwei > div + div { border-top: 0; padding-top: 0; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
}
@media (max-width: 600px) {
  /* A-1818 (Torsten, 02.11.2026, Handyfoto babajewo.com: „bisschen nah am
     Rand alles"): hier stand seitlich 0. Der Kasten steht im .container des
     Bands, und der hat am Handy keinen eigenen Rand - Kacheln, Text und der
     dunkle Kasten der Zwei Spalten klebten am Bildschirmrand. */
  .preis-box.pr-preis { padding: 2.2rem 1rem 2rem; }
  .pr-preis .pr-betrag { font-size: 3.2rem; }
  .pr-preis .pr-zwei .pr-betrag { font-size: 2.2rem; }
  .pr-preis .pr-zwei .pr-was { font-size: 0.68rem; letter-spacing: 0.14em; }
  .pr-spalten .pr-kacheln { gap: 0.45rem; }
  .pr-spalten .pr-kachel { font-size: 0.8rem; padding: 0.6rem; gap: 0.5rem; }
  .preis-box.pr-urkunde { padding: 4.2rem 1rem 2rem; }   /* A-1818: seitlich nicht 0 */
  .pr-urkunde .pr-blatt { padding: 0 1.2rem 1.6rem; }
  .pr-urkunde .pr-siegel { width: 112px; height: 112px; margin-top: -56px; }
  .pr-urkunde .pr-siegel span { font-size: 1.7rem; }
  .pr-urkunde .pr-sp { padding: 0 0.3rem; }
  .pr-urkunde .pr-kacheln { grid-template-columns: 1fr; }
  .pr-urkunde .pr-h { font-size: 1.6rem; }
  .pr-band .pr-kacheln { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 0.4rem; scrollbar-width: none; }
  .pr-band .pr-kachel { white-space: nowrap; flex: none; }
}
/* Der Baustein auf einer eigenen Seite steht im Textcontainer. */
.baustein-preis .preis-box.pr-preis { padding-left: 1rem; padding-right: 1rem; }
.baustein-preis .preis-box.pr-urkunde { padding-top: 5rem; }

/* A-1816 (Preis-Umbau Build 4): Preise je Farbe und „Mit Zuchtfreigabe"
   unter dem Kittenpreis, „ab" davor, der Preis unter dem Namen der freien
   Kitten und an der Kittenkarte. Farben erben, damit es auf dem dunklen
   Grund (Spalten, Band) genauso lesbar ist. */
.pr-ab { font-size: 0.42em; font-weight: 400; letter-spacing: 0.04em; vertical-align: 0.35em; opacity: 0.75; }
.pr-varianten { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.86rem; margin: 0.1rem 0 0.5rem; opacity: 0.9; }
.pr-buehne .pr-varianten { justify-content: center; }
.pr-varianten b { font-weight: 600; }
.pr-tier-preis { font-size: 0.74rem; font-weight: 600; opacity: 0.85; }
/* A-1886 (Torsten 06.11.2026 an der Probe von Al Akim): höchstens vier Tiere
   je Preis (preisTiereHtml), in EINER Reihe, dahinter „alle N ansehen". Am
   PC rücken die vier enger, damit sie auch in der halben Spalte zweier
   Preise nebeneinander passen; am Handy wischt man die Reihe seitlich statt
   eines Turms aus Reihen. Farben erben wie oben. */
/* Passt die Reihe nicht, wird sie seitlich gewischt; „safe center" hält
   die Mitte, solange sie passt, sonst beginnt sie links (bei „center" wäre
   das erste Tier links abgeschnitten und nicht erreichbar). */
.preis-box .pr-tiere { flex-wrap: nowrap; column-gap: 0.55rem; overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; }
.preis-box .pr-tiere::-webkit-scrollbar { display: none; }
.preis-box .pr-tier { flex: none; scroll-snap-align: start; }
.pr-buehne .pr-tiere, .pr-urkunde .pr-tiere { justify-content: safe center; }
/* Zwei Preise nebeneinander: gemessen an der Probe von Al Akim (06.11.) hat
   die Reihe in der Bühne 229 px, vier Tiere zu 64 px brauchten 282. */
.preis-box .pr-zwei .pr-tiere { column-gap: 0.35rem; }
.preis-box .pr-zwei .pr-tier { width: 52px; font-size: 0.74rem; }
.preis-box .pr-tiere-alle { display: inline-block; margin: 0.35rem 0 0.2rem; font-size: 0.82rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; opacity: 0.9; }
.pr-buehne .pr-tiere-alle { color: var(--rose-gold); border-bottom-color: var(--rose-gold); opacity: 1; }
@media (max-width: 760px) {
  .pr-spalten .pr-links .pr-tiere, .pr-band .pr-preisblock .pr-tiere { justify-content: safe center; }
}
.kitten-preis { display: inline-block; margin-left: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--amber-dark); white-space: nowrap; }

/* A-1817 (Preis-Umbau Build 5): an der Karte eines Tieres, das ein Zuhause
   sucht, Preis, Bedingungen und Text (zuhauseKastenHtml). Dieselben Regeln
   stehen fuer die Tierseite im Worker (ZUHAUSE_SEITE_CSS). */
.cat-zuhause { border-top: 1px solid var(--border, rgba(0,0,0,0.1)); margin: 0.5rem 0 0.7rem; padding-top: 0.55rem; }
.cat-zuhause-preis { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 600; color: var(--amber-dark); line-height: 1.1; margin-bottom: 0.35rem; }
.cat-zuhause-bed { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--text-muted); }
.cat-zuhause-bed span { display: flex; align-items: center; gap: 0.4rem; }
.cat-zuhause-bed .pr-ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--amber-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-zuhause-text { font-size: 0.86rem; line-height: 1.55; margin: 0.5rem 0 0; }