/* K.G. Transport Consulting — Basis-Styles aus dem Design-Handoff.
   Layout-Werte stehen bewusst inline im HTML (pixelgenaue Übernahme der Design-Referenz);
   diese Datei ergänzt nur, was inline nicht geht: Hover/Focus, Burger-Menü, Responsive. */

/* Weicher Überblendeffekt beim Seitenwechsel (Browser mit View-Transition-Unterstützung) */
@view-transition { navigation: auto; }

html, body { margin: 0; padding: 0; background: #FFFFFF; }
body { font-family: 'Inter', Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #1A1A1A; }
a { color: #1C2A3A; text-decoration: none; }
a:hover { color: #8A6A3B; }
input, select, textarea { font-family: 'Inter', Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
img { max-width: 100%; }

/* ---------- Header / Navigation ---------- */
.site-header { background: #1C2A3A; position: relative; }
.site-logo { height: 130px; display: block; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #FFFFFF;
}

.site-nav { display: flex; gap: 24px; align-items: center; }
.nav-link { color: #B4B4B4; font-size: 14px; font-weight: 500; }
.nav-link:hover { color: #FFFFFF; }
.nav-link.active { color: #FFFFFF; font-weight: 600; }
.nav-link.active:hover { color: #FFFFFF; }
.nav-cta { color: #1C2A3A; background: #B4B4B4; padding: 10px 20px; border-radius: 2px; font-size: 14px; font-weight: 600; }
.nav-cta:hover { background: #FFFFFF; color: #1C2A3A; }
.nav-cta.active { background: #FFFFFF; }

/* ---------- Sprachumschalter ---------- */
.lang-switch { display: flex; align-items: center; gap: 8px; }
.lang-link { color: #B4B4B4; font-size: 13px; font-weight: 500; }
.lang-link:hover { color: #FFFFFF; }
.lang-link.active { color: #FFFFFF; font-weight: 600; }
.lang-link.active:hover { color: #FFFFFF; }
.lang-sep { color: #5B6673; font-size: 13px; }

/* ---------- Buttons und Links ---------- */
.btn-gold { background: #8A6A3B; color: #FFFFFF; border-radius: 2px; font-size: 15px; font-weight: 600; }
.btn-gold:hover { background: #9d7a45; color: #FFFFFF; }
.hero-link { color: #B4B4B4; font-size: 15px; font-weight: 500; border-bottom: 1px solid #5B6673; padding-bottom: 2px; }
.hero-link:hover { color: #FFFFFF; }
.card-link { display: block; background: #F5F6F8; padding: 36px; border-top: 3px solid #1C2A3A; }
.card-link:hover { background: #eef0f3; }
.btn-outline { border: 1px solid #1C2A3A; color: #1C2A3A; padding: 12px 24px; border-radius: 2px; font-size: 14px; font-weight: 600; }
.btn-outline:hover { background: #1C2A3A; color: #FFFFFF; }
.footer-link { color: #8b95a3; font-size: 14px; }
.footer-link:hover { color: #FFFFFF; }

/* ---------- Bilder ---------- */
.media-img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
.media-placeholder {
  width: 100%; height: 100%;
  background: #F5F6F8;
  border: 1px dashed #DDE1E6;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: #5B6673; font-size: 14px;
}

/* ---------- Formular ---------- */
.form-input {
  border: 1px solid #DDE1E6; padding: 12px 14px; font-size: 15px;
  color: #1A1A1A; border-radius: 2px; outline: none;
}
.form-input:focus { border: 1px solid #1C2A3A; }
select.form-input { background: #FFFFFF; }
textarea.form-input { resize: vertical; line-height: 1.5; }
.btn-submit {
  background: #1C2A3A; color: #FFFFFF; border: none; padding: 14px 32px;
  font-size: 15px; font-weight: 600; border-radius: 2px; cursor: pointer; font-family: inherit;
}
.btn-submit:hover { background: #26374B; }
.form-message { background: #F5F6F8; border-left: 3px solid #8A6A3B; padding: 16px 20px; color: #1C2A3A; font-size: 15px; line-height: 1.5; }

/* ---------- Responsive (Desktop-Layout bleibt unverändert) ---------- */
@media (max-width: 880px) {
  .site-logo { height: 72px; }

  .nav-toggle { display: flex; }
  /* Menü klappt direkt unter der Logo-Zeile auf und schiebt den Inhalt nach unten */
  .site-header > div:first-child { flex-wrap: wrap; }
  .site-nav {
    display: none;
    width: 100%;
    order: 10;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    border-top: 1px solid #26374B;
    margin-top: 4px;
    padding-top: 6px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 13px 4px; }
  .site-nav .lang-switch { padding: 13px 4px; }
  .site-nav .lang-switch a { padding: 0; }

  /* Abstand zwischen Logo-Zeile und Hero-Inhalt halbieren (Padding steht inline im HTML) */
  .site-header > div:nth-child(2) { padding-top: 32px !important; }
  .nav-cta, .nav-cta.active { background: none; color: #B4B4B4; border-radius: 0; }
  .nav-cta:hover { background: none; color: #FFFFFF; }
  .nav-cta.active { color: #FFFFFF; font-weight: 600; }

  /* Mehrspaltige Grids stapeln */
  .stack-mobile { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Zweispaltige Listen: beim Stapeln bekommt die zweite Spalte eine Trennlinie,
     damit die Blöcke nicht ineinanderfließen */
  .stack-mobile[style*="gap:0 64px"] > div + div { border-top: 1px solid #DDE1E6; padding-top: 8px; }

  /* Footer-Linkspalten umbrechen lassen */
  .footer-cols { flex-wrap: wrap; gap: 32px !important; }

  /* Bildboxen mit fester Höhe auf Mobile kompakter */
  .media-box { height: 280px !important; }
}

/* ---------- Smartphones ---------- */
@media (max-width: 600px) {
  /* Seitenränder der Inhaltscontainer verkleinern (Layout-Padding steht inline im HTML) */
  [style*="max-width:1120px"],
  [style*="max-width:800px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Typografie kompakter, inline gesetzte Größen überschreiben */
  h1 { font-size: 32px !important; }
  h2 { font-size: 23px !important; }
  h3 { font-size: 20px !important; }

  /* Karten und dunkle Infoboxen mit weniger Innenabstand */
  .card-link { padding: 24px !important; }

  /* Listenzeilen luftiger: mehr Abstand zwischen den Textblöcken (Padding steht inline im HTML) */
  [style*="padding:18px 0"] { padding: 24px 0 !important; }
  [style*="padding:16px 0"] { padding: 24px 0 !important; }

  /* Gestapelte Blöcke deutlicher voneinander trennen */
  .stack-mobile { gap: 36px !important; }

  /* Absätze auf kleinen Screens mit etwas mehr Zeilenabstand */
  p { line-height: 1.7 !important; }

  /* Buttons in Heldenbereich und CTAs dürfen umbrechen */
  .btn-gold { white-space: normal !important; text-align: center; }
}