/* ============================================================
   cd_stimmen — Kundenstimmen
   ============================================================
   Werte aus „Startseite Marketing v3 dunkel" übernommen:
   dunkle Bahn, Kopfzeile mit zwei Pfeilen rechts UNTEN bündig,
   umrandete Karte mit Logokasten und Name links und großem
   Zitat rechts, darunter eine wandernde Fortschrittsmarke mit
   Zähler.

   Das Zitat ist bewusst Archivo und nicht Fließtextgröße — es ist
   die Aussage des Abschnitts, nicht sein Beiwerk. Genau daran hing
   der sichtbare Unterschied zur Vorlage. Der Grad stand bis zum
   02.09.2026 auf 27px und ist auf Wunsch auf 24 zurückgenommen;
   die übrigen Bauformen und Breiten sind im selben Verhältnis
   mitgegangen, damit die Reihe zusammenbleibt.
   ============================================================ */

.cd-stimmen {
  /* Zwei Töne, die im Tokensatz keine Entsprechung haben: der
     Knopfrand liegt zwischen --cd-dunkel-2 und -3, die
     Zitatfarbe ist gebrochenes Weiß. Beide stehen hier lokal,
     damit sie nicht als allgemeine Marke missverstanden werden. */
  --cd-stimmen-knopfrand: #2A424C;
  --cd-stimmen-zitatfarbe: #EAF1F4;

  /* ----------------------------------------------------------
     Farben der Bahn als eigene Eigenschaften.

     Die Bahn stand bisher fest auf dunklem Grund. Der Entwurf
     zeigt sie auf der Referenzseite auf getoentem Grund — dieselbe
     Bahn, andere Umgebung. Statt einer zweiten Fassung des ganzen
     Stylesheets stehen die Farben deshalb hier einmal als Namen
     und werden weiter unten je Grundfarbe umgestellt.

     Bewusst EIGENE Klassen (cd-stimmen--getoent) und nicht die
     allgemeinen Grundklassen: cd-auf-getoent aus komponenten.css
     setzt selbst einen Hintergrund und wiegt genauso viel wie
     .cd-stimmen. Wer gewinnt, haengt dann an der Ladereihenfolge
     der Dateien — das ist keine Grundlage fuer eine Farbe.
     ---------------------------------------------------------- */
  --cd-st-grund: var(--cd-tinte);
  --cd-st-text: var(--cd-text-auf-dunkel);
  --cd-st-titel: var(--cd-weiss);
  --cd-st-kicker: var(--cd-rot-auf-dunkel);
  /* Der grosse Anfuehrungsstrich stand fest auf --cd-rot und
     damit auf dem dunklen Grund bei 2,52 : 1 — er sah aus wie
     ein Fleck. Er folgt jetzt derselben Regel wie der Kicker. */
  --cd-st-marke: var(--cd-rot-auf-dunkel);
  --cd-st-balken: var(--cd-rot-auf-dunkel);
  --cd-st-knopfrand: var(--cd-stimmen-knopfrand);
  --cd-st-knopffarbe: var(--cd-weiss);
  --cd-st-kartegrund: var(--cd-tinte);
  --cd-st-karterand: var(--cd-dunkel-2);
  --cd-st-zitat: var(--cd-stimmen-zitatfarbe);
  --cd-st-name: var(--cd-weiss);
  --cd-st-leise: var(--cd-text-schwach);
  --cd-st-schiene: var(--cd-dunkel-2);
  --cd-st-fokus: var(--cd-weiss);

  background: var(--cd-st-grund);
  color: var(--cd-st-text);
}

/* Heller Grund. Die leisen Zeilen wechseln dabei von
   --cd-text-schwach auf --cd-text-2: der schwache Ton ist fuer
   dunklen Grund gezeichnet und kaeme auf Weiss nicht auf die
   geforderten 4,5 zu 1. */
