/* =====================================================================
   headof.jobs · Rahmen der Strecke — Grundwerte, Theme-Rückzug,
   Kopf und Fuß. Gilt für Landing, Kasse und Käufer-Dashboard.
   ---------------------------------------------------------------------
   EINE Quelle (Ansage Sebastian 20.08.: „die Kopfzeile ist nicht
   überall gleich — die Startseite sollte maßgeblich sein"). Vorher
   trugen alle drei Seiten-CSS ihre eigene Kopie von Grundwerten, Kopf
   und Fuß; die Kasse und das Dashboard hatten dabei den
   Sprachumschalter nie bekommen. Jetzt steht alles hier, EINMAL,
   wörtlich aus der Maßdatei entwurf-seite.html.

   Reihenfolge: Grundwerte → Theme-Rückzug → Grundlagen → Knöpfe →
   Kopf → Fuß → Umbrüche. Eingereiht auf allen Streckenseiten in
   hohj-core.php, direkt nach assets/hohj-grund.css.
   ===================================================================== */

/* --- Grundwerte des Kurses (Maßdatei entwurf-seite.html Z. 27–50) --- */
:root{
  --hohj-platz:#ECECEC;
  --hohj-platz-b:#E6E6E6;
  --hohj-platz-c:#F0F0F0;
  --hohj-platz-d:#E1E1E1;
  --hohj-navh:90px;
  --lin-r-knopf:6px;
  --lin-r-karte:12px;
  --lin-r-panel:16px;
  --lin-linie:var(--hohj-linie-karte);
  --lin-linie-stark:var(--hohj-linie);
  --lin-schatten:0 1px 0 rgba(10,15,26,.03);
  --lin-sperrung:-0.02em;
  /* Hoverfläche mit eigener Rolle: „hell" fällt im Dunkelmodus mit dem
     Grund zusammen (1,00:1, Gegenprüfung 17.08. nachts) */
  --lin-hover:rgba(10,15,26,.05);
  /* Überschriften auf Linear-Maß (gemessen 64/48), immer zwei Zeilen */
  --lin-h1:clamp(2.25rem,3.35vw,4rem);
  --lin-h2:clamp(1.625rem,2.5vw,3rem);
}
[data-modus="dunkel"]{
  --hohj-platz:#1A2029; --hohj-platz-b:#20262F; --hohj-platz-c:#161C24; --hohj-platz-d:#232A34;
  --lin-hover:rgba(255,255,255,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--hohj-grund);color:var(--hohj-tinte);
  font-family:var(--hohj-schrift);font-size:var(--hohj-t-text);line-height:var(--hohj-zh-text);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  transition:background var(--hohj-zeit) var(--hohj-kurve),color var(--hohj-zeit) var(--hohj-kurve)}
img{display:block;max-width:100%}
.bahn{max-width:var(--hohj-breit);margin:0 auto;padding-inline:var(--hohj-rand)}
/* Fokus: EIN Strich, nicht zwei. 2 px mit 3 px Abstand lasen sich als
   doppelter dicker Rahmen (Ansage Sebastian 20.08.: „der aktiv dicke
   rahmen nerft"). Sichtbar bleibt er — nur fein. */
/* Fokus dezenter: grau statt Tinte (Ansage Sebastian 26.08.) --
   sichtbar bleibt er. */
:where(a,button):focus-visible{outline:1px solid var(--hohj-gedimmt);outline-offset:2px;border-radius:4px}
/* Pures Linear (Falstaff ist raus, Ansage 17.08. nachts) */
h1,h2{font-weight:500;line-height:1.08;letter-spacing:var(--lin-sperrung)}
h3{font-weight:600;line-height:1.2;letter-spacing:-0.01em}
.kicker{font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--hohj-gedimmt)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg{stroke-width:1.5}

/* --- Theme-Rückzug: Twenty Twenty-Five tritt zurück --- */
/* Kopf, Fuß und Titel des Themes treten zurück. */
.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;
	--wp--style--root--padding-left: 0px;
	--wp--style--root--padding-right: 0px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Die zentrierte Spalte des Themes gibt die Breite frei: unsere Folien
   sind selbst ein Viewport breit und setzen ihren Rand über .bahn. */
/* Alle Behaelter des Themes geben Breite und Polster frei. Der
   Selektor darf NICHT auf direkte Kinder eingeschraenkt werden: live
   liegt das <main> von Twenty Twenty-Five tief im Baum und traegt
   has-global-padding/is-layout-constrained — mit einer engeren Regel
   blieb die schmale Theme-Spalte stehen und das dreispaltige
   Kassen-Panel quetschte sich hinein (gemessen live 20.08.).
   Unsere eigenen Behaelter heissen .bahn/.rahmen/.hohj-strecke und
   sind keine <main> mehr, werden hier also nicht getroffen. */
