/* SEO-Fix Startseite: KPI-Block H1 -> H2, aber Optik bleibt wie H1 (Bootstrap) */
body#p2 .frame-group-container .textpic-text > h2 {
  /* Reset/Grundwerte, damit NICHT euer globales h2 (3em) greift */
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  line-height: 1.2;

  /* Bootstrap-ähnliche H1-Größe (responsiv wie Standard-H1) */
  font-size: calc(1.375rem + 1.5vw);

  /* Farbe wie vorher: einfach vom umgebenden Kontext übernehmen */
  color: inherit;
}

/* Tel-Link: Icon + Animation für H1 UND H2 (nach H1->H2 Umstellung) */
.bp-page-footer :is(h1, h2) a[href^="tel:"]::before {
  content: url("/fileadmin/bilder/icons/icons8-phone-64.png");
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;

  animation: shake-animation 2.9s ease infinite;
  transform-origin: 50% 50%;
}


/* Ab Bootstrap-Standard-Breakpoint: fixe H1-Größe */
@media (min-width: 1200px) {
  body#p2 .frame-group-container .textpic-text > h2 {
    font-size: 2.5rem;
  }
}

/* H2 im Footer wie H1 darstellen (typisch Bootstrap-H1) */
.bp-page-footer h2 {
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  .bp-page-footer h2 {
    font-size: 2.5rem;
  }
}
/* Startseite H1 */
body#p2 #c306 .frame-inner > h1{
  font-size: 3em;
  line-height: 1.2;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #ffffff;
}
/* Produktseiten H1 */

/* frame-schapersievers: Headline wurde von H2 -> H1 geändert,
   soll aber optisch exakt wie H2 bleiben */
.frame-schapersievers .textpic-text > h1 {
  font-size: 3em;      /* wie globales h2 */
  line-height: 1.2;
  font-weight: normal; /* <strong> regelt fett wie vorher */
  margin-top: 0;
  margin-bottom: 1rem;
  color: #093b65;      /* wie globales h2 */
}

.frame-schapersievers .textpic-text > h1 strong {
  font-weight: bold;
}
/* 4 Grunden */
/* =========================================================
   Startseite KPI-Block: nur Desktop-Block (#c3144) nutzen,
   Mobile-Block (#c3347) dauerhaft abschalten
   ========================================================= */
/* ============================
   #c3144: Mobile-Optimierung
   ============================ */

/* Button "Produkte entdecken" mittig (vor allem mobil) */
@media (max-width: 767px) {
  #c3144 .btn.btn-warning {
    display: inline-block;
  }
  #c3144 p:has(> a.btn.btn-warning) {
    text-align: center;
    margin-top: 12px;
  }

  /* KPI-Grid: auf Mobile 1 Spalte (alles untereinander) */
  #c3144 .gallery-row {
    display: grid;
    grid-template-columns: 1fr; /* <-- untereinander */
    gap: 14px;
    align-items: start;
  }

  /* Icon + Text sauber, nichts absolut positioniert */
  #c3144 figure.image {
    margin: 0;
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    align-items: center;
    text-align: left;
  }

  #c3144 figure.image img,
  #c3144 .gallery-item img {
    position: static !important;
    right: auto !important;
    top: auto !important;
    width: 56px;
    max-width: 56px;
    height: auto;
    margin: 0 !important;
  }

  /* Headings etwas kleiner, damit es lesbar bleibt */
  #c3144 h2 { font-size: 1.6rem; line-height: 1.15; margin: 0; }
  #c3144 h3 { font-size: 1rem; margin: 0; }
}

/* Optional: ab Tablet (>=768px) wieder 2 Spalten, wenn gewünscht */
@media (min-width: 768px) and (max-width: 991px) {
  #c3144 .gallery-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  #c3144 figure.image {
    grid-template-columns: 56px 1fr;
  }
}
/* =========================================================
   Startseite KPI / Hero: nur #c3144 nutzen
   Desktop: 4 nebeneinander, OHNE Button
   Mobil/Tablet: untereinander (1 Spalte), MIT Button
   ========================================================= */

/* Mobile-Block dauerhaft aus, Desktop-Block immer an */
#c3347 { display: none !important; }
#c3144 { display: block !important; }

/* Button-Frame: mobil sichtbar, Desktop aus */
@media (min-width: 992px) {
  #c4961 { display: none !important; }   /* Desktop: kein Button */
}
@media (max-width: 991px) {
  #c4961 { display: block !important; }  /* Mobil/Tablet: Button an */
  #c4961 .frame-inner { text-align: center; }
  #c4961 .btn.btn-warning { display: inline-flex; }
}

/* KPI-Layout: ab 992px 4 Spalten (Desktop) */
@media (min-width: 992px) {
  #c3144 .contentcontainer[data-container-identifier="container_4_columns"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 30px;
    row-gap: 0;
    align-items: start;
  }
}

/* KPI-Layout: bis 991px alles untereinander (kein 2x2) */
@media (max-width: 991px) {
  #c3144 .contentcontainer[data-container-identifier="container_4_columns"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 14px;
  }

  /* Icon + Text sauber nebeneinander, gut lesbar */
  #c3144 .texticon {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 12px;
    align-items: center;
    text-align: left;
  }

  /* Falls irgendwo absolute Positionierungen / große Icons greifen */
  #c3144 .texticon-icon {
    width: 56px;
    height: 56px;
  }
  #c3144 .texticon-inner-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  /* Headings kleiner für Mobil */
  #c3144 h2 { font-size: 1.6rem; line-height: 1.15; margin: 0; }
  #c3144 h4 { font-size: 1rem; line-height: 1.2; margin: 0; }
}

/* =========================================================
   KPI-Block #c3146: Text darf NICHT über Container hinausragen
   Fix: min-width:0 + wrapping + responsive clamp()
   ========================================================= */

/* Grundfix (wirkt auf allen Breiten) */
#c3146 .texticon {
  display: flex;              /* falls es schon flex ist, ok; sonst erzwingen wir es */
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;            /* erlaubt Umbruch statt Overflow */
}

#c3146 .texticon-content {
  min-width: 0;               /* WICHTIG: erlaubt Schrumpfen in Flex/Grid */
  max-width: 100%;
  flex: 1 1 auto;
}

#c3146 .texticon-content a {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;    /* bricht auch lange Wörter/„MRD.“-Ketten */
  word-break: break-word;
}

/* Desktop: Schrift skaliert sauber, ohne überzuziehen */
#c3146 .texticon-content h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 .25rem 0;
}

#c3146 .texticon-content h4 {
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.25;
  margin: 0;
}

/* Mobile/Tablet: Icons AUS, Text volle Breite */
@media (max-width: 991px) {
  #c3146 .texticon-icon { display: none !important; }

  #c3146 .texticon {
    display: block !important;     /* kein "leeres Icon-Feld" */
  }

  #c3146 .texticon-content {
    width: 100% !important;
  }

  #c3146 .texticon-content h2 {
    font-size: 1.6rem;
    line-height: 1.15;
  }

  #c3146 .texticon-content h4 {
    font-size: 1rem;
    line-height: 1.25;
  }
}
/* #c3146 Desktop: Icon immer ÜBER Text (konsistent für alle 4 KPI) */
@media (min-width: 992px) {
  #c3146 .texticon {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  #c3146 .texticon-icon {
    flex: 0 0 auto;
  }

  #c3146 .texticon-content {
    width: 100%;
  }
}

/* Mobile/Tablet (untereinander): vertikalen Abstand zwischen KPI-Elementen reduzieren */
@media (max-width: 991px) {

  /* reduziert Abstand innerhalb der KPI-Items */
  #c3146 .texticon {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* reduziert Abstand zwischen den 4 Spalten-Frames */
  #c3146 .contentcontainer[data-container-identifier="container_4_columns"] {
    row-gap: 6px !important;   /* vorher größer -> kleiner */
  }

  /* Falls TYPO3/Bootstrap Standard-Margins auf Überschriften setzen */
  #c3146 .texticon-content h2,
  #c3146 .texticon-content h4 {
    margin: 0 !important;
  }

  /* optional: etwas Luft nur unter der Hauptzeile */
  #c3146 .texticon-content h2 {
    margin-bottom: 2px !important;
  }
}

/* Mobile/Tablet (untereinander): h2 nur leicht größer als h4 */
@media (max-width: 991px) {
  #c3146 .texticon-content h2 {
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
  }

  #c3146 .texticon-content h4 {
    font-size: 1.0rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }
}