@font-face{font-family:"Jost";src:url(fonts/jost-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url(fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --anthrazit:#2E2E2E;
  --text:#3a3a3a;
  --leise:#7a736b;
  --sand:#B08968;
  --hell:#F4EFE8;
  --weiss:#FBF9F6;
  --linie:#e4ddd3;
  --serif:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--weiss);color:var(--text);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}

.huelle{max-width:1080px;margin:0 auto;padding:0 28px}
.schmal{max-width:680px}

/* Kopf */
header{position:absolute;top:0;left:0;right:0;z-index:5;color:#fff}
header .huelle{display:flex;justify-content:space-between;align-items:center;height:92px}
.marke{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.02em;text-decoration:none}
.marke span{color:var(--sand)}
nav a{font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;margin-left:34px;opacity:.9}
nav a:hover{opacity:1;color:var(--sand)}
header.innen{position:static;color:var(--anthrazit);border-bottom:1px solid var(--linie)}

/* Bühne */
.buehne{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;background:#222}
.buehne picture,.buehne img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buehne::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.15) 35%,rgba(20,20,20,.75) 100%)}
.buehne .huelle{position:relative;z-index:2;width:100%;padding-bottom:12vh}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:18px;font-weight:400}
.buehne h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.4vw,76px);line-height:1.05;max-width:14ch}
.buehne p{margin-top:22px;font-size:18px;max-width:40ch;opacity:.9}

/* Abschnitte */
section{padding:120px 0}
section.ton{background:var(--hell)}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.15;color:var(--anthrazit);margin-bottom:28px}
p+p{margin-top:18px}
.linie{width:48px;height:1px;background:var(--sand);margin:0 0 30px}

.zwei{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.zwei img{width:100%;aspect-ratio:4/5;object-fit:cover}

.leistungen{list-style:none;margin-top:36px;border-top:1px solid var(--linie)}
.leistungen li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--linie)}
.leistungen b{font-weight:500;color:var(--anthrazit);min-width:190px}
.marken{margin-top:42px;font-family:var(--serif);font-size:22px;color:var(--leise);letter-spacing:.04em}

/* Besuch */
.besuch{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.besuch h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:var(--sand);margin-bottom:14px}
.zeiten{display:grid;grid-template-columns:auto 1fr;column-gap:22px}
.besuch a{text-decoration:none;border-bottom:1px solid var(--linie)}
.besuch a:hover{border-color:var(--sand)}
.foto-breit{margin-top:80px;width:100%;aspect-ratio:21/9;object-fit:cover}

