/*
 Theme Name:   KWS Child Theme
 Theme URI:    https://www.kws-international.de
 Description:  Child Theme für KWS International — enthält das vollständige KWS Blog & Leistungsseiten Design-System.
 Template:     investex
 Version:      2.23
 Author:       KWS International Steuerberatungsgesellschaft mbH
*/

/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* ─── DESIGN-TOKENS ─── */
:root {
  --kws-navy:     #0F1F3D;
  --kws-navy-mid: #1C3160;
  --kws-gold:     #C4933F;
  --kws-gold-lt:  #E8B96A;
  --kws-cream:    #F7F4EF;
  --kws-cream2:   #EDE9E2;
  --kws-ink:      #1E1E1E;
  --kws-ink-mid:  #3C3C3C;
  --kws-ink-lt:   #6B6361;
  --kws-rule:     #D4CFC8;
  --kws-s2bg:     #FEF3E2;
  --kws-s3bg:     #FEE8E8;
  --kws-s2bdr:    #C4933F;
  --kws-s3bdr:    #C0392B;

  /* Versatz für Anker-Sprungmarken (TOC-Links).
     0 = kein sticky Header vorhanden.
     Nur anpassen, wenn später ein sticky Header eingebaut wird. */
  --kws-header-height: 0px;

  /* ── Supplementäre Tokens — Leistungsseite Verrechnungspreise ───────────
     Diese Werte stammen aus dem KWS Design-System-Dokument und weichen
     bewusst von --kws-navy / --kws-gold ab (andere Sättigungsstufen).
     Änderungen hier betreffen NUR Komponenten die var(--kws-dark-bg) etc.
     referenzieren — bestehende Blog-Seiten bleiben unberührt.          */
  --kws-dark-bg:      #1a1a2e;  /* Hero & Expert-Sektion: Charcoal-Indigo  */
  --kws-dark-bg-mid:  #2e4057;  /* Hero-Gradient Endton                    */
  --kws-gold-warm:    #c8922a;  /* Warmer Gold-Akzent Leistungsseite        */
  --kws-gold-bright:  #e8b84b;  /* Helles Gold im Dark-Context             */
  --kws-border-light: #e5e7eb;  /* Heller Border-Ton (Blog-Teaser)         */
  --kws-bg-subtle:    #fafafa;  /* Subtiler Hintergrund (Blog-Teaser)       */
  --kws-text-muted:   #6b7280;  /* Gedämpfter Textton (Labels)             */
}

/* ─── ANKER-NAVIGATION: SCROLL-OFFSET & BREATHING ROOM ─── */
/*
 * scroll-margin-top steuert den Abstand zwischen Viewport-Oberkante und
 * Sektionsbeginn nach einem Anker-Sprung.
 *
 * --kws-header-height: 0px  — kein Sticky Header im Investex-Theme.
 * 1.5rem (≈ 24px)           — visueller Atemraum, damit die Sektion
 *                             nicht direkt am Viewport-Rand klebt.
 *
 * Der JS-Interceptor (kws-functions-snippet.php, wp_footer Prio 35)
 * übernimmt TOC-Klick-Events via Capture-Phase und ruft
 * scrollIntoView({ block: 'start' }) auf — dieser CSS-Wert wird dabei
 * als Offset-Quelle vom Browser direkt genutzt.
 *
 * @standard DS 18.1 (Anker-Navigation)
 * @see      kws-functions-snippet.php — kws_anchor_navigation_script()
 */
.kws-blog-post section[id] {
  scroll-margin-top: calc(var(--kws-header-height) + 1.5rem);
}

/* @deprecated v2.17 — h2[id]-Regel entfernt.
   Begründung: Alle Sprungmarken-IDs sitzen auf <section>-Elementen.
   Kein <h2> im KWS-Markup trägt ein id-Attribut. Regel feuerte nie.
   Atemraum korrekt via section[id] oben abgedeckt.
   @since v2.17 */

/* ─── PROGRESS BAR (global, position:fixed) ─── */
#kws-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kws-gold), var(--kws-gold-lt));
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
  pointer-events: none;
}

/* ─── WRAPPER ─── */
.kws-blog-post {
  font-family: var(--body);  /* var(--body) = Lora (Blog) | Source Serif 4 (Leistung) */
  line-height: 1.75;
  color: var(--kws-ink);
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  background: var(--kws-cream);
}

/* ─── HERO ─── */
.kws-blog-post .hero {
  background: var(--kws-navy);
  padding: 6rem 2.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .hero::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 79px,
    rgba(255,255,255,.018) 79px, rgba(255,255,255,.018) 80px
  );
  pointer-events: none;
}
.kws-blog-post .hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.kws-blog-post .hero-category {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: 1.8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .hero-category::before {
  content: '';
  display: block;
  width: 28px; height: 1px;
  background: var(--kws-gold);
  flex-shrink: 0;
}
.kws-blog-post .hero h1 {
  font-family: var(--serif);  /* var(--serif) = Cormorant Garamond (Blog) | Playfair Display (Leistung) */
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: -.01em;
}
.kws-blog-post .hero h1 em {
  font-style: italic;
  color: var(--kws-gold-lt);
}
.kws-blog-post .hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,.7);
  max-width: 620px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}
.kws-blog-post .hero-meta {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.kws-blog-post .meta-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.kws-blog-post .meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .meta-value {
  font-family: 'Lora', serif;
  font-size: .82rem;
  color: rgba(255,255,255,.8);
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .meta-sep {
  width: 1px; height: 32px;
  background: rgba(255,255,255,.15);
}

/* ─── BLOG-HERO VARIANTEN ─────────────────────────────────────────────────────
   Page-spezifische Hintergrund-Akzente als Modifier-Klassen.
   Ersetzt Inline-style="background-image:..." auf <section class="hero"> —
   Standard 11.1: kein Inline-style in Elementor HTML-Widgets.
   ─────────────────────────────────────────────────────────────────────────── */

/* Globale Mindestbesteuerung / Trump: Gold-Akzent + roter Bedrohungsakzent */
.kws-blog-post .hero--trump {
  background-image:
    radial-gradient(ellipse at 15% 30%, rgba(196,147,63,.22) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 70%, rgba(192,57,43,.12) 0%, transparent 50%);
}

/* Verrechnungspreisdokumentation: Gold rechts, tiefes Navy links */
.kws-blog-post .hero--vp-doku {
  background-image:
    radial-gradient(ellipse at 100% 50%, rgba(196,147,63,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 0%, rgba(15,31,61,1) 0%, transparent 60%);
}

/* Amount B: Gold rechts oben, Navy links unten */
.kws-blog-post .hero--amount-b {
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(196,147,63,.18) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(28,49,96,.8) 0%, transparent 50%);
}

/* Fremdvergleichsgrundsatz: Gold oben Mitte, Navy links unten */
.kws-blog-post .hero--fremdvergleich {
  background-image:
    radial-gradient(ellipse at 60% 0%, rgba(196,147,63,.25) 0%, transparent 55%),
    radial-gradient(ellipse at 5% 100%, rgba(28,49,96,.9) 0%, transparent 50%);
}

/* ─── UPDATE-BANNER (Trump-Beitrag) ─── */
.kws-blog-post .update-banner {
  background: linear-gradient(135deg, #0D2A1A 0%, #1A4A2E 100%);
  border-bottom: 2px solid #2ECC71;
  padding: 1rem 2.5rem;
}
.kws-blog-post .update-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.kws-blog-post .update-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ECC71;
  flex-shrink: 0;
  box-shadow: 0 0 8px #2ECC71;
  animation: kws-pulse-green 2s ease-in-out infinite;
}
@keyframes kws-pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.kws-blog-post .update-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  color: rgba(255,255,255,.85);
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .update-text strong { color: #2ECC71; }

/* ─── ARTIKEL-BEREICH ─── */
.kws-blog-post .article-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 2.5rem 6rem;
}

/* ─── TAG STRIP ─── */
.kws-blog-post .tag-strip {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--kws-rule);
}
.kws-blog-post .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kws-navy-mid);
  border: 1px solid var(--kws-navy-mid);
  padding: .25rem .7rem;
  border-radius: 2px;
  opacity: .7;
  hyphens: none; -webkit-hyphens: none;
}

/* ─── FLIESSTEXT ─── */
.kws-blog-post .lead-paragraph {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--kws-ink-mid);
  border-left: 3px solid var(--kws-gold);
  padding-left: 1.5rem;
  margin-bottom: 2.5rem;
}
.kws-blog-post p {
  margin-bottom: 1.5rem;
  color: var(--kws-ink-mid);
  font-size: .97rem;
}
.kws-blog-post h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--kws-navy);
  margin: 3rem 0 1.2rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.kws-blog-post h2::after {
  content: '';
  display: block;
  width: 40px; height: 2px;
  background: var(--kws-gold);
  margin-top: .6rem;
}
.kws-blog-post h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kws-navy-mid);
  margin: 2rem 0 .6rem;
  font-style: italic;
}
.kws-blog-post .rule {
  border: none;
  border-top: 1px solid var(--kws-rule);
  margin: 3rem 0;
}

/* ─── PULL QUOTE ─── */
.kws-blog-post .pull-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--kws-navy);
  line-height: 1.4;
  border-top: 2px solid var(--kws-gold);
  border-bottom: 1px solid var(--kws-rule);
  padding: 1.8rem 0;
  margin: 3rem 0;
  letter-spacing: -.01em;
}

/* ─── BADGES ─── */
.kws-blog-post .badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .63rem;
  letter-spacing: .1em;
  font-weight: 500;
  padding: .2rem .55rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: .4rem;
  white-space: normal;
  word-break: keep-all;
  max-width: 100%;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .badge-s2 {
  background: var(--kws-s2bg);
  color: #7A5A1E;
  border: 1px solid var(--kws-s2bdr);
}
.kws-blog-post .badge-s3 {
  background: var(--kws-s3bg);
  color: #8B2020;
  border: 1px solid var(--kws-s3bdr);
}

/* ─── NUMMERIERTE PUNKTE ─── */
.kws-blog-post .point-list {
  list-style: none;
  counter-reset: pts;
  margin: 1.5rem 0 2rem;
  padding: 0;
}
.kws-blog-post .point-list li {
  counter-increment: pts;
  display: flex;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  align-items: flex-start;
}
.kws-blog-post .point-list li::before {
  content: counter(pts, decimal-leading-zero);
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--kws-gold);
  letter-spacing: .05em;
  min-width: 22px;
  padding-top: .25rem;
  flex-shrink: 0;
}
.kws-blog-post .point-list li p { margin: 0; }
.kws-blog-post .point-strong {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--kws-navy);
  display: block;
  margin-bottom: .25rem;
}

/* ─── CASE BOX (Urteile) ─── */
.kws-blog-post .case-box {
  border: 1px solid var(--kws-rule);
  border-left: 4px solid var(--kws-navy-mid);
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
  background: #fff;
  border-radius: 0 4px 4px 0;
}
.kws-blog-post .case-box-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-navy-mid);
  margin-bottom: .7rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .case-box h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--kws-navy);
  margin-bottom: .5rem;
}
.kws-blog-post .case-box p {
  font-size: .88rem;
  margin: 0;
  color: var(--kws-ink-mid);
}
.kws-blog-post code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  background: var(--kws-cream2);
  color: var(--kws-navy-mid);
  padding: .15rem .4rem;
  border-radius: 2px;
  hyphens: none; -webkit-hyphens: none;
}

/* ─── NORM-BLOCK ─── */
.kws-blog-post .norm-block {
  background: var(--kws-navy);
  padding: 1.8rem 2rem;
  margin: 2rem 0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .norm-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kws-gold), var(--kws-gold-lt), transparent);
}
.kws-blog-post .norm-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: .8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .norm-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255,255,255,.85);
  line-height: 1.6;
  margin-bottom: .8rem;
}
.kws-blog-post .norm-source {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: rgba(255,255,255,.45);
  hyphens: none; -webkit-hyphens: none;
}

/* ─── FACT BOX ─── */
.kws-blog-post .fact-box {
  background: var(--kws-navy);
  border-radius: 4px;
  padding: 2rem 2.2rem;
  margin: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .fact-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kws-gold), var(--kws-gold-lt), transparent);
}
.kws-blog-post .fact-box-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: 1rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .fact-box h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .6rem;
}
.kws-blog-post .fact-box p {
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  margin: 0;
}
.kws-blog-post .fact-box code {
  background: rgba(196,147,63,.2);
  color: var(--kws-gold-lt);
}

/* ─── TIMELINE ─── */
.kws-blog-post .timeline {
  margin: 2rem 0 2.5rem;
  border-left: 2px solid var(--kws-rule);
  padding-left: 1.8rem;
}
.kws-blog-post .tl-item {
  position: relative;
  margin-bottom: 1.5rem;
}
.kws-blog-post .tl-item::before {
  content: '';
  position: absolute;
  left: -2.15rem; top: .35rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--kws-gold);
  background: var(--kws-cream);
}
.kws-blog-post .tl-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--kws-gold);
  margin-bottom: .3rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .tl-event {
  font-size: .9rem;
  color: var(--kws-ink-mid);
  line-height: 1.55;
}

/* ─── KORREKTUR-HINWEIS ─── */
.kws-blog-post .correction-note {
  background: #FFF8E7;
  border: 1px solid #E8C86A;
  border-left: 3px solid var(--kws-gold);
  padding: 1.2rem 1.5rem;
  border-radius: 0 4px 4px 0;
  margin: 2rem 0;
}
.kws-blog-post .correction-note .cn-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A5A1E;
  margin-bottom: .5rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .correction-note p {
  font-size: .84rem;
  color: #5A4015;
  margin: 0;
}

/* ─── QUELLEN ─── */
.kws-blog-post .sources-section {
  background: var(--kws-cream2);
  border-top: 2px solid var(--kws-rule);
  padding: 2.5rem 0 0;
  margin-top: 3rem;
}
.kws-blog-post .sources-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kws-ink-lt);
  margin-bottom: 1.2rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .source-item {
  display: flex;
  gap: .8rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--kws-rule);
  align-items: flex-start;
}
.kws-blog-post .source-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--kws-gold);
  min-width: 20px;
  padding-top: .1rem;
  flex-shrink: 0;
}
.kws-blog-post .source-content { flex: 1; }
.kws-blog-post .source-title {
  font-size: .82rem;
  color: var(--kws-ink);
  font-weight: 500;
  display: block;
  margin-bottom: .2rem;
}
.kws-blog-post .source-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--kws-ink-lt);
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .source-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: var(--kws-navy-mid);
  word-break: break-all;
  text-decoration: none;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .source-url:hover { color: var(--kws-gold); }

/* ─── STUFEN-LISTE (VP-Doku) ─── */
.kws-blog-post .stufen-list {
  list-style: none;
  margin: 1.8rem 0 2.5rem;
  padding: 0;
}
.kws-blog-post .stufen-item {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--kws-rule);
}
.kws-blog-post .stufen-item:last-child { border-bottom: none; }
.kws-blog-post .stufen-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 2px;
  background: var(--kws-navy);
  color: var(--kws-gold-lt);
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: .15rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .stufen-content h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--kws-navy);
  margin-bottom: .35rem;
}
.kws-blog-post .stufen-content p {
  font-size: .88rem;
  margin: 0;
  color: var(--kws-ink-mid);
}

