/* Umsatzfreunde Interview-Buchung — Heller Elfenbein-Look (Creme/Weiß + Gold), edel & klar.
   Rein visuell: gleiche Klassennamen & Struktur; Admin-Inline-Styles adaptieren über die Variablen. */
:root{
  --bg:#f4efe4; --panel:#ffffff; --panel2:#faf6ee; --panel3:#f2ecdf; --line:#e7dfcd;
  --ink:#211d16; --muted:#6d6558; --faint:#9a9184;
  --gold:#b0863a; --gold-soft:#caa04d; --gold-dim:#c9a04d1f; --gold-line:#c9a04d66;
  --white:#ffffff; --hair:rgba(0,0,0,.05); --hair-strong:rgba(0,0,0,.10);
  --ok:#4a9a58; --warn:#b8842c; --err:#c0503f;
  --radius:16px; --radius-sm:11px; --radius-pill:999px; --maxw:840px;
  --shadow:0 30px 70px -40px rgba(60,48,20,.4);
  --shadow-sm:0 14px 34px -22px rgba(60,48,20,.35);
  --serif:'Fraunces',Georgia,serif; --display:'Spectral',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(1100px 520px at 50% -260px, #fffaf0 0%, rgba(255,250,240,0) 60%),
    radial-gradient(900px 900px at 92% 120%, #efe7d6 0%, rgba(244,239,228,0) 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink); font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--gold); text-underline-offset:2px}
a:hover{color:#8f6a2a}
.wrap{max-width:var(--maxw); margin:0 auto; padding:30px 22px 72px}
::selection{background:var(--gold-dim); color:var(--ink)}

.top{display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:22px; padding-bottom:16px; position:relative}
.top::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--hair-strong), var(--gold-line) 45%, rgba(0,0,0,0) 100%)}
.brand{font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:.2px; color:var(--ink)}
.brand .dot{color:var(--gold)}
.claim{color:var(--muted); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase}

h1{font-family:var(--display); font-weight:600; font-size:2.15rem; line-height:1.12;
  letter-spacing:-.01em; margin:.5em 0 .25em; color:var(--ink)}
h2{font-family:var(--serif); font-weight:600; font-size:1.22rem; margin:1.7em 0 .55em; color:var(--ink)}
.lead{color:var(--muted); font-size:1.05rem; max-width:56ch; line-height:1.65}
.lead strong{color:var(--ink); font-weight:600}

.callinfo{display:flex; flex-wrap:wrap; gap:12px 26px; margin:20px 0 6px}
.callinfo .ci{display:inline-flex; align-items:center; gap:11px; color:var(--muted); font-size:.96rem}
.callinfo .ci b{color:var(--ink); font-weight:600}
.callinfo .ci-ic{flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--gold-dim); border:1px solid var(--gold-line); color:var(--gold); font-size:.98rem}

.steps{display:flex; align-items:center; gap:0; margin:22px 0 28px; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:9px; color:var(--faint); font-size:.85rem; font-weight:500}
.step + .step{margin-left:6px}
.step + .step::before{content:""; width:26px; height:1px; background:var(--line); margin-right:6px}
.step .n{width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:.76rem; background:var(--panel);
  transition:.2s; font-variant-numeric:tabular-nums}
.step.active{color:var(--ink)}
.step.active .n{border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px var(--gold-dim)}
.step.done{color:var(--muted)}
.step.done .n{background:var(--gold); border-color:var(--gold); color:#fff}
.step.done + .step::before{background:var(--gold-line)}

.panel{background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:var(--shadow-sm)}
.panel + .panel{margin-top:18px}

.days{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; margin:8px 0 20px;
  scrollbar-width:thin; scroll-snap-type:x proximity}
.day{flex:0 0 auto; min-width:94px; text-align:center; padding:14px 12px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--panel2);
  color:var(--ink); cursor:pointer; text-decoration:none; scroll-snap-align:start;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.day:hover{transform:translateY(-2px); border-color:var(--gold-line);
  box-shadow:0 12px 26px -18px rgba(60,48,20,.3)}
.day.sel{border-color:var(--gold); background:#fbf3e1;
  box-shadow:0 0 0 1px var(--gold-line), 0 14px 30px -20px rgba(176,134,58,.35)}
.day .wd{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.day.sel .wd{color:var(--gold)}
.day .num{font-family:var(--serif); font-size:1.2rem; margin-top:3px; font-variant-numeric:tabular-nums}
.day.sel .num{color:var(--ink)}
.day .free{font-size:.7rem; color:var(--gold); margin-top:3px}

.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(98px,1fr)); gap:11px; margin-top:10px}
.slot{border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel2); color:var(--ink);
  font-variant-numeric:tabular-nums; font-size:1.02rem; letter-spacing:.01em;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease}
