/* Wirth Websites – Bildschirm-Komponenten für Website UND Scan-Seite.
   Quelle: wirthwebsites/design/components.css (Kopien per design/sync.py). Braucht tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
/* Handy: Neben- und Kleintext nie unter 16 px (tokens.css bleibt für den Brief unverändert) */
@media (max-width: 47.99rem) { :root { --fs-sm: 1rem; --fs-xs: 1rem; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body { font: 400 var(--fs-body)/1.6 var(--sans); color: var(--on-night); background: var(--night); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { max-width: 65ch; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-family: var(--serif); font-weight: 300; margin: 0; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
.on-paper :focus-visible { outline-color: var(--ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; border-radius: var(--r); background: var(--creme); color: var(--night); }
.skip:focus { top: 1rem; }

/* Überschriften */
.h1 { font: 300 var(--fs-h1)/1.02 var(--serif); letter-spacing: -.025em; }
.h2 { font: 300 var(--fs-h2)/1.04 var(--serif); letter-spacing: -.022em; }
.h3 { font: 400 var(--fs-h3)/1.2 var(--serif); letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-night-2); }

/* Buttons: Pille, Creme auf Nacht (primär) bzw. Haarlinie (sekundär) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.5rem; padding: 0 1.5rem; border: 0; border-radius: var(--pill); padding-block: .5rem; font: 500 1.0625rem/1.15 var(--sans); text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: transform var(--t-fast) var(--ease-out), background-color .2s, box-shadow .2s, color .2s; }
.btn:active { transform: scale(.97); }
.btn svg { flex: none; }
.btn-creme { background: var(--creme); color: var(--night); }
.btn-ghost { background: transparent; color: var(--on-night); box-shadow: inset 0 0 0 1px var(--edge-night); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-link { min-height: 2.75rem; padding: 0 .25rem; background: none; color: var(--on-night-2); text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--edge-night); }
.btn .mini { flex: none; width: 2rem; height: 2rem; margin-left: -.75rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%; box-shadow: 0 0 0 1px rgba(8,10,20,.25); }
@media (hover: hover) and (pointer: fine) {
  .btn-creme:hover { background: #fff; }
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--creme); color: var(--creme); }
  .btn-ink:hover { background: #1a2436; }
  .btn-link:hover { color: var(--creme); text-decoration-color: currentColor; }
}

/* Vertrauens-Punkte neben dem CTA: Linien-Icon + kurzer Satz */
.trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); line-height: 1.35; color: var(--on-night-2); }
.trust li { display: inline-flex; align-items: center; gap: .5rem; }
.trust svg { flex: none; width: 1rem; height: 1rem; }

/* Nummerierte Liste mit Haarlinien (»01 Leistung – Satz«) */
.nlist { margin: 0; padding: 0; list-style: none; counter-reset: n; border-top: 1px solid var(--line-night); }
.nlist > li { counter-increment: n; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 .5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-night); }
.nlist > li::before { content: counter(n, decimal-leading-zero); padding-top: .3rem; font: italic 400 1.0625rem/1 var(--serif); color: var(--creme); font-variant-numeric: tabular-nums; }
.nlist h3 { font: 400 var(--fs-h3)/1.2 var(--serif); letter-spacing: -.01em; color: var(--on-night); }
.nlist p { margin: .375rem 0 0; color: var(--on-night-2); }
@media (max-width: 47.99rem) { .nlist > li { padding: 1.125rem 0; } }
.on-paper .nlist { border-color: var(--line); }
.on-paper .nlist > li { border-color: var(--line); }
.on-paper .nlist > li::before { color: var(--ink); }
.on-paper .nlist h3 { color: var(--ink); }
.on-paper .nlist p { color: var(--ink-2); }

/* FAQ: native details/summary – funktioniert ohne JS */
.faq details { border-top: 1px solid var(--line-night); }
.faq details:last-child { border-bottom: 1px solid var(--line-night); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 4rem; padding: .875rem 0; font: 400 1.25rem/1.25 var(--serif); letter-spacing: -.005em; cursor: pointer; list-style: none; touch-action: manipulation; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / .75rem 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px .75rem no-repeat; box-shadow: inset 0 0 0 1px var(--edge-night); color: var(--creme); transition: transform .4s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq .acc { padding: 0 3.25rem 1.5rem 0; color: var(--on-night-2); }
.faq .acc p { margin: 0; }

/* ── Vorher/Nachher-Schieber ([data-ba], Logik in ba.js) ─────────────────
   Ohne clip-path: das »Nachher«-Fenster wird verschoben, sein Inhalt gegenläufig (nur transform). */
.ba { --p: 50; position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.ba-layer { position: absolute; inset: 0; }
.ba-new { overflow: hidden; transform: translate3d(calc(var(--p) * 1%), 0, 0); will-change: transform; }
.ba-new > .ba-in { position: absolute; inset: 0; transform: translate3d(calc(var(--p) * -1%), 0, 0); will-change: transform; }
.ba-rail { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translate3d(calc(var(--p) * 1%), 0, 0); will-change: transform; }
.ba-rail::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(8, 10, 20, .3); }
.ba-knob { position: absolute; left: calc(-1.5rem - (var(--p) - 50) * .03rem); top: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-float); cursor: ew-resize; pointer-events: auto; touch-action: none; transition: transform var(--t-fast) var(--ease-out); }
.ba-knob:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; box-shadow: 0 0 0 6px var(--creme), var(--shadow-float); }  /* zweifarbig: sichtbar auf hellem und dunklem Grund */
.ba.is-drag .ba-knob { transform: scale(1.08); }
.ba-tags { display: flex; justify-content: space-between; margin-top: .875rem; font-size: var(--fs-sm); font-weight: 500; color: var(--on-night-2); }

/* Vergleich (Website-Beispiel + Vorschau-Seite): Entwurf zuerst ganz sichtbar, Umschalter »Heute/Entwurf« + Regler,
   Unterschiede als Text daneben (aria-describedby am Regler). Bilder: Handy-Aufnahme 390×844, ab 56rem Desktop 1440×900. */
.cmp { display: grid; gap: 2rem; margin-top: 2.25rem; }
.cmp-stage { min-width: 0; }
.seg { display: inline-flex; padding: .25rem; margin-bottom: .875rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--edge-night); }
.seg button { min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: var(--pill); background: transparent; color: var(--on-night-2); font: 500 var(--fs-sm)/1 var(--sans); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--creme); color: var(--night); }
.cmp-ba { aspect-ratio: 390 / 844; max-height: 80svh; margin-inline: auto; border-radius: 1rem; background: var(--night-3); box-shadow: 0 0 0 1px var(--line-night), var(--shadow-deep); }
.cmp-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-user-drag: none; }
.hint { margin: .75rem 0 0; font-size: var(--fs-sm); color: var(--on-night-2); }
.hint .kbd { display: none; }   /* Tastatur-Hinweis nur mit Maus/Tastatur sichtbar */
@media (hover: hover) and (pointer: fine) { .hint .kbd { display: inline; } }
.cmp-txt .nlist { border-top: 1px solid var(--line-night); }
.cmp-txt > .btn { margin-top: 1.75rem; }
@media (min-width: 56rem) {
  .cmp { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .cmp-ba { aspect-ratio: 1440 / 900; max-height: none; }
  .cmp-txt { padding-top: 3.75rem; }
}

/* Einmalige Einblendung für Nebeninhalte (nur mit JS, nie bei reduzierter Bewegung).
   Fail-open: .js nimmt das Inline-Skript im <head> wieder weg, wenn ba.js nicht lädt (onerror / 2,5 s ohne window.wwReady). */
.js [data-rv] { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-rv].in { opacity: 1; transform: none; }

/* Leiste unten (mobil): Rundbild + Anruf-Pille */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: .5rem; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); background: rgba(8, 10, 20, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--line-night), 0 -10px 30px -12px rgba(8, 10, 20, .45); }
/* Versteckt nur mit JS – und dann auch für die Tastatur (visibility), ohne JS bleibt die Leiste einfach stehen. */
.js .dock { transform: translate3d(0, 110%, 0); visibility: hidden; transition: transform .4s var(--ease-drawer), visibility 0s .4s; }
.js .dock.on { transform: none; visibility: visible; transition: transform .4s var(--ease-drawer); }
.dock .btn { flex: 1; min-height: 3.25rem; }
.dock .btn small { display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 400; opacity: .7; }
.dock .btn span { display: block; text-align: left; line-height: 1.1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-rv] { opacity: 1; transform: none; }
}

