/* Buchungsstrecke im Glas-Design, angelehnt an die 21st.dev Glass Calendar
   (ravikatiyar162). Uebernommen: die Glaskarte mit Weichzeichner, der grosse
   Monatsname mit Pfeilen, die waagerechte Tagesleiste und der farbige Kreis fuer
   den gewaehlten Tag. Farben auf Builderfy gebracht. Ohne Framework, damit es
   leicht bleibt und sich einbetten laesst. */

:root {
  --blau: #0038ff;
  --lime: #ccff00;
  --ink: #0b1020;
  --muted: #5b6472;
  --line: #e4e8f0;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* Weicher Farbraum als Buehne fuer die Glaskarte */
  background:
    radial-gradient(120% 90% at 15% 0%, #dfe6ff 0%, transparent 55%),
    radial-gradient(100% 80% at 90% 10%, #eaf7c8 0%, transparent 50%),
    linear-gradient(180deg, #f4f6fb 0%, #eef1f8 100%);
  background-attachment: fixed;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: clamp(.9rem, 2.5vw, 2rem); }

/* Glaskarte */
.glass {
  position: relative;
  border-radius: 1.75rem;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 30px 70px -35px rgba(11, 16, 32, .45);
}

/* Kopf */
.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(11, 16, 32, .07);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blau);
}
.badge svg { width: .85rem; height: .85rem; }
h1 { margin: .7rem 0 0; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; line-height: 1.12; }
.lead { margin: .35rem 0 0; color: var(--muted); font-size: .98rem; }

.facts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.fact {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem; border-radius: .8rem;
  background: rgba(255, 255, 255, .7); border: 1px solid rgba(11, 16, 32, .06);
  font-size: .85rem; color: var(--ink);
}
.fact svg { width: 1rem; height: 1rem; color: var(--blau); flex: 0 0 auto; }

/* Zweispaltig ab Tablet */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(1.2rem, 2.5vw, 1.8rem); }
@media (min-width: 62rem) { .grid { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.panel[hidden] { display: none !important; }

/* Monatszeile */
.monthbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.month { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; }
.month small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.nav { display: flex; gap: .4rem; }
.nav button {
  width: 2.2rem; height: 2.2rem; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(11, 16, 32, .08); background: rgba(255, 255, 255, .7); color: var(--ink);
  transition: background-color .15s ease, transform .15s ease;
}
.nav button:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.nav button:disabled { opacity: .35; cursor: not-allowed; }
.nav svg { width: 1.05rem; height: 1.05rem; }

/* Tagesleiste, waagerecht scrollbar wie im Vorbild */
.days { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.days::-webkit-scrollbar { height: 0; }
.days { scrollbar-width: none; }
.day {
  flex: 0 0 auto; width: 3.6rem; padding: .6rem .3rem .7rem; border-radius: 1.1rem;
  border: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; color: inherit;
  text-align: center; scroll-snap-align: center; transition: background-color .15s ease, transform .15s ease;
}
.day:hover:not(:disabled) { background: rgba(255, 255, 255, .8); transform: translateY(-2px); }
.day:disabled { opacity: .3; cursor: not-allowed; }
.day__wd { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .35rem; }
.day__n {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin: 0 auto; border-radius: 999px;
  font-size: 1.05rem; font-weight: 700; transition: background-color .15s ease, color .15s ease;
}
.day.is-selected .day__n { background: var(--blau); color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 56, 255, .8); }
.day.is-today .day__n { box-shadow: inset 0 0 0 1.5px rgba(0, 56, 255, .35); }

/* Uhrzeiten */
.section-title { margin: 1.4rem 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: .5rem; }
.slot {
  padding: .7rem .4rem; border-radius: .9rem; cursor: pointer; font: inherit; font-weight: 600;
  border: 1px solid rgba(11, 16, 32, .08); background: rgba(255, 255, 255, .72); color: var(--ink);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.slot:hover { transform: translateY(-2px); background: #fff; }
.slot.is-selected { background: var(--blau); border-color: var(--blau); color: #fff; }
.empty { padding: 1.4rem; border-radius: 1rem; background: rgba(255, 255, 255, .6); color: var(--muted); font-size: .92rem; text-align: center; }

/* Seitenspalte */
.side { border-radius: 1.3rem; padding: clamp(1rem, 2vw, 1.4rem); background: rgba(255, 255, 255, .72); border: 1px solid rgba(255, 255, 255, .9); }
.summary { display: flex; align-items: flex-start; gap: .7rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid rgba(11, 16, 32, .07); }
.summary svg { width: 1.2rem; height: 1.2rem; color: var(--blau); flex: 0 0 auto; margin-top: .15rem; }
.summary strong { display: block; font-size: 1rem; }
.summary span { font-size: .85rem; color: var(--muted); }

.field { margin-bottom: .75rem; }
.label { display: block; margin-bottom: .3rem; font-size: .84rem; font-weight: 600; }
.req { color: var(--blau); }
.input, .select, .textarea {
  width: 100%; padding: .7rem .8rem; border-radius: .7rem; font: inherit; font-size: .94rem;
  border: 1px solid rgba(11, 16, 32, .1); background: rgba(255, 255, 255, .85); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blau); background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 56, 255, .16);
}
.textarea { min-height: 4.6rem; resize: vertical; }
.row { display: grid; gap: .75rem; }
@media (min-width: 30rem) { .row { grid-template-columns: 1fr 1fr; } }

.consent { display: flex; gap: .55rem; align-items: flex-start; margin: .8rem 0 1rem; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.consent input { margin-top: .18rem; width: 1rem; height: 1rem; accent-color: var(--blau); flex: 0 0 auto; }
.consent a { color: var(--blau); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .85rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
  background: var(--lime); color: var(--ink); font-weight: 800; font-size: .98rem;
  box-shadow: 0 12px 28px -10px rgba(150, 200, 0, .6);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 1.05rem; height: 1.05rem; }
.btn--ghost { background: transparent; border: 1px solid rgba(11, 16, 32, .12); box-shadow: none; font-weight: 600; width: auto; padding: .55rem 1.1rem; font-size: .88rem; }

.note { padding: .8rem 1rem; border-radius: .8rem; font-size: .88rem; margin-bottom: .9rem; }
.note--err { background: rgba(220, 38, 38, .08); color: #991b1b; border: 1px solid rgba(220, 38, 38, .25); }

/* Bestätigung */
.done { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.done__icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; border-radius: 999px; display: grid; place-items: center; background: rgba(22, 163, 74, .14); color: #16a34a; }
.done__icon svg { width: 1.7rem; height: 1.7rem; }
.done h2 { margin: 0 0 .4rem; font-size: 1.35rem; }
.done p { color: var(--muted); margin: .25rem 0; }
.done .btn { width: auto; margin-top: 1.2rem; }

.skeleton { flex: 0 0 auto; width: 3.6rem; height: 4rem; border-radius: 1.1rem; background: linear-gradient(90deg, rgba(255,255,255,.5) 25%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.5) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.foot { margin-top: 1rem; font-size: .78rem; color: var(--muted); text-align: center; }

svg { stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke: currentColor; }

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