/*
Theme Name:   Premium Life Child
Theme URI:    https://premiumlife.io
Description:  Premium Life Child Theme – based on GeneratePress
Author:       Premium Life GmbH
Author URI:   https://premiumlife.io
Template:     generatepress
Version:      1.0.0
Text Domain:  premiumlife-child
*/

/* ============================================================
   IMPORT PARENT THEME
   ============================================================ */
@import url('../generatepress/style.css');

/* ============================================================
   GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap');

/* ============================================================
   CSS VARIABLES – EINMAL ÄNDERN, ÜBERALL WIRKSAM
   ============================================================ */
:root {
  /* Farben */
  --pl-white:        #ffffff;
  --pl-off-white:    #faf9f6;
  --pl-stone:        #f0ede6;
  --pl-orange:       #ff9238;
  --pl-orange-light: rgba(255, 146, 56, 0.06);
  --pl-orange-mid:   rgba(255, 146, 56, 0.12);
  --pl-orange-glow:  rgba(255, 146, 56, 0.25);
  --pl-dark:         #1c1a16;
  --pl-ink:          #3d3a34;
  --pl-ink-mid:      #7a756c;
  --pl-ink-light:    #b0a99e;
  --pl-green:        #2d9a5a;
  --pl-green-light:  rgba(45, 154, 90, 0.08);
  --pl-red:          #c93d42;
  --pl-red-light:    rgba(201, 61, 66, 0.06);

  /* Typografie */
  --pl-font-display: 'Playfair Display', Georgia, serif;
  --pl-font-body:    'Outfit', system-ui, sans-serif;

  /* Layout */
  --pl-max-width:    1120px;
  --pl-gap:          40px;
  --pl-radius:       12px;
  --pl-radius-pill:  100px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --accent: #ff9238;
  --contrast: #333333;
  --contrast-2: #747474;
  --contrast-3: #f0ede6;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--pl-font-body);
  color: var(--pl-ink);
  background: var(--pl-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   GENERATEPRESS OVERRIDES – GLOBAL
   ============================================================ */

/* Container */
.grid-container,
.site-content .grid-container {
  max-width: var(--pl-max-width);
  padding-left: var(--pl-gap);
  padding-right: var(--pl-gap);
}

/* Body Background */
.site-main,
.site {
  background: var(--pl-white);
}

/* ============================================================
   NAVIGATION – Avada-Werte
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s;
  padding: 0;
}

.site-header.scrolled,
.site-header.has-shadow {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.header-inner {
  max-width: var(--pl-max-width);
  margin: 0 auto;
  padding: 0 var(--pl-gap);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.site-logo img,
.custom-logo {
  height: 32px;
  width: auto;
}

.site-title {
  font-family: var(--pl-font-display);
  font-size: 20px;
  font-weight: 500;
  color: #333333;
  line-height: 1;
}

.site-title a {
  color: #333333;
}

/* Hauptmenü Links */
.main-navigation .main-nav ul,
.main-navigation ul,
#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.main-navigation .main-nav ul li a,
.main-navigation ul li a,
#main-nav ul li a {
  font-family: var(--pl-font-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #333333 !important;
  transition: color 0.25s !important;
  white-space: nowrap !important;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
#main-nav ul li a:hover,
#main-nav ul li.current-menu-item > a {
  color: #ff9238 !important;
}

/* Dropdown */
.main-navigation .main-nav ul ul,
.main-navigation ul ul {
  background: #f2efef !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  min-width: 180px !important;
}

.main-navigation .main-nav ul ul li a,
.main-navigation ul ul li a {
  color: #333333 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #dcdadb !important;
}

.main-navigation ul ul li a:hover {
  background: #f8f8f8 !important;
  color: #ff9238 !important;
}

/* Nav CTA Button – exakter GeneratePress Selektor */
.nav-button > a,
li.nav-button > a,
#main-nav .nav-button > a,
.main-navigation .nav-button > a,
.menu-item-button > a {
  background: #ff9238 !important;
  color: #ffffff !important;
  padding: 10px 24px !important;
  border-radius: 100px !important;
  font-family: var(--pl-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  transition: all 0.3s !important;
  border: 2px solid #ffffff !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.nav-button > a:hover,
li.nav-button > a:hover,
#main-nav .nav-button > a:hover,
.main-navigation .nav-button > a:hover {
  background: #f78127 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(255,146,56,0.35) !important;
  transform: translateY(-1px) !important;
}

/* Mobile Nav */
.mobile-menu-control-bar {
  background: #ffffff;
}

.navigation-search .search-form input {
  font-family: var(--pl-font-body);
}

/* ============================================================
   CHECKLIST – Avada-Werte
   ============================================================ */
.pl-checklist,
ul.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pl-checklist li,
ul.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.35em 0;
  font-family: var(--pl-font-body);
  font-size: 14px;
  color: #747474;
  line-height: 1.54;
}

.pl-checklist li::before,
ul.checklist li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #ff9238;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-top: 0;
}

/* ============================================================
   SEITEN-LAYOUT
   ============================================================ */

/* Header fix – GeneratePress Override */
.site-header,
#masthead {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Platz für fixed Header */
.site-content,
#content {
  padding-top: 64px !important;
  margin-top: 0 !important;
}

/* Health Check Buttons */
.hc-nx, #hcNx {
  background: #ff9238 !important;
  color: #ffffff !important;
  padding: 11px 28px !important;
  border-radius: 100px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--pl-font-body) !important;
  transition: all 0.3s !important;
}

.hc-nx:hover, #hcNx:hover {
  background: #f78127 !important;
  box-shadow: 0 4px 14px rgba(255,146,56,0.35) !important;
}

.hc-bk, #hcBk {
  background: none !important;
  border: none !important;
  color: #747474 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-family: var(--pl-font-body) !important;
  padding: 8px 14px !important;
}

.eg-btn, #eB {
  background: #ff9238 !important;
  color: #ffffff !important;
  padding: 12px 22px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--pl-font-body) !important;
  transition: all 0.3s !important;
  white-space: nowrap !important;
}

.hc-opt {
  background: #faf9f6 !important;
  border: 1.5px solid #f0ede6 !important;
  border-radius: 12px !important;
  padding: 13px !important;
  font-size: 14px !important;
  color: #747474 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  text-align: center !important;
  font-family: var(--pl-font-body) !important;
}

.hc-opt:hover { border-color: #b0a99e !important; color: #3d3a34 !important; }
.hc-opt.sel { border-color: #ff9238 !important; color: #ff9238 !important; background: rgba(255,146,56,0.06) !important; }

.hc-in {
  background: #faf9f6 !important;
  border: 1.5px solid #f0ede6 !important;
  border-radius: 12px !important;
  padding: 13px 16px !important;
  font-size: 16px !important;
  color: #1c1a16 !important;
  font-family: var(--pl-font-body) !important;
  outline: none !important;
  text-align: center !important;
}

.hc-in:focus { border-color: #ff9238 !important; }

.entry-content {
  max-width: var(--pl-max-width);
  margin: 0 auto;
}

/* Sections */
.pl-section {
  padding: 110px var(--pl-gap);
}

.pl-section-inner {
  max-width: var(--pl-max-width);
  margin: 0 auto;
}

/* ============================================================
   TYPOGRAFIE – GLOBAL (Werte aus Avada, Font = Playfair Display)
   ============================================================ */

/* Body */
body,
p,
li,
td,
th {
  font-family: var(--pl-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: 0;
  color: #747474;
}

/* Links global */
a {
  color: #ff9238;
  text-decoration: none;
  transition: color 0.25s;
}

a:hover {
  color: #ff9238;
}

/* Headings – Playfair Display, alle orange wie in Avada */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pl-font-display);
  font-weight: 400;
  color: #ff9238;
  letter-spacing: 0;
  text-transform: none;
}

h1 {
  font-size: 30px;
  line-height: 1.41;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

h2 {
  font-size: 30px;
  line-height: 1.41;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

h3 {
  font-size: 24px;
  line-height: 1.41;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

h4 {
  font-size: 16px;
  line-height: 1.54;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
}

h5 {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
}

h6 {
  font-size: 11px;
  line-height: 1.55;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
}

/* Post Title (Artikel-Titel in Blog & Single) */
.entry-title,
.post-title,
h1.entry-title {
  font-family: var(--pl-font-display);
  font-size: 30px;
  line-height: 40px;
  color: #ff9238;
  letter-spacing: 0;
}

.entry-title a {
  color: #ff9238;
}

.entry-title a:hover {
  color: #ff9238;
  opacity: 0.8;
}

/* Post Title Extras (Kommentare, Related Posts, Author) */
.comments-title,
.related-posts-title,
.author-title,
.widget-title {
  font-family: var(--pl-font-display);
  font-size: 18px;
  line-height: 1.5;
  color: #ff9238;
}

/* Eyebrow Label */
.pl-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pl-orange);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pl-eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--pl-orange);
  flex-shrink: 0;
}

/* ============================================================
   BUTTONS – Avada-Werte, immer Pill-Form
   ============================================================ */
.pl-btn,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.fusion-button,
.button,
.btn {
  background: #ff9238;
  color: #ffffff !important;
  padding: 12px 32px;
  border-radius: 100px; /* Pill */
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: 0;
  text-transform: uppercase;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.pl-btn:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.fusion-button:hover,
.button:hover,
.btn:hover {
  background: #f78127;
  color: #ffffff !important;
  border-color: #ffffff;
  box-shadow: 0 6px 24px rgba(255, 146, 56, 0.35);
  transform: translateY(-2px);
}

/* WordPress Block Button Override */
.wp-block-button .wp-block-button__link {
  background: #ff9238;
  border-radius: 100px;
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: 2px solid #ffffff;
}

.wp-block-button .wp-block-button__link:hover {
  background: #f78127;
}

/* Ghost Button */
.pl-btn-ghost {
  background: transparent;
  color: #ff9238 !important;
  border: 2px solid #ff9238;
  padding: 12px 32px;
  border-radius: 100px;
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pl-btn-ghost:hover {
  background: #ff9238;
  color: #ffffff !important;
}

/* Blog "Load More" Button */
.pl-load-more,
.fusion-load-more-button {
  background: #ebeaea;
  color: #333333 !important;
  border: none;
  border-radius: 100px;
  padding: 12px 32px;
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}

.pl-load-more:hover,
.fusion-load-more-button:hover {
  background: rgba(235, 234, 234, 0.8);
  color: #333333 !important;
}

/* ============================================================
   CARDS & BOXES
   ============================================================ */
.pl-card {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 28px;
  transition: box-shadow 0.3s;
}

.pl-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   BLOG – ARTIKEL-ÜBERSICHT
   ============================================================ */
.blog .site-main,
.archive .site-main {
  padding: 80px 0;
}

/* Post Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
  max-width: var(--pl-max-width);
  margin: 0 auto;
  padding: 0 var(--pl-gap);
}

/* Post Card */
article.post,
.blog article {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

article.post:hover,
.blog article:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.entry-header {
  padding: 20px 24px 0;
}

.entry-title {
  font-family: var(--pl-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--pl-dark);
  line-height: 1.3;
  margin-bottom: 10px;
}

.entry-title a {
  color: var(--pl-dark);
  transition: color 0.25s;
}

.entry-title a:hover {
  color: var(--pl-orange);
}

.entry-summary {
  padding: 10px 24px 20px;
}

.entry-summary p {
  font-size: 14px;
  color: var(--pl-ink-mid);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

/* Meta (Datum, Kategorie) */
.entry-meta {
  font-size: 11px;
  color: var(--pl-ink-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 24px;
  margin-bottom: 8px;
}

.entry-meta a {
  color: var(--pl-orange);
}

/* Read More */
.read-more-link,
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pl-orange);
  padding: 0 24px 20px;
  transition: gap 0.25s;
}

.read-more-link:hover,
.more-link:hover {
  gap: 10px;
}

/* ============================================================
   BLOG – EINZELNER ARTIKEL (single.php)
   ============================================================ */
.single .site-content {
  padding-top: 80px;
}

.single-article-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px var(--pl-gap);
}

/* Artikel-Header */
.article-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.article-category {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pl-orange);
}

.article-date {
  font-size: 11px;
  color: var(--pl-ink-light);
}

.single .entry-title,
.single h1.entry-title {
  font-family: var(--pl-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  color: var(--pl-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Artikel Intro-Text */
.article-intro {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--pl-ink-mid);
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--pl-stone);
}

/* Artikel Body */
.entry-content h2 {
  font-family: var(--pl-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  color: var(--pl-dark);
  margin-top: 48px;
  margin-bottom: 16px;
}

.entry-content h3 {
  font-family: var(--pl-font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--pl-dark);
  margin-top: 36px;
  margin-bottom: 12px;
}

.entry-content p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--pl-ink);
  margin-bottom: 20px;
}

.entry-content ul,
.entry-content ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.entry-content li {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--pl-ink);
  margin-bottom: 6px;
}

.entry-content a {
  color: var(--pl-orange);
  border-bottom: 1px solid var(--pl-orange-mid);
  transition: border-color 0.25s;
}

.entry-content a:hover {
  border-color: var(--pl-orange);
}

/* Blockquote */
.entry-content blockquote {
  border-left: 3px solid var(--pl-orange);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--pl-orange-light);
  border-radius: 0 8px 8px 0;
}

.entry-content blockquote p {
  font-family: var(--pl-font-display);
  font-size: 18px;
  font-style: italic;
  color: var(--pl-dark);
  margin: 0;
}

/* Info-Box im Artikel */
.entry-content .wp-block-callout,
.pl-infobox {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 28px 0;
}

/* Tabellen */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

.entry-content th {
  background: var(--pl-stone);
  padding: 10px 14px;
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pl-ink-mid);
  text-align: left;
}

.entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--pl-stone);
  font-size: 15px;
  color: var(--pl-ink);
}

/* ============================================================
   FOOTER – Dunkelgrau
   ============================================================ */
.site-footer,
.site-footer .widget-area,
.footer-widgets,
.footer-widget-1,
.footer-widget-2,
.footer-widget-3,
.footer-widget-4,
#footer-widgets,
.site-footer > *:not(.copyright-bar),
.site-footer-widgets,
div#footer-widgets,
.inside-footer-widgets {
  background: #3a3a3a !important;
  color: #a0a0a0;
}

/* Der graue Streifen zwischen Footer und Copyright */
.footer-bar,
.site-footer .footer-bar {
  background: #282a2b !important;
}

.site-footer {
  border-top: 3px solid #fafafa !important;

  padding: 0;
}

.footer-inner {
  max-width: var(--pl-max-width);
  margin: 0 auto;
  padding: 48px 15px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid #505152;
  margin-bottom: 0;
}

/* Footer Logo & Brand */
.footer-brand .footer-logo {
  font-family: var(--pl-font-display);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 12px;
}

.footer-brand .footer-logo span {
  color: var(--pl-orange);
}

.footer-brand p {
  font-size: 13px;
  font-weight: 300;
  color: #a0a0a0;
  line-height: 1.7;
  max-width: 240px;
}

/* Footer Spalten-Titel */
.footer-col-title,
.site-footer .widget-title,
.site-footer h3,
.site-footer h4 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  margin-bottom: 16px;
}

/* Footer Links & Text */
.footer-nav ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li,
.site-footer ul li {
  margin-bottom: 8px;
}

.footer-nav a,
.site-footer a,
.site-footer ul a {
  font-family: var(--pl-font-body);
  font-size: 13px;
  color: #a0a0a0;
  transition: color 0.25s;
  text-decoration: none;
}

.footer-nav a:hover,
.site-footer a:hover,
.site-footer ul a:hover {
  color: #ff9238;
}

.site-footer p {
  font-size: 13px;
  color: #a0a0a0;
}

/* Footer Bottom / Copyright */
.footer-bottom,
.copyright-bar {
  background: #282a2b;
  border-top: 1px solid #444444;
  padding: 18px 15px 16px;
}

.footer-bottom-inner {
  max-width: var(--pl-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-copy,
.copyright-bar .copyright,
.site-info {
  font-family: var(--pl-font-body);
  font-size: 12px;
  color: #a0a0a0;
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a,
.copyright-bar a {
  font-size: 12px;
  color: #a0a0a0;
  transition: color 0.25s;
}

.footer-legal a:hover,
.copyright-bar a:hover {
  color: #ff9238;
}

/* GeneratePress Copyright Bar Override */
.copyright-bar,
.site-info,
footer .site-info {
  background: #282a2b !important;
  border-top: 1px solid #444444 !important;
  padding: 0 !important;
  width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.copyright-bar .inside-site-info,
.inside-site-info,
.inside-site-info.grid-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 18px 40px !important;
  text-align: center !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Entferne alles nach der Copyright-Bar */
.site-footer::after,
body::after,
.page-wrapper::after {
  display: none !important;
}

/* Body / HTML Hintergrund auf weiß – kein grauer Streifen */
html, body {
  background: #ffffff !important;
}

/* Kein Overflow oder Margin nach Footer */
.site-footer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

.copyright-bar p,
.copyright-bar .copyright {
  font-size: 12px !important;
  color: #a0a0a0 !important;
}

.copyright-bar a {
  color: #a0a0a0 !important;
}

.copyright-bar a:hover {
  color: #ff9238 !important;
}

/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s, transform 0.7s;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal.s1 { transition-delay: 0.05s; }
.reveal.s2 { transition-delay: 0.15s; }
.reveal.s3 { transition-delay: 0.25s; }
.reveal.s4 { transition-delay: 0.35s; }

/* ============================================================
   HEALTH CHECK KOMPONENTE (wiederverwendbar)
   ============================================================ */
.hci { max-width: 480px; margin: 0 auto; }
.hc-step { display: none; animation: pl-fade-up 0.3s ease; }
.hc-step.active { display: block; }

@keyframes pl-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hc-q {
  font-family: var(--pl-font-display);
  font-size: 20px;
  color: var(--pl-dark);
  margin-bottom: 18px;
  text-align: center;
}

.hc-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 380px;
  margin: 0 auto;
}

.hc-opt {
  background: var(--pl-off-white);
  border: 1.5px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 13px;
  font-size: 14px;
  color: var(--pl-ink-mid);
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
  font-family: var(--pl-font-body);
}

.hc-opt:hover {
  border-color: var(--pl-ink-light);
  color: var(--pl-ink);
}

.hc-opt.sel {
  border-color: var(--pl-orange);
  color: var(--pl-orange);
  background: var(--pl-orange-light);
}

.hc-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.hc-prog { display: flex; gap: 5px; }

.hc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pl-stone);
  transition: all 0.3s;
}

.hc-dot.active { background: var(--pl-orange); }

/* ============================================================
   UPGRADE CARD / SWIPE
   ============================================================ */
.sw-c {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 22px;
  transition: transform 0.4s, opacity 0.4s;
}

.sw-cat {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pl-orange);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sw-cat::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--pl-orange);
}

.sw-tt {
  font-family: var(--pl-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--pl-dark);
  margin-bottom: 4px;
}

.sw-ds {
  font-size: 13px;
  color: var(--pl-ink-mid);
  font-weight: 300;
  line-height: 1.5;
}

.sw-im {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--pl-green);
  background: var(--pl-green-light);
  padding: 3px 10px;
  border-radius: 10px;
}

/* ============================================================
   SCORE BADGES
   ============================================================ */
.pl-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--pl-radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.pl-score-badge.good {
  background: var(--pl-green-light);
  color: var(--pl-green);
}

.pl-score-badge.bad {
  background: var(--pl-red-light);
  color: var(--pl-red);
}

.pl-score-badge.neutral {
  background: var(--pl-stone);
  color: var(--pl-ink-mid);
}

/* ============================================================
   FORMS (Brevo / Email Gate)
   ============================================================ */
.pl-form-row {
  display: flex;
  gap: 8px;
}

.pl-input {
  flex: 1;
  background: var(--pl-white);
  border: 1.5px solid var(--pl-stone);
  border-radius: var(--pl-radius-pill);
  padding: 12px 18px;
  font-size: 14px;
  font-family: var(--pl-font-body);
  color: var(--pl-dark);
  outline: none;
  transition: border-color 0.3s;
}

.pl-input:focus {
  border-color: var(--pl-orange);
}

.pl-input::placeholder {
  color: var(--pl-ink-light);
}

/* Brevo Embed Override */
.sib-form,
.brevo-form {
  font-family: var(--pl-font-body) !important;
}

/* ============================================================
   WORDPRESS KOMMENTARE (minimiert)
   ============================================================ */
.comments-area {
  max-width: 720px;
  margin: 60px auto 0;
  padding: 0 var(--pl-gap);
  border-top: 1px solid var(--pl-stone);
  padding-top: 40px;
}

.comment-reply-title,
.comments-title {
  font-family: var(--pl-font-display);
  font-size: 24px;
  color: var(--pl-dark);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination,
.nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 60px 0;
}

.page-numbers,
.nav-links a,
.nav-links span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-family: var(--pl-font-body);
  color: var(--pl-ink-mid);
  border: 1.5px solid var(--pl-stone);
  transition: all 0.25s;
}

