/* ============================================================
   Reinigungsservice Lohfelden — page-scoped styles
   Namespace: body.lohfelden-cleaning-page .rl-*
   No new :root / custom properties — all tokens come from global.css
   ============================================================ */

body.lohfelden-cleaning-page{ background:#fff; }
body.lohfelden-cleaning-page section{ padding:60px 0; }

/* shared bits reused from cleaning.css component vocabulary, redeclared
   locally under the rl- namespace so this file has no dependency on
   /css/cleaning.css being loaded */
.rl-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.5rem .95rem; border-radius:var(--radius-pill);
  margin-bottom:1.1rem; color:var(--primary-hover); background:var(--primary-l);
}
.rl-eyebrow--light{ color:#fff; background:rgba(255,255,255,.14); }
.rl-eyebrow i{ font-size:.95rem; }

.rl-head{ max-width:760px; margin:0 auto 2.6rem; text-align:center; }
.rl-head h2{ margin:0 0 .7rem; }
.rl-head p{ color:var(--c-text-soft); font-size:1.03rem; line-height:1.7; margin:0; }

/* ============================================================
   HERO — split panel with an inline request card instead of a photo
   ============================================================ */
.rl-hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(65% 85% at 88% 10%, rgba(239,73,51,.22), transparent 60%),
    linear-gradient(150deg, var(--c-dark) 0%, var(--c-dark-2) 65%, #0d2238 100%);
}
.rl-hero__inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:start;
  padding:4rem 0 4.5rem;
}
.rl-hero__copy h1{ color:#fff; font-size:clamp(2rem,4vw,3.1rem); margin:0 0 1.1rem; line-height:1.18; }
.rl-hero__lead{ color:#c3ccd6; font-size:1.08rem; line-height:1.75; margin:0 0 1.6rem; max-width:36rem; }
.rl-hero__area{
  display:inline-flex; align-items:center; gap:.6rem; color:#e7ecf1; font-weight:600;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:.6rem 1rem; border-radius:var(--radius); margin-bottom:1.8rem; font-size:.92rem;
}
.rl-hero__area i{ color:var(--primary); }
.rl-hero__ctas{ display:flex; flex-wrap:wrap; gap:1rem; }

.rl-hero__card{
  background:#fff; color:var(--c-text); border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem; box-shadow:var(--shadow-lg);
}
.rl-hero__card h2{ font-size:1.15rem; margin:0 0 .3rem; }
.rl-hero__card p{ color:var(--c-text-soft); font-size:.92rem; margin:0 0 1.2rem; }
.rl-hero__card ul{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.65rem; }
.rl-hero__card li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.92rem; font-weight:600; }
.rl-hero__card li i{ color:var(--primary); margin-top:.15rem; }

/* ============================================================
   SITUATION SELECTOR
   ============================================================ */
.rl-situations{ background:var(--c-bg-alt); }
.rl-situations__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.rl-situation{
  display:flex; gap:.9rem; align-items:flex-start;
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:1.3rem 1.2rem; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.rl-situation:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.rl-situation__ic{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; background:var(--primary-l); color:var(--primary-hover); font-size:1.1rem;
}
.rl-situation h3{ font-size:.98rem; margin:0 0 .25rem; }
.rl-situation p{ color:var(--c-text-soft); font-size:.87rem; margin:0; line-height:1.5; }

/* ============================================================
   PRIVAT VS GEWERBE
   ============================================================ */
.rl-split{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.rl-split__col{
  border-radius:var(--radius-lg); padding:2rem 1.9rem;
  border:1px solid var(--c-border);
}
.rl-split__col--dark{ background:var(--c-dark); color:#fff; border-color:transparent; }
.rl-split__col h3{ margin:0 0 .6rem; font-size:1.25rem; }
.rl-split__col--dark h3{ color:#fff; }
.rl-split__col p{ color:var(--c-text-soft); margin:0 0 1.2rem; line-height:1.6; }
.rl-split__col--dark p{ color:#c3ccd6; }
.rl-split__tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.rl-split__tags li{
  font-size:.85rem; font-weight:600; padding:.45rem .8rem; border-radius:var(--radius-pill);
  background:var(--c-bg-alt); color:var(--c-text);
}
.rl-split__col--dark .rl-split__tags li{ background:rgba(255,255,255,.1); color:#fff; }

/* ============================================================
   SERVICES
   ============================================================ */
.rl-services{ background:var(--c-bg-alt); }
.rl-services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.rl-service{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:1.5rem 1.3rem;
}
.rl-service__ic{
  width:44px; height:44px; border-radius:12px; margin-bottom:.9rem;
  display:grid; place-items:center; background:var(--primary-l); color:var(--primary-hover); font-size:1.15rem;
}
.rl-service h3{ font-size:1rem; margin:0 0 .4rem; }
.rl-service p{ color:var(--c-text-soft); font-size:.88rem; line-height:1.55; margin:0; }

/* ============================================================
   EMERGENCY / EVENT STRIP
   ============================================================ */
.rl-urgent{ background:linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-2) 100%); color:#fff; }
.rl-urgent__grid{ display:grid; grid-template-columns:1fr 1fr auto; gap:2.2rem; align-items:center; }
.rl-urgent__item h3{ color:#fff; margin:.3rem 0 .5rem; font-size:1.1rem; }
.rl-urgent__item p{ color:#c3ccd6; margin:0; line-height:1.65; font-size:.94rem; }
.rl-urgent__ic{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(239,73,51,.22); color:var(--primary); font-size:1.3rem;
}
.rl-urgent__cta{ text-align:center; }
.rl-urgent__cta p{ font-weight:700; margin:0 0 .7rem; }

/* ============================================================
   PROCESS
   ============================================================ */
.rl-process__list{ list-style:none; padding:0; margin:0; display:grid; gap:0; counter-reset:rl-step; }
.rl-process__list li{
  counter-increment:rl-step; position:relative; padding:0 0 1.6rem 3.2rem; border-left:2px solid var(--c-border);
}
.rl-process__list li:last-child{ border-color:transparent; padding-bottom:0; }
.rl-process__list li::before{
  content:counter(rl-step); position:absolute; left:-19px; top:0;
  width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
}
.rl-process__list h3{ margin:0 0 .3rem; font-size:1rem; }
.rl-process__list p{ color:var(--c-text-soft); margin:0; font-size:.9rem; line-height:1.55; }

/* ============================================================
   TRUST BADGES
   ============================================================ */
.rl-trust{ background:var(--c-bg-alt); }
.rl-trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.rl-trust__item{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:1.5rem 1.3rem; display:flex; gap:.9rem; align-items:flex-start;
}
.rl-trust__item i{ color:var(--primary); font-size:1.3rem; margin-top:.1rem; flex:0 0 auto; }
.rl-trust__item h3{ margin:0 0 .25rem; font-size:.98rem; }
.rl-trust__item p{ color:var(--c-text-soft); margin:0; font-size:.87rem; line-height:1.5; }

/* ============================================================
   LOCAL AREA
   ============================================================ */
.rl-area__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2.5rem; align-items:start; }
.rl-area__copy p{ color:var(--c-text-soft); line-height:1.75; margin:0 0 1.2rem; }
.rl-area__facts{ list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.rl-area__facts li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; }
.rl-area__facts i{ color:var(--primary); margin-top:.15rem; }
.rl-area__card{
  background:var(--c-bg-alt); border:1px solid var(--c-border); border-radius:var(--radius-lg);
  padding:1.7rem 1.6rem;
}
.rl-area__card h3{ margin:0 0 .8rem; font-size:1rem; }
.rl-area__districts{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.2rem; padding:0; list-style:none; }
.rl-area__districts li{
  font-size:.82rem; font-weight:600; background:#fff; border:1px solid var(--c-border);
  padding:.4rem .75rem; border-radius:var(--radius-pill); color:var(--c-text);
}
.rl-area__note{ font-size:.85rem; color:var(--c-text-soft); margin:0; line-height:1.6; }

/* ============================================================
   FAQ (list view, no accordion trick — different from base cleaning page)
   ============================================================ */
.rl-faq__inner{ max-width:860px; }
.rl-faq__list{ display:grid; gap:.9rem; }
.rl-faq__item{
  border:1px solid var(--c-border); border-radius:var(--radius); background:#fff; overflow:hidden;
}
.rl-faq__item[open]{ border-color:var(--primary); box-shadow:0 10px 26px rgba(239,73,51,.1); }
.rl-faq__item summary{
  list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.rl-faq__item summary::-webkit-details-marker{ display:none; }
.rl-faq__item summary i{ color:var(--primary); transition:transform .2s; flex:0 0 auto; }
.rl-faq__item[open] summary i{ transform:rotate(180deg); }
.rl-faq__a{ padding:0 1.3rem 1.2rem; }
.rl-faq__a p{ color:var(--c-text-soft); line-height:1.7; margin:0; }

/* ============================================================
   RELATED SERVICES (compact inline row, not a full card grid)
   ============================================================ */
.rl-related{ background:var(--c-bg-alt); }
.rl-related__list{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.rl-related__list a{
  display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius-pill); padding:.7rem 1.2rem; font-weight:600; font-size:.9rem; color:var(--c-text);
  text-decoration:none; transition:border-color .2s, color .2s;
}
.rl-related__list a:hover{ border-color:var(--primary); color:var(--primary-hover); }
.rl-related__list a i{ color:var(--primary); }

/* ============================================================
   FINAL CTA — single centered banner, distinct from the base page's
   two-column contact block
   ============================================================ */
.rl-cta{
  background:linear-gradient(150deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
  color:#fff; text-align:center;
}
.rl-cta__inner{ max-width:760px; margin:0 auto; }
.rl-cta h2{ color:#fff; margin:0 0 .8rem; }
.rl-cta p{ color:#c3ccd6; line-height:1.75; margin:0 0 1.8rem; }
.rl-cta__ctas{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1.6rem; }
.rl-cta__list{
  list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center;
  font-size:.9rem; color:#c3ccd6;
}
.rl-cta__list a{ color:#fff; font-weight:600; }
.rl-cta__list i{ color:var(--primary); margin-right:.4rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .rl-hero__inner{ grid-template-columns:1fr; gap:2.2rem; padding:3.2rem 0 3.5rem; }
  .rl-situations__grid,
  .rl-services__grid,
  .rl-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .rl-split{ grid-template-columns:1fr; }
  .rl-area__grid{ grid-template-columns:1fr; }
  .rl-urgent__grid{ grid-template-columns:1fr; text-align:center; gap:1.6rem; }
  .rl-urgent__ic{ margin-inline:auto; }
}
@media (max-width:640px){
  .rl-situations__grid,
  .rl-services__grid,
  .rl-trust__grid{ grid-template-columns:1fr; }
  .rl-cta__list{ flex-direction:column; gap:.7rem; }
}