/* Hallmark · shared page layer for redesigned pages: fonts, language spans, sections, rows, rail, facts, forms, FAQ, contact close · theme: dose (by request) · tokens in css/tokens.css
 * A page links css/site.css (which imports tokens, base and chrome) and adds its own sheet only for what no other page has. */
@import url("./tokens.css?v=202610301235");
@import url("./base.css?v=202610301235");
@import url("./chrome.css?v=202610301235");



html { scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
body { font-feature-settings: "ss01" 0; }
.lang-tr, .lang-tr-block { display: none; }
html[lang="tr"] .lang-de, html[lang="tr"] .lang-de-block { display: none; }
html[lang="tr"] .lang-tr { display: inline; }
html[lang="tr"] .lang-tr-block { display: block; }
.lead { color: var(--color-ink-2); }

/* ── sections ─────────────────────────────────────────────── */
.section { padding-block: var(--section-gap); }
.section--s { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap-l); }
.section--band { background: var(--color-paper-2); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head h2 { grid-column: 1 / 7; }
.head .lead { grid-column: 8 / 13; }
.head--stack h2, .head--stack .lead { grid-column: 1 / 9; }

/* services index */
.services { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.services__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.services__head .lead { margin-top: var(--space-lg); }
.services__head .link { margin-top: var(--space-xl); }
.services__list { grid-column: 6 / 13; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.services__list li { border-bottom: 1px solid var(--color-rule); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-2xs) var(--space-lg); align-items: center; padding: var(--space-lg) var(--space-sm); text-decoration: none; color: inherit; transition: background-color var(--dur-short) var(--ease-out); }
.svc:hover { background: var(--color-paper-2); }
.svc:hover .svc__arrow { color: var(--color-accent); }
.svc:active { background: var(--color-paper-3); }
.svc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.svc h3 { font-size: var(--text-title); }
.svc p { grid-column: 1; color: var(--color-ink-2); max-width: 56ch; }
.svc__arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.svc__tag { display: inline-block; margin-left: var(--space-xs); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-inner); background: var(--color-accent-wash); color: var(--color-accent-2); font: 500 var(--text-xs)/1.4 var(--font-body); letter-spacing: 0; vertical-align: middle; }
.services__also { margin-top: var(--space-lg); color: var(--color-ink-2); }
.services__also a { color: var(--color-ink); font-weight: 500; }
.services__also a:hover { color: var(--color-accent); }
.services__also a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* work rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(34rem, 80vw); gap: var(--gap-columns); margin: 0; padding: 0 0 var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; }
.rail-wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.rail > li { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.work { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-card); }
.work__shot { aspect-ratio: 1440 / 1000; border-radius: var(--radius-card); background: var(--color-paper-3); }
.work__shot img { outline: 1px solid color-mix(in oklab, var(--color-ink) 9%, transparent); outline-offset: -1px; border-radius: var(--radius-card); }
.work__cap { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
.work__cap strong { font-weight: 500; }
.work__cap span { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.work:hover strong { color: var(--color-accent); }
.work:active strong { color: var(--color-ink); }
.work:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.package { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg) var(--gap-columns); align-items: center; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.package p { grid-column: 1 / 8; font: 700 var(--text-2xl)/1.25 var(--font-display); }
.package .link { grid-column: 9 / 13; justify-self: end; }
.places { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-2xl); }
.places > div { grid-column: span 6; }
.places h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.places ul { columns: 2; column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.places li { break-inside: avoid; }
.places a { display: inline-flex; min-height: 36px; align-items: center; color: var(--color-ink-2); text-decoration: none; }
.places a:hover { color: var(--color-accent); text-decoration: underline; }
.places a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.places__guide { grid-column: 1 / -1; }

/* founder */
.founder { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: center; }
.founder__photo { grid-column: 1 / 6; aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius-card); }
.founder__photo img { object-position: 50% 30%; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.founder__text { grid-column: 7 / 13; }
.founder__text p { margin-top: var(--space-lg); color: var(--color-ink-2); }
.facts { margin: var(--space-xl) 0 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; color: var(--color-ink-2); }
.founder__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* quote wizard */
.quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.quote__head { grid-column: 1 / 6; }
.quote__head .lead { margin-top: var(--space-lg); }
.quote__head .facts { margin-top: var(--space-xl); }
.wizard { grid-column: 7 / 13; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.wizard__bar { height: 4px; margin-bottom: var(--space-lg); border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.wizard__bar > div { height: 100%; width: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0.2)); transition: transform var(--dur-long) var(--ease-out); }
.wizard__step-label { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-md); }
.wizard h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-lg); letter-spacing: 0; margin-bottom: var(--space-lg); }
.wizard__opts { display: grid; gap: var(--space-xs); }
.angebot-option { display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-md)/1.3 var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.angebot-option:hover { border-color: var(--color-accent); }
.angebot-option:active { background: var(--color-accent-wash); }
.angebot-option:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.angebot-option[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-wash); color: var(--color-accent-2); font-weight: 500; }
.field { display: grid; gap: var(--space-2xs); }
.field + .field { margin-top: var(--space-sm); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
textarea.input { min-height: 120px; padding-block: var(--space-sm); resize: vertical; }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline-color: var(--color-focus); }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: var(--space-3xs) 0 0; flex-shrink: 0; accent-color: var(--color-accent); }
.check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check[data-invalid] { color: var(--color-error); }
.check a { color: var(--color-accent); }
.form-help { min-height: 1lh; margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.form-help[data-state="error"] { color: var(--color-error); }
.form-help a { color: inherit; font-weight: 500; }
.wizard .btn, .callback .btn { width: 100%; margin-top: var(--space-lg); }
.wizard__back { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; margin-top: var(--space-md); padding: 0; border: 0; background: none; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.wizard__back:hover { color: var(--color-ink); }
.wizard__back:active { color: var(--color-accent); }
.wizard__back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.done { padding-block: var(--space-lg); }
.done h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-display); }
.done p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* faq */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); border-top: 1px solid var(--color-rule); padding-top: var(--space-2xl); }
.faq__head { grid-column: 1 / 5; }
.faq__list { grid-column: 6 / 13; }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq details:first-child { border-top: 1px solid var(--color-rule); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--space-md); align-items: center; min-height: 72px; padding-block: var(--space-md); font-weight: 500; font-size: var(--text-lg); line-height: 1.35; list-style: none; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq summary:active { color: var(--color-ink); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary .icon { transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: 65ch; }

/* callback close */
.callback { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.callback__head { grid-column: 1 / 6; }
.callback__head .lead { margin-top: var(--space-lg); }
.callback__form { grid-column: 7 / 13; }
.direct { margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.direct li { border-top: 1px solid var(--color-rule); }
.direct li:last-child { border-bottom: 1px solid var(--color-rule); }
.direct a, .direct li > span { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; color: var(--color-ink); text-decoration: none; font-weight: 500; }
.direct a:hover { color: var(--color-accent); }
.direct a:active { color: var(--color-ink-2); }
.direct a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.direct .icon { color: var(--color-accent); }
.direct .icon--fill { color: var(--color-ok); }
.direct li > span { font-weight: 400; color: var(--color-ink-2); }

/* the one reveal: section heads and the plan, from visible */
.js [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .wizard__bar > div, .faq summary .icon, .site-nav { transition: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 75rem) {
}
@media (max-width: 60rem) {
  .head, .services, .founder, .quote, .callback, .faq, .mast, .package, .places { grid-template-columns: minmax(0, 1fr); }
  .head > *, .services > *, .founder > *, .quote > *, .callback > *, .faq > *, .mast > *, .package > *, .places > * { grid-column: 1 / -1 !important; }
  .services__head { position: static; }
  .package .link { justify-self: start; }
  .founder__photo { max-width: 420px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { grid-auto-columns: min(30rem, 78vw); }
}
@media (max-width: 40rem) {
  .places ul { columns: 1; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .wizard { padding: var(--space-lg); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
}
.faq summary h3 { font: inherit; letter-spacing: 0; max-width: none; text-wrap: pretty; }
strong, b { font-weight: 700; }

/* review fixes: rail bleeds to the viewport edge, rows align to the gutter, place lists two-up on phones */
.rail-wrap { max-width: none; padding-inline: 0; }
.rail { padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.svc { margin-inline: calc(-1 * var(--space-sm)); }
.svc__more { padding: 0 0 var(--space-lg); margin-top: calc(-1 * var(--space-sm)); }
@media (max-width: 40rem) { .places ul { columns: 2; } }

/* ── colour rhythm: night and blue bands (owner feedback: less white) ── */
.section--night { background: var(--color-night); color: var(--color-night-ink); }
.section--night .lead, .section--night p, .section--night dd { color: var(--color-night-muted); }
.section--night h2, .section--night h3, .section--night strong, .section--night dt { color: var(--color-night-ink); }
.section--night .link { color: var(--color-night-accent); text-decoration-color: color-mix(in oklab, var(--color-night-accent) 40%, transparent); }
.section--night .link:hover { color: var(--color-night-ink); }
.section--night .btn--quiet { color: var(--color-night-ink); border-color: var(--color-night-rule); }
.section--night .btn--quiet:hover { background: var(--color-night-2); border-color: var(--color-night-muted); }
.section--night :focus-visible { outline-color: var(--color-night-focus); }
.section--night .work__cap span, .section--night .places a { color: var(--color-night-muted); }
.section--night .places a:hover, .section--night .work:hover strong { color: var(--color-night-ink); }
.section--night .package, .section--night .facts div { border-color: var(--color-night-rule); }
.section--night .package p { color: var(--color-night-ink); }
.section--night .work__shot { background: var(--color-night-2); color: var(--color-night-ink); }

.section--blue { background: var(--color-accent); color: var(--color-blue-ink); }
.section--blue .lead, .section--blue p, .section--blue dd { color: var(--color-blue-muted); }
.section--blue h2, .section--blue h3, .section--blue strong { color: var(--color-blue-ink); }
.section--blue :focus-visible { outline-color: var(--color-blue-focus); }
.section--blue .direct li { border-color: var(--color-blue-rule); }
.section--blue .direct a, .section--blue .direct .icon, .section--blue .direct li > span { color: var(--color-blue-ink); }
.section--blue .direct a:hover { color: var(--color-blue-muted); }
.section--blue .field label { color: var(--color-blue-ink); }
.section--blue .input { border-color: var(--color-paper); }
.section--blue .form-help { color: var(--color-blue-muted); }
.section--blue .form-help[data-state="error"] { color: var(--color-blue-ink); font-weight: 500; }
.section--blue .btn, .btn--light { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-accent-2); }
.section--blue .btn:hover, .btn--light:hover { background: var(--color-accent-wash); border-color: var(--color-accent-wash); }
.section--blue .done h3 { color: var(--color-blue-ink); }

/* team section: head on the left, text and facts on the right */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.about__head { grid-column: 1 / 6; }
.about__head .lead { margin-top: var(--space-lg); }
.about__body { grid-column: 7 / 13; }
.about__body > p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .about { grid-template-columns: minmax(0, 1fr); } .about > * { grid-column: 1 / -1; } }
.section--blue h1 { color: var(--color-blue-ink); }
.section--blue .btn--quiet { background: transparent; color: var(--color-blue-ink); border-color: var(--color-blue-rule); }
.section--blue .btn--quiet:hover { background: var(--color-blue-deep); border-color: var(--color-blue-muted); }
.section--blue .btn--wa .icon { color: var(--color-blue-ink); }
.section--blue .link { color: var(--color-blue-ink); text-decoration-color: var(--color-blue-rule); }
.section--blue .link:hover { color: var(--color-blue-muted); }
.section--blue a:not(.btn):not(.link) { color: var(--color-blue-ink); }
.section--blue figcaption, .section--blue small, .section--blue .caption { color: var(--color-blue-muted); }
.section--blue nav[aria-label], .section--blue .crumbs, .section--blue .crumbs a, .section--blue .crumbs span { color: var(--color-blue-muted); }
.section--night figcaption, .section--night .caption { color: var(--color-night-muted); }
/* paper objects inside a blue band keep the page's own ink (sample cards, wizard, post previews) */
.section--blue :is(.week__frame, .ig, .wizard, .plan__frame) { color: var(--color-ink); }
.section--blue :is(.week__frame, .ig, .wizard, .plan__frame) :is(p, strong, h3, dd, a:not(.btn):not(.link)) { color: inherit; }
.section--blue .week__frame .week__btn:not(.week__btn--ok) { color: var(--color-ink); }
.section--blue .week__frame .week__btn--ok { color: var(--color-paper); }
/* captions of pictures that sit on a blue band */
.section--blue :is(.week, .wd-pair, .uu-portrait) figcaption { color: var(--color-blue-muted); }
.section--blue :is(.week, .wd-pair, .uu-portrait) figcaption strong { color: var(--color-blue-ink); }

/* ── Dose (by request, 29.10.2026): grained paper, plastic bands, window light on the blue, moulded keys, pharmacy-label mono ── */
body { background: var(--grain), var(--color-paper); }
h1, h2 { line-height: 1.02; }
h3 { line-height: 1.15; }
.mono, .num { font-family: var(--font-outlier); font-weight: 400; letter-spacing: 0; }

/* plastic band: a pale tint over the paper, a glint along the top edge, a deeper shade at the foot */
.section--band { --t: var(--p-fri); background: linear-gradient(color-mix(in oklab, var(--glint) 32%, transparent), transparent 18%), color-mix(in oklab, var(--t) 62%, transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -24px 36px -28px color-mix(in oklab, var(--t) 45%, var(--color-ink)); }
.section--band.tint-sat { --t: var(--p-sat); }
.section--band.tint-thu { --t: var(--p-thu); }
.section--band .svc:hover, .section--band .faq summary:hover { background: transparent; }

/* window light: four blurred panes skewed across the blue, drifting over ninety seconds */
.hero--blue, .section--blue { position: relative; isolation: isolate; overflow: clip; }
.hero--blue::before, .section--blue::before { content: ""; position: absolute; inset: -10% -6% -10% -6%; z-index: -1; pointer-events: none; opacity: 0.11; filter: blur(26px);
  background: linear-gradient(var(--light), var(--light)) 6% 4% / 13% 40% no-repeat, linear-gradient(var(--light), var(--light)) 21% 4% / 13% 40% no-repeat,
    linear-gradient(var(--light), var(--light)) 6% 52% / 13% 40% no-repeat, linear-gradient(var(--light), var(--light)) 21% 52% / 13% 40% no-repeat;
  transform: skewX(-18deg) translateX(-3%); animation: window-light 90s var(--ease-in-out) infinite alternate; }
@keyframes window-light { to { transform: skewX(-18deg) translateX(9%); } }
@media (prefers-reduced-motion: reduce) { .hero--blue::before, .section--blue::before { animation: none; } }
.section--blue .btn, .btn--light { background: linear-gradient(var(--glint), var(--color-paper)); color: var(--color-accent-2); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--color-accent-soft) 60%, transparent), 0 0 0 1px var(--color-blue-deep), 0 3px 0 var(--color-blue-deep), 0 10px 20px -10px var(--org-drop-2); }
.section--blue .btn:hover, .btn--light:hover { background: linear-gradient(var(--glint), var(--color-accent-wash)); filter: none; }
.section--blue .btn:active, .btn--light:active { box-shadow: 0 0 0 1px var(--color-blue-deep), 0 0 0 var(--color-blue-deep); }
.section--blue .btn--quiet, .hero--blue .btn--quiet { background: color-mix(in oklab, var(--glint) 10%, transparent); color: var(--color-blue-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--glint) 35%, transparent), 0 0 0 1px var(--color-blue-rule), 0 3px 0 var(--color-blue-deep); }
.section--blue .btn--quiet:hover, .hero--blue .btn--quiet:hover { background: color-mix(in oklab, var(--glint) 18%, transparent); }
.section--blue .btn--quiet:active, .hero--blue .btn--quiet:active { box-shadow: 0 0 0 1px var(--color-blue-rule), 0 0 0 var(--color-blue-deep); }
.section--night .btn--quiet { background: color-mix(in oklab, var(--glint) 6%, transparent); color: var(--color-night-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--glint) 20%, transparent), 0 0 0 1px var(--color-night-rule), 0 3px 0 var(--color-night-rule); }
.section--night .btn--quiet:hover { background: var(--color-night-2); }

/* a first step in a tray: the wizard sunk into plastic, its choices as plastic keys, soft blue when checked */
.wizard { --t: var(--p-fri); background: linear-gradient(transparent 70%, color-mix(in oklab, var(--glint) 30%, transparent)), color-mix(in oklab, var(--t) 50%, var(--color-paper)); box-shadow: inset 0 2px 8px var(--shade-plastic), inset 0 -1.5px 0 var(--glint); }
.wizard__bar { background: color-mix(in oklab, var(--color-paper) 70%, transparent); box-shadow: inset 0 1px 1px var(--shade-plastic); }
.angebot-option { border: 0; background: linear-gradient(var(--glint), var(--color-paper)); box-shadow: 0 0 0 1px var(--color-rule), 0 3px 0 var(--color-rule); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.angebot-option:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 55%, var(--color-rule)), 0 3px 0 color-mix(in oklab, var(--color-accent) 40%, var(--color-rule)); }
.angebot-option:active { transform: translateY(3px); box-shadow: 0 0 0 1px var(--color-rule), 0 0 0 var(--color-rule); }
.angebot-option[aria-pressed="true"] { background: linear-gradient(var(--glint), var(--color-accent-soft)); color: var(--color-accent-2); font-weight: 500; box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-accent) 45%, transparent), 0 3px 0 color-mix(in oklab, var(--color-accent) 45%, transparent); }
.input { background: var(--glint); }
.svc__tag { background: var(--color-accent-soft); }
.work__shot, .founder__photo { box-shadow: var(--shadow-lift); }