* { overflow-wrap: break-word; -ms-hyphens: auto; /* Internet Explorer 10/11 */ -moz-hyphens: auto; /* Firefox 6 bis 42 */ -webkit-hyphens: auto; /* Safari / WebKit */ hyphens: auto; hyphenate-limit-chars: 8 4 auto; -webkit-hyphenate-limit-before-after: 4 auto; -webkit-hyphenate-limit-lines: 2; hyphenate-limit-lines: 2; -webkit-hyphenate-limit-last: always; hyphenate-limit-last: always; /* Safari */ -webkit-hyphenate-limit-before: 5; /* min. 5 Zeichen vor dem Trennstrich */ -webkit-hyphenate-limit-after: 3; /* min. 3 Zeichen danach */ /* Chrome, Edge, Firefox 137+ */ hyphenate-limit-chars: 8 5 3; /* Wortlänge, vorher, nachher */ } /* Die Ueberschriften sollen nicht getrennt werden -- Schriftfamilie und * Gewicht bleiben dem Theme ueberlassen. Bis 12.09.2026 stand hier zusaetzlich * font-family: SeroWebPro !important und font-weight: 400 !important. Die * Vorgabe www.klett-lerntraining.de/p/ setzt die Ueberschriften in Verdana mit * Gewicht 700; das erzwungene 400 machte sie duenn, und SeroWebPro war * nirgends per @font-face eingebunden, fiel also ohnehin auf sans-serif * zurueck. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline{ hyphens: none; } @media screen and (max-width: 767px) { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ce_revolutionslider_text.bold, .font_headline { hyphens: auto; } } /* ── Klett Lerntraining: Zeilenhoehe im Kopfbereich ───────────────────────── * * Der ThemeDesigner haengt sein CSS per JavaScript ans Ende des und * gewinnt damit gegen jedes Stylesheet aus dem Layout. Er setzt dort * * .header.original { line-height: 80px; } * * Auf www.klett-lerntraining.de/p/ gibt es diesen Block nicht; der * Kopfbereich erbt seine 27 px vom body. Die 80 px haben jede Zeilenbox im * Kopf aufgeblasen: die Icon-Links bestehen aus Symbol,
und * Beschriftung, wurden also 160 statt 54 px hoch, die Shop-Auswahl 80 statt * 27 -- der Kopfbereich insgesamt 331 statt 183 px, und der Inhalt rutschte * entsprechend nach unten. * * line-height:inherit holt den Wert des body zurueck, statt eine Zahl * einzusetzen: aendert das Theme die Grundschrift, folgt der Kopf von selbst. * body.root_1255 hebt die Spezifitaet auf (0,3,0) gegen die (0,2,0) des * ThemeDesigners -- deshalb genuegt sie ohne !important -- und grenzt die * Regel auf den Klett-Baum ein. Diese Datei laedt auch bei den anderen Marken. * * Gemessen gegen die Vorgabe: Kopfbereich 182,25 zu 183, Shop-Auswahl 27, * Icon-Link 54, Icon-Zeile 59 -- jeweils gleich. * * Saubere Alternative, falls das Theme ohnehin angefasst wird: den Wert im * ThemeDesigner selbst auf den Stand der Vorgabe setzen. Dann braucht es * diese Gegenregel nicht. * * Kai am 12.09.2026. */ body.root_1255 .header.original { line-height: inherit; } /* ── Klett Lerntraining: Grundschrift wie in der Vorgabe ──────────────────── * * Zweite Stelle, an der der ThemeDesigner per JavaScript ans Ende des * schreibt und damit gegen das Layout-CSS gewinnt: * * html, body { font-family: Roboto; font-weight: 400; } * h1 ... .h6, ... { font-family: Roboto; font-weight: 500; } * * www.klett-lerntraining.de/p/ kennt diesen Block nicht. Dort gilt * files/cto_layout_x4/css/styles-x4.css:4722 -- body in Verdana -- und die * Ueberschriften stehen im Gewicht 700. Roboto laedt lokal ausserdem gar nicht * (FontFaceSet meldet dreimal "error"), es erschien also eine * Rueckfallschrift. * * Eingegrenzt auf body.root_1255, den Klett-Baum: diese Datei binden alle * PCT-Layouts automatisch ein, auch de.pons.int. Die Klassen-Spezifitaet * (0,1,1) bzw. (0,1,2) schlaegt die (0,0,2) und (0,0,1) des ThemeDesigners, * deshalb genuegt sie ohne !important. * * Gemessen gegen die Vorgabe: body Verdana 15px/400 Zeilenhoehe 27, * h2 18,75/700, h3 15/700, h4 18,75/700, Fussbereich 13,95/400. * * Kai am 12.09.2026. */ body.root_1255 { font-family: Verdana, sans-serif; } body.root_1255 h1, body.root_1255 h2, body.root_1255 h3, body.root_1255 h4, body.root_1255 h5, body.root_1255 h6, body.root_1255 .h1, body.root_1255 .h2, body.root_1255 .h3, body.root_1255 .h4, body.root_1255 .h5, body.root_1255 .h6, body.root_1255 .ce_revolutionslider_text.bold, body.root_1255 .font_headline { font-family: Verdana, sans-serif; font-weight: 700; } /* ── Klett Lerntraining: Spaltenabstaende im Kopfbereich unter 768 px ─────── * * pct_autogrid hat sein Verhalten zwischen den beiden Fassungen geaendert. * Live (grid.min.css?v=bd4beed6) raeumt unter 768 px die Abstaende jeder * Spalte ab: * * .autogrid_grid .column, .column[class*=col_] * { padding-left:0!important; padding-right:0!important } * * Die hier installierte Fassung (?v=fbb914e4) nimmt Spalten aus, die eine * eigene Mobilbreite tragen: * * .column[class*="col_"]:not([class*="_m"]), ... * * Die drei Spalten des Kopfbereichs heissen col_2 col_4_m, col_10 col_7_m und * col_2 col_1_m -- sie fallen also unter die Ausnahme und behalten je 15 px * links und rechts. Damit passten Logo, Suche und Symbole nicht mehr in eine * Zeile: der Kopfbereich war 94 statt 55 px hoch und die Symbolzeile rutschte * unter das Logo. * * Diese Regel holt das Verhalten der Vorgabe zurueck, begrenzt auf den * Kopfbereich des Klett-Baums -- nicht global, weil die uebrigen Marken * dieselbe Modulfassung benutzen und hier nicht geprueft sind (siehe * tasks/todo.md). * * Gemessen gegen die Vorgabe bei 390 px: Kopfbereich 390x55, Spalten 29x55, * 117x55 und 204x55 bei x=20, 49 und 166, Inhalt jeder Spalte ohne Einzug, * Logo 93x47, keine Querscrollung. * * Kai am 12.09.2026. */ @media only screen and (max-width: 767px) { body.root_1255 #header .autogrid_row > .column { padding-left: 0; padding-right: 0; } } /* ── PONS: SeroWebPro statt der Roboto des ThemeDesigners ────────────────── * * Die ThemeDesigner-Konfiguration steht als JSON in der Seite und setzt * durchgehend Roboto: bodyFontFamily, headlineFontFamily, customFont1Family * und customFont2Family. Daraus erzeugt der Designer * files/cto_layout/themedesigner/fonts_css/_fonts.css mit vier @font-face auf * /files/cto_layout/fonts/googlefonts/roboto-v32-latin-{300,400,500,700}.woff2 * * Diese Dateien gibt es nicht mehr -- sie wurden durch SeroWebPro ersetzt. * Am 13.09.2026 gemessen: alle vier antworten mit 404, der Browser faellt * deshalb auf eine Systemschrift zurueck. Sichtbar auf * de.pons.com/p/worterbuch-app. * * SeroWebPro ist die Marken- und Ist-Schrift: in * assets.pons.com/assets/min/bootstrap_dict_template-*-min.css als @font-face * deklariert (normal und bold), die Dateien liefern 200. Der Stack unten ist * woertlich der aus deren body-Regel. * * Zwei Kennungen, weil PONS sein body-Tag aus zwei Quellen bekommt (am * 13.09.2026 nachgemessen): * * /p/b2b * -- aus der PONS-Kopfvorlage _header__DEFAULT.html.php, * also OHNE Contaos root_-Klasse * /p/worterbuch-app * -- aus Contaos fe_page * * body.root_80 allein haette deshalb nur einen Bruchteil der PONS-Seiten * getroffen. #mobilecms ist trennscharf: Langenscheidt (root_1254, root_1256) * und Klett (root_1255) tragen kein id-Attribut am body. * * Diese Datei binden alle PCT-Layouts ein, auch Klett und Langenscheidt -- * deshalb die Eingrenzung ueberhaupt. Die Spezifitaet (0,1,1) bzw. (1,0,0) * schlaegt die (0,0,2) und (0,0,1) des ThemeDesigners, deshalb ohne * !important. * * Kai am 13.09.2026: „wir haben die Roboto-Dateien mit der seropro * überschrieben, die pct_themestyles sind nicht gewollt in diesem fall" */ body.root_80, body#mobilecms { font-family: SeroWebPro, "Arial Unicode MS", Arial, sans-serif; } body.root_80 h1, body.root_80 h2, body.root_80 h3, body.root_80 h4, body.root_80 h5, body.root_80 h6, body.root_80 .h1, body.root_80 .h2, body.root_80 .h3, body.root_80 .h4, body.root_80 .h5, body.root_80 .h6, body.root_80 .ce_revolutionslider_text.bold, body.root_80 .font_headline, body.root_80 .font_custom1, body.root_80 .font_custom2, body#mobilecms h1, body#mobilecms h2, body#mobilecms h3, body#mobilecms h4, body#mobilecms h5, body#mobilecms h6, body#mobilecms .h1, body#mobilecms .h2, body#mobilecms .h3, body#mobilecms .h4, body#mobilecms .h5, body#mobilecms .h6, body#mobilecms .ce_revolutionslider_text.bold, body#mobilecms .font_headline, body#mobilecms .font_custom1, body#mobilecms .font_custom2 { font-family: SeroWebPro, "Arial Unicode MS", Arial, sans-serif; }