/* -------------------------------------------
   Verwandtenübersicht auf der Einzelseite
-------------------------------------------- */

.verwandte-box {
    background: #f8f8f8;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin: 30px 0;
}

.verwandte-box h3 {
    margin-top: 0;
    font-size: 1.4em;
    color: #444;
}

.verwandte-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.verwandtenkarte {
    background: white;
    border: 1px solid #ddd;
    border-left: 4px solid #ccc;
    padding: 10px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 0.95em;
}

.verwandtenkarte a {
    text-decoration: none;
    color: #0073aa;
    font-weight: bold;
}

.verwandtenkarte:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.verwandtenkarte .emoji {
    font-size: 1.6em;
    display: block;
    margin-bottom: 5px;
}

.verwandtenkarte.eltern {
    border-left-color: #8884d8;
}

.verwandtenkarte.kind {
    border-left-color: #82ca9d;
}

.verwandtenkarte.partner {
    border-left-color: #ff6f61;
}

.verwandtenkarte.leer {
    color: #666;
    text-align: center;
    grid-column: 1 / -1;
    background: #f0f0f0;
    border-left: none;
}

/* Responsive: Verwandte einspaltig bei kleinen Geräten */
@media (max-width: 600px) {
    .verwandte-grid {
        grid-template-columns: 1fr;
    }
}

.verwandtenkarte.geschwister .emoji {
    font-size: 1.4em;
}

/* -------------------------------------------
   Container für Stammbaum & Verwandte
-------------------------------------------- */

.verwandten-und-stammbaum-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
    margin: 20px 0;
}

.verwandte-links {
    flex: 1 1 300px;
    min-width: 280px;
}

/* -------------------------------------------
   QR-Code & vCard Download
-------------------------------------------- */

#download-vcard button {
    margin: 0 5px;
    padding: 6px 12px;
    font-size: 14px;
    background-color: #f0f0f0;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
}

#download-vcard button:hover {
    background-color: #ddd;
}
/* Subtle contribution controls on each person's detail page. */
.family-contribution { margin: 1rem 0; padding: .65rem 0; border-bottom: 1px solid #ddd; }
.family-contribution summary { cursor: pointer; font-size: .95rem; }
.family-contribution form { max-width: 760px; margin-top: 1rem; }
.family-contribution form > label { display: block; margin-top: .8rem; }
.family-contribution input, .family-contribution select, .family-contribution textarea { box-sizing: border-box; max-width: 100%; }
.family-contribution textarea, .family-contribution form > select { width: 100%; }
.family-personal-grid { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 3fr); gap: .7rem; align-items: center; }
.family-personal-grid input, .family-personal-grid select, .family-personal-grid textarea { width: 100%; }
.family-own-address { margin: .8rem 0; display: flex; flex-wrap: wrap; gap: .65rem; padding: .8rem; border: 1px solid #ddd; }
.family-own-address label { display: flex; flex-direction: column; flex: 1 1 150px; }
.family-feedback { padding: .8rem; border-left: 3px solid #477668; background: #f3f7f5; }
@media (max-width: 480px) { .family-personal-grid { grid-template-columns: 1fr; } }

.family-person-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),180px)); gap:16px; margin:20px 0; }
.family-person-gallery figure { margin:0; }
.family-person-gallery img { display:block; width:100%; height:150px; object-fit:contain; border-radius:8px; background:#f4f6f5; }

.family-person-detail { --family-border:#dce5e1; max-width:1040px; margin:0 auto; color:#263c33; overflow-wrap:anywhere; }
.family-person-detail .family-person-header { display:flex; align-items:center; gap:22px; padding:24px; margin:0 0 24px; background:#f1f6f3; border:1px solid var(--family-border); border-radius:16px; }
.family-person-detail .family-person-header h2 { margin:0; font-size:clamp(1.65rem,4vw,2.2rem); line-height:1.2; }
.family-person-detail .family-person-eyebrow { margin:0 0 6px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#536b60; }
.family-person-detail .family-person-portrait { flex:0 0 88px; width:88px; }
.family-person-detail .family-person-portrait img { display:block; width:88px; height:88px; max-width:88px; object-fit:cover; border-radius:14px; }
.family-person-facts { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.family-person-card { padding:20px; margin:0 0 18px; border:1px solid var(--family-border); border-radius:12px; background:#fff; min-width:0; }
.family-person-detail .family-person-card h3 { margin:0 0 14px; font-size:1.15rem; }
.family-person-detail .family-person-card p { margin:9px 0; }
.family-person-card strong { font-weight:600; }
.family-person-notes { white-space:pre-wrap; }
.family-person-detail details { border:1px solid var(--family-border); border-radius:10px; padding:14px 18px; margin:14px 0; background:#fff; }
.family-person-detail summary { cursor:pointer; font-weight:600; }
.family-person-detail summary:focus-visible, .family-person-detail a:focus-visible, .family-person-detail button:focus-visible { outline:3px solid #477668; outline-offset:3px; }
.family-person-detail .verwandte-box { margin:0; box-shadow:none; border:1px solid var(--family-border); background:#f7f9f8; }
.family-person-detail .verwandte-links { min-width:0; }
.family-person-detail .verwandte-box h2 { margin-top:0; font-size:1.25rem; }
.family-person-addresses { margin-top:24px; }
.family-person-addresses #person-map { border-radius:12px; }
.family-owner-status { color:#365e4e; }
.family-person-vcard #contact-qr { margin-top:18px; }
.family-birthdays fieldset { margin:18px 0; padding:16px; border:1px solid #dce5e1; min-width:0; }
.family-birthdays legend { padding:0 6px; font-weight:600; }
.family-picker-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.family-picker-actions[hidden], .family-birthday-list [hidden] { display:none; }
.family-picker-actions label { flex-basis:100%; }
.family-birthday-list { display:grid; gap:4px; max-height:300px; overflow:auto; padding:6px; border:1px solid #dce5e1; border-radius:8px; }
.family-birthday-list label { display:block; padding:8px; border-radius:6px; background:#f7f9f8; }
.family-birthday-list input { margin-right:8px; }
@media (max-width:600px) {
    .family-person-facts { grid-template-columns:1fr; gap:0; }
    .family-person-detail .family-person-header { padding:18px; gap:14px; }
    .family-person-detail .family-person-portrait { flex-basis:64px; width:64px; }
    .family-person-detail .family-person-portrait img { width:64px; height:64px; }
    .family-person-detail details { padding:12px; }
}