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

/* --- Einleitung (.lead) --- */
/* Aus guladevs style.css (dort Z. 89 und 350), nicht aus root.css -- darum
   fehlte sie beim Uebernehmen. Getippt als <div class="lead"> in Inhalten:
   gemessen 09.10.2026 auf zwei Sites (1 und 6 Stellen; eine davon mit eigener
   Schriftgroesse in ihrer site.css, die weiter gewinnt). */
.lead {
	font-size: calc( var( --size-1 ) * 1.15 );
	font-weight: var( --bodyweight );
	font-style: var( --font-normal );
	line-height: calc( var( --size-1 ) * 1.6 );
	margin-bottom: calc( var( --size-1 ) * 1 );
}
.lead ol li {
	margin-left: calc( var( --size-1 ) * 2.8 );
	padding-left: 0px;
	hyphens: auto;
}

/* --- Kleiner Text (.small) --- */
/* Aus guladevs style.css, wie .lead. gula5 bot sie der Redaktion als
   Schaltflaeche an (src/wp/quicktags.php) und hatte .small ul li / ol li,
   aber nicht die Klasse selbst. Gemessen 19.10.2026 in 32 Datenbanken:
   10 Stellen auf drei gula5-Sites (jede mit eigener Kopie in ihrer site.css,
   die weiter gewinnt), 48 Stellen auf sechs Sites der Vorgaengergeneration. */
.small {
	font-size: calc(var( --size-1 ) * 0.85);
	font-weight: var( --bodyweight );
	font-style: var( --font-normal );
	line-height: calc(var( --size-1 ) * 1.25);
	margin-bottom: calc( var( --size-1 ) * 0.65 );
}

/* --- Grosse Titel (.titel-big, .titel-extralarge, .titel-large) --- */
/* Aus guladevs style.css, als ganze Skala (eine Stufe allein waere
   unbrauchbar). Schaltflaechen T-Big / T-EL / T-L in src/wp/quicktags.php;
   gula-cpt-artikel und gula-cpt-slider geben .titel-big und .titel-extralarge
   selbst aus. Ohne diese Regeln fiel ein solcher Titel auf die h1-Groesse
   zurueck: .titel-big halb so gross. Gemessen 19.10.2026: 37 Stellen auf fuenf
   Sites, zwei davon gula5 (mit eigener Kopie in der site.css). */
.titel-big {
	font-size: calc( var( --size-1 ) * 3.9 );
	line-height: calc( var( --size-1 ) * 4.3);
	margin-bottom: calc( var( --size-1 ) * 1.5 );
	letter-spacing: 0rem;
	word-spacing: calc( var( --size-05 ) * -0.2 );
}
.titel-extralarge {
	font-size: calc( var( --size-1 ) * 2.6 );
	line-height: calc( var( --size-1 ) * 2.8 );
	margin-bottom: calc( var( --size-1 ) * 0.5 );
	letter-spacing: 0rem;
	word-spacing: calc( var( --size-05 ) * -0.2 );
}
.titel-large {
	font-size: calc( var( --size-1 ) * 2.3 );
	line-height: calc( var( --size-1 ) * 2.5 );
	margin-bottom: calc( var( --size-1 ) * 0.5 );
	letter-spacing: 0.15rem;
	word-spacing: calc( var( --size-05 ) * -0.2 );
}

/* --- Definitionslisten: Jahr links, Text rechts (dl.base*) --- */
/* Wie .lead aus guladevs style.css (Z. 360-430), beim Uebernehmen gefehlt.
   Gemeldet 11.10.2026: Jahr stand UEBER dem Titel statt davor. Benutzt auf
   einer lokalen gula5-Site (10 Stellen) und von [blog_werkliste].
   base / base_wide mit Linie, base_no_line ohne; unter 576 px stehen base und
   base_wide einspaltig, base_no_line bleibt zweispaltig (das Jahr ist kurz).
   NICHT uebernommen: guladevs Regel fuer 768-1199 px. Sie stellte auf eine
   Spalte, liess dd aber in Spalte 2 -- gemessen bei 900 px wurde die
   Jahresspalte 455 px breit und der Text auf 187 px gedrueckt. */
dl.base,
dl.base_wide,
dl.base_no_line {
	display: grid;
	grid-template-columns: max-content auto;
	column-gap: 0;
	margin: 0;
	padding: 0;
	margin-bottom: calc( var( --size-1 ) * 0.8 );
}
dl.base dt,
dl.base_wide dt,
dl.base_no_line dt {
	grid-column-start: 1;
	font-weight: var( --bodyweight );
	padding-right: calc( var( --size-1 ) * 1 );
	margin-bottom: calc( var( --size-1 ) * 0.5 );
	margin-right: 0;
}
dl.base dd,
dl.base_wide dd,
dl.base_no_line dd {
	grid-column-start: 2;
	text-align: left;
	margin-bottom: calc( var( --size-1 ) * 0.5 );
	margin-left: 0;
}
dl.base dt,
dl.base_wide dt,
dl.base dd,
dl.base_wide dd {
	border-bottom: 1px solid var( --sitefgcolor_t30 );
}
@media (max-width: 575.98px) {
	dl.base,
	dl.base_wide {
		grid-template-columns: 1fr;
	}
	dl.base dt,
	dl.base_wide dt {
		border-bottom: 0;
		margin-bottom: calc( var( --size-1 ) * 0.1 );
	}
	dl.base dd,
	dl.base_wide dd {
		grid-column-start: 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 .down
   .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; }
/* border-STYLE, nicht die Kurzschreibweise border: solid. Die Kurzform setzt
   border-width auf "medium" (3px) zurueck, und weil .tarrow hier NACH
   .arrborder1..17 steht (Zeile 201ff.), gewann sie: jeder Pfeil hatte
   3px ringsum statt 0 1px 1px 0 und war ein Quadrat, gedreht eine Raute.
   Die Strichstaerken hatten damit keinerlei Wirkung. Gemessen 22.09.2026;
   in guladev steht .tarrow vor .arrborder und war darum nie betroffen. */
.tarrow { border-style: solid; display: inline-block; }
/* Die Drehung gilt NUR am Pfeil, im Verbund mit .tarrow (wie .hrborder.dotted
   unten). Bis 20.10.2026 standen hier nackte .up/.left/.right/.down -- damit
   drehte sich JEDES Element mit einer dieser Klassen. Aufgefallen an einem
   [gula-callout align="left"]: aside.ps-callout.left stand auf dem Kopf.
   left/right sind gaengige Lageklassen (Callouts, figure.left/.right aus
   Site-Plugins, iImage ohne size), up/down setzt der Zeichenzaehler von
   Contact Form 7 (.wpcf7-character-count.up/.down).
   Gemessen 20.10.2026 in 35 lokalen DBs und 22 Live-Snapshots: ein einziger
   Pfeil im Inhalt, und der traegt .tarrow -- keiner ohne. guladev (root.css,
   "Arrows") hat noch die ungebundene Fassung, gula-block-bgimage bringt in
   bgimage.css ein eigenes nacktes .down mit (fuer i.arrow.down).
   .down fehlte beim Neubau und ist nachgetragen. */
.tarrow.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.tarrow.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.tarrow.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.tarrow.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,
 *  eine Kundensite 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
 *    Kundensite        -lesp1   6x  in gula_spalten_content   NICHT gerendert
 *                      -lesp1   1x  in gula_spalten_notes     NICHT gerendert
 *                      -textindent25 1x  ebenfalls notes      NICHT gerendert
 *
 *  Auf jener Kundensite 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 ); }