/* ─── VORLAGE-FLOW (VP-Doku) ─── */
.kws-blog-post .flow-box {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 4px;
  overflow: hidden;
  margin: 2rem 0;
}
.kws-blog-post .flow-header {
  background: var(--kws-navy);
  padding: .9rem 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .flow-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--kws-rule);
}
.kws-blog-post .flow-step:last-child { border-bottom: none; }
.kws-blog-post .step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  color: var(--kws-gold);
  min-width: 20px;
  padding-top: .15rem;
  flex-shrink: 0;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .step-body { flex: 1; }
.kws-blog-post .step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--kws-navy);
  display: block;
  margin-bottom: .2rem;
}
.kws-blog-post .step-desc {
  font-size: .85rem;
  color: var(--kws-ink-mid);
  margin: 0;
}
.kws-blog-post .step-frist {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--kws-gold);
  background: var(--kws-s2bg);
  border: 1px solid var(--kws-s2bdr);
  padding: .15rem .45rem;
  border-radius: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  hyphens: none; -webkit-hyphens: none;
}

/* ─── FRIST-BOX (VP-Doku) ─── */
.kws-blog-post .frist-box {
  background: var(--kws-gold);
  padding: 1.6rem 2rem;
  margin: 2.5rem 0;
  border-radius: 4px;
}
.kws-blog-post .frist-box-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(15,31,61,.65);
  margin-bottom: .8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .frist-box h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kws-navy);
  margin-bottom: .5rem;
}
.kws-blog-post .frist-box p {
  font-size: .88rem;
  color: rgba(15,31,61,.8);
  margin: 0;
  line-height: 1.6;
}

/* ─── SANKTIONS-BOX (VP-Doku) ─── */
.kws-blog-post .sanktion-box {
  background: #FDF0F0;
  border: 1px solid #E8C8C8;
  border-left: 4px solid #7A2020;
  padding: 1.5rem 1.6rem;
  border-radius: 0 4px 4px 0;
  margin: 2rem 0;
}
.kws-blog-post .sanktion-box-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7A2020;
  margin-bottom: .8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .sanktion-list {
  list-style: none;
  padding: 0;
}
.kws-blog-post .sanktion-list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .4rem 0;
  font-size: .88rem;
  color: var(--kws-ink-mid);
}
.kws-blog-post .sanktion-list li::before {
  content: '→';
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: #7A2020;
  flex-shrink: 0;
  padding-top: .05rem;
}

/* ─── TRANSAKTIONS-MATRIX (VP-Doku) ─── */
.kws-blog-post .matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--kws-rule);
  border: 1px solid var(--kws-rule);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.8rem 0 2.5rem;
}
.kws-blog-post .matrix-cell {
  background: #fff;
  padding: .9rem 1.1rem;
}
.kws-blog-post .matrix-cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kws-gold);
  display: block;
  margin-bottom: .3rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .matrix-cell p {
  font-size: .84rem;
  margin: 0;
  color: var(--kws-ink-mid);
}

/* ─── DISCLAIMER ─── */
.kws-blog-post .disclaimer {
  background: var(--kws-cream2);
  border: 1px solid var(--kws-rule);
  border-left: 3px solid var(--kws-ink-lt);
  padding: 1.4rem 1.6rem;
  border-radius: 0 4px 4px 0;
  margin-top: 3rem;
}
.kws-blog-post .disclaimer p {
  font-size: .8rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.6;
}
/* v2.13: Zweiter <p> im Disclaimer (Badge-Legende) erhält Abstand nach oben */
.kws-blog-post .disclaimer p + p {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--kws-rule);
}

/* ─── CTA BLOCK ─── */
.kws-blog-post .cta-block {
  background: var(--kws-navy);
  background-image: radial-gradient(ellipse at 90% 50%, rgba(196,147,63,.2) 0%, transparent 60%);
  padding: 2.8rem 3rem;
  margin-top: 3.5rem;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .cta-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--kws-gold), var(--kws-gold-lt), transparent);
}
.kws-blog-post .cta-block h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-style: normal;
  color: #fff;
  margin: 0 0 .7rem;
}
.kws-blog-post .cta-block p {
  color: rgba(255,255,255,.7);
  font-size: .88rem;
  margin-bottom: 1.5rem;
}
.kws-blog-post .cta-btn {
  display: inline-block;
  background: var(--kws-gold);
  color: var(--kws-navy);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 2rem;
  text-decoration: none;
  font-weight: 500;
  transition: background .2s, transform .15s;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .cta-btn:hover {
  background: var(--kws-gold-lt);
  transform: translateY(-1px);
}

/* ─── ANIMATIONEN ─── */
@keyframes kws-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kws-blog-post .hero-inner > * {
  animation: kws-fadeUp .7s ease both;
}
.kws-blog-post .hero-inner > *:nth-child(1) { animation-delay: .05s; }
.kws-blog-post .hero-inner > *:nth-child(2) { animation-delay: .15s; }
.kws-blog-post .hero-inner > *:nth-child(3) { animation-delay: .25s; }
.kws-blog-post .hero-inner > *:nth-child(4) { animation-delay: .35s; }

/* v2.19: Identisches Eintritts-Pattern für Leistungsseiten-Hero nachgezogen.
   Struktur dort ist .hero .container (nicht .hero-inner), daher eigener
   Selektor; nutzt dieselben kws-fadeUp-Keyframes. 5 Kind-Elemente:
   Breadcrumb, h1, hero-lead, hero-meta, hero-cta-row. */
.kws-leistung .hero .container > * {
  animation: kws-fadeUp .7s ease both;
}
.kws-leistung .hero .container > *:nth-child(1) { animation-delay: .05s; }
.kws-leistung .hero .container > *:nth-child(2) { animation-delay: .15s; }
.kws-leistung .hero .container > *:nth-child(3) { animation-delay: .25s; }
.kws-leistung .hero .container > *:nth-child(4) { animation-delay: .35s; }
.kws-leistung .hero .container > *:nth-child(5) { animation-delay: .45s; }

/* ─── RESPONSIVE (Blog) ─── */
@media (max-width: 640px) {
  .kws-blog-post .hero { padding: 3.5rem 1.2rem 3rem; }
  .kws-blog-post .hero h1 { font-size: 2rem; }
  .kws-blog-post .article-wrap { padding: 2rem 1.2rem 3.5rem; }
  .kws-blog-post .meta-sep { display: none; }
  .kws-blog-post .cta-block { padding: 2rem 1.4rem; }
  .kws-blog-post .cta-block h3 { font-size: 1.25rem; }
  .kws-blog-post .pull-quote { font-size: 1.25rem; }
  .kws-blog-post h2 { font-size: 1.45rem; }
  .kws-blog-post .matrix-grid { grid-template-columns: 1fr; }
  .kws-blog-post .frist-box { padding: 1.2rem; }
  .kws-blog-post .fact-box { padding: 1.5rem 1.2rem; }
  .kws-blog-post .update-banner { padding: .9rem 1.2rem; }
  .kws-blog-post .badge {
    display: inline-block;
    margin-left: 0;
    margin-top: .4rem;
    font-size: .58rem;
  }
}


/* ═══════════════════════════════════════════════════════
   KWS LEISTUNGSSEITEN — KOMPONENTEN
   Erweiterung für kws-verrechnungspreise und weitere
   Content-Seiten. Gleiche Design-Token, eigene Komponenten.
   ═══════════════════════════════════════════════════════ */

/* ─── FONT-ANGLEICHUNG: v4 → Blog-System ─── */
.kws-blog-post {
  --serif: 'Cormorant Garamond', Georgia, serif;
  --body:  'Lora', Georgia, serif;
}

/* ══════════════════════════════════════════════════════
   FULL-BLEED LAYOUT — INVESTEX + ELEMENTOR 4.X
   ══════════════════════════════════════════════════════

   Investex setzt overflow:hidden (beide Achsen) auf Wrappern.
   Elementor 4.x Flex Container setzt max-width via CSS-Variable
   --e-con-max-width, die unabhängig von "width" wirkt.
   Beide Probleme müssen getrennt adressiert werden.
   ══════════════════════════════════════════════════════ */

/* ─── INVESTEX: alle Breiten- und Overflow-Beschränkungen ─── */
.page_content_wrap,
.page_content_wrap .content_wrap,
.page_content_wrap .content {
  overflow: visible !important;  /* beide Achsen — overflow-x allein reicht nicht */
}

/* Scrollbar-Schutz */
body {
  overflow-x: hidden;
}

/* ─── FULL-BLEED: CSS-Klasse für Elementor-Container ─── */
/* In Elementor: Container selektieren (grüner Rahmen) →
   Tab Erweitert → CSS-Klassen → "kws-full-section" eintragen */
.kws-full-section {
  width: 100vw !important;
  max-width: none !important;       /* Elementor's --e-con-max-width überschreiben */
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ─── FLEX CONTAINER INNEN-WRAPPER (Elementor 4.x) ─── */
/* .e-con-inner ist der direkte Inhaltswrapper im Flex Container.
   Dieser erhält ebenfalls eine max-width von Elementor. */
.kws-full-section > .e-con-inner,
.kws-full-section .e-con-inner {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Wenn der Container selbst das .e-con Element ist */
.kws-full-section.e-con,
.kws-full-section.e-container {
  max-width: none !important;
  --e-con-max-width: 100vw;         /* CSS-Variable direkt überschreiben */
}

/* ─── WIDGET-CONTAINER ─── */
.kws-full-section .elementor-widget-container {
  padding: 0 !important;
}

/* ─── LEGACY SECTIONS (Elementor < 3.6, blauer Rahmen) ─── */
.kws-full-section .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.kws-full-section .elementor-column-wrap,
.kws-full-section .elementor-widget-wrap {
  padding: 0 !important;
}


/* ══════════════════════════════════════════════════════
   LEISTUNGSSEITEN — FONT- UND LAYOUT-OVERRIDES
   ══════════════════════════════════════════════════════ */

/* ─── LEISTUNGSSEITEN: Playfair Display + Source Serif 4 ─── */
/* Überschreibt Blog-Fonts für alle Seiten mit .kws-leistung-Klasse */
.kws-leistung {
  --serif: 'Playfair Display', Georgia, serif;
  --body:  'Source Serif 4', Georgia, serif;
  /* Weißer Seitenhintergrund (Blog nutzt Cream — Leistungsseite nutzt Weiß wie v4) */
  background: #ffffff;
}

/* h2 Abstände Leistungsseiten — kompakter als Blog */
.kws-leistung h2 {
  margin: 0 0 1rem;
}

/* ─── HERO LEISTUNGSSEITE: Blog-Stile überschreiben ─── */
/* Blog-Hero hat padding:6rem. Für Leistungsseiten übernimmt diese Regel
   den Gradient-Hintergrund und den Container-Innenabstand. */
/* v2.23: Feinkalibrierung nach Praxis-Feedback — v2.22-Opacity wirkte zu
   präsent ("zu grell"). Position und Konzept bleiben unverändert richtig
   (Gold-Glow im sichtbaren Bereich, Schatten-Vignette statt Navy-auf-Navy),
   nur die Intensität wird zurückgenommen: Opacity Gold .30 → .20, Schwarz
   .42 → .32. Ellipsen leicht vergrößert und Fade-Out später (70%/68% statt
   65%/60%) — verteilt dieselbe Maximalintensität auf mehr Fläche, das wirkt
   als weicherer Verlauf statt als konzentrierter Fleck. */
.kws-leistung .hero {
  padding: 0;
  background:
    radial-gradient(ellipse 680px 560px at 89% 4%, rgba(196,147,63,.20) 0%, transparent 70%),
    radial-gradient(ellipse 600px 500px at 0% 100%, rgba(0,0,0,.32) 0%, transparent 68%),
    linear-gradient(135deg, var(--kws-dark-bg) 0%, var(--kws-dark-bg-mid) 100%);
}
/* Hero-Container: z-index über den dekorativen Kreisen (::before / ::after) */
.kws-leistung .hero .container {
  position: relative;
  z-index: 1;
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

/* Blog-Linienraster (repeating-linear-gradient) für Leistungsseiten ausblenden.
   Die Leistungsseite nutzt stattdessen .hero--service::before/::after (Kreise). */
.kws-leistung .hero::after {
  display: none;
}

/* h1 im Hero — Theme-Margin neutralisieren */
.kws-leistung .hero h1 {
  margin-top: 0;
}

/* TOC: Container-Innenabstand (kompakter als Standard-Sektions-Padding) */
.kws-leistung .toc-section .container {
  padding-top: 2.2rem;
  padding-bottom: 2.2rem;
}

/* Wenn .container innerhalb von .container--wide liegt, entfällt der
   horizontale Eigenpadding — der äußere Wrapper übernimmt die Funktion. */
.kws-leistung .container--wide > .container {
  padding-left: 0;
  padding-right: 0;
}

/* Buttons Leistungsseiten — Source Serif 4 statt JetBrains Mono */
.kws-leistung .btn,
.kws-leistung .notfall-btn {
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .03em;
}

/* Method-Badge Overflow-Fix (Karten 4+5 mit längerem Badge-Text) */
.kws-leistung .method-badge {
  max-width: calc(100% - 2rem);
}

/* Mobile: Inline-CTA Button-Abstand reduzieren */
@media (max-width: 640px) {
  .kws-leistung .inline-cta {
    gap: .75rem;
  }
}

/* ─── LAYOUT-UTILITIES ─── */
.kws-blog-post .container {
  max-width: 875px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.kws-blog-post .container--wide {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.kws-blog-post section {
  padding: 4rem 0;
}
.kws-blog-post section + section {
  border-top: 1px solid var(--kws-rule);
}

/* ─── HERO LEISTUNGSSEITE (Kreis-Variante) ─── */
.kws-blog-post .hero {
  position: relative;
  overflow: hidden;
}
/* v2.19: Opacity/Border-Breite leicht erhöht (.25→.34 / .15→.20), damit die
   Kreise als gestalterisches Element stärker wahrnehmbar sind. Keine Rotation:
   ein symmetrischer Kreis-Ring ist rotationsinvariant — eine Drehung wäre
   visuell wirkungslos. Stattdessen ein sehr langsames "Breathe" (Scale +
   Opacity), das auf einer asymmetrischen Eigenschaft (Größe) tatsächlich
   sichtbar ist. animation-delay versetzt beide Kreise organisch zueinander. */
.kws-blog-post .hero.hero--service::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,146,42,.34);
  pointer-events: none;
  animation: kws-circleBreathe 16s ease-in-out infinite;
}
.kws-blog-post .hero.hero--service::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,146,42,.20);
  pointer-events: none;
  animation: kws-circleBreathe 16s ease-in-out infinite;
  animation-delay: 3s;
}
/* Sehr dezente Lebendigkeit: ±3.5% Skalierung, Opacity-Tal bei ca. 75%.
   transform + opacity sind GPU-Composite-Eigenschaften, kein Reflow/Repaint. */
@keyframes kws-circleBreathe {
  0%, 100% { transform: scale(1);     opacity: 1; }
  50%      { transform: scale(1.035); opacity: .75; }
}
.kws-blog-post .hero-label {
  font-family: var(--body);  /* var(--body) = Lora (Blog) | Source Serif 4 (Leistung) */
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: 1rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .hero-lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.82);
  max-width: 680px;
  line-height: 1.7;
  margin-bottom: 2rem;
  hyphens: none;
  -webkit-hyphens: none;
}
.kws-blog-post .hero-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1.5rem;
}
.kws-blog-post .hero-meta-item {
  font-size: .85rem;
  color: rgba(255,255,255,.6);
}
.kws-blog-post .hero-meta-item strong {
  color: var(--kws-gold-lt);
  font-size: 1.1rem;
  display: block;
}

