/**
 * EZZE Website – Seitenstyles.
 *
 * Alles ist unter .ezze-site gekapselt, damit Theme und Elementor-Header/Footer
 * unberührt bleiben. Werte entsprechen der Elementor-Startseite (Manrope,
 * Dunkelblau #160647, Blau #0062d2). Farben und Abstände als Tokens.
 */

.ezze-site {
	--ezze-blue: #0062d2;
	--ezze-blue-strong: #004fa9;
	--ezze-blue-soft: #edf6ff;
	--ezze-blue-badge: #d4edfa;
	--ezze-blue-line: #dbe8f8;
	--ezze-navy: #160647;
	--ezze-ink: #160647;
	--ezze-muted: rgba(22, 6, 70, 0.65);
	--ezze-green: #16a34a;
	--ezze-bg: #ffffff;
	--ezze-tint: #f4fafd;
	--ezze-radius: 16px;
	--ezze-radius-lg: 20px;
	--ezze-shadow: 0 10px 30px -12px rgba(22, 6, 70, 0.16);
	--ezze-shadow-sm: 0 2px 10px rgba(22, 6, 70, 0.05);
	--ezze-container: 1200px;
	--ezze-gutter: clamp(16px, 4vw, 32px);
	--ezze-section: clamp(56px, 7vw, 96px);
	--ezze-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	/* Elementor-Globals, auf die das Original-CSS der Preis-Cards verweist */
	--e-global-color-text: #160647;
	--color-text: #160646a6;

	font-family: var(--ezze-font);
	color: var(--ezze-muted);
	background: var(--ezze-bg);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.ezze-site *,
.ezze-site *::before,
.ezze-site *::after {
	box-sizing: border-box;
}

.ezze-site h1,
.ezze-site h2,
.ezze-site h3 {
	color: var(--ezze-ink);
	font-family: var(--ezze-font);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
	letter-spacing: -0.01em;
}

.ezze-site h1 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.2; letter-spacing: -0.027em; }
.ezze-site h2 { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.2; }
.ezze-site h3 { font-size: 20.8px; line-height: 1.3; }
.ezze-site p { margin: 0 0 1em; }
.ezze-site img { max-width: 100%; height: auto; display: block; }
.ezze-site ul, .ezze-site ol { margin: 0; padding: 0; list-style: none; }
.ezze-site button { font-family: inherit; }

.ezze-site a { color: var(--ezze-blue); text-underline-offset: 3px; }
.ezze-site a:hover { color: var(--ezze-blue-strong); }
/* Links im Fließtext immer unterstreichen: Das Theme nimmt die Unterstreichung weg, und Blau allein
   hebt sich vom Fließtext nur mit ca. 1,1:1 ab (WCAG 1.4.1). Links mit eigener Klasse (Buttons, Karten,
   Pfeil-Links) und Navigationen in Header und Footer regeln ihre Darstellung selbst. */
main .ezze-site :where(p, li, dd, td, figcaption, blockquote) a:where(:not([class])) { text-decoration: underline; text-decoration-thickness: 1px; }
main .ezze-site :where(p, li, dd, td, figcaption, blockquote) a:where(:not([class])):hover { text-decoration-thickness: 2px; }

.ezze-site .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;
}

/* Hervorhebung im Titel: blauer Balken unter dem Wort (wie auf der Live-Seite) */
.ezze-site .ezze-mark {
	background-image: linear-gradient(180deg, transparent 69%, var(--ezze-blue) 0);
	background-repeat: no-repeat;
}

/* ---------- Layout ---------- */

.ezze-container {
	width: 100%;
	/* Inhaltsbreite 1200px, der Seitenabstand kommt obendrauf */
	max-width: calc(var(--ezze-container) + 2 * var(--ezze-gutter));
	margin: 0 auto;
	padding: 0 var(--ezze-gutter);
}
.ezze-container--narrow { max-width: 860px; }

.ezze-section { padding: var(--ezze-section) 0; }
.ezze-section--tight { padding-top: 0; }
.ezze-section__head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.ezze-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.ezze-section__head h2 { margin-bottom: 16px; }
.ezze-section__head .ezze-lead { margin-bottom: 0; }

.ezze-eyebrow {
	color: var(--ezze-blue);
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 14px;
}
.ezze-lead { font-size: 17px; line-height: 1.75; }
.ezze-center { text-align: center; }
.ezze-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.ezze-actions--center { justify-content: center; }

/* Helle Panels wie die Elementor-Container */
.ezze-panel {
	background: var(--ezze-tint);
	border-radius: var(--ezze-radius-lg);
	padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 80px);
}
.ezze-panel--pad { padding-bottom: clamp(28px, 5vw, 60px); }

.ezze-card {
	background: #fff;
	border: 1px solid var(--ezze-blue-line);
	border-radius: var(--ezze-radius);
	padding: 28px 24px;
	box-shadow: var(--ezze-shadow-sm);
}
.ezze-card h3 { margin-bottom: 10px; }
.ezze-card p:last-child { margin-bottom: 0; }
.ezze-site .ezze-card__link { color: inherit; text-decoration: none; }
.ezze-site .ezze-card__link:hover { color: var(--ezze-blue); text-decoration: underline; }

.ezze-checks { display: grid; gap: 10px; }
.ezze-checks li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; text-align: left; }
/* Häkchen mittig zur ersten Textzeile: (Zeilenhöhe − Icon) / 2, unabhängig von Schriftgröße (Patrick, 2026-10-11). Ohne lh-Unterstützung gilt der feste Wert für 16px. */
.ezze-checks .ezze-icon { flex: none; width: 18px; height: 18px; margin-top: 5px; margin-top: calc((1lh - 18px) / 2); color: var(--ezze-blue); }
.ezze-checks--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; }
.ezze-checks--left { justify-content: flex-start; }

/* ---------- Buttons ---------- */

.ezze-site .ezze-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	--ezze-btn-pad: 17px;
	padding: 0 20px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	overflow: hidden;
	transition: background-color .45s cubic-bezier(.76, 0, .24, 1), transform .15s ease;
}
/* Slotmachine-Effekt: Der Text rollt beim Hover einmal nach oben durch,
 * dabei wechselt die Button-Farbe (Blau <-> Dunkelblau). */
.ezze-site .ezze-btn__text { display: block; }
/* Der Text läuft über die volle Button-Höhe durch: oben raus, von unten wieder rein. */
.ezze-site .ezze-btn__roll {
	position: relative;
	display: block;
	white-space: nowrap;
	padding: var(--ezze-btn-pad) 0;
	transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}
.ezze-site .ezze-btn__roll::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding: var(--ezze-btn-pad) 0;
	text-align: center;
}
.ezze-site .ezze-btn:hover .ezze-btn__roll { transform: translateY(-100%); }
.ezze-site .ezze-btn--primary { background: var(--ezze-blue); color: #fff; }
.ezze-site .ezze-btn--primary:hover { background: var(--ezze-navy); color: #fff; }
.ezze-site .ezze-btn--dark { background: var(--ezze-navy); color: #fff; }
.ezze-site .ezze-btn--dark:hover { background: var(--ezze-blue); color: #fff; }
.ezze-site .ezze-btn:active { transform: translateY(1px); }

/* ---------- Hero ---------- */

.ezze-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Die hellblaue Fläche wird vom Video aus gezeichnet (siehe .ezze-hero__video .ezze-video::before):
	   Sie reicht von oben bis 100px (bei 1200px Breite, mobil proportional) unter die Videomitte und endet
	   in einer Pfeilspitze. So bleibt die Spitze stehen, auch wenn das Transkript aufklappt. */
	--ezze-hero-arrow: 6vw;
	--ezze-hero-video-ratio: calc(5 / 12); /* Höhe / Breite der Videobühne */
	--ezze-hero-tip-offset: calc(1 / 12);  /* Spitze unter der Videomitte */
	padding: clamp(48px, 6vw, 80px) 0 0;
	text-align: center;
}
.ezze-hero__inner { position: relative; z-index: 1; }
.ezze-hero .ezze-eyebrow { margin-bottom: 20px; }
.ezze-hero h1 { max-width: 1100px; margin: 0 auto 20px; }
.ezze-site .ezze-hero__lead { max-width: 680px; margin: 0 auto; font-size: 18px; line-height: 1.75; }
.ezze-hero .ezze-actions { margin: 36px 0 44px; }
.ezze-hero__video { margin-top: 56px; container-type: inline-size; }
.ezze-hero__video .ezze-video { position: relative; }
.ezze-hero__video .ezze-video::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -4000px;
	left: 50%;
	width: 100vw;
	height: calc(4000px + 100cqw * (var(--ezze-hero-video-ratio) / 2 + var(--ezze-hero-tip-offset)));
	transform: translateX(-50%);
	background: var(--ezze-tint);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ezze-hero-arrow)), 50% 100%, 0 calc(100% - var(--ezze-hero-arrow)));
	pointer-events: none;
}

/* ---------- Video ---------- */

