:root {
  color-scheme: light;
  --primary: #1e6684;
  --primary-dark: #123d55;
  --secondary: #9ed8e9;
  --secondary-strong: #4ba7c4;
  --bg: #f4f9fb;
  --panel: #ffffff;
  --ink: #203040;
  --muted: #667987;
  --line: #d8e9ef;
  --accent: #197db0;
  --accent-strong: #0e5c83;
  --warm: #f4a261;
  --shadow: 0 4px 20px rgba(24, 76, 102, 0.12);
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(62% 48% at 12% 8%, rgba(158, 216, 233, 0.28) 0%, rgba(158, 216, 233, 0) 70%),
    radial-gradient(52% 42% at 86% 14%, rgba(244, 162, 97, 0.13) 0%, rgba(244, 162, 97, 0) 72%),
    linear-gradient(165deg, #f4fbfd 0%, #eaf6fa 46%, #f8fbfc 100%);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button,
.file-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 50px;
  padding: 9px 12px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
}

button:hover,
.file-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.app-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 64%, #1f7896 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(18, 61, 85, 0.24);
}

.header-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 86px;
  border-radius: 50px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.back-button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(18, 61, 85, 0.22);
}

.sidebar-back {
  width: 100%;
  margin-top: 4px;
  border-color: rgba(30, 102, 132, 0.18);
  color: var(--primary-dark);
  background: #fff;
  box-shadow: var(--shadow);
}

.sidebar-back:hover {
  color: var(--primary-dark);
  background: #f4fbfd;
}

.app-header h1 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0;
  font-weight: 800;
}

.app-header p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

.app-header .database-date {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.header-actions button,
.header-actions .file-button {
  width: 190px;
  flex: 0 0 190px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50px;
  margin: 0;
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(18, 61, 85, 0.22);
}

#krapfLoadButton {
  background: linear-gradient(135deg, #2a89b6 0%, #9ed8e9 100%);
  color: #0f3447;
}

.header-actions .file-button {
  background: linear-gradient(135deg, #256fb2 0%, #8fc7ff 100%);
  color: #0e3658;
}

.header-actions button:hover,
.header-actions .file-button:hover {
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

.file-button input {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  height: calc(100vh - 78px);
  min-height: 560px;
}

.sidebar {
  border-right: 1px solid rgba(30, 102, 132, 0.16);
  background: rgba(234, 246, 250, 0.78);
  overflow: auto;
  padding: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.panel h2 {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--primary-dark);
}

.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.panel-title-row h2 {
  margin: 0;
}

.panel-action-button {
  min-width: 0;
  padding: 7px 11px;
  border-radius: 999px;
  border-color: rgba(30, 102, 132, 0.2);
  background: #f4fbfd;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.panel-action-button:hover,
.panel-action-button.active {
  border-color: #d28a15;
  background: linear-gradient(135deg, #ffe4a8 0%, #f4a261 100%);
  color: #44240a;
  box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.24), 0 8px 18px rgba(179, 100, 20, 0.22);
}

.panel-action-button.active {
  animation: activePulse 1.8s ease-in-out infinite;
}

.home-view-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(30, 102, 132, 0.2);
  background: #f4fbfd;
  color: var(--primary-dark);
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.home-view-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-view-button:hover {
  border-color: var(--secondary-strong);
  background: linear-gradient(135deg, #e7f7fb 0%, #d5eef7 100%);
  color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24, 76, 102, 0.16);
}

@keyframes activePulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

label:not(.file-button) {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

input[type="search"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--ink);
  background: #fbfdff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

input[type="search"]:focus {
  border-color: var(--secondary-strong);
  box-shadow: 0 0 0 4px rgba(75, 167, 196, 0.16);
}

#searchButton {
  width: 100%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary-strong) 100%);
  color: #fff;
  border: 0;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(25, 125, 176, 0.20);
}

#searchButton:hover {
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
  color: #fff;
}

.hint,
.empty {
  color: var(--muted);
  font-size: 13px;
}

.results {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.result-item {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(24, 76, 102, 0.08);
}

.result-item strong {
  display: block;
  margin-bottom: 2px;
}

.result-item span,
.details span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.details {
  display: grid;
  gap: 7px;
}

.life-events {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.life-events-title {
  color: var(--primary-dark);
  font-weight: 800;
}

.life-events ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.life-events li {
  border-left: 3px solid var(--secondary-strong);
  padding-left: 9px;
}

.life-events li strong,
.life-events li span {
  display: block;
}

.viewer-wrap {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 18px;
  gap: 0;
}

.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-dark);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(24, 76, 102, 0.10);
}

.viewer-toolbar > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
}