/* ─── INHALTSVERZEICHNIS ─── */
.kws-blog-post .toc-section {
  background: var(--kws-cream2);
  border-top: 3px solid var(--kws-gold);
  border-bottom: 1px solid var(--kws-rule);
}
.kws-blog-post .toc-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-gold);
  font-weight: 600;
  margin-bottom: 1.2rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .4rem;
}
.kws-blog-post .toc-link {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  color: var(--kws-navy);
  font-family: var(--body);  /* var(--body) = Lora (Blog) | Source Serif 4 (Leistung) */
  font-size: .92rem;
  transition: background .18s, color .18s;
  border: 1px solid transparent;
}
.kws-blog-post .toc-link:hover {
  background: #fff;
  border-color: var(--kws-rule);
  color: var(--kws-gold);
  text-decoration: none;
}
.kws-blog-post .toc-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--kws-gold);
  flex-shrink: 0;
  width: 1.6rem;
  opacity: .75;
}
.kws-blog-post .toc-arrow {
  margin-left: auto;
  color: var(--kws-rule);
  font-size: .9rem;
  flex-shrink: 0;
  transition: color .18s, transform .18s;
}
.kws-blog-post .toc-link:hover .toc-arrow {
  color: var(--kws-gold);
  transform: translateX(3px);
}

/* ─── EXPLAINER GRID ─── */
.kws-blog-post .explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--kws-rule);
  border: 1px solid var(--kws-rule);
  border-radius: 8px;
  overflow: hidden;
  margin: 2.5rem 0;
}
.kws-blog-post .explainer-cell {
  background: #fff;
  padding: 1.6rem 1.4rem;
  overflow-wrap: break-word;
}
.kws-blog-post .explainer-cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kws-gold);
  font-weight: 600;
  margin-bottom: .6rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .explainer-cell h3 {
  font-size: .98rem;
  margin-bottom: .5rem;
  font-style: normal;
  color: var(--kws-navy);
}
.kws-blog-post .explainer-cell p {
  font-size: .87rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.55;
}

/* ─── TRANSAKTIONSTYPEN ─── */
.kws-blog-post .tx-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .8rem;
  margin: 1.8rem 0;
}
.kws-blog-post .tx-type {
  background: var(--kws-cream2);
  border-radius: 6px;
  padding: 1.1rem 1rem;
  text-align: center;
  overflow-wrap: break-word;
}
.kws-blog-post .tx-icon {
  font-size: 1.5rem;
  margin-bottom: .4rem;
}
.kws-blog-post .tx-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--kws-navy);
}
.kws-blog-post .tx-sub {
  font-size: .75rem;
  color: var(--kws-ink-lt);
  margin-top: .2rem;
}

/* ─── METHODEN-SEKTION (dunkel) ─── */
.kws-blog-post .methods-section {
  background: var(--kws-navy);
  color: #fff;
  width: 100%;
}
.kws-blog-post .methods-section h2 {
  color: #fff;
}
.kws-blog-post .methods-section h2::after {
  background: var(--kws-gold);
}
/* Intro-Absatz direkt im Container (eine div-Ebene tief).
   Direktdeklaration nötig, da .kws-blog-post p { color: --kws-ink-mid }
   Vererbung von .methods-section { color: #fff } immer überschreibt.
   v2.12: Kontrastfehler behoben — #3C3C3C auf #0F1F3D war unlesbar. */
.kws-blog-post .methods-section > div > p {
  color: rgba(255,255,255,.9);
}
/* Absätze zwei div-Ebenen tief (z.B. verschachtelte Container-Strukturen) */
.kws-blog-post .methods-section > div > div > p {
  color: rgba(255,255,255,.75);
}
.kws-blog-post .methods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.kws-blog-post .method-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: background .2s, border-color .2s;
}
.kws-blog-post .method-card:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--kws-gold);
}
.kws-blog-post .method-card.primary {
  border-color: rgba(196,147,63,.4);
}
.kws-blog-post .method-rank {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255,255,255,.07);
  position: absolute;
  top: -.3rem; right: .8rem;
  line-height: 1;
  pointer-events: none;
}
.kws-blog-post .method-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .18rem .5rem;
  border-radius: 3px;
  margin-bottom: .8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .method-badge.prim {
  background: rgba(196,147,63,.25);
  color: var(--kws-gold-lt);
}
.kws-blog-post .method-badge.sec {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}
.kws-blog-post .method-card h3 {
  color: #fff;
  font-size: .97rem;
  margin-bottom: .5rem;
  font-style: normal;
}
.kws-blog-post .method-abbr {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  color: var(--kws-gold-lt);
  margin-bottom: .4rem;
}
.kws-blog-post .method-card p {
  font-size: .83rem;
  color: rgba(255,255,255,.65);
  margin: 0;
  line-height: 1.55;
}
.kws-blog-post .methods-note {
  margin-top: 1.8rem;
  padding: 1.2rem 1.6rem;
  background: rgba(196,147,63,.12);
  border-left: 3px solid var(--kws-gold);
  border-radius: 0 4px 4px 0;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
}
.kws-blog-post .methods-note strong { color: var(--kws-gold-lt); }

/* ─── PULLQUOTE (Leistungsseite, Variante mit linkem Rand) ─── */
.kws-blog-post .pullquote {
  background: var(--kws-cream2);
  border-left: 4px solid var(--kws-gold);
  padding: 1.6rem 2rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
}
.kws-blog-post .pullquote p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--kws-navy-mid);
  margin: 0;
}

/* ─── FRAGEN-KARTEN ─── */
.kws-blog-post .questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.kws-blog-post .question-card {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 6px;
  padding: 1.8rem;
  position: relative;
  overflow-wrap: break-word;
}
.kws-blog-post .question-card::before {
  content: attr(data-num);
  position: absolute;
  top: -14px; left: 1.4rem;
  background: var(--kws-gold);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: .85rem;
  font-weight: 700;
  padding: .15rem .6rem;
  border-radius: 3px;
}
.kws-blog-post .question-card h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--kws-navy-mid);
  margin-bottom: .8rem;
  padding-top: .2rem;
}
.kws-blog-post .question-card .answer {
  font-size: .95rem;
  color: var(--kws-ink-mid);
  margin: 0;
}
.kws-blog-post .risk-tag {
  display: inline-block;
  background: #fdf0e8;
  color: #7A2020;
  border: 1px solid #f0c8a0;
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 3px;
  margin-top: .8rem;
  letter-spacing: .04em;
  hyphens: none; -webkit-hyphens: none;
}

/* ─── CHECKLISTE ─── */
.kws-blog-post .checklist-section {
  background: var(--kws-cream2);
}
.kws-blog-post .checklist-intro {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 6px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.4rem;
}
.kws-blog-post .warning-icon {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.kws-blog-post .checklist-intro p { margin: 0; font-size: .95rem; }
.kws-blog-post .checklist-legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.kws-blog-post .checklist-legend-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--kws-ink-mid);
}
.kws-blog-post .legend-dot {
  width: 14px; height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.kws-blog-post .legend-dot.risk {
  border: 2px solid #7A2020;
  background: #fdf0f0;
}
.kws-blog-post .legend-dot.normal {
  border: 2px solid var(--kws-rule);
  background: #fff;
}
.kws-blog-post .checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: .7rem;
}
.kws-blog-post .checklist-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 5px;
  padding: .9rem 1.2rem;
  font-size: .92rem;
  overflow-wrap: break-word;
}
.kws-blog-post .checklist-item .cb {
  width: 18px; height: 18px;
  border: 2px solid var(--kws-rule);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: .15rem;
}
.kws-blog-post .checklist-item.risk .cb { border-color: #7A2020; }
.kws-blog-post .checklist-item.risk { border-left: 3px solid #7A2020; }

/* ─── NOTFALL-BOX ─── */
.kws-blog-post .notfall-box {
  background: #2e1a1a;
  border-left: 4px solid #c0392b;
  border-radius: 6px;
  padding: 1.4rem 2rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.kws-blog-post .notfall-box-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}
/* Textspalte nimmt verfügbaren Platz ein (neben Icon und Button) */
.kws-blog-post .notfall-box-text {
  flex: 1 1 auto;
}
.kws-blog-post .notfall-box-text p:first-child {
  margin: 0 0 .3rem;
  font-weight: 600;
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
}
.kws-blog-post .notfall-box-text p:last-child {
  margin: 0;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
}
.kws-blog-post .notfall-box-text strong { color: var(--kws-gold-lt); }
.kws-blog-post .notfall-btn {
  display: inline-block;
  background: #c0392b;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  font-weight: 500;
  padding: .8rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .2s;
  letter-spacing: .06em;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .notfall-btn:hover { background: #a93226; text-decoration: none; color: #fff; }

/* ─── INLINE-CTA ─── */
.kws-blog-post .inline-cta {
  background: #fdf8f1;
  border: 1px solid #e8d5b0;
  border-radius: 6px;
  padding: 1.4rem 2rem;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.kws-blog-post .inline-cta p {
  margin: 0;
  font-size: .9rem;
  color: var(--kws-navy-mid);
  flex: 1 1 auto;
}

/* ─── BUTTONS ─── */
.kws-blog-post .btn {
  display: inline-block;
  background: var(--kws-gold);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: .82rem;
  padding: .85rem 1.8rem;
  border-radius: 4px;
  transition: background .2s, transform .15s;
  margin: .3rem;
  letter-spacing: .08em;
  text-decoration: none;
  flex-shrink: 0;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .btn:hover {
  background: var(--kws-gold-lt);
  color: var(--kws-navy);
  text-decoration: none;
  transform: translateY(-1px);
}
.kws-blog-post .btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: rgba(255,255,255,.85);
}
.kws-blog-post .btn--ghost:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ─── LEISTUNGEN / SERVICE CARDS ─── */
.kws-blog-post .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.kws-blog-post .service-card {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 6px;
  padding: 1.6rem;
  transition: box-shadow .2s, border-color .2s;
  overflow-wrap: break-word;
}
.kws-blog-post .service-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border-color: var(--kws-gold);
}
.kws-blog-post .service-icon {
  width: 40px; height: 40px;
  background: var(--kws-cream2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.kws-blog-post .service-card h3 {
  font-size: 1rem;
  color: var(--kws-navy);
  margin-bottom: .5rem;
  font-style: normal;
}
.kws-blog-post .service-card p {
  font-size: .88rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.6;
}

/* ─── SZENARIEN / LÄNDER ─── */
.kws-blog-post .scenarios-section { background: var(--kws-cream2); }
.kws-blog-post .scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.kws-blog-post .scenario-card {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 8px;
  padding: 1.8rem;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .scenario-flag { font-size: 1.8rem; margin-bottom: .8rem; }
.kws-blog-post .scenario-card h3 {
  font-size: 1rem;
  color: var(--kws-navy);
  margin-bottom: .8rem;
  font-style: normal;
}
.kws-blog-post .scenario-list {
  list-style: none;
  padding: 0; margin: 0;
}
.kws-blog-post .scenario-list li {
  font-size: .87rem;
  color: var(--kws-ink-mid);
  padding: .35rem 0;
  border-bottom: 1px solid var(--kws-cream2);
  display: flex;
  gap: .6rem;
}
.kws-blog-post .scenario-list li:last-child { border-bottom: none; }
.kws-blog-post .scenario-list li::before {
  content: "→";
  color: var(--kws-gold);
  flex-shrink: 0;
}
.kws-blog-post .scenario-tag {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kws-gold);
  border: 1px solid #e8d5b0;
  background: #fdf8f1;
  padding: .2rem .6rem;
  border-radius: 3px;
  hyphens: none; -webkit-hyphens: none;
}

/* ─── FALLSTUDIE ─── */
.kws-blog-post .case-study {
  background: var(--kws-navy);
  color: #fff;
  border-radius: 8px;
  padding: 2.5rem;
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}
.kws-blog-post .case-study::before {
  content: "§";
  position: absolute;
  right: 2rem; top: 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem;
  color: rgba(255,255,255,.04);
  pointer-events: none;
}
.kws-blog-post .case-study-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: 1rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .case-study h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 1.4rem;
  font-style: normal;
}
.kws-blog-post .case-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.kws-blog-post .case-col-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .6rem;
}
.kws-blog-post .case-col-content {
  font-size: .9rem;
  color: rgba(255,255,255,.82);
}
.kws-blog-post .case-col-content ul { padding-left: 1.2rem; }
.kws-blog-post .case-col-content li { margin-bottom: .4rem; }
.kws-blog-post .result-badge {
  background: #2e5e3e;
  color: #fff;
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 4px;
  font-size: .85rem;
  font-weight: 600;
  margin-top: .4rem;
}

/* ─── FAQ ACCORDION ─── */
.kws-blog-post .faq-section {
  background: var(--kws-navy);
  padding: 5rem 0;
  width: 100%;
}
.kws-blog-post .faq-section .section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);
  margin-bottom: .8rem;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .faq-section h2 { color: #fff; }
.kws-blog-post .faq-section h2::after { background: var(--kws-gold); }
.kws-blog-post .faq-intro {
  color: rgba(255,255,255,.65);
  font-size: .97rem;
  max-width: 600px;
  margin: .5rem 0 3rem;
}
.kws-blog-post .faq-list { display: flex; flex-direction: column; }
.kws-blog-post .faq-item { border-top: 1px solid rgba(255,255,255,.1); }
.kws-blog-post .faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.kws-blog-post .faq-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.6rem 0;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  color: #fff;
  font-family: var(--body);  /* var(--body) = Lora (Blog) | Source Serif 4 (Leistung) */
  -webkit-tap-highlight-color: transparent;
}
.kws-blog-post .faq-header:focus { outline: none; }
.kws-blog-post .faq-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--kws-gold);
  flex-shrink: 0;
  width: 2rem;
  padding-top: .1rem;
  opacity: .8;
}
.kws-blog-post .faq-question-wrap { flex: 1; min-width: 0; }
.kws-blog-post .faq-category-pill {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .67rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kws-gold-lt);
  margin-bottom: .35rem;
  opacity: .75;
  hyphens: none; -webkit-hyphens: none;
}
.kws-blog-post .faq-question-text {
  font-family: var(--serif);  /* var(--serif) = Cormorant Garamond (Blog) | Playfair Display (Leistung) */
  font-size: 1.08rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  transition: color .2s;
  display: block;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.kws-blog-post .faq-item.is-open .faq-question-text { color: var(--kws-gold-lt); }
.kws-blog-post .faq-chevron {
  flex-shrink: 0;
  width: 24px; height: 24px;
  margin-top: .2rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, background .2s, border-color .2s;
}
.kws-blog-post .faq-chevron svg {
  width: 10px; height: 10px;
  fill: none;
  stroke: rgba(255,255,255,.5);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s;
}
.kws-blog-post .faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  background: var(--kws-gold);
  border-color: var(--kws-gold);
}
.kws-blog-post .faq-item.is-open .faq-chevron svg { stroke: #fff; }
.kws-blog-post .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s cubic-bezier(.4,0,.2,1);
}
.kws-blog-post .faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.kws-blog-post .faq-body-inner {
  overflow: hidden;
  padding-left: calc(2rem + 1.4rem);
}
.kws-blog-post .faq-body-content {
  padding-bottom: 1.8rem;
  padding-right: 2.5rem;
  border-left: 2px solid rgba(196,147,63,.35);
  padding-left: 1.4rem;
  margin-left: -1.4rem;
}
.kws-blog-post .faq-body-content p {
  font-size: .93rem;
  color: rgba(255,255,255,.72);
  margin-bottom: .7rem;
  line-height: 1.7;
}
.kws-blog-post .faq-body-content p:last-child { margin: 0; }
.kws-blog-post .faq-body-content strong { color: rgba(255,255,255,.92); }
.kws-blog-post .faq-body-content em { color: var(--kws-gold-lt); font-style: normal; }
.kws-blog-post .faq-highlight {
  background: rgba(196,147,63,.12);
  border-left: 2px solid var(--kws-gold);
  padding: .8rem 1rem;
  border-radius: 0 4px 4px 0;
  margin-top: .9rem;
  font-size: .88rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
}
.kws-blog-post .faq-highlight strong { color: var(--kws-gold-lt); }

