/* Studio-Preview: drei Varianten. Nur Vorschau, nichts im Live-Theme. */ /* ---------- Gemeinsam ---------- */ @font-face { font-family: 'Gramatika Regular'; src: url('../fonts/Gramatika-Regular.woff') format('woff'); font-display: swap; font-weight: normal; } @font-face { font-family: 'Gramatika Bold'; src: url('../fonts/Gramatika-Bold.woff') format('woff'); font-display: swap; font-weight: bold; } @font-face { font-family: 'Hero Condensed'; src: url('../fonts/texgyreheroscn-regular.woff') format('woff'); font-display: swap; } /* Nur Design-Zeilen zeigen (Zeile + folgende Details) */ html[data-theme^="studio"] .project-row:not([data-tags~="design"]), html[data-theme^="studio"] .project-row:not([data-tags~="design"]) + .project-details { display: none !important; } /* Logo-Maske ersetzt durch Textwortmarke */ html[data-theme^="studio"] .studio-wordmark { display: block; text-decoration: none; color: var(--primary-color); font-size: clamp(2.2rem, 9.5vw, 11rem); line-height: 1; margin: 0 0 1.2rem; padding: 0.4rem 0 0; font-family: 'Gramatika Bold', 'Arial Black', sans-serif; font-weight: bold; letter-spacing: -0.02em; } /* Variantenschalter */ .studio-switcher { position: fixed; right: 12px; bottom: 12px; z-index: 100000; display: flex; gap: 0; font-family: 'Gramatika Bold', sans-serif; } .studio-switcher button { appearance: none; border: 1px solid #000; background: #fff; color: #000; width: 2.4rem; height: 2.4rem; font: inherit; font-size: 1rem; cursor: pointer; margin-left: -1px; } .studio-switcher button[aria-pressed="true"] { background: #000; color: #fff; } .studio-switcher button:focus-visible { outline: 2px solid #0000FF; outline-offset: 2px; } /* Gemeinsame Hardcode-Overrides (Basis nutzt feste Farben) */ html[data-theme^="studio"], html[data-theme^="studio"] body, html[data-theme^="studio"] body.layout-stable { background-color: var(--background-color) !important; color: var(--text-color) !important; } html[data-theme^="studio"] .project-row { background-color: var(--background-color); border-top-color: var(--line-color); } html[data-theme^="studio"] .project-row::after { border-top-color: var(--line-color); } html[data-theme^="studio"] .project-row:hover { background-color: var(--hover-bg) !important; } html[data-theme^="studio"] header, html[data-theme^="studio"] body:not(.index) header { background-color: var(--background-color) !important; } html[data-theme^="studio"] header a, html[data-theme^="studio"] header a:hover { color: var(--text-color) !important; } html[data-theme^="studio"] .layout-stable .grid-item, html[data-theme^="studio"] .layout-stable img { background-color: transparent !important; } html[data-theme^="studio"] a.underlined-link, html[data-theme^="studio"] .underlined-link:hover { color: var(--text-color) !important; } html[data-theme^="studio"] .project-details a { color: var(--text-color); } html[data-theme^="studio"] .toggle-arrow-icon { filter: var(--arrow-filter, none); } /* ---------- A: Invertiert ---------- */ html[data-theme="studio-a"] { --background-color: #111111; --text-color: #f2f2f2; --primary-color: #f2f2f2; --secondary-color: #9a9a9a; --secondary-color-rgb: 154, 154, 154; --accent-color: #7a8cff; --line-color: #f2f2f2; --hover-bg: #1e1e1e; --arrow-filter: invert(1); } html[data-theme="studio-a"] .project-row { border-top-color: #f2f2f2; } html[data-theme="studio-a"] .studio-wordmark { font-family: 'Gramatika Bold', sans-serif; } html[data-theme="studio-a"] .studio-switcher button { border-color: #f2f2f2; } /* ---------- B: Raster ---------- */ html[data-theme="studio-b"] { --background-color: #ffffff; --text-color: #000000; --primary-color: #000000; --accent-color: #0000FF; --line-color: #000000; --hover-bg: #f2f2f2; --row-padding-top: 0.35rem; --row-padding-bottom: 0.35rem; } html[data-theme="studio-b"] .studio-wordmark { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif; font-weight: normal; letter-spacing: -0.045em; font-size: clamp(2.6rem, 12vw, 14rem); } html[data-theme="studio-b"] .project-row { border-top: 1px solid #000; margin-bottom: -1px; } html[data-theme="studio-b"] .project-row::after { border-top-width: 1px; } html[data-theme="studio-b"] .project-row > div:nth-child(2) { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif; font-weight: normal; letter-spacing: -0.01em; } html[data-theme="studio-b"] .project-row .number-text, html[data-theme="studio-b"] .project-row .design-number, html[data-theme="studio-b"] .project-number { font-family: 'Gramatika Bold', sans-serif; font-size: 1.15em; } /* ---------- C: Akzent ---------- */ html[data-theme="studio-c"] { --background-color: #ffffff; --text-color: #000000; --primary-color: #000000; --accent-color: #0000FF; --line-color: #000000; --hover-bg: #ffffff; } html[data-theme="studio-c"] .studio-wordmark { color: #0000FF; font-family: 'Gramatika Bold', sans-serif; } html[data-theme="studio-c"] h1, html[data-theme="studio-c"] h2, html[data-theme="studio-c"] h3 { font-family: 'Gramatika Regular', sans-serif; font-weight: normal; } html[data-theme="studio-c"] .project-row:hover > div:nth-child(2), html[data-theme="studio-c"] .project-row.is-active > div:nth-child(2) { color: #0000FF; } html[data-theme="studio-c"] .project-row:hover { background-color: #ffffff !important; } html[data-theme="studio-a"] .studio-switcher button { background: #111; color: #f2f2f2; } html[data-theme="studio-a"] .studio-switcher button[aria-pressed="true"] { background: #f2f2f2; color: #111; } /* "View Project"-Knopf: Basis hat #fff Hintergrund, schwarzen Pfeil per filter, Hover = --secondary-color */ html[data-theme^="studio"] .project-view-link a { background-color: var(--background-color); } html[data-theme^="studio"] .project-view-link a:hover { background-color: var(--hover-bg); } html[data-theme="studio-a"] .project-view-link a p::before { filter: brightness(0) invert(1); } html[data-theme="studio-c"] .project-view-link a:hover { color: #0000FF; } /* ---------- D: Raster, schwarz auf hellgrau ---------- */ html[data-theme="studio-d"] { --background-color: #e6e6e6; --text-color: #000000; --primary-color: #000000; --accent-color: #0000FF; --line-color: #000000; --hover-bg: #d9d9d9; --row-padding-top: 0.35rem; --row-padding-bottom: 0.35rem; } html[data-theme="studio-d"] .studio-wordmark { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif; font-weight: normal; letter-spacing: -0.045em; font-size: clamp(2.6rem, 12vw, 14rem); } html[data-theme="studio-d"] .project-row { border-top: 1px solid #000; margin-bottom: -1px; } html[data-theme="studio-d"] .project-row::after { border-top-width: 1px; } html[data-theme="studio-d"] .project-row > div:nth-child(2) { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif; font-weight: normal; letter-spacing: -0.01em; } html[data-theme="studio-d"] .project-row .number-text, html[data-theme="studio-d"] .project-row .design-number, html[data-theme="studio-d"] .project-number { font-family: 'Gramatika Bold', sans-serif; font-size: 1.15em; } /* Wortmarke immer in Versalien, Breite füllt die Zeile (Größe setzt preview-studio.html per JS) */ html[data-theme^="studio"] .studio-wordmark { text-transform: uppercase; white-space: nowrap; letter-spacing: -0.01em; } /* Eine Schrift für den gesamten Text (?f=) */ @font-face { font-family: 'Hero Condensed'; src: url('../fonts/texgyreheroscn-regular.woff') format('woff'); font-display: swap; } html[data-font="texgyre"] body, html[data-font="texgyre"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif !important; } html[data-font="arial"] body, html[data-font="arial"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: Arial, sans-serif !important; } html[data-font="helvetica"] body, html[data-font="helvetica"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Helvetica Neue', Helvetica, sans-serif !important; } html[data-font="times"] body, html[data-font="times"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Times New Roman', Times, serif !important; } /* Schalter zweizeilig */ .studio-switcher { flex-direction: column; align-items: flex-end; gap: 6px; } .studio-switcher .row { display: flex; } .studio-switcher .row.fonts button { width: auto; padding: 0 0.6rem; font-size: 0.8rem; } /* Eine Schrift heißt auch: ein Schnitt, Nummern in Textgröße */ html[data-font] body *:not(.studio-switcher):not(.studio-switcher *) { font-weight: normal !important; } html[data-font] .project-row .number-text, html[data-font] .project-row .design-number, html[data-font] .project-number { font-size: 1em !important; } /* ---------- Weitere Schriften aus fonts/ ---------- */ @font-face { font-family: 'Apoc'; src: url('../fonts/ApocLC-Regular.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Arthemys'; src: url('../fonts/ArthemysDisplayBitmap-Regular.woff') format('woff'); font-display: swap; } @font-face { font-family: 'Panama'; src: url('../fonts/Panama-Regular.woff') format('woff'); font-display: swap; } html[data-font="apoc"] body, html[data-font="apoc"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Apoc', serif !important; } html[data-font="arthemys"] body, html[data-font="arthemys"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Arthemys', monospace !important; } html[data-font="panama"] body, html[data-font="panama"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Panama', sans-serif !important; } /* Wortmarke: Laufweite enger */ html[data-theme^="studio"] .studio-wordmark { letter-spacing: -0.045em; } /* ---------- Kniffe (?k=, kombinierbar) ---------- */ /* invert: Hover und offene Zeile in Negativ */ html[data-k~="invert"] .project-row:hover, html[data-k~="invert"] .project-row.is-active { background-color: var(--text-color) !important; } html[data-k~="invert"] .project-row:hover *, html[data-k~="invert"] .project-row.is-active * { color: var(--background-color) !important; } html[data-k~="invert"] .project-row:hover .toggle-arrow-icon, html[data-k~="invert"] .project-row.is-active .toggle-arrow-icon { filter: invert(1); } /* linie: kräftige Linie unter der Wortmarke und über der Liste */ html[data-k~="linie"] .studio-wordmark { border-bottom: 3px solid var(--text-color); padding-bottom: 0.1em; } html[data-k~="linie"] #projects { border-top: 3px solid var(--text-color); } /* kopf: Tabellenkopf über der Liste */ .studio-tablehead { display: none; } html[data-k~="kopf"] .studio-tablehead { display: grid; grid-template-columns: var(--grid-columns-normal); gap: 1rem; padding: 0.2rem 0; border-bottom: 1px solid var(--text-color); color: var(--text-color); position: sticky; top: var(--header-height, 0); background: var(--background-color); z-index: 5; } /* pills: Disziplin als umrandete Kapsel */ html[data-k~="pills"] .studio-pill { border: 1px solid currentColor; border-radius: 999px; padding: 0 0.5em; line-height: 1.35; white-space: nowrap; } /* caps: Projekttitel in Versalien */ html[data-k~="caps"] .project-row > div:nth-child(2) { text-transform: uppercase; letter-spacing: 0.01em; } /* eng: dichtere Zeilen */ html[data-k~="eng"] .project-row { padding-top: 0.1rem !important; padding-bottom: 0.1rem !important; } /* cursor: Fadenkreuz über der Liste */ html[data-k~="cursor"] #projects, html[data-k~="cursor"] #projects * { cursor: crosshair !important; } /* tabnum: Ziffern gleich breit */ html[data-k~="nr"] body { font-variant-numeric: tabular-nums; } /* ===================================================================== STUDIO – produktive Ergänzungen (13.10.2026) Standard steht in js/studio-config.js, Umschalten per ?schalter=1 ===================================================================== */ /* Logo-Schrift (data-logo), schlägt die Textschrift */ html[data-logo="panama"] body .studio-wordmark.studio-wordmark { font-family: 'Panama', sans-serif !important; font-weight: normal !important; } html[data-logo="texgyre"] body .studio-wordmark.studio-wordmark { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif !important; font-weight: normal !important; } /* Textschriften: Gramatika und Helvetica Bold ergänzen */ html[data-font="gramatika"] body, html[data-font="gramatika"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Gramatika Regular', sans-serif !important; } html[data-font="helvetica-bold"] body, html[data-font="helvetica-bold"] body *:not(.studio-switcher):not(.studio-switcher *) { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: bold !important; } /* Pills schmal und invertiert, ohne die Zeilenhöhe zu vergrößern */ html[data-k~="pills"] .studio-pill { display: inline; border: 0; border-radius: 999px; padding: 0.02em 0.42em; margin-right: 0.2em; line-height: inherit; font-size: 0.86em; background: var(--text-color); color: var(--background-color) !important; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; } /* in Negativ-Zeilen Pills zurückdrehen */ html[data-k~="invert"] .project-row:hover .studio-pill, html[data-k~="invert"] .project-row.is-active .studio-pill { background: var(--background-color); color: var(--text-color) !important; } /* Filterleiste oben */ .studio-filterbar { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.6rem 0 0.8rem; } .studio-filterbar button { appearance: none; font: inherit; cursor: pointer; border-radius: 999px; padding: 0.08em 0.7em; line-height: 1.3; border: 1px solid var(--text-color); background: transparent; color: var(--text-color); transition: background-color 0.18s ease, color 0.18s ease; } .studio-filterbar button[aria-pressed="true"] { background: var(--text-color); color: var(--background-color); } .studio-filterbar .studio-filter-reset { border-color: transparent; text-decoration: underline; text-underline-offset: 0.15em; } .studio-filterbar .studio-filter-reset[hidden] { display: none; } html[data-theme^="studio"] .project-row.studio-out, html[data-theme^="studio"] .project-row.studio-out + .project-details { display: none !important; } /* Schalter nur mit ?schalter=1 */ .studio-switcher { display: none; } html[data-schalter] .studio-switcher { display: flex; } .studio-switcher .label { font-size: 0.7rem; padding: 0 0.4rem; align-self: center; background: #fff; color: #000; } /* ===================================================================== Runde 2 (13.10.): enge Abstände, Linien, einheitliche Pills, Hover ===================================================================== */ html[data-theme^="studio"] { --studio-orange: #ff5a00; } /* Header mit Linie, Wortmarke dicht darunter */ html[data-theme^="studio"] header { border-bottom: 1px solid var(--text-color) !important; } html[data-theme^="studio"] .main-projects { margin-top: 0.35rem !important; padding-top: 0 !important; } html[data-theme^="studio"] .studio-wordmark { margin: 0 0 0.35rem !important; padding: 0 !important; line-height: 0.86; cursor: pointer; } html[data-theme^="studio"] #intro-text { margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; } html[data-theme^="studio"] #intro-text p { margin: 0 !important; } html[data-theme^="studio"] .studio-filterbar { margin: 0.45rem 0 0.45rem; gap: 0.3rem; } html[data-theme^="studio"] .toggle-container { margin: 0 !important; } /* letzte Tabellenlinie */ html[data-theme^="studio"] #projects { border-bottom: 1px solid var(--text-color); } /* Pills: Zeile und Filterleiste im selben Format, invertiert, optisch mittig */ html[data-theme^="studio"] .studio-pill, html[data-theme^="studio"] .studio-filterbar button { display: inline-flex; align-items: center; gap: 0; font: inherit; font-size: 0.86em; line-height: 1; padding: 0.3em 0.55em; margin: 0; border: 0; border-radius: 999px; background: var(--text-color); color: var(--background-color) !important; text-box: trim-both cap alphabetic; white-space: nowrap; vertical-align: middle; } html[data-theme^="studio"] .studio-pill { margin-right: 0.2em; } html[data-theme^="studio"] .studio-filterbar button { cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } /* Ausgewählt: orange, wird breiter, X erscheint rechts */ html[data-theme^="studio"] .studio-pill-x { display: inline-block; overflow: hidden; max-width: 0; opacity: 0; margin-left: 0; transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, margin-left 0.32s cubic-bezier(0.22, 1, 0.36, 1); } html[data-theme^="studio"] .studio-filterbar button[aria-pressed="true"] { background: var(--studio-orange); color: #000 !important; } html[data-theme^="studio"] .studio-filterbar button[aria-pressed="true"] .studio-pill-x { max-width: 1em; opacity: 1; margin-left: 0.4em; } @media (hover: hover) { html[data-theme^="studio"] .studio-filterbar button:not([aria-pressed="true"]):hover { background: var(--studio-orange); color: #000 !important; } } /* Wortmarke: Hover-Welle in Orange, Buchstabe für Buchstabe */ html[data-theme^="studio"] .studio-wordmark .wm-ch { display: inline-block; transition: color 0.35s ease calc(var(--i) * 22ms), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 22ms); } @media (hover: hover) { html[data-theme^="studio"] .studio-wordmark:hover .wm-ch { color: var(--studio-orange); transform: translateY(-0.05em); } } @media (prefers-reduced-motion: reduce) { html[data-theme^="studio"] .studio-wordmark .wm-ch, html[data-theme^="studio"] .studio-pill-x { transition: none; } } /* Logo-Schrift auch für die Buchstaben-Spans */ html[data-logo="panama"] body .studio-wordmark .wm-ch { font-family: 'Panama', sans-serif !important; font-weight: normal !important; } html[data-logo="texgyre"] body .studio-wordmark .wm-ch { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif !important; font-weight: normal !important; } /* Pills: Innenabstand rundum gleich, Text auf Versalhöhe getrimmt (auch in den Spans) */ html[data-theme^="studio"] .studio-pill, html[data-theme^="studio"] .studio-filterbar button { padding: 0.35em 0.45em; } html[data-theme^="studio"] .studio-pill-label, html[data-theme^="studio"] .studio-pill-x { text-box: trim-both cap alphabetic; line-height: 1; } /* Kontakt-CTA „Request a project“: Pill im gleichen Format, orange */ html[data-theme^="studio"] .studio-cta { display: inline-flex; align-items: center; font: inherit; font-size: 0.86em; line-height: 1; padding: 0.35em 0.45em; border-radius: 999px; margin: 0.45rem 0 0; background: var(--studio-orange); color: #000 !important; text-decoration: none !important; transition: background-color 0.25s ease, color 0.25s ease; } html[data-theme^="studio"] .studio-cta > * { text-box: trim-both cap alphabetic; } @media (hover: hover) { html[data-theme^="studio"] .studio-cta:hover { background: var(--text-color); color: var(--background-color) !important; } } /* Studio-About: Bild klein, Liste ohne Punkte, dicht */ html[data-theme^="studio"] .studio-about-photo, html[data-theme^="studio"] main img { max-width: min(28rem, 60vw); height: auto; display: block; margin: 0 0 0.6rem; } html[data-theme^="studio"] .studio-about-list { list-style: none; padding: 0; margin: 0 0 0.6rem; border-top: 1px solid var(--text-color); } html[data-theme^="studio"] .studio-about-list li { padding: 0.25rem 0; border-bottom: 1px solid var(--text-color); margin: 0; } html[data-theme^="studio"] .studio-about-list li::before { content: none; } /* ===================================================================== Runde 3 (13.10.): Hover-Varianten Wortmarke, Pill-Varianten, Links ===================================================================== */ /* letzte Linie in Textfarbe (vorher teils schwarz) */ html[data-theme^="studio"] #projects { border-bottom-color: var(--text-color) !important; } html[data-theme^="studio"] .project-row::after, html[data-theme^="studio"] .project-row { border-top-color: var(--text-color) !important; } /* Links im Text: Hover orange, Unterstrich bleibt */ html[data-theme^="studio"] .underlined-link { transition: color 0.2s ease; } @media (hover: hover) { html[data-theme^="studio"] .underlined-link:hover, html[data-theme^="studio"] .underlined-link:hover * { color: var(--studio-orange) !important; } } /* Wortmarke: Hover-Varianten (data-wm). Basis aus Runde 2 überschreiben */ @media (hover: hover) { html[data-wm] .studio-wordmark:hover .wm-ch { transform: none; } /* flach: Farbwelle mit kaum sichtbarem Heben */ html[data-wm="flach"] .studio-wordmark:hover .wm-ch { color: var(--studio-orange); transform: translateY(-0.012em); } /* farbe: nur Farbe, ohne Bewegung */ html[data-wm="farbe"] .studio-wordmark:hover .wm-ch { color: var(--studio-orange); transform: none; } /* stufen: Buchstaben werden nacheinander orange und bleiben stehen, dazu ein kurzes Aufblitzen der Fläche */ html[data-wm="stufen"] .studio-wordmark .wm-ch { transition: color 0s linear calc(var(--i) * 30ms), background-color 0.12s ease calc(var(--i) * 30ms); } html[data-wm="stufen"] .studio-wordmark:hover .wm-ch { color: var(--background-color); background-color: var(--studio-orange); } } /* sweep: Orange läuft als Fläche durch die Schrift von links nach rechts */ html[data-wm="sweep"] .studio-wordmark .wm-ch { transition: none; } html[data-wm="sweep"] .studio-wordmark { background-image: linear-gradient(90deg, var(--studio-orange) 0 50%, var(--primary-color, var(--text-color)) 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; transition: background-position 0.7s cubic-bezier(0.22, 1, 0.36, 1); } html[data-wm="sweep"] .studio-wordmark .wm-ch { color: transparent !important; } @media (hover: hover) { html[data-wm="sweep"] .studio-wordmark:hover { background-position: 0 0; } } /* Pills in den Zeilen: Varianten (data-pill); Filterleiste folgt mit */ html[data-pill="klein"] .project-row .studio-pill { font-size: 0.72em; padding: 0.3em 0.45em; vertical-align: 0.08em; } html[data-pill="kontur"] .studio-pill, html[data-pill="kontur"] .studio-filterbar button:not([aria-pressed="true"]) { background: transparent !important; color: var(--text-color) !important; box-shadow: inset 0 0 0 1px var(--text-color); } html[data-pill="punkt"] .project-row .studio-pill { background: transparent !important; color: var(--text-color) !important; padding-left: 0; padding-right: 0.6em; } html[data-pill="punkt"] .project-row .studio-pill::before { content: ""; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--studio-orange); margin-right: 0.35em; flex: none; } html[data-pill="text"] .project-row .studio-pill { background: transparent !important; color: var(--text-color) !important; padding: 0; margin: 0; font-size: 1em; } html[data-pill="text"] .project-row .studio-pill + .studio-pill::before { content: "/"; margin: 0 0.35em; } /* ===================================================================== Runde 4 (13.10.): Maß-System, Linien, Pills klein/kontur, X, Lauf-Hover ===================================================================== */ /* Maß-Presets (data-mass): Abstände, Pillgröße, Pill-Innenabstand, Pfeil */ html[data-theme^="studio"] { --s-gap: 0.7rem; --s-pill: 0.72em; --s-pad-y: 0.38em; --s-pad-x: 0.6em; --s-arrow: 0.85; --s-line: 0.66px; --s-x: 0.85em; } html[data-theme^="studio"][data-mass="1"] { --s-gap: 0.5rem; --s-pill: 0.62em; --s-pad-y: 0.36em; --s-pad-x: 0.55em; --s-arrow: 0.7; --s-x: 0.8em; } html[data-theme^="studio"][data-mass="2"] { --s-gap: 0.7rem; --s-pill: 0.72em; --s-pad-y: 0.38em; --s-pad-x: 0.6em; --s-arrow: 0.85; --s-x: 0.85em; } html[data-theme^="studio"][data-mass="3"] { --s-gap: 0.9rem; --s-pill: 0.8em; --s-pad-y: 0.34em; --s-pad-x: 0.7em; --s-arrow: 1; --s-x: 0.9em; } html[data-theme^="studio"][data-mass="4"] { --s-gap: 1.1rem; --s-pill: 0.9em; --s-pad-y: 0.3em; --s-pad-x: 0.75em; --s-arrow: 1.15; --s-x: 0.95em; } /* Linien: dünn, überall gleich, letzte Linie in Textfarbe */ html[data-theme^="studio"] { --border-width: var(--s-line); --underline-thickness: var(--s-line); } html[data-theme^="studio"] .project-row { border-top: var(--s-line) solid var(--text-color) !important; margin-bottom: 0 !important; } html[data-theme^="studio"] .project-row::after { display: none !important; } html[data-theme^="studio"] #projects { border-bottom: var(--s-line) solid var(--text-color) !important; } html[data-theme^="studio"] header { border-bottom: var(--s-line) solid var(--text-color) !important; } /* gleiche Zeilenhöhe in allen Colorways */ html[data-theme="studio-b"], html[data-theme="studio-d"] { --row-padding-top: initial; --row-padding-bottom: initial; } html[data-theme^="studio"] .project-row { padding-top: var(--studio-row-pad, 0.25rem) !important; padding-bottom: var(--studio-row-pad, 0.25rem) !important; } /* Abstände Header → Logo → Text → Filter → Tabelle gleichmäßig */ html[data-theme^="studio"] .main-projects { margin-top: var(--s-gap) !important; } html[data-theme^="studio"] .studio-wordmark { margin: 0 0 var(--s-gap) !important; } html[data-theme^="studio"] .studio-filterbar { margin: var(--s-gap) 0 !important; } /* Unterstreichung im Text dünner */ html[data-theme^="studio"] .underlined-link { text-decoration-thickness: var(--s-line) !important; text-underline-offset: 0.14em; } html[data-theme^="studio"] .underlined-link::after { height: var(--s-line) !important; } /* Pfeil in der Zeile */ html[data-theme^="studio"] .toggle-arrow-icon { width: calc(1.6rem * var(--s-arrow)) !important; height: calc(1.6rem * var(--s-arrow)) !important; } /* Pills: Größe und Innenabstand aus dem Maß-System, Zeile und Filter gleich */ html[data-theme^="studio"] .studio-pill, html[data-theme^="studio"] .studio-filterbar button { font-size: var(--s-pill) !important; padding: var(--s-pad-y) var(--s-pad-x) !important; vertical-align: 0.1em; } /* klein: gefüllt, kleiner */ html[data-pill="klein"] .studio-pill, html[data-pill="klein"] .studio-filterbar button { font-size: calc(var(--s-pill) * 0.88) !important; } /* kontur: Umriss, Größe zwischen jetzt und klein */ html[data-pill="kontur"] .studio-pill, html[data-pill="kontur"] .studio-filterbar button { font-size: calc(var(--s-pill) * 0.95) !important; } html[data-pill="kontur"] .studio-filterbar button:not([aria-pressed="true"]), html[data-pill="kontur"] .studio-pill { background: transparent !important; color: var(--text-color) !important; box-shadow: inset 0 0 0 var(--s-line) var(--text-color) !important; } /* X: groß, mittig, als gezeichnetes Kreuz */ html[data-theme^="studio"] .studio-pill-x { font-size: inherit !important; position: relative; display: inline-block; overflow: visible !important; width: 0; height: var(--s-x); align-self: center; } html[data-theme^="studio"] .studio-filterbar button[aria-pressed="true"] .studio-pill-x { width: var(--s-x); max-width: var(--s-x); margin-left: 0.45em; } html[data-theme^="studio"] .studio-pill-x::before, html[data-theme^="studio"] .studio-pill-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 0.11em; min-height: 1.4px; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); } html[data-theme^="studio"] .studio-filterbar button { font-size: var(--s-pill); } html[data-theme^="studio"] .studio-filterbar button .studio-pill-x::before, html[data-theme^="studio"] .studio-filterbar button .studio-pill-x::after { height: 1.6px; } html[data-theme^="studio"] .studio-pill-x::after { transform: translate(-50%, -50%) rotate(-45deg); } /* Wortmarke: nur Farbverlauf, der einmal durchläuft (JS setzt .wm-run, läuft auch nach Verlassen zu Ende) */ html[data-theme^="studio"] .studio-wordmark .wm-ch { transform: none !important; transition: none !important; color: inherit !important; background: none !important; } html[data-theme^="studio"] .studio-wordmark { background-image: linear-gradient(90deg, var(--text-color) 0 35%, var(--studio-orange) 45% 55%, var(--text-color) 65% 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent !important; } html[data-theme^="studio"] .studio-wordmark .wm-ch { color: transparent !important; } html[data-theme^="studio"] .studio-wordmark.wm-run { animation: studio-wm-lauf 1.1s cubic-bezier(0.45, 0, 0.25, 1) 1; } @keyframes studio-wm-lauf { from { background-position: 100% 0; } to { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme^="studio"] .studio-wordmark.wm-run { animation: none; } } /* Intro-Wörter als Filter */ html[data-theme^="studio"] .studio-intro-filter { cursor: pointer; } html[data-theme^="studio"] .studio-intro-filter[aria-pressed="true"] { color: var(--studio-orange) !important; } /* Wortmarke auf Versalhöhe trimmen, damit alle Abstände gleich messen */ html[data-theme^="studio"] .studio-wordmark { text-box: trim-both cap alphabetic; line-height: 1 !important; } html[data-theme^="studio"] #intro-text p { text-box: trim-both cap alphabetic; } html[data-theme^="studio"] .studio-filterbar button .studio-pill-x::before, html[data-theme^="studio"] .studio-filterbar button .studio-pill-x::after { height: 1.8px; } /* Wortmarke nicht trimmen (Hintergrund-Clip würde die Glyphen oben/unten abschneiden); stattdessen Innenraum lassen und die Abstände per negativem Rand ausgleichen */ html[data-theme^="studio"] .studio-wordmark { text-box: none !important; line-height: 1 !important; padding: 0.06em 0 0.02em !important; margin: calc(-0.2em + var(--s-gap) * 0) 0 calc(-0.14em + var(--s-gap)) !important; overflow: visible !important; } /* Phase 3c Projektseiten */ html[data-theme^="studio"] .ps-page { max-width: 1400px; } html[data-theme^="studio"] .ps-back, html[data-theme^="studio"] .ps-parent { margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-meta { margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-text { max-width: 46rem; margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-text p { margin: 0 0 0.6em; } html[data-theme^="studio"] .ps-credits { margin: 0 0 var(--s-gap); font-size: 0.8em; } html[data-theme^="studio"] .ps-images { display: flex; flex-direction: column; gap: var(--s-gap); margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-images img, html[data-theme^="studio"] .ps-video video { width: 100%; height: auto; display: block; } html[data-theme^="studio"] .ps-video { position: relative; margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-sound { position: absolute; right: var(--s-gap); bottom: var(--s-gap); font: inherit; font-size: 0.8em; padding: var(--s-pad-y) var(--s-pad-x); border: 1px solid currentColor; border-radius: 999px; background: var(--background-color); color: var(--text-color); cursor: pointer; } html[data-theme^="studio"] .ps-sound[aria-pressed="true"] { background: var(--studio-orange); color: #000; border-color: var(--studio-orange); } html[data-theme^="studio"] .ps-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--s-gap); margin: 0 0 var(--s-gap); } html[data-theme^="studio"] .ps-gallery img { width: 100%; height: auto; display: block; } html[data-theme^="studio"] .ps-children { list-style: none; margin: var(--s-gap) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s-gap); } html[data-theme^="studio"] .ps-children a { display: block; text-decoration: none; color: inherit; } html[data-theme^="studio"] .ps-children img { width: 100%; height: auto; display: block; margin-bottom: 0.4em; } html[data-theme^="studio"] .child-links ul { list-style: none; margin: 0; padding: 0; } html[data-theme^="studio"] .child-links-label { margin: var(--s-gap) 0 0.3em; } html[data-theme^="studio"] .ps-children img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; } html[data-theme^="studio"] .ps-child-title { display: block; line-height: 1.2; } html[data-theme^="studio"] .ps-child-title { font-size: 1rem; overflow-wrap: anywhere; hyphens: auto; } html[data-theme^="studio"] .ps-children { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } html[data-theme^="studio"] .ps-page .arrow-back .arrow-icon { filter: brightness(0) var(--arrow-filter, none) !important; } /* ===================================================================== Runde 5 (14.10.): schwarz, Linien dicker, Filter nur aktiv, Hover lesbar, Zellen oben bündig, Fußzeile mit Anfrage/Kunst-Link ===================================================================== */ html[data-theme="studio-a"] { --background-color: #000000; --hover-bg: #141414; } html[data-theme^="studio"], html[data-theme^="studio"][data-mass] { --s-line: 1px; } /* Filterleiste: nur aktive Filter, unter dem Intro; leer = weg */ html[data-theme^="studio"] .studio-filterbar[hidden] { display: none !important; } html[data-theme^="studio"] .studio-filterbar { margin: var(--s-gap) 0 0 !important; } html[data-theme^="studio"] .studio-filterbar button, html[data-pill] .studio-filterbar button { background: var(--studio-orange) !important; color: #000 !important; box-shadow: none !important; } @media (hover: hover) { html[data-theme^="studio"] .studio-filterbar button:hover { background: var(--text-color) !important; color: var(--background-color) !important; } } /* Pills in den Zeilen: klickbar, Hover invertiert (lesbar), aktiv orange */ html[data-theme^="studio"] .project-row .studio-pill[data-disc] { cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) { html[data-theme^="studio"] .project-row .studio-pill[data-disc]:hover { background: var(--text-color) !important; color: var(--background-color) !important; box-shadow: inset 0 0 0 var(--s-line) var(--text-color) !important; } } html[data-theme^="studio"] .project-row .studio-pill[aria-pressed="true"] { background: var(--studio-orange) !important; color: #000 !important; box-shadow: none !important; } html[data-theme^="studio"] .project-row .studio-pill:focus-visible { outline: var(--s-line) solid var(--studio-orange); outline-offset: 2px; } /* Mehrzeilige Zeilen: alles oben bündig statt mittig */ html[data-theme^="studio"] .project-row > div:not(:first-child), html[data-theme^="studio"] .project-row.is-active > div:not(:first-child) { align-items: flex-start !important; align-self: flex-start !important; transform: none !important; } html[data-theme^="studio"] .project-row > div:nth-child(3) { flex-wrap: wrap; row-gap: 0.25em; padding-top: 0.12em; } /* Fußzeile unter der letzten Zeile */ html[data-theme^="studio"] .studio-foot { margin: var(--s-gap) 0 0; } html[data-theme^="studio"] .studio-foot p { margin: 0; } /* Gleiche Abstände Kopflinie → Wortmarke → Intro → erste Tabellenlinie (alle = --s-gap, gemessen an Versalhöhe/Grundlinie). Hero Condensed: Oberlänge 0.793em, Versalhöhe 0.737em, Unterlänge 0.205em */ html[data-theme^="studio"] .main-projects { margin-top: 0 !important; padding-top: 0 !important; } html[data-theme^="studio"] .studio-wordmark { padding: 0 !important; line-height: 1 !important; margin: calc(var(--s-gap) - 0.056em) 0 calc(var(--s-gap) - 0.205em) !important; } html[data-theme^="studio"] #intro-text { margin-bottom: var(--s-gap) !important; } html[data-theme^="studio"] #intro-text .studio-filterbar { margin: var(--s-gap) 0 0 !important; } /* Nummer und Pfeil oben bündig mit dem Titel */ html[data-theme^="studio"] .project-row .number-text, html[data-theme^="studio"] .project-row .design-number, html[data-theme^="studio"] .project-row.multiline .number-text, html[data-theme^="studio"] .project-row.multiline .design-number { top: 0 !important; transform: none !important; } /* ===================================================================== Runde 6 (14.10.): B2 #0a0a0a, Pill P7 (Backup P4 per ?pill=text), Hover H2, Logo L4 mit Orange, Filter-Knopf, Strich unter offener Zeile, luftigere Zeilen, Vorschau 1–3 Bilder oder Video mit gleichen Abständen ===================================================================== */ html[data-theme="studio-a"] { --background-color: #0a0a0a; --hover-bg: #171717; } html[data-theme^="studio"], html[data-theme^="studio"][data-mass] { --s-pad-y: 0.2em; --s-pad-x: 0.45em; --studio-row-pad: 0.42rem; } /* H2: Hover orange Fläche, schwarze Schrift (Zeilen-Pills und Filter) */ @media (hover: hover) { html[data-theme^="studio"] .project-row .studio-pill[data-disc]:hover, html[data-theme^="studio"] .studio-filterpanel button:hover, html[data-theme^="studio"] .studio-filterbar button:hover { background: var(--studio-orange) !important; color: #000 !important; box-shadow: inset 0 0 0 var(--s-line) var(--studio-orange) !important; } } /* P4 als Backup: Text mit Schrägstrichen, Hover/aktiv orange Schrift */ html[data-pill="text"] .project-row .studio-pill[data-disc]:hover, html[data-pill="text"] .project-row .studio-pill[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; color: var(--studio-orange) !important; } /* Filter-Knopf als Textknopf, Panel mit allen Kategorien */ html[data-theme^="studio"] .studio-filter-toggle { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--text-color); cursor: pointer; text-decoration: underline; text-decoration-thickness: var(--s-line); text-underline-offset: 0.14em; transition: color 0.2s ease; } html[data-theme^="studio"] .studio-filter-toggle[aria-expanded="true"] { color: var(--studio-orange); } @media (hover: hover) { html[data-theme^="studio"] .studio-filter-toggle:hover { color: var(--studio-orange); } } html[data-theme^="studio"] .studio-filterpanel { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: var(--s-gap) 0 0; } html[data-theme^="studio"] .studio-filterpanel[hidden] { display: none; } html[data-theme^="studio"] .studio-filterpanel button { appearance: none; display: inline-flex; align-items: center; font: inherit; font-size: calc(var(--s-pill) * 0.95); line-height: 1; padding: var(--s-pad-y) var(--s-pad-x); border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--text-color); box-shadow: inset 0 0 0 var(--s-line) var(--text-color); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } html[data-theme^="studio"] .studio-filterpanel button[aria-pressed="true"] { background: var(--studio-orange); color: #000; box-shadow: none; } html[data-theme^="studio"] .studio-filterpanel button[aria-pressed="true"] .studio-pill-x { width: var(--s-x); max-width: var(--s-x); margin-left: 0.45em; opacity: 1; } html[data-theme^="studio"] .studio-filterpanel .studio-pill-x::before, html[data-theme^="studio"] .studio-filterpanel .studio-pill-x::after { height: 1.6px; } /* L4 mit Orange: Buchstaben blitzen nacheinander invertiert und orange auf */ html[data-theme^="studio"] .studio-wordmark { background-image: none !important; color: var(--text-color) !important; -webkit-background-clip: border-box; background-clip: border-box; } html[data-theme^="studio"] .studio-wordmark .wm-ch { color: var(--text-color) !important; } html[data-theme^="studio"] .studio-wordmark.wm-run { animation: none !important; } html[data-theme^="studio"] .studio-wordmark.wm-run .wm-ch { animation: studio-wm-flash 0.6s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--i) * 30ms) 1 both; } @keyframes studio-wm-flash { 0%, 100% { background: transparent; color: var(--text-color); } 25% { background: var(--text-color); color: var(--background-color); } 55% { background: var(--studio-orange); color: #000; } } @media (prefers-reduced-motion: reduce) { html[data-theme^="studio"] .studio-wordmark.wm-run .wm-ch { animation: none; } } /* Strich unter der aufgeklappten Zeile wie auf der Kunstseite */ html[data-theme^="studio"] .project-row.is-active::after { display: block !important; opacity: 1 !important; border-top: var(--s-line) solid var(--text-color) !important; } /* Aufgeklappte Vorschau: oben, zwischen Text und Bild, unten gleich (--s-gap); Text kompakt */ html[data-theme^="studio"] .project-details .project-info-grid { padding-top: var(--s-gap) !important; margin: 0 !important; } html[data-theme^="studio"] .project-details .project-info p { margin: 0 !important; line-height: 1.15 !important; } html[data-theme^="studio"] .project-details .studio-preview, html[data-theme^="studio"] .project-details .project-images-two, html[data-theme^="studio"] .project-details .project-images-small { margin: var(--s-gap) 0 var(--s-gap) !important; gap: var(--s-gap) !important; } html[data-theme^="studio"] .project-details .studio-preview img { max-width: calc((100% - var(--s-gap)) / 2) !important; } html[data-theme^="studio"] .project-details .studio-three img { max-width: calc((100% - 2 * var(--s-gap)) / 3) !important; max-height: 60vh !important; } /* 14.10.: Vorschauvideos größer (vorher halbe Breite, max. 80vh), Zeile bleibt kompakt durch max. 70vh */ html[data-theme^="studio"] .project-details .studio-preview video { display: block; width: 75%; height: auto; max-height: 70vh; object-fit: contain; object-position: left top; background: var(--background-color); } @media (max-width: 700px) { html[data-theme^="studio"] .project-details .studio-preview video { width: 100%; } } html[data-theme^="studio"] .project-details .project-info-grid { align-items: flex-start !important; } html[data-theme^="studio"] .project-details .project-info { padding: 0 !important; margin: 0 !important; } html[data-theme^="studio"] .project-details .project-info p:first-child { text-box: trim-start cap alphabetic; } html[data-theme^="studio"] .project-details .project-info p:last-child { text-box: trim-end cap alphabetic; } html[data-theme^="studio"] .project-details .project-view-link p { text-box: trim-both cap alphabetic; margin: 0 !important; } html[data-theme^="studio"] .project-details .studio-preview { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; } html[data-theme^="studio"] .project-details .studio-three img { width: calc((100% - 2 * var(--s-gap)) / 3) !important; height: auto !important; flex: 0 0 auto; } /* Umgestylte Alt-Projektseiten (scripts/restyle-studio-legacy.py): Aktionsknoepfe als Kontur-Kapsel im Studio-Theme (14.10.) */ html[data-theme^="studio"] body.project-studio .action-button a, html[data-theme^="studio"] body.project-studio .action-button button { background-color: transparent; color: var(--text-color); border: 1px solid var(--text-color); } html[data-theme^="studio"] body.project-studio .action-button a:hover, html[data-theme^="studio"] body.project-studio .action-button button:hover { background-color: var(--text-color); color: var(--background-color); } html[data-theme^="studio"] body.project-studio .action-button a:hover .action-button-text, html[data-theme^="studio"] body.project-studio .action-button button:hover .action-button-text { color: var(--background-color) !important; text-shadow: none !important; } /* Studio: keine Preis-/Verfügbarkeitsknöpfe (pc.js) auf Studio-Seiten (14.10.) */ [data-theme="studio-a"] .pc-button { display: none !important; } /* ===================================================================== Runde 7 (14.10.): Projektseiten kompakt und einheitlich (neu generiert + umgestylt), Tabelle enger, Pills größer, Intro-Links nur eine Unterstreichung ===================================================================== */ /* --- Intro-/Textlinks: nur EINE Unterstreichung. Der graue Hover-Kasten (::after aus styles.css) wurde durch "height: var(--s-line)" zu einem zweiten Strich – auf Studio ganz aus. --- */ html[data-theme^="studio"] .underlined-link::after { display: none !important; content: none !important; } html[data-theme^="studio"] .underlined-link, html[data-theme^="studio"] .underlined-link .link-text { text-decoration-color: currentColor !important; box-shadow: none !important; border: 0 !important; background: none !important; } /* Hover: Schrift UND Unterstreichung orange (styles.css setzt a:hover sonst auf #000, die Linie verschwand im Dunkeln) */ @media (hover: hover) { html[data-theme^="studio"] body a.underlined-link:hover:not(#_), html[data-theme^="studio"] body a.underlined-link:hover:not(#_) * { color: var(--studio-orange) !important; text-decoration-color: var(--studio-orange) !important; font-weight: inherit !important; } } /* Intro auf studio.html linksbündig statt Blocksatz */ html[data-theme^="studio"] #intro-text p { text-align: left !important; hyphens: manual !important; } /* --- Tabelle studio.html: Zeilen eng, Pills größer (Pill-Höhe ≈ Versalhöhe + knapper Innenraum) --- */ html[data-theme^="studio"], html[data-theme^="studio"][data-mass] { --studio-row-pad: 0.22rem; --s-pad-y: 0.17em; --s-pad-x: 0.42em; } html[data-theme^="studio"] .project-row .studio-pill, html[data-pill] .project-row .studio-pill { font-size: 0.86em !important; } /* Basis (styles.css) erzwingt min-height = --project-row-height (33 px) – auf Studio bestimmt der Inhalt die Höhe */ html[data-theme^="studio"] body .project-row { min-height: 0 !important; } html[data-theme^="studio"] .project-row > div:nth-child(3) { padding-top: 0.05em !important; row-gap: 0.18em; align-content: flex-start; } /* --- Projektseiten: ein Abstandsmaß (--s-gap) zwischen allen Blöcken, Ränder wie der Header --- */ html[data-theme^="studio"] body.project-studio .main-projects.ps-page { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: var(--s-gap); column-gap: 0.3rem; /* Header ist hier fixiert (Höhe --header-height inkl. Linie): Abstand Linie → Pfeil = --s-gap */ padding: calc(var(--header-height, 1.9rem) + var(--s-gap)) 0 var(--s-gap) !important; margin-top: 0 !important; margin-bottom: 0 !important; } html[data-theme^="studio"] body.project-studio .ps-page > * { flex: 0 0 100%; min-width: 0; max-width: none !important; margin: 0 !important; } html[data-theme^="studio"] body.project-studio .ps-page > .project-header-container { display: contents; } html[data-theme^="studio"] body.project-studio .ps-page > .project-header-container > * { flex: 0 0 100%; margin: 0 !important; min-width: 0; } html[data-theme^="studio"] body.project-studio .ps-page > .spacer { display: none !important; } html[data-theme^="studio"] body.project-studio .main-projects.child-links { margin-top: 0 !important; padding: 0 0 var(--s-gap) !important; } html[data-theme^="studio"] body.project-studio .main-projects.child-links .child-links-label { margin: 0 0 0.3em !important; } html[data-theme^="studio"] body.project-studio .main-projects { margin-bottom: 0 !important; } /* 14.10. (3): Größen der Projektseiten-Kopfzeile als Variablen. Titel: js/ps-title.js passt ihn auf die Zeilenbreite ein (--ps-title-size) zwischen --ps-title-min und --ps-title-max. --ps-title-max = Wortmarke auf studio.html (151 px bei 1430 px Zeilenbreite ≈ 10,5vw). Nur rem/vw verwenden (Skript löst über font-size auf). Lange Titel laufen zweizeilig, bevor sie unter --ps-title-min schrumpfen. */ html[data-theme^="studio"] body.project-studio { --ps-title-max: 10.5vw; --ps-title-min: clamp(1.75rem, 6vw, 6rem); --ps-arrow-size: 40px; } /* Handy: Wortmarke wäre nur ≈ 39 px, Titel sollen trotzdem die Breite füllen → eigene Grenzen */ @media (max-width: 600px) { html[data-theme^="studio"] body.project-studio { --ps-title-max: 20vw; --ps-title-min: 9vw; } } /* Zurück-Pfeil: 40 px (bis 14.10. (3): klein ≈ Versalhöhe der Textzeile), weiß, links am Raster */ html[data-theme^="studio"] body.project-studio .ps-page > .arrow-back { flex: 0 0 auto; display: block; width: max-content; padding: 0 !important; line-height: 0; position: static !important; transform: none !important; } html[data-theme^="studio"] body.project-studio .ps-page .arrow-back .arrow-icon { /* bis 14.10. (3): width: 0.66em !important; height: 0.66em !important; (≈ 14 px) */ display: block; width: var(--ps-arrow-size) !important; height: var(--ps-arrow-size) !important; max-width: none; margin: 0 !important; padding: 0 !important; transform: none !important; transition: opacity 0.2s ease; } /* Projekttitel: Logo-Schrift (Hero Condensed = TeX Gyre Heros Cn), Versalien wie die Wortmarke, kompakt, auf Versalhöhe getrimmt (Abstände messen ab Versalkante/Grundlinie) */ html[data-theme^="studio"] body.project-studio .ps-page h1.project-title, html[data-theme^="studio"] body.project-studio .ps-page h1.project-title * { font-family: 'Hero Condensed', 'Arial Narrow', sans-serif !important; font-weight: normal !important; } html[data-theme^="studio"] body.project-studio .ps-page h1.project-title { /* bis 14.10. (3): font-size: clamp(2.4rem, 5.6vw, 5.6rem) (≈ 80 px bei 1440) */ font-size: var(--ps-title-size, clamp(var(--ps-title-min), 5.6vw, var(--ps-title-max))) !important; line-height: 0.9 !important; letter-spacing: -0.03em !important; text-wrap: balance; white-space: normal !important; /* styles.css setzt h1 nowrap !important; Umbruch nur zwischen Wörtern */ text-transform: uppercase; text-align: left !important; text-box: trim-both cap alphabetic; padding: 0 !important; margin: 0 !important; width: 100%; max-width: none !important; hyphens: none; overflow-wrap: normal; position: static !important; top: auto !important; transform: none !important; } html[data-theme^="studio"] body.project-studio .ps-page h1.project-title span { display: inline !important; transform: none !important; opacity: 1 !important; } /* Info-Block: Fließtext wie studio.html, linksbündig, kompakter Zeilenabstand, Versalkante/Grundlinie getrimmt */ html[data-theme^="studio"] body.project-studio .ps-page .project-specs, html[data-theme^="studio"] body.project-studio .ps-page .ps-meta, html[data-theme^="studio"] body.project-studio .ps-page .ps-parent, html[data-theme^="studio"] body.project-studio .ps-page .ps-text p, html[data-theme^="studio"] body.project-studio .ps-page .ps-credits, html[data-theme^="studio"] body.project-studio .ps-page .project-description { font-size: inherit; line-height: 1.15 !important; text-align: left !important; hyphens: manual; text-box: trim-both cap alphabetic; padding: 0 !important; margin: 0 !important; } html[data-theme^="studio"] body.project-studio .ps-page .ps-text p { max-width: 46rem; } html[data-theme^="studio"] body.project-studio .ps-page .ps-credits { font-size: inherit; } html[data-theme^="studio"] body.project-studio .ps-page .ps-meta:empty, html[data-theme^="studio"] body.project-studio .ps-page .ps-credit-wrap:empty { display: none; } /* Knöpfe: Studio-Pill (Kontur), Textgröße der Pills, nebeneinander, Hover H2 (orange Fläche, schwarze Schrift) */ html[data-theme^="studio"] body.project-studio .ps-page > .action-button { flex: 0 0 auto; display: block; padding: 0 !important; } html[data-theme^="studio"] body.project-studio .action-button a, html[data-theme^="studio"] body.project-studio .action-button button { display: inline-flex; align-items: center; font: inherit; font-size: calc(var(--s-pill) * 0.95) !important; line-height: 1; padding: var(--s-pad-y) var(--s-pad-x) !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--text-color) !important; box-shadow: inset 0 0 0 var(--s-line) var(--text-color) !important; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; animation: none !important; transform: none !important; } html[data-theme^="studio"] body.project-studio .action-button .action-button-text { display: block !important; font-size: 1em !important; line-height: 1 !important; top: 0 !important; transform: none !important; text-shadow: none !important; animation: none !important; color: inherit !important; text-box: trim-both cap alphabetic; text-decoration: none !important; white-space: nowrap; } html[data-theme^="studio"] body.project-studio .action-button a { text-decoration: none !important; } @media (hover: hover) { html[data-theme^="studio"] body.project-studio .action-button a:hover, html[data-theme^="studio"] body.project-studio .action-button button:hover { background: var(--studio-orange) !important; color: #000 !important; box-shadow: inset 0 0 0 var(--s-line) var(--studio-orange) !important; } html[data-theme^="studio"] body.project-studio .action-button a:hover .action-button-text { color: #000 !important; } } /* Ton-Knopf über Videos im selben Pill-Format */ html[data-theme^="studio"] body.project-studio .ps-sound { font-size: calc(var(--s-pill) * 0.95); line-height: 1; border: 0; box-shadow: inset 0 0 0 var(--s-line) currentColor; } html[data-theme^="studio"] body.project-studio .ps-sound > * { text-box: trim-both cap alphabetic; } /* Bilder/Videos: volle Rasterbreite, links bündig, Bild-zu-Bild = --s-gap */ html[data-theme^="studio"] body.project-studio .ps-page .ps-images, html[data-theme^="studio"] body.project-studio .ps-page .ps-gallery, html[data-theme^="studio"] body.project-studio .ps-page .smart-grid, html[data-theme^="studio"] body.project-studio .ps-page .project-images, html[data-theme^="studio"] body.project-studio .ps-page .project-images-small { gap: var(--s-gap) !important; margin: 0 !important; padding: 0 !important; } html[data-theme^="studio"] body.project-studio .ps-page img, html[data-theme^="studio"] body.project-studio .ps-page video { margin-left: 0; margin-right: 0; } /* Bilder ohne die 0.99-Skalierung und den Schatten aus styles.css: Kanten liegen exakt am Raster */ html[data-theme^="studio"] body.project-studio .ps-page img:not(.arrow-icon), html[data-theme^="studio"] body.project-studio .ps-page video { scale: none !important; filter: none !important; } /* Videos: höchstens eine Bildschirmhöhe, links am Raster (Hochformat-Videos wären sonst ~3 Bildschirme hoch) */ html[data-theme^="studio"] body.project-studio .ps-page video { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: calc(100svh - var(--header-height, 1.9rem) - 2 * var(--s-gap)) !important; margin: 0 !important; } html[data-theme^="studio"] body.project-studio .ps-page > .ps-video { flex: 0 0 auto; width: fit-content; max-width: 100% !important; } /* Einzelne
direkt im Seitenblock (Altseiten) nicht als eigener Abstand */ html[data-theme^="studio"] body.project-studio .ps-page > br { display: none; } /* Zusammengelegte Bilder (build-studio-pages.py, ps-merged) stehen außerhalb von .ps-page: gleiche Ränder und Abstände */ html[data-theme^="studio"] body.project-studio > .ps-merged { display: flex; flex-direction: column; gap: var(--s-gap) !important; margin: 0 var(--overall-margin, 0.35rem) !important; padding: 0 0 var(--s-gap) !important; } html[data-theme^="studio"] body.project-studio > .ps-merged img { width: 100%; height: auto; display: block; margin: 0 !important; scale: none !important; filter: none !important; } /* Runde 7b (14.10.): Unterlängen (g, p, y) stoßen nicht mehr an den Pill-Rand – unten Platz für die Unterlänge */ html[data-theme^="studio"] .studio-pill, html[data-theme^="studio"] .studio-filterbar button, html[data-theme^="studio"] .studio-filterpanel button { text-box-edge: cap alphabetic; padding-top: 0.2em !important; padding-bottom: 0.3em !important; } /* 14.10.: Videos in handgeschriebenen Zeilen (ProTech, Heat Shield, MORGEN, Gegen Polizeigewalt): vorher lief das