.elementor-kit-10{--e-global-color-primary:#000000;--e-global-color-secondary:#B8650F;--e-global-color-text:#555555;--e-global-color-accent:#D77B12;--e-global-color-dmgreybg:#F5F5F5;--e-global-color-dmborder:#E0E0E0;--e-global-color-dmwhite:#FFFFFF;--e-global-color-dmfooter:#111111;--e-global-color-dmsuccess:#2E9E5B;--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:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:600;color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 a{color:var( --e-global-color-accent );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-10 h1{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;}.elementor-kit-10 h2{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;}.elementor-kit-10 h3{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;}.elementor-kit-10 h4{font-family:"Poppins", Sans-serif;}.elementor-kit-10 h5{font-family:"Poppins", Sans-serif;}.elementor-kit-10 h6{color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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);}.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:639px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ---- German compound words ---- */
/* "Datenschutzerklärung" at 32px and "Verpackungsberatung." at 30px are wider  */
/* than a 375px phone's content column, and a single word cannot wrap, so the    */
/* page scrolls sideways. break-word only kicks in when a word genuinely does     */
/* not fit – normal wrapping is untouched. (The Lovable original has the same    */
/* 11px overflow on the home page; this removes it.)                             */

/* Scoped to phones only: on desktop the source lets a too-long single word    */
/* spill a few px out of its card instead of breaking it, and breaking it there */
/* splits words like "Verpackungshersteller" across two lines where the        */
/* original keeps one. The sideways-scroll problem this rule exists for only    */
/* happens on narrow screens, so that is where it now applies.                  */

@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6,
  .elementor-heading-title,
  .elementor-icon-box-title,
  .elementor-widget-text-editor {
    overflow-wrap: break-word;
  }
}

/* ---- cookie banner (Cookie Notice plugin) ---- */
/* Matches the design: full-bleed #111111 bar, content on the 1200px rail,   */
/* Montserrat 14px text at 80% white, accent Accept and outlined Decline.    */

#cookie-notice {
  background: #111111 !important;
  min-width: 100%;
}

#cookie-notice .cookie-notice-container {
  max-width: 1200px;
  margin-inline: auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

#cookie-notice #cn-notice-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

#cookie-notice #cn-notice-buttons {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  margin: 0;
}

#cookie-notice .cn-button {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 24px;
  border-radius: 4px;
  margin: 0;
  text-shadow: none;
  box-shadow: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

#cookie-notice #cn-accept-cookie {
  background: #d77b12;
  color: #ffffff;
  border: 1px solid #d77b12;
}

#cookie-notice #cn-accept-cookie:hover {
  background: #b8650f;
  border-color: #b8650f;
}

#cookie-notice #cn-refuse-cookie {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

#cookie-notice #cn-refuse-cookie:hover {
  background: rgba(255, 255, 255, 0.1);
}

#cookie-notice #cn-more-info {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #d77b12;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 6px;
  text-decoration: underline;
}

@media (max-width: 767px) {
  #cookie-notice .cookie-notice-container {
    flex-direction: column;
    align-items: flex-start;
  }
  #cookie-notice #cn-notice-buttons {
    width: 100%;
  }
  #cookie-notice .cn-button {
    flex: 1 1 0;
    text-align: center;
  }
}

/* ---- back-to-top clears the cookie bar ---- */
/* Cookie Notice puts .cookies-not-set on <body> while the bar is showing and  */
/* renders it at z-index 100000, so the 48px button would sit behind it. Lift   */
/* the button above the bar until a choice is made, then let it drop back.      */

body.cookies-not-set .elementor-element.dm-back-to-top {
  bottom: 102px;
}

@media (max-width: 767px) {
  /* the bar stacks its buttons on phones, so it is taller there */
  body.cookies-not-set .elementor-element.dm-back-to-top {
    bottom: 168px;
  }
}

/* ---- GLYPH BASELINE RESET ---- */
/* The source is Tailwind, whose preflight sets  img, svg { display: block }.  */
/* Elementor keeps them inline AND wraps every icon in an inline-block that    */
/* sits on the wrapper's 24px line-box baseline, so each glyph carries ~7px of */
/* descender space below it. Inside a flex-centred circle that pushes the      */
/* visible icon 3.5px above the true centre. Killing the line-box makes the    */
/* widget box equal the glyph box, so centring lands exactly as in the source. */
/* line-height:0 (not display:flex) keeps the widget's own align control       */
/* working, because the icon stays inline-block inside a text-aligned wrapper. */

.elementor-icon svg,
.elementor-icon i,
.elementor-widget-image img {
  display: block;
}

.elementor-icon-wrapper,
.elementor-icon-box-icon,
.elementor-widget-image,
.elementor-widget-image .elementor-widget-container {
  line-height: 0;
}

/* Some image widgets render without the .elementor-widget-container wrapper and
   put the <img> inside an inline <a>, which re-introduces the descender gap one
   level up. The header logo is one: its widget measured 240x71 for a 64px image,
   and because the lock-up is a 64px box with overflow:hidden the extra 7px made
   the logo sit 3.5px high and clipped its top edge. */
.elementor-widget-image > a,
.elementor-widget-image .elementor-widget-container > a {
  display: block;
}

/* ---- INLINE HEADING LINE-BOX ---- */
/* Headings whose HTML tag is <span> stay inline, so the line box that holds  */
/* them is sized by the WIDGET's strut (24px body leading), not by the        */
/* heading's own line-height. That adds 1-8px of dead space under every such  */
/* heading - visible as a 32px tall 'Kernleistung' badge where the source has */
/* 26px. Making the title a block removes the strut and lets its own          */
/* line-height govern, which is what the Tailwind source does.                */

.elementor-widget-heading .elementor-heading-title {
  display: block;
}

/* ---- ACCORDION TITLE WIDTH ---- */
/* Elementor renders the accordion question as an inline <a> next to a floated
   icon, so on narrow screens the question only gets part of the row and wraps
   onto a second line where the source keeps it on one. Laying the row out as
   flex gives the question every pixel the icon does not use. min-width:0 is
   required or the flex item refuses to shrink below its longest word. */

.elementor-accordion .elementor-tab-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 8px, not 16: the longest German question needs 281.6px and the row is only
     327px wide on a phone, so a wider gap tips it onto a second line. */
  gap: 8px;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-title {
  flex: 1 1 auto;
  min-width: 0;
}

.elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  /* Elementor prints the icon BEFORE the question in the markup and pushes it
     right with float. Once the row is flex the float no longer applies, so the
     icon needs order to stay on the right where the design has it. */
  flex: 0 0 auto;
  order: 1;
  float: none;
  margin: 0;
  width: auto;
  text-align: right;
}

/* ---- LINKED HEADINGS KEEP THEIR OWN TYPE ---- */
/* The kit gives every link the site Text typography, Montserrat 400. A card    */
/* title is a heading whose text sits inside an anchor, so the heading kept its */
/* Poppins 700 while the visible text was painted Montserrat 400 - only the     */
/* size still came from the heading, which is why it looked unbold rather than  */
/* wrong. Links inside headings now inherit the heading instead.                */

.elementor-widget-heading .elementor-heading-title a,
.elementor-widget-theme-post-title .elementor-heading-title a,
.elementor-pagination a.page-numbers,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}/* End custom CSS */