.page-numbers.current,
.page-numbers:hover {
  background: var(--pl-orange);
  border-color: var(--pl-orange);
  color: #fff;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.pl-text-center { text-align: center; }
.pl-text-orange { color: var(--pl-orange); }
.pl-italic { font-style: italic; }
.pl-mt-sm { margin-top: 16px; }
.pl-mt-md { margin-top: 32px; }
.pl-mt-lg { margin-top: 60px; }
.pl-mb-sm { margin-bottom: 16px; }
.pl-mb-md { margin-bottom: 32px; }
.pl-mb-lg { margin-bottom: 60px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --pl-gap: 20px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .pl-form-row {
    flex-direction: column;
  }

  .hc-opts {
    grid-template-columns: 1fr 1fr;
  }

  .site-content {
    padding-top: 56px;
  }

  .header-inner {
    height: 56px;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }

  .pl-section {
    padding: 60px var(--pl-gap);
  }
}

/* ============================================================
   ARTIKEL-KOMPONENTEN — Inline-Content-Elemente
   ============================================================ */

/* ----------------------------------------------------------
   Stats Bar — Dunkle Fact-Leiste mit orangem Akzent
   ---------------------------------------------------------- */
.pl-stats-bar {
  background: var(--pl-dark);
  color: rgba(255, 255, 255, 0.75);
  border-left: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.65;
}

.pl-stats-bar strong {
  color: var(--pl-orange);
  font-size: 26px;
  font-weight: 700;
  display: inline;
  margin-right: 4px;
  font-family: var(--pl-font-body);
}

/* ----------------------------------------------------------
   Science Box — 💡 Verified-Fact-Karte
   ---------------------------------------------------------- */
.pl-science-box {
  background: var(--pl-off-white);
  border-left: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pl-ink);
}

.pl-science-box strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--pl-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.pl-science-box p {
  margin: 0;
}

/* ----------------------------------------------------------
   Myth Quote — Blockquote für Mythen-Aussagen
   ---------------------------------------------------------- */
blockquote.pl-myth-quote,
.pl-myth-quote {
  border-left: none;
  background: var(--pl-red-light);
  border-radius: var(--pl-radius);
  padding: 16px 20px 16px 52px;
  margin: 28px 0 8px;
  position: relative;
  font-style: italic;
  color: var(--pl-ink);
  font-size: 16px;
}

blockquote.pl-myth-quote::before,
.pl-myth-quote::before {
  content: '✗';
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 18px;
  font-style: normal;
  color: var(--pl-red);
  font-weight: 700;
}

blockquote.pl-myth-quote p,
.pl-myth-quote p {
  margin: 0;
}

/* ----------------------------------------------------------
   Myth Box — Mythos vs. Realität, zweifarbig
   ---------------------------------------------------------- */
.pl-myth-box {
  border-radius: var(--pl-radius);
  overflow: hidden;
  margin: 32px 0;
  border: 1px solid rgba(201, 61, 66, 0.15);
}

.pl-myth-claim {
  background: var(--pl-red-light);
  padding: 16px 20px 16px 52px;
  font-style: italic;
  color: var(--pl-ink);
  font-size: 15px;
  position: relative;
  border-bottom: 1px solid rgba(201, 61, 66, 0.12);
  margin: 0;
}

.pl-myth-claim::before {
  content: '✗';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-style: normal;
  color: var(--pl-red);
  font-weight: 700;
}

.pl-myth-reply {
  background: var(--pl-green-light);
  padding: 16px 20px 16px 52px;
  color: var(--pl-ink);
  font-size: 15px;
  line-height: 1.65;
  position: relative;
  margin: 0;
}

.pl-myth-reply::before {
  content: '✓';
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 16px;
  color: var(--pl-green);
  font-weight: 700;
}

/* ----------------------------------------------------------
   Warning Box — ⚠️ Rot, klar, nicht übersehbar
   ---------------------------------------------------------- */
.pl-warning-box {
  background: var(--pl-red-light);
  border-left: 4px solid var(--pl-red);
  border-radius: var(--pl-radius);
  padding: 20px 24px 20px 60px;
  margin: 32px 0;
  position: relative;
  color: var(--pl-ink);
  font-size: 15px;
  line-height: 1.7;
}

.pl-warning-box::before {
  content: '⚠';
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 20px;
  line-height: 1;
}

.pl-warning-box strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-red);
  margin-bottom: 8px;
}

.pl-warning-box p {
  margin: 0;
}

/* ----------------------------------------------------------
   Cluster Link — Orange Navigationspfeil zur Rubrik
   ---------------------------------------------------------- */
.pl-cluster-link {
  display: block;
  margin: 28px 0 8px;
  font-size: 15px;
}

.pl-cluster-link a {
  color: var(--pl-orange);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.pl-cluster-link a:hover {
  color: var(--pl-ink);
}

/* ----------------------------------------------------------
   Healthy Years — Grüner Pill-Badge
   ---------------------------------------------------------- */
.pl-healthy-years {
  display: inline-block;
  margin: 8px 0 24px;
}

.pl-healthy-years span {
  display: inline-block;
  background: var(--pl-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: var(--pl-radius-pill);
  font-family: var(--pl-font-body);
}

/* ----------------------------------------------------------
   Upgrade Card — CTA-Karte mit orangem Akzent
   ---------------------------------------------------------- */
.pl-upgrade-card {
  background: var(--pl-off-white);
  border: 1.5px solid var(--pl-orange-glow);
  border-top: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
  padding: 24px 28px;
  margin: 36px 0;
}

.pl-upgrade-card p {
  color: var(--pl-ink);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 18px;
}

/* ----------------------------------------------------------
   CTA Button — Orange, Premium
   ---------------------------------------------------------- */
.pl-cta-button {
  display: inline-block;
  background: var(--pl-orange);
  color: #fff !important;
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 11px 24px;
  border-radius: var(--pl-radius-pill);
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
  border: none;
  cursor: pointer;
}

.pl-cta-button:hover {
  background: #e07d2a;
  transform: translateY(-1px);
  color: #fff !important;
}

/* ----------------------------------------------------------
   Amazon Pick — Produkt-Empfehlungskarte
   ---------------------------------------------------------- */
.pl-amazon-pick {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
}

.pl-amazon-pick strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--pl-dark);
  margin-bottom: 4px;
}

.pl-amazon-pick p {
  color: var(--pl-ink-mid);
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 16px;
}

.pl-amazon-rating {
  display: inline-block;
  font-size: 13px;
  color: var(--pl-ink-mid);
  margin-left: 8px;
  font-weight: 400;
}

/* ----------------------------------------------------------
   Info Box — Zusammenfassungs-Tabelle
   ---------------------------------------------------------- */
.pl-info-box {
  background: var(--pl-off-white);
  border: 1.5px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 24px 28px;
  margin: 40px 0;
  font-size: 15px;
}

.pl-info-box strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-orange);
  margin-bottom: 16px;
}

.pl-info-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pl-info-box thead th {
  text-align: left;
  font-weight: 600;
  color: var(--pl-ink-mid);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0 12px 10px 0;
  border-bottom: 1.5px solid var(--pl-stone);
}

.pl-info-box tbody td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--pl-stone);
  color: var(--pl-ink);
  vertical-align: middle;
}

.pl-info-box tbody tr:last-child td {
  border-bottom: none;
}

.pl-info-box tbody td strong {
  display: inline;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pl-green);
}

.pl-info-box > p {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--pl-ink-mid);
  border-top: 1.5px solid var(--pl-stone);
  padding-top: 14px;
}

.pl-info-box > p strong {
  display: inline;
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pl-dark);
}

/* ----------------------------------------------------------
   FAQ Item — Frage/Antwort-Blöcke
   ---------------------------------------------------------- */
.pl-faq-item {
  border-bottom: 1px solid var(--pl-stone);
  padding: 24px 0;
  margin: 0;
}

.pl-faq-item:first-of-type {
  border-top: 1px solid var(--pl-stone);
}

.pl-faq-item h3 {
  font-family: var(--pl-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--pl-dark);
  margin: 0 0 10px;
  line-height: 1.4;
}

.pl-faq-item p {
  font-size: 15px;
  color: var(--pl-ink);
  line-height: 1.7;
  margin: 0;
}

/* ----------------------------------------------------------
   Artikel-Komponenten — Responsive
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .pl-stats-bar strong {
    font-size: 22px;
  }

  .pl-warning-box,
  .pl-science-box,
  .pl-upgrade-card,
  .pl-amazon-pick,
  .pl-info-box {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pl-warning-box {
    padding-left: 52px;
  }

  .pl-myth-claim,
  .pl-myth-reply {
    padding-left: 44px;
  }

  .pl-info-box table {
    font-size: 13px;
  }
}


/* ============================================================
   MAGAZIN-FORMAT — NEUE ELEMENT-BIBLIOTHEK
   Option C (typbasierte Breiten) + D (Break-out für Highlights)
   Alle Klassen nutzen .pl- Prefix.
   ============================================================ */


/* ----------------------------------------------------------
   GRUPPE 1: KOMPAKT-BOXEN — float right, ~42% Breite
   Für: Kennzahlen, Fun Facts, Randnotizen, Definition
   Auf Mobile: full width
   ---------------------------------------------------------- */

.pl-key-metric,
.pl-fun-fact-box,
.pl-sidebar-note,
.pl-definition-box {
  float: right;
  clear: right;
  width: 42%;
  margin: 4px 0 24px 32px;
  border-radius: var(--pl-radius);
  font-size: 14px;
  line-height: 1.65;
}

/* Kennzahl — orange Highlight */
.pl-key-metric {
  background: var(--pl-orange-light);
  border: 1.5px solid var(--pl-orange-mid);
  padding: 18px 20px;
}

.pl-key-metric h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-orange);
  margin: 0 0 10px;
}

.pl-key-metric p {
  margin: 0 0 6px;
  color: var(--pl-ink);
}

.pl-key-metric p strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--pl-dark);
  line-height: 1.2;
  font-family: var(--pl-font-body);
}

/* Fun Fact — Stone, subtil */
.pl-fun-fact-box {
  background: var(--pl-stone);
  border: none;
  padding: 18px 20px;
}

.pl-fun-fact-box h3 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-ink);
  margin: 0 0 8px;
}

.pl-fun-fact-box p {
  margin: 0 0 6px;
  color: var(--pl-ink);
}

/* Definition — off-white mit subtiler Border */
.pl-definition-box {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  padding: 18px 20px;
}

.pl-definition-box h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-mid);
  margin: 0 0 8px;
}

.pl-definition-box p {
  margin: 0;
  color: var(--pl-ink);
}

/* Randnotiz — minimal, kursiv */
.pl-sidebar-note {
  background: transparent;
  border-left: 3px solid var(--pl-stone);
  padding: 12px 16px;
}

.pl-sidebar-note h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-mid);
  margin: 0 0 6px;
}

.pl-sidebar-note p {
  margin: 0;
  font-style: italic;
  font-size: 14px;
  color: var(--pl-ink-mid);
}


/* ----------------------------------------------------------
   GRUPPE 2: ACTION-BOXEN — full width, starker Akzent
   Für: Praxistipp, To-Do, Challenge, Checkliste, Selbst-Check
   ---------------------------------------------------------- */

