/* Studio Sechzehn Buchung: gleicher Stil wie die Website (Seite „Über mich“, Terminauswahl aus dem alten Buchungstool). Unabhängig vom Theme. */
@font-face { font-family: "S16 Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "S16 Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.s16b {
	--paper: #e8e6e0;
	--card: #f3f1ec;
	--ink: #161513;
	--ink-2: #57544d;
	--line: #cbc8bf;
	--dark: #161513;
	--dark-line: #3a3733;
	--on-dark: #eeebe4;
	--on-dark-2: #a8a49a;
	--accent: #ff4d1f;
	--accent-ink: #b8320d;
	--display: "S16 Barlow", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
	--body: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--gutter: clamp(16px, 4vw, 48px);
	--max: 1360px;
	font: 400 16px/1.55 var(--body);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}
.s16b *, .s16b *::before, .s16b *::after { box-sizing: border-box; }
.s16b [hidden] { display: none !important; }
.s16b h1, .s16b h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; margin: 0; }
:where(.s16b) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.s16b :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Kopf wie „Über mich“: dunkel, große Versalien, Orange für den zweiten Teil */
.s16b-hero { background: var(--dark); color: var(--on-dark); padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(40px, 5vw, 72px); }
.s16b-hero-in { max-width: var(--max); margin-inline: auto; }
.s16b-hero h1 { font-size: clamp(50px, 5.7vw, 96px); line-height: 1; letter-spacing: -.015em; max-width: 14em; }
.s16b-hero h1 span { color: var(--accent); }
.s16b-rec { display: flex; align-items: center; gap: 10px; font: 13px var(--mono); color: var(--on-dark-2); margin: 0 0 20px; }
.s16b-rec i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: s16b-pulse 1.8s ease-in-out infinite; }
.s16b-rec b { color: var(--accent); font-weight: 600; }
.s16b-lede { max-width: 34em; margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--on-dark); }
.s16b-promises { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; font: 13px var(--mono); color: var(--on-dark-2); }
@keyframes s16b-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Hauptbereich */
.s16b-sec { background: var(--paper); padding: clamp(44px, 6vw, 88px) var(--gutter); }
.s16b-sec-in { max-width: var(--max); margin-inline: auto; display: grid; gap: clamp(28px, 4vw, 44px); }

/* Einleitung wie .prose */
.s16b-prose { max-width: 40em; overflow-wrap: break-word; }
.s16b-prose p { font-size: 18px; line-height: 1.5; margin: 0 0 14px; }
.s16b-prose h2 { font-size: clamp(28px, 3vw, 40px); margin: 30px 0 12px; }
.s16b-prose h2:first-child { margin-top: 0; }
.s16b-prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.s16b-prose ul { margin: 0 0 16px; padding: 0; list-style: none; }
.s16b-prose li { padding: 7px 0; border-top: 1px solid var(--line); }

