/* ==========================================================================
   headof.jobs — Stylesheet
   Vom Handy her aufgebaut. Gelb nur als Punkt oder Kontur, nie als Flaeche.
   ========================================================================== */

/* Ein Mass fuer alles: Breitenangaben schliessen Innenabstand und Rand
   ein. Ohne das ragt jedes width:100%-Element mit Padding rechts hinaus -
   so entstand der abgeschnittene Bewerben-Kasten im Blatt. */
.hohj-buehne, .hohj-buehne *,
.hohj-blatt, .hohj-blatt *,
.hohj-liste, .hohj-liste *,
.hohj-leiste, .hohj-leiste *,
.hohj-rail, .hohj-rail *,
.hohj-deckel, .hohj-deckel *,
.hohj-scrim {
	box-sizing: border-box;
}

:root {
	--hohj-signal:    #FFDC0D;
	--hohj-seite:     #FFFFFF;
	--hohj-flaeche:   #C4C0BD;
	--hohj-linie:     #A49D99;
	--hohj-gedaempft: #7F7771;
	--hohj-tief:      #1C1B19;

	--hohj-schrift: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--hohj-rand:   16px;

	/* Der Abstand zwischen den Kacheln. EINE Zahl, die auch das Skript
	   liest - frueher standen hier drei verschiedene Werte (CSS-Luecke 20,
	   Kachel-Aussenabstand bis 28, Rechenwert im Skript 18). Das Raster
	   rechnete also mit 18 px, tatsaechlich waren es bis zu 48 - und dieser
	   Fehler summierte sich ueber hunderte Kacheln zu falschen Platzhaltern.
	   Genau das war das Zucken. */
	--hohj-luecke: 12px;

	/* Die angestrebte Spaltenbreite. Das Skript liest sie hier - eine
	   Zahl, ein Ort. Unter dieser Breite wird eine Spalte weggenommen,
	   darueber eine dazu. Damit gibt es weder Briefmarken noch Plakate.
	   Am Handy stehen zwei Spalten, sonst waere jede Kachel ein Streifen. */
	--hohj-zielbreite: 156px;

	/* Bindend: 12 px bei Feldern und Knoepfen, 16 px bei Karten.
	   Keine Kapselformen. Echte Kreise nur fuer Punkt und Logo. */
	--hohj-rundung: 16px;
	--hohj-ecke:    12px;
	--hohj-blatt-ecke: 16px;

	/* Die Detailansicht als Panel rechts. */
	--hohj-blatt-breite: clamp(400px, 40vw, 620px);
	--hohj-rechts: 0px;
}

@media (min-width: 620px) {
	:root {
		--hohj-rand: 20px;
		--hohj-luecke: clamp( 14px, 1.15vw, 24px );
		--hohj-zielbreite: clamp( 240px, 21vw, 340px );
	}
}

@media (min-width: 1000px) {
	:root { --hohj-rand: 26px; }
}

/* ==========================================================================
   Buehne — bricht aus der Theme-Spalte auf volle Breite
   ========================================================================== */

.hohj-buehne {
	width: auto;
	max-width: none !important;
	margin: 0 !important;
	/* Oben Luft, damit die Kacheln nicht an der Fensterkante kleben.
	   Unten so viel, dass die schwebende Werkzeugleiste keine Kachel
	   verdeckt - vorher waren es feste 80 px bei 76 px Leistenhoehe. */
	padding: 18px var(--hohj-rand) calc( var(--hohj-leiste) + 56px );
	font-family: var(--hohj-schrift);
}

@media (min-width: 620px) {
	.hohj-buehne { padding-top: 26px; }
}

.hohj-buehne > .hohj-titel,
.hohj-buehne > .hohj-filter,
.hohj-buehne > .hohj-leer,
.hohj-buehne > .hohj-blaettern {
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Kopf und Fuss des Themes treten auf unseren Seiten zurueck

   Der Theme-Fuss sass unter dem Feed ueber die volle Seitenbreite, lief
   damit unter der Werkzeugleiste durch und wusste nichts von Symbolleiste
   und Listenpanel. Unserer steht am Ende der Buehne.
   ========================================================================== */

.hohj-seite > .wp-site-blocks > footer.wp-block-template-part,
.hohj-seite .wp-site-blocks > footer,
.hohj-seite > .wp-site-blocks > header.wp-block-template-part,
.hohj-seite .wp-site-blocks > header,
.hohj-seite .wp-block-post-title,
.hohj-seite .entry-title {
	display: none !important;
}

/* Der Theme-Kopf ist weg - sein Abstand darf nicht stehenbleiben. */
.hohj-seite .wp-site-blocks {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.hohj-seite .wp-site-blocks > *,
.hohj-seite main,
.hohj-seite .wp-block-group,
.hohj-seite .wp-block-post-content,
.hohj-seite .entry-content {
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Die linke Belegung sitzt am Seitencontainer - kein Ausbruch ueber 100vw,
   damit die Breite des Rollbalkens keinen waagerechten Versatz erzeugt.
   Die Innenabstaende des Themes werden dabei abgeschaltet, sonst bleibt
   links und rechts ein Rest der zentrierten Spalte stehen. */
/* Der Platz fuer Symbolleiste und Panels haengt an der BUEHNE, nicht am
   Container des Themes. Vorher stand er hier - und sobald der Feed in
   einem anderen Container lag, etwa unter dem Deckel der Startseite,
   griff die Regel nicht mehr: die erste Spalte verschwand zur Haelfte
   unter der Symbolleiste. Die Buehne gehoert immer uns, der Container
   des Themes nicht. */
.hohj-seite .wp-site-blocks {
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.hohj-seite main,
.hohj-seite .wp-block-post-content,
.hohj-seite .wp-block-group,
.hohj-seite .entry-content,
.hohj-seite .wp-block-template-part {
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Der Feed selbst bestimmt seinen Rand, sonst niemand. */
.hohj-seite .hohj-buehne {
	padding-left: calc( var(--hohj-links) + var(--hohj-rand) ) !important;
	padding-right: calc( var(--hohj-rechts) + var(--hohj-rand) ) !important;
	transition: padding-left .22s ease, padding-right .22s ease;
}

.hohj-seite,
html:has(body.hohj-seite) {
	overflow-x: hidden;
}

.hohj-seite .wp-site-blocks > * + * { margin-block-start: 0 !important; }

/* ==========================================================================
   Bedienung — Seitenleiste links, Werkzeugleiste unten
   Klare Flaechen: Weiss aussen, Bone in den Feldern, kein Durchscheinen.
   ========================================================================== */

:root {
	--hohj-links:   68px;
	--hohj-rail:    68px;
	--hohj-leiste:  76px;
	--hohj-feld-bg: #EDECEA;
}

.hohj-seite { background: #fff; }

/* ---------- Seitenleiste ---------- */

.hohj-rail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 60;
	width: var(--hohj-rail);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 0;
	background: #fff;
	border-right: 1px solid rgba(28, 27, 25, .09);
}

.hohj-rail__knopf {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--hohj-ecke);
	background: none;
	color: var(--hohj-gedaempft);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.hohj-rail__knopf:hover { background: rgba(28, 27, 25, .06); color: var(--hohj-tief); }
.hohj-rail__knopf--aktiv { background: rgba(28, 27, 25, .08); color: var(--hohj-tief); }
.hohj-rail__knopf[hidden] { display: none; }
.hohj-rail__knopf[aria-expanded="true"] { background: var(--hohj-tief); color: #fff; }

.hohj-rail__zahl {
	position: absolute;
	top: 5px;
	right: 5px;
	font-family: var(--hohj-schrift);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	color: var(--hohj-tief);
	background: var(--hohj-signal);
	border-radius: 50%;
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- Werkzeugleiste unten ---------- */

.hohj-leiste {
	position: fixed;
	left: var(--hohj-rail);
	right: 0;
	bottom: 0;
	z-index: 55;
	height: var(--hohj-leiste);
	background: #fff;
	border-top: 1px solid rgba(28, 27, 25, .09);
}

.hohj-leiste__innen {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Das Logo. */
.hohj-logo {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--hohj-signal);
	text-decoration: none;
	border: 0;
	transition: transform .15s ease;
}

.hohj-logo:hover { transform: scale(1.06); }

/* ---------- Suche: zwei klare Felder ---------- */

.hohj-suche {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.hohj-feld {
	display: flex;
	align-items: center;
	flex: 1 1 60%;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	background: var(--hohj-feld-bg);
	border: 1px solid transparent;
	border-radius: var(--hohj-ecke);
	transition: background .15s ease, border-color .15s ease;
}

.hohj-feld--wo { flex: 1 1 40%; }

.hohj-feld:hover { background: #E6E4E2; }

.hohj-feld:focus-within {
	background: #fff;
	border-color: rgba(28, 27, 25, .3);
}

.hohj-feld__lupe {
	flex: 0 0 auto;
	display: inline-flex;
	color: #6B6660;
	margin-right: 10px;
}

.hohj-feld input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
	font-family: var(--hohj-schrift);
	font-size: 15px;
	color: var(--hohj-tief);
	line-height: 1.3;
	appearance: none;
	height: 100%;
}

.hohj-feld input::placeholder { color: #6B6660; opacity: 1; }
.hohj-feld input:focus { outline: none; box-shadow: none; }
.hohj-feld input::-webkit-search-cancel-button { display: none; }

.hohj-suchknopf {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--hohj-ecke);
	background: var(--hohj-tief);
	color: #fff;
	font-family: var(--hohj-schrift);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease;
}

.hohj-suchknopf:hover { background: #3A3835; }

/* ---------- Liste: Panel links, das Raster rueckt zusammen ---------- */

:root { --hohj-liste-breite: clamp(280px, 20vw, 400px); }

.hohj-liste {
	position: fixed;
	top: 0;
	left: var(--hohj-rail);
	bottom: var(--hohj-leiste);
	z-index: 54;
	width: var(--hohj-liste-breite);
	background: #fff;
	border-right: 1px solid rgba(28, 27, 25, .09);
	display: flex;
	flex-direction: column;
}

.hohj-liste[hidden] { display: none; }

.hohj-liste__innen {
	width: 100%;
	padding: 0 16px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hohj-liste__kopf {
	position: sticky;
	top: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(28, 27, 25, .07);
}

/* Normalschreibung. Gesperrte Versalien sind Redaktionsoptik und in den
   Gestaltungsregeln ausgeschlossen - Hierarchie kommt aus Groesse,
   Gewicht und Farbe. */
.hohj-liste__titel {
	font-family: var(--hohj-schrift);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--hohj-gedaempft);
}

.hohj-liste__zu {
	border: 0;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--hohj-gedaempft);
	cursor: pointer;
	padding: 0 2px;
}

.hohj-liste__eintraege { list-style: none; margin: 0; padding: 0; }

.hohj-liste__zeile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	text-decoration: none;
	color: var(--hohj-tief);
	border-radius: var(--hohj-ecke);
	border-bottom: 1px solid rgba(28, 27, 25, .06);
	transition: background .12s ease;
}

.hohj-liste__zeile:hover { background: rgba(28, 27, 25, .04); }

.hohj-liste__wort { min-width: 0; flex: 1 1 auto; }

.hohj-liste__name {
	display: block;
	font-family: var(--hohj-schrift);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: auto;
}

.hohj-liste__meta {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: -.005em;
	color: var(--hohj-gedaempft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dezent: das Bild erscheint erst beim Ueberfahren. */
.hohj-liste__bild {
	flex: 0 0 auto;
	width: 0;
	height: 44px;
	object-fit: cover;
	border-radius: 5px;
	opacity: 0;
	transition: width .2s ease, opacity .2s ease;
}

.hohj-liste__zeile:hover .hohj-liste__bild { width: 44px; opacity: 1; }

/* Die zugehoerige Kachel bekommt einen feinen Rahmen. */
/* Anvisieren aus der Liste.

   Kein Rahmen, keine Farbe: die anderen Kacheln treten zurueck, die
   gesuchte bleibt stehen und nimmt sich einen Hauch zurueck, damit Luft um
   sie herum entsteht. Zwei verschieden lange Kurven - das Abdunkeln laeuft
   schneller als der Rueckzug, dadurch wirkt die Bewegung geordnet statt
   gleichzeitig. */
.hohj-kachel__bildbox {
	transition: transform .42s cubic-bezier(.16,1,.3,1);
	will-change: transform;
}

.hohj-kachel {
	transition: opacity .3s cubic-bezier(.33,1,.68,1);
}

/* Die anderen treten zurueck, solange etwas anvisiert wird. */
.hohj-zielt .hohj-kachel {
	opacity: .28;
}

.hohj-zielt .hohj-kachel--zeigen {
	opacity: 1;
	transition-duration: .18s;
}

.hohj-kachel--zeigen .hohj-kachel__bildbox {
	transform: scale(.968);
}

@media (prefers-reduced-motion: reduce) {
	.hohj-kachel__bildbox { transition: none; }
	.hohj-kachel--zeigen .hohj-kachel__bildbox { transform: none; }
}

/* Ist die Liste offen, waechst die linke Belegung - die Flaeche rueckt nach.
   Die Spaltenzahl regelt sich ueber die Container-Messung von selbst. */
body.hohj-liste-offen {
	--hohj-links: calc( var(--hohj-rail) + var(--hohj-liste-breite) );
}

/* ---------- Raum fuer Rail und Leiste ---------- */

.hohj-buehne { padding-bottom: calc(var(--hohj-leiste) + 40px); }

/* Rail, Liste und Leiste stehen als Geschwister im Theme-Inhalt (seit die
   Bedienung aus der Buehne herausgeloest wurde). Das Theme legt seinen
   Spaltenrahmen auf JEDES direkte Kind - dadurch wurde die Leiste auf
   Spaltenbreite gestutzt und mittig gesetzt, und der Absatzabstand schob
   die Liste vom oberen Rand weg (bei fest sitzenden Elementen verschiebt
   ein Rand die Position). Beides hier abgeraeumt. */
.hohj-seite .hohj-rail,
.hohj-seite .hohj-liste,
.hohj-seite .hohj-leiste {
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	float: none !important;
}

/* ---------- Eingeloggt: die WordPress-Leiste schiebt alles 32 px tiefer.
   Unsere Overlays ruecken mit, sonst blitzen oben Karten durch. ---------- */

/* Ab 620 teilt sich die Flaeche in drei feste Zonen: die Rail ganz links
   ueber die volle Hoehe, daneben - wenn offen - die Liste ebenfalls ueber
   die volle Hoehe, und die Werkzeugleiste unten genau im freien Rest.
   Sie beginnt also hinter der Liste und endet vor dem Detail-Panel. */
@media (min-width: 620px) {
	.hohj-rail   { bottom: 0; }
	.hohj-liste  { bottom: 0; }
	.hohj-leiste {
		left: var(--hohj-links);
		right: var(--hohj-rechts);
		transition: left .22s ease, right .22s ease;
	}
}

body.admin-bar .hohj-liste,
body.admin-bar .hohj-scrim { top: 32px; }

@media (min-width: 620px) {
	body.admin-bar .hohj-rail { top: 32px; }
}

@media (min-width: 1000px) {
	body.admin-bar .hohj-blatt { top: 32px; }
}

@media (max-width: 782px) {
	body.admin-bar .hohj-liste,
	body.admin-bar .hohj-scrim { top: 46px; }
}

/* Ist Liste oder Blatt unterhalb von 1000 px offen, darf auch die
   Wurzel nicht mehr rollen - sonst steht rechts ein zweiter Balken
   und der Inhalt schiebt sich hinter den Overlays hoch. */
@media (max-width: 999px) {
	html:has(body.hohj-liste-offen),
	html:has(body.hohj-blatt-offen) { overflow: hidden; }
}

/* Scroll-Sperre gehoert aufs html - body allein laesst Chromium den
   Seiten-Rollbalken stehen. Das Skript spiegelt die Zustandsklassen
   auf das html-Element. */
@media (max-width: 619px) {
	html.hohj-liste-offen { overflow: hidden; }
}
@media (max-width: 999px) {
	html.hohj-blatt-offen { overflow: hidden; }
}

/* Eingeloggt schiebt die WordPress-Adminleiste alles nach unten -
   ohne Versatz ueberdeckt sie die Koepfe von Liste und Blatt. */
:root { --hohj-adminbar: 0px; }
body.admin-bar { --hohj-adminbar: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --hohj-adminbar: 46px; }
}
body.admin-bar .hohj-liste { top: var(--hohj-adminbar); }
body.admin-bar .hohj-scrim { top: var(--hohj-adminbar); }
@media (min-width: 620px) {
	body.admin-bar .hohj-rail { top: var(--hohj-adminbar); }
}
@media (min-width: 1000px) {
	body.admin-bar .hohj-blatt { top: var(--hohj-adminbar); }
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 619px) {
	:root { --hohj-links: 0px; --hohj-rail: 0px; --hohj-leiste: 128px; }

	.hohj-rail {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 60px;
		flex-direction: row;
		justify-content: space-around;
		padding: 0;
		border-right: 0;
		border-top: 1px solid rgba(28, 27, 25, .09);
		z-index: 56;
	}

	.hohj-leiste {
		left: 0;
		bottom: 60px;
		height: 68px;
	}

	.hohj-leiste__innen { padding: 0 14px; gap: 10px; }
	.hohj-logo { width: 32px; height: 32px; }
	.hohj-feld { height: 42px; padding: 0 12px; }
	.hohj-feld input { font-size: 14.5px; }
	.hohj-suchknopf { padding: 0; width: 44px; height: 42px; font-size: 0; }
	.hohj-suchknopf::after { content: '→'; font-size: 17px; }
}

/* Der Vertrag im Ganzen:
   unter 620   Rail unten, Leiste darueber, Liste vollflaechig,
               Blatt von unten UEBER der Liste (Schleier)
   620 - 999   Rail links, Leiste unten, Liste als Panel links,
               Raster daneben (notfalls ein einzelner Kachelstreifen),
               Blatt von unten
   ab 1000     Liste als Panel links, Blatt als Panel rechts, beide
               gleichzeitig moeglich - das Raster dazwischen wird zum
               Kachelstreifen. Die Spaltenzahl folgt ueberall der
               Container-Messung. */
@media (max-width: 619px) {
	.hohj-liste {
		top: 0;
		left: var(--hohj-rail);
		right: 0;
		bottom: var(--hohj-leiste);
		width: auto;
		border-right: 0;
	}
	.hohj-liste__innen { padding: 0 16px 20px; }

	body.hohj-liste-offen { --hohj-links: var(--hohj-rail); }
	body.hohj-liste-offen { overflow: hidden; }
}

@media (max-width: 560px) {
	.hohj-feld--wo { display: none; }
}

/* ==========================================================================
   Ueberschrift und Filter
   ========================================================================== */

.hohj-titel {
	font-family: var(--hohj-schrift);
	font-size: 26px;
	line-height: 1.08;
	color: var(--hohj-tief);
	margin: 12px 0 12px;
}

.hohj-titel__leicht { font-weight: 300; display: block; }
.hohj-titel__fett   { font-weight: 700; display: block; }

@media (min-width: 620px) {
	.hohj-titel { font-size: 34px; margin: 14px 0 14px; }
}

@media (min-width: 1000px) {
	.hohj-titel { font-size: 46px; margin: 18px 0 18px; }
}

.hohj-filter {
	display: flex;
	gap: 18px;
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--hohj-gedaempft);
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

.hohj-filter::-webkit-scrollbar { display: none; }

.hohj-filter a {
	color: var(--hohj-gedaempft);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1.5px solid transparent;
	white-space: nowrap;
}

.hohj-filter a:hover { color: var(--hohj-tief); }

.hohj-filter a[aria-current] {
	color: var(--hohj-tief);
	border-bottom-color: var(--hohj-tief);
}

.hohj-filter__zahl { color: var(--hohj-linie); margin-left: 5px; }

.hohj-filter--zweite { margin-top: -14px; font-size: 13px; opacity: .85; }

@media (min-width: 620px) {
	.hohj-filter { gap: 24px; font-size: 14.5px; margin-bottom: 26px; }
	.hohj-filter--zweite { margin-top: -20px; }
}

/* ==========================================================================
   Feed — eine Regel statt Zustandstabellen

   Wunsch-Kartenbreite 232 px (laesst dem Rollbalken Platz). Der Browser fuellt die verfuegbare Flaeche
   selbst mit so vielen ~240er-Spalten, wie hineinpassen (column-width).
   Offene Panels verschmaelern die Flaeche - die Spaltenzahl sinkt von
   allein, bis notfalls ein einzelner Kachelstreifen bleibt. Nichts wird
   gezaehlt, nichts kann kippen.

   Zwei Deckel: hoechstens 5 Spalten, keine Karte breiter als 560 px.
   Eine Ausnahme: Handy unter 620 px fest zweispaltig (bindend). */

.hohj-feed,
ul.job_listings {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--hohj-schrift);

	/* Rueckfall ohne JavaScript: CSS-Spalten, aber mit derselben Zahl. */
	columns: 5 var(--hohj-zielbreite);
	column-gap: var(--hohj-luecke);
}

@media (max-width: 619px) {
	.hohj-feed, ul.job_listings { columns: 2 auto; column-gap: var(--hohj-luecke); }
}

/* Sobald das Raster steht, echte Spalten nebeneinander. */
.hohj-feed[data-hohj-spalten] {
	columns: auto;
	display: flex;
	align-items: flex-start;
	gap: var(--hohj-luecke);
}

/* Keine Scroll-Verankerung im Raster.
   Der Browser verschiebt die Ansicht sonst von sich aus, sobald oberhalb
   des Sichtfelds Kacheln ein- oder ausgehaengt werden - er will damit
   eigentlich helfen. Beim Anspringen aus der Liste fuehrte genau das zum
   Nachpegeln: erst zu weit, dann zurueck. Hier rechnen wir die Lage selbst
   aus, also uebernehmen wir sie auch ganz. */
.hohj-feed[data-hohj-spalten],
.hohj-spalte,
.hohj-spalte__innen,
.hohj-spalte__innen > *,
.hohj-fuell,
.hohj-buehne,
.hohj-blatt-flaeche,
.hohj-marke,
.hohj-blaettern,
.hohj-fuss {
	overflow-anchor: none;
}

.hohj-spalte {
	flex: 1 1 0;
	min-width: 0;
}

.hohj-spalte__innen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Frueher stand hier content-visibility: auto - das ueberspringt Layout
   UND Bildladen fuer alles ausserhalb des Sichtfelds. Genau deshalb kamen
   die Kacheln grau ins Bild und wurden erst danach zum Foto. Seit das
   Recycling nur noch ein knappes Fenster im Dokument haelt, ist das
   Ueberspringen ohnehin ueberfluessig: was im Dokument steht, soll auch
   sofort laden. */

.hohj-kachel { max-width: 560px; margin-left: auto; margin-right: auto; }

/* Das Bild belegt seinen Platz, bevor es geladen ist - kein Nachrutschen. */
.hohj-kachel__bildbox { aspect-ratio: var(--hohj-vh, 4 / 5); }

.hohj-kachel {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	list-style: none;
	margin: 0 0 var(--hohj-luecke);
	padding: 0;
	border: 0;
}

/* ==========================================================================
   Kachel — Bildsprache der Instagram-Karten
   ========================================================================== */

/* ==========================================================================
   Die Kachel bemisst sich an sich selbst
   ==========================================================================
   Bis hierher standen Titel, Pillen und Abstaende auf festen Pixelwerten
   und sprangen an drei Haltepunkten. Eine Spalte von 232 px und eine von
   340 px bekamen denselben 30-px-Titel: die schmale wirkte ueberladen,
   die breite leer.

   Jetzt ist die Bildbox der Bezugsrahmen, und jede Groesse darin rechnet
   in cqi - einem Prozent ihrer eigenen Breite. Damit stimmt das
   Verhaeltnis bei jeder Spaltenzahl, jeder Fensterbreite und in jedem
   Panelzustand, ohne einen einzigen Haltepunkt. Die Grenzen in clamp()
   sind nur Notbremsen nach unten und oben, keine Gestaltung.
   ========================================================================== */

.hohj-kachel__bildbox {
	container-type: inline-size;
	container-name: hohj-kachel;

	position: relative;
	display: block;
	overflow: hidden;
	border-radius: clamp( 12px, 6cqi, 30px );
	background: var(--hohj-flaeche);
}

.hohj-kachel__link { display: block; text-decoration: none; color: inherit; }
.hohj-kachel__link:focus { outline: none; box-shadow: none; }

.hohj-kachel__link:focus-visible {
	outline: 1.5px solid var(--hohj-signal);
	outline-offset: 4px;
}

.hohj-kachel__bild {
	display: block;
	width: 100%;
	/* Die Hoehe gibt die Box vor (aspect-ratio aus der Vorlage), nicht das
	   Bild - sonst rutscht das Raster, sobald ein Bild fertig geladen ist. */
	height: 100%;
	object-fit: cover;
	background: var(--hohj-flaeche);
	transition: transform .5s cubic-bezier(.2,.7,.3,1);
}

.hohj-kachel__bild--leer { aspect-ratio: 3 / 4; }

.hohj-kachel__schleier {
	position: absolute;
	inset: 0;
	/* Nur so viel Verlauf, wie die Schrift zum Lesen braucht - und er
	   endet auf halber Hoehe. Vorher lag ein zweiter Verlauf auch oben,
	   das Foto war an keiner Stelle mehr es selbst. */
	/* Muss auf JEDEM Bild tragen, nicht auf den meisten. Auf hellen
	   Motiven - Pool, Fensterfront, Schnee - stand die weisse Schrift
	   vorher auf hellem Grund. */
	background: linear-gradient(
		to top,
		rgba( 16, 15, 14, .90 ) 0%,
		rgba( 16, 15, 14, .66 ) 18%,
		rgba( 16, 15, 14, .28 ) 40%,
		rgba( 16, 15, 14, 0 ) 66%
	);
	pointer-events: none;
}

/* Rubrik oben rechts — gelbe Kontur, wie auf den Instagram-Karten. */
.hohj-rubrik {
	position: absolute;
	top: clamp( 9px, 6cqi, 24px );
	right: clamp( 9px, 6cqi, 24px );
	font-size: clamp( 9.5px, 4.6cqi, 15px );
	font-weight: 500;
	line-height: 1;
	color: #fff;
	border: 1px solid var(--hohj-signal);
	border-radius: clamp( 8px, 4.6cqi, 14px );
	padding: clamp( 4px, 2.4cqi, 8px ) clamp( 8px, 5.2cqi, 17px );
}

.hohj-kachel__text {
	position: absolute;
	left: clamp( 11px, 7.6cqi, 30px );
	right: clamp( 11px, 7.6cqi, 30px );
	bottom: clamp( 11px, 7.6cqi, 30px );
	display: block;
	color: #fff;
}

.hohj-kachel__merkmal {
	display: block;
	margin-bottom: clamp( 6px, 4.3cqi, 14px );
	font-size: clamp( 9.5px, 4.6cqi, 15px );
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
}

.hohj-kachel__merkmal::before {
	content: '';
	display: inline-block;
	width: clamp( 4px, 2.1cqi, 8px );
	height: clamp( 4px, 2.1cqi, 8px );
	border-radius: 50%;
	background: var(--hohj-signal);
	margin-right: clamp( 5px, 3.4cqi, 11px );
	vertical-align: 1px;
}

.hohj-kachel__titel { display: block; }

.hohj-titelzeile {
	display: block;
	font-family: var(--hohj-schrift);

	/* 12,4 % der Kachelbreite. Bei 232 px sind das die 28,8 px, die hier
	   vorher fest standen - der Charakter bleibt, nur rechnet er jetzt
	   mit. */
	/* Von 12,4 auf 9,2 Prozent der Kachelbreite. Der Titel war lauter
	   als das Bild - jetzt steht er darauf, statt es zu ersetzen. */
	font-size: clamp( 13px, 9.2cqi, 34px );
	line-height: 1.08;
	letter-spacing: -.022em;
	/* Keine automatische Trennung: aus "Veranstaltungsservice" wurde
	   "Veranstaltungsser-vice". Bei Berufsbezeichnungen ist das nie
	   richtig - lieber ein langes Wort, das umbricht. */
	overflow-wrap: break-word;
	hyphens: manual;
}

.hohj-titelzeile--leicht { font-weight: 400; }
.hohj-titelzeile--fett   { font-weight: 700; }

.hohj-strich {
	display: block;
	width: 56%;
	height: 1px;
	background: rgba(255,255,255,.5);
	margin: clamp( 8px, 6cqi, 20px ) 0 clamp( 7px, 5.2cqi, 17px );
}

/* Eine Zeile, keine Pillen. Ort zuerst - das Produkt heisst, wo
   gearbeitet wird. */
.hohj-kachel__meta {
	display: block;
	margin-top: clamp( 4px, 2.8cqi, 10px );
	font-size: clamp( 9.5px, 4.3cqi, 14px );
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .002em;
	color: rgba( 255, 255, 255, .90 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hohj-pillen { display: flex; flex-wrap: wrap; gap: clamp( 4px, 2.6cqi, 9px ); }

.hohj-pille {
	font-size: clamp( 9.5px, 4.8cqi, 15px );
	font-weight: 500;
	line-height: 1;
	color: #fff;
	border: 1px solid rgba(255,255,255,.72);
	border-radius: clamp( 8px, 4.6cqi, 14px );
	padding: clamp( 4px, 2.4cqi, 8px ) clamp( 8px, 5.2cqi, 17px );
	white-space: nowrap;
}

.hohj-punkt {
	position: absolute;
	right: clamp( 10px, 6.9cqi, 27px );
	bottom: clamp( 10px, 6.9cqi, 27px );
	width: clamp( 7px, 3.8cqi, 14px );
	height: clamp( 7px, 3.8cqi, 14px );
	border-radius: 50%;
	background: var(--hohj-signal);
}

/* Kleinformat am Handy - dort stehen zwei schmale Spalten. Die
   Kachelstreifen neben offenen Panels behalten die volle Groesse. */
/* Die beiden Haltepunkte, die hier standen, sind ersatzlos weg. Sie
   haben am Bildschirm gemessen, was an der Kachel zu messen war. */

@media (hover: hover) {
	.hohj-kachel__bildbox:hover .hohj-kachel__bild { transform: scale(1.035); }
}

.hohj-kachel--laedt .hohj-kachel__bildbox { opacity: .5; transition: opacity .12s ease; }

/* ==========================================================================
   Merken und Teilen
   ========================================================================== */

.hohj-aktionen {
	position: absolute;
	top: 56px;
	right: 14px;
	display: flex;
	gap: 6px;
	opacity: 0;
	transition: opacity .18s ease;
	z-index: 2;

	/* Unsichtbar heisst auch unantastbar. Ohne das fingen die
	   durchsichtigen Knoepfe weiterhin Klicks ab - auf kleinen Kacheln
	   sassen sie mitten im Bild, und ein Tippen auf die Kachel loeste
	   "Merken" aus, statt die Stelle zu oeffnen. */
	pointer-events: none;
}

@media (hover: none) {
	.hohj-aktionen { opacity: 1; pointer-events: auto; }
}

.hohj-kachel__bildbox:hover .hohj-aktionen,
.hohj-kachel--gemerkt .hohj-aktionen,
.hohj-aktionen:focus-within {
	opacity: 1;
	pointer-events: auto;
}

.hohj-aktion {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--hohj-ecke);
	background: rgba(16,15,14,.5);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: background .15s ease;
}

.hohj-aktion:hover { background: rgba(16,15,14,.68); }

.hohj-aktion--merken[aria-pressed="true"] {
	background: #fff;
	color: var(--hohj-tief);
}

.hohj-aktion--merken[aria-pressed="true"] svg { fill: currentColor; }
.hohj-aktion--kopiert { background: #fff !important; color: var(--hohj-tief) !important; }

@media (min-width: 1000px) {
	.hohj-aktionen { top: 58px; right: 14px; }
	.hohj-aktion { width: 36px; height: 36px; }
}

.hohj-gemerkt-an .hohj-filter { display: none; }

/* ==========================================================================
   Blaettern und Leerzustand
   ========================================================================== */

.hohj-blaettern {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	font-family: var(--hohj-schrift);
}

.hohj-blaettern[hidden] { display: none; }

/* Ein einziger Weiterweg, keine Seitenzahlen. Sichtbar nur ohne
   JavaScript - sonst blendet das Skript die Zeile sofort aus. */
.hohj-weiter {
	font-size: 14.5px;
	color: var(--hohj-gedaempft);
	text-decoration: none;
	border: 1px solid rgba(28, 27, 25, .14);
	border-radius: var(--hohj-ecke);
	padding: 12px 22px;
}

.hohj-weiter:hover {
	color: var(--hohj-tief);
	border-color: var(--hohj-tief);
}

.hohj-leer {
	font-size: 15px;
	color: var(--hohj-gedaempft);
	padding: 50px 0;
	list-style: none;
}

.hohj-leer a {
	color: var(--hohj-tief);
	text-decoration: none;
	border-bottom: 1.5px solid var(--hohj-tief);
	padding-bottom: 2px;
}

/* ==========================================================================
   Detailansicht — rechts als Panel, am Handy als Blatt von unten

   Dieselbe Mechanik wie das Listen-Panel links, nur gespiegelt: die Flaeche
   rueckt nach, das Raster verliert eine Spalte, der Feed bleibt sichtbar und
   bedienbar. Kein Schleier darueber. Die Klassennamen bleiben hohj-blatt*,
   der Bau darunter ist derselbe geblieben.
   ========================================================================== */

.hohj-scrim {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(28, 27, 25, .55);
	opacity: 0;
	transition: opacity .16s ease;
}

.hohj-blatt {
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: var(--hohj-blatt-breite);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-left: 1px solid rgba(28, 27, 25, .12);
	box-shadow: -18px 0 60px rgba(28, 27, 25, .10);
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .16s ease, transform .22s cubic-bezier(.2,.7,.3,1);
	font-family: var(--hohj-schrift);
}

.hohj-scrim[hidden],
.hohj-blatt[hidden] { display: none; }

.hohj-blatt-offen .hohj-blatt { opacity: 1; transform: translateX(0); }

/* Grosser Bildschirm: kein Schleier, die Flaeche macht Platz. */
@media (min-width: 1000px) {
	.hohj-scrim { display: none; }
	body.hohj-blatt-offen { --hohj-rechts: var(--hohj-blatt-breite); }
}

/* Handy und Tablet hochkant: das Blatt von unten, mit Schleier. */
@media (max-width: 999px) {
	.hohj-blatt {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: 92vh;
		border-left: 0;
		border-radius: var(--hohj-blatt-ecke) var(--hohj-blatt-ecke) 0 0;
		transform: translateY(100%);
		box-shadow: 0 -12px 60px rgba(28, 27, 25, .24);
	}
	.hohj-blatt-offen .hohj-blatt { transform: translateY(0); }

	/* Der Schleier haengt nicht mehr allein am hidden-Attribut aus dem
	   Skript: ist das Blatt offen, steht er - immer. */
	.hohj-blatt-offen .hohj-scrim { display: block; opacity: 1; }
	body.hohj-blatt-offen { overflow: hidden; }
}

/* Im Panel traegt das Foto bis an die Kante. */
.hohj-blatt .hohj-buehne {
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.hohj-scrim, .hohj-blatt, .hohj-kachel__bild { transition: none; }
}

/* ==========================================================================
   Die Stelle — das Foto traegt alles, wie auf der Karte im Feed

   Kein Nebeneinander von Bild und Text mehr. Rubrik als Kontur, Merkmal mit
   Punkt, Titel zweizeilig, Angaben als Pillen - alles auf dem Bild. Darunter
   auf Weiss der ruhige Teil und genau ein Hauptknopf.
   ========================================================================== */

.hohj-stelle { max-width: 760px; margin: 0 auto; }

.hohj-blatt .hohj-stelle { max-width: none; }

/* ---------- Das Foto ---------- */

.hohj-stelle__bild {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--hohj-flaeche);
	border-radius: var(--hohj-rundung);
}

.hohj-blatt .hohj-stelle__bild { border-radius: 0; }

.hohj-stelle__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	max-height: 52vh;
}

/* Das Foto darf den Hauptknopf nicht unter die Kante druecken -
   wer sich bewerben will, soll dafuer nicht scrollen muessen. */
@media (min-width: 1000px) {
	.hohj-stelle__foto { max-height: 46vh; }
}

.hohj-stelle__foto--leer { aspect-ratio: 4 / 5; }

/* Unten fuer die Angaben, oben fuer Kreuz und Rubrik. */
.hohj-stelle__schleier {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient( to top, rgba(16,15,14,.86) 0%, rgba(16,15,14,.52) 34%, rgba(16,15,14,.06) 66%, rgba(16,15,14,0) 100% ),
		linear-gradient( to bottom, rgba(16,15,14,.50) 0%, rgba(16,15,14,.14) 18%, rgba(16,15,14,0) 32% );
}

/* Das Kreuz gehoert nur ins Panel - die ganze Seite hat nichts zu schliessen. */
.hohj-stelle__zu { display: none; }

.hohj-blatt .hohj-stelle__zu {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: var(--hohj-ecke);
	background: none;
	color: #fff;
	font-family: var(--hohj-schrift);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	text-shadow: 0 1px 10px rgba(0,0,0,.55);
}

.hohj-blatt .hohj-stelle__zu:hover { background: rgba(255,255,255,.14); }

.hohj-stelle__auf {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	color: #fff;
}

.hohj-stelle__titel {
	margin: 0;
	font-family: var(--hohj-schrift);
	color: #fff;
	overflow-wrap: break-word;
	hyphens: auto;
}

.hohj-stelle__auf .hohj-titelzeile { font-size: 34px; }

@media (max-width: 619px) {
	.hohj-stelle__auf { left: 16px; right: 16px; bottom: 16px; }
	.hohj-stelle__auf .hohj-titelzeile { font-size: 26px; }
}

.hohj-stelle__mdw {
	font-size: 13px;
	font-weight: 400;
	color: rgba(255,255,255,.8);
	margin-left: 10px;
	white-space: nowrap;
}

/* Auf dem grossen Foto ist Platz fuer die vorgeschriebenen Groessen.
   Die Karte im Feed bleibt davon unberuehrt. */
.hohj-stelle__bild .hohj-rubrik { font-size: 12.5px; padding: 5px 12px; }
.hohj-stelle__auf .hohj-kachel__merkmal { font-size: 12.5px; }
.hohj-stelle__auf .hohj-pille { font-size: 12.5px; padding: 5px 12px; }

/* ---------- Der ruhige Teil auf Weiss ---------- */

.hohj-stelle__inhalt { padding: 26px; }

@media (min-width: 1000px) {
	.hohj-stelle__inhalt { padding: 28px 30px 40px; }
}

.hohj-stelle__text {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--hohj-tief);
	margin: 0 0 22px;
	max-width: 54ch;
}

.hohj-merkmale {
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.hohj-merkmale li {
	font-size: 14px;
	color: var(--hohj-tief);
}

.hohj-merkmale li::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hohj-signal);
	margin-right: 10px;
	vertical-align: 2px;
}

.hohj-detaillink { margin: 0 0 26px; font-size: 13.5px; }

.hohj-detaillink a {
	color: var(--hohj-tief);
	text-decoration: none;
	border-bottom: 1.5px solid var(--hohj-tief);
	padding-bottom: 1px;
}

.hohj-detaillink a:hover { border-bottom-color: var(--hohj-linie); }

/* ---------- Ein Hauptknopf, die anderen Wege leise darunter ---------- */

.hohj-haupt {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--hohj-schrift);
	border: 1px solid var(--hohj-tief);
	border-radius: var(--hohj-ecke);
	background: var(--hohj-tief);
	color: #fff;
	padding: 15px 20px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease;
}

.hohj-haupt:hover { opacity: .88; }

.hohj-haupt__text {
	display: block;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
}

.hohj-haupt__hinweis {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	margin-top: 3px;
	color: rgba(255,255,255,.72);
}

.hohj-wege {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--hohj-gedaempft);
}

.hohj-wege a {
	color: var(--hohj-tief);
	text-decoration: none;
	border-bottom: 1px solid var(--hohj-linie);
	padding-bottom: 1px;
}

.hohj-wege a:hover { border-bottom-color: var(--hohj-tief); }
.hohj-wege .hohj-trenn { margin: 0 7px; color: var(--hohj-linie); }

.hohj-leer {
	font-size: 13.5px;
	color: var(--hohj-gedaempft);
	margin: 0;
}

.hohj-stelle__beschreibung {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(28, 27, 25, .10);
	font-size: 15px;
	line-height: 1.65;
	color: var(--hohj-tief);
	max-width: 54ch;
}

.hohj-zurueck { margin: 26px 0 0; font-size: 13px; }
.hohj-zurueck a { color: var(--hohj-gedaempft); text-decoration: none; }
.hohj-zurueck a:hover { color: var(--hohj-tief); }

/* ==========================================================================
   Fokus — kein schwarzer Rahmen beim Klicken
   ========================================================================== */

.hohj-buehne a:focus,
.hohj-blatt a:focus,
.hohj-buehne button:focus,
.hohj-blatt button:focus,
.hohj-kopf a:focus,
.hohj-kopf button:focus {
	outline: none;
	box-shadow: none;
}

.hohj-buehne a:focus-visible,
.hohj-blatt a:focus-visible,
.hohj-buehne button:focus-visible,
.hohj-blatt button:focus-visible,
.hohj-kopf a:focus-visible,
.hohj-kopf button:focus-visible {
	outline: 2px solid var(--hohj-signal);
	outline-offset: 2px;
}

/* ==========================================================================
   Reste von WP Job Manager, die im Frontend nichts zu suchen haben
   ========================================================================== */

.job_filters,
.search_jobs,
.job_types,
.showing_jobs,
.job-manager-pagination,
a.job_filters_rss,
.load_more_jobs {
	display: none !important;
}

/* ==========================================================================
   Kurzbewerbung — "In 60 Sekunden bewerben"
   Fuenf Felder, per Mail ueber CF7, nichts gespeichert.
   Regeln: Figtree, 12 px Ecken, Bone-Felder, kein Gelb als Flaeche.
   ========================================================================== */

.hohj-kb {
	margin: 32px 0 4px;
	padding-top: 26px;
	border-top: 1px solid rgba(28, 27, 25, .10);
	max-width: 560px;
	scroll-margin-top: 20px;
}

.hohj-kb__titel {
	font-family: var(--hohj-schrift);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hohj-tief);
	margin: 0 0 6px;
}

.hohj-kb__unter {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--hohj-gedaempft);
	margin: 0 0 20px;
	max-width: 48ch;
}

/* CF7 haengt eine eigene Form ein — ihr Grundgeruest ruhigstellen. */
.hohj-kb .wpcf7 { font-family: var(--hohj-schrift); }
.hohj-kb .wpcf7-form p { margin: 0; }

.hohj-kb__gitter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 560px) {
	.hohj-kb__gitter { grid-template-columns: 1fr; }
}

