/* ════ Startseite unter der Bühne ════════════════════════════════════════
   Vision mit Struktur-Baum, fünf Firmenkarten, Zusammenspiel, Werte, Abschluss, Footer.
   Aufbau wie zuvor, Material aus der Bühne (buehne/buehne.css): Schwarz, ein petrolgrünes
   Licht, Szenenbilder, Lichtlinien.
   Regeln: Bildflächen und Tafeln sind scharf (2 px), Bedienelemente weich (8 px wie die
   Buttons der Bühne), „coming soon“ ist immer eine gestrichelte Kapsel, Linien sind
   Lichtlinien (in der Mitte hell, zu den Rändern auslaufend).
   Gilt nur für index.html; alles Gemeinsame (Farben, Bausteine, Seitenkopf, Footer) steht in szene.css. */

/* Farben, Bausteine (sz-*), Abschluss-Szene und Footer stehen seitenweit in szene.css. */

/* ── Vision + Struktur-Baum ──────────────────────────── */
.verbund { padding-top: clamp(110px, 12vw, 190px); }
.verbund__raster {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 140px); align-items: center;
}
.verbund__text { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 780px; container-type: inline-size; }
/* „Ein Ansprechpartner.“ (8,15 em) bleibt in einer Zeile: höchstens 11,8 % der Spaltenbreite je em, sonst trennt der Browser
   im Notfall am geschützten Leerzeichen (gemessen 12.10.2026 bei 3840 px und auf 360-px-Handys); keine Silbentrennung */
.verbund__text .display-l { font-size: min(clamp(40px, 4.4vw, 76px), 11.8cqi); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.verbund__aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; margin-top: 10px; }

/* Die vier Leistungsphasen als Folge an einer Lichtlinie */
.phasen {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px;
  font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--sz-tinte-2);
}
.phasen li { display: flex; align-items: center; }
.phasen li + li::before {
  content: ''; width: clamp(16px, 2vw, 36px); height: 1px;
  margin-inline: calc(14px - .26em) 14px;      /* die Sperrung hängt rechts am Wort */
  background: var(--sz-licht);
}

/* Struktur-Baum: Tafel mit Lichtkante, Stamm und Äste als Lichtlinien */
.baum {
  --stamm: 24px; --ast: 30px;
  position: relative;
  padding: clamp(24px, 2.8vw, 44px);
  border: 1px solid var(--sz-linie); border-radius: var(--sz-ecke);
  background: linear-gradient(180deg, rgba(10, 166, 134, .07), rgba(10, 166, 134, 0) 44%), var(--sz-tafel);
}
.baum::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px;
  background: linear-gradient(90deg, var(--sz-licht-hell), rgba(10, 166, 134, .55) 38%, rgba(10, 166, 134, 0) 88%);
}
.baum > .sz-eyebrow { margin-bottom: 28px; }

