.quotes-main{padding-top:90px;background:var(--blue-ice);color:#063452}
.quotes-hero{min-height:0;padding:var(--section-top-space) 5vw 75px;background:var(--blue-electric);color:#fff;display:grid;grid-template-columns:1fr .8fr;column-gap:8vw;row-gap:0;align-items:start}
.quotes-hero>.index{margin-bottom:0}
.quotes-hero .index{color:#eaf7ff;grid-column:1/-1}
.quotes-hero h1{margin:0;font-size:clamp(42px,6vw,82px)}
.quotes-hero p:last-child{max-width:580px;font-size:18px;line-height:1.7;color:#eaf7ff;margin:0}
.quotes-intro{padding:70px 5vw 30px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end}
.quotes-intro h2{font-size:clamp(30px,4vw,56px);margin:0}
.quotes-intro p{font-size:17px;line-height:1.7;color:#164d63;margin:0}
.quotes-grid{padding:40px 5vw 110px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.quote-card{min-width:0;padding:32px;display:grid;grid-template-columns:120px 1fr;gap:26px;color:#063452;border:1px solid #06345222;box-shadow:0 14px 35px #00567d18}
.quote-card:nth-child(5n+1){background:var(--blue-deep);color:#fff}
.quote-card:nth-child(5n+2){background:var(--blue-electric);color:#fff}
.quote-card:nth-child(5n+3){background:var(--blue-cyan)}
.quote-card:nth-child(5n+4){background:var(--blue-aqua)}
.quote-card:nth-child(5n+5){background:var(--blue-ice)}

/* Schwarz liefert auf dem electric-blue Hero den stärksten Textkontrast. */
.quotes-hero .index{color:#000}

/* Textkontrast wird zentral in styles.css gesteuert. */
.quote-photo{width:120px;aspect-ratio:1/1;background:#ffffff55;border:2px dashed currentColor;display:grid;place-items:center;text-align:center;padding:12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.quote-card blockquote{margin:0 0 26px;font-size:clamp(22px,2.2vw,32px);font-weight:700;line-height:1.25}
.quote-card blockquote:before{content:"“"}
.quote-card blockquote:after{content:"”"}
.quote-meta{display:grid;gap:12px;margin:0}
.quote-meta div{border-top:1px solid currentColor;padding-top:10px}
.quote-meta dt{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.quote-meta dd{margin:4px 0 0;font-size:14px;font-weight:700;line-height:1.45}
.quote-source{margin-top:20px;min-height:44px;border:1px solid currentColor;padding:11px 14px;display:inline-flex;align-items:center;font-size:12px;font-weight:700}
.quote-note{padding:0 5vw 90px;color:#164d63;font-size:13px;line-height:1.6}
@media(max-width:850px){.quotes-hero,.quotes-intro{grid-template-columns:1fr}.quotes-grid{grid-template-columns:1fr}.quotes-hero{min-height:380px}}
@media(max-width:560px){.quotes-main{padding-top:74px}.quotes-hero{padding:65px 22px 55px}.quotes-intro{padding:55px 22px 24px}.quotes-grid{padding:28px 22px 90px}.quote-card{grid-template-columns:1fr;padding:24px}.quote-photo{width:96px}.quotes-hero h1{font-size:38px}}

/* Quote page typography follows the global scale in styles.css */
.quotes-hero h1{font-size:var(--type-h1)!important;line-height:var(--leading-h1)!important}
.quotes-intro h2{font-size:var(--type-h2)!important;line-height:var(--leading-h2)!important}
.quotes-hero p:last-child{font-size:var(--type-lead)!important;line-height:var(--leading-lead)!important}
.quotes-intro p{font-size:var(--type-body)!important;line-height:var(--leading-body)!important;max-width:68ch}
.quote-photo,.quote-meta dt,.quote-note{font-size:var(--type-small)!important}
.quote-photo,.quote-meta dt,.quote-source{font-weight:var(--font-bold)!important}
.quote-meta dd{font-size:var(--type-body)!important;font-weight:var(--font-regular)!important;line-height:1.55!important}
.quote-source{font-size:var(--type-button)!important;line-height:1.3!important}