/* ============================================================
   Saraya Estate GmbH — stylesheet
   Fonts are self-hosted on purpose. Loading them from
   fonts.googleapis.com would send every visitor's IP address to
   Google, which a German court (LG München I, 3 O 17493/20)
   held to be unlawful without prior consent. Do not replace
   these @font-face rules with a Google Fonts <link>.
   Spectral & Archivo — SIL Open Font License 1.1
   ============================================================ */

@font-face{font-family:'Spectral';src:url('fonts/spectral-200.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Spectral';src:url('fonts/spectral-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#191A1C; --brass:#A8813F; --paper:#FFFFFF; --dust:#F2F1EE;
  --mute:rgba(25,26,28,.5); --hair:rgba(25,26,28,.14);
  --sf:'Spectral','Iowan Old Style',Georgia,serif;
  --sa:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --pad:clamp(18px,4.4vw,68px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sa);font-weight:300;line-height:1.62;font-size:16px}
img{display:block;width:100%;height:auto}
figure{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--brass);outline-offset:4px}
.w{padding-left:var(--pad);padding-right:var(--pad)}
.max{max-width:1500px;margin:0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- type ---------- */
.lbl{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:400}
.lbl.b{color:var(--brass)}
h1,h2{font-family:var(--sf);font-weight:200;letter-spacing:-.008em;margin:0}
h1{font-size:clamp(32px,7vw,86px);line-height:1.02}
h2{font-size:clamp(26px,4.6vw,54px);line-height:1.08}
h3{font-family:var(--sf);font-weight:300;font-size:clamp(21px,3.2vw,30px);line-height:1.15;margin:0 0 12px;letter-spacing:.005em}
p{margin:0 0 18px;color:rgba(25,26,28,.78);max-width:58ch}
.big{font-family:var(--sf);font-weight:300;font-size:clamp(17px,2.5vw,22px);line-height:1.5;color:rgba(25,26,28,.86)}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:center;gap:16px;
  padding:16px var(--pad);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
header.stuck{border-bottom-color:var(--hair)}
.logo{width:clamp(140px,20vw,200px);display:block}
.tools{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.5vw,28px)}
.langs{display:flex;gap:9px;align-items:center}
.langs button{background:none;border:0;padding:2px;cursor:pointer;font-family:var(--sa);font-size:10px;letter-spacing:.22em;color:var(--mute);text-transform:uppercase}
.langs button[aria-pressed="true"]{color:var(--ink);border-bottom:1px solid var(--brass)}
.langs i{width:1px;height:11px;background:var(--hair);display:block}
.ask{font-size:10px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;white-space:nowrap}

/* ---------- hero ---------- */
.hero-img{width:100%;height:min(92vh,900px);object-fit:cover;background:var(--dust)}
.hero-cap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:12px}

/* ---------- statement ---------- */
.state{padding:clamp(56px,11vw,150px) 0 clamp(40px,7vw,90px);display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,60px)}
@media(min-width:900px){.state{grid-template-columns:1.25fr .75fr;align-items:end}}
.state h1{max-width:11ch}

/* ---------- register ---------- */
.reg{border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);padding:20px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px}
@media(min-width:820px){.reg{grid-template-columns:repeat(5,1fr)}}
.reg div b{display:block;font-family:var(--sf);font-weight:300;font-size:clamp(17px,2.4vw,24px);letter-spacing:.02em;margin-bottom:3px}
.reg div span{font-size:10.5px;letter-spacing:.13em;color:var(--mute);line-height:1.5;display:block;text-transform:uppercase}

/* ---------- objects ---------- */
.obj{padding:clamp(54px,9vw,130px) 0 0}
.obj-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,34px)}
.obj-head .n{font-family:var(--sf);font-size:12px;color:var(--brass);letter-spacing:.14em}
.obj-head .st{margin-left:auto;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.obj-head .st.off{color:var(--mute)}
.obj-text{display:grid;grid-template-columns:1fr;gap:clamp(18px,3vw,50px);margin-bottom:clamp(24px,4vw,50px)}
@media(min-width:900px){.obj-text{grid-template-columns:.9fr 1.1fr}}
.gal{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.6vw,20px)}
@media(min-width:700px){.gal{grid-template-columns:1fr 1fr}}
.gal img{aspect-ratio:2/3;object-fit:cover;background:var(--dust)}
.gal img.land{aspect-ratio:3/2}
.gal figure.span2{grid-column:1/-1}
.gal figure.span2 img{aspect-ratio:16/9}
@media(max-width:699px){.gal figure.span2 img{aspect-ratio:3/2}}
.gal figure.drop{margin-top:clamp(0px,5vw,80px)}
@media(max-width:699px){.gal figure.drop{margin-top:0}}

/* ---------- bleed ---------- */
.bleed{width:100%;margin-top:clamp(50px,8vw,110px)}
.bleed img{height:min(78vh,760px);object-fit:cover;background:var(--dust)}