.slot:hover{transform:translateY(-2px); border-color:var(--gold);
  box-shadow:0 12px 26px -18px rgba(176,134,58,.35)}
.slot form{margin:0}
.slot button{all:unset; display:block; width:100%; text-align:center; padding:13px 8px; cursor:pointer}
.slot button:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:8px}
.empty{color:var(--muted); padding:16px 0}

.field{margin:0 0 20px}
.field label{display:block; font-weight:500; margin-bottom:7px; color:var(--ink)}
.field .req{color:var(--gold)}
.field .sub{color:var(--muted); font-size:.85rem; margin:-3px 0 9px}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font:inherit; padding:12px 14px; resize:vertical; transition:border-color .15s, box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-dim)}
textarea{min-height:82px; line-height:1.55}
.section-block{margin:28px 0}
.section-block > .h{font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); margin-bottom:4px}
.section-block > .i{color:var(--muted); font-size:.9rem; margin-bottom:14px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Fortschritt beim Ausfüllen — klebt oben; Antworten werden clientseitig autogespeichert */
.progress{position:sticky; top:10px; z-index:5; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 14px; margin:0 0 18px; box-shadow:var(--shadow-sm)}
.progress-bar{height:7px; border-radius:999px; background:var(--panel3); overflow:hidden}
.progress-bar span{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold)); transition:width .25s ease}
.progress-tx{margin-top:8px; font-size:.82rem; color:var(--muted); font-variant-numeric:tabular-nums}
.progress-tx b{color:var(--ink); font-weight:600}

.field.invalid label{color:var(--err)}
.field.invalid input,.field.invalid textarea{border-color:var(--err); box-shadow:0 0 0 3px #c0503f22}
.field.invalid input:focus,.field.invalid textarea:focus{box-shadow:0 0 0 3px #c0503f44}
.miss{display:block; color:var(--err); font-size:.82rem; margin-top:6px; font-weight:500}
.field{scroll-margin-top:84px}

.btn{display:inline-block; background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  color:#fff; border:none; border-radius:var(--radius-sm); font:inherit; font-weight:600;
  padding:13px 24px; cursor:pointer; text-decoration:none; letter-spacing:.01em;
  box-shadow:0 12px 26px -16px rgba(176,134,58,.7);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); filter:brightness(1.04)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{border-color:var(--gold); background:var(--gold-dim)}
.btn.block{display:block; width:100%; text-align:center; font-size:1.05rem; padding:15px 24px; margin-top:8px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.note{border:1px solid var(--line); border-left:2px solid var(--gold); background:#fbf7ef;
  border-radius:var(--radius-sm); padding:13px 16px; color:var(--muted); font-size:.92rem; margin:16px 0}
.flash{border-radius:var(--radius-sm); padding:13px 16px; margin:16px 0}
.flash.warn{background:#fbf1da; border:1px solid var(--warn); color:#7a5a1c}
.flash.err{background:#fbe8e4; border:1px solid var(--err); color:#8f3527}
.pill{display:inline-block; background:var(--gold-dim); border:1px solid var(--gold-line); color:var(--gold);
  border-radius:var(--radius-pill); padding:5px 13px; font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums}

.hero-img{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); display:block; box-shadow:var(--shadow)}
.thanks h1{font-size:2.3rem; margin-top:28px}
.nextsteps{list-style:none; padding:0; margin:18px 0 0}
.nextsteps li{display:flex; gap:13px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.nextsteps li:first-child{border-top:none}
.nextsteps .ic{flex:0 0 auto; width:27px; height:27px; border-radius:50%; background:var(--gold-dim);
  border:1px solid var(--gold-line); color:var(--gold); display:grid; place-items:center; font-size:.9rem}
.nextsteps .tx b{color:var(--ink)}
.nextsteps .tx{color:var(--muted); font-size:.95rem}

.foot{color:var(--faint); font-size:.82rem; margin-top:48px; padding-top:20px; text-align:center; line-height:1.9;
  border-top:1px solid var(--line)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--gold)}

@media(max-width:560px){ .wrap{padding:22px 15px 52px} h1{font-size:1.6rem} .panel{padding:20px} .step + .step::before{width:16px} }

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  .day:hover,.slot:hover,.btn:hover{transform:none}
}