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

/* Locally hosted Dancing Script (OFL, no Google connection) */
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/fonts/dancing-script-400.woff2) format('woff2');
}
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(/fonts/dancing-script-700.woff2) format('woff2');
}

:root{
  --accent:#fca311;--accent-dark:#cf9436;
  --text:#23396c;--bg:#fafafa;--white:#fff;--footer-bg:#f1f1f1;
  --heading:"Dancing Script",cursive;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --shadow:0 5px 30px rgba(18,63,82,.08),0 1px 3px rgba(18,63,82,.06);
  --shadow-card:0 5px 30px rgba(18,63,82,.035),0 0 0 1px rgba(176,181,193,.2);
  --shadow-hover:0 20px 50px rgba(18,63,82,.12),0 0 0 1px rgba(176,181,193,.3);
  --accent-soft:rgba(252,163,17,.1);
  --text-light:rgba(35,57,108,.6);
  --header-bg:rgba(255,255,255,.7);
  --nav-text:var(--white);
  --nav-shadow:0 1px 4px rgba(0,0,0,.4);
  --popup-bg:var(--white);
  --popup-text:var(--text);
}

/* Dark mode (automatic via system preference) */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --text:#a8b8d8;--bg:#0f1626;--white:#1a2332;--footer-bg:#0a0f1a;
    --shadow:0 5px 30px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
    --shadow-card:0 5px 30px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.05);
    --shadow-hover:0 20px 50px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);
    --accent-soft:rgba(252,163,17,.15);
    --text-light:rgba(168,184,216,.75);
    --header-bg:rgba(15,22,38,.85);
    --nav-text:var(--white);
    --nav-shadow:0 1px 4px rgba(0,0,0,.6);
    --popup-bg:#1a2332;
    --popup-text:#a8b8d8;
  }
}

/* Manual dark mode override (when user selects dark) */
:root[data-theme="dark"]{
  --text:#a8b8d8;--bg:#0f1626;--white:#1a2332;--footer-bg:#0a0f1a;
  --shadow:0 5px 30px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);
  --shadow-card:0 5px 30px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.05);
  --shadow-hover:0 20px 50px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);
  --accent-soft:rgba(252,163,17,.15);
  --text-light:rgba(168,184,216,.75);
  --header-bg:rgba(15,22,38,.85);
  --nav-text:var(--white);
  --nav-shadow:0 1px 4px rgba(0,0,0,.6);
  --popup-bg:#1a2332;
  --popup-text:#a8b8d8;
}

/* Manual light mode override (when user selects light while system is dark) */
:root[data-theme="light"]{
  --text:#23396c;--bg:#fafafa;--white:#fff;--footer-bg:#f1f1f1;
  --shadow:0 5px 30px rgba(18,63,82,.08),0 1px 3px rgba(18,63,82,.06);
  --shadow-card:0 5px 30px rgba(18,63,82,.035),0 0 0 1px rgba(176,181,193,.2);
  --shadow-hover:0 20px 50px rgba(18,63,82,.12),0 0 0 1px rgba(176,181,193,.3);
  --accent-soft:rgba(252,163,17,.1);
  --text-light:rgba(35,57,108,.6);
  --header-bg:rgba(255,255,255,.7);
  --nav-text:var(--white);
  --nav-shadow:0 1px 4px rgba(0,0,0,.4);
  --popup-bg:var(--white);
  --popup-text:var(--text);
}

/* Logo: <img> with CSS filter for dark mode */
.site-logo{max-width:50px;height:auto}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-logo{filter:invert(1) brightness(0.75) sepia(0.2) hue-rotate(180deg) saturate(1.2)}}
:root[data-theme="dark"] .site-logo{filter:invert(1) brightness(0.75) sepia(0.2) hue-rotate(180deg) saturate(1.2)}

/* Theme Switcher (in header, always visible) */
.theme-switch{background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 20px rgba(0,0,0,.08);flex-shrink:0;transition:transform .2s;position:relative;z-index:2}
.theme-switch:hover{transform:scale(1.08)}
.theme-switch:active{transform:scale(.95)}
.theme-switch svg{width:20px;height:20px;fill:var(--text);transition:opacity .2s}
.theme-switch .icon-sun{display:none}
.theme-switch .icon-moon{display:none}
:root[data-theme="light"] .theme-switch .icon-sun{display:block}
:root[data-theme="dark"] .theme-switch .icon-moon{display:block}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;font-size:clamp(16px,2.2vw,20px)}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;height:auto}
video{max-width:100%}

/* Scroll Reveal */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.magnet-btn{transition:none!important;transform:none!important}}

/* Card Lift */
.lift-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1);will-change:transform}
.lift-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}

