:root{
    --black:#07060b; --panel:#0e0b16; --panel2:#120e1e;
    --pink:#ff2fbf; --pink-hi:#ff74d8; --cyan:#25e5ff; --cyan-hi:#8cf3ff;
    --gold:#e7c877; --cream:#f3e7cb; --txt:#c7c0d9; --muted:#8b83a6;
    --line:rgba(255,255,255,.09);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:"Space Grotesk",system-ui,sans-serif;color:var(--txt);background:var(--black);
    line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:.2px}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  h1,h2,h3{margin:0;font-family:"Grenze Gotisch","Cormorant Garamond",serif;font-weight:700;line-height:1.06}
  .frak{font-family:"Grenze Gotisch",serif;font-weight:700}
  .eyebrow{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:4px;font-size:13px;
    text-transform:uppercase;display:block;color:var(--cyan)}
  .pink{color:var(--pink)}
  .cyan{color:var(--cyan);text-shadow:0 0 10px rgba(37,229,255,.8)}

  /* NAV */
  .topnav{position:sticky;top:0;z-index:50;background:rgba(7,6,11,.72);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,47,191,.28)}
  .topnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 24px}
  .back{display:flex;align-items:center;gap:10px}
  .back .postlogo{height:34px;width:58px;fill:var(--cream);opacity:.92;transition:opacity .2s}
  .back:hover .postlogo{opacity:1}
  .back .arrow{color:var(--muted);font-size:20px}
  /* Sehr schmale Screens: CTA in der Topbar kompakter, damit sie das Logo nicht bedraengt */
  @media(max-width:480px){
    .topnav .wrap{padding:9px 14px;gap:10px}
    .topnav .btn{font-size:11px;letter-spacing:1px;padding:10px 14px}
    .back .postlogo{height:30px;width:51px}
  }
  .btn{display:inline-flex;align-items:center;gap:8px;font-family:"Space Grotesk",sans-serif;font-weight:600;
    letter-spacing:1.5px;text-transform:uppercase;font-size:13px;padding:12px 22px;border-radius:8px;cursor:pointer;
    transition:transform .15s,box-shadow .25s,background .2s;border:none}
  .btn:hover{transform:translateY(-2px)}
  .btn-pink{background:var(--pink);color:#fff;box-shadow:0 0 22px rgba(255,47,191,.5)}
  .btn-pink:hover{box-shadow:0 0 40px rgba(255,47,191,.85)}
  .btn-cyan{background:transparent;color:var(--cyan-hi);border:1.5px solid var(--cyan);box-shadow:0 0 16px rgba(37,229,255,.25) inset}
  .btn-cyan:hover{box-shadow:0 0 22px rgba(37,229,255,.5),0 0 16px rgba(37,229,255,.3) inset}
  .btn-ghost{background:rgba(255,255,255,.06);color:var(--cream);border:1px solid rgba(255,255,255,.16)}

  /* HERO */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:#000}
  .hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .hero::after{content:"";position:absolute;inset:0;z-index:1;
    background:radial-gradient(115% 90% at 50% 42%,rgba(7,6,11,.28),rgba(7,6,11,.9)),
    linear-gradient(180deg,rgba(255,47,191,.06),rgba(7,6,11,.55) 60%,rgba(7,6,11,.85))}
  .hero .inner{position:relative;z-index:2;width:100%;text-align:center;padding:70px 0}
  .badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:24px;border:1px solid var(--pink);border-radius:999px;
    padding:9px 20px;font-weight:600;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--pink-hi);
    box-shadow:0 0 20px rgba(255,47,191,.35);background:rgba(7,6,11,.4);backdrop-filter:blur(4px)}
  .badge .pin{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
  /* Wortmarke in Grenze Gotisch - dieselbe Fraktur wie auf der Gasthof-Seite, nur in Neon */
  .hero .neonword{font-family:"Grenze Gotisch",serif;font-weight:700;
    font-size:min(15vw,196px);line-height:.94;letter-spacing:2px;color:#fff;margin:6px auto 0;
    text-shadow:
      0 0 4px #fff,
      0 0 11px var(--pink-hi),
      0 0 26px var(--pink),
      0 0 56px rgba(255,47,191,.7),
      0 0 96px rgba(255,47,191,.4);
    animation:neon 2.4s ease-in-out infinite}
  @media(max-width:520px){.hero .neonword{font-size:19vw}}
  .hero .logo-h1{margin:6px auto 0;line-height:0}
  .hero .logo{display:block;width:min(920px,92%);height:auto;margin:0 auto;
    filter:drop-shadow(0 0 16px rgba(255,47,191,.6)) drop-shadow(0 0 40px rgba(255,47,191,.32));
    animation:neon 2.4s ease-in-out infinite}
  @keyframes neon{
    0%,100%{filter:drop-shadow(0 0 12px rgba(255,47,191,.5)) drop-shadow(0 0 34px rgba(255,47,191,.26))}
    50%{filter:drop-shadow(0 0 26px rgba(255,95,210,.95)) drop-shadow(0 0 70px rgba(255,47,191,.6)) drop-shadow(0 0 100px rgba(255,47,191,.35))}
  }
  .hero .sub{font-size:clamp(17px,2.4vw,22px);color:#e7e1f2;max-width:34ch;margin:24px auto 0;font-weight:400;
    text-shadow:0 2px 12px rgba(0,0,0,.85)}
  .hero .cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
  .scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:2;color:var(--muted);font-size:24px;animation:bob 2s infinite}
  @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}

  section{position:relative}
  .sec-eyebrow{text-align:center}
  .headrow{text-align:center;margin-bottom:38px}
  .headrow h2{font-size:clamp(34px,5vw,58px);color:#fff;margin-top:6px}

  /* WAS */
  .what{padding:96px 0;background:linear-gradient(180deg,#07060b,#0d0a16)}
  .what .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  @media(max-width:820px){.what .grid{grid-template-columns:1fr;gap:30px}}
  .what h2{font-size:clamp(32px,4.6vw,52px);color:#fff}
  .what h2 em{font-style:normal;color:var(--pink);text-shadow:0 0 22px rgba(255,47,191,.5)}
  .what p{color:var(--txt);font-size:16px;margin:16px 0 0;max-width:46ch;font-weight:400}
  .floors{position:relative;background:linear-gradient(180deg,#120e1e,#0b0913);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .flr{display:flex;align-items:center;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
  .flr:last-child{border:none}
  .flr .n{font-family:"Grenze Gotisch",serif;font-size:32px;width:54px;text-align:center;color:var(--muted)}
  .flr .txt b{font-family:"Grenze Gotisch",serif;font-size:22px;font-weight:700;color:#fff}
  .flr .txt span{display:block;font-size:13px;color:var(--muted);letter-spacing:.5px}
  .flr.top{background:linear-gradient(90deg,rgba(255,47,191,.16),transparent)}
  .flr.top .n{color:var(--pink);text-shadow:0 0 16px rgba(255,47,191,.7)}
  .flr.top .txt b{color:var(--pink-hi)}

  /* GALERIE */
  .gal{padding:96px 0;background:#0d0a16}
  .gal-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:210px;gap:14px}
  @media(max-width:820px){.gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px}}
  .gp{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,47,191,.22);background:#100c18}
  .gp img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
  .gp:hover img{transform:scale(1.07)}
  .gp:hover{border-color:var(--pink);box-shadow:0 0 30px rgba(255,47,191,.45)}
  .gp.tall{grid-row:span 2}
  .gp.wide{grid-column:span 2}

  /* VIBES — Neon, das knallt */
  .vibes{padding:110px 0;position:relative;overflow:hidden;
    background:radial-gradient(65% 85% at 12% 0%,rgba(255,47,191,.20),transparent 60%),
               radial-gradient(65% 85% at 100% 100%,rgba(37,229,255,.16),transparent 60%),
               linear-gradient(180deg,#0d0a16,#08070f)}
  .vibes .headrow h2{font-size:clamp(40px,6.4vw,78px);line-height:1.02;
    background:linear-gradient(92deg,#ffffff,#ffcdee 42%,#8cf3ff);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 0 26px rgba(255,47,191,.4))}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media(max-width:820px){.cards{grid-template-columns:1fr}}
  .card{position:relative;border-radius:20px;padding:40px 30px 34px;overflow:hidden;
    background:linear-gradient(180deg,rgba(32,21,48,.92),rgba(12,9,20,.96));
    border:1px solid rgba(255,255,255,.11);
    transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s}
  .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px}
  .card:nth-child(1)::before{background:linear-gradient(90deg,var(--pink),var(--pink-hi))}
  .card:nth-child(2)::before{background:linear-gradient(90deg,var(--cyan),var(--cyan-hi))}
  .card:nth-child(3)::before{background:linear-gradient(90deg,var(--gold),#fff0c0)}
  .card:hover{transform:translateY(-9px) scale(1.015)}
  .card:nth-child(1):hover{border-color:var(--pink);box-shadow:0 22px 55px -18px rgba(255,47,191,.6),0 0 34px rgba(255,47,191,.28)}
  .card:nth-child(2):hover{border-color:var(--cyan);box-shadow:0 22px 55px -18px rgba(37,229,255,.55),0 0 34px rgba(37,229,255,.24)}
  .card:nth-child(3):hover{border-color:var(--gold);box-shadow:0 22px 55px -18px rgba(231,200,119,.5),0 0 34px rgba(231,200,119,.22)}
  .card .ic{display:inline-grid;place-items:center;width:76px;height:76px;border-radius:18px;font-size:38px;margin-bottom:20px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
  .card:nth-child(1) .ic{border-color:rgba(255,47,191,.55);box-shadow:0 0 28px rgba(255,47,191,.45),inset 0 0 18px rgba(255,47,191,.12)}
  .card:nth-child(2) .ic{border-color:rgba(37,229,255,.55);box-shadow:0 0 28px rgba(37,229,255,.4),inset 0 0 18px rgba(37,229,255,.1)}
  .card:nth-child(3) .ic{border-color:rgba(231,200,119,.55);box-shadow:0 0 28px rgba(231,200,119,.38),inset 0 0 18px rgba(231,200,119,.1)}
  .card h3{font-size:30px;color:#fff;margin-bottom:10px}
  .card p{font-size:15.5px;color:var(--txt);margin:0;font-weight:400}
  .specs{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:48px}
  .spec{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
    border:1px solid rgba(37,229,255,.30);border-radius:16px;padding:22px 32px;text-align:center;min-width:158px;
    box-shadow:0 0 26px rgba(37,229,255,.14),inset 0 0 22px rgba(37,229,255,.05)}
  .spec:nth-child(1){border-color:rgba(255,47,191,.35);box-shadow:0 0 26px rgba(255,47,191,.16),inset 0 0 22px rgba(255,47,191,.05)}
  .spec:nth-child(1) .big{color:var(--pink-hi);text-shadow:0 0 22px rgba(255,47,191,.7)}
  .spec .big{font-family:"Grenze Gotisch",serif;font-size:48px;color:var(--cyan-hi);line-height:1;text-shadow:0 0 22px rgba(37,229,255,.7)}
  .spec .lbl{font-size:12px;color:var(--txt);letter-spacing:2px;text-transform:uppercase;margin-top:8px}

  /* BOOK */
  .book{position:relative;padding:100px 0 110px;overflow:clip visible;
    background:radial-gradient(80% 130% at 30% 0%,rgba(255,47,191,.18),transparent),
               radial-gradient(70% 120% at 90% 100%,rgba(37,229,255,.12),transparent),#07060b;
    border-top:1px solid rgba(255,47,191,.28)}
  .book-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
  @media(max-width:820px){.book-grid{grid-template-columns:1fr;text-align:center}}
  .book h2{font-family:"Grenze Gotisch",serif;font-size:clamp(46px,7vw,92px);color:#fff;line-height:1;letter-spacing:1px}
  .book h2 .pink{text-shadow:0 0 30px rgba(255,47,191,.75)}
  .book p{color:#e7e1f2;max-width:44ch;margin:16px 0 0;font-size:16px;font-weight:400}
  @media(min-width:821px){.book p{margin-left:0}}
  @media(max-width:820px){.book p{margin-inline:auto}}
  .book .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
  @media(max-width:820px){.book .cta{justify-content:center}}
  .book .tel{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:2px;font-size:24px;color:var(--cyan-hi);margin-top:24px;text-shadow:0 0 16px rgba(37,229,255,.4)}
  .book-goat{position:relative;text-align:center}
  .book-goat img{max-height:440px;margin:0 auto;
    filter:drop-shadow(0 0 26px rgba(255,47,191,.55)) drop-shadow(0 0 60px rgba(255,47,191,.3));
    animation:goatglow 2.8s ease-in-out infinite}
  @keyframes goatglow{0%,100%{filter:drop-shadow(0 0 18px rgba(255,47,191,.45)) drop-shadow(0 0 44px rgba(255,47,191,.22))}
    50%{filter:drop-shadow(0 0 30px rgba(255,95,210,.85)) drop-shadow(0 0 80px rgba(255,47,191,.5))}}

  /* NÄCHSTES EVENT (Bock Alm) */
  .nextev{padding:80px 0 20px;background:linear-gradient(180deg,#08070f,#0d0a16)}
  .evcard{display:grid;grid-template-columns:300px 1fr;max-width:780px;margin:0 auto;overflow:hidden;
    background:linear-gradient(180deg,rgba(32,21,48,.95),rgba(12,9,20,.98));
    border:1.5px solid var(--pink);border-radius:20px;
    box-shadow:0 0 42px rgba(255,47,191,.35),0 24px 60px -24px rgba(0,0,0,.85)}
  /* Plakat GANZ zeigen statt beschneiden - Walter setzt Text aufs Bild.
     Seitenverhaeltnis = sein Plakatformat 1456x1040. */
  .evcard .pic{position:relative;aspect-ratio:1456/1040;background:#0d0917}
  .evcard .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  /* Mehrere Termine untereinander */
  .evliste{display:grid;gap:26px}
  .evliste .evcard{margin:0}
  /* Hover: leichtes Leuchten statt Versatz */
  .evcard{transition:box-shadow .3s ease,border-color .3s ease}
  .evcard:hover{border-color:var(--pink-hi);
    box-shadow:0 0 30px rgba(255,47,191,.5),0 0 70px rgba(255,47,191,.25),0 24px 60px -24px rgba(0,0,0,.85)}
  .evcard .date{position:absolute;top:14px;left:14px;z-index:2;background:var(--pink);color:#fff;
    border-radius:12px;text-align:center;padding:8px 13px;line-height:1;box-shadow:0 0 20px rgba(255,47,191,.6)}
  .evcard .date .d{font-family:"Grenze Gotisch",serif;font-size:26px;font-weight:700}
  .evcard .date .m{font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:3px}
  .evcard .body{padding:26px 30px}
  .evcard h3{font-size:30px;color:#fff;margin:6px 0 8px}
  .evcard .when{color:var(--cyan-hi);font-weight:600;letter-spacing:1px;margin-bottom:10px;font-size:15px}
  .evcard p{color:var(--txt);font-size:15px;margin:0 0 18px}
  .evcard .noev{grid-column:1/-1;padding:34px;text-align:center;color:var(--muted)}
  @media(max-width:620px){.evcard{grid-template-columns:1fr}}

  /* FOOTER */
  footer{background:#050408;padding:44px 0 30px;text-align:center;border-top:1px solid var(--line)}
  footer p{color:var(--muted);font-size:14px;margin:6px 0}
  footer a{color:var(--cyan-hi)}
  footer .home{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
  footer .home .postlogo{height:40px;width:68px;fill:var(--cream)}

  /* ================= MODERN-LAYER (2026) =================
     Nur Feinschliff: Einblend-Animationen, verdichtete Nav, Karten-Lift,
     sichtbarer Tastatur-Fokus. Keine Grafiken angefasst. */
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:no-preference){
    .rv{opacity:0;transform:translateY(22px);
        transition:opacity .8s cubic-bezier(.22,.68,.28,1),transform .8s cubic-bezier(.22,.68,.28,1)}
    .rv.in{opacity:1;transform:none}
  }
  .topnav{transition:box-shadow .3s ease,backdrop-filter .3s ease}
  .topnav .wrap{transition:padding .28s cubic-bezier(.22,.68,.28,1)}
  .topnav.shrunk .wrap{padding-top:4px;padding-bottom:4px}
  .topnav.shrunk{box-shadow:0 12px 34px -14px rgba(0,0,0,.9)}
  .ev,.bento a,.card,.spec div,.flr{transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s ease,border-color .34s ease}
  .ev:hover,.card:hover{transform:translateY(-6px)}
  .btn{transition:transform .18s ease,box-shadow .26s ease,background .2s ease}
  .btn:hover{transform:translateY(-2px)}
  a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:5px}
  ::selection{background:rgba(231,200,119,.35)}