/* =========================================================
   Zweimeter Divi Framework – v0.7 (Components + Recipes)
   Date: 2025-10-18
   ========================================================= */

/* Container-Kontext für Row/Column (für optionale @container-Styles) */
.et_pb_row, .et_pb_column{ container-type: inline-size }

/* 1) Hero Section */
.hero{padding-block: var(--sp-6)}
.hero .eyebrow{
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--clr-secondary-600); font-size: .95rem;
}
.hero .lead{
  font-size: var(--fs-500); color: color-mix(in oklab, var(--clr-body) 85%, black 15%);
  margin-bottom: var(--sp-4);
}
.hero .actions{display:flex; gap: var(--sp-3); flex-wrap:wrap}

/* 2) Cards / Teaser */
.card{background:var(--clr-surface); border:1px solid var(--clr-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden}
.card__media{display:block}
.card__body{padding: var(--sp-4)}
.card__title{margin:0 0 var(--sp-2); color:var(--clr-headings); font-weight:var(--fw-ubold)}
.card__meta{color: color-mix(in oklab, var(--clr-body) 70%, black 30%); font-size:.95em}

/* 3) Grid Beispiele (Viewport-basiert; Container-Variante siehe unten) */
.grid{display:grid; gap:var(--sp-4)}
@media (min-width: 768px){ .grid.cols-2{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width: 1024px){ .grid.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))} }

/* 4) Container-basierter Grid (passt sich Row-Breite an) */
.card-grid{display:grid; grid-template-columns:1fr; gap:var(--sp-4)}
@container (min-width: 700px){ .card-grid{ grid-template-columns: repeat(2, 1fr) } }
@container (min-width: 1050px){ .card-grid{ grid-template-columns: repeat(3, 1fr) } }

/* 5) Navigation / Header (Sticky + Shadow bei Scroll) */
.site-header{position:sticky; top:0; z-index:1000; background:var(--clr-bg)}
.site-header.is-scrolled{ box-shadow: var(--shadow-2); backdrop-filter: saturate(1.1) blur(6px) }
.site-nav a{padding:.75rem 1rem; display:inline-block; font-weight:600; color:var(--clr-headings)}
.site-nav a:hover{color:var(--clr-primary-600)}

/* 6) Footer */
.site-footer{background:var(--clr-primary-600); color:var(--clr-on-accent); padding-block:var(--sp-6)}
.site-footer a{color:#fff; text-decoration:underline; text-underline-offset:2px}

/* 7) FAQ / Accordion (Details/Summary) – native, leichtgewichtig */
.faq details{border:1px solid var(--clr-border); border-radius:var(--radius-md); padding: var(--sp-3); background:#fff}
.faq details + details{margin-top: var(--sp-3)}
.faq summary{cursor:pointer; font-weight:700; color:var(--clr-headings)}
.faq details[open]{box-shadow:var(--shadow-1)}
.faq details[open] summary{color:var(--clr-primary-600)}

/* 8) Post Card (Blog) */
.post-card{display:flex; flex-direction:column}
.post-card .meta{color: color-mix(in oklab, var(--clr-body) 70%, black 30%); font-size:.95em}

/* 9) Hilfsklasse für Texte auf farbigen Flächen (Buttons, Hero) */
.on-primary{color:var(--clr-on-accent)!important}
.on-accent{color:var(--clr-on-accent)!important}

/* 10) 17''-Monitor (typisch 1920×1080) – Contentbreite konservativ halten */
@media (min-width: 1440px){
  .wrapper{max-width: var(--container-xl)}
}

/* === Fluid Type: Divi 5 Overrides (global) ============================= */

/* 1) gelöscht und in txt file gesichert!

/* 2) Textmodule / Bodycopy standardisieren (auch wenn Divi px setzt) */
:root .et_pb_text,
:root .et_pb_text p,
:root .et_pb_blurb p,
:root .et_pb_post_content p {
  font-size: var(--fs-400) !important;
  line-height: var(--lh-normal, 1.6) !important;
}

/* 3) Sicherheit: Jede Heading-Größe, die Divi inline/px setzt, neutralisieren */
:root [class*="et_pb_heading_"] .et_pb_heading_container h1,
:root [class*="et_pb_heading_"] .et_pb_heading_container h2,
:root [class*="et_pb_heading_"] .et_pb_heading_container h3,
:root [class*="et_pb_heading_"] .et_pb_heading_container h4,
:root [class*="et_pb_heading_"] .et_pb_heading_container h5,
:root [class*="et_pb_heading_"] .et_pb_heading_container h6 {
  /* falls irgendwo noch style-Attribute oder sehr spezifische Presets kommen */
  font-weight: inherit; /* Deine Tokens regeln Bold/UltraBold bereits */
}

/* components.css • v0.6 */

/* Eyebrow / Kicker über H1 */
.eyebrow{
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--clr-primary-600);
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

/* Buttons (bleiben wie gehabt) */
.u-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem;
  border-radius:.6rem;
  border:1px solid transparent;
  font-weight:700; line-height:1;
}
.u-btn--primary{ background:var(--clr-primary-600); color:#fff; }
.u-btn--primary:hover{ filter:brightness(1.06); }
.u-btn--accent{ background:var(--clr-accent-600); color:#fff; 
}

/* Editor UI neutral – nur wenn nötig */
#et-boc, #page-container {
  font-size: 16px; /* neutralisiert Panel-Vererbung */
}

/* ===== Headlines: Scope nur Content-Bereich ===== */
/* Container-Guard: greift im Frontend (#page-container) und im Builder-Canvas (#et-boc), NICHT in den Editor-Panels */
:where(#et-boc, #page-container) :is(h1, h2, h3, h4, h5, h6) {
  line-height: var(--lh-tight, 1.12);
  letter-spacing: var(--ls-tight, 0);
}

/* Familie + Gewicht je Stufe */
:where(#et-boc, #page-container) :is(h1, h3, h5) {
  font-family: "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
  font-weight: 800; /* „ultra bold“ */
}

:where(#et-boc, #page-container) :is(h2, h4, h6) {
  font-family: "Rock Salt", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
}

/* Größen-Mapping — bleibt gern so oder nach Geschmack anpassen */
:where(#et-boc, #page-container) h1 { font-size: var(--fs-900) !important; }
:where(#et-boc, #page-container) h2 { font-size: var(--fs-800) !important; }
:where(#et-boc, #page-container) h3 { font-size: var(--fs-700) !important; }
:where(#et-boc, #page-container) h4 { font-size: var(--fs-600) !important; }
:where(#et-boc, #page-container) h5 { font-size: var(--fs-500) !important; }
:where(#et-boc, #page-container) h6 { font-size: var(--fs-400) !important; }

/* Divi Heading-Modul: stärkere Bindung (gewinnt gegen Modul-Presets),
   ohne die Editor-UI zu beeinflussen */
:root [class*="et_pb_heading_"] .et_pb_heading_container h1 { font-size: var(--fs-900) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h2 { font-size: var(--fs-800) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h3 { font-size: var(--fs-700) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h4 { font-size: var(--fs-600) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h5 { font-size: var(--fs-500) !important; }
:root [class*="et_pb_heading_"] .et_pb_heading_container h6 { font-size: var(--fs-400) !important; }

/* Headings: Libre Franklin auf H1/H3/H5 */
:where(#et-boc, #page-container)
:is(h1, h3, h5,
    .et_pb_title_container :is(h1, h3, h5),
    .et_pb_fullwidth_header :is(h1, h3, h5),
    [class*="et_pb_heading_"] .et_pb_heading_container :is(h1, h3, h5)) {
  font-family: "Libre Franklin", Roboto, Montserrat, Arial, sans-serif !important;
  font-feature-settings: "kern" 1;
}

/* Headings: Rock Salt auf H2/H4/H6 */
:where(#et-boc, #page-container)
:is(h2, h4, h6,
    .et_pb_title_container :is(h2, h4, h6),
    .et_pb_fullwidth_header :is(h2, h4, h6),
    [class*="et_pb_heading_"] .et_pb_heading_container :is(h2, h4, h6)) {
  font-family: "Rock Salt", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 400 !important; /* Rock Salt hat nur 400 – Bold simuliert sonst hässlich */
  font-feature-settings: "kern" 1;
}

/* === Headings: konsistente Gewichte === */
:where(#et-boc, #page-container) :is(h1),
:where(#et-boc, #page-container) .et_pb_heading_container h1,
:where(#et-boc, #page-container) .et_pb_title_container h1,
:where(#et-boc, #page-container) .et_pb_fullwidth_header h1 {
  font-weight: 800 !important; /* Libre Franklin 800 geladen */
  letter-spacing: var(--ls-tight, 0) !important;
}

:where(#et-boc, #page-container) :is(h3, h5),
:where(#et-boc, #page-container) .et_pb_heading_container :is(h3, h5),
:where(#et-boc, #page-container) .et_pb_title_container :is(h3, h5),
:where(#et-boc, #page-container) .et_pb_fullwidth_header :is(h3, h5) {
  font-weight: 700 !important; /* Libre Franklin 700 geladen */
  letter-spacing: var(--ls-tight, 0) !important;
}

/* Rock Salt hat nur 400 – niemals “bold” simulieren */
:where(#et-boc, #page-container) :is(h2, h4, h6),
:where(#et-boc, #page-container) .et_pb_heading_container :is(h2, h4, h6),
:where(#et-boc, #page-container) .et_pb_title_container :is(h2, h4, h6),
:where(#et-boc, #page-container) .et_pb_fullwidth_header :is(h2, h4, h6) {
  font-weight: 400 !important;
  font-feature-settings: "kern" 1;
}
/* =========================================================
   TEXT PRESETS (Body / Lead / Meta / CTA)
   ========================================================= */
:where(#et-boc, #page-container){
  /* Body-Text */
  .u-text,
  .u-body, :where(p:not([class])) {    /* nackte <p> automatisch gut */
    font: 400 var(--fs-body)/var(--lh-body) "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
    letter-spacing: var(--ls-body);
    color: var(--clr-body);
  }

  /* Lead-Text (Intro) */
  .u-lead{
    font: 400 var(--fs-lead)/var(--lh-lead) "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
    letter-spacing: var(--ls-lead);
    color: var(--clr-body);
    max-width: 65ch;
  }

  /* Meta (Eyebrow, Kategorien, Datum, Overline) */
  .u-meta{
    font: 700 var(--fs-meta)/var(--lh-meta) "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
    color: var(--clr-muted);
  }

  /* CTA-Inline (z.B. in Textmodulen) */
  .u-cta{
    font: 700 var(--fs-cta)/var(--lh-cta) "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
    letter-spacing: var(--ls-cta);
  }
}

/* Spacing-Utilities für Abstände zwischen Blöcken (optional) */
:where(#et-boc, #page-container){
  .u-mb-1{ margin-bottom: .5rem; }
  .u-mb-2{ margin-bottom: 1rem; }
  .u-mb-3{ margin-bottom: 1.5rem; }
  .u-mb-4{ margin-bottom: 2rem; }
}
/* =========================================================
   BUTTONS
   ========================================================= */
:where(#et-boc, #page-container){
  .u-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-py) var(--btn-px);
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    box-shadow: var(--btn-shadow);
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .02s, background-color .2s, color .2s, border-color .2s;
    font: 700 var(--fs-400)/1.1 "Libre Franklin", Roboto, Montserrat, Arial, sans-serif;
    letter-spacing: 0.02em;
    color: #fff; /* Standardfarbe für Primärbutton */
    background-color: var(--clr-primary-600);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .u-btn:active{ transform: translateY(1px); }
}


  /* Größen */
  .u-btn--sm{ padding: .55rem .9rem; font-size: .9375rem; }
  .u-btn--lg{ padding: 1rem 1.5rem;  font-size: 1.0625rem; }
  .u-btn--block{ display:flex; width:100%; }

  /* Primary */
  .u-btn--primary{
    background: var(--clr-primary-600);
    color: #fff;
  }
  .u-btn--primary:hover{ filter: brightness(1.05); }
  .u-btn--primary:focus-visible{
    outline: 2px solid color-mix(in srgb, var(--clr-primary-600), #fff 30%);
    outline-offset: 2px;
  }

  /* Secondary (Accent) */
  .u-btn--secondary{
    background: var(--clr-accent-600);
    color: #111;
  }
  .u-btn--secondary:hover{ filter: brightness(1.05); }

  /* Ghost (text button) */
  .u-btn--ghost{
    background: transparent;
    color: var(--clr-primary-700);
    border-color: currentColor;
  }
  .u-btn--ghost:hover{
    background: color-mix(in srgb, var(--clr-primary-50), transparent 60%);
  }

.u-btn--accent {
  background: var(--clr-accent-600);
  color: #fff !important;
}
.u-btn--accent:hover {
  background: var(--clr-accent-700);
}

  /* Icon-Abstand */
  .u-btn > svg, .u-btn > i { inline-size: 1.1em; block-size: 1.1em; }
  .u-btn > svg:first-child, .u-btn > i:first-child { margin-right: .4em; }
  .u-btn > svg:last-child,  .u-btn > i:last-child  { margin-left:  .4em; }

  /* Disabled */
  .u-btn[disabled], .u-btn.is-disabled{
    opacity: .5; pointer-events: none;
  }
}
/* =========================================================
   FIX: Divi Editor WYSIWYG (white-on-white)
   ========================================================= */
.et-fb-settings-area,
.et-fb-main-settings,
.et-fb-inner-content,
.et_fb_modal_settings_wrapper,
.et_pb_text_inner {
  color: #2B2B2B !important;
  background-color: #fff !important;
}
/* ===========================
   Zweimeter Buttons v0.7
   =========================== */

/* Base ----------------------------------------------------------- */
.u-btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .75em 1.1em;
  border: 1px solid transparent;
  border-radius: var(--radius-md, .75rem);

  /* Klar definierter Font-Stack, damit nie Times/Garamond o.ä. auftaucht */
  font: 700 var(--fs-300, 1rem)/1 "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: .01em;

  background: transparent;
  color: var(--clr-primary-700, #16324F);
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color .2s ease,
    color .2s ease,
    border-color .2s ease,
    filter .2s ease,
    transform .06s ease;
}

.u-btn:hover{ filter: brightness(1.03); }
.u-btn:active{ transform: translateY(1px); }
.u-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, currentColor, #fff 30%);
  outline-offset: 2px;
}

/* Disabled / Intentional off state */
.u-btn[disabled],
.u-btn.is-disabled{
  opacity: .55;
  pointer-events: none;
  filter: none;
}

/* Sizes ---------------------------------------------------------- */
.u-btn--lg{
  padding: 1rem 1.4rem;
  font-size: calc(var(--fs-300, 1rem) * 1.1);
  border-radius: var(--radius-lg, 1rem);
}
.u-btn--sm{
  padding: .55rem .9rem;
  font-size: calc(var(--fs-300, 1rem) * .9);
  border-radius: var(--radius-sm, .5rem);
}

/* Layout helper */
.u-btn--block{ display: flex; width: 100%; }

/* Inline-Icons (SVG/Icon-Fonts) --------------------------------- */
.u-btn > svg,
.u-btn > i{
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  line-height: 1;
}

/* Variants ------------------------------------------------------- */

/* Primary – Markenfarbe auf Weiß */
.u-btn--primary{
  background: var(--clr-primary-600);
  color: #fff;
}
.u-btn--primary:hover{ background: var(--clr-primary-700); }
.u-btn--primary:focus-visible{
  outline-color: color-mix(in srgb, var(--clr-primary-600), #fff 30%);
}

/* Secondary – Outline/Neutral (passt überall) */
.u-btn--secondary{
  background: transparent;
  color: var(--clr-primary-700);
  border-color: var(--clr-primary-600);
}
.u-btn--secondary:hover{
  background: color-mix(in srgb, var(--clr-primary-600), transparent 88%);
}
.u-btn--secondary:focus-visible{
  outline-color: color-mix(in srgb, var(--clr-primary-600), #fff 35%);
}

/* Accent – zweite Markenfarbe vollflächig */
.u-btn--accent{
  background: var(--clr-accent-600);
  color: #fff;
}
.u-btn--accent:hover{ background: var(--clr-accent-700); }
.u-btn--accent:focus-visible{
  outline-color: color-mix(in srgb, var(--clr-accent-600), #fff 30%);
}

/* Ghost – reiner Textbutton (dezente Fläche beim Hover) */
.u-btn--ghost{
  background: transparent;
  color: var(--clr-primary-700);
  border-color: transparent;
}
.u-btn--ghost:hover{
  background: color-mix(in srgb, var(--clr-primary-600), transparent 92%);
}

/* On-accent Modifier – wenn Buttons auf dunklen/akzentuierten
   Hintergründen stehen (z.B. in farbigen Sections) --------------- */
.on-accent .u-btn--secondary{
  color: #fff;
  border-color: color-mix(in srgb, #fff, transparent 30%);
}
.on-accent .u-btn--ghost{
  color: #fff;
  border-color: transparent;
}
.on-accent .u-btn--ghost:hover{
  background: color-mix(in srgb, #fff, transparent 85%);
}
/* ============================================================
   Divi Button Font Override Fix – Framework v0.7.1
   ============================================================ */
:where(body, #page-container, #et-boc) .et_pb_button,
:where(body, #page-container, #et-boc) .et_pb_button a,
:where(body, #page-container, #et-boc) .u-btn,
:where(body, #page-container, #et-boc) .u-btn > span {
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
/* CTA-Modul: Button typografisch auf Franklin */
:where(body, #page-container, #et-boc) .et_pb_promo_button{
  font-family:"Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:var(--radius-md);
  padding:.75em 1.1em;
  border:1px solid transparent;
}

/* Varianten lesen die Modul-Klasse und stylen NUR den CTA-Button */
:where(body, #page-container, #et-boc) .u-btn--primary .et_pb_promo_button{
  background:var(--clr-primary-600); color:#fff;
}
:where(body, #page-container, #et-boc) .u-btn--primary .et_pb_promo_button:hover{
  background:color-mix(in srgb, var(--clr-primary-600) 90%, #000 10%);
}

:where(body, #page-container, #et-boc) .u-btn--secondary .et_pb_promo_button{
  background:var(--clr-accent-600); color:#111;
}
:where(body, #page-container, #et-boc) .u-btn--secondary .et_pb_promo_button:hover{
  filter:brightness(1.05);
}

:where(body, #page-container, #et-boc) .u-btn--ghost .et_pb_promo_button{
  background:transparent; color:var(--clr-primary-700); border-color:currentColor;
}
:where(body, #page-container, #et-boc) .u-btn--ghost .et_pb_promo_button:hover{
  background: color-mix(in srgb, var(--clr-primary-50), transparent 60%);
}
/* v0.7 – Feature Grid & Cards
   -------------------------------------------------- */

/* 2.1 Container-Queries aktivieren (Rows & Columns) */
:where(.et_pb_row, .et_pb_column){ container-type:inline-size; }

/* 2.2 Feature Grid (Row/Section Wrapper) */
.feature-grid{
  display:grid;
  gap:var(--sp-4);
  grid-template-columns:1fr;
}
@container (min-width: 560px){
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
}
@container (min-width: 900px){
  .feature-grid{ grid-template-columns:repeat(3,1fr); }
}

/* 2.3 Card-Base */
.u-card{
  background:var(--clr-surface, #f8fafc);
  border:1px solid var(--clr-border, #e5e7eb);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  padding:var(--sp-4);
  transition: box-shadow .18s ease, transform .18s ease;
}
.u-card--hover:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}
.u-card--inset{
  padding:0; /* für Medienkarten mit eigenem Innenlayout */
  overflow:hidden;
}

/* 2.4 Card-Subparts (wenn du die Karte als Column + einzelne Module baust) */
.feature-card .u-card__eyebrow{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:var(--fs-300);
  color:var(--clr-primary-700);
  margin:0 0 var(--sp-1);
}
.feature-card .u-card__title{
  margin:0 0 var(--sp-2);
}
.feature-card .u-card__body{
  margin:0;
  color:var(--clr-text);
}
.feature-card .u-card__cta .u-btn{ margin-top:var(--sp-3); }

/* 2.5 Medien-Helper (Bild oben in der Karte) */
.u-media{
  overflow:hidden;
  border-radius: calc(var(--radius-lg) - 2px);
  background:#fff;
}
.u-media img{
  display:block; width:100%; height:auto;
  aspect-ratio: 16/9; object-fit:cover;
}

/* 2.6 Card-Theme-Varianten (optional) */
.u-card--primary{ border-color: color-mix(in srgb, var(--clr-primary-600), #fff 70%); }
.u-card--accent{  border-color: color-mix(in srgb, var(--clr-accent-600),  #fff 70%); }

/* Container Queries aktivieren (Rows & Columns) */
:where(.et_pb_row, .et_pb_row_grid, .et_pb_column) {
  container-type: inline-size;
}
/* =========================================================
   Zweimeter Framework v0.8 — Cards & Feature Grid
   Depends on: tokens-utilities.css (Design Tokens & Utilities)
   ========================================================= */

/* A) Container-Query Setup (Row/Column als Container aktivieren)
   ------------------------------------------------------------- */
:is(.et_pb_row, .et_pb_row_grid, .et_pb_column){
  container-type: inline-size; /* erlaubt @container (width) Queries */
  container-name: zmt-scope;
}

/* B) Shared Card Primitives
   ------------------------------------------------------------- */
.zmt-card {
  --zmt-card-bg: var(--bg, #FFFFFF);
  --zmt-card-fg: var(--body, #2B2B2B);
  --zmt-card-radius: var(--radius-lg, 1rem);
  --zmt-card-pad: clamp(1rem, 2vw, 1.25rem);
  --zmt-card-gap: 0.75rem;
  --zmt-card-border: 1px solid color-mix(in oklab, var(--body, #2B2B2B) 12%, transparent);
  --zmt-card-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);

  display: grid;
/* grid-template-rows: subgrid; /* moderne Browser: übernimmt Reihen aus Parent, fällt sonst still zurück */
  gap: var(--zmt-card-gap);
  padding: var(--zmt-card-pad);
  border-radius: var(--zmt-card-radius);
  background: var(--zmt-card-bg);
  color: var(--zmt-card-fg);
  border: var(--zmt-card-border);
  box-shadow: var(--zmt-card-shadow);
  text-decoration: none; /* falls als <a> benutzt */
}

.zmt-card__media {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(var(--zmt-card-radius) - 4px);
}
.zmt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.zmt-card__kicker {
  font-size: var(--fs-300, .9rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .8;
}

.zmt-card__title {
  font-size: var(--fs-600, 1.25rem);
  font-weight: 700;
}

.zmt-card__meta {
  font-size: var(--fs-300, .9rem);
  opacity: .7;
}

.zmt-card__excerpt {
  font-size: var(--fs-400, 1rem);
  line-height: var(--lh-base, 1.6);
  margin: 0;
}

.zmt-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}

/* Link- & Fokus-Staaten (a11y) */
.zmt-card:where(a), .zmt-card a {
  color: inherit;
}
.zmt-card:focus-visible,
.zmt-card :where(a,button):focus-visible {
  outline: 2px solid var(--primary_600, #0C71C3);
  outline-offset: 2px;
  border-radius: calc(var(--zmt-card-radius) - 2px);
}

/* C) Preset Variants
   ------------------------------------------------------------- */

/* Card/Default */
.zmt-card--default {
  /* nutzt Primitives; keine Extraregeln nötig */
}

/* Card/MediaTop */
.zmt-card--media-top {
  display: grid;
  gap: var(--zmt-card-gap);
}
.zmt-card--media-top .zmt-card__media {
  order: -1;
  margin-bottom: .25rem;
}

/* Card/Emphasized */
.zmt-card--emphasized {
  --zmt-card-bg: color-mix(in oklab, var(--primary_700, #061F5C) 8%, #FFFFFF);
  --zmt-card-border: 1px solid color-mix(in oklab, var(--primary_700, #061F5C) 22%, transparent);
  --zmt-card-shadow: 0 6px 20px rgba(6,31,92,.14);
  position: relative;
}
.zmt-card--emphasized .zmt-card__kicker{
  color: var(--primary_600, #0C71C3);
}
.zmt-card--emphasized .zmt-card__title{
  color: var(--primary_700, #061F5C);
}

/* Card/Borderless */
.zmt-card--borderless {
  border: 0;
  box-shadow: none;
  padding: 0;
  --zmt-card-gap: .75rem;
}
.zmt-card--borderless .zmt-card__media{
  border-radius: var(--radius-2xl, 1.5rem);
}
.zmt-card--borderless .zmt-card__title{
  margin-top: .25rem;
}

/* D) Feature Grid (Container-Queries)
   ------------------------------------------------------------- */
.zmt-feature-grid {
  --zmt-grid-gap: clamp(0.75rem, 1.5vw, 1rem);
  display: grid;
  gap: var(--zmt-grid-gap);
  grid-template-columns: 1fr; /* 1-spaltig in schmalen Containern */
}

/* Container Query Breaks (auf Row/Column-Breite, NICHT Viewport) */
@container zmt-scope (min-width: 600px){
  .zmt-feature-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@container zmt-scope (min-width: 900px){
  .zmt-feature-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* E) Feature Card (für Grids gedacht) */
.zmt-feature-card {
  /* nutzt Card-Basis, kann zusätzlich akzentuiert werden */
}
.zmt-feature-card .zmt-card__title{
  font-size: var(--fs-500, 1.125rem);
}
.zmt-feature-card .zmt-card__excerpt{
  font-size: var(--fs-400, 1rem);
}
.zmt-feature-card.zmt-card--emphasized{
  --zmt-card-bg: color-mix(in oklab, var(--accent_600, #E89C1A) 8%, #FFFFFF);
  --zmt-card-border: 1px solid color-mix(in oklab, var(--accent_700, #C17E12) 22%, transparent);
}

/* F) Utility-Bridges (optional, falls direkt in Divi-Modulen zugewiesen)
   ------------------------------------------------------------- */
.u-card { /* sanfte Default-Karte fürs Divi Blurb/Text Modul */
  background: var(--bg, #FFFFFF);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in oklab, var(--body, #2B2B2B) 10%, transparent);
  padding: clamp(1rem, 2vw, 1.25rem);
}

	/* v0.8.1 — Card Layout Fix */
.zmt-card{
  display: grid;
  /* subgrid raus! */
  /* grid-template-rows: subgrid;  <-- entfernen */
  grid-template-columns: 1fr;
  grid-auto-flow: row;
	grid-auto-rows: max-content;	
}
.zmt-card > * { min-width: 0; } /* verhindert Text-Overflow/Schieben */

/* MediaTop korrekt nach oben (Grid statt Flex-Order) */
.zmt-card--media-top .zmt-card__media{
  /* order:-1;  <-- entfernen */
  grid-row: 1;
  margin-bottom: .25rem;
}

/* Sicherheitsnetz: jede Unterzeile getrennt anordnen */
.zmt-card__kicker { grid-row: auto; }
.zmt-card__title  { grid-row: auto; }
.zmt-card__meta   { grid-row: auto; }
.zmt-card__excerpt{ grid-row: auto; }
.zmt-card__actions{ grid-row: auto; display:flex; flex-wrap:wrap; gap:.5rem; }

/* Optional: Bildradius bei Karten mit Padding ausgleichen */
.zmt-card__media { border-radius: calc(var(--zmt-card-radius, 1rem) - 4px); }

/* ===========================
   Zweimeter v0.8.2 – Add-ons
   =========================== */

/* 1) Micro-Hover (dezent, respektiert prefers-reduced-motion) */
@media (hover:hover) and (pointer:fine){
  .zmt-card {
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .zmt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.10);
  }
}
@media (prefers-reduced-motion: reduce){
  .zmt-card { transition: none; }
}

/* 2) Image-Interaction (dezent) */
@media (hover:hover) and (pointer:fine){
  .zmt-card__media img{
    transition: transform .35s ease;
  }
  .zmt-card:hover .zmt-card__media img{
    transform: scale(1.025);
  }
}

/* 3) Aspect Modifiers (optional pro Card) */
.zmt-card--square .zmt-card__media{ aspect-ratio: 1 / 1; }
.zmt-card--portrait .zmt-card__media{ aspect-ratio: 3 / 4; }
.zmt-card--wide .zmt-card__media{ aspect-ratio: 21 / 9; }

/* 4) Line Clamp Utilities (Titel/Excerpt kürzen) */
.u-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.u-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.u-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* 5) Feature-Grid Dichte-Varianten */
.zmt-feature-grid--compact { --zmt-grid-gap: .6rem; gap: var(--zmt-grid-gap); }
.zmt-feature-grid--comfortable { --zmt-grid-gap: 1.25rem; gap: var(--zmt-grid-gap); }

/* 6) Buttons in Cards: Abstand konsistent */
.zmt-card__actions .u-btn { margin: 0; } /* überschreibt Divi-Button-Defaults */
	
/* ========== Theme Builder Prep v0.9 ========== */

/* Header */
.zmt-site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg,#fff);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Footer */
.zmt-site-footer{
  background:color-mix(in oklab,var(--primary_700,#061F5C) 6%,#fff);
  border-top:1px solid rgba(0,0,0,.06);
  padding-block:clamp(1.25rem,3vw,2rem);
  color:var(--body,#2B2B2B);
}

/* Blog Archive */
.zmt-blog-archive .zmt-feature-grid{
  gap:clamp(1rem,2vw,1.5rem);
}
.zmt-blog-archive .zmt-card__title{font-size:var(--fs-600,1.25rem);}
.zmt-blog-archive .zmt-card__excerpt{font-size:var(--fs-400,1rem);}
.zmt-blog-archive .zmt-card__media img{transition:transform .4s ease;}
.zmt-blog-archive .zmt-card:hover .zmt-card__media img{transform:scale(1.03);}

/* Single Post */
.zmt-post-body .u-meta{opacity:.7;font-size:var(--fs-300);}
.zmt-post-body .u-text{line-height:var(--lh-base,1.6);}
.zmt-post-body .u-btn{margin-top:1.25rem;}

	/* =========================================================
   Zweimeter v0.8.x — Divi Blog-Modul → Card-Styles (Version B)
   Erwartung: Row/Wrapper hat Klassen: .zmt-feature-grid.zmt-blog-archive
   ========================================================= */

/* Grid-Basis: kommt schon aus _containers.css; hier nur Fallback-Spacing */
.zmt-blog-archive { gap: clamp(1rem, 2vw, 1.5rem); }

/* 1) Jede Blog-Kachel wie unsere .zmt-card */
.zmt-blog-archive .et_pb_post {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  gap: .75rem;
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid color-mix(in oklab, var(--body, #2B2B2B) 10%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  background: var(--bg, #fff);
  color: var(--body, #2B2B2B);
  text-decoration: none;
}

/* 2) Bildbereich → .zmt-card__media */
.zmt-blog-archive .et_pb_post .entry-featured-image-url {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(var(--radius-lg, 1rem) - 4px);
}
.zmt-blog-archive .et_pb_post .entry-featured-image-url img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 3) Kicker (erste Kategorie) → vor Titel rendern */
.zmt-blog-archive .et_pb_post .post-meta {
  order: 2;               /* nach dem Titel */
  font-size: var(--fs-300, .9rem);
  opacity: .75;
  margin: 0;
}
.zmt-blog-archive .et_pb_post .post-meta .published {
  /* Datum bleibt in Meta, Kategorien werden als Kicker gespiegelt */
}

/* 3a) Kicker-Emulation (zeigt erste Kategorie vor dem Titel) */
.zmt-blog-archive .et_pb_post .categories a:first-child::before {
  content: attr(title);
  display: block;
  font-size: var(--fs-300, .9rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .25rem;
  color: inherit;
}

/* 4) Titel → .zmt-card__title */
.zmt-blog-archive .et_pb_post h2.entry-title,
.zmt-blog-archive .et_pb_post h2.entry-title a {
  font-size: var(--fs-600, 1.25rem);
  line-height: var(--lh-tight, 1.2);
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  margin: 0;
}

/* 5) Excerpt → .zmt-card__excerpt (3 Zeilen Clamp) */
.zmt-blog-archive .et_pb_post .post-content p {
  font-size: var(--fs-400, 1rem);
  line-height: var(--lh-base, 1.6);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 6) Actions → .zmt-card__actions (More-Link, Buttons) */
.zmt-blog-archive .et_pb_post .more-link {
  display: inline-block;
  padding: .55rem .9rem;
  border-radius: .75rem;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--primary_600, #0C71C3);
  color: #fff;
  text-decoration: none;
  margin-top: .25rem;
}
.zmt-blog-archive .et_pb_post .more-link:hover { filter: brightness(0.96); }

/* 7) Micro-Hover (dezent, respektiert reduced-motion) */
@media (hover:hover) and (pointer:fine){
  .zmt-blog-archive .et_pb_post { transition: transform .22s ease, box-shadow .22s ease; }
  .zmt-blog-archive .et_pb_post:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 24px rgba(0,0,0,.10);
  }
  .zmt-blog-archive .entry-featured-image-url img { transition: transform .35s ease; }
  .zmt-blog-archive .et_pb_post:hover .entry-featured-image-url img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce){
  .zmt-blog-archive .et_pb_post,
  .zmt-blog-archive .entry-featured-image-url img { transition: none; }
}

/* 8) Emphasized-Variante per Zusatzklasse am Post */
.zmt-blog-archive .et_pb_post.zmt-card--emphasized{
  background: color-mix(in oklab, var(--primary_700, #061F5C) 8%, #FFFFFF);
  border-color: color-mix(in oklab, var(--primary_700, #061F5C) 22%, transparent);
  box-shadow: 0 6px 20px rgba(6,31,92,.14);
}
	.zmt-blog-archive .pagination a,
.zmt-blog-archive .pagination span {
  display:inline-block; padding:.45rem .8rem; margin:.1rem;
  border:1px solid rgba(0,0,0,.12); border-radius:.6rem; text-decoration:none;
}
.zmt-blog-archive .pagination .current {
  background: var(--primary_600,#0C71C3); color:#fff; border-color: transparent;
}

	/* =========================================================
   Zweimeter v0.9 – Single Post Template
   ========================================================= */

.zmt-post{
  --hero-radius: clamp(0.75rem, 1.2vw, 1rem);
  --post-max: 78ch;
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}

/* Hero */
.zmt-post__hero{
  margin: 0;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--hero-radius);
  background: #f4f6f8;
}
.zmt-post__hero img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: translateZ(0);
}

/* Kicker */
.zmt-post__kicker{
  letter-spacing:.03em;
  text-transform:uppercase;
  opacity:.8;
}

/* Title */
.zmt-post__title{
  font-family: "Libre Franklin", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 800;
  line-height: var(--lh-tight, 1.2);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0;
  max-width: var(--post-max);
}

/* Meta */
.zmt-post__meta{
  font-size: var(--fs-300, .95rem);
  opacity: .75;
}

/* Content */
.zmt-post__content{
  max-width: var(--post-max);
}
.zmt-post__content :where(p, ul, ol, blockquote, h2, h3, h4){
  margin-block: .75rem;
}
.zmt-post__content h2{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: var(--lh-tight, 1.25);
  margin-top: 1.25rem;
}
.zmt-post__content img{
  max-width: 100%;
  height: auto;
  border-radius: .5rem;
}

/* Actions (CTA) */
.zmt-post__actions{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top: .25rem;
}
.zmt-post__cta{ /* nutzt u-btn u-btn--primary Klassen bereits */
  margin: 0;
}

/* Prev/Next */
.zmt-post__nav{
  display:flex; justify-content:space-between; gap:1rem;
  padding-top:.75rem; border-top:1px solid rgba(0,0,0,.08);
}
.zmt-post__nav a{
  text-decoration:none;
  padding:.4rem .6rem;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.08);
}
.zmt-post__nav a:hover{
  filter: brightness(.98);
}

/* Container-Query Typo-Boost in breiten Spalten */
:is(.et_pb_row, .et_pb_row_grid, .et_pb_column){ container-type: inline-size; container-name: zmt-post-scope; }
@container zmt-post-scope (min-width: 900px){
  .zmt-post__title{ font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
}

/* Motion (dezent) */
@media (hover:hover) and (pointer:fine){
  .zmt-post__hero img{ transition: transform .45s ease; }
  .zmt-post__hero:hover img{ transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .zmt-post__hero img{ transition: none; }
}

/* ========== Single Post – Meta Bar (Divi 5 safe) ========== */

/* Die Meta-Zeile als Flex-Leiste */
.zmt-post__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;               /* vertikal .5, horizontal .75 */
  align-items: center;
  font-size: var(--fs-300, .95rem);
  opacity: .75;
  margin-block: .25rem .5rem;
}

/* Einzelne Meta-Items */
.zmt-post__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;             /* bleibt einzeilig */
}

/* Trennpunkt zwischen Items */
.zmt-post__meta-item + .zmt-post__meta-item::before {
  content: "•";
  opacity: .5;
  margin-right: .4rem;
}

/* Falls ein Item leer ist (z. B. keine Lesezeit) → ausblenden */
.zmt-post__meta-item:empty { display: none; }

/* Schönere Abstände bei breiteren Containern */
@container zmt-post-scope (min-width: 900px){
  .zmt-post__meta-row { gap: .5rem 1rem; }
}

	/* v0.8.3 – neutralisiert Card-Heading-Override */
.zmt-card *:where(h1,h2,h3,h4,h5,h6){ font-family: inherit; }
	
	/* v0.8.3 – Headline Mapping fix (Divi5-safe) */
:where(#et-boc, #page-container) :is(h2, h4, h6){
  font-family: "Rock Salt", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 400 !important;
}
:where(#et-boc, #page-container) :is(h1, h3, h5){
  font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-weight: 800 !important; /* H5 ggf. 700, wenn dir 800 zu fett ist */
}

/* Falls ein Fullwidth-Header o.ä. eigene Headings rendert: */
.et_pb_fullwidth_header :is(h1,h2,h3,h4,h5,h6){
  font-family: inherit !important;
  font-weight: inherit !important;
}
	
	/* v0.8.3 – Archiv Fallback, falls Row-Klassen fehlen */
body.archive .et_pb_post,
body.blog .et_pb_post{
  display:grid; grid-auto-flow:row; grid-auto-rows:max-content;
  gap:.75rem; padding:clamp(1rem,2vw,1.25rem);
  border-radius:1rem;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.06);
  background:#fff;
}
body.archive .et_pb_post .entry-featured-image-url,
body.blog   .et_pb_post .entry-featured-image-url{
  display:block; aspect-ratio:16/9; overflow:hidden; border-radius:.75rem;
}
body.archive .et_pb_post .entry-featured-image-url img,
body.blog   .et_pb_post .entry-featured-image-url img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* v0.8.3 – Headings über Tokens (Divi5-safe) */
:where(#et-boc, #page-container) :is(h1,h3,h5){
  font-family: var(--ff-head-a) !important;
  font-weight: var(--fw-head-strong, 800) !important;
}
:where(#et-boc, #page-container) :is(h2,h4,h6){
  font-family: var(--ff-head-b) !important;
  font-weight: var(--fw-head-regular, 400) !important;
}

/* WICHTIG: Keine direkten Familien mehr in Komponenten */
.zmt-card *:where(h1,h2,h3,h4,h5,h6){ font-family: inherit; }