/* ===========================================================
   SPEZIFISCHE STYLES für Virtual-Office-Bereich (Step Cards)
   (Nur in dusbase.css einfügen – keine Duplikate zu base.css
    oder elements.css!)
=========================================================== */

/* 1. Gesamt-Section: leichter Grauton und kompakte Abstände */
#virtual-office-steps {
  background: #e6e6e6;       /* Sanfter Hellgrau-Hintergrund */
  padding-top: 60px;         /* Weniger Weißraum oben (statt 80px) */
  padding-bottom: 60px;      /* Weniger Weißraum unten */
}

/* 2. SEO-Text: zentrieren, maximale Breite */
.vo-seo-text p {
  max-width: 800px;          /* Ideale Lesebreite */
  margin: 0 auto 30px auto;  /* Zentriert, 30px Abstand zu den Karten */
  text-align: center;
}

/* 3. Karten-Reihe (Flex-Wrapper nutzt Bootstrap-Grid, daher GAP nur minimal) */
.vo-cards-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;        /* Korrigiert Bootstrap-Seitenspacing */
  margin-right: -15px;
}

/* 3.1 Einzelne Karte: Basis-Styling */
.vo-card-lg {
  background: #fff;                                  /* Weiße Karte */
  border-radius: 4px;                                /* Abgerundete Ecke (4px) */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);             /* Leichter Schatten */
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 20px;                              /* Platz für Text unten */
  margin-left: 15px;                                 /* Gleicher horizont. Abstand wie Bootstrap */
  margin-right: 15px;
}

/* 3.2 Oberer Farbbalken */
.vo-card-bar-lg {
  height: 8px;                                       /* etwas dickerer Balken */
  background: #f7941d;                               /* Orange (text-orange-peel aus base.css) */
  transition: background 0.3s ease;
}

/* 3.3 Nummer oben (etwas größer als vorher) */
.vo-card-number-lg {
  font-size: 36px;                                   /* Große Zahl */
  font-weight: 700;
  color: #f7941d;                                    /* Orange aus base.css */
  text-align: center;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* 3.4 Titel der Karte */
.vo-card-title-lg {
  font-size: 20px;                                   /* Überschrift leicht größer */
  color: #333;                                       /* text-dark-gray */
  text-align: center;
  margin: 0 0 6px 0;
}

/* 3.5 Fließtext in der Karte */
.vo-card-text-lg {
  font-size: 16px;                                   /* etwas größerer Fließtext */
  line-height: 1.5;
  color: #555;                                       /* text-light-gray2 */
  text-align: center;
  padding: 0 15px 15px 15px;
}

/* 3.6 Hover-Effekt: Karte kippt leicht und Schatten verstärkt */
.vo-card-lg:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}

.vo-card-lg:hover .vo-card-bar-lg {
  background: #d67b00;                               /* Dunkleres Orange beim Hover */
}

/* 4. Abstand zwischen Überschrift & SEO-Text */
.margin-thirty-bottom {
  margin-bottom: 30px;  /* Diese Hilfsklasse verwenden, falls nötig */
}

/* 5. Abstände unterhalb der Karten-Reihe */
.margin-ten-bottom {
  margin-bottom: 10px;  /* schon in Bootstrap vorhanden, nur zur Sicherheit */
}

/* 6. Mobile-Responsive: Karten untereinander, ohne Rotation */
@media (max-width: 768px) {
  /* Karte wird 100% breit, keinen Versatz durch margin-left */
  .vo-card-lg {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    transform: none !important;    /* keine Kippung auf Mobile */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  /* Balken etwas schlanker darstellen */
  .vo-card-bar-lg {
    height: 6px;
  }
  /* Textgrößen */
  .vo-card-number-lg {
    font-size: 32px;
  }
  .vo-card-title-lg {
    font-size: 18px;
  }
  .vo-card-text-lg {
    font-size: 14px;
    line-height: 1.4;
    padding: 0 10px 10px 10px;
  }
  /* SEO-Text zentrieren und etwas kleiner */
  .vo-seo-text p {
    font-size: 15px;
    max-width: 90%;
  }
}