/* ============================================================
   base.css — Grundlayout und Typografie
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--me-bg); color:var(--me-ink);
  font-family:var(--me-font-body); font-size:var(--me-fs-body);
  line-height:var(--me-lh-body); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--me-font-head); font-weight:600; margin:0; text-wrap:pretty; }
h1{ font-size:var(--me-fs-display); line-height:1.12; letter-spacing:-1.6px; }
h2{ font-size:var(--me-fs-h2);      line-height:1.2;  letter-spacing:-.8px; }
h3{ font-size:var(--me-fs-h3); font-family:var(--me-font-body); font-weight:700; line-height:1.25; letter-spacing:-.4px; }
p{ margin:0; }

a{ color:var(--me-primary); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--me-primary-deep); }
a:focus-visible,button:focus-visible{ outline:3px solid var(--me-focus); outline-offset:3px; border-radius:6px; }

.me-wrap{ max-width:var(--me-wrap); margin:0 auto; }
.me-section{ padding:var(--me-pad-y) var(--me-pad-x); position:relative; }
.me-lead{ font-size:var(--me-fs-lead); line-height:1.55; color:var(--me-ink-body); }
.me-eyebrow{ font-size:16px; font-weight:700; letter-spacing:1.6px; color:var(--me-primary); }
.me-small{ font-size:var(--me-fs-small); }

/* Atmosphäre: weiches Farbspiel + feines Korn */
.me-atmo{ position:relative; }
.me-atmo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 82% -12%, rgba(26,107,80,.14), transparent 62%),
    radial-gradient(820px 620px at -12% 22%, rgba(143,78,44,.07), transparent 60%);
}
.me-grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
.me-atmo > *{ position:relative; z-index:2; }

/* Bewegung */
@keyframes me-rise{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes me-float{ 0%,100%{transform:translateY(0) rotate(-1.2deg)} 50%{transform:translateY(-14px) rotate(-1.2deg)} }
@keyframes me-glow{ 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.1)} }
.me-rise{ animation:me-rise .8s cubic-bezier(.16,1,.3,1) both; }
.me-d1{animation-delay:.06s}.me-d2{animation-delay:.14s}.me-d3{animation-delay:.22s}.me-d4{animation-delay:.3s}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* Sprunglink — unsichtbar, bis jemand mit der Tastatur navigiert */
.me-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--me-primary-strong); color:#fff; text-decoration:none;
  padding:16px 24px; border-radius:0 0 var(--me-r-sm) 0; font-weight:700;
}
.me-skip:focus{ left:0; color:#fff; }
