@font-face{font-family:'EB Garamond';src:url('fonts/ebgaramond.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/ebgaramond-italic.woff2') format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Work Sans';src:url('fonts/worksans.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{--ink:#111111;--blue:#0000ee;--paper:#ffffff;--muted:#55534e}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:17px;line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
::selection{background:var(--blue);color:#ffffff}
p{margin:0}

.page{min-height:100vh;padding:44px 64px 52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:64px;row-gap:72px}
.name{font-family:'Work Sans',Helvetica,Arial,sans-serif;font-size:17px;letter-spacing:.14em;color:var(--ink);align-self:baseline}
.name:hover{text-decoration:none}
.nav{display:flex;justify-content:flex-end;gap:40px;font-size:16px;letter-spacing:.16em;align-self:baseline}
.nav a[aria-current="page"]{color:var(--ink)}
.label{font-size:13px;letter-spacing:.2em;margin-bottom:8px}
.text{display:flex;flex-direction:column;gap:14px;max-width:470px}
.contact{display:flex;flex-direction:column;gap:6px;font-size:19px;line-height:1.4;align-self:end}
.contact .addr{margin-top:10px}
.copy{display:flex;justify-content:flex-end;align-items:flex-end;font-size:15px;letter-spacing:.04em}

/* Slideshow */
.slides{width:380px;display:flex;flex-direction:column;gap:14px}
.frame{font:inherit;color:inherit;width:380px;height:480px;display:flex;align-items:flex-end;justify-content:flex-start;padding:0;border:0;background:none;cursor:pointer}
.frame img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.frame .ph{width:360px;height:480px;background:#e8e6e1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;font-family:inherit}
.bar{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;gap:16px}
.caption{font-style:italic}
.ctrl{display:flex;gap:14px;align-items:baseline;white-space:nowrap}
.ctrl button{background:none;border:0;padding:0 4px;cursor:pointer;font-family:inherit;font-size:18px;color:var(--blue);min-width:24px;min-height:24px}
.count{letter-spacing:.08em}

/* Textseiten */
.legal{display:flex;flex-direction:column;gap:22px;max-width:560px}
.legal h2{font-size:17px;font-weight:400;font-style:italic;margin:0}
.legal h1{font-size:13px;font-weight:400;letter-spacing:.2em;margin:0 0 4px}

@media (max-width:860px){
  .page{grid-template-columns:minmax(0,1fr);padding:24px 20px 32px;row-gap:40px}
  .nav{justify-content:flex-start;gap:24px;font-size:14px;order:2;margin-top:-28px}
  .name{order:1}
  .slides{order:3;width:100%}
  .text{order:4}
  .contact{order:5}
  .copy{order:6;justify-content:flex-start}
  .frame{width:100%;height:auto;aspect-ratio:380/480}
  .frame .ph{width:94%;height:100%}
  .spacer{display:none}
}