/* styles.css */
:root{
  /* Design Tokens */
  --brand-primary:#94AF4E;
  --brand-dark:#78825A;
  --brand-accent:#D5CB8D;
  --brand-neutral:#869A83;
  --brand-neutral-light:#A1A898;

  --bg: #F7F8F5;
  --text: #1A1D16;
  --muted: #4b4f46;

  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 30px rgba(0,0,0,.12);

  /* Fluid Type */
  --step--1: clamp(0.85rem, 0.78rem + 0.3vw, 0.95rem);
  --step-0: clamp(1.00rem, 0.92rem + 0.5vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.05rem + 1.0vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.6vw, 2.0rem);
  --step-3: clamp(2.0rem, 1.6rem + 2.6vw, 2.8rem);
  --step-4: clamp(2.8rem, 2.1rem + 3.5vw, 3.6rem);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(148,175,78,.15), transparent 60%),
    radial-gradient(1200px 600px at -10% 120%, rgba(213,203,141,.15), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.5;
}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem 1rem;
  background:#fff; border:2px solid var(--brand-primary);
}

.site-header{
  position:sticky; top:0; z-index:10; background:rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,.05);
}
.nav{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1rem, 3vw, 2rem);
}
.logo img{ display:block; width:140px; height:40px }

.nav-actions{ display:flex; align-items:center; gap:1rem }
.insta-link{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--text); text-decoration:none;
  padding:.4rem .7rem; border-radius:999px; background:#fff; box-shadow:var(--shadow-sm);
}
.insta-link:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md)}
.insta-link img{ width:20px; height:20px }

.lang-switch{ display:inline-flex; align-items:center; gap:.25rem; background:#fff; border-radius:999px; box-shadow:var(--shadow-sm); padding:.2rem }
.lang-btn{
  border:0; background:transparent; padding:.35rem .6rem; border-radius:999px; font-weight:600; cursor:pointer;
}
.lang-btn[aria-pressed="true"]{ background:var(--brand-primary); color:white }

.hero{
  padding: clamp(2rem, 5vw, 4rem) 1rem;
}
.hero-inner{
  max-width:1200px; margin:0 auto; text-align:center; background:linear-gradient(180deg, rgba(134,154,131,.08), rgba(161,168,152,.03));
  border:1px solid rgba(0,0,0,.05); border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 5rem);
  box-shadow: var(--shadow-sm);
}
.hero-title{ font-size:var(--step-4); line-height:1.1; margin:0 0 .6rem }
.hero-sub{ font-size:var(--step-1); color:var(--muted); margin:0 0 1.5rem }

.counter{
  display:inline-flex; align-items:stretch; gap:.6rem; background:#fff; border-radius:14px; padding:.8rem 1rem;
  box-shadow:var(--shadow-md); border: 1px solid rgba(0,0,0,.05);
  margin: 1rem 0 1.25rem;
}
.unit{ min-width:6.5ch; text-align:center }
.num{
  font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1, "ss02" 1;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight:800; letter-spacing:.02em;
  line-height:1; padding:.3rem .8rem; border-radius:10px; background:linear-gradient(180deg, #fff, rgba(255,255,255,.7));
  color:#0f140b;
  box-shadow: inset 0 -2px 8px rgba(0,0,0,.06);
  transition: transform .2s ease, filter .2s ease;
}
.num.tick{ transform:translateY(-2px); filter:saturate(1.1) }
.label{ font-size: var(--step--1); color: var(--muted); margin-top:.3rem }
.sep{ display:flex; align-items:center; color:var(--brand-dark); font-weight:700; padding: .2rem .1rem }

.hero-cta{ display:flex; justify-content:center; gap:.8rem; flex-wrap:wrap; margin-top:.5rem }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; border-radius:12px; padding:.7rem 1rem; font-weight:700;
  box-shadow:var(--shadow-sm);
}
.btn.insta-cta{ background: var(--brand-primary); color:white }
.btn.insta-cta:hover{ filter:brightness(1.05) }
.btn.link{ background:#fff; color:var(--text); border:1px solid rgba(0,0,0,.08) }
.btn.link:hover{ background:#fefefe }

.nojs{ margin-top:1rem; color:var(--muted) }

.info{
  padding: clamp(2rem, 6vw, 5rem) 1rem;
}
.info .content{
  max-width:1000px; margin:0 auto; text-align:center;
}
.info h2{ font-size:var(--step-3); margin:.2rem 0 .4rem }
.period{ color:var(--brand-dark); font-weight:600; margin: 0 0 1rem }
.lead{ font-size: var(--step-0); margin: 0 auto 1.5rem; max-width: 60ch; color: var(--text) }

.hero-image{
  margin: 1rem auto 0; max-width: 1200px; border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,.06);
}
.hero-image img{ display:block; width:100%; height:auto; aspect-ratio: 3/2; object-fit: cover }

.site-footer{
  border-top:1px solid rgba(0,0,0,.06);
  padding:1rem;
  background:#fff;
}
.footer-inner{
  max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.footer-inner a{ color: var(--text); text-decoration:none }
.footer-inner a:hover{ text-decoration:underline }

@media (max-width: 520px){
  .unit{ min-width:auto }
  .nav{ padding: .8rem 1rem }
  .logo img{ width:120px; height:34px }
}

/* === Mobile Tweaks (füge ans Ende von styles.css) === */
@media (max-width: 430px){
  /* Header kompakter */
  .nav{ padding:.6rem 1rem; gap:.5rem; }
  .nav-actions{ gap:.5rem; }

  /* Instagram-Link: Icon-only, kleinere Pill */
  .insta-link{
    padding:.35rem .45rem;
    border-radius:12px;
    box-shadow: var(--shadow-sm);
  }
  .insta-link span{ 
    display:none;     /* Text ausblenden -> nur Icon */
  }
  .insta-link img{
    width:18px; height:18px;
  }

  /* Language Switch kompakter */
  .lang-switch{ padding:.15rem }
  .lang-btn{ padding:.25rem .45rem; font-size:.9rem }
}
@media (max-width: 430px){
  .hero-inner{ padding: 1.25rem 1rem; }
  .hero-title{
    font-size: clamp(1.6rem, 8.5vw, 2.2rem);
    line-height: 1.08;
    letter-spacing: .002em;
    margin-bottom: .5rem;
  }
  .hero-sub{
    font-size: clamp(.95rem, 3.5vw, 1.05rem);
  }
  .counter{ gap:.4rem; padding:.6rem .7rem; }
  .unit{ min-width:auto }
  .num{ font-size: clamp(1.6rem, 6.5vw, 2.1rem); padding:.25rem .55rem; }
}