.hohj-kb__feld { display: flex; flex-direction: column; gap: 6px; }
.hohj-kb__feld--breit { grid-column: 1 / -1; }

.hohj-kb__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hohj-tief);
}

.hohj-kb__opt {
	font-weight: 400;
	font-size: 12px;
	color: var(--hohj-gedaempft);
	margin-left: 4px;
}

.hohj-kb input[type="text"],
.hohj-kb input[type="email"],
.hohj-kb input[type="tel"],
.hohj-kb input[type="file"] {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--hohj-schrift);
	font-size: 15px;
	color: var(--hohj-tief);
	background: var(--hohj-feld-bg);
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 12px 14px;
	line-height: 1.3;
	-webkit-appearance: none;
	appearance: none;
}

.hohj-kb input::placeholder { color: #6B6660; opacity: 1; }

.hohj-kb input[type="text"]:hover,
.hohj-kb input[type="email"]:hover,
.hohj-kb input[type="tel"]:hover { background: #E6E4E2; }

.hohj-kb input:focus {
	outline: 2px solid var(--hohj-signal);
	outline-offset: 2px;
	background: var(--hohj-feld-bg);
}

/* Datei-Feld: der native Knopf wird eingefasst, ohne Kapselform. */
.hohj-kb input[type="file"] {
	padding: 10px 14px;
	font-size: 13.5px;
	color: var(--hohj-gedaempft);
	cursor: pointer;
}

.hohj-kb input[type="file"]::file-selector-button {
	font-family: var(--hohj-schrift);
	font-size: 13px;
	font-weight: 500;
	color: var(--hohj-tief);
	background: #fff;
	border: 1px solid var(--hohj-linie);
	border-radius: 8px;
	padding: 7px 12px;
	margin-right: 12px;
	cursor: pointer;
}

.hohj-kb__hint {
	font-size: 12px;
	line-height: 1.45;
	color: var(--hohj-gedaempft);
}

.hohj-kb__aktion { margin: 18px 0 0; }

.hohj-kb .wpcf7-submit {
	font-family: var(--hohj-schrift);
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	background: var(--hohj-tief);
	border: 1px solid var(--hohj-tief);
	border-radius: 12px;
	padding: 13px 22px;
	cursor: pointer;
	transition: opacity .15s ease;
}

.hohj-kb .wpcf7-submit:hover { opacity: .88; }
.hohj-kb .wpcf7-submit:focus-visible { outline: 2px solid var(--hohj-signal); outline-offset: 2px; }

/* CF7-Rueckmeldungen: ruhig, ohne Farbe ueber Farbe. */
.hohj-kb .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 14px !important;
	border: 1px solid var(--hohj-linie) !important;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--hohj-tief);
}

.hohj-kb form.sent .wpcf7-response-output { border-color: var(--hohj-tief) !important; }

.hohj-kb .wpcf7-not-valid-tip {
	font-size: 12px;
	font-weight: 500;
	color: #9A2B2B;
	margin-top: 5px;
}

.hohj-kb .wpcf7-spinner { margin: 0 0 0 12px; }

/* Eigener Hinweis am Datei-Feld — kommt vor dem Hochladen, nicht danach. */
.hohj-kb__fehler {
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	color: #9A2B2B;
}

.hohj-kb input[type="file"].hohj-kb__datei--zuviel {
	border-color: #9A2B2B;
}

/* ==========================================================================
   Kurzbewerbung: erst auf Knopfdruck

   Versteckt wird nur, wenn JavaScript laeuft (Klasse hohj-js am html).
   Ohne JavaScript steht das Formular offen da und der Hauptknopf ist ein
   gewoehnlicher Sprung dorthin - kein Weg geht verloren.
   ========================================================================== */

.hohj-js .hohj-kb { display: none; }
.hohj-js .hohj-kb--offen { display: block; }

.hohj-kb__zurueck {
	font-family: var(--hohj-schrift);
	font-size: 13px;
	color: var(--hohj-gedaempft);
	background: none;
	border: 0;
	padding: 0;
	margin-left: 16px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hohj-kb__zurueck:hover { color: var(--hohj-tief); }

/* ==========================================================================
   Fussbereich — leise, am Ende der Buehne

   Steht innerhalb derselben Flaeche wie die Kacheln, rueckt also mit, wenn
   links ein Panel aufgeht. Keine Farbflaeche, nur eine feine Linie.
   ========================================================================== */

.hohj-fuss {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(28, 27, 25, .09);
	font-family: var(--hohj-schrift);
}

.hohj-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
	max-width: 1600px;
	margin: 0 auto;
	font-size: 13.5px;
	color: var(--hohj-gedaempft);
}

.hohj-fuss__marke {
	font-weight: 600;
	color: var(--hohj-tief);
	letter-spacing: -.01em;
}

.hohj-fuss__rechts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-left: auto;
}

.hohj-fuss a {
	color: var(--hohj-gedaempft);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}

.hohj-fuss a:hover {
	color: var(--hohj-tief);
	border-bottom-color: var(--hohj-tief);
}

/* Am Handy untereinander statt gequetscht. */
@media (max-width: 619px) {
	.hohj-fuss__rechts { margin-left: 0; }
}

/* ---------- Nachladen beim Scrollen ---------- */

/* Die Marke, an der das Nachladen ausgeloest wird. Nimmt keinen Platz. */
.hohj-marke { height: 1px; }

/* Waehrend geladen wird, ein leiser Hinweis unter dem Feed. */
.hohj-marke::after {
	content: '';
	display: block;
	height: 0;
	overflow: hidden;
	margin: 0 auto;
	width: 26px;
	border-radius: 50%;
	background: var(--hohj-signal);
	opacity: 0;
	transition: opacity .2s ease;
}

.hohj-laedt-nach .hohj-marke::after {
	height: 26px;
	margin: 26px auto 0;
	opacity: 1;
	animation: hohj-puls 1s ease-in-out infinite;
}

@keyframes hohj-puls {
	0%, 100% { transform: scale(.55); }
	50%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hohj-laedt-nach .hohj-marke::after { animation: none; }
}

/* Platzhalter fuer das, was gerade ausgehaengt ist. Haelt die Hoehe der
   Spalte exakt - dadurch stimmt der Rollbalken, obwohl nur ein Fenster
   um den Sichtbereich wirklich im Dokument steht. */
.hohj-fuell {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

/* Der senkrechte Abstand steckt im Aussenabstand der Kachel, NICHT in der
   Luecke des Flex-Behaelters: die Platzhalter oben und unten sind selbst
   Kinder und bekaemen sonst ebenfalls Abstand. Beide Werte kommen aus
   derselben Variablen, die auch das Skript liest - weichen sie
   auseinander, stimmen die Platzhalterhoehen nicht und die Kacheln
   zucken beim Scrollen. */
.hohj-spalte__innen { gap: 0; }

.hohj-spalte__innen .hohj-kachel {
	margin: 0 0 var(--hohj-luecke);
	max-width: none;
}

/* ==========================================================================
   TOKEN-SET
   ==========================================================================
   Ein System statt erfundener Einzelwerte. Rollen, keine Farbnamen -
   damit sich eine Entscheidung an einer Stelle aendern laesst und
   ueberall wirkt.

   Additiv: alle Namen tragen das Praefix --t-. Die Werte des Feeds
   bleiben unberuehrt, es aendert sich keine andere Seite.
   ========================================================================== */

:root {

	/* ---- Farbe: Rollen ---- */
	--t-signal:       #FFDC0D;   /* der Punkt. Nur fuer eine Sache je Bild */
	--t-signal-tief:  #E8C700;
	--t-tinte:        #16150F;   /* Text und dunkle Flaechen, warmes Schwarz */
	--t-tinte-72:     rgba( 22, 21, 15, .72 );
	--t-tinte-50:     rgba( 22, 21, 15, .50 );
	--t-tinte-08:     rgba( 22, 21, 15, .08 );
	--t-tinte-14:     rgba( 22, 21, 15, .14 );
	--t-grund:        #F3F1ED;   /* Fuellung auf Weiss: Karten, Felder,
	                                Ueberfahren. NICHT der Seitengrund -
	                                das Merkmal traegt an zwanzig Stellen
	                                eine Flaeche, und Weiss macht sie
	                                unsichtbar. Wo der Grund weiss sein
	                                soll, steht es an der Stelle selbst. */
	--t-grund-tief:   #F5F4F2;   /* zweite Ebene, ruhige Abschnitte */
	--t-flaeche:      #FFFFFF;   /* Karten, alles Greifbare */

	/* ---- Schrift ---- */
	--t-sans:  'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--t-serif: 'Fraunces', Georgia, 'Times New Roman', serif;


	/* ---- Groessenreihe: Verhaeltnis 1,25, fliessend ---- */
	--t-xs:   .78rem;
	--t-s:    .875rem;
	--t-m:    1rem;
	--t-l:    1.0625rem;
	--t-xl:   clamp( 1.2rem,  1.5vw, 1.375rem );
	--t-2xl:  clamp( 1.6rem,  2.6vw, 2.125rem );
	--t-3xl:  clamp( 2.1rem,  4vw,   3.25rem );
	--t-4xl:  clamp( 2.6rem,  5.6vw, 4.75rem );

	/* ---- Abstaende: 4er Raster, eine Reihe fuer alles ---- */
	--t-1:  4px;
	--t-2:  8px;
	--t-3:  12px;
	--t-4:  16px;
	--t-5:  24px;
	--t-6:  32px;
	--t-7:  48px;
	--t-8:  64px;
	--t-9:  96px;
	--t-10: 128px;

	/* ---- Formen: drei Ecken, keine Kapseln ---- */
	--t-ecke-feld:  12px;
	--t-ecke-karte: 16px;
	--t-ecke-gross: 24px;

	/* ---- Rhythmus: Abschnitte atmen unterschiedlich ---- */
	--t-weit: clamp( 84px, 11vw, 168px );
	--t-mittel: clamp( 64px, 8vw, 116px );
	--t-eng:  clamp( 48px, 5.5vw, 80px );

	/* ---- Breite ---- */
	--t-innen: 1240px;
	--t-lesen: 62ch;
	--t-rand:  clamp( 20px, 5vw, 64px );
}

/* ==========================================================================
   Arbeitgeberseite
   ==========================================================================
   Alles unter .hohj-lp. Der Feed bekommt davon nichts ab.
   ========================================================================== */

.hohj-lp {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );

	background: var(--t-grund);
	color: var(--t-tinte);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

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

.hohj-lp p { margin: 0; }

.hohj-lp h1,
.hohj-lp h2,
.hohj-lp h3 {
	margin: 0;
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.06;
	text-wrap: balance;
}

/* Die Serife traegt nur die Betonung - ein Wort, nicht ein Absatz.
   Genau dieser Wechsel macht den Unterschied zwischen einer Seite und
   einer Marke. */
.hohj-lp h1 em,
.hohj-lp__nr,
.hohj-lp__betrag {
	font-family: var(--t-serif);
	font-style: normal;
}

.hohj-lp h1 em {
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

/* ---- Ein Innenmass fuer alle Abschnitte ---- */

.hohj-lp__kopf,
.hohj-lp__hero,
.hohj-lp__schritte,
.hohj-lp__preise,
.hohj-lp__vorzuege,
.hohj-lp__faq,
.hohj-lp__abschluss,
.hohj-lp__fuss {
	padding-inline: max( var(--t-rand), calc( ( 100% - var(--t-innen) ) / 2 ) );
}

/* ---------- Kopf ---------- */

.hohj-lp__kopf {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-5);
	padding-block: var(--t-4);
	background: rgba( 243, 241, 237, .86 );
	backdrop-filter: blur( 16px );
	border-bottom: 1px solid var(--t-tinte-08);
}

/* Der Punkt allein liest sich als Ladeanzeige. Mit dem Namen daneben
   ist er eine Marke. */
.hohj-lp__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	/* Kleingeschrieben, nicht fett. Dieselbe Schrift wie die Navigation,
	   nur eine Spur groesser und dunkler - die Marke ist ein Name, kein
	   Ausruf. */
	font-family: var(--t-sans);
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: inherit;
	text-decoration: none;
}

.hohj-lp__logo::before {
	content: "";
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background: var(--t-signal);
	transition: transform .16s ease;
}

.hohj-lp__logo::after { content: "headof.jobs"; }

/* Im Kopf der Startseite steht nur der Punkt. Der Name steht in der
   Adresszeile, im Titel und im Fuss - dreimal genuegt. */
.hohj-deckel__kopf .hohj-lp__logo::after { content: none; }

/* Der Punkt haengt fest am Fenster und bleibt beim Blaettern stehen -
   als einziges Element des Kopfes. Alles andere dort gehoert den
   Arbeitgebern und darf aus dem Bild laufen.

   Feste Lage statt klebender: eine klebende Lage waere an den Kopf
   gebunden und verschwaende mit ihm. Die Hoehe rechnet die Leiste von
   WordPress mit, sonst laege der Punkt darunter. */
.hohj-deckel__kopf .hohj-lp__logo {
	gap: 0;
	position: fixed;
	top: calc( var(--hohj-adminbar, 0px) + var(--t-5) );
	left: clamp( 20px, 4vw, 56px );
	z-index: 7;
	pointer-events: auto;
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
}
.hohj-lp__logo:hover::before { transform: scale( 1.1 ); }

.hohj-lp__nav {
	display: flex;
	align-items: center;
	gap: var(--t-6);
	font-size: var(--t-s);
}

.hohj-lp__nav a {
	color: var(--t-tinte-72);
	text-decoration: none;
}

.hohj-lp__nav a:hover { color: var(--t-tinte); }

.hohj-lp__nav-knopf {
	padding: 11px 20px;
	border-radius: var(--t-ecke-feld);
	background: var(--t-tinte);
	color: var(--t-flaeche) !important;
	font-weight: 500;
}

@media ( max-width: 767px ) {
	.hohj-lp__nav a:not( .hohj-lp__nav-knopf ) { display: none; }
	.hohj-lp__logo::after { display: none; }
}

/* ---------- Knöpfe: drei Stufen, mehr braucht es nicht ---------- */

.hohj-knopf {
	display: inline-block;
	padding: 15px 26px;
	border-radius: var(--t-ecke-feld);
	font-size: var(--t-m);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: transform .14s ease, background .14s ease;
}

.hohj-knopf:hover { transform: translateY( -1px ); }

.hohj-knopf--signal { background: var(--t-signal); color: var(--t-tinte); }
.hohj-knopf--signal:hover { background: var(--t-signal-tief); color: var(--t-tinte); }

.hohj-knopf--dunkel { background: var(--t-tinte); color: var(--t-flaeche); }
.hohj-knopf--dunkel:hover { color: var(--t-flaeche); }

.hohj-knopf--still {
	background: transparent;
	color: var(--t-tinte);
	border: 1px solid var(--t-tinte-14);
}

.hohj-knopf--gross { padding: 19px 40px; font-size: var(--t-l); }

.hohj-knopf[aria-disabled="true"] {
	background: var(--t-tinte-08);
	color: var(--t-tinte-50);
	pointer-events: none;
	transform: none;
}

/* ---------- Hero: weit ---------- */

.hohj-lp__hero {
	display: grid;
	grid-template-columns: 1fr 0.82fr;
	align-items: center;
	gap: clamp( var(--t-6), 6vw, var(--t-9) );
	padding-block: var(--t-weit);
}

.hohj-lp__marker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
	margin-bottom: var(--t-5);
}

.hohj-lp__marker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--t-signal);
}

.hohj-lp__hero h1 { font-size: var(--t-4xl); }

.hohj-lp__lead {
	max-width: 46ch;
	margin-top: var(--t-5) !important;
	font-size: var(--t-l);
	line-height: 1.6;
	color: var(--t-tinte-72);
}

.hohj-lp__hero-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t-3);
	margin-top: var(--t-6);
}

.hohj-lp__beleg {
	display: inline-flex;
	align-items: center;
	gap: var(--t-2);
	margin-top: var(--t-6) !important;
	padding: 9px 16px;
	border-radius: var(--t-ecke-feld);
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-08);
	font-size: var(--t-s);
	color: var(--t-tinte-72);
}

