/*
 * Die oeffentlichen Schaufenster-Seiten (public.bookmax.net).
 *
 * Eigene Datei, weil sie nur dort geladen wird - die Anwendung braucht nichts
 * davon. Eingebunden in index_computer.php hinter PUBLIC_MODE.
 *
 * Sie setzt auf screen.css auf und beschreibt nur, was es dort nicht gibt: die
 * Kopfleiste ohne Module, die Liste aus Vorschaubild, Titel und Nutzer, und
 * den Werbeplatz.
 */

/*
 * Grundschrift.
 *
 * Die Anwendung laeuft auf 13px - dort sitzt man vor langen Listen und will
 * viel auf einmal sehen. Hier liest jemand einzelne Eintraege, oft zum ersten
 * Mal; 15px sind dafuer angemessener. Die Schriftart bleibt Ubuntu, wie
 * ueberall (fonts/auswahl.css).
 */
/*
 * Die Seite steht auf einem gedeckten Grund, der weisse Kasten des Inhalts
 * hebt sich davon ab - dieselbe Anordnung wie auf bookmax.net (#c8ccd1 dort).
 * Die Datei wird nur im Lesemodus geladen, stoert die Anwendung also nicht.
 *
 * "html body" und nicht nur "body": DrawTemplate() schreibt weiter unten im
 * Kopf ein <style> mit "body {background:#ffffff}". Das ist das Farbschema der
 * Anwendung - Seitenleiste, Modulkoepfe, Listenzeilen -, wovon es hier nichts
 * gibt; mangels angemeldetem Nutzer greift dort die Standardvorlage. Weil der
 * Block NACH dieser Datei steht, hilft die Reihenfolge nicht, nur die
 * Gewichtung. Sauberer waere, DrawTemplate() im Lesemodus zu ueberspringen -
 * das steht aber in index_computer.php, der gemeinsamen Datei.
 *
 * Frueher stand hier body.publicseite. Die Klasse gibt es nirgends -
 * index_computer.php setzt class="<?= $device ?>" - die Regel war also tot.
 */
html body.schaufenster {
	background: #c8ccd1;

	/*
	 * Hier stand -webkit-font-smoothing: auto, weil screen.css es auf
	 * antialiased setzte. Das ist dort inzwischen ganz heraus - der
	 * Schalter wirkt nur auf macOS und macht die Schrift dort duenner als
	 * vorgesehen. Er stammt aus der Zeit vor macOS Mojave, als das System
	 * mit Subpixel-Glaettung renderte und Schrift fetter darstellte als
	 * Windows; seither ist er nur noch ein Unterschied, kein Ausgleich.
	 */
	/* 1.6 statt 1.55 - bei 15 Pixel Schrift sind das genau die 24 Pixel,
	   auf denen bookmax.net steht. */
	line-height: 1.6;
}

/*
 * Figtree, auf der ganzen oeffentlichen Seite.
 *
 * Die Schrift gehoert nicht zur Vorlage, die der Nutzer waehlt, sondern zur
 * Seite - deshalb steht sie hier und nicht in DrawTemplate(). Sie liegt als
 * variable Schrift im eigenen Bestand und wird ueber auswahl.css ohnehin auf
 * jeder Seite geladen; es kommt also keine Anfrage dazu und keine an Google.
 *
 * Vorher stand hier Geist, davor Inter und schon einmal Figtree. Der Wechsel
 * hin und her lag nicht an den Schriften, sondern an der Strichstaerke: die
 * Seite lief auf font-weight 300 (screen.css:225, fuer Ubuntu gedacht), und
 * eine variable Schrift ist dort wirklich duenn. Mit 400 sehen alle drei
 * anders aus - siehe unten.
 */
html body { font-family: 'Figtree', 'Ubuntu', sans-serif; }

/*
 * Strichstaerke 400 statt 300.
 *
 * screen.css:225 setzt am body font-weight 300. Das war fuer Ubuntu gedacht,
 * das in drei festen Schnitten vorliegt und dessen Light noch krautig genug
 * ist. Die neuen Schriften sind variabel: dort ist 300 wirklich 300, und der
 * Text wirkt duenn und blass - genau der Unterschied, den man gegenueber einer
 * Schriftmusterseite sieht, die auf 400 steht.
 *
 * Nur der Grundtext. Was fett gesetzt ist, bleibt fett.
 */
