/* ============================================================
   CLEAR-4  ·  L3 — LAYOUT
   Koordinaten-Zonen, Page-Struktur, Sektions-Raster.

   Koordinaten-System:
     z1  Header / Nav
     z2  Hero
     z3  Trust / Stats
     z4  Services / Cards
     z5  Testimonials
     z6  CTA
     z7  Footer

   Regel: Kein Wert ausser 0, 1, 100%, none, inherit.
          Keine Farben, keine Typo → L1.
          Keine Element-Styles → L2.
          Rand kompensiert Über-/Unterstand der Elemente.
   ============================================================ */

/* ── Page Container ─────────────────────────────────────────*/
.page {
  width:     100%;
  overflow-x: hidden;
}

.container {
  width:     100%;
  max-width: var(--page-max);
  margin:    0 auto;
  padding:   0 var(--page-pad);
}

/* ── Section Basis ──────────────────────────────────────────
   Jede Zone erbt von .section.
   Padding-top/-bottom kompensiert Über-/Unterstand
   der darin lebenden Elemente (Cards, Buttons etc.).
─────────────────────────────────────────────────────────────*/
.section {
  padding-top:    var(--s64);
  padding-bottom: var(--s64);
}
.section-sm { padding-top: var(--s48); padding-bottom: var(--s48); }
.section-lg { padding-top: var(--s96); padding-bottom: var(--s96); }

.section-alt   { background: var(--bg-alt); }
.section-brand { background: var(--brand); color: #fff; }
.section-dark  { background: #0f0f0f; color: var(--text); }
.section-surface { background: var(--surface); }

/* ── Section Header (Label + Title + Lead) ──────────────────*/
.section-header {
  margin-bottom: var(--s48);
}
.section-header .label {
  display:       block;
  margin-bottom: var(--s8);
}
.section-header h2 {
  margin-bottom: var(--s16);
}
.section-header .lead {
  max-width: var(--measure);
}
.section-header.center {
  text-align: center;
}
.section-header.center .lead {
  margin: 0 auto;
}

/* ── z1 · Header / Nav ──────────────────────────────────────*/
[data-z="z1"] {
  position:   sticky;
  top:        0;
  z-index:    100;
  height:     var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display:    flex;
  align-items: center;
}
[data-z="z1"] .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--s24);
}
.nav-logo {
  font-family:    var(--font-display);
  font-size:      var(--fs-lg);
  font-weight:    700;
  letter-spacing: var(--tracking-tight);
  color:          var(--text);
  flex-shrink:    0;
}
.nav-links {
  display:     flex;
  align-items: center;
  gap:         var(--s32);
  list-style:  none;
}
.nav-links a {
  font-size:  var(--fs-sm);
  font-weight: 500;
  color:      var(--text-soft);
  transition: color var(--duration-fast);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--brand); }

.nav-cta { margin-left: var(--s16); }

/* Mobile Nav */
.nav-toggle {
  display:         none;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         var(--s8);
  color:           var(--text);
}
@media (max-width: 768px) {
  .nav-links  { display: none; }
  .nav-cta    { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display:    flex;
    flex-direction: column;
    position:   absolute;
    top:        var(--header-h);
    left:       0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding:    var(--s24) var(--page-pad);
    gap:        var(--s16);
    z-index:    99;
  }
  .nav-links.open + .nav-cta { display: none; }
}

/* ── z2 · Hero ──────────────────────────────────────────────*/
[data-z="z2"] {
  padding-top:    var(--s96);
  padding-bottom: var(--s96);
}
.hero-grid {
  display:     grid;
  grid-template-columns: 8fr 5fr;
  gap:         var(--s64);
  align-items: center;
}
.hero-content {}
.hero-content h1 { margin-bottom: var(--s24); }
.hero-content p  { margin-bottom: var(--s32); }
.hero-actions    { display: flex; gap: var(--s16); flex-wrap: wrap; }

.hero-visual {
  border-radius: var(--r-xl);
  overflow:      hidden;
  aspect-ratio:  4/3;
  background:    var(--bg-alt);
}
.hero-visual img {
  width:  100%;
  height: 100%;
  object-fit: cover;
}

/* Hero Card Variant (kein Bild — grüne Karte) */
.hero-card {
  background:    var(--brand);
  border-radius: var(--r-xl);
  padding:       var(--s48);
  display:       flex;
  align-items:   center;
  justify-content: center;
  aspect-ratio:  4/3;
}
.hero-card-text {
  font-family:    var(--font-display);
  font-size:      var(--fs-2xl);
  font-weight:    700;
  color:          #fff;
  text-align:     center;
  line-height:    var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  transform:      rotate(-4deg);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual, .hero-card { aspect-ratio: 16/7; }
}
@media (max-width: 600px) {
  [data-z="z2"] { padding-top: var(--s64); padding-bottom: var(--s64); }
  .hero-card-text { font-size: var(--fs-xl); }
}

/* ── z3 · Trust / Stats ─────────────────────────────────────*/
[data-z="z3"] { background: var(--bg-alt); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s32);
  text-align: center;
}
.stat-value {
  font-family:    var(--font-display);
  font-size:      var(--fs-2xl);
  font-weight:    700;
  color:          var(--brand);
  letter-spacing: var(--tracking-tight);
  margin-bottom:  var(--s8);
}
.stat-label {
  font-size:  var(--fs-sm);
  color:      var(--text-muted);
  font-weight: 500;
}

@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--s24); } }

/* ── z4 · Services / Cards Grid ────────────────────────────*/
.cards-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24);
}
.cards-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s24);
}

@media (max-width: 900px) { .cards-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards-grid-3, .cards-grid-2 { grid-template-columns: 1fr; } }

/* ── z5 · Testimonials ──────────────────────────────────────*/
[data-z="z5"] { background: var(--bg-alt); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s24);
}
.testimonial-stars {
  color:         var(--brand);
  font-size:     var(--fs-base);
  margin-bottom: var(--s16);
  letter-spacing: var(--s4);
}
.testimonial-body {
  font-size:     var(--fs-base);
  line-height:   var(--lh-relaxed);
  color:         var(--text-soft);
  margin-bottom: var(--s24);
  font-style:    italic;
}
.testimonial-author {
  display:     flex;
  align-items: center;
  gap:         var(--s16);
}
.testimonial-avatar {
  width:         40px;
  height:        40px;
  border-radius: var(--r-pill);
  background:    var(--brand-soft);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     var(--fs-sm);
  color:         var(--brand);
  flex-shrink:   0;
}
.testimonial-name    { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.testimonial-role    { font-size: var(--fs-xs); color: var(--text-muted); }

@media (max-width: 900px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ── z6 · CTA ───────────────────────────────────────────────*/
[data-z="z6"] {
  background: var(--brand);
  text-align: center;
}
[data-z="z6"] h2     { color: #fff; margin-bottom: var(--s16); }
[data-z="z6"] p      { color: rgba(255,255,255,.85); margin: 0 auto var(--s32); }
[data-z="z6"] .btn-primary {
  background: #fff;
  color:      var(--brand);
}
[data-z="z6"] .btn-primary:hover {
  background: rgba(255,255,255,.92);
}
[data-z="z6"] .btn-secondary {
  border-color: rgba(255,255,255,.4);
  color:        #fff;
}
[data-z="z6"] .btn-secondary:hover {
  background:   rgba(255,255,255,.12);
  border-color: #fff;
  color:        #fff;
}
.cta-actions { display: flex; gap: var(--s16); justify-content: center; flex-wrap: wrap; }

/* ── z7 · Footer ────────────────────────────────────────────*/
[data-z="z7"] {
  background:    #0f0f0f;
  color:         rgba(255,255,255,.55);
  padding-top:   var(--s64);
  padding-bottom: var(--s48);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s48);
  margin-bottom: var(--s48);
}
.footer-brand {
  font-family:    var(--font-display);
  font-size:      var(--fs-lg);
  font-weight:    700;
  color:          #fff;
  margin-bottom:  var(--s16);
}
.footer-tagline { font-size: var(--fs-sm); max-width: 28ch; line-height: var(--lh-relaxed); }
.footer-heading {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  margin-bottom:  var(--s16);
}
.footer-links    { list-style: none; display: flex; flex-direction: column; gap: var(--s8); }
.footer-links a  { font-size: var(--fs-sm); color: rgba(255,255,255,.55); transition: color var(--duration-fast); }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  padding-top:  var(--s32);
  border-top:   1px solid rgba(255,255,255,.10);
  display:      flex;
  justify-content: space-between;
  align-items:  center;
  flex-wrap:    wrap;
  gap:          var(--s16);
  font-size:    var(--fs-xs);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Sticky Mobile CTA ──────────────────────────────────────*/
.sticky-cta {
  display:         none;
  position:        fixed;
  bottom:          0; left: 0; right: 0;
  z-index:         200;
  background:      var(--surface);
  border-top:      1px solid var(--border);
  padding:         var(--s16) var(--page-pad);
  gap:             var(--s8);
  align-items:     center;
  box-shadow:      var(--sh-deep);
  transform:       translateY(100%);
  transition:      transform var(--duration-normal) var(--ease-out);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .btn    { flex: 1; }
.sticky-cta-close   {
  background:    none;
  border:        none;
  cursor:        pointer;
  color:         var(--text-muted);
  padding:       var(--s8);
  font-size:     var(--fs-lg);
  line-height:   1;
}

@media (max-width: 768px) { .sticky-cta { display: flex; } }

/* ── Form Layout (Kontakt) ──────────────────────────────────*/
.form-stack { display: flex; flex-direction: column; gap: var(--s24); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s16); }
@media (max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } }