/* =================================================================
   KÜCHEN ROSSEL — Apple-inspired premium stylesheet
   Inspired by rossel-alusysteme.de design language.
   ================================================================= */

/* -------------------- TOKENS -------------------- */
:root{
  --c-bg:        #ffffff;
  --c-bg-alt:    #f5f5f7;
  --c-bg-dark:   #0a0a0a;
  --c-text:      #0a0a0a;
  --c-text-soft: #1d1d1f;
  --c-muted:     #6e6e73;
  --c-muted-2:   #86868b;
  --c-border:    #d2d2d7;
  --c-border-soft:#e8e8ed;
  --c-accent:    #0a0a0a;
  --c-accent-2:  #b8975f;
  --c-accent-glass: rgba(10,10,10,.04);

  /* legacy aliases — kept so any inherited rule still resolves */
  --ink:      #0a0a0a;
  --ink-2:    #1d1d1f;
  --ink-3:    #6e6e73;
  --paper:    #ffffff;
  --paper-2:  #f5f5f7;
  --paper-3:  #ebebef;
  --walnut:   #b8975f;
  --walnut-dk:#0a0a0a;
  --copper:   #b8975f;
  --line:     #d2d2d7;
  --line-soft:#e8e8ed;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --radius:    14px;
  --radius-lg: 22px;

  --shadow-sm: 0 2px 12px rgba(10,10,10,.04);
  --shadow-md: 0 12px 40px -12px rgba(10,10,10,.12);
  --shadow-lg: 0 30px 80px -30px rgba(10,10,10,.25);
  --shadow-1:  var(--shadow-sm);
  --shadow-2:  var(--shadow-md);

  --maxw:   1200px;
  --pad-x:  clamp(20px, 4vw, 48px);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans:  var(--font-sans);
  --serif: var(--font-sans); /* serif aliased to sans — Inter only */

  --t-fast:  .25s cubic-bezier(.4,0,.2,1);
  --t-med:   .5s cubic-bezier(.4,0,.2,1);
  --t-slow:  .9s cubic-bezier(.16,1,.3,1);
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-slow: cubic-bezier(.16,1,.3,1);
}

/* -------------------- RESET -------------------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
body{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.55;
  color:var(--c-text);
  background:var(--c-bg);
  letter-spacing:-.011em;
  font-feature-settings:'ss01','cv11';
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul,ol{ list-style:none; padding:0; margin:0 }
p{ margin:0 0 1rem 0 }
input,select,textarea{ font:inherit; color:inherit }
::selection{ background:#0a0a0a; color:#fff }

/* -------------------- LAYOUT -------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad-x);
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px, 6vw, 80px);
  align-items:start;
}
.grid-2--center{ align-items:center }
@media (max-width: 820px){
  .grid-2{ grid-template-columns:1fr }
}

/* Generic section head — left aligned, like Alu */
.section-head{
  max-width:760px;
  margin:0 0 clamp(40px, 5vw, 72px);
  text-align:left;
}
.section-head .lead{ margin-left:0; margin-right:0 }

/* -------------------- TYPOGRAPHY -------------------- */
.h2{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(32px, 4.6vw, 56px);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 18px;
  color:var(--c-text);
}
.h2 em{
  font-style:normal;
  font-weight:600;
  color:var(--c-accent-2);
}
.lead{
  font-size:clamp(17px, 1.4vw, 20px);
  line-height:1.55;
  color:var(--c-muted);
  max-width:64ch;
  margin:0 0 24px;
  letter-spacing:-.005em;
}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:18px;
}

/* -------------------- BUTTONS -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-weight:500;
  font-size:15px;
  letter-spacing:-.005em;
  line-height:1;
  border:1px solid transparent;
  transition:transform var(--t-fast), background var(--t-fast),
             color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn--primary{
  background:#0a0a0a;
  color:#fff;
  box-shadow:0 6px 22px -8px rgba(10,10,10,.5);
}
.btn--primary:hover{
  background:#1d1d1f;
  box-shadow:0 10px 28px -8px rgba(10,10,10,.55);
}
.btn--ghost{
  background:transparent;
  color:var(--c-text);
  border-color:var(--c-border);
}
.btn--ghost:hover{ background:var(--c-accent-glass); border-color:#0a0a0a }

.btn--lg{ padding:17px 30px; font-size:16px }
.btn--block{ display:flex; width:100% }
.btn--nav{ padding:10px 18px; font-size:14px }

/* -------------------- ANNOUNCE BAR -------------------- */
.announce{
  background:#0a0a0a;
  color:#fff;
  font-size:13px;
  letter-spacing:.005em;
  position:relative;
  z-index:60;
}
.announce__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px var(--pad-x);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.pulse{
  width:7px;height:7px;
  border-radius:999px;
  background:#25a162;
  box-shadow:0 0 0 0 rgba(37,161,98,.7);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,161,98,.6) }
  70%{ box-shadow:0 0 0 10px rgba(37,161,98,0) }
  100%{ box-shadow:0 0 0 0 rgba(37,161,98,0) }
}
.announce__link{
  margin-left:6px;
  color:#fff;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color var(--t-fast);
}
.announce__link:hover{ color:var(--c-accent-2) }