html body {
	font-weight: 400;

	/*
	 * Und 15 statt 13 Pixel Grundgroesse.
	 *
	 * responsive.css rechnet die Groesse aus --bm-basis mal --bm-schrift. Die
	 * 13 sind fuer die Anwendung richtig - dort sitzt jemand vor langen Listen
	 * und will viel auf einmal sehen. Hier liest jemand einzelne Eintraege, oft
	 * zum ersten Mal. Die Schriftmusterseite steht aus demselben Grund auf 15.
	 */
	--bm-basis: 15px;
}

.publicInhalt {
	font-size: 15px;
	line-height: 1.55;
}

/*
 * Die Spalte.
 *
 * Auf bookmax.net heisst sie #box_all und ist 960 breit (main.css:114). Hier
 * 1170 - der Wert, den Bootstrap 3 ab 1200 Pixel Fensterbreite selbst setzt,
 * und Bootstrap 3.3.6 liegt im Projekt. Vorher standen hier 940, aus 2015.
 *
 * Navigation und Inhalt benutzen dieselbe Rechnung, damit ihre Kanten
 * uebereinander stehen: sie bilden eine durchgehende weisse Spalte. "width"
 * statt eines Innenabstands, weil ein Innenabstand die weisse Flaeche
 * verschieben wuerde und die beiden dann nicht mehr buendig waeren.
 */
.publicMitte,
.publicInhalt {
	max-width: 1170px;
	width: calc(100% - 20px);
	margin-left: auto;
	margin-right: auto;
}

/*
 * Das dunkle Band, ueber die ganze Fensterbreite.
 *
 * Auf bookmax.net kommt es aus dem Hintergrundbild des body
 * (#c8ccd1 url(bg2.png) repeat-x, main.css:14) und der Kopf ist 160 hoch.
 * Hier eine Farbe statt eines Bildes - dasselbe Ergebnis, eine Datei weniger.
 */
#publicKopf {
	/*
	 * Derselbe Verlauf wie auf bookmax.net.
	 *
	 * Dort kommt der dunkle Grund aus einem Bild (img/bg2.png, 10x400): von
	 * #2a2a30 ganz oben nach #33353d bei 120 Pixeln, darunter das Blau des
	 * Aufmachers. Hier stand eine flache Farbe - und zwar die vom UNTEREN
	 * Ende des Verlaufs. Deshalb wirkte der Kopf heller und grauer als
	 * derselbe Kopf auf der Website, obwohl alle Masse stimmten.
	 *
	 * Als Verlauf statt als Bild: eine Anfrage weniger, und er passt sich
	 * jeder Hoehe an.
	 */
	background: linear-gradient(to bottom, #2a2a30 0, #33353d 120px);

	/*
	 * 27 oben, 67 unten (.publicKopfZeile).
	 *
	 * Zusammen 176 Pixel - genau die Hoehe von #box_header auf bookmax.net
	 * (main.css:131). Und die 27 sind kein freier Wert: dort sitzt das Logo
	 * der Website (gemessen, nicht gerechnet). Nur mit demselben Abstand
	 * steht auch das Logo an derselben Stelle - sonst waeren die Kaesten
	 * zwar gleich hoch, aber ihr Inhalt sprungt beim Wechsel weiter.
	 */
	padding-top: 27px;
}

/*
 * Keine Unterstreichung im Ordnerbaum.
 *
 * In der Anwendung sind die Ordner <span> mit einem Klick-Handler; auf der
 * oeffentlichen Seite sind es echte Verweise, damit jeder Ordner eine eigene
 * Adresse hat (f_folders.php:185-190). Damit greift die Voreinstellung des
 * Browsers fuer a:hover - in der Anwendung faellt das nie auf, weil es dort
 * keine Verweise sind.
 */