/* ── Main-site studio components · opt-in .ww-main ──────────────────── */
.ww-main { background:var(--ww-bg);color:var(--ww-ink);font-family:var(--sans);scroll-behavior:smooth }
.ww-main :focus-visible { outline:2px solid var(--ww-focus);outline-offset:4px }
.ww-main p { color:var(--ww-muted);margin:0 0 var(--ww-s6);max-width:65ch }
.ww-main a { text-underline-offset:.25em }
.ww-main [hidden] { display:none!important }
.ww-main .ww-sprite { position:absolute;width:0;height:0;overflow:hidden }
.ww-container { width:100%;max-width:var(--ww-max);padding-inline:var(--ww-gutter);margin-inline:auto }
.ww-section { padding-block:var(--ww-section);border-top:1px solid var(--ww-border);scroll-margin-top:6rem }
.ww-section-soft { background:var(--ww-soft) }
.ww-section-white { background:var(--ww-surface) }
.ww-heading { margin:0 0 var(--ww-s6);font:600 var(--ww-h2)/1.08 var(--sans);letter-spacing:-.035em;max-width:22ch }
.ww-heading em,.ww-h1 em { font-family:var(--serif);font-weight:400;font-style:italic;color:var(--ww-green);letter-spacing:-.025em }
.ww-label { font:500 var(--ww-small)/1.4 var(--sans);color:var(--ww-green)!important;margin:0 0 var(--ww-s3)!important }
.ww-section-head { text-align:center;max-width:44rem;margin:0 auto var(--ww-s12) }
.ww-section-head .ww-heading,.ww-section-head p { margin-inline:auto }
.ww-section-head>p:last-child { margin-bottom:0 }
.ww-divider { display:flex;gap:var(--ww-s6);align-items:center;margin-bottom:var(--ww-s12);color:var(--ww-muted);font-size:var(--ww-small) }
.ww-divider:before,.ww-divider:after { content:'';height:1px;flex:1;background:var(--ww-border) }
.ww-grid { display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ww-s10);align-items:center }
.ww-btn { min-height:var(--ww-control);display:inline-flex;align-items:center;justify-content:center;gap:var(--ww-s3);padding:var(--ww-s3) var(--ww-s6);border:1px solid var(--ww-green);border-radius:var(--pill);font:500 var(--ww-ui)/1.25 var(--sans);text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:transform var(--t-fast) var(--ease-out),box-shadow .2s,background .2s }
.ww-btn svg { width:var(--ww-s5);height:var(--ww-s5);flex:none }
.ww-btn-primary { background:var(--ww-green);color:var(--ww-surface);box-shadow:var(--ww-shadow) }
.ww-btn-outline { background:transparent;color:var(--ww-ink);border-color:var(--ww-border) }
.ww-btn:hover { transform:translateY(-2px) }
.ww-btn-primary:hover { background:var(--ww-green-hover) }
.ww-btn-outline:hover { background:var(--ww-mint);border-color:var(--ww-green) }
.ww-actions { display:flex;gap:var(--ww-s3);align-items:center;flex-wrap:wrap }
.ww-text-link { display:inline-flex;align-items:center;gap:var(--ww-s3);min-height:var(--ww-hit);color:var(--ww-green);font-weight:500 }
.ww-small { font-size:var(--ww-small);line-height:1.6 }
.ww-pill { display:inline-flex;align-items:center;gap:var(--ww-s2);padding:var(--ww-s2) var(--ww-s4);border:1px solid var(--ww-border);border-radius:var(--pill);background:var(--ww-surface);font-size:var(--ww-small) }
.ww-dot { display:inline-block;width:var(--ww-s2);height:var(--ww-s2);background:var(--ww-green);border-radius:50%;flex:none }
.ww-header { position:relative;z-index:30;padding:var(--ww-s4) var(--ww-s4) 0 }
.ww-header-inner { display:flex;align-items:center;justify-content:space-between;gap:var(--ww-s4);max-width:var(--ww-max);margin:auto;min-height:4.5rem;padding:var(--ww-s2) var(--ww-s3) var(--ww-s2) var(--ww-s6);border:1px solid var(--ww-border);border-radius:var(--pill);background:var(--ww-header-bg);box-shadow:var(--ww-shadow) }
.ww-logo { display:inline-flex;align-items:center;min-height:var(--ww-hit);color:var(--ww-ink);text-decoration:none;flex:none }
.ww-logo svg { width:6.5rem;height:2.5rem }
.ww-nav { display:none;gap:var(--ww-s5) }
.ww-nav a { font-size:var(--ww-small);text-decoration:none;min-height:var(--ww-hit);display:flex;align-items:center;color:var(--ww-muted) }
.ww-nav a:hover { color:var(--ww-green) }
.ww-header-end { display:flex;gap:var(--ww-s2);align-items:center }
.ww-header-end>.ww-btn { min-height:var(--ww-hit);padding-inline:var(--ww-s4) }
.ww-menu { position:relative }
.ww-menu summary { display:grid;place-items:center;min-width:var(--ww-hit);height:var(--ww-hit);border:1px solid var(--ww-border);border-radius:50%;cursor:pointer;list-style:none }
.ww-menu summary::-webkit-details-marker { display:none }
.ww-menu summary svg { width:var(--ww-s5);height:var(--ww-s5) }
.ww-menu nav { position:absolute;top:calc(100% + var(--ww-s5));right:0;width:min(20rem,calc(100vw - var(--ww-s8)));padding:var(--ww-s4);background:var(--ww-surface);border:1px solid var(--ww-border);border-radius:var(--ww-radius);box-shadow:var(--ww-shadow) }
.ww-menu nav a { display:flex;min-height:var(--ww-hit);align-items:center;padding:var(--ww-s2) var(--ww-s3);text-decoration:none;border-bottom:1px solid var(--ww-border) }
.ww-menu nav a:last-child { border:0 }
.ww-hero { position:relative;isolation:isolate;overflow:hidden;padding:var(--ww-s12) 0 var(--ww-s10);background:var(--ww-bg) }
.ww-hero .ww-grid { position:relative;z-index:1 }
.ww-hero-copy { min-width:0 }
.ww-proof { display:inline-flex;align-items:center;gap:var(--ww-s3);min-height:var(--ww-hit);border:1px solid var(--ww-border);border-radius:var(--pill);padding:var(--ww-s1) var(--ww-s4) var(--ww-s1) var(--ww-s1);background:var(--ww-surface);text-decoration:none;font-size:var(--ww-small);margin-bottom:var(--ww-s6) }
.ww-proof img { width:var(--ww-s8);height:var(--ww-s8);border-radius:50%;object-fit:cover;object-position:50% 25% }
.ww-h1 { margin:0 0 var(--ww-s6);font:600 var(--ww-h1)/1.05 var(--sans);letter-spacing:-.045em }
.ww-h1 em { display:block;font-size:var(--ww-h1-em);line-height:1.03 }
.ww-hero-lead { font-size:var(--ww-body);line-height:1.7;max-width:33rem;color:var(--ww-ink)!important;margin-bottom:var(--ww-s8)!important }
.ww-trust { list-style:none;padding:0;margin:var(--ww-s6) 0 0;display:flex;gap:var(--ww-s3) var(--ww-s6);flex-wrap:wrap;color:var(--ww-muted);font-size:var(--ww-small) }
.ww-trust li { display:flex;align-items:center;gap:var(--ww-s2) }
.ww-trust svg { width:var(--ww-s4);height:var(--ww-s4);color:var(--ww-green);flex:none }
.ww-device-scene { position:relative;aspect-ratio:1.1;max-width:35rem;width:100%;margin:0 auto;isolation:isolate }
.ww-device-scene:after { content:'';position:absolute;bottom:var(--ww-s8);left:10%;right:0;height:20%;background:radial-gradient(ellipse,var(--ww-mint),transparent 70%);z-index:-1 }
.ww-monitor { position:absolute;right:0;top:var(--ww-s5);width:88%;transform:perspective(90rem) rotateY(-7deg) rotateZ(-2deg) }
.ww-monitor-screen { background:var(--ww-monitor-screen-gradient);padding:var(--ww-s2) var(--ww-s2) var(--ww-s4);border-radius:var(--ww-radius-sm);box-shadow:var(--ww-device-shadow) }
.ww-monitor-screen img { display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:var(--ww-s1) }
.ww-monitor-stem { width:13%;height:var(--ww-s12);margin:auto;background:var(--ww-monitor-stem-gradient);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%) }
.ww-monitor-base { width:55%;height:var(--ww-s3);margin:auto;border-radius:50%;background:var(--ww-monitor-base-gradient);box-shadow:var(--ww-shadow) }
.ww-phone { position:absolute;left:0;top:20%;width:29%;padding:var(--ww-s1);background:var(--ww-ink);border:2px solid var(--ww-phone-border);border-radius:var(--ww-s6);box-shadow:var(--ww-device-shadow);transform:rotate(-3deg) }
.ww-phone img { width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:var(--ww-s5) }
.ww-phone:after { content:'';position:absolute;top:var(--ww-s2);left:33%;width:34%;height:var(--ww-s2);border-radius:var(--pill);background:var(--ww-ink) }
.ww-device-caption { position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:var(--ww-small) }
.ww-trade-strip { border-block:1px solid var(--ww-border);padding-block:var(--ww-s5);background:var(--ww-surface) }
.ww-trade-strip .ww-container { display:flex;gap:var(--ww-s6);justify-content:space-between;flex-wrap:wrap;color:var(--ww-muted);font-size:var(--ww-small) }
/* Portfolio studies: the image is the main content, text explains decisions. */
.ww-portfolio-head { display:grid;gap:var(--ww-s6);margin-bottom:var(--ww-s10);align-items:end }
.ww-portfolio-head .ww-heading { margin-bottom:0;max-width:22ch }
.ww-portfolio-head>p { margin:0;max-width:var(--ww-study-measure) }
.ww-projects { display:grid;gap:var(--ww-study-gap);align-items:start }
.ww-project { min-width:0 }
.ww-study-frame { border:1px solid var(--ww-border);border-radius:var(--ww-study-radius);overflow:hidden;background:var(--ww-surface);box-shadow:var(--ww-shadow) }
.ww-study-bar { display:flex;gap:var(--ww-s3);align-items:center;min-height:var(--ww-hit);padding:var(--ww-s2) var(--ww-s4);border-bottom:1px solid var(--ww-border);font-size:var(--ww-small);color:var(--ww-muted) }
.ww-study-dots { display:flex;gap:var(--ww-s1);flex:none }
.ww-study-dots i { width:var(--ww-s2);height:var(--ww-s2);background:var(--ww-study-dot);border-radius:50% }
.ww-study-badge { margin-left:auto;color:var(--ww-green) }
.ww-study-window { height:var(--ww-study-window-height);overflow:hidden;scroll-behavior:auto;background:var(--ww-soft) }
.ww-study-window picture,.ww-study-window img { display:block;width:100%;height:auto;max-width:100% }
.ww-study-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ww-s2);padding:var(--ww-s2) var(--ww-s4);min-height:var(--ww-control);border-top:1px solid var(--ww-border);font-size:var(--ww-small);color:var(--ww-muted) }
.ww-study-play { display:inline-flex;align-items:center;justify-content:center;min-height:var(--ww-hit);padding:var(--ww-s2) var(--ww-s3);border:1px solid var(--ww-border);border-radius:var(--pill);font:500 var(--ww-ui)/1.3 var(--sans);color:var(--ww-green);background:var(--ww-surface);cursor:pointer }
.ww-study-play:hover { background:var(--ww-soft) }
.ww-study-play[aria-pressed=true] { color:var(--ww-surface);background:var(--ww-green);border-color:var(--ww-green) }
.ww-project-copy { padding-top:var(--ww-s6);max-width:var(--ww-study-measure) }
.ww-project-copy h3 { font:500 var(--ww-study-title)/1.2 var(--sans);letter-spacing:-.025em;margin:var(--ww-s2) 0 var(--ww-s3) }
.ww-project-copy .ww-study-task { font-weight:500;color:var(--ww-ink);margin-bottom:var(--ww-s3) }
.ww-project-copy p[data-study-summary] { font-size:var(--ww-body);line-height:1.65;margin-bottom:var(--ww-s3) }
.ww-project-copy .ww-text-link { text-decoration:underline }
.ww-project-note { border-top:1px solid var(--ww-border);padding-top:var(--ww-s5);margin:var(--ww-s10) 0 0!important;font-size:var(--ww-small);max-width:none!important }
.ww-study-dialog { width:calc(100% - var(--ww-s8));max-width:var(--ww-study-dialog-width);height:var(--ww-study-dialog-height);max-height:var(--ww-study-dialog-height);padding:0;border:1px solid var(--ww-border);border-radius:var(--ww-study-radius);color:var(--ww-ink);background:var(--ww-surface);box-shadow:var(--ww-device-shadow);overflow:hidden }
.ww-study-dialog[open] { display:flex;flex-direction:column }
html:has(.ww-study-dialog[open]) { overflow:hidden }
.ww-study-dialog::backdrop { background:var(--ww-study-backdrop) }
.ww-study-dialog-head { display:flex;align-items:start;justify-content:space-between;gap:var(--ww-s4);padding:var(--ww-s5);flex:none }
.ww-study-dialog-head .ww-label { margin-bottom:var(--ww-s2)!important }
.ww-study-dialog-head h2 { font:500 var(--ww-h3)/1.2 var(--sans) }
.ww-study-close { display:flex;align-items:center;justify-content:center;gap:var(--ww-s2);flex:none;min-height:var(--ww-hit);padding:var(--ww-s2) var(--ww-s3);font:500 var(--ww-ui)/1.2 var(--sans);border:1px solid var(--ww-border);border-radius:var(--pill);background:var(--ww-surface);color:var(--ww-green);cursor:pointer }
.ww-study-close:hover { background:var(--ww-soft) }
.ww-study-description { padding:0 var(--ww-s5) var(--ww-s5);margin:0!important;font-size:var(--ww-small);max-width:none!important;flex:none }
.ww-study-dialog-media { overflow:auto;overscroll-behavior:contain;min-height:0;border-top:1px solid var(--ww-border);background:var(--ww-soft) }
.ww-study-dialog-media img { display:block;width:100%;height:auto;max-width:100% }
@media (min-width:56rem) {
 .ww-portfolio-head { grid-template-columns:1.1fr 1fr;gap:var(--ww-study-gap) }
 .ww-project-secondary { padding-top:var(--ww-s12) }
 .ww-project-secondary .ww-study-window { height:var(--ww-study-window-secondary) }
}
@media (max-width:47.99rem) {
 .ww-study-window { height:var(--ww-study-window-mobile) }
 .ww-study-dialog { width:calc(100% - var(--ww-s4)) }
 .ww-study-dialog-head { padding:var(--ww-s4);gap:var(--ww-s2) }
 .ww-study-description { padding:0 var(--ww-s4) var(--ww-s4) }
 .ww-study-dots { display:none }
}
.ww-story-photo { margin:0;position:relative;max-width:27rem;width:100% }
.ww-story-photo>img { width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--ww-radius) }
.ww-main .ww-story-photo img { display:block }
.ww-story-photo figcaption { position:absolute;bottom:var(--ww-s4);left:var(--ww-s4);right:var(--ww-s4);padding:var(--ww-s4);border-radius:var(--ww-radius-sm);background:var(--ww-surface);box-shadow:var(--ww-shadow) }
.ww-story-photo figcaption span { display:block;color:var(--ww-muted);font-size:var(--ww-small) }
.ww-quote { margin:var(--ww-s6) 0;padding-left:var(--ww-s5);border-left:2px solid var(--ww-green);font:italic 400 var(--ww-h3)/1.4 var(--serif) }
.ww-steps { list-style:none;padding:0;margin:0;counter-reset:steps }
.ww-steps li { counter-increment:steps;display:grid;grid-template-columns:var(--ww-s8) minmax(0,1fr);gap:var(--ww-s4);padding:var(--ww-s5) 0;border-bottom:1px solid var(--ww-border) }
.ww-steps li:before { content:counter(steps,decimal-leading-zero);color:var(--ww-green);font:italic 400 var(--ww-body)/1.4 var(--serif) }
.ww-steps h3 { font:500 var(--ww-h3)/1.2 var(--serif) }
.ww-steps p { font-size:var(--ww-small);margin:var(--ww-s2) 0 0 }
.ww-main .cmp { margin-top:0 }
.ww-main .cmp-ba { --p:0;max-width:24rem;border:1px solid var(--ww-border) }
.ww-main .ba-tags,.ww-main .hint { color:var(--ww-muted) }
.ww-main .ba-knob { background:var(--ww-surface);color:var(--ww-green) }
.ww-main .seg { box-shadow:inset 0 0 0 1px var(--ww-border) }
.ww-main .seg button[aria-pressed=true] { color:var(--ww-surface);background:var(--ww-green) }
.ww-wa-section { background:var(--ww-soft) }
.ww-wa-demo { max-width:25rem;width:100%;margin:auto;scroll-margin-top:var(--ww-s8) }
.ww-wa-demo>p { font-size:var(--ww-small);text-align:center;margin:var(--ww-s4) 0 0 }
.ww-wa-note { display:flex;gap:var(--ww-s3);align-items:start;background:var(--ww-surface);padding:var(--ww-s5);border:1px solid var(--ww-border);border-radius:var(--ww-radius-sm);margin-block:var(--ww-s6) }
.ww-wa-note .ww-dot { margin-top:var(--ww-s2) }
.ww-wa-note p { margin:0;font-size:var(--ww-small) }
.ww-plans { display:grid;gap:var(--ww-s6) }
.ww-plan { position:relative;padding:var(--ww-s8);border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-surface);display:flex;flex-direction:column;min-width:0;transition:transform var(--ww-wa-duration),box-shadow var(--ww-wa-duration) }
.ww-plan:hover { transform:translateY(-3px);box-shadow:var(--ww-shadow) }
.ww-plan-featured { border:2px solid var(--ww-green);box-shadow:var(--ww-shadow);background:linear-gradient(180deg,var(--ww-mint),var(--ww-surface) 9rem) }
.ww-plan-head { display:flex;align-items:center;justify-content:space-between;gap:var(--ww-s3);flex-wrap:wrap;min-height:var(--ww-s8) }
.ww-plan-head .ww-label { margin:0!important }
.ww-plan-badge { display:inline-flex;align-items:center;padding:var(--ww-s1) var(--ww-s3);border-radius:var(--pill);background:var(--ww-green);color:var(--ww-surface);font:600 var(--ww-small)/1.3 var(--sans) }
.ww-plan h3 { font:600 var(--ww-h3)/1.25 var(--sans);letter-spacing:-.02em;margin:var(--ww-s4) 0 var(--ww-s5) }
.ww-plan .ww-plan-sub { margin:0 0 var(--ww-s4)!important;color:var(--ww-muted) }
.ww-plan .ww-plan-perk { align-self:flex-start;display:inline-flex;align-items:center;gap:var(--ww-s2);margin:0!important;padding:var(--ww-s2) var(--ww-s3);border-radius:var(--ww-radius-sm);background:var(--ww-green-pale);color:var(--ww-green)!important;font-weight:600;font-size:var(--ww-small) }
.ww-plan .ww-plan-perk:before { content:'★';font-size:.9em }
.ww-plan-price { display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--ww-s2);font:700 var(--ww-price)/1 var(--sans);letter-spacing:-.045em;margin-bottom:var(--ww-s3) }
.ww-plan-price span { font:400 var(--ww-body)/1.4 var(--sans);letter-spacing:0 }
.ww-plan ul { list-style:none;padding:var(--ww-s6) 0 0;margin:var(--ww-s6) 0 var(--ww-s8);border-top:1px solid var(--ww-border);display:grid;gap:var(--ww-s3) }
.ww-plan li { display:flex;align-items:flex-start;gap:var(--ww-s3);font-size:var(--ww-small);line-height:1.5 }
.ww-plan li:before { content:'✓';flex:none;display:grid;place-items:center;width:var(--ww-s6);height:var(--ww-s6);border-radius:50%;background:var(--ww-green-pale);color:var(--ww-green);font-size:.8em;font-weight:700;line-height:1 }
.ww-plan .ww-btn { width:100%;margin-top:auto }
.ww-plan-summary { text-align:center;margin:var(--ww-s6) auto 0!important }
.ww-test-banner { border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-mint);padding:var(--ww-s6);margin-bottom:var(--ww-s8);display:flex;gap:var(--ww-s6);align-items:center;justify-content:center;text-align:center;flex-wrap:wrap }
.ww-test-banner strong { font:500 var(--ww-h3)/1.2 var(--serif) }
.ww-test-banner p { margin:0 }
.ww-services { display:grid;gap:var(--ww-s4) }
.ww-service { padding:var(--ww-s6);border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-bg);transition:transform var(--ww-wa-duration),box-shadow var(--ww-wa-duration) }
.ww-service:hover { transform:translateY(-2px);box-shadow:var(--ww-shadow) }
.ww-service-top { display:flex;justify-content:space-between;align-items:center }
.ww-service-icon { width:var(--ww-s12);height:var(--ww-s12);padding:var(--ww-s3);border-radius:var(--ww-radius-sm);background:var(--ww-green-pale);color:var(--ww-green) }
.ww-service-top>span { color:var(--ww-green);font-family:var(--serif);font-style:italic }
.ww-service h3 { font:500 var(--ww-h3)/1.2 var(--serif);margin:var(--ww-s5) 0 var(--ww-s2) }
.ww-service p { font-size:var(--ww-small);margin:0 }
.ww-faq { max-width:52rem;margin:auto }
.ww-faq details { border-bottom:1px solid var(--ww-border) }
.ww-faq summary { display:flex;gap:var(--ww-s5);align-items:center;justify-content:space-between;min-height:var(--ww-control);padding:var(--ww-s5) 0;list-style:none;cursor:pointer;font-weight:500 }
.ww-faq summary::-webkit-details-marker { display:none }
.ww-faq summary:after { content:'+';font-size:var(--ww-h3);color:var(--ww-green);flex:none }
.ww-faq details[open] summary:after { content:'−' }
.ww-faq details p { padding-bottom:var(--ww-s4);margin:0 }
.ww-contact { background:var(--ww-mint) }
.ww-contact-card { padding:var(--ww-s8);background:var(--ww-surface);border:1px solid var(--ww-border);border-radius:var(--ww-radius) }
.ww-contact-card h3 { font:500 var(--ww-h3)/1.2 var(--serif);margin-bottom:var(--ww-s5) }
.ww-contact-list { list-style:none;padding:0;margin:var(--ww-s6) 0 }
.ww-contact-list li { border-bottom:1px solid var(--ww-border);padding-block:var(--ww-s4) }
.ww-contact-list a { min-height:var(--ww-hit);display:flex;align-items:center;gap:var(--ww-s3);color:var(--ww-green);overflow-wrap:anywhere }
.ww-contact-list svg { width:var(--ww-s5);height:var(--ww-s5);flex:none }
.ww-field { display:grid;gap:var(--ww-s2);margin-bottom:var(--ww-s5) }
.ww-field input,.ww-field textarea { width:100%;min-height:var(--ww-control);font:400 var(--ww-ui)/1.5 var(--sans);color:var(--ww-ink);background:var(--ww-bg);border:1px solid var(--ww-border);border-radius:var(--ww-radius-sm);padding:var(--ww-s3) var(--ww-s4) }
.ww-field textarea { min-height:7rem;resize:vertical }
.ww-status { padding:var(--ww-s4);background:var(--ww-soft);border-radius:var(--ww-radius-sm);color:var(--ww-ink)!important }
.ww-footer { padding:var(--ww-s12) 0 var(--ww-s20);border-top:1px solid var(--ww-border);background:var(--ww-surface) }
.ww-footer-grid { display:grid;gap:var(--ww-s8) }
.ww-footer p { font-size:var(--ww-small);margin:var(--ww-s4) 0 0 }
.ww-footer nav { display:flex;flex-wrap:wrap;gap:var(--ww-s2) var(--ww-s6) }
.ww-footer nav a { display:flex;align-items:center;min-width:var(--ww-hit);min-height:var(--ww-hit);font-size:var(--ww-small);color:var(--ww-muted) }
.ww-footer-bottom { margin-top:var(--ww-s8);padding-top:var(--ww-s5);border-top:1px solid var(--ww-border);display:flex;gap:var(--ww-s4);flex-wrap:wrap;justify-content:space-between;color:var(--ww-muted);font-size:var(--ww-small) }
.ww-dock { position:fixed;z-index:25;bottom:var(--ww-s4);right:var(--ww-s4);display:flex;gap:var(--ww-s2);align-items:center;box-shadow:var(--ww-shadow);border-radius:var(--pill);background:var(--ww-surface);padding:var(--ww-s2);border:1px solid var(--ww-border) }
.ww-dock .ww-btn { min-height:var(--ww-hit);padding:var(--ww-s2) var(--ww-s4) }
.ww-dock a:last-child { display:grid;place-items:center;min-width:var(--ww-hit);height:var(--ww-hit);border-radius:50%;color:var(--ww-green) }
.ww-dock svg { width:var(--ww-s5);height:var(--ww-s5) }
.ww-dock { transition:opacity var(--ww-wa-duration),visibility var(--ww-wa-duration) }
.ww-dock.ww-chat-visible { visibility:hidden;opacity:0;pointer-events:none }
.ww-legal-shell .legal { padding-top:var(--ww-s12);color:var(--ww-ink) }
.ww-main .legal { overflow-wrap:anywhere }
.ww-main .legal .todo { font-size:var(--ww-small);white-space:normal;overflow-wrap:anywhere;padding-inline:0;box-decoration-break:slice;-webkit-box-decoration-break:slice }
.ww-main .legal h1 { font-weight:400 }
.ww-main .legal h2 { color:var(--ww-ink) }
.ww-main .legal p,.ww-main .legal li { color:var(--ww-muted) }
.ww-main .legal a { color:var(--ww-green) }
.ww-main [data-ww-reveal].ww-waiting { opacity:0;transform:translateY(var(--ww-s5));transition:opacity var(--ww-duration) var(--ease-out),transform var(--ww-duration) var(--ease-out) }
.ww-main [data-ww-reveal].ww-visible { opacity:1;transform:none }
.ww-ambient { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0 }
.ww-motion-toggle { position:absolute;bottom:var(--ww-s3);left:var(--ww-gutter);z-index:2;min-height:var(--ww-hit);padding:var(--ww-s2) var(--ww-s4);border:1px solid var(--ww-border);border-radius:var(--pill);background:var(--ww-surface);color:var(--ww-muted);font:400 var(--ww-small)/1.2 var(--sans);cursor:pointer }
@media (min-width:56rem) {
 .ww-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ww-s16) }
 .ww-hero { min-height:42rem;padding:var(--ww-s12) 0 var(--ww-s16);display:flex;align-items:center }
 .ww-device-scene { max-width:none }
 .ww-projects { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .ww-plans { grid-template-columns:repeat(2,minmax(0,1fr)) }
 .ww-services { grid-template-columns:repeat(3,minmax(0,1fr)) }
 .ww-footer-grid { grid-template-columns:1fr 1fr;align-items:center }
 .ww-main .cmp-ba { aspect-ratio:1440/900;max-width:none }
}
@media (min-width:70rem) { .ww-nav { display:flex }.ww-menu { display:none } }
@media (max-width:47.99rem) {
 .ww-header { padding:var(--ww-s2) var(--ww-s2) 0 }
 .ww-header-inner { min-height:4rem;padding:var(--ww-s2) var(--ww-s2) var(--ww-s2) var(--ww-s4);gap:var(--ww-s2) }
 .ww-logo svg { width:5.5rem;height:2.25rem }
 .ww-header-end>.ww-btn { padding-inline:var(--ww-s3) }
 .ww-label { font-size:var(--ww-ui) }
 .ww-section-head { margin-bottom:var(--ww-s8) }
 .ww-divider { margin-bottom:var(--ww-s8) }
 .ww-heading { max-width:100% }
 .ww-device-scene { max-width:23rem }
 .ww-monitor-screen { padding:var(--ww-s1) var(--ww-s1) var(--ww-s2) }
 .ww-monitor-stem { height:var(--ww-s8) }
 .ww-monitor-base { height:var(--ww-s2) }
 .ww-device-caption { bottom:calc(-1 * var(--ww-s4));font-size:var(--ww-ui) }
 .ww-hero { padding-top:var(--ww-s6);padding-bottom:var(--ww-s16) }
 .ww-hero .ww-grid { gap:var(--ww-s6) }
 .ww-proof { margin-bottom:var(--ww-s4) }
 .ww-hero-lead { margin-bottom:var(--ww-s6)!important }
 .ww-trust { margin-top:var(--ww-s5);gap:var(--ww-s2) var(--ww-s4) }
 .ww-plan h3 { margin-bottom:var(--ww-s4) }
 .ww-trade-strip { padding-block:var(--ww-s4) }
 .ww-trade-strip .ww-container { gap:var(--ww-s2);justify-content:center }
 .ww-trade-strip span { padding:var(--ww-s1) var(--ww-s3);border-radius:var(--pill);background:var(--ww-soft);color:var(--ww-ink) }
 .ww-wa-note { display:none }
 .ww-service { padding:var(--ww-s5) }
 .ww-story-photo { max-width:22rem;margin:auto }
 .ww-plan { padding:var(--ww-s6) }
 .ww-contact-card { padding:var(--ww-s6) }
 .ww-dock { left:var(--ww-s3);right:var(--ww-s3);bottom:max(var(--ww-s3),env(safe-area-inset-bottom));justify-content:space-between }
 .ww-dock .ww-btn { flex:1 }
 .ww-motion-toggle { bottom:var(--ww-s3);left:50%;transform:translateX(-50%);font-size:var(--ww-ui);white-space:nowrap }
 .ww-hero { padding-bottom:calc(var(--ww-hit) + var(--ww-s10)) }
}
@media (max-width:23rem) { .ww-header-end>.ww-btn span { display:none }.ww-header-end>.ww-btn { min-width:var(--ww-hit);padding-inline:var(--ww-s3) }.ww-proof { border-radius:var(--ww-radius);font-size:var(--ww-ui) }.ww-h1 em { font-size:var(--ww-h1-em-compact) } }
@media (prefers-reduced-motion:reduce) { .ww-main [data-ww-reveal].ww-waiting { opacity:1;transform:none }.ww-main * { scroll-behavior:auto!important;transition:none!important;animation:none!important } }

