/* ============================================================
   INKLUSIO.PRO – LANDINGPAGE
   ------------------------------------------------------------
   Styles für die Sektionsbausteine unter /templates/blocks/.
   ============================================================ */

/* ------------------------------------------------------------
   Hero ohne Video: animierter Verlauf statt leerer Fläche
   ------------------------------------------------------------ */
/* Der Verlauf beginnt oben mit exakt der Farbe der Kopfzeile
   (#012132) – dadurch geht der Header ohne sichtbare Kante in den
   Hero über, statt als eigener Balken darüberzuliegen.

   Nach unten vertieft sich das Blau: erst eine Spur heller, damit
   die Fläche nicht flach wirkt, dann dunkler auslaufend zur
   Suchkarte hin. Der Mint-Schimmer oben links hält den Bezug zur
   Marke, ohne die Blaurichtung zu brechen. */
.ink-hero--gradient {
	background:
		radial-gradient(80% 60% at 14% 6%, rgba(67, 168, 131, 0.20) 0%, transparent 60%),
		linear-gradient(
			168deg,
			#012132 0%,
			#02334A 34%,
			#012536 68%,
			#01161F 100%
		);
}

/* Feines Punktraster – gibt der Fläche Textur, ohne vom Text abzulenken. */
.ink-hero--gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(248, 242, 231, 0.10) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}

.ink-hero--gradient .ink-hero__scrim { background: none; }

.ink-btn--inverse {
	color: var(--ink-sand-50);
	border-color: rgba(248, 242, 231, 0.30);
}
.ink-btn--inverse:hover {
	background: rgba(248, 242, 231, 0.10);
	border-color: var(--ink-sand-100);
	color: #fff;
}

/* ------------------------------------------------------------
   Bento-Raster der sechs Highlights
   ------------------------------------------------------------ */
.ink-bento {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ink-bento__item {
	position: relative;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ink-space-4);
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-xl);
	overflow: hidden;
	transition: transform var(--ink-dur-base) var(--ink-ease-out),
	            box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-bento__item:hover {
	transform: translateY(-5px);
	box-shadow: var(--ink-shadow-lg);
}

/* Die breite Kachel stapelt immer: Text oben, Zusatzinhalt darunter.
   Nebeneinander konkurrierten beide um dieselbe Breite – der Text
   wurde schmal, und die Ampel-Spalten wurden am Kartenrand
   abgeschnitten. Untereinander bekommt jeder Teil die volle Breite,
   und der zuvor leere Raum unten wird genutzt. */
.ink-bento__item--wide {
	grid-column: span 3;
	flex-direction: column;
	align-items: stretch;
}

/* Farbvarianten der Kacheln wurden entfernt – alle sechs tragen jetzt
   dieselbe helle Fläche. Die Rangfolge entsteht über die Grösse der
   Kacheln, nicht über die Farbe. */

/* flex-basis von 22rem ist die Untergrenze des Textblocks: Darunter
   bricht er Wort für Wort um, sobald ein Nachbar viel Platz
   beansprucht. Dann stapelt sich die Kachel lieber. */
.ink-bento__body {
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	flex: 1 1 22rem;
	min-width: 0;
}

.ink-bento__number {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-sm);
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--ink-sand-400);
}

.ink-bento__item h3 {
	margin: 0;
	font-size: var(--ink-text-xl);
	line-height: 1.25;
}

.ink-bento__item p {
	margin: 0;
	font-size: var(--ink-text-sm);
	line-height: 1.65;
	color: var(--ink-graphite-500);
}

/* Hervorhebung im Kacheltext.
   Fett allein reicht hier nicht: Der Absatz steht in Graphit-500 auf
   heller Fläche, und ein fetter Zug in derselben gedämpften Farbe
   fällt kaum auf. Die dunklere Stufe macht daraus eine Betonung –
   dieselbe Paarung wie im Kasten unter der Preistabelle.

   Die Preiszeile ist ausgenommen: Ihr <strong> trägt weiter unten
   eine eigene Schrift in Stärke 800. Ohne das :not() gewinnt diese
   Regel über die Spezifität und macht den Preis eine Stufe dünner –
   gemessen am 04.09.2026, als genau das passierte. */
.ink-bento__item p:not(.ink-bento__price) strong {
	font-weight: 700;
	color: var(--ink-graphite-900);
}

.ink-bento__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
}
.ink-bento__list li {
	position: relative;
	padding-left: 1.35rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
	line-height: 1.5;
}
.ink-bento__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ink-mint-400);
}

