/* ==========================================================================
   1196.at — REFERENCE CLONE of the CURRENT live site
   Reverse-engineered with the ai-website-cloner method: exact computed values
   pulled from the live DOM (getComputedStyle) on https://1196.at.
   Live tokens (verbatim): paper rgb(239,235,226)=#EFEBE2 · ink rgb(57,57,60)=#39393C
   · grey #7F7B6E · pure black #000 (one section) · heading = Adelon Serial WEIGHT
   400, UPPERCASE, ~70px, centred · body = Avus Pro / ASW DIN 16px · transparent
   full-width header with combination logo + cart + burger · square, hairline.
   Most live section backgrounds are looping VIDEO; reproduced here as the real
   still imagery (the clone is static).
   ========================================================================== */

@font-face { font-family:"Adelon Serial"; src:url("../assets/fonts/AdelonSerial-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Adelon Serial"; src:url("../assets/fonts/AdelonSerial.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Adelon Serial"; src:url("../assets/fonts/AdelonSerial-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"ASW DIN"; src:url("../assets/fonts/ASW-DIN-Variable.ttf") format("truetype-variations"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Avus Pro"; src:url("../assets/fonts/AvusPro-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root{
  --paper:#EFEBE2;        /* live siteBackground / section paper */
  --ink:#39393C;          /* live heading/text ink (rgb 57,57,60) */
  --grey:#7F7B6E;         /* live grey section + secondary text */
  --black:#000;           /* live S7 pure-black section */
  --sand-gold:#7C6946;
  --line-ink: color-mix(in oklab, var(--ink) 32%, transparent);
  --line-ow:  color-mix(in oklab, var(--paper) 40%, transparent);
  --font-head:"Adelon Serial","Times New Roman",serif;
  --font-body:"ASW DIN","Avus Pro","Helvetica Neue",sans-serif;
  --head: clamp(2.4rem, 1.1rem + 4.3vw, 4.35rem);   /* live H1 69.568px */
  --head-sm: clamp(1.4rem, 1rem + 1.4vw, 1.9rem);   /* live H2 ~30px */
  --pagepad: clamp(20px, 3vw, 54px);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur: .5s;
  --hh: 96px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ font-synthesis:none; -webkit-font-synthesis:none; scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1em; }
button{ font:inherit; background:none; border:0; cursor:pointer; color:inherit; padding:0; }
::selection{ background:var(--sand-gold); color:var(--paper); }
:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sand-gold); }

/* ---------- type ---------- */
.h1{ font-family:var(--font-head); font-weight:400; font-size:var(--head); line-height:1.06; text-transform:uppercase; letter-spacing:0.01em; margin:0; }
.h2{ font-family:var(--font-head); font-weight:400; font-size:var(--head-sm); line-height:1.1; text-transform:uppercase; letter-spacing:0.01em; margin:0; }
.body{ font-family:var(--font-body); font-size:16px; line-height:1.7; max-width:60ch; margin-inline:auto; }
.eyebrow{ font-family:var(--font-body); font-weight:400; font-size:13px; letter-spacing:0.18em; text-transform:uppercase; margin:0 0 18px; }

/* ---------- full-bleed section scaffold (live: stacked full-bleed sections) ---------- */
.section{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(72px,10vw,150px) var(--pagepad); }
.section--paper{ background:var(--paper); color:var(--ink); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--grey{ background:var(--grey); color:var(--paper); }
.section--black{ background:var(--black); color:var(--paper); }
.section--tall{ min-height:96svh; }
.section--med{ min-height:62svh; }
.section--cover{ padding:0; min-height:64svh; overflow:hidden; }
.section--cover > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.section__inner{ position:relative; z-index:2; width:100%; max-width:1100px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ==========================================================================
   HEADER — transparent, full-width: combination logo left, cart + burger right
   ========================================================================== */
#hdr{ position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--hh); display:flex; align-items:center;
  transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), height var(--dur) var(--ease); border-bottom:1px solid transparent; }
.hdr-inner{ width:100%; max-width:1800px; margin-inline:auto; padding-inline:var(--pagepad); display:flex; align-items:center; justify-content:space-between; gap:24px; }
body.scrolled #hdr{ height:calc(var(--hh) - 18px); background:color-mix(in srgb,var(--paper) 94%,transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom-color:var(--line-ink); }
.brand img{ height:54px; width:auto; transition:height var(--dur) var(--ease); }
body.scrolled .brand img{ height:42px; }
@media (max-width:700px){ .brand img{ height:40px; } }
.hdr-right{ display:flex; align-items:center; gap:clamp(18px,2vw,30px); color:var(--ink); }
.hdr-cart{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:0.78rem; }
.hdr-cart svg{ width:19px; height:19px; }
.nav-toggle{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:600; font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); }
.nav-toggle .bars{ position:relative; width:24px; height:12px; display:inline-block; }
.nav-toggle .bars::before,.nav-toggle .bars::after{ content:""; position:absolute; left:0; width:100%; height:1.5px; background:currentColor; transition:transform var(--dur) var(--ease), top var(--dur) var(--ease); }
.nav-toggle .bars::before{ top:1px; } .nav-toggle .bars::after{ top:10px; }
body.menu-open .nav-toggle .bars::before{ top:5px; transform:rotate(45deg); }
body.menu-open .nav-toggle .bars::after{ top:5px; transform:rotate(-45deg); }
@media (max-width:560px){ .nav-toggle__label{ display:none; } }

/* overlay menu */
.menu{ position:fixed; inset:0; z-index:990; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; visibility:hidden; transition:opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
body.menu-open .menu{ opacity:1; visibility:visible; } body.menu-open{ overflow:hidden; }
.menu a{ font-family:var(--font-head); font-weight:400; font-size:clamp(1.6rem,1rem+2vw,2.6rem); text-transform:uppercase; letter-spacing:0.02em; padding:6px 0; transition:color var(--dur) var(--ease); }
.menu a:hover{ color:var(--grey); }

/* ==========================================================================
   HERO — hazy video bg + translucent paper panel with hairline border holding
   four underlined Adelon links, then a bordered reservation box (live S0).
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:calc(var(--hh) + 40px) var(--pagepad) 64px; background:var(--paper); }
.hero > img, .hero > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__haze{ position:absolute; inset:0; background:color-mix(in srgb, var(--paper) 26%, transparent); }
.hero__stack{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(24px,3vw,44px); }
.hero__panel{ background:color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); border:1px solid var(--line-ink); padding:clamp(36px,5vw,72px) clamp(40px,7vw,120px); display:flex; flex-direction:column; align-items:center; gap:clamp(14px,1.6vw,26px); }
.hero__link{ font-family:var(--font-head); font-weight:400; font-size:var(--head); line-height:1.1; text-transform:uppercase; letter-spacing:0.01em; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:4px; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hero__link:hover{ color:var(--sand-gold); border-color:var(--sand-gold); }
.hero__reserve{ border:1px solid var(--line-ink); padding:22px 40px; font-family:var(--font-head); font-weight:400; font-size:1rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); text-align:center; max-width:30ch; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.hero__reserve:hover{ background:var(--ink); color:var(--paper); }

/* ---------- brand marquee line (Unsere Marken) ---------- */
.brand-line{ font-family:var(--font-head); font-weight:400; font-size:var(--head-sm); text-transform:uppercase; letter-spacing:0.02em; color:var(--grey); max-width:30ch; line-height:1.5; }
.section--ink .brand-line{ color:color-mix(in oklab,var(--paper) 78%,var(--ink)); }

/* ---------- story (Was/Wo · Wer) ---------- */
.story-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); max-width:920px; margin-inline:auto; text-align:left; margin-top:clamp(36px,5vw,64px); }
@media (max-width:760px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }
.story-grid h3{ font-family:var(--font-body); font-weight:600; font-size:0.96rem; letter-spacing:0.04em; margin:0 0 14px; }
.story-grid p{ font-size:15px; line-height:1.75; margin:0 0 1em; }

