/*
 * Startseiten-Redesign „Variante D" — ICT Berlin GmbH
 * Restyling der bestehenden Screenr-Sektionen (Features, Services, News,
 * About). Neue Sektionen (Logo-Band, Kundenstimmen) liefert das Plugin
 * ict-berlin-referenzen. Keine Theme-Dateien angefasst.
 */

/* =========================================================
   Hero: Scroll-Pfeil (btn-next-section) ausblenden
   ========================================================= */
#hero .btn-next-section {
  display: none;
}

/* =========================================================
   Über uns (About): zentrierter Text + CTA-Button
   (Theme richtet die About-Titelzeile links aus — Variante D
   ist komplett zentriert)
   ========================================================= */
.screenr-section.section-about .section-title-area {
  text-align: center;
  margin-bottom: 30px;
}

.section-about .section-desc {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.9;
}

.ict-about-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* =========================================================
   Leistungen (Features): schlanke Icon-Zeilen statt
   farbiger Kacheln (bg_color der Items wurde geleert)
   ========================================================= */
.screenr-section.section-features {
  background: #f8f9f9;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  padding: 70px 0;
}

/* FAQ auf den einheitlichen 70px-Rhythmus heben (Theme-Standard wäre 50px) */
.screenr-section.section-faq {
  padding: 70px 0;
}

/* Theme rendert die card-group als display:table über die volle
   Seitenbreite (randabfallende Farbkacheln). Für die Icon-Zeilen:
   Flex-Layout und auf Container-Breite begrenzen. */