/* Die Grafik sass früher neben dem Text; dort begrenzte flex-basis
   ihre Breite. In der gestapelten Kachel wirkt dieselbe Angabe auf
   die Höhe und hätte den Kreis gestaucht. Jetzt wird die Breite
   direkt begrenzt und die Grafik mittig gesetzt. */
.ink-bento__visual {
	flex: none;
	width: 100%;
	max-width: 220px;
	margin-inline: auto;
	display: grid;
	place-items: center;
}
.ink-bento__visual svg { width: 100%; height: auto; }

.ink-bento__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	font-weight: 650;
	font-size: var(--ink-text-sm);
	color: var(--ink-orange-600);
	text-decoration: none;
}
.ink-bento__link svg { transition: transform var(--ink-dur-fast) var(--ink-ease-out); }
.ink-bento__item:hover .ink-bento__link svg { transform: translateX(4px); }

/*
 * Das offene Beispiel unter dem Verweis auf den Hub.
 *
 * In Mint statt Orange: Zwei gleich gefärbte Verweise in einer
 * Kachel ringen um dieselbe Aufmerksamkeit, und der Blick trifft
 * dann keinen von beiden. Orange führt zum Angebot, Mint zum
 * Ausprobieren – dieselbe Aufteilung wie überall auf der Seite.
 *
 * `margin-top: 0` hebt das `auto` der Grundregel auf, das den
 * ersten Verweis an den Fuss der Kachel schiebt; sonst rissen die
 * beiden auseinander.
 */
.ink-bento__link--probe {
	margin-top: 0.55rem;
	color: var(--ink-mint-700);
	font-size: calc(var(--ink-text-sm) * 0.94);
	line-height: 1.35;
	align-items: flex-start;
}
.ink-bento__link--probe svg { flex: none; margin-top: 0.15rem; }
.ink-bento__link--probe:hover { color: var(--ink-mint-800); }

.ink-bento__price {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 !important;
}
.ink-bento__price strong {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-3xl);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--ink-graphite-900);
}
.ink-bento__price span { font-size: var(--ink-text-sm); color: var(--ink-graphite-400); }

/*
 * Zweite Preiszeile, gleiche Optik – nur Abstand darüber. Die
 * Grundregel setzt margin mit !important, deshalb muss der Abstand
 * hier ebenso durchgreifen.
 */
.ink-bento__price--zweit { margin-top: var(--ink-space-2) !important; }

/* Ampel-Paar in der dunklen Kachel */
/* flex: 0 0 auto hiess: gibt keinen Platz ab. Neben einem Textblock
   führte das dazu, dass die Ampel ihre volle Breite behielt und der
   Text auf Wortbreite zusammenfiel. Jetzt darf sie schrumpfen. */
.ink-bento__ampel {
	width: 100%;
	min-width: 0;
	margin-top: auto;
}

.ink-ampel-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ink-space-4);
}
.ink-ampel-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	/* Ohne min-width bestimmt der längste Badge – "Keine offenen
	   Stellen" – die Mindestbreite der Spalte. Genau daran wurden die
	   Ampeln zuvor am Kartenrand abgeschnitten. */
	min-width: 0;
}

/* Reicht der Platz trotzdem nicht, bricht der Badge um, statt über
   den Rand zu laufen. */
.ink-ampel-col .ink-status {
	max-width: 100%;
	white-space: normal;
}
.ink-ampel-col__label {
	font-size: var(--ink-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-graphite-400);
	margin-bottom: 0.15rem;
}

@media (max-width: 1080px) {
	.ink-bento { grid-template-columns: repeat(4, 1fr); }
	.ink-bento__item       { grid-column: span 2; }
	.ink-bento__item--wide { grid-column: span 4; }
}

@media (max-width: 760px) {
	.ink-bento { grid-template-columns: 1fr; }
	.ink-bento__item,
	.ink-bento__item--wide { grid-column: span 1; flex-direction: column; align-items: stretch; }
	.ink-ampel-pair { grid-template-columns: 1fr; gap: var(--ink-space-5); }
}

/* ------------------------------------------------------------
   Zwei Wege: So funktioniert's
   ------------------------------------------------------------ */
.ink-tracks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.ink-track {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-xl);
}
.ink-track--worker   { border-top: 4px solid var(--ink-mint-500); }
.ink-track--employer { border-top: 4px solid var(--ink-orange-500); }

.ink-track__label {
	margin: 0 0 var(--ink-space-5);
	font-size: var(--ink-text-lg);
	color: var(--ink-graphite-500);
	font-weight: 650;
}

