/* ---------------------------------------------------
Hilfsmittel
/* ---------------------------------------------------

/* nur zum Prüfen – sichtbare linen für boxen Linien  */
 /* .mxd-container{ outline: 2px dashed #20a2ff; }
.mxd-container .mxd-container{ outline: 2px dashed #ff4d4f; }
.site-footer{ outline: 3px solid #22c55e; }
.mxd-footer__footer-blocks{ outline: 2px dashed #1ea7fd; }
.mxd-footer__container,
.mxd-footer__footer-blocks{ outline: 2px dashed #1ea7fd; } */

/* überall footer breiter*/
/* .mxd-footer__footer-blocks{
  max-width: var(--footer-max);
  width: min(100% - 2*var(--footer-gutter), var(--footer-max));
  margin-inline: auto;
  padding-inline: var(--footer-gutter);
} */


/* .mxd-hero-05__videoblock{ outline:2px dashed #0af; }
.mxd-hero-05-videoblock__video{ outline:2px dashed #fa0; }
.mxd-hero-05-videoblock__video .video{ outline:2px dashed #e33; } */

/* === Spacing-Utilities === */
.u-mt-xs  { margin-top: .25rem; }
.u-mt-s  { margin-top: .75rem; }
.u-mt-m2  { margin-top: 1.1rem; }
.u-mt-m  { margin-top: 1.25rem; }
.u-mt-l  { margin-top: 2rem; }
.u-mt-xl { margin-top: 3rem; }
.u-mt-xxl { margin-top: 20rem; }

/* === Max-Width Utilities (nur ≥1200px begrenzen) === */
@media (min-width:1200px){
  .u-maxw-720 { max-width: 720px; }
  .u-maxw-760 { max-width: 760px; }
  .u-maxw-820 { max-width: 820px; }
  .u-maxw-880 { max-width: 880px; } /* guter Startwert */
}

/* Optional: seitliche Innenabstände, falls du es noch „luftiger“ willst */
.u-px-s  { padding-left: .95rem; padding-right: .95rem; }
.u-px-m  { padding-left: 1.55rem; padding-right: 1.55rem; }

.fontsize100proz  {
font-size: 100%;
}

.fontsize92proz  {
font-size: 92%;
}
.fontsize75proz  {
font-size: 75%;
}
.fontsize7rem  {
font-size: 6.5rem !important;
}
.fontsize5rem  {
font-size: 5rem !important;
padding-top: 15px;
}
.fontsize5_5rem  {
font-size: 5.5rem !important;
}
.fontsize4rem  {
font-size: 4.5rem !important;
}
.fontsize3rem  {
font-size: 3rem !important;
}

.text-white {
  color: #ffffff !important;
}

.blacky
{
  color: #030303 !important;
}

/* ------------------------------------------------------------------------------


/* ===== Awards (weiße Kacheln) ===== */
.tp-awards-area{
  /* optional: eigener Blockabstand, wenn nötig */
  padding-block: 16px 8px;
}



/* --- Floating Konfigurator Button --- */
.cfg-btn{
  position: fixed;
  top: 50%;
  right: 22px;                     /* Abstand zum Rand */
  transform: translateY(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  height: 56px;
  width: 56px;                     /* Start: nur Icon */
  overflow: hidden;
  padding: 0 16px 0 16px;

  background: #d71920;             /* Pirnar-Rot */
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  transition: width .22s ease, box-shadow .2s ease, opacity .2s ease;
}
.cfg-btn img{ display:block; flex:0 0 auto; }
.cfg-btn .cfg-text{
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease .05s;
  font-weight: 600;
  letter-spacing: .2px;
  color: #fff;
  font-size: large;
}

/* Expanded state */
.cfg-btn.is-open{
  width: 228px;                    /* Platz für Text */
}
.cfg-btn.is-open .cfg-text{
  opacity: 1;
  pointer-events: auto;
}

/* Desktop: expand on hover as well */
@media (hover:hover){
  .cfg-btn:hover{ width: 228px; }
  .cfg-btn:hover .cfg-text{ opacity: 1; }
}

/* Mobile: sit a bit lower to avoid thumbs; use bottom center if you prefer */
@media (max-width: 575.98px){
  .cfg-btn{
    right: 14px;
    height: 54px; width: 54px; border-radius: 12px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cfg-btn{ transition: none; }
  .cfg-btn .cfg-text{ transition: none; }
}

/* Werte frei anpassen */
:root{
  --cfg-open-w: 200px;   /* vorher größer; optional anpassen */
  --cfg-pad-x: 14px;     /* Standard-Padding links/rechts im Icon-Zustand */
  --cfg-pad-right-open: 10px; /* engerer rechter Abstand im offenen Zustand */
}

.cfg-btn{
  padding: 0 var(--cfg-pad-x);
}

/* offen (per Klick) */
.cfg-btn.is-open{
  width: var(--cfg-open-w);
  padding-right: var(--cfg-pad-right-open);
}

/* Desktop: auch beim Hover enger */
@media (hover:hover){
  .cfg-btn:hover{
    width: var(--cfg-open-w);
    padding-right: var(--cfg-pad-right-open);
  }
}

/* ------------------------------------------------------------------------------


/* Kachel */
.tp-award-card{
  background:#fff;
  border-radius:18px;                 /* runde Ecken */
  padding:12px 14px;                  /* weniger L/R-Padding -> Logo wirkt größer */
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  height:100px;                       /* etwas höher -> mehr Logo-Fläche */
  transition:transform .2s ease, box-shadow .2s ease;
}

/* Logos größer & responsiv, überschreibt feste HTML-Attribute */
.tp-award-card img{
  display:block;
  width:auto !important;              /* HTML width überschreiben */
  height:auto !important;             /* HTML height überschreiben */
  max-width:100%;
  max-height: calc(100% - 24px);      /* füllt die Kachel (abhängig von padding) */
  object-fit:contain;                 /* Logo bleibt unverzerrt */
  image-rendering:auto;
}

/* Abstand zwischen Kacheln feiner (falls kein Bootstrap-Gap) */
.tp-awards-area .row > [class*="col-"]{
  margin-bottom: 14px;
}

/* Hover (dezent, optional) */
.tp-award-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

/* Dark-Mode: Schatten etwas kräftiger auf dunklem Grund */
@media (prefers-color-scheme: dark){
  .tp-award-card{ box-shadow:0 6px 22px rgba(0,0,0,.28); }
}

/* ===== Responsive Tuning ===== */

/* XL/Desk: Logos noch etwas größer wirken lassen */
@media (min-width: 1200px){
  .tp-award-card{
    height:110px;
    padding:12px 16px;
    border-radius:20px;
  }
  .tp-award-card img{
    max-height: calc(100% - 24px);
  }
}

/* MD: etwas kompakter, aber weiter groß sichtbar */
@media (max-width: 991.98px){
  .tp-award-card{
    height:96px;
    padding:10px 12px;
  }
  .tp-award-card img{
    max-height: calc(100% - 22px);
  }
}

/* SM/XS: kompakter, damit Grid sauber bricht */
@media (max-width: 575.98px){
  .tp-award-card{
    height:88px;
    padding:8px 10px;
    border-radius:16px;
  }
  .tp-award-card img{
    max-height: calc(100% - 18px);
  }
}

:root{ --panel-collapsed-h: 110px; } /* ggf. 100–120 anpassen */

.tp-service-pp-item.is-ghost{
  height: var(--panel-collapsed-h);   /* tut so, als wäre noch ein Panel da */
  overflow: hidden;
  opacity: 0;                         /* unsichtbar */
  pointer-events: none;               /* nicht anklickbar */
  border: 0 !important;               /* keine Linien */
  margin: 0 !important;
  padding: 0 !important;
}

/* Video-Container */
.tp-service-video-wrap{
  width:100%;
}
.tp-service-video{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;            /* hält das Seitenverhältnis */
  border-radius: 0px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

/* Video selbst */
.tp-service-video__el{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;                /* füllt den Rahmen schön aus */
  background:#000;                 /* beim Laden schwarz statt weiß */
  outline:none;
  border:0;
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari-Glitch-Fix */
}

/* etwas kompakter auf kleineren Screens */
@media (max-width: 991.98px){
  .tp-service-video{ aspect-ratio: 16 / 9; border-radius:16px; }
}
@media (max-width: 575.98px){
  .tp-service-video{ border-radius:14px; }
}

/* SVG-Badge ersetzt das alte PNG links neben dem Text */
.tp-pivot-badge{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:8px;                 /* Abstand Halbkreis ↔ Dreieck */
  width:67px;              /* gleiche Breite wie das Dreieck-SVG */
  flex:0 0 67px;           /* fixe Spalte links, wie das alte Bild */
  line-height:0;           /* kein zusätzlicher Zeilenabstand */
}

/* optional: weiche Schatten/Abstände wie beim PNG braucht es nicht,
   wir lassen es „flat“, damit es wie ein Icon wirkt */

/* Kleinere Screens: leicht kompakter */
@media (max-width: 575.98px){
  .tp-pivot-badge{
    transform: scale(0.9);
    transform-origin: top left;
  }
}

/* Falls dein Theme dem alten .tp-service-shape Styles gibt,
   die du weiterverwenden willst, kannst du die Klasse zusätzlich setzen:
   <div class="tp-pivot-badge tp-service-shape mr-40"> … </div>
   Dann ggf. Überschneidungen hier neutralisieren: */
.tp-service-shape.tp-pivot-badge{
  background:none !important;
  border:0 !important;
  padding:0 !important;
}
.text-pivot{
  line-height: 31px;
  font-size: 24px;
  padding-right: 10px;
  padding-top: 12px;
}

/* Rahmen wie gehabt */
.tp-service-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.15); }
.tp-service-video__el{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* Overlay-Play */
.tp-video-play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border:0; background:transparent; cursor:pointer;
  transition:opacity .2s ease;
}
.tp-video-play__ring{
  width:104px; height:104px; border:3px solid rgba(255,255,255,.85); border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.tp-video-play__triangle{
  position:absolute; width:0; height:0; margin-left:6px;
  border-left:28px solid rgba(255,255,255,.95);
  border-top:18px solid transparent; border-bottom:18px solid transparent;
}
.tp-video-play:hover{ opacity:.9; }
.tp-video-play.is-hidden{ opacity:0; pointer-events:none; }

/* Nur Desktop bis inkl. Full HD anheben – >1920px bleibt wie es ist */
@media (min-width: 1200px) and (max-width: 1919.98px){
  .tp-service-area.pt-125{
    padding-top: 320px !important; /* feinjustierbar: 170–210 */
  }
}


/* Grundlayout */
.konfigurator-embed{
  --frame-h: 100vh;          /* Fallback-Höhe, falls JS aus ist */
  margin: 0;
  padding: 0;
}

.konfigurator-framewrap{
  width: 100%;
  min-height: 700px;        /* minimale Nutzhöhe als Sicherheitsnetz */
  height: var(--frame-h);   /* wird per JS exakt gesetzt */
}

.konfigurator-iframe{
  display: flex;
  width: 100%;
  height: 100%;
  border: 0;

}

/* Optional: auf sehr kleinen Geräten volle sichere Viewport-Höhe erzwingen,
   wenn du keinen Footer direkt darunter brauchst */
@media (max-width: 576px){
  .konfigurator-framewrap{
    min-height: 80svh; /* mobile "safe viewport" */
  }
}
.konfigurator-embed{
  --frame-h: 100vh;       /* Fallback */
  margin: 0;
  /* Falls du zu Ankern scrollst, sorgt das dafür, dass der Header nichts überdeckt */
  scroll-margin-top: 80px;  /* wird vom JS-Padding überstimmt */
}

.konfigurator-framewrap{
  width:100%;
  min-height:600px;
  height:var(--frame-h);
}

.konfigurator-iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
.konfigurator-embed{ margin:0; padding:0; }
.konfigurator-framewrap{ width:100%; min-height:600px; }
.konfigurator-iframe{ width:100%; height:100%; border:0; display:block; }


/* Basis */
.konfigurator-embed{ margin:0; padding:0; }
.konfigurator-framewrap{ width:100%; min-height:600px; height:var(--frame-h,70vh); }
.konfigurator-iframe{ display:block; width:100%; height:100%; border:0; }

/* optional mobil */
@media (max-width:576px){
  .konfigurator-framewrap{ min-height:80svh; }
}

/* weißer Abstand danach */
.konfigurator-bottom-space{ height:50px; width:100%; background:#fff; }