{{DISPLAYTITLE: Illustrations in German Translations of Mark Twain's Works}}
__NOTOC__
<html>
<div class="row">
<div class="large-12 columns">
<p><h1>Illustrations in German Translations of Mark Twain's Works</h1></p>

</div>
</div>

<div class="row">
<div class="large-12 columns">
<p><h4><a href="/Introduction">Introduction: About the Project</a></h4></p>
<p>This page outlines the scope and objectives of the project and provides guidance for navigating the collection, with explanations of abbreviations and tools used to examine the illustrations in ''Adventures of Huckleberry Finn''.</p>

<p><h4><a href="/Overview">Overview</a></h4></p>
<p>Exploration of the collection is made possible by way of the Overview page, which provides multiple methods for navigating the catalog. These include pre-set filters by edition, character, or chapter, as well as a fully sortable catalog of all illustrations and a comparison tool.</p>

<p><h4>Current Status and Progress</h4></p>
<p>At this stage, the illustrations from ''Adventures of Huckleberry Finn'' are available in the catalog. The original 1885 illustrated edition, featuring 174 drawings by E. W. Kemble, is complemented here by seven different sets of illustrations that accompanied German-language editions published between 1898 and 1944. All of these illustrations, together with Kemble’s original drawings, are accessible through this website.

In the future, illustrations from German translations of additional works by Mark Twain will be added to the collection.</p>

</div>
</div>
<div class="row">
<div class="large-12 columns">
<p><a href="/PrivacyPolicy">Privacy policy</a></p>
<p><a href="/About">About Illustrations in German Translations of Mark Twain's Works</a></p>
<p><a href="/Disclaimers">Disclaimers</a></p>

Powered by MediaWiki

</div>
</div>

</html>

Main Page

2026-02-23T20:20:18Z

Illus:

MediaWiki:Common.css

2026-02-23T20:19:39Z

Illus:

/* CSS placed here will be applied to all skins */
/* Importiere die DataTables und Swiper Styles */
@import url('https://unpkg.com/swiper/swiper-bundle.min.css');
@import url('https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css');
@import url('https://cdn.datatables.net/datetime/1.5.1/css/dataTables.dateTime.min.css');
@import url('https://cdn.datatables.net/searchbuilder/1.6.0/css/searchBuilder.dataTables.min.css');

.ausklapp-menublock {
border: 1px solid #ccc;
padding: 1em;
background-color: #F4F4F4;
max-width: 500px;
border-radius: 6px;
}

.ausklapp-button {
display: block;
width: 100%;
text-align: left;
margin: 0.5em 0;
padding: 0.5em;
background-color: #FFF2E6;
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}

/*.ausklapp-button:hover {
background-color: #005a9e;
}
*/

.ausklapp-button.sub {
background-color: #FFF2E6;
margin-left: 1em;
font-size: 75%;
}

.ausklapp-inhalt {
display: none;
margin-left: 1em;
}

.ausklapp-inhalt.sub {
margin-left: 2em;
}

.ausklapp-inhalt a {
display: block;
margin: 0.3em 0;
text-decoration: none;
color: #333333;
}

.ausklapp-inhalt a:hover {
text-decoration: underline;
}

/* Oberste Ebene (Hauptbuttons) */
.ausklapp-button {
color: #333333; /* Dunkelblau */
}

/* Unterpunkte (zweite Ebene) */
.ausklapp-button.sub {
color: #333333; /* etwas heller */
}

/* Links innerhalb der Unter-Unterpunkte */
.ausklapp-inhalt.sub a,
.link-entry {
color: #333333;
}

/* Linkpfeil-Symbole */
.link-icon {
color: #333333;
}

.ausklapp-button {
white-space: nowrap;
}

.ausklapp-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
}

.ausklapp-button .link-icon {
text-decoration: none;
font-size: 0.9em;
margin-left: auto;
color: #0059b3;
}

.ausklapp-menublock {
flex: 1; /* gleichmäßig verteilen */
/* alternativ: width: 50%; */
}

.ausklapp-menublock {
font-family: "Roboto", sans-serif;
}

/* Allgemeines Styling für die Tabelle */
/* #catalog {
/* width: 100%;
/* table-layout: auto !important; /* Flexibel für DataTables und schmalere Spalten */
/* border-collapse: collapse; /* Entfernt unnötige Ränder */
/*

/* Spaltenbreiten anpassen und Schmaler machen */
#catalog th, #catalog td {
padding: 1px 4px;
line-height: 1.2; /* kleinere Zeilenhöhe */
text-align: left; /* Standardtextausrichtung für alle Zellen */
}

#catalog th:nth-child(1), #catalog td:nth-child(1) {
width: 11%; /* Book */
}

#catalog th:nth-child(2), #catalog td:nth-child(2) {
width: 4%; /* Year */
text-align: center; /* Jahr zentrieren */
}