/* -------------------- NAVIGATION -------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.nav.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--c-border-soft);
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad-x);
  display:flex;
  align-items:center;
  gap:24px;
  height:68px;
}

.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--c-text);
  font-weight:500;
  letter-spacing:-.01em;
}
.logo__mark{
  width:32px;height:32px;
  flex-shrink:0;
  color:var(--c-text);
}
.logo__text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.logo__name{
  font-size:16px;
  font-weight:600;
  color:var(--c-text);
  letter-spacing:-.01em;
}
.logo__tag{
  font-size:12px;
  color:var(--c-muted);
  letter-spacing:.03em;
  text-transform:none;
  font-weight:400;
}

.nav__links{
  display:flex;
  gap:28px;
  align-items:center;
  margin-left:auto;
  font-size:14.5px;
}
.nav__links a{
  position:relative;
  color:var(--c-text-soft);
  font-weight:500;
  padding:6px 0;
  transition:color var(--t-fast);
}
.nav__links a:hover{ color:var(--c-muted) }
.nav__links a::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-fast);
}
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__toggle{
  display:none;
  width:40px;
  height:40px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-right:-8px;
}
.nav__toggle span{
  display:block;
  width:22px;
  height:1.5px;
  background:#0a0a0a;
  transition:transform var(--t-fast), opacity var(--t-fast);
}
.nav.open .nav__toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.nav.open .nav__toggle span:nth-child(2){ opacity:0 }
.nav.open .nav__toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

@media (max-width: 980px){
  .nav__links{ gap:20px; font-size:14px }
}
@media (max-width: 880px){
  .btn--nav span{ display:none }
  .btn--nav{ padding:10px }
}
@media (max-width: 760px){
  .nav__links{
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    gap:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid var(--c-border-soft);
    padding:14px var(--pad-x) 24px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    margin-left:0;
  }
  .nav.open .nav__links{ opacity:1; visibility:visible; transform:translateY(0) }
  .nav__links a{
    padding:14px 4px;
    border-bottom:1px solid var(--c-border-soft);
    font-size:17px;
  }
  .nav__toggle{ display:flex; margin-left:auto }
  .btn--nav{ display:none }
}

/* -------------------- HERO -------------------- */
.hero{
  position:relative;
  min-height:min(92vh, 880px);
  padding:clamp(120px, 14vw, 180px) 0 clamp(80px, 10vw, 120px);
  overflow:hidden;
  color:#fff;
  isolation:isolate;
  display:flex;
  align-items:center;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; background:#0a0a0a }
.hero__img{
  position:absolute;
  inset:0;
  background-image:url("assets/projects/01.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(.92) contrast(1.02);
  animation:slowZoom 22s ease-out forwards;
}
@keyframes slowZoom{
  from{ transform:scale(1.06) }
  to  { transform:scale(1) }
}
.hero__grain{ display:none }
.hero__vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(20,20,22,.55) 0%, rgba(10,10,10,.78) 70%),
    linear-gradient(180deg, rgba(10,10,10,.45) 0%, rgba(5,5,5,.78) 100%);
  pointer-events:none;
}
.hero__vignette::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(184,151,95,.16), transparent 70%),
    radial-gradient(50% 35% at 10% 90%, rgba(255,255,255,.04), transparent 70%);
  pointer-events:none;
}

.hero__inner{
  max-width:var(--maxw);
  width:100%;
  margin:0 auto;
  padding:0 var(--pad-x);
  position:relative;
  animation:heroFade 1s var(--t-slow) both;
}
@keyframes heroFade{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:translateY(0) }
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 8px 12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  margin-bottom:28px;
  text-transform:none;
}
.hero__eyebrow .line{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-accent-2);
  box-shadow:0 0 12px rgba(184,151,95,.7);
}

.hero__title{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(44px, 7.6vw, 96px);
  line-height:.98;
  letter-spacing:-.034em;
  margin:0 0 28px;
  max-width:18ch;
  color:#fff;
}
.hero__title em{
  font-style:normal;
  background:linear-gradient(135deg, #ffffff 0%, #d8d8de 50%, #b8975f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  padding-right:.04em;
  font-weight:600;
}
.hero__title .under{
  position:relative;
  display:inline-block;
}
.hero__title .under::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.05em;
  height:2px;
  background:var(--c-accent-2);
  opacity:.85;
  animation:under 1.4s .6s var(--t-slow) both;
  transform-origin:left;
  border-radius:1px;
}
@keyframes under{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

.hero__lead{
  font-size:clamp(17px, 1.4vw, 20px);
  color:rgba(255,255,255,.72);
  max-width:60ch;
  margin:0 0 40px;
  line-height:1.5;
  letter-spacing:-.005em;
}
.hero__cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:clamp(40px, 6vw, 64px);
}
.hero__cta .btn--primary{
  background:#fff;
  color:#0a0a0a;
  box-shadow:0 6px 22px -10px rgba(0,0,0,.6);
}
.hero__cta .btn--primary:hover{ background:#f5f5f7 }
.hero__cta .btn--ghost{
  color:#fff;
  border-color:rgba(255,255,255,.3);
}
.hero__cta .btn--ghost:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.7);
}

.hero__stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  max-width:720px;
  margin:0;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__stats div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.hero__stats dt{
  font-size:13px;
  color:rgba(255,255,255,.6);
  letter-spacing:0;
  text-transform:none;
  order:2;
}
.hero__stats dd{
  margin:0;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1;
  color:#fff;
  letter-spacing:-.02em;
  order:1;
}
.hero__stats .star{
  color:var(--c-accent-2);
  font-size:.85em;
  margin-left:.15em;
}
@media (max-width:680px){
  .hero__stats{ grid-template-columns:repeat(2,1fr); gap:20px }
}

.hero__scroll{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.55);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  animation:float 2.5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform:translate(-50%, 0) }
  50%   { transform:translate(-50%, 6px) }
}

/* -------------------- MARQUEE -------------------- */
.marquee{
  background:var(--c-bg);
  border-top:1px solid var(--c-border-soft);
  border-bottom:1px solid var(--c-border-soft);
  overflow:hidden;
  padding:18px 0;
}
.marquee__track{
  display:flex;
  gap:32px;
  white-space:nowrap;
  animation:marquee 45s linear infinite;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:16px;
  color:var(--c-muted-2);
  letter-spacing:-.005em;
}
.marquee__track span{ flex-shrink:0; opacity:.85 }
@keyframes marquee{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}

/* -------------------- PHILOSOPHY -------------------- */
.philosophy{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg);
}
.philosophy__text{ padding-right:0 }
.philosophy__text .lead{ margin-bottom:16px }
.philosophy__text p{
  color:var(--c-muted);
  font-size:16.5px;
  line-height:1.6;
}

.checks{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.checks li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  color:var(--c-text-soft);
  font-size:15.5px;
  line-height:1.5;
}
.check{
  flex-shrink:0;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#0a0a0a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  margin-top:2px;
}

.philosophy__visual{
  position:relative;
  aspect-ratio:4/5;
}
.frame{
  border-radius:var(--r-2xl);
  overflow:hidden;
  position:absolute;
}
.frame--main{
  inset:0 12% 12% 0;
  background-image:url("assets/projects/02.jpg");
  background-size:cover;
  background-position:center;
  box-shadow:var(--shadow-md);
}
.frame--accent{
  inset:32% 0 0 32%;
  background-image:url("assets/projects/06.jpg");
  background-size:cover;
  background-position:center 45%;
  border:6px solid #fff;
  box-shadow:var(--shadow-sm);
}

.badge-round{
  position:absolute;
  top:-18px; right:-8px;
  width:104px; height:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#0a0a0a;
  border-radius:999px;
  box-shadow:var(--shadow-md);
}
.badge-round svg{ display:none }
.badge-round__core{
  position:static;
  font-family:var(--font-sans);
  font-size:11px;
  line-height:1.2;
  text-align:center;
  letter-spacing:.06em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
}
.badge-round__core strong{
  display:block;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  color:#fff;
  margin-top:2px;
  text-transform:none;
}

/* -------------------- COLLECTION -------------------- */
.collection{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg-alt);
}
.collection .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.collection .section-head .lead{ margin-left:auto; margin-right:auto }

.collection__filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-bottom:40px;
}
.chip{
  padding:9px 18px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--c-border-soft);
  font-size:14px;
  font-weight:500;
  color:var(--c-text-soft);
  cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), transform var(--t-fast);
}
.chip:hover{ background:#ebebef }
.chip.active{
  background:#0a0a0a;
  color:#fff;
  border-color:#0a0a0a;
}
.chip.active:hover{ background:#1d1d1f }

.collection__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:900px){ .collection__grid{ grid-template-columns:repeat(2,1fr); gap:18px } }
@media (max-width:620px){ .collection__grid{ grid-template-columns:1fr } }

.card{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:#0a0a0a;
  color:#fff;
  height:var(--h, 440px);
  border:1px solid transparent;
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  cursor:pointer;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.card__img{
  position:absolute;
  inset:0;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.card:hover .card__img{ transform:scale(1.04) }
.card__img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.78) 100%);
}
.card__img--1{ background:url("assets/projects/01.jpg") center/cover }
.card__img--2{ background:url("assets/projects/06.jpg") center 45%/cover }
.card__img--3{ background:url("assets/projects/03.jpg") center/cover }
.card__img--4{ background:url("assets/projects/04.jpg") center/cover }
.card__img--5{ background:url("assets/projects/05.jpg") center/cover }
.card__img--6{ background:url("assets/projects/07.jpg") center/cover }

.card__meta{
  position:absolute;
  left:24px; right:24px; bottom:24px;
  z-index:2;
}
.tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0a0a0a;
  margin-bottom:12px;
  padding:6px 12px;
  background:rgba(255,255,255,.94);
  border-radius:999px;
  backdrop-filter:blur(10px);
}
.card h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  margin:0 0 6px;
  letter-spacing:-.015em;
  color:#fff;
  line-height:1.2;
}
.card p{
  font-size:14.5px;
  color:rgba(255,255,255,.72);
  margin:0;
  line-height:1.5;
}
.card.hide{ display:none }

.collection__cta{
  text-align:center;
  margin-top:40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.collection__cta p{
  color:var(--c-muted);
  margin:0;
  font-size:15px;
  font-style:normal;
}

/* -------------------- VALUE / FAIR PRICES -------------------- */
.value{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg);
}
.value .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.value .section-head .lead{ margin-left:auto; margin-right:auto }

.value__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--c-border-soft);
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-2xl);
  overflow:hidden;
}
@media (max-width:900px){ .value__grid{ grid-template-columns:1fr } }

.value-card{
  padding:40px 36px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:background var(--t-fast);
  border:0;
  border-radius:0;
}
.value-card:hover{
  background:#fafafa;
  transform:none;
  box-shadow:none;
}
.value-card__icon{
  width:44px;
  height:44px;
  border-radius:999px;
  background:var(--c-bg-alt);
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-text);
  margin-bottom:6px;
}
.value-card h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.015em;
  color:var(--c-text);
  margin:0;
}
.value-card p{
  font-size:15.5px;
  line-height:1.55;
  color:var(--c-muted);
  margin:0;
}
.value__note{
  text-align:center;
  margin:40px auto 0;
  max-width:680px;
  color:var(--c-muted);
  font-size:15px;
  font-style:normal;
}

/* -------------------- PROCESS -------------------- */
.process{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg-dark);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.process::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(184,151,95,.10), transparent 70%),
    radial-gradient(35% 30% at 85% 80%, rgba(184,151,95,.06), transparent 70%);
  pointer-events:none;
}
.process .container{ position:relative }
.process .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.process .section-head .lead{ margin-left:auto; margin-right:auto }
.process .eyebrow{ color:rgba(255,255,255,.6) }
.process .h2{ color:#fff }
.process .h2 em{ color:var(--c-accent-2) }
.process .lead{ color:rgba(255,255,255,.72) }

.process__list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:24px;
  max-width:1080px;
  margin:0 auto;
}
.process__list::before{ display:none }
@media (max-width:780px){ .process__list{ grid-template-columns:1fr } }

