*{box-sizing:border-box;margin:0;padding:0;cursor:url('data:image/svg+xml;utf8,<svg width="45" height="27" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg"><path d="M 5 15 Q 12.5 5, 25 5 Q 37.5 5, 45 15 Q 37.5 25, 25 25 Q 12.5 25, 5 15 Z" stroke="%23111" stroke-width="1.5" fill="none"/><circle cx="25" cy="15" r="5" fill="%23111"/></svg>') 23 14, auto}
*:active{cursor:url('data:image/svg+xml;utf8,<svg width="45" height="27" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg"><path d="M 5 15 Q 25 18, 45 15" stroke="%23111" stroke-width="1.5" fill="none"/></svg>') 23 14, auto}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,Arial,sans-serif;color:#111}

/* Video Intro */
.video-intro{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;cursor:url('data:image/svg+xml;utf8,<svg width="45" height="27" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg"><path d="M 5 15 Q 12.5 5, 25 5 Q 37.5 5, 45 15 Q 37.5 25, 25 25 Q 12.5 25, 5 15 Z" stroke="%23fff" stroke-width="2" fill="none"/><circle cx="25" cy="15" r="5" fill="%23fff"/></svg>') 23 14, auto;transition:opacity .5s ease}
.video-intro.hidden{opacity:0;pointer-events:none}
.video-intro video{width:100%;height:100%;object-fit:cover}
.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3)}
.video-hint{color:#fff;font-size:clamp(16px,3vw,22px);font-weight:300;letter-spacing:0.05em;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:0.6} 50%{opacity:1}}

.banner{display:flex;align-items:center;justify-content:space-between;padding:2rem;background:#f7f6f3;border-bottom:1px solid #eee;height:18.75vh}
.title-placeholder{max-width:60%;}
.logo-overlay{position:relative;display:inline-block;width:1.2em;height:1.2em;vertical-align:middle;margin:0 0.05em;transform:translateY(-0.15em)}
.eye-logo{width:100%;height:100%;transform:rotate(-45deg)}
.title-placeholder h1{margin:0;font-size:clamp(36px,8vw,50px);line-height:0.80;letter-spacing:0.02em;font-weight:400}
.title-placeholder h2{margin:0;margin-top:0.6rem;font-size:clamp(9px,1.75vw,14px);color:#666;font-weight:300;letter-spacing:0.25em}
.menu-links{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.menu-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#111;font-weight:600;font-size:18px;line-height:1.2;padding:8px 12px;border-radius:4px;transition:background-color .3s ease,color .3s ease;min-width:120px;min-height:36px;border:none;cursor:pointer}
.menu-link:hover,.menu-link:focus{background:#f0efeb;color:#000;outline:none}

.menu-link:first-child,.menu-link:last-child{background:#000;color:#000}
.menu-link:first-child:hover,.menu-link:first-child:focus,.menu-link:last-child:hover,.menu-link:last-child:focus{background:transparent;color:#111}

@media (max-width:520px){
  .menu-links{gap:4px}
  .menu-link{font-size:16px;padding:8px 10px;min-width:100px;min-height:36px}
}

/* Drawer + overlay */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;z-index:90}
.menu-overlay.open{opacity:1;visibility:visible}

#menu.drawer{position:fixed;top:0;right:0;height:100%;width:160px;max-width:43vw;background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:-12px 0 30px rgba(0,0,0,0.12);transform:translateX(100%);transition:transform .28s ease;z-index:100;padding:1.25rem;display:flex;flex-direction:column}
#menu.drawer.open{transform:translateX(0)}
#menu.drawer .menu-close{align-self:flex-end;background:none;border:0;font-size:20px;cursor:pointer}
#menu.drawer .menu-inner{margin-top:1rem}
#menu.drawer ul{list-style:none;padding:0;margin:0}
#menu.drawer li{margin:0.75rem 0}
#menu.drawer a{text-decoration:none;color:#111;font-weight:600}

@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  #menu.drawer{background:rgba(255,255,255,0.95)}
}

.hint{padding:1.5rem;color:#666}

/* Image banner under header */
.image-banner{width:100%;height:clamp(240px,45vh,520px);max-height:clamp(240px,45vh,520px);overflow:hidden;position:relative;background:transparent;cursor:url('data:image/svg+xml;utf8,<svg width="45" height="27" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg"><path d="M 5 15 Q 12.5 5, 25 5 Q 37.5 5, 45 15 Q 37.5 25, 25 25 Q 12.5 25, 5 15 Z" stroke="%23111" stroke-width="1.5" fill="none"/><circle cx="25" cy="15" r="5" fill="%23111"/></svg>') 23 14, auto}
.carousel{display:flex;gap:0;align-items:stretch;height:100%;will-change:transform;padding:0}
.carousel img{height:100%;width:auto;flex:0 0 auto;object-fit:cover;display:block;border-radius:0;min-width:100px;cursor:url('data:image/svg+xml;utf8,<svg width="45" height="27" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg"><path d="M 5 15 Q 12.5 5, 25 5 Q 37.5 5, 45 15 Q 37.5 25, 25 25 Q 12.5 25, 5 15 Z" stroke="%23111" stroke-width="1.5" fill="none"/><circle cx="25" cy="15" r="5" fill="%23111"/></svg>') 23 14, pointer}

/* Text banner */
.text-banner{width:100%;height:12vh;max-height:12vh;overflow:hidden;position:relative;background:#f7f6f3;border-top:1px solid #eee;border-bottom:1px solid #eee;display:flex;align-items:center}
.text-carousel{display:flex;gap:0;align-items:center;height:100%;will-change:transform;padding:0;white-space:nowrap}
.text-item{font-size:clamp(9px,2vw,14px);font-weight:300;letter-spacing:0.15em;color:#1F3C45;flex:0 0 auto;padding:0 1rem}

/* Image error state */
.carousel img.img-error{filter:grayscale(80%);opacity:0.6;position:relative}
.carousel img.img-error::after{content:attr(alt);position:absolute;left:8px;top:8px;padding:4px 8px;background:rgba(0,0,0,0.6);color:#fff;font-size:12px;border-radius:4px}

/* Lightbox styles */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);visibility:hidden;opacity:0;transition:opacity .18s ease,visibility .18s;z-index:120;padding:2rem}
.lightbox.open{visibility:visible;opacity:1}
.lightbox img{max-width:70%;max-height:75%;object-fit:contain;box-shadow:0 8px 30px rgba(0,0,0,0.8);border-radius:6px}
.lightbox-caption{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);color:#fff;font-size:16px;text-align:center;max-width:600px;font-weight:300}
.lightbox-close{position:fixed;top:18px;right:18px;background:none;border:0;color:#fff;font-size:28px;cursor:pointer;z-index:121;padding:8px}
.lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:48px;cursor:pointer;padding:12px;transition:opacity .2s ease;opacity:0.6;z-index:121}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:2rem}
.lightbox-next{right:2rem}

/* Content Lightbox styles */
.content-lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s;z-index:130;padding:2rem}
.content-lightbox.open{visibility:visible;opacity:1}
.content-lightbox-inner{background:#fff;width:auto;max-width:90vw;max-height:90vh;overflow:auto;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,0.3);position:relative;padding:2.5rem}
.content-lightbox-close{position:absolute;top:1rem;right:1rem;background:none;border:0;color:#111;font-size:28px;cursor:pointer;padding:8px;line-height:1}
.content-lightbox-body h1{margin:0 0 1.5rem 0;font-size:clamp(28px,5vw,36px);font-weight:400;letter-spacing:0.02em}
.content-lightbox-body p{margin:0 0 1rem 0;line-height:1.6;color:#333;text-align:justify;font-size:19.2px}
.hidden-content{display:none}


/* Unterseiten */
.simple-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid #eee;background:#fafafa}
.simple-header .back{text-decoration:none;color:#111}
.content{padding:1.25rem}

@media (max-width:520px){
  .banner{padding:1rem;height:18.75vh}
  .title-placeholder{max-width:100%}
  .title-placeholder h1{font-size:clamp(25,9vw,56px)}
}

@media (max-width:1024px){
  .image-banner{height:clamp(200px,38vh,420px);max-height:clamp(200px,38vh,420px)}
  .content-lightbox-inner{max-width:94vw;padding:2rem}
}

@media (max-width:768px){
  .image-banner{height:clamp(180px,35vh,360px);max-height:clamp(180px,35vh,360px)}
  .lightbox img{max-width:90%;max-height:70%}
}

@media (max-width:520px){
  .banner{padding:1rem;height:auto;min-height:72px}
  .image-banner{height:clamp(170px,33vh,320px);max-height:clamp(170px,33vh,320px)}
  .carousel img{height:100%;min-width:80px}
  .content-lightbox-inner{max-width:96vw;padding:1.5rem}
}