.ink-track__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ink-space-5);
	counter-reset: step;
}

.ink-track__step {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ink-space-4);
	align-items: start;
}

/* Verbindungslinie zwischen den Schritten */
.ink-track__step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 44px;
	bottom: calc(-1 * var(--ink-space-5));
	width: 2px;
	background: linear-gradient(180deg, var(--ink-sand-300), transparent);
}

.ink-track__number {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: var(--ink-font-display);
	font-weight: 800;
	font-size: var(--ink-text-base);
	color: var(--ink-graphite-800);
	background: var(--ink-sand-200);
}
.ink-track--worker   .ink-track__number { background: var(--ink-mint-100);   color: var(--ink-mint-800); }
.ink-track--employer .ink-track__number { background: var(--ink-orange-100); color: var(--ink-orange-700); }

.ink-track__content h4 {
	margin: 0 0 0.35rem;
	font-size: var(--ink-text-base);
	line-height: 1.35;
}
.ink-track__content p {
	margin: 0;
	font-size: var(--ink-text-sm);
	line-height: 1.65;
	color: var(--ink-graphite-500);
}

/* ------------------------------------------------------------
   Ampel-Demonstration in Karten
   ------------------------------------------------------------ */
.ink-ampel-demo { margin-top: var(--ink-space-5); }

.ink-democard {
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
	transition: transform var(--ink-dur-base) var(--ink-ease-out),
	            border-color var(--ink-dur-base) var(--ink-ease-out),
	            box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-democard:hover {
	transform: translateY(-4px);
	border-color: var(--ink-mint-300);
	box-shadow: var(--ink-shadow-md);
}

.ink-democard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-3);
	flex-wrap: wrap;
}
.ink-democard__side {
	font-size: var(--ink-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-graphite-400);
}
.ink-democard__title {
	margin: 0;
	font-size: var(--ink-text-lg);
	line-height: 1.3;
}
.ink-democard__meta {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}
.ink-democard__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ink-democard__foot {
	display: flex;
	align-items: center;
	gap: var(--ink-space-3);
	flex-wrap: wrap;
	padding-top: var(--ink-space-3);
	border-top: 1px solid var(--ink-border-subtle);
}
.ink-democard__hint {
	font-size: var(--ink-text-xs);
	color: var(--ink-text-muted);
}

.ink-ampel-section__note {
	margin-top: var(--ink-space-6);
	padding: var(--ink-space-4) var(--ink-space-5);
	background: var(--ink-sand-100);
	border-radius: var(--ink-radius-md);
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
	text-align: center;
}

/* ------------------------------------------------------------
   Vorlagen-Sektion
   ------------------------------------------------------------ */
/* Sprungleiste und Kategorie-Abschnitte des Vorlagen-Hubs.
   Die Kacheln der Startseite zeigen auf #<slug>; die Abschnitte
   tragen genau diese Kennungen. */
.ink-templates-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-3);
	margin-block: var(--ink-space-5) var(--ink-space-7);
}
.ink-templates-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	font-size: var(--ink-text-sm);
	font-weight: 600;
	color: var(--ink-graphite-700);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color var(--ink-dur-base) var(--ink-ease-out),
	            color var(--ink-dur-base) var(--ink-ease-out);
}
.ink-templates-nav__link:hover,
.ink-templates-nav__link:focus-visible {
	color: var(--ink-mint-700);
	border-color: var(--ink-mint-400);
}
.ink-templates-nav__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding-inline: 0.35rem;
	font-size: var(--ink-text-xs);
	font-weight: 700;
	color: var(--ink-mint-700);
	background: var(--ink-mint-50);
	border-radius: 999px;
}

/* Abstand nach oben, damit die Überschrift beim Sprung nicht unter
   der festen Kopfleiste des Themes verschwindet. */
.ink-templates-section {
	margin-bottom: var(--ink-space-7);
	scroll-margin-top: 6rem;
}
.ink-templates-section__title {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-xl);
	font-weight: 700;
	padding-bottom: var(--ink-space-3);
	border-bottom: 1.5px solid var(--ink-border-subtle);
}
.ink-templates-section__text {
	margin-top: var(--ink-space-3);
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

.ink-templates-preview { margin-top: var(--ink-space-7); }
.ink-templates-preview__title {
	font-size: var(--ink-text-lg);
	margin-bottom: var(--ink-space-4);
}

.ink-vorlagen-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-4);
	margin-top: var(--ink-space-7);
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--ink-bg-elevated);
	border: 1.5px dashed var(--ink-mint-300);
	border-radius: var(--ink-radius-lg);
}
.ink-vorlagen-note p {
	margin: 0;
	max-width: 60ch;
	font-size: var(--ink-text-sm);
	line-height: 1.65;
	color: var(--ink-graphite-600);
}
.ink-vorlagen-note strong { color: var(--ink-graphite-900); }

