/* Contact (booking) dialog only: site.js sets .contact-dialog per open, so Impressum/Datenschutz keep the base dialog.
   One grid: side columns of --dialog-pad (styles.css: 40px, 24px up to 480px) around the content; row 1 the logo and
   the close button, row 2 the title, row 3 the copy. From 481px the stacked logo; up to 480px the wide logo on a sky
   band (owner, 8 Oct). The width sets its own screen gutter (16 to 20px); the browser's dialog max-width would
   otherwise win on phones. */
dialog.contact-dialog[open]{display:grid;grid-template-columns:var(--dialog-pad) minmax(0,1fr) 44px var(--dialog-pad);align-items:start;width:min(560px,calc(100% - 2*clamp(16px,5vw,20px)));max-width:none;padding:32px 0 var(--dialog-pad)}
dialog.contact-dialog>*{grid-column:2/4}
dialog.contact-dialog .dialog-logo{grid-column:2;grid-row:1}
/* The SVG's side bearing is pulled back 4px so the cloud lines up with the title. */
dialog.contact-dialog .dialog-logo img{display:block;width:auto;height:56px;margin-left:-4px}
dialog.contact-dialog .close{grid-column:3;grid-row:1}
dialog.contact-dialog h2{grid-row:2;margin:20px 0 0}
/* Blocks inside .dialog-copy are stacked by gap, not <br>. */
dialog.contact-dialog .dialog-copy{grid-row:3;display:flex;flex-direction:column;align-items:stretch;gap:24px;margin:16px 0 0;line-height:1.5}
dialog:not(.contact-dialog) .dialog-logo{display:none}
.booking-meta{color:var(--ink,#0b1f3b);white-space:nowrap}
.booking-help{font-size:15px}
@media(max-width:480px){
  dialog.contact-dialog[open]{padding:0 0 32px}
  /* The sky band behind row 1, edge to edge; the dialog's rounded corners clip it, and it scrolls with the copy. */
  dialog.contact-dialog::before{content:"";grid-area:1/1/2/-1;align-self:stretch;background:var(--dke-sky,#EAF6FF)}
  dialog.contact-dialog :is(.dialog-logo,.close){align-self:center}
  dialog.contact-dialog .dialog-logo img{height:28px}
  dialog.contact-dialog .close{margin:16px 0;background:white}
  dialog.contact-dialog h2{margin-top:32px}
  dialog.contact-dialog .dialog-copy{gap:20px;margin-top:12px}
}
/* Every link in a dialog (contact, Impressum, Datenschutz) reads as a link: underline plus link colour.
   #00698f on white is 6.15:1 (WCAG AA); against the navy text it is only 2.7:1, so the underline is what marks the link. */
dialog .dialog-copy a{color:#00698f;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;overflow-wrap:anywhere}
dialog .dialog-copy a:hover{text-decoration-thickness:2px}

/* Booking picker (booking.js). Tokens from DESIGN.md Cumulus: navy #0B1F3B, sky #EAF6FF, muted #607B9B
   (borders only; 4.4:1 is below text contrast), deep cyan #007EAD for focus; 12px panels, 999px controls,
   44px minimum controls. #4a5d75 is the site's existing quiet text colour (6.8:1). The error red #B3261E
   (6.5:1) is the one status hue outside the brand palette, so an error never reads as the brand accent. */
.booking{display:grid;gap:12px;align-content:start;container-type:inline-size}
.booking-view[aria-busy=true]{cursor:progress}
.booking p{margin:0;font-size:16px}
.booking-view{display:grid;gap:16px;align-content:start}
/* While picking, a message (e.g. "gerade vergeben") sits above the days, not below the fold. */
.booking:has(.booking-week) .booking-status{order:-1}
.booking-loading,.booking-empty{color:#4a5d75;font-size:15px;align-self:center}
.booking-week{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
.booking .booking-range{text-align:center;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;min-height:1.5em}
.booking-nav{width:44px;height:44px;border-radius:999px;border:1px solid #607B9B;background:white;color:#0B1F3B;font-size:24px;line-height:1;padding:0 0 3px}
.booking-nav:hover{background:#EAF6FF}
.booking-nav[aria-disabled=true]{opacity:.35;cursor:default;background:white}
/* While a week loads, the shown week stays (inert) and only an answer slower than half a second dims it and the
   arrows; a quicker one shows no change. Under reduced motion styles.css turns the fade into a plain switch. */
.booking-days,.booking-times{transition:opacity .15s}
.booking-nav{transition:background .2s,opacity .15s}
.booking-view[aria-busy=true] :is(.booking-days[inert],.booking-times[inert]){opacity:.45;transition:opacity .2s .5s}
.booking-view[aria-busy=true] .booking-nav[aria-disabled=true]{opacity:.35;transition:background .2s,opacity .2s .5s}
.booking-days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(56px,auto));gap:8px}
.booking-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;padding:6px 2px;border:1px solid #607B9B;border-radius:12px;background:white;color:#0B1F3B;font-size:15px;line-height:1.25;font-variant-numeric:tabular-nums}
.booking-wd{font-size:13px;font-weight:600}
.booking-day:hover{background:#EAF6FF}
.booking-day[aria-pressed=true]{background:#0B1F3B;border-color:#0B1F3B;color:white}
.booking-day[aria-disabled=true]{border-style:dashed;border-color:#0B1F3B33;color:#0B1F3B66;background:white;cursor:default}
/* The column count follows the picker's own width (.booking is the container), not the screen: 3, 4 or 5 columns, each
   with the rows the most a day can show (14 half-hour starts) needs, so changing days does not move the dialog.
   Without container queries the narrow bases still fit: 3 time columns, 4 day columns, a full-width button. */
.booking-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,minmax(48px,auto));gap:8px;align-content:start}
@container (min-width:312px){.booking-times{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(48px,auto))}}
@container (min-width:440px){.booking-times{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(48px,auto))}}
/* Day chips under about 59px (a picker under 260px, the 320px phones): the dates take 14px to keep clear of the borders. */
@container (max-width:259px){.booking-day{font-size:14px}}
.booking-times>p{grid-column:1/-1}
.booking-time{min-height:48px;padding:0 8px;border:1px solid #607B9B;border-radius:999px;background:white;color:#0B1F3B;font-size:16px;font-weight:550;font-variant-numeric:tabular-nums}
.booking-time:hover{background:#EAF6FF;border-color:#0B1F3B}
.booking-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px 4px 16px;border-radius:12px;background:#EAF6FF;font-weight:600;font-variant-numeric:tabular-nums}
.booking-form{display:grid;gap:16px}
.booking-field{display:grid;gap:6px}
.booking-field label{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.booking-field input{box-sizing:border-box;width:100%;min-height:52px;padding:12px 16px;border:1px solid #607B9B;border-radius:12px;background:white;color:#0B1F3B;font-size:17px}
.booking-field input[aria-invalid=true]{border:2px solid #B3261E;padding:11px 15px}
.booking .booking-error,.booking .booking-status.is-error{color:#B3261E;font-size:15px}
.booking .booking-status{font-size:15px}
.booking .booking-status:empty{display:none}
.booking-form .button{justify-self:stretch}
.booking-form .button[aria-disabled=true]{opacity:.6;cursor:progress}
.booking-link{min-height:44px;padding:0 4px;border:0;background:none;color:#00698f;font-size:15px;text-decoration:underline;text-underline-offset:.18em}
.booking-link[aria-disabled=true]{opacity:.6;cursor:progress}
.booking .booking-small{font-size:14px}
.booking-done{padding:20px;border-radius:12px;background:#EAF6FF}
.booking-done:focus{outline:none}
.booking-done p+p{margin-top:4px}
.booking .booking-done-title{font-size:18px;font-weight:650}
.booking .booking-done-when{font-weight:600;font-variant-numeric:tabular-nums}
.booking .booking-down{font-size:16px}
/* The late line after a long wait takes focus like the success panel; its mail link keeps the ring. */
.booking-down:focus{outline:none}
/* While the picker is unavailable its own line carries the address, so the help line would repeat it. */
.dialog-copy:has(.booking-down) .booking-help{display:none}
.booking :is(button,input,a):focus-visible{outline:3px solid #007EAD;outline-offset:2px}
.booking input:focus{outline:3px solid #007EAD;outline-offset:2px}
@container (min-width:440px){
  .booking-days{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:minmax(56px,auto);gap:6px}
  .booking-form .button{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .booking .button:hover{transform:none}
}

/* Impressum and Datenschutz (templates #imprint-content, #privacy-content): real headings and paragraphs. */
.legal-text{font-size:16px;line-height:1.6}
.legal-text h2,.legal-text h3{font-size:18px;line-height:1.3;font-weight:650;letter-spacing:-.01em;margin:28px 0 6px}
.legal-text p,.legal-text ul{font-size:16px;line-height:1.6;margin:0 0 12px}
.legal-text ul{padding-left:1.25em}
.legal-text li{margin:0 0 6px}
.legal-text .legal-facts{list-style:none;padding:0}
.legal-text .legal-facts li{margin:0 0 4px}
.legal-text .legal-lead{font-size:15px;color:#4a5d75}
.legal-text>:last-child{margin-bottom:0}
/* Long legal texts: a little wider on large screens (about 70 characters a line), scroll inside the dialog,
   and the close button stays reachable while scrolling. Chrome measures sticky offsets from the padding edge, so
   the offset subtracts the dialog padding (--dialog-pad, styles.css) to park the button 12px under the top edge. */
dialog:not(.contact-dialog)[open]{width:min(600px,calc(100% - 32px))}
dialog:not(.contact-dialog)[open] .close{position:sticky;top:calc(12px - var(--dialog-pad));z-index:1;background:white;border-color:transparent}
/* While sticky, a white strip across the whole dialog sits behind the button, so text scrolls under a clean
   band instead of running into the circle. It reaches up to the dialog's top edge, extends only leftwards
   (clipped, never scrollable) and ends at the button's right edge, which is the edge of the text column.
   The circle outline is drawn on ::after because the strip (z-index:-1 inside the button's stacking context)
   would otherwise paint over the button's own border. */
dialog:not(.contact-dialog)[open] .close::before{content:"";position:absolute;z-index:-1;top:-14px;bottom:-9px;right:-1px;width:100vw;background:white;pointer-events:none}
dialog:not(.contact-dialog)[open] .close::after{content:"";position:absolute;inset:-1px;border:1px solid #132b3a50;border-radius:50%;pointer-events:none}