/* Studio About: Layoutvarianten (bis 14.10. per ?a=1..5, seit 14.10. fest 5 per data-about im html-Tag). Buttons = .action-button aus about.html (styles.css), hier nur umgefärbt. */
.sa { margin: 0 0 2rem; }
.sa-name { appearance: none; background: none; border: 0; padding: 0; margin: 0 0 0.8rem; font: inherit; color: var(--text-color); text-align: left; cursor: default; display: block; }
.sa-photo { margin: 0; }
.sa-photo img { display: block; width: 100%; height: auto; max-width: none; margin: 0; }
.sa-links { list-style: none; margin: 0; padding: 0; }
.sa-links li, .sa-links li::before { margin: 0; }
.sa-links li::before { content: none; }
.sa-label { color: var(--text-color); }
.about-switcher { display: none; }
html[data-schalter] .about-switcher { display: flex; position: fixed; left: 12px; bottom: 12px; z-index: 100000; }
.about-switcher button { appearance: none; width: 2.4rem; height: 2.4rem; margin-left: -1px; font: inherit; cursor: pointer; background: var(--background-color); color: var(--text-color); border: 1px solid var(--text-color); }
.about-switcher button[aria-pressed="true"] { background: var(--text-color); color: var(--background-color); }

/* Buttons: Form wie about.html, Farben aus Theme (dunkel lesbar) */
html[data-theme^="studio"] .sa .action-button { margin: 0; padding: 0; }
html[data-theme^="studio"] .sa .action-button a { background: transparent; border-color: var(--text-color); color: var(--text-color); }
html[data-theme^="studio"] .sa .action-button a:hover { background: var(--text-color); }
html[data-theme^="studio"] .sa .action-button a:hover .action-button-text { color: var(--background-color) !important; text-shadow: none !important; }

/* 1 Liste */
html[data-about="1"] .sa { display: grid; grid-template-columns: 1fr minmax(8rem, 16rem); column-gap: 2rem; align-items: start; }
html[data-about="1"] .sa-name { grid-column: 1; grid-row: 1; }
html[data-about="1"] .sa-links { grid-column: 1; grid-row: 2; border-top: 1px solid var(--text-color); }
html[data-about="1"] .sa-photo { grid-column: 2; grid-row: 1 / span 2; }
html[data-about="1"] .sa-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--text-color); }

/* 2 Buttons */
html[data-about="2"] .sa-label { display: none; }
html[data-about="2"] .sa-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
html[data-about="2"] .sa-name { margin-bottom: 1rem; }
html[data-about="2"] .sa-links { order: 2; }
html[data-about="2"] .sa { display: flex; flex-direction: column; }
html[data-about="2"] .sa-photo { order: 3; }
html[data-about="2"] .sa-photo img { max-height: 60vh; object-fit: cover; }

/* 3 Split */
html[data-about="3"] .sa { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; align-items: start; }
html[data-about="3"] .sa-name { grid-column: 2; grid-row: 1; font-size: 1.2em; }
html[data-about="3"] .sa-photo { grid-column: 1; grid-row: 1 / span 2; }
html[data-about="3"] .sa-links { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
html[data-about="3"] .sa-label { display: none; }
html[data-about="3"] .sa .action-button-text { font-size: clamp(1.4rem, 3.2vw, 3rem) !important; }
html[data-about="3"] .sa .action-button a { padding: 0.6em 1.1em; }

/* 4 Minimal */
html[data-about="4"] .sa-label { display: none; }
html[data-about="4"] .sa-name { cursor: pointer; font-size: 1.2em; text-decoration: underline; text-underline-offset: 0.2em; }
html[data-about="4"] .sa-photo { max-height: 0; overflow: hidden; opacity: 0; transition: opacity .35s ease, max-height .35s ease; }
html[data-about="4"] .sa-photo img { max-width: 22rem; }
html[data-about="4"] .sa.open .sa-photo { max-height: 90vh; opacity: 1; margin-bottom: 1rem; }
@media (hover: hover) { html[data-about="4"] .sa:has(.sa-name:hover) .sa-photo { max-height: 90vh; opacity: 1; margin-bottom: 1rem; } }
html[data-about="4"] .sa-links { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { html[data-about="4"] .sa-photo { transition: none; } }

@media (max-width: 768px) {
  html[data-about="1"] .sa { grid-template-columns: 1fr; }
  html[data-about="1"] .sa-photo { grid-column: 1; grid-row: 3; margin-top: 1rem; max-width: 14rem; }
  html[data-about="3"] .sa { grid-template-columns: 1fr; }
  html[data-about="3"] .sa-name, html[data-about="3"] .sa-photo, html[data-about="3"] .sa-links { grid-column: 1; grid-row: auto; }
  html[data-about="3"] .sa-name { order: 0; } html[data-about="3"] .sa-photo { order: 1; margin-bottom: 1rem; } html[data-about="3"] .sa-links { order: 2; }
  html[data-about="3"] .sa .action-button-text { font-size: 1.5rem !important; }
  html[data-about="4"] .sa-photo img { max-width: 100%; }
}

/* 5 CV (Standard): Bild links, rechts Intro, Mail/Instagram mit Pfeil (about-nav-link aus about.html), CV-Liste */
.sa-cv { display: none; }
html[data-about="5"] .sa { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
html[data-about="5"] .sa-name, html[data-about="5"] .sa-links { display: none; }
html[data-about="5"] .sa-photo { grid-column: 1; grid-row: 1; }
html[data-about="5"] .sa-cv { display: block; grid-column: 2; grid-row: 1; }
html[data-about="5"] .sa-cv p { margin: 0 0 1rem; }
html[data-about="5"] .sa-intro p { margin-bottom: 1.5rem; }
html[data-about="5"] .sa-cv h2 { margin: 2rem 0 0.5rem; padding: 0 0 0.4rem; border-bottom: 0.66px solid var(--text-color); font-size: inherit; }
html[data-about="5"] .sa-cv .about-nav-link { padding-left: 0; margin: 0 0 0.6rem; }
html[data-about="5"] .sa-cv .about-nav-link a { background: transparent; color: var(--text-color); }
html[data-about="5"] .sa-cv .about-nav-link a:hover { background: transparent; }
html[data-about="5"] .sa-cv .sa-big a p { font-size: clamp(1.6rem, 3vw, 2.6rem); }
html[data-about="5"] .sa-cv .about-nav-link a p::before { background-image: none; background-color: currentColor; filter: none; -webkit-mask: url('/files/svg/Pfeil_Rechts.svg') center / contain no-repeat; mask: url('/files/svg/Pfeil_Rechts.svg') center / contain no-repeat; }
html[data-about="5"] .sa-request { margin: 0.8rem 0 0; }
html[data-about="5"] .sa-list { line-height: 1.25; }
html[data-about="5"] .sa-clients { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.4rem; }
html[data-about="5"] .sa-clients li { margin: 0; padding: 0; }
html[data-about="5"] .sa-clients li::before { content: none; }
html[data-about="5"] .sa-clients li:not(:last-child)::after { content: ","; }
html[data-about="5"] .sa-rights { margin-top: 2rem; }
@media (max-width: 768px) {
  html[data-about="5"] .sa { grid-template-columns: 1fr; row-gap: 1.5rem; }
  html[data-about="5"] .sa-photo, html[data-about="5"] .sa-cv { grid-column: 1; }
  html[data-about="5"] .sa-cv { grid-row: 2; }
}
/* Foto bleibt in seiner Spalte */
html[data-about="5"] .sa-photo, html[data-about="5"] .sa-photo img { position: static !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; }

/* 14.10.: Knopfreihe Email · Instagram · Impressum · Artistic Practice (ersetzt .about-switcher), Form wie .action-button */
.sa-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.sa-actions .action-button { margin: 0 !important; padding: 0 !important; }