/* ==========================================================================
   onlinepay – „Ink on paper“
   Werte 1:1 aus dem Design-Handoff (prototype/*.dc.html, README „Design-Tokens“).
   Box-Modell bleibt bewusst content-box wie im Prototyp, damit Flex-Basis,
   Mindesthöhen und Umbrüche exakt übereinstimmen.
   ========================================================================== */

/* Schriften (lokal gehostet, SIL Open Font License) ---------------------- */
@font-face {
	font-family: "Gelasio";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/gelasio-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Gelasio";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/gelasio-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;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/schibsted-grotesk-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/schibsted-grotesk-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;
}

/* Tokens ----------------------------------------------------------------- */
:root {
	--op-ink: #000000;
	--op-paper: #ffffff;
	--op-hairline: #d9d9d9;
	--op-muted: #6e6e6e;
	--op-disabled: #c4c4c4;
	--op-card: #e7e7e7;
	--op-parchment: #fdfcf3;
	--op-signal: #ffd400;
	--op-category: #64d5ff;
	--op-error: #b42318;
	--op-on-ink-muted: #cfcfcf;
	--op-on-ink-bar: #3a3a3a;
	--op-serif: "Gelasio", Georgia, serif;
	--op-sans: "Schibsted Grotesk", sans-serif;
	--op-gutter: clamp(16px, 4vw, 40px);
	--op-radius: 8px;
	--op-glossar-offset: 140px;
}

/* Basis ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--op-paper);
	color: var(--op-ink);
	font-family: var(--op-sans);
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font: inherit; }
input::placeholder, textarea::placeholder { color: inherit; opacity: .6; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Sichtbarer Fokus (Ergänzung für Produktion, siehe README) */
:where(a, button, summary, input[type="range"], [tabindex]):focus-visible {
	outline: 2px solid var(--op-ink);
	outline-offset: 2px;
}
.op-on-ink :where(a, button, input, select):focus-visible { outline-color: var(--op-paper); }

[id] { scroll-margin-top: 16px; }

.op-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.op-skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--op-ink); color: var(--op-paper);
	padding: 12px 16px; font: 700 15px/1 var(--op-sans);
}
.op-skip-link:focus { top: 16px; }

/* Container: max. 1280 px Inhalt plus Rand, wie im Prototyp */
.op-container {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: var(--op-gutter);
	padding-right: var(--op-gutter);
}
.op-main {
	padding-bottom: 48px;
	font-family: var(--op-serif);
	color: var(--op-ink);
}
.op-main--56 { padding-bottom: 56px; }

/* Typografie ------------------------------------------------------------- */
.op-kicker { font: 700 12px/1 var(--op-sans); letter-spacing: .07em; text-transform: uppercase; }
.op-kicker--sm { font-size: 11px; letter-spacing: .08em; }
.op-kicker--signal { color: var(--op-signal); }
.op-h1 { margin: 0; font: 700 clamp(34px, 6vw, 56px)/1.04 var(--op-serif); letter-spacing: -.025em; text-wrap: balance; }
.op-h1--52 { font-size: clamp(32px, 5.6vw, 52px); line-height: 1.06; }
.op-h2-band { margin: 0; font: 700 clamp(28px, 4.4vw, 40px)/1.1 var(--op-serif); letter-spacing: -.02em; text-wrap: balance; }
.op-h2-mid { margin: 0; font: 700 clamp(26px, 3.6vw, 34px)/1.1 var(--op-serif); letter-spacing: -.02em; }
.op-h2-sec { margin: 0; font: 700 clamp(22px, 3vw, 28px)/1.1 var(--op-serif); letter-spacing: -.02em; }
.op-h2-sec--ruled { padding-bottom: 10px; border-bottom: 1px solid var(--op-ink); }
.op-intro { margin: 0; max-width: 640px; font: 400 20px/1.5 var(--op-serif); text-wrap: pretty; }
.op-intro--18 { max-width: 520px; font-size: 18px; }
.op-intro--600 { max-width: 600px; }
.op-label-caps { padding-bottom: 10px; border-bottom: 1px solid var(--op-ink); font: 700 12px/1 var(--op-sans); letter-spacing: .07em; text-transform: uppercase; }

/* Links und Buttons ------------------------------------------------------ */
.op-link {
	display: inline-flex; align-items: center; min-height: 44px;
	font: 700 15px/1 var(--op-sans); text-decoration: underline;
}
.op-link--14 { font-size: 14px; }
.op-link--light { font-weight: 400; font-size: 14px; }
.op-link--mt { margin-top: 6px; }
.op-link-u { font: 700 14px/1 var(--op-sans); text-decoration: underline; }

.op-btn {
	display: inline-block;
	background: var(--op-signal); color: var(--op-ink);
	padding: 16px 22px;
	font: 700 16px/1 var(--op-sans);
	border: 0; border-radius: 0;
	text-align: center; cursor: pointer;
	transition: background-color .15s, color .15s;
}
button.op-btn { min-height: 44px; }
.op-btn:hover { background: var(--op-ink); color: var(--op-signal); text-decoration: none; }
.op-btn--on-ink:hover { background: var(--op-paper); color: var(--op-ink); }
.op-btn--15 { padding: 15px 20px; font-size: 15px; }
.op-btn--24 { padding: 16px 24px; }
.op-btn--box { padding: 13px 16px; font-size: 15px; }
.op-btn[disabled] { opacity: .6; cursor: progress; }

.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.op-actions--flush { margin-top: 0; }
.op-strong { font-weight: 700; }
.op-u { text-decoration: underline; }

.op-badge {
	align-self: flex-start;
	padding: 6px 8px;
	font: 700 11px/1 var(--op-sans); letter-spacing: .08em; text-transform: uppercase;
	background: var(--op-card); color: var(--op-ink);
}
.op-badge--sm { padding: 4px 6px; font-size: 10px; }
.op-badge--card { padding: 5px 7px; font-size: 10px; }
.op-badge--ink { background: var(--op-ink); color: var(--op-paper); }
.op-badge--category { background: var(--op-category); }
.op-badge--paper { background: var(--op-paper); }

/* Bilder ----------------------------------------------------------------- */
.op-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--op-radius); background: var(--op-card); }
.op-img--empty { background: var(--op-card); }

/* ==========================================================================
   Site Header
   ========================================================================== */
.op-header { font-family: var(--op-sans); background: var(--op-paper); color: var(--op-ink); }
.op-header__mobile { display: none; }

