/* ============ Fonts (lokal eingebettet, OFL-Lizenz) ============ */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-300.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/inter-300-italic.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-700.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-500-italic.woff2) format('woff2')}

/* ============ Farbsystem (Brief Abschnitt 7) ============ */
:root{
  --bg:#121212; --bg-alt:#171717; --glow:rgba(255,255,255,.045);
  --text:#F5F5F2; --text-2:#888888;
  --meta:#8F8F8F;        /* Brief: #777777 – leicht angehoben für WCAG-Kontrast (Brief 16 erlaubt) */
  --legal-nav:#8A8A8A;   /* Brief: #666666 – dito */
  --legal-text:#AAAAAA;
  --card:#FDFBF7; --card-text:#1A1A1A; --line:#EEEEEA;
  --dur:.65s; --ease:cubic-bezier(.33,.02,.2,1);
}
html[data-theme="soft"]{
  --bg:#1A1A1C; --bg-alt:#202022; --glow:rgba(255,255,255,.05);
  --text:#ECECEA; --text-2:#909090; --meta:#969696; --legal-nav:#8F8F8F; --legal-text:#ADADAD;
}
html[data-theme="warm"]{
  --bg:#171310; --bg-alt:#1D1815; --glow:rgba(255,225,190,.05);
  --text:#F2EBDF; --text-2:#8F887E; --meta:#968E82; --legal-nav:#8C8478; --legal-text:#ABA396;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
  background:var(--bg);
  background-image:radial-gradient(120% 90% at 50% 115%, var(--glow), transparent 60%);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  height:100dvh; overflow:hidden;
  transition:background-color .8s var(--ease), color .8s var(--ease);
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Buttons: Theme-Reset (Hello Elementor setzt button:hover auf #c36) neutralisieren */
button,[type=button],[type=submit]{
  font:inherit;color:inherit;background:none;background-color:transparent;
  border:0;border-radius:0;padding:0;text-align:inherit;transition:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
button:hover,button:focus,button:active,
[type=button]:hover,[type=button]:focus,
[type=submit]:hover,[type=submit]:focus{
  background:none;background-color:transparent;color:inherit;text-decoration:none;
}
a{color:inherit}
:focus-visible{outline:1px solid var(--text-2);outline-offset:4px;border-radius:2px}

/* ============ Header ============ */
.sn-topbar{
  position:fixed;inset:0 0 auto 0;z-index:56;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 26px;
  transition:opacity .4s var(--ease);
}
body:has(.overlay.open) .sn-topbar{opacity:0;pointer-events:none}
.brand-btn{display:flex;align-items:center;gap:12px;padding:4px 2px}
.brand-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:16px}
.brand-btn .bars span{display:block;height:1px;background:var(--text);transition:transform .5s var(--ease),opacity .5s}
.brand-btn[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.brand-btn[aria-expanded="true"] .bars span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}
.brand-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.05rem;letter-spacing:.02em}
.view-toggle{display:flex;gap:4px;background:color-mix(in srgb,var(--bg-alt) 70%,transparent);border-radius:99px;padding:3px}
.view-toggle button{
  font-size:.72rem;font-weight:400;letter-spacing:.06em;color:var(--text-2);
  padding:7px 16px;border-radius:99px;transition:color .4s,background .4s;
}
.view-toggle button[aria-pressed="true"]{color:var(--text);background:color-mix(in srgb,var(--text) 9%,transparent)}

/* ============ Intro ============ */
.intro{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  background-image:radial-gradient(120% 90% at 50% 115%, var(--glow), transparent 60%);
  transition:opacity 1s var(--ease),visibility 1s;
  cursor:default;
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-inner{text-align:center;padding:0 28px;max-width:560px}
.intro-line{opacity:0;transform:translateY(8px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.intro-line.show{opacity:1;transform:none}
.intro-lead{font-size:clamp(1rem,2.5vw,1.25rem);font-weight:300;letter-spacing:.01em}
.intro-sub{font-size:clamp(.85rem,2vw,.95rem);font-style:italic;color:var(--text-2);line-height:1.8;margin-top:18px}
.intro-brand{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.6rem,4.5vw,2.2rem);margin-top:44px}
.intro-claim{font-size:.85rem;color:var(--text-2);margin-top:10px;letter-spacing:.02em}
.intro-bridge{font-size:.95rem;margin-top:44px}
.intro-skip{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:.68rem;letter-spacing:.14em;color:var(--text-2);text-transform:uppercase;padding:8px 14px;
}

/* ============ Views ============ */
main{height:100dvh;position:relative}
.view{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.view.active{opacity:1;visibility:visible}

/* ---- Flow ---- */
.flow{overflow:hidden;touch-action:pan-y}
.flow-track{
  display:flex;align-items:center;gap:clamp(40px,6vw,96px);
  height:100%;width:max-content;
  padding:0 max(calc(50vw - 130px),24px) 0 clamp(24px,9vw,130px);
  will-change:transform;
  list-style:none;
}
.card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.card-line{min-height:3.4em}
.card-btn{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:22px 26px 18px;border-radius:10px;
  transition:transform .8s var(--ease),opacity .8s var(--ease),background .65s var(--ease);
}
.card-btn:hover,.card-btn:focus-visible,.card-btn:active,.card-btn:focus{background:color-mix(in srgb,var(--text) 6%,transparent)}
.card-btn:hover img,.card-btn:focus-visible img{transform:translateY(-6px)}
.card img{
  height:clamp(300px,46vh,420px);width:auto;display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
  transition:transform .9s var(--ease);
}
.card-line{font-size:clamp(1.06rem,1.4vw,1.2rem);font-weight:300;line-height:1.65;color:var(--text);letter-spacing:.01em;text-align:center;max-width:340px;text-wrap:balance}
.card .num{font-size:.62rem;letter-spacing:.22em;color:var(--meta);margin-top:12px}
.endcap{flex:0 0 auto;padding:0 4vw;text-align:center;display:flex;align-items:center;justify-content:center}
.endcap p{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:clamp(1.15rem,2.6vw,1.5rem);color:var(--text);opacity:.85;max-width:340px;line-height:1.5}
.flow-indicator{
  position:absolute;bottom:86px;left:50%;transform:translateX(-50%);
  font-size:.66rem;letter-spacing:.3em;color:var(--meta);
  display:flex;align-items:center;gap:14px;
}
.flow-indicator .bar{width:72px;height:1px;background:color-mix(in srgb,var(--text) 16%,transparent);position:relative;overflow:hidden}
.flow-indicator .bar i{position:absolute;inset:0;background:var(--text-2);transform-origin:left;transform:scaleX(0);transition:transform .5s var(--ease)}
.flow-hint{position:absolute;bottom:86px;right:30px;font-size:.62rem;letter-spacing:.16em;color:var(--meta);text-transform:uppercase;opacity:.8}
@media (hover:none){.flow-hint::after{content:"Wischen"}}
@media (hover:hover){.flow-hint::after{content:"Scrollen"}}

/* ---- Grid ---- */
.grid{overflow-y:auto;scrollbar-width:none}
.grid::-webkit-scrollbar{display:none}
.grid-inner{
  min-height:100%;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,34px) clamp(14px,2vw,30px);
  align-content:center;justify-items:center;
  padding:92px clamp(24px,6vw,90px) 122px;
  max-width:1300px;margin:0 auto;
}
.grid .card img{height:clamp(150px,19.5vh,200px)}
.grid .card-line{font-size:.95rem;line-height:1.6;color:var(--text-2);max-width:240px}
.grid .card-btn{gap:16px}
.grid-signature{grid-column:1/-1;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;opacity:.7;margin-top:22px}

/* ============ Overlays (gemeinsam) ============ */
.overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--bg) 82%,black 8%);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.overlay.open{opacity:1;visibility:visible}
.overlay-close{
  position:absolute;top:20px;right:22px;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--text-2);transition:color .3s;
}
.overlay-close:hover{color:var(--text)}
.overlay-close svg{width:18px;height:18px}

/* ---- Spiegel-Modal (Buchkarte, lt. Brief-Mockups) ---- */
.spiegel{width:min(420px,calc(100vw - 40px));max-height:calc(100dvh - 90px);display:flex;flex-direction:column;
  background:var(--bg-alt);border-radius:4px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.985);transition:transform var(--dur) var(--ease);
}
.overlay.open .spiegel{transform:none}
.spiegel-head{padding:20px 24px;font-size:.92rem;font-weight:400;color:#F5F5F2}
.spiegel-body{background:var(--card);color:var(--card-text);padding:34px 30px 30px;overflow-y:auto;scrollbar-width:thin}
.spiegel-body .popup{font-size:1rem;font-weight:400;line-height:2.1}
.spiegel-body hr{border:0;border-top:1px solid var(--line);margin:26px 0 20px}
.spiegel-body .sub{font-size:.72rem;letter-spacing:.22em;color:#767676;text-transform:uppercase}
.spiegel-body h2{font-family:'Playfair Display',serif;font-weight:700;font-size:1.45rem;line-height:1;margin-top:10px;color:#1A1A1A}
.spiegel-body .avail{
  display:inline-block;margin-top:24px;padding:2px 0 6px;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#1A1A1A;
  border-bottom:1px solid #1A1A1A;text-decoration:none;
}
.drag-pill{display:none;width:38px;height:4px;border-radius:99px;background:color-mix(in srgb,var(--text) 25%,transparent);margin:10px auto 0}

/* ---- Manifest ---- */
.manifest-panel{
  position:fixed;top:0;left:0;z-index:55;
  width:min(560px,100vw);max-height:100dvh;overflow-y:auto;scrollbar-width:none;
  background:var(--bg-alt);padding:110px 54px 60px;
  border-radius:0 0 4px 0;box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateY(-102%);transition:transform .75s var(--ease);
}
.manifest-panel::-webkit-scrollbar{display:none}
.manifest-panel.open{transform:none}
.manifest-panel p{font-size:1.02rem;line-height:2;color:var(--text-2);margin-bottom:34px}
.manifest-panel p strong{font-weight:400;color:var(--text)}
.manifest-panel p.manifest-brand{font-family:'Playfair Display',serif;font-weight:700;font-size:1.6rem;color:var(--text);margin-top:10px;margin-bottom:0}
.manifest-panel p.manifest-claim{font-size:.98rem;color:var(--text-2);margin-top:6px}

/* ---- Rechtstexte ---- */
.legal-box{
  width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 80px);
  background:var(--bg-alt);border-radius:4px;padding:54px 8px 10px 0;
  display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.6);
  transform:translateY(14px);transition:transform var(--dur) var(--ease);
}
.overlay.open .legal-box{transform:none}
.legal-scroll{overflow-y:auto;padding:0 46px 46px 54px;scrollbar-width:thin}
.legal-box h2{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:26px}
.legal-box h3{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--text);margin:26px 0 8px}
.legal-box p,.legal-box li{font-size:.84rem;line-height:1.75;color:var(--legal-text);font-weight:400}
.legal-box ul{padding-left:18px;margin:6px 0}
.legal-box a{color:var(--text-2)}
.legal-box a:hover,.legal-box a:focus{color:var(--text)}
@media (max-width:640px){.legal-scroll{padding:0 24px 34px 26px}.legal-box{padding-top:50px}}

