/* =====================================================================
   Seán Lyons Photography – Design
   Das komplette Aussehen der Website steckt in dieser Datei.
   ===================================================================== */

/* ---------- Schriften (lokal, ohne Google-Server) ---------- */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Farben und Grundwerte ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
  --bar-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Sommerlicht */
  --paper:#F8F4F1;
  --paper-2:#EEE6E1;
  --ink:#2F2622;
  --muted:#88786F;
  --line:#E2D7D0;
  --accent:#6F7559;
  --heart:#9E4B5A;
  --display:"Marcellus","Trajan Pro",Georgia,serif;
  --text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-btn:999px;
  --r-in:10px;
  --gap:14px;
}
[data-variant="c"]{
  /* Collage */
  --paper:#EEEAE4;
  --paper-2:#E2DCD3;
  --ink:#2E3A35;
  --muted:#7C8279;
  --line:#D8D1C7;
  --accent:#5F6B52;
  --heart:#8C3F4A;
  --r-in:8px;
  --gap:8px;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--bar-h) + 12px);background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- Logo „Klassisch“ ---------- */
.brandmark{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-weight:400;color:inherit;text-decoration:none}
.brandmark .bm-w{font-family:"Marcellus",Georgia,serif;font-size:var(--bm,17px);letter-spacing:.14em;padding-left:.14em}
.brandmark .bm-s{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:calc(var(--bm,17px)*.36);letter-spacing:.5em;padding-left:.5em;margin-top:.75em;text-transform:uppercase}

/* ---------- Knöpfe und Felder ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--r-btn);font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn svg{width:16px;height:16px}
.field{display:flex;gap:8px}
.field input{flex:1;min-width:0;height:44px;border:1px solid var(--line);background:#fff;padding:0 14px;border-radius:var(--r-in);font:15px var(--text);color:var(--ink)}
.field input:focus{border-color:var(--ink);outline:none}
.linkbtn{background:none;border:0;border-bottom:1px solid currentColor;color:var(--ink);cursor:pointer;padding:0 0 2px;font-size:15px}
.check{display:flex;gap:10px;align-items:center;font-size:14px;margin-top:14px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}

/* =====================================================================
   Galerie
   ===================================================================== */

/* ---------- Cover (Sommerlicht) ---------- */
.cover{position:relative;height:calc(100svh - env(safe-area-inset-top,0px));min-height:540px;overflow:hidden;background:var(--paper-2)}
.cover-media{position:absolute;inset:0;overflow:hidden;transform:scale(1.1);transition:transform 2.6s var(--ease)}
.ready .cover-media{transform:scale(1)}
.cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(36,24,18,.62) 0%,rgba(36,24,18,.12) 52%,rgba(36,24,18,.22) 100%)}
.cover-title{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;color:#FBF7F3;padding:0 24px 12svh}
.cover-brand{position:absolute;top:30px;left:0;right:0;text-align:center;--bm:19px}
.names{font-family:var(--display);font-weight:400}
.names .n2{white-space:nowrap}
.cover .names{text-transform:uppercase;font-size:clamp(40px,7.4vw,110px);line-height:1.05;letter-spacing:.07em}
.cover-meta{display:flex;justify-content:center;gap:16px;margin-top:20px;font-size:15px;letter-spacing:.03em}
.cover-meta span+span{padding-left:16px;border-left:1px solid rgba(251,247,243,.55)}
.cover-cue{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:14px;margin-top:44px;opacity:.85}
.cover-cue svg{width:14px;height:14px}
.cover-title>*{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s var(--ease)}
.ready .cover-title>*{opacity:1;transform:none}
.ready .cover-title .cover-main{transition-delay:.35s}
.ready .cover-title .cover-brand{transition-delay:.6s}
.ready .cover-title .cover-cue{transition-delay:.9s}
[data-variant="c"] .cover{display:none}
[data-variant="a"] .collage{display:none}

/* ---------- Collage ---------- */
.collage{position:relative;height:320svh;overflow:clip}
.collage-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;z-index:3;pointer-events:none}
.collage-brand{position:absolute;top:28px;left:0;right:0;text-align:center;color:var(--ink);z-index:3;--bm:15px}
.collage-title{text-align:center;color:var(--ink);padding:0 20px;pointer-events:auto}
.collage-title .names{text-transform:uppercase;letter-spacing:.07em;font-size:clamp(38px,6.2vw,92px);line-height:1.02}
.collage-title .cover-meta span+span{border-left-color:var(--line)}
.collage-imgs{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.6s ease}
.ready .collage-imgs{opacity:1}
.collage-img{position:absolute;will-change:transform,opacity;box-shadow:0 18px 40px rgba(46,58,53,.10);background:var(--paper-2)}
.collage-img img{width:100%;height:auto;display:block}
.collage-brand,.collage-title>*{opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.4s var(--ease)}
.ready .collage-brand,.ready .collage-title>*{opacity:1;transform:none}
.ready .collage-title>*:nth-child(2){transition-delay:.35s}
.ready .collage-brand{transition-delay:.6s}