/* ------------------------------------------------------------
   Preise
   ------------------------------------------------------------ */
.ink-price__audience {
	margin: 0.25rem 0 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-text-muted);
}
.ink-price__currency {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-2xl);
	font-weight: 700;
	color: var(--ink-graphite-600);
}

/* ---------- Der Betrag, in jeder Karte gleich gebaut ----------
   Die Zeilen des Rasters standen bereits auf einer Linie – schief
   wirkte etwas anderes: „0 € / Monat" passte in eine Zeile,
   „29,99 € / Monat" nicht. Bei fünf Spalten à 196 px brach der
   Zusatz also mal um und mal nicht, und die Karten sahen ungleich
   aus, obwohl die Zahlen exakt gleich hoch standen (gemessen:
   Zeitraum-Zeile 30 px gegen 60 px).

   Jetzt steht der Zeitraum immer in einer eigenen Zeile. Das
   kostet bei „0 €" eine Zeile Höhe und gewinnt dafür, dass alle
   fünf Karten identisch gebaut sind – auch in der Jahresansicht,
   wo aus „/ Monat" ein „/ Jahr" wird. */
.ink-price__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem;
}

.ink-price__period {
	flex: 0 0 100%;
}
.ink-price header { margin-bottom: 0; }
.ink-price .ink-btn { margin-top: auto; width: 100%; }

/* ---------- Karte unterhalb der laufenden Stufe ----------
   Seit 14.09.2026: Wer Premium hat, sieht an Einrichtung Pro kein
   Kaufangebot, sondern ein Schild. Es steht an derselben Stelle wie
   der Knopf und ist genau ein Element – das Raster der Karten
   (subgrid, fünf Zeilen) bleibt dadurch auf einer Linie.

   Bewusst ohne Rot und ohne Schloss: Hier ist nichts verboten, der
   Tarif steckt schon im laufenden. Zurückhaltend wie ein Hinweis,
   nicht wie ein Fehler – gestrichelter Rand, keine Bewegung beim
   Überfahren, damit es nicht nach Knopf aussieht.

   Zwei Zeilen – deshalb Spalte statt Reihe. Über eine eigene Klasse
   statt :has(): Ein Browser, der einen Selektor einer Liste nicht
   versteht, verwirft die ganze Regel. */
.ink-price .ink-btn--zweizeilig {
	flex-direction: column;
	gap: 0.3rem;
	line-height: 1.2;
	padding-block: 0.7rem;
	text-align: center;
}
.ink-btn--gesperrt {
	background: var(--ink-sand-100);
	color: var(--ink-graphite-700);
	border: 1.5px dashed var(--ink-border);
	cursor: default;
}
.ink-btn--gesperrt:hover,
.ink-btn--gesperrt:active {
	transform: none;
	box-shadow: none;
}
.ink-btn__zusatz {
	font-size: var(--ink-text-xs, 0.75rem);
	font-weight: 500;
	opacity: 0.85;
}

/* ---------- Preise auf eine Höhe bringen ----------
   Die Zielgruppenzeile über dem Preis läuft je nach Tarif über
   zwei oder drei Zeilen. In einer Flex-Spalte rutscht der Preis
   dadurch je Karte anders weit nach unten – vier Beträge, vier
   Höhen. Mit subgrid übernehmen alle Karten dieselben Zeilen des
   äusseren Rasters: Kopf, Preis, Notiz, Merkmale, Schaltfläche
   stehen dann über alle Karten hinweg auf einer Linie.

   Vorbedingung dafür ist, dass jede Karte gleich viele Kinder
   hat – deshalb liegen Stempel und Notiz in einem gemeinsamen
   Element. Browser ohne subgrid zeigen weiterhin die bisherige
   Spaltenanordnung; nichts bricht, es steht nur wieder versetzt. */
/*
 * Fünf Tarife statt vier: Die Grundregel .ink-grid--4 lässt eine
 * Spalte erst ab 230 px zu, damit passten nur vier nebeneinander
 * und der fünfte rutschte allein in eine zweite Zeile. Mit 190 px
 * liegen alle fünf in einer Reihe; schmaler wird umbrochen wie
 * bisher.
 */
