/* =============================================================================
   Seiten-Komponenten — sebastianklingel.com (09/2026)
   Consent-Platzhalter (kmp-consent), Calendly-Sektion (cal-*), Seitenkopf (pk-*),
   Referenzen: Karten (rf-card), Kacheln (rf-tile), Detailseite (rf-*), Hero-Hochformat.
   Baut auf main.css/tokens.css und den --hs-Variablen aus startseite.css auf.
   Wird im Frontend global geladen und als editorStyle der Blöcke im Editor.
   ============================================================================= */

/* Sicherheitsnetz: das hidden-Attribut gewinnt immer gegen display-Regeln einzelner Komponenten. */
[hidden] { display: none !important; }
/* Nur für Screenreader sichtbar (z. B. Linktext im Postfach von Drei-Minuten-Marketing) */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- Consent-Platzhalter --------------------------------------------------- */
.kmp-consent { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; background: var(--hs-alt); border: 1px solid var(--hs-border); border-radius: var(--hs-r); overflow: hidden; min-height: 280px; }
.kmp-consent--calendly:not(.is-active) { min-height: 440px; }
.kmp-consent.is-active { display: block; background: #fff; }
.kmp-consent iframe { display: block; width: 100%; height: 100%; border: 0; }
.kmp-consent__calendly { width: 100%; min-height: 640px; }
.kmp-consent__inner { max-width: 440px; padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kmp-consent__icon { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--hs-petrol); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: var(--hs-shadow-sm); margin-bottom: 4px; }
.kmp-consent__title { font-size: 1.1rem; color: var(--hs-heading); }
.kmp-consent__text { margin: 0; font-size: .88rem; color: var(--hs-gray); line-height: 1.55; }
.kmp-consent__text a { color: var(--hs-petrol); }
.kmp-consent__btn { margin-top: 8px; }
.kmp-consent__ext { font-size: .85rem; color: var(--hs-gray); text-decoration: underline; text-underline-offset: 3px; }
.kmp-consent__ext i { font-size: .75em; margin-left: 4px; }
.kmp-consent__error { padding: 24px; text-align: center; color: var(--hs-gray); }
/* Widerruf unter geladenen Playern und Kasten „Externe Medien“ auf der Datenschutzseite (Eigenbau statt Banner, 06.10.2026) */
.kmp-consent__widerruf { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--hs-gray); }
.kmp-consent__widerruf button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--hs-petrol); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kmp-consent__widerruf button:hover,
.kmp-consent__widerruf button:focus-visible { color: #083650; }
.kmp-freigaben { margin: 48px 0 8px; padding: 28px 28px 22px; border: 1px solid var(--hs-border); border-radius: var(--hs-r); background: var(--hs-alt); scroll-margin-top: 110px; }
.kmp-freigaben__titel { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.3; }
.kmp-freigaben__text { margin: 0 0 18px; font-size: .95rem; line-height: 1.65; }
.kmp-freigaben__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kmp-freigaben__zeile { display: flex; align-items: center; gap: 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--hs-border); border-radius: 14px; background: #fff; }
.kmp-freigaben__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--hs-alt); color: var(--hs-petrol); }
.kmp-freigaben__name { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.kmp-freigaben__status { font-size: .85rem; color: var(--hs-gray); }
.kmp-freigaben__zeile.is-frei .kmp-freigaben__status { color: #2c7a4b; }
.kmp-freigaben__btn,
.kmp-freigaben__alle { padding: 7px 14px; border: 1px solid var(--hs-petrol); border-radius: 999px; background: #fff; font: inherit; font-size: .85rem; font-weight: 600; color: var(--hs-petrol); cursor: pointer; transition: background .2s ease, color .2s ease; }
.kmp-freigaben__btn:hover,
.kmp-freigaben__btn:focus-visible,
.kmp-freigaben__alle:hover,
.kmp-freigaben__alle:focus-visible { background: var(--hs-petrol); color: #fff; }
.kmp-freigaben__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
.kmp-freigaben__meldung { font-size: .88rem; font-weight: 600; color: #2c7a4b; }
@media (max-width: 640px) {
    .kmp-freigaben { padding: 20px 16px 16px; }
    .kmp-freigaben__zeile { flex-wrap: wrap; }
}

/* --- Calendly-Sektion ------------------------------------------------------- */
.cal-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.cal-text .section-h2 { margin-bottom: 14px; }
.cal-text p { color: var(--hs-text); }
.cal-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.cal-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--hs-heading); }
.cal-list i { color: var(--hs-turq); margin-top: 5px; }
.cal-note { margin-top: 20px; font-size: .88rem; color: var(--hs-gray); }
.cal-widget { position: sticky; top: 100px; }
.cal-widget .kmp-consent { box-shadow: var(--hs-shadow); }

/* --- Seitenkopf ------------------------------------------------------------- */
.pk { padding: clamp(36px, 6vw, 64px) 0 clamp(24px, 4vw, 40px); background: #fff; }
.pk--alt { background: var(--hs-alt); }
.pk__inner { max-width: 780px; }
.pk--center .pk__inner { margin: 0 auto; text-align: center; }
.pk__title { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 14px; color: var(--hs-heading); }
.pk__text { font-size: 1.1rem; color: var(--hs-gray); line-height: 1.6; margin: 0; }
.pk--alt + .fn-section--alt, .pk--alt + .wp-block-group.fn-section--alt { padding-top: 8px; }
.pk__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.pk--center .pk__actions { justify-content: center; }
.pk__kpis { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pk--center .pk__inner:has(.pk__kpis) { max-width: 920px; }
.pk__kpis li { display: flex; }
.pk__kpi { position: relative; flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--hs-alt); border: 1px solid transparent; border-radius: 18px; text-decoration: none; text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.pk--center .pk__kpi { text-align: center; align-items: center; }
.pk--alt .pk__kpi { background: #fff; }
a.pk__kpi:hover { background: #fff; border-color: var(--hs-border); box-shadow: var(--hs-shadow-sm); transform: translateY(-2px); }
.pk__kpi strong { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; font-weight: 800; color: var(--hs-petrol); letter-spacing: -.01em; }
.pk__kpi strong i { font-size: .62em; color: #f5b301; vertical-align: .18em; }
.pk__kpi span { font-size: .84rem; color: var(--hs-gray); font-weight: 600; line-height: 1.35; }
.pk__kpi-go { position: absolute; right: 12px; top: 12px; font-size: .7rem; color: var(--hs-turq); opacity: .55; transition: opacity .2s, transform .2s; }
a.pk__kpi:hover .pk__kpi-go { opacity: 1; transform: translateY(2px); }

/* --- Referenz-Karten (Fallstudien) v2: Profilkarte mit Cover, Porträt, Ergebnis ---- */
.rf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.rf-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--hs-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.fn-section:not(.fn-section--alt) .rf-card { border: 1px solid var(--hs-border); }
.rf-card:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow); }
.rf-card__cover { position: relative; height: 118px; padding: 18px 20px; overflow: hidden; background: linear-gradient(135deg, var(--hs-petrol) 0%, #145b82 55%, var(--hs-turq) 100%); }
.rf-card__cover::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.rf-card__cover::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; right: -70px; bottom: -120px; background: rgba(121, 219, 154, .16); }
.rf-card__label { position: relative; z-index: 1; display: inline-block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 11px; }
.rf-card__icon { position: absolute; z-index: 1; right: 20px; top: 50%; transform: translateY(-50%) rotate(-10deg); font-size: 3.6rem; color: rgba(255, 255, 255, .16); transition: transform .35s ease, color .35s ease; }
.rf-card:hover .rf-card__icon { transform: translateY(-50%) rotate(0deg) scale(1.08); color: rgba(255, 255, 255, .26); }
.rf-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px 22px; flex: 1; }
.rf-card__photo { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 4px solid #fff; background: #fff; box-shadow: 0 14px 28px -16px rgba(11, 72, 107, .8); margin: -50px 0 14px; }
.rf-card__body h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
.rf-card__link { color: var(--hs-heading); text-decoration: none; }
.rf-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.rf-card__link:focus-visible { outline: none; }
.rf-card:has(.rf-card__link:focus-visible) { outline: 3px solid var(--hs-mint); outline-offset: 3px; }
.rf-card__fach { margin: 4px 0 0; color: var(--hs-gray); font-size: .85rem; line-height: 1.45; }
.rf-card__claim { margin: 16px 0 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--hs-text); }
.rf-card__foot { margin-top: auto; padding-top: 20px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.rf-card__result { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; background: rgba(121, 219, 154, .2); color: #11603a; font-weight: 700; font-size: .84rem; line-height: 1.35; padding: 7px 14px; border-radius: 14px; text-align: left; }
.rf-card__result i { font-size: .8rem; }
.rf-card__more { width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hs-border); font-weight: 700; font-size: .92rem; color: var(--hs-petrol); }
.rf-card__more i { font-size: .8rem; margin-left: 4px; transition: transform .2s; }
.rf-card:hover .rf-card__more i { transform: translateX(4px); }

/* --- Referenz-Kacheln (frühere Projekte) v2 ------------------------------------ */
.rf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rf-tile { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--hs-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.fn-section:not(.fn-section--alt) .rf-tile { border: 1px solid var(--hs-border); }
.rf-tile:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow); }
.rf-tile__img { aspect-ratio: 16 / 11; padding: 16px 14px 6px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #edf2f5 100%); }
.rf-tile__img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .45s ease; }
.rf-tile:hover .rf-tile__img img { transform: scale(1.05); }
.rf-tile__body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.rf-tile__meta { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--hs-gray); font-weight: 600; line-height: 1.3; }
.rf-tile__meta b { flex: none; background: rgba(59, 134, 134, .12); color: var(--hs-turq); border-radius: 999px; padding: 2px 9px; font-weight: 800; }
.rf-tile__body h3 { font-size: .98rem; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-tile__link { color: var(--hs-heading); text-decoration: none; }
.rf-tile__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.rf-tile:has(.rf-tile__link:focus-visible) { outline: 3px solid var(--hs-mint); outline-offset: 3px; }
.rf-tile__link:focus-visible { outline: none; }
.rf-tile__arrow { position: absolute; z-index: 1; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: var(--hs-petrol); color: #fff; display: grid; place-items: center; font-size: .78rem; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.rf-tile:hover .rf-tile__arrow { opacity: 1; transform: none; }
/* Abschluss-Kachel der früheren Projekte (06.10.2026): füllt die letzte Reihe, Spannweite je Spaltenzahl per --sp4/--sp3/--sp2 aus render.php */
.rf-heute { grid-column: span var(--sp4, 1); position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 24px 22px 22px; border-radius: 20px; background: linear-gradient(145deg, var(--hs-petrol) 0%, #13597a 55%, #2e7c7c 100%); color: #fff; text-decoration: none; box-shadow: var(--hs-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.rf-heute::after { content: ''; position: absolute; right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(121, 219, 154, .12); pointer-events: none; }
.rf-heute:hover,
.rf-heute:focus-visible { transform: translateY(-4px); box-shadow: var(--hs-shadow); color: #fff; }
.rf-heute:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 3px; }
.rf-heute__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: auto; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--hs-mint); font-size: 1.1rem; }
.rf-heute__label { margin-top: 22px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hs-mint); }
.rf-heute__titel { font-size: 1.15rem; line-height: 1.3; color: #fff; }
.rf-heute__text { position: relative; z-index: 1; font-size: .88rem; line-height: 1.55; color: rgba(255, 255, 255, .84); }
.rf-heute__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .9rem; font-weight: 700; color: #fff; }
.rf-heute__link i { transition: transform .25s ease; }
.rf-heute:hover .rf-heute__link i { transform: translateX(4px); }
@media (max-width: 1024px) { .rf-heute { grid-column: span var(--sp3, 1); } }
@media (max-width: 640px) {
    .rf-heute { grid-column: span var(--sp2, 1); padding: 16px 14px; border-radius: 16px; }
    .rf-heute__icon { width: 38px; height: 38px; font-size: .95rem; }
    .rf-heute__label { margin-top: 14px; font-size: .66rem; }
    .rf-heute__titel { font-size: .95rem; }
    .rf-heute__text { display: none; }
    .rf-heute__link { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .rf-heute, .rf-heute__link i { transition: none; } .rf-heute:hover { transform: none; } }
.rf-note { max-width: 720px; margin: 28px auto 0; text-align: center; color: var(--hs-gray); font-size: .95rem; line-height: 1.6; }
.rf-empty { padding: 24px; border: 1px dashed var(--hs-border); border-radius: 16px; color: var(--hs-gray); text-align: center; }

/* --- Referenz-Detailseite --------------------------------------------------- */
.rf-single .fn-case { margin-top: 8px; }
.rf-single .fn-case__body { padding-top: 28px; }
.rf-header.post-header { padding: 36px 0 8px; }
.rf-header .post-header-inner { max-width: 1080px; margin: 0; }
.rf-header .post-meta-row { margin-bottom: 12px; }
.rf-header h1 { margin-bottom: 6px; }
.rf-header .post-lead { color: var(--hs-gray); }
.rf-single.fn-section { padding-top: 24px; }
.rf-single .fn-case { margin-top: 0; }
.rf-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; position: relative; }
.rf-timeline::before { content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--hs-border), var(--hs-turq)); }
.rf-timeline__item { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 0 0 30px; }
.rf-timeline__item:last-child { padding-bottom: 0; }
.rf-timeline__icon { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--hs-border); color: var(--hs-turq); display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.rf-timeline__item.is-result .rf-timeline__icon { background: var(--hs-petrol); border-color: var(--hs-petrol); color: #fff; box-shadow: 0 10px 24px -12px rgba(11, 72, 107, .6); }
.rf-timeline__body { background: #fff; border: 1px solid var(--hs-border); border-radius: 18px; padding: 20px 24px; }
.rf-timeline__item.is-result .rf-timeline__body { border-color: var(--hs-petrol); box-shadow: var(--hs-shadow-sm); }
.rf-timeline__body h3 { font-size: 1.05rem; margin: 0 0 8px; }
.rf-timeline__body p { margin: 0 0 10px; color: var(--hs-text); font-size: .95rem; line-height: 1.65; }
.rf-timeline__body p:last-of-type { margin-bottom: 0; }
.rf-timeline__chip { margin-top: 14px; }
.rf-num { background: rgba(121, 219, 154, .28); color: var(--hs-heading); font-weight: 700; border-radius: 4px; padding: 0 4px; }
.rf-video { max-width: 900px; margin: 0 auto; }
.rf-quote { max-width: 780px; margin: 0 auto; }
.rf-mockup { background: var(--hs-alt); border-radius: var(--hs-r); padding: clamp(20px, 4vw, 48px); margin-bottom: 36px; }
.rf-mockup img { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto; }
.rf-prose { max-width: 760px; margin: 0 auto; }
.rf-prose h2 { font-size: 1.35rem; margin: 28px 0 10px; }
.rf-prose p { line-height: 1.7; color: var(--hs-text); }
.rf-prose .rf-video { margin: 24px 0; }
.rf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.rf-origin { background: var(--hs-alt); border-radius: 18px; padding: 24px 28px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 32px; }
.rf-origin i { color: var(--hs-turq); font-size: 1.3rem; margin-top: 4px; }
.rf-origin p { margin: 0; color: var(--hs-text); line-height: 1.6; }
.rf-origin a { color: var(--hs-petrol); font-weight: 600; }

/* --- Nummerierte Listen im Text-Block (Bestätigungsseiten) --- */
.section-philosophy .prose ol { list-style: decimal; padding-left: 1.4em; }
.section-philosophy .prose ol li { margin-bottom: 8px; padding-left: 4px; }

/* --- Hero im Hochformat (Illustrationen 3:4 auf Unterseiten) ---------------- */
.hero--portrait .hero-visual { aspect-ratio: 3 / 4; max-width: 420px; margin-left: auto; background: transparent; box-shadow: none; border-radius: 0; }
.hero--portrait .hero-visual img { object-fit: contain; object-position: center; }

/* --- Fakten-Karte: Definition („Kurz erklärt“) und Angebot ------------------ */
.fk__card { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 60px); align-items: start; background: var(--hs-alt); border-radius: 28px; padding: clamp(28px, 4.2vw, 56px); position: relative; overflow: hidden; }
.fk__card::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; right: -150px; top: -190px; background: radial-gradient(circle, rgba(121, 219, 154, .22), transparent 70%); pointer-events: none; }
.fk__card > * { position: relative; }
.fn-section--alt .fk__card { background: #fff; box-shadow: var(--hs-shadow-sm); }
.fk__main .section-h2 { margin-bottom: 20px; }
.fk__lead { font-size: clamp(1.1rem, 1.55vw, 1.26rem); line-height: 1.6; color: var(--hs-heading); font-weight: 500; margin: 0 0 20px; padding: 2px 0 2px 22px; border-left: 4px solid var(--hs-mint); }
.fk__lead dfn { font-style: normal; font-weight: 700; color: var(--hs-petrol); }
.fk__text p { color: var(--hs-text); margin: 0 0 14px; line-height: 1.75; }
.fk__text p:last-child { margin-bottom: 0; }
.fk__alias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .84rem; }
.fk__alias span { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; color: var(--hs-turq); margin-right: 4px; }
.fk__alias em { font-style: normal; background: #fff; border: 1px solid var(--hs-border); border-radius: 999px; padding: 4px 12px; color: var(--hs-heading); font-weight: 600; }
.fn-section--alt .fk__alias em { background: var(--hs-alt); }
.fk__panel { background: #fff; border-radius: 20px; padding: 26px 26px 24px; box-shadow: var(--hs-shadow-sm); }
.fn-section--alt .fk__panel { background: var(--hs-alt); box-shadow: none; }
.fk__panel-title { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--hs-turq); margin: 0 0 16px; font-weight: 700; }
.fk__panel-title--muted { color: var(--hs-gray); margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hs-border); }
.fk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fk__list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; font-size: .92rem; line-height: 1.55; color: var(--hs-gray); }
.fk__list strong { display: block; color: var(--hs-heading); font-size: .98rem; margin-bottom: 2px; }
.fk__icon { width: 38px; height: 38px; border-radius: 12px; background: rgba(121, 219, 154, .22); color: var(--hs-petrol); display: grid; place-items: center; font-size: .9rem; }
.fk__list--muted { gap: 10px; }
.fk__list--muted li { grid-template-columns: 26px minmax(0, 1fr); align-items: center; color: var(--hs-gray); }
.fk__list--muted .fk__icon { width: 26px; height: 26px; border-radius: 50%; background: #eceef1; color: var(--hs-gray); font-size: .66rem; }
.fk--angebot .fk__list li { align-items: center; }
.fk--angebot .fk__list strong { margin-bottom: 0; }
.fk__price { display: inline-flex; flex-direction: column; gap: 4px; margin: 24px 0 0; padding: 18px 22px; background: #fff; border-radius: 16px; border: 1px solid var(--hs-border); box-shadow: var(--hs-shadow-sm); }
.fn-section--alt .fk__price { background: var(--hs-alt); box-shadow: none; }
.fk__price strong { font-size: 1.45rem; line-height: 1.2; color: var(--hs-petrol); }
.fk__price span { font-size: .9rem; color: var(--hs-gray); }
.fk__cta { margin: 24px 0 0; }
@media (max-width: 900px) { .fk__card { grid-template-columns: minmax(0, 1fr); } }

/* --- Kundenstimmen-Wand (Referenzen) ------------------------------------------ */
.ts-wall__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 6px 0 28px; }
.ts-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; background: #fff; border: 1px solid var(--hs-border); border-radius: 999px; padding: 7px 18px 7px 8px; font-size: .88rem; color: var(--hs-gray); box-shadow: var(--hs-shadow-sm); }
.ts-badge__g { width: 30px; height: 30px; border-radius: 50%; background: #fff7e0; display: grid; place-items: center; color: #f5b301; font-size: .8rem; }
.ts-badge strong { font-size: 1.02rem; color: var(--hs-heading); }
.ts-badge__stars { color: #f5b301; font-size: .78rem; display: inline-flex; gap: 2px; }
.ts-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #e9eef2; border-radius: 999px; padding: 5px; }
.ts-filter button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .88rem; color: var(--hs-gray); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.ts-filter button span { font-weight: 700; font-size: .78rem; color: var(--hs-faded); margin-left: 4px; }
.ts-filter button:hover { color: var(--hs-heading); }
.ts-filter button.is-active { background: #fff; color: var(--hs-petrol); box-shadow: 0 6px 16px -10px rgba(11, 72, 107, .6); }
.ts-filter button.is-active span { color: var(--hs-turq); }
.ts-filter button:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 2px; }
.ts-wall__grid { columns: 3 300px; column-gap: 22px; }
.ts-card { display: block; break-inside: avoid; margin: 0 0 22px; background: #fff; border-radius: 20px; padding: 22px 24px 20px; box-shadow: var(--hs-shadow-sm); border: 1px solid var(--hs-border); animation: ts-in .4s ease both; }
.fn-section--alt .ts-card { border-color: transparent; }
@keyframes ts-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ts-card__q { display: block; color: var(--hs-mint); font-size: 1.25rem; }
.ts-card__text { margin: 10px 0 0; padding: 0; border: 0; }
.ts-card__text p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--hs-text); }
.ts-card__text p.is-clamped { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.ts-card__more { display: inline-block; border: 0; background: none; padding: 0; margin: 8px 0 0; font: inherit; font-weight: 700; font-size: .86rem; color: var(--hs-petrol); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 72, 107, .3); }
.ts-card__more:hover { text-decoration-color: currentColor; }
.ts-card__who { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--hs-border); }
.ts-card__avatar, .ts-card__ini { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ts-card__ini { display: grid; place-items: center; font-weight: 800; font-size: .86rem; letter-spacing: .02em; color: #fff; background: var(--c, var(--hs-turq)); }
.ts-card__who strong { display: block; color: var(--hs-heading); font-size: .95rem; line-height: 1.3; }
.ts-card__who strong a { color: inherit; text-decoration: none; }
.ts-card__who strong a:hover { color: var(--hs-petrol); }
.ts-card__who small { display: block; color: var(--hs-gray); font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.ts-wall__foot { text-align: center; margin: 12px 0 0; }
.ts-wall .fn-center { margin-top: 28px; }

/* --- Sektionsrhythmus: gleiche Flächen hintereinander nicht doppelt polstern -- */
.fn-section--alt + .fn-section--alt { padding-top: 0; }
/* Prozess-Kachel (tight) nach einer grauen Fläche braucht normalen Abstand nach oben. */
.fn-section--alt + .fn-section--tight { padding-top: clamp(48px, 6vw, 72px); }
.sk-testimonials + .fn-section--alt { padding-top: clamp(48px, 6vw, 72px); }
.sk-testimonials { padding-bottom: clamp(48px, 6vw, 72px); }
/* Prozess-Kachel: auf der Startseite folgt sie dem Text+Foto-Block ohne Abstand (Kachel liegt im Weißraum);
   folgt sie direkt der Leiste (Akquiseguide) oder einem Split, bekommt sie normalen Abstand. */
.section-trust + .fn-section--tight,
.lp-split + .fn-section--tight { padding-top: clamp(48px, 6vw, 72px); }
.fn-section--tight + .section-philosophy { padding-top: clamp(40px, 5vw, 64px); }
.section-philosophy + .fn-section--alt { padding-top: clamp(40px, 5vw, 64px); }
.section-philosophy + .sk-testimonials { padding-top: clamp(40px, 5vw, 64px); }

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .rf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rf-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .cal-grid { grid-template-columns: 1fr; }
    .cal-widget { position: static; }
    .rf-results { grid-template-columns: 1fr; }
    .hero--portrait .hero-visual { margin: 0 auto; }
}
@media (max-width: 640px) {
    .rf-grid { grid-template-columns: 1fr; gap: 22px; }
    .rf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .rf-tile { border-radius: 16px; }
    .rf-tile__img { padding: 10px 8px 4px; }
    .rf-tile__body { padding: 10px 12px 14px; gap: 6px; }
    .rf-tile__body h3 { font-size: .88rem; }
    .rf-tile__meta { font-size: .7rem; flex-wrap: wrap; gap: 4px 6px; }
    .rf-tile__arrow { display: none; }
    .pk__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
    .pk__kpi { padding: 14px 12px; }
    .ts-wall__bar { justify-content: center; }
    .ts-filter { flex-wrap: nowrap; }
    .ts-filter button { padding: 8px 11px; font-size: .82rem; white-space: nowrap; }
    .ts-badge__src { display: none; }
    .ts-card { padding: 20px 20px 18px; }
    .rf-origin { grid-template-columns: 1fr; gap: 8px; }
    .rf-timeline::before { left: 17px; }
    .rf-timeline__item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
    .rf-timeline__icon { width: 36px; height: 36px; font-size: .9rem; }
    .rf-timeline__body { padding: 16px 16px; }
    .kmp-consent__inner { padding: 24px 18px; }
    .kmp-consent--calendly:not(.is-active) { min-height: 360px; }
    .kmp-consent__calendly { min-height: 900px; }
}

/* Blog und Podcast: nummerierte Listen im Inhalt (das globale Listen-Reset in main.css nimmt die Zahlen weg) */
.post-body > ol { counter-reset: sk-ol; padding-left: 0; }
.post-body > ol > li { position: relative; padding-left: 30px; counter-increment: sk-ol; }
.post-body > ol > li::before { content: counter(sk-ol) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* =============================================================================
   FORMULAR: Block „formular" (Formular-Karte, z. B. Drei-Minuten-Marketing #anmeldung)
   ============================================================================= */
.fo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fo__lead { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.7; color: var(--color-text-faded); }
.fo__punkte { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.fo__punkte li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; color: var(--color-heading); }
.fo__punkte i { margin-top: 4px; color: #3b8686; }
.fo__karte { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--color-border); border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -30px rgba(11, 72, 107, .5); }
.fn-section--alt .fo__karte { border-color: transparent; }
.fo__karte-titel { margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; color: var(--color-heading); }
.fo__karte .ff-el-group { margin-bottom: 16px; }
.fo__karte .ff-el-input--label label { font-weight: 600; color: var(--color-heading); }
.fo__karte .ff-el-form-control { padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 12px; font-family: inherit; font-size: .98rem; }
.fo__karte .ff-el-form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(121, 219, 154, .35); }
.fo__karte .ff_submit_btn_wrapper .ff-btn-submit { width: 100%; font-family: var(--font-primary) !important; font-size: .95rem !important; font-weight: 700 !important; }
/* Von Live übernommene Formulare bringen eigene Buttonfarben mit (z. B. Türkis bei Form 38): in der Formular-Karte immer Petrol wie alle Buttons */
.fo__karte .ff-btn-submit { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; }
.fo__karte .ff-btn-submit:hover { background: #083650 !important; border-color: #083650 !important; }
.fo__karte .sk-ff-hinweis p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--color-text-faded); }
.fo__karte .ff-message-success { padding: 16px 18px; border: 0; border-radius: 14px; background: rgba(121, 219, 154, .16); box-shadow: none; }
.fo__hinweis { display: flex; gap: 8px; margin: 14px 0 0; font-size: .82rem; line-height: 1.5; color: var(--color-text-faded); }
.fo__hinweis i { margin-top: 3px; color: #3b8686; }

@media (max-width: 899px) {
    .fo__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Seitenkopf: Sprunglinks ohne Zähler (z. B. Referenzen) */
.pk__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.pk--center .pk__chips { justify-content: center; }
.pk__chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border: 1.5px solid var(--color-border); border-radius: 999px; background: #fff; color: var(--color-heading); font-size: .92rem; font-weight: 600; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
a.pk__chip:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--color-heading); }
.pk__chip-go { font-size: .75rem; color: var(--color-primary); }
.pk__chip--google { border-color: transparent; background: rgba(121, 219, 154, .16); }
.pk__chip--google i { color: #f0a92e; }

/* --- BEITRAG-MEDIEN: Blogbeitrag mit Video, Umschalter „Bild | Video ansehen“ (single.php, inc/beitrag-video.php) --- */
.post-medien__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.post-medien__hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .92rem; color: var(--hs-gray); }
.post-medien__hint i { color: var(--hs-turq); }
.post-medien__pane { position: relative; }
.post-medien__play { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: -39px 0 0 -39px; padding: 0 0 0 5px; border: 0; border-radius: 50%; background: #fff; color: var(--hs-petrol); font-size: 1.5rem; box-shadow: 0 18px 40px -16px rgba(11, 72, 107, .6); cursor: pointer; transition: transform .25s ease, background-color .25s ease; }
.post-medien__play:hover { background: var(--hs-mint); transform: scale(1.06); }
.post-medien__play:focus-visible { outline: 3px solid var(--hs-mint); outline-offset: 3px; }
.post-medien__video.kmp-consent { border-radius: 10px; }
/* Geladenes Video mit festem Seitenverhältnis braucht die Mindesthöhe des Platzhalters nicht mehr (sonst Balken auf dem Handy) */
.kmp-consent.is-active[style*="aspect-ratio"] { min-height: 0; }
@media (max-width: 640px) {
    .post-medien__bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .post-medien__hint { justify-content: center; font-size: .88rem; }
    .post-medien__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; padding-left: 4px; font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .post-medien__play, .post-medien__seg .hs-seg__thumb { transition: none; }
}

/* --- KUNDENSEITEN mit Formular (/kb/…, tools/snip-kundenseiten-formulare.php) --- */
.kb-formular .container { max-width: 860px; }
.kb-formular__karte { padding: clamp(22px, 3.2vw, 40px); border: 1px solid var(--color-border); border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -30px rgba(11, 72, 107, .5); }
.kb-formular__karte .ff-el-input--label label { font-weight: 600; color: var(--color-heading); }
.kb-formular__karte .ff-el-form-control { padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 12px; font-family: inherit; font-size: .98rem; }
.kb-formular__karte .ff-el-form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(121, 219, 154, .35); }
.kb-formular__karte .ff-btn-submit { background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important; font-family: var(--font-primary) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; }
.kb-formular__karte .ff-btn-submit:hover { background: #083650 !important; border-color: #083650 !important; }
.kb-formular__karte .ff-message-success { padding: 16px 18px; border: 0; border-radius: 14px; background: rgba(121, 219, 154, .16); box-shadow: none; }
/* Mehrschrittige Formulare (z. B. Strategie-Fragebogen): Fortschritt und Weiter/Zurück im Theme-Stil */
.kb-formular__karte .ff-el-progress { height: 8px; border-radius: 999px; background: #eef1f3; overflow: hidden; }
.kb-formular__karte .ff-el-progress-bar { background: var(--color-primary) !important; border-radius: 999px; }
.kb-formular__karte .ff-el-progress-bar span, .kb-formular__karte .ff-el-progress-status { display: none; }
.kb-formular__karte .step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.kb-formular__karte .ff-btn-next, .kb-formular__karte .ff-btn-prev { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px !important; border: 1.5px solid var(--color-primary) !important; border-radius: 999px !important; background: #fff !important; color: var(--color-primary) !important; font-family: var(--font-primary) !important; font-size: .92rem !important; font-weight: 700 !important; cursor: pointer; }
.kb-formular__karte .ff-btn-next { margin-left: auto; background: var(--color-primary) !important; color: #fff !important; }
.kb-formular__karte .ff-btn-next:hover, .kb-formular__karte .ff-btn-prev:hover { opacity: .88; }
/* Dialog-Formulare (conversational): Karte ohne Innenabstand, Formular nutzt die volle Breite */
.kb-formular--conv .kb-formular__karte { padding: 0; overflow: hidden; }
.kb-formular--conv .ff_conv_app_container,
.kb-formular--conv .fluentform-conversational-container { border-radius: 0 !important; box-shadow: none !important; }
.kb-formular--conv .ff_conv_app_frame .vff.vff_layout_default .f-container { max-width: 100% !important; padding-left: clamp(20px, 5vw, 64px) !important; padding-right: clamp(20px, 5vw, 64px) !important; }
.kb-formular--conv .ff_conv_app_frame .vff ul.f-radios { max-width: 100% !important; }
/* Seit 30.09.2026 liegen Kopf und Formular auf einer grauen Fläche (fn-section--alt): Dialog-Formular deshalb weiß wie die Karten */
.kb-formular--conv .ff_conv_app,
.kb-formular--conv .ff_conv_app_frame { background-color: #fff !important; }
/* Terminseite für Kunden (/kb/kundentermin/, tools/snip-kundentermin.php): Calendly-Termine als Karten, öffnen in neuem Tab */
.kb-termine .container { max-width: 960px; }
.kb-termine__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kb-termine__karte { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px 24px 22px; border: 1px solid var(--color-border); border-radius: 22px; background: #fff; color: var(--color-heading); text-decoration: none; box-shadow: 0 24px 48px -34px rgba(11, 72, 107, .45); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.kb-termine__karte:hover,
.kb-termine__karte:focus-visible { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 28px 52px -30px rgba(11, 72, 107, .55); color: var(--color-heading); }
.kb-termine__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(121, 219, 154, .18); color: var(--color-primary); font-size: 1.1rem; }
.kb-termine__titel { font-size: 1.12rem; font-weight: 700; line-height: 1.35; }
.kb-termine__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; font-size: .95rem; font-weight: 700; color: var(--color-primary); }
.kb-termine__link i { transition: transform .2s ease; }
.kb-termine__karte:hover .kb-termine__link i { transform: translateX(3px); }
.kb-termine__hinweis { max-width: 640px; margin: 28px auto 0; text-align: center; color: var(--color-text); }
/* Varianten für die übernommenen Live-Seiten (tools/snip-live-seiten.php): zwei Karten, Karte mit Text und mehreren Links */
.kb-termine__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
.kb-termine__text { margin: -4px 0 0; font-size: .95rem; line-height: 1.55; color: var(--color-text); }
.kb-termine__karte--info:hover { transform: none; border-color: var(--color-border); box-shadow: 0 24px 48px -34px rgba(11, 72, 107, .45); }
.kb-termine__aktionen { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; }
.kb-termine__aktionen .kb-termine__link { margin-top: 0; text-decoration: none; }
.kb-termine__aktionen .kb-termine__link:hover i { transform: translateX(3px); }
@media (max-width: 800px) {
    .kb-termine__grid, .kb-termine__grid--2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .kb-termine__karte, .kb-termine__link i { transition: none; }
    .kb-termine__karte:hover, .kb-termine__karte:hover .kb-termine__link i { transform: none; }
}

/* --- DMM-BOX: Anmeldung Drei-Minuten-Marketing (template-parts/dmm-box.php): Box am Beitragsende, Leiste im Footer --- */
/* Blogbeitrag: Box nach der Autorenbox (single.php, seit 06.10.2026), gleiche Breite wie Text und Autor */
.post-dmm-section { padding: 0 0 8px; }
.post-dmm-inner { max-width: 700px; margin: 0 auto; }
.post-dmm-inner .dmm-box--box { margin-top: 0; }
.dmm-box--box { margin: 44px 0 0; padding: clamp(22px, 3vw, 30px); border-radius: 22px; background: rgba(121, 219, 154, .14); }
.dmm-box__label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px !important; font-size: .74rem !important; font-weight: 800; letter-spacing: .08em; line-height: 1.4 !important; text-transform: uppercase; color: #1f6b44 !important; }
.dmm-box__label a { color: inherit !important; text-decoration: none !important; }
.dmm-box__label a:hover { text-decoration: underline !important; }
.dmm-box__titel { margin: 0 !important; font-size: 1.25rem !important; font-weight: 800; line-height: 1.3 !important; color: var(--color-heading) !important; }
.dmm-box__beschreibung { margin: 8px 0 0 !important; font-size: .98rem !important; line-height: 1.6 !important; color: var(--color-text); }
.dmm-box__form { margin-top: 18px; }
.dmm-box .frm-fluent-form fieldset { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.dmm-box .frm-fluent-form .ff-el-group { margin: 0; }
.dmm-box .frm-fluent-form .ff-el-group:not(.ff_submit_btn_wrapper):not(.ff-hpsf-container) { flex: 1 1 200px; }
.dmm-box .ff-el-input--label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.dmm-box .ff-el-form-control { height: 50px !important; padding: 12px 18px !important; border: 1.5px solid var(--color-border) !important; border-radius: 999px !important; background: #fff !important; font-family: inherit; font-size: .98rem; }
.dmm-box .ff-el-form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(121, 219, 154, .35); }
.dmm-box .ff_submit_btn_wrapper { flex: 0 0 auto; }
.dmm-box .ff-btn-submit { box-sizing: border-box; min-height: 50px; padding: 6px 52px 6px 24px !important; font-family: var(--font-primary) !important; font-weight: 700 !important; white-space: nowrap; }
.dmm-box .ff-message-success { margin: 0; padding: 14px 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: none; }
.dmm-box__hinweis { margin: 10px 0 0 !important; font-size: .8rem !important; line-height: 1.5 !important; color: var(--color-text-faded) !important; }
.dmm-box__hinweis a { color: inherit !important; text-decoration: underline; }
.dmm-box--leiste { padding: 34px 0; background: rgba(121, 219, 154, .14); }
/* 30.09.2026 (Sebastian, Variante C): Mint wie die Box am Beitragsende (.dmm-box--box), so ist Drei-Minuten-Marketing überall gleich erkennbar
   und hebt sich unter grauen, weißen und Petrol-Abschnitten ohne Linien ab. Vorher #f5f7f8 direkt unter #f5f5f5, zwei fast gleiche Grautöne */
.dmm-box--leiste .dmm-box__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px 48px; align-items: center; }
.dmm-box--leiste .dmm-box__titel { font-size: 1.1rem !important; }
.dmm-box--leiste .dmm-box__form { margin: 0; }
@media (max-width: 900px) {
    .dmm-box--leiste .dmm-box__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .dmm-box .ff_submit_btn_wrapper { flex: 1 1 100%; min-width: 0; }
    .dmm-box .ff-btn-submit { width: 100%; padding: 6px 56px 6px 18px !important; font-size: .9rem !important; white-space: normal !important; line-height: 1.25; }
}

/* --- WEBINAR-AUFZEICHNUNG (/webinar/webinar-aufzeichnung/, tools/snip-webinar.php): Video mittig, Hinweis und Folien darunter --- */
.webinar-video .container { max-width: 960px; }
.webinar-video__player { border-radius: 18px; overflow: hidden; box-shadow: 0 24px 48px -30px rgba(11, 72, 107, .5); }
.webinar-video__hinweis { margin: 20px 0 0; text-align: center; color: var(--color-text-faded); }
.webinar-video__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 18px; }
/* Eigene Videos (Materialseiten /cc/…): HTML5-Video ohne Drittanbieter, lädt erst beim Abspielen */
.webinar-video__player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b2233; }

/* --- INHALTE-ÜBERSICHT (/inhalte/, blocks/inhalte, 06.10.2026): drei gleich große Format-Karten, darunter je Format die
   neuesten Inhalte. Podcast-Karten aus podcast.css, Ausgabe-Karte (na-neu) aus dmm.css, beides lädt inc/blocks-inhalte.php. --- */
.inh-kopf__text { max-width: 820px; margin: 0 auto; text-align: center; }
.inh-kopf__text .section-label { justify-content: center; }
.inh-kopf__titel { margin: 12px 0 0; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.1; color: var(--color-heading); }
.inh-kopf__intro { max-width: 640px; margin: 18px auto 0; font-size: 1.1rem; line-height: 1.7; color: var(--color-text-faded); }
.inh-formate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1120px; margin: 48px auto 0; }
.inh-format { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 22px; border: 1px solid var(--color-border); border-radius: 22px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 24px 48px -36px rgba(11, 72, 107, .5); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.inh-format:hover,
.inh-format:focus-visible { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: 0 28px 52px -30px rgba(11, 72, 107, .55); color: inherit; }
.inh-format__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px; border-radius: 50%; background: rgba(121, 219, 154, .22); color: var(--color-primary); font-size: 1.3rem; }
.inh-format__nr { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3b8686; }
.inh-format__titel { font-size: 1.25rem; line-height: 1.3; color: var(--color-heading); }
.inh-format__text { font-size: .95rem; line-height: 1.6; color: var(--color-text-faded); }
.inh-format__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: .9rem; font-weight: 700; color: var(--color-primary); }
.inh-format__fuss i { transition: transform .2s ease; }
.inh-format:hover .inh-format__fuss i { transform: translateY(3px); }
.inh-teil { scroll-margin-top: 90px; }
.inh-teil__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 30px; }
.inh-teil__kopf .section-h2 { margin: 8px 0 0; }
.inh-teil__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.inh-teil__aktionen .pc-abos { margin: 0; }
/* Drei-Minuten-Marketing (06.10.2026, zweite Runde): neueste Ausgabe als breite Karte, darunter die Anmeldung als Mint-Streifen wie
   Footer-Leiste und Box am Beitragsende. Nebeneinander wirkte die Anmeldung trotz gleicher Maße größer als die Ausgabe. */
.inh-dmm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.inh-dmm .na-neu { max-width: none; margin: 0; }
.inh-dmm .dmm-box--box { margin: 0; padding: clamp(22px, 3vw, 32px) clamp(22px, 3.4vw, 40px); }
.inh-dmm .dmm-box--box .dmm-box__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px 48px; align-items: center; }
.inh-dmm .dmm-box--box .dmm-box__form { margin: 0; }
@media (max-width: 900px) {
    .inh-formate { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .inh-dmm .dmm-box--box .dmm-box__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .inh-format, .inh-format__fuss i { transition: none; }
    .inh-format:hover { transform: none; }
}

/* KONTAKT: Anker #formular für den CTA „Erstgespräch vereinbaren“ (06.10.2026, /termin/ mit der Kontaktseite zusammengelegt) */
.kontakt-form-wrap { scroll-margin-top: 110px; }

/* Rechtstexte (Impressum, Datenschutz, AGB): h4 erbte die globale Größe 1.5rem und war größer als h3 (16px), z. B. „Rechtsgrundlage“
   unter „Versand über Brevo“ (07.10.2026). Jetzt kleiner als h3, gleiche Schrift. */
.legal-content .entry-content h4 { margin: 22px 0 6px; font-size: .95rem; font-weight: 700; line-height: 1.4; letter-spacing: 0; color: var(--color-heading); }