/* Magnetic Buttons */
.magnet-btn{transition:transform .2s cubic-bezier(.16,1,.3,1);will-change:transform}
.magnet-btn:hover{transition:transform .15s ease-out}
.magnet-inner{display:inline-flex;align-items:center;gap:.5rem;transition:transform .2s cubic-bezier(.16,1,.3,1);will-change:transform}

/* Header - fixed overlay, transparent, video shines through */
.site-header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:1rem 2rem;display:flex;justify-content:center;transition:padding .3s ease}
.site-header.scrolled{padding:.6rem 2rem}
.header-inner{max-width:1100px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.brand-wrap{display:flex;align-items:center;gap:.8rem;background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.5rem 1.2rem;border-radius:50px;box-shadow:0 2px 20px rgba(0,0,0,.08)}
.brand-text{font-family:var(--heading);font-size:clamp(18px,3vw,28px);font-weight:700;color:var(--text);white-space:nowrap;line-height:1}
.main-nav{display:flex;gap:.5rem}
.nav-link{font-family:var(--heading);font-size:20px;font-weight:700;color:var(--white);text-decoration:none;padding:.3rem .8rem;border-radius:50px;transition:color .3s,text-shadow .3s,background .2s;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.nav-link:hover{color:var(--accent);background:var(--accent-soft)}
.site-header.scrolled .nav-link{color:var(--text);text-shadow:none}
.site-header.scrolled .nav-link:hover{color:var(--accent)}

/* Mobile Nav Toggle (hidden on desktop) */
.nav-toggle{display:none;background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;cursor:pointer;padding:.6rem;border-radius:50px;box-shadow:0 2px 20px rgba(0,0,0,.08);width:44px;height:44px;position:relative;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;position:absolute;left:50%;transform:translateX(-50%);transition:transform .3s ease,opacity .2s ease,top .3s ease}
.nav-toggle span:nth-child(1){top:14px}
.nav-toggle span:nth-child(2){top:21px}
.nav-toggle span:nth-child(3){top:28px}
.nav-toggle.open span:nth-child(1){top:21px;transform:translateX(-50%) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:21px;transform:translateX(-50%) rotate(-45deg)}

/* Hero */
.hero{position:relative;width:100%;height:100vh;min-height:700px;overflow:hidden;background:#e0e0e0}
.hero video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.25) 70%,rgba(0,0,0,.5) 100%);z-index:2}
.hero-button-wrap{position:absolute;bottom:3rem;left:0;width:100%;z-index:3;display:flex;justify-content:center}
.hero-button{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--white);padding:10px 30px;border-radius:4px;font-size:1rem;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;min-height:44px}
.hero-button:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(252,163,17,.4);background:var(--accent-dark)}

/* Wave separator */
.wave-sep{display:block;width:100%;height:80px;line-height:0;margin-top:-1px}
.wave-sep svg{width:100%;height:100%;display:block}
.wave-fill-fafafa{fill:var(--bg)}
.wave-fill-white{fill:var(--white)}

/* Content sections */
.section{padding:4rem 2rem}
.container{max-width:800px;margin:0 auto}
.card{background:var(--white);border-radius:12px;box-shadow:var(--shadow-card);padding:3rem;margin:0 auto;max-width:700px}

/* Typography */
h1,h2,h3{font-family:var(--heading);font-weight:700;line-height:1.3}
h1{font-size:clamp(28px,6vw,50px);text-align:center;margin-bottom:1rem}
h2{font-size:clamp(24px,5vw,42px);text-align:center;margin-bottom:1.5rem}
h3{font-size:clamp(18px,3vw,28px);font-family:var(--body);font-weight:bold;text-align:left}
p{margin-bottom:1em}
.intro-text{line-height:1.8;text-align:center;font-size:1.1rem;max-width:650px;margin:0 auto 2rem}

/* Aktuelles Panel */
.aktuelles-section{padding:4rem 2rem}
.aktuelles-panel{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:12px;padding:2.5rem;max-width:600px;margin:0 auto}
.aktuelles-panel h3{font-family:var(--heading);font-size:36px;text-align:center;margin-bottom:1rem;color:var(--text)}
.aktuelles-panel p{text-align:center;color:var(--text);line-height:1.7}

/* Speisenkarte */
.menu-list{list-style:none;padding:0;text-align:center}
.menu-list li{padding:.6rem 0;border-bottom:1px dotted var(--text-light);font-size:1rem}
.menu-list li:last-child{border-bottom:none}
.menu-divider{border:none;border-top:2px solid var(--accent);opacity:.4;margin:1.5rem auto;width:60%}
.menu-note{text-align:center;font-style:italic;color:var(--text-light);font-size:.9rem}