/* Mia: WhatsApp-like demo chat. Phone frame on desktop, full chat card on phones.
   Message text stays 16px; only timestamps, date/system chips and the header status use --ww-wa-small/--ww-wa-chip-type. */
.mia { position:relative;width:100%;height:var(--ww-wa-height);max-height:var(--ww-wa-max-height);min-height:var(--ww-wa-min-height);padding:var(--ww-wa-frame-padding);border-radius:var(--ww-wa-frame-radius);background:var(--ww-wa-frame);box-shadow:inset 0 0 0 2px var(--ww-wa-frame-edge),var(--ww-wa-shadow);font-family:var(--ww-sans);font-size:var(--ww-wa-type);line-height:var(--ww-wa-line);color:var(--ww-wa-ink);text-align:left }
.mia *, .mia *::before, .mia *::after { box-sizing:border-box }
.mia p, .mia h3, .mia h4, .mia figure { margin:0 }
.mia button, .mia input, .mia a { font-family:inherit;font-size:var(--ww-wa-type);line-height:var(--ww-wa-line) }
.mia button { cursor:pointer;-webkit-tap-highlight-color:transparent }
.mia button:disabled { cursor:default }
.mia button:focus-visible, .mia input:focus-visible, .mia a:focus-visible, .mia__log:focus-visible { outline:2px solid var(--ww-wa-accent);outline-offset:2px }
.mia svg { display:block;flex:none }
.mia__screen { position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--ww-wa-screen-radius);background:var(--ww-wa-wallpaper) }
.mia__status { flex:none;display:flex;align-items:center;justify-content:space-between;height:var(--ww-wa-status-height);padding:0 var(--ww-s6) 0 var(--ww-s8);background:var(--ww-wa-bar);font-weight:600;font-size:var(--ww-wa-chip-type);font-variant-numeric:tabular-nums }
.mia__status::after { content:'';position:absolute;top:var(--ww-s2);left:50%;width:var(--ww-wa-island);height:calc(var(--ww-wa-status-height) - var(--ww-s4));transform:translateX(-50%);border-radius:var(--pill);background:var(--ww-wa-frame) }
.mia__status-icons { display:flex;gap:var(--ww-s1);align-items:center }
.mia__status-icons svg { width:var(--ww-wa-icon-small);height:var(--ww-wa-icon-small) }
.mia__header { flex:none;display:flex;align-items:center;gap:var(--ww-wa-header-gap);padding:var(--ww-wa-header-padding);background:var(--ww-wa-bar);border-bottom:1px solid var(--ww-wa-bar-edge) }
.mia__back { color:var(--ww-wa-accent);display:flex;align-items:center }
.mia__back svg, .mia__tools svg, .mia__reset svg, .mia__send svg, .mia__composer-icon svg { width:var(--ww-wa-icon);height:var(--ww-wa-icon) }
.mia__avatar { display:grid;place-items:center;flex:none;width:var(--ww-wa-avatar);height:var(--ww-wa-avatar);border-radius:50%;background:var(--ww-wa-accent);color:var(--ww-wa-on-accent);font:italic 500 var(--ww-wa-avatar-type)/1 var(--ww-serif);padding-bottom:.15em }
.mia__identity { display:flex;flex-direction:column;flex:1;min-width:0 }
.mia__identity strong { font-weight:600;font-size:var(--ww-wa-type);line-height:1.25 }
.mia .mia__presence { color:var(--ww-wa-muted);font-size:var(--ww-wa-small);line-height:1.3 }
.mia__presence--typing { color:var(--ww-wa-accent)!important }
.mia__tools { display:flex;gap:var(--ww-s4);color:var(--ww-wa-ink);padding-inline:var(--ww-s1) }
.mia__reset { display:grid;place-items:center;flex:none;width:var(--ww-wa-target);height:var(--ww-wa-target);border:0;border-radius:50%;background:transparent;color:var(--ww-wa-ink);padding:0 }
.mia__reset:hover { background:var(--ww-wa-bar-edge) }
.mia__log { position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ww-wa-log-padding);background:var(--ww-wa-doodle) var(--ww-wa-wallpaper);background-size:var(--ww-wa-doodle-size);scrollbar-width:thin;scrollbar-color:var(--ww-wa-scrollbar) transparent;display:flex;flex-direction:column }
.mia__chip { align-self:center;max-width:92%;margin:0 0 var(--ww-s3);padding:var(--ww-wa-chip-padding);border-radius:var(--ww-s2);background:var(--ww-wa-in);box-shadow:var(--ww-wa-bubble-shadow);color:var(--ww-wa-muted);font-size:var(--ww-wa-chip-type)!important;text-align:center }
.mia__chip--notice { display:flex;gap:var(--ww-s2);align-items:flex-start;text-align:left;background:var(--ww-wa-notice);color:var(--ww-wa-notice-ink);padding:var(--ww-wa-notice-padding);line-height:1.4 }
.mia__chip--notice svg { width:var(--ww-wa-icon-small);height:var(--ww-wa-icon-small);margin-top:.1rem }
.mia__profile { align-self:center;display:flex;flex-direction:column;align-items:center;gap:var(--ww-s1);width:100%;max-width:19rem;margin:var(--ww-s2) 0 var(--ww-s4);padding:var(--ww-s5) var(--ww-s4) var(--ww-s4);border-radius:var(--ww-s3);background:var(--ww-wa-in);box-shadow:var(--ww-wa-bubble-shadow);text-align:center }
.mia__profile .mia__avatar { width:var(--ww-wa-profile-avatar);height:var(--ww-wa-profile-avatar);font-size:var(--ww-wa-profile-avatar-type);margin-bottom:var(--ww-s2) }
.mia__profile strong { font-weight:600;font-size:1.0625rem }
.mia .mia__profile-role { color:var(--ww-wa-muted) }
.mia .mia__profile-hint { color:var(--ww-wa-ink);margin-top:var(--ww-s3)!important;padding-top:var(--ww-s3);border-top:1px solid var(--ww-wa-bar-edge);width:100% }
.mia__breakers { display:flex;flex-direction:column;gap:var(--ww-s2);width:100%;max-width:19rem;align-self:center }
.mia__breakers .mia__choice { border-radius:var(--pill) }
.mia__row { display:flex;flex-direction:column;align-items:stretch;width:fit-content;max-width:var(--ww-wa-bubble-max);margin-top:var(--ww-wa-gap);animation:mia-arrive var(--ww-wa-duration) ease-out both }
.mia__row--first { margin-top:var(--ww-wa-group-gap) }
.mia__row--in { align-self:flex-start }
.mia__row--out { align-self:flex-end }
.mia__bubble { position:relative;min-width:5rem;padding:var(--ww-wa-bubble-padding);border-radius:var(--ww-wa-bubble-radius);background:var(--ww-wa-in);box-shadow:var(--ww-wa-bubble-shadow);overflow-wrap:anywhere }
.mia__row--out .mia__bubble { background:var(--ww-wa-out) }
.mia__row--first.mia__row--in .mia__bubble { border-top-left-radius:0 }
.mia__row--first.mia__row--out .mia__bubble { border-top-right-radius:0 }
.mia__row--first .mia__bubble::before { content:'';position:absolute;top:0;width:var(--ww-wa-tail);height:var(--ww-wa-tail);background:inherit }
.mia__row--first.mia__row--in .mia__bubble::before { left:calc(-1 * var(--ww-wa-tail) + 1px);clip-path:polygon(100% 0,0 0,100% 100%) }
.mia__row--first.mia__row--out .mia__bubble::before { right:calc(-1 * var(--ww-wa-tail) + 1px);clip-path:polygon(0 0,100% 0,0 100%) }
.mia .mia__text { white-space:pre-line;color:var(--ww-wa-ink) }
.mia__spacer { display:inline-block;width:var(--ww-wa-meta-space-in);height:1px }
.mia__row--out .mia__spacer { width:var(--ww-wa-meta-space-out) }
.mia__meta { position:absolute;right:var(--ww-s2);bottom:var(--ww-s1);display:flex;align-items:center;gap:.2rem;color:var(--ww-wa-muted);font-size:var(--ww-wa-small)!important;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap }
.mia__ticks { display:inline-flex;color:var(--ww-wa-muted);transition:color var(--ww-wa-duration) }
.mia__ticks svg { width:var(--ww-wa-tick);height:var(--ww-wa-tick) }
.mia__ticks[data-state="sent"] .mia__tick-2 { opacity:0 }
.mia__ticks[data-state="read"] { color:var(--ww-wa-read) }
.mia__buttons { display:flex;flex-direction:column;gap:var(--ww-wa-button-gap);margin-top:var(--ww-wa-button-gap) }
.mia__choice { display:flex;align-items:center;justify-content:center;gap:var(--ww-s2);width:100%;min-height:var(--ww-wa-target);padding:var(--ww-s2) var(--ww-s4);border:0;border-radius:var(--ww-wa-bubble-radius);background:var(--ww-wa-in);box-shadow:var(--ww-wa-bubble-shadow);color:var(--ww-wa-link);font-weight:500;text-align:center;transition:background var(--ww-wa-duration),opacity var(--ww-wa-duration) }
.mia__choice svg { width:var(--ww-wa-icon-small);height:var(--ww-wa-icon-small) }
.mia__choice:hover:not(:disabled) { background:var(--ww-wa-card) }
.mia__choice:active:not(:disabled) { transform:scale(.98) }
.mia__choice:disabled { color:var(--ww-wa-muted);opacity:.65 }
.mia__choice--approve:not(:disabled) { color:var(--ww-wa-accent);font-weight:700 }
.mia__media { margin:calc(var(--ww-s1) * -.5) calc(var(--ww-s1) * -1) var(--ww-s2) calc(var(--ww-s1) * -1.5) }
.mia__preview { overflow:hidden;border-radius:var(--ww-wa-card-radius);background:var(--ww-wa-card);border:1px solid var(--ww-wa-card-edge);color:var(--ww-wa-ink) }
.mia__preview-image { position:relative;height:var(--ww-wa-preview-image);overflow:hidden;background:var(--ww-wa-card-edge) }
.mia__preview-image img { display:block;width:100%;height:100%;object-fit:cover }
.mia__preview-status { position:absolute;left:var(--ww-s2);top:var(--ww-s2);padding:.15rem var(--ww-s2);border-radius:var(--pill);background:var(--ww-wa-overlay);color:var(--ww-wa-on-accent);font-size:var(--ww-wa-chip-type)!important;font-weight:500;backdrop-filter:blur(4px) }
.mia__preview-content { padding:var(--ww-s3) var(--ww-s3) var(--ww-s3) }
.mia .mia__preview-label { display:block;color:var(--ww-wa-muted);font-size:var(--ww-wa-chip-type)!important;margin-bottom:var(--ww-s1) }
.mia__preview-title { font-family:var(--ww-serif);font-weight:400;font-size:1.35rem;line-height:1.15;letter-spacing:-.02em;padding:.05em .1em;margin-inline:-.1em }
.mia__hours { display:flex;justify-content:space-between;gap:var(--ww-s2);flex-wrap:wrap;margin-top:var(--ww-s2);padding:var(--ww-s2) .1em 0;border-top:1px solid var(--ww-wa-card-edge) }
.mia__hours > span { color:var(--ww-wa-muted) }
.mia__hours strong { font-weight:600 }
.mia .mia__photo-caption { display:inline-block;color:var(--ww-wa-muted);font-size:var(--ww-wa-chip-type)!important;margin-top:var(--ww-s2)!important }
.mia__changed { background:var(--ww-wa-change);border-radius:.2rem;box-shadow:0 0 0 .15rem var(--ww-wa-change) }
.mia__contact { display:block;color:var(--ww-wa-ink);text-decoration:none;margin:0 calc(var(--ww-s1) * -1) var(--ww-s2) calc(var(--ww-s1) * -1.5) }
.mia__contact-card { display:flex;align-items:center;gap:var(--ww-s3);padding:var(--ww-s2) var(--ww-s3) var(--ww-s3) }
.mia__contact-card img { width:var(--ww-wa-avatar);height:var(--ww-wa-avatar);border-radius:50%;object-fit:cover;flex:none }
.mia__contact-copy { display:flex;flex-direction:column;min-width:0 }
.mia__contact-copy strong { font-weight:600 }
.mia__contact-copy > span { color:var(--ww-wa-muted) }
.mia__contact-action { display:flex;align-items:center;justify-content:center;min-height:var(--ww-wa-target);border-top:1px solid var(--ww-wa-card-edge);color:var(--ww-wa-link);font-weight:500 }
.mia__contact:hover .mia__contact-action { text-decoration:underline }
.mia__typing .mia__bubble { display:flex;gap:.3rem;align-items:center;min-width:0;padding:var(--ww-s3) var(--ww-s4) }
.mia__typing span { width:var(--ww-wa-typing-dot);height:var(--ww-wa-typing-dot);border-radius:50%;background:var(--ww-wa-muted);animation:mia-typing 1.1s infinite }
.mia__typing span:nth-child(2) { animation-delay:.15s }
.mia__typing span:nth-child(3) { animation-delay:.3s }
.mia__footer { flex:none;padding:var(--ww-wa-footer-padding);background:var(--ww-wa-bar);border-top:1px solid var(--ww-wa-bar-edge) }
.mia__composer { display:flex;align-items:center;gap:var(--ww-s2);margin:0;padding:0;border:0;background:transparent;box-shadow:none }
.mia__field { display:flex;align-items:center;flex:1;min-width:0;min-height:var(--ww-wa-input-height);padding:0 var(--ww-s3);border-radius:var(--pill);background:var(--ww-wa-in);border:1px solid var(--ww-wa-bar-edge);gap:var(--ww-s2) }
.mia__composer-icon { display:flex;color:var(--ww-wa-muted);pointer-events:none }
.mia__input { flex:1;min-width:0;width:auto;height:var(--ww-wa-input-height);padding:0;border:0;background:transparent;color:var(--ww-wa-ink);box-shadow:none;outline:0 }
.mia .mia__input:focus-visible { outline:0 }
.mia__field:focus-within { border-color:var(--ww-wa-accent);box-shadow:0 0 0 1px var(--ww-wa-accent) }
.mia__input::placeholder { color:var(--ww-wa-muted);opacity:1 }
.mia__send { display:grid;place-items:center;flex:none;width:var(--ww-wa-input-height);height:var(--ww-wa-input-height);padding:0;border:0;border-radius:50%;background:var(--ww-wa-accent);color:var(--ww-wa-on-accent);transition:background var(--ww-wa-duration),transform var(--ww-wa-duration) }
.mia__send:hover { background:var(--ww-wa-accent-hover) }
.mia__send:active { transform:scale(.94) }
.mia__send .mia__icon-send, .mia__send--ready .mia__icon-mic { display:none }
.mia__send--ready .mia__icon-send { display:block }
@keyframes mia-arrive { from { opacity:0;transform:translateY(var(--ww-wa-arrive)) scale(.98) } to { opacity:1;transform:none } }
@keyframes mia-typing { 0%, 60%, 100% { opacity:.35;transform:translateY(0) } 30% { opacity:1;transform:translateY(-3px) } }
@media (max-width:48rem) {
  .mia { height:var(--ww-wa-mobile-height);max-height:var(--ww-wa-mobile-max-height);min-height:0;padding:0;border-radius:var(--ww-wa-mobile-radius);box-shadow:0 0 0 1px var(--ww-wa-bar-edge),var(--ww-wa-shadow) }
  .mia__screen { border-radius:var(--ww-wa-mobile-radius) }
  .mia__status { display:none }
  .mia__log { padding-inline:var(--ww-s3) }
  .mia__row { max-width:90% }
}
@media (max-width:23rem) { .mia__tools { display:none } }
@media (prefers-reduced-motion:reduce) {
  .mia *, .mia *::before, .mia *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
}
/* Chat material overrides the studio paragraph defaults. */
.ww-main .mia p { color:inherit;max-width:none;margin:0 }
/* Hauptseite: Einstieg, scrollgekoppelte Seitenvorschau, Schnellkontakt erst nach dem Hero */
.ww-study-play { display:none!important }
.ww-scrollshot-manual { overflow-y:auto }
.ww-heading em { font:inherit;font-style:normal;color:inherit;letter-spacing:inherit }
.ww-steps-after { margin:var(--ww-s6) 0 0;max-width:33rem }
#ablauf .ww-grid { align-items:start }
.ww-dock.ww-hero-visible { visibility:hidden;opacity:0;pointer-events:none }
@media (max-width:47.99rem) {
 .ww-header-end>.ww-btn span { display:none }
 .ww-header-end>.ww-btn { min-width:var(--ww-hit);padding-inline:var(--ww-s3) }
 .ww-hero { padding-bottom:var(--ww-s8) }
 .ww-hero-lead { margin-bottom:var(--ww-s5)!important }
 /* Entwürfe: nur das Handy-Bild und der Name */
 .ww-study-bar,.ww-study-toolbar,.ww-project-copy p,.ww-project-copy .ww-text-link { display:none }
 .ww-study-frame { max-width:20rem;margin-inline:auto;border-radius:var(--ww-s8);border-width:0;padding:var(--ww-s2);background:var(--ww-ink);box-shadow:var(--ww-device-shadow) }
 .ww-study-window { border-radius:var(--ww-s6) }
 .ww-project-copy { padding-top:var(--ww-s4);text-align:center;margin-inline:auto }
 .ww-project-copy h3 { margin:0 }
 .ww-projects { gap:var(--ww-s10) }
 .ww-portfolio-head>p { display:none }
 .ww-projects .ww-project:first-child { display:none }
 .ww-portfolio { padding-top:var(--ww-s12) }
 .ww-study-window { height:min(var(--ww-study-window-mobile),68svh) }
}