/*
 * Fünf Tarife statt vier.
 *
 * Die Grundregel .ink-grid--4 verlangt 230 px je Spalte; bei den
 * rund 1060 px, die der Inhaltsbereich hergibt, passten damit nur
 * vier nebeneinander und der fünfte stand allein in einer zweiten
 * Zeile – wie vergessen. Mit engerem Abstand und 175 px Mindestmass
 * liegen alle fünf in einer Reihe. Schmaler wird umbrochen, dann
 * aber in zwei Zeilen, die beide gefüllt sind.
 */
.ink-pricing-grid {
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
}

/* Bei fünf schmalen Spalten zählt jeder Millimeter Innenabstand. */
@media (min-width: 1000px) {
	.ink-pricing-grid .ink-price {
		padding: 1.5rem 1.25rem;
	}
}

@supports (grid-template-rows: subgrid) {
	.ink-pricing-grid .ink-price {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		gap: var(--ink-space-4);
	}
}

/* ---------- Ersparnis-Stempel an den Jahrespreisen ----------
   Dieselbe Farbe wie „Jetzt suchen": Sie ist im ganzen Auftritt
   die eine Farbe, die zum Handeln auffordert. Ein zweiter Ton
   dafür würde die Aussage nur verwässern.

   Er steht unter dem Preis, nicht daneben. Daneben ragte er über
   den Kartenrand hinaus – ein Stempel, der halb neben dem Papier
   liegt, sieht nach Fehler aus, nicht nach Angebot.

   Sichtbar ausschliesslich in der Jahresansicht. Ein Stempel
   „28 % sparen" neben dem Monatspreis wäre schlicht falsch – und
   zwar auf die teure Art, die man später erklären muss. */
.ink-price__unten {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ink-space-2);
}

.ink-price__ersparnis {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-family: var(--ink-font-body);
	font-size: var(--ink-text-xs);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: #fff;
	background: var(--ink-orange-500);
	border-radius: var(--ink-radius-pill);
	box-shadow: 0 4px 12px -4px rgba(255, 106, 43, 0.5);

	/* Leicht schräg – ein Stempel, kein weiteres Etikett. */
	transform: rotate(-3deg);
}

.ink-pricing-grid:not([data-period="yearly"]) .ink-price__ersparnis {
	display: none;
}

.ink-price-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-5);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--ink-sand-100);
	border-radius: var(--ink-radius-xl);
}
.ink-price-extra h4 { margin: 0 0 0.4rem; font-size: var(--ink-text-lg); }
.ink-price-extra p  { margin: 0; font-size: var(--ink-text-sm); color: var(--ink-graphite-500); max-width: 48ch; }
.ink-price-extra strong { color: var(--ink-graphite-900); }
/*
 * Der Hinweis darunter: sichtbar genug, um gelesen zu werden, aber
 * nicht so laut, dass er das Angebot übertönt. Solange die
 * Einzelbuchung noch nicht läuft, ist er der ehrlichere Teil des
 * Kastens.
 */
.ink-price-extra__hint {
	margin-top: var(--ink-space-3) !important;
	padding-top: var(--ink-space-3);
	border-top: 1px dashed var(--ink-sand-400);
	color: var(--ink-graphite-600) !important;
}

/* ------------------------------------------------------------
   Abschluss-Sektion
   ------------------------------------------------------------ */
.ink-cta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.ink-cta__intro { display: flex; flex-direction: column; gap: var(--ink-space-4); }
.ink-cta__cards { display: grid; gap: var(--ink-space-4); }

.ink-cta__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ink-space-3);
	padding: clamp(1.5rem, 3vw, 2rem);
	background: rgba(248, 242, 231, 0.06);
	border: 1px solid rgba(248, 242, 231, 0.16);
	border-radius: var(--ink-radius-lg);
	transition: background var(--ink-dur-base) var(--ink-ease-soft),
	            border-color var(--ink-dur-base) var(--ink-ease-soft);
}
.ink-cta__card:hover {
	background: rgba(248, 242, 231, 0.10);
	border-color: rgba(248, 242, 231, 0.30);
}
.ink-cta__card h3 { margin: 0; font-size: var(--ink-text-xl); color: #fff; }
.ink-cta__card p  { margin: 0; font-size: var(--ink-text-sm); color: var(--ink-graphite-200); line-height: 1.65; }

/* ============================================================
   Detailseite einer Vorlage
   ------------------------------------------------------------
   Die Vorschau steht links und bekommt den meisten Platz: Sie
   beantwortet die Frage, mit der Besucher hier ankommen. Fakten
   und Freischaltung stehen rechts und bleiben beim Scrollen
   stehen, damit der Preis nicht aus dem Blick gerät.
   ============================================================ */

.ink-vorlage {
	padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem);
	background: var(--ink-bg);
}

.ink-brotkrumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-text-muted);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.ink-brotkrumen a { color: var(--ink-mint-700); text-decoration: none; }
.ink-brotkrumen a:hover { text-decoration: underline; }

.ink-vorlage__einleitung {
	max-width: 62ch;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ink-vorlage__einleitung h1 {
	font-size: var(--ink-text-3xl);
	margin-block: 0.6rem 0.8rem;
	text-wrap: balance;
}
.ink-vorlage__text {
	color: var(--ink-graphite-500);
	line-height: 1.65;
	margin-top: 0.9rem;
}

/* --- Zweispalter: Vorschau und Seitenleiste ----------------- */
.ink-vorlage__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.ink-vorlage__seite {
	margin: 0 0 var(--ink-space-5);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
	overflow: hidden;
	box-shadow: var(--ink-shadow-sm);
}
.ink-vorlage__bild {
	display: block;
	width: 100%;
	height: auto;
}
.ink-vorlage__seite figcaption {
	padding: 0.7rem 1rem;
	font-size: var(--ink-text-xs);
	color: var(--ink-text-muted);
	border-top: 1px solid var(--ink-border-subtle);
	background: var(--ink-sand-50);
}

.ink-vorlage__resthinweis {
	font-size: var(--ink-text-sm);
	color: var(--ink-text-muted);
	text-align: center;
	padding: var(--ink-space-4);
	border: 1.5px dashed var(--ink-border);
	border-radius: var(--ink-radius-md);
}

/* --- Seitenleiste ------------------------------------------- */
.ink-vorlage__seitenleiste { position: sticky; top: var(--ink-space-5); }

.ink-vorlage__karte {
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	box-shadow: var(--ink-shadow-sm);
}

.ink-vorlage__fakten { margin: 0 0 var(--ink-space-5); display: grid; gap: 0.9rem; }
.ink-vorlage__fakten > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--ink-border-subtle);
}
.ink-vorlage__fakten > div:last-child { border-bottom: none; padding-bottom: 0; }
.ink-vorlage__fakten dt {
	font-size: var(--ink-text-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-graphite-400);
}
.ink-vorlage__fakten dd {
	margin: 0;
	font-size: var(--ink-text-sm);
	font-weight: 600;
	color: var(--ink-graphite-700);
	text-align: right;
}

.ink-vorlage__cta { width: 100%; }
.ink-vorlage__hinweis {
	margin-top: 0.9rem;
	font-size: var(--ink-text-xs);
	line-height: 1.5;
	color: var(--ink-text-muted);
	text-align: center;
}

/* --- Abschnitte unterhalb der Vorschau ---------------------- */
.ink-vorlage__schlagworte,
.ink-vorlage__verwandt {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.ink-vorlage__schlagworte h2,
.ink-vorlage__verwandt h2 {
	font-size: var(--ink-text-2xl);
	margin-bottom: var(--ink-space-5);
}

.ink-vorlage__schlagworte ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

/* --- Verwandte Vorlagen ------------------------------------- */
.ink-vorlage__nachbar {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	text-decoration: none;
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
	overflow: hidden;
	transition: transform var(--ink-dur-base) var(--ink-ease-out),
	            box-shadow var(--ink-dur-base) var(--ink-ease-out);
}
.ink-vorlage__nachbar:hover {
	transform: translateY(-4px);
	box-shadow: var(--ink-shadow-md);
}
.ink-vorlage__nachbar img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.ink-vorlage__nachbar-titel {
	padding: 0 1rem 1.1rem;
	font-family: var(--ink-font-display);
	font-weight: 700;
	font-size: var(--ink-text-base);
	line-height: 1.3;
	color: var(--ink-graphite-900);
}

.ink-vorlage__zurueck {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}
.ink-vorlage__zurueck a {
	font-weight: 600;
	color: var(--ink-mint-700);
}

@media (max-width: 900px) {
	.ink-vorlage__raster { grid-template-columns: 1fr; }

	/* Gestapelt ist ein klebender Kasten nur im Weg – er würde beim
	   Scrollen über der Vorschau hängen bleiben. */
	.ink-vorlage__seitenleiste { position: static; }
}