/* Hotelzimmer */
.hotel-banner{position:relative;width:100%;height:500px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hotel-banner video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.hotel-banner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:2}
.hotel-banner-content{position:relative;z-index:3;text-align:center;color:white}
.hotel-banner-content h2{color:white;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hotel-banner-content p{color:white;text-shadow:0 1px 5px rgba(0,0,0,.6);max-width:500px;margin:0 auto 1.5rem}
.btn-accent{display:inline-block;background:var(--accent);color:var(--white)!important;padding:10px 40px;border-radius:4px;font-weight:600;transition:transform .2s,box-shadow .2s;min-height:44px}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(252,163,17,.4)}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:start;max-width:700px;margin:0 auto}
.portrait{border-radius:12px;width:300px;box-shadow:var(--shadow-card)}
.kontakt-info{text-align:left}
.kontakt-info h3{margin-bottom:.5rem}
.address{font-style:normal;line-height:1.8;margin-bottom:1.5rem}
.contact-buttons{display:flex;flex-direction:column;gap:.8rem}
.btn-contact{display:inline-flex;align-items:center;gap:.5rem;background:var(--accent);color:var(--white)!important;padding:8px 50px;border-radius:4px;font-weight:600;text-decoration:none;transition:transform .2s;min-height:44px}
.btn-contact:hover{transform:translateY(-1px)}

/* OEffnungszeiten */
.hours{margin-top:2.5rem;max-width:400px;margin-left:auto;margin-right:auto}
.hours h3{text-align:center;font-family:var(--heading);font-size:32px;margin-bottom:1rem}
.hours dl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem}
.hours dt{font-weight:bold;text-align:right}
.hours dd{text-align:left}

/* Footer */
.site-footer{background:var(--footer-bg);padding:2rem;text-align:center}
.footer-nav{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}
.footer-link{color:var(--text-light);font-size:.9rem;text-decoration:none;cursor:pointer;transition:color .2s}
.footer-link:hover{color:var(--accent)}
.copyright{font-size:.85rem;color:var(--text-light)}
.copyright a{color:var(--text-light);text-decoration:none}
.copyright a:hover{color:var(--accent)}


/* Scroll-to-Top Button */
.scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;width:48px;height:48px;background:var(--accent);color:var(--white);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(252,163,17,.3);z-index:90;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .2s}
.scroll-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:var(--accent-dark);transform:translateY(-2px)}
.scroll-top svg{width:24px;height:24px;fill:currentColor}