/* ---------- contact ---------- */
.contact-rows{ display:flex; flex-direction:column; gap:24px; margin-top:36px; }
.contact-rows p{ margin:0; line-height:1.5; }
.contact-rows .lab{ font-size:13px; letter-spacing:0.06em; opacity:.82; }
.contact-rows .val{ font-size:1.05rem; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:400; font-size:1rem; letter-spacing:0.04em; text-transform:uppercase; border:1px solid currentColor; padding:18px 36px; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); margin-top:28px; }
.section--grey .btn:hover{ background:var(--paper); color:var(--grey); }
.section--paper .btn:hover{ background:var(--ink); color:var(--paper); }

/* ---------- newsletter ---------- */
.nl{ display:flex; max-width:440px; margin:24px auto 0; border-bottom:1px solid var(--line-ink); }
.nl input{ flex:1; background:transparent; border:0; font:inherit; padding:12px 2px; color:var(--ink); outline:none; }
.nl button{ font-family:var(--font-body); font-weight:600; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; padding:0 8px; }

/* ---------- gallery (tall image sections on the live site) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:1400px; }
.gallery img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
@media (max-width:700px){ .gallery{ grid-template-columns:1fr 1fr; } }

/* ---------- footer ---------- */
.legal{ font-size:13px; letter-spacing:0.04em; line-height:1.9; color:var(--ink); }
.legal a{ text-decoration:underline; text-underline-offset:3px; }
.seal img{ height:54px; margin:26px auto 12px; }
.seal p{ font-family:var(--font-body); font-weight:600; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; margin:0; }

/* versions badge */
.versions-badge{ position:fixed; bottom:16px; left:16px; z-index:950; font-family:var(--font-body); font-weight:600; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; padding:9px 13px; background:color-mix(in srgb,var(--paper) 84%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line-ink); color:var(--ink); transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.versions-badge:hover{ background:var(--ink); color:var(--paper); }