.viewer-title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ancestry-side-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.viewer-toolbar button {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--primary-dark);
  background: #f8fcfd;
}

.viewer-toolbar .line-side-button {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 3px 10px rgba(24, 76, 102, 0.08);
}

.viewer-toolbar .line-side-button.paternal {
  border-color: #b9dcf4;
  background: #eef8ff;
  color: #15577f;
}

.viewer-toolbar .line-side-button.maternal {
  border-color: #dbc3ee;
  background: #f8f0ff;
  color: #7a3ba5;
}

.viewer-toolbar .line-side-button.paternal.active {
  border-color: #73b9e6;
  background: linear-gradient(135deg, #eef8ff 0%, #bfe4fb 100%);
  box-shadow: 0 0 0 3px rgba(115, 185, 230, 0.25), 0 8px 18px rgba(60, 130, 180, 0.18);
}

.viewer-toolbar .line-side-button.maternal.active {
  border-color: #b98add;
  background: linear-gradient(135deg, #f8f0ff 0%, #e1c4f5 100%);
  box-shadow: 0 0 0 3px rgba(185, 138, 221, 0.24), 0 8px 18px rgba(126, 60, 166, 0.18);
}

.viewer-toolbar .standard-view-button {
  min-width: 132px;
  margin-right: 6px;
  font-weight: 800;
}

.viewer-toolbar .standard-view-button.active {
  border-color: var(--secondary-strong);
  background: linear-gradient(135deg, #e7f7fb 0%, #d5eef7 100%);
  color: var(--accent-strong);
}

.viewer {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(30, 102, 132, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(30, 102, 132, 0.07) 1px, transparent 1px),
    linear-gradient(165deg, #f8fdff 0%, #edf8fb 100%);
  background-size: 28px 28px;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}

.edge-layer {
  position: absolute;
  left: -2400px;
  top: -1600px;
  width: 4800px;
  height: 3200px;
  pointer-events: none;
  overflow: visible;
}

.person-card {
  position: absolute;
  width: 190px;
  height: 112px;
  border: 1px solid #c7e5ee;
  border-left: 5px solid var(--secondary-strong);
  border-radius: 10px;
  background: #fff;
  padding: 10px 11px;
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.person-card.sex-male {
  background: #eef8ff;
  border-color: #b9dcf4;
  border-left-color: #73b9e6;
}

.person-card.sex-female {
  background: #f8f0ff;
  border-color: #dbc3ee;
  border-left-color: #b98add;
}

.person-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(24, 76, 102, 0.16);
}

.person-card.center {
  border-left-color: var(--warm);
  outline: 3px solid rgba(244, 162, 97, 0.28);
}

.person-card strong {
  display: block;
  line-height: 1.22;
  margin-bottom: 5px;
}

.person-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.person-card.privacy-blurred .person-card-content {
  filter: blur(5px);
  opacity: .62;
  user-select: none;
}

.person-card.privacy-blurred::after {
  content: "Datenschutz";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: var(--primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(24, 76, 102, .16);
  pointer-events: none;
}

.person-card .birth-line,
.person-card .death-line,
.result-item .birth-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.birth-flag {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(21, 32, 51, 0.22);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(18, 32, 51, 0.12);
  vertical-align: -2px;
}

.flag-de {
  background: linear-gradient(#000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66%);
}

.flag-ch {
  background:
    linear-gradient(90deg, transparent 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    #d52b1e;
}

.flag-at {
  background: linear-gradient(#ed2939 0 33.33%, #fff 33.33% 66.66%, #ed2939 66.66%);
}

.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33.33%, #fff 33.33% 66.66%, #ef4135 66.66%);
}

.flag-it {
  background: linear-gradient(90deg, #009246 0 33.33%, #fff 33.33% 66.66%, #ce2b37 66.66%);
}

.flag-es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%);
}

.flag-nl {
  background: linear-gradient(#ae1c28 0 33.33%, #fff 33.33% 66.66%, #21468b 66.66%);
}

.flag-pl {
  background: linear-gradient(#fff 0 50%, #dc143c 50%);
}

.flag-cz {
  background:
    linear-gradient(146deg, #11457e 0 38%, transparent 38%),
    linear-gradient(#fff 0 50%, #d7141a 50%);
}

.flag-ru {
  background: linear-gradient(#fff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66%);
}

.flag-us {
  background:
    linear-gradient(#b22234 0 7.69%, #fff 7.69% 15.38%, #b22234 15.38% 23.07%, #fff 23.07% 30.76%, #b22234 30.76% 38.45%, #fff 38.45% 46.14%, #b22234 46.14% 53.83%, #fff 53.83% 61.52%, #b22234 61.52% 69.21%, #fff 69.21% 76.9%, #b22234 76.9% 84.59%, #fff 84.59% 92.28%, #b22234 92.28%),
    linear-gradient(#3c3b6e, #3c3b6e);
  background-size: 100% 100%, 40% 54%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
}

.flag-gb {
  background:
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(transparent 34%, #fff 34% 66%, transparent 66%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 41%, #c8102e 41% 59%, transparent 59%),
    #012169;
}

.flag-ca {
  background: linear-gradient(90deg, #d80621 0 25%, #fff 25% 75%, #d80621 75%);
}

.flag-au {
  background: #012169;
}

.generation-label {
  position: absolute;
  width: 190px;
  text-align: center;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  color: var(--primary-dark);
  font-size: 20px;
}

.hidden {
  display: none;
}

@media (max-width: 900px) {
  .app-header {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
  }

  .header-title-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc(100vh - 122px);
  }

  .sidebar {
    max-height: 320px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .viewer-wrap {
    padding: 14px;
  }
}

/* 2026 family-album theme; graph geometry remains independent of presentation. */
:root{--primary:#244b3b;--primary-dark:#17372b;--secondary:#dbe7d8;--secondary-strong:#476b53;--bg:#f7f4ee;--panel:#fff;--ink:#26332d;--muted:#58645d;--line:#bac7bd;--accent:#244b3b;--accent-strong:#17372b;--warm:#925323;--shadow:none;--radius:8px}
[hidden]{display:none!important}body{background:var(--bg);line-height:1.5}button,input,select{font:inherit}button,.file-button,.back-button{min-height:44px;border-radius:6px;box-shadow:none;transition:background .15s,border-color .15s}button:hover,.file-button:hover,.back-button:hover{transform:none;box-shadow:none}:focus-visible{outline:3px solid #a65f25!important;outline-offset:3px}
.app-header{background:var(--primary);box-shadow:none;min-height:80px;padding:14px 24px;gap:20px}.app-header h1{font:400 1.6rem Georgia,serif;margin:0}.app-header p{margin:3px 0 0;font-size:.8rem;color:#e3ebe1}.app-header .database-date{font-size:.75rem}.header-actions{gap:8px}.header-actions button,.header-actions .file-button,#krapfLoadButton,.header-actions button:hover,.header-actions .file-button:hover{background:#f7f4ee;color:var(--primary-dark);box-shadow:none;transform:none;border:1px solid #dbe7d8;border-radius:6px;padding:9px 12px;font-size:.83rem}.header-actions button:hover,.header-actions .file-button:hover{background:#dbe7d8}
.import-help{padding:10px 24px;border-bottom:1px solid var(--line);font-size:.84rem;background:#e9ede5}.import-help summary{cursor:pointer;min-height:32px;padding:4px 0;color:var(--primary);font-weight:600}.import-help p{max-width:900px}.import-help label{display:flex;align-items:flex-start;gap:10px}.import-help input[type=checkbox]{width:20px;min-height:20px;margin:3px 0}
.app-shell{grid-template-columns:auto minmax(0,1fr);height:calc(100vh - 135px);min-height:600px}.sidebar-disclosure{width:240px;background:#e9ede5;border-right:1px solid var(--line);overflow:auto}.sidebar-disclosure[open]{width:330px}.sidebar-disclosure>summary{min-height:48px;padding:14px 18px;cursor:pointer;font-size:.9rem;font-weight:650;color:var(--primary);border-bottom:1px solid var(--line)}.sidebar{padding:16px;background:none;border:0;overflow:visible}.panel{padding:18px;border-radius:8px;box-shadow:none}.panel h2{font-size:1rem}.panel label{font-size:.88rem}.panel input,.panel select{width:100%;min-height:44px;background:#fff;border:1px solid #899b8c;border-radius:5px;padding:9px 10px;color:var(--ink)}.panel input::placeholder{color:var(--muted)}#searchButton,#searchButton:hover{background:var(--primary);color:#fff;border-radius:5px;box-shadow:none;min-height:44px}.panel-action-button,.home-view-button{min-height:44px;min-width:44px;border-radius:5px;background:#f7f4ee;box-shadow:none;border-color:var(--line);color:var(--primary)}.panel-action-button.active,.panel-action-button:hover,.home-view-button:hover{animation:none;background:#dbe7d8;color:var(--primary-dark);box-shadow:none;border-color:var(--primary);transform:none}.result-item{box-shadow:none}.hint,.empty,.result-item span,.details span{font-size:.84rem;line-height:1.55}.results{max-height:280px}
.viewer-wrap{padding:18px;grid-template-rows:auto auto minmax(400px,1fr) auto;align-content:start;min-height:600px}.viewer-toolbar{box-shadow:none;background:white;border:1px solid var(--line);padding:10px 12px;gap:10px}.viewer-toolbar button{min-height:44px;min-width:44px;background:#f7f4ee;border-color:var(--line);font-size:.82rem}.viewer-toolbar .standard-view-button.active{background:#dbe7d8;color:var(--primary);border-color:var(--primary)}.viewer-toolbar .line-side-button{box-shadow:none;border-radius:5px;font-size:.8rem}.viewer-toolbar .line-side-button.active{box-shadow:none;border:2px solid currentColor}.viewer-help{font-size:.76rem;color:var(--muted);margin:0;padding:8px 12px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:white}.viewer{min-height:400px;background-color:#f9f8f4;background-image:radial-gradient(circle,#ced6cb 1px,transparent 1px);background-size:26px 26px;box-shadow:none}.tree-list{padding:12px 0;color:var(--primary);font-size:.9rem}.tree-list summary{cursor:pointer;min-height:44px;padding:10px}.tree-list ul{padding-left:24px}.tree-list button{margin:4px}.empty-state{padding:24px}.empty-state strong{font-size:1.1rem}.empty-state p{max-width:420px;font-size:.9rem}.person-card{box-shadow:0 2px 6px #17372b0a}
@media(max-width:1000px){.app-header{flex-wrap:wrap}.header-title-wrap{flex-direction:row;align-items:center}.app-shell{height:auto}.sidebar-disclosure[open]{width:300px}}
@media(max-width:760px){.app-header{padding:12px 16px;gap:12px;align-items:flex-start;flex-direction:column}.header-title-wrap{gap:12px;align-items:center;flex-direction:row}.app-header h1{font-size:1.25rem}.header-back{min-width:0;padding:8px 10px;font-size:.8rem}.header-actions{width:100%;gap:8px;justify-content:flex-start}.header-actions button,.header-actions .file-button{font-size:.78rem;padding:9px 10px}.import-help{padding:6px 16px}.app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:0;height:auto}.sidebar-disclosure,.sidebar-disclosure[open]{width:100%;border-right:0}.sidebar-disclosure>summary{min-height:48px;padding:12px 16px}.sidebar{max-height:55vh;overflow:auto;padding:12px;border-bottom:1px solid var(--line)}.panel{padding:16px;margin-bottom:12px}.viewer-wrap{padding:12px;min-height:580px;grid-template-rows:auto auto minmax(370px,65vh) auto}.viewer{min-height:370px}.viewer-toolbar{padding:10px;gap:8px}.viewer-toolbar>div:last-child{justify-content:flex-start}.viewer-title-group{font-size:.9rem;gap:8px}.viewer-toolbar .standard-view-button{min-width:0;margin-right:0}.viewer-help{padding:8px 10px;font-size:.74rem}.ancestry-side-controls{flex-wrap:wrap}.viewer-toolbar .line-side-button{font-size:.72rem}.tree-list{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.app-header,.sidebar-disclosure,.import-help,.viewer-toolbar,.viewer-help{display:none}.app-shell{display:block;height:auto}.viewer-wrap{display:block}.tree-list{display:block}}
@media print{
 .app-header{display:block;background:white;color:black;padding:0 0 16px}.app-header h1,.app-header p{color:black}.header-actions,.back-button,.viewer,.viewer-toolbar,.viewer-help,.sidebar-disclosure,.import-help{display:none!important}.tree-list{display:block!important;color:black}.tree-list:not([open])>*{display:block!important}#treeList{display:block!important}.tree-list button{border:0;background:white;color:black;padding:0;min-height:0}.tree-list summary{display:none}.local-dataset>*{display:none!important}.local-dataset::before{content:'Lokale private Daten werden nicht gedruckt.';display:block;color:black;padding:24px}
}
/* Touch: the tree handles drag and pinch itself; the page still scrolls outside the tree. */
.viewer{touch-action:none;-webkit-user-select:none;user-select:none}
.more-results{width:100%;margin-top:8px;background:#f7f4ee;border:1px solid var(--line);color:var(--primary);font-weight:600;cursor:pointer}
.more-results:hover{background:#dbe7d8}
/* Shown only when the module never starts (old browser, file://); app.js removes it. The delay avoids a flash while loading. */
.legacy-browser-hint{margin:0;padding:8px 24px;font-size:.84rem;color:#5b3a12;background:#fff4df;border-bottom:1px solid #e8cfa4;animation:legacy-hint-delay 4s step-end}
@keyframes legacy-hint-delay{from{visibility:hidden}to{visibility:visible}}
/* Phones: the tree stays shorter than the screen (also in landscape) so the page can always be scrolled outside it. */
@media(max-width:760px){.viewer-wrap{grid-template-rows:auto auto minmax(min(370px,70vh),65vh) auto}.viewer{min-height:min(370px,70vh)}}
/* Site navigation (same markup as the other pages; the viewer does not load site.css). */
.skip-link{position:fixed;left:16px;top:-100px;background:#fff;color:var(--primary);padding:12px 20px;z-index:9999;border:2px solid var(--primary)}
.skip-link:focus{top:12px}
#main-nav{position:relative;background:var(--bg);border-bottom:1px solid var(--line);z-index:1000}
#main-nav .nav-inner{max-width:1300px;min-height:64px;margin:auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
#main-nav .nav-brand{font:600 1.15rem Georgia,serif;color:var(--primary);text-decoration:none;line-height:1.2}
#main-nav .nav-brand span{display:block;margin-top:4px;color:var(--muted);font:500 .67rem system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
#main-nav .nav-links{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
#main-nav .nav-links a{display:flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:6px;color:var(--primary);font-size:.88rem;font-weight:550;text-decoration:none;white-space:nowrap}
#main-nav .nav-links a:hover{background:#e5eadd;color:var(--primary-dark)}
#main-nav .nav-links a[aria-current="page"]{background:#e5eadd;color:var(--primary-dark);box-shadow:inset 0 -2px 0 var(--warm)}
#main-nav .hamburger{display:none;flex:none;flex-direction:column;gap:5px;width:44px;height:44px;min-width:44px;min-height:44px;padding:6px;background:none;border:0;border-radius:6px;align-items:center;justify-content:center;cursor:pointer}
#main-nav .hamburger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--primary)}
@media(min-width:1001px){.app-shell{height:calc(100vh - 199px)}}
@media(max-width:760px){
 #main-nav .nav-inner{padding:8px 16px;gap:8px}
 #main-nav .nav-brand{margin-right:auto;font-size:1.05rem}
 #main-nav .hamburger{display:flex;order:3}
 #main-nav .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;gap:0;box-shadow:0 8px 20px #17372b1a}
 #main-nav .nav-links.open{display:flex}
 #main-nav .nav-links a{width:100%;padding:12px}
}
@media print{#main-nav,.skip-link{display:none}}
.app-header .link-notice{margin:8px 0 0;padding:8px 12px;border:1px solid #e8cfa4;border-radius:6px;background:#fff4df;color:#5b3a12;font-size:.86rem}
/* Shared typography and header brand (design "Variante D"); the viewer does not load site.css. Fonts: SIL OFL 1.1, see ../assets/v2026-09/fonts-OFL.txt. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/v2026-09/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../assets/v2026-09/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(../assets/v2026-09/source-sans-3-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(../assets/v2026-09/source-sans-3-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--font-display:"Fraunces",Georgia,"Times New Roman",serif;--font-body:"Source Sans 3",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{font-family:var(--font-body)}
.app-header h1{font-family:var(--font-display);font-weight:400}
#main-nav{background:#F6F1E7;border-bottom-color:#E2D8C6}
#main-nav .nav-brand{font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:#1F2A22}
#main-nav .nav-brand span{font-family:var(--font-body);font-weight:400;font-size:.7rem;letter-spacing:.22em;color:#5B5B52}
#main-nav .nav-links a{font-family:var(--font-body);font-size:1rem;font-weight:600;color:#1F2A22}
#main-nav .nav-links a:hover{background:#EFE7D8;color:#1F2A22}
#main-nav .nav-links a[aria-current="page"]{background:transparent;color:#1F2A22;border-radius:0;box-shadow:inset 0 -2px 0 #8A4B22}
#main-nav .hamburger{background:#2E4A36;border-radius:10px}#main-nav .hamburger span{background:#fff;width:22px}
@media(max-width:760px){#main-nav .nav-links a[aria-current="page"]{box-shadow:inset 3px 0 0 #8A4B22}}

/* Legal links (Impressum/Datenschutz must be reachable from every page). */
.viewer-legal { padding: 18px 16px 28px; text-align: center; color: var(--muted); font-size: .9rem; }
.viewer-legal a { color: var(--primary-dark); }