/* PURISTIC – Interior & Garden Design
   Designsystem: Creme #F0EBE0 · Warmschwarz #15100B · Taupe #A99B85 · Salbei #8A9A82
   Fonts: Tenor Sans (Headlines) · Cormorant Garamond Italic (Akzent) · Montserrat (Fließtext)
*/

/* ---------- Schriften (lokal gehostet, kein Google-Kontakt) ---------- */
@font-face{font-family:'Tenor Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tenor-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2')}

:root{
  --creme:#F0EBE0;
  --creme-tief:#E5DED0;
  --schwarz:#15100B;
  --taupe:#A99B85;
  --salbei:#8A9A82;
  --weiss:#FBF9F5;
  --text:#2A231B;
  --text-leise:#6B5F50;
  --max:1180px;
  --gutter:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--text);
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- Typo ---------- */
h1,h2,h3,.kicker,.wortmarke,.btn,nav a{
  font-family:'Tenor Sans',Georgia,serif;
  font-weight:400;
}
h1{
  font-size:clamp(2rem,5.2vw,3.9rem);
  line-height:1.12;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0 0 .5em;
}
h2{
  font-size:clamp(1.45rem,3.2vw,2.3rem);
  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 .6em;
}
h3{
  font-size:1.05rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 .6em;
}
.kicker{
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--taupe);
  margin:0 0 1.4em;
  display:block;
}
.serif{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.15rem,2.4vw,1.6rem);
  line-height:1.5;
  color:var(--text-leise);
}
p{margin:0 0 1.2em;max-width:62ch}
.leise{color:var(--text-leise)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(56px,9vw,120px)}
.dunkel{background:var(--schwarz);color:var(--creme)}
.dunkel .kicker{color:var(--taupe)}
.dunkel .serif,.dunkel .leise{color:#C9BFB0}
.hell{background:var(--weiss)}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(240,235,224,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(21,16,11,.09);
}
.kopf{
  max-width:var(--max);margin:0 auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.wortmarke{
  font-size:1.05rem;letter-spacing:.42em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
.wortmarke small{
  display:block;font-family:'Montserrat',sans-serif;font-size:.53rem;
  letter-spacing:.26em;color:var(--taupe);margin-top:4px;
}
nav{display:flex;gap:clamp(16px,2.4vw,34px);align-items:center;flex-wrap:wrap}
nav a{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;padding-block:4px;border-bottom:1px solid transparent;
}
nav a:hover,nav a[aria-current="page"]{border-bottom-color:var(--taupe)}
nav a.cta{
  background:var(--schwarz);color:var(--creme);
  padding:10px 20px;border:none;
}
nav a.cta:hover{background:var(--taupe);color:var(--schwarz)}
@media(max-width:720px){
  .kopf{flex-direction:column;align-items:flex-start;gap:14px}
  nav{gap:14px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:clamp(420px,78vh,720px);display:flex;align-items:flex-end;padding:0}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(21,16,11,.86) 0%,rgba(21,16,11,.35) 48%,rgba(21,16,11,.12) 100%);
}
.hero-text{position:relative;z-index:2;color:var(--creme);padding-block:clamp(40px,7vw,80px)}
.hero-text h1{color:var(--weiss)}
.hero-text .serif{color:#DED5C6;max-width:34ch}

/* ---------- Raster ---------- */
.raster{display:grid;gap:clamp(20px,3vw,38px)}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.raster.drei{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.split{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}

/* ---------- Karten ---------- */
.karte{
  background:var(--weiss);
  border:1px solid rgba(21,16,11,.1);
  padding:clamp(26px,3.4vw,40px);
  display:flex;flex-direction:column;
}
.dunkel .karte{background:rgba(255,255,255,.045);border-color:rgba(240,235,224,.18);color:var(--creme)}
.karte .preis{
  font-family:'Tenor Sans',serif;font-size:1.35rem;letter-spacing:.06em;
  color:var(--taupe);margin:0 0 1.1em;
}
.karte ul{list-style:none;margin:0 0 1.6em;padding:0;font-size:.92rem}
.karte li{padding:9px 0 9px 22px;position:relative;border-bottom:1px solid rgba(21,16,11,.07)}
.dunkel .karte li{border-bottom-color:rgba(240,235,224,.13)}
.karte li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--taupe)}
.karte .fuss{margin-top:auto}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(10px,1.6vw,20px)}
.galerie figure{margin:0;position:relative;overflow:hidden;background:var(--creme-tief)}
.galerie img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s ease}
.galerie figure:hover img{transform:scale(1.035)}
.galerie figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(21,16,11,.85),transparent);
  color:var(--creme);padding:34px 18px 16px;
  font-family:'Tenor Sans',serif;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
}
.galerie .breit{grid-column:span 2}
@media(max-width:560px){.galerie .breit{grid-column:span 1}}

