/* Your IT Works — minimale Utilities.
   Layout, Abstände, Farben, Bild-Zuschnitte und Ausrichtung laufen über
   Block-Einstellungen (theme.json-Presets, native Grid-/Columns-/Details-Blöcke).
   Hier bleibt nur, was Core-Blöcke nicht selbst ausdrücken können. */

/* Pill-Chip (Tag). Kandidat für einen späteren eigenen yitw-Block. */
.yitw-chip {
  border: 1px solid var(--wp--preset--color--yitw-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .75rem;
  line-height: 1.2;
  margin: 0;
}

/* Leistungen-Icons sind jetzt SVG-Bilder (Mediathek, core/image) inkl. Badge —
   kein Icon-CSS mehr nötig. */

/* Verlinkte Beitragstitel erben die Heading-Farbe (schwarz statt Link-Blau),
   bleiben aber klickbar. */
.wp-block-post-title a { color: inherit; }

/* Einwand: "Mehr lesen"-Aufklapper (core/details) mit Label-Wechsel.
   Titel + Kurztext liegen außerhalb; hier nur der Detail-Teil. */
.yitw-mehr { border-top: 1px solid #454b78; margin-top: 6px; padding-top: 12px; }
.yitw-mehr summary { list-style: none; cursor: pointer; font-size: 0; }
.yitw-mehr summary::-webkit-details-marker { display: none; }
.yitw-mehr summary::after { content: "Mehr lesen \25BE"; color: #9fb0ff; font-weight: 600; font-size: .82rem; }
.yitw-mehr[open] summary::after { content: "Weniger anzeigen \25B4"; }
.yitw-mehr p { margin-top: 12px; }

/* Vorgehen: 4 feste Schritte → sauber 4 / 2×2 / 1, nie ein einzelner Schritt allein. */
@media (max-width: 1120px) { .yitw-steps { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px)  { .yitw-steps { grid-template-columns: 1fr !important; } }
/* Schritt-Box: enge, kontrollierte Abstände (statt Astras großer Absatz-Marge an der Nummer). */
.yitw-steps > * { display: flex; flex-direction: column; gap: 8px; }
.yitw-steps > * > * { margin: 0 !important; }
.yitw-steps > * > p:first-child { font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.25rem); font-weight: 700; line-height: 1; }

/* core/columns auf Mobil stapeln. Astra lädt die Core-Block-Library-CSS nicht mit,
   daher fehlt die native is-stacked-on-mobile-Regel — hier 1:1 aus Core ergänzt. */
@media (max-width: 781px) {
  .wp-block-columns.is-stacked-on-mobile { flex-wrap: wrap !important; }
  .wp-block-columns.is-stacked-on-mobile > .wp-block-column { flex-basis: 100% !important; }
}

/* Erstgespräch-Modal (natives <dialog>). Geschlossen ist es per Browser-Default
   display:none — kein Extra-CSS nötig. Zentriert, mobil Vollbild. */
.yitw-modal {
  width: min(560px, 92vw);
  max-width: 92vw;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: var(--wp--preset--color--yitw-bg, #fff);
  color: var(--wp--preset--color--yitw-text, #545454);
  box-shadow: 0 24px 64px rgba(28, 31, 46, .28);
}
.yitw-modal::backdrop { background: rgba(28, 31, 46, .55); }
.yitw-modal__body { position: relative; padding: 40px; }
.yitw-modal__title {
  margin: 0 0 14px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--yitw-ink, #1c1f2e);
}
.yitw-modal__body p { margin: 0 0 12px; line-height: 1.6; }
.yitw-modal__body p:last-child { margin-bottom: 0; }
.yitw-modal__note { font-size: .85rem; color: var(--wp--preset--color--yitw-grey, #8b8e96); }
/* Astra stylt jedes <button> als Voll-Button — hier per #id-Spezifität zurücksetzen. */
#yitw-modal .yitw-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  font-size: 26px;
  line-height: 1;
  color: var(--wp--preset--color--yitw-grey, #8b8e96);
  cursor: pointer;
}
#yitw-modal .yitw-modal__close:hover {
  background: var(--wp--preset--color--yitw-soft, #f5f6fa);
  color: var(--wp--preset--color--yitw-ink, #1c1f2e);
}
@media (max-width: 560px) {
  .yitw-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .yitw-modal__body { padding: 28px 20px; }
}

/* Text-Typing-Headline (ttb/text-typing): statischen Präfix auf eigene Zeile,
   der tippende Teil bricht darunter um. Zeilenhöhe wie h2 (der Block setzt keine,
   sonst erbt er Astras 1,65 → zu großer Zeilenabstand). */
.wp-block-ttb-text-typing .prefixText { display: block; }
.wp-block-ttb-text-typing .prefixText,
.wp-block-ttb-text-typing .typingContents { line-height: 1.3; }
/* CTA: kurzer, dicker blauer Akzentbalken über dem Typewriter (wie Screendesign). */
.wp-block-ttb-text-typing::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--yitw-blue);
  margin: 0 0 20px;
}

/* Logo-Leiste: unendlicher Auto-Scroll (Marquee). Der Track wird per JS einmal
   geklont (Klone aria-hidden) → nahtlose Schleife bei translateX(-50%).
   Einheitliche Höhe + dezent grau. (Kein Block liefert einen Endlos-Marquee.) */
.yitw-logos-marquee { overflow: hidden; }
.yitw-logos-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  animation: yitw-logo-scroll 38s linear infinite;
}
.yitw-logos-track:hover { animation-play-state: paused; }
.yitw-logos-track .wp-block-image { margin: 0 var(--wp--preset--spacing--yitw-48, 48px) 0 0; }
.yitw-logos-track img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .2s ease, opacity .2s ease; }
/* Hover: der Marquee pausiert (s. o.) und das einzelne Logo leuchtet farbig auf. */
.yitw-logos-track .wp-block-image:hover img { filter: none; opacity: 1; }
@keyframes yitw-logo-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .yitw-logos-marquee { overflow: visible; }
  .yitw-logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .yitw-logos-track > [aria-hidden="true"] { display: none; }
}

/* Für-wen: klickbare Beitrags-Kacheln. Ganze Karte verlinkt (Stretched-Link über
   den Titel-Link), Hover hebt an + blaue Kante. core/query bietet dafür nichts. */
.yitw-post-card { position: relative; height: 100%; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.yitw-post-card:hover { border-color: var(--wp--preset--color--yitw-blue); box-shadow: 0 8px 24px rgba(37, 44, 91, .12); transform: translateY(-2px); }
.yitw-post-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.yitw-post-card .wp-block-post-title a { text-decoration: none; }
/* „Mehr lesen"-Link als optischer Hinweis (Klick geht ohnehin auf die ganze Karte). */
.yitw-post-card .wp-block-post-excerpt__more-link { color: var(--wp--preset--color--yitw-blue); font-weight: 600; text-decoration: none; }

/* ==========================================================================
   Modul: Bildband mit Parallax   →  yitw_parallax_band() in inc/blocks.php
   ========================================================================== */

/* Die min-height steht als Inline-Stil im Block-Markup (Core schreibt sie dort
   fest) und ist bewusst die MOBILE Höhe. Ab Tablet wird das Band höher —
   !important, weil ein Inline-Stil sonst jede Klasse schlägt. */
@media (min-width: 782px) {
  .yitw-parallax { min-height: 420px !important; }
}

/* Unterhalb Tablet bleibt das Bild stehen-lassen aus: Bezugsfläche von `fixed`
   ist das Fenster, und ein schmales Hochformat-Fenster zeigt im Band nur einen
   stark gezoomten Mittelstreifen. Statisch sieht dort besser aus — und iOS
   schaltet `fixed` ohnehin ab, so ist die Darstellung auf allen Telefonen gleich. */
@media (max-width: 781px) {
  .yitw-parallax .wp-block-cover__image-background.has-parallax {
    background-attachment: scroll;
  }
}

/* ==========================================================================
   Umschalter der Ansprache (Wir / Ich)  →  yitw_voice_switch() in inc/voice.php
   ========================================================================== */

/* Bewusst klein und unten links: dort legt Astra nichts hin, der
   Nach-oben-Pfeil sitzt rechts. Weißes Feld, damit es über hellen wie über
   dunklen Sektionen lesbar bleibt. */
.yitw-voice {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border: 1px solid rgba(23, 26, 45, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 6px rgba(23, 26, 45, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1;
}
.yitw-voice__opt {
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--wp--preset--color--yitw-text, #4b5563);
  font-weight: 600;
  text-decoration: none;
}
.yitw-voice__opt:hover,
.yitw-voice__opt:focus-visible {
  background: rgba(81, 112, 255, 0.1);
  color: var(--wp--preset--color--yitw-blue, #5170ff);
}
.yitw-voice__opt.is-active {
  background: var(--wp--preset--color--yitw-blue, #5170ff);
  color: #fff;
}

@media (max-width: 600px) {
  .yitw-voice { left: 10px; bottom: 10px; }
}

@media print {
  .yitw-voice { display: none; }
}

/* ==========================================================================
   Erstgespräch-Modal mit Buchungskalender (FluentBooking)
   ========================================================================== */

/* Der Kalender braucht Breite: Profil, Monatsansicht und Uhrzeiten stehen
   nebeneinander. Hohe Inhalte scrollen im Dialog statt aus dem Bild zu laufen. */
.yitw-modal--booking {
  width: min(1000px, 94vw);
  max-height: 92vh;
  overflow: auto;
}
.yitw-modal--booking .yitw-modal__body { padding: 48px 32px 24px; }
.yitw-modal--booking .yitw-modal__note { margin-top: 16px; text-align: center; }

/* Das Widget ist bewusst immer hell (theme="light" im Shortcode). Astras
   Dunkelmodus färbt aber Palettenfarben und Formularfelder um — im Widget stand
   dadurch hellgraue Schrift auf weißen Feldern, das aktive Feld wurde
   dunkelblau. Darum den Buchungsdialog fest auf die helle Palette setzen,
   statt auf die Variablen, die im Dunkelmodus kippen. */
.yitw-modal--booking {
  background: #fff;
  color: #545454;
}
.yitw-modal--booking .yitw-modal__note { color: #8b8e96; }
.yitw-modal--booking .yitw-modal__note a { color: #5170ff; }
#yitw-modal.yitw-modal--booking .yitw-modal__close { color: #8b8e96; }
#yitw-modal.yitw-modal--booking .yitw-modal__close:hover { background: #f5f6fa; color: #1c1f2e; }

/* !important, weil Astras Dunkelmodus Feldfarbe und Fokus-Hintergrund selbst
   mit !important setzt (.astra-dark-mode-enable input[type="text"] …). Ohne
   Gegengewicht gewinnt das immer, egal wie spezifisch. Begrenzt auf diesen
   Dialog. */
.yitw-modal--booking .fcal_cal_wrap input:not([type="checkbox"]):not([type="radio"]),
.yitw-modal--booking .fcal_cal_wrap input:not([type="checkbox"]):not([type="radio"]):focus,
.yitw-modal--booking .fcal_cal_wrap textarea,
.yitw-modal--booking .fcal_cal_wrap textarea:focus,
.yitw-modal--booking .fcal_cal_wrap select {
  background-color: #fff !important;
  color: #1c1f2e !important;
}
.yitw-modal--booking .fcal_cal_wrap ::placeholder {
  color: #8b8e96;
  opacity: 1;
}
/* Ausnahme Zeitzonen-Auswahl (svelte-select): Sie legt ein durchsichtiges
   Suchfeld ÜBER den gewählten Wert. Mit weißem Hintergrund verdeckt es
   „Europe/Berlin". Steht bewusst danach und mit gleicher Spezifität. */
.yitw-modal--booking .fcal_cal_wrap .svelte-select input:not([type="hidden"]),
.yitw-modal--booking .fcal_cal_wrap .svelte-select input:not([type="hidden"]):focus {
  background-color: transparent !important;
  color: #1c1f2e !important;
}

@media (max-width: 560px) {
  /* Zurück auf Vollbild wie das Grund-Modal — sonst gilt oben die 94vw-Breite. */
  .yitw-modal--booking { width: 100%; max-width: none; max-height: none; }
  .yitw-modal--booking .yitw-modal__body { padding: 52px 12px 20px; }
}