/* Große Schrift und stille Aufhellung nach dem Hero; ohne JavaScript vollständig lesbar. */
.logo-raum .gruppen-erzaehlung {
  /* Ein Bildschirm, Wortmarke genau in der Mitte; gleiche Luft oben und unten. */
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: clamp(80px, 10vw, 140px) var(--rand);
  text-align: center;
  overflow: visible;
  background: transparent;
}
/* Keine Abdunklung über dieser Sektion: Sie läge über den Molekülen und würde sie dimmen.
   Den Übergang ins Schwarz übernimmt .leistungen::before unter der Punktebene (Marcel 22.10.). */
.gruppen-erzaehlung::before { content: none; }
/* Alles mittig: Etikett, drei Satzzeilen und Signatur teilen eine Achse. Mehr steht in der Sektion nicht. */
.gruppen-text-rahmen {
  position: relative;
  z-index: 1;
  width: 100%; /* sonst schrumpft der Rahmen im Sektions-Grid auf die 300-px-Standardbreite der SVG */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 1540px;
  margin: 0 auto;
  text-align: center;
}
.gruppen-text-label {
  margin: 0 0 clamp(28px, 3vw, 44px);
  font: 400 clamp(10px, .8vw, 13px)/1.2 var(--sans);
  color: #b8bab9;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gruppen-text-gross {
  min-width: 0;
  max-width: 30ch; /* jeder der drei Sätze bleibt am Desktop eine Zeile; am Handy bricht er um */
  margin: 0;
  font: 400 clamp(40px, 6.283vw, 95px)/.98 var(--sans);
  color: #d8d8d8;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.gruppen-text-wort { display: inline-block; white-space: nowrap; }
.gruppen-text-zeile { display: block; }
/* Spruch als Punktwortmarke wie im Footer (Montserrat 600, gesperrt, feine weiße Punkte), sechs kurze Zeilen (Marcel 23.10., ersetzt CONSTRUCTION INTELLIGENCE). */
.gruppen-wortmarke-titel { width: min(100%, 820px); margin: 0; }
.gruppen-wortmarke { position: relative; display: block; width: 100%; aspect-ratio: 1400 / 640; color: #fff; opacity: .92; }
.gruppen-wortmarke .fuss-wortmarke-basis { font: 600 74px/1 var(--kopf, Montserrat); letter-spacing: .1em; }
.gruppen-wortmarke.punkte--bereit .fuss-wortmarke-basis { visibility: hidden; }
.gruppen-wortmarke.punkte--bereit .fuss-wortmarke-canvas { visibility: visible; }
.gruppen-text-signatur {
  margin: clamp(28px, 3.2vw, 48px) 0 0;
  font: 400 clamp(16px, 1.3vw, 20px)/1.3 var(--sans);
  color: #b8bab9;
  letter-spacing: .01em;
}
/* Deckende Glyphen: die 3D-Teile bleiben auch hinter noch dunklen Buchstaben verdeckt. */
.gruppen-text--aktiv .gruppen-text-zeichen {
  --text-ton: calc(216 * var(--text-helligkeit, 1));
  color: rgb(var(--text-ton) var(--text-ton) var(--text-ton));
}
.gruppen-text-lesetext {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .logo-raum .gruppen-erzaehlung { padding-top: 100px; padding-bottom: 44px; }
  .gruppen-text-label { margin: 0 0 28px; font-size: 11px; }
  .gruppen-text-gross { max-width: none; font-size: clamp(34px, 9.5vw, 50px); line-height: 1.02; letter-spacing: -.055em; }
  .gruppen-text-gross[data-text-zeilen] { font-size: clamp(28px, 8.5vw, 50px); }
  .gruppen-text-signatur { margin-top: 24px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gruppen-text--aktiv .gruppen-text-zeichen { color: #d8d8d8; }
}
/* Spruch als normal gesetztes Zitat in Weiß (Marcel 23.10., ersetzt die Punktwortmarke). */
.gruppen-zitat { max-width: 26ch; margin: 0; font: 500 clamp(28px, 3.6vw, 56px)/1.2 var(--kopf, Montserrat); letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.gruppen-zitat-zeile { display: block; }
@media (max-width: 700px) { .gruppen-zitat { font-size: clamp(24px, 7vw, 34px); } .gruppen-zitat-zeile + .gruppen-zitat-zeile { margin-top: .35em; } }
@media (min-width: 701px) { .gruppen-zitat { max-width: none; } .gruppen-zitat-zeile { white-space: nowrap; } }