#catalog th:nth-child(3), #catalog td:nth-child(3) {
width: 7%; /* Illustrator */
}

#catalog th:nth-child(4), #catalog td:nth-child(4) {
width: 5%; /* Chpt in Orig */
text-align: center;
}

#catalog th:nth-child(5), #catalog td:nth-child(5) {
width: 5%; /* Chpt in this Ed. */
text-align: center;
}

#catalog th:nth-child(6), #catalog td:nth-child(6) {
width: 5%; /* Ill. in Chpt. */
text-align: center;
}

#catalog th:nth-child(7), #catalog td:nth-child(7) {
width: 12%; /* Illustration Title */
text-align: center;
}

#catalog th:nth-child(8), #catalog td:nth-child(8) {
width: 11%; /* Tags */
text-align: center;
}

#catalog th:nth-child(9), #catalog td:nth-child(9) {
width: 8%; /* ID */
}

/* Entferne horizontales Scrollen und passe das Design an */
#catalog_wrapper {
overflow-x: hidden; /* Kein horizontales Scrollen */
}

/* Optional: Passe den Abstand der Spalten an */
#catalog th, #catalog td {
padding: 1px 1px;
}

/* DataTables Filter-Box und Pagination nach oben verschieben */
#catalog_filter {
margin-bottom: -2px;
margin-top: -18px;
margin-right: 5px;
float: right;
}
#catalog_length {
float: left; /* Zeige X Einträge nach rechts verschieben */
}

#catalog_length select {
padding-right: 20px;
padding-left: 10px;
}

/* Verhindert, dass die DataTable das Layout stört */
.dataTables_wrapper {
width: 140%;
overflow: visible; /* Entfernt das äußere Scrollen */
}

/* Kompaktere Zeilen für DataTables */
#catalog.dataTable tbody td,
#catalog.dataTable thead th {
padding: 3px 8px !important;
line-height: 1.2 !important;
height: auto !important;
vertical-align: middle !important;
}

/* Eingabefelder in DataTables-Kopfzeile sauber einpassen */
#catalog thead input {
box-sizing: border-box; /* verhindert, dass padding + border die Größe aufblähen */
width: 100%; /* volle Breite der Zelle */
height: 100%; /* passt sich der Zellenhöhe an */
padding: 4px; /* kleiner Innenabstand */
margin: 0; /* verhindert vertikales Überlappen */
font-size: 13px; /* kleiner und lesbarer */
border: 1px solid #ccc; /* optisch passend zur Tabelle */
}

#image-hover-preview {
pointer-events: none;
}
#image-hover-preview img {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}

#galleryContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}

#galleryContainer img {
max-width: 200px;
margin: 10px;
cursor: pointer;
}

.mw-gallery-slideshow {
max-width: 600px;
margin: 0 auto;
}

.mw-gallery-slideshow .mw-gallery-slideshow-image img {
max-height: 400px;
object-fit: contain;
}

.slideshow-box {
flex: 1 1 45%; /* Flexibel, aber max. zwei pro Zeile */
min-width: 300px; /* Verhindert Schrumpfen */
max-width: 600px; /* Optional: sonst wird’s zu breit */
box-sizing: border-box;
}

.slideshow-box {
display: flex;
flex-direction: column;
align-items: center; /* Zentriert Inhalte (inkl. Überschrift) */
width: 320px; /* gleiche Breite wie Slideshow, anpassen falls nötig */
}

.slideshow-box h3 {
text-align: center;
margin-bottom: 0.5em;
font-size: 1.2em;
}

/* Comparison slide show boxes */

.slideshow-row {
display: flex;
flex-direction: row;
justify-content: center;
gap: 120px;
flex-wrap: nowrap; /* verhindert Umbruch */
}

.slideshow-box {
width: 48%; /* jeweils etwa die Hälfte */
min-width: 350px;
background-color: #f9f9f9;
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
}

.slideshow-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
height: 450px;
overflow: hidden;
}

.slideshow-container img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
transition: all 0.3s ease-in-out;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 8px;
}

.slideshow-container button {
background-color: #006699;
color: white;
border: none;
font-size: 24px;
padding: 10px 16px;
cursor: pointer;
border-radius: 6px;
}

.slideshow-container button:hover {
background-color: #004466;
}
.gallery-button-wrapper {
text-align: center;
margin-top: 15px;
}

.gallery-button-wrapper button {
background-color: #444;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
}

.gallery-button-wrapper button:hover {
background-color: #222;
}
.gallery-button-row {
display: flex;
justify-content: center;
align-items: center;
gap: 20px; /* Abstand zwischen den Buttons */
margin-top: 10px;
}

.gallery-button-row button {
background-color: #008CBA;
color: white;
padding: 10px 18px;
font-size: 16px;
border: none;
border-radius: 6px;
cursor: pointer;
min-width: 40px;
}

.gallery-button-row button:hover {
background-color: #222;
}

.slideshow-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* jetzt 3 Spalten */
gap: 20px;
}