/* Praxistipp — orange, sofort umsetzbar */
.pl-practice-tip {
  background: var(--pl-orange-light);
  border-left: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
  padding: 20px 24px 20px 60px;
  margin: 32px 0;
  position: relative;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pl-ink);
}

.pl-practice-tip::before {
  content: '🔧';
  position: absolute;
  left: 18px;
  top: 20px;
  font-size: 20px;
  line-height: 1;
}

.pl-practice-tip h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-orange);
  margin: 0 0 10px;
}

.pl-practice-tip ol,
.pl-practice-tip ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
}

.pl-practice-tip li {
  margin-bottom: 6px;
}

/* To-Do Box — neutral, strukturiert */
.pl-todo-box {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-todo-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 12px;
}

.pl-todo-box ol {
  margin: 0;
  padding-left: 20px;
}

.pl-todo-box li {
  margin-bottom: 8px;
  color: var(--pl-ink);
}

/* Challenge Box — dunkel, orange, Aufforderungscharakter */
.pl-challenge-box {
  background: var(--pl-dark);
  border-radius: var(--pl-radius);
  padding: 24px 28px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.pl-challenge-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-orange);
  margin: 0 0 14px;
}

.pl-challenge-box p {
  margin: 0 0 8px;
}

.pl-challenge-box p strong {
  color: var(--pl-orange);
  font-weight: 600;
}

/* Selbst-Check — grün, reflektiv */
.pl-self-assessment {
  background: var(--pl-green-light);
  border-left: 4px solid var(--pl-green);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-self-assessment h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-green);
  margin: 0 0 10px;
}

.pl-self-assessment ol {
  margin: 10px 0;
  padding-left: 20px;
}

.pl-self-assessment li {
  margin-bottom: 10px;
  color: var(--pl-ink);
}

.pl-self-assessment p strong {
  color: var(--pl-green);
}

/* Reflexionsfragen — ruhig, kursiv */
.pl-reflection-box {
  border-left: 3px solid var(--pl-ink-light);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
  background: transparent;
}

.pl-reflection-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--pl-ink-mid);
  margin: 0 0 12px;
}

.pl-reflection-box ol {
  margin: 0;
  padding-left: 20px;
}

.pl-reflection-box li {
  margin-bottom: 10px;
  font-style: italic;
  color: var(--pl-ink);
}

/* Don'ts Box — rot, klar */
.pl-donts-box {
  background: var(--pl-red-light);
  border-left: 4px solid var(--pl-red);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-donts-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-red);
  margin: 0 0 12px;
}

.pl-donts-box ul {
  margin: 0;
  padding-left: 20px;
}

.pl-donts-box li {
  margin-bottom: 10px;
  color: var(--pl-ink);
}

.pl-donts-box li strong {
  color: var(--pl-red);
}


/* ----------------------------------------------------------
   GRUPPE 3: ZITATE — ~75% Breite, zentriert
   ---------------------------------------------------------- */

/* ============================================================
   ZITATE & STIMMEN — Einheitliches Design (v-final)
   ALLE Quote-Typen identisch: kein Hintergrund, kein Rahmen,
   zentriert, orange kursiv, großes „ oben, Name unten.
   !important nötig wegen WordPress blockquote-Theme-Styles.
   ============================================================ */

.pl-pull-quote,
.pl-expert-quote,
.pl-community-voice,
.pl-sebastien-says {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 72%;
  margin: 44px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: static;
  color: inherit;
}

/* Großes öffnendes „ oben — orange, zentriert */
.pl-pull-quote::before,
.pl-expert-quote::before,
.pl-community-voice::before,
.pl-sebastien-says::before {
  content: '„';
  font-family: var(--pl-font-display);
  font-size: 72px;
  color: var(--pl-orange);
  line-height: 0.65;
  margin-bottom: 24px;
  display: block;
  position: static;
  order: 1;
}

/* Kein schließendes Anführungszeichen */
.pl-pull-quote p::after,
.pl-expert-quote p::after,
.pl-community-voice p::after,
.pl-sebastien-says p::after { content: none; }

/* Kein kleines „ links vom Text (v1-Override) */
.pl-pull-quote p::before,
.pl-expert-quote p::before,
.pl-community-voice p::before,
.pl-sebastien-says p::before { content: none; }

/* Zitat-Text: orange, kursiv, nicht fett */
/* !important nötig: WordPress blockquote { color } überschreibt sonst */
.pl-pull-quote p,
.pl-expert-quote p,
.pl-community-voice p,
.pl-sebastien-says p {
  font-family: var(--pl-font-display) !important;
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pl-orange) !important;
  line-height: 1.6;
  margin: 0 0 24px;
  order: 2;
}

/* Autorenname — grau, klein, unter dem Zitat */
.pl-pull-quote cite,
.pl-expert-quote cite,
.pl-community-voice cite,
.pl-sebastien-says cite,
.pl-sebastien-says h3 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  color: var(--pl-ink-mid);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  order: 3;
}


/* ----------------------------------------------------------
   GRUPPE 4: STRUKTURIERUNGS-ELEMENTE — full width
   ---------------------------------------------------------- */

/* Pro/Contra — zweispaltig, grün/rot */
.pl-pro-contra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--pl-radius);
  overflow: hidden;
  margin: 32px 0;
  border: none;
}

.pl-pro {
  background: var(--pl-green-light);
  padding: 20px 24px;
  border-right: 1px solid rgba(45,154,90,0.15);
}

.pl-contra {
  background: var(--pl-red-light);
  padding: 20px 24px;
}

.pl-pro h4 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-green);
  margin: 0 0 12px;
}

.pl-contra h4 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-red);
  margin: 0 0 12px;
}

.pl-pro ul,
.pl-contra ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.65;
}

.pl-pro li,
.pl-contra li {
  margin-bottom: 6px;
  color: var(--pl-ink);
}

/* Vergleichstabelle */
.pl-comparison-table {
  margin: 32px 0;
  overflow-x: auto;
}

.pl-comparison-table h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 12px;
}

.pl-comparison-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  overflow: hidden;
}

.pl-comparison-table th {
  background: var(--pl-dark);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
}

.pl-comparison-table th:first-child {
  background: var(--pl-stone);
  color: var(--pl-ink-mid);
}

.pl-comparison-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--pl-stone);
  color: var(--pl-ink);
}

.pl-comparison-table td:first-child {
  font-weight: 600;
  color: var(--pl-dark);
  background: var(--pl-off-white);
}

.pl-comparison-table tr:last-child td {
  border-bottom: none;
}

/* Ranking Box — nummerierte Liste mit Akzent */
.pl-ranking-box {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
}

.pl-ranking-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-orange);
  margin: 0 0 14px;
}

.pl-ranking-box ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: ranking;
}

.pl-ranking-box li {
  counter-increment: ranking;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--pl-stone);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pl-ink);
}

.pl-ranking-box li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-ranking-box li::before {
  content: counter(ranking);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2px solid var(--pl-orange);
  color: var(--pl-orange);
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Timeline Box */
.pl-timeline-box {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--pl-off-white);
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-stone);
}

.pl-timeline-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 16px;
}

.pl-timeline-phase {
  background: #fff;
  border: 1px solid var(--pl-stone);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--pl-ink);
  line-height: 1.6;
}

.pl-timeline-arrow {
  text-align: center;
  font-size: 20px;
  color: var(--pl-orange);
  line-height: 1.8;
}

.pl-timeline-goal {
  background: var(--pl-orange-light);
  border: 1.5px solid var(--pl-orange-mid);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pl-dark);
  line-height: 1.6;
}

/* Entscheidungsbaum */
.pl-decision-tree {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-decision-tree h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 14px;
}

.pl-dt-step {
  padding: 12px 0;
  border-bottom: 1px solid var(--pl-stone);
  color: var(--pl-ink);
}

.pl-dt-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-dt-step strong {
  display: block;
  margin-bottom: 6px;
  color: var(--pl-dark);
}

/* Schnell-Zusammenfassung */
.pl-summary-box {
  background: var(--pl-dark);
  color: rgba(255,255,255,0.85);
  border-radius: var(--pl-radius);
  padding: 24px 28px;
  margin: 40px calc(-1 * var(--pl-gap));  /* Option D: break out */
  font-size: 15px;
  line-height: 1.7;
}

.pl-summary-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-orange);
  margin: 0 0 14px;
}

.pl-summary-box ul {
  margin: 0;
  padding-left: 20px;
}

.pl-summary-box li {
  margin-bottom: 8px;
  color: rgba(255,255,255,0.8);
}

/* Quick Reference Card */
.pl-quick-reference {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-top: 4px solid var(--pl-ink);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-quick-reference h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-dark);
  margin: 0 0 12px;
}

.pl-quick-reference p {
  margin: 0 0 8px;
}

.pl-quick-reference p strong {
  color: var(--pl-dark);
}

.pl-quick-reference ol {
  margin: 4px 0 8px;
  padding-left: 20px;
}

.pl-quick-reference li {
  margin-bottom: 6px;
}


/* ----------------------------------------------------------
   GRUPPE 5: VOR/NACH & FORTSCHRITT
   ---------------------------------------------------------- */

/* Vorher/Nachher */
.pl-before-after {
  margin: 32px 0;
  border-radius: var(--pl-radius);
  overflow: hidden;
  border: 1px solid var(--pl-stone);
}

.pl-before-after h3 {
  background: var(--pl-stone);
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-mid);
  margin: 0;
  padding: 10px 20px;
}

.pl-before {
  background: var(--pl-red-light);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.65;
  border-bottom: 1px solid rgba(201,61,66,0.12);
}

.pl-before strong {
  display: inline-block;
  color: var(--pl-red);
  margin-right: 4px;
}

.pl-after {
  background: var(--pl-green-light);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.65;
}

.pl-after strong {
  display: inline-block;
  color: var(--pl-green);
  margin-right: 4px;
}

.pl-before-after > p {
  background: var(--pl-off-white);
  padding: 12px 20px;
  font-size: 14px;
  color: var(--pl-ink-mid);
  margin: 0;
  border-top: 1px solid var(--pl-stone);
}

/* Fortschritts-Tracker */
.pl-progress-tracker {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
}

.pl-progress-tracker h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 14px;
}

.pl-milestone {
  padding: 10px 0;
  border-bottom: 1px solid var(--pl-stone);
  font-size: 15px;
  color: var(--pl-ink-mid);
  line-height: 1.6;
}

.pl-milestone:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-milestone--goal {
  color: var(--pl-dark);
  font-weight: 600;
}

.pl-milestone--goal strong {
  color: var(--pl-orange);
}


/* ----------------------------------------------------------
   GRUPPE 6: NARRATIVE ELEMENTE
   ---------------------------------------------------------- */

