:root{color-scheme:light;--ink:#182c24;--accent:#1e573e;--paper:#f7f6ef;--line:#dedfd3;--muted:#4d6258;--lime:#d6edb4;font-family:system-ui,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:var(--accent);text-underline-offset:.22em}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #689642;outline-offset:3px}.top{border-bottom:1px solid var(--line)}nav,main,footer{width:min(1120px,calc(100% - 36px));margin:auto}nav{display:flex;align-items:center;justify-content:space-between;min-height:76px}.brand{font-size:1.55rem;font-weight:850;letter-spacing:-.07em;text-decoration:none;color:var(--ink)}.brand span,h1 span,footer span{color:#508336}main{padding:42px 0 70px}footer{border-top:1px solid var(--line);padding:22px 0;font-weight:750}
h1,h2,p{margin:0 0 16px}h1{font-size:clamp(2.1rem,6vw,4.65rem);line-height:1.01;letter-spacing:-.065em}h2{font-size:1.28rem;letter-spacing:-.025em}p{line-height:1.55}.tag{color:var(--accent);font-size:.83rem;font-weight:750;letter-spacing:.05em}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:34px 0 58px}.hero p:not(.tag){max-width:42ch;font-size:1.1rem}.example{background:var(--lime);padding:clamp(20px,4vw,40px);border-radius:28px}.example h2{font-size:clamp(1.5rem,4vw,2.65rem)}.sample{padding:16px;background:#f9fff1;border-radius:12px;margin-top:12px;display:grid;gap:10px}.sample span,.muted{color:var(--muted)}.times{display:flex;gap:8px;flex-wrap:wrap}.times span{background:#e6f0d9;padding:7px 10px;border-radius:6px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--line);padding-top:24px}.steps p{color:var(--muted)}
.card{background:white;border:1px solid var(--line);border-radius:20px;padding:clamp(18px,4vw,30px);min-width:0}.narrow{max-width:640px;margin:0 auto 18px}.narrow h1,.heading h1{font-size:clamp(2rem,6vw,3.6rem)}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}form{display:grid;gap:12px;margin:14px 0}label{display:grid;gap:5px;font-weight:650;font-size:.91rem;margin-top:8px}input,select,button,.button{font:inherit;border-radius:8px;padding:10px 12px;min-height:44px}input,select{width:100%;min-width:0;border:1px solid #bdc9be;background:#fff;color:var(--ink)}input[readonly]{background:#f7f9f4}button,.button{background:var(--accent);color:white;font-weight:700;border:1px solid transparent;cursor:pointer;width:fit-content;text-decoration:none;display:inline-block}button:hover,.button:hover{filter:brightness(.92)}.secondary{background:#edf3e8;color:var(--accent)}[hidden]{display:none!important}.pair,.day{display:grid;grid-template-columns:1fr 1fr;gap:8px}.day{grid-template-columns:minmax(76px,1fr) repeat(2,minmax(0,1fr));align-items:center}.entry,.services a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.services{margin-bottom:18px}.services a{padding:12px;text-decoration:none}.services a:hover{background:#edf3e8}.entry form{flex-shrink:0;margin:0}.status{border-radius:8px;padding:12px;background:#e5f1d8}.error{background:#fce5de;color:#842817}summary{cursor:pointer;color:var(--accent);margin-top:14px}small{font-weight:600;color:var(--muted)}#qr img{width:164px;height:164px;display:block;margin:12px 0}.stats{display:flex;gap:18px;padding:8px 0}.stats strong{font-size:1.3rem}
@media(max-width:720px){.hero,.steps,.grid{grid-template-columns:1fr}.hero{padding-top:0;gap:26px}.heading{align-items:flex-start}main{padding-top:28px}.services a{align-items:flex-start;flex-direction:column}.entry{flex-wrap:wrap}}
.operator-heading{margin:20px 0}textarea{width:100%;font:inherit;border:1px solid #bdc9be;border-radius:8px;padding:10px 12px;resize:vertical}
.front-hero,.front-demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,68px);align-items:center}
.front-hero{padding:28px 0 76px}
.front-intro h1{font-family:Georgia,serif;font-weight:500;font-size:clamp(2.7rem,5.7vw,5.5rem);letter-spacing:-.07em;line-height:1;margin:18px 0 22px}
.front-intro h1 em{color:#496341;font-weight:500}
.front-label{font-size:.85rem;font-weight:700;color:#496341}
.front-lead{font-size:1.13rem;max-width:40ch;color:var(--muted)}
.front-actions,.sales-nav{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.sales-nav a{text-decoration:none;font-weight:650}
.front-actions .button span,.front-features .button span{margin-left:8px}
.front-demo-link{font-weight:700}
.front-price{margin:18px 0 0;font-weight:750}
.front-price span{font-size:.89rem;font-weight:500;color:var(--muted)}
.front-visual{position:relative;padding-bottom:45px}
.front-photo{min-height:clamp(240px,35vw,440px);border-radius:18px;background:#9fa78e url('salon-hero.jpg') center/cover no-repeat}
.front-booking{position:absolute;bottom:0;right:16px;width:min(350px,calc(100% - 32px));background:#fffef9;border:1px solid #e0dfd4;padding:20px;border-radius:14px;box-shadow:0 12px 30px #1a2a2424}
.front-booking h2{margin-bottom:10px}
.front-booking p:not(.front-label){display:flex;justify-content:space-between;gap:8px;font-size:.88rem;margin-bottom:12px}
.front-booking p span{white-space:nowrap;color:var(--muted)}
.front-times{display:flex;gap:8px;flex-wrap:wrap}
.front-times span{background:#edf1e7;border-radius:6px;padding:5px 9px;font-size:.86rem}
.front-section{border-top:1px solid var(--line);padding:40px 0;scroll-margin-top:16px}
.front-section h2{font-size:clamp(1.65rem,3.4vw,2.65rem);letter-spacing:-.045em;line-height:1.1}
.front-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding-left:22px;margin-bottom:0}
.front-steps li::marker{color:#496341;font-weight:800}
.front-steps h3{margin:0 0 8px}
.front-steps p,.front-demo>div:first-child>p:not(.front-label),.front-features dd{color:var(--muted)}
.front-demo-form{background:#e8ede0;padding:20px 24px;border-radius:14px}
.front-demo-form form{margin:0}
.front-demo-form .status{background:#fffef9}
.front-features dl{max-width:760px}
.front-features dl div{border-bottom:1px solid var(--line);padding:14px 0}
.front-features dt{font-weight:750;margin-bottom:4px}
.front-features dd{margin:0;line-height:1.55}
@media(max-width:720px){
    .front-hero,.front-demo,.front-steps{grid-template-columns:1fr}
    .front-hero{padding:8px 0 36px}
    .front-steps{gap:12px}
    .front-section{padding:28px 0}
    .sales-nav{display:none}
}

.operator-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.operator-metrics .card{padding:16px 20px}
.operator-metrics span,.operator-metrics strong{display:block}
.operator-metrics span{color:var(--muted)}
.operator-metrics strong{font-size:2rem;margin-top:4px}
.operator-list .heading h2{margin:0}
.operator-salon{padding:18px 0;border-top:1px solid var(--line);margin-top:16px}
.operator-salon-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 22px}
.operator-salon-row h3,.operator-salon-row p,.operator-salon-row form{margin:0}
.operator-salon-row p{overflow-wrap:anywhere}
.operator-badge{display:inline-block;padding:4px 9px;border-radius:6px;background:#f3ecdf}
.operator-badge.is-active{background:#e5f1d8;color:var(--accent)}
.operator-settings{margin-top:16px}
.operator-settings summary{font-weight:750;margin:0}
.operator-settings[open] summary{margin-bottom:12px}
@media(max-width:560px){.operator-metrics{grid-template-columns:1fr}.operator-salon-row{align-items:flex-start}}

.salon-tabs{width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;min-height:0;padding:8px;background:#ebece3;border-radius:12px;margin:0 0 22px}
.salon-tabs a{padding:10px 13px;border-radius:8px;text-decoration:none;font-weight:650}
.salon-tabs a[aria-current="page"]{background:white;color:var(--ink);box-shadow:0 1px 4px #182c2420}
.salon-overview{background:#e4ebdc;border-radius:18px;padding:clamp(22px,4vw,42px);margin-bottom:18px}
.salon-overview h2{font-size:clamp(1.55rem,3vw,2.5rem)}
.salon-panel{max-width:800px}

.salon-share{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px 24px}
.salon-share #qr img{margin:0;border-radius:8px}
.salon-share-actions{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:12px}
#copy-booking-status{margin:8px 0 0}
#copy-booking-status:empty{display:none}
.salon-appointment{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto}
@media(max-width:560px){
    .salon-share{grid-template-columns:1fr}
    .salon-appointment{grid-template-columns:minmax(0,1fr) auto}
    .salon-appointment time{grid-column:1/-1}
}

/* Schnittzeit visual system */
:root {
    --ink: #172820;
    --accent: #205640;
    --paper: #f8f6f0;
    --line: #dedfd6;
    --muted: #54635a;
    --lime: #dae8c7;
    --surface: #fffefa;
    --shadow: 0 12px 38px #182c240b;
}
body {font-family:"Inter",system-ui,sans-serif;line-height:1.5}
.top {background:var(--surface)}
.top nav {gap:16px}
.top nav>a:last-child:not(.brand) {font-weight:650;text-decoration:none}
.brand {font-size:1.65rem}
h2,h3 {line-height:1.2}
.card {background:var(--surface);box-shadow:var(--shadow);border-radius:16px}
button,.button {border-radius:9px;line-height:1.35;transition:background-color 140ms ease}
button:hover,.button:hover {filter:none;background:#174332}
button.secondary:hover,.button.secondary:hover {background:#e0e9d9}
input,select,textarea {border-color:#bcc8be}
input:focus,select:focus,textarea:focus {border-color:var(--accent)}
label {color:var(--ink)}
.status {border:1px solid #c4d7b5}
.status.error {border-color:#efc9bf}
footer {color:var(--muted)}
.front-intro h1 {font-family:"Instrument Serif",Georgia,serif}
.front-photo {border-radius:24px}
.front-booking {padding:clamp(14px,3vw,22px);border-radius:16px}
.front-demo-form {background:#e9efe2;border:1px solid #d5dfce;padding:clamp(16px,4vw,28px)}
.front-steps {list-style:none;counter-reset:salon-step;padding-left:0}
.front-steps li {counter-increment:salon-step;border-top:1px solid #b3c1ad;padding-top:14px}
.front-steps li::before {content:counter(salon-step,decimal-leading-zero);display:block;margin-bottom:10px;color:var(--accent);font-size:.85rem;font-weight:750;font-variant-numeric:tabular-nums}
.front-features dl {max-width:none}
.front-features dl div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 24px}
.flow-screen main {max-width:640px;padding-top:clamp(24px,5vw,64px)}
.flow-screen .card {padding:clamp(20px,5vw,36px)}
.flow-screen h1 {font-size:clamp(2rem,5vw,3rem);line-height:1.08}
.flow-screen form {gap:16px}
.flow-screen form button:not(.secondary) {width:100%;margin-top:4px}
.booking-screen .services {display:grid;gap:8px}
.booking-screen .services a {border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px}
.booking-screen .services a:hover,.booking-screen .services a[aria-current="true"] {background:#edf3e7;border-color:#a0b79b}
.booking-screen .services a span {color:var(--muted);font-size:.88rem}
.dashboard-screen {background:#f0f2ed}
.dashboard-screen main {padding-top:28px}
.dashboard-screen .heading h1 {font-size:clamp(1.9rem,4.8vw,3.05rem);letter-spacing:-.045em;margin-bottom:8px}
.dashboard-screen .heading .tag {margin-bottom:6px}
.dashboard-screen .heading form {margin:0}
.dashboard-screen .operator-metrics .card {box-shadow:none}
.dashboard-screen .operator-metrics strong {font-variant-numeric:tabular-nums}
.dashboard-screen .salon-tabs {background:var(--surface);border:1px solid var(--line)}
.dashboard-screen .salon-tabs a[aria-current="page"] {background:var(--accent);color:#fff;box-shadow:none}
.dashboard-screen .salon-tabs a:not([aria-current]):hover {background:#edf3e7}
.dashboard-screen .salon-overview {border:1px solid #cbd8c4}
.salon-appointment time {font-variant-numeric:tabular-nums;font-weight:650}
.operator-salon details {border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.operator-salon details summary {margin:0}
@media(max-width:560px) {
    .front-features dl div {grid-template-columns:1fr;gap:4px}
    .dashboard-screen .operator-metrics {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    .dashboard-screen .operator-metrics .card {padding:9px}
    .dashboard-screen .operator-metrics span {font-size:.76rem;line-height:1.25}
    .dashboard-screen .operator-metrics strong {font-size:1.5rem}
    .salon-tabs a {padding:8px 9px;font-size:.88rem}
    .flow-screen .day {grid-template-columns:1fr 1fr}
    .flow-screen .day span {grid-column:1/-1}
    .dashboard-screen .day {grid-template-columns:1fr 1fr}
    .dashboard-screen .day span {grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce) {
    button,.button {transition:none}
}

.catalog-intro{margin-bottom:20px}
.catalog-intro p{max-width:65ch;color:var(--muted)}
.catalog-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.catalog-template{padding:0;overflow:hidden}
.catalog-template-body{padding:16px}
.catalog-template-body a{display:grid;gap:3px;text-decoration:none;border-top:1px solid var(--line);padding:10px 0}
.catalog-template-body a:hover strong{text-decoration:underline}
.catalog-workspace{margin-top:18px}
.catalog-item-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.booking-category{margin-top:24px}
.booking-category h3{margin:10px 0}
.booking-category .catalog-photo{border-radius:10px}
#leistung-editor:target,#terminwahl:target{scroll-margin-top:20px}
.booking-heading{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px}
.salon-logo{display:block;width:auto;max-width:min(180px,100%);max-height:90px;object-fit:contain;margin-bottom:14px}
.theme-forest{--accent:#205640;--paper:#f8f6f0}
.theme-rose{--accent:#8b3b55;--paper:#fbf0f3}
.theme-ocean{--accent:#244e77;--paper:#eff5fb}
.theme-sand{--accent:#735023;--paper:#faf3e8}
.booking-screen .tag{color:var(--accent)}
.booking-screen button:hover,.booking-screen .button:hover{background:var(--accent);filter:brightness(.87)}
.booking-screen .services a:hover,.booking-screen .services a[aria-current="true"]{background:var(--paper);border-color:var(--accent)}
.booking-screen.layout-sharp .card,.booking-screen.layout-sharp .booking-heading,.booking-screen.layout-sharp .button,.booking-screen.layout-sharp button,.booking-screen.layout-sharp .services a{border-radius:3px}
.theme-options{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.theme-options legend{font-weight:700}
.theme-option{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 10px;border-radius:8px}
.theme-option input,.logo-remove input{width:18px;min-height:18px;margin:0;accent-color:var(--accent)}
.theme-swatch{width:15px;height:15px;border-radius:50%;background:var(--accent)}
.logo-remove{display:flex;align-items:center;gap:8px}
@media(max-width:720px){.catalog-templates{grid-template-columns:1fr}.catalog-template-body{padding:14px}}

.catalog-photo{display:block;width:100%;aspect-ratio:2.1;object-fit:cover;object-position:center 38%;background:#e8ebdf}

.salon-task {margin-bottom:20px;border-left:4px solid var(--accent)}
.salon-task > p,.manual-entry p {max-width:64ch;color:var(--muted)}
.manual-entry {border-top:1px solid var(--line);margin-top:22px;padding-top:8px;scroll-margin-top:18px}
.manual-entry form + form {border-top:1px solid var(--line);padding-top:18px}
.manual-entry h3,.manual-entry p {margin:0}
.template-action {font-size:.83rem;font-weight:700;color:var(--accent)}
.booking-selection {padding:10px 14px;background:var(--paper);border-radius:8px}

.preset-groups{display:grid;gap:12px;margin-bottom:20px}
.preset-group{padding:14px 20px}
.preset-group summary{display:flex;align-items:center;gap:14px;margin:0;font-size:1.15rem}
.preset-group summary::after{content:"+";margin-left:auto;font-weight:750}
.preset-group[open] summary::after{content:"−"}
.preset-group summary img{width:76px;aspect-ratio:1.5;border-radius:8px}
.preset-group summary small{display:block}
.preset-row{display:grid;grid-template-columns:minmax(140px,2fr) minmax(65px,.6fr) minmax(95px,.8fr) minmax(135px,1.1fr);gap:12px;align-items:end;padding-top:12px;border-top:1px solid var(--line)}
.preset-actions{display:flex;flex-wrap:wrap;gap:6px}
.preset-row:target{scroll-margin-top:16px}
@media(max-width:760px){.preset-row{grid-template-columns:1fr 1fr}.preset-row>div{grid-column:1/-1}}