:root {
  --color-bg: #fdf7ef;
  --color-text: #6998b8;
  --color-accent: #e4cdc8;
  --color-white: #ffffff;

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;

  --container-width: 1200px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  display: block;
}


/* Layout */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header */
.header {
  /* Removed fixed height to accommodate larger logo */
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  /* Reduced vertical padding slightly as logo provides height */

  /* Sticky Navigation */
  position: sticky;
  top: 0;
  background-color: var(--color-bg);
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* Subtle shadow for separation */
  width: 100%;
  max-width: 100%;
  /* Spans full width, content stays in container if needed, but here we keep simple */
}

/* Ensure container wraps content properly if header is outside */
/* Check: If header is INSIDE .container, sticky works relative to it? 
   No, sticky needs to be top of viewport. 
   We will keep basic sticky but might need to adjust HTML structure slightly if .container confines it.
   For now, we'll keep it simple. */

.nav ul {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}


.nav a {
  font-weight: 500;
  font-size: 1.1rem;
}

.logo-sm {
  height: 250px;
  width: auto;
  display: block;
}

/* Burger-Button: nur auf Desktop ausblenden */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.2s;
}
.burger:hover {
  color: var(--color-text);
  opacity: 0.85;
}
.burger:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
.burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

/* Hero Section */
.hero {
  padding: var(--spacing-sm) 0;
  text-align: center;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
  line-height: 1.2;
}

.hero p {
  font-size: 1.1rem;
  color: var(--color-text);
  opacity: 0.8;
  max-width: 600px;
  margin-bottom: var(--spacing-md);
}

html {
  scroll-behavior: smooth;
}

/* Textseiten (Impressum, Datenschutz) – gleiche Schriftgrößen wie Index */
.page-content {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
}
.page-content h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--color-text);
  line-height: 1.25;
}
.page-content h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-text);
}
.page-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}
.page-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.page-content p:last-child {
  margin-bottom: 0;
}
.page-content a {
  color: var(--color-text);
}
.page-content .source {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 2rem;
}

/* Services Section */
#services h2 {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

#services > div {
  align-items: stretch;
  padding: var(--spacing-md);
  border-radius: 12px;
  background: linear-gradient(to right,
      rgba(228, 205, 200, 0.28) 0%,
      rgba(228, 205, 200, 0.28) 33.333%,
      rgba(228, 205, 200, 0.16) 33.333%,
      rgba(228, 205, 200, 0.16) 66.666%,
      rgba(228, 205, 200, 0.28) 66.666%,
      rgba(228, 205, 200, 0.28) 100%);
}

#services h3 {
  position: relative;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.25rem;
}

#services h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: 999px;
}

#services h4 {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background-color: var(--color-accent);
  color: var(--color-text);
  margin-top: 1.5rem;
}

/* Services Grid (Desktop) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 2rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  background-color: var(--color-text);
  color: var(--color-white);
  border-radius: 4px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: transform 0.2s, opacity 0.2s;
}


/* ========== Mobile / Responsive ========== */
@media (max-width: 768px) {
  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  main {
    padding: 2rem 0 !important;
  }

  .header {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: auto;
    padding: var(--spacing-md) 0;
    gap: 0;
  }

  .header .logo {
    flex: 1;
    min-width: 0;
  }

  .logo-sm {
    height: 100px;
    width: auto;
  }

  .burger {
    display: flex;
    flex-shrink: 0;
  }

  .nav {
    width: 100%;
    display: none;
    flex-direction: column;
    padding-top: var(--spacing-sm);
  }

  .header.nav-open .nav {
    display: flex;
  }

  .header.nav-open .burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .header.nav-open .burger span:nth-child(2) {
    opacity: 0;
  }
  .header.nav-open .burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    min-height: 48px;
    border-top: 1px solid rgba(105, 152, 184, 0.15);
  }

  .hero {
    padding: var(--spacing-lg) 0;
  }

  .hero h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    padding: 0 var(--spacing-sm);
  }

  .hero p {
    font-size: 1rem;
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
  }

  .hero .btn {
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Services: 1 Spalte auf Mobil, Kategorie → zugehörige Unterpunkte */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    display: grid;
  }

  /* Reihenfolge: Kategorie 1 + Subs, Kategorie 2 + Subs, Kategorie 3 + Subs */
  .services-grid article:nth-child(1) { order: 1; }   /* Infrastruktur */
  .services-grid article:nth-child(2) { order: 5; }   /* Managed Services */
  .services-grid article:nth-child(3) { order: 9; }   /* Sicherheit & Zusammenarbeit */
  .services-grid article:nth-child(4) { order: 2; }   /* Server-Management */
  .services-grid article:nth-child(5) { order: 3; }  /* Netzwerktechnik */
  .services-grid article:nth-child(6) { order: 4; }   /* Storage-Lösungen */
  .services-grid article:nth-child(7) { order: 6; }   /* Monitoring */
  .services-grid article:nth-child(8) { order: 7; }  /* Patch-Management */
  .services-grid article:nth-child(9) { order: 8; }  /* Managed Workplace */
  .services-grid article:nth-child(10) { order: 10; } /* E-Mail-Sicherheit */
  .services-grid article:nth-child(11) { order: 11; }  /* IT-Consulting */
  .services-grid article:nth-child(12) { order: 12; } /* Collaboration Tools */

  #services {
    padding: 2rem 0 !important;
  }

  #services h2 {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }

  #services > .services-grid {
    padding: var(--spacing-md) 0;
  }

  #services article {
    padding: 1.5rem !important;
  }

  #services h3 {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
  }

  /* Kontakt-Bereich */
  #contact {
    padding: 2rem 0 !important;
  }

  #contact > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1.5rem var(--spacing-md) !important;
    border-radius: 8px;
  }

  #contact h2 {
    font-size: 1.25rem;
  }

  #contact .btn {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
  }

  footer {
    padding: 1.5rem var(--spacing-md) !important;
    font-size: 0.85rem;
  }

  footer a {
    display: inline-block;
    padding: 0.25rem 0;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* Sehr kleine Displays (z. B. schmale Smartphones) */
@media (max-width: 480px) {
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .logo-sm {
    height: 80px;
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  .hero p {
    font-size: 0.95rem;
  }
}