/* ============================================================
   INKLUSIO.PRO – FUNKTIONSBAUSTEINE
   ------------------------------------------------------------
   Styles für die Elemente, die das Core-Plugin ausgibt:
   Sperrliste, Upgrade-Hinweise, PDF24-Helfer, Feldfehler.
   ============================================================ */

/* ---------- Feldfehler ---------- */
.ink-field-error {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: var(--ink-space-2);
	padding: 0.7rem 0.9rem;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: #93262A;
	background: var(--ink-status-red-bg);
	border: 1px solid rgba(211, 58, 63, 0.22);
	border-radius: var(--ink-radius-sm);
}
.ink-field-error::before {
	content: "!";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	/*
	 * Keine Rundung von hier aus. JobHive setzt die Bilder
	 * ausdrücklich eckig – `.hp-vendor--view-block .hp-vendor__image
	 * img { border-radius: 0 }` – und gewinnt durch die höhere
	 * Spezifität. Eine Rundung an dieser Stelle wäre eine Regel, die
	 * nichts bewirkt und beim nächsten Lesen Rätsel aufgibt.
	 */
	background: var(--ink-status-red);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
}

/* ---------- Radius-Hinweis für Gratis-Konten ---------- */
.ink-radius-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
	background: var(--ink-sand-100);
	border: 1px dashed var(--ink-sand-400);
	border-radius: var(--ink-radius-md);
}
.ink-radius-notice a {
	font-weight: 650;
	color: var(--ink-orange-600);
	text-decoration: underline;
}

/* ---------- PDF24-Helfer unter dem Upload-Feld ---------- */
.ink-pdf24 {
	/* Eigene Zeile, volle Breite, nichts daneben. Der Knopf
	   „Datei auswählen" schwimmt im Feld darüber mit; ohne `clear`
	   legt sich der Kasten schief um ihn herum. */
	clear: both;
	display: block;
	width: 100%;
	margin-top: var(--ink-space-3);
	padding: 0.85rem 1rem;
	background: var(--ink-mint-50);
	border: 1px solid var(--ink-mint-200);
	border-radius: var(--ink-radius-md);
	box-sizing: border-box;
}
.ink-pdf24__text {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
}
.ink-pdf24__text a {
	font-weight: 650;
	color: var(--ink-mint-700);
}
.ink-pdf24__hint {
	margin: 0.35rem 0 0;
	font-size: var(--ink-text-xs);
	color: var(--ink-text-muted);
}

/* ---------- Sperrliste im Dashboard ---------- */
.ink-blocklist {
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-4);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
}
.ink-blocklist__title { margin: 0; font-size: var(--ink-text-xl); }
.ink-blocklist__hint {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
	line-height: 1.6;
}
.ink-blocklist__list {
	display: grid;
	gap: 2px;
	max-height: 340px;
	overflow-y: auto;
	padding: var(--ink-space-2);
	background: var(--ink-sand-50);
	border: 1px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-md);
}
.ink-blocklist__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--ink-radius-sm);
	font-size: var(--ink-text-sm);
	cursor: pointer;
	transition: background var(--ink-dur-fast) var(--ink-ease-soft);
}
.ink-blocklist__item:hover { background: var(--ink-sand-100); }
.ink-blocklist__item input { width: 18px; height: 18px; accent-color: var(--ink-mint-600); }
.ink-blocklist__item input:checked + span {
	color: var(--ink-status-red);
	font-weight: 600;
	text-decoration: line-through;
	text-decoration-color: rgba(211, 58, 63, 0.4);
}
.ink-blocklist button { align-self: flex-start; }

/* ---------- Upgrade-Karte ---------- */
.ink-upgrade-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ink-space-3);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: linear-gradient(135deg, var(--ink-sand-100), var(--ink-mint-50));
	border: 1.5px solid var(--ink-mint-200);
	border-radius: var(--ink-radius-lg);
}
.ink-upgrade-card h3 { margin: 0; font-size: var(--ink-text-2xl); }
.ink-upgrade-card p {
	margin: 0;
	color: var(--ink-graphite-500);
	max-width: 54ch;
}

/* ---------- Upgrade-Overlay ---------- */
.ink-upgrade-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--ink-space-4);
}
.ink-upgrade-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 27, 33, 0.55);
	backdrop-filter: blur(4px);
	animation: ink-fade var(--ink-dur-base) var(--ink-ease-out);
}
.ink-upgrade-modal__panel {
	position: relative;
	width: min(100%, 440px);
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--ink-bg-elevated);
	border-radius: var(--ink-radius-xl);
	box-shadow: var(--ink-shadow-lg);
	animation: ink-pop var(--ink-dur-base) var(--ink-ease-out);
}
.ink-upgrade-modal__panel h3 { margin: 0; font-size: var(--ink-text-2xl); }
.ink-upgrade-modal__panel p { margin: 0; color: var(--ink-graphite-500); }
.ink-upgrade-modal__price {
	font-size: var(--ink-text-lg);
	color: var(--ink-graphite-800) !important;
}
.ink-upgrade-modal__price strong {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-2xl);
	color: var(--ink-orange-600);
}
.ink-upgrade-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-2);
	margin-top: var(--ink-space-2);
}

/* Die Sicherheitsabfrage teilt sich das Fenster mit dem
   Upgrade-Hinweis – dieselbe Form, andere Farbe. Rot am Knopf und
   am oberen Rand: Was hier passiert, ist nicht dasselbe wie ein
   Angebot, und das soll man sehen, bevor man liest. */
.ink-rueckfrage .ink-upgrade-modal__panel {
	border-top: 4px solid var(--ink-status-red);
}
.ink-rueckfrage .ink-upgrade-modal__panel h3 {
	font-size: var(--ink-text-xl);
}
.ink-rueckfrage .ink-upgrade-modal__panel p {
	color: var(--ink-graphite-600);
	line-height: 1.6;
}
/* Der Löschknopf trägt hier Fläche, nicht nur Schrift: Im Fenster
   ist er die Hauptaktion und muss sich von „Abbrechen" abheben. */
.ink-rueckfrage .ink-btn--primary.ink-btn--warnung {
	color: #fff;
	background: var(--ink-status-red);
	border-color: var(--ink-status-red);
}

@keyframes ink-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes ink-pop {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Vorlagen-Raster ---------- */
.ink-templates-grid { margin-block: var(--ink-space-5); }
.ink-template__text {
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
	line-height: 1.55;
	margin: 0;
}
.ink-template .ink-btn { margin-top: var(--ink-space-3); align-self: flex-start; }

/* ------------------------------------------------------------
   Namenszeile im Profil
   ------------------------------------------------------------
   Steht unter der Überschrift und tritt bewusst zurück: Die
   Überschrift nennt die Fachlichkeit, der Name ordnet sie einer
   Person zu – nicht umgekehrt.
   ------------------------------------------------------------ */
.ink-listing-name {
	margin: 0.15rem 0 0.6rem;
	font-family: var(--ink-font-body);
	font-size: var(--ink-text-base);
	font-weight: 550;
	color: var(--ink-graphite-500);
	letter-spacing: -0.005em;
}

.hp-listing--view-block .ink-listing-name {
	font-size: var(--ink-text-sm);
	margin: 0.1rem 0 0.4rem;
}

/* ------------------------------------------------------------
   Verfügbarkeits-Ampel in Karte und Profil
   ------------------------------------------------------------
   Ersetzt die frühere Textzeile. Der Absatz selbst trägt nur den
   Abstand – Form und Farbe stecken in .ink-status, damit Ampel auf
   der Startseite und Ampel im Ergebnis dieselbe Regel benutzen und
   nicht auseinanderlaufen können.
   ------------------------------------------------------------ */

.ink-listing-ampel {
	margin: 0 0 var(--ink-space-2);
}

.hp-listing--view-page .ink-listing-ampel {
	margin-bottom: var(--ink-space-4);
}

/* ------------------------------------------------------------
   Plakette für bezahlte Platzierung
   ------------------------------------------------------------
   Bewusst zurückhaltend, aber lesbar: Sie soll nicht wie ein
   Gütesiegel wirken, sondern wie das, was sie ist – ein Hinweis,
   dass dieser Eintrag für Geld vor den anderen steht. Deshalb
   steht die Erklärung daneben und nicht in einem Tooltip, den auf
   dem Telefon niemand öffnet.
   ------------------------------------------------------------ */

.ink-vorrang {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 var(--ink-space-2);
	font-size: var(--ink-text-xs, 0.75rem);
	line-height: 1.3;
}

.ink-vorrang__marke {
	padding: 0.15rem 0.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink-graphite-700);
	background: var(--ink-sand-200);
	border-radius: var(--ink-radius-pill);
}

.ink-vorrang__erklaerung {
	color: var(--ink-graphite-400);
}

/* ------------------------------------------------------------
   Vorschau für Gäste
   ------------------------------------------------------------
   Die Trefferliste bleibt sichtbar – man soll sehen, dass hier
   etwas los ist –, aber unlesbar. `pointer-events: none` nimmt
   die Verweise mit: Ein unscharfes Feld, das sich anklicken
   lässt, ist keine Schranke, sondern ein Rätsel.

   Der Kasten darüber bleibt scharf. Er ist der einzige Weg aus
   der Vorschau heraus und muss deshalb bedienbar bleiben.
   ------------------------------------------------------------ */

.ink-vorschau .hp-listing--view-block,
.ink-vorschau .hp-vendor--view-block {
	filter: blur(6px);
	pointer-events: none;
	user-select: none;
}

/*
 * Für Menschen, die Bewegung und Effekte reduziert haben, bleibt
 * die Unschärfe – sie ist kein Effekt, sondern die Aussage. Die
 * Vorlesehilfe erfährt es über den Kasten, nicht über das Auge.
 */
.ink-vorschau .hp-listing--view-block a,
.ink-vorschau .hp-vendor--view-block a,
.ink-vorschau .hp-listing--view-block button,
.ink-vorschau .hp-vendor--view-block button {
	pointer-events: none;
}

