/* ===========================================================
   Zum Schwanen — Demo · Editorial Black & Gold
=========================================================== */

:root{
  --black:      #0C0A08;
  --black-2:    #141009;
  --black-3:    #1B1510;
  --gold:       #C9A227;
  --gold-soft:  #E3C878;
  --gold-dim:   rgba(201,162,39,.3);
  --cream:      #F3ECDD;
  --dim:        rgba(243,236,221,.58);
  --dim-2:      rgba(243,236,221,.36);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --wrap: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:500; color:var(--cream); margin:0 0 .5em; letter-spacing:-.01em; }
h2{ font-size:clamp(1.9rem, 3.6vw, 3rem); line-height:1.15; font-weight:300; }
h2 em{ font-style:italic; font-weight:500; color:var(--gold-soft); }
h3{ font-size:1.2rem; font-weight:500; }
p{ margin:0 0 1em; }
.lead{ font-size:1.05rem; color:var(--dim); max-width:44ch; font-weight:300; }
.inline-link{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }

.eyebrow{
  font-family:var(--font-body); font-size:.68rem; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  margin:0 0 1em;
}
.eyebrow.center{ text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:1em 2.1em; border-radius:2px;
  font-family:var(--font-body); font-weight:500; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid transparent;
  transition:all .3s ease; cursor:pointer;
}
.btn-primary{ background:var(--gold); color:var(--black); }
.btn-primary:hover{ background:var(--gold-soft); }
.btn-outline{ border-color:var(--dim-2); color:var(--cream); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-soft); }
.btn-lg{ width:100%; justify-content:center; font-size:.85rem; padding:1.1em 2em; }

.text-link{ display:inline-flex; gap:.4em; font-size:.82rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); }
.text-link span{ transition:transform .25s ease; }
.text-link:hover span{ transform:translateX(4px); }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding:26px 0; transition:padding .3s ease, background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.solid{ background:rgba(12,10,8,.86); backdrop-filter:blur(10px); padding:16px 0; border-color:var(--gold-dim); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark{ display:flex; align-items:center; gap:10px; }
.wordmark-logo{ width:34px; height:34px; object-fit:contain; }
.wordmark-text{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.15rem; color:var(--cream); }

.nav{ display:flex; gap:34px; }
.nav a{ font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); position:relative; padding:4px 0; transition:color .2s ease; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav a:hover::after{ transform:scaleX(1); }
.nav a:hover{ color:var(--gold-soft); }

.header-actions{ display:flex; align-items:center; gap:20px; }
.header-call{ font-size:.78rem; font-weight:500; letter-spacing:.06em; color:var(--cream); border-bottom:1px solid var(--gold-dim); padding-bottom:2px; }
.header-call:hover{ border-color:var(--gold); color:var(--gold-soft); }

.cart-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:none; border:none; color:var(--cream); cursor:pointer; }
.cart-btn:hover{ color:var(--gold-soft); }
.cart-count{ position:absolute; top:-4px; right:-6px; min-width:16px; height:16px; padding:0 3px; border-radius:999px; background:var(--gold); color:var(--black); font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.cart-count.bump{ transform:scale(1.3); }
.cart-count.zero{ opacity:0; transform:scale(0); }

.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:6px; width:26px; height:20px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ height:1px; background:var(--cream); }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; padding-top:120px; padding-bottom:100px; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.hero-scrim{ position:absolute; inset:0; background:
  linear-gradient(0deg, rgba(9,7,5,.94) 0%, rgba(9,7,5,.45) 42%, rgba(9,7,5,.35) 65%, rgba(9,7,5,.6) 100%); }
.hero-inner{ position:relative; z-index:2; max-width:720px; }
.hero-title{ font-size:clamp(2.6rem, 6.4vw, 5rem); font-weight:300; line-height:1.02; margin-bottom:.55em; }
.hero-title em{ font-style:italic; font-weight:500; color:var(--gold-soft); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-spine{
  position:absolute; right:26px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center;
  font-size:.62rem; letter-spacing:.4em; color:var(--gold); white-space:nowrap; z-index:2; opacity:.7;
}

.scroll-cue{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); width:24px; height:38px; border:1px solid var(--dim-2); border-radius:20px; background:none; cursor:pointer; z-index:2; }
.scroll-cue span{ position:absolute; top:7px; left:50%; width:3px; height:7px; background:var(--gold-soft); border-radius:2px; margin-left:-1.5px; animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ opacity:1; transform:translateY(0); } 70%{ opacity:0; transform:translateY(12px); } 100%{ opacity:0; transform:translateY(0); } }

/* ---------- editorial break ---------- */
.break{ position:relative; height:56vh; min-height:340px; overflow:hidden; }
.break img{ width:100%; height:100%; object-fit:cover; }
.break-caption{
  position:absolute; left:0; right:0; bottom:0; padding:44px 32px;
  background:linear-gradient(0deg, rgba(9,7,5,.82) 0%, transparent 100%);
  display:flex; align-items:flex-end; gap:24px; max-width:var(--wrap); margin:0 auto;
}
.break-caption .rule{ width:44px; height:1px; background:var(--gold); flex-shrink:0; margin-bottom:.6em; }
.break-caption p{ margin:0; font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:var(--cream); max-width:44ch; }