/* ─── CTA-SEKTION (zentriert) — @deprecated ──────────────────────────────
   Beide Leistungsseiten nutzen jetzt .cta-section--contact (zweispaltig).
   Dieser Block bleibt für etwaige Blog-Seiten und Legacy-Snippets erhalten.
   Neue Leistungsseiten: ausschließlich .cta-section--contact verwenden.    */
.kws-blog-post .cta-section {
  background: linear-gradient(135deg, var(--kws-navy-mid) 0%, var(--kws-navy) 100%);
  color: #fff;
  text-align: center;
  padding: 4.5rem 1.5rem;
  width: 100%;
}
.kws-blog-post .cta-section h2 {
  color: #fff;
  margin-bottom: 1rem;
}
.kws-blog-post .cta-section h2::after { display: none; }
.kws-blog-post .cta-section p {
  color: rgba(255,255,255,.75);
  max-width: 540px;
  margin: 0 auto 2rem;
}
.kws-blog-post .coord-section p a { color: var(--kws-gold); }

/* ─── RESPONSIVE (Leistungsseiten) ─── */
@media (max-width: 640px) {
  .kws-blog-post .questions-grid,
  .kws-blog-post .services-grid,
  .kws-blog-post .methods-grid,
  .kws-blog-post .scenarios-grid,
  .kws-blog-post .case-cols { grid-template-columns: 1fr; }
  .kws-blog-post .checklist,
  .kws-blog-post .explainer-grid { grid-template-columns: 1fr; }
  .kws-blog-post .tx-type-grid { grid-template-columns: repeat(2, 1fr); }
  .kws-blog-post .hero-meta { gap: 1.2rem; }
  .kws-blog-post .faq-body-content { padding-right: .5rem; }
  .kws-blog-post .toc-grid { grid-template-columns: 1fr; }
  .kws-blog-post .inline-cta { flex-direction: column; margin-top: 1.5rem; }
  .kws-blog-post .notfall-box { flex-direction: column; margin-top: 1rem; }
  .kws-blog-post .faq-section { padding: 3rem 0; }
  .kws-blog-post .case-study { padding: 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGSSEITE VERRECHNUNGSPREISE — ERGÄNZUNGEN v3
   Zuvor als <style>-Block im Elementor HTML-Widget; jetzt zentral in style.css.
   Scope: .kws-blog-post.kws-leistung — keine Auswirkung auf Blog-Seiten.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── TYPOGRAPHY: h3-Zwischenüberschriften im Fließtext ─────────────────── */
.kws-blog-post .section-subtitle {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ─── LINKS: Warmer Gold-Akzent ─────────────────────────────────────────── */
.kws-blog-post.kws-leistung .kws-link--accent {
  color: var(--kws-gold-warm);
  text-decoration: none;
  transition: opacity .2s;
}
.kws-blog-post.kws-leistung .kws-link--accent:hover {
  opacity: .8;
  text-decoration: underline;
}
/* Links innerhalb .risk-tag erben die Tag-Farbe (kein Gold-Override) */
.kws-blog-post .risk-tag a {
  color: inherit;
  text-decoration: underline;
}

/* ─── KARTEN: Action-Link-Absatz (Service- und Szenariokarten) ──────────── */
.kws-blog-post .card-action-link {
  margin-top: .75rem;
  font-size: .875rem;
}
.kws-blog-post .scenario-card .card-action-link {
  margin-top: 1rem;
}

/* ─── FALLSTUDIE: Weiterführender Link-Absatz ───────────────────────────── */
.kws-blog-post .case-study-more {
  margin-top: 1.5rem;
}

/* ─── INLINE-CTA: Dark-Variante (innerhalb FAQ-Sektion) ─────────────────── */
.kws-blog-post .inline-cta--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  margin-top: 2.5rem;
}
.kws-blog-post .inline-cta--dark p {
  color: rgba(255,255,255,.7);
}
.kws-blog-post .inline-cta--dark strong {
  color: var(--kws-gold-bright);
}

/* ─── BLOG-TEASER-LEISTE ────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .blog-teaser-bar {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--kws-border-light);
  border-left: 3px solid var(--kws-gold-warm);
  background: var(--kws-bg-subtle);
}
.kws-blog-post.kws-leistung .blog-teaser-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kws-text-muted);
  display: block;
  margin-bottom: .75rem;
}
.kws-blog-post.kws-leistung .blog-teaser-links {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.kws-blog-post.kws-leistung .blog-teaser-links a {
  font-size: .875rem;
  color: var(--kws-dark-bg);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  transition: color .2s;
}
.kws-blog-post.kws-leistung .blog-teaser-links a::before {
  content: '→';
  color: var(--kws-gold-warm);
  flex-shrink: 0;
  font-size: .8rem;
}
.kws-blog-post.kws-leistung .blog-teaser-links a:hover {
  color: var(--kws-gold-warm);
}

/* ─── BLOG-TEASER-LEISTE: Dark-Variante (dunkle Sektionshintergründe) ───── */
.kws-blog-post.kws-leistung .blog-teaser-bar--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  border-left-color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .blog-teaser-bar--dark .blog-teaser-label {
  color: rgba(255,255,255,.45);
}
.kws-blog-post.kws-leistung .blog-teaser-bar--dark .blog-teaser-links a {
  color: rgba(255,255,255,.75);
}
.kws-blog-post.kws-leistung .blog-teaser-bar--dark .blog-teaser-links a:hover {
  color: var(--kws-gold-warm);
}

/* ─── EXPERT-PROFIL-SEKTION ──────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .expert-profile-section {
  background: var(--kws-dark-bg);
  padding: 4rem 0;
}
.kws-blog-post.kws-leistung .expert-profile-section .section-eyebrow {
  color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .expert-profile-section h2 {
  color: #fff;
  margin-bottom: 0;
}
/* Gold-Unterstrich bei h2 auf dunklem Hintergrund ausblenden */
.kws-blog-post.kws-leistung .expert-profile-section h2::after {
  display: none;
}
.kws-blog-post.kws-leistung .expert-profile-header {
  margin-bottom: 2rem;
}
.kws-blog-post.kws-leistung .expert-profile-card {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(200,146,42,.3);
  border-radius: 3px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.kws-blog-post.kws-leistung .expert-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .expert-profile-photo { flex-shrink: 0; }
/* Textspalte: nimmt verbleibenden Platz ein, verhindert overflow bei langem Content */
.kws-blog-post.kws-leistung .expert-profile-info { flex: 1; min-width: 0; }
.kws-blog-post.kws-leistung .expert-profile-photo img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 2px solid rgba(200,146,42,.5);
  display: block;
}
.kws-blog-post.kws-leistung .expert-profile-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  margin: 0 0 .5rem;
}
.kws-blog-post.kws-leistung .expert-profile-name {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.kws-blog-post.kws-leistung .expert-profile-credentials {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .expert-profile-credentials span { display: block; }
.kws-blog-post.kws-leistung .expert-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.kws-blog-post.kws-leistung .expert-profile-tag {
  font-size: .68rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .07em;
  color: rgba(255,255,255,.8);
  border: 1px solid rgba(200,146,42,.4);
  padding: .25rem .7rem;
  border-radius: 2px;
  white-space: nowrap;
}
.kws-blog-post.kws-leistung .expert-profile-publication {
  font-size: .85rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 1.75rem;
  padding: .75rem 1rem;
  border-left: 2px solid rgba(200,146,42,.35);
  background: rgba(200,146,42,.05);
  line-height: 1.5;
}
.kws-blog-post.kws-leistung .expert-profile-publication em {
  color: rgba(255,255,255,.75);
  font-style: normal;
}
.kws-blog-post.kws-leistung .expert-profile-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.kws-blog-post.kws-leistung .expert-profile-link {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .2s;
}
.kws-blog-post.kws-leistung .expert-profile-link:hover { color: var(--kws-gold-warm); }

/* ─── EXPERT-PROFIL: Team-Notiz (rechts ausgerichteter Sublink) ─────────── */
.kws-blog-post.kws-leistung .expert-profile-team-note {
  margin-top: 1.25rem;
  font-size: .85rem;
  color: rgba(255,255,255,.35);
  text-align: right;
}
.kws-blog-post.kws-leistung .expert-profile-team-note a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .2s;
}
.kws-blog-post.kws-leistung .expert-profile-team-note a:hover {
  color: var(--kws-gold-warm);
}

/* ─── KOORDINATIONS-SEKTION: Zweite Linkzeile ───────────────────────────── */
.kws-blog-post .coord-section-links { margin-top: .5rem; }

/* ─── RESPONSIVE (Leistungsseite v3 Ergänzungen) ────────────────────────── */
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung .expert-profile-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .kws-blog-post.kws-leistung .expert-profile-tags { justify-content: center; }
  .kws-blog-post.kws-leistung .expert-profile-actions {
    justify-content: center;
    flex-direction: column;
    gap: .75rem;
  }
  .kws-blog-post.kws-leistung .expert-profile-publication { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGSSEITE: MITARBEITER INTERNATIONALER ORGANISATIONEN
   Neue Komponenten — ausschließlich für kws-mitarbeiter-int-org.html.
   Scope: .kws-blog-post.kws-leistung — keine Auswirkung auf andere Seiten.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── LEAD-SEKTION: Zitat + Fact-Box ────────────────────────────────────── */
.kws-blog-post.kws-leistung .kws-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 2.5rem;
}
.kws-blog-post.kws-leistung .lead-quote {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--kws-ink);
}
.kws-blog-post.kws-leistung .lead-quote strong { font-weight: 700; }

/* ─── FACT-BOX (dunkle Karte, große Zahl) ───────────────────────────────── */
.kws-blog-post.kws-leistung .fact-box {
  background: var(--kws-dark-bg);
  padding: 2.5rem;
  position: relative;
}
.kws-blog-post.kws-leistung .fact-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .fact-box-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  margin: 0 0 .875rem;
}
.kws-blog-post.kws-leistung .fact-box-number {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 3.75rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin: 0 0 .6rem;
}
.kws-blog-post.kws-leistung .fact-box-body {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin: 0;
}
/* Checklist innerhalb einer Fact-Box */
.kws-blog-post .fact-box .kws-cklist { margin-top: .25rem; }

/* ─── RECHTLICHE HINWEIS-BOXEN ──────────────────────────────────────────── */

/* Law-Pill: Rechtsgrundlagen-Zitation (neutral, Gold-Rand) */
.kws-blog-post.kws-leistung .law-pill {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--kws-cream2);
  border-left: 3px solid var(--kws-gold-warm);
  padding: 1.1rem 1.4rem;
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--kws-ink);
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .law-pill + .law-pill { margin-top: .75rem; }
.kws-blog-post.kws-leistung .law-pill strong {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 1rem;
  font-weight: 700;
  color: var(--kws-dark-bg);
  line-height: 1.35;
}
.kws-blog-post.kws-leistung .law-pill span {
  font-size: .82rem;
  color: var(--kws-ink-lt);
}
/* Paragraph unmittelbar nach einem Law-Pill */
.kws-blog-post.kws-leistung .law-pill + p { margin-top: 2rem; }

/* Benefit-Pill: positiver Steuerhinweis (grüne Variante) */
.kws-blog-post.kws-leistung .benefit-pill {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #0f2a10;
  border-left: 3px solid #4a9e4e;
  padding: 1.1rem 1.4rem;
  margin-top: 2rem;
}
.kws-blog-post.kws-leistung .benefit-pill + .benefit-pill { margin-top: .75rem; }
.kws-blog-post.kws-leistung .benefit-pill strong {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 1rem;
  font-weight: 700;
  color: #a3d9a5;
  line-height: 1.35;
}
.kws-blog-post.kws-leistung .benefit-pill span {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
}
/* Fix v2.21 (16.06.2026): S2/S3-Badges innerhalb von .benefit-pill waren unlesbar.
   Root Cause: .benefit-pill span { color: rgba(255,255,255,.65) } hat 3 Klassen +
   1 Element (Spezifität 0,3,1) und überschreibt damit .badge-s2/.badge-s3
   (.kws-blog-post .badge-s2, Spezifität 0,2,0) — der Badge erhält seinen eigenen
   hellen Hintergrund (var(--kws-s2bg)/var(--kws-s3bg)), aber die ererbte fast-weiße
   Schriftfarbe statt der vorgesehenen dunklen Badge-Farbe, daher kaum lesbar.
   Gezielte Überschreibung mit höherer Spezifität (0,4,0):
   (Hinweis: Dieser Fix war bereits als v2.19 auf der vorherigen style.css-Basis
   erstellt worden; da die hochgeladene v2.20 auf einem anderen Zwischenstand
   aufsetzt, fehlte er dort noch und wird hier auf v2.20-Basis nachgezogen.) */
