:root{
    --bg: #0a0908;
    --bg-alt: #131110;
    --card: #17140f;
    --gold: #c6a05c;
    --gold-bright: #e7c988;
    --gold-dim: #8a713f;
    --ivory: #ece6d8;
    --muted: #9a9184;
    --line: rgba(198,160,92,0.28);
    --shadow: rgba(0,0,0,0.5);
  }

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

  html{ scroll-behavior:smooth; }

  body{
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(198,160,92,0.08), transparent),
      var(--bg);
    color:var(--ivory);
    font-family:'Jost', sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3,.wordmark{
    font-family:'Cinzel', serif;
    letter-spacing:0.04em;
  }

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

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

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

  /* ---------- Ornate frame (signature element) ---------- */
  .plaque{
    position:relative;
    border:1px solid var(--line);
    padding:clamp(24px,5vw,56px);
  }
  .plaque::before,
  .plaque::after,
  .plaque .corner-tl,
  .plaque .corner-br{
    content:"";
    position:absolute;
    width:22px;
    height:22px;
    border:1px solid var(--gold);
    opacity:0.8;
  }
  .plaque::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .plaque::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }
  .plaque .corner-tl{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
  .plaque .corner-br{ bottom:-1px; left:-1px; border-right:none; border-top:none; }

  .divider{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--gold-dim);
    margin:0 auto;
    width:min(200px,60%);
  }
  .divider::before,
  .divider::after{
    content:"";
    height:1px;
    flex:1;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity:0.6;
  }
  .divider svg{ width:14px; height:14px; flex-shrink:0; }

  /* ---------- Nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px clamp(20px,5vw,56px);
    background:linear-gradient(to bottom, rgba(10,9,8,0.92), rgba(10,9,8,0));
    backdrop-filter:blur(2px);
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:15px;
    letter-spacing:0.18em;
    color:var(--gold-bright);
    text-transform:uppercase;
  }
  .brand svg, .brand-mark{ width:22px; height:22px; object-fit:contain; }
  nav ul{
    display:flex;
    gap:clamp(14px,3vw,34px);
    list-style:none;
    font-size:13px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  nav a{ transition:color 0.25s ease; position:relative; }
  nav a:hover, nav a:focus-visible{ color:var(--gold-bright); }
  nav a:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

  /* ---------- Hero ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 20px 80px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
    pointer-events:none;
  }
  .hero-logo{
    width:clamp(200px,32vw,320px);
    height:auto;
    opacity:0;
    animation:rise 1s ease forwards 0.15s;
  }
  .hero .tagline{
    margin-top:14px;
    font-size:clamp(13px,1.6vw,15px);
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--muted);
    opacity:0;
    animation:rise 1s ease forwards 0.55s;
  }
  .hero .chips{
    margin-top:44px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    opacity:0;
    animation:rise 1s ease forwards 0.75s;
  }
  .chip{
    border:1px solid var(--line);
    padding:10px 20px;
    font-size:13px;
    letter-spacing:0.06em;
    color:var(--ivory);
    display:flex;
    align-items:center;
    gap:8px;
  }
  .chip svg{ width:14px; height:14px; color:var(--gold); }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .notice{
    margin-top:40px;
    max-width:460px;
    font-size:13.5px;
    color:var(--muted);
    border-top:1px solid var(--line);
    padding-top:18px;
    opacity:0;
    animation:rise 1s ease forwards 0.95s;
  }
  .notice strong{ color:var(--gold-bright); font-weight:500; }

  /* ---------- Sections ---------- */
  section{ padding:100px 20px; max-width:1080px; margin:0 auto; }
  .section-head{ text-align:center; margin-bottom:56px; }
  .eyebrow{
    display:block;
    font-size:12px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--gold-dim);
    margin-bottom:10px;
  }
  .section-head h2{
    font-size:clamp(28px,4vw,40px);
    font-weight:600;
    color:var(--ivory);
  }

  /* ---------- Karte ---------- */
  .menu{ display:grid; gap:6px; }
  .menu-group{ margin-bottom:34px; }
  .menu-group h3{
    font-size:13px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
    font-weight:600;
  }
  .menu-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding:11px 0;
    border-bottom:1px dotted var(--line);
  }
  .menu-row .name{ font-size:16px; color:var(--ivory); white-space:nowrap; }
  .menu-row .vol{ font-size:12px; color:var(--muted); white-space:nowrap; }
  .menu-row .fill{
    flex:1;
    border-bottom:1px dotted rgba(154,145,132,0.3);
    transform:translateY(-4px);
  }
  .menu-row .price{
    font-size:16px;
    color:var(--gold-bright);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }

  /* ---------- Unterhaltung ---------- */
  .features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
  }
  .feature{
    background:var(--card);
    border:1px solid var(--line);
    padding:34px 28px;
    transition:border-color 0.3s ease, transform 0.3s ease;
  }
  .feature:hover{ border-color:var(--gold); transform:translateY(-3px); }
  .feature svg{ width:34px; height:34px; color:var(--gold); margin-bottom:18px; }
  .feature h3{ font-size:19px; font-weight:600; color:var(--ivory); margin-bottom:8px; }
  .feature p{ font-size:14px; color:var(--muted); }

  /* ---------- Anfahrt ---------- */
  .visit{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
  }
  .visit-info dl{ display:grid; grid-template-columns:auto 1fr; gap:12px 20px; }
  .visit-info dt{
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold-dim);
    white-space:nowrap;
    padding-top:2px;
  }
  .visit-info dd{ font-size:16px; color:var(--ivory); }
  .visit-info a.map-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:26px;
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold-bright);
    border-bottom:1px solid var(--gold-dim);
    padding-bottom:4px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  .visit-info a.map-link:hover{ color:var(--gold); border-color:var(--gold); }

  .map-frame{
    border:1px solid var(--line);
    aspect-ratio:4/3;
    filter:grayscale(1) invert(0.92) contrast(0.9);
  }
  .map-frame iframe{ width:100%; height:100%; border:0; }

  @media (max-width: 760px){
    .visit{ grid-template-columns:1fr; }
    .map-frame{ order:-1; }
    nav ul{ display:none; }
  }

  footer{
    text-align:center;
    padding:50px 20px 40px;
    color:var(--muted);
    font-size:12.5px;
    letter-spacing:0.06em;
    border-top:1px solid var(--line);
  }
  footer .brand{ justify-content:center; margin-bottom:14px; color:var(--gold-dim); }

  /* ---------- Legal pages ---------- */
  .legal-links{
    margin-top:14px;
    display:flex;
    gap:10px;
    justify-content:center;
    font-size:12px;
    letter-spacing:0.04em;
  }
  .legal-links a{ color:var(--muted); transition:color 0.2s ease; }
  .legal-links a:hover, .legal-links a:focus-visible{ color:var(--gold-bright); }

  .legal-page{
    max-width:720px;
    margin:0 auto;
    padding:150px 20px 100px;
  }
  .legal-page h1{
    font-size:clamp(28px,4vw,38px);
    font-weight:600;
    color:var(--ivory);
    margin-bottom:44px;
  }
  .legal-page h2{
    font-family:'Cinzel', serif;
    font-size:16px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    margin:38px 0 12px;
  }
  .legal-page h2:first-of-type{ margin-top:0; }
  .legal-page p, .legal-page li{
    font-size:15px;
    color:var(--ivory);
    opacity:0.92;
    margin-bottom:10px;
  }
  .legal-page ul{ padding-left:20px; margin-bottom:10px; }
  .legal-page a{ color:var(--gold-bright); border-bottom:1px solid var(--gold-dim); }
  .legal-page a:hover{ color:var(--gold); }
  .legal-page .back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:40px;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    border-bottom:none;
  }
  .legal-page .back:hover{ color:var(--gold-bright); }
  .legal-page .placeholder{ color:var(--gold-bright); background:rgba(198,160,92,0.12); padding:1px 6px; }