/* Ergänzungen für WordPress: Admin-Leiste, Inhalte aus dem Block-Editor und aus Textfeldern (.prose),
   Video-Platzhalter. Das Designsystem selbst steht in tokens.css, komponenten.css, startseite.css, unterseiten.css. */

/* Admin-Leiste für eingeloggte Nutzer: fixierten Kopf darunter schieben */
.admin-bar .site-head { top: var(--wp-admin--admin-bar--height, 32px); }

/* Fließtext aus Editor und Textfeldern */
.prose > p:first-child:not(.todo) { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); }
.prose h2 { font: 900 clamp(1.6rem, 1.3rem + 1vw, 2.25rem)/1.12 var(--font-display); margin-top: var(--sp-5); text-wrap: balance; }
.prose h3 { font: 650 var(--fs-h4)/1.3 var(--font-text); margin-top: var(--sp-4); }
.prose h2 strong, .prose h3 strong { font-weight: inherit; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: var(--sp-3); }
.prose ul:not(.punkt-list) > li { position: relative; padding-left: 1.4rem; }
.prose ul:not(.punkt-list) > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--accent); }
.prose ol:not(.proj-steps) { counter-reset: p; }
.prose ol:not(.proj-steps) > li { position: relative; padding-left: 2.2rem; counter-increment: p; }
.prose ol:not(.proj-steps) > li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; font: 900 1.05em/1.5 var(--font-display); }
.prose hr { border: 0; border-top: var(--dotted); margin-block: var(--sp-5); }
.prose blockquote { margin: 0; padding-left: var(--sp-5); border-left: 4px solid var(--accent); font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; }
.prose blockquote cite { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); font-style: normal; color: var(--ink-muted); font-weight: 400; }
.prose a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }

/* Bilder, Galerien, Videos */
.prose figure { margin: var(--sp-4) 0; }
.prose figure img, .prose video { width: 100%; height: auto; border-radius: 20px; display: block; }
.prose figcaption { margin-top: 10px; font-size: var(--fs-caption); color: var(--ink-muted); }
.prose .wp-block-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); } }
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-gallery img { aspect-ratio: 1; object-fit: cover; height: 100%; }
.prose .wp-block-gallery > figcaption { grid-column: 1 / -1; }

/* Projektseite: echte Kundenstimme in voller Textfarbe (Platzhalter sind grau) */
.voice-single.is-echt blockquote { color: var(--ink); border: 0; padding: 0; }

/* Startseite: Kopf der Insights-Sektion */
.insights-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); max-width: none; }

/* YouTube/Vimeo: lädt erst nach Klick */
.video-embed__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  background: var(--inverse); color: var(--on-inverse);
  display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; text-align: center;
}
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__play {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 1rem/1 var(--font-text); color: #070607; background: var(--accent);
  border: 0; border-radius: var(--r-pill); padding: 14px 22px;
}
.video-embed__play:hover { background: #f7f6f2; }
.video-embed__icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.video-embed__note { font-size: var(--fs-caption); opacity: .8; max-width: 40ch; }
.video-embed__note a { color: inherit; }

/* Bildschirmleser-Texte aus WordPress */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Kundenstimmen aus den Referenzen */
.voices { display: grid; gap: var(--sp-7); }
.voice-src { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); margin-top: 6px; }
.voice-src a { color: var(--ink-muted); text-underline-offset: 3px; }
.voice-src a:hover { color: var(--ink); }
.voices-more { max-width: 900px; margin-left: auto; width: 100%; font-size: var(--fs-small); }
.voice-single blockquote p + p { margin-top: 0.7em; }
.proj-voice blockquote { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }

/* Terminbuchung */
.booking-form { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--dotted); }
.booking-form[hidden] { display: none; }
.booking-pick { font-size: var(--fs-small); }
.booking-pick output { font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.booking-form .field-help a { color: var(--ink); }
.booking-msg { font-size: var(--fs-small); font-weight: 600; flex: 1 1 200px; }
.booking-empty { color: var(--ink-muted); }
.booking-done { display: grid; gap: var(--sp-3); outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.more-days > summary { cursor: pointer; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; width: fit-content; }
.more-days[open] > summary { margin-bottom: var(--sp-5); }
.more-days > .days { display: grid; gap: var(--sp-5); }
.slot:disabled[aria-pressed] { text-decoration: line-through; }