/*
 * klassen.css  --  Redaktionsklassen, die keine Skala sind
 *
 * Was sich aus --size-* errechnen laesst, erzeugt bin/g5-abstaende in
 * spacing.css. Hier steht der Rest: Listen mit eigenen Werten, die niemand
 * ableiten kann -- Schriftgroessen, Zeilenhoehen, Drehungen, Rahmen.
 *
 * ALLE WERTE SIND AUS guladevs root.css UEBERNOMMEN, nicht abgetippt: ein
 * Skript hat die Regeln dort ausgelesen und hierher geschrieben. Beim
 * Abtippen von 200 Zahlenwerten waere genau ein Zahlendreher unbemerkt
 * geblieben, und er faellt erst auf einer Kundenseite auf.
 *
 * Die Redaktion setzt diese Klassen in den Klassenfeldern der Bloecke.
 * Gemessen in den Datenbanken von 19 lokalen Sites: text-center 189x,
 * fsvw3 32x, lh12 25x, fw700 18x, fw300 18x, fs2 10x. Wer hier aufraeumt,
 * loescht Kundeninhalt -- vorher in post_content und meta_value suchen.
 *
 * Document & Code @copyright by SteckDesign
 * Changes by third parties are not permitted.
 */


/* --- Schriftgroessen (48) --- */
/* Zwei Reihen: fsN aus der Groessenskala, fsNvw als Anteil der Fensterbreite. */
.fs1 { font-size: calc( var( --size-1 ) * 0.6 ); }
.fs2 { font-size: calc( var( --size-1 ) * 0.7 ); }
.fs3 { font-size: calc( var( --size-1 ) * 0.8 ); }
.fs4 { font-size: calc( var( --size-1 ) * 0.9 ); }
.fs5 { font-size: calc( var( --size-1 ) * 1.0 ); }
.fs6 { font-size: calc( var( --size-1 ) * 1.2 ); }
.fs7 { font-size: calc( var( --size-1 ) * 1.4 ); }
.fs8 { font-size: calc( var( --size-1 ) * 1.6 ); }
.fs9 { font-size: calc( var( --size-1 ) * 1.8 ); }
.fs10 { font-size: calc( var( --size-1 ) * 2.05 ); }
.fs11 { font-size: calc( var( --size-1 ) * 2.25 ); line-height: 1; letter-spacing: -0.05rem; }
.fs12 { font-size: calc( var( --size-1 ) * 2.5 ); line-height: 1; letter-spacing: -0.05rem; }
.fs13 { font-size: calc( var( --size-1 ) * 2.75 ); line-height: 1; letter-spacing: -0.05rem; }
.fs14 { font-size: calc( var( --size-1 ) * 3 ); line-height: 1; letter-spacing: -0.05rem; }
.fs15 { font-size: calc( var( --size-1 ) * 3.3 ); line-height: 1; letter-spacing: -0.05rem; }
.fs16 { font-size: calc( var( --size-1 ) * 3.6 ); line-height: 1; letter-spacing: -0.05rem; }
.fs17 { font-size: calc( var( --size-1 ) * 3.9 ); line-height: 1; letter-spacing: -0.05rem; }
.fs18 { font-size: calc( var( --size-1 ) * 4.3 ); line-height: 1; letter-spacing: -0.05rem; }
.fs19 { font-size: calc( var( --size-1 ) * 4.7 ); line-height: 1; letter-spacing: -0.05rem; }
.fs20 { font-size: calc( var( --size-1 ) * 5.1 ); line-height: 1; letter-spacing: -0.05rem; }
.fs5vw { font-size: 5vw; }
.fs6vw { font-size: 6vw; }
.fs7vw { font-size: 7vw; }
.fs8vw { font-size: 8vw; }
.fs9vw { font-size: 9vw; }
.fs10vw { font-size: 10vw; }
.fs11vw { font-size: 11vw; }
.fs12vw { font-size: 12vw; }
.fs13vw { font-size: 13vw; }
.fs14vw { font-size: 14vw; }
.fs15vw { font-size: 15vw; }
.fs20vw { font-size: 20vw; }
.fs25vw { font-size: 25vw; }
.fs30vw { font-size: 30vw; }
.fs35vw { font-size: 35vw; }
.fs40vw { font-size: 40vw; }
.fs45vw { font-size: 45vw; }
.fs50vw { font-size: 50vw; }
.fs55vw { font-size: 55vw; }
.fs60vw { font-size: 60vw; }
.fs65vw { font-size: 65vw; }
.fs70vw { font-size: 70vw; }
.fs75vw { font-size: 75vw; }
.fs80vw { font-size: 80vw; }
.fs85vw { font-size: 85vw; }
.fs90vw { font-size: 90vw; }
.fs95vw { font-size: 95vw; }
.fs100vw { font-size: 100vw; }

/* --- Schriftgroessen nach Fensterbreite (9) --- */
/* Eigene Reihe mit fester Zeilenhoehe. */
.fsvw1 { font-size: calc( 3.35vw * 1.9 ); line-height: 1; }
.fsvw2 { font-size: calc( 4.15vw * 1.8 ); line-height: 1; }
.fsvw3 { font-size: calc( 4.9vw * 1.7 ); line-height: 1; }
.fsvw4 { font-size: calc( 5.7vw * 1.6 ); line-height: 1; }
.fsvw5 { font-size: calc( 6.7vw * 1.5 ); line-height: 1; }
.fsvw6 { font-size: calc( 7.9vw * 1.4 ); line-height: 1; }
.fsvw7 { font-size: calc( 9.3vw * 1.3 ); line-height: 1; }
.fsvw8 { font-size: calc( 11vw * 1.2 ); line-height: 1; }
.fsvw9 { font-size: calc( 13vw * 1.1 ); line-height: 1; }

/* --- Schriftschnitt (9) --- */
.fw100 { font-weight: var( --weight-100 )!important; }
.fw200 { font-weight: var( --weight-200 )!important; }
.fw300 { font-weight: var( --weight-300 )!important; }
.fw400 { font-weight: var( --weight-400 )!important; }
.fw500 { font-weight: var( --weight-500 )!important; }
.fw600 { font-weight: var( --weight-600 )!important; }
.fw700 { font-weight: var( --weight-700 )!important; }
.fw800 { font-weight: var( --weight-800 )!important; }
.fw900 { font-weight: var( --weight-900 )!important; }

/* --- Zeilenhoehe (21) --- */
.lh05 { line-height: 0.5!important; }
.lh06 { line-height: 0.6!important; }
.lh07 { line-height: 0.7!important; }
.lh08 { line-height: 0.8!important; }
.lh09 { line-height: 0.9!important; }
.lh10 { line-height: 1!important; }
.lh11 { line-height: 1.1!important; }
.lh12 { line-height: 1.2!important; }
.lh13 { line-height: 1.3!important; }
.lh14 { line-height: 1.4!important; }
.lh15 { line-height: 1.5!important; }
.lh16 { line-height: 1.6!important; }
.lh17 { line-height: 1.7!important; }
.lh18 { line-height: 1.8!important; }
.lh19 { line-height: 1.9!important; }
.lh20 { line-height: 2!important; }
.lh21 { line-height: 2.1!important; }
.lh22 { line-height: 2.2!important; }
.lh23 { line-height: 2.3!important; }
.lh24 { line-height: 2.4!important; }
.lh25 { line-height: 2.5!important; }

/* --- Laufweite (11) --- */
.lesp0 { letter-spacing: 0rem; }
.lesp1 { letter-spacing: 1rem; }
.lesp01 { letter-spacing: 0.1rem; }
.lesp02 { letter-spacing: 0.2rem; }
.lesp03 { letter-spacing: 0.3rem; }
.lesp04 { letter-spacing: 0.4rem; }
.lesp05 { letter-spacing: 0.5rem; }
.lesp005 { letter-spacing: 0.05rem; }
.lesp075 { letter-spacing: 0.75rem; }
.lesp0025 { letter-spacing: 0.025rem; }
.lesp0075 { letter-spacing: 0.075rem; }

/* --- Textausrichtung (4) --- */
.text-left { text-align: left!important; }
.text-right { text-align: right!important; }
.text-center { text-align: center!important; }
.text-justify { text-align: justify!important; }

/* --- Ecken (16) --- */
/* Radius als Anteil einer Stufe. */
.br1 { border-radius:calc( var( --size-1 ) * 0.1 ); }
.br2 { border-radius:calc( var( --size-1 ) * 0.15 ); }
.br3 { border-radius:calc( var( --size-1 ) * 0.175 ); }
.br4 { border-radius:calc( var( --size-1 ) * 0.2 ); }
.br5 { border-radius:calc( var( --size-1 ) * 0.25 ); }
.br6 { border-radius:calc( var( --size-1 ) * 0.3 ); }
.br7 { border-radius:calc( var( --size-1 ) * 0.35 ); }
.br8 { border-radius:calc( var( --size-1 ) * 0.4 ); }
.br9 { border-radius:calc( var( --size-1 ) * 0.475 ); }
.br10 { border-radius:calc( var( --size-1 ) * 0.55 ); }
.br15 { border-radius:calc( var( --size-1 ) * 0.8 ); }
.br20 { border-radius:calc( var( --size-1 ) * 0.95 ); }
.br25 { border-radius:calc( var( --size-1 ) * 1.2 ); }
.br30 { border-radius:calc( var( --size-1 ) * 1.45 ); }
.br35 { border-radius:calc( var( --size-1 ) * 1.7 ); }
.br40 { border-radius:calc( var( --size-1 ) * 1.95 ); }

/* --- Drehung (22) --- */
.rot01 { transform: rotate( 1deg ); transform-origin: left top 0; }
.rot02 { transform: rotate( 2deg ); }
.rot03 { transform: rotate( 3deg ); }
.rot04 { transform: rotate( 4deg ); }
.rot05 { transform: rotate( 5deg ); }
.rot10 { transform: rotate( 10deg ); }
.rot15 { transform: rotate( 15deg ); }
.rot20 { transform: rotate( 20deg ); }
.rot25 { transform: rotate( 25deg ); }
.rot30 { transform: rotate( 30deg ); }
.rot35 { transform: rotate( 35deg ); }
.rot40 { transform: rotate( 40deg ); }
.rot45 { transform: rotate( 45deg ); }
.rot50 { transform: rotate( 50deg ); }
.rot55 { transform: rotate( 55deg ); }
.rot60 { transform: rotate( 60deg ); }
.rot65 { transform: rotate( 65deg ); }
.rot70 { transform: rotate( 70deg ); }
.rot75 { transform: rotate( 75deg ); }
.rot80 { transform: rotate( 80deg ); }
.rot85 { transform: rotate( 85deg ); }
.rot90 { transform: rotate( 90deg ); }

/* --- Linienstaerke (16) --- */
.hrwidth1 { border-width:calc( var( --size-1 ) * 0.1 ); }
.hrwidth2 { border-width:calc( var( --size-1 ) * 0.15 ); }
.hrwidth3 { border-width:calc( var( --size-1 ) * 0.175 ); }
.hrwidth4 { border-width:calc( var( --size-1 ) * 0.2 ); }
.hrwidth5 { border-width:calc( var( --size-1 ) * 0.25 ); }
.hrwidth6 { border-width:calc( var( --size-1 ) * 0.3 ); }
.hrwidth7 { border-width:calc( var( --size-1 ) * 0.35 ); }
.hrwidth8 { border-width:calc( var( --size-1 ) * 0.4 ); }
.hrwidth9 { border-width:calc( var( --size-1 ) * 0.475 ); }
.hrwidth10 { border-width:calc( var( --size-1 ) * 0.55 ); }
.hrwidth15 { border-width:calc( var( --size-1 ) * 0.8 ); }
.hrwidth20 { border-width:calc( var( --size-1 ) * 0.95 ); }
.hrwidth25 { border-width:calc( var( --size-1 ) * 1.2 ); }
.hrwidth30 { border-width:calc( var( --size-1 ) * 1.45 ); }
.hrwidth35 { border-width:calc( var( --size-1 ) * 1.7 ); }
.hrwidth40 { border-width:calc( var( --size-1 ) * 1.95 ); }

/* --- Pfeile (17) --- */
.arrborder1 { border-width: 0 1px 1px 0; }
.arrborder2 { border-width: 0 2px 2px 0; }
.arrborder3 { border-width: 0 3px 3px 0; }
.arrborder4 { border-width: 0 4px 4px 0; }
.arrborder5 { border-width: 0 5px 5px 0; }
.arrborder6 { border-width: 0 6px 6px 0; }
.arrborder7 { border-width: 0 7px 7px 0; }
.arrborder8 { border-width: 0 8px 8px 0; }
.arrborder9 { border-width: 0 9px 9px 0; }
.arrborder10 { border-width: 0 10px 10px 0; }
.arrborder11 { border-width: 0 11px 11px 0; }
.arrborder12 { border-width: 0 12px 12px 0; }
.arrborder13 { border-width: 0 13px 13px 0; }
.arrborder14 { border-width: 0 14px 14px 0; }
.arrborder15 { border-width: 0 15px 15px 0; }
.arrborder16 { border-width: 0 16px 16px 0; }
.arrborder17 { border-width: 0 17px 17px 0; }

/* --- Rahmen (55) --- */
/* Oben und unten, in Staerke, Art und Farbe. */
.b-left1 { border-left:1px; }
.b-dashed { border-style:dashed; }
.btop-color { border-top-color: #04A4CC; }
.btop-solid { border-top: solid; }
.b-top-white { border-top-color: rgba( var(--white), 1.0); }
.btop-dashed { border-top: dashed; }
.btop-dotted { border-top: dotted; }
.btop-double { border-top: double; }
.btop-width1 { border-top-width: 1px; }
.btop-width2 { border-top-width: 2px; }
.btop-width3 { border-top-width: 3px; }
.btop-width4 { border-top-width: 4px; }
.btop-width5 { border-top-width: 5px; }
.btop-width6 { border-top-width: 6px; }
.b-top-double { border-top: double; }
.bbot1-solid-black { border-bottom: 1px solid rgba( var(--black), 1.0); }
.bbot1-solid-white { border-bottom: 1px solid rgba( var(--white), 1.0); }
.btop1-solid-black { border-top: 1px solid rgba( var(--black), 1.0); }
.btop1-solid-white { border-top: 1px solid rgba( var(--white), 1.0); }
.bbot2-solid-black { border-bottom: 2px solid rgba( var(--black), 1.0); }
.bbot2-solid-white { border-bottom: 2px solid rgba( var(--white), 1.0); }
.btop2-solid-black { border-top: 2px solid rgba( var(--black), 1.0); }
.btop2-solid-white { border-top: 2px solid rgba( var(--white), 1.0); }
.bbot3-solid-black { border-bottom: 3px solid rgba( var(--black), 1.0); }
.bbot3-solid-white { border-bottom: 3px solid rgba( var(--white), 1.0); }
.btop3-solid-black { border-top: 3px solid rgba( var(--black), 1.0); }
.btop3-solid-white { border-top: 3px solid rgba( var(--white), 1.0); }
.bbot4-solid-black { border-bottom: 4px solid rgba( var(--black), 1.0); }
.bbot4-solid-white { border-bottom: 4px solid rgba( var(--white), 1.0); }
.btop4-solid-black { border-top: 4px solid rgba( var(--black), 1.0); }
.btop4-solid-white { border-top: 4px solid rgba( var(--white), 1.0); }
.bbot5-solid-black { border-bottom: 5px solid rgba( var(--black), 1.0); }
.bbot5-solid-white { border-bottom: 5px solid rgba( var(--white), 1.0); }
.btop5-solid-black { border-top: 5px solid rgba( var(--black), 1.0); }
.btop5-solid-white { border-top: 5px solid rgba( var(--white), 1.0); }
.bbot6-solid-black { border-bottom: 6px solid rgba( var(--black), 1.0); }
.bbot6-solid-white { border-bottom: 6px solid rgba( var(--white), 1.0); }
.btop6-solid-black { border-top: 6px solid rgba( var(--black), 1.0); }
.btop6-solid-white { border-top: 6px solid rgba( var(--white), 1.0); }
.bbot7-solid-black { border-bottom: 7px solid rgba( var(--black), 1.0); }
.bbot7-solid-white { border-bottom: 7px solid rgba( var(--white), 1.0); }
.btop7-solid-black { border-top: 7px solid rgba( var(--black), 1.0); }
.btop7-solid-white { border-top: 7px solid rgba( var(--white), 1.0); }
.bbot8-solid-black { border-bottom: 8px solid rgba( var(--black), 1.0); }
.bbot8-solid-white { border-bottom: 8px solid rgba( var(--white), 1.0); }
.btop8-solid-black { border-top: 8px solid rgba( var(--black), 1.0); }
.btop8-solid-white { border-top: 8px solid rgba( var(--white), 1.0); }
.bbot9-solid-black { border-bottom: 9px solid rgba( var(--black), 1.0); }
.bbot9-solid-white { border-bottom: 9px solid rgba( var(--white), 1.0); }
.btop9-solid-black { border-top: 9px solid rgba( var(--black), 1.0); }
.btop9-solid-white { border-top: 9px solid rgba( var(--white), 1.0); }
.bbot10-solid-black { border-bottom: 10px solid rgba( var(--black), 1.0); }
.bbot10-solid-white { border-bottom: 10px solid rgba( var(--white), 1.0); }
.btop10-solid-black { border-top: 10px solid rgba( var(--black), 1.0); }
.btop10-solid-white { border-top: 10px solid rgba( var(--white), 1.0); }

/* --- Ohne Abstand (6) --- */
.nopad { padding-left: 0px; padding-right: 0px; }
.nomarg { margin-left: 0px; margin-right: 0px; }
.nopad-left { padding-left: 0px; }
.nomarg-left { margin-left: 0px; }
.nopad-right { padding-right: 0px; }
.nomarg-right { margin-right: 0px; }

/* --- Schriftgroessen nach Fensterbreite: die Stufen je Breite ---
   NACHGETRAGEN 04.09.2026. Beim ersten Uebernehmen hat mein Skript nur die
   oberste Ebene von root.css gelesen und ALLE @media-Bloecke verworfen.
   Aufgefallen ist es erst beim Durchklicken in Brave: die Ueberschrift
   "Single Image left" brach unter gula5 auf drei Zeilen statt zwei.
   Gemessen bei 1400px: .fsvw1 ergab 89,11px statt 46,9px -- weil nur die
   Grundregel (6.365vw) galt und die zwei Verfeinerungen fehlten. */
@media ( min-width: 567px ) {
	.fsvw1 { font-size: calc( 3.35vw * 1.25 ); line-height: 1; }
	.fsvw2 { font-size: calc( 4.15vw * 1.25 ); line-height: 1; }
	.fsvw3 { font-size: calc( 4.9vw * 1.25 ); line-height: 1; }
	.fsvw4 { font-size: calc( 5.7vw * 1.25 ); line-height: 1; }
	.fsvw5 { font-size: calc( 6.7vw * 1.25 ); line-height: 1; }
	.fsvw6 { font-size: calc( 7.9vw * 1.25 ); line-height: 1; }
	.fsvw7 { font-size: calc( 9.3vw * 1.25 ); line-height: 1; }
	.fsvw8 { font-size: calc( 11vw * 1.25 ); line-height: 1; }
	.fsvw9 { font-size: calc( 13vw * 1.25 ); line-height: 1; }
}
@media ( min-width: 767px ) {
	.fsvw1 { font-size: 3.35vw; line-height: 1; }
	.fsvw2 { font-size: 4.15vw; line-height: 1; }
	.fsvw3 { font-size: 4.9vw; line-height: 1; }
	.fsvw4 { font-size: 5.7vw; line-height: 1; }
	.fsvw5 { font-size: 6.7vw; line-height: 1; }
	.fsvw6 { font-size: 7.9vw; line-height: 1; }
	.fsvw7 { font-size: 9.3vw; line-height: 1; }
	.fsvw8 { font-size: 11vw; line-height: 1; }
	.fsvw9 { font-size: 13vw; line-height: 1; }
}

/* --- Einzelstuecke (26 Regeln) --- */
/* Kein Muster, aber in Gebrauch: .round steht 60x im Inhalt der lokalen
   Sites, .serif 38x, .sans 3x. Die Pfeilhelfer (.tarrow mit .up .left
   .right) und die Linienarten (.hrborder mit .dashed .dotted .double)
   wirken nur zusammen -- darum stehen sie hier mit ihren vollen
   Selektoren, nicht als Einzelklassen. */
.nono { display: none; }
.shadowtext { text-shadow: 1px 1px 0px #000; }
.box_shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.round { border-radius: 50%; }
.upcase { text-transform: uppercase; }
.dot { border-radius: 50%; display: inline-block; }
.iconcircle { border-radius: 50%; border: 2px solid; display: grid; align-items: center; justify-content: center; }
.neg span { display: inline-block; }
.neg > span > span { padding: 0 0.25em; margin: 0 -0.5em 0 0; }
.neg .blackbg span { background-color: #000; color: #ffffff; }
.neg .whitebg span { background-color: #ffffff; color: #000; }
.clearfix::after { content: ""; clear: both; display: table; }
.tarrow { border: solid; display: inline-block; }
.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
/* .down fehlte -- eine Vier-Pfeil-Familie mit drei Pfeilen. guladev hat sie
   (root.css, Abschnitt "Arrows"), hier war sie beim Neubau liegengeblieben. */
.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.bleft10-solid-white { border-left: 10px solid rgba( var(--white), 1.0); }
.hrborder.hrblack { border-color: rgba( var(--black), 1.0)!important; }
.hrborder.hrwhite { border-color: rgba( var(--white), 1.0); }
.hrborder.dotted { border-style:dotted!important; }
.hrborder.dashed { border-style:dashed!important; }
.hrborder.double { border-style:double!important; }
.hrborder.single { border-style:single; }
.hrleft { display: inline-block; vertical-align: middle; margin-right:auto; }
.sans { font-family: var( --title-font ); font-style: var( --font-normal ); }
.serif { font-family: var( --title-font-serif ); font-weight: 400; font-style: var( --font-normal ); }

/*  NEGATIVE LAUFWEITE UND DREHUNG
 *
 *  Die negativen Gegenstuecke, nachgetragen 07.09.2026.
 *
 *  gula5 hat die positiven Familien von Anfang an, die negativen fehlten --
 *  und zwar LAUTLOS: eine nicht definierte Klasse macht keinen Fehler, das
 *  Element sieht nur anders aus. Die Bearbeitungsmasken bieten sie trotzdem
 *  an (src/fields/optionen-cb.php fuer -rot, die Quicktags-Liste fuer
 *  -lesp und -textindent). Eine Maske, die eine Klasse anbietet, die es im
 *  CSS nicht gibt, ist genau die Falle, die CONTRACT.md Abschnitt 3 meint.
 *
 *  Aufgefallen bei der Sichtpruefung von steckdesign2026: der Schriftzug
 *  "DESIGN" war 29 Pixel breiter als auf dem Vorzustand -- -lesp03 fehlte.
 *
 *  WEN ES BETRIFFT -- die erste Fassung dieses Kommentars behauptete hier,
 *  mktaylor26 habe seit dem Umschalten "zehn Stellen ohne Wirkung", und
 *  nannte das eine ausgelieferte Regression. DAS WAR FALSCH. Nachgemessen am
 *  07.09.2026, Feld fuer Feld:
 *
 *    steckdesign2026   -lesp03  1x  in gula_spalten_content   WIRD gerendert
 *    steckimage2026    -lesp03  1x  in gula_spalten_content   WIRD gerendert
 *    steckweb2026      -lesp03  1x  in gula_spalten_content   WIRD gerendert
 *    mktaylor26        -lesp1   6x  in gula_spalten_content   NICHT gerendert
 *                      -lesp1   1x  in gula_spalten_notes     NICHT gerendert
 *                      -textindent25 1x  ebenfalls notes      NICHT gerendert
 *
 *  Auf mktaylor26 gehoeren die sechs Vorkommen zu Bloecken, deren
 *  grid_wrapper leer bleibt -- ausgegeben wird dort die Portfolio-Galerie.
 *  Der Rest steckt in Notizfeldern, also geparktem Markup. Gemessen am
 *  gerenderten HTML des Testservers: der String "lesp" kommt auf keiner der
 *  geprueften Adressen vor.
 *
 *  Belegt betroffen ist damit nur die steck-Familie, und dort mit je einem
 *  Vorkommen. Der Fix bleibt trotzdem richtig: die Masken bieten die Klassen
 *  an, und eine angebotene Klasse ohne CSS ist die Falle selbst.
 */

/* -lesp* -- 10 Klassen */
.-lesp1 { letter-spacing: -1rem; }
.-lesp075 { letter-spacing: -0.75rem; }
.-lesp05 { letter-spacing: -0.5rem; }
.-lesp04 { letter-spacing: -0.4rem; }
.-lesp03 { letter-spacing: -0.3rem; }
.-lesp02 { letter-spacing: -0.2rem; }
.-lesp01 { letter-spacing: -0.1rem; }
.-lesp0075 { letter-spacing: -0.075rem; }
.-lesp005 { letter-spacing: -0.05rem; }
.-lesp0025 { letter-spacing: -0.025rem; }

/* -rot* -- 22 Klassen */
.-rot01 { transform: rotate( -1deg ); transform-origin: left top 0; }
.-rot02 { transform: rotate( -2deg ); }
.-rot03 { transform: rotate( -3deg ); }
.-rot04 { transform: rotate( -4deg ); }
.-rot05 { transform: rotate( -5deg ); }
.-rot10 { transform: rotate( -10deg ); }
.-rot15 { transform: rotate( -15deg ); }
.-rot20 { transform: rotate( -20deg ); }
.-rot25 { transform: rotate( -25deg ); }
.-rot30 { transform: rotate( -30deg ); }
.-rot35 { transform: rotate( -35deg ); }
.-rot40 { transform: rotate( -40deg ); }
.-rot45 { transform: rotate( -45deg ); }
.-rot50 { transform: rotate( -50deg ); }
.-rot55 { transform: rotate( -55deg ); }
.-rot60 { transform: rotate( -60deg ); }
.-rot65 { transform: rotate( -65deg ); }
.-rot70 { transform: rotate( -70deg ); }
.-rot75 { transform: rotate( -75deg ); }
.-rot80 { transform: rotate( -80deg ); }
.-rot85 { transform: rotate( -85deg ); }
.-rot90 { transform: rotate( -90deg ); }