/* ==============================
   Möbelbau – Projektabschnitt (bereinigt)
   ============================== */

/* Globale Variablen */
:root{
  --gap: 28px;           /* Abstand zwischen Kacheln */
  --radius: 16px;        /* Bild-Ecken */
  --ratio: 16/9;         /* einheitliches Seitenverhältnis */
  --txt: #1b1b1b;
  --muted: #6b6f76;
  --title: #cfcfcf;
}

/* Section: seitlicher Puffer; Inhalt zentriert, max 1400 */
.mb-projekt{ padding: clamp(24px, 3vw, 48px) 20px; }
.mb-wrap{
  max-width: 1400px;
  margin: 0 auto;

  /* Kachelbreite = (Wrapbreite - 2 Gaps) / 3 */
  --tile: calc((100% - 2 * var(--gap)) / 3);
}

/* Bilder sauber füllen */
.mb-projekt img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius: var(--radius);
}

/* Alte/konfliktträchtige Breiten sicher neutralisieren */
.mb-head-media,
.mb-mid-media,
.mb-g-item{
  width: auto !important;
  max-width: none !important;
}

/* ========== HEAD (Bild links = 1 Kachel, Text rechts) ========== */
.mb-head{
  display:grid;
  grid-template-columns: var(--tile) 1fr;
  gap: var(--gap);
  align-items:center;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.mb-head-media{ margin:0; aspect-ratio: var(--ratio); }
.mb-head-text{ display:flex; flex-direction:column; gap:8px; max-width: calc(var(--tile) * 2); }

.mb-title{
  margin: 0 0 6px 0;
  font-weight: 800;
  line-height: .95;
  color: var(--title);
  /* 0.60 * Tile ist ein guter Startwert; min/max begrenzen */
  font-size: clamp(75px, calc(var(--tile) * 0.65), 96px);
  white-space: nowrap; /* bleibt einzeilig, bis es eng wird */
}
.mb-meta{ margin:0; color: var(--muted); font-size: clamp(13px, calc(var(--tile) * 0.035), 18px); }
.mb-meta strong{ color: var(--txt); }

/* ========== MIDDLE (Bild links = 1 Kachel, Text rechts) ========== */
.mb-middle{
  display:grid;
  grid-template-columns: var(--tile) 1fr;
  gap: var(--gap);
  align-items:center;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.mb-mid-media{ margin:0; aspect-ratio: var(--ratio); }
.mb-mid-text { max-width: calc(var(--tile) * 2); font-size: clamp(15px, calc(var(--tile) * 0.044), 19px); line-height: 1.55; }
.mb-mid-text p{ margin: 0 0 12px; }

/* ========== GALLERY (3 große Kacheln) ========== */
.mb-gallery{
  display:grid;
  grid-template-columns: repeat(3, var(--tile));
  gap: var(--gap);
  justify-content: start;    /* linksbündig – bündig mit Head/Middle */
}
.mb-g-item{ margin:0; aspect-ratio: var(--ratio); }

}

@media (max-width: 680px){
  :root{ --gap: 20px; } /* etwas dichter */
}

/* am ENDE deiner CSS einfügen */

/* =========================
   HEAD: rechte Spalte strecken + Textgrößen
   ========================= */

/* 2-Spalten-Layout: linke Kachel + volle rechte Spalte */
section.mb-projekt .mb-head{
  grid-template-columns: var(--tile) minmax(0, 1fr);
  align-items: stretch;                  /* rechte Spalte darf strecken */
}

/* Bild links bleibt oben, Text rechts füllt die Spalte */
section.mb-projekt .mb-head-media{
  align-self: center;
}

section.mb-projekt .mb-head-text{
  display: flex;
  flex-direction: column;
  justify-content: center;               /* vertikal mittig innerhalb der Spalte */
  min-height: 100%;                      /* streckt bis zur Spaltenhöhe */
}

/* Überschrift groß & skalierend (mit hoher Spezifität) */
section.mb-projekt .mb-head-text h3.mb-title{
  margin: 0 0 .6rem 0;
  font-weight: 800;
  line-height: .95;
  color: var(--title);
  /* skaliert mit Viewport, deckelt nach oben; !important falls das Template h2 „überstimmt“ */
  font-size: clamp(40px, 6.3vw, 100px) !important;
  white-space: nowrap;                   /* bleibt einzeilig bis es eng wird */
}

/* Meta-Zeilen unter dem Titel */
section.mb-projekt .mb-head-text .mb-meta{
  margin: 0 0 .4rem 0;
  color: var(--mb-muted);
  font-size: clamp(16px, 1.55vw, 20px) !important;
}
section.mb-projekt .mb-head-text .mb-meta strong{
  color: var(--mb-text);
}

/* =========================
   Middle-Text gut lesbar und sauber begrenzt
   ========================= */
section.mb-projekt .mb-middle{
  grid-template-columns: var(--tile) minmax(0, 1fr);
  align-items: center;
}
section.mb-projekt .mb-mid-text{
  max-width: 64ch;                       /* angenehme Zeilenlänge */
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.55;
}
section.mb-projekt .mb-mid-text p{ margin: 0 0 .75rem; }

/* ========= Möbelbau – Headline/Text richtig strecken & skalieren ========= */

/* Der Grid-Container soll die volle Wrap-Breite nutzen */
.mb-projekt .mb-head{
  width: 100%;
  display: grid;
  grid-template-columns: var(--tile) minmax(0, 1fr); /* rechte Spalte darf bis 100% */
  gap: var(--mb-gap, 28px);
  align-items: center;
  justify-content: start;
}

/* Linke Kachel (Bild) bleibt exakt 1 "Tile" breit */
.mb-projekt .mb-head-media{
  margin: 0;
  inline-size: var(--tile);
  aspect-ratio: var(--mb-ar, 16/9);
}

/* WICHTIG: rechte Spalte wirklich strecken dürfen */
.mb-projekt .mb-head-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;          /* verhindert, dass Grid das Item schmal hält */
  max-width: none;
}

/* Headline deutlich größer und an Tile-Breite gekoppelt */
.mb-projekt .mb-title{
  margin: 0 0 8px 0;
  font-weight: 800;
  line-height: .92;
  color: var(--title, #cfcfcf);

  /* skaliert proportional zur Kachelbreite, aber mit angenehmen Grenzen */
  font-size: clamp(48px, calc(var(--tile) * 1.05), 180px);
  white-space: nowrap;   /* eine Zeile auf großen Screens */
}

/* Meta/Text etwas größer mit sauberer Skalierung */
.mb-projekt .mb-meta{
  margin: 0;
  color: var(--mb-muted, #6b6f76);
  font-size: clamp(15px, calc(var(--tile) / 14), 22px);
}
.mb-projekt .mb-mid-text{
  font-size: clamp(16px, calc(var(--tile) / 14), 22px);
  line-height: 1.55;
}

/* Galerie sicher linksbündig und streckend (3 Spalten) */
.mb-projekt .mb-gallery{
  display: grid;
  grid-template-columns: repeat(3, var(--tile));
  gap: var(--mb-gap, 28px);
  justify-content: start;
}
.mb-projekt .mb-g-item{
  margin: 0;
  inline-size: var(--tile);
  aspect-ratio: var(--mb-ar, 16/9);
}

/* =========================
   Mobile/Tablet <= 1100px
   ========================= */
@media (max-width: 1260px){

  /* gleiche Variable wie im Desktop-Layout verwenden */
  .mb-wrap{ --gap: 20px; }

  /* 1 Spalte erzwingen – gleiche Spezifität wie oben */
  .mb-projekt .mb-head,
  .mb-projekt .mb-middle{
    grid-template-columns: 1fr !important;
    gap: var(--gap);
    justify-content: stretch;
  }

  /* Reihenfolge: Bild zuerst, Text danach */
  .mb-projekt .mb-head-media,
  .mb-projekt .mb-mid-media{
    order: 0;
    width: 100% !important;      /* schlägt das frühere width:auto !important */
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: var(--ratio, 16/9);
  }
  .mb-projekt .mb-head-text,
  .mb-projekt .mb-mid-text{
    order: 1;
    width: 100%;
    min-width: 0;
  }

  /* Titel darf umbrechen und skaliert passend */
  .mb-projekt .mb-title{
    white-space: normal;
    font-size: clamp(34px, 8.5vw, 64px);
    line-height: 1.02;
  }

  /* Galerie: drei Bilder untereinander (100% Breite) */
  .mb-projekt .mb-gallery{
    grid-template-columns: 1fr !important;
    gap: var(--gap);
    justify-content: stretch;
  }
  .mb-projekt .mb-g-item{
    width: 100% !important;
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: var(--ratio, 16/9);
  }
}

@media (max-width: 1260px){

  /* 1 Spalte, mittig, keine Überraschungen */
  .mb-projekt .mb-gallery{
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* Spur darf schrumpfen */
    gap: var(--gap, 20px);
    justify-content: center;   /* Spur mittig im Container */
    justify-items: center;     /* Items in der Spur mittig */
    overflow: hidden;          /* aus Vorsicht – keine „Fransen“ */
    box-sizing: border-box;
  }

  /* Kachel: füllt Spur, optional sanfte Obergrenze damit’s nicht zu wuchtig wird */
  .mb-projekt .mb-g-item{
    display: block;
    width: 100% !important;
    max-width: min(100%, 720px); /* <— wenn dir die Bilder zu groß sind: diesen Wert anpassen/entfernen */
    margin: 0;
    aspect-ratio: var(--ratio, 16/9);
    box-sizing: border-box;
  }

  /* Bild in der Kachel: wirklich 100%, keine Ränder, keine Scrolls */
  .mb-projekt .mb-g-item > img{
    display: block;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    block-size: auto;
    height: auto;
    aspect-ratio: var(--ratio, 16/9);
    object-fit: cover;
    border-radius: var(--radius, 16px);
  }
}

.dark-akkordeon .wrap-accordion-title {
	color:#ffffff !important;
}