/* ==========================================================================
   Handy-Ansicht – Feinschliff (Marc, 26.09.2026)

   „in der mobilen Ansicht, welche extrem wichtig ist, sind noch nicht alle
   Ansichten optimal. Unter anderem ragen Schriften über das Feld hinaus und
   Felder haben unterschiedliche Größen. Bitte alle mobilen Ansichten der
   Website im Detail sehr genau prüfen und anpassen!"

   Gefunden mit einer Messung aller Seiten (Gast, Fachkraft, Einrichtung mit
   und ohne Tarif) bei 320, 360, 390 und 412 px und der Sichtung der Fotos
   bei 360 px. Diese Datei lädt als letzte (functions.php); JEDE Regel steht
   in einer max-width-Abfrage – der Desktop bleibt unverändert.

   Stufen: 74.99em = solange das Burger-Menü steht, 47.99em = unter 768 px
   (Tablet hochkant, Handy), 30em = bis 480 px (Handy).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Seitenrand und Kopfzeile

   Das Theme hielt auch auf dem Handy 32 px Rand je Seite, und die eigenen
   Bausteine (Startseite, Preise, Vorlagen-Detailseite) setzten ihren Rand
   noch einmal dazu: Bei 360 px blieben dem Inhalt 256 px, in Karten 150 px.
   Daher kamen die meisten Überläufe. Jetzt 20 px, und die Bausteine mit
   eigenem Rand brechen aus dem Theme-Rand aus.

   Die Kopfzeile war mit Logo (191 px), Abständen, Menü und dem Knopf rechts
   367 px breit: Bei 360 px fehlten dem Knopf 7 px, bei 320 px sah man ihn
   kaum noch.
   -------------------------------------------------------------------------- */

@media (max-width: 30em) {
	.container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.header-navbar {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* Der Knopf rechts liegt bündig am Rand – sein Gegenzug folgt dem Polster. */
	.hp-menu--site-header .hp-menu__item--listing-submit:last-child {
		margin-right: -1.25rem;
	}
}

@media (max-width: 47.99em) {
	.header-navbar__start {
		min-width: 0;
		margin-right: .75rem;
	}

	.header-navbar__burger:not(:last-child) {
		margin-right: 1rem;
	}

	/* Bausteine mit eigenem Seitenrand über die volle Breite (Flächen reichen an den Rand, der Text hat seinen Rand). */
	.page__text > .ink-hero,
	.page__text > .ink-section {
		max-width: none;
		margin-left: -2rem;
		margin-right: -2rem;
	}
}

@media (max-width: 30em) {
	.page__text > .ink-hero,
	.page__text > .ink-section {
		margin-left: -1.25rem;
		margin-right: -1.25rem;
	}
}

@media (max-width: 359px) {
	.header-logo img.header-logo__mark {
		height: 30px;
	}

	.header-logo__text .header-logo__name {
		font-size: 1.25rem;
	}
}

/* Das Menüsymbol war nur 24 × 24 px gross – eine unsichtbare Fläche macht 44 × 44 px daraus. */
@media (max-width: 74.99em) {
	.header-navbar__burger > a {
		position: relative;
	}

	.header-navbar__burger > a::after {
		content: "";
		position: absolute;
		inset: -10px;
	}

	/*
	 * Seit JobHive 1.1.0 (Update 01.10.2026) zählt ein Abzeichen am
	 * Menüsymbol die ungelesenen Hinweise – in einem fremden Rot
	 * (#ff5a5f, Weiss darauf nur 3,05:1). In Mint 700 wie die Verweise:
	 * Weiss darauf 6,25:1, Mint 700 auf Weiss als Fläche ebenso
	 * (WCAG-Formel).
	 */
	.header-navbar__burger > a small {
		background-color: var(--ink-mint-700);
		color: #fff;
		font-weight: 600;
	}
}


/* --------------------------------------------------------------------------
   2. Überschriften und lange Wörter

   Deutsche Zusammensetzungen („Kindertageseinrichtung", „Geschäfts-
   bedingungen") sind bei 36 px breiter als ein Handy. Sie brachen mitten im
   Wort ohne Trennstrich („Kindertageseinri|chtung") oder ragten aus Kacheln.
   Zwei Mittel: kleinere Seitentitel auf dem Handy, und Silbentrennung – aber
   nur für lange Wörter mit mindestens fünf Buchstaben auf jeder Seite, damit
   kurze Wörter nie zerrissen werden („Päd-agogik", siehe inklusio.css
   .ink-display, die bewusst ungetrennt bleibt).
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.page__title,
	.header-hero--title .page__title {
		font-size: clamp(1.375rem, 7vw, 2.25rem);
	}

	.hp-listing-category__name,
	.hp-listing--view-page .hp-listing__title,
	.hp-vendor--view-page .hp-vendor__name {
		font-size: clamp(1.5rem, 7.5vw, 2.25rem);
	}

	/* Zwischenüberschriften der Textseiten (auf der Startseite haben die Bausteine eigene Grössen). */
	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung, .ink-kontakt) h2 {
		font-size: clamp(1.1875rem, 6vw, 1.75rem);
	}

	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung, .ink-kontakt) h3 {
		font-size: clamp(1.0625rem, 4.8vw, 1.375rem);
	}

	.page__text,
	.site-content {
		overflow-wrap: break-word;
	}

	:is(h1, h2, h3, h4, .page__title, .hp-listing__title, .hp-vendor__name,
		[class*="__titel"], [class*="__title"], [class*="__name"], [class*="kachel"], .ink-chip, .ink-status):not(.ink-display) {
		overflow-wrap: break-word;
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 5;
		hyphenate-limit-chars: 12 5 5;
	}

	/* Seiten- und Eintragstitel nicht trennen: Die Grössen oben lassen auch
	   „Kindertageseinrichtung" bei 320 px ganz in die Zeile. Mit Trennung
	   stand dort „Evangelische Kinderta-/geseinrichtung", obwohl das Wort in
	   die nächste Zeile gepasst hätte. break-word bleibt als Notanker. */
	:is(h1, .page__title, .hp-page__title, .hp-listing__title, .hp-vendor__name):not(.ink-display) {
		-webkit-hyphens: manual;
		hyphens: manual;
	}
}


/* --------------------------------------------------------------------------
   3. Knöpfe

   Gleichartige Knöpfe waren 32 bis 64 px hoch: .ink-btn hat Zeilenhöhe 1, bei
   Formularknöpfen schlug das Polster von HiveTheme (button[type=submit])
   das eigene, und umbrochener Text stand linksbündig. Jetzt mindestens
   44 px, mittig, mit lesbarer Zeilenhöhe.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.ink-btn {
		min-height: 44px;
		line-height: 1.25;
		text-align: center;
	}

	/* inklusio.css hält Absendeknöpfe einzeilig (nowrap, Zeilenhöhe 1) – auf dem Handy liefe ein langer Text so über den Knopf hinaus. */
	.ink-btn[type="submit"] {
		padding-top: .8rem;
		padding-bottom: .8rem;
		line-height: 1.25;
		white-space: normal;
	}
}


/* --------------------------------------------------------------------------
   4. Formularfelder

   „Felder haben unterschiedliche Größen": Textfelder der HivePress-Formulare
   waren nur eine blasse Linie ohne Fläche (die Regel in inklusio.css griff
   nicht – HivePress trägt die Klasse am Feld selbst, nicht an einem
   Behälter), Auswahlfelder 45 bis 116 px hohe runde Kästen mit dem Pfeil auf
   der Rundung. Jetzt alle gleich: weiss, gerahmt, mindestens 48 px, 16 px
   Schrift (darunter vergrössert das iPhone beim Antippen die Seite).
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.hp-form__field input.hp-field:is([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"], [type="url"], [type="search"]),
	.hp-form__field textarea.hp-field {
		width: 100%;
		min-height: 48px;
		padding: .7rem 1rem;
		font-size: 1rem;
		line-height: 1.4;
		color: var(--ink-text);
		background-color: var(--ink-bg-elevated);
		border: 1.5px solid var(--ink-border);
		border-radius: var(--ink-radius-md);
	}

	.hp-form__field input.hp-field[type="password"] {
		padding-right: 2.75rem;
	}

	/* Die Landesflagge der Telefonnummer bleibt frei. */
	.iti input.hp-field[type="tel"] {
		padding-left: 3.25rem;
	}

	.select2-container--default .select2-selection:not(.select2-selection--inline) {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: .4rem 2.75rem .4rem 1rem;
		font-size: 1rem;
	}

	.select2-container--default .select2-selection:not(.select2-selection--inline) .select2-selection__rendered {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		border-top: 0;
		line-height: 1.4;
	}

	.select2-container--default .select2-selection--single:not(.select2-selection--inline) .select2-selection__arrow {
		top: 50%;
		right: .9rem;
		height: 20px;
		transform: translateY(-50%);
	}

	/* Mehrfachauswahl: als Auswahl erkennbar (Pfeil), gewählte Einträge brechen um statt abgeschnitten zu werden. */
	.select2-container--default .select2-selection--multiple {
		background: var(--ink-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right .9rem center / 14px no-repeat;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		max-width: 100%;
		margin: 0;
		white-space: normal;
	}

	/* Das Suchfeld (select2 4.0.13: ein Listenpunkt nach den Einträgen) stand nach einem langen Eintrag
	   in einer eigenen leeren Zeile – das Feld wurde doppelt so hoch. Als umbrechende Reihe steht es daneben. */
	.select2-container--default .select2-selection--multiple .select2-selection__rendered {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem;
	}

	.select2-container--default .select2-selection--multiple .select2-search--inline {
		flex: 1 1 2rem;
		min-width: 2rem;
	}

	.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
		margin-top: 0;
	}

	/* Ein gewählter Standort nennt Name und Adresse ganz (mehrere Standorte eines Trägers). */
	.hp-form__field--location .select2-container .select2-selection--single .select2-selection__rendered {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	.select2-container .select2-search__field,
	.select2-results__option {
		font-size: 1rem;
	}

	/* Kästchen und Knöpfe zum Anklicken: bisher ein hauchdünner, fast unsichtbarer Rand. */
	.hp-field input[type="checkbox"]:not(:checked) + span::before,
	.hp-field input[type="radio"]:not(:checked) + span::before {
		border-color: var(--ink-graphite-400);
		background-color: #fff;
	}
}


/* --------------------------------------------------------------------------
   5. Sortieren in den Trefferlisten

   „SORTIEREN NACH" (122 px, ohne Umbruch) und das Feld (mindestens 208 px)
   standen nebeneinander – 338 px auf 256 bis 296 px Platz: Rahmen, Ecke und
   Pfeil waren rechts abgeschnitten. Auf dem Handy steht die Beschriftung
   über dem Feld, das Feld nimmt die volle Breite.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.hp-page__topbar {
		align-items: stretch;
	}

	.hp-form--listing-sort,
	.hp-form--listing-sort .hp-form__fields {
		width: 100%;
	}

	.hp-form--listing-sort .hp-form__field {
		flex-direction: column;
		align-items: stretch;
		gap: .35rem;
	}

	.hp-form--pivot.hp-form--listing-sort .hp-field__label {
		margin: 0;
	}

	.hp-form--listing-sort .hp-field--select,
	.hp-form--listing-sort .select2-container,
	.hp-form--listing-sort select {
		min-width: 0 !important;
	}

	.hp-form--listing-sort .select2-container {
		width: 100% !important;
	}

	.hp-form--listing-sort .select2-container .select2-selection {
		padding: .6rem 1rem;
	}

	.hp-form--listing-sort .select2-container--default .select2-selection--inline .select2-selection__rendered {
		padding-top: 0;
		padding-bottom: 0;
		font-size: .9375rem;
		letter-spacing: 0;
		text-transform: none;
	}

	.hp-form--listing-sort .select2-container--default .select2-selection .select2-selection__arrow {
		top: 50%;
		right: .75rem;
		transform: translateY(-50%);
	}
}


/* --------------------------------------------------------------------------
   6. Fusszeile und Textseiten

   Die Verweise der Fusszeile waren 20 px hohe Tippziele mit 8 px Abstand in
   blassem Grau (2,9 : 1). Auf den Rechtstexten waren Listen zusätzlich 32 px
   eingerückt, und Absätze und Listenpunkte hatten verschiedene Zeilenhöhen.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.site-footer .footer-navbar__menu ul {
		gap: 0 1.25rem;
	}

	.site-footer .footer-navbar__menu ul li a {
		display: inline-block;
		padding: .625rem .25rem;
		color: var(--ink-graphite-500);
	}

	/* Nur die Rechtstexte (Kanzlei-Texte, Nutzungsbedingungen, Widerrufsbelehrung) – die Bausteine der Startseite haben eigene Regeln. */
	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung) :is(ol, ul) {
		margin-left: 1.25rem;
	}

	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung) :is(p, li) {
		line-height: 1.7;
	}
}


/* --------------------------------------------------------------------------
   7. Ergebniskarten, Eintragsseiten, Anbieterkarte (26.09.2026)

   Die Karten der Trefferlisten und die Seitenspalte der Eintragsseiten
   (Fachkraft, Einrichtung, Stelle) in allen Rollen, dazu die Kästen der
   Gästevorschau, die Leermeldung, die Umschalter „Filtern"/„Mein Konto",
   Kontakt-, Anmelde- und Registrierformular und die Rechtstexte.
   Alle Regeln nur auf dem Handy; der Desktop bleibt, wie er ist.
   -------------------------------------------------------------------------- */


/* 7.1 Ergebniskarte – Rahmen, leerer Kopf und Fuss
   Die Karte hielt 32 px Polster je Seite: Bei 320 px blieben dem Text
   192 px, „Erziehungswissenschaftler/in" lief über den Rand. In der
   Gästevorschau bleiben Kopf und Fuss leer stehen – 49 px Luft über dem
   Titel und ein leerer Fuss mit Trennlinie darunter. */

@media (max-width: 47.99em) {
	.hp-listing--view-block > .hp-listing__header:not(:has(*)),
	.hp-listing--view-block > .hp-listing__footer:not(:has(*)),
	.hp-vendor--view-block > .hp-vendor__header:not(:has(*)),
	.hp-vendor--view-block > .hp-vendor__footer:not(:has(*)) {
		display: none;
	}
}

@media (max-width: 30em) {
	.hp-listing--view-block,
	.hp-vendor--view-block {
		padding: 1.25rem;
	}

	.hp-listing--view-block .hp-listing__footer,
	.hp-vendor--view-block .hp-vendor__footer {
		margin: 1.25rem -1.25rem -.25rem;
		padding: 1rem 1.25rem 0;
	}

	/* Das Profilbild der Anbieterkarte sitzt so weit unter der Oberkante wie der Text vom Rand. */
	.hp-vendor--view-block > .hp-vendor__header {
		margin-top: -1.5rem;
	}
}


/* 7.2 Ergebniskarte – Fuss mit Ampel und Symbolen
   Die Ampel teilte sich die Zeile mit Nachricht und Herz: „Aktuell nicht
   verfügbar" und „Offen für Initiativbewerbungen" brachen in der Pille um,
   stiessen an das Nachrichtensymbol, und bei 320 px wurde das Herz
   abgeschnitten. Die Symbole standen mal rechts, mal links (Stellenkarte
   ohne Ampel), und sie waren nur 24 px grosse Tippziele. */

@media (max-width: 47.99em) {
	.hp-listing--view-block .hp-listing__footer {
		flex-wrap: wrap;
		gap: .5rem .75rem;
	}

	.hp-listing--view-block .hp-listing__footer > .ink-listing-ampel {
		min-width: 0;
		margin: 0;
	}

	.hp-listing--view-block .hp-listing__footer > .hp-listing__actions--primary {
		margin-left: auto;
	}

	.hp-listing--view-block .hp-listing__actions--primary .hp-listing__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.hp-listing--view-block .hp-listing__actions--primary .hp-listing__action:not(:last-child) {
		margin-right: .25rem;
	}
}

/* Ampel und Symbole teilen sich die Zeile, solange beide passen; sonst rücken die Symbole
   rechtsbündig darunter. (Bis zum 27.09.2026 stand die Ampel immer allein – dann stand in
   jeder Karte der Basis-Einrichtung das Herz allein in einer 45 px hohen Zeile.) */
@media (max-width: 30em) {
	.hp-listing--view-block .hp-listing__footer > .ink-listing-ampel,
	.hp-listing--view-block .hp-listing__footer > .hp-listing__attributes--primary {
		flex: 0 1 auto;
		margin-right: 0;
	}
}


/* 7.3 Ergebniskarte – Metazeile und Merkmale
   Die Trennpunkte hingen nach dem Umbruch am Zeilenende („ROBERTS
   KRABBELKISTE •"), die Metaangaben standen in 11 px blassem Grau (2,9 : 1).
   Die Merkmale begannen 4 px links vom Titel, Etikett und Wert standen
   nebeneinander, und die Werte begannen je nach Etikett woanders. */

@media (max-width: 47.99em) {
	/* Trennpunkte nur noch zwischen Angaben derselben Zeile. Der Punkt steht
	   jetzt vor einer Angabe statt hinter ihr, in einer 1,25rem breiten Lücke.
	   Die Zeile rückt um diese Lücke nach links, und clip-path blendet den
	   linken Streifen aus – dort landet der Punkt jeder Angabe, die eine neue
	   Zeile beginnt. Oben, rechts und unten reicht die Maske 1rem über den
	   Kasten hinaus, damit vergrösserte Tippflächen nicht beschnitten werden. */
	.hp-listing--view-block .hp-listing__details--primary,
	.hp-listing--view-page .hp-listing__details--primary {
		row-gap: .25rem;
		margin-left: -1.25rem;
		clip-path: inset(-1rem -1rem -1rem calc(1.25rem - 4px));
	}

	.hp-listing--view-block .hp-listing__details--primary > *,
	.hp-listing--view-page .hp-listing__details--primary > * {
		position: relative;
		margin-left: 1.25rem;
	}

	.hp-listing--view-block .hp-listing__details--primary > *:not(:last-child),
	.hp-listing--view-page .hp-listing__details--primary > *:not(:last-child) {
		margin-right: 0;
	}

	.hp-listing--view-block .hp-listing__details--primary > *:not(:last-child)::after,
	.hp-listing--view-page .hp-listing__details--primary > *:not(:last-child)::after {
		display: none;
	}

	.hp-listing--view-block .hp-listing__details--primary > *::before,
	.hp-listing--view-page .hp-listing__details--primary > *::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -.75rem;
		width: 4px;
		height: 4px;
		margin-top: -2px;
		border-radius: 50%;
		background-color: rgba(7, 36, 86, .25);
	}

	/* Der Arbeitgeber einer Stellenkarte bekommt eine eigene Zeile. */
	.hp-listing--view-block .hp-listing__details--primary > .hp-listing__vendor {
		flex: 1 1 100%;
	}

	.hp-listing--view-block .hp-listing__details--primary > *,
	.hp-listing--view-page .hp-listing__details--primary > *,
	.hp-result-count,
	.hp-listing-category--view-page .hp-listing-category__item-count {
		font-size: .75rem;
	}

	.hp-listing--view-block .hp-listing__details--primary a,
	.hp-listing--view-page .hp-listing__details--primary a,
	.hp-listing--view-block .hp-listing__created-date,
	.hp-listing--view-page .hp-listing__created-date,
	.hp-result-count {
		color: var(--ink-graphite-500);
	}

	.hp-listing--view-block .hp-listing__vendor a {
		color: var(--ink-graphite-800);
	}

	.hp-listing--view-block .hp-listing__attributes--secondary,
	.hp-listing--view-page .hp-listing__attributes--secondary {
		margin-left: 0;
	}

	/* Etikett über dem Wert – so stehen alle Werte bündig, und ein langer Wert hat die volle Kartenbreite. */
	.hp-listing--view-block .hp-listing__attributes--secondary .hp-listing__attribute:not(.hp-listing__location) {
		display: block;
		width: 100%;
		margin-right: 0;
		overflow-wrap: break-word;
	}

	.hp-listing--view-block .hp-listing__attributes--secondary .hp-listing__attribute .ink-merkmal {
		display: block;
		margin: 0 0 .1rem;
	}
}


/* 7.4 Ortszeile (Karte, Eintragsseite, Anbieterkarte)
   Eine lange Adresse rutschte als Ganzes unter die Nadel, die dann allein
   in ihrer Zeile stand; auf der Eintragsseite klafften 23 px zwischen Nadel
   und Ort, und Ort und Favoriten-Herz begannen an verschiedenen Stellen.
   Jetzt ein Raster: Symbolspalte 1,5rem, daneben der Text, darunter die
   Entfernung. Das Herz der Eintragsseite nutzt dieselbe Symbolspalte.
   Die Auswahl braucht drei Klassen: JobHive setzt jedes Merkmal mit
   (0,3,0) auf display:flex und dem Symbol mit (0,3,1) einen Rand. */

@media (max-width: 47.99em) {
	:is(.hp-listing--view-block, .hp-listing--view-page) .hp-listing__attributes--secondary .hp-listing__location,
	.hp-vendor--view-block .hp-vendor__details--primary > .hp-vendor__location {
		display: grid;
		grid-template-columns: 1.5rem minmax(0, 1fr);
		column-gap: .6rem;
		row-gap: .35rem;
		align-items: start; /* Die Nadel steht auf Höhe der ersten Adresszeile. */
	}

	:is(.hp-listing--view-block, .hp-listing--view-page) .hp-listing__attributes--secondary .hp-listing__location > i.hp-icon,
	.hp-vendor--view-block .hp-vendor__details--primary > .hp-vendor__location > i.hp-icon {
		margin: 0;
		justify-self: center;
	}

	.hp-listing__location > .ink-entfernung {
		grid-column: 2;
	}

	.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__action--favorite {
		gap: .6rem;
	}

	.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__action--favorite > i.hp-icon {
		flex: 0 0 1.5rem;
		width: 1.5rem;
		margin: 0;
		text-align: center;
	}

	/* Die Farbe des aktiven Herzens steht seit 03.10.2026 für alle Breiten in
	   favoriten.css (Token --ink-favorit) – hier stand sie bis dahin nur fürs Handy. */
}


/* 7.5 Anbieterkarte in der Seitenspalte
   Der Name stand in 24 px auf 214 px: „Kindertageseinrichtun|g" ohne
   Trennstrich. Nadel, Adresse (in Versalien, aus „Goethestraße" wurde
   „GOETHESTRASSE"), ein einzelner Trennpunkt und „DABEI SEIT" standen je in
   einer eigenen Zeile. */

@media (max-width: 47.99em) {
	/* 20 px bei 320, 22 px ab 352 px Breite: „Kindertageseinrichtung" passt dann auch ohne Silbentrennung in die Karte. */
	.hp-vendor--view-block .hp-vendor__name,
	.hp-vendor--view-block .hp-vendor__name a {
		font-size: clamp(1.125rem, 6.25vw, var(--ink-text-xl));
		line-height: 1.2;
	}

	.hp-vendor--view-block .hp-vendor__details--primary {
		row-gap: .4rem;
	}

	/* JobHive setzt Punkt und Abstand mit :not(:last-child) – dieselbe Auswahl, damit die Regel greift. */
	.hp-vendor--view-block .hp-vendor__details--primary > *:not(:last-child) {
		margin-right: 0;
	}

	.hp-vendor--view-block .hp-vendor__details--primary > *:not(:last-child)::after {
		display: none;
	}

	.hp-vendor--view-block .hp-vendor__details--primary > .hp-vendor__location {
		font-size: var(--ink-text-sm);
		letter-spacing: 0;
		text-transform: none;
	}

	.hp-vendor--view-block .hp-vendor__details--primary > .hp-vendor__registered-date {
		font-size: .75rem;
		color: var(--ink-graphite-500);
	}

	.hp-vendor--view-block .hp-vendor__actions--primary .hp-vendor__action {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}


/* 7.6 Seitenspalte der Eintragsseite – leerer Kasten, Kontaktieren, 1-Klick
   Das Theme zieht „Kontaktieren" 32 px nach oben an den weissen
   Merkmalskasten. Fehlt der Kasten (Gäste) oder ist er leer (Stellen),
   rutschte der Knopf über die Ampel bzw. über „Was wird gesendet?", und
   unter dem Freischaltungskasten klebte er ohne Abstand. Der leere Kasten
   selbst stand als weisser Balken mit Schatten da. */

@media (max-width: 47.99em) {
	.hp-listing--view-page .hp-listing__attributes--primary:not(:has(.hp-listing__attribute)) {
		display: none;
	}

	.hp-listing--view-page .hp-listing__actions--primary .hp-listing__action--message {
		margin-top: 0;
	}

	/* Nur direkt unter dem gefüllten Merkmalskasten bleibt der Knopf angedockt, wie vom Theme gedacht. */
	.hp-listing--view-page .hp-listing__attributes--primary:has(.hp-listing__attribute) + .hp-listing__actions--primary .hp-listing__action--message {
		margin-top: -2rem;
	}

	/* 1-Klick-Bewerbung so breit wie „Kontaktieren" (war eine 180 px schmale Pille). */
	.hp-listing--view-page .hp-listing__actions--primary > .ink-einklick {
		align-self: stretch;
	}

	.hp-listing--view-page .ink-einklick__knopf {
		min-height: 48px;
	}
}


/* 7.7 Eintragsseite – Sperren, Melden, Tippziele
   „Diese Fachkraft sperren" stand als roter Text ohne Rahmen 18 px
   eingerückt (das Theme nimmt Absendeknöpfen den Rand); „⚑ Diesen Eintrag
   melden" klebte ohne Abstand an der Beschreibung. Zurück-, Favoriten- und
   Meldeverweis waren 18 bis 26 px hohe Tippziele – das Polster vergrössert
   die Fläche, der Gegenzug hält das Bild unverändert. */

/* Seit 07.10.2026 (Marc) stehen Sperren und Melden ganz unten – auch auf dem Handy: im Seitenfuss der
   Vorlage, nach der Seitenspalte (Kontaktieren, Freischaltung, Unterlagen), die hier unter der Hauptspalte
   liegt. Der Block war vorher die letzte Zeile der Hauptspalte und stand deshalb mitten auf der Seite.
   Er hat volle Breite mit dem Rand des übrigen Inhalts (hp-row / hp-col-xs-12, components.css).
   Knopf mit Symbol (fa-ban) 45 px hoch, bei 320 px ohne Überlauf gemessen. Den Rahmen und den Abstand
   zum Symbol setzt seitdem components.css für alle Breiten; die Regel hier bleibt als Rückfall. */
@media (max-width: 47.99em) {
	.ink-sperrknopf .ink-btn--gefahr[type="submit"] {
		border: 1.5px solid var(--ink-status-red);
	}

	/* Auf der Eintragsseite auch der Kategorie-Verweis („FACHKRÄFTE", 18 px hoch) – darüber steht
	   die Überschrift, kein Verweis. In den Karten nicht: Dort läge die Fläche über dem Titel-Verweis. */
	.hp-listing--view-page .hp-listing__details--primary a {
		display: inline-block;
	}

	.ink-zurueck__link,
	.hp-listing--view-page .hp-listing__details--primary a,
	.hp-listing--view-page .hp-listing__attributes--secondary .hp-listing__action--favorite,
	.ink-melden__link {
		padding-top: .7rem;
		padding-bottom: .7rem;
		margin-top: -.7rem;
		margin-bottom: -.7rem;
	}

	/* Die Unterstreichung beim Zeigen ist eine Randlinie – mit dem Polster stünde sie 11 px unter
	   der Schrift, und auf dem Telefon bleibt „hover" nach dem Antippen hängen. */
	.ink-melden__link {
		border-bottom: 0;
	}

	/* Anmeldeformular: „Registrieren" und „Passwort vergessen?" */
	.hp-form__action--user-password-request,
	.hp-form__action--user-register a {
		display: inline-block;
		padding-top: .6rem;
		padding-bottom: .6rem;
	}
}


/* 7.8 Kästen der Gästevorschau
   „Wer sucht hier?" (Marcs Beispiel): zwei Spalten zu 117 px – „Echter
   Einrichtungsname" und „Einrichtungsprofil" ragten 13 bis 33 px aus der
   Kachel, und die Kacheln waren ungleich hoch (78/86 px), weil das Theme
   jedem Listenpunkt ausser dem letzten 8 px Aussenabstand gibt. Im orangen
   Kasten waren die beiden Knöpfe verschieden breit und hoch. */

@media (max-width: 47.99em) {
	.ink-mehrwert__kacheln > .ink-mehrwert__kachel {
		margin: 0;
	}

	.ink-mehrwert__anmelden {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.ink-vorschau-kasten__weg {
		width: 100%;
	}

	.ink-vorschau-kasten__weg .ink-btn {
		flex: 1 1 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Bis 480 px eine Kachel je Zeile, Symbol links: Auch bei 320 px passt
   jedes Wort, und alle vier Kacheln sind gleich hoch. */
@media (max-width: 30em) {
	.ink-mehrwert__kacheln {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-mehrwert__kacheln > .ink-mehrwert__kachel {
		flex-direction: row;
		align-items: center;
		gap: .7rem;
		padding: .7rem .85rem;
	}

	.ink-mehrwert__kachel .hp-icon {
		flex: 0 0 1.25rem;
		width: 1.25rem;
		text-align: center;
	}

	.ink-mehrwert__weg .ink-btn {
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}


/* 7.9 Leermeldung (404, Suche ohne Treffer)
   Die drei Knöpfe waren verschieden breit (164/138/184 px), berührten sich
   und klebten am Text – die Knopfzeile ist selbst ein Absatz und bekam den
   Aussenabstand 0 der Absatzregel. */

@media (max-width: 47.99em) {
	.ink-leermeldung .ink-leermeldung__weg {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		max-width: 20rem;
		margin: var(--ink-space-5) auto 0;
	}
}


/* 7.10 Umschalter „Filtern" und „Mein Konto"
   Ein grauer, eckiger 52-px-Balken mit grauer Schrift – er sah deaktiviert
   aus. Jetzt wie die hellen Knöpfe der Seite. HivePress blendet ihn ab 48em
   ohnehin aus. */

@media (max-width: 47.99em) {
	.button.hp-button--mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 48px;
		padding: .6rem 1.25rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: var(--ink-graphite-800);
		background: var(--ink-bg-elevated);
		border: 1.5px solid var(--ink-border);
		border-radius: var(--ink-radius-pill);
	}

	.button.hp-button--mobile .hp-icon {
		margin-right: 0;
		font-size: 1rem;
		color: var(--ink-mint-600);
	}

	/* Unter „Mein Konto" standen 48 px Luft vor „← Zur Übersicht" – das Kontomenü selbst öffnet als Fenster. */
	.hp-page__sidebar:has(> .hp-widget--user-account-menu) {
		margin-bottom: var(--ink-space-5);
	}
}


/* 7.11 Burger-Menü: gesperrte Punkte gleich gross wie die freien
   „Fachkräfte finden" (gesperrt) stand in 16 px neben 18 px grossen
   freien Punkten; die Zeilen waren 22 bis 30 px hohe Tippziele. */

@media (max-width: 47.99em) {
	.header-navbar__burger > ul > li > a,
	.header-navbar__burger > ul > li > span.ink-menu--gesperrt {
		display: inline-block;
		padding-top: .35rem;
		padding-bottom: .35rem;
		font-size: 1.125rem;
	}
}


/* 7.12 Kontaktformular und Rechtstexte
   „Anliegen" war 46 px hoch, die Textfelder daneben 48 px. Im Muster-
   Widerrufsformular blieben bei 320 px 206 px für den Text. Die eigene
   Ergänzung unter dem Kanzleitext klebte ohne Abstand am Stempel „Stand …".
   „Vertrag online widerrufen" stand in 30 px unter der 22 px grossen
   „Widerrufsbelehrung" derselben Seite. */

@media (max-width: 47.99em) {
	.ink-kontakt__feld input,
	.ink-kontakt__feld select {
		min-height: 3rem;
	}

	.page__text .ink-rechtstext-zusatz {
		margin-top: var(--ink-space-6);
	}

	.ink-widerruf h2 {
		font-size: clamp(1.1875rem, 6vw, 1.75rem);
	}
}

@media (max-width: 30em) {
	.ink-belehrung__formular {
		padding: var(--ink-space-4);
	}
}


/* --------------------------------------------------------------------------
   8. Startseite, Preise, Vorlagen-Hub und Vorlagen-Detailseiten (L1–L5)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   L1. Startseite: Hero und Suche

   Zwischen der dunklen Kopfzeile und dem dunklen Hero lag ein 48 px hoher
   beiger Streifen (das Polster von .site-content), der Hero hatte oben und
   unten 64 px Luft, und der Nachsatz trug zusätzlich 16 px Aussenabstand
   aus HiveTheme (p:not(:last-child)). Die Felder der Suchmaske waren nur
   22 bis 24 px hoch – getippt wurde oft auf das Polster daneben, das nichts
   auslöst. Die beiden Einstiegsknöpfe waren verschieden breit und hoch.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* Der Hero steht wie am Desktop als eigener Block in der Fläche: 16 px Abstand zur Kopfzeile und zu
	   beiden Rändern (Marc, 27.09.2026 – randlos ging er in die gleichfarbige Kopfzeile über und hob sich
	   nicht mehr ab). Der Innenrand wird dafür schmaler, damit „Verbindungen." auch bei 320 px passt. */
	body.home .site-content {
		padding-top: 1rem;
	}

	.page__text > .ink-hero {
		margin-left: -1rem;
		margin-right: -1rem;
	}

	.ink-hero__inner {
		padding-block: var(--ink-space-7);
	}

	.ink-hero .ink-hero__nachsatz {
		margin: 0;
	}

	.ink-searchbar__field {
		padding-block: .3rem;
	}

	.ink-searchbar__field input,
	.ink-searchbar__field select {
		min-height: 2.75rem;
	}

	/* Beide Einstiege gleich breit und gleich hoch, auch wenn nur einer umbricht. */
	.ink-hero__actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
	}

	.ink-hero__actions .ink-btn {
		width: 100%;
		padding-inline: 1.25rem;
	}
}

@media (max-width: 30em) {
	/* Hier ist der Seitenrand 20 px (Abschnitt 1): der Hero rückt 4 px hinaus, steht also ebenfalls 16 px vom Rand. */
	.page__text > .ink-hero {
		margin-left: -.25rem;
		margin-right: -.25rem;
	}

	.ink-hero > .ink-container {
		padding-inline: 1rem;
	}

	/* Suchkarte im schmaleren Hero: weniger Rand, damit „Demosuche – alles in Ihrer Nähe" ab 360 px ganz steht. */
	.ink-hero .ink-searchbar {
		padding: .25rem;
	}

	.ink-hero .ink-searchbar__field {
		padding-inline: .75rem;
	}
}

@media (max-width: 47.99em) {
	/* Auswahlfelder der Suchkarte: derselbe schmale Winkel wie überall (Abschnitt 10) statt des breiten
	   Browser-Pfeils – und der Text steht bündig mit Beschriftung und Adressfeld (der Browser rückte ihn 4 px ein). */
	.ink-searchbar__field select {
		-webkit-appearance: none;
		appearance: none;
		padding-right: 1.5rem;
		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right center / 14px no-repeat;
	}
}


/* --------------------------------------------------------------------------
   L2. Startseite: Kacheln, Schritte, Beispielkarten

   Mehrere Klassen setzten margin: 0 nur mit einer Klasse (0,1,0) – die
   HiveTheme-Regeln h3:not(:last-child), p:not(:last-child) und
   h1…h6 { margin-top: 2rem } gewannen trotzdem. Daher die zu grossen,
   ungleichen Abstände in Kategorie-, Beispiel- und Tarifkarten. Die
   Selektoren hier tragen deshalb zwei Klassen.
   -------------------------------------------------------------------------- */

/* „Sechs gute Gründe": flex-basis 22rem war eine Mindestbreite, als Text und
   Grafik nebeneinanderstanden. In der gestapelten Kachel wirkte sie als
   Mindesthöhe – Kachel 05 hatte unten 110 px leere Fläche. Einspaltig gibt es
   keine Nachbarn, deren Höhe gewahrt werden müsste. */
@media (max-width: 760px) {
	.ink-bento__body {
		flex: 0 1 auto;
	}
}

@media (max-width: 47.99em) {
	/* „Zum Vorlagen-Hub" und „Alle Tarife ansehen" waren 23 px hohe Tippziele. */
	.ink-bento__link:not(.ink-bento__link--probe) {
		min-height: 2.75rem;
	}

	/* Einzelwörter allein in der Zeile („Zwei Wege, ein / Ziel:", „… AUF EINEN / BLICK"). */
	.ink-eyebrow,
	.ink-cta h2 {
		text-wrap: balance;
	}

	/* Kategoriekacheln: 45 px zwischen Symbol und Überschrift, je 28 px darunter – überall nur noch der Abstand der Kachel. */
	.ink-feature .ink-feature__title,
	.ink-feature .ink-feature__text {
		margin: 0;
	}

	/* Beispielkarten „Die Ampel steht auf beiden Seiten": Titel, Alter und Ort hatten je 16 px zu viel. */
	.ink-democard .ink-democard__title,
	.ink-democard .ink-democard__zeit,
	.ink-democard .ink-democard__ort {
		margin: 0;
	}

	/* Eine lange Adresse rutschte als Ganzes unter das Ortssymbol – jetzt bricht sie neben ihm um. */
	.ink-democard .ink-democard__ort {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
	}

	.ink-democard__ort > svg {
		margin-top: .45em;
	}

	.ink-democard__ort .ink-entfernung {
		grid-column: 1 / -1;
	}

	/* Abschluss: beide Knöpfe in voller Kartenbreite, wie in den Tarifkarten. */
	.ink-cta__card .ink-btn {
		width: 100%;
		padding-inline: 1.25rem;
	}
}

/* „So funktioniert's": Die Textspalte neben der Ziffer war bei 320 px nur
   176 px breit (vorher 150). Etwas weniger Kartenpolster, und die Spalte darf
   schmaler werden als ihr längstes Wort, statt es über den Rand zu drücken. */
@media (max-width: 30em) {
	.ink-track {
		padding: 1.25rem 1rem;
	}

	.ink-track__content {
		min-width: 0;
		overflow-wrap: break-word;
	}
}


/* --------------------------------------------------------------------------
   L3. Preise (Startseite und /preise/)

   Die Tarifkarten waren für fünf Spalten gebaut: Der Name hält immer Platz
   für zwei Zeilen frei, „/ Jahr" steht in einer eigenen Zeile, damit alle
   Karten nebeneinander gleich aussehen. Auf dem Handy steht jede Karte
   allein – dort war das nur Leerraum (eine Karte bis 1114 px hoch). Bei
   412 px lagen zwei 176 px schmale Karten nebeneinander, der Name ragte
   heraus. Der Umschalter hatte ungleiche Hälften, und der Gruppentitel
   teilte sich die Zeile mit seinem Zusatz („Für / Fachkräfte").
   -------------------------------------------------------------------------- */

@media (max-width: 35.99em) {
	.ink-preise__gruppe .ink-pricing-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-price .ink-price__name {
		min-height: 0;
		margin-bottom: 0;
	}

	.ink-price .ink-price__audience {
		line-height: 1.45;
	}

	/* HiveTheme gab dem Betrag die Zeilenhöhe von Fliesstext (67 px) und 16 px Rand. */
	.ink-price .ink-price__amount {
		line-height: 1.1;
		margin-bottom: 0;
	}

	.ink-price .ink-price__period {
		flex: 0 1 auto;
		margin-left: .25rem;
	}

	.ink-price .ink-btn {
		padding-inline: 1rem;
	}

	.ink-preise__gruppentitel {
		flex-direction: column;
		align-items: flex-start;
		gap: .2rem;
	}

	/* Zwei gleich breite Hälften, solange „Jährlich · günstiger" in eine Zeile passt – sonst bekommt die linke Hälfte ihren Platz, statt mit dem Punkt am Zeilenende umzubrechen. */
	.ink-billing-toggle {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) 1fr;
		width: 100%;
	}

	.ink-billing-toggle button {
		min-height: 2.75rem;
		padding: .5rem .75rem;
		line-height: 1.2;
	}
}

@media (max-width: 47.99em) {
	/* /preise/: 96 px Luft zwischen Titelband und „PREISE" (Polster von .site-content und des Abschnitts). */
	.page__text > #preise:first-child {
		padding-top: var(--ink-space-4);
	}
}


/* --------------------------------------------------------------------------
   L4. Vorlagen-Hub und Vorlagen-Kacheln (auch Favoriten der Startseite)

   Die Sprungleiste bestand aus Pillen in Textbreite, jede allein in ihrer
   Zeile – der rechte Rand war zerfranst, die Zähler standen jedes Mal
   woanders. Jede Vorschau stand im vollen A4-Hochformat (≈ 420 px, der Hub
   war 44 000 px lang), die beiden Knöpfe einer Kachel waren verschieden
   breit und 36 px hoch, die Abstände im Kartenkörper ungleich, und die
   Formatchips hatten mit 11 px die kleinste Schrift der Seite.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* Seitentitel im dunklen Band: weniger Luft darüber und darunter, keine allein stehenden Wörter („für / die / pädagogische"). */
	.header-hero--title h1 {
		margin-top: 2rem;
		margin-bottom: 2rem;
		text-wrap: balance;
	}

	.ink-templates-nav {
		display: grid;
		gap: .5rem;
		margin-block: var(--ink-space-4) var(--ink-space-6);
	}

	.ink-templates-nav__link {
		display: flex;
		justify-content: space-between;
		min-height: 2.75rem;
		padding: .45rem .5rem .45rem 1rem;
		border-radius: var(--ink-radius-md);
		line-height: 1.35;
		text-wrap: balance;
	}

	.ink-templates-nav__count {
		flex: none;
	}

	/*
	 * Filter im Hub (Teil B, 25.10.2026): Suchfeld in voller Breite oben, die
	 * Chips in einem aufklappbaren Feld „Filter, n aktiv“ (details/summary –
	 * am Rechner ist der Titel verborgen und das Feld immer offen). Chips
	 * umbrechen und scrollen nicht seitlich; Trefferfläche mindestens 2,75 rem.
	 */
	.ink-vf {
		gap: .75rem;
		margin-top: var(--ink-space-4);
	}

	.ink-vf__suche {
		max-width: none;
	}

	.ink-vf__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: .75rem;
		min-height: 2.75rem;
		padding: .45rem 1rem;
		font-size: var(--ink-text-sm);
		font-weight: 600;
		color: var(--ink-graphite-700);
		list-style: none;
		cursor: pointer;
		background: var(--ink-bg-elevated);
		border: 2px solid var(--ink-graphite-400);
		border-radius: var(--ink-radius-md);
	}

	.ink-vf__summary::-webkit-details-marker {
		display: none;
	}

	.ink-vf__summary::after {
		flex: none;
		width: .55rem;
		height: .55rem;
		margin-right: .25rem;
		content: "";
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
	}

	.ink-vf__filter[open] > .ink-vf__summary {
		margin-bottom: .75rem;
	}

	.ink-vf__filter[open] > .ink-vf__summary::after {
		transform: rotate(225deg);
	}

	.ink-vf__summary:focus-visible {
		outline: 2px solid var(--ink-mint-700);
		outline-offset: 2px;
	}

	.ink-vf__gruppen {
		display: grid;
		gap: 1rem;
	}

	.ink-vf__chip-text {
		min-height: 2.75rem;
	}

	.ink-vf__zuruecksetzen {
		min-height: 2.75rem;
	}

	/* Querformat statt A4: gezeigt wird der Kopf der Vorlage (object-position: top). */
	.ink-template__preview {
		aspect-ratio: 4 / 3;
	}

	.ink-template__lock {
		min-height: 2.75rem;
	}

	.ink-template__body {
		gap: .75rem;
	}

	.ink-template__body > .ink-template__title,
	.ink-template__body > .ink-template__text {
		margin: 0;
	}

	/* „Stundenzettel Integrationskraft – / V1": ausgeglichener Umbruch. */
	.ink-template__title {
		text-wrap: balance;
	}

	.ink-template__meta {
		padding-top: .25rem;
	}

	.ink-format {
		padding: .25rem .55rem;
		font-size: .75rem;
	}

	/* Beide Knöpfe einer Kachel in voller Breite (vorher „Vorschau ansehen" links angeschlagen). */
	.ink-template .ink-btn {
		align-self: stretch;
		margin-top: .25rem;
	}

	.ink-rechnungsmuster__knoepfe {
		padding-top: .25rem;
	}

	.ink-rechnungsmuster__knoepfe .ink-btn {
		flex: 1 1 auto;
		margin-top: 0;
	}
}


/* --------------------------------------------------------------------------
   L5. Detailseite einer Vorlage

   Doppelter Seitenrand: Die Seite liegt im Container des Themes, und die
   Vorlage legt noch einmal .ink-container mit eigenem Rand hinein – der
   Inhalt begann bei 40 px statt bei 20 px wie Logo und Hub. Bei 320 px
   bestimmte ausserdem die Faktenzeile „Zielgruppe: Schulbegleitung" über
   die Rasterspur 1fr (= minmax(auto, 1fr)) die Breite der ganzen Spalte.
   Die grossen Knöpfe brachen zweizeilig um und waren verschieden hoch.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.ink-vorlage {
		padding-block: 0 var(--ink-space-4);
	}

	.ink-vorlage > .ink-container {
		padding-inline: 0;
	}

	/* Brotkrumen „Start" und „Vorlagen" waren 23 px hohe Tippziele; der Gegenzug hält die Zeile gleich hoch. */
	.ink-brotkrumen a {
		padding-block: .6rem;
		margin-block: -.6rem;
	}

	.ink-vorlage__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-vorlage__seitenleiste {
		min-width: 0;
	}

	.ink-vorlage__fakten dd {
		min-width: 0;
		overflow-wrap: break-word;
	}

	/* Alle Knöpfe der Seitenleiste in einer Grösse; „PDF und Word freischalten" und „Sammelrechnung erstellen" passen so auch bei 320 px in eine Zeile. */
	.ink-vorlage__cta.ink-btn {
		padding: .95rem .75rem;
		font-size: 1rem;
	}

	.ink-vorlage__hinweis {
		text-wrap: pretty;
	}

	/* „Weitere Vorlagen aus …" (lange Kategorienamen wie früher „Kita-Orga & Leitung"): ausgeglichener Umbruch statt Trennung am Bindestrich. */
	.ink-vorlage__schlagworte h2,
	.ink-vorlage__verwandt h2 {
		text-wrap: balance;
	}

	/* „Passend bei diesen Themen": Der letzte Chip war 4 px höher und sass tiefer (ul li:not(:last-child) aus HiveTheme). */
	.ink-vorlage__schlagworte ul {
		align-items: flex-start;
		gap: .5rem;
	}

	.ink-vorlage__schlagworte .ink-chip {
		margin: 0;
	}
}


/* --------------------------------------------------------------------------
   9. Kontoseiten beider Rollen (K1–K8)

   Übersicht, Standorte, Stellenanzeigen, Freischaltungen, Match-Alert,
   Unterlagen, Rechnungsdaten, Favoriten, Nachrichten, Sperrliste,
   Einstellungen, Eintrag bearbeiten und anlegen. Gemessen bei 320, 360,
   390 und 412 px (Fachkraft, Einrichtung Pro und Basis).

   Grundsatz wie oben: Gleiche Rollen sehen gleich aus. Kachel neben
   Kachel gleich hoch, Knopf unter Knopf gleich breit, Feld unter Feld
   gleich gross – und nichts ragt aus seinem Kasten.
   -------------------------------------------------------------------------- */


/* ---------- K1 Übersicht: Kopf und Kacheln ----------

   Die Kacheln waren 48 bis 96 px hoch: Die Zahl stand als eigene Zeile
   über dem Namen und fehlte bei Zustandskacheln (Verfügbarkeit,
   Match-Alert, Profil bearbeiten …). In der einspaltigen Liste sprang
   der Rhythmus bei jeder Kachel. Jetzt steht die Zahl rechts als
   Kennziffer, Name und Zusatz links – alle Kacheln gleich hoch (nur ein
   zweizeiliger Zusatz macht eine Kachel etwas höher), und die Liste mit
   bis zu 17 Kacheln wird deutlich kürzer.

   Im Kopf brach „Kindertageseinrichtung" neben dem Bild mitten im Wort
   („Kindertageseinricht|ung"): Die Namensspalte war schmaler als das
   Wort. Der Name rückt jetzt unter das Bild, sobald die Spalte daneben
   zu schmal für ein langes Wort wäre. */

@media (max-width: 30em) {
	.ink-kachel__flaeche {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"name   zahl"
			"zusatz zahl";
		align-content: center;
		align-items: center;
		column-gap: var(--ink-space-3);
		row-gap: 0.15rem;
		min-height: 4.5rem;
	}

	.ink-kachel__name {
		grid-area: name;
	}

	.ink-kachel__zusatz {
		grid-area: zusatz;
	}

	.ink-kachel__zahl {
		grid-area: zahl;
		justify-self: end;
		white-space: nowrap;
	}

	/* 14 rem: etwas breiter als „Kindertageseinrichtung" in 20 px (220 px) – wird die Spalte neben dem Bild schmaler, rückt der Name darunter. */
	.ink-konto__wer {
		flex-basis: 14rem;
	}

	.ink-konto__name {
		font-size: 1.25rem;
	}
}


/* ---------- K2 Kopf der HivePress-Kontoseiten ----------

   Favoriten, Nachrichten und Einstellungen beginnen mit dem Umschalter
   „Mein Konto": ein grauer, eckiger 52-px-Balken im Grundstil des
   Themes, der wie ein abgeschalteter Knopf aussah, danach 48 px Luft.
   Jetzt ein heller Rahmenknopf wie „Profil bearbeiten".

   Der Seitentitel (Eintrag bearbeiten, Einstellungen …) stand in 36 px:
   „Kindertageseinrichtung" brach mitten im Wort und ohne Trennstrich
   („Kindertageseinric|htung"). Jetzt dieselbe Grösse wie die
   Seitentitel im dunklen Band.

   „← Zur Übersicht" war ein 17 px hohes Tippziel – eine unsichtbare
   Fläche macht es gut 44 px hoch, ohne die Seite zu verschieben. */

@media (max-width: 47.99em) {
	.hp-page__sidebar .hp-button--user-account-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-height: 48px;
		margin: 0;
		padding: 0.65rem 1.25rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: var(--ink-graphite-800);
		background: var(--ink-bg-elevated);
		border: 1.5px solid var(--ink-border);
		border-radius: var(--ink-radius-pill);
		box-shadow: none;
	}

	.hp-page__sidebar .hp-button--user-account-menu .hp-icon {
		color: var(--ink-mint-600);
		margin: 0;
	}

	.hp-page__sidebar:has(> .hp-button--user-account-menu) {
		margin-bottom: var(--ink-space-5);
	}

	:is(.hp-template--user-account-page, .hp-template--listing-manage-page, .hp-template--listing-submit-page) .hp-page__title {
		font-size: clamp(1.375rem, 7vw, 2.25rem);
	}

	.ink-rueckweg a {
		position: relative;
	}

	.ink-rueckweg a::after {
		content: "";
		position: absolute;
		inset: -14px -8px;
	}
}


/* ---------- K3 Formulare: Eintrag bearbeiten/anlegen, Einstellungen, Nachricht ----------

   Der Hauptknopf („Änderungen speichern", „Eintrag einreichen") war ein
   eckiger pink-gelber Verlaufsbalken aus dem Elternthema – die übrigen
   Hauptknöpfe sind orange Pillen. Die Dateiwahl („Bilder auswählen")
   war eine graue, eckige Fläche, die abgeschaltet wirkte.

   Unter dem Upload-Hinweis und dem PDF24-Kasten klebte das nächste
   Feld mit 6 px, darüber standen 12 bis 24 px. Jetzt 24 px wie
   zwischen allen Feldern.

   Im Adressfeld lief die Adresse unter das Ortungssymbol, und der
   Kartenbaustein malte weisse Ecken hinter das gerundete Feld.

   Textfelder mit mehreren Zeilen („Über uns", „Stellenbeschreibung")
   zeigten nur zweieinhalb Zeilen, die dritte abgeschnitten.

   „Konto löschen", „View Profile", „Offline nehmen" und „Löschen" waren
   24 bis 26 px hohe Tippziele; bei 320 px lagen „Offline nehmen" und
   „Löschen" ohne Abstand übereinander. */

