/* Bajzel Sektionen 1.4.3 – headings inherit the theme's heading typography (theme.json: JetBrains Mono 400, h2 x-large,
   h3 large, colour contrast), so theme changes apply automatically. #20201e ink, 1.5px rules, no extra web font. */
.bajzel-sek {
  --bajzel-sek-ink: #20201e; --bajzel-sek-paper: #f9f9f9; --bajzel-sek-muted: #4a4a47; --bajzel-sek-rule: 1.5px;
  color: var(--bajzel-sek-ink);
  font-family: var(--wp--preset--font-family--jetbrains-mono, ui-monospace, monospace);
  margin-block: clamp(3rem, 8vw, 6rem);
}
.bajzel-sek, .bajzel-sek * { box-sizing: border-box; }
.bajzel-sek .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bajzel-sek__head { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); max-width: 46rem; }
.bajzel-sek__kicker {
  display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem;
  font-size: .78rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase;
}
.bajzel-sek__kicker::before { content: ""; width: 2rem; border-top: var(--bajzel-sek-rule) solid currentColor; }
/* Section title: theme h2 styles (font, size, weight, line-height, colour) – only spacing is set here. */
.bajzel-sek .bajzel-sek__heading { margin: 0; }
.bajzel-sek__intro { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--medium, 1.05rem); line-height: 1.55; }
.bajzel-sek__icon { display: block; width: 36px; height: 36px; color: var(--bajzel-sek-ink); flex: none; }
/* Item/step titles: theme heading font and weight (inherited from h3), scaled to card size via the theme's font-size preset. */
.bajzel-sek .bajzel-sek__title { margin: 0; font-size: calc(var(--wp--preset--font-size--medium, 1.05rem) * 1.1); line-height: 1.35; }
/* The theme justifies .entry-content paragraphs; short card texts need ragged-right to avoid big word gaps. */
.entry-content .bajzel-sek p, .bajzel-sek p { text-align: left; }
.bajzel-sek__text { margin: .5rem 0 0; font-size: .9rem; line-height: 1.6; }

/* ---------- A) Wir übernehmen alles ---------- */
.bajzel-sek__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); border-left: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
}
.bajzel-sek__item {
  position: relative; margin: 0; padding: clamp(1.25rem, 2.5vw, 2rem);
  border-right: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); border-bottom: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
  display: flex; flex-direction: column; gap: .9rem;
}
.bajzel-sek__item .bajzel-sek__text { margin: 0; }
.bajzel-sek__num { position: absolute; top: clamp(1.25rem, 2.5vw, 2rem); right: clamp(1.25rem, 2.5vw, 2rem); font-size: .75rem; letter-spacing: .08em; }
@media (max-width: 960px) { .bajzel-sek__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bajzel-sek__grid { grid-template-columns: 1fr; }
  .bajzel-sek__item { display: grid; grid-template-columns: 36px 1fr; column-gap: 1rem; row-gap: .35rem; padding: 1.15rem 1.1rem; }
  .bajzel-sek__item .bajzel-sek__icon { grid-row: span 2; width: 32px; height: 32px; }
  .bajzel-sek__num { top: 1.15rem; right: 1.1rem; }
  .bajzel-sek__item .bajzel-sek__title { padding-right: 2rem; }
}

/* ---------- B) So läuft's ab ---------- */
.bajzel-sek--ablauf { display: flex; flex-direction: column; }
.bajzel-sek--ablauf .bajzel-sek__head { order: 0; }
.bajzel-sek__lanes { order: 1; display: grid; grid-template-columns: repeat(var(--bajzel-sek-steps, 4), minmax(0, 1fr)); margin-bottom: 1.5rem; }
.bajzel-sek__steps { order: 2; }
.bajzel-sek__cta { order: 3; }
.bajzel-sek__lane {
  display: flex; align-items: center; justify-content: center; min-height: 2.4rem; padding: .4rem .75rem;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  border: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
}
.bajzel-sek__lane + .bajzel-sek__lane { border-left-width: 0; }
.bajzel-sek__lane--bajzel { background: var(--bajzel-sek-ink); color: var(--bajzel-sek-paper); }
.bajzel-sek__lane--bajzel::after { content: "→"; margin-left: .6em; letter-spacing: 0; }
.bajzel-sek__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--bajzel-sek-steps, 4), minmax(0, 1fr));
}
.bajzel-sek__step { position: relative; margin: 0; padding: 0 clamp(.9rem, 2vw, 1.75rem) 0 0; display: flex; flex-direction: column; gap: .85rem; }
.bajzel-sek__marker { position: relative; height: 3.25rem; display: flex; align-items: center; }
/* Connecting line from each marker to the next one. */
.bajzel-sek__step:not(:last-child) .bajzel-sek__marker::after {
  content: ""; position: absolute; left: 3.25rem; right: calc(-1 * clamp(.9rem, 2vw, 1.75rem)); top: 50%;
  border-top: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
}
.bajzel-sek__step:not(:last-child) .bajzel-sek__marker::before {
  content: ""; position: absolute; right: calc(-1 * clamp(.9rem, 2vw, 1.75rem)); top: 50%; width: 8px; height: 8px;
  border-top: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); border-right: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
  transform: translate(-1px, -50%) rotate(45deg); transform-origin: 50% 50%; margin-top: .75px;
}
.bajzel-sek__stepnum {
  display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); background: var(--bajzel-sek-paper);
  font-family: inherit; font-size: var(--wp--preset--font-size--medium, 1.05rem); font-weight: 400; line-height: 1;
}
.bajzel-sek__step--bajzel .bajzel-sek__stepnum { background: var(--bajzel-sek-ink); color: var(--bajzel-sek-paper); }
.bajzel-sek__who {
  display: none; align-self: flex-start; margin: 0; padding: .2rem .55rem;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink);
}
.bajzel-sek__step--bajzel .bajzel-sek__who { background: var(--bajzel-sek-ink); color: var(--bajzel-sek-paper); }
.bajzel-sek__step .bajzel-sek__text { margin: 0; }
.bajzel-sek__cta { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.bajzel-sek__cta .wp-block-button { margin: 0; }
.bajzel-sek .bajzel-sek__button { display: inline-block; text-decoration: none; }
.bajzel-sek__note { margin: 0; font-size: .85rem; }
/* Tablet and phone: vertical timeline; who-tag per step, Bajzel steps joined by a solid bar. */
@media (max-width: 900px) {
  .bajzel-sek__lanes { display: none; }
  .bajzel-sek__steps { grid-template-columns: 1fr; }
  .bajzel-sek__step { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 1.1rem; row-gap: .45rem; padding: 0 0 1.75rem; }
  .bajzel-sek__marker { grid-row: 1 / span 4; height: auto; align-items: flex-start; flex-direction: column; }
  .bajzel-sek__step:not(:last-child) .bajzel-sek__marker::after { left: calc(1.625rem - .75px); right: auto; top: 3.25rem; bottom: -.1rem; border-top: 0; border-left: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); }
  .bajzel-sek__step:not(:last-child) .bajzel-sek__marker::before { display: none; }
  .bajzel-sek__step--bajzel:has(+ .bajzel-sek__step--bajzel) .bajzel-sek__marker::after { border-left-width: 5px; left: calc(1.625rem - 2.5px); }
  .bajzel-sek__who { display: inline-block; justify-self: start; }
  .bajzel-sek__icon { width: 30px; height: 30px; }
}

/* ---------- FAQ ---------- */
/* 1.3.1: FAQ and Kontakt sit centred on the theme's content width (like the text column), whatever the block alignment. */
.bajzel-sek--faq .bajzel-sek__head, .bajzel-sek--faq .bajzel-sek__faq,
.bajzel-sek--kontakt .bajzel-sek__head, .bajzel-sek--kontakt .bajzel-sek__form {
  max-width: var(--wp--style--global--content-size, 46rem); margin-inline: auto;
}
.bajzel-sek--faq .bajzel-sek__faq { border-top: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); }
.bajzel-sek__qa { border-bottom: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); }
.bajzel-sek__q {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; line-height: 1.4;
}
.bajzel-sek__q::-webkit-details-marker { display: none; }
.bajzel-sek__q:focus-visible { outline: 2px solid var(--bajzel-sek-ink); outline-offset: 4px; }
.bajzel-sek__plus { position: relative; flex: none; width: 1rem; height: 1rem; }
.bajzel-sek__plus::before, .bajzel-sek__plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid currentColor; transform: translateY(-50%);
  transition: transform .25s ease;
}
.bajzel-sek__plus::after { transform: translateY(-50%) rotate(90deg); }
.bajzel-sek__qa[open] .bajzel-sek__plus::after { transform: translateY(-50%) rotate(0deg); }
.bajzel-sek__a { padding: 0 2.25rem 1.25rem 0; }
.bajzel-sek__a p { margin: 0; font-size: .92rem; line-height: 1.65; }
@media (hover: hover) and (pointer: fine) { .bajzel-sek__q:hover > span:first-child { text-decoration: underline; text-underline-offset: 4px; } }
/* ---------- 1.3.1: Kontakt ---------- */
.bajzel-sek--kontakt .bajzel-sek__form { border-top: var(--bajzel-sek-rule) solid var(--bajzel-sek-ink); padding-top: 1.5rem; }
.bajzel-sek--kontakt .wpforms-container { margin: 0 !important; }
.bajzel-sek__notice { padding: 1rem; border: var(--bajzel-sek-rule) dashed var(--bajzel-sek-ink); font-size: .85rem; }

/* ---------- 1.3.1: Ablauf fly-in ("Einfliegen animieren"). Pre-state only once view.js marks the section,
   so without JS / with reduced motion everything is visible. Desktop: steps left to right, line draws,
   "Bajzel übernimmt" bar fills. Phone/tablet: each step slides in as it scrolls into view. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bajzel-sek--anim-ready .bajzel-sek__step {
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 260ms);
  }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in { opacity: 1; transform: none; }
  .bajzel-sek--anim-ready .bajzel-sek__step:not(:last-child) .bajzel-sek__marker::after {
    transform: scaleX(0); transform-origin: left center; transition: transform .45s ease-out;
    transition-delay: calc(var(--i, 0) * 260ms + 320ms);
  }
  .bajzel-sek--anim-ready .bajzel-sek__step:not(:last-child) .bajzel-sek__marker::before { opacity: 0; transition: opacity .2s ease; transition-delay: calc(var(--i, 0) * 260ms + 700ms); }
  .bajzel-sek--anim-ready.bajzel-sek .bajzel-sek__step.is-in:not(:last-child) .bajzel-sek__marker::after { transform: none; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bajzel-sek__marker::before { opacity: 1; }
  .bajzel-sek--anim-ready .bajzel-sek__lane { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--i, 0) * 260ms); }
  .bajzel-sek--anim-ready .bajzel-sek__lane--bajzel {
    background: linear-gradient(var(--bajzel-sek-ink), var(--bajzel-sek-ink)) left center / 0% 100% no-repeat; color: var(--bajzel-sek-ink);
    transition: opacity .3s ease, background-size .8s cubic-bezier(.6, 0, .2, 1), color .3s ease;
    transition-delay: calc(var(--i, 0) * 260ms), calc(var(--i, 0) * 260ms + 120ms), calc(var(--i, 0) * 260ms + 520ms);
  }
  .bajzel-sek--anim-ready.is-in .bajzel-sek__lane { opacity: 1; }
  .bajzel-sek--anim-ready.is-in .bajzel-sek__lane--bajzel { background-size: 100% 100%; color: var(--bajzel-sek-paper); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .bajzel-sek--anim-ready .bajzel-sek__step { transform: translateX(-28px); transition-delay: 0ms; }
  .bajzel-sek--anim-ready .bajzel-sek__step:not(:last-child) .bajzel-sek__marker::after { transform: scaleY(0); transform-origin: center top; transition: transform .6s ease-out; transition-delay: 250ms; }
}

/* ---------- 1.4.0: Kontakt spacing + form look like /kontakt/ (black accent instead of WPForms blue) ---------- */
/* The theme's block gap (margin-block-start ~1.2rem, end 0) beats .bajzel-sek's own margin, hence the higher specificity. */
.bajzel-sek.bajzel-sek--kontakt, .entry-content > .bajzel-sek--kontakt { margin-block-end: clamp(2.75rem, 7vw, 3.75rem); }
.bajzel-sek--kontakt .wpforms-container {
  --wpforms-label-color: #262626; --wpforms-label-sublabel-color: #7f7f7f; --wpforms-label-error-color: #ff0000;
  --wpforms-page-break-color: #dddddd;
  --wpforms-field-border-radius: 7px; --wpforms-field-border-color: #cccccc; --wpforms-field-border-color-spare: #cccccc;
  --wpforms-field-text-color: #444444;
  --wpforms-button-border-style: solid; --wpforms-button-border-radius: 7px;
  --wpforms-button-background-color: #111111; --wpforms-button-border-color: #cccccc;
  --wpforms-label-size-font-size: 14px; --wpforms-label-size-line-height: 17px;
}
/* 1.4.1: site's floating CTA hidden while the Kontakt form is in view (class set by view.js). Uses the button's own
   opacity/visibility/transform transition – fixed element, so no layout shift. */
