/*
FUG - Fernwärme Ulm Template
creation Date: 2026-10-23
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ===========================================================================
   SCHRIFTEN
   Zwei Familien:
     Barlow         Ueberschriften, Navigation, Schaltflaechen. Technisch,
                    leicht schmal laufend - passt zu Versorgung/Infrastruktur
                    und haelt lange deutsche Komposita in Headlines im Zaum.
                    Zwei feste Schnitte: Medium (500) und SemiBold (600).
     Source Sans 3  Fliesstext. Variable Font (wght 200-900), sehr gut
                    lesbar in Fliesstextgroessen, aufrecht + kursiv.

   Die Pfade sind relativ zu dieser Datei (css/ -> font/), damit die Angaben
   ohne PHP auskommen und die Datei sich normal cachen laesst.
   font-display: swap - der Text steht sofort, die Schrift wird nachgereicht.
   =========================================================================== */

@font-face {
	font-family: "Barlow";
	src: url("../font/Barlow-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../font/Barlow-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../font/SourceSans3-VariableFont_wght.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("../font/SourceSans3-Italic-VariableFont_wght.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}


/* ===========================================================================
   GLOBALE SCHRIFTSTILE
   Alle Schriftangaben der Seite kommen aus diesen Variablen - Abschnitte
   bekommen keine eigenen Groessen, sondern nutzen die Rollen-Klassen aus
   template.css (.font_h1 ... .font_footer). So aendert sich eine Rolle an
   genau einer Stelle.

   Rolle            Schrift / Schnitt       Groesse (mobil - desktop)  Zeile
   H1 / Hero        Barlow SemiBold         34 - 64 px                 1.08
   H2               Barlow SemiBold         28 - 44 px                 1.15
   H3               Barlow SemiBold         23 - 30 px                 1.2
   H4               Barlow SemiBold         20 - 23 px                 1.3
   H5               Barlow SemiBold         19 px                      1.35
   H6 / Dachzeile   Barlow SemiBold, VERS.  16 px                      1.35
   Lead / Intro     Source Sans 3 Regular   19 - 21 px                 1.55
   Fliesstext       Source Sans 3 Regular   17 - 18 px                 1.6
   Klein / Notiz    Source Sans 3 Regular   15 px                      1.5
   Navi / Buttons   Barlow Medium           16 px                      1.3
   Footer           Source Sans 3 Regular   15 px                      1.5

   Die Headlines skalieren fluessig mit clamp() zwischen den Werten,
   der Fliesstext springt unter 600px auf 17px (responsive.css).
   =========================================================================== */
:root {
	--font-head: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-text: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Staerken */
	--weight-head: 600;        /* Headlines */
	--weight-ui: 500;          /* Navigation, Schaltflaechen */
	--weight-text: 400;        /* Fliesstext */
	--weight-text-strong: 600; /* Hervorhebung im Fliesstext */
	--weight-text-light: 300;  /* .light */

	/* Groessen und Zeilenhoehen */
	--fs-h1: clamp(34px, 1.4rem + 3vw, 64px);
	--lh-h1: 1.08;
	--fs-h2: clamp(28px, 1.2rem + 1.8vw, 44px);
	--lh-h2: 1.15;
	--fs-h3: clamp(23px, 1.1rem + 0.8vw, 30px);
	--lh-h3: 1.2;
	--fs-h4: clamp(20px, 1rem + 0.4vw, 23px);
	--lh-h4: 1.3;
	--fs-h5: 19px;
	--lh-h5: 1.35;
	--fs-h6: 16px;
	--lh-h6: 1.35;

	--fs-lead: clamp(19px, 1rem + 0.35vw, 21px);
	--lh-lead: 1.55;
	--fs-text: 18px;
	--lh-text: 1.6;
	--fs-small: 15px;
	--lh-small: 1.5;
	--fs-ui: 16px;
	--lh-ui: 1.3;
	--fs-footer: 15px;
	--lh-footer: 1.5;

	/* Laufweiten */
	--ls-head: -0.005em;
	--ls-caps: 0.08em;         /* H6 / Dachzeilen in Versalien */
	--ls-ui: 0.01em;
}