/* ===== Base / Global ===== */
:root{
  --bg: #0f1115;
  --card: #1b2130;
  --text: #e9eef7;
  --muted: #a8b3c7;
  --brand: #ff758c;
  --brand-2: #ffd166;
  --accent-green: #34d399;
  --ring: 0 0 0 4px color-mix(in oklab, var(--brand) 30%, transparent);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

/* Hintergrund */
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
  position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:-20vh -20vw; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1800px 1100px at 80% -10%, color-mix(in oklab, var(--brand) 22%, transparent), transparent 72%),
    radial-gradient(1600px 1000px at -10% -10%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 74%);
}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; padding:.8rem 1.2rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
.brand__logo{ width:40px; height:auto; border-radius:8px }
.brand__text{ font-weight:800; letter-spacing:.2px }

/* Desktop-Navigation */
.nav{ display:flex; gap:1rem; }
.nav a{ color:var(--text); text-decoration:none; font-weight:600; opacity:.95 }
.nav a:hover{ color:var(--brand) }

/* Mobile Toggle default hidden */
.nav-toggle{ display:none; background:none; border:0; color:var(--text); padding:.4rem; border-radius:10px }
.nav-toggle:focus-visible{ outline:2px solid color-mix(in oklab, var(--brand) 60%, transparent) }

/* Mobile-Menü */
@media (max-width: 900px){
  .nav-toggle{ display:block }
  .nav{
    position: fixed;
    top:56px; right:12px; left:12px;
    display:block;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
    border-radius:14px;
    padding:.6rem;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform: translateY(-6px);
    transition: max-height .35s ease, opacity .25s ease, transform .3s ease;
  }
  .nav a{
    display:block; padding:.75rem .6rem; margin:0; border-radius:10px;
  }
  .nav a:active{ background: color-mix(in oklab, var(--brand) 12%, transparent) }
  /* geöffnet */
  body.nav-open .nav{
    max-height: 60vh;
    opacity:1;
    transform: translateY(0);
  }
}

/* Offset für Anker-Ziele */
section{ scroll-margin-top: 76px; }
.section--pad{ padding:5rem 1.25rem 3rem }

/* ===== Hero ===== */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;
  max-width:1100px; margin:0 auto;
}
.hero__content{ text-wrap:balance }
.hero__logo{
  width:min(420px, 90vw); justify-self:center;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
h1{ font-size: clamp(2rem, 5vw, 3.4rem); margin:.2rem 0 .6rem; line-height:1.1 }
.hero__subtitle{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem) }
.hero__cta{ margin-top:1.25rem; display:flex; gap:.8rem; flex-wrap:wrap }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.15rem; border-radius:14px; font-weight:700;
  text-decoration:none; border:1px solid transparent; transition:.2s; }
.btn--primary{ background:var(--brand); color:#111; }
.btn--primary:hover{ filter:brightness(.95); box-shadow: var(--ring); }
.btn--ghost{ background:transparent; color:var(--text);
  border-color: color-mix(in oklab, var(--text) 20%, transparent) }
.btn--ghost:hover{ border-color:var(--brand); color:var(--brand) }

/* ===== Abschnitte ===== */
.section{ padding:3rem 1.25rem }
.section--alt{ background: transparent }
.container{ max-width:1000px; margin:0 auto }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin:0 0 1rem }
p{ margin:.6rem 0 }

/* Features */
.feature-list{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1rem 0 0; padding:0; }
.feature-list li{ list-style:none; background:var(--card); padding:1.1rem; border-radius:16px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent); }
.feature-title{ font-weight:700 }

/* Cards */
.cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin-top:1rem }
.card{ background:var(--card); padding:1.1rem 1.2rem; border-radius:16px;
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent); }
.center{ text-align:center; margin-top:1rem }

/* ===== Galerie ===== */
.gallery-item{ display:grid; grid-template-columns: 180px 1fr; gap:1.25rem; align-items:center;
  padding:1.1rem; border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:var(--card); border-radius:18px; margin:1rem 0; }
.gallery-item--alt{ background: color-mix(in oklab, var(--brand) 10%, var(--card)); }
.gallery-item__img{ width:160px; height:160px; object-fit:cover; border-radius:50%; display:block; box-shadow:0 6px 16px rgba(0,0,0,.2); }
.gallery-item__text h3{ margin:.2rem 0 .4rem; font-size:1.25rem }
.gallery-item__text p{ color:var(--muted); }

/* ===== Links / Accordion + Icons ===== */
.accordion{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius:14px;
  padding:1.1rem 1.25rem;
  width:100%;
  text-align:left;
  font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; color:var(--text);
}
.accordion:hover{ border-color:var(--brand); color:var(--brand); }
.accordion .chev{ transition: transform .3s ease; }
.accordion[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.links-panel{
  margin-top:1rem; overflow:hidden; max-height:0; opacity:0;
  transform: translateY(-4px) scale(0.98);
  transition: max-height .55s ease, opacity .4s ease .1s, transform .45s ease;
}
.links-panel.is-open{ max-height: 1200px; opacity:1; transform: translateY(0) scale(1); }

.link-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:1rem; padding:0; margin:0; }
.link-card{ list-style:none; background:var(--card); border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius:14px; transition:.25s ease; will-change: transform; }
.link-card a{ display:flex; flex-direction:row; align-items:center; gap:.85rem; padding:1rem; color:inherit; text-decoration:none; height:100%; }
.link-card:hover{ border-color:var(--brand); transform:translateY(-3px); }
.link-text strong{ font-weight:800; } .link-text small{ color:var(--muted); }

/* Icon-Optik */
.icon{ width:26px; height:26px; stroke: currentColor; fill: currentColor; opacity:.95; }
.link-card:hover .icon{ opacity:1; }

/* ===== Impressum / Footer ===== */
.impressum a{ color:var(--accent-green); text-decoration:none; font-weight:600; }
.impressum a:hover{ text-decoration:underline; text-underline-offset:2px; }
.legal-box{ margin-top:1rem; padding:1rem 1.2rem; border-radius:14px;
  background: color-mix(in oklab, var(--accent-green) 24%, var(--card));
  border:1px solid color-mix(in oklab, var(--accent-green) 70%, transparent); color: var(--text); }
.legal-box h3{ color: color-mix(in oklab, var(--accent-green) 85%, var(--text)); }

.site-footer{ text-align:center; padding:1.3rem; color:var(--muted);
  border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background: color-mix(in oklab, var(--bg) 92%, transparent); }

/* ===== Reveal Animations ===== */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.gallery-item.reveal{ transform: translateX(-16px); }
.gallery-item.reveal:nth-of-type(even){ transform: translateX(16px); }
.gallery-item.reveal.is-visible,
.gallery-item.reveal:nth-of-type(even).is-visible{ transform:none; }
.card.reveal{ transform: translateY(18px); }
.feature-list li.reveal{ transform: translateY(16px); }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-visible{ opacity:1; transform:none; transition:none; }
  .links-panel,.links-panel.is-open{ transition:none; transform:none; }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; text-align:center }
  .hero__logo{ order:-1 }
  .feature-list, .cards{ grid-template-columns:1fr }
  .gallery-item{ grid-template-columns: 1fr; text-align:center; }
  .gallery-item__img{ justify-self:center; width:140px; height:140px; }
}