/*
 PHP version 8.0~
 @copyright Copyright (c) 2026 Ingo Koch
 @link      https://www.le-media-it.de
 @author    Ingo Koch
 @lastEdit  31.01.2026
*/
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #0f1115;
  color: #e6e6e6;
  line-height: 1.6;
}
.container { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }

/* HEADER */
.header {
  text-align: center;
  padding: 3rem 1rem;
  background-color: #12151b;
  border-bottom: 2px solid #5fb3a2;
}
.header h1 { font-size: 2rem; color: #ffffff; margin-bottom: 0.5rem; }
.header h1:hover { color: #4da3ff; transition: color 0.3s ease; }
.header .tagline { color: #5fb3a2; font-size: 1.15rem; font-weight: 500; }
.site-title {
  color: #ffffff;
  text-decoration: none;
}
.site-title:hover {
  color: #4da3ff; /* sanfte Hover-Farbe */
}
/* HERO */
.hero { text-align: center; margin-bottom: 4rem; }
.hero h2 { font-size: 1.5rem; color: #cfd6e1; margin-bottom: 0.5rem; }

/* SERVICES */
.services { margin-bottom: 4rem; }
.services .service { margin-bottom: 0.5rem; padding: 1rem; transition: all 0.3s ease; }
.services h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
}

.services h3::before {
  content: '';
  margin-right: 0.5rem;
}

.services .service:hover {
  background-color: #1b1f27;
  border-radius: 5px;
  padding: 1rem;
  transition: all 0.3s ease;
}


/* ABOUT & WORKFLOW */
.about, .workflow { margin-bottom: 4rem; }
.about p, .workflow p { max-width: 760px; margin-bottom: 1.2rem; }

/* CONTACT */
.contact { margin-bottom: 4rem; }
.contact a { color: #4da3ff; text-decoration: none; }
.contact a:hover { text-decoration: underline; }

/* FOOTER */
.footer {
  text-align: center;
  padding: 2rem 0;
  background-color: #12151b;
  border-top: 2px solid #5fb3a2;
  font-size: 0.9rem;
  color: #8fa8c8;
}
.footer a { color: #4da3ff; text-decoration: none; margin: 0 0.5rem; }
.footer a:hover { text-decoration: underline; color: #5fb3a2; }

/* SEKTION TRENNUNG */
section { border-bottom: 1px solid #2a2f3a; padding-bottom: 3rem; margin-bottom: 3rem; }
section:last-of-type { border-bottom: none; }

/* RESPONSIV */
@media (max-width: 600px) {
  .hero h2 { font-size: 1.25rem; }
  .services h3 { font-size: 1.1rem; }
}