.hohj-lp__beleg strong {
	font-family: var(--t-serif);
	font-size: var(--t-l);
	color: var(--t-tinte);
}

.hohj-lp__zusage {
	margin-top: var(--t-4) !important;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-lp__zusage strong { color: var(--t-tinte); font-weight: 600; }

/* Das Produkt gross zeigen - es ist das Einzige, was sonst niemand hat. */
.hohj-lp__kachel {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 420px;
}

.hohj-lp__kachel .hohj-kachel { margin-bottom: 0; }

.hohj-lp__bildunter {
	margin-top: var(--t-4) !important;
	text-align: center;
	font-size: var(--t-xs);
	color: var(--t-tinte-50);
}

@media ( max-width: 899px ) {
	.hohj-lp__hero { grid-template-columns: 1fr; }
	.hohj-lp__hero-bild { order: -1; }
	.hohj-lp__kachel { max-width: 320px; }
}

/* ---------- Überschriften der Abschnitte ---------- */

.hohj-lp__h2 {
	font-size: var(--t-2xl);
	margin-bottom: var(--t-3) !important;
}

.hohj-lp__satz {
	max-width: var(--t-lesen);
	font-size: var(--t-m);
	line-height: 1.62;
	color: var(--t-tinte-72);
}

/* ---------- Schritte: eng, ruhige Ebene ---------- */

.hohj-lp__schritte {
	padding-block: var(--t-eng);
	background: var(--t-grund-tief);
}

.hohj-lp__schritte-liste {
	list-style: none;
	margin: var(--t-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) );
	gap: clamp( var(--t-5), 3.5vw, var(--t-7) );
}

.hohj-lp__nr {
	display: block;
	font-size: var(--t-xl);
	color: var(--t-signal-tief);
	padding-bottom: var(--t-3);
	margin-bottom: var(--t-4);
	border-bottom: 1px solid var(--t-tinte-14);
}

.hohj-lp__schritte-liste h3 {
	font-size: var(--t-xl);
	margin-bottom: var(--t-2) !important;
}

.hohj-lp__schritte-liste p {
	font-size: var(--t-s);
	line-height: 1.6;
	color: var(--t-tinte-72);
}

/* ---------- Preise: dicht, auf Weiß ---------- */

.hohj-lp__preise {
	padding-block: var(--t-mittel);
	background: var(--t-flaeche);
	scroll-margin-top: 80px;
}

.hohj-lp__preise-kopf { margin-bottom: var(--t-6); }

.hohj-lp__wahl {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--t-ecke-feld);
	background: var(--t-grund);
	margin-bottom: var(--t-5);
}

.hohj-lp__tab {
	border: 0;
	background: transparent;
	padding: 10px 20px;
	border-radius: 9px;
	font: inherit;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
	cursor: pointer;
}

.hohj-lp__tab.is-aktiv {
	background: var(--t-flaeche);
	color: var(--t-tinte);
	font-weight: 500;
	box-shadow: 0 1px 2px var(--t-tinte-08);
}

.hohj-lp__landwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--t-3);
	margin-bottom: var(--t-6);
}

.hohj-lp__label {
	width: 100%;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
}

.hohj-lp__select {
	min-width: 264px;
	padding: 13px 15px;
	font: inherit;
	font-size: var(--t-m);
	color: inherit;
	background: var(--t-grund);
	border: 1px solid transparent;
	border-radius: var(--t-ecke-feld);
}

.hohj-lp__select:focus {
	outline: none;
	border-color: var(--t-tinte);
	background: var(--t-flaeche);
}

.hohj-lp__zone { font-size: var(--t-s); color: var(--t-tinte-50); }

.hohj-lp__karten {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var(--t-4);
	align-items: stretch;
}

.hohj-lp__karten--zwei { grid-template-columns: repeat( 2, minmax( 0, 400px ) ); }

.hohj-lp__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--t-6) var(--t-5) var(--t-5);
	background: var(--t-grund);
	border: 1px solid transparent;
	border-radius: var(--t-ecke-karte);
}

.hohj-lp__karte--gehoben {
	background: var(--t-flaeche);
	border-color: var(--t-signal);
	box-shadow: 0 0 0 3px rgba( 255, 220, 13, .22 );
}

.hohj-lp__band {
	position: absolute;
	top: -11px;
	left: var(--t-5);
	padding: 4px 11px;
	border-radius: 7px;
	background: var(--t-signal);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.hohj-lp__karte h3 {
	font-size: var(--t-m);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: var(--t-3) !important;
}

.hohj-lp__betrag {
	font-size: clamp( 2rem, 3vw, 2.6rem );
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
}

.hohj-lp__je {
	margin-top: var(--t-2) !important;
	font-size: var(--t-xs);
	color: var(--t-tinte-50);
}

.hohj-lp__karte ul {
	list-style: none;
	margin: var(--t-5) 0 auto;
	padding: 0;
	font-size: var(--t-s);
	line-height: 1.45;
}

.hohj-lp__karte li {
	position: relative;
	padding: 6px 0 6px 18px;
	color: var(--t-tinte-72);
}

.hohj-lp__karte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--t-signal-tief);
}

.hohj-lp__karte .hohj-knopf {
	margin-top: var(--t-5);
	padding: 13px 18px;
	font-size: var(--t-s);
}

/* Ausgebucht: auch der Preis tritt zurück, sonst wirbt er weiter. */
.hohj-lp__karte.is-ausgebucht { border-color: var(--t-tinte-14); box-shadow: none; }
.hohj-lp__karte.is-ausgebucht .hohj-lp__betrag,
.hohj-lp__karte.is-ausgebucht .hohj-lp__je,
.hohj-lp__karte.is-ausgebucht h3,
.hohj-lp__karte.is-ausgebucht ul { opacity: .45; }
.hohj-lp__karte.is-ausgebucht .hohj-lp__band { background: var(--t-tinte-14); }

/* ---- Ortsprüfung ---- */

.hohj-lp__ortwahl {
	margin-top: var(--t-5);
	padding-top: var(--t-4);
	border-top: 1px solid var(--t-tinte-14);
}

.hohj-lp__minilabel {
	display: block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
	margin-bottom: var(--t-2);
}

.hohj-lp__select--klein {
	width: 100%;
	min-width: 0;
	padding: 10px 12px;
	font-size: var(--t-s);
	background: var(--t-flaeche);
	border-color: var(--t-tinte-14);
}

.hohj-lp__select--klein:disabled { background: var(--t-grund); color: var(--t-tinte-50); }

.hohj-lp__stand {
	margin-top: var(--t-2) !important;
	font-size: var(--t-xs);
	line-height: 1.45;
	color: var(--t-tinte-72);
}

.hohj-lp__quer {
	margin-top: var(--t-5) !important;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-lp__link {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--t-tinte);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hohj-lp__klein {
	margin-top: var(--t-7) !important;
	max-width: 70ch;
	font-size: var(--t-xs);
	line-height: 1.65;
	color: var(--t-tinte-50);
}

/* ---------- Vorzüge: mittel ---------- */

.hohj-lp__vorzuege { padding-block: var(--t-mittel); }

.hohj-lp__gitter {
	margin-top: var(--t-7);
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 270px, 1fr ) );
	gap: clamp( var(--t-5), 3vw, var(--t-7) );
}

.hohj-lp__vorzug h3 {
	position: relative;
	font-size: var(--t-l);
	padding-left: var(--t-5);
	margin-bottom: var(--t-2) !important;
}

.hohj-lp__vorzug h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--t-signal);
}

.hohj-lp__vorzug p {
	padding-left: var(--t-5);
	font-size: var(--t-s);
	line-height: 1.62;
	color: var(--t-tinte-72);
}

/* ---------- Fragen: eng, ruhige Ebene ---------- */

.hohj-lp__faq {
	padding-block: var(--t-eng);
	background: var(--t-grund-tief);
}

.hohj-lp__fragen {
	margin-top: var(--t-6);
	columns: 2;
	column-gap: var(--t-8);
}

.hohj-lp__faq details {
	break-inside: avoid;
	border-bottom: 1px solid var(--t-tinte-14);
}

.hohj-lp__faq summary {
	list-style: none;
	cursor: pointer;
	padding: var(--t-4) var(--t-6) var(--t-4) 0;
	font-size: var(--t-m);
	font-weight: 500;
	position: relative;
}

.hohj-lp__faq summary::-webkit-details-marker { display: none; }

.hohj-lp__faq summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 14px;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--t-tinte-50);
}

.hohj-lp__faq details[open] summary::after { content: "–"; }

.hohj-lp__faq details p {
	padding: 0 var(--t-6) var(--t-5) 0;
	font-size: var(--t-s);
	line-height: 1.62;
	color: var(--t-tinte-72);
}

@media ( max-width: 899px ) { .hohj-lp__fragen { columns: 1; } }

/* ---------- Abschluss: laut ---------- */

.hohj-lp__abschluss {
	position: relative;
	padding-block: var(--t-weit);
	background: var(--t-tinte);
	color: var(--t-grund);
	text-align: center;
	overflow: hidden;
}

.hohj-lp__abschluss::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--t-signal);
	opacity: .12;
}

.hohj-lp__abschluss h2 {
	position: relative;
	font-size: var(--t-3xl);
	margin-bottom: var(--t-6) !important;
}

.hohj-lp__abschluss .hohj-knopf { position: relative; }

/* ---------- Fuß ---------- */

.hohj-lp__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-4);
	padding-block: var(--t-6);
	font-size: var(--t-s);
}

.hohj-lp__fuss-nav { display: flex; flex-wrap: wrap; gap: var(--t-5); }

.hohj-lp__fuss-nav a { color: var(--t-tinte-50); text-decoration: none; }
.hohj-lp__fuss-nav a:hover { color: var(--t-tinte); }

/* ---------- Umbrüche ---------- */

@media ( max-width: 1199px ) {
	/* Gemessen am 6.8.: der Preis braucht 120 px, die Fahne 148,4 px,
	   dazu 64 px Kartenpolster. Bei 1100 blieben der ausgezeichneten
	   Karte - die durch ihre 8 px Eigenluft 16 px schmaler ist - nur
	   122,8 px, und "490 EUR" brach auf zwei Zeilen. Deshalb faellt
	   die Grenze nicht erst bei 1079, sondern schon bei 1199. */
	.hohj-lp__karten { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

/* Eine Spalte schon ab 719, nicht erst ab 619: bei 620 blieben je
   Karte 235 px, und die Vorzuege brachen auf drei Zeilen. Zwei
   Spalten lohnen sich erst, wenn jede Karte ueber 300 px hat. */
@media ( max-width: 719px ) {
	.hohj-lp__karten,
	.hohj-lp__karten--zwei { grid-template-columns: 1fr; }

	.hohj-lp__karte { padding: var(--t-5) var(--t-4) var(--t-4); }
	.hohj-lp__hero-knoepfe .hohj-knopf { flex: 1 1 100%; }
	.hohj-lp__wahl { display: flex; width: 100%; }
	.hohj-lp__tab { flex: 1; padding: 12px 8px; }
	.hohj-lp__select { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Nachgezogen nach eigener Durchsicht
   ========================================================================== */

/* Sechs Vorzuege in vier Spalten lassen in der zweiten Reihe zwei
   Plaetze leer. Drei Spalten gehen glatt auf. */
.hohj-lp__gitter { grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); }

@media ( min-width: 1080px ) {
	.hohj-lp__gitter { grid-template-columns: repeat( 3, 1fr ); }
}

/* Der Hero stand auf "weit" und hatte unter den Knoepfen totes Feld.
   Die Kachel traegt ihn jetzt mit, oben buendig statt schwebend. */
.hohj-lp__hero {
	padding-block: var(--t-mittel);
	align-items: start;
	grid-template-columns: 1fr 0.9fr;
}

.hohj-lp__hero-bild { position: sticky; top: 110px; }

.hohj-lp__kachel { max-width: 460px; }

@media ( max-width: 899px ) {
	.hohj-lp__hero-bild { position: static; }
	.hohj-lp__kachel { max-width: 320px; }
}

/* Der zweite Reiter sah aus wie gesperrt. Ein Reiter ist ein Angebot,
   kein deaktivierter Knopf. */
.hohj-lp__tab { color: var(--t-tinte-72); }
.hohj-lp__tab:hover { color: var(--t-tinte); }

/* Vier Grundfarben nacheinander sind drei zu viel. Die Fragen liegen
   jetzt auf demselben Grund wie die Vorzuege - der Wechsel bleibt den
   beiden Stellen vorbehalten, die ihn tragen: Preise auf Weiss,
   Abschluss dunkel. */
.hohj-lp__faq { background: transparent; }
.hohj-lp__faq { border-top: 1px solid var(--t-tinte-08); }

/* Der Kreis im Abschluss war oben angeschnitten und sah nach Unfall
   aus. Jetzt liegt er ganz im Bild und dient als Flaeche, nicht als
   Rest. */
.hohj-lp__abschluss::before {
	top: auto;
	bottom: -220px;
	right: -120px;
	width: 520px;
	height: 520px;
	opacity: .1;
}

/* Zone-Angabe war zu blass, um gelesen zu werden. */
.hohj-lp__zone { color: var(--t-tinte-72); }

/* Beleg und Preiszusage standen in falscher Ordnung untereinander -
   erst die Behauptung, dann der Preis. Jetzt eine Zeile. */
.hohj-lp__beleg { margin-top: var(--t-5) !important; }
.hohj-lp__zusage { margin-top: var(--t-3) !important; }

/* ---------- Ortsfeld: Eingabe mit Vorschlägen ---------- */

.hohj-lp__feld {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: var(--t-s);
	color: inherit;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
}

.hohj-lp__feld:focus {
	outline: none;
	border-color: var(--t-tinte);
}

.hohj-lp__stand--frei::before,
.hohj-lp__stand--voll::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	margin-right: 7px;
	vertical-align: baseline;
}

.hohj-lp__stand--frei { color: var(--t-tinte); }
.hohj-lp__stand--frei::before { background: var(--t-signal); }
.hohj-lp__stand--voll::before { background: var(--t-tinte-50); }

/* ==========================================================================
   Groesser. Alles.
   ==========================================================================
   1240 px Innenbreite hiessen auf einem breiten Schirm 300 px Leerraum
   je Seite. Und die ganze Reihe war eine Stufe zu klein - "kleinteilig"
   ist genau das richtige Wort dafuer.
   ========================================================================== */

:root {
	--t-innen: 1680px;
	--t-rand:  clamp( 24px, 4vw, 72px );

	--t-m:    1.0625rem;
	--t-l:    1.1875rem;
	--t-xl:   clamp( 1.35rem, 1.7vw, 1.6rem );
	--t-2xl:  clamp( 2rem,   3.2vw, 3rem );
	--t-3xl:  clamp( 2.6rem, 5vw,   4.4rem );
	--t-4xl:  clamp( 3rem,   7vw,   6.4rem );

	--t-weit:   clamp( 100px, 12vw, 200px );
	--t-mittel: clamp( 80px,  9vw,  148px );
	--t-eng:    clamp( 64px,  7vw,  110px );
}

.hohj-lp { font-size: var(--t-l); }

.hohj-lp__hero { grid-template-columns: 1.15fr 0.85fr; gap: clamp( 40px, 6vw, 120px ); }
.hohj-lp__hero h1 { letter-spacing: -.045em; }
.hohj-lp__lead { max-width: 40ch; font-size: clamp( 1.15rem, 1.5vw, 1.45rem ); }
.hohj-lp__kachel { max-width: 560px; }

.hohj-lp__h2 { font-size: var(--t-2xl); }
.hohj-lp__satz { font-size: clamp( 1.1rem, 1.35vw, 1.3rem ); max-width: 56ch; }

.hohj-lp__nr { font-size: 2.6rem; line-height: 1; }
.hohj-lp__schritte-liste h3 { font-size: clamp( 1.35rem, 1.8vw, 1.7rem ); }
.hohj-lp__schritte-liste p { font-size: var(--t-m); }
.hohj-lp__schritte-liste { gap: clamp( 32px, 4vw, 72px ); margin-top: var(--t-8); }

.hohj-lp__karte { padding: var(--t-7) var(--t-6) var(--t-6); }
.hohj-lp__karte h3 { font-size: var(--t-l); }
.hohj-lp__betrag { font-size: clamp( 2.4rem, 3.4vw, 3.4rem ); }
.hohj-lp__karte ul { font-size: var(--t-m); }
.hohj-lp__karte li { padding: 8px 0 8px 22px; }
.hohj-lp__karte li::before { top: 15px; width: 6px; height: 6px; }
.hohj-lp__karte .hohj-knopf { font-size: var(--t-m); padding: 16px 20px; }
.hohj-lp__karten { gap: var(--t-5); margin-top: var(--t-7); }

.hohj-lp__vorzug h3 { font-size: clamp( 1.2rem, 1.5vw, 1.45rem ); padding-left: var(--t-6); }
.hohj-lp__vorzug h3::before { width: 11px; height: 11px; }
.hohj-lp__vorzug p { font-size: var(--t-m); padding-left: var(--t-6); }
.hohj-lp__gitter { gap: clamp( 32px, 3.5vw, 72px ); margin-top: var(--t-8); }

.hohj-lp__faq summary { font-size: var(--t-l); padding-block: var(--t-5); }
.hohj-lp__faq details p { font-size: var(--t-m); }
.hohj-lp__abschluss h2 { font-size: var(--t-3xl); }

.hohj-knopf { padding: 17px 30px; font-size: var(--t-m); }
.hohj-knopf--gross { padding: 22px 48px; font-size: 1.25rem; }
.hohj-lp__select { font-size: var(--t-m); padding: 15px 17px; min-width: 300px; }

/* ---------- Ort: Auswahl und Eingabe in einem ---------- */

.hohj-lp__combo { position: relative; }

.hohj-lp__feld {
	width: 100%;
	padding: 13px 42px 13px 15px;
	font: inherit;
	font-size: var(--t-m);
	color: inherit;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
}

.hohj-lp__feld:focus { outline: none; border-color: var(--t-tinte); }

.hohj-lp__combo-pfeil {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY( -50% );
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	color: var(--t-tinte-50);
	cursor: pointer;
}

.hohj-lp__combo-liste {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc( 100% + 6px );
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	box-shadow: 0 12px 32px rgba( 22, 21, 15, .12 );
	max-height: 260px;
	overflow-y: auto;
}

.hohj-lp__combo-liste li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: var(--t-s);
	cursor: pointer;
}

.hohj-lp__combo-liste li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--t-signal);
	flex: 0 0 auto;
}

.hohj-lp__combo-liste li[data-stand="voll"]::before { background: var(--t-tinte-14); }
.hohj-lp__combo-liste li:hover { background: var(--t-grund); }

/* ==========================================================================
   Hero ins Gleichgewicht
   ==========================================================================
   Die Kachel klebte oben und liess darunter ein Loch, der Abschnitt
   hatte zusaetzlich Polster oben und unten. Jetzt bestimmt die Kachel
   die Hoehe, beide Spalten stehen mittig, und die Polster sind auf das
   noetige Mass zurueck.
   ========================================================================== */

.hohj-lp__hero {
	align-items: center;
	padding-block: var(--t-eng);
	gap: clamp( 40px, 5vw, 96px );
	grid-template-columns: 1.05fr 0.95fr;
}

.hohj-lp__hero-bild { position: static; }

.hohj-lp__kachel { max-width: 620px; }

.hohj-lp__marker { margin-bottom: var(--t-4); }
.hohj-lp__hero-knoepfe { margin-top: var(--t-6); }
.hohj-lp__zusage { margin-top: var(--t-4) !important; }

/* Abschnitte etwas dichter - die Luft war groesser als der Inhalt. */
:root {
	--t-weit:   clamp( 88px, 9vw, 150px );
	--t-mittel: clamp( 72px, 7vw, 118px );
	--t-eng:    clamp( 56px, 5.5vw, 92px );
}

@media ( max-width: 899px ) {
	.hohj-lp__kachel { max-width: 380px; }
}

/* ==========================================================================
   Den Theme-Rahmen abschalten statt ihn zu umgehen
   ==========================================================================
   Bisher brach die Seite mit 100vw und negativen Aussenabstaenden aus
   dem Inhaltsbereich aus. Das rechnet nur dann auf, wenn der Rahmen
   genau mittig sitzt - tat er nicht, also blieb links ein Streifen.

   Jetzt wird der Rahmen selbst aufgehoben, und zwar nur auf unseren
   Seiten (body.hohj-seite). Alle anderen Seiten behalten ihn.
   ========================================================================== */

body.hohj-seite {
	--wp--style--root-padding-left:  0px;
	--wp--style--root-padding-right: 0px;
	overflow-x: hidden;
}

body.hohj-seite .wp-site-blocks,
body.hohj-seite main,
body.hohj-seite .entry-content,
body.hohj-seite .wp-block-post-content,
body.hohj-seite .wp-block-group.is-layout-constrained {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

body.hohj-seite .wp-block-post-content > *,
body.hohj-seite .entry-content > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Damit ist der Ausbruch ueberfluessig - und mit ihm der Versatz um die
   Breite der Bildlaufleiste. */
.hohj-lp {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   Preisblock — der Abschnitt, an dem gekauft wird
   ========================================================================== */

.hohj-lp__preise { padding-block: clamp( 72px, 8vw, 128px ); }

/* Mittig, oben wie unten. Der Block hat eine eigene Breite: vier Karten
   brauchen keine 1680 px, sonst werden sie flach und beliebig. */
.hohj-lp__preise > * {
	max-width: 1360px;
	margin-inline: auto;
}

.hohj-lp__preise-kopf {
	text-align: center;
	margin-bottom: var(--t-7);
}

.hohj-lp__preise-kopf .hohj-lp__satz {
	margin-inline: auto;
	max-width: 52ch;
}

.hohj-lp__wahl { display: inline-flex; margin: 0 auto var(--t-5); }
.hohj-lp__preise .hohj-lp__wahl { display: flex; width: max-content; }

.hohj-lp__landwahl {
	justify-content: center;
	text-align: center;
	margin-bottom: var(--t-7);
}

.hohj-lp__label { text-align: center; }

.hohj-lp__karten { align-items: stretch; }

/* ---- Karte ---- */

.hohj-lp__karte {
	padding: var(--t-7) var(--t-6) var(--t-6);
	background: var(--t-grund-tief);
	border: 1px solid transparent;
	transition: transform .16s ease, box-shadow .16s ease;
}

.hohj-lp__karte:hover { transform: translateY( -2px ); }

.hohj-lp__karte--gehoben {
	background: var(--t-flaeche);
	border-color: var(--t-signal);
	box-shadow: 0 2px 0 0 var(--t-signal), 0 18px 44px rgba( 22, 21, 15, .09 );
}

/* Die Liste fuellt die Karte, der Knopf sitzt unten - aber ohne das
   Loch von vorher: gleich viele Zeilen in jeder Karte. */
.hohj-lp__karte ul { margin: var(--t-5) 0 var(--t-6); }
.hohj-lp__karte .hohj-knopf { margin-top: auto; }

.hohj-lp__sparen {
	position: absolute;
	top: -11px;
	left: var(--t-6);
	padding: 4px 10px;
	border-radius: 7px;
	background: var(--t-tinte);
	color: var(--t-grund);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.hohj-lp__sparen:empty { display: none; }

/* Der Betrag bekommt Luft, die Zeile darunter tritt zurueck. */
.hohj-lp__betrag { letter-spacing: -.035em; }
.hohj-lp__je { margin-top: var(--t-3) !important; letter-spacing: .01em; }

/* ---- Ortsprüfung ---- */

.hohj-lp__ortwahl {
	margin-top: 0;
	margin-bottom: var(--t-5);
	padding-top: var(--t-5);
	border-top: 1px solid var(--t-tinte-08);
}

.hohj-lp__feld {
	padding: 14px 44px 14px 16px;
	font-size: var(--t-m);
	background: var(--t-grund);
	border: 1px solid transparent;
	border-radius: var(--t-ecke-feld);
	transition: border-color .14s ease, background .14s ease;
}

.hohj-lp__feld::placeholder { color: var(--t-tinte-50); }

.hohj-lp__feld:focus {
	background: var(--t-flaeche);
	border-color: var(--t-tinte);
	box-shadow: 0 0 0 3px rgba( 22, 21, 15, .06 );
}

.hohj-lp__combo-pfeil { right: 8px; width: 30px; height: 30px; }
.hohj-lp__combo-pfeil:hover { color: var(--t-tinte); }

.hohj-lp__combo-liste {
	top: calc( 100% + 8px );
	padding: 8px;
	border: 1px solid var(--t-tinte-08);
	border-radius: var(--t-ecke-karte);
	box-shadow: 0 20px 48px rgba( 22, 21, 15, .16 );
}

.hohj-lp__combo-liste li {
	justify-content: flex-start;
	gap: 11px;
	padding: 12px 14px;
	border-radius: 9px;
	font-size: var(--t-m);
}

.hohj-lp__combo-liste li::after {
	content: "frei";
	margin-left: auto;
	font-size: .74rem;
	color: var(--t-tinte-50);
}

.hohj-lp__combo-liste li[data-stand="voll"]::after { content: "belegt"; }
.hohj-lp__combo-liste li:hover { background: var(--t-grund); }

.hohj-lp__stand {
	margin-top: var(--t-3) !important;
	font-size: var(--t-s);
	min-height: 2.6em;
}

/* ---- Fußzeile des Blocks ---- */

.hohj-lp__quer { text-align: center; margin-top: var(--t-6) !important; }

.hohj-lp__klein {
	text-align: center;
	margin-inline: auto;
	margin-top: var(--t-7) !important;
	max-width: 62ch;
}

@media ( max-width: 1079px ) {
	.hohj-lp__preise > * { max-width: 700px; }
}

/* ---- Längere Listen tragen die Karte ---- */

.hohj-lp__listenkopf {
	margin-top: var(--t-6) !important;
	padding-top: var(--t-4);
	border-top: 1px solid var(--t-tinte-08);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
}

.hohj-lp__karte ul {
	margin: var(--t-3) 0 var(--t-6);
	font-size: var(--t-s);
	line-height: 1.4;
}

.hohj-lp__karte li { padding: 7px 0 7px 20px; }
.hohj-lp__karte li::before { top: 14px; }

/* Die Grundkarte traegt die vollstaendige Liste - sie definiert die
   Hoehe, alle anderen sagen "dazu". Deshalb steht dort kein Loch,
   sondern Luft ueber dem Knopf. */
.hohj-lp__karte .hohj-knopf { margin-top: auto; }

/* ==========================================================================
   Preisblock: Breite nutzen, Typografie beruhigen
   ==========================================================================
   Vier Karten auf 1360 px sind 320 px breit - dort bricht jede zweite
   Zeile um. Auf 1680 sind es 400, und die Zeilen stehen.
   ========================================================================== */

.hohj-lp__preise > * { max-width: 1680px; }

.hohj-lp__karten { gap: var(--t-5); }

.hohj-lp__karte {
	padding: var(--t-7) var(--t-7) var(--t-6);
}

/* Die Betraege standen in der Serife und passten nicht zum Rest.
   Eine Schrift, enge Laufweite, tabellarische Ziffern - das ist die
   ruhigere Loesung, bis die Schriftfrage entschieden ist. */
.hohj-lp__betrag {
	font-family: var(--t-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.045em;
	font-size: clamp( 2.6rem, 3.2vw, 3.6rem );
}

.hohj-lp__nr { font-family: var(--t-sans); font-weight: 600; letter-spacing: -.02em; }

.hohj-lp__karte ul { font-size: var(--t-m); line-height: 1.35; }
.hohj-lp__karte li { padding: 8px 0 8px 22px; }
.hohj-lp__karte li::before { top: 15px; }

/* Der Rechtshinweis stand links statt mittig. */
.hohj-lp__klein {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	max-width: 64ch;
}

.hohj-lp__landwahl { margin-bottom: var(--t-7); }
.hohj-lp__select { min-width: 340px; text-align: center; text-align-last: center; }

@media ( max-width: 1400px ) {
	.hohj-lp__preise > * { max-width: 1200px; }
	.hohj-lp__karte { padding: var(--t-6) var(--t-5) var(--t-5); }
}

/* ==========================================================================
   Der Punkt ist die Marke, kein Aufzählungszeichen
   ==========================================================================
   Er stand vierzigmal auf der Seite. Was vierzigmal vorkommt, ist
   Dekoration, keine Marke. Er bleibt im Logo und auf dem Band der
   hervorgehobenen Karte - sonst nirgends.
   ========================================================================== */

.hohj-lp__karte li::before,
.hohj-lp__vorzug h3::before,
.hohj-lp__marker::before,
.hohj-lp__combo-liste li::before,
.hohj-lp__stand--frei::before,
.hohj-lp__stand--voll::before { display: none !important; }

.hohj-lp__vorzug h3,
.hohj-lp__vorzug p { padding-left: 0; }

.hohj-lp__marker { color: var(--t-tinte-50); }

/* Listen als Aufstellung, nicht als Punkte: Haarlinien geben Struktur
   und lassen die Zeilen atmen. */
.hohj-lp__karte ul { margin: var(--t-4) 0 var(--t-6); }

.hohj-lp__karte li {
	padding: 11px 0;
	border-bottom: 1px solid var(--t-tinte-08);
	color: var(--t-tinte-72);
	font-size: .96rem;
	line-height: 1.35;
}

.hohj-lp__karte li:last-child { border-bottom: 0; }

/* ==========================================================================
   Hierarchie in der Karte
   ==========================================================================
   Vorher hatte alles dasselbe Gewicht. Jetzt: Name klein und ruhig,
   Betrag dominant, Bedingung fein, Aufstellung zurueckgenommen.
   ========================================================================== */

.hohj-lp__karte h3 {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
	margin-bottom: var(--t-4) !important;
}

.hohj-lp__betrag { font-size: clamp( 2.8rem, 3.6vw, 4rem ); line-height: .95; }

.hohj-lp__je {
	margin-top: var(--t-3) !important;
	padding-bottom: var(--t-5);
	border-bottom: 1px solid var(--t-tinte-08);
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-lp__listenkopf {
	margin-top: var(--t-5) !important;
	padding-top: 0;
	border-top: 0;
	font-size: .7rem;
	color: var(--t-tinte-50);
}

.hohj-lp__karte .hohj-knopf { width: 100%; }

/* ==========================================================================
   Steuerung: Frage, Umschalter, Land als eine Einheit
   ========================================================================== */

.hohj-lp__steuerung {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--t-5);
	margin-bottom: var(--t-8);
	text-align: center;
}

.hohj-lp__frage {
	font-size: clamp( 1.8rem, 2.8vw, 2.6rem );
	font-weight: 600;
	letter-spacing: -.03em;
	margin: 0;
}

.hohj-lp__wahl { margin: 0; }

.hohj-lp__versteckt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.hohj-lp__landcombo { position: relative; }

.hohj-lp__landknopf {
	display: inline-flex;
	align-items: center;
	gap: var(--t-3);
	min-width: 300px;
	justify-content: space-between;
	padding: 15px 18px;
	font: inherit;
	font-size: var(--t-m);
	color: inherit;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	cursor: pointer;
	transition: border-color .14s ease;
}

.hohj-lp__landknopf:hover { border-color: var(--t-tinte-50); }
.hohj-lp__landknopf[aria-expanded="true"] { border-color: var(--t-tinte); }
.hohj-lp__landknopf svg { color: var(--t-tinte-50); flex: 0 0 auto; }

.hohj-lp__landliste {
	position: absolute;
	z-index: 40;
	left: 50%;
	transform: translateX( -50% );
	top: calc( 100% + 8px );
	width: min( 360px, 90vw );
	padding: 8px;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-08);
	border-radius: var(--t-ecke-karte);
	box-shadow: 0 24px 56px rgba( 22, 21, 15, .18 );
	text-align: left;
}

.hohj-lp__landsuche {
	width: 100%;
	padding: 11px 13px;
	margin-bottom: 6px;
	font: inherit;
	font-size: var(--t-s);
	background: var(--t-grund);
	border: 1px solid transparent;
	border-radius: 9px;
}

.hohj-lp__landsuche:focus { outline: none; border-color: var(--t-tinte-14); background: var(--t-flaeche); }

.hohj-lp__landliste ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 280px;
	overflow-y: auto;
}

.hohj-lp__landliste li {
	padding: 10px 13px;
	border-radius: 8px;
	font-size: var(--t-s);
	cursor: pointer;
}

.hohj-lp__landliste li:hover { background: var(--t-grund); }
.hohj-lp__landliste li.is-gewaehlt { background: var(--t-tinte); color: var(--t-grund); }

/* Ortsfeld im selben Stil */
.hohj-lp__combo-liste li::after { color: var(--t-tinte-50); }
.hohj-lp__combo-liste li { font-size: var(--t-s); }

/* ==========================================================================
   Karte, ausgearbeitet
   ==========================================================================
   Getragen hat: die Zahl, der Knopf, der Hintergrund, das Micro-Label.
   Ersetzt: nacktes Versal-Label durch eine Pille, Haarlinien-Liste durch
   Haken, fehlender Satz durch einen Satz, gelber Rahmen durch eine
   umgekehrte Karte.
   ========================================================================== */

.hohj-lp__karte {
	padding: var(--t-6);
	background: var(--t-grund-tief);
	border: 0;
	border-radius: 22px;
}

.hohj-lp__karte h3 { display: none; }

/* ---- Pille statt nackter Versalien ---- */

.hohj-lp__pille {
	display: inline-block;
	align-self: flex-start;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba( 22, 21, 15, .07 );
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--t-tinte-72);
	margin-bottom: var(--t-6);
}

.hohj-lp__pille--signal { background: var(--t-signal); color: var(--t-tinte); }

/* ---- Zahl und Bedingung ---- */

.hohj-lp__betrag { font-size: clamp( 2.9rem, 3.6vw, 4rem ); line-height: .92; }

.hohj-lp__je {
	margin-top: var(--t-3) !important;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

/* ---- Der Satz, der bisher fehlte ---- */

.hohj-lp__was {
	margin-top: var(--t-5) !important;
	padding-top: var(--t-5);
	border-top: 1px solid rgba( 22, 21, 15, .1 );
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte-72);
}

/* ---- Aufstellung mit Haken, ohne Linien und ohne Punkte ---- */

.hohj-lp__karte ul {
	margin: var(--t-5) 0 var(--t-6);
	display: grid;
	gap: 13px;
}

.hohj-lp__karte li {
	position: relative;
	padding: 0 0 0 30px;
	border: 0;
	font-size: .95rem;
	line-height: 1.35;
	color: var(--t-tinte-72);
}

.hohj-lp__karte li::before {
	display: block !important;
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba( 22, 21, 15, .08 ) no-repeat center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316150F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
	background-size: 11px 11px;
}

/* ---- Die hervorgehobene Karte kehrt sich um ---- */

.hohj-lp__karte--gehoben {
	background: var(--t-tinte);
	color: var(--t-grund);
	border: 0;
	box-shadow: 0 24px 60px rgba( 22, 21, 15, .22 );
}

.hohj-lp__karte--gehoben .hohj-lp__je,
.hohj-lp__karte--gehoben .hohj-lp__was,
.hohj-lp__karte--gehoben li { color: rgba( 243, 241, 237, .74 ); }

.hohj-lp__karte--gehoben .hohj-lp__was { border-top-color: rgba( 243, 241, 237, .18 ); }

.hohj-lp__karte--gehoben li::before {
	background-color: rgba( 243, 241, 237, .14 );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFDC0D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.hohj-lp__karte--gehoben .hohj-lp__band { display: none; }

.hohj-lp__karte--gehoben .hohj-lp__feld {
	background: rgba( 243, 241, 237, .1 );
	border-color: rgba( 243, 241, 237, .2 );
	color: var(--t-grund);
}

.hohj-lp__karte--gehoben .hohj-lp__feld::placeholder { color: rgba( 243, 241, 237, .5 ); }
.hohj-lp__karte--gehoben .hohj-lp__ortwahl { border-top-color: rgba( 243, 241, 237, .18 ); }
.hohj-lp__karte--gehoben .hohj-lp__stand { color: rgba( 243, 241, 237, .66 ); }
.hohj-lp__karte--gehoben .hohj-lp__combo-pfeil { color: rgba( 243, 241, 237, .6 ); }

.hohj-lp__sparen { background: var(--t-signal); color: var(--t-tinte); top: var(--t-6); left: auto; right: var(--t-6); }

/* ---- Knopf mit Pfeil ---- */

.hohj-lp__karte .hohj-knopf::after { content: " →"; }

/* ==========================================================================
   Regler: ein Feld
   ========================================================================== */

.hohj-lp__regler {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: min( 460px, 100% );
	padding: 6px;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-08);
	border-radius: 18px;
	box-shadow: 0 8px 28px rgba( 22, 21, 15, .07 );
}

.hohj-lp__regler .hohj-lp__wahl {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--t-grund);
	border-radius: 12px;
}

