/* Eigene Arbeiten im vorhandenen Designsystem; die violette Farbwelt bleibt im Werk. */
.visual-breadcrumb { margin-bottom: var(--space-5); color: var(--color-ink-3); font-size: var(--text-small); }
.visual-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.visual-breadcrumb a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.visual-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-7); }
.visual-intro h1 { font-size: var(--text-h2); margin-bottom: var(--space-5); }
.visual-intro .lead { margin-bottom: var(--space-5); }
.visual-intro a[download] { display: inline-block; padding-block: .7rem; color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.visual-intro figure, .visual-study figure { margin: 0; }
.visual-intro img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.visual-intro figcaption, .visual-study figcaption { color: var(--color-ink-3); font-size: var(--text-small); margin-top: var(--space-3); }
.visual-note { margin-top: var(--space-6); padding: var(--space-5); background: var(--color-surface-alt); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.visual-note h2 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.visual-note p { max-width: 85ch; }
.visual-nav { display: flex; flex-wrap: wrap; gap: .65rem 1.25rem; margin-top: var(--space-5); }
.visual-nav a, .visual-contact a, .visual-study__copy a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.visual-study { min-width: 0; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); scroll-margin-top: 6rem; }
.visual-study__image { display: block; background: #f6f3ed; }
.visual-study__image img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: contain; }
.visual-study__copy { padding: var(--space-5); }
.visual-study > figure > figcaption { padding-inline: var(--space-5); }
.visual-study details figure { margin-top: var(--space-4); }
.visual-study h3 { font-size: var(--text-h3); margin-block: var(--space-3) var(--space-4); }
.visual-study__copy > p:not(.case-label) { color: var(--color-ink-2); }
.visual-study details { margin-top: var(--space-5); border-top: 1px solid var(--color-line); }
.visual-study summary { padding-block: var(--space-4); cursor: pointer; color: var(--color-accent-strong); font-weight: 600; }
.visual-study details p { color: var(--color-ink-2); margin-top: var(--space-4); }
.visual-contact { max-width: 75ch; }
.visual-contact h2 { font-size: var(--text-h2); margin-bottom: var(--space-5); }
.visual-page :focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 4px; }
.visual-page .skip-link:focus { z-index: 300; }
@media (max-width: 760px) {
  .visual-intro, .visual-grid { grid-template-columns: minmax(0, 1fr); }
  .visual-intro { gap: var(--space-6); }
  .visual-study__copy { padding: var(--space-4); }
  .visual-intro .btn-row { align-items: stretch; }
}
@media print {
  .visual-grid { grid-template-columns: minmax(0, 1fr); }
  .visual-study { break-inside: avoid; }
}