Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
h2, h3 {
margin-block-start: 0.5em;
}
/* Warning-Box: orange, kompatibel mit Light & Dark Mode */
.mw-message-box-warning {
border: 1px solid #c85000;
border-left: 4px solid #c85000;
background-color: color-mix(in srgb, #c85000 12%, transparent);
color: inherit;
padding: 0.5em 1em;
border-radius: 4px;
}
/* H2 vor dem Übersichts-Grid: Abstand nach unten reduzieren */
h2.ueberschrift-zentriert {
margin-bottom: 0.25em;
}
/* Zentrierte Überschrift */
.ueberschrift-zentriert,
h1.ueberschrift-zentriert,
h2.ueberschrift-zentriert,
h3.ueberschrift-zentriert,
h4.ueberschrift-zentriert,
h5.ueberschrift-zentriert {
text-align: center !important;
}
/* Abstand über Hinweis- und Warnungsboxen */
.mw-message-box {
margin-top: 0.75em !important;
}
/* ═══════════════════════════════════════════════
Mobile-Skalierung für alle Wiki-Extensions
═══════════════════════════════════════════════ */
/* ExternalImage: nie breiter als Container, Höhe proportional */
img[style*="width:"] {
max-width: 100%;
}
@media screen and (max-width: 768px) {
img[style*="width:"]:not(.ext-slideshow-slide img):not(.ext-gallery-thumb img) {
width: 100% !important;
height: auto !important;
}
}
/* ExternalSlideshow: Mobile */
.ext-slideshow-wrapper {
max-width: 100%;
overflow: hidden;
}
@media screen and (max-width: 768px) {
.ext-slideshow-wrapper {
width: 100%;
}
.ext-slideshow {
width: 100% !important;
display: block !important;
}
.ext-slideshow-slide img {
width: 100% !important;
height: 220px !important;
object-fit: cover !important;
border-radius: 0 !important;
}
}
@media screen and (max-width: 480px) {
.ext-slideshow-slide img {
height: 160px !important;
}
}
/* Übersichts-Grid (Hauptseite) */
.wiki-overview-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0 10px;
align-items: start;
}
.wiki-overview-col {
min-width: 0;
}
@media screen and (max-width: 1000px) {
.wiki-overview-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 640px) {
.wiki-overview-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 400px) {
.wiki-overview-grid {
grid-template-columns: 1fr;
}
}
/* ExternalGallery: responsive Spalten */
@media screen and (max-width: 900px) {
.ext-gallery {
grid-template-columns: repeat(3, 1fr) !important;
}
.ext-gallery-item,
.ext-gallery-thumb {
width: 100% !important;
}
}
@media screen and (max-width: 600px) {
.ext-gallery {
grid-template-columns: repeat(2, 1fr) !important;
}
.ext-gallery-item,
.ext-gallery-thumb {
width: 100% !important;
}
.ext-gallery-thumb img {
width: 100% !important;
height: 80px !important;
}
}
@media screen and (max-width: 360px) {
.ext-gallery {
grid-template-columns: 1fr !important;
}
}
/* Kacheltabellen: responsive (tile-grid) */
.tile-grid {
width: 100%;
border-collapse: separate;
border-spacing: 6px;
}
.tile-grid td {
width: 33%;
}
@media screen and (max-width: 700px) {
.tile-grid,
.tile-grid tbody,
.tile-grid tr {
display: block;
width: 100%;
}
.tile-grid td {
display: inline-block;
width: calc(50% - 10px);
box-sizing: border-box;
vertical-align: top;
margin: 3px;
}
}
@media screen and (max-width: 420px) {
.tile-grid td {
display: block;
width: calc(100% - 6px);
margin: 3px;
}
}
/* Kacheltabellen: 4-spaltig mit 2-Spalten-Umbruch auf Mobile (tile-grid-4) */
.tile-grid-4 {
width: 100%;
border-collapse: separate;
border-spacing: 6px;
}
@media screen and (max-width: 700px) {
.tile-grid-4,
.tile-grid-4 tbody,
.tile-grid-4 tr {
display: block;
width: 100%;
}
.tile-grid-4 td {
display: inline-block;
width: calc(50% - 10px) !important;
box-sizing: border-box;
vertical-align: top;
margin: 3px;
}
}
@media screen and (max-width: 420px) {
.tile-grid-4 td {
display: inline-block;
width: calc(50% - 10px) !important;
}
}
/* Kacheltabellen: 5-spaltig (tile-grid-5) */
.tile-grid-5 {
width: 100%;
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
}
.tile-grid-5 td {
width: 20%;
}
@media screen and (max-width: 700px) {
.tile-grid-5,
.tile-grid-5 tbody,
.tile-grid-5 tr {
display: block;
width: 100%;
}
.tile-grid-5 td {
display: inline-block;
width: calc(50% - 10px);
box-sizing: border-box;
vertical-align: top;
margin: 3px;
}
}
@media screen and (max-width: 420px) {
.tile-grid-5 td {
display: block;
width: calc(100% - 6px);
margin: 3px;
}
}
/* Loot Crate Tabellen: Mobile */
@media screen and (max-width: 600px) {
.loot-table thead,
.loot-table th {
display: none;
}
.loot-table,
.loot-table tbody,
.loot-table tr {
display: block;
width: 100%;
}
.loot-table td {
display: block;
width: 100% !important;
box-sizing: border-box;
padding: 6px 10px;
border-top: 2px solid transparent;
}
.loot-table td[style*="#939393"] { border-top-color: #939393; }
.loot-table td[style*="#4caed8"] { border-top-color: #4caed8; }
.loot-table td[style*="#2539a5"] { border-top-color: #2539a5; }
.loot-table td[style*="#6c05cd"] { border-top-color: #6c05cd; }
.loot-table td[style*="#a60b0b"] { border-top-color: #a60b0b; }
.loot-table td[style*="#dca40d"] { border-top-color: #dca40d; }
.loot-table td[style*="#939393"]::before { content: "Gewöhnlich"; display: block; font-weight: 500; font-size: 0.85em; color: #939393; margin-bottom: 4px; }
.loot-table td[style*="#4caed8"]::before { content: "Ungewöhnlich"; display: block; font-weight: 500; font-size: 0.85em; color: #4caed8; margin-bottom: 4px; }
.loot-table td[style*="#2539a5"]::before { content: "Selten"; display: block; font-weight: 500; font-size: 0.85em; color: #2539a5; margin-bottom: 4px; }
.loot-table td[style*="#6c05cd"]::before { content: "Sehr selten"; display: block; font-weight: 500; font-size: 0.85em; color: #6c05cd; margin-bottom: 4px; }
.loot-table td[style*="#a60b0b"]::before { content: "Episch"; display: block; font-weight: 500; font-size: 0.85em; color: #a60b0b; margin-bottom: 4px; }
.loot-table td[style*="#dca40d"]::before { content: "Legendär"; display: block; font-weight: 500; font-size: 0.85em; color: #dca40d; margin-bottom: 4px; }
}