.hohj-seite .wp-site-blocks > *,
.hohj-seite main,
.hohj-seite .wp-block-group,
.hohj-seite .wp-block-post-content,
.hohj-seite .entry-content,
.hohj-seite .has-global-padding,
.hohj-seite .is-layout-constrained,
.hohj-seite .wp-block-template-part {
	margin-block-start: 0 !important;
	padding-top: 0 !important;
	max-width: none !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	/* Auch UNTEN: das Global-Padding des Themes liess 70 px unter dem
	   Dashboard stehen — die einzige Ursache des ueberfluessigen
	   Scrolls (gemessen 26.08. am Konto: Gruppe padding-bottom 70,
	   Inhalt 931, scrollHeight 1001). */
	padding-bottom: 0 !important;
}

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

/* Twenty Twenty-Five beschraenkt nicht den Behaelter, sondern dessen
   KINDER auf die Textspalte (.is-layout-constrained > :where(…)
   bekommt max-width). Unsere Abschnitte bringen ihre Breite selbst
   mit — ohne diese Freigabe quetschte sich das dreispaltige
   Kassen-Panel in 565 px und die Zonen lagen uebereinander
   (gemessen live 20.08.). */
.hohj-seite .is-layout-constrained > *,
.hohj-seite .wp-block-post-content > *,
.hohj-seite .entry-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Danach holt sich die Bahn ihre eigene Spalte zurueck — sie ist das
   Mass der Strecke (--hohj-breit), nicht die Textspalte des Themes. */
.hohj-seite .bahn {
	max-width: var(--hohj-breit) !important;
	margin-inline: auto !important;
}

/* Der Grund gehört uns: sonst leuchtet das Theme-Weiß unter dem
   Dunkelstart durch, sobald eine Folie kürzer ist als das Fenster. */
.hohj-seite .wp-site-blocks {
	background: var(--hohj-grund);
}

/* --- Knöpfe (Maßdatei Z. 52–62) --- */
/* Standardknopf = RAND (entspricht .hohj-knopf--zweit der Grundwerte).
   Der EINE Hauptknopf je Flaeche ist gefuellt — siehe .pille--haupt.
   .pille--kontur bleibt als Name und heisst dasselbe wie .pille. */
.pille{height:44px;padding:0 20px;border-radius:var(--lin-r-knopf);border:1px solid var(--lin-linie-stark);
  background:transparent;color:var(--hohj-tinte);font:inherit;font-size:14px;font-weight:500;line-height:20px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--hohj-zeit) var(--hohj-kurve),color var(--hohj-zeit) var(--hohj-kurve),border-color var(--hohj-zeit) var(--hohj-kurve)}
.pille:hover{background:var(--lin-hover);border-color:var(--hohj-tinte)}
/* FESTLEGUNG (Grundwerte, .hohj-knopf in hohj-grund.css — die einzige
   Quelle der Knopfform): Haupt = GEFUELLT (Tinte-Grund, helle Schrift,
   Hover invertiert), alles andere = RAND. Je Flaeche genau EIN
   gefuellter. Die zwei Abweichungen vom 20.08. (alles Rand; dann
   Ton-Flaeche) waren eigene Gestaltung ohne Auftrag — zurueckgebaut. */
.pille--haupt{background:var(--hohj-tinte);border-color:var(--hohj-tinte);color:var(--hohj-hell)}
.pille--haupt:hover{background:transparent;color:var(--hohj-tinte);border-color:var(--hohj-tinte)}
.pille[disabled],.pille[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.pille--kontur{background:transparent;color:var(--hohj-tinte);border-color:var(--lin-linie-stark)}
.pille--kontur:hover{background:var(--lin-hover);border-color:var(--hohj-tinte)}
.pille--klein{height:44px;padding:0 16px}


/* --- Kopf: Punkt links, Werkzeuge rechts (Maßdatei Z. 63–97) --- */
.kopf{position:absolute;inset:0 0 auto 0;height:var(--hohj-navh);z-index:50;
  display:flex;align-items:center;padding-inline:var(--hohj-rand)}
/* Gelb ist die Marke, kein Zustand (E-029 und Ansage Sebastian
   20.08.: „das gelbe zeug auch nicht"). Signalpunkte, Auswahlmarken und
   Meldungen tragen Tinte; die Bedeutung kommt aus dem Wort. Der Punkt
   hier ist das Logo — er bleibt gelb. */
.punkt{width:16px;height:16px;border-radius:9999px;background:var(--hohj-punkt);display:block;flex:none;
  transition:transform var(--hohj-zeit-weg) var(--hohj-kurve)}
/* Punkt beginnt auf Pill-Höhe (23 px, wie die Werkzeuge rechts —
   Ansage 17.08. nachts); das Polster ist raus, der 44er-Punkt bleibt
   selbst das Tippziel; seit 18.08. ist der Punkt 40 (ein Zehntel
   kleiner, gerundet von 39,6), der Halter hält die 44 als Tippziel. */
.punkt-halter{position:fixed;left:var(--hohj-rand);top:0;z-index:60;display:inline-flex;
  min-width:44px;min-height:44px;align-items:center;justify-content:center;
  transform:translateY(var(--weg,23px));transition:transform 120ms linear}
.kopf .punkt{width:40px;height:40px}
.punkt-halter:hover .punkt{transform:scale(1.12)}

/* --- App-Kopf (Kasse + Dashboard, Entscheid Sebastian 21.08.) ---
   64 hoch statt 90, kleiner wandernder Punkt (16), die Wortmarke
   steht daneben und bleibt im Kopf stehen. Die Landing behaelt den
   90er-Kopf und zieht spaeter nach. Seiten unter diesem Kopf rechnen
   ueber --hohj-navh weiter — deshalb kippt der Wert an der
   Body-Klasse hohj-app (inc/seite.php). */
.hohj-app{--hohj-navh:64px}
.kopf--marke{border-bottom:1px solid var(--lin-linie);background:var(--hohj-grund)}
/* Punkt links auf der Zeichenflucht (x = Rand), 16 statt 40; das
   44er-Tippziel haelt der Halter. Startlage 10 = (64 - 44) / 2;
   kopf.js liest --weg-start und wandert von dort. */
/* Im App-Kopf steht der Punkt FEST auf Wortmarken-Hoehe (Ansage
   Sebastian 26.08.: nicht beweglich; kopf.js laesst die Wanderung auf
   .hohj-app aus). Der HALTER ist das 44er-Klickziel mit zentriertem
   Punkt: (64−44)/2 = 10 — gemessen 26.08.: Halter-Mitte 64 =
   Wortmarken-Mitte 63,5. */
.hohj-app .punkt-halter{--weg-start:10;justify-content:flex-start;
  transform:translateY(var(--weg,10px))}
.hohj-app .kopf .punkt,.kopf--marke .punkt{width:16px;height:16px}
.kopf--marke .wortmarke{font-size:16px;font-weight:600;letter-spacing:var(--lin-sperrung);
  color:var(--hohj-tinte);
  /* Punkt (16) + Luecke (10): die Wortmarke beginnt bei Rand + 26. */
  margin-left:26px}
/* Schmale Fenster: der Kontoname faellt aus dem Kopf (er steht in
   Leiste und Gruss), ganz schmal auch die Wortmarke — der wandernde
   Punkt bleibt die Marke. Ohne das ragte der Kopf bei 390 ueber den
   Rand (gemessen 7 px). Mobil-Zwischenstand, SEB-112. */
@media (max-width:640px){
  .kopf--marke .betrieb-wort{display:none}
}
@media (max-width:480px){
  .kopf--marke .wortmarke{display:none}
}
.werkzeuge{display:flex;align-items:center;gap:8px;margin-left:auto}
.wz{height:44px;min-width:44px;padding-inline:12px;border:1px solid transparent;border-radius:var(--lin-r-knopf);
  background:transparent;color:var(--hohj-tinte);font:inherit;font-size:var(--hohj-t-klein);font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
  transition:background var(--hohj-zeit) var(--hohj-kurve),border-color var(--hohj-zeit) var(--hohj-kurve)}
.wz:hover{background:var(--lin-hover)}
.wz svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wz--rahmen{border-color:var(--lin-linie-stark)}
.ig-wort{font-size:14px;font-weight:500}
/* Der Kontoname im Kopf: seit 20.08. auf ALLEN Seiten, sobald jemand
   angemeldet ist — er ist zugleich der Weg ins Käufer-Dashboard
   (Aufträge, Unternehmen, Rechnungen). */
.betrieb-wort{font-size:14px;font-weight:500;max-width:22ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sprach-halter{position:relative}
.sprach-menue{position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:var(--hohj-grund);
  border:1px solid var(--lin-linie-stark);border-radius:8px;box-shadow:var(--lin-schatten);
  padding:4px;display:none;flex-direction:column;gap:2px;z-index:70}
.sprach-halter[data-offen="ja"] .sprach-menue{display:flex}
.sprach-menue button{height:36px;border:0;border-radius:var(--lin-r-knopf);background:none;font:inherit;font-size:14px;
  color:var(--hohj-tinte);text-align:left;padding-inline:10px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.sprach-menue button:hover{background:var(--lin-hover)}
.sprach-menue button[aria-current="true"]::after{content:"";width:8px;height:8px;border-radius:9999px;background:var(--hohj-tinte)}
.sprach-menue .bald{color:var(--hohj-gedimmt);font-size:14px}


/* Der Sprach-Halter ist ein span ohne eigene Schriftgröße — ohne
   diese Zeile erbt er 16 px vom Körper, während die Werkzeuge
   daneben auf 14 px stehen (gemessen live 20.08.). */
.sprach-halter{font-size:var(--hohj-t-klein)}

/* --- Fuß (Maßdatei Z. 375–388) --- */
.fuss{position:relative;overflow:clip;padding-top:var(--hohj-luft-halb);
  border-top:1px solid var(--lin-linie)}
.fuss .oben{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px}
.fuss .satz{color:var(--hohj-gedimmt);font-size:14px;line-height:20px;max-width:320px;margin-top:16px}
.fuss h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--hohj-gedimmt)}
.fuss ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fuss a{color:inherit;text-decoration:none;font-size:14px;
  display:inline-block;padding-block:12px;margin-block:-12px;
  transition:color var(--hohj-zeit) var(--hohj-kurve)}
.fuss a:hover{color:var(--hohj-gedimmt)}
.fuss .marke-zeile{display:flex;align-items:center;gap:12px;font-weight:700;font-size:18px}
.fuss .unterste{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--lin-linie);padding-block:20px;font-size:14px;color:var(--hohj-gedimmt)}