.baum__zeichen { display: grid; place-items: center; flex: none; width: 36px; height: 36px; }
.baum__zeichen img { width: 24px; height: 24px; object-fit: contain; }
.baum__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.25; }
.baum__name b { font-size: 19px; font-weight: 500; letter-spacing: -.005em; color: #fff; }
.baum__name small { font-size: 14px; color: var(--sz-tinte-3); transition: color .3s ease; }

.baum__wurzel { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; }
.baum__wurzel .baum__zeichen { width: 48px; height: 48px; background: var(--sz-petrol); border-radius: var(--sz-ecke); }
.baum__wurzel .baum__zeichen img { width: 30px; height: 30px; }
.baum__wurzel .baum__name b { font-size: clamp(21px, 1.7vw, 25px); }
.baum__wurzel .baum__name small { color: var(--sz-tinte-2); }

.baum__aeste { list-style: none; }
.baum__aeste > li { position: relative; padding-left: calc(var(--stamm) + var(--ast) + 14px); }
.baum__aeste > li::before {                       /* Stamm */
  content: ''; position: absolute; left: var(--stamm); top: 0; bottom: 0; width: 1px;
  background: rgba(10, 166, 134, .62);
}
.baum__aeste > li:first-child::before { top: -20px; }          /* hoch bis zur Wurzel */
.baum__aeste > li:last-child::before { bottom: 50%; }          /* endet am letzten Ast */
.baum__aeste > li::after {                        /* Ast */
  content: ''; position: absolute; left: var(--stamm); top: 50%; width: var(--ast); height: 1px;
  background: rgba(10, 166, 134, .62);
}
.baum__knoten {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 6px 14px 0;
  border-top: 1px solid var(--sz-linie-leise);
  color: inherit;
}
.baum__aeste > li:first-child .baum__knoten { border-top-color: transparent; }
.baum__knoten::before {                           /* Lichtpunkt am Ende des Asts */
  content: ''; position: absolute; left: -16.5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--sz-licht-hell);
  transition: transform .6s var(--sz-aus);
}
.baum__knoten .sz-pfeil {
  margin-left: auto; color: var(--sz-licht-hell);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .35s ease, transform .6s var(--sz-aus);
}
.baum__knoten:hover .sz-pfeil, .baum__knoten:focus-visible .sz-pfeil { opacity: 1; transform: none; }
.baum__knoten:hover::before, .baum__knoten:focus-visible::before { transform: scale(1.8); }
.baum__knoten:hover .baum__name small, .baum__knoten:focus-visible .baum__name small { color: #fff; }
@media (hover: none) { .baum__knoten .sz-pfeil { opacity: .6; transform: none; } }

/* AlphaBulle: Ast gestrichelt, Punkt noch nicht entzündet */
.baum__aeste > li.ist-bald::after { height: 0; background: none; border-top: 1px dashed rgba(10, 166, 134, .75); }
.baum .ist-bald .baum__knoten::before { background: #080808; box-shadow: inset 0 0 0 1px var(--sz-licht); }
.baum .ist-bald .baum__zeichen { opacity: .5; }
.baum .ist-bald .baum__name b { color: var(--sz-tinte-2); }
.baum .ist-bald .sz-hinweis { margin-left: auto; }

/* Der Baum zeichnet sich einmal selbst: Wurzel, dann Stamm, Ast und Zeile je Firma */
.baum .baum__wurzel { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .9s var(--sz-aus); }
.baum .baum__aeste > li { opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .9s var(--sz-aus); }
.baum .baum__aeste > li::before { transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.baum .baum__aeste > li::after { transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.baum.is-in .baum__wurzel, .baum.is-in .baum__aeste > li { opacity: 1; transform: none; }
.baum.is-in .baum__aeste > li::before { transform: scaleY(1); }
.baum.is-in .baum__aeste > li::after { transform: scaleX(1); }
.baum__aeste > li:nth-child(1) { --i: 0; }
.baum__aeste > li:nth-child(2) { --i: 1; }
.baum__aeste > li:nth-child(3) { --i: 2; }
.baum__aeste > li:nth-child(4) { --i: 3; }
.baum__aeste > li:nth-child(5) { --i: 4; }
.baum.is-in .baum__aeste > li { transition-delay: calc(.3s + var(--i) * .12s); }
.baum.is-in .baum__aeste > li::before { transition-delay: calc(.26s + var(--i) * .12s); }
.baum.is-in .baum__aeste > li::after { transition-delay: calc(.38s + var(--i) * .12s); }

/* ── Firmen: jede Karte eine kleine Bühne ────────────── */
.firmen__kopf {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  margin-bottom: clamp(44px, 5vw, 84px);
}
.firmen__kopf .display-l, .zusammen__kopf .display-l { margin-top: 22px; }
.firmen__lede { max-width: 46ch; }

.firmen__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 24px); }
.firma {
  position: relative; grid-column: span 4;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: clamp(420px, 36vw, 560px);
  padding: clamp(24px, 2.4vw, 38px);
  overflow: hidden; isolation: isolate;
  border-radius: var(--sz-ecke); background: #050606;
}
.firma--breit { grid-column: span 6; }
.firma::before {                                   /* Lichtlinie läuft beim Zeigen über die Oberkante */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, var(--sz-licht-hell), rgba(10, 166, 134, .5) 45%, rgba(10, 166, 134, 0) 92%);
  transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--sz-aus);
}
.firma::after {                                    /* Haarlinie als Rahmen, über dem Bild */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 1px solid var(--sz-linie); border-radius: inherit;
  transition: border-color .6s ease;
}
.firma__szene { position: absolute; inset: 0; z-index: -1; }
.firma__szene img, .firma__szene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.firma__szene img {
  transform: scale(1.03); filter: brightness(.84);
  transition: transform 2.6s var(--sz-aus), filter .9s ease, opacity 1.2s ease;
}
.firma__szene .firma__zweitbild { opacity: 0; }
.firma__szene video { opacity: 0; transition: opacity .7s ease; }
.firma.spielt .firma__szene video { opacity: 1; }
.firma__szene::after {                             /* Abdunklung wie in der Bühne: oben fürs Etikett, unten für den Text */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .84) 0%, rgba(8, 8, 8, .42) 20%, rgba(8, 8, 8, 0) 40%),
    linear-gradient(0deg, rgba(8, 8, 8, .95) 0%, rgba(8, 8, 8, .74) 36%, rgba(8, 8, 8, 0) 74%);
}
.firma__kennung { letter-spacing: .2em; }                 /* enger als in der Bühne: „03 · Elektrik & Infrastruktur“ bleibt ab 1280 px einzeilig */
.firma__kennung::before { width: 26px; }
.firma.spielt::before { transform: scaleX(1); }           /* Lichtlinie auch, wenn der Clip ohne Maus läuft (Touch) */
.firma.spielt .firma__szene img { filter: brightness(1); }
.firma__kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.firma__inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 46ch; }
.firma__zeichen { width: 36px; height: 36px; object-fit: contain; margin-bottom: 4px; }
.firma__name { font-size: clamp(26px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -.012em; }
.firma__name span { font-weight: 300; color: var(--sz-tinte-3); }
.firma__name a::after { content: ''; position: absolute; inset: 0; z-index: 2; }   /* ganze Karte ist der Link */
.firma__text { font-size: 16px; line-height: 1.6; color: var(--sz-tinte-2); text-wrap: pretty; }
.firma__mehr { margin-top: 8px; }

.firma:hover::before, .firma:focus-within::before { transform: scaleX(1); }
.firma:hover::after, .firma:focus-within::after { border-color: rgba(10, 166, 134, .5); }
.firma:hover .firma__szene img, .firma:focus-within .firma__szene img { transform: scale(1.08); filter: brightness(1); }
.firma:hover .firma__szene .firma__zweitbild, .firma:focus-within .firma__szene .firma__zweitbild { opacity: 1; }
.firma:hover .firma__mehr::after, .firma:focus-within .firma__mehr::after { transform: scaleX(1); }
.firma:hover .firma__mehr .sz-pfeil, .firma:focus-within .firma__mehr .sz-pfeil { transform: translateX(4px); }
@supports selector(:has(a)) {
  .firma:has(a:focus-visible) { outline: 2px solid var(--sz-licht-hell); outline-offset: 4px; }
  .firma__name a:focus-visible { outline: none; }
}

/* AlphaBulle: noch nicht aufgetaucht */
.firma--bald .firma__szene img { filter: brightness(.5) saturate(.7); }
.firma--bald:hover .firma__szene img, .firma--bald:focus-within .firma__szene img { filter: brightness(.66) saturate(.8); }
.firma--bald .firma__zeichen { opacity: .6; }
.firma--bald .firma__name a { color: var(--sz-tinte-2); }
.firma--bald .firma__mehr { color: var(--sz-tinte-2); font-weight: 400; }
.firma.im-blick .firma__zweitbild { opacity: 1; }          /* Touch: zweites Standbild, sobald die Karte in der Mitte steht */

/* ── Zusammenspiel: Reiter, Szenenbild, Text ─────────── */
.zusammen__kopf { margin-bottom: clamp(44px, 5.5vw, 92px); }
.zusammen__kopf .display-l { max-width: 940px; }
.zusammen__raster {
  display: grid; grid-template-columns: minmax(170px, 200px) minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-areas: ". beispiel beispiel" "reiter bild text";
  column-gap: clamp(28px, 3.2vw, 56px); row-gap: 22px; align-items: start;
}
.zusammen__beispiel { grid-area: beispiel; }
.zusammen__reiter { grid-area: reiter; }
.zusammen__bild { grid-area: bild; }
.zusammen__text { grid-area: text; }

.zusammen__reiter { display: flex; flex-direction: column; }
.zusammen__reiter button {
  position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  padding: 14px 0; text-align: left;
  font-size: 17px; line-height: 1.3; color: var(--sz-tinte-3);
  border-top: 1px solid var(--sz-linie-leise);
  transition: color .3s ease;
}
.zusammen__wort { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; transition: transform .7s var(--sz-aus); }   /* rückt per transform ein, nicht per Padding */
.zusammen__reiter button:first-child { border-top-color: transparent; }
.zusammen__reiter button::before {                 /* die Lichtlinie des Etiketts, vor dem aktiven Schritt */
  content: ''; position: absolute; left: 0; top: 50%; width: 34px; height: 1px;
  background: var(--sz-licht); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--sz-aus);
}
.zusammen__nr { font-size: 12px; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--sz-licht); }
.zusammen__reiter button:hover { color: #fff; }
.zusammen__reiter button[aria-selected="true"] { color: #fff; }
.zusammen__reiter button[aria-selected="true"] .zusammen__wort { transform: translateX(48px); }
.zusammen__reiter button[aria-selected="true"]::before { transform: scaleX(1); }
.zusammen__reiter .sz-hinweis { align-self: center; }

.zusammen__bild {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: var(--sz-ecke); background: #050606;
}
.zusammen__bild::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 1px solid var(--sz-linie); border-radius: inherit;
}
/* Neues Bild steigt wie die Wasserlinie der Bühnen-Brücken von unten auf */
.zusammen__ebene { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--sz-aus); }
.zusammen__ebene.ist-da { clip-path: inset(0 0 0 0); }
.zusammen__ebene img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s ease; }
.zusammen__ebene.ist-bald img { filter: brightness(.55) saturate(.7); }      /* AlphaBulle: zurückgenommen */
.zusammen__schleier {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 8, 8, .8), rgba(8, 8, 8, 0) 44%);
}
.zusammen__kante {
  position: absolute; left: 0; right: 0; top: 100%; height: 1px; z-index: 3; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 208, 171, 0), var(--sz-licht-hell) 18%, var(--sz-licht-hell) 82%, rgba(22, 208, 171, 0));
}
.zusammen__bild.wischt .zusammen__kante { animation: szKante 1.1s var(--sz-aus) both; }
@keyframes szKante { 0% { top: 100%; opacity: 1; } 80% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
/* Bewegung reduziert (Schalter der Bühne): Bild blendet nur um */
.zusammen__bild.ist-ruhig .zusammen__ebene { clip-path: none; opacity: 0; transition: opacity .5s ease; }
.zusammen__bild.ist-ruhig .zusammen__ebene.ist-da { opacity: 1; }
.zusammen__bild.ist-ruhig .zusammen__kante { animation: none; }
.zusammen__bald { position: absolute; right: 18px; top: 18px; z-index: 3; opacity: 0; transition: opacity .5s ease; background: rgba(8, 8, 8, .5); }
.zusammen__bild.ist-bald .zusammen__bald { opacity: 1; }
.zusammen__marke {
  position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 3; text-wrap: balance;
  font-size: 12px; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .88);
}

