HF/Schroedter/Red

2026-06-24T20:29:08Z

Illus: added information and stylistic changes

HF/Schroedter

2026-06-24T20:27:03Z

Illus:

{{DISPLAYTITLE: Schrödter's Illustrations of
<i>Adventures of Huckleberry Finn</i>}}
{{Seitenkopf| Schrödter's Illustrations of </br> <i>Adventures of Huckleberry Finn</i>}}

[[File:Hf 1898 schr cover.jpg|frameless|1898 Cover of ''Abenteuer und Fahrten des Huckleberry Finn''|left|283x283px]]

</br>

The first illustrated German translation of *Adventures of Huckleberry Finn* was published in 1898 under the title ''Abenteuer und Fahrten des Huckleberry Finn'' (literally, ''Adventures and Journeys of Huckleberry Finn''). It contains 69 black-and-white illustrations by [[HF/SchroedterBio|Hans Schrödter]], including twelve grayscale images and thirty-five drawings of characters, landscapes, and other scenes from the novel. A wealth of [[HF/Schroedter/Ornaments|ornamental letters and tailpieces]] decorates the book’s 351 pages. The cover image shown on the left was used for the 1898 illustrated edition. The earliest German translations of ''Huckleberry Finn'' (1892) contained no illustrations, but featured a cover image showing Jim and Huck on either a [[HF/Schroedter/Green|green]] or a [[HF/Schroedter/Red|red]] cloth binding.
</br>
<br><br>
<gallery>
File:hf_1897_schr_ch001_ill1.jpg
File:hf_1897_schr_ch002_ill1.jpg
File:hf_1897_schr_ch003_ill1.jpg
File:hf_1897_schr_ch004_ill1.jpg
File:hf_1897_schr_ch004_ill2.jpg
File:hf_1897_schr_ch005_ill1.jpg
File:hf_1897_schr_ch005_ill2.jpg
File:hf_1897_schr_ch006_ill1.jpg
File:hf_1897_schr_ch006_ill2.jpg
File:hf_1897_schr_ch007_ill1.jpg
File:hf_1897_schr_ch007_ill2.jpg
File:hf_1897_schr_ch008_ill1.jpg
File:hf_1897_schr_ch008_ill2.jpg
File:hf_1897_schr_ch008_ill3.jpg
File:hf_1897_schr_ch009_ill1.jpg
File:hf_1897_schr_ch009_ill2.jpg
File:hf_1897_schr_ch010_ill1.jpg
File:hf_1897_schr_ch010_ill2.jpg
File:hf_1897_schr_ch011_ill1.jpg
File:hf_1897_schr_ch012_ill1.jpg
File:hf_1897_schr_ch012_ill2.jpg
File:hf_1897_schr_ch013_ill1.jpg
File:hf_1897_schr_ch014_ill1.jpg
File:hf_1897_schr_ch016_ill1.jpg
File:hf_1897_schr_ch016_ill2.jpg
File:hf_1897_schr_ch018_ill1.jpg
File:hf_1897_schr_ch019_ill1.jpg
File:hf_1897_schr_ch20_ill1.jpg
File:hf_1897_schr_ch021_ill1.jpg
File:hf_1897_schr_ch024_ill1.jpg
File:hf_1897_schr_ch025_ill1.jpg
File:hf_1897_schr_ch025_ill2.jpg
File:hf_1897_schr_ch027_ill1.jpg
File:hf_1897_schr_ch029_ill1.jpg
File:hf_1897_schr_ch029_ill2.jpg
File:hf_1897_schr_ch030_ill1.jpg
File:hf_1897_schr_ch032_ill1.jpg
File:hf_1897_schr_ch033_ill1.jpg
File:hf_1897_schr_ch034_ill1.jpg
File:hf_1897_schr_ch034_ill2.jpg
File:hf_1897_schr_ch035_ill1.jpg
File:hf_1897_schr_ch037_ill1.jpg
File:hf_1897_schr_ch037_ill2.jpg
File:hf_1897_schr_ch038_ill1.jpg
File:hf_1897_schr_ch039_ill1.jpg
File:hf_1897_schr_ch040_ill1.jpg
File:hf_1897_schr_ch041_ill1.jpg
File:hf_1897_schr_ch041_ill2.jpg
File:hf_1897_schr_ch042_ill1.jpg
File:hf_1897_schr_ch042_ill2.jpg
File:hf_1897_schr_ch043_ill1.jpg
</gallery>

2026-02-23T21:13:26Z

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 */
.ausklapp-menublock {
border: 1px solid #ccc;
padding: 1em;
background-color: #A6A276; /* sanfteres Hellblau */
color: white;
max-width: 500px;
border-radius: 6px;
font-family: "Roboto", sans-serif;
flex: 1;
}

/* Hauptbuttons */
.ausklapp-button {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5em;
width: 100%;
text-align: left;
margin: 0.5em 0;
padding: 0.5em;
background-color: #A6A276; /* sanfteres Hellblau */
color: white;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
white-space: nowrap;
}

/* Hover-Effekt */
.ausklapp-button:hover {
background-color: #8F8B60; /* etwas dunkleres Grün */
}

.ausklapp-button:focus,
.ausklapp-button:active {
background-color: #8F8B60; /* derselbe dunklere Grünton */
outline: none; /* entfernt die blaue Outline */
}

/* Unterpunkte (sub) */
.ausklapp-button.sub {
background-color: #A6A276;
color: white;
margin-left: 1em;
font-size: 75%;
}

/* Ausklapp-Inhalt */
.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: white;
}

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

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

.ausklapp-button .link-icon {
font-size: 0.9em;
margin-left: auto;
}

/* 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 */
}

/*Blasenoptik auf main page*/

.page-Main_Page .bubble {
border-radius: 50px;
overflow: hidden;
background-color: rgba(255, 242, 230, 0.93);
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;
}

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

.no-break {
white-space: nowrap;
}

.page-Main_Page .bubble h1 {
text-align: center;
font-size: 2.5rem;
line-height: 1.2;
margin: 0;

/* elegante Schrift */
font-family: "Georgia", "Times New Roman", serif;

/* optional: etwas luftiger */
letter-spacing: 0.5px;

/* Farbe der Überschrift */
color: #008CBA;
}

.page-Overview #page-content > .row {
/* leicht transparenter Hintergrund in Farbe #FFF2E6 */
background: rgba(255, 242, 230, 0.93);

/* abgerundete Ecken */
border-radius: 15px; /* optional: anpassen */
}

.page-Overview > #page-content > .row:first-child {
display: none;
}