/* Mini-Story — Aus der Praxis */
.pl-mini-story {
  border-left: 4px solid var(--pl-orange-mid);
  background: var(--pl-off-white);
  border-radius: 0 var(--pl-radius) var(--pl-radius) 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.75;
  font-style: italic;
  color: var(--pl-ink);
}

.pl-mini-story h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pl-orange);
  font-style: normal;
  margin: 0 0 10px;
}

/* Case Study — break out, prominent */
.pl-case-study {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-top: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
  padding: 24px 28px;
  margin: 40px calc(-1 * var(--pl-gap) / 2);  /* Option D: leichtes break-out */
  font-size: 15px;
  line-height: 1.7;
}

.pl-case-study h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-orange);
  margin: 0 0 14px;
}

.pl-case-study p {
  margin: 0 0 8px;
  color: var(--pl-ink);
}

.pl-case-study p strong {
  color: var(--pl-dark);
}

/* Worst Case — dunkel, rot */
.pl-worst-case {
  background: #1a0808;
  border-left: 4px solid var(--pl-red);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
}

.pl-worst-case h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-red);
  margin: 0 0 12px;
}

.pl-worst-case p {
  margin: 0 0 8px;
}

.pl-worst-case p strong {
  color: rgba(255,255,255,0.95);
  display: block;
  margin-bottom: 6px;
}

/* Dialog Box — Chat-Stil */
.pl-dialog-box {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.65;
}

.pl-dialog-box h3 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--pl-ink-mid);
  margin: 0 0 14px;
}

.pl-dialog-line {
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 15px;
}

.pl-dialog-a {
  background: var(--pl-stone);
  color: var(--pl-ink);
  margin-right: 20%;
}

.pl-dialog-b {
  background: var(--pl-orange-light);
  color: var(--pl-dark);
  margin-left: 20%;
}

.pl-dialog-box em {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--pl-ink-mid);
  border-top: 1px solid var(--pl-stone);
  padding-top: 10px;
}

/* Perspektivwechsel */
.pl-perspective-box {
  border-radius: var(--pl-radius);
  overflow: hidden;
  margin: 32px 0;
  border: 1px solid var(--pl-stone);
}

.pl-perspective-box h3 {
  background: var(--pl-stone);
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-mid);
  margin: 0;
  padding: 10px 20px;
}

.pl-perspective-you,
.pl-perspective-other {
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.65;
}

.pl-perspective-you {
  background: var(--pl-red-light);
  border-bottom: 1px solid rgba(201,61,66,0.1);
}

.pl-perspective-other {
  background: var(--pl-green-light);
  border-bottom: 1px solid rgba(45,154,90,0.1);
}

.pl-perspective-insight {
  background: var(--pl-off-white);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--pl-ink-mid);
  line-height: 1.65;
}

.pl-perspective-you strong,
.pl-perspective-other strong,
.pl-perspective-insight strong {
  display: inline-block;
  margin-right: 4px;
}


/* ----------------------------------------------------------
   GRUPPE 7: NAVIGATION & CTA-ELEMENTE
   ---------------------------------------------------------- */

/* Kapitel-Intro mit Lernzielen */
.pl-chapter-intro {
  background: var(--pl-orange-light);
  border: 1.5px solid var(--pl-orange-mid);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-chapter-intro h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-orange);
  margin: 0 0 12px;
}

.pl-chapter-intro ul {
  margin: 0;
  padding-left: 20px;
}

.pl-chapter-intro li {
  margin-bottom: 6px;
  color: var(--pl-ink);
}

/* Cross Reference */
.pl-cross-reference {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 15px;
  line-height: 1.6;
}

.pl-cross-reference::before {
  content: '→';
  font-size: 20px;
  color: var(--pl-orange);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.4;
}

.pl-cross-reference h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-mid);
  margin: 0 0 4px;
}

.pl-cross-reference p {
  margin: 0;
  color: var(--pl-ink);
}

.pl-cross-reference a {
  color: var(--pl-orange);
  font-weight: 600;
  text-decoration: none;
}

.pl-cross-reference a:hover {
  text-decoration: underline;
}

/* Quellenbox */
.pl-source-box {
  border-left: 3px solid var(--pl-stone);
  padding: 12px 16px;
  margin: 24px 0;
  background: transparent;
  font-size: 14px;
  color: var(--pl-ink-mid);
  line-height: 1.6;
}

.pl-source-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-ink-light);
  margin: 0 0 4px !important;
}

.pl-source-box p {
  margin: 0;
}

.pl-source-box a {
  color: var(--pl-orange);
  text-decoration: none;
}

/* Ressourcen-Box */
.pl-resources-box {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-resources-box h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 12px;
}

.pl-resources-box ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.pl-resources-box li {
  padding: 10px 0;
  border-bottom: 1px solid var(--pl-stone);
  color: var(--pl-ink);
}

.pl-resources-box li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-resources-box li strong {
  display: block;
  color: var(--pl-dark);
  margin-bottom: 2px;
}

/* Nächster Schritt */
.pl-next-step-box {
  background: var(--pl-orange-light);
  border-left: 4px solid var(--pl-orange);
  border-radius: 0 var(--pl-radius) var(--pl-radius) 0;
  padding: 18px 24px;
  margin: 32px 0;
  font-size: 15px;
  line-height: 1.7;
}

.pl-next-step-box h3 {
  font-family: var(--pl-font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pl-orange);
  margin: 0 0 6px;
}

.pl-next-step-box p {
  margin: 0;
  color: var(--pl-ink);
}


/* ----------------------------------------------------------
   GRUPPE 8: VISUELLE AKZENTE
   ---------------------------------------------------------- */

/* Nummerierte Callouts */
.pl-numbered-callout {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
}

.pl-numbered-callout h3 {
  font-family: var(--pl-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pl-ink-mid);
  margin: 0 0 14px;
}

.pl-callout-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pl-stone);
  font-size: 15px;
  color: var(--pl-ink);
  line-height: 1.6;
}

.pl-callout-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-callout-number {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2px solid var(--pl-orange);
  color: var(--pl-orange);
  font-weight: 700;
  font-size: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pl-font-body);
  margin-top: 0;
}

/* Bild-Platzhalter */
.pl-image-placeholder {
  border: 2px dashed var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 32px 24px;
  margin: 32px 0;
  text-align: center;
  background: var(--pl-off-white);
  color: var(--pl-ink-mid);
  font-size: 14px;
}

.pl-image-placeholder h3 {
  font-family: var(--pl-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--pl-dark);
  margin: 0 0 10px;
}

.pl-image-placeholder p {
  margin: 0 0 6px;
}


/* ----------------------------------------------------------
   BREAK-OUT: Stats-Bar & Summary auf breiter als Text
   Option D — schiebt diese Elemente über den Content-Bereich
   Nur auf Screens wo es Sinn macht (> 900px)
   ---------------------------------------------------------- */

@media (min-width: 900px) {
  .pl-stats-bar {
    margin-left: calc(-1 * var(--pl-gap));
    margin-right: calc(-1 * var(--pl-gap));
    border-radius: 0;
  }

  .pl-summary-box {
    border-radius: 0;
  }
}


/* ----------------------------------------------------------
   RESPONSIVE — Mobile (max 768px)
   Float aufheben, volle Breite für alle Kompakt-Boxen
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  .pl-key-metric,
  .pl-fun-fact-box,
  .pl-sidebar-note,
  .pl-definition-box {
    float: none;
    width: 100%;
    margin: 24px 0;
  }

  .pl-pro-contra {
    grid-template-columns: 1fr;
  }

  .pl-pro {
    border-right: none;
    border-bottom: 1px solid rgba(45,154,90,0.15);
  }

  .pl-pull-quote {
    max-width: 100%;
    margin: 28px 0;
  }

  .pl-expert-quote,
  .pl-community-voice {
    max-width: 100%;
    margin-left: 0;
  }

  .pl-dialog-a {
    margin-right: 10%;
  }

  .pl-dialog-b {
    margin-left: 10%;
  }

  .pl-summary-box,
  .pl-case-study {
    margin-left: 0;
    margin-right: 0;
  }

  .pl-stats-bar {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--pl-radius);
  }
}


/* ============================================================
   BOX-ÜBERSCHRIFTEN — Globale Größenkorrektur
   Alle h3/h4 innerhalb von Boxen: größer als Fließtext (15px).
   Label-Stil (uppercase) bleibt, Größe wird korrigiert.
   ============================================================ */

.pl-practice-tip h3,
.pl-warning-box strong:first-child,
.pl-todo-box h3,
.pl-challenge-box h3,
.pl-self-assessment h3,
.pl-reflection-box h3,
.pl-donts-box h3,
.pl-summary-box h3,
.pl-quick-reference h3,
.pl-chapter-intro h3,
.pl-resources-box h3,
.pl-next-step-box h3,
.pl-mini-story h3,
.pl-case-study h3,
.pl-worst-case h3,
.pl-dialog-box h3,
.pl-sebastien-says h3,
.pl-ranking-box h3,
.pl-timeline-box h3,
.pl-decision-tree h3,
.pl-before-after h3,
.pl-progress-tracker h3,
.pl-numbered-callout h3,
.pl-perspective-box h3,
.pl-cross-reference h3,
.pl-infobox h3,
.pl-science-box h3,
.pl-myth-box h3,
.pl-info-box strong:first-child,
.pl-pro h4,
.pl-contra h4 {
  font-size: 17px;
  line-height: 1.3;
}

/* Kompakt-Boxen (float right): etwas kleiner, da weniger Platz */
.pl-key-metric h3,
.pl-fun-fact-box h3,
.pl-definition-box h3,
.pl-sidebar-note h3 {
  font-size: 15px;
  line-height: 1.3;
}

/* Bestehende Boxen mit strong als Pseudo-Überschrift korrigieren */
.pl-science-box strong,
.pl-warning-box strong {
  font-size: 16px;
}


/* ============================================================
   DESIGN-KORREKTUREN v2 — April 2026
   Systematische Überarbeitungen nach visuellem Feedback-Run.
   ============================================================ */


/* ----------------------------------------------------------
   1. KEINE DUNKLEN HINTERGRÜNDE — Corporate Design überall
   Erlaubte Hintergründe: Grau, Orange, Rot, Grün (nur Light-Varianten)
   ---------------------------------------------------------- */

.pl-challenge-box {
  background: var(--pl-orange-light);
  border: 1.5px solid var(--pl-orange-mid);
  color: var(--pl-ink);
}
.pl-challenge-box p { color: var(--pl-ink); margin: 0; }
.pl-challenge-box p strong { color: var(--pl-orange); display: inline; }

.pl-summary-box {
  background: var(--pl-off-white);
  border: 1.5px solid var(--pl-stone);
  border-top: 4px solid var(--pl-orange);
  color: var(--pl-ink);
}
.pl-summary-box li { color: var(--pl-ink); }

.pl-worst-case {
  background: var(--pl-red-light);
  border-left: 4px solid var(--pl-red);
  color: var(--pl-ink);
}
.pl-worst-case h3 { color: var(--pl-red); }
.pl-worst-case p { color: var(--pl-ink); }
.pl-worst-case p strong { display: block; color: var(--pl-dark); font-size: 15px; margin: 8px 0 4px; }

.pl-stats-bar {
  background: var(--pl-orange-light);
  color: var(--pl-ink);
  border-left: 4px solid var(--pl-orange);
  border-radius: var(--pl-radius);
}
.pl-stats-bar strong { color: var(--pl-orange); }


/* ----------------------------------------------------------
   2. DOPPELTE ICONS ENTFERNEN
   ---------------------------------------------------------- */

.pl-practice-tip::before,
.pl-warning-box::before { content: none; }
.pl-practice-tip { padding-left: 24px; }
.pl-warning-box { padding-left: 24px; }

.pl-myth-claim::before,
.pl-myth-reply::before { content: none; }
.pl-myth-claim { padding-left: 20px; }
.pl-myth-reply { padding-left: 20px; }
.pl-myth-box { border: none; }


/* ----------------------------------------------------------
   3. KREIS-ICONS INVERTIEREN — weiß innen, Orange Border + Icon
   Gilt global: Häkchen, Zahlen, Callouts
   ---------------------------------------------------------- */

.pl-checklist li::before,
ul.checklist li::before {
  background: #fff;
  border: 2px solid var(--pl-orange);
  color: var(--pl-orange);
}

.pl-ranking-box li::before {
  background: #fff;
  border: 2px solid var(--pl-orange);
  color: var(--pl-orange);
}

.pl-callout-number {
  background: #fff;
  border: 2px solid var(--pl-orange);
  color: var(--pl-orange);
}


/* ----------------------------------------------------------
   4. NUMMERIERTE LISTEN — global designte Zahl-Badges
   Gilt für alle ol > li im Artikel-Content
   ---------------------------------------------------------- */

.entry-content ol {
  list-style: none;
  padding-left: 0;
  counter-reset: pl-ol-counter;
}

.entry-content ol > li {
  counter-increment: pl-ol-counter;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
  padding-left: 0;
}

.entry-content ol > li::before {
  content: counter(pl-ol-counter);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--pl-orange);
  background: #fff;
  color: var(--pl-orange);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--pl-font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  line-height: 1;
}

/* Ranking-Box hat eigenes Counter-System — sauber überschreiben */
.pl-ranking-box ol {
  counter-reset: ranking;
}
.pl-ranking-box li {
  counter-increment: ranking;
}
.pl-ranking-box li::before {
  content: counter(ranking);
}


/* ----------------------------------------------------------
   5. DON'TS — rotes ✗ statt Bullet vor jedem Punkt
   ---------------------------------------------------------- */

.pl-donts-box ul {
  list-style: none;
  padding-left: 0;
}

.pl-donts-box ul > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  padding-left: 0;
}

.pl-donts-box ul > li::before {
  content: '✗';
  flex-shrink: 0;
  color: var(--pl-red);
  font-weight: 700;
  font-size: 16px;
  margin-top: 1px;
  line-height: 1.5;
}


/* ----------------------------------------------------------
   6. CHECKLISTE — Orange Hintergrund
   ---------------------------------------------------------- */

.pl-checklist,
ul.checklist {
  background: var(--pl-orange-light);
  border: 1.5px solid var(--pl-orange-mid);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin: 32px 0;
}


/* ----------------------------------------------------------
   7. VERGLEICHSTABELLE — Header orange/weiß
   ---------------------------------------------------------- */

.pl-comparison-table th {
  background: var(--pl-orange);
  color: #fff;
}

.pl-comparison-table th:first-child {
  background: var(--pl-stone);
  color: var(--pl-ink-mid);
}


/* ----------------------------------------------------------
   8. ALLE ZITATE — Einheitliches Design
   Kein Hintergrund, zentriert, orange, kein Rahmen
   ---------------------------------------------------------- */

.pl-pull-quote,
.pl-expert-quote,
.pl-community-voice,
.pl-sebastien-says {
  max-width: 75%;
  margin: 40px auto;
  text-align: center;
  background: transparent;
  border: none;
  padding: 0 16px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ::before jetzt in v1-Block definiert (unified) — diese Regeln sind redundant */

/* Zitat-Text — jetzt in v1-Block definiert (unified) */
.pl-pull-quote p,
.pl-expert-quote p,
.pl-community-voice p,
.pl-sebastien-says p {
  font-family: var(--pl-font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  color: var(--pl-orange);
  line-height: 1.55;
  margin: 0 0 14px;
  text-align: center;
}

/* Schließendes Gänsefüßchen entfernt — kein ::after */
.pl-pull-quote p::after,
.pl-expert-quote p::after,
.pl-community-voice p::after,
.pl-sebastien-says p::after {
  content: none;
}

/* Attribution — immer UNTER dem Zitat, klein, grau */
.pl-pull-quote cite,
.pl-expert-quote cite,
.pl-community-voice cite,
.pl-sebastien-says cite {
  font-size: 13px;
  color: var(--pl-ink-mid);
  font-style: normal;
  order: 3;
  font-weight: 500;
  text-align: center;
}

/* Sébastien-Says h3 als Attribution-Zeile */
.pl-sebastien-says h3 {
  font-family: var(--pl-font-body);
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pl-ink-mid);
  margin: 0;
  order: 3;
}

/* Flex-Order: „ (::before = order 1) → Zitat (p = order 2) → Name (cite/h3 = order 3) */
/* Gilt global für alle Quote-Typen */
.pl-pull-quote p,
.pl-expert-quote p,
.pl-community-voice p,
.pl-sebastien-says p { order: 2; }

.pl-pull-quote cite,
.pl-expert-quote cite,
.pl-community-voice cite { order: 3; }

.pl-sebastien-says h3 { order: 3; }
.pl-sebastien-says p { order: 2; }


/* ----------------------------------------------------------
   9. TIMELINE — 60% Breite, zentriert
   ---------------------------------------------------------- */

.pl-timeline-box {
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}


/* ----------------------------------------------------------
   10. DIALOG-BOX — 70% Breite, zentriert
   ---------------------------------------------------------- */

.pl-dialog-box {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}


/* ----------------------------------------------------------
   11. PERSPEKTIVWECHSEL — keine weißen Gaps
   ---------------------------------------------------------- */

.pl-perspective-you,
.pl-perspective-other,
.pl-perspective-insight {
  margin: 0;
}

.pl-perspective-you {
  border-bottom: 1px solid rgba(201, 61, 66, 0.15);
}

.pl-perspective-other {
  border-bottom: 1px solid rgba(45, 154, 90, 0.15);
}


/* ----------------------------------------------------------
   12. VORHER / NACHHER — Größe + keine weißen Gaps
   Box: 70% Breite, zentriert (wie Timeline/Dialog).
   Gaps: !important auf alle Margin-Resets, da WordPress
   Gutenberg-Block-Wrapper eigene margin-block hinzufügen.
   ---------------------------------------------------------- */

/* 70% Breite — nicht full-width im Fließtext */
.pl-before-after {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-stone);
}

/* Alle direkten Kinder: null Margin und keine Lücken */
.pl-before-after > *,
.pl-before-after > p,
.pl-before-after > div {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pl-before,
.pl-after {
  margin: 0 !important;
  padding: 14px 20px;
}

/* Trennlinien statt Gaps */
.pl-before {
  border-bottom: 1px solid rgba(201, 61, 66, 0.18);
}

.pl-after {
  border-bottom: 1px solid rgba(45, 154, 90, 0.15);
}

/* "Was sich geändert hat" direkt anschließen */
.pl-before-after > p {
  margin: 0 !important;
  padding: 12px 20px;
  background: var(--pl-off-white);
  font-size: 14px;
  color: var(--pl-ink-mid);
}


/* ----------------------------------------------------------
   13. FORTSCHRITTS-TRACKER — Radio-Button Kreise, Ziel größer
   ---------------------------------------------------------- */

.pl-milestone {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pl-stone);
  font-size: 15px;
  color: var(--pl-ink-mid);
  line-height: 1.6;
}

.pl-milestone:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-milestone::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--pl-orange);
  background: #fff;
  margin-top: 2px;
  box-shadow: 0 0 0 3px var(--pl-orange-light);
}

.pl-milestone--goal {
  color: var(--pl-dark);
  font-size: 18px;
  font-weight: 700;
  padding-top: 18px;
}

.pl-milestone--goal::before {
  background: var(--pl-orange);
  border-color: var(--pl-orange);
  width: 26px;
  height: 26px;
}


/* ----------------------------------------------------------
   14. REFLEXION — Hintergrund hinzufügen
   ---------------------------------------------------------- */

.pl-reflection-box {
  background: var(--pl-off-white);
  border-left: 3px solid var(--pl-ink-light);
  border-radius: 0 var(--pl-radius) var(--pl-radius) 0;
  padding: 20px 24px;
}


/* ----------------------------------------------------------
   15. STUDIE SAGT — Abstände + Trenner zwischen ERGEBNIS/QUELLE/BEDEUTUNG
   ---------------------------------------------------------- */

.pl-science-box p + p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 146, 56, 0.2);
}

.pl-science-box p {
  margin-bottom: 0;
}


/* ----------------------------------------------------------
   16. CHALLENGE-BOX — Icons vor Labels, Zeilen abgetrennt
   ---------------------------------------------------------- */

.pl-challenge-box p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pl-orange-mid);
}

.pl-challenge-box p:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.pl-challenge-box p:nth-child(2)::before { content: '🎯'; flex-shrink: 0; }
.pl-challenge-box p:nth-child(3)::before { content: '📅'; flex-shrink: 0; }
.pl-challenge-box p:nth-child(4)::before { content: '✅'; flex-shrink: 0; }
.pl-challenge-box p:nth-child(5)::before { content: '✗'; flex-shrink: 0; color: var(--pl-red); font-weight: 700; font-size: 16px; }


/* ----------------------------------------------------------
   17. KAPITEL-INTRO — □ Checkbox-Items statt Bullets
   ---------------------------------------------------------- */

.pl-chapter-intro ul {
  list-style: none;
  padding-left: 0;
}

.pl-chapter-intro ul > li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--pl-ink);
}

.pl-chapter-intro ul > li::before {
  content: '☐';
  flex-shrink: 0;
  color: var(--pl-orange);
  font-size: 18px;
  line-height: 1.3;
}


/* ----------------------------------------------------------
   18. CROSS-REFERENCE — Eine Zeile, kompakt
   ---------------------------------------------------------- */

.pl-cross-reference {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  flex-wrap: nowrap;
}

.pl-cross-reference h3 { display: none; }
.pl-cross-reference p { margin: 0; font-size: 15px; }


