.elementor-55 .elementor-element.elementor-element-3b6cf55{--display:flex;--margin-top:0em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-55 .elementor-element.elementor-element-1f8d7a3 .elementor-button{font-size:1.1em;font-weight:600;}.elementor-55 .elementor-element.elementor-element-b350884{--spacer-size:2vh;}.elementor-55 .elementor-element.elementor-element-a46848b{--display:flex;--min-height:100vh;--justify-content:flex-end;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:3em;--padding-bottom:0em;--padding-left:0em;--padding-right:0em;}.elementor-55 .elementor-element.elementor-element-a46848b:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-a46848b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #4B4E53 0%, #5A5E63 100%);}.elementor-55 .elementor-element.elementor-element-7b35490{--display:flex;}.elementor-55 .elementor-element.elementor-element-da8e8c0{text-align:center;}.elementor-55 .elementor-element.elementor-element-da8e8c0 .elementor-heading-title{color:var( --e-global-color-accent );}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(3em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(3em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(3em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-3em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-3em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-icon i{color:var( --e-global-color-secondary );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-icon svg{fill:var( --e-global-color-secondary );transition:fill 0.3s;}.elementor-55 .elementor-element.elementor-element-f2c4aea{--e-icon-list-icon-size:2em;--e-icon-list-icon-align:center;--e-icon-list-icon-margin:0 calc(var(--e-icon-list-icon-size, 1em) * 0.125);--icon-vertical-align:center;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-icon{padding-inline-end:0.2em;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-item > a{font-size:1.3em;line-height:58px;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-55 .elementor-element.elementor-element-a5ae571 .e-gallery-item:hover .elementor-gallery-item__overlay, .elementor-55 .elementor-element.elementor-element-a5ae571 .e-gallery-item:focus .elementor-gallery-item__overlay{background-color:rgba(0,0,0,0.5);}.elementor-55 .elementor-element.elementor-element-a5ae571{--image-border-radius:20px;--image-transition-duration:800ms;--overlay-transition-duration:800ms;--content-text-align:center;--content-padding:20px;--description-margin-top:0px;--content-transition-duration:800ms;--content-transition-delay:800ms;}.elementor-55 .elementor-element.elementor-element-723eab6{--spacer-size:2vh;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-55 .elementor-element.elementor-element-da8e8c0 .elementor-heading-title{font-size:1.9em;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10em/2);}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10em/2);}}@media(min-width:768px){.elementor-55 .elementor-element.elementor-element-a46848b{--width:100%;}.elementor-55 .elementor-element.elementor-element-7b35490{--width:80%;}}@media(max-width:767px){.elementor-55 .elementor-element.elementor-element-7b35490{--padding-top:0em;--padding-bottom:0em;--padding-left:1em;--padding-right:1em;}.elementor-55 .elementor-element.elementor-element-da8e8c0 .elementor-heading-title{font-size:1.4em;}.elementor-55 .elementor-element.elementor-element-f2c4aea{--e-icon-list-icon-size:1.2em;}.elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-item > .elementor-icon-list-text, .elementor-55 .elementor-element.elementor-element-f2c4aea .elementor-icon-list-item > a{font-size:1.2em;}.elementor-55 .elementor-element.elementor-element-a5ae571{padding:0em 0em 0em 0em;--content-padding:0px;}}/* Start custom CSS *//* Markenfarben */
:root{
  --sem-primary:#4B4E53;   /* Dunkelgrau */
  --sem-secondary:#F6B800; /* Gelb */
  --sem-text:#000000;      /* Schwarz */
  --sem-accent:#F4F4F4;    /* Hellgrau */
  --sem-c1:#1F3C88;        /* Blau */
  --sem-c2:#C85A2E;        /* Terracotta */
}

/* Wrapper */
.sem-referenzen.sem-wrap{
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 40px);
  background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 100%);
  color: var(--sem-text);
}

/* Kopfbereich */
.sem-ref-head{
  max-width: 980px;
  margin: 0 auto clamp(24px, 3.5vw, 48px);
  text-align: center;
}
.sem-ref-head h2{
  margin: 0 0 10px 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.2;
  color: var(--sem-primary);
}
.sem-ref-head p{
  margin: 0;
  font-size: clamp(16px, 1.2vw, 18px);
  color: #333;
}

/* Grid */
.sem-ref-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  max-width: 1200px;
  margin: 0 auto;
}

/* Karten */
.sem-ref-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(75,78,83,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sem-ref-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(75,78,83,.12);
}
.sem-ref-media{
  position: relative;
  aspect-ratio: 4/3;
  background: var(--sem-accent);
}
.sem-ref-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption */
.sem-ref-card figcaption{
  padding: 14px 16px 18px;
}
.sem-ref-card h3{
  margin: 0 0 4px 0;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--sem-primary);
}
.sem-ref-card p{
  margin: 0;
  font-size: 14px;
  color: #444;
}

/* CTA */
.sem-ref-cta{
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 48px);
}
.sem-btn{
  display: inline-block;
  background: var(--sem-secondary);
  color: var(--sem-text);
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 18px rgba(246,184,0,.25);
}
.sem-btn:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(246,184,0,.35);
}

/* Responsiv */
@media (max-width: 1100px){
  .sem-ref-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px){
  .sem-ref-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .sem-ref-grid{ grid-template-columns: 1fr; }
}

/* ===== Mobile Patch nur für die Referenzen-Seite ===== */
@media (max-width: 767px){

  /* 1) Typografie: Überschrift/H1 sauber skalieren, bessere Zeilenumbrüche */
  .sem-referenzen.sem-wrap h1,
  .sem-referenzen.sem-wrap .sem-ref-head h1,
  .sem-referenzen.sem-wrap .sem-ref-head h2{
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.22 !important;
    letter-spacing: .1px;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    margin-bottom: 10px;
  }

  .sem-referenzen.sem-wrap .sem-ref-head p{
    font-size: 16px !important;
    line-height: 1.5;
    opacity: .95;
  }

  /* 2) Section‑Abstände: mehr Luft oben/unten für bessere Lesbarkeit */
  .sem-referenzen.sem-wrap{
    padding: 24px 16px 40px;
  }

  /* 3) Grid: eine Spalte, größere Abstände */
  .sem-referenzen .sem-ref-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 680px;
  }

  /* 4) Karten: weiche Ecken, Schatten leicht stärker auf Mobil */
  .sem-referenzen .sem-ref-card{
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(0,0,0,.08);
  }

  /* 5) CTA: auf Mobil in voller Breite */
  .sem-referenzen .sem-ref-cta .sem-btn{
    width: 100%;
    text-align: center;
    padding: 14px 18px;
    border-radius: 10px;
  }

  /* 6) Icon‑Listen aus Elementor (wie in deinen Screens) sauber setzen */
  .sem-referenzen.sem-wrap .elementor-icon-list-items .elementor-icon-list-item{
    margin-bottom: 14px;
    align-items: center;
  }
  .sem-referenzen.sem-wrap .elementor-icon-list-icon{
    margin-right: 10px;
  }
  .sem-referenzen.sem-wrap .elementor-icon-list-text{
    font-size: 18px;
    line-height: 1.35;
  }
}

/* ===== Optional: dunkler Abschnitt (wie im rechten Screenshot)
   Container in Elementor einfach mit Klasse "is-dark" versehen ===== */
.sem-referenzen.sem-wrap .is-dark{
  background: #4B4E53 !important;           /* var(--sem-primary) */
  color: #fff !important;
  border-radius: 18px;
}
.sem-referenzen.sem-wrap .is-dark h1,
.sem-referenzen.sem-wrap .is-dark h2,
.sem-referenzen.sem-wrap .is-dark p,
.sem-referenzen.sem-wrap .is-dark li{
  color: #fff !important;
}
.sem-referenzen.sem-wrap .is-dark .elementor-icon-list-icon i,
.sem-referenzen.sem-wrap .is-dark .elementor-icon{
  color: #F6B800 !important;                /* Gelbe Icons */
}/* End custom CSS */