/* =========================
   AZH – Global Stylesheet
   (gilt für alle Seiten)
   ========================= */

:root {
  /* Brandfarben */
  --it:       #0B3D91;
  --it-dark:  #021B4A;
  --web:      #FF7A00;
  --web-dark: #D64500;
  --brand:    #6B5AED;

  /* Basis */
  --white: #ffffff;
  --black: #111111;

  /* Layout */
  --header-height: 100px;
  --container: 1000px;

  /* Effekte */
  --shadow-1: 0 6px 20px rgba(46, 28, 28, 0.08);
}

/* ============ Reset & Base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Fokus sichtbar */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Screenreader-only */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ========= Buttons ========= */
.btn-it, .btn-web, .btn-brand, .btn-outline-it, .btn-outline-web {
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all .3s ease;
  display: inline-block;
}

/* Hero buttons - OUTLINE STYLE wie im Screenshot */
.hero-buttons .btn-it,
.hero-buttons .btn-web,
.hero-buttons .btn-brand {
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  margin: 0 8px;
}

.hero-buttons .btn-it {
  border: 2px solid #244E9B;
  background-color: white;
  color: #244E9B;
}
.hero-buttons .btn-it:hover {
  background-color: #244E9B;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero-buttons .btn-web {
  border: 2px solid var(--white);
  background-color: var(--white);
  color: var(--web);
}
.hero-buttons .btn-web:hover {
  background-color: var(--web);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero-buttons .btn-brand {
  border: 2px solid #4338CA;
  background-color: #4338CA;
  color: #fff;
}
.hero-buttons .btn-brand:hover {
  background-color: #fff;
  color: #4338CA;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* All other buttons - outline style */
.btn-it:not(.hero-buttons .btn-it) {
  background: transparent;
  border: 2px solid #0A192F;
  color: #0A192F;
}
.btn-it:not(.hero-buttons .btn-it):hover {
  background: #0A192F;
  color: var(--white);
}

.btn-web:not(.hero-buttons .btn-web) {
  background: transparent;
  border: 2px solid var(--web);
  color: var(--web);
}
.btn-web:not(.hero-buttons .btn-web):hover {
  background: var(--web);
  color: var(--white);
}

.btn-brand:not(.hero-buttons .btn-brand) {
  background: transparent;
  border: 2px solid #4338CA;
  color: #4338CA;
}
.btn-brand:not(.hero-buttons .btn-brand):hover {
  background: #4338CA;
  color: var(--white);
}

/* Legacy outline buttons for compatibility */
.btn-outline-it {
  background: transparent; color: var(--it); border: 2px solid var(--it);
}
.btn-outline-it:hover { background: var(--it); color: var(--white); }
.btn-outline-web {
  background: transparent; color: var(--web); border: 2px solid var(--web);
}
.btn-outline-web:hover { background: var(--web); color: var(--white); }

/* ========= Navigation ========= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;  /* Logo ganz links, Links ganz rechts */
  padding: 0 40px;
  z-index: 1000;
  background: transparent;
  transition: all 0.3s ease;
}

.navbar-group {
  display: contents;  /* Löst die Gruppierung auf - Logo und Links direkt in navbar */
}

.logo {
  flex-shrink: 0;
}

.nav-links {
  flex-shrink: 0;
}

.hamburger {
  position: absolute;
  right: 20px;
}
.navbar.scrolled {
  background: var(--white);
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.logo img {
  height: 120px; width: auto; display: none;
  transition: all 0.3s ease;
}
.logo .logo-light { display: block; }
.logo .logo-dark { display: none; }
.navbar.scrolled .logo .logo-light { display: none; }
.navbar.scrolled .logo .logo-dark  { display: block; }

/* Desktop Nav-Links */
.nav-links { list-style: none; display: flex; gap: 24px; }
.navbar .nav-link {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  padding-bottom: 4px;
  transition: color .2s ease;
  color: var(--white);
  font-size: 1.5rem;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px; background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navbar .nav-link:hover::after { transform: scaleX(1); }
.navbar.scrolled .nav-link { color: var(--black); }
.navbar .nav-it:hover,   .navbar .nav-it.active   { color: var(--it); }
.navbar .nav-web:hover,  .navbar .nav-web.active  { color: var(--web); }
.navbar .nav-brand:hover,.navbar .nav-brand.active{ color: var(--brand); }

/* ========= Mobile Nav (Hamburger + Overlay) ========= */
.hamburger { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
.hamburger span { width: 28px; height: 3px; background: var(--white); transition: all .3s ease; border-radius: 2px; }
.hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Hamburger-Farbwechsel für gescrollten Zustand */
.navbar.scrolled .hamburger span { background: var(--black); }

.overlay {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding-right: 40px;
  background: linear-gradient(135deg, var(--it), var(--web));
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.overlay.active { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.overlay ul { list-style: none; text-align: right; }
.overlay ul li { margin: 20px 0; }
.overlay ul li a {
  font-size: 2rem; font-weight: 600; color: var(--white); text-decoration: none;
  display: block; text-align: right;
  opacity: 0; transform: translateX(12px);
  animation: menuIn .4s ease forwards;
}
.overlay ul li:nth-child(1) a { animation-delay: .05s; }
.overlay ul li:nth-child(2) a { animation-delay: .12s; }
.overlay ul li:nth-child(3) a { animation-delay: .19s; }
.overlay ul li:nth-child(4) a { animation-delay: .26s; }

@keyframes menuIn { to { opacity: 1; transform: translateX(0); } }

/* Overlay Close Button */
.overlay-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  z-index: 1001;
  transition: transform 0.2s ease;
}

.overlay-close:hover {
  transform: scale(1.2);
}

/* ========= Container ========= */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ========= Sektionen allgemein ========= */
section { padding: 88px 20px; }
.section-it h2      { color: var(--it);    font-family: 'Oswald', sans-serif; }
.section-web h2     { color: var(--web);   font-family: 'Oswald', sans-serif; }
.section-kontakt h2 { color: var(--brand); font-family: 'Oswald', sans-serif; }

/* ========= Animationen ========= */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========= Responsive ========= */
@media (max-width: 1024px) { 
  .nav-links { gap: 20px; }
  .navbar-group { gap: 4rem; }
}
@media (max-width: 768px) {
  .navbar {
    padding: 0 20px;  /* Kleineres Padding auf Mobile */
  }
  .navbar-group { gap: 2rem; }
  .nav-links { 
    display: none !important; 
  }
  .hamburger { 
    display: flex; 
    position: static;
  }
  .logo img { height: 70px; }
  .hero-buttons { flex-direction: column; }
  .navbar .nav-link { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay ul li a { animation: none; opacity: 1; transform: none; }
}

/* ========= Footer ========= */
.footer {
  background: var(--it-dark);
  color: var(--white);
  padding: 60px 20px 20px 20px;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 40px auto;
}

.footer-col h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.footer-col p,
.footer-col a,
.footer-col li {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  opacity: 0.9;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col a {
  color: var(--white);
  text-decoration: none;
  transition: opacity .2s ease;
}

.footer-col a:hover {
  opacity: 0.7;
}

.footer-logo {
  max-height: 60px;
  margin-bottom: 12px;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* New Site Footer */
.site-footer {
  background: #111;
  color: #fff;
  padding: 60px 20px 20px;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand img.footer-logo {
  height: 60px;
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.4;
}

.footer-links h4,
.footer-contact h4,
.footer-col h3,
.footer-col h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: var(--brand);
}

.footer-links ul,
.footer-contact ul {
  list-style: none;
  padding: 0;
}

.footer-links ul li,
.footer-contact ul li {
  margin-bottom: 10px;
}

.footer-links a,
.footer-contact a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--brand);
}

.footer-contact i {
  margin-right: 8px;
  color: var(--brand);
}

.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.7;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .footer-col { margin-bottom: 20px; }
}

@media (max-width: 768px) {
  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Logo-Varianten per content-Switch (PNG/SVG) */
.navbar-logo.light { content: url('/assets/logo-light.png'); }
.navbar-logo.dark  { content: url('/assets/logo-dark.png'); }

/* Hamburger-Farbsteuerung über currentColor */
.hamburger svg { stroke: currentColor; }
.hamburger.light { color: #ffffff; }
.hamburger.dark  { color: #0A192F; }

/* Falls .navbar im "scrolled/solid" Zustand eine weiße Fläche hat */
.navbar.scrolled {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

/* Optional: Wenn du eine explizite 'transparent'-Klasse nutzt */
.navbar.transparent {
  background: transparent;
  box-shadow: none;
}

/* Links in der Navbar: light im Hero, dark im solid state */
.navbar:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.95); }
.navbar.scrolled .nav-links a       { color: #0A192F; }