.step{
  display:flex;
  gap:24px;
  padding:32px 30px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-xl);
  align-items:flex-start;
  position:relative;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.step:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
}
.step__num{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:28px;
  line-height:1;
  color:var(--c-accent-2);
  letter-spacing:-.02em;
  min-width:52px;
  flex-shrink:0;
}
.step__body h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  margin:0 0 8px;
  color:#fff;
  letter-spacing:-.015em;
  line-height:1.2;
}
.step__body p{
  color:rgba(255,255,255,.7);
  font-size:15.5px;
  line-height:1.55;
  margin:0 0 12px;
}
.step__meta{
  display:inline-block;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(184,151,95,.85);
  font-weight:500;
}

/* -------------------- BRANDS -------------------- */
.brands{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg);
  overflow:hidden;
}
.brands .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.brands .section-head .lead{ margin-left:auto; margin-right:auto }

.brands__slider{
  display:flex;
  flex-direction:column;
  gap:14px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands__row{ overflow:hidden; width:100% }
.brands__track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:brandSlide 50s linear infinite;
  will-change:transform;
}
.brands__row--reverse .brands__track{
  animation:brandSlideReverse 55s linear infinite;
}
.brands__slider:hover .brands__track{ animation-play-state:paused }
@keyframes brandSlide{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
@keyframes brandSlideReverse{
  from{ transform:translateX(-50%) }
  to  { transform:translateX(0) }
}
.brand-pill{
  flex-shrink:0;
  padding:14px 24px;
  background:var(--c-bg-alt);
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:15px;
  color:var(--c-text-soft);
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast),
             border-color var(--t-fast);
  cursor:default;
}
.brand-pill:hover{
  background:#0a0a0a;
  color:#fff;
  border-color:#0a0a0a;
}
@media (prefers-reduced-motion: reduce){
  .brands__track{ animation:none }
}

/* -------------------- TESTIMONIALS -------------------- */
.testimonials{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg-alt);
}
.testimonials .section-head{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
@media (max-width:900px){ .testimonials__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .testimonials__grid{ grid-template-columns:1fr } }

.quote{
  background:#fff;
  padding:28px;
  border-radius:var(--r-xl);
  border:1px solid var(--c-border-soft);
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.quote:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--c-border);
}
.stars{
  color:var(--c-accent-2);
  letter-spacing:.06em;
  font-size:14px;
}
.quote blockquote{
  margin:0;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:16.5px;
  line-height:1.5;
  color:var(--c-text);
  font-style:normal;
  letter-spacing:-.005em;
}
.quote figcaption{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--c-border-soft);
}
.avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  background:#0a0a0a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
}
.quote figcaption strong{
  display:block;
  font-size:14.5px;
  color:var(--c-text);
  font-weight:600;
}
.quote figcaption span{
  display:block;
  font-size:13px;
  color:var(--c-muted);
}

.quote--accent{
  background:#0a0a0a;
  color:#fff;
  border-color:#0a0a0a;
  align-items:flex-start;
  justify-content:center;
}
.big-score{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-family:var(--font-sans);
}
.big-score .big{
  font-size:64px;
  font-weight:600;
  line-height:1;
  color:#fff;
  letter-spacing:-.03em;
}
.big-score .small{
  font-size:18px;
  color:rgba(255,255,255,.55);
  font-weight:500;
}
.small-label{
  color:rgba(255,255,255,.7);
  margin:6px 0;
  font-size:14.5px;
  max-width:30ch;
}
.logos{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,.5);
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.1);
  width:100%;
  letter-spacing:.04em;
}
.btn--review{
  background:#fff;
  color:#0a0a0a;
  margin-top:auto;
  align-self:flex-start;
  font-size:14px;
  padding:11px 18px;
  box-shadow:0 6px 22px -10px rgba(0,0,0,.55);
}
.btn--review:hover{
  background:#f5f5f7;
  transform:translateY(-1px);
}

.testimonials__cta{
  margin-top:40px;
  padding:clamp(24px, 4vw, 36px);
  background:#fff;
  border:1px solid var(--c-border-soft);
  border-radius:var(--r-xl);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.testimonials__cta h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  margin:0 0 6px;
  letter-spacing:-.015em;
  color:var(--c-text);
}
.testimonials__cta p{
  margin:0;
  max-width:52ch;
  color:var(--c-muted);
  font-size:15.5px;
}
@media (max-width:680px){
  .testimonials__cta{ flex-direction:column; align-items:flex-start }
}

/* -------------------- FAQ -------------------- */
.faq{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg);
}
.faq .h2{ margin-bottom:18px }
.faq p{ color:var(--c-muted); margin-bottom:24px }
.faq .btn{ margin-top:8px }
.faq__list{ border-top:1px solid var(--c-border-soft) }
.faq__list details{
  border-bottom:1px solid var(--c-border-soft);
  padding:22px 4px;
  transition:background var(--t-fast);
}
.faq__list summary{
  list-style:none;
  cursor:pointer;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:17px;
  color:var(--c-text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  letter-spacing:-.005em;
  transition:color var(--t-fast);
}
.faq__list summary::-webkit-details-marker{ display:none }
.faq__list summary::after{
  content:"";
  width:16px;
  height:16px;
  background:
    linear-gradient(currentColor, currentColor) center/16px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 16px no-repeat;
  color:var(--c-muted);
  flex-shrink:0;
  transition:transform var(--t-fast);
}
.faq__list details[open] summary::after{
  background:linear-gradient(currentColor, currentColor) center/16px 1.5px no-repeat;
}
.faq__list details[open] summary{ color:var(--c-text) }
.faq__list details p{
  margin:14px 0 0;
  color:var(--c-muted);
  font-size:16px;
  line-height:1.6;
  max-width:70ch;
}

/* -------------------- BOOKING -------------------- */
.booking{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg-alt);
  position:relative;
  overflow:hidden;
}
.booking__bg{ display:none }
.booking .container{ position:relative }