.kws-blog-post.kws-leistung .benefit-pill .badge-s2 { color: #7A5A1E; }
.kws-blog-post.kws-leistung .benefit-pill .badge-s3 { color: #8B2020; }

/* Caveat-Box: Vorsichtshinweis (gedämpft, grauer Rand) */
.kws-blog-post.kws-leistung .caveat-box {
  background: var(--kws-cream2);
  border-left: 3px solid var(--kws-ink-lt);
  padding: 1.1rem 1.4rem;
  margin-top: 2rem;
  font-size: .875rem;
  color: var(--kws-ink-lt);
  line-height: 1.65;
}
.kws-blog-post.kws-leistung .caveat-box strong {
  color: var(--kws-ink);
  font-weight: 600;
}
/* Caveat-Box mit größerem Abstand (z.B. am Ende einer Sektion) */
.kws-blog-post.kws-leistung .caveat-box--spaced { margin-top: 2.5rem; }

/* ─── DASH-AUFZÄHLUNGSLISTE — Design-System-Standard ────────────────────────
   .kws-cklist ist die Standard-Aufzählungsklasse für alle KWS-Seiten.
   Verfügbare Varianten:
     .kws-cklist            — Standard (weißer/cremefarbener Hintergrund)
     .kws-cklist--dark      — für dunkle Hintergründe (Fact-Box, Dark-Sections)
     .kws-cklist--narrow    — auf max-width: 740px eingeschränkt
   Für interaktive/farbkodierte Prüfungs-Checklisten: .checklist + .checklist-item.
   ──────────────────────────────────────────────────────────────────────────── */
.kws-blog-post .kws-cklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kws-blog-post .kws-cklist li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .875rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--kws-rule);
  font-size: .9rem;
  color: var(--kws-ink-mid);
  line-height: 1.65;
}
.kws-blog-post .kws-cklist li:last-child { border-bottom: none; }
.kws-blog-post .kws-cklist li::before {
  content: '—';
  color: var(--kws-gold-warm);
  font-weight: 500;
  padding-top: 2px;
}
.kws-blog-post .kws-cklist li strong {
  display: block;
  margin-bottom: .15rem;
  font-weight: 600;
  color: var(--kws-ink);
}
/* Dark-Variante (innerhalb Fact-Box / dunklem Kontext) */
.kws-blog-post.kws-leistung .kws-cklist--dark li {
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.62);
}
.kws-blog-post.kws-leistung .kws-cklist--dark li strong { color: rgba(255,255,255,.85); }
/* Schmale Variante (max-width Einschränkung) */
.kws-blog-post .kws-cklist--narrow {
  max-width: 740px;
  margin-top: 2rem;
}

