/* ===================================================================
   Tiliaderm — Responsive Layer
   Eigene Ergänzung (NICHT Teil des Design-Handoffs). Lädt nach
   marketing.css und überschreibt nur Layout-Grids/Abstände für kleinere
   Viewports. Das Desktop-Rendering (≥ 1025px) bleibt pixelgleich zum Handoff.
   =================================================================== */

/* Burger nur auf kleinen Viewports sichtbar */
.t-burger { display: none; }

/* ---- Sprachumschalter (Weglot) in der Nav ---- */
.nav .t-lang { display: inline-flex; align-items: center; }
.nav .t-lang:empty { display: none; }
/* CTA-Links + Sprach-Slot im Burger-Menü nur mobil sichtbar */
.nav-links .t-nav-cta-mobile { display: none; }
.nav .t-lang-mobile { display: none; }
.nav .t-lang aside.country-selector {
  position: relative !important; right: auto !important; bottom: auto !important; left: auto !important; top: auto !important;
  margin: 0 !important; box-shadow: none !important; z-index: auto !important;
  font-family: var(--font-sans) !important;
}
.nav .t-lang .wgcurrent,
.nav .t-lang .wg-default .wgcurrent {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  color: var(--fg-1) !important;
  box-shadow: none !important;
}
.nav .t-lang .wgcurrent:hover { border-color: var(--tilia-700) !important; background: var(--bg-brand-soft) !important; }
.nav .t-lang .wglanguage-name { color: var(--fg-1) !important; font-weight: 500; }
/* Dreieck/Chevron vertikal zentrieren — Weglot-Default top:17px sitzt zu hoch (Rotation im transform bleibt unangetastet) */
.nav .t-lang .wgcurrent::after { top: 50% !important; margin-top: -3px !important; }
.nav .t-lang aside.country-selector ul {
  position: absolute !important; top: calc(100% + 4px) !important;
  right: 0 !important; left: auto !important;
  width: max-content !important; min-width: 160px !important; max-width: 240px !important;
  box-sizing: border-box !important; padding: 6px !important; z-index: 200 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--paper-pure) !important;
  margin-top: 0 !important;
}
.nav .t-lang aside.country-selector ul li {
  width: 100% !important; float: none !important; margin: 0 !important; white-space: nowrap;
}
.nav .t-lang aside.country-selector ul a,
.nav .t-lang aside.country-selector ul .wglanguage-name { color: var(--fg-1) !important; }
.nav .t-lang aside.country-selector ul li:hover { background: var(--bg-brand-soft) !important; }

/* ---------- Tablet (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .nav-inner,
  .hero-grid,
  .section-head,
  .pillars,
  .curriculum,
  .testimonials,
  .faculty,
  .footer-inner { padding-left: 24px; padding-right: 24px; }

  .hero-grid { gap: 48px; }
  .section-head { gap: 40px; }
  .pillars { gap: 32px; }
  .curriculum { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .faculty { gap: 48px; }
  .cta-band { padding: 64px 40px; }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  /* Nav: Burger-Menü statt Desktop-Links */
  .nav-inner { gap: 10px; padding: 12px 16px; }
  .nav-cta { margin-left: auto; gap: 8px; }
  /* CTA-Buttons + Sprachumschalter wandern ins Burger-Menü; oben bleibt nur Wordmark + Burger */
  .nav-cta .btn { display: none; }
  .nav-cta .t-lang { display: none; }
  .nav-links .t-nav-cta-mobile { display: block; }
  .nav-links .t-lang-mobile { display: flex; padding: 13px 2px; border-top: 1px solid var(--border); }
  .nav-links .t-lang-mobile aside.country-selector { position: static !important; }
  .wordmark { font-size: 20px; }
  .nav-cta .btn-ghost { display: none; }

  .t-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 4px; width: 42px; height: 38px; padding: 9px 8px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: transparent; cursor: pointer;
  }
  .t-burger span { display: block; height: 2px; width: 100%; background: var(--tilia-800); }

  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin-left: 0;
    background: rgba(250, 249, 244, 0.98);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border); padding: 4px 20px 16px;
  }
  .t-nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 13px 2px; border-top: 1px solid var(--border); font-size: 16px; }

  /* Section-Abstände reduzieren */
  section.block { padding: 56px 0; }
  .section-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }

  /* Hero: einspaltig, Art-Panel unter den Text */
  .hero { padding: 40px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-art { aspect-ratio: 16 / 10; }
  .hero-lead { max-width: none; }
  .hero-meta { gap: 0 32px; }

  /* Karten-Raster gestapelt */
  .pillars { grid-template-columns: 1fr; gap: 36px; }
  .curriculum { grid-template-columns: 1fr; }
  .testimonials { grid-template-columns: 1fr; }
  .module { min-height: 0; padding: 28px 24px; }

  /* Faculty: gestapelt, Art-Panel zuerst */
  .faculty { grid-template-columns: 1fr; gap: 32px; }
  .faculty-art { order: -1; }

  /* CTA-Band gestapelt */
  .cta-band { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px; }
  .cta-band .cta-actions { flex-direction: row; flex-wrap: wrap; }

  /* Footer gestapelt */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }

  /* NiSV-Band (Handoff nutzt Inline-Grid auto 1fr auto) → einspaltig stapeln */
  section[style*="tilia-900"] > div[style*="auto 1fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ---------- Klein (≤ 480px) ---------- */
@media (max-width: 480px) {
  .nav-inner,
  .hero-grid,
  .section-head,
  .pillars,
  .curriculum,
  .testimonials,
  .faculty,
  .footer-inner { padding-left: 16px; padding-right: 16px; }

  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
}
