/* ============================================================
   HeyNative — Basis-Stylesheet
   Brand Guide v1.3: Graphite Header · White Body · Graphite Footer
   Farben: Graphite #15171A · Electric Blue #2F80FF
           Signal Orange #FF6A00 ausschließlich im Logo
   Raster: 8 px · Oxanium spricht, Inter erklärt
   ============================================================ */

@font-face{
  font-family:"Oxanium";
  src:url("fonts/Oxanium-latin.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-latin.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --graphite:#15171A;
  --white:#FFFFFF;
  --blue:#2F80FF;
  --box:#F3F6FA;
  --line:#DDE3EA;
  --meta:#68717C;
  --text:#202328;
  --pad:48px;
  --logo-w:200px;
  --header-h:132px;   /* 32 + 68 (Logo) + 32 */
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:28px;
  -webkit-font-smoothing:antialiased;
}

img{display:block; max-width:100%;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:4px;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Graphite Header ---------- */
.site-header{
  background:var(--graphite);
  padding:32px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.brand{display:block; line-height:0;}
.brand img{width:var(--logo-w); height:auto;}

.nav{display:flex; align-items:center; gap:32px;}
.nav-item{
  font-family:"Oxanium",sans-serif; font-weight:500; font-size:14px; line-height:20px;
  letter-spacing:.02em; color:rgba(255,255,255,.7); white-space:nowrap;
}
.nav-item[aria-current="page"]{color:var(--white);}
.nav-item.is-placeholder{cursor:default; color:rgba(255,255,255,.45);}

/* ---------- Hero: Bild flächenfüllend ---------- */
.hero{
  position:relative;
  min-height:calc(100svh - var(--header-h));
  display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden;
  background:var(--graphite); /* Fallback, bis das Bild geladen ist */
}
.hero-picture{position:absolute; inset:0;}
/* Unten verankert: Die beiden Figuren stehen am unteren Bildrand, oben bleibt
   Himmel für die Schrift. Bei flachen Fenstern wird oben beschnitten, nie unten. */
.hero-picture img{width:100%; height:100%; object-fit:cover; object-position:50% 100%;}

/* Heller Schleier oben: trägt die blaue Schrift auf dem Morgenhimmel
   (Kontrast gemessen: 3,08:1, siehe site/README.md). */
.hero::after{
  content:""; position:absolute; inset:0 0 auto 0; height:58%;
  background:linear-gradient(180deg,
    rgba(255,255,255,.68) 0%,
    rgba(255,255,255,.48) 40%,
    rgba(255,255,255,.12) 78%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.hero-claim{
  position:relative; z-index:2;
  margin:0;
  padding:clamp(32px,6vh,88px) var(--pad) 0;
  font-family:"Oxanium",sans-serif;
  font-weight:800;
  /* Die Schrift hängt auch an der Fensterhöhe, damit sie bei sehr flachem
     Fenster nicht in die Köpfe im Bild läuft. */
  font-size:clamp(54px,min(12vw,30svh),180px);
  line-height:.94;
  letter-spacing:-.025em;
  color:var(--blue);
  text-align:center;
}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.page{
  max-width:760px; margin:0 auto;
  padding:72px var(--pad) 104px;
}
.page .kicker{
  margin:0 0 16px;
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:12px; line-height:18px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.page h1{
  margin:0 0 24px;
  font-family:"Oxanium",sans-serif; font-weight:800;
  font-size:clamp(34px,4.6vw,56px); line-height:1.02; letter-spacing:-.02em;
  color:var(--graphite);
}
.page h2{
  margin:48px 0 12px;
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:20px; line-height:28px;
  letter-spacing:-.01em; color:var(--graphite);
}
.page p, .page li{font-size:17px; line-height:28px; color:var(--text);}
.page p{margin:0 0 16px;}
.page ul{margin:0 0 16px; padding-left:22px; display:grid; gap:6px;}
.page address{font-style:normal; margin:0 0 16px; padding-left:16px; border-left:2px solid var(--line);}
.page .lead{font-size:19px; line-height:32px; color:var(--meta); margin:0 0 8px;}

.legal-card{
  background:var(--box);
  border-left:3px solid var(--blue);
  padding:24px 28px;
  margin:24px 0 32px;
}
.legal-card p{margin:0;}
.legal-card p + p{margin-top:8px;}

.open-note{
  border:1px dashed var(--line);
  padding:16px 20px;
  margin:16px 0 24px;
  font-size:15px; line-height:24px; color:var(--meta);
}
.open-note strong{color:var(--graphite);}

.page-meta{
  margin:56px 0 0; padding-top:24px;
  border-top:1px solid var(--line);
  font-size:14px; line-height:22px; color:var(--meta);
}

/* ---------- Graphite Footer ---------- */
.site-footer{
  background:var(--graphite);
  color:rgba(255,255,255,.78);
  padding:48px var(--pad) 24px;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px;
  max-width:1280px; margin:0 auto;
}
.footer-brand img{width:160px; height:auto;}
.footer-domains{
  margin:24px 0 0;
  font-family:"Oxanium",sans-serif; font-weight:500; font-size:14px; line-height:20px;
  color:var(--blue);
}
.footer-domains a{color:var(--blue);}
.footer-col h2{
  margin:0 0 16px;
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:12px; line-height:18px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.footer-col a, .footer-col span{
  font-family:"Oxanium",sans-serif; font-weight:500; font-size:14px; line-height:20px;
  color:rgba(255,255,255,.78);
}
.footer-col a:hover{color:var(--white);}
.footer-col a.is-placeholder{cursor:default; color:rgba(255,255,255,.45);}

.footer-bottom{
  max-width:1280px; margin:40px auto 0; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:baseline;
}
.footer-note{
  font-family:"Inter",sans-serif; font-weight:400; font-size:13px; line-height:22px;
  color:rgba(255,255,255,.55);
}
.footer-signature{
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:12px; line-height:18px;
  letter-spacing:.12em; color:var(--blue); text-transform:uppercase;
}

/* ---------- Zwei Ansichten: Start ↔ Wer wir sind -------------------
   Ohne JavaScript über :target. Die Startseite ist der Grundzustand,
   die Redaktionsseite erscheint, sobald #wer-wir-sind in der Adresse steht.
   :has() wird von allen aktuellen Browsern ab 2023 unterstützt; ältere
   zeigen notfalls beide Abschnitte untereinander. */
.nav-item[href]:hover{color:var(--white); text-decoration:none;}
body:has(#wer-wir-sind:target) .nav-team{color:var(--white);}
body:has(#wer-wir-sind:target) .nav-start{color:rgba(255,255,255,.7);}

.team{display:none;}
.team:target{display:block;}
body:has(#wer-wir-sind:target) .hero{display:none;}

/* ---------- Wer wir sind ---------- */
.team-inner{
  max-width:760px; margin:0 auto;
  padding:72px var(--pad) 96px;
}
.team .kicker{
  margin:0 0 16px;
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:12px; line-height:18px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
}
.team h1{
  margin:0 0 24px;
  font-family:"Oxanium",sans-serif; font-weight:800;
  font-size:clamp(34px,4.6vw,56px); line-height:1.02; letter-spacing:-.02em;
  color:var(--graphite);
}
.team .lead{
  margin:0; font-size:19px; line-height:32px; color:var(--meta);
}
.team-list{
  list-style:none; margin:48px 0 0; padding:0;
  border-top:1px solid var(--line);
}
.team-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.team-face{
  width:88px; height:88px; flex:0 0 auto;
  border-radius:50%; object-fit:cover; object-position:50% 32%;
  background:var(--box); border:1px solid var(--line);
}
.team-name{
  font-family:"Oxanium",sans-serif; font-weight:600; font-size:22px; line-height:30px;
  letter-spacing:-.01em; color:var(--graphite);
}
.team-desc{font-size:17px; line-height:28px; color:var(--meta);}
.team-note{
  margin:32px 0 0; max-width:60ch;
  font-size:17px; line-height:28px; color:var(--meta);
}

/* ---------- Desktop: das Bild bestimmt die Höhe -------------------------
   Der Hero bekommt die volle Höhe abzüglich Header und abzüglich einer
   Header-Höhe für den Footer. Damit ragt der Footer genau um seine eigene
   Höhe über die Falz und es bleibt unten ein Streifen von Header-Höhe
   sichtbar — die Seite scrollt für den Rest. */
@media (min-width:900px){
  body{min-height:100svh; display:flex; flex-direction:column;}
  .site-header, .site-footer{flex:0 0 auto;}
  main{flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}
  .hero{flex:0 0 auto; min-height:calc(100svh - var(--header-h) - var(--header-h));}
  .team{flex:1 1 auto;}
  /* Beim Sprung auf #wer-wir-sind scrollt der Browser das Ziel nach oben.
     Der Header bleibt dabei stehen, damit die Navigation erreichbar ist. */
  .site-header{position:sticky; top:0; z-index:10;}
  #wer-wir-sind{scroll-margin-top:var(--header-h);}
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  :root{--pad:32px; --logo-w:170px; --header-h:116px;} /* 24 + 58 + 24 */
  .site-header{padding:24px var(--pad);}
  .nav{gap:24px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px;}
  .footer-brand{grid-column:1 / -1;}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  :root{--pad:20px; --logo-w:140px; --header-h:88px;} /* 20 + 48 + 20 */
  .site-header{padding:20px var(--pad);}
  .nav{display:none;} /* Navigation folgt mit den Seiten — kein halbes Menü */
  .hero{min-height:calc(100svh - var(--header-h));}
  .hero-picture img{object-position:50% 100%;}
  .hero-claim{padding-top:clamp(32px,7vh,72px);}
  .page{padding:48px var(--pad) 72px;}
  .site-footer{padding:48px var(--pad) 24px;}
  .footer-grid{grid-template-columns:1fr; gap:32px;}
  .footer-bottom{margin-top:32px; padding-top:16px;}
}