/* ----------------------------------------------------------
   19. ENTSCHEIDUNGSBAUM — Visueller Baum mit Branches
   Braucht neue HTML-Struktur im Showcase (siehe HTML-Update)
   ---------------------------------------------------------- */

.pl-decision-tree {
  background: transparent;
  border: none;
  padding: 0;
  margin: 40px 0;
}

.pl-decision-tree > h3 {
  text-align: center;
  margin-bottom: 28px;
}

.pl-dt-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pl-dt-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pl-dt-question + .pl-dt-question {
  margin-top: 32px;
}

.pl-dt-q-box {
  background: var(--pl-orange-light);
  border: 2px solid var(--pl-orange-mid);
  border-radius: var(--pl-radius);
  padding: 14px 28px;
  text-align: center;
  max-width: 500px;
  width: 100%;
  font-size: 15px;
  color: var(--pl-ink);
  line-height: 1.5;
  position: relative;
}

.pl-dt-q-box::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: var(--pl-orange);
}

.pl-dt-branches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 580px;
  margin-top: 22px;
  position: relative;
}

.pl-dt-branches::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(25% + 8px);
  right: calc(25% + 8px);
  height: 2px;
  background: var(--pl-orange);
}

.pl-dt-branch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pl-dt-branch::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 22px;
  background: var(--pl-orange);
}

.pl-dt-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 18px;
  border-radius: var(--pl-radius-pill);
}

.pl-dt-yes .pl-dt-label { background: var(--pl-green); color: #fff; }
.pl-dt-no .pl-dt-label { background: var(--pl-ink-mid); color: #fff; }

.pl-dt-answer {
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
  border-radius: var(--pl-radius);
  padding: 12px 14px;
  font-size: 14px;
  text-align: center;
  color: var(--pl-ink);
  line-height: 1.5;
  width: 100%;
}


/* ----------------------------------------------------------
   RESPONSIVE v2 — Mobile Korrekturen
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  .pl-timeline-box,
  .pl-dialog-box,
  .pl-before-after,
  .pl-myth-box {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .pl-dt-branches {
    grid-template-columns: 1fr;
    max-width: 300px;
    gap: 24px;
  }

  .pl-dt-branches::before { display: none; }

  .pl-dt-branch::before {
    top: -24px;
    height: 24px;
  }

  .pl-pull-quote,
  .pl-expert-quote,
  .pl-community-voice,
  .pl-sebastien-says {
    max-width: 100%;
    margin: 28px 0;
  }

  .pl-stats-bar {
    border-radius: var(--pl-radius);
    margin-left: 0;
    margin-right: 0;
  }
}
}


/* ============================================================
   PRO/CONTRA — Korrekturen v3
   Labels entfernen: h4 als echte Überschrift statt Badge-Label.
   ✓ und ✗ vor jedem Listenpunkt.
   ============================================================ */

/* h4 sieht nicht mehr aus wie ein kleines Label */
.pl-pro h4,
.pl-contra h4 {
  text-transform: none;
  letter-spacing: normal;
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 14px;
}

.pl-pro h4 { color: var(--pl-green); }
.pl-contra h4 { color: var(--pl-red); }

/* Pro-Liste: ✓ grün vor jedem Item */
.pl-pro ul {
  list-style: none;
  padding-left: 0;
}

.pl-pro ul > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding-left: 0;
}

.pl-pro ul > li::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--pl-green);
  font-weight: 700;
  font-size: 15px;
  margin-top: 1px;
  line-height: 1.6;
}

/* Contra-Liste: ✗ rot vor jedem Item */
.pl-contra ul {
  list-style: none;
  padding-left: 0;
}

.pl-contra ul > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  padding-left: 0;
}

.pl-contra ul > li::before {
  content: '✗';
  flex-shrink: 0;
  color: var(--pl-red);
  font-weight: 700;
  font-size: 15px;
  margin-top: 1px;
  line-height: 1.6;
}


/* ============================================================
   DESIGN-KORREKTUREN v4 — April 2026
   ============================================================ */


/* ----------------------------------------------------------
   1. PRO/CONTRA — Badge-Label ausblenden
   Wenn zwei h4-Elemente im Block: erstes (kurzes Badge) verstecken.
   Wenn nur ein h4 (neues HTML): bleibt sichtbar.
   ---------------------------------------------------------- */

.pl-pro > h4:first-child:not(:only-of-type),
.pl-contra > h4:first-child:not(:only-of-type) {
  display: none;
}


/* ----------------------------------------------------------
   2. VERGLEICHSTABELLE
   Alle Header-Zellen orange (inkl. "Kriterium").
   Table-Body in hellgrau hinterlegen.
   ---------------------------------------------------------- */

/* Header-Reihe: weiß, orange Schrift, alle 4 Seiten orange Border */
.pl-comparison-table th {
  background: #fff !important;
  color: var(--pl-orange) !important;
  border-top: 1.5px solid var(--pl-orange) !important;
  border-bottom: 1.5px solid var(--pl-orange) !important;
  border-left: 1.5px solid var(--pl-orange) !important;
  border-right: 1.5px solid var(--pl-orange) !important;
}

/* Äußere Tabellenrand oben orange — deckt den table-border bei collapse */
.pl-comparison-table table {
  border-top: 1.5px solid var(--pl-orange) !important;
  border-left: 1.5px solid var(--pl-orange) !important;
  border-right: 1.5px solid var(--pl-orange) !important;
}

/* Alle Datenzellen in Off-White */
.pl-comparison-table td {
  background: var(--pl-off-white);
}

/* Erste Spalte: etwas dunkler als off-white, heller als stone */
/* stone = #f0ede6, off-white = #faf9f6 → Mitte: #f5f3ef */
.pl-comparison-table td:first-child {
  background: #f5f3ef !important;
}


/* ----------------------------------------------------------
   3. TIMELINE — Spacing reduzieren + Pfeil als Kreis-Badge
   ---------------------------------------------------------- */

/* Weniger Luft zwischen Phasen-Box und Pfeil */
.pl-timeline-phase {
  margin: 0;
  padding: 10px 16px;
}

.pl-timeline-goal {
  margin-top: 0;
}

/* Pfeil: Text ausblenden, Kreis-Badge per ::before */
.pl-timeline-arrow {
  font-size: 0;
  line-height: 0;
  margin: 6px 0;
  display: flex;
  justify-content: center;
}

.pl-timeline-arrow::before {
  content: '↓';
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--pl-orange);
  background: #fff;
  color: var(--pl-orange);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   4. ENTSCHEIDUNGSBAUM — Volle Breite + Farben
   JA = orange, NEIN = rot (statt grün/grau)
   ---------------------------------------------------------- */

/* Volle Breite wie der Fließtext */
.pl-dt-tree {
  width: 100%;
  align-items: stretch;
}

.pl-dt-question {
  width: 100%;
  align-items: center;
}

.pl-dt-q-box {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.pl-dt-branches {
  max-width: 100%;
  width: 100%;
}

/* JA = Orange */
.pl-dt-yes .pl-dt-label {
  background: var(--pl-orange) !important;
  color: #fff;
}

.pl-dt-yes .pl-dt-answer {
  background: var(--pl-orange-light);
  border-color: var(--pl-orange-mid);
}

/* NEIN = Rot */
.pl-dt-no .pl-dt-label {
  background: var(--pl-red) !important;
  color: #fff;
}

.pl-dt-no .pl-dt-answer {
  background: var(--pl-red-light);
  border-color: rgba(201, 61, 66, 0.2);
}


/* ----------------------------------------------------------
   5. BOX-KONFORMES BADGE-SYSTEM
   Zahlen-Badges nehmen die Farbe ihrer Box an.
   Prinzip: gleiche Farbe = kein visueller Bruch im Lesefluss.

   GRÜN   → green-light bg, green Border + Zahl
   GRAU   → off-white bg, ink-light Border, ink-mid Zahl
   ROT    → red-light bg, red Border + Zahl
   ORANGE → bleibt global (white bg, orange Border + Zahl)
   ---------------------------------------------------------- */


/* GRÜN — Selbst-Check, Pro-Spalte */
.pl-self-assessment ol > li::before,
.pl-pro ol > li::before {
  background: var(--pl-green-light);
  border-color: var(--pl-green);
  color: var(--pl-green);
}


/* GRAU — alle off-white Boxen (Praxistipp bleibt orange = global default) */
/* font-style: normal — verhindert Italic-Vererbung aus pl-reflection-box li */
.pl-todo-box ol > li::before,
.pl-summary-box ol > li::before,
.pl-quick-reference ol > li::before,
.pl-chapter-intro ol > li::before,
.pl-resources-box ol > li::before,
.pl-mini-story ol > li::before,
.pl-case-study ol > li::before,
.pl-dialog-box ol > li::before,
.pl-timeline-box ol > li::before,
.pl-reflection-box ol > li::before,
.pl-numbered-callout ol > li::before,
.pl-info-box ol > li::before,
.pl-science-box ol > li::before,
.pl-infobox ol > li::before,
.pl-definition-box ol > li::before,
.pl-perspective-insight ol > li::before,
.pl-sidebar-note ol > li::before,
.pl-key-metric ol > li::before,
.pl-fun-fact-box ol > li::before,
.pl-cross-reference ol > li::before,
.pl-next-step-box ol > li::before {
  background: var(--pl-off-white);
  border-color: var(--pl-ink-light);
  color: var(--pl-ink-mid);
  font-style: normal;
}


/* ROT — Warning, Worst Case, Myth Claim, Contra-Spalte */
.pl-warning-box ol > li::before,
.pl-worst-case ol > li::before,
.pl-myth-claim ol > li::before,
.pl-contra ol > li::before,
.pl-perspective-you ol > li::before {
  background: var(--pl-red-light);
  border-color: var(--pl-red);
  color: var(--pl-red);
}


/* ============================================================
   DESIGN-KORREKTUREN v5 — April 2026
   ============================================================ */


/* ----------------------------------------------------------
   1. MYTHOS vs. REALITÄT — "VS." im Zwischenraum
   VS. steht zwischen den beiden Boxen, nicht darin.
   Lösung: ::after auf claim = none, ::before auf reply
   mit position:absolute + negativem top-Wert.
   ---------------------------------------------------------- */

/* Altes ::after aus Claim entfernen */
.pl-myth-claim::after {
  content: none;
}

/* Myth-Box: kleiner (70%), grauer Hintergrund */
.pl-myth-box {
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
  background: var(--pl-off-white);
  border: 1px solid var(--pl-stone);
}

/* Myth-Reply: Freiraum oben für den VS.-Badge */
.pl-myth-reply {
  position: relative;
  margin-top: 72px;
}

/* VS. als Kreis-Badge — unser Icon-Design:
   off-white Hintergrund, orange Border, orange Schrift */
.pl-myth-reply::before {
  content: 'VS.';
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);

  /* Kreis */
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--pl-orange);
  background: var(--pl-off-white);

  /* Text zentrieren */
  display: flex;
  align-items: center;
  justify-content: center;

  font-family: var(--pl-font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--pl-orange);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
  box-sizing: border-box;
}


