/* Startseite Familienarchiv – Fassung 4 (03.10.2026, Claude) nach Helges Vorlage 17:27.
   Zwei Bildfassungen: breit (2,1:1, Mitte inhaltsbewusst verbreitert) für breite Bildschirme, normal (16:9) sonst.
   Das Bild füllt immer die volle Breite und bleibt vollständig sichtbar. Alle Maße in Bild-Pixeln × --s. */
:root {
  --iw: 1672; --ih: 941; --bild: url("/willkommen/hintergrund_normal.jpg");
  --kopf-l: 224; --kasten-l: 237;
  --tinte: #2b2119; --tinte-sanft: #5d4c3c; --rahmen: #d6c8b0; --knopf: #5a3720; --knopf-hover: #432815;
}
@media (min-aspect-ratio: 194/100) {
  :root { --iw: 1976; --bild: url("/willkommen/hintergrund_breit.jpg"); --kopf-l: 356; --kasten-l: 383; }
}
:root {
  --s: calc(100vw / var(--iw));
  --bh: calc(var(--ih) * var(--s));
  --oben: min(0px, calc((100vh - var(--bh)) / 2));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #f9f2e3; color: var(--tinte); font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
body { overflow: hidden; }
.buehne { position: absolute; left: 0; top: var(--oben); width: 100vw; height: var(--bh); background: var(--bild) 0 0 / 100% 100% no-repeat; }
.kopf { position: absolute; left: calc(var(--kopf-l) * var(--s)); width: calc(719 * var(--s)); top: max(calc(60 * var(--s)), calc(-1 * var(--oben) + 12px)); text-align: center; }
.kopf h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: calc(67.7 * var(--s)); line-height: 1.15; white-space: nowrap; }
.linie { display: flex; align-items: center; gap: calc(20 * var(--s)); margin-top: calc(20 * var(--s)); color: var(--tinte-sanft); }
.linie::before, .linie::after { content: ""; flex: 1; border-top: 1px solid #8f7a62; }
.linie span { font-family: Georgia, "Times New Roman", serif; font-size: calc(28.1 * var(--s)); white-space: nowrap; }
.linie.klein { margin: calc(11.7 * var(--s)) auto 0; width: 50%; }
.linie.klein span { font-size: calc(16.4 * var(--s)); font-style: italic; letter-spacing: 0.04em; }
.kasten {
  position: absolute; left: calc(var(--kasten-l) * var(--s)); top: calc(250 * var(--s)); width: calc(666 * var(--s));
  font-size: calc(17.6 * var(--s)); padding: 2.1em 2.1em 1.6em;
  background: rgba(253, 251, 246, 0.9); border: 1px solid var(--rahmen); border-radius: 0.5em;
  box-shadow: 0 0.3em 1.4em rgba(90, 60, 30, 0.08);
}
.kasten label { display: block; font-weight: 600; font-size: 1.22em; margin: 0 0 0.6em; }
.kasten input[type="text"], .kasten input[type="password"] {
  display: block; width: 100%; height: 3.3em; margin: 0 0 1.6em; padding: 0 0.9em;
  font: inherit; font-size: 1.1em; color: var(--tinte); background: #fff; border: 1px solid #b9b2a8; border-radius: 0.3em;
}
.kasten input:focus { outline: 2px solid #8a5a35; outline-offset: 1px; }
.kasten button { display: block; width: 100%; height: 3.6em; margin-top: 0.4em; border: 0; border-radius: 0.3em; background: var(--knopf); color: #fff; font: inherit; font-size: 1.3em; font-weight: 600; cursor: pointer; }
.kasten button:hover, .kasten button:focus { background: var(--knopf-hover); }
.vergessen { display: inline-block; margin-top: 1.4em; color: var(--tinte-sanft); font-size: 1.1em; text-decoration: underline; text-underline-offset: 0.2em; }
.kasten hr { border: 0; border-top: 1px solid var(--rahmen); margin: 1.3em 0 0; }
.hinweis { margin: 1.4em 0 0; text-align: center; color: #6b5d50; font-size: 0.95em; }
.wappen-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Hochformat / Handy */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  body { overflow: auto; background: #f1e7d6; }
  .buehne { position: static; width: auto; height: auto; min-height: 100%; padding: calc(100vw * 810 / 740 - 2vw) 1rem 2rem; background: url("/willkommen/wappen_handy.jpg") center 0 / 100vw auto no-repeat; }
  .kopf, .kasten { position: static; width: auto; max-width: 30rem; margin: 0 auto; }
  .kopf h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); white-space: normal; }
  .linie span { font-size: clamp(0.85rem, 3.6vw, 1.1rem); white-space: normal; }
  .linie.klein span { font-size: 0.85rem; }
  .kasten { margin-top: 1.2rem; font-size: 15px; }
}