.op-utility { border-bottom: 1px solid var(--op-hairline); }
.op-utility__inner {
	padding-top: 10px; padding-bottom: 10px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 8px 24px; font-size: 13px; line-height: 1.3;
}
.op-utility__links { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.op-utility__cta { background: var(--op-signal); color: var(--op-ink); font-weight: 700; padding: 8px 14px; transition: background-color .15s, color .15s; }
.op-utility__cta:hover { background: var(--op-ink); color: var(--op-signal); text-decoration: none; }

.op-masthead {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
	gap: 12px 32px; padding: 20px 0 16px;
}
.op-masthead--big { align-items: flex-end; gap: 16px 32px; padding: 36px 0 22px; }
.op-masthead__h1 { margin: 0; font: inherit; }
.op-logo { font: 700 44px/1 var(--op-serif); letter-spacing: -.04em; color: var(--op-ink); }
.op-logo:hover { text-decoration: none; }
.op-masthead--big .op-logo { font-size: clamp(48px, 9vw, 80px); line-height: .9; }
.op-masthead__claim { margin: 0; max-width: 340px; font-size: 15px; line-height: 1.45; }
.op-masthead__tagline { font-size: 14px; line-height: 1.4; color: var(--op-muted); }

.op-nav { border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-hairline); font-size: 14px; line-height: 1; }
.op-nav__list { display: flex; flex-wrap: wrap; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.op-nav__item.is-push { margin-left: auto; }
.op-nav__link { display: block; padding: 15px 0 12px; border-bottom: 3px solid transparent; }
.op-nav__link.is-strong,
.op-rubriken__link.is-strong,
.op-mmenu__link.is-strong { font-weight: 700; }
.op-nav__link.is-schwerpunkt,
.op-rubriken__link.is-schwerpunkt { border-bottom-color: var(--op-signal); font-weight: 700; }
.op-nav__link.is-active,
.op-rubriken__link.is-active { border-bottom-color: var(--op-ink); font-weight: 700; }

/* Mobil */
.op-mbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 16px; border-bottom: 1px solid var(--op-ink);
}
.op-logo--mobile { display: inline-flex; align-items: center; min-height: 44px; font-size: 32px; }
.op-menu-btn {
	min-height: 44px; min-width: 44px; padding: 0 14px;
	border: 1px solid var(--op-ink); border-radius: 0;
	background: var(--op-paper); color: var(--op-ink);
	font-size: 15px; font-weight: 700; cursor: pointer;
}
.op-menu-btn[aria-expanded="true"] { background: var(--op-ink); color: var(--op-paper); }
.op-mmenu { border-bottom: 1px solid var(--op-ink); }
.op-mmenu__list { margin: 0; padding: 0; list-style: none; }
.op-mmenu__link {
	display: flex; justify-content: space-between; align-items: center;
	min-height: 50px; padding: 0 16px; border-bottom: 1px solid var(--op-hairline);
	font-size: 17px; background: var(--op-paper);
}
.op-mmenu__link:hover { text-decoration: none; }
.op-mmenu__link.is-active { font-weight: 700; background: var(--op-parchment); }
.op-mmenu__extra { display: flex; flex-direction: column; padding: 6px 16px 16px; font-size: 15px; }
.op-mmenu__extra a { min-height: 44px; display: flex; align-items: center; }
.op-mmenu__extra .op-mmenu__cta {
	margin-top: 8px; min-height: 50px; justify-content: center;
	background: var(--op-signal); color: var(--op-ink); font-size: 16px; font-weight: 700;
}
.op-mmenu__extra .op-mmenu__cta:hover { text-decoration: none; }
.op-rubriken {
	display: flex; gap: 20px; overflow-x: auto; margin: 0; padding: 0 16px; list-style: none;
	border-bottom: 1px solid var(--op-hairline); scrollbar-width: none; font-size: 14px;
}
.op-rubriken::-webkit-scrollbar { display: none; }
.op-rubriken__item { flex: none; }
.op-rubriken__link { min-height: 44px; display: flex; align-items: center; border-bottom: 3px solid transparent; white-space: nowrap; }
.op-rubriken__link:hover { text-decoration: none; }
.op-mclaim { padding: 10px 16px 0; font-size: 13px; line-height: 1.4; color: var(--op-muted); }

.op-ctabar { display: none; }
.op-ctabar__link { min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.op-ctabar__link:hover { text-decoration: none; }
.op-ctabar__link--rechner { flex: 1 1 0; border: 1px solid var(--op-ink); }
.op-ctabar__link--anfrage { flex: 2 1 0; background: var(--op-signal); color: var(--op-ink); }

@media (max-width: 820px) {
	.op-header__desktop { display: none; }
	.op-header__mobile { display: block; }
	.op-js .op-ctabar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
		display: flex; gap: 8px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: var(--op-paper); border-top: 1px solid var(--op-ink);
	}
}

/* ==========================================================================
   Site Footer
   ========================================================================== */
.op-footer { font-family: var(--op-sans); background: var(--op-paper); color: var(--op-ink); border-top: 1px solid var(--op-ink); }
.op-footer__grid {
	padding-top: 28px; padding-bottom: 20px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px;
	font-size: 13px; line-height: 1.6;
}
.op-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.op-logo--footer { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 28px; }
.op-footer__note { color: var(--op-muted); }
.op-footer__col { display: flex; flex-direction: column; }
.op-footer__heading { font-weight: 700; margin-bottom: 4px; }
.op-footer__col a { padding: 2px 0; }
.op-footer__bottom { padding-bottom: 28px; font-size: 12px; color: var(--op-muted); }
@media (max-width: 820px) {
	.op-footer__col a { padding: 11px 0; }
}

/* ==========================================================================
   Gemeinsame Muster
   ========================================================================== */
.op-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px;
	padding: 8px 0 0; font: 400 13px/1 var(--op-sans); color: var(--op-muted);
}
.op-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.op-crumbs__current { color: var(--op-ink); }

/* Sektionen */
.op-sec { padding: 48px 0 8px; }
.op-sec--40 { padding: 40px 0 8px; }
.op-sec--end { padding: 48px 0 40px; }
.op-sec-head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
	gap: 8px 24px; border-bottom: 1px solid var(--op-ink); padding-bottom: 10px; margin-bottom: 20px;
}
.op-sec-head--flush { margin-bottom: 0; }
.op-sec-meta { font: 400 13px/1 var(--op-sans); color: var(--op-muted); }

/* Kopfbereich Übersichtsseiten: H1 links, Intro rechts */
.op-pagehead {
	padding: 28px 0 32px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px;
}
.op-pagehead--20 { padding-bottom: 20px; }
.op-pagehead--24 { padding-bottom: 24px; }
.op-pagehead--28 { padding-bottom: 28px; }

/* Hero mit Text links und Box/Bild rechts */
.op-hero { display: flex; flex-wrap: wrap; gap: 32px 48px; padding: 28px 0 36px; }
.op-hero--40 { padding-bottom: 40px; }
.op-hero--stretch { align-items: stretch; }
.op-hero__text { flex: 7 1 520px; display: flex; flex-direction: column; gap: 18px; }
.op-hero__text--6 { flex: 6 1 480px; justify-content: center; }

/* „Auf einen Blick“ */
.op-glance {
	flex: 5 1 320px; align-self: flex-start;
	background: var(--op-card); border-radius: var(--op-radius); padding: 20px 24px;
	font: 400 15px/1.4 var(--op-sans);
}
.op-glance__head { padding-bottom: 10px; border-bottom: 1px solid var(--op-ink); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.op-glance__row {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px;
	padding: 12px 0; border-bottom: 1px solid var(--op-hairline);
}
.op-glance__row:last-child { border-bottom: 0; }
.op-glance__label { color: var(--op-muted); }

/* Hinweis-Kästen */
.op-note {
	padding: 14px 16px; background: var(--op-parchment);
	border: 1px solid var(--op-hairline); border-radius: var(--op-radius);
	font: 400 15px/1.5 var(--op-sans);
}
.op-note--640 { max-width: 640px; }
.op-note--14 { font-size: 14px; }
.op-note--calc { padding: 12px 14px; }
.op-note--aside { padding: 16px; line-height: 1.55; }

/* Erklär-Band „So funktioniert …“ */
.op-band {
	background: var(--op-parchment);
	border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-ink);
	padding: 28px clamp(16px, 3vw, 32px) 32px;
}
.op-band--mt { margin-top: 40px; }
.op-band__head {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
	gap: 16px 32px; margin-bottom: 22px;
}
.op-band__headtext { display: flex; flex-direction: column; gap: 8px; }
.op-band__title { margin-bottom: 22px; }
.op-band__title--20 { margin-bottom: 20px; }
.op-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.op-steps--240 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.op-step { padding: 0 16px; border-left: 1px solid var(--op-hairline); display: flex; flex-direction: column; gap: 8px; }
.op-step--left { padding: 0 0 0 16px; }
.op-step__num { font: 700 clamp(28px, 4.4vw, 40px)/1 var(--op-serif); }
.op-step__title { font: 700 19px/1.25 var(--op-serif); }
.op-step__text { font: 400 14px/1.5 var(--op-sans); }
.op-step__text--15 { font-size: 15px; }
.op-step__text--16 { font-size: 16px; }

/* Listen mit Haarlinien (Vorteile, Grenzen, Checkliste) */
.op-split { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.op-split__half { flex: 1 1 360px; }
.op-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font: 400 16px/1.45 var(--op-sans); }
.op-lines > li { padding: 12px 0; border-bottom: 1px solid var(--op-hairline); }

/* Nummerierte Zeilen (Anfrage-Box, Leitfaden, Anfrage-Seitenleiste) */
.op-numlist { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.5; }
.op-numlist--top { border-top: 1px solid var(--op-hairline); }
.op-numlist > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--op-hairline); }
.op-numlist--36 > li { grid-template-columns: 36px minmax(0, 1fr); }
.op-numlist__n { font: 700 18px/1.3 var(--op-serif); }

/* Beitragskarte */
.op-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.op-cards--260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 24px; padding-top: 32px; }
.op-acard { display: flex; flex-direction: column; gap: 10px; }
.op-acard:hover { text-decoration: none; }
.op-acard__img { aspect-ratio: 4 / 3; height: auto; }
.op-acard__kat { font: 700 11px/1 var(--op-sans); letter-spacing: .08em; text-transform: uppercase; }
.op-acard__title { font: 700 20px/1.22 var(--op-serif); text-wrap: pretty; }
.op-acard--lg .op-acard__title { font-size: 21px; }
.op-acard__teaser { font: 400 15px/1.5 var(--op-sans); }
.op-acard__meta { font: 400 13px/1 var(--op-sans); color: var(--op-muted); }

/* Graue Karten-Links */
.op-tile { background: var(--op-card); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.op-tile:hover { text-decoration: none; }
.op-tile--16 { padding: 16px; }
.op-tile--24 { padding: 24px; gap: 10px; }
.op-tile--signal { background: var(--op-signal); }
.op-tile--category { background: var(--op-category); }
.op-tile--ink { background: var(--op-ink); color: var(--op-paper); }
.op-tile__title { font: 700 22px/1.2 var(--op-serif); }
.op-tile__title--26 { font-size: 26px; line-height: 1.15; }
.op-tile__title--fluid { font: 700 clamp(22px, 3vw, 28px)/1.15 var(--op-serif); }
.op-tile__text { font: 400 15px/1.5 var(--op-sans); }
.op-tile__text--14 { font-size: 14px; line-height: 1.45; }
.op-tile__more { margin-top: auto; font: 700 14px/1 var(--op-sans); text-decoration: underline; }
.op-tile__more--static { margin-top: 0; }
.op-tiles { display: flex; flex-wrap: wrap; gap: 16px; }
.op-tiles > * { flex: 1 1 320px; }
.op-tiles--360 > * { flex: 1 1 360px; }

/* FAQ */
.op-faq { border-bottom: 1px solid var(--op-hairline); padding: 16px 0; }
.op-faq__q { display: flex; justify-content: space-between; gap: 16px; font: 700 20px/1.3 var(--op-serif); }
.op-faq__icon { font-family: var(--op-sans); }
.op-faq__a { margin: 12px 0 0; max-width: 820px; font: 400 16px/1.55 var(--op-sans); }

/* Tabellen (Basis/Firma, „So rechnen wir“) */
.op-table-scroll { overflow-x: auto; }
.op-table { min-width: 720px; font: 400 15px/1.45 var(--op-sans); }
.op-table__row {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
	padding: 14px 0; border-bottom: 1px solid var(--op-hairline);
}
.op-table__row:last-child { border-bottom-color: var(--op-ink); }
.op-table__row--head { padding: 12px 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.op-table__th { font: 700 18px/1.3 var(--op-serif); }

/* Formularfelder (unterstrichen) */
.op-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; font-size: 16px; }
.op-input {
	background: transparent; border: 0; border-bottom: 1px solid var(--op-ink); border-radius: 0;
	color: var(--op-ink); padding: 16px 1px; outline: none; min-width: 0;
}
.op-input:focus { border-bottom-width: 2px; padding-bottom: 15px; }
.op-input[aria-invalid="true"] { border-bottom-color: var(--op-error); }
.op-on-ink .op-input { border-bottom-color: var(--op-paper); color: var(--op-paper); }
.op-on-ink select.op-input option { color: var(--op-ink); }
.op-textarea {
	background: transparent; border: 1px solid var(--op-ink); border-radius: 0;
	padding: 12px; font-size: 16px; font-weight: 400; line-height: 1.5;
	color: var(--op-ink); outline: none; resize: vertical;
}
.op-textarea:focus { outline: 1px solid var(--op-ink); outline-offset: 0; }
.op-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Chips */
.op-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.op-chip {
	min-height: 44px; padding: 10px 14px;
	border: 1px solid var(--op-ink); border-radius: 0;
	background: var(--op-paper); color: var(--op-ink);
	font-size: 14px; font-weight: 700; cursor: pointer;
	transition: background-color .15s, color .15s;
}
.op-chip[aria-pressed="true"] { background: var(--op-ink); color: var(--op-paper); }
.op-chip--lg { padding: 12px 16px; font-size: 15px; }
.op-chip--filter { padding: 9px 13px; }
.op-chip__count { font-weight: 400; }
a.op-chip { display: inline-flex; align-items: center; box-sizing: border-box; }
a.op-chip:hover { text-decoration: none; }
.op-chip.is-active { background: var(--op-ink); color: var(--op-paper); }
.op-group-label { font-size: 14px; font-weight: 700; }
.op-group-label--15 { font-size: 15px; }
.op-field-group { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.op-field-group--10 { gap: 10px; }
legend.op-group-label { padding: 0; margin-bottom: 8px; }
.op-field-group--10 > legend.op-group-label { margin-bottom: 10px; }

/* Checkbox (custom): ganze Zeile klickbar */
.op-check {
	position: relative; min-height: 44px;
	display: flex; gap: 12px; align-items: flex-start;
	font-size: 14px; line-height: 1.5; cursor: pointer; text-align: left;
}
.op-check__input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer; }
.op-check__box {
	flex: none; width: 18px; height: 18px; margin-top: 1px;
	border: 1px solid currentColor; background: transparent; color: var(--op-ink);
	display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1;
}
.op-check__input:checked + .op-check__box { background: var(--op-signal); border-color: var(--op-ink); }
.op-on-ink .op-check__input:checked + .op-check__box { border-color: var(--op-paper); }
.op-check__input:checked + .op-check__box::after { content: "✓"; }
.op-check__input:focus-visible + .op-check__box { outline: 2px solid currentColor; outline-offset: 2px; }
.op-check a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.op-check--leitfaden { line-height: 1.45; }

.op-error { margin: 0; font-size: 14px; font-weight: 700; color: var(--op-error); }
.op-on-ink .op-error { color: #ff8a80; }

/* ==========================================================================
   Gebührenrechner-Modul
   ========================================================================== */
.op-rechner { font-family: var(--op-sans); color: var(--op-ink); display: flex; flex-wrap: wrap; gap: 16px; }
.op-rechner__in {
	flex: 7 1 420px; background: var(--op-card); border-radius: var(--op-radius); padding: 24px;
	display: flex; flex-direction: column; gap: 22px; font-size: 15px; line-height: 1.3;
}
.op-rechner__field { display: flex; flex-direction: column; gap: 10px; }
.op-rechner__labelrow { display: flex; justify-content: space-between; gap: 12px; }
.op-rechner__val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-rechner__range { width: 100%; accent-color: var(--op-ink); }
.op-rechner__pair { display: flex; flex-wrap: wrap; gap: 22px 24px; }
.op-rechner__pair > .op-rechner__field { flex: 1 1 200px; }
.op-rechner__field--ls { padding-top: 18px; border-top: 1px solid var(--op-hairline); }
.op-rechner__out {
	flex: 5 1 300px; background: var(--op-ink); color: var(--op-paper); border-radius: var(--op-radius); padding: 24px;
	display: flex; flex-direction: column; gap: 16px;
}
.op-rechner__kicker { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--op-signal); }
.op-rechner__line { display: flex; flex-direction: column; gap: 6px; }
.op-rechner__linehead { display: flex; justify-content: space-between; font-size: 15px; }
.op-rechner__num { font-variant-numeric: tabular-nums; }
.op-rechner__bar { display: block; height: 10px; background: var(--op-on-ink-bar); }
.op-rechner__fill { display: block; height: 10px; background: var(--op-paper); }
.op-rechner__fill--ls { background: var(--op-signal); }
.op-rechner__diff { border-top: 1px solid var(--op-paper); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.op-rechner__difflabel { font-size: 15px; }
.op-rechner__diffnum { font: 700 clamp(40px, 7vw, 60px)/1 var(--op-serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.op-rechner__cta {
	margin-top: auto; background: var(--op-signal); color: var(--op-ink);
	padding: 15px 18px; font-size: 15px; font-weight: 700; text-align: center;
	transition: background-color .15s;
}
.op-rechner__cta:hover { background: var(--op-paper); text-decoration: none; }
.op-rechner__note { font-size: 12px; line-height: 1.5; color: var(--op-on-ink-muted); }

/* Segment-Schalter (Gebührenrechner, Rechtliches) */
.op-segment { display: flex; font: 700 14px/1 var(--op-sans); border: 1px solid var(--op-ink); }
.op-segment__btn {
	min-height: 44px; padding: 12px 16px; border: 0; border-radius: 0;
	background: var(--op-paper); color: var(--op-ink); cursor: pointer;
}
.op-segment__btn + .op-segment__btn { border-left: 1px solid var(--op-ink); }
.op-segment__btn[aria-pressed="true"],
.op-segment__btn[aria-current="page"] { background: var(--op-ink); color: var(--op-paper); }
a.op-segment__btn { min-height: 0; }
a.op-segment__btn:hover { text-decoration: none; }

/* ==========================================================================
   Anfrage-Box
   ========================================================================== */
.op-abox {
	font-family: var(--op-sans); color: var(--op-ink); background: var(--op-paper);
	border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-ink);
	display: flex; flex-wrap: wrap; gap: 0 48px;
}
.op-abox__info { flex: 5 1 320px; padding: 32px 0 36px; display: flex; flex-direction: column; gap: 18px; }
.op-abox__partner { padding: 16px; background: var(--op-card); border-radius: var(--op-radius); display: flex; flex-direction: column; gap: 6px; }
.op-abox__partner-title { font: 700 19px/1.25 var(--op-serif); }
.op-abox__partner-text { font-size: 14px; line-height: 1.55; }
.op-abox__main { flex: 7 1 420px; padding: 32px 0 36px; }
.op-abox__form { display: flex; flex-direction: column; gap: 18px; }
.op-calcinfo {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
	padding: 12px 14px; background: var(--op-parchment); border: 1px solid var(--op-hairline); border-radius: var(--op-radius); font-size: 14px;
}
.op-calcinfo__src { color: var(--op-muted); }
.op-abox__success { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.op-abox__success-title { font: 700 clamp(24px, 3.4vw, 32px)/1.15 var(--op-serif); letter-spacing: -.02em; }
.op-abox__success-text { font-size: 16px; line-height: 1.5; }
.op-textbtn {
	min-height: 44px; align-self: flex-start;
	background: none; border: 0; border-bottom: 1px solid var(--op-ink); border-radius: 0;
	padding: 4px 0; color: var(--op-ink); font-size: 15px; font-weight: 700; cursor: pointer;
}

/* ==========================================================================
   Zahlarten-Vergleich (Tabelle ab 721 px, Karten darunter)
   ========================================================================== */
.op-vgl__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0; font-family: var(--op-sans); }
.op-vgl__filterlabel { font-size: 14px; font-weight: 700; margin-right: 6px; }
.op-vgl__count { margin-left: auto; font-size: 14px; color: var(--op-muted); }
.op-vgl__scroll { overflow-x: auto; }
.op-vgl__table { min-width: 960px; font: 400 14px/1.4 var(--op-sans); }
.op-vgl__row { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)) minmax(0, .9fr); gap: 20px; }
.op-vgl__head { padding: 12px 0; border-bottom: 1px solid var(--op-hairline); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.op-vgl__head--ruled { border-top: 1px solid var(--op-hairline); }
.op-vgl__item { padding: 16px 0; border-bottom: 1px solid var(--op-hairline); align-items: baseline; }
.op-vgl__item.is-hl, .op-vcard.is-hl { background: var(--op-parchment); }
.op-vgl__name { display: block; font: 700 20px/1.2 var(--op-serif); }
.op-vgl__cta { font-weight: 700; text-decoration: underline; }
.op-vgl__cta.is-info { color: var(--op-muted); text-decoration: none; }
.op-vgl__empty { padding: 24px 0; font: 400 15px/1.4 var(--op-sans); }
.op-vgl__cards { display: none; }
.op-vcard { border: 1px solid var(--op-hairline); border-radius: var(--op-radius); padding: 16px; }
.op-vcard__name { display: flex; align-items: center; min-height: 44px; margin-bottom: 4px; font: 700 22px/1.2 var(--op-serif); }
.op-vcard__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--op-hairline); }
.op-vcard__label { color: var(--op-muted); }
.op-vcard__cta {
	margin-top: 8px; min-height: 44px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--op-ink); font-weight: 700; background: var(--op-signal); color: var(--op-ink);
}
.op-vcard__cta.is-info { background: transparent; color: var(--op-muted); }
.op-vcard__cta:hover { text-decoration: none; }
@media (max-width: 720px) {
	.op-vgl__scroll { display: none; }
	.op-vgl__cards { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; font: 400 14px/1.4 var(--op-sans); }
	.op-vgl__empty { padding: 16px 0; }
}

/* ==========================================================================
   Startseite
   ========================================================================== */
.op-top { display: flex; flex-wrap: wrap; gap: 40px; padding: 32px 0 44px; }
.op-lead { flex: 8 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.op-lead:hover { text-decoration: none; }
.op-lead__img { height: clamp(220px, 45vw, 470px); }
.op-metaline { display: flex; gap: 14px; font: 700 12px/1 var(--op-sans); letter-spacing: .07em; text-transform: uppercase; }
.op-metaline__muted { font-weight: 400; color: var(--op-muted); }
.op-lead__title { font: 700 clamp(30px, 5vw, 46px)/1.08 var(--op-serif); letter-spacing: -.02em; text-wrap: balance; }
.op-lead__text { max-width: 660px; font: 400 19px/1.5 var(--op-serif); text-wrap: pretty; }

.op-side { flex: 4 1 300px; display: flex; flex-direction: column; }
.op-zrow {
	display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px;
	padding: 15px 0; border-bottom: 1px solid var(--op-hairline);
	transition: background-color .15s;
}
.op-zrow:hover { text-decoration: none; background: var(--op-parchment); }
.op-zrow.is-hl { background: var(--op-parchment); padding-right: 12px; }
.op-zrow__num { font: 400 13px/1.6 var(--op-sans); color: var(--op-muted); }
.op-zrow__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 21px/1.2 var(--op-serif); }
.op-zrow__text { grid-column: 2; font: 400 14px/1.45 var(--op-sans); }
.op-side__rechner { margin-top: 20px; padding: 16px; background: var(--op-card); border-radius: var(--op-radius); display: flex; flex-direction: column; gap: 8px; }
.op-side__rechner:hover { text-decoration: none; }
.op-side__rechner-title { font: 700 19px/1.25 var(--op-serif); }
.op-side__rechner-text { font: 400 14px/1.45 var(--op-sans); }
.op-side__rechner-more { font: 700 14px/1.4 var(--op-sans); text-decoration: underline; }

/* Leitfaden-Band (schwarz) */
.op-guide { margin-top: 48px; background: var(--op-ink); color: var(--op-paper); border-radius: var(--op-radius); display: flex; flex-wrap: wrap; overflow: hidden; }
.op-guide__media { flex: 5 1 320px; position: relative; min-height: clamp(240px, 50vw, 380px); background: var(--op-on-ink-bar); }
.op-guide__media .op-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.op-guide__badge {
	position: absolute; left: 16px; top: 16px;
	background: var(--op-paper); color: var(--op-ink); padding: 7px 10px;
	font: 700 12px/1 var(--op-sans); letter-spacing: .07em; text-transform: uppercase;
}
.op-guide__body {
	flex: 7 1 420px;
	padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 44px);
	display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
.op-guide__text { margin: 0; max-width: 560px; font: 400 18px/1.5 var(--op-serif); }

/* Spenden-Band (blau) */
.op-donate { margin-top: 16px; background: var(--op-category); border-radius: var(--op-radius); display: flex; flex-wrap: wrap; overflow: hidden; }
.op-donate__body {
	flex: 7 1 460px;
	padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
	display: flex; flex-direction: column; gap: 16px;
}
.op-donate__text { margin: 0; max-width: 600px; font: 400 18px/1.5 var(--op-serif); }
.op-donate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.op-donate__img { flex: 5 1 320px; min-width: 0; min-height: clamp(240px, 50vw, 380px); aspect-ratio: 1 / 1; border-radius: 0; }

.op-branchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.op-branchen .op-tile { min-height: 170px; }
.op-sec-branchen { padding: 40px 0; }
.op-sec-branchen__title { border-bottom: 1px solid var(--op-ink); padding-bottom: 10px; margin-bottom: 20px; }

/* ==========================================================================
   Lastschrift, Zahlart, Branche
   ========================================================================== */
.op-wideimg { height: clamp(220px, 42vw, 420px); }
.op-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; font: 400 15px/1.45 var(--op-sans); }
.op-checklist > li { padding: 12px 0; border-bottom: 1px solid var(--op-hairline); }
.op-split__main { flex: 7 1 480px; }
.op-split__aside { flex: 5 1 300px; align-self: flex-start; }
.op-infocard { border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.op-infocard--category { background: var(--op-category); }
.op-infocard--card { background: var(--op-card); }
.op-infocard__title { font: 700 22px/1.2 var(--op-serif); }
.op-infocard__text { font: 400 15px/1.5 var(--op-sans); }
.op-infocard__link { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.4 var(--op-sans); text-decoration: underline; }

.op-zcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.op-zcard { background: var(--op-card); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.op-zcard.is-hl { background: var(--op-parchment); }
.op-zcard:hover { text-decoration: none; }
.op-zcard__name { font: 700 26px/1.15 var(--op-serif); letter-spacing: -.01em; }
.op-zcard__text { font: 400 15px/1.45 var(--op-sans); }
.op-zcard__facts { display: flex; flex-direction: column; border-top: 1px solid var(--op-hairline); margin-top: 4px; font: 400 13px/1.4 var(--op-sans); }
.op-zcard__fact { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.op-zcard__fact + .op-zcard__fact { border-top: 1px solid var(--op-hairline); }
.op-zcard__fact > :last-child { text-align: right; }
.op-sec-vgl { padding: 56px 0 8px; }
.op-sec-tiles { margin: 40px 0; }

.op-chiplinks { display: flex; flex-wrap: wrap; gap: 8px; }
.op-chiplink { padding: 12px 16px; background: var(--op-card); border-radius: var(--op-radius); font: 700 18px/1.2 var(--op-serif); transition: background-color .15s; }
.op-chiplink:hover { background: var(--op-category); text-decoration: none; }
.op-sec-title-gap { margin-bottom: 16px; }

.op-altcard { background: var(--op-parchment); border: 1px solid var(--op-hairline); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.op-altcard:hover { text-decoration: none; }
.op-altcard__name { font: 700 24px/1.2 var(--op-serif); }
.op-grid-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

.op-branche-hero__media { flex: 6 1 420px; position: relative; display: block; min-width: 0; min-height: clamp(260px, 55vw, 400px); max-height: 520px; border-radius: var(--op-radius); overflow: hidden; background: var(--op-card); }
.op-branche-hero__media .op-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.op-cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding-top: 20px; }
.op-col { display: flex; flex-direction: column; gap: 8px; padding-left: 16px; border-left: 1px solid var(--op-hairline); }
.op-col:hover { text-decoration: none; }
.op-col__title { font: 700 22px/1.2 var(--op-serif); }
.op-col__text { font: 400 15px/1.5 var(--op-sans); }
.op-pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding-top: 20px; }
.op-pcard { border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; background: var(--op-card); }
.op-pcard.is-first { background: var(--op-category); }
.op-pcard:hover { text-decoration: none; }
.op-pcard__name { font: 700 26px/1.15 var(--op-serif); }
.op-sec-plain { padding: 8px 0; }

/* ==========================================================================
   Gebührenrechner-Seite
   ========================================================================== */
.op-calchead { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.op-calchead .op-intro { max-width: none; }
.op-formula { font: 400 16px/1.5 var(--op-sans); }
.op-formula__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--op-hairline); }
.op-formula__term { font: 700 18px/1.3 var(--op-serif); }
.op-smallprint { margin: 16px 0 0; font: 400 14px/1.55 var(--op-sans); color: var(--op-muted); }

/* ==========================================================================
   Ratgeber und Beitrag
   ========================================================================== */
.op-filterbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0; border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-hairline); font-family: var(--op-sans); }
.op-feature { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 32px 0; border-bottom: 1px solid var(--op-hairline); }
.op-feature:hover { text-decoration: none; }
.op-feature__img { flex: 7 1 480px; min-width: 0; height: clamp(220px, 42vw, 420px); }
.op-feature__body { flex: 5 1 320px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.op-feature__title { font: 700 clamp(28px, 4.4vw, 40px)/1.1 var(--op-serif); letter-spacing: -.02em; text-wrap: balance; }
.op-feature__text { font: 400 18px/1.5 var(--op-serif); text-wrap: pretty; }
.op-sec-teasers { margin-top: 56px; }
.op-sec-gteasers { margin-top: 48px; }
.op-empty { padding: 40px 0; font: 400 18px/1.5 var(--op-serif); }

.op-arthead { max-width: 900px; padding: 28px 0; display: flex; flex-direction: column; gap: 16px; }
.op-arthead__kat { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; }
.op-arthead__teaser { margin: 0; font: 400 22px/1.45 var(--op-serif); text-wrap: pretty; }
.op-arthead__meta { font: 400 13px/1 var(--op-sans); color: var(--op-muted); }
.op-artimg { height: clamp(220px, 45vw, 480px); }
.op-artcols { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-top: 12px; align-items: flex-start; }
.op-artbody { flex: 8 1 560px; max-width: 760px; min-width: 0; }
.op-artbody > h2 { margin: 40px 0 0; font: 700 clamp(24px, 3.2vw, 30px)/1.15 var(--op-serif); letter-spacing: -.02em; }
.op-artbody > h3 { margin: 32px 0 0; font: 700 22px/1.2 var(--op-serif); }
.op-artbody > p { margin: 18px 0 0; font: 400 19px/1.62 var(--op-serif); text-wrap: pretty; }
.op-artbody > p a,
.op-artbody > ul a,
.op-artbody > ol a { text-decoration: underline; }
.op-artbody > ul,
.op-artbody > ol { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--op-hairline); font: 400 17px/1.5 var(--op-sans); }
.op-artbody > ul > li,
.op-artbody > ol > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 11px 0; border-bottom: 1px solid var(--op-hairline); }
.op-artbody > ul > li::before { content: "–"; }
.op-artbody > ol { counter-reset: op-ol; }
.op-artbody > ol > li::before { counter-increment: op-ol; content: counter(op-ol) "."; }
.op-artbody > .is-style-op-infobox,
.op-infobox {
	margin: 28px 0 0; padding: 18px 20px; background: var(--op-parchment);
	border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-ink);
}
/* Klassische Themes bekommen einen inneren Container (wp-block-group__inner-container). */
.is-style-op-infobox,
.is-style-op-infobox > .wp-block-group__inner-container,
.op-infobox { display: flex; flex-direction: column; gap: 8px; }
.is-style-op-infobox p,
.op-infobox p { margin: 0; font: 400 17px/1.55 var(--op-sans); }
.is-style-op-infobox > p:first-child,
.is-style-op-infobox > .wp-block-group__inner-container > p:first-child,
.op-infobox > :first-child { font: 700 12px/1 var(--op-sans); letter-spacing: .07em; text-transform: uppercase; }
.op-artbody > figure { margin: 28px 0 0; }
.op-artbody > figure img { display: block; width: 100%; height: auto; border-radius: var(--op-radius); }
.op-artbody > figure figcaption { margin-top: 8px; font: 400 13px/1.45 var(--op-sans); color: var(--op-muted); }
.op-artbody > blockquote { margin: 28px 0 0; padding-left: 20px; border-left: 3px solid var(--op-ink); }
.op-artbody > .op-shortcode { margin-top: 28px; }

.op-artaside { flex: 4 1 280px; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 20px; padding-top: 40px; }
.op-toc__link { display: block; padding: 12px 0; border-bottom: 1px solid var(--op-hairline); font: 400 15px/1.4 var(--op-sans); }
.op-ctabox { background: var(--op-ink); color: var(--op-paper); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.op-ctabox__title { font: 700 22px/1.2 var(--op-serif); }
.op-ctabox .op-btn { align-self: flex-start; }
.op-terms__link { display: block; padding: 10px 0; border-bottom: 1px solid var(--op-hairline); transition: background-color .15s; }
.op-terms__link:hover { text-decoration: none; background: var(--op-parchment); }
.op-terms__name { display: block; font: 700 17px/1.3 var(--op-serif); }
.op-terms__text { display: block; margin-top: 4px; font: 400 13px/1.45 var(--op-sans); color: var(--op-muted); }
.op-sec-more { padding: 56px 0 40px; }

/* ==========================================================================
   Glossar
   ========================================================================== */
.op-gbar {
	position: sticky; top: 0; z-index: 2; background: var(--op-paper);
	border-top: 1px solid var(--op-ink); border-bottom: 1px solid var(--op-hairline);
	padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
	font-family: var(--op-sans);
}
.admin-bar .op-gbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .op-gbar { top: 0; } }
.op-gbar__search {
	flex: 1 1 280px; max-width: 420px; background: transparent; border: 0; border-bottom: 1px solid var(--op-ink); border-radius: 0;
	padding: 10px 1px; font-size: 16px; color: var(--op-ink); outline: none; -webkit-appearance: none; appearance: none;
}
.op-gbar__search:focus { border-bottom-width: 2px; padding-bottom: 9px; }
.op-gbar__letters { flex: 1 1 320px; max-width: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; margin: 0; padding: 0; list-style: none; }
.op-gbar__letters > li { flex: none; }
.op-gbar__letter { display: block; min-width: 36px; padding: 13px 6px; text-align: center; font-size: 14px; font-weight: 700; transition: background-color .15s; }
a.op-gbar__letter:hover { background: var(--op-signal); text-decoration: none; }
.op-gbar__letter.is-disabled { color: var(--op-disabled); pointer-events: none; }
.op-ggroup { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: 28px 0 8px; border-bottom: 1px solid var(--op-ink); scroll-margin-top: var(--op-glossar-offset); }
.op-ggroup__letter { margin: 0; flex: 0 0 auto; min-width: 80px; white-space: nowrap; font: 700 clamp(34px, 6vw, 56px)/1 var(--op-serif); }
.op-ggroup__items { flex: 1 1 520px; display: flex; flex-direction: column; }
.op-gterm {
	display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; margin: 0 -12px;
	border-bottom: 1px solid var(--op-hairline); scroll-margin-top: var(--op-glossar-offset);
}
.op-gterm.is-hl { background: var(--op-parchment); }
.op-gterm__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.op-gterm__name { margin: 0; font: 700 22px/1.25 var(--op-serif); }
.op-gterm__aka { font: 400 14px/1.3 var(--op-sans); color: var(--op-muted); }
.op-gterm__text { max-width: 760px; font: 400 16px/1.55 var(--op-sans); }
.op-gterm__more { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.4 var(--op-sans); text-decoration: underline; }

/* ==========================================================================
   Leitfaden
   ========================================================================== */
