/*
 * Zackii — Gestaltung.
 *
 * Zwei Flächen, klar getrennt:
 *
 *   dunkel  #0d1b2a  Weiss 17,39:1 · #e2e9f0 14,20:1 · Bernstein #f5a623 8,58:1
 *   hell    #ffffff  #1a1a1a 17,40:1 · #5a5a5a 6,90:1 · Blau #0b5cad 6,67:1
 *
 * Alle Paare mit der Kontrastformel des eigenen Plugins nachgerechnet.
 * #2b7ce9 wurde verworfen: 4,07:1 auf Weiss, zu wenig.
 *
 * Diese Seite verkauft ein Barrierefreiheits-Plugin. Sie muss selbst
 * fehlerfrei sein, sonst ist sie ihr eigenes Gegenargument.
 */

:root {
	--dunkel: #0d1b2a;
	--dunkel-2: #16293d;
	--text: #1a1a1a;
	--leise: #5a5a5a;
	--auf-dunkel: #e2e9f0;
	--blau: #0b5cad;
	--blau-tief: #073f77;
	--bernstein: #f5a623;
	--linie: #dce3ea;
	--creme: #f8fafc;
	--radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font: 17px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: var(--text);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

.mitte { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.schmal { max-width: 46rem; }

/* ---------------------------------------------------------- Grundelemente */

h1, h2, h3 { letter-spacing: -.022em; line-height: 1.2; }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .35rem; }

p { margin: 0 0 1rem; }
.gross { font-size: 1.2rem; }
.leise { color: var(--leise); }
.klein { font-size: .9rem; }

a { color: var(--blau); text-underline-offset: .15em; }
a:hover { text-decoration: none; }

a:focus-visible, button:focus-visible {
	outline: 3px solid var(--bernstein);
	outline-offset: 3px;
	border-radius: 3px;
}

.sprung {
	position: absolute; left: -9999px;
	background: #fff; color: var(--blau);
	padding: .8rem 1.2rem; z-index: 20; font-weight: 600;
}
.sprung:focus { left: .5rem; top: .5rem; }

.knopf {
	display: inline-block;
	background: var(--blau); color: #fff;
	text-decoration: none; font-weight: 600;
	padding: .85rem 1.5rem; border-radius: var(--radius);
	border: 2px solid var(--blau);
}
.knopf:hover { background: var(--blau-tief); border-color: var(--blau-tief); }

.knopf-hell {
	background: var(--bernstein); border-color: var(--bernstein); color: var(--dunkel);
}
.knopf-hell:hover { background: #dc9111; border-color: #dc9111; }

.knopf-rand {
	background: transparent; color: var(--auf-dunkel); border-color: #3d5570;
}
.knopf-rand:hover { background: var(--dunkel-2); border-color: #6d8299; }

/* ------------------------------------------------------------------- Kopf */

.kopf { border-bottom: 1px solid rgba(255,255,255,.12); background: var(--dunkel); }
.kopf-innen {
	display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: center; justify-content: space-between;
	padding: 1.1rem 0;
}
.marke {
	font-size: 1.4rem; font-weight: 800; color: #fff;
	text-decoration: none; letter-spacing: -.03em;
}
.marke span { color: var(--bernstein); }
.kopf nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.kopf nav a { color: var(--auf-dunkel); text-decoration: none; }
.kopf nav a:hover, .kopf nav [aria-current="page"] { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------- Held */

.held { background: var(--dunkel); color: #fff; padding: 4rem 0 4.5rem; }
.held h1 { color: #fff; }
.held p { color: var(--auf-dunkel); }
.held-raster { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 60rem) { .held-raster { grid-template-columns: 1.05fr .95fr; } }

.marker {
	display: inline-block; margin-bottom: 1.25rem;
	background: rgba(245,166,35,.14); color: var(--bernstein);
	border: 1px solid rgba(245,166,35,.4);
	padding: .3rem .8rem; border-radius: 100px;
	font-size: .85rem; font-weight: 600;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Kennzeichen auf den Plugin-Karten: Zustand und Plattform.
   Die Plattform steht bewusst an jeder Karte — so liest sich das Raster
   richtig, sobald einmal etwas anderes als WordPress danebensteht. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.chips .marker { margin: 0; }
.marker-blau { background: #eaf2fb; color: var(--blau); border-color: #c3ddf7; }
/* Produktname auf dunklem Grund - Weiss auf #0d1b2a liegt bei 17,39:1. */
.marker-hell { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.marker-grau { background: #f0f2f5; color: var(--leise); border-color: var(--linie); }

/* ------------------------------------------- Nachbau der Ergebnisliste */

.fenster {
	background: #fff; border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
	overflow: hidden; color: var(--text);
}
.fenster-leiste {
	display: flex; align-items: center; gap: .4rem;
	background: #e9edf1; padding: .6rem .8rem;
	border-bottom: 1px solid var(--linie);
}
.punkt { width: 11px; height: 11px; border-radius: 50%; background: #c3ccd5; }
.fenster-titel { margin-left: .5rem; font-size: .82rem; color: var(--leise); }
.fenster-inhalt { padding: 1.1rem 1.2rem 1.3rem; }
.fenster-inhalt h4 { margin: 0 0 .9rem; font-size: 1rem; }
.befund {
	display: flex; gap: .7rem; align-items: flex-start;
	padding: .6rem 0; border-top: 1px solid var(--linie);
}
.befund:first-of-type { border-top: 0; }
.befund code {
	font-size: .78rem; background: var(--creme); padding: .1rem .3rem;
	border-radius: 3px; word-break: break-all;
}
.befund b { font-size: .9rem; display: block; }
.wcag {
	flex: 0 0 auto; font-size: .72rem; font-weight: 700;
	background: #fdecec; color: #a01212; padding: .15rem .45rem; border-radius: 4px;
}

/* --------------------------------------------------------------- Bereiche */

.bereich { padding: 4rem 0; }
.bereich-creme { background: var(--creme); border-block: 1px solid var(--linie); }
.bereich-dunkel { background: var(--dunkel); color: #fff; }
.bereich-dunkel h2 { color: #fff; }
.bereich-dunkel p { color: var(--auf-dunkel); }

.kopfzeile { max-width: 40rem; margin-bottom: 2.5rem; }

.raster { display: grid; gap: 1.25rem; }
@media (min-width: 42rem) { .raster-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .raster-4 { grid-template-columns: repeat(4, 1fr); } }

.karte {
	background: #fff; border: 1px solid var(--linie);
	border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.karte h3 { margin-top: 0; }
.karte p:last-child { margin-bottom: 0; }
.karte-icon { color: var(--blau); margin-bottom: .7rem; display: block; }

.zahl { font-size: 2.2rem; font-weight: 800; color: var(--bernstein); line-height: 1.1; }

table { border-collapse: collapse; width: 100%; }
caption { text-align: left; padding-bottom: .75rem; color: var(--leise); font-size: .92rem; }
th, td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--linie); }
thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); }
tbody tr:last-child td { border-bottom: 0; }

.liste { padding-left: 1.3rem; margin: 0; }
.liste li { margin: .45rem 0; }

.preis-raster { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .preis-raster { grid-template-columns: 1fr 1fr; } }
.preis { border: 2px solid var(--linie); border-radius: var(--radius); padding: 1.75rem; background: #fff; }
.preis-hervor { border-color: var(--blau); }
.preis .betrag { font-size: 2rem; font-weight: 800; }

details {
	border-bottom: 1px solid var(--linie); padding: 1rem 0;
}
summary { font-weight: 600; cursor: pointer; }
summary::marker { color: var(--blau); }
details p:last-child { margin-bottom: 0; }
details > p { margin-top: .7rem; }

.hinweis {
	border-left: 4px solid var(--bernstein);
	background: #fffaf0; padding: 1rem 1.2rem; border-radius: 0 6px 6px 0;
}
.bereich-dunkel .hinweis { background: rgba(245,166,35,.1); }

/* ------------------------------------------------------------------- Fuss */

.fuss { background: var(--dunkel); color: var(--auf-dunkel); padding: 2.5rem 0; }
.fuss a { color: #fff; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.fuss ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }