/* Darstellung der ueber das Backend (admin/) gepflegten Inhalte der Startseite. */

/* Bis content.json geladen ist, bleiben die redaktionell gepflegten Stellen
   unsichtbar (Platz bleibt reserviert) - so blitzt kein alter Text auf. */
.ib-cms-warten [data-cms],
.ib-cms-warten [data-cms-wkz] { visibility: hidden; }

/* Karten: frei waehlbare Symbole begrenzen; ohne Symbol entfaellt die Einrueckung */
#boxcontent article > img[data-cms-bild] { max-width: 60px; max-height: 60px; width: auto; height: auto; }
#boxcontent article.ib-ohne-icon h3,
#boxcontent article.ib-ohne-icon p { margin-left: 0; }

/* Weiterfuehrende Links: Eintraege ohne Bild werden als Text-Button gezeigt */
#four_columns .ib-btn-logo .ib-btn-text {
  font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 14px; color: #333;
  border: 2px solid #333; border-radius: 6px; padding: 8px 14px;
}

/* Herstellerlogos (WKZ) im Kopfbereich: Logos liegen uebereinander, jeweils eines ist sichtbar */
.ib-hero-wkz { display: inline-block; position: relative; z-index: 20; margin-top: -40px; }
.ib-hero-wkz .ib-swap-item {
  position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.ib-hero-wkz .ib-swap-item.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .8s ease, visibility 0s;
}
.ib-hero-wkz a.ib-swap-item { cursor: pointer; }
.ib-hero-wkz .ib-swap-item img { transition: transform .15s ease; }
.ib-hero-wkz a.ib-swap-item:hover img { transform: translate(-50%, calc(-50% - 3px)); }
@media (prefers-reduced-motion: reduce) {
  .ib-hero-wkz .ib-swap-item, .ib-hero-wkz .ib-swap-item.is-active { transition: none; }
}

/* Praxisleitfaeden: alle Eintraege liegen in derselben Grid-Zelle (Karte behaelt die Hoehe des laengsten),
   jeweils einer ist sichtbar - wie beim News-Wechsler. */
.ib-leit-slides { display: grid; }
.ib-leit-slide {
  grid-area: 1 / 1; display: flow-root; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.ib-leit-slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
#boxcontent .ib-leit-slide > img { max-width: 60px; max-height: 60px; width: auto; height: auto; }
#boxcontent .ib-leit-slide.ib-ohne-icon h3,
#boxcontent .ib-leit-slide.ib-ohne-icon p { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .ib-leit-slide, .ib-leit-slide.is-active { transition: none; }
}

/* Mobil: Partner-Logos neben unserem Logo (siehe index-cards.css) */
@media (max-width: 700px) {
  .ib-hero-wkz { flex: none; margin-top: 0; }
}

/* Karte "Herzlich willkommen": auf dem Handy nur der Kurztext (ist keiner hinterlegt, bleibt der volle Text) */
#boxcontent article p.ib-nur-mobil { display: none; }
@media (max-width: 700px) {
  #boxcontent article:not(.ib-mobil-voll) p.ib-nur-desktop { display: none; }
  #boxcontent article:not(.ib-mobil-voll) p.ib-nur-mobil { display: block; }
}

/* Handy: Kartentexte linksbündig statt Blocksatz (in der schmalen Spalte entstehen sonst große Wortlücken) */
@media (max-width: 700px) {
  #boxcontent article p { text-align: left !important; hyphens: auto; -webkit-hyphens: auto; }
}

/* Karte "Kunden & Liefergebiet": volle Breite, ohne Symbol */
#boxcontent article.ib-kunden-card { width: 100%; }

/* Partner-Logos: zarte Schwebebewegung, der Schatten wandert mit (wie beim Hauptlogo, nur schwaecher) */
.ib-hero-wkz .ib-swap-item { animation: ib-partner-float 10s ease-in-out infinite; }
.ib-hero-wkz .ib-swap-item img { animation: ib-partner-schatten 10s ease-in-out infinite; }
@keyframes ib-partner-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes ib-partner-schatten {
  0%, 100% { filter: drop-shadow(0 8px 13px rgba(0,0,0,.52)); }
  50%      { filter: drop-shadow(0 15px 23px rgba(0,0,0,.40)); }
}
@media (prefers-reduced-motion: reduce) {
  .ib-hero-wkz .ib-swap-item, .ib-hero-wkz .ib-swap-item img { animation: none; }
}

/* Rufnummer auf eigener Zeile (Absatz aus nur {telefon}): gross und auffaellig statt Fliesstext */
#boxcontent article p.ib-telefon-gross {
  margin: 10px 0 0;
  /* !important noetig, da die Handy-Regel oben (Zeile 64) text-align generell auf left !important setzt */
  text-align: center !important;
}
#boxcontent article p.ib-telefon-gross a {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #bf0000;
  text-decoration: none;
}
#boxcontent article p.ib-telefon-gross a:hover {
  text-decoration: underline;
}
@media (max-width: 700px) {
  #boxcontent article p.ib-telefon-gross a { font-size: 24px; }
}