/* =========================================================
Prestige Haarstudio — Startseite
Design der bestehenden Website prestigehaarstudio.at
(Creme #F7F0D0 · Anthrazit #151515 · weiße Sektionen),
ergänzt um Hero-Karussell, Feeds-Karussell und das
eigene Buchungssystem.
Wird NACH assets/styles.css geladen und überschreibt
dort das dunkle Grundthema. Der Buchungsbereich bleibt
bewusst dunkel und wird als eigenes Band eingebettet.
========================================================= */
/* ---------- selbst gehostete Schriften (kein Google-Server) ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ---------- Farbwelt der bestehenden Website ---------- */
body.ph{
--ph-cream:#F7F0D0;
--ph-cream-lt:#FFFDE9;
--ph-cream-dp:#e6dcae;
--ph-dark:#151515;
--ph-dark-2:#1d1d1d;
--ph-ink:#151515;
--ph-body:#5b5b5b;
--ph-muted:#8d8d8d;
--ph-line:#e9e9e9;
--ph-bg:#ffffff;
--ph-bg-alt:#f7f7f7;
--ph-book-bg:#1e2226;
--ph-head:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--ph-script:"Caveat","Segoe Script",cursive;
--ph-shadow:0 2px 15px rgba(0,0,0,.08);
--ph-shadow-lg:0 14px 40px rgba(0,0,0,.13);
}
/* ---------- helles Grundthema (überschreibt styles.css) ---------- */
body.ph{background:var(--ph-bg);color:var(--ph-body);font-family:var(--font-body);overflow-x:hidden}
body.ph::before,body.ph::after{display:none!important;content:none!important}
body.ph h1,body.ph h2,body.ph h3,body.ph h4,body.ph h5{font-family:var(--ph-head);color:var(--ph-ink)}
body.ph .wrap{max-width:1200px}
body.ph img{max-width:100%;display:block}
/* ---------- Kopfzeile ---------- */
body.ph #header{
position:fixed;top:0;left:0;right:0;z-index:60;
background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
border-bottom:1px solid transparent;
transition:background .35s ease,border-color .35s ease,padding .35s ease;
padding:8px 0 8px;
}
body.ph #header.scrolled{background:rgba(0,0,0,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:rgba(255,255,255,.08)}
body.ph #header .nav{height:76px}
body.ph .brand .logo-img{height:58px;width:auto}
body.ph .nav-links{gap:1.55rem}
body.ph .nav-links a{
font-family:var(--ph-head);font-size:.92rem;font-weight:600;color:var(--ph-cream-lt);
letter-spacing:.01em;transition:color .25s;
}
body.ph .nav-links a:hover,body.ph .nav-links a.active{color:var(--ph-cream)}
body.ph .nav-links a.active::after{background:var(--ph-cream);bottom:-8px}
body.ph .nav-right .btn-gold{
background:transparent;color:var(--ph-cream-lt);border:2px solid var(--ph-cream);
box-shadow:none;border-radius:4px;padding:.55rem 1.35rem;font-family:var(--ph-head);font-weight:600;font-size:.9rem;
}
body.ph .nav-right .btn-gold:hover{background:var(--ph-cream);color:var(--ph-dark);transform:none;box-shadow:none}
body.ph .menu-btn span{background:var(--ph-cream-lt)}
body.ph .mobile-menu{
top:calc(80px + env(safe-area-inset-top));background:rgba(10,10,10,.97);
border-bottom:1px solid rgba(255,255,255,.1);
}
body.ph .mobile-menu a{color:var(--ph-cream-lt);border-bottom-color:rgba(255,255,255,.08);font-family:var(--ph-head);font-weight:600}
body.ph .mobile-menu .btn-gold{background:var(--ph-cream);color:var(--ph-dark);border:none;margin-top:1rem;justify-content:center}
/* =========================================================
HERO — Vollbild-Karussell + animierte Überschrift
========================================================= */
.ph-hero{position:relative;height:100vh;min-height:560px;overflow:hidden;background:#101010}
@supports(height:100svh){.ph-hero{height:100svh}}
.ph-hero-slides{position:absolute;inset:0}
.ph-hero-slide{
position:absolute;inset:0;opacity:0;
background-size:cover;background-position:center;
transition:opacity 1.2s ease;
}
/* will-change nur für den gerade sichtbaren Slide: Vorher hielt jeder Slide
dauerhaft eine eigene GPU-Ebene offen — auch die unsichtbaren. Das kostet
Speicher und bringt nichts, solange der Slide gar nicht animiert wird. */
.ph-hero-slide.on{opacity:1;will-change:opacity,transform}
.ph-hero-slide video{width:100%;height:100%;object-fit:cover}
.ph-hero.kb .ph-hero-slide.on{animation:phKen 9s ease-out forwards}
@keyframes phKen{from{transform:scale(1)}to{transform:scale(1.09)}}
.ph-hero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.48) 45%,rgba(0,0,0,.68) 100%);
}
.ph-hero-inner{
position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;padding:5rem 24px 7rem;
}
/* animierte Handschrift-Überschrift */
body.ph .ph-script{
font-family:var(--ph-script);color:var(--ph-cream);
font-size:clamp(2.9rem,9vw,7.2rem);line-height:1.02;font-weight:600;
margin:0;max-width:16ch;text-shadow:0 6px 32px rgba(0,0,0,.45);
}
/* Schreibbewegung: die Buchstaben setzen nacheinander auf, jeder mit leichtem
Schwung von unten. Am Ende zieht ein feiner Strich unter dem Schriftzug durch. */
body.ph .ph-script.anim-write{clip-path:none}
.ph-script .ph-w{display:inline-block;white-space:nowrap}
body.ph .ph-script .ph-c{
display:inline-block;opacity:0;
transform:translate3d(-.12em,.42em,0) rotate(-9deg) scale(.86);
filter:blur(3px);
animation:phInk .58s cubic-bezier(.2,.9,.28,1.06) both;
}
@keyframes phInk{
60% {opacity:1;filter:blur(0);transform:translate3d(0,-.05em,0) rotate(1.5deg) scale(1.03)}
100%{opacity:1;filter:blur(0);transform:none}
}
body.ph .ph-script.anim-write::after{
content:"";position:absolute;left:50%;bottom:-.12em;
width:min(62%,10em);height:.09em;border-radius:99px;
background:linear-gradient(90deg,transparent,var(--ph-cream) 12%,var(--ph-cream) 88%,transparent);
transform:translateX(-50%) scaleX(0);transform-origin:left center;
opacity:.75;
animation:phSwash .85s cubic-bezier(.3,.8,.3,1) var(--ph-pen,2.2s) both;
}
@keyframes phSwash{from{transform:translateX(-50%) scaleX(0)}to{transform:translateX(-50%) scaleX(1)}}
.ph-hero-inner .ph-script{position:relative}
.ph-script.anim-fade{opacity:0;transform:translateY(24px);animation:phFadeUp 1.4s cubic-bezier(.22,.61,.36,1) .3s forwards}
@keyframes phFadeUp{to{opacity:1;transform:none}}
.ph-hero-sub{
margin:1.4rem auto 0;max-width:44ch;color:rgba(255,253,233,.9);
font-size:clamp(.98rem,2vw,1.16rem);letter-spacing:.02em;
opacity:0;animation:phFadeUp 1s ease 1.5s forwards;
}
.ph-hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:2.2rem;opacity:0;animation:phFadeUp 1s ease 1.8s forwards}
.ph-btn{
display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ph-head);font-weight:600;font-size:.95rem;
letter-spacing:.02em;padding:.85rem 1.9rem;border-radius:4px;border:2px solid var(--ph-cream);
color:var(--ph-cream-lt);background:transparent;cursor:pointer;transition:background .3s,color .3s,transform .3s;
}
.ph-btn:hover{background:var(--ph-cream);color:var(--ph-dark);transform:translateY(-2px)}
.ph-btn-solid{background:var(--ph-cream);color:var(--ph-dark)}
.ph-btn-solid:hover{background:var(--ph-cream-lt);border-color:var(--ph-cream-lt)}
.ph-btn-dark{border-color:var(--ph-dark);color:var(--ph-dark)}
.ph-btn-dark:hover{background:var(--ph-dark);color:var(--ph-cream)}
/* Steuerung */
.ph-hero-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
background:rgba(0,0,0,.28);border:1px solid rgba(255,253,233,.35);color:var(--ph-cream-lt);
cursor:pointer;transition:background .25s,border-color .25s;
}
.ph-hero-nav:hover{background:rgba(0,0,0,.55);border-color:var(--ph-cream)}
.ph-hero-nav svg{width:20px;height:20px}
.ph-hero-nav.prev{left:22px}
.ph-hero-nav.next{right:22px}
.ph-hero-dots{position:absolute;left:0;right:0;bottom:34px;z-index:3;display:flex;justify-content:center;gap:.55rem}
.ph-hero-dots button{
width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
background:rgba(255,253,233,.42);transition:width .25s,background .25s,border-radius .25s;
}
.ph-hero-dots button.on{background:var(--ph-cream);width:26px;border-radius:5px}
.ph-scrolldown{
position:absolute;left:50%;transform:translateX(-50%);bottom:74px;z-index:3;
color:rgba(255,253,233,.7);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
font-family:var(--ph-head);display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.ph-scrolldown i{display:block;width:1px;height:34px;background:linear-gradient(var(--ph-cream),transparent);animation:phPulse 2s ease-in-out infinite}
@keyframes phPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:860px){
.ph-hero-nav{display:none}
.ph-scrolldown{display:none}
.ph-hero-inner{padding-bottom:5rem}
}
/* =========================================================
Sektionen & Überschriften
========================================================= */
.ph-sec{padding:clamp(3.6rem,7vw,5.6rem) 0;background:var(--ph-bg)}
.ph-sec-alt{background:var(--ph-bg-alt)}
.ph-title{text-align:center;padding-bottom:2.6rem}
.ph-title .eyebrow{
display:block;font-family:var(--ph-head);font-size:.82rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--ph-muted);margin:0 0 .55rem;
}
.ph-title .eyebrow::before,.ph-title .eyebrow::after{
content:"";display:inline-block;width:70px;height:1px;background:var(--ph-cream-dp);
vertical-align:middle;margin:0 12px;
}
body.ph .ph-title h2{
font-size:clamp(1.7rem,4.2vw,2.35rem);font-weight:700;text-transform:uppercase;
letter-spacing:.01em;margin:0;color:var(--ph-ink);
}
.ph-sec .ph-title h2{color:var(--ph-ink)}
.ph-lead{text-align:center;max-width:60ch;margin:-1.4rem auto 2.4rem;color:var(--ph-muted);font-size:.96rem}
/* =========================================================
Spezialitäten
========================================================= */
.ph-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ph-spec{
background:#fff;border:1px solid var(--ph-line);border-radius:8px;
padding:2.6rem 1.5rem 2.2rem;text-align:center;cursor:pointer;
transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
display:flex;flex-direction:column;align-items:center;gap:1.1rem;
}
.ph-sec-alt .ph-spec{background:#fff}
.ph-spec:hover{transform:translateY(-6px);box-shadow:var(--ph-shadow-lg);border-color:var(--ph-cream-dp)}
.ph-spec-ic{height:150px;display:grid;place-items:center}
.ph-spec-ic img{max-height:150px;max-width:190px;width:auto;object-fit:contain}
/* Das Fade-Symbol ist nahezu quadratisch und wirkt bei gleicher Höhe kleiner
als die breiteren Symbole — es bekommt deshalb etwas mehr Raum. */
.ph-spec-ic img[src*="fade"]{max-height:168px}
@media(max-width:900px){
.ph-spec-ic{height:130px}
.ph-spec-ic img{max-height:130px;max-width:165px}
.ph-spec-ic img[src*="fade"]{max-height:146px}
}
.ph-spec h4{font-size:1.16rem;font-weight:600;color:#57595A;margin:0}
.ph-spec .more{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-muted);transition:color .25s}
.ph-spec:hover .more{color:var(--ph-ink)}
@media(max-width:900px){.ph-spec-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ph-spec-grid{grid-template-columns:1fr}}
/* Modal für die Spezialitäten */
.ph-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,10,.72)}
.ph-modal.on{display:flex}
.ph-modal-box{
background:#fff;border-radius:10px;max-width:520px;width:100%;padding:2rem 2rem 1.6rem;
box-shadow:0 30px 70px rgba(0,0,0,.4);animation:phFadeUp .3s ease;
}
.ph-modal-box img{max-height:88px;width:auto;margin:0 auto 1.2rem}
.ph-modal-box h4{font-size:1.28rem;margin:0 0 .8rem;text-align:center}
.ph-modal-box p{color:var(--ph-body);font-size:.96rem;line-height:1.7;margin:0 0 1.6rem;text-align:center}
.ph-modal-box .ph-btn{width:100%;justify-content:center}
/* =========================================================
Bildbänder (früher mit Parallax)
========================================================= */
.ph-band{
position:relative;padding:clamp(3.4rem,8vw,5.2rem) 0;text-align:center;
background-size:cover;background-position:center;
/* Früher stand hier background-attachment:fixed. Das sieht hübsch aus,
zwingt den Browser aber, bei jedem einzelnen Scroll-Frame das komplette
Band neu zu rastern — der Hauptgrund für das Ruckeln beim Scrollen.
Der optische Unterschied ist gering, der Gewinn an Laufruhe groß. */
background-attachment:scroll;
}
.ph-band::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.ph-band > .wrap{position:relative;z-index:1}
body.ph .ph-band h3{
color:#fff;font-size:clamp(1.4rem,3.6vw,1.95rem);font-weight:700;margin:0;
letter-spacing:.01em;
}
.ph-band p{color:rgba(255,255,255,.88);margin:.7rem 0 0;font-size:1.02rem}
.ph-band .ph-btn{margin-top:1.6rem;border-color:#fff;color:#fff}
.ph-band .ph-btn:hover{background:var(--ph-cream);border-color:var(--ph-cream);color:var(--ph-dark)}
/* (Der frühere Sonderfall für iOS entfällt — jetzt überall gleich.) */
/* =========================================================
Preise
========================================================= */
.ph-price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.ph-price-grid.single{grid-template-columns:1fr;max-width:760px;margin:1.6rem auto 0}
.ph-price-grid + .ph-price-grid{margin-top:1.6rem}
.ph-card{
background:#fff;border:1px solid var(--ph-line);border-radius:10px;overflow:hidden;
box-shadow:var(--ph-shadow);display:flex;flex-direction:column;
}
.ph-card-head{
background:var(--ph-dark);color:#fff;padding:1.05rem 1.4rem;
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
body.ph .ph-card-head h3{color:#fff;font-size:1.32rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0}
.ph-card-head span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ph-cream)}
.ph-tbl{width:100%;border-collapse:collapse;font-size:1.02rem}
.ph-tbl thead th{
font-family:var(--ph-head);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--ph-muted);text-align:right;padding:.85rem 1rem;border-bottom:2px solid var(--ph-cream-dp);
background:#fbfaf5;white-space:nowrap;
}
.ph-tbl thead th:first-child{text-align:left;width:46%}
.ph-tbl tbody td{padding:.88rem 1.1rem;border-bottom:1px solid var(--ph-line);text-align:right;color:var(--ph-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-tbl tbody td:first-child{text-align:left;color:var(--ph-body);white-space:normal;line-height:1.45}
.ph-tbl tbody tr:nth-child(even){background:#fcfcfa}
.ph-tbl tbody tr:hover{background:#fbf7e6}
.ph-tbl tbody tr:last-child td{border-bottom:none}
.ph-tbl .dash{color:#c9c9c9}
.ph-tbl .single-price{color:var(--ph-ink);font-weight:600}
.ph-card-foot{padding:1rem 1.4rem;border-top:1px solid var(--ph-line);font-size:.88rem;color:var(--ph-muted);background:#fbfaf5}
.ph-price-note{text-align:center;color:var(--ph-muted);font-size:.95rem;margin-top:1.8rem}
.ph-price-cta{text-align:center;margin-top:2rem}
@media(max-width:900px){
.ph-price-grid{grid-template-columns:1fr}
/* Kurz/Mittel/Lang bleiben auf dem Handy klar beschriftet */
.ph-tbl.tri thead{display:none}
.ph-tbl.tri tbody tr{display:block;border-bottom:1px solid var(--ph-line);padding:.7rem 1rem}
.ph-tbl.tri tbody tr:last-child{border-bottom:none}
.ph-tbl.tri tbody td{display:flex;justify-content:space-between;align-items:baseline;border:none;padding:.22rem 0;text-align:right;white-space:normal}
.ph-tbl.tri tbody td:first-child{font-weight:600;color:var(--ph-ink);padding-bottom:.5rem}
.ph-tbl.tri tbody td[data-l]::before{
content:attr(data-l);font-family:var(--ph-head);font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ph-muted);margin-right:1rem;
}
.ph-tbl.tri tbody td.empty{display:none}
}
/* =========================================================
Team
========================================================= */
.ph-team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem;max-width:920px;margin:0 auto}
.ph-member{
background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--ph-shadow);
transition:transform .3s ease,box-shadow .3s ease;
}
.ph-member:hover{transform:translateY(-6px);box-shadow:var(--ph-shadow-lg)}
.ph-member-img{position:relative;aspect-ratio:2/3;overflow:hidden;background:#efefef}
.ph-member-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ph-member:hover .ph-member-img img{transform:scale(1.05)}
.ph-member-img .ph-initial{
width:100%;height:100%;display:grid;place-items:center;font-family:var(--ph-head);
font-size:4rem;font-weight:700;color:var(--ph-cream-dp);background:linear-gradient(160deg,#f4f4f4,#e9e9e9);
}
.ph-member-info{padding:1.4rem 1.2rem 1.6rem;text-align:center}
.ph-member-info h4{font-size:1.1rem;font-weight:700;margin:0 0 .3rem}
.ph-member-info .role{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ph-cream-dp);margin-bottom:.7rem}
.ph-member-info p{font-size:.9rem;line-height:1.65;color:var(--ph-body);margin:0;font-style:italic}
/* =========================================================
Feeds- & Galerie-Karussell (hell)
========================================================= */
.ph-car{position:relative;margin-top:.4rem}
.ph-car-vp{overflow:hidden;border-radius:10px}
.ph-car-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}
.ph-car-slide{
position:relative;flex:0 0 calc((100% - 32px)/3);aspect-ratio:4/5;border-radius:10px;
overflow:hidden;background:#eee;box-shadow:var(--ph-shadow);
}
.ph-car-slide img,.ph-car-slide video{width:100%;height:100%;object-fit:cover;display:block}
.ph-car-cap{
position:absolute;left:0;right:0;bottom:0;padding:1.7rem .9rem .8rem;font-size:.84rem;color:#fff;
background:linear-gradient(transparent,rgba(0,0,0,.75));
}
.ph-car-badge{position:absolute;top:.7rem;right:.7rem;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}
.ph-car-badge svg{width:15px;height:15px}
.ph-car-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:50%;
display:grid;place-items:center;background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink);
cursor:pointer;box-shadow:var(--ph-shadow);transition:background .25s,color .25s;
}
.ph-car-nav:hover{background:var(--ph-dark);color:var(--ph-cream)}
.ph-car-nav svg{width:18px;height:18px}
.ph-car-nav.prev{left:-18px}
.ph-car-nav.next{right:-18px}
.ph-car-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.3rem}
.ph-car-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#d8d8d8;cursor:pointer;transition:width .2s,background .2s,border-radius .2s}
.ph-car-dots button.on{background:var(--ph-dark);width:24px;border-radius:4px}
@media(max-width:900px){.ph-car-slide{flex-basis:calc((100% - 16px)/2)}.ph-car-nav.prev{left:6px}.ph-car-nav.next{right:6px}}
@media(max-width:560px){.ph-car-slide{flex-basis:100%}}
.ph-empty{text-align:center;color:var(--ph-muted);font-size:.92rem;padding:2rem 0}
/* Galerie-Karussell aus styles.css auf helles Thema anpassen */
body.ph #galerie .car-slide{border-color:var(--ph-line);background:#eee;box-shadow:var(--ph-shadow)}
body.ph #galerie .car-cap{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
body.ph #galerie .car-dots button{background:#d8d8d8}
body.ph #galerie .car-dots button.on{background:var(--ph-dark)}
body.ph #galerie .car-nav{background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink)}
body.ph #galerie .car-nav:hover{background:var(--ph-dark);color:var(--ph-cream)}
/* =========================================================
Buchungsbereich — dunkles Band, damit das bestehende
Buchungs-Widget unverändert weiterläuft
========================================================= */
.ph-book{
background:var(--ph-bg-alt);padding:clamp(3.4rem,7vw,5.4rem) 0 clamp(3.4rem,7vw,5rem);position:relative;
/* Das Buchungs-Widget bezieht seine Farben über Variablen. Hier werden sie
auf die helle Farbwelt der Website umgestellt — Anthrazit als Schrift,
Champagner als Fläche, statt umgekehrt. */
--bg:#f7f7f7;
--bg-warm:#ffffff;
--panel:#ffffff;
--panel-2:#fbfaf5;
--border:#e6e6e6;
--border-soft:#efefef;
--text:#151515;
--text-dim:#6b6b6b;
--text-faint:var(--t-3);
--gold:#151515;
--gold-deep:#c8b877;
--gold-2:#e6dcae;
--shadow:0 14px 40px rgba(0,0,0,.10);
}
.ph-book::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(900px 500px at 78% -10%,rgba(247,240,208,.10),transparent 62%);
}
.ph-book > *{position:relative;z-index:1}
.ph-book .ph-title .eyebrow{color:rgba(255,253,233,.62)}
.ph-book .ph-title .eyebrow::before,.ph-book .ph-title .eyebrow::after{background:var(--ph-cream-dp)}
.ph-book .ph-title h2{color:#fff}
.ph-book .ph-lead{color:rgba(255,253,233,.62)}
body.ph .ph-book .section{padding:0}
/* =========================================================
Kontakt
========================================================= */
.ph-contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:1.6rem;align-items:start}
.ph-info-card,.ph-form-card{background:#fff;border:1px solid var(--ph-line);border-radius:10px;box-shadow:var(--ph-shadow);padding:1.9rem 1.8rem}
.ph-info-card h3,.ph-form-card h3{font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 1.3rem}
.ph-info-row{display:flex;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--ph-line);align-items:flex-start}
.ph-info-row:last-of-type{border-bottom:none}
.ph-info-ic{
flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:var(--ph-cream);color:var(--ph-dark);
}
.ph-info-ic svg{width:18px;height:18px}
.ph-info-row .t{font-family:var(--ph-head);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ph-muted);display:block;margin-bottom:.15rem}
.ph-info-row .v{color:var(--ph-ink);font-size:.97rem;line-height:1.55}
.ph-info-row .v a{color:var(--ph-ink);border-bottom:1px solid var(--ph-cream-dp)}
.ph-info-row .v a:hover{color:#000;border-bottom-color:var(--ph-dark)}
.ph-hours{list-style:none;padding:0;margin:1.2rem 0 0;border-top:1px solid var(--ph-line)}
.ph-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--ph-line);font-size:.93rem;color:var(--ph-body)}
.ph-hours li:last-child{border-bottom:none}
.ph-hours li b{color:var(--ph-ink);font-weight:600}
.ph-hours li.closed span:last-child{color:var(--ph-muted)}
.ph-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ph-fld{display:flex;flex-direction:column;gap:.4rem}
.ph-fld.full{grid-column:1/-1}
.ph-fld label{font-family:var(--ph-head);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-muted)}
.ph-fld input,.ph-fld textarea{
font-family:var(--font-body);font-size:.96rem;color:var(--ph-ink);
padding:.8rem .95rem;border:1px solid var(--ph-line);border-radius:6px;background:#fbfbfb;
transition:border-color .2s,background .2s,box-shadow .2s;width:100%;
}
.ph-fld textarea{min-height:140px;resize:vertical;line-height:1.6}
.ph-fld input:focus,.ph-fld textarea:focus{
outline:none;border-color:var(--ph-cream-dp);background:#fff;
box-shadow:0 0 0 3px rgba(247,240,208,.55);
}
.ph-fld input::placeholder,.ph-fld textarea::placeholder{color:#b6b6b6}
.ph-form-actions{grid-column:1/-1;display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.3rem}
.ph-form-msg{font-size:.9rem;min-height:1.2em}
.ph-form-msg.ok{color:#2e7d4f}
.ph-form-msg.err{color:#c0392b}
.ph-map{margin-top:1.6rem;border-radius:10px;overflow:hidden;box-shadow:var(--ph-shadow);height:320px;background:#eee}
.ph-map iframe{width:100%;height:100%;border:0;display:block}
body.ph .embed-ph{
height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
text-align:center;padding:1.6rem;background:#f2f2f2;color:var(--ph-body);
}
body.ph .embed-ph p{max-width:44ch;font-size:.9rem;margin:0}
body.ph .embed-ph small{color:var(--ph-muted);font-size:.78rem}
body.ph .embed-ph .btn-gold{background:var(--ph-dark);color:var(--ph-cream);box-shadow:none}
@media(max-width:900px){.ph-contact-grid{grid-template-columns:1fr}.ph-form{grid-template-columns:1fr}}
/* =========================================================
Footer (wie bisher: schwarz)
========================================================= */
body.ph footer{background:#000;color:#fff;border-top:none;margin-top:0;padding:0 0 1.8rem}
body.ph .foot-top{background:var(--ph-dark);border-bottom:1px solid #222;padding:3.4rem 0 1.8rem}
body.ph .foot-grid{border-bottom:none;padding-bottom:1rem;grid-template-columns:1.15fr 1fr 1.05fr}
body.ph .foot-col h4,body.ph .foot-brand h4{
font-family:var(--ph-head);font-size:1rem;font-weight:600;color:#fff;
text-transform:none;letter-spacing:0;margin-bottom:1rem;
}
body.ph .foot-col p,body.ph .foot-brand p{color:#e6e6e6;font-size:.9rem;line-height:1.75;margin-bottom:.4rem}
body.ph .foot-col a,body.ph .foot-brand a{color:#e6e6e6;font-size:.9rem;transition:color .2s}
body.ph .foot-col a:hover,body.ph .foot-brand a:hover{color:var(--ph-cream)}
body.ph .foot-brand .logo-img{height:46px;width:auto;margin-bottom:1rem}
body.ph .foot-social{display:flex;gap:.5rem;margin-top:1.1rem}
body.ph .foot-social a{
width:38px;height:38px;border-radius:4px;background:#292929;display:grid;place-items:center;
transition:background .25s;
}
body.ph .foot-social a:hover{background:var(--ph-cream)}
body.ph .foot-social img{width:19px;height:19px}
body.ph .foot-social a:hover img{filter:brightness(0)}
body.ph .foot-bottom{
display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
padding:1.6rem 0 0;color:var(--t-3);font-size:.85rem;border-top:none;
}
body.ph .foot-bottom a{color:var(--t-3);margin-left:1.1rem}
body.ph .foot-bottom a:hover{color:var(--ph-cream)}
body.ph .foot-credit{font-size:.78rem;color:#7d7d7d}
@media(max-width:860px){
body.ph .foot-grid{grid-template-columns:1fr;gap:2rem}
body.ph .foot-bottom{flex-direction:column;text-align:center}
body.ph .foot-bottom a{margin:0 .55rem}
}
/* ---------- Reveal-Animation (nutzt main.js) ---------- */
body.ph .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body.ph .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
body.ph .reveal{opacity:1;transform:none}
.ph-script.anim-write,.ph-script.anim-fade,.ph-hero-sub,.ph-hero-cta{animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important}
.ph-hero.kb .ph-hero-slide.on{animation:none}
}
/* =========================================================
Nachträge: Buchungsband, Footer-Icons, Anker-Abstände
========================================================= */
/* Ankersprünge dürfen nicht unter der fixierten Kopfzeile landen */
body.ph section[id]{scroll-margin-top:92px}
body.ph #hero{scroll-margin-top:0}
/* Innerhalb des dunklen Buchungsbands gilt wieder das dunkle Thema */
.ph-book{color:var(--text)}
body.ph .ph-book h1,body.ph .ph-book h2,body.ph .ph-book h3,body.ph .ph-book h4{color:var(--text);font-family:var(--font-display)}
body.ph .ph-book .ph-title h2{color:#fff;font-family:var(--ph-head);text-transform:uppercase;font-weight:700}
body.ph .ph-book .bk-card,body.ph .ph-book .summary{color:var(--text)}
body.ph .ph-book label{color:var(--text-dim)}
body.ph .ph-book input,body.ph .ph-book select,body.ph .ph-book textarea{color:var(--text);font-family:var(--font-body)}
body.ph .ph-book a{color:inherit}
body.ph .ph-book .faq{margin-top:0}
body.ph .ph-book .faq summary,body.ph .ph-book .faq .ans{color:var(--text-dim)}
body.ph .ph-book .btn-gold{
background:linear-gradient(135deg,#F7F0D0 0%,#E6DCAE 100%);
color:#151515;border:none;border-radius:999px;box-shadow:0 10px 26px rgba(247,240,208,.18);
}
body.ph .ph-book .btn-gold:hover{background:linear-gradient(135deg,#FFFDE9 0%,#F7F0D0 100%)}
/* Footer-Icons */
body.ph .foot-social svg{width:19px;height:19px;display:block}
body.ph .foot-social a:hover svg path{fill:#151515}
body.ph .foot-col a{display:inline-block;line-height:1.9}
body.ph .foot-brand p{max-width:32ch;margin:0 auto}
body.ph .foot-brand{text-align:center}
body.ph .foot-brand .logo-img{margin:0 auto 1rem}
body.ph .foot-social{justify-content:center}
@media(max-width:860px){body.ph .foot-col{text-align:center}}
/* Logo auf kleinen Bildschirmen mitskalieren */
@media(max-width:900px){
body.ph .brand .logo-img{height:48px}
body.ph #header .nav{height:68px}
}
@media(max-width:620px){
body.ph .brand .logo-img{height:42px}
body.ph #header .nav{height:62px}
}
/* Haarlängen-Auswahl im Buchungsbereich */
.ph-book .hair-field{margin-top:.2rem}
.ph-book .hair-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ph-book .hair-opts button{
display:flex;flex-direction:column;align-items:center;gap:.2rem;
padding:.75rem .5rem;border-radius:12px;cursor:pointer;font:inherit;
background:rgba(247,240,208,.04);border:1px solid rgba(247,240,208,.16);
color:var(--text);transition:border-color .18s,background .18s,transform .18s;
}
.ph-book .hair-opts button.on{background:rgba(247,240,208,.12);border-color:#F7F0D0}
.ph-book .hair-opts .hl-name{font-weight:700;font-size:.98rem}
.ph-book .hair-opts .hl-meta{font-size:.8rem;color:var(--text-dim)}
.ph-book .hair-opts button.on .hl-meta{color:#F7F0D0}
.ph-book .hair-hint{margin:.6rem 0 0;font-size:.85rem;color:var(--text-dim);line-height:1.5}
@media(max-width:560px){.ph-book .hair-opts{grid-template-columns:1fr}}
/* Preisliste aus der Datenbank */
.ph-price-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;align-items:start}
.ph-price-list .ph-card.wide{grid-column:1/-1}
.ph-price-list .ph-card-head span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-cream)}
.ph-tbl th.ph-dur,.ph-tbl td.ph-dur{width:22%;text-align:right;white-space:nowrap;color:var(--ph-muted)}
.ph-tbl th.ph-pr,.ph-tbl td.ph-pr{width:24%;text-align:right;white-space:nowrap;font-weight:600}
.ph-tbl td.ph-pr{color:var(--ph-ink)}
.ph-empty{text-align:center;color:var(--ph-muted);padding:2rem 0;grid-column:1/-1}
@media(max-width:900px){
.ph-price-list{grid-template-columns:1fr}
.ph-tbl th.ph-dur,.ph-tbl td.ph-dur{width:auto}
.ph-tbl tbody td{padding:.75rem .8rem}
.ph-tbl td:first-child{line-height:1.4}
}
/* =========================================================
Leistungsauswahl im Buchungsbereich
Kategorien + Karten statt einer Liste mit 52 Einträgen
========================================================= */
.ph-book .svc-pick > label{
display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--text-dim);margin-bottom:.5rem;
}
.ph-book .svc-pick-search{
width:100%;padding:.8rem 1rem;border-radius:12px;font:inherit;font-size:1rem;
background:rgba(247,240,208,.04);border:1px solid rgba(247,240,208,.16);color:var(--text);
}
.ph-book .svc-pick-search:focus{outline:none;border-color:#F7F0D0;background:rgba(247,240,208,.07)}
.ph-book .svc-pick-search::placeholder{color:var(--text-faint,var(--t-3))}
.ph-book .svc-pick-list{
display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.6rem;
max-height:430px;overflow-y:auto;padding-right:.3rem;
}
.ph-book .svc-pick-list::-webkit-scrollbar{width:8px}
.ph-book .svc-pick-list::-webkit-scrollbar-thumb{background:rgba(247,240,208,.18);border-radius:8px}
.ph-book .svc-opt.on{border-color:#F7F0D0;background:rgba(247,240,208,.14)}
.ph-book .svc-pick-none{color:var(--text-dim);font-size:.9rem;padding:1.4rem 0;text-align:center}
/* Nach der Wahl: Stöberbereich aus, Auswahl an */
.ph-book .svc-pick-chosen{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding:.9rem 1.1rem;border-radius:12px;
background:rgba(247,240,208,.1);border:1px solid #F7F0D0;
}
.ph-book .svc-pick-chosen .c-txt{font-size:.96rem;line-height:1.45}
.ph-book .svc-pick-chosen .c-txt b{color:#F7F0D0}
.ph-book .svc-pick-chosen .c-clear{
font:inherit;font-size:.85rem;font-weight:600;padding:.45rem 1rem;border-radius:999px;cursor:pointer;
background:transparent;border:1px solid rgba(247,240,208,.4);color:var(--text);flex:none;
}
@media(max-width:560px){
.ph-book .svc-pick-list{grid-template-columns:1fr;max-height:360px}
}
.ph-price-intro{
text-align:center;max-width:64ch;margin:-1rem auto 2rem;
color:var(--ph-body);font-size:1rem;line-height:1.7;
}
/* =========================================================
Preistabelle mit den Spalten Kurz · Mittel · Lang
Die Struktur der bisherigen Website bleibt erhalten —
auch am Handy, weil sie dort am schnellsten zu erfassen ist.
========================================================= */
.ph-tbl.len{table-layout:fixed}
.ph-tbl.len th:first-child,.ph-tbl.len td.ph-n{width:46%;text-align:left}
.ph-tbl.len th:not(:first-child),.ph-tbl.len td:not(.ph-n){width:18%;text-align:right;white-space:nowrap}
.ph-tbl.len td.ph-n .n{display:block;color:var(--ph-ink);line-height:1.35}
.ph-tbl.len td.ph-n .d{display:block;margin-top:.2rem;font-size:.8rem;color:var(--ph-muted)}
.ph-tbl.len td.ph-one{text-align:right;font-weight:600}
.ph-tbl.len tbody td{font-variant-numeric:tabular-nums;vertical-align:middle}
@media(max-width:760px){
.ph-price-list{gap:1.1rem}
.ph-tbl.len{font-size:.9rem}
.ph-tbl.len thead th{font-size:.66rem;padding:.55rem .4rem;letter-spacing:.06em}
.ph-tbl.len thead th:first-child{padding-left:.8rem}
.ph-tbl.len tbody td{padding:.7rem .4rem}
.ph-tbl.len td.ph-n{width:44%;padding-left:.8rem}
.ph-tbl.len th:not(:first-child),.ph-tbl.len td:not(.ph-n){width:18.6%}
.ph-tbl.len td.ph-n .n{font-size:.88rem}
.ph-tbl.len td.ph-n .d{font-size:.72rem}
.ph-tbl.len tbody td:last-child{padding-right:.8rem}
.ph-card-head{padding:.85rem 1rem}
body.ph .ph-card-head h3{font-size:1.1rem}
}
@media(max-width:400px){
.ph-tbl.len{font-size:.84rem}
.ph-tbl.len td.ph-n{width:42%}
.ph-tbl.len td.ph-n .n{font-size:.83rem}
}
/* Gewählte Leistung — ruhige Bestätigungskarte statt Liste */
.ph-book #svcPickBrowse[hidden]{display:none}
.ph-book .svc-pick-chosen{
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
padding:1.1rem 1.2rem;border-radius:14px;
background:linear-gradient(135deg,rgba(247,240,208,.14),rgba(247,240,208,.06));
border:1px solid #F7F0D0;
}
.ph-book .svc-pick-chosen .c-txt{font-size:1rem;line-height:1.5;min-width:0}
.ph-book .svc-pick-chosen .c-txt b{display:block;color:#F7F0D0;font-size:1.04rem;margin-bottom:.2rem}
.ph-book .svc-pick-chosen .c-meta{display:block;font-size:.9rem;color:var(--text-dim)}
.ph-book .svc-pick-chosen .c-clear{
font:inherit;font-size:.86rem;font-weight:600;padding:.5rem 1.2rem;border-radius:999px;cursor:pointer;
background:transparent;border:1px solid rgba(247,240,208,.45);color:var(--text);flex:none;
transition:background .18s,color .18s;
}
.ph-book .svc-pick-chosen .c-clear:hover{background:#F7F0D0;color:#151515;border-color:#F7F0D0}
@media(max-width:560px){
.ph-book .svc-pick-chosen{align-items:flex-start;flex-direction:column;gap:.8rem}
.ph-book .svc-pick-chosen .c-clear{align-self:stretch;text-align:center}
}
/* Sichtbarer Hinweis, dass die Leistungsliste scrollbar ist */
.ph-book .svc-pick-list{position:relative;scrollbar-width:thin;scrollbar-color:rgba(247,240,208,.3) transparent}
.ph-book .svc-pick-wrap{position:relative}
.ph-book .svc-pick-wrap::after{
content:"";position:absolute;left:0;right:.4rem;bottom:0;height:56px;pointer-events:none;
background:linear-gradient(transparent,#151515 88%);border-radius:0 0 12px 12px;
opacity:1;transition:opacity .2s;
}
.ph-book .svc-pick-wrap.at-end::after{opacity:0}
.ph-book .svc-pick-hint{
display:flex;align-items:center;justify-content:center;gap:.4rem;
margin:.5rem 0 0;font-size:.82rem;color:var(--text-dim);
}
.ph-book .svc-pick-hint svg{width:14px;height:14px;animation:phNudge 1.6s ease-in-out infinite}
@keyframes phNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.ph-book .svc-pick-wrap.at-end + .svc-pick-hint{visibility:hidden}
/* Hover nur für echte Zeigegeräte. Am Touchscreen bleibt der Hover-Zustand
nach dem Antippen kleben und sieht aus wie eine zweite Auswahl. */
@media (hover: hover) and (pointer: fine){
.ph-book .svc-opt:hover{border-color:#E6DCAE;background:rgba(247,240,208,.07);transform:translateY(-1px)}
.ph-book .hair-opts button:hover{border-color:#E6DCAE;transform:translateY(-1px)}
.ph-book .svc-pick-chosen .c-clear:hover{background:#F7F0D0;color:#151515;border-color:#F7F0D0}
}
/* Die gewählte Kategorie trägt zusätzlich einen Haken — damit sie auch
dann eindeutig ist, wenn Farben schlecht zu unterscheiden sind. */
/* =========================================================
Leistungskarten — Name links, Preis rechts, Dauer darunter.
Der Preis steht immer an derselben Stelle, dadurch lässt sich
die Liste senkrecht vergleichen statt zeilenweise zu lesen.
========================================================= */
.ph-book .svc-opt{
display:block;width:100%;text-align:left;cursor:pointer;font:inherit;
padding:.95rem 1.1rem;border-radius:12px;
background:rgba(247,240,208,.03);border:1px solid rgba(247,240,208,.13);color:var(--text);
transition:border-color .16s,background .16s;
}
.ph-book .svc-opt .o-top{
display:flex;align-items:baseline;justify-content:space-between;gap:.9rem;
}
.ph-book .svc-opt .o-name{font-size:.98rem;font-weight:600;line-height:1.35;min-width:0}
.ph-book .svc-opt .o-pr{
font-size:1rem;font-weight:700;color:#F7F0D0;white-space:nowrap;flex:none;
font-variant-numeric:tabular-nums;
}
.ph-book .svc-opt .o-bot{
display:flex;align-items:baseline;gap:.6rem;margin-top:.35rem;font-size:.86rem;
}
.ph-book .svc-opt .o-dur{color:var(--text-dim)}
.ph-book .svc-opt .o-hint{
font-size:.72rem;letter-spacing:.05em;color:var(--text-faint,var(--t-3));
border:1px solid rgba(247,240,208,.16);border-radius:999px;padding:.08rem .5rem;
}
.ph-book .svc-opt.on{border-color:#F7F0D0;background:rgba(247,240,208,.12)}
/* =========================================================
Gewählte Leistung — Bestätigung mit Haken, Angaben darunter,
„Ändern“ klar abgesetzt statt mittig in der Karte.
========================================================= */
.ph-book .svc-pick-chosen{
display:flex;align-items:flex-start;gap:.9rem;flex-wrap:nowrap;
padding:1.05rem 1.15rem;border-radius:14px;
background:linear-gradient(135deg,rgba(247,240,208,.13),rgba(247,240,208,.05));
border:1px solid #F7F0D0;
}
.ph-book .svc-pick-chosen::before{
content:"\2713";flex:none;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;font-size:.86rem;font-weight:700;
background:#F7F0D0;color:#151515;margin-top:.1rem;
}
.ph-book .svc-pick-chosen .c-txt{flex:1 1 auto;min-width:0}
.ph-book .svc-pick-chosen .c-name{
display:block;font-size:1.02rem;font-weight:700;color:#F7F0D0;line-height:1.35;
}
.ph-book .svc-pick-chosen .c-meta{
display:flex;gap:.5rem;align-items:baseline;margin-top:.3rem;font-size:.92rem;
}
.ph-book .svc-pick-chosen .c-dur{color:var(--text-dim)}
.ph-book .svc-pick-chosen .c-dur::after{content:"·";margin-left:.5rem;color:var(--text-faint,var(--t-3))}
.ph-book .svc-pick-chosen .c-pr{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.ph-book .svc-pick-chosen .c-clear{
flex:none;align-self:center;
font:inherit;font-size:.85rem;font-weight:600;padding:.45rem 1rem;border-radius:999px;cursor:pointer;
background:transparent;border:1px solid rgba(247,240,208,.4);color:var(--text);
transition:background .18s,color .18s;
}
@media(max-width:560px){
.ph-book .svc-pick-chosen{flex-wrap:wrap}
.ph-book .svc-pick-chosen .c-txt{flex:1 1 100%;order:2;margin-top:-1.9rem;padding-left:2.2rem}
.ph-book .svc-pick-chosen::before{order:1}
.ph-book .svc-pick-chosen .c-clear{order:3;flex:1 1 100%;margin-top:.85rem;text-align:center}
}
/* =========================================================
Buchungsbereich hell — passend zum Rest der Website
========================================================= */
.ph-book::before{display:none}
.ph-book{color:var(--ph-body)}
body.ph .ph-book h1,body.ph .ph-book h2,body.ph .ph-book h3,body.ph .ph-book h4{color:var(--ph-ink)}
body.ph .ph-book .ph-title .eyebrow{color:var(--ph-muted)}
body.ph .ph-book .ph-title .eyebrow::before,
body.ph .ph-book .ph-title .eyebrow::after{background:var(--ph-cream-dp)}
body.ph .ph-book .ph-title h2{color:var(--ph-ink)}
body.ph .ph-book .ph-lead{color:var(--ph-muted)}
body.ph .ph-book label{color:var(--ph-muted)}
/* Karten und Flächen */
body.ph .ph-book .bk-card,body.ph .ph-book .summary,body.ph .ph-book .cal{
background:#fff;border:1px solid var(--ph-line);box-shadow:var(--ph-shadow);
}
body.ph .ph-book .summary .cap{background:var(--ph-dark);color:var(--ph-cream)}
body.ph .ph-book .faq details{background:#fff;border:1px solid var(--ph-line)}
body.ph .ph-book .faq summary,body.ph .ph-book .faq .ans{color:var(--ph-body)}
/* Hauptknopf: dunkel mit Champagner-Schrift, wie auf der Website */
body.ph .ph-book .btn-gold{
background:var(--ph-dark);color:var(--ph-cream);border:none;
box-shadow:0 10px 26px rgba(21,21,21,.18);
}
body.ph .ph-book .btn-gold:hover{background:#000}
body.ph .ph-book .btn-gold:disabled{background:#c9c9c9;color:#fff;box-shadow:none}
/* Leistungsauswahl */
.ph-book .svc-pick-search{background:#fff;border-color:var(--ph-line);color:var(--ph-ink)}
.ph-book .svc-pick-search:focus{border-color:var(--ph-cream-dp);box-shadow:0 0 0 3px rgba(247,240,208,.6)}
.ph-book .svc-opt{background:#fff;border-color:var(--ph-line);color:var(--ph-ink)}
.ph-book .svc-opt .o-pr{color:var(--ph-ink)}
.ph-book .svc-opt .o-dur{color:var(--ph-muted)}
.ph-book .svc-opt .o-hint{color:var(--ph-muted);border-color:var(--ph-cream-dp);background:#fbf8ea}
.ph-book .svc-opt.on{background:var(--ph-cream);border-color:var(--ph-dark)}
.ph-book .svc-pick-wrap::after{background:linear-gradient(transparent,var(--ph-bg-alt) 88%)}
.ph-book .svc-pick-hint{color:var(--ph-muted)}
.ph-book .svc-pick-none{color:var(--ph-muted)}
/* Bestätigung der Wahl */
.ph-book .svc-pick-chosen{
background:var(--ph-cream);border-color:var(--ph-dark);
}
.ph-book .svc-pick-chosen::before{background:var(--ph-dark);color:var(--ph-cream)}
.ph-book .svc-pick-chosen .c-name{color:var(--ph-ink)}
.ph-book .svc-pick-chosen .c-dur{color:var(--t-2)}
.ph-book .svc-pick-chosen .c-pr{color:var(--ph-ink)}
.ph-book .svc-pick-chosen .c-clear{border-color:var(--ph-dark);color:var(--ph-ink);background:#fff}
/* Haarlänge */
.ph-book .hair-opts button{background:#fff;border-color:var(--ph-line);color:var(--ph-ink)}
.ph-book .hair-opts button.on{background:var(--ph-cream);border-color:var(--ph-dark)}
.ph-book .hair-opts .hl-meta{color:var(--ph-muted)}
.ph-book .hair-opts button.on .hl-meta{color:var(--ph-ink)}
.ph-book .hair-hint{color:var(--ph-muted)}
/* Schrittanzeige — vorher zu klein und zu leise */
body.ph .ph-book .stepper .s{font-size:.92rem;color:var(--ph-muted)}
body.ph .ph-book .stepper .s.active{color:var(--ph-ink);font-weight:700}
body.ph .ph-book .stepper .b{
background:#fff;border:1px solid var(--ph-line);color:var(--ph-muted);
width:26px;height:26px;font-size:.82rem;
}
body.ph .ph-book .stepper .s.active .b{background:var(--ph-dark);border-color:var(--ph-dark);color:var(--ph-cream)}
body.ph .ph-book .stepper .ln{background:var(--ph-line)}
body.ph .ph-book .sh .req{font-size:.82rem;letter-spacing:.1em;color:var(--ph-muted)}
body.ph .ph-book .sh h2{font-size:1.25rem}
body.ph .ph-book .sh .n{background:var(--ph-cream);color:var(--ph-ink);border:1px solid var(--ph-cream-dp)}
/* Kalender und Zeiten */
body.ph .ph-book .cal-day{background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink)}
body.ph .ph-book .cal-day:disabled,body.ph .ph-book .cal-day.empty{background:#f4f4f4;color:var(--t-3)}
body.ph .ph-book .cal-day.sel{background:var(--ph-dark);border-color:var(--ph-dark);color:var(--ph-cream)}
body.ph .ph-book .cal-day.today{border-color:var(--ph-dark)}
body.ph .ph-book .cal-day.today .dd{color:var(--ph-ink);font-weight:700}
body.ph .ph-book .cal-day .td{background:var(--ph-dark)}
body.ph .ph-book .cal-dow span{color:var(--ph-muted)}
body.ph .ph-book .time-btn{background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink)}
body.ph .ph-book .time-btn.sel{background:var(--ph-dark);border-color:var(--ph-dark);color:var(--ph-cream)}
body.ph .ph-book .field input,body.ph .ph-book .field select,body.ph .ph-book .field textarea{
background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink);
}
body.ph .ph-book .staffcard{background:#fff;border:1px solid var(--ph-line)}
body.ph .ph-book .staffcard.sel{border-color:var(--ph-dark);background:var(--ph-cream)}
body.ph .ph-book .paycond{background:#fbf8ea;border-color:var(--ph-cream-dp)}
body.ph .ph-book .note{color:var(--ph-muted)}
/* Deaktivierte Zustände: klar als inaktiv erkennbar, aber weiterhin lesbar.
Weiß auf Hellgrau ergab nur Kontrast 1,66 — die Beschriftung verschwand. */
body.ph .ph-book .btn-gold:disabled{background:#e8e6dd;color:var(--t-2);box-shadow:none}
body.ph .ph-book .cal-day:disabled,body.ph .ph-book .cal-day.empty{background:#f2f2f2;color:var(--t-3)}
/* =========================================================
Leistungsauswahl in zwei Ebenen
Ebene 1: häufig Gebuchtes, darunter die Kategorien
Ebene 2: die Leistungen einer Kategorie
========================================================= */
.ph-book .sp-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0 .2rem;min-height:0}
.ph-book .sp-head:empty{margin:0}
.ph-book .sp-h{
display:block;font-family:var(--ph-head);font-size:.78rem;font-weight:600;
letter-spacing:.14em;text-transform:uppercase;color:var(--ph-muted);
}
.ph-book .sp-h b{color:var(--ph-ink)}
.ph-book .sp-sec + .sp-sec{margin-top:1.6rem}
.ph-book .sp-sec .sp-h{margin-bottom:.7rem}
.ph-book .sp-back{
display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.86rem;font-weight:600;
padding:.45rem .9rem .45rem .7rem;border-radius:999px;cursor:pointer;
background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink);
}
.ph-book .sp-back svg{width:15px;height:15px}
/* Kategorie-Kacheln */
.ph-book .sp-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.ph-book .sp-cat{
position:relative;display:block;text-align:left;cursor:pointer;font:inherit;
padding:.95rem 2.4rem .95rem 1.1rem;border-radius:12px;
background:#fff;border:1px solid var(--ph-line);color:var(--ph-ink);
transition:border-color .16s,box-shadow .16s;
}
.ph-book .sp-cat::before{
content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:3px;border-radius:0 3px 3px 0;
background:var(--ph-cream-dp);
}
.ph-book .sp-cat .k-name{display:block;font-size:.98rem;font-weight:600;line-height:1.35}
.ph-book .sp-cat .k-n{display:block;margin-top:.2rem;font-size:.84rem;color:var(--ph-muted)}
.ph-book .sp-cat .k-arrow{
position:absolute;right:1rem;top:50%;transform:translateY(-50%);
width:17px;height:17px;color:var(--ph-muted);
}
.ph-book .svc-pick-list{display:grid;grid-template-columns:1fr;gap:.55rem;max-height:none;overflow:visible}
@media (hover: hover) and (pointer: fine){
.ph-book .sp-cat:hover{border-color:var(--ph-dark);box-shadow:var(--ph-shadow)}
.ph-book .sp-cat:hover::before{background:var(--ph-dark)}
}
/* =========================================================
Kategorien am Handy: zwei Spalten statt einer langen Kette.
Der Text bleibt vollständig, nur Polster und Pfeil weichen —
der Pfeil trägt keine Information, die Kachel ist ohnehin klickbar.
========================================================= */
@media(max-width:620px){
.ph-book .sp-cats{grid-template-columns:repeat(2,1fr);gap:.5rem}
.ph-book .sp-cat{
padding:.7rem .8rem .7rem .95rem;border-radius:11px;
display:flex;flex-direction:column;justify-content:center;min-height:74px;
}
.ph-book .sp-cat::before{top:.6rem;bottom:.6rem;width:2.5px}
.ph-book .sp-cat .k-name{
font-size:.88rem;line-height:1.28;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ph-book .sp-cat .k-n{margin-top:.15rem;font-size:.76rem}
.ph-book .sp-cat .k-arrow{display:none}
}
/* Sehr schmale Geräte: lieber wieder einspaltig als abgeschnittene Wörter */
@media(max-width:340px){
.ph-book .sp-cats{grid-template-columns:1fr}
.ph-book .sp-cat .k-arrow{display:block}
}
/* Weiches Rollen, aber nicht gegen den Wunsch nach reduzierter Bewegung.
Hier stand vorher `auto` im no-preference-Zweig — also genau verkehrt herum:
Wer keine reduzierte Bewegung eingestellt hat, bekam das harte Springen. */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* =========================================================
Kopfleiste der geöffneten Kategorie
Bleibt beim Scrollen stehen, damit jederzeit klar ist,
in welcher Kategorie man sich befindet.
========================================================= */
.ph-book .sp-head-cat{
display:flex;align-items:center;gap:.85rem;flex-wrap:nowrap;
position:sticky;top:76px;z-index:6;
margin:1rem 0 .9rem;padding:.7rem .9rem;border-radius:12px;
background:var(--ph-dark);border:1px solid var(--ph-dark);
box-shadow:0 6px 20px rgba(0,0,0,.16);
}
.ph-book .sp-head-cat .sp-back{
flex:none;width:34px;height:34px;padding:0;border-radius:50%;
display:grid;place-items:center;
background:rgba(247,240,208,.14);border:1px solid rgba(247,240,208,.35);color:var(--ph-cream);
}
.ph-book .sp-head-cat .sp-back svg{width:17px;height:17px}
.ph-book .sp-crumb{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.ph-book .sp-crumb-top{
font-family:var(--ph-head);font-size:.66rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:rgba(247,240,208,.62);
}
.ph-book .sp-crumb-name{
font-family:var(--ph-head);font-size:1.05rem;font-weight:700;color:var(--ph-cream);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ph-book .sp-count{
flex:none;min-width:30px;height:30px;padding:0 .55rem;border-radius:999px;
display:grid;place-items:center;font-size:.86rem;font-weight:700;
background:var(--ph-cream);color:var(--ph-dark);font-variant-numeric:tabular-nums;
}
@media (hover: hover) and (pointer: fine){
}
@media(max-width:620px){
.ph-book .sp-head-cat{top:64px}
.ph-book .sp-crumb-name{font-size:.98rem}
}
/* Tabellen ohne Längenabhängigkeit: nur eine Preisspalte */
.ph-tbl.len.fix th:first-child,.ph-tbl.len.fix td.ph-n{width:70%}
.ph-tbl.len.fix th:not(:first-child),.ph-tbl.len.fix td.ph-one{width:30%;text-align:right}
/* Solange die Haarlänge fehlt, ist der Schritt deutlich als offen markiert */
.ph-book .hair-field.needs{
border-radius:14px;padding:1rem 1.1rem;margin-top:.6rem;
background:#fbf8ea;border:1.5px solid var(--ph-cream-dp);
animation:phPulseOnce 1.4s ease-out 1;
}
@keyframes phPulseOnce{
0%{box-shadow:0 0 0 0 rgba(200,184,119,.55)}
100%{box-shadow:0 0 0 14px rgba(200,184,119,0)}
}
.ph-book .hair-field.needs > label::after{
content:" · Bitte wählen";color:var(--t-2);font-weight:700;letter-spacing:0;text-transform:none;
}
.ph-book .hair-field.needs .hair-hint{color:var(--t-2)}
@media (prefers-reduced-motion: reduce){ .ph-book .hair-field.needs{animation:none} }
/* =========================================================
Mehrfachauswahl: Karten zum An- und Abwählen, Auswahlliste
========================================================= */
.ph-book .svc-opt{position:relative;padding-right:2.6rem}
.ph-book .svc-opt .o-mark{
position:absolute;right:1rem;top:50%;transform:translateY(-50%);
width:22px;height:22px;border-radius:6px;
border:1.5px solid var(--ph-line);background:#fff;
display:grid;place-items:center;transition:background .16s,border-color .16s;
}
.ph-book .svc-opt .o-mark::after{
content:"";width:10px;height:6px;margin-top:-3px;
border-left:2px solid var(--ph-cream);border-bottom:2px solid var(--ph-cream);
transform:rotate(-45deg) scale(.4);opacity:0;transition:opacity .16s,transform .16s;
}
.ph-book .svc-opt.on .o-mark{background:var(--ph-dark);border-color:var(--ph-dark)}
.ph-book .svc-opt.on .o-mark::after{opacity:1;transform:rotate(-45deg) scale(1)}
/* Auswahlliste */
.ph-book .svc-pick-chosen{
display:block;padding:0;overflow:hidden;
background:#fff;border:1.5px solid var(--ph-dark);border-radius:14px;
}
.ph-book .svc-pick-chosen::before{content:none}
.ph-book .c-head{
display:flex;align-items:center;justify-content:space-between;gap:.8rem;
padding:.7rem 1.05rem;background:var(--ph-dark);
}
.ph-book .c-title{
font-family:var(--ph-head);font-size:.74rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--ph-cream);
}
.ph-book .c-n{
min-width:24px;height:24px;padding:0 .5rem;border-radius:999px;display:grid;place-items:center;
background:var(--ph-cream);color:var(--ph-dark);font-size:.82rem;font-weight:700;
}
.ph-book .c-list{list-style:none;margin:0;padding:0}
.ph-book .c-list li{
display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.7rem;
padding:.7rem 1.05rem;border-bottom:1px solid var(--ph-line);
}
.ph-book .c-list li:last-child{border-bottom:none}
.ph-book .c-list .l-name{font-size:.94rem;font-weight:600;color:var(--ph-ink);line-height:1.35;min-width:0}
.ph-book .c-list .l-meta{font-size:.86rem;color:var(--ph-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ph-book .c-list .l-del{
width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;font:inherit;font-size:1.15rem;line-height:1;
background:transparent;border:1px solid var(--ph-line);color:var(--ph-muted);
}
.ph-book .c-sum{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
padding:.85rem 1.05rem;background:var(--ph-cream);
font-size:.94rem;color:var(--ph-ink);
}
.ph-book .c-sum b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.ph-book .c-open{margin:0;padding:.6rem 1.05rem;background:#fbf8ea;font-size:.82rem;color:var(--t-2)}
@media (hover: hover) and (pointer: fine){
.ph-book .c-list .l-del:hover{background:var(--ph-dark);border-color:var(--ph-dark);color:#fff}
}
@media(max-width:520px){
.ph-book .c-list li{grid-template-columns:1fr auto;row-gap:.15rem}
.ph-book .c-list .l-meta{grid-column:1;font-size:.84rem}
.ph-book .c-list .l-del{grid-row:1/3;grid-column:2}
}
/* =========================================================
Gesperrte Schritte, solange die Haarlänge fehlt
========================================================= */
.ph-book .bk-sec.gesperrt{position:relative;opacity:.42;filter:saturate(.35)}
.ph-book .bk-sec.gesperrt > *{pointer-events:none;user-select:none}
.ph-book .bk-sec.gesperrt-hinweis::after{
content:"Bitte zuerst die Haarlänge wählen";
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:3;pointer-events:none;white-space:nowrap;
font-family:var(--ph-head);font-size:.88rem;font-weight:700;
color:var(--ph-ink);background:var(--ph-cream);
border:1.5px solid var(--ph-dark);border-radius:999px;
padding:.55rem 1.2rem;box-shadow:0 8px 24px rgba(0,0,0,.18);
opacity:1;filter:saturate(3);
}
@media(max-width:480px){
.ph-book .bk-sec.gesperrt-hinweis::after{white-space:normal;max-width:80%;text-align:center;border-radius:14px}
}
/* =========================================================
Kalenderziffern für das helle Thema
Die Ausgangsregeln stammen aus dem dunklen Grundthema:
freie Tage #fff, heute in Champagner, gewählt #20201a —
auf hellem Grund ergab das weiß auf weiß bzw. dunkel auf dunkel.
========================================================= */
body.ph .ph-book .cal-day .dd{color:var(--ph-ink)}
body.ph .ph-book .cal-day.today .dd{color:var(--ph-ink);font-weight:700}
body.ph .ph-book .cal-day.muted .dd{color:var(--t-3);opacity:1}
body.ph .ph-book .cal-day:disabled .dd,
body.ph .ph-book .cal-day.empty .dd{color:var(--t-3)}
body.ph .ph-book .cal-day.full .dd{color:var(--t-2);opacity:1}
/* Gewählter Tag: dunkles Feld, deshalb helle Ziffer und heller Heute-Punkt */
body.ph .ph-book .cal-day.sel .dd{color:var(--ph-cream)}
body.ph .ph-book .cal-day.sel .td{background:var(--ph-cream)}
body.ph .ph-book .cal-day.sel .dot.amber{background:var(--ph-cream)}
body.ph .ph-book .cal-day.sel .dot.green{background:#8fe0ad}
/* Heute-Punkt auf hellem Feld dunkel, damit er überhaupt sichtbar ist */
body.ph .ph-book .cal-day .td{background:var(--ph-dark)}
/* =========================================================
Kalender: ruhigeres Raster
Vergangene Tage tragen keinen Rahmen mehr — sie sind nur noch
eine blasse Fläche. Dadurch tritt hervor, was buchbar ist.
========================================================= */
body.ph .ph-book .cal-grid{gap:.42rem}
body.ph .ph-book .cal-day{
border:1px solid #ececec;border-radius:14px;
background:#fff;box-shadow:none;
transition:border-color .16s,box-shadow .16s,background .16s,transform .12s;
}
/* Nicht buchbar: flach, ohne Rahmen, keine Interaktion vorgetäuscht */
body.ph .ph-book .cal-day:disabled,
body.ph .ph-book .cal-day.muted{
border-color:transparent;background:#f4f4f3;box-shadow:none;cursor:default;
}
body.ph .ph-book .cal-day.empty{background:none;border-color:transparent}
/* Ausgebucht: erkennbar, aber zurückhaltend */
body.ph .ph-book .cal-day.full{border-color:#f0e2e1;background:#fdf7f7}
/* Buchbar: feiner Champagner-Rahmen statt Grau */
body.ph .ph-book .cal-day:not(:disabled):not(.muted):not(.empty):not(.full):not(.sel){
border-color:var(--ph-cream-dp);
}
/* Heute: zusätzlicher Ring, ohne den Rahmen zu verdoppeln */
body.ph .ph-book .cal-day.today:not(.sel){
border-color:var(--ph-dark);box-shadow:inset 0 0 0 1px var(--ph-dark);
}
/* Gewählt: volle Fläche, kein Rahmen, weicher Schatten */
body.ph .ph-book .cal-day.sel{
border-color:transparent;background:var(--ph-dark);
box-shadow:0 6px 18px rgba(21,21,21,.28);
}
body.ph .ph-book .cal-day .dot{width:6px;height:6px}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .cal-day:hover:not(:disabled):not(.muted):not(.full):not(.sel):not(.empty){
border-color:var(--ph-dark);box-shadow:0 4px 14px rgba(21,21,21,.10);transform:translateY(-1px);
}
}
@media(max-width:560px){
body.ph .ph-book .cal-grid{gap:.32rem}
body.ph .ph-book .cal-day{border-radius:11px}
}
/* Das eingebaute hidden-Attribut muss stärker sein als die display-Regeln,
sonst bleibt ein ausgeblendeter Block samt altem Inhalt sichtbar. */
.ph-book .svc-pick-chosen[hidden],
.ph-book #svcPickBrowse[hidden],
.ph-book .hair-field[hidden]{display:none !important}
/* =========================================================
Der Kalender saß als eigener Kasten in der Buchungskarte —
Rahmen im Rahmen. Er verschmilzt jetzt mit der Karte.
========================================================= */
body.ph .ph-book .cal{
background:transparent;border:none;box-shadow:none;
padding:0;border-radius:0;
}
body.ph .ph-book .cal-head{padding-left:0;padding-right:0}
body.ph .ph-book .cal-legend{
border-top:1px solid var(--ph-line);
margin-top:1rem;padding:.85rem 0 0;
}
body.ph .ph-book .slots-wrap{border-top:1px solid var(--ph-line);margin-top:1.1rem;padding-top:1.1rem}
/* Mehrere Leistungen in der Terminübersicht sauber untereinander */
body.ph .ph-book #sum-svc{text-align:right}
body.ph .ph-book #sum-svc .sv-line{display:block}
body.ph .ph-book #sum-svc .sv-line + .sv-line{margin-top:.5rem;padding-top:.5rem;border-top:1px dashed var(--ph-line)}
body.ph .ph-book #sum-svc .sv-nm{display:block;line-height:1.35}
body.ph .ph-book #sum-svc .sv-mt{display:block;margin-top:.15rem;font-size:.84rem;color:var(--ph-muted);font-weight:400}
/* =========================================================
Buchung als Assistent — ein Schritt über die volle Breite
========================================================= */
body.ph .ph-book .bk-grid{grid-template-columns:minmax(0,1fr) 340px;gap:1.6rem;align-items:start}
body.ph .ph-book .bk-card{padding:1.6rem 1.7rem 0}
body.ph .ph-book .bk-sec[hidden]{display:none !important}
body.ph .ph-book .bk-sec{border:none;padding:0 0 1.4rem;margin:0}
body.ph .ph-book .bk-sec + .bk-sec{border-top:none}
/* Schrittkette oben: anklickbar, erledigte Schritte mit Haken */
body.ph .ph-book .stepper{margin-bottom:1.4rem;padding-bottom:1.2rem;border-bottom:1px solid var(--ph-line)}
body.ph .ph-book .stepper .s.clickable{cursor:pointer}
/* Navigationsleiste am unteren Rand der Karte */
body.ph .ph-book .wz-bar{
position:sticky;bottom:0;z-index:8;
display:flex;align-items:center;gap:1rem;
/* Kein negativer Rand mehr: Die Leiste ist ein Geschwister der Karte, dadurch
ragte sie zuvor um genau deren Innenabstand über beide Seiten hinaus. */
margin:0;padding:.95rem 1.7rem;
background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid var(--r-fein);border-top:none;
border-radius:0 0 18px 18px;
box-shadow:0 10px 28px rgba(16,32,32,.06);
}
/* Die Karte schließt nach unten bündig an die Leiste an */
body.ph .ph-book .bk-card{border-radius:18px 18px 0 0;border-bottom:none}
body.ph .ph-book .wz-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
body.ph .ph-book .wz-sum{font-size:1.02rem;font-weight:700;color:var(--ph-ink);font-variant-numeric:tabular-nums}
body.ph .ph-book .wz-hint{font-size:.83rem;color:var(--ph-muted)}
body.ph .ph-book .wz-back,body.ph .ph-book .wz-next{
display:inline-flex;align-items:center;gap:.4rem;flex:none;cursor:pointer;font:inherit;
font-weight:600;font-size:.95rem;padding:.7rem 1.3rem;border-radius:999px;transition:all .16s;
}
body.ph .ph-book .wz-back{background:transparent;border:1px solid var(--ph-line);color:var(--ph-body)}
body.ph .ph-book .wz-back:disabled{opacity:.35;cursor:default}
body.ph .ph-book .wz-next{background:var(--ph-dark);border:none;color:var(--ph-cream);padding:.75rem 1.6rem}
body.ph .ph-book .wz-next:disabled{background:#e8e6dd;color:var(--t-2);cursor:default}
body.ph .ph-book .wz-next.final{background:linear-gradient(135deg,#2a2a2a,#151515)}
body.ph .ph-book .wz-back svg,body.ph .ph-book .wz-next svg{width:16px;height:16px}
/* --- Schritt 1: Breite nutzen --- */
@media(min-width:900px){
body.ph .ph-book .svc-pick-list{grid-template-columns:repeat(2,1fr);gap:.6rem}
body.ph .ph-book .sp-cats{grid-template-columns:repeat(3,1fr)}
}
/* --- Schritt 2: Personen nebeneinander --- */
@media(min-width:760px){
body.ph .ph-book .staff-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}
}
/* --- Schritt 3: Kalender links, Zeiten rechts --- */
@media(min-width:900px){
body.ph .ph-book [data-schritt="3"] .bk-sec:not([hidden]){
display:grid;grid-template-columns:1fr;gap:0;
}
body.ph .ph-book .cal-slots{display:grid;grid-template-columns:1.15fr .85fr;gap:1.6rem;align-items:start}
body.ph .ph-book .cal-slots .slots-wrap{border-top:none;margin-top:0;padding-top:0;
border-left:1px solid var(--ph-line);padding-left:1.6rem}
}
/* --- Schritt 4: Formular zweispaltig --- */
@media(min-width:760px){
body.ph .ph-book .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
}
/* --- Handy --- */
@media(max-width:1023px){
body.ph .ph-book .bk-grid{grid-template-columns:1fr}
body.ph .ph-book .summary{position:static;order:2}
/* Auf schmalen Bildschirmen steht die Zusammenfassung unter dem Formular
und schiebt jeden Schritt nach unten — der Kunde scrollt an Angaben
vorbei, die noch gar nicht ausgefüllt sind. Deshalb erscheint sie hier
erst im letzten Schritt, wo sie tatsächlich zur Kontrolle dient.
Am Bildschirm bleibt sie durchgehend sichtbar (siehe Regel oben). */
body.ph .ph-book #booking:not([data-schritt="4"]) .summary{display:none}
}
@media(max-width:620px){
body.ph .ph-book .bk-card{padding:1.1rem 1.1rem 0}
body.ph .ph-book .wz-bar{margin:0;padding:.8rem 1.1rem;gap:.6rem}
body.ph .ph-book .wz-back span{display:none}
body.ph .ph-book .wz-back{padding:.7rem .85rem}
body.ph .ph-book .wz-sum{font-size:.95rem}
body.ph .ph-book .wz-hint{font-size:.78rem}
body.ph .ph-book .wz-next{padding:.72rem 1.15rem;font-size:.9rem}
body.ph .ph-book .stepper{overflow-x:auto;scrollbar-width:none}
body.ph .ph-book .stepper::-webkit-scrollbar{display:none}
}
/* =========================================================
Sanfte Übergänge zwischen den Schritten
========================================================= */
body.ph .ph-book .bk-sec.wz-in{animation:wzEin .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes wzEin{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}
}
/* Schrittkette eindeutig: einer aktiv, davor erledigt, danach offen.
Vorher schrieben zwei Stellen dieselben Klassen — daher die Farbverwirrung. */
body.ph .ph-book .stepper .s .b{
width:28px;height:28px;font-size:.84rem;font-weight:700;
background:#fff;border:1.5px solid var(--ph-line);color:var(--ph-muted);
transition:background .25s,border-color .25s,color .25s;
}
body.ph .ph-book .stepper .s{color:var(--ph-muted);transition:color .25s}
body.ph .ph-book .stepper .s.active{color:var(--ph-ink);font-weight:700}
body.ph .ph-book .stepper .s.active .b{
background:var(--ph-dark);border-color:var(--ph-dark);color:var(--ph-cream);
box-shadow:0 0 0 4px rgba(21,21,21,.08);
}
body.ph .ph-book .stepper .s.done{color:var(--ph-body)}
body.ph .ph-book .stepper .ln{background:var(--ph-line);transition:background .25s}
body.ph .ph-book .stepper .s.clickable{cursor:pointer}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .stepper .s.clickable:hover .b{border-color:var(--ph-dark)}
}
@media (prefers-reduced-motion: reduce){
body.ph .ph-book .bk-sec.wz-in{animation:none}
}
/* =========================================================
Wechsel zwischen Kategorieübersicht und Leistungsliste
========================================================= */
@keyframes spVor{
from{opacity:0;transform:translateX(22px)}
to{opacity:1;transform:none}
}
@keyframes spZurueck{
from{opacity:0;transform:translateX(-22px)}
to{opacity:1;transform:none}
}
.ph-book .sp-vor{animation:spVor .32s cubic-bezier(.22,.61,.36,1) both}
.ph-book .sp-zurueck{animation:spZurueck .32s cubic-bezier(.22,.61,.36,1) both}
/* Die Karten setzen leicht versetzt auf — das führt den Blick von oben nach unten */
.ph-book .sp-vor .svc-opt,
.ph-book .sp-vor .sp-cat,
.ph-book .sp-zurueck .svc-opt,
.ph-book .sp-zurueck .sp-cat{animation:spKarte .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes spKarte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ph-book .sp-vor .svc-opt:nth-child(1),.ph-book .sp-zurueck .sp-cat:nth-child(1){animation-delay:.02s}
.ph-book .sp-vor .svc-opt:nth-child(2),.ph-book .sp-zurueck .sp-cat:nth-child(2){animation-delay:.05s}
.ph-book .sp-vor .svc-opt:nth-child(3),.ph-book .sp-zurueck .sp-cat:nth-child(3){animation-delay:.08s}
.ph-book .sp-vor .svc-opt:nth-child(4),.ph-book .sp-zurueck .sp-cat:nth-child(4){animation-delay:.11s}
.ph-book .sp-vor .svc-opt:nth-child(n+5),.ph-book .sp-zurueck .sp-cat:nth-child(n+5){animation-delay:.13s}
/* Die Kopfleiste der Kategorie fährt zusätzlich sanft auf */
.ph-book .sp-vor .sp-head-cat{animation:spKopf .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes spKopf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
.ph-book .sp-vor,.ph-book .sp-zurueck,
.ph-book .sp-vor .svc-opt,.ph-book .sp-vor .sp-cat,
.ph-book .sp-zurueck .svc-opt,.ph-book .sp-zurueck .sp-cat,
.ph-book .sp-vor .sp-head-cat{animation:none}
}
/* =========================================================
Die beiden Leisten nach Funktion unterscheiden:
hell = wo du gerade bist · dunkel = was du gewählt hast.
Zwei schwarze Balken übereinander sagten optisch dasselbe.
========================================================= */
.ph-book .sp-head-cat{
background:var(--ph-cream);
border:1px solid var(--ph-cream-dp);
box-shadow:0 2px 10px rgba(21,21,21,.06);
padding:.6rem .8rem;
}
.ph-book .sp-crumb-top{color:var(--t-2)}
.ph-book .sp-crumb-name{color:var(--ph-ink)}
.ph-book .sp-count{
background:var(--ph-dark);color:var(--ph-cream);
min-width:28px;height:28px;font-size:.85rem;
}
/* Zurück: dunkel gefüllt auf hellem Grund — der stärkste Kontrast der Leiste */
.ph-book .sp-head-cat .sp-back{
width:auto;height:40px;padding:0 1rem 0 .75rem;border-radius:999px;
display:inline-flex;align-items:center;gap:.35rem;
background:var(--ph-dark);border:none;color:var(--ph-cream);
font-weight:700;font-size:.9rem;
box-shadow:0 3px 10px rgba(21,21,21,.22);
transition:background .16s,transform .12s;
}
.ph-book .sp-head-cat .sp-back svg{width:18px;height:18px}
.ph-book .sp-head-cat .sp-back .b-txt{white-space:nowrap}
@media (hover: hover) and (pointer: fine){
.ph-book .sp-head-cat .sp-back:hover{background:#000;transform:translateX(-2px)}
}
.ph-book .sp-head-cat .sp-back:active{transform:translateX(-1px) scale(.97)}
/* Auswahl-Leiste bleibt dunkel — sie ist das Ergebnis, nicht die Navigation */
.ph-book .c-head{background:var(--ph-dark)}
@media(max-width:480px){
.ph-book .sp-head-cat .sp-back .b-txt{display:none}
.ph-book .sp-head-cat .sp-back{width:40px;padding:0;justify-content:center}
.ph-book .sp-crumb-name{font-size:.95rem}
}
/* Der Browser verschiebt den Bildlauf selbsttätig, wenn sich Inhalte in ihrer
Höhe ändern. Im Auswahlbereich regeln wir das selbst — beides zusammen
führt zu Sprüngen. */
/* Die Verankerung muss auf allen Vorfahren aus sein, in denen sich die Höhe
ändert — sonst wählt der Browser einen Anker weiter oben und rückt selbst
nach. Im Buchungsbereich steuern wir den Bildlauf ausschließlich selbst. */
body.ph .ph-book,
body.ph .ph-book #booking,
body.ph .ph-book .bk-grid,
body.ph .ph-book .bk-card,
body.ph .ph-book .bk-sec,
body.ph .ph-book .svc-pick,
body.ph .ph-book #svcPickBrowse,
body.ph .ph-book .sp-body{overflow-anchor:none}
/* Zurück-Knopf: genau eine Hover-Regel, damit Schrift und Fläche zusammenpassen.
Zuvor setzten drei Regeln Hintergrund und Farbe gegeneinander. */
body.ph .ph-book .sp-head-cat .sp-back:hover{
background:#000 !important;color:var(--ph-cream) !important;transform:translateX(-2px);
}
/* Leistung direkt aus der Terminübersicht nehmen */
body.ph .ph-book #sum-svc .sv-line{position:relative;padding-right:1.7rem}
body.ph .ph-book #sum-svc .sv-del{
position:absolute;right:0;top:0;
width:22px;height:22px;border-radius:50%;padding:0;cursor:pointer;
font:inherit;font-size:1rem;line-height:1;
background:transparent;border:1px solid var(--ph-line);color:var(--ph-muted);
transition:background .15s,color .15s,border-color .15s;
}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book #sum-svc .sv-del:hover{background:var(--ph-dark);border-color:var(--ph-dark);color:#fff}
}
/* =========================================================
Farbsystem des Buchungsbereichs
Vorher waren 8 Grautöne für dieselbe Aufgabe im Einsatz.
Jetzt gibt es feste Rollen — jede Farbe hat genau eine Bedeutung:
Fläche · Rahmen · Text (3 Stufen) · Aktion · Auswahl · Status
========================================================= */
body.ph .ph-book{
/* Flächen */
--f-seite:#F6F5F2; /* Hintergrund der Sektion */
--f-karte:#FFFFFF; /* Karten und Felder */
--f-zart:#FAF9F5; /* leicht abgesetzte Zonen */
--f-still:#F1F0EC; /* nicht verfügbar */
/* Rahmen */
--r-fein:#E7E4DD;
--r-klar:#D5D1C7;
/* Text in drei Stufen — mehr braucht es nicht */
--t-1:#1A1A1A; /* Hauptaussage */
--t-2:#6B675F; /* Begleitangaben */
--t-3:#9A968E; /* Randnotizen, deaktiviert */
/* Aktion und Auswahl bewusst getrennt */
--a-tat:#151515; /* nur für Handlungen */
--a-wahl:#F7F0D0; /* nur für Gewähltes */
--a-wahl-rand:#151515;
/* Status */
--s-frei:#2F7D4F;
--s-knapp:#A87C1B;
--s-voll:#B34840;
/* Die Variablen der Website zeigen im Buchungsbereich auf die Rollen —
dadurch greift das System auch dort, wo ältere Regeln sie benutzen. */
--ph-ink:var(--t-1);
--ph-body:var(--t-2);
--ph-muted:var(--t-3);
--ph-line:var(--r-fein);
background:var(--f-seite);
}
/* --- Text auf drei Stufen vereinheitlichen --- */
body.ph .ph-book,
body.ph .ph-book .o-name,body.ph .ph-book .c-list .l-name,
body.ph .ph-book #sum-svc .sv-nm,body.ph .ph-book .sp-crumb-name,
body.ph .ph-book .k-name,body.ph .ph-book .cal-day .dd{color:var(--t-1)}
body.ph .ph-book .o-dur,body.ph .ph-book .c-list .l-meta,body.ph .ph-book #sum-svc .sv-mt,
body.ph .ph-book .k-n,body.ph .ph-book .hair-hint,body.ph .ph-book .svc-pick-hint,
body.ph .ph-book .note,body.ph .ph-book label,body.ph .ph-book .wz-hint,
body.ph .ph-book .ph-lead,body.ph .ph-book .sh .req{color:var(--t-2)}
body.ph .ph-book .o-hint,body.ph .ph-book .sp-h,body.ph .ph-book .cal-dow span,
body.ph .ph-book .svc-pick-none,body.ph .ph-book .cal-legend .lg{color:var(--t-3)}
/* --- Flächen und Rahmen --- */
body.ph .ph-book .bk-card,body.ph .ph-book .summary,
body.ph .ph-book .svc-opt,body.ph .ph-book .sp-cat,
body.ph .ph-book .svc-pick-search,body.ph .ph-book .field input,
body.ph .ph-book .field select,body.ph .ph-book .staffcard,
body.ph .ph-book .time-btn,body.ph .ph-book .hair-opts button,
body.ph .ph-book .svc-pick-chosen,body.ph .ph-book .sp-back:not(.sp-head-cat .sp-back),
body.ph .ph-book .wz-back{background:var(--f-karte);border-color:var(--r-fein)}
body.ph .ph-book .cal-day:disabled,body.ph .ph-book .cal-day.muted{background:var(--f-still)}
body.ph .ph-book .paycond,body.ph .ph-book .c-open{background:var(--f-zart);border-color:var(--r-klar)}
/* --- Aktion: dunkel, ausschließlich für Handlungen --- */
body.ph .ph-book .btn-gold,body.ph .ph-book .wz-next{background:var(--a-tat);color:var(--a-wahl);border:none}
body.ph .ph-book .btn-gold:disabled,body.ph .ph-book .wz-next:disabled{
background:#E9E7E0;color:var(--t-2);
}
/* --- Auswahl: Champagner, ausschließlich für Gewähltes --- */
body.ph .ph-book .svc-opt.on,body.ph .ph-book .hair-opts button.on,
body.ph .ph-book .staffcard.sel,body.ph .ph-book .svc-pick-chosen{
background:var(--a-wahl);border-color:var(--a-wahl-rand);
}
body.ph .ph-book .cal-day.sel,body.ph .ph-book .time-btn.sel{
background:var(--a-tat);border-color:var(--a-tat);color:var(--a-wahl);
}
/* --- Status: nur für Verfügbarkeit, nirgends dekorativ --- */
body.ph .ph-book .dot.green{background:var(--s-frei)}
body.ph .ph-book .dot.amber{background:var(--s-knapp)}
body.ph .ph-book .dot.red{background:var(--s-voll)}
/* --- Tastaturfokus sichtbar machen --- */
body.ph .ph-book :focus-visible{
outline:2px solid var(--a-tat);outline-offset:2px;border-radius:8px;
}
/* =========================================================
Kopfzeile als Milchglas
Oben über dem Foto fast unsichtbar, beim Scrollen milchig weiß
mit dunkler Schrift.
========================================================= */
body.ph #header{
background:rgba(255,255,255,.10);
backdrop-filter:blur(18px) saturate(160%);
-webkit-backdrop-filter:blur(18px) saturate(160%);
border-bottom:1px solid rgba(255,255,255,.18);
transition:background .35s,backdrop-filter .35s,border-color .35s,box-shadow .35s;
}
body.ph #header.scrolled{
background:rgba(255,255,255,.74);
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
border-bottom-color:rgba(0,0,0,.07);
box-shadow:0 6px 28px rgba(0,0,0,.06);
}
body.ph #header.scrolled .nav-links a{color:#1b1b1b}
body.ph #header.scrolled .nav-links a:hover,
body.ph #header.scrolled .nav-links a.active{color:#000}
body.ph #header.scrolled .nav-links a.active::after{background:#000}
body.ph #header.scrolled .nav-right .btn-gold{border-color:#1b1b1b;color:#1b1b1b;background:transparent}
body.ph #header.scrolled .nav-right .btn-gold:hover{background:#1b1b1b;color:#fff}
body.ph #header.scrolled .menu-btn span{background:#1b1b1b}
/* Leichter Verlauf, damit die helle Schrift oben auf hellen Fotos lesbar bleibt */
body.ph #header:not(.scrolled)::after{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0));
}
@supports not (backdrop-filter: blur(1px)){
body.ph #header{background:rgba(20,20,20,.55)}
body.ph #header.scrolled{background:rgba(255,255,255,.94)}
}
/* =========================================================
Buchungssystem — eigene Farbwelt
Petrol als einzige Aktionsfarbe, kühle Neutraltöne als Fläche,
ein zartes Petrol-Tint für Gewähltes. Kein Anthrazit, kein Champagner.
========================================================= */
body.ph .ph-book{
--f-seite:#F4F6F6;
--f-karte:#FFFFFF;
--f-zart:#EEF4F4;
--f-still:#EDEFEF;
--r-fein:#DFE4E4;
--r-klar:#C6CFCF;
--t-1:#16201F;
--t-2:#5A6665;
--t-3:#8B9695;
--a-tat:#0E5C61; /* Petrol: nur Handlungen */
--a-tat-hell:#127078;
--a-wahl:#E4F0F0; /* Petrol-Tint: nur Gewähltes */
--a-wahl-rand:#0E5C61;
--s-frei:#2F7D4F;
--s-knapp:#9A6B12;
--s-voll:#B0453D;
/* Auch die Website-Variablen im Buchungsbereich umlenken, damit ältere
Regeln nicht doch wieder Anthrazit oder Champagner einsetzen. */
--ph-ink:var(--t-1);
--ph-body:var(--t-2);
--ph-muted:var(--t-3);
--ph-line:var(--r-fein);
--ph-dark:var(--a-tat);
--ph-cream:var(--a-wahl);
--ph-cream-lt:#F2F8F8;
--ph-cream-dp:var(--r-klar);
--gold:var(--a-tat);
--gold-deep:var(--a-tat-hell);
background:var(--f-seite);
}
/* Handlungen */
body.ph .ph-book .btn-gold,body.ph .ph-book .wz-next{background:var(--a-tat);color:#fff}
body.ph .ph-book .btn-gold:hover,body.ph .ph-book .wz-next:hover{background:var(--a-tat-hell)}
body.ph .ph-book .btn-gold:disabled,body.ph .ph-book .wz-next:disabled{background:#DDE3E3;color:#8B9695}
/* Gewähltes */
body.ph .ph-book .svc-opt.on,body.ph .ph-book .hair-opts button.on,
body.ph .ph-book .staffcard.sel,body.ph .ph-book .svc-pick-chosen{
background:var(--a-wahl);border-color:var(--a-wahl-rand);
}
body.ph .ph-book .svc-opt.on .o-mark{background:var(--a-tat);border-color:var(--a-tat)}
body.ph .ph-book .svc-opt.on .o-mark::after{border-color:#fff}
body.ph .ph-book .cal-day.sel,body.ph .ph-book .time-btn.sel{
background:var(--a-tat);border-color:var(--a-tat);color:#fff;
}
body.ph .ph-book .cal-day.sel .dd{color:#fff}
body.ph .ph-book .cal-day.today:not(.sel){box-shadow:inset 0 0 0 1.5px var(--a-tat)}
body.ph .ph-book .cal-day:not(:disabled):not(.muted):not(.empty):not(.full):not(.sel){border-color:var(--r-klar)}
/* Leisten */
body.ph .ph-book .sp-head-cat{background:var(--a-wahl);border-color:var(--a-wahl-rand)}
body.ph .ph-book .sp-crumb-name{color:var(--t-1)}
body.ph .ph-book .sp-crumb-top{color:var(--a-tat)}
body.ph .ph-book .sp-count{background:var(--a-tat);color:#fff}
body.ph .ph-book .sp-head-cat .sp-back{background:var(--a-tat);color:#fff}
body.ph .ph-book .sp-head-cat .sp-back:hover{background:var(--a-tat-hell) !important;color:#fff !important}
body.ph .ph-book .c-head{background:var(--a-tat)}
body.ph .ph-book .c-title{color:#fff}
body.ph .ph-book .c-n{background:#fff;color:var(--a-tat)}
body.ph .ph-book .c-sum{background:var(--a-wahl);color:var(--t-1)}
body.ph .ph-book .summary .cap{background:var(--a-tat);color:#fff}
body.ph .ph-book .sp-cat::before{background:var(--a-tat);opacity:.35}
body.ph .ph-book .sp-cat:hover::before{opacity:1}
body.ph .ph-book .stepper .s.active .b{background:var(--a-tat);border-color:var(--a-tat);color:#fff;box-shadow:0 0 0 4px rgba(14,92,97,.10)}
body.ph .ph-book .stepper .s.done .b{border-color:var(--a-tat);color:var(--a-tat)}
body.ph .ph-book .sh .n{background:var(--a-wahl);color:var(--a-tat);border-color:var(--a-wahl-rand)}
body.ph .ph-book .hair-field.needs{background:var(--f-zart);border-color:var(--a-wahl-rand)}
body.ph .ph-book .o-hint{border-color:var(--r-klar);background:var(--f-zart);color:var(--t-2)}
body.ph .ph-book :focus-visible{outline-color:var(--a-tat)}
/* Das Logo ist cremefarben und verschwand auf der milchweißen Leiste
(gemessen: dunkelste Pixel 206/255). Beim Scrollen wird es eingefärbt. */
body.ph #header .brand .logo-img{transition:filter .35s ease}
body.ph #header.scrolled .brand .logo-img{
filter:brightness(0) opacity(.86);
}
/* Bei offenem Menü am Handy liegt die dunkle Fläche darunter — dort hell lassen */
body.ph #header.scrolled.menu-open .brand .logo-img{filter:none}
/* =========================================================
Navigation des Assistenten: Zurück rot, Weiter grün
Beide behalten Beschriftung und Pfeil — die Bedeutung hängt
damit nicht allein an der Farbe.
========================================================= */
body.ph .ph-book .wz-back{
background:#FFF5F4;border:1.5px solid #B3453D;color:#8E332C;font-weight:700;
}
body.ph .ph-book .wz-back:disabled{
background:transparent;border-color:var(--r-fein);color:var(--t-3);
}
body.ph .ph-book .wz-next{
background:#1E7A46;border:none;color:#fff;
}
body.ph .ph-book .wz-next.final{background:linear-gradient(135deg,#238A4F,#1A6B3C)}
body.ph .ph-book .wz-next:disabled{
background:#E4E7E6;color:#8B9695;
}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .wz-back:not(:disabled):hover{background:#B3453D;color:#fff}
body.ph .ph-book .wz-next:not(:disabled):hover{background:#186139}
}
/* =========================================================
Bestätigung als Fenster in der Bildschirmmitte
========================================================= */
.bk-done{
position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
background:rgba(12,20,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transition:opacity .26s ease;
}
.bk-done.an{opacity:1}
.bk-done .bd-karte{
position:relative;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;
background:#fff;border-radius:20px;padding:2.2rem 1.9rem 1.7rem;text-align:center;
box-shadow:0 30px 80px rgba(0,0,0,.35);
transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.bk-done.an .bd-karte{transform:none}
.bk-done .bd-x{
position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;
border:1px solid #E1E6E5;background:#fff;color:#5A6665;font-size:1.4rem;line-height:1;cursor:pointer;
}
.bk-done .bd-x:hover{background:#F2F5F4;color:#16201F}
/* Grüner Haken, deutlich und mit kurzem Aufziehen */
.bk-done .bd-haken{
width:74px;height:74px;border-radius:50%;margin:0 auto 1.1rem;
display:grid;place-items:center;color:#fff;background:#1E7A46;
box-shadow:0 0 0 8px rgba(30,122,70,.14);
animation:bdPop .45s cubic-bezier(.2,.9,.28,1.06) both;
}
.bk-done .bd-haken svg{width:36px;height:36px}
@keyframes bdPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.bk-done h3{font-size:1.5rem;margin:0 0 .3rem;color:#16201F}
.bk-done .bd-sub{margin:0 0 1.4rem;color:#5A6665;font-size:.95rem}
/* Angaben als saubere Liste statt grauem Block */
.bk-done .bd-liste{margin:0 0 1.2rem;padding:0;text-align:left;border-top:1px solid #E7EAEA}
.bk-done .bd-liste > div{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
padding:.72rem .2rem;border-bottom:1px solid #E7EAEA;
}
.bk-done .bd-liste dt{margin:0;font-size:.86rem;color:#5A6665;flex:none}
.bk-done .bd-liste dd{margin:0;font-size:.95rem;font-weight:600;color:#16201F;text-align:right}
.bk-done .bd-ref{font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:500;color:#5A6665}
.bk-done .bd-mail{font-size:.88rem;color:#5A6665;line-height:1.6;margin:0 0 1.3rem}
.bk-done .bd-mail b{color:#16201F}
.bk-done .bd-demo{font-size:.82rem;color:#9A6B12;margin:0 0 1rem}
.bk-done .bd-aktionen{display:flex;flex-direction:column;gap:.6rem}
.bk-done .bd-neu{
order:1;font:inherit;font-size:1rem;font-weight:700;padding:.9rem 1.4rem;border-radius:999px;
border:none;background:#1E7A46;color:#fff;cursor:pointer;transition:background .16s;
}
.bk-done .bd-neu:hover{background:#186139}
.bk-done .bd-storno{
order:2;font-size:.9rem;padding:.7rem 1rem;border-radius:999px;
border:1px solid #E1E6E5;color:#5A6665;text-decoration:none;transition:all .16s;
}
.bk-done .bd-storno:hover{border-color:#16201F;color:#16201F}
@media (prefers-reduced-motion: reduce){
.bk-done,.bk-done .bd-karte,.bk-done .bd-haken{transition:none;animation:none}
}
/* =========================================================
Meldungen: Erfolg grün, Störung rot — nicht mehr blasses Gelb
========================================================= */
body.ph .ph-book .bk-live{
background:#FDF3F2;border:1.5px solid #B3453D;color:#8E332C;
font-size:.95rem;font-weight:600;padding:.95rem 1.2rem;border-radius:12px;
box-shadow:0 4px 16px rgba(179,69,61,.10);
}
body.ph .ph-book .bk-live button{color:#8E332C;font-size:1.35rem}
body.ph .ph-book .bk-live.ok{
background:#F0F9F4;border-color:#1E7A46;color:#155F35;box-shadow:0 4px 16px rgba(30,122,70,.10);
}
body.ph .ph-book .bk-live.ok button{color:#155F35}
/* =========================================================
Terminübersicht: reine Zusammenfassung
Die Handlung liegt in der Leiste unten — sie ist immer sichtbar.
Zwei Knöpfe für dieselbe Sache haben nur verwirrt.
========================================================= */
body.ph .ph-book #booking[data-schritt] #bookBtn,
body.ph .ph-book #booking[data-schritt] #bookBtn + .note{display:none}
body.ph .ph-book .summary{
border:1px solid var(--r-fein);border-radius:18px;overflow:hidden;
box-shadow:0 10px 34px rgba(16,32,32,.07);background:#fff;
}
body.ph .ph-book .summary .cap{
background:var(--a-tat);color:#fff;padding:1rem 1.3rem;
font-family:var(--ph-head);font-size:1.06rem;letter-spacing:.01em;
}
body.ph .ph-book .summary .rows{padding:.3rem 1.3rem}
body.ph .ph-book .summary .r{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
padding:.78rem 0;border-bottom:1px solid var(--r-fein);
}
body.ph .ph-book .summary .r:last-child{border-bottom:none}
body.ph .ph-book .summary .r .k{font-size:.88rem;color:var(--t-2);flex:none}
body.ph .ph-book .summary .r .v{font-size:.96rem;font-weight:600;color:var(--t-1);text-align:right}
body.ph .ph-book .summary .r .v.empty{color:var(--t-3);font-weight:400}
/* Summe als abgesetzter Block statt lose im Fluss */
body.ph .ph-book .summary .total{
margin:.4rem 1.3rem 1.3rem;padding:1rem 1.1rem;border-radius:14px;
background:var(--a-wahl);border:1px solid var(--a-wahl-rand);
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
body.ph .ph-book .summary .total .k{font-size:.95rem;font-weight:600;color:var(--t-1)}
body.ph .ph-book .summary .total .amount{
font-family:var(--ph-head);font-size:1.7rem;font-weight:700;color:var(--a-tat);
font-variant-numeric:tabular-nums;
}
body.ph .ph-book .summary .total .amount small{
display:block;font-family:inherit;font-size:.84rem;font-weight:500;color:var(--t-2);text-align:right;
}
/* Hinweiszeile am Fuß der Karte */
body.ph .ph-book .summary .foot{
padding:0 1.3rem 1.3rem;font-size:.83rem;line-height:1.6;color:var(--t-2);text-align:center;
}
/* Leistungszeilen mit Löschknopf sauber einrücken */
body.ph .ph-book #sum-svc .sv-line + .sv-line{border-top-color:var(--r-fein)}
/* Die Leiste unten trägt jetzt die einzige Handlung — etwas kräftiger */
body.ph .ph-book .wz-sum{font-size:1.08rem}
body.ph .ph-book .wz-next{padding:.8rem 1.7rem;font-size:1rem}
@media(max-width:1023px){
body.ph .ph-book .summary{margin-top:1.2rem}
}
/* =========================================================
Seite „Termin stornieren / umbuchen"
Sie stammte noch aus dem dunklen Ursprungsprojekt.
========================================================= */
body.ph .page-hero{background:var(--ph-bg-alt);padding:6.5rem 0 2.5rem;border-bottom:1px solid var(--ph-line)}
body.ph .page-hero .crumb,body.ph .page-hero .crumb a{color:var(--ph-muted);font-size:.85rem}
body.ph .page-hero .crumb a:hover{color:var(--ph-ink)}
body.ph .page-hero .eyebrow{color:var(--ph-muted)}
body.ph .page-hero h1{color:var(--ph-ink)}
body.ph .page-hero p{color:var(--ph-body)}
body.ph .section.tight{background:var(--f-seite);padding:2.6rem 0 4rem}
/* Die Terminkarte */
body.ph .ph-book .confirm,body.ph .ph-book .card{
background:#fff;border:1px solid var(--r-fein);border-radius:18px;
box-shadow:0 10px 34px rgba(16,32,32,.07);padding:1.6rem 1.7rem;
}
body.ph .ph-book .confirm .eyebrow{color:var(--a-tat);letter-spacing:.16em}
body.ph .ph-book .mailbox{
background:var(--f-zart);border:1px solid var(--r-fein);border-radius:14px;
padding:.4rem 1.1rem;margin:1rem 0 1.4rem;
}
body.ph .ph-book .mailbox .r{
display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
padding:.7rem 0;border-bottom:1px solid var(--r-fein);
}
body.ph .ph-book .mailbox .r:last-child{border-bottom:none}
body.ph .ph-book .mailbox .k{font-size:.86rem;color:var(--t-2);flex:none}
body.ph .ph-book .mailbox .v{font-size:.95rem;font-weight:600;color:var(--t-1);text-align:right}
/* Handlungen: Umbuchen führend, Stornieren zurückhaltend rot */
body.ph .ph-book .btn-ghost{
background:#fff;border:1px solid var(--r-fein);color:var(--t-2);
}
body.ph .ph-book .btn-danger,
body.ph .ph-book a[href*="storn"]:not(.btn-gold){
background:#FFF5F4;border:1.5px solid #B3453D;color:#8E332C;font-weight:700;
}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .btn-danger:hover{background:#B3453D;color:#fff}
}
body.ph .ph-book .ff-label{color:var(--t-2)}
body.ph .ph-book .cal-title{color:var(--t-1)}
/* Nummerierung der Leistungen in der Terminübersicht — erst ab zwei Positionen,
bei einer einzelnen wäre eine „1" nur Ballast. */
body.ph .ph-book #sum-svc .sv-line{position:relative;padding-right:1.7rem;padding-left:1.9rem}
body.ph .ph-book #sum-svc .sv-nr{
position:absolute;left:0;top:.1rem;
width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;
font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
background:var(--a-wahl);color:var(--a-tat);border:1px solid var(--a-wahl-rand);
}
body.ph .ph-book #sum-svc .sv-nm{display:block;line-height:1.35}
body.ph .ph-book #sum-svc .sv-mt{padding-left:0}
@media(max-width:1023px){
body.ph .ph-book #sum-svc .sv-line{padding-left:1.8rem}
}
/* =========================================================
Unterseiten haben kein dunkles Hero-Bild — die Kopfzeile muss
dort sofort im hellen Modus stehen, sonst steht helle Schrift
auf hellem Grund.
========================================================= */
body.ph:not(.has-hero) #header{
background:rgba(255,255,255,.82);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--ph-line);
}
body.ph:not(.has-hero) #header::after{display:none}
body.ph:not(.has-hero) #header .nav-links a{color:#1b1b1b}
body.ph:not(.has-hero) #header .nav-links a:hover{color:#000}
body.ph:not(.has-hero) #header .nav-right .btn-gold{border-color:#1b1b1b;color:#1b1b1b;background:transparent}
body.ph:not(.has-hero) #header .nav-right .btn-gold:hover{background:#1b1b1b;color:#fff}
body.ph:not(.has-hero) #header .menu-btn span{background:#1b1b1b}
body.ph:not(.has-hero) #header .brand .logo-img{filter:brightness(0) opacity(.86)}
/* Fußzeile: Verweise und Kontaktangaben liefen ohne Abstand ineinander */
/* =========================================================
Fußzeile
Die Verweise standen ohne Abstand aneinander („LeistungenPreise…"),
weil sie als Inline-Elemente direkt aufeinander folgen.
========================================================= */
body.ph footer .foot-col a{display:block;padding:.34rem 0;line-height:1.45}
/* Die Links stehen im Markup mit
dazwischen — das stammt aus der Zeit,
als sie noch inline waren. Seit sie display:block sind, erzeugt jedes
eine zusätzliche Leerzeile. Statt das Markup auf allen Seiten anzufassen,
werden die Umbrüche in dieser Spalte ausgeblendet. */
body.ph footer .foot-col a + br{display:none}
body.ph footer .foot-col h4{margin-bottom:.7rem}
body.ph footer .foot-col > div a{display:inline}
/* Mehr Luft nach oben und zwischen den Spalten */
body.ph footer{padding-top:3.6rem}
body.ph footer .foot-grid{gap:2.6rem;padding-bottom:2.6rem}
body.ph footer .foot-bottom{padding-top:1.6rem}
/* Der Knopf war Champagner auf Champagner-Schrift — praktisch unlesbar */
body.ph footer .btn-gold{
background:var(--ph-cream);color:#151515;border:none;box-shadow:none;font-weight:700;
}
body.ph footer .btn-gold:hover{background:#fff;color:#000}
body.ph footer .foot-brand .btn-gold{margin:1rem auto 0}
/* =========================================================
Bewertung — Kennzahlen prominent, Verweis zur Quelle
========================================================= */
.ph-rating{background:var(--ph-bg-alt);padding:clamp(3rem,6vw,4.4rem) 0}
.ph-rating .rt-box{
display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3.4rem);
align-items:center;background:#fff;border:1px solid var(--ph-line);
border-radius:20px;padding:clamp(1.6rem,3.5vw,2.6rem);
box-shadow:0 14px 44px rgba(21,21,21,.07);
}
.ph-rating .rt-links{text-align:center;padding-right:clamp(1rem,3vw,2.4rem);border-right:1px solid var(--ph-line)}
.ph-rating .rt-wert{
font-family:var(--ph-head);font-size:clamp(3.2rem,7vw,4.4rem);font-weight:700;
line-height:1;color:var(--ph-ink);font-variant-numeric:tabular-nums;
}
.ph-rating .rt-wert small{display:block;font-size:.9rem;font-weight:500;color:var(--ph-muted);margin-top:.35rem;letter-spacing:.04em}
.ph-rating .rt-sterne{display:flex;gap:.18rem;justify-content:center;margin:.7rem 0 .5rem}
.ph-rating .rt-star{width:22px;height:22px;display:block}
.ph-rating .rt-star svg{width:100%;height:100%}
.ph-rating .rt-star.v svg{fill:#E0B23C}
.ph-rating .rt-star.h svg{fill:url(#halb)}
.ph-rating .rt-star.l svg{fill:#E4E1D8}
.ph-rating .rt-anzahl{font-size:.9rem;color:var(--ph-muted);letter-spacing:.02em}
.ph-rating .rt-rechts h2{
font-family:var(--ph-head);font-size:clamp(1.5rem,3.2vw,2.1rem);
color:var(--ph-ink);margin:0 0 .6rem;line-height:1.2;
}
.ph-rating .rt-rechts p{color:var(--ph-body);line-height:1.7;margin:0 0 1.3rem;max-width:52ch}
.ph-rating .rt-link{
display:inline-flex;align-items:center;gap:.5rem;
font-weight:700;font-size:.98rem;text-decoration:none;
padding:.8rem 1.5rem;border-radius:999px;
background:var(--ph-dark);color:var(--ph-cream);
transition:background .18s,transform .18s;
}
.ph-rating .rt-link svg{width:16px;height:16px}
@media (hover: hover) and (pointer: fine){
.ph-rating .rt-link:hover{background:#000;transform:translateY(-1px)}
}
@media(max-width:760px){
.ph-rating .rt-box{grid-template-columns:1fr;text-align:center}
.ph-rating .rt-links{border-right:none;border-bottom:1px solid var(--ph-line);padding:0 0 1.4rem}
.ph-rating .rt-rechts p{margin-left:auto;margin-right:auto}
}
/* =========================================================
Bewertungsformular (Seite /bewerten)
========================================================= */
.ph-book .rv-karte{
max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--r-fein);
border-radius:18px;padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 12px 38px rgba(16,32,32,.07);
}
.ph-book .rv-termin{
background:var(--f-zart);border:1px solid var(--r-fein);border-radius:12px;
padding:.9rem 1.1rem;margin-bottom:1.6rem;
}
.ph-book .rv-termin strong{display:block;color:var(--t-1);font-size:1rem;line-height:1.35}
.ph-book .rv-termin span{display:block;margin-top:.2rem;font-size:.88rem;color:var(--t-2)}
.ph-book .rv-label{
display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--t-2);margin:1.2rem 0 .5rem;
}
.ph-book .rv-label small{text-transform:none;letter-spacing:0;color:var(--t-3)}
.ph-book .rv-sterne{display:flex;gap:.4rem}
.ph-book .rv-stern{
width:52px;height:52px;padding:0;border:none;background:none;cursor:pointer;
color:#E4E1D8;transition:color .15s,transform .12s;
}
.ph-book .rv-stern svg{width:100%;height:100%;fill:currentColor}
.ph-book .rv-stern.an{color:#E0B23C}
.ph-book .rv-stern:active{transform:scale(.92)}
.ph-book .rv-wertung{margin:.5rem 0 0;font-size:.92rem;color:var(--t-2);min-height:1.3em}
.ph-book .rv-karte textarea,.ph-book .rv-karte input[type=text]{
width:100%;padding:.85rem 1rem;border-radius:12px;font:inherit;font-size:1rem;
background:#fff;border:1px solid var(--r-fein);color:var(--t-1);resize:vertical;
}
.ph-book .rv-karte textarea:focus,.ph-book .rv-karte input[type=text]:focus{
outline:none;border-color:var(--a-tat);box-shadow:0 0 0 3px rgba(14,92,97,.12);
}
.ph-book .rv-senden{
width:100%;margin-top:1.6rem;padding:.95rem 1.4rem;border:none;border-radius:999px;
background:var(--a-tat);color:#fff;font:inherit;font-size:1.02rem;font-weight:700;cursor:pointer;
}
.ph-book .rv-senden:disabled{background:#DDE3E3;color:#8B9695;cursor:default}
.ph-book .rv-klein{margin:.9rem 0 0;font-size:.83rem;line-height:1.6;color:var(--t-3);text-align:center}
.ph-book .rv-hinweis,.ph-book .rv-laden{text-align:center;color:var(--t-2);padding:1.6rem 0}
.ph-book .rv-danke{text-align:center;padding:1rem 0}
.ph-book .rv-haken{
width:70px;height:70px;border-radius:50%;margin:0 auto 1.1rem;
display:grid;place-items:center;font-size:2rem;color:#fff;background:#1E7A46;
box-shadow:0 0 0 8px rgba(30,122,70,.14);
}
.ph-book .rv-danke h2{font-size:1.5rem;color:var(--t-1);margin:0 0 .4rem}
.ph-book .rv-danke p{color:var(--t-2);margin:0 0 1.4rem}
.ph-book .rv-zurueck{
display:inline-block;padding:.8rem 1.6rem;border-radius:999px;text-decoration:none;
background:var(--a-tat);color:#fff;font-weight:700;
}
/* =========================================================
Freigegebene Bewertungen unter den Kennzahlen
========================================================= */
.ph-rating .rt-stimmen{grid-column:1/-1;margin-top:clamp(1.4rem,3vw,2.2rem)}
.ph-rating .rt-stimmen:empty{display:none}
.ph-rating .rt-spur{
display:grid;grid-auto-flow:column;grid-auto-columns:min(360px,84vw);
gap:1rem;overflow-x:auto;padding:.2rem .2rem 1rem;
scroll-snap-type:x mandatory;scrollbar-width:thin;
}
/* Bei ein bis zwei Stimmen kein Karussell — sie sollen die Breite füllen */
.ph-rating .rt-spur.wenig{
grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
grid-auto-columns:auto;overflow:visible;
}
.ph-rating .rt-karte{
scroll-snap-align:start;margin:0;
background:var(--ph-bg-alt);border:1px solid var(--ph-line);border-radius:16px;
padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;
}
.ph-rating .rt-k-kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.ph-rating .rt-k-sterne{letter-spacing:.12em;font-size:1rem;color:#E4E1D8}
.ph-rating .rt-k-sterne .st.an{color:#E0B23C}
.ph-rating .rt-q{
font-size:.7rem;letter-spacing:.06em;padding:.18rem .55rem;border-radius:99px;
border:1px solid var(--ph-line);color:var(--ph-muted);white-space:nowrap;
}
.ph-rating .rt-q.g{border-color:#C9D3E8;color:#4A6FA5;background:#F4F7FC}
.ph-rating .rt-q.e{border-color:#CFE0DE;color:#0E5C61;background:#F1F8F7}
.ph-rating .rt-karte blockquote{
margin:0;font-size:1rem;line-height:1.6;color:var(--ph-ink);
}
.ph-rating .rt-karte figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.15rem}
.ph-rating .rt-karte figcaption b{font-size:.94rem;color:var(--ph-ink)}
.ph-rating .rt-karte figcaption span{font-size:.8rem;color:var(--ph-muted)}
.ph-rating .rt-antwort{
margin-top:.3rem;padding:.8rem .95rem;border-radius:12px;
background:#fff;border:1px solid var(--ph-line);border-left:3px solid #0E5C61;
font-size:.9rem;line-height:1.6;color:var(--ph-body);
}
.ph-rating .rt-antwort b{
display:block;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
color:#0E5C61;margin-bottom:.25rem;
}
/* =========================================================
Bewertungsformular (Seite /bewerten)
========================================================= */
.ph-book .rv-karte{
max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--r-fein);
border-radius:18px;padding:clamp(1.6rem,4vw,2.4rem);box-shadow:0 12px 38px rgba(16,32,32,.07);
}
.ph-book .rv-termin{
background:var(--f-zart);border:1px solid var(--r-fein);border-radius:12px;
padding:.9rem 1.1rem;margin-bottom:1.6rem;
}
.ph-book .rv-termin strong{display:block;color:var(--t-1);font-size:1rem;line-height:1.35}
.ph-book .rv-termin span{display:block;margin-top:.2rem;font-size:.88rem;color:var(--t-2)}
.ph-book .rv-label{
display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--t-2);margin:1.2rem 0 .5rem;
}
.ph-book .rv-label small{text-transform:none;letter-spacing:0;color:var(--t-3)}
.ph-book .rv-sterne{display:flex;gap:.4rem}
.ph-book .rv-stern{
width:52px;height:52px;padding:0;border:none;background:none;cursor:pointer;
color:#E4E1D8;transition:color .15s,transform .12s;
}
.ph-book .rv-stern svg{width:100%;height:100%;fill:currentColor}
.ph-book .rv-stern.an{color:#E0B23C}
.ph-book .rv-stern:active{transform:scale(.92)}
.ph-book .rv-wertung{margin:.5rem 0 0;font-size:.92rem;color:var(--t-2);min-height:1.3em}
.ph-book .rv-karte textarea,.ph-book .rv-karte input[type=text]{
width:100%;padding:.85rem 1rem;border-radius:12px;font:inherit;font-size:1rem;
background:#fff;border:1px solid var(--r-fein);color:var(--t-1);resize:vertical;
}
.ph-book .rv-karte textarea:focus,.ph-book .rv-karte input[type=text]:focus{
outline:none;border-color:var(--a-tat);box-shadow:0 0 0 3px rgba(14,92,97,.12);
}
.ph-book .rv-senden{
width:100%;margin-top:1.6rem;padding:.95rem 1.4rem;border:none;border-radius:999px;
background:var(--a-tat);color:#fff;font:inherit;font-size:1.02rem;font-weight:700;cursor:pointer;
}
.ph-book .rv-senden:disabled{background:#DDE3E3;color:#8B9695;cursor:default}
.ph-book .rv-klein{margin:.9rem 0 0;font-size:.83rem;line-height:1.6;color:var(--t-3);text-align:center}
.ph-book .rv-hinweis,.ph-book .rv-laden{text-align:center;color:var(--t-2);padding:1.6rem 0}
.ph-book .rv-danke{text-align:center;padding:1rem 0}
.ph-book .rv-haken{
width:70px;height:70px;border-radius:50%;margin:0 auto 1.1rem;
display:grid;place-items:center;font-size:2rem;color:#fff;background:#1E7A46;
box-shadow:0 0 0 8px rgba(30,122,70,.14);
}
.ph-book .rv-danke h2{font-size:1.5rem;color:var(--t-1);margin:0 0 .4rem}
.ph-book .rv-danke p{color:var(--t-2);margin:0 0 1.4rem}
.ph-book .rv-zurueck{
display:inline-block;padding:.8rem 1.6rem;border-radius:999px;text-decoration:none;
background:var(--a-tat);color:#fff;font-weight:700;
}
/* Freigegebene Bewertungen unter den Kennzahlen */
.ph-rating .rt-stimmen{grid-column:1/-1;margin-top:clamp(1.4rem,3vw,2.2rem)}
.ph-rating .rt-stimmen:empty{display:none}
.ph-rating .rt-spur{
display:flex;gap:1rem;overflow-x:auto;padding:.2rem .2rem 1rem;
scroll-snap-type:x mandatory;scrollbar-width:thin;
}
.ph-rating .rt-karte{
flex:0 0 min(340px,82vw);scroll-snap-align:start;margin:0;
background:var(--ph-bg-alt);border:1px solid var(--ph-line);border-radius:16px;
padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;
}
.ph-rating .rt-k-sterne{letter-spacing:.12em;font-size:.95rem;color:#E4E1D8}
.ph-rating .rt-k-sterne .st.an{color:#E0B23C}
.ph-rating .rt-karte blockquote{
margin:0;font-size:.98rem;line-height:1.65;color:var(--ph-body);
}
.ph-rating .rt-karte figcaption{
margin-top:auto;font-weight:700;color:var(--ph-ink);font-size:.94rem;
}
.ph-rating .rt-karte figcaption span{
display:block;font-weight:400;font-size:.82rem;color:var(--ph-muted);margin-top:.15rem;
}
.ph-rating .rt-antwort{
margin-top:.5rem;padding:.7rem .9rem;border-radius:12px;
background:#fff;border:1px solid var(--ph-line);font-size:.88rem;line-height:1.6;color:var(--ph-body);
}
.ph-rating .rt-antwort b{display:block;color:var(--ph-ink);font-size:.82rem;margin-bottom:.2rem}
/* Ausgebuchter Tag: anklickbar, aber klar als voll erkennbar */
body.ph .ph-book .cal-day.full{
border-color:#EBD9D7;background:#FDF6F5;cursor:pointer;
}
body.ph .ph-book .cal-day.full .dd{color:#A8807C}
body.ph .ph-book .cal-day.full.sel{background:var(--a-tat);border-color:var(--a-tat)}
body.ph .ph-book .cal-day.full.sel .dd{color:#fff}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .cal-day.full:hover{border-color:#D9A9A4}
}
/* Geschlossene Tage bleiben bewusst stumpf und ohne Zeiger */
body.ph .ph-book .cal-day.muted,body.ph .ph-book .cal-day:disabled{cursor:default}
/* Meldung im Zeitenbereich */
body.ph .ph-book .keine-zeiten{
text-align:center;padding:2.2rem 1.2rem;
background:var(--f-zart);border:1px dashed var(--r-klar);border-radius:14px;
}
body.ph .ph-book .keine-zeiten svg{width:34px;height:34px;color:var(--t-3);margin-bottom:.7rem}
body.ph .ph-book .kz-titel{margin:0 0 .35rem;font-size:1.02rem;font-weight:700;color:var(--t-1)}
body.ph .ph-book .kz-text{margin:0;font-size:.9rem;line-height:1.6;color:var(--t-2);max-width:34ch;margin-inline:auto}
/* =========================================================
Zahlungsauswahl im Buchungsformular
========================================================= */
body.ph .ph-book .pay-wahl{
margin:0 0 1.4rem;padding:1.1rem 1.2rem;border-radius:14px;
background:var(--f-zart);border:1px solid var(--r-fein);
}
body.ph .ph-book .pay-frage{
margin:0 0 .8rem;font-size:.9rem;font-weight:700;color:var(--t-1);
}
body.ph .ph-book .pay-frage.klein{font-size:.82rem;font-weight:600;color:var(--t-2);margin-top:.2rem}
body.ph .ph-book .pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
body.ph .ph-book .pay-opt{
display:flex;align-items:center;gap:.7rem;text-align:left;cursor:pointer;
padding:.9rem 1rem;border-radius:12px;font:inherit;
background:#fff;border:1.5px solid var(--r-fein);transition:all .16s;
}
body.ph .ph-book .pay-opt.an{background:var(--a-wahl);border-color:var(--a-tat)}
body.ph .ph-book .pay-ico{font-size:1.3rem;flex:none;line-height:1}
body.ph .ph-book .pay-txt{display:flex;flex-direction:column;min-width:0}
body.ph .ph-book .pay-txt b{font-size:.92rem;color:var(--t-1);line-height:1.3}
body.ph .ph-book .pay-txt small{font-size:.78rem;color:var(--t-2);margin-top:.15rem}
body.ph .ph-book .pay-arten{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--r-fein)}
body.ph .ph-book .pay-art-liste{display:flex;flex-wrap:wrap;gap:.5rem}
body.ph .ph-book .pay-art{
display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;font:inherit;
font-size:.86rem;font-weight:600;padding:.6rem 1rem;border-radius:999px;
background:#fff;border:1.5px solid var(--r-fein);color:var(--t-1);transition:all .16s;
}
body.ph .ph-book .pay-art.an{background:var(--a-wahl);border-color:var(--a-tat)}
body.ph .ph-book .pa-sym{font-size:1rem;line-height:1}
@media(max-width:620px){
body.ph .ph-book .pay-opts{grid-template-columns:1fr}
}
/* =========================================================
Kategorie-Kacheln: acht Farben im Wechsel statt einheitlichem Grau.
Jede Kategorie bekommt dauerhaft dieselbe Farbe, dadurch findet man
sich beim zweiten Besuch schneller zurecht.
========================================================= */
body.ph .ph-book .sp-cat{
position:relative;overflow:hidden;
border:1.5px solid var(--r-fein);background:#fff;
transition:transform .16s,box-shadow .18s,border-color .16s;
}
body.ph .ph-book .sp-cat::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
background:var(--kf,#0E5C61);opacity:.85;transition:width .18s,opacity .18s;
}
body.ph .ph-book .sp-cat .k-name{position:relative;transition:color .16s}
body.ph .ph-book .sp-cat .k-arrow{color:var(--kf,#0E5C61);transition:transform .18s}
@media (hover: hover) and (pointer: fine){
body.ph .ph-book .sp-cat:hover{
transform:translateY(-2px);
border-color:var(--kf,#0E5C61);
box-shadow:0 10px 26px color-mix(in srgb, var(--kf,#0E5C61) 22%, transparent);
}
body.ph .ph-book .sp-cat:hover::before{width:100%;opacity:.10}
body.ph .ph-book .sp-cat:hover .k-name{color:var(--kf,#0E5C61)}
body.ph .ph-book .sp-cat:hover .k-arrow{transform:translateX(3px)}
}
body.ph .ph-book .sp-cat:active{transform:translateY(0) scale(.99)}
/* Die acht Töne — kräftig genug, um zu wirken, dunkel genug für Kontrast */
body.ph .ph-book .sp-cat.f0{--kf:#0E5C61} /* Petrol */
body.ph .ph-book .sp-cat.f1{--kf:#8E4A7D} /* Beere */
body.ph .ph-book .sp-cat.f2{--kf:#B5651D} /* Kupfer */
body.ph .ph-book .sp-cat.f3{--kf:#2F6B3F} /* Salbei */
body.ph .ph-book .sp-cat.f4{--kf:#3D5A98} /* Indigo */
body.ph .ph-book .sp-cat.f5{--kf:#A8423C} /* Terrakotta */
body.ph .ph-book .sp-cat.f6{--kf:#6B5CA5} /* Lavendel */
body.ph .ph-book .sp-cat.f7{--kf:#94722A} /* Ocker */
/* Ohne color-mix (ältere Browser) genügt ein neutraler Schatten */
@supports not (background: color-mix(in srgb, red 10%, blue)){
body.ph .ph-book .sp-cat:hover{box-shadow:0 10px 26px rgba(16,32,32,.14)}
}
/* =========================================================
Schrittkette: erledigte Schritte in Grün
Der Fortschritt soll sichtbar belohnt werden — grün heißt „geschafft",
Petrol heißt „hier bist du", grau heißt „kommt noch".
========================================================= */
@keyframes stGeschafft{
0%{transform:scale(.7)}
60%{transform:scale(1.14)}
100%{transform:scale(1)}
}
/* Die Linie bis zum aktuellen Schritt füllt sich mit */
body.ph .ph-book .stepper .s.done + .ln,
body.ph .ph-book .stepper .ln.voll{background:#1E7A46;opacity:.55}
/* Der aktive Schritt bekommt einen ruhigen Puls, damit klar ist, wo man steht */
body.ph .ph-book .stepper .s.active .b{
box-shadow:0 0 0 4px rgba(14,92,97,.14);
}
/* Der Weiter-Knopf wirkt einladender, sobald alles ausgefüllt ist */
body.ph .ph-book .wz-next:not(:disabled){
box-shadow:0 6px 18px rgba(30,122,70,.28);
}
body.ph .ph-book .wz-next:not(:disabled):hover{
box-shadow:0 8px 22px rgba(30,122,70,.36);transform:translateY(-1px);
}
body.ph .ph-book .wz-next{transition:background .16s,box-shadow .18s,transform .14s}
/* „Kategorien" statt „Zurück" — schmaler, damit der Name mehr Platz hat */
body.ph .ph-book .sp-head-cat .sp-back .b-txt{font-size:.85rem}
/* Verifiziert-Zeichen an der Bewertung */
.ph-rating .rt-q.v{
display:inline-flex;align-items:center;gap:.28rem;
border-color:#BFE0CE;color:#1E7A46;background:#F1F9F4;font-weight:700;
}
.ph-rating .rt-q.v svg{width:11px;height:11px}
/* =========================================================
Schrittkette — endgültige Fassung
Zuvor lagen Zahl und Haken übereinander, weil mehrere Regeln
aus verschiedenen Durchgängen gleichzeitig griffen.
========================================================= */
body.ph .ph-book .stepper .s .b{
position:relative;width:30px;height:30px;border-radius:50%;
display:inline-grid;place-items:center;flex:none;
font-size:.85rem;font-weight:700;line-height:1;
background:#fff;border:1.5px solid var(--r-fein);color:var(--t-3);
transition:background .28s,border-color .28s,color .28s,box-shadow .28s;
}
/* Erledigt: Die Zahl verschwindet vollständig, der Haken tritt an ihre Stelle */
body.ph .ph-book .stepper .s.done .b{
background:#1E7A46;border-color:#1E7A46;color:transparent;
animation:stGeschafft .42s cubic-bezier(.2,.9,.28,1.06);
}
body.ph .ph-book .stepper .s.done .b::after{
content:"";position:absolute;inset:0;
background:no-repeat center/13px 13px
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* Aktiv: Petrol mit Ring */
body.ph .ph-book .stepper .s.active .b{
background:var(--a-tat);border-color:var(--a-tat);color:#fff;
box-shadow:0 0 0 4px rgba(14,92,97,.14);
}
body.ph .ph-book .stepper .s.active{color:var(--t-1);font-weight:700}
body.ph .ph-book .stepper .s.done{color:var(--t-2)}
/* Storno-Seite: Telefonnummer für Kunden, die nicht mehr selbst ändern können */
.st-hilfe{text-align:center;padding:0 0 2.5rem}
.st-hilfe p{font-size:.94rem;color:#6b7472;margin:0}
.st-hilfe a,a.st-tel{color:#0E5C61;font-weight:600;text-decoration:none;
border-bottom:1px solid rgba(14,92,97,.35);white-space:nowrap}
.st-hilfe a:hover,a.st-tel:hover{border-bottom-color:#0E5C61}
/* „Beliebt“ in der Preisliste der Startseite */
.ph-price-list .ph-top{
display:inline-block;margin-left:.5rem;padding:.08rem .45rem;border-radius:999px;
background:rgba(14,92,97,.1);border:1px solid rgba(14,92,97,.3);color:#0E5C61;
font-size:.66rem;font-weight:700;letter-spacing:.02em;vertical-align:1px;white-space:nowrap;
}
.ph-price-list tr.ph-fav{background:rgba(14,92,97,.045)}
.ph-price-list tr.ph-fav .ph-n .n{font-weight:700}
@media(max-width:640px){ .ph-price-list .ph-top{display:block;margin:.2rem 0 0} }