.ink-vorschau-kasten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-4);
	margin: 0 0 var(--ink-space-5);
	padding: clamp(1.25rem, 3vw, 1.75rem);

	/* Dieselbe Farbe wie „Jetzt suchen" – der eine Ton, der zum
	   Handeln auffordert. */
	color: #fff;
	background: var(--ink-orange-500);
	border-radius: var(--ink-radius-lg);
	box-shadow: 0 14px 34px -14px rgba(255, 106, 43, 0.55);
}

.ink-vorschau-kasten strong {
	display: block;
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	line-height: 1.25;
}

.ink-vorschau-kasten p {
	margin: 0.35rem 0 0;
	max-width: 52ch;
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.ink-vorschau-kasten__weg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
}

/*
 * Der Knopf im orangefarbenen Kasten muss sich abheben – orange
 * auf orange wäre unsichtbar. Deshalb hier weiss mit dunkler
 * Schrift.
 */
.ink-vorschau-kasten .ink-btn--primary {
	color: var(--ink-graphite-900);
	background: #fff;
	box-shadow: none;
}

.ink-vorschau-kasten .ink-btn--primary:hover {
	color: var(--ink-graphite-900);
	background: rgba(255, 255, 255, 0.88);
	transform: none;
	box-shadow: none;
}

/*
 * Beide Wege sehen gleich aus. Zuerst war der zweite ein blosser
 * Textverweis – das las sich wie ein Nachtrag, dabei sind
 * Fachkräfte und Einrichtungen die beiden gleichrangigen Hälften
 * dieser Plattform.
 */
.ink-vorschau-kasten__weg .ink-btn {
	flex: 0 1 auto;
	text-align: center;
}

/*
 * Auf dem Profil steht der Kasten mitten im Text, nicht über einer
 * Liste. Etwas Luft darüber, damit er nicht am vorherigen Absatz
 * klebt.
 */
.ink-vorschau-kasten--profil {
	margin: var(--ink-space-5) 0;
}

/* ------------------------------------------------------------
   Suche von einem Standort aus
   ------------------------------------------------------------
   Nur das eigene Konto sieht diesen Knopf. Er trägt dieselbe
   Farbe wie „Jetzt suchen", weil er dasselbe tut – nur mit einem
   anderen Ausgangspunkt.
   ------------------------------------------------------------ */

.ink-standortsuche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
	margin: var(--ink-space-4) 0;
}

.ink-standortsuche__hinweis {
	padding: 0.2rem 0.6rem;
	font-size: var(--ink-text-xs);
	font-weight: 700;
	color: var(--ink-graphite-600);
	background: var(--ink-sand-200);
	border-radius: var(--ink-radius-pill);
}

/* ------------------------------------------------------------
   Standortwahl vor der Fachkräftesuche
   ------------------------------------------------------------
   Eine Liste, keine Kachelwand: Die Standorte eines Trägers
   unterscheiden sich in einer einzigen Angabe – dem Ort. Sie
   untereinander zu stellen macht sie vergleichbar, nebeneinander
   müsste das Auge springen.
   ------------------------------------------------------------ */

.ink-standortwahl__lead {
	margin-bottom: var(--ink-space-5);
	color: var(--ink-graphite-600);
}

.ink-standortliste {
	display: grid;
	gap: var(--ink-space-4);
	margin: 0 0 var(--ink-space-6);
	padding: 0;
	list-style: none;
}

.ink-standort {
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
}

/* Blasser Rand: Die Verwaltungsadresse ist kein Standort, an dem
   jemand gefunden wird – das darf man ihr ansehen. */
.ink-standort--verwaltung {
	border-style: dashed;
	background: var(--ink-sand-50, transparent);
}

.ink-standort__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-3);
}

.ink-standort__name {
	margin: 0;
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
}

.ink-standort__ort {
	margin: var(--ink-space-2) 0 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

.ink-standort__hinweis {
	margin: var(--ink-space-3) 0 0;
	font-size: var(--ink-text-xs);
	color: var(--ink-graphite-500);
}

.ink-standort__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-3);
	margin-top: var(--ink-space-4);
}

.ink-standortwahl__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-4);
	padding-top: var(--ink-space-5);
	border-top: 1.5px solid var(--ink-border-subtle);
}

.ink-standortwahl__grenze {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

/* Hinweiskasten für Wege, die dieser Anmeldung nicht offenstehen. */
.ink-hinweiskasten {
	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);
}

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

.ink-hinweiskasten__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-3);
	margin-top: var(--ink-space-4) !important;
}

/* Balken anstelle der verdeckten Angaben. */
.ink-verdeckt {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0 0 var(--ink-space-2);
}

.ink-verdeckt__balken {
	display: block;
	height: 0.85rem;
	width: 60%;
	background: var(--ink-sand-200);
	border-radius: var(--ink-radius-pill);
}

.ink-verdeckt__balken--breit {
	height: 1.15rem;
	width: 85%;
	background: var(--ink-sand-300, var(--ink-sand-200));
}

/* Abgeblendete Auswahlpunkte der Startseiten-Suche. */
.ink-searchbar__field select option:disabled {
	color: var(--ink-graphite-400);
	text-decoration: line-through;
}

/* ------------------------------------------------------------
   Profilbild in der Anbieterkarte
   ------------------------------------------------------------
   Das Theme setzt width:100% und height:auto bei gleichzeitigem
   border-radius:50%. Ist das Bild nicht quadratisch, entsteht
   daraus eine Ellipse – und weil Porträts oben den Kopf haben,
   wird genau der abgeschnitten.

   Feste Kantenlänge plus object-fit löst das: Das Bild wird
   beschnitten statt verzerrt, und der Ausschnitt liegt im oberen
   Drittel, wo bei Porträts das Gesicht sitzt.
   ------------------------------------------------------------ */

.hp-vendor__image img,
.hp-listing__image img.avatar,
.hp-user__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;

	/*
	 * Etwas oberhalb der Mitte ausrichten. Bei Porträts sitzt das
	 * Gesicht im oberen Drittel – mittig beschnitten stünde man
	 * bei Hals und Schultern.
	 */
	object-position: center 22%;

	/*
	 * Bewusst keine Rundung von hier aus: JobHive setzt diese Bilder
	 * ausdrücklich eckig (`.hp-vendor--view-block .hp-vendor__image
	 * img { border-radius: 0 }`) und gewinnt durch die höhere
	 * Spezifität. Eine Rundung an dieser Stelle wäre eine Regel, die
	 * nichts bewirkt und beim nächsten Lesen Rätsel aufgibt.
	 */
	background-color: var(--ink-sand-200, #F0E5D4);
}

/* Der Rahmen darum: nicht zu gross und mit Abstand zur Karte. */
.hp-vendor--view-block .hp-vendor__image,
.hp-vendor--view-page .hp-vendor__image {
	width: 7rem;
	max-width: 55%;
	margin: var(--ink-space-4) auto var(--ink-space-3);
}

/* ------------------------------------------------------------
   Bild in der Suchkarte
   ------------------------------------------------------------
   Das Bild wirkte abgeschnitten – und es war es auch. Gemessen
   am 21.08.2026: JobHive gibt dem Bildkopf `margin-top: -3rem`,
   damit das Bild über den Kartenrand hinausragt, und die Karte
   selbst trägt `overflow: hidden`. Der obere Rand des Bildes lag
   dadurch 15 Pixel **ausserhalb** der Karte und wurde von ihr
   weggeschnitten. Bei einem runden Logo sieht man das sofort:
   Der Kreis endet an einer geraden Kante.

   Ein Überstand ist ein Gestaltungsmittel, wenn er gewollt
   aussieht. Hier sah er nach einem Fehler aus. Deshalb sitzt der
   Kopf jetzt im Innenabstand der Karte, und das Bild bekommt ein
   eigenes quadratisches Feld: mit Innenabstand, in Sandton
   hinterlegt und mit `contain` – so wird nichts beschnitten, die
   Zeichnung bleibt von der Kante weg, und man sieht, wo das Bild
   aufhört und die Karte anfängt.
   ------------------------------------------------------------ */

.hp-listing--view-block .hp-listing__header {
	/*
	 * Den Überstand zurücknehmen. `flex-basis: auto` statt eines
	 * festen Werts: Die Karte läuft als Spalte, dort wäre die
	 * Basis die Höhe, nicht die Breite – ein fester Wert hiesse
	 * also je nach Ausrichtung etwas anderes.
	 */
	flex: 0 0 auto;
	width: 5rem;
	margin-top: 0;
	margin-left: 0;
}

.hp-listing--view-block .hp-listing__image {
	width: 100%;
	max-width: none;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0 0 var(--ink-space-2);
	padding: var(--ink-space-2);
	border-radius: var(--ink-radius-lg);
	background-color: var(--ink-sand-100, #FAF5EE);
	overflow: hidden;
}

/*
 * Der Verweis liegt zwischen Feld und Bild und hätte sonst keine
 * Höhe – das Bild fiele auf seine natürliche Grösse zurück und
 * das Feld darum wäre wirkungslos.
 */
.hp-listing--view-block .hp-listing__image > a {
	display: block;
	width: 100%;
	height: 100%;
}

.hp-listing--view-block .hp-listing__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--ink-radius-md);

	/* HivePress legt Grau unter; hier trägt das Feld die Farbe. */
	background-color: transparent;
}

/* ------------------------------------------------------------
   Kopfbild eines Profils
   ------------------------------------------------------------
   Der Bildbereich läuft im Verhältnis 4:3, das Foto ist aber
   quadratisch – beschnitten wird oben und unten, und genau dort
   ist bei einem Porträt der Kopf. Deshalb quadratisch und
   `contain`: Es wird nichts abgeschnitten, das Bild bekommt Luft
   zum Rand, und was fehlt, füllt der Sandton.
   ------------------------------------------------------------ */

.hp-listing--view-page .hp-listing__images {
	aspect-ratio: 1 / 1 !important;
	max-width: 22rem;
	height: auto !important;
	margin-inline: auto;
	padding: var(--ink-space-3);
	border-radius: var(--ink-radius-lg);
	background-color: var(--ink-sand-100, #FAF5EE);
	overflow: hidden;
}

.hp-listing--view-page .hp-listing__images img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--ink-radius-md);
}

/* Falls der Karussell-Baustein greift: Höhe durchreichen. */
.hp-listing--view-page .hp-listing__images .slick-list,
.hp-listing--view-page .hp-listing__images .slick-track,
.hp-listing--view-page .hp-listing__images .slick-slide,
.hp-listing--view-page .hp-listing__images .slick-slide > div {
	height: 100% !important;
	padding-top: 0 !important;
}

/* ------------------------------------------------------------
   Hinweis über einer Seite
   ------------------------------------------------------------
   Wird eingeblendet, wenn jemand umgeleitet wurde – etwa weil das
   eigene Profil noch fehlt. Eine wortlose Umleitung wirkt wie ein
   Fehler; der Kasten nennt den Grund.
   ------------------------------------------------------------ */

.ink-hinweis {
	margin: var(--ink-space-5) 0 0;
	padding: var(--ink-space-4) var(--ink-space-5);
	border-radius: var(--ink-radius-md);
	border-left: 4px solid var(--ink-mint-500, #43A883);
	background: var(--ink-mint-50, #F0F8F4);
	color: var(--ink-graphite-700, #2C323C);
	font-size: var(--ink-text-base);
	line-height: 1.55;
}

.ink-hinweis strong {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--ink-font-display);
	color: var(--ink-mint-800, #1E523F);
}

/* ------------------------------------------------------------
   Hinweis über dem Filter
   ------------------------------------------------------------
   Erklärt, warum die Liste kurz ist: Es wirkt bereits ein
   Umkreis. Ohne diesen Satz liest sich eine kurze Liste wie ein
   leeres Angebot statt wie ein enges Suchfeld.
   ------------------------------------------------------------ */

.ink-suchhinweis {
	margin: 0 0 var(--ink-space-3);
	padding: var(--ink-space-3) var(--ink-space-4);
	border-radius: var(--ink-radius-md);
	background: var(--ink-sand-100, #FAF5EE);
	color: var(--ink-graphite-700, #2C323C);
	font-size: var(--ink-text-sm);
	line-height: 1.5;
}

.ink-suchhinweis__zusatz {
	color: var(--ink-graphite-500, #5A6472);
}

@media (prefers-color-scheme: dark) {
	.ink-suchhinweis {
		background: rgba(255, 255, 255, .06);
		color: inherit;
	}
}

/* ------------------------------------------------------------
   Gesperrte Menüpunkte
   ------------------------------------------------------------
   Bleiben sichtbar, damit erkennbar ist, dass es den Bereich
   gibt – aber ohne Verweis, weil er für diese Anmeldung nicht
   gilt. Der Verweis ist serverseitig durch einen span ersetzt,
   das hier ist nur die Optik.

   Ausdrücklich `span.` davor, und das ist kein Schönheitsfehler.
   Inklusio_Menue setzt dieselbe Klasse an zwei Stellen: am <li>
   (über $item->classes) und am <span>, der den Verweis ersetzt.
   Ohne die Einschränkung traf jede Regel beide – mit zwei Folgen,
   beide am 25.08.2026 auf dem Telefon gemessen:

     display:inline-block am <li> nahm den Punkten ihre eigene
     Zeile. „Fachkräfte finden" (133 px) und „Stellen finden"
     (104 px) passten zusammen in die 311 px breite Spalte und
     standen nebeneinander, ohne Trennung. Die freigeschalteten
     Punkte blieben list-item und damit untereinander – der
     Unterschied sah nach Zufall aus.

     opacity:.5 wirkte zweimal ineinander, also effektiv .25. Die
     Punkte waren halb so kräftig wie gedacht und kaum lesbar.
   ------------------------------------------------------------ */

span.ink-menu--gesperrt {
	display: inline-block;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .5;
	cursor: not-allowed;
}

.hp-menu span.ink-menu--gesperrt,
.header-navbar__menu span.ink-menu--gesperrt,
.footer-navbar__menu span.ink-menu--gesperrt {
	color: inherit;
}

/* ------------------------------------------------------------
   Suchradius bei Gratis-Konten
   ------------------------------------------------------------
   Die Stufen bleiben sichtbar, damit die Frage „ginge das enger
   oder weiter?" beantwortet ist – die nicht verfügbaren
   durchgestrichen und blass, dieselbe Sprache wie bei den
   Menüpunkten anderer Rollen.
   ------------------------------------------------------------ */

.ink-radius {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ink-space-2);
	margin-bottom: var(--ink-space-3);
	font-size: var(--ink-text-sm);
}

.ink-radius__titel {
	font-weight: 600;
	color: var(--ink-graphite-700, #2C323C);
}

.ink-radius__stufen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ink-space-2);
}

.ink-radius__stufe {
	display: inline-block;
	padding: 0 .35rem;
	border-radius: var(--ink-radius-sm);
}

.ink-radius__stufe--frei {
	background: var(--ink-mint-100, #E3F3EB);
	color: var(--ink-mint-800, #1E523F);
	font-weight: 600;
}

.ink-radius__stufe--gesperrt {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: .45;
	cursor: not-allowed;
}

.ink-radius__pro {
	flex: 1 1 100%;
}

@media (prefers-color-scheme: dark) {
	.ink-radius__titel {
		color: inherit;
	}

	.ink-radius__stufe--frei {
		background: rgba(142, 207, 178, .18);
		color: inherit;
	}
}

/* ------------------------------------------------------------
   Rechtstexte in Arbeit
   ------------------------------------------------------------
   Ein Platzhalter, der ehrlich sagt, was fehlt. Solange er
   dasteht, nimmt Inklusio_Seo die Seite aus dem Suchindex –
   die Prüfung hängt an genau dieser Klasse.
   ------------------------------------------------------------ */

.ink-rechtstext-entwurf {
	padding: var(--ink-space-4) var(--ink-space-5);
	border-left: 4px solid var(--ink-sand-400, #D9C7AC);
	border-radius: var(--ink-radius-md);
	background: var(--ink-sand-100, #FAF5EE);
	color: var(--ink-graphite-700, #2C323C);
	line-height: 1.6;
}

.ink-rechtstext-entwurf strong {
	display: block;
	margin-bottom: .25rem;
	font-family: var(--ink-font-display);
}

@media (prefers-color-scheme: dark) {
	.ink-rechtstext-entwurf {
		background: rgba(255, 255, 255, .06);
		color: inherit;
	}
}

/* ------------------------------------------------------------
   Kontaktformular
   ------------------------------------------------------------
   Der Honigtopf muss weg sein, ohne weg zu sein: `display: none`
   überspringen manche Bots gezielt, weil sie genau danach suchen.
   Deshalb steht er ausserhalb des Bildes statt ausgeblendet – für
   das Auge unsichtbar, im Markup ein Feld wie jedes andere.
   ------------------------------------------------------------ */
.ink-kontakt__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ink-kontakt__formular {
	display: grid;
	gap: var(--ink-space-4);
	max-width: 40rem;
}

.ink-kontakt__feld {
	display: grid;
	gap: 0.35rem;
	margin: 0 !important;
}

.ink-kontakt__feld label {
	font-size: var(--ink-text-sm);
	font-weight: 600;
	color: var(--ink-graphite-700);
}

.ink-kontakt__feld input,
.ink-kontakt__feld select,
.ink-kontakt__feld textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-family: inherit;
	font-size: var(--ink-text-base);
	color: var(--ink-graphite-900);
	background: #fff;
	border: 1px solid var(--ink-sand-300);
	border-radius: var(--ink-radius-md);
}

.ink-kontakt__feld textarea {
	resize: vertical;
	min-height: 9rem;
}

.ink-kontakt__feld input:focus-visible,
.ink-kontakt__feld select:focus-visible,
.ink-kontakt__feld textarea:focus-visible {
	outline: 2px solid var(--ink-mint-500);
	outline-offset: 1px;
}

.ink-kontakt__hinweis,
.ink-kontakt__datenschutz {
	margin: 0 !important;
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: var(--ink-graphite-500);
}

.ink-kontakt__meldung {
	max-width: 40rem;
	margin: 0 0 var(--ink-space-5) !important;
	padding: var(--ink-space-3) var(--ink-space-4);
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	border-radius: var(--ink-radius-md);
}

.ink-kontakt__meldung--erfolg {
	color: var(--ink-mint-700);
	background: var(--ink-mint-100);
	border-left: 4px solid var(--ink-mint-500);
}

.ink-kontakt__meldung--fehler {
	color: var(--ink-status-red);
	background: var(--ink-status-red-bg);
	border-left: 4px solid var(--ink-status-red);
}

/* ------------------------------------------------------------
   Verantwortungshinweis am Upload-Feld
   ------------------------------------------------------------
   Er soll gelesen werden, bevor jemand eine Datei aussucht – also
   auffällig genug, um nicht überblättert zu werden, und ruhig
   genug, um nicht wie eine Fehlermeldung zu wirken. Sand statt
   Rot: Es ist ein Hinweis, kein Verbot.
   ------------------------------------------------------------ */
.ink-upload-hinweis {
	margin: var(--ink-space-3) 0 0 !important;
	padding: var(--ink-space-3) var(--ink-space-4);
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: var(--ink-graphite-700, var(--ink-graphite-600));
	background: var(--ink-sand-100);
	border-left: 4px solid var(--ink-orange-500);
	border-radius: 0 var(--ink-radius-md) var(--ink-radius-md) 0;
}

@media (prefers-color-scheme: dark) {
	.ink-upload-hinweis {
		color: var(--ink-graphite-200);
		background: rgba(255, 255, 255, .06);
	}
}

/* ------------------------------------------------------------
   Erklärung über der Suchkarte
   ------------------------------------------------------------
   Die rote Nadel markiert die eigene Adresse. Was sie bedeutet,
   steht über der Karte und nicht in ihrem Aufklappfenster: Dort
   läse es nur, wer sie ohnehin schon angeklickt hat.

   Leiste und Karte sollen wie ein Stück aussehen. Deshalb schliesst
   die Leiste unten ohne Rahmen an, und die Karte gibt ihre obere
   Rundung ab – zwei Regeln, die nur zusammen wirken.
   ------------------------------------------------------------ */
.ink-kartenlegende {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 !important;
	padding: 0.5rem 0.7rem;
	font-size: var(--ink-text-xs);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-graphite-600);
	background: var(--ink-sand-100);
	border: 1px solid var(--ink-sand-300);
	border-bottom: 0;
	border-radius: var(--ink-radius-md) var(--ink-radius-md) 0 0;
}

.ink-kartenlegende__nadel {
	flex: 0 0 auto;
	display: block;
}

/* Nur die obere Rundung nehmen, keine untere setzen.

   Das Kartenfeld selbst bringt keine Rundung mit – die kommt, wenn
   überhaupt, vom umschliessenden Widget. Eine Regel, die hier einen
   Radius *setzt*, änderte also womöglich etwas, das vorher jemand
   anders bestimmt hat. Diese hier nimmt nur weg, was zwischen
   Leiste und Karte eine helle Ecke reissen würde, und lässt den
   Rest unangetastet. */
.hp-map.ink-karte--mit-legende {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

@media (prefers-color-scheme: dark) {
	.ink-kartenlegende {
		color: var(--ink-graphite-200);
		background: rgba(255, 255, 255, .06);
		border-color: rgba(255, 255, 255, .16);
	}
}

/* ------------------------------------------------------------
   Zurück zur Trefferliste
   ------------------------------------------------------------
   Steht ganz oben in der Inhaltsspalte, über Bild und Titel: Wer
   zurück will, sucht dort und nicht am Seitenende. Bewusst kein
   Knopf, sondern ein Verweis mit Pfeil – ein Knopf an dieser Stelle
   ränge mit „Kontaktieren" um die Aufmerksamkeit, und der Rückweg
   ist die leisere der beiden Handlungen.
   ------------------------------------------------------------ */
.ink-zurueck {
	margin: 0 0 var(--ink-space-4);
}

.ink-zurueck__link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--ink-text-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-mint-700);
	text-decoration: none;
	transition: color var(--ink-dur-base) ease;
}

.ink-zurueck__link:hover,
.ink-zurueck__link:focus-visible {
	color: var(--ink-mint-600);
	text-decoration: underline;
}

/* Der Pfeil rückt beim Zeigen ein Stück nach links – dorthin, wohin
   er zeigt. Wer die Bewegung abgeschaltet hat, bekommt sie nicht. */
.ink-zurueck__link svg {
	flex: 0 0 auto;
	transition: transform var(--ink-dur-base) ease;
}

.ink-zurueck__link:hover svg {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.ink-zurueck__link svg {
		transition: none;
	}

	.ink-zurueck__link:hover svg {
		transform: none;
	}
}

/* ------------------------------------------------------------
   Leermeldung
   ------------------------------------------------------------
   Nennt den tatsächlichen Grund – Umkreis, angekreuzte Merkmale –
   statt auf Suchbegriffe zu verweisen, die es hier nicht gibt.
   ------------------------------------------------------------ */

.ink-leermeldung {
	padding: var(--ink-space-6) var(--ink-space-5);
	border-radius: var(--ink-radius-lg);
	background: var(--ink-sand-100, #FAF5EE);
	text-align: center;
}

.ink-leermeldung h2 {
	margin-bottom: var(--ink-space-2);
	font-size: var(--ink-text-lg);
}

.ink-leermeldung p {
	margin: 0 auto;
	max-width: 34rem;
	line-height: 1.6;
}

.ink-leermeldung__weg {
	margin-top: var(--ink-space-4);
}

/* Der Weg zur Initiativbewerbung.

   Er steht abgesetzt vom Rest der Meldung und trägt als einziges
   Element darin Farbe: Alles darüber erklärt, warum nichts da ist –
   das hier ist das Einzige, was man tun kann. Eine weitere graue
   Zeile ginge in der Erklärung unter, und genau daran scheitert der
   Hinweis, wenn man ihn nur dazuschreibt.

   Keine Knopf-Optik, sondern eine eigene Fläche über die volle
   Breite: Der Text ist ein Satz, kein Befehl, und in einem Knopf
   sähe er nach Werbung aus statt nach Angebot. */
.ink-leermeldung__initiative {
	display: flex;
	align-items: center;
	gap: var(--ink-space-3);
	max-width: 34rem;
	margin: var(--ink-space-5) auto 0;
	padding: var(--ink-space-4) var(--ink-space-4);
	text-align: left;
	text-decoration: none;
	color: var(--ink-graphite-900);
	background: #fff;
	border: 1px solid var(--ink-mint-300);
	border-left: 4px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-md);
	box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .35);
	transition: border-color var(--ink-dur-base) ease,
	            box-shadow var(--ink-dur-base) ease,
	            transform var(--ink-dur-base) ease;
}

.ink-leermeldung__initiative:hover,
.ink-leermeldung__initiative:focus-visible {
	border-color: var(--ink-mint-500);
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
	transform: translateY(-1px);
}

/* min-width: 0 lässt den Textblock schrumpfen; ohne ihn drängt er
   in schmalen Spalten den Pfeil aus der Fläche. */
.ink-leermeldung__initiative-inhalt {
	display: block;
	min-width: 0;
}

/* Mintgrün, aber der lesbare Ton der Familie.

   Die Farbe des Knopfes „Suche starten" ist Mint-300 (#8ECFB2). Als
   Schrift auf dieser weissen Fläche kommt sie auf 1,79:1 – noch
   schlechter als das Weiss, das hier vorher stand (1,00:1). WCAG
   verlangt 4,5:1 für normalen Text; Mint-600 erreicht 4,21 und
   verfehlt es knapp, Mint-700 erreicht 6,25.

   Gemessen am 04.09.2026, nicht geschätzt: Der Unterschied zwischen
   „sieht grün aus" und „ist lesbar" liegt bei diesem Farbton genau
   zwischen zwei Stufen. */
.ink-leermeldung__initiative-text {
	display: block;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink-mint-700);
}

.ink-leermeldung__initiative-hinweis {
	display: block;
	margin-top: 2px;
	font-size: var(--ink-text-xs);
	line-height: 1.4;
	color: var(--ink-graphite-500);
}

/* Der Pfeil bleibt rechts stehen und schrumpft nicht mit. */
.ink-leermeldung__initiative svg {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--ink-mint-600);
}

@media (prefers-color-scheme: dark) {
	.ink-leermeldung {
		background: rgba(255, 255, 255, .06);
	}

	/*
	 * Kein Dunkelmodus für diesen Verweis – und das ist der Fehler,
	 * den er hier hatte.
	 *
	 * Die Seite selbst wird nicht dunkel; sie hat kein dunkles Thema.
	 * Wer sein System auf dunkel gestellt hat, bekam trotzdem die
	 * Regeln aus diesem Block: weisse Schrift auf einer Fläche, die
	 * hell blieb. Kontrast 1,00:1 – der Satz war schlicht unsichtbar,
	 * solange der Mauszeiger nicht darauf lag. Gemeldet am 04.09.2026.
	 *
	 * Die Fläche darf ruhig mitgehen, die Schrift nicht: Sie steht
	 * jetzt in beiden Fällen in Mint-700 und bleibt lesbar, egal was
	 * das Betriebssystem meldet.
	 */
	.ink-leermeldung__initiative {
		background: rgba(255, 255, 255, .06);
	}
}

/* ------------------------------------------------------------
   Rücksetz-Knopf im Filter
   ------------------------------------------------------------
   Erscheint nur, wenn wirklich etwas ausgewählt ist. Ein Knopf,
   der nichts tut, ist schlimmer als keiner.
   ------------------------------------------------------------ */

.ink-filter-ruecksetzer {
	margin: var(--ink-space-3) 0 0;
	text-align: center;
}

.ink-filter-ruecksetzer .button {
	width: 100%;
}

/* ------------------------------------------------------------
   Begründung statt Nachrichtenknopf
   ------------------------------------------------------------
   Steht an der Stelle, an der sonst „Kontaktieren" stünde. Ein
   Kasten wäre zu laut für einen Satz, der nur erklärt, warum
   hier gerade nichts steht.
   ------------------------------------------------------------ */

.ink-kontakthinweis {
	margin: var(--ink-space-3) 0 0;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-graphite-500);
}

/* Anlegeknopf ist ein Formular, kein Verweis – der Entwurf entsteht
   per POST. Ohne diese Regel bräche der Block die Fusszeile um.
   Dasselbe gilt für den Löschknopf neben „Standort bearbeiten". */
.ink-standort-neu,
.ink-standort__loeschen { display: inline; margin: 0; }

/* Rückmeldung nach dem Löschen, über der Liste. */
.ink-standortwahl__meldung {
	margin: 0 0 var(--ink-space-4);
	padding: 0.75rem 1rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-700);
	background: var(--ink-mint-50);
	border-left: 3px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-sm);
}
.ink-standortwahl__meldung--warnung {
	background: var(--ink-sand-100);
	border-left-color: var(--ink-status-yellow);
}

/* ------------------------------------------------------------
   Stellenanzeigen verwalten
   ------------------------------------------------------------ */
.ink-anzeigen__stand {
	margin-bottom: var(--ink-space-5);
	font-weight: 600;
	color: var(--ink-graphite-700);
}
.ink-anzeigen__voll {
	display: block;
	margin-top: 0.25rem;
	font-weight: 400;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}
.ink-anzeigen__leer {
	margin-bottom: var(--ink-space-5);
	color: var(--ink-graphite-500);
}
.ink-anzeigenliste {
	display: grid;
	gap: var(--ink-space-4);
	margin: 0 0 var(--ink-space-6);
	padding: 0;
	list-style: none;
}
.ink-anzeige {
	padding: clamp(1rem, 2.5vw, 1.5rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
}
/* Entwürfe sind noch nicht draussen – das darf man ihnen ansehen. */
.ink-anzeige--draft { border-style: dashed; }
.ink-anzeige__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-3);
}
.ink-anzeige__titel {
	margin: 0;
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
}
.ink-anzeige__status {
	padding: 0.2rem 0.6rem;
	font-size: var(--ink-text-xs);
	font-weight: 700;
	color: var(--ink-graphite-600);
	background: var(--ink-sand-200);
	border-radius: var(--ink-radius-pill);
}
.ink-anzeige__ort {
	margin: var(--ink-space-2) 0 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}
.ink-anzeige__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
	margin-top: var(--ink-space-4);
}
.ink-anzeige__loeschen,
.ink-anzeige__schalter,
.ink-anzeige-neu { display: inline; margin: 0; }
.ink-btn--warnung { color: var(--ink-status-red); }

/* Rückmeldung nach dem Umschalten. Steht über der Liste, damit man
   nicht raten muss, ob der Klick angekommen ist. */
.ink-anzeigen__meldung {
	margin: 0 0 var(--ink-space-4);
	padding: 0.75rem 1rem;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-700);
	background: var(--ink-mint-50);
	border-left: 3px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-sm);
}
.ink-anzeigen__meldung--warnung {
	background: var(--ink-sand-100);
	border-left-color: var(--ink-status-yellow);
}

/* Wie viele Texte fertig danebenliegen. Gehört neben den Stand,
   nicht darunter – es ist dieselbe Auskunft aus der anderen Richtung. */
.ink-anzeigen__entwuerfe {
	display: block;
	margin-top: 0.25rem;
	font-weight: 400;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}

/* Kein Platz frei: Der Knopf fehlt, der Grund nicht. Ein
   ausgegrauter Knopf würde zum Klicken einladen und nichts tun. */
.ink-anzeige__gesperrt {
	font-size: var(--ink-text-sm);
	font-style: italic;
	color: var(--ink-graphite-500);
	cursor: help;
}

/* Vom Tarif abgeschaltet – das ist kein Entwurf und soll auch nicht
   so aussehen. Durchgezogener Rand, gedämpfte Fläche. */
.ink-anzeige--draft:has(.ink-anzeige__gesperrt) { border-style: solid; }

/* ------------------------------------------------------------
   Match-Alert
   ------------------------------------------------------------ */
.ink-alert__lead { color: var(--ink-graphite-600); margin-bottom: var(--ink-space-5); }
.ink-alert__sperre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
	margin-bottom: var(--ink-space-5);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
	background: var(--ink-sand-100);
	border: 1px dashed var(--ink-sand-400);
	border-radius: var(--ink-radius-md);
}
.ink-alert__form {
	display: grid;
	gap: var(--ink-space-5);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
}
.ink-alert__schalter {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 650;
}
.ink-alert__schalter input { width: 20px; height: 20px; accent-color: var(--ink-mint-600); }
.ink-alert__feld { display: grid; gap: 0.4rem; max-width: 32rem; }
.ink-alert__feld label { font-weight: 600; font-size: var(--ink-text-sm); }
.ink-alert__feld input,
.ink-alert__feld select {
	padding: 0.6rem 0.8rem;
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-md);
	font: inherit;
}
.ink-alert__gruppe { border: 0; padding: 0; margin: 0; }
.ink-alert__gruppe legend {
	padding: 0;
	font-weight: 650;
	font-size: var(--ink-text-sm);
}
.ink-alert__hinweis {
	margin: 0.2rem 0 0.6rem;
	font-size: var(--ink-text-xs);
	color: var(--ink-graphite-500);
}
.ink-alert__wahl {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 var(--ink-space-4) 0.45rem 0;
	font-size: var(--ink-text-sm);
}
.ink-alert__fuss { margin-top: var(--ink-space-4); }
.ink-alert__loeschen { display: inline; margin: 0; }
/* Gesperrte Konten sehen die Maske, sollen sie aber nicht für
   bedienbar halten. */
.ink-alert--gesperrt .ink-alert__form { opacity: .72; }
.ink-alert__meldung {
	margin-bottom: var(--ink-space-5);
	padding: 0.75rem 1rem;
	font-size: var(--ink-text-sm);
	border-radius: var(--ink-radius-md);
	background: var(--ink-mint-50);
	border: 1px solid var(--ink-mint-200);
	color: var(--ink-graphite-700);
}
.ink-alert__meldung--ohne-ort {
	background: var(--ink-sand-100);
	border-color: var(--ink-sand-400);
}

/* ------------------------------------------------------------
   Etiketten im Merkmalskasten
   ------------------------------------------------------------
   Eine eigene Zeile über dem Wert, klein und zurückgenommen: Sie
   soll den Wert einordnen, nicht mit ihm konkurrieren. Deshalb
   kein Doppelpunkt und keine Fettung – die Grösse reicht.
   ------------------------------------------------------------ */

.ink-merkmal {
	display: block;
	margin-bottom: 0.15rem;
	font-size: var(--ink-text-xs);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: var(--ink-graphite-400, var(--ink-graphite-500));
}

/* In der Ergebniskarte noch eine Spur leiser – dort zählt der Wert,
   und der Platz ist knapp. */
.hp-listing--view-block .ink-merkmal {
	margin-bottom: 0;
	font-weight: 500;
}

/* ------------------------------------------------------------
   Benachrichtigung bei neuen Nachrichten
   ------------------------------------------------------------ */
.ink-nachrichtenalert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
	margin-bottom: var(--ink-space-5);
	padding: 0.8rem 1rem;
	font-size: var(--ink-text-sm);
	background: var(--ink-mint-50);
	border: 1px solid var(--ink-mint-200);
	border-radius: var(--ink-radius-md);
}
/* Abgeschaltet: sandfarben statt grün – der Zustand soll sich
   unterscheiden, ohne nach Fehler auszusehen. */
.ink-nachrichtenalert--aus {
	background: var(--ink-sand-100);
	border-color: var(--ink-sand-400);
}
.ink-nachrichtenalert__text { margin: 0; color: var(--ink-graphite-600); }
.ink-nachrichtenalert__form { display: inline; margin: 0; }
.ink-nachrichtenalert__meldung {
	margin: 0;
	font-size: var(--ink-text-xs);
	color: var(--ink-mint-700);
}
.ink-alert__nachrichten { margin-top: var(--ink-space-6); }
.ink-alert__untertitel {
	margin: 0 0 var(--ink-space-3);
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
}

/* ------------------------------------------------------------
   Kontoübersicht
   ------------------------------------------------------------
   Die Seite, auf der jeder nach dem Anmelden landet. Aufbau von
   oben nach unten: wer bin ich, was ist zu tun, wie steht mein
   Tarif. Auf dem Telefon dieselbe Reihenfolge in einer Spalte –
   deshalb Grid mit auto-fit statt fester Spaltenzahl.
   ------------------------------------------------------------ */
.ink-konto {
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-5);
}

/* ---------- Kopf: Bild, Name, Rolle ---------- */
.ink-konto__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.9rem, 2.5vw, 1.4rem);
	padding: clamp(1.1rem, 3vw, 1.75rem);
	background: linear-gradient(135deg, var(--ink-sand-100), var(--ink-mint-50));
	border: 1.5px solid var(--ink-mint-200);
	border-radius: var(--ink-radius-lg);
}
.ink-konto__bild {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--ink-bg-elevated);
	border-radius: var(--ink-radius-pill);
	box-shadow: var(--ink-shadow-sm);
}
/* Rundung am Bild selbst, nicht nur am Rahmen: JobHive setzt
   Eintragsbilder ausdrücklich eckig und gewinnt sonst. */
.ink-konto__bild img,
.ink-konto__bild .ink-konto__foto {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--ink-radius-pill) !important;
}
.ink-konto__initiale {
	font-family: var(--ink-font-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ink-mint-600);
}
.ink-konto__wer {
	/* Nimmt den Platz zwischen Bild und Knopf – und bricht auf dem
	   Telefon zuerst um, weil der Knopf dort unter alles rutscht. */
	flex: 1 1 12rem;
	min-width: 0;
}
.ink-konto__name {
	margin: 0;
	font-family: var(--ink-font-display);
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.ink-konto__rolle {
	margin: 0.2rem 0 0;
	font-size: var(--ink-text-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-mint-700);
}
.ink-konto__bearbeiten { flex: 0 0 auto; }

/* ---------- Aufforderung, wenn das Profil fehlt ---------- */
.ink-konto__ruf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ink-space-3);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	background: var(--ink-orange-50);
	border: 1.5px solid var(--ink-orange-100);
	border-left: 4px solid var(--ink-orange-500);
	border-radius: var(--ink-radius-md);
}
.ink-konto__ruf h3 { margin: 0; font-size: var(--ink-text-xl); }
.ink-konto__ruf p {
	margin: 0;
	max-width: 60ch;
	font-size: var(--ink-text-sm);
	line-height: 1.6;
	color: var(--ink-graphite-600);
}

/* ---------- Kacheln ---------- */
.ink-konto__kacheln {
	display: grid;
	/* 13rem: schmal genug für zwei Spalten auf einem breiten
	   Telefon, breit genug, dass „aktive Stellenanzeigen" nicht in
	   drei Zeilen zerfällt. */
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--ink-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ink-kachel {
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-md);
	transition:
		border-color var(--ink-dur-fast) var(--ink-ease-soft),
		transform    var(--ink-dur-fast) var(--ink-ease-out),
		box-shadow   var(--ink-dur-base) var(--ink-ease-out);
}
.ink-kachel:hover {
	border-color: var(--ink-mint-300);
	transform: translateY(-2px);
	box-shadow: var(--ink-shadow-sm);
}
/* Die ganze Kachel ist der Weg, nicht nur die Zahl darin – ein
   Ziel von 13 × 6 rem trifft auch ein Daumen. */
.ink-kachel__flaeche {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	height: 100%;
	padding: clamp(0.9rem, 2.5vw, 1.25rem);
	text-decoration: none;
	color: inherit;
}
.ink-kachel__zahl {
	font-family: var(--ink-font-display);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.15rem);
	font-weight: 700;
	line-height: 1;
	color: var(--ink-graphite-800);
	font-variant-numeric: tabular-nums;
}
/* Leere Zahl bei Kacheln, die einen Zustand statt einer Menge
   zeigen (Verfügbarkeit, Alarm). Ohne diese Regel klaffte dort
   eine Zeile Luft. */
.ink-kachel__zahl:empty { display: none; }
.ink-kachel__name {
	font-size: var(--ink-text-sm);
	font-weight: 650;
	line-height: 1.3;
	color: var(--ink-graphite-700);
}
.ink-kachel__zusatz {
	font-size: var(--ink-text-xs);
	line-height: 1.4;
	color: var(--ink-text-muted);
}
.ink-kachel--achtung {
	border-color: var(--ink-orange-300);
	background: var(--ink-orange-50);
}
.ink-kachel--achtung .ink-kachel__zahl { color: var(--ink-orange-700); }
.ink-kachel--achtung .ink-kachel__zusatz { color: var(--ink-orange-700); }
/* Kacheln, die nur ein Weg sind (Abmelden): zurückhaltender, damit
   sie nicht mit den Zahlen darüber konkurrieren. */
.ink-kachel--leise { background: transparent; }
.ink-kachel--leise .ink-kachel__name { color: var(--ink-graphite-500); }

/* ---------- Rückweg auf jeder Kontoseite ---------- */
.ink-rueckweg {
	margin: 0 0 var(--ink-space-3);
	font-size: var(--ink-text-sm);
}
.ink-rueckweg a {
	color: var(--ink-graphite-600);
	text-decoration: none;
}
.ink-rueckweg a:hover { text-decoration: underline; }
.ink-leer {
	color: var(--ink-text-muted);
	font-size: var(--ink-text-sm);
}

/* ---------- Tarifband ---------- */
.ink-konto__tarif {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ink-space-3);
	padding: clamp(1rem, 2.5vw, 1.4rem);
	background: var(--ink-sand-100);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-md);
}
.ink-konto__tarifname {
	display: block;
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
}
.ink-konto__tarifsatz {
	margin: 0.2rem 0 0;
	max-width: 58ch;
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: var(--ink-graphite-500);
}

/* ---------- Telefon ---------- */
@media (max-width: 30rem) {
	/* Bild und Name nebeneinander, Knopf über die ganze Breite
	   darunter: Ein 72-px-Bild neben einem umgebrochenen Namen
	   liest sich schlechter als ein kleineres daneben. */
	.ink-konto__bild,
	.ink-konto__bild img,
	.ink-konto__bild .ink-konto__foto {
		width: 56px;
		height: 56px;
	}
	.ink-konto__initiale { font-size: 1.4rem; }
	.ink-konto__bearbeiten {
		flex: 1 1 100%;
		text-align: center;
	}
	/* Eine Spalte. Zwei wären bei 320 px Breite je 8 rem – da passt
	   „Bewerber-Freischaltungen" in keine Zeile mehr. */
	.ink-konto__kacheln { grid-template-columns: 1fr; }
	.ink-konto__tarif > a { flex: 1 1 100%; text-align: center; }
}

/* ------------------------------------------------------------
   Suchalarm – die beiden Haken unter der Suche
   ------------------------------------------------------------
   Sie stehen am Ende des Filterformulars und sollen sich davon
   absetzen: Die Felder darüber grenzen die laufende Suche ein,
   diese beiden greifen darüber hinaus. Deshalb eine eigene Fläche
   mit Trennlinie statt der nächsten Feldzeile.
   ------------------------------------------------------------ */
.hp-form--listing-filter .hp-form__field--checkbox:has([name^="inklusio_alarm"]),
.hp-form--listing-search .hp-form__field--checkbox:has([name^="inklusio_alarm"]) {
	padding: 0.5rem 0.75rem;
	background: var(--ink-mint-50);
	border-radius: var(--ink-radius-sm);
}
/* Die erste der beiden trägt die Trennlinie – sie markiert den
   Übergang von „Suche eingrenzen" zu „Suche merken". */
.hp-form__field--checkbox:has([name="inklusio_alarm_speichern"]) {
	margin-top: var(--ink-space-4);
	border-top: 1.5px solid var(--ink-border-subtle);
	padding-top: var(--ink-space-4) !important;
	border-radius: 0 !important;
	background: none !important;
}

/* ---------- Gesperrt: sichtbar, aber nicht wählbar ---------- */
.ink-suchalarm--gesperrt {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-top: var(--ink-space-4);
	padding-top: var(--ink-space-4);
	border-top: 1.5px solid var(--ink-border-subtle);
}
.ink-suchalarm__titel {
	font-size: var(--ink-text-sm);
	font-weight: 650;
	color: var(--ink-graphite-700);
}
/* Durchgestrichen wie die gesperrten Umkreisstufen: Man soll sehen,
   was es gibt, und woran es liegt. */
.ink-suchalarm__punkt {
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-400);
	text-decoration: line-through;
	text-decoration-color: var(--ink-graphite-300);
}
.ink-suchalarm__weg {
	margin-top: 0.2rem;
	font-size: var(--ink-text-sm);
	font-weight: 650;
	color: var(--ink-mint-700);
}

/* ---------- Rückmeldung nach dem Speichern ---------- */
.ink-suchalarm__meldung {
	margin: var(--ink-space-3) 0 0;
	padding: 0.7rem 0.9rem;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-graphite-700);
	background: var(--ink-mint-50);
	border-left: 3px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-sm);
}
.ink-suchalarm__meldung--warnung {
	background: var(--ink-sand-100);
	border-left-color: var(--ink-status-yellow);
}
.ink-suchalarm__meldung a {
	font-weight: 650;
	color: var(--ink-mint-700);
	text-decoration: underline;
}

/* ==================================================================
   Melden – Verweis, Fenster, Rückmeldung
   ==================================================================

   Das Fenster hängt an `:target` und nicht an JavaScript. Wer
   meldet, hat oft gerade etwas Unangenehmes erlebt; das ist der
   schlechteste Moment für ein Bedienelement, das erst noch ein
   Skript abwarten muss. Ein Sprungziel funktioniert immer.
   ================================================================== */

.ink-melden {
	margin-top: var(--ink-space-2);
}
.ink-melden--nachricht {
	margin-top: 0;
	margin-left: auto;
}

/* Zurückhaltend: Melden ist der Ausnahmefall, nicht die Einladung.
   Ein Knopf in Signalfarbe neben „Kontaktieren" würde Menschen
   zum Melden bewegen, die nur unsicher sind. */
.ink-melden__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--ink-text-sm);
	line-height: 1.4;
	color: var(--ink-graphite-500);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--ink-dur-fast) var(--ink-ease-out),
		border-color var(--ink-dur-fast) var(--ink-ease-out);
}
.ink-melden__link:hover,
.ink-melden__link:focus-visible {
	color: var(--ink-status-red);
	border-bottom-color: currentColor;
}
.ink-melden__zeichen {
	font-size: 1.05em;
	line-height: 1;
}

/* ---------- Das Fenster ---------- */

.ink-melden-fenster {
	display: none;
}
.ink-melden-fenster:target {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--ink-space-4);
	overflow-y: auto;
}
.ink-melden-fenster__grund {
	position: absolute;
	inset: 0;
	background: rgba(23, 27, 33, 0.55);
	backdrop-filter: blur(4px);
	animation: ink-fade var(--ink-dur-base) var(--ink-ease-out);
}
.ink-melden-fenster__tafel {
	position: relative;
	width: min(100%, 480px);
	max-height: calc(100vh - 2 * var(--ink-space-4));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--ink-bg-elevated);
	border-top: 4px solid var(--ink-status-red);
	border-radius: var(--ink-radius-xl);
	box-shadow: var(--ink-shadow-lg);
	animation: ink-pop var(--ink-dur-base) var(--ink-ease-out);
}
.ink-melden-fenster__titel {
	margin: 0;
	font-size: var(--ink-text-xl);
}
.ink-melden-fenster__wen {
	margin: 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
}
.ink-melden-fenster__form {
	display: flex;
	flex-direction: column;
	gap: var(--ink-space-3);
	margin: 0;
}
.ink-melden__feld {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: var(--ink-text-sm);
	font-weight: 650;
	color: var(--ink-graphite-700);
}
.ink-melden__feld select,
.ink-melden__feld textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font-family: inherit;
	font-size: var(--ink-text-base);
	font-weight: 400;
	color: var(--ink-graphite-800);
	background: var(--ink-bg-elevated);
	border: 1px solid var(--ink-graphite-200);
	border-radius: var(--ink-radius-md);
}
.ink-melden__feld textarea {
	resize: vertical;
	min-height: 6.5rem;
	line-height: 1.5;
}
.ink-melden__feld select:focus-visible,
.ink-melden__feld textarea:focus-visible {
	outline: 2px solid var(--ink-mint-500);
	outline-offset: 1px;
}
.ink-melden__sperren {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--ink-text-sm);
	line-height: 1.45;
	color: var(--ink-graphite-700);
}
.ink-melden__sperren input {
	margin-top: 0.2em;
	flex: 0 0 auto;
}
.ink-melden-fenster__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-2);
}
.ink-melden-fenster__hinweis {
	margin: 0;
	font-size: var(--ink-text-xs);
	line-height: 1.5;
	color: var(--ink-graphite-500);
}

/* ---------- Rückmeldung nach dem Abschicken ---------- */

.ink-meldung-banner {
	max-width: 60rem;
	margin: var(--ink-space-3) auto 0;
	padding: 0.8rem 1rem;
	font-size: var(--ink-text-sm);
	line-height: 1.5;
	color: var(--ink-graphite-800);
	background: var(--ink-mint-50);
	border-left: 3px solid var(--ink-mint-500);
	border-radius: var(--ink-radius-sm);
}
.ink-meldung-banner--warnung {
	background: var(--ink-sand-100);
	border-left-color: var(--ink-status-yellow);
}
.ink-meldung-banner p {
	margin: 0;
}

/* Neben dem Sperrknopf: eine Zeile, zwei Wege. Der Sperrknopf ist
   ein Knopf, der Meldeverweis bleibt Schrift – sperren tut man
   häufig, melden selten. */
.ink-melden--neben {
	margin-top: 0.35rem;
}