html body #boxLeft a:hover,
html body #boxLeftInner a:hover { text-decoration: none; }

/*
 * Ohne Werkzeugspalte gehoert die Breite der Liste.
 *
 * screen.css:284 haelt rechts 250 Pixel frei - genau fuer den Kasten, den es
 * auf einem fremden Profil nicht mehr gibt. Ohne diese Zeile blieben sie leer,
 * und die Beschreibungen der Lesezeichen wuerden weiter abgeschnitten.
 *
 * "html body" wegen der Gewichtung: responsive.css wird nach dieser Datei
 * geladen. public.css laeuft nur im Lesemodus, in der Anwendung aendert sich
 * also nichts.
 */
html body #boxMiddle { margin-right: 0; }

/*
 * Werkzeuge im grauen Listenkopf, die einem Besucher nichts nuetzen.
 *
 *   #bhideBox  klappt die Werkzeugspalte auf und zu ("Hide right column").
 *              Die Spalte gibt es hier nicht mehr, der Knopf schob nur einen
 *              leeren Streifen herein.
 *   #bopen     "Open multiple bookmarks" - eine Massenaktion des Eigentuemers.
 *
 * Die Gewichtung muss "h2 #..." schlagen: screen.css:600 setzt
 * "h2 #bhideBox { display: flex }", ein blosses "#bhideBox" verliert dagegen.
 */
html body h2 #bhideBox,
html body .h2 #bhideBox,
html body h2 #bopen,
html body .h2 #bopen,
html body h2 #viewtypes,
html body .h2 #viewtypes { display: none; }

/*
 * Und der Umschalter fuer die Listenansicht (#viewtypes: kleine Liste, grosse
 * Liste, Kacheln) ebenfalls.
 *
 * Er tat auf der oeffentlichen Seite ohnehin nichts, und das gleich zweifach:
 * die Handler stehen in js_bookmarks.js, und diese Datei wird hier nie geladen
 * (index_computer.php:52 sucht js_<$urlarr[0]>.min.js, und $urlarr[0] ist der
 * Profilname, nicht das Modul). Selbst wenn sie geladen wuerde, ginge der
 * Klick auf ajax/bookmarks/draw_bookmarks.php - und das schreibt
 * "UPDATE User SET viewtype=?", also die Einstellung des PROFILINHABERS. Ein
 * Gast wuerde sie ihm verstellen.
 *
 * Der Umschalter ist damit kein kaputter Knopf, sondern ein Bedienelement des
 * Eigentuemers, das hier nicht hingehoert.
 */

/*
 * Der Griff zwischen Ordnerbaum und Liste.
 *
 * functions.js:249 haengt ihn bedingungslos an #boxLeft, auch im Lesemodus.
 * Ziehen liess sich damit, gespeichert wurde nichts: der POST auf
 * ajax/change_setting.php endet mit 405, und beim naechsten Laden stand wieder
 * die Breite da, die der PROFILINHABER fuer sich eingestellt hat (left_w,
 * angewandt in f_html.php:416-418). Ein Griff, der nichts festhaelt, ist
 * schlimmer als keiner.
 */
html body .bm-width-handle { display: none; }

/*
 * Das Logo in der Kopfleiste eines Profils.
 *
 * screen.css:352-356 gibt #logo feste 175 x 34 - dort steckt in der Anwendung
 * ein Inline-SVG mit genau diesen Massen. Hier ist es eine SVG-Datei, die ihr
 * eigenes Seitenverhaeltnis mitbringt; ohne Angabe wird sie auf die Hoehe
 * gerechnet und rechts abgeschnitten - vom Schriftzug fehlte das X.
 */
#boxLeftHeader a#logo {
	width: auto;
	padding: 0 15px;
}

#boxLeftHeader a#logo img {
	width: auto;
	height: 30px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

/* Logo links, Knoepfe rechts. Dort absolut gesetzt (top 25 / left 30 und
   top 20 / right 30), hier als Zeile - das haelt auf schmalen Schirmen. */