.features-content.card-group {
  display: flex;
  flex-flow: row wrap;
  gap: 28px 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.features-content .features__item {
  flex: 1 1 0;
  min-width: 280px;
}

.features-content .features__item {
  background: transparent;
  color: #777777;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  font-size: 14px;
}

@media (max-width: 991px) {
  .features-content .features__item {
    display: flex;
    margin-bottom: 8px;
  }
}

.features-content .features__item .features__item-media.icon {
  padding-top: 0;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border: 1px solid #e86240;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-content .features__item .features__item-media.icon i,
.features-content .features__item .features__item-media .fa-7x {
  font-size: 22px;
  color: #e86240;
}

.features-content .features__item .features__item-content {
  text-align: left;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
}

.features-content .features__item h3 {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Überschreibt die weiße Linkfarbe aus dem Customizer-Zusatz-CSS */
.features-content .features__item .features__item-headline-custom {
  color: #444444 !important;
  text-decoration: none;
}

.features-content .features__item .features__item-headline-custom:hover {
  color: #e86240 !important;
}

/* =========================================================
   IT-Dienstleistungen (Services): kompakte Icon-Kacheln
   (Items auf thumb_type=icon umgestellt, Layout 4 Spalten)
   ========================================================= */
/* Weißer Sektionshintergrund (Theme-Klasse section-meta setzt Grau) */
.screenr-section.section-services.section-meta {
  background-color: #ffffff;
}

/* Kachelabstände wie Variante D: 20px horizontal wie vertikal
   (statt der 30px-Bootstrap-Gutter) */
.services-content .row {
  margin-left: -10px;
  margin-right: -10px;
}

.services-content .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

.services-content .card.service__media-icon {
  position: relative;
  border: 1px solid #e9e9e9;
  border-radius: 0;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px 22px;
  margin-bottom: 20px;
  min-height: 92px;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.services-content .card.service__media-icon:hover {
  border-color: #e86240;
  background: #fdf7f5;
}

.services-content .service__media-icon .service-card-icon {
  position: static;
  order: -1;
  flex: 0 0 28px;
  text-align: center;
}

.services-content .service__media-icon .service-card-icon i {
  font-size: 22px;
}

.services-content .service__media-icon .service-card-content {
  padding-right: 0;
}

.services-content .service__media-icon .card-title {
  margin: 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.services-content .service__media-icon .card-title a {
  color: #444444;
}

/* Kurzbeschreibung in den Kacheln ausblenden — Icon + Titel genügen */
.services-content .service__media-icon .card-text {
  display: none;
}

/* Ganze Kachel klickbar machen */
.services-content .service__media-icon .card-title a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* =========================================================
   Blog (News): Variante-D-Layout — eine große Feature-Karte
   links (erster Beitrag mit Bild), rechts kompakte Liste
   ========================================================= */
.section-news .entry-grid-cate a {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-news .entry-grid-more a {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-news .entry-grid-more a:hover {
  color: #e86240;
}

/* Split-Layout nur in Browsern mit :has() — sonst bleibt das Karten-Grid */
@supports selector(article:has(a)) {
  @media (min-width: 768px) {
    .section-news .content-grid.row {
      display: grid;
      grid-template-columns: minmax(300px, 7fr) minmax(280px, 5fr);
      gap: 0 40px;
      align-items: start;
      margin-left: 0;
      margin-right: 0;
    }

    /* Alle Beiträge standardmäßig als kompakte Listenzeilen rechts */
    .section-news .content-grid article {
      grid-column: 2;
      width: 100% !important;
      padding: 0 !important;
      float: none !important;
      margin: 0 !important;
    }

    .section-news .content-grid article .entry-thumb,
    .section-news .content-grid article .entry-excerpt,
    .section-news .content-grid article .entry-grid-more {
      display: none;
    }

    .section-news .content-grid article .entry-grid-elements {
      border: 0;
      border-bottom: 1px solid #e9e9e9;
      background: transparent;
      padding: 18px 4px;
    }

    .section-news .content-grid article .entry-grid-cate a {
      font-size: 11px;
    }

    .section-news .content-grid article .entry-grid-title {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 0;
    }

    /* Feature-Karte: der ERSTE Beitrag mit Beitragsbild */
    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) {
      grid-column: 1;
      grid-row: 1 / span 5;
      border: 1px solid #e9e9e9;
      border-top: 3px solid #e86240;
      background: #ffffff;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-thumb,
    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-excerpt,
    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-grid-more {
      display: block;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-thumb {
      float: none;
      margin: 0;
      max-width: none;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-thumb img {
      width: 100%;
      height: auto;
      display: block;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-grid-elements {
      border: 0;
      background: #ffffff;
      padding: 28px 30px 32px;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-grid-cate a {
      font-size: 12px;
    }

    .section-news .content-grid article:has(.entry-thumb):not(:is(.section-news .content-grid article:has(.entry-thumb) ~ article)) .entry-grid-title {
      font-size: 22px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 12px;
    }

    /* „Lies unseren Blog"-Button unter der rechten Beitragsliste
       (Spaltenstart = linke Spalte 7/12 + 40px Gap) */
    .section-news .content-grid-loadmore {
      text-align: left;
      margin-left: calc((100% - 40px) * 7 / 12 + 40px);
      margin-top: 0;
      padding-top: 22px;
    }
  }
}

/* =========================================================
   Blog mobil: kompakte Liste mit Thumbnails (Vorlage 4c)
   — kleines Bild links (96x68), Kategorie orange + Titel rechts
   ========================================================= */
@media (max-width: 767px) {
  /* Sektions-Titel mobil kompakter (Vorlage 4c: 24px) */
  .screenr-section .section-title {
    font-size: 24px;
  }

  /* Die About-Sektion hat keinen .container (im Theme auskommentiert) —
     ohne seitliches Padding klebt der Text mobil an der Bildschirmkante */
  .screenr-section.section-about {
    padding-left: 22px;
    padding-right: 22px;
  }

  .section-news .content-grid.row {
    display: block;
    /* negative Bootstrap-row-Margins neutralisieren, sonst ragen die
       Listenzeilen 15px ueber den Container an den Bildschirmrand */
    margin-left: 0;
    margin-right: 0;
  }

  .section-news .content-grid article {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e9e9e9;
  }

  .section-news .content-grid article .entry-thumb {
    width: 96px;
    height: 68px;
    flex-shrink: 0;
    float: none;
    margin: 0;
    max-width: none;
    overflow: hidden;
  }

  .section-news .content-grid article .entry-thumb img {
    width: 96px;
    height: 68px;
    object-fit: cover;
    display: block;
  }

  .section-news .content-grid article .entry-grid-elements {
    border: 0;
    background: transparent;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .section-news .content-grid article .entry-grid-cate {
    margin: 0;
  }

  .section-news .content-grid article .entry-grid-cate a {
    font-size: 10px;
    color: #e86240;
    letter-spacing: 1px;
  }

  .section-news .content-grid article .entry-grid-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
  }

  .section-news .content-grid article .entry-excerpt,
  .section-news .content-grid article .entry-grid-more {
    display: none;
  }

  /* Bild-Platzhalter für Beiträge ohne Beitragsbild (Vorlage: schraffiert
     mit Bild-Icon). Nur in Browsern mit :has — sonst entfällt der Block. */
  .section-news .content-grid article:not(:has(.entry-thumb))::before {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
    font-size: 16px;
    color: #b9bfc3;
    width: 96px;
    height: 68px;
    flex-shrink: 0;
    background: repeating-linear-gradient(45deg, #f5f6f7 0px, #f5f6f7 10px, #eef0f1 10px, #eef0f1 20px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .section-news .content-grid-loadmore {
    margin-top: 24px;
    text-align: center;
  }
}

/* =========================================================
   FAQ: Skin „clean" — eckige Karten, Orange-Akzent oben,
   offene Frage orange (Vorgabe aus dem Redesign)
   ========================================================= */
.section-faq .faq-card {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #e9e9e9;
  border-top: 3px solid #e9e9e9;
}

.section-faq .faq-card:hover {
  transform: none;
  box-shadow: none;
  border-color: #dcdcdc;
  border-top-color: #e86240;
}

.section-faq .faq-card:has(.faq-question:not(.collapsed)) {
  border-top-color: #e86240;
}

.section-faq .faq-question {
  color: #444444;
}

.section-faq .faq-question:not(.collapsed) {
  color: #e86240;
}

.section-faq .faq-question::after {
  color: #bbbbbb;
}

.section-faq .faq-question:not(.collapsed)::after {
  color: #e86240;
}

.section-faq .faq-answer {
  color: #777777;
}

/* =========================================================
   Services: CTA-Kachel „Beratung anfragen" (Link auf die
   Kontaktseite) in Orange
   ========================================================= */
.services-content .card.service__media-icon:has(a[href*="/kontakt/"]),
.services-content .card.service__media-icon:has(a[href*="/contact/"]) {
  background: #e86240;
  border-color: #e86240;
}

.services-content .card.service__media-icon:has(a[href*="/kontakt/"]):hover,
.services-content .card.service__media-icon:has(a[href*="/contact/"]):hover {
  background: #d9532f;
  border-color: #d9532f;
}

.services-content .card.service__media-icon:has(a[href*="/kontakt/"]) .card-title a,
.services-content .card.service__media-icon:has(a[href*="/contact/"]) .card-title a {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.services-content .card.service__media-icon:has(a[href*="/kontakt/"]) .service-card-icon i,
.services-content .card.service__media-icon:has(a[href*="/contact/"]) .service-card-icon i {
  color: #ffffff;
}