:root {
    --line: #90a4ae;
    --male: #3f7cac;
    --female: #b5496b;
    --child: #546e7a;
    --bg: #f4f6f8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: #22313a;
    /* Eigener Scrollbereich für den Baum statt Scrollen der ganzen Seite. */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.toolbar {
    flex: none;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #dde3e7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.toolbar h1 { margin: 0; font-size: 1.1rem; }
.toolbar form { display: flex; align-items: center; gap: 8px; }
.toolbar select { max-width: 60vw; padding: 6px 8px; }
.lang-form select { max-width: 160px; }
.zoom { margin-left: auto; display: flex; gap: 4px; }
.zoom button, .toolbar button {
    padding: 6px 10px;
    border: 1px solid #c7d0d6;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
}
.zoom button:hover, .toolbar button:hover { background: #eef3f6; }

#canvas {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 32px 20px 64px;
    cursor: grab;
}
#canvas.panning { cursor: grabbing; user-select: none; }
.hint, .error { padding: 24px; font-size: 1rem; }
.error { color: #b00020; }

/* ---------- Ergebnis der Verwandtschaftssuche ---------- */
.result {
    flex: none;
    padding: 12px 20px;
    background: #eef5fb;
    border-bottom: 1px solid #d3e2ef;
}

.result p { margin: 2px 0; }
.relation-label { font-size: 1.05rem; }
.relation-detail { font-size: .85rem; color: #4a5c66; }

.legend { margin-top: 6px; font-size: .75rem; color: #4a5c66; }
.legend .key {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 4px 0 14px;
    vertical-align: -2px;
    border-radius: 3px;
}
.legend .key:first-child { margin-left: 0; }

.relation-form select { max-width: 24vw; padding: 6px 8px; }

.relation-form input[type="search"],
.couple-form input[type="search"] {
    width: 220px;
    max-width: 24vw;
    padding: 6px 8px;
    border: 1px solid #c7d0d6;
    border-radius: 4px;
    font: inherit;
}

.couple-form input[type="search"] { width: 300px; max-width: 30vw; }

.search-note { color: #b45309; font-size: .85rem; }

/* ---------- Hervorhebungen ---------- */
.person.hl-onpath { background: #fff8e1; }
.person.hl-ancestor { background: #e3f6e8; outline: 2px solid #2e7d32; }
.person.hl-focus { background: #fff1c2; outline: 3px solid #ef6c00; }

.legend .hl-onpath { background: #fff8e1; border: 1px solid #c9bb87; }
.legend .hl-ancestor { background: #e3f6e8; border: 2px solid #2e7d32; }
.legend .hl-focus { background: #fff1c2; border: 2px solid #ef6c00; }

/* ---------- Baum ---------- */
.tree {
    display: inline-block;
    min-width: 100%;
    transform-origin: top center;
    transition: transform .15s ease;
}

.tree ul {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 24px 0 0;
    list-style: none;
}

.tree li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 12px 0;
}

/* Verbindungslinien nach oben */
.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 24px;
    border-top: 2px solid var(--line);
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--line);
}

.tree li:only-child::before,
.tree li:only-child::after { display: none; }

.tree li:first-child::before,
.tree li:last-child::after { border: 0 none; }

.tree li:last-child::before {
    border-right: 2px solid var(--line);
    border-radius: 0 6px 0 0;
}

.tree li:first-child::after { border-radius: 6px 0 0 0; }

/* senkrechte Linie vom Elternknoten zur Kinderreihe */
.tree ul ul::before,
.tree > ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 24px;
    border-left: 2px solid var(--line);
}

.tree > ul { padding-top: 0; }
.tree > ul > li { padding-top: 0; }

/* ---------- Knoten ---------- */
.node {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    white-space: nowrap;
}

.node .persons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.node .marriage {
    margin-top: 6px;
    text-align: center;
    font-size: .75rem;
    color: #607d8b;
}

/* Partnerschaft ohne Trauung */
.node.couple.unwed { border: 1px dashed #b0bec5; }
.ring.partnership { color: #78909c; font-style: italic; }

.other-unions {
    margin-top: 4px;
    text-align: center;
    font-size: .7rem;
    color: #78909c;
    white-space: normal;
}

.other-unions a { color: #3f7cac; }

.person {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 8px 10px;
    border-top: 4px solid var(--child);
    border-radius: 6px;
    background: #fbfdfe;
}

.person.male   { border-top-color: var(--male); }
.person.female { border-top-color: var(--female); }
.person.unknown { color: #90a4ae; font-style: italic; }

button.person.linked {
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transition: box-shadow .12s ease, background .12s ease;
}

button.person.linked:hover,
button.person.linked:focus-visible {
    background: #eef5fb;
    box-shadow: 0 0 0 2px var(--male) inset;
}

button.person.linked .name::after {
    content: ' \2197';
    font-size: .75em;
    color: var(--male);
}

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #3f7cac;
    text-decoration: underline;
    cursor: pointer;
}

.person .name { font-weight: 600; font-size: .92rem; }
.person .date { font-size: .74rem; color: #5b6b74; }

.ring { font-size: 1.1rem; color: #90a4ae; }