/* =============================================================================
   HTYR GmbH — main.css
   Lokale Schriften (Brave-kompatibel), Stagger-Animationen wie Referenzdatei.
   ============================================================================= */

/* ─── Font Faces (lokal — funktioniert in allen Browsern inkl. Brave) ─────── */
@font-face { font-family:'Barlow Condensed'; font-weight:800; font-style:normal; font-display:swap; src:url('/fonts/BarlowCondensed-800.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:300; font-style:normal; font-display:swap; src:url('/fonts/Barlow-300.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:400; font-style:normal; font-display:swap; src:url('/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-style:normal; font-display:swap; src:url('/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:700; font-style:normal; font-display:swap; src:url('/fonts/Barlow-700.woff2') format('woff2'); }


/* ─── Reset ──────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
img   { display:block; max-width:100%; }
ul,ol { list-style:none; }
a     { color:inherit; text-decoration:none; }
button,input { font:inherit; color:inherit; border:none; background:none; cursor:pointer; }


/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --navy:  #0b1225;
  --navy2: #141e3c;
  --blue1: #1a2f6e;
  --blue2: #2d55b8;
  --blue3: #5b8fd4;
  --light: #e8edf8;
  --white: #ffffff;
  --muted: rgba(232,237,248,.45);
  --faint: rgba(232,237,248,.30);
  --amber: #e8a020;
  --border:rgba(91,143,212,.12);
}


/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
  background: var(--navy);
  color: var(--light);
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  color: var(--white);
}
p { line-height: 1.7; }


/* ─── Hintergrund-Grid ───────────────────────────────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(45,85,184,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,85,184,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}


/* ─── Orbs ───────────────────────────────────────────────────────────────── */
.orb {
  position:fixed; border-radius:50%; filter:blur(120px);
  opacity:.18; pointer-events:none; z-index:0;
}
.orb--1 {
  width:600px; height:600px; background:var(--blue2);
  top:-200px; left:-150px;
  animation: drift 14s ease-in-out infinite alternate;
}
.orb--2 {
  width:400px; height:400px; background:var(--blue3);
  bottom:-100px; right:-100px;
  animation: drift 18s ease-in-out infinite alternate-reverse;
}


/* ─── Seitenlayout ───────────────────────────────────────────────────────── */
.page {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}


/* ─── HEADER & NAV ──────────────────────────────────────────────────────── */

/* Weißer Hintergrund auf HEADER — nicht auf nav (footer hat auch ein nav!) */
header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,47,110,.10);
  opacity: 0; animation: fadeDown .8s .2s forwards;
}

/* nav ohne Hintergrund — gilt für alle nav-Elemente */
nav { display: flex; align-items: center; }

/* Nur Header-Nav bekommt das große Padding und space-between */
header nav {
  padding: 20px 48px;
  justify-content: space-between;
}

.nav-logo img { height: 36px; width: auto; }
.nav-logo:focus-visible { outline: 2px solid var(--blue2); outline-offset: 4px; }

/* nav-right: Links + Badge als Gruppe rechts */
.nav-right {
  display: flex; align-items: center; gap: 32px;
}

/* Nav-Links */
.nav-links {
  display: flex; align-items: center; gap: 36px;
}

.nav-link {
  font-size: 17px; font-weight: 600;
  color: #1a2f6e; opacity: .45;
  letter-spacing: .1px; white-space: nowrap;
  transition: opacity .2s;
}
a.nav-link:hover    { opacity: .9; }
.nav-link--active   { opacity: 1; color: #0e1e4a; }
.nav-link--soon     { opacity: .2; cursor: default; pointer-events: none; }

.nav-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: #1a2f6e; border: 1px solid rgba(26,47,110,.25);
  padding: 6px 14px; border-radius: 20px; white-space: nowrap;
}


/* ─── SINGLE-PAGE SECTIONS ─────────────────────────────────────────────────── */

main { flex: 1; display: flex; flex-direction: column; }

/* Alle Sektionen versteckt */
.section { display: none; flex: 1; flex-direction: column; }

/* Startseite ohne Hash anzeigen */
body:not(:has(:target)) .section--home { display: flex; }

/* Gezielte Sektion anzeigen — keine section-level Animation,
   die Kind-Elemente haben ihre eigene Stagger-Animation */
.section:target { display: flex; }

/* ── Über-uns: Stagger beim Einblenden ──────────────────────────────────── */
.section--page:target .back-link {
  opacity: 0; animation: fadeUp .5s .1s forwards;
}
.section--page:target .page-title {
  opacity: 0; animation: fadeUp .6s .22s forwards;
}
.section--page:target .page-body {
  opacity: 0; animation: fadeUp .6s .38s forwards;
}


/* ─── HERO (Startseite) ─────────────────────────────────────────────────────
   Stagger-Animationen identisch zur Referenzdatei.
   Direkt auf Elementen — keine ":has()" Bedingung, funktioniert überall.
   Da Start-Link href="/" → Page Reload, laufen die Animationen
   bei jedem Besuch der Startseite frisch.
──────────────────────────────────────────────────────────────────────────── */

.section--home {
  padding: 60px 48px 80px;
  max-width: 900px;
  justify-content: center;
}

/* Stagger genau wie Referenzdatei */
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--blue3); margin-bottom: 28px;
  opacity: 0; animation: fadeUp .7s .4s forwards;
}
.hero-tag::before {
  content: ''; display: block; width: 24px; height: 2px; background: var(--blue3);
}

.section--home h1 {
  font-size: clamp(52px, 8vw, 96px);
  line-height: .95; letter-spacing: -1px;
  margin-bottom: 28px;
  opacity: 0; animation: fadeUp .7s .55s forwards;
}
.accent { color: transparent; -webkit-text-stroke: 1.5px var(--blue3); }

.hero-desc {
  font-size: 18px; font-weight: 300; color: var(--muted);
  max-width: 520px; margin-bottom: 48px; line-height: 1.7;
  opacity: 0; animation: fadeUp .7s .7s forwards;
}

.chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 60px;
  opacity: 0; animation: fadeUp .7s .85s forwards;
}
.chip {
  font-size: 12px; font-weight: 600; letter-spacing: .5px;
  color: var(--light);
  background: rgba(45,85,184,.2); border: 1px solid rgba(91,143,212,.25);
  padding: 7px 16px; border-radius: 20px;
  transition: background .2s, border-color .2s;
}
.chip:hover { background: rgba(45,85,184,.4); border-color: rgba(91,143,212,.6); }

.cta {
  display: flex; align-items: center; gap: 20px;
  opacity: 0; animation: fadeUp .7s 1s forwards;
}

.btn-coming-soon {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .5px;
  color: var(--amber); border: 2px solid var(--amber);
  padding: 13px 26px; border-radius: 4px; cursor: default;
}

.btn-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.cta-note { font-size: 14px; color: var(--muted); }


/* ─── PAGE CONTENT (Unterseiten — zentriert) ─────────────────────────────── */

.section--page {
  justify-content: center;
  padding: 60px 48px 80px;
}

.page-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center; /* ALLE Texte zentriert */
  width: 100%;
}

.back-link {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--blue3); margin-bottom: 40px;
  opacity: .7; transition: opacity .2s;
}
.back-link:hover { opacity: 1; }

.page-title {
  font-size: clamp(36px, 5vw, 64px); letter-spacing: -.5px;
  margin-bottom: 40px;
}

/* Fließtext — 16px, zentriert */
.page-body {
  font-size: 16px;
  color: rgba(232,237,248,.75);
  line-height: 1.9;
  text-align: center; /* zentriert wie gewünscht */
}
.page-body h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700;
  color: var(--white);
  margin-top: 40px; margin-bottom: 12px; letter-spacing: .5px;
}
.page-body p + p  { margin-top: 16px; }
.page-body strong { color: var(--white); }
.page-body a      { color: var(--blue3); text-decoration: underline; }


/* ─── FOOTER ─────────────────────────────────────────────────────────────── */

footer {
  position: relative; z-index: 1;
  padding: 20px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: 12px;
  /* Einmalige Animation beim Laden */
  opacity: 0; animation: fadeUp .6s 1.2s forwards;
}

footer small { color: rgba(232,237,248,.5); }
footer nav { display: flex; align-items: center; gap: 16px; }
/* all:unset entfernt ALLE Browser-Standard-Stile inkl. WebKit-Hintergrund */
footer button {
  all: unset;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  color: rgba(232,237,248,.6);
  cursor: pointer;
  transition: color .2s;
}
footer button:hover { color: var(--blue3); }


/* ─── DEKO-LINIE ─────────────────────────────────────────────────────────── */
.deco-line {
  position: fixed; right: 48px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 1;
  opacity: 0; animation: fadeUp .6s 1.4s forwards;
}
.deco-line span    { display: block; width: 1px; background: rgba(91,143,212,.4); }
.deco-line span:nth-child(1) { height: 60px; }
.deco-line span:nth-child(2) { height: 8px; background: var(--blue3); }
.deco-line span:nth-child(3) { height: 60px; }


/* ─── BOTTOM NAV (mobile) ────────────────────────────────────────────────── */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(26,47,110,.10);
  padding-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  justify-content: space-around; align-items: center;
}

.bnav-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 16px; border-radius: 8px;
  color: rgba(26,47,110,.35);
  transition: color .2s, background .2s;
  font-family: 'Barlow', sans-serif;
}
.bnav-item svg   { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bnav-item span  { font-size:10px; font-weight:600; }
a.bnav-item:hover          { color:#1a2f6e; }
.bnav-item--active         { color:#1a2f6e !important; } /* nur Farbe, kein background */
.bnav-item--soon           { opacity:.3; cursor:default; pointer-events:none; }


/* ─── MODAL (Popover API) ────────────────────────────────────────────────── */
:has([popover]:popover-open) { overflow: hidden; }

[popover].modal {
  border: none; margin: auto;
  background: #0f1829;
  border: 1px solid rgba(91,143,212,.20);
  border-radius: 8px; padding: 32px 24px;
  width: calc(100% - 40px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  opacity: 1;
  transition: opacity .32s, overlay .32s allow-discrete, display .32s allow-discrete;
}
.modal--sm[popover] { max-width: 480px; }
.modal--md[popover] { max-width: 560px; }

[popover].modal:not(:popover-open) { opacity: 0; }
@starting-style { [popover].modal:popover-open { opacity: 0; } }

[popover].modal::backdrop {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity .32s, overlay .32s allow-discrete, display .32s allow-discrete;
}
@starting-style { [popover].modal:popover-open::backdrop { opacity: 0; } }

.modal-close {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(232,237,248,.8);
  font-size: 20px; line-height: 1; transition: background .2s;
}
.modal-close:hover { background: rgba(255,255,255,.15); }
.modal-close:focus-visible { outline: 2px solid var(--blue3); outline-offset: 2px; }

[popover].modal h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; font-weight: 700; color: var(--white);
  letter-spacing: 1px; margin-bottom: 24px;
}
.modal-body           { font-size: 13px; color: rgba(232,237,248,.7); line-height: 2; }
.modal-body strong    { color: var(--white); }
.modal-body p + p     { margin-top: 16px; }
.modal-body a         { color: var(--blue3); }
.modal-body a:hover   { text-decoration: underline; }
.modal-warn {
  font-size: 12px; font-style: italic; color: rgba(232,237,248,.4);
  padding: 10px 12px; border: 1px solid rgba(232,237,248,.1);
  border-radius: 4px; margin-bottom: 20px; line-height: 1.6;
}


/* ─── SKIP LINK ──────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 9999;
  background: var(--blue2); color: var(--white);
  font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 4px;
  transition: top 150ms ease;
}
.skip-link:focus { top: 16px; }


/* ─── KEYFRAMES ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes drift {
  from { transform:translate(0,0); }
  to   { transform:translate(60px,40px); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.7); }
}


/* ─── UTILITIES ──────────────────────────────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; animation-iteration-count:1 !important; }
}


/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header nav   { padding:14px 24px; }
  .nav-right   { display:none; }  /* Links+Badge auf Mobile ausgeblendet → Bottom Nav */
  .section--home,
  .section--page { padding:40px 24px 60px; }
  .section--home h1 { font-size:clamp(38px,10vw,52px); }
  .hero-desc   { font-size:16px; }
  .chips       { flex-wrap:wrap; }
  .cta         { flex-direction:column; align-items:flex-start; }
  footer       { padding:16px 24px; }
  .deco-line   { display:none; }
  .bottom-nav  { display:flex; }
  .page        { padding-bottom:68px; }
}

@media (max-width: 480px) {
  nav, .section--home, .section--page { padding-left:16px; padding-right:16px; }
  footer { flex-direction:column; gap:8px; text-align:center; }
}