/* ============================================================
   b:work – Design-Feinschliff (repliziert bworkpro.de)
   Nutzt die theme.json-Tokens als CSS-Variablen.
   ============================================================ */

:root{
  --c-primary: var(--wp--preset--color--primary, #190023);
  --c-accent:  var(--wp--preset--color--accent, #f0f55f);
  --c-focus:   var(--wp--preset--color--focus, #c534ff);
  --c-warm:    var(--wp--preset--color--secondary, #f4f3ee);
  --c-text:    var(--wp--preset--color--text, #20221f);
  --c-muted:   var(--wp--preset--color--muted, #a79fa0);
  --c-outline: var(--wp--preset--color--outline, #c5c4b9);
  --r-s: 8px; --r-m: 16px;
}

/* ---------- Utilities ---------- */
.roofline{ text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; font-weight:700; color: currentColor; opacity:.6; margin:0 0 .5rem; }
/* Gedämpfter Fließtext – erbt die Sektions-Textfarbe (Section-Style), nur reduzierte Deckkraft */
.bwork-muted{ opacity:.78; }

/* ---------- Sektionen & Headlines ---------- */
.bwork-sec{ padding-block: clamp(3rem, 7vw, 6rem); }
.bwork-sec > .wp-block-group__inner-container,
.bwork-sec{ }

.bwork-sec h2{
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
/* Seiten-Heros (dunkle Sektion mit H1) auf Hero-Skala kappen – sonst greift die riesige Default-H1 */
.bwork-sec.is-style-dunkel h1{
  font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.02em;
  max-width: 20ch; margin-inline: auto;
}
.bwork-sec .bwork-lead{
  font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.6;
  max-width: 46rem; margin-inline: auto;
}
.bwork-card h3,
.bwork-feature h3{ font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 700; line-height: 1.3; }

/* ---------- Buttons ---------- */
.wp-block-button__link{
  border-radius: 8px; padding: .85rem 2rem; font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wp-block-button__link:hover{ transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link{ border-width: 2px; }

/* ---------- Icon-Kacheln (gelb) ---------- */
.bwork-ic{
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--c-accent); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.bwork-ic .material-icons-round{ font-size: 28px; }
/* dezente Icon-Kachel (auf dunklem Grund) */
.bwork-ic--ghost{ background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); }

/* ---------- Karten ---------- */
.bwork-card{
  background: #fff; border: 2px solid var(--c-warm); border-radius: 24px;
  padding: clamp(1.25rem, 2.4vw, 2rem); height: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.bwork-card:hover{ border-color: var(--c-focus); box-shadow: 0 12px 34px rgba(25,0,35,.10); }
/* Karten auf dunklem Grund */
.bwork-card--dark{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.bwork-card--dark h3{ color: #fff; }
.bwork-card--dark p{ color: rgba(255,255,255,.72); }

/* ---------- Check-Listen (Inline-SVG, keine Icon-Font) ---------- */
.bwork-checks{ list-style: none; margin: 0; padding: 0; }
.bwork-checks li{
  position: relative; padding: .28rem 0 .28rem 1.9rem; line-height: 1.45;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23f0f55f'/><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23190023' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 0 .3em;
  background-size: 1.25rem 1.25rem;
}

/* ---------- Hero ---------- */
.bwork-hero h1{ font-size: clamp(2rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.02em; color:#fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.bwork-hero p{ color:#fff; }
.bwork-hero .bwork-badges{ color: rgba(255,255,255,.92); font-weight: 500; }

/* ---------- Pain (dunkle Sektion) ---------- */
.bwork-dark{ background: var(--c-primary); color:#fff; }
.bwork-dark h2,.bwork-dark h3{ color:#fff; }
.bwork-dark .bwork-lead,.bwork-dark p{ color: rgba(255,255,255,.72); }

/* ---------- Stats (UniverseStats) ---------- */
.bwork-stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: .75rem; max-width: 64rem; margin: 0 auto; }
@media(min-width:782px){ .bwork-stats{ grid-template-columns: repeat(4,1fr); gap: 1.25rem; } }
.bwork-stat{ border-radius:16px; padding: clamp(1rem,3vw,2rem); display:flex; align-items:center; justify-content:center; text-align:center; min-height: 120px; }
.bwork-stat--accent{ background: var(--c-accent); }
.bwork-stat--white{ background:#fff; border:1px solid var(--c-warm); }
.bwork-stat--wide{ grid-column: span 2; }
.bwork-stat .num{ font-size: clamp(1.9rem,4.5vw,3.25rem); font-weight:700; color: var(--c-primary); line-height:1; }
.bwork-stat .lbl{ font-size:.9rem; color: var(--c-primary); opacity:.75; margin-top:.4rem; font-weight:500; }
.bwork-stat img{ border-radius:16px; width:100%; height:100%; object-fit:cover; }

/* ---------- Partner-Logos ---------- */
.bwork-partners{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem 1.5rem; max-width:64rem; margin: 1.5rem auto 0; align-items:center; }
@media(min-width:640px){ .bwork-partners{ grid-template-columns: repeat(4,1fr); } }
@media(min-width:782px){ .bwork-partners{ grid-template-columns: repeat(6,1fr); } }
.bwork-partners figure{ margin:0; display:flex; align-items:center; justify-content:center; height:56px; }
.bwork-partners img{ max-height:40px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.65; transition:.2s; }
.bwork-partners img:hover{ filter:none; opacity:1; }

/* ---------- FAQ (flaches Linien-Design, linksbündig) ---------- */
.bwork-faq{ max-width: 56rem; margin: var(--wp--preset--spacing--lg,2rem) auto 0; }
.bwork-faq details{ border-bottom: 1px solid var(--c-outline, #c5c4b9); }
.bwork-faq summary{
  list-style:none; cursor:pointer; padding: 1.25rem 0; font-weight:700; color: var(--c-primary);
  font-size: clamp(1.05rem,1.6vw,1.25rem); line-height:1.3;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
}
.bwork-faq summary::-webkit-details-marker{ display:none; }
.bwork-faq summary::after{
  content:""; flex:0 0 auto; width:1.4rem; height:1.4rem; transition: transform .3s ease;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%23190023' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}
.bwork-faq details[open] summary::after{ transform: rotate(180deg); }
.bwork-faq details > :not(summary){ padding: 0 0 1.25rem; color: var(--c-text); opacity:.8; line-height:1.65; max-width: 48rem; }

/* ---------- Footer ---------- */
.bwork-footer{ background: var(--c-primary); color: rgba(255,255,255,.72); }
.bwork-footer a{ color: rgba(255,255,255,.72); text-decoration:none; }
.bwork-footer a:hover{ color: var(--c-accent); }
.bwork-footer .wp-social-link{ background: transparent; }

/* Top-Reihe: Logo links · Social zentriert · Buttons rechts */
.bwork-footer .bwork-footer-top{ gap: 1.5rem 2rem; }
.bwork-footer .bwork-powered{ color: rgba(255,255,255,.5); margin:.35rem 0 0; }
.bwork-footer .bwork-footer-social{ flex: 1 1 auto; justify-content:center; gap:.5rem; }
.bwork-footer .bwork-footer-social .wp-social-link{ color:#fff; }
.bwork-footer .bwork-footer-cta{ gap:.75rem; }
.bwork-footer .bwork-footer-cta .is-style-outline .wp-block-button__link:hover{ background: rgba(255,255,255,.1); }

/* Link-Spalten (Footer-Navigation) */
.bwork-footer .bwork-footer-nav{ border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--wp--preset--spacing--lg,2rem); }
.bwork-footer .footer-col-title{ text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.55); margin: 0 0 .8rem; }
.bwork-footer .bwork-footer-nav ul{ list-style: none; margin: 0; padding: 0; }
.bwork-footer .bwork-footer-nav li{ margin: .35rem 0; }
.bwork-footer .bwork-footer-nav a{ color: rgba(255,255,255,.75); font-size: .95rem; }
.bwork-footer .bwork-footer-nav a:hover{ color: var(--c-accent); }

/* Bottom: zentriert */
.bwork-footer .bwork-footer-bottom{ margin-top: var(--wp--preset--spacing--xl,3rem); color: rgba(255,255,255,.55); }
.bwork-footer .bwork-footer-bottom p{ margin:.35rem 0; }
.bwork-footer .bwork-footer-legal a{ color: rgba(255,255,255,.7); }

@media (max-width:781px){
  .bwork-footer .bwork-footer-top{ justify-content:center; text-align:center; }
  .bwork-footer .bwork-footer-social{ flex-basis:100%; }
}

/* ---------- Header / Nav ---------- */
/* Grundfarbe der Nav-Links weiß (sonst greift die globale Link-Farbe = dunkles Lila → unsichtbar) */
.bwork-header .wp-block-navigation a,
.bwork-header .wp-block-navigation .wp-block-navigation-item__content,
.bwork-header .wp-block-navigation-submenu__toggle{ color:#fff; }
.bwork-header .wp-block-navigation a:hover,
.bwork-header .wp-block-navigation-submenu__toggle:hover{ color: var(--c-accent); }
/* Mehrwortige Nav-Items nicht umbrechen */
.bwork-header .wp-block-navigation .wp-block-navigation-item__content{ white-space:nowrap; }

/* Dropdown-Submenü (Lösungen / Handwerk) – dunkel, damit weiße Links sichtbar bleiben */
.bwork-header .wp-block-navigation .wp-block-navigation__submenu-container{
  background-color: var(--c-primary);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  padding: .35rem 0;
  min-width: 16rem;
}
.bwork-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  color: #fff;
  padding: .5rem 1rem;
}
.bwork-header .wp-block-navigation__submenu-container a:hover{ color: var(--c-accent); }
/* Submenü-Toggle (openSubmenusOnClick) als Button – Farbe/Reset an Header anpassen */
.bwork-header .wp-block-navigation__submenu-icon{ margin-left: .25rem; }
.bwork-header .wp-block-navigation-submenu__toggle{ color: inherit; }

/* Kein Abstand zwischen Header/Footer und Sektionen (Root-blockGap überschreiben) */
.wp-site-blocks > main,
.wp-site-blocks > footer{ margin-block-start: 0; }

/* ---------- Sektionen bündig (keine weißen Lücken) ---------- */
main.wp-block-group{ gap: 0; }
main > .bwork-sec, main > .bwork-hero{ margin-block: 0 !important; }

/* ============================================================
   Hero (Figma: dunkel, Text links + bwork-sign rechts)
   ============================================================ */
.bwork-hero{ background: var(--c-primary); }
.bwork-hero .bwork-eyebrow{ text-transform:uppercase; letter-spacing:.22em; font-size:.8rem; font-weight:700; color:#fff; margin:0 0 1rem; }
.bwork-hero .bwork-eyebrow .hl{ color: var(--c-accent); }
.bwork-hero h1{ font-size: clamp(2rem,4.6vw,3.25rem); line-height:1.1; letter-spacing:-.02em; color:#fff; text-shadow:none; margin:0 0 1rem; }
.bwork-hero p{ color: rgba(255,255,255,.78); }

/* bwork-sign: Foto in organischer Blob-Form + gelbe Punkte (das ":") */
.bwork-sign-media{ position:relative; max-width:420px; margin-inline:auto; }
.bwork-sign-photo{
  width:100%; aspect-ratio:1/1.08; background-size:cover; background-position:center;
  border-radius: 46% 54% 48% 52% / 56% 44% 60% 40%;
}
.bwork-sign-media .bwork-eye{ position:absolute; border-radius:50%; background: var(--c-accent); width:clamp(40px,6vw,66px); aspect-ratio:1; }
.bwork-sign-media .bwork-eye--1{ left:-7%; top:30%; }
.bwork-sign-media .bwork-eye--2{ left:-7%; top:52%; }
@media (max-width:781px){ .bwork-sign-media{ margin-top: var(--wp--preset--spacing--xl,3rem); } }

/* ============================================================
   Content-Sektion (Bild+Text / Text+Bild, Bild rund)
   ============================================================ */
.bwork-content-sec .bwork-media-img img{ border-radius:24px; width:100%; height:auto; display:block; }
.bwork-content-sec h2{ font-size: clamp(1.6rem,3vw,2.25rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin:0 0 1rem; }

/* ============================================================
   CTA mit bwork-sign
   ============================================================ */
.bwork-cta .bwork-cta-sign{ margin:0 auto; }
.bwork-cta .bwork-cta-sign img{ max-width:380px; width:100%; height:auto; display:block; margin-inline:auto; }
@media (max-width:781px){ .bwork-cta .bwork-cta-sign{ margin-top: var(--wp--preset--spacing--lg,2rem); } }

/* ---------- Registrierungs-Formular ---------- */
.bwork-form-card{
  background:#fff; border-radius:24px; padding: clamp(1.5rem,3vw,2.5rem);
  max-width: 720px; margin: var(--wp--preset--spacing--lg, 2rem) auto 0;
  box-shadow: 0 20px 50px rgba(25,0,35,.10); border:1px solid var(--c-warm);
}
.bwork-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bwork-form .full{ grid-column: 1 / -1; }
.bwork-form label{ display:block; font-size:.85rem; font-weight:500; color: var(--c-primary); margin-bottom:.35rem; }
.bwork-form input,
.bwork-form select{
  width:100%; padding:.8rem 1rem; border:1.5px solid var(--c-warm); border-radius:8px;
  font: inherit; color: var(--c-text); background:#fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.bwork-form input:focus,
.bwork-form select:focus{ outline:none; border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(197,52,255,.15); }
.bwork-form .agb{ display:flex; gap:.6rem; align-items:flex-start; font-size:.85rem; color: var(--c-text); }
.bwork-form .agb input{ width:auto; margin-top:.2rem; }
.bwork-form .agb a{ color: var(--c-focus); }
.bwork-form .submit{
  width:100%; border:none; cursor:pointer; background: var(--c-accent); color: var(--c-primary);
  font-weight:700; font-size:1.05rem; padding:1rem; border-radius:8px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.bwork-form .submit:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(240,245,95,.4); }
.bwork-form .hint{ grid-column:1/-1; text-align:center; font-size:.8rem; color: var(--c-text); opacity:.65; }
@media (max-width: 600px){ .bwork-form{ grid-template-columns: 1fr; } }

/* 3-Schritt-Leiste (horizontal, Reserve-Variante) */
.bwork-steps{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top: var(--wp--preset--spacing--md,1.5rem); }
.bwork-steps .step{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; color: var(--c-primary); }
.bwork-steps .num{ width:28px; height:28px; border-radius:50%; background:var(--c-accent); color:var(--c-primary); font-weight:700; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; }

/* ============================================================
   Registrierung – Figma-Variante (dunkle Sektion, 2-spaltig)
   ============================================================ */
.bwork-reg{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; max-width:64rem; margin-inline:auto; }
@media (max-width: 860px){ .bwork-reg{ grid-template-columns: 1fr; } }

.bwork-reg .eyebrow{ text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; font-weight:700; color: rgba(255,255,255,.6); margin:0 0 1rem; }
.bwork-reg h2{ color:#fff; font-size: clamp(1.9rem,3.6vw,2.75rem); line-height:1.12; letter-spacing:-.02em; margin:0 0 2rem; }
.bwork-reg h2 .hl{ color: var(--c-accent); }

.bwork-reg-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.6rem; }
.bwork-reg-steps li{ display:flex; gap:1rem; align-items:flex-start; }
.bwork-reg-steps .num{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.bwork-reg-steps li:first-child .num{ background:var(--c-accent); color:var(--c-primary); }
.bwork-reg-steps li:not(:first-child) .num{ background:#fff; color:var(--c-primary); }
.bwork-reg-steps .t{ color:#fff; font-weight:700; font-size:1.25rem; line-height:1.2; }
.bwork-reg-steps .d{ color: rgba(255,255,255,.7); font-size:.95rem; margin-top:.25rem; }

/* Gelbe Formular-Card */
.bwork-reg-card{ background: var(--c-accent); border-radius:24px; padding: clamp(1.5rem,3vw,2.5rem); }
.bwork-reg-card h3{ text-align:center; color:var(--c-primary); font-size:1.6rem; font-weight:700; margin:0 0 1.5rem; }
.bwork-reg-card .field{ margin-bottom:1.1rem; }
.bwork-reg-card label{ display:block; font-size:.9rem; font-weight:700; color:var(--c-primary); margin-bottom:.4rem; }
.bwork-reg-card input,
.bwork-reg-card select{
  width:100%; padding:.85rem 1rem; border:none; border-radius:10px; background:#fff;
  font: inherit; color:var(--c-text);
}
.bwork-reg-card input::placeholder{ color:#9a9a93; }
.bwork-reg-card input:focus,
.bwork-reg-card select:focus{ outline:2px solid var(--c-primary); outline-offset:1px; }
.bwork-reg-card .submit{
  width:100%; border:none; cursor:pointer; background:var(--c-primary); color:#fff;
  font-weight:700; font-size:1.05rem; padding:1rem; border-radius:10px; margin-top:.5rem;
  transition: transform .15s ease, opacity .15s ease;
}
.bwork-reg-card .submit:hover{ transform: translateY(-1px); opacity:.92; }
.bwork-reg-card .fineprint{ text-align:center; font-size:.75rem; color: rgba(25,0,35,.7); margin:.9rem 0 0; }
.bwork-reg-card .fineprint a{ color:var(--c-primary); text-decoration:underline; }
.bwork-reg-card{ position:relative; }

/* Loader-Overlay während der Verarbeitung */
.bwork-loader{ position:absolute; inset:0; background: rgba(240,245,95,.94); border-radius:24px; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; color:var(--c-primary); font-weight:700; }
.bwork-loader.show{ display:flex; }
.bwork-spinner{ width:44px; height:44px; border:4px solid rgba(25,0,35,.2); border-top-color:var(--c-primary); border-radius:50%; animation: bwork-spin .8s linear infinite; }
@keyframes bwork-spin{ to{ transform: rotate(360deg); } }
.bwork-form-error{ color:#8a0014; background:#fff; border-radius:8px; padding:.6rem .8rem; font-size:.85rem; margin-top:.8rem; text-align:center; display:none; }
.bwork-form-error.show{ display:block; }
.bwork-form-success{ background:var(--wp--preset--color--secondary); border-radius:8px; padding:1.25rem 1.5rem; text-align:center; font-weight:500; }

/* ============================================================
   Preis-Sektion (Figma-Variante)
   ============================================================ */
.bwork-toggle{ display:inline-flex; gap:.25rem; background: var(--c-warm); border-radius:9999px; padding:.3rem; margin: 0 auto var(--wp--preset--spacing--lg,2rem); }
.bwork-toggle button{ border:none; cursor:pointer; background:transparent; font:inherit; font-weight:500; color: var(--c-primary); padding:.5rem 1.25rem; border-radius:9999px; }
.bwork-toggle button.active{ background: var(--c-accent); }
.bwork-toggle .save{ color:#3d7821; font-weight:600; }

.bwork-plans{ display:grid; grid-template-columns: repeat(2, minmax(0,360px)); gap:1.5rem; justify-content:center; align-items:stretch; }
@media (max-width:760px){ .bwork-plans{ grid-template-columns: 1fr; max-width:420px; margin-inline:auto; } }
.bwork-plan{ background:#fff; border:1.5px solid var(--c-outline,#c5c4b9); border-radius:24px; padding: clamp(1.5rem,2.5vw,2rem); display:flex; flex-direction:column; }
.bwork-plan--featured{ background: var(--c-accent); border-color: var(--c-accent); }
.bwork-plan__name{ text-align:center; font-weight:700; font-size:1.25rem; color: var(--c-primary); }
.bwork-plan__price{ text-align:center; font-weight:700; font-size: clamp(1.6rem,3vw,2.1rem); color: var(--c-primary); margin:.25rem 0 0; }
.bwork-plan__price small{ font-size:.9rem; font-weight:500; opacity:.7; }
.bwork-plan__price .y-price{ display:none; }
.bwork-plans.is-yearly .bwork-plan__price .m-price{ display:none; }
.bwork-plans.is-yearly .bwork-plan__price .y-price{ display:inline; }
.bwork-plan__desc{ text-align:center; color: var(--c-text); opacity:.75; font-size:.92rem; margin:.75rem 0 1.25rem; }
.bwork-plan__btn{ display:block; text-align:center; border-radius:8px; padding:.8rem 1rem; font-weight:600; text-decoration:none; }
.bwork-plan__btn--dark{ background: var(--c-primary); color:#fff; }
.bwork-plan__btn--outline{ background:transparent; color: var(--c-primary); border:1.5px solid var(--c-primary); }
.bwork-plan hr{ border:none; border-top:1px solid rgba(25,0,35,.15); margin:1.25rem 0; }
.bwork-plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.bwork-plan li{ position:relative; padding-left:1.6rem; font-size:.92rem; color: var(--c-primary); }
.bwork-plan li::before{
  content:""; position:absolute; left:0; top:.18em; width:1.05rem; height:1.05rem;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4 4 10-10' fill='none' stroke='%23190023' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* ============================================================
   Blog & Inhalts-Templates (Konzept: planung/mockups/blog/KONZEPT.md)
   ============================================================ */
:root{ --read: 720px; }

/* Lesespalte für Einzelseiten/Artikel */
.bwork-article{ max-width: var(--read); margin-inline: auto; }
.bwork-article > *{ margin-block: 0 1.1em; }
.bwork-article h2{ margin-top: 1.6em; }
.bwork-article .wp-block-image,
.bwork-article figure{ margin-block: 1.6em; }
.bwork-article .wp-block-image img{ border-radius: var(--r-m,16px); }

/* Detail-Layout: Artikel + Sidebar */
.bwork-single{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; }
.bwork-aside{ position:sticky; top:88px; align-self:start; display:flex; flex-direction:column; gap:24px; }
.bwork-aside .widget{ border:1px solid var(--c-outline); border-radius:var(--r-m,16px); padding:20px; }
.bwork-aside h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; color:var(--c-muted); margin:0 0 12px; }
.bwork-aside .toc a{ display:block; padding:6px 0; font-size:.92rem; border-bottom:1px solid #efeee8; color:var(--c-text); }
.bwork-related a{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:.9rem; }
.bwork-related .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-accent); margin-top:.45em; flex:0 0 auto; }

/* Sidebar-CTA-Card (dunkel) */
.bwork-aside .widget--cta{ background:var(--c-primary); color:#fff; border:none; }
.bwork-aside .widget--cta h3{ color:#fff; margin:0 0 .3em; }
.bwork-aside .widget--cta .trust{ font-size:.82rem; color:rgba(255,255,255,.7); margin:.4rem 0 1rem; }
.bwork-aside .widget--cta .wp-block-button__link{ width:100%; }

/* Kontextuelle Inline-CTA (im Beitrag, via the_content) */
.bwork-inline-cta{ background:var(--c-warm); border:1px solid var(--c-outline); border-left:4px solid var(--c-accent);
  border-radius:var(--r-m,16px); padding:22px 24px; margin:32px 0;
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.bwork-inline-cta .txt{ max-width:60%; }
.bwork-inline-cta strong{ display:block; font-size:1.05rem; color:var(--c-primary); }
.bwork-inline-cta .btn{ display:inline-block; padding:.7rem 1.3rem; border-radius:var(--r-s,8px); font-weight:700; }
.bwork-inline-cta .btn--dark{ background:var(--c-primary); color:#fff; }

/* Post-Grid (core/query → post-template als Grid) */
.bwork-postgrid .wp-block-post-template{ gap:24px; }
.bwork-postgrid li.wp-block-post{ border:1px solid var(--c-outline); border-radius:var(--r-m,16px); overflow:hidden; display:flex; flex-direction:column; }
.bwork-postgrid li.wp-block-post > *{ margin:0; }
.bwork-postgrid .wp-block-post-featured-image{ aspect-ratio:16/9; }
.bwork-postgrid .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; }
.bwork-postgrid .wp-block-post-title{ font-size:1.2rem; padding:18px 18px 0; }
.bwork-postgrid .wp-block-post-excerpt{ padding:0 18px; color:var(--c-muted); font-size:.95rem; }
.bwork-postgrid .wp-block-post-date{ padding:0 18px 18px; color:var(--c-muted); font-size:.8rem; margin-top:auto; }

/* Kategorie-Pills (core/categories → ul>li>a) */
.bwork-pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0; }
.bwork-pills li{ margin:0; }
.bwork-pills a{ display:inline-block; padding:.4rem .9rem; margin:0 .5rem .6rem 0;
  border:1px solid var(--c-outline); border-radius:999px; font-size:.9rem; color:var(--c-text); }
.bwork-pills a:hover{ background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* Newsletter / Lead-Magnet */
.bwork-news{ background:var(--c-warm); border-radius:var(--r-m,16px); padding:32px; }
.bwork-news .wp-block-columns{ align-items:center; }
.bwork-news input[type=email]{ padding:.7rem 1rem; border:1px solid var(--c-outline); border-radius:var(--r-s,8px); font:inherit; width:100%; }

/* Sticky Mobile-CTA-Bar */
.bwork-mobilebar{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--c-primary);
  padding:12px 16px; z-index:40; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -4px 20px rgba(0,0,0,.25); }
.bwork-mobilebar span{ color:#fff; font-size:.85rem; }

/* 404 */
.bwork-404{ text-align:center; padding:72px 0; }
.bwork-404 .code{ font-size:clamp(4rem,12vw,8rem); font-weight:800; color:var(--c-primary); line-height:1; }

@media (max-width:900px){
  .bwork-single{ grid-template-columns:1fr; }
  .bwork-aside{ position:static; }
  .bwork-inline-cta .txt{ max-width:100%; }
  .bwork-mobilebar{ display:flex; }
}

/* ---------- Formulare (Kontakt / Unterstützer) ---------- */
.bwork-cform{ display:grid; gap:.9rem; }
.bwork-cform label{ font-weight:500; font-size:.9rem; display:block; margin-bottom:.3rem; }
.bwork-cform input, .bwork-cform textarea{ width:100%; padding:.7rem 1rem; border:1px solid var(--c-outline); border-radius:var(--r-s); font:inherit; background:#fff; }
.bwork-cform textarea{ min-height:130px; resize:vertical; }
.bwork-cform .row{ display:flex; gap:.9rem; flex-wrap:wrap; }
.bwork-cform .row > *{ flex:1; min-width:200px; }
.bwork-cform .check{ display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--c-muted); }
.bwork-cform button{ border:0; cursor:pointer; width:100%; }
.bwork-contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:start; }
.bwork-contact-info a{ color:var(--c-primary); }
@media (max-width:782px){ .bwork-contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
 * Hilfe-Center (CPT hilfe_artikel) – Hub-Suche, Artikel-Bausteine
 * ============================================================ */

/* Hub-Suche (im dunklen Hero) */
.bwork-hsearch{ position:relative; max-width:34rem; margin:1.4rem auto 0; }
.bwork-hsearch__box{ display:flex; align-items:center; gap:.6rem; background:#fff; border-radius:9999px;
  padding:.7rem 1.1rem; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.bwork-hsearch__box .material-icons-round{ color:var(--c-muted); }
.bwork-hsearch__box input{ border:none; outline:none; font:inherit; flex:1; color:var(--c-text); background:transparent; }
.bwork-hsearch__results{ position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:20;
  background:#fff; color:var(--c-text); border:1px solid var(--c-outline); border-radius:var(--r-m,16px);
  box-shadow:0 12px 34px rgba(25,0,35,.18); overflow:hidden; text-align:left; }
.bwork-hsearch__results a{ display:block; padding:.7rem 1.1rem; text-decoration:none; color:var(--c-text); border-bottom:1px solid #efeee8; }
.bwork-hsearch__results a:last-child{ border-bottom:0; }
.bwork-hsearch__results a:hover{ background:var(--c-warm); color:var(--c-focus); }
.bwork-hsearch__empty{ display:block; padding:.7rem 1.1rem; color:var(--c-muted); font-size:.9rem; }

/* Artikel-Anzahl auf den Hub-Karten */
.bwork-count{ margin-top:auto; font-size:.82rem; font-weight:600; color:var(--c-muted); }

/* Bereichs-Archiv: Artikel-Karten-Grid (Titel + Auszug) */
.bwork-hgrid .wp-block-post-template{ gap:24px; }
.bwork-hgrid li.wp-block-post{ background:#fff; border:2px solid var(--c-warm); border-radius:var(--r-l,24px);
  padding:1.4rem; display:flex; flex-direction:column; gap:.4rem; transition:.15s; }
.bwork-hgrid li.wp-block-post:hover{ border-color:var(--c-focus); box-shadow:0 12px 34px rgba(25,0,35,.10); }
.bwork-hgrid li.wp-block-post > *{ margin:0; }
.bwork-hgrid .wp-block-post-title{ font-size:1.2rem; }
.bwork-hgrid .wp-block-post-title a{ text-decoration:none; }
.bwork-hgrid .wp-block-post-excerpt{ color:var(--c-muted); font-size:.95rem; }

/* Artikel: Breadcrumb + Meta-Zeile */
.bwork-crumb{ font-size:.85rem; color:var(--c-muted); margin:0 0 1rem; }
.bwork-crumb a{ text-decoration:none; color:var(--c-muted); }
.bwork-crumb a:hover{ color:var(--c-focus); }
.bwork-meta{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; font-size:.85rem; color:var(--c-muted); margin:.4rem 0 1.4rem; }

/* Artikel-Inhalt: nummerierte Schritte + Tipp-Callout (vom Import-Agent erzeugt) */
.bwork-article .bwork-steps{ counter-reset:s; list-style:none; padding:0; margin:1.2rem 0; }
.bwork-article .bwork-steps > li{ counter-increment:s; position:relative; padding:.15rem 0 1rem 3rem; min-height:2.4rem; }
.bwork-article .bwork-steps > li::before{ content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px;
  border-radius:50%; background:var(--c-accent); color:var(--c-primary); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; }
.bwork-tip{ background:var(--c-warm); border-left:4px solid var(--c-accent); border-radius:var(--r-m,16px);
  padding:1.1rem 1.3rem; margin:1.6rem 0; }
.bwork-tip b, .bwork-tip strong{ display:block; margin-bottom:.3rem; }

/* Artikel-Fuß: verwandte Artikel als Pills */
.bwork-hrelated{ margin-top:2rem; border-top:1px solid var(--c-outline); padding-top:1.2rem;
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; font-size:.9rem; }
.bwork-hrelated a{ background:var(--c-warm); padding:.45rem .9rem; border-radius:9999px; text-decoration:none; color:var(--c-text); }
.bwork-hrelated a:hover{ background:var(--c-accent); }

@media (max-width:600px){ .bwork-hgrid .wp-block-post-template{ grid-template-columns:1fr !important; } }