/* ---- Hinweis-Box (kein Cookie-Banner) ---- */
.sn-notice{
  position:fixed;z-index:58;left:26px;bottom:78px;
  width:min(430px,calc(100vw - 36px));
  background:var(--bg-alt);border-radius:4px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.sn-notice.show{opacity:1;pointer-events:auto;transform:none}
.sn-notice-head{padding:19px 26px;font-size:1rem;font-weight:700;color:#F5F5F2}
.sn-notice-body{background:var(--card);color:var(--card-text);padding:26px 26px 24px}
.sn-notice-body p{font-size:.92rem;font-weight:400;line-height:1.75;margin-bottom:18px}
.sn-notice-body p:last-of-type{margin-bottom:0}
.sn-notice-actions{display:flex;justify-content:flex-end;margin-top:24px}
.sn-notice-btn{
  padding:9px 18px;border:1px solid #1A1A1A;border-radius:2px;
  font-size:.86rem;font-weight:400;color:#1A1A1A;background:transparent;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.sn-notice-btn:hover,.sn-notice-btn:focus{background:#1A1A1A;color:var(--card)}
body:has(.overlay.open) .sn-notice,body:has(.manifest-panel.open) .sn-notice{opacity:0;pointer-events:none}
@media (max-width:640px){
  .sn-notice{left:12px;right:12px;width:auto;bottom:104px}
  .sn-notice-body{padding:22px 20px 20px}
}

/* ============ Footer ============ */
.sn-bottombar{
  position:fixed;inset:auto 0 0 0;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 26px;
  font-size:.7rem;color:var(--legal-nav);
  background:linear-gradient(to top, var(--bg) 40%, transparent);
}
.theme-switch{display:flex;gap:10px;align-items:center}
.theme-switch button{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--legal-nav);transition:color .3s;
}
.theme-switch button:hover{color:var(--text)}
.theme-switch button[aria-pressed="true"]{color:var(--text)}
.theme-switch .dot{width:11px;height:11px;border-radius:50%;border:1px solid currentColor;display:block}
.theme-switch [data-set="dark"] .dot{background:#121212}
.theme-switch [data-set="soft"] .dot{background:#4a4a4e}
.theme-switch [data-set="warm"] .dot{background:#6b5844}
.legal-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.legal-nav button{font-size:.7rem;font-weight:400;color:var(--legal-nav);letter-spacing:.04em;padding:6px 4px;transition:color .3s}
.legal-nav button:hover{color:var(--text)}
.legal-nav .sep{opacity:.5}
.social{display:flex;gap:6px}
.social a{width:34px;height:34px;display:grid;place-items:center;color:var(--legal-nav);transition:color .3s;border-radius:50%}
.social a:hover{color:var(--text)}
.social svg{width:15px;height:15px}

/* ============ Responsive ============ */
@media (max-width:900px){
  .grid-inner{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .sn-topbar{padding:16px 16px}
  .view-toggle button{padding:6px 13px}
  .card img{height:clamp(280px,42vh,380px)}
  .card-line{font-size:1.06rem;max-width:min(84vw,330px)} /* mobil größer, gut lesbar */
  .grid-inner{grid-template-columns:1fr;align-content:start;padding-top:96px;justify-items:center}
  .grid .card img{height:clamp(210px,30vh,270px)}
  .grid .card-line{font-size:.98rem;max-width:min(80vw,300px)}
  .flow-hint{display:none}
  .flow-indicator{bottom:118px}
  .sn-bottombar{flex-wrap:wrap;row-gap:0;padding:8px 12px 12px}
  .legal-nav{flex-basis:100%;order:-1;justify-content:center;margin-bottom:2px}
  .legal-nav button{white-space:nowrap}
  .manifest-panel{padding:96px 30px 46px}
  .spiegel{width:calc(100vw - 24px);max-height:calc(100dvh - 56px)}
  .drag-pill{display:block}
  .overlay.book-ov{align-items:flex-end}
  .book-ov .spiegel{border-radius:10px 10px 0 0;margin-bottom:0}
}

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .flow-track{scroll-behavior:auto}
}