/* ==========================================================================
   1. DER MULTI-FRAKTIONALE GRID-CONTAINER (Desktop & Tablet)
   ========================================================================== */
#top .av-layout-grid-container {
  display: grid !important;
  gap: 0;
  align-items: stretch;  /* === or : start === */
  
  /* Das 60-Spalten-Raster fängt alle Brüche (auch 1/5) perfekt auf */
  grid-template-columns: repeat(60, minmax(0, 1fr));
}


/* ==========================================================================
   2. REIN RESPONSIVES VERHALTEN (Mobil-Fallback & Reset)
   ========================================================================== */

/* Responsiv nimmt JEDE Zelle die vollen 60 Spalten ein (bricht untereinander) */
#top .av-layout-grid-container .flex_cell {
  grid-column: span 60;
  position: relative;
  width: unset !important;  
  max-width: 100% !important;
}


/* ==========================================================================
   3. DIE BRUCH-MATHEMATIK (Mit perfekt abgestimmter Spezifität)
   ========================================================================== */

/* --- BLOCK A: STANDARD-UMBRUCH AB 768px --- */
@media only screen and (min-width: 768px) {
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell { order: unset; }
  /* Container, die NICHT erst bei Tablet brechen sollen */
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_one_full    { grid-column: span 60; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_one_half    { grid-column: span 30; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_one_third   { grid-column: span 20; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_two_third   { grid-column: span 40; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_one_fourth  { grid-column: span 15; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_three_fourth{ grid-column: span 45; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_one_fifth   { grid-column: span 12; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_two_fifth   { grid-column: span 24; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_three_fifth { grid-column: span 36; }
  #top .av-layout-grid-container:not(.av-break-at-tablet) .flex_cell.av_four_fifth  { grid-column: span 48; }
}

/* --- BLOCK B: SPÄTERER UMBRUCH AB 990px --- */
@media only screen and (min-width: 990px) {
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell { order: unset; }
  /* Erst ab hier schalten wir das Raster für die "av-break-at-tablet"-Klassen frei */
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_one_full    { grid-column: span 60; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_one_half    { grid-column: span 30; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_one_third   { grid-column: span 20; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_two_third   { grid-column: span 40; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_one_fourth  { grid-column: span 15; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_three_fourth{ grid-column: span 45; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_one_fifth   { grid-column: span 12; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_two_fifth   { grid-column: span 24; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_three_fifth { grid-column: span 36; }
  #top .av-layout-grid-container.av-break-at-tablet .flex_cell.av_four_fifth  { grid-column: span 48; }
}

/* ==========================================================================
   4. INLINE-SIZE CONTAINER QUERIES & ZELLEN-ZÄHMUNG
   ========================================================================== */
.responsive #top #wrap_all #main .flex_cell {
  container: flexible-zelle / inline-size; 
  padding: unset !important; /* Löscht Enfolds starre 30px */
}


/* Quadratische Zellen erzwingen */
#top .av-layout-grid-container .flex_cell.quadrat-zelle {
  aspect-ratio: 1 / 1;
}

/* Das hochelastische Innen-Padding via Container-Units (cqi) */
.responsive #top #wrap_all .flex_cell .flex_cell_inner {
  padding: 2rem 8cqi !important; 
  box-sizing: border-box; 
}

/* Typografie-Optimierung im Inneren */
.responsive #top #wrap_all .flex_cell .flex_cell_inner .avia_textblock {
  max-width: 75ch;
  line-height: 2cap;
  font-size: clamp(18px, 4cqi, 28px);
}

/* ==========================================================================
   5. KOMPONENTEN-STYLES (Abhängig von der individuellen Kachelbreite)
   ========================================================================== */
@container flexible-zelle (width < 500px) {
  #top #wrap_all .quadrat-zelle h2 {
    color: red !important;
    transition: color 1s ease;
  }
}