:root{
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  /* Pety Nila Farblook */
  --accent: rgba(170,186,84,.55);
  --warm: rgba(232,228,210,.88);
  --warmStrong: rgba(244,240,222,.94);

  --shadowText: 0 2px 22px rgba(0,0,0,.78);

  /* Chips */
  --chipBg1: rgba(255,255,255,.10);
  --chipBg2: rgba(255,255,255,.035);
  --chipStroke: rgba(255,255,255,.14);
  --chipStrokeHover: rgba(170,186,84,.45);
  --chipShadow: 0 10px 22px rgba(0,0,0,.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#0b0c10;
  color: var(--text);
}

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

/* HERO */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;
}

/* 🔧 HIER passiert die Magie */
.hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    /* weniger Abdunklung */
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.28) 100%
    ),

    /* Lesefeld unten links – viel weicher */
    radial-gradient(
      980px 540px at 16% 86%,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.18) 55%,
      rgba(0,0,0,0) 75%
    ),

    url("/img/hero.jpg") center / cover no-repeat;

  /* Bild nach vorne holen */
  filter:
    brightness(1.06)
    contrast(1.08)
    saturate(1.12);

  z-index:-1;
}

/* Block */
.block{
  margin-top:auto;
  margin-left: clamp(18px, 4vw, 56px);
  margin-bottom: clamp(18px, 6vh, 64px);
  width: min(920px, 92vw);
}

/* Typo */
.title{
  margin:0 0 10px 0;
  font-weight: 650;
  letter-spacing: .2px;
  text-shadow: var(--shadowText);
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.1;
}

.subtitle{
  margin:0 0 18px 0;
  color: var(--muted);
  text-shadow: var(--shadowText);
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.55;
  max-width: 60ch;
}

/* MENU */
.menu{
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* Chips */
.links{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 8px 11px;
  border-radius: 999px;

  font-weight: 520;
  letter-spacing: .08px;
  font-size: clamp(14px, 1.05vw, 16px);

  color: var(--warm);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);

  background:
    radial-gradient(
      900px 160px at 20% 0%,
      rgba(170,186,84,.10),
      rgba(0,0,0,0) 55%
    ),
    linear-gradient(180deg, var(--chipBg1), var(--chipBg2));

  border: 1px solid var(--chipStroke);
  box-shadow: var(--chipShadow);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: transform .14s ease, border-color .14s ease, color .14s ease;
}

.chip:hover{
  transform: translateY(-1px);
  border-color: var(--chipStrokeHover);
  color: var(--warmStrong);
}

/* Enter – bewusst leise */
.enter{
  display:inline-block;

  font-weight: 500;
  letter-spacing: .08px;
  font-size: clamp(14px, 1.05vw, 16px);

  color: rgba(214,210,190,.85);
  text-shadow: 0 1px 14px rgba(0,0,0,.55);

  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  width: fit-content;
}

.enter:hover{
  color: var(--warmStrong);
  border-bottom-color: rgba(170,186,84,.42);
}

/* Fokus */
.chip:focus-visible,
.enter:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(170,186,84,.18), var(--chipShadow);
  border-radius: 14px;
}

/* Mobile */
@media (max-width:560px){
  .links{ gap: 8px; }
  .chip{ padding: 8px 10px; }
}