/* ---------- Kopfleiste ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;min-height:var(--bar-h);display:flex;align-items:center;gap:20px;padding:0 clamp(16px,3vw,40px);
  background:color-mix(in srgb,var(--paper) 95%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.tb-names{font-family:var(--display);font-size:17px;line-height:1;white-space:nowrap;text-decoration:none;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
.tb-chapters{flex:1;display:flex;justify-content:center;gap:26px;overflow-x:auto;scrollbar-width:none}
.tb-chapters::-webkit-scrollbar{display:none}
.tb-chapters a{font-size:14px;color:var(--muted);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color .25s,border-color .25s}
.tb-chapters a:hover{color:var(--ink)}
.tb-chapters a.active{color:var(--ink);border-color:var(--ink)}
.tb-actions{display:flex;gap:8px;align-items:center}
.tb-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line);background:transparent;border-radius:var(--r-btn);font-size:14px;cursor:pointer;white-space:nowrap;transition:border-color .2s,background .2s}
.tb-btn:hover{border-color:var(--ink)}
.tb-btn svg{width:17px;height:17px;flex:none}
.tb-btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tb-btn.on{border-color:var(--ink)}
.tb-btn.on svg path{fill:var(--heart);stroke:var(--heart)}
.tb-count{font-variant-numeric:tabular-nums;color:var(--muted)}
.admin-hint{max-width:1440px;margin:16px auto 0;padding:10px 16px;background:var(--paper-2);font-size:14px;text-align:center;border-radius:12px;width:calc(100% - 32px)}

/* ---------- Begrüßung ---------- */
.intro{max-width:640px;margin:clamp(72px,10vw,128px) auto clamp(56px,8vw,96px);padding:0 24px;text-align:center}
.intro:empty{margin:40px auto}
.intro-lead{font-family:var(--display);font-size:clamp(26px,3vw,34px);line-height:1.2;margin-bottom:16px}
.intro-body p{font-size:18px;line-height:1.7}
.intro-body p+p{margin-top:12px}
.intro-sign{font-size:14px!important;color:var(--muted);margin-top:22px!important}

.favbar{max-width:1440px;margin:0 auto 40px;padding:14px clamp(12px,3vw,40px);display:flex;gap:16px;align-items:center;justify-content:center;font-size:15px;color:var(--muted)}

/* ---------- Kapitel und Raster ---------- */
.chapters{padding:0 clamp(10px,3vw,40px) 40px}
.chapter{max-width:1440px;margin:0 auto clamp(80px,11vw,150px)}
.chapter-head{text-align:center;max-width:560px;margin:0 auto 36px}
.chapter-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.chapter-head p{color:var(--muted);margin-top:10px;font-size:15px}
.chapter-count{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.empty-note{text-align:center;color:var(--muted);padding:40px 0 80px}
.grid{display:flex;gap:var(--gap);align-items:flex-start;min-width:0}
.col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.tile{position:relative;overflow:hidden;background:var(--paper-2);width:100%}
.tile-open{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:zoom-in}
.tile img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 1.1s ease,transform 1.5s var(--ease)}
.tile.in.loaded img{opacity:1;transform:none}
.tile.in.loaded.is-hidden img{opacity:.38}
.guest .tile.in.loaded.is-hidden img{opacity:1}
.fav{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s}
.fav svg{width:18px;height:18px}
.fav svg path{fill:none;stroke:#2b2421;stroke-width:1.6}
.tile:hover .fav,.tile:focus-within .fav,.fav.on{opacity:1}
.fav.on svg path{fill:var(--heart);stroke:var(--heart)}
.fav:active{transform:scale(.9)}
@media (hover:none){.fav{opacity:.92}}
.badge{position:absolute;left:10px;top:10px;display:none;align-items:center;gap:6px;padding:5px 10px 5px 8px;background:rgba(255,255,255,.92);color:#2b2421;font-size:12px;line-height:1;border-radius:999px;pointer-events:none;font-weight:500}
.badge svg{width:14px;height:14px}
.tile.is-hidden .badge{display:inline-flex}
.selecting .tile-open{cursor:pointer}
.selecting .tile{outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.selecting .tile:not(.is-hidden){outline-color:var(--accent)}
.selecting .fav{display:none}

/* ---------- Fußzeile ---------- */
.foot{border-top:1px solid var(--line);padding:48px 24px calc(56px + env(safe-area-inset-bottom,0px));text-align:center;font-size:14px;color:var(--muted)}
.foot .brand{margin-bottom:6px}
.foot .brand a{text-decoration:none;color:var(--ink)}
.foot .brandmark{--bm:22px}
.foot nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.foot nav a{color:var(--muted)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;background:#181412;color:#F3EEE9;display:none;grid-template-rows:auto 1fr;opacity:0;transition:opacity .3s}
.lb.open{display:grid}
.lb.show{opacity:1}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 10px 22px}
.lb-info{font-size:14px;color:#BFB5AD}
.lb-info b{color:#F3EEE9;font-weight:500;margin-right:10px;font-variant-numeric:tabular-nums}
.lb-actions{display:flex;gap:6px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.07);display:grid;place-items:center;cursor:pointer;color:#F3EEE9;transition:background .2s;text-decoration:none}
.icon-btn:hover{background:rgba(255,255,255,.16)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.on svg path{fill:#E7A3AE;stroke:#E7A3AE}
.lb-stage{position:relative;display:grid;place-items:center;overflow:hidden;padding:0 76px calc(24px + env(safe-area-inset-bottom,0px));touch-action:pan-y}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .3s ease;user-select:none;-webkit-user-drag:none}
.lb-stage img.fade{opacity:0}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:14px}.lb-next{right:14px}
@media (max-width:700px){.lb-stage{padding:0 0 calc(70px + env(safe-area-inset-bottom,0px))}.lb-nav{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:none}}

/* ---------- Teilen ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(24,18,15,.38);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100vw);background:var(--paper);transform:translateX(102%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s linear .5s;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(26px + env(safe-area-inset-top,0px)) 28px calc(40px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease);box-shadow:-24px 0 60px rgba(0,0,0,.14)}
.dr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.dr-head h2{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.dr-close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;display:grid;place-items:center;cursor:pointer;flex:none}
.dr-close svg{width:18px;height:18px}
.dr-intro{color:var(--muted);font-size:15px;line-height:1.55}
.dr-sec{padding:26px 0;border-bottom:1px solid var(--line)}
.dr-sec:last-child{border-bottom:0}
.dr-sec h3{font-family:var(--text);font-size:15px;font-weight:600;margin-bottom:6px}
.dr-sec>p{font-size:14px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.ch-rows{list-style:none;margin-top:16px}
.ch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.ch-row+.ch-row{border-top:1px dashed var(--line)}
.ch-row small{display:block;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.switch{position:relative;width:46px;height:28px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--ease)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qr-wrap{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.qr{padding:14px;background:#fff;border:1px solid var(--line);width:max-content}
.qr canvas,.qr img{width:150px!important;height:150px!important}
.qr canvas{display:none!important}
.qr-note{font-size:13px;color:var(--muted);max-width:180px;line-height:1.45}
.selectbar{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,24px);z-index:55;display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;background:var(--ink);color:var(--paper);border-radius:22px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);width:max-content;max-width:calc(100vw - 20px);font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.selectbar.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.selectbar b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.selectbar .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);height:38px}
.lb-open .selectbar{display:none}
@media (max-width:640px){.selectbar{flex-wrap:wrap;gap:8px 14px}.sel-hint{flex-basis:100%}}
.modal{position:fixed;inset:0;z-index:90;background:rgba(24,18,15,.45);display:grid;place-items:center;padding:20px}
.modal-card{background:var(--paper);max-width:480px;width:100%;padding:30px;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal-card h2{font-family:var(--display);font-weight:400;font-size:26px;margin-bottom:8px}
.modal-card>p{color:var(--muted);font-size:15px;margin-bottom:18px}
.zip-list{list-style:none;margin-bottom:20px}
.zip-list a{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.zip-list a:hover span{text-decoration:underline}
.zip-list small{color:var(--muted)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:110;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:14px;line-height:1.45;border-radius:16px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease);max-width:min(520px,calc(100vw - 24px));text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.selecting .toast{bottom:calc(110px + env(safe-area-inset-bottom,0px))}

/* ---------- Passwortseite ---------- */
.gate{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;background:var(--paper);overflow-y:auto}
.gate-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(16px) saturate(.9);transform:scale(1.04);background-color:var(--paper-2)}
.gate::after{content:"";position:absolute;inset:0;background:rgba(40,28,22,.42)}
.gate-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;color:#FBF7F3;padding:24px;width:min(480px,100%)}
.gate-brand{margin-bottom:28px;--bm:15px}
.gate-card .names{text-transform:uppercase;letter-spacing:.07em;font-size:clamp(34px,6vw,64px);line-height:1.08}
.gate-meta{margin-top:14px;font-size:15px;opacity:.85}
.gate-card label{font-size:14px;display:block;margin:30px 0 8px}
.gate-row{display:flex;gap:10px;width:100%}
.gate-card input{flex:1;min-width:0;height:48px;font:16px var(--text);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;padding:0 20px}
.gate-card input::placeholder{color:rgba(255,255,255,.7)}
.gate-card input:focus{outline:none;border-color:#fff}
.gate-card .btn{background:#FBF7F3;color:#2F2622;border-color:#FBF7F3;height:48px}
.gate-err{font-size:14px;min-height:22px;margin-top:10px}
.gate-note{margin-top:28px;font-size:15px}
@media (max-width:440px){.gate-row{flex-direction:column}.gate-card input{flex:none;width:100%}.gate-card .btn{width:100%}}
[data-variant="c"] .gate{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
[data-variant="c"] .gate::after{display:none}
[data-variant="c"] .gate-bg{position:relative;inset:auto;filter:none;transform:none;width:min(240px,56vw);aspect-ratio:4/5;margin-bottom:30px;box-shadow:0 18px 40px rgba(46,58,53,.12)}
[data-variant="c"] .gate-card{color:var(--ink)}
[data-variant="c"] .gate-card input{border:1px solid var(--line);background:#fff;color:var(--ink)}
[data-variant="c"] .gate-card input::placeholder{color:var(--muted)}
[data-variant="c"] .gate-card .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[data-variant="c"] .gate-brand{margin-bottom:18px}

/* =====================================================================
   Startseite und Textseiten
   ===================================================================== */
.home-hero{position:relative;height:calc(100svh - env(safe-area-inset-top,0px));min-height:520px;overflow:hidden;background:var(--paper-2);color:#FBF7F3}
.home-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.8s var(--ease)}
.ready .home-hero img{transform:scale(1)}
.home-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(36,24,18,.55),rgba(36,24,18,.1) 55%,rgba(36,24,18,.25))}
.home-hero.noimg{color:var(--ink)}
.home-hero.noimg::after{display:none}
.home-hero-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.home-hero .brandmark{--bm:clamp(28px,5vw,58px)}
.home-hero-in>*{opacity:0;transform:translateY(14px);transition:opacity 1.2s ease,transform 1.4s var(--ease)}
.ready .home-hero-in>*{opacity:1;transform:none}
.ready .home-hero-in>*:nth-child(2){transition-delay:.4s}
.home-tag{margin-top:30px;font-size:15px;letter-spacing:.04em;opacity:.9}
.home-text{max-width:620px;margin:clamp(72px,10vw,120px) auto;padding:0 24px;text-align:center}
.home-text p{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);line-height:1.45}
.home-contact{margin-top:40px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.simple{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,80px) 24px 80px}
.simple>a{text-decoration:none;display:inline-block;margin-bottom:48px}
.simple h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1.15;margin-bottom:24px}
.legal h2,.legal h3,.legal h4{font-family:var(--display);font-weight:400;margin:32px 0 10px;line-height:1.25}
.legal h2{font-size:24px}.legal h3{font-size:20px}.legal h4{font-size:17px}
.legal p,.legal ul,.legal ol{margin-bottom:14px}
.legal ul,.legal ol{padding-left:22px}
.legal a{word-break:break-word}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width:900px){
  :root{--bar-h:104px}
  .topbar{flex-wrap:wrap;gap:0 12px;padding-top:10px}
  .tb-names{flex:1;font-size:16px}
  .tb-chapters{order:3;flex-basis:100%;justify-content:flex-start;gap:22px;padding:6px 0 4px;margin-top:6px}
  .tb-btn .lbl{display:none}
  .tb-btn{padding:0 11px}
}
@media (max-width:760px){
  :root{--gap:8px}
  .cover-meta{flex-direction:column;gap:4px}
  .cover-meta span+span{border:0;padding:0}
  .collage{height:290svh}
  .drawer{padding-left:22px;padding-right:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .tile img{opacity:1;transform:none}
}