#js-sticky-button.bajzel-sek-sticky-hidden, .dynamic-sticky-button.bajzel-sek-sticky-hidden {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateX(-50%) translateY(20px) !important;
}
/* Focus ring, checked boxes and dropdown highlight derive from these variables in WPForms (modern markup), as on /kontakt/. */

/* ---------- 1.4.0: Leistungen "Einblenden animieren" – pure fade with a 6px rise, staggered (view.js sets --bajzel-sek-d). ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bajzel-sek--fade.bajzel-sek--anim-ready .bajzel-sek__item {
    opacity: 0; transform: translateY(6px);
    transition: opacity .7s ease, transform .7s ease; transition-delay: var(--bajzel-sek-d, 0ms);
  }
  .bajzel-sek--fade.bajzel-sek--anim-ready .bajzel-sek__item.is-in { opacity: 1; transform: none; }
}

/* ---------- 1.4.0: Ablauf icon gestures, once, right after a step has flown in (only with "Einfliegen animieren"). ---------- */
.bajzel-sek__icon .bi-spark { opacity: 0; }
.bajzel-sek__icon g, .bajzel-sek__icon .bi-check { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .bajzel-sek--anim-ready .bajzel-sek__step { --bajzel-sek-g: calc(var(--i, 0) * 260ms + 700ms); }
  /* Gespräch: bubbles pop one after the other. */
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-bubble1 { transform-origin: 20% 100%; animation: bajzel-sek-pop .5s cubic-bezier(.3, 1.6, .5, 1) var(--bajzel-sek-g) both; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-bubble2 { transform-origin: 80% 100%; animation: bajzel-sek-pop .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--bajzel-sek-g) + 380ms) both; }
  /* Organisation: the two to-dos get ticked one after the other. */
  .bajzel-sek--anim-ready .bajzel-sek__step .bi-check { stroke-dasharray: 1; }
  .bajzel-sek--anim-ready .bajzel-sek__step:not(.is-in) .bi-check { stroke-dashoffset: 1; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-check1 { animation: bajzel-sek-tick .35s ease-out var(--bajzel-sek-g) both; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-check2 { animation: bajzel-sek-tick .35s ease-out calc(var(--bajzel-sek-g) + 450ms) both; }
  /* Genießen: the glasses tilt together, clink (tiny spark) and settle. */
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-glass1 { transform-origin: 50% 100%; animation: bajzel-sek-clink-l 1s ease-in-out var(--bajzel-sek-g) both; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-glass2 { transform-origin: 50% 100%; animation: bajzel-sek-clink-r 1s ease-in-out var(--bajzel-sek-g) both; }
  .bajzel-sek--anim-ready .bajzel-sek__step.is-in .bi-spark { animation: bajzel-sek-spark 1s ease-out var(--bajzel-sek-g) both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .bajzel-sek--anim-ready .bajzel-sek__step { --bajzel-sek-g: 650ms; }
}
@keyframes bajzel-sek-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14) rotate(-3deg); } 70% { transform: scale(.97) rotate(1.5deg); } 100% { transform: none; } }
@keyframes bajzel-sek-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bajzel-sek-clink-l { 0%, 100% { transform: none; } 35%, 45% { transform: rotate(9deg); } 55% { transform: rotate(6deg); } 62% { transform: rotate(9deg); } }
@keyframes bajzel-sek-clink-r { 0%, 100% { transform: none; } 35%, 45% { transform: rotate(-9deg); } 55% { transform: rotate(-6deg); } 62% { transform: rotate(-9deg); } }
@keyframes bajzel-sek-spark { 0%, 38% { opacity: 0; } 46% { opacity: 1; } 75%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .bajzel-sek * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .bajzel-sek__lane--bajzel, .bajzel-sek__step--bajzel .bajzel-sek__stepnum, .bajzel-sek__step--bajzel .bajzel-sek__who { forced-color-adjust: auto; } }