/* ===========================================
   NORDSTERN – GLOBAL STYLE (KERN)
   Datei: css/style.css
   Zweck: Grundsystem (Variablen, Reset, Layout, Nav, Buttons, Cards/Grids, Footer)
   =========================================== */

/* Farben & Design-Variablen */
:root{
  --petrol:#1f5c63;
  --petrol-light:#2f6d75;
  --petrol-dark:#143d41;

  --gold:#d6b96b;
  --gold-dark:#c2a251;

  --header-height: 86px;

/* ===========================================
   NORDSTERN – THEMEN-AKZENTFARBEN
   Ruhig, gedeckt, edel
   =========================================== */

/* Hufbearbeitung – Erdung, Handwerk */
--accent-huf: #8A5A3C;

/* Tierheilpraxis – Heilung, Balance */
--accent-tier: #6E8F84;

/* Kurse – Wissen, Entwicklung */
--accent-kurse: #B88A3D;

/* Mitgliederbereich – Schutz, Tiefe */
--accent-member: #3F5F52;

  --ivory:#f9f8f4;
  --muted:#cedede;

  --radius:18px;
  --max:1120px;
  --shadow:0 10px 25px rgba(0,0,0,.15);

  /* EINHEITLICHER HEADER-HINTERGRUND */
  --header-bg:#1f5c63;
}

@media (max-width: 768px){
  :root{
    --header-height: 72px;
  }
}

/* Grundlayout & Typografie */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  line-height:1.55;
  background:linear-gradient(180deg,var(--petrol-light), var(--petrol));
  color:var(--ivory);
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

p{ margin:0 0 1em; }

.wrap{
  max-width:var(--max);
  margin:auto;
  padding:0 20px;
}

/* ===========================================
   HEADER / NAVIGATION
   =========================================== */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 20px;
  background:var(--header-bg);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:var(--gold);
}

/* Logo */
.logo-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  background-color:#ffffff22;
  border-radius:50%;
  overflow:hidden;
  margin-right:12px;
}

.logo-placeholder img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.6;
  filter:brightness(1.2);
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:all .2s ease-in-out;
  border:2px solid transparent;
}

.btn.gold{
  background:var(--gold);
  color:var(--petrol-dark);
}
.btn.gold:hover{ background:var(--gold-dark); }

.btn.alt{
  background:transparent;
  border:2px solid var(--gold);
  color:var(--gold);
}
.btn.alt:hover{ background:rgba(214,185,107,.15); }

/* Navi Buttons */
.nav-btn{
  display:inline-block;
  background:var(--gold);
  color:var(--petrol-dark);
  padding:.55rem 1rem;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  border:2px solid transparent;
}

.nav-btn:hover{
  background:var(--gold-dark);
}

.nav-btn:active{
  transform:translateY(1px);
}

/* ===========================================
   NAVIGATION – DESKTOP
   =========================================== */

.main-nav .nav-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

/* ===========================================
   NAVIGATION – MOBILE HAMBURGER
   =========================================== */

.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  font-size:1.6rem;
  padding:.25rem .5rem;
  color:#fff;
  cursor:pointer;
}

.nav-toggle:focus{ outline:2px solid var(--gold); }

/* Desktop = Menü sichtbar */
@media (min-width:769px){
  #primary-nav{ display:block; }
}

/* Mobile = Burger aktiv */
@media (max-width:768px){
  .site-header{
    padding:10px 14px;
    background:var(--header-bg);
  }

  .nav-toggle{
    display:block;
    margin-left:.25rem;
  }

  #primary-nav{
    display:none;
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--header-bg);
    padding:12px 14px;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
  }

  .site-header.is-open #primary-nav{ display:block; }

  .nav-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
  }

  .nav-btn{
    width:100%;
    text-align:center;
  }
}

/* ===========================================
   SECTIONS / HERO
   =========================================== */

section{ padding:70px 0; }

.hero{
  background:linear-gradient(180deg,var(--petrol-light),var(--petrol));
  padding:100px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}

.hero-image img{
  max-width:460px;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
  margin:auto;
}

/* ===========================================
   KARTEN & GRIDS
   =========================================== */

.card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(3px);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:24px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;
}

/* ===========================================
   CTA
   =========================================== */

#cta .cta-buttons{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ===========================================
   FOOTER
   =========================================== */

footer{
  background:#15383c;
  padding:40px 0;
  text-align:center;
  color:#cdd9d9;
  font-size:14px;
}
footer a{ color:#f2e9c8; }

/* ===========================================
   RESPONSIVE
   =========================================== */

@media(max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
  .hero-image img{ max-width:90%; }
}

@media(max-width:960px){
  .grid-2{ grid-template-columns:1fr; }
}