Dirk: CSS für Beschreibungskarten und Hero-Tags ergänzen (20260604-215230)

2026-06-04T19:53:46Z

CSS für Beschreibungskarten und Hero-Tags ergänzen (20260604-215230)

@@ Zeile 350: / Zeile 350: @@
 .submers-image-card {
    align-self: start;
+}

Dirk: Galerie-Karten: unnötige Höhenstreckung vermeiden (20260604-212651)

2026-06-04T19:26:52Z

Galerie-Karten: unnötige Höhenstreckung vermeiden (20260604-212651)

@@ Zeile 342: / Zeile 342: @@
 .submers-art-prod .submers-card ul.gallery {
    margin-top: 12px;
+}

Dirk: Artseiten-Styles für alte Vorlage:Test ergänzt (20260604-204021)

2026-06-04T18:40:23Z

Artseiten-Styles für alte Vorlage:Test ergänzt (20260604-204021)

@@ Zeile 327: / Zeile 327: @@
    padding: 12px 14px;
    margin: 18px 0;
+}

Dirk: Produktive Artseiten-Styles Version A angelegt (20260604-203500)

2026-06-04T18:36:25Z

Produktive Artseiten-Styles Version A angelegt (20260604-203500)

Neue Seite

/* Submers design prototypes: central shared styles for non-production demo pages */
.submers-demo-notice {
border: 1px solid #b7d8e3;
background: #eefaff;
color: #17404a;
border-radius: 12px;
padding: 12px 16px;
margin: 0 0 22px 0;
}
.submers-demo-notice strong { color: #075a69; }
.submers-art-page { color: #1e2f33; }
.submers-art-page * { box-sizing: border-box; }
.submers-art-page a { color: #08698b; }
.submers-art-hero {
border-radius: 22px;
background: linear-gradient(135deg, #073b4a 0%, #087a8e 52%, #18b97c 100%);
color: white;
padding: 28px;
margin: 12px 0 28px;
box-shadow: 0 16px 34px rgba(5,78,94,0.22);
overflow: hidden;
}
.submers-art-kicker {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b8f4ee;
font-weight: bold;
}
.submers-art-title {
font-size: 38px;
line-height: 1.05;
margin: 6px 0 3px;
font-weight: bold;
}
.submers-art-latin {
font-size: 22px;
font-style: italic;
color: #dafaf6;
}
.submers-badges { margin-top: 14px; }
.submers-badge {
display: inline-block;
border-radius: 999px;
padding: 5px 10px;
margin: 3px 5px 3px 0;
background: #1a8490;
border: 1px solid #7bd3d7;
color: #fff;
font-size: 12px;
font-weight: bold;
}
.submers-card {
background: white;
border: 1px solid #c9e2e8;
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,45,58,0.08);
overflow: hidden;
}
.submers-card-pad { padding: 20px; }
.submers-section-title {
margin: 30px 0 14px;
font-size: 24px;
color: #12343b;
border-bottom: 3px solid #bfe8e8;
padding-bottom: 7px;
}
.submers-grid-two {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
gap: 22px;
align-items: stretch;
}
.submers-grid-three {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
}
.submers-fact-list {
display: grid;
grid-template-columns: 120px 1fr;
gap: 8px 12px;
margin: 0;
}
.submers-fact-list dt {
font-weight: bold;
color: #075a69;
}
.submers-fact-list dd { margin: 0; color: #243d43; }
.submers-quickfacts {
display: grid;
grid-template-columns: repeat(5, minmax(0,1fr));
gap: 10px;
margin: 18px 0;
}
.submers-quickfact {
border-radius: 14px;
background: #f0fbf7;
border: 1px solid #bde9d5;
padding: 11px 12px;
}
.submers-quickfact span {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .06em;
color: #47736d;
font-weight: bold;
}
.submers-quickfact strong {
display: block;
margin-top: 3px;
color: #12343b;
}
.submers-photo-pair {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 18px;
margin: 24px 0;
}
.submers-photo-card {
border: 1px solid #c9d9dd;
border-radius: 16px;
background: #fff;
box-shadow: 0 8px 22px rgba(0,45,58,0.08);
overflow: hidden;
}
.submers-photo-card .thumb,
.submers-photo-card .thumbinner {
border: 0 !important;
background: transparent !important;
margin: 0 !important;
width: 100% !important;
}
.submers-photo-card img {
width: 100%;
height: auto;
display: block;
}
.submers-photo-caption {
padding: 10px 12px;
font-size: 14px;
color: #26474f;
background: #f7fbfc;
}
.submers-text-card {
padding: 18px 20px;
border-left: 5px solid #14a8b9;
background: #fbfefe;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
margin-bottom: 14px;
}
.submers-text-card h3 { margin: 0 0 8px; color: #075a69; }
.submers-text-card p { margin: 0; line-height: 1.62; }
.submers-gallery-modern {
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 14px;
margin-top: 12px;
}
.submers-gallery-modern .gallerybox,
.submers-gallery-modern .thumb,
.submers-gallery-modern .thumbinner { width: auto !important; }
.submers-gallery-modern .gallerybox {
border-radius: 14px;
background: #fff;
border: 1px solid #d2e3e7;
padding: 8px !important;
box-shadow: 0 4px 14px rgba(0,45,58,0.06);
}
.submers-gallery-modern img { border-radius: 10px; }
.submers-taxo-compact table,
.submers-taxo-compact .wikitable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border-radius: 14px;
border: 1px solid #c6dde3;
background: white;
}
.submers-taxo-compact th {
background: #e9f8fa;
color: #064d5c;
}
.submers-taxo-compact td,
.submers-taxo-compact th {
padding: 9px 11px;
border-color: #d9e9ed;
}
.submers-layout-compact {
display: grid;
grid-template-columns: 310px minmax(0,1fr);
gap: 22px;
}
.submers-sidebox { align-self: start; }
.submers-sidebox .submers-photo-card { margin-bottom: 14px; }
.submers-article-copy {
font-size: 16px;
line-height: 1.68;
}
.submers-photo-hero {
position: relative;
min-height: 420px;
border-radius: 24px;
overflow: hidden;
background: #063947;
box-shadow: 0 18px 42px rgba(0,45,58,0.25);
margin-bottom: 26px;
}
.submers-photo-hero .thumb,
.submers-photo-hero .thumbinner {
border: 0 !important;
background: transparent !important;
margin: 0 !important;
width: 100% !important;
}
.submers-photo-hero img {
width: 100%;
height: auto;
display: block;
opacity: .82;
}
.submers-photo-hero-text {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 34px;
color: white;
background: #073b4a;
}
.submers-photo-hero-text h2 {
font-size: 42px;
margin: 0;
color: white;
}
.submers-photo-hero-text em { font-size: 24px; color: #d5fff8; }
.submers-muted-box {
border-radius: 16px;
background: #f5f8f9;
border: 1px solid #d9e4e7;
color: #465b61;
padding: 15px 17px;
}
@media (max-width: 900px) {
.submers-grid-two,
.submers-layout-compact,
.submers-photo-pair { grid-template-columns: 1fr; }
.submers-quickfacts { grid-template-columns: repeat(2,minmax(0,1fr)); }
.submers-gallery-modern { grid-template-columns: repeat(2,minmax(0,1fr)); }
.submers-art-title { font-size: 30px; }
}

/* Prototype patch: make MediaWiki galleries behave like cards inside demo pages. */
.submers-gallery-modern ul.gallery {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
}
.submers-gallery-modern li.gallerybox {
display: block !important;
width: auto !important;
margin: 0 !important;
border-radius: 14px;
background: #ffffff;
border: 1px solid #d2e3e7;
padding: 8px !important;
box-shadow: 0 4px 14px rgba(0,45,58,0.06);
}
.submers-gallery-modern li.gallerybox div.thumb {
width: auto !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
}
.submers-gallery-modern li.gallerybox div.gallerytext {
font-size: 13px;
color: #26474f;
padding-top: 6px;
}
@media (max-width: 900px) {
.submers-gallery-modern ul.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Prototype patch: controlled manual image-card grid. */
.submers-image-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin: 12px 0 24px 0;
}
.submers-image-card {
border-radius: 14px;
background: #ffffff;
border: 1px solid #d2e3e7;
padding: 8px;
box-shadow: 0 4px 14px rgba(0,45,58,0.06);
overflow: hidden;
}
.submers-image-card img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.submers-image-card .submers-photo-caption {
background: transparent;
padding: 8px 2px 2px 2px;
}
@media (max-width: 900px) {
.submers-image-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Production aliases for central Artseite template. */
.submers-art-prod { color: #1e2f33; }
.submers-art-prod * { box-sizing: border-box; }
.submers-art-prod a { color: #08698b; }
.submers-art-prod .mw-parser-output > p { line-height: 1.65; }
.submers-art-source-note {
border-radius: 14px;
background: #f5f8f9;
border: 1px solid #d9e4e7;
color: #465b61;
padding: 12px 14px;
margin: 18px 0;
}

Vorlage:Artseite/styles.css - Versionsgeschichte

Dirk: CSS für Beschreibungskarten und Hero-Tags ergänzen (20260604-215230)

Dirk: Galerie-Karten: unnötige Höhenstreckung vermeiden (20260604-212651)

Dirk: Artseiten-Styles für alte Vorlage:Test ergänzt (20260604-204021)

Dirk: Produktive Artseiten-Styles Version A angelegt (20260604-203500)