.hohj-lp__regler .hohj-lp__tab { flex: 1; padding: 12px 8px; font-size: var(--t-s); }

.hohj-lp__landfeld { width: 100%; }
.hohj-lp__landcombo { width: 100%; }

.hohj-lp__landknopf {
	width: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 14px 14px;
	font-size: var(--t-l);
	font-weight: 500;
}

.hohj-lp__landknopf:hover { background: var(--t-grund); border-radius: 12px; }

.hohj-lp__landtext {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.hohj-lp__landliste { width: 100%; left: 0; transform: none; }

/* ==========================================================================
   Zurueckgenommen: kein Schwarz, kein Gelb auf Knoepfen, helleres Beige
   ========================================================================== */

:root { --t-karte: #F0EDE8; }

.hohj-lp__karte {
	background: var(--t-karte);
	border: 1px solid transparent;
	border-radius: 22px;
	padding: var(--t-6);
	color: var(--t-tinte);
}

/* Featured hebt sich durch Helligkeit ab, nicht durch Dunkelheit. */
.hohj-lp__karte--gehoben {
	background: var(--t-flaeche);
	color: var(--t-tinte);
	border-color: rgba( 22, 21, 15, .1 );
	box-shadow: 0 18px 44px rgba( 22, 21, 15, .1 );
}

.hohj-lp__karte--gehoben .hohj-lp__je,
.hohj-lp__karte--gehoben .hohj-lp__was,
.hohj-lp__karte--gehoben li { color: var(--t-tinte-72); }

.hohj-lp__karte--gehoben .hohj-lp__was { border-top-color: rgba( 22, 21, 15, .1 ); }

.hohj-lp__karte--gehoben li::before {
	background-color: rgba( 22, 21, 15, .08 );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316150F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

/* Kein gelber Knopf mehr - alle vier gleich. */
.hohj-lp__karte .hohj-knopf { background: var(--t-tinte); color: var(--t-flaeche); }

/* ---- Micro statt Pille ---- */

.hohj-lp__pille { display: none; }

.hohj-lp__micro {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
	margin-bottom: var(--t-5);
}

.hohj-lp__marke-oben {
	position: absolute;
	top: var(--t-6);
	right: var(--t-6);
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--t-signal);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--t-tinte);
}

.hohj-lp__sparen {
	top: var(--t-6);
	right: var(--t-6);
	left: auto;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--t-signal);
	color: var(--t-tinte);
	font-size: .66rem;
	letter-spacing: .06em;
}

/* ==========================================================================
   Steuerung: Umschalter, darunter zwei Felder mit Abstand
   ========================================================================== */

.hohj-lp__regler { display: contents; }

.hohj-lp__steuerung { gap: var(--t-4); }

.hohj-lp__wahl {
	display: inline-flex;
	margin: var(--t-2) 0 var(--t-5);
	padding: 5px;
	background: var(--t-karte);
	border-radius: 14px;
}

.hohj-lp__tab { padding: 12px 26px; font-size: var(--t-s); }
.hohj-lp__tab.is-aktiv { background: var(--t-flaeche); box-shadow: 0 2px 6px rgba( 22, 21, 15, .08 ); }

.hohj-lp__felder {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 280px ) );
	gap: var(--t-3);
	width: 100%;
	max-width: 580px;
	margin-inline: auto;
}

.hohj-lp__combo .hohj-lp__feld {
	width: 100%;
	padding: 16px 44px 16px 18px;
	font-size: var(--t-m);
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: 14px;
	text-align: left;
}

.hohj-lp__combo .hohj-lp__feld:focus {
	border-color: var(--t-tinte);
	box-shadow: 0 0 0 3px rgba( 22, 21, 15, .06 );
}

/* Die Liste faehrt unter dem Feld auf - ohne zweiten Rahmen darum. */
.hohj-lp__combo-liste {
	top: calc( 100% + 6px );
	padding: 6px;
	border: 1px solid var(--t-tinte-08);
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba( 22, 21, 15, .16 );
	text-align: left;
	max-height: 300px;
}

.hohj-lp__combo-liste li { padding: 11px 13px; border-radius: 9px; }
.hohj-lp__combo-liste li.ohne-status::after { content: none; }
.hohj-lp__combo-liste li.is-gewaehlt { background: var(--t-tinte); color: var(--t-grund); }

.hohj-lp__stand {
	margin-top: var(--t-3) !important;
	min-height: 0;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
	text-align: center;
}

.hohj-lp__landknopf,
.hohj-lp__landliste,
.hohj-lp__landsuche { display: none; }

@media ( max-width: 620px ) {
	.hohj-lp__felder { grid-template-columns: 1fr; max-width: 340px; }
	.hohj-lp__wahl { width: 100%; }
	.hohj-lp__tab { flex: 1; padding: 12px 10px; }
}

/* ---- 1. Marken sitzen wieder in der Karte, Featured bekommt den Rahmen ---- */

.hohj-lp__marke-oben,
.hohj-lp__sparen {
	position: absolute;
	top: var(--t-6);
	right: var(--t-6);
	left: auto;
	bottom: auto;
}

.hohj-lp__band { display: none; }

.hohj-lp__karte--gehoben {
	border: 2px solid var(--t-signal);
	box-shadow: 0 18px 44px rgba( 22, 21, 15, .1 );
}

/* ---- 2. Das Micro unterlegt und deutlich ---- */

.hohj-lp__micro {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba( 22, 21, 15, .08 );
	color: var(--t-tinte);
	font-size: .7rem;
	letter-spacing: .12em;
	margin-bottom: var(--t-5);
}

.hohj-lp__karte--gehoben .hohj-lp__micro { background: rgba( 22, 21, 15, .07 ); }

/* ---- 3. Dieselbe Farbe in allen vier Karten ---- */

.hohj-lp__karte .hohj-lp__je,
.hohj-lp__karte--gehoben .hohj-lp__je { color: var(--t-tinte-72); }

/* ---- Marken sitzen auf der Kante, nicht in der Karte ---- */

.hohj-lp__marke-oben,
.hohj-lp__sparen {
	top: -13px;
	left: var(--t-6);
	right: auto;
	padding: 6px 13px;
	font-size: .68rem;
}

.hohj-lp__sparen { background: var(--t-tinte); color: var(--t-grund); }
.hohj-lp__marke-oben { background: var(--t-signal); color: var(--t-tinte); }

.hohj-lp__karten { margin-top: calc( var(--t-7) + 13px ); }

/* ---- Das Micro als Badge: nur so breit wie sein Text ---- */

.hohj-lp__micro {
	align-self: flex-start;
	width: auto;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba( 22, 21, 15, .1 );
	color: var(--t-tinte);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: var(--t-6);
}

.hohj-lp__karte--gehoben .hohj-lp__micro { background: rgba( 22, 21, 15, .09 ); }

/* ---- Marken sitzen rechts auf der Kante ---- */

.hohj-lp__marke-oben,
.hohj-lp__sparen {
	left: auto;
	right: var(--t-6);
}

/* ---- Mehr Luft zwischen den Karten ---- */

.hohj-lp__karten { gap: 30px; }

/* ---- Die Featured-Karte bekommt zusätzlich Luft ---- */

.hohj-lp__karte--gehoben { margin-inline: 8px; }

/* ==========================================================================
   Featured: erst prüfen, dann schalten
   ==========================================================================
   Der Ort ersetzt den Knopf und wird zum Ablauf. Sichtbar ist immer nur,
   was im jeweiligen Schritt gilt.
   ========================================================================== */

/* Das Landfeld bleibt allein in der Steuerung - gleiche Breite wie zuvor. */
.hohj-lp__felder { grid-template-columns: minmax( 0, 280px ); max-width: 280px; }

.hohj-lp__pruef {
	margin-top: auto;
	display: grid;
	gap: var(--t-3);
}

.hohj-lp__ergebnis {
	padding: 12px 14px;
	border-radius: 12px;
	font-size: .9rem;
	line-height: 1.4;
	font-weight: 500;
}

.hohj-lp__ergebnis.is-frei { background: rgba( 255, 220, 13, .32 ); color: var(--t-tinte); }
.hohj-lp__ergebnis.is-voll { background: rgba( 22, 21, 15, .07 ); color: var(--t-tinte-72); }

.hohj-lp__wechsel {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: .84rem;
	color: var(--t-tinte-50);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hohj-lp__wechsel:hover { color: var(--t-tinte); }

.hohj-lp__pruef[data-schritt="1"] [data-feld="featuredstand"],
.hohj-lp__pruef[data-schritt="1"] [data-featured-knopf],
.hohj-lp__pruef[data-schritt="1"] [data-neuerort],
.hohj-lp__pruef[data-schritt="1"] .hohj-lp__ausweg { display: none; }

.hohj-lp__pruef[data-schritt="2"] .hohj-lp__combo--ort,
.hohj-lp__pruef[data-schritt="2"] [data-pruefen],
.hohj-lp__pruef[data-schritt="2"] .hohj-lp__ausweg { display: none; }

.hohj-lp__pruef[data-schritt="3"] .hohj-lp__combo--ort,
.hohj-lp__pruef[data-schritt="3"] [data-pruefen],
.hohj-lp__pruef[data-schritt="3"] [data-featured-knopf] { display: none; }

.hohj-lp__karte { overflow: visible; }
.hohj-lp__combo--ort { position: relative; z-index: 5; }

/* ---- Pfeile raus, Rahmen raus, Feldhöhe wie Knopf ---- */

.hohj-lp__karte .hohj-knopf::after { content: none; }

.hohj-lp__karte .hohj-knopf,
.hohj-lp__pruef button.hohj-knopf {
	border: 0;
	outline: 0;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	font-size: var(--t-m);
	font-weight: 500;
	min-height: 54px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hohj-lp__pruef .hohj-lp__feld {
	min-height: 54px;
	padding: 0 44px 0 18px;
	color: var(--t-tinte);
}

.hohj-lp__pruef .hohj-lp__feld::placeholder { color: var(--t-tinte-72); }

/* ---- Strich am Knopf endgültig weg, Ortstext mittig ---- */

.hohj-lp__pruef button.hohj-knopf,
.hohj-lp__karte button.hohj-knopf {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	box-shadow: none !important;
	background-image: none !important;
	text-shadow: none;
}

.hohj-lp__pruef .hohj-lp__feld {
	padding: 0 44px;
	text-align: center;
}

.hohj-lp__pruef .hohj-lp__feld::placeholder { text-align: center; }

/* ---- Verstecktes bleibt versteckt ----
   Die Kartenregel für Listen galt auch für die Vorschlagsliste und hat
   deren hidden-Zustand ausgehebelt: sie stand als leerer weißer Streifen
   über dem Knopf. */

.hohj-lp__karte ul[hidden],
.hohj-lp__combo-liste[hidden] { display: none !important; }

.hohj-lp__combo-liste { display: block; }

/* ---- Vorschlagsliste: nach oben, aufgeräumt ---- */

.hohj-lp__combo--ort .hohj-lp__combo-liste {
	top: auto;
	bottom: calc( 100% + 8px );
	padding: 7px;
	border: 1px solid var(--t-tinte-08);
	border-radius: 14px;
	box-shadow: 0 -14px 40px rgba( 22, 21, 15, .16 );
}

/* Die Hakenkreise der Kartenliste galten auch hier - hier gehören sie
   nicht hin. */
.hohj-lp__combo-liste li::before { display: none !important; }

.hohj-lp__combo-liste li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-4);
	padding: 12px 14px;
	border-radius: 10px;
	border: 0;
	font-size: .95rem;
	font-weight: 500;
	color: var(--t-tinte);
}

.hohj-lp__combo-liste li::after {
	font-size: .74rem;
	font-weight: 400;
	letter-spacing: .04em;
	color: var(--t-tinte-50);
}

.hohj-lp__combo-liste li[data-stand="voll"] { color: var(--t-tinte-50); }
.hohj-lp__combo-liste li:hover { background: var(--t-karte); }

/* ---- „Anderen Ort prüfen" über das gelbe Feld ---- */

.hohj-lp__pruef [data-neuerort] { order: -1; }

/* ---- Feld und Liste sind ein Bauteil ---- */

.hohj-lp__combo--ort .hohj-lp__combo-liste {
	bottom: 100%;
	margin-bottom: -1px;
	width: 100%;
	padding: 6px;
	border: 1px solid var(--t-tinte);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -16px 36px rgba( 22, 21, 15, .12 );
	background: var(--t-flaeche);
}

.hohj-lp__combo--ort.is-offen .hohj-lp__feld {
	border-color: var(--t-tinte);
	border-radius: 0 0 14px 14px;
	box-shadow: none;
}

.hohj-lp__combo-liste li { padding: 11px 12px; }

/* ---- Rahmen bleibt hell, auch beim Anklicken ---- */

.hohj-lp__combo--ort .hohj-lp__combo-liste { border-color: var(--t-tinte-14); }

.hohj-lp__combo--ort.is-offen .hohj-lp__feld,
.hohj-lp__pruef .hohj-lp__feld:focus {
	border-color: var(--t-tinte-14);
	box-shadow: none;
}

/* ---- Kein „frei" in der Liste ---- */

.hohj-lp__combo-liste li::after { content: none !important; }

/* ---- Das Ergebnisfeld bleibt einzeilig ---- */

.hohj-lp__ergebnis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hohj-lp__ergebnis-ort {
	display: inline-block;
	max-width: 8.5em;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

/* ---- Liste: kein Schatten, kein weißes Loch, dichtere Zeilen ---- */

.hohj-lp__combo--ort .hohj-lp__combo-liste {
	background: var(--t-karte);
	box-shadow: none;
	padding: 5px;
	border-color: var(--t-tinte-14);
}

.hohj-lp__combo-liste li {
	padding: 9px 12px;
	font-size: .92rem;
	font-weight: 500;
}

.hohj-lp__combo-liste li:hover { background: var(--t-flaeche); }

/* ---- Bewegung zurücknehmen ---- */

.hohj-lp__karte:hover { transform: translateY( -1px ); }
.hohj-lp__karte .hohj-knopf:hover { transform: none; }

/* ---- Ohne Ort: das Feld sagt es selbst ---- */

.hohj-lp__combo--ort.is-fehlt .hohj-lp__feld {
	border-color: var(--t-signal);
	box-shadow: 0 0 0 3px rgba( 255, 220, 13, .32 );
}

/* ==========================================================================
   Steuerung in einer Zeile
   ==========================================================================
   Erst der Umfang, dann das Land - und das Land nur dann, wenn es eines
   gibt. Bei „In mehreren Ländern" fällt es weg und der Umschalter rückt
   allein in die Mitte.
   ========================================================================== */

.hohj-lp__steuerung {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--t-3);
}

.hohj-lp__frage { flex: 1 0 100%; text-align: center; margin-bottom: var(--t-4); }

.hohj-lp__wahl {
	margin: 0;
	height: 58px;
	align-items: center;
	padding: 5px;
}

.hohj-lp__tab { height: 48px; display: flex; align-items: center; }

.hohj-lp__felder {
	width: auto;
	max-width: none;
	margin: 0;
	grid-template-columns: minmax( 240px, 280px );
}

.hohj-lp__combo--land .hohj-lp__feld {
	height: 58px;
	min-height: 58px;
	padding: 0 44px 0 18px;
}

.hohj-lp__combo--land .hohj-lp__combo-pfeil { top: 50%; }

@media ( max-width: 720px ) {
	.hohj-lp__steuerung { flex-direction: column; }
	.hohj-lp__wahl { width: 100%; }
	.hohj-lp__tab { flex: 1; justify-content: center; }
	.hohj-lp__felder { width: 100%; grid-template-columns: 1fr; }
}

/* ---- Verstecktes bleibt versteckt, überall in diesem Bereich ----
   display-Regeln überschreiben sonst das hidden-Attribut. */

.hohj-lp [hidden] { display: none !important; }

/* ---- Eine Frage, ein Feld ---- */

.hohj-lp__wahl { display: none; }

.hohj-lp__steuerung { flex-direction: column; }
.hohj-lp__frage { flex: none; margin-bottom: var(--t-5); }

.hohj-lp__felder { grid-template-columns: minmax( 300px, 380px ); }

/* "In mehreren Ländern" ist die andere Art von Antwort - es steht oben
   und ist abgesetzt, damit es nicht wie ein Land aussieht. */
.hohj-lp__combo--land .hohj-lp__combo-liste li.is-intl {
	font-weight: 600;
	margin-bottom: 5px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--t-tinte-08);
	border-radius: 10px 10px 0 0;
}

/* ---- Umschalter zurück: darüber, nicht daneben ----
   Erst die Entscheidung über den Umfang, darunter die Antwort auf das
   Land. Untereinander, weil das eine dem anderen folgt. */

.hohj-lp__wahl { display: inline-flex; margin: 0 0 var(--t-4); }
.hohj-lp__steuerung { flex-direction: column; align-items: center; }

/* ==========================================================================
   Steuerung: eine Linie, linksbündig mit der ersten Karte
   ==========================================================================
   Reihenfolge: Frage, Land, Umschalter. Der Block sitzt im selben
   Innenmaß wie die Karten, beginnt also an derselben Kante.
   ========================================================================== */

.hohj-lp__steuerung {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	text-align: left;
	gap: var(--t-4);
	margin-bottom: var(--t-7);
}

.hohj-lp__frage {
	flex: 0 0 auto;
	order: 1;
	margin: 0;
	font-size: clamp( 1.5rem, 2vw, 2rem );
}

.hohj-lp__felder {
	order: 2;
	margin: 0;
	grid-template-columns: minmax( 240px, 300px );
}

.hohj-lp__wahl { order: 3; margin: 0; }

@media ( max-width: 900px ) {
	.hohj-lp__steuerung { flex-direction: column; align-items: flex-start; }
	.hohj-lp__felder { width: 100%; grid-template-columns: 1fr; }
	.hohj-lp__wahl { width: 100%; }
	.hohj-lp__tab { flex: 1; justify-content: center; }
}

/* ---- Steuerung folgt dem Kartenraster ----
   Vier Spalten, gleicher Abstand: die Frage steht über der ersten Karte,
   das Landfeld beginnt exakt an der Kante der zweiten. */

.hohj-lp__steuerung {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 30px;
	align-items: center;
}

.hohj-lp__frage { grid-column: 1; }

.hohj-lp__felder {
	grid-column: 2;
	margin-left: 8px;
	grid-template-columns: 1fr;
	max-width: none;
}

.hohj-lp__wahl { grid-column: 3 / span 2; justify-self: start; }

@media ( max-width: 1079px ) {
	.hohj-lp__steuerung { display: flex; flex-direction: column; align-items: flex-start; }
	.hohj-lp__felder { margin-left: 0; width: 100%; }
	.hohj-lp__wahl { width: 100%; }
	.hohj-lp__tab { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Beide Listen gleich: heller Ton, zarte Trennlinien, am Feld
   ========================================================================== */

:root { --t-liste: #F7F5F2; }

.hohj-lp__combo-liste {
	background: var(--t-liste);
	border: 1px solid var(--t-tinte-14);
	box-shadow: none;
	padding: 4px;
}

.hohj-lp__combo-liste li {
	border-radius: 0;
	border-bottom: 1px solid var(--t-tinte-08);
}

.hohj-lp__combo-liste li:last-child { border-bottom: 0; }
.hohj-lp__combo-liste li:hover { background: var(--t-flaeche); }

/* Ort: nach oben, Land: nach unten - beide am Feld angewachsen. */

.hohj-lp__combo--ort .hohj-lp__combo-liste {
	background: var(--t-liste);
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}

.hohj-lp__combo--land .hohj-lp__combo-liste {
	top: calc( 100% - 1px );
	bottom: auto;
	margin: 0;
	width: 100%;
	border-radius: 0 0 14px 14px;
	border-top: 0;
}

.hohj-lp__combo--land.is-offen .hohj-lp__feld {
	border-radius: 14px 14px 0 0;
	border-color: var(--t-tinte-14);
	box-shadow: none;
}

/* ==========================================================================
   Beide Listen identisch — nur die Richtung unterscheidet sich
   ==========================================================================
   Eine Definition für das Aussehen, zwei kurze Blöcke für oben und
   unten. So können die beiden nicht wieder auseinanderlaufen.
   ========================================================================== */

.hohj-lp__combo--land .hohj-lp__combo-liste,
.hohj-lp__combo--ort .hohj-lp__combo-liste {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 40;
	padding: 5px;
	background: var(--t-karte);
	border: 1px solid var(--t-tinte-14);
	box-shadow: none;
	max-height: 300px;
	overflow-y: auto;
	text-align: left;
}

.hohj-lp__combo--land .hohj-lp__combo-liste li,
.hohj-lp__combo--ort .hohj-lp__combo-liste li {
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--t-tinte);
}

.hohj-lp__combo--land .hohj-lp__combo-liste li:hover,
.hohj-lp__combo--ort .hohj-lp__combo-liste li:hover { background: var(--t-flaeche); }

/* Ort: nach oben */
.hohj-lp__combo--ort .hohj-lp__combo-liste {
	top: auto;
	bottom: 100%;
	margin: 0 0 -1px;
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
}

.hohj-lp__combo--ort.is-offen .hohj-lp__feld { border-radius: 0 0 14px 14px; }

/* Land: nach unten */
.hohj-lp__combo--land .hohj-lp__combo-liste {
	top: 100%;
	bottom: auto;
	margin: -1px 0 0;
	border-top: 0;
	border-radius: 0 0 14px 14px;
}

.hohj-lp__combo--land.is-offen .hohj-lp__feld { border-radius: 14px 14px 0 0; }

/* ==========================================================================
   Beide Listen identisch — nur die Richtung unterscheidet sich
   ========================================================================== */

.hohj-lp__combo--land .hohj-lp__combo-liste,
.hohj-lp__combo--ort .hohj-lp__combo-liste {
	width: 100%;
	padding: 5px;
	background: var(--t-liste);
	border: 1px solid var(--t-tinte-14);
	box-shadow: none;
	text-align: left;
}

.hohj-lp__combo--land .hohj-lp__combo-liste li,
.hohj-lp__combo--ort .hohj-lp__combo-liste li {
	padding: 9px 12px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--t-tinte);
	border-radius: 0;
	border-bottom: 1px solid var(--t-tinte-08);
	background: transparent;
}

.hohj-lp__combo-liste li:last-child { border-bottom: 0; }

.hohj-lp__combo-liste li:hover { background: var(--t-flaeche); }

/* Kein aktiver Zustand - die Auswahl steht ohnehin im Feld. */
.hohj-lp__combo-liste li.is-gewaehlt {
	background: transparent;
	color: var(--t-tinte);
}

.hohj-lp__combo-liste li.is-gewaehlt:hover { background: var(--t-flaeche); }

/* Ort nach oben, Land nach unten. */

.hohj-lp__combo--ort .hohj-lp__combo-liste {
	top: auto;
	bottom: 100%;
	margin-bottom: -1px;
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}

.hohj-lp__combo--land .hohj-lp__combo-liste {
	top: 100%;
	bottom: auto;
	margin-top: -1px;
	border-radius: 0 0 14px 14px;
	border-top: 0;
}

/* ---- Vertiefung, nur in der Grundkarte ----
   Zugeklappt kostet sie eine Zeile; aufgeklappt wächst nur diese eine
   Karte. Die Reihe der Knöpfe bleibt davon unberührt, weil der
   Bereich darunter sitzt. */

.hohj-lp__mehr {
	margin-top: var(--t-4);
	border-top: 1px solid var(--t-tinte-08);
	padding-top: var(--t-4);
}

.hohj-lp__mehr summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding-right: 22px;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--t-tinte-50);
}

