@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}

@font-face {
  font-family: 'Sermo';
  src: url('fonts/sermo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sermo';
  src: url('fonts/sermo-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root{
  --vellum: #f2ede4;
  --linen: #e6ded1;
  --ink: #1a1816;
  --accent: #6b2a2e;
  --grad-1: #1a1816;
  --grad-2: #4a2024;
  --grad-3: #6b2a2e;
  --grad-4: #f2ede4;

  --text-caption: 0.875rem;
  --text-body-sm: 1rem;
  --text-body: 1.125rem;
  --text-subheading: 1.5rem;
  --text-heading-sm: 1.625rem;
  --text-heading: clamp(1.9rem, 4vw, 2.5rem);
  --text-heading-lg: clamp(2.75rem, 6vw, 4.6875rem);
  --text-display: clamp(2.6rem, 8.5vw, 8.4rem);

  --section-gap: clamp(4rem, 9vw, 7.5rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--vellum);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.link-underline{
  font-size:var(--text-body-sm);
  font-weight:500;
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:text-decoration-thickness .15s ease, color .15s ease;
}
.link-underline:hover{
  text-decoration-thickness:2px;
  color:var(--accent);
}
.link-underline svg{width:14px; height:14px; flex-shrink:0;}

/* Nav */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--vellum);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:clamp(0.35rem, 0.8vw, 0.6rem) clamp(1.25rem, 4vw, 3rem);
}
.brand-logo{
  height:clamp(52px, 15vw, 190px);
  width:auto;
  flex-shrink:0;
  display:block;
}
@media(min-width:860px){
  .brand-logo{ height:100px; }
}
nav.main-nav{
  display:none;
  gap:clamp(1.25rem, 3vw, 2.25rem);
  font-size:var(--text-caption);
  font-weight:400;
}
@media(min-width:860px){ nav.main-nav{display:flex;} }

nav.main-nav a,
.mobile-nav-panel a{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .15s ease;
}
nav.main-nav a:hover,
.mobile-nav-panel a:hover{
  text-decoration-color:var(--ink);
}
nav.main-nav a.is-active,
.mobile-nav-panel a.is-active{
  text-decoration-color:var(--accent);
}

.header-right{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.hamburger-btn{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:26px;
  height:18px;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  flex-shrink:0;
}
.hamburger-btn span{
  display:block;
  height:1px;
  width:100%;
  background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger-btn.is-open span:nth-child(1){transform:translateY(8.5px) rotate(45deg);}
.hamburger-btn.is-open span:nth-child(2){opacity:0;}
.hamburger-btn.is-open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg);}
@media(min-width:860px){ .hamburger-btn{display:none;} }

.mobile-nav-panel{
  display:none;
  flex-direction:column;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--vellum);
  border-top:1px solid rgba(26,24,22,0.15);
  padding:0.5rem clamp(1.25rem, 4vw, 3rem) 1rem;
}
.mobile-nav-panel.is-open{display:flex;}
.mobile-nav-panel a{
  font-size:var(--text-body);
  font-weight:500;
  padding:0.85rem 0;
  border-bottom:1px solid rgba(26,24,22,0.12);
}
.mobile-nav-panel a:last-child{border-bottom:none;}
@media(min-width:860px){ .mobile-nav-panel{display:none !important;} }

/* Hero */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(2rem,6vw,4rem) clamp(1.25rem,4vw,3rem) clamp(3rem,8vw,6rem);
  background:linear-gradient(184deg, var(--grad-1) 0%, var(--grad-2) 32%, var(--grad-3) 58%, var(--grad-4) 100%);
  overflow:hidden;
}
.hero-person{
  font-size:var(--text-caption);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--vellum);
  opacity:0.75;
  margin:0 0 clamp(0.75rem,2vw,1.25rem) 0;
}
.hero-headline{
  font-family:'Sermo', serif;
  font-size:clamp(2.2rem, 6.5vw, 6.5rem);
  font-weight:400;
  line-height:0.95;
  letter-spacing:-0.01em;
  color:var(--vellum);
  max-width:100%;
  margin:0 0 clamp(1.5rem,3vw,2rem) 0;
}
.hero-headline .em{
  color:var(--vellum);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:0.06em;
  text-underline-offset:0.08em;
}
.hero-headline .line-mask{display:block; overflow:hidden;}
.hero-headline .line-inner{display:block;}
.hero-sub{
  font-size:var(--text-subheading);
  font-weight:400;
  line-height:1.4;
  max-width:38ch;
  color:var(--vellum);
  margin:0 0 clamp(1.5rem,3vw,2rem) 0;
}
.hero-claim{
  font-family:'Sermo', serif;
  font-style:italic;
  font-size:1.4em;
  line-height:1.25;
  color:var(--vellum);
  -webkit-text-stroke:0.9px currentColor;
  text-stroke:0.9px currentColor;
  margin:0 0 clamp(1rem,2vw,1.5rem) 0;
}
.hero-facts{
  display:flex;
  flex-direction:column;
  gap:0.4em;
  margin:0 0 clamp(1rem,2vw,1.5rem) 0;
}
.hero-facts-item{
  font-size:var(--text-body);
  line-height:1.4;
  color:var(--vellum);
}
.hero-facts-item dt{
  display:inline;
  font-weight:600;
}
.hero-facts-item dt::after{content:": ";}
.hero-facts-item dd{
  display:inline;
  margin:0;
  font-weight:400;
  opacity:0.9;
}
.hero .link-underline{color:var(--vellum); text-decoration-color:var(--vellum);}
.hero .link-underline:hover{color:#e8b9b9;}

.hero-image-ph{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  width:min(78vw, 440px);
  height:auto;
  aspect-ratio:747/1000;
  object-fit:contain;
  object-position:bottom;
  display:block;
}
@media(min-width:900px){
  .hero-image-ph{
    position:absolute;
    right:clamp(0px, 2vw, 2rem);
    bottom:0;
    left:auto;
    margin-top:0;
    width:min(52vw, 820px);
  }
  .hero{padding-right:min(54vw, 860px);}
}

/* Sections */
.band{
  padding:var(--section-gap) clamp(1.25rem,4vw,3rem);
}
.band.linen{background:var(--linen);}
.band.hairline-top{border-top:1px solid var(--ink);}

.band-inner{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(2rem,5vw,4rem);
  align-items:flex-start;
}
.band-heading{
  flex:1 1 320px;
}
.eyebrow{
  display:block;
  font-size:var(--text-caption);
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 0.75rem 0;
}
h2{
  font-family:'Sermo', serif;
  font-size:var(--text-heading-lg);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0;
}
.band-body{
  flex:1 1 380px;
}
.band-body p{
  font-size:var(--text-body);
  line-height:1.5;
  max-width:65ch;
  margin:0 0 0.9em 0;
}
.band-body .cite{font-family:'Sermo', serif; font-style:italic; font-size:1.2em; font-weight:400; -webkit-text-stroke:0.65px currentColor; text-stroke:0.65px currentColor;}
.band-body .link-underline{margin-top:0.5rem;}

.image-ph-inline{
  width:100%;
  aspect-ratio:1329/795;
  border-radius:4px;
  object-fit:cover;
  display:block;
  margin-top:1.5rem;
}
.image-credit{
  display:block;
  font-size:var(--text-caption);
  color:rgba(26,24,22,0.63);
  margin-top:0.5rem;
}

.artist-list{
  font-size:var(--text-body);
  line-height:1.7;
  max-width:72ch;
  margin:0;
}
.artist-list .sep{color:var(--accent); margin:0 0.4em;}

/* Footer */
footer{
  border-top:1px solid var(--ink);
  padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,3rem);
  background:var(--vellum);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  font-size:var(--text-caption);
}
@media(min-width:720px){ .footer-grid{grid-template-columns:1fr 1fr 1fr;} }
.footer-grid a{display:block; padding:0.4rem 0; margin-bottom:0.2rem; min-height:24px;}
.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px 6px 8px;
  background:var(--ink);
  color:var(--vellum);
  border-radius:100px;
  font-size:0.75rem;
  font-weight:500;
}
.footer-badge .accent-text{color:#c6d43f;}
.footer-legal{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(26,24,22,0.15);
  font-size:var(--text-caption);
  color:rgba(26,24,22,0.68);
}
.footer-legal .sep{margin:0 0.5em; color:var(--accent);}
.footer-legal a:hover{color:var(--accent);}



/* --- Unterseiten: page-h1 --- */
h1.page-h1{
  font-family:'Sermo', serif;
  font-size:var(--text-heading-lg);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:0;
  -webkit-text-stroke:0.65px currentColor;
  text-stroke:0.65px currentColor;
}

/* --- Über Josef: Porträt + Auszeichnungen-Liste (Body-Version) --- */
.portrait-inline{
  width:100%;
  max-width:520px;
  margin:0 auto 0 0;
  display:block;
  border-radius:4px;
}
.photo-credit{
  max-width:520px;
  margin:0.5rem auto 0 0;
  font-size:0.7rem;
  color:rgba(26,24,22,0.63);
}
.awards-list{
  margin:1.5rem 0 0 0;
  padding:0;
  list-style:none;
}
.awards-list li{
  display:flex;
  gap:1.5rem;
  padding:1rem 0;
  border-top:1px solid rgba(26,24,22,0.15);
  font-size:var(--text-body);
}
.awards-list li:first-child{border-top:none;}
.awards-list .year{
  font-family:'Sermo', serif;
  font-size:var(--text-heading-sm);
  color:var(--accent);
  flex-shrink:0;
  width:4.5rem;
}

/* --- Sammlung: Künstler-Index-Grid --- */
.artist-index{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:1rem 2rem;
  margin-top:2rem;
}
.artist-index .name{
  font-size:var(--text-body);
  font-weight:500;
}
.artist-index a.name{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color .15s ease;
}
.artist-index a.name:hover{color:var(--accent);}
.artist-index .muted{
  color:rgba(26,24,22,0.63);
}
.artist-index .status{
  display:block;
  font-size:var(--text-caption);
  margin-top:0.15rem;
  color:rgba(26,24,22,0.63);
  text-decoration:none;
  font-weight:400;
}

/* --- Künstler-Unterseite: Exponat-Bild --- */
.artwork-ph{
  display:block;
  width:100%;
  max-width:420px;
  height:auto;
  margin:0 auto;
  border-radius:4px;
}
.artwork-caption{
  text-align:center;
  font-size:var(--text-caption);
  color:rgba(26,24,22,0.68);
  margin-top:1rem;
}
.artwork-credit{
  display:block;
  text-align:center;
  font-size:var(--text-caption);
  color:rgba(26,24,22,0.63);
  margin-top:0.25rem;
}
.artwork-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(500px,100%),1fr));
  gap:1rem;
  margin-top:0.5rem;
  width:100%;
  flex:1 1 100%;
}
.artwork-gallery img{
  display:block;
  width:100%;
  height:auto;
  align-self:start;
  border-radius:4px;
}

/* --- Ausstellungen: Platzhalter + Timeline --- */
.upcoming-ph{
  border:1px solid rgba(26,24,22,0.25);
  border-radius:4px;
  padding:1.5rem;
  color:rgba(26,24,22,0.63);
  font-size:var(--text-body);
  margin-top:1.5rem;
}
.timeline-list{
  margin:1.5rem 0 0 0;
  padding:0;
  list-style:none;
}
.timeline-list li{
  padding:1rem 0;
  border-top:1px solid rgba(26,24,22,0.15);
}
.timeline-list li:first-child{border-top:none;}
.timeline-list .ex-title{
  font-family:'Sermo', serif;
  font-size:var(--text-heading-sm);
  -webkit-text-stroke:0.35px currentColor;
  text-stroke:0.35px currentColor;
  display:block;
}
.timeline-list .ex-meta{
  font-size:var(--text-caption);
  color:rgba(26,24,22,0.68);
}
a.timeline-list .ex-title,
.timeline-list a.ex-title{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(26,24,22,0.35);
  width:fit-content;
}
.timeline-list a.ex-title:hover{
  border-bottom-color:currentColor;
}
.category-heading{
  font-family:'Sermo', serif;
  font-size:clamp(2.1rem, 4vw, 2.9rem);
  font-weight:400;
  letter-spacing:-0.01em;
  -webkit-text-stroke:0.6px currentColor;
  text-stroke:0.6px currentColor;
  color:var(--accent);
  margin:3.5rem 0 0.4rem 0;
  padding-bottom:0.6rem;
  border-bottom:1px solid rgba(107,42,46,0.25);
  display:block;
}
.category-heading:first-of-type{margin-top:0;}
.category-heading .category-count{
  display:block;
  font-family:'Sermo', serif;
  font-style:italic;
  -webkit-text-stroke:0.45px currentColor;
  text-stroke:0.45px currentColor;
  font-size:var(--text-body-sm);
  font-weight:400;
  color:rgba(26,24,22,0.82);
  margin-top:0.4rem;
}

/* --- Kontakt: Formular + Direktkontakt --- */
form.contact-form{
  max-width:560px;
  margin-top:1rem;
}
.form-row{margin-bottom:1.75rem;}
.form-row label{
  display:block;
  font-size:var(--text-caption);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(26,24,22,0.68);
  margin-bottom:0.5rem;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:var(--text-body);
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(26,24,22,0.3);
  padding:0.5rem 0;
  outline:none;
  transition:border-color .15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-bottom-color:var(--accent);
}
.form-row textarea{resize:vertical; min-height:6rem;}
.form-status{
  margin-top:1.25rem;
  font-family:'Inter', sans-serif;
  font-size:var(--text-body-sm);
  min-height:1.3em;
}
.form-status.is-sending{color:rgba(26,24,22,0.55);}
.form-status.is-success{color:var(--ink);}
.form-status.is-error{color:var(--accent);}
button.link-underline{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
}
.direct-contact{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(26,24,22,0.15);
  font-size:var(--text-body);
}
.direct-contact div{margin-bottom:0.4rem;}
.direct-contact .label{
  display:inline-block;
  width:5rem;
  color:rgba(26,24,22,0.63);
  font-size:var(--text-caption);
  text-transform:uppercase;
  letter-spacing:0.04em;
}