/* ============================================================ hohj-grund.css — die Grundwerte ------------------------------------------------------------ Einzige Quelle für Schrift, Farbe, Maß und Bewegung. Kein Wert hieraus wird in einer Datei daneben noch einmal beschrieben (CLAUDE.md §4a). Herkunft: gemessen am 13.08.2026 an der Referenzvorlage (SEB-29, Bauplan-Kommentar), bei 1920 px im Browser ausgelesen. Abweichungen von der Vorlage sind unten einzeln begründet. Gilt zusammen mit: E-029 (Gelb nie Fläche, Bilder 4:5), E-031 (Referenz statt Regelsammlung). ============================================================ */ /* ---- Schrift ------------------------------------------------- Inter Tight, eine Familie, vier Gewichte. Ersetzt Figtree, Manrope und Fraunces (E-029, stand.md). Liegt lokal unter assets/schrift/ — kein Google-Aufruf beim Seitenaufruf. Vorgezogen am 17.08.2026, weil Ansichten ohne Zugriff auf fonts.gstatic.com sonst auf eine Serifenschrift zurückfallen und jede Beurteilung wertlos machen. Eine variable Datei je Zeichenvorrat deckt alle vier Gewichte ab; deshalb font-weight als Bereich 400 700, nicht vier Blöcke. Zeichenbereiche unverändert aus der Google-Auslieferung übernommen (ausgelesen am 17.08.2026). */ /* Inter — die Schwesterschrift fuer Fliesstext und Fusszeile (Schriftsystem 23.08., dok/soll.md Plan 17): Inter Tight ist dafuer zu eng, Absaetze werden zur Textmauer. Gebraucht wird sie von der Presse (Folien) — hier deklariert, geladen erst bei Benutzung. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schrift/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schrift/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schrift/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('schrift/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Der Browser malt Systemteile (Scrollleisten, Auswahllisten, Formularelemente) nach color-scheme — ohne die Angabe bleiben sie hell, auch wenn die Seite dunkel startet (gemessen 21.08. an der Scrollleiste des Dashboards). Der Wert folgt dem Modus. */ color-scheme: light; /* MANROPE, wie im Dashboard (Ansage Sebastian 08.09.2026: „die referenz ist dashbord" · „aber schriftart und so muss auch" · „alles alte ist mist"). Hier stand `Inter Tight`. Das Pult trug schon immer Manrope (hohj-pult.css:86) — zwei verschiedene Schriften auf derselben Seite, und das war der eigentliche Grund, warum die Fenster anders aussahen als die Bentos. Nicht die Groessen: die Familie. Manrope liegt auf den Streckenseiten bereits bereit (hohj-core.php:356 reiht hohj-schrift-manrope.css als Abhaengigkeit von hohj-rahmen ein) — es fehlte nur diese Zeile. Die GROESSEN bleiben, wie sie sind: „landing ist etwas größer....aber schriftart und so muss auch" und „die headlines etc....die gehen natürlich nicht in 13". Vereinheitlicht wird die Art, nicht das Mass. */ --hohj-schrift: 'Manrope', 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; /* Die Serif. Aufgenommen 01.09.2026 (Ansage Sebastian: „Display passt auch"). Sie gilt AUSSCHLIESSLICH auf den Instagram-Folien und dort nur fuer eine Zeile je Deckblatt: die kleine. Auf der Website kommt keine Serif vor — DESIGN-GESETZ und die Werkzeugregel verbieten sie. NOCH NICHT SELBST GEHOSTET: unter assets/schrift/ liegen nur die vier Inter-Dateien. Solange die woff2 von Playfair Display fehlt, greift auf einem fremden Rechner die Ersatzkette (Georgia) — und die Presse rendert dann eine andere Schrift, als hier steht. Das ist die eine offene Stelle an dieser Zeile. */ --hohj-schrift-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --hohj-w-normal: 400; --hohj-w-mittel: 500; --hohj-w-halb: 600; --hohj-w-fett: 700; /* ---- Größenstufen ------------------------------------------ Gemessen: 12 · 14 · 16 · 18 · 20 · 24 · 26 · 40 · 64 · 72 · 84. Die vier großen Stufen schrumpfen an den Umbrüchen (siehe unten). vw ist hier zulässig, aber nur in clamp() mit festem Minimum und Maximum — nie roh (CLAUDE.md Fehler 16). */ /* ---- Die Stufen der FLÄCHEN (Pult, Bentos, Fenster) ------------- Nachgetragen am 08.09.2026 (Ansage Sebastian: „alle unseren popups müssen gleich sein!" · „naja eigentlich sind unsere bentos die referenz" · „wir brauchen generell ein einheitliches bild also ziehe es durch alles"). BEFUND, der dahintersteckt: Die Leiter oben (12 · 14 · 16 …) trägt Landing, Kasse und Sichtbarkeitsseite. Das Pult arbeitet aber mit 13 und 12,5 px — Stufen, die es hier nie gab. Deshalb liefen die beiden Welten auseinander, und deshalb sahen die Anmelde-Fenster anders aus als die Bentos, obwohl Rahmen, Radius und Grund längst übereinstimmen (gemessen 08.09. am Unternehmen-Blatt gegen hohj-rahmen.css). Diese vier Zeilen sind die gemeinsame Quelle. Wer eine Fläche nachzieht, nimmt sie von hier — nicht aus einer zweiten Liste daneben. Die Werte sind an den Bentos GEMESSEN, nicht gesetzt: Überschrift 15/500, Label 13/450 in 0.44, Wert 13/400, Leersatz 12,5/400 in 0.68. */ --hohj-t-feld: 13px; /* Label und Wert in Karten und Fenstern */ --hohj-t-satz: 12.5px; /* Leersatz, Hinweis, Fußnote der Fläche */ --hohj-t-kopf: 15px; /* Überschrift einer Karte oder eines Fensters */ --hohj-g-feld: 450; /* Gewicht der Label — zwischen 400 und 500 */ --hohj-t-kicker: 12px; /* Augenbrauenzeile über jeder Überschrift */ --hohj-t-klein: 14px; /* Knopfschrift, Bildunterschrift, Rolle */ --hohj-t-text: 16px; /* Fließtext */ --hohj-t-text-gr: 18px; /* Fließtext in der Bühne, Zitate */ --hohj-t-zahl: 20px; /* Schrittnummern 01 / 02 / 03 */ --hohj-t-karte: 24px; /* Kartenüberschrift, Frage im Aufklapper */ --hohj-t-karte-gr:26px; /* Kartenüberschrift, groß */ --hohj-t-preis: 40px; /* Preiszahl */ /* Steigung nachgemessen am 17.08.2026: die Referenz hält die Endwerte schon ab 1440 px, nicht erst ab 1920. Die vw-Anteile sind deshalb so gewählt, dass das Maximum bei 1440 erreicht ist; darunter schrumpfen die Stufen weiter bis zum festen Minimum. */ --hohj-t-h3: clamp(2rem, 4.45vw, 4rem); /* 32 → 64 px, voll ab 1440 */ --hohj-t-h2: clamp(2rem, 5.0vw, 4.5rem); /* 32 → 72 px, voll ab 1440 */ --hohj-t-h1: clamp(2.25rem, 5.84vw, 5.25rem);/* 36 → 84 px, voll ab 1440 */ /* ---- Zeilenhöhen ------------------------------------------- Gemessen: Schlagzeilen 1,2 · Fließtext 1,5 · Knopf 1,43. Nie kleiner als 1,0 — die alte Seite hatte 52 px Schrift auf 47 px Zeilenhöhe. */ --hohj-zh-schlag: 1.2; --hohj-zh-text: 1.5; --hohj-zh-eng: 1.35; --hohj-sperrung-kicker: 1px; /* ---- Farbrollen --------------------------------------------- Fünf Werte, mehr nicht. Die alte Seite hatte fünf Off-Weiß- Töne allein für Flächen. Abweichung von der bisherigen Marke, bewusst: Das Dunkel ist kühl (#0A0F1A, Blauanteil), nicht warm (#16150F). Grund: DESIGN-GESETZ §1 verbietet warme Töne ausdrücklich, das alte --t-tinte war selbst einer. Die Referenz löst es kühl. */ --hohj-grund: #FFFFFF; /* Seitengrund */ --hohj-tinte: #0A0F1A; /* Text, Knopfgrund, Umkehrflächen */ --hohj-gedimmt: #595959; /* Fließtext, Nebeninformation */ --hohj-hell: #FAFAFA; /* helle Karten- und Panelfläche, Text auf dunklem Grund. Nachgemessen 17.08.: die Referenz nutzt für alle getönten Flächen #FAFAFA, nicht F5F5F5 */ --hohj-linie: #D9D9D9; /* Ränder an Bedienelementen, Trenner */ /* Sechster Wert, aufgenommen 17.08.2026 auf Entscheid Sebastian (Klickauswahl; Registernummer folgt): Kartenränder. Die Referenz zieht Karten fast randlos (#F1F1F1, gemessen), Bedienelemente behalten die sichtbare --hohj-linie. */ --hohj-linie-karte: #F1F1F1; /* Flächentöne, aufgenommen 17.08.2026 auf Entscheid Sebastian („gleiche Hintergründe wie die Vorlage, passende Farbgebung"; Registernummer folgt). Die Referenz legt Bühne, Preisblock, Kartenköpfe und Schaufläche auf ein warmes Rosa-Verlaufsbild. Umsetzung als gleiche Bildmechanik: assets/ton-verlauf.svg und ton-verlauf-dunkel.svg, Struktur dem Referenzbild nachgebaut (kräftig unten links, seidiges Band nach oben rechts). Farbgebung UNBUNT — zwei Anläufe verworfen: Rosa/warm ist per Verbotsliste raus, Blau hat Sebastian am 17.08. verworfen (die Palette kennt keine fremde Buntfarbe, und Gelb ist nie Fläche, E-029). Die zwei Kernfarben des Bilds stehen hier als Token; wer sie ändert, ändert die SVG-Dateien mit. Nur für Atmosphäre, nie für Text- oder Bedienflächen. */ --hohj-ton: #DDE1E7; --hohj-ton-tief: #C3C9D3; /* Der Markenpunkt. Einziger Farbwert der ganzen Seite. NIE als Fläche für Knopfgrund, Banner oder Abschnitt (E-029). */ --hohj-punkt: #FFDC0D; /* ---- Maß ----------------------------------------------------- Gemessen: 128 px Luft je Abschnitt, unter 1024 auf 96, unter 480 auf 80. Seitenrand 40 / 24 / 20. */ --hohj-luft: 128px; --hohj-luft-halb: 64px; --hohj-rand: 40px; --hohj-abst-1: 4px; --hohj-abst-2: 8px; --hohj-abst-3: 12px; --hohj-abst-4: 16px; --hohj-abst-5: 24px; --hohj-abst-6: 32px; --hohj-abst-7: 48px; --hohj-abst-8: 64px; /* Container, gemessen */ --hohj-breit: 1600px; --hohj-innen: 1440px; --hohj-mittel: 1040px; --hohj-schmal: 800px; --hohj-eng: 640px; --hohj-lesen: 62ch; --hohj-luecke-3: 24px; /* dreispaltiges Raster */ --hohj-luecke-2: 32px; /* zweispaltiges Raster */ /* ---- Form ----------------------------------------------------- */ --hohj-ecke: 12px; --hohj-ecke-karte: 24px; --hohj-ecke-gross: 40px; /* Knopfform: KANTE statt Pille (Entscheid Sebastian 17.08.2026 an der Probebühne probe-knopfform.html, Fassung A; ersetzt den gemessenen Pillenwert der Referenz — Registernummer folgt). Bedienelemente 12, Kleinteile wie Abzeichen 8. --hohj-pille bleibt ausschließlich für echte Kreise: Markenpunkt, Nummern, Plus-Zeichen — Kreis ist Zeichen, keine Knopfform. */ --hohj-r-knopf: 12px; --hohj-r-knopf-klein: 8px; --hohj-pille: 9999px; --hohj-knopf-hoehe: 58px; --hohj-knopf-pad-y: 18px; --hohj-knopf-pad-x: 36px; /* ---- Bewegung ------------------------------------------------- Gemessen: 0,15 s für Zustände, 0,3 s für Verschiebungen, beide mit derselben Kurve. Nichts über 0,3 s — die alte Seite hatte 1,1 s. */ --hohj-kurve: cubic-bezier(0.4, 0, 0.2, 1); --hohj-zeit: 0.15s; --hohj-zeit-weg: 0.3s; /* ---- Bildformate (E-029) --------------------------------------- Regelformat hochkant 4:5. Quer ausschließlich für große Flächenbilder (Bühne, Abschlussabschnitt). */ --hohj-bild: 4 / 5; --hohj-bild-flaeche: 16 / 9; } /* ---- Schwarz-Weiß-Modus ---------------------------------------- Umschalter in der Kopfleiste. Nur die Rollen kippen — kein einziges Maß ändert sich, und der Markenpunkt bleibt gelb. */ /* DIE FARBEN KOMMEN AUS DEM DASHBOARD (Ansage Sebastian 08.09.2026: „die referenz ist dashbord" · „und auch das erscheinungsbild an dashbord anpassen....farben etc" · „generell muss sichtbarkeit voll das erscheinungsbild von dashbord bestandteilen haben"). Vorher stand hier ein BLAUSTICHIGES Schwarz (#0A0F1A) gegen das neutrale #030303 des Pults — nebeneinander sieht man das sofort, auch ohne Messgerät. Dazu ein Text, der nicht ganz weiss war (#F5F5F5 gegen #ffffff), und Linien aus einer anderen Familie. Die Werte sind aus hohj-pult.css:46-70 uebernommen, wo sie an den Bentos haengen: Grund #030303 · Text #ffffff · gedimmt weiss/.68 · fein weiss/.44 Linie rgba(241,238,231,.108) · Kartenlinie rgba(241,238,231,.06) NUR DER DUNKELMODUS. Der Hellmodus der Strecke bleibt unberuehrt — das Pult kennt ihn nicht, es gaebe also nichts, wovon man ihn ableiten koennte. */ [data-modus="dunkel"] { color-scheme: dark; --hohj-grund: #030303; --hohj-tinte: #ffffff; --hohj-gedimmt: rgba(255, 255, 255, 0.68); --hohj-hell: #09090A; --hohj-linie: rgba(241, 238, 231, 0.108); --hohj-linie-karte: rgba(241, 238, 231, 0.06); --hohj-ton: #09090A; --hohj-ton-tief: #0E0E10; } /* ---- Umbrüche --------------------------------------------------- Ein einziger Satz Umbrüche: 1024 · 768 · 480. Die Referenz schleppt zwei Sätze übereinander (Tailwind plus Webflow-Erbe bei 479/600/767/991) — nicht übernommen. */ @media (max-width: 1024px) { :root { --hohj-luft: 96px; --hohj-luecke-3: 20px; /* Überschriften: nachgemessen 17.08. — die Referenz hält bei 1024 noch fast die Endgrößen (H1 80 · H2 72 · H3 64), erst darunter fällt sie deutlich. Die Desktop-Steigung lieferte hier nur 60/51/46; steilere Steigung mit denselben festen Grenzen. */ --hohj-t-h1: clamp(2.25rem, 7.8vw, 5rem); --hohj-t-h2: clamp(2rem, 7.0vw, 4.5rem); --hohj-t-h3: clamp(2rem, 6.25vw, 4rem); } } @media (max-width: 768px) { :root { --hohj-rand: 24px; --hohj-luft: 96px; } } @media (max-width: 480px) { :root { --hohj-rand: 20px; --hohj-luft: 80px; --hohj-luecke-2: 20px; } } /* ================================================================ Bausteine — nur was den Takt trägt. Alles Weitere entsteht je Abschnitt. ================================================================ */ .hohj-seite { background: var(--hohj-grund); color: var(--hohj-tinte); font-family: var(--hohj-schrift); font-size: var(--hohj-t-text); font-weight: var(--hohj-w-normal); line-height: var(--hohj-zh-text); -webkit-font-smoothing: antialiased; } /* Abschnitt: die Luft ist berechnet, nicht übrig geblieben */ .hohj-abschnitt { padding-block: var(--hohj-luft); padding-inline: var(--hohj-rand); } .hohj-innen { max-width: var(--hohj-innen); margin-inline: auto; } .hohj-mittel { max-width: var(--hohj-mittel); margin-inline: auto; } .hohj-schmal { max-width: var(--hohj-schmal); margin-inline: auto; } /* Der Kicker — er eröffnet jeden Abschnitt. Sieben Mal auf der Referenzseite, und er ist es, der den Takt hält. */ .hohj-kicker { font-size: var(--hohj-t-kicker); font-weight: var(--hohj-w-halb); letter-spacing: var(--hohj-sperrung-kicker); text-transform: uppercase; color: var(--hohj-gedimmt); margin-bottom: var(--hohj-abst-4); } /* Schlagzeilen — immer volles Dunkel, nie gedimmt. Die alte Seite stellte ihre größte Überschrift auf 50 %. */ .hohj-h1, .hohj-h2, .hohj-h3 { font-weight: var(--hohj-w-fett); line-height: var(--hohj-zh-schlag); color: var(--hohj-tinte); /* Keine Unterschneidung: nachgemessen 17.08., die Referenz setzt alle großen Überschriften auf letter-spacing normal. */ text-wrap: balance; } .hohj-h1 { font-size: var(--hohj-t-h1); } .hohj-h2 { font-size: var(--hohj-t-h2); } .hohj-h3 { font-size: var(--hohj-t-h3); } .hohj-text { font-size: var(--hohj-t-text); line-height: var(--hohj-zh-text); color: var(--hohj-gedimmt); max-width: var(--hohj-lesen); } .hohj-text--gross { font-size: var(--hohj-t-text-gr); } /* Knöpfe: zwei Sorten, sonst keine. Pillenform. */ .hohj-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: var(--hohj-knopf-hoehe); padding: var(--hohj-knopf-pad-y) var(--hohj-knopf-pad-x); border-radius: var(--hohj-r-knopf); border: 1px solid var(--hohj-tinte); background: var(--hohj-tinte); color: var(--hohj-hell); font-size: var(--hohj-t-klein); font-weight: var(--hohj-w-halb); line-height: var(--hohj-zh-eng); text-decoration: none; cursor: pointer; transition: background var(--hohj-zeit) var(--hohj-kurve), color var(--hohj-zeit) var(--hohj-kurve), border-color var(--hohj-zeit) var(--hohj-kurve); } .hohj-knopf:hover { background: transparent; color: var(--hohj-tinte); } .hohj-knopf--zweit { background: transparent; border-color: var(--hohj-linie); color: var(--hohj-tinte); } .hohj-knopf--zweit:hover { border-color: var(--hohj-tinte); background: transparent; } .hohj-knopf:focus-visible { outline: 2px solid var(--hohj-punkt); outline-offset: 3px; } /* Der Markenpunkt. Wegweiser und einziges Farbelement. Klebt oben und wandert beim Scrollen mit. */ .hohj-punkt { position: sticky; top: var(--hohj-abst-3); width: 14px; height: 14px; border-radius: 50%; background: var(--hohj-punkt); flex: 0 0 auto; } /* Bilder: hochkant ist die Regel. */ .hohj-bild { aspect-ratio: var(--hohj-bild); object-fit: cover; width: 100%; display: block; border-radius: var(--hohj-ecke-karte); } .hohj-bild--flaeche { aspect-ratio: var(--hohj-bild-flaeche); border-radius: 0; } /* Raster */ .hohj-raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hohj-luecke-3); } .hohj-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hohj-luecke-2); } @media (max-width: 1024px) { .hohj-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .hohj-raster-3, .hohj-raster-2 { grid-template-columns: 1fr; } } /* Wer Bewegung abgeschaltet hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }