/* küchen haus winter — warmer, moderner Hausstil
   Ziel: hochwertig, zeitlos, aber familiär und lebendig statt "corporate". */

:root{
  --cream:        #faf6f0;
  --cream-alt:    #f2ebe0;
  --paper:        #fffdfa;
  --charcoal:     #2c2620;
  --charcoal-2:   #3a332b;
  --ink:          #3d372f;
  --ink-soft:     #6b6055;
  --terracotta:   #ac7452;
  --terracotta-2: #8a5b3d;
  --gold:         #c9a173;
  --border:       rgba(44,38,32,0.1);
  --max: 1180px;
  --font-serif: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--terracotta-2); text-decoration: none; }
a:hover{ color: var(--terracotta); }

h1, h2, h3, h4{
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  color: var(--charcoal);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.2px;
}
h1{ font-size: clamp(2.2rem, 4vw, 3.1rem); font-weight: 500; }
h2{ font-size: clamp(1.7rem, 3vw, 2.2rem); }
h3{ font-size: 1.5rem; }
h4{ font-size: 1.15rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; color: var(--ink); }

.kicker{
  display: inline-block;
  font-size: .78rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--terracotta-2);
  font-weight: 600;
  margin-bottom: .8em;
}

.underline{ position: relative; }
.underline::after{
  content:"";
  display:block;
  width: 54px; height: 2px;
  background: var(--gold);
  margin: .5em auto 0;
}
.text-left .underline::after{ margin: .5em 0 0; }

.container{ width: 90%; max-width: var(--max); margin: 0 auto; }
.container--wide{ max-width: 1500px; }
.section{ padding: 6.5rem 0; position: relative; }
.section--tight{ padding: 4rem 0; }
.section--cream-alt{ background: var(--cream-alt); }
.section--paper{ background: var(--paper); }
.section--dark{
  background: linear-gradient(155deg, var(--charcoal), var(--charcoal-2));
  color: #eee3d6;
}
.section--dark h1, .section--dark h2, .section--dark h3{ color: #fbf3e9; }
.section--dark .kicker{ color: var(--gold); }
.section--dark p{ color: #d8cbba; }

.section--dark-photo{ position:relative; background-size:cover; background-position:center; overflow:hidden; }
.section--dark-photo::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(155deg, rgba(44,38,32,.90), rgba(58,51,43,.85));
}
.section--dark-photo .container{ position:relative; z-index:1; }

/* ---------- Building showcase (vollflächiges Gebäudefoto, Text in eigenem Feld rechts) ---------- */
.building-showcase{ position:relative; width:100%; aspect-ratio: 16/9; }
.building-showcase__image{
  position:absolute; inset:0; overflow:hidden;
  background-size:cover; background-position:center;
}
.building-showcase__panel{
  position:absolute; top:50%; right:4%; transform:translateY(-50%);
  width:38%; max-width:520px; max-height:88%; overflow:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding: 5% 7%;
}
.building-showcase__panel .kicker{ color: var(--gold); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.building-showcase__panel h2{ color:#fff; text-shadow: 0 4px 26px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.6); }
.building-showcase__panel p{ color:#f5f0e8; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.55); }
.building-showcase__panel .btn--ghost{ color:#fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.55); }

/* Gestaffelte Einblendung des Textes beim Einscrollen */
.building-showcase__panel .kicker,
.building-showcase__panel h2,
.building-showcase__panel p{
  opacity:0; transform: translateY(16px); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.building-showcase__panel p:nth-of-type(1){ transition-delay: .25s; }
.building-showcase__panel p:nth-of-type(2){ transition-delay: .4s; }
.building-showcase__panel p:nth-of-type(3){ transition-delay: .55s; }
.building-showcase.is-visible .building-showcase__panel .kicker{ transition-delay: .05s; }
.building-showcase.is-visible .building-showcase__panel h2{ transition-delay: .15s; }
.building-showcase.is-visible .building-showcase__panel .kicker,
.building-showcase.is-visible .building-showcase__panel h2,
.building-showcase.is-visible .building-showcase__panel p{
  opacity:1; transform:none; filter:blur(0);
}
@media (max-width:1300px){
  .building-showcase{ aspect-ratio:auto; }
  .building-showcase__image{ position:static; aspect-ratio: 16/9; }
  .building-showcase__panel{
    position:static; width:auto; max-width:none; max-height:none; transform:none; display:block;
    padding: 28px 6vw 0;
  }
  .building-showcase__panel .kicker{ color: var(--terracotta-2); text-shadow:none; }
  .building-showcase__panel h2{ color: var(--charcoal); text-shadow:none; }
  .building-showcase__panel p{ color: var(--ink); text-shadow:none; }
  .building-showcase__panel .btn--ghost{ color: var(--terracotta-2) !important; text-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  .building-showcase__panel .kicker,
  .building-showcase__panel h2,
  .building-showcase__panel p{
    opacity:1; transform:none; filter:blur(0); transition:none;
  }
}

.text-center{ text-align: center; }
.lead{ font-size: 1.15rem; color: var(--ink-soft); }
.small{ font-size: .85rem; color: var(--ink-soft); }
.max-prose{ max-width: 700px; margin-left: auto; margin-right: auto; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal="fade"]{ transform: none; }

/* ---------- Header ---------- */
#site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 22px 0;
  background: transparent;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
#site-header.is-solid{
  background: rgba(44,38,32,0.96);
  padding: 12px 0;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
.header-inner{
  width: 90%; max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.logo{ display: flex; align-items: center; }
.logo img{ height: 44px; width: auto; display:block; transition: transform .3s var(--ease); }
.logo:hover img{ transform: scale(1.03); }
.logo-text{
  margin-left: 14px; font-family: var(--font-serif); font-size: 1.15rem;
  color: #fff; letter-spacing: .3px; white-space: nowrap;
}
@media (max-width:880px){ .logo img{ height: 36px; } }
@media (max-width:600px){ .logo-text{ display:none; } }

nav#main-nav ul{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
nav#main-nav a{
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  letter-spacing: .5px;
  padding: 4px 0;
  position: relative;
}
nav#main-nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background: var(--gold); transition: width .3s var(--ease);
}
nav#main-nav a:hover, nav#main-nav a.active{ color:#fff; }
nav#main-nav a:hover::after, nav#main-nav a.active::after{ width:100%; }

.nav-toggle{
  display:none; background:none; border:none; font-size:1.5rem; color:#fff; cursor:pointer;
  touch-action: manipulation;
}
nav#main-nav a{ touch-action: manipulation; }
@media (max-width: 880px){
  #site-header{ background: rgba(44,38,32,0.96); padding:14px 0; }
  nav#main-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: rgba(44,38,32,0.98); border-top: 1px solid rgba(255,255,255,.1);
  }
  nav#main-nav.open{ display:block; }
  nav#main-nav ul{ flex-direction:column; gap:0; padding: 10px 6%; }
  nav#main-nav li{ border-bottom: 1px solid rgba(255,255,255,.07); }
  nav#main-nav a{ display:block; padding: 14px 0; }
  .nav-toggle{ display:block; }
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items:center; gap:8px;
  padding: 13px 28px;
  background: var(--terracotta);
  color: #fff !important;
  border-radius: 999px;
  font-size: .92rem; font-weight: 600; letter-spacing:.3px;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow: 0 6px 18px rgba(138,91,61,.25);
  border: none; cursor: pointer; font-family: var(--font-sans);
}
.btn:hover{ background: var(--terracotta-2); transform: translateY(-2px); color:#fff !important; box-shadow: 0 10px 22px rgba(138,91,61,.32); }
.btn--outline{ background: transparent; border: 1.5px solid rgba(255,255,255,.7); color:#fff !important; box-shadow:none; }
.btn--outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
.btn--ghost{ background: transparent; color: var(--terracotta-2) !important; box-shadow:none; padding-left:0; padding-right:0; }
.btn--ghost:hover{ transform: translateX(4px); background:none; }

/* ---------- Hero slider ---------- */
.hero{
  position: relative; height: 94vh; min-height: 560px;
  overflow: hidden; color:#fff; display:flex; align-items:center; justify-content:center;
}
.hero-slide{
  position:absolute; inset:0; opacity:0;
  background-size: cover; background-position: center;
  transition: opacity .9s ease;
}
.hero-slide.is-active{ opacity:1; animation: kenburns 7s ease-out forwards; }
@keyframes kenburns{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  animation: kenburns 12s ease-out forwards;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(20,16,12,.45) 0%, rgba(20,16,12,.25) 45%, rgba(20,16,12,.75) 100%);
}
.hero--photo::before{
  background: linear-gradient(180deg, rgba(20,16,12,.32) 0%, rgba(20,16,12,.18) 50%, rgba(20,16,12,.5) 100%);
}
.hero-content{ position:relative; z-index:2; text-align:center; max-width: 760px; padding: 0 20px; }
.hero-content .kicker{
  color: var(--gold);
  background: rgba(20,16,12,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 18px;
  border-radius: 999px;
}
.hero-content h1{ color:#fff; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.hero-content p{ font-size:1.15rem; color:#f1e8dc; max-width:560px; margin:0 auto 1.6em; }

.hero-dots{
  position:absolute; z-index:3; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero-dots button{
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background: rgba(255,255,255,.4); cursor:pointer; transition: all .3s var(--ease);
}
.hero-dots button.is-active{ background:#fff; width:22px; border-radius:5px; }

.hero-scroll-cue{
  position:absolute; z-index:3; bottom:26px; right:32px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: rgba(255,255,255,.75); font-size:.7rem; letter-spacing:2px; text-transform:uppercase;
}
.hero-scroll-cue span{ width:1px; height:30px; background: rgba(255,255,255,.5); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

.hero--small{ height: 46vh; min-height: 320px; }

/* ---------- Startseite: Bild zuerst einblenden, dann Schriftzug ---------- */
.hero-reveal{
  position:absolute; inset:0; z-index:1;
  background: var(--charcoal-2);
  animation: heroRevealOut 1.8s ease-out forwards;
  pointer-events:none;
}
@keyframes heroRevealOut{
  from{ opacity:1; }
  to{ opacity:0; }
}
.hero-slider .hero-content{ opacity:1; }
.hero-slider .hero-content .kicker,
.hero-slider .hero-content h1{
  opacity:0;
  animation: heroTextIn .7s ease-out .9s forwards;
}
.hero-slider .hero-content p,
.hero-slider .hero-content .btn{
  opacity:0;
  animation: heroTextIn .7s ease-out 1.3s forwards;
}
@keyframes heroTextIn{
  from{ opacity:0; transform: translateY(14px); filter: blur(6px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}
body.home #site-header .logo{
  opacity:0;
  animation: heroTextIn .6s ease-out 1.3s forwards;
}
body.home #site-header nav#main-nav{
  opacity:0;
  animation: heroTextIn .6s ease-out 1.7s forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero-reveal{ animation:none; opacity:0; }
  .hero-slider .hero-content .kicker,
  .hero-slider .hero-content h1,
  .hero-slider .hero-content p,
  .hero-slider .hero-content .btn,
  body.home #site-header .logo,
  body.home #site-header nav#main-nav{
    animation:none; opacity:1; transform:none; filter:none;
  }
}
@media (max-width:880px){
  /* Hamburger-Button muss auf Mobilgeräten sofort sichtbar/bedienbar sein */
  body.home #site-header nav#main-nav{ animation:none; opacity:1; }
}

@media (max-width:700px){
  .hero{ height:100vh; height:100dvh; }
  .hero--small{ height:58vh; height:58dvh; min-height:340px; }
}

/* ---------- Photo placeholders (bis echte Fotos eingesetzt sind) ---------- */
.ph{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/5;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.18), transparent 60%), var(--ph-grad, linear-gradient(135deg,#cbb4a0,#8a6a53));
}
.ph svg{ width: 15%; max-width:52px; color: rgba(255,255,255,.75); }
.ph--wide{ aspect-ratio: 16/10; }
.ph--square{ aspect-ratio: 1/1; }
figure{ margin:0; }
figcaption{ font-size:.78rem; color: var(--ink-soft); font-style: italic; margin-top:.6em; }

/* ---------- Cards (Teaser-Kacheln) ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:34px; }
.card{ display:block; }
.card .ph{
  box-shadow: 0 18px 40px rgba(44,38,32,.16), 0 4px 12px rgba(44,38,32,.08);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover .ph{
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 30px 60px rgba(44,38,32,.22), 0 10px 20px rgba(44,38,32,.12);
}
.card-caption{
  margin-top:16px; display:flex; align-items:center; gap:8px;
  font-family: var(--font-serif); font-size:1.2rem; color: var(--charcoal);
  transition: color .25s var(--ease);
}
.card:hover .card-caption{ color: var(--terracotta-2); }
.card-caption .arrow{ transition: transform .3s var(--ease); }
.card:hover .card-caption .arrow{ transform: translateX(6px); }

@media (max-width:900px){ .card-grid{ grid-template-columns:1fr; } }

/* ---------- Generic grid ---------- */
.grid{ display:grid; gap:40px; }
.grid--2{ grid-template-columns: 1fr 1fr; align-items:center; }
.grid--4{ grid-template-columns: repeat(4,1fr); }
.grid--6{ grid-template-columns: repeat(6,1fr); align-items:center; }
@media (max-width:900px){
  .grid--2{ grid-template-columns:1fr; }
  .grid--4{ grid-template-columns: repeat(2,1fr); }
  .grid--6{ grid-template-columns: repeat(3,1fr); }
}

/* ---------- Quote block ---------- */
.quote-block{ position:relative; max-width:760px; margin:0 auto; text-align:center; padding: 0 20px; }
.quote-block .mark{
  font-family: var(--font-serif); font-size:5rem; line-height:0; color: var(--gold);
  display:block; margin-bottom:.2em; opacity:.7;
}
.quote-block p{ font-family: var(--font-serif); font-size:1.4rem; font-style:italic; color: var(--charcoal); line-height:1.5; }
.section--dark .quote-block p{ color:#f5ead9; }
.quote-block cite{ display:block; margin-top:1.2em; font-style:normal; font-size:.85rem; letter-spacing:1px; text-transform:uppercase; color: var(--terracotta-2); }

/* ---------- Stat band ---------- */
.stats{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:40px; text-align:center; }
.stat svg{ width:30px; height:30px; color: var(--gold); margin-bottom:10px; }
.stat .num{ font-family: var(--font-serif); font-size:2.6rem; color:#fbf3e9; }
.stat .num::after{ content:"+"; color: var(--gold); }
.stat .label{ font-size:.85rem; letter-spacing:.5px; color:#d8cbba; margin-top:2px; }

/* ---------- Reviews (static cards) ---------- */
.reviews{ display:flex; flex-direction:column; gap:24px; max-width:960px; margin:0 auto; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{
  background: var(--paper); border:1px solid var(--border); border-radius:10px;
  padding:34px 32px; text-align:center; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.review-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(44,38,32,.08); }
.review-card .stars{ color: var(--gold); letter-spacing:3px; font-size:.9rem; }
.review-card .rule{ width:56px; height:1px; background: var(--border); margin:16px auto; }
.review-card p{ font-family: var(--font-serif); font-size:1.05rem; font-style:italic; color: var(--charcoal); line-height:1.6; }
.review-card cite{ display:block; margin-top:14px; font-style:normal; font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color: var(--terracotta-2); }
.review-featured p{ font-size:1.15rem; }
@media (max-width:900px){ .review-grid{ grid-template-columns:1fr; } }

/* ---------- Brand strip ---------- */
.brand-logo{
  text-align:center; font-family: var(--font-serif); font-size:1.1rem; color: var(--ink-soft);
  filter: grayscale(1); opacity:.55; transition: all .3s var(--ease);
}
.brand-logo:hover{ filter:grayscale(0); opacity:1; color: var(--terracotta-2); transform: translateY(-2px); }
.brand-logo img{ height:28px; width:auto; filter:inherit; opacity:inherit; transition:inherit; }

/* ---------- Brand showcase (Hersteller-Kollektionen) ---------- */
.brand-showcase{ display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows:220px; gap:16px; margin:40px 0 0; }
.brand-showcase__item{
  border-radius:12px; overflow:hidden; background-size:cover; background-position:center;
  transition: transform .5s var(--ease);
}
.brand-showcase__item:hover{ transform: scale(1.02); }
.brand-showcase__item--2col{ grid-column: span 2; }
.brand-showcase__item--2row{ grid-row: span 2; }
@media (max-width:780px){
  .brand-showcase{ grid-template-columns: repeat(2,1fr); grid-auto-rows:180px; }
}
@media (max-width:520px){
  .brand-showcase{ grid-template-columns: 1fr; }
  .brand-showcase__item--2col, .brand-showcase__item--2row{ grid-column: span 1; grid-row: span 1; }
}

.brand-banner-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:40px 0 0; }
.brand-banner-row img{ width:100%; height:auto; display:block; border-radius:12px; }
@media (max-width:600px){ .brand-banner-row{ grid-template-columns:1fr; } }

/* ---------- Cookie consent ---------- */
.cookie-consent{
  position:fixed; left:24px; right:24px; bottom:24px; z-index:9999;
  max-width:620px; margin:0 auto;
  background: linear-gradient(155deg, var(--charcoal), var(--charcoal-2));
  color:#f2ece3;
  padding:26px 30px;
  border-radius:20px;
  box-shadow: 0 30px 70px rgba(20,16,12,.4), 0 6px 20px rgba(20,16,12,.25);
  animation: cookieSlideUp .6s var(--ease) .15s both;
}
@keyframes cookieSlideUp{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .cookie-consent{ animation:none; } }
.cookie-consent__box{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px; }
.cookie-consent__box p{ flex:1 1 380px; font-size:.9rem; line-height:1.65; margin:0; color:#e7ded2; }
.cookie-consent__box p a{ color:#fff; text-decoration:underline; }
.cookie-consent__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cookie-btn{
  font-family:var(--font-sans); font-size:.85rem; font-weight:600; letter-spacing:.3px;
  padding:11px 22px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition: all .25s var(--ease); white-space:nowrap;
}
.cookie-btn--accept{ background: var(--terracotta); color:#fff; }
.cookie-btn--accept:hover{ background: var(--terracotta-2); }
.cookie-btn--reject{ background:transparent; color:#f2ece3; border-color:rgba(242,236,227,.4); }
.cookie-btn--reject:hover{ border-color:#fff; }
.cookie-btn--settings{ background:none; color:#e7ded2; text-decoration:underline; padding:11px 4px; }

.cookie-modal{
  position:fixed; inset:0; z-index:10000; background:rgba(44,38,32,.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cookie-modal[hidden]{ display:none; }
.cookie-modal__box{
  background: var(--paper); color: var(--ink); border-radius:16px; padding:32px;
  max-width:480px; width:100%; max-height:86vh; overflow-y:auto;
}
.cookie-modal__box h3{ margin-bottom:6px; }
.cookie-modal__intro{ font-size:.9rem; color: var(--ink-soft); margin-bottom:22px; }
.cookie-modal__row{
  display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-top:1px solid var(--border);
  cursor:default;
}
.cookie-modal__row input{ margin-top:4px; width:18px; height:18px; flex-shrink:0; accent-color: var(--terracotta); }
.cookie-modal__row strong{ display:block; font-size:.95rem; }
.cookie-modal__row span{ display:block; font-size:.82rem; color: var(--ink-soft); margin-top:3px; line-height:1.5; }
.cookie-modal__actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
.cookie-modal__actions .cookie-btn--reject{ color: var(--ink-soft); border-color: var(--border); }
.cookie-modal__actions .cookie-btn--reject:hover{ border-color: var(--ink-soft); }
@media (max-width:600px){
  .cookie-consent{ left:14px; right:14px; bottom:14px; padding:22px 22px; border-radius:16px; }
  .cookie-consent__box{ flex-direction:column; align-items:stretch; }
  .cookie-consent__actions{ justify-content:flex-end; }
}

/* ---------- Info / FAQ cards ---------- */
.info-card{
  background: var(--paper); padding:32px; border-radius:14px;
  border: 1px solid var(--border); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.info-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 32px rgba(44,38,32,.08); }
.info-card .icon{ display:block; margin-bottom:12px; }
.info-card .icon svg{ width:26px; height:26px; color: var(--terracotta); }

details.faq-item{
  background: var(--paper); border:1px solid var(--border); border-radius:12px;
  padding:18px 22px; margin-bottom:12px;
}
details.faq-item summary{ cursor:pointer; font-weight:600; color:var(--charcoal); list-style:none; display:flex; justify-content:space-between; align-items:center; }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{ content:"+"; color:var(--terracotta); font-size:1.3rem; transition: transform .3s var(--ease); }
details[open].faq-item summary::after{ transform: rotate(45deg); }
details.faq-item p{ margin:14px 0 0; color: var(--ink-soft); }

/* ---------- Forms ---------- */
form.contact-form{ display:grid; gap:18px; max-width:600px; }
form.contact-form label{ font-size:.85rem; font-weight:600; display:block; margin-bottom:5px; color:var(--charcoal); }
form.contact-form input, form.contact-form textarea{
  width:100%; padding:13px 16px; border:1px solid var(--border); border-radius:8px;
  font-family: var(--font-sans); font-size:.95rem; background: var(--paper);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
form.contact-form input:focus, form.contact-form textarea:focus{
  outline:none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(172,116,82,.15);
}
form.contact-form textarea{ min-height:140px; resize:vertical; }

/* ---------- Footer ---------- */
#site-footer{ background: var(--charcoal); color:#cabaa9; padding: 70px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:50px; }
.footer-grid h3{ color: var(--gold); font-family: var(--font-serif); font-size:1.05rem; font-weight:400; margin-bottom:.8em; }
.footer-grid a{ color:#cabaa9; }
.footer-grid a:hover{ color:#fff; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-brand{ display:flex; align-items:center; margin-bottom:14px; }
.footer-brand img{ height:52px; width:auto; }
.social-icons{ display:flex; gap:12px; margin-top:12px; }
.social-icons a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); color:#cabaa9;
  transition: all .25s var(--ease);
}
.social-icons a:hover{ color:#fff; border-color: var(--terracotta); background: rgba(172,116,82,.15); }
.social-icons a svg{ width:17px; height:17px; }
.footer-bottom{
  text-align:center; font-size:.8rem; color:#8f8377; margin-top:50px; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom .heart{ color: var(--terracotta); }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Floating quick-contact ---------- */
#quick-contact{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:400;
  display:flex; flex-direction:column; align-items:flex-end;
  box-shadow: -2px 0 16px rgba(0,0,0,.14);
}
#quick-contact a{
  display:flex; flex-direction:row-reverse; align-items:center;
  width:48px; height:48px; max-width:48px;
  background: var(--charcoal); color:#fff !important;
  font-size:1.05rem; white-space:nowrap;
  overflow:hidden; transition: background .25s var(--ease), max-width .3s var(--ease);
}
#quick-contact a .icon-box{ width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
#quick-contact a .icon-box svg{ width:19px; height:19px; }
#quick-contact a .label{ max-width:0; opacity:0; overflow:hidden; transition: max-width .3s var(--ease), opacity .2s var(--ease); font-size:.78rem; padding-right:0; }
#quick-contact a:hover{ background: var(--terracotta); max-width:220px; }
#quick-contact a:hover .label{ max-width:170px; opacity:1; padding-right:14px; }

#back-to-top{
  position:fixed; right:18px; bottom:18px; z-index:400;
  width:42px; height:42px; border-radius:50%;
  background: var(--paper); border:1px solid var(--border); color:var(--charcoal);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all .3s var(--ease); box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
#back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
@media (max-width:780px){ #quick-contact, #back-to-top{ display:none; } }

/* ---------- Project image slider (overview cards) ---------- */
.project-slider{ position:relative; padding:0; }
.project-slider__slide{
  position:absolute; inset:0; opacity:0; background-size:cover; background-position:center;
  transition: opacity .9s var(--ease);
}
.project-slider__slide.is-active{ opacity:1; }
.project-slider__dots{
  position:absolute; z-index:2; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px;
}
.project-slider__dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background: rgba(255,255,255,.55); cursor:pointer; transition: all .3s var(--ease);
  box-shadow: 0 0 0 1px rgba(0,0,0,.1);
}
.project-slider__dots button.is-active{ background:#fff; width:20px; border-radius:5px; }

/* ---------- Project gallery (landing pages: show every photo) ---------- */
.project-gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; margin:36px 0; }
.project-gallery__item{
  aspect-ratio: 4/3; border-radius:10px; overflow:hidden;
  background-size:cover; background-position:center;
  transition: transform .5s var(--ease);
  cursor: zoom-in;
}
.project-gallery__item:hover{ transform: scale(1.02); }
.project-gallery__item--wide{ grid-column: span 2; }
@media (max-width:780px){
  .project-gallery{ grid-template-columns: repeat(2,1fr); }
  .project-gallery__item--wide{ grid-column: span 2; }
}
@media (max-width:520px){
  .project-gallery{ grid-template-columns: 1fr; }
  .project-gallery__item--wide{ grid-column: span 1; }
}
.brand-showcase__item{ cursor: zoom-in; }

/* ---------- Project video (Video-Rundgang) ---------- */
.project-video{ display:flex; flex-direction:column; align-items:center; margin:44px auto; max-width:380px; }
.project-video__el{
  width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:14px;
  background:#111; box-shadow: 0 20px 50px rgba(0,0,0,.22);
}
.project-video__caption{ margin-top:14px; font-size:.85rem; letter-spacing:.5px; color: var(--ink-soft); text-align:center; }

/* ---------- Lightbox (Bildergalerie groß ansehen) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:20000; background:rgba(20,17,14,.94);
  display:flex; align-items:center; justify-content:center; padding:min(5vw,60px);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__figure{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; }
.lightbox__img{
  max-width:100%; max-height:80vh; border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.5); object-fit:contain;
}
.lightbox__caption{ color:#f2ece3; font-size:.9rem; margin-top:16px; text-align:center; max-width:70ch; }
.lightbox__close, .lightbox__prev, .lightbox__next{
  position:fixed; background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .2s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.lightbox__close{ top:24px; right:24px; }
.lightbox__prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox__close svg, .lightbox__prev svg, .lightbox__next svg{ width:20px; height:20px; }
@media (max-width:600px){
  .lightbox__prev, .lightbox__next{ width:40px; height:40px; }
  .lightbox__close{ top:14px; right:14px; width:40px; height:40px; }
  .lightbox__prev{ left:10px; } .lightbox__next{ right:10px; }
}

/* ---------- Project facts ---------- */
.facts{
  display:flex; flex-wrap:wrap; gap:18px 40px; margin:32px 0;
  padding:24px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.facts div strong{
  display:block; font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--terracotta); font-weight:600; margin-bottom:4px;
}
.facts div span{ font-size:.95rem; color:var(--ink); }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }