/* ==========================================================================
   apron:pilot – ap.css
   Designsystem v1 (Claude Design: „apron:pilot Website-Relaunch“) für
   Kadence + Core-Blöcke. Alle Klassen beginnen mit ap-.
   Icons: assets/css/ap-icons.css (generiert).
   ========================================================================== */

/* 1. Schrift (lokal, DSGVO) ---------------------------------------------- */
@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url(../fonts/rubik-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url(../fonts/rubik-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
	--ap-p: #27835a;      /* Primary                          */
	--ap-p-d: #1d6a48;    /* Primary dunkel: Hover, Links     */
	--ap-p-dd: #185c3e;   /* Text auf Tint                    */
	--ap-dk: #343a40;     /* Text, Dark-Sektion               */
	--ap-tx2: #4a5259;    /* Lead, Sekundärtext               */
	--ap-mut: #5c656d;    /* Meta, Small                      */
	--ap-bd: #c9d3d8;     /* Rahmen                           */
	--ap-bd-in: #7d878f;  /* Input-Rahmen                     */
	--ap-lt: #e9eef0;     /* Light-Sektion                    */
	--ap-sf: #f4f7f8;     /* Surface                          */
	--ap-mint: #a8e0c4;   /* Akzent auf Dunkel                */
	--ap-tint: #e3f1ea;   /* Icon-Kachel, Badge Verrechnung   */
	--ap-warn: #8a5300; --ap-warn-bg: #fdf1dc;
	--ap-err: #b42318;  --ap-err-bg: #fde8e6;
	--ap-r-sm: 6px; --ap-r-md: 8px; --ap-r-lg: 16px; --ap-r-xl: 24px;
	--ap-sh-sm: 0 1px 2px rgba(52, 58, 64, .08);
	--ap-sh-md: 0 4px 16px rgba(52, 58, 64, .08);
	--ap-sh-lg: 0 16px 40px rgba(52, 58, 64, .14);
	--ap-gutter: clamp(16px, 4vw, 32px);
	--ap-sec: clamp(56px, 7vw, 96px);
	--ap-font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ap-header-h: 72px;

	/* Kadence-Variablen auf das Designsystem setzen */
	--global-body-font-family: var(--ap-font);
	--global-heading-font-family: var(--ap-font);
	--global-primary-nav-font-family: var(--ap-font);
}

/* 3. Basis ---------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--ap-header-h) + 16px); }
body {
	font-family: var(--ap-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ap-dk);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--ap-font); color: inherit; }
.ap-main { overflow-x: clip; }
:is(.ap-main, .editor-styles-wrapper) *, :is(.ap-main, .editor-styles-wrapper) *::before, :is(.ap-main, .editor-styles-wrapper) *::after { box-sizing: border-box; }
:is(.ap-main, .editor-styles-wrapper) h1, :is(.ap-main, .editor-styles-wrapper) h2, :is(.ap-main, .editor-styles-wrapper) h3, :is(.ap-main, .editor-styles-wrapper) h4, :is(.ap-main, .editor-styles-wrapper) h5, :is(.ap-main, .editor-styles-wrapper) h6, :is(.ap-main, .editor-styles-wrapper) p, :is(.ap-main, .editor-styles-wrapper) figure, :is(.ap-main, .editor-styles-wrapper) blockquote { margin: 0; }
:is(.ap-main, .editor-styles-wrapper) h1, :is(.ap-main, .editor-styles-wrapper) h2, :is(.ap-main, .editor-styles-wrapper) h3, :is(.ap-main, .editor-styles-wrapper) h4 { hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
:is(.ap-main, .editor-styles-wrapper) ul, :is(.ap-main, .editor-styles-wrapper) ol { margin: 0; padding: 0; list-style: none; }
/* Abstände der Core-Layouts neutralisieren – Abstände kommen aus gap */
:is(.ap-main, .editor-styles-wrapper) .wp-block-group > *, :is(.ap-main, .editor-styles-wrapper) .wp-block-buttons > *, :is(.ap-main, .editor-styles-wrapper) .wp-block-details > * { margin-block-start: 0; margin-block-end: 0; }
:is(.ap-main, .editor-styles-wrapper) a { color: var(--ap-p-d); text-underline-offset: 3px; }
:is(.ap-main, .editor-styles-wrapper) a:hover { color: var(--ap-p-dd); }
/* Block-Editor: Seitentitel wie der Inhalt einrücken */
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper { max-width: 1264px; margin: 0 auto; padding: 24px var(--ap-gutter) 0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ap-p-d); outline-offset: 2px; border-radius: 4px; }
.ap-bg-dk :focus-visible, .ap-bg-p :focus-visible, .ap-ftr :focus-visible { outline-color: #fff; }
.ap-sr, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 4. Typografie ----------------------------------------------------------- */
.ap-h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.ap-h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.ap-h3 { font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.ap-h4 { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); font-weight: 500; line-height: 1.3; }
.ap-h5 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.ap-eyebrow { font-size: .875rem; font-weight: 600; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ap-p-d); }
.ap-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--ap-tx2); }
.ap-small { font-size: .875rem; line-height: 1.5; color: var(--ap-mut); }
.ap-xs { font-size: .75rem; line-height: 1.5; color: var(--ap-mut); }
.ap-label { font-size: .875rem; font-weight: 500; line-height: 1.4; }
.ap-tx2 { color: var(--ap-tx2); }
.ap-mw { max-width: 720px; }
.ap-mw-s { max-width: 560px; }
.ap-center { text-align: center; }
:is(.ap-main, .editor-styles-wrapper) strong, :is(.ap-main, .editor-styles-wrapper) b { font-weight: 600; }

/* 5. Sektionen & Layout ---------------------------------------------------- */
.ap-sec { padding-top: var(--ap-sec); padding-bottom: var(--ap-sec); }
.ap-sec-m { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); }
.ap-pt-0 { padding-top: 0 !important; }
.ap-pt-s { padding-top: 16px !important; }
.ap-pt-m { padding-top: clamp(40px, 5vw, 72px) !important; }
.ap-pb-0 { padding-bottom: 0 !important; }
.ap-pb-s { padding-bottom: 32px !important; }
.ap-pb-m { padding-bottom: 40px !important; }
.ap-pb-l { padding-bottom: 64px !important; }
.ap-wrap { width: 100%; max-width: 1264px; margin-left: auto; margin-right: auto; padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }
.ap-wrap-n { max-width: 880px; }
.ap-wrap-m { max-width: 1080px; }
.ap-bg-lt { background: var(--ap-lt); }
.ap-bg-sf { background: var(--ap-sf); }
.ap-bg-dk { background: var(--ap-dk); color: #fff; }
.ap-bg-p { background: var(--ap-p); color: #fff; }
.ap-bg-dk .ap-eyebrow { color: var(--ap-mint); }
.ap-bg-p .ap-eyebrow { color: #fff; }
.ap-bg-dk .ap-lead, .ap-bg-dk .ap-tx2 { color: #dfe5e8; }
.ap-bg-p .ap-lead, .ap-bg-p .ap-tx2 { color: #fff; }
.ap-bg-dk a:not(.wp-block-button__link) { color: var(--ap-mint); }
.ap-bg-p a:not(.wp-block-button__link) { color: #fff; }
.ap-line-y { border-top: 1px solid var(--ap-lt); border-bottom: 1px solid var(--ap-lt); }
.ap-line-b { border-bottom: 1px solid var(--ap-lt); }

.ap-hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: var(--ap-sec); background: linear-gradient(#fff 70%, var(--ap-lt) 70%); }
.ap-phero { padding-top: clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }
.ap-phero.ap-split-bg { background: linear-gradient(#fff 72%, var(--ap-lt) 72%); }
.ap-lhero { padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 4vw, 48px); background: var(--ap-sf); border-bottom: 1px solid var(--ap-lt); }

.ap-stack { display: flex; flex-direction: column; gap: 16px; }
.ap-stack-s { display: flex; flex-direction: column; gap: 8px; }
.ap-stack-m { display: flex; flex-direction: column; gap: 24px; }
.ap-stack-l { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.ap-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-row-m { gap: 8px 24px; }
.ap-row-between { justify-content: space-between; gap: 16px; }
.ap-head { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); }
.ap-head.ap-c { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.ap-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.ap-head-row > .ap-head { margin-bottom: 0; }
.ap-mt-s { margin-top: 8px !important; }
.ap-mt-m { margin-top: 24px !important; }
.ap-mt-l { margin-top: 40px !important; }
.ap-push { margin-top: auto !important; }
.ap-self-start { align-self: flex-start; }

.ap-g2, .ap-g3, .ap-g4 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.ap-g4.ap-m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ap-hero-g, .ap-story-g, .ap-news-g, .ap-split, .ap-faq-g, .ap-ct-g, .ap-art-g, .ap-steps, .ap-tiers, .ap-f2 { display: grid; grid-template-columns: minmax(0, 1fr); }
.ap-hero-g { gap: 48px; align-items: center; }
.ap-story-g { gap: 40px; align-items: center; }
.ap-news-g { gap: 40px; }
.ap-split { gap: 40px; align-items: center; }
.ap-faq-g { gap: 32px; }
.ap-ct-g { gap: 40px; align-items: start; }
.ap-art-g { gap: 40px; }
.ap-steps { gap: 24px; counter-reset: ap-step; }
.ap-tiers { gap: 24px; align-items: stretch; }
.ap-f2 { gap: 20px; }

@media (min-width: 700px) {
	.ap-g2, .ap-g3, .ap-g4, .ap-f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ap-tiers.ap-t4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.ap-story-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
	.ap-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
	.ap-split.ap-rev > :first-child { order: 2; }
	.ap-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ap-tiers:not(.ap-t4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.ap-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ap-g4, .ap-g4.ap-m2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.ap-hero-g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; }
	.ap-news-g { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; }
	.ap-faq-g { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
	.ap-ct-g { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
	.ap-art-g { grid-template-columns: 240px minmax(0, 1fr); gap: 72px; }
	.ap-art-g.ap-art-r { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (min-width: 1100px) {
	.ap-tiers.ap-t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ap-items-start { align-items: start !important; }
.ap-items-center { align-items: center !important; }

/* 6. Buttons (Block-Stile is-style-ap-*) ------------------------------------ */
.ap-btns, .wp-block-buttons.ap-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ap-btns.ap-c { justify-content: center; }
:is(.ap-main, .editor-styles-wrapper) .wp-block-button .wp-block-button__link,
.ap-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 24px; border-radius: var(--ap-r-md);
	font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
	text-decoration: none; text-transform: none; white-space: nowrap;
	border: 2px solid transparent; box-shadow: none; cursor: pointer;
	background: var(--ap-p); color: #fff;
	transition: background-color .15s, border-color .15s, color .15s;
}
:is(.ap-main, .editor-styles-wrapper) .wp-block-button .wp-block-button__link:hover, .ap-btn:hover { background: var(--ap-p-d); color: #fff; }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-s .wp-block-button__link, .ap-btn-s { background: #fff; color: var(--ap-p-d); border-color: var(--ap-p); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-s .wp-block-button__link:hover, .ap-btn-s:hover { background: var(--ap-tint); color: var(--ap-p-d); border-color: var(--ap-p-d); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-g .wp-block-button__link, .ap-btn-g { background: transparent; color: var(--ap-dk); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-g .wp-block-button__link:hover, .ap-btn-g:hover { background: var(--ap-lt); color: var(--ap-dk); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-w .wp-block-button__link, .ap-btn-w { background: #fff; color: var(--ap-p-dd); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-w .wp-block-button__link:hover, .ap-btn-w:hover { background: var(--ap-tint); color: var(--ap-p-dd); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-gw .wp-block-button__link, .ap-btn-gw { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
:is(.ap-main, .editor-styles-wrapper) .is-style-ap-gw .wp-block-button__link:hover, .ap-btn-gw:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }
:is(.ap-main, .editor-styles-wrapper) .ap-lg .wp-block-button__link, .ap-btn-lg { min-height: 56px; padding: 0 32px; font-size: 1.0625rem; }
:is(.ap-main, .editor-styles-wrapper) .ap-sm .wp-block-button__link, .ap-btn-sm { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
:is(.ap-main, .editor-styles-wrapper) .ap-full, :is(.ap-main, .editor-styles-wrapper) .ap-full .wp-block-button__link { width: 100%; }
:is(.ap-main, .editor-styles-wrapper) .wp-block-button.ap-push { margin-top: auto; }
:is(.ap-main, .editor-styles-wrapper) .wp-block-button.ap-push .wp-block-button__link, .ap-tiers .ap-card .wp-block-button .wp-block-button__link { width: 100%; }
.ap-tiers .ap-card > .wp-block-buttons { margin-top: auto; }
/* Textlink über dem Button: Link wandert nach unten, Button folgt direkt */
.ap-tiers .ap-card > .ap-link { margin-top: auto; }
.ap-tiers .ap-card > .ap-link + .wp-block-buttons { margin-top: 0; }
.ap-tiers .ap-card > .wp-block-buttons .wp-block-button { width: 100%; }
@media (max-width: 479px) {
	.ap-btns .wp-block-button, .ap-btns .wp-block-button__link { width: 100%; }
}
.ap-btn .ap-ico-i, .wp-block-button__link .ap-ico-i { width: 18px; height: 18px; }

/* Textlink mit Pfeil */
.ap-link a, a.ap-link { font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ap-link a::after, a.ap-link::after { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ap-m-arrow) center/contain no-repeat; mask: var(--ap-m-arrow) center/contain no-repeat; }
.ap-link a:hover, a.ap-link:hover { text-decoration: underline; }
.ap-link.ap-c { text-align: center; }

/* 7. Badges ----------------------------------------------------------------- */
.ap-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; width: fit-content; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.ap-b-free { background: #fff; color: var(--ap-dk); box-shadow: inset 0 0 0 1px var(--ap-bd-in); }
.ap-b-prem { background: var(--ap-dk); color: #fff; }
.ap-b-inv { background: var(--ap-tint); color: var(--ap-p-dd); }
.ap-b-train { background: #fff; color: var(--ap-dk); border: 1px dashed var(--ap-bd-in); }
.ap-b-new { background: var(--ap-p); color: #fff; }
.ap-b-imp { background: #fff; color: var(--ap-p-d); box-shadow: inset 0 0 0 1px var(--ap-p); }
.ap-b-fix { background: var(--ap-warn-bg); color: var(--ap-warn); }
.ap-b-mnt { background: var(--ap-lt); color: var(--ap-dk); }
.ap-b-cat { background: var(--ap-lt); color: var(--ap-dk); height: 28px; padding: 0 12px; }
a.ap-badge { text-decoration: none; }
/* Hinweis „30 Tage kostenlos testen“ in Preiskarten */
.ap-trial { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; width: fit-content; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--ap-tint); color: var(--ap-p-dd); font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.ap-trial::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--ap-m-clock) center/contain no-repeat; mask: var(--ap-m-clock) center/contain no-repeat; }
.ap-dot { display: inline-block; width: 10px; height: 10px; padding: 0; border-radius: 50%; flex: none; }
.ap-note { display: inline-block; background: var(--ap-warn-bg); color: var(--ap-warn); font-size: 12px; font-weight: 500; line-height: 1.4; padding: 3px 8px; border-radius: var(--ap-r-sm); }
p.ap-note { width: fit-content; }

/* 8. Karten ------------------------------------------------------------------ */
.ap-card { --ap-pad: 24px; position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--ap-bd); border-radius: var(--ap-r-lg); padding: var(--ap-pad); color: var(--ap-dk); }
.ap-card.ap-flat { border-color: transparent; }
.ap-card.ap-lift { border-color: transparent; box-shadow: var(--ap-sh-md); }
.ap-card.ap-feat { border: 2px solid var(--ap-p); box-shadow: var(--ap-sh-md); }
.ap-card.ap-soon { border: 1px dashed var(--ap-bd-in); background: var(--ap-sf); }
.ap-card.ap-pad-l { --ap-pad: clamp(24px, 4vw, 40px); }
.ap-card.ap-pad-s { --ap-pad: 20px; }
.ap-card.ap-gap-s { gap: 12px; }
.ap-card.ap-gap-m { gap: 16px; }
.ap-card.ap-tint { background: var(--ap-tint); border-color: transparent; }
.ap-card.ap-tint, .ap-card.ap-tint .ap-h4, .ap-card.ap-tint p { color: var(--ap-p-dd); }
/* ganze Karte klickbar: Link in der Überschrift wird über die Karte gestreckt */
.ap-card-link { transition: box-shadow .15s, border-color .15s; }
.ap-card-link a.ap-stretch::after, .ap-card-link .ap-stretch a::after, .ap-card-link :is(h2, h3, h4, h5) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ap-card-link :is(h2, h3, h4, h5) a { color: inherit; text-decoration: none; }
.ap-card-link:hover, .ap-card-link:focus-within { border-color: var(--ap-p); box-shadow: var(--ap-sh-md); }
.ap-card-link:focus-within { outline: 3px solid var(--ap-p-d); outline-offset: 2px; }
.ap-card-link a:focus-visible { outline: none; }
.ap-card .ap-badge.ap-tr { position: absolute; top: var(--ap-pad); right: var(--ap-pad); }
.ap-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto !important; padding-top: 16px; border-top: 1px solid var(--ap-lt); }
.ap-kv { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 !important; border-top: 1px solid var(--ap-lt); border-bottom: 1px solid var(--ap-lt); }
.ap-kv li { display: flex; justify-content: space-between; gap: 12px; color: var(--ap-tx2); }
.ap-kv li strong { color: var(--ap-dk); font-weight: 600; }

/* Medienkarte (Bild oben, Text unten) */
.ap-card.ap-media { padding: 0; gap: 0; overflow: hidden; }
.ap-card.ap-media .ap-card-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.ap-card.ap-media img, .ap-card .ap-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-thumb { aspect-ratio: 16 / 10; background: var(--ap-sf); overflow: hidden; }
.ap-thumb.ap-ver { display: grid; place-items: center; background: var(--ap-tint); font-size: 40px; font-weight: 600; color: var(--ap-p-dd); letter-spacing: -.02em; }

/* Teaser „demnächst“ */
.ap-teaser { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ap-teaser.ap-ic::before { background-color: #fff; }
.ap-teaser > .ap-teaser-txt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.ap-teaser .ap-teaser-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 500; }

/* Icon-Kachel (Icon kommt aus ap-icons.css über ap-i-NAME) */
.ap-ic::before { content: ""; display: block; flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ap-tint) var(--ap-ig, none) center / 24px 24px no-repeat; }
.ap-ic.ap-ic-sm::before { width: 40px; height: 40px; border-radius: 10px; background-size: 20px 20px; }
.ap-ic.ap-ic-l::before { width: 72px; height: 72px; border-radius: 20px; background-color: #fff; background-size: 32px 32px; }
.ap-bg-dk .ap-ic::before { background-color: rgba(168, 224, 196, .14); background-image: var(--ap-im, none); }
.ap-ic-row { display: flex; align-items: center; gap: 12px; }
.ap-ic-row.ap-ic::before { width: 40px; height: 40px; border-radius: 10px; background-size: 20px 20px; }
.ap-ic-row > span { display: block; }
.ap-ic-row .ap-small { display: block; }
.ap-ic-row strong { font-weight: 500; }
.ap-ic-row a { text-decoration: none; }
.ap-ic.ap-center::before { margin-left: auto; margin-right: auto; }

/* Häkchenliste */
.ap-check { display: flex; flex-direction: column; gap: 8px; }
.ap-check.ap-gap-m { gap: 10px; }
.ap-check.ap-inline { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--ap-tx2); }
.ap-check li { position: relative; display: flex; gap: 10px; align-items: flex-start; }
.ap-check li::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 3px; background: var(--ap-p); -webkit-mask: var(--ap-m-check) center/contain no-repeat; mask: var(--ap-m-check) center/contain no-repeat; }
.ap-bg-p .ap-check li::before, .ap-bg-dk .ap-check li::before { background: #fff; }

/* Kennzahlen */
.ap-stat { display: flex; flex-direction: column; gap: 4px; }
.ap-stat-n { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.ap-stat-n.ap-pd { color: var(--ap-p-d); }
.ap-stat-l { font-size: 1rem; line-height: 1.4; }

/* Preis */
.ap-price { display: flex; align-items: baseline; gap: 6px; color: var(--ap-mut); font-size: .9375rem; }
.ap-price strong { font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--ap-dk); }
/* Zweite Preiszeile: Jahrespreis, „nur monatlich“ o. Ä. – rückt an den Preis heran */
.ap-price + .ap-price-alt { margin-top: -10px; }
.ap-price-alt strong { font-weight: 600; color: var(--ap-dk); }

/* Prozess-Schritte (Zähler) */
.ap-step { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--ap-r-lg); background: rgba(255, 255, 255, .1); counter-increment: ap-step; }
.ap-step::before { content: counter(ap-step); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--ap-p-dd); display: grid; place-items: center; font-weight: 600; flex: none; }

/* Limit-Box (Basis) */
.ap-limits { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: center; }
.ap-limits .ap-g3n { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-limits .wp-block-buttons { justify-self: start; }

/* 9. Mockups & Platzhalter --------------------------------------------------- */
.ap-mock { position: relative; padding-bottom: 32px; }
.ap-browser { position: relative; background: #fff; border: 1px solid var(--ap-bd); border-radius: 12px; box-shadow: var(--ap-sh-lg); overflow: hidden; }
.ap-browser::before {
	content: ""; display: block; height: 36px; border-bottom: 1px solid var(--ap-bd);
	background:
		radial-gradient(circle at 5px 5px, var(--ap-bd) 4.5px, transparent 5px) 12px 13px / 10px 10px no-repeat,
		radial-gradient(circle at 5px 5px, var(--ap-bd) 4.5px, transparent 5px) 28px 13px / 10px 10px no-repeat,
		radial-gradient(circle at 5px 5px, var(--ap-bd) 4.5px, transparent 5px) 44px 13px / 10px 10px no-repeat,
		var(--ap-sf);
}
.ap-browser::after {
	content: "app.apron-pilot.com"; position: absolute; top: 8px; left: 66px; right: 12px; max-width: 280px; height: 20px;
	padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--ap-lt);
	font-size: 11px; line-height: 18px; color: var(--ap-mut); white-space: nowrap; overflow: hidden;
}
.ap-browser > .ap-shot, .ap-browser > figure, .ap-browser > .wp-block-image { border-radius: 0; }
.ap-browser img, .ap-phone img { display: block; width: 100%; height: auto; }
.ap-phone { background: #fff; border: 8px solid var(--ap-dk); border-radius: 32px; box-shadow: var(--ap-sh-lg); overflow: hidden; }
.ap-mock > .ap-phone { position: absolute; right: -8px; bottom: 0; width: 30%; min-width: 120px; }
@media (max-width: 699px) { .ap-mock > .ap-phone { right: -4px; width: 34%; } }
.ap-shot { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: flex-end; background-color: var(--ap-sf); background-image: linear-gradient(var(--ap-lt) 1px, transparent 1px), linear-gradient(90deg, var(--ap-lt) 1px, transparent 1px); background-size: 24px 24px; }
.ap-shot.ap-169 { aspect-ratio: 16 / 9; }
.ap-shot.ap-phone-s { aspect-ratio: 9 / 19.5; }
.ap-shot.ap-photo { aspect-ratio: 4 / 5; border-radius: var(--ap-r-xl); overflow: hidden; background-color: #3f464d; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.ap-shot.ap-r-xl { border-radius: var(--ap-r-xl); overflow: hidden; }
.ap-ph-label { margin: 12px !important; background: #fff; border: 1px dashed var(--ap-bd-in); border-radius: var(--ap-r-sm); padding: 8px 10px; font-size: 12px; line-height: 1.4; color: var(--ap-tx2); }
.ap-ph-label strong { color: var(--ap-dk); font-weight: 600; }
.ap-phone .ap-ph-label { margin: 8px !important; font-size: 10px; }
.ap-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Bildblock in der Fläche: füllt sie randlos, die Ecken schneidet der Radius der Fläche ab */
.ap-shot > .wp-block-image { position: absolute; inset: 0; margin: 0; }
/* Editor: Der Größen-Rahmen des Bildblocks (Inline-Style) darf nicht Bezugspunkt sein, sonst ist das Bild 0 px hoch */
.ap-shot .components-resizable-box__container { position: static !important; }

/* Illustrierter Kalender (Startseiten-Hero) */
.ap-cal { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.ap-cal-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; gap: 6px; align-items: center; }
.ap-cal-top span { height: 22px; border-radius: 999px; padding: 0 8px; font-size: 10px; line-height: 22px; }
.ap-cal-grid { position: absolute; top: 50px; left: 16px; right: 16px; bottom: 16px; display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr)); grid-template-rows: 20px repeat(6, minmax(0, 1fr)); gap: 3px; font-size: 9px; color: var(--ap-mut); }
.ap-cal-grid i { display: block; border-radius: 4px; }
.ap-cal .ap-ph-label { position: absolute; left: 0; bottom: 0; }
.ap-mphone { aspect-ratio: 9 / 19.5; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; background: #fff; }
.ap-mphone span { display: block; height: 26px; border-radius: 6px; border: 1px solid var(--ap-bd); }
.ap-mphone .ap-mp-t { height: 10px; width: 60%; border: 0; border-radius: 4px; background: var(--ap-dk); }
.ap-mphone .ap-mp-b { height: 28px; border: 0; background: var(--ap-p); margin-top: 4px; }
.ap-mphone .ap-mp-2 { display: flex; gap: 6px; border: 0; }
.ap-mphone .ap-mp-2 span { flex: 1; }
.ap-mphone small { margin-top: auto; font-size: 9px; line-height: 1.35; color: var(--ap-tx2); }

/* 10. Zitat ------------------------------------------------------------------ */
.ap-quote, :is(.ap-main, .editor-styles-wrapper) .wp-block-quote.ap-quote { margin: 8px 0 0; padding: 24px; border-radius: var(--ap-r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.ap-quote p { font-size: 1.125rem; line-height: 1.55; color: #fff; }
.ap-quote cite { display: block; margin-top: 16px; font-style: normal; font-size: 14px; color: #c9d3d8; }
.ap-quote cite strong { display: block; font-weight: 500; color: #fff; font-size: 1rem; }

/* 11. Hinweise --------------------------------------------------------------- */
.ap-alert { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 16px 48px; border-radius: var(--ap-r-md); border: 1px solid; font-size: .9375rem; }
.ap-alert::before { content: ""; position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ap-m-info) center/contain no-repeat; mask: var(--ap-m-info) center/contain no-repeat; }
.ap-alert.ap-a-info { background: var(--ap-sf); border-color: var(--ap-bd); color: var(--ap-dk); }
.ap-alert.ap-a-ok { background: var(--ap-tint); border-color: #a8d5bf; color: var(--ap-p-dd); }
.ap-alert.ap-a-ok::before { -webkit-mask-image: var(--ap-m-checkcircle); mask-image: var(--ap-m-checkcircle); }
.ap-alert.ap-a-warn { background: var(--ap-warn-bg); border-color: #ecc98a; color: var(--ap-warn); }
.ap-alert.ap-a-err { background: var(--ap-err-bg); border-color: #f2b8b2; color: var(--ap-err); }
.ap-alert.ap-a-err::before, .ap-alert.ap-a-warn::before { -webkit-mask-image: var(--ap-m-alert); mask-image: var(--ap-m-alert); }
.ap-alert.ap-pad-l { padding: 20px 20px 20px 52px; }
.ap-alert.ap-pad-l::before { left: 20px; top: 22px; }

/* 12. Akkordeon (core/details) ------------------------------------------------ */
.ap-acc { border: 1px solid var(--ap-bd); border-radius: var(--ap-r-lg); overflow: hidden; background: #fff; }
.ap-acc > .wp-block-details + .wp-block-details { border-top: 1px solid var(--ap-bd); }
.ap-acc .wp-block-details summary, .ap-mxm summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; font-size: 1.0625rem; font-weight: 500; color: var(--ap-dk); cursor: pointer; list-style: none; }
.ap-acc .wp-block-details summary::-webkit-details-marker, .ap-mxm summary::-webkit-details-marker { display: none; }
.ap-acc .wp-block-details summary::after, .ap-mxm summary::after { content: ""; width: 20px; height: 20px; flex: none; background: var(--ap-p-d); -webkit-mask: var(--ap-m-chevron) center/contain no-repeat; mask: var(--ap-m-chevron) center/contain no-repeat; transition: transform .15s; }
.ap-acc .wp-block-details[open] summary::after, .ap-mxm[open] summary::after { transform: rotate(180deg); }
.ap-acc .wp-block-details > :not(summary) { padding: 0 20px 18px; color: var(--ap-tx2); }

/* 13. Vergleichsmatrix [ap_compare] ------------------------------------------- */
.ap-mx-wrap { border: 1px solid var(--ap-bd); border-radius: var(--ap-r-lg); overflow: clip; background: #fff; }
.ap-mx { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 0; }
.ap-mx th, .ap-mx td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--ap-lt); text-align: center; vertical-align: middle; font-weight: 400; }
.ap-mx th[scope="row"], .ap-mx thead th:first-child { text-align: left; }
.ap-mx thead th { position: sticky; top: var(--ap-header-h); z-index: 2; background: #fff; border-bottom: 2px solid var(--ap-bd); vertical-align: bottom; padding-top: 20px; }
.ap-mx .ap-hl { background: rgba(227, 241, 234, .55); }
.ap-mx thead th.ap-hl { background: #f1f8f4; }
.ap-mx .ap-grp th { background: var(--ap-lt); font-weight: 600; font-size: .875rem; text-align: left; }
.ap-mx .ap-grp th.ap-hl { background: #d8eadf; }
.ap-yes { color: var(--ap-p); font-weight: 600; }
.ap-no { color: var(--ap-bd-in); }
.ap-mx-mob { display: none; }
.ap-mxm { border: 1px solid var(--ap-bd); border-radius: 12px; background: #fff; overflow: hidden; }
.ap-mxm + .ap-mxm { margin-top: 12px; }
.ap-mxm summary { font-size: 1rem; }
.ap-mxm-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--ap-lt); font-size: .9375rem; }
.ap-mxm-row b { font-weight: 500; white-space: nowrap; text-align: right; }
.ap-mxm-head { display: flex; justify-content: flex-end; gap: 16px; padding: 8px 16px; font-size: .8125rem; color: var(--ap-mut); border-top: 1px solid var(--ap-lt); }
.ap-mx-note { display: none; }
@media (max-width: 899px) {
	.ap-mx-desk { display: none; }
	.ap-mx-mob { display: block; }
	.ap-mx-note { display: block; }
	.ap-mx-desk-only { display: none; }
}

/* 14. Filter, Suche, Pagination ----------------------------------------------- */
.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ap-bd); background: #fff; font: inherit; font-size: .9375rem; font-weight: 500; color: var(--ap-dk) !important; text-decoration: none; cursor: pointer; }
.ap-chip:hover { border-color: var(--ap-dk); }
.ap-chip.is-on, .ap-chip[aria-current] { background: var(--ap-dk); border-color: var(--ap-dk); color: #fff !important; }
.ap-filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.ap-search { position: relative; width: 100%; max-width: 360px; margin: 0; }
.ap-filterbar .ap-search { flex: 1 1 260px; }
.ap-search.ap-wide { max-width: 480px; width: 100%; }
.ap-search::before { content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; background: var(--ap-mut); -webkit-mask: var(--ap-m-search) center/contain no-repeat; mask: var(--ap-m-search) center/contain no-repeat; pointer-events: none; }
.ap-search input[type="search"] { padding-left: 44px !important; }
.ap-pag { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ap-pag .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 8px; text-decoration: none; color: var(--ap-dk); font-weight: 500; }
.ap-pag a.page-numbers:hover { background: var(--ap-lt); }
.ap-pag .page-numbers.current { background: var(--ap-dk); color: #fff; }
.ap-pag .page-numbers.dots { min-width: 24px; }

/* 15. Formulare ----------------------------------------------------------------- */
.ap-field { display: flex; flex-direction: column; gap: 6px; }
.ap-input, .ap-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .ap-form select, .ap-form textarea, .ap-search input[type="search"] {
	width: 100%; height: 48px; border: 1px solid var(--ap-bd-in); border-radius: var(--ap-r-md); background: #fff; padding: 0 14px;
	font: inherit; font-size: 1rem; color: var(--ap-dk); box-shadow: none; margin: 0;
}
.ap-form textarea { height: auto; min-height: 128px; padding: 12px 14px; resize: vertical; }
.ap-form ::placeholder, .ap-search ::placeholder { color: var(--ap-mut); opacity: 1; }
.ap-form input:hover, .ap-form select:hover, .ap-form textarea:hover, .ap-search input:hover { border-color: var(--ap-dk); }
.ap-form input:focus, .ap-form select:focus, .ap-form textarea:focus, .ap-search input:focus { outline: none; border-color: var(--ap-p-d); box-shadow: 0 0 0 3px rgba(39, 131, 90, .28); }
.ap-form [aria-invalid="true"] { border-color: var(--ap-err) !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
.ap-cb { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; font-weight: 400; }
.ap-cb input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ap-p); flex: none; }
.ap-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ap-form .ap-err { font-size: .8125rem; color: var(--ap-err); }
.ap-captcha { min-height: 65px; }
.ap-form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }

/* 16. Lesetext, Inhaltsverzeichnis --------------------------------------------- */
:is(.ap-prose, :where(.post-type-post) .is-root-container) { max-width: 720px; font-size: 1.0625rem; line-height: 1.75; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) > * + * { margin-top: 20px; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) > h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); font-weight: 600; line-height: 1.25; margin-top: 48px; scroll-margin-top: 96px; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) > h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.35; margin-top: 32px; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) > h2 + *, :is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) > h3 + * { margin-top: 16px; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) ul, :is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) ol { padding-left: 24px; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) ul { list-style: disc; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) ol { list-style: decimal; }
:is(.ap-prose, :where(.post-type-post) .is-root-container) li + li { margin-top: 8px; }
:is(.ap-prose, :where(.post-type-post) .is-root-container) a { text-decoration: underline; }
:is(.ap-prose, :where(.post-type-post) .is-root-container) .wp-block-image img { border-radius: var(--ap-r-lg); }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) blockquote { padding: 4px 0 4px 20px; border-left: 4px solid var(--ap-bd); color: var(--ap-tx2); font-style: italic; }
:is(.ap-main, .editor-styles-wrapper) :is(.ap-prose, :where(.post-type-post) .is-root-container) blockquote > * + * { margin-top: 12px; }
/* Block-Editor: Beiträge und Release Notes in der Spalte wie im Frontend (single.php, single-release_note.php) */
.editor-styles-wrapper:is(.post-type-post, .post-type-release_note) :is(.is-root-container, .editor-visual-editor__post-title-wrapper) { box-sizing: content-box; margin: 0 auto; padding-left: var(--ap-gutter); padding-right: var(--ap-gutter); }
.editor-styles-wrapper.post-type-post .editor-visual-editor__post-title-wrapper { max-width: 720px; }
.editor-styles-wrapper.post-type-post .is-root-container { padding-bottom: 64px; }
.editor-styles-wrapper.post-type-release_note :is(.is-root-container, .editor-visual-editor__post-title-wrapper) { max-width: 760px; }
.editor-styles-wrapper.post-type-release_note .is-root-container { display: flex; flex-direction: column; gap: 40px; padding-bottom: 64px; }
.ap-toc { border-left: 2px solid var(--ap-lt); padding-left: 16px; display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; }
.ap-toc a { color: var(--ap-tx2); text-decoration: none; }
.ap-toc a:hover, .ap-toc a.is-on { color: var(--ap-p-d); }
.ap-toc a.is-on { font-weight: 500; box-shadow: -18px 0 0 -16px var(--ap-p); }
.ap-toc-box { padding: 20px; border: 1px solid var(--ap-lt); border-radius: var(--ap-r-lg); background: #fff; }
.ap-toc-box summary { display: flex; justify-content: space-between; align-items: center; min-height: 24px; font-size: .875rem; font-weight: 500; cursor: pointer; list-style: none; }
.ap-toc-box summary::-webkit-details-marker { display: none; }
.ap-toc-box summary::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ap-m-chevron) center/contain no-repeat; mask: var(--ap-m-chevron) center/contain no-repeat; transition: transform .15s; }
.ap-toc-box[open] summary::after { transform: rotate(180deg); }
.ap-toc-box .ap-toc { margin-top: 16px; }
@media (min-width: 1024px) {
	.ap-sticky { position: sticky; top: calc(var(--ap-header-h) + 24px); align-self: start; }
	.ap-toc-box summary { pointer-events: none; }
	.ap-toc-box summary::after { display: none; }
}

/* Breadcrumb */
.ap-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--ap-mut); margin-bottom: 20px; }
.ap-crumbs a { color: var(--ap-mut) !important; text-decoration: none; }
.ap-crumbs a:hover { text-decoration: underline; }

/* Beitragsnavigation */
.ap-postnav .ap-card { gap: 6px; }
.ap-postnav .ap-next { text-align: right; align-items: flex-end; }
.ap-postnav .ap-dis { background: var(--ap-sf); border-style: dashed; }
.ap-postnav .ap-small { display: inline-flex; align-items: center; gap: 6px; }
.ap-postnav a { color: var(--ap-dk); text-decoration: none; font-weight: 500; }

/* 17. Release Notes --------------------------------------------------------------- */
.ap-rn { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); padding: 32px 0; border-top: 1px solid var(--ap-bd); }
@media (min-width: 900px) { .ap-rn { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } }
.ap-rn-v { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ap-rn-v a { color: inherit !important; text-decoration: none; }
.ap-rn-item { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--ap-lt); }
.ap-rn-item .ap-badge { min-width: 96px; justify-content: center; flex: none; margin-top: 1px; }
.ap-rn-old a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--ap-lt); text-decoration: none; color: var(--ap-dk) !important; }
.ap-rn-old a:hover { background: var(--ap-sf); }
.ap-rn-old a:last-child { border-bottom: 0; }
.ap-rn-old b { font-weight: 600; min-width: 64px; display: inline-block; }
.ap-current { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--ap-bd); border-radius: var(--ap-r-lg); background: #fff; }
.ap-current b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
/* Detailseite: Inhalt der Version (Block-Inhalt) */
.ap-rn-group { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 96px; }
.ap-rn-group > h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem); font-weight: 500; line-height: 1.25; }
.ap-rn-group > h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ap-rn-neu > h2::before { background: var(--ap-p); }
.ap-rn-verbessert > h2::before { background: #fff; box-shadow: inset 0 0 0 2px var(--ap-p); }
.ap-rn-fix > h2::before { background: var(--ap-warn); }
.ap-rn-wartung > h2::before { background: var(--ap-bd-in); }
.ap-dot.ap-rn-neu { background: var(--ap-p); }
.ap-dot.ap-rn-verbessert { background: #fff; box-shadow: inset 0 0 0 2px var(--ap-p); }
.ap-dot.ap-rn-fix { background: var(--ap-warn); }
.ap-dot.ap-rn-wartung { background: var(--ap-bd-in); }
.ap-rn-group ul li { display: block; padding: 12px 0; border-bottom: 1px solid var(--ap-lt); color: var(--ap-tx2); }
/* Paket-Badge (PREMIUM, VERRECHNUNG …) und Titel in einer Zeile, Erklärung darunter */
.ap-rn-group ul li strong { color: var(--ap-dk); font-weight: 500; }
.ap-rn-group ul li strong::after { content: ""; display: block; height: 4px; }
.ap-rn-group ul li .ap-badge { margin-right: 4px; }
.ap-rn-group ul li br { display: none; }
/* Hinweisbox unter den Änderungen: Online-Hilfe und Kontakt, je eine Zeile mit Icon-Kachel */
.ap-rn-help { padding: 0; gap: 0; border-color: var(--ap-lt); }
.ap-rn-help > p { margin: 0; padding: 16px 20px; color: var(--ap-tx2); }
.ap-rn-help > p + p { border-top: 1px solid var(--ap-lt); }
.ap-rn-help a { font-weight: 500; }
.ap-vlist > a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ap-dk) !important; }
.ap-vlist > a:hover { background: var(--ap-sf); }
.ap-vlist > a[aria-current] { background: var(--ap-dk); color: #fff !important; }
.ap-vlist > a[aria-current] .ap-small { color: #dfe5e8; }

/* 18. Header ------------------------------------------------------------------------ */
.ap-hdr { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--ap-lt); font-family: var(--ap-font); color: var(--ap-dk); }
.admin-bar .ap-hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .ap-hdr { top: 46px; } }
@media (max-width: 600px) { .admin-bar .ap-hdr { top: 0; } }
.ap-hdr-in { height: var(--ap-header-h); display: flex; align-items: center; gap: 24px; }
.ap-logo { display: flex; align-items: center; height: 32px; flex: none; }
.ap-logo img { height: 32px; width: auto; display: block; }
.ap-nav { display: flex; align-items: center; gap: 4px; margin: 0 0 0 16px; padding: 0; list-style: none; }
.ap-nav > li { position: relative; margin: 0; }
.ap-nav > li > a, .ap-nav > li > button { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--ap-r-md); background: transparent; color: var(--ap-dk); text-decoration: none; font: inherit; font-size: .9375rem; font-weight: 500; cursor: pointer; }
.ap-nav > li > a:hover, .ap-nav > li > button:hover, .ap-nav > li.is-open > button { background: var(--ap-sf); color: var(--ap-dk); }
.ap-nav > li.current-menu-item > a, .ap-nav > li.current-menu-ancestor > a, .ap-nav > li.current-menu-ancestor > button, .ap-nav > li.current-menu-item > button, .ap-nav > li.current-menu-parent > button { color: var(--ap-p-d); box-shadow: inset 0 -2px 0 var(--ap-p); border-radius: var(--ap-r-md) var(--ap-r-md) 0 0; }
.ap-chev { width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--ap-m-chevron) center/contain no-repeat; mask: var(--ap-m-chevron) center/contain no-repeat; transition: transform .15s; }
.is-open > button .ap-chev { transform: rotate(180deg); }
.ap-drop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 600px; margin: 0; padding: 12px; list-style: none; background: #fff; border: 1px solid var(--ap-bd); border-radius: var(--ap-r-lg); box-shadow: var(--ap-sh-lg); display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.ap-nav > li.is-open > .ap-drop { display: grid; }
@media (hover: hover) and (min-width: 1024px) { .ap-nav > li.has-drop:hover > .ap-drop { display: grid; } }
.ap-drop li { margin: 0; }
.ap-drop a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 10px; text-decoration: none; color: var(--ap-dk); line-height: 1.4; }
.ap-drop a:hover, .ap-drop a:focus-visible { background: var(--ap-sf); color: var(--ap-dk); }
.ap-drop a::before { content: ""; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--ap-tint) var(--ap-ig, none) center / 20px 20px no-repeat; }
.ap-drop .ap-dt { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.ap-drop small { display: block; font-size: .8125rem; color: var(--ap-mut); line-height: 1.4; margin-top: 2px; }
.ap-hdr-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ap-lang { display: inline-flex; border: 1px solid var(--ap-bd); border-radius: 999px; padding: 2px; font-size: .8125rem; font-weight: 500; }
.ap-lang a { display: grid; place-items: center; min-width: 40px; height: 32px; padding: 0 10px; border-radius: 999px; color: var(--ap-mut); text-decoration: none; }
.ap-lang a:hover { color: var(--ap-dk); }
.ap-lang a[aria-current] { background: var(--ap-dk); color: #fff; }
.ap-burger { width: 44px; height: 44px; border-radius: var(--ap-r-md); border: 1px solid var(--ap-bd); background: #fff; display: grid; place-items: center; color: var(--ap-dk); cursor: pointer; padding: 0; }
.ap-burger:hover { background: var(--ap-sf); }
.ap-burger i { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ap-m-menu) center/contain no-repeat; mask: var(--ap-m-menu) center/contain no-repeat; }
.ap-burger[aria-expanded="true"] i { -webkit-mask-image: var(--ap-m-x); mask-image: var(--ap-m-x); }
.ap-badge-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--ap-bd-in); background: #fff; font-size: .75rem; font-weight: 500; color: var(--ap-dk); }
.ap-mmenu { display: none; border-top: 1px solid var(--ap-lt); background: #fff; padding: 8px var(--ap-gutter) 24px; max-height: calc(100vh - var(--ap-header-h)); overflow-y: auto; }
.ap-mmenu.is-open { display: block; }
.ap-mmenu ul { list-style: none; margin: 0; padding: 0; }
.ap-mmenu > ul > li > a, .ap-mmenu > ul > li > span { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--ap-lt); font-size: 1.0625rem; font-weight: 500; color: var(--ap-dk); text-decoration: none; }
.ap-mmenu .sub-menu { padding: 4px 0 8px; border-bottom: 1px solid var(--ap-lt); }
.ap-mmenu .sub-menu a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 16px; color: var(--ap-tx2); text-decoration: none; }
.ap-mmenu .current-menu-item > a { color: var(--ap-p-d); }
.ap-mmenu-btns { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ap-mmenu-lang { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
@media (max-width: 1023px) {
	.ap-nav, .ap-hdr .ap-d-only { display: none !important; }
	:root { --ap-header-h: 64px; }
	.ap-logo img { height: 28px; }
}
@media (min-width: 1024px) { .ap-burger, .ap-mmenu { display: none !important; } }
@media (max-width: 699px) { .ap-hdr .ap-m-hide { display: none !important; } }

/* 19. Footer ------------------------------------------------------------------------ */
.ap-ftr { background: var(--ap-dk); color: #dfe5e8; font-size: .9375rem; font-family: var(--ap-font); }
.ap-ftr a { color: #e9eef0; text-decoration: none; }
.ap-ftr a:hover { color: #fff; text-decoration: underline; }
.ap-ftr h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.ap-ftr ul { list-style: none; margin: 0; padding: 0; }
.ap-ftr li { margin: 0; }
.ap-ftr li + li { margin-top: 10px; }
.ap-ftr p { margin: 0; }
.ap-ftr-g { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); padding-top: clamp(40px, 5vw, 64px); }
@media (min-width: 700px) { .ap-ftr-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ap-ftr-g { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; } }
.ap-ftr-brand { display: flex; flex-direction: column; gap: 16px; }
.ap-ftr-brand img { height: 32px; width: auto; align-self: flex-start; }
.ap-ftr-brand p { max-width: 300px; }
.ap-ftr-ic { display: inline-flex; align-items: center; gap: 8px; }
.ap-ftr-ic::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ap-mask) center/contain no-repeat; mask: var(--ap-mask) center/contain no-repeat; }
.ap-ftr-ic.ap-mail { --ap-mask: var(--ap-m-mail); }
.ap-ftr-ic.ap-pin { --ap-mask: var(--ap-m-pin); }
.ap-ftr-date { font-size: 13px; color: #c9d3d8; }
.ap-ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ap-pay { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--ap-r-sm); background: rgba(255, 255, 255, .1); font-size: .8125rem; font-weight: 500; color: #fff; }
.ap-ftr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: #c9d3d8; }
.ap-ftr-lang a[aria-current] { font-weight: 600; color: #fff; }

/* 20. Sonstiges -------------------------------------------------------------------- */
.ap-404 { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px); }
.ap-404 .ap-wrap { max-width: 760px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.ap-share { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ap-lt); }
.ap-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--ap-r-md); background: transparent; color: var(--ap-dk) !important; cursor: pointer; }
.ap-icon-btn:hover { background: var(--ap-lt); }
.ap-icon-btn i { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ap-mask) center/contain no-repeat; mask: var(--ap-mask) center/contain no-repeat; }
.ap-feat-post { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; padding: 0; gap: 0; }
/* Zweispaltig füllt das Bild die Zeilenhöhe (mind. 16:10); ein festes Seitenverhältnis würde die Breite aus der Höhe ableiten und in den Text ragen. */
@media (min-width: 1280px) { .ap-feat-post { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ap-feat-post .ap-thumb { aspect-ratio: auto; } }
.ap-feat-post .ap-card-body { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 4vw, 48px); justify-content: center; }
.ap-feat-post h2 a, .ap-card.ap-media h3 a { color: inherit; text-decoration: none; }
:is(.ap-main, .editor-styles-wrapper) .ap-wp-content > * + * { margin-top: 20px; }

/* Scroll-to-top von Kadence ausblenden, Header/Footer kommen aus dem Child-Theme */
#masthead, .site-footer { display: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 21. Complianz – Cookie-Banner im Designsystem ------------------------------------ */
.cmplz-cookiebanner { font-family: var(--ap-font); max-width: 440px; padding: 24px !important; border: 1px solid #c9d3d8 !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(52, 58, 64, .14) !important; color: #343a40; gap: 16px; }
.cmplz-cookiebanner .cmplz-title { font-size: 1.125rem; font-weight: 500; color: #343a40; }
.cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-message p { font-size: .875rem; line-height: 1.5; color: #4a5259; }
.cmplz-cookiebanner .cmplz-close, .cmplz-cookiebanner .cmplz-logo { display: none; }
.cmplz-cookiebanner .cmplz-buttons { gap: 8px; }
.cmplz-cookiebanner .cmplz-btn { min-height: 44px; padding: 0 16px; border-radius: 8px !important; border: 2px solid transparent; font-size: .9375rem; font-weight: 500; text-transform: none; letter-spacing: .01em; transition: background-color .15s, border-color .15s; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept { background: #27835a !important; border-color: #27835a !important; color: #fff !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background: #1d6a48 !important; border-color: #1d6a48 !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background: #fff !important; border-color: #27835a !important; color: #1d6a48 !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { background: #e3f1ea !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences { background: transparent !important; border-color: transparent !important; color: #343a40 !important; }
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover { background: #e9eef0 !important; }
.cmplz-cookiebanner .cmplz-btn:focus-visible, .cmplz-cookiebanner a:focus-visible, .cmplz-cookiebanner input:focus-visible { outline: 3px solid #1d6a48; outline-offset: 2px; }
.cmplz-cookiebanner .cmplz-categories .cmplz-category { background: #fff; border: 1px solid #c9d3d8; border-radius: 12px; }
.cmplz-cookiebanner .cmplz-category-title { font-weight: 500; color: #343a40; }
.cmplz-cookiebanner .cmplz-always-active { color: #185c3e; font-weight: 500; }
.cmplz-cookiebanner .cmplz-banner-checkbox input:checked + .cmplz-label::before { background: #27835a; }
.cmplz-cookiebanner .cmplz-links a { font-size: .8125rem; color: #1d6a48; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
	.cmplz-cookiebanner { max-width: none; width: 100% !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 16px 16px 0 0 !important; border-bottom: 0 !important; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important; }
	.cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }
	.cmplz-cookiebanner .cmplz-btn { width: 100%; min-height: 48px; }
}
#cmplz-document { max-width: 720px; font-size: 1.0625rem; line-height: 1.75; }
#cmplz-document h2 { font-size: 1.75rem; font-weight: 600; margin: 48px 0 16px; }
#cmplz-document table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
#cmplz-document th, #cmplz-document td { padding: 10px 12px; border-bottom: 1px solid #e9eef0; text-align: left; }
#cmplz-document th { background: #f4f7f8; font-weight: 600; }

/* 22. Ergänzungen -------------------------------------------------------------- */
.ap-ftr-lang { gap: 6px; }
.ap-ftr-lang a + a::before { content: "·"; margin-right: 6px; color: #c9d3d8; }
.ap-card .ap-rn-old a { padding: 12px 0; border-bottom: 0; border-top: 1px solid var(--ap-lt); }
.ap-card .ap-rn-old a:hover { background: transparent; }
.ap-card .ap-rn-old a:hover .ap-tx2 { color: var(--ap-p-d); }
.ap-card .ap-rn-old b { min-width: 48px; }
.ap-current:hover { border-color: var(--ap-p); }
.ap-404 .ap-ic::before { margin: 0 auto; }
.ap-404 .ap-chips { justify-content: center; }
.ap-postnav .ap-stretch { color: var(--ap-dk) !important; font-weight: 500; }
.ap-mb-0 { margin-bottom: 0 !important; }
.ap-card-link .ap-link a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.ap-teaser .ap-link { flex: none; }
/* Außenabstände, die gegen den Gruppen-Reset (Abschnitt 3) gewinnen müssen */
:is(.ap-main, .editor-styles-wrapper) .ap-head { margin-bottom: clamp(32px, 4vw, 56px); }
:is(.ap-main, .editor-styles-wrapper) .ap-head-row { margin-bottom: clamp(32px, 4vw, 56px); }
:is(.ap-main, .editor-styles-wrapper) .ap-head-row > .ap-head, :is(.ap-main, .editor-styles-wrapper) .ap-mb-0 { margin-bottom: 0; }
:is(.ap-main, .editor-styles-wrapper) .ap-crumbs { margin-bottom: 20px; }
:is(.ap-main, .editor-styles-wrapper) .ap-quote { margin-top: 8px; }

/* Buttons als Links im Inhalt: Textfarbe gegen die allgemeine Linkfarbe absichern */
:is(.ap-main, .editor-styles-wrapper) a.ap-btn, :is(.ap-main, .editor-styles-wrapper) a.ap-btn:hover { color: #fff; }
:is(.ap-main, .editor-styles-wrapper) a.ap-btn-s, :is(.ap-main, .editor-styles-wrapper) a.ap-btn-s:hover { color: var(--ap-p-d); }
:is(.ap-main, .editor-styles-wrapper) a.ap-btn-g, :is(.ap-main, .editor-styles-wrapper) a.ap-btn-g:hover { color: var(--ap-dk); }
:is(.ap-main, .editor-styles-wrapper) a.ap-btn-w, :is(.ap-main, .editor-styles-wrapper) a.ap-btn-w:hover { color: var(--ap-p-dd); }
.ap-gap-0 { gap: 0 !important; }
.ap-mw-l { max-width: 820px; }
.ap-rn-old .ap-row { flex-wrap: nowrap; align-items: baseline; }
.ap-rn-old a > .ap-small { white-space: nowrap; flex: none; }
.ap-rn-old .ap-tx2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
:is(.ap-main, .editor-styles-wrapper) a.ap-badge { color: var(--ap-dk); }
:is(.ap-main, .editor-styles-wrapper) a.ap-badge:hover { background: var(--ap-bd); }
.ap-cal-top span { white-space: nowrap; overflow: hidden; flex: none; }
@media (max-width: 479px) { .ap-cal-top span:nth-child(n+4) { display: none; } }