/* Booking page. Rides on legal.css for the tokens, body, .wrap, topbar and footer, so the
   page is the same shell as Impressum, AGB and Datenschutz. Everything here is the picker.
   Two modes share one form: "termin" collects time windows, "nachricht" is a plain message
   and hides the calendar entirely, because a visitor who does not want a call should never
   be asked to fill in a calendar first. */

main{padding:44px 0 80px}
.eyebrow{font:700 12px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
h1{font:800 clamp(34px,6.4vw,52px)/1.12 var(--heading);letter-spacing:-.045em;margin:0 0 16px}
h1 em{font-style:normal;color:var(--orange)}
.lead{font:500 19px/1.6 var(--body);color:#d6d4cc;margin:0 0 22px;max-width:46ch}
@media(max-width:700px){.lead{font-size:17px}}

.ask{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:14px;padding:14px 16px;margin:0 0 34px}
.ask svg{flex:0 0 auto;color:var(--orange)}
.ask p{margin:0;font:600 15.5px/1.45 var(--body)}
.ask span{display:block;font-weight:450;color:var(--muted);font-size:14px;margin-top:2px}

/* Several blocks here set their own display, which beats the UA sheet's [hidden] rule.
   Without this the "Waehle 2 bis 4 Zeitfenster" box stayed on screen in message mode,
   which is the exact confusion the two modes exist to remove. */
[hidden]{display:none!important}
.sec{margin:0 0 26px}
.sech{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.sech h2{font:800 20px/1.2 var(--heading);letter-spacing:-.025em;margin:0}
.sech .opt{font:450 13px/1 var(--body);color:var(--muted)}

.card{background:var(--surface);border-radius:20px;border-top:3px solid var(--orange);padding:22px}
@media(max-width:700px){.card{padding:16px}}

.calbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.calbar strong{font:700 17px/1.2 var(--heading);letter-spacing:-.02em}
.nav{display:flex;gap:8px}
.nav button{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:#ffffff0a;color:var(--paper);cursor:pointer}
.nav button:disabled{opacity:.25;cursor:default}
.nav button:not(:disabled):hover{background:#f4770826;border-color:#f4770899}

/* The week runs Sunday to Saturday, so Monday to Friday sits dead centre with one weekend
   column on each side. Both weekend columns render but are never selectable. */
/* minmax(0,1fr) rather than 1fr: a plain 1fr track will not shrink below its
   min-content, and at 320 the button padding pushed the Saturday column 4px past
   the viewport. */
.dow,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dow{margin:0 0 8px}
.dow span{text-align:center;font:700 12px/1.5 var(--body);letter-spacing:.14em;color:var(--muted)}
.dow span.off{color:#55554f}
.grid button{min-height:48px;min-width:0;padding:0;border:1px solid transparent;border-radius:14px;background:#ffffff0d;color:var(--paper);font:600 17px/1 var(--body);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.grid button:hover:not(:disabled){background:#f4770826;border-color:#f4770866}
.grid button:disabled{background:transparent;color:#55554f;cursor:default}
.grid button.we:disabled{color:#46463f}
.grid button[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:700}
.grid .blank{visibility:hidden}
.grid button.has{position:relative}
.grid button.has:after{content:"";position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--orange)}
.grid button[aria-pressed=true].has:after{background:var(--ink)}
.hint{font:450 13px/1.5 var(--body);color:var(--muted);margin:12px 0 0}

.bands{display:grid;gap:10px}
@media(min-width:620px){.bands{grid-template-columns:repeat(3,1fr)}}
.band{text-align:left;border:1px solid var(--line);border-radius:14px;background:#ffffff0d;color:var(--paper);padding:14px 16px;cursor:pointer;font-family:var(--body);position:relative;transition:background .16s,border-color .16s}
.band:hover:not(:disabled){background:#f4770826;border-color:#f4770866}
.band[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.band:disabled{opacity:.3;cursor:default}
.band b{display:block;font-weight:700;font-size:16px}
.band i{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:2px}
.band[aria-pressed=true] i{color:#141413cc}
.band .mark{position:absolute;right:13px;top:13px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent}
.band[aria-pressed=true] .mark{background:var(--ink);border-color:var(--ink);color:var(--orange)}

.chosen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chosen li{background:var(--surface);border-radius:16px;border-left:3px solid var(--orange);padding:14px 14px 14px 16px;margin:0}
.chosen .top{display:flex;align-items:center;gap:12px}
.chosen .when{flex:1;min-width:0}
.chosen .d{font:700 16px/1.25 var(--heading);letter-spacing:-.02em}
.chosen .t{font:450 14px/1.4 var(--body);color:var(--muted);margin-top:2px}
.chosen .tools{display:flex;gap:6px;flex:0 0 auto}
.chosen .tools button{height:38px;border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--muted);font:600 13px/1 var(--body);cursor:pointer;padding:0 13px;display:grid;place-items:center}
.chosen .tools .rm{width:38px;padding:0}
.chosen .tools button:hover{background:#f4770826;border-color:#f4770866;color:var(--paper)}
.chosen .tools button[aria-expanded=true]{background:#f4770826;border-color:#f4770899;color:var(--paper)}
.chosen .tools .ed svg{display:none}
@media(max-width:479px){.chosen .tools .ed{width:38px;padding:0}.chosen .tools .ed span{display:none}.chosen .tools .ed svg{display:block}}
.adj{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.adj.open{display:flex}
.adj label{font:450 14px/1 var(--body);color:var(--muted)}
.adj .note{flex-basis:100%;font:450 12.5px/1.45 var(--body);color:var(--muted);margin:0}
.empty{font:450 15px/1.5 var(--body);color:var(--muted);border:1px dashed var(--line);border-radius:16px;padding:20px;text-align:center}
.tally{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;font:600 14px/1.4 var(--body)}
.pips{display:flex;gap:5px}
.pip{width:26px;height:5px;border-radius:3px;background:#ffffff1f}
.pip.on{background:var(--orange)}
.pip.need{box-shadow:inset 0 0 0 1px #f4770899}
.tally b{color:var(--orange)}
.tally.ok b{color:var(--green,#a5ce55)}
.tally span{color:var(--muted);font-weight:450}

select,input,textarea{font:450 16px/1.5 var(--body);color:var(--paper);background:#2a2926;border:1px solid var(--line);border-radius:12px;padding:12px 13px;width:100%}
select{width:auto;min-width:106px;-webkit-appearance:none;appearance:none;padding-right:36px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bdbdb4' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
 background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.fields{display:grid;gap:14px}
@media(min-width:620px){.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}}
.f label{display:block;font:600 14px/1.4 var(--body);color:var(--muted);margin:0 0 7px}
.f label em{font-style:normal;font-weight:450}
textarea{min-height:110px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.send{margin-top:22px;width:100%;min-height:56px;border:1px solid var(--orange);border-radius:100px;background:var(--orange);color:var(--ink);font:700 16px/1.5 var(--body);padding:16px 26px;cursor:pointer}
.send:disabled{background:transparent;border-color:var(--line);color:#6d6d66;cursor:default}
.why{font:450 14px/1.5 var(--body);color:var(--muted);text-align:center;margin:12px 0 0}

.alt{margin-top:42px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.alt p{font:450 15px/1.5 var(--body);color:var(--muted);margin:0 0 4px}
.secondary-action{display:inline-flex;min-height:48px;align-items:center;padding:10px 0;border:0;border-bottom:1px solid currentColor;background:none;color:var(--paper);font:500 15px/1.5 var(--body);cursor:pointer}
.secondary-action:hover{color:var(--orange)}

.tick{width:62px;height:62px;margin:0 0 22px;display:grid;place-items:center;border-radius:50%;background:var(--orange);color:var(--ink)}
#thanks>p{font:500 18px/1.6 var(--body);color:#d6d4cc;max-width:44ch;margin:0 0 26px}

button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* 29.9: call type (video or phone) */
.f .lbl{display:block;font:600 14px/1.4 var(--body);color:var(--muted);margin:0 0 7px}
@media(min-width:620px){.bands.how{grid-template-columns:1fr 1fr}}
/* 29.9: Pete's confirm page */
.slothead{margin:0 0 14px}.slothead .d{font:700 18px/1.25 var(--heading);letter-spacing:-.02em}.slothead .t{font:450 14px/1.4 var(--body);color:var(--muted);margin-top:2px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{min-height:44px;border:1px solid var(--line);border-radius:12px;background:#ffffff0d;color:var(--paper);font:600 15px/1 var(--body);cursor:pointer}
.slot:hover{background:#f4770826;border-color:#f4770866}
.slot[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.slot:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Phone-only first call (6.10.2026): one plain line where the video/phone choice used to be. */
.callnote{font:500 15px/1.5 var(--body);color:var(--paper);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:14px;padding:12px 16px;margin:0}