.cd-stimmen--getoent,
.cd-stimmen--hell {
  --cd-st-text: var(--cd-text-2);
  --cd-st-titel: var(--cd-dunkel);
  --cd-st-kicker: var(--cd-rot);
  --cd-st-marke: var(--cd-rot);
  --cd-st-balken: var(--cd-rot);
  --cd-st-knopfrand: var(--cd-linie-2);
  --cd-st-knopffarbe: var(--cd-dunkel);
  --cd-st-kartegrund: var(--cd-weiss);
  --cd-st-karterand: var(--cd-linie-2);
  --cd-st-zitat: var(--cd-dunkel);
  --cd-st-name: var(--cd-dunkel);
  --cd-st-leise: var(--cd-text-2);
  --cd-st-schiene: var(--cd-linie-2);
  --cd-st-fokus: var(--cd-rot);
}
.cd-stimmen--getoent { --cd-st-grund: var(--cd-flaeche-2); }
.cd-stimmen--hell { --cd-st-grund: var(--cd-weiss); }

/* --- Kopfzeile --------------------------------------------- */
/* flex-end, nicht flex-start: Die Pfeile stehen auf der
   Grundlinie der Überschrift, nicht an ihrem oberen Rand. */
.cd-stimmen__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-block-end: 52px;
}
/* Grad, Zeile und Sperrung kommen aus basis.css und komponenten.css
   — hier stehen nur Farbe und Breite, sonst laufen die
   Abschnittsköpfe der Seite auseinander. */
.cd-stimmen__kicker { color: var(--cd-st-kicker); }
.cd-stimmen__titel {
  color: var(--cd-st-titel);
  max-inline-size: 620px;
}
.cd-stimmen__beitext {
  margin-block-start: var(--cd-a4);
  max-inline-size: 620px;
}