.ezze-video { margin: 0; }
.ezze-video__stage {
	position: relative;
	border-radius: var(--ezze-radius-lg);
	overflow: hidden;
	box-shadow: var(--ezze-shadow);
	/* Nie ein dunkler Hintergrund unter Poster oder Video: An den runden Ecken schimmerte er durch die
	   Kantenglättung als schwarze Pixel. clip-path schneidet zusätzlich das Video selbst sauber zu
	   (overflow allein beschneidet ein Video-Layer in Chrome nicht immer ohne Rand). */
	background: transparent;
	isolation: isolate;
	clip-path: inset(0 round var(--ezze-radius-lg));
	aspect-ratio: 1200 / 500;
}
.ezze-hero__video .ezze-video__stage { aspect-ratio: 1200 / 500; }
.ezze-video__stage video,
.ezze-site .ezze-video__poster { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ezze-site .ezze-video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}
.ezze-site .ezze-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.ezze-video__play-icon {
	position: relative;
	display: grid; place-items: center;
	width: 100px; height: 100px;
	border-radius: 50%;
	background: var(--ezze-navy);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .35s;
}
/* Puls-Wellen: zwei Ringe laufen versetzt nach außen. */
.ezze-video__play-icon::before,
.ezze-video__play-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .7);
	animation: ezze-pulse 2.6s ease-out infinite;
	pointer-events: none;
}
.ezze-video__play-icon::after { animation-delay: 1.3s; }
/* Dreieck optisch zentriert: Schwerpunkt minimal rechts der Kreismitte. */
.ezze-video__play-icon svg { position: relative; display: block; width: 34px; height: 34px; margin-left: 3px; }
.ezze-video__play-text {
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .95);
	color: var(--ezze-ink);
	font-weight: 700;
}
.ezze-site .ezze-video__play:hover { color: #fff; }
.ezze-site .ezze-video__play:hover .ezze-video__play-icon { background: var(--ezze-blue); transform: scale(1.08); }
/* Transkript: dezente Pille unter dem Video, der Text klappt darunter als Karte auf. */
/* Wiedergabe direkt im Container: Bühne wird erst 16:9, wenn das Video Bilddaten hat (JS setzt is-playing).
   Bis dahin bleibt das Poster mit Play-Button sichtbar, das Video lädt unsichtbar dahinter. */
.ezze-video__stage video { position: absolute; inset: 0; opacity: 0; }
/* Funktionsvideo in einer eigenen Section (z. B. Focus Outlines): volle 16:9-Bühne, damit das Poster
   (Programmoberfläche) nicht beschnitten wird; Breite begrenzt, Leiste und Transkript folgen der Bühne. */
.ezze-feature-video { max-width: 960px; margin: 0 auto; container-type: inline-size; }
.ezze-feature-video .ezze-video__stage { aspect-ratio: 16 / 9; }
.ezze-video.is-loading .ezze-video__play { cursor: progress; }
.ezze-video.is-loading .ezze-video__play-icon { opacity: .7; }
.ezze-video.is-playing .ezze-video__stage video { position: static; opacity: 1; }
/* Bühne ist exakt 16:9 wie das Video, daher kein schwarzer Hintergrund nötig (er erzeugte die dunklen Ecken). */
.ezze-video.is-playing .ezze-video__stage { aspect-ratio: 16 / 9; background: transparent; }
.ezze-video.is-playing .ezze-video__stage video { object-fit: cover; background: transparent; border-radius: inherit; }
.ezze-video__stage:fullscreen { border-radius: 0; box-shadow: none; clip-path: none; background: #000; }
.ezze-video.is-playing .ezze-video__stage:fullscreen video { object-fit: contain; border-radius: 0; }
.ezze-video__stage:fullscreen video { width: 100%; height: 100%; }
.ezze-hero__video .ezze-video.is-playing { --ezze-hero-video-ratio: calc(9 / 16); }
/* Steuerleiste unter dem Video: links Untertitel (Schalter + Sprache als ein Segment) und Vollbild,
   rechts das Transkript. Gleiche Höhe und Rahmen wie die übrigen Flächen, ruhiger Hover ohne Schatten.
   Die Regeln sind bewusst spezifisch, damit Theme-Stile für button/select (volle Breite, Ränder) nicht greifen. */
.ezze-video__controls {
	container-type: inline-size;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
	margin: 16px 0 0;
	text-align: left;
}
/* Erst mit laufendem Video kommt die Leiste dazu: links Untertitel/Vollbild, rechts das Transkript. */
.ezze-video__controls.has-bar { justify-content: space-between; }
.ezze-video__bar.is-revealed { animation: ezze-video-bar-in .45s ease-out both; }
@keyframes ezze-video-bar-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ezze-site .ezze-video__controls[hidden],
.ezze-site .ezze-video__bar[hidden],
.ezze-site .ezze-video__transcript-panel[hidden] { display: none; }
.ezze-video__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.ezze-site .ezze-video__controls button,
.ezze-site .ezze-video__controls select {
	box-sizing: border-box;
	width: auto; max-width: 100%; min-width: 0; height: 40px; min-height: 0;
	margin: 0;
	box-shadow: none;
	font: 600 14px/1 Manrope, system-ui, sans-serif; letter-spacing: normal; text-transform: none;
	color: var(--ezze-ink);
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.ezze-site .ezze-video__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 0 14px;
	border: 1px solid var(--ezze-blue-line); border-radius: 10px;
	background: #fff;
	white-space: nowrap;
}
.ezze-site .ezze-video__btn .ezze-icon { flex: none; width: 18px; height: 18px; stroke-width: 1.8; }
.ezze-site .ezze-video__btn:hover { border-color: var(--ezze-blue); color: var(--ezze-blue); background: #fff; }
.ezze-site .ezze-video__controls button:focus-visible,
.ezze-site .ezze-video__controls select:focus-visible { outline: 2px solid var(--ezze-blue); outline-offset: 2px; }
.ezze-site .ezze-video__btn--fs .ezze-icon:nth-of-type(2),
.ezze-site .ezze-video__btn--fs.is-fullscreen .ezze-icon:nth-of-type(1) { display: none; }
.ezze-site .ezze-video__btn--fs.is-fullscreen .ezze-icon:nth-of-type(2) { display: block; }
/* Transkript als dezenter Textlink (kein Kasten); die Zielfläche bleibt 40px hoch. */
.ezze-site .ezze-video__controls .ezze-video__btn--transcript {
	gap: 6px; padding: 0 6px;
	border-color: transparent; background: transparent;
	color: var(--ezze-blue);
}
.ezze-site .ezze-video__btn--transcript .ezze-video__btn-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(0, 98, 210, .35); }
.ezze-site .ezze-video__controls .ezze-video__btn--transcript:hover { border-color: transparent; background: transparent; color: var(--ezze-blue-strong); }
.ezze-site .ezze-video__btn--transcript:hover .ezze-video__btn-text { text-decoration-color: currentColor; }
.ezze-site .ezze-video__btn--transcript .ezze-icon { width: 16px; height: 16px; }
.ezze-site .ezze-video__btn--transcript .ezze-icon:last-child { width: 16px; height: 16px; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.ezze-site .ezze-video__btn--transcript[aria-expanded="true"] .ezze-icon:last-child { transform: rotate(-180deg); }

/* Untertitel-Segment: Schalter und Sprache teilen sich einen Rahmen. */
.ezze-video__cc {
	display: inline-flex; align-items: stretch;
	border: 1px solid var(--ezze-blue-line); border-radius: 10px;
	background: #fff;
}
.ezze-video__cc:hover { border-color: #b9d3f0; }
.ezze-site .ezze-video__controls .ezze-video__cc .ezze-video__btn { height: 38px; border: 0; border-radius: 9px 0 0 9px; }
.ezze-site .ezze-video__cc .ezze-video__btn:only-child { border-radius: 9px; }
.ezze-site .ezze-video__cc .ezze-video__btn:focus-visible,
.ezze-site .ezze-video__cc .ezze-video__lang:focus-visible { outline-offset: -2px; }
.ezze-site .ezze-video__btn[aria-pressed="true"],
.ezze-site .ezze-video__btn[aria-pressed="true"]:hover { background: var(--ezze-blue); color: #fff; }
.ezze-site .ezze-video__controls .ezze-video__lang {
	height: 38px;
	padding: 0 34px 0 14px;
	border: 0; border-left: 1px solid var(--ezze-blue-line); border-radius: 0 9px 9px 0;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23160647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
	appearance: none; -webkit-appearance: none;
}
.ezze-site .ezze-video__lang:hover { color: var(--ezze-blue); }

/* Transkript als Panel unter der Leiste (mit JS); Lesebreite begrenzt. */
.ezze-site .ezze-video__transcript-panel { margin: 12px 0 0; text-align: left; font-size: 15px; }
.ezze-video__transcript-panel p { max-width: 72ch; margin: 10px 0 0; font-size: .95rem; }
.ezze-video__transcript-panel p:first-child { margin-top: 0; }
.ezze-js .ezze-video__transcript-panel:not([hidden]) { animation: ezze-faq-open .3s ease-out both; }

/* Schmale Spalte/Handy: Vollbild nur als Symbol (Name bleibt für Screenreader), Transkript in eigener Zeile. */
@container (max-width: 560px) {
	.ezze-site .ezze-video__controls .ezze-video__btn--fs { width: 40px; padding: 0; }
	.ezze-site .ezze-video__btn--fs .ezze-video__btn-text {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
	}
	.ezze-video__bar { flex: 1 1 100%; flex-wrap: nowrap; }
	.ezze-video__cc { flex: 1 1 auto; min-width: 0; }
	.ezze-site .ezze-video__controls .ezze-video__cc .ezze-video__lang { flex: 1 1 auto; }
	.ezze-site .ezze-video__controls.has-bar .ezze-video__btn--transcript { margin-inline: auto; }
}
@media (forced-colors: active) {
	.ezze-site .ezze-video__btn[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ezze-site .ezze-video__controls button,
	.ezze-site .ezze-video__controls select,
	.ezze-site .ezze-video__btn .ezze-icon { transition: none; }
	.ezze-js .ezze-video__transcript-panel:not([hidden]) { animation: none; }
	.ezze-video__bar.is-revealed { animation: none; }
}
.ezze-video__transcript { margin: 24px auto 0; max-width: 760px; padding: 0; text-align: center; font-size: 15px; }
.ezze-video__transcript-toggle { display: block; cursor: pointer; list-style: none; }
.ezze-video__transcript-toggle::-webkit-details-marker { display: none; }
.ezze-video__transcript-btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 16px 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--ezze-blue-line);
	box-shadow: 0 1px 2px rgba(22, 6, 70, .05);
	color: var(--ezze-ink);
	font-size: 14px; font-weight: 600; line-height: 1;
	transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ezze-video__transcript-btn .ezze-icon { width: 16px; height: 16px; stroke-width: 1.8; opacity: .75; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s ease; }
.ezze-video__transcript-toggle:hover .ezze-video__transcript-btn { border-color: var(--ezze-blue); color: var(--ezze-blue); box-shadow: 0 4px 12px rgba(0, 98, 210, .12); transform: translateY(-1px); }
.ezze-video__transcript-toggle:hover .ezze-icon { opacity: 1; }
.ezze-video__transcript[open] .ezze-video__transcript-btn .ezze-icon:last-child { transform: rotate(-180deg); }
.ezze-video__transcript-body {
	margin: 16px auto 0;
	padding: 20px 24px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--ezze-blue-line);
	border-radius: 16px;
}
.ezze-js .ezze-video__transcript[open] .ezze-video__transcript-body { animation: ezze-faq-open .3s ease-out both; }
.ezze-video__transcript p { margin: 10px 0 0; font-size: .95rem; }
.ezze-video__transcript p:first-child { margin-top: 0; }

@keyframes ezze-pulse {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Schritte ---------- */

.ezze-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; counter-reset: step; }
.ezze-step { position: relative; text-align: center; padding: 44px 28px 36px; }
.ezze-step__no {
	position: absolute;
	top: 30px; left: 50%;
	transform: translateX(-66px);
	display: inline-grid; place-items: center;
	min-width: 44px; height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--ezze-blue-badge);
	color: var(--ezze-blue);
	font-size: 15px;
	font-weight: 600;
	z-index: 1;
}
.ezze-step__illu { width: 112px; margin: 0 auto 22px; }
.ezze-step h3 { margin-bottom: 12px; }

/* ---------- AI-Powered ---------- */

.ezze-ai {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
}
.ezze-ai__copy h2 { margin-bottom: 20px; }
.ezze-ai__copy .ezze-lead { margin-bottom: 0; }
.ezze-ai__copy .ezze-actions { margin: 28px 0 24px; }
.ezze-ai__list { display: grid; gap: 14px; }
.ezze-ai-card { display: flex; gap: 20px; align-items: flex-start; padding: 24px 28px; }
.ezze-ai-card img { flex: none; width: 64px; height: 64px; }
.ezze-ai-card h3 { font-size: 20px; margin-bottom: 6px; }
.ezze-ai-card p { font-size: 16px; }

.ezze-site .ezze-showcases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 36px; }
.ezze-showcase {
	display: flex; flex-direction: column;
	background: var(--ezze-tint);
	border-radius: var(--ezze-radius-lg);
	padding: 44px 30px 30px;
}
.ezze-showcase h3 { font-size: 24px; margin-bottom: 16px; }
.ezze-showcase p { margin-bottom: 26px; }
.ezze-showcase__visual { margin-top: auto; }

/* ---------- Mehr als nur ein Test ---------- */

.ezze-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 1040px; margin: 0 auto; }
.ezze-feature-card { padding: 28px 40px 36px; border: 0; }
.ezze-feature-card__illu { max-width: 220px; margin: 0 auto 22px; }
.ezze-feature-card h3 { font-size: 22px; margin-bottom: 14px; }

/* ---------- Pläne & Preise ---------- */
/* Karten, Umschalter und Karussell: assets/css/plans.css (Original der Live-Seite). */

.ezze-launch { color: var(--ezze-blue); font-weight: 500; font-size: 18px; margin: 18px 0 0 !important; }
.ezze-site .ezze-plans-section { margin-top: 8px; }
.ezze-site .ezze-plans-section + .ezze-center { margin-top: 36px; }

/* ---------- Analytics ---------- */

.ezze-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-right: 0; }
.ezze-split__copy .ezze-lead { margin-bottom: 0; }
.ezze-split__visual .ezze-shot { border-radius: var(--ezze-radius-lg) 0 0 var(--ezze-radius-lg); box-shadow: var(--ezze-shadow); }
.ezze-split__visual .ezze-shot--illu { background: #fff; overflow: hidden; box-shadow: none; }
.ezze-split__visual .ezze-shot--illu svg { display: block; width: 100%; height: auto; }

/* ---------- FAQ ---------- */

.ezze-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 8vw, 110px); align-items: center; }
.ezze-faq-layout__copy .ezze-lead { margin-bottom: 0; }
.ezze-panel--faq { padding: 14px; }
.ezze-faq { display: grid; gap: 14px; }
.ezze-faq__item {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--ezze-shadow-sm);
	transition: background-color .35s ease, box-shadow .35s ease;
}
.ezze-faq__item summary {
	/* Pfeil sitzt mittig zur ersten Fragezeile: Icon-Box = eine Zeilenhöhe der Frage, oben ausgerichtet. */
	--ezze-faq-q-size: 16px; --ezze-faq-q-lh: 1.3;
	display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 24px 28px;
	cursor: pointer;
	list-style: none;
}
.ezze-faq__item summary::-webkit-details-marker { display: none; }
.ezze-faq__item summary h3 { margin: 0; font-size: var(--ezze-faq-q-size); line-height: var(--ezze-faq-q-lh); font-weight: 600; }
.ezze-faq__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; height: calc(var(--ezze-faq-q-size, 16px) * var(--ezze-faq-q-lh, 1.3)); color: var(--ezze-ink); opacity: .8; transform-origin: center; transition: transform .4s cubic-bezier(.4, 0, .2, 1), color .3s ease, opacity .3s ease; }
.ezze-faq__icon .ezze-icon { display: block; width: 18px; height: 18px; stroke-width: 1.6; }
/* Geöffnet: Karte wird transparent (verschmilzt mit dem Panel), Pfeil blau nach oben. */
.ezze-faq__item[open]:not(.ezze-faq__item--js),
.ezze-faq__item.is-open { background: transparent; box-shadow: none; }
.ezze-faq__item[open]:not(.ezze-faq__item--js) .ezze-faq__icon,
.ezze-faq__item.is-open .ezze-faq__icon { transform: rotate(-180deg); color: var(--ezze-blue); opacity: 1; }
.ezze-faq__answer { padding: 0 28px 24px; font-size: 16px; color: var(--ezze-muted); }
.ezze-faq__answer p:last-child { margin-bottom: 0; }
/* Höhen-Animation: Mit JS bleibt <details> offen, die Antwort fährt über grid-template-rows auf und zu. */
.ezze-js .ezze-faq__item--js .ezze-faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1); }
/* visibility: zugeklappte Antworten sind für Screenreader und Tab-Taste unerreichbar; erst nach dem Zufahren ausgeblendet. */
.ezze-js .ezze-faq__item--js .ezze-faq__answer { min-height: 0; overflow: hidden; padding-bottom: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .45s; }
/* Der untere Abstand ist Inhalt statt Padding, damit er im zugeklappten Zustand mit auf 0 fährt. */
.ezze-js .ezze-faq__item--js .ezze-faq__answer::after { content: ''; display: block; height: 24px; }
.ezze-js .ezze-faq__item--js.is-open .ezze-faq__body { grid-template-rows: 1fr; }
.ezze-js .ezze-faq__item--js.is-open .ezze-faq__answer { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
@keyframes ezze-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- CTA ---------- */

.ezze-cta { position: relative; overflow: hidden; text-align: center; padding: clamp(56px, 7vw, 96px) var(--ezze-gutter); }
.ezze-cta__inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.ezze-cta__inner h2 { font-size: clamp(28px, 3.8vw, 54px); margin-bottom: 20px; }
.ezze-cta__inner .ezze-lead { margin-bottom: 0; }
.ezze-cta__inner .ezze-actions { margin: 32px 0 0; }
.ezze-cta__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Vier Kennzahl-Kacheln, vollständig innerhalb der Box. Beim Scrollen in den
 * Viewport fahren sie von außen herein (links von links, rechts von rechts). */
.ezze-js .ezze-cta__deco.ezze-reveal { opacity: 1; transform: none; transition: none; }
.ezze-cta__deco .ezze-kpis { display: contents; }
.ezze-cta__deco .ezze-kpi { position: absolute; margin: 0; padding: 16px 20px 18px; gap: 4px; border-radius: 14px; box-shadow: none; }
/* Die Ecken am Boxrand sind eckig, nur die inneren Ecken bleiben abgerundet */
.ezze-cta__deco .ezze-kpi--score,
.ezze-cta__deco .ezze-kpi--trend { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ezze-cta__deco .ezze-kpi--pages,
.ezze-cta__deco .ezze-kpi--findings { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ezze-cta__deco .ezze-kpi--score { left: 0; top: 64px; width: 150px; }
.ezze-cta__deco .ezze-kpi--pages { right: 0; top: 64px; width: 142px; }
.ezze-cta__deco .ezze-kpi--trend { left: 0; bottom: 64px; width: 232px; }
.ezze-cta__deco .ezze-kpi--findings { right: 0; bottom: 64px; width: 206px; }
.ezze-js .ezze-cta__deco .ezze-kpi { opacity: 0; transform: translateX(var(--from, -60px)); transition: opacity .9s ease var(--d, 0s), transform 1.1s cubic-bezier(.22, 1, .36, 1) var(--d, 0s); }
.ezze-js .ezze-cta__deco .ezze-kpi--pages,
.ezze-js .ezze-cta__deco .ezze-kpi--findings { --from: 60px; }
.ezze-js .ezze-cta__deco .ezze-kpi--pages { --d: .15s; }
.ezze-js .ezze-cta__deco .ezze-kpi--trend { --d: .3s; }
.ezze-js .ezze-cta__deco .ezze-kpi--findings { --d: .45s; }
.ezze-js .ezze-cta__deco.is-visible .ezze-kpi { opacity: 1; transform: none; }
@media (max-width: 1180px) { .ezze-cta__deco { display: none; } }

/* ---------- SEO-Text ---------- */

.ezze-prose h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 20px; }
.ezze-prose h3 { font-size: 22px; margin: 36px 0 12px; }
.ezze-prose p { font-size: 16px; }
.ezze-prose .ezze-actions { margin-top: 36px; }

/* ---------- Responsiv ---------- */

@media (max-width: 1024px) {
	.ezze-steps, .ezze-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Showcase-Karten: unter 1025px untereinander, Text links und Grafik rechts (mit .ezze-site, weil die Grundregel es auch hat). */
	.ezze-site .ezze-showcases { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ezze-showcase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 48px); padding: 36px; }
	.ezze-showcase h3, .ezze-showcase p { grid-column: 1; }
	.ezze-showcase p { margin-bottom: 0; }
	.ezze-showcase__visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
	/* Einzelne letzte Karte in zwei Spalten mittig statt links allein. */
	.ezze-steps:not(.ezze-steps--four) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 15px); }
	.ezze-ai, .ezze-split, .ezze-faq-layout { grid-template-columns: 1fr; }
	.ezze-split { padding-right: clamp(20px, 5vw, 80px); }
	.ezze-split__visual .ezze-shot { border-radius: var(--ezze-radius-lg); }
}

/* Smartphone: Häkchen-Zeilen untereinander als linksbündige Liste; der Block als Ganzes bleibt mittig,
   die Icons stehen auf einer Linie (Patrick, 11.10.). */
@media (max-width: 767px) {
	.ezze-checks--row { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; }
	.ezze-checks--left { margin-inline: 0; }
}

@media (max-width: 640px) {
	.ezze-site h1 { font-size: 32px; }
	.ezze-site h2 { font-size: 26px; }
	.ezze-site h3 { font-size: 19px; }
	.ezze-site .ezze-hero__lead { font-size: 16px; }
	.ezze-steps, .ezze-feature-grid { grid-template-columns: 1fr; gap: 20px; }
	.ezze-site .ezze-showcases { gap: 20px; }
	.ezze-feature-card { padding: 24px; }
	.ezze-showcase { display: flex; padding: 28px 20px 20px; }
	.ezze-showcase p { margin-bottom: 22px; }
	.ezze-showcase__visual { width: 100%; max-width: 360px; margin: 0 auto; }
	.ezze-steps:not(.ezze-steps--four) > :last-child:nth-child(odd) { width: auto; }
	.ezze-ai-card { gap: 16px; padding: 20px; }
	.ezze-ai-card img { width: 52px; height: 52px; }
	.ezze-cta__deco { display: none; }
	.ezze-hero { --ezze-hero-video-ratio: calc(3 / 4); }
	.ezze-hero__video .ezze-video__stage { aspect-ratio: 4 / 3; }
	.ezze-video__play-icon { width: 72px; height: 72px; }
}

/* Schmale Smartphones. Button-Paare bleiben nebeneinander und brechen nur um, wenn der Platz fehlt (Patrick, 11.10.);
   etwas weniger Innenabstand, damit typische Paare wie „Kostenlos starten“ + „Dokumentation“ in eine Zeile passen. */
@media (max-width: 480px) {
	.ezze-site .ezze-actions { gap: 8px; }
	/* 14px Schrift und 14px Innenabstand: auch Hero-Paare wie „Jetzt kostenlos starten“ + „Funktionen ansehen“ passen bei 390px; Höhe bleibt 49px. */
	.ezze-site .ezze-actions .ezze-btn { padding-left: 14px; padding-right: 14px; font-size: 14px; --ezze-btn-pad: 15.75px; }
	/* Lange Button-Texte dürfen umbrechen statt aus dem Bildschirm zu laufen; Höhe bleibt bei 49px. */
	.ezze-site .ezze-btn { max-width: 100%; --ezze-btn-pad: 15px; }
	.ezze-site .ezze-btn__roll { white-space: normal; line-height: 1.25; text-align: center; }
	.ezze-faq__item summary { padding: 20px; }
	/* Lange Komposita (z. B. „Auftragsverarbeitungsvertrag“) trennen statt überlaufen. */
	.ezze-faq__answer { padding-left: 20px; padding-right: 20px; overflow-wrap: break-word; hyphens: auto; }
}
@media (max-width: 400px) {
	.ezze-ai-card { flex-direction: column; gap: 12px; }
	.ezze-ai-card img { width: 48px; height: 48px; }
}