/* ── Hauptseite: Einstieg mit Video im Handy ─────────────────────────────────────────── */
.ww-home .ww-header { position:absolute;top:0;left:0;right:0 }
.hv { position:relative;overflow:hidden;background:#0f1d15;color:#fff;padding:5.5rem 0 var(--ww-s12) }
.hv:before { content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(ellipse at 50% 100%,#2f7a5466,transparent 65%);pointer-events:none }
.hv-grid { position:relative;display:flex;flex-direction:column;align-items:center;text-align:center }
.hv-h1 { display:flex;flex-direction:column;align-items:center;margin:0;font:700 clamp(2.4rem,10.2vw,5rem)/1.02 var(--sans);letter-spacing:-.045em;color:#fff }
.hv-l1,.hv-l2 { display:block;position:relative;white-space:nowrap;background:linear-gradient(100deg,#fff 0%,#fff 40%,#b9f5d0 50%,#fff 60%,#dfe9e2 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 18px #0008) }
.hv-l1 { z-index:2 }
.hv-l2 { z-index:0 }
.hv-stage { display:block;position:relative;z-index:1;margin:-.3em 0 0;font-size:clamp(2.4rem,10.2vw,5rem) }
.hv-phone { display:block;position:relative;width:clamp(11rem,calc((100svh - 16.5rem) * .462),18rem);padding:.4rem;border-radius:2.4rem;background:#050906;box-shadow:0 0 0 1px #ffffff1f,0 30px 60px #00000080,0 0 90px #2f7a5440 }
.hv-video { display:block;width:100%;aspect-ratio:390/844;object-fit:cover;border-radius:2rem;background:#ece5da }
.hv-btn { position:relative;z-index:2;width:min(100%,22rem);justify-content:center;min-height:var(--ww-control);margin-top:var(--ww-s4);background:#fff;color:var(--ww-ink);box-shadow:0 10px 30px #0006 }
.hv-btn:hover { background:var(--ww-mint);color:var(--ww-ink) }
.ww-main .hv-lead { margin:var(--ww-s6) auto var(--ww-s3);max-width:24rem;font-size:var(--ww-body);line-height:1.5;color:#ffffffd9 }
.ww-main .hv-small { display:flex;align-items:center;justify-content:center;text-align:left;gap:var(--ww-s3);margin:0;font-size:var(--ww-small);color:#ffffffb3 }
.hv-small img { width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;object-position:50% 25% }
@media (prefers-reduced-motion:no-preference) { .hv-l1,.hv-l2 { animation:hv-glanz 7s ease-in-out infinite }.hv-l2 { animation-delay:.25s } }
@keyframes hv-glanz { 0%,15% { background-position:100% 0 } 55%,100% { background-position:0 0 } }
@media (min-width:48rem) { .hv { padding:6.5rem 0 var(--ww-s16) }.hv-h1,.hv-stage { font-size:clamp(3rem,5.4vw,4.75rem) }.hv-phone { width:clamp(13rem,calc((100svh - 19rem) * .462),20rem) } }

/* ── „So funktioniert's": Zeitleiste mit Icon-Punkten, Linie füllt sich beim Scrollen ─── */
.tl-head { margin-bottom:var(--ww-s10) }
.tl-head .ww-heading { margin-bottom:var(--ww-s3) }
.ww-main .tl-head p { margin:0;max-width:30rem;font-size:var(--ww-body) }
.tl-track { position:relative;--tl-x:1.375rem }
.tl-line { position:absolute;left:calc(var(--tl-x) - 1px);top:1.375rem;bottom:1.375rem;width:2px;border-radius:2px;background:var(--ww-border);overflow:hidden }
.tl-fill { position:absolute;left:0;right:0;top:0;height:var(--tl-h,0px);background:linear-gradient(180deg,#5fd894,var(--ww-green) 60%) }
.tl-list { list-style:none;margin:0;padding:0 }
.tl-item { position:relative;padding:0 0 var(--ww-s12) 4rem }
.tl-item:last-child { padding-bottom:0 }
.tl-dot { position:absolute;left:0;top:0;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ww-surface);border:2px solid var(--ww-border);color:var(--ww-muted);box-shadow:0 0 0 6px var(--ww-bg);transition:background .35s,border-color .35s,color .35s,transform .35s }
.tl-dot svg { width:1.25rem;height:1.25rem }
.tl-item.is-on .tl-dot { background:var(--ww-green);border-color:var(--ww-green);color:#fff;transform:scale(1.06) }
.tl-side h3 { margin:0;padding-top:.15rem;font:600 var(--ww-h3)/1.2 var(--sans);letter-spacing:-.02em }
.tl-side h3 span { display:block;margin-bottom:var(--ww-s1);font:500 var(--ww-small)/1.2 var(--sans);letter-spacing:0;color:var(--ww-green) }
.ww-main .tl-body>p { margin:var(--ww-s3) 0 var(--ww-s5);max-width:32rem;font-size:var(--ww-body) }
.tl-media { border-radius:var(--ww-radius);overflow:hidden }
/* Schlichte Chat-Beispiele mit blauen Website-Links. */
.tl-chat { display:flex;flex-direction:column;gap:var(--ww-s2);padding:var(--ww-s4);background:#ece5da;box-shadow:inset 0 0 0 1px #17221b0d }
.ww-main .tl-b { margin:0;max-width:86%;padding:.55rem .75rem .4rem;border-radius:.25rem 1rem 1rem 1rem;background:#fff;color:var(--ww-ink);font:400 1rem/1.4 var(--sans);box-shadow:0 1px 1px #0002;overflow-wrap:anywhere }
.ww-main .tl-out { align-self:flex-end;border-radius:1rem .25rem 1rem 1rem;background:#d9f3c8 }
.tl-b small { display:block;text-align:right;font-size:.6875rem;color:#6b7a70 }
.tl-read { color:var(--ww-wa-read);letter-spacing:-.15em;padding-right:.15em }
.tl-ava { float:left;width:1.5rem;height:1.5rem;margin:0 .5rem 0 0;border-radius:50%;object-fit:cover }
.tl-in small { clear:both }
.ww-main .tl-link { padding:.25rem;width:86% }
.tl-link-preview { border-radius:.75rem;overflow:hidden }
.tl-link img { display:block;width:100%;height:7rem;object-fit:cover;object-position:top;border-radius:.75rem }
.tl-link figcaption { padding:.4rem .4rem .2rem;font-size:.8125rem;color:#6b7a70 }
.tl-link b { display:block;color:var(--ww-ink) }
.tl-link figcaption span { display:block }
.tl-link-domain { color:var(--ww-wa-link) }
.ww-main .tl-link-message { margin:0;padding:.5rem .4rem .2rem;font:inherit;color:var(--ww-ink) }
.tl-url { color:var(--ww-wa-link);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere }
.tl-link>small { padding:0 .4rem .2rem }
/* Vorher / Entwurf */
.tl-compare { position:relative;display:flex;justify-content:center;align-items:flex-end;gap:var(--ww-s4);padding:var(--ww-s6) var(--ww-s4) 0;height:17rem;background:linear-gradient(180deg,var(--ww-mint),var(--ww-soft)) }
.tl-phone { position:relative;display:block;width:8.5rem;height:100%;padding:.3rem .3rem 0;border-radius:1.4rem 1.4rem 0 0;background:var(--ww-ink);box-shadow:0 12px 28px #17221b33 }
.tl-phone img { display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.15rem 1.15rem 0 0 }
.tl-phone i { position:absolute;left:50%;bottom:var(--ww-s3);transform:translateX(-50%);padding:.2rem .65rem;border-radius:var(--pill);background:#17221bd9;color:#fff;font:600 .75rem/1.4 var(--sans);font-style:normal;white-space:nowrap }
.tl-old { width:7rem;height:82%;filter:saturate(.35);opacity:.85 }
.tl-new { width:9rem }
.tl-new i { background:var(--ww-green) }
/* Online */
.tl-live { position:relative;padding:var(--ww-s5) var(--ww-s4) var(--ww-s10);background:linear-gradient(180deg,var(--ww-soft),var(--ww-mint)) }
.tl-browser { border-radius:.75rem;overflow:hidden;background:#fff;box-shadow:0 14px 30px #17221b26 }
.tl-bar { display:flex;align-items:center;gap:.3rem;padding:.45rem .6rem;background:#f1f3ef }
.tl-bar i { width:.45rem;height:.45rem;border-radius:50%;background:#c9cfc8 }
.tl-bar b { flex:1;margin-left:.4rem;padding:.15rem .6rem;border-radius:var(--pill);background:#fff;font:500 .75rem/1.4 var(--sans);color:var(--ww-muted);text-align:center }
.tl-browser img { display:block;width:100%;height:auto }
.tl-badge { position:absolute;left:50%;bottom:var(--ww-s4);transform:translateX(-50%);display:flex;align-items:center;gap:var(--ww-s2);padding:.5rem .9rem;border-radius:var(--pill);background:#fff;box-shadow:0 8px 22px #17221b26;font:500 var(--ww-small)/1.2 var(--sans);white-space:nowrap }
.tl-badge b { display:inline-flex;align-items:center;gap:.35rem;color:var(--ww-green) }
.tl-badge b:before { content:"";width:.5rem;height:.5rem;border-radius:50%;background:#2fbf6b;box-shadow:0 0 0 4px #2fbf6b33 }
.tl-cta { margin-top:var(--ww-s10) }
/* Einblenden */
.tl-js .tl-item .tl-body { transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1) }
.tl-js .tl-item:not(.is-seen) .tl-body { opacity:0;transform:translateY(1.5rem) }
@media (min-width:56rem) {
 .tl-item { display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:var(--ww-s10);padding:0 0 var(--ww-s20) }
 .tl-side { position:sticky;top:7rem;align-self:start;min-height:2.75rem;padding-left:4rem }
 .tl-side h3 { font-size:clamp(1.5rem,2.2vw,2rem) }
 .ww-main .tl-body>p { margin-top:0 }
 .tl-media { max-width:34rem }
}
@media (prefers-reduced-motion:reduce) { .tl-js .tl-item:not(.is-seen) .tl-body { opacity:1;transform:none }.tl-dot { transition:none } }

/* ── Kundenstimmen: Karten in senkrecht laufenden Spalten (pausierbar) ─────────────────── */
.ts-head { margin-bottom:var(--ww-s8) }
.ts-head .ww-heading { margin-bottom:var(--ww-s3) }
.ww-main .ts-note { display:inline-block;margin:0;padding:var(--ww-s2) var(--ww-s3);border-radius:var(--ww-radius-sm);background:#fff4d6;color:#6b5418;font-size:var(--ww-small) }
.ts-cols { display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ww-s5);height:34rem;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent) }
.ts-col:nth-child(n+2) { display:none }
.ts-track { display:flex;flex-direction:column;gap:var(--ww-s5);animation:ts-up var(--d,40s) linear infinite }
.ts-dup { display:contents }
@keyframes ts-up { to { transform:translateY(calc(-50% - var(--ww-s5) / 2)) } }
.ts-card { margin:0;padding:var(--ww-s6);border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-surface);box-shadow:0 10px 30px #17221b0f }
.ts-stars { display:block;color:#e8a317;font-size:1.0625rem;letter-spacing:.12em }
.ts-card blockquote { margin:var(--ww-s3) 0 var(--ww-s5);font:400 var(--ww-body)/1.55 var(--sans);color:var(--ww-ink) }
.ts-card figcaption { display:flex;align-items:center;gap:var(--ww-s3);font-size:var(--ww-small);color:var(--ww-muted);line-height:1.35 }
.ts-card b { display:block;color:var(--ww-ink);font-weight:600 }
.ts-ava { display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--ww-mint);color:var(--ww-green);font:600 .9375rem/1 var(--sans);flex:none }
.ts-ava:is(img) { object-fit:cover }
.ts-ava-logo { object-fit:contain;padding:.2rem;background:var(--ww-surface) }
.ts-cols:hover .ts-track, .ts-cols:focus-within .ts-track { animation-play-state:paused }
@media (min-width:40rem) { .ts-cols { grid-template-columns:repeat(2,minmax(0,1fr)) }.ts-col:nth-child(2) { display:block } }
@media (min-width:64rem) { .ts-cols { grid-template-columns:repeat(3,minmax(0,1fr));height:38rem }.ts-col:nth-child(3) { display:block } }
@media (prefers-reduced-motion:reduce) {
 .ts-track { animation:none }.ts-dup { display:none }.ts-cols { height:auto;-webkit-mask-image:none;mask-image:none }
 .ts-col:nth-child(n) { display:block }
}

@media (max-width:63.999rem) {
 .ts-cols { display:flex;height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none;padding-bottom:var(--ww-s4) }
 .ts-col:nth-child(n), .ts-track { display:contents }
 .ts-dup { display:none }
 .ts-card { flex:0 0 min(85%,22rem);scroll-snap-align:start }
}

/* ── Vergleich: Glas-Karte mit seitlich wischbarer Tabelle (Struktur nach HyperUI, MIT) ── */
.vg { position:relative;overflow:hidden;background:#0b1610;color:#fff }
.vg:before,.vg:after { content:"";position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;will-change:transform }
.vg:before { width:30rem;height:30rem;left:-10rem;top:-8rem;background:radial-gradient(circle,#2f9a62aa,transparent 65%) }
.vg:after { width:26rem;height:26rem;right:-8rem;bottom:-10rem;background:radial-gradient(circle,#6ff0a866,transparent 65%) }
@media (prefers-reduced-motion:no-preference) {
 .vg:before { animation:vg-drift-a 16s ease-in-out infinite alternate }
 .vg:after { animation:vg-drift-b 19s ease-in-out infinite alternate }
 .vg-sheen { animation:vg-sheen 7s ease-in-out infinite }
}
@keyframes vg-drift-a { to { transform:translate(9rem,6rem) scale(1.15) } }
@keyframes vg-drift-b { to { transform:translate(-8rem,-5rem) scale(1.1) } }
@keyframes vg-sheen { 0%,55% { transform:translateX(-120%) } 100% { transform:translateX(320%) } }
.vg .ww-container { position:relative;z-index:1 }
.vg-head { margin-bottom:var(--ww-s6) }
.vg-head .ww-heading { margin-bottom:var(--ww-s2);max-width:20ch;color:#fff }
.ww-main .vg-head p { margin:0;color:#ffffffbf;font-size:var(--ww-body) }
.vg-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0) }
.vg-glass { position:relative;border-radius:calc(var(--ww-radius) + 2px);background:linear-gradient(150deg,#ffffff1c,#ffffff08 45%,#ffffff12);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:0 30px 70px #00000059;overflow:hidden }
.vg-glass:before { content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,#b9f5d0aa,#ffffff14 35%,#ffffff08 65%,#6ff0a866);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:3 }
.vg-sheen { position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent,#b9f5d00d 40%,#ffffff14 50%,#b9f5d00d 60%,transparent);transform:translateX(-120%);pointer-events:none;z-index:3 }
.vg-scroll { overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none }
.vg-scroll::-webkit-scrollbar { display:none }
.vg-scroll:focus-visible { outline:2px solid #b9f5d0;outline-offset:-2px }
.vg-table { width:100%;min-width:34rem;border-collapse:separate;border-spacing:0;font-size:var(--ww-small);line-height:1.35 }
.vg-table th,.vg-table td { padding:var(--ww-s3) var(--ww-s4);text-align:left;vertical-align:middle;border-bottom:1px solid #ffffff1a;color:#ffffffb3;scroll-snap-align:start }
.vg-table tr:last-child th,.vg-table tr:last-child td { border-bottom:0 }
.vg-table thead th { font:600 var(--ww-small)/1.3 var(--sans);color:#fff }
.vg-table tbody th { width:6rem;min-width:6rem;font-weight:600;color:#fff }
.vg-table .vg-us { background:linear-gradient(180deg,#2f9a6233,#2f9a621f);color:#fff;font-weight:600;white-space:nowrap }
.vg-table td:not(.vg-us) { min-width:10.5rem }
.vg-cost td { white-space:nowrap }
.vg-table thead th { vertical-align:middle;height:3.75rem;padding-top:0;padding-bottom:0 }
.vg-brand { vertical-align:middle }
.vg-brand { display:inline-flex;align-items:center;gap:var(--ww-s2) }
.vg-brand img { width:1.6rem;height:1.6rem;border-radius:50%;object-fit:cover }
.vg-table td.vg-us svg { display:inline-block;margin-right:.35rem;vertical-align:-.2rem;color:#b9f5d0 }
.vg-cost td,.vg-cost th { font-size:var(--ww-body) }
.vg-cost .vg-us { font-weight:600;color:#fff }
.vg-table small { display:block;margin-top:.15rem;font:400 var(--ww-ui)/1.3 var(--sans);color:#ffffff99 }
.vg-cost td:not(.vg-us) { font-weight:400;color:#ffffffcc }
.vg-lab { display:none }
@media (max-width:47.99rem) {
 .vg-table thead th:first-child,.vg-table tbody th { display:none }
 .vg-lab { display:table-row }
 .vg-lab td { padding:var(--ww-s3) var(--ww-s4) 0;border-bottom:0;background:none }
 .vg-lab span { position:sticky;left:var(--ww-s4);font:600 var(--ww-ui)/1.2 var(--sans);letter-spacing:.02em;color:#b9f5d0 }
 .vg-lab + tr td { padding-top:var(--ww-s2) }
 .vg-table { min-width:30rem }
}
.ww-main .vg-hint { margin:0;padding:var(--ww-s2) var(--ww-s4);border-top:1px solid #ffffff1a;text-align:right;font-size:var(--ww-ui);color:#ffffff99 }
@media (min-width:48rem) { .vg-hint { display:none }.vg-table { min-width:0 }.vg-table tbody th { width:auto } }

.pr-head { margin-bottom:var(--ww-s8) }
.pr-head .ww-heading { margin:var(--ww-s4) 0 var(--ww-s3);max-width:none }
.ww-main .pr-head p { margin:0;font-size:var(--ww-body) }
.pr-pill { display:inline-flex;align-items:center;gap:var(--ww-s2);padding:var(--ww-s1) var(--ww-s3);border-radius:var(--pill);background:var(--ww-mint);color:var(--ww-green);font:600 var(--ww-ui)/1.5 var(--sans) }
.pr-pill i { width:.5rem;height:.5rem;border-radius:50%;background:#2fbf6b;box-shadow:0 0 0 3px #2fbf6b33 }
/* ── Ohne Risiko starten: Bento-Kacheln mit kleinen Bildmotiven (Muster nach Magic UI Bento Grid, MIT) ── */
.rk { margin-top:var(--ww-s12) }
.rk-head { display:flex;align-items:center;gap:var(--ww-s3);margin-bottom:var(--ww-s5) }
.rk-head h3 { margin:0;font:600 var(--ww-h3)/1.2 var(--sans);letter-spacing:-.02em }
.rk-seal { display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--ww-green);color:#fff;box-shadow:0 0 0 6px #2467461f }
.rk-grid { display:grid;gap:var(--ww-s4) }
.rk-card { position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:1.25rem;background:var(--ww-surface);box-shadow:0 0 0 1px #17221b0d,0 2px 4px #17221b0d,0 14px 30px #17221b12;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s }
@media (hover:hover) { .rk-card:hover { transform:translateY(-3px);box-shadow:0 0 0 1px #17221b14,0 20px 40px #17221b1f } }
.rk-vis { position:relative;height:9.5rem;overflow:hidden;background:linear-gradient(160deg,var(--ww-mint),var(--ww-soft)) }
.rk-txt { position:relative;padding:var(--ww-s5) var(--ww-s5) var(--ww-s6) }
.rk-ico { color:var(--ww-green);margin-bottom:var(--ww-s2) }
.rk-txt h4 { margin:0 0 var(--ww-s1);font:600 1.1875rem/1.25 var(--sans);letter-spacing:-.015em }
.ww-main .rk-txt p { margin:0;font-size:var(--ww-small);color:var(--ww-muted) }
/* Motiv 1: Handy mit Entwurf */
.rk-phone { position:absolute;left:50%;bottom:-2.5rem;width:7.5rem;height:11rem;margin-left:-3.75rem;padding:.3rem;border-radius:1.4rem;background:var(--ww-ink);box-shadow:0 14px 30px #17221b40;transition:transform .5s cubic-bezier(.2,.8,.2,1) }
.rk-phone img { display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:1.15rem }
.rk-card:hover .rk-phone { transform:translateY(-.6rem) }
.rk-chip { position:absolute;top:var(--ww-s3);right:var(--ww-s3);padding:.15rem .6rem;border-radius:var(--pill);background:var(--ww-green);color:#fff;font:600 .75rem/1.5 var(--sans) }
/* Motiv 2: 9 Tage */
.rk-vis-days { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ww-s1) }
.rk-vis-days b { font:700 3.5rem/1 var(--sans);letter-spacing:-.05em;color:var(--ww-green) }
.rk-vis-days>span:not(.rk-dots) { font:500 var(--ww-ui)/1.2 var(--sans);color:var(--ww-ink) }
.rk-dots { display:flex;gap:.3rem;margin-top:var(--ww-s2) }
.rk-dots i { width:.55rem;height:.55rem;border-radius:50%;background:#24674633 }
.rk-dots i.on { background:var(--ww-green) }
/* Motiv 3: Wahl, dunkle Kachel */
.rk-card-dark { background:#0f1d15;color:#fff;box-shadow:0 -20px 60px -20px #6ff0a833 inset,0 14px 30px #17221b26 }
.rk-card-dark .rk-vis { background:radial-gradient(circle at 70% 20%,#2f9a6255,transparent 60%) }
.rk-card-dark .rk-ico { color:#b9f5d0 }
.ww-main .rk-card-dark .rk-txt p { color:#ffffffb3 }
.rk-vis-choice { display:flex;flex-direction:column;justify-content:center;gap:var(--ww-s2);padding:0 var(--ww-s5) }
.rk-vis-choice span { display:block;padding:var(--ww-s2) var(--ww-s3);border:1px solid #ffffff2e;border-radius:.75rem;background:#ffffff12;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 var(--ww-ui)/1.35 var(--sans);color:#ffffffcc }
.rk-vis-choice b { display:block;font-weight:600;color:#fff }
/* Einblenden */
@media (prefers-reduced-motion:no-preference) {
 .rk-dots i.on { animation:rk-fill 3s ease-in-out infinite }
 .rk-dots i:nth-child(2) { animation-delay:.3s }.rk-dots i:nth-child(3) { animation-delay:.6s }
}
@keyframes rk-fill { 0%,100% { transform:scale(1) } 50% { transform:scale(1.35) } }
@media (min-width:48rem) { .rk-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }.rk-vis { height:11rem } }

.ww-contact-mail { margin-top:var(--ww-s4) }

/* ── Team: Foto von Alexander mit schwebender Mia-Nachricht ─────────────────────────── */
.tm-grid { display:grid;gap:var(--ww-s10);align-items:center }
.tm-visual { position:relative;max-width:30rem;width:100%;margin:0 auto var(--ww-s6) }
.tm-photo { margin:0;overflow:hidden;border-radius:1.5rem;aspect-ratio:5/4;background:var(--ww-soft);box-shadow:0 24px 60px #17221b26 }
.tm-photo picture { display:block;height:100% }
.tm-photo img { display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20% }
.tm-badge { position:absolute;top:var(--ww-s4);left:var(--ww-s4);padding:var(--ww-s1) var(--ww-s3);border-radius:var(--pill);background:#ffffffe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:600 var(--ww-ui)/1.5 var(--sans);color:var(--ww-ink);box-shadow:0 4px 14px #17221b1f }
.tm-bubble { position:absolute;right:calc(-1 * var(--ww-s2));bottom:calc(-1 * var(--ww-s6));display:flex;gap:var(--ww-s3);align-items:flex-start;width:min(82%,19rem);padding:var(--ww-s3) var(--ww-s4) var(--ww-s3) var(--ww-s3);border-radius:1.1rem 1.1rem .3rem 1.1rem;background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid #ffffff;box-shadow:0 18px 40px #17221b33 }
.tm-bubble img { width:2.5rem;height:2.5rem;flex:none;border-radius:50%;object-fit:cover;object-position:50% 40% }
.tm-bubble b { display:flex;align-items:center;gap:var(--ww-s2);font:600 var(--ww-small)/1.3 var(--sans);color:var(--ww-ink) }
.tm-bubble b i { display:inline-flex;align-items:center;gap:.3rem;font:500 .75rem/1 var(--sans);font-style:normal;color:var(--ww-green) }
.tm-bubble b i:before { content:"";width:.45rem;height:.45rem;border-radius:50%;background:#2fbf6b }
.tm-msg { display:block;margin-top:.2rem;font-size:var(--ww-small);line-height:1.4;color:var(--ww-ink) }
.tm-typing { display:none;gap:.25rem;margin-top:.45rem }
.tm-typing i { width:.4rem;height:.4rem;border-radius:50%;background:#9aa59d }
.tm-copy .ww-heading { margin-bottom:var(--ww-s4) }
.ww-main .tm-copy p { margin:0 0 var(--ww-s3);max-width:30rem;font-size:var(--ww-body) }
.tm-points { list-style:none;margin:var(--ww-s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--ww-s2) }
.tm-points li { display:inline-flex;align-items:center;gap:var(--ww-s2);padding:var(--ww-s2) var(--ww-s3);border-radius:var(--pill);background:var(--ww-mint);font:500 var(--ww-small)/1.2 var(--sans);color:var(--ww-ink) }
.tm-points svg { color:var(--ww-green);flex:none }
@media (min-width:56rem) { .tm-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ww-s16) }.tm-visual { margin:0 }.tm-photo { aspect-ratio:4/5 } }
@media (prefers-reduced-motion:no-preference) {
 .tm-js .tm-photo { opacity:0;transform:scale(1.03);transition:opacity .8s ease,transform 1.2s cubic-bezier(.2,.8,.2,1) }
 .tm-js .tm-badge { opacity:0;transform:translateY(-.5rem);transition:opacity .5s ease .5s,transform .5s ease .5s }
 .tm-js .tm-bubble { opacity:0;transform:translateY(1rem) scale(.96);transition:opacity .5s ease .8s,transform .6s cubic-bezier(.2,.8,.2,1) .8s }
 .tm-js .tm-msg { display:none }
 .tm-js .tm-typing { display:flex }
 .tm-js .tm-typing i { animation:hs-dot 1s infinite }
 .tm-js .tm-typing i:nth-child(2) { animation-delay:.15s }.tm-js .tm-typing i:nth-child(3) { animation-delay:.3s }
 .tm-js.is-seen .tm-photo,.tm-js.is-seen .tm-badge,.tm-js.is-seen .tm-bubble { opacity:1;transform:none }
 .tm-js.is-typed .tm-typing { display:none }
 .tm-js.is-typed .tm-msg { display:block;animation:tm-in .4s ease }
}
@keyframes tm-in { from { opacity:0;transform:translateY(.3rem) } to { opacity:1;transform:none } }
@keyframes hs-dot { 0%,60%,100% { opacity:.35;transform:none } 30% { opacity:1;transform:translateY(-.2rem) } }

/* Mia im Abschnitt „Wer hinter Wirth Websites steckt" */
.ww-mia { display:flex;gap:var(--ww-s4);align-items:center;margin:var(--ww-s2) 0 var(--ww-s6);padding:var(--ww-s4);border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-soft) }
.ww-mia img { width:4rem;height:4rem;border-radius:50%;object-fit:cover;flex:none }
.ww-main .ww-mia p { margin:0;font-size:var(--ww-small);color:var(--ww-ink) }
.ww-mia b { display:block;margin-bottom:var(--ww-s1) }


/* Lokaler Entwurf: Mia-Einstieg, zuerst für das Handy gestaltet. */
.ww-faq-mia { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ww-s5);margin-top:var(--ww-s8);padding:var(--ww-s6);background:var(--ww-soft);border-radius:var(--ww-radius) }
.ww-faq-mia-copy { display:flex;align-items:center;gap:var(--ww-s3);min-width:0 }
.ww-faq-mia-copy img { width:3rem;height:3rem;border-radius:50%;object-fit:cover;flex:none }
.ww-main .ww-faq-mia-copy p { margin:0;font-size:1rem;line-height:1.4 }
.ww-faq-mia-copy strong,.ww-faq-mia-copy span { display:block }
.ww-faq-mia-copy strong { color:var(--ww-ink);margin-bottom:.2rem }
.ww-faq-mia .ww-btn,.ww-mia-entry .ww-btn { background:var(--ww-wa-accent);color:var(--ww-wa-on-accent);min-height:3.25rem;justify-content:center }
.ww-faq-mia .ww-btn:hover,.ww-mia-entry .ww-btn:hover { background:var(--ww-wa-accent-hover) }
.ww-mia-entry { overflow:hidden }
.ww-mia-entry>.ww-mia { margin:calc(-1 * var(--ww-s8)) calc(-1 * var(--ww-s8)) var(--ww-s6);padding:var(--ww-s5) var(--ww-s6);border:0;border-bottom:1px solid var(--ww-wa-bar-edge);border-radius:0;background:var(--ww-wa-bar);gap:var(--ww-s3) }
.ww-mia-entry>.ww-mia img { width:2.75rem;height:2.75rem }
.ww-main .ww-mia-entry>.ww-mia p { flex:1;min-width:0;font-size:.875rem;line-height:1.35 }
.ww-mia-entry>.ww-mia b { font-size:1.0625rem;margin-bottom:.1rem }
.ww-mia-entry>.ww-mia>svg { flex:none;color:var(--ww-wa-accent) }
.ww-mia-entry h3 { font:600 var(--ww-h3)/1.2 var(--sans);letter-spacing:-.025em;margin-bottom:var(--ww-s2) }
.ww-main .ww-mia-entry-lead { margin:0 0 var(--ww-s6);font-size:1rem }
#ww-mia-start .ww-btn { width:100%;white-space:normal;text-align:center;gap:.65rem }
#ww-mia-start .ww-field { margin-bottom:var(--ww-s4) }
#ww-website { font-size:1rem;min-height:3.5rem;color:var(--ww-wa-link);background:var(--ww-surface);border-color:var(--ww-border) }
#ww-website[aria-invalid="true"] { border-color:var(--ww-ink) }
.ww-main #ww-website-help { margin:var(--ww-s3) 0 0;text-align:center;font-size:1rem;line-height:1.45 }
.ww-main .ww-mia-send-note { margin:var(--ww-s5) 0 0;padding-top:var(--ww-s4);border-top:1px solid var(--ww-border);font-size:1rem;line-height:1.45 }
.ww-mia-preview { max-width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;padding:var(--ww-s6);border:1px solid var(--ww-border);border-radius:var(--ww-radius);background:var(--ww-surface);color:var(--ww-ink);font:400 1rem/1.55 var(--sans) }
.ww-mia-preview::backdrop { background:var(--ww-wa-overlay) }
.ww-mia-preview h3 { font:600 var(--ww-h3)/1.2 var(--sans) }
.ww-mia-preview blockquote { margin:var(--ww-s5) 0;padding:var(--ww-s4);background:var(--ww-wa-out);border-radius:var(--ww-radius-sm);overflow-wrap:anywhere }
@media (max-width:47.99rem) {
 .tl-track { --tl-x:1.125rem }
 .tl-dot { width:2.25rem;height:2.25rem }
 .tl-dot svg { width:1.1rem;height:1.1rem }
 .tl-item { padding-left:3.1rem;padding-bottom:var(--ww-s10) }
 .tl-line { top:1.125rem;bottom:1.125rem }
 .tl-side h3 { padding-top:0;font-size:1.4rem }
 .tl-side h3 span { font-size:1rem }
 .ww-main .tl-body>p { font-size:1rem;line-height:1.5 }
 .tl-body { min-width:0 }
 .tl-media { width:100%;max-width:100%;border-radius:.85rem }
 .tl-chat { margin:var(--ww-s5) 0 0;padding:.75rem;gap:.65rem }
 .ww-main .tl-b { max-width:94%;padding:.55rem .6rem .35rem }
 .ww-main .tl-link { width:94%;padding:.25rem }
 .tl-link img { height:7rem;border-radius:.6rem }
 .ww-faq-mia { padding:var(--ww-s5);gap:var(--ww-s4) }
 .ww-faq-mia .ww-btn { width:100% }
 .ww-contact { padding-block:var(--ww-s10) }
 .ww-contact .ww-grid { gap:var(--ww-s6) }
 .ww-contact .ww-heading { font-size:clamp(1.75rem,7.5vw,2rem);line-height:1.12;margin-bottom:var(--ww-s4) }
 .ww-contact .ww-heading br { display:none }
 .ww-main .ww-contact .ww-grid>div:first-child>p { font-size:1rem;line-height:1.5;margin-bottom:var(--ww-s3) }
 .ww-main .ww-contact-personal { margin:0 }
 .ww-mia-entry { padding:var(--ww-s5) }
 .ww-mia-entry>.ww-mia { margin:calc(-1 * var(--ww-s5)) calc(-1 * var(--ww-s5)) var(--ww-s5);padding:var(--ww-s4) var(--ww-s5) }
 .ww-mia-entry h3 { font-size:1.4rem }
 .ww-mia-preview { padding:var(--ww-s5) }
 #team .ww-btn { max-width:100%;width:100%;justify-content:center;white-space:normal;text-align:center }
 .ts-card { padding:var(--ww-s5) }
}


/* So arbeitet Mia — selected variant A, 2026-10-28.
   Magic UI BentoGrid/BentoCard (MIT, Copyright Magic UI).
   Native HTML/CSS adaptations; originals and full notices: vendor/mia-ui/.
   Scoped to .mia-proof: no changes to the accepted timeline or homepage. */
.mia-proof { background:var(--ww-soft);padding-block:4rem;scroll-margin-top:1rem }
.mia-proof .ww-container { max-width:74rem }
.mia-proof-heading { display:flex;align-items:center;gap:1rem;margin-bottom:2rem }
.mia-proof-heading img { width:64px;height:64px;object-fit:cover;border-radius:50%;background:var(--ww-surface);flex:none }
.mia-proof-heading .ww-heading { margin:0 0 .5rem;max-width:none }
.mia-proof-heading p { margin:0;color:var(--ww-muted);font-size:1.0625rem;line-height:1.45 }
.mia-proof h3 { font:600 1.35rem/1.2 var(--ww-sans);letter-spacing:-.025em;margin:0 }
.mia-proof p { line-height:1.5 }
.mia-proof .mia-copy { color:var(--ww-muted);font-size:1rem;margin:.6rem 0 0 }
.mia-proof .mia-label { color:var(--ww-green);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .65rem }
.mia-proof .mia-icon { width:24px;height:24px;flex:none;color:var(--ww-green) }
.mia-proof .mia-grid { display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem }
.mia-proof .mia-card { position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;overflow:hidden;border-radius:var(--ww-radius);background:var(--ww-surface);border:1px solid var(--ww-border);padding:1.5rem }
.mia-proof .mia-skills { grid-column:span 2;background:var(--ww-mint) }
.mia-proof .mia-control { grid-column:span 2 }
.mia-proof .mia-chips { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem }
.mia-proof .mia-chips span { border:1px solid var(--ww-border);background:var(--ww-surface);border-radius:var(--ww-radius-sm);padding:.35rem .65rem;font-size:.9375rem;line-height:1.35 }
.mia-proof .mia-voice { display:flex;align-items:center;gap:.6rem;font-size:.9375rem;margin:1rem 0 0 }
.mia-proof .mia-voice svg { width:42px;height:18px;color:var(--ww-green) }
.mia-proof .mia-number { font-size:4.75rem;font-weight:500;line-height:1;color:var(--ww-green);letter-spacing:-.065em;display:block;margin:.25rem 0 .5rem }
.mia-proof .mia-date { font-size:.8125rem;color:var(--ww-muted);display:block;line-height:1.5;margin-top:.65rem }
.mia-proof .mia-flow { display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.875rem;margin-bottom:1.1rem }
.mia-proof .mia-flow span { padding:.35rem .6rem;background:var(--ww-soft);border-radius:var(--ww-radius-sm) }
.mia-proof .mia-flow strong { padding:.35rem .6rem;background:var(--ww-green);color:var(--ww-surface);border-radius:var(--ww-radius-sm);font-weight:500 }
.mia-proof .mia-person { display:flex;align-items:center;gap:.65rem;margin-top:1rem;font-size:.875rem;color:var(--ww-muted) }
.mia-proof .mia-person img { width:36px;height:36px;object-fit:cover;border-radius:50% }
.mia-proof .mia-safety-list { display:grid;gap:.75rem;margin:1rem 0 0;padding:0;list-style:none }
.mia-proof .mia-safety-list li { display:flex;align-items:flex-start;gap:.55rem;font-size:.9375rem;line-height:1.4 }
.mia-proof .mia-safety-list svg { margin-top:.15rem;width:18px;height:18px;flex:none;color:var(--ww-green) }
.mia-proof .mia-foot { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.5rem }
.mia-proof .mia-foot p { margin:0;color:var(--ww-muted);font-size:.9375rem }
.mia-proof .mia-foot .ww-btn { flex:none }
.mia-proof .mia-foot .ww-btn svg { color:inherit }
@media(max-width:47.99rem) {
 .mia-proof { padding-block:2rem }
 .mia-proof-heading { gap:.75rem;margin-bottom:1.25rem;align-items:flex-start }
 .mia-proof-heading img { width:48px;height:48px }
 .mia-proof-heading .ww-heading { font-size:1.8rem;line-height:1.1;margin-bottom:.35rem }
 .mia-proof-heading p { font-size:.9375rem;max-width:25ch }
 .mia-proof .mia-grid { grid-template-columns:minmax(0,1fr);gap:.75rem }
 .mia-proof .mia-card { padding:1.15rem;gap:.75rem }
 .mia-proof .mia-skills,.mia-proof .mia-control { grid-column:auto }
 .mia-proof h3 { font-size:1.2rem }
 .mia-proof .mia-label { margin-bottom:.45rem;font-size:.8125rem }
 .mia-proof .mia-copy { font-size:1rem;margin-top:.45rem }
 .mia-proof .mia-chips { gap:.4rem;margin-top:.75rem }
 .mia-proof .mia-chips span { font-size:.8125rem;padding:.3rem .5rem }
 .mia-proof .mia-voice { margin-top:.75rem;font-size:.875rem }
 .mia-proof .mia-tests { display:grid;grid-template-columns:4rem minmax(0,1fr);align-items:center;gap:1rem }
 .mia-proof .mia-number { font-size:3.7rem;margin:0 }
 .mia-proof .mia-tests .mia-date { grid-column:1/-1;margin:0 }
 .mia-proof .mia-flow { font-size:.75rem;margin-bottom:.75rem;gap:.3rem }
 .mia-proof .mia-flow span,.mia-proof .mia-flow strong { padding:.3rem .5rem }
 .mia-proof .mia-person { margin-top:.75rem;font-size:.8125rem }
 .mia-proof .mia-person img { width:30px;height:30px }
 .mia-proof .mia-safety-list { gap:.6rem;margin-top:.75rem }
 .mia-proof .mia-safety-list li { font-size:1rem }
 .mia-proof .mia-foot { flex-direction:column;align-items:stretch;gap:.75rem;margin-top:1.25rem;text-align:center }
 .mia-proof .mia-foot p { font-size:.875rem }
}