/* --- Pfeile ------------------------------------------------ */
.cd-stimmen__bedienung {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

/* WARUM DIESE ZWEI ZEILEN NOETIG SIND.
   `hidden` steht im Markup an beiden Bedienbloecken; das Skript
   nimmt es weg, sobald es etwas zu blaettern gibt. Bei EINEM
   Zitat laesst es das Attribut stehen — richtig so.
   Nur: Das `display: none`, das ein Browser fuer [hidden]
   mitbringt, kommt aus seinem eigenen Stylesheet und verliert
   gegen JEDE Klassenregel mit `display`. Die zwei Zeilen darueber
   und bei .cd-stimmen__fortschritt sind genau solche Regeln.
   Folge auf /leistungen/webseite-erstellen-lassen: zwei Pfeile
   und eine Fortschrittslinie ueber einem einzelnen Zitat — die
   Pfeile anklickbar, die Linie auf ihrem Anfangswert von 25 %
   stehengeblieben. Ein Bedienelement, das nichts bedient. */
.cd-stimmen__bedienung[hidden],
.cd-stimmen__fortschritt[hidden] { display: none; }
.cd-stimmen__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  background: transparent;
  border: 1px solid var(--cd-st-knopfrand);
  border-radius: var(--cd-r-knopf);
  color: var(--cd-st-knopffarbe);
  cursor: pointer;
  transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.cd-stimmen__pfeil:hover:not([disabled]) {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
}

/* Am Anfang und Ende wird der jeweilige Pfeil abgeblendet UND
   per disabled aus der Tabreihenfolge genommen. Nur abblenden
   würde ein Ziel hinterlassen, das den Fokus bekommt und nichts
   tut. */
.cd-stimmen__pfeil[disabled] {
  opacity: .35;
  cursor: default;
}

/* Das Zeichen ist eine echte Zeichnung mit Schaft, kein
   gedrehtes Eck — die Vorlage zeigt einen Pfeil, keine
   Winkelklammer. Kein Symbolzeichen, das im zugänglichen Namen
   landen könnte. */
.cd-stimmen__pfeilbild {
  inline-size: 17px;
  block-size: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* Anhalte-Knopf: zwei Balken, im angehaltenen Zustand ein
   Dreieck. Nur sichtbar, wenn Selbstlauf läuft. */
.cd-stimmen__haltezeichen {
  position: relative;
  inline-size: 12px;
  block-size: 13px;
}
.cd-stimmen__haltezeichen::before,
.cd-stimmen__haltezeichen::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inline-size: 4px;
  background: currentColor;
}
.cd-stimmen__haltezeichen::before { inset-inline-start: 0; }
.cd-stimmen__haltezeichen::after { inset-inline-end: 0; }
.cd-stimmen__halt[aria-pressed="true"] .cd-stimmen__haltezeichen::before {
  inline-size: 0;
  inset-block: 0;
  border-block: 6.5px solid transparent;
  border-inline-start: 11px solid currentColor;
}
.cd-stimmen__halt[aria-pressed="true"] .cd-stimmen__haltezeichen::after { display: none; }

/* --- Spur -------------------------------------------------- */
/* Ohne Skript ist das eine normale Bildlaufspur mit
   Einrastpunkten — alle Zitate bleiben mit Finger und Rollrad
   erreichbar. Der Zwischenraum ist bewusst nur 2px: In der
   Vorlage schiebt ein transform, hier eine Bildlaufspur, und ein
   großer Abstand würde beim Schieben eine Lücke zeigen. */
.cd-stimmen__spur {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  /* Der Wisch bleibt in der Spur.
     Ohne diese Zeile reicht ein Wisch ueber das letzte Zitat hinaus
     an die Seite weiter — auf iOS bis zur Zurueck-Geste, also aus
     dem Zitat heraus auf die vorige Seite. Die Schwester-Spuren in
     cd_referenzen.css und cd_mobilspur.css hatten sie von Anfang
     an; hier fehlte sie als einziger der drei. Nachgemessen am
     02.09.2026: scrollWidth 1798 bei clientWidth 358. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.cd-stimmen__spur::-webkit-scrollbar { display: none; }

/* Die Spur ist mit tabindex erreichbar und muss deshalb einen
   sichtbaren Fokus haben (WCAG 2.4.7). */
.cd-stimmen__spur:focus-visible {
  outline: 2px solid var(--cd-st-fokus);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cd-stimmen__spur { scroll-behavior: auto; }
}

/* Mehrere Zitate nebeneinander. Der Wert steht an der Spur und
   nicht als eigene Klasse je Zahl: die Spur ist der Ort an dem die
   Breite entsteht. Die 2px sind die Fuge zwischen den Karten —
   ohne den Abzug passte die letzte Karte nicht mehr ins Fenster
   und die Reihe rutschte um eine Fuge. */
.cd-stimmen__spur[data-je-folie="2"] > .cd-stimmen__karte { flex-basis: calc(50% - 1px); }
.cd-stimmen__spur[data-je-folie="3"] > .cd-stimmen__karte { flex-basis: calc(33.333% - 1.34px); }
.cd-stimmen__spur[data-je-folie="4"] > .cd-stimmen__karte { flex-basis: calc(25% - 1.5px); }

/* Stehen mehrere Zitate nebeneinander, faellt die Zweispaltigkeit
   INNERHALB der Karte weg: 230px fuer die Person und der Rest fuer
   das Zitat ergibt bei halber Breite eine Spalte von 300px, in der
   jedes zweite Wort umbricht. Stattdessen Zitat oben und Person
   darunter — die uebliche Reihenfolge eines Zitats.

   Die Person steht im Markup VOR dem Zitat und wird hier nach
   unten gestellt. Fuer ein Vorleseprogramm bleibt es bei
   "Person dann Zitat"; beide Reihenfolgen ergeben Sinn und in der
   Karte sitzt kein Bedienelement, dessen Tabfolge durcheinander
   geraten koennte. */
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) > .cd-stimmen__karte {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cd-a6);
  padding: 40px 44px;
}
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) > .cd-stimmen__karte > .cd-stimmen__person {
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
}
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) .cd-stimmen__logo {
  margin-block-end: 0;
  flex: 0 0 auto;
  inline-size: 150px;
  block-size: 52px;
}
/* Das Zitat wird kleiner: 27px sind fuer die volle Breite
   gezeichnet und wirken auf einer halben Spalte wie ein Plakat. */
.cd-stimmen__spur:is([data-je-folie="2"], [data-je-folie="3"], [data-je-folie="4"]) .cd-stimmen__zitat p {
  font-size: 18px;
  line-height: 1.55;
}

/* Unter 1100px steht wieder eine Karte je Folie — zwei Zitate
   nebeneinander sind dort keine zwei Spalten mehr sondern zwei
   Streifen. */
@media (max-width: 1100px) {
  .cd-stimmen__spur[data-je-folie] > .cd-stimmen__karte { flex-basis: 100%; }
}