.publicKopfZeile {
	display: flex;
	/* Oben ausgerichtet, nicht mittig: die Knoepfe bekommen ihren Abstand
	   unten selbst. Mittig haetten sie sich mit der Logohoehe verschoben. */
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 30px;   /* 30 wie #logo/.btns-login auf bookmax.net */

	/*
	 * Feste Hoehe statt Innenabstand unten.
	 *
	 * 27 (padding-top am Kopf) plus 51 ergeben 78 - dort beginnt auf
	 * bookmax.net die Navigation. Hier stand ein Innenabstand von 13,
	 * gerechnet auf ein Logo von 38,4 Pixeln. Seit die Zeichnung dieselbe
	 * ist wie dort, ist das Logo 36,7 hoch, und die Leiste rutschte um 1,3
	 * Pixel nach oben. Mit fester Hoehe ist die Logohoehe gleichgueltig.
	 *
	 * (Davor stand hier sogar 69, gerechnet auf dieselbe KASTENHOEHE von
	 * 176 - der falsche Vergleich: dort liegt die Navigation IM Kasten und
	 * ragt in den dunklen Streifen hinein, hier sitzt sie darunter.)
	 */
	height: 51px;
	box-sizing: border-box;
}

/* Zwei Pixel tiefer als das Logo - so stehen sie auf bookmax.net
   (dort: #logo top 28, .btns-login top 30). */
.publicButtons { margin-top: 2px; }

.publicLogo { display: block; outline: none; }

/* 200 Pixel breit - derselbe Wert wie auf bookmax.net (main.css:191,
   "#logo img { width: 200px }"). Die Hoehe ergibt sich aus der Zeichnung
   (359 x 69), sie darf nicht mitgesetzt werden. */
.publicLogo img { width: 200px; height: auto; display: block; }

/* .btns-login a ist dort 120 breit (main.css:205) */
/*
 * Eigene Knoepfe statt Bootstraps .btn.btn-primary/.btn-success. 120 Pixel
 * breit wie auf bookmax.net (main.css:205-208).
 */
/*
 * Alle Werte auf bookmax.net ausgelesen, nicht geschaetzt. Dort sind es
 * Bootstraps .btn.btn-primary und .btn-success; hier eigene Klassen, weil
 * die oeffentliche Seite Bootstrap nur fuers Raster laedt. Was zaehlt, ist
 * dass beide gleich aussehen - der Nutzer wechselt zwischen den Seiten hin
 * und her.
 */
.publicKnopf {
	display: inline-block;
	width: 120px;
	/* 12 Pixel zwischen den beiden, wie main.css:233 */
	margin-left: 12px;
	/* 6px 12px und Zeilenhoehe 20 ergeben zusammen mit dem Rahmen die 34
	   Pixel Hoehe der Website. Hier standen 7px 0 und 22,4 - macht 36. */
	padding: 6px 12px;
	line-height: 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	/* Kein Sperrsatz: dort steht letter-spacing auf normal. */
	letter-spacing: normal;
	color: #fff;
	/* Ein Pixel Rahmen, jeweils eine Spur dunkler als die Flaeche - das ist
	   es, was den Knoepfen dort ihre Festigkeit gibt. */
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
	box-sizing: border-box;
}
/*
 * :visited muss ausdruecklich dabeistehen.
 *
 * DrawTemplate() schreibt "body a, body a:hover, body a:visited {color:#444}".
 * Wer /signup schon einmal aufgerufen hat, bekam die Schrift des Knopfes in
 * Dunkelgrau - waehrend LOGIN weiss blieb, weil er dort noch nicht war.
 *
 * Auffaellig ist das schwer: getComputedStyle liefert fuer besuchte Verweise
 * immer die UNbesuchte Farbe zurueck. Das ist Absicht der Browser - sonst
 * koennte eine Seite per JavaScript auslesen, wo jemand vorher war.
 */