/* ==================== Popups ==================== */
.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.popup-overlay.active{opacity:1;visibility:visible}
.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);width:90%;max-width:700px;max-height:85vh;background:var(--popup-bg);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.15);z-index:1001;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;display:flex;flex-direction:column;overflow:hidden}
.popup.active{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.popup-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2rem;border-bottom:1px solid var(--text-light);flex-shrink:0}
.popup-header h2{font-size:32px;margin:0;text-align:left}
.popup-close{background:none;border:none;font-size:28px;color:var(--text-light);cursor:pointer;padding:.5rem;line-height:1;transition:color .2s,transform .2s;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.popup-close:hover{color:var(--text);transform:rotate(90deg)}
.popup-body{padding:2rem 2.5rem;overflow-y:auto;flex-grow:1;line-height:1.7}
.popup-body h2{font-size:28px;text-align:left;margin-top:1.5rem;margin-bottom:.5rem}
.popup-body h3{font-size:20px;margin-top:1.2rem;margin-bottom:.5rem}
.popup-body p{margin-bottom:1em;font-size:.95rem;color:var(--text)}
.popup-body ul{padding-left:1.5rem;margin-bottom:1em}
.popup-body li{margin-bottom:.5em;font-size:.95rem;line-height:1.6}
.popup-body a{color:var(--accent);text-decoration:underline}


/* ==================== Responsive ==================== */

/* Tablet and below (<=768px) */
@media(max-width:768px){
  html{font-size:17px}
  body{overflow-x:hidden}

  /* Header: hamburger menu on mobile */
  .site-header{padding:1rem 1rem}
  .header-inner{flex-direction:row;justify-content:space-between;align-items:center;gap:.5rem;max-width:100%}
  .brand-wrap{padding:.3rem .8rem;gap:.5rem}
  .site-logo{max-width:36px}
  .brand-text{font-size:20px}

  /* Show hamburger, hide inline nav */
  .nav-toggle{display:block}
  .main-nav{display:none;flex-direction:column;position:absolute;top:calc(100% + .5rem);left:1rem;right:1rem;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.12);padding:.8rem;gap:.2rem;z-index:99}
  .main-nav.open{display:flex}
  .nav-link{font-size:18px;color:var(--text);text-shadow:none;padding:.8rem 1rem;min-height:44px;display:flex;align-items:center;border-radius:8px}

  /* Hero: shorter on mobile */
  .hero{height:60vh;min-height:420px}
  .hero-button{padding:8px 24px;font-size:.9rem}
  .hero-button-wrap{bottom:1.5rem}

  /* Waves: smaller */
  .wave-sep{height:50px}

  /* Sections: less padding */
  .section{padding:2.5rem 1rem}
  .aktuelles-section{padding:2.5rem 1rem}
  .container{padding:0}

  /* Typography: handled by clamp() now, only adjust spacing */
  .intro-text{font-size:1rem;padding:0 .5rem}

  /* Cards: tighter padding */
  .card{padding:1.5rem 1.2rem;border-radius:10px}

  /* Aktuelles panel */
  .aktuelles-panel{padding:1.5rem 1.2rem}
  .aktuelles-panel h3{font-size:28px}

  /* Menu: allow word wrap for long dish names */
  .menu-list li{padding:.5rem 0;font-size:.9rem;overflow-wrap:break-word;word-break:break-word}
  .menu-divider{width:80%}

  /* Hotel banner: shorter */
  .hotel-banner{height:350px}
  .hotel-banner-content h2{font-size:28px}
  .hotel-banner-content p{font-size:.9rem;padding:0 1rem}
  .btn-accent{padding:8px 28px;font-size:.9rem}

  /* Kontakt: stacked, centered */
  .kontakt-grid{grid-template-columns:1fr;text-align:center;gap:1.5rem}
  .portrait{width:200px;margin:0 auto}
  .kontakt-info{text-align:center}
  .kontakt-info h3{text-align:center}
  .address{text-align:center}
  .contact-buttons{align-items:center;gap:.6rem}
  .btn-contact{padding:8px 30px;font-size:.85rem}

  /* Hours: single column, centered */
  .hours{max-width:300px}
  .hours h3{font-size:26px}
  .hours dl{grid-template-columns:1fr;gap:.3rem}
  .hours dt{text-align:center}
  .hours dd{text-align:center}

  /* Footer */
  .site-footer{padding:1.5rem 1rem}
  .footer-nav{gap:1.2rem}
  .footer-link{font-size:.85rem}
  .copyright{font-size:.8rem;padding:0 .5rem}

  /* Popups: full-screen on mobile for readability */
  .popup{width:100%!important;max-width:100%!important;max-height:100vh;border-radius:0;height:100vh}
  .popup-header{padding:1rem 1.2rem;flex-shrink:0}
  .popup-header h2{font-size:22px}
  .popup-close{width:36px;height:36px;font-size:24px}
  .popup-body{padding:1.2rem 1.2rem 2rem;font-size:.92rem;line-height:1.65;-webkit-overflow-scrolling:touch}
  .popup-body h2{font-size:20px;margin-top:1.2rem;margin-bottom:.4rem}
  .popup-body h3{font-size:16px;margin-top:1rem;margin-bottom:.3rem}
  .popup-body p{font-size:.92rem;margin-bottom:.8em}
  .popup-body ul{padding-left:1.2rem;margin-bottom:.8em}
  .popup-body li{margin-bottom:.4em;font-size:.92rem;line-height:1.5}
  .popup-body strong{font-weight:600}
}

/* Small phones (<=480px) */
@media(max-width:480px){
  html{font-size:16px}

  .site-header{padding:.8rem .5rem}
  .brand-wrap{padding:.25rem .6rem;gap:.4rem}
  .site-logo{max-width:30px}
  .brand-text{font-size:18px}

  .nav-link{font-size:16px}

  .hero{height:55vh;min-height:350px}
  .hero-button{padding:7px 20px;font-size:.85rem}

  .wave-sep{height:35px}

  .section{padding:2rem .8rem}
  .card{padding:1.2rem 1rem}

  .portrait{width:160px}

  .btn-contact{padding:7px 24px;font-size:.8rem}

  .footer-nav{flex-direction:column;gap:.5rem}
  .copyright{font-size:.75rem}

  .scroll-top{bottom:1rem;right:1rem;width:42px;height:42px}
}

/* Landscape phone: adjust hero height */
@media(max-width:768px) and (orientation:landscape){
  .hero{height:100vh;min-height:300px}
}

/* Safe area insets for notch phones */
@supports(padding:max(0px)){
  .site-header{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
  .site-footer{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}
  .popup-body{padding-left:max(1.2rem,env(safe-area-inset-left));padding-right:max(1.2rem,env(safe-area-inset-right))}
}