/* ===========================================================
   PRAXISHELD – BLOG & WIKI STYLES (Consolidated)
   Version: 2025-11-26
   Author: Praxisheld

   ===========================
   INHALTSVERZEICHNIS
   ===========================
   01) Root-Variablen (Farben, Tokens, Schatten)
   02) Global (html, .post-content Typo & Grundstruktur)
   03) Überschriften, Listen, Zitate, Inline
   04) Tabellen (Basis) + Scroll-Hinweisbox
   05) CTA – Panels (neu & alt)
   06) FAQ / Accordion (generisch)
   07) Utility-Texte & Tags / Callouts / Notes / Checklists
   08) Cards & Grid (minimal)
   09) Mini-TOC (Inhaltsverzeichnis)
   10) Steps (Voice-Detail)
   11) Glossary / Wiki (Karten-Variante)
   12) Glossary / Wiki (reines Accordion + A–Z-Navi)
   13) Kompatibilitäts-Nachtrag (immer zuletzt laden)
   =========================================================== */


/* ===========================================================
   01) ROOT-VARIABLEN
   - Zusammengeführt aus allen Blöcken
   - Keine Werte geändert
   =========================================================== */
:root {
  /* --- Blog-Grundfarben --- */
  --ph-bg: #ffffff;
  --ph-surface: #f6f8fa;
  --ph-text: #0e1220;
  --ph-text-muted: #5c6473;
  --ph-primary: #007A74;              /* Primärfarbe */
  --ph-primary-contrast: #ffffff;
  --ph-accent: #00b8b0;               /* Akzent */
  --ph-warn: #e55b3c;
  --ph-border: #e5e8ee;
  --ph-shadow: 0 6px 24px rgba(10, 18, 30, .08);

  /* Tabellen */
  --ph-table-head-bg: var(--ph-primary);
  --ph-table-head-text: #ffffff;

  /* --- Glossary/Wiki Tokens (fügen sich in ph-Variablen ein) --- */
  --ph-gloss-bg: var(--surface-card, #0f766e0d);
  --ph-gloss-border: var(--surface-border, #0b4f4b1a);
  --ph-gloss-accent: var(--ph-primary, #0D9488);
  --ph-gloss-muted: var(--text-muted, #6b7280);
  --ph-gloss-text: var(--text-base, #0f172a);
  --ph-radius-lg: 14px;
  --ph-radius-sm: 10px;
  --ph-shadow-sm: 0 6px 24px rgba(2, 44, 34, .08);
}

/* Optional: sanfter Scroll für Ankerlinks */
html { scroll-behavior: smooth; }


/* ===========================================================
   02) GLOBAL – GRUNDSTRUKTUR
   =========================================================== */
.post-content {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ph-text);
}
.post-content p { margin: 1.2em 0; }

/* Lead Absatz (erster Absatz) */
.post-content p:first-of-type {
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 2em;
}


/* ===========================================================
   03) ÜBERSCHRIFTEN, LISTEN, ZITATE, INLINE
   =========================================================== */
.post-content h1,
.post-content h2,
.post-content h3 {
  line-height: 1.3;
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 0.8em;
  color: var(--ph-text);
}
/* erste H1 oben ohne margin */
.post-content h1 { font-size: 2.2rem; }
.post-content h1:first-of-type { margin-top: 0; }

.post-content h2 {
  font-size: 1.6rem;
  border-left: 4px solid var(--ph-primary);
  padding-left: .6em;
}
.post-content h3 { font-size: 1.3rem; }

/* Optional: leichte Anpassung für Emojis in Überschriften */
.post-content h2, .post-content h3 {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Listen */
.post-content ul,
.post-content ol {
  margin: 1.2em 0 1.6em 1.4em;
  padding: 0;
}
.post-content li { margin-bottom: .6em; }
.post-content ul li::marker {
  color: var(--ph-primary);
  font-weight: bold;
}

/* Utility-Listen */
.post-content .ph-list { margin: 1.2em 0 1.6em 1.4em; }
.post-content .ph-list li { margin-bottom: .6em; }
.post-content .ph-list.check li::marker { content: "✓ "; }

/* Zitate */
.post-content blockquote,
.post-content .ph-quote {
  border-left: 4px solid var(--ph-primary);
  padding-left: 1em;
  font-style: italic;
  margin: 2em 0;
  color: var(--ph-text-muted);
}

/* Inline-Hervorhebung */
.post-content .ph-highlight {
  background: rgba(0, 122, 116, .12);
  padding: 0 .25em;
  border-radius: 3px;
}


/* ===========================================================
   04) TABELLEN (BASIS) + SCROLL-HINWEISBOX
   =========================================================== */
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: .95em;
  display: block;
  overflow-x: auto; /* mobil scrollbar */
}
.post-content th,
.post-content td {
  border: 1px solid var(--ph-border);
  padding: .75em 1em;
  text-align: left;
}
.post-content th {
  background: var(--ph-table-head-bg);
  color: var(--ph-table-head-text);
  font-weight: 600;
}
.post-content tr:nth-child(even) td { background: #fafbfc; }
.post-content caption {
  caption-side: top;
  text-align: left;
  color: var(--ph-text-muted);
  font-size: .92em;
  margin-bottom: .4em;
}

/* Scroll-Hinweisbox (fixierte Vorgabe) */
.ph-scroll-hint{
  background: color-mix(in oklab, var(--ph-primary,#0f766e) 14%, white);
  border: 1px solid color-mix(in oklab, var(--ph-primary,#0f766e) 35%, transparent);
  color: color-mix(in oklab, var(--ph-primary-contrast,#063), black 40%);
  padding: .65rem .9rem;
  border-radius: 10px;
  font-weight: 600;
  margin: .75rem 0;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}


/* ===========================================================
   05) CTA – PANELS (NEU & ALT)
   =========================================================== */
/* Neue CTA */
.post-content .ph-cta {
  background: var(--ph-primary);
  color: var(--ph-primary-contrast);
  padding: 2em;
  border-radius: 10px;
  text-align: center;
  margin: 3em 0;
  box-shadow: var(--ph-shadow);
}
.post-content .ph-cta h2 { color: inherit; margin-top: 0; }
.post-content .ph-cta a.button {
  display: inline-block;
  margin-top: 1em;
  padding: .8em 1.6em;
  background: var(--ph-primary-contrast);
  color: var(--ph-primary);
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background .2s, transform .05s ease-in-out;
}
.post-content .ph-cta a.button:hover { background: #e9eef8; }
.post-content .ph-cta a.button:active { transform: translateY(1px); }

/* Alte/blaue CTA (bestehende Inhalte sichern) */
.bp-cta {
  background: #e0f2fe;
  border: 1px solid #2b6cb0;
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.bp-cta .button.primary {
  background: #2b6cb0;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem;
  text-decoration: none;
}
.bp-cta .button.primary:hover { background: #1e40af; }


/* ===========================================================
   06) FAQ / ACCORDION (GENERISCH)
   =========================================================== */
.post-content .ph-faq { margin: 1.6em 0; }
.post-content .ph-faq-item {
  border: 1px solid var(--ph-border);
  border-radius: 8px;
  background: var(--ph-surface);
  margin-bottom: .8em;
  box-shadow: var(--ph-shadow);
}
.post-content .ph-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  padding: .9em 1em;
  list-style: none;
}
.post-content .ph-faq-item[open] > summary { border-bottom: 1px solid var(--ph-border); }
.post-content .ph-faq-item > div { padding: 1em; color: var(--ph-text); }
.post-content .ph-faq-item > summary::-webkit-details-marker { display: none; }

/* Mehr Abstand zu Folgeelementen / CTA */
.post-content .ph-faq-item { margin: 1.2em 0 1.6em; }
.post-content .ph-faq-item + .ph-faq-item { margin-top: 1.2em; }
.post-content .ph-faq-item + h2,
.post-content .ph-faq-item + h3 { margin-top: 2.2em; }
.post-content .ph-faq-item + .ph-cta { margin-top: 2.5em; }


/* ===========================================================
   07) UTILITY-TEXTE & TAGS / CALLOUTS / NOTES / CHECKLISTS
   =========================================================== */
.eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ph-primary);
  font-weight: 600;
}
.muted { color: var(--ph-text-muted); font-size: 0.95em; }
.lead  { font-size: 1.2rem; line-height: 1.6; color: var(--ph-text); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  background: #f3f4f6;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #111827;
}

/* Callouts */
.callout {
  border-left: 4px solid var(--ph-primary);
  background: #f9fafb;
  padding: 1rem;
  border-radius: 0.375rem;
}
.callout-success { border-color: #16a34a; background: #f0fdf4; }
.callout-title { font-weight: 700; margin-bottom: 0.5rem; }

/* Notes */
.note {
  background: #fff7ed;
  border-left: 4px solid #f97316;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.9rem;
}

/* Checklists */
.checklist { list-style: none; padding: 0; }
.checklist li::before {
  content: "✔";
  color: #16a34a;
  margin-right: 0.5rem;
}


/* ===========================================================
   08) CARDS & GRID (MINIMAL)
   =========================================================== */
.ph-grid-cards{
  display:grid;
  gap: .9rem;
}
.ph-grid-2{
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}
.ph-card{
  background: var(--surface, #ffffff);
  border: 1px solid color-mix(in oklab, var(--ph-primary,#0f766e) 15%, transparent);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
.ph-card > header{
  font-weight: 700;
  margin-bottom: .35rem;
}


/* ===========================================================
   09) MINI-TOC (INHALTSVERZEICHNIS)
   =========================================================== */
.ph-mini-toc {
  position: static;        /* Override: nicht sticky */
  top: auto;
  background: var(--ph-surface);
  border: 1px solid var(--ph-border);
  border-radius: 10px;
  padding: .9rem 1rem;
  margin: 1.2em 0 1.6em;
  box-shadow: var(--ph-shadow);
}
.ph-mini-toc h5 {
  margin: 0 0 .4rem 0;
  font-size: .95rem;
  line-height: 1.2;
}
.ph-mini-toc ul { margin: 0; padding-left: 1.1rem; }
.ph-mini-toc li { margin: .25rem 0; }
.ph-mini-toc a {
  text-decoration: none;
  color: var(--ph-text);
  font-size: 1.06rem;      /* größer (Override) */
  line-height: 1.6;
}
.ph-mini-toc a:hover { color: var(--ph-primary); text-decoration: underline; }


/* ===========================================================
   10) STEPS (VOICE-DETAIL)
   =========================================================== */
/* Container */
.ph-steps {
  display: grid;
  gap: 1rem;
  margin: 1.2em 0 2em;
}
/* Card */
.ph-step {
  position: relative;
  border: 1px solid var(--ph-border);
  border-radius: 10px;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--ph-surface);
  box-shadow: var(--ph-shadow);
  border-left: 6px solid var(--ph-primary);
}
/* Alternierung */
.ph-steps .ph-step:nth-child(even) {
  background: #ffffff;
  border-left-color: var(--ph-accent);
}
/* Titelzeile */
.ph-step-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .4rem 0;
  line-height: 1.3;
  font-weight: 700;
}
/* Icon & Nummer */
.ph-step-title .ph-icon { font-size: 1.15em; }
.ph-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--ph-primary);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.ph-steps .ph-step:nth-child(even) .ph-step-num {
  background: var(--ph-accent);
  color: #073b2d; /* guter Kontrast */
}
/* Typografie im Step */
.ph-step p { margin: .6em 0; }
.ph-step ul, .ph-step ol { margin: .6em 0 .8em 1.2em; }


/* ===========================================================
   11) GLOSSARY / WIKI – KARTEN-VARIANTE
   (dt+dd als gekoppelte Karten, inkl. optionaler Spaltigkeit)
   =========================================================== */
.ph-glossary{
  background: var(--ph-gloss-bg);
  border: 1px solid var(--ph-gloss-border);
  border-radius: var(--ph-radius-lg);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: var(--ph-shadow-sm);
}
/* Titel & Index */
.ph-glossary > .ph-glossary-title{
  display:flex; align-items:center; gap:.6rem;
  margin: 0 0 1rem 0; color: var(--ph-gloss-text);
}
.ph-glossary > .ph-glossary-title .emoji{ font-size:1.2em }
.ph-glossary-index{
  display:flex; flex-wrap:wrap; gap:.25rem .4rem;
  margin: .25rem 0 1rem;
  font-size: .92rem;
}
.ph-glossary-index a{
  padding:.25rem .55rem; border-radius:999px;
  border:1px solid var(--ph-gloss-border);
  text-decoration:none; color: var(--ph-gloss-text);
}
.ph-glossary-index a:hover{ border-color: var(--ph-gloss-accent); }

/* Layout */
.ph-glossary dl{
  margin:0; padding:0; 
  display:grid; 
  grid-template-columns: 1fr;
  gap: .85rem .75rem;
}

/* Karten */
.ph-glossary dt{
  font-weight: 700; color: var(--ph-gloss-text);
  background: #fff; /* safe on dark via mix below */
  border:1px solid var(--ph-gloss-border);
  border-left: 4px solid var(--ph-gloss-accent);
  border-radius: var(--ph-radius-sm);
  padding: .65rem .75rem .55rem .75rem;
  position:relative;
}
@media (prefers-color-scheme: dark){
  .ph-glossary dt{ background: color-mix(in oklab, #0b1320 70%, #ffffff 6%); }
}
.ph-glossary dd{
  margin: -0.35rem 0 .35rem 0;          /* zieht Inhalt an dt heran */
  padding: 0 .85rem .85rem 1rem;
  color: var(--ph-gloss-muted);
  border-left: 1px dashed var(--ph-gloss-border);
}

/* Dense Mode */
.ph-glossary--compact dl{ gap:.55rem .6rem; }
.ph-glossary--compact dt{ padding:.55rem .65rem .45rem; }
.ph-glossary--compact dd{ padding: 0 .7rem .7rem .9rem; }

/* Spalten */
@media (min-width: 900px){
  .ph-glossary--columns dl{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px){
  .ph-glossary--columns dl{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Letter-Gruppen (optional) */
.ph-letter{
  grid-column: 1/-1;
  margin: .75rem 0 .25rem;
  font-weight:800; letter-spacing:.04em;
  color: var(--ph-gloss-muted);
  display:flex; align-items:center; gap:.5rem;
}
.ph-letter::after{
  content:"";
  flex:1; height:1px;
  background: linear-gradient(90deg, var(--ph-gloss-border), transparent);
}

/* Details/summary – lange Erklärungen (Kartenbasis) */
.ph-glossary details{
  border-radius: var(--ph-radius-sm);
  overflow:hidden;
  border:1px solid var(--ph-gloss-border);
  background: #fff;
}
@media (prefers-color-scheme: dark){
  .ph-glossary details{ background: color-mix(in oklab, #0b1320 70%, #ffffff 6%); }
}
.ph-glossary summary{
  cursor:pointer; list-style:none;
  padding:.65rem .85rem;
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; color: var(--ph-gloss-text);
  border-left:4px solid var(--ph-gloss-accent);
}
.ph-glossary summary::-webkit-details-marker{ display:none; }
.ph-glossary details[open] summary{ border-bottom:1px dashed var(--ph-gloss-border); }
.ph-glossary .ph-detail-body{ padding:.75rem .85rem; color: var(--ph-gloss-muted); }

/* Kleines Helferlein */
.ph-def{ margin:.35rem 0 0; }


/* ===========================================================
   12) GLOSSARY / WIKI – REINES ACCORDION (finaler Look)
   - Titelzeile dunkel/primär, Text weiß
   - Body hell, klare Trennung
   - A–Z-Chips gestylt
   =========================================================== */
.ph-glossary { --ph-gap: 10px; --ph-radius: 12px; --ph-border: #0f766e1a; }
.ph-glossary .ph-letter{
  margin: 28px 0 10px; font-weight:700; color:var(--ph-primary, #0f766e);
  border-left:4px solid var(--ph-primary, #0f766e); padding-left:10px;
}
/* alphabetische Index-Chips (verbesserte Variante) */
.ph-glossary-title{ display:flex; align-items:center; gap:.6rem; margin-bottom:12px }
.ph-glossary-index{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px }
.ph-glossary-index a{
  font-weight:600; font-size:.95rem; padding:6px 10px; border-radius:999px;
  background:var(--ph-chip, #e6fffb); color:var(--ph-primary, #0f766e); text-decoration:none; border:1px solid #0f766e22;
}
.ph-glossary-index a:hover{ background:#ccfbf1 }

/* Accordion-Blöcke */
.ph-accordion{ margin: var(--ph-gap) 0; border-radius: var(--ph-radius); overflow: clip; border:1px solid var(--ph-border); background:#0f766e; }
.ph-accordion summary{
  list-style:none; cursor:pointer; padding:16px 18px; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:10px; position:relative; outline:none;
}
.ph-accordion summary::-webkit-details-marker{ display:none }
.ph-accordion summary:focus-visible{ box-shadow:0 0 0 3px #14b8a6; border-radius:inherit }

/* caret */
.ph-accordion summary::after{
  content:""; margin-left:auto; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  transform: rotate(-45deg); transition: transform .25s ease;
}
.ph-accordion[open] summary::after{ transform: rotate(45deg) }

/* body */
.ph-accordion .ph-detail-body{
  background: var(--ph-surface, #f8fafc);
  color: var(--ph-text, #0f172a);
  padding:16px 18px; border-top:1px solid var(--ph-border);
}


/* ===========================================================
   13) KOMPATIBILITÄTS-NACHTRAG (IMMER ZULETZT LADEN)
   - Stabilisiert Icons, Mini-TOC, Steps, Glossar-Card in Dark Mode
   - Enthält keine visuellen Änderungen gegenüber bestehendem Look
   =========================================================== */

/* Text-Icons (einheitlich) */
.ti { font-style: normal; font-weight: 600; }
.ti::before { content: ""; } /* semantischer Marker */
.ti, .ph-icon { line-height: 1; display: inline-block; transform: translateY(1px); }

/* Headline-Icons dezent größer */
.post-content h2 > .ti, .post-content h3 > .ti { font-size: 1.05em; }

/* Mini-TOC – sanfte Defaults (falls mehrfach definiert) */
.ph-mini-toc { background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 10px; box-shadow: var(--ph-shadow); }
.ph-mini-toc h5 { margin: 0 0 .4rem; font-weight: 800; }
.ph-mini-toc .ph-list { list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: block; }
.ph-mini-toc .ph-list a { text-decoration: none; font-weight: 600; }
.ph-mini-toc .ph-list a:hover { color: var(--ph-primary); text-decoration: underline; }

/* Steps – Safety-Werte (angleichen, falls frühere Styles existieren) */
.ph-steps { margin: 1.2em 0 2em; display: grid; gap: 1rem; }
.ph-step { border-left: 6px solid var(--ph-primary); background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: 10px; box-shadow: var(--ph-shadow); padding: 1rem 1.25rem; }
.ph-steps .ph-step:nth-child(even) { background: #fff; border-left-color: var(--ph-accent); }
.ph-step-title { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin: 0 0 .4rem; }
.ph-step-num { inline-size: 28px; block-size: 28px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: var(--ph-primary); font-weight: 700; font-size: .9rem; }
.ph-steps .ph-step:nth-child(even) .ph-step-num { background: var(--ph-accent); color: #073b2d; }
.ph-step .ph-icon { font-size: 1.15em; }

/* Glossar-Karten: Dark-Mode-Fix */
@media (prefers-color-scheme: dark){
  .ph-glossary dt{ background: color-mix(in oklab, #0b1320 70%, #ffffff 6%); }
}

/* Optionale Table-Wrapper-Sicherheit (außerhalb .post-content) */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }

/* Inline-Emoji sanft eintakten */
.ph-inline-emoji { display:inline-block; transform: translateY(1px); }


/* Verfeinerung CTA-Blöcke */
.post-content .ph-cta{
  text-align: center;
  padding: 2.2em 1.8em;
}

/* h2 ist global als flex gesetzt – hier mittig ausrichten */
.post-content .ph-cta h2{
  margin-top: 0;
  margin-bottom: 0.9em;
  justify-content: center;     /* sorgt fürs zentrierte Icon + Text */
  font-size: 1.4rem;
}

/* Standard-Typo im CTA etwas kompakter */
.post-content .ph-cta p{
  margin: 0.45em 0;
}

/* Liste im CTA */
.post-content .ph-cta .ph-list{
  margin: 1.1em 0 1.5em;
  padding: 0;
  list-style: none;
}

/* Button etwas luftiger */
.post-content .ph-cta a.button{
  margin-top: 1.2em;
}

/* CTA-Container */
.post-content .ph-cta{
  text-align: center;
  padding: 2.2em 1.8em;
}

/* CTA-Titel – kann p oder div sein und sieht aus wie eine H2 */
.post-content .ph-cta-title,
.post-content .ph-cta h2{
  margin-top: 0;
  margin-bottom: 0.9em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-size: 1.4rem;
  font-weight: 700;
}

/* Icon im CTA-Titel */
.post-content .ph-cta-title .ti,
.post-content .ph-cta h2 .ti{
  font-size: 1.2em;
}

/* Standard-Typo im CTA etwas kompakter */
.post-content .ph-cta p{
  margin: 0.45em 0;
}

/* Liste im CTA */
.post-content .ph-cta .ph-list{
  margin: 1.1em 0 1.5em;
  padding: 0;
  list-style: none;
}

/* Button etwas luftiger */
.post-content .ph-cta a.button{
  margin-top: 1.2em;
}