/* Mount Midlife Coffee – Version 3 (ruhig, am Raster ausgerichtet)
   Raster: 12 Spalten · Außenrand gleich · 8-px-Grundlinie · Maroon 60 / Creme 30 / Navy 10 */
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --maroon:#4f1c1b;
  --cream:#f4ecdf;
  --navy:#0e1a2b;
  --soft:#d9c9b6;
  --line:rgba(244,236,223,.3);
  --u:8px;
  --m:clamp(20px,3.2vw,56px);   /* Außenrand: oben, unten, links, rechts gleich */
  --g:clamp(16px,1.8vw,32px);   /* Spaltenabstand */
  --s1:clamp(2.25rem,min(5.4vw,8.4vh),5.25rem); /* Headline */
  --s2:clamp(1rem,min(1.45vw,2.3vh),1.2rem);    /* Text */
  --s3:.75rem;                                   /* Kleinschrift */
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--maroon);color:var(--cream);font:400 var(--s2)/1.6 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
h1,p,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:4px}

/* Raster: Text = Spalten 1–5, Foto = Spalten 6–12 (5 : 7) */
.page{height:100dvh;padding:var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);grid-template-rows:auto minmax(0,1fr) auto}

.logo{grid-column:1/6;grid-row:1}
.logo img{width:clamp(112px,9.6vw,148px);height:auto}

.lang{grid-column:1/6;grid-row:1;justify-self:end;align-self:start;display:flex;align-items:center;gap:4px;margin:-8px -8px 0 0;font:500 var(--s3)/1 "Hanken Grotesk",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.lang button{background:none;border:0;padding:8px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--soft);cursor:pointer;transition:color .3s}
.lang button:hover{color:var(--cream)}
.lang button[aria-pressed=true]{color:var(--cream);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.lang span{opacity:.5}

.copy{grid-column:1/6;grid-row:2;align-self:end;padding-bottom:calc(var(--u)*6)}
h1{font:400 var(--s1)/1.02 "Instrument Serif","Times New Roman",serif;letter-spacing:-.02em;margin-bottom:calc(var(--u)*3)}
h1 em{font-style:italic}
.copy p{color:var(--soft);max-width:30rem;margin-bottom:calc(var(--u)*5)}

.btn{display:inline-block;padding:16px 40px;border-radius:999px;background:var(--cream);color:var(--maroon);text-decoration:none;font:500 var(--s3)/1 "Hanken Grotesk",sans-serif;letter-spacing:.2em;text-transform:uppercase;transition:background .4s}
.btn:hover{background:#e6d6bf}

.links{grid-column:1/6;grid-row:3;display:flex;gap:calc(var(--u)*4);padding-top:calc(var(--u)*2);border-top:1px solid var(--line);font:500 var(--s3)/1 "Hanken Grotesk",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.links a{text-decoration:none;color:var(--soft);transition:color .3s}
.links a:hover{color:var(--cream)}

/* Foto: Oberkante = Logo-Oberkante, Unterkante = Linkzeile */
.photos{grid-column:6/13;grid-row:1/4;min-height:0}
.photos img{width:100%;height:100%;object-fit:cover;object-position:50% 64%;border-radius:2px;background:var(--navy)}

@media (max-width:899px){
  :root{--m:24px;--s1:clamp(1.9rem,min(9vw,5.4vh),3rem);--s2:clamp(.92rem,2.1vh,1.05rem)}
  .page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;row-gap:calc(var(--u)*3);padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
  .logo,.copy,.links,.photos,.lang{grid-column:1}
  .lang{grid-row:1}
  .logo{grid-row:1}.photos{grid-row:2}.copy{grid-row:3;align-self:start;padding-bottom:0}.links{grid-row:4}
  .logo img{width:112px}
  h1{margin-bottom:calc(var(--u)*1.5)}
  .copy p{margin-bottom:calc(var(--u)*3)}
  .btn{padding:16px 32px}
  .links{gap:calc(var(--u)*3);letter-spacing:.14em;white-space:nowrap}
}
@media (max-width:899px) and (max-height:700px){
  .copy p{display:none}
  h1{margin-bottom:calc(var(--u)*2)}
}
@media (prefers-reduced-motion:reduce){.btn,.links a{transition:none}}
html[lang="en"] h1 em{margin-left:.11em}