/* =========================================================================
lesenswert.net -- 2026 refresh layer
=========================================================================
Loaded AFTER main.css / input.css / content.css and deliberately kept
separate from them: those three are the original 2007-2011 stylesheets and
are still the source of truth for everything this file does not mention.
Overriding from a later file rather than editing them means the original
rendering is one away if any of this turns out wrong.
What this changes, and what it does not:
it does -- fluid layout, breakpoints, type scale, contrast, focus
states, touch targets, panel chrome drawn in CSS instead
of sliced GIFs
it does not -- the brand. Green and orange stay, Georgia stays, the
vertical wordmark rail stays on desktop. This is the same
site, not a different one.
Selector shape mirrors the originals (div#wrapper, not #wrapper) so that
specificity ties are broken by load order rather than by an arms race.
Breakpoints are the standard set:
1200 full four-zone desktop
1024 drop the (empty) ad rail
768 tablet: wordmark rail becomes a header bar
480 phone: single column
========================================================================= */
/* -------------------------------------------------------------------------
1. Tokens
---------------------------------------------------------------------- */
:root {
/* Brand. Both hues are the originals, pulled a few points darker so that
white text on them clears WCAG AA -- the old #ff5c00 orange carried
white at 2.9:1, which is why the panel headings always looked slightly
out of focus. */
--lw-green: #2b8a72;
--lw-green-deep: #216b58;
--lw-orange: #cf5f22;
--lw-orange-deep: #ad4d17;
/* Text. The old body colour was #707070 on white: 4.6:1, technically a
pass, but it reads washed out at Georgia's small x-height. */
--lw-ink: #23292c;
--lw-muted: #5c686c;
--lw-link: #1c6b5a;
--lw-link-hover: var(--lw-orange-deep);
--lw-surface: #ffffff;
--lw-bg: #eceff0;
--lw-line: #dbe1df;
--lw-line-soft: #eaeeec;
--lw-focus: #1a6fd4;
/* Georgia for anything the reader reads -- it is the brand's voice and
the right face for a book site. A system sans for the interface around
it: labels, buttons, navigation, metadata. Serif content, sans chrome
is the ordinary editorial split and it makes the forms markedly easier
to scan.
No webfont on purpose. A German site pulling Georgia's replacement off
fonts.googleapis.com hands visitor IPs to a third country on every page
view, which is the exact thing the Munich judgment in 2022 found
against, and a self-hosted face would cost a render-blocking request
for very little. */
--lw-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
--lw-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* One spacing scale for every card, so a header, a body and a list row
all start their text on the same vertical line. The phone breakpoint
tightens these three values and nothing else. */
--lw-pad-x: 18px; /* horizontal padding inside a card */
--lw-pad-y: 16px; /* vertical padding inside a card body */
--lw-head-y: 12px; /* vertical padding inside a card header */
--lw-radius: 6px;
--lw-radius-sm: 4px;
--lw-gap: 18px;
--lw-shadow: 0 1px 2px rgba(20, 40, 35, .06),
0 1px 8px rgba(20, 40, 35, .04);
}
/* -------------------------------------------------------------------------
2. Base
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
/* 16px base, up from `small` (~13px). The old 1.2 line-height was set for
a 13px serif in a 547px column; at a readable size it is far too tight. */
font-family: var(--lw-serif);
font-size: 16px;
line-height: 1.6;
color: var(--lw-ink);
background: var(--lw-bg); /* replaces body_bg.gif */
text-align: left; /* the old centring hack is unnecessary now */
padding: 0 16px;
}
img { max-width: 100%; height: auto; }
a, a:visited { color: var(--lw-link); text-decoration: none; }
a:hover { color: var(--lw-link-hover); text-decoration: underline; }
/* The original had no visible focus ring anywhere: the site was unusable by
keyboard. :focus-visible keeps it off mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--lw-focus);
outline-offset: 2px;
border-radius: 2px;
}
::selection { background: #cfe7df; color: var(--lw-ink); }
/* -------------------------------------------------------------------------
3. Layout
----------------------------------------------------------------------
Original: #wrapper 1034 > #outer 1034 > (#inner 899 > (#left 134 +
#colspan 765 > (#center 547 + #right 206))) + #add 120, all floated.
Same zones, expressed as flex so they can breathe. The decorative GIFs that
drew the green rail (schlange_bg / _top / _bottom) were sliced for exactly
1034px and cannot follow a fluid column, so the rail is painted in CSS and
the wordmark rides on top of it as a single image.
---------------------------------------------------------------------- */
div#wrapper {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 24px 0 40px;
}
div#outer {
display: flex;
gap: var(--lw-gap);
align-items: flex-start;
width: 100%;
margin: 0;
background: none; /* was schlange_bg.gif */
overflow: visible;
}
div#inner {
display: flex;
gap: var(--lw-gap);
align-items: flex-start;
flex: 1 1 auto;
min-width: 0; /* lets the centre column actually shrink */
width: auto;
float: none;
background: none; /* was schlange_bottom.gif */
}
/* The ad rail is empty markup on every page of the live site. Left in place it
costs 120px of a 1034px layout for nothing, so it collapses unless something
is actually put in it. */
div#add { flex: 0 0 120px; width: 120px; float: none; height: auto; }
div#add:empty { display: none; }
/* The wordmark rail: the most recognisable thing the site owns, so it stays
exactly where it is on desktop. */
div#left {
flex: 0 0 122px;
width: 122px; /* the exact width of the three rail GIFs */
float: none;
align-self: stretch;
min-height: 430px;
/* The rail is drawn by the original artwork, not by a gradient: the white
margins inside those GIFs are the bookmark edge, part of the drawing,
so painting green behind them produced a green block with a white stripe
down each side. schlange_bg is a 122x5 tile that carries the rail down
the page; schlange_bottom closes it off. */
background:
url(../images/static/schlange_bottom.gif) no-repeat left bottom,
url(../images/static/schlange_bg.gif) repeat-y left top;
}
div#left .oben {
height: 430px; /* the real height of schlange_top.gif */
background: url(../images/static/schlange_top.gif) no-repeat left top;
cursor: pointer;
}
div#colspan {
display: flex;
flex-wrap: wrap;
gap: var(--lw-gap);
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
width: auto;
float: none;
}
div#center {
flex: 1 1 420px;
min-width: 0;
width: auto;
float: none;
}
div#right {
/* 240, not more: the centre column is what is left after the rail and the
gaps, and at 250 it drops below the width the six navigation labels
need, which wraps "Service" onto a second row. */
flex: 0 0 240px;
width: 240px;
float: none;
}
div#footer {
flex: 1 1 100%;
width: 100%;
float: none;
margin-top: 8px;
}
/* -------------------------------------------------------------------------
4. Panels
----------------------------------------------------------------------
Every panel was three GIF slices: a fixed-width header, a repeating 1px
side border, a rounded footer. None of them can follow a fluid column, so
all three are replaced by a border, a radius and a gradient.
Note the legacy file names are misleading, and the mapping below is the
rendered colour, not the name: box_547_top_blue.gif renders GREEN and
box_547_top_green.gif renders ORANGE.
---------------------------------------------------------------------- */
/* Every panel on the site is a wrapper around a card:
.startbox | .centerbox | .functionbox | .nonfunctionbox <- wrapper
└─ .box_middle | .box_rezension | .box_right | #loginbox <- card
├─ .top the coloured header
├─ .content (or .rahmen)
└─ .bottom the old sliced foot
That holds for all ten panels on the home page and there are no cards
without a wrapper, so the split is unambiguous: the wrapper does layout,
the card draws the chrome. Giving both a border drew a box inside a box --
and, because the wrapper's own border offset it, knocked the sidebar 1px
out of line with the navigation next to it. */
div.startbox,
div.centerbox,
div.functionbox,
div.nonfunctionbox {
float: none;
width: 100%;
margin: 0 0 var(--lw-gap);
padding: 0;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
div.box_middle,
div.box_rezension,
div.box_right,
div#loginbox {
float: none;
width: 100%;
margin: 0;
background: var(--lw-surface);
border: 1px solid var(--lw-line);
border-radius: var(--lw-radius);
box-shadow: var(--lw-shadow);
overflow: hidden;
}
/* Panel headers ------------------------------------------------------- */
div.box_middle .top,
div.box_rezension .top,
div.box_right .top,
div#loginbox .top {
float: none;
width: 100%;
height: auto;
min-height: 0;
padding: var(--lw-head-y) var(--lw-pad-x);
background: linear-gradient(180deg, var(--lw-green) 0%, var(--lw-green-deep) 100%);
border: 0;
border-radius: 0;
}
/* the two orange ones */
div.box_rezension .top,
div#loginbox .top {
background: linear-gradient(180deg, var(--lw-orange) 0%, var(--lw-orange-deep) 100%);
}
div.box_middle .top h1,
div.box_rezension .top h1,
div.box_right .top h1,
div#loginbox .top h1,
div.box_middle .top h2,
div.box_right .top h2 {
margin: 0;
padding: 0;
font-family: var(--lw-serif);
font-size: 1.0625rem;
line-height: 1.35;
font-weight: 700;
color: #fff;
background: none;
height: auto;
float: none;
}
div.box_rezension .top h1 a,
div.box_middle .top h1 a { color: #fff; }
/* Panel bodies -------------------------------------------------------- */
div.box_middle .content,
div.box_rezension .content,
div.box_right .content,
div#loginbox .content,
div#loginbox .menu,
div.functionbox .rahmen,
div.nonfunctionbox p {
float: none;
/* flow-root is load-bearing. These bodies were `float: left`, and that
float was what made them contain their own floated children. Setting
float: none for the fluid layout quietly removed the block formatting
context with it, so on any page whose content floats -- the book page
puts the cover and its action list in a floated column -- the body
collapsed to a couple of pixels and everything inside spilled over the
panel below it. flow-root restores the containment without bringing
back the float or clipping anything the way overflow: hidden would. */
display: flow-root;
width: 100%;
padding: var(--lw-pad-y) var(--lw-pad-x);
/* Every one of these carried a repeat-y slice of the panel's side border
(box_206_border.gif / box_547_border.gif). Those are cut for a 206px or
547px column, so in a fluid one they drew a stray vertical rule partway
across the panel. The border now belongs to the panel itself. */
background: var(--lw-surface);
border: 0;
}
/* Everything else that still carries a sliced border. These GIFs are cut for
a 206px or 547px column, so in a fluid one they draw a stray vertical rule
partway across the panel -- most visibly down the middle of the News box.
The list is the complete set of selectors in main.css/content.css that
reference box_*_border or the *_bottom slices. */
div.functionbox .news,
div.box_rezension,
div.centerbox .bottom,
div.nonfunctionbox .bottom,
.boerse_nav,
.profil_nav {
background-image: none;
}
div.functionbox .news { padding: 0; }
/* The News box lays its headline and its link list out as two floated columns
sized for 206px. Below the sidebar breakpoint there is no room for two, and
they overlap. */
div.functionbox .news .rahmen p,
div.functionbox .news .rahmen ul,
div.functionbox .news .rahmen li { width: auto; float: none; }
div.functionbox .news .rahmen { padding: var(--lw-pad-y) var(--lw-pad-x); }
div.functionbox .news .rahmen p { margin: 0 0 .6em; }
div.functionbox .news .rahmen p:last-child { margin-bottom: 0; }
/* The sliced rounded footers are now the panel's own border-radius. */
div.box_middle .bottom,
div.box_rezension .bottom,
div.box_right .bottom,
div.functionbox .bottom,
div.nonfunctionbox .bottom,
div.centerbox .bottom,
div.startbox .bottom {
display: none;
}
/* The welcome box sets its photo as a background and then holds the text off
it with a hard 320px width on div.starttext. Both have to become relative or
the text keeps wrapping in a narrow ribbon down the left of a wide box. */
/* The photo belongs on the content box, not on div.startbox: the panel it
wraps paints its own white background, which covered all but the last few
pixels of the image. Padding underneath the text is what actually reveals
the band -- the image is anchored to the bottom, so the panel only shows as
much of it as the padding leaves free. */
div.startbox .content {
padding-bottom: 140px;
background: var(--lw-surface) url(../images/static/startbox_bg.jpg) no-repeat right bottom;
}
div.starttext {
width: auto;
/* startbox_bg.jpg is 798x276 -- a wide, short band, not a side image, and
it sits at the foot of the panel. So the text wants the full column with
an ordinary measure, not the 320px ribbon the original squeezed it into
to clear a photo that was never beside it. */
max-width: 68ch;
margin-bottom: 24px;
text-align: left; /* was justify, unhyphenated, in German */
hyphens: auto;
-webkit-hyphens: auto;
}
.starttxt {
font-size: 1rem;
color: var(--lw-ink);
margin: 0 0 1em;
}
.starttxt:last-child { margin-bottom: 0; }
/* div.functionbox li was `float: left; width: 200px`, sized for the old fixed
206px sidebar. At any other width the floated item sits alongside whatever
follows it instead of above it, which is what jumbled the News box into two
overlapping columns. */
div.functionbox ul,
div.functionbox li {
list-style: none;
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0;
}
/* Sidebar list rows.
The row is li > p.list > a, and the icon is a background on the p, not on
the a. Two things went wrong here. The separator was on the a, which the
target-size rule further up had made inline-block, so each line stopped at
the end of its own text and the panel got a ragged stack of underlines of
twelve different widths. And the a carried its own 34px indent on top of
the p's 25px, which pushed every label away from the icon that belongs to
it and forced most of them onto a second line.
So: the separator belongs to the row, the indent belongs to the icon's own
element, and the link fills what is left. */
div.functionbox li {
border-bottom: 1px solid var(--lw-line-soft);
}
div.functionbox li:last-child { border-bottom: 0; }
/* One indent for every row in the member menu. The icon classes all set
`padding-left: 25px`, but .list adds `margin-left: 10px` and marks its
padding !important, so its rows sat on a different line from the rest and
the icon column looked broken. The !important here is answering that one. */
div.functionbox li p,
div.functionbox li p.list,
div.functionbox li p.privat,
div.functionbox li p.profil,
div.functionbox li p.logoff,
div.functionbox li p.post,
div.functionbox li p.wish,
div.functionbox li p.bib,
div.functionbox li p.tausch,
div.functionbox li p.verkauf,
div.functionbox li p.freund {
margin: 0 !important;
padding-left: 25px !important;
background-position: 0 50%;
background-repeat: no-repeat;
}
div.functionbox li a {
display: block;
width: auto;
min-height: 24px;
padding: 9px 0;
border-bottom: 0;
font-family: var(--lw-sans);
/* 14px rather than 15: "Meine Verkaufsangebote" is the longest label in
the member menu and this is what keeps it on one line. */
font-size: .875rem;
line-height: 1.35;
/* "Meine Verkaufsangebote" is the longest label the member menu has and
is 2-3px wider than the column at this size; letting it tighten very
slightly is less disruptive than dropping the whole menu a size. */
letter-spacing: -.002em;
}
div.functionbox li:hover { background-color: #f4f8f6; }
div.functionbox li a:hover { text-decoration: none; }
/* The book page's action list ("In Bibliothek einordnen", "Buch kaufen", ...)
sits in a 156px column sized for the old 547px centre, with each row a
150px float. At that width every second label wrapped to two lines and the
1px separator between rows landed in the middle of the text, reading as a
strikethrough. The column has room to spare now, so the rows are ordinary
blocks and the labels fit on one line. */
div.buch_links { width: 200px; }
div.buch_links li {
float: none;
width: auto;
border-bottom: 1px solid var(--lw-line);
}
div.buch_links li:last-child { border-bottom: 0; }
div.buch_links li a {
display: block;
padding: 9px 0 9px 30px;
/* These are controls, not prose, so they take the interface face -- which
is also narrower than Georgia and lets every label sit on one line. */
font-family: var(--lw-sans);
font-size: .9375rem;
line-height: 1.35;
}
div.buch_links li a:hover { background-color: #f4f8f6; }
/* -------------------------------------------------------------------------
5. Content typography
---------------------------------------------------------------------- */
/* Note: div.starttext is deliberately NOT in this group. It sets its own
width so the welcome photo stays visible beside it, and the 68ch measure
below would win on load order and stretch the text back over the photo. */
div.box_middle .content p,
div.box_rezension .content p,
div.centerbox p {
/* The original justified every paragraph without hyphenation, which in
German -- where the compounds are long -- opened rivers of white space
down the column. Ragged right with hyphenation set for German. */
text-align: left;
hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
margin: 0 0 1em;
max-width: 68ch; /* keeps the measure readable on wide screens */
}
div.box_middle .content p:last-child,
div.box_rezension .content p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 {
font-family: var(--lw-serif);
line-height: 1.25;
color: var(--lw-ink);
}
/* Anything the old stylesheets sized in px keeps working; these only set the
scale where nothing else does. */
div.box_middle .content h2 { font-size: 1.25rem; margin: 1.4em 0 .5em; }
div.box_middle .content h3 { font-size: 1.0625rem; margin: 1.3em 0 .4em; }
/* Metadata, captions and form labels move to the sans face. */
label,
.pager,
div.functionbox p,
div#footer,
small {
font-family: var(--lw-sans);
}
/* -------------------------------------------------------------------------
5b. Accessibility
----------------------------------------------------------------------
Findings from a Lighthouse run that scored 57. Each rule below answers one
audit, and the selectors carry the same classes as the originals because
those originals are more specific than a bare element selector.
---------------------------------------------------------------------- */
/* colour-contrast: 27 failures, all the same pair. content.css links are
#ff5c00 on white -- 3.09:1, short of the 4.5:1 AA needs. The deeper brand
orange is 5.45:1 and still unmistakably the same colour. */
div.centerbox a,
div.startbox a,
div.rez_link a,
div.functionbox li a:hover,
div.profil_links li a:hover,
div.buch_links li a:hover,
div.validate_error li,
.txtmarker {
color: var(--lw-orange-deep);
}
/* link-in-text-block: a link inside a paragraph was told apart from the text
around it by colour alone (2.06:1 against it), which fails for anyone who
cannot separate the two hues. Underlining carries the distinction without
relying on colour. Underlines are deliberately not applied to the panels
that are lists of links -- there the link is the whole row. */
div.box_middle .content p a,
div.box_rezension .content p a,
div.centerbox p a,
div.starttext a {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
/* target-size: the arrow links in the sidebar and the tag cloud were 14-15px
tall, against a 24px minimum. Padding rather than a height keeps them
inline where the layout expects them. */
a.pfeil,
div.functionbox .pfeil,
div.functionbox p a:not(li p a) {
display: inline-block;
min-height: 24px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 1.4;
}
/* The tag cloud sizes each link by weight, down to a few pixels tall. */
div.box_middle .content p a[style*="font-size"] {
display: inline-block;
min-height: 24px;
padding: 3px 2px;
line-height: 1.5;
}
/* The cookie banner ships its own stylesheet (cookieconsent.min.css) and its
link sat at 3.25:1 against the banner. Its markup is not ours to change, so
the colours are corrected here. */
.cc-window a,
.cc-window .cc-link {
color: #ffffff;
text-decoration: underline;
opacity: 1;
}
.cc-window .cc-btn {
background: var(--lw-orange-deep);
color: #ffffff;
border-color: var(--lw-orange-deep);
}
.cc-window .cc-btn:hover,
.cc-window .cc-btn:focus { background: var(--lw-orange); }
/* For labels that must exist for assistive technology but would be redundant
on screen, next to a control that is already visually self-evident. */
.lw-visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* -------------------------------------------------------------------------
6. Navigation
----------------------------------------------------------------------
The bar was a fixed 547px strip of floated