/* myfamilytree.at – gemeinsame Grundlage aller Seiten
   Farben und Schriften folgen der App, damit der Übergang nahtlos wirkt.
   Diese Datei laden Startseite UND Rechtstexte; nur so bleiben Kopfzeile,
   Fußzeile und Typografie an einer Stelle gepflegt. */

:root{
  /* Hell, und zwar dieselben Werte wie in der App (app/index.html,
     :root). Die Farben kommen aus dem Zeichen: ein Baum aus drei
     Menschen in zwei Blautönen. Wer hier etwas ändert, ändert es dort
     mit - der Übergang von der Startseite in die App soll nicht
     auffallen. */
  --bg:#f4f7fb;
  --bg-deep:#edf2f8;
  --panel:#ffffff;
  --card:#ffffff;
  --card-border:#d5e0ec;
  --akzent:#3a76ad;
  --akzent-tief:#2c6396;
  --akzent-hell:#68a0d0;
  --auf-akzent:#ffffff;
  --rose:#b4577c;
  --steel:#3d77a8;
  --text:#16202c;
  --muted:#5a6779;
  --radius:12px;
  --maxw:1080px;

  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Fraunces',Georgia,serif;

  /* Seitlicher Rand des Inhalts. Am Handy schmaler, damit Textzeilen nicht
     unnötig kurz werden. */
  --gutter:22px;

  /* Geräteränder (Kerbe, Wischbalken). Am Rechner alle 0. */
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);

  /* Umbruchpunkte. CSS kann Variablen in @media nicht auswerten – die
     Zahlen stehen darum wörtlich in den Blöcken:
       900px – Kopfzeile klappt zusammen, zweispaltiges wird einspaltig
       620px – alles einspaltig, Abstände und Schriften schrumpfen        */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto}
a{color:var(--akzent-tief)}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--akzent);color:var(--auf-akzent);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;z-index:100;
}
.skip:focus{left:0}

.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding:0 max(var(--gutter),var(--safe-r)) 0 max(var(--gutter),var(--safe-l));
}

/* ---------- Typografie ----------
   Die mittleren vw-Werte sind so gewählt, dass sie am Handy tatsächlich
   greifen. Mit den früheren 4.6vw bzw. 3.6vw war der Term unterhalb von
   rund 700px Breite wirkungslos, und es blieb eine harte Untergrenze von
   33px – rund zehn Zeichen pro Zeile auf einem 360px breiten Bildschirm. */
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
h2{font-size:clamp(22px,5.2vw,34px);margin:0 0 12px;line-height:1.25}
h3{font-size:clamp(16px,3.4vw,17.5px);margin:0 0 6px;line-height:1.35}
.lead{color:var(--muted);font-size:clamp(15px,3.6vw,16.5px);margin:0}
.eyebrow{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent);font-weight:600;display:block;margin-bottom:10px;
}

/* ---------- Kopfzeile ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--card-border);
}
.site-header .wrap{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;margin-right:auto}
.brand-text{display:flex;flex-direction:column;min-width:0}
/* Das Zeichen der App - dasselbe wie am Startbildschirm und im
   Ladebildschirm, damit ein Besucher die App wiedererkennt, wenn er sie
   spaeter auf seinem Telefon sucht. */
.brand-logo{width:44px;height:44px;flex:none;border-radius:11px}
.brand .eyebrow{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent);font-weight:600;line-height:1.4;margin-bottom:0;
}
.brand strong{
  font-family:var(--font-display);font-weight:600;font-size:19px;
  color:var(--text);letter-spacing:.01em;
}
.brand strong em{color:var(--akzent-tief);font-style:italic;font-weight:500}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}
.header-actions{display:flex;gap:10px;align-items:center}

/* ---------- Handy-Menü, ganz ohne JavaScript ----------
   <details> übernimmt das Auf- und Zuklappen. Am Rechner wird der
   Auslöser ausgeblendet und der Inhalt wieder als Zeile dargestellt –
   dann verhält sich <details> wie ein schlichter Behälter, unabhängig
   davon, ob es gerade offen ist. */