/* Terminauswahl wie im alten Buchungstool */
.s16b .booking { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 920px; }
.s16b .bk-pick { display: grid; gap: 26px; min-width: 0; }
.s16b .bk-pick > * { min-width: 0; }
.s16b .bk-label { font: 12.5px var(--mono); letter-spacing: .04em; color: var(--ink-2); margin: 0 0 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.s16b .bk-label span { color: var(--accent-ink); }
.s16b .bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.s16b .bk-day, .s16b .bk-time { background: var(--card); border: 1.5px solid var(--line); color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s; }
.s16b .bk-day { flex: none; display: grid; gap: 1px; min-width: 70px; padding: 10px 12px; text-align: center; font: 13px var(--mono); }
.s16b .bk-day b { font: 800 22px/1 var(--display); text-transform: uppercase; }
.s16b .bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.s16b .bk-time { padding: 12px 8px; font: 600 15px var(--mono); }
.s16b .bk-day:hover, .s16b .bk-time:hover { border-color: var(--ink); }
.s16b .bk-day[aria-pressed="true"], .s16b .bk-time[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.s16b .bk-note { font: 12.5px var(--mono); color: var(--ink-2); min-height: 1.5em; margin: 0; }

/* Formular wie .form / .field */
.s16b .bk-form { max-width: 560px; display: grid; gap: 13px; align-content: start; }
.s16b .bk-chosen { font: 800 clamp(24px, 3vw, 32px)/1.05 var(--display); text-transform: uppercase; margin: 0; }
.s16b .bk-chosen:focus { outline: none; }
.s16b .field { display: grid; gap: 4px; }
.s16b .field label { font: 12.5px var(--mono); color: var(--ink-2); }
.s16b .field input, .s16b .field textarea { width: 100%; padding: 11px 12px; font: 16px var(--body); color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: 0; }
.s16b .field textarea { min-height: 96px; resize: vertical; }
.s16b .bk-how { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; }
.s16b .bk-how legend { font: 12.5px var(--mono); color: var(--ink-2); margin-bottom: 6px; padding: 0; }
.s16b .bk-how label { display: flex; gap: 9px; align-items: center; }
.s16b .bk-how input { accent-color: var(--accent-ink); width: 16px; height: 16px; }
.s16b .check { display: flex; gap: 9px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.s16b .check input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.s16b .bk-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 22px; font: 600 17px var(--body); color: #fff; background: #000; border: 0; cursor: pointer; transition: background .12s; }
.s16b .bk-submit:hover { background: #2b2a27; }
.s16b .bk-submit:disabled { opacity: .5; cursor: wait; }
.s16b .s16b-note { font: 13px var(--mono); color: var(--ink-2); }
.s16b .bk-note:empty { display: none; }

/* Bestätigung */
.s16b .bk-done { display: grid; gap: 12px; max-width: 620px; padding: clamp(22px, 3vw, 34px); background: var(--dark); color: var(--on-dark); }
.s16b .bk-done h2 { color: var(--accent); font-size: clamp(32px, 4vw, 48px); }
.s16b .bk-done p { margin: 0; color: var(--on-dark-2); }
.s16b .bk-done .bk-chosen { color: var(--on-dark); }
.s16b .bk-done:focus { outline: none; }

/* Honeypot */
.s16b .s16b-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 600px) {
	.s16b .bk-times { grid-template-columns: repeat(2, 1fr); }
	.s16b-prose p { font-size: 17px; }
}

/* Layout: Text links, Foto rechts; darunter Kalender links, Formular rechts */
.s16b-hero-grid { max-width: var(--max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.s16b-hero-text { min-width: 0; }
.s16b-hero-text .s16b-lede p { margin: 0 0 12px; }
.s16b-hero-text .s16b-lede a { color: var(--accent); text-underline-offset: 3px; }
.s16b-photo { margin: 0; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; overflow: hidden; justify-self: end; }
.s16b-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.s16b .booking { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 4vw, 56px); }
.s16b .bk-pick { gap: 22px; }
.s16b .bk-aside { min-width: 0; display: grid; gap: 16px; align-content: start; }
.s16b .bk-hint { margin: 0; padding: 18px 20px; font: 14px/1.5 var(--mono); color: var(--ink-2); border-top: 1px solid var(--line); }
.s16b .bk-form { max-width: none; background: var(--card); padding: clamp(20px, 2.5vw, 30px); }
.s16b .bk-form .bk-label { margin: 0; }
.s16b .bk-done { max-width: none; }
.s16b .bk-times { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
@media (max-width: 860px) {
	.s16b-hero-grid, .s16b .booking { grid-template-columns: minmax(0, 1fr); }
	.s16b-photo { justify-self: stretch; aspect-ratio: 4 / 3; }
}

/* Einleitung als normaler Inhaltsblock unter dem Theme-Kopf (kein zweiter Seitenkopf) */
.s16b-hero { background: var(--paper); color: var(--ink); padding: clamp(32px, 5vw, 64px) var(--gutter) 0; }
.s16b-hero .s16b-lede { color: var(--ink); margin-top: 0; max-width: 34em; }
.s16b-hero-text .s16b-lede a { color: var(--accent-ink); }
.s16b-sec { padding-top: clamp(32px, 4vw, 56px); }
.s16b .bk-hint { padding: 0; border: 0; }

/* Kontaktformular (Contact Form 7) im Stil der Seite */
.s16b-contact { padding-top: 0; }
.s16b-contact-in { max-width: var(--max); margin-inline: auto; border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 48px); }
.s16b-contact h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 22px; }
.s16b-contact h2 span { color: var(--accent); }
.s16b-contact .wpcf7 form { max-width: 640px; display: grid; gap: 13px; background: var(--card); padding: clamp(20px, 2.5vw, 30px); }
.s16b-contact .wpcf7 p { margin: 0; }
.s16b-contact .wpcf7 label { display: grid; gap: 4px; font: 12.5px var(--mono); color: var(--ink-2); }
.s16b-contact .wpcf7 input:not([type=submit]):not([type=checkbox]), .s16b-contact .wpcf7 textarea { width: 100%; padding: 11px 12px; font: 16px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 0; }
.s16b-contact .wpcf7 input[type=submit] { width: 100%; min-height: 54px; font: 600 17px var(--body); color: #fff; background: #000; border: 0; cursor: pointer; }

/* Mit Theme-Klassen (.hero, .sec, .wrap) übernimmt das Theme Kopf und Abstände */
.s16b > .hero { margin: 0; }
.s16b .sec.s16b-sec { background: var(--paper); padding-top: clamp(32px, 4vw, 56px); }
.s16b .sec .wrap { max-width: var(--max); margin-inline: auto; }

/* Mit Theme-Klassen (.hero, .sec, .wrap) übernimmt das Theme Kopf und Abstände */
.s16b > .hero { margin: 0; }
.s16b .sec.s16b-sec { background: var(--paper); padding-top: clamp(32px, 4vw, 56px); }
.s16b .sec .wrap { max-width: var(--max); margin-inline: auto; }

/* Unterer Teil exakt wie die alte Buchungsseite: Terminwahl untereinander, Formular erscheint nach der Wahl */
.s16b .booking { display: grid; grid-template-columns: minmax(0, 1fr); max-width: none; gap: 24px; }
.s16b .bk-form { background: none; padding: 0; max-width: 560px; }
.s16b .bk-submit { width: 100%; }
.s16b .note { font: 13px var(--mono); color: var(--ink-2); }
.s16b .note:empty { display: none; }

/* Ein Raster für Tage und Uhrzeiten: gleiche Spalten, gleicher Abstand, gleiche Kästchenhöhe */
.s16b .bk-pick { --bk-col: 92px; --bk-gap: 8px; --bk-h: 64px; }
.s16b .bk-days, .s16b .bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--bk-col), 1fr)); gap: var(--bk-gap); overflow: visible; padding: 0; }
.s16b .bk-day, .s16b .bk-time { box-sizing: border-box; width: 100%; min-width: 0; height: var(--bk-h); padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.s16b .bk-day { gap: 2px; }
.s16b .bk-time { font: 600 15px var(--mono); }
@media (max-width: 480px) { .s16b .bk-pick { --bk-col: 76px; } }