/* ---------- sections ---------- */
.section{ padding:120px 0; }
.section-black{ background:var(--black-2); }

/* zigzag */
.zigzag{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.zigzag-visual img{ width:100%; aspect-ratio:900/1100; object-fit:cover; }
.zigzag-text .lead{ margin-bottom:1.6em; }

/* gallery */
.gallery-grid{ margin-top:50px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:2px; }
.gallery-item{ position:relative; border:0; padding:0; overflow:hidden; cursor:pointer; background:none; }
.gallery-item.g-tall{ grid-row:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .4s ease; filter:grayscale(.15) brightness(.92); }
.gallery-item:hover img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(6,5,3,.95); display:none; align-items:center; justify-content:center; padding:40px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(90vw,1000px); max-height:88vh; }
.lightbox-close{ position:absolute; top:24px; right:28px; width:38px; height:38px; border-radius:50%; border:1px solid var(--dim-2); background:none; color:var(--cream); font-size:1rem; cursor:pointer; }
.lightbox-close:hover{ border-color:var(--gold); color:var(--gold); }

/* trust strip */
.trust-strip{ border-top:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim); }
.trust-strip-inner{ display:flex; justify-content:space-between; padding:36px 32px; }
.trust-item{ display:flex; align-items:center; gap:12px; }
.trust-item svg{ width:22px; height:22px; color:var(--gold); flex-shrink:0; }
.trust-item span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }

/* ---------- online bestellen ---------- */
.menu-tabs{ margin-top:48px; display:flex; flex-wrap:wrap; gap:28px; border-bottom:1px solid var(--dim-2); padding-bottom:2px; }
.tab{
  padding:0 0 14px; background:none; border:none; border-bottom:1px solid transparent;
  color:var(--dim); font-family:var(--font-body); font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:color .25s ease, border-color .25s ease;
  margin-bottom:-1px;
}
.tab:hover{ color:var(--gold-soft); }
.tab.active{ color:var(--gold-soft); border-color:var(--gold); }

.menu-panels{ margin-top:8px; }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; }
.menu-item{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:22px 0; border-bottom:1px solid rgba(243,236,221,.08);
}
.mi-info{ flex:1; min-width:0; }
.mi-info h4{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--cream); margin:0 0 .25em; }
.mi-info p{ font-size:.82rem; color:var(--dim-2); margin:0; font-weight:300; }
.mi-action{ display:flex; align-items:baseline; gap:18px; flex-shrink:0; }
.mi-price{ font-family:var(--font-display); font-weight:500; color:var(--gold-soft); font-size:1rem; white-space:nowrap; }
.add-btn{
  background:none; border:none; color:var(--gold); font-size:.7rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:1px; transition:all .2s ease;
}
.add-btn:hover{ border-color:var(--gold); color:var(--gold-soft); }
.add-btn.added{ color:var(--cream); }
.add-btn.added::after{ content:" ✓"; }

/* info strip */
.info-strip{ padding:26px 0; text-align:center; }
.info-strip-inner{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim-2); }
.info-strip-inner .sep{ margin:0 14px; color:var(--gold-dim); }

