/* style.css - Professionelle Version für EDV-Support */
:root {
  --primary: #4080E1;   /* EDV-Blau */
  --secondary: #274E8A; /* Elegantes Graublau */
  --accent: #A8251A;    /* Akzentfarbe (dezent orange) */
  --light: #93BDFA;     /* Hintergrund */
  --text: #292929;      /* Haupttext */
}

/* Grundlayout */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text);
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--light);
}

/* Header */
header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--primary);
}

h1 { color: var(--primary); font-size: 2.3rem; }
h2 { color: var(--secondary); font-weight: normal; }
h3 { color: var(--primary); margin-bottom: 15px; }

/* Leistungsbereich */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.service-card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}
.service-card:hover {
  transform: translateY(-5px);
}

/* Vorher-Nachher-Grafik */

.single-image {
  text-align: center;
  margin: 40px 0;  /* Größerer Abstand oben/unten */
}

.single-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border: 1px solid #ddd; /* Optional: Dünner Rahmen */
  height: auto; /* Natürliche Proportionen */
}

.single-image p {
  margin-top: 15px;
  font-style: italic;
  color: #4A6572; /* Graublau aus Ihrer Palette */
  background: #f9f9f9; /* Hellgrauer Hintergrund wie vorher */
  padding: 12px;
  border-radius: 0 0 8px 8px; /* Abgerundete Ecken unten */
}
/* Preise */
.pricing {
  background: white;
  padding: 25px;
  border-radius: 8px;
  margin: 30px 0;
}
.pricing-card {
  margin: 20px 0;
  padding: 15px;
  border-left: 4px solid var(--accent);
}
.guarantee {
  background: #E3F2FD;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-top: 20px;
}

/* Kontakt */
.contact {
  background: #eef2f7;
  padding: 25px;
  border-radius: 8px;
  margin-top: 30px;
}

/* Footer */
footer {
  margin-top: 50px;
  text-align: center;
  padding: 20px;
  color: #777;
  font-size: 0.9rem;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 600px) {
  body { padding: 15px; }
  .comparison { flex-direction: column; }
  h1 { font-size: 1.8rem; }
}