.ezze-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ezze-kpi {
	position: relative;
	display: flex; flex-direction: column; gap: 6px;
	padding: 18px 20px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px -14px rgba(22, 6, 70, .18);
	text-align: left;
}
.ezze-kpi__label { font-size: 12px; font-weight: 600; color: var(--ezze-ink); }
.ezze-kpi__value { font-size: 28px; font-weight: 700; color: var(--ezze-ink); line-height: 1.1; letter-spacing: -0.02em; }
.ezze-kpi__value small { font-size: 15px; font-weight: 600; margin-left: 1px; }
.ezze-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ezze-kpi__row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.ezze-kpi__sub { font-size: 12px; color: var(--ezze-blue); font-weight: 500; }
.ezze-kpi__trend { display: inline-flex; align-items: center; gap: 4px; color: #22a559; font-weight: 600; font-size: 13px; margin-top: 2px; }
.ezze-illu .ezze-kpi__trend svg { width: 14px; height: 14px; }
.ezze-kpi__bars { display: flex; gap: 7px; align-items: flex-end; height: 64px; margin-top: 8px; }
.ezze-kpi__bars i { display: block; flex: 1; height: var(--h); border-radius: 3px; background: #dbe8fb; }
.ezze-kpi__bars i:nth-child(1) { background: #0062d2; }
.ezze-kpi__bars--mini { height: 44px; margin: 0; width: 64px; gap: 6px; }
.ezze-kpi__bars--mini i:nth-child(1) { background: #dbe8fb; }
.ezze-kpi__bars--mini i:nth-child(2) { background: #0062d2; }
.ezze-illu .ezze-kpi__spark { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.ezze-kpi__axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--ezze-muted); }
.ezze-kpi__list { display: grid; gap: 9px; margin-top: 10px; }
.ezze-kpi__list i { display: block; height: 7px; border-radius: 4px; background: #e6ecf3; position: relative; padding-left: 22px; }
.ezze-kpi__list i::before { content: ''; position: absolute; left: 0; top: -4px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5' fill='none' stroke='%2322a559' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ezze-kpi__list i { background: linear-gradient(90deg, transparent 0 22px, #e3e8f0 22px); }
.ezze-kpi__list i:nth-child(2) { width: 100%; }
.ezze-kpi__list i:nth-child(1), .ezze-kpi__list i:nth-child(3) { width: 78%; }

/* ---------- Illustrations ---------- */

.ezze-illu svg { display: block; width: 100%; height: auto; overflow: visible; }
.ezze-illu .i-t { font-family: inherit; }
/* Schrift in Illustrationen scharf rendern (Windows/Desktop, DPR 1) */
.ezze-illu svg { text-rendering: geometricPrecision; }
/* Nach Ende einer Einblend-Animation wird sie entfernt; ein dauerhaft aktiver Transform hält die Grafik sonst als weichgezeichnete Ebene. */
.ezze-js .ezze-illu .i-done { animation: none !important; }

/*
 * Animationen laufen nur mit JS (Klasse .ezze-js am <html>) und erst, wenn die
 * Illustration im Viewport ist (.is-visible). Ohne JS oder bei reduzierter
 * Bewegung ist sofort der Endzustand zu sehen.
 */
.ezze-js .ezze-illu:not(.is-visible) *,
.ezze-js .ezze-illu:not(.is-visible) *::before,
.ezze-js .ezze-illu:not(.is-visible) *::after { animation-play-state: paused !important; }
/* Zentral für einmalige Animationen und Schleifen. !important ist nötig, weil die
   animation-Kurzschreibweise der Klassen unten den Status sonst wieder auf running setzt. */

.ezze-js .ezze-illu .i-pop { transform-box: fill-box; transform-origin: center; animation: ezze-pop .55s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.ezze-js .ezze-illu .i-slide { animation: ezze-slide .6s ease-out var(--d, 0s) both; }
.ezze-js .ezze-illu .i-slide-up { animation: ezze-slide-up .7s ease-out var(--d, .1s) both; }
.ezze-js .ezze-illu .i-slide-left { animation: ezze-slide-left .7s ease-out var(--d, .1s) both; }
.ezze-js .ezze-illu .i-grow { transform-box: fill-box; transform-origin: left center; animation: ezze-grow 1s ease-out var(--d, .2s) both; }
.ezze-js .ezze-illu .i-draw { animation: ezze-draw 1.4s ease-out var(--d, .2s) both; }
.ezze-js .ezze-illu .i-type { animation: ezze-fade .5s ease-out var(--d, 0s) both; }
.ezze-js .ezze-illu .i-tag { transform-box: fill-box; transform-origin: left center; animation: ezze-grow .5s ease-out var(--d, 0s) both; }

/* Dauerhafte, ruhige Bewegungen */
.ezze-illu .i-flow { animation: ezze-flow 1.6s linear infinite; }
.ezze-illu .i-flow-slow { animation: ezze-flow 14s linear infinite; }
.ezze-illu .i-bob { animation: ezze-bob 6s ease-in-out infinite; }
.ezze-illu .i-bob-alt { animation: ezze-bob 7s ease-in-out -3s infinite; }
.ezze-illu .i-twinkle { transform-box: fill-box; transform-origin: center; animation: ezze-twinkle 2.6s ease-in-out infinite; }
.ezze-js .ezze-illu .i-star-in { transform-box: fill-box; transform-origin: center; animation: ezze-star-in .8s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s) both; }
.ezze-js .ezze-illu .i-ring-in { transform-box: fill-box; transform-origin: center; animation: ezze-ring-in 1s cubic-bezier(.34, 1.4, .64, 1) var(--d, 0s) both; }
.ezze-illu .i-float { animation: ezze-float 7s ease-in-out infinite; }
.ezze-illu .i-star-glint { transform-box: fill-box; transform-origin: center; animation: ezze-star-glint 4.8s ease-in-out var(--d, 0s) infinite; }
.ezze-illu .i-scan { animation: ezze-scan 4s ease-in-out infinite; }
.ezze-illu .i-glow { animation: ezze-glow 3s ease-in-out infinite; }
.ezze-illu .i-rays { transform-box: fill-box; transform-origin: center bottom; animation: ezze-rays 3s ease-in-out infinite; }
/* Drehende Elemente drehen sich um ihre eigene Mitte, nicht um den SVG-Ursprung (transform-box als Attribut greift in Chrome nicht). */
.ezze-illu .i-spin { transform-box: fill-box; transform-origin: center; animation: ezze-spin 8s linear infinite; }
.ezze-illu .i-spin-slow { transform-box: fill-box; transform-origin: center; animation: ezze-spin 40s linear infinite; }
.ezze-illu .i-wand { transform-box: fill-box; transform-origin: 0% 100%; animation: ezze-wand 3.2s ease-in-out infinite; }
.ezze-illu .i-fan rect:nth-child(1) { transform-box: fill-box; transform-origin: bottom left; animation: ezze-fan 4s ease-in-out infinite; }
.ezze-illu .i-tick-loop { animation: ezze-tick-loop 9s ease-out var(--d, 0s) infinite; }
.ezze-illu .i-pulse { transform-box: fill-box; transform-origin: center; animation: ezze-breathe 4.5s ease-in-out infinite; }
.ezze-illu .i-ring { transform-box: fill-box; transform-origin: center; animation: ezze-ring 4s ease-out infinite; }
.ezze-illu .i-drop { animation: ezze-drop 18s ease-in-out var(--d, 0s) infinite; }
.ezze-illu .i-dots { opacity: 0; }
.ezze-js .ezze-illu .i-dots { opacity: 1; animation: ezze-hide .2s linear calc(var(--d, 0s) - .2s) both paused; }
.ezze-js .ezze-illu.is-visible .i-dots { animation-play-state: running; }
.ezze-illu .i-dots circle { animation: ezze-dot 1s ease-in-out infinite; }
.ezze-illu .i-dots circle:nth-child(2) { animation-delay: -.3s; }
.ezze-illu .i-dots circle:nth-child(3) { animation-delay: -.6s; }
/* Rollen-Schalter: 6-Sekunden-Schleife, Tabellenzelle läuft mit */
.ezze-illu .i-toggle-track { animation: ezze-toggle-track 6s ease-in-out infinite; }
.ezze-illu .i-toggle-knob { animation: ezze-toggle-knob 6s ease-in-out infinite; }
.ezze-illu .i-sync-on { transform-box: fill-box; transform-origin: center; animation: ezze-sync-on 6s ease-in-out infinite; }
.ezze-illu .i-sync-off { animation: ezze-sync-off 6s ease-in-out infinite; }

/* Veröffentlichen-Ablauf: 7-Sekunden-Schleife */
.ezze-illu .i-cursor { animation: ezze-cursor 7s ease-in-out infinite; }
/* Blinkende Text-Schreibmarke (nicht der wandernde Mauszeiger i-cursor). */
.ezze-illu .i-caret { animation: ezze-caret 1.1s steps(1, end) infinite; }
/* Scanlinie über einem Foto (alt-hero): fährt ruhig von oben nach unten und zurück. */
.ezze-illu .i-scanline { animation: ezze-scanline 5s ease-in-out infinite alternate; }
.ezze-illu .i-press { transform-box: fill-box; transform-origin: center; animation: ezze-press 7s ease-in-out infinite; }
.ezze-illu .i-click-burst { opacity: 0; animation: ezze-burst 7s ease-out infinite; }
.ezze-illu .i-check-seq { transform-box: fill-box; transform-origin: center; animation: ezze-check-seq 7s ease-out infinite; animation-delay: calc(var(--d) - 1.4s); }
.ezze-illu .i-progress { transform-box: fill-box; transform-origin: left center; animation: ezze-progress 7s ease-in-out infinite; }
.ezze-illu .i-wait-seq { animation: ezze-wait-seq 7s linear infinite; animation-delay: calc(var(--d) - 1.4s); }
.ezze-illu .i-spin-fast { transform-box: fill-box; transform-origin: center; animation: ezze-spin 1s linear infinite; }
.ezze-illu .i-status-run { animation: ezze-status-run 7s ease-in-out infinite; }
.ezze-illu .i-status-done { animation: ezze-status-done 7s ease-in-out infinite; pointer-events: none; }
.ezze-illu .i-score-ring { animation: ezze-score 7s ease-out infinite; }

@keyframes ezze-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes ezze-slide { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ezze-slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes ezze-slide-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes ezze-grow { from { transform: scaleX(0); } to { transform: none; } }
/* visibility: hidden nur im Startzustand (auch während der Verzögerung): ein Strich mit runden Enden zeigt sonst
   schon vor dem Zeichnen einen Punkt am Pfadanfang (Score-Ring-Segmente, Linien). */
@keyframes ezze-draw { from { stroke-dashoffset: var(--len, 100); visibility: hidden; } to { stroke-dashoffset: var(--to, 0); } }
@keyframes ezze-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ezze-flow { to { stroke-dashoffset: -20; } }
@keyframes ezze-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ezze-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes ezze-ring-in { from { opacity: 0; transform: scale(.15); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ezze-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ezze-star-in { from { opacity: 0; transform: scale(0) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes ezze-star-glint { 0%, 14%, 100% { transform: none; } 7% { transform: scale(1.22) rotate(14deg); } 57% { transform: translateY(-3px); } }
@keyframes ezze-scan { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-18px, -22px); } 60% { transform: translate(-6px, -40px); } }
@keyframes ezze-glow { 0%, 100% { fill: #fff; } 50% { fill: #fff6cf; } }
@keyframes ezze-rays { 0%, 100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ezze-spin { to { transform: rotate(360deg); } }
@keyframes ezze-wand { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(6deg); } }
@keyframes ezze-fan { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes ezze-tick-loop { 0% { stroke-dashoffset: 100; opacity: 1; } 8% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 93% { stroke-dashoffset: 100; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 1; } }
@keyframes ezze-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ezze-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
@keyframes ezze-drop { 0%, 100% { opacity: 0; transform: translate(-16px, -14px); } 5% { opacity: 1; } 10%, 18% { opacity: 1; transform: translate(0, 0); } 23% { opacity: 0; transform: translate(0, 0); } }
@keyframes ezze-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ezze-hide { to { opacity: 0; visibility: hidden; } }
@keyframes ezze-toggle-track { 0%, 38%, 96%, 100% { fill: #c6ccd8; } 44%, 90% { fill: #0062d2; } }
@keyframes ezze-toggle-knob { 0%, 38%, 96%, 100% { transform: translateX(0); } 44%, 90% { transform: translateX(var(--ezze-toggle-travel, 24px)); } }
@keyframes ezze-sync-on { 0%, 40%, 94%, 100% { opacity: 0; transform: scale(.5); } 48%, 88% { opacity: 1; transform: scale(1); } }
@keyframes ezze-sync-off { 0%, 40%, 94%, 100% { opacity: 1; } 48%, 88% { opacity: 0; } }

@keyframes ezze-caret { 50% { opacity: 0; } }
@keyframes ezze-scanline { from { transform: translateY(0); } to { transform: translateY(240px); } }
@keyframes ezze-cursor {
	0% { transform: translate(40px, 60px); opacity: 0; }
	8% { opacity: 1; }
	22%, 26% { transform: translate(-30px, -6px); }
	30% { transform: translate(-30px, -2px); }
	34%, 85% { transform: translate(-30px, -6px); opacity: 1; }
	95%, 100% { transform: translate(40px, 60px); opacity: 0; }
}
@keyframes ezze-press { 0%, 25%, 33%, 100% { transform: scale(1); } 29% { transform: scale(.95); } }
@keyframes ezze-burst { 0%, 28% { opacity: 0; } 31% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes ezze-check-seq {
	0%, 30% { opacity: 0; transform: scale(.5); }
	36%, 97% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1); }
}
@keyframes ezze-progress { 0%, 30% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
@keyframes ezze-wait-seq { 0%, 28% { opacity: 0; } 30%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ezze-status-run { 0%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes ezze-status-done { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes ezze-score { 0%, 66% { stroke-dashoffset: 100; } 86%, 100% { stroke-dashoffset: 14; } }

/* Einblenden von Karten beim Scrollen */
.ezze-js .ezze-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ezze-js .ezze-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ezze-site *,
	.ezze-site *::before,
	.ezze-site *::after {
		animation: none !important;
		transition: none !important;
	}
	.ezze-js .ezze-reveal { opacity: 1; transform: none; }
	.ezze-illu .i-click-burst, .ezze-illu .i-wait-seq, .ezze-illu .i-status-run, .ezze-illu .i-drop, .ezze-illu .i-dots, .ezze-illu .i-sync-off { opacity: 0 !important; }
	.ezze-illu .i-status-done, .ezze-illu .i-sync-on { opacity: 1; transform: none; }
	.ezze-js .ezze-cta__deco .ezze-kpi { opacity: 1; transform: none; }
}
/* Toolbar-Schalter „Bewegung reduzieren“ (html.wcag-reduce-motion): derselbe Endzustand wie bei der Systemeinstellung. */
html.wcag-reduce-motion.ezze-js .ezze-reveal { opacity: 1; transform: none; }
html.wcag-reduce-motion .ezze-illu .i-click-burst, html.wcag-reduce-motion .ezze-illu .i-wait-seq, html.wcag-reduce-motion .ezze-illu .i-status-run, html.wcag-reduce-motion .ezze-illu .i-drop, html.wcag-reduce-motion .ezze-illu .i-dots, html.wcag-reduce-motion .ezze-illu .i-sync-off { opacity: 0 !important; }
html.wcag-reduce-motion .ezze-illu .i-status-done, html.wcag-reduce-motion .ezze-illu .i-sync-on { opacity: 1; transform: none; }
html.wcag-reduce-motion.ezze-js .ezze-cta__deco .ezze-kpi { opacity: 1; transform: none; }

/* ======================================================================
   Seite „AI Alt Text“
   ====================================================================== */

/* Hero mit zwei Spalten: Text links, Mediathek-Illustration rechts, helle Fläche mit Pfeilspitze. */
.ezze-hero--split {
	background: var(--ezze-tint);
	padding: clamp(40px, 5vw, 72px) 0 calc(var(--ezze-hero-arrow) + clamp(24px, 3vw, 40px));
	text-align: left;
}
.ezze-hero--split::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: var(--ezze-hero-arrow);
	background: var(--ezze-bg);
	clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.ezze-hero--split .ezze-hero__inner { max-width: calc(1600px + 2 * var(--ezze-gutter)); }
.ezze-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ezze-hero__visual .ezze-illu svg { width: 100%; height: auto; overflow: visible; }
.ezze-hero--split h1 { margin: 0 0 20px; max-width: none; }
.ezze-site .ezze-hero--split .ezze-hero__lead { margin: 0; max-width: 560px; }
.ezze-hero--split .ezze-checks { margin: 28px 0 0; }
.ezze-hero--split .ezze-checks li { font-size: 16px; font-weight: 500; color: var(--ezze-ink); }
.ezze-hero--split .ezze-actions { margin: 32px 0 0; }
.ezze-hero__visual .ezze-illu { margin: 0; }
.ezze-site .ezze-btn .ezze-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.ezze-site .ezze-btn--light { background: #fff; color: var(--ezze-blue); }
.ezze-site .ezze-btn--light:hover { background: var(--ezze-blue-soft, #e3effd); color: var(--ezze-blue); }
.ezze-site .ezze-btn--sm { --ezze-btn-pad: 13px; padding: 0 18px; font-size: 14px; }

.ezze-section--tint { background: var(--ezze-tint); }
/* Eine eng anschließende Sektion (meist ein Panel) direkt nach einem Tint-Band braucht ihren oberen Abstand zurück:
   das Band endet sonst bündig an der Panelkante (alt-batch, image-review; Patrick 11.10.). */
.ezze-section--tint + .ezze-section--tight { padding-top: var(--ezze-section); }
.ezze-section__head--wide { max-width: 1060px; }
.ezze-section__head--wide .ezze-lead { max-width: 790px; margin-left: auto; margin-right: auto; }
.ezze-container--wide { max-width: calc(1400px + 2 * var(--ezze-gutter)); }
.ezze-container--why { max-width: calc(1530px + 2 * var(--ezze-gutter)); }
.ezze-container--trust { max-width: calc(1450px + 2 * var(--ezze-gutter)); }

/* Vier Gründe */
.ezze-site .ezze-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.ezze-reason { text-align: center; padding: 36px 16px 36px; border: 2px solid #dee7f4; border-radius: 18px; box-shadow: 0 6px 22px rgba(22, 6, 70, 0.06); }
.ezze-reason__icon { display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto 22px; border-radius: 50%; background: #eaf3fd; color: #0659ec; }
.ezze-reason__icon .ezze-icon { width: 72px; height: 72px; stroke-width: 1.2; }
.ezze-reason h3 { font-size: 17px; margin-bottom: 10px; }
@media (min-width: 1101px) { .ezze-reason h3 { white-space: nowrap; } }
.ezze-site .ezze-reason p { font-size: 16px; line-height: 1.6; max-width: 220px; margin-left: auto; margin-right: auto; }

.ezze-site .ezze-divider-note { display: flex; align-items: center; justify-content: center; gap: 24px; margin: clamp(32px, 4vw, 56px) 0 0; font-size: 16px; color: var(--ezze-muted); text-align: center; }
.ezze-divider-note::before, .ezze-divider-note::after { content: ''; flex: 0 1 190px; height: 1px; background: var(--ezze-blue-line); }

/* Mehr als nur ein Pflichtfeld */
.ezze-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ezze-why__copy .ezze-lead { margin-bottom: 0; }
.ezze-site .ezze-why__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.ezze-why__item { padding: 22px 18px 20px; box-shadow: none; border-color: #e7eef8; }
.ezze-why__item h3 { font-size: 16px; color: var(--ezze-blue); margin-bottom: 8px; }
.ezze-why__item p { font-size: 15px; line-height: 1.65; }
.ezze-why__visual .ezze-illu { margin: 0; max-width: 680px; margin-left: auto; }

/* Drei Wege */
.ezze-site .ezze-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ezze-way { position: relative; display: flex; flex-direction: column; text-align: center; padding: 30px 28px 26px; border-radius: 18px; box-shadow: none; }
.ezze-way h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; font-size: 20px; text-align: left; }
.ezze-way__check { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #eaf3fd; color: var(--ezze-blue); }
.ezze-way__check .ezze-icon { width: 22px; height: 22px; stroke-width: 1.6; }
.ezze-way__illu { margin: 0 0 22px; }
.ezze-way p { font-size: 16px; line-height: 1.6; flex: 1; }
.ezze-way__bar { display: block; width: 48px; height: 4px; margin: 18px auto 0; border-radius: 2px; background: #dbe8fb; }

/* Datenschutz & Kontrolle */
.ezze-trust { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 5vw, 64px); overflow: hidden; }
.ezze-trust__copy .ezze-lead { margin-bottom: 0; }
.ezze-trust__deco { position: absolute; margin: 0; pointer-events: none; }
.ezze-trust__deco--shield { width: 170px; left: 40%; top: 16px; }
.ezze-trust__deco--cloud { width: 210px; left: 32px; bottom: 16px; }
.ezze-trust__copy, .ezze-trust__list { position: relative; }
.ezze-site .ezze-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 30px 0 0; padding: 0; list-style: none; }
.ezze-chip { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--ezze-blue-line); font-size: 15px; font-weight: 600; color: var(--ezze-ink); }
.ezze-chip .ezze-icon { flex: none; width: 24px; height: 24px; color: var(--ezze-blue); stroke-width: 1.7; }
.ezze-site .ezze-trust__list { display: grid; gap: 12px; margin: 0; padding: 14px; list-style: none; background: #fff; border-radius: 24px; }
.ezze-trust__item { display: flex; gap: 20px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--ezze-blue-line); border-radius: 16px; }
.ezze-trust__icon { display: grid; place-items: center; flex: none; width: 70px; height: 70px; border-radius: 50%; background: #eaf3fd; color: var(--ezze-blue); }
.ezze-trust__icon .ezze-icon { width: 30px; height: 30px; stroke-width: 1.5; }
.ezze-trust__item h3 { font-size: 20px; margin-bottom: 6px; }
.ezze-trust__item p { font-size: 16px; margin: 0; }

/* Batch */
.ezze-batch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.ezze-batch__visual .ezze-illu { margin: 0; }
.ezze-site .ezze-batch__list { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.ezze-batch__item { display: flex; gap: 20px; align-items: flex-start; }
.ezze-batch__icon { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: #eaf3fd; color: var(--ezze-blue); }
.ezze-batch__icon .ezze-icon { width: 26px; height: 26px; stroke-width: 1.5; }
.ezze-batch__item h3 { font-size: 20px; margin: 4px 0 8px; }
.ezze-batch__item p { font-size: 16px; line-height: 1.6; margin: 0; }
.ezze-plan-cta { display: flex; gap: 28px; align-items: center; margin-top: 48px; padding: 20px 28px 20px 20px; border-radius: 20px; background: linear-gradient(135deg, #f6fbfe 0%, #dbe8fb 100%); border: 1px solid var(--ezze-blue-line); }
.ezze-plan-cta__illu svg { filter: drop-shadow(0 6px 16px rgba(0, 98, 210, .12)); }
.ezze-illu .i-flame { animation: ezze-flame .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: top center; }
@keyframes ezze-flame { from { transform: scaleY(.8); opacity: .8; } to { transform: scaleY(1.1); opacity: 1; } }
.ezze-plan-cta__illu { flex: none; width: 120px; margin: 0; }
.ezze-plan-cta h3 { font-size: 19px; color: var(--ezze-blue); margin-bottom: 6px; }
.ezze-plan-cta p { font-size: 15px; margin-bottom: 14px; }

/* Pläne & Kontingente */
.ezze-plans-intro { position: relative; }
.ezze-plans-intro__deco { position: absolute; margin: 0; pointer-events: none; }
.ezze-plans-intro__deco--left { width: 150px; left: 0; top: -8px; }
.ezze-plans-intro__deco--right { width: 190px; right: 0; top: 60px; }
.ezze-plans-intro .ezze-section__head { position: relative; }
.ezze-section--plans .ezze-plan-section { margin-top: 8px; }

/* FAQ ohne Panel, volle Breite */
/* FAQ auf den Funktionsseiten: gleicher Stil wie auf der Startseite (Karten im getönten Panel), nur breiter. */
.ezze-site .ezze-panel--faq-wide { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* CTA mit blassem Dekor */

@media (max-width: 1100px) {
	.ezze-site .ezze-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezze-site .ezze-ways { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 960px) {
	.ezze-hero__grid, .ezze-why, .ezze-trust, .ezze-batch { grid-template-columns: 1fr; }
	.ezze-hero__visual { order: -1; }
	.ezze-why__visual .ezze-illu { margin: 0 auto; }
	.ezze-trust__deco { display: none; }
	.ezze-plans-intro__deco { display: none; }
}
@media (max-width: 640px) {
	.ezze-site .ezze-reasons { grid-template-columns: 1fr; }
	.ezze-site .ezze-why__list, .ezze-site .ezze-chips { grid-template-columns: 1fr; }
	.ezze-trust { padding: 28px 20px; }
	.ezze-site .ezze-trust__list { padding: 10px; }
	.ezze-trust__item { padding: 18px; gap: 14px; }
	.ezze-plan-cta { flex-direction: column; align-items: flex-start; }
	.ezze-divider-note::before, .ezze-divider-note::after { flex-basis: 40px; }
}
/* Schmale Smartphones: Icon über dem Text, damit die Textspalte nicht zu eng wird. */
@media (max-width: 480px) {
	.ezze-trust__item { flex-direction: column; gap: 12px; }
	.ezze-trust__icon { width: 52px; height: 52px; }
	.ezze-trust__icon .ezze-icon { width: 24px; height: 24px; }
}

/* =====================================================================
   Seite „Preise“
   ===================================================================== */

/* Hero zentriert (gleicher Hintergrund und Pfeil wie der geteilte Hero) */
.ezze-hero--center { text-align: center; }
.ezze-hero--center .ezze-hero__inner { max-width: 880px; }
.ezze-hero--center h1 { margin: 0 auto 20px; }
.ezze-site .ezze-hero--center .ezze-hero__lead { margin: 0 auto 28px; max-width: 760px; }
.ezze-hero--center .ezze-checks--row { margin: 0 auto; }

/* Preis-Cards: volle Karten, Toggles mittig */
.ezze-section--pricing { padding-top: clamp(32px, 4vw, 56px); }
.ezze-section__head--pricing { margin-bottom: 0; }
.ezze-site .ezze-plans-section .ezze-plans-header { margin-bottom: 28px; }
.ezze-site .ezze-plans-section .ezze-plans-free-hint { margin: 28px auto 0; }
.ezze-site .ezze-plans-section .ezze-plans-header p { margin-left: auto; margin-right: auto; }
.ezze-site .ezze-plan-features { margin: 0; padding: 0; }
.ezze-site .ezze-plan-features li { margin: 0; }
/* margin-top auto: Button sitzt in jeder Karte unten, padding-top hält den Mindestabstand. */
.ezze-site .elementskit-pricing-btn-wraper { margin: auto 0 0; padding-top: 20px; }
.ezze-site .ezze-plan-feature-area { margin-top: 0; }
.ezze-site .ezze-plans-carousel.is-details-expanded .ezze-plan-feature-area { margin-top: 20px; }

/* Planvergleich: Abstand und Karte auf Tönung */
.ezze-section--compare .ezze-compare-section { margin-top: 8px; }
.ezze-section--compare .ezze-compare-card { border: 1px solid var(--ezze-blue-line); box-shadow: 0 18px 40px -30px rgba(22, 6, 70, .25); }
.ezze-site .ezze-compare-note { margin-top: 18px; }
.ezze-site .ezze-compare-plan-select-label { margin-bottom: 8px; }

.ezze-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
	.ezze-hero--center .ezze-checks--row { align-items: flex-start; }
}

/* Checkout-Buttons: globale Linkfarbe überschreiben */
.ezze-site a.elementskit-pricing-btn { color: #fff; text-decoration: none; }
.ezze-site a.elementskit-pricing-btn:hover, .ezze-site a.elementskit-pricing-btn:focus-visible { color: #fff; }
.ezze-site .ezze-plan-card[data-plan="free"] a.elementskit-pricing-btn,
.ezze-site .ezze-plan-card[data-plan="free"] a.elementskit-pricing-btn:hover { color: var(--ezze-blue); }
.ezze-site .ezze-hero--center .ezze-checks--row { margin-top: 28px; }

/* ======================================================================
   Seite „Barrierefreiheitstest“ und „Batch-Tests & Workflows“
   ====================================================================== */

.ezze-hero--test .ezze-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ezze-site .ezze-hero__intro { margin: 0 0 14px; max-width: 520px; font-size: 17px; font-weight: 600; line-height: 1.55; color: var(--ezze-ink); }

/* Vier Gründe mit Illustrationen */
.ezze-reason__illu { width: 84px; margin: 0 auto 20px; }
.ezze-reasons--test .ezze-reason { padding: 30px 16px 30px; }
.ezze-site .ezze-reasons--test .ezze-reason p { max-width: 240px; font-size: 15px; }

/* Realistisch eingeordnet */
.ezze-scope .ezze-section__head { max-width: 760px; }
.ezze-scope__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ezze-scope__card { background: #fff; border-radius: 20px; padding: 24px 22px 20px; box-shadow: 0 12px 34px rgba(22, 6, 70, .06); }
.ezze-scope__card h3 { display: flex; align-items: center; gap: 28px; margin: 0 0 20px; font-size: 24px; }
.ezze-scope__badge { display: grid; place-items: center; flex: none; width: 80px; height: 80px; border-radius: 16px; background: #e3effd; color: var(--ezze-blue); }
.ezze-scope__badge .ezze-icon { width: 34px; height: 34px; stroke-width: 1.5; }
.ezze-scope__card--manual .ezze-scope__badge { background: #efeaff; color: #7c3aed; }
.ezze-site .ezze-scope__card ul { list-style: none; margin: 0; padding: 0 12px; }
.ezze-site .ezze-scope__card li { display: flex; align-items: flex-start; gap: 12px; padding: 18px 4px; border-bottom: 1px solid #eef2f8; font-size: 18px; color: var(--ezze-ink); }
.ezze-site .ezze-scope__card li:last-child { border-bottom: 0; }
.ezze-scope__card li .ezze-icon { flex: none; width: 28px; height: 28px; margin-top: 2px; margin-top: calc((1lh - 28px) / 2); stroke-width: 1.4; color: var(--ezze-blue); }
.ezze-scope__card--manual li .ezze-icon { color: #7c3aed; }
.ezze-site .ezze-scope__more { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 16px 18px; border-radius: 12px; background: #f4f8fd; font-size: 16px; color: var(--ezze-muted); }
.ezze-scope__more .ezze-icon { flex: none; width: 26px; height: 26px; stroke-width: 1.4; color: #8a93a8; }
.ezze-scope__card--manual .ezze-scope__more { background: #f3effd; }
.ezze-note { display: flex; align-items: flex-start; gap: 24px; margin-top: 30px; padding: 24px 26px; background: #fff; border: 1px solid #dde6f3; border-radius: 12px; box-shadow: 0 10px 30px rgba(22, 6, 70, .05); }
.ezze-note__icon { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 12px; background: #e3effd; color: var(--ezze-blue); }
.ezze-note__icon .ezze-icon { width: 26px; height: 26px; stroke-width: 1.6; }
.ezze-note h3 { margin: 6px 0 6px; font-size: 18px; }
.ezze-site .ezze-note p { margin: 0; font-size: 14px; }

/* Feature-Splits (Text + Illustration) */
.ezze-fsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ezze-fsplit__copy .ezze-lead { margin-bottom: 0; }
.ezze-fsplit__copy .ezze-checks { margin: 28px 0 0; }
.ezze-fsplit__copy .ezze-actions { margin: 32px 0 0; }
.ezze-fsplit__visual .ezze-illu { margin: 0; }
.ezze-fsplit--panel { background: var(--ezze-tint); border-radius: 24px; overflow: hidden; padding: 0 clamp(24px, 5vw, 56px) 0 0; }
.ezze-fsplit--panel .ezze-fsplit__visual { align-self: end; padding: 40px 0 32px; }
.ezze-fsplit--panel .ezze-fsplit__visual .ezze-illu { margin: 0; }
.ezze-fsplit--panel .ezze-fsplit__copy { padding: clamp(32px, 4vw, 56px) 0; }
.ezze-fsplit--purple .ezze-eyebrow { color: #7c3aed; }
.ezze-site .ezze-fsplit--purple .ezze-checks .ezze-icon { color: #7c3aed; } /* KI-Abschnitte: Häkchen im KI-Lila (Patrick, 2026-10-11). */
.ezze-site .ezze-fsplit--panel.ezze-fsplit--purple { background: #f7f3fe; } /* KI-Panel: KI-Lila #7c3aed so hell wie --ezze-tint (Patrick, 2026-10-11). */
/* Unten Innenabstand und keine Beschneidung, damit Kartenschatten nicht am Panelrand enden (Patrick, 2026-10-10). */
.ezze-fsplit__visual--tint { background: var(--ezze-tint); border-radius: 24px; overflow: visible; padding: 24px 0 32px 20px; }
.ezze-fsplit__visual--tint .ezze-illu { margin: 0; }
.ezze-fsplit--reverse .ezze-fsplit__visual { order: -1; }
.ezze-site .ezze-fsplit__items { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 26px; }
.ezze-fsplit__items li { display: flex; gap: 24px; align-items: flex-start; }
.ezze-fsplit__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: #e3effd; color: var(--ezze-blue); }
.ezze-fsplit__icon .ezze-icon { width: 26px; height: 26px; stroke-width: 1.6; }
.ezze-fsplit__items h3 { margin: 4px 0 6px; font-size: 20px; }
.ezze-site .ezze-fsplit__items p { margin: 0; font-size: 16px; line-height: 1.6; }
.ezze-checks--muted li { color: var(--ezze-muted); font-weight: 500; }
.ezze-site .ezze-btn--purple { background: #7c3aed; color: #fff; }
.ezze-site .ezze-btn--purple:hover, .ezze-site .ezze-btn--purple:focus-visible { background: #6d28d9; color: #fff; }

/* Teaser-Karten */
.ezze-site .ezze-teasers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.ezze-teaser { padding: 28px 22px 26px; box-shadow: none; border-color: #e7eef8; }
.ezze-teaser__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 18px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); }
.ezze-teaser__icon .ezze-icon { width: 26px; height: 26px; stroke-width: 1.6; }
.ezze-teaser h3 { font-size: 18px; margin-bottom: 8px; }
.ezze-site .ezze-teaser p { font-size: 15px; line-height: 1.6; }
.ezze-site .ezze-teasers__action { margin: 36px 0 0; }
.ezze-site .ezze-plans__action { margin: 40px 0 0; }
.ezze-faq__answer ul { margin: 0 0 1em; padding-left: 22px; }
.ezze-faq__answer li { margin-bottom: 6px; }

@media (max-width: 1100px) {
	.ezze-site .ezze-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.ezze-fsplit, .ezze-scope__grid { grid-template-columns: 1fr; }
	.ezze-fsplit--panel { padding: 0 24px; }
	.ezze-fsplit--panel .ezze-fsplit__visual { padding: 24px 0 28px; }
	.ezze-fsplit--panel { row-gap: 0; } /* Handy: Abstand Grafik → Text kleiner, 28px unten bleiben für den Kartenschatten (Patrick, 2026-10-11). */
	.ezze-fsplit--panel .ezze-fsplit__copy { padding-top: 16px; }
	.ezze-fsplit--reverse .ezze-fsplit__visual, .ezze-fsplit .ezze-fsplit__visual { order: -1; }
	.ezze-hero--test .ezze-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ezze-site .ezze-teasers { grid-template-columns: 1fr; }
	.ezze-site .ezze-scope__card ul { padding: 0; }
	.ezze-site .ezze-scope__card li { align-items: flex-start; gap: 10px; font-size: 16px; padding: 14px 2px; }
	.ezze-scope__card li .ezze-icon { width: 22px; height: 22px; margin-top: 3px; margin-top: calc((1lh - 22px) / 2); }
	.ezze-scope__card h3 { font-size: 20px; gap: 16px; }
	.ezze-scope__badge { width: 60px; height: 60px; }
	.ezze-note { flex-direction: column; gap: 14px; }
}

/* Batch-Tests & Workflows: vier Schritte und Workflow-Karten */
.ezze-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ezze-steps--four .ezze-step { padding: 40px 22px 30px; }
.ezze-steps--four .ezze-step h3 { font-size: 19px; }
.ezze-site .ezze-steps--four .ezze-step p { font-size: 15px; line-height: 1.6; }
.ezze-site .ezze-workflows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.ezze-workflow { position: relative; padding: 30px 26px 26px; box-shadow: none; border-color: #e7eef8; }
.ezze-workflow__no { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); font-size: 14px; font-weight: 700; }
.ezze-workflow h3 { font-size: 22px; margin-bottom: 12px; }
.ezze-site .ezze-workflow p { font-size: 15px; line-height: 1.65; }
.ezze-site .ezze-workflow .ezze-checks { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid #eef2f8; }
.ezze-site .ezze-workflow .ezze-checks li { font-size: 15px; }
@media (max-width: 1100px) {
	.ezze-steps--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezze-site .ezze-workflows { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 640px) {
	.ezze-steps--four { grid-template-columns: 1fr; }
}

/* Seite Barrierefreiheits-Inspektor */
.ezze-site .ezze-teasers--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ezze-site .ezze-findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.ezze-finding { padding: 26px 24px 24px; box-shadow: none; border-color: #e7eef8; }
.ezze-finding__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ezze-finding__badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.ezze-finding__badge--warn { background: #fff4de; color: #b45309; }
.ezze-finding__badge--error { background: #fdecef; color: #e11d48; }
.ezze-finding__badge--wcag { background: #e3effd; color: var(--ezze-blue); }
.ezze-finding h3 { font-size: 18px; margin-bottom: 8px; }
.ezze-site .ezze-finding p { font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) {
	.ezze-site .ezze-teasers--three, .ezze-site .ezze-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ezze-site .ezze-teasers--three, .ezze-site .ezze-findings { grid-template-columns: 1fr; }
}

/* Abgrenzungs-Panel mit Link (Seite Alt-Text Batchverarbeitung) */
.ezze-site .ezze-scope__more a { display: inline-flex; align-items: center; gap: 12px; color: var(--ezze-blue); font-weight: 600; text-decoration: none; }
.ezze-site .ezze-scope__more a .ezze-icon { color: var(--ezze-blue); }
.ezze-site .ezze-scope__more a:hover, .ezze-site .ezze-scope__more a:focus-visible { text-decoration: underline; }

/* ---------- Download-Seite ---------- */

/* Version und Datum im Hero (Werte aus ezze_site_release()). */
.ezze-site .ezze-dl-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; list-style: none; margin: 26px 0 0; padding: 0; }
.ezze-site .ezze-dl-meta li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ezze-muted); }
.ezze-site .ezze-dl-meta strong { color: var(--ezze-ink); font-weight: 700; }
.ezze-dl-meta .ezze-icon { flex: none; width: 20px; height: 20px; color: var(--ezze-blue); }
.ezze-site .ezze-dl-meta a { color: var(--ezze-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border-radius: 4px; }
.ezze-site .ezze-dl-meta a:hover { text-decoration-thickness: 2px; }
.ezze-site .ezze-dl-meta a:focus-visible { outline: 2px solid var(--ezze-blue); outline-offset: 3px; }
.ezze-hero--download .ezze-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
/* Hero in normaler Inhaltsbreite (1200px) statt der breiten Split-Hero-Fläche (Patrick, 2026-10-10). */
.ezze-hero--download .ezze-hero__inner { max-width: calc(var(--ezze-container) + 2 * var(--ezze-gutter)); }
/* Integrationen: breite Split-Hero-Fläche, damit der Text in weniger Zeilen läuft; die Grafik bleibt höchstens 600px groß (Patrick, 2026-10-12). */
@media (min-width: 961px) { .ezze-hero--integrations .ezze-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ezze-site .ezze-hero--integrations .ezze-hero__intro { max-width: 600px; }
.ezze-hero--integrations .ezze-hero__visual .ezze-illu { max-width: 600px; margin-inline: auto; }
.ezze-site .ezze-dl-hero-img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* Weißer Button mit blauer Kontur, wo er auf weißem Grund steht. */
.ezze-site .ezze-btn--outline { box-shadow: inset 0 0 0 1.5px var(--ezze-blue); }

/* Voraussetzungen: Karten mit Symbol links wie im Original. */
.ezze-site .ezze-dl-req .ezze-teaser { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-content: start; }
.ezze-site .ezze-dl-req .ezze-teaser__icon { grid-row: span 2; margin: 0; }
.ezze-site .ezze-dl-req .ezze-teaser h3 { margin-top: 12px; }

/* Free oder Premium */
.ezze-site .ezze-dl-plan { display: flex; flex-direction: column; padding: 30px 32px 32px; }
.ezze-site .ezze-dl-plan .ezze-eyebrow { margin-bottom: 10px; }
.ezze-site .ezze-scope__card.ezze-dl-plan h3 { display: block; margin: 0 0 10px; }
.ezze-site .ezze-dl-plan__text { margin: 0 0 8px; font-size: 16px; }
.ezze-site .ezze-scope__card.ezze-dl-plan ul { padding: 0; margin: 0 0 24px; }
.ezze-site .ezze-scope__card.ezze-dl-plan li { padding: 10px 0; border-bottom: 0; font-size: 16px; }
.ezze-site .ezze-scope__card.ezze-dl-plan li .ezze-icon { width: 20px; height: 20px; margin-top: 4px; margin-top: calc((1lh - 20px) / 2); stroke-width: 1.8; }
.ezze-site .ezze-dl-plan .ezze-btn { align-self: flex-start; margin-top: auto; }

/* Noch Fragen? */
.ezze-site .ezze-dl-help { max-width: 640px; margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; }
.ezze-dl-help__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); }
.ezze-dl-help__icon .ezze-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.ezze-site .ezze-dl-help h3 { margin: 0 0 8px; font-size: 22px; }
.ezze-site .ezze-dl-help p { margin-left: auto; margin-right: auto; }
.ezze-site .ezze-dl-help .ezze-actions { margin: 20px 0 0; }

@media (max-width: 900px) {
	.ezze-hero--download .ezze-hero__grid { grid-template-columns: 1fr; }
	.ezze-site .ezze-dl-hero-img { max-width: 420px; }
}
@media (max-width: 600px) {
	.ezze-site .ezze-dl-plan { padding: 24px 20px; }
	.ezze-site .ezze-dl-plan .ezze-btn { align-self: stretch; }
	.ezze-site .ezze-dl-help .ezze-actions .ezze-btn { flex: 1 1 100%; }
}

/* ---------- Integrationen: Namensliste (Cookie-Banner) ---------- */
.ezze-site .ezze-int-tags__title { margin: 22px 0 10px; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--ezze-ink); letter-spacing: 0; }
.ezze-site .ezze-int-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ezze-site .ezze-int-tags li { margin: 0; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ezze-blue-line); color: var(--ezze-ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.ezze-site .ezze-int-tags--muted li { background: transparent; font-weight: 500; }
.ezze-site .ezze-int-note { margin: 18px 0 0; font-size: 14px; line-height: 1.6; }

/* ---------- Seite „Funktionen“ (pages/features.php) ---------- */

/* Sprungmarken zu den Funktionsbereichen im Hero. */
.ezze-site .ezze-feat-nav { margin: 40px auto 0; }
.ezze-site .ezze-feat-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.ezze-site .ezze-feat-nav li { margin: 0; }
.ezze-site .ezze-feat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--ezze-line, #dde6f3); border-radius: 999px; background: #fff; color: var(--ezze-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.ezze-site .ezze-feat-nav a:hover { border-color: var(--ezze-blue); color: var(--ezze-blue); }
.ezze-feat-group { scroll-margin-top: 24px; }
#ezze-feat-compare { scroll-margin-top: 24px; }

/* Funktionskarten: drei je Gruppe, Plan-Hinweis oben rechts, Link unten. */
.ezze-site .ezze-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.ezze-site .ezze-feat-card { display: flex; flex-direction: column; container-type: inline-size; padding: 28px 26px 26px; box-shadow: none; border-color: #e7eef8; }
.ezze-feat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ezze-feat-card__top .ezze-teaser__icon { margin: 0; flex: none; }
.ezze-site .ezze-feat-card__plan { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: 999px; background: #d4edfa; color: var(--ezze-ink); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; }
.ezze-site .ezze-feat-card h3 { font-size: 20px; margin: 0 0 8px; }
.ezze-site .ezze-feat-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ezze-site .ezze-feat-card__ai { display: inline-block; padding: 2px 8px; border-radius: 6px; background: #6d28d9; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; }
.ezze-site .ezze-feat-card p { font-size: 15px; line-height: 1.6; }
.ezze-site .ezze-feat-card .ezze-checks { margin: 4px 0 22px; padding-top: 18px; border-top: 1px solid #eef2f8; }
.ezze-site .ezze-feat-card .ezze-checks li { font-size: 15px; }
.ezze-site .ezze-feat-card__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; color: var(--ezze-blue); font-weight: 600; text-decoration: none; }
.ezze-site .ezze-feat-card__more .ezze-icon { width: 18px; height: 18px; color: var(--ezze-blue); }
.ezze-site .ezze-feat-card__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ezze-site .ezze-teasers .ezze-feat-card p { margin-bottom: 18px; }
@container (max-width: 260px) {
	.ezze-feat-card__top { flex-direction: column; }
}
@media (max-width: 1100px) {
	.ezze-site .ezze-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ezze-site .ezze-feat-grid { grid-template-columns: 1fr; }
	.ezze-site .ezze-feat-nav { margin-top: 32px; }
	.ezze-site .ezze-feat-nav a { padding: 0 14px; font-size: 14px; }
}
@media (forced-colors: active) {
	.ezze-site .ezze-feat-card__plan, .ezze-site .ezze-feat-card__ai { border: 1px solid CanvasText; }
}

/* ---------- 404-Seite (pages/not-found.php) ---------- */

.ezze-site .ezze-hero--notfound .ezze-hero__inner.ezze-container { max-width: calc(1600px + 2 * var(--ezze-gutter)); }
/* Die 404-Seite läuft im Theme-Kontext: Theme-/Elementor-Regeln für h1 und Abstände mit doppelter Klasse überstimmen. */
.ezze-site.ezze-site--not-found .ezze-hero--notfound .ezze-hero__inner { padding-left: var(--ezze-gutter); padding-right: var(--ezze-gutter); }
.ezze-site.ezze-site--not-found .ezze-hero--notfound h1 { margin: 0 0 20px; color: var(--ezze-ink); font-family: var(--ezze-font); font-size: clamp(32px, 4.2vw, 60px); font-weight: 700; line-height: 1.2; letter-spacing: -0.027em; word-break: normal; overflow-wrap: normal; hyphens: manual; text-transform: none; }

.ezze-site .ezze-nf-step { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); font-size: 15px; font-weight: 700; }
.ezze-site .ezze-nf-heading, .ezze-site .ezze-nf-search h3 { display: flex; align-items: center; gap: 14px; font-size: 22px; margin: 56px 0 24px; }
.ezze-site .ezze-nf-search h3 { margin: 0 0 20px; }

/* 1: Suche */
.ezze-site .ezze-nf-search { max-width: 820px; margin: 0 auto; }
.ezze-site .ezze-nf-search__form { display: flex; flex-wrap: wrap; gap: 12px; }
.ezze-site .ezze-nf-search__form input[type="search"] { flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 0 18px; border: 1.5px solid #c9d6e8; border-radius: 10px; background: #fff; color: var(--ezze-ink); font: inherit; font-size: 16px; }
.ezze-site .ezze-nf-search__form input[type="search"]::placeholder { color: #6b6686; opacity: 1; }
.ezze-site .ezze-nf-search__form input[type="search"]:hover { border-color: var(--ezze-blue); }
.ezze-site .ezze-nf-search__form .ezze-btn { flex: none; border: 0; cursor: pointer; }
.ezze-site .ezze-nf-search__form .ezze-btn .ezze-icon { width: 18px; height: 18px; }

/* 2: Funktionen, gruppiert wie im Mega-Menü */
.ezze-site .ezze-nf-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ezze-site .ezze-nf-group { padding: 26px 24px 18px; box-shadow: none; border-color: #e7eef8; }
.ezze-site .ezze-nf-group h4 { margin: 0 0 10px; color: var(--ezze-blue); font-size: 15px; font-weight: 700; }
.ezze-site .ezze-nf-group ul { list-style: none; margin: 0; padding: 0; }
.ezze-site .ezze-nf-group li { margin: 0; border-top: 1px solid #eef2f8; }
.ezze-site .ezze-nf-group li:first-child { border-top: 0; }
.ezze-site .ezze-nf-group a { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--ezze-ink); font-weight: 600; text-decoration: none; }
.ezze-site .ezze-nf-group a:hover { color: var(--ezze-blue); text-decoration: underline; text-underline-offset: 3px; }
.ezze-nf-group__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); }
.ezze-nf-group__icon .ezze-icon { width: 17px; height: 17px; }

/* 3: Wichtige Seiten */
.ezze-site .ezze-nf-ways { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.ezze-site .ezze-nf-ways li { margin: 0; }
.ezze-site a.ezze-nf-way { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: 22px 12px 20px; box-shadow: none; border-color: #e7eef8; color: var(--ezze-ink); font-weight: 600; text-align: center; text-decoration: none; }
.ezze-site a.ezze-nf-way .ezze-teaser__icon { margin: 0; }
.ezze-site a.ezze-nf-way:hover { border-color: var(--ezze-blue); color: var(--ezze-blue); }
.ezze-site .ezze-nf-note { max-width: 640px; margin: 48px auto 0; font-size: 15px; }

@media (max-width: 1100px) {
	.ezze-site .ezze-nf-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.ezze-site .ezze-nf-groups { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 640px) {
	.ezze-site .ezze-nf-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ezze-site .ezze-nf-heading { font-size: 20px; margin-top: 44px; }
	.ezze-site .ezze-nf-search__form .ezze-btn { flex: 1 1 100%; justify-content: center; }
}

/* Weiterführender Textlink unter einem Abschnitt (z. B. zur Seite Integrationen) */
.ezze-site .ezze-more-link { margin: 24px 0 0; font-size: 16px; line-height: 1.5; }
.ezze-site .ezze-more-link--center { margin-top: clamp(28px, 3.5vw, 40px); text-align: center; }
.ezze-site .ezze-more-link a { display: inline-flex; align-items: center; gap: 8px; color: var(--ezze-blue); font-weight: 600; text-decoration: none; border-radius: 4px; }
.ezze-site .ezze-more-link a .ezze-icon { flex: none; width: 18px; height: 18px; transition: transform .2s ease; }
.ezze-site .ezze-more-link a:hover, .ezze-site .ezze-more-link a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ezze-site .ezze-more-link a:hover .ezze-icon { transform: translateX(3px); }
.ezze-site .ezze-more-link a:focus-visible { outline: 2px solid var(--ezze-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ezze-site .ezze-more-link a .ezze-icon { transition: none; } .ezze-site .ezze-more-link a:hover .ezze-icon { transform: none; } }

/* ---------- Seite „Website-Optimierungen“ (pages/optimizations.php) ---------- */

/* WCAG-Kennzeichnung der Werkzeugkarten (Badges aus .ezze-finding__badge). */
.ezze-site .ezze-feat-card .ezze-opt-wcag { margin: 0 0 12px; }
/* Gruppe mit genau vier Funktionen (Auswerten & Verwalten) auf der Seite „Funktionen“: 2 × 2 statt 3 + 1. */
@media (min-width: 1101px) {
	.ezze-site .ezze-feat-grid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Seite „Tastaturnavigation“ (pages/keyboard-navigation.php) ---------- */
.ezze-site .ezze-kb-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.ezze-site .ezze-kb-keys__item { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 10px; text-align: center; }
.ezze-site .ezze-kb-keys__combo { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; color: #4b4866; font-weight: 700; }
.ezze-site .ezze-kb-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 7px; border: 1px solid #c9d3e3; border-bottom-width: 3px; border-radius: 7px; background: #f7faff; color: #160647; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; }
.ezze-site .ezze-kb-keys__target { color: #160647; font-weight: 800; font-size: 17px; }
.ezze-site .ezze-kb-features { margin-top: 32px; }

/* ---------- Website-Check (Startseite, Seite „Website-Check“) ---------- */

/* Startseite: helle Fläche mit Welle, links Text, großes Formular, Häkchen und drei Vorteile, rechts animierter Beispielbericht. */
.ezze-site .ezze-check-home { position: relative; padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); background: linear-gradient(180deg, #f4f9fe 0%, #eef5fc 100%); overflow: hidden; container-type: inline-size; }
.ezze-site .ezze-check-home::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -1px; height: clamp(36px, 5vw, 70px); background: var(--ezze-bg, #fff); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.ezze-site .ezze-check-home__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 72px); align-items: center; }
/* Website-Check hero: its own width (max. 1600px content), visual stays inside the grid. */
.ezze-site .ezze-check-home .ezze-check-home__grid.ezze-container { max-width: calc(1600px + 2 * var(--ezze-gutter)); }
.ezze-site .ezze-check-home__title { margin: 0 0 18px; font-size: clamp(34px, 4.4vw, 62px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; }
.ezze-site .ezze-check-home__accent { display: block; color: var(--ezze-blue); }
.ezze-site .ezze-check-home__lead { max-width: 600px; margin: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.5; }
.ezze-site .ezze-check-form--hero { max-width: 640px; margin-top: 32px; }
.ezze-site .ezze-check-form--hero .ezze-check-form__field { padding: 6px 6px 6px 18px; border-color: #fff; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 72, 160, .08); }
.ezze-site .ezze-check-form--hero .ezze-check-form__field:hover, .ezze-site .ezze-check-form--hero .ezze-check-form__field:focus-within { border-color: var(--ezze-blue); }
.ezze-site .ezze-check-form--hero.is-invalid .ezze-check-form__field { border-color: #be123c; }
.ezze-site .ezze-check-form--hero .ezze-check-form__icon .ezze-icon { width: 22px; height: 22px; color: #6b6686; }
.ezze-site .ezze-check-form--hero .ezze-check-form__input { height: 56px; font-size: 17px; }
.ezze-site .ezze-check-form--hero .ezze-check-form__submit { gap: 10px; min-height: 56px; padding: 0 24px; border-radius: 12px; font-size: 16px; }
.ezze-site .ezze-check-form--hero .ezze-check-form__submit .ezze-icon { width: 18px; height: 18px; }
.ezze-site .ezze-check-home__checks { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.ezze-site .ezze-check-home__checks li { display: flex; align-items: center; gap: 8px; color: var(--ezze-ink); font-size: 15px; font-weight: 600; }
.ezze-site .ezze-check-home__checks .ezze-icon { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--ezze-blue); color: #fff; stroke-width: 3; }
.ezze-site .ezze-check-home__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; margin: 40px 0 0; padding: 0; list-style: none; }
.ezze-site .ezze-check-home__benefits li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.ezze-site .ezze-check-home__benefits strong { display: block; margin-bottom: 4px; color: var(--ezze-ink); font-size: 15px; }
.ezze-site .ezze-check-home__benefit-icon { display: grid; flex: none; color: var(--ezze-blue); }
.ezze-site .ezze-check-home__benefit-icon .ezze-icon { width: 30px; height: 30px; stroke-width: 1.6; }
.ezze-site .ezze-check-home__visual { width: 100%; max-width: 760px; margin: 0; justify-self: end; }
/* Drei deckungsgleiche Ebenen; nur die Karte ist perspektivisch geneigt wie im Entwurf. */
.ezze-site .ezze-chk-scene { position: relative; }
.ezze-site .ezze-chk-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.ezze-site .ezze-chk-scene__card, .ezze-site .ezze-chk-scene__fg { position: absolute; inset: 0; }
.ezze-site .ezze-chk-scene__card { transform: perspective(1800px) rotateY(-11deg) rotateX(5deg) rotateZ(-1.5deg); transform-origin: 40% 50%; }
.ezze-js .ezze-site .ezze-illu .ezze-chk-scene__card { opacity: 0; transform: perspective(1800px) rotateY(-24deg) rotateX(8deg) rotateZ(-1.5deg) translateX(40px); }
.ezze-js .ezze-site .ezze-illu.is-visible .ezze-chk-scene__card { opacity: 1; transform: perspective(1800px) rotateY(-11deg) rotateX(5deg) rotateZ(-1.5deg); transition: opacity .7s ease-out .1s, transform 1.1s cubic-bezier(.22, .8, .3, 1) .1s; }
.ezze-site .ezze-chk-hand { font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 500; }
/* Arrow of the handwritten note: the head travels with the drawn line and ends along its tangent.
   Without motion-path support the static head is shown instead. */
.ezze-site .ezze-chk-arrowhead { display: none; }
@supports (offset-path: path('M0 0')) {
	.ezze-site .ezze-chk-arrowhead { display: inline; transform-box: view-box; offset-path: path('M672 176c4 26-4 46-30 60'); offset-anchor: 0 0; offset-rotate: auto; offset-distance: 100%; }
	.ezze-site .ezze-chk-arrowhead-static { display: none; }
	.ezze-js .ezze-illu .ezze-chk-arrowhead { animation: ezze-chk-arrowhead 1.4s ease-out var(--d, .2s) both; }
}
@keyframes ezze-chk-arrowhead { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
/* Score-Ring wie im Plugin; im Beispielbericht füllt er sich alle 14 s neu (erst Rot, dann Gelb bis 78). */
.ezze-site .ezze-score-ring { display: block; overflow: visible; }
.ezze-site .ezze-score-ring__base, .ezze-site .ezze-score-ring__progress { fill: none; stroke-width: 19; stroke-linecap: round; }
.ezze-site .ezze-score-ring__base { stroke: #e5e7eb; }
.ezze-site .ezze-score-ring text { font-family: inherit; }
/* Eingebettetes SVG: die allgemeine Regel width: 100% würde es auf die ganze Szene aufblähen (CSS-px = Einheiten der Karte). */
.ezze-site .ezze-chk-scene svg.ezze-chk-ring { width: 136px; height: 136px; }
.ezze-js .ezze-site .ezze-illu .ezze-chk-ring .ezze-score-ring__progress { opacity: 0; }
.ezze-js .ezze-site .ezze-illu.is-visible .ezze-chk-ring .ezze-score-ring__progress { animation: ezze-chk-seg-a 14s linear .6s infinite both; }
.ezze-js .ezze-site .ezze-illu.is-visible .ezze-chk-ring .ezze-score-ring__progress + .ezze-score-ring__progress { animation-name: ezze-chk-seg-b; }
@keyframes ezze-chk-seg-a { 0% { opacity: 0; stroke-dashoffset: var(--ezze-fill); } .1% { opacity: 1; } 6%, 92% { opacity: 1; stroke-dashoffset: 0; } 96% { opacity: 1; stroke-dashoffset: var(--ezze-fill); } 96.1%, 100% { opacity: 0; stroke-dashoffset: var(--ezze-fill); } }
@keyframes ezze-chk-seg-b { 0%, 6% { opacity: 0; stroke-dashoffset: var(--ezze-fill); } 6.1% { opacity: 1; } 10%, 88% { opacity: 1; stroke-dashoffset: 0; } 92% { opacity: 1; stroke-dashoffset: var(--ezze-fill); } 92.1%, 100% { opacity: 0; stroke-dashoffset: var(--ezze-fill); } }
/* Text-Spalte als eigener Container: Vorteile stapeln, sobald sie für drei Spalten zu schmal ist. */
.ezze-site .ezze-check-home__copy { container-type: inline-size; }
@container (max-width: 600px) {
	.ezze-site .ezze-check-home__benefits { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@container (max-width: 1140px) {
	.ezze-site .ezze-check-home__copy { max-width: 760px; }
	.ezze-site .ezze-check-home__grid { grid-template-columns: minmax(0, 1fr); }
	.ezze-site .ezze-check-home__visual { width: 100%; max-width: 560px; margin: 0 auto; }
}
@container (max-width: 640px) {
	.ezze-site .ezze-check-home__benefits { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
	.ezze-site .ezze-check-home--above-report .ezze-check-home__benefits { display: none; }
}
@container (max-width: 440px) {
	.ezze-site .ezze-check-form--hero .ezze-check-form__field { padding: 0; background: none; box-shadow: none; }
	.ezze-site .ezze-check-form--hero .ezze-check-form__input { border-color: #fff; box-shadow: 0 8px 24px rgba(0, 72, 160, .08); }
	.ezze-site .ezze-check-form--hero .ezze-check-form__input:hover, .ezze-site .ezze-check-form--hero .ezze-check-form__input:focus { border-color: var(--ezze-blue); }
	.ezze-site .ezze-check-form--hero .ezze-check-form__input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px #fff, 0 8px 24px rgba(0, 72, 160, .08); box-shadow: inset 0 0 0 1000px #fff, 0 8px 24px rgba(0, 72, 160, .08); }
}
@media (prefers-reduced-motion: reduce) {
	.ezze-js .ezze-site .ezze-illu .ezze-chk-ring .ezze-score-ring__progress, .ezze-js .ezze-site .ezze-illu.is-visible .ezze-chk-ring .ezze-score-ring__progress { animation: none; opacity: 1; }
	.ezze-js .ezze-site .ezze-illu .ezze-chk-scene__card { opacity: 1; transform: perspective(1800px) rotateY(-11deg) rotateX(5deg) rotateZ(-1.5deg); }
}
html.wcag-reduce-motion.ezze-js .ezze-site .ezze-illu .ezze-chk-ring .ezze-score-ring__progress, html.wcag-reduce-motion.ezze-js .ezze-site .ezze-illu.is-visible .ezze-chk-ring .ezze-score-ring__progress { animation: none; opacity: 1; }
html.wcag-reduce-motion.ezze-js .ezze-site .ezze-illu .ezze-chk-scene__card { opacity: 1; transition: none; transform: perspective(1800px) rotateY(-11deg) rotateX(5deg) rotateZ(-1.5deg); }

/* Formular */
.ezze-site .ezze-check-form { container-type: inline-size; margin-top: 26px; text-align: left; }
.ezze-site .ezze-check-form__label { display: block; margin-bottom: 8px; color: var(--ezze-ink); font-size: 15px; font-weight: 700; }
.ezze-site .ezze-check-form__field { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border: 1.5px solid #c9d6e8; border-radius: 12px; background: #fff; transition: border-color .2s ease; }
.ezze-site .ezze-check-form__field:hover, .ezze-site .ezze-check-form__field:focus-within { border-color: var(--ezze-blue); }
.ezze-site .ezze-check-form.is-invalid .ezze-check-form__field { border-color: #be123c; }
.ezze-site .ezze-check-form__icon { display: grid; flex: none; color: var(--ezze-blue); }
.ezze-site .ezze-check-form__icon .ezze-icon { width: 20px; height: 20px; }
.ezze-site .ezze-check-form__input { flex: 1 1 auto; min-width: 0; height: 49px; margin: 0; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ezze-ink); font: 500 16px/1.2 var(--ezze-font); }
.ezze-site .ezze-check-form__input::placeholder { color: #6b6686; opacity: 1; }
/* Browser-Autofill (Chrome/Safari färben sonst hellblau): weißer Grund, normale Schrift */
.ezze-site .ezze-check-form__input:-webkit-autofill, .ezze-site .ezze-check-form__input:-webkit-autofill:hover, .ezze-site .ezze-check-form__input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 1000px #fff; box-shadow: inset 0 0 0 1000px #fff; -webkit-text-fill-color: var(--ezze-ink); caret-color: var(--ezze-ink); }
.ezze-site .ezze-check-form__input:autofill { background-color: #fff; box-shadow: inset 0 0 0 1000px #fff; }
.ezze-site .ezze-check-form__submit { flex: none; }
.ezze-site .ezze-check-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ezze-site .ezze-check-form__msg { margin: 8px 0 0; color: #be123c; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ezze-site .ezze-check-form__msg:empty { display: none; }
@container (max-width: 440px) {
	.ezze-site .ezze-check-form__field { flex-wrap: wrap; gap: 10px; padding: 0; border: 0; background: none; }
	.ezze-site .ezze-check-form__icon { display: none; }
	.ezze-site .ezze-check-form__input { flex-basis: 100%; height: 52px; padding: 0 14px; border: 1.5px solid #c9d6e8; border-radius: 12px; background: #fff; }
	.ezze-site .ezze-check-form__input:hover, .ezze-site .ezze-check-form__input:focus { border-color: var(--ezze-blue); }
	.ezze-site .ezze-check-form.is-invalid .ezze-check-form__input { border-color: #be123c; }
	.ezze-site .ezze-check-form__submit { flex: 1 1 100%; }
}
.ezze-site .ezze-check-privacy { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; }
.ezze-site .ezze-check-privacy .ezze-icon { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--ezze-blue); }

/* Altes Einstiegs-Panel (check-teaser), derzeit ohne Verwendung */
.ezze-site .ezze-check-teaser h1 { margin-bottom: 16px; }
.ezze-site .ezze-check-teaser { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.ezze-site .ezze-check-teaser__visual svg { display: block; width: 100%; height: auto; }
.ezze-site .ezze-check-off { display: flex; gap: 10px; align-items: flex-start; margin-top: 24px; }
.ezze-site .ezze-check-off .ezze-icon { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--ezze-blue); }
@container (max-width: 860px) {
	.ezze-site .ezze-check-teaser { grid-template-columns: minmax(0, 1fr); }
	.ezze-site .ezze-check-teaser__visual { max-width: 460px; }
}

/* Bericht: Kopf */
.ezze-site .ezze-check-report { padding: clamp(28px, 4vw, 48px) 0 clamp(48px, 6vw, 80px); }
.ezze-site .ezze-check-report > .ezze-container { container-type: inline-size; }
.ezze-site .ezze-check-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--ezze-radius-lg); background: var(--ezze-tint); }
.ezze-site .ezze-check-head__score { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ezze-site .ezze-check-head__kicker { margin: 0 0 6px; color: var(--ezze-blue); font-size: 15px; font-weight: 600; }
.ezze-site .ezze-check-head h2 { margin: 0 0 10px; font-size: clamp(28px, 3.2vw, 42px); overflow-wrap: anywhere; }
.ezze-site .ezze-check-head__meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0 0 18px; font-size: 14.5px; }
.ezze-site .ezze-check-head__meta li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ezze-site .ezze-check-head__meta .ezze-icon { flex: none; width: 16px; height: 16px; color: var(--ezze-blue); }
.ezze-site .ezze-check-head__url span { overflow-wrap: anywhere; }
.ezze-site .ezze-check-head__summary { max-width: 620px; margin: 0; }
.ezze-site .ezze-check-head__more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 15px; font-weight: 600; }
.ezze-site .ezze-check-head__more a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.ezze-site .ezze-check-head__more a:hover { text-decoration: underline; }
.ezze-site .ezze-check-head__more .ezze-icon { width: 17px; height: 17px; }

.ezze-site .ezze-check-ring { width: 176px; }
.ezze-site .ezze-check-ring .ezze-score-ring { width: 100%; height: auto; }
.ezze-site .ezze-check-ring .ezze-score-ring__progress { animation: ezze-ring-seg var(--ezze-dur) linear var(--ezze-delay) both; }
@keyframes ezze-ring-seg { 0% { opacity: 0; stroke-dashoffset: var(--ezze-fill); } .1% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
html.wcag-reduce-motion .ezze-site .ezze-check-ring .ezze-score-ring__progress { animation: none; }
.ezze-site .ezze-check-band { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 6px 13px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.ezze-site .ezze-check-band .ezze-icon { width: 17px; height: 17px; }
.ezze-site .ezze-check-result--good .ezze-check-band { background: #e6f6ec; color: #116b32; }
.ezze-site .ezze-check-result--warn .ezze-check-band { background: #fff4e0; color: #8a4b06; }
.ezze-site .ezze-check-result--bad .ezze-check-band { background: #fdecef; color: #9f1239; }

/* Bericht: Befunde links, Karte rechts (mitlaufend) */
.ezze-site .ezze-check-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px clamp(32px, 4vw, 56px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.ezze-site .ezze-check-main__title { margin: 0 0 6px; font-size: clamp(24px, 2.4vw, 30px); }
.ezze-site .ezze-check-main__lead { margin: 0 0 8px; font-size: 15.5px; }
.ezze-site .ezze-check-group { display: flex; align-items: baseline; gap: 6px; margin: 28px 0 10px; color: var(--ezze-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ezze-site .ezze-check-group span { color: var(--ezze-muted); font-weight: 600; }
.ezze-site .ezze-check-list { display: grid; gap: 8px; }
.ezze-site .ezze-check-item { border: 1px solid #e3ebf6; border-radius: 12px; background: #fff; transition: border-color .2s ease; }
.ezze-site .ezze-check-item:hover, .ezze-site .ezze-check-item[open] { border-color: #c9d6e8; }
.ezze-site .ezze-check-item > summary { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 20px; gap: 6px 14px; align-items: center; padding: 14px 16px; color: var(--ezze-ink); cursor: pointer; list-style: none; }
.ezze-site .ezze-check-item > summary::-webkit-details-marker { display: none; }
.ezze-site .ezze-check-item__title { font-size: 15.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.ezze-site .ezze-check-item__meta { display: flex; gap: 14px; color: var(--ezze-muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ezze-site .ezze-check-item__chev { display: grid; color: var(--ezze-muted); }
.ezze-site .ezze-check-item__chev .ezze-icon { width: 18px; height: 18px; transition: transform .25s ease; }
.ezze-site .ezze-check-item[open] .ezze-check-item__chev .ezze-icon { transform: rotate(180deg); }
.ezze-site .ezze-check-item__body { padding: 0 16px 16px 122px; }
.ezze-site .ezze-check-item__body p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.ezze-site .ezze-check-item__wcag { color: var(--ezze-ink); font-weight: 600; }
.ezze-site .ezze-check-item__plugin { display: flex; gap: 8px; align-items: flex-start; margin: 0 !important; color: var(--ezze-blue); font-weight: 600; }
.ezze-site .ezze-check-item__plugin .ezze-icon { flex: none; width: 17px; height: 17px; margin-top: 3px; }
.ezze-site .ezze-check-badge { display: inline-flex; justify-content: center; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #eef2f8; color: #3d3763; font-size: 12.5px; font-weight: 700; line-height: 1; }
.ezze-site .ezze-check-badge--critical { background: #fdecef; color: #9f1239; }
.ezze-site .ezze-check-badge--serious { background: #fff4e0; color: #8a4b06; }
.ezze-site .ezze-check-badge--moderate { background: #e3effd; color: #00499e; }
.ezze-site .ezze-check-cmp { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 28px; padding: 18px 20px; border: 1px solid #f3d9a4; border-radius: var(--ezze-radius); background: #fff8eb; }
.ezze-site .ezze-check-cmp__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fdebc8; color: #8a4b06; }
.ezze-site .ezze-check-cmp__icon .ezze-icon { width: 22px; height: 22px; }
.ezze-site .ezze-check-cmp h3 { margin: 0 0 6px; color: var(--ezze-ink); font-size: 17px; line-height: 1.4; }
.ezze-site .ezze-check-cmp p { margin: 0; font-size: 15px; line-height: 1.6; }
.ezze-site .ezze-check-cmp p + p { margin-top: 8px; }
.ezze-site .ezze-check-cmp strong { color: var(--ezze-ink); font-weight: 600; }
.ezze-site .ezze-check-manual { display: flex; gap: 10px; align-items: flex-start; margin: 28px 0 0; font-size: 14.5px; line-height: 1.6; }
.ezze-site .ezze-check-manual .ezze-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ezze-blue); }

.ezze-site .ezze-check-aside { position: sticky; top: 100px; }
.ezze-site .ezze-check-cta { padding: 28px 26px; border: 1px solid #dde6f3; border-radius: var(--ezze-radius-lg); background: #fff; }
.ezze-site .ezze-check-cta h2 { margin: 0 0 16px; font-size: 21px; line-height: 1.3; }
.ezze-site .ezze-check-cta__steps { display: grid; gap: 12px; margin: 0 0 22px; counter-reset: ezze-cta; }
.ezze-site .ezze-check-cta__steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; counter-increment: ezze-cta; }
.ezze-site .ezze-check-cta__steps li::before { content: counter(ezze-cta); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); font-size: 14px; font-weight: 800; }
.ezze-site .ezze-check-cta .ezze-btn { width: 100%; }
.ezze-site a.ezze-check-cta__link { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; text-decoration: none; }
.ezze-site a.ezze-check-cta__link:hover { text-decoration: underline; }
.ezze-site .ezze-check-cta__link .ezze-icon { width: 16px; height: 16px; }

.ezze-site .ezze-check-again__box { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 40px); border-radius: var(--ezze-radius-lg); background: var(--ezze-tint); }
.ezze-site .ezze-check-again__box h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); }
.ezze-site .ezze-check-again__box .ezze-check-form { margin-top: 18px; }

@container (max-width: 900px) {
	.ezze-site .ezze-check-layout { grid-template-columns: minmax(0, 1fr); }
	.ezze-site .ezze-check-aside { position: static; }
}
@container (max-width: 640px) {
	.ezze-site .ezze-check-head { grid-template-columns: minmax(0, 1fr); }
	.ezze-site .ezze-check-head__score { flex-direction: row; flex-wrap: wrap; gap: 12px 18px; }
	.ezze-site .ezze-check-ring { width: 124px; }
	.ezze-site .ezze-check-item > summary { grid-template-columns: minmax(0, 1fr) 20px; }
	.ezze-site .ezze-check-item > summary .ezze-check-badge { justify-self: start; grid-column: 1; }
	.ezze-site .ezze-check-item__title, .ezze-site .ezze-check-item__meta { grid-column: 1; }
	.ezze-site .ezze-check-item__chev { grid-column: 2; grid-row: 1; }
	.ezze-site .ezze-check-item__body { padding-left: 16px; }
}

/* Laden: Fortschrittsbalken mit Phasentext, daneben wechselnde Prüfthemen */
.ezze-site .ezze-check-running > .ezze-container { container-type: inline-size; }
.ezze-site .ezze-check-runbox { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--ezze-radius-lg); background: var(--ezze-tint); }
.ezze-site .ezze-check-runbox__main > h2 { margin: 0 0 22px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; overflow-wrap: anywhere; }
.ezze-site .ezze-check-meter__phase { min-height: 1.6em; margin: 0 0 10px; color: var(--ezze-ink); font-size: 17px; font-weight: 700; }
.ezze-site .ezze-check-meter { position: relative; height: 14px; overflow: hidden; border-radius: 999px; background: #dbe5f2; }
.ezze-site .ezze-check-meter__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #0062d2, #3b8cff); transform: scaleX(0); transform-origin: left center; transition: transform .6s ease-out; }
.ezze-site .ezze-check-meter__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ezze-check-shine 1.8s linear infinite; }
@keyframes ezze-check-shine { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.ezze-site .ezze-check-meter__meta { display: flex; gap: 6px 16px; align-items: baseline; margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; }
.ezze-site .ezze-check-meter__pct { flex: none; min-width: 3.2em; color: var(--ezze-blue); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

.ezze-site .ezze-check-facts { padding: 22px 24px 18px; border: 1px solid #dde6f3; border-radius: var(--ezze-radius); background: #fff; }
.ezze-site .ezze-check-facts__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ezze-site .ezze-check-facts__title { margin: 0; color: var(--ezze-blue); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ezze-site .ezze-check-facts__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1.5px solid #c9d6e8; border-radius: 999px; background: #fff; color: var(--ezze-ink); font: 600 13.5px/1 var(--ezze-font); cursor: pointer; }
.ezze-site .ezze-check-facts__toggle:hover { border-color: var(--ezze-blue); color: var(--ezze-blue); }
.ezze-site .ezze-check-facts__toggle[hidden] { display: none; }
.ezze-site .ezze-check-facts__icon { display: grid; }
.ezze-site .ezze-check-facts__icon .ezze-icon { width: 14px; height: 14px; }
.ezze-site .ezze-check-facts__icon--play, .ezze-site .ezze-check-facts.is-paused .ezze-check-facts__icon--pause { display: none; }
.ezze-site .ezze-check-facts.is-paused .ezze-check-facts__icon--play { display: grid; }
.ezze-site .ezze-check-facts__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ezze-site .ezze-check-fact { display: flex; gap: 14px; align-items: flex-start; }
.ezze-site .ezze-check-fact__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #e3effd; color: var(--ezze-blue); }
.ezze-site .ezze-check-fact__icon .ezze-icon { width: 22px; height: 22px; }
.ezze-site .ezze-check-fact__copy { display: grid; gap: 4px; font-size: 15px; line-height: 1.55; }
.ezze-site .ezze-check-fact__copy strong { color: var(--ezze-ink); font-size: 17px; }
.ezze-site .ezze-check-facts__dots { display: none; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.ezze-site .ezze-check-facts__dots li { width: 7px; height: 7px; border-radius: 50%; background: #c9d6e8; transition: width .3s ease, background-color .3s ease; }
.ezze-site .ezze-check-facts__dots li.is-active { width: 20px; border-radius: 999px; background: var(--ezze-blue); }
/* Mit JavaScript nur ein Thema sichtbar, alle Themen im selben Rasterfeld (keine Höhensprünge). */
.ezze-site .ezze-check-facts.is-rotating .ezze-check-facts__list { grid-template-areas: 'fact'; }
.ezze-site .ezze-check-facts.is-rotating .ezze-check-fact { grid-area: fact; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.ezze-site .ezze-check-facts.is-rotating .ezze-check-fact.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease .22s, transform .4s ease .22s, visibility 0s linear .22s; }
.ezze-site .ezze-check-facts.is-rotating .ezze-check-facts__dots { display: flex; }
@container (max-width: 820px) {
	.ezze-site .ezze-check-runbox { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 480px) {
	.ezze-site .ezze-check-meter__meta { flex-direction: column; gap: 2px; }
	.ezze-site .ezze-check-facts { padding: 18px 16px 14px; }
}

/* Fehler / abgelaufen */
.ezze-site .ezze-check-state { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px); border-radius: var(--ezze-radius-lg); background: var(--ezze-tint); text-align: center; }
.ezze-site .ezze-check-state__icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; background: #e3effd; color: var(--ezze-blue); }
.ezze-site .ezze-check-state__icon .ezze-icon { width: 28px; height: 28px; }
.ezze-site .ezze-check-state h2 { font-size: clamp(28px, 3vw, 38px); }
.ezze-site .ezze-check-state .ezze-lead { max-width: 600px; margin-left: auto; margin-right: auto; }
.ezze-site .ezze-check-state .ezze-check-form { max-width: 600px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
	.ezze-site .ezze-check-ring .ezze-score-ring__progress, .ezze-site .ezze-check-meter__fill::after { animation: none; }
	.ezze-site .ezze-check-meter__fill, .ezze-site .ezze-check-facts.is-rotating .ezze-check-fact, .ezze-site .ezze-check-facts__dots li { transition: none; }
	.ezze-site .ezze-check-facts.is-rotating .ezze-check-fact, .ezze-site .ezze-check-facts.is-rotating .ezze-check-fact.is-active { transform: none; transition: none; }
}

/* Website-Check im Startseiten-Hero (Patrick, 2026-10-14: Variante A, klein unter den Buttons) */
.ezze-site .ezze-hero__check { width: min(100%, 760px); margin: 28px auto 30px; }
.ezze-site .ezze-hero__check .ezze-check-form--hero { max-width: none; margin-top: 0; }
/* Startseite und Testseite (Hero-Formular): Eingabefeld samt sichtbarem Fokusrahmen (2px, ohne Abstand) so hoch wie der Button (56px); die Box behält ihre Höhe. */
@container (min-width: 441px) {
	.ezze-site .ezze-check-form--hero .ezze-check-form__input { height: 52px; }
	.ezze-site .ezze-check-form--hero .ezze-check-form__input:focus-visible { outline-offset: 0 !important; }
}
.ezze-site .ezze-hero__check-label { margin: 0 0 10px; color: var(--ezze-ink); font-size: 15px; font-weight: 600; line-height: 1.45; text-align: center; }
.ezze-site .ezze-hero__check-label .ezze-icon { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; color: var(--ezze-blue); }
.ezze-site .ezze-hero__check .ezze-check-form { margin: 0; text-align: left; }
.ezze-site .ezze-check-promo .ezze-teaser h3 a { color: inherit; text-decoration: underline; text-decoration-color: #9cc3ef; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ezze-site .ezze-check-promo .ezze-teaser h3 a:hover { color: var(--ezze-blue); text-decoration-color: currentColor; }

/* Website-Check: Nach dem Laden springt der Fokus per Skript auf die Ergebnis-Überschrift (tabindex="-1"),
   damit Screenreader das Ergebnis ansagen. Sie ist nicht bedienbar, daher kein sichtbarer Fokusrahmen –
   auch nicht durch Fokus-Styles anderer Plugins. */
.ezze-site [data-ezze-check-run] h2[tabindex="-1"]:focus,
.ezze-site .ezze-check-head h2[tabindex="-1"]:focus { outline: none !important; box-shadow: none !important; }

/* Offene Sheets und Dialoge der Website liegen nie unter dem schwebenden Knopf der Barrierefreiheits-
   Toolbar (#wcag-toolbar-trigger-wrap, position: fixed, z-index 99998). Gilt für jedes sichtbare Element
   mit aria-modal="true" (Bottom Sheets der Preisanzeige und Länderauswahl in plans.js) und für die
   Klasse .ezze-modal-open an <html> für künftige Komponenten. Die Toolbar-eigenen Elemente (#wcag-…)
   sind ausgenommen. Modale <dialog> (showModal) liegen in der Top-Layer und brauchen die Regel nicht.
   Der Knopf ist hinter einem modalen Sheet ohnehin nicht erreichbar und erscheint beim Schließen wieder. */
html.ezze-modal-open #wcag-toolbar-trigger-wrap,
html:has([aria-modal="true"]:not([hidden]):not([id^="wcag-"]):not(#wcag-toolbar *)) #wcag-toolbar-trigger-wrap {
	visibility: hidden;
}