.contact-list{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-list li{
  display:flex;
  gap:14px;
  align-items:center;
  font-size:15.5px;
  color:var(--c-text-soft);
}
.contact-list__icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--c-border-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--c-muted);
}
.contact-list strong{
  display:block;
  font-size:15.5px;
  color:var(--c-text);
  font-weight:600;
  letter-spacing:-.005em;
}
.contact-list li > div span,
.contact-list__link > div span{
  display:block;
  font-size:13.5px;
  color:var(--c-muted);
}
.contact-list a{
  color:inherit;
}
.contact-list a:hover{ color:var(--c-muted) }

.booking__form{
  background:#fff;
  padding:clamp(28px, 4vw, 44px);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--c-border-soft);
  position:relative;
}
.booking__form h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  margin:0 0 24px;
  letter-spacing:-.015em;
  color:var(--c-text);
}

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:14px } }

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}
.field > span{
  display:block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--c-muted);
  margin-bottom:0;
  text-transform:none;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:var(--c-bg-alt);
  color:var(--c-text);
  font-size:16px;
  appearance:none;
  -webkit-appearance:none;
  transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}
.field textarea{
  resize:vertical;
  min-height:110px;
  font-family:inherit;
}
.field input:hover,
.field select:hover,
.field textarea:hover{ background:#ebebef }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:0;
  background:#fff;
  border-color:#0a0a0a;
  box-shadow:0 0 0 4px rgba(10,10,10,.08);
}

.fineprint{
  font-size:13px;
  color:var(--c-muted);
  margin:16px 0 0;
  line-height:1.55;
  text-align:center;
}