@media (max-width: 47.99em) {
	:is(.hp-form--listing-submit, .hp-form--listing-update, .hp-form--user-update, .hp-form--message-send) .hp-form__button[type="submit"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: 0.75rem 1.5rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: #fff;
		background: var(--ink-orange-500);
		background-image: none;
		border: 0;
		border-radius: var(--ink-radius-pill);
		box-shadow: var(--ink-shadow-glow);
	}

	:is(.hp-form--listing-submit, .hp-form--listing-update, .hp-form--user-update, .hp-form--message-send) .hp-form__button[type="submit"]:hover,
	:is(.hp-form--listing-submit, .hp-form--listing-update, .hp-form--user-update, .hp-form--message-send) .hp-form__button[type="submit"]:focus-visible {
		color: #fff;
		background: var(--ink-orange-600);
		background-image: none;
	}

	/* Die Bestätigung im Fenster „Konto löschen" / „Eintrag löschen": rot umrandet wie „Diesen Arbeitgeber sperren". */
	:is(.hp-form--user-delete, .hp-form--listing-delete) .hp-form__button[type="submit"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: 0.75rem 1.5rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: var(--ink-status-red);
		background: transparent;
		background-image: none;
		border: 1.5px solid var(--ink-status-red);
		border-radius: var(--ink-radius-pill);
		box-shadow: none;
	}

	:is(.hp-form--user-delete, .hp-form--listing-delete) .hp-form__button[type="submit"]:hover,
	:is(.hp-form--user-delete, .hp-form--listing-delete) .hp-form__button[type="submit"]:focus-visible {
		color: #fff;
		background: var(--ink-status-red);
	}

	.hp-field--attachment-upload label > button.hp-field--button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0.6rem 1.25rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-sm);
		font-weight: 600;
		line-height: 1.25;
		color: var(--ink-graphite-800);
		background: var(--ink-bg-elevated);
		border: 1.5px solid var(--ink-border);
		border-radius: var(--ink-radius-pill);
	}

	.hp-form__fields > .ink-upload-hinweis {
		margin-bottom: var(--ink-space-5) !important;
	}

	.hp-form__fields > .ink-upload-hinweis:has(+ .ink-pdf24) {
		margin-bottom: 0 !important;
	}

	.hp-form__fields > .ink-pdf24 {
		margin-bottom: var(--ink-space-5);
	}

	/* Platz für das Ortungssymbol rechts im Feld (40 px). */
	:is(.hp-form--listing-submit, .hp-form--listing-update) .hp-form__field .hp-field--location input.hp-field[type="text"] {
		padding-right: 3rem;
		text-overflow: ellipsis;
	}

	:is(.hp-form--listing-submit, .hp-form--listing-update) .hp-field--location .mapboxgl-ctrl-geocoder {
		background: transparent;
		box-shadow: none;
	}

	:is(.hp-form--listing-submit, .hp-form--listing-update, .hp-form--user-update, .hp-form--message-send) .hp-form__field textarea.hp-field {
		min-height: 8rem;
		resize: vertical;
	}

	:is(.hp-form--user-update, .hp-form--listing-update, .hp-form--listing-submit) .hp-form__actions .hp-form__action {
		align-items: center;
		min-height: 44px;
	}

	.hp-template--listing-manage-page .hp-page__topbar .hp-listing__actions--secondary {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--ink-space-5);
	}

	.hp-template--listing-manage-page .hp-page__topbar .hp-listing__actions--secondary .hp-listing__action {
		align-items: center;
		min-height: 44px;
		margin: 0;
	}
}


/* ---------- K4 Listen der Einrichtung: Standorte, Stellenanzeigen, Freischaltungen ----------

   Die Knöpfe einer Karte waren so breit wie ihre Beschriftung und
   flatterten links (Standorte 242/172/95 px untereinander,
   Stellenanzeigen 2 × 2 mit 110/97/140/95 px). Jetzt gleich breit: bis
   etwa 400 px untereinander, darüber zu zweit, der Hauptknopf über die
   volle Breite. Ein übrig bleibender letzter Knopf nimmt ebenfalls die
   ganze Zeile.

   Zwischen Kartentitel und Plakette klafften 28 px (Rand des Themes
   unter jeder Überschrift), zwischen Plakette und Adresse 8 px. Die
   Plakette „Hauptstandort"/„Entwurf" stand nach einem Umbruch 8 px
   eingerückt.

   Die Hauptknöpfe am Listenende waren je Seite anders gross
   („Neuen Standort anlegen" 52 px, „Neue Stellenanzeige" 44 px,
   „Weitere Fachkräfte finden" 44 px in kleiner Schrift). Jetzt alle
   gleich, über die volle Breite – wie „Profil bearbeiten" im Kopf der
   Übersicht. „Allgemeine Suche starten" war ein 26 px hohes Tippziel.

   Seit dem 04.10.2026 stehen auf der Standortseite „Neuen Standort
   anlegen" (oder der Satz zur Grenze) und „Allgemeine Suche starten" über
   der Liste (ink-standortwahl__wege). Beide sind Knöpfe in voller Breite
   und 48 px Höhe; der Satz zur Grenze nimmt eine ganze Zeile, sein Verweis
   „Tarife ansehen" ein 44 px hohes Tippziel. Der Block kostet vor der
   Werkzeugleiste etwa 110 px Höhe. */

@media (max-width: 30em) {
	.ink-standort__kopf > .ink-standort__name,
	.ink-anzeige__kopf > .ink-anzeige__titel,
	.ink-freischaltung__kopf > .ink-freischaltung__name {
		margin: 0;
	}

	.ink-standort__kopf,
	.ink-anzeige__kopf,
	.ink-freischaltung__kopf {
		gap: var(--ink-space-2);
	}

	/* Name und Plakette als umbrechende Reihe: Passt die Plakette neben den Namen, steht sie mit 8 px
	   Abstand daneben (vorher klebte sie mit einem Leerzeichen an „Kita Pusteblume"), sonst bündig darunter. */
	.ink-standort__kopf > .ink-standort__name {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem var(--ink-space-2);
	}

	.ink-standort__haupt,
	.ink-standort__offline {
		margin-left: 0;
	}

	.ink-standort__aktionen,
	.ink-anzeige__aktionen,
	.ink-freischaltung__aktionen,
	.ink-hinweiskasten__aktionen {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
		gap: var(--ink-space-2);
	}

	/* Vier kurze Knöpfe einer Stellenanzeige passen ab 360 px zu zweit (Bearbeiten | Ansehen, Offline nehmen | Löschen). */
	.ink-anzeige__aktionen {
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	}

	.ink-standort__aktionen > :first-child,
	.ink-freischaltung__aktionen > :first-child,
	.ink-hinweiskasten__aktionen > :first-child,
	.ink-standort__aktionen > :last-child:nth-child(even),
	.ink-freischaltung__aktionen > :last-child:nth-child(even),
	.ink-hinweiskasten__aktionen > :last-child:nth-child(even),
	.ink-anzeige__aktionen > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/* Die Formulare (Löschen, Offline nehmen) sind Rasterzellen, ihr Knopf füllt sie. */
	:is(.ink-standort__aktionen, .ink-anzeige__aktionen, .ink-freischaltung__aktionen) > form {
		display: block;
		margin: 0;
	}

	:is(.ink-standort__aktionen, .ink-anzeige__aktionen, .ink-freischaltung__aktionen, .ink-hinweiskasten__aktionen) .ink-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		white-space: normal;
		line-height: 1.25;
		text-align: center;
	}

	/* Hauptknopf am Listenende (Standortseite: über der Liste): volle Breite, eine Grösse für alle. */
	:is(.ink-standortwahl__wege, .ink-anzeigen__fuss, .ink-freischaltungen__fuss) > :is(.ink-btn, form) {
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
	}

	:is(.ink-standortwahl__wege, .ink-anzeigen__fuss, .ink-freischaltungen__fuss, .ink-hinweiskasten__aktionen) .ink-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: 0.75rem 1.25rem;
		font-size: var(--ink-text-base);
		line-height: 1.25;
		white-space: normal;
		text-align: center;
	}

	/* Der Satz zur Grenze: eine ganze Zeile über dem Knopf der Allgemeinen Suche, sein Verweis ein Tippziel. */
	.ink-standortwahl__wege > .ink-standortwahl__grenze {
		flex: 1 1 100%;
	}

	.ink-standortwahl__wege .ink-standortwahl__grenze a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Werkzeugleiste über den Listen (Reihenfolge, „Name suchen"): 42 px hoch
   in 14 px Schrift – kleiner als die Formularfelder, und unter 16 px
   vergrössert das iPhone beim Antippen die Seite. */
@media (max-width: 47.99em) {
	:is(.ink-standortwahl__werkzeuge, .ink-freischaltungen__werkzeuge, .ink-werkzeuge) :is(select, input) {
		min-height: 48px;
		padding: 0.7rem 1rem;
		font-size: 1rem;
		border-radius: var(--ink-radius-md);
	}

	:is(.ink-standortwahl__werkzeuge, .ink-freischaltungen__werkzeuge, .ink-werkzeuge) select {
		padding-right: 2.25rem;
	}
}


/* ---------- K5 Match-Alert ----------

   Die Kästchen unter „Beschäftigungsart" liefen je nach Wortlänge mal
   zu zweit, mal einzeln („Keine Angabe  Minijob" / „Nach Absprache" /
   „Praktikum" …), die zweite Spalte begann jedes Mal woanders. Die
   Kästchen waren 13 px klein, die Zeilen 23 px hohe Tippziele. Jetzt
   eine Wahl je Zeile wie bei der Ausbildung, 20-px-Kästchen wie der
   Hauptschalter und 40 px hohe Zeilen.

   Ortsfeld und Umkreis waren 48 und 43 px hoch. (Der abgeschnittene
   Platzhalter „leer lassen für deine eigene Adresse" steht seit dem
   26.09.2026 als Hinweis unter dem Feld – im Markup, für alle Breiten.) */

@media (max-width: 47.99em) {
	.ink-alert__form,
	.ink-alert__feld {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-alert__feld input,
	.ink-alert__feld select {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		min-height: 48px;
		font-size: 1rem;
	}

	.ink-alert__wahl {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-height: 2.5rem;
		margin: 0;
	}

	.ink-alert__schalter input,
	.ink-alert__wahl input {
		flex: 0 0 auto;
		width: 20px;
		height: 20px;
		margin: 0;
		accent-color: var(--ink-mint-600);
	}

	.ink-alert__wahl span {
		min-width: 0;
	}

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


/* ---------- K6 Digitale Unterlagen ----------

   Die Dateiwahl war das ungestaltete Browser-Element („Datei auswählen |
   Keine ausgewählt", 21 px hoch), bei 320 px 11 px breiter als der
   Kasten. „Hochladen" stand mit „noch 3 Dateien möglich" auf einer
   Unterkante, die Schrift daneben saß tiefer als die im Knopf. */

@media (max-width: 47.99em) {
	.ink-unterlagen__neu {
		align-items: center;
	}

	.ink-unterlagen__feld,
	.ink-unterlagen__neu > .ink-upload-hinweis,
	.ink-unterlagen__neu > .ink-pdf24 {
		flex: 1 1 100%;
		min-width: 0;
	}

	.ink-unterlagen__neu > .ink-btn {
		flex: 1 1 100%;
		width: 100%;
		min-height: 48px;
		padding: 0.75rem 1.25rem;
		line-height: 1.25;
	}

	.ink-unterlagen__feld input[type="file"],
	.ink-rechnungsdaten__unterschrift input[type="file"] {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding: 0;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-sm);
		font-weight: 400;
		color: var(--ink-graphite-500);
		background: transparent;
		border: 0;
	}

	.ink-unterlagen__feld input[type="file"]::file-selector-button,
	.ink-rechnungsdaten__unterschrift input[type="file"]::file-selector-button {
		min-height: 44px;
		margin-right: 0.75rem;
		padding: 0.6rem 1.25rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-sm);
		font-weight: 600;
		color: var(--ink-graphite-800);
		background: var(--ink-bg-elevated);
		border: 1.5px solid var(--ink-border);
		border-radius: var(--ink-radius-pill);
		cursor: pointer;
	}

	/* Eine hinterlegte Datei: Name über der ganzen Breite, „Öffnen" und „Löschen" gleich breit darunter.
	   Ein langer Dateiname („Lebenslauf_Maximiliane_Mustermann-…") hielt die Rasterspalte offen: Die
	   Karte ragte bei 320 px 15 px über den Rand. Die Spalte darf schmaler werden als der Name, und
	   der Name bricht an jeder Stelle (die Grundregel für „__name" hatte daraus break-word gemacht,
	   das die Mindestbreite nicht senkt). */
	.ink-unterlagen__liste {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-unterlage .ink-unterlage__name {
		overflow-wrap: anywhere;
	}

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

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

	.ink-unterlage__aktionen > * {
		flex: 1 1 0;
		min-width: 0;
	}

	.ink-unterlage__aktionen .ink-btn {
		width: 100%;
		min-height: 44px;
		padding: 0.6rem 1rem;
		font-size: var(--ink-text-sm);
		line-height: 1.25;
	}
}


/* ---------- K7 Rechnungsdaten ----------

   „Digitale Unterschrift (PNG)" war 344 px breit statt 283: Die
   Dateiwahl behielt ihre Eigenbreite, und die Rasterspalte des Feldes
   wird nie schmaler als ihr Inhalt. Beschriftung, Dateiwahl,
   Upload-Hinweis und Hilfetext ragten bis zu 75 px aus der Karte und
   wurden am Bildschirmrand abgeschnitten („trägst d…"). Bis 767 px, weil
   auch die beiden Spalten ab 720 px zu schmal für die Eigenbreite sind.

   Auswahlfelder waren 43 px hoch, die Textfelder daneben 48 px. */

@media (max-width: 47.99em) {
	.ink-rechnungsdaten__feld {
		grid-template-columns: minmax(0, 1fr);
	}

	.ink-rechnungsdaten__unterschrift {
		min-width: 0;
	}

	.ink-rechnungsdaten__unterschrift > .ink-upload-hinweis {
		flex: 1 1 100%;
		min-width: 0;
	}

	.ink-rechnungsdaten__unterschrift img {
		max-width: 100%;
	}

	.ink-rechnungsdaten__feld select,
	.ink-rechnungsdaten__feld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
		min-height: 48px;
	}

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


/* ---------- K8 Sperrliste, Sperrknopf, Benachrichtigung ----------

   Ein gesperrter Eintrag stand als Zeile aus Name und „Sperre aufheben"
   (nicht umbrechend): Für den Namen blieben bei 360 px gut 70 px, ein
   langes Wort ragte aus der Zeile. Jetzt der Name über die ganze
   Breite, der Knopf darunter.

   „Diesen Arbeitgeber sperren" stand als rote Schrift ohne Rahmen, aber
   mit Knopf-Innenabstand da – 18 px eingerückt, wie verrutschter Text.
   Das Theme nimmt Absendeknöpfen den Rahmen; gewollt ist ein roter
   Umrissknopf.

   Über „Benachrichtigung abschalten" standen 28 px Luft: Das Theme gibt
   jedem Absatz, der nicht der letzte ist, einen Rand nach unten. */

@media (max-width: 30em) {
	.ink-blocklist__item {
		flex-wrap: wrap;
	}

	.ink-blocklist__item > span {
		flex: 1 1 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.ink-blocklist__item .ink-btn {
		width: 100%;
		min-height: 44px;
		padding: 0.6rem 1rem;
		font-size: var(--ink-text-sm);
		line-height: 1.25;
		white-space: normal;
	}
}

@media (max-width: 47.99em) {
	.ink-btn--gefahr[type="submit"] {
		border-style: solid;
		border-width: 1.5px;
	}

	.ink-nachrichtenalert .ink-nachrichtenalert__text {
		margin-bottom: 0;
	}
}


/* --------------------------------------------------------------------------
   10. Nach der Sichtung der Fotos (27.09.2026)

   Vier unabhängige Durchsichten aller Handy-Fotos (vorher/nachher) fanden,
   was die Messung nicht sieht: ungleiche Kartenköpfe, einen Knopf mitten
   auf dem Vorlagentext, klebende Zeilen, zwei Pfeilformen, den alten
   Verlaufsknopf und unausgewogene Überschriften.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	/* Beispielkarten der Ampel: Etikett und Ampel untereinander. Drei Ampeln passten neben das Etikett,
	   „Offen für Initiativbewerbungen" nicht – die Köpfe der vier Karten sahen verschieden aus. */
	.ink-democard__head {
		flex-direction: column;
		align-items: flex-start;
		gap: .5rem;
	}

	/* Gesperrte Vorlagen: Im 4:3-Ausschnitt lag „Mit Pro freischalten" mitten auf dem Text der Vorlage.
	   Ein weisser Verlauf beruhigt den Grund darunter; der Knopf fluchtet mit „Vorschau ansehen". */
	.ink-template--gated .ink-template__preview::before {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 55%;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 65%);
		pointer-events: none;
	}

	.ink-template__lock {
		inset-inline: var(--ink-space-4);
	}

	/* Formate einer Vorlage: eine Reihe mit Abstand (vorher klebte „AUSFÜLLBAR" 1 px unter PDF und DOCX). */
	.ink-vorlage__fakten dd:has(> .ink-format) {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: .35rem;
	}

	/* Ausgeglichene Zeilen statt eines Worts allein („Transparent, fair, ohne / Abofalle",
	   „Laki-Laki Standort Holzwickede / 1", „… spürbaren Mehrwert / entdecken"). */
	.ink-section__header h2,
	.ink-track__content h4,
	.hp-listing__title,
	.ink-konto__name {
		text-wrap: balance;
	}

	.ink-blocklist p,
	.ink-alert__sperre,
	.ink-nachrichtenalert__text {
		text-wrap: pretty;
	}

	/* Unter einem Seitentitel im dunklen Band ist die Abschnittsüberschrift nicht grösser als dieser
	   (auf /preise/ standen 25 px über 34 px). Die Startseite hat kein Band und behält ihre Grössen. */
	body:not(.home) .ink-section__header h2 {
		font-size: clamp(1.375rem, 6.4vw, 1.75rem);
	}

	/* Match-Alert: Zweizeilige Wahlen klebten aneinander, das Kästchen stand mittig auf zwei Zeilen.
	   Jetzt gleicher Abstand für alle, das Kästchen auf Höhe der ersten Zeile. */
	.ink-alert__wahl {
		align-items: flex-start;
		padding-block: .5rem;
	}

	.ink-alert__wahl input {
		margin-top: .15rem;
	}

	/* Eine Pfeilform für alle Auswahlfelder: select2 zeichnete bei Einzelauswahl ein Dreieck,
	   bei Mehrfachauswahl (Abschnitt 4) einen Winkel – an leicht verschiedener Stelle. */
	.select2-container--default .select2-selection--single:not(.select2-selection--inline) .select2-selection__arrow {
		width: 14px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 14px no-repeat;
	}

	.select2-container--default .select2-selection--single:not(.select2-selection--inline) .select2-selection__arrow b {
		display: none;
	}

	/* „Kontaktieren": statt des eckigen Verlaufsbalkens die Hauptfarbe der Seite, so hoch wie die
	   1-Klick-Bewerbung. Allein eine Pille; unter dem Merkmalskasten bilden beide eine abgerundete Karte. */
	.hp-listing--view-page .hp-listing__actions--primary .hp-listing__action--message.button--primary {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: .75rem 1.5rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: #fff;
		background: var(--ink-orange-500);
		background-image: none;
		border: 0;
		border-radius: var(--ink-radius-pill);
	}

	.hp-listing--view-page .hp-listing__actions--primary .hp-listing__action--message.button--primary:hover,
	.hp-listing--view-page .hp-listing__actions--primary .hp-listing__action--message.button--primary:focus-visible {
		color: #fff;
		background: var(--ink-orange-600);
		background-image: none;
	}

	.hp-listing--view-page .hp-listing__attributes--primary:has(.hp-listing__attribute) {
		border-radius: var(--ink-radius-lg) var(--ink-radius-lg) 0 0;
	}

	.hp-listing--view-page .hp-listing__attributes--primary:has(.hp-listing__attribute) + .hp-listing__actions--primary .hp-listing__action--message.button--primary {
		border-radius: 0 0 var(--ink-radius-lg) var(--ink-radius-lg);
	}

	/* Anbieterkarte: das Nachrichtensymbol rechts wie in den Ergebniskarten, nicht allein links. */
	.hp-vendor--view-block .hp-vendor__actions--primary {
		margin-left: auto;
	}

	/* Knöpfe in Hinweiskästen über die volle Breite, wie die übrigen Knöpfe in Kästen. */
	.ink-vorlagen-note__knoepfe {
		width: 100%;
		flex-direction: column;
	}

	/* „Kostenlose Vorlagen ansehen" brach in 286 px Knopfbreite um; mit knappem Seitenabstand bleibt es eine Zeile. */
	.ink-vorlagen-note__knoepfe .ink-btn {
		padding-inline: 1rem;
	}

	.ink-vorlagen-note .ink-btn,
	.ink-alert__sperre .ink-btn,
	.ink-nachrichtenalert__form,
	.ink-nachrichtenalert__form .ink-btn {
		width: 100%;
	}

	.ink-alert__sperre .ink-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		margin-top: .75rem;
	}
}

