/* ============================================================
   FERIENHAUS ARTUR — globale Design-Tokens & Basiskomponenten
   Diese Datei wird von allen Seiten geladen.
   Seitenspezifische Styles (Hero-Varianten, Grids etc.) liegen
   jeweils in einem <style>-Block direkt in der HTML-Datei.
   ============================================================ */

:root{
  /* Farbe */
  --tanne:      #3D7A4C;   /* frisches, freundliches Waldgrün, Basisfläche */
  --tanne-dk:   #2E5D3A;   /* etwas dunkler, für Tiefe/Vignetten */
  --papier:     #FFFBF2;   /* helles, freundliches Naturpapier */
  --glut:       #E0A23B;   /* klares, warmes Honiggold */
  --glut-dk:    #C2841F;
  --waldgruen:  #9DC49A;   /* frisches, helles Waldgrün */
  --holz:       #F1E4C3;   /* helles Holz */
  --holz-line:  rgba(241,228,195,0.35);

  /* Typografie */
  --f-display: "Fraunces", "Iowan Old Style", serif;
  --f-body:    "Inter", -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", "SF Mono", monospace;

  --radius: 2px;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--papier);
  color:var(--tanne);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

a{color:inherit; text-decoration:none;}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

@media (max-width:640px){
  .wrap{padding:0 20px;}
  body{font-size:16px;}
}

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* ============================================================
   EYEBROW / LABEL — mono, gesperrt, wie Hütten-Inventarliste
   ============================================================ */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--glut);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--glut);
  display:inline-block;
}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--tanne);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  max-width:1180px;
  margin:0 auto;
}
.logo{
  font-family:var(--f-display);
  font-weight:600;
  font-size:21px;
  letter-spacing:0.01em;
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--papier);
}
.logo span{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--holz);
  letter-spacing:0.1em;
}
nav.links{
  display:flex;
  gap:30px;
  font-size:14.5px;
  font-weight:500;
  color:var(--papier);
}
nav.links a{
  position:relative;
  padding:4px 0;
  color:var(--papier);
}
nav.links a.active{color:var(--glut);}
nav.links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1.5px;
  background:var(--glut);
  transition:width .25s ease;
}
nav.links a:hover::after, nav.links a:focus-visible::after, nav.links a.active::after{width:100%;}
nav.links a:focus-visible{outline:2px solid var(--glut); outline-offset:4px;}

.nav-cta{
  font-family:var(--f-mono);
  font-size:13px;
  background:var(--glut);
  color:var(--papier);
  padding:10px 20px;
  border-radius:var(--radius);
  letter-spacing:0.04em;
  transition:background .2s ease;
}
.nav-cta:hover, .nav-cta:focus-visible{background:var(--glut-dk);}

/* Burger-Button */
.burger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  flex-direction:column;
  gap:5px;
  color:var(--papier);
}
.burger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--papier);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}

@media (max-width:780px){
  .burger{display:flex;}
  nav.links{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:var(--tanne);
    flex-direction:column;
    gap:0;
    padding:8px 0 16px;
    border-top:1px solid rgba(255,255,255,0.1);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
  }
  nav.links.open{display:flex;}
  nav.links a{padding:13px 24px; font-size:16px;}
  nav.links a::after{display:none;}
  header{position:relative;}
}

/* ============================================================
   BUTTONS — global wiederverwendet
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:15px;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background:var(--glut);
  color:var(--papier);
}
.btn-primary:hover, .btn-primary:focus-visible{background:#eab456; transform:translateY(-1px);}
.btn-ghost{
  border:1px solid rgba(242,237,225,0.4);
  color:var(--papier);
}
.btn-ghost:hover, .btn-ghost:focus-visible{background:rgba(242,237,225,0.1);}
.btn:focus-visible{outline:2px solid var(--holz); outline-offset:3px;}

/* Variante für helle Flächen (Buttons außerhalb von dunklen Sektionen) */
.btn-outline-dark{
  border:1px solid var(--tanne);
  color:var(--tanne);
}
.btn-outline-dark:hover, .btn-outline-dark:focus-visible{background:rgba(31,45,36,0.06);}

/* ============================================================
   SECTION-GRUNDLAGEN
   ============================================================ */
section{padding:96px 0;}
@media (max-width:640px){section{padding:64px 0;}}

.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(30px, 4vw, 42px);
  margin-top:18px;
  line-height:1.1;
  letter-spacing:-0.01em;
}
.section-head p{
  margin-top:16px;
  color:#3c4a3f;
  font-size:16.5px;
}

/* Schmale Seiten-Hero-Variante für Unterseiten (kein großes Bild) */
.page-hero{
  position:relative;
  background:#72B87F;
  color:#1a2e1e;
  padding:72px 0 56px;
  overflow:hidden;
}
.page-hero .hero-grain{
  position:absolute;
  inset:0;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  pointer-events:none;
}
.page-hero .wrap{position:relative;}
.page-hero .eyebrow{color:#1a2e1e;}
.page-hero .eyebrow::before{background:#1a2e1e;}
.page-hero h1{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(34px, 5vw, 52px);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:18px 0 16px;
  max-width:680px;
  color:#1a2e1e;
}
.page-hero p.lede{
  font-size:17px;
  max-width:560px;
  color:#1e3822;
}
.breadcrumb{
  font-family:var(--f-mono);
  font-size:12px;
  color:#2d4d31;
  margin-bottom:6px;
}
.breadcrumb a{color:#1a2e1e; font-weight:500;}
.breadcrumb a:hover{color:var(--tanne);}
.page-hero-band{
  width:100%;
  height:6px;
  background:var(--glut);
}

@media (max-width:640px){
  .page-hero-band{height:4px;}
}

/* ============================================================
   CTA-BAND — auf jeder Unterseite vor dem Footer
   ============================================================ */
.cta-band{
  background:var(--glut);
  color:var(--papier);
}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-inner h2{
  font-family:var(--f-display);
  font-size:clamp(26px,4vw,36px);
  max-width:480px;
  line-height:1.15;
}
.cta-band .btn-primary{background:var(--tanne);}
.cta-band .btn-primary:hover{background:var(--tanne-dk);}
.cta-band .btn-ghost{border-color:rgba(242,237,225,0.5);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--tanne-dk);
  color:rgba(242,237,225,0.7);
  padding:64px 0 32px;
  font-size:14.5px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}
.foot-logo{
  font-family:var(--f-display);
  font-size:22px;
  color:var(--papier);
  margin-bottom:14px;
}
.foot-col h5{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--waldgruen);
  margin-bottom:16px;
}
.foot-col a, .foot-col p{display:block; margin-bottom:10px; color:rgba(242,237,225,0.7);}
.foot-col a:hover{color:var(--holz);}
.foot-bottom{
  border-top:1px solid rgba(242,237,225,0.12);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:13px;
  color:rgba(242,237,225,0.45);
}
.foot-bottom a{color:rgba(242,237,225,0.55);}

@media (max-width:780px){
  .foot-grid{grid-template-columns:1fr; gap:32px;}
}