/* ---------- Ablauf ---------- */
.ablauf{counter-reset:schritt;display:grid;gap:2px}
.ablauf li{
  counter-increment:schritt;list-style:none;
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:22px 0;border-top:1px solid rgba(21,16,11,.12);
}
.dunkel .ablauf li{border-top-color:rgba(240,235,224,.16)}
.ablauf li::before{
  content:"0" counter(schritt);
  font-family:'Tenor Sans',serif;font-size:1.1rem;letter-spacing:.1em;color:var(--taupe);
}
.ablauf h3{margin-bottom:.3em}
.ablauf p{margin:0;font-size:.93rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  padding:15px 34px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  background:var(--schwarz);color:var(--creme);border:1px solid var(--schwarz);
  transition:background .25s,color .25s;
}
.btn:hover{background:var(--taupe);border-color:var(--taupe);color:var(--schwarz)}
.btn.hell{background:transparent;color:var(--schwarz);border-color:var(--schwarz)}
.btn.hell:hover{background:var(--schwarz);color:var(--creme)}
.dunkel .btn{background:var(--creme);color:var(--schwarz);border-color:var(--creme)}
.dunkel .btn:hover{background:var(--taupe);border-color:var(--taupe)}

/* ---------- Formular ---------- */
form{max-width:640px}
.feld{margin-bottom:22px}
label{
  display:block;font-family:'Tenor Sans',serif;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px;
}
input,textarea,select{
  width:100%;padding:14px 16px;font-family:inherit;font-size:.95rem;font-weight:300;
  background:var(--weiss);color:var(--text);
  border:1px solid rgba(21,16,11,.2);border-radius:0;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--taupe);outline-offset:-2px}
textarea{min-height:150px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.82rem;line-height:1.6;color:var(--text-leise)}
.check input{width:auto;margin-top:5px;flex:none}
.hp{position:absolute;left:-9999px}

/* ---------- Zitat ---------- */
.zitat{text-align:center;max-width:720px;margin:0 auto}
.zitat p{max-width:none;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.3rem,3.2vw,2.05rem);line-height:1.45}

/* ---------- Footer ---------- */
footer{background:var(--schwarz);color:var(--creme);padding-block:clamp(48px,6vw,72px);font-size:.86rem}
footer .raster{align-items:start}
footer a{color:#C9BFB0;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--creme)}
footer .wortmarke{color:var(--creme)}
.footer-fuss{
  border-top:1px solid rgba(240,235,224,.16);margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.74rem;letter-spacing:.1em;color:#9E9284;
}

/* ---------- Rechtstexte ---------- */
.recht{max-width:760px}
.recht h2{margin-top:2.2em}
.recht h3{margin-top:1.8em;letter-spacing:.1em}
.recht p,.recht li{font-size:.93rem}
.recht ul{padding-left:20px}
.platzhalter{
  background:#F6E9C8;color:#5A4718;padding:1px 7px;
  font-size:.88em;border:1px dashed #C9A961;
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- Dropdown Leistungen ---------- */
.dd{position:relative}
.dd-knopf{
  font-family:'Tenor Sans',Georgia,serif;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:none;border-bottom:1px solid transparent;color:inherit;cursor:pointer;line-height:inherit;
  padding:4px 0;display:inline-flex;align-items:center;gap:8px;
}
.dd-knopf::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.dd.aktiv .dd-knopf,.dd-knopf:hover{border-bottom-color:var(--taupe)}
.dd-menue{
  display:none;position:absolute;top:100%;left:-22px;padding-top:14px;min-width:210px;z-index:60;
}
.dd-menue::before{content:"";position:absolute;inset:14px 0 0 0;background:var(--weiss);border:1px solid rgba(21,16,11,.1);box-shadow:0 14px 34px rgba(21,16,11,.08);z-index:-1}
.dd-menue a{display:block;padding:12px 22px;border:none}
.dd-menue a:hover,.dd-menue a[aria-current="page"]{color:var(--taupe)}
.dd:hover .dd-menue,.dd:focus-within .dd-menue,.dd.offen .dd-menue{display:block}
.dd.offen .dd-knopf::after,.dd:hover .dd-knopf::after{transform:translateY(1px) rotate(-135deg)}
@media(max-width:720px){
  .dd-menue{left:0}
}

/* ---------- Seitenkopf mit Bild ---------- */
.seitenkopf{position:relative;min-height:clamp(340px,56vh,520px);display:flex;align-items:flex-end;padding:0}
.seitenkopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seitenkopf::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,16,11,.88) 0%,rgba(21,16,11,.4) 55%,rgba(21,16,11,.15) 100%)}
.seitenkopf .hero-text h1{color:var(--weiss)}