.publicKnopf:hover,
.publicKnopf:focus,
.publicKnopf:visited { color: #fff; text-decoration: none; }
.publicKnopf.anmelden  { background: #337ab7; border-color: #2e6da4; }
.publicKnopf.anmelden:hover  { background: #286090; border-color: #204d74; }
/* Dasselbe Gruen wie auf www.bookmax.net und wie die Pills dort. Kurz
   abgedunkelt (4,55:1), dann auf Peters Wunsch zurueck - Begruendung und
   Preis stehen in website/css/main.css bei .btn-success. */
.publicKnopf.einloggen { background: #5cb85c; border-color: #4cae4c; }
.publicKnopf.einloggen:hover { background: #449d44; border-color: #398439; }

/*
 * Die Navigation ist ein KASTEN in der Spalte, nicht ein Balken ueber die
 * ganze Breite - daran erkennt man die Seite wieder. Er sitzt auf dem dunklen
 * Band, oben rund, unten eckig, weil der Inhalt buendig darunter anschliesst.
 * Genau das macht dort .navbar (main.css:173-178) mit Bootstraps 4 Pixeln.
 */
/*
 * Die Leiste, Zug um Zug wie auf bookmax.net.
 *
 * Die Werte sind dort ausgelesen, nicht geschaetzt: heller Grund #f8f8f8,
 * ein Pixel Rahmen in #e7e7e7 oben und unten, 42 Pixel hoch. Das ist
 * Bootstrap 3s .navbar-default, das die Website benutzt - hier nachgebaut,
 * weil die oeffentliche Seite Bootstrap nur fuer das Raster laedt.
 */
#publicNav {
	background: #f8f8f8;
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	border-radius: 4px 4px 0 0;
}

/* 31 Pixel eingerueckt - dort beginnt auf bookmax.net der erste Reiter
   (gemessen: Leiste bei 115, erster Reiter bei 146). */
#publicNav ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 31px;
	display: flex;
	flex-wrap: wrap;
}

/* Hoehe und Rundung wie auf bookmax.net: die Leiste dort ist 44 Pixel hoch,
   die oberen Ecken 4 Pixel rund (Bootstrap 3, main.css:173-178 nimmt die
   unteren wieder heraus). Der Streifen der aktiven Seite zaehlt zur Hoehe
   mit, deshalb unten drei Pixel weniger Innenabstand. */
#publicNav li > a {
	display: block;
	padding: 10px 15px;
	color: #777;
	font-size: 15px;
	line-height: 20px;
	text-decoration: none;
}

/* Kein runder Ecke am ersten Reiter - auf bookmax.net ist er eckig, und
   beim Wechsel zwischen den Seiten faellt genau so etwas auf. */
#publicNav li > a:hover { color: #333; background: #f6f7f9; }

/*
 * Die aktive Seite wird hinterlegt, nicht unterstrichen.
 *
 * Vorher stand hier ein blauer Streifen darunter. Auf bookmax.net ist es
 * ein grauer Grund (Bootstrap 3, .navbar-default .navbar-nav > .active > a:
 * #555 auf #e7e7e7) - und beim Wechsel zwischen den beiden Seiten fiel der
 * Unterschied auf. Peter am 24.08.2026: dieselbe Darstellung, bitte.
 */
#publicNav li.active > a {
	color: #555;
	background: #e7e7e7;
}

/* Volle Deckkraft wie auf bookmax.net. Die 0.7, die hier standen, liessen
   dieselben Symbole blasser wirken als dort - und beim Wechsel zwischen den
   Seiten faellt genau das auf. */
#publicNav li > a i { margin-right: 6px; }

/* Der Favoritenstern ist in screen.css gelb und eine Spur groesser als die
   Zeile - dort ist er ein Zustand ("gemerkt"), hier nur ein Wegweiser wie die
   drei anderen. In der Leiste zaehlt, dass alle vier gleich aussehen. */
#publicNav li > a .fa-star {
	width: auto;
	font-size: inherit;
	color: inherit;
}

/*
 * Der Inhalt schliesst ohne Fuge an die Navigation an, unten rund - das ist
 * #box_main (main.css:129-136): weiss, 50 Innenabstand, 5 Pixel Radius.
 */
.publicInhalt {
	margin-top: 0;
	margin-bottom: 60px;
	padding: 34px 40px 26px;
	background: #fff;
	border-radius: 0 0 5px 5px;
}
/* screen.css gibt h2 einen grauen Balken - das ist die Ueberschrift einer
   Modulliste in der Anwendung. Hier ist es die Ueberschrift der Seite. */
