:root { --gold:#c8922a; --rblue:#5B9BD5; --blue:#2E75B6; --grey:#7F8C8D; --lgrey:#95a5a6; --dark:#0d1117; --paper:#f4efe4; --border:rgba(91,155,213,0.2); }
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x:hidden; }
body { background:var(--dark); color:#e8e6e0; font-family:Georgia,'Times New Roman',serif; line-height:1.6; overflow-wrap:break-word; }
img { display:block; max-width:100%; height:auto; }

.hero { padding:3rem 2rem 3rem; max-width:1080px; margin:0 auto; }
.hero-tag { font-family:-apple-system,sans-serif; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; }
.hero h1 { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:400; letter-spacing:-0.01em; color:#fff; line-height:1.1; margin-bottom:1rem; }
.hero h1 em { color:var(--rblue); font-style:italic; }
.hero-lede { font-size:clamp(1rem,1.7vw,1.2rem); font-style:italic; color:#cfc8b8; max-width:720px; line-height:1.55; margin-bottom:2rem; }
.hero-shot { margin-top:2.5rem; }

.dl { display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center; margin-bottom:1rem; }
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1.3rem; font-family:-apple-system,sans-serif; font-size:0.86rem; font-weight:500; text-decoration:none; border-radius:3px; transition:all 0.2s; }
.btn-main { background:var(--blue); color:#fff; }
.btn-main:hover { background:var(--rblue); }
.btn-ghost { color:var(--rblue); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--rblue); color:#fff; }
.dl-note { font-family:-apple-system,sans-serif; font-size:0.76rem; color:var(--grey); line-height:1.7; max-width:720px; }
.dl-note strong { color:#cfc8b8; font-weight:500; }

.divider { max-width:1080px; margin:0 auto; height:1px; background:linear-gradient(to right, transparent, var(--border), transparent); }

section { padding:4rem 2rem; max-width:1080px; margin:0 auto; }
.section-label { font-family:-apple-system,sans-serif; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.section-title { font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:400; line-height:1.2; color:#fff; margin-bottom:1.2rem; }
.section-title em { color:var(--rblue); font-style:italic; }
.prose p { margin-bottom:1rem; color:#cfc8b8; line-height:1.7; max-width:720px; }
.prose p strong { color:#e8e6e0; font-weight:500; }
.prose a, .dl-note a, .credits a { color:var(--rblue); text-decoration:none; border-bottom:1px dotted var(--rblue); }
.prose a:hover { color:#fff; border-bottom-color:#fff; }

.shot { margin:2rem 0 0; }
.shot img { border:1px solid var(--border); border-radius:4px; cursor:zoom-in; box-shadow:0 10px 40px rgba(0,0,0,0.45); }
.shot figcaption, .grid figcaption { font-family:-apple-system,sans-serif; font-size:0.78rem; color:var(--lgrey); margin-top:0.7rem; line-height:1.55; }
.shot figcaption strong, .grid figcaption strong { color:#e8e6e0; font-weight:500; }

.grid { display:grid; gap:1.6rem; margin-top:2rem; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid figure img { border:1px solid var(--border); border-radius:4px; cursor:zoom-in; }
.grid.paper figure img { background:#fff; border-color:rgba(255,255,255,0.15); box-shadow:0 6px 24px rgba(0,0,0,0.5); }
.grid.phone figure img { border-radius:14px; border:2px solid #2a3140; }

.facts { display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem 2rem; margin-top:1.6rem; max-width:900px; }
.facts li { list-style:none; font-size:0.95rem; color:#cfc8b8; padding-left:1.1rem; position:relative; line-height:1.55; }
.facts li::before { content:""; position:absolute; left:0; top:0.62em; width:6px; height:6px; background:var(--gold); border-radius:1px; }
.facts li strong { color:#fff; font-weight:500; }

.need { margin-top:1.5rem; padding:1.3rem 1.6rem; border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:3px; background:rgba(46,117,182,0.04); max-width:820px; }
.need p { color:#cfc8b8; font-size:0.95rem; line-height:1.65; margin-bottom:0.6rem; }
.need p:last-child { margin-bottom:0; }
.need a { color:var(--rblue); text-decoration:none; border-bottom:1px dotted var(--rblue); }

.neu { margin:0 0 2rem; padding:1.2rem 1.5rem; border:1px solid rgba(200,146,42,0.45); border-left:4px solid var(--gold); border-radius:3px; background:rgba(200,146,42,0.07); max-width:820px; }
.neu-tag { font-family:-apple-system,sans-serif; font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.35rem; }
.neu-title { font-size:1.35rem; color:#fff; line-height:1.3; margin-bottom:0.4rem; }
.neu p { color:#cfc8b8; font-size:0.97rem; line-height:1.6; }
.neu a { color:var(--rblue); text-decoration:none; border-bottom:1px dotted var(--rblue); }
.steps { margin:1.2rem 0 0 1.3rem; max-width:820px; }
.steps li { color:#cfc8b8; font-size:0.95rem; line-height:1.6; margin-bottom:0.5rem; padding-left:0.3rem; }
.steps li strong { color:#fff; font-weight:500; }
.sibling { display:block; margin-top:1.5rem; padding:1.4rem 1.7rem; border:1px solid var(--border); border-left:3px solid var(--rblue); border-radius:3px; text-decoration:none; color:inherit; transition:all 0.2s; max-width:820px; }
.sibling:hover { background:rgba(46,117,182,0.08); transform:translateY(-1px); }
.sibling-cat { font-family:-apple-system,sans-serif; font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
.sibling-title { font-size:1.3rem; color:#fff; margin:0.2rem 0 0.3rem; }
.sibling-desc { font-size:0.93rem; color:#cfc8b8; }

.credits { font-family:-apple-system,sans-serif; font-size:0.7rem; color:var(--grey); line-height:1.7; max-width:880px; }

footer { padding:3rem 2rem 4rem; max-width:1080px; margin:0 auto; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-family:-apple-system,sans-serif; font-size:0.74rem; color:var(--grey); }
footer a { color:var(--lgrey); text-decoration:none; }
footer a:hover { color:var(--rblue); }

#lb { position:fixed; inset:0; background:rgba(5,8,12,0.94); display:none; align-items:center; justify-content:center; padding:2vh 2vw; z-index:10; cursor:zoom-out; }
#lb.on { display:flex; }
#lb img { max-width:96vw; max-height:94vh; width:auto; height:auto; border-radius:4px; }

@media(max-width:860px){
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .facts { grid-template-columns:1fr; }
}
@media(max-width:560px){
  .hero { padding:2rem 1rem 2.5rem; }
  section { padding:3rem 1rem; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .grid.phone { grid-template-columns:repeat(2,1fr); gap:1rem; }
  footer { flex-direction:column; padding:2.5rem 1rem 3rem; }
}

/* Navigationsleiste und Startseiten-Bausteine (04.10.2026, nach dem Vorbild ahnenblatt.de: kurze Startseite, Unterseiten) */
.topnav { position:sticky; top:0; z-index:5; background:rgba(13,17,23,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border); }
.topnav-in { max-width:1080px; margin:0 auto; padding:0.7rem 2rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 1.3rem; font-family:-apple-system,sans-serif; font-size:0.82rem; }
.topnav .brand { color:#fff; font-weight:600; margin-right:auto; text-decoration:none; letter-spacing:0.02em; }
.topnav a { color:var(--lgrey); text-decoration:none; }
.topnav a:hover, .topnav a.on { color:var(--rblue); }
.topnav a.dlnav { color:#fff; background:var(--blue); padding:0.3rem 0.8rem; border-radius:3px; }
.topnav a.dlnav:hover { background:var(--rblue); color:#fff; }
.ver { font-family:-apple-system,sans-serif; font-size:0.84rem; color:var(--gold); margin-bottom:1.3rem; }
.ver a { color:var(--gold); }
details.hint { max-width:760px; margin-top:0.4rem; font-family:-apple-system,sans-serif; font-size:0.78rem; color:var(--grey); }
details.hint summary { cursor:pointer; color:var(--lgrey); }
details.hint p { margin-top:0.5rem; line-height:1.7; }
details.hint strong { color:#cfc8b8; font-weight:500; }
.news { list-style:none; max-width:860px; margin-top:0.5rem; }
.news li { display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:0.85rem 0; border-bottom:1px solid var(--border); }
.news .when { font-family:-apple-system,sans-serif; font-size:0.76rem; color:var(--gold); padding-top:0.2rem; }
.news .what { color:#cfc8b8; font-size:0.97rem; line-height:1.55; }
.news .what strong { color:#fff; font-weight:500; }
.news a, .more a { color:var(--rblue); text-decoration:none; border-bottom:1px dotted var(--rblue); }
.more { font-family:-apple-system,sans-serif; font-size:0.84rem; margin-top:1rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.2rem; margin-top:1.6rem; }
.tile { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:4px; overflow:hidden; text-decoration:none; color:inherit; transition:all 0.2s; background:rgba(46,117,182,0.03); }
.tile:hover { border-color:var(--rblue); transform:translateY(-2px); }
.tile img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top left; border-bottom:1px solid var(--border); }
.tile.paper img { background:#fff; object-fit:contain; object-position:center; }
.tile-body { padding:0.9rem 1rem 1.1rem; }
.tile-body h3 { font-size:1.08rem; font-weight:400; color:#fff; margin-bottom:0.3rem; }
.tile-body p { font-size:0.88rem; color:#cfc8b8; line-height:1.5; }
.history { width:100%; max-width:900px; border-collapse:collapse; margin-top:1rem; }
.history td { padding:0.7rem 0.6rem; border-bottom:1px solid var(--border); vertical-align:top; color:#cfc8b8; font-size:0.94rem; line-height:1.55; }
.history td:first-child { font-family:-apple-system,sans-serif; white-space:nowrap; color:#fff; font-size:0.86rem; }
.history td:nth-child(2) { font-family:-apple-system,sans-serif; white-space:nowrap; color:var(--gold); font-size:0.78rem; }
.history a { color:var(--rblue); text-decoration:none; }
@media(max-width:560px){
  .topnav-in { padding:0.6rem 1rem; gap:0.3rem 0.9rem; font-size:0.78rem; }
  .topnav .brand { width:100%; }
  .news li { grid-template-columns:1fr; gap:0.2rem; }
  .history td:nth-child(2) { display:none; }
}
section[id], header[id] { scroll-margin-top:4rem; }
.topnav a.lang, a.lang { border:1px solid var(--border); padding:0.15rem 0.6rem; border-radius:3px; font-size:0.78rem; }
.langbar { text-align:center; font-family:-apple-system,sans-serif; font-size:0.82rem; padding:0.5rem 1rem; background:rgba(46,117,182,0.18); color:#cfc8b8; }
.langbar a { color:#fff; text-decoration:none; border-bottom:1px dotted #fff; }