/* ---------- reservieren ---------- */
.kontakt-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:80px; }
.reserve-form{ margin-top:40px; display:flex; flex-direction:column; gap:22px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.reserve-form label{ display:flex; flex-direction:column; gap:8px; font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.reserve-form label.full{ width:100%; }
.reserve-form input, .reserve-form select, .reserve-form textarea{
  font-family:var(--font-body); font-size:.95rem; font-weight:300; padding:.6em 0;
  border:none; border-bottom:1px solid var(--dim-2); background:transparent; color:var(--cream);
  border-radius:0; text-transform:none; letter-spacing:normal;
}
.reserve-form input::placeholder, .reserve-form textarea::placeholder{ color:var(--dim-2); }
.reserve-form input:focus, .reserve-form select:focus, .reserve-form textarea:focus{ outline:none; border-color:var(--gold); }
.reserve-form select{ color-scheme:dark; }
.form-hint{ font-size:.82rem; color:var(--dim); margin:0; }
.form-hint a{ color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px; }

.kontakt-hours h3{ font-size:1.1rem; margin-bottom:22px; }
.hours-table{ width:100%; border-collapse:collapse; margin-bottom:32px; }
.hours-table td{ padding:9px 0; font-size:.85rem; border-bottom:1px solid rgba(243,236,221,.08); color:var(--dim); }
.hours-table td:first-child{ color:var(--cream); font-weight:400; }
.hours-table td:last-child{ text-align:right; }
.hours-table tr.closed td{ color:var(--gold-soft); }
.map-frame{ overflow:hidden; border:1px solid rgba(243,236,221,.12); filter:grayscale(1) invert(.92) contrast(.86); }
.map-frame iframe{ width:100%; height:220px; border:0; display:block; }

/* kontakt strip */
.kontakt-strip{ border-top:1px solid var(--gold-dim); padding:60px 0; }
.kontakt-strip-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.kontakt-strip-inner h5{ font-family:var(--font-body); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 .6em; }
.kontakt-strip-inner p{ font-size:.9rem; color:var(--dim); margin:0; }
.social-links{ display:flex; gap:16px; }
.social-links a{ color:var(--cream); border-bottom:1px solid var(--gold-dim); padding-bottom:1px; }
.social-links a:hover{ color:var(--gold-soft); border-color:var(--gold); }

/* ---------- cart drawer ---------- */
.cart-overlay{ position:fixed; inset:0; background:rgba(6,5,3,.6); z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw;
  background:var(--black-2); color:var(--cream); z-index:1001;
  display:flex; flex-direction:column; border-left:1px solid var(--gold-dim);
  transform:translateX(100%); transition:transform .35s ease;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:26px 26px 18px; border-bottom:1px solid rgba(243,236,221,.1); }
.cart-head h3{ margin:0; font-size:1.05rem; }
.cart-close{ background:none; border:none; color:var(--cream); font-size:1rem; cursor:pointer; opacity:.7; }
.cart-close:hover{ opacity:1; color:var(--gold-soft); }
.cart-body{ flex:1; overflow-y:auto; padding:22px 26px; }
.cart-empty{ color:var(--dim-2); font-size:.9rem; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid rgba(243,236,221,.08); }
.ci-info{ flex:1; min-width:0; }
.ci-name{ font-size:.9rem; color:var(--cream); }
.ci-price{ font-size:.76rem; color:var(--dim-2); }
.ci-qty{ display:flex; align-items:center; gap:8px; }
.ci-qty button{ width:22px; height:22px; border-radius:50%; border:1px solid var(--dim-2); background:none; color:var(--cream); cursor:pointer; font-size:.85rem; line-height:1; }
.ci-qty button:hover{ border-color:var(--gold); color:var(--gold); }
.ci-qty span{ min-width:16px; text-align:center; font-size:.85rem; }
.ci-remove{ background:none; border:none; color:var(--dim-2); cursor:pointer; font-size:.85rem; padding:0 2px; }
.ci-remove:hover{ color:var(--gold-soft); }

.cart-foot{ padding:22px 26px 28px; border-top:1px solid rgba(243,236,221,.1); display:flex; flex-direction:column; gap:14px; }
.cart-total-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.95rem; }
.cart-total-row strong{ color:var(--gold-soft); font-family:var(--font-display); font-size:1.25rem; font-weight:500; }
.cart-name-label{ display:flex; flex-direction:column; gap:5px; font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.cart-name-label input{ font-family:var(--font-body); font-size:.88rem; font-weight:300; padding:.5em 0; border:none; border-bottom:1px solid var(--dim-2); background:transparent; color:var(--cream); }
.cart-name-label input::placeholder{ color:var(--dim-2); }
.cart-name-label input:focus{ outline:none; border-color:var(--gold); }
.cart-demo-note{ font-size:.68rem; color:var(--dim-2); margin:0; text-align:center; }

/* ---------- footer ---------- */
.site-footer{ background:var(--black); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:44px 32px 26px; border-top:1px solid var(--gold-dim); }
.footer-brand{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.05rem; color:var(--cream); }
.footer-nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-nav a{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.footer-nav a:hover{ color:var(--gold-soft); }
.footer-legal{ margin:0; font-size:.76rem; color:var(--dim-2); }
.demo-strip{ text-align:center; font-size:.72rem; color:var(--dim-2); padding:16px 24px 30px; line-height:1.6; max-width:900px; margin:0 auto; }
.demo-strip strong{ color:var(--gold-soft); }

/* ---------- reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .zigzag{ grid-template-columns:1fr; gap:44px; }
  .zigzag-visual{ max-width:420px; margin:0 auto; }
  .trust-strip-inner{ flex-wrap:wrap; gap:24px; justify-content:center; }
  .kontakt-inner{ grid-template-columns:1fr; gap:56px; }
  .kontakt-strip-inner{ grid-template-columns:1fr; gap:26px; }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:160px; }
  .form-row{ grid-template-columns:1fr 1fr; }
  .hero-spine{ display:none; }
}

@media (max-width: 760px){
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:80%;
    background:var(--black); flex-direction:column; justify-content:center; gap:30px;
    padding:40px; transform:translateX(100%); transition:transform .35s ease; z-index:400;
    border-left:1px solid var(--gold-dim);
  }
  .nav.open{ transform:translateX(0); }
  .nav a{ font-size:1rem; }
  .nav-toggle{ display:flex; }
  .header-call{ display:none; }
  .hero-actions{ flex-direction:column; align-items:flex-start; }
  .section{ padding:76px 0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .cart-drawer{ width:100%; max-width:100%; }
  .form-row{ grid-template-columns:1fr; }
  .info-strip-inner{ font-size:.66rem; }
  .info-strip-inner .sep{ margin:0 8px; }
  .break-caption p{ font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .scroll-cue span{ animation:none; }
}