/* Jens Geier · Webseite · Schrift Archivo (selbst gehostet, keine Verbindung zu Google) */
@font-face{font-family:"Archivo";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/archivo-latin-700-normal.woff2") format("woff2")}

:root{
  --papier:#F2F2F0; --flaeche:#E3E3E0; --linie:#C9C9C5;
  --grau:#5F5F5F; /* 5,7 : 1 auf Papier */
  --tinte:#111111; --rot:#B83224; /* Text-Rot, 5,3 : 1 auf Papier */
  --rot-hover:#9A2A1E; /* Textrot beim Hover, 6,9 : 1 auf Papier */
  --cols:4; --rand:20px; --gap:16px; --sec:64px;
  --h1:52px; --h1lh:52px; --h2:24px; --h2lh:32px;
  --body:17px; --bodylh:26px; --quote:22px; --quotelh:28px;
}
@media (min-width:600px){:root{--cols:8; --rand:32px; --gap:24px; --sec:96px; --h1:80px; --h1lh:80px; --h2:40px; --h2lh:46px; --body:18px; --bodylh:28px; --quote:28px; --quotelh:34px}}
@media (min-width:1024px){:root{--cols:12; --rand:48px; --gap:24px; --sec:128px; --h1:112px; --h1lh:108px; --h2:48px; --h2lh:52px; --body:20px; --bodylh:30px; --quote:32px; --quotelh:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 var(--body)/var(--bodylh) "Archivo",system-ui,sans-serif}
.page{max-width:1440px;margin:0 auto}
a{color:var(--tinte);text-decoration:none;transition:color .15s ease-out,text-decoration-color .15s ease-out}
a:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.logo:hover,.logo:active{color:var(--tinte)}
img{display:block;max-width:100%}
h1,h2,p,figure,blockquote,dl,dd{margin:0}

.label{font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.link{color:var(--rot);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;display:inline-block;padding:12px 0;margin:-12px 0}

/* Kopfzeile */
.top{display:flex;justify-content:space-between;align-items:center;padding:8px var(--rand);font-size:14px;font-weight:500}
@media (min-width:600px){.top{padding-block:12px}}
@media (min-width:1024px){.top{padding-block:2px}}
.logo{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;margin-left:-10px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.top nav{display:flex;gap:0;margin-right:-8px}
@media (min-width:600px){.top nav{gap:8px}}
@media (min-width:1024px){.top nav{gap:16px}}
.top nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px}
.top nav .ig{color:var(--rot)}

/* Hero */
.hero{padding:32px var(--rand) 32px}
@media (min-width:600px){.hero{padding-bottom:48px}}
@media (min-width:1024px){.hero{padding-top:24px}}
.hero h1{font-size:var(--h1);line-height:var(--h1lh);font-weight:700;letter-spacing:-.03em;margin-left:-.07em}
.hero .sub{margin-top:16px;font-weight:500;color:var(--grau)}

/* Bilder und Unterschriften */
.ph{width:100%;height:auto;background:var(--flaeche)}
.r32{aspect-ratio:3/2}.r45{aspect-ratio:4/5}
.cap{margin-top:16px;color:var(--grau)}
.cap .t{display:block;font-size:13px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.cap .s{display:block;margin-top:6px;font-size:14px;line-height:20px}

.bank{padding:0 var(--rand) var(--sec)}
.bank figure{grid-column:1/-1}
@media (min-width:1024px){.bank figure{grid-column:6/span 7}}

/* About */
.about{padding:0 var(--rand) var(--sec);row-gap:0;align-items:start}
.about .portrait{grid-column:1/span 2;grid-row:3}
.about .portrait img{border:1px solid var(--linie)}
.about .a-label{grid-column:1/-1;grid-row:1;margin-bottom:12px}
.about .a-text{grid-column:1/-1;grid-row:2}
.about .facts{grid-column:3/span 2;grid-row:3;margin-top:32px;border-bottom:1px solid var(--linie)}
.about .portrait{margin-top:32px}
.about .quote{grid-column:1/-1;grid-row:4;margin-top:40px;padding-top:20px;border-top:1px solid var(--linie);font-size:var(--quote);line-height:var(--quotelh);font-weight:500;letter-spacing:-.02em}
.facts .row{padding:12px 0;border-top:1px solid var(--linie)}
.facts dt{font-size:12px;line-height:16px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--grau)}
.facts dd{margin-top:4px;font-size:15px;line-height:22px;font-weight:500}
@media (min-width:600px){
  .about{grid-template-rows:auto auto auto auto 1fr}
  .about .portrait{grid-column:1/span 3;grid-row:1/span 5;margin-top:0}
  .about .a-label{grid-column:4/span 5;margin-bottom:20px}
  .about .a-text{grid-column:4/span 5}
  .about .quote{grid-column:4/span 5;grid-row:3;margin-top:48px}
  .about .facts{grid-column:4/span 5;grid-row:4;margin-top:48px}
  .facts .row{display:flex;justify-content:space-between;gap:24px;padding:14px 0;font-size:16px;font-weight:500}
  .facts dt{font-size:16px;line-height:inherit;font-weight:400;text-transform:none;letter-spacing:0}
  .facts dd{margin:0;font-size:16px;line-height:inherit;text-align:right}
}
@media (min-width:1024px){
  .about .portrait{grid-column:1/span 4}
  .about .a-label{grid-column:6/span 7;margin-bottom:24px}
  .about .a-text{grid-column:6/span 7;max-width:540px}
  .about .quote{grid-column:6/span 7;margin-top:64px;padding-top:24px}
  .about .facts{grid-column:6/span 7;margin-top:64px}
}

/* Galerie */
.bilder{padding:0 var(--rand) var(--sec)}
.bilder .head{display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--tinte)}
@media (min-width:600px){.bilder .head{padding-bottom:14px;margin-bottom:24px}}
@media (min-width:1024px){.bilder .head{padding-bottom:16px;margin-bottom:32px}}
.gallery{container-type:inline-size;row-gap:24px}
.gallery figure{grid-column:1/-1}
.gallery .wrap{position:relative}
.gallery .mix{display:none}
@media (min-width:600px){
  .gallery{row-gap:0}
  .gallery .licht{grid-column:1/span 5;grid-row:1;position:relative;z-index:1}
  .gallery .fenster{grid-column:4/span 5;grid-row:1;position:relative;z-index:2;margin-top:22.73cqw}
  .gallery .licht .cap{max-width:55%}
  .gallery .fenster .cap{text-align:right}
  .gallery .mix{display:block;position:absolute;left:0;top:0;width:36.71%;height:70.3%;overflow:hidden;opacity:.3;pointer-events:none}
  .gallery .mix img{position:absolute;right:0;bottom:0;width:272.8%;max-width:none;height:auto}
}
@media (min-width:1024px){
  .gallery .licht{grid-column:3/span 6}
  .gallery .fenster{grid-column:7/span 6;margin-top:14.88cqw}
  .gallery .licht .cap{max-width:60%}
  .gallery .mix{width:30.909%;height:75.757%}
  .gallery .mix img{width:323.53%}
}

/* Kontakt */
.kontakt{padding:0 var(--rand) var(--sec)}
.kontakt h2,.legal h1{font-size:var(--h2);line-height:var(--h2lh);font-weight:600;letter-spacing:-.03em}
.kontakt h2{margin-bottom:24px}
@media (min-width:600px){.kontakt h2{margin-bottom:32px}}
@media (min-width:1024px){.kontakt h2{margin-bottom:40px}}
.kontakt .cols{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:1px solid var(--tinte);font-weight:500}
.kontakt .cols .label{display:block;color:var(--grau)}
@media (min-width:600px){
  .kontakt .cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
  .kontakt .c1{grid-column:1/span 3}.kontakt .c2{grid-column:4/span 3}.kontakt .c3{grid-column:7/span 2}
}
@media (min-width:1024px){
  .kontakt .cols{padding-top:24px}
  .kontakt .c1{grid-column:1/span 3}.kontakt .c2{grid-column:6/span 3}.kontakt .c3{grid-column:9/span 3}
}

/* Fußzeile */
.foot{display:flex;flex-direction:column;padding:0 var(--rand);border-top:1px solid var(--linie);color:var(--grau)}
.foot span{padding-top:15px}
.foot nav{display:flex;gap:16px;align-items:center}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinte)}
@media (min-width:600px){
  .foot{flex-direction:row;justify-content:space-between;align-items:center}
  .foot span{padding:15px 0}
  .foot nav{gap:24px}
}

/* Impressum und Datenschutz */
.legal{padding:24px var(--rand) 96px}
.legal h1{margin-bottom:32px}
.legal p{max-width:540px}
@media (min-width:600px){.legal{padding:32px var(--rand) 192px}}
@media (min-width:1024px){.legal{padding:48px var(--rand) 256px}}

/* Interaktion: Hover nur mit Maus, Antippen wie Hover, besuchte Links bleiben gleich */
@media (hover:hover){
  .top nav a:not(.ig):hover,.foot nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .top nav .ig:hover{color:var(--rot-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
  .link:hover{color:var(--rot-hover);text-decoration-thickness:2px}
}
.top nav a:not(.ig):active,.foot nav a:active{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.top nav .ig:active{color:var(--rot-hover);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:active{color:var(--rot-hover);text-decoration-thickness:2px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;scroll-padding-top:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.legal h2{font-size:16px;line-height:24px;font-weight:700;margin:40px 0 8px}
.legal p+p{margin-top:16px}