/* VERMAS · Projektfassung 3
 * 1. Ein gemeinsamer, 200px hoher Seitenkopf statt verschieden großer Bilder.
 * 2. Einleitungen bleiben vollständig und zentriert unmittelbar darunter.
 * 3. Wiederholte Karten nutzen Blau, Grün und Hellblau als dezente Akzente.
 * Die angefragten Komponenten werden verfeinert. Die äußeren Kartenraster bleiben.
 */

/* KI-Motive sind dekorativ. Der sichtbare Herkunftshinweis liegt separat
 * über dem Motiv und bleibt damit bei jedem Bildzuschnitt lesbar. */
body.quality-layout.r45-layout {
  --life-hero-photo: url('../img/ai/header-service.png');
}
body.quality-layout.r45-layout[data-section="privat"] { --life-hero-photo: url('../img/ai/header-privat.png'); }
body.quality-layout.r45-layout[data-section="firmen"],
body.quality-layout.r45-layout[data-section="unternehmen"] { --life-hero-photo: url('../img/ai/header-firmen.png'); }
body.quality-layout.r45-layout[data-section="ratgeber"],
body.quality-layout.r45-layout[data-section="kontakt"],
body.quality-layout.r45-layout[data-section="service"] { --life-hero-photo: url('../img/ai/header-service.png'); }

body.quality-layout.r45-layout .page-hero.r45-page-hero {
  box-sizing: border-box;
  height: 200px;
  min-height: 200px;
  padding: 22px 24px 30px;
  background-color: #394a94;
  background-image: linear-gradient(105deg, #24336fe0, #394a94cf 58%, #24336fd9), var(--life-hero-photo);
  background-size: cover;
  background-position: center, center 46%;
  box-shadow: inset 0 -3px #9ebd3d;
}
body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-hero-copy {
  width: 100%;
  max-width: 1120px;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}
body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-hero-copy .eyebrow {
  margin: 0 auto 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
}
body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-hero-copy h1 {
  width: 100%;
  max-width: 36ch;
  margin: 0 auto;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.16;
  text-wrap: balance;
}
/* Identische Größe und Motivbehandlung auch auf rechtlichen Unterseiten. */
body.quality-layout.r45-layout.r45-page--legal .page-hero.r45-page-hero {
  background-image: linear-gradient(105deg, #24336fe0, #394a94cf 58%, #24336fd9), var(--life-hero-photo);
}
body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-ai-mark {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 7px;
  border: 1px solid #ffffff52;
  border-radius: 4px;
  background: #17244bd9;
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .03em;
}
body.quality-layout.r45-layout main .r45-page-intro {
  width: min(calc(100% - 48px), 1120px);
  margin: 28px auto 32px;
  color: #505b70;
}
body.quality-layout.r45-layout main .r45-page-intro > p {
  max-width: 76ch;
  margin: 12px auto 0;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
}
@media (max-width: 600px) {
  body.quality-layout.r45-layout .page-hero.r45-page-hero { padding-inline: 20px; }
  body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-hero-copy h1 { font-size: 22px; line-height: 1.16; }
  body.quality-layout.r45-layout main .r45-page-intro { width: calc(100% - 40px); }
}


/* V3: helle Karten, gleichmäßige Kacheln und weiche Aufklappbereiche. */
/* Die vorhandenen drei Fotokacheln der Startseite behalten exakt ihre
 * bisherige Behandlung. Sie gehören nicht zur hellen Kartenüberarbeitung. */
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone="blue"] { --vermas-card-surface: #394a94; --vermas-card-ink: #fff; --vermas-card-wash: #394a94f0; }
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone="green"] { --vermas-card-surface: #9ebd3d; --vermas-card-ink: #24336f; --vermas-card-wash: #9ebd3df0; }
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone="sky"] { --vermas-card-surface: #83c4d6; --vermas-card-ink: #24336f; --vermas-card-wash: #83c4d6f0; }
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone],
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone]:is(:hover, :focus-within) {
  background: var(--vermas-card-surface) !important; color: var(--vermas-card-ink) !important;
  border-color: var(--vermas-card-surface); box-shadow: 0 10px 26px #24336f16;
}
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone] :is(h2, h3, h4, p, strong, span, address, blockquote, cite, figcaption, li, em, small, time, a:not(.button)) { color: var(--vermas-card-ink) !important; }
body.quality-layout.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone]:is(:hover, :focus-within) { box-shadow: 0 12px 30px #24336f26, inset 0 0 0 2px #ffffff66; }
body.quality-layout.home-r42.r45-layout [data-vermas-group] > .r42-audience-card[data-vermas-card][data-vermas-tone]::before { background: linear-gradient(90deg, var(--vermas-card-wash) 0%, var(--vermas-card-wash) 40%, transparent 100%); }

/* 1. Gemeinsame helle Karten. Ausschließlich die bestehenden Farbgruppen
 * werden angesprochen; ihre Raster und Reihenfolge werden nicht verändert.
 * Die Fotokacheln der Startseite sind ausdrücklich ausgenommen. */
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card),
body.quality-layout.r45-layout main :is(.career-card, .navigation-topic, .guide-card, .security-topic, .editorial-subcard, .finance-types),
body.quality-layout.r45-layout main .finance-contact-grid > article {
  --vermas-card-ink: #24336f;
  --vermas-card-surface: #fff;
  background: linear-gradient(90deg, #394a94 0 33.333%, #9ebd3d 33.333% 66.666%, #83c4d6 66.666%) top / 100% 3px no-repeat,
    radial-gradient(ellipse at 0% 0%, #83c4d61c, transparent 62%),
    radial-gradient(ellipse at 100% 100%, #9ebd3d14, transparent 62%), #ffffffed !important;
  color: #24336f !important;
  border-color: #394a9421;
  border-radius: 20px;
  box-shadow: 0 10px 32px #24336f0b, inset 0 1px #fff;
  transition: box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card):is(:hover, :focus-within),
body.quality-layout.r45-layout main :is(.career-card, .navigation-topic, .guide-card, .security-topic):is(:hover, :focus-within) {
  background: linear-gradient(90deg, #394a94 0 33.333%, #9ebd3d 33.333% 66.666%, #83c4d6 66.666%) top / 100% 3px no-repeat,
    radial-gradient(ellipse at 0% 0%, #83c4d625, transparent 62%),
    radial-gradient(ellipse at 100% 100%, #9ebd3d1c, transparent 62%), #fff !important;
  border-color: #83c4d6a6;
  box-shadow: 0 15px 38px #24336f14, inset 0 1px #fff;
  translate: none;
  transform: none;
}
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card) :is(h2, h3, h4, p, strong, span, address, blockquote, cite, figcaption, li, em, small, time, a:not(.button)) {
  color: var(--vermas-card-ink) !important;
}
/* Primary links remain distinguishable and readable on the light surfaces. */
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card) .button,
body.quality-layout.r45-layout main :is(.career-card, .security-next, .finance-contact-grid) .button {
  background: #394a94 !important;
  color: #fff !important;
  border-color: #394a94;
  border-radius: 10px;
  box-shadow: 0 5px 14px #394a941f;
}
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card) .button *,
body.quality-layout.r45-layout main :is(.career-card, .security-next, .finance-contact-grid) .button * { color: inherit !important; }
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card) .button:is(:hover, :focus-visible),
body.quality-layout.r45-layout main :is(.career-card, .security-next) .button:is(:hover, :focus-visible) { background: #24336f !important; }

/* 2. Privat- und Servicekacheln: ein mittiges Symbol, gleiche Schrift, gleiche
 * Titelzeile und eine gemeinsame Unterkante für den weiterführenden Link. */
body.quality-layout.r45-layout main .navigation-topics > .navigation-topic {
  position: relative; display: grid; grid-template-rows: 64px 1fr auto;
  align-content: stretch; align-items: center; justify-items: center;
  min-height: 228px; padding: 26px; gap: 16px;
}
body.quality-layout.r45-layout main .navigation-topic::after { display: none; }
body.quality-layout.r45-layout main .navigation-topics > .navigation-topic > img {
  position: static; inset: auto; display: block;
  width: 56px; height: 56px; padding: 0; margin: 0 auto;
  align-self: center; justify-self: center; object-fit: contain;
  border-radius: 12px; background: transparent;
}
body.quality-layout.r45-layout main .navigation-topics > .navigation-topic > strong {
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 24ch; min-height: 2.5em; margin: 0 auto;
  font: 400 clamp(22px, 1.8vw, 26px) / 1.25 Georgia, serif;
  color: #24336f !important;
}
body.quality-layout.r45-layout main .navigation-topics > .navigation-topic > span {
  width: 100%; margin: 0 auto; font: 700 14px / 1.5 Arial, sans-serif;
  color: #394a94 !important;
}

/* 3. Karriere: zwei ruhige, gleich aufgebaute Karten; alle vorhandenen
 * Bewerbungswege und die Kontaktadresse bleiben an ihrem Platz enthalten. */
body.quality-layout.r45-layout main .career-options > .career-card {
  display: grid; grid-template-rows: minmax(68px, auto) minmax(64px, 1fr) auto minmax(24px, auto);
  align-items: center; justify-items: center; gap: 12px;
  padding: clamp(26px, 3vw, 38px);
}
body.quality-layout.r45-layout main .career-options > .career-card > h3 {
  grid-row: 1; margin: 0 auto;
  font: 400 clamp(24px, 2vw, 28px) / 1.25 Georgia, serif;
}
body.quality-layout.r45-layout main .career-options > .career-card > p:first-of-type { grid-row: 2; margin: 0 auto; line-height: 1.7; }
body.quality-layout.r45-layout main .career-options > .career-card > .button { grid-row: 3; margin: 0; }
body.quality-layout.r45-layout main .career-options > .career-card > p:last-child:not(:first-of-type) { grid-row: 4; margin: 0 auto; font-size: 14px; }

/* 4. Aufklappbereiche: kompakt geschlossen, klare Mitte und genug Abstand
 * für Themen und Anzahl. Das optionale JS animiert ausschließlich die Höhe. */
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion) {
  box-sizing: border-box; min-height: 0 !important; padding: 0;
  width: 100%; margin: 12px auto; overflow: hidden;
  border: 1px solid #83c4d66e; border-radius: 16px !important;
  background: #ffffffec !important; color: #24336f !important;
  box-shadow: 0 5px 18px #24336f06;
}
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion) > summary {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 52px; min-height: 0;
  list-style: none; cursor: pointer;
  font: 600 17px / 1.4 Arial, sans-serif;
  background: linear-gradient(115deg, #83c4d612, #ffffffb3 50%, #9ebd3d10) !important;
  color: #24336f !important;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion) > summary::-webkit-details-marker { display: none; }
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion) > summary::after {
  content: "⌄"; position: absolute; inset: 50% 16px auto auto;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 50%; background: #83c4d626;
  color: #394a94; font: 400 22px / 1 Arial, sans-serif;
  transform: translateY(-50%); transition: transform .26s ease;
}
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion)[open] > summary {
  background: linear-gradient(115deg, #83c4d626, #ffffffb3 50%, #9ebd3d20) !important;
  box-shadow: inset 0 -1px #83c4d63b;
}
body.quality-layout.r45-layout main :is(.topic-directory details, details.service-check, .v3-accordion)[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
body.quality-layout.r45-layout main .v3-accordion > summary:focus-visible { outline-offset: -4px; border-radius: 14px; }
body.quality-layout.r45-layout main .v3-accordion-panel { width: 100%; }
body.quality-layout.r45-layout main details.service-check > .v3-accordion-panel { padding: 6px 24px 24px; }
body.quality-layout.r45-layout main .topic-directory .v3-accordion-panel > ul { padding: 14px 20px 20px; gap: 8px 14px; }
body.quality-layout.r45-layout main .topic-directory .v3-accordion-panel li > a {
  padding: 13px 14px; border: 1px solid #83c4d640; border-radius: 10px;
  background: #fff; text-decoration: none; color: #394a94;
  transition: border-color .2s ease, background-color .2s ease;
}
body.quality-layout.r45-layout main .topic-directory .v3-accordion-panel li > a:is(:hover, :focus-visible) { background: #edf5f7; border-color: #83c4d6; }

/* 5. Sicherheit: bestehender Abschluss mit sichtbarer Überschrift, weichen
 * Ecken und dezenten CI-Verläufen anstelle des dunklen, kantigen Kastens. */
body.quality-layout.r45-layout main .security-next {
  min-height: 0; padding: clamp(28px, 4vw, 46px);
  border: 1px solid #83c4d680; border-radius: 24px;
  background: radial-gradient(ellipse at 0% 0%, #83c4d62e, transparent 60%),
    radial-gradient(ellipse at 100% 100%, #9ebd3d26, transparent 60%), #ffffffeb;
  box-shadow: 0 12px 34px #24336f0c;
  color: #24336f;
}
body.quality-layout.r45-layout main .security-next :is(h2, p) { color: #24336f !important; }
body.quality-layout.r45-layout main .security-next::before { background: transparent; }
body.quality-layout.r45-layout main .security-next .security-actions { justify-content: center; }

/* 6. Finanzierung: eine durchgehende Gestaltung für die Angebotsübersicht
 * und beide Partner. Logos, Adressen und alle Kontaktdaten bleiben unverändert. */
body.quality-layout.r45-layout main .finance-types { display: block; }
body.quality-layout.r45-layout main .finance-types ul { padding-inline: 0; list-style: none; }
body.quality-layout.r45-layout main .finance-types li {
  margin: 7px 0; padding: 9px 12px; border-radius: 9px;
  background: #83c4d614; color: #24336f;
}
body.quality-layout.r45-layout main .finance-types li:nth-child(3n + 2) { background: #9ebd3d17; }
body.quality-layout.r45-layout main .finance-types li:nth-child(3n) { background: #394a940d; }
body.quality-layout.r45-layout main .finance-contacts > h2 { color: #24336f !important; }
body.quality-layout.r45-layout main .finance-contact-grid > article :is(h3, p, a) { color: #24336f !important; }
body.quality-layout.r45-layout main .finance-contact-grid .original-image { background: #ffffffb3; border-radius: 12px; }

/* 7. Ratgeber: neun verschiedene Fotos. Der Hinweis liegt über dem Bild und
 * wird von einem Zuschnitt nicht abgeschnitten. Der alte Icon-Fallback bleibt. */
body.quality-layout.r45-layout main .guide-directory > h2 { color: #24336f !important; }
body.quality-layout.r45-layout main .guide-directory .guide-card > div {
  display: flex; flex: 1; flex-direction: column; align-items: center; padding: 24px;
}
body.quality-layout.r45-layout main .guide-directory .guide-card h3 {
  min-height: 2.5em; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font: 400 clamp(22px, 1.8vw, 26px) / 1.25 Georgia, serif;
  color: #24336f !important;
}
body.quality-layout.r45-layout main .guide-directory .guide-card p { color: #505b70 !important; line-height: 1.65; }
body.quality-layout.r45-layout main .guide-directory .guide-card > div > span {
  position: relative; display: flex; justify-content: center; width: 100%;
  margin-top: auto; padding: 16px 24px 0; color: #394a94 !important;
}
body.quality-layout.r45-layout main .guide-directory .guide-card > div > span > b { position: absolute; right: 0; }
body.quality-layout.r45-layout main .guide-directory .guide-card figure.v3-guide-media {
  position: relative; display: block; width: 100%; height: 180px;
  max-width: none; margin: 0; padding: 0; overflow: hidden; background: #edf5f7;
}
body.quality-layout.r45-layout main .guide-directory .guide-card figure.v3-guide-media > img {
  display: block; width: 100%; height: 100%; max-width: none;
  margin: 0; padding: 0; object-fit: cover; object-position: center;
}
body.quality-layout.r45-layout main .guide-directory .guide-card figure.v3-guide-media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #394a94 0 33.333%, #9ebd3d 33.333% 66.666%, #83c4d6 66.666%);
}
body.quality-layout.r45-layout main .guide-directory .guide-grid > .guide-card figure.v3-guide-media > figcaption.v3-ai-label {
  position: absolute; right: 9px; bottom: 9px; width: auto;
  margin: 0; padding: 3px 7px; border-radius: 5px;
  background: #17244be6; color: #fff !important;
  font: 500 10px / 1.4 Arial, sans-serif; letter-spacing: .02em;
}
@media (max-width: 600px) {
  body.quality-layout.r45-layout main .topic-directory .v3-accordion-panel > ul { grid-template-columns: minmax(0, 1fr); }
  body.quality-layout.r45-layout main .navigation-topics > .navigation-topic { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.quality-layout.r45-layout main :is(.v3-accordion, .navigation-topic, .guide-card, .career-card),
  body.quality-layout.r45-layout main .v3-accordion > summary::after { animation: none !important; transition: none !important; }
}
@media print {
  body.quality-layout.r45-layout .page-hero.r45-page-hero { background: #fff; color: #24336f; box-shadow: none; }
  body.quality-layout.r45-layout .page-hero.r45-page-hero .r45-hero-copy :is(h1, p) { color: #24336f; }
  body.quality-layout.r45-layout main .v3-accordion { height: auto !important; overflow: visible; }
}

/* V4 · Firmenfotos und unverfälschte Teamproportionen.
 * Die bestehenden Seitenköpfe, Texte, Links und äußeren Raster bleiben bestehen.
 * Keine Laufzeit-Manipulation der Fotos: Bilder und Kennzeichnungen stehen im HTML.
 */

/* Nur EINE obere Farbleiste: die vorhandene dreifarbige Hintergrundlinie.
 * Historische .text-card- und .team-card-Regeln legen zusätzlich eine feste
 * blaue/grüne Oberkante darüber. Ihre Breite wird hier gezielt aufgehoben.
 * Seiten- und Unterkanten sowie die Fotokacheln der Startseite bleiben erhalten.
 */
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone]:not(.r42-audience-card) {
  border-top: 0 !important;
}

/* Firmenübersicht: sechs neue Motive und beide vorhandenen Originalfotos.
 * Kein .text-card-Padding mehr um die Fotos; alle acht beginnen auf gleicher Höhe.
 * Lange Texte dürfen die Karten weiterhin vergrößern: nichts wird abgeschnitten.
 */
body.quality-layout.r45-layout main .article-cards > .v4-business-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}
body.quality-layout.r45-layout main .article-cards > .v4-business-card > .card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}
body.quality-layout.r45-layout main .v4-business-card .card-copy :is(h3, p, .article-meta) {
  margin: 0;
}
body.quality-layout.r45-layout main .v4-business-card .card-copy h3 {
  width: 100%;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 clamp(21px, 1.7vw, 25px) / 1.25 Georgia, serif;
}
body.quality-layout.r45-layout main .v4-business-card .card-copy .button {
  align-self: center;
  margin-top: auto;
}

/* Geschäftskunden: dieselben Themenfotos statt reiner Textkästen.
 * Die vorhandenen sechs Linkziele und ihre Bezeichnungen bleiben unverändert.
 */
body.quality-layout.r45-layout main .company-links > .v4-business-link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
}
body.quality-layout.r45-layout main .company-links > .v4-business-link > .v4-business-title {
  display: grid;
  place-items: center;
  flex: 1;
  padding: 22px 24px;
  font: 400 clamp(21px, 1.7vw, 25px) / 1.3 Georgia, serif;
}

/* Gemeinsamer Bildrahmen nur für Firmen-Themenbilder, nie für Mitarbeiter.
 * Die Leiste über dem Foto verwendet ausschließlich die drei VERMAS-Farben.
 * Das bestehende Vermögensmotiv wird für denselben Themenlink wiederverwendet.
 */
body.quality-layout.r45-layout main figure.v4-business-media {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  height: 180px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #edf5f7;
}
body.quality-layout.r45-layout main figure.v4-business-media > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: cover !important;
  object-position: center;
  transform: none;
}
body.quality-layout.r45-layout main figure.v4-business-media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #394a94 0 33.333%, #9ebd3d 33.333% 66.666%, #83c4d6 66.666%);
}
body.quality-layout.r45-layout main [data-vermas-group] > [data-vermas-card][data-vermas-tone] figure.v4-business-media > figcaption.v4-ai-label {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 1;
  width: auto;
  margin: 0;
  padding: 3px 7px;
  border: 1px solid #ffffff52;
  border-radius: 5px;
  background: #17244be6;
  color: #fff !important;
  font: 500 10px / 1.4 Arial, sans-serif;
  letter-spacing: .02em;
}

/* Team · Korrektur 4.1: einheitliche Karten und Bildflächen.
 * Der Rahmen ist immer 3:2; object-fit:contain zeigt darin das GANZE Originalfoto
 * in dessen eigenem Seitenverhältnis. Abweichende Formate bekommen Freiraum,
 * statt Personen zu beschneiden, zu verzerren oder individuell zu vergrößern.
 * Native Bildmaße im HTML und die unveränderten Originaldateien bleiben erhalten.
 * Stretch + flex:1 richten auch Profilbereiche und Buttons innerhalb jeder Reihe
 * aus. Geöffnete Profile und lange Inhalte dürfen die Karten weiterhin vergrößern.
 */
body.quality-layout.r45-layout.r45-page--team main .team-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}
body.quality-layout.r45-layout.r45-page--team main .team-grid > .team-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: auto;
}
body.quality-layout.r45-layout.r45-page--team main .team-card > .portrait {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  padding: 0;
  background: transparent;
}
body.quality-layout.r45-layout.r45-page--team main .team-card > .portrait > img {
  position: absolute;
  inset: 3px 0 0;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100% - 3px) !important;
  max-height: none;
  aspect-ratio: auto;
  margin: 0;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  scale: none;
}
body.quality-layout.r45-layout.r45-page--team main .team-card > .team-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}
body.quality-layout.r45-layout.r45-page--team main .team-card-copy > h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5em;
  line-height: 1.25;
}
body.quality-layout.r45-layout.r45-page--team main .team-card-copy > .team-role {
  min-height: 3em;
  line-height: 1.5;
}
body.quality-layout.r45-layout.r45-page--team main .team-card-copy > .team-details {
  margin-top: auto;
}