/* Media Info Adjustments */
.mediainfo-box {
background:#f9f9f9;
border:1px solid #ddd;
padding:0.5em 0.8em;
border-radius:4px;
}

.mediainfo-tag {
background:#eee;
border-radius:3px;
padding:2px 6px;
margin-right:4px;
font-size:0.85em;
display:inline-block;
}
.references p {
margin: 0 0 0.5em 0;
padding-left: 1.5em;
text-indent: -1.5em;
line-height: 1.5;
color: #555555; /* helles Dunkelgrau */
}
.references a {
color: #555555;
text-decoration: underline; /* optional */
}

/* Chart-Container */
.chart-container {
width: 100%;
max-width: 900px; /* optional */
height: 600px; /* gewünschte Höhe */
margin: auto;
}
#lineChart {
width: 100% !important;
height: 100% !important;
}

/* Optional: Hover-Effekt für Linienpunkte */
.line-hover {
border-width: 3px;
}

.all-files-table img {
max-height: 100px;
width: auto;
}

.all-files-table td {
vertical-align: middle;
}

/* Allgemeines Styling für die Tabelle */
/* #catalog {
/* width: 100%;
/* table-layout: auto !important; /* Flexibel für DataTables und schmalere Spalten */
/* border-collapse: collapse; /* Entfernt unnötige Ränder */
/*

/* Spaltenbreiten anpassen und Schmaler machen */
#catalogDPL th, #catalogDPL td {
padding: 1px 4px;
line-height: 1.2; /* kleinere Zeilenhöhe */
text-align: left; /* Standardtextausrichtung für alle Zellen */
}

#catalogDPL th:nth-child(1), #catalogDPL td:nth-child(1) {
width: 11%; /* Book */
}

#catalogDPL th:nth-child(2), #catalogDPL td:nth-child(2) {
width: 4%; /* Year */
text-align: center; /* Jahr zentrieren */
}

#catalogDPL th:nth-child(3), #catalogDPL td:nth-child(3) {
width: 7%; /* Illustrator */
}

#catalogDPL th:nth-child(4), #catalogDPL td:nth-child(4) {
width: 5%; /* Chpt in Orig */
text-align: center;
}

#catalogDPL th:nth-child(5), #catalogDPL td:nth-child(5) {
width: 5%; /* Chpt in this Ed. */
text-align: center;
}

#catalogDPL th:nth-child(6), #catalogDPL td:nth-child(6) {
width: 5%; /* Ill. in Chpt. */
text-align: center;
}

#catalogDPL th:nth-child(7), #catalogDPL td:nth-child(7) {
width: 12%; /* Illustration Title */
text-align: center;
}

#catalogDPL th:nth-child(8), #catalogDPL td:nth-child(8) {
width: 11%; /* Tags */
text-align: center;
}

#catalogDPL th:nth-child(9), #catalogDPL td:nth-child(9) {
width: 8%; /* ID */
}

/* Entferne horizontales Scrollen und passe das Design an */
#catalogDPL_wrapper {
overflow-x: hidden; /* Kein horizontales Scrollen */
}

/* Optional: Passe den Abstand der Spalten an */
#catalogDPL th, #catalogDPL td {
padding: 1px 1px;
}

/* DataTables Filter-Box und Pagination nach oben verschieben */
#catalogDPL_filter {
margin-bottom: -2px;
margin-top: -18px;
margin-right: 5px;
float: right;
}
#catalogDPL_length {
float: left; /* Zeige X Einträge nach rechts verschieben */
}

#catalogDPL_length select {
padding-right: 20px;
padding-left: 10px;
}

/* Verhindert, dass die DataTable das Layout stört */
.dataTables_wrapper {
width: 140%;
overflow: visible; /* Entfernt das äußere Scrollen */
}

/* Kompaktere Zeilen für DataTables */
#catalogDPL.dataTable tbody td,
#catalogDPL.dataTable thead th {
padding: 3px 8px !important;
line-height: 1.2 !important;
height: auto !important;
vertical-align: middle !important;
}

/* Eingabefelder in DataTables-Kopfzeile sauber einpassen */
#catalogDPL thead input {
box-sizing: border-box; /* verhindert, dass padding + border die Größe aufblähen */
width: 100%; /* volle Breite der Zelle */
height: 100%; /* passt sich der Zellenhöhe an */
padding: 4px; /* kleiner Innenabstand */
margin: 0; /* verhindert vertikales Überlappen */
font-size: 13px; /* kleiner und lesbarer */
border: 1px solid #ccc; /* optisch passend zur Tabelle */
}

.page-Main_Page .row > .large-12.columns {
border-radius: 50px;
overflow: hidden;
background-color: rgba(255, 242, 230, 0.75);
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.page-Main_Page #page-content > .row {
background: transparent; /* Hintergrund unsichtbar, Container bleibt */
}

.page-Main_Page #firstHeading {
display: none;
}