.hohj-lp__mehr summary::-webkit-details-marker { display: none; }

.hohj-lp__mehr summary::after {
	content: "+";
	position: absolute;
	right: 2px;
	top: -2px;
	font-size: 1.1rem;
	font-weight: 400;
}

.hohj-lp__mehr[open] summary::after { content: "–"; }
.hohj-lp__mehr summary:hover { color: var(--t-tinte); }

.hohj-lp__mehr ul {
	margin: var(--t-4) 0 0;
	display: grid;
	gap: 10px;
}

.hohj-lp__mehr li {
	padding: 0 0 0 14px;
	border: 0;
	font-size: .86rem;
	line-height: 1.4;
	color: var(--t-tinte-72);
	position: relative;
}

.hohj-lp__mehr li::before {
	display: block !important;
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 5px;
	height: 1px;
	border-radius: 0;
	background: var(--t-tinte-50) !important;
	background-image: none !important;
}

/* ---- Keine Freiräume: Karten sind so hoch wie ihr Inhalt ---- */

.hohj-lp__karten { align-items: start; }
.hohj-lp__karte .hohj-knopf { margin-top: var(--t-5); }
.hohj-lp__pruef { margin-top: var(--t-5); }

/* ---- „Was noch dazugehört" als schlichter Link ---- */

.hohj-lp__mehr { border-top: 0; padding-top: 0; margin-top: var(--t-4); }

.hohj-lp__mehr summary {
	padding-right: 0;
	font-size: .88rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--t-tinte-72);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hohj-lp__mehr summary::after { content: none; }
.hohj-lp__mehr[open] summary::after { content: none; }
.hohj-lp__mehr summary:hover { color: var(--t-tinte); }

/* ---- Zurück zu gleicher Höhe, Knopf unten ---- */

.hohj-lp__karten { align-items: stretch; }
.hohj-lp__karte .hohj-knopf { margin-top: auto; }
.hohj-lp__pruef { margin-top: auto; }
.hohj-lp__mehr { margin-top: var(--t-4); margin-bottom: var(--t-5); }

/* ---- Die Punkte im Aufklapper wie überall ---- */

.hohj-lp__mehr ul { gap: 13px; }

.hohj-lp__mehr li {
	padding: 0 0 0 30px;
	font-size: .9rem;
	line-height: 1.35;
}

.hohj-lp__mehr li::before {
	left: 0;
	top: 1px;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background: rgba( 22, 21, 15, .08 ) no-repeat center !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316150F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") !important;
	background-size: 11px 11px !important;
}

/* ==========================================================================
   Aufklappen betrifft nur die eine Karte
   ==========================================================================
   Bei gleicher Höhe zieht das Öffnen die ganze Reihe mit - deshalb
   bekommt jede Karte ihre eigene Höhe. Die Punkte fahren über dem Link
   auf und setzen die Liste fort, statt eine zweite zu beginnen.
   ========================================================================== */

.hohj-lp__karten { align-items: start; }

/* Der Link steht mittig über dem Knopf. */
.hohj-lp__mehr {
	display: flex;
	flex-direction: column-reverse;
	margin: 0 0 var(--t-5);
	border: 0;
	padding: 0;
}

.hohj-lp__karte ul + .hohj-lp__mehr { margin-top: -19px; }

.hohj-lp__mehr summary {
	text-align: center;
	padding: 0;
	margin-top: var(--t-5);
}

/* Die aufgeklappten Punkte hängen sich an die Liste darüber an. */
.hohj-lp__mehr ul { margin: 13px 0 0; }

/* ---- Kein bleibender Rahmen am Textlink ---- */

.hohj-lp__mehr summary:focus { outline: none; }
.hohj-lp__mehr summary:focus-visible { outline: 2px solid var(--t-tinte-14); outline-offset: 3px; border-radius: 6px; }

/* ---- Zeilen im Aufklapper brechen nicht ---- */

.hohj-lp__mehr li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Der Bereich unter den Karten rückt näher ---- */

.hohj-lp__quer { margin-top: var(--t-5) !important; }
.hohj-lp__klein { margin-top: var(--t-6) !important; }

/* ---- Internationale Karten stehen genau wie die anderen ---- */

.hohj-lp__karten--zwei { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

/* ==========================================================================
   Grossabnehmer: entschieden, aber noch nicht kaufbar
   ==========================================================================
   Die Karte steht im selben Raster und hat dieselben Masse. Sie tritt nur
   eine Spur zurueck - der Preis bleibt lesbar, weil er die kleinen Zahlen
   daneben klein aussehen laesst. Ein blasser Preis wuerde genau das
   verschenken. */


/* Der Knopf ist keiner. Er muss lesbar bleiben und darf nicht so
   aussehen, als haette man ihn nur vergessen anzuschliessen. Die
   Regel weiter oben faerbt jeden Knopf in einer Karte dunkel -
   deshalb hier ausdruecklich zurueck auf Umriss. */

.hohj-lp__karte--bald .hohj-knopf {
	background: transparent;
	color: var(--t-tinte-72);
	border: 1px solid var(--t-tinte-14);
	cursor: default;
}

.hohj-lp__karte--bald .hohj-knopf:hover { transform: none; }
.hohj-lp__karte--bald .hohj-knopf::after { content: none; }

/* ---- Der Aufklappteil auf den grossen Karten steht mittig wie der
   auf der Einzelanzeige, nur eine Spur zurueckgenommen. ---- */

.hohj-lp__karte--bald .hohj-lp__mehr summary { color: var(--t-tinte-72); }

/* ==========================================================================
   Der Beschreibungssatz bekommt feste zwei Zeilen
   ==========================================================================
   Vorher lief er je Karte ueber eine oder zwei Zeilen - dadurch begannen
   die Aufzaehlungen darunter auf unterschiedlicher Hoehe, und beim
   Umschalten sprang die Kante. Zwei Zeilen sind reserviert, laenger darf
   kein Satz werden. */

.hohj-lp__was {
	min-height: calc( 2 * 1.5em );
	display: block;
}

/* ==========================================================================
   Ueberschriften stehen an der Kante der ersten Karte
   ==========================================================================
   Die Frage sass mittig in ihrer Rasterspalte und damit sichtbar weiter
   rechts als die Karte darunter. Eine Ueberschrift, die nicht auf der
   Kante steht, laesst die ganze Reihe schief aussehen. */

.hohj-lp__steuerung { text-align: left; }
.hohj-lp__frage { text-align: left; }

/* ==========================================================================
   Woher das Bild kommt
   ==========================================================================
   Steht unter den Kacheln statt in ihnen: in der Karte hat der
   Aufklappteil die gemeinsame Hoehe nach oben gezogen und in den
   nationalen Karten Loecher hinterlassen. */

.hohj-lp__bildweg {
	margin-top: var(--t-8);
	padding-top: var(--t-7);
	border-top: 1px solid var(--t-tinte-08);
}

.hohj-lp__bildweg h3 {
	margin: 0 0 var(--t-3) !important;
	font-size: clamp( 1.3rem, 1.7vw, 1.7rem );
	font-weight: 600;
	letter-spacing: -.02em;
}

.hohj-lp__bildweg-satz {
	max-width: 62ch;
	margin: 0 0 var(--t-7) !important;
	font-size: var(--t-m);
	line-height: 1.55;
	color: var(--t-tinte-72);
}

.hohj-lp__bildweg-liste {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hohj-lp__bildweg-liste .hohj-lp__nr {
	display: block;
	margin-bottom: var(--t-3);
	font-size: 1.7rem;
	line-height: 1;
	color: var(--t-tinte-50);
}

.hohj-lp__bildweg-liste h4 {
	margin: 0 0 var(--t-2) !important;
	font-size: var(--t-m);
	font-weight: 600;
}

.hohj-lp__bildweg-liste p {
	margin: 0 !important;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte-72);
}

@media ( max-width: 1079px ) {
	.hohj-lp__bildweg-liste { grid-template-columns: repeat( 2, 1fr ); gap: var(--t-6); }
}

@media ( max-width: 620px ) {
	.hohj-lp__bildweg-liste { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Die beiden grossen Stufen: dunkel statt blass
   ==========================================================================
   Vorher traten sie zurueck - und damit trat das Beste an der Seite
   zurueck. Sie bekommen jetzt Gewicht, aber nicht den gelben Rahmen:
   Gelb gehoert im anderen Reiter zu Featured, und zwei gelbe Rahmen
   nebeneinander waeren zwei Rufe gleichzeitig. Dunkel sagt dasselbe
   leiser und passt zum Abschluss der Seite. Das einzige Gelb hier ist
   die Marke oben - sie traegt die Aussage, dass es die Stufe gibt. */

.hohj-lp__karte--bald {
	background: var(--t-tinte);
	border-color: var(--t-tinte);
	color: var(--t-grund);
}

.hohj-lp__karte--bald .hohj-lp__micro {
	background: rgba( 243, 241, 237, .12 );
	color: var(--t-grund);
}

.hohj-lp__karte--bald .hohj-lp__betrag { color: var(--t-grund); }

.hohj-lp__karte--bald .hohj-lp__je { color: rgba( 243, 241, 237, .55 ); }

.hohj-lp__karte--bald .hohj-lp__was {
	color: rgba( 243, 241, 237, .78 );
	border-top-color: rgba( 243, 241, 237, .16 );
}

.hohj-lp__karte--bald li { color: rgba( 243, 241, 237, .82 ); }

.hohj-lp__karte--bald li::before {
	background-color: rgba( 243, 241, 237, .12 );
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFDC0D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.hohj-lp__karte--bald .hohj-lp__sparen {
	background: var(--t-signal);
	color: var(--t-tinte);
}

.hohj-lp__karte--bald .hohj-knopf {
	background: transparent;
	color: var(--t-grund);
	border: 1px solid rgba( 243, 241, 237, .3 );
}

/* ==========================================================================
   Die zweite Ueberschrift nimmt den freien Platz mit
   ==========================================================================
   Im internationalen Reiter faellt das Laenderfeld weg - die zweite
   Rasterspalte stand leer und sah nach Fehler aus. Die Aussage laeuft
   deshalb ueber beide Spalten und fuellt die Zeile, statt sie
   halb leer zu lassen. */

.hohj-lp__frage--weit { grid-column: 1 / span 2; }

@media ( max-width: 1079px ) {
	.hohj-lp__frage--weit { grid-column: auto; }
}

/* ==========================================================================
   Das Konto
   ==========================================================================
   Eine Ansicht statt drei: Anzeigen, Guthaben, Rechnungen. Gebaut aus
   denselben Werten wie die Preisseite, damit es sich nicht anfuehlt wie
   ein anderes Produkt. */

.hohj-konto {
	max-width: 900px;
	margin-inline: auto;
	padding: var(--t-8) var(--t-5) var(--t-9);
	font-family: var(--t-sans);
	color: var(--t-tinte);
}

.hohj-konto__reiter {
	display: flex;
	gap: 4px;
	padding: 5px;
	margin-bottom: var(--t-7);
	background: var(--t-grund-tief);
	border-radius: var(--t-ecke-karte);
	width: max-content;
	max-width: 100%;
}

.hohj-konto__reiter-knopf {
	padding: 11px 20px;
	border-radius: var(--t-ecke-feld);
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-50);
	text-decoration: none;
}

.hohj-konto__reiter-knopf.is-aktiv {
	background: var(--t-flaeche);
	color: var(--t-tinte);
	box-shadow: 0 1px 2px rgba( 22, 21, 15, .06 );
}

.hohj-konto__hinweis {
	padding: 14px 18px;
	margin-bottom: var(--t-6) !important;
	border-radius: var(--t-ecke-feld);
	background: rgba( 255, 220, 13, .3 );
	font-size: var(--t-s);
}

.hohj-konto__leer {
	padding: var(--t-7);
	border-radius: var(--t-ecke-karte);
	background: var(--t-grund-tief);
	text-align: center;
	color: var(--t-tinte-72);
}

.hohj-konto__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--t-3);
}

.hohj-konto__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-5);
	padding: var(--t-5);
	background: var(--t-flaeche);
	border-radius: var(--t-ecke-karte);
}

.hohj-konto__zustand {
	display: inline-block;
	margin-bottom: var(--t-2);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba( 22, 21, 15, .08 );
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hohj-konto__zeile h3 {
	margin: 0 0 4px !important;
	font-size: var(--t-l);
	font-weight: 600;
	letter-spacing: -.01em;
}

.hohj-konto__klein {
	margin: 0 !important;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-konto__tun {
	display: flex;
	align-items: center;
	gap: var(--t-3);
	flex-shrink: 0;
}

.hohj-konto__tun form { margin: 0; }

.hohj-konto__link {
	font-size: var(--t-s);
	color: var(--t-tinte-72);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hohj-konto__melden {
	padding: 10px 16px;
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	background: transparent;
	font: inherit;
	font-size: var(--t-s);
	color: var(--t-tinte);
	cursor: pointer;
}

.hohj-konto__melden:hover { border-color: var(--t-tinte); }

@media ( max-width: 620px ) {
	.hohj-konto__zeile { flex-direction: column; align-items: flex-start; }
	.hohj-konto__reiter { width: 100%; }
	.hohj-konto__reiter-knopf { flex: 1; text-align: center; padding: 11px 8px; }
}

/* ==========================================================================
   Konto: Breite und Grund
   ==========================================================================
   Zwei Fehler auf einmal: Die Begrenzung der Breite kam nicht durch, also
   stand der Knopf am aeussersten Rand. Und die Karten waren weiss auf
   weiss - unsichtbar. Der Abschnitt bekommt deshalb den Seitengrund, die
   Karten heben sich davon ab. */

.hohj-konto {
	max-width: none !important;
	width: 100%;
	padding: 0 !important;
	background: var(--t-grund);
	min-height: 70vh;
}

.hohj-konto__innen {
	max-width: 820px;
	margin-inline: auto;
	padding: var(--t-8) var(--t-5) var(--t-9);
}

.hohj-konto__titel {
	margin: 0 0 var(--t-6) !important;
	font-size: var(--t-2xl);
	font-weight: 600;
	letter-spacing: -.03em;
}

.hohj-konto__zeile {
	border: 1px solid var(--t-tinte-08);
	gap: var(--t-4);
}

.hohj-konto__wer { min-width: 0; }

.hohj-konto__tun .hohj-konto__link {
	padding: 10px 16px;
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	text-decoration: none;
	white-space: nowrap;
}

.hohj-konto__tun .hohj-konto__link:hover { border-color: var(--t-tinte); }

/* ==========================================================================
   Paketwahl
   ==========================================================================
   Die letzte ungestaltete Station im Kaufweg. Aufbau wie die Kontokarten:
   weisse Flaechen auf ruhigem Grund, eine Zeile je Wahl, Preis rechts.

   Bewusst keine vier Karten nebeneinander wie auf der Preisseite. Dort
   wird verglichen, hier wird gewaehlt - und der Kunde hat sich laengst
   entschieden, was er will. Eine Liste liest sich schneller.
   ========================================================================== */

.hohj-paketwahl {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--t-6) 0 var(--t-7);
	font-family: var(--hohj-schrift);
	color: var(--t-tinte);
}

.hohj-paketwahl__kopf { margin-bottom: var(--t-6); }

.hohj-paketwahl__kopf h2 {
	margin: 0 0 var(--t-2) !important;
	font-size: var(--t-xl);
	font-weight: 600;
	letter-spacing: -.015em;
}

.hohj-paketwahl__ort {
	margin: 0 !important;
	font-size: var(--t-m);
	color: var(--t-tinte-72);
}

.hohj-paketwahl__ort strong { font-weight: 600; color: var(--t-tinte); }

.hohj-paketwahl__h3 {
	margin: var(--t-6) 0 var(--t-3) !important;
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: none;
	color: var(--t-tinte-50);
}

.hohj-paketwahl__hinweis {
	margin: 0 !important;
	padding: var(--t-4);
	border-radius: var(--t-ecke-karte);
	background: var(--t-grund-tief);
	font-size: var(--t-m);
	line-height: 1.55;
	color: var(--t-tinte-72);
}

.hohj-paketwahl__liste {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--t-2);
}

.hohj-paketwahl__zeile { margin: 0 !important; }

.hohj-paketwahl__zeile label {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px var(--t-4);
	padding: var(--t-4) var(--t-5);
	border: 1px solid var(--t-tinte-08);
	border-radius: var(--t-ecke-karte);
	background: var(--t-flaeche);
	cursor: pointer;
	transition: border-color .12s ease;
}

.hohj-paketwahl__zeile label:hover { border-color: var(--t-tinte-14); }

.hohj-paketwahl__zeile input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.hohj-paketwahl__zeile label:has( input:checked ) {
	border-color: var(--t-tinte);
}

/* Der Punkt links markiert die Wahl. Gelb, klein, genau eine Sache
   je Bild - so wie das Logo. */
.hohj-paketwahl__zeile label::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 10px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--t-signal);
	opacity: 0;
	transition: opacity .12s ease;
}

.hohj-paketwahl__zeile label:has( input:checked )::before { opacity: 1; }

.hohj-paketwahl__name {
	font-size: var(--t-l);
	font-weight: 600;
	letter-spacing: -.01em;
}

.hohj-paketwahl__preis {
	font-size: var(--t-l);
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

.hohj-paketwahl__klein {
	grid-column: 1 / -1;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte-50);
}

.hohj-paketwahl__h3 + .hohj-paketwahl__klein {
	margin: calc( var(--t-3) * -1 ) 0 var(--t-3);
}

.hohj-paketwahl__knopf {
	display: block;
	width: 100%;
	margin-top: var(--t-6);
	padding: 15px 24px;
	border: 0;
	border-radius: var(--t-ecke-feld);
	background: var(--t-tinte);
	color: #fff;
	font-family: var(--hohj-schrift);
	font-size: var(--t-m);
	font-weight: 600;
	cursor: pointer;
	transition: opacity .12s ease;
}

.hohj-paketwahl__knopf:hover { opacity: .88; }
.hohj-paketwahl__knopf:focus-visible {
	outline: 2px solid var(--t-signal);
	outline-offset: 2px;
}

@media ( max-width: 560px ) {
	.hohj-paketwahl__zeile label { padding: var(--t-4); }
	.hohj-paketwahl__preis { text-align: left; }
	.hohj-paketwahl__zeile label { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Der Deckel ueber dem Feed
   ==========================================================================
   Zwei Abschnitte liegen fest ueber dem fertig gerenderten Feed. Beim
   ersten Tastendruck teilen sie sich: der helle nach oben, der dunkle
   nach unten. Was dazwischen erscheint, war die ganze Zeit da.

   Die Farbteilung ist die Aussage: oben das Publikum, unten die
   Betriebe. Zwei Welten, ein Griff.
   ========================================================================== */

/* ---- Die Breite darf sich nie aendern ----
   Grundregel fuer alles, was scrollen kann: der Platz der Bildlaufleiste
   bleibt dauerhaft reserviert. Sobald irgendwo ein Ueberlauf umschaltet,
   verschwindet eine Leiste, der Innenraum wird breiter, und alles
   Mittige darin rutscht zur Seite.

   Diese Regel loest drei Fehler auf einmal, die vorher einzeln
   behandelt wurden: den Ruck beim Entsperren, den Ruck beim Oeffnen des
   Deckels und den Unterschied zwischen den Browsern.

   Gesperrt wird NUR html, nicht body. "overflow: hidden" auf dem Body
   klemmt den Inhalt an der Body-Hoehe ab - und die faellt zusammen,
   sobald der Deckel fest liegt und damit aus dem Fluss ist. Das Ergebnis
   war eine weisse Seite. */

/* Der Platz der Bildlaufleiste bleibt dauerhaft reserviert - ueber
   scrollbar-gutter, nicht ueber einen Innenabstand.

   Der Unterschied ist entscheidend: Ein Innenabstand auf html gleicht
   nur den Textfluss aus. Feste Elemente wie die Suchleiste und die
   Symbolspalte des Feeds bemessen sich am FENSTER und bekommen davon
   nichts mit - sie springen trotzdem, sobald die echte Leiste erscheint.
   scrollbar-gutter aendert die Fenstermasse selbst und gilt damit auch
   fuer sie.

   Eine zweite, leere Spur entsteht dadurch nicht: Solange gesperrt ist,
   zeichnet der Browser keine Leiste in den reservierten Platz, und der
   Deckel zeigt seine eigene nicht mehr. */
html.hohj-js { scrollbar-gutter: stable; }

html.hohj-deckel-zu { overflow: hidden; }

/* Ohne JavaScript wird nichts gesperrt - die Klasse setzt das Skript. */

.hohj-deckel {
	/* Eine Zahl fuer die Bewegung, vom Skript hier gelesen. */
	--hohj-deckel-dauer: 1100ms;

	/* ---- Die Massreihe der Startseite ----
	   Abgeleitet aus dem Suchfeld: 58 px hoch, 12 px Ecke, 20 px innen.
	   Drei Groessen im Abstand von genau 12 px. Ecke und Innenabstand
	   folgen dem Verhaeltnis des Suchfelds (0,207 und 0,345), nicht einem
	   festen Wert - sonst wirkt das kleinste Feld rund und das groesste
	   eckig, obwohl beide dieselbe Zahl tragen. */
	--hohj-h-gross:  58px;
	--hohj-h-mittel: 46px;
	--hohj-h-klein:  34px;

	--hohj-r-gross:  12px;
	--hohj-r-mittel: 10px;
	--hohj-r-klein:   7px;

	--hohj-p-gross:  20px;
	--hohj-p-mittel: 16px;
	--hohj-p-klein:  12px;

	/* Eine Linie fuer alles, was eine Kontur hat. */
	--hohj-linie: rgba( 22, 21, 15, .22 );
	--hohj-linie-an: rgba( 22, 21, 15, .55 );

	position: relative;
	z-index: 500;

	/* Der Grund gehoert dem Deckel, nicht der Kopfleiste. Solange er auf
	   der Leiste lag, blieb der Streifen darueber durchsichtig und der
	   Feed schien durch. Jetzt ist der ganze Deckel dicht, und die drei
	   Dinge im Kopf liegen ohne eigene Flaeche darauf. */
	background: #FFFFFF;
	font-family: var(--t-sans);
}

/* Fest ueber dem Feed liegt der Deckel nur, wenn er sich auch wieder
   oeffnen laesst. Ohne JavaScript ist er ein gewoehnlicher Abschnitt
   oben auf der Seite, durch den man scrollt - und darunter steht der
   Feed, lesbar fuer jeden und fuer jede Suchmaschine. */
.hohj-js .hohj-deckel {
	position: fixed;
	inset: 0;

	/* Eigene Mindesthoehe. Faellt aus irgendeinem Grund die Hoehe der
	   Haelften zusammen, bleibt der Deckel trotzdem sichtbar statt zu
	   einer weissen Flaeche zu werden. */
	min-height: 100vh;

	overflow-y: auto;
	overflow-x: hidden;

	/* Der Deckel scrollt selbst, zeigt dafuer aber KEINE eigene Leiste.
	   Die Seite haelt ihren Platz ohnehin dauerhaft frei; eine zweite
	   Leiste daneben waere eine tote Spur. Gescrollt wird mit Rad,
	   Finger und Tastatur wie gewohnt. */
	scrollbar-width: none;

	overscroll-behavior: contain;
	scroll-behavior: smooth;
}

.hohj-deckel::-webkit-scrollbar { width: 0; height: 0; }

.hohj-deckel[hidden] { display: none; }

/* Kein Wechsel des Ueberlaufs beim Oeffnen. "overflow: hidden" nimmt
   dem Deckel seine Leiste und macht ihn schlagartig breiter. Gescrollt
   wird ohnehin nicht mehr: das Skript setzt vorher auf null, und
   pointer-events sperrt jede Eingabe. */
.hohj-deckel.is-offen { pointer-events: none; }

.hohj-deckel__oben {
	min-height: calc( 56vh - 92px );
	min-height: calc( 56svh - 92px );
	display: flex;
	flex-direction: column;

	/* KEIN will-change hier. Es haelt den Bereich dauerhaft auf einer
	   eigenen Ebene der Grafikkarte, und dort zeichnet der Browser
	   Schrift ohne Subpixel-Glaettung - genau das sah schwammig aus.
	   Die Ebene wird erst angelegt, wenn die Bewegung startet. */

	/* Lange, ruhige Kurve: langsam los, satt durch, weich aus. Nichts
	   an dieser Bewegung soll hektisch wirken - sie ist der Moment, in
	   dem das Produkt sich oeffnet. */
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
}

/* Der dunkle Abschnitt setzt sich einen Wimpernschlag spaeter in
   Bewegung. Gleichzeitig wirkt mechanisch, versetzt wirkt gewollt. */
.hohj-deckel__unten { transition-delay: 90ms; }

/* Jede Haelfte faehrt genau ihre eigene Strecke: die obere um ihre volle
   Hoehe nach oben, die untere um eine Bildschirmhoehe nach unten. Feste
   105vh liessen die kurze obere Haelfte wegschiessen statt gleiten - die
   Bewegung wirkte hektisch statt wie ein Vorhang. */
.hohj-deckel.is-offen .hohj-deckel__kopf { transform: translateY( -100% ); }
.hohj-deckel.is-offen .hohj-deckel__kopf .hohj-lp__logo { transform: translateY( -200% ); }

/* Die obere Haelfte um ihre Hoehe PLUS die Kopfzeile darueber - sonst
   bleibt unten ein Streifen von ihr stehen, weil sie nicht bei null
   beginnt. */
.hohj-deckel.is-offen .hohj-deckel__oben { transform: translateY( calc( -100% - 100px ) ); }
.hohj-deckel.is-offen .hohj-deckel__unten { transform: translateY( 100vh ); }

@media ( prefers-reduced-motion: reduce ) {
	.hohj-deckel { --hohj-deckel-dauer: 1ms; }
	.hohj-deckel__oben,
	.hohj-deckel__unten { transition: none; transition-delay: 0s; }
}

/* ---------- Das Innenmass ----------
   Die eine Spalte, in der alles auf dem Deckel steht. Sie fehlte in
   0.96.0 vollstaendig: der Kopf klebte oben links, die Karten liefen bis
   an die Fensterkante, nichts stand in einer Flucht. */

.hohj-deckel__innen {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp( 20px, 4vw, 56px );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-5);
}

.hohj-deckel__innen--block { display: block; }

/* Der Kopf spannt ueber die ganze Fensterbreite. Er ist der Rahmen der
   Seite, nicht ihr Inhalt - also gehoert er nicht in die Spalte. */
.hohj-deckel__innen--weit { max-width: none; }

/* Der Punkt haengt fest am Fenster und nimmt im Fluss keinen Platz mehr
   ein - deshalb sitzt hier nur noch die Navigation, rechtsbuendig. */
.hohj-deckel__kopf .hohj-deckel__innen { justify-content: flex-end; }

/* ---------- Folie 1: das Publikum ---------- */

.hohj-deckel__oben {
	background: #FFFFFF;
	color: var(--t-tinte);
}

/* Alles auf dem Deckel steht mittig. Linksbuendig blieb die rechte
   Haelfte leer - und leer ist das Gegenteil von teuer. */
.hohj-deckel__zentriert { text-align: center; }
.hohj-deckel__zentriert h1,
.hohj-deckel__zentriert h2,
.hohj-deckel__zentriert .hohj-deckel__lead { margin-inline: auto; }

/* Keine Leiste. Die drei Dinge liegen einfach obenauf - dazwischen ist
   nichts, der Inhalt laeuft darunter bis an die Browserkante durch. Der
   Kopf selbst nimmt keine Klicks an, nur seine Kinder; sonst waere die
   ganze obere Zone eine unsichtbare Sperre.

   Der Kopf klebt NICHT mehr oben: der Arbeitgeberblock soll aus dem Bild
   scrollen. Nur der Punkt bleibt - der haengt fest am Fenster, siehe
   unten. */
.hohj-deckel__kopf {
	position: relative;
	z-index: 6;
	flex: 0 0 auto;
	padding-block: var(--t-5);
	background: none;
	pointer-events: none;
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
}

.hohj-deckel__kopf a,
.hohj-deckel__kopf nav { pointer-events: auto; }

/* Die Rubrik trennt Arbeitgeber von Suchenden. Sie steht in derselben
   Auszeichnung wie die Rubriken der Folien - kleine Versalien, gedaempft,
   weite Laufweite. Danach eine Haarlinie als Trennung. */
.hohj-deckel__nav-rubrik {
	display: inline-flex;
	align-items: center;
	padding-right: clamp( 14px, 1.6vw, 24px );
	border-right: 1px solid var(--t-tinte-14);
	align-self: stretch;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
	white-space: nowrap;
}

@media ( max-width: 760px ) {
	.hohj-deckel__nav-rubrik { display: none; }
}

/* Die beiden Wege stehen untereinander, gleich breit. Beide sind
   Handlungen fuer Arbeitgeber - nebeneinander lasen sie sich wie zwei
   getrennte Angebote, untereinander wie zwei Schritte desselben Wegs. */
.hohj-deckel__nav-wege {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
}

/* Beide Knoepfe exakt gleich breit. "align-items: stretch" allein
   reichte nicht - die Breite wird hier ausdruecklich gesetzt statt
   erwartet. Der breitere Text bestimmt das Mass, der schmalere zieht
   nach. */
.hohj-deckel__nav-wege a {
	width: 100%;
	justify-content: center;
}

.hohj-deckel__nav {
	display: flex;
	align-items: center;
	gap: clamp( 18px, 2.1vw, 36px );

	/* Nur die Schriftfamilie. Groesse, Staerke und Laufweite stehen an
	   den Knoepfen selbst - geerbt fuehrten sie dazu, dass die beiden
	   verschiedene Groessen hatten, sobald eine Regel nicht griff.
	   Gemessen waren es 14 gegen 17 Pixel.

	   Gewichtsregel der Startseite, zur Erinnerung: je kleiner die
	   Schrift, desto schwerer. --t-m auf 400 in Kopf und Suche, --t-s
	   auf 500 in den Badges, --t-xs auf 600 in der Rubrik. */
	font-family: var(--t-sans);
}

/* Beide Dinge oben rechts tragen dasselbe wie ein Suchfeld: gleiche
   Schrift, gleiche Linie, gleiche Ecke, gleiches Verhalten beim
   Ueberfahren. Nur die mittlere Groesse aus der Massreihe statt der
   grossen. */
.hohj-deckel__nav a {
	display: inline-flex;
	align-items: center;

	/* Groesse am Knopf selbst, nicht geerbt. Anmelden setzt sie ohnehin
	   selbst - stuende sie nur an der Navigation, haetten die beiden
	   Knoepfe verschiedene Groessen, sobald eine der beiden Regeln nicht
	   greift. Genau das war der Fall: 14 gegen 17 Pixel. */
	font-size: var(--t-s);
	font-weight: 400;
	letter-spacing: normal;
	min-height: var(--hohj-h-klein);
	padding-inline: var(--hohj-p-klein);
	border: 1px solid var(--hohj-linie);
	border-radius: var(--hohj-r-klein);
	color: var(--t-tinte);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .14s ease;
}

.hohj-deckel__nav a:hover { border-color: var(--hohj-linie-an); }
.hohj-deckel__nav a:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }

/* Die kleine Stufe der Massreihe - dieselbe wie die Badges. Hoehe,
   Innenabstand, Ecke und Schrift gehen gemeinsam eine Stufe zurueck;
   einzeln verschoben wirkt das kleinere Feld runder als das groessere. */
.hohj-deckel__zugang {
	display: inline-flex;
	align-items: center;
	font-family: var(--t-sans);
	font-size: var(--t-s);
	font-weight: 400;
	letter-spacing: normal;

	/* Tinte, nicht reines Schwarz. Alles andere auf der Seite steht in
	   #16150F - daneben wirkt #000000 kalt und hart. */
	color: var(--t-tinte);
	text-decoration: none;
	min-height: var(--hohj-h-klein);
	padding-inline: var(--hohj-p-klein);

	/* Grauer Rahmen, eine Haarlinie. Das Wort traegt, der Rahmen fasst
	   nur ein - beim Ueberfahren wird er dunkler statt dicker, damit
	   der Knopf nicht springt. */
	border: 1px solid var(--hohj-linie);
	border-radius: var(--hohj-r-klein);
	white-space: nowrap;
	transition: border-color .14s ease;
}

.hohj-deckel__zugang:hover { border-color: var(--hohj-linie-an); }
.hohj-deckel__zugang:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }

.hohj-deckel__mitte {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* 50 px tiefer als die Mitte - der Block sass optisch zu hoch. */
	padding-block: calc( var(--t-7) + 50px ) var(--t-6);
}

.hohj-deckel__marker {
	display: block;
	margin-bottom: var(--t-5);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
}

.hohj-deckel__mitte .hohj-deckel__micro { margin-bottom: var(--t-5); }

.hohj-deckel h1 {
	/* Kein "margin: 0 0 X" - die Kurzschreibweise setzt links und rechts
	   auf null und hebt damit die Zentrierung wieder auf. */
	margin-block: 0 var(--t-7);
	margin-inline: auto;

	/* Dieselbe Behandlung wie die Ueberschriften der unteren Folien, nur
	   eine Stufe groesser aus derselben Reihe. Dort traegt sie - oben
	   hatte ich stattdessen freihaendige Werte gebaut und mich mit jedem
	   Schritt weiter davon entfernt: erst 700, dann 500, dann 400, dann
	   eine andere Schrift. */
	font-size: calc( var(--t-3xl) * .9 );

	/* 700 auf Weiss, waehrend die dunklen Folien mit 600 auskommen.
	   Helle Schrift auf dunklem Grund wirkt optisch fetter - das Auge
	   laesst Licht ueber die Kanten ausfransen. Auf Weiss frisst der
	   Grund die Raender, dieselbe Strichstaerke wirkt duenner. Gleiche
	   Zahl heisst also nicht gleiches Bild. */
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.1;
	max-width: 22ch;
	text-wrap: balance;
}

/* Der erste Satz steht hell und zurueckgenommen, der zweite traegt die
   Botschaft: Fraunces kursiv, echte Schnittfassung - deshalb laedt die
   Startseite die Kursivachse mit. Kein nachgeneigtes Figtree. */
.hohj-deckel h1 > span { font-weight: 500; color: rgba( 22, 21, 15, .34 ); }

.hohj-deckel h1 em {
	/* WONK 0 nimmt die schraegen Alternativformen heraus - das ist das
	   Verspielte an Fraunces. SOFT 0 macht die Enden gerade statt rund.
	   opsz 30 statt 144 haelt den Strichstaerkenunterschied klein.
	   Uebrig bleibt eine ruhige Kursive. */
	font-family: var(--t-serif);
	font-size: calc( 1em - 5px );
	font-style: italic;
	font-weight: 400;
	font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0;
	letter-spacing: -0.012em;
	color: var(--t-tinte);
}

/* ---------- Die Suche ---------- */

.hohj-deckel__suche {
	display: flex;
	gap: var(--t-3);
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 880px;
	margin-inline: auto;
	margin-top: var(--t-7);
}

.hohj-deckel__feld { flex: 1 1 260px; min-width: 0; text-align: left; }

/* Beruf und Ort standen als Beschriftung ueber den Feldern - der
   Platzhalter sagt dasselbe. Die Beschriftung bleibt fuer Vorleser. */
.hohj-deckel__feld label.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.hohj-deckel__feld input {
	width: 100%;
	min-height: var(--hohj-h-gross);
	padding: 0 var(--hohj-p-gross);
	background: none;
	border: 1px solid var(--hohj-linie);
	border-radius: var(--hohj-r-gross);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	color: var(--t-tinte);
	appearance: none;
}

.hohj-deckel__feld input::-webkit-search-cancel-button { display: none; }

/* Ein Rahmen, nicht zwei. Vorher stand der schwarze Rand des Browsers
   und die gelbe Kontur uebereinander. */
.hohj-deckel__feld input:focus {
	outline: none;
	border-color: var(--hohj-linie-an);
	box-shadow: none;
}

.hohj-deckel__knopf {
	flex: 0 0 auto;
	/* Rund und grau statt hartem schwarzem Block. Die Lupe sagt dasselbe
	   wie das Wort und nimmt der Zeile das Gewicht. */
	flex: 0 0 var(--hohj-h-gross);
	display: grid;
	place-items: center;
	width: var(--hohj-h-gross);
	min-height: var(--hohj-h-gross);
	padding: 0;
	/* Vollflaeche, kein Rand. Die Felder tragen die Kontur, der Knopf
	   traegt die Flaeche - sonst waeren alle drei dasselbe. */
	background: var(--t-grund);
	border: 0;
	border-radius: 50%;
	color: var(--t-tinte);
	cursor: pointer;
	transition: background .14s ease;
}

.hohj-deckel__knopf svg { width: 21px; height: 21px; display: block; }

.hohj-deckel__knopf:hover { background: var(--t-grund-tief); }
.hohj-deckel__knopf:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }
.hohj-deckel__knopf--hell { background: #FFFFFF; color: var(--t-tinte); }

.hohj-deckel__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: var(--t-5);
	max-width: 1180px;
	margin-inline: auto;
}

/* Die Bereiche stehen oben im unteren Teil - dort teilt sich der
   Bildschirm. Derselbe Aufbau wie alle anderen Folien: Rubrik, dann
   Ueberschrift, dann Inhalt. */
.hohj-deckel__folie--bereiche { padding-block: var(--t-3) var(--t-9); }

.hohj-deckel__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--hohj-h-klein);
	padding-inline: var(--hohj-p-klein);
	background: #FFFFFF;
	border: 1px solid var(--hohj-linie);

	/* Nicht rund: die Kapselform der Vorlage ist zu weich fuer eine
	   Flaeche mit dreissig Feldern. Die Ecke folgt der Hoehe, nicht
	   einem festen Wert. */
	border-radius: var(--hohj-r-klein);

	font-family: var(--t-sans);
	font-size: var(--t-s);
	font-weight: 500;
	line-height: 1.2;
	color: var(--t-tinte);
	text-decoration: none;
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease;
}

/* Das Sinnbild steht eine Spur zurueck - es begleitet das Wort, es
   ersetzt es nicht. */
.hohj-deckel__chip svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--t-tinte-50);
	transition: color .14s ease;
}

.hohj-deckel__chip:hover svg { color: var(--t-tinte); }

.hohj-deckel__chip.is-versteckt { display: none; }

.hohj-deckel__chip--mehr {
	padding-inline: var(--hohj-p-klein);
	background: none;
	color: var(--t-tinte-50);
}

.hohj-deckel__chip--mehr svg {
	width: 20px;
	height: 20px;
	color: inherit;
}

.hohj-deckel__chip--mehr:hover { border-color: var(--hohj-linie-an); color: var(--t-tinte); }

.hohj-deckel__chip:hover { border-color: var(--hohj-linie-an); }

.hohj-deckel__zaehler {
	margin: var(--t-6) 0 0;
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-50);
}

.hohj-deckel__zaehler strong { font-weight: 700; color: var(--t-tinte); }

.hohj-deckel__hinweis { margin: var(--t-4) 0 0; }

.hohj-deckel__alle {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--t-sans);
	font-size: var(--t-s);
	color: var(--t-tinte-50);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.hohj-deckel__alle:hover { color: var(--t-tinte); }

/* ---------- Versuch: drei Wege ----------
   Drei eigenstaendige Knoepfe, kein Umschalter. Gleiche Hoehe, Ecke und
   Linie wie die Suchfelder - sie stehen in derselben Zeile und duerfen
   nicht wie ein Fremdkoerper wirken. Alle drei oeffnen den Deckel gleich;
   was dahinter erscheint, entsteht spaeter. */

.hohj-deckel__ansicht {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hohj-h-gross);
	min-height: var(--hohj-h-gross);
	padding: 0;
	background: none;
	border: 1px solid var(--hohj-linie);
	border-radius: var(--hohj-r-gross);
	color: var(--t-tinte-72);
	cursor: pointer;
	transition: border-color .14s ease, background .14s ease, color .14s ease;
}

.hohj-deckel__ansicht svg { width: 22px; height: 22px; display: block; }

/* Wie bei den Badges: nur die Linie dunkelt und das Sinnbild wird voll.
   Keine Fuellung - sonst springt die Flaeche beim Ueberfahren. */
.hohj-deckel__ansicht:hover {
	border-color: var(--hohj-linie-an);
	color: var(--t-tinte);
}

.hohj-deckel__ansicht:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 2px; }

@media ( max-width: 760px ) {
	.hohj-deckel__ansicht { flex: 1; width: auto; }
}

/* ---------- Der Hinweis nach unten ---------- */

.hohj-deckel__weiter {
	display: grid;
	place-items: center;
	margin: var(--t-9) auto 0;
	width: 60px;
	height: 60px;
	padding: 0;
	background: none;
	border: 2px solid var(--t-tinte);
	border-radius: 50%;
	cursor: pointer;
	transition: transform .18s ease, opacity .18s ease;
}

.hohj-deckel__weiter span {
	display: block;
	width: 14px;
	height: 14px;
	border-right: 2.2px solid var(--t-tinte);
	border-bottom: 2.2px solid var(--t-tinte);
	transform: rotate( 45deg ) translate( -3px, -3px );
}

.hohj-deckel__weiter:hover { transform: translateY( 4px ); opacity: .88; }

.hohj-deckel__weiter:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 3px; }

/* ---------- Werkzeuge unten links ----------
   Die vierte Ecke. Punkt oben links, Blaettern unten rechts, hier
   Sprache und Dunkelmodus - dazwischen bleibt Weiss.

   Beide sind gesperrt und gedaempft, solange sie nichts tun. Ein Knopf,
   der aussieht wie ein Knopf und nicht reagiert, ist schlimmer als
   einer, dem man ansieht, dass er noch nicht dran ist. */

.hohj-deckel__werkzeuge {
	position: fixed;
	left: clamp( 20px, 4vw, 56px );
	bottom: clamp( 20px, 4vw, 40px );
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
}

.hohj-deckel.is-offen .hohj-deckel__werkzeuge { transform: translateY( 200% ); }

.hohj-deckel__werkzeug {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding-inline: var(--hohj-p-klein);
	background: none;
	border: 1px solid var(--hohj-linie);
	border-radius: 999px;
	font-family: var(--t-sans);
	font-size: var(--t-s);
	font-weight: 400;
	color: var(--t-tinte-72);
	cursor: pointer;
	transition: border-color .14s ease, color .14s ease;
}

.hohj-deckel__werkzeug--rund { width: 44px; padding-inline: 0; justify-content: center; }

.hohj-deckel__werkzeug svg { width: 19px; height: 19px; display: block; }

.hohj-deckel__werkzeug:not( [disabled] ):hover {
	border-color: var(--hohj-linie-an);
	color: var(--t-tinte);
}

.hohj-deckel__werkzeug[disabled] {
	opacity: .42;
	cursor: default;
}

.hohj-deckel__werkzeug:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 3px; }

@media ( max-width: 640px ) {
	.hohj-deckel__werkzeuge { display: none; }
}

/* ---------- Blaettern ----------
   Zwei Kreise unten rechts, nur Linie und Zeichen. Sie haengen fest am
   Fenster wie der Punkt oben links und bilden mit ihm die beiden Ecken,
   in denen die Seite ihre Bedienung ablegt - dazwischen bleibt Weiss. */

.hohj-deckel__blaettern {
	position: fixed;
	right: clamp( 20px, 4vw, 56px );
	bottom: clamp( 20px, 4vw, 40px );
	z-index: 7;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
}

.hohj-deckel.is-offen .hohj-deckel__blaettern { transform: translateY( 200% ); }

.hohj-deckel__pfeil {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--hohj-linie);
	border-radius: 50%;
	color: var(--t-tinte-72);
	cursor: pointer;
	transition: border-color .14s ease, color .14s ease, opacity .18s ease;
}

.hohj-deckel__pfeil svg { width: 20px; height: 20px; display: block; }

.hohj-deckel__pfeil:hover {
	border-color: var(--hohj-linie-an);
	color: var(--t-tinte);
}

.hohj-deckel__pfeil:focus-visible { outline: 2px solid var(--t-signal); outline-offset: 3px; }

/* Versteckt heisst hier durchsichtig, nicht weg: sonst springt der
   verbleibende Kreis beim Ein- und Ausblenden an eine andere Stelle. */
.hohj-deckel__pfeil.is-versteckt {
	opacity: 0;
	pointer-events: none;
}

/* ---------- Folien 2 bis 4 ---------- */

.hohj-deckel__unten {
	display: flex;
	flex-direction: column;
	transition: transform var(--hohj-deckel-dauer) cubic-bezier( .62, .01, .12, 1 );
	transition-delay: 90ms;
}

/* Die Ebene nur fuer die Dauer der Bewegung. Das JavaScript setzt die
   Klasse kurz vor dem Teilen und nimmt sie danach wieder weg. */
/* Sobald sich der Deckel teilt, faellt sein Grund weg - sonst steht das
   Weiss zwischen den auseinanderfahrenden Haelften und man sieht einen
   leeren Bildschirm statt des Feeds. Die Haelften bringen ihre eigenen
   Gruende mit, ihn braucht nur die Kopfzone. */
.hohj-deckel.is-bewegt { background: none; }

/* Waehrend der Bewegung traegt der Kopf seinen Grund selbst mit nach
   oben. Sonst waere genau der obere Streifen durchsichtig, solange die
   Haelften auseinanderfahren, und man saehe die Kacheln durchblitzen. */
.hohj-deckel.is-bewegt .hohj-deckel__kopf { background: #FFFFFF; }

/* KEIN will-change, auch nicht waehrend der Bewegung. Es legt die
   Haelften auf eine eigene Ebene der Grafikkarte, und die wird auf ganze
   Pixel gerundet - steht mittiger Inhalt auf einer halben Pixelposition,
   springt er beim Anlegen der Ebene zur Seite. Die Bewegung laeuft ohne. */

.hohj-deckel__folie {
	padding-block: var(--t-mittel);
	background: #FFFFFF;
	color: var(--t-tinte);
}

.hohj-deckel__folie--grund { background: var(--t-grund); }

.hohj-deckel__folie--dunkel {
	background: var(--t-tinte);
	color: #FFFFFF;
}

.hohj-deckel__micro {
	display: block;
	margin-bottom: var(--t-4);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--t-tinte-50);
}

.hohj-deckel__folie--dunkel .hohj-deckel__micro { color: var(--t-signal); }

.hohj-deckel h2 {
	margin-block: 0 var(--t-5);
	margin-inline: auto;
	font-size: var(--t-2xl);
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.1;
	max-width: 22ch;
	text-wrap: balance;
}

/* Auf dunklem Grund reicht 600 - dort traegt die Polaritaet mit. */
.hohj-deckel__folie--dunkel h2 { font-weight: 600; letter-spacing: -0.028em; color: #FFFFFF; }

.hohj-deckel__lead {
	margin-block: 0 var(--t-8);
	margin-inline: auto;
	max-width: 60ch;
	font-size: var(--t-l);
	line-height: 1.5;
	color: rgba( 255, 255, 255, .66 );
}

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

.hohj-deckel__vier,
.hohj-deckel__drei {
	display: grid;
	gap: var(--t-4);
	margin-top: var(--t-7);
	text-align: left;
}

.hohj-deckel__vier { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.hohj-deckel__drei { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

.hohj-deckel__karte {
	display: flex;
	flex-direction: column;
	padding: var(--t-6) var(--t-5);
	background: var(--t-grund);
	border-radius: var(--t-ecke-karte);
}

.hohj-deckel__folie--grund .hohj-deckel__karte { background: #FFFFFF; }

.hohj-deckel__folie--dunkel .hohj-deckel__karte {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, .16 );
}

.hohj-deckel__karte h3 {
	margin: 0 0 var(--t-3);
	font-size: var(--t-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hohj-deckel__folie--dunkel .hohj-deckel__karte h3 { font-weight: 600; color: #FFFFFF; }

.hohj-deckel__karte p {
	margin: 0;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte-72);
}

.hohj-deckel__folie--dunkel .hohj-deckel__karte p { color: rgba( 255, 255, 255, .64 ); }

.hohj-deckel__karte .hohj-deckel__micro { margin-bottom: var(--t-4); }

/* ---------- Listen in den Karten ---------- */

.hohj-deckel__liste { list-style: none; margin: 0; padding: 0; }

.hohj-deckel__liste a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--t-tinte-08);
	font-size: var(--t-m);
	color: var(--t-tinte);
	text-decoration: none;
}

.hohj-deckel__liste li:last-child a { border-bottom: 0; }
.hohj-deckel__liste a:hover span { text-decoration: underline; text-underline-offset: 3px; }

.hohj-deckel__liste em {
	font-style: normal;
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--t-tinte-50);
	font-variant-numeric: tabular-nums;
}

/* ---------- Tueren unter Folie 4 ---------- */

.hohj-deckel__tueren {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--t-5);
	margin-top: var(--t-8);
	flex-wrap: wrap;
}

.hohj-deckel__karte-link {
	font-size: var(--t-m);
	font-weight: 500;
	color: rgba( 255, 255, 255, .72 );
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hohj-deckel__karte-link:hover { color: #FFFFFF; }

/* ---------- Fuss ---------- */

.hohj-deckel__fuss {
	padding-block: var(--t-8) var(--t-7);
	background: var(--t-tinte);
	color: rgba( 255, 255, 255, .66 );
	border-top: 1px solid rgba( 255, 255, 255, .12 );
}

.hohj-deckel__fuss-spalten {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--t-6);
	text-align: left;
}

.hohj-deckel__marke {
	display: block;
	font-size: var(--t-l);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: #FFFFFF;
}

.hohj-deckel__fuss-satz {
	margin: var(--t-2) 0 0;
	font-size: var(--t-s);
	line-height: 1.5;
	max-width: 30ch;
}

.hohj-deckel__fuss .hohj-deckel__micro { color: rgba( 255, 255, 255, .5 ); }

.hohj-deckel__fuss ul { list-style: none; margin: 0; padding: 0; }
.hohj-deckel__fuss li { margin-bottom: 9px; }

.hohj-deckel__fuss a {
	font-size: var(--t-s);
	color: rgba( 255, 255, 255, .72 );
	text-decoration: none;
}

.hohj-deckel__fuss a:hover { color: #FFFFFF; text-decoration: underline; }

@media ( max-width: 1100px ) {
	.hohj-deckel__vier { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.hohj-deckel__fuss-spalten { grid-template-columns: 1fr 1fr; }
}

@media ( max-width: 860px ) {
	.hohj-deckel__drei { grid-template-columns: 1fr; }
}

@media ( max-width: 640px ) {
	.hohj-deckel__vier { grid-template-columns: 1fr; }
	.hohj-deckel__fuss-spalten { grid-template-columns: 1fr; }
	.hohj-deckel h1 { max-width: 100%; }
	.hohj-deckel__knopf { flex: 1 1 100%; }
}

/* ==========================================================================
   Konto: Kopfzeile
   ==========================================================================
   Logo links, Abmelden rechts. Dieselbe Zeile wie auf der Startseite,
   damit das Konto keine Sackgasse mehr ist.
   ========================================================================== */

.hohj-konto__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-5);
	margin-bottom: var(--t-7);
}

.hohj-konto__abmelden {
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-50);
	text-decoration: none;
	padding: 9px 16px;
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	transition: color .12s ease, border-color .12s ease;
	white-space: nowrap;
}

.hohj-konto__abmelden:hover {
	color: var(--t-tinte);
	border-color: var(--t-tinte);
}

.hohj-konto__abmelden:focus-visible {
	outline: 2px solid var(--t-signal);
	outline-offset: 2px;
}

/* ==========================================================================
   Anmeldeseite (wp-login.php)
   ==========================================================================
   Alles unter body.login. Der Rest der Seite bekommt davon nichts ab,
   und es entsteht kein zweiter Satz Farbwerte - die Angaben unter :root
   gelten auch hier.
   ========================================================================== */

body.login {
	background: var(--t-grund);
	font-family: var(--t-sans);
	color: var(--t-tinte);
}

body.login #login {
	width: 100%;
	max-width: 400px;
	padding: var(--t-9) var(--t-5) var(--t-8);
}

/* ---------- Wortmarke statt WordPress-Zeichen ---------- */

body.login h1 { margin-bottom: var(--t-6); }

body.login h1 a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background-image: none;
	background-size: auto;
	text-indent: 0;
	overflow: visible;
	font-family: var(--t-sans);
	font-size: var(--t-xl);
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--t-tinte);
	text-decoration: none;
}

body.login h1 a::before {
	content: "";
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--t-signal);
	transition: transform .16s ease;
}

body.login h1 a:hover::before { transform: scale( 1.08 ); }
body.login h1 a:focus { box-shadow: none; outline: 0; }

/* ---------- Die Karte ---------- */

body.login form {
	margin-top: 0;
	padding: var(--t-6) var(--t-5);
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-08);
	border-radius: var(--t-ecke-karte);
	box-shadow: none;
}

body.login label {
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-72);
}

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
	width: 100%;
	margin: 6px 0 var(--t-4);
	padding: 13px 14px;
	background: var(--t-grund);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	box-shadow: none;
	font-family: var(--t-sans);
	font-size: var(--t-m);
	color: var(--t-tinte);
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--t-tinte);
	box-shadow: none;
	outline: 2px solid var(--t-signal);
	outline-offset: 1px;
}

body.login .wp-pwd { position: relative; }

body.login .wp-pwd button.button {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--t-tinte-50);
}

body.login .wp-pwd button.button:hover { color: var(--t-tinte); }

/* ---------- Merken und Knopf ---------- */

body.login .forgetmenot label {
	font-size: var(--t-s);
	color: var(--t-tinte-72);
}

body.login .button-primary,
body.login #wp-submit {
	float: none;
	padding: 14px 26px;
	background: var(--t-tinte);
	border: 0;
	border-radius: var(--t-ecke-feld);
	box-shadow: none;
	text-shadow: none;
	font-family: var(--t-sans);
	font-size: var(--t-m);
	font-weight: 600;
	line-height: 1;
	color: var(--t-flaeche);
	cursor: pointer;
	transition: opacity .12s ease;
}

body.login .button-primary:hover,
body.login #wp-submit:hover { background: var(--t-tinte); opacity: .88; }

body.login .button-primary:focus-visible,
body.login #wp-submit:focus-visible {
	outline: 2px solid var(--t-signal);
	outline-offset: 2px;
}

/* ---------- Meldungen ---------- */

body.login #login_error,
body.login .message,
body.login .notice {
	margin-bottom: var(--t-5);
	padding: 14px 16px;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-left: 3px solid var(--t-signal);
	border-radius: var(--t-ecke-feld);
	box-shadow: none;
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte);
}

/* ---------- Wege darunter ---------- */

body.login #nav,
body.login #backtoblog {
	padding: 0;
	margin: var(--t-4) 0 0;
	font-size: var(--t-s);
	text-shadow: none;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--t-tinte-72);
	text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--t-tinte);
	text-decoration: underline;
}

body.login .privacy-policy-page-link {
	margin-top: var(--t-6);
	font-size: var(--t-xs);
}

body.login .language-switcher {
	margin-top: var(--t-5);
	font-size: var(--t-s);
}

body.login .language-switcher select {
	border-radius: var(--t-ecke-feld);
	border: 1px solid var(--t-tinte-14);
	font-family: var(--t-sans);
}

body.login .language-switcher .button {
	background: none;
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	box-shadow: none;
	color: var(--t-tinte-72);
}

/* ==========================================================================
   Anmeldekasten ueber der Startseite
   ========================================================================== */

.hohj-anmelden {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--t-5);
}

.hohj-anmelden[hidden] { display: none; }

.hohj-anmelden__grund {
	position: absolute;
	inset: 0;
	background: rgba( 22, 21, 15, .45 );
}

.hohj-anmelden__kasten {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: 100%;
	overflow-y: auto;
	padding: var(--t-7) var(--t-6) var(--t-6);
	background: var(--t-flaeche);
	border-radius: var(--t-ecke-gross);
	box-shadow: 0 24px 60px rgba( 22, 21, 15, .22 );
	text-align: center;
}

.hohj-anmelden__zu {
	position: absolute;
	top: var(--t-4);
	right: var(--t-4);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	color: var(--t-tinte-50);
	cursor: pointer;
}

.hohj-anmelden__zu:hover { color: var(--t-tinte); }

.hohj-anmelden h2 {
	margin: 0;
	font-family: var(--t-sans);
	font-size: var(--t-2xl);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.1;
	color: var(--t-tinte);
}

/* Der Weg fuer alle ohne Konto. Steht bewusst unten: die Frage kommt
   erst, wenn die Anmeldung nicht geht. */
.hohj-anmelden__ohne {
	margin-top: var(--t-6);
	padding-top: var(--t-5);
	border-top: 1px solid var(--t-tinte-08);
}

.hohj-anmelden__ohne p {
	margin: 0 0 var(--t-2);
	font-size: var(--t-s);
	line-height: 1.5;
	color: var(--t-tinte-72);
}

.hohj-anmelden__ohne a {
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--t-tinte);
	text-decoration: none;
}

.hohj-anmelden__ohne a:hover { text-decoration: underline; }

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

.hohj-anmelden__form { margin-top: var(--t-6); text-align: left; }

.hohj-anmelden__form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-72);
}

.hohj-anmelden__form input[type="email"],
.hohj-anmelden__form input[type="password"] {
	width: 100%;
	margin-bottom: var(--t-4);
	padding: 13px 14px;
	background: var(--t-grund);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	color: var(--t-tinte);
}

