/* PROJECT SPEC: Selected V1 hero chrome, 23.10.2026.
   FEATURES: existing modes, gate, deck, live widgets and catalogue retained.
   CHANGELOG: V1 port; rectangular 44px switch target above the clipped fan.
   DESIGN DECISIONS: light mode, Hanken text, original logo, vermilion accent.
   DESIGN DECISIONS: expanded modal blocks the page; switch resumes after close. */
.elegance { background:#fff; }
.elegance .site-head { background:#fff; transition:none; }
.elegance .site-head .wrap { gap:8px 16px; }
.elegance .site-head .nav a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-weight:400; }
.elegance .language { gap:0; }
.elegance .language a { min-width:44px; font-weight:500; }
.elegance .keytag { clip-path:none; transform:none; border-radius:8px; border:1px solid #b8babd; background:white; color:#16181b; font-weight:500; padding:10px 12px; }
.elegance .keytag::before { content:none; }
.elegance #top h1 b { font-weight:500; }
.elegance #top .kicker { font-size:12px; letter-spacing:.09em; font-weight:500; }
.elegance #top .kicker::before { height:1px; }
.elegance #top :is(.actions,.d-cta) .btn { border-width:1px; border-radius:8px; font-weight:500; }
.elegance #top .hero-secondary,.elegance #top .d-cta .btn { background:white; color:#16181b; }
.elegance #top .deck > .win { border:1px solid #e2e4e7; border-radius:9px; box-shadow:0 8px 24px -12px #16181b26; }
.elegance #top .win__bar { background:white; }
.elegance #top .win__bar > i { width:4px; height:4px; background:#a3a6ab; }
.elegance #top .win__url { background:transparent; padding-left:0; }
.elegance #top .win__try > span { border:1px solid #b8babd; border-radius:8px; box-shadow:none; background:white; font-weight:500; }
.elegance #top .win__try i { color:#16181b; background:none; }
.elegance #top .step { border-width:1px; border-color:#b8babd; border-radius:8px; }
.elegance #top .tick span { width:1px; }
.elegance #top .tick[aria-current=true] span { width:2px; }
.elegance #top .details { border-radius:9px; }
.elegance #top .d-name { font-weight:500; }
.elegance #top .d-meta { background:transparent; border:0; padding:10px 0; }
.elegance #top .page-modes { background:transparent; gap:10px; padding:0; border-radius:0; }
.elegance #top .page-modes > button[data-mode] { font:500 17px/1 'Hanken Grotesk',sans-serif; background:transparent; color:#5f636a; border-radius:0; min-height:44px; min-width:60px; padding:10px; position:relative; text-decoration:none; }
.elegance #top .page-modes > button[aria-pressed=true] { color:#16181b; }
.elegance #top .page-switch { position:relative; opacity:1; pointer-events:auto; width:72px; min-width:72px; height:44px; min-height:44px; background:transparent; padding:0; }
.elegance #top .page-switch::before { content:''; position:absolute; inset:6px 0; background:#edeff2; border:1px solid #a3a6ab; border-radius:24px; }
.elegance #top .page-switch i { width:22px; height:22px; left:6px; top:11px; background:#D9412A; }
.elegance #top .page-switch[aria-checked=true] i { transform:translateX(38px); }
.elegance .mini-mode { border-radius:8px; box-shadow:none; }
.elegance .mini-mode button { font-weight:500; border-radius:5px; }
.elegance .mini-mode button[aria-pressed=true] { background:#edeff2; color:#16181b; text-decoration:underline; text-decoration-color:#D9412A; text-underline-offset:5px; }
.elegance #top .fm-hint,.elegance .flip-hint { font:500 11px/1.4 'Hanken Grotesk',sans-serif !important; color:#16181b; background:#fff; border:1px solid #b8babd; box-shadow:none; border-radius:5px; padding:6px 8px; }
.elegance #top .fm-hint svg { stroke-width:1; }
.elegance #top .fm-first-control { box-shadow:none !important; }
.elegance #entry-gate { background:white; border-color:#d4d6d9; border-radius:10px; box-shadow:0 16px 64px #16181b14; }
.elegance #entry-gate::backdrop { background:#f4f4f1cc; backdrop-filter:blur(8px); }
.elegance #entry-gate h2 { font:300 clamp(32px,4vw,48px)/1.08 'Hanken Grotesk',sans-serif; letter-spacing:-.035em; max-width:18ch; }
.elegance .entry-kicker { font-weight:500; color:#474b52; }
.elegance .entry-choices button { background:white; color:#16181b; border:1px solid #b8babd; border-radius:8px; }
.elegance .entry-choices strong { font:500 27px/1.15 'Hanken Grotesk',sans-serif; }
.elegance .entry-skip { font-weight:400; }
.elegance .entry-choices button:hover { transform:translateY(-2px); }
.elegance #top .win__try > span { transition:transform 240ms cubic-bezier(.16,1,.3,1); }
@media(max-width:767px) {
 .elegance .site-head .wrap { gap:4px 8px; }
 .elegance .language a { min-width:44px; }
 .elegance .site-head .keytag { font-size:12px; margin-left:auto; }
 .elegance .hero-mode-centre { margin-top:12px; }
 .elegance #top .details { min-height:340px; }
}
@media(prefers-reduced-motion:reduce) {
 .elegance #top :not(.live-area *),.elegance #entry-gate * { animation:none !important; transition:none !important; scroll-behavior:auto; }
}
/* A fine keyboard focus rule remains distinct from the active-mode underline. */
.elegance :focus-visible:where(:not(.live-area *, .lf-stage *)) { outline:1px solid #16181b; outline-offset:4px; }
.elegance .b-grp__h span,.elegance .b-n,.elegance .b-cap .b-circ,.elegance .b-mains button[data-mode] { font-family:'Hanken Grotesk',sans-serif; font-weight:500; }
.elegance #top .tool-play { border:1px solid #b8babd; border-radius:8px; font-weight:500; }
.elegance .brand { min-height:44px; }

/* 20.10.2026: explicit, symmetric EN | DE spacing. */
.elegance .language{gap:8px}

@media(min-width:1024px){.v1 .hero-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:0 7%}.v1 #top .stack{max-width:704px}}
.elegance #top .win__try > span{width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;background:none;font-size:24px}
/* 23.10.2026: reserve the mode control's full hit area above the animated fan. */
.elegance .hero-mode-centre { position:relative; z-index:30; isolation:isolate; }
.elegance #top .page-switch { border-radius:0; }
.elegance #top .showcase { clip-path:inset(0 -50vw -50vh 0); }

/* UX panel, 23.10.2026: full hit targets and focus visibility. */
.elegance :focus-visible { outline:2px solid #16181b; outline-offset:3px; }
.elegance :is(.writing-all,.site-foot a,.contact .links a,.creds + p a) { min-width:44px; min-height:44px; display:inline-flex; align-items:center; }
.elegance .entry-skip { border:1px solid #b8babd; border-radius:8px; padding:12px 18px; }
.elegance .b-master { min-height:44px; }
.elegance .writing-list li { position:relative; }
.elegance .writing-list h3 a::after { content:''; position:absolute; inset:0; }
@media(max-width:767px) {
 .elegance .mini-mode:not([hidden]) { position:static; transform:none; margin:auto; }
 .elegance .site-head:has(.mini-mode:not([hidden])) .language { display:none; }
 .elegance .site-head .wrap { flex-wrap:nowrap; height:64px; padding-block:0; }
 .elegance .site-head .nav,.elegance .site-head .keytag { display:none; }
 .elegance .site-head .brand { font-size:17px; white-space:nowrap; }
 .elegance .language { margin-left:auto; }
 .elegance .mini-mode button { padding:6px 10px; }
 .elegance #top .step { width:auto; min-width:44px; padding:8px 12px; }
 .elegance #top .step span { display:inline; }
}

.elegance .identity { font:400 17px/24px 'Hanken Grotesk',sans-serif; color:#474b52; margin:20px 0; }
.elegance .keytag { border:0; text-decoration:underline; }
.elegance .email-cta { min-height:56px; margin:16px 0; }
.elegance .step { gap:6px; }
.elegance .step span { font:500 14px 'Hanken Grotesk',sans-serif; }
.elegance .b-big { min-height:44px; width:72px; height:44px; background:transparent; box-shadow:none; border:0; overflow:visible; }
.elegance .b-big::before { inset:6px 0; opacity:1; background:#edeff2; border:1px solid #a3a6ab; border-radius:24px; }
.elegance .b-big i { width:22px; height:22px; top:11px; left:6px; background:#D9412A; box-shadow:none; }
.elegance .b-big[aria-checked=true] i { transform:translateX(38px); }
.elegance .b-mains button[data-mode] { font:500 17px/1 'Hanken Grotesk',sans-serif; padding:10px; }
.elegance :focus-visible { outline:2px solid #D9412A; outline-offset:2px; }
.mobile-menu { display:none; }
@media(max-width:767px) {
 .elegance .site-head .wrap { gap:4px; }
 .elegance .site-head .brand { font-size:16px; }
 .elegance .language { gap:0; }
 .elegance .language a { min-width:44px; }
 .elegance .mobile-menu { display:block; order:4; }
 .mobile-menu summary { min-width:44px; min-height:44px; display:grid; place-items:center; cursor:pointer; font-size:14px; }
 .mobile-menu nav { position:absolute; top:64px; left:0; right:0; background:white; border-bottom:1px solid #b8babd; padding:12px 24px; }
 .mobile-menu nav a { display:flex; align-items:center; min-height:48px; }
 .elegance .site-head:has(.mini-mode:not([hidden])) .brand { display:none; }
 .elegance .site-head:has(.mini-mode:not([hidden])) .mini-mode { margin-left:0; }
 .elegance .mini-mode button { font-size:13px; }
 .elegance #top .peek-hit { pointer-events:none; }
 .elegance #top .step { min-height:48px; }
 .elegance .swipe-hint { display:none; }
 .elegance #top .page-modes { gap:0; }
 .elegance #top .page-modes > button[data-mode] { font-size:15px; padding:8px; }
}

.elegance .writing-list h3 a { display:block; min-height:56px; }
.elegance .mobile-menu:not([open]) nav { display:none; }
.elegance .mobile-menu[open] nav { display:block; }
.elegance .mini-mode button[aria-pressed=true] { background:transparent; text-decoration:none; }
.elegance .mini-mode .mini-switch { position:relative; width:72px; min-width:72px; height:44px; padding:0; background:transparent; }
.elegance .mini-switch::before { content:''; position:absolute; inset:6px 0; border:1px solid #a3a6ab; border-radius:24px; background:#edeff2; }
.elegance .mini-switch i { position:absolute; width:22px; height:22px; top:11px; left:6px; border-radius:50%; background:#D9412A; }
.elegance .mini-switch[aria-checked=true] i { transform:translateX(38px); }
.elegance .step.next { max-width:65%; }
.elegance .step.next span { white-space:normal; overflow-wrap:anywhere; line-height:1.2; }
@media(max-width:767px) {
 .elegance .site-head .brand { font-size:14px; }
 .elegance .site-head .mini-mode { border:0; padding:0; }
 .elegance .mini-mode button { font-size:12px; padding-inline:5px; }
 .elegance .site-head .mobile-menu { flex-shrink:0; }
 .elegance .site-head .language { flex-shrink:0; }
 .elegance .site-head .language span { display:none; }
 .elegance #top .controls { padding-right:0; }
 .elegance #top .step.prev { padding:8px; }
 .elegance #top .step.next { flex:1; min-width:0; padding:8px; }
}

/* The frame follows the frozen widget dimensions. */
.elegance #top .deck > .win { height:auto; align-self:start; }
.elegance #top .step { display:flex; justify-content:center; align-items:center; width:auto; min-width:44px; height:48px; padding:8px 12px; }
.elegance #top .step svg { width:16px; height:16px; flex-shrink:0; }
.elegance #top .step.next { flex:1; min-width:0; }
.elegance #top .ticks { order:4; flex-basis:100%; }
.elegance #top .controls { gap:8px; }

@media(min-width:1024px) { .elegance #top .deck > .win > img { height:284px; aspect-ratio:auto; object-fit:cover; } }

/* Independent UX verify: standalone writing link and full next-product label. */
.elegance .teaser-links .open { display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; }
.elegance #top .step.next { height:auto; min-height:48px; }

/* UX round 2: one mode control at a time, in the reserved header space. */
.elegance .mini-mode:not([hidden]) { display:flex; align-items:center; position:static; transform:none; padding:0; border:0; gap:0; }
.elegance .mini-mode button { border:0; background:transparent; color:#16181b; min-height:44px; padding:6px; font:500 13px 'Hanken Grotesk',sans-serif; }
.elegance .site-head:has(.mini-mode:not([hidden])) .brand { display:none; }
.elegance .client-signin { display:flex; width:fit-content; min-height:48px; margin-top:12px; }
.elegance #b-bench { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:24px; margin-top:32px; }
.elegance .preview-close { min-height:44px; min-width:44px; padding:8px 12px; border:1px solid #b8babd; background:white; border-radius:8px; color:#16181b; }
@media(max-width:767px) { .elegance #top .ticks { display:none; } }

/* Work tool names stay readable, including the longer German names. */
.elegance #top .win[data-set="work"] .win__url { white-space:normal; overflow:visible; text-overflow:clip; padding-block:8px; }
.elegance #top .win[data-set="work"] .win__bar > i { display:none; }

[data-page-mode="products"] #b-empty { display:none; }

/* Regression repairs: captions belong to the pane, not a second card frame. */
.elegance .site-head:focus { outline:none; }
.elegance .btn { border-radius:8px; }
.elegance #top .card-badge { flex:none; font:500 10px/1.2 'Hanken Grotesk',sans-serif; color:#474b52; }
.elegance #top .win__bar { padding-right:12px; }
.elegance #top .d-caption { font-size:14px; line-height:1.35; color:#474b52; margin:0 0 8px; }
.elegance #top .details__in { grid-template-rows:auto auto auto auto; }
.elegance #top .b-also { font-size:14px; margin:8px 0; }
.elegance #work[hidden] { display:none; }
.elegance #work { min-height:0; padding-block:32px; }
.elegance .email-cta { display:inline-flex; align-items:center; min-height:44px; margin:12px 0; }
.elegance #contact { padding-block:40px; }
.elegance #contact .links { margin-top:16px; }
.elegance .mobile-contact { display:none; }
.elegance .menu-client-note { margin:8px 0 0; font-size:14px; }
@media(min-width:768px) {
 .elegance #top .ticks { order:0; flex-basis:auto; flex:1; }
 .elegance #top .step.next { flex:none; }
 .elegance #top .step span { display:none; }
}
@media(max-width:767px) {
 .elegance .mobile-contact { display:inline-flex; align-items:center; min-height:44px; min-width:44px; font-size:14px; }
 .elegance .site-head:has(.mini-mode:not([hidden])) .mobile-contact { display:none; }
 .elegance #top .page-modes > button[data-mode] { font-size:13px; white-space:nowrap; padding-inline:4px; }
 .elegance .mini-mode button { font-size:12px; white-space:nowrap; padding-inline:3px; }
 .elegance #contact .mail { font-size:25px; }
}

/* V4 follow-up: name and one-line meaning share the existing 45px title bar. */
.elegance #top .win__bar > i { display:none; }
.elegance #top .card-title { flex:1; min-width:0; }
.elegance #top .win .win__url,
.elegance #top .win[data-set="work"] .win__url { display:block; padding:0; margin:0; font-size:11px; line-height:14px; white-space:nowrap; overflow:visible; }
.elegance #top .face-caption { display:block; font:400 12px/14px 'Hanken Grotesk',sans-serif; color:#474b52; white-space:nowrap; }
@media(min-width:768px) { .elegance #top .step.next { min-width:44px; flex-shrink:0; } }

.elegance #top .win[data-set="work"] .card-title { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 4px; }
.elegance #top .win[data-set="work"] .win__url { grid-column:1 / -1; }
.elegance #top .win[data-set="work"] .card-badge { align-self:center; }

/* Loading and failed-widget actions reserve the same width as live expand. */
.elegance #top .product-play { width:44px; min-width:44px; padding-inline:0; flex:none; }

/* Four fixes 23.10.: captions read as the card's meaning, results under the role, ticks back on phones. */
.elegance #top .face-caption { font:500 13px/16px 'Hanken Grotesk',sans-serif; color:#16181b; overflow:hidden; text-overflow:ellipsis; }
.elegance .proof { display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; padding:0; margin:-8px 0 20px; font:400 14px/20px 'Hanken Grotesk',sans-serif; color:#474b52; }
.elegance .proof b { font:700 17px/20px 'Hanken Grotesk',sans-serif; color:#16181b; font-variant-numeric:tabular-nums; }
.elegance .proof a { color:#16181b; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:24px; }
@media(max-width:767px) {
 .elegance #top .ticks { display:flex; overflow:visible; justify-content:space-between; }
 .elegance #top .tick:where(:not(.live-area *, .lf-stage *)) { flex:1 1 0; min-width:24px; min-height:32px; }
 .elegance .proof { gap:6px 16px; }
}