/* ----------------------------------------------------------
   2. STATS BAR — Große Zahlen bestätigt & gesichert
   Gilt global: alle strong-Elemente in pl-stats-bar
   sind 26px, 900er Gewicht, orange — für %, ×, +/−
   ---------------------------------------------------------- */

.pl-stats-bar strong {
  font-size: 26px;
  font-weight: 900;
  color: var(--pl-orange);
  line-height: 1.2;
}


/* ----------------------------------------------------------
   3. CHECKLISTE — Grünes Design (Box + Badges)
   Checkliste ist eine grüne Box, nicht orange.
   Badges: green-light, grüne Border, grüne Häkchen.
   ---------------------------------------------------------- */

.pl-checklist,
ul.checklist {
  background: var(--pl-green-light) !important;
  border: 1.5px solid rgba(45, 154, 90, 0.2) !important;
  border-left: 4px solid var(--pl-green) !important;
}

.pl-checklist h3,
ul.checklist h3 {
  color: var(--pl-green);
}

.pl-checklist li::before,
ul.checklist li::before {
  background: var(--pl-green-light);
  border-color: var(--pl-green);
  color: var(--pl-green);
}


/* ============================================================
   DESIGN-KORREKTUREN v6 — April 2026
   ============================================================ */


/* ----------------------------------------------------------
   1. TIMELINE — Pfeil-Spacing minimal reduzieren
   margin: 6px 0 → 2px 0
   ---------------------------------------------------------- */

.pl-timeline-arrow {
  margin: 2px 0 !important;
}


/* ----------------------------------------------------------
   2. ENTSCHEIDUNGSBAUM — Outlined Pill-Buttons
   JA: weiß, orange Text + Border
   NEIN: weiß, rot Text + Border
   (Kein filled Background mehr)
   ---------------------------------------------------------- */

.pl-dt-yes .pl-dt-label {
  background: #fff !important;
  color: var(--pl-orange) !important;
  border: 2px solid var(--pl-orange) !important;
}

.pl-dt-no .pl-dt-label {
  background: #fff !important;
  color: var(--pl-red) !important;
  border: 2px solid var(--pl-red) !important;
}


/* ----------------------------------------------------------
   3. PERSPEKTIVWECHSEL — 70% Breite + keine weißen Gaps
   Gleiche Lösung wie .pl-before-after:
   overflow:hidden + margin: 0 !important auf alle Kinder
   ---------------------------------------------------------- */

.pl-perspective-box {
  max-width: 70%;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Alle direkten Kinder: null Margin (WP Block Wrapper fix) */
.pl-perspective-box > *,
.pl-perspective-box > div,
.pl-perspective-box > p {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pl-perspective-you,
.pl-perspective-other,
.pl-perspective-insight {
  margin: 0 !important;
}


/* ----------------------------------------------------------
   4. CHAPTER INTRO — List items auf Standard-Größe (16px)
   Passt zu allen anderen Box-Listen im Design.
   ---------------------------------------------------------- */

.pl-chapter-intro {
  font-size: 16px !important;
}

.pl-chapter-intro li {
  font-size: 16px !important;
  margin-bottom: 8px;
}


/* ============================================================
   DESIGN-KORREKTUREN v7 — April 2026
   ============================================================ */


/* ----------------------------------------------------------
   1. BOX-ÜBERSCHRIFTEN — Einheitliche Display-Schrift
   Alle h3/h4/strong-Headings in Boxen:
   → var(--pl-font-display) (Serif), 18px, kein Uppercase
   → Farbe = Boxfarbe (orange / rot / grün / grau)
   Referenz: .pl-warning-box h3 ("Achtung: Schlafentzug...")
   ---------------------------------------------------------- */

/* GLOBAL: Display-Font + Größe für alle Box-Headings */
.pl-practice-tip h3,
.pl-todo-box h3,
.pl-challenge-box h3,
.pl-self-assessment h3,
.pl-reflection-box h3,
.pl-donts-box h3,
.pl-summary-box h3,
.pl-quick-reference h3,
.pl-chapter-intro h3,
.pl-resources-box h3,
.pl-next-step-box h3,
.pl-mini-story h3,
.pl-case-study h3,
.pl-worst-case h3,
.pl-dialog-box h3,
.pl-ranking-box h3,
.pl-timeline-box h3,
.pl-before-after h3,
.pl-progress-tracker h3,
.pl-numbered-callout h3,
.pl-perspective-box h3,
.pl-perspective-insight h3,
.pl-cross-reference h3,
.pl-infobox h3,
.pl-science-box h3,
.pl-info-box h3,
.pl-definition-box h3,
.pl-key-metric h3,
.pl-fun-fact-box h3,
.pl-sidebar-note h3,
.pl-myth-box h3,
.pl-warning-box h3,
.pl-checklist h3,
ul.checklist h3,
.pl-sebastien-says h3,
.pl-pro h4,
.pl-contra h4,
.pl-warning-box strong:first-child,
.pl-science-box strong:first-child,
.pl-info-box strong:first-child {
  font-family: var(--pl-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
}


/* ORANGE Boxen → orange Heading */
.pl-practice-tip h3,
.pl-chapter-intro h3,
.pl-next-step-box h3,
.pl-ranking-box h3,
.pl-numbered-callout h3,
.pl-timeline-box h3,
.pl-sebastien-says h3,
.pl-cross-reference h3 {
  color: var(--pl-orange) !important;
}


/* ROT Boxen → rote Heading */
.pl-warning-box h3,
.pl-warning-box strong:first-child,
.pl-worst-case h3,
.pl-donts-box h3,
.pl-contra h4 {
  color: var(--pl-red) !important;
}


/* GRÜN Boxen → grüne Heading */
.pl-self-assessment h3,
.pl-checklist h3,
ul.checklist h3,
.pl-pro h4 {
  color: var(--pl-green) !important;
}

/* SONDERFALL CHECKLISTE — h3 liegt durch Browser-HTML-Parsing
   außerhalb von ul.pl-checklist (h3 in ul ist invalid HTML →
   Browser schiebt h3 als Geschwister davor).
   :has(+ ul) greift auf das h3 das direkt vor der ul liegt. */
h3:has(+ ul.pl-checklist),
h3:has(+ ul.checklist) {
  font-family: var(--pl-font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  color: var(--pl-green) !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
}


/* ============================================================
   DESIGN-KORREKTUREN v8 — April 2026
   ============================================================ */


/* ----------------------------------------------------------
   1. CASE STUDY — Bold-Label als Block (wie Worst Case)
   p strong wird zur eigenständigen Zeile: Label oben,
   Erklärungstext direkt darunter.
   ---------------------------------------------------------- */

.pl-case-study p strong {
  display: block !important;
  font-weight: 700 !important;
  color: var(--pl-ink-mid) !important;
  font-size: 15px !important;
  font-style: normal !important;
  margin: 10px 0 3px !important;
}

.pl-case-study p strong:first-child,
.pl-case-study p:first-of-type strong {
  margin-top: 0 !important;
}


/* ----------------------------------------------------------
   2. DON'TS — Bold-Label als Block pro List-Item
   li wird auf block + padding umgestellt, ::before absolut
   positioniert → ✗ steht neben der ersten Zeile (dem Label).
   ---------------------------------------------------------- */

.pl-donts-box ul > li {
  display: block !important;
  position: relative !important;
  padding-left: 28px !important;
  margin-bottom: 16px !important;
}

.pl-donts-box ul > li::before {
  position: absolute !important;
  left: 0 !important;
  top: 1px !important;
}

.pl-donts-box li strong {
  display: block !important;
  color: var(--pl-red) !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}


/* ----------------------------------------------------------
   3. SCIENCE BOX — Sublabels kein Uppercase-Badge mehr
   "Ergebnis:", "Quelle:", "Bedeutung für Dich:" sind
   normaler Bold-Text (dark), nicht farbige Badge-Labels.
   ---------------------------------------------------------- */

.pl-science-box strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--pl-dark) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 10px 0 3px !important;
}

.pl-science-box p:first-of-type strong,
.pl-science-box strong:first-child {
  margin-top: 0 !important;
}


/* GRAU Boxen → ink-mid Heading */
.pl-todo-box h3,
.pl-challenge-box h3,
.pl-reflection-box h3,
.pl-summary-box h3,
.pl-quick-reference h3,
.pl-resources-box h3,
.pl-mini-story h3,
.pl-case-study h3,
.pl-dialog-box h3,
.pl-infobox h3,
.pl-science-box h3,
.pl-science-box strong:first-child,
.pl-info-box h3,
.pl-info-box strong:first-child,
.pl-definition-box h3,
.pl-key-metric h3,
.pl-fun-fact-box h3,
.pl-sidebar-note h3,
.pl-perspective-box h3,
.pl-perspective-insight h3,
.pl-myth-box h3,
.pl-before-after h3,
.pl-progress-tracker h3 {
  color: var(--pl-ink-mid) !important;
}


/* ----------------------------------------------------------
   5. MYTHOS-BOX — kein Hintergrund, kein Rahmen
   v5 hatte background + border gesetzt, beide entfernen.
   ---------------------------------------------------------- */

.pl-myth-box {
  background: transparent !important;
  border: none !important;
}


/* ----------------------------------------------------------
   6. CHECKLISTE — Doppel-Label entfernen
   Erstes h3 inside .pl-checklist immer verstecken.
   Begründung: In validem HTML landet h3 außerhalb des ul →
   Selector greift nicht → Showcase-Title bleibt sichtbar.
   In WP-Content (div.pl-checklist) werden beide h3 gefunden
   → erstes (Badge "CHECKLISTE") wird ausgeblendet.
   ---------------------------------------------------------- */

.pl-checklist h3:first-of-type,
ul.checklist h3:first-of-type {
  display: none;
}


/* ============================================================
   DESIGN-KORREKTUREN v9 — April 2026
   Einheitlich runde Ecken — ans DATEIENDE verschoben,
   damit keine spätere Regel überschreiben kann.
   ============================================================ */

div.pl-checklist,
ul.pl-checklist,
ul.checklist,
.entry-content .pl-checklist,
.entry-content ul.checklist {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.entry-content .pl-reflection-box,
.pl-reflection-box {
  border-radius: 12px !important;
}

.entry-content .pl-next-step-box,
.pl-next-step-box {
  border-radius: 12px !important;
}

.entry-content .pl-pro,
.pl-pro {
  border-radius: 12px !important;
}

.entry-content .pl-contra,
.pl-contra {
  border-radius: 12px !important;
}

.entry-content .pl-quick-reference,
.pl-quick-reference {
  border-radius: 12px !important;
}