.elementor-kit-9{--e-global-color-primary:#FFEBDC;--e-global-color-secondary:#603795;--e-global-color-text:#3B3F4A;--e-global-color-accent:#9D7BC8;--e-global-color-be23a07:#FFF4EC;--e-global-color-8e304a7:#FFFFFF;--e-global-typography-primary-font-family:"Spline Sans";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Spline Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Spline Sans";--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-f61364e-font-family:"Spline Sans";--e-global-typography-f61364e-font-weight:600;background-color:#FFF4EC;font-family:"Spline Sans", Sans-serif;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-text );}.elementor-kit-9 img{border-radius:0px 0px 0px 0px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:8px;--container-default-padding-right:8px;--container-default-padding-bottom:8px;--container-default-padding-left:8px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}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:1024px){.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 *//* =========================================================
   memodio – Infobox (Icon | Label | Titel | Text) – FRONTEND-SAFE
   In Customizer > Zusätzliches CSS einfügen
   ========================================================= */

:root {
  /* zentrale Variablen – bei Bedarf anpassen */
  --ibox-icon-url: url("https://lime-camel-596070.hostingersite.com/wp-content/uploads/2025/09/Design-ohne-Titel-13.png");
  --ibox-icon-size: 64px;   /* Icon-Größe */
  --ibox-gap: 24px;         /* Abstand Icon → Content-Spalte */

  --ibox-pad-x: 28px;
  --ibox-pad-y: 28px;
  --ibox-radius: 16px;

  --ibox-bg: #ffffff;
  --ibox-label-color: #6a5a53;
  --ibox-title: 28px;       /* H3-Größe */
  --ibox-body: 18px;        /* Text-Größe */
}

/* Container – gilt in Elementor UND im Frontend */
body .entry-content .my-infobox,
body .elementor .my-infobox {
  position: relative;
  display: grid;
  grid-template-columns: var(--ibox-icon-size) 1fr; /* links Icon, rechts Inhalt */
  column-gap: var(--ibox-gap);

  background: var(--ibox-bg) !important;
  border: none;
  border-radius: var(--ibox-radius);
  padding: var(--ibox-pad-y) var(--ibox-pad-x);
  margin: 20px 0;

  /* falls ein Eltern-Element center setzt */
  text-align: left !important;
}

/* alle echten Kinder (H1–H6, P, …) in die rechte Spalte & linksbündig */
body .entry-content .my-infobox > *,
body .elementor .my-infobox > * {
  grid-column: 2 !important;
  margin: 0;
  text-align: left !important;
  justify-self: start !important;
}

/* Icon links, oben ausgerichtet */
body .entry-content .my-infobox::before,
body .elementor .my-infobox::before {
  content: "";
  width: var(--ibox-icon-size);
  height: var(--ibox-icon-size);
  background: var(--ibox-icon-url) center/contain no-repeat;
  align-self: start;
}

/* Label oben, bündig mit der Content-Spalte */
body .entry-content .my-infobox::after,
body .elementor .my-infobox::after {
  content: "INFORMATION";
  position: absolute;
  left: calc(var(--ibox-pad-x) + var(--ibox-icon-size) + var(--ibox-gap));
  top: calc(var(--ibox-pad-y) - 8px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ibox-label-color);
  font-weight: 600;
  line-height: 1;
}

/* Überschriften in der Box – LINKS erzwingen, egal was Gutenberg setzt */
body .entry-content .my-infobox h1,
body .entry-content .my-infobox h2,
body .entry-content .my-infobox h3,
body .entry-content .my-infobox h4,
body .entry-content .my-infobox h5,
body .entry-content .my-infobox h6,
body .entry-content .my-infobox .wp-block-heading,
body .entry-content .my-infobox .has-text-align-center,
body .entry-content .my-infobox .has-text-align-right,
body .elementor .my-infobox h1,
body .elementor .my-infobox h2,
body .elementor .my-infobox h3,
body .elementor .my-infobox h4,
body .elementor .my-infobox h5,
body .elementor .my-infobox h6,
body .elementor .my-infobox .wp-block-heading,
body .elementor .my-infobox .has-text-align-center,
body .elementor .my-infobox .has-text-align-right {
  text-align: left !important;
  justify-self: start !important;
  margin-left: 0 !important;
}

/* H3-Typo & Abstände wie im Editor-Bild */
body .entry-content .my-infobox h3,
body .elementor .my-infobox h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: var(--ibox-title);
  line-height: 1.28;
  font-weight: 700;
  color: #2a2a2a;
}

/* Fließtext */
body .entry-content .my-infobox p,
body .elementor .my-infobox p {
  font-size: var(--ibox-body);
  line-height: 1.6;
  color: #3c3c3c;
  text-align: left !important;
}

/* Responsive Feinschliff */
@media (max-width: 680px) {
  :root {
    --ibox-icon-size: 52px;
    --ibox-gap: 18px;
    --ibox-pad-x: 18px;
    --ibox-pad-y: 20px;
    --ibox-title: 22px;
    --ibox-body: 16px;
  }
  body .entry-content .my-infobox::after,
  body .elementor .my-infobox::after {
    top: calc(var(--ibox-pad-y) - 6px);
  }
}

/* Infobox-Hintergrund hart auf Weiß setzen */
body .entry-content .my-infobox,
body .elementor .my-infobox {
  background: #ffffff !important;
}

/* normale Linkfarbe im Blog */
.entry-content a {
  color: #603795; /* memodio lila */
}

/* Hover-Farbe im Blog */
.entry-content a:hover {
  color: #8a5ccf; /* helleres Lila */
  text-decoration: underline; /* optional */
}

:root {
  color-scheme: light;
}/* End custom CSS */