/* ————— Stadtfriseur Geesthacht · Interaktive Beratung ————— */
/* Premium-Monochrome: Jost (UI) + Oswald (Labels), Gold-Akzent für Deals */

:root{
  --white:#ffffff;
  --soft:#fafaf8;
  --ink:#191919;
  --muted:#8b877e;
  --hairline:#e6e3dd;
  --gold:#b08d4f;
  --gold-soft:#f6efe2;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --caps:'Oswald','Jost',sans-serif;
  --summary-w:392px;
  --topbar-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--soft);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;user-select:none}
input,select{font:inherit;color:inherit}

#app{height:100dvh;display:flex;flex-direction:column}

/* ————— Topbar ————— */
.topbar{
  height:var(--topbar-h);
  flex:0 0 var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--hairline);
  background:var(--white);
}
.brand{display:flex;align-items:center;gap:18px;min-width:0}
.brand-logo{height:20px;width:auto;display:block}
.brand-sub{
  font-family:var(--caps);font-weight:300;
  font-size:11px;text-transform:uppercase;letter-spacing:.28em;
  color:var(--muted);white-space:nowrap;
  border-left:1px solid var(--hairline);padding-left:18px;
}
.topbar-actions{display:flex;align-items:center;gap:10px}
.demo-tag{
  font-family:var(--caps);font-size:10px;font-weight:400;
  text-transform:uppercase;letter-spacing:.24em;
  color:var(--gold);border:1px solid var(--gold);
  padding:5px 10px;
}
.hbtn{
  font-family:var(--caps);font-weight:400;
  font-size:12px;text-transform:uppercase;letter-spacing:.18em;
  border:1px solid var(--ink);padding:10px 16px;
  transition:background .18s ease,color .18s ease,transform .1s ease;
}
.hbtn:active{transform:scale(.96)}
.hbtn--solid,.hbtn[aria-pressed="true"]{background:var(--ink);color:var(--white)}

/* ————— Layout ————— */
.main{flex:1;display:flex;min-height:0}
.selection{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:var(--soft)}

/* ————— Kategorie-Stepper ————— */
.tabs{
  flex:0 0 auto;display:flex;
  background:var(--white);
  border-bottom:1px solid var(--hairline);
}
.tab{
  flex:1;position:relative;
  padding:18px 8px 16px;
  font-family:var(--caps);font-weight:400;
  font-size:13px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);opacity:.35;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:opacity .2s ease;
}
.tab + .tab{border-left:1px solid var(--hairline)}
.tab .tab-num{font-weight:300;font-size:11px;color:var(--muted);letter-spacing:.1em}
.tab.active{opacity:1}
.tab.active::after{
  content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--ink);
}
.tab.done .tab-num{color:var(--gold)}
.tab .tab-done{
  display:none;width:15px;height:15px;
}
.tab.done .tab-done{display:inline-block}
.tab-count{
  font-family:var(--sans);font-size:10px;font-weight:500;
  min-width:19px;height:19px;line-height:19px;text-align:center;
  border-radius:50%;background:var(--ink);color:var(--white);
}
.tab.flash{animation:tabflash .9s ease}
@keyframes tabflash{
  0%,60%{background:var(--gold-soft);opacity:1}
  100%{background:transparent}
}

/* ————— Edit-Hinweisleiste ————— */
.editbar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 28px;
  border-bottom:1px dashed var(--gold);
  background:var(--gold-soft);
}
.editbar p{font-size:14px;font-weight:300;color:var(--ink);flex:1;line-height:1.4}

/* ————— Kacheln ————— */
.tiles{
  flex:1;overflow-y:auto;
  padding:24px 28px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  align-content:start;
}
.tile{
  position:relative;
  border:1px solid var(--hairline);
  background:var(--white);
  min-height:148px;
  padding:20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .2s ease,color .2s ease;
}
.tile:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 10px 24px rgba(25,25,25,.07)}
.tile:active{transform:scale(.98)}
.tile-name{font-size:20px;font-weight:500;letter-spacing:.01em;line-height:1.2}
.tile-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.tile-time{
  font-family:var(--caps);font-weight:300;
  font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;
}
.tile-price{font-size:26px;font-weight:300;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.tile-price small{font-size:15px;font-weight:400}

/* Deal-Hinweis / Ribbon */
.tile-dealnote{
  font-size:12.5px;font-weight:400;color:var(--gold);
  display:flex;align-items:center;gap:6px;
}
.tile-dealnote::before{content:"";width:14px;height:1px;background:var(--gold)}
.tile-ribbon{
  position:absolute;top:0;right:0;
  background:var(--gold);color:var(--white);
  font-family:var(--caps);font-size:10px;font-weight:400;
  text-transform:uppercase;letter-spacing:.16em;
  padding:5px 9px;
}

/* Ausgewählt */
.tile.selected{background:var(--ink);color:var(--white);border-color:var(--ink)}
.tile.selected:hover{box-shadow:0 10px 24px rgba(25,25,25,.18)}
.tile.selected .tile-time{color:#9d998f}
.tile.selected .tile-dealnote{color:#d8c49a}
.tile.selected .tile-dealnote::before{background:#d8c49a}
.tile.selected .tile-ribbon{background:var(--white);color:var(--gold)}
.tile-check{
  position:absolute;top:14px;right:14px;
  width:20px;height:20px;display:none;
}
.tile.selected .tile-check{display:block}
.tile.selected .tile-ribbon ~ .tile-check{top:34px}

/* Nicht kombinierbar */
.tile.disabled{
  opacity:.38;pointer-events:auto;cursor:not-allowed;
  background:var(--soft);
}
.tile.disabled:hover{transform:none;border-color:var(--hairline);box-shadow:none}
.tile-excl{
  font-size:11.5px;font-weight:400;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;font-family:var(--caps);
}

/* Kachel im Bearbeitungsmodus */
.tile.editing{cursor:default;min-height:182px}
.tile.editing:hover{transform:none;box-shadow:none;border-color:var(--hairline)}
.tile input{
  width:100%;
  border:0;border-bottom:1px solid var(--hairline);
  background:transparent;
  padding:4px 0;
  font-size:16px;font-weight:400;
}
.tile input:focus{outline:none;border-bottom-color:var(--gold)}
.tile .frow{display:flex;gap:12px}
.tile .frow label{
  flex:1;font-family:var(--caps);font-weight:300;
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.tile .frow input{font-variant-numeric:tabular-nums}
.tile-del{
  position:absolute;top:0;right:0;
  width:32px;height:32px;
  background:var(--ink);color:var(--white);
  font-size:16px;line-height:32px;text-align:center;
}

.addrow{flex:0 0 auto;padding:0 28px 20px}
.addbtn{
  width:100%;border:1px dashed var(--muted);padding:16px;
  font-family:var(--caps);font-weight:300;
  font-size:13px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
  transition:color .15s,border-color .15s;
}
.addbtn:hover{color:var(--ink);border-color:var(--ink)}

/* ————— Deal-Editor ————— */
.dealedit{
  flex:0 0 auto;max-height:44%;
  overflow-y:auto;
  border-top:1px solid var(--hairline);
  background:var(--white);
  padding:18px 28px 24px;
}
.dealedit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dealedit-head h2{
  font-family:var(--caps);font-weight:400;
  font-size:13px;text-transform:uppercase;letter-spacing:.22em;
}
.dealrow{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--hairline);
}
.dealrow label{
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--caps);font-weight:300;
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.dealrow select,.dealrow input{
  border:0;border-bottom:1px solid var(--hairline);
  background:var(--white);padding:6px 2px;font-size:15px;font-weight:400;
  min-width:170px;
}
.dealrow input{width:80px;min-width:80px;font-variant-numeric:tabular-nums}
.dealrow select:focus,.dealrow input:focus{outline:none;border-bottom-color:var(--gold)}
.dealrow .deal-del{
  width:32px;height:32px;border:1px solid var(--hairline);
  font-size:15px;line-height:30px;text-align:center;
}
.dealrow .deal-del:active{background:var(--ink);color:var(--white)}

/* ————— Zusammenfassung ————— */
.summary{
  flex:0 0 var(--summary-w);
  width:var(--summary-w);
  border-left:1px solid var(--hairline);
  background:var(--white);
  display:flex;flex-direction:column;
  min-height:0;
}
.summary-head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;
  border-bottom:1px solid var(--hairline);
  font-family:var(--caps);font-weight:400;
  font-size:13px;text-transform:uppercase;letter-spacing:.24em;
  text-align:left;width:100%;
}
.summary-count{
  min-width:26px;height:26px;line-height:26px;text-align:center;
  border:1px solid var(--ink);border-radius:50%;
  font-family:var(--sans);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;
}
.summary-body{flex:1;display:flex;flex-direction:column;min-height:0}
.summary-list{flex:1;overflow-y:auto;padding:6px 0}
.summary-empty{padding:24px;font-size:14.5px;font-weight:300;color:var(--muted);line-height:1.55}

.sline{
  display:flex;align-items:baseline;gap:10px;
  padding:14px 24px;
  border-bottom:1px solid var(--hairline);
  animation:sline-in .3s cubic-bezier(.16,1,.3,1);
}
@keyframes sline-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sline-name{flex:1;font-size:16px;font-weight:500;line-height:1.25}
.sline-sub{display:block;font-size:12px;font-weight:300;color:var(--muted);margin-top:2px}
.sline-time{
  font-family:var(--caps);font-weight:300;
  font-size:10.5px;color:var(--muted);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.1em;
}
.sline-price{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.sline-was{
  font-size:13px;color:var(--muted);text-decoration:line-through;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sline-deal{
  font-family:var(--caps);font-size:9px;font-weight:400;letter-spacing:.14em;
  color:var(--gold);border:1px solid var(--gold);
  padding:2px 6px;text-transform:uppercase;white-space:nowrap;
}
.sline-del{
  flex:0 0 auto;width:26px;height:26px;
  border:1px solid var(--hairline);font-size:13px;line-height:24px;text-align:center;
  color:var(--muted);
}
.sline-del:active{background:var(--ink);color:var(--white)}

/* Cross-Selling-Empfehlungen */
.hints{
  flex:0 0 auto;
  border-top:1px solid var(--hairline);
  background:var(--gold-soft);
  padding:14px 24px;
}
.hints-title{
  font-family:var(--caps);font-weight:400;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.22em;
  color:var(--gold);margin-bottom:8px;
}
.hint{
  display:block;
  font-size:13.5px;font-weight:300;line-height:1.4;color:var(--ink);
  padding:3px 0;
}
.hint b{font-weight:500;color:var(--gold);white-space:nowrap}

.summary-foot{flex:0 0 auto;border-top:1px solid var(--ink);padding:18px 24px 24px;background:var(--white)}
.srow{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--caps);font-weight:300;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;
  padding:5px 0;color:var(--muted);
}
.srow span:last-child{
  font-family:var(--sans);font-weight:500;font-size:15px;
  letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.srow--save span{color:var(--gold)!important}
.srow--save span:last-child{font-weight:600}

.total{margin-top:12px;display:flex;flex-direction:column;gap:4px}
.total-label{
  font-family:var(--caps);font-weight:300;
  font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--muted);
}
.total-value{display:flex;align-items:baseline;gap:8px}
.digits{
  display:flex;height:1em;overflow:hidden;
  font-size:clamp(58px,6.4vw,88px);
  font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
.digit-col{width:.58em;height:1em;overflow:hidden}
.digit-strip{
  display:flex;flex-direction:column;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.digit-strip span{display:block;height:1em;line-height:1}
.total-currency{font-size:clamp(28px,3vw,40px);font-weight:300;color:var(--muted)}

/* ————— Versteckter Bearbeiten-Zugang ————— */
.brand-logo{cursor:default;-webkit-user-select:none;user-select:none}
.hbtn.pulse{animation:fabpulse .6s ease}
@keyframes fabpulse{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}

/* ————— Kombinations-Dialog ————— */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(25,25,25,.45)}
.modal-panel{
  position:relative;background:var(--white);
  width:min(580px,94vw);max-height:86dvh;
  display:flex;flex-direction:column;
  border:1px solid var(--ink);
  animation:modal-in .28s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 24px;border-bottom:1px solid var(--hairline);
}
.modal-head h2{
  font-family:var(--caps);font-weight:400;
  font-size:14px;text-transform:uppercase;letter-spacing:.2em;
}
.modal-close{width:34px;height:34px;border:1px solid var(--hairline);font-size:18px;line-height:32px}
.modal-close:active{background:var(--ink);color:var(--white)}
.modal-sub{padding:14px 24px 0;font-size:13.5px;font-weight:300;color:var(--muted);line-height:1.5}
.modal-list{flex:1;overflow-y:auto;padding:6px 24px 12px}
.krow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--hairline);
}
.krow-name{font-size:16px;font-weight:500;line-height:1.2}
.krow-cat{
  display:block;font-family:var(--caps);font-weight:300;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.ktoggle{
  flex:0 0 auto;min-width:184px;text-align:center;
  font-family:var(--caps);font-weight:300;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--hairline);color:var(--muted);
  padding:10px 12px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.ktoggle.off{background:var(--ink);border-color:var(--ink);color:var(--white)}
.modal-foot{
  padding:16px 24px;border-top:1px solid var(--hairline);
  display:flex;justify-content:flex-end;
}

/* Kombi-Button in der Edit-Kachel */
.e-kombi{
  border:1px dashed var(--hairline);
  padding:9px 12px;text-align:left;
  font-family:var(--caps);font-weight:300;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  transition:border-color .15s ease;
}
.e-kombi:hover{border-color:var(--ink)}
.e-kombi b{color:var(--ink);font-weight:400}

/* ————— Toast (Deal aktiviert) ————— */
.toast{
  position:fixed;left:50%;bottom:34px;
  transform:translate(-50%,80px);
  background:var(--ink);color:var(--white);
  font-family:var(--caps);font-weight:300;
  font-size:13px;text-transform:uppercase;letter-spacing:.2em;
  padding:14px 26px;
  opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  z-index:60;white-space:nowrap;
}
.toast b{color:var(--gold);font-weight:400;margin-left:8px}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ————— Schmale Bildschirme / iPad Hochformat ————— */
@media (max-width:920px){
  :root{--summary-w:100%}
  .main{flex-direction:column}
  .brand-sub{display:none}
  .summary{
    position:fixed;left:0;right:0;bottom:0;
    width:auto;flex:none;
    border-left:0;border-top:1px solid var(--ink);
    max-height:72dvh;
    z-index:20;
    box-shadow:0 -14px 34px rgba(25,25,25,.14);
  }
  .summary-body{display:none}
  .summary.open .summary-body{display:flex;max-height:calc(72dvh - 60px)}
  .digits{font-size:46px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));padding:18px;padding-bottom:48dvh}
  .tab .tab-num{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}