/* --- Karte ------------------------------------------------- */
.cd-stimmen__karte {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  margin: 0;
  padding: 56px 60px;
  background: var(--cd-st-kartegrund);
  border: 1px solid var(--cd-st-karterand);
}

/* Das Logo steht auf weißer Fläche — die meisten Kundenlogos
   sind für weißen Grund gezeichnet und verschwinden sonst. Feste
   Höhe, damit die Karten trotz unterschiedlicher Logohöhen
   gleich hoch bleiben. */
.cd-stimmen__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 66px;
  inline-size: 100%;
  max-inline-size: 200px;
  padding: 11px 16px;
  background: var(--cd-weiss);
  border-radius: var(--cd-r-feld);
  margin-block-end: 28px;
}
.cd-stimmen__logo img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

/* Der Kasten richtet sich nach dem Logo
   ------------------------------------------------------------
   Drei Fassungen, gesetzt von cd:logogrund in der Vorlage. Die
   Regel ENTSCHEIDET NICHTS — sie malt nur, was dort entschieden
   wurde: entweder gemessen (Helligkeit der Datei) oder von Hand
   am Datensatz gewaehlt (Feld „Grund hinter dem Logo").

   Der Anlass steht in der Vorlage: ein zu 97 Prozent weiss
   gezeichnetes Kundenlogo im weissen Kasten. Sichtbar war ein
   leeres Rechteck.

   --weiss ist die Vorgabe und wiederholt nur, was oben schon
   steht. Bewusst hingeschrieben: Wer die Klasse im Quelltext
   sieht, muss sie im Stylesheet auch finden. */
.cd-stimmen__logo--weiss { background: var(--cd-weiss); }

/* Innenschatten statt border: Der Kasten hat feste Masse, und ein
   Rand kaeme innen von der Hoehe ab (box-sizing: border-box) —
   das Logo wuerde in der dunklen Fassung um zwei Pixel kleiner
   als in der hellen. */