.zusammen__text { display: flex; flex-direction: column; gap: 22px; }
.zusammen__tafeln { display: grid; }
.zusammen__tafel {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .7s var(--sz-aus), visibility 0s linear .3s;
}
.zusammen__tafel.ist-da { opacity: 1; visibility: visible; transform: none; transition-delay: .14s, .14s, 0s; }
.zusammen__tafel h3 { font-size: clamp(26px, 2.1vw, 32px); font-weight: 400; line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
.zusammen__fuss {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  padding-top: 20px; border-top: 1px solid var(--sz-linie);
  font-size: 14px; color: var(--sz-tinte-3); font-variant-numeric: tabular-nums;
}

/* ── Werte ───────────────────────────────────────────── */
.werte__raster {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 6vw, 110px); align-items: center;
}
.werte__text { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.werte__text .sz-text { max-width: 46ch; }
.werte__karten { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); }
/* Tafel: Text links, rechts läuft ein Lichtdetail aus der Szene in voller Höhe in die Tafel aus */
.wert {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 31%, 250px); align-items: stretch;
  overflow: hidden;
  background: var(--sz-tafel); border: 1px solid var(--sz-linie); border-radius: var(--sz-ecke);
}
.wert__text { align-self: center; padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px); }
.wert__name { font-size: clamp(22px, 1.7vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.wert__rolle { margin-top: 8px; font-size: 13px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--sz-licht); }
.wert__satz { margin-top: 14px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--sz-tinte-2); text-wrap: pretty; }
.wert__bild { position: relative; min-height: 150px; overflow: hidden; }
.wert__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.6s var(--sz-aus); }
.wert__bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--sz-tafel) 0%, rgba(10, 12, 12, .5) 26%, rgba(10, 12, 12, 0) 60%);
}
.wert:hover .wert__bild img { transform: scale(1.06); }

