/*
* Additives Overlay-Stylesheet fuer das Forum-Theme "bvb".
* Zieht Farben/Typografie an das brand-v16-Design von Hauptseite/Dev/Staging an,
* ohne style.css oder das Smarty-Markup zu aendern.
*
* Aktivierung: Klasse "brand-v16-forum" am (main.tpl).
* Deaktivieren/Rollback: Klasse entfernen oder diesen aus main.tpl loeschen.
*
* Umfang Stufe 1: Header, Navigationsleisten, Grundfarben, Typografie.
* Thread-/Post-Listen, Formulare und Editor folgen in einer spaeteren Stufe.
*/
@font-face {
font-family: "Atkinson Hyperlegible";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/brand-v16/atkinson-hyperlegible-400.woff2) format("woff2");
}
@font-face {
font-family: "Atkinson Hyperlegible";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/brand-v16/atkinson-hyperlegible-700.woff2) format("woff2");
}
@font-face {
font-family: "Barlow Semi Condensed";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/brand-v16/barlow-semi-condensed-400.woff2) format("woff2");
}
@font-face {
font-family: "Barlow Semi Condensed";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/brand-v16/barlow-semi-condensed-700.woff2) format("woff2");
}
body.brand-v16-forum {
/* Default = Light Mode. Dark Mode ist kein neuer Standard, sondern greift
ausschliesslich ueber die Systemeinstellung (prefers-color-scheme) weiter
unten - genau wie im brand-v16-System der Hauptseite. */
--sgv16f-bg: #F5F5F5;
--sgv16f-surface: #FFFFFF;
--sgv16f-surface-2: #EBEBEB;
--sgv16f-text: #121212;
--sgv16f-text-2: #1A1A1A;
/* #616873: >= 4.7:1 auch auf --sgv16f-surface-2 (#EBEBEB); #6B7280 lag dort nur bei 4.06:1 */
--sgv16f-text-3: #616873;
--sgv16f-line: #FFCC00;
--sgv16f-yellow: #FFCC00;
--sgv16f-yellow-hover: #E6B800;
--sgv16f-red: #CC0000;
--sgv16f-red-hover: #A30000;
/* #FFCC00 als Textfarbe auf hellem Grund (#FFFFFF/#F5F5F5) hat nur ~1.5:1
Kontrast - weit unter WCAG AA (4.5:1). --sgv16f-yellow bleibt fuer
Hintergruende/Rahmen/Chips unveraendert gelb (dort ist die dunkle
--sgv16f-yellow-ink-Schrift das Kontrastproblem, nicht das Gelb selbst).
Fuer Gelb ALS Schriftfarbe gibt es dieses eigene Token: im Light Mode ein
abgedunkeltes Gold (gleicher Farbton/Saettigung wie #FFCC00, nur dunkler -
ca. 6:1 zu Weiss, >= 5:1 auch auf --sgv16f-surface-2 #EBEBEB), im Dark
Mode das normale helle Gelb. */
--sgv16f-yellow-text: #7A6000;
--sgv16f-yellow-text-hover: #665200;
/* Theme-unabhaengige Konstanten (bewusst nicht in der @media-Ueberschreibung unten) */
--sgv16f-yellow-ink: #121212; /* Text/Logo auf Gelb: immer dunkel, unabhaengig vom Modus */
/* Gemeinsame Breite fuer Header/Content/Footer (Stufe 3) - vorher hatten diese
Bereiche uneinheitliche max-width-Werte in style.css (1280px/1240px gemischt). */
--sgv16f-container-max: 1000px;
}
@media (prefers-color-scheme: dark) {
body.brand-v16-forum {
--sgv16f-bg: #121212;
--sgv16f-surface: #1A1A1A;
--sgv16f-surface-2: #2E2E2E;
--sgv16f-text: #F5F5F5;
--sgv16f-text-2: #D0D0D0;
/* #ABABAB: >= 5.9:1 auf --sgv16f-surface-2 (#2E2E2E) */
--sgv16f-text-3: #ABABAB;
--sgv16f-red: #FF6B6B;
--sgv16f-red-hover: #FF8A8A;
--sgv16f-yellow-text: #FFCC00;
--sgv16f-yellow-text-hover: #E6B800;
}
}
/* Grundfarben & Typografie */
body.brand-v16-forum {
background-color: var(--sgv16f-bg) !important;
background-image: none !important;
color: var(--sgv16f-text-2);
font-family: "Atkinson Hyperlegible", sans-serif;
}
/* style.css setzt viele Schriftgroessen sehr klein (0.69em/0.7em ~ 11px bei 100.1%
Basisgroesse). Die Basisgroesse skaliert alle em-Werte proportional mit und hebt
so die kleinste vorkommende Groesse an, ohne die bestehende Groessen-Hierarchie
(Ueberschrift > Text > Meta-Text) durcheinanderzubringen. Nur Desktop, mobil
bleibt unangetastet (dort greifen eigene Breakpoints in style.css). */
@media (min-width: 769px) {
body.brand-v16-forum {
font-size: 112%;
}
}
body.brand-v16-forum h1,
body.brand-v16-forum h2,
body.brand-v16-forum h3,
body.brand-v16-forum h4 {
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 700;
color: var(--sgv16f-text);
}
/* Im Bright-Mode (Standard) simples Schwarz statt Gelb - bewusst als fester
Wert statt --sgv16f-text (der waere im Dark Mode fast weiss). Im Dark Mode
bleibt die gelbe Akzentfarbe erhalten, siehe Ueberschreibung in der
@media(prefers-color-scheme:dark)-Regel weiter unten. */
body.brand-v16-forum a {
color: #121212;
}
body.brand-v16-forum a:visited {
color: #121212;
}
/* Gegenstueck zum festen #121212 oben - im Dark Mode bleibt Gelb die
Link-Akzentfarbe. Muss NACH der Bright-Mode-Basisregel stehen: bei
gleicher Spezifitaet (body.brand-v16-forum a) gewinnt sonst die spaeter
im Stylesheet stehende Regel unabhaengig vom @media-Zustand. */
@media (prefers-color-scheme: dark) {
body.brand-v16-forum a,
body.brand-v16-forum a:visited {
color: var(--sgv16f-yellow-text);
}
}
body.brand-v16-forum a:hover {
color: var(--sgv16f-yellow-text-hover);
}
body.brand-v16-forum a.menuelink,
body.brand-v16-forum a.menuelink:visited,
body.brand-v16-forum a.menuelink:active,
body.brand-v16-forum #topnav a,
body.brand-v16-forum #topnav a:visited,
body.brand-v16-forum #topnav a:active {
color: var(--sgv16f-text) !important;
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 700;
}
/* Kopfbereich. Gelb wie der Header der Hauptseite - moeglich, weil das Logo ein
einfarbiges, inline eingebettetes SVG ist (statt eines zweifarbigen Bild-Logos),
dessen Fuellfarbe wir selbst steuern. */
body.brand-v16-forum .sgv16f-header {
background: var(--sgv16f-yellow);
border-left: 0;
border-right: 0;
border-bottom: 0;
}
/* Farblich mit dem gelben Header vereinheitlicht: kein dunkler Kasten mehr,
stattdessen ein sauberes weisses Feld mit Rahmen/Fokus-Ring in derselben
dunklen Ink-Farbe wie Logo und Zoom-Buttons daneben. */
body.brand-v16-forum .searchbox {
background-color: transparent;
}
/* #search_top (ID) statt nur .searchbox input, damit das spaeter im Stylesheet
folgende generische "input[type=text]"-Regel (Formulare-Abschnitt, gleiche
Klassen-Spezifitaet, aber spaeter -> gewinnt sonst) nicht die weisse Box
wieder auf die dunkle Theme-Oberflaeche zurueckdreht. */
body.brand-v16-forum .searchbox #search_top {
background: #FFFFFF;
color: var(--sgv16f-yellow-ink);
border: 1px solid var(--sgv16f-yellow-ink);
border-radius: 0;
}
body.brand-v16-forum .searchbox #search_top:focus {
color: var(--sgv16f-yellow-ink) !important;
outline: 2px solid var(--sgv16f-yellow-ink);
outline-offset: 1px;
}
/* Schriftzug-Logo: inline-SVG, Fuellfarbe auf die Header-Ink-Farbe gesetzt. */
body.brand-v16-forum .sgv16f-logobox {
flex: 0 0 auto;
}
/* Groesse 1:1 wie die Hauptseite (.site-header .logo in deren brand-v16.css):
feste 40px Hoehe, aber auf schmalen Viewports ueber max-width proportional
verkleinert - vorher blieb der Schriftzug auf Mobile bei voller Groesse. */
body.brand-v16-forum .sgv16f-wordmark {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 40px;
max-width: min(calc(100vw - 170px), 360px);
}
body.brand-v16-forum .sgv16f-wordmark svg {
display: block;
height: 100%;
width: auto;
max-width: 100%;
}
body.brand-v16-forum .sgv16f-wordmark svg path {
fill: var(--sgv16f-yellow-ink);
}
body.brand-v16-forum .sgv16f-claim {
font-family: "Atkinson Hyperlegible", sans-serif;
font-weight: bolder;
font-size: 1rem;
color: var(--sgv16f-yellow-ink);
margin-top: .15rem;
text-align: center;
}
/* Nutzer-/Kontoleiste (ehem. #headtop) */
body.brand-v16-forum .sgv16f-utility-nav {
background-color: var(--sgv16f-surface-2);
border-left: 0;
border-right: 0;
font-family: "Atkinson Hyperlegible", sans-serif;
}
/* Login/Registrieren (und die linke Leiste) waren im Original mit 0.8em auf
Basis von 12px verschwindend klein (~9.6px). Deutlich groesser gesetzt. */
body.brand-v16-forum .sgv16f-utility-left,
body.brand-v16-forum .sgv16f-utility-right {
font-size: 1.05rem;
}
/* Sub-Navigation (Kategorien) - gemeinsame Regel fuer Kopf- UND Fussbereich,
beide tragen die Klasse .sgv16f-catnav (ehem. getrennt #topnav/#bottomnav
mit fast identischem CSS). */
body.brand-v16-forum .sgv16f-catnav {
background: var(--sgv16f-surface);
border-left: 0;
border-right: 0;
border-top: 1px solid var(--sgv16f-line);
border-bottom: 1px solid var(--sgv16f-line);
color: var(--sgv16f-text-2);
}
body.brand-v16-forum .sgv16f-catnav--footer a {
color: var(--sgv16f-text) !important;
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 700;
}
body.brand-v16-forum #headerbox {
background: var(--sgv16f-surface);
border-left: 0;
border-right: 0;
color: var(--sgv16f-text);
/* Original hatte margin-bottom:0 - #content (Thread-Liste + "letzte
Eintraege"-Sidebar) begann direkt danach mit nur 20px eigenem Padding.
Mehr Luft zum Forumsbild darueber. */
margin-bottom: 2rem;
}
/* Inhaltsbereich */
body.brand-v16-forum #content,
body.brand-v16-forum #content_noheader {
background: var(--sgv16f-bg);
border-left: 0;
border-right: 0;
color: var(--sgv16f-text-2);
}
body.brand-v16-forum #content .xsmall,
body.brand-v16-forum #content .small,
body.brand-v16-forum #content .locked {
color: var(--sgv16f-text-3);
}
/* Fussbereich (ehem. #bottom) */
body.brand-v16-forum .sgv16f-footer {
background: var(--sgv16f-surface-2);
border-left: 0;
border-right: 0;
border-bottom: 0;
color: var(--sgv16f-text-2);
}
/* ==========================================================================
Stufe 2: Thread-/Post-Listen, Sidebar-Box, Formulare, Sortier-/Kategorieleiste
+ Kontrast-Audit: alle Textfarben, die auf den neuen dunklen Flaechen
sonst dunkel-auf-dunkel waeren, sind hier explizit aufgehellt.
Post-Karten (div.ct-posting) behalten bewusst ihren hellen Hintergrund,
weil historische Beitraege teils fest codierte dunkle Schriftfarben aus
BBCode enthalten - nur so bleibt jeder alte Beitrag sicher lesbar.
========================================================================== */
/* Datum ueber dem Thread-Titel (nur Standard-Listenansicht, Top-Level-Threads):
eigene Zeile, Akzentfarbe. Der Titel-Wrapper hat "display:inline" als
Inline-Style im Markup - Inline-Styles gewinnen immer gegen externes CSS,
daher hier zwingend !important, um ihn auf eine eigene Zeile zu bringen. */
body.brand-v16-forum .thread-date {
display: block;
color: var(--sgv16f-yellow-text);
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 700;
font-size: 0.85em;
}
body.brand-v16-forum .thread-post h2 {
display: block !important;
margin: 0.15em 0 0;
}
/* Thread-/Reply-Links (Index, Tabellenansicht, Suchergebnisse) */
body.brand-v16-forum a.thread,
body.brand-v16-forum a.thread:link,
body.brand-v16-forum a.thread-sticky,
body.brand-v16-forum a.thread-sticky:link,
body.brand-v16-forum a.thread-sticky-locked,
body.brand-v16-forum a.thread-sticky-locked:link,
body.brand-v16-forum a.thread-locked,
body.brand-v16-forum a.thread-locked:link,
body.brand-v16-forum a.thread100,
body.brand-v16-forum a.thread100:link {
color: var(--sgv16f-text);
font-family: "Atkinson Hyperlegible", sans-serif;
}
body.brand-v16-forum a.thread:visited,
body.brand-v16-forum a.thread-sticky:visited,
body.brand-v16-forum a.thread-sticky-locked:visited,
body.brand-v16-forum a.thread-locked:visited,
body.brand-v16-forum a.thread100:visited,
body.brand-v16-forum .visited {
color: var(--sgv16f-text-3) !important;
}
body.brand-v16-forum a.thread:focus,
body.brand-v16-forum a.thread:hover,
body.brand-v16-forum a.thread-sticky:focus,
body.brand-v16-forum a.thread-sticky:hover,
body.brand-v16-forum a.thread-sticky-locked:focus,
body.brand-v16-forum a.thread-sticky-locked:hover,
body.brand-v16-forum a.thread-locked:focus,
body.brand-v16-forum a.thread-locked:hover,
body.brand-v16-forum a.thread100:hover {
color: var(--sgv16f-yellow-text-hover);
}
/* "Neu"-Markierung: bekommt bewusst die Akzentfarbe, damit ungelesene Inhalte auffallen */
body.brand-v16-forum a.threadnew,
body.brand-v16-forum a.threadnew:link,
body.brand-v16-forum a.threadnew-sticky,
body.brand-v16-forum a.threadnew-sticky:link,
body.brand-v16-forum a.threadnew-sticky-locked,
body.brand-v16-forum a.threadnew-sticky-locked:link,
body.brand-v16-forum a.threadnew-locked,
body.brand-v16-forum a.threadnew-locked:link,
body.brand-v16-forum a.thread100new,
body.brand-v16-forum a.thread100new:link,
body.brand-v16-forum a.replynew,
body.brand-v16-forum a.replynew:link,
body.brand-v16-forum a.reply100new,
body.brand-v16-forum a.reply100new:link {
color: var(--sgv16f-red);
font-family: "Atkinson Hyperlegible", sans-serif;
}
/* Normale (bereits vorhandene, nicht neue) Antworten/Links: neutral statt aggressivem Rot als Default.
a.reply/a.reply:link haben im Original ein !important auf color - das muss hier mitgehen,
sonst gewinnt weiterhin das alte #cc0000. */
body.brand-v16-forum a.reply,
body.brand-v16-forum a.reply:link {
color: var(--sgv16f-text-2) !important;
}
body.brand-v16-forum a.reply100,
body.brand-v16-forum a.reply100:link,
body.brand-v16-forum a.internal,
body.brand-v16-forum a.internal:link {
color: var(--sgv16f-text-2);
}
/* Suchergebnisse / "letzte Beitraege" (mode=lastpostings): ungelesen = Signalrot
wie .threadnew, gelesen bekommt die Klasse .visited (-> --sgv16f-text-3, oben). */
body.brand-v16-forum a.thread-search,
body.brand-v16-forum a.thread-search:link,
body.brand-v16-forum a.reply-search,
body.brand-v16-forum a.reply-search:link {
color: var(--sgv16f-red);
font-weight: 700;
}
body.brand-v16-forum a.thread-search:hover,
body.brand-v16-forum a.reply-search:hover {
color: var(--sgv16f-red-hover);
}
body.brand-v16-forum a.threadnew:visited,
body.brand-v16-forum a.threadnew-sticky:visited,
body.brand-v16-forum a.threadnew-sticky-locked:visited,
body.brand-v16-forum a.threadnew-locked:visited,
body.brand-v16-forum a.thread100new:visited,
body.brand-v16-forum a.reply:visited,
body.brand-v16-forum a.replynew:visited,
body.brand-v16-forum a.reply100:visited,
body.brand-v16-forum a.reply100new:visited,
body.brand-v16-forum a.thread-search:visited,
body.brand-v16-forum a.reply-search:visited {
color: var(--sgv16f-text-3);
}
body.brand-v16-forum a.threadnew:focus,
body.brand-v16-forum a.threadnew:hover,
body.brand-v16-forum a.threadnew-sticky:focus,
body.brand-v16-forum a.threadnew-sticky:hover,
body.brand-v16-forum a.threadnew-sticky-locked:focus,
body.brand-v16-forum a.threadnew-sticky-locked:hover,
body.brand-v16-forum a.threadnew-locked:focus,
body.brand-v16-forum a.threadnew-locked:hover,
body.brand-v16-forum a.thread100new:hover,
body.brand-v16-forum a.replynew:focus,
body.brand-v16-forum a.replynew:hover,
body.brand-v16-forum a.reply100new:hover {
color: var(--sgv16f-red-hover);
}
body.brand-v16-forum a.reply:focus,
body.brand-v16-forum a.reply:hover,
body.brand-v16-forum a.reply100:hover,
body.brand-v16-forum a.internal:hover {
color: var(--sgv16f-yellow-text-hover);
}
body.brand-v16-forum a.read,
body.brand-v16-forum a.read:link,
body.brand-v16-forum a.read:visited,
body.brand-v16-forum #latest-postings li a span.read {
color: var(--sgv16f-text-3) !important;
}
body.brand-v16-forum a.read:focus,
body.brand-v16-forum a.read:hover {
color: var(--sgv16f-yellow-text-hover) !important;
}
/* Kategorie-Labels */
body.brand-v16-forum .category,
body.brand-v16-forum .category-b,
body.brand-v16-forum .category-regusers-b,
body.brand-v16-forum .category-adminmod-b,
body.brand-v16-forum ul.thread li .replies {
color: var(--sgv16f-text-3);
}
body.brand-v16-forum .category-regusers,
body.brand-v16-forum .category-adminmod {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text-3);
}
/* Vorschau-Box im Posting-Formular */
body.brand-v16-forum div.preview {
color: var(--sgv16f-text);
}
/* Sidebar-Box: letzte Eintraege / Tag-Cloud / Mod-Menue / Online-Nutzer.
style.css setzt auf jedes Widget einzeln "margin:0 0 20px 20px" (Relikt aus
der alten schmalen Float-Sidebar) - dadurch war der Abstand nur links und
unten vorhanden, rechts/oben bei 0. Hier auf reinen Bottom-Abstand
reduziert, das horizontale Insets uebernimmt stattdessen einheitlich das
Padding auf #sidebar selbst (siehe Grid-Abschnitt weiter unten) - dieselbe
Systematik wie bei .sgv16f-thread-stream, damit beide Spalten gleich
wirken. */
body.brand-v16-forum #latest-postings,
body.brand-v16-forum #tagcloud,
body.brand-v16-forum #modmenu,
body.brand-v16-forum #usersonline,
body.brand-v16-forum #bottombar #sidebarcontent div {
background: var(--sgv16f-surface);
border: 1px solid var(--sgv16f-surface-2);
margin: 0 0 1rem;
/* style.css setzt #latest-postings/#tagcloud/#modmenu auf feste 13em (~233px) -
dadurch blieb rechts in der 300px-Sidebar-Spalte Freiraum. Box fuellt jetzt
die volle Spaltenbreite, damit sie buendig mit der Kategorie-Nav abschliesst. */
width: auto;
box-sizing: border-box;
}
body.brand-v16-forum #latest-postings h3,
body.brand-v16-forum #tagcloud h3,
body.brand-v16-forum #modmenu h3,
body.brand-v16-forum #usersonline h3,
body.brand-v16-forum #bottombar h3 {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-yellow-text);
font-family: "Barlow Semi Condensed", sans-serif;
border: 0;
}
body.brand-v16-forum #usersonline p,
body.brand-v16-forum #tagcloud p {
color: var(--sgv16f-text-2);
}
body.brand-v16-forum #tagcloud strong {
color: var(--sgv16f-yellow-text);
}
body.brand-v16-forum #latest-postings li a {
color: var(--sgv16f-text-3);
}
body.brand-v16-forum #latest-postings li a:hover {
background: var(--sgv16f-surface-2);
}
body.brand-v16-forum #latest-postings li a span,
body.brand-v16-forum #latest-postings li a .entry-title {
color: var(--sgv16f-text);
}
body.brand-v16-forum #latest-postings li a:visited span,
body.brand-v16-forum #latest-postings li a:visited .entry-title,
body.brand-v16-forum #latest-postings li a.read .entry-title {
color: var(--sgv16f-text-3);
}
body.brand-v16-forum #latest-postings li a .entry-date,
body.brand-v16-forum #latest-postings li a.read .entry-date {
color: var(--sgv16f-text-3);
}
body.brand-v16-forum #bottombar .latestposts a:visited {
color: var(--sgv16f-text-3);
}
/* Tabellenansicht (Threadliste) + Formulare, beide nutzen table.normaltab */
body.brand-v16-forum table.normaltab {
background: var(--sgv16f-bg);
border: 1px solid var(--sgv16f-surface-2);
}
body.brand-v16-forum table.normaltab th {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text);
border-bottom: 2px solid var(--sgv16f-line);
font-family: "Barlow Semi Condensed", sans-serif;
}
body.brand-v16-forum table.normaltab td,
body.brand-v16-forum table.normaltab tr.a td,
body.brand-v16-forum table.normaltab td.d {
background: var(--sgv16f-bg);
color: var(--sgv16f-text-2);
}
body.brand-v16-forum table.normaltab tr.b td {
background: var(--sgv16f-surface);
color: var(--sgv16f-text-2);
}
body.brand-v16-forum table.normaltab td.c {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text-2);
}
body.brand-v16-forum table.normaltab tr.drag td {
background: var(--sgv16f-surface-2);
}
/* Seitennummerierung */
body.brand-v16-forum ul.pagination a,
body.brand-v16-forum ul.pagination span {
background: var(--sgv16f-surface-2);
border: 1px solid var(--sgv16f-surface-2);
color: var(--sgv16f-text);
}
body.brand-v16-forum ul.pagination a:hover {
background: var(--sgv16f-surface);
border-color: var(--sgv16f-yellow);
color: var(--sgv16f-text);
}
body.brand-v16-forum ul.pagination .current {
background: var(--sgv16f-yellow);
border-color: var(--sgv16f-yellow);
color: var(--sgv16f-yellow-ink);
}
/* Sortier-/Kategorieleiste (#topnav rechts: Refresh, Sortierung, Ansicht, Kategorie-Auswahl) */
body.brand-v16-forum #topnav select,
body.brand-v16-forum #subnav select {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text);
border: 1px solid var(--sgv16f-surface-2);
}
/* Formulare: Eingabefelder, Auswahllisten, Buttons (Login, Registrierung, Posting, Profil) */
body.brand-v16-forum input[type="text"],
body.brand-v16-forum input[type="password"],
body.brand-v16-forum input[type="email"],
body.brand-v16-forum input[type="search"],
body.brand-v16-forum input[type="number"],
body.brand-v16-forum input:not([type]),
body.brand-v16-forum textarea,
body.brand-v16-forum select {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text);
border: 1px solid var(--sgv16f-surface-2);
border-radius: 0;
}
/* Native Select-Widgets ignorieren teils background-color, solange appearance:auto aktiv ist.
Der Pfeil braucht je nach Modus einen dunklen bzw. hellen Fill - passend zur Textfarbe. */
body.brand-v16-forum select {
-webkit-appearance: none;
appearance: none;
padding-right: 1.6em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23121212' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .4em center;
background-size: .6em;
}
@media (prefers-color-scheme: dark) {
body.brand-v16-forum select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23F5F5F5' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
}
}
body.brand-v16-forum input[type="text"]:focus,
body.brand-v16-forum input[type="password"]:focus,
body.brand-v16-forum input[type="email"]:focus,
body.brand-v16-forum input[type="search"]:focus,
body.brand-v16-forum input[type="number"]:focus,
body.brand-v16-forum input:not([type]):focus,
body.brand-v16-forum textarea:focus,
body.brand-v16-forum select:focus,
body.brand-v16-forum #search_top:focus,
body.brand-v16-forum #topsearch #search-input:focus {
color: var(--sgv16f-text) !important;
outline: 2px solid var(--sgv16f-yellow);
outline-offset: 1px;
}
body.brand-v16-forum input[type="checkbox"],
body.brand-v16-forum input[type="radio"] {
accent-color: var(--sgv16f-yellow);
}
body.brand-v16-forum button,
body.brand-v16-forum input[type="submit"],
body.brand-v16-forum input[type="button"] {
background: var(--sgv16f-yellow);
color: var(--sgv16f-yellow-ink);
border: 1px solid var(--sgv16f-yellow);
border-radius: 0;
font-weight: 700;
}
body.brand-v16-forum button:hover,
body.brand-v16-forum input[type="submit"]:hover,
body.brand-v16-forum input[type="button"]:hover {
background: var(--sgv16f-yellow-hover);
border-color: var(--sgv16f-yellow-hover);
}
/* BBCode-Werkzeugleiste im Editor: eigene, dezente Darstellung statt Browser-Standard */
body.brand-v16-forum #bbcode-bar button {
background: var(--sgv16f-surface-2);
color: var(--sgv16f-text);
border: 1px solid var(--sgv16f-surface-2);
}
body.brand-v16-forum #bbcodebutton-link span {
color: var(--sgv16f-red);
}
/* Formular-Labels (Benachrichtigungs-/Profileinstellungen) */
body.brand-v16-forum label.active,
body.brand-v16-forum fieldset.active label,
body.brand-v16-forum fieldset.active input {
color: var(--sgv16f-text);
}
body.brand-v16-forum label.inactive,
body.brand-v16-forum label.inactive input,
body.brand-v16-forum fieldset.inactive label,
body.brand-v16-forum fieldset.inactive input {
color: var(--sgv16f-text-3) !important;
}
/* Post-Karten: bewusst hell, siehe Kommentar am Blockanfang. Nur Rahmenfarbe ans Theme angleichen. */
body.brand-v16-forum div.ct-posting {
border-left-color: var(--sgv16f-yellow);
}
/* Frei waehlbare Benutzernamenfarben (aus der Registrierung, z.B. "color: #000000"):
Die Farbe selbst kommt aus der Datenbank und ist nicht generell dunkel oder hell.
Ein kleines Skript (main.tpl) misst die tatsaechliche Helligkeit jeder Namensfarbe
und setzt die Klasse "sgv16f-dark-username" NUR, wenn die Farbe auf dunklem
Hintergrund unlesbar waere. Nur diese bekommen den hellen Hintergrund-Chip -
Namen mit ohnehin heller Farbe bleiben unveraendert ohne Chip. */
body.brand-v16-forum .sgv16f-dark-username {
background: var(--sgv16f-text);
padding: 0 .3em;
border-radius: 0;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* ==========================================================================
Schrift-Vereinheitlichung: nur die zwei Fonts, die auch die Hauptseite
verwendet (Atkinson Hyperlegible fuer Fliesstext/UI, Barlow Semi Condensed
fuer Ueberschriften/Labels). style.css setzt an mehreren Stellen explizit
verdana/Arial/Helvetica/Courier New, was sonst die Vererbung vom
body-Font unterbricht - hier einzeln auf die zwei Fonts zurueckgefuehrt.
========================================================================== */
body.brand-v16-forum table.normaltab td.a,
body.brand-v16-forum table.normaltab td.b,
body.brand-v16-forum table.normaltab td.c,
body.brand-v16-forum table.normaltab td.d,
body.brand-v16-forum #search_top,
body.brand-v16-forum input.small,
body.brand-v16-forum select.small,
body.brand-v16-forum #topsearch #search-input,
body.brand-v16-forum .newsframe,
body.brand-v16-forum .newsframefett,
body.brand-v16-forum code,
body.brand-v16-forum code.monospace,
body.brand-v16-forum blockquote code,
body.brand-v16-forum #bbcodebutton-code span {
font-family: "Atkinson Hyperlegible", sans-serif;
}
/* SunEditor (Redaktions-/Adminbereich, mode=admin): eigenes Bundle (suneditor.css)
bleibt unveraendert, wird hier per Overlay statt Datei-Aenderung auf die
Hauptseiten-Fonts umgestellt. */
body.brand-v16-forum .sun-editor,
body.brand-v16-forum .sun-editor-editable {
font-family: "Atkinson Hyperlegible", sans-serif;
}
/* News-Box ("Aktuelle Artikel bei schwatzgelb.de"): Standardschrift etwas
groesser als das Original (12px/11px). Die Linkfarbe im Newsframe-Titel
ist im Light Mode schwarz statt gelb - im Dark Mode bleibt sie gelb wie
der globale Link-Standard (Ueberschreibung in der @media-Regel oben). */
body.brand-v16-forum .newsframe {
font-size: 14px;
}
body.brand-v16-forum .newsframefett {
font-size: 13px;
}
body.brand-v16-forum .newsframe a {
color: var(--sgv16f-text);
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 700;
}
body.brand-v16-forum .sgv16f-headerbox-news-title {
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 .5rem;
}
@media (prefers-color-scheme: dark) {
body.brand-v16-forum .newsframe a {
color: var(--sgv16f-yellow);
}
}
/* News-Box (#headerbox > .sgv16f-headerbox-inner): Bild- und Textspalte waren
im Markup frueher per Inline-Style "width:50%; float:left/right" fest
gesetzt (jetzt sgv16f-headerbox-media/-news).
display:flex steckt bewusst in einer eigenen @media-Regel (min-width:961px):
style.css blendet .headerbox (per Klasse, die auf demselben Element wie
.sgv16f-headerbox-inner sitzt) unter 960px komplett aus (display:none), und
unsere Selektor-Spezifitaet waere sonst staerker als die des Originals und
wuerde das Ausblenden auf Mobilgeraeten kaputt machen. */
body.brand-v16-forum .sgv16f-headerbox-inner {
padding-top: .95rem;
}
@media (min-width: 961px) {
body.brand-v16-forum .sgv16f-headerbox-inner {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
}
}
/* Bildspalte: fester 16:9-Rahmen, halbe verfuegbare Breite. Das Quellbild wird
nach HOEHE skaliert und mittig gesetzt (object-fit: contain) - passt das
Seitenverhaeltnis nicht, entsteht links/rechts (bzw. oben/unten) Freiraum in
der Flaechenfarbe statt eines Beschnitts. PHP liefert . */
body.brand-v16-forum .sgv16f-headerbox-media {
flex: 0 0 50%;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--sgv16f-surface);
}
body.brand-v16-forum .sgv16f-headerbox-media-inner,
body.brand-v16-forum .sgv16f-headerbox-media a.randomimage,
body.brand-v16-forum .sgv16f-headerbox-media amp-img {
display: block;
width: 100%;
height: 100%;
}
body.brand-v16-forum .sgv16f-headerbox-media img,
body.brand-v16-forum .sgv16f-headerbox-media amp-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
body.brand-v16-forum .sgv16f-headerbox-news {
flex: 1 1 260px;
min-width: 0;
text-align: left;
}
/* ==========================================================================
Grid-Layout: #content (Thread-Liste/Tabelle + Sidebar), mobile-first.
Basis (Mobile, keine Media Query): eine Spalte, alle Kinder untereinander -
identisch zur bisherigen Darstellung. #sidebar/#bottombar werden unterhalb
769px weiterhin von style.css per display:none ausgeblendet (unveraendert).
Ab 769px (genau der Breakpoint, ab dem style.css die Sidebar ueberhaupt
erst einblendet) wird daraus ein echtes 2-Spalten-Grid statt des alten
Floats - sowohl in der Listenansicht (#sidebar, index.inc.tpl) als auch in
der Tabellenansicht (#bottombar, index_table.inc.tpl - dort vorher immer
volle Breite UNTER der Tabelle statt daneben). */
body.brand-v16-forum #content:has(> #sidebar),
body.brand-v16-forum #content:has(> #bottombar) {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
@media (min-width: 769px) {
body.brand-v16-forum #content:has(> #sidebar),
body.brand-v16-forum #content:has(> #bottombar) {
grid-template-columns: minmax(0, 1fr) 300px;
align-items: start;
column-gap: 2rem;
}
/* top:0 (statt z.B. 1rem): Chrome wendet den sticky top-Offset bei
Grid-Items schon in der Ausgangsposition an (nicht erst beim tatsaechlichen
"Kleben" ab dem Scroll-Schwellwert) - jeder Wert > 0 verschiebt die Sidebar
dadurch bereits beim Laden sichtbar nach unten und sie startet nicht mehr
auf gleicher Hoehe wie .sgv16f-thread-stream in Spalte 1. */
body.brand-v16-forum #content:has(> #sidebar) > #sidebar,
body.brand-v16-forum #content:has(> #bottombar) > #bottombar {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 0;
margin: 0;
}
body.brand-v16-forum #content:has(> #sidebar) > :not(#sidebar),
body.brand-v16-forum #content:has(> #bottombar) > :not(#bottombar) {
grid-column: 1;
}
}
body.brand-v16-forum .sgv16f-thread-stream {
padding: 1rem 2px;
}
/* Lineare / hierarchische Thread-Ansicht nutzt .ct-thread statt .sgv16f-thread-stream */
body.brand-v16-forum .ct-thread {
padding: 0 2px;
}
/* Vertikales Innen-Padding wie .sgv16f-thread-stream. Horizontal 0, damit die
Spalten buendig mit Header/Nav/Content-Kante abschliessen. */
body.brand-v16-forum #sidebar,
body.brand-v16-forum #bottombar {
box-sizing: border-box;
padding: 1rem 0;
}
/* Jeder Thread als eigene Flaeche auf dem Grid */
body.brand-v16-forum .thread-post {
background: var(--sgv16f-surface);
}
/* ==========================================================================
Stufe 3: Header-/Nav-Redesign, mobile-first, ohne separates Mobile-Duplikat.
Ersetzt den bisherigen .mobilenav-Block + das getrennte Desktop-Header/
#headtop/#topnav-Trio (float/position:absolute) durch EINE Struktur: