/* =====================================================
   ANSGAR NAST-KOLB — PREMIUM BASE (V2)
   Ziel: Stabiler Header + ruhige Grundtypografie,
   OHNE Layout/Section-Meinungen (damit Seiten wieder "chic" wirken)
   ===================================================== */

/* ===== Tokens ===== */
:root{
  --navy:#0c2238;
  --navy2:#102a47;
  --sand:#f7f3ea;
  --text:#111;
  --muted:rgba(17,17,17,.72);
  --line:rgba(17,17,17,.12);

  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;

  --wrap:1120px;
  --pad:28px;
}

/* ===== Base ===== */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  letter-spacing:-0.003em;
  background:var(--sand);
}
html, body{ background-color: var(--sand); }

/* ===== Wrapper ===== */
.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--pad);
}

/* ===== Typography (nur Basics) ===== */
h1, h2, h3{
  font-family:var(--serif);
  color:var(--navy);
  margin:0 0 14px;
}
h1{
  font-weight:760;
  letter-spacing:-0.035em;
  line-height:1.03;
  margin-bottom:18px;
}
h2{
  font-weight:720;
  letter-spacing:-0.025em;
  line-height:1.14;
}
p{
  font-size:17px;
  line-height:1.95;
  margin:0 0 16px;
  /* WICHTIG: keine globale max-width / Hyphenation,
     damit bestehende Page-Layouts wieder greifen */
  max-width:none;
  hyphens:manual;
}
.lead{
  line-height:1.85;
  color:rgba(17,17,17,.82);
}

/* ===== Links (ruhig) ===== */
a{
  color: var(--muted);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}
a:hover{
  color: var(--navy);
  text-decoration: underline;
}
a:focus-visible{
  outline: 2px solid rgba(12,34,56,.25);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===== Header / Navigation (stabil) ===== */
.topbar{
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.headerwrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.topbar .headerwrap{
  max-width: var(--wrap) !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.brand__link{ display:inline-flex; align-items:center; text-decoration:none; }
.brand__logo{
  display:block;
  width:100%;
  max-width:220px;
  height:auto;
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav a{
  font-size:15px;
  color: rgba(17,17,17,.78);
  text-decoration:none;
  font-weight:520;
  letter-spacing:.01em;
}
.nav a:hover{ color: var(--navy); }
.nav a[aria-current="page"]{
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .08em;
}

.nav__cta{
  background: var(--navy);
  color:#fff !important;
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.01em;
  transition: all .2s ease;
}

.nav__cta:hover{
  background: var(--navy2);
  color:#fff !important;
  text-decoration:none;
}



/* Mobile */
.navToggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  color: var(--navy);
  font-weight: 650;
  cursor:pointer;
}
.navToggle:focus-visible{
  outline: 2px solid rgba(12,34,56,.25);
  outline-offset: 2px;
}
.navToggle__icon{
  width:18px; height:2px;
  background: var(--navy);
  position:relative;
  display:inline-block;
}
.navToggle__icon::before,
.navToggle__icon::after{
  content:"";
  position:absolute; left:0;
  width:18px; height:2px;
  background: var(--navy);
}
.navToggle__icon::before{ top:-6px; }
.navToggle__icon::after{ top:6px; }

@media (max-width: 860px){
  :root{ --pad:18px; }
  .navToggle{ display:inline-flex; }
  .nav{
    display:none;
    position:absolute;
    left:0; right:0;
    top:64px;
    background: rgba(255,255,255,.92);
    border-bottom:1px solid var(--line);
    padding:14px var(--pad);
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .topbar{ position:sticky; top:0; z-index:50; }
  .topbar__inner{ position:relative; }
  .nav.is-open{ display:flex; }
}

@media (max-width: 768px){
  p{ font-size:16.5px; line-height:1.9; }
  h1{ line-height:1.08; }
}
/* ===== Video (Gruß) ===== */
.video-frame{
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(17,17,17,.12);
  box-shadow: 0 12px 30px rgba(12,34,56,.08);
}

/* Sauberes Seitenverhältnis + responsive */
.video-player{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  background:#000;
}

/* Optional: dezente Kante auf sehr hellen Screens */
@media (min-width: 900px){
  .video-frame{ border-radius: 12px; }
}

/* ===== Global Button (.btn) ===== */
a.btn,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:12px 18px;
  border-radius:999px;

  background: var(--navy);
  color:#fff !important;

  font-weight:650;
  letter-spacing:.01em;
  text-decoration:none !important;
  border:1px solid rgba(12,34,56,.22);

  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

a.btn:visited{ color:#fff !important; }

a.btn:hover,
.btn:hover{
  background: #0f2f52;   /* klarer Unterschied */
  color:#fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,34,56,.18);
}

a.btn:focus-visible,
.btn:focus-visible{
  outline: 2px solid rgba(12,34,56,.25);
  outline-offset: 3px;
}
/* ===== Auto: Buttons auf dunklen Sections ===== */
/* Wenn eine Section dunkel ist (z.B. .cta), werden Buttons automatisch invertiert */
.section.cta .btn,
.cta .btn{
  background:#fff;
  color:var(--navy) !important;
  border:1px solid rgba(255,255,255,.35);
}

.section.cta .btn:hover,
.cta .btn:hover{
  background:#f2f2f2;
  color:var(--navy) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
/* ===== Note (Leitlinie, Meta-Sätze, Hinweise) ===== */
.note{
  font-size:16.5px;
  line-height:1.8;
  color:rgba(17,17,17,.80);
  margin-top:12px;
}

/* Auf dunklen Flächen automatisch heller */
.cta .note,
.section.cta .note{
  color:rgba(255,255,255,.85);
}
/* Zweiter Link neben Button bei Landingpages */
.secondary-link{
  margin-top: 24px;
  text-align: center;
  font-size: 15px;
}

.secondary-link a{
  font-weight: 600;
  color: rgba(17,17,17,.68);
  text-decoration: none;
  position: relative;
}

.secondary-link a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: rgba(17,17,17,.25);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.secondary-link a:hover{
  color: rgba(17,17,17,.92);
}

.secondary-link a:hover::after{
  transform: scaleX(1);
}