.elementor-kit-5{--e-global-color-primary:#12296B;--e-global-color-secondary:#1668D8;--e-global-color-text:rgba(18, 41, 107, 0.7);--e-global-color-accent:#1FA85C;--e-global-color-weiss:#FFFFFF;--e-global-color-pale:#EDF1F8;--e-global-color-grau:#F4F6FA;--e-global-color-muted:rgba(18, 41, 107, 0.66);--e-global-color-faint:rgba(18, 41, 107, 0.55);--e-global-color-hairline:rgba(18, 41, 107, 0.12);--e-global-color-inputborder:rgba(18, 41, 107, 0.16);--e-global-color-onnavybody:rgba(255, 255, 255, 0.72);--e-global-color-onnavymeta:rgba(255, 255, 255, 0.66);--e-global-color-onnavyborder:rgba(255, 255, 255, 0.34);--e-global-typography-primary-font-family:"Poppins";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Poppins";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:500;--e-global-typography-eyebrow-font-family:"Poppins";--e-global-typography-eyebrow-font-size:13px;--e-global-typography-eyebrow-font-weight:700;--e-global-typography-eyebrow-text-transform:uppercase;--e-global-typography-eyebrow-line-height:1em;--e-global-typography-eyebrow-letter-spacing:2.2px;--e-global-typography-cardtitle-font-family:"Poppins";--e-global-typography-cardtitle-font-size:21px;--e-global-typography-cardtitle-font-weight:700;--e-global-typography-cardtitle-line-height:1.3em;--e-global-typography-cardtitle-letter-spacing:-0.3px;--e-global-typography-lead-font-family:"Poppins";--e-global-typography-lead-font-size:18px;--e-global-typography-lead-font-weight:500;--e-global-typography-lead-line-height:1.6em;--e-global-typography-lead-letter-spacing:0px;--e-global-typography-meta-font-family:"Poppins";--e-global-typography-meta-font-size:14.5px;--e-global-typography-meta-font-weight:400;--e-global-typography-meta-line-height:1.55em;--e-global-typography-meta-letter-spacing:0px;--e-global-typography-btn-font-family:"Poppins";--e-global-typography-btn-font-size:16px;--e-global-typography-btn-font-weight:700;--e-global-typography-btn-line-height:1em;--e-global-typography-btn-letter-spacing:0px;color:rgba(18, 41, 107, 0.7);font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:16px;font-weight:400;line-height:1.65em;}.elementor-kit-5 a{color:#1668D8;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;}.elementor-kit-5 a:hover{color:#12296B;}.elementor-kit-5 h1{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:60px;font-weight:700;line-height:1.2em;letter-spacing:-1.8px;}.elementor-kit-5 h2{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:40px;font-weight:700;line-height:1.14em;letter-spacing:-1.2px;}.elementor-kit-5 h3{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:32px;font-weight:700;line-height:1.18em;letter-spacing:-0.8px;}.elementor-kit-5 h4{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:24px;font-weight:700;line-height:1.25em;letter-spacing:-0.5px;}.elementor-kit-5 h5{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:21px;font-weight:700;line-height:1.3em;letter-spacing:-0.3px;}.elementor-kit-5 h6{color:#12296B;font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:18px;font-weight:700;line-height:1.35em;letter-spacing:-0.2px;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-family:"Poppins", Helvetica Neue, Arial, sans-serif;font-size:16px;font-weight:700;line-height:1em;color:#FFFFFF;background-color:#1668D8;border-radius:10px 10px 10px 10px;padding:19px 32px 19px 32px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:#FFFFFF;background-color:#12296B;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1328px;}.e-con{--container-max-width:1328px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:rgba(18, 41, 107, 0.92);--lightbox-ui-color:rgba(255,255,255,.8);--lightbox-ui-color-hover:#FFFFFF;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1023px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ---- POTERA: logo aspect ratio (never stretched) ---- */
.pot-logo img{width:auto!important;max-width:none!important}

/* ---- mobile phone icon button ---- */
.pot-phone-icon .elementor-button{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
.pot-phone-icon .elementor-button-content-wrapper{justify-content:center;gap:0}
.pot-phone-icon .elementor-button-text{display:none}

/* ---- card + arrow hover ---- */
.pot-card{transition:transform .25s ease,box-shadow .25s ease}
.pot-arrow{transition:background-color .25s ease}
.pot-card:hover .pot-arrow{background-color:#12296B}
.pot-tile{transition:transform .25s ease,background-color .25s ease}

/* ---- hero: rounded photo panel bleeding off the right edge ---- */
.pot-hero{position:relative}
.pot-hero>.pot-hero-rim{position:absolute;top:26px;right:0;bottom:0;width:52.5%;border-radius:300px 0 0 200px;z-index:1;pointer-events:none}
.pot-hero>.pot-hero-photo{position:absolute;top:44px;right:0;bottom:0;width:49.5%;border-radius:290px 0 0 170px;z-index:2}
.pot-hero>.pot-hero-copy{position:relative;z-index:3}

/* subpage hero panel */
.pot-hero-sub>.pot-hero-rim{top:20px;width:47%;border-radius:250px 0 0 170px}
.pot-hero-sub>.pot-hero-photo{top:34px;width:44%;border-radius:240px 0 0 150px}
.pot-hero-about>.pot-hero-rim{top:20px;width:47%;border-radius:230px 0 0 160px}
.pot-hero-about>.pot-hero-photo{top:34px;width:44%;border-radius:220px 0 0 140px}

/* ---- decorative arcs behind the headline ---- */
.pot-arc{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.pot-arc-blue{width:1320px;height:1320px;border:2.5px solid rgba(22,104,216,.18);left:-200px;bottom:-726px}
.pot-arc-green{width:1320px;height:1320px;border:2.5px solid rgba(31,168,92,.2);left:-60px;bottom:-790px}

/* ---- H1 highlight block ---- */
.pot-hl{display:inline-block;background:#1668D8;color:#FFFFFF;padding:2px 18px 8px;border-radius:10px}

/* ---- pre-footer CTA band decoration ---- */
.pot-cta{position:relative}
.pot-cta:before{content:"";position:absolute;top:-90px;right:-40px;width:320px;height:320px;border-radius:50%;background:rgba(22,104,216,.22);pointer-events:none;z-index:0}
.pot-cta>*{position:relative;z-index:1}

/* ---- gallery rail: snap scrolling, hidden scrollbar ---- */
.pot-rail{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}
.pot-rail::-webkit-scrollbar{display:none}
.pot-rail>.e-con,.pot-rail>.elementor-widget{scroll-snap-align:start;flex:0 0 auto}
.pot-rail-btn[disabled],.pot-rail-btn.is-off{opacity:.35;pointer-events:none}

/* ---- service pill row (in-page nav between the seven services) ---- */
.pot-pills{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.pot-pills::-webkit-scrollbar{display:none}

/* ---- form ---- */
.pot-form .elementor-field-group>label{margin-bottom:8px}
.pot-form .elementor-field-textual:focus{border-color:#1668D8;box-shadow:none;outline:none}
.pot-form input[type=checkbox]{accent-color:#1668D8;width:18px;height:18px}
.pot-form .elementor-field-type-acceptance .elementor-field-option{display:flex;align-items:flex-start;gap:10px}


/* ==== POTERA: things Elementor controls cannot express ==== */
/* The white rim is a constant edge around the photo panel, not a percentage
   that grows into a big white crescent on wide screens. */
.pot-hero > .pot-hero-rim { width: calc(49.5% + 46px); }
.pot-hero-sub > .pot-hero-rim,
.pot-hero-about > .pot-hero-rim { width: calc(44% + 43px); }

/* Nav pill hover paints the pointer pseudo-element, which needs the radius too. */
.pot-nav .elementor-nav-menu--main .elementor-item:before,
.pot-nav .elementor-nav-menu--main .elementor-item:after { border-radius: 10px; }
/* ---- contact column: long addresses wrap inside their card ---- */
.pot-contact-col .elementor-icon-list-text,
.pot-contact-col a{overflow-wrap:anywhere;word-break:break-word}
.pot-contact-col .elementor-icon-list-item{align-items:flex-start}

/* ==== POTERA responsive ==== */
/* The hero stacks from tablet down: photo below the copy, keeping only its
   top-left curve, exactly as the handoff specifies for 768-1023px. */
@media (max-width:1024px){
  .pot-hero > .pot-hero-rim { display:none; }
  .pot-hero > .pot-hero-photo {
    position:relative; top:auto; right:auto; bottom:auto;
    width:100%; height:340px; margin-top:20px; border-radius:150px 0 0 0;
  }
  .pot-hero-sub > .pot-hero-photo,
  .pot-hero-about > .pot-hero-photo { height:300px; border-radius:130px 0 0 0; }
  .pot-arc-blue { width:820px; height:820px; left:-160px; bottom:-380px; }
  .pot-arc-green { display:none; }
}
@media (max-width:767px){
  .pot-hero > .pot-hero-photo { height:300px; margin-top:18px; border-radius:130px 0 0 0; }
  .pot-hero-sub > .pot-hero-photo,
  .pot-hero-about > .pot-hero-photo { height:250px; border-radius:110px 0 0 0; }
  .pot-arc-blue { width:520px; height:520px; left:-120px; bottom:120px; }
  .pot-cta:before { width:220px; height:220px; top:-70px; right:-60px; }
}
/* Nothing may push the page wider than the screen. */
body { overflow-x:hidden; }

/* ==== POTERA mobile header ====
   Elementor's flex-wrap / order / grow controls have no responsive variants and
   every container defaults to --flex-wrap-mobile:wrap, so the row is pinned here.

   Note on the layout method: Elementor emits `max-width: fit-content` next to
   `width` on any container with a custom width, which caps the box so flex-grow
   cannot expand it. Growing the logo therefore does nothing and space-between
   spreads all three items. An auto margin on the actions box is used instead:
   auto margins absorb free space before justify-content is applied, so the
   phone button and burger are pushed together to the right edge regardless of
   how the logo is sized. */

@media (max-width:1024px){

  .pot-bar{ flex-wrap:nowrap !important; }

  .pot-header-bar{
    position:relative;                 /* anchor for the dropdown panel */
    gap:0 !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }

  .pot-header-bar > .pot-logo-box{
    order:1;
    flex:0 1 auto;
    min-width:0;
    max-width:none !important;
    margin:0 !important;
  }

  /* this auto margin is what groups the pair on the right */
  .pot-header-bar > .pot-actions{
    order:2;
    flex:0 0 auto;
    width:auto !important;
    max-width:none !important;
    margin-inline-start:auto !important;
    margin-inline-end:8px !important;
  }

  .pot-header-bar > .pot-nav-box{
    order:3;
    flex:0 0 auto;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* the desktop pill list must not reserve any width once the burger is on */
  .pot-nav-box .elementor-nav-menu--main{ display:none !important; }
  .pot-nav-box .elementor-widget-container{ display:flex; justify-content:flex-end; }

  /* --- the control pair: two 44x44 boxes on one centre line --- */
  .pot-phone-icon .elementor-button{
    width:44px; height:44px; padding:0;
    display:flex; align-items:center; justify-content:center;
  }
  .pot-phone-icon .elementor-button-content-wrapper{ justify-content:center; gap:0; }
  .pot-phone-icon .elementor-button-icon{ margin:0; display:flex; align-items:center; }
  .pot-phone-icon svg{ width:18px; height:18px; }

  .pot-nav-box .elementor-menu-toggle{
    width:44px; height:44px; padding:0; margin:0 !important; border:0;
    display:flex !important; align-items:center; justify-content:center;
    line-height:1; flex:0 0 auto;
  }
  .pot-nav-box .elementor-menu-toggle svg{ width:24px; height:24px; display:block; }

  /* --- dropdown panel: full width of the header, dropping below it ---
     Every Elementor container sets --position:relative, so .pot-nav-box (now
     only 44px wide) was acting as the dropdown's containing block, which is
     why the panel rendered as a narrow strip clipped off the right edge.
     The box is made static so the panel resolves against the header row.
     The panel element itself is injected by Elementor's JS at runtime. */
  .pot-header-bar > .pot-nav-box{ position:static !important; }
  .pot-nav-box .elementor-widget-nav-menu{ position:static !important; }
  .pot-nav-box .elementor-widget-container{ position:static !important; }

  .pot-nav-box .elementor-nav-menu--dropdown,
  .pot-nav-box .elementor-nav-menu__container.elementor-nav-menu--dropdown{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    border-radius:0 0 14px 14px;
    box-shadow:0 18px 40px rgba(18,41,107,.14);
  }
  .pot-nav-box .elementor-nav-menu--dropdown .elementor-item{
    justify-content:flex-start;
    white-space:nowrap;
  }

  /* logo keeps its aspect and never crowds the pair */
  .pot-logo-box .elementor-widget-image{ width:auto; }
  .pot-logo img{ height:44px !important; width:auto !important; max-width:160px !important; }

  .pot-utility{ justify-content:center !important; }
}

@media (max-width:767px){
  .pot-logo img{ height:42px !important; max-width:140px !important; }
}

/* ==== POTERA stacked button pairs (mobile) ====
   Both buttons in a pair take the same width so they read as one block, but
   the block is inset rather than edge-to-edge. 340px is chosen so the longest
   label ("Kostenlose Offerte anfordern" + chevron, ~311px at 15.5px/700) never
   wraps: on a 430px screen it leaves a clear margin, and on narrow phones the
   cap simply yields to the available width instead of breaking the label. */
@media (max-width:767px){
  .pot-btn-pair{
    width:100% !important;
    max-width:340px !important;
    align-items:stretch !important;
  }
  .pot-btn-pair .elementor-widget-button{ width:100%; }
  .pot-btn-pair .elementor-button{ width:100%; }
}

/* ==== POTERA service pill rail ====
   Seven service names never fit one phone screen, so the row is a horizontal
   rail: it shows what fits and slides for the rest. The pills must keep their
   natural width (shrink:0) or they squeeze and clip their labels. */
.pot-pills{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.pot-pills::-webkit-scrollbar{ display:none; }
.pot-pills > .pot-pill{
  flex:0 0 auto !important;
}
.pot-pills .elementor-heading-title{ white-space:nowrap; }

/* Guarantee the next pill is visibly cut off: the rail is padded on the right
   so the last item can never sit flush with the edge, which is what makes a
   horizontal scroll discoverable at a glance. */
@media (max-width:767px){
  .pot-pills{ padding-right:34px !important; }
}

/* right-edge fade, shown only while there is more to slide to */
.pot-pills{ position:relative; }
.pot-pills.pot-has-more{
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
          mask-image:linear-gradient(to right, #000 calc(100% - 46px), transparent 100%);
}
.pot-pills.pot-has-prev.pot-has-more{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 46px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 46px), transparent 100%);
}
.pot-pills.pot-has-prev:not(.pot-has-more){
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px);
          mask-image:linear-gradient(to right, transparent 0, #000 24px);
}

/* ==== POTERA before/after comparison ====
   Two real Elementor image widgets stacked in one frame. The "before" photo is
   clipped to --pos, so dragging the handle wipes between the two states. The
   frame owns the height; both photos fill it identically or the wipe would
   not line up. */

.pot-ba{
  --pos: 50%;
  position:relative;
  isolation:isolate;
  cursor:ew-resize;
  touch-action:pan-y;              /* let the page still scroll vertically */
  user-select:none;
  -webkit-user-select:none;
}

/* both photos occupy the same box */
.pot-ba > .elementor-widget-image{
  margin:0;
  width:100%;
}
.pot-ba > .pot-ba-after{ position:relative; z-index:1; }
.pot-ba > .pot-ba-before{
  position:absolute;
  inset:0;
  z-index:2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.pot-ba > .elementor-widget-image .elementor-widget-container,
.pot-ba > .elementor-widget-image figure,
.pot-ba > .elementor-widget-image .elementor-image{ height:100%; }
.pot-ba img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}

/* badges sit above both photos */
.pot-ba > .pot-ba-badge{
  position:absolute;
  top:14px;
  z-index:4;
  pointer-events:none;
}
.pot-ba > .pot-ba-badge-before{ left:14px; }
.pot-ba > .pot-ba-badge-after{ right:14px; }

/* the divider line + round grip */
.pot-ba > .pot-ba-handle{
  position:absolute;
  top:50%;
  left:var(--pos);
  z-index:5;
  transform:translate(-50%, -50%);
  cursor:ew-resize;
}
.pot-ba > .pot-ba-handle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:200vh;
  background:#FFFFFF;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 1px rgba(18,41,107,.10);
  z-index:-1;
}
.pot-ba > .pot-ba-handle:focus-visible{
  outline:3px solid #1668D8;
  outline-offset:3px;
}

/* while dragging, don't animate and don't select text */
.pot-ba.is-dragging{ cursor:grabbing; }
.pot-ba.is-dragging > .pot-ba-handle{ cursor:grabbing; }

@media (max-width:767px){
  .pot-ba > .pot-ba-badge{ top:10px; }
  .pot-ba > .pot-ba-badge-before{ left:10px; }
  .pot-ba > .pot-ba-badge-after{ right:10px; }
}

/* ==== POTERA German typography on narrow screens ====
   German compounds run long (Unterhaltsreinigung, Abnahmegarantie), so on a
   phone they can overflow their box instead of breaking. The page is marked
   lang=de-CH, so the browser can hyphenate them properly. */
@media (max-width:767px){
  h1, h2, h3, h4,
  .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-icon-list-text{
    overflow-wrap:break-word;
    -webkit-hyphens:auto;
    hyphens:auto;
  }
  /* buttons keep their label on one piece where it fits */
  .elementor-button-text{ overflow-wrap:break-word; hyphens:auto; }
}
/* Descenders must never be clipped by a scroll container. */
.pot-pills > .pot-pill{ padding-bottom:calc(0.35em + 8px); }

/* ==== POTERA descender reserve ====
   The design calls for tight display leading (H1 1.1, H2 1.14), which is
   correct, but at that leading the tails on g/j/p/y sit at the very edge of
   the line box. Inside a container that clips, they get sliced. A small
   bottom reserve in exactly those contexts fixes it without loosening the
   typography anywhere. */
.pot-hero .elementor-heading-title,
.pot-cta .elementor-heading-title,
.pot-ba .elementor-heading-title,
.pot-pills .elementor-heading-title,
.pot-hero .elementor-button-text,
.pot-cta .elementor-button-text{
  padding-bottom:0.09em;
}
/* the highlight block sets its own bottom padding already */
.pot-hero .pot-hl{ padding-bottom:8px; }

/* ==== POTERA mobile width guard ====
   Headings and paragraphs carry a measure (max-width up to 760px), which
   Elementor writes as width:var(--container-widget-width, 760px). If a
   parent ever fails to define that variable the widget takes the fixed px
   value and overflows a phone screen, where it is then clipped. Nothing may
   be wider than its parent on mobile. */
@media (max-width:767px){
  .elementor-widget{ max-width:100% !important; }
  .elementor-widget-heading .elementor-heading-title,
  .elementor-widget-text-editor{ max-width:100%; }
}/* End custom CSS */