.op-lf { display: flex; flex-wrap: wrap; gap: 40px 56px; padding: 28px 0 40px; align-items: flex-start; }
.op-lf__text { flex: 6 1 480px; display: flex; flex-direction: column; gap: 18px; }
.op-lf__toc { margin-top: 12px; }
.op-lf__toc .op-numlist { font-size: 16px; line-height: 1.45; }
.op-lf__card { flex: 5 1 380px; background: var(--op-ink); color: var(--op-paper); border-radius: var(--op-radius); overflow: hidden; }
.op-lf__media { position: relative; height: 220px; background: var(--op-on-ink-bar); }
.op-lf__media .op-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.op-lf__body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; font-family: var(--op-sans); }
.op-lf__form { display: flex; flex-direction: column; gap: 18px; }
.op-lf__title { font: 700 26px/1.2 var(--op-serif); }
.op-lf__fields { display: flex; flex-direction: column; font-size: 16px; }
.op-lf__fields input.op-input { -webkit-appearance: none; appearance: none; }
.op-lf__fields select.op-input { cursor: pointer; }
.op-lf__form .op-btn { align-self: flex-start; }
.op-lf__fine { font-size: 13px; line-height: 1.5; color: var(--op-on-ink-muted); }
.op-lf__fine a { text-decoration: underline; }
.op-lf__done { display: flex; flex-direction: column; gap: 12px; }
.op-lf__done-title { font: 700 clamp(22px, 3vw, 28px)/1.2 var(--op-serif); }
.op-lf__done-text { font-size: 16px; line-height: 1.5; }
.op-lf__done-link { align-self: flex-start; font-size: 15px; font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   Anfrage (3 Schritte)
   ========================================================================== */
.op-reqhead { padding: 28px 0; max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.op-reqhead .op-intro { max-width: none; }
.op-req { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; }
.op-req__form { flex: 7 1 520px; border-top: 1px solid var(--op-ink); padding-top: 24px; font-family: var(--op-sans); }
.op-req__steps { display: flex; flex-direction: column; gap: 22px; }
.op-req__progress { display: flex; flex-direction: column; gap: 10px; }
.op-req__stepnum { font-size: 14px; font-weight: 700; }
.op-req__bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.op-req__bar { display: block; height: 4px; background: var(--op-hairline); }
.op-req__bar.is-done { background: var(--op-ink); }
.op-req__step { display: flex; flex-direction: column; gap: 22px; }
.op-req__step--18 { gap: 18px; }
.op-req__step h2:focus { outline: none; }
.op-req__textarea { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 700; }
.op-req__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; border-top: 1px solid var(--op-hairline); }
.op-req__back { min-height: 44px; background: none; border: 0; padding: 12px 0; color: var(--op-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.op-req__back[aria-disabled="true"] { opacity: .3; cursor: default; }
.op-req__done { display: flex; flex-direction: column; gap: 16px; }
.op-req__done-kicker { font-size: 14px; font-weight: 700; }
.op-summary { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--op-hairline); font-size: 15px; line-height: 1.45; }
.op-summary__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--op-hairline); }
.op-summary dt { color: var(--op-muted); }
.op-summary dd { margin: 0; }
.op-req__links { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.op-req__links a { font-size: 15px; font-weight: 700; text-decoration: underline; }
.op-req__links button { min-height: 44px; background: none; border: 0; padding: 0; color: var(--op-ink); font-size: 15px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.op-req__aside { flex: 5 1 320px; display: flex; flex-direction: column; gap: 20px; font-family: var(--op-sans); }
.op-kpis { background: var(--op-card); border-radius: var(--op-radius); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; }
.op-kpis__title { grid-column: 1 / -1; font: 700 19px/1.25 var(--op-serif); }
.op-kpis__item { display: flex; flex-direction: column; gap: 4px; }
.op-kpis__num { font: 700 26px/1 var(--op-serif); }
.op-kpis__label { font-size: 13px; }

/* ==========================================================================
   Über onlinepay.de
   ========================================================================== */
.op-about-hero { padding-bottom: 40px; gap: 32px 56px; }
.op-about-hero__img { flex: 6 1 420px; min-width: 0; min-height: clamp(240px, 50vw, 360px); max-height: 460px; aspect-ratio: 4 / 3; }
.op-about { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.op-about__main { flex: 7 1 480px; display: flex; flex-direction: column; gap: 16px; }
.op-about__text { margin: 0; font: 400 19px/1.6 var(--op-serif); text-wrap: pretty; }
.op-about__text p { margin: 0; }
.op-about__text p + p { margin-top: 16px; }
.op-principles { flex: 5 1 300px; align-self: flex-start; background: var(--op-card); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.op-principles__item { padding: 10px 0; border-bottom: 1px solid var(--op-hairline); font: 400 15px/1.5 var(--op-sans); }
.op-principles__item:last-child { border-bottom: 0; }
.op-partner { display: flex; flex-wrap: wrap; gap: 24px 56px; padding-top: 20px; }
.op-partner__text { flex: 6 1 420px; display: flex; flex-direction: column; gap: 16px; }
.op-focus { flex: 6 1 420px; display: flex; flex-direction: column; font-family: var(--op-sans); }
.op-focus__label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding-bottom: 10px; }
.op-focus__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--op-hairline); align-items: center; }
.op-focus__row:last-child { border-bottom: 1px solid var(--op-hairline); }
.op-focus__pct { font: 700 24px/1 var(--op-serif); }
.op-focus__bar { display: block; height: 10px; background: var(--op-card); }
.op-focus__fill { display: block; height: 10px; background: var(--op-ink); }
.op-focus__text { grid-column: 2; font-size: 14px; line-height: 1.45; }
.op-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 32px; }
.op-fact { background: var(--op-card); border-radius: var(--op-radius); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.op-fact__num { font: 700 clamp(26px, 4vw, 36px)/1.1 var(--op-serif); }
.op-fact__label { font: 400 14px/1.4 var(--op-sans); }
.op-ctaband {
	margin-top: 48px; background: var(--op-ink); color: var(--op-paper); border-radius: var(--op-radius);
	padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px;
}
.op-ctaband__title { max-width: 640px; font: 700 clamp(24px, 3.4vw, 32px)/1.15 var(--op-serif); letter-spacing: -.02em; }

/* ==========================================================================
   Rechtliches und Standardseiten
   ========================================================================== */
.op-legal { max-width: 820px; }
.op-legal .op-segment { width: max-content; margin: 28px 0 20px; }
.op-legal__body { display: flex; flex-direction: column; }
.op-legal__title { margin: 28px 0 8px; font: 700 clamp(32px, 5vw, 48px)/1.05 var(--op-serif); letter-spacing: -.025em; }
.op-legal__body > h2 { margin: 24px 0 8px; font: 700 22px/1.2 var(--op-serif); }
.op-legal__body > h3 { margin: 20px 0 8px; font: 700 18px/1.3 var(--op-serif); }
.op-legal__body > p,
.op-legal__body > ul,
.op-legal__body > ol { margin: 0; font: 400 17px/1.6 var(--op-sans); }
.op-legal__body > p + p { margin-top: 12px; }
.op-legal__body a { text-decoration: underline; }
.op-page-content { max-width: 760px; padding-bottom: 8px; }

/* 404 / Suche */
.op-404 { padding: 28px 0 40px; display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
.op-search { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; max-width: 640px; font-family: var(--op-sans); }
.op-search .op-input { flex: 1 1 280px; font-size: 16px; }

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

/* Druck */
@media print {
	.op-header__mobile, .op-utility, .op-nav, .op-ctabar, .op-abox, .op-footer, .op-artaside, .op-gbar { display: none !important; }
	.op-main { padding: 0; }
}