/* Spike styles for the static archive (news + gallery). Layered on general.css. */

.contentcell { text-align: left; }

/* Accessibility: skip link (visually hidden until focused) + a visible keyboard
   focus ring (only on keyboard nav via :focus-visible, so mouse users see no change).
   Orange matches the theme accent and stays visible on dark chrome and grey content. */
.skiplink { position: absolute; left: -9999px; top: 0; }
.skiplink:focus { left: 8px; top: 8px; z-index: 2000; background: #fff; color: #000; padding: 4px 8px; border: 2px solid #000; }
a:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #ff8800; outline-offset: 1px; }
/* Headings reuse the existing box-chrome classes; neutralise only the UA h1/h2 defaults
   each class does NOT already set, so a div->h1/h2 swap stays pixel-identical.
   .box-title sets its own weight+margin; .cbox-head sets weight but no margin;
   .header sets neither font nor margin. */
h1.box-title, h2.box-title { font-size: inherit; }
h1.cbox-head, h2.cbox-head { font-size: inherit; margin: 0; }
h1.header, h2.header { font: inherit; margin: 0; }

/* Full-width design strip images are inline by default, so the line box adds a
   baseline gap (e.g. the 6px sub.gif strip sat in a 14px cell -> 8px gap below the
   2nd-level nav). display:block collapses the line box to the image height. */
#header img,
img[src="/img/design/sub.gif"],
img[src="/img/design/content.top.gif"] { display: block; }

/* The nav-feet row (con_*.gif, 10px tall). Same baseline-gap fix: collapse each
   cell's line box so the feet sit flush against the submenu bar, as they did on the
   original (almost-standards-mode) page. One image per cell, so block stays in-row.
   The same fix on the level-1 tabs (.navtable) is what removes the dark 1px baseline
   gap that otherwise shows as a black seam between the tabs and their feet. */
.navtable img,
.feettable img { display: block; }

/* Submenu bar caps (MY HOME title + the section subleft/subright transition pieces).
   These sit inline by default, so their baseline descender space makes the 20px row
   ~22.7px tall: a 2-3px strip of the dark page background then shows under the grey
   caps (and the red subnav colour under its cell), reading as a seam below "MY HOME".
   display:block collapses the line box so the row is a clean 20px. Only the direct
   td>img caps are targeted; the inline arrows.gif inside #navigation stay inline. */
.subtable td > img { display: block; }

/* The con_blank_*.gif spacer tiles (and con_left) carry a 1px pure-black pixel row
   on their TOP edge - baked into the original art. Against the grey/red tab bottoms
   that reads as a hard black seam between each level-1 tab and its foot. Clip that
   row off: the wrapper hides overflow and the table is pulled up 1px, so its black
   top row falls outside the clip. The tabs then sit flush on the feet (9px visible)
   with no black seam. */
.feetclip { overflow: hidden; }
.feetclip .feettable { margin-top: -1px; }

/* News section: narrow main column (matches the original ~620px box design) plus
   the right-hand news quicklist rail. */
/* table-layout:fixed enforces the column widths; without it the rail's nowrap
   titles force the rail column to ~half the width. */
.content-split { width: 806px; table-layout: fixed; }
.content-split > tbody > tr > .maincol { width: 610px; text-align: left; }
.content-split > tbody > tr > .railcol { width: 190px; }
.rail-head { background: #BA652C; color: #fff; font-weight: bold; font-size: 11px; padding: 3px 6px; border: 1px solid rgba(0,0,0,.4); }
.newsrail { border: 1px solid #000; border-top: 0; background: #949993; }
.rail-row { padding: 2px 5px; border-bottom: 1px solid #8a8f89; }
.rail-row:nth-child(even) { background: #9ea39d; }
.rail-date { display: block; font-size: 9px; color: #4a4d47; }
.rail-title { display: block; font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.box-title {
	color: #fff; font-weight: bold; font-size: 12px;
	padding: 4px 8px; margin: 0 0 6px 0; text-align: left;
	border: 1px solid rgba(0,0,0,.4);
}
.box-title img { vertical-align: middle; margin-right: 4px; }

/* news + home list */
/* Column-header row = the original .list_header bar (#98997A tan, white centred text)
   that sits inside the box and holds the table headers. */
/* The #98997A tan bars carry white text, which is only ~2.9:1 contrast on its own.
   A subtle 1px dark text-shadow crisps the white glyphs so the bold titles/headers
   stay legible (white-on-mid-tone otherwise renders soft). Font is unchanged. */
.list_table .listhead td, .list_table .listhead th {
	background-color: #98997A; color: #fff; font-weight: bold;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	border-top: 1px solid #7E847D; border-bottom: 1px solid #5D625D;
	padding: 2px 5px;
}
/* Paging bar: the same #98997A bar above and below the list, holding the pager. */
.list-bar {
	background-color: #98997A; color: #fff; text-align: center; font-size: 11px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	padding: 3px 5px; border-top: 1px solid #7E847D; border-bottom: 1px solid #5D625D;
}
.list-bar a { color: #fff; padding: 1px 6px; text-decoration: none; }
.list-bar a:hover { text-decoration: underline; }
.list-bar .off { color: #d9d9cf; padding: 1px 6px; }
.list-bar b { padding: 1px 8px; }
/* Subheader bar inside a content box (the original .color_yellow + .border_yellow). */
.subhead {
	margin: 0; background-color: #98997A; color: #fff; font-weight: bold; font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	padding: 3px 6px; border-top: 1px solid #B7B893; border-bottom: 1px solid #5D625D;
}
.subhead a { color: #fff; }
.list_table td { vertical-align: top; }
.teaser { color: #444; font-size: 11px; }

/* news lists: keep the title row to one clean line; the teaser truncates with an
   ellipsis (matching the rail/original teaser design) instead of wrapping wide.
   Only the title cell truncates - date/icon/author columns keep their content. */
.news-list { table-layout: fixed; }
.news-list .teaser { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* titles wrap fully (they matter); only the teaser truncates to one line */
.news-list td { word-break: break-word; }

/* news article */
.news-meta { color: #555; font-size: 11px; padding: 2px 4px 8px; }
.news-body { padding: 4px 6px; line-height: 1.5; }
.news-body .lead { margin: 0 0 10px; }
.news-body img { max-width: 100%; height: auto; }

/* news body: reproduce the original bordered content cell */
.newsbody td { line-height: 1.5; font-size: 12px; }
.newsbody img { max-width: 100%; height: auto; }

/* home: Top Stories */
.topstories { display: flex; gap: 8px; padding: 4px; }
.topstory { flex: 1; background: #949993; border: 1px solid #000; padding: 6px 8px; }
.topstory .ts-ico { vertical-align: middle; margin-right: 4px; }
.topstory .ts-date { color: #555; font-size: 10px; margin-left: 6px; }
.topstory .teaser { margin: 4px 0 0; }

/* home: "in Zahlen" stat tiles + highlights */
.home-stats { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
.home-stats .stat { flex: 1 1 17%; min-width: 104px; background: #525352; border: 1px solid #000; padding: 6px 4px; text-align: center; text-decoration: none; color: #e8e8e8; }
.home-stats .stat:hover { background: #5e5f5e; }
.home-stats .stat b { display: block; font-size: 17px; color: #fff; line-height: 1.1; }
.home-stats .stat span { font-size: 10px; color: #d6d6d6; }
.home-highlights { padding: 8px; line-height: 1.5; color: #161616; }
.home-highlights p { margin: 0 0 8px; }
.home-highlights p:last-child { margin-bottom: 0; }

/* specials / dossiers index (list with icon, name, date, description) */
.specials-table td { padding: 5px 6px; border-bottom: 1px solid #9aa098; vertical-align: top; }
.specials-table td.ico { width: 40px; text-align: center; }
.specials-table td.ico img { max-width: 32px; max-height: 32px; }
.specials-table td.info { width: 190px; }
.specials-table td.info .meta { display: block; color: #555; font-size: 10px; }
.specials-table td.desc { font-size: 11px; color: #333; line-height: 1.35; }
.special-intro { line-height: 1.5; margin-bottom: 10px; overflow: hidden; }
.special-icon { float: left; max-width: 48px; max-height: 48px; margin: 0 10px 6px 0; }
.special-cat { color: #fff; font-weight: bold; font-size: 12px; padding: 3px 6px; margin: 8px 0 4px; }
.special-list { list-style: none; margin: 0 0 6px; padding: 0; }
.special-list li { padding: 2px 0; }
.special-list img { vertical-align: middle; }

/* dossier membership note on an article */
.dossier-note { font-size: 11px; color: #333; background: #c8b89a55; padding: 3px 6px; border: 1px solid #BFC2BE; }
.dossier-note img { vertical-align: middle; }

/* interview info box */
.interview-info { border: 1px solid #BFC2BE; background: #A6A9A5; }
.interview-info th { text-align: left; padding: 2px 14px 2px 6px; color: #333; white-space: nowrap; font-weight: bold; }
.interview-info td { text-align: left; padding: 2px 8px; color: #232323; }

/* LAN detail facts */
.lanfacts { border-collapse: collapse; margin-bottom: 10px; }
.lanfacts th { text-align: left; vertical-align: top; padding: 3px 12px 3px 0; white-space: nowrap; color: #333; width: 130px; }
.lanfacts td { vertical-align: top; padding: 3px 0; }
.lan-crosslink { background: #c8b89a55; border: 1px solid #BFC2BE; padding: 6px 8px; margin: 10px 0; font-size: 11px; line-height: 1.5; }
.lan-info { line-height: 1.5; }
.lan-info img { max-width: 100%; height: auto; }

/* news article meta line (top of the content box) */
.news-meta { font-size: 11px; color: #555; }
.news-meta a { font-weight: bold; }

/* The header gradient is a 614px rounded bar (corners on both ends, sized for the old
   607px box). Tiling it on our wider 806px boxes repeated the rounded corners mid-bar,
   so stretch it to fill instead: one clean rounded bar at any width. */
.box .header { background-repeat: no-repeat; background-size: 100% 100%; }

/* Spacing between stacked boxes (e.g. the home page boxes were touching). */
.box { margin-bottom: 9px; }

/* The .box body is the dark #525352 panel; list rows bring their own (light) bg, but
   plain prose put directly in the box sat dark-on-dark. Give the contents a light
   background so all in-box text has proper contrast. */
.box .contents { background-color: #AFB4AE; }

/* Footer: the 3px section-coloured strip at the box bottom (box_<section>_low.gif),
   matching the header colour. The image URL is passed per box as --foot (box.njk). */
.box .footer { background-image: var(--foot); background-repeat: repeat-x; }

/* comments reuse the original .box component (header bar + bordered text) */
.comments { margin-top: 12px; }
.comments .box { margin-bottom: 6px; }
.comments .header a { color: #fff; }
.comments .text { font-size: 12px; line-height: 1.45; }
.comments .text img { max-width: 100%; height: auto; }
.spamfoot { font-size: 10px; color: #777; padding: 4px 2px; font-style: italic; }
.more-comments > summary { cursor: pointer; background: #BA652C; color: #fff; font-weight: bold;
	font-size: 11px; padding: 4px 8px; margin: 2px 0 6px; border: 1px solid rgba(0,0,0,.4); list-style: none; }
.more-comments > summary::-webkit-details-marker { display: none; }
.more-comments[open] > summary { background: #8a4a1f; }

/* pager */
.pager { padding: 10px 4px; font-size: 12px; }
.pager a { padding: 1px 5px; }
.pager .off { padding: 1px 5px; color: #999; }
.pager .pages b { padding: 1px 5px; background: #444; color: #fff; }

/* polls (read-only results) */
.poll { margin: 6px 0; }
.poll-q { margin: 0 0 8px; }
.poll-opt { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 11px; }
.poll-label { flex: 0 0 38%; }
.poll-bar { flex: 1; height: 12px; background: #5a5e59; border: 1px solid #000; }
.poll-fill { display: block; height: 100%; background: #BA652C; }
.poll-num { flex: 0 0 86px; text-align: right; color: #333; }
.poll-total { color: #555; font-size: 10px; margin: 6px 0 0; }

/* single match report (Type 5) */
.match { margin: 6px 0; }
.match-score { font-size: 14px; text-align: center; padding: 6px; background: #5a5e59; color: #fff; border: 1px solid #000; }
.match-team { display: inline-block; min-width: 30%; }
.match-event { text-align: center; color: #555; font-size: 11px; margin: 4px 0; }
.match-desc { line-height: 1.5; margin: 8px 0; }
.match-lineups { display: flex; gap: 10px; font-size: 11px; }
.match-lineups > div { flex: 1; }

/* league archive (read-only ladder) */
.league-intro { padding: 4px 6px 8px; font-size: 11px; color: #444; }
.league-meta { font-size: 11px; color: #444; padding: 2px 6px 8px; }
.league-standings td, .league-matches td { padding: 2px 6px; }
.league-standings .listhead th, .league-matches .listhead th { font-weight: bold; }
.league-matches { table-layout: fixed; }
.league-matches td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* league rules (Regeln tab): hierarchical numbering, original heading scale */
.league-rules { padding: 2px 6px 8px; }
.rules-toc { padding: 2px 0 10px; }
.rules-toc-line.rules-depth1 { padding-left: 14px; }
.rules-toc-line.rules-depth2 { padding-left: 28px; }
.rules-toc-line.rules-depth3 { padding-left: 42px; }
.rules-title { padding: 10px 0 4px; font-weight: bold; }
.rules-title.rules-h0 { font-size: 1.3em; border-top: 1px solid #ccc; margin-top: 10px; }
.rules-toc + .rules-title.rules-h0 { border-top: 0; margin-top: 0; }
.rules-title.rules-h1 { font-size: 1.2em; }
.rules-title.rules-h2 { font-size: 1.1em; }
.rules-title.rules-h3 { font-size: 1em; }
.rules-text { line-height: 1.5; padding: 0 0 6px; }
.rules-text img { max-width: 100%; height: auto; }

/* bets (read-only) */
.bet { margin: 6px 0; }
.bet-q { margin: 0 0 6px; }
.bet-desc { line-height: 1.5; margin: 0 0 10px; }
.bet-desc img { max-width: 100%; height: auto; }
.bet-options { margin: 6px 0; }
.bet-options tr.bet-winner td { background: #cfe3c0; font-weight: bold; }
.bet-foot { color: #555; font-size: 10px; margin: 6px 0 0; }

/* clans */
.clan-url { font-size: 11px; padding: 2px 6px; }
.clan-desc { line-height: 1.5; padding: 4px 6px; }
.clan-desc img { max-width: 100%; height: auto; }
.clan-seasons { margin: 4px 0; padding-left: 20px; font-size: 11px; }
.clan-seasons li { padding: 1px 0; }
.clan-members { font-size: 11px; color: #333; padding: 4px 6px; line-height: 1.6; }

/* downloads (file archive) */
.files-crumb { font-size: 11px; padding: 2px 6px 8px; color: #444; }
.files-folder b::before { content: "\01F4C1\00A0"; }   /* folder glyph before subdir names */
.files-list td:first-child a { word-break: break-word; }

/* lead paragraph inside a .box (intro text above a table) */
.box-lead { margin: 0; padding: 6px 8px; font-size: 11px; color: #2b2b2b; line-height: 1.45; }

/* bets: stakes list truncates the long bet-title column */
.bets-stakes-table { table-layout: fixed; }
.bets-stakes-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* My-Home panel: the chrome <img> are inline, so their baseline gap made the row 2px
   taller than the 41px panel cap and showed a seam/line. display:block collapses the
   line box. The two language flags stay side by side via inline-block links. */
.langpanel { line-height: 0; font-size: 0; white-space: nowrap; }
.langpanel a { display: inline-block; vertical-align: top; margin-right: 4px; }
.langpanel img { display: block; }
.sidebar td > img { display: block; }
/* Pin the panel's column widths. Our frozen-archive notice (replacing the original
   login form) has a slightly wider min-content, so the auto table algorithm stole ~2px
   from the 12px left-edge cell (squeezing it to 10px) and pinched the section-coloured
   left border, making it look broken where the text sits. table-layout:fixed holds the
   12 / 156 / 8 columns the width attributes specify, so the border stays full and
   continuous (as on the original). */
.sidebar table { table-layout: fixed; }
/* The edge images (12px left, 7px right) are single vertical strips; only ever tile
   them down, never across, so a 1px width mismatch can't show a horizontal repeat.
   box-sizing:border-box makes the cells' width attributes include their padding (the
   langpanel's padding-left:20 + the text cell's 8/10), so table-layout:fixed keeps the
   panel at exactly 176px instead of adding the padding on top and ballooning to 196px,
   which had pushed the right border ~20px too far out. */
.sidebar td { background-repeat: repeat-y; box-sizing: border-box; }

/* gallery search */
.gallery-searchbar { padding: 4px 6px 8px; }
.gallery-searchbar label { font-size: 12px; color: #333; }
.gsearch-head { font-size: 11px; color: #555; margin: 6px 0 2px; }
.gsearch-list { list-style: none; margin: 0; padding: 0; }
.gsearch-list li { padding: 2px 4px; border-bottom: 1px solid #9aa098; }
.gsearch-list li:nth-child(even) { background: rgba(0,0,0,.04); }
.gsearch-list .meta { color: #444; font-size: 10px; }

/* gallery index */
.album-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; }
.album-card { width: 188px; background: #6a716800; text-align: center; }
.album-card a { display: block; text-decoration: none; color: #111; }
.album-card .thumb { display: block; height: 150px; background: #2c2f2c; overflow: hidden;
	display: flex; align-items: center; justify-content: center; border: 1px solid #000; }
.album-card .thumb img { max-width: 100%; max-height: 150px; }
.album-card .cap { display: block; font-weight: bold; font-size: 11px; padding: 3px 2px 0; }
.album-card .meta { display: block; color: #3a3a3a; font-size: 10px; }

/* album page */
.album-meta { color: #555; font-size: 11px; padding: 2px 4px 6px; }
.album-desc { padding: 0 6px 8px; text-align: left; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px; }
.photo { display: block; width: 124px; height: 94px; overflow: hidden; border: 1px solid #000;
	display: flex; align-items: center; justify-content: center; background: #2c2f2c; }
.photo img { max-width: 100%; max-height: 94px; }

/* lightbox */
#lb { position: fixed; inset: 0; background: rgba(0,0,0,.88); display: none;
	align-items: center; justify-content: center; z-index: 2000; }
#lb.on { display: flex; }
#lb img { max-width: 92vw; max-height: 84vh; box-shadow: 0 0 30px #000; }
#lb .cap { position: fixed; bottom: 14px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; }
#lb .x, #lb .nav { position: fixed; top: 50%; color: #fff; font-size: 34px; cursor: pointer;
	user-select: none; transform: translateY(-50%); padding: 10px; }
#lb .prev { left: 10px; } #lb .next { right: 10px; }
#lb .x { top: 12px; right: 16px; transform: none; font-size: 28px; }

/* ---- Contrast lift for low-res legibility ----
   Dark body text was already ~10:1 on the grey-green, but mid-tone backgrounds make
   it feel soft on lower-resolution screens. Lighten the content + list backgrounds a
   notch so the text pops, and darken the small secondary (teaser/rail) text so it
   clears AA 4.5:1. The grey-green design tone is kept, just lighter. */
.box .contents,
.color_grey, .content, .color_list1 { background-color: #C6CAC2; }
.color_darkestgrey, .color_list, .color_list0,
.newsrail, .topstory { background-color: #ABB0A9; }
.rail-row:nth-child(even) { background: #B5BAB3; }
.teaser { color: #333; }
.rail-date { color: #30322c; }
.topstory .ts-date { color: #3a3a3a; }
.album-card .meta, .album-meta, .gsearch-head, .gsearch-list .meta { color: #3a3a3a; }

/* ---- Box 3D shadow: right + bottom only, zoom-stable ----
   The shadow used to be the #525352 body revealed by box_content { left:-3px; top:-3px }
   plus an inline padding-left:3px on .box. At non-100% zoom the sub-pixel rounding of
   those offsets left a dark sliver on the TOP-LEFT corner. A real box-shadow casts only
   to the right and bottom and never bleeds left/top, at any zoom. (The macro no longer
   sets padding-left, so the shadow does not double up.) The #525352 base fill on .box is
   now redundant (the box-shadow draws it) and showed through the header gif's transparent
   rounded top corners as a dark notch, so .box goes transparent: the rounded corners then
   reveal the content-cell backing behind them, as on the original. */
.box { background: transparent; }
.box_content { left: 0; top: 0; box-shadow: 3px 3px 0 0 #525352; }