/* ============================================================
   FAVORITEN.CSS – Herzen auf inklusio.pro (Marc, 03.10.2026)
   ------------------------------------------------------------
   1. Aktives Favoriten-Herz (HivePress) überall rot
   2. Vorlagen merken: Herz an Kachel und Detailseite
   3. Seite „Meine Vorlagen" und der alte Anker #favoriten
   4. Handy (max-width: 47.99em)

   Eingebunden nach components.css und vor mobil.css (functions.php,
   Kennung inklusio-favoriten). Farben nur über Token aus inklusio.css:
   --ink-favorit (#D33A3F, ≥ 3,79:1 auf allen Flächen der Seite).
   ============================================================ */


/* ------------------------------------------------------------
   1. AKTIVES FAVORITEN-HERZ ÜBERALL ROT
   Marc, 03.10.2026: „das Herz eines aktiven Favoriten soll überall
   ROT sein, sonst ist es nicht logisch."

   Bis dahin: In den Ergebniskarten färbte das Elternthema das Herz
   (#ff5a5f, auf Weiss nur 3,05:1), auf der Eintragsseite war es am
   Desktop grau und nur am Handy rot (mobil.css, 7.4). Jetzt eine Regel
   ohne Medienabfrage für alle Orte: Karten in Suche, Favoriten,
   Anbieterseite und Startseite (.hp-listing--view-block) sowie die
   Eintragsseite (.hp-listing--view-page, Herz im Ortsblock –
   Inklusio_Favoriten::herz_zur_adresse).

   Der Zustand ist data-state="active" – so schaltet der Toggle von
   HivePress; hp-state-active steht zur Sicherheit daneben. `.hp-listing`
   davor hebt die Spezifität auf (0,4,0), über die Kartenregel des
   Elternthemas. Das inaktive Herz bleibt, wie es war. Nur das Symbol
   wird rot, nicht die Beschriftung „Aus Favoriten entfernen".

   Die Kartenregel des Elternthemas ist lokal nicht lesbar (JobHive
   liegt nur auf dem Server). Damit sie das neue Rot nicht doch über
   eine längere Auswahl schlägt, steht die Karte zusätzlich mit ihrem
   ganzen Pfad (Fusszeile → Aktionen → Herz, 0,6,0) in der Liste.
   ------------------------------------------------------------ */
.hp-listing .hp-listing__action--favorite[data-state="active"] > .hp-icon,
.hp-listing .hp-listing__action--favorite[data-state="active"] > i,
.hp-listing .hp-listing__action--favorite[data-state="active"]:hover > .hp-icon,
.hp-listing .hp-listing__action--favorite[data-state="active"]:focus-visible > .hp-icon,
.hp-listing .hp-listing__action--favorite.hp-state-active > .hp-icon,
.hp-listing__action--favorite[data-state="active"] > .hp-icon,
.hp-listing.hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite[data-state="active"] > .hp-icon,
.hp-listing.hp-listing--view-block .hp-listing__footer .hp-listing__actions--primary .hp-listing__action--favorite[data-state="active"]:hover > .hp-icon,
.hp-listing.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__action--favorite[data-state="active"] > .hp-icon,
.hp-vendor .hp-vendor__action--favorite[data-state="active"] > .hp-icon {
	color: var(--ink-favorit);
}


/* ------------------------------------------------------------
   2. VORLAGEN MERKEN – das Herz an Kachel und Detailseite
   (Inklusio_Vorlagenmerken::knopf)

   Zwei Fassungen desselben Markups:
   - .ink-merken--kachel: oben rechts im Vorschaubild, runde weisse
     Fläche 44 × 44 (Tippziel), nur das Symbol – der Text ist für
     Bildschirmleser da (ink-visually-hidden). Weiss unterlegt, weil
     das Bild darunter keinen Kontrast garantiert: Rot auf Weiss 4,72:1,
     Grau (graphite-500) auf Weiss 6,73:1.
   - .ink-merken--detail: Pille mit Symbol und Text unter den Knöpfen
     der Seitenleiste, volle Breite.
   Gäste bekommen statt des Formulars einen Verweis (a.ink-merken--gast)
   in derselben Gestalt.

   JobHive setzt button[type=submit] (0,1,1) mit eigenem Verlauf, Rand,
   Polster und Schrift – jede dieser Eigenschaften braucht hier eine
   Regel mit [type="submit"] (0,2,0), sonst gewinnt das Thema (siehe
   inklusio.css, Absendeknöpfe, und Memory inklusio-kontolisten).
   ------------------------------------------------------------ */
.ink-merken {
	margin: 0;
}

.ink-merken--kachel {
	position: absolute;
	top: var(--ink-space-3);
	right: var(--ink-space-3);
	z-index: 1; /* über dem Wasserzeichen (.ink-template--gated .ink-template__preview::after) */
}

.ink-merken__knopf,
.ink-merken__knopf[type="submit"],
a.ink-merken--gast {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	font-family: var(--ink-font-body);
	font-size: var(--ink-text-sm);
	font-weight: 600;
	line-height: 1;
	color: var(--ink-graphite-500);
	background: var(--ink-bg-elevated);
	background-image: none;
	border: 1.5px solid var(--ink-border);
	border-radius: var(--ink-radius-pill);
	box-shadow: var(--ink-shadow-sm);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition:
		color var(--ink-dur-fast) var(--ink-ease-soft),
		border-color var(--ink-dur-fast) var(--ink-ease-soft),
		transform var(--ink-dur-fast) var(--ink-ease-out);
}

/* Kachel: rund, nur Symbol. */
.ink-merken--kachel .ink-merken__knopf,
.ink-merken--kachel .ink-merken__knopf[type="submit"],
a.ink-merken--gast.ink-merken--kachel {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
}

/* Detailseite: Pille mit Text unter den Knöpfen der Karte. */
.ink-merken--detail {
	display: block;
	margin-top: var(--ink-space-4);
}

.ink-merken--detail .ink-merken__knopf,
.ink-merken--detail .ink-merken__knopf[type="submit"],
a.ink-merken--gast.ink-merken--detail {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
}

/* Der Gast-Verweis ist Hülle und Knopf zugleich: Die gemeinsame Regel
   oben setzt ihm margin: 0 (0,1,1) und schlüge .ink-merken--detail
   (0,1,0) – deshalb der Abstand hier noch einmal mit Element. */
a.ink-merken--gast.ink-merken--detail {
	margin-top: var(--ink-space-4);
}

.ink-merken__herz {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--ink-dur-fast) var(--ink-ease-out);
}

/* Gemerkt: rotes, gefülltes Herz – dieselbe Farbe wie das aktive Favoriten-Herz oben. */
.ink-merken--aktiv .ink-merken__knopf,
.ink-merken--aktiv .ink-merken__knopf[type="submit"] {
	color: var(--ink-favorit);
	border-color: var(--ink-favorit);
}
.ink-merken--aktiv .ink-merken__herz {
	fill: currentColor;
}

/* Zeigen nur mit echter Maus (Prüferfund 03.10.2026): Auf Touch-Geräten
   bleibt :hover nach dem Antippen hängen (mobil.css 7.x) – ein gerade
   entmerktes, also inaktives Herz sähe rot aus, genau die Unlogik, die
   Marc beseitigen wollte. Rot heisst nur noch „aktiv" (.ink-merken--aktiv)
   oder Tastaturfokus. */
@media (hover: hover) {
	.ink-merken__knopf:hover,
	.ink-merken__knopf[type="submit"]:hover,
	a.ink-merken--gast:hover {
		color: var(--ink-favorit);
		border-color: var(--ink-favorit);
		background: var(--ink-bg-elevated);
		transform: translateY(-1px);
	}
	.ink-merken__knopf:hover .ink-merken__herz,
	a.ink-merken--gast:hover .ink-merken__herz {
		transform: scale(1.08);
	}
}

/* Während fetch läuft (vorlagenmerken.js). */
.ink-merken__knopf[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Fokusring wie überall (inklusio.css) – am runden Knopf rund statt 4 px. */
.ink-merken__knopf:focus-visible,
a.ink-merken--gast:focus-visible {
	outline: 3px solid var(--ink-orange-500);
	outline-offset: 3px;
}
.ink-merken--kachel .ink-merken__knopf:focus-visible,
a.ink-merken--gast.ink-merken--kachel:focus-visible {
	border-radius: 50%;
}

/* Die Kachel hebt sich beim Zeigen; das Herz soll dabei nicht aus dem Bild rutschen. */
.ink-template__preview {
	position: relative;
}


/* ------------------------------------------------------------
   3. SEITE „MEINE VORLAGEN" UND DER ALTE ANKER
   ------------------------------------------------------------ */
.ink-meine-vorlagen .ink-templates-grid {
	margin-top: 0;
	/* auto-fill statt auto-fit (Prüferfund 03.10.2026): Das Hub-Raster
	   (.ink-grid--4, inklusio.css) klappt leere Spalten ein und dehnt die
	   belegten – im Hub unsichtbar (jede Reihe hat vier und mehr Kacheln),
	   auf der Merkliste mit ein bis drei Kacheln oder einem Suchtreffer
	   würde eine Kachel 900 px breit und ihre A4-Vorschau 1270 px hoch.
	   auto-fill hält die Spalten; die Kachel bleibt so breit wie im Hub. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

/* #favoriten bleibt als Sprungziel vor „Beliebte Vorlagen" (umbenannt
   am 03.10.2026): unsichtbar, mit demselben Abstand zur festen Leiste
   wie .ink-templates-section (landing.css). */
.ink-anker {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	scroll-margin-top: 6rem;
}

/* Überschrift der Merkliste unter dem Logokasten (seit 09.10.2026). */
.ink-meine-vorlagen__titel {
	margin: 0 0 var(--ink-space-3);
	font-size: var(--ink-text-xl);
}

/* ------------------------------------------------------------
   3a. KASTEN „DEIN LOGO IN DEN VORLAGEN" (Marc, 09.10.2026;
   Inklusio_Vorlagenmerken::logo_kasten, docs/logo-fachkraft-pro.md)

   Derselbe Kasten wie .ink-hinweiskasten (components.css): weisse
   Fläche, gestrichelter Mint-Rand, grosse Rundung. Drei Fassungen:
   - Fachkraft Pro: Text, Vorschau des Vorlagenkopfs, Formular mit
     Häkchen (Kreuzchen wie in den Rechnungsdaten), Dateiwahl, Knöpfe.
   - Fachkraft Basis (--gesperrt): sandfarben, grauer Rand, Schloss;
     trotzdem lesbar – Titel graphite-700 (10,6:1 auf Sand-100), Text
     graphite-600 (8,6:1), „in Fachkraft Pro enthalten" graphite-500
     (6,2:1); der Knopf bleibt orange mit weisser Schrift (Marc).
   - Einrichtungen (--zeile): eine Zeile mit Verweis, kein Kasten.
   Farben nur über Token aus inklusio.css.
   Prüferfunde 09.10.2026: Die Umleitung springt auf die Überschrift
   (#ink-logokasten-titel), also trägt sie den scroll-margin – auf dem
   Kasten allein griff er nicht, und die Überschrift klebte am oberen
   Rand. Der Verweis in der Einrichtungszeile ist wie die anderen
   Fliesstext-Verweise (components.css .ink-einwilligung a) fett und
   unterstrichen, nicht nur farbig (1,6:1 zum Text reicht nicht).
   ------------------------------------------------------------ */
.ink-logokasten {
	margin: 0 0 var(--ink-space-6);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	background: var(--ink-bg-elevated);
	border: 1.5px dashed var(--ink-mint-300);
	border-radius: var(--ink-radius-lg);
	scroll-margin-top: 6rem;
}

.ink-logokasten__titel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--ink-space-2);
	font-size: var(--ink-text-xl);
	line-height: 1.25;
	/* Sprungziel der Umleitung: Rand des Kastens (Innenabstand bis 1.75rem) plus Luft bleibt im Fenster. */
	scroll-margin-top: 4.5rem;
}

.ink-logokasten__text {
	margin: 0;
	color: var(--ink-graphite-600);
}

/* Zweiter Absatz im ausgegrauten Kasten: das gespeicherte Logo nach einer Rückstufung. */
.ink-logokasten__text + .ink-logokasten__text {
	margin-top: var(--ink-space-2);
}

/* „Logo entfernen" neben „Zu Fachkraft Pro": nur ein Knopf, das Formular trägt nichts auf. */
.ink-logokasten__entfernen {
	display: contents;
}

.ink-logokasten__meldung {
	margin: 0 0 var(--ink-space-3);
	max-width: none;
}

/* Vorschau des Vorlagenkopfs: links Balken statt Titel, rechts das Logo
   im Zuschnitt 2 : 1 – rechts oben angeschlagen, wie im PDF. */
.ink-logokasten__vorschau {
	margin: var(--ink-space-4) 0 0;
}

.ink-logokasten__kopf {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ink-space-4);
	padding: var(--ink-space-3) var(--ink-space-4);
	background: var(--ink-bg-elevated);
	border: 1px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-sm);
}

.ink-logokasten__kopf .ink-verdeckt {
	flex: 1 1 auto;
	margin: 0.25rem 0 0;
}

.ink-logokasten__bild {
	flex: none;
	width: 136px;
	height: 68px;
	object-fit: contain;
	object-position: right top;
}

.ink-logokasten__hinweis {
	margin: var(--ink-space-2) 0 0;
	font-size: var(--ink-text-xs);
	line-height: 1.45;
	color: var(--ink-graphite-500);
}

.ink-logokasten__form {
	display: grid;
	gap: var(--ink-space-3);
	margin: var(--ink-space-4) 0 0;
}

/* Das Häkchen nimmt die Kreuzchenregel der Rechnungsdaten
   (.ink-rechnungsdaten__schalter) – hier nur die Textfarbe. */
.ink-logokasten__haekchen span {
	color: var(--ink-graphite-800);
}

.ink-logokasten__datei label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.ink-logokasten__datei input[type="file"] {
	width: auto;
	max-width: 100%;
	padding: 0.4rem 0;
	border: 0;
	background: transparent;
}

.ink-logokasten__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-3);
	margin: var(--ink-space-2) 0 0 !important;
}

/* Fachkraft Basis: ausgegraut – aber lesbar (Kontraste siehe oben). */
.ink-logokasten--gesperrt {
	background: var(--ink-sand-100);
	border-color: var(--ink-graphite-200);
}

.ink-logokasten--gesperrt .ink-logokasten__titel {
	color: var(--ink-graphite-700);
}

.ink-logokasten__schloss {
	flex: none;
	fill: none;
	stroke: var(--ink-graphite-400);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ink-logokasten__marke {
	font-weight: 600;
	color: var(--ink-graphite-500);
}

/* Einrichtungen: nur die Zeile. */
.ink-logokasten--zeile {
	padding: 0;
	margin: 0 0 var(--ink-space-4);
	background: transparent;
	border: 0;
	color: var(--ink-graphite-600);
}

.ink-logokasten--zeile a {
	color: var(--ink-mint-700);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ink-logokasten--zeile a:hover,
.ink-logokasten--zeile a:focus-visible {
	color: var(--ink-mint-800);
}


/* ------------------------------------------------------------
   4. HANDY
   ------------------------------------------------------------ */
@media (max-width: 47.99em) {
	.ink-merken--kachel {
		top: var(--ink-space-2);
		right: var(--ink-space-2);
	}

	.ink-merken--detail .ink-merken__knopf,
	.ink-merken--detail .ink-merken__knopf[type="submit"],
	a.ink-merken--gast.ink-merken--detail {
		min-height: 48px;
	}

	/* Logokasten (09.10.2026): Knöpfe untereinander in voller Breite wie
	   .ink-hinweiskasten__aktionen (mobil.css), Vorschau mit dem Logo
	   rechts oben über den Balken, Dateiwahl in der Zeile haltend. */
	.ink-logokasten__aktionen {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--ink-space-2);
	}

	.ink-logokasten__aktionen .ink-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		white-space: normal;
		line-height: 1.25;
		text-align: center;
	}

	.ink-logokasten__kopf {
		gap: var(--ink-space-3);
		padding: var(--ink-space-3);
	}

	.ink-logokasten__bild {
		width: 96px;
		height: 48px;
	}

	.ink-logokasten__datei input[type="file"] {
		width: 100%;
	}
}