/* ─────────────────────────────────────────────
   Montique — globale Styles (alle Seiten)
   Design & Development · siondesign.de

   Struktur:  shared.css  → Tokens, Basis, Header, Menü, Footer, Komponenten
              home.css    → nur Startseite (Hero, 3D-Sektionen, Formular …)
              page.css    → Unterseiten-Layout (Impressum, Journal, …)
   ───────────────────────────────────────────── */

/* ── Design-Tokens ── */
:root{
  --bg:        #FAF9F6;   /* Seitengrund */
  --panel:     #F2F0EA;   /* helle Panels/Formular-Sektion */
  --imgbg:     #ECEAE4;   /* Bildkarten-Grund */
  --ink:       #17140E;   /* Text/Marke */
  --body:      #4C463C;   /* Fließtext */
  --soft:      #5C564A;   /* Kartentext */
  --muted:     #6E6759;   /* Labels/Captions (AA auf --bg) */
  --dark:      #14110D;   /* dunkle Sektionen/Footer */
  --dark-mut:  #8F887C;   /* Labels auf dunkel (AA auf --dark) */
  --dark-body: #C7C1B6;   /* Fließtext auf dunkel */
  --hairline:  #E9E6DF;   /* Linien hell */
  --hairline-d:#2B2620;   /* Linien dunkel */
  --accent:    #B4552A;   /* Akzent (Hover) */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, sans-serif;
  --wrap:  1440px;
  --pad:   clamp(24px, 5vw, 64px);
}

/* ── Schriften: lokal, variable woff2 (latin) ── */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 500;font-display:swap;src:url('/assets/fonts/newsreader-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-latin.woff2') format('woff2')}

/* ── Basis ── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:var(--ink);text-decoration:none}
::selection{background:var(--ink);color:var(--bg)}
::placeholder{color:var(--muted)}
input,button{font-family:inherit}
img{max-width:100%}

/* ── Barrierefreiheit ── */
[id]{scroll-margin-top:96px}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--bg);padding:14px 22px;font-size:13px;letter-spacing:.08em}
.skip:focus-visible{left:0}
.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}

/* ── Header (transparent über Hero, .past = solide; .sub = Unterseite) ── */
#mq-hd{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;border-bottom:1px solid transparent;transition:background .45s ease,border-color .45s ease}
#mq-hd.past{background:rgba(250,249,246,.94);backdrop-filter:saturate(1.1) blur(12px);-webkit-backdrop-filter:saturate(1.1) blur(12px);border-bottom-color:var(--hairline)}
#mq-hd .hd-logo{height:20px;width:auto;display:block;filter:brightness(0) invert(1);transition:filter .45s ease}
#mq-hd.past .hd-logo{filter:none}
#mq-hd nav{display:flex;align-items:center;gap:42px}
#mq-hd .nav-a{font-size:13px;letter-spacing:.03em;color:rgba(250,249,246,.8);transition:color .25s,opacity .25s}
#mq-hd .nav-a:hover{color:#FAF9F6}
#mq-hd.past .nav-a{color:var(--ink);opacity:.62}
#mq-hd.past .nav-a:hover{opacity:1;color:var(--ink)}
#mq-hd .nav-cta{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#FAF9F6;border:1px solid rgba(250,249,246,.65);padding:12px 22px;transition:background .25s,color .25s,border-color .25s}
#mq-hd .nav-cta:hover{background:#FAF9F6;color:var(--ink);border-color:#FAF9F6}
#mq-hd.past .nav-cta{color:var(--ink);border-color:var(--ink)}
#mq-hd.past .nav-cta:hover{background:var(--ink);color:var(--bg)}
#mq-hd .menu-btn{display:none;background:none;border:0;padding:10px 0;cursor:pointer;color:#FAF9F6;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
#mq-hd.past .menu-btn{color:var(--ink)}
@media (max-width:1020px){ #mq-hd nav{display:none} #mq-hd .menu-btn{display:block} }

/* ── Mobile-Menü ── */
#mq-menu{position:fixed;inset:0;z-index:90;background:var(--bg);display:none;flex-direction:column;padding:0 var(--pad)}
#mq-menu.open{display:flex}
#mq-menu .m-a{font-family:var(--serif);font-size:clamp(34px,7vw,52px);color:var(--ink);padding:18px 0;border-bottom:1px solid var(--hairline)}

/* ── Footer ── */
.foot-a{color:var(--dark-body);font-size:14.5px;transition:color .25s}
.foot-a:hover{color:#FAF9F6}

/* ── Wiederkehrende Komponenten (überall nutzbar) ── */
.cta-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center}
.btn-dark{display:inline-flex;background:var(--ink);color:var(--bg);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:17px 32px;transition:opacity .25s}
.btn-dark:hover{opacity:.88}
.lnk-underline{display:inline-flex;gap:8px;font-size:15px;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:opacity .25s}
.lnk-underline:hover{opacity:.6}
.kicker{margin:0 0 24px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.kicker-t{margin-bottom:18px}
.kicker-d{color:var(--dark-mut)}
.h-sec{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,68px);line-height:1.04;letter-spacing:-.02em;color:var(--ink)}
.h-card{margin:0 0 12px;font-family:var(--serif);font-weight:500;font-size:23px;color:var(--ink)}
.p-card{margin:0;font-size:15.5px;line-height:1.64;color:var(--soft)}
.lead{margin:0;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.68;color:var(--body);max-width:50ch}
.imgbox{overflow:hidden;background:var(--imgbg)}
.cap{margin:14px 0 0;font-size:12.5px;color:var(--muted)}

/* Einwilligungs-/Datenschutz-Checkbox (Formulare) */
.check{display:flex;gap:14px;align-items:flex-start;margin-top:30px;cursor:pointer;text-align:left}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{flex:none;width:20px;height:20px;margin-top:2px;border:1px solid #8A857A;background:transparent;position:relative;transition:background .2s,border-color .2s}
.check input:checked + .check-box{background:var(--ink);border-color:var(--ink)}
.check input:checked + .check-box::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(42deg)}
.check input:focus-visible + .check-box{outline:2px solid var(--ink);outline-offset:3px}
.check-text{font-size:13.5px;line-height:1.55;color:var(--body)}
.check-text a{color:inherit;text-decoration:underline}