/* ─── TAB-VERGLEICH: UN-Mitarbeiter vs. GIZ-Mitarbeiter ─────────────────── */
.kws-blog-post.kws-leistung .tab-compare { margin-top: 3rem; }
.kws-blog-post.kws-leistung .tab-switcher {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-bottom: 3px;
}
.kws-blog-post.kws-leistung .tab-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity .2s;
  font-family: var(--body);  /* = Source Serif 4 auf Leistungsseiten */
}
.kws-blog-post.kws-leistung .tab-btn-un  { background: var(--kws-dark-bg); }
.kws-blog-post.kws-leistung .tab-btn-giz { background: var(--kws-cream2); }
.kws-blog-post.kws-leistung .tab-btn[aria-selected="false"] { opacity: .4; }
.kws-blog-post.kws-leistung .tab-btn[aria-selected="true"]  { opacity: 1; }
.kws-blog-post.kws-leistung .tab-indicator {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.kws-blog-post.kws-leistung .tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kws-blog-post.kws-leistung .tab-btn-un  .tab-indicator { color: #7dd87f; }
.kws-blog-post.kws-leistung .tab-btn-un  .tab-dot       { background: #7dd87f; }
.kws-blog-post.kws-leistung .tab-btn-giz .tab-indicator { color: var(--kws-gold-warm); }
.kws-blog-post.kws-leistung .tab-btn-giz .tab-dot       { background: var(--kws-gold-warm); }
.kws-blog-post.kws-leistung .tab-btn-title {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.kws-blog-post.kws-leistung .tab-btn-un  .tab-btn-title { color: #fff; }
.kws-blog-post.kws-leistung .tab-btn-giz .tab-btn-title { color: var(--kws-ink); }
.kws-blog-post.kws-leistung .tab-btn-sub { font-size: .78rem; margin-top: .25rem; }
.kws-blog-post.kws-leistung .tab-btn-un  .tab-btn-sub { color: rgba(255,255,255,.4); }
.kws-blog-post.kws-leistung .tab-btn-giz .tab-btn-sub { color: var(--kws-ink-lt); }
.kws-blog-post.kws-leistung .tab-panel { display: none; }
.kws-blog-post.kws-leistung .tab-panel.active { display: block; }
.kws-blog-post.kws-leistung .criterion {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid;
}
.kws-blog-post.kws-leistung .panel-un  .criterion { border-color: rgba(255,255,255,.08); }
.kws-blog-post.kws-leistung .panel-giz .criterion { border-color: var(--kws-rule); }
.kws-blog-post.kws-leistung .criterion:last-child { border-bottom: none; }
.kws-blog-post.kws-leistung .cr-key {
  padding: 1.25rem 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.5;
  display: flex;
  align-items: center;
}
.kws-blog-post.kws-leistung .panel-un  .cr-key {
  background: rgba(255,255,255,.04);
  color: var(--kws-gold-warm);
  border-right: 1px solid rgba(255,255,255,.06);
}
.kws-blog-post.kws-leistung .panel-giz .cr-key {
  background: var(--kws-cream2);
  color: var(--kws-gold-warm);
  border-right: 1px solid var(--kws-rule);
}
.kws-blog-post.kws-leistung .cr-val {
  padding: 1.25rem 1.5rem;
  font-size: .875rem;
  line-height: 1.68;
  display: flex;
  align-items: center;
}
.kws-blog-post.kws-leistung .panel-un  .cr-val { background: var(--kws-dark-bg); color: rgba(255,255,255,.8); }
.kws-blog-post.kws-leistung .panel-giz .cr-val { background: #fff; color: var(--kws-ink-mid); }

/* ─── FALLGRUPPEN-MATRIX ─────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .matrix-section { margin-top: 3.5rem; }
.kws-blog-post.kws-leistung .matrix-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .875rem;
}
.kws-blog-post.kws-leistung .matrix-eyebrow::after {
  content: '';
  width: 36px; height: 1px;
  background: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .matrix-h3 {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--kws-ink);
  margin: 0 0 1.5rem;
  font-style: normal;
}
.kws-blog-post.kws-leistung .matrix-h3 em {
  font-style: italic;
  color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .matrix-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kws-rule);
}
.kws-blog-post.kws-leistung .matrix-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: .78rem;
  line-height: 1.55;
}
.kws-blog-post.kws-leistung .matrix-table thead tr { background: var(--kws-dark-bg); }
.kws-blog-post.kws-leistung .matrix-table thead th {
  padding: .875rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  text-align: left;
  border-right: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
.kws-blog-post.kws-leistung .matrix-table thead th:first-child {
  color: #fff;
  min-width: 160px;
  white-space: normal;
}
.kws-blog-post.kws-leistung .matrix-table tbody tr:nth-child(odd)  { background: #fff; }
.kws-blog-post.kws-leistung .matrix-table tbody tr:nth-child(even) { background: var(--kws-cream2); }
.kws-blog-post.kws-leistung .matrix-table tbody tr:hover { background: rgba(200,146,42,.07); }
.kws-blog-post.kws-leistung .matrix-table td {
  padding: .875rem 1rem;
  vertical-align: top;
  border-right: 1px solid var(--kws-rule);
  border-bottom: 1px solid var(--kws-rule);
  color: var(--kws-ink-mid);
  font-size: .8rem;
}
.kws-blog-post.kws-leistung .matrix-table td:last-child { border-right: none; }
.kws-blog-post.kws-leistung .m-group {
  font-weight: 600;
  color: var(--kws-dark-bg);
  display: block;
  margin-bottom: .2rem;
}
.kws-blog-post.kws-leistung .m-sub {
  font-size: .72rem;
  color: var(--kws-ink-lt);
}
.kws-blog-post.kws-leistung .m-green { background: rgba(74,158,78,.1) !important; }
.kws-blog-post.kws-leistung .m-green::before { content: '●'; color: #4a9e4e; margin-right: 5px; font-size: .55rem; }
.kws-blog-post.kws-leistung .m-red   { background: rgba(192,57,43,.08) !important; }
.kws-blog-post.kws-leistung .m-red::before { content: '●'; color: #c0392b; margin-right: 5px; font-size: .55rem; }
.kws-blog-post.kws-leistung .m-amber { background: rgba(200,146,42,.08) !important; }
.kws-blog-post.kws-leistung .m-amber::before { content: '●'; color: var(--kws-gold-warm); margin-right: 5px; font-size: .55rem; }
.kws-blog-post.kws-leistung .matrix-legend {
  font-size: .75rem;
  color: var(--kws-ink-lt);
  margin-top: .75rem;
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .dot-green { color: #4a9e4e; }
.kws-blog-post.kws-leistung .dot-red   { color: #c0392b; }
.kws-blog-post.kws-leistung .dot-amber { color: var(--kws-gold-warm); }

/* ─── LEISTUNGEN: Dark-Sektion ──────────────────────────────────────────── */
.kws-blog-post.kws-leistung .services-section--dark {
  background: var(--kws-dark-bg);
  padding: 4rem 0;
  border-top: none;
}
.kws-blog-post.kws-leistung .services-section--dark .section-eyebrow {
  color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .services-section--dark h2 {
  color: #fff;
}
.kws-blog-post.kws-leistung .services-section--dark h2::after {
  background: var(--kws-gold-warm);
}
/* Intro-Text unter h2 in der Services-Dark-Sektion */
.kws-blog-post.kws-leistung .services-section-lead {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  max-width: 600px;
  margin-top: -.5rem;
}
.kws-blog-post.kws-leistung .services-grid--dark {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(255,255,255,.04);
  margin-top: 2.5rem;
}
.kws-blog-post.kws-leistung .service-card--dark {
  background: var(--kws-dark-bg);
  padding: 2.25rem 2rem 2rem;
  transition: background .25s;
}
.kws-blog-post.kws-leistung .service-card--dark:hover { background: rgba(200,146,42,.09); }
.kws-blog-post.kws-leistung .service-card-num {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: 2.75rem;
  font-weight: 700;
  color: rgba(200,146,42,.25);
  line-height: 1;
  margin-bottom: 1.1rem;
}
.kws-blog-post.kws-leistung .service-card-title {
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .75rem;
  line-height: 1.4;
}
.kws-blog-post.kws-leistung .service-card-desc {
  font-size: .82rem;
  color: rgba(255,255,255,.52);
  line-height: 1.65;
}

/* ─── CTA-SEKTION: Kontakt-Variante (Zwei-Spalten) ──────────────────────── */
.kws-blog-post.kws-leistung .cta-section--contact {
  background: var(--kws-gold-warm);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  border-top: none;
}
.kws-blog-post.kws-leistung .cta-section--contact::before,
.kws-blog-post.kws-leistung .cta-section--contact::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
}
.kws-blog-post.kws-leistung .cta-section--contact::before {
  width: 440px; height: 440px;
  top: -55%; right: -6%;
}
.kws-blog-post.kws-leistung .cta-section--contact::after {
  width: 220px; height: 220px;
  top: -18%; right: 8%;
}
.kws-blog-post.kws-leistung .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
  position: relative;
  z-index: 2;
}
.kws-blog-post.kws-leistung .cta-section--contact .section-eyebrow {
  color: rgba(255,255,255,.75);
  margin: 0 0 .75rem;
}
.kws-blog-post.kws-leistung .cta-h2 {
  font-family: var(--serif);  /* = Playfair Display auf Leistungsseiten */
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 1rem;
}
.kws-blog-post.kws-leistung .cta-note {
  font-size: .9rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  max-width: 440px;
}
.kws-blog-post.kws-leistung .cta-contact { flex-shrink: 0; }
.kws-blog-post.kws-leistung .cta-link {
  display: flex;
  align-items: center;
  gap: .875rem;
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
  margin-bottom: .875rem;
  transition: opacity .2s;
}
.kws-blog-post.kws-leistung .cta-link:hover {
  opacity: .78;
  text-decoration: none;
}
.kws-blog-post.kws-leistung .cta-icon {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kws-blog-post.kws-leistung .cta-btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .875rem 2rem;
  background: #fff;
  color: var(--kws-gold-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.kws-blog-post.kws-leistung .cta-btn:hover {
  background: var(--kws-dark-bg);
  color: #fff;
  text-decoration: none;
}

/* ─── DISCLAIMER ─────────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .disclaimer {
  padding: 1.75rem 0;
  border-top: 1px solid var(--kws-rule);
}
.kws-blog-post.kws-leistung .disclaimer p {
  font-size: .78rem;
  color: var(--kws-ink-lt);
  line-height: 1.7;
  margin: 0;
}

/* ─── SECTION: Unterabschnitt / Fortsetzung ─────────────────────────────── */
/* Für Unterabschnitte (03b Krankenversicherung) die direkt an 03 anschließen */
.kws-blog-post.kws-leistung .section--continuation {
  border-top: none !important;
  padding-top: 0;
}
.kws-blog-post.kws-leistung .section--continuation h2 {
  font-size: clamp(1.4rem, 2.3vw, 2rem);
}
.kws-blog-post.kws-leistung .section--continuation .section-eyebrow {
  margin-top: 0;
}

/* ─── RESPONSIVE (IO-Leistungsseite) ────────────────────────────────────── */
@media (max-width: 860px) {
  .kws-blog-post.kws-leistung .kws-two-col {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .kws-blog-post.kws-leistung .services-grid--dark {
    grid-template-columns: repeat(2, 1fr);
  }
  .kws-blog-post.kws-leistung .cta-inner {
    flex-direction: column;
    gap: 2.5rem;
  }
}
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung .tab-switcher { grid-template-columns: 1fr; }
  .kws-blog-post.kws-leistung .criterion {
    grid-template-columns: 1fr;
  }
  .kws-blog-post.kws-leistung .cr-key {
    border-right: none;
    border-bottom: 1px solid;
    padding: .875rem 1.25rem .625rem;
  }
  .kws-blog-post.kws-leistung .panel-un  .cr-key { border-bottom-color: rgba(255,255,255,.06); }
  .kws-blog-post.kws-leistung .panel-giz .cr-key { border-bottom-color: var(--kws-rule); }
  .kws-blog-post.kws-leistung .cr-val { padding: .625rem 1.25rem 1.1rem; }
  .kws-blog-post.kws-leistung .services-grid--dark { grid-template-columns: 1fr; }
  .kws-blog-post .kws-cklist--narrow { max-width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════════
   LEISTUNGSSEITE: GLOBALE MINDESTBESTEUERUNG (PILLAR TWO / MINSTG)
   Migriert aus kws-mindestbesteuerung v1.0 in style.css v2.1.
   Scope: .kws-blog-post.kws-leistung — keine Auswirkung auf andere Seiten.
   v2.18 (Juni 2026): M-01 — .urgent-text flex-Überschreibung auf ≤640px.
     flex: none + width: 100% behebt Mindesthöhe durch flex-basis in column-
     direction (Root cause: flex: 1 1 280px wird in column-direction zu 280px
     Mindesthöhe → künstlicher ~200px Abstand über .urgent-cta auf Mobile).
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── URGENT-BANNER ──────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .urgent-banner {
  background: #fdf0e0;
  border-top: 3px solid var(--kws-gold-warm);
  border-bottom: 1px solid #e8d5b0;
  padding: .9rem 0;
  width: 100%;
}
.kws-blog-post.kws-leistung .urgent-banner .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.kws-blog-post.kws-leistung .urgent-icon { font-size: 1.1rem; flex-shrink: 0; }
.kws-blog-post.kws-leistung .urgent-text {
  font-family: var(--body);
  font-size: .88rem;
  color: var(--kws-navy-mid);
  flex: 1 1 280px;
  margin: 0;
}
.kws-blog-post.kws-leistung .urgent-cta {
  font-family: var(--body);
  font-size: .83rem;
  font-weight: 600;
  color: var(--kws-gold-warm);
  white-space: nowrap;
  border: 1px solid var(--kws-gold-warm);
  padding: .3rem .8rem;
  border-radius: 3px;
  flex-shrink: 0;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.kws-blog-post.kws-leistung .urgent-cta:hover {
  background: var(--kws-gold-warm);
  color: #fff;
  text-decoration: none;
}

/* ─── SCOPE-BOX (Betroffenheitstest) ────────────────────────────────────── */
.kws-blog-post.kws-leistung .scope-box {
  border: 1px solid var(--kws-rule);
  border-radius: 8px;
  overflow: hidden;
  margin: 2.5rem 0;
}
.kws-blog-post.kws-leistung .scope-box-header {
  background: var(--kws-dark-bg);
  color: #fff;
  padding: 1.2rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.kws-blog-post.kws-leistung .scope-box-header h3 {
  color: #fff;
  margin: 0;
  font-size: 1.5rem; /* v2.11: +50% (war 1rem) — Lesbarkeit im dunklen Header */
  font-style: normal;
}
.kws-blog-post.kws-leistung .scope-icon { font-size: 1.3rem; flex-shrink: 0; }
.kws-blog-post.kws-leistung .scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.kws-blog-post.kws-leistung .scope-cell {
  padding: 1.4rem 1.8rem;
  border-right: 1px solid var(--kws-rule);
}
.kws-blog-post.kws-leistung .scope-cell:last-child { border-right: none; }
.kws-blog-post.kws-leistung .scope-cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  font-weight: 600;
  margin-bottom: .6rem;
}
.kws-blog-post.kws-leistung .scope-cell h4 {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--kws-navy);
  margin-bottom: .5rem;
  font-style: normal;
}
.kws-blog-post.kws-leistung .scope-cell p {
  font-size: .87rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .scope-note {
  background: var(--kws-cream2);
  border-top: 1px solid var(--kws-rule);
  padding: 1rem 1.8rem;
  font-size: .85rem;
  color: var(--kws-ink-lt);
}
.kws-blog-post.kws-leistung .scope-note strong { color: var(--kws-navy-mid); }

/* ─── GLOBE-INCOME-BOX (ETR-Formel, im Dunkelbereich) ───────────────────── */
/* Eingebettet in .methods-section (dunkler Hintergrund) */
.kws-blog-post.kws-leistung .globe-income-box {
  margin-top: 2.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 1.6rem 2rem;
}
.kws-blog-post.kws-leistung .globe-income-box h3 {
  color: var(--kws-gold-bright);
  font-size: 1.05rem;
  margin-bottom: .8rem;
  font-style: normal;
}
.kws-blog-post.kws-leistung .globe-income-box p {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  margin-bottom: .6rem;
  line-height: 1.65;
}
.kws-blog-post.kws-leistung .globe-income-box p:last-child { margin: 0; }

/* ─── UPDATE-LIST (Aktuelle Entwicklungen) ───────────────────────────────── */
.kws-blog-post.kws-leistung .update-list {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
}
.kws-blog-post.kws-leistung .update-item {
  display: flex;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--kws-rule);
  align-items: flex-start;
}
.kws-blog-post.kws-leistung .update-item:last-child { border-bottom: none; }
.kws-blog-post.kws-leistung .update-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  font-weight: 600;
  color: var(--kws-gold-warm);
  flex-shrink: 0;
  width: 6.5rem;
  padding-top: .15rem;
  letter-spacing: .03em;
}
.kws-blog-post.kws-leistung .update-content h4 {
  font-family: var(--serif);
  font-size: .97rem;
  color: var(--kws-navy);
  margin-bottom: .3rem;
  font-weight: 600;
  font-style: normal;
}
.kws-blog-post.kws-leistung .update-content p {
  font-size: .88rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .update-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 2px;
  margin-left: .4rem;
  vertical-align: middle;
}
.kws-blog-post.kws-leistung .update-badge.new {
  background: #e8f3e8;
  color: #2e5e3e;
  border: 1px solid #b0d4b0;
}
.kws-blog-post.kws-leistung .update-badge.s2 {
  background: var(--kws-s2bg);
  color: #7a5a1e;
  border: 1px solid var(--kws-s2bdr);
}

/* ─── FRISTEN-GRID (Compliance-Kalender) ────────────────────────────────── */
.kws-blog-post.kws-leistung .fristen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.kws-blog-post.kws-leistung .frist-card {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 6px;
  padding: 1.5rem 1.6rem;
  min-width: 0;
  overflow: hidden;
}
.kws-blog-post.kws-leistung .frist-card.urgent {
  border-color: var(--kws-gold-warm);
  border-left: 4px solid var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .frist-card.past  { opacity: .65; }
.kws-blog-post.kws-leistung .frist-card.future { border-left: 3px solid #7dafc8; }
.kws-blog-post.kws-leistung .frist-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .6rem;
}
.kws-blog-post.kws-leistung .frist-card.urgent .frist-status { color: var(--kws-gold-warm); }
.kws-blog-post.kws-leistung .frist-card.past   .frist-status { color: var(--kws-ink-lt); }
.kws-blog-post.kws-leistung .frist-card.future .frist-status { color: #4a7a96; }
.kws-blog-post.kws-leistung .frist-date {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--kws-navy);
  margin-bottom: .4rem;
  display: block;
}
.kws-blog-post.kws-leistung .frist-card h4 {
  font-size: .97rem;
  color: var(--kws-navy);
  margin-bottom: .4rem;
  font-style: normal;
}
.kws-blog-post.kws-leistung .frist-card p {
  font-size: .84rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.55;
}
.kws-blog-post.kws-leistung .frist-card p + p { margin-top: .5rem; }
.kws-blog-post.kws-leistung .frist-urgency {
  margin-top: .8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 600;
  color: var(--kws-gold-warm);
  background: #fdf8f1;
  border: 1px solid #e8d5b0;
  padding: .25rem .6rem;
  border-radius: 3px;
  display: inline-block;
}

/* ─── SAFE-HARBOUR-KARTEN ────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .sh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.kws-blog-post.kws-leistung .sh-card {
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-radius: 6px;
  padding: 1.6rem;
  transition: box-shadow .2s, border-color .2s;
  min-width: 0;
}
.kws-blog-post.kws-leistung .sh-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  border-color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung .sh-num {
  width: 36px; height: 36px;
  background: var(--kws-cream2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--kws-gold-warm);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.kws-blog-post.kws-leistung .sh-card h3 {
  font-size: 1rem;
  color: var(--kws-navy);
  margin-bottom: .5rem;
  font-style: normal;
}
.kws-blog-post.kws-leistung .sh-card p {
  font-size: .87rem;
  color: var(--kws-ink-lt);
  margin: 0;
  line-height: 1.6;
}
.kws-blog-post.kws-leistung .sh-detail {
  margin-top: .8rem;
  font-size: .82rem;
  color: var(--kws-ink);
  border-top: 1px solid var(--kws-cream2);
  padding-top: .8rem;
  line-height: 1.6;
}

/* ─── BLOG-LINK-BOX ──────────────────────────────────────────────────────── */
/* Interne Verlinkung zu Blog-Beiträgen mit Button — Alternative zur        */
/* blog-teaser-bar wenn ein direkter CTA-Button erforderlich ist.           */
.kws-blog-post.kws-leistung .blog-link-box {
  background: var(--kws-cream2);
  border: 1px solid var(--kws-rule);
  border-left: 3px solid var(--kws-gold-warm);
  border-radius: 0 6px 6px 0;
  padding: 1.3rem 1.8rem;
  margin: 2.5rem 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.kws-blog-post.kws-leistung .blog-link-icon { font-size: 1.4rem; flex-shrink: 0; }
.kws-blog-post.kws-leistung .blog-link-text { flex: 1 1 240px; }
.kws-blog-post.kws-leistung .blog-link-text strong {
  font-size: .97rem;
  color: var(--kws-navy);
  display: block;
  margin-bottom: .2rem;
}
.kws-blog-post.kws-leistung .blog-link-text p {
  margin: 0;
  font-size: .88rem;
  color: var(--kws-ink-lt);
}

/* ─── SECTION--CREAM (generische Hintergrundvariante) ───────────────────── */
/* Für Sektionen, die keinen eigenen semantischen Klassennamen benötigen,   */
/* aber den cream-Hintergrund nutzen sollen (z.B. Fristen, Leistungen).    */
.kws-blog-post.kws-leistung .section--cream { background: var(--kws-cream2); }

/* ─── RESPONSIVE (Mindestbesteuerung-Komponenten) ───────────────────────── */
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung .scope-grid { grid-template-columns: 1fr; }
  .kws-blog-post.kws-leistung .scope-cell {
    border-right: none;
    border-bottom: 1px solid var(--kws-rule);
  }
  .kws-blog-post.kws-leistung .scope-cell:last-child { border-bottom: none; }
  .kws-blog-post.kws-leistung .update-item { flex-direction: column; gap: .4rem; }
  .kws-blog-post.kws-leistung .update-date { width: auto; }
  .kws-blog-post.kws-leistung .fristen-grid,
  .kws-blog-post.kws-leistung .sh-grid      { grid-template-columns: 1fr; }
  .kws-blog-post.kws-leistung .blog-link-box { flex-direction: column; }
  .kws-blog-post.kws-leistung .urgent-banner .container {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  /* M-01 (v1.11): In column-direction wirkt flex-basis: 280px als Mindesthöhe,
     nicht als Mindestbreite → erzeugt ~200px Leerraum über dem CTA-Button.
     Lösung: flex: none + width: 100% — natürliche Content-Höhe, volle Breite. */
  .kws-blog-post.kws-leistung .urgent-text {
    flex: none;
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   VP v3.3 — HERO CTA · TRUST-STRIP · EXPERT PUBLICATIONS
   Für: kws-verrechnungspreise-leistung-v33.html
   Hinzugefügt: Juni 2026
   Scope: .kws-blog-post.kws-leistung — kein Konflikt mit Theme-CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── HERO-CTA ───────────────────────────────────────────────────────────── */
/* Direkter Conversion-Trigger nach .hero-meta, auf dunklem Hero-Hintergrund. */
.kws-blog-post.kws-leistung .hero-cta-row {
  margin-top: 1.75rem;
}
.kws-blog-post.kws-leistung .hero-cta-btn {
  display: inline-block;
  padding: .75rem 1.75rem;
  background: var(--kws-gold-warm);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 2px;
  transition: background .2s ease;
}
.kws-blog-post.kws-leistung .hero-cta-btn:hover,
.kws-blog-post.kws-leistung .hero-cta-btn:focus {
  background: var(--kws-gold-bright);
  color: #fff;
  outline: none;
}

/* ─── TRUST-STRIP ────────────────────────────────────────────────────────── */
/* Vier Vertrauenssignale zwischen ToC und Grundlagen.                        */
/* Hintergrund --kws-cream (heller als ToC-Hintergrund --kws-cream2)          */
/* erzeugt subtile visuelle Gliederung ohne harten Schnitt.                   */
.kws-blog-post.kws-leistung .trust-strip {
  background: var(--kws-cream);
  border-bottom: 1px solid var(--kws-rule);
  padding: 1.75rem 0;
}
.kws-blog-post.kws-leistung .trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem 2rem;
  align-items: start;
}
.kws-blog-post.kws-leistung .trust-item {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.kws-blog-post.kws-leistung .trust-item-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-gold);            /* Dunkles Gold — lesbar auf hellem Cream */
  font-weight: 400;
}
.kws-blog-post.kws-leistung .trust-item-value {
  font-size: .875rem;
  color: var(--kws-ink);
  line-height: 1.45;
}

/* ─── EXPERT-PROFIL: Erweiterte Publikationsliste ────────────────────────── */
/* Ersetzt .expert-profile-publication (Einzelzeile) durch geordnete Liste.  */
/* Dark-Context: rgba-Werte analog zu .expert-profile-credentials.            */
/* Farbsystem: identisch zu bestehendem .expert-profile-publication-Block.    */
.kws-blog-post.kws-leistung .expert-profile-publications-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kws-gold-lt);         /* Helles Gold — lesbar auf dunklem Hintergrund */
  margin: 1rem 0 .5rem;
}
.kws-blog-post.kws-leistung .expert-profile-publications {
  list-style: none;
  margin: 0 0 1.75rem;               /* Gleiche untere Luft wie alter .expert-profile-publication */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.kws-blog-post.kws-leistung .expert-profile-publications li {
  font-size: .85rem;
  color: rgba(255,255,255,.5);       /* Identisch mit .expert-profile-publication */
  line-height: 1.5;
  padding-left: 1.1rem;
  position: relative;
}
.kws-blog-post.kws-leistung .expert-profile-publications li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  color: rgba(200,146,42,.6);        /* Gedämpftes Gold — analog zu border-Farbe */
}
.kws-blog-post.kws-leistung .expert-profile-publications li em {
  color: rgba(255,255,255,.75);      /* Identisch mit .expert-profile-publication em */
  font-style: normal;
}

/* ─── RESPONSIVE (VP v3.3) ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Kompensiert text-align:center aus dem Expert-Card-Responsive-Block */
  .kws-blog-post.kws-leistung .expert-profile-publications { text-align: left; }
  .kws-blog-post.kws-leistung .expert-profile-publications-label { text-align: left; }
}
@media (max-width: 380px) {
  .kws-blog-post.kws-leistung .trust-strip-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   EXPERT-BAR — Persönlicher Trust-Anker (Leistungsseiten-Standard v2.4)
   Ersetzt .trust-strip auf allen Leistungsseiten.
   v2.7 (style.css): Kernfix Desktop-Layout.
     — Foto: 60 → 80 px auf Desktop (primäres Trust-Signal, nicht Thumbnail)
     — Credentials: repeat(4,1fr) → repeat(2,1fr) — Kernproblem war ~110px/
       Spalte im 875px-Container; 4 Zeilen Umbruch pro Item. 2×2 ergibt
       ~237px/Spalte — maximal 2 Zeilen, vollständig lesbar.
     — Gold-Akzentstreifen (border-top) und linke Item-Akzente (border-left)
       als visuelle Aufwertung ohne HTML-Eingriff.
     — outer align-items: flex-start (stabil bei variablem Textumbruch)
   Wiederverwendung: .trust-item / .trust-item-label / .trust-item-value.
   Scope: .kws-blog-post.kws-leistung
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── WRAPPER & LAYOUT ──────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .expert-bar {
  background: var(--kws-cream);
  border-top: 2px solid rgba(200,146,42,.28);  /* Goldner Akzentstreifen — visueller Anker */
  border-bottom: 1px solid var(--kws-rule);
  padding: 1.75rem 0;
}
.kws-blog-post.kws-leistung .expert-bar-inner {
  display: flex;
  align-items: flex-start;   /* flex-start: stabil — kein vertikales Springen bei variablem Umbruch */
  gap: 2.5rem;
}

/* ─── IDENTITY (Foto + Name + Titel + Link) ─────────────────────────────── */
.kws-blog-post.kws-leistung .expert-bar-identity {
  display: flex;
  align-items: center;       /* Foto und Bio vertikal zentriert — Standard für Avatar-Layouts */
  gap: 1rem;
  flex-shrink: 0;
  padding-right: 2.5rem;
  border-right: 1px solid var(--kws-rule);
}
.kws-blog-post.kws-leistung .expert-bar-photo img {
  width: 80px;               /* v2.7: 60 → 80 px — primäres Trust-Signal, kein Thumbnail */
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;   /* Gesicht statt Körper zeigen */
  border: 2px solid rgba(200,146,42,.4);
  display: block;
  flex-shrink: 0;
}
.kws-blog-post.kws-leistung .expert-bar-bio {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 170px;          /* v2.7: 160 → 170 px — korrigiert für 80px-Foto-Proporition */
}
.kws-blog-post.kws-leistung .expert-bar-name {
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: 1.05rem;        /* v2.7: 1rem → 1.05rem — proportional zum größeren Foto */
  font-weight: 700;
  color: var(--kws-ink);
  line-height: 1.2;
}
.kws-blog-post.kws-leistung .expert-bar-title {
  font-size: .78rem;
  color: var(--kws-ink-lt);
  line-height: 1.35;
}
.kws-blog-post.kws-leistung .expert-bar-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kws-gold);
  text-decoration: none;
  margin-top: .3rem;
  transition: color .2s;
}
.kws-blog-post.kws-leistung .expert-bar-link:hover,
.kws-blog-post.kws-leistung .expert-bar-link:focus { color: var(--kws-gold-warm); }

/* ─── CREDENTIALS (2×2-Grid — v2.7 Kernfix) ────────────────────────────── */
/* Alt: repeat(4,1fr) → ~110px/Spalte → 4–5 Zeilen Umbruch → unlesbar.      */
/* Neu: repeat(2,1fr) → ~237px/Spalte → max. 2 Zeilen → lesbar und klar.    */
.kws-blog-post.kws-leistung .expert-bar-credentials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 2rem;
  flex: 1;
  align-items: start;
}

/* Linker Gold-Akzent pro Credential-Item — kein HTML-Eingriff erforderlich */
.kws-blog-post.kws-leistung .expert-bar-credentials .trust-item {
  padding-left: .65rem;
  border-left: 2px solid rgba(200,146,42,.28);
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .kws-blog-post.kws-leistung .expert-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .kws-blog-post.kws-leistung .expert-bar-identity {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--kws-rule);
    padding-bottom: 1.25rem;
    width: 100%;
  }
  .kws-blog-post.kws-leistung .expert-bar-credentials {
    width: 100%;
    /* 2×2 bleibt erhalten — volle Breite reicht auf Tablet-Portrait problemlos */
  }
}
@media (max-width: 480px) {
  .kws-blog-post.kws-leistung .expert-bar-photo img {
    width: 60px;   /* Mobile: 60px — kompakteres Format für kleine Screens */
    height: 60px;
  }
  .kws-blog-post.kws-leistung .expert-bar-credentials {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   IN-HERO BREADCRUMB — Leistungsseiten Navigation (v2.5 · Fix v2.18)
   Ersetzt .hero-label <p> auf Leistungsseiten durch semantische nav-Navigation.
   Position: erste Zeile im Hero-Container, vor h1 — identischer Block-Abstand.
   Visuell: Elternpfad gedämpftes Weiß · Separator goldener Schrägstrich ·
            aktive Seite in Gold (identisch bisherigem .hero-label).
   JSON-LD BreadcrumbList: unberührt — weiterhin im WP-Code-Head-Snippet.
   .hero-label in style.css bleibt erhalten (Abwärtskompatibilität).
   Scope: .kws-blog-post.kws-leistung

   v2.18 — Separator-Fix + Home-Icon-Upgrade:
   (1) Separator: li+li::before → li:not(:last-child)::after
       Begründung: ::before ist Flex-Child des FOLGENDEN <li>. Bei flex-wrap
       reist er in die neue Zeile und erzeugt einen orphaned "/" am Zeilenanfang.
       ::after ist Flex-Child des VORHERIGEN <li> — bleibt immer auf dessen Zeile.
   (2) Home-Icon: 13×13px → 16px (1rem) — proportionaler zur Typografie.
   (3) Touch-Target: padding/margin-Technik auf li:first-child a —
       visuell unverändert, effektives Zielgebiet mind. ~32px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── WRAPPER ─────────────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .hero-breadcrumb {
  margin: 0 0 1rem 0;
  padding: 0;
}

/* ─── LISTE — horizontale Flex-Reihe, kein Standard-Listenstil ────────────── */
.kws-blog-post.kws-leistung .hero-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ─── LISTENELEMENT — Basis-Typografie ────────────────────────────────────── */
/* Spiegelt .hero-label: var(--body), .8rem, .14em letter-spacing, uppercase.  */
.kws-blog-post.kws-leistung .hero-breadcrumb li {
  display: flex;
  align-items: center;
  font-family: var(--body);      /* Source Serif 4 auf Leistungsseiten */
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  hyphens: none;
  -webkit-hyphens: none;
}

/* ─── SEPARATOR — CSS-generierter goldener Schrägstrich (v2.18) ─────────── */
/* Kein zusätzliches Markup erforderlich.                                      */
/* ::after auf dem VORHERIGEN li (nicht ::before auf dem folgenden): der       */
/* Separator bleibt damit immer auf der Zeile seines eigenen li. Kein          */
/* orphaned "/" am Zeilenbeginn bei flex-wrap auf engen Viewports.             */
/* letter-spacing: 0 verhindert unerwünschten Versatz durch text-transform.    */
.kws-blog-post.kws-leistung .hero-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 .6em;
  color: rgba(200, 146, 42, .38);
  font-weight: 300;
  letter-spacing: 0;
}

/* ─── HOME-ICON — Touch-Target & Größe (v2.18) ───────────────────────────── */
/* Touch-Target: padding/margin-Technik — layoutneutral (negative margin       */
/* kompensiert das positive padding). Effektives Zielgebiet: ~32×32px.         */
/* display:flex + align-items:center zentriert das SVG im Touch-Bereich.       */
/* flex-shrink:0 auf svg verhindert Stauchung durch flex-wrap.                 */
.kws-blog-post.kws-leistung .hero-breadcrumb li:first-child a {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  margin: -0.5rem;
}
.kws-blog-post.kws-leistung .hero-breadcrumb li:first-child svg {
  width: 1rem;           /* 16px — HTML-Attribut width/height ebenfalls 16 */
  height: 1rem;
  flex-shrink: 0;
}

/* ─── VERLINKTE ELTERN-EBENEN ─────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .hero-breadcrumb a {
  color: rgba(255, 255, 255, .42);
  text-decoration: none;
  transition: color .2s ease;
}
.kws-blog-post.kws-leistung .hero-breadcrumb a:hover,
.kws-blog-post.kws-leistung .hero-breadcrumb a:focus {
  color: var(--kws-gold-lt);
  outline: none;
}

/* ─── AKTIVE SEITE — letztes li, kein Link, aria-current="page" ──────────── */
/* Gold: identisch mit bisherigem .hero-label — nahtlose visuelle Kontinuität. */
.kws-blog-post.kws-leistung .hero-breadcrumb li:last-child,
.kws-blog-post.kws-leistung .hero-breadcrumb [aria-current="page"] {
  color: var(--kws-gold-lt);
}

/* ════════════════════════════════════════════════════════════════════════════
   NATIVE THEME-BREADCRUMB UNTERDRÜCKEN — Leistungsseiten mit In-Hero-Nav
   
   ThemeREX Addons (Investex) rendert Breadcrumbs über das sc_layouts_title-
   Shortcode-System. Der bestätigte Selektor (via Browser-Devtools, Juni 2026):
     <div class="sc_layouts_title_breadcrumbs">
       <div class="breadcrumbs">...</div>
     </div>
   
   Methode 1 (primär / empfohlen): PHP-Snippet kws-breadcrumb-suppress.php.
     Injiziert gezieltes CSS via wp_head — keine Body-Klasse nötig.
   Methode 2 (CSS-Fallback): Body-Klasse kws-hide-breadcrumb per Elementor
     Seiteneinstellungen → Erweitert → CSS-Klassen eintragen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ThemeREX Addons / Investex — bestätigter Selektor ──────────────────── */
body.kws-hide-breadcrumb .sc_layouts_title_breadcrumbs,
body.kws-hide-breadcrumb .sc_layouts_title_breadcrumbs * {
  display: none !important;
}

/* ─── Weitere Breadcrumb-Plugins / Theme-Varianten (Robustheit) ───────────── */
body.kws-hide-breadcrumb .breadcrumbs,
body.kws-hide-breadcrumb .breadcrumb,
body.kws-hide-breadcrumb .breadcrumb-trail,
body.kws-hide-breadcrumb .page-breadcrumb,
body.kws-hide-breadcrumb nav.breadcrumb,
body.kws-hide-breadcrumb .yoast-breadcrumbs,
body.kws-hide-breadcrumb .yoast-breadcrumb,
body.kws-hide-breadcrumb #breadcrumbs,
body.kws-hide-breadcrumb .rank-math-breadcrumb,
body.kws-hide-breadcrumb .rank-math-breadcrumb-wrap {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL-REVEAL ANIMATION SYSTEM — Sektion 17
   
   Wiederverwendbares Einblend-System für Blog- und Leistungsseiten.
   
   Elemente mit .kws-reveal starten unsichtbar (opacity 0, translateY 22px).
   Das JS (functions.php, wp_footer, Prio 30) setzt .kws-reveal auf alle
   Kandidaten gemäß Whitelist und fügt .kws-reveal--visible beim Einrollen
   in den Viewport hinzu. Staggered Delay (80ms/Stufe) automatisch.
   
   Scope:    .kws-blog-post (Blog + Leistungsseiten)
   JS:       functions.php → add_action('wp_footer', ..., 30)
   Opt-out:  .kws-no-reveal auf Element oder Vorfahren setzen
   Manuell:  .kws-reveal direkt im HTML für Sonderfälle
   
   @since v2.7 — 2026-06-08
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Ausgangszustand: unsichtbar, 22px nach unten versetzt ─────────────── */
.kws-blog-post .kws-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(0.25, 1, 0.5, 1),
              transform .7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ─── Sichtbarer Zustand: gesetzt durch IntersectionObserver im JS ───────── */
.kws-blog-post .kws-reveal.kws-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Accessibility: prefers-reduced-motion ─────────────────────────────── */
/* Kein Transform für Nutzer mit aktivierter Bewegungsreduktion im OS/Browser */
@media (prefers-reduced-motion: reduce) {
  .kws-blog-post .kws-reveal {
    transform: none;
    transition: opacity 0.4s ease;
  }
  /* v2.19: Bisher ungedeckte Lücke geschlossen — .hero-inner (Blog) hatte
     trotz translateY-Animation noch keinen reduced-motion-Override.
     Gleiches Pattern jetzt für .hero-inner und den neuen Leistungs-Hero-
     Selektor: Inhalt erscheint sofort, keine Bewegung. */
  .kws-blog-post .hero-inner > *,
  .kws-leistung .hero .container > * {
    animation: none;
    opacity: 1;
  }
  /* v2.19: Kreis-Breathe deaktivieren — rein dekorativ, keine Inhaltsfunktion. */
  .kws-blog-post .hero.hero--service::before,
  .kws-blog-post .hero.hero--service::after {
    animation: none;
  }
}
/*
 * ════════════════════════════════════════════════════════════════════════════
 * KWS CHILD THEME — style.css · Ergänzung: Sektion 18
 * Datei-Version nach Einpflegen: 2.15
 *
 * ANLEITUNG: Diesen gesamten Block am Ende von style.css einfügen,
 * direkt nach dem bestehenden Scroll-Reveal-Block (Sektion 17).
 * Anschließend Version im Datei-Header (Zeile 7) auf 2.15 setzen.
 * ════════════════════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════════════════════════════════════════
   TEAM SLIDER — Sektion 18
   
   Scroll-Snap Carousel ohne externe Bibliothek (kein Swiper, kein CDN).
   JS-Gegenstück: kws-geschaeftsfuehrung-v1.0.html (IIFE, wp_footer-Muster).
   
   Struktur:
     .team-slider-section       — Außenhülle (cream-Hintergrund)
     .team-slider-header        — Eyebrow + H2
     .team-slider-track         — scroll-snap Scroll-Container (overflow-x auto)
     .team-slider-card          — Einzelkarte (snap-align: start)
     .team-slider-card__photo   — Kreisausschnitt Porträtfoto
     .team-slider-card__body    — Textblock (Name + Rollen)
     .team-slider-card__name    — Personenname (Serif-Font)
     .team-slider-card__roles   — Rollen-Container
     .team-slider-card__role    — Einzelrolle (Mono-Font)
     .team-slider-nav           — Prev/Next-Pfeile + Dots
     .team-slider-btn           — Navigationstasten (gold, kreisförmig)
     .team-slider-dots          — Punkte-Container
     .team-slider-dot           — Einzelpunkt (aktiv: gold)
   
   Responsiv:
     >= 900px: 3 Karten sichtbar
     600–899px: 2 Karten sichtbar
     < 600px: 1 Karte sichtbar (native Swipe)
   
   Scope: .kws-blog-post.kws-leistung (konsistent mit Leistungsseiten-System)
   Seite: kws-geschaeftsfuehrung-v1.0.html
   
   @since v2.15 · Juni 2026
   ════════════════════════════════════════════════════════════════════════════ */


/* ─── SEKTION-WRAPPER ─────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .team-slider-section {
  background: var(--kws-cream);
  padding: 4rem 0;
  border-top: none; /* Überschreibt section+section-Regel — nahtloser
                       Übergang vom dunklen expert-profile-section */
}

/* Eyebrow — heller Hintergrund: gold-warm statt gold-lt */
.kws-blog-post.kws-leistung .team-slider-section .section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  margin-bottom: .75rem;
  hyphens: none;
  -webkit-hyphens: none;
}


/* ─── HEADER ──────────────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .team-slider-header {
  margin-bottom: 2.25rem;
}


/* ─── SCROLL-TRACK ────────────────────────────────────────────────────────── */
/* overflow-x: auto + scroll-snap-type: Native Scroll + Snap ohne JS-Deps.
   Scrollbar wird in allen Browsern ausgeblendet; Scrolling bleibt aktiv. */
.kws-blog-post.kws-leistung .team-slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;   /* iOS momentum scrolling */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* IE / Edge Legacy */
  padding-bottom: .25rem;              /* Schattenluft unter Karten */
}
.kws-blog-post.kws-leistung .team-slider-track::-webkit-scrollbar {
  display: none;                       /* Chrome / Safari */
}


/* ─── KARTE ───────────────────────────────────────────────────────────────── */
/* flex: 0 0 calc(...) setzt die Breite exakt auf 1/3 des verfügbaren
   Track-Raums minus der anteiligen Lücken (2 × 1.5rem / 3 = 1rem). */
.kws-blog-post.kws-leistung .team-slider-card {
  flex: 0 0 calc(33.333% - 1rem);     /* 3 Karten Desktop */
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--kws-rule);
  border-top: 2px solid rgba(200, 146, 42, .28);
  border-radius: 3px;
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kws-blog-post.kws-leistung .team-slider-card:hover {
  border-color: rgba(200, 146, 42, .55);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}


/* ─── FOTO ────────────────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .team-slider-card__photo {
  width: 96px;
  height: 96px;
  margin: 0 auto 1rem;
}
.kws-blog-post.kws-leistung .team-slider-card__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(200, 146, 42, .4);
  display: block;
}


/* ─── TEXTBLOCK ───────────────────────────────────────────────────────────── */
.kws-blog-post.kws-leistung .team-slider-card__body {
  /* Zentriert; text-align: center erbt von .team-slider-card */
}

/* Personenname: Serif wie Expert-Bar */
.kws-blog-post.kws-leistung .team-slider-card__name {
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: .975rem;
  font-weight: 700;
  color: var(--kws-ink);
  margin: 0 0 .45rem;
  line-height: 1.25;
}

/* Rollen-Container: Mindesthöhe für gleiche Kartenhöhen bei unterschiedlicher
   Rollendichte (manche Mitglieder haben 4 Rollen, manche keine). */
.kws-blog-post.kws-leistung .team-slider-card__roles {
  min-height: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}

/* Einzelrolle: Mono-Schrift, gedämpft */
.kws-blog-post.kws-leistung .team-slider-card__role {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--kws-ink-lt);
  line-height: 1.45;
}

/* Hauptrolle (erste): leicht hervorgehoben */
.kws-blog-post.kws-leistung .team-slider-card__role:first-child {
  color: var(--kws-ink-mid);
}


/* ─── NAVIGATION (Pfeile + Dots) ──────────────────────────────────────────── */
.kws-blog-post.kws-leistung .team-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* Pfeiltasten: gold, kreisförmig, outline-Stil */
.kws-blog-post.kws-leistung .team-slider-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--kws-gold);
  background: transparent;
  color: var(--kws-gold);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.kws-blog-post.kws-leistung .team-slider-btn:hover,
.kws-blog-post.kws-leistung .team-slider-btn:focus {
  background: var(--kws-gold);
  color: #fff;
  outline: none;
}
.kws-blog-post.kws-leistung .team-slider-btn:disabled {
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
}

/* Punkte-Reihe */
.kws-blog-post.kws-leistung .team-slider-dots {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* Einzelpunkt */
.kws-blog-post.kws-leistung .team-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kws-rule);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.kws-blog-post.kws-leistung .team-slider-dot.is-active {
  background: var(--kws-gold);
  transform: scale(1.35);
}
.kws-blog-post.kws-leistung .team-slider-dot:hover:not(.is-active) {
  background: var(--kws-gold-lt);
}


/* ─── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* Tablet: 2 Karten */
@media (max-width: 900px) {
  .kws-blog-post.kws-leistung .team-slider-card {
    flex: 0 0 calc(50% - .75rem);    /* 2 Karten mit 1 × 1.5rem Lücke */
  }
}

/* Mobile: 1 Karte */
@media (max-width: 600px) {
  .kws-blog-post.kws-leistung .team-slider-card {
    flex: 0 0 100%;
  }
  .kws-blog-post.kws-leistung .team-slider-section {
    padding: 3rem 0;
  }
  .kws-blog-post.kws-leistung .team-slider-card__photo {
    width: 80px;
    height: 80px;
  }
}


/* ─── EXPERT-PROFIL: Vollprofil-Variante (--full Modifier) ──────────────────
   Seite:      Geschäftsführung (expert-profile-section--full)
   Unterschied: Foto editorial-rechteckig (200×260 px) statt Kreis (140 px).
   Scope:      .kws-blog-post.kws-leistung
   Der Standard-Kreis (140 px) auf Leistungsseiten bleibt vollständig erhalten.
   @since v2.16 */
.kws-blog-post.kws-leistung .expert-profile-section--full .expert-profile-photo img {
  width:         200px;
  height:        260px;
  border-radius: 4px;                        /* Editorial: Rechteck, nicht Kreis */
  object-position: center top;               /* Gesicht / Oberkörper zeigen      */
  border: 2px solid rgba(200, 146, 42, .5);  /* Gold-Rahmen, etwas kräftiger     */
}

/* Mobile: Foto zentriert und leicht schmaler */
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung .expert-profile-section--full .expert-profile-photo img {
    width:  160px;
    height: 200px;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   KONTAKTSEITE (/kontakt/) — Sektion 19
   Neu ab style.css v2.20 (Juni 2026). Eingearbeitet in den von Tom
   zwischenzeitlich aktualisierten Stand (v2.19, Hero-Eintrittsanimation +
   Kreis-Breathe) — keine Berührungspunkte zu jenen Änderungen, da diese
   Sektion bewusst ohne .hero/.hero--service arbeitet.

   ARCHITEKTUR-HINWEIS — bewusster Bruch mit dem Leistungsseiten-Muster:
   Anders als VP/IO/MB ist /kontakt/ KEIN einzelnes Elementor-HTML-Widget,
   sondern eine native Elementor-Container-Komposition aus mehreren Widgets
   (Google-Maps-Widget + neues HTML-Widget + bestehendes CF7-Shortcode-
   Widget). Folge: die äußere Spalten-/Grid-Struktur (.kontakt-grid,
   .kontakt-info-col, .kontakt-form-col) liegt AUSSERHALB von .kws-blog-post —
   diese Klassen sitzen direkt auf Elementor-Containern, nicht im HTML-Widget.
   Sie werden daher über body.page-id-3480 gescoped statt über .kws-blog-post.
   Nur der INHALT des neuen HTML-Widgets (.kontakt-info-card und Kinder)
   liegt innerhalb von .kws-blog-post.kws-leistung.kws-kontakt und folgt
   damit dem gewohnten Scope-Muster (Standard 11.6).

   Das bestehende CF7-Formular (.cf7-premium-form) wird NICHT verändert —
   dessen CSS lebt in einem separaten WPCode-Snippet, nicht hier. Die einzige
   Berührung ist eine kontextuelle Override-Regel weiter unten, die das
   Formular-Feldraster in der schmaleren Spalte früher umbricht, ohne das
   Snippet selbst zu editieren (siehe "CF7-KONTEXT-OVERRIDE").
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── KONTAKT-GRID — äußere Zwei-Spalten-Struktur (Elementor-Container-Ebene) ─
   In Elementor zu setzen: CSS-Klasse "kontakt-grid" auf dem äußeren
   Container, "kontakt-info-col" auf dem linken Kind-Container,
   "kontakt-form-col" auf dem rechten Kind-Container.                       */
body.page-id-3480 .kontakt-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
body.page-id-3480 .kontakt-info-col,
body.page-id-3480 .kontakt-form-col {
  min-width: 0; /* verhindert Grid-Blowout durch die Eigenbreite des Formulars */
}

/* Mobile (≤640px): einspaltig, Reihenfolge = Info zuerst, Formular danach */
@media (max-width: 640px) {
  body.page-id-3480 .kontakt-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 1.5rem;
  }
}

/* ─── CF7-KONTEXT-OVERRIDE — Formular-Feldraster in schmaler Spalte ──────────
   Zwischen 641–900px Viewport-Breite bleibt die Seite zweispaltig (Tablet-
   Vorgabe), die rechte Spalte ist dabei aber zu schmal für das eigene
   2er-Feldraster des Formulars. Dessen eigene @media-Grenze (640px) greift
   hier NICHT, da sie sich auf die Viewport-Breite bezieht, nicht auf die
   tatsächliche Spaltenbreite. Daher hier ein kontextueller, früherer
   Umbruch — das WPCode-CF7-Snippet selbst bleibt dabei unangetastet.        */
@media (min-width: 641px) and (max-width: 900px) {
  body.page-id-3480 .kontakt-form-col .cf7-premium-form .cf7-grid {
    grid-template-columns: 1fr !important;
  }
  body.page-id-3480 .kontakt-form-col .cf7-premium-form .cf7-grid .cf7-field.full {
    grid-column: 1 !important;
  }
}

/* ─── RELOZIERTES GOOGLE-MAPS-WIDGET — Maße an neue Spalte anpassen ──────────
   Das native Elementor-Maps-Widget (elementor-element-9f880bc) bringt eigene
   Inline-Maße (800px Breite, 400px iframe-Höhe) aus der alten Einspalten-
   Seite mit. Hier auf responsive Spaltenbreite + festes Seitenverhältnis
   umgestellt. Das Complianz-Consent-Gating (cmplz-Platzhalter, data-src-
   cmplz) ist davon nicht betroffen — es werden ausschließlich Maße
   überschrieben, keine Attribute oder das Widget selbst.                    */
body.page-id-3480 .elementor-element-9f880bc {
  width: 100% !important;
  max-width: 100% !important;
}
body.page-id-3480 .elementor-element-9f880bc .elementor-custom-embed {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
}
body.page-id-3480 .elementor-element-9f880bc iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ─── KONTAKT-INFO-CARD — linke Spalte, Inhalt des neuen HTML-Widgets ────────
   Scope: .kws-blog-post.kws-leistung.kws-kontakt — liegt INNERHALB des
   HTML-Widgets, folgt daher dem gewohnten Scope-Muster.                    */
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-info-card {
  background: var(--kws-cream);
  padding: 2.5rem;
  position: relative;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kws-gold-warm);
  margin: 0 0 .75rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-info-card h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--kws-ink);
  margin: 0 0 1.5rem;
  line-height: 1.3;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-address-street {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--kws-ink);
  margin: 0 0 1.25rem;
}

/* ─── KONTAKT-KONTAKTLISTE — Telefon / E-Mail / Fax ─────────────────────── */
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-list li {
  margin-bottom: .85rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-link,
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-static {
  display: flex;
  align-items: center;
  gap: .875rem;
  font-family: var(--body);
  font-size: .95rem;
  color: var(--kws-ink);
  text-decoration: none;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-link:hover {
  color: var(--kws-gold-warm);
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-contact-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(200,146,42,.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--kws-gold-warm);
}

/* ─── KONTAKT-ANFAHRT — Hinweistext PKW ──────────────────────────────────── */
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-anfahrt {
  border-top: 1px solid var(--kws-rule);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-anfahrt-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kws-ink-lt);
  margin: 0 0 .6rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-anfahrt p {
  font-family: var(--body);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--kws-ink-mid);
  margin: 0;
}

/* ─── KONTAKT-EXPERTE — kompaktes Trust-Signal (Martin Blesgen) ─────────────
   Bewusst schlanker als .expert-bar / .expert-profile-section (DS 3.4 /
   3.27) — diese Seite ist formularzentriert, kein zweites Verkaufsargument
   nötig. Nur Foto, Name, Rolle, ein Profil-Link.                           */
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  border-top: 1px solid var(--kws-rule);
  padding-top: 1.75rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-photo {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(200,146,42,.4);
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kws-ink-lt);
  margin: 0 0 .3rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kws-ink);
  margin: 0;
  line-height: 1.3;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-role {
  font-family: var(--body);
  font-size: .8rem;
  color: var(--kws-ink-mid);
  display: block;
  margin: .15rem 0 .4rem;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--kws-gold-warm);
  text-decoration: none;
}
.kws-blog-post.kws-leistung.kws-kontakt .kontakt-experte-link:hover {
  text-decoration: underline;
}

/* ─── RESPONSIVE: Mobile (≤640px) ───────────────────────────────────────── */
@media (max-width: 640px) {
  .kws-blog-post.kws-leistung.kws-kontakt .kontakt-info-card {
    padding: 2rem 1.5rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   KONTAKTSEITE — native Titel-Leiste (OPTIONAL — niedrigere Konfidenz)

   Färbt die bestehende ThemeREX-Titelleiste (sc_layouts_title, Foto
   "kontakt.jpg") auf den Navy/Gold-Verlauf der Leistungsseiten um, statt sie
   wie auf VP/IO/MB zu unterdrücken und neu zu bauen — das vorhandene Foto
   wird damit bewusst NICHT verworfen, nur die Farbgebung angepasst.

   ACHTUNG: Mir liegt die Investex-Theme-CSS nicht vor — ob "with_image"
   bereits einen eigenen Tint-Layer mitbringt und ob die Textfarben der
   Breadcrumb/H1 schon hell genug sind, kann ich nicht mit Sicherheit sagen.
   Bitte nach dem Einspielen kurz per DevTools gegenchecken. Selektoren sind
   bewusst auf stabile Theme-Klassen statt auf die zufällig generierte
   trx_addons_inline_*-Klasse gesetzt, damit die Regel auch nach einem
   späteren Bild-Wechsel im Elementor-Editor nicht stillschweigend ins Leere
   läuft. Scope: ausschließlich body.page-id-3480 (Post-ID der Kontaktseite).
   Falls unerwünscht: diesen gesamten Block einfach nicht einspielen.
   ════════════════════════════════════════════════════════════════════════════ */
body.page-id-3480 .sc_layouts_title.with_image {
  background-image: linear-gradient(135deg, var(--kws-dark-bg) 0%, var(--kws-dark-bg-mid) 100%) !important;
}
body.page-id-3480 .sc_layouts_title_caption {
  color: #fff !important;
}
body.page-id-3480 .breadcrumbs_item,
body.page-id-3480 .breadcrumbs_item a {
  color: rgba(255,255,255,.65) !important;
}
body.page-id-3480 .breadcrumbs_item.current {
  color: var(--kws-gold-lt) !important;
}