/* ==========================================================================
   TM WordPress-Plugins — Stylesheet
   Farb- und Formvokabular angelehnt an Zubehoer/DESIGN.md (Auros).
   Uebernommen: Oberflaechen-Stapel im Teal, Radien 16/6, keine Schatten,
   gesperrte Versal-Label, Ueberschriften in Medium mit enger Laufweite.
   Nicht uebernommen: Partikelsphaere, ueberdimensionierte Kinetik-Typo,
   Molekuel-Grafik — dafuer gibt es auf dieser Seite keinen Anlass.
   ========================================================================== */

:root {
	/* Oberflaechen */
	--abyss: #012624;
	--deep: #011d1c;
	--kelp: #003734;

	/* Text */
	--platinum: #ffffff;
	--mist: #edfffe;
	--silver: #bbc7c6;
	--slate: #707777;   /* laut DESIGN.md eine Flaechenfarbe - als Textfarbe zu kontrastarm */
	--phosphor: #fde9ff;

	/* Signatur-Verlauf, ausschliesslich fuer die Haupt-Aktion */
	--aurora: linear-gradient(90deg, rgb(203, 255, 252) 0%, rgb(237, 255, 254) 26.25%, rgb(255, 253, 250) 47.57%, rgb(250, 209, 255) 88.96%);

	/* Rahmen */
	--line: rgba(255, 255, 255, .1);
	--line-strong: rgba(255, 255, 255, .22);

	/* Form */
	--radius-card: 16px;
	--radius-small: 6px;

	/* Raster */
	--page: 1080px;
	--gap-section: 68px;

	/* Hoehe des feststehenden Kopfes, gemessen: eine Zeile plus Trennlinie.
	   Hier setzt min-height des Kopfes die Hoehe, nicht das Logo - deshalb
	   blieb der Wert beim Vergroessern des Zeichens von 34 auf 40 Pixel
	   unveraendert. Zweimal wird er groesser, weil die Navigation umbricht;
	   dort schlagen die 6 Pixel dann durch - siehe die beiden Medienabfragen
	   weiter unten. Gebraucht wird der Wert fuer scroll-margin-top der
	   Sprungziele: ohne ihn verschwindet der angesprungene Abschnitt unter
	   dem Kopf. */
	--kopf: 81px;

	/* Schriften: bewusst keine Webschrift. Die Seite laedt keine einzige
	   Schriftdatei - weder von Google Fonts noch vom eigenen Server -,
	   sondern nutzt die Systemschrift des Besuchers. Das haelt die Seite
	   frei von Anfragen an Dritte. Bewusst in Kauf genommen: Das Schriftbild
	   unterscheidet sich je nach Betriebssystem (SF Pro, Segoe UI, Roboto). */
	--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

/* Kein scroll-behavior: smooth auf html. Es verhindert, dass der Browser
   beim Laden zum Anker springt, wenn dieser auf einer anderen Seite liegt -
   also bei jedem Link der Form index.html#plugins. Der Sprung bleibt dann
   am Seitenkopf haengen. Innerhalb einer Seite waere sanftes Scrollen
   schoen, es laesst sich aber nicht auf diesen Fall begrenzen. */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--abyss);
	color: var(--silver);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	color: var(--platinum);
	font-weight: 500;
	margin: 0 0 var(--mb, 16px);
}

h1 {
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.8rem);
	line-height: 1.02;
	letter-spacing: -.04em;
	--mb: 20px;
}

h2 {
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
	line-height: 1.08;
	letter-spacing: -.03em;
	--mb: 18px;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -.02em;
	--mb: 10px;
}

p {
	margin: 0 0 16px;
}

p:last-child,
ul:last-child {
	margin-bottom: 0;
}

a {
	color: var(--mist);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}

a:hover,
a:focus-visible {
	color: var(--platinum);
}

:focus-visible {
	outline: 2px solid var(--phosphor);
	outline-offset: 3px;
	border-radius: 2px;
}

img,
svg {
	max-width: 100%;
	height: auto;
	display: block;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .875em;
	background: rgba(255, 255, 255, .07);
	border-radius: 4px;
	padding: .15em .4em;
	color: var(--mist);
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 0;
}

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--kelp);
	color: var(--platinum);
	padding: 12px 20px;
	border-radius: var(--radius-small);
	/* Muss ueber dem feststehenden Kopf liegen, sonst verschwindet der
	   Sprunglink beim Tastaturfokus dahinter. */
	z-index: 20;
	text-decoration: none;
}

.skip-link:focus {
	left: 16px;
	top: 16px;
}

/* --- Raster -------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: 24px;
}

.section {
	padding-block: var(--gap-section);
}

.section--deep {
	background: var(--deep);
}

.lead {
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--mist);
	max-width: 62ch;
}

.muted {
	/* Silber statt Slate: Slate erreicht als Text nur 2,9:1 auf der Kartenflaeche */
	color: var(--silver);
	opacity: .82;
}

/* --- Versal-Label -------------------------------------------------------- */

.label {
	display: block;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--silver);
	margin: 0 0 14px;
}

.label--mist {
	color: var(--mist);
}

/* --- Kopfbereich --------------------------------------------------------- */

.masthead {
	position: sticky;
	top: 0;
	z-index: 10;
	/* Deckende Flaeche ist Pflicht: Ohne sie scheint der Inhalt beim
	   Scrollen durch den Kopf hindurch. Derselbe Ton wie der Seitengrund,
	   die vorhandene Trennlinie setzt den Kopf ab. */
	background: var(--abyss);
	border-bottom: 1px solid var(--line);
}

/* Sprungziele halten um die Kopfhoehe frueher an. */
#inhalt,
.section[id] {
	scroll-margin-top: var(--kopf);
}

.masthead__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	min-height: 80px;
	padding-block: 16px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--platinum);
	margin-right: auto;
}

.brand img {
	width: 40px;
	height: 40px;
	flex: none;
}

.brand__name {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 1.3;
}

.brand__name span {
	display: block;
	color: var(--silver);
}

.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
}

.nav a {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--silver);
	text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
	color: var(--platinum);
}

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

.hero {
	padding-block: clamp(48px, 8vw, 108px) var(--gap-section);
}

.hero__mark {
	width: 112px;
	height: 112px;
	margin-bottom: 32px;
}

.hero p {
	max-width: 60ch;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 28px 40px;
	margin-top: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.fact {
	text-align: center;
}

.fact__value {
	display: block;
	/* dd traegt sonst den Browser-Standard margin-inline-start: 40px -
	   dadurch stand die Zahl 40px weiter rechts als ihre Beschriftung. */
	margin: 0;
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--phosphor);
}

.fact__label {
	display: block;
	margin-top: 12px;
	font-size: 13px;
	letter-spacing: .055em;
	text-transform: uppercase;
	color: var(--mist);
}

/* --- Plugin-Karten ------------------------------------------------------- */

.cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.card {
	background: var(--kelp);
	border-radius: var(--radius-card);
	padding: clamp(28px, 4vw, 40px);
	display: flex;
	flex-direction: column;
}

.card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.card__body {
	color: var(--silver);
}

.card h2 {
	/* Eigene Groesse: die Abschnitts-H2 waere fuer die Spaltenbreite zu wuchtig */
	font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem);
	line-height: 1.15;
	letter-spacing: -.025em;
	--mb: 8px;
}

.version {
	flex: none;
	margin-top: 3px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mist);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-small);
	padding: 5px 10px;
	white-space: nowrap;
}

.features {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.features li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
}

.features li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mist);
	opacity: .55;
}

/* Anforderungen als schlichte Definitionsliste */
.specs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 20px;
	margin: 0 0 28px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}

.specs dt {
	color: var(--silver);
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 12px;
	padding-top: .15em;
}

.specs dd {
	margin: 0;
	color: var(--mist);
}

.card__foot {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

/* --- Schaltflaechen ------------------------------------------------------ */

.btn {
	display: inline-block;
	font-family: inherit;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-small);
	padding: 14px 22px;
	border: 1px solid transparent;
	transition: filter .15s ease, border-color .15s ease, color .15s ease;
}

/* Der Aurora-Verlauf bleibt der Haupt-Aktion vorbehalten. */
.btn--primary {
	background: var(--aurora);
	color: #012624;
	font-weight: 500;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	filter: brightness(1.06);
	color: #012624;
}

.btn--ghost {
	border-color: var(--line-strong);
	color: var(--mist);
	background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--mist);
	color: var(--platinum);
}

/* --- Schrittfolge -------------------------------------------------------- */

.steps {
	list-style: none;
	counter-reset: step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.steps li {
	counter-increment: step;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--phosphor);
	margin-bottom: 12px;
}

.steps h3 {
	--mb: 8px;
}

.steps p {
	font-size: 15px;
}

/* --- Hinweisblock -------------------------------------------------------- */

.note {
	background: var(--kelp);
	border-radius: var(--radius-card);
	padding: clamp(24px, 3vw, 36px);
}

.note h3 {
	--mb: 12px;
}

/* --- Rechtstexte --------------------------------------------------------- */

.legal {
	max-width: 74ch;
}

.legal h2 {
	margin-top: 48px;
}

.legal h2:first-child {
	margin-top: 0;
}

.legal h3 {
	margin-top: 28px;
	color: var(--mist);
}

.legal ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

.legal li {
	margin-bottom: 6px;
}

.legal strong {
	color: var(--mist);
	font-weight: 500;
}

/* --- Fussbereich --------------------------------------------------------- */

.footer {
	background: var(--deep);
	padding-block: clamp(48px, 7vw, 96px);
	border-top: 1px solid var(--line);
}

.footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 48px;
	justify-content: space-between;
	align-items: flex-start;
}

.footer p {
	font-size: 14px;
	max-width: 46ch;
}

.footer nav {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer nav a {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--silver);
}

.footer nav a:hover,
.footer nav a:focus-visible {
	color: var(--platinum);
}

/* --- Schmale Bildschirme ------------------------------------------------- */

/* Hier bricht die Navigation in eine zweite Zeile. Gemessen geschieht das
   zwischen 760 und 780 px; die Schwelle haengt aber an der Systemschrift des
   Besuchers, deshalb mit Reserve auf 800 px gesetzt. Faellt der Wert zu gross
   aus, entsteht nur etwas Luft ueber der Ueberschrift. */
@media (max-width: 800px) {
	:root {
		--kopf: 107px;
	}
}

@media (max-width: 640px) {
	:root {
		--gap-section: 52px;
		--kopf: 133px;
	}

	.wrap {
		padding-inline: 18px;
	}

	.masthead__inner {
		align-items: flex-start;
	}

	.brand {
		margin-right: 0;
		width: 100%;
	}

	.card__foot .btn {
		width: 100%;
		text-align: center;
	}
}