/* ==================================================================
   Sperrknopf auf einem Fachkraft-Profil
   ==================================================================

   Hatte bis zum 26.08.2026 gar keine Regeln: Knopf und Erklärung
   standen nebeneinander im Textfluss und überlagerten sich, sobald
   der Satz umbrach. Jetzt untereinander – der Satz erklärt den
   Knopf, also gehört er darunter, nicht daneben.
   ================================================================== */

.ink-sperrknopf {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	margin: var(--ink-space-3) 0 0;
}
.ink-sperrknopf__hinweis {
	font-size: var(--ink-text-xs);
	line-height: 1.5;
	color: var(--ink-graphite-500);
}

/* ==================================================================
   Welches Feld die Suche steuert
   ==================================================================

   Standortauswahl und Adressfeld stehen untereinander, gefüllt sind
   oft beide – aber nur eines wirkt. Das wirksame trägt „(aktiv)"
   hinter der Beschriftung und eine farbige Kante. Beides zusammen,
   nicht nur die Farbe: Wer sie nicht unterscheiden kann, bekäme
   sonst gar keinen Hinweis.
   ================================================================== */

.hp-field .ink-suchquelle--aktiv,
.hp-field .ink-suchquelle--aktiv + .geocomplete,
.ink-suchquelle--aktiv {
	border-color: var(--ink-mint-500);
	box-shadow: 0 0 0 3px rgba(45, 178, 148, 0.16);
}

/* Der Zusatz hinter der Beschriftung. HivePress gibt „statuses" als
   <small>(…)</small> aus – dasselbe Element, das sonst „(optional)"
   trägt. Hier bekommt es Gewicht statt Grau. */
.hp-field__label:has(+ .ink-suchquelle--aktiv) small,
.hp-form__label:has(+ .ink-suchquelle--aktiv) small {
	color: var(--ink-mint-700);
	font-weight: 700;
}

/* ==================================================================
   Chatfrist

   „Dezent aber erkennbar": kleiner und grauer als der Fliesstext,
   aber mit eigener Kante links, damit er nicht als letzte Zeile der
   Unterhaltung gelesen wird. Er steht unter der Nachrichtenliste,
   über dem Antwortfeld.
   ================================================================== */

.ink-chatfrist {
	margin: var(--ink-space-3) 0 0;
	padding: 0.6rem 0.9rem;
	border-left: 3px solid var(--ink-mint-200);
	background: var(--ink-mint-50);
	border-radius: var(--ink-radius-sm);
	color: var(--ink-graphite-600);
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ==================================================================
   Plakette „Freigeschaltet"

   Sie steht neben der Premium-Plakette und muss sich von ihr
   unterscheiden lassen, ohne mit ihr zu konkurrieren: Die eine sagt
   „bezahlte Platzierung", die andere „du hast hier schon Zugriff".
   Deshalb Mint statt Sand — dieselbe Sprache wie beim grünen Haken
   in der Preistabelle.
   ================================================================== */

.ink-freigeschaltet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 var(--ink-space-2);
	font-size: var(--ink-text-xs, 0.75rem);
	line-height: 1.3;
}

.ink-freigeschaltet__marke {
	padding: 0.15rem 0.5rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ink-mint-700);
	background: var(--ink-mint-100);
	border-radius: var(--ink-radius-pill);
}

.ink-freigeschaltet__erklaerung {
	color: var(--ink-graphite-400);
}

/* ------------------------------------------------------------
   Freigabehinweis über dem Stellenanzeigen-Formular
   ------------------------------------------------------------
   Inklusio_Sofortfreigabe setzt ihn als Formularbeschreibung;
   HivePress rendert die als <p class="hp-form__description"> über
   den Feldern. Nur Stellenanzeigen haben eine: Seit dem 08.09.2026
   werden allein sie vorab geprüft, Profile und Einrichtungen gehen
   sofort online. Gleiche Optik wie der Upload-Hinweis – Sand mit
   orangener Kante, ein Hinweis, kein Verbot.
   ------------------------------------------------------------ */
.hp-form--listing-submit .hp-form__description,
.hp-form--listing-update .hp-form__description {
	margin: 0 0 var(--ink-space-4) !important;
	padding: var(--ink-space-3) var(--ink-space-4);
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: var(--ink-graphite-700, var(--ink-graphite-600));
	background: var(--ink-sand-100);
	border-left: 4px solid var(--ink-orange-500);
	border-radius: 0 var(--ink-radius-md) var(--ink-radius-md) 0;
}

.hp-form--listing-submit .hp-form__description strong,
.hp-form--listing-update .hp-form__description strong {
	color: var(--ink-graphite-900, inherit);
}

@media (prefers-color-scheme: dark) {
	.hp-form--listing-submit .hp-form__description,
	.hp-form--listing-update .hp-form__description {
		color: var(--ink-graphite-200);
		background: rgba(255, 255, 255, .06);
	}
}

/* ------------------------------------------------------------
   Nachrichtenliste auf dem Handy
   ------------------------------------------------------------
   HivePress Messages baut die Verlaufsliste als Tabelle mit drei
   Spalten: Absender, Eintrag, Datum. Auf 375 px Breite quetscht der
   Browser das Datum in vier Zeilen und schiebt die Zeile über den
   Rand – auf Marcs Handy war das Datum abgeschnitten (08.09.2026).
   Unterhalb von 640 px wird jede Zeile zur Karte: Absender fett,
   darunter der Eintrag, darunter klein das Datum.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
	.hp-messages.hp-table,
	.hp-messages.hp-table tbody,
	.hp-messages.hp-table tr,
	.hp-messages.hp-table td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.hp-messages.hp-table thead {
		display: none;
	}

	.hp-messages.hp-table tr.hp-message {
		padding: var(--ink-space-3) 0;
		border-bottom: 1px solid var(--ink-border, rgba(0, 0, 0, .1));
	}

	.hp-messages.hp-table tr.hp-message:first-child {
		border-top: 1px solid var(--ink-border, rgba(0, 0, 0, .1));
	}

	.hp-messages.hp-table td {
		padding: 0.15rem 0 !important;
		border: 0 !important;
		text-align: left !important;
		overflow-wrap: anywhere;
	}

	.hp-messages.hp-table td.hp-message__sender a {
		font-weight: 600;
	}

	.hp-messages.hp-table td.hp-message__sent-date {
		font-size: var(--ink-text-sm);
		color: var(--ink-graphite-600);
	}

	.hp-messages.hp-table td.hp-message__sent-date time {
		white-space: nowrap;
	}
}

/* Der Hinweis am Anhang-Feld einer Nachricht: nur JSON, die
   Sicherung einer digital ausgefüllten Vorlage (Marc, 09.09.2026). */
.hp-form--message-send .hp-field__description {
	margin: 0.2rem 0 0.6rem;
	font-size: var(--ink-text-sm);
	line-height: 1.45;
	color: var(--ink-graphite-600);
}

/* Der Weg zu den schon hochgeladenen Unterlagen, direkt unter dem
   Lebenslauf-Feld im Bearbeitungsformular (Marc, 09.09.2026). Der
   Verweis sieht aus wie der im PDF24-Kasten. */
.ink-unterlagen-verweis {
	clear: both;
	margin: var(--ink-space-2) 0 0;
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-600);
}
.ink-unterlagen-verweis a {
	font-weight: 650;
	color: var(--ink-mint-700);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.ink-unterlagen-verweis a:hover,
.ink-unterlagen-verweis a:focus-visible {
	color: var(--ink-mint-800);
}

/* ------------------------------------------------------------
   Sieben Punkte vom 09.09.2026 abends (Marc)
   ------------------------------------------------------------ */

/* (1) Fusszeile zentriert. JobHive setzt das Menü nach rechts
   (justify-content: flex-end); auf dem Handy brach es in zwei
   ungleich lange Zeilen um, die im Bild wie verrutscht wirkten. */
.site-footer .footer-navbar {
	justify-content: center;
	text-align: center;
}
.site-footer .footer-navbar__end,
.site-footer .footer-navbar__start {
	width: 100%;
	justify-content: center;
}
.site-footer .footer-navbar__menu ul {
	justify-content: center;
	text-align: center;
}

/* (3) „(zum Profil)" hinter jedem Namen im Nachrichtenverlauf. */
.ink-profil-verweis {
	margin-left: 0.35rem;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--ink-mint-600);
	text-decoration: none;
	white-space: nowrap;
}
.ink-profil-verweis:hover,
.ink-profil-verweis:focus-visible {
	color: var(--ink-mint-800);
	text-decoration: underline;
}

/* (5) Das Schliessen-Kreuz der Fenster (Fancybox): orange und fett.
   Vorher ein hellgraues, dünnes Kreuz, das auf dem Handy leicht zu
   übersehen war. Fett heisst beim SVG-Kreuz: die Linien zusätzlich
   mit derselben Farbe nachziehen. */
.fancybox-button--close,
.fancybox-close-small {
	color: var(--ink-orange-500) !important;
}
.fancybox-button--close:hover,
.fancybox-close-small:hover {
	color: var(--ink-orange-600) !important;
}
.fancybox-button--close svg,
.fancybox-close-small svg {
	width: 30px;
	height: 30px;
}
.fancybox-button--close svg path,
.fancybox-close-small svg path {
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 1.8px;
	stroke-linejoin: round;
}
/* Zeilen exakt mittig: JobHive trennt die Punkte mit rechtem
   Aussenabstand, der am Zeilenende mitzählt und jede Zeile um
   32 px nach links zieht (gemessen 09.09.2026). Abstand als gap. */
.site-footer .footer-navbar__menu ul {
	gap: 0.5rem 2rem;
	margin-bottom: 0;
}
.site-footer .footer-navbar__menu ul li {
	margin: 0 !important;
}

/* Und dasselbe Kreuz im mobilen Menü (Marc, 10.09.2026). Es kommt
   nicht von Fancybox, sondern ist ein Pseudoelement der Menüliste im
   Burger-Kasten: Font Awesome, blass hinterlegt (rgba(7,36,86,.25))
   und dadurch auf hellem Grund kaum zu sehen. Font Awesome „solid"
   ist bereits die fetteste Fassung des Zeichens; dicker wird es nur
   über einen Konturstrich in derselben Farbe. */
.header-navbar__burger ul::before,
.header-navbar__burger ul.menu::before {
	color: var(--ink-orange-500) !important;
	opacity: 1 !important;
	font-size: 22px !important;
	-webkit-text-stroke: 1.2px currentColor;
	text-stroke: 1.2px currentColor;
}


/* ==================================================================
   Rechnung aus dem Stundenzettel (Marc, 13.09.2026)
   ==================================================================
   Drei Stellen, ein Vorhaben: der Knopf am Nachrichtenanhang
   (Inklusio_Anhangschutz, Theme-Vorlage message-attachment.php), die
   Karte auf der Vorlagen-Detailseite (Inklusio_Rechnung::hub_karte)
   und die Kontoseite „Rechnungsdaten" (Inklusio_Rechnungsdaten).
   Das Werkzeug selbst (templates/rechnung.php) bringt sein eigenes
   CSS mit – es ist ein eigenständiges Dokument wie die Vorlagen.
   ================================================================== */


.ink-rechnung-knopf {
	margin-left: .6rem;
	vertical-align: middle;
	white-space: nowrap;
}

/* Auf schmalen Schirmen wickelt der Dateiname; dann gehört der Knopf
   unter den Verweis, nicht irgendwo hinter das letzte Wort. flex statt
   inline-flex macht ihn blockbildend (eigene Zeile), max-content hält
   die Pille schmal. */
@media (max-width: 600px) {
	.ink-rechnung-knopf {
		display: flex;
		width: max-content;
		max-width: 100%;
		margin: var(--ink-space-2) 0 0;
	}
}


.ink-vorlage__karte--rechnung {
	margin-top: var(--ink-space-4);
}

.ink-vorlage__karte-titel {
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 var(--ink-space-3);
	color: var(--ink-text);
}

/* Der Erklärsatz in der Karte ist kleiner als der Fliesstext der Seite. */
.ink-vorlage__karte--rechnung .ink-vorlage__text {
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
	margin: 0 0 var(--ink-space-4);
}


.ink-rechnungsdaten .ink-meldung {
	margin: 0 0 var(--ink-space-4);
}

.ink-rechnungsdaten__lead {
	max-width: 60ch;
	margin-bottom: var(--ink-space-4);
	color: var(--ink-graphite-600);
}

/* Der Premium-Hinweis für Einrichtungen ohne Premium: ein Satz, kein
   Kasten. Die Seite ist für sie voll nutzbar – nur das Werkzeug
   nicht. Ein Kasten läse sich wie eine Sperre. */
.ink-rechnungsdaten__premium {
	margin: 0 0 var(--ink-space-5);
	font-size: var(--ink-text-sm);
	color: var(--ink-graphite-500);
}
.ink-rechnungsdaten__premium a {
	margin-left: 0.3rem;
	font-weight: 650;
	color: var(--ink-mint-700);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
.ink-rechnungsdaten__premium a:hover,
.ink-rechnungsdaten__premium a:focus-visible {
	color: var(--ink-mint-800);
}

.ink-rechnungsdaten__form {
	display: grid;
	gap: var(--ink-space-4);
}

/* ---------- Gruppen als Karten ---------- */

/* min-inline-size: Fieldsets haben von Haus aus min-content als
   Mindestbreite und lassen sich vom Raster nicht schmaler drücken –
   auf dem Telefon ragte die Karte sonst über den Rand. */
.ink-rechnungsdaten__gruppe {
	min-inline-size: 0;
	min-width: 0;
	margin: 0;
	padding: clamp(1.1rem, 2.5vw, 1.6rem);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-lg);
}

/* Die Legende soll wie eine Überschrift in der Karte stehen, nicht
   auf der Rahmenlinie sitzen. `float: left` holt sie aus der
   Sonderbehandlung des Browsers in den normalen Fluss; alles
   danach räumt den Float mit `clear` ab. */
.ink-rechnungsdaten__gruppe legend {
	float: left;
	width: 100%;
	margin: 0 0 var(--ink-space-3);
	padding: 0;
	font-family: var(--ink-font-display);
	font-size: var(--ink-text-lg);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink-graphite-800);
}
.ink-rechnungsdaten__gruppe > *:not(legend) {
	clear: both;
}

/* Ein leerer Empfängerblock: gestrichelt wie die Verwaltungsadresse
   bei den Standorten – man sieht, dass hier noch nichts steht, ohne
   dass es nach Fehler aussieht. */
.ink-rechnungsdaten__gruppe--leer {
	border-style: dashed;
	background: var(--ink-sand-50, transparent);
}

.ink-rechnungsdaten__erklaerung {
	max-width: 64ch;
	margin: 0 0 var(--ink-space-4);
	font-size: var(--ink-text-sm);
	line-height: 1.55;
	color: var(--ink-graphite-500);
}

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

.ink-rechnungsdaten__raster {
	display: grid;
	gap: var(--ink-space-4);
}

/* 720 px: breit genug für zwei Felder nebeneinander, bei denen ein
   Straßenname noch in eine Zeile passt. Darunter eine Spalte. */
@media (min-width: 720px) {
	.ink-rechnungsdaten__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--ink-space-5);
	}
	.ink-rechnungsdaten__feld--breit {
		grid-column: 1 / -1;
	}
}

/* ---------- Felder ---------- */

.ink-rechnungsdaten__feld {
	display: grid;
	gap: 0.4rem;
	min-width: 0;
	margin: 0 !important;
}
.ink-rechnungsdaten__feld label {
	font-size: var(--ink-text-sm);
	font-weight: 600;
	color: var(--ink-graphite-700);
}
.ink-rechnungsdaten__feld input,
.ink-rechnungsdaten__feld select,
.ink-rechnungsdaten__feld textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	font: inherit;
	color: var(--ink-graphite-900);
	background: var(--ink-bg-elevated);
	border: 1.5px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-md);
	box-sizing: border-box;
}
.ink-rechnungsdaten__feld textarea {
	min-height: 6.5rem;
	line-height: 1.5;
	resize: vertical;
}
.ink-rechnungsdaten__feld input:focus-visible,
.ink-rechnungsdaten__feld select:focus-visible,
.ink-rechnungsdaten__feld textarea:focus-visible {
	outline: 2px solid var(--ink-mint-500);
	outline-offset: 1px;
}

/* Der Hilfetext steht unter dem Feld, klein und grau: Er erklärt,
   was hineingehört, und soll die Beschriftung nicht überstimmen. */
.ink-rechnungsdaten__hilfe {
	margin: 0 !important;
	font-size: var(--ink-text-xs);
	line-height: 1.45;
	color: var(--ink-graphite-500);
}

/* ---------- Ja/Nein-Schalter ---------- */

.ink-rechnungsdaten__feld--schalter {
	align-content: start;
}
.ink-rechnungsdaten__schalter {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	cursor: pointer;
}
/* Das Kreuzchen nimmt die Feldregeln von oben nicht an – kein
   Innenabstand, keine volle Breite. */
.ink-rechnungsdaten__schalter input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0.1rem 0 0;
	padding: 0;
	accent-color: var(--ink-mint-600);
}

/* ---------- Absenden ---------- */

.ink-rechnungsdaten__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
}

@media (prefers-color-scheme: dark) {
	.ink-rechnungsdaten__gruppe--leer {
		background: rgba(255, 255, 255, .04);
	}
}

/* ==================================================================
   Marcs Punkte vom 14.09.2026
   ================================================================== */

/* Nachrichtenliste: Ungelesenes fällt ins Auge – roter Umschlag,
   fetter Absender. Der offene Umschlag (gelesen) bleibt, wie er ist. */
.hp-messages.hp-table td.hp-message__sender .fa-envelope {
	color: var(--ink-status-red);
}
.hp-messages.hp-table td.hp-message__sender .fa-envelope + span {
	font-weight: 700;
}

/* Ergebniskarte: Luft zwischen Merkmalname und Wert („Träger
   Privatwirtschaftlich" stand ohne Abstand in einer Zeile). */
.hp-listing--view-block .hp-listing__attribute .ink-merkmal {
	display: inline-block;
	margin: 0 0.45rem 0 0;
}

/* Profilseite: Das Herz steht direkt unter der Ortsangabe, im
   selben Block (Inklusio_Favoriten::herz_zur_adresse).

   Untereinander, nicht nebeneinander (Marc, 14.09.2026). Der Block
   ist bei JobHive eine umbrechende Zeile: Auf breiten Bildschirmen
   standen Ort und Herz nebeneinander, und weil der Ort unten 8 px
   Rand trug und das Herz oben 6,4 px, lagen sie nicht auf einer Höhe.
   Jetzt eine Spalte, ein Abstand, keine Einzelränder. */
.hp-listing--view-page .hp-listing__attributes--secondary {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.75rem;
}
.hp-listing--view-page .hp-listing__attributes--secondary > .hp-listing__location,
.hp-listing--view-page .hp-listing__attributes--secondary > .hp-listing__action--favorite {
	margin: 0;
}
.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__action--favorite {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Rechnungsdaten: Ein Feld mit Hilfetext neben einem ohne – das
   Raster streckte das Eingabefeld ohne Hilfetext auf die Höhe des
   Nachbarn. Inhalt oben anschlagen, Rest bleibt leer. */
.ink-rechnungsdaten__feld {
	align-content: start;
}

/* Digitale Unterschrift des Rechnungserstellers: Vorschau neben der
   Dateiwahl, auf weissem Grund, weil PNG-Unterschriften meist
   transparent sind. */
.ink-rechnungsdaten__unterschrift {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ink-space-3);
}
.ink-rechnungsdaten__unterschrift img {
	max-height: 64px;
	max-width: 240px;
	padding: 4px;
	background: #fff;
	border: 1px solid var(--ink-border-subtle);
	border-radius: var(--ink-radius-sm);
}
.ink-rechnungsdaten__unterschrift input[type="file"] {
	width: auto;
	padding: 0.4rem 0;
	border: 0;
	background: transparent;
}