.nav-toggle{display:none}
.nav-toggle > summary{
  list-style:none;cursor:pointer;
  width:44px;height:44px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--card-border);border-radius:8px;
  background:var(--panel);color:var(--text);font-size:18px;line-height:1;
}
.nav-toggle > summary::-webkit-details-marker{display:none}
.nav-toggle[open] > summary{border-color:var(--akzent);color:var(--akzent-tief)}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;padding:11px 20px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:1px solid var(--card-border);
  background:var(--panel);color:var(--text);
  transition:border-color .15s,background .15s,transform .15s;
  white-space:nowrap;cursor:pointer;touch-action:manipulation;
}
.btn-primary{background:var(--akzent);color:var(--auf-akzent);border-color:var(--akzent)}
.btn-ghost{background:transparent}
.btn-lg{padding:14px 26px;font-size:15.5px}

/* ---------- Fußzeile ---------- */
.site-footer{background:var(--bg-deep);border-top:1px solid var(--card-border);padding:46px 0 40px}
.footer-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.footer-top p{margin:8px 0 0;color:var(--muted);font-size:13.5px;max-width:32em}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:13.5px}
.footer-bottom{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--card-border);
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  color:var(--muted);font-size:12.5px;
}

/* Nur Geräte mit echtem Zeiger bekommen Schwebe-Zustände; am Finger
   blieben sie nach dem Antippen kleben. */
@media (hover:hover){
  .nav-links a:hover{color:var(--text)}
  .btn:hover{border-color:var(--akzent);transform:translateY(-1px)}
  .btn-primary:hover{background:var(--akzent-tief);border-color:var(--akzent-tief)}
  .footer-links a:hover{color:var(--akzent-tief)}
}

/* ---------- Kopfzeile am Handy ---------- */
@media (max-width:900px){
  .site-header .wrap{gap:10px}
  /* Die Links wandern in die Klappe. Vorher verschwanden sie hier
     ersatzlos – die vier Abschnitte waren am Handy nicht erreichbar. */
  .nav-links{display:none}
  .nav-toggle{display:block;position:relative}
  .nav-toggle > summary{display:flex}
  .nav-toggle > .nav-panel{
    position:absolute;right:0;top:calc(100% + 10px);z-index:60;
    min-width:220px;
    display:flex;flex-direction:column;gap:2px;
    background:var(--panel);border:1px solid var(--card-border);
    border-radius:var(--radius);padding:8px;
    box-shadow:0 18px 44px rgba(22,42,68,.16);
  }
  .nav-toggle > .nav-panel a{
    display:flex;align-items:center;min-height:44px;
    padding:0 12px;border-radius:8px;font-size:15px;
    color:var(--text);text-decoration:none;
  }
  .nav-toggle > .nav-panel a.is-cta{color:var(--akzent-tief);font-weight:600}
  .nav-toggle > .nav-panel hr{
    border:none;border-top:1px solid var(--card-border);margin:6px 4px;
  }
  /* „Anmelden“ liegt am Handy in der Klappe, damit die Kopfzeile nicht
     überläuft. „Loslegen“ bleibt als einziger Knopf sichtbar. */
  .header-actions .btn-ghost{display:none}
}

@media (max-width:620px){
  :root{--gutter:16px}
  /* Die Kopfzeile muss auch mit langen Knopfbeschriftungen in 360px passen –
     „Zur Anwendung“ auf den Rechtstexten ist deutlich breiter als
     „Loslegen“ auf der Startseite. Marke darf schrumpfen und umbrechen,
     der Knopf wird kompakter. */
  .site-header .wrap{gap:8px}
  .brand{min-width:0}
  .header-actions{flex:none}
  .header-actions .btn{padding:9px 12px;font-size:13.5px}
  .brand strong{font-size:17px}
  .brand{gap:8px}
  .brand-logo{width:34px;height:34px;border-radius:9px}
  .brand .eyebrow{font-size:9.5px}
  .footer-top,.footer-bottom{flex-direction:column;gap:14px}
  .footer-links{flex-direction:column;gap:2px}
  .footer-links a{display:flex;align-items:center;min-height:38px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}