/* Stammbaum / Ahnentafel – Website, Druck und Admin-Vorschau.
   Farben über CSS-Variablen des Frontends, mit eigenen Ersatzwerten. */
.pedigree {
    --pd-ink: var(--ink, #1c1f3b);
    --pd-muted: var(--ink-soft, #5d6180);
    --pd-surface: var(--color-surface, #fff);
    --pd-line: var(--rule, #d9dcea);
    --pd-night: var(--night, #141a4d);
    --pd-accent: var(--teal, #0f8b93);
    --pd-m-bg: #edf1fb;
    --pd-m-line: #3b4fa3;
    --pd-f-bg: #fbf0f2;
    --pd-f-line: #b0587a;
    --pd-serif: var(--serif, "Libre Baskerville", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
    --pd-sans: var(--sans, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--pd-ink);
    font-family: var(--pd-sans);
    margin: 1.5rem 0;
}
.pedigree *, .pedigree *::before, .pedigree *::after { box-sizing: border-box; }
.pd-caption { font-family: var(--pd-serif); font-weight: 600; font-size: 1.4rem; margin: 0 0 .75rem; color: inherit; }
.pd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Zelle */
.pd-cell {
    position: relative;
    height: 100%;
    padding: .45rem .6rem .45rem .7rem;
    border-left: 3px solid var(--pd-m-line);
    border-radius: 4px;
    background: var(--pd-m-bg);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.pd-cell.pd-f { border-left-color: var(--pd-f-line); background: var(--pd-f-bg); }
.pd-cell.pd-unknown { background: transparent; border: 1px dashed var(--pd-line); border-left-width: 3px; border-left-style: dashed; color: var(--pd-muted); font-style: italic; }
.pd-cell.pd-unknown.pd-m { border-left-color: color-mix(in srgb, var(--pd-m-line) 45%, transparent); }
.pd-cell.pd-unknown.pd-f { border-left-color: color-mix(in srgb, var(--pd-f-line) 45%, transparent); }
.pd-unknown .pd-name { font-weight: 400; }
.pd-rel { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pd-muted); margin-bottom: .1rem; font-style: normal; }
.pd-title { font-size: .78em; font-weight: 700; letter-spacing: .03em; color: var(--pd-accent); }
.pd-name { font-weight: 600; color: inherit; }
a.pd-name { color: var(--pd-night); text-decoration-color: color-mix(in srgb, var(--pd-accent) 60%, transparent); text-underline-offset: .15em; }
a.pd-name:hover, a.pd-name:focus-visible { color: var(--pd-accent); }
.pd-cattery { font-size: .85em; color: var(--pd-muted); font-variant: small-caps; letter-spacing: .02em; }
.pd-meta { display: block; font-size: .8em; color: var(--pd-muted); margin-top: .1rem; }

/* Mehrfach vorkommende Ahnen */
.pd-dup { --dup: #c27a00; }
.pd-dup[data-dup="1"] { --dup: #0f7c85; }
.pd-dup[data-dup="2"] { --dup: #7a3fa0; }
.pd-dup[data-dup="3"] { --dup: #2f7a32; }
.pd-dup[data-dup="4"] { --dup: #b23a48; }
.pd-dup[data-dup="5"] { --dup: #3653b8; }
.pd-cell.pd-dup { box-shadow: inset 0 0 0 2px var(--dup); }
.pd-mark {
    float: right;
    display: inline-grid; place-items: center;
    min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin: 0 0 .2rem .4rem;
    border-radius: 999px; background: var(--dup); color: #fff;
    font-size: .75rem; font-weight: 700; font-style: normal; line-height: 1;
}
.pd-legend { margin-top: 1rem; font-size: .92rem; }
.pd-legend p { margin: 0 0 .35rem; }
.pd-legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.pd-legend li { display: flex; align-items: center; gap: .4rem; }
.pd-legend .pd-mark { float: none; margin: 0; }

/* Kennzahlen */
.pd-stats { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0 .25rem; }
.pd-stats div { display: flex; gap: .4rem; align-items: baseline; }
.pd-stats dt { color: var(--pd-muted); font-size: .92rem; }
.pd-stats dd { margin: 0; font-weight: 700; }
.pd-note, .pd-hint { font-size: .85rem; color: var(--pd-muted); margin: .25rem 0 0; }

/* Handy: Generationen zum Aufklappen */
.pd-table-wrap { display: none; }
.pd-gen { border-top: 1px solid var(--pd-line); }
.pd-gen:last-child { border-bottom: 1px solid var(--pd-line); }
.pd-gen > summary {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .85rem .25rem; cursor: pointer; list-style: none;
    font-family: var(--pd-serif); font-size: 1.15rem; font-weight: 600;
}
.pd-gen > summary::-webkit-details-marker { display: none; }
.pd-gen > summary::after { content: "+"; font-family: var(--pd-sans); font-weight: 400; color: var(--pd-accent); font-size: 1.4rem; line-height: 1; }
.pd-gen[open] > summary::after { content: "–"; }
.pd-gen > summary:focus-visible { outline: 3px solid var(--pd-accent); outline-offset: 2px; }
.pd-gen-count { white-space: nowrap; margin-left: auto; font-family: var(--pd-sans); font-size: .85rem; font-weight: 400; color: var(--pd-muted); }
.pd-pair { display: grid; gap: .4rem; margin: 0 0 1rem; }
.pd-pair-of { margin: 0; font-size: .9rem; color: var(--pd-muted); }
.pd-pair-of strong { color: var(--pd-ink); }
.pd-pair-of span { font-size: .85em; }
.pd-gen > .pd-hint { margin: -.25rem 0 1rem; }

/* Ab Tablet/PC: klassische Ahnentafel */
@media (min-width: 48em) {
    .pd-list { display: none; }
    .pd-table-wrap { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pd-table { width: 100%; border-collapse: separate; border-spacing: .35rem .2rem; table-layout: fixed; margin: 0 -.35rem; }
    .pd-table th { font-family: var(--pd-serif); font-weight: 600; font-size: .95rem; text-align: left; padding: 0 .35rem .3rem; color: var(--pd-muted); }
    .pd-table td { padding: 0; vertical-align: middle; height: 1px; }
    .pd-table td > .pd-cell { display: flex; flex-direction: column; justify-content: center; min-height: 2.6rem; }
    .pd-table td > .pd-cell > .pd-mark { position: absolute; top: .35rem; right: .35rem; margin: 0; }
    .pd-table td > .pd-cell.pd-dup { padding-right: 2rem; }
    .pd-table td.pd-g1 .pd-cell { font-size: 1.05rem; }
    .pd-gen-5 .pd-g5 .pd-cell, .pd-gen-6 .pd-g5 .pd-cell, .pd-gen-6 .pd-g6 .pd-cell,
    .pd-gen-7 .pd-cell, .pd-gen-8 .pd-cell { font-size: .82rem; padding-top: .25rem; padding-bottom: .25rem; }
    .pd-gen-5 .pd-g5 .pd-meta, .pd-gen-6 .pd-g6 .pd-meta, .pd-gen-7 .pd-meta, .pd-gen-8 .pd-meta { display: inline; margin-left: .3rem; }
    .pd-gen-6 .pd-table, .pd-gen-7 .pd-table, .pd-gen-8 .pd-table { min-width: calc(var(--pd-cols, 6) * 11rem); }
    .pd-gen-7 { --pd-cols: 7; }
    .pd-gen-8 { --pd-cols: 8; }
}

/* Druck: immer die Tafel, ohne Farbflächen-Verluste */
@media print {
    .pedigree { margin: 0; font-size: 9pt; color: #000; }
    .pd-list { display: none !important; }
    .pd-table-wrap { display: block !important; overflow: visible; }
    .pd-table { width: 100%; border-collapse: separate; border-spacing: 1.2mm .6mm; table-layout: fixed; }
    .pd-table th { font-family: var(--pd-serif); font-size: 9pt; text-align: left; padding: 0 0 1mm; }
    .pd-table { border-spacing: 1mm .4mm; margin: 0; }
    .pd-note { display: none; }
    .pd-table td { padding: 0; vertical-align: middle; height: 1px; }
    .pd-table td > .pd-cell { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
    .pd-cell { padding: .4mm 1.5mm; border-left-width: 2px; line-height: 1.2; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pd-table td > .pd-cell > .pd-mark { position: absolute; top: .3mm; right: .3mm; margin: 0; }
    .pd-mark { font-size: 6pt; min-width: 1.3em; height: 1.3em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    /* Hintere Generationen einzeilig, damit 5 Generationen auf eine A4-Seite quer passen */
    .pd-gen-4 .pd-g4 .pd-cell, .pd-gen-5 .pd-g4 .pd-cell, .pd-gen-5 .pd-g5 .pd-cell,
    .pd-gen-6 .pd-g5 .pd-cell, .pd-gen-6 .pd-g6 .pd-cell {
        display: block !important; font-size: 7pt; line-height: 1.15; padding-top: .3mm; padding-bottom: .3mm;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4mm;
    }
    .pd-gen-6 .pd-g6 .pd-cell { font-size: 5.6pt; }
    .pd-gen-5 .pd-g4 .pd-cell { white-space: normal; font-size: 7.2pt; }
    .pd-gen-4 .pd-g4 .pd-meta, .pd-gen-5 .pd-g4 .pd-meta, .pd-gen-5 .pd-g5 .pd-meta,
    .pd-gen-6 .pd-g5 .pd-meta, .pd-gen-6 .pd-g6 .pd-meta { display: inline; margin-left: 1mm; }
    .pd-g5 .pd-cattery, .pd-g6 .pd-cattery { font-size: .9em; }
    .pd-legend, .pd-stats, .pd-note { font-size: 7.5pt; break-inside: avoid; }
    .pd-stats { margin: 1.5mm 0 0; }
    .pd-stats dt { font-size: 7.5pt; }
    .pd-legend { margin-top: 1.5mm; }
    .pd-legend p { display: inline; margin-right: 2mm; }
    .pd-legend ul { display: inline-flex; gap: .5mm 4mm; }
    a.pd-name { color: inherit; text-decoration: none; }
}

/* Nachkommen */
.pd-muted { color: var(--pd-muted); }
.pd-litters { list-style: none; margin: 0; padding: 0; }
.pd-litters > li { padding: .75rem 0; border-top: 1px solid var(--pd-line); }
.pd-litter-head { margin: 0 0 .35rem; }
.pd-litter-head a, .pd-kittens a { color: var(--pd-night); }
.pd-kittens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.pd-kittens li { padding: .2rem .55rem; border-radius: 4px; border-left: 3px solid var(--pd-line); background: color-mix(in srgb, var(--pd-line) 30%, transparent); font-size: .92rem; }
.pd-kittens li.pd-m { border-left-color: var(--pd-m-line); background: var(--pd-m-bg); }
.pd-kittens li.pd-f { border-left-color: var(--pd-f-line); background: var(--pd-f-bg); }
@media print { .pd-offspring { display: none; } }

/* Vollansicht /katzen/{slug}/stammbaum */
body.pd-page {
    --pd-page-night: var(--night, #141a4d);
    --pd-page-accent: var(--teal, #19b3bb);
    --pd-page-muted: var(--ink-soft, #5d6180);
    --pd-page-serif: var(--serif, "Libre Baskerville", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif);
    margin: 0;
    background: var(--paper, #f5f6fb);
    color: var(--ink, #1c1f3b);
    font: 17px/1.5 var(--sans, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif);
}
.pd-page-bar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem;
    padding: .9rem 1rem; background: var(--pd-page-night); color: #fff;
    border-bottom: 3px solid var(--pd-page-accent);
}
.pd-page-bar a { color: #fff; }
.pd-page-brand { font-family: var(--pd-page-serif); font-size: 1.2rem; text-decoration: none; }
.pd-page-bar .pd-page-back { color: #bdf1f3; }
.pd-page-main { max-width: 90rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.pd-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: .5rem; }
.pd-page-kicker { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: #0c6f75; font-weight: 600; }
.pd-page h1 { font-family: var(--pd-page-serif); font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; margin: .1rem 0 .5rem; color: var(--pd-page-night); }
.pd-page h1 .pd-title { font-size: .55em; vertical-align: .35em; color: #0c6f75; }
.pd-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; }
.pd-facts div { display: flex; gap: .35rem; }
.pd-facts dt { color: var(--pd-page-muted); }
.pd-facts dd { margin: 0; font-weight: 600; }
.pd-page-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.pd-gen-form { display: flex; align-items: center; gap: .5rem; }
.pd-gen-form label { font-size: .9rem; color: var(--pd-page-muted); }
.pd-gen-form select, .pd-button { font: inherit; min-height: 2.75rem; padding: .45rem .9rem; border-radius: 6px; border: 1px solid #c6cadf; background: #fff; color: inherit; }
.pd-button { cursor: pointer; font-weight: 600; }
.pd-button-primary { background: var(--pd-page-night); border-color: var(--pd-page-night); color: #fff; }
.pd-button:focus-visible, .pd-gen-form select:focus-visible { outline: 3px solid var(--pd-page-accent); outline-offset: 2px; }
.pd-page .pedigree { background: #fff; padding: 1rem; border-radius: 8px; border: 1px solid #e0e3ef; }
.pd-print-footer { font-size: .8rem; color: var(--pd-page-muted); margin-top: 1rem; }
@media print {
    body.pd-page { background: #fff; font-size: 10pt; }
    .pd-page-bar, .pd-page-tools { display: none !important; }
    .pd-page-main { max-width: none; padding: 0; }
    .pd-page-head { margin-bottom: 2mm; }
    .pd-page h1 { font-size: 16pt; margin: 0 0 1mm; }
    .pd-page-kicker, .pd-facts { font-size: 8.5pt; }
    .pd-page .pedigree { border: 0; padding: 0; margin: 0; }
    .pd-print-footer { font-size: 7pt; margin-top: 2mm; }
}