.hohj-anmelden__form input[type="email"]:focus,
.hohj-anmelden__form input[type="password"]:focus {
	border-color: var(--t-tinte);
	outline: 2px solid var(--t-signal);
	outline-offset: 1px;
}

.hohj-anmelden__merken {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--t-5);
	font-weight: 400 !important;
	cursor: pointer;
}

.hohj-anmelden__merken input { margin: 0; }

.hohj-anmelden__knopf {
	width: 100%;
	padding: 15px 26px;
	background: var(--t-tinte);
	border: 0;
	border-radius: var(--t-ecke-feld);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	font-weight: 600;
	line-height: 1;
	color: var(--t-flaeche);
	cursor: pointer;
	transition: opacity .12s ease;
}

.hohj-anmelden__knopf:hover { opacity: .88; }

.hohj-anmelden__knopf:focus-visible {
	outline: 2px solid var(--t-signal);
	outline-offset: 2px;
}

.hohj-anmelden__vergessen {
	display: inline-block;
	margin-top: var(--t-5);
	font-size: var(--t-s);
	color: var(--t-tinte-50);
	text-decoration: none;
}

.hohj-anmelden__vergessen:hover {
	color: var(--t-tinte);
	text-decoration: underline;
}

.hohj-anmelden__fehler {
	margin: var(--t-5) 0 0;
	padding: 12px 14px;
	background: var(--t-grund);
	border-left: 3px solid var(--t-signal);
	border-radius: var(--t-ecke-feld);
	font-size: var(--t-s);
	line-height: 1.5;
	text-align: left;
	color: var(--t-tinte);
}

/* ==========================================================================
   Die Huelle
   ==========================================================================
   Ein Rahmen fuer alles, was bisher im Theme stand: Formular, Vorschau,
   Kasse, Danke, Dashboard, Rechtsseiten, 404, Suche.

   Der Koerper traegt zusaetzlich .hohj-seite - dort steht bereits, dass
   Theme-Kopf und -Fuss verschwinden und der Inhalt die volle Breite
   bekommt. Hier wird die Breite wieder eingefangen: eine Spalte, ein
   Mass, auf jeder Station dasselbe.
   ========================================================================== */

body.hohj-huelle {
	background: var(--t-grund);
	color: var(--t-tinte);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Ein Mass fuer Kopf, Inhalt und Fuss. */
.hohj-huelle__innen {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: var(--t-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-5);
}

/* Der Inhalt bekommt dieselbe Spalte zurueck, die .hohj-seite fuer den
   Feed aufgehoben hat. Spaeter im Stylesheet, also gewinnt es. */
body.hohj-huelle .wp-block-post-content,
body.hohj-huelle .entry-content,
body.hohj-huelle main {
	max-width: 820px !important;
	margin-inline: auto !important;
	padding-inline: var(--t-5) !important;
	padding-block: var(--t-7) var(--t-9) !important;
}

body.hohj-huelle .wp-block-post-content > *,
body.hohj-huelle .entry-content > * {
	max-width: 100% !important;
	margin-inline: 0 !important;
}

/* ---------- Kopf ---------- */

.hohj-huelle__kopf {
	padding-block: var(--t-5);
	background: var(--t-grund);
}

.hohj-huelle__zugang {
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-72);
	text-decoration: none;
	padding: 9px 16px;
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	white-space: nowrap;
	transition: color .12s ease, border-color .12s ease;
}

.hohj-huelle__zugang:hover {
	color: var(--t-tinte);
	border-color: var(--t-tinte);
}

.hohj-huelle__zugang:focus-visible {
	outline: 2px solid var(--t-signal);
	outline-offset: 2px;
}

/* ---------- Fuss ---------- */

.hohj-huelle__fuss {
	padding-block: var(--t-6);
	border-top: 1px solid var(--t-tinte-08);
	background: var(--t-grund);
}

.hohj-huelle__marke {
	font-weight: 700;
	letter-spacing: -0.035em;
}

.hohj-huelle__fuss-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t-5);
	font-size: var(--t-s);
}

.hohj-huelle__fuss-nav a {
	color: var(--t-tinte-72);
	text-decoration: none;
}

.hohj-huelle__fuss-nav a:hover { color: var(--t-tinte); }

/* ---------- Ueberschriften und Text ---------- */

body.hohj-huelle h1,
body.hohj-huelle h2,
body.hohj-huelle h3 {
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.1;
	text-wrap: balance;
	color: var(--t-tinte);
}

body.hohj-huelle h1 { font-size: var(--t-3xl); margin-bottom: var(--t-6); }
body.hohj-huelle h2 { font-size: var(--t-2xl); margin-top: var(--t-7); }
body.hohj-huelle h3 { font-size: var(--t-xl); margin-top: var(--t-6); }

body.hohj-huelle a { color: var(--t-tinte); }

/* ---------- Felder und Knoepfe ----------
   Nur Aussehen, keine Anordnung. Die fremden Strecken behalten ihr
   Raster; sie bekommen hier lediglich unsere Schrift, unsere Ecken und
   unsere Farben, damit sie nicht nach Theme aussehen. */

body.hohj-huelle input[type="text"],
body.hohj-huelle input[type="email"],
body.hohj-huelle input[type="url"],
body.hohj-huelle input[type="tel"],
body.hohj-huelle input[type="number"],
body.hohj-huelle input[type="search"],
body.hohj-huelle input[type="password"],
body.hohj-huelle select,
body.hohj-huelle textarea {
	padding: 12px 14px;
	background: var(--t-flaeche);
	border: 1px solid var(--t-tinte-14);
	border-radius: var(--t-ecke-feld);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	color: var(--t-tinte);
	box-shadow: none;
}

body.hohj-huelle input:focus,
body.hohj-huelle select:focus,
body.hohj-huelle textarea:focus {
	border-color: var(--t-tinte);
	outline: 2px solid var(--t-signal);
	outline-offset: 1px;
}

body.hohj-huelle label {
	font-size: var(--t-s);
	font-weight: 500;
	color: var(--t-tinte-72);
}

/* Bewusst NICHT .button: WP Job Manager benutzt diese Klasse auch fuer
   stille Textlinks mitten im Absatz - aus "Anmelden" im Kontoblock wurde
   dadurch ein Blockknopf, der ueber dem Text lag. Nur echte Absender. */
body.hohj-huelle button[type="submit"],
body.hohj-huelle input[type="submit"] {
	padding: 14px 26px;
	background: var(--t-tinte);
	border: 0;
	border-radius: var(--t-ecke-feld);
	font-family: var(--t-sans);
	font-size: var(--t-m);
	font-weight: 600;
	line-height: 1;
	color: var(--t-flaeche);
	text-decoration: none;
	cursor: pointer;
	transition: opacity .12s ease;
}

body.hohj-huelle button[type="submit"]:hover,
body.hohj-huelle input[type="submit"]:hover { opacity: .88; }

/* Zweitrangige Knoepfe bleiben still. */
body.hohj-huelle input[name="save_draft"],
body.hohj-huelle input[name="edit_job"] {
	background: none;
	border: 1px solid var(--t-tinte-14);
	color: var(--t-tinte);
}

@media ( max-width: 560px ) {
	.hohj-huelle__innen { flex-direction: column; align-items: flex-start; }
	.hohj-huelle__fuss-nav { gap: var(--t-4); }
}

/* ==========================================================================
   Sichtbarkeit — Zusatz zum Deckel, keine zweite Formsprache

   Die Seite nutzt die Klassen des Deckels und der Preisseite. Hier
   stehen NUR die Dinge, die es dort noch nicht gibt: der zweispaltige
   Kopfbereich, das Geraet, der aktive Chip, das Kartenraster fuer acht
   und die Feature-Folie.
   ========================================================================== */

/* Ohne Deckelmechanik: die Seite scrollt normal. Der Deckel setzt
   min-height 100vh und position/z-index - beides bleibt richtig, nur
   die Teilung entfaellt, weil data-hohj-deckel fehlt. */
/* WICHTIG. .hohj-js .hohj-deckel ist ein FESTER Vorhang ueber dem ganzen
   Fenster (position: fixed; inset: 0) - so gebaut, weil er die
   Startseite verdeckt und sich dann teilt.

   Auf der Sichtbarkeitsseite wird derselbe Bausatz gebraucht, aber
   nicht als Vorhang: die Abschnitte sollen untereinander stehen und
   scrollen. Deshalb wird die Position hier zurueckgenommen. Ohne diese
   vier Zeilen liegen alle Abschnitte uebereinander und nur der letzte
   ist sichtbar. */
.hohj-js .hohj-deckel--sicht,
.hohj-deckel--sicht {
	position: relative;
	inset: auto;
	min-height: 0;
	overflow: visible;
}

.hohj-deckel--sicht .hohj-deckel__oben {
	min-height: calc( 100vh - 120px );
	min-height: calc( 100svh - 120px );
}

/* Die Wortmarke wird niemals grossgeschrieben - auch nicht, wenn ihr
   Umfeld Versalien traegt. Die Sperrung der Micro-Zeile wuerde die
   kleingeschriebene Marke auseinanderziehen, deshalb wird auch sie
   zurueckgenommen. */
.hohj-wortmarke {
	text-transform: none;
	letter-spacing: .03em;
	/* Die Marke steht in voller Tinte, ihr Umfeld tritt zurueck. */
	color: var(--t-tinte);
}

/* Die Headline zwei Stufen hoeher: die Basisregel setzt 0,9 x 3xl,
   darueber liegen 3xl und 4xl. Das em skaliert von selbst mit. */
.hohj-deckel--sicht .hohj-deckel__wort h1 { font-size: var(--t-3xl); }

/* Die Badges eine Stufe hoeher: von der kleinen auf die mittlere
   Reihe der Deckel-Masse, Schrift von s auf m. */
/* Sprache und Dunkelmodus sind auch hier noch ohne Funktion, aber sie
   sollen nicht wie Fehler aussehen: volle Farbe, nur der Zeiger sagt
   "nicht klickbar". Die Ausbleichung gehoert der Startseite. */
.hohj-deckel--sicht .hohj-deckel__werkzeug[disabled] { opacity: 1; }

/* Die Badge-Spalte spannt wie das Geraet: der Titel sitzt an der
   Oberkante, margin-bottom: auto schiebt die Badges an die Unterkante.
   Dieselbe Logik wie links bei den Knoepfen. */
.hohj-deckel__wechsel-titel { margin-bottom: var(--t-3); }

/* ==========================================================================
   EINE Flucht fuer die ganze Seite

   Vorher hatte jeder Abschnitt seine eigene Rechnung: die Buehne
   Behaelterabstand plus Zentrierung plus 30 px Einzug, die Preisliste
   --t-innen, die Werkzeugzeile einen festen Wert. Drei Ketten aus
   clamp, calc und Prozenten - und jede faellt im Browser eine Spur
   anders aus. Genau daher kamen die Unterschiede.

   Jetzt gibt es zwei Zahlen und einen Baustein, den alle nutzen.
   Wer die Flucht braucht, bekommt .hohj-flucht - sonst nichts.

   Kein vw in dieser Rechnung: vw zaehlt den Scrollbalken je nach
   Browser mit oder nicht. Prozent tut das nie. */
body.hohj-sichtbarkeit {
	/* Der gelbe Punkt ist das Mass. Er ist 37 px breit und hat links
	   wie rechts 20 px Luft. Daraus folgt eine freie Spur von 77 px an
	   beiden Seiten - dort laeuft links der Punkt und rechts der Pfeil
	   nach unten, ohne je einen Inhalt zu treffen.

	   Der Inhalt beginnt erst hinter dieser Spur. Deshalb ist er
	   schmaler als zuvor - das ist gewollt und die Folge der Regel. */
	--s-luft:  20px;
	--s-punkt: 37px;
	--s-spur:  calc( var(--s-luft) * 2 + var(--s-punkt) );

	/* Ansage vom 6. August: aussen mehr Platz als zwischen den Karten,
	   damit die Reihe insgesamt kleiner wirkt. Links 20 mehr als die
	   Spur, rechts 10 mehr - rechts faellt kleiner aus, weil der
	   Scrollbalken dort ohnehin 15 px nimmt und die Flaeche sonst nach
	   links kippt. Das sind bewusst zwei Werte statt einem. */
	--s-rand-links:  calc( var(--s-spur) + 20px );
	--s-rand-rechts: calc( var(--s-spur) + 10px );

	--s-rand:  var(--s-spur);
	--s-innen: 1680px;

	/* Startpunkt des Einflugs: von der linken Fluchtkante bis zur
	   Fenstermitte. In Prozent, damit der Scrollbalken nicht mitzaehlt. */
	--s-einflug: 44%;
}

body.hohj-sichtbarkeit .hohj-flucht {
	width: 100%;
	max-width: calc( var(--s-innen) + var(--s-rand-links) + var(--s-rand-rechts) );
	margin-inline: auto;
	padding-inline: var(--s-rand-links) var(--s-rand-rechts);
}

/* Die Vollbreiten-Konstruktion der Preisseite abschalten: sie rechnet
   mit 100vw und damit je nach Browser mit oder ohne Scrollbalken. Der
   Behaelter ist hier ohnehin schon voll breit. */
body.hohj-sichtbarkeit .hohj-lp {
	width: auto;
	max-width: none;
	margin-inline: 0;
}

body.hohj-sichtbarkeit .hohj-lp__preise { padding-inline: 0; }

body.hohj-sichtbarkeit .hohj-lp__preise > * {
	width: 100%;
	max-width: calc( var(--s-innen) + var(--s-rand-links) + var(--s-rand-rechts) );
	margin-inline: auto;
	padding-inline: var(--s-rand-links) var(--s-rand-rechts);
}

/* Buehne, Abschluss und Fuss auf denselben Baustein. */
body.hohj-sichtbarkeit .hohj-deckel__innen--weit {
	width: 100%;
	max-width: calc( var(--s-innen) + var(--s-rand-links) + var(--s-rand-rechts) );
	margin-inline: auto;
	padding-inline: var(--s-rand-links) var(--s-rand-rechts);
}

body.hohj-sichtbarkeit .hohj-deckel__paar,
body.hohj-sichtbarkeit .hohj-schub__paar {
	max-width: none;
}

/* Punkt und Pfeil binden an DIESELBE Kante wie alles andere.

   Vorher hingen beide an clamp( 20px, 4vw, 56px ) - also am
   Fensterrand. vw zaehlt den Scrollbalken je nach Browser mit, und
   genau diese beiden Elemente wichen deshalb ab.

   Jetzt: die innere Kante der Flucht, in Prozent gerechnet. Bei einem
   festen Element bezieht sich Prozent auf das Fenster OHNE
   Scrollbalken - in jedem Browser gleich. Damit hat der Punkt links
   denselben Abstand wie der Pfeil rechts. */
/* Der Punkt sitzt in seiner Spur, nicht auf der Inhaltsflucht. */
body.hohj-sichtbarkeit .hohj-deckel__kopf .hohj-lp__logo {
	left: var(--s-luft);
}

/* Der Pfeil ebenso - gleiche Luft, gespiegelt. */
body.hohj-sichtbarkeit .hohj-deckel__blaettern {
	left: auto;
	right: var(--s-luft);
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* Die Kopfzeile endet, wo der Pfeil endet - beide gehoeren dem
   Fensterrand, nicht der Spalte. */
body.hohj-sichtbarkeit .hohj-deckel__kopf .hohj-deckel__innen {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--s-luft);
}

/* Werkzeugzeile ebenso - kein Sonderweg mehr. */
@media ( min-width: 960px ) {

	body.hohj-sichtbarkeit .hohj-deckel__werkzeuge {
		left: 0;
		right: 0;
		width: 100%;
		max-width: calc( var(--s-innen) + var(--s-rand-links) + var(--s-rand-rechts) );
		margin-inline: auto;
		padding-inline: var(--s-rand-links) var(--s-rand-rechts);
	}

}

/* ==========================================================================
   Die Preiskarte nach der Klickauswahl vom 6. August

   29 von 49 Zeilen gegen raycast.com/pricing entschieden, dazu sechs
   Widersprueche aufgeloest. Vollstaendig in dok/designset.md.

   Nur auf dieser Seite. Die Preisseite nutzt dieselben Klassen und
   bleibt unberuehrt - sie ist die Flaeche mit der Spitzenbewertung.

   Drei Grade:    11,5 - Fahne und Produktname
                  14   - alles andere
                  52   - der Preis
   Drei Gewichte: 300 Grundlage, 600 Preis und Knopf, 700 Produktname
   Eine Zeilenhoehe: 22,4. Der Preis behaelt seine eigene, 47.
   Zwei Sperrungen: 0,2 und 0,3, beide positiv. Der Preis behaelt
   seine negative als benannte Ausnahme.
   ========================================================================== */

/* Alle Kartenwerte als Variablen. Nur so kann die Musterseite unter
   ?hohj_muster=1 daran drehen, ohne dass hier eine zweite Wahrheit
   entsteht. Wer einen Wert aendert, aendert ihn hier - die Regler
   schreiben dieselben Namen. */
body.hohj-sichtbarkeit {
	--k-polster:        32px;
	--k-polster-rechts: 48px;
	--k-ecke:           16px;

	--k-grad-klein:     11.5px;
	--k-grad-text:      14px;
	--k-grad-preis:     52px;

	--k-zeile:          22.4px;
	--k-zeile-preis:    47px;

	--k-sperr-text:     .2px;
	--k-sperr-klein:    .3px;
	--k-sperr-preis:    -2.31px;

	--k-gewicht-grund:  300;
	--k-gewicht-preis:  600;
	--k-gewicht-titel:  700;

	--k-abstand:        24px;
	--k-abstand-eng:    6px;

	--k-knopf-hoehe:    54px;
	--k-knopf-ecke:     8px;

	--k-scheibe:        19px;
	--k-fahne-oben:     -13px;
}

body.hohj-sichtbarkeit .hohj-lp__karte {
	padding: var(--k-polster) var(--k-polster-rechts) var(--k-polster) var(--k-polster);
	border-radius: var(--k-ecke);
	box-shadow: none;
	transition: background-color .2s;
}

/* Die Beschreibung wird zur Zeile unter dem Produktnamen. Ueber die
   Reihenfolge im Flex, damit das Markup unangetastet bleibt. */
body.hohj-sichtbarkeit .hohj-lp__micro             { order: 1; }
body.hohj-sichtbarkeit .hohj-lp__was               { order: 2; }
body.hohj-sichtbarkeit .hohj-lp__betrag            { order: 3; }
body.hohj-sichtbarkeit .hohj-lp__je                { order: 4; }
body.hohj-sichtbarkeit .hohj-lp__karte ul          { order: 5; }
body.hohj-sichtbarkeit .hohj-lp__mehr              { order: 6; }
body.hohj-sichtbarkeit .hohj-lp__karte .hohj-knopf { order: 7; }

body.hohj-sichtbarkeit .hohj-lp__was {
	margin-top: 6px;
	padding-top: 0;
	border-top: 0;
}

/* Innen ist nichts gerundet ausser dem Knopf. Die beiden Kapseln sind
   die ausdrueckliche Ausnahme, ebenso die Scheibe am Haken. */
body.hohj-sichtbarkeit .hohj-lp__karte * { border-radius: 0; }
body.hohj-sichtbarkeit .hohj-lp__karte .hohj-knopf { border-radius: 8px; }
body.hohj-sichtbarkeit .hohj-lp__marke-oben,
body.hohj-sichtbarkeit .hohj-lp__micro { border-radius: 999px; }
body.hohj-sichtbarkeit .hohj-lp__karte li::before { border-radius: 50%; }

/* Grad, Gewicht, Zeile, Sperrung */
body.hohj-sichtbarkeit .hohj-lp__marke-oben,
body.hohj-sichtbarkeit .hohj-lp__micro {
	font-size: var(--k-grad-klein);
	letter-spacing: var(--k-sperr-klein);
	line-height: var(--k-zeile);
}

body.hohj-sichtbarkeit .hohj-lp__marke-oben { top: var(--k-fahne-oben); }

/* Versalien nur noch am Produktnamen. */
body.hohj-sichtbarkeit .hohj-lp__marke-oben { text-transform: none; font-weight: var(--k-gewicht-preis); }
body.hohj-sichtbarkeit .hohj-lp__micro      { text-transform: uppercase; font-weight: var(--k-gewicht-titel); }

body.hohj-sichtbarkeit .hohj-lp__was,
body.hohj-sichtbarkeit .hohj-lp__je,
body.hohj-sichtbarkeit .hohj-lp__karte li,
body.hohj-sichtbarkeit .hohj-lp__mehr summary,
body.hohj-sichtbarkeit .hohj-lp__karte .hohj-knopf {
	font-size: var(--k-grad-text);
	line-height: var(--k-zeile);
	letter-spacing: var(--k-sperr-text);
}

body.hohj-sichtbarkeit .hohj-lp__was,
body.hohj-sichtbarkeit .hohj-lp__je,
body.hohj-sichtbarkeit .hohj-lp__karte li,
body.hohj-sichtbarkeit .hohj-lp__mehr summary { font-weight: var(--k-gewicht-grund); }

body.hohj-sichtbarkeit .hohj-lp__karte li::before {
	width:  var(--k-scheibe);
	height: var(--k-scheibe);
}

body.hohj-sichtbarkeit .hohj-lp__betrag {
	font-size: var(--k-grad-preis);
	line-height: var(--k-zeile-preis);
	letter-spacing: var(--k-sperr-preis);
	font-weight: var(--k-gewicht-preis);
}

/* Der Nebentext bekommt einen eigenen Grauton, nicht den des
   Haupttextes. Haupttext bleibt bei 72 Prozent. */
body.hohj-sichtbarkeit .hohj-lp__je,
body.hohj-sichtbarkeit .hohj-lp__mehr summary { color: rgba( 22, 21, 15, .52 ); }

body.hohj-sichtbarkeit .hohj-lp__karte .hohj-knopf {
	height: var(--k-knopf-hoehe);
	border-radius: var(--k-knopf-ecke);
	padding: 8px 12px;
	font-weight: var(--k-gewicht-preis);
	transition: background-color .2s;
}

/* ==========================================================================
   Die uebrigen Flaechen auf dasselbe System wie die Karten

   Gemessen am 6.8. ausserhalb der Karten: zehn Grade, davon sechs krumm,
   zehn Zeilenhoehen, alle krumm, sechs Sperrungen, acht Eckenwerte,
   Abschnittspolster 114 und 99,75. Die Karten trugen dieselbe Unordnung,
   bis sie einen Werteblock bekamen.

   Hier stehen nur die Werte, die vorher krumm waren. Ganzzahlige Grade
   wie 14 bleiben unangetastet - es ist keine Umgestaltung, sondern das
   Einrasten auf ein Raster.
   ========================================================================== */

body.hohj-sichtbarkeit {
	--s-grad-micro:  12px;
	--s-grad-h3:     24px;
	--s-grad-titel:  72px;

	--s-zeile:       22.4px;   /* derselbe Wert wie in der Karte */
	--s-zeile-lead:  28px;
	--s-zeile-h3:    32px;
	--s-zeile-titel: 76px;

	--s-sperr-text:  .2px;
	--s-sperr-micro: .8px;
	--s-sperr-titel: -2px;

	--s-takt:        112px;
	--s-ecke:        16px;
	--s-ecke-klein:  8px;
}

/* Die Versalzeilen: Micro, Nummer, Rubrik, Bildzeile, Wortmarke.
   Vorher 12,48 mit Zeile 17,47 und drei verschiedenen Sperrungen. */
body.hohj-sichtbarkeit .hohj-deckel__micro,
body.hohj-sichtbarkeit .hohj-deckel__nr,
body.hohj-sichtbarkeit .hohj-deckel__nav-rubrik,
body.hohj-sichtbarkeit .hohj-deckel__bildzeile,
body.hohj-sichtbarkeit .hohj-wortmarke {
	font-size: var(--s-grad-micro);
	line-height: 20px;
	letter-spacing: var(--s-sperr-micro);
}

/* Der Titel der Buehne, samt der kursiven zweiten Zeile.
   Vorher 70,4 und 65,4 mit Zeilen 77,44 und 71,94. */
body.hohj-sichtbarkeit .hohj-deckel__oben h1,
body.hohj-sichtbarkeit .hohj-deckel__oben h1 em,
body.hohj-sichtbarkeit .hohj-deckel__oben h1 span {
	font-size: var(--s-grad-titel);
	line-height: var(--s-zeile-titel);
	letter-spacing: var(--s-sperr-titel);
}

body.hohj-sichtbarkeit h3 {
	font-size: var(--s-grad-h3);
	line-height: var(--s-zeile-h3);
	letter-spacing: -.4px;
}

body.hohj-sichtbarkeit .hohj-deckel__lead { line-height: var(--s-zeile-lead); }

/* Fliesstext, Verweise, Knoepfe und Schalter auf eine Zeilenhoehe und
   eine Sperrung. Vorher 18,9 / 19,6 / 20,3 / 20,4 / 21,7 / 23,8 / 30,8
   und vier verschiedene negative Sperrungen. */
body.hohj-sichtbarkeit p,
body.hohj-sichtbarkeit li,
body.hohj-sichtbarkeit a,
body.hohj-sichtbarkeit strong,
body.hohj-sichtbarkeit .hohj-knopf,
body.hohj-sichtbarkeit .hohj-lp__tab,
body.hohj-sichtbarkeit .hohj-deckel__zugang {
	line-height: var(--s-zeile);
	letter-spacing: var(--s-sperr-text);
}

/* Der Titel behaelt seine eigene Sperrung - sonst zieht die Textregel
   sie ihm weg. */
body.hohj-sichtbarkeit .hohj-deckel__oben h1 em { letter-spacing: var(--s-sperr-titel); }

/* Ein Takt statt 114 und 99,75. */
body.hohj-sichtbarkeit .hohj-lp__preise,
body.hohj-sichtbarkeit .hohj-deckel__folie {
	padding-block: var(--s-takt);
}

/* Acht Eckenwerte auf zwei. Kreis und Kapsel bleiben, wo sie eine
   Form sind und keine Flaeche: Punkt, Pfeil, Werkzeug. */
body.hohj-sichtbarkeit .hohj-deckel__blatt,
body.hohj-sichtbarkeit .hohj-deckel__schirm,
body.hohj-sichtbarkeit .hohj-deckel__karte,
body.hohj-sichtbarkeit .hohj-lp__wahl { border-radius: var(--s-ecke); }

body.hohj-sichtbarkeit .hohj-knopf,
body.hohj-sichtbarkeit .hohj-lp__tab,
body.hohj-sichtbarkeit .hohj-deckel__chip,
body.hohj-sichtbarkeit .hohj-deckel__zugang { border-radius: var(--s-ecke-klein); }

/* Der Skip-Link kam in Manrope. Eine dritte Schrift fuer einen Link,
   den fast niemand sieht. Er traegt keine hohj-Klasse, deshalb ueber
   das Element. */
body.hohj-sichtbarkeit a { font-family: var(--hohj-schrift); }
body.hohj-sichtbarkeit a { border-radius: var(--s-ecke-klein); }

/* Nachtrag 1.15.1 - die Stellen, die beim ersten Durchgang stehen
   blieben, gemessen am lebenden Bau statt aus dem Stylesheet
   abgeleitet. Doppelte Klasse hebt die Spezifitaet, ohne !important. */

body.hohj-sichtbarkeit .hohj-lp__frage.hohj-lp__frage {
	font-size: 28px;
	line-height: 32px;
	letter-spacing: -.4px;
}

body.hohj-sichtbarkeit .hohj-lp__klein.hohj-lp__klein {
	font-size: var(--s-grad-micro);
	line-height: 20px;
	letter-spacing: var(--s-sperr-text);
}

body.hohj-sichtbarkeit h2 {
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -1px;
}

body.hohj-sichtbarkeit .hohj-deckel__lead.hohj-deckel__lead {
	line-height: var(--s-zeile-lead);
}

body.hohj-sichtbarkeit .hohj-deckel__marke.hohj-deckel__marke {
	line-height: 24px;
	letter-spacing: -.4px;
}

body.hohj-sichtbarkeit .hohj-deckel__chip.hohj-deckel__chip {
	border-radius: var(--s-ecke-klein);
}

/* em und span erbten ihre Zeilenhoehen von aelteren Regeln:
   16,8 / 18,9 / 20,3 bei gleichem Grad 14. */
body.hohj-sichtbarkeit em,
body.hohj-sichtbarkeit span { line-height: inherit; }

/* ==========================================================================
   Die Buehne wird zur Kachelwand

   Vorher: ein Telefonrahmen mit EINER sichtbaren Kachel, daneben sechs
   Woerter als Schalter. ziel.md sagt: ein Bildprodukt wird ueber Bilder
   verkauft, nicht ueber Listen - die Buehne verkaufte es ueber eine
   Liste.

   Jetzt: alle sechs Muster gleichzeitig, im gemessenen Format 3:4
   (844 x 1125). Kein Markup geaendert - die sechs Bilder lagen bereits
   im Dokument, nur uebereinandergestapelt. Damit bleibt der Rueckweg
   ein einziger revert, und sicht.js behaelt seine Angriffspunkte.

   Was verschwindet und warum: der Telefonrahmen samt Hoerer. Er war
   die Verpackung um ein einzelnes Bild; bei sechs nebeneinander hat er
   keine Aufgabe mehr. Die Formatschalter bleiben, wandern aber unter
   die Wand und benennen nur noch.
   ========================================================================== */

/* Die Wand bekommt die volle Breite. Neben dem Wortblock blieben je
   Kachel 129 x 172 Pixel - sechs Briefmarken. Ein Bildprodukt, dessen
   Bilder briefmarkengross sind, beweist nichts. Also: Wort oben,
   Wand darunter ueber die ganze Flucht. */
