:root{--type-fallback:sans-serif;--type-display:'Syne';--type-body:'Urbanist';--type-accent:'Syne';--type-micro:'Urbanist';}

/* Typography finishing: locally hosted Latin + Latin Extended, including TR/EN/DE. */
html { font-synthesis: none; text-size-adjust: 100%; -webkit-text-size-adjust:100%; }
body { font-family:var(--type-body),sans-serif; font-kerning:normal; font-optical-sizing:auto; font-variant-ligatures:common-ligatures; }
body :is(h1,h2,h3) { font-family:var(--type-display),var(--type-fallback,serif)!important; text-wrap:balance; }
body :is(p,address,figcaption) { text-wrap:pretty; }
body :is(input,select,textarea) { font-family:var(--type-body),sans-serif; font-size:16px; line-height:1.5; letter-spacing:0; }
body :is(button,input,select,textarea) { font-kerning:normal; }
body :is(input[type=tel],input[type=date],input[type=time],input[type=number],.guests button,.menu-price,.price,.depth-track,.hero-coordinate) { font-variant-numeric:tabular-nums lining-nums; }
body :is(input,textarea)::placeholder { opacity:.65; font-weight:400; }
body :is(a,button) { text-underline-offset:.23em; text-decoration-thickness:1px; }
body :is(nav a,nav button,.book,.menu-link) { font-weight:500; line-height:1.4; }
body :is(label,legend) { line-height:1.55; }
body :is(.v7-panel-brand,.v7-languages button,.v7-close,.v7-panel-intro>span,.v7-direct-contact) { font-family:var(--type-micro),sans-serif!important; }
body .v7-panel-brand { font-size:11px; font-weight:500; letter-spacing:.08em; line-height:1.45; }
body .v7-languages button { font-size:11px; font-weight:500; letter-spacing:.05em; font-variant-numeric:tabular-nums; }
body .v7-close { font-size:11px; letter-spacing:.02em; }
body .v7-close b { font-family:var(--type-body),sans-serif; }
body .v7-panel-intro>span { font-size:10px; line-height:1.6; letter-spacing:.045em; max-width:52ch; }
body .v7-panel-intro p { font-family:var(--type-body),sans-serif; font-size:14px; line-height:1.65; max-width:49ch; }
body .v7-panel-intro h2 { font-family:var(--type-display),var(--type-fallback,serif)!important; line-height:1.08; letter-spacing:-.035em; }
body :is(.v7-inline-open,.v7-hero-cta,.v7-art-inquiry) { font-family:var(--type-body),sans-serif!important; font-size:12px; font-weight:500; letter-spacing:.025em; line-height:1.5; }
body .v7-direct-contact { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
body :is(.demo-note,.demo-notice,.privacy-note,.inquiry-privacy,.design-preview,.preview-badge) { font-size:11px!important; line-height:1.65; letter-spacing:.01em; }
body .v7-panel-body label { font-size:12px; line-height:1.5; letter-spacing:.02em; }
body .v7-panel-body :is(input,select,textarea) { font-size:16px; line-height:1.5; font-weight:400; min-width:0; }
body output { font-size:14px; line-height:1.7; }
body footer { font-size:11px; line-height:1.7; }
@media(max-width:760px) {
 body .v7-panel-intro>span { font-size:10px; letter-spacing:.01em; margin-bottom:20px; }
 body .v7-panel-intro p { font-size:14px; }
 body .v7-panel-brand { font-size:10px; letter-spacing:.035em; }
 body .v7-panel-intro h2 { font-size:clamp(34px,10.2vw,43px); }
 body .v7-languages { gap:2px; }
 body .v7-languages button { font-size:10px; min-width:28px; }
 body :is(input,select,textarea) { font-size:16px; }
}

/* Expressive Fashion-Grotesk und feine, offene Salon-Typografie */
body h1,body h2{font-weight:800;letter-spacing:-.055em;line-height:1.05}body .salon-logo{font-family:var(--type-display),sans-serif;font-weight:700;letter-spacing:-.055em;line-height:1.05}body .cover-note{font-size:20px;font-weight:500;line-height:1.4;letter-spacing:-.015em}body .service strong{font-family:var(--type-display),sans-serif;font-size:36px;line-height:1.1;font-weight:700;letter-spacing:-.035em}body :is(.salon-header>span,.cover-top,.image-tools,.campaign-photo,.cover-note small,.cover-scroll,.story-type>span,.salon-story figcaption,.section-head>span,.service>span,.appointment-heading>span,.appointment-heading>a,.form-number,.salon-contact>span){font-size:10px;line-height:1.6;letter-spacing:.1em}body #salon-form label{font-size:12px;letter-spacing:.06em}body #salon-form input,body #salon-form select,body #salon-form textarea{font-size:16px;line-height:1.5}body .preview-button{font-size:12px;letter-spacing:.055em}body .salon-story p{font-size:15px;line-height:1.7}body .salon-contact>a{font-family:var(--type-display),sans-serif;line-height:1.12;letter-spacing:-.045em}body[data-v7-brand=kuafor] .v7-panel-intro h2{font-weight:700;letter-spacing:-.05em;line-height:1.09}@media(max-width:760px){body .cover h1{font-size:21vw;line-height:1.03}html:lang(de) body[data-v7-brand=kuafor] .cover h1,html:lang(en) body[data-v7-brand=kuafor] .cover h1{font-size:18.8vw}body .service strong{font-size:29px}body .salon-header nav a{font-size:12px}body .cover-note small{font-size:9px;letter-spacing:.04em}body[data-v7-brand=kuafor] .appointment h2{font-size:9.4vw;line-height:1.12}}

/* Syne's wide capitals need optical spacing around Turkish dotted I. */
body .cover h1{line-height:.94;letter-spacing:-.065em}
@media(max-width:760px){body .cover h1{font-size:18.5vw;line-height:1.02}html:lang(de) body[data-v7-brand=kuafor] .cover h1,html:lang(en) body[data-v7-brand=kuafor] .cover h1{font-size:17.6vw;line-height:1.04}}

/* Small controls are intentional typography too, with comfortable touch targets. */
body header [data-lang]{font-family:var(--type-micro),sans-serif;font-size:11px;line-height:1.4;letter-spacing:.025em;min-height:40px}
body :is(.motion,.motion-control){font-family:var(--type-micro),sans-serif;font-size:10px;line-height:1.4;letter-spacing:.035em}
body .v7-panel-body :is(.form-end p,.form-bottom p,.job-end p,.form-row>span,.job-row>span){font-size:11px;line-height:1.7}
@media(max-width:760px){body .salon-story{grid-template-columns:minmax(0,1fr)}body .story-type{min-width:0}body .story-type h2{font-size:15vw;line-height:1.04;letter-spacing:-.06em}body .salon-story figure{min-width:0;max-width:100%}}

@media(max-width:760px){html:lang(de) body[data-v7-brand=kuafor] .appointment h2 i{font-size:.7em;display:block;line-height:1.25;letter-spacing:-.045em}}

@media(max-width:760px){html:lang(de) body .story-type h2,html:lang(en) body .story-type h2{font-size:12.3vw;line-height:1.12}}

@media(max-width:760px){html:lang(en) body[data-v7-brand=kuafor] .cover h1{font-size:15.5vw}html:lang(en) body[data-v7-brand=kuafor] .cover h1>span{margin-left:4vw}}