/* ==========================================================================
   WorkZen — Ratgeber-Artikel (wz-ratgeber.css)
   Enthält NUR das, was für den Ratgeber-Single-Artikel wirklich fehlt:
   Breadcrumb, Artikel-Kopf, Prose/Fließtext, Callout, Autorenbox, Teilen,
   Weiterlesen-Kacheln. Nav, Footer, Mega-Menu, Gravity-Forms und der
   Lead-Block sind bereits eigene, live geschaltete Module (workzen-nav-css,
   workzen-mega-menu-css, workzen-gravityforms-css, workzen-leadblock-form-css)
   und werden hier NICHT erneut definiert, um Konflikte zu vermeiden.

   Eigener Variablen-Präfix --wzrg- (WorkZen Ratgeber), da --wz- laut
   Projekt-Doku für Header/Footer reserviert ist und generische Namen
   (--bg/--ink/--petrol ohne Präfix) mit anderen Modulen kollidieren könnten.
   ========================================================================== */

:root{
  --wzrg-ink:#252525;         /* Text: #252525 */
  --wzrg-dark:#252525;        /* Dunkler Sektions-Hintergrund (Artikel-Kopf) */
  --wzrg-grey:#505050;        /* Muted/Grau */
  --wzrg-grey-light:#858585;
  --wzrg-line:#E1E1E1;        /* Border */
  --wzrg-sect-grey:#F2F4F3;   /* Karten-/Sektionshintergrund hell */
  --wzrg-petrol:#255959;      /* Deep Green */
  --wzrg-petrol-light:#76A89A;/* Lighter Green, für Akzente auf dunklem Grund */
  --wzrg-gold:#F2CC85;        /* Sunset Yellow */
  --wzrg-gold-pale:#F7E8CB;   /* Sunset Yellow Pale, Callout-Hintergrund */
  --wzrg-radius:10px;
  --wzrg-radius-lg:14px;
  --wzrg-font:'Montserrat',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

/* Container/Platzhalter/Blob — nur falls im Theme nicht schon global vorhanden.
   Falls .container bereits global definiert ist: diesen Block einfach löschen. */
.wzrg-container{width:100%;max-width:1512px;margin:0 auto;padding:0 40px;}
.wzrg-blob{position:absolute;border-radius:50%;pointer-events:none;}
.wzrg-placeholder{color:rgba(255,255,255,.25);font-size:13px;}

/* Breadcrumb (Rahmen kommt aus single.php, Inhalt von Yoast) */
.breadcrumb{background:var(--wzrg-sect-grey);font-size:12.5px;color:var(--wzrg-grey);padding:14px 0;font-family:var(--wzrg-font);}
.breadcrumb a{color:var(--wzrg-grey);}
.breadcrumb a:hover{color:var(--wzrg-petrol);}
.breadcrumb .breadcrumb_last{color:var(--wzrg-ink);font-weight:600;}

/* Artikel-Kopf (dunkel) */
.artikel__head{background:var(--wzrg-dark);color:#fff;position:relative;overflow:hidden;padding:54px 0 60px;font-family:var(--wzrg-font);}
.artikel__cat{
  display:inline-block;
  font-family:var(--e-global-typography-accent-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-accent-font-weight,600);
  font-size:var(--e-global-typography-accent-font-size,11px);
  letter-spacing:var(--e-global-typography-accent-letter-spacing,1.5px);
  text-transform:var(--e-global-typography-accent-text-transform,uppercase);
  color:var(--wzrg-petrol-light);background:rgba(74,140,122,.18);padding:5px 14px;border-radius:13px;margin-bottom:20px;
}
.artikel__title{
  color:#fff;
  font-family:var(--e-global-typography-339b629-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-339b629-font-weight,600);
  font-size:var(--e-global-typography-339b629-font-size,38px);
  line-height:1.18;max-width:820px;margin-bottom:18px;
}
.artikel__lead{color:rgba(255,255,255,.55);font-size:16.5px;line-height:1.6;max-width:720px;margin:0;}
.artikel__byline{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
.artikel__author{display:flex;align-items:center;gap:12px;}
.artikel__avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);position:relative;flex:0 0 auto;}
.artikel__avatar::before{content:"";position:absolute;left:50%;top:11px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--wzrg-petrol-light);}
.artikel__avatar::after{content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:24px;height:13px;border-radius:12px 12px 0 0;background:var(--wzrg-petrol-light);}
.artikel__author .name{font-size:13.5px;font-weight:600;color:#fff;}
.artikel__author .role{font-size:11.5px;color:rgba(255,255,255,.4);}
.artikel__facts{display:flex;gap:20px;color:rgba(255,255,255,.4);font-size:12px;border-left:1px solid rgba(255,255,255,.12);padding-left:20px;}
.artikel__cover{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:var(--wzrg-radius-lg);min-height:300px;display:flex;align-items:center;justify-content:center;margin-top:40px;position:relative;z-index:1;overflow:hidden;}

/* Prose / Fließtext */
.prose{max-width:920px;margin:54px auto 30px;font-family:var(--wzrg-font);}
.prose>*+*{margin-top:22px;}
.prose h2,.prose .wp-block-heading{
  font-family:var(--e-global-typography-a08bca1-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-a08bca1-font-weight,600);
  font-size:var(--e-global-typography-a08bca1-font-size,26px);
  line-height:var(--e-global-typography-a08bca1-line-height,1.3);
  margin-top:20px;padding-top:20px;color:var(--wzrg-ink);
}
.prose h2:first-child{padding-top:0;}
.prose h3{
  font-family:var(--e-global-typography-d8062aa-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-d8062aa-font-weight,600);
  font-size:var(--e-global-typography-d8062aa-font-size,18px);
  line-height:var(--e-global-typography-d8062aa-line-height,1.4);
  color:var(--wzrg-ink);margin-top:6px;
}
.prose h4{
   font-family:var(--e-global-typography-46c9e20-font-family,var(--wzrg-font));
   font-weight:var(--e-global-typography-46c9e20-font-weight,600);
   font-size:var(--e-global-typography-46c9e20-font-size,18px);
   line-height:var(--e-global-typography-46c9e20-line-height,1.4);
   color:var(--wzrg-petrol);margin-top:6px;
}
.prose p{
  font-family:var(--e-global-typography-1c7da18-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-1c7da18-font-weight,400);
  font-size:var(--e-global-typography-1c7da18-font-size,15.5px);
  line-height:var(--e-global-typography-1c7da18-line-height,1.7);
  color:var(--wzrg-grey);
}
.prose strong{color:var(--wzrg-ink);font-weight:600;}

/* Bulletlisten — sowohl die manuell benannte .bullets-Klasse als auch
   das native Gutenberg-<ul> (core/list) landen auf demselben Look */
.prose ul.bullets,
.prose ul:not(.bullets){display:flex;flex-direction:column;gap:12px;margin:4px 0;list-style:none;padding:0;}
.prose ul.bullets li,
.prose ul:not(.bullets) li{position:relative;padding-left:28px;font-size:15px;line-height:1.6;color:var(--wzrg-grey);}
.prose ul.bullets li::before,
.prose ul:not(.bullets) li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--wzrg-petrol);font-weight:700;}

