@import url('fonts.css?v=bb6c3251');
:root{--paper:#e8e2da;--ink:#2c1d14;--gold:#a68f76;--eyebrow:#9c8973;--line:#b0a495;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}header{height:110px;padding:20px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:var(--serif);font-size:25px;letter-spacing:3px;line-height:1.3;white-space:nowrap}.brand span{font-weight:600}.brand small{display:block;font:10px var(--sans);letter-spacing:4px;text-align:center;margin-top:7px}nav{display:flex;gap:36px;font-size:14px}nav a:hover,.text-link:hover{color:var(--gold)}.nav-cta{border-bottom:1px solid var(--gold);font-size:14px;padding-bottom:5px}.hero{position:relative;display:grid;grid-template-columns:1.05fr 1fr;min-height:660px;padding:52px 6% 60px;gap:50px;align-items:center}.eyebrow{font-size:12px;letter-spacing:2.2px;font-weight:500;color:var(--eyebrow);margin:0 0 24px}h1,h2,p{margin-top:0}h1,h2{font-family:var(--serif);font-weight:400;line-height:1.05}h1{font-size:clamp(58px,5.9vw,94px);letter-spacing:-2px;margin-bottom:27px}em{color:var(--gold);font-weight:400}h2{font-size:clamp(45px,4.5vw,66px);letter-spacing:-1px;margin-bottom:30px}.intro{color:#534a42;line-height:1.9;margin-bottom:30px}.button{border:1px solid var(--ink);background:var(--ink);color:#f0ebe4;display:inline-block;padding:15px 27px;font-size:14px;transition:background .2s}.button:hover{background:#5a4737;border-color:#5a4737}.hero-photo{height:545px;position:relative}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:48% 48% 0 0}.section{padding:100px 8%}.about{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center;background:#d4ccc2}.portrait-wrap{position:relative;padding:0 25px 23px 0}.portrait-wrap:after{content:'';position:absolute;inset:35px 0 0 35px;border:1px solid var(--line);z-index:-1}.portrait-wrap img{width:100%;height:490px;object-fit:cover;object-position:center top;display:block}.portrait-label{position:absolute;left:28px;bottom:40px;background:#efeae3;padding:11px 18px;font:21px var(--serif)}.portrait-label i{font-size:15px}.about-copy>p:not(.eyebrow){color:#534a41;font-size:15px}.text-link{font-size:13px;border-bottom:1px solid var(--gold);padding-bottom:6px}footer{border-top:1px solid var(--line);padding:35px 6%;display:flex;align-items:center;justify-content:space-between;gap:30px}footer .brand{font-size:20px}footer p{font-size:12px;color:#605346;margin:0}footer>div{display:flex;gap:18px;font-size:11px;color:#5c5146}@media(min-width:1600px){body{max-width:1800px;margin:auto}}@media(max-width:1000px){nav{gap:18px}.hero{gap:24px}.hero-photo{height:510px}h1{font-size:68px}.section{padding:75px 6%}.about{gap:7%}footer{flex-wrap:wrap}}@media(max-width:700px){header{height:90px;padding:16px 6%}.brand{font-size:21px}.brand small{font-size:8px}nav{display:none}.nav-cta{font-size:12px}.hero{grid-template-columns:1fr;padding:38px 6% 60px;gap:36px}.hero .eyebrow{font-size:10px;margin-bottom:18px}h1{font-size:64px;margin-bottom:20px}.intro{font-size:15px}.hero-photo{height:430px;width:90%;margin-left:auto}.section{padding:64px 6%}.about{grid-template-columns:1fr;gap:40px}.portrait-wrap{width:90%}.portrait-wrap img{height:390px}.about-copy>p:not(.eyebrow){font-size:16px}h2{font-size:47px}.eyebrow{font-size:10px;letter-spacing:1.6px}footer{display:block;text-align:center}footer .brand{display:inline-block}footer p{margin:20px 0}footer>div{justify-content:center;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Personal wordmark */
.brand{font-size:22px;letter-spacing:2px;line-height:1.05}.brand small{margin-top:9px;letter-spacing:2px}.brand span{font-weight:500}footer .brand{font-size:21px}@media(max-width:700px){.brand{font-size:19px}.brand small{font-size:8px;letter-spacing:1.5px}}
 
.portrait-frame{height:490px;overflow:hidden}.portrait-wrap .portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.24);transform-origin:50% 40%}@media(max-width:700px){.portrait-frame{height:390px}.portrait-wrap .portrait-frame img{height:100%}}
@media(max-width:700px){.hero-copy{text-align:center}.hero-photo{margin:0 auto}.portrait-wrap{margin:0 auto}.portrait-label{left:24px;bottom:34px;padding:10px 16px;font-size:20px;line-height:1.2}.portrait-label i{display:block;font-size:13px;margin-top:2px}.about-copy .eyebrow,.about-copy h2{text-align:center}}
.splash{display:none}html.splash-on .splash{display:flex;position:fixed;inset:0;z-index:100;background:var(--paper);align-items:center;justify-content:center;animation:intro-out .7s ease 3s forwards}html.splash-on .splash.is-done{animation:intro-out .45s ease forwards}@keyframes intro-out{to{opacity:0;visibility:hidden}}
.burger,.nav-rule,.nav-social{display:none}@media(max-width:700px){header{position:relative;z-index:95}.burger{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin:0 -8px 0 4px;padding:0 8px;border:0;background:transparent;z-index:96}.burger span{display:block;height:1px;background:var(--ink);transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s,width .35s}.burger span:nth-child(2){width:70%}body.nav-open .burger{position:fixed;top:23px;right:calc(6% - 8px);margin:0}body.nav-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}body.nav-open .burger span:nth-child(2){opacity:0;width:0}body.nav-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}nav{display:flex;position:fixed;inset:0;z-index:90;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:90px 8% 60px;background:var(--paper);text-align:center;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}body.nav-open nav{opacity:1;visibility:visible;transition:opacity .4s ease}nav::before{content:"Christina Marsollek";position:absolute;top:34px;left:0;right:0;text-align:center;font:400 17px/1 var(--serif);letter-spacing:3px;text-transform:uppercase;color:var(--ink)}nav::after{content:"Friseurmeisterin";position:absolute;top:58px;left:0;right:0;text-align:center;font:8px var(--sans);letter-spacing:2px;text-transform:uppercase;color:#615549}nav>a:not(.button):not(.nav-social){font:400 40px/1.1 var(--serif);letter-spacing:-.5px;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}body.nav-open nav>a:not(.button):not(.nav-social){opacity:1;transform:none}body.nav-open nav>a:nth-child(1){transition-delay:.1s}body.nav-open nav>a:nth-child(2){transition-delay:.17s}body.nav-open nav>a:nth-child(3){transition-delay:.24s}body.nav-open nav>a:nth-child(4){transition-delay:.31s}.nav-rule{display:block;width:42px;height:1px;background:var(--gold);margin:14px 0 8px}.nav-social{display:block;font-size:12px;letter-spacing:1.5px;color:#615549;margin-top:6px;border-bottom:1px solid var(--line);padding-bottom:4px}.nav-rule,.nav-social{opacity:0;transition:opacity .5s ease .4s}body.nav-open .nav-rule,body.nav-open .nav-social{opacity:1}body.nav-open{overflow:hidden}}

.ig{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;vertical-align:-3px;margin-right:8px;flex:none}.with-icon,.nav-social,.footer-social{display:inline-flex;align-items:center}.footer-social{color:inherit;border-bottom:1px solid transparent;transition:color .2s}.footer-social:hover{color:var(--gold)}.footer-social .ig{width:14px;height:14px;margin-right:6px}.nav-social .ig{width:15px;height:15px;margin-right:7px}
.legal-page{padding:90px 8% 110px;max-width:980px}.legal-page h1{font-size:clamp(52px,5vw,76px);margin-bottom:46px}.legal-page h2{font-size:30px;letter-spacing:0;margin:42px 0 12px}.legal-page address{font-style:normal}.legal-page address,.legal-page p:not(.eyebrow){font-size:16px;line-height:1.9;margin-bottom:0}.legal-back{margin-top:56px}.legal-mail{border-bottom:1px solid var(--gold);padding-bottom:2px}.legal-mail:hover{color:var(--gold)}footer a[aria-current]{border-bottom:1px solid var(--gold)}@media(max-width:700px){.legal-page{padding:56px 6% 72px}.legal-page h2{font-size:26px}}.legal-page>*{max-width:760px}.legal-page p:not(.eyebrow)+p,.legal-page address+p,.legal-page ul+p{margin-top:14px}.legal-page ul{margin:12px 0 0;padding-left:20px;font-size:16px;line-height:1.9}.legal-page .legal-stand{font-size:13px!important;margin-top:40px!important;opacity:.75}
.brand img{display:block;height:80px;width:auto}footer .brand img{height:76px}@media(max-width:700px){.brand img{height:62px}footer .brand img{height:70px}nav::before{content:"";top:14px;height:62px;background:url(assets/glace-logo.png) center/contain no-repeat}nav::after{content:none}}
/* Claim wie auf der Visitenkarte: weit gesperrt, Punkte mit Luft */
.eyebrow.claim{letter-spacing:.42em}
.claim span{margin:0 .9em 0 .5em}
@media(max-width:700px){.hero .eyebrow.claim{letter-spacing:.34em}.claim span{margin:0 .6em 0 .3em}}
/* Headline zweizeilig ohne weiteren Umbruch, Schrift skaliert auf schmalen Bildschirmen mit */
.hero h1{white-space:nowrap}
@media(max-width:1000px){.hero h1{font-size:min(68px,8vw)}}
@media(max-width:700px){.hero h1{font-size:min(64px,15.5vw)}}
.hero-photo img{object-position:center 30%}
/* Preisliste */
.prices{background:var(--paper)}
.prices-head{text-align:center;margin-bottom:60px}
.prices-head h2{margin-bottom:0}

.price-list{list-style:none;margin:0;padding:0}
.price-list li{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(176,164,149,.5)}
.price-name{font:21px/1.25 var(--serif)}
.price-name small{display:block;font:12px/1.5 var(--sans);color:#6b5f53;margin-top:3px}
.price-value{font:21px var(--serif);color:var(--gold);white-space:nowrap}
.prices-foot{text-align:center;margin-top:60px}
.prices-foot p{font-size:13px;line-height:1.8;color:#5c5045;max-width:440px;margin:0 auto 26px}

@media(max-width:700px){.prices-head{margin-bottom:40px}.price-name,.price-value{font-size:19px}}
/* Monogramm „G.“ wie auf der Visitenkarte: sitzt links auf der Trennlinie über dem Footer und unterbricht sie */
footer{position:relative;padding-top:56px}
.footer-mark{position:absolute;top:0;left:calc(6% - 16px);transform:translateY(-50%);padding:0 16px;background:var(--paper);line-height:0}
.footer-mark img{height:46px;width:auto}
/* Ladeanimation Smartphone: Schriftzug wird von links freigelegt, danach erscheinen Linie und „BY CHRISTINA MARSOLLEK“ */
.splash-logo{position:relative;width:min(240px,64vw);aspect-ratio:1224/637;animation:logo-settle 3s cubic-bezier(.2,.7,.2,1) forwards}
.splash-logo img{position:absolute;inset:0;width:100%;height:100%}
.splash-word{clip-path:inset(0 100% 36% 0);animation:logo-reveal 1.3s cubic-bezier(.65,0,.25,1) .2s forwards}
.splash-by{clip-path:inset(68% 0 0 0);opacity:0;transform:translateY(8px);animation:logo-by .8s ease 1.3s forwards}
@keyframes logo-reveal{to{clip-path:inset(0 0 36% 0)}}
@keyframes logo-by{to{opacity:1;transform:none}}
@keyframes logo-settle{from{transform:scale(1.06)}to{transform:none}}
/* Abschluss im Atelier-Text: „GLACÉ.“ mit Claim darunter */
.about-copy>p.about-sign{margin-top:34px;font:400 30px/1.1 var(--serif);letter-spacing:.08em;color:var(--ink)}
.about-sign em{display:block;margin-top:6px;font-size:21px;font-style:italic;letter-spacing:0}
/* WhatsApp-Nummer unter „Termin anfragen“ */
.wa-number{display:table;margin-top:16px;font-size:13px;letter-spacing:.04em;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.wa-number span{margin-right:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--eyebrow)}
.wa-number:hover{border-bottom-color:var(--gold)}
.prices-foot .wa-number{margin:16px auto 0}
@media(max-width:700px){.hero .wa-number{margin:16px auto 0}}
/* Preisliste mit Rubrik-Schaltflächen: immer nur eine Rubrik sichtbar */
.price-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 44px}
.price-tabs button{font:400 19px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--eyebrow);background:transparent;border:1px solid transparent;padding:14px 22px;cursor:pointer;transition:color .2s,border-color .2s}
.price-tabs button:hover{color:var(--ink)}
.price-tabs button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.price-panels{max-width:680px;margin:0 auto}
.price-panel{animation:panel-in .45s ease}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){.price-tabs{display:grid;grid-template-columns:auto auto auto;gap:4px;margin-bottom:32px}.price-tabs button{font-size:13px;line-height:1.3;letter-spacing:.08em;padding:10px 8px}}
/* Bildunterschrift unter dem Hero-Foto */
.photo-caption{position:absolute;left:0;right:0;top:100%;margin:12px 0 0;font-size:11px;letter-spacing:.06em;color:var(--eyebrow);text-align:right}
.photo-caption span{white-space:nowrap}
@media(max-width:700px){.photo-caption{text-align:center}.hero{padding-bottom:110px}}
/* Passt die Bildunterschrift nicht in eine Zeile, stehen Arbeit, Datum und Kundin untereinander statt beliebig umzubrechen */
.hero-photo{container-type:inline-size}
.photo-caption{line-height:1.7}
@container (max-width:575px){.photo-caption>span{display:block}.photo-caption .sep{display:none}}
@media(min-width:701px){.hero{padding-bottom:90px}}
.photo-caption a{display:inline;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.photo-caption a:hover{border-bottom-color:var(--gold)}
.photo-caption .ig{width:12px;height:12px;margin:0 4px 0 2px;vertical-align:-2px}
.photo-caption .sep{font-style:normal}
/* Öffnungszeiten im Footer */
footer p.footer-hours{line-height:1.8;color:var(--ink)}
.footer-label{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow)}
/* Bogenrahmen um das Hero-Foto, damit das Bild darin gezoomt werden kann */
.hero-frame{height:100%;overflow:hidden;border-radius:48% 48% 0 0}
.hero-frame img{border-radius:0}
@media(max-width:700px){.hero-frame img{transform:translateY(-19px) scale(1.22);transform-origin:62% 22%}}
/* Datenschutz: Abschnittsnummern automatisch, damit ausgeblendete Abschnitte keine Lücke in der Zählung hinterlassen */
.legal-numbered{counter-reset:legal-section}
.legal-numbered h2{counter-increment:legal-section}
.legal-numbered h2::before{content:counter(legal-section) ". "}
/* Instagram vorübergehend ausgeblendet (Menü, Bildunterschrift, Footer, Datenschutz-Abschnitt).
   Zum Wieder-Aktivieren einfach die folgende Zeile löschen. */
[data-instagram]{display:none!important}