.publicInhalt > h2 {
	background: none;
	padding: 0;
	height: auto;
	line-height: 1.2;
	margin: 0 0 6px;
	font-size: 26px;
	/* 600, nicht 700: bei einer variablen Schrift ist Halbfett kraeftig genug
	   und bleibt neben dem Text auf 400 ruhig. */
	font-weight: 600;
	color: #2C5AA0;
}
.publicInhalt > p  { color: #777; margin-bottom: 24px; font-size: 15px; }
.publicInhalt .hinweis { color: #999; font-style: italic; }
.publicInhalt .stand   { color: #aaa; font-size: 11px; margin-top: 20px; }

/*
 * Ein Eintrag der Liste - Vorschaubild, Text, Nutzer.
 *
 * Eigenes Raster statt Bootstraps .row/.col-sm-*. Drei Spalten mit festen
 * Aussenmassen und einer mitwachsenden Mitte; das ist genau das, was hier
 * gebraucht wird, und es bringt keine Ueberraschungen mit - Bootstraps .row
 * zieht sich mit je 15 Pixel negativem Aussenabstand aus dem Kasten heraus,
 * wodurch die Trennlinie ueberstand und das Bild am Rand klebte.
 */
.bmEintrag {
	display: grid;
	grid-template-columns: 220px 1fr 200px;
	gap: 0 24px;
	align-items: start;
	/* Innen mehr Luft als die Trennlinie breit ist: die Zeile soll im Kasten
	   stehen, nicht an seiner Kante kleben. */
	padding: 18px 16px;
	border-top: 1px solid #eee;
}

.bmEintrag:first-child { border-top: 0; }

.bmBild img.thumb {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 2px;
	display: block;
}

.bmTitel { font-weight: 600; margin-bottom: 2px; }
.bmDatum { color: #999; font-size: 12px; margin-bottom: 6px; }
.bmBeschreibung { color: #555; }

.bmNutzer { text-align: center; }
.bmNutzer a { color: #666; text-decoration: none; }
.bmNutzer a:hover { color: #2C5AA0; }
.bmNutzer img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: block;
	margin: 0 auto 6px;
	opacity: .5;
}

/*
 * Der Werbeplatz sieht aus wie jeder andere Eintrag.
 *
 * Vorher hatte er einen eigenen Hintergrund und einen gestrichelten Rahmen und
 * stach damit aus der Liste heraus. Das ist die falsche Richtung: eine Anzeige,
 * die sich optisch vordraengt, wertet die Liste ab, in der sie steht. Erkennbar
 * bleibt sie trotzdem - die Zeile "sponsored link" steht unter dem Titel, und
 * das ist die Kennzeichnung, auf die es ankommt.
 */
.werbung .werbebild {
	display: block;
	height: 124px;
	line-height: 124px;
	text-align: center;
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 2px;
	color: #c4c4c4;
	font-size: 30px;
}
.werbung .werbebild:hover { border-color: #2C5AA0; color: #2C5AA0; }
.werbung .bmNutzer img.avatar { opacity: 1; border-radius: 0; }

/*
 * Die Nutzerliste. Eigene Tabelle statt .table.table-striped - drei Spalten,
 * zwei davon rechtsbuendig, jede zweite Zeile hinterlegt.
 */
table.publicUsers {
	width: 100%;
	border-collapse: collapse;
}
table.publicUsers th {
	text-align: left;
	font-weight: 600;
	color: #666;
	padding: 10px 12px;
	border-bottom: 2px solid #e6e6e6;
}
table.publicUsers td {
	padding: 9px 12px;
	border-top: 1px solid #f0f0f0;
}
table.publicUsers tr:nth-child(even) td { background: #fafafa; }
table.publicUsers a { color: #444; text-decoration: none; }
table.publicUsers a:hover { color: #2C5AA0; }
table.publicUsers img.avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	margin-right: 8px;
	opacity: .5;
	vertical-align: middle;
}
table.publicUsers .zahl { text-align: right; }

@media (max-width: 767px) {

	/* Auf dem Telefon steht das Logo oben, die Knoepfe darunter - nebeneinander
	   waeren beide zu klein zum Treffen. */
	.publicKopfZeile { flex-direction: column; gap: 14px; padding-bottom: 20px; }

	#publicNav ul { justify-content: center; }
	#publicNav li > a { padding: 12px 12px; }

	.publicInhalt { padding: 20px 16px; }

	/* Auf schmalen Schirmen untereinander: Bild, Text, Nutzer. */
	.bmEintrag { grid-template-columns: 1fr; gap: 10px; }
	.bmBild img.thumb, .werbung .werbebild { max-width: 220px; }
	.bmNutzer { text-align: left; }
	.bmNutzer img.avatar { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
	.bmNutzer a > div { display: inline; }

	/*
	 * Die Lesezeichen-Tabelle auf einem Profil.
	 *
	 * Beschreibung und Adresse fallen weg. Die Absicht steht laengst im
	 * Markup - die Kopfzellen tragen data-hide="phone, tablet"
	 * (f_bookmarks.php) -, nur wirkte sie nirgends: das JavaScript, das sie
	 * frueher ausgewertet hat, gibt es nicht mehr. Beide Spalten sind ueber
	 * table-layout:fixed auf je 352 Pixel festgenagelt, fuer den Titel blieb
	 * auf einem Telefon nichts uebrig.
	 *
	 * Die Beschreibung steht direkt hinter dem Titel und hat keine eigene
	 * Klasse, deshalb der Nachbarschafts-Selektor.
	 */
	html body #bookmarks th#desc,
	html body #bookmarks th#uri,
	html body #bookmarks td.URL,
	html body #bookmarks td.bmk + td.wr { display: none; }

	/* Der Titel bekommt den frei gewordenen Platz. Die 280 Pixel stehen als
	   Stil im Element, dagegen hilft nur !important. */
	html body #bookmarks th#bm_w,
	html body #bookmarks td.bmk { width: auto !important; }

	/*
	 * Die Nutzerliste wird zur Kartenliste.
	 *
	 * Drei Spalten nebeneinander - Name, Anzahl, letzter Besuch - brauchten
	 * 406 Pixel in einer 325 Pixel breiten Spalte; die Tabelle stand rechts
	 * hinaus und die ganze Seite liess sich seitwaerts schieben. Eine Tabelle
	 * bricht nicht um, also steht jetzt jede Zeile als eigener Block da: der
	 * Name oben, die beiden Zahlen als eine kleine Zeile darunter.
	 *
	 * Das Markup bleibt eine Tabelle - am Schreibtisch ist sie richtig, und
	 * die Werte gehoeren zusammen. Die Beschriftung der beiden Zahlen kommt
	 * hier aus dem Stylesheet, weil die Kopfzeile im Kartenbild wegfaellt.
	 */
	table.publicUsers,
	table.publicUsers tbody,
	table.publicUsers tr,
	table.publicUsers td {
		display: block;
		width: auto;
	}

	/* Die Kopfzeile hat keine Spalten mehr, ueber denen sie stehen koennte */
	table.publicUsers tr:first-child { display: none; }

	table.publicUsers tr {
		padding: 10px 2px;
		border-top: 1px solid #f0f0f0;
	}

	table.publicUsers tr:nth-child(even) td { background: none; }
	table.publicUsers tr:nth-child(odd)  { background: #fafafa; }

	table.publicUsers td {
		padding: 0;
		border: 0;
	}

	/*
	 * Die beiden Zahlen stehen untereinander unter dem Namen, beide auf
	 * dessen Hoehe eingerueckt: 36 Pixel, das Bild ist 28 breit und haelt 8
	 * Abstand. Nebeneinander waren sie zusammen breiter als die Karte, die
	 * zweite rutschte um und stand dann als einzige am linken Rand.
	 */
	table.publicUsers td.zahl {
		margin: 2px 0 0 36px;
		color: #777;
		font-size: 13px;
		text-align: left;
	}

	table.publicUsers td:nth-child(2)::before { content: "Bookmarks: "; }
	table.publicUsers td:nth-child(3)::before { content: "Last visit: "; }
}

/* ==========================================================================
   Die Ordnerspalte auf einem fremden Profil
   ==========================================================================

   Die Spalte hoerte nach dem letzten Ordner auf.

   In der Anwendung steht die Seite still und die Liste scrollt in sich; die
   Spalte ist so hoch wie das Fenster und faellt nicht auf. Auf einem Profil
   wird die ganze Lesezeichenliste am Stueck ausgeliefert, die SEITE scrollt
   also - und die Spalte, die so hoch ist wie ihr Inhalt, endete mitten im
   Bild. Gemessen bei /nikto: #boxLeft 292 Pixel gegen #boxMiddle 1767.
   Peter am 27.08.2026: "auf der Public geht links die Spalte gar nicht bis
   ganz nach unten."

   Sie bleibt jetzt am oberen Rand haengen und ist so hoch wie das Fenster.
   Das loest beides auf einmal: kein abgeschnittener Grund mehr, und die
   Ordner bleiben beim Blaettern in Sicht.

   Die Dreiecke vor den Ordnern waren kurz ausgeblendet - sie schienen auf
   einem fremden Profil nichts zu tun, weil ein Ordner dort ein Verweis ist.
   Peter am 27.08.2026 mit dem besseren Argument: sie zeigen an, OB ein Ordner
   ueberhaupt Unterordner hat. Ohne sie sieht man das nicht. Sie bleiben.
   ========================================================================== */

#boxLeft {
	position: sticky;
	top: 0;
	height: 100vh;
	align-self: flex-start;
}

#boxLeftInner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Der Kasten mit den Ordnern nimmt den Rest und scrollt in sich, damit ein
   langer Baum die Spalte nicht ueber das Fenster hinaus schiebt. */
#boxLeftInner .box_side {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
}

#boxLeft .scrollBox {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Das Dreieck ist hier Teil der Trefferflaeche des Ordners - siehe den
   Handler in bm_public.js. Der Zeiger soll das auch sagen. */
#boxLeft .switch {
	cursor: pointer;
}

/*
 * Der Abstand zwischen Ordnersymbol und Name.
 *
 * In der Anwendung traegt das Symbol zusaetzlich die Klasse "handle" - den
 * Griff zum Ziehen -, und von dort kommen die 6 Pixel Luft nach rechts
 * (.fld .handle.fa in screen.css). Auf einem fremden Profil wird nichts
 * gezogen, die Klasse fehlt, und damit fehlte auch der Abstand: der Name
 * klebte am Symbol. Peter am 27.08.2026: "hier kleben leider auch links der
 * Text so sehr am Ordner."
 *
 * Gemessen: in der Anwendung Symbol bei x=25 (14 breit), Text bei x=45 - also
 * 6 Pixel dazwischen. Auf dem Profil stand der Text bei x=39.
 */
#boxLeft .fld > div > i.icon:not(.switch) {
	margin-right: 6px;
}

/*
 * Der Fuss der oeffentlichen Seite.
 *
 * Er traegt den Meldeweg nach Artikel 16 DSA - der muss leicht zugaenglich
 * sein, also auf jeder Seite und nicht in einem Untermenue.
 */
#publicFuss {
	clear: both;
	padding: 24px 20px 40px;
	text-align: center;
	font-size: 13px;
	opacity: .75;
}

#publicFuss a {
	margin: 0 10px;
	white-space: nowrap;
}

#publicFuss .melden {
	font-weight: 500;
}

/* Das Meldeformular steht auf einer sonst leeren Seite - es braucht eine
   lesbare Breite, sonst laeuft die Beschreibung ueber den ganzen Schirm. */
.meldeformular {
	max-width: 640px;
}

.meldeformular label {
	font-weight: 500;
}

/*
 * Der Honigtopf ist fuer Menschen nicht da, aber NICHT display:none - manche
 * Bots pruefen genau darauf. Er steht ausserhalb des Bildes.
 */
.honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}