/* SaniBonn: design details that Elementor V4 classes cannot store.
   Everything else (colours, type sizes, spacing, layout) lives in Elementor:
   global variables (sb-*) and global classes (sb-*), editable in the editor.
   Selectors use the global class labels, which Elementor prints as class names. */

/* Base */
body{background:#f5f7f8;color:#0f2131;font-family:"Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html{scroll-padding-top:96px}
:focus-visible{outline:3px solid #4fb3e5;outline-offset:3px;border-radius:2px}
.skip-link.screen-reader-text:focus{background:#0f2131;color:#fff;padding:10px 14px;border-radius:6px;z-index:100;clip:auto;width:auto;height:auto;top:12px;left:12px}
#sb-content{display:block;height:0;outline:none}

/* Display type: semi-expanded Archivo and balanced line breaks */
.e-heading-base,.sb-display{font-stretch:112%;text-wrap:balance}
.e-heading-base{font-weight:650}
.sb-h1 em{display:block;font-style:normal;color:#f07a22}
.sb-mono,.sb-plate-label,.sb-eyebrow{font-feature-settings:"zero" 1}
.sb-nowrap{white-space:nowrap}

/* Eyebrow: short orange rule before the label */
.sb-eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:#f07a22;margin-right:10px;vertical-align:middle;transform:translateY(-1px)}

/* Typenschild: four rivets in the corners */
.sb-plate{position:relative}
.sb-plate::before{content:"";position:absolute;inset:10px;pointer-events:none;border-radius:2px;
  --rv:radial-gradient(circle at 35% 35%,#fff 0 20%,#b9c6cf 45%,#8b9ca8 70%,transparent 72%);
  background:var(--rv) left top/7px 7px no-repeat,var(--rv) right top/7px 7px no-repeat,var(--rv) left bottom/7px 7px no-repeat,var(--rv) right bottom/7px 7px no-repeat}

/* Header template wrapper: let the sticky header stick to the page */
.sb-site-header,.sb-site-header>.elementor,.sb-site-header>.elementor>.e-con-inner{display:contents}

/* Photo tiles: image behind a dark gradient */
.sb-tile>.e-con{position:relative;z-index:1}
.sb-tile{isolation:isolate}
.sb-tile .sb-tile-img{z-index:-2}
.sb-tile-shade::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(15,33,49,0) 15%,rgba(15,33,49,.55) 50%,rgba(15,33,49,.9) 100%)}
.sb-tile .sb-tile-img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.sb-tile:hover .sb-tile-img{transform:scale(1.035)}
.sb-photo-hero img,.sb-photo-hero{object-position:center 40%}
.sb-photo img{width:100%;height:100%;object-fit:cover}

/* Links with a moving arrow */
.sb-link,.sb-btn{transition:gap .25s cubic-bezier(.16,1,.3,1),background-color .25s,border-color .25s,color .25s}
.sb-link:hover,a:hover .sb-link{gap:12px}
.sb-route:hover .sb-route-arrow{transform:translateX(4px)}
.sb-route-arrow{transition:transform .3s cubic-bezier(.16,1,.3,1)}

/* Process line behind the step numbers (desktop) */
.sb-process{position:relative}
@media (min-width:961px){.sb-process::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:#d3dde3}}
.sb-step-num{position:relative;z-index:1}

/* Timeline dots (Heizung) */
.sb-tl-item::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:#0f2131;border:2px solid #4fb3e5}

/* Text links inside paragraphs (footer legal links, inline hints) */
.e-paragraph-base a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.e-paragraph-base a:hover{color:#0f2131}
.sb-footer .e-paragraph-base a:hover{color:#fff}

/* Package inclusions: row borders when the grid wraps */
@media (max-width:960px){.sb-included-item{border-top:1px solid #d3dde3!important}}

/* Header: mobile navigation panel (state set by sanibonn.js) */
.sb-header{transition:border-color .3s,background-color .3s}
.sb-header.is-stuck{border-bottom-color:#d3dde3!important}
.sb-nav-link[aria-current="page"]{color:#0f2131!important;font-weight:600!important}
/* Like the approved mockup, the burger menu is used up to 1180 px (the layout itself switches at 960 px). */
@media (min-width:961px) and (max-width:1180px){
  .sb-header .sb-menu-toggle{display:flex!important}
  .sb-header .sb-wrap > a.sb-btn{display:none!important}
  .sb-nav .e-546df8ec-f9f3{display:block!important}
  .sb-nav .e-32db0903-ac45,.sb-nav a.sb-btn{display:flex!important;width:100%;margin-top:18px}
  .sb-nav{padding:12px 40px 24px!important}
}
@media (max-width:1180px){
  .sb-nav{position:absolute!important;top:100%;left:0;right:0;display:none!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;margin:0!important;padding:12px 24px 24px!important;background:#f5f7f8;border-bottom:1px solid #d3dde3;box-shadow:0 30px 40px -20px rgba(15,33,49,.25);max-height:calc(100dvh - 64px);overflow-y:auto}
  .sb-nav.is-open{display:flex!important}
  .sb-nav .sb-nav-link{padding:16px 4px!important;font-size:1.12rem!important;border-bottom:1px solid #d3dde3;border-radius:0!important;text-align:left!important;box-shadow:none}
  .sb-nav .sb-nav-link[aria-current="page"]{color:#0f2131!important}
  .sb-nav .sb-nav-cta{margin-top:18px}
}
@media (max-width:767px){.sb-nav{padding:8px 16px 20px!important}}

/* Mobile action bar */
@media (max-width:767px){body{padding-bottom:72px}}
.sb-mobile-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}

/* Fluid headings between tablet and full desktop, as in the approved mockup (clamp values from mockup styles.css).
   At 1440 px and wider the Elementor sizes apply unchanged. */
@media (min-width:961px) and (max-width:1439px){
  .sb-h1{font-size:min(4.6vw,65.6px)!important}
  .sb-h2{font-size:clamp(32px,3.6vw,50.4px)!important}
  .sb-tile-title{font-size:clamp(24px,2.2vw,31.68px)!important}
  .sb-lead{font-size:clamp(17.28px,1.3vw,19px)!important}
}

/* Burger panel between 961 and 1180 px: align with the 40 px page gutter, keep the divider lines. */
@media (min-width:961px) and (max-width:1180px){
  .sb-header .sb-nav{padding:12px 40px 24px!important}
  .sb-header .sb-nav .sb-nav-link{border-bottom:1px solid #d3dde3!important}
}

/* =====================================================================
   Phase 5 - premium refinements (scoped; selectors use the global class
   labels printed by Elementor V4, so all content stays editable).
   Tokens: navy #0f2131, orange #f07a22, line #d3dde3, stone #e6ecef,
   slate #4a5b68. No new fonts, no JS, no heavy effects.
   ===================================================================== */

/* -- Shared: rivet layer of the plate stays inside the card
   (an Elementor rule gave ::before 100% width/height, which pushed the
   lower rivets outside the card) */
.sb-plate::before{width:auto!important;height:auto!important}

/* -- Shared: tabular figures for prices and numbers -- */
.sb-gross,.sb-kw,.sb-pkg-row,.sb-mono{font-variant-numeric:tabular-nums}

/* -- Shared: focus for whole-card links -- */
.sb-tile:focus-within,.sb-fork-card:focus-within{outline:3px solid #4fb3e5;outline-offset:3px}

/* ---------- Home: "So laeuft Ihre Anfrage ab." ---------- */
/* The V4 grid had a fixed two-row template, which reserved an empty row. */
.sb-process{grid-template-rows:none!important;grid-auto-rows:auto!important;column-gap:20px!important;row-gap:20px!important}
.sb-step{position:relative;padding:28px 24px 30px!important;background:#fff;border:1px solid #d3dde3;border-radius:8px;transition:border-color .25s}
.sb-step:hover{border-color:#b7c5cf}
.sb-step-num{width:48px!important;height:48px!important;margin:0 0 22px!important;font-family:"JetBrains Mono",ui-monospace,monospace!important;font-size:15px!important;font-weight:600!important;letter-spacing:.02em;background:#fff!important;box-shadow:0 0 0 6px #fff}
.sb-step-num-last{background:#f07a22!important;border-color:#f07a22!important;color:#0f2131!important;box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(240,122,34,.35)}
.sb-step:has(.sb-step-num-last){border-color:#f07a22;box-shadow:inset 0 3px 0 #f07a22}
.sb-step .e-paragraph-base:not(.sb-step-num){color:#4a5b68;line-height:1.6}
/* Connecting line through the markers (desktop): runs behind the cards and shows in the gaps */
@media (min-width:961px){
  .sb-process::before{top:52px!important;left:48px!important;right:48px!important;width:auto!important;background:linear-gradient(90deg,#c9d6df 0,#c9d6df 75%,#f07a22 100%)!important;height:2px!important;z-index:0}
  .sb-step{z-index:1}
}
/* Tablet: 2 x 2 cards */
@media (min-width:768px) and (max-width:960px){
  .sb-process{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Phone: clean vertical sequence with a connecting line */
@media (max-width:767px){
  .sb-process{position:relative;grid-template-columns:minmax(0,1fr)!important;row-gap:0!important}
  .sb-process::before{content:"";position:absolute;display:block;left:23px!important;top:28px!important;bottom:40px!important;width:2px!important;height:auto!important;right:auto!important;background:linear-gradient(180deg,#c9d6df 0,#c9d6df 80%,#f07a22 100%);z-index:0}
  .sb-step{display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;column-gap:18px!important;align-items:start;padding:0 0 28px!important;background:transparent;border:0!important;box-shadow:none!important;z-index:1}
  .sb-step:last-child{padding-bottom:0!important}
  .sb-step-num{margin:0!important;grid-row:1/span 2;box-shadow:0 0 0 6px #f5f7f8}
  .sb-step-num-last{box-shadow:0 0 0 6px #f5f7f8,0 0 0 7px rgba(240,122,34,.35)}
  .sb-step>.e-con,.sb-step>.sb-stack{padding-top:10px}
}

/* ---------- Home: "Drei Gewerke" tiles ---------- */
.sb-tile{transition:box-shadow .3s}
.sb-tile:hover{box-shadow:0 18px 40px -24px rgba(15,33,49,.55)}
.sb-tile-title{letter-spacing:-.01em}

/* ---------- Home: "Festpreise" plate ---------- */
.sb-pkg-row{align-items:baseline}
.sb-plate-dark .sb-pkg-row:not(:first-child){padding-top:18px!important;padding-bottom:16px!important}

/* ---------- Home: "Handwerk" benefits ---------- */
.sb-pledge{padding-top:20px!important;padding-bottom:20px!important;column-gap:18px!important;align-items:flex-start!important}
.sb-pledge .sb-icon{flex:0 0 44px;width:44px!important;height:44px!important;padding:11px;box-sizing:border-box;background:#e6ecef;border-radius:8px}
.sb-pledge .sb-icon svg{width:100%;height:100%}

/* ---------- Home: "Einblicke" gallery ---------- */
.e-13918b4f-da88{gap:14px!important}
.e-13918b4f-da88 img{border-radius:8px}

/* ---------- Sanitaer: "Mehr als ein neues Bad." service features ---------- */
.sb-service-grid{column-gap:20px!important;row-gap:20px!important}
.sb-service{position:relative;padding:30px 28px 32px!important;background:#fff;border:1px solid #d3dde3;border-radius:8px;row-gap:18px!important;transition:border-color .25s}
.sb-service::before{content:"";position:absolute;left:28px;top:-1px;width:40px;height:3px;background:#f07a22;border-radius:0 0 2px 2px}
.sb-service:hover{border-color:#b7c5cf}
.sb-service .sb-h3{font-size:20px!important}
.sb-service .sb-body{line-height:1.6}
.sb-bg-white .sb-service{background:#f9fbfb}

/* ---------- Sanitaer: bathroom concept family ---------- */
/* level-marker spacing now set natively in the Elementor global class sb-tier-lvl */
.sb-tier-title{margin-bottom:14px!important}
.sb-tiers{overflow:hidden;border-radius:8px!important}

/* ---------- Sanitaer FAQ (answers stay visible) ---------- */
.sb-faq-item{padding-top:26px!important;padding-bottom:26px!important;row-gap:10px!important}
.sb-faq-item:last-child{border-bottom:1px solid #d3dde3}
.sb-faq-q{line-height:1.35!important}
.sb-faq-item .e-paragraph-base:not(.sb-faq-q){max-width:64ch;line-height:1.65}

/* ---------- Shared closing CTA band ---------- */
.sb-cta-strip{position:relative;overflow:hidden;isolation:isolate}
.sb-cta-strip::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:32px 32px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.sb-cta-strip::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#f07a22}

/* ---------- Klima: "In jedem Klimapaket enthalten" ----------
   Short items in row 1, the two detailed items in row 2 (desktop);
   hairline separators via the grid gap; a single readable list on phones. */
.sb-included-grid{gap:1px!important;background:#d3dde3!important;overflow:hidden}
.sb-included-item{background:#fff!important;border:0!important;display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:16px!important;row-gap:4px;align-items:center!important;align-content:center;padding:22px 24px!important;min-height:0!important}
.sb-included-item>.sb-icon,.sb-included-item>.sb-icon-sm,.sb-included-item>svg,.sb-included-item>.e-svg-base{grid-row:1/span 2;width:44px!important;height:44px!important;padding:11px;box-sizing:border-box;background:#e6ecef;border-radius:8px;margin:0!important}
.sb-included-item>:not(:first-child){grid-column:2;margin:0!important}
.sb-included-item:not(:has(>:nth-child(3)))>:first-child{grid-row:1!important}
.sb-included-item>:nth-child(2):not(:last-child){align-self:end}
.sb-included-item>:nth-child(3){align-self:start}
@media (min-width:961px){
  .sb-included-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .sb-included-item:nth-child(-n+3){grid-column:span 2}
  .sb-included-item:nth-child(n+4){grid-column:span 3}
}
@media (min-width:600px) and (max-width:960px){
  .sb-included-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sb-included-item:last-child{grid-column:1/-1}
}
@media (max-width:599px){
  .sb-included-grid{grid-template-columns:minmax(0,1fr)!important}
  .sb-included-item{padding:18px!important}
}
/* Detailed conditions: visibly a separate, quieter panel */
.sb-conditions{border-left:3px solid #0f2131!important}

/* ---------- Leistungen & Buchen: route cards ---------- */
.sb-fork-card{transition:border-color .25s,box-shadow .25s}
.sb-fork-card:hover{box-shadow:0 14px 30px -22px rgba(15,33,49,.45)}

/* ---------- Footer ---------- */
@media (max-width:767px){.sb-footer-link{display:inline-block;padding-top:6px;padding-bottom:6px}}

@media (prefers-reduced-motion:reduce){.sb-step,.sb-tile,.sb-service,.sb-fork-card{transition:none!important}}

/* =====================================================================
   Polish pass (07.11.2026): hover feedback, sticky side columns,
   hero spacing, scroll reveal. Desktop-only where noted.
   ===================================================================== */

/* -- Links in dark areas: stay light on hover (the general rule above
      turns paragraph links navy, which vanished on navy backgrounds) -- */
.sb-stagebar .e-paragraph-base a:hover,
.sb-bg-ink .e-paragraph-base a:hover,
.sb-plate-dark .e-paragraph-base a:hover,
.sb-cta-strip .e-paragraph-base a:hover{color:#fff}

/* -- Main navigation (desktop): a thin orange line under the text grows from the centre on hover;
      the current page keeps the full line. The other links fade slightly while one is hovered. -- */
@media (min-width:1181px){
  .sb-header .sb-nav-link{position:relative;border-radius:0!important;box-shadow:none!important;transition:color .3s ease!important}
  .sb-header .sb-nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:#f07a22;transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
  .sb-header .sb-nav-link:hover::after,.sb-header .sb-nav-link:focus-visible::after,.sb-header .sb-nav-link[aria-current="page"]::after{transform:scaleX(1)}
  .sb-header .sb-nav:hover .sb-nav-link:not(:hover){color:#5a6b77!important}
  .sb-header .sb-nav-link:hover{color:#0f2131!important}
  .sb-header .sb-nav-link:focus-visible{outline:2px solid #f07a22;outline-offset:3px;border-radius:4px!important}
}
/* Burger panel (up to 1180 px): the current page gets an orange bar on the left, hover a light tint. */
@media (max-width:1180px){
  .sb-nav .sb-nav-link{transition:background-color .2s,color .2s,padding-left .25s cubic-bezier(.16,1,.3,1)!important}
  .sb-nav .sb-nav-link:hover{background:rgba(240,122,34,.06)!important;padding-left:10px!important}
  .sb-nav .sb-nav-link[aria-current="page"]{box-shadow:inset 3px 0 0 #f07a22!important;padding-left:14px!important}
}

/* -- Buttons: visible lift on hover (the colour change alone was too subtle) -- */
.sb-btn{transition:gap .25s cubic-bezier(.16,1,.3,1),background-color .25s,border-color .25s,color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s!important}
.sb-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(240,122,34,.75)}
.sb-btn-line:hover,.sb-btn-dark:hover,.sb-btn-light:hover,.sb-btn-ghost-light:hover{box-shadow:0 10px 22px -12px rgba(15,33,49,.45)}
.sb-btn:active{transform:translateY(0);box-shadow:none}
.sb-mobile-bar .sb-btn:hover{transform:none;box-shadow:none}

/* -- Side columns that are much shorter than their neighbour stay in view
      while the list scrolls past (Sanitaer FAQ, Heizung "Was wir gemeinsam klaeren") -- */
@media (min-width:961px){
  .elementor-element-74fb533b,
  .elementor-element-39d2e982{position:sticky;top:112px;align-self:start}
}

/* -- Split heroes: breadcrumb lines up with the top of the photo,
      the text block sits centred in the remaining space (desktop) -- */
@media (min-width:961px){
  .e-grid-base>.sb-stack:has(>.sb-crumbs:first-child){align-self:stretch}
  .e-grid-base>.sb-stack:has(>.sb-crumbs:first-child)>.sb-crumbs+*{margin-top:auto!important}
  .e-grid-base>.sb-stack:has(>.sb-crumbs:first-child)>:last-child{margin-bottom:auto!important}
}

/* -- Klima photo hero: breadcrumb at the top of the photo, headline at the bottom,
      hero no taller than the screen -- */
@media (min-width:961px){
  .elementor-element-3bae8318{min-height:min(720px,calc(100svh - 72px))!important}
  .elementor-element-3bae8318>.sb-wrap{flex:1 1 auto;padding-top:40px!important}
  .elementor-element-3bae8318>.sb-wrap>.sb-crumbs:first-child{margin-bottom:auto!important}
}

/* -- Scroll reveal: elements below the first screen fade up once (set by sanibonn.js).
      Without JavaScript nothing is hidden. -- */
.sb-reveal{opacity:0;transform:translateY(22px);transition:none!important}
.sb-reveal.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)!important;transition-delay:var(--sb-d,0ms)!important}
@media (prefers-reduced-motion:reduce){.sb-reveal{opacity:1!important;transform:none!important}}

/* -- Review cards: equal height, review text limited to 6 lines with "…",
      name and Google link aligned at the bottom of every card -- */
#bewertungen article{height:100%;box-sizing:border-box}
#bewertungen article .sb-body{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
#bewertungen article>.sb-mono{margin-top:auto!important;padding-top:10px}
@media (max-width:767px){#bewertungen article .sb-body{-webkit-line-clamp:7;line-clamp:7}}

/* -- Home contact card: divider lines between the opening-hours rows;
      narrower card and smaller phone number between 961 and 1180 px -- */
.elementor-element-3c43265a,.elementor-element-32ff8543{border-bottom:1px solid #2c4a63}
.elementor-element-3b13f281{min-width:0}
@media (min-width:961px) and (max-width:1180px){
  .elementor-element-540bae04{width:380px!important}
  .elementor-element-1848a510{font-size:clamp(44px,5.6vw,64px)!important}
}
@media (max-width:1180px){
  .elementor-element-92982d00{flex-direction:column!important}
  .elementor-element-92982d00>.sb-btn{width:100%!important;flex:0 0 auto!important}
}

/* -- Home contact card buttons: wrap onto two lines instead of pushing past the card edge
      when the labels get longer (browser translation, larger system font). -- */
.elementor-element-92982d00{flex-wrap:wrap!important;row-gap:12px!important}
.elementor-element-92982d00>.sb-btn{white-space:nowrap}
@media (min-width:1181px){.elementor-element-92982d00>.sb-btn{flex:1 1 0!important;width:auto!important}}
.sb-btn-ghost-light{border-color:rgba(255,255,255,.45)!important}
.sb-btn-ghost-light:hover{border-color:#fff!important}

/* -- Breadcrumbs hidden on all pages (client request, 10.11.2026). The element stays in the
      page content, so the hero layout rules above keep working. -- */
.sb-crumbs{display:none!important}
/* Klima photo hero without the breadcrumb: headline block stays at the bottom of the photo. */
.elementor-element-3bae8318>.sb-wrap>.sb-crumbs:first-child+*{margin-top:auto!important}