/* =========================================================
   Klar.Raum – Entrümpelung & Haushaltsauflösung
   Design tokens
   ========================================================= */
:root{
  --orange:        #E2591E;
  --orange-dark:   #B8420E;
  --orange-soft:   #FBE3D2;
  --orange-soft-2: #F6C9A6;
  --ink:           #211D17;
  --ink-soft:      #6B635A;
  --paper:         #FBF8F3;
  --paper-alt:     #F1EAE0;
  --slate:         #272420;
  --slate-soft:    #48433C;
  --line:          #E3DACA;
  --white:         #FFFFFF;

  /* Systemschriften statt Google Fonts: keine externe Verbindung nötig,
     schnelleres Laden, kein Datenschutz-Hinweis zu Google Fonts erforderlich. */
  --font-display: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body:    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--ink-soft); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* -------------------- eyebrow / tag label -------------------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange-dark);
  background:var(--orange-soft);
  padding:6px 12px;
  border-radius:999px;
  font-weight:500;
}
.tag::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange);
  flex:none;
}
.tag.on-dark{
  color:var(--orange-soft-2);
  background:rgba(226,89,30,.16);
}

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  padding:14px 26px;
  border-radius:10px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--orange);
  color:var(--white);
  box-shadow:0 6px 18px -6px rgba(226,89,30,.55);
}
.btn-primary:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-dark); transform:translateY(-1px); }
.btn-ghost.on-dark{ color:var(--white); border-color:rgba(255,255,255,.25); }
.btn-ghost.on-dark:hover{ border-color:var(--orange-soft-2); color:var(--orange-soft-2); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }

/* -------------------- header -------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,248,243,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-header.is-scrolled{
  border-color:var(--line);
  background:rgba(251,248,243,.96);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  color:var(--ink);
}
.logo .dot{
  width:10px; height:10px; border-radius:3px;
  background:var(--orange);
  transform:rotate(8deg);
}
.logo span.light{ color:var(--ink-soft); font-weight:500; }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{
  font-size:15px; font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange);
  border-radius:2px;
}
.header-actions{ display:flex; align-items:center; gap:18px; }
.header-phone{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:14.5px; color:var(--ink);
}
.header-phone svg{ width:16px; height:16px; stroke:var(--orange); }

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:10px;
  border:1.5px solid var(--line);
  background:var(--white);
  align-items:center; justify-content:center;
  cursor:pointer;
}
.nav-toggle span{ width:18px; height:2px; background:var(--ink); position:relative; display:block; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:transform .2s ease;
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:10px 28px 22px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.mobile-nav a{
  padding:13px 4px; font-size:16px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{ margin-top:14px; }
body.nav-open .mobile-nav{ display:flex; }
body.nav-open .nav-toggle span::before{ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after{ transform:translateY(-6px) rotate(-45deg); }
body.nav-open .nav-toggle span{ background:transparent; }

@media (max-width: 860px){
  .main-nav, .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
}

/* -------------------- hero -------------------- */
.hero{ padding:64px 0 86px; overflow:hidden; }
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(34px, 4.6vw, 54px);
  margin-bottom:22px;
}
.hero-copy h1 em{
  font-style:normal; color:var(--orange);
  background:linear-gradient(transparent 72%, var(--orange-soft) 0%);
}
.hero-copy .lead{
  font-size:18px; max-width:480px; margin-bottom:30px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.hero-trust{ display:flex; gap:26px; flex-wrap:wrap; }
.hero-trust div{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); font-weight:500; }
.hero-trust svg{ width:18px; height:18px; stroke:var(--orange); flex:none; }

.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; }

/* -------------------- trust strip -------------------- */
.trust-strip{ background:var(--orange-soft); padding:26px 0; border-top:1px solid var(--orange-soft-2); border-bottom:1px solid var(--orange-soft-2); }
.trust-strip .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.trust-item{ display:flex; align-items:center; gap:12px; }
.trust-item svg{ width:26px; height:26px; stroke:var(--orange-dark); flex:none; }
.trust-item strong{ display:block; font-size:14.5px; color:var(--ink); }
.trust-item span{ font-size:13px; color:var(--ink-soft); }

@media (max-width: 900px){
  .trust-strip .wrap{ grid-template-columns:repeat(2,1fr); }
}

/* -------------------- section basics -------------------- */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3.4vw,38px); }
.section-head p{ font-size:16.5px; }

.section-dark{ background:var(--slate); color:var(--white); }
.section-dark p{ color:#C8C2B8; }
.section-dark h2,.section-dark h3,.section-dark h4{ color:var(--white); }
.section-alt{ background:var(--paper-alt); }

/* -------------------- services grid -------------------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px -22px rgba(33,29,23,.25);
  border-color:var(--orange-soft-2);
}
.service-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-soft);
  border-radius:12px;
  margin-bottom:18px;
}
.service-icon svg{ width:24px; height:24px; stroke:var(--orange-dark); }
.service-card h3{ font-size:18.5px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; margin-bottom:0; }

@media (max-width:920px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .services-grid{ grid-template-columns:1fr; } }

/* -------------------- process steps -------------------- */
.steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  counter-reset:step;
}
.step{ position:relative; padding-top:8px; }
.step .num{
  font-family:var(--font-mono);
  font-size:13px; letter-spacing:.08em;
  color:var(--orange);
  display:flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.step .num::after{ content:""; height:1px; flex:1; background:var(--line); }
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ font-size:14px; }

@media (max-width:920px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* -------------------- about / values -------------------- */
.about-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start;
}
.values-list{ display:grid; gap:22px; margin-top:8px; }
.values-list li{ display:flex; gap:16px; align-items:flex-start; }
.values-list svg{ width:22px; height:22px; stroke:var(--orange-soft-2); flex:none; margin-top:2px; }
.values-list strong{ display:block; color:var(--white); font-size:15.5px; margin-bottom:2px; }
.values-list span{ font-size:14px; color:#C8C2B8; }

@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:36px; } }

/* -------------------- CTA band -------------------- */
.cta-band{
  background:var(--orange);
  border-radius:24px;
  padding:64px 56px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  flex-wrap:wrap;
}
.cta-band h2{ color:var(--white); font-size:clamp(24px,3vw,32px); margin-bottom:8px; max-width:480px; }
.cta-band p{ color:var(--orange-soft); margin-bottom:0; max-width:420px; }
.cta-band .btn-primary{ background:var(--white); color:var(--orange-dark); box-shadow:none; }
.cta-band .btn-primary:hover{ background:var(--ink); color:var(--white); }
.cta-band .btn-ghost{ border-color:rgba(255,255,255,.5); color:var(--white); }
.cta-band .btn-ghost:hover{ border-color:var(--white); }

@media (max-width:700px){
  .cta-band{ padding:42px 28px; flex-direction:column; text-align:center; align-items:center; }
}

/* -------------------- footer -------------------- */
.site-footer{ background:var(--slate); color:#C8C2B8; padding:64px 0 28px; }
.footer-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand .logo{ color:var(--white); margin-bottom:14px; }
.footer-brand p{ font-size:14px; max-width:280px; }
.footer-col h4{ color:var(--white); font-size:14.5px; margin-bottom:16px; }
.footer-col a, .footer-col li{ font-size:14px; display:block; margin-bottom:10px; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:24px;
  font-size:13px; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{ color:#C8C2B8; }
.footer-bottom a:hover{ color:var(--white); }

@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* -------------------- page header (sub-pages) -------------------- */
.page-hero{
  padding:60px 0 56px;
  background:var(--paper-alt);
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:clamp(30px,4vw,44px); margin-bottom:12px; }
.page-hero p{ max-width:560px; font-size:16.5px; }
.breadcrumb{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:18px; display:flex; gap:8px; align-items:center;
}
.breadcrumb .sep{ color:var(--line); }
.breadcrumb a:hover{ color:var(--orange-dark); }

/* -------------------- contact page -------------------- */
.contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start;
}
.contact-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px;
}
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--ink); }
.field .req{ color:var(--orange); }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--ink);
  padding:12px 14px; border-radius:9px; border:1.5px solid var(--line); background:var(--paper);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-soft);
}
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.form-status{ font-size:14px; margin-top:14px; display:none; padding:12px 14px; border-radius:9px; }
.form-status.ok{ display:block; background:#E8F4EA; color:#1F6B34; }
.form-status.err{ display:block; background:#FBEAE5; color:#A23B1D; }

.info-card{
  background:var(--slate); color:var(--white); border-radius:var(--radius);
  padding:34px; margin-bottom:20px;
}
.info-card h3{ color:var(--white); font-size:17px; margin-bottom:18px; }
.info-row{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.info-row svg{ width:20px; height:20px; stroke:var(--orange-soft-2); flex:none; margin-top:2px; }
.info-row strong{ display:block; font-size:14.5px; color:var(--white); margin-bottom:2px; }
.info-row span{ font-size:14px; color:#C8C2B8; }
.info-row a{ color:#C8C2B8; }
.info-row a:hover{ color:var(--orange-soft-2); }
.hours-list{ display:grid; gap:6px; font-size:14px; }
.hours-list li{ display:flex; justify-content:space-between; color:#C8C2B8; }
.hours-list li span:last-child{ color:var(--white); font-family:var(--font-mono); font-size:13px; }

.map-box{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  height:220px; background:var(--paper-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-size:13.5px; text-align:center; padding:20px;
}

@media (max-width:920px){
  .contact-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}

/* -------------------- legal pages -------------------- */
.legal{ padding:64px 0 100px; }
.legal .wrap{ max-width:760px; }
.legal h2{ font-size:21px; margin-top:42px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ font-size:15.5px; color:var(--ink-soft); }
.legal ul{ margin:0 0 1em; padding-left:20px; list-style:disc; }
.legal a{ color:var(--orange-dark); text-decoration:underline; text-decoration-color:var(--orange-soft-2); }
.legal .placeholder-box{
  background:var(--orange-soft); border:1px dashed var(--orange-soft-2);
  border-radius:10px; padding:16px 18px; font-size:14px; color:var(--orange-dark);
  margin-bottom:36px;
}
.legal .placeholder-box strong{ display:block; margin-bottom:4px; }
.legal address{ font-style:normal; }

/* -------------------- reveal animation -------------------- */
/* Visible by default (no-JS / progressive enhancement). Only animates
   once html.js-reveal is set by script.js AND IntersectionObserver exists. */
html.js-reveal .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js-reveal .reveal.is-visible{ opacity:1; transform:translateY(0); }

/* -------------------- responsive section padding -------------------- */
@media (max-width:760px){
  section{ padding:64px 0; }
  .hero{ padding:40px 0 56px; }
  .hero .wrap{ grid-template-columns:1fr; gap:42px; }
  .hero-art{ order:-1; }
  .about-grid{ gap:30px; }
}

/* -------------------- logo image (replaces text logo) -------------------- */
.logo-img {
  height: 44px;
  width: auto;
  display: block;
  /* Make it visible on the light header */
  filter: none;
}
/* In dark contexts (footer) invert the black text to white */
.site-footer .logo-img,
.footer-brand .logo-img {
  height: 38px;
  filter: brightness(0) invert(1);
}