@media (max-width: 30em) {
	/* „Neue Datei (max. 5 MB)": 14 px Innenrand, die Karten ringsum 20 px. */
	.ink-unterlagen__neu {
		padding: 1.25rem;
	}
}

/* Zweite Runde der Sichtung (Einrichtungskonten, 27.09.2026). */
@media (max-width: 47.99em) {
	/* Werkzeugleiste der Listen: „Reihenfolge" 48 px, „Name suchen" 51 px – eine Zeilenhöhe für beide. */
	:is(.ink-standortwahl__werkzeuge, .ink-freischaltungen__werkzeuge, .ink-werkzeuge) :is(select, input) {
		line-height: 1.25;
	}

	/* „Sortieren nach" war 45 px hoch, die Felder ringsum 48 px. */
	.hp-form--listing-sort .select2-container .select2-selection {
		display: flex;
		align-items: center;
		min-height: 48px;
	}

	/* Gewählter Standort: höchstens zwei Zeilen (Name, Anfang der Adresse) – eine lange Adresse
	   machte das Feld fünfzeilig und 125 px hoch. */
	.hp-form__field--location .select2-container .select2-selection--single .select2-selection__rendered {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	/* Ein zu langer Platzhalter endet mit „…" statt mitten im Wort („… U3-Gruppe, Te"). */
	.hp-form__field input.hp-field {
		text-overflow: ellipsis;
	}

	/* Vorschaubilder im 4:3-Ausschnitt enden weich statt hart mitten in einer Textzeile. */
	.ink-template__preview::before {
		content: "";
		position: absolute;
		inset: auto 0 0;
		height: 30%;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		pointer-events: none;
	}

	/* Freischaltungskasten: unten 39, oben 21 px Innenraum – der letzte Absatz trug seinen Rand mit. */
	.ink-bewerbung > :last-child {
		margin-bottom: 0;
	}

	/* „Mein Konto" / „Filtern": das Symbol war 11 px klein neben 16-px-Schrift. */
	.button.hp-button--mobile .hp-icon,
	.hp-page__sidebar .hp-button--user-account-menu .hp-icon {
		font-size: 1.125rem;
	}
}

@media (max-width: 30em) {
	/* Knopfraster der Karten: Formularknöpfe (Offline nehmen, Löschen) waren 2 px höher als Verweise. */
	:is(.ink-standort__aktionen, .ink-anzeige__aktionen, .ink-freischaltung__aktionen) > form {
		display: flex;
	}

	:is(.ink-standort__aktionen, .ink-anzeige__aktionen, .ink-freischaltung__aktionen) > form > .ink-btn {
		flex: 1 1 auto;
	}

	:is(.ink-standort__aktionen, .ink-anzeige__aktionen, .ink-freischaltung__aktionen) .ink-btn {
		min-height: 44px;
		padding-top: .6rem;
		padding-bottom: .6rem;
		font-size: var(--ink-text-sm);
	}
}

/* Dritte Runde der Sichtung (Gast-Seiten und Rechtstexte, 27.09.2026). */
@media (max-width: 47.99em) {
	/* Oranger Kasten der Trefferlisten: Die beiden Wege stehen untereinander und sind gleich hoch –
	   „Als Fachkraft kostenlos starten" (einzeilig) war 52 px, „Als Einrichtung/Träger registrieren" 73 px. */
	.ink-vorschau-kasten__weg {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: 1fr;
		align-items: stretch;
	}

	/* „Anmelden" unter dem vollbreiten Knopf mittig statt links angeschlagen. */
	.ink-mehrwert__weg {
		justify-content: center;
	}

	/* Ausgeglichene Zeilen auch in den Überschriften der Übersichtsseiten und der Rechtstexte
	   („Stellenangebote in Ihrer / Nähe", „§ 3 Wer die Plattform nutzen / darf"). */
	.hp-listing-category__name,
	.header-hero h1,
	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung, .ink-widerruf) :is(h2, h3, h4) {
		text-wrap: balance;
	}

	/* In den Rechtstexten lief der enge Satz der Überschriften die Wortabstände zu („Profilund Einträge"). */
	:is(.agb_content, .ink-rechtstext, .ink-rechtstext-zusatz, .ink-belehrung, .ink-widerruf) :is(h2, h3, h4) {
		letter-spacing: 0;
		word-spacing: .04em;
	}

	/* „Vertrag widerrufen" in voller Breite wie die übrigen Hauptknöpfe (Kontakt, 404). */
	.ink-widerruf__knopf {
		width: 100%;
	}

	/* Anmelden, Registrieren, Passwort: dieselbe orange Pille wie die übrigen Formulare (Abschnitt 9, K3)
	   statt des eckigen Verlaufsbalkens unter runden Feldern; „Anmelden" war 50, „Registrieren" 40 px hoch. */
	:is(.hp-form--user-login, .hp-form--user-register, .hp-form--user-password-request, .hp-form--user-password-reset) .hp-form__button[type="submit"] {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 48px;
		padding: .75rem 1.5rem;
		font-family: var(--ink-font-body);
		font-size: var(--ink-text-base);
		font-weight: 600;
		line-height: 1.25;
		color: #fff;
		background: var(--ink-orange-500);
		background-image: none;
		border: 0;
		border-radius: var(--ink-radius-pill);
		box-shadow: var(--ink-shadow-glow);
	}

	:is(.hp-form--user-login, .hp-form--user-register, .hp-form--user-password-request, .hp-form--user-password-reset) .hp-form__button[type="submit"]:hover,
	:is(.hp-form--user-login, .hp-form--user-register, .hp-form--user-password-request, .hp-form--user-password-reset) .hp-form__button[type="submit"]:focus-visible {
		color: #fff;
		background: var(--ink-orange-600);
		background-image: none;
	}

	/* Native Auswahlfelder (Anliegen, Umkreis, Reihenfolge, Rechnungsdaten): derselbe Winkel wie die
	   select2-Felder, und der Text beginnt bündig mit dem der Textfelder (der Browser rückte ihn ein). */
	:is(.ink-kontakt__feld, .ink-alert__feld, .ink-standortwahl__werkzeuge, .ink-freischaltungen__werkzeuge, .ink-werkzeuge, .ink-rechnungsdaten__feld) select:not([multiple]) {
		-webkit-appearance: none;
		appearance: none;
		padding-right: 2.75rem;
		background: var(--ink-bg-elevated) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right .9rem center / 14px no-repeat;
	}

	/* „Sortieren nach": derselbe Winkel statt des select2-Dreiecks. */
	.hp-form--listing-sort .select2-container--default .select2-selection .select2-selection__arrow {
		width: 14px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767E8C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 14px no-repeat;
	}

	.hp-form--listing-sort .select2-container--default .select2-selection .select2-selection__arrow b {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   11. Tablets mit Touch (iPad hoch und quer, bis 1199 px)

   Ab 768 px gilt die Desktop-Ansicht. Auf dem iPad waren die Felder der
   Suchkarte darin nur 22 bis 24 px hoch – ein Tipp auf den Rand des
   Feldes öffnete nichts –, dazu 23 px hohe Verweise in den Kacheln und
   den Brotkrumen (Gerätetest 27.09.2026). Nur bei grober Zeigersteuerung
   (Finger); mit Maus bleibt der Desktop, wie er ist.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) and (max-width: 74.99em) {
	.ink-searchbar__field input,
	.ink-searchbar__field select {
		min-height: 2.75rem;
	}

	.ink-bento__link:not(.ink-bento__link--probe) {
		min-height: 2.75rem;
	}

	.ink-brotkrumen a {
		padding-block: .6rem;
		margin-block: -.6rem;
	}
}


/* --------------------------------------------------------------------------
   12. Start-Gutschein (02.10.2026, Inklusio_Gutschein)

   Feld und Knopf untereinander, der Knopf über die ganze Breite – wie in
   den übrigen Hinweiskästen. Die Knopfreihe der Einlöseseite trägt
   .ink-hinweiskasten__aktionen und folgt damit schon den Regeln oben.
   -------------------------------------------------------------------------- */

@media (max-width: 30em) {
	.ink-gutschein__formular .ink-btn,
	.ink-konto__gutschein .ink-btn {
		display: flex;
		flex: 1 1 100%;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		white-space: normal;
		text-align: center;
	}

	/* G-2 (19.10.2026): Feld auf der Kontoseite „Mitgliedschaft" – Feld und Knöpfe untereinander, Vorschau-Knöpfe je eine Zeile, kein Quer-Scroll. */
	.ink-konto__gutschein--feld .ink-gutschein__feld {
		flex: 1 1 100%;
	}

	.ink-konto__gutschein--feld .ink-gutschein__formular--vorschau .ink-btn {
		margin: 0;
	}

	/* Browserprobe 19.10.2026 (Fund): components.css setzt für den Knopf im Feld min-height 2.75rem mit höherer Spezifität (type=submit) – am Handy blieb er bei 45,6 px statt 48 px. */
	.ink-konto__gutschein--feld .ink-btn,
	.ink-konto__gutschein--feld .ink-btn--secondary,
	.ink-konto__gutschein--feld .ink-btn--secondary[type="submit"] {
		min-height: 48px;
	}
}


/* --------------------------------------------------------------------------
   13. Logos von Einrichtungen (Marc, 07.10.2026, Inklusio_Logobild)

   Unter 768 px stellt JobHive die Ergebniskarte als Spalte, der Kopf steht
   dann oben (margin-top -3rem, von components.css zurückgenommen). Das
   Logo-Feld 7 rem × 4 : 3 aus components.css gilt dort genauso – hier noch
   einmal, weil diese Datei zuletzt lädt und der Kopf sonst von JobHives
   flex-Basis 6.25rem abhinge. Der Anbieterkasten behält sein Feld von
   10 rem, höchstens 80 % der Seitenleiste (passt bei 320 px: 256 px
   Kastenbreite abzüglich Polster).

   Kontoübersicht auf dem Telefon: Das runde Bild der Fachkraft wird in
   components.css auf 56 px verkleinert; das Logo-Rechteck der Einrichtung
   folgt mit 56 px Höhe und bis 112 px Breite, Innenabstand 6 px.
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.hp-listing--view-block.ink-bild--logo .hp-listing__header {
		flex: 0 0 auto;
		width: 7rem;
		margin-top: 0;
	}

	.hp-listing--view-block.ink-bild--logo .hp-listing__image {
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 30em) {
	.ink-konto__bild--logo {
		width: auto;
		min-width: 56px;
		max-width: 112px;
		height: 56px;
		padding: 6px;
	}

	.ink-konto__bild--logo img,
	.ink-konto__bild--logo .ink-konto__foto {
		width: auto;
		max-width: 100%;
		height: 100%;
	}
}