/* Hairlander website · one light look in the shop colours of the intro (Wandrot, Tiefrot, Apricot, Creme, Holz, Tinte).
   Type: Ibarra Real Nova (display) + Manrope (text), both local in assets/fonts. */
:root{
  --wandrot:#C43A1E; --tiefrot:#8C2416; --apricot:#EDBB84; --apricot-hi:#F4D3A6; --creme:#F6EEE2; --holz:#B07338; --holz-dk:#97602C; --tinte:#17120F;
  --paper:#F6EEE2; --paper-2:#EEE2D0; --ink:#17120F; --ink-2:#5D4F45; --rule:rgba(23,18,15,.16);
  --display:'Ibarra Real Nova','Iowan Old Style',Georgia,serif;
  --sans:'Manrope','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth;scroll-padding-top:0}
main > section{position:relative}
.snap{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}   /* section top edges for the settle logic (js/site.js) */
/* back to the top */
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;width:46px;height:46px;border-radius:50%;
  border:1.2px solid rgba(246,238,226,.35);background:var(--tinte);color:var(--creme);display:grid;place-items:center;padding:0;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s,background-color .2s ease;-webkit-tap-highlight-color:transparent}
.to-top.show{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s,background-color .2s ease}
.to-top:hover{background:var(--wandrot)}
.to-top svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:translateY(-.5px)}
body.hl-intro-on .to-top,body.hl-intro-on .float-call{display:none}
/* floating call button, above back-to-top */
.float-call{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:50;width:60px;height:60px;margin-right:-7px;border-radius:50%;
  background:var(--apricot);color:var(--tinte);display:grid;place-items:center;box-shadow:0 6px 18px rgba(23,18,15,.22);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s,background-color .2s ease;-webkit-tap-highlight-color:transparent}
.float-call.show{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s,background-color .2s ease}
.float-call:hover{background:#E3A86E}
.float-call svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transform:translate(.3px,.3px)}
.float-call:focus-visible,.to-top:focus-visible{outline:2px solid var(--gold,#E8C98A);outline-offset:3px}
body{background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--wandrot);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{font:600 11.5px/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(36px,5vw,64px);line-height:1;margin:14px 0 18px}
.lede{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--ink-2);max-width:36em;margin:0}
.btn,.btn-line{display:inline-flex;align-items:center;gap:.5em;font:600 14px/1 var(--sans);letter-spacing:.04em;padding:14px 20px;border-radius:999px;text-decoration:none;cursor:pointer;border:1.5px solid var(--tinte);transition:background-color .28s cubic-bezier(.4,0,.2,1),border-color .28s cubic-bezier(.4,0,.2,1),color .28s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
.btn{background:var(--tinte);color:var(--creme)}
.btn:hover{background:var(--wandrot);border-color:var(--wandrot)}
.btn-line{background:transparent;color:var(--tinte)}
.btn-line{--wipe-bg:var(--tinte);--wipe-fg:var(--creme)}
/* the wipe: the hover fill opens from the middle, and the label inside it switches colour exactly with the fill, so the
   text is readable at every moment (no crossfade through grey) */
.wipe{position:relative;isolation:isolate}
.wipe::before,.wipe::after{position:absolute;inset:0;border-radius:inherit;clip-path:inset(0 50% 0 50% round 999px);transition:clip-path .38s cubic-bezier(.4,0,.2,1);pointer-events:none}
.wipe::before{content:"";background:var(--wipe-bg);z-index:-1}
.wipe::after{content:attr(data-label);display:flex;align-items:center;justify-content:center;color:var(--wipe-fg)}
.wipe:hover::before,.wipe:hover::after,.wipe:focus-visible::before,.wipe:focus-visible::after{clip-path:inset(0 0 0 0 round 999px)}
.ph{display:inline-block;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--wandrot);border:1px solid currentColor;border-radius:999px;padding:5px 9px;margin-right:10px;vertical-align:2px}

/* ---------- header */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:20px;flex-wrap:nowrap}
.brand{display:block;line-height:0;text-decoration:none}
.lk{display:inline-flex;flex-direction:column;--lw:clamp(270px,28vw,360px)}
.lk img{width:var(--lw);height:auto;display:block}
.lk-sub{margin:-.35em 0 0 calc(var(--lw) * .2148);font:600 clamp(10.5px,1.05vw,13px)/1.2 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--tinte);white-space:nowrap}
.foot .brand img{height:auto;width:170px}
.lk-name{font:italic 500 100px/1 var(--display);letter-spacing:-.005em}
.nav{display:flex;gap:clamp(12px,2.4vw,28px);align-items:center;flex-wrap:nowrap;flex-shrink:0}
/* below 760 px the text links give way, so logo and Intro button always share one row */
@media (max-width:760px){.nav a{display:none}}
.nav a{font:600 13px/1 var(--sans);letter-spacing:.06em;text-decoration:none;color:var(--ink-2)}
.nav a:hover{color:var(--wandrot)}
.replay{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;background:none;border:1.2px solid var(--rule);border-radius:999px;padding:7px 11px;white-space:nowrap;cursor:pointer;color:var(--ink);transition:border-color .2s ease;-webkit-tap-highlight-color:transparent}
.replay:hover{border-color:var(--tinte)}

