/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Apr 06 2026 | 18:00:52 */
/* =========================================
   IBS – 2 Kacheln mit Button-Link
   ========================================= */

/* Wrapper für den Kachelbereich */
.ibs-cards-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Clearfix für Floats */
.ibs-cards-row::after {
  content: "";
  display: block;
  clear: both;
}

/* -----------------------------------------
   Basis-Kachel (Artikel, NICHT als Link)
   ----------------------------------------- */

.ibs-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0.5rem;
  overflow: hidden;
  border-radius: 0rem; /* hier steht die Rundung */
  min-height: 280px;
  color: #f5f7fa;
  background-color: #003566; /* Fallback, falls Bild nicht lädt */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hintergrundbild-Schicht – sichtbar, aber gebremst */
.ibs-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 0.35s ease;

  /* hier wird das Bild stärker sichtbar */
  opacity: 0.68;                 /* vorher: 0.35 */
  filter: brightness(0.7) saturate(1.1); /* vorher: 0.7 */
  z-index: 0;
}
/*
opacity:
kleiner Wert (0.3) → Bild sehr zurückhaltend
größer Wert (0.6–0.8) → Bild deutlich sichtbar
brightness:
kleiner (0.7) → dunkler
näher an 1 (0.9–1.0) → heller
*/

/* Farb-Overlay für konstanten Kontrast */
.ibs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(142, 209, 252, 0.65),  /* vorher: 0.95 */
    rgba(120, 170, 255, 0.65)    /* vorher: 0.75 */
  );
  z-index: 1;
  transition: background 0.3s ease;
}
/*
Alpha-Werte (die letzte Zahl im rgba):
0.9 → fast deckend
0.4–0.5 → deutlich transparenter
RGB-Werte (erste drei Zahlen):
0,123,255 → kräftiges Blau
120,170,255 → deutlich sanfter
142, 209, 252 -> ibs hell
*/





/* -----------------------------------------
   Inhalt – zwei Zustände übereinander
   ----------------------------------------- */

.ibs-card__content {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 1.8rem;
  bottom: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 30rem;
  z-index: 2;
}

/* Default-Inhalt */
.ibs-card__content--default {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Hover-Inhalt */
.ibs-card__content--hover {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.25s ease;
  pointer-events: none;
}

/* Hover: Default ausblenden, Hover-Inhalt einblenden */
.ibs-card:hover .ibs-card__content--default {
  opacity: 0;
  transform: translateY(-8px);
}

.ibs-card:hover .ibs-card__content--hover {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* -----------------------------------------
   Typografie
   ----------------------------------------- */

.ibs-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffdd57; /* Akzent-Gelb */
}

.ibs-card__title {
  margin: 0;
  font-size: 2.3rem;
  line-height: 1.45;
  color: #ffffff;
}

.ibs-card__text {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.6;
  color: #f5f7fa;
}

/* CTA-Button (einziger Link in der Kachel) */
.ibs-card__link {
  margin-top: 1.1rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.32);
  color: #ffdd57;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.ibs-card__link::after {
  content: "›";
  font-size: 1.1em;
}

/* Hover-Effekte der Kachel */
.ibs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.ibs-card:hover .ibs-card__bg {
  transform: scale(1.05);                 /* etwas weniger Zoom */
  opacity: 0.85 !important;               /* Bild fast voll sichtbar (vorher 0.4) */
  filter: brightness(1) saturate(1.1);    /* nicht zusätzlich abdunkeln */
}

.ibs-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.35),   /* Overlay oben viel transparenter */
    rgba(0, 0, 0, 0.35)        /* unten auch deutlich leichter */
  ) !important;
}

/* -----------------------------------------
   Hintergrundbilder je Kachel
   (URLs bitte anpassen)
   ----------------------------------------- */

.ibs-card--datenschutz .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/datenschutzbeauftragter-300x200-1.webp");
}

.ibs-card--arbeitssicherheit .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/fachkraft-fuer-arbeitssicherheit-industrie-gewerbe-buero-1020x675-1.webp");
}

.ibs-card--bem .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/bem-betriebliches-eingliederungsmanagement-1020x675-1.webp");
}

.ibs-card--bs .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/brandschutzbeauftragter-1020x675-1.webp");
}

.ibs-card--hgsb .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/hinweisgeberschutzbeauftragter-1020x675-1.webp");
}

.ibs-card--ki .ibs-card__bg {
  background-image: url("https://www.ibs.de/uploads/ki-beauftragter-1020x675-1.webp");
}

/* -----------------------------------------
   Layout: 1 Spalte mobil, 2 Spalten Desktop
   ----------------------------------------- */

/* Mobil/Tablet: untereinander, nur Default-Inhalt */
@media (max-width: 899px) {
  .ibs-cards-row {
    padding: 2.5rem 1.25rem;
  }

  .ibs-card {
    width: 100%;
    float: none;
    min-height: 260px;
  }

  /*.ibs-card__content {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    padding: 1.8rem 2rem;
  }*/

  .ibs-card__content--hover {
    /*display: none;*/ /* auf Touch-Geräten kein Hover-Text */
  }
}

/* Desktop: 2 Spalten, gleiche Höhe */
@media (min-width: 900px) {
  .ibs-card {
    float: left;
    width: 47%;
    margin-bottom: 1.0rem;
    min-height: 320px; /* gleiche visuelle Höhe */
  }

  .ibs-card--right {
    margin-left: 6%; /* 46 + 8 + 46 = 100 */
  }
}

/* -----------------------------------------
   Knalligerer Hover für IBS-Kacheln
   (basiert auf .ibs-card Setup)
   ----------------------------------------- */

/* sanfte Übergänge für Grundzustand */
.ibs-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* zusätzlicher Glanz-Layer (liegt über dem Overlay, aber unter dem Text) */
.ibs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.22),
      transparent 60%
    );
  opacity: 0;
  pointer-events: none;
  z-index: 1; /* unterhalb .ibs-card__content (z-index:2), über .ibs-card__bg */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* kräftiger Hover */
.ibs-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 221, 87, 0.85); /* goldener Rahmen */
}

/* Glanz-Layer sichtbar machen */
.ibs-card:hover::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Bild beim Hover lebendiger, ohne Lesbarkeit zu verlieren */
.ibs-card:hover .ibs-card__bg {
  transform: scale(1.1);
  opacity: 0.8;
  filter: brightness(0.95) saturate(1.15);
}

/* Overlay beim Hover etwas transparenter, damit das Bild mehr knallt */
.ibs-card:hover::before {
  background: linear-gradient(
    135deg,
    rgba(0, 123, 255, 0.55),
    rgba(0, 0, 0, 0.55)
  );
}

/* Eyebrow und Titel leicht hervorheben */
.ibs-card:hover .ibs-card__eyebrow {
  color: #ffea8a;
}

.ibs-card:hover .ibs-card__title {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* CTA-Button: mehr Kontrast + kleine Bewegung */
.ibs-card__link {
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.ibs-card:hover .ibs-card__link {
  background-color: rgba(0, 0, 0, 0.6);
  transform: translateX(3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Schrift im engen Zweispaltenbereich verkleinern */
/*
*@media (max-width: 1100px) and (min-width: 900px) {
*  .ibs-card__title {
*    font-size: 1.6rem;   /* deutlich kleiner als 2.3rem */
/*   line-height: 1.35;
*  }
*
*  .ibs-card__text {
*    font-size: 1.1rem;   /* statt 1.8rem */
/*    line-height: 1.5;
*  }
*
*  .ibs-card__eyebrow {
*    font-size: 0.72rem;  /* leicht kleiner als 0.82rem */
/*  }
*
*  /* Innenabstände leicht reduzieren, damit mehr Platz bleibt */
/*  .ibs-card__content {
*    left: 1.4rem;
*    right: 1.4rem;
*    top: 1.5rem;
*    bottom: 1.5rem;
*  }
*}
*/
/* hier neu ab 18.01.2026 */

/* =========================================
   Responsive Fix: fluid type + no overflow
   ========================================= */

/* Optional: Variablen zentral steuern */
.ibs-cards-row{
  --ibs-inset: clamp(1.0rem, 2.2vw, 2.0rem);
  --ibs-gap: clamp(0.45rem, 1.2vw, 0.7rem);

  --ibs-eyebrow: clamp(0.68rem, 0.60rem + 0.35vw, 0.82rem);
  --ibs-title:   clamp(1.35rem, 1.00rem + 1.8vw, 2.30rem);
  --ibs-text:    clamp(1.00rem, 0.85rem + 1.35vw, 1.80rem);
}

/* Link soll die ganze Kachel abdecken (sauberes Klickziel) */
.ibs-card > a{
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Content-Insets und Breite fluid machen */
.ibs-card__content{
  left: var(--ibs-inset);
  right: var(--ibs-inset);
  top: var(--ibs-inset);
  bottom: var(--ibs-inset);
  gap: var(--ibs-gap);

  max-width: min(30rem, 100%);
  min-width: 0; /* wichtig für Flex-Overflow */
}

/* Wichtig: Flex-Children dürfen schrumpfen/umbrechen */
.ibs-card__content > *{
  min-width: 0;
}

/* Typografie: fließend statt sprunghaft */
.ibs-card__eyebrow{
  font-size: var(--ibs-eyebrow);
}

.ibs-card__title{
  font-size: var(--ibs-title);
  line-height: 1.25; /* etwas kompakter als 1.45, vermeidet Engstellen */
  overflow-wrap: anywhere;  /* verhindert rechts rauslaufen */
  hyphens: auto;            /* bessere Silbentrennung */
  text-wrap: balance;       /* nice-to-have (moderne Browser) */
}

.ibs-card__text{
  font-size: var(--ibs-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Optional: Wenn du harte Worttrennungen vermeiden willst, nimm statt 'anywhere':
   overflow-wrap: break-word; 
*/

/* old version
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 40px;
  margin: 24px 0;
}

.fact {
  min-width: 160px;
  text-align: center;
  font-weight: 600;
}

.fact span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  margin-top: 4px;
}
*/

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.fact {
  min-height: 72px;
  text-align: center;
  font-weight: 600;
}

.fact span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.2;
  margin-top: 4px;
}

@media (max-width: 767px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}