main > section > h2 {
  margin-top: 2.5rem;
}
main > section:first-child > h2 {
  margin-top: 0;
}

main > section {
  margin-top: 3.5rem;
  margin-bottom: 4.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
main > section#home {
  margin-bottom: 2.5rem;
  margin-top: 0;
  padding-bottom: 0;
}
main > section#services {
  margin-top: 1.5rem;
}
/* Haupt-CSS für EDV-IT-Services Gödecke */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css');

/* Fade-in animation for sections */
.fade-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Entrance animation for cards and headings */
.animate-up-init {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.animate-up-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover effects for buttons, links, images */
a.btn, .btn {
  transition: box-shadow 0.3s, transform 0.3s;
}
a.btn:hover, .btn:hover {
  box-shadow: 0 4px 16px rgba(36,99,235,0.18);
  transform: translateY(-2px) scale(1.04);
}
a, .nav-link, .dropdown-item {
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover, .nav-link:hover, .dropdown-item:hover {
  color: #2463eb;
  text-shadow: 0 2px 8px rgba(36,99,235,0.12);
}
img:hover {
  filter: brightness(1.08) drop-shadow(0 2px 8px rgba(36,99,235,0.12));
  transform: scale(1.05);
  transition: filter 0.3s, transform 0.3s;
  position: relative;
}

img.img-hover-overlay {
  transition: box-shadow 0.3s, transform 0.3s;
  box-shadow: 0 2px 16px rgba(36,99,235,0.10);
}
img.img-hover-overlay:hover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(36,99,235,0.18);
  pointer-events: none;
  border-radius: inherit;
}


:root {
  --main-blue: #2563eb; /* Modernes, kräftiges Blau */
  --accent-blue: #06b6d4; /* Frisches Türkis */
  --school-orange: #f59e42; /* Sanftes Orange für Schulen */
  --success-green: #22c55e; /* Modernes Grün für Erfolg */
  --dark-blue: #1a2332;
  --light-bg: #f4f6fa;
}


body {
  background: var(--light-bg);
  color: var(--dark-blue);
  font-family: 'Open Sans', Arial, sans-serif;
}

/* Font Awesome Icons: Font-Family fix & Schutz vor Überschreibung */
.fa, .fas, .far, .fal, .fab {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome', sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
}

.navbar {
  background: var(--main-blue);
}

/* Entfernt: Navbar-Schriftfarbe weiß, damit Bootstrap die Standardfarbe (dunkel) verwendet */

footer {
  background: var(--dark-blue);
  color: #fff;
  padding: 1.5rem 0;
  text-align: center;
  margin-top: 2rem;
}

.btn-primary {
  background: var(--main-blue);
  border: none;
}

.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-blue);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--main-blue);
}

/* Cards für Zielgruppen-Akzentfarben */
.card-business {
  border-left: 6px solid var(--main-blue);
  background: #fff;
}
.card-school {
  border-left: 6px solid var(--school-orange);
  background: #fff;
}
.icon-business {
  color: var(--main-blue) !important;
}
.icon-school {
  color: var(--school-orange) !important;
}
.icon-success {
  color: var(--success-green) !important;
}
/* Dezenter Hover-Effekt für Leistungscards */
.row.g-4 .card {
  transition: box-shadow 0.2s, transform 0.2s;
}
.row.g-4 .card:hover {
  box-shadow: 0 8px 32px rgba(36,99,235,0.15), 0 1.5px 8px rgba(0,0,0,0.08);
  transform: translateY(-6px) scale(1.025);
  z-index: 2;
}

/* Icon hover effects for cards */
.card-body i.fas {
  transition: color 0.3s, transform 0.3s, filter 0.3s, box-shadow 0.3s;
}
.card-body i.fas:hover,
.card-body i.icon-business:hover,
.card-body i.icon-school:hover,
.card-body i.icon-success:hover {
  color: var(--main-blue) !important;
  transform: scale(1.22);
  filter: drop-shadow(0 2px 8px rgba(36,99,235,0.18));
  box-shadow: 0 0 16px 0 rgba(36,99,235,0.10);
  background: rgba(36,99,235,0.08);
  border-radius: 50%;
}

.card-business {
  transition: border-color 0.3s;
}
.card-business:hover {
  border-left-color: var(--accent-blue);
}

.card-school {
  transition: border-color 0.3s;
}
.card-school:hover {
  border-left-color: #ffb366;
}