/* ---------- Zwei Welten ---------- */
.welt{display:block;text-decoration:none;background:var(--weiss);border:1px solid rgba(21,16,11,.1);overflow:hidden}
.welt img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s ease}
.welt:hover img{transform:scale(1.03)}
.welt-text{padding:clamp(24px,3vw,36px)}
.welt-text .kicker{margin-bottom:.8em}
.welt-text p{font-size:.93rem;color:var(--text-leise)}
.welt-link{font-family:'Tenor Sans',serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--taupe);padding-bottom:3px}

/* ---------- 10 Schritte ---------- */
.schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:rgba(21,16,11,.12);border:1px solid rgba(21,16,11,.12)}
.schritte li{background:var(--creme);padding:26px 22px 24px;display:flex;flex-direction:column}
.hell .schritte li{background:var(--weiss)}
.schritte .nr{font-family:'Tenor Sans',serif;font-size:1.7rem;letter-spacing:.06em;color:var(--taupe);line-height:1;margin-bottom:18px}
.schritte h3{font-size:.8rem;letter-spacing:.14em;line-height:1.5;margin-bottom:.6em}
.schritte p{font-size:.86rem;line-height:1.6;color:var(--text-leise);margin:0}

/* ---------- Preise ---------- */
.karte .preis small{display:block;font-family:'Montserrat',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);margin-top:4px}
.dunkel .karte .preis small{color:#9E9284}

/* ---------- Instagram-Band ---------- */
.insta-band{background:var(--creme-tief);padding-block:clamp(48px,7vw,80px)}
.insta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.insta-band h2{margin-bottom:.3em}
.insta-band p{margin:0}

/* Lange Wörter in den Schritt-Kacheln sauber trennen */
.schritte h3{letter-spacing:.1em;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* ---------- Icons ---------- */
.ico{flex:none;vertical-align:middle}
.icolink{display:flex!important;align-items:center;gap:10px}
.icolabel{font-weight:400;display:inline-flex;align-items:center;gap:8px}
.icolabel .ico{color:var(--taupe)}
.icobtn{display:inline-flex;align-items:center;gap:10px}
.icobtn .ico{width:16px;height:16px}

/* Direktkontakt-Links: lesbarer Kontrast */
.direktlink{color:var(--text);text-decoration:none;border-bottom:1px solid var(--taupe)}
.direktlink:hover{color:var(--taupe)}

/* Hero: zusätzliche Abdunklung links für Lesbarkeit auf unruhigen Bildern */
.hero::after,.seitenkopf::after{
  background:
    linear-gradient(to right,rgba(21,16,11,.72) 0%,rgba(21,16,11,.35) 45%,rgba(21,16,11,0) 75%),
    linear-gradient(to top,rgba(21,16,11,.8) 0%,rgba(21,16,11,.25) 50%,rgba(21,16,11,.1) 100%);
}

/* ---------- Formular-Rückmeldung ---------- */
.formstatus{margin-top:18px;font-size:.88rem;color:#8A3B2E}
.formstatus a{color:inherit}
.danke{padding:clamp(28px,4vw,44px);background:var(--weiss);border:1px solid rgba(21,16,11,.1)}
.danke h2{margin-bottom:.5em}
button[disabled]{opacity:.6;cursor:wait}