.booking__success{
  grid-column:2;
  text-align:center;
  padding:48px 24px 16px;
}
.success-check{
  width:60px;
  height:60px;
  border-radius:999px;
  background:#25a162;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 18px;
}
.booking__success h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.015em;
}
.booking__success p{
  margin:0;
  color:var(--c-muted);
  font-size:15.5px;
}
.success__fallback{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--c-border-soft);
  font-size:14px;
  color:var(--c-muted);
}
.success__fallback a{
  color:var(--c-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.success__fallback a:hover{ color:var(--c-muted) }

.form-error{
  margin:14px 0 0;
  padding:14px 16px;
  border:1px solid #f1c5bf;
  background:#fdf3f2;
  border-radius:var(--r-md);
  color:#9b2c1c;
  font-size:14px;
  line-height:1.55;
}
.form-error a{
  color:#9b2c1c;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:500;
}
.form-error a:hover{ color:#6e1d11 }

/* -------------------- DSGVO CHECKBOX -------------------- */
.field--checkbox{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:18px 0 0;
  cursor:pointer;
  flex-direction:row;
}
.field--checkbox input[type="checkbox"]{
  flex-shrink:0;
  margin-top:3px;
  width:18px;
  height:18px;
  accent-color:#0a0a0a;
  cursor:pointer;
}
.booking__form .btn--block{ margin-top:24px }
.field--checkbox span.field__check-label,
.field--checkbox .field__check-label{
  font-size:13.5px;
  color:var(--c-muted);
  line-height:1.5;
  margin:0;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  display:inline;
}
.field__check-label a{
  color:var(--c-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.field__check-label a:hover{ color:var(--c-muted) }

/* -------------------- SHOWROOM / REGION -------------------- */
.showroom{
  padding:clamp(72px, 10vw, 140px) 0;
  background:var(--c-bg);
}
.showroom__map{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--r-2xl);
  overflow:hidden;
  background:var(--c-bg-alt);
  box-shadow:var(--shadow-md);
}
.showroom__map iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.map-consent{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(rgba(10,10,10,.65), rgba(10,10,10,.65)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%23ebebef'/><path d='M0 30h60M30 0v60' stroke='%23d2d2d7' stroke-width='1'/></svg>");
  background-size:cover, 60px 60px;
  color:#fff;
  text-align:center;
  padding:32px;
}
.map-consent__inner{
  max-width:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.map-consent__inner svg{
  color:var(--c-accent-2);
  margin-bottom:6px;
}
.map-consent__inner h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  margin:0;
  letter-spacing:-.015em;
}
.map-consent__inner p{
  font-size:14.5px;
  color:rgba(255,255,255,.78);
  margin:0 0 6px;
  line-height:1.5;
}
.map-consent__inner p a{
  color:var(--c-accent-2);
  text-decoration:underline;
  text-underline-offset:2px;
}
.map-consent__inner .btn{
  background:#fff;
  color:#0a0a0a;
}
.map-consent__inner .btn:hover{ background:#f5f5f7 }

/* -------------------- WHATSAPP CTA -------------------- */
.btn-whatsapp{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:32px;
  padding:16px 20px;
  background:#25D366;
  color:#fff;
  border-radius:var(--r-lg);
  box-shadow:0 6px 22px -8px rgba(37,211,102,.5);
  text-decoration:none;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  position:relative;
  overflow:hidden;
}
.btn-whatsapp::before{
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:80%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  animation:waShine 4s ease-in-out infinite;
}
@keyframes waShine{
  0%      { left:-100% }
  40%,100%{ left:120% }
}
.btn-whatsapp:hover{
  transform:translateY(-2px);
  background:#1ebe5c;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.55);
}
.btn-whatsapp__icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
}
.btn-whatsapp__text{
  display:flex;
  flex-direction:column;
  flex:1;
  position:relative;
  z-index:1;
}
.btn-whatsapp__text strong{
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:#fff;
  line-height:1.2;
}
.btn-whatsapp__text > span{
  font-size:13px;
  color:rgba(255,255,255,.85);
  margin-top:2px;
}
.btn-whatsapp__arrow{
  flex-shrink:0;
  opacity:.9;
  position:relative;
  z-index:1;
  transition:transform var(--t-fast);
}
.btn-whatsapp:hover .btn-whatsapp__arrow{ transform:translateX(3px) }

/* -------------------- FOOTER -------------------- */
.footer{
  background:#0a0a0a;
  color:rgba(255,255,255,.7);
  padding:80px 0 0;
}
.footer__inner{
  display:grid;
  grid-template-columns:1.4fr 2.4fr;
  gap:clamp(32px, 5vw, 60px);
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:820px){ .footer__inner{ grid-template-columns:1fr } }

.footer .logo{ color:#fff }
.footer .logo__name{ color:#fff }
.footer .logo__tag{ color:rgba(255,255,255,.5) }
.footer__brand p{
  margin:14px 0 0;
  font-size:14.5px;
  line-height:1.55;
  max-width:36ch;
  color:rgba(255,255,255,.55);
}
.footer__claim{
  font-family:var(--font-sans);
  font-size:18px;
  font-weight:500;
  color:rgba(255,255,255,.78);
  margin-top:16px;
  letter-spacing:-.005em;
  font-style:normal;
}

.footer__cols{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
}
@media (max-width:620px){ .footer__cols{ grid-template-columns:repeat(2,1fr); gap:24px } }
.footer__cols h4{
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.footer__cols p{
  margin:0 0 10px;
  font-size:14.5px;
  color:rgba(255,255,255,.78);
}
.footer__cols a{ transition:color var(--t-fast) }
.footer__cols a:hover{ color:#fff }

.footer__meta{
  border-top:1px solid rgba(255,255,255,.08);
  padding:24px 0;
}
.footer__meta-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  color:rgba(255,255,255,.5);
}
.footer__meta a{ transition:color var(--t-fast) }
.footer__meta a:hover{ color:#fff }

/* -------------------- FLOATING CTAs -------------------- */
.float-stack{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.float-wa{
  width:58px;
  height:58px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 22px -6px rgba(37,211,102,.55), 0 12px 32px -10px rgba(0,0,0,.25);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  position:relative;
}
.float-wa::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);
  animation:waPulse 2.4s infinite;
}
@keyframes waPulse{
  0%  { box-shadow:0 0 0 0 rgba(37,211,102,.5) }
  70% { box-shadow:0 0 0 14px rgba(37,211,102,0) }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) }
}
.float-wa:hover{ transform:translateY(-2px) scale(1.04) }
.float-cta{
  padding:12px 18px;
  border-radius:999px;
  background:#0a0a0a;
  color:#fff;
  display:none;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-fast);
}
.float-cta:hover{ transform:translateY(-2px) }
@media (max-width:720px){ .float-cta{ display:inline-flex } }

/* -------------------- LEGAL PAGES -------------------- */
.legal{
  padding:clamp(80px, 9vw, 120px) 0 clamp(60px, 8vw, 100px);
  background:var(--c-bg);
}
.legal__inner{
  max-width:780px;
  margin:0 auto;
}
.legal h1{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(32px, 4vw, 48px);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0 0 8px;
  color:var(--c-text);
}
.legal__updated{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--c-muted);
  margin-bottom:40px;
  display:block;
  font-weight:500;
}
.legal h2{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:22px;
  letter-spacing:-.015em;
  margin:40px 0 12px;
  color:var(--c-text);
}
.legal h3{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:17px;
  margin:24px 0 8px;
  color:var(--c-text);
  letter-spacing:-.005em;
}
.legal p,
.legal li{
  font-size:16px;
  line-height:1.65;
  color:var(--c-muted);
  margin:0 0 14px;
}
.legal ul{
  margin:0 0 16px;
  padding-left:1.25rem;
  list-style:disc;
}
.legal ul li{ margin-bottom:6px }
.legal a{
  color:var(--c-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal a:hover{ color:var(--c-muted) }
.legal__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--c-muted);
  margin-bottom:32px;
}
.legal__back:hover{ color:var(--c-text) }

/* -------------------- COOKIE CONSENT (Google/Cookiebot-style) -------------------- */
:root{
  --cc-blue:      #007bff;
  --cc-blue-dk:   #0069d9;
  --cc-text:      #222;
  --cc-muted:     #5f6368;
  --cc-border:    #ddd;
  --cc-border-2:  #e6e6e6;
  --cc-bg-alt:    #f7f8fa;
}

/* Body lock while a consent overlay is open */
html.consent-blocking,
html.consent-blocking body{ overflow:hidden; }

/* Shared overlay (banner + modal) */
.cc-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  padding:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
  font-family:var(--font-sans, 'Inter', Arial, sans-serif);
}
.cc-overlay.is-visible{ opacity:1; pointer-events:auto; }
.cc-overlay__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

/* ---------- Banner (bottom-centered card) ---------- */
.cc-overlay#consent-banner{ align-items:flex-end; justify-content:center; }
.cc-banner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 48px -8px rgba(0,0,0,.32);
  padding:26px 28px 24px;
  transform:translateY(16px);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.cc-overlay#consent-banner.is-visible .cc-banner{ transform:translateY(0); }
.cc-banner__title{
  margin:0 0 10px;
  font-size:19px;
  font-weight:700;
  color:var(--cc-text);
  letter-spacing:-.01em;
}
.cc-banner__text{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--cc-muted);
}
.cc-link{
  color:var(--cc-blue);
  text-decoration:underline;
  text-underline-offset:2px;
}
.cc-link:hover{ color:var(--cc-blue-dk); }
.cc-banner__actions{
  display:flex;
  gap:12px;
  align-items:center;
}

/* ---------- Buttons (pill) ---------- */
.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cc-btn:hover{ transform:translateY(-1px); }
.cc-btn:active{ transform:translateY(0); }
.cc-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,123,255,.35); }
.cc-btn--primary{
  background:var(--cc-blue);
  color:#fff;
  box-shadow:0 4px 14px -4px rgba(0,123,255,.5);
}
.cc-btn--primary:hover{ background:var(--cc-blue-dk); box-shadow:0 8px 20px -6px rgba(0,123,255,.55); }
.cc-btn--ghost{
  background:#fff;
  color:var(--cc-text);
  border-color:var(--cc-border);
}
.cc-btn--ghost:hover{ background:var(--cc-bg-alt); border-color:#c4c4c4; }
.cc-btn--icon svg{ flex-shrink:0; }
.cc-banner__actions .cc-btn--icon{ margin-right:auto; }

/* ---------- Settings modal ---------- */
.cc-overlay#consent-modal{ align-items:center; justify-content:center; }
.cc-modal{
  position:relative;
  z-index:1;
  width:100%;
  max-width:930px;
  max-height:calc(100vh - 40px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 64px -16px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:scale(.97);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.cc-overlay#consent-modal.is-visible .cc-modal{ transform:scale(1); }
.cc-modal__close{
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:999px;
  color:var(--cc-muted);
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
  z-index:2;
}
.cc-modal__close:hover{ background:var(--cc-bg-alt); color:var(--cc-text); }
.cc-modal__header{
  padding:28px 32px 18px;
}
.cc-modal__title{
  margin:0 0 10px;
  font-size:20px;
  font-weight:700;
  color:var(--cc-text);
  letter-spacing:-.01em;
}
.cc-modal__text{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--cc-muted);
  max-width:78ch;
}

/* Tabs */
.cc-tabs{
  display:flex;
  gap:0;
  padding:0 32px;
  border-bottom:1px solid var(--cc-border);
}
.cc-tab{
  appearance:none;
  background:transparent;
  border:0;
  border-top:3px solid transparent;
  padding:14px 18px;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--cc-muted);
  cursor:pointer;
  margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.cc-tab:hover{ color:var(--cc-text); }
.cc-tab.is-active{
  color:var(--cc-blue);
  border-top-color:var(--cc-blue);
  background:#fff;
  border-bottom:1px solid #fff;
}

/* Body / panels */
.cc-modal__body{
  overflow-y:auto;
  padding:8px 32px 12px;
  flex:1 1 auto;
}
.cc-tabpanel[hidden]{ display:none; }
.cc-tabpanel p{
  font-size:13.5px;
  line-height:1.65;
  color:var(--cc-muted);
  margin:14px 0;
}

/* Category rows */
.cc-cat{ border-bottom:1px solid var(--cc-border-2); padding:20px 0; }
.cc-cat:last-child{ border-bottom:0; }
.cc-cat__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.cc-cat__info{ flex:1 1 auto; min-width:0; }
.cc-cat__title{
  margin:0 0 6px;
  font-size:15px;
  font-weight:700;
  color:var(--cc-text);
}
.cc-cat__desc{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--cc-muted);
  max-width:74ch;
}
.cc-cat__show{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:0;
  background:none;
  border:0;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--cc-blue);
  cursor:pointer;
}
.cc-cat__show svg{ transition:transform .2s ease; }
.cc-cat__show.is-open svg{ transform:rotate(180deg); }
.cc-cat__show:hover{ color:var(--cc-blue-dk); }

.cc-cat__cookies{ margin-top:14px; overflow-x:auto; }
.cc-cookie-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  color:var(--cc-muted);
}
.cc-cookie-table th,
.cc-cookie-table td{
  text-align:left;
  padding:8px 10px;
  border:1px solid var(--cc-border-2);
  vertical-align:top;
}
.cc-cookie-table th{
  background:var(--cc-bg-alt);
  color:var(--cc-text);
  font-weight:600;
  white-space:nowrap;
}
.cc-cat__empty{
  margin:0;
  font-size:12.5px;
  color:var(--cc-muted);
  font-style:italic;
}

/* Toggle switch */
.cc-switch{
  position:relative;
  flex-shrink:0;
  display:inline-block;
  width:46px;
  height:26px;
  margin-top:2px;
  cursor:pointer;
}
.cc-switch input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.cc-switch__track{
  display:block;
  width:46px; height:26px;
  background:#c7c9cc;
  border-radius:999px;
  transition:background .2s ease;
}
.cc-switch__thumb{
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  background:#fff;
  border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s ease;
}
.cc-switch input:checked ~ .cc-switch__track{ background:var(--cc-blue); }
.cc-switch input:checked ~ .cc-switch__track .cc-switch__thumb{ transform:translateX(20px); }
.cc-switch--locked{ cursor:not-allowed; }
.cc-switch--locked input{ cursor:not-allowed; }
.cc-switch--locked .cc-switch__track{ background:var(--cc-blue); opacity:.45; }
.cc-switch input:focus-visible ~ .cc-switch__track{ box-shadow:0 0 0 3px rgba(0,123,255,.3); }

/* Sticky footer action bar */
.cc-modal__footer{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding:16px 32px;
  border-top:1px solid var(--cc-border);
  background:#fff;
}
.cc-modal__footer .cc-btn{ flex:0 0 auto; }

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .cc-overlay{ padding:0; }
  .cc-overlay#consent-banner{ padding:12px; }
  .cc-banner{ max-width:none; padding:22px 20px 20px; }
  .cc-banner__actions{ flex-direction:column-reverse; align-items:stretch; gap:10px; }
  .cc-banner__actions .cc-btn{ width:100%; margin-right:0; }

  .cc-modal{
    max-width:none;
    width:100%;
    height:100%;
    max-height:100%;
    border-radius:0;
  }
  .cc-modal__header{ padding:24px 20px 16px; }
  .cc-modal__title{ font-size:18px; }
  .cc-tabs{ padding:0 12px; overflow-x:auto; }
  .cc-tab{ padding:14px 12px; white-space:nowrap; }
  .cc-modal__body{ padding:8px 20px 12px; }
  .cc-cat__head{ gap:14px; }
  .cc-modal__footer{
    padding:14px 20px max(14px, env(safe-area-inset-bottom));
    flex-direction:column-reverse;
  }
  .cc-modal__footer .cc-btn{ width:100%; }
}

@media (max-width: 420px){
  .cc-cat__head{ flex-direction:column; }
  .cc-switch{ align-self:flex-start; }
}

/* Footer "Cookie-Einstellungen" — styled as inline button matching the legal links */
.footer__consent-btn{
  background:none;
  border:0;
  padding:0;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  transition:color var(--t-fast);
}
.footer__consent-btn:hover{ color:#fff }

/* -------------------- REVEAL ANIMATIONS -------------------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s var(--ease-slow), transform .8s var(--ease-slow);
}
.reveal.visible{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
}

/* =================================================================
   MOBILE REFINEMENTS (≤ 600px)
   ================================================================= */
@media (max-width: 600px){
  .announce{ font-size:12px }
  .announce__inner{ padding:9px 14px; gap:8px }
  .pulse{ flex-shrink:0 }

  .nav__inner{ height:60px; gap:12px }
  .logo__mark{ width:30px; height:30px }
  .logo__name{ font-size:15px }
  .logo__tag{ display:none }

  .hero{
    min-height:auto;
    padding:120px 0 60px;
  }
  .hero__eyebrow{ font-size:12px; margin-bottom:20px }
  .hero__title{
    font-size:clamp(34px, 9vw, 44px);
    line-height:1.02;
    margin-bottom:18px;
  }
  .hero__lead{
    font-size:16px;
    margin-bottom:28px;
    line-height:1.5;
  }
  .hero__cta{
    flex-direction:column;
    gap:10px;
    margin-bottom:36px;
  }
  .hero__cta .btn{
    width:100%;
    justify-content:center;
    padding:16px 22px;
    font-size:15px;
  }
  .hero__stats{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    padding-top:24px;
  }
  .hero__stats dd{ font-size:22px }
  .hero__stats dt{ font-size:12px }
  .hero__scroll{ display:none }

  .marquee{ padding:14px 0 }
  .marquee__track{ font-size:14px; gap:24px }
  .brand-pill{ padding:11px 18px; font-size:14px }
  .brands__slider{ gap:10px }

  .philosophy,.collection,.process,.brands,.testimonials,.faq,.booking,.value,.showroom{
    padding:clamp(56px, 12vw, 80px) 0;
  }

  .philosophy__visual{
    aspect-ratio:1/1;
    margin-top:20px;
  }
  .frame--main{ inset:0 18% 14% 0 }
  .frame--accent{ inset:36% 0 0 36%; border-width:4px }
  .badge-round{
    width:84px; height:84px;
    top:-10px; right:-4px;
  }
  .badge-round__core{ font-size:9px }
  .badge-round__core strong{ font-size:15px }

  .collection__filter{ gap:6px; margin-bottom:28px }
  .chip{ padding:8px 16px; font-size:13.5px }
  .card{
    height:auto !important;
    aspect-ratio:4/5;
    min-height:360px;
  }
  .card__meta{ left:18px; right:18px; bottom:18px }
  .card h3{ font-size:19px }
  .card p{ font-size:13.5px }
  .tag{ font-size:10px; padding:5px 10px }

  .value__grid{ border-radius:var(--r-xl) }
  .value-card{ padding:32px 28px; gap:10px }
  .value-card h3{ font-size:18px }

  .step{ padding:24px 20px; gap:18px }
  .step__num{ font-size:24px; min-width:38px }
  .step__body h3{ font-size:19px }
  .step__body p{ font-size:15px }

  .testimonials__grid{ gap:14px }
  .quote{ padding:22px }
  .quote blockquote{ font-size:15.5px }
  .big-score .big{ font-size:48px }
  .testimonials__cta{ padding:22px; gap:16px }
  .testimonials__cta h3{ font-size:19px }

  .faq__list summary{ font-size:16px }
  .faq__list details{ padding:18px 2px }

  .booking__form{ padding:22px }
  .booking__form h3{ font-size:19px; margin-bottom:18px }
  .btn-whatsapp{ padding:14px 16px; gap:12px; margin-top:24px }
  .btn-whatsapp__icon{ width:40px; height:40px }
  .btn-whatsapp__text strong{ font-size:15px }
  .btn-whatsapp__text > span{ font-size:12.5px }
  .contact-list{ margin-top:24px; gap:12px }
  .contact-list__icon{ width:38px; height:38px }

  .footer{ padding:56px 0 0 }
  .footer__inner{ padding-bottom:36px; gap:28px }
  .footer__cols{ gap:24px }
  .footer__claim{ font-size:16px; margin-top:12px }
  .footer__meta-inner{ flex-direction:column; align-items:flex-start; gap:8px }

  .float-stack{ bottom:14px; right:14px; gap:8px }
  .float-wa{ width:52px; height:52px }
  .float-wa svg{ width:22px; height:22px }
  .float-cta{ display:none !important }

  .h2{ font-size:clamp(26px, 7vw, 34px) }
  .lead{ font-size:16px }
  .section-head{ margin-bottom:32px }
  .eyebrow{ font-size:12px; margin-bottom:10px }
}

/* Very small phones (≤ 360px) */
@media (max-width: 360px){
  .hero__title{ font-size:30px }
  .hero__stats dd{ font-size:20px }
  .h2{ font-size:24px }
  .brand-pill{ padding:9px 16px; font-size:13px }
}