/* Formular */
form{margin-top:40px;display:grid;gap:22px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:22px}
label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--leise);margin-bottom:8px}
input,textarea{width:100%;font:inherit;font-size:16px;color:var(--anthrazit);background:transparent;border:0;border-bottom:1px solid #cfc6ba;padding:10px 0;border-radius:0;outline:none}
input:focus,textarea:focus{border-color:var(--sand)}
textarea{min-height:140px;resize:vertical}
.falle{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.hinweis{font-size:14px;color:var(--leise)}
button{justify-self:start;font:inherit;font-size:13px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:#fff;background:var(--anthrazit);border:0;padding:16px 38px;cursor:pointer;transition:background .2s}
button:hover{background:var(--sand)}
.meldung{padding:18px 22px;border-left:2px solid var(--sand);background:var(--hell)}

/* Fuß */
footer{background:var(--anthrazit);color:#cfc8bf;padding:56px 0;font-size:14px}
footer .huelle{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px}
footer a{text-decoration:none;margin-left:28px}
footer a:first-child{margin-left:0}
footer a:hover{color:#fff}

/* Rechtstexte */
.recht{padding:90px 0 110px}
.recht h1{font-family:var(--serif);font-weight:400;font-size:48px;color:var(--anthrazit);margin-bottom:40px}
.recht h2{font-size:28px;margin:46px 0 14px}
.recht h3{font-size:15px;font-weight:500;color:var(--anthrazit);margin:26px 0 8px}
.recht p,.recht li{font-size:16px}
.recht ul{padding-left:20px;margin-top:10px}
.recht dl{display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:6px;font-size:16px}
.recht dt{color:var(--leise)}

@media (max-width:820px){
  body{font-size:16px}
  header .huelle{height:76px}
  .marke{font-size:21px}
  nav a{margin-left:18px;font-size:11px;letter-spacing:.14em}
  section{padding:80px 0}
  .zwei,.besuch,.reihe{grid-template-columns:1fr;gap:44px}
  .zwei img{aspect-ratio:4/3}
  .leistungen li{flex-direction:column;gap:2px}
  .foto-breit{aspect-ratio:4/3;margin-top:56px}
  footer .huelle{flex-direction:column}
  footer a{margin-left:0;margin-right:24px}
}
@media (max-width:420px){ nav a:first-child{display:none} .huelle{padding:0 20px} }

/* Bühne: Text links besser lesbar (Probe 27.09.) */
.buehne::after{background:linear-gradient(90deg,rgba(18,18,18,.72) 0%,rgba(18,18,18,.35) 55%,rgba(18,18,18,.1) 100%),linear-gradient(180deg,rgba(18,18,18,.45) 0%,rgba(18,18,18,0) 30%,rgba(18,18,18,.55) 100%)}
.buehne .kicker{color:#e6cfb6}

/* Titel-Schrift schlicht statt Serifen (Wolfgang 27.09.: "zu schnörkelig") */
.marke{font-weight:400;font-size:20px;letter-spacing:.06em}
.buehne h1{font-weight:300;letter-spacing:-.01em;line-height:1.08}
h2{font-weight:300;letter-spacing:-.005em}
.marken{font-size:18px;letter-spacing:.08em}
.recht h1{font-weight:300}
@media (max-width:820px){.marke{font-size:17px}}

/* Logo statt Schriftzug (Wolfgang 27.09.) */
.marke img{height:74px;width:auto;display:block}
header .huelle{height:120px}
@media (max-width:820px){.marke img{height:54px} header .huelle{height:92px}}

/* Bühne mit Zeichnung statt Foto (Wolfgang 27.09.: alte Fotos raus) */
.buehne{background:radial-gradient(ellipse at 70% 45%,#3a3633 0%,#2a2826 45%,#1f1e1d 100%);min-height:86vh}
.buehne::after{display:none}
.buehne img.zeichnung{position:absolute;inset:auto 3% 6% auto;left:auto;top:auto;width:min(62%,900px);height:auto;object-fit:contain;opacity:.95}
.buehne .huelle{padding-bottom:14vh}
@media (max-width:820px){
  .buehne{min-height:92vh;align-items:flex-end}
  .buehne img.zeichnung{width:96%;right:2%;top:14%;bottom:auto;opacity:.55}
}
/* Porträt */
.portraet{grid-template-columns:5fr 7fr}
.portraet img{width:100%;aspect-ratio:4/5;object-fit:cover}
.portraet img{height:auto;max-width:460px}
.buehne img.zeichnung{width:min(50%,720px);right:2%;bottom:10%}
@media (max-width:1100px){.buehne img.zeichnung{width:46%}}
@media (max-width:820px){
  .portraet{grid-template-columns:1fr}
  .portraet img{max-width:100%;aspect-ratio:4/5}
  .buehne img.zeichnung{width:96%;right:2%;top:14%;bottom:auto}
}
.buehne h1{font-size:clamp(40px,4.9vw,68px)}
.buehne img.zeichnung{width:min(46%,680px)}
@media (max-width:1280px){.buehne img.zeichnung{width:41%}}
@media (max-width:820px){.buehne img.zeichnung{width:96%}}
/* Weniger Anthrazit (Wolfgang 27.09.): Bühne niedriger */
.buehne{min-height:0;height:clamp(480px,62vh,620px)}
.buehne .huelle{padding-bottom:9vh}
.buehne img.zeichnung{width:min(40%,560px);bottom:8%}
@media (max-width:1280px){.buehne img.zeichnung{width:38%}}
@media (max-width:820px){
  .buehne{height:auto;min-height:0;padding-top:300px}
  .buehne .huelle{padding-bottom:56px}
  .buehne img.zeichnung{width:80%;right:10%;top:92px;opacity:.6}
}