/**
* HypeBites – DIE Handschrift: Fenster, Felder, Knöpfe
* ============================================================================
*
* Diese Datei ist die EINE Stelle, an der entschieden wird, wie ein Fenster,
* ein Eingabefeld und ein Knopf in dieser App aussehen. Vorher gab es das an
* sechs Stellen:
*
* hb-style.css Bewertungs-Fenster, Gäste-Sperre, .hb-field, .hb-btn-primary
* hb-spot.css Video vorschlagen, Foto-Blatt
* hb-dashboard.css Merklisten-Fenster, Liste anlegen
* konto-free-user.css Community-Fenster
* hb-owner.css Gründen-Fenster
* hb-form.css noch einmal das Konto-Fenster
*
* Mit sechs verschiedenen Radien (16, 20, 24, 30), drei Titelgrössen, zwei
* Arten von Schliessen-Kreuz und Eingabefeldern, die mal dunkel und mal weiss
* waren. Das sieht man: Drei Fenster nebeneinander wirkten wie drei Apps.
*
* VORLAGE IST „VIDEO VORSCHLAGEN"
* -------------------------------
* Dunkle Karte, Titel in Acid, ein Satz Erklärung, ein Feld, ein Knopf als
* Pille, das Kreuz als Kreis oben rechts. Alle anderen Fenster folgen dem.
*
* WARUM DIE ALTEN KLASSENNAMEN HIER STEHEN
* ----------------------------------------
* Jedes Fenster hat eigene Klassen (.hb-review-box, .hb-gal-sheet-card, …),
* und an ihnen hängt das JavaScript. Sie umzubenennen hiesse, in acht
* Skripten Selektoren nachzuziehen -- für nichts. Deshalb gruppiert diese
* Datei die vorhandenen Namen auf EINE Regel. Die alten Regeln in den sechs
* Dateien oben sind entfernt, nicht überschrieben: Zwei Wahrheiten über
* dieselbe Eigenschaft sind genau der Zustand, aus dem wir kommen.
*
* NEUE FENSTER benutzen die Namen .hb-fenster / .hb-fenster-karte / …, dann
* steht ihr Aussehen ohne weiteres Zutun fest.
*
* Geladen wird die Datei überall (siehe hb_enqueue_ci() in inc/hb-assets.php)
* und NACH den Bauteil-Stylesheets, damit sie ohne !important gewinnt.
*/
/* ==========================================================================
0 DIE SEITE RUTSCHT NICHT SEITWÄRTS
Florian am 11.10.2026: „jetzt sind die Seiten so wishy washy nach links
und rechts swipebar".
Das war kein Überlaufen -- da war nichts zu breit. Es war ABPRALLEN:
Die App ist voller waagerechter Streifen (Filterpillen, Listen-Reiter,
der Spot-Slider, die Fotos, die Videos). Wischt man einen davon über
sein Ende hinaus, reicht der Browser die Bewegung nach oben weiter --
und ganz oben steht die Seite. Die rutscht dann mit, federt zurück, und
genau das fühlt sich an wie ein Wackelkontakt.
Zwei Bremsen, beide nötig:
1. An jedem Streifen `overscroll-behavior-x: contain` -- dort hört
die Bewegung auf. Von 19 waagerechten Streifen hatten das am
11.10.2026 nur 7.
2. Hier an der Seite `none` -- der Notnagel. Ein Streifen, der die
Bremse vergisst, zieht damit trotzdem nichts mehr mit.
Nur waagerecht. Senkrecht soll die Seite federn wie überall sonst --
das ist ein vertrautes Gefühl und kein Fehler.
t-rutschen.php zählt beides nach.
========================================================================== */
html {
overscroll-behavior-x: none;
}
/* ==========================================================================
0b DIE LEISE EINLADUNG
Eine Zeile mit einem Kontur-Plus davor. Kein Knopf, keine Fläche, kein
gefülltes Acid:
(+) Spot fehlt? Trag ihn ein
(+) Kein Foto? Lad eins hoch
(+) Kennst du ein Video? Reich es ein
WARUM DIESE FORM
Eine Einladung soll auffindbar sein, nicht aufdringlich. Sie steht
neben Inhalten, die wichtiger sind als sie -- Spots, Fotos, Videos.
Eine gefüllte Acid-Fläche wäre jedes Mal das Lauteste auf dem Schirm,
und drei davon auf einer Seite wären drei laute Flächen.
Nur das Pluszeichen trägt die Hausfarbe, und auch nur als Kontur. Beim
Darüberfahren füllt sie sich -- dann ist es ein Knopf.
STAND BIS ZUM 11.10.2026 IN hb-dashboard.css. Dort lief sie nur im
Dashboard; auf der Spot-Seite hätte es eine zweite Fassung gebraucht.
========================================================================== */
.hb-cta-zeile {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 8px 2px;
background: none;
border: none;
text-decoration: none;
color: var(--hb-muted, #76766f);
font-family: inherit;
font-size: var(--hb-text-sm, 13px);
font-weight: var(--hb-weight-bold, 600);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.hb-cta-zeile-plus {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
border: 1.5px solid var(--hb-acid, #d9fd51);
border-radius: 50%;
color: var(--hb-acid, #d9fd51);
transition: background var(--hb-ease, .15s ease), color var(--hb-ease, .15s ease);
}
.hb-cta-zeile-plus svg { flex: 0 0 auto; }
.hb-cta-zeile:hover { color: var(--hb-text, #fff); }
.hb-cta-zeile:hover .hb-cta-zeile-plus {
background: var(--hb-acid, #d9fd51);
color: var(--hb-ink, #0b0b0b);
}
/* ---- Die Einladung als LEERZUSTAND ----------------------------------------
Florian am 11.10.2026: „Die Schriften mit den + sehen Ultra lost aus in
den spacings. Kannst du die so hin packen. Das sie mittig sind oder sich
gut einfinden in die Seite?"
Er hat recht, und der Grund ist nicht der Abstand, sondern die FORM: Eine
linksbündige Zeile unter einer Überschrift sieht aus wie der erste Satz
eines Textes, der nicht weitergeht. Sie ist aber kein Satz, sondern das
einzige, was in diesem Abschnitt steht.
Zwei Fälle, zwei Formen -- das ist die ganze Regel:
Der Abschnitt ist LEER -> mittiger Leerzustand. Das Plus steht über
dem Text, beides mittig, mit Luft darum.
Die Fläche gehört dann ihm.
Der Abschnitt hat INHALT -> die leise Zeile darunter, linksbündig.
Sie hängt an dem, was darüber steht.
-------------------------------------------------------------------------- */
.hb-cta-leer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--hb-space-sm, 12px);
width: 100%;
/* Die Höhe ist Absicht: Ein leerer Abschnitt, der nur so hoch ist wie
seine Zeile, wirkt wie ein Fehler. Mit Fläche wirkt er wie ein
Angebot. */
min-height: 132px;
padding: var(--hb-space-md, 20px);
box-sizing: border-box;
border-radius: var(--hb-radius, 16px);
/* Kein Rahmen, keine gestrichelte Kontur. Eine Kontur liest sich als
„hier fehlt etwas", gemeint ist „hier kannst du etwas beitragen". */
background: var(--hb-surface, #151515);
text-align: center;
}
.hb-cta-leer .hb-cta-zeile-plus {
width: 40px;
height: 40px;
}
.hb-cta-leer .hb-cta-zeile-plus svg {
width: 18px;
height: 18px;
}
.hb-cta-leer:hover { color: var(--hb-text, #fff); }
/* ==========================================================================
0c DIE ABSCHNITTS-ÜBERSCHRIFT
„Gerichte", „Videos", „In deiner Nähe", „Bewertungen" -- EIN Element,
und bis zum 11.10.2026 drei Fassungen:
hb-style.css 20px / 400, mobil 18px
hb-spot.css 17px / 700
hb-dashboard.css 22px / 700, mobil 20px (.hb-dash-title)
Drei Grössen und zwei Stärken für dieselbe Sache. Das sieht man nicht
als Fehler, sondern als „jede Seite ist irgendwie anders" -- Florian am
11.10.2026: „Ich möchte das alle Seiten vom Spacing wie die Startseite
funktionieren. Auch die Schriftgrößen dort finde ich perfekt."
Die Werte sind deshalb die der Startseite. .hb-dash-title steht mit
dabei, weil es dasselbe Element ist -- an dem Namen hängt zu viel
JavaScript, um ihn zu tauschen.
WARUM DIE ÜBERSCHRIFT GROSS IST, OBWOHL ES WENIGER DAVON GEBEN SOLL
Beides gehört zusammen. Florian: „Du begrenzt immer alles mit so
Überschriften wie bei den Spotseiten." Viele kleine, fette Zeilen
zerhacken eine Seite in Kästen; wenige grosse mit Luft darum geben ihr
einen Takt. Die Antwort ist nicht „kleiner", sondern „weniger und
grösser".
========================================================================== */
/* DER ABSTAND NACH UNTEN IST AM 14.10.2026 VON 20 AUF 12 GEGANGEN.
Nachgemessen in der Aufnahme, die Florian „smooth" nennt: Dort stehen
zwischen Abschnittsüberschrift und erstem Inhalt 8 bis 10 Pixel. Bei
uns waren es 20 -- also genau so viel wie zwischen zwei Einträgen
darunter. Darin lag der Fehler: Steht die Überschrift gleich weit von
ihrem Inhalt weg wie die Einträge voneinander, gehört sie optisch zu
nichts. Sie schwebt. Nähe ist das einzige Mittel, mit dem eine
Oberfläche „das hier gehört zusammen" sagt -- und es kostet nichts.
Die GRÖSSE bleibt wie sie ist. Die ist Florians Entscheidung vom
11.10. („Auch die Schriftgrößen dort finde ich perfekt"), und das
Nachmessen hat sie bestätigt: 17-18px in der fremden App, 17px bei uns
am Rechner. Geändert hat sich nur, wie nah der Inhalt steht. */
.hb-section-title,
.hb-dash-title {
margin: 0 0 var(--hb-space-sm, 12px);
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-xl, 22px);
/* 700 und 1.25 ausgeschrieben, nicht als Token: --hb-weight-bold ist
600 und --hb-lh-tight 1.15. Das sind die Werte der Startseite, und
die sind hier die Vorlage -- sie über ein Token zu holen würde sie
still verändern. */
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
color: var(--hb-text, #fff);
}
@media (max-width: 767px) {
.hb-section-title,
.hb-dash-title { font-size: 20px; }
}
/* AM RECHNER WIRD SIE KLEINER, NICHT GRÖSSER.
Das ist kein Vertippen. Am Telefon ist die Überschrift das Erste, was
man sieht; am Rechner stehen mehrere Abschnitte gleichzeitig im Bild,
und was mehrfach untereinander vorkommt, ist keine Schlagzeile, sondern
ein Wegweiser. YouTube setzt „Weitere Empfehlungen" auf 20px, Instagram
seine Rubriken auf 16. Wir nehmen 17 -- die Karten darunter bekommen
damit mehr Gewicht als ihre Beschriftung.
Stand bis zum 11.10.2026 in hb-wide.css und galt dort NUR für
.hb-dash-title. Auf der Spot-Seite blieb dieselbe Überschrift deshalb
am Rechner 22px gross. Die Grenze ist dieselbe wie dort: ab 901px, also
genau da, wo das Dashboard seine Seitenleiste bekommt. */
@media (min-width: 901px) {
.hb-section-title,
.hb-dash-title {
font-size: var(--hb-text-lg, 17px);
font-weight: var(--hb-weight-bold, 600);
}
}
/* ==========================================================================
0d DER SCHNITT
Ein acht Pixel hoher, randlos schwarzer Streifen quer über den Schirm,
der zwei Abschnitte voneinander trennt.
WOHER
Aus der Bildschirmaufnahme vom 14.10.2026. Die App darin trennt ihre
Abschnitte nicht durch Abstand, sondern durch diesen Streifen -- drei
Mal in einem Bild nachgemessen, jedes Mal exakt 8 Pixel reines
Schwarz (#000) gegen die Fläche darüber und darunter.
WARUM DAS BESSER IST ALS ABSTAND
Weil es eine ZÄSUR ist und kein Nachlassen. Luft zwischen zwei
Abschnitten muss gross sein, um als Trennung zu wirken -- bei uns 46
Pixel -- und selbst dann bleibt sie eine Frage des Grades: Ist der
Abstand hier nun grösser als der dort? Der Streifen ist keine Frage
des Grades. Er ist ein Schnitt. Er braucht ein Fünftel des Platzes
und trennt deutlicher.
Und er löst nebenbei etwas, woran wir mehrfach hängen geblieben sind:
Er geht über die volle Breite, also über den Seitenrand hinaus. Er
zeigt damit, dass die Fläche weitergeht und nur der INHALT eingerückt
ist. Eine Karte mit Rundung kann das nicht -- die sagt „hier ist ein
Kästchen zu Ende", und zwanzig Kästchen untereinander sind genau das,
was Florian am 11.10. „überladen und nicht aus einem Guss" nannte.
ANWENDUNG
Als eigenes leeres Element zwischen zwei Abschnitten:
Der negative Rand holt den Streifen aus dem Seitenrand heraus. 50vw
nach jeder Seite ist bewusst mehr als nötig -- so stimmt es in jedem
Behälter, egal wie breit der gerade ist, und das Überstehende
schneidet der Behälter ab (jede App-Seite hat overflow-x: clip,
siehe Block 0).
========================================================================== */
.hb-schnitt {
height: var(--hb-band, 8px);
margin-left: -50vw;
margin-right: -50vw;
padding-left: 50vw;
padding-right: 50vw;
background: var(--hb-ink, #0b0b0b);
/* Kein border, kein Radius, keine Höhe über 8: Sonst wird aus dem
Schnitt wieder eine Linie, und Linien hatten wir 54. */
border: 0;
flex: 0 0 auto;
}
/* Zwei Schnitte hintereinander (wenn ein Abschnitt leer ist und sich
selbst ausblendet) wären ein 16er Balken. Der zweite verschwindet. */
.hb-schnitt + .hb-schnitt { display: none; }
/* ==========================================================================
0e DIE REITERLEISTE
Gleich breite Reiter, einer davon aktiv: ein Unterstrich darunter, die
Schrift weiss, die übrigen grau. Darunter eine Haarlinie über die volle
Breite.
SIE HIESS BIS ZUM 16.10.2026 „ZWEITEILER", UND DAS WAR DER FEHLER.
------------------------------------------------------------------
Florian, mit vier Bildern aus der eigenen App nebeneinander:
„Guck mal wie viele verschiedene teiler du gebaut hast. Das meine ich
nicht mit CI ich möchte das die alle einer Logik folgen….."
Beim Zählen waren es fünf Umschalter in fünf Formen -- für ein und
dieselbe Aufgabe:
Startseite Unterstrich weiss, volle Breite .hb-zweiteiler
Konto dasselbe .hb-zweiteiler
Feed Unterstrich ACID, links, kurz .hb-feed-tab
Profil gefüllte weisse Pillen .hb-ptab
Spot-Seite Pillen mit Symbol .hb-sp-reiter-knopf
Jede einzelne war für sich begründet. Zusammen sagen sie dem Benutzer
fünfmal etwas anderes über denselben Vorgang -- und das ist nicht
„CI", das ist das Gegenteil davon.
Der Name war Teil des Problems. „Zweiteiler" beschrieb die ERSTE
Verwendung (zwei Hälften), nicht die Sache. Ein Bauteil, das nach
seinem ersten Einsatzort heisst, lädt dazu ein, für den zweiten ein
neues zu bauen. Es heisst deshalb jetzt .hb-reiter und trägt zwei,
drei oder vier.
DIE EINE AUSNAHME, MIT GRUND
----------------------------
Die Listen im Merkzettel (.hb-list-tab) bleiben Pillen. Sie sind kein
fester Satz von Ansichten, sondern eine Menge, die der Benutzer selbst
anlegt: Sie wächst, sie rollt seitwärts, und jede Liste trägt ihre
eigene Farbe. Gleich breite Reiter mit Unterstrich können das nicht --
bei acht Listen wäre jeder Reiter 48 Pixel breit und die Farbe hätte
keinen Platz.
DIE REGEL, IN EINEM SATZ
------------------------
Ein fester, kleiner Satz gleichwertiger Ansichten ist eine
Reiterleiste. Eine wachsende, selbst angelegte Menge ist eine
Pillenreihe. Alles andere, was man antippen kann, ist ein Knopf.
Florian am 14.10.2026:
„Super Idee mit der Trennung! Ich würde ja noch fühlen Besuche und
Bewertungen oben mit einem Zweiteiler zu trennen. Also was bei Tik
tok zur Überprüfung und deine Bewertung sind soll bei uns dann halt:
Besuche ohne Bewertung und [mit] Bewertung."
NACHGEMESSEN IN SEINER ZWEITEN AUFNAHME
---------------------------------------
Leiste 44pt hoch, Fläche eine Stufe heller als der Grund
Beschriftung 16pt, aktiv weiss und fett, inaktiv #9a9a9a
Unterstrich 2pt, weiss, am unteren Rand der Leiste
NICHT über die ganze Hälfte, sondern 16pt von jeder
Seite eingerückt
Haarlinie unter der ganzen Leiste, sehr leise
WARUM DER UNTERSTRICH EINGERÜCKT IST
Ein Unterstrich über die ganze Hälfte stösst in der Mitte an den der
anderen Hälfte -- dann liest man eine durchgehende Linie mit einer
hellen und einer dunklen Hälfte, also eine Fortschrittsanzeige. Der
Einzug macht aus der Linie wieder eine Markierung.
WARUM DER UNTERSTRICH WEISS IST UND NICHT ACID
Acid ist die Farbe jedes Knopfes. Wäre der aktive Reiter auch Acid,
hiesse Acid „anklickbar" UND „ausgewählt" -- und damit nichts mehr.
Derselbe Grund, aus dem GEMERKT am 08.10.2026 auf Petrol gewechselt ist.
WARUM HIER UND NICHT IN konto-free-user.css
Weil die Spot-Seite dieselbe Form gebrauchen kann („Alle Bewertungen" /
„Nur mit Foto") und die Merkliste auch. Eine zweite Fassung neben
dieser wäre genau der Fehler, der im Projekt sechsmal passiert ist.
========================================================================== */
.hb-reiter {
display: flex;
/* Randlos: Die Leiste läuft bis an den Bildschirmrand, der Inhalt
darunter behält seinen Seitenrand. Genau wie in der Aufnahme. */
margin: var(--hb-space-md, 20px) calc(var(--hb-gutter, 16px) * -1) var(--hb-space-md, 20px);
/* KEINE EIGENE FLÄCHE. Siehe den Block darunter. */
background: none;
border-bottom: 1px solid var(--hb-line, #242424);
}
/* ---------------------------------------------------------------------
DIE LEISTE BRINGT KEINEN EIGENEN GRUND MIT (16.10.2026)
Florian, mit drei Bildern:
„Auf den anderen Seiten passen die Farben teilweise nicht. Das grau
ist random über dem schwarz und der [Reiter] geht in das Suchfeld
ein."
Beides kam aus derselben Zeile: background: var(--hb-surface).
Die Vorlage, an der die Leiste ausgemessen ist, läuft auf einer
hellen Fläche -- dort IST der Grund der Leiste der Grund der Seite,
und getrennt wird nur durch die Haarlinie. Unsere Seiten sind Tinte
(#0b0b0b). Eine Fläche in #151515 darauf ist kein Grund, sondern ein
aufgeklebter Streifen: heller als alles darüber und darunter, mit
zwei sichtbaren Kanten, die niemand gezogen hat.
Und weil der Streifen eine OBERE Kante hatte, stiess er im Feed
sichtbar an das Suchfeld -- „geht in das Suchfeld ein".
Jetzt trägt sie, was hinter ihr liegt. Getrennt wird durch die
Haarlinie, so wie in der Vorlage. Dazu der Abstand nach oben, damit
sie auch dann nicht klebt, wenn direkt darüber ein Feld steht.
AUSNAHME: die klebende Fassung (.is-klebend) weiter unten. Eine
Leiste, die beim Scrollen stehenbleibt, MUSS decken -- sonst läuft
der Inhalt durch sie hindurch. Dort ist die Fläche keine Zutat,
sondern Bedingung.
--------------------------------------------------------------------- */
.hb-reiter-knopf {
/* minmax(0) in Flex-Schreibweise: Ohne min-width: 0 wächst eine
Hälfte auf die Breite ihres längsten Wortes, und die Leiste schiebt
die Seite seitwärts. Dieselbe Falle wie am 13.10.2026 im Raster. */
flex: 1 1 0;
min-width: 0;
position: relative;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: var(--hb-space-xs, 8px);
margin: 0;
padding: 0 var(--hb-space-sm, 12px);
border: 0;
background: none;
cursor: pointer;
font-family: var(--hb-font, inherit);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-muted, #76766f);
white-space: nowrap;
overflow: hidden;
transition: color var(--hb-ease, .15s ease);
}
/* DAS WORT -- UND WARUM ES EIN EIGENES ELEMENT BRAUCHT.
Hier stand text-overflow: ellipsis am Knopf selbst. Das hat nie
gewirkt, und zwar aus einem Grund, den man nicht sieht, sondern nur
nachliest: text-overflow greift am Block, der den Text SELBST
enthält. Der Knopf ist aber display: flex -- sein Text ist ein
anonymes Flex-Element, und daran kommt die Regel nicht heran.
Folge: Statt „Communit…" wurde mitten im Wort abgeschnitten. Florian
am 16.10.2026: „Auf der Hype Spot Seite ist der teiler noch anders
und gequetscht."
Das Wort steht deshalb in einem eigenen , und dort wirkt es. */
.hb-reiter-wort {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hb-reiter-knopf:hover { color: var(--hb-text-soft, #b9b9b4); }
.hb-reiter-knopf[aria-selected="true"] {
color: var(--hb-text, #fff);
font-weight: 700;
}
/* Der Unterstrich. Als ::after und nicht als border-bottom, weil ein
border die Höhe der Leiste ändern würde -- und dann springt die Zeile
beim Umschalten um zwei Pixel. */
.hb-reiter-knopf::after {
content: "";
position: absolute;
left: var(--hb-gutter, 16px);
right: var(--hb-gutter, 16px);
bottom: 0;
height: 2px;
background: var(--hb-text, #fff);
opacity: 0;
transition: opacity var(--hb-ease, .15s ease);
}
.hb-reiter-knopf[aria-selected="true"]::after { opacity: 1; }
/* EIN REITER KANN EIN KNOPF ODER EIN LINK SEIN.
Die Spot-Seite benutzt , damit der Wechsel
ohne JavaScript funktioniert und ein geteilter Link auf der
Speisekarte landet. Ein Link bringt seine Unterstreichung mit -- und
die säße genau dort, wo der Reiter seine eigene hat. */
.hb-reiter-knopf { text-decoration: none; }
/* DAS SYMBOL -- OPTIONAL, UND KEINE ZWEITE FORM.
Die Reiter der Spot-Seite tragen ein Symbol vor dem Wort. Das ist eine
Zutat innerhalb derselben Form, kein anderer Umschalter: Breite,
Höhe, Unterstrich und Farbe bleiben dieselben. */
.hb-reiter-symbol {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.hb-reiter-symbol svg,
.hb-reiter-symbol .hb-dreier-bild { width: 18px; height: 18px; display: block; }
/* AB DREI REITERN EINE SPROSSE KLEINER.
Nachgemessen am 16.10.2026 bei 390px: Drei Reiter bekommen je 119
Pixel. „Deine Besuche" braucht bei 15px 126, „Communitys" mit Symbol
131 -- also lief beides über und wurde abgeschnitten.
Das ist keine zweite Form, sondern dieselbe bei weniger Platz: die
nächstkleinere Sprosse der Schriftleiter. Bei 13px passen beide.
:has() können alle heutigen Browser. Wer es nicht kann, bekommt 15px
und drei Pünktchen -- unschön, aber nicht kaputt. */
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-knopf {
font-size: var(--hb-text-sm, 13px);
padding: 0 var(--hb-space-xs, 8px);
gap: 6px;
}
/* Das Symbol geht mit. Beim Nachmessen fehlte sonst genau ein Pixel an
„Communitys" -- das Zeichen blieb bei 18, während die Schrift auf 13
gegangen war. Ein Symbol, das nicht mit der Schrift schrumpft, ist
beim nächsten langen Wort wieder der Grund. */
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-symbol svg,
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-symbol .hb-dreier-bild {
width: 16px;
height: 16px;
}
/* AUF SEHR SCHMALEN SCHIRMEN NOCH EINE SPROSSE.
Nachgemessen bei 320px (das kleinste iPhone, das noch im Umlauf ist):
Dort läuft auch „Ohne Bewertung" bei 15px über, und drei Reiter mit
Symbol erst recht. Statt überall Pünktchen zu zeigen, geht die
Schrift eine weitere Sprosse hinunter -- dieselbe Leiter, derselbe
Reiter, nur enger.
Die Pünktchen bleiben als letzte Reissleine: Bei einem wirklich
langen Wort wird auch hier gekürzt, und das ist richtig so. Ein
Reiter, der die Leiste sprengt, schiebt die ganze Seite seitwärts. */
@media (max-width: 374px) {
.hb-reiter-knopf {
font-size: var(--hb-text-sm, 13px);
padding: 0 var(--hb-space-xs, 8px);
}
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-knopf {
font-size: var(--hb-text-xs, 12px);
padding: 0 4px;
gap: 4px;
}
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-symbol svg,
.hb-reiter:has(> .hb-reiter-knopf:nth-child(3)) .hb-reiter-symbol .hb-dreier-bild {
width: 14px;
height: 14px;
}
}
/* Die Zahl neben der Beschriftung. Immer gedämpft, auch im aktiven
Reiter: Sie ist die Nebeninformation, das Wort ist die Hauptsache. */
.hb-reiter-zahl {
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-muted, #76766f);
}
/* ---------------------------------------------------------------------
KLEBEND -- EINE ZUTAT, KEINE ZWEITE LEISTE
Die Reiter der Spot-Seite blieben beim Scrollen oben stehen. Beim
Zusammenlegen der fünf Leisten am 16.10.2026 ist mir das
verlorengegangen -- t-spotkopf.php hat es gemeldet, bevor Florian es
gesehen hat.
Es kommt als Zusatzklasse zurück und nicht als eigene Leiste: Form,
Breite, Unterstrich und Farben bleiben dieselben, dazu kommt nur das
Stehenbleiben.
ÜBER DIE GANZE BREITE ist dabei die Bedingung, nicht die Zugabe.
Florian am 11.10.2026: „Der schwarze Hintergrund bei den Bubbles
Restaurant Community ist nicht links und rechts durchgängig." Eine
klebende Leiste, die den Seitenrand freilässt, ist durchlässig -- der
Inhalt läuft in den beiden Streifen daneben an ihr vorbei. Den
negativen Aussenabstand bringt .hb-reiter ohnehin mit; hier kommt der
deckende Grund dazu.
z-index 30: über dem Inhalt, aber weit unter den Fenstern
(--hb-z-fenster). Eine klebende Leiste, die ein Fenster überdeckt,
ist schlimmer als eine, die nicht klebt.
--------------------------------------------------------------------- */
.hb-reiter.is-klebend {
position: sticky;
top: 0;
z-index: 30;
/* DER EINZIGE ORT MIT EIGENER FLÄCHE -- und hier ist sie Bedingung,
nicht Zutat: Ohne sie läuft der Inhalt beim Scrollen durch die
Leiste hindurch. Tinte und nicht Surface, damit sie zu dem passt,
was darunter wegscrollt. */
background: var(--hb-ink, #0b0b0b);
}
/* Die Tafel unter der Leiste. Nur eine ist je sichtbar. */
.hb-reiter-tafel[hidden] { display: none; }
/* ==========================================================================
1 DAS FENSTER
Ein fester Kasten über allem, mit dunklem Schleier dahinter. Die Höhe
steht zweimal da: 100vh für alles, 100dvh für iOS -- dort ist die
Layout-Höhe grösser als das, was man sieht, und der untere Rand des
Fensters läge sonst hinter der Browserleiste.
========================================================================== */
.hb-fenster,
.hb-modal,
.hb-review-modal,
.hb-konto-modal,
.hb-list-modal,
.hb-gal-sheet {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: var(--hb-z-fenster, 999999);
display: none; /* Grundzustand; JS setzt flex */
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0;
padding: var(--hb-space-md, 20px);
overscroll-behavior: contain;
background: rgba(0, 0, 0, .93);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Zwei Arten, ein Fenster zu zeigen, sind im Projekt in Gebrauch:
style="display:none" plus JS-Umschaltung (ältere Fenster) und das
Attribut hidden (neuere). Beide müssen hier funktionieren -- sonst
klappt beim nächsten Fenster wortlos nichts auf. */
.hb-fenster:not([hidden]),
.hb-modal:not([hidden]),
.hb-konto-modal:not([hidden]),
.hb-gal-sheet:not([hidden]) {
display: flex;
}
.hb-fenster[hidden],
.hb-modal[hidden],
.hb-review-modal[hidden],
.hb-konto-modal[hidden],
.hb-list-modal[hidden],
.hb-gal-sheet[hidden] {
display: none !important;
}
/* Sicherheitsnetz gegen Divi: Ein Elternteil mit transform, filter oder
clip-path macht aus sich selbst einen Stapelkontext, und darin nützt
auch z-index: 999999 nichts mehr -- das Fenster verschwindet hinter dem
Beitragsbild. Das JS hängt Fenster beim Öffnen zusätzlich an . */
.hb-fenster,
.hb-modal,
.hb-review-modal,
.hb-konto-modal,
.hb-list-modal,
.hb-gal-sheet,
body > .hb-review-modal {
transform: none !important;
filter: none !important;
clip-path: none !important;
}
/* --- Die Karte ----------------------------------------------------------- */
.hb-fenster-karte,
.hb-modal-content,
.hb-modal-card,
.hb-review-box,
.hb-konto-modal-card,
.hb-list-modal-card,
.hb-gal-sheet-card {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 420px;
max-height: 88vh;
overflow-y: auto;
padding: var(--hb-space-lg, 28px) var(--hb-space-md, 20px) var(--hb-space-md, 20px);
border: 0;
border-radius: var(--hb-radius, 6px);
background: var(--hb-surface, #151515);
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
text-align: left;
}
/* Der Video-Spieler ist kein Formular: Dort steht ein Einbettungscode, der
seine eigene Breite mitbringt. Er behält deshalb seine Regeln in
hb-style.css -- die ID gewinnt gegen die Klassen hier. */
/* ==========================================================================
2 KOPF: TITEL, SATZ, KREUZ
========================================================================== */
.hb-fenster-titel,
.hb-modal-title,
.hb-review-title,
.hb-konto-modal-title,
.hb-list-modal-title,
.hb-gal-sheet-title {
/* Acid, wie bei „Video vorschlagen". Das ist die eine Stelle, an der
diese Entscheidung steht: Wer Titel lieber weiss hätte, ändert hier
eine Zeile und nicht sechs Dateien. */
margin: 0 0 var(--hb-space-xs, 8px);
padding-right: 40px; /* Platz für das Kreuz */
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-xl, 22px);
font-weight: var(--hb-weight-heavy, 800);
line-height: var(--hb-lh-tight, 1.15);
letter-spacing: -.01em;
color: var(--hb-acid, #d9fd51);
}
.hb-fenster-text,
.hb-modal-text,
.hb-modal-sub,
.hb-gal-sheet-sub,
.hb-list-hint {
margin: 0 0 var(--hb-space-md, 20px);
font-size: var(--hb-text-sm, 13px);
line-height: var(--hb-lh-text, 1.45);
color: var(--hb-text-soft, #b9b9b4);
}
/* Das Kreuz als Kreis -- nicht als nacktes Zeichen. Ein 30px grosses „×"
ohne Fläche ist auf dem Handy ein Ziel von der Grösse eines Buchstabens;
der Kreis ist 34px und damit treffbar. */
.hb-fenster-zu,
.hb-modal-close,
.hb-review-close,
.hb-konto-modal-close {
position: absolute;
top: 14px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
background: var(--hb-surface-2, #1f1f1f);
font-size: 21px;
font-weight: var(--hb-weight-med, 500);
line-height: 1;
color: var(--hb-text-soft, #b9b9b4);
transition: background var(--hb-ease, .15s ease), color var(--hb-ease, .15s ease);
}
.hb-fenster-zu:hover,
.hb-modal-close:hover,
.hb-review-close:hover,
.hb-konto-modal-close:hover {
background: var(--hb-line, #242424);
color: var(--hb-text, #fff);
}
/* ==========================================================================
3 FELDER
Ein Feld, überall gleich: dunkle Fläche, kaum gerundet, Acid beim
Hineintippen. Vorher waren drei von ihnen weiss -- das kam nicht aus
einer Entscheidung, sondern daher, dass Divis eigene Regeln für input
spezifischer sind als eine einzelne Klasse. Deshalb steht hier !important:
nicht aus Bequemlichkeit, sondern weil der Gegner spezifischer ist.
16px ist Pflicht und keine Geschmacksfrage: Darunter zoomt iOS beim
Hineintippen die ganze Seite heran.
========================================================================== */
.hb-fenster-feld,
.hb-field,
.hb-list-input,
.hb-list-modal-input,
.hb-gal-caption-input,
.hb-fenster input[type="text"]:not(.hb-honeypot),
.hb-fenster input[type="url"]:not(.hb-honeypot),
.hb-fenster input[type="email"]:not(.hb-honeypot),
.hb-fenster textarea,
.hb-modal input[type="text"]:not(.hb-honeypot),
.hb-modal input[type="url"]:not(.hb-honeypot),
.hb-modal input[type="email"]:not(.hb-honeypot),
.hb-modal textarea,
.hb-gal-sheet input[type="text"]:not(.hb-honeypot),
.hb-gal-sheet textarea {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0 0 var(--hb-space-sm, 12px) !important;
padding: 14px 16px !important;
border: 0 !important;
border-radius: var(--hb-radius-sm, 4px) !important;
background: var(--hb-surface-2, #1f1f1f) !important;
font-family: inherit;
font-size: 16px !important;
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-text, #fff) !important;
box-shadow: none !important;
color-scheme: dark;
}
.hb-fenster-feld::placeholder,
.hb-field::placeholder,
.hb-list-input::placeholder,
.hb-list-modal-input::placeholder,
.hb-gal-caption-input::placeholder {
color: var(--hb-muted, #76766f);
opacity: 1;
}
.hb-fenster-feld:focus,
.hb-field:focus,
.hb-list-input:focus,
.hb-list-modal-input:focus,
.hb-gal-caption-input:focus,
.hb-fenster input:focus,
.hb-fenster textarea:focus,
.hb-modal input:focus,
.hb-modal textarea:focus,
.hb-gal-sheet input:focus,
.hb-gal-sheet textarea:focus {
outline: 2px solid var(--hb-acid, #d9fd51) !important;
outline-offset: 0;
border-color: transparent !important;
}
/* Der Honigtopf ist ein Feld für Bots, keins für Menschen. Die Feldregeln
oben nehmen ihn per :not() aus -- das ist der ehrliche Weg: nicht erst
gestalten und dann zurücknehmen. Diese Regel hier ist der Gürtel zum
Hosenträger, falls später jemand einen Selektor ergänzt und die Ausnahme
vergisst. */
.hb-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
opacity: 0 !important;
}
/* --- Die Beschriftung über einem Feld ------------------------------------ */
.hb-fenster-label,
.hb-gal-label,
.hb-gruenden-label,
.hb-memo-label {
display: block;
margin: 0 0 6px;
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-sm, 13px);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-text-soft, #b9b9b4);
}
/* Zweite und jede weitere Beschriftung bekommt Luft nach oben -- die erste
nicht, sonst klafft eine Lücke unter dem Einleitungssatz. */
.hb-fenster-feld + .hb-fenster-label,
.hb-gal-caption-input + .hb-gal-label,
* + .hb-gruenden-label { margin-top: var(--hb-space-md, 20px); }
/* ==========================================================================
4 KNÖPFE -- DIE PILLE
Eine Form für jeden Hauptknopf der App: rund, Acid, dunkle Schrift.
Eine Form für jeden Nebenknopf: rund, durchsichtig, dünne Linie.
Nicht rund sind bewusst: Reiter, Filter-Chips und Aufkleber. Die sind
keine Knöpfe, sondern Zustände -- und wenn alles rund ist, ist nichts
mehr besonders.
min-height: 48px ist kein Gestaltungswunsch, sondern die Grösse, die ein
Daumen zuverlässig trifft.
========================================================================== */
/* --- Das Aussehen: gilt für JEDEN Hauptknopf ----------------------------- */
.hb-fenster-ja,
.hb-btn-primary,
.hb-review-submit,
.hb-gal-send,
.hb-konto-modal-save,
.hb-list-modal-save,
.hb-memo-speichern,
.hb-sp-hin,
.hb-guest-cta-btn,
.hb-guest-login,
.hb-compose-send,
.hb-com-new-send,
.hb-creator-send,
.hb-gruenden-send,
.hb-owner-save,
.hb-flag-send,
.hb-konto-cta,
.hb-dash-emptystate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hb-space-xs, 8px);
/* box-sizing ist hier keine Formsache: Ein mit width:100% und
22px Polster rechnet sonst das Polster ON TOP und steht links und
rechts über seine Karte hinaus. Genau so sah „Anmelden" im
Gäste-Fenster aus. */
box-sizing: border-box;
/* 52 statt der 48, die als Mindestmass für einen Daumen gelten: Der
Hauptknopf soll nicht nur treffbar sein, sondern sichtbar grösser als
alles, was daneben steht. */
min-height: 52px;
padding: 15px 22px;
border: 0;
border-radius: var(--hb-radius-pill, 999px);
cursor: pointer;
background: var(--hb-acid, #d9fd51);
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
line-height: 1.2;
text-align: center;
text-decoration: none !important;
color: var(--hb-ink, #0b0b0b) !important;
transition: background var(--hb-ease, .15s ease), transform var(--hb-ease, .15s ease);
}
/* --- Die Breite: nur, wo der Knopf die EINE Handlung seines Kastens ist ---
Ein Knopf in einem Fenster füllt die Karte. Ein Knopf neben einem Satz
(der Hinweis für Gäste, der leere Zustand im Dashboard) ist nur ein Wort
breit -- sonst schiebt er den Satz weg, zu dem er gehört. */
.hb-fenster-ja,
.hb-btn-primary,
.hb-review-submit,
.hb-konto-modal-save,
.hb-list-modal-save,
.hb-memo-speichern,
.hb-sp-hin,
.hb-guest-login,
.hb-gruenden-send {
display: flex;
width: 100%;
}
.hb-fenster-ja:hover,
.hb-btn-primary:hover,
.hb-review-submit:hover,
.hb-gal-send:hover,
.hb-konto-modal-save:hover,
.hb-list-modal-save:hover,
.hb-memo-speichern:hover,
.hb-sp-hin:hover,
.hb-guest-cta-btn:hover,
.hb-guest-login:hover,
.hb-gruenden-send:hover,
.hb-owner-save:hover,
.hb-konto-cta:hover,
.hb-dash-emptystate-btn:hover,
.hb-flag-send:hover {
background: var(--hb-acid-hi, #e8ff7a);
color: var(--hb-ink, #0b0b0b) !important;
}
.hb-fenster-ja:active,
.hb-btn-primary:active,
.hb-review-submit:active,
.hb-gal-send:active,
.hb-memo-speichern:active,
.hb-guest-cta-btn:active,
.hb-sp-hin:active { transform: scale(.985); }
.hb-fenster-ja[disabled],
.hb-btn-primary[disabled],
.hb-review-submit[disabled],
.hb-gal-send[disabled],
.hb-konto-modal-save[disabled],
.hb-memo-speichern[disabled] { opacity: .45; cursor: default; transform: none; }
/* Knöpfe, die IN einer Zeile neben etwas anderem sitzen -- Verfassen-Feld,
Community gründen, der Hinweis für Gäste -- bleiben schmal und eine Spur
flacher. Sie sind Teil der Zeile, nicht ihr Abschluss. */
.hb-compose-send,
.hb-com-new-send,
.hb-creator-send,
.hb-guest-cta-btn,
.hb-konto-cta,
.hb-owner-save,
.hb-dash-emptystate-btn {
/* 44px ist die Untergrenze, die ein Daumen zuverlässig trifft -- auch
für einen Knopf, der nur mitläuft. 42 waren es einmal, und der
Prüfaufbau des Betreiberbereichs hat es sofort gemeldet. */
min-height: 44px;
padding: 11px 20px;
font-size: var(--hb-text-sm, 13px);
}
/* --- Der Nebenknopf ------------------------------------------------------ */
.hb-fenster-nein,
.hb-gal-cancel,
.hb-list-modal-cancel,
.hb-guest-cancel,
.hb-flag-cancel {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
min-height: 52px;
padding: 15px 22px;
border: 1px solid var(--hb-line, #242424);
border-radius: var(--hb-radius-pill, 999px);
cursor: pointer;
background: transparent;
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
text-align: center;
color: var(--hb-text-soft, #b9b9b4);
transition: color var(--hb-ease, .15s ease), border-color var(--hb-ease, .15s ease);
}
.hb-fenster-nein:hover,
.hb-gal-cancel:hover,
.hb-list-modal-cancel:hover,
.hb-guest-cancel:hover,
.hb-flag-cancel:hover {
border-color: var(--hb-text-soft, #b9b9b4);
color: var(--hb-text, #fff);
}
/* Zwei Knöpfe nebeneinander: der Nebenknopf schmaler, weil er nicht der
Weg ist, den die meisten gehen. */
.hb-fenster-wahl,
.hb-gal-sheet-actions {
display: flex;
gap: var(--hb-space-sm, 12px);
margin-top: var(--hb-space-md, 20px);
}
.hb-fenster-wahl .hb-fenster-nein,
.hb-gal-sheet-actions .hb-gal-cancel { flex: 0 1 40%; }
.hb-fenster-wahl .hb-fenster-ja,
.hb-gal-sheet-actions .hb-gal-send { flex: 1 1 60%; }
/* ==========================================================================
5 MELDUNGEN IM FENSTER
========================================================================== */
.hb-fenster-msg,
.hb-modal-msg,
.hb-review-msg,
.hb-konto-modal-msg,
.hb-gal-msg {
margin: var(--hb-space-sm, 12px) 0 0;
min-height: 18px;
font-size: var(--hb-text-sm, 13px);
line-height: var(--hb-lh-snug, 1.3);
text-align: center;
color: var(--hb-text-soft, #b9b9b4);
}
.hb-fenster-msg.is-ok,
.hb-modal-msg.is-ok,
.hb-review-msg.is-ok,
.hb-konto-modal-msg.is-ok { color: var(--hb-acid, #d9fd51); }
.hb-fenster-msg.is-error,
.hb-modal-msg.is-error,
.hb-review-msg.is-error,
.hb-konto-modal-msg.is-error { color: var(--hb-danger, #ff5722); }
/* ==========================================================================
6 AUFKLAPPER IM FENSTER
„Was heisst das genau?" -- die Stelle für alles, was stimmt, aber nicht
jeden interessiert. Regeln, Rechtliches, Erklärungen.
========================================================================== */
.hb-fenster-mehr {
margin: 0 0 var(--hb-space-md, 20px);
font-size: var(--hb-text-sm, 13px);
color: var(--hb-text-soft, #b9b9b4);
}
.hb-fenster-mehr > summary {
cursor: pointer;
list-style: none;
padding: 10px 0;
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-muted, #76766f);
transition: color var(--hb-ease, .15s ease);
}
.hb-fenster-mehr > summary:hover { color: var(--hb-text-soft, #b9b9b4); }
.hb-fenster-mehr > summary::-webkit-details-marker { display: none; }
.hb-fenster-mehr > summary::before {
content: '▸';
display: inline-block;
width: 14px;
transition: transform var(--hb-ease, .15s ease);
}
.hb-fenster-mehr[open] > summary::before { content: '▾'; }
.hb-fenster-mehr ul {
margin: 0 0 6px;
padding: 0 0 0 18px;
line-height: var(--hb-lh-text, 1.45);
}
.hb-fenster-mehr li { margin: 0 0 4px; }
/* ==========================================================================
7 EIN HÄKCHEN
Die Einwilligung beim Foto ist der einzige Ort im Projekt, an dem ein
Häkchen wirklich nötig ist -- und es muss gross genug sein, um es nicht
dreimal zu treffen.
========================================================================== */
.hb-fenster-hakenzeile {
display: flex;
align-items: flex-start;
gap: var(--hb-space-sm, 12px);
margin: 0 0 var(--hb-space-md, 20px);
cursor: pointer;
font-size: var(--hb-text-sm, 13px);
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-text-soft, #b9b9b4);
}
.hb-fenster-haken {
flex: 0 0 22px;
width: 22px;
height: 22px;
margin: 0 !important;
accent-color: var(--hb-acid, #d9fd51);
color-scheme: dark;
cursor: pointer;
}
/* ==========================================================================
7b DER EINSTIEGS-STREIFEN
„Du kennst einen Spot, den es hier noch nicht gibt?" -- steht auf der
Startseite unter dem Raster und auf jeder Seite, auf der [hb_spot_cta]
platziert wird.
Er steht hier und nicht in hb-style.css, weil er aus denselben Teilen
besteht wie jedes Fenster: Fläche, Titel, Satz, Pille. Eine eigene Datei
für einen Streifen wäre der Anfang der nächsten Handschrift.
========================================================================== */
.hb-cta {
display: flex;
flex-direction: column;
gap: var(--hb-space-md, 20px);
margin: var(--hb-space-xl, 40px) 0;
padding: var(--hb-space-lg, 28px) var(--hb-space-md, 20px);
border-radius: var(--hb-radius, 6px);
background: var(--hb-surface, #151515);
text-align: left;
}
.hb-cta-titel {
margin: 0 0 6px;
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-xl, 22px);
font-weight: var(--hb-weight-heavy, 800);
line-height: var(--hb-lh-tight, 1.15);
letter-spacing: -.01em;
color: var(--hb-text, #fff);
}
.hb-cta-sub {
margin: 0;
font-size: var(--hb-text-sm, 13px);
line-height: var(--hb-lh-text, 1.45);
color: var(--hb-text-soft, #b9b9b4);
}
/* Der Knopf ist der Hauptknopf der App -- Form und Farbe kommen aus dem
Abschnitt oben, hier steht nur, dass er am Handy die Breite nimmt und
auf dem Desktop neben dem Satz steht. */
.hb-cta-knopf {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
gap: var(--hb-space-xs, 8px);
width: 100%;
min-height: 52px;
padding: 15px 22px;
border: 0;
border-radius: var(--hb-radius-pill, 999px);
background: var(--hb-acid, #d9fd51);
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
text-decoration: none !important;
color: var(--hb-ink, #0b0b0b) !important;
transition: background var(--hb-ease, .15s ease), transform var(--hb-ease, .15s ease);
}
.hb-cta-knopf:hover { background: var(--hb-acid-hi, #e8ff7a); }
.hb-cta-knopf:active { transform: scale(.985); }
@media (min-width: 768px) {
.hb-cta {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--hb-space-lg, 28px);
padding: var(--hb-space-lg, 28px);
}
.hb-cta-text { flex: 1 1 auto; }
.hb-cta-knopf { width: auto; flex: 0 0 auto; }
}
/* ==========================================================================
8 DIE LUPE
Das Bild in gross liegt über den Fenstern: Man öffnet sie AUS einem
Fenster heraus.
========================================================================== */
.hb-gal-light { z-index: var(--hb-z-lupe, 1000000); }
/* ==========================================================================
9 TABLET UND DESKTOP
Am Telefon füllt ein Fenster fast den Schirm -- dort ist das richtig. Auf
1440px wäre derselbe schmale Streifen in der Mitte verloren, und ein Satz
in einer 420px-Spalte bricht mitten im Gedanken um.
Die Regel steht hier und nicht in hb-wide.css: Ein Bauteil, eine Datei --
sonst kannte die Breitbild-Ebene wieder nur drei der fünf Fenster.
========================================================================== */
@media (min-width: 768px) {
.hb-fenster-karte,
.hb-modal-content,
.hb-modal-card,
.hb-review-box,
.hb-konto-modal-card,
.hb-list-modal-card,
.hb-gal-sheet-card {
max-width: 560px;
padding: var(--hb-space-lg, 28px);
}
.hb-fenster-titel,
.hb-modal-title,
.hb-review-title,
.hb-konto-modal-title,
.hb-list-modal-title,
.hb-gal-sheet-title { font-size: var(--hb-text-xl, 22px); }
}
/* ==========================================================================
HIER STAND DIE FLAGGE AUF DER KARTE
Ein rundes Merken-Zeichen oben rechts im Kartenbild. Entfernt am
11.10.2026 -- Florian: „wenn Merkliste nach unten wandert muss oben
rechts die Flag weg."
Richtig: Das Merken steht jetzt unten in der Fusszeile, in derselben Form
wie auf der Spot-Seite. Zwei Knöpfe für dieselbe Handlung an einer Karte
sind einer zu viel.
Die Klasse .hb-card-save gibt es weiter -- sie sitzt jetzt auf dem Mond
in der Fusszeile und ist der Haken, an dem hb-hydrate.js und
hb-spot-actions.js den Zustand nachziehen. Ihr AUSSEHEN kommt aus dem
Dreier weiter unten.
========================================================================== */
/* ==========================================================================
DIE FOTO-REGELN ALS PIKTOGRAMME
Steht in hb-ci.css und nicht in hb-spotpage.css, weil derselbe Block an
zwei Stellen erscheint: im Foto-Blatt der Galerie und im Besuchs-Fenster.
Zwei Kopien derselben Form laufen beim ersten Nachbessern auseinander --
und zwar still, weil beide für sich richtig aussehen.
Vier Spalten am Rechner, ZWEI am Telefon. Nicht seitlich rollen: Eine
Regel, die man wegwischen muss, um sie zu sehen, ist keine Regel mehr,
sondern ein Geheimnis. Vier nebeneinander auf 390 Pixeln wären 80 Pixel
je Spalte -- da passt „Ohne fremde Gesichter" in vier Zeilen.
========================================================================== */
.hb-fotoregeln {
margin: 18px 0;
}
.hb-fotoregeln-titel {
margin: 0 0 12px;
font-family: var(--hb-font-display);
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
letter-spacing: var(--hb-track-label, .04em);
text-transform: uppercase;
color: var(--hb-muted, #76766f);
}
.hb-fotoregeln-reihe {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 12px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 560px) {
.hb-fotoregeln-reihe { grid-template-columns: repeat(4, 1fr); }
}
.hb-fotoregel {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
/* Die Zeichnung in einer eigenen Fläche: Ohne sie schwimmen vier Striche
im Nichts und sehen aus wie ein Ladefehler. */
.hb-fotoregel-bild {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin: 0 0 2px;
border-radius: 50%;
background: var(--hb-surface, #121212);
color: var(--hb-acid, #d9fd51);
}
/* Die beiden Verbote in gedeckter Farbe. Acid ist im Projekt die Farbe für
das, was gerade zählt -- ein durchgestrichenes Gesicht in Signalgelb
wäre das Auffälligste im ganzen Fenster, und das soll der Knopf sein. */
.hb-fotoregel-gesichter .hb-fotoregel-bild,
.hb-fotoregel-screenshot .hb-fotoregel-bild {
color: var(--hb-muted, #76766f);
}
.hb-fotoregel-bild svg { flex: 0 0 auto; }
.hb-fotoregel-wort {
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-text, #fff);
/* Lange Wörter wie „Screenshots" sollen umbrechen und nicht die Spalte
sprengen. */
overflow-wrap: anywhere;
}
/* Der Nebensatz nur ab Tablet: Am Telefon stehen vier Erklärungen in zwei
Spalten, und der Block wird höher als das, was er erklärt. Das Wort und
das Bild tragen die Aussage dort allein. */
.hb-fotoregel-was { display: none; }
@media (min-width: 560px) {
.hb-fotoregel-was {
display: block;
font-size: var(--hb-text-xs, 12px);
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-muted, #76766f);
}
}
/* ==========================================================================
APP-ATMOSPHÄRE -- EIN MITGLIED SIEHT KEINEN WEBSITE-HEADER
==========================================================================
Gehört zu inc/hb-app-atmo.php. Alles hier hängt an body.hb-app-atmo, und
diese Klasse setzt hb_app_atmo_body_class() nur für angemeldete
Mitglieder auf öffentlichen Seiten. Für Gäste und für die Redaktion ist
dieser ganze Abschnitt wirkungslos -- deshalb darf er in einer Datei
stehen, die überall geladen wird.
Der Header wird im Normalfall gar nicht gerendert (Theme-Builder-Filter).
Die Regeln unten sind für Seiten mit dem klassischen Divi-Header, wo der
Filter nichts ausrichtet.
========================================================================== */
body.hb-app-atmo #main-header,
body.hb-app-atmo #top-header,
body.hb-app-atmo .et_slide_in_menu_container,
body.hb-app-atmo .et-l--header,
body.hb-app-atmo #et-boc .et-l--header,
body.hb-app-atmo #main-footer,
body.hb-app-atmo .et-l--footer,
body.hb-app-atmo #et-boc .et-l--footer,
body.hb-app-atmo #wpadminbar { display: none !important; }
/* Divi rechnet oben Platz für einen fest stehenden Header ein -- auch wenn
keiner mehr da ist. Ohne diese Zeilen beginnt der Inhalt 80px zu tief. */
body.hb-app-atmo #page-container {
padding-top: 0 !important;
margin-top: 0 !important;
}
body.hb-app-atmo #et-main-area { padding-top: 0 !important; }
/* Und oben steht stattdessen die Leiste, 46px hoch. */
body.hb-app-atmo { padding-top: 46px; }
/* --------------------------------------------------------------------------
DIE LEISTE
Der einzige Weg zurück, wenn es keinen Header gibt. Fest oben, damit sie
nach dem Lesen eines langen Spots nicht erst zurückgescrollt werden muss.
Zwei Dinge darin: der Weg zur App und der Name. Mehr wäre ein zweites
Menü neben dem Dashboard.
-------------------------------------------------------------------------- */
.hb-atmo-leiste {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hb-space-sm, 12px);
height: 46px;
padding: 0 var(--hb-gutter, 16px);
box-sizing: border-box;
/* Deckend, nicht durchscheinend: Darunter läuft das Spot-Foto durch,
und ein halbtransparenter Streifen darüber sieht nach Versehen aus. */
background: var(--hb-ink, #0b0b0b);
border-bottom: 1px solid var(--hb-line, #242424);
}
/* SOLANGE EIN FENSTER OFFEN IST, TRITT DIE LEISTE ZURUECK.
-------------------------------------------------------
Florian am 12.10.2026, mit einem Foto des Bewertungs-Fensters: „Außerdem
befinden wir uns auch wenn wir in das bewertungsmenü gehen in einem
anderen Bereich. Guck mal den Header an."
Über dem offenen Fenster stand weiter „Zur App | HypeBites" -- ein
zweiter Weg zurück, der eine Ebene zu weit führt. Genau dieselbe Regel
gilt im Dashboard schon für den grünen Zurück-Kreis des Spot-Overlays
(.hb-spot-overlay.has-modal .hb-spot-overlay-back): Ist ein Fenster
offen, gehört der Ausgang dem Fenster.
Die Klasse setzt hb-spot-actions.js an derselben Wahrheit fest, an der
es auch hb-overlay-frame.js tut: Jedes Fenster im Projekt sperrt beim
Öffnen das Scrollen (body.style.overflow = 'hidden'). Eine Wahrheit,
zwei Leser -- nicht zehn Modal-Funktionen, die es einzeln melden. */
body.hb-fenster-offen .hb-atmo-leiste {
opacity: 0;
visibility: hidden;
/* Nicht display:none -- so blendet sie weich aus und wieder ein,
statt zu springen. */
transition: opacity .15s ease, visibility .15s ease;
}
.hb-atmo-zurueck {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--hb-font, inherit);
font-size: var(--hb-text-sm, 13px);
font-weight: var(--hb-weight-bold, 600);
line-height: var(--hb-lh-snug, 1.3);
color: var(--hb-text, #fff);
text-decoration: none;
/* Grosszügiger Tippbereich, ohne die Leiste höher zu machen. */
margin: 0 calc(-1 * var(--hb-space-xs, 8px));
padding: var(--hb-space-xs, 8px);
border-radius: var(--hb-radius-sm, 4px);
transition: color var(--hb-ease, .15s ease);
}
.hb-atmo-zurueck:hover,
.hb-atmo-zurueck:focus { color: var(--hb-acid, #d9fd51); }
.hb-atmo-zurueck svg { flex: 0 0 auto; }
.hb-atmo-wort {
font-family: var(--hb-font-display, inherit);
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
letter-spacing: var(--hb-track-label, .16em);
text-transform: uppercase;
color: var(--hb-muted, #76766f);
/* Der Name ist Beschriftung, kein Ziel: Er soll keinen Tipp abfangen,
der dem Zurück-Weg gilt. */
pointer-events: none;
}
/* ==========================================================================
DER DREIER -- DIE AKTIONSZEILE AM SPOT
==========================================================================
Drei Formen aus Florians Photoshop-Datei vom 07.10.2026: ein Mond in
Acid, eine Pille, derselbe Mond gespiegelt in Petrol. Gehört zu
hb_spot_actions_shortcode() in inc/hb-spot-actions.php.
WARUM DAS HIER STEHT UND NICHT IN hb-spotpage.css
-------------------------------------------------
Weil der Shortcode nicht nur auf der Spot-Seite steht. hb-spotpage.css
wird genau dort geladen -- überall sonst stünde der Dreier ungestaltet
da. Diese Datei kommt auf jeder Seite mit.
EINE ZAHL STEUERT ALLES
-----------------------
--hb-dreier-h ist die Höhe der Zeile. Jedes andere Mass hängt als
Faktor daran, und die Faktoren sind aus der Vorlage ausgemessen:
Mond 0.794 breit, volle Höhe
Pille 0.840 hoch
Überlappung 0.088 (die Monde greifen in die Pille hinein)
Zeichen 0.380 gross, Mitte bei 38.5 % der Mondbreite
Wer die Zeile grösser will, ändert eine Zahl. Wer einzelne Masse
anfasst, zerlegt die Form -- der Spalt zwischen Mond und Pille ist
genau deshalb überall gleich breit, weil alle drei Teile an derselben
Höhe hängen.
========================================================================== */
/* Die eine Zahl steht auf :root und nicht auf .hb-dreier -- sonst gewinnt
sie gegen jeden Versuch, die Zeile von aussen anders zu bemessen. Eine
Vorgabe, die man nicht überschreiben kann, ist keine Vorgabe. So genügt
ein style="--hb-dreier-h: 40px" an irgendeiner Hülle darüber, und auch
die beiden Mediengrössen weiter unten greifen an derselben Stelle. */
:root { --hb-dreier-h: 62px; }
.hb-dreier {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
}
/* --- Die beiden Monde ---------------------------------------------------- */
.hb-dreier-seite {
position: relative;
flex: 0 0 auto;
width: calc(var(--hb-dreier-h) * 0.794);
height: var(--hb-dreier-h);
padding: 0;
border: 0;
background: none;
cursor: pointer;
/* Die Form bringt ihre Farbe über currentColor mit. */
color: var(--hb-acid, #d9fd51);
transition: color var(--hb-ease, .15s ease), transform var(--hb-ease, .15s ease);
-webkit-tap-highlight-color: transparent;
}
/* --- Gemerkt -------------------------------------------------------------
Florian am 08.10.2026: „macht es nicht mehr Sinn das erst Blau zu färben
wenn aktiviert wurde? Also grün normal als Button und sobald das auf der
Merkliste ist dann in Blau."
Ja. Vorher war es andersherum -- der rechte Mond stand in Petrol und
wurde beim Merken Acid -- und das war falsch herum, weil Acid die Farbe
JEDES Knopfes ist: Das Merken hat dem Dreier seine einzige Farbe
GENOMMEN statt ihm eine zu geben. Ein Zustand, der etwas bedeutet, muss
etwas hinzufügen.
Jetzt also: in Ruhe drei Monde in Acid, und sobald der Spot auf einer
Merkliste steht, färbt sich der rechte in --hb-merk. Dieselbe Sprache
gilt für die Spot-Karten (.hb-card-save) -- EINE Farbe für gemerkt,
überall. Im Karten-Popup steht seit dem 16.10.2026 dieselbe Spot-Karte,
also auch derselbe Mond; ein eigener .hb-popup-save war damit erledigt.
WARUM NICHT DIE FARBE DER JEWEILIGEN MERKLISTE
Weil die Liste dem Nutzer gehört und ihre Farbe damit auch. Drei Fälle,
die alle vorkommen: Die Standardfarbe einer neuen Liste ist #e2ff00 --
von Acid kaum zu unterscheiden, ein gemerkter Spot sähe also ungemerkt
aus. Eine dunkle Farbe verschluckt das Zeichen darin. Und ein Spot kann
auf mehreren Listen gleichzeitig stehen -- dann gäbe es keine eine
richtige Farbe, sondern eine Reihenfolge, die niemand entschieden hat.
Die Listenfarben stehen deshalb da, wo mehrere nebeneinander Platz
haben und wo man sie liest: im Merklisten-Fenster. */
.hb-dreier-seite.is-saved { color: var(--hb-merk, #00bbc8); }
/* Der Mond ist EIN Pfad, rechts gespiegelt. Zwei Pfade wären zwei
Wahrheiten über dieselbe Form. */
.hb-dreier-rechts .hb-dreier-form { transform: scaleX(-1); }
.hb-dreier-form {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.hb-dreier-seite:hover { transform: scale(1.04); }
.hb-dreier-seite:active { transform: scale(.97); }
/* --- Das Zeichen im Mond -------------------------------------------------
Nicht in der Mitte des KASTENS, sondern in der Mitte der FLÄCHE: Die
Kerbe frisst die rechte Seite an, und ein mittig gesetztes Zeichen sässe
sichtbar zu nah am Spalt.
DIE ZAHLEN SIND GEMESSEN -- am 11.10.2026 zum zweiten Mal, und erst
beim zweiten Mal an der richtigen Form.
Der Mondpfad aus hb_dreier_mond() (nachgezeichnet aus Florians
Photoshop-Datei vom 07.10.) wurde in seinen eigenen 104x130-Raster
gezeichnet und abgetastet:
Bauch auf halber Höhe x 0 ... 79.75 Mitte bei 38.3 %
grösstes Quadrat darin Seite 60 (57.7 %), Mitte bei 38.0 %
Das Zeichen ist 0.380 der Zeilenhöhe = 47.8 % der Mondbreite. Es passt
also mit rund fünf Prozentpunkten Luft auf jeder Seite, und 38.5 % ist
die Mitte, auf die beide Messungen zeigen.
WAS AM NACHMITTAG SCHIEFGING, DAMIT ES NICHT WIEDERKOMMT
Dieselbe Messung lief schon einmal und ergab 25.5 % bei 0.280 -- gegen
einen ALTEN, handgezeichneten Sichelpfad, der nur noch im Prüf-Fixture
stand und mit dem echten Mond nichts mehr zu tun hatte. Die echte Form
ist zu 76.7 % gefüllt, die alte zu 42 %. Das Zeichen rutschte dadurch
um 13 Prozentpunkte nach links aus der Mitte.
Lehre: Ein Fixture, das eine Form NACHBAUT statt sie zu holen, misst
irgendwann etwas anderes als die Seite. t-dreier.php vergleicht den
Pfad im Fixture seitdem Zeichen für Zeichen mit dem in der PHP. */
.hb-dreier-zeichen {
position: absolute;
top: 50%;
left: 38.5%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: calc(var(--hb-dreier-h) * 0.380);
height: calc(var(--hb-dreier-h) * 0.380);
/* Das Zeichen liegt AUF der Form, nicht daneben: dunkel auf hell. */
color: var(--hb-ink, #0b0b0b);
pointer-events: none;
}
/* Gespiegelt wie die Form darunter: 100 % - 38.5 %. */
.hb-dreier-rechts .hb-dreier-zeichen { left: 61.5%; }
/* Die beiden Hüllen um die Zeichen füllen den Platz aus. */
.hb-dreier-aus,
.hb-dreier-an {
width: 100%;
height: 100%;
line-height: 0;
}
/* Und hier wird umgeschaltet: leer, solange der Spot auf keiner Liste
steht; gefüllt, sobald er darauf ist. Alle vier Regeln stehen bewusst
beieinander -- stünde das Verstecken weiter oben, würde die Regel über
die Grösse es wieder aufheben. Genau das ist beim ersten Versuch
passiert: zwei Lesezeichen nebeneinander im Mond.
Die Farbe allein wäre ein zu dünnes Signal (Sonne auf dem Display, und
nicht jeder unterscheidet Acid von Petrol gleich gut). */
.hb-dreier-aus { display: block; }
.hb-dreier-an { display: none; }
.hb-dreier-seite.is-saved .hb-dreier-aus { display: none; }
.hb-dreier-seite.is-saved .hb-dreier-an { display: block; }
.hb-dreier-zeichen svg,
.hb-dreier-bild {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* EIN BODEN UNTER DER GRÖSSE.
--------------------------
Die Masse oben hängen an --hb-dreier-h. Fehlt die Variable -- weil ein
Cache ein altes Stylesheet ausliefert oder eine Hülle sie nicht setzt
--, wird aus calc() nichts, aus `width: 100%` eines Kastens ohne
Breite null, und im Mond steht dann gar nichts mehr. Genau so sah
Florians Bild vom 16.10.2026 aus: zwei leere Monde.
Der Boden ist kein Ersatz für die Variable, sondern die Zusicherung,
dass ein Knopf nie leer dasteht. */
.hb-dreier-zeichen {
min-width: 14px;
min-height: 14px;
}
/* --- BILD ODER ZEICHNUNG -- NIE BEIDES, NIE KEINS -------------------------
Florian am 16.10.2026: „Nimm auch hier wieder die aus dem IMG Ordner mit
einer fallback Variante wenn keins drinn ist."
Liegt eine PNG im Theme, steht sie im Markup -- und die Zeichnung
gleich dahinter, versteckt. Kommt das Bild nicht an (falscher Name,
leere Datei, blockiert), setzt hb-ci.js die Klasse is-weg, und die
Zeichnung tritt vor. Server und Browser entscheiden damit zusammen:
der Server, OB es eine Datei gibt, der Browser, ob sie TRÄGT. */
.hb-dreier-bild + .hb-dreier-riss { display: none; }
.hb-dreier-bild.is-weg { display: none; }
.hb-dreier-bild.is-weg + .hb-dreier-riss { display: block; }
/* --- Die Pille in der Mitte ----------------------------------------------
Sie trägt zusätzlich .hb-sp-hin und holt sich darüber Farbe, Schrift und
das Verhalten beim Tippen aus dem Hauptknopf weiter oben -- es ist
derselbe Knopf wie überall, nur in dieser Form. Was hier steht, sind
genau die Masse, die der Dreier anders braucht. */
.hb-dreier-mitte {
flex: 1 1 auto;
/* Ohne min-width:0 kann ein Flex-Element nicht unter seinen Inhalt
schrumpfen -- die Zeile würde auf schmalen Geräten überlaufen statt
die Schrift zu kürzen. */
min-width: 0;
width: auto;
height: calc(var(--hb-dreier-h) * 0.840);
min-height: 0;
/* Die Monde greifen in die Pille hinein. Negativer Rand statt
negativem gap: gap kennt keine negativen Werte. */
margin-inline: calc(var(--hb-dreier-h) * -0.088);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 0 calc(var(--hb-dreier-h) * 0.26);
border-radius: var(--hb-radius-pill, 999px);
}
/* --- Der Text bleibt in der Blase ----------------------------------------
Florians Bedingung: „so dass er bei egal welcher Skalierung innerhalb
der mittleren Bubble bleibt."
Drei Dinge halten ihn drin, und jedes allein reicht nicht:
1. Die Schriftgrösse hängt an der Höhe der Zeile. Wächst die Pille,
wächst der Text im selben Verhältnis -- er kann die Form also nicht
„einholen". Die Grenzen nach oben und unten sind Lesbarkeit, nicht
Form.
2. Das Polster links und rechts ist 0.26 der Höhe. Die runden Enden
haben den Radius 0.42 der Höhe; auf Höhe der Textzeile (die mittigen
rund 30%) springt die Rundung aber nur rund 0.03 nach innen. 0.26
lässt also reichlich Luft, auch wenn die Pille schmal wird.
3. Wird die Pille trotzdem schmaler als das Wort -- sehr schmales
Gerät, sehr lange Beschriftung --, kürzt die Schrift mit Auslassung,
statt aus der Form zu laufen.
------------------------------------------------------------------------ */
.hb-dreier-wort {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: clamp(12px, calc(var(--hb-dreier-h) * 0.235), 22px);
line-height: 1.2;
}
/* Ohne Adresse: dieselbe Form, nur stumm. */
.hb-dreier-mitte.is-leer {
background: var(--hb-surface-2, #1f1f1f);
font-family: var(--hb-font-display, inherit);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-muted, #76766f);
cursor: default;
}
/* --- DER DREIER ALS FUSSZEILE EINER KARTE ----------------------------------
Eine eigene Höhe, weil eine Karte kein Spot-Kopf ist: 44 statt 62. Sie
steht hier am Bauteil und nicht auf :root, denn sie gilt für genau diese
Bauform.
GETRENNT VON --paar AM 16.10.2026. Vorher stand die Höhe an
.hb-dreier--paar, also an „ohne linken Mond" -- und als das Karten-Popup
den vollen Dreier in einer Karte bekam (Florian: „nutze hier auf der
Karte auch das Layout aus dem hauptbildschirm mit dem 3er button aus den
Hype Spots"), stand er dort plötzlich in Spot-Kopf-Grösse.
Zwei verschiedene Aussagen hatten denselben Namen: WIE GROSS (Karte oder
Kopf) und WIE VIELE (zwei oder drei). Jetzt sagt .hb-grid-foot das erste
und .hb-dreier--paar nur noch das zweite.
-------------------------------------------------------------------------- */
.hb-grid-foot {
--hb-dreier-h: 44px;
margin-top: auto; /* unten andocken, egal wie lang der Text darüber ist */
padding-top: var(--hb-space-sm, 12px);
}
/* --- ZU ZWEIT: OHNE DEN LINKEN MOND ---------------------------------------
Florian am 11.10.2026: „Dort würde ich gerne den Knopf aus dem Hype Spot
haben mit dem Merkzettel rechts daneben."
Teilen gehört nicht in ein Raster -- wer einen Spot teilt, hat ihn vorher
angesehen. Im Karten-Popup steht er trotzdem: Dort IST der Spot das
Einzige, was man gerade ansieht.
-------------------------------------------------------------------------- */
/* Links ist kein Mond, in den die Pille greifen könnte -- also greift sie
auch nicht. Nur rechts bleibt die Überlappung. */
.hb-dreier--paar .hb-dreier-mitte {
margin-left: 0;
}
/* Auf der Karte trägt die Pille zusätzlich .hb-grid-more (daran findet
hb-app.js den Link). Die Reste der alten Linkgestaltung dürfen die Form
nicht stören.
An .hb-grid-foot und nicht an --paar: Dieselbe Regel stand am 16.10.2026
ein zweites Mal in hb-dashboard.css, weil dort niemand wusste, dass es
sie hier schon gibt. Eine Regel, zwei Dateien -- und die Dashboard-Fassung
hat gewonnen, weil sie später lädt. */
.hb-grid-foot .hb-grid-more {
margin: 0;
padding-top: 0;
text-decoration: none;
}
/* Ohne Merken-Knopf -- etwa auf der öffentlichen Startseite -- steht die
Pille allein und braucht auch rechts keinen Platz für einen Mond. */
.hb-dreier--paar .hb-dreier-mitte:last-child {
margin-right: 0;
}
/* Kleine und grosse Geräte: eine Zahl, und die ganze Form folgt. */
@media (max-width: 380px) { :root { --hb-dreier-h: 54px; } }
@media (min-width: 768px) { :root { --hb-dreier-h: 68px; } }
/* Wer Bewegung abbestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
.hb-dreier-seite { transition: color var(--hb-ease, .15s ease); }
.hb-dreier-seite:hover,
.hb-dreier-seite:active { transform: none; }
}
/* ==========================================================================
DER LADER -- DAS LOGO LÄUFT VOLL
==========================================================================
Florian am 08.10.2026: „der soll sich in unser grün verfärben von unten
nach oben aber nicht so gerade sondern in so einer welle die steigt."
Also: das Wortbild in Petrol, und von unten steigt Acid hinein. Die
Oberfläche ist keine Linie, sondern eine Welle, die sich bewegt.
WIE DAS GEHT -- OHNE GIF UND OHNE BIBLIOTHEK
--------------------------------------------
Drei Teile, die zusammen den Eindruck von Flüssigkeit machen:
1. Das Logo ist eine MASKE (assets/img/hb-logo-maske.png). Der Kasten
darunter darf aussehen, wie er will -- sichtbar ist nur, was
innerhalb der Buchstaben liegt. Deshalb braucht es weder ein
Logo-Bild in Acid noch eines in Petrol: Es gibt nur die Form, und
die Farben entstehen darunter.
2. Der Grund des Kastens ist Petrol -- das ist das leere Logo.
3. Darin steigt ein sehr grosser Kreis in Acid von unten nach oben.
Weil er viel breiter als der Kasten ist, sieht man von ihm nur ein
Stück seiner oberen Rundung: eine flache Kuppe. Und weil er sich
langsam dreht und seine Rundung nicht exakt kreisrund ist
(border-radius mit vier verschiedenen Werten), wandert diese Kuppe
-- sie hebt und senkt sich wie eine Wasseroberfläche.
Zwei solche Kreise mit verschiedener Drehrichtung und Geschwindigkeit
ergeben die zweite, hellere Welle darüber. Das ist der ganze Aufwand:
kein Bild, kein Skript, zwei Pseudo-Elemente.
DAS STEIGEN HÖRT BEI 94% AUF
----------------------------
Nicht bei 100%. Ein volles Logo hätte keine Oberfläche mehr, und ohne
Oberfläche steht die Bewegung -- ein Lader, der steht, sieht aus wie
ein Absturz. Bei 94% bleibt die Welle am oberen Rand sichtbar und
bewegt sich weiter, solange geladen wird.
========================================================================== */
/* --- Rückfall: der Ring ---------------------------------------------------
Steht zuerst und gilt überall dort, wo Masken nicht funktionieren. Ohne
diesen Zweig wäre das Logo dort ein petrolfarbenes Quadrat -- und ein
Quadrat, das niemand erklären kann, ist schlimmer als ein Ring. */
.hb-lader {
position: relative;
box-sizing: border-box;
width: 34px;
height: 34px;
border: 3px solid var(--hb-line, #242424);
border-top-color: var(--hb-acid, #d9fd51);
border-radius: 50%;
animation: hbLaderKreiseln .8s linear infinite;
}
.hb-lader-fluss { display: none; }
@keyframes hbLaderKreiseln { to { transform: rotate(360deg); } }
/* --- Der eigentliche Lader ------------------------------------------------ */
@supports (-webkit-mask-image: url(x)) or (mask-image: url(x)) {
.hb-lader {
width: 118px;
height: auto;
aspect-ratio: 1;
border: 0;
border-radius: 0;
animation: none;
/* Das leere Logo. */
background: var(--hb-lader-leer, #00bbc8);
-webkit-mask: url("../img/hb-logo-maske.png") center / contain no-repeat;
mask: url("../img/hb-logo-maske.png") center / contain no-repeat;
}
.hb-lader-fluss {
display: block;
position: absolute;
inset: 0;
overflow: hidden;
}
/* Die beiden Kreise. Breiter als der Kasten, damit man nur ihre Kuppe
sieht; hoch genug, dass unter der Kuppe alles gefüllt ist. */
.hb-lader-fluss::before,
.hb-lader-fluss::after {
content: '';
position: absolute;
left: 50%;
width: 260%;
margin-left: -130%;
aspect-ratio: 1;
background: var(--hb-acid, #d9fd51);
animation: hbLaderSteigen 2.4s cubic-bezier(.33, .72, .3, 1) forwards,
hbLaderWelle 3.6s linear infinite;
}
.hb-lader-fluss::before { border-radius: 44% 46% 42% 48%; }
/* Die zweite Welle: andere Rundung, andere Richtung, halb durchsichtig.
Dadurch überlagern sich zwei Kuppen zu einer hellen Kante -- das ist
der Teil, der es nach Flüssigkeit aussehen lässt. */
.hb-lader-fluss::after {
border-radius: 47% 41% 46% 43%;
opacity: .55;
animation-duration: 2.4s, 5.2s;
animation-direction: normal, reverse;
}
@keyframes hbLaderSteigen { from { top: 104%; } to { top: 6%; } }
@keyframes hbLaderWelle { to { transform: rotate(360deg); } }
}
/* Wer Bewegung abbestellt hat, bekommt das Steigen einmal und langsam --
die Drehung entfällt. Ganz ohne Bewegung wüsste niemand, dass etwas
passiert; ein drehender Kreis ist aber genau das, was bei Schwindel
stört. */
@media (prefers-reduced-motion: reduce) {
.hb-lader { animation-duration: 2.4s; }
.hb-lader-fluss::before,
.hb-lader-fluss::after {
animation: hbLaderSteigen 3.4s ease-out forwards;
}
}
/* ==========================================================================
DIE FARBTUPFER -- EINE FORM FÜR BEIDE FENSTER
--------------------------------------------------------------------------
Florian am 12.10.2026: „Die Punkte mit der Farbe sind haben Kanten wenn
man sie anklickt und sie lassen sich auch nach oben verschieben."
Beide Fehler kamen aus derselben Wurzel: Es gab die Farbauswahl ZWEIMAL
-- einmal im Merken-Fenster (.hb-list-swatch, als Gitter) und einmal im
Dashboard-Fenster „Neue Liste" (.hb-dash-swatch, als Reihe). Zwei
Fassungen derselben Sache, und die Fehler waren in der einen.
DIE KANTEN
Der angewählte Punkt bekam `border-color: #fff` PLUS `transform:
scale(1.12)`. 30 px mal 1.12 sind 33.6 px -- ein Kreis mit Rahmen auf
einer halben Pixelgrenze. Safari rechnet die Rundung dann in Facetten
aus, und aus dem Kreis wird ein Achteck. Genau das war auf Florians Bild
zu sehen.
Die Lösung ist nicht ein anderer Radius, sondern gar keine
Grössenänderung: Der Ring liegt jetzt als box-shadow AUSSEN um den
Punkt. Der Punkt selbst bleibt exakt 30 px und exakt rund, egal was für
einen Zustand er hat. Ein Zustand, der die Geometrie anfasst, ist immer
eine Gelegenheit für so etwas.
Der Ring hat bewusst einen Abstand (zwei Schatten: erst die
Hintergrundfarbe, dann Weiss). Direkt am Punkt sähe er bei hellen Farben
wie ein Teil der Farbe aus.
========================================================================== */
/* --- Die Anordnung: ein Gitter, kein Streifen ----------------------------
Florian am 12.10.2026: "links und rechts ist er leider immernoch
abgeschnitten, also die Farben."
Im Dashboard-Fenster lagen die zwoelf Punkte als waagerecht rollender
Streifen. Das war von Anfang an die falsche Form, und zwar nicht wegen
des Abschneidens, sondern wegen dessen, was es bedeutet: Ein Streifen
VERSTECKT die Haelfte der Auswahl. Wer nicht ahnt, dass sich da etwas
schieben laesst, sieht sieben Farben und denkt, das seien alle.
Ein Gitter zeigt alle zwoelf auf einmal, auf jeder Breite dasselbe Bild,
und es kann per Definition nichts abschneiden -- es gibt keine Achse, an
der etwas hinauslaeuft. Dass damit auch das senkrechte Verschieben von
gestern verschwindet, ist kein Zufall: Beides waren Nebenwirkungen
derselben falschen Form.
Sechs Spalten, weil zwoelf Punkte sich dadurch in zwei gleiche Reihen
teilen. Die Zeilenluecke ist groesser als die Spaltenluecke, damit der
Ring des angewaehlten Punktes nicht an die Reihe darunter stoesst. */
.hb-list-new-farben,
.hb-list-modal-colors {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 14px 10px;
justify-items: center;
/* Platz fuer den Ring, oben wie unten. */
padding: 4px 0;
margin: 12px 0 14px;
}
.hb-list-swatch,
.hb-dash-swatch {
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
/* Nur die Farbe darf sich bewegen, nicht die Form. */
transition: box-shadow var(--hb-ease, .15s ease);
-webkit-tap-highlight-color: transparent;
}
.hb-list-swatch.is-active,
.hb-dash-swatch.is-active {
box-shadow: 0 0 0 2px var(--hb-surface, #151515),
0 0 0 4px var(--hb-text, #fff);
}
/* Kein Wachsen beim Zeigen -- siehe oben. Auf dem Telefon gibt es ohnehin
kein Zeigen, und am Rechner reicht der hellere Ring. */
.hb-list-swatch:hover,
.hb-dash-swatch:hover {
box-shadow: 0 0 0 2px var(--hb-surface, #151515),
0 0 0 4px var(--hb-line, #242424);
}
.hb-list-swatch.is-active:hover,
.hb-dash-swatch.is-active:hover {
box-shadow: 0 0 0 2px var(--hb-surface, #151515),
0 0 0 4px var(--hb-text, #fff);
}
/* ==========================================================================
DIE DREI FLAGGEN UNTER EINER REZENSION
--------------------------------------------------------------------------
Florian am 12.10.2026: 🔥 „da muss ich hin", 🤤 „macht Hunger",
🧢 „stimmt so nicht".
Alle drei sehen gleich aus. Das ist eine Entscheidung, keine
Bequemlichkeit: Gäbe man der Kappe eine andere Farbe -- Rot, Warnton --,
würde sie zum Knopf, der am meisten lockt. Eine Gegenstimme, die auffällt,
wird benutzt, weil sie auffällt. Sie zählt gleich, sie sieht gleich aus,
und sie geht an die Moderation (hb_rezension_umstritten).
========================================================================== */
.hb-review-flaggen {
display: flex;
gap: var(--hb-space-xs, 8px);
margin-top: var(--hb-space-sm, 12px);
}
.hb-review-flagge {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 5px 11px;
border: 0;
border-radius: var(--hb-radius-pill, 999px);
background: var(--hb-surface-2, #1f1f1f);
color: var(--hb-text-soft, #b9b9b4);
font-family: var(--hb-font-display);
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
line-height: 1;
cursor: pointer;
transition: color var(--hb-ease, .15s ease), box-shadow var(--hb-ease, .15s ease);
-webkit-tap-highlight-color: transparent;
}
/* Die Zahlen stehen still, auch wenn sie sich ändern: Eine Breite, die
bei 9 -> 10 springt, schiebt die Nachbarn -- und das sieht aus wie ein
Fehler, nicht wie ein Zähler. */
.hb-review-flagge-zahl {
min-width: 8px;
font-variant-numeric: tabular-nums;
text-align: left;
}
.hb-review-flagge-bild {
font-size: 15px;
line-height: 1;
}
img.hb-review-flagge-bild {
width: 18px;
height: 18px;
object-fit: contain;
}
/* Gesetzt: Acid-Ring, kein Farbwechsel am Zeichen selbst. Florians PNGs
bringen später ihre eigenen Farben mit, und ein eingefärbtes Bild wäre
dann doppelt gemoppelt. */
.hb-review-flagge.is-an {
color: var(--hb-acid, #d9fd51);
box-shadow: inset 0 0 0 1px var(--hb-acid, #d9fd51);
}
/* Ohne Knopf (Gast, oder die eigene Rezension): keine Fläche, nur Zahlen.
Etwas, das aussieht wie ein Knopf und keiner ist, wird angetippt. */
.hb-review-flagge.is-still {
background: none;
padding: 5px 0;
cursor: default;
}
.hb-review-flagge:disabled { opacity: .5; cursor: progress; }
/* Das Abzeichen in der Kopfzeile einer Rezension. */
.hb-review-berechtigt {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--hb-radius-pill, 999px);
background: rgba(0, 187, 200, .14);
box-shadow: inset 0 0 0 1px rgba(0, 187, 200, .4);
color: var(--hb-merk, #00bbc8);
font-size: var(--hb-text-xxs, 11px);
font-weight: var(--hb-weight-bold, 600);
white-space: nowrap;
}
/* ==========================================================================
DEINE BESUCHE -- der Reiter im Konto
HIER STANDEN DREI BLÖCKE MEHR: die Kennzahlen (.hb-mr-zahlen/-zahl),
eine zweite Reiterleiste (.hb-mr-reiter/-knopf/-blase) und deren
Blätter (.hb-mr-blatt).
Alle drei sind am 12.10.2026 gegangen, weil der Block in das Profil
gewandert ist -- und das hat alles davon schon:
Kennzahlen .hb-konto-stats (Besuche | Community | Fotos)
Leiste .hb-ptabs (Aktivität | Deine Besuche | Lieblinge)
Abschnitte .hb-konto-section mit Titel und Zählblase
Zwei Formen für eine Sache sind kein Stilproblem: Nach der ersten
Änderung an der einen sieht die andere anders aus.
Was bleibt, sind die Karten -- die gab es nur hier.
========================================================================== */
/* Der Abstand unten kommt vom letzten Abschnitt, nicht von der Hülle --
sonst stapeln sich beide. */
.hb-mr { margin-bottom: 0; }
/* Und unter der Tafel kommt nichts mehr: Der Reiter selbst bringt sein
Polster mit. Zwei Abstände übereinander waren der Leerraum unter
„Rechtliches", den wir schon einmal weggeräumt haben.
Seit dem 14.10.2026 ist .hb-mr-teil keine mit Überschrift
mehr, sondern eine Tafel unter dem Zweiteiler -- und davon ist immer
nur eine sichtbar. Der Abstand gilt deshalb für jede, nicht nur für
die letzte. */
.hb-mr .hb-mr-teil { margin-bottom: 0; }
/* Die Karten stehen in einer Spalte, und der Abstand kommt von der Liste,
nicht von jeder Karte: Sonst hängt unter der letzten einer zu viel --
und genau das sah man zwischen den beiden Abschnitten. */
.hb-mr-liste {
display: flex;
flex-direction: column;
gap: var(--hb-space-sm, 12px);
}
/* --- Die Karten --- */
.hb-mr-karte {
padding: var(--hb-space-md, 20px);
border-radius: var(--hb-radius, 16px);
background: var(--hb-surface, #151515);
transition: opacity var(--hb-ease, .15s ease);
}
.hb-mr-karte.is-geht { opacity: .4; }
/* Die Besuchs-Karte ist EINE Fläche zum Antippen, nicht eine Karte mit
einem Link darin. Alles daran führt an denselben Ort. */
.hb-mr-karte--besuch { padding: 0; }
.hb-mr-karte-link {
display: flex;
align-items: center;
gap: var(--hb-space-sm, 12px);
padding: var(--hb-space-sm, 12px);
color: inherit;
text-decoration: none;
}
.hb-mr-karte-bild {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: var(--hb-radius-sm, 10px);
object-fit: cover;
background: var(--hb-surface-2, #1f1f1f);
}
.hb-mr-karte-bild.is-leer { display: block; }
.hb-mr-karte-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
flex: 1 1 auto;
}
.hb-mr-karte-titel {
font-family: var(--hb-font-display);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-text, #fff);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hb-mr-karte-sub {
font-size: var(--hb-text-xs, 12px);
color: var(--hb-text-soft, #b9b9b4);
}
.hb-mr-karte-pfeil { flex: 0 0 auto; color: var(--hb-muted, #76766f); }
/* --- Die eigene Rezension --- */
.hb-mr-kopf {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--hb-space-sm, 12px);
margin-bottom: var(--hb-space-xs, 8px);
}
.hb-mr-spot {
font-family: var(--hb-font-display);
font-size: var(--hb-text-md, 15px);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-text, #fff);
text-decoration: none;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.hb-mr-spot:hover { color: var(--hb-acid, #d9fd51); }
.hb-mr-wann {
flex: 0 0 auto;
font-size: var(--hb-text-xs, 12px);
color: var(--hb-muted, #76766f);
}
/* Petrol, nicht Gelb: „zur Überprüfung" ist kein Problem, sondern der
Normalfall für alles mit Text oder Foto. Ein Warnton würde jeden
zweiten Menschen zum Nachfragen bringen. */
.hb-mr-pruefung {
margin: 0 0 var(--hb-space-sm, 12px);
padding: 7px 12px;
border-radius: var(--hb-radius-sm, 10px);
background: rgba(0, 187, 200, .1);
color: var(--hb-merk, #00bbc8);
font-size: var(--hb-text-xs, 12px);
}
.hb-mr-punkte {
display: flex;
flex-wrap: wrap;
gap: var(--hb-space-sm, 12px) var(--hb-space-md, 20px);
margin-bottom: var(--hb-space-sm, 12px);
}
.hb-mr-punkt { display: inline-flex; align-items: center; gap: 7px; }
.hb-mr-punkt-wort {
font-size: var(--hb-text-xs, 12px);
color: var(--hb-text-soft, #b9b9b4);
}
.hb-mr-punkt-kugeln { display: inline-flex; gap: 4px; }
.hb-mr-text {
margin-bottom: var(--hb-space-sm, 12px);
font-size: var(--hb-text-sm, 13px);
line-height: 1.55;
color: var(--hb-text-soft, #b9b9b4);
}
.hb-mr-text p { margin: 0 0 8px; }
.hb-mr-text p:last-child { margin-bottom: 0; }
.hb-mr-fotos,
.hb-review-fotos {
display: flex;
flex-wrap: wrap;
gap: var(--hb-space-xs, 8px);
margin-bottom: var(--hb-space-sm, 12px);
}
.hb-mr-foto {
width: 72px;
height: 72px;
border-radius: var(--hb-radius-sm, 10px);
object-fit: cover;
}
.hb-review-foto {
width: 110px;
height: 110px;
border-radius: var(--hb-radius-sm, 10px);
object-fit: cover;
}
.hb-mr-fuss {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--hb-space-sm, 12px);
flex-wrap: wrap;
}
.hb-mr-fuss .hb-review-flaggen { margin-top: 0; }
.hb-mr-werkzeug {
display: inline-flex;
align-items: center;
gap: var(--hb-space-sm, 12px);
}
/* DER STERN AN DER EIGENEN BEWERTUNG (15.10.2026).
Er steht links neben „Bearbeiten" -- Florians Platz. Acid, solange er
ein Angebot ist; Petrol, sobald er ein Zustand ist. Dieselbe Regel wie
beim Lesezeichen im Dreier und beim Stern, der vorher in der
Wischleiste sass: Acid ist die HANDLUNG, Petrol der ZUSTAND.
Beide Zeichnungen stehen im Markup, das Stylesheet zeigt eine davon.
Austauschen könnte das Skript sie nicht -- und mit Florians PNGs
später ebenso wenig. */
.hb-mr-stern {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--hb-radius-pill, 999px);
background: none;
color: var(--hb-muted, #76766f);
cursor: pointer;
transition: color var(--hb-ease, .15s ease), background var(--hb-ease, .15s ease);
}
.hb-mr-stern svg,
.hb-mr-stern .hb-dreier-bild { width: 18px; height: 18px; display: block; }
.hb-mr-stern:hover { color: var(--hb-acid, #d9fd51); }
.hb-mr-stern.is-on { color: var(--hb-merk, #00bbc8); }
.hb-mr-stern.is-on:hover { background: rgba(0, 187, 200, .14); }
.hb-mr-stern .hb-dreier-an { display: none; }
.hb-mr-stern.is-on .hb-dreier-aus { display: none; }
.hb-mr-stern.is-on .hb-dreier-an { display: block; }
.hb-mr-aendern {
font-size: var(--hb-text-xs, 12px);
font-weight: var(--hb-weight-bold, 600);
color: var(--hb-text-soft, #b9b9b4);
text-decoration: none;
}
.hb-mr-aendern:hover { color: var(--hb-acid, #d9fd51); }
.hb-mr-weg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--hb-muted, #76766f);
cursor: pointer;
transition: color var(--hb-ease, .15s ease);
}
.hb-mr-weg:hover { color: var(--hb-danger, #ff5722); }
.hb-mr-weg:disabled { opacity: .4; cursor: progress; }
/* --- Leer --- */
.hb-mr-leer {
padding: var(--hb-space-lg, 28px) var(--hb-space-md, 20px);
border-radius: var(--hb-radius, 16px);
background: var(--hb-surface, #151515);
text-align: center;
}
.hb-mr-leer strong {
display: block;
margin-bottom: 6px;
font-family: var(--hb-font-display);
font-size: var(--hb-text-md, 15px);
color: var(--hb-text, #fff);
}
.hb-mr-leer p {
margin: 0;
font-size: var(--hb-text-sm, 13px);
line-height: 1.5;
color: var(--hb-text-soft, #b9b9b4);
}
/* --- Die kleine Hinweiszeile ---------------------------------------------
„eine Stimme je Spot", der Satz zum Bildrecht, der Vermerk zur
entfernten Ortsangabe. Sie standen ohne eigene Regel da und kamen
deshalb in Fliesstextgrösse heraus -- vier solcher Absätze in einem
Fenster, das aus drei kurzen Fragen bestehen soll. Ein Prüfstand hat sie
gefunden, nicht ich.
Steht hier und nicht bei dem Fenster, das sie heute als einziges
benutzt: Der Name verspricht sie jedem Fenster, und das Versprechen
soll beim zweiten Fenster auch gelten. (Am 16.10.2026 aus
hb-spotpage.css hierher -- der Dank darunter ist im Gegenzug nach
hb-besuch.css gegangen, weil er nur dort vorkommt und auch nur dort
gebraucht wird.) */
.hb-fenster-hinweis {
margin: var(--hb-space-xs) 0 0;
font-size: var(--hb-text-xs, 12px);
line-height: var(--hb-lh-text, 1.45);
color: var(--hb-muted, #76766f);
}
.hb-fenster-hinweis + .hb-fenster-hinweis { margin-top: 4px; }