/*
 * autocell start page design. The start page and the request page of
 * autocell.io are OnPage Composer pages made of blocks (.row.bbox) with
 * helper classes (_col_pri/_col_sec/_col_tri colours, _rnd rounded corners,
 * _opad/_ipad padding, _card_grid/_card_cnt cards, _ico_*, _img_* sizes).
 * The rules for these classes were lost (2026-10-23 to 27), so this file
 * defines them again, in the look of www.autocell.io: Inter, outlined / light /
 * yellow rounded blocks. Colours: primary #161616, secondary #fbda38,
 * tertiary #f6f6f6.
 *
 * Content comes from the OnPage Composer and is not touched. Nothing here
 * applies to pages without .bbox blocks, except the body font.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #161616;
}

/* A JTL banner left over on the start page: a big copy of the offer image
   that links to an old staging address. The offer block already shows it. */
.banner.ac_banner_teaser { display: none; }

/* Three loose pieces at the top of the page content, right after the hero:
   a dark box with a big logo (black wordmark on dark, unreadable), a box with
   the text "Wir bringen mit unserer 360° Gesamtlösung ..." and a button.
   They were covered by the banner above and are hidden here. To show them
   again, delete this rule and style the three pieces. */
#content > .bbox._col_pri._opad,
#content > .opc-Button { display: none; }

/* Footer: the white autocell logo above the legal links. */
#footer-boxes::before {
  content: "";
  display: block;
  height: 3rem;
  flex: 1 0 23%;
  background-repeat: no-repeat;
  background-image: url("/bilder/intern/shoplogo/autocell_wht.svg");
}

/* Page width and spacing, like the website: 4vw at the sides, 1600px at most. */
#main-wrapper > .container-fluid:has(> .row.bbox) {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem max(4vw, 16px) 0;
}

/* Blocks */
#main-wrapper .row.bbox {
  margin: 0 0 1.2rem;
  padding: 3.2rem 4rem;
  border-radius: 1.8rem;
  overflow: hidden;
  position: relative;
}
#main-wrapper .row.bbox > .col { padding-left: 0; padding-right: 0; }
#main-wrapper .row.bbox._head_banner { padding-bottom: 0; }
#main-wrapper .row.bbox._col_sec { align-items: center; }

._col_tri { background: #f6f6f6; color: #161616; }
/* Primary blocks are outlined, not filled: less contrast, and the black
   icons and the schema picture are made for a light background. */
._col_pri { background: transparent; color: #161616; border: 1.5px solid #cfcfcf; }
._card_cnt._col_pri { background: #fff; border-color: #dcdcdc; }
._col_sec { background: #fbda38; color: #161616; }
._col_tri h1, ._col_tri h2, ._col_tri h3, ._col_tri h4,
._col_pri h1, ._col_pri h2, ._col_pri h3, ._col_pri h4,
._col_sec h1, ._col_sec h2, ._col_sec h3, ._col_sec h4 { color: #161616; }
._col_pri p, ._col_pri span, ._col_pri li { color: #161616; }
/* Fixed, not inherited: on yellow and light blocks the text is always dark. */
._col_sec p, ._col_sec span, ._col_sec li, ._col_sec a:not(.btn),
._col_tri p, ._col_tri span, ._col_tri li { color: #161616 !important; }

/* The padding of the block is on the row itself. */
._opad { padding: 0; }
._ipad { padding-left: 0; padding-right: 0; }
.bbox_top_note { padding: 0; }
.bbox_top_note p {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .62;
}

/* Type */
#main-wrapper .bbox h1,
#main-wrapper .bbox h2,
#main-wrapper .bbox h3,
#main-wrapper .bbox h4,
#main-wrapper .bbox .framer-text { font-family: inherit; }
#main-wrapper .bbox h1,
#main-wrapper .bbox h2 {
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: .6rem 0 1.2rem;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}
#main-wrapper .bbox h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .6rem; }
#main-wrapper .bbox p { font-size: 1rem; line-height: 1.65; margin: 0 0 1rem; }

/* Buttons: always black with white text, whatever the block colour. */
#main-wrapper .bbox .btn-primary,
#main-wrapper .bbox a.btn,
#main-wrapper .bbox .opc-Button a {
  background: #161616 !important;
  border: 0;
  border-radius: 2rem;
  padding: .8rem 1.8rem;
  font-weight: 700;
  color: #fff !important;
}
#main-wrapper .bbox .btn-primary span,
#main-wrapper .bbox a.btn span { color: #fff !important; }

/* Cards */
._card_grid { margin-left: -.6rem; margin-right: -.6rem; padding-bottom: 0; }
._card_grid > .col { padding: 0 .6rem; }
._card_cnt { height: 100%; border-radius: 1.4rem; padding: 2rem; }

/* Images and icons */
.bbox_img { display: block; margin-left: auto; margin-right: auto; }
.bbox_img._bt_cut { margin-bottom: 0; }
img._ico_med, ._ico_med img { width: 80px; max-width: 80px; height: auto; }
img._ico_lrg, ._ico_lrg img { width: 120px; max-width: 120px; height: auto; }
img._icon_med, ._icon_med img { width: 72px; max-width: 72px; height: auto; }
img._img_sml, ._img_sml img { max-width: 440px; width: 100%; height: auto; }
img._img_med, ._img_med img {
  display: block;
  max-width: 960px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
img._ral, ._ral img { display: block; max-width: 460px; width: 100%; height: auto; margin-left: auto; }

/* Phones and tablets */
@media (max-width: 768px) {
  #main-wrapper .row.bbox { padding: 2rem 1.2rem; border-radius: 1.2rem; }
  #main-wrapper > .container-fluid:has(> .row.bbox) { padding-left: 12px; padding-right: 12px; }
  #main-wrapper .bbox h1, #main-wrapper .bbox h2 { font-size: 1.8rem; }
}

/* Request page (Contact Forms plugin, form "Shop Anfrage"): the form sat flush
   against the window edges. Same side spacing as the start page, and the
   headings in Inter. Only layout; fields, tiles and the submit button are the
   plugin's own and are not touched. */
.contact-forms-portlet > .container {
  padding: 2rem max(4vw, 16px) 3rem !important;
}
.contact-forms-portlet h1, .contact-forms-portlet h2,
.contact-forms-portlet h3, .contact-forms-portlet h4 {
  font-family: inherit !important;
  color: #161616;
}

/* Menu jumps (#einfamilienhaus, #mehrfamilienhaus, #das-sind-wir): the
   sticky header (68px) would cover the label and heading of the block. The
   target is the small label inside the block, so the margin is header +
   block padding + a little air: the block lands just under the header. */
#einfamilienhaus, #mehrfamilienhaus, #das-sind-wir, #ersparnis { scroll-margin-top: 8.5rem; }
@media (max-width: 768px) {
  #einfamilienhaus, #mehrfamilienhaus, #das-sind-wir, #ersparnis { scroll-margin-top: 7.25rem; }
}

/* The menu item "KI" jumps with a text fragment (#:~:text=...) because the
   section has no anchor id. Browsers mark the found text; Chrome paints it
   purple. No marking here. */
::target-text { background-color: transparent; color: inherit; }


/* Request page: the intro box (.ac_form_headwrap) and the section with the
   tiles (.ac_form_sld_sec) have rounded corners (48px) and hide what sticks
   out, but their text sat directly on the edge, so the first letters of
   "technisch" and "Nutzungsart" were cut off by the curve. Inner spacing only. */
.contact-forms-portlet .ac_form_headwrap { padding: 1.5rem 2rem 2rem !important; }
.contact-forms-portlet .ac_center_head { padding-left: 2rem !important; padding-right: 2rem !important; }