.cd-stimmen__logo--dunkel {
  background: var(--cd-dunkel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* Ohne Kasten steht das Logo frei auf der Karte. Die Breite folgt
   dann dem Bild — ein 200 px breiter unsichtbarer Kasten um ein
   90 px breites Logo wuerde es aus der Flucht schieben. Die Hoehe
   bleibt, damit die Karten gleich hoch bleiben. */
.cd-stimmen__logo--ohne {
  background: none;
  box-shadow: none;
  padding-inline: 0;
  inline-size: auto;
  justify-content: flex-start;
}

.cd-stimmen__name {
  display: block;
  color: var(--cd-st-name);
  font-weight: 600;
  font-size: 16px;
  margin-block-end: 6px;
}
.cd-stimmen__firma,
.cd-stimmen__rolle {
  display: block;
  font-family: var(--cd-schrift-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-st-leise);
}

/* --- Zitat ------------------------------------------------- */
.cd-stimmen__zitat { margin: 0; }
.cd-stimmen__marke {
  display: block;
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  /* Das Anfuehrungszeichen folgt dem Zitat — es ist sein Auftakt
     und nicht ein eigenes Zeichen. */
  font-size: 50px;
  line-height: .7;
  color: var(--cd-st-marke, var(--cd-rot));
  margin-block-end: 22px;
}
.cd-stimmen__zitat p {
  font-family: var(--cd-schrift-display);
  font-weight: 500;
  /* 24 statt 27 px (02.09.2026, auf Wunsch). Die Zeilenhoehe geht
     mit auf 1.5: Bei kleinerem Grad braucht dieselbe Zeilenlaenge
     etwas mehr Luft, sonst rueckt der Satz zusammen. */
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -.014em;
  color: var(--cd-st-zitat);
  max-inline-size: 820px;
}

/* --- Fortschritt ------------------------------------------- */
.cd-stimmen__fortschritt {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-start: 32px;
}
.cd-stimmen__linie {
  flex: 1 1 auto;
  position: relative;
  block-size: 2px;
  overflow: hidden;
  background: var(--cd-st-schiene);
}
/* Die Marke WANDERT, sie wächst nicht: Sie zeigt, an welcher
   Stelle der Reihe man steht — nicht, wie viel schon gelesen
   wurde. */
.cd-stimmen__balken {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 25%;
  /* Auf dunkler Schiene traegt --cd-rot nicht; die Marke folgt
     derselben Regel wie Kicker und Anfuehrungsstrich. */
  background: var(--cd-st-balken, var(--cd-rot));
  transition: transform var(--cd-zeit) ease, inline-size var(--cd-zeit) ease;
}
@media (prefers-reduced-motion: reduce) {
  .cd-stimmen__balken { transition: none; }
}
.cd-stimmen__zaehler {
  flex: 0 0 auto;
  font-family: var(--cd-schrift-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-st-leise);
}

/* ============================================================
   Schmalere Fenster
   ============================================================ */
@media (max-width: 1100px) {
  .cd-stimmen__karte {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    padding: 44px 44px;
  }
  .cd-stimmen__zitat p { font-size: 21px; }
  .cd-stimmen__marke { font-size: 42px; }
}

@media (max-width: 900px) {
  /* --- Pfeile und Anhalter wandern ans Ende ------------------
     Am Rechner stehen sie oben rechts neben der Ueberschrift; die
     Begruendung dafuer steht bei .cd-stimmen__kopf und gilt dort
     weiter. Am Handy geht das nicht auf: Die Kopfzeile bricht in
     eine Spalte um, die Knoepfe stuenden dann als Block zwischen
     Ueberschrift und Zitat — man bedient etwas, das man noch gar
     nicht gesehen hat.

     Verschoben wird ueber `order`, und das ist hier ausnahmsweise
     richtig: Die Bedienung liegt im KOPF, das Zitat daneben. Kein
     Markup bringt beide gleichzeitig in die richtige Reihenfolge,
     weil die richtige Reihenfolge je nach Breite eine andere ist.
     Das Dokument folgt deshalb dem Rechner (Ueberschrift, Knoepfe,
     Zitat) — dort zaehlt die Tastatur am meisten. Am Handy weicht
     die Tabfolge davon ab; bedienbar und sinnvoll bleibt sie in
     beiden Faellen, die Knoepfe stehen unmittelbar bei dem, was sie
     bedienen (WCAG 2.4.3).

     `display: contents` loest den Kopfkasten auf, damit seine zwei
     Kinder zu Geschwistern der Spur werden — nur so greift `order`
     ueber die Kastengrenze hinweg. Der Kasten selbst traegt keine
     Bedeutung, er ist reine Anordnung.

     Der Aussenabstand des Kopfes faellt mit dem Kasten weg und
     wandert deshalb an den Text. */
  .cd-stimmen .cd-bahn__inhalt {
    display: flex;
    flex-direction: column;
  }
  .cd-stimmen__kopf { display: contents; }
  .cd-stimmen__kopftext { order: 1; margin-block-end: var(--cd-a6); }
  .cd-stimmen__spur { order: 2; }
  .cd-stimmen__fortschritt { order: 3; }
  /* Die Knopfreihe steht auf einer eigenen Zeile unter der
     Fortschrittslinie und braucht Luft dazwischen - ohne sie
     kleben 52-px-Knoepfe an einem 2-px-Strich. */
  .cd-stimmen__bedienung { order: 4; margin-block-start: var(--cd-a5); }

  .cd-stimmen__titel { font-size: 32px; }
  .cd-stimmen__karte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a5);
    padding: var(--cd-a6) var(--cd-a5);
  }
  .cd-stimmen__zitat p { font-size: 18.5px; }
  .cd-stimmen__marke { font-size: 36px; margin-block-end: 14px; }
  .cd-stimmen__logo { margin-block-end: 20px; }
}

/* ============================================================
   Aufbau: randlos — Zitat links, Person rechts
   ============================================================
   Zweite Fassung derselben Bahn, umschaltbar ueber cd_layout.
   Sie nimmt der Karte den Rahmen: das Zitat steht dann direkt auf
   dem dunklen Grund und bekommt die volle Breite, die Person
   rueckt als schmale Spalte nach rechts.

   Die Trennlinie sitzt unter der Kopfzeile und nicht um die Karte —
   ein Rahmen um ein randloses Zitat waere ein Widerspruch.
   ============================================================ */
.cd-stimmen--a-randlos .cd-stimmen__kopf {
  padding-block-end: var(--cd-a5);
  border-block-end: 1px solid var(--cd-dunkel-2);
}

.cd-stimmen--a-randlos .cd-stimmen__karte {
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 60px;
  align-items: end;
  padding: var(--cd-a6) 0 0;
  background: none;
  border: 0;
}

/* HIER STAND EINMAL EIN TAUSCH UEBER `order`.
   Er ist am 24.08.2026 weggefallen, weil die Vorlage die beiden
   jetzt in der richtigen Reihenfolge ausgibt: erst das Zitat, dann
   wer es gesagt hat. Die alte Begruendung — "die Vorlesereihenfolge
   bleibt wie sie ist" — war der Fehler: Sie liess Auge und
   Vorleseprogramm ausdruecklich auseinanderlaufen (WCAG 1.3.2).
   In dieser Fassung steht das Zitat links, die Person rechts; das
   ergibt sich jetzt von selbst aus der Reihenfolge im Dokument. */

@media (max-width: 860px) {
  .cd-stimmen--a-randlos .cd-stimmen__karte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a5);
    align-items: start;
  }
}


/* ============================================================
   Fassung "karte": die Person steht links
   ============================================================
   Seit dem Tausch im Dokument steht das Zitat vorn. In der Fassung
   "randlos" passt das ohne Zutun — dort gehoert das Zitat nach
   links. In der Fassung "karte" ist es umgekehrt: Dort steht die
   schmale Personenspalte links. Beide bekommen deshalb hier ihren
   Platz ausdruecklich zugewiesen; im Raster entscheidet dann die
   Zuweisung und nicht die Reihenfolge.

   NUR in der zweispaltigen Lage. Ab 900 px abwaerts ist es eine
   Spalte, und `grid-column: 2` wuerde dort eine zweite erfinden —
   die Person stuende dann neben statt unter dem Zitat.

   Und nur bei einer Karte je Folie: Die Fassungen mit zwei bis vier
   Karten sind ohnehin einspaltig.
   ============================================================ */
@media (min-width: 901px) {
  .cd-stimmen:not(.cd-stimmen--a-randlos):not(.cd-stimmen--a-mitte):not(.cd-stimmen--a-gross) .cd-stimmen__spur[data-je-folie="1"] > .cd-stimmen__karte > .cd-stimmen__person {
    grid-column: 1;
    grid-row: 1;
  }
  .cd-stimmen:not(.cd-stimmen--a-randlos):not(.cd-stimmen--a-mitte):not(.cd-stimmen--a-gross) .cd-stimmen__spur[data-je-folie="1"] > .cd-stimmen__karte > .cd-stimmen__zitat {
    grid-column: 2;
    grid-row: 1;
  }
}


/* ============================================================
   Aufbau: mittig — Zitat groß, Person darunter
   ============================================================
   Dritte Fassung. WOFUER sie da ist: Die zwei anderen sind
   zweispaltig und teilen die Bahn in eine 230-px-Personenspalte
   und den Rest. Steht in der Bahn nur EIN Zitat und ist es kurz,
   bleibt daneben eine leere Flaeche stehen — auf
   /leistungen/webseite-erstellen-lassen war die Karte 1200 px
   breit und das Zitat brauchte drei Zeilen davon.

   Hier laeuft alles auf einer Achse: Anfuehrungsstrich, Zitat,
   darunter Logo und Name in einer Zeile. Die Karte verliert
   Rahmen und Flaeche — bei einer einzigen mittigen Saeule waere
   ein Kasten nur noch Umrandung von Luft.

   Die Bedienung wandert unter das Zitat. Am Rechner steht sie
   sonst oben rechts neben der Ueberschrift; das setzt eine
   Ueberschrift voraus, die man auch sieht. Genau die ist auf der
   Leistungsseite auf "nur vorlesen" gestellt — die Pfeile
   schwebten dort ueber einer leeren Zeile. Verschoben wird ueber
   `order` mit derselben Begruendung wie in der Handy-Fassung:
   Die Knoepfe stehen bei dem, was sie bedienen (WCAG 2.4.3).
   ============================================================ */
.cd-stimmen--a-mitte .cd-bahn__inhalt {
  display: flex;
  flex-direction: column;
}
.cd-stimmen--a-mitte .cd-stimmen__kopf { display: contents; }
.cd-stimmen--a-mitte .cd-stimmen__kopftext {
  order: 1;
  text-align: center;
  max-inline-size: 720px;
  margin-inline: auto;
  margin-block-end: var(--cd-a6);
}
.cd-stimmen--a-mitte .cd-stimmen__spur { order: 2; }
.cd-stimmen--a-mitte .cd-stimmen__fortschritt { order: 3; }
.cd-stimmen--a-mitte .cd-stimmen__bedienung {
  order: 4;
  justify-content: center;
  margin-block-start: var(--cd-a5);
}

/* Die Saeule. 760 px ist kein runder Wert sondern die Breite, bei
   der das Zitat in 30 px noch auf etwa 55 Zeichen je Zeile kommt —
   mittig gesetzter Text wird ab etwa 65 Zeichen unruhig, weil beide
   Kanten flattern. */
.cd-stimmen--a-mitte .cd-stimmen__karte {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
  text-align: center;
  max-inline-size: 760px;
  margin-inline: auto;
  padding: var(--cd-a5) 0 var(--cd-a6);
  background: none;
  border: 0;
}

/* Bei mehreren Karten je Folie greift die eigene Breite der Spur —
   dann darf die Karte nicht zusaetzlich auf 760 px begrenzt sein,
   sonst stehen zwei Saeulen mit einer Luecke dazwischen. */
.cd-stimmen--a-mitte .cd-stimmen__spur:not([data-je-folie="1"]) > .cd-stimmen__karte {
  max-inline-size: none;
}

.cd-stimmen--a-mitte .cd-stimmen__marke { margin-block-end: 18px; }
.cd-stimmen--a-mitte .cd-stimmen__zitat p {
  font-size: 26px;
  max-inline-size: none;
  text-wrap: balance;
}

/* Logo und Name nebeneinander statt uebereinander: Untereinander
   waere es eine zweite Saeule unter der ersten und die Bahn wuerde
   lang. Der Strich dazwischen trennt zwei Angaben die sonst wie
   eine Zeile aussehen. */
.cd-stimmen--a-mitte .cd-stimmen__person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-block-start: var(--cd-a5);
  text-align: start;
}
.cd-stimmen--a-mitte .cd-stimmen__logo {
  margin-block-end: 0;
  block-size: 54px;
  inline-size: auto;
  max-inline-size: 170px;
}
.cd-stimmen--a-mitte .cd-stimmen__quelle {
  padding-inline-start: 22px;
  border-inline-start: 1px solid var(--cd-st-karterand);
}
.cd-stimmen--a-mitte .cd-stimmen__name { margin-block-end: 4px; }

@media (max-width: 700px) {
  .cd-stimmen--a-mitte .cd-stimmen__karte {
    padding: 0 0 var(--cd-a5);
  }
  .cd-stimmen--a-mitte .cd-stimmen__zitat p { font-size: 19px; }
  /* Untereinander und ohne Trennstrich: Nebeneinander bleiben von
     der Textspalte neben einem 170-px-Logo keine 150 px uebrig. */
  .cd-stimmen--a-mitte .cd-stimmen__person {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .cd-stimmen--a-mitte .cd-stimmen__quelle {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}


/* ============================================================
   Aufbau: groß — das Zitat ist die Bahn
   ============================================================
   Vierte Fassung. Die drei anderen setzen das Zitat in einen
   Bereich UND lassen daneben oder darunter Platz: "karte" und
   "randlos" eine 230-px-Personenspalte, "mitte" eine 760-px-Achse
   in der Bahnmitte. Steht in der Bahn genau ein kurzes Zitat,
   ist dieser Platz leer — das war auf
   /leistungen/webseite-erstellen-lassen zweimal der Befund.

   Hier gibt es keinen Platz daneben, weil es kein Daneben gibt:
   Das Zitat laeuft linksbuendig ueber die volle Inhaltsbreite und
   ist gross genug, dass es sie auch braucht. Die Person steht
   darunter als Fusszeile hinter einer Haarlinie.

   Linksbuendig und nicht mittig: Jede andere Bahn dieser Seite
   ist linksbuendig gesetzt. Mittiger Text war in der Fassung
   "mitte" die Ausnahme; hier folgt die Bahn wieder dem Haus.
   ============================================================ */
.cd-stimmen--a-gross .cd-bahn__inhalt {
  display: flex;
  flex-direction: column;
}
.cd-stimmen--a-gross .cd-stimmen__kopf { display: contents; }
.cd-stimmen--a-gross .cd-stimmen__kopftext {
  order: 1;
  margin-block-end: var(--cd-a5);
}
.cd-stimmen--a-gross .cd-stimmen__spur { order: 2; }
.cd-stimmen--a-gross .cd-stimmen__fortschritt { order: 3; }
/* Am Anfang der Zeile und nicht rechts: Die ganze Bahn ist an der
   linken Kante ausgerichtet, die Knoepfe gehoeren an dieselbe. */
.cd-stimmen--a-gross .cd-stimmen__bedienung {
  order: 4;
  justify-content: flex-start;
  margin-block-start: var(--cd-a5);
}

.cd-stimmen--a-gross .cd-stimmen__karte {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  background: none;
  border: 0;
}

/* clamp statt fester Groesse: Zwischen 390 und 1440 px Fenster
   liegt bei diesem Grad der Unterschied zwischen "fuellt die
   Zeile" und "drei Woerter je Zeile". Die 3.1vw sind so gewaehlt,
   dass das Zitat bei 1200 px Inhaltsbreite auf etwa 55 bis 60
   Zeichen je Zeile kommt — darueber wird eine Zeile schwer
   zurueckzufinden. */
.cd-stimmen--a-gross .cd-stimmen__marke {
  font-size: 56px;
  margin-block-end: 20px;
}
.cd-stimmen--a-gross .cd-stimmen__zitat p {
  /* 2.7vw statt 3.1 und Deckel 34 statt 40 px. Die Rechnung
     dahinter bleibt: bei 1200 px Inhaltsbreite sollen 55 bis 60
     Zeichen in eine Zeile passen — mit dem kleineren Grad werden
     es etwa 62, was noch im Rahmen liegt. */
  font-size: clamp(20px, 2.7vw, 34px);
  line-height: 1.36;
  letter-spacing: -.02em;
  max-inline-size: none;
}

/* Die Fusszeile. Die Linie sitzt an der Person und nicht als
   eigenes Element im Markup: Sie trennt Zitat von Urheber, und
   das ist genau die Kante der Person. */
.cd-stimmen--a-gross .cd-stimmen__person {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-block-start: var(--cd-a6);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-st-karterand);
}
.cd-stimmen--a-gross .cd-stimmen__logo {
  margin-block-end: 0;
  block-size: 52px;
  inline-size: auto;
  max-inline-size: 160px;
}

/* Name und Firma in EINER Zeile statt uebereinander — eine
   Fusszeile mit zwei Stockwerken waere keine mehr.
   Getrennt wird mit einem Strich und nicht mit einem Mittelpunkt
   aus `content`: Ein eingefuegtes Zeichen landet im vorgelesenen
   Namen der Zeile ("Punkt Immobilien und Finanzbetreuung"). */
.cd-stimmen--a-gross .cd-stimmen__quelle {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
}
.cd-stimmen--a-gross .cd-stimmen__name { margin-block-end: 0; }
.cd-stimmen--a-gross .cd-stimmen__firma,
.cd-stimmen--a-gross .cd-stimmen__rolle {
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--cd-st-karterand);
}

@media (max-width: 700px) {
  .cd-stimmen--a-gross .cd-stimmen__marke {
    font-size: 44px;
    margin-block-end: 12px;
  }
  /* Untereinander und ohne Trennstriche: Neben einem 160-px-Logo
     bleiben von 358 px Zeile keine 180 uebrig, und ein Strich vor
     einer umgebrochenen Zeile steht in der Luft. */
  .cd-stimmen--a-gross .cd-stimmen__person {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-block-start: var(--cd-a5);
  }
  .cd-stimmen--a-gross .cd-stimmen__quelle {
    flex-direction: column;
    gap: 4px;
  }
  .cd-stimmen--a-gross .cd-stimmen__firma,
  .cd-stimmen--a-gross .cd-stimmen__rolle {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}