/* ---------- hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:end;padding-block:clamp(24px,5vw,64px) clamp(48px,7vw,96px)}
.hero h1{font-size:clamp(42px,6.4vw,84px);line-height:.98;margin:18px 0 22px}
.hero h1 em{font-style:italic;font-weight:500;color:var(--wandrot)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.arch{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;border-radius:999px 999px 0 0;background:linear-gradient(180deg,var(--apricot-hi) 0%,var(--apricot) 62%,#E3A86E 100%);aspect-ratio:4/5;overflow:hidden}
.arch svg.moon{position:absolute;left:50%;top:36%;width:62%;transform:translate(-50%,-50%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.arch:hover svg.moon{transform:translate(-50%,-53%)}
.arch-cap{position:relative;padding:18px 22px 22px;color:var(--creme);background:var(--holz)}
.arch-cap strong{display:block;font:500 italic clamp(22px,2.2vw,28px)/1.15 var(--display)}
.arch-cap span{display:block;font:600 11px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.92;margin-top:8px}

/* ---------- Handwerk: a band in the salon's wall red */
.craft{background:var(--wandrot);color:var(--creme);padding-block:clamp(64px,9vw,128px);position:relative;overflow:hidden}
.craft-heart{position:absolute;right:-12vw;top:50%;width:52vw;height:auto;transform:translateY(-50%) rotate(8deg);fill:var(--tiefrot);opacity:.38;pointer-events:none}
/* tablet: the service cards stand upright again (arch cards like on desktop), four in a row, smaller (.services prefix: beats the compact rules of the 860px block) */
@media (min-width:561px) and (max-width:860px){
  .services .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .services .svc{display:flex;flex-direction:column;border-radius:999px 999px 16px 16px;padding:0 10px 18px}
  .services .svc-art{width:auto;margin:0 -4% 4px;align-self:stretch}
  .services .svc-art svg,.services .svc-art img{width:82%}
  .services .svc h3{text-align:center;font-size:17px;margin:6px 0 6px;align-self:auto}
  .services .svc p{text-align:center;font-size:13px;line-height:1.45;align-self:auto}
}
@media (max-width:560px){.craft-heart{right:-34vw;width:96vw;top:34%}}
.craft .wrap{position:relative;z-index:1}
.craft .eyebrow{color:#F4CDB8}
.craft h2{font-size:clamp(48px,7.4vw,104px);font-style:italic;font-weight:500;line-height:.95}
.craft .lede{color:#FBE5D9;max-width:40em}
.pillars{list-style:none;padding:0;margin:clamp(40px,6vw,72px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.pillars li{padding-top:0}
.pillars .no{display:block;font:500 italic clamp(56px,6vw,84px)/.9 var(--display);color:var(--apricot);letter-spacing:0}
.pillars h3{font-size:clamp(24px,2.4vw,30px);font-weight:600;margin:12px 0 10px;color:var(--creme)}
.pillars p{margin:0;color:#FBE5D9}

/* ---------- Leistungen: arch cards like the salon's arches */
.services{padding-block:clamp(64px,9vw,128px)}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,5vw,56px)}
.svc{background:var(--paper-2);border-radius:999px 999px 18px 18px;padding:0 clamp(16px,1.8vw,24px) 26px;display:flex;flex-direction:column;transition:background-color .35s ease}
.svc:hover{background:#F2D9BC}
.svc-art{aspect-ratio:1;margin:0 -6% 6px;border-radius:999px;background:radial-gradient(circle at 50% 42%,var(--apricot-hi),var(--apricot) 70%);display:grid;place-items:center}
.svc-art svg,.svc-art img{width:78%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.svc-art .svc-ph{width:84%;filter:drop-shadow(0 6px 10px rgba(80,40,10,.18))}
/* the scissors and the weft reach into the corners of their pictures: smaller, so they stay inside the circle */
.svc-art .svc-ph[src*="laenge"]{width:66% !important}
/* the scissors: larger again, and centred by eye (their weight sits in the rings, top right, so they move a little left/up) */
.svc-art .svc-ph[src*="schnitt"]{width:76% !important;translate:-5% -2%}
.svc:hover .svc-art svg,.svc:hover .svc-art img{transform:rotate(-6deg) scale(1.06)}
.svc h3{hyphens:auto;overflow-wrap:break-word;font-size:clamp(20px,1.8vw,24px);font-weight:500;font-style:italic;line-height:1.15;margin:8px 0 10px;text-align:center}
.svc p{margin:0;color:var(--ink-2);text-align:center;font-size:15px}

/* ---------- Kaffee */
.coffee{background:linear-gradient(180deg,var(--paper) 0%,var(--apricot-hi) 100%);padding-block:clamp(48px,7vw,96px);overflow:hidden}
/* the lady from the old shop card (traced: _lady/), large and faded behind the text, like a watermark */
.coffee-dame{position:absolute;max-width:none;object-fit:contain;right:max(-4vw,calc((100vw - 1180px) / 2 - 140px));bottom:0;height:calc(100% - 22px);aspect-ratio:900/1132;width:auto;opacity:.13;pointer-events:none;z-index:0}
.coffee-grid{position:relative;z-index:1}
@media (max-width:860px){.coffee-dame{aspect-ratio:auto;right:-40vw;height:min(74%,500px);bottom:-7%;opacity:.1}}
/* tablet: the cup in the left half, the long lady large in the right half, standing on the section border; the text below */
@media (min-width:561px) and (max-width:860px){
  /* the cup's centre sits at one third of the width (left column 2fr, centred in it); the lady fills the right side */
  .coffee .coffee-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);row-gap:clamp(8px,2vw,20px)}   /* (.coffee prefix: beats the general 860px single-column rule further down) */
  .coffee .coffee-grid > div{grid-column:1}   /* the text stays in the left two thirds, under the cup: the lady keeps the right third */
  .coffee .cup{justify-self:center;width:min(100%,380px)}
  .coffee-dame{aspect-ratio:900/1132;right:-2vw;bottom:0;height:min(78%,640px);opacity:.14}
}
.coffee-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center}
/* desktop: three parts in one row: cup | text | the lady (her width is reserved, js sets --ladyw); she stands on the border
   with her cut line running at the height of the cup's rim: one horizon from the coffee to the scissors */
@media (min-width:861px){
  /* balance: equal gaps cup → text → lady (her full width is reserved, so the scissors never touch the text), a calmer
     two-line heading, the text block centred on the cup's rim / cut line horizon */
  .coffee{min-height:clamp(540px,44vw,700px);display:flex;align-items:center}   /* a taller stage: the lady can stand large */
  .coffee > .wrap{flex:1}
  .coffee-grid{grid-template-columns:auto auto var(--ladyw,300px);justify-content:center;gap:clamp(36px,4vw,64px)}
  .coffee-grid > div{width:clamp(320px,30vw,30em);margin-left:clamp(14px,2.2vw,36px)}   /* a touch more air after the cup: the saucer reaches out further than the cup reads */
  .coffee .cup{width:clamp(280px,25vw,380px);max-width:none;justify-self:center}
  .coffee h2{font-size:clamp(38px,3.7vw,54px);line-height:1.04}
  .coffee .lede{max-width:30em}
  .coffee-dame{right:max(var(--gutter),calc((100vw - 1180px) / 2 + var(--gutter) - 30px));opacity:.16}
}
.cup{width:100%;max-width:420px;height:auto;justify-self:center}
.steam path{animation:steam 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.steam .s2{animation-delay:-1.6s}.steam .s3{animation-delay:-3.2s}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleY(.85)}35%{opacity:1}100%{opacity:0;transform:translateY(-18px) scaleY(1.08)}}

/* ---------- Mondkalender: the night (a deliberate style break: midnight blue, moonlight silver, a touch of gold) */
.night{--nb0:#070D1F;--nb1:#0E1A3A;--nb2:#1B2D5C;--silver:#DCE4F2;--silver2:#9FB0D0;--gold:#E8C98A;
  position:relative;overflow:hidden;color:var(--silver);padding:clamp(72px,10vw,140px) 0 clamp(72px,9vw,120px);
  background:radial-gradient(120% 70% at 50% 34%,#22386E 0%,var(--nb1) 46%,var(--nb0) 100%)}
.night .eyebrow{color:var(--gold)}
.night h2{color:#F4F7FC;font-style:italic;font-weight:500;font-size:clamp(48px,7vw,96px);line-height:.95}
.night h3{color:#F4F7FC}
.night .lede,.night p{color:var(--silver2)}
.stars{position:absolute;inset:0;pointer-events:none}
.star-layer{position:absolute;left:0;right:0;top:-45%;bottom:-45%;will-change:transform}
.star-group{position:absolute;inset:0;width:100%;height:100%;fill:#fff;will-change:opacity}
.star-group.tw{animation:twinkle 5s ease-in-out infinite}
.star-group.soft{filter:blur(1.6px)}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:1}}
.moon-head{text-align:center;position:relative}
.moon-head .lede{margin-inline:auto}
.dial-stage{position:relative;max-width:1100px;margin:clamp(8px,2vw,24px) auto 0;aspect-ratio:1200/812;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bigmoon{position:absolute;left:50%;bottom:11%;width:35%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  --glow:1;box-shadow:0 0 60px 16px rgba(190,210,255,calc(.28 * var(--glow))),0 0 160px 60px rgba(120,150,230,calc(.16 * var(--glow)))}
.bigmoon svg{width:100%;height:100%;display:block;overflow:visible}
.head{position:absolute;left:50%;bottom:0;width:41%;aspect-ratio:1;transform:translateX(-46%);pointer-events:none;overflow:visible}
.dial-hit{position:absolute;inset:0;cursor:grab}
.dial-hit:active{cursor:grabbing}
.dial-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.ring-track{fill:none;stroke:#BFD0F2;stroke-opacity:.08;stroke-width:46}
.ring-line{fill:none;stroke:var(--silver);stroke-opacity:.35;stroke-width:1.2}
.ring-tick{stroke:var(--silver);stroke-opacity:.35;stroke-width:1.4;stroke-linecap:round}
.zod-line{fill:none;stroke:var(--gold);stroke-opacity:.35;stroke-width:1}
.zod-glyph{font:400 34px/1 var(--display);fill:var(--gold);fill-opacity:.6;text-anchor:middle;dominant-baseline:central}
.zod-glyph.now{fill-opacity:1;font-size:46px}
.corona{fill:#FFF1D2;opacity:.55}
.corona.fine{opacity:.32}
.today-halo{transform-box:view-box;transform-origin:0 0;animation:halo 5s ease-in-out infinite}
@keyframes corona{to{transform:rotate(360deg)}}
@keyframes halo{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
.moon-item{cursor:pointer}
/* the hover card on the ring's moons */
.moon-tip{position:absolute;z-index:3;width:min(290px,70vw);transform:translate(-50%,calc(-100% - 64px)) scale(.96);opacity:0;pointer-events:none;
  background:rgba(7,13,31,.92);border:1px solid rgba(232,201,138,.45);border-radius:16px;padding:14px 16px 15px;color:var(--silver);
  box-shadow:0 18px 40px rgba(0,0,0,.35);transition:opacity .2s ease,transform .2s ease;backdrop-filter:blur(6px)}
.moon-tip.on{opacity:1;transform:translate(-50%,calc(-100% - 60px)) scale(1)}
.moon-tip.below{transform:translate(-50%,64px) scale(.96)}.moon-tip.below.on{transform:translate(-50%,60px) scale(1)}
.moon-tip b{display:block;font:500 italic 21px/1.2 var(--display);color:#F4F7FC}
.tip-when{display:block;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:4px 0 8px}
/* hover card rows */
.tip-row{display:block;font-size:13.5px;line-height:1.5;margin-top:6px}
.tip-row i{font-style:normal;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:8px}
.tip-good{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tip-good em{font:600 10.5px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--nb0);background:var(--gold);border-radius:999px;padding:7px 10px}
.tip-hint{display:block;margin-top:10px;font-size:12px;color:var(--silver2)}
.body-lore{font-size:14.5px;color:var(--silver2)}
.body-lore i{font-style:normal;font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:8px}
.pointer{fill:var(--gold)}
.sex{position:absolute;left:70%;bottom:3.5%;display:flex;gap:6px;z-index:2}
.sex button{width:36px;height:36px;padding:0;border-radius:50%;border:1.2px solid rgba(220,228,242,.35);background:rgba(7,13,31,.45);color:var(--silver);
  cursor:pointer;display:grid;place-items:center;transition:background-color .25s ease,color .25s ease,border-color .25s ease;-webkit-tap-highlight-color:transparent}
.sex svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sex button[data-sex="0"] svg{transform:translateY(-.5px)}
.sex button[data-sex="1"] svg{transform:translate(.5px,-.5px)}
.sex button[aria-pressed="true"]{background:var(--silver);color:var(--nb0);border-color:var(--silver)}
.sex button:hover{border-color:var(--gold)}
.phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);padding-block:clamp(48px,6vw,80px) clamp(24px,3vw,40px);position:relative;overflow-anchor:none;align-content:start}
.phase h3{font-size:clamp(32px,3.6vw,48px);font-weight:500;font-style:italic;margin:10px 0 12px}
.phase p{margin:0 0 12px;max-width:34em}
.phase-day{color:var(--silver) !important;font-weight:600}
.cut-tag{font:italic 500 22px/1.3 var(--display);color:var(--gold) !important}
.good{list-style:none;padding:0;margin:4px 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.good li{font:600 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--nb0);background:var(--gold);border-radius:999px;padding:9px 13px}
.moon-btn{background:var(--silver);border-color:var(--silver);color:var(--nb0);margin-top:8px}
.moon-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--nb0)}
.month,.signs-wrap{position:relative;padding-top:clamp(40px,5vw,64px)}
.signs-wrap h3{font-size:clamp(28px,3vw,38px);font-weight:500;font-style:italic;margin:0 0 8px;padding-top:12px}
.sub{margin:0 0 22px;max-width:46em}
.month-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-top:12px;margin-bottom:8px}
.month .month-head h3{border:0;padding:0;margin:0;font-size:clamp(28px,3vw,38px);font-weight:500;font-style:italic}
.strip-nav{display:flex;gap:8px}
.strip-nav button{width:42px;height:42px;border-radius:50%;border:1.2px solid rgba(220,228,242,.35);background:transparent;color:var(--silver);cursor:pointer;display:grid;place-items:center;padding:0;transition:border-color .25s ease,color .25s ease,opacity .25s ease;-webkit-tap-highlight-color:transparent}
.strip-nav svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#stripPrev svg{transform:translateX(-.5px)}
#stripNext svg{transform:translateX(.5px)}
.strip-nav button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.strip-nav button:disabled{opacity:.25;cursor:default}
.strip-wrap{position:relative;margin:0 calc(-1 * var(--gutter))}
.strip-wrap::before,.strip-wrap::after{content:"";position:absolute;top:0;bottom:18px;width:var(--gutter);min-width:28px;pointer-events:none;z-index:1;transition:opacity .3s}
.strip-wrap::before{left:0;background:linear-gradient(90deg,#0E1A3A,rgba(14,26,58,0))}
.strip-wrap::after{right:0;background:linear-gradient(-90deg,#0E1A3A,rgba(14,26,58,0))}
.strip-wrap.at-start::before,.strip-wrap.at-end::after{opacity:0}
.strip{list-style:none;margin:0;padding:4px var(--gutter) 18px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
@media (hover:none){.strip{scroll-snap-type:none;overscroll-behavior-x:contain}}   /* fingers: free native swiping (mandatory snap fought the finger on iPhones) */
.strip-bar{position:relative;height:2px;margin:2px 0 0;background:rgba(220,228,242,.16);border-radius:2px;overflow:hidden}
.strip-bar span{position:absolute;top:0;bottom:0;left:0;width:20%;background:var(--gold);border-radius:2px;transition:width .2s;will-change:transform}
.day{flex:0 0 132px;scroll-snap-align:start;border-radius:18px;padding:14px 12px 14px;background:rgba(27,45,92,.55);border:1px solid rgba(220,228,242,.12);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.day.today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.day.top{background:linear-gradient(180deg,rgba(232,201,138,.22),rgba(27,45,92,.55))}
.day .d{font:600 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--silver2)}
.day .n{font:500 italic 26px/1 var(--display);color:#F4F7FC}
.day svg{width:44px;height:44px}
.day .z{font:400 22px/1 var(--display);color:var(--gold)}
.day .zn{font:600 11px/1.2 var(--sans);color:var(--silver2)}
.day .r{font:600 12px/1.3 var(--sans);color:var(--silver);min-height:2.6em}
.day.top .r{color:var(--gold)}
.signs{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sign{border-radius:16px;padding:16px 16px 18px;background:rgba(27,45,92,.45);border:1px solid rgba(220,228,242,.1)}
.sign.now{border-color:var(--gold);background:linear-gradient(160deg,rgba(232,201,138,.18),rgba(27,45,92,.5))}
.sign .g{font:400 34px/1 var(--display);color:var(--gold)}
.sign b{display:block;font:500 italic 22px/1.2 var(--display);color:#F4F7FC;margin:8px 0 2px}
.sign .el{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--silver2)}
.sign p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--silver)}
.sign .now-tag{float:right;font:600 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nb0);background:var(--gold);border-radius:999px;padding:6px 8px}
.night .note{color:var(--silver2);font-size:14px}
.since{margin:clamp(40px,6vw,72px) auto 0;max-width:760px;text-align:center;padding:clamp(28px,4vw,44px) clamp(20px,4vw,48px);border-radius:28px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(232,201,138,.14),rgba(27,45,92,.35) 60%);border:1px solid rgba(232,201,138,.28)}
.since blockquote{margin:12px 0 14px;font:500 italic clamp(32px,4.4vw,54px)/1.05 var(--display);color:#F4F7FC}
.since figcaption{color:var(--silver2);max-width:36em;margin:0 auto}
.since-cta{margin:18px 0 18px !important;font:500 italic 22px/1.3 var(--display);color:var(--gold) !important}

/* ---------- Kunst */
.art{padding-block:clamp(56px,8vw,112px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.art .lede+.lede{margin-top:16px}
.frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.frame{display:block;border-radius:999px 999px 0 0;aspect-ratio:3/5}
.frame.f1{background:linear-gradient(180deg,var(--wandrot),var(--tiefrot))}
.frame.f2{background:linear-gradient(180deg,var(--apricot-hi),var(--holz));aspect-ratio:3/6}
.frame.f3{background:linear-gradient(180deg,#E3A86E,var(--wandrot))}

/* ---------- Termin */
.contact{background:var(--tinte);color:var(--creme);padding-block:clamp(56px,8vw,112px);overflow:hidden}
/* the bald lady from the old Ahrens ad ("Nicht jede Frisur passt zu Ihnen"), large and faded behind the Termin heading */
.kopf-dame{position:absolute;max-width:none;object-fit:contain;left:max(-6vw,calc((100vw - 1180px) / 2 - 220px));bottom:0;height:112%;width:auto;opacity:.16;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 98%);mask-image:linear-gradient(90deg,#000 55%,transparent 98%)}
.contact-grid{position:relative;z-index:1}
@media (max-width:860px){.kopf-dame{left:auto;right:-30vw;height:70%;opacity:.12;-webkit-mask-image:none;mask-image:none}}
@media (min-width:561px) and (max-width:860px){.kopf-dame{right:-12vw}}   /* tablet: further into view */
@media (max-width:560px){.kopf-dame{right:-44vw}}   /* phone: a little further right */
.contact .eyebrow{color:#C9B9A6}
.contact .lede{color:#E6D9C7}
.contact .ph{color:var(--apricot)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.facts{margin:0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid rgba(246,238,226,.16)}
.facts dt{font:600 11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#B8A895}
.facts dd{margin:0;color:#E3D5C2}
.facts dd a{color:var(--creme)}
.btn.on-dark{background:var(--wandrot);border-color:var(--wandrot);color:var(--creme)}
.btn.on-dark{--wipe-bg:var(--creme);--wipe-fg:var(--tinte)}
/* "Zum Mondkalender": a moon rolls from the left into the round right end, then black fills the button from the moon outward;
   the label turns cream exactly where the fill reaches it. On mouse-out everything runs backwards. js/site.js sets --run / --spin. */
.btn-line.roll{position:relative;isolation:isolate;--pl:52px;--pr:16px;padding-left:var(--pl);padding-right:var(--pr);--run:120px;--spin:220deg}
.roll-fill,.roll-alt{position:absolute;inset:-1.5px;border-radius:inherit;clip-path:inset(0 0 0 calc(100% - var(--dh, 46px)) round 999px);visibility:hidden;
  transition:clip-path .4s cubic-bezier(.4,0,.2,1),visibility 0s linear .4s}
.roll-fill{z-index:-1;border-radius:999px;   /* the night of the Mondkalender: midnight-blue gradient with twinkling stars */
  background:radial-gradient(160% 220% at 72% 18%,#22386E 0%,#0E1A3A 52%,#070D1F 100%)}
.roll-fill::before,.roll-fill::after{content:"";position:absolute;inset:0;animation:btnTwinkle 1.7s ease-in-out infinite alternate}
.roll-fill::before{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E");background-position:15% 14%,45% 10%,57% 90%,6% 74%;background-size:9px 9px,11px 11px,8px 8px,7px 7px;background-repeat:no-repeat}
.roll-fill::after{animation-duration:2.3s;animation-delay:-1.1s;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-10 -10 20 20%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%23fff%22 stop-opacity=%22.75%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M0-7 .7-.7 7 0 .7.7 0 7-.7.7-7 0-.7-.7Z%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Ccircle r=%223.4%22 fill=%22url%28%23g%29%22/%3E%3C/svg%3E");background-position:31% 90%,68% 12%,22% 88%,38% 8%;background-size:9px 9px,8px 8px,6px 6px,7px 7px;background-repeat:no-repeat}
@keyframes btnTwinkle{0%{opacity:.1}100%{opacity:1}}
.roll-alt{display:flex;align-items:center;padding:calc(14px + 1.5px) calc(var(--pr) + 1.5px) calc(14px + 1.5px) calc(var(--pl) + 1.5px);color:var(--creme)}
.roll-txt{display:block;position:relative;z-index:1;text-shadow:0 0 6px rgba(246,238,226,.9),0 0 2px rgba(246,238,226,.9);transition:transform .62s cubic-bezier(.45,0,.2,1) .38s,text-shadow .3s ease .1s}
.roll-alt .roll-txt{text-shadow:none}
.roll-alt{z-index:2}
.roll-moon{position:absolute;z-index:0;left:0;top:0;bottom:0;aspect-ratio:1;border-radius:50%;
  background:url(../img/moon-near-side.webp) center/cover;box-shadow:inset -3px -3px 6px rgba(0,0,0,.25);
  transition:transform .62s cubic-bezier(.45,0,.2,1) .38s}
.btn-line.roll:hover .roll-moon,.btn-line.roll:focus-visible .roll-moon,.btn-line.roll.rolled .roll-moon{transform:translateX(var(--run)) rotate(var(--spin));transition-delay:0s}
.btn-line.roll:hover .roll-txt,.btn-line.roll:focus-visible .roll-txt,.btn-line.roll.rolled .roll-txt{transform:translateX(calc(var(--pr) - var(--pl)));transition-delay:0s,.5s}
.btn-line.roll:hover > .roll-txt,.btn-line.roll:focus-visible > .roll-txt,.btn-line.roll.rolled > .roll-txt{text-shadow:0 0 6px rgba(246,238,226,0),0 0 2px rgba(246,238,226,0)}
.btn-line.roll:hover .roll-fill,.btn-line.roll:hover .roll-alt,.btn-line.roll:focus-visible .roll-fill,.btn-line.roll:focus-visible .roll-alt,.btn-line.roll.rolled .roll-fill,.btn-line.roll.rolled .roll-alt{clip-path:inset(0 0 0 0 round 999px);visibility:visible;transition-delay:.58s,.58s}
.btn-line.roll:hover,.btn-line.roll.rolled{background:transparent;color:var(--tinte);border-color:#0E1A3A;transition:border-color .3s ease .58s}
/* instant reset (used while the intro covers the page) */
.btn-line.roll.no-anim,.btn-line.roll.no-anim *{transition:none !important}
@media (prefers-reduced-motion:reduce){.roll-moon,.roll-txt{transition:none}.roll-fill::before,.roll-fill::after{animation:none}}
.btn.on-dark:hover{border-color:var(--creme)}
.contact .cta{margin-top:24px}

/* ---------- footer */
.foot{background:var(--tinte);color:#9F8F7D;border-top:1px solid rgba(246,238,226,.12);padding-block:40px 48px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:20px 40px;align-items:center}
.foot-grid img{width:150px;height:auto}
.foot nav{display:flex;gap:18px 24px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.foot nav a{text-decoration:none;color:#CDBEAA}
.foot .ph{color:var(--apricot);margin:0 0 0 6px;padding:3px 6px;font-size:9.5px}
.replay.on-dark{color:var(--creme);border-color:rgba(246,238,226,.3)}
.replay.on-dark:hover{border-color:var(--creme)}
.fine{grid-column:1/-1;margin:0}

/* ---------- Impressum, Datenschutz */
.legal{max-width:760px;padding-block:clamp(32px,6vw,72px) clamp(56px,8vw,112px)}
.legal h1{font-size:clamp(40px,6vw,64px);font-weight:500;font-style:italic;line-height:1;margin:0 0 28px}
.legal h2{font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tiefrot);margin:0 0 10px}
.legal section{border-top:1px solid var(--rule);padding-top:20px;margin-top:24px}
.legal p{margin:0 0 12px;color:var(--ink-2)}
.legal .lede{margin-bottom:8px}
.legal .note{margin-top:32px}

/* ---------- smaller screens */
@media (max-width:860px){
  .hero,.phase,.art-grid,.contact-grid,.coffee-grid{grid-template-columns:minmax(0,1fr)}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  /* tablet and phone: compact cards, the round illustration on the left, the text beside it */
  .svc{display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;align-content:center;border-radius:999px 22px 22px 999px;padding:10px 20px 10px 10px}
  .svc-art{grid-row:1 / span 2;width:100px;margin:0;align-self:center}
  .svc-art svg{width:80%}
  .svc h3{align-self:end;text-align:left;font-size:20px;margin:0 0 4px}
  .svc p{align-self:start;text-align:left;font-size:14px;line-height:1.45}
  .arch{max-width:420px;width:100%;justify-self:center}
  .pillars{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .signs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .sex{left:auto;right:19.5%;bottom:4%}
  .sex button{width:32px;height:32px}
  .sex svg{width:17px;height:17px}
  .signs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sign{padding:12px 12px 14px}
  .sign .g{font-size:28px}
  .sign b{font-size:19px}
  .sign .el{font-size:9.5px;letter-spacing:.12em}
  .sign p{font-size:13px}
  .coffee{padding-bottom:min(118vw,470px)}   /* phones: the lady stands whole and centred below the text, on the section border */
  .coffee-dame{left:50%;right:auto;translate:-50% 0;bottom:calc(min(112vw,450px) * -.0087);height:min(112vw,450px);opacity:.2}   /* (the image's last 8 of 920 rows are a faint fringe: the solid dress sits on the border) */
  .sign .now-tag{margin:5px 0 0 6px;font-size:9px;letter-spacing:.1em;padding:5px 7px}   /* stays floated right, on the glyph's line */

  .nav a{display:none}
  .lk{--lw:224px}
  .hero .cta{gap:8px;flex-wrap:nowrap}
  .hero .cta .btn,.hero .cta .btn-line{font-size:13px;letter-spacing:.02em}
  .hero .cta .btn{padding:14px 15px}
  .btn-line.roll{--pl:48px;--pr:13px}
  .lk-sub{font-size:9.5px;letter-spacing:.2em}
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  /* phone: compact cards, the round illustration on the left, the text beside it */
  .svc{grid-template-columns:84px minmax(0,1fr);column-gap:14px;padding:8px 18px 8px 8px}
  .svc-art{width:84px}
  .svc h3{font-size:19px}
  .svc p{font-size:13.5px}
  .dial-stage{width:156%;max-width:none;margin-left:-28%}
  .dial-hint{font-size:10px;letter-spacing:.16em}
  .facts div{grid-template-columns:minmax(0,1fr);gap:4px}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot nav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arch svg.moon{transition:none}
  .steam path{animation:none;opacity:.8}
  .star-group.tw{animation:none}
  .corona,.today-halo{animation:none}
}