/* Bild im Fließtext (optional, pflegbar über natives Gutenberg-Bild-Block) */
.prose .figure,
.prose figure.wp-block-image{background:var(--wzrg-dark);border-radius:var(--wzrg-radius);min-height:260px;position:relative;overflow:hidden;}
.prose figure.wp-block-image img{width:100%;border-radius:var(--wzrg-radius);display:block;position:relative;z-index:1;}
.prose .figure::after{content:"";position:absolute;inset:0;border-radius:var(--wzrg-radius);background:var(--wzrg-petrol);opacity:.18;}
.prose .figure .wzrg-placeholder{position:relative;z-index:1;}
.prose .figcap,
.prose figure.wp-block-image figcaption{font-size:12px;color:var(--wzrg-grey-light);margin-top:10px;text-align:center;}

/* Zitat, falls im Editor genutzt */
.prose blockquote{border-left:4px solid var(--wzrg-petrol);padding-left:20px;font-style:italic;color:var(--wzrg-grey);margin:0;}

/* Callout / Experten-Tipp — sowohl die manuelle .callout-Klasse als auch
   der Gutenberg-Block-Style "wz-callout" (core/group) */
.callout,
.prose .wp-block-group.is-style-wz-callout{background:var(--wzrg-gold-pale);border-left:4px solid var(--wzrg-gold);border-radius:8px;padding:22px 24px;}
.callout__label,
.prose .wp-block-group.is-style-wz-callout::before{content:"EXPERTEN-TIPP";display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#9a7b2e;margin-bottom:8px;}
.callout p,
.prose .wp-block-group.is-style-wz-callout p{font-size:14.5px;line-height:1.6;color:var(--wzrg-grey);margin:0;}

/* Autorenbox */
.authorbox{display:flex;gap:20px;align-items:flex-start;background:var(--wzrg-sect-grey);border:1px solid var(--wzrg-line);border-radius:var(--wzrg-radius);padding:26px;margin-top:14px;font-family:var(--wzrg-font);}
.authorbox__avatar{width:64px;height:64px;border-radius:50%;background:rgba(37,89,89,.12);position:relative;flex:0 0 auto;}
.authorbox__avatar::before{content:"";position:absolute;left:50%;top:16px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:var(--wzrg-petrol);}
.authorbox__avatar::after{content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:32px;height:18px;border-radius:16px 16px 0 0;background:var(--wzrg-petrol);}
.authorbox h4{font-size:15px;margin:0 0 2px;font-weight:600;}
.authorbox .role{font-size:12px;color:var(--wzrg-petrol);font-weight:600;margin-bottom:10px;}
.authorbox p{font-size:12.5px;color:var(--wzrg-grey);line-height:1.6;margin:0;}

/* Teilen */
.share{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:12.5px;color:var(--wzrg-grey);font-family:var(--wzrg-font);}
.share a{width:34px;height:34px;border-radius:50%;background:var(--wzrg-sect-grey);border:1px solid var(--wzrg-line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--wzrg-grey);text-decoration:none;}
.share a:hover{background:var(--wzrg-petrol);color:#fff;border-color:var(--wzrg-petrol);}

/* Weiterlesen — Eyebrow, Grid, Artikel-Karten */
.wzrg-eyebrow{
  display:inline-block;
  font-family:var(--e-global-typography-accent-font-family,var(--wzrg-font));
  font-weight:var(--e-global-typography-accent-font-weight,500);
  font-size:var(--e-global-typography-accent-font-size,13px);
  letter-spacing:var(--e-global-typography-accent-letter-spacing,2px);
  text-transform:var(--e-global-typography-accent-text-transform,uppercase);
  color:var(--wzrg-petrol);margin-bottom:14px;
}
.wzrg-section--grey{background:var(--wzrg-sect-grey);padding:70px 0;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px;}
.proj{background:#fff;border:1px solid var(--wzrg-line);border-radius:12px;overflow:hidden;font-family:var(--wzrg-font);}
.proj__media{background:var(--wzrg-dark);height:180px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.proj__media::after{content:"";position:absolute;inset:0;background:var(--wzrg-petrol);opacity:.18;}
.proj__media .wzrg-placeholder{position:relative;z-index:1;}
.proj__body{padding:20px;}
.proj__body h3{font-size:16px;margin:0 0 6px;color:var(--wzrg-ink);}
.proj__body p{font-size:12px;color:var(--wzrg-grey);margin:0;}
.art__cat{font-size:10.5px;font-weight:600;letter-spacing:1px;color:var(--wzrg-petrol);}
.art__meta{display:flex;justify-content:space-between;font-size:11px;color:var(--wzrg-grey);margin-top:14px;}
.link-arrow{color:var(--wzrg-petrol);font-weight:500;font-size:13px;}

/* Lead-Block — jetzt selbstständig hier definiert, unabhängig von einem
   eventuell abweichenden externen Modul (siehe Rückmeldung: Klassen aus
   workzen-leadblock-form.css griffen nicht wie angenommen). */
.wzrg-leadblock{background:var(--wzrg-petrol);color:#fff;position:relative;overflow:hidden;padding:70px 0;text-align:center;font-family:var(--wzrg-font);}
.wzrg-leadblock__inner{position:relative;z-index:1;}
.wzrg-leadblock h2{color:#fff;font-size:28px;margin:0 0 10px;font-weight:600;}
.wzrg-leadblock p{color:rgba(255,255,255,.75);font-size:15px;margin:26px 0 26px;}
.wzrg-leadblock__form{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;}
.wzrg-leadblock__form input,
.wzrg-leadblock__form select{border-radius:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;padding:14px 16px;font-size:14px;font-family:var(--wzrg-font);}
.wzrg-leadblock__form input::placeholder{color:rgba(255,255,255,.6);}
.wzrg-leadblock .btn--light{background:#fff;color:var(--wzrg-petrol);border:none;border-radius:8px;padding:14px 22px;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--wzrg-font);}
.wzrg-leadblock__note{margin-top:28px;font-size:12.5px;color:rgba(255,255,255,.6);}

/* WICHTIG: Falls dieses Formular via Gravity Forms eingebettet ist, rendert
   GF sein eigenes Markup (gform_wrapper, gfield usw.) statt der obigen
   .wzrg-leadblock__form-Struktur. Die GF-Feld-/Button-Optik selbst kommt
   dann aus workzen-gravityforms-css (Custom-CSS-Class auf dem Formular,
   z. B. wz-form-kalkulator) — NICHT aus den Regeln hier. Die Regeln oben
   greifen nur, solange das HTML-Fallback-Formular aktiv ist. */

/* Responsive */
@media(max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:720px){
  .wzrg-container{padding:0 20px;}
  .wzrg-section--grey{padding:48px 0;}
  .artikel__facts{border-left:none;padding-left:0;}
  .authorbox{flex-direction:column;}
  .grid-3{grid-template-columns:1fr;}
}