/* Eine Schriftgroessen-Skala fuer die ganze Seite
   ==============================================
   Vorher standen 26 verschiedene Groessen im Einsatz: fuenf verschiedene
   H1-Groessen (44/52/56/66/73), acht verschiedene H2 und Abstufungen wie
   24/25/26 oder 18/19/20, die niemand als Unterschied liest.

   Jetzt gibt es sieben Stufen. Jede ist ein clamp(): der erste Wert gilt auf
   dem Handy, der letzte auf dem Desktop, dazwischen waechst sie mit der
   Fensterbreite. Damit entfallen die meisten Sonderregeln in den
   Medienabfragen - eine Stufe regelt beide Enden selbst.

   Wo eine Stufe steht, steht sie ueberall: Aendert man hier eine Zahl,
   aendern sich alle Stellen dieser Ebene mit.

   Bewusst NICHT eingebunden: die Kopfzeile (header-overlay.css) und das
   Megamenue. Beide sind Navigation, keine Inhaltsebene - ihre Groessen sind
   auf die Pille und den Glas-Knopf abgestimmt. */
:root {
	/* 1 - Seiten-Ueberschrift (H1). Eine pro Seite. */
	--mh-t1: clamp(34px, 4.6vw, 56px);

	/* 2 - Abschnitts-Ueberschrift (H2) und der Fuss-Claim. */
	--mh-t2: clamp(28px, 3.2vw, 38px);

	/* 3 - Grosse Kartentitel, Zitate, Intro-Lead. */
	--mh-t3: clamp(22px, 2.2vw, 26px);

	/* 4 - H3, Lead-Absaetze, Etiketten mit Gewicht, Hero-Intro. */
	--mh-t4: clamp(19px, 1.7vw, 20px);

	/* 5 - Fliesstext. Die Ebene, in der der meiste Text steht. */
	--mh-t5: 17px;

	/* 6 - Karten-Text, Formularfelder, Schaltflaechen, Fussleiste. */
	--mh-t6: 15px;

	/* 7 - Eyebrow, Etiketten, Feldnamen, Ziffern. Kleiner als 13px wird
	   auf dem Handy unlesbar, deshalb ist hier Schluss. */
	--mh-t7: 13px;
}


/* Ueberschriften, die noch aus dem Theme kommen
   ---------------------------------------------
   Der Titel-Baustein des Themes (.sc_item_title) rendert je nach Stelle als
   h1 bis h3 und bringt eigene Groessen mit - auf der Startseite waren das
   57px fuer die H1 und 14px fuer die Zeile darueber. Statt die Bausteine
   umzubauen, hoeren sie hier auf dieselbe Skala.
   Ein Element im Selektor (h1, h2 ...) plus eine Klasse: das schlaegt die
   Regeln des Themes, die mit einer Klasse allein arbeiten. */
h1.sc_item_title { font-size: var(--mh-t1); }
h2.sc_item_title { font-size: var(--mh-t2); }
h3.sc_item_title { font-size: var(--mh-t4); }
.sc_item_subtitle { font-size: var(--mh-t7); }

/* Der Hero-Slogan ist die bewusste Ausnahme
   ----------------------------------------
   "Mit grossen Spruengen zum Erfolg." laeuft ueber eine eigene Groesse
   (--mh-slogan-size in hero-scroll.css). Sie ist nicht Teil der Skala, weil
   der Abschnitt darunter genau den Platz freihaelt, den der zweizeilige
   Slogan einnimmt - die Groesse ist dort eine Layoutgroesse, keine
   Textgroesse. Wer sie aendert, verschiebt den Abstand mit. */

/* Reste aus dem Theme, die noch eigene Groessen mitbrachten
   --------------------------------------------------------
   Der Block ueber der Fussleiste (Telefon, E-Mail, soziale Netze) und die
   Sprunglinks stammen aus der Vorlage. Gemessen brachten sie auf dem Handy
   16px und 18px mit - Groessen, die sonst nirgends vorkommen. */
.elementor-heading-title,
.elementor-heading-title a {
	font-size: var(--mh-t5);
}

/* !important, weil das Theme die Namen ueber eine Kette aus fuenf Klassen
   setzt (.sc_socials.sc_socials_icons_names .socials_wrap .social_item ...)
   und im Handy-Bereich noch einmal nachlegt. Dagegen kaeme nur eine ebenso
   lange Kette an - die waere unlesbar und beim naechsten Theme-Update falsch. */
.social_name {
	font-size: var(--mh-t6) !important;
}

.nexio_skip_link {
	font-size: var(--mh-t6);
}

/* Beitragsseiten
   --------------
   Die Blog-Vorlage kommt aus dem Theme und brachte eigene Groessen mit:
   gemessen 57px fuer den Titel, 47px und 35px fuer die Zwischenueberschriften,
   dazu 18, 17, 16 und 14px im Text. Jetzt gilt auch hier die Skala.
   Ein Element plus eine Klasse im Selektor, damit die Theme-Regeln nicht
   gewinnen. */
h1.post_title { font-size: var(--mh-t1); }
.entry-content h2 { font-size: var(--mh-t2); }
.entry-content h3 { font-size: var(--mh-t4); }
.entry-content h4,
.entry-content h5,
.entry-content h6 { font-size: var(--mh-t4); }

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th { font-size: var(--mh-t5); }

.entry-content blockquote p { font-size: var(--mh-t3); }

.post_meta_other,
.post_meta_other .post_meta_item { font-size: var(--mh-t7); }

/* Keine automatische Worttrennung in Ueberschriften
   -------------------------------------------------
   Das Theme trennt Ueberschriften automatisch. Auf dem Handy stand da
   "Der Unterschied in ei-nem Satz", "Sicatron Webauf-tritt", "Weitere
   Refe-renzen" und "Alle Leistungen im Be-reich".

   Die Regel galt frueher nur fuer drei Auswahlen (h1.post_title und
   Ueberschriften innerhalb von .entry-content) - alle eigenen Ueberschriften
   ausserhalb davon wurden weiter getrennt. Jetzt gilt sie fuer jede
   Ueberschrift und fuer die Textelemente, die wie eine wirken.

   manual statt none: Ein bewusst gesetztes weiches Trennzeichen (­) soll
   weiter greifen koennen, etwa bei einem sehr langen Firmennamen. Nur das
   automatische Trennen faellt weg.

   overflow-wrap: break-word bleibt als Notausgang - ein Wort, das breiter ist
   als die Spalte, wird umgebrochen statt ueber den Rand zu laufen. */
h1, h2, h3, h4, h5, h6,
.sc_item_title,
.sc_item_title_text,
.mh_hero_slogan,
.ref_card_title,
.proj_fakt_titel,
.mh_services_titel,
.mh_eyebrow,
summary {
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
}