/* ---------- columns ---------- */
.cols{display:grid;grid-template-columns:1fr;padding:clamp(54px,9vw,120px) 0 0}
@media(min-width:900px){.cols{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)}}
.cols article{border-top:1px solid var(--ink);padding:22px 0 0;margin-top:26px}
@media(min-width:900px){.cols article{margin-top:0}}
.cols p{font-size:15px;margin-bottom:0}
.cols .lbl{display:block;margin-bottom:14px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;padding:clamp(50px,8vw,110px) 0 0}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,40px)}}
.steps article{border-top:1px solid var(--hair);padding:20px 0 0;margin-top:22px}
@media(min-width:760px){.steps article{margin-top:0}}
.steps h3{font-size:20px;margin-bottom:8px}
.steps p{font-size:14px;margin:0}
.steps .n{font-family:var(--sf);font-size:12px;color:var(--brass);letter-spacing:.14em;display:block;margin-bottom:14px}

/* ---------- haltung ---------- */
.halt{padding:clamp(56px,10vw,140px) 0 0}
.halt-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,64px)}
@media(min-width:940px){.halt-grid{grid-template-columns:1fr 1fr;align-items:start}}
.sign{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair)}
.sign b{display:block;font-family:var(--sf);font-weight:300;font-size:19px;letter-spacing:.03em}

/* ---------- lagen ---------- */
.kieze{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px);padding:clamp(50px,8vw,110px) 0 0}
@media(min-width:900px){.kieze{grid-template-columns:repeat(4,1fr)}}
.kiez img{aspect-ratio:2/3;object-fit:cover;background:var(--dust)}
.kiez h3{font-size:clamp(18px,2.4vw,23px);margin:14px 0 5px}
.kiez p{font-size:13px;margin:0;color:var(--mute)}

/* ---------- contact ---------- */
.contact{padding:clamp(56px,10vw,140px) 0 clamp(50px,8vw,110px)}
.cgrid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,70px)}
@media(min-width:900px){.cgrid{grid-template-columns:1fr 1fr}}
form{display:grid;gap:20px;max-width:500px}
label{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
input,textarea,select{width:100%;font:300 15px/1.5 var(--sa);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--ink);padding:7px 0;border-radius:0;-webkit-appearance:none}
input:focus,textarea:focus,select:focus{outline:0;border-bottom-color:var(--brass)}
textarea{min-height:76px;resize:vertical}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--mute);line-height:1.5;letter-spacing:0;text-transform:none}
.chk input{width:auto;border:0}
button.send{justify-self:start;border:0;border-bottom:1px solid var(--ink);background:none;padding:0 0 5px;font:400 11px/1 var(--sa);letter-spacing:.26em;text-transform:uppercase;cursor:pointer}
.note{font-size:12px;color:var(--mute);margin:0}
.det{list-style:none;margin:0;padding:0;max-width:420px}
.det li{padding:16px 0;border-bottom:1px solid var(--hair)}
.det li span{display:block;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.det a{border-bottom:1px solid var(--brass)}

/* ---------- legal pages ---------- */
.legalpage{padding:calc(clamp(56px,10vw,120px) + 60px) 0 clamp(50px,8vw,100px);max-width:820px}
.legalpage h1{font-size:clamp(30px,5.6vw,58px);margin-bottom:34px}
.legalpage h2{font-size:clamp(20px,3vw,28px);margin:44px 0 14px;border-top:1px solid var(--ink);padding-top:20px}
.legalpage h3{font-size:clamp(16px,2.2vw,20px);margin:26px 0 8px;font-family:var(--sa);font-weight:500;letter-spacing:.01em}
.legalpage p,.legalpage li{font-size:15px;max-width:70ch}
.legalpage ul,.legalpage ol{padding-left:20px;margin:0 0 18px}
.legalpage li{margin-bottom:7px;color:rgba(25,26,28,.78)}
.legalpage dl{margin:0 0 20px;display:grid;grid-template-columns:1fr;gap:2px 24px}
@media(min-width:620px){.legalpage dl{grid-template-columns:170px 1fr}}
.legalpage dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);padding-top:5px}
.legalpage dd{margin:0 0 14px;font-size:15px}
.legalpage a{border-bottom:1px solid var(--brass);word-break:break-word}
.back{display:inline-block;margin-top:44px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.callout{border-left:2px solid var(--brass);padding:2px 0 2px 16px;margin:0 0 22px}
.callout p{font-size:14px;color:var(--mute);margin:0}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(237,232,222,.6);padding:clamp(48px,7vw,86px) 0 30px;margin-top:clamp(50px,8vw,110px)}
.flogo{width:clamp(180px,26vw,240px);margin-bottom:34px;display:block}
.fg{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:760px){.fg{grid-template-columns:1.4fr 1fr 1fr}}
footer h4{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:rgba(237,232,222,.42);margin:0 0 14px;font-weight:400}
footer a{display:block;padding:4px 0;font-size:13.5px;color:rgba(237,232,222,.72)}
footer a:hover{color:#EDE8DE}
footer p{font-size:13px;color:rgba(237,232,222,.6);max-width:34ch}
.fl{margin-top:36px;padding-top:18px;border-top:1px solid rgba(237,232,222,.16);display:flex;flex-wrap:wrap;gap:6px 22px;font-size:11px;color:rgba(237,232,222,.38);letter-spacing:.04em}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}