/* ── Schmaler ────────────────────────────────────────── */
@media (max-width: 1180px) {
  .verbund__raster, .werte__raster { grid-template-columns: minmax(0, 1fr); }
  .verbund__text { max-width: 720px; }

  /* Reiter werden zur Zeile über dem Bild, seitlich wischbar */
  .zusammen__raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "beispiel" "reiter" "bild" "text"; column-gap: 0; row-gap: 22px; }
  .zusammen__reiter {
    flex-direction: row; gap: 28px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * clamp(24px, 5vw, 200px)); padding-inline: clamp(24px, 5vw, 200px);
    box-shadow: inset 0 -1px 0 var(--sz-linie-leise);
  }
  .zusammen__reiter::-webkit-scrollbar { display: none; }
  .zusammen__reiter button { flex: none; flex-wrap: nowrap; align-items: center; padding: 12px 0 15px; border-top: 0; white-space: nowrap; }
  .zusammen__reiter button::before { top: auto; bottom: 0; width: 100%; }
  .zusammen__reiter button[aria-selected="true"] .zusammen__wort { transform: none; }
  .zusammen__text { margin-top: 8px; }
}
@media (max-width: 1024px) {
  .firma, .firma--breit { grid-column: span 6; }
  .firma:last-child { grid-column: span 12; }
  .firmen__kopf { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 720px) {
  .verbund { padding-top: 96px; }
  .baum { --stamm: 20px; --ast: 20px; padding: 22px 18px; }
  .baum__wurzel .baum__zeichen { width: 40px; height: 40px; }
  .baum__wurzel .baum__zeichen img { width: 26px; height: 26px; }
  .baum__name b { font-size: 17px; }
  .baum__name small { font-size: 13px; }
  .baum__knoten { gap: 10px; }
  .phasen { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 0; letter-spacing: .2em; }   /* zwei Paare statt einer umbrechenden Zeile */
  .phasen li + li::before { width: 22px; margin-inline: calc(12px - .2em) 12px; }
  .phasen li:nth-child(odd)::before { display: none; }
  .baum .ist-bald .baum__knoten { flex-wrap: wrap; row-gap: 8px; }
  .baum .ist-bald .sz-hinweis { margin-left: 46px; }
  .firma__kennung { letter-spacing: .16em; }
  .wert { grid-template-columns: minmax(0, 1fr); }
  .wert__bild { order: -1; min-height: 0; height: 150px; }       /* breites Band oben, läuft nach unten in die Tafel aus */
  .wert__bild::after { background: linear-gradient(0deg, var(--sz-tafel) 0%, rgba(10, 12, 12, .45) 30%, rgba(10, 12, 12, 0) 64%); }
  .wert__text { padding-top: 10px; }
  .zusammen__marke { left: 14px; right: 14px; bottom: 12px; letter-spacing: .14em; }
}
@media (max-width: 640px) {
  .firma, .firma--breit, .firma:last-child { grid-column: span 12; min-height: 400px; }
}