/* --- Umbrüche für Kopf und Fuß --- */
@media (max-width:640px){
  /* Auf schmalen Schirmen weichen die Wörter, die Symbole bleiben. */
  .ig-wort{display:none}
  .betrieb-wort{display:none}
  .werkzeuge{gap:6px}
}
@media (max-width:1024px){
  .fuss .oben{grid-template-columns:1fr 1fr}
}
/* Unter 960 steht der Markenpunkt fest oben links. Der Wanderweg ist
   fuer die Folien der Landing gebaut; auf gestapelten schmalen
   Layouts pfluegt er durch den Inhalt (gesehen 20.08.: er deckte die
   Ueberschrift "Zugaenge"). Zwischenstand bis zur Mobil-Sitzung
   SEB-112 — !important, weil kopf.js den Weg als Inline-Variable
   setzt. */
@media (max-width:960px){
  /* absolute statt fixed: der Punkt haengt am Kopf und scrollt mit ihm
     weg — festgepinnt deckte er beim Scrollen weiter Inhalt (gemessen
     20.08., 390 px). */
  .punkt-halter{position:absolute;--weg:23px !important}
  /* Der Bezug ist jetzt der Kopf, nicht das Fenster: top:32 aus der
     Adminleisten-Regel schob den Punkt UNTER den Kopf auf den Inhalt
     (gemessen 27.08. bei 684 px, nur Verwalter). Der Kopf selbst
     wird von der Adminleiste verschoben — der Punkt braucht 0. */
  body.admin-bar .punkt-halter{top:0}
  /* Der App-Kopf behaelt seine feste Mitte (Ansage 26.08.). */
  .hohj-app .punkt-halter{--weg:10px !important}
}
@media (max-width:480px){
  .fuss .oben{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:0ms!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* --- Formularfelder. Standen bis 1.18.5 wortgleich in hohj-kasse.css
   UND hohj-dashboard.css; das Anmeldefenster braucht sie auf allen drei
   Streckenseiten. Eine Quelle, kein zweiter Satz Werte.
   `.felder` bleibt je Seite, die Gitterabstaende unterscheiden sich. --- */
.feld{display:flex;flex-direction:column;min-width:0}
/* display ueberstimmt das hidden-Attribut (CLAUDE.md Fehler 23 — hier
   zum FUENFTEN Mal zugeschlagen: die Rechnungsfelder im
   Betriebs-Fenster standen trotz hidden offen, gemessen 26.08.). */
.feld[hidden]{display:none}
.feld--voll{grid-column:1 / -1}
.feld label{font-size:14px;line-height:20px;font-weight:500;margin-bottom:6px}
.format{font-weight:400;color:var(--hohj-gedimmt);font-size:12px;margin-left:4px}
.eingabe{min-height:44px;width:100%;padding-inline:12px;
  border:1px solid var(--lin-linie-stark);border-radius:var(--lin-r-knopf);
  background:var(--hohj-grund);color:var(--hohj-tinte);font:inherit;font-size:14px;
  transition:border-color var(--hohj-zeit) var(--hohj-kurve)}
/* Hover grauer statt voller Tinte (Ansage Sebastian 26.08.) — der
   Fokus behaelt die Tinte. */
.eingabe:hover{border-color:var(--hohj-gedimmt)}
/* Selects: eigener Winkel mit Polster statt Browser-Pfeil an der
   Kante (Befund Sebastian 26.08.: „ueberall muss der Pfeil mal
   richtig sitzen"). Grauwert statt Variable — data-URIs koennen
   keine CSS-Variablen; das Grau traegt auf hell und dunkel. */
select.eingabe{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px}
/* Der Rahmen allein zeigt den Fokus nicht — :where(a,button) oben fasst
   Eingaben nicht. Dieselben Werte wie dort (E-040, Zugaenglichkeit). */
.eingabe:focus-visible{outline:1px solid var(--hohj-gedimmt);outline-offset:0;border-color:var(--hohj-gedimmt)}
/* Zusatztexte ueberall so klein wie der Minifuss — 12/16 (Ansage
   Sebastian 26.08.: „solche zusaetze muessen immer und ueberall so
   klein wie der footer sein"). Vorher 14/20. */
.hinweis{font-size:12px;line-height:16px;color:var(--hohj-gedimmt)}

/* --- Anmeldefenster im PULT-Design (Ansage Sebastian 06.09.2026:
   "generell nur noch pult design anwenden"). Alle Werte woertlich aus
   assets/hohj-pult.css gemessen (Rollen: Feld, Eingabe, Knopf,
   Popup-Vorhang) — die Datei bleibt die Quelle, hier wird nichts neu
   erfunden. hohj-pult.css selbst kann nicht mitladen: ihr .hohj-knopf
   (36 hoch) wuerde den Portalknopf der Strecke (58 hoch) ueberstimmen.
   Zieht das Fenster einmal in die Pult-Schale, faellt dieser Block und
   die Pult-Klassen greifen direkt. Manrope laedt
   assets/hohj-schrift-manrope.css (hohj-core.php reiht sie ein). --- */
.hohj-fenster{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:24px;
  font-family:"Manrope","SF Pro Text","Segoe UI Variable","Segoe UI",Inter,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif}
.hohj-fenster[hidden]{display:none}
/* Der Vorhang dimmt wie das Popup des Pults. */
.hohj-fenster__grund{position:absolute;inset:0;background:rgba(3,3,3,.55);border:0;padding:0}
.hohj-fenster__kasten{position:relative;width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  border:1px solid rgba(241,238,231,.06);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.007)),#09090a;
  box-shadow:rgba(255,255,255,.03) 0 1px 0 inset;color:#fff;padding:24px 18px}
/* Seitlich 18 statt 24 (478, G2-6, Ansage Sebastian 09.09.2026: ein
   Innenabstand „inkl. login, registrieren"): Der Titel traegt 18 wie
   der Kartenkopf des Pults, die Felder standen mit 24 sechs Pixel
   rechts davon (gemessen 774 gegen 780). Jetzt stehen Titel und
   Felder buendig — in allen fuenf Schritten. */
.hohj-fenster__zu{position:absolute;top:4px;right:4px;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:11px;cursor:pointer;
  color:rgba(255,255,255,.44);
  transition:color .18s}
.hohj-fenster__zu svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round}
.hohj-fenster__zu:hover{color:#fff}
/* Der Titel traegt die Feldkopf-Grammatik des Pults (15/500, eigene
   Kopfzeile mit Linie); die negativen Raender ziehen die Zeile ueber
   das Kastenpolster auf volle Breite, rechts bleibt Platz fuer den
   Schliessen-Knopf. */
.hohj-fenster__kasten h2{margin:-24px -18px 0;min-height:52px;display:flex;align-items:center;
  padding:9px 56px 9px 18px;border-bottom:1px solid rgba(241,238,231,.06);
  background:rgba(255,255,255,.007);
  font-size:15px;line-height:1.4;font-weight:500;letter-spacing:-.015em;color:#fff}
/* Die Meldung wohnt IM Schritt, direkt ueber dem kleinen Erklaertext
   (Ansage 06.09.: "ueber den kleinen text in weiss in derselben
   kleinen schrift") — sie erbt die hinweis-Optik und hebt sich nur
   durch Weiss ab. */
.hohj-fenster .hinweis.hohj-fenster__meldung{margin-top:12px;color:#fff}
/* hidden ausdruecklich, nicht nur als Attribut — SEB-87. */
.hohj-fenster__schritt[hidden]{display:none}
.hohj-fenster__satz{margin-top:24px}/* 490, Rhythmus B: Kopf → erster Block 24 (vorher 12) */
.hohj-fenster .hinweis{color:rgba(255,255,255,.44)}
.hohj-fenster__form{margin-top:24px;display:grid;gap:24px}/* 490, Rhythmus B: Block → Block 24 (vorher 20/14) */
/* Eingaben und Labels in der Zeilen-Optik des Pults (32er-Zeile,
   7er-Rundung, keine eigene Flaeche) — der Scope ueberstimmt die
   Streckenwerte von .eingabe und .feld label weiter oben. */
.hohj-fenster .feld label{font-size:13px;line-height:1.4;font-weight:450;color:rgba(255,255,255,.44);margin-bottom:10px}/* 490, Rhythmus B: Beschriftung → Feld 10 (vorher 6) */
.hohj-fenster .eingabe{min-height:32px;height:32px;padding:0 12px;border:1px solid rgba(241,238,231,.06);
  border-radius:7px;background:transparent;color:#fff;font-size:12.5px;font-weight:400;
  transition:border-color .18s}
/* Hover auf .20 — Begruendung in hohj-pult.css. */
.hohj-fenster .eingabe:hover{border-color:rgba(255,255,255,.20)}
/* Die feste Adresszeile der Einladungs-Registrierung (Befund 16,
   08.09.2026): die Adresse steht aus der Vormerkung fest und soll wie
   Text wirken, nicht wie ein Feld. Beide Klassen genannt — Rang wie
   die Grundregel plus eins (Fehlerliste 29). */
.hohj-fenster .eingabe.eingabe--fest,.hohj-fenster .eingabe.eingabe--fest:hover,.hohj-fenster .eingabe.eingabe--fest:focus{background:transparent;border-color:transparent;box-shadow:none;cursor:default}
.hohj-fenster .eingabe:focus-visible{outline:none;border-color:rgba(255,255,255,.28)}
.hohj-fenster .eingabe::placeholder{color:rgba(255,255,255,.44)}
/* Autofill darf die dunkle Zeile nicht blau fluten — dieselbe Abwehr
   wie im Pult, nur mit dem Kastengrund. */
.hohj-fenster .eingabe:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #09090a inset;
  transition:background-color 9999s ease-out}
/* Der Anzeigen-Schalter sitzt IM Passwortfeld, rechts — Text statt
   Auge (kein abgenommener Icon-Satz, Ansage 28.08.). */
.hohj-fenster__pw{position:relative}
.hohj-fenster__pw .eingabe{padding-right:86px}
.hohj-fenster__zeigen{position:absolute;right:1px;top:1px;height:30px;padding:0 12px;
  display:inline-flex;align-items:center;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:500;color:rgba(255,255,255,.44);
  transition:color .18s}
.hohj-fenster__zeigen:hover{color:#fff}
.hohj-fenster__merken{display:flex;align-items:center;gap:8px;min-height:44px;
  font-size:13px;line-height:1.4;color:rgba(255,255,255,.68)}
/* Ohne font:inherit setzt der Browser sein eigenes Arial in die Ankreuzflaeche — der Messer zaehlt dann zwei Schriften. */
.hohj-fenster__merken input{font:inherit;width:16px;height:16px;accent-color:#fff}
/* Der Hauptknopf ist der Pult-Knopf (36 hoch, Lasur) in voller
   Breite — das Pult kennt keine gefuellte Pille. Rundung aber die der
   ZEILE (7, nicht 11): er steht deckungsgleich unter den Eingaben,
   und zwei Radien an derselben Kante springen ins Auge (Ansage
   Sebastian 06.09.: "mich stoert der der button runder ist als der
   input"). */
.hohj-fenster .hohj-fenster__knopf{width:100%;height:36px;display:inline-flex;align-items:center;justify-content:center;
  gap:9px;padding:0 14px;border:1px solid rgba(241,238,231,.108);border-radius:7px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.016));
  box-shadow:rgba(255,255,255,.024) 0 1px 0 inset;
  color:rgba(255,255,255,.96);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  white-space:nowrap;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.hohj-fenster .hohj-fenster__knopf:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.055);color:#fff}
/* --- Die stillen Wege: EIN Bauteil fuer alle Schritte ---
   Befund Sebastian 06.09.: „da passt die ordnung nicht". Vorher trugen
   die drei Wege des Bestaetigen-Schritts drei verschiedene Formen —
   ein Knopf, eine weisse Zeile mit unterstrichenem Link, ein grauer
   Link —, und die auffaelligste gehoerte dem seltensten Fall. Jetzt
   eine Form, eine Groesse, ein Abstand; die Reihenfolge im Markup
   traegt die Rangfolge. Unterstrichen wird nur ein Link INNERHALB
   eines Satzes: dort ist der Strich das Einzige, was ihn als Link
   ausweist. --- */
.hohj-fenster__wege{margin-top:24px;/* 490, Rhythmus B (vorher 16) */display:flex;flex-direction:column;align-items:flex-start}
.hohj-fenster__wege form{margin:0}
/* KEIN flex: In einem Flexcontainer wird der Text zum eigenen Item und
   das Leerzeichen davor faellt weg — „Schon ein Konto?Anmelden"
   (Befund 06.09.: „da fehlt ein freizeichen"). Ein Satz mit Link darin
   ist Fliesstext und bleibt Fliesstext; die 36 des Tippziels tragen
   Zeilenhoehe und Polster (10 + 16 + 10). */
.hohj-fenster__weg{display:block;width:max-content;margin:0;padding:10px 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:12px;line-height:16px;font-weight:500;letter-spacing:-.01em;
  color:rgba(255,255,255,.68);text-decoration:none;transition:color .18s}
.hohj-fenster__weg[hidden]{display:none}
.hohj-fenster__weg:hover{color:#fff}
.hohj-fenster__weg a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hohj-fenster__weg a:hover{color:rgba(255,255,255,.68)}
/* HIERARCHIE (Befund 06.09.: „da muss eine hiarchie rein mit
   abstaenden und unterscheidung zugehoerigkeit"). Drei gleich starke,
   gleich weit stehende Zeilen sind so falsch wie drei verschiedene
   Formen — beides sagt nichts ueber Zusammengehoerigkeit.

   Also nach NAEHE und GEWICHT: Die Tat gehoert zum Schritt, steht
   dicht am Knopf und traegt volle Schrift. Die Auswege fuehren
   HINAUS, stehen abgesetzt hinter einer Haarlinie, leiser, und
   untereinander eng — sie gehoeren zusammen. */
.hohj-fenster__weg--tat{color:#fff;padding-top:6px}
.hohj-fenster__aus{margin-top:10px;padding-top:10px;border-top:1px solid rgba(241,238,231,.06)}
.hohj-fenster__aus .hohj-fenster__weg{padding:6px 0;color:rgba(255,255,255,.44)}
.hohj-fenster__aus .hohj-fenster__weg:hover{color:rgba(255,255,255,.68)}
.hohj-fenster__aus .hohj-fenster__weg a{color:rgba(255,255,255,.68)}
.hohj-fenster__aus .hohj-fenster__weg a:hover{color:#fff}
@media (max-width:480px){
  .hohj-fenster__kasten{padding:20px 18px}
  .hohj-fenster__kasten h2{margin:-20px -18px 0}
}

/* Die WP-Adminbar (32px, unter 783px 46px) liegt sonst ueber dem
   Kopf — sie sieht nur, wer als Verwalter angemeldet ist. Gemessen am
   Leitstand 26.08.2026: header.kopf top 0, html margin-top 32px. Gilt
   fuer beide Lagen des Kopfes (absolute und .kopf--marke fixed). */
body.admin-bar .kopf{top:32px}
body.admin-bar .punkt-halter{top:32px}
@media (max-width:782px){
  body.admin-bar .kopf{top:46px}
  body.admin-bar .punkt-halter{top:46px}
}

/* Der Scrollbalken, einmal fuer alle Streckenseiten (Ansage Sebastian
   26.08.: „der laesst ueberall alles zucken und passt optisch null").
   scrollbar-gutter reserviert die Rinne dauerhaft — ohne sie springt
   die ganze Flaeche beim Bereichswechsel um die Balkenbreite, sobald
   der Inhalt mal kuerzer als das Fenster ist. Duenn und in
   Haarlinienfarbe statt des klobigen Standards; die neuen
   Eigenschaften gelten in Chrome wie Firefox und erben in alle
   Scrollflaechen (Leiste, Tabellen). */
html{scrollbar-gutter:stable}
html{scrollbar-width:thin;scrollbar-color:var(--lin-linie-stark) transparent}

/* Der Markenpunkt sass fuer Verwalter unter 1024 px 32 px zu tief
   (gemessen 02.09.2026 bei 960 px: Punkt y 74, Wortmarke y 53) — die
   Adminleisten-Regel weiter oben (top:32px) schlug die schmale Regel
   (top:0), weil sie spaeter im Fluss steht (Fehlerliste 25). Kunden
   ohne Adminleiste waren nie betroffen. */
@media (max-width:960px){
  body.admin-bar .punkt-halter{top:0}
}

/* --- „Etwas klemmt?" im Anmeldefenster (Ansage 06.09.: „wir schreiben
   keine email öffentlich da muss auch das klemmt formular rein......
   absenden nur mit email"). Abgemeldet kennt niemand den Absender,
   deshalb steht hier ein Adressfeld — im Pult nicht, dort kommt sie
   aus dem Konto. Zu ist es eine graue Zeile, die nichts kostet. --- */
.hohj-fenster__hilfe{margin-top:24px;/* 490, Rhythmus B (vorher 14) */padding-top:12px;border-top:1px solid rgba(241,238,231,.06)}
.hohj-fenster__hilfe-frage{display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer;
  list-style:none;font-size:12px;line-height:16px;color:rgba(255,255,255,.44);transition:color .18s}
.hohj-fenster__hilfe-frage::-webkit-details-marker{display:none}
.hohj-fenster__hilfe-frage::before{content:"+";font-size:13px;line-height:1}
.hohj-fenster__hilfe[open] .hohj-fenster__hilfe-frage::before{content:"–"}
.hohj-fenster__hilfe-frage:hover{color:rgba(255,255,255,.68)}
/* Ein <summary> ist fokussierbar, und Chrome malt seinen Ring auch
   beim MAUSKLICK — beim Aufklappen stand deshalb ein heller Rahmen um
   die Zeile (Befund Sebastian 06.09.: „wenn ich auf etwas klemt klicke,
   dann darf nicht so ein rahmen erscheinen"). Weg ist er nur fuer die
   Maus; wer mit der Tastatur kommt, sieht weiter, wo er steht. */
.hohj-fenster__hilfe-frage:focus{outline:none}
.hohj-fenster__hilfe-frage:focus-visible{outline:1px solid rgba(255,255,255,.28);outline-offset:2px;border-radius:4px}
.hohj-fenster__hilfe-karte{display:grid;gap:10px;justify-items:start;margin-top:10px}
.hohj-fenster__hilfe-karte .eingabe{width:100%}
/* Das Textfeld traegt die Zeilenoptik, nur hoeher. */
/* Mehr Platz zum Schreiben (Ansage 06.09.: „das texteingabe feld muss
   etwas größer sein") — wer beschreibt, was klemmt, braucht mehr als
   drei Zeilen.

   DER DOPPELSELEKTOR IST PFLICHT. `.hohj-fenster .eingabe` (0,2,0)
   setzt `height:32px` fest; ein Modifikator mit EINER Klasse (0,1,0)
   verliert dagegen, egal wie weit hinten er steht — das Feld blieb
   32 px hoch. Genau diese Falle hat heute schon zweimal zugeschlagen:
   an der weissen Meldung (1.26.309) und an der hellen Ausweg-Zeile
   (1.26.315). Wer im Fenster eine Eingabe abwandelt, nennt BEIDE
   Klassen. */
.hohj-fenster .eingabe.hohj-fenster__hilfe-feld{min-height:120px;height:auto;padding:10px 12px;line-height:1.55;resize:vertical}
/* Der Kontaktweg im Fuss sieht aus wie die Verweise daneben — er ist
   nur ein Knopf, weil er das Fenster oeffnet statt zu verlinken. */
.hohj-fuss-klemmt{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;text-align:left}

/* ---- DIE FENSTER FOLGEN DEN BENTOS (Ansage Sebastian 08.09.2026:
   „alle unseren popups müssen gleich sein!" · „naja eigentlich sind
   unsere bentos die referenz" · „aber alle popup auch registrieren und
   login etc").

   Die Werte kommen aus hohj-grund.css (--hohj-t-feld, --hohj-t-satz),
   wo sie am 08.09. als gemeinsame Quelle eingetragen wurden — an den
   Bentos gemessen, nicht gesetzt.

   NUR IM FENSTER, und das ist wichtig: `.feld label` und `.eingabe`
   ohne Scope gelten auf der GANZEN Strecke — hohj-core.php:362 reiht
   diese Datei auf allen Streckenseiten ein, und Kasse, Leitstand und
   Sichtbarkeitsseite benutzen dieselben Klassen. Die Grundregel zu
   aendern haette drei abgenommene Flaechen mitgenommen; sie ziehen
   nach, wenn sie an der Reihe sind, und dann gemessen (Fehlerliste 31).

   Die FARBE bleibt an ihrer Rolle (--hohj-gedimmt): Die Bento-Farben
   sind Dunkelmodus-Werte, das Fenster kann auch hell stehen. Ein
   fester rgba-Wert haette den Hellmodus zerschossen. ---- */
.hohj-fenster .feld label{font-size:var(--hohj-t-feld);font-weight:var(--hohj-g-feld)}
.hohj-fenster .eingabe{font-size:var(--hohj-t-feld)}
.hohj-fenster .hinweis,.hohj-fenster .fuss .satz{font-size:var(--hohj-t-satz)}