/* =========================================================
   hell und freundlich raumdesign – Startseite
   Schriften lokal eingebunden (DSGVO-konform, kein Google-Server)
   ========================================================= */
@font-face{font-family:"Montserrat";font-weight:300;font-display:swap;src:url(../fonts/montserrat-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-weight:300;font-display:swap;src:url(../fonts/raleway-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-weight:400;font-display:swap;src:url(../fonts/raleway-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-weight:500;font-display:swap;src:url(../fonts/raleway-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Raleway";font-weight:600;font-display:swap;src:url(../fonts/raleway-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Reenie Beanie";font-weight:400;font-display:swap;src:url(../fonts/reenie-beanie-latin-400-normal.woff2) format("woff2")}

:root{
  --dark:#3d3d3d;
  --darker:#2a2a2b;
  --cream:#f5f2ee;
  --sand:#c39f76;
  --sand-dark:#a8845c;
  --taupe:#b4a797;
  --stone:#d2c9c2;
  --slate:#475560;
  --slate-light:#708090;
  --text:#4f4f4f;
  --muted:#8a8a8a;
  --white:#fff;
  --radius:4px;
  --shadow:0 18px 40px -18px rgba(40,38,43,.35);
  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.75;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--sand-dark);text-decoration:none;transition:color .2s}
a:hover{color:var(--slate)}
p{margin:0 0 1.1em}
strong{color:var(--slate);font-weight:600}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:110px 0}
.section--cream{background:var(--cream)}
.center{text-align:center}

/* Typografie wie bisher: Montserrat + Handschrift Reenie Beanie */
.script{font-family:"Reenie Beanie",cursive;font-weight:400;color:var(--slate-light);font-size:clamp(34px,4vw,44px);line-height:1.1;margin:0 0 .3em;letter-spacing:.5px}
.h1{font-family:"Montserrat",sans-serif;font-weight:300;color:var(--slate);font-size:clamp(30px,4vw,44px);line-height:1.2;margin:0 0 .5em;letter-spacing:.3px}
.lead{font-family:"Montserrat",sans-serif;font-weight:300;font-size:clamp(18px,2vw,23px);color:#a0a0a0;line-height:1.5;max-width:760px;margin:0 auto 1.4em}
.divider{width:60px;height:2px;background:var(--sand);border:0;margin:26px auto 40px}
.divider--left{margin-left:0}

.btn{display:inline-flex;align-items:center;gap:.6em;font-family:"Montserrat",sans-serif;font-weight:500;font-size:14px;letter-spacing:2px;text-transform:uppercase;padding:15px 30px;border-radius:var(--radius);background:var(--sand);color:#fff;border:1px solid var(--sand);transition:all .25s var(--ease)}
.btn:hover{background:var(--sand-dark);border-color:var(--sand-dark);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:#fff;color:var(--dark);border-color:#fff}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s,box-shadow .35s,padding .35s;padding:22px 0}
.header.is-scrolled{background:rgba(42,42,43,.95);backdrop-filter:blur(8px);box-shadow:0 4px 20px rgba(0,0,0,.15);padding:12px 0}
.header .container{display:flex;align-items:center;justify-content:space-between;max-width:1300px}
.logo img{height:46px;width:auto;transition:height .35s}
.header.is-scrolled .logo img{height:38px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:34px}
.nav a{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.85);position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--sand);transition:width .3s var(--ease)}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::after,.nav a.active::after{width:100%}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:10px;width:24px;height:2px;background:#fff;transition:.3s}
.burger span{top:21px}
.burger span::before{content:"";top:-8px;left:0}
.burger span::after{content:"";top:8px;left:0}
.nav-open .burger span{background:transparent}
.nav-open .burger span::before{top:0;transform:rotate(45deg)}
.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- Hero / Slider ---------- */
.hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:var(--darker);color:#fff}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;display:flex;align-items:center;justify-content:center;text-align:center}
.slide.is-active{opacity:1;z-index:1}
.slide__bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);transition:transform 8s linear}
.slide.is-active .slide__bg{transform:scale(1)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,30,30,.45) 0%,rgba(30,30,30,.15) 45%,rgba(30,30,30,.55) 100%)}
.slide__content{position:relative;z-index:2;padding:0 24px;max-width:900px}
.slide__kicker{font-family:"Reenie Beanie",cursive;font-size:clamp(32px,4vw,48px);color:#fff;opacity:0;transform:translateY(20px);transition:all .9s .4s var(--ease)}
.slide__title{font-family:"Montserrat",sans-serif;font-weight:300;font-size:clamp(34px,6vw,76px);letter-spacing:clamp(4px,1vw,14px);text-transform:uppercase;line-height:1.15;margin:.1em 0 .6em;opacity:0;transform:translateY(30px);transition:all 1s .6s var(--ease)}
.slide__title--small{font-size:clamp(28px,4.4vw,56px);letter-spacing:clamp(1px,.4vw,5px);text-transform:none}
.slide .btn{opacity:0;transition:opacity .8s 1s, background .25s, color .25s, transform .25s}
.slide.is-active .slide__kicker,.slide.is-active .slide__title{opacity:1;transform:none}
.slide.is-active .btn{opacity:1}
.hero__nav{position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:54px;height:54px;border:0;background:rgba(195,159,118,.85);color:#fff;cursor:pointer;border-radius:var(--radius);font-size:22px;transition:background .25s}
.hero__nav:hover{background:var(--sand-dark)}
.hero__nav--prev{left:24px}.hero__nav--next{right:24px}
.hero__dots{position:absolute;z-index:5;bottom:42px;left:50%;transform:translateX(-50%);display:flex;gap:12px}
.hero__dots button{width:34px;height:3px;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .3s}
.hero__dots button.is-active{background:var(--sand)}
.scroll-hint{position:absolute;z-index:5;bottom:36px;right:40px;color:rgba(255,255,255,.8);font-family:"Montserrat";font-size:11px;letter-spacing:3px;text-transform:uppercase;writing-mode:vertical-rl}
.scroll-hint::after{content:"";display:block;width:1px;height:50px;background:rgba(255,255,255,.6);margin:12px auto 0;animation:scrollLine 2s infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Mein Weg: Feature-Reihen ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:90px}
.feature:nth-child(even) .feature__img{order:2}
.feature__img{position:relative}
.feature__img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.feature__img::before{content:"";position:absolute;inset:24px -24px -24px 24px;border:1px solid var(--stone);border-radius:var(--radius);z-index:-1}
.feature:nth-child(even) .feature__img::before{inset:24px 24px -24px -24px}
.feature__num{font-family:"Montserrat";font-size:13px;letter-spacing:3px;color:var(--sand);font-weight:500;display:block;margin-bottom:6px}

/* ---------- Parallax-Bänder ---------- */
.band{position:relative;color:#fff;background-size:cover;background-position:center;background-attachment:fixed}
.band::before{content:"";position:absolute;inset:0;background:rgba(42,42,43,.72)}
.band>*{position:relative}
.band .h1{color:#fff}
.band .lead{color:rgba(255,255,255,.75)}
.band p{color:rgba(255,255,255,.88)}
.band strong{color:var(--sand)}

/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:50px}
.service{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:34px 30px;transition:transform .35s var(--ease),background .35s,border-color .35s}
.service:hover{transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(195,159,118,.6)}
.service__icon{width:46px;height:46px;color:var(--sand);margin-bottom:16px}
.service h3{font-family:"Montserrat";font-weight:500;font-size:19px;letter-spacing:.5px;color:#fff;margin:0 0 .6em}
.service p{font-size:15.5px;margin:0;color:rgba(255,255,255,.78)}

/* ---------- Raum für Raum ---------- */
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:60px}
.room{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.02);transition:transform .4s var(--ease),box-shadow .4s;display:grid;grid-template-columns:40% 1fr}
.room:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.room__img{min-height:100%;aspect-ratio:auto;overflow:hidden;position:relative}
.room__img img{position:absolute;inset:0}
.room .room__body{text-align:left;align-self:center}
@media (max-width:960px){.rooms{grid-template-columns:1fr}}
@media (max-width:520px){.room{grid-template-columns:1fr}.room__img{aspect-ratio:16/10}}
.room__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.room:hover .room__img img{transform:scale(1.07)}
.room__no{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.92);color:var(--slate);font-family:"Montserrat";font-size:12px;letter-spacing:2px;padding:4px 10px;border-radius:2px}
.room__body{padding:24px 26px 28px;text-align:center;flex:1}
.room__body .script{font-size:38px}
.room__body p{font-size:15.5px;margin:0}

/* ---------- Projekte ---------- */
.banner{padding:150px 0 130px;text-align:center}
.gallery{columns:4 240px;column-gap:14px;margin-top:-60px;position:relative;z-index:2}
.gallery a{display:block;margin-bottom:14px;break-inside:avoid;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--stone)}
.gallery img{width:100%;height:auto;transition:transform .8s var(--ease),filter .4s}
.gallery a::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:300 46px "Montserrat";background:rgba(195,159,118,.55);opacity:0;transition:opacity .35s}
.gallery a:hover img{transform:scale(1.06)}
.gallery a:hover::after{opacity:1}

.projects{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:90px}
.list{list-style:none;padding:0;margin:0}
.list li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid #e6e1db;font-size:16px}
.list li::before{content:"";position:absolute;left:4px;top:23px;width:10px;height:1px;background:var(--sand)}

.coops{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.coop{background:#fff;border-top:3px solid var(--sand);border-radius:var(--radius);padding:32px 30px;box-shadow:0 10px 30px -20px rgba(0,0,0,.25)}
.coop h3{font-family:"Montserrat";font-weight:500;font-size:17px;color:var(--slate);margin:0 0 .7em;letter-spacing:.5px}
.coop p{font-size:15.5px;margin:0}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.about__img{position:relative}
.about__img img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);filter:grayscale(.15)}
.about__img::after{content:"";position:absolute;width:55%;height:55%;right:-28px;bottom:-28px;background:var(--cream);z-index:-1;border-radius:var(--radius)}
.signature{max-width:240px;margin:6px 0 24px;opacity:.85}
.quals{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.quals span{font-family:"Montserrat";font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);border:1px solid var(--stone);padding:7px 14px;border-radius:30px}

/* ---------- Kontakt ---------- */
.contact{padding:130px 0}
.contact__card{background:rgba(255,255,255,.94);color:var(--text);max-width:620px;margin:0 auto;padding:60px 50px;border-radius:var(--radius);text-align:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.contact__card .logo-grey{height:52px;width:auto;margin:0 auto 26px}
.contact__card address{font-style:normal;font-size:17px;line-height:1.9;margin-bottom:30px}
.contact__card address .name{font-family:"Montserrat";font-weight:500;color:var(--slate);letter-spacing:1px;font-size:19px}
.contact__links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.contact__links .btn--line{background:transparent;color:var(--slate);border-color:var(--stone)}
.contact__links .btn--line:hover{background:var(--slate);color:#fff;border-color:var(--slate)}
.contact__card .btn svg{width:16px;height:16px}

/* ---------- Footer ---------- */
.footer{background:var(--darker);color:rgba(255,255,255,.6);font-size:14px;padding:30px 0}
.footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer a{color:rgba(255,255,255,.75)}
.footer a:hover{color:var(--sand)}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--sand);color:#fff;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:90;font-size:18px}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(20,20,20,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;padding:14px;opacity:.8}
.lightbox button:hover{opacity:1;color:var(--sand)}
.lb-close{top:14px;right:20px}.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font:13px "Montserrat";letter-spacing:2px}

/* ---------- Animation beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .band{background-attachment:scroll}
  .about{gap:50px}
  .coops{grid-template-columns:1fr}
}
@media (max-width:900px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:rgba(42,42,43,.98);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
  .nav ul{flex-direction:column;align-items:center;gap:26px}
  .nav a{font-size:17px}
  .nav-open .nav{opacity:1;pointer-events:auto}
  .burger{z-index:110}
  .feature,.projects,.about{grid-template-columns:1fr;gap:40px}
  .feature{margin-top:70px}
  .feature:nth-child(even) .feature__img{order:0}
  .feature__img::before{display:none}
  .about__img{max-width:420px}
  .about__img::after{right:-12px;bottom:-12px}
  .scroll-hint{display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .section{padding:80px 0}
  .container{padding:0 16px}
  .hero__nav{display:none}
  .logo img{height:38px}
  .contact__card{padding:44px 24px}
  .gallery{columns:2 140px;column-gap:10px}
  .gallery a{margin-bottom:10px}
  .footer .container{flex-direction:column;text-align:center}
  .about__img::after{display:none}
}