body.hohj-sichtbarkeit .hohj-deckel__paar {
	display: block;
}

body.hohj-sichtbarkeit .hohj-deckel__wort { max-width: 820px; }

body.hohj-sichtbarkeit .hohj-deckel__schau {
	width: 100%;
	max-width: none;
	margin-top: 48px;
}

/* Doppelte Klasse, weil eine aeltere Regel dem Geraet eine feste
   Breite von 420 gibt und der Flexbehaelter es nicht dehnt. */
body.hohj-sichtbarkeit .hohj-deckel__schau.hohj-deckel__schau { display: block; }

body.hohj-sichtbarkeit .hohj-deckel__geraet.hohj-deckel__geraet {
	margin: 0;
	width: 100%;
	max-width: none;
	flex: none;
}

body.hohj-sichtbarkeit .hohj-deckel__schirm {
	position: static;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 16px;
	width: 100%;
	max-width: none;
	aspect-ratio: auto;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	overflow: visible;
}

/* Der Hoerer war die Kerbe im Telefonrahmen. */
body.hohj-sichtbarkeit .hohj-deckel__hoerer { display: none; }

/* Alle Kacheln sichtbar, keine mehr uebereinander. Das Format steht
   fest, bevor ein Bild geladen ist - so springt nichts nach. */
body.hohj-sichtbarkeit .hohj-deckel__blatt,
body.hohj-sichtbarkeit .hohj-deckel__blatt.is-aktiv {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 844 / 1125;
	object-fit: cover;
	opacity: 1;
	visibility: visible;
	transform: none;
	border-radius: var(--s-ecke-klein);
}

/* Ungleiche Hoehen: die mittlere Spalte steht tiefer. Sonst entsteht
   die Wand aus gleichen Bloecken, die auf der Verbotsliste steht. */
body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(3),
body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(6) { margin-top: 24px; }

/* Die Formatschalter: aus der Spalte daneben in eine Zeile darunter. */
body.hohj-sichtbarkeit .hohj-deckel__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	max-width: none;
}

body.hohj-sichtbarkeit .hohj-deckel__wechsel-titel { width: 100%; }

body.hohj-sichtbarkeit .hohj-deckel__bildzeile { margin-top: 16px; }

@media ( max-width: 899px ) {
	body.hohj-sichtbarkeit .hohj-deckel__schirm { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(3),
	body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(6) { margin-top: 0; }
	body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(2),
	body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(4),
	body.hohj-sichtbarkeit .hohj-deckel__blatt:nth-child(6) { margin-top: 24px; }
}

/* Die Spur des gelben Punktes gilt nur auf dem Desktop - Ansage vom
   6. August. Unterhalb 1200 faellt sie weg, sonst nimmt sie den
   Karten den Raum, den sie zum Lesen brauchen.

   Die Werte sind an raycast und linear nachgemessen, beide bei 390:
   raycast steht 24 von der Kante, linear 16 - nicht 77. Beide lassen
   dabei den Lesegrad unveraendert und stutzen nur den groessten. */
@media ( max-width: 1199px ) and ( min-width: 720px ) {

	body.hohj-sichtbarkeit {
		--s-rand-links:  24px;
		--s-rand-rechts: 16px;
	}

}

@media ( max-width: 719px ) {

	body.hohj-sichtbarkeit {
		--s-rand-links:  16px;
		--s-rand-rechts: 16px;
	}

	/* Der Titel: 72 ist der Wert fuer den grossen Bildschirm. Bei 390
	   stand er unveraendert da - ein Rueckschritt aus 1.15.0, wo eine
	   clamp-Kette durch einen festen Wert ersetzt wurde. Zwei feste
	   Werte statt einer Kette: 72 oben, 40 hier. Gestutzt wird nur der
	   groesste Grad, wie bei linear von 72 auf 38. */
	body.hohj-sichtbarkeit .hohj-deckel__oben h1,
	body.hohj-sichtbarkeit .hohj-deckel__oben h1 em,
	body.hohj-sichtbarkeit .hohj-deckel__oben h1 span {
		font-size: 40px;
		line-height: 44px;
		letter-spacing: -1px;
	}

	body.hohj-sichtbarkeit h2 { font-size: 32px; line-height: 36px; }

	/* Nachgemessen an raycast und linear bei 390: beide lassen den
	   Lesegrad unveraendert und stutzen nur den groessten - linear
	   geht von 72 auf 38. Der Preisgrad wird im Stylesheet fuenfmal
	   als eigene clamp-Kette gesetzt (2327, 2729, 3101, 3176, 3338)
	   und landet bei 390 auf dem Minimum 46,4. Hier steht bewusst ein
	   fester Wert statt einer sechsten Kette; das Aufraeumen der
	   fuenf ist ein eigener Schritt.

	   Kachelpolster: linear liegt bei 390 zwischen 20 und 28, wir bei
	   32. */
	body.hohj-sichtbarkeit .hohj-lp__betrag { font-size: 36px; }
	body.hohj-sichtbarkeit .hohj-lp__karte  { padding: 24px; }

}

/* Vorerst ohne Knopfbewegung. Nur auf dieser Seite - die Preisseite
   nutzt dieselben Klassen und bleibt unberuehrt. */
body.hohj-sichtbarkeit .hohj-knopf,
body.hohj-sichtbarkeit .hohj-knopf:hover {
	transform: none;
}

/* Der Punkt kommt aus der Mitte.

   Beim Betreten der Seite steht er oben mittig und wandert an seinen
   Platz links. Danach verhaelt er sich wie immer - fest am Fenster.

   Die Strecke ist gerechnet: von seiner festen Position bis zur
   Fenstermitte, abzueglich seiner halben Breite. Damit stimmt sie auf
   jeder Fensterbreite.

   Die Bewegung laeuft ueber translate, nicht ueber left - so bleibt
   sie fluessig und zwingt den Browser nicht zum Neuberechnen des
   Layouts. Am Ende steht translate auf null: der Punkt liegt exakt an
   seiner urspruenglichen Stelle und scrollt von da an wie immer. */
@keyframes hohj-punkt-ein {
	0% {
		transform: translateX( var(--s-einflug) );
		opacity: 0;
	}
	14% { opacity: 1; }
	100% { transform: translateX( 0 ); opacity: 1; }
}

body.hohj-sichtbarkeit .hohj-deckel__kopf .hohj-lp__logo {
	animation: hohj-punkt-ein 1.4s cubic-bezier( .62, .01, .12, 1 ) .2s both;
}

@media ( prefers-reduced-motion: reduce ) {
	body.hohj-sichtbarkeit .hohj-deckel__kopf .hohj-lp__logo { animation: none; }
}

/* Der Kontoname unten links, vor den Werkzeugen: der Name in Tinte,
   die Zeile darunter still. Zwei Ebenen, kein Kasten - die Ecke traegt
   schon die beiden Knoepfe. */
.hohj-deckel__konto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-right: var(--t-3);
	line-height: 1.35;
	text-align: left;
}

.hohj-deckel__konto > a {
	font-size: var(--t-s);
	font-weight: 500;
	letter-spacing: -0.006em;
	color: var(--t-tinte);
	text-decoration: none;
}

.hohj-deckel__konto > a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hohj-deckel__konto em {
	font-style: normal;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-deckel__konto em a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--t-tinte-14);
}

.hohj-deckel__konto em a:hover { color: var(--t-tinte); }

@media ( max-width: 640px ) {
	.hohj-deckel__konto { display: none; }
}

/* Ein Tick unter der mittleren Reihe: 40 ist die Mitte aus 34 und 46,
   der Innenabstand folgt dem Verhaeltnis des Suchfelds (0,345). */
.hohj-deckel--sicht .hohj-deckel__wechsel .hohj-deckel__chip {
	min-height: 40px;
	padding-inline: 14px;
	border-radius: var(--hohj-r-mittel);
	font-size: var(--t-s);
}

/* Alle Badges gleich breit - die Spalte gibt das Mass des laengsten
   vor, der Text steht mittig. Sechs verschiedene Breiten flatterten. */
.hohj-deckel--sicht .hohj-deckel__wechsel .hohj-deckel__chip {
	width: 100%;
	justify-content: center;
}

.hohj-deckel--sicht .hohj-deckel__wechsel .hohj-deckel__chip:not( .is-aktiv ):hover {
	border-color: var(--hohj-linie-an);
}

/* Der aktive traegt die Signalkontur - Gelb nur als Linie, nie als
   Flaeche. */
.hohj-deckel--sicht .hohj-deckel__wechsel .hohj-deckel__chip.is-aktiv {
	border-color: var(--t-signal);
}

/* Der Block steht 100 px ueber der Absenkung der Basisregel (die
   setzt +50 fuer die Suchfolie). Zentrierung heisst: das Zentrum
   verschiebt sich um die halbe Differenz der Innenabstaende - oben
   minus 75, unten plus 125 ergibt minus 200, also 100 nach oben. */
.hohj-deckel--sicht .hohj-deckel__mitte {
	padding-block: calc( var(--t-7) - 25px ) calc( var(--t-6) + 125px );
}

/* Werkzeuge und Pfeil sitzen auf der Startseite fest am Fenster - dort
   ist der Deckel selbst das Fenster. Hier scrollt die Seite, also
   gehoeren sie in die erste Folie und scrollen mit ihr weg. */
.hohj-deckel--sicht .hohj-deckel__werkzeuge,
.hohj-deckel--sicht .hohj-deckel__blaettern {
	position: absolute;
}

/* Eine Fluchtlinie fuer die ganze Folie: die Werkzeugzeile sitzt am
   Behaelterrand, die Textspalte traegt zusaetzlich 30 px Innenabstand -
   genau diese Differenz war sichtbar. Beide binden jetzt an dieselbe
   Kante. Der Pfeil rechts entsprechend, damit auch dort die Flucht
   stimmt. */
/* ---------- Folie 1: die drei Teile ---------- */

.hohj-deckel__paar {
	display: grid;
	gap: var(--t-7);
	align-items: center;
	width: 100%;
	max-width: 1680px;
	margin-inline: auto;
}

/* Die rechte Spalte bemisst sich selbst: auto = genau Geraet plus
   Badges, kein Rest dahinter. Der Text bekommt alles Uebrige. So gibt
   es nur noch EINE Luecke auf dem Bildschirm - den Spaltenabstand -
   statt zweier toter Zonen links und rechts der Bildgruppe. Das
   Minimum links schuetzt den Text auf schmalen Buehnen. */
@media ( min-width: 960px ) {
	.hohj-deckel__paar {
		grid-template-columns: minmax( 340px, 1fr ) auto;
		gap: clamp( 40px, 5vw, 96px );
	}
}

/* Links wird linksbuendig gesetzt. Ausnahme von "alles steht mittig" -
   und sie ist begruendet: die rechte Haelfte ist nicht leer, sie traegt
   das Bild. */
.hohj-deckel__wort { text-align: left; }

.hohj-deckel__wort h1,
.hohj-deckel__wort .hohj-deckel__lead { margin-inline: 0; }

/* ---- Die Abstimmung: das Geraet ist der Taktgeber ----

   Beide Spalten sind gleich hoch (stretch), und beide binden an die
   Kanten des Geraets: links beginnt das Micro an der Oberkante des
   Bilds, die Knoepfe enden an seiner Unterkante (margin-top: auto
   schiebt sie dorthin). Rechts dasselbe: der Formate-Titel oben, die
   Badges unten. So antworten die drei Spalten aufeinander, statt je
   fuer sich zu schwimmen. */
/* KEIN stretch und KEINE auto-Schuebe. Beide Versuche haben die
   Spalten an die Bildkanten gezwungen und dazwischen Leere erzeugt -
   links ein Loch, rechts ein haengender Titel. Die Spalten stehen
   mittig zum Bild und tragen einen durchgehenden Rhythmus. */
.hohj-deckel--sicht .hohj-deckel__paar { align-items: center; }

/* Eine Abstandslogik von oben nach unten: 12 - 16 - Rest. */
.hohj-deckel--sicht .hohj-deckel__wort .hohj-deckel__micro { margin-bottom: var(--t-3); }

/* 24ch tragen "Reichweite. Die richtige." in einer Zeile - der Titel
   faellt in zwei Zeilen statt ein Wort zu vereinzeln. */
.hohj-deckel__wort h1 { margin-block: 0 var(--t-4); max-width: 24ch; }

/* Das 34er-Grau der Basisregel traegt neben dem satten Foto nicht -
   eine halbe Stufe mehr Substanz, die Spannung zur Tinte bleibt. */
.hohj-deckel--sicht .hohj-deckel__wort h1 > span { color: rgba( 22, 21, 15, .5 ); }

.hohj-deckel__wort .hohj-deckel__lead {
	max-width: 52ch;
	color: var(--t-tinte-50);
}

.hohj-deckel__wort .hohj-deckel__tueren {
	justify-content: flex-start;
	gap: var(--t-4);
	margin-top: 0;
}

/* Die Zusage: der Kern des Angebots, direkt ueber der Handlung. Sie
   uebernimmt den auto-Schub - Zusage, Knoepfe und Beleg bilden EINE
   Gruppe an der Bildunterkante. Der Konturkreis in Signal ist die
   Signatur: Gelb nur als Linie. */
/* Die Microzeile unter der Handlung: zwei Zeilen, still. Sie steht
   deutlich unter dem Gewicht der Faktenzeile darueber - damit bleibt
   die Ordnung Fakten - Handlung - Erlaeuterung lesbar. */
.hohj-deckel__zusage {
	position: relative;
	margin: var(--t-3) 0 0;
	max-width: 46ch;
	font-size: var(--t-s);
	font-weight: 400;
	line-height: 1.5;
	color: var(--t-tinte-50);
}

.hohj-deckel__zusage strong { color: var(--t-tinte-72); font-weight: 600; }

/* Kein Zeichen davor. Die Zusage traegt sich selbst - eine feine
   Linie links markiert sie als Zitat des Angebots. */
/* Kein Balken: er gehoerte zur grossen Fassung. Die Betonung traegt
   allein das Gewicht im starken Teil. */
.hohj-deckel__zusage::before { content: none; }

/* Die Merkmals-Trias: drei stille Fakten fuellen das Feld zwischen
   Lead und Knoepfen mit Substanz statt Leere. Gelb nur als Kontur der
   kleinen Kreise - dieselbe Regel wie ueberall. */
/* ---- Der Dreischritt: Stufe 4 der Hierarchie ----

   Er beantwortet die Frage, die zwischen "was ist das" und "was kostet
   es" steht: wie aufwendig ist das fuer mich. Wer noch nie
   redaktionelle Sichtbarkeit gekauft hat, erwartet ein Projekt. Die
   Ziffern tragen das Signal - der einzige Ort auf dieser Folie, an dem
   Gelb einen Weg markiert statt zu schmuecken. */
.hohj-deckel__ablauf {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var(--t-4);
	margin: var(--t-6) 0;
	padding: 0;
	list-style: none;
	max-width: 46rem;
}

.hohj-deckel__ablauf li {
	position: relative;
}

/* Die Ziffer steht frei ueber dem Schritt - Hausschrift, kein Kreis,
   keine Serife. Das Gelb liegt in der Linie darueber. */
.hohj-deckel__nr {
	display: block;
	font-family: var(--t-sans);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1;
	color: var(--t-tinte-50);
}

.hohj-deckel__ablauf strong {
	display: block;
	margin-top: var(--t-2);
	font-size: var(--t-m);
	font-weight: 600;
	letter-spacing: -0.008em;
	color: var(--t-tinte);
}

.hohj-deckel__ablauf em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: var(--t-s);
	line-height: 1.45;
	color: var(--t-tinte-50);
}

@media ( max-width: 959px ) {
	.hohj-deckel__ablauf {
		grid-template-columns: 1fr;
		gap: var(--t-4);
		margin-inline: auto;
		max-width: 24rem;
		text-align: left;
	}
}

.hohj-deckel__punkte {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--t-2) var(--t-4);
	margin: var(--t-5) 0 var(--t-6);
	padding: 0;
	list-style: none;
	font-size: var(--t-m);
	color: var(--t-tinte-50);
}

.hohj-deckel__punkte strong {
	font-weight: 600;
	color: var(--t-tinte);
}

.hohj-deckel__punkte li { position: relative; padding-left: var(--t-4); }

/* Ein Mittelpunkt trennt, statt jeden Eintrag mit einem Strich
   anzukuendigen. Der erste steht frei - dort trennt nichts. */
.hohj-deckel__punkte li::before {
	content: "·";
	position: absolute;
	left: 3px;
	color: var(--t-tinte-14);
}

.hohj-deckel__punkte li:first-child { padding-left: 0; }
.hohj-deckel__punkte li:first-child::before { content: none; }

/* Die Bildunterschrift ankert das Geraet - und bildet mit Belegzeile
   und letztem Badge eine gemeinsame Grundlinie der drei Spalten. */
.hohj-deckel__geraet { margin: 0; }

.hohj-deckel__bildzeile {
	margin-top: var(--t-3);
	font-size: var(--t-xs);
	letter-spacing: .04em;
	text-align: center;
	color: var(--t-tinte-50);
}

/* Die Lead-Zeilen atmen eine Spur weiter. */
.hohj-deckel--sicht .hohj-deckel__wort .hohj-deckel__lead { line-height: 1.6; }

/* Der stille Knopf traegt neben dem satten Dunkelknopf zu wenig -
   die Linie eine Stufe fester, ohne laut zu werden. */
.hohj-deckel--sicht .hohj-knopf--still { border-color: rgba( 22, 21, 15, .26 ); }

/* Die Belegzeile: die dritte, stille Ebene unter den Knoepfen. Sie
   bildet jetzt die Unterkante der Textspalte - buendig zum Bild. */
.hohj-deckel__beleg {
	margin: var(--t-3) 0 0;
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

.hohj-deckel__beleg a {
	color: var(--t-tinte-72);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba( 22, 21, 15, .26 );
}

.hohj-deckel__beleg a:hover { color: var(--t-tinte); text-decoration-color: currentColor; }

/* ---------- Das Geraet ---------- */

/* Geraet und Badges als eine Zeile: Bild links, Chips als Spalte
   daneben. Am Telefon wandern die Chips unter das Bild. */
/* KEIN justify-self:end - das laesst das Grid-Element auf max-content
   schrumpfen, und ein Kind mit width:100% davon wird null breit. Genau
   so verschwand das Geraet zu einem weissen Kreis. Stattdessen behaelt
   die Zelle ihre Breite, der Inhalt steht rechts, und das Geraet traegt
   eine feste Flex-Basis. */
.hohj-deckel__schau {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp( 16px, 1.6vw, 28px );
}

/* Zwei Grenzen statt einer: die Breite darf wachsen, aber die daraus
   folgende Hoehe (Verhaeltnis 844:1125, also x 1,333) muss unter dem
   bleiben, was der erste Bildschirm hergibt - Kopf, Innenabstaende und
   etwas Luft abgezogen (~340 px). Sonst ragt das Geraet unten hinaus
   und das Folienende ist erst nach dem Scrollen sichtbar. */
.hohj-deckel__geraet {
	flex: 0 0 min( clamp( 320px, 30vw, 520px ), calc( ( 100vh - 340px ) * .75 ) );
	flex-basis: min( clamp( 320px, 30vw, 520px ), calc( ( 100svh - 340px ) * .75 ) );
	width: auto;
}

.hohj-deckel--sicht .hohj-deckel__wechsel {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--t-3);
	margin: 0;
	max-width: none;
}

/* Die Badge-Spalte endet buendig mit der Unterkante des Geraets: das
   Geraet gibt die Hoehe vor, beide Kinder richten sich unten aus. */
.hohj-deckel--sicht .hohj-deckel__schau { align-items: center; }

/* Der Bildschirm traegt das Seitenverhaeltnis, nicht das Bild. Damit
   steht die Hoehe, bevor etwas geladen ist - nichts springt. Die Ecke
   folgt der Maszreihe, verdoppelt: ein Geraet ist runder als ein Feld. */
.hohj-deckel__schirm {
	position: relative;
	aspect-ratio: 844 / 1125;
	border-radius: calc( var(--hohj-r-gross) * 3 );
	border: 1px solid var(--hohj-linie);
	padding: 10px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 24px 60px rgba( 22, 21, 15, .10 );
}

/* Der Steg oben. Kein Foto eines Telefons, nur die Andeutung - alles
   andere waere fremde Marke auf unserer Seite. */
.hohj-deckel__hoerer {
	position: absolute;
	z-index: 2;
	top: 18px;
	left: 50%;
	transform: translateX( -50% );
	width: 62px;
	height: 5px;
	border-radius: 3px;
	background: var(--t-tinte-14);
}

.hohj-deckel__blatt {
	position: absolute;
	inset: 10px;
	width: calc( 100% - 20px );
	height: calc( 100% - 20px );
	object-fit: cover;
	border-radius: calc( var(--hohj-r-gross) * 2 );
	opacity: 0;
	transition: opacity .55s ease;
}

.hohj-deckel__blatt.is-aktiv { opacity: 1; }

.hohj-deckel__schirm--still .hohj-deckel__blatt { opacity: 1; }

/* ---------- Die Badges als Umschalter ---------- */

.hohj-deckel__wechsel .hohj-deckel__chip {
	cursor: pointer;
	appearance: none;
	font-family: var(--t-sans);
}

/* Nur die Linie dunkelt, keine Fuellung. Das Gewicht traegt mit, damit
   der aktive auch ohne Farbe erkennbar bleibt. */
.hohj-deckel__wechsel .hohj-deckel__chip.is-aktiv {
	border-color: var(--hohj-linie-an);
	font-weight: 600;
}

/* ---------- Die Feature-Folie ---------- */

/* Der Weg ist die Strecke, ueber die geschoben wird. Zwei
   Bildschirmhoehen: eine zum Hereinfahren, eine zum Hinausfahren. */
.hohj-weg {
	position: relative;
	height: 200vh;
	height: 200svh;
}

/* Der Schub klebt im Weg, der Laeufer darin bewegt sich. Getrennt,
   weil eine Verschiebung AUF dem klebenden Element in Firefox zittert -
   Klebe und Bewegung vertragen sich nicht auf demselben Kasten.

   Ohne JavaScript (kein hohj-js am html) steht der Laeufer ohne
   Verschiebung da und ist vollstaendig lesbar. */
.hohj-schub {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background: var(--t-tinte);
}

.hohj-schub__lauf {
	display: flex;
	align-items: center;
	height: 100%;
	padding-block: var(--t-7);
	color: #FFFFFF;
	will-change: auto;
}

/* Erst wenn JavaScript laeuft, startet der Laeufer oben ausserhalb. */
.hohj-js .hohj-schub__lauf { transform: translateY( -100% ); }

/* Die Karten im Schub stehen auf hellem Grund - dort gilt Tinte, nicht
   Weiss. Weisse Ueberschriften auf hellen Karten waren unlesbar. */
.hohj-schub .hohj-deckel__karte { background: rgba( 255, 255, 255, .97 ); }
.hohj-schub .hohj-deckel__karte h3 { color: var(--t-tinte); }
.hohj-schub .hohj-deckel__karte p { color: var(--t-tinte-72); }

/* Alles im Schub eine Spur enger: der Inhalt muss in EINE
   Bildschirmhoehe passen, sonst schneidet die Klebe ihn ab. */
.hohj-schub h2 { font-size: var(--t-xl); margin-bottom: var(--t-4); }
.hohj-schub .hohj-deckel__lead { font-size: var(--t-m); margin-bottom: 0; }
.hohj-schub__marken { margin-top: var(--t-4); }
.hohj-schub__vorzuege { margin-top: var(--t-5); gap: var(--t-3); }
.hohj-schub .hohj-deckel__karte { padding: var(--t-4); }
.hohj-schub .hohj-deckel__karte p { font-size: var(--t-s); margin: 0; }
.hohj-schub__bild { max-width: 240px; }

.hohj-schub h2,
.hohj-schub h3 { color: #FFFFFF; }

.hohj-schub h2 {
	margin-block: 0 var(--t-5);
	margin-inline: 0;
	max-width: 20ch;
	font-size: var(--t-2xl);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.1;
}

.hohj-schub .hohj-deckel__micro { color: var(--t-signal); }

.hohj-schub .hohj-deckel__lead {
	margin-inline: 0;
	max-width: 48ch;
	color: rgba( 255, 255, 255, .66 );
}

.hohj-schub__paar {
	display: grid;
	gap: var(--t-7);
	align-items: center;
	width: 100%;
	max-width: 1480px;
	margin-inline: auto;
	text-align: left;
}

@media ( min-width: 960px ) {
	.hohj-schub__paar {
		grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr );
		gap: clamp( 40px, 6vw, 110px );
	}
}

.hohj-schub__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--t-6);
}

/* Auf dunklem Grund traegt der Chip die Kontur, nicht die Flaeche. */
.hohj-schub__marken .hohj-deckel__chip {
	background: none;
	border-color: rgba( 255, 255, 255, .28 );
	color: rgba( 255, 255, 255, .82 );
}

.hohj-schub__vorzuege {
	display: grid;
	gap: var(--t-4);
	margin-top: var(--t-7);
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.hohj-schub__bild { justify-self: center; width: 100%; max-width: 300px; }

.hohj-schub__bild .hohj-deckel__schirm {
	border-color: rgba( 255, 255, 255, .18 );
	background: rgba( 255, 255, 255, .06 );
	box-shadow: none;
}

.hohj-schub__bild .hohj-deckel__hoerer { background: rgba( 255, 255, 255, .22 ); }

@media ( max-width: 959px ) {
	.hohj-weg { height: auto; }
	.hohj-schub { position: static; min-height: 0; }
	.hohj-schub__vorzuege { grid-template-columns: 1fr; }
}

/* ---------- Preiskarten: acht statt vier ---------- */

/* Acht Karten statt vier: dieselbe Karte, nur zwei Reihen. Unter
   1100 px zwei nebeneinander, am Telefon eine. Alles andere kommt
   unveraendert von .hohj-lp__karte - Polsterung, Ecke, Hakenliste,
   Aufklapper, Knopf. */
.hohj-lp__karten--acht { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

@media ( max-width: 1099px ) { .hohj-lp__karten--acht { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 699px )  { .hohj-lp__karten--acht { grid-template-columns: 1fr; } }

.hohj-sicht__fussnote {
	margin-top: var(--t-6);
	font-size: var(--t-s);
	color: var(--t-tinte-50);
}

@media ( max-width: 959px ) {

	/* Uebereinander statt nebeneinander: Bild mittig, die Badges als
	   umbrechende Zeile darunter - eine Spalte rechts neben dem Bild
	   gibt es auf dieser Breite nicht. */
	.hohj-deckel--sicht .hohj-deckel__schau {
		flex-direction: column;
		align-items: center;
		gap: var(--t-5);
	}

	.hohj-deckel--sicht .hohj-deckel__geraet {
		flex: 0 0 auto;
		width: min( 100%, 374px );
	}

	.hohj-deckel--sicht .hohj-deckel__wechsel {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-self: auto;
	}

	.hohj-deckel--sicht .hohj-deckel__wechsel-titel {
		width: 100%;
		margin-bottom: var(--t-2);
		text-align: center;
	}

	.hohj-deckel--sicht .hohj-deckel__wort .hohj-deckel__tueren { margin-top: var(--t-3); }

	.hohj-deckel__zusage { margin-top: var(--t-3); }

	.hohj-deckel--sicht .hohj-deckel__wechsel .hohj-deckel__chip { width: auto; }

	.hohj-deckel__punkte { justify-content: center; }

	/* Der 75-px-Hub des Blocks gilt nur der breiten Buehne - auf dem
	   Telefon wuerde er unten nur Leere lassen. */
	.hohj-deckel--sicht .hohj-deckel__mitte {
		padding-block: var(--t-6);
	}

	.hohj-deckel__wort { text-align: center; }
	.hohj-deckel__wort h1,
	.hohj-deckel__wort .hohj-deckel__lead { margin-inline: auto; }
	.hohj-deckel__wort .hohj-deckel__tueren { justify-content: center; }
	.hohj-schub__paar { text-align: center; }
	.hohj-schub h2,
	.hohj-schub .hohj-deckel__lead { margin-inline: auto; }
	.hohj-schub__marken { justify-content: center; }
}


/* Die tiefe Karte: dieselben Farben wie die grossen internationalen
   Pakete (--bald), aber mit einem Knopf, der etwas tut. Eigene Klasse,
   damit --bald unberuehrt bleibt - dessen Knopf ist absichtlich tot. */
.hohj-lp__karte--tief {
	background: var(--t-tinte);
	border-color: var(--t-tinte);
	color: var(--t-grund);
}

.hohj-lp__karte--tief .hohj-lp__micro {
	background: rgba( 243, 241, 237, .12 );
	color: var(--t-grund);
}

.hohj-lp__karte--tief .hohj-lp__je,
.hohj-lp__karte--tief .hohj-lp__was { color: rgba( 243, 241, 237, .62 ); }

.hohj-lp__karte--tief li { color: rgba( 243, 241, 237, .78 ); }

.hohj-lp__karte--tief .hohj-lp__mehr summary { color: rgba( 243, 241, 237, .62 ); }

.hohj-lp__karte--tief .hohj-knopf {
	background: transparent;
	border: 1px solid rgba( 255, 255, 255, .34 );
	color: #FFFFFF;
}

.hohj-lp__karte--tief .hohj-knopf:hover { border-color: rgba( 255, 255, 255, .7 ); }