/* ==========================================
   LAYOUT.CSS
   Structural Layout & Responsive Grid System
   ========================================== */

/* ==========================================
   GLOBAL PAGE OFFSET
   (Accounts for fixed / sticky navigation)
   ========================================== */

:root {
  --nav-height: 72px; /* must match actual header height */
}

main {
  padding-top: var(--nav-height);
}

/* ==========================================
   CONTAINER SYSTEM
   ========================================== */

/* Standard Content Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-xl);
}

/* Breiter Container (z. B. Hero, Grids) */
.container--wide {
  max-width: 1400px;
}

/* Schmaler Container (Text-lastige Inhalte) */
.container--narrow {
  max-width: 720px;
}

/* Full Width Sections */
.container--full {
  max-width: none;
  padding-inline: var(--space-xl);
}

/* Mobile Anpassung */
@media (max-width: var(--bp-md)) {
  .container,
  .container--wide,
  .container--narrow,
  .container--full {
    padding-inline: var(--space-md);
  }
}

/* ==========================================
   SECTION SPACING
   (Abstand zwischen Sections – Makro-Layout)
   ========================================== */

.section {
  padding-block: var(--space-4xl);
}

/* Weniger Luft, z. B. bei dichten Inhaltsfolgen */
.section--tight {
  padding-block: var(--space-2xl);
}

/* Mehr Luft, z. B. Hero, Übergänge, CTA-Zonen */
.section--loose {
  padding-block: var(--space-5xl);
}

/* Responsive Anpassung – Rhythmus erhalten */
@media (max-width: var(--bp-md)) {
  .section {
    padding-block: var(--space-3xl);
  }

  .section--tight {
    padding-block: var(--space-xl);
  }

  .section--loose {
    padding-block: var(--space-4xl);
  }
}

/* ==========================================
   SECTION CONTENT FLOW
   (Abstand innerhalb einer Section)
   Header → Content → Grid → CTA
   ========================================== */

.section-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.section-content--tight {
  gap: var(--space-xl);
}

.section-content--loose {
  gap: var(--space-3xl);
}

.section-content > * {
  margin: 0; /* verhindert zufällige Abstände */
}

/* ==========================================
   GENERIC STACK & FLOW HELPERS
   (nicht sectionspezifisch)
   ========================================== */

/* Vertical Stack */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.stack--tight {
  gap: var(--space-sm);
}

.stack--loose {
  gap: var(--space-xl);
}

/* Horizontal Flow */
.flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* ==========================================
   GRID SYSTEM (predictable & responsive)
   Nutzung:
   <div class="grid grid--1|2|3|4">
   ========================================== */

.grid {
  display: grid;
  gap: var(--space-xl);
}

/* NEU: explizites Content-Grid */
.grid--content {
  grid-auto-rows: auto;
  align-items: stretch;
}

/*
Grid-Prinzip:
- grid--X = initiale Spaltenzahl (Desktop)
- Spalten schrumpfen zuerst (minmax)
- Tablet: max. 2 Spalten
- Mobile: immer 1 Spalte
- KEIN auto-fit / KEIN implizites Verhalten
*/

.grid--1 {
  grid-template-columns: 1fr;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid--equal {
  grid-auto-rows: 1fr;
}

@media (max-width: 1024px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   HERO / SPLIT LAYOUTS (STRUKTUR NUR!)
   ========================================== */

.layout-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.layout-split--asymmetric {
  grid-template-columns: 380px 1fr;
}

@media (max-width: 1024px) {
  .layout-split,
  .layout-split--asymmetric {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   ALIGNMENT HELPERS
   ========================================== */

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

/* Flex Alignment */
.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

/* ==========================================
   STICKY & POSITION HELPERS
   ========================================== */

.sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* ==========================================
   RESPONSIVE VISIBILITY
   ========================================== */

.hide-mobile {
  display: block;
}

.show-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }
}

/* ==========================================
   CTA Group
   (CTA stacks are layout concerns; button styling stays in components.css)
   ========================================== */

/* CTA Stack – Desktop behaviour */
.stack--cta {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.stack--center {
  justify-content: center;
}

/* ==========================================
   CTA STACK – Mobile behaviour
   - vertical
   - equal width
   - does not overflow other components
   ========================================== */

@media (max-width: 768px) {
  .stack--cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    gap: var(--space-md);
  }

  .stack--cta .button {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   SECTION FLOW
   Mehrere Inhaltsblöcke innerhalb einer Section
   ========================================== */

.section-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
}

/* Varianten */
.section-flow--tight {
  gap: var(--space-xl);
}

.section-flow--loose {
  gap: var(--space-4xl);
}

/* Sicherheitsnetz */
.section-flow > * {
  margin: 0;
}

/* ==========================================
   SERVICE DETAIL SECTIONS
   Vollwertige Sections mit eigenem Rhythmus
   ========================================== */

.service-detail {
  padding-block: var(--space-4xl);
}

/* Variante für dichtere Services (optional) */
.service-detail--tight {
  padding-block: var(--space-3xl);
}

/* Mobile Feintuning */
@media (max-width: var(--bp-md)) {
  .service-detail {
    padding-block: var(--space-3xl);
  }
}

/* ==========================================
   METHOD TAG LIST
   ========================================== */

.method-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ==========================================
   KORREKTUREN FÜR DIE LISTING PAGES MOBILE
   ========================================== */

@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
}


/* === FIX: Grid items dürfen nicht über Spalten hinauswachsen === */
.grid > * {
  min-width: 0;
}




html,
body {
  overflow: visible !important;
}

/* ==========================================
   RESULTS LAYOUT (Projects)
   ========================================== */

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.results-count {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.results-count strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.loading-message {
  grid-column: 1 / -1;            /* über alle Grid-Spalten */
  padding: var(--space-xl) 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
}

.results-header {
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .results-header {
    flex-direction: column;
    align-items: flex-start;
  }
}