/* =========================================================================
   MODULDREI: Stylesheet der Referenz-Vorlage
   =========================================================================
   Wird nur auf Beitraegen mit dieser Vorlage geladen (siehe inc/m3-templates.php).
   Alle Regeln haengen an der Klasse .m3-referenz am body-Element, damit nichts
   ausserhalb der Vorlage beeinflusst wird.

   Aufbau und Werte stammen aus dem abgestimmten Entwurf
   https://kunden.masdemas.de/modul3-referenz-vorlage/ Die Farben kommen aus der
   Theme-Palette und nicht als feste Hex-Werte: aendert MODULDREI eine Hausfarbe
   im Customizer, zieht die Seite mit. Die Hex-Werte dahinter sind nur der
   Rueckfall, falls eine Variable fehlt. Sie stammen aus der Messung der
   Testumgebung vom 10.08.2026 und weichen bewusst vom HTML-Entwurf ab, dort
   standen noch die alten Werte.

   Schriften werden hier nicht geladen. Exo und Roboto bringt das Theme bereits
   mit.
   ========================================================================= */

.m3-referenz {
	/* Aktionsfarbe, Buttons und Nummern */
	--m3-pink: var(--global-palette1, #d13e6f);
	/* Dunkle Baender und Fliesstext */
	--m3-dunkel: var(--global-palette3, #23394a);
	/* Farbiges Inhaltsband und Buttons */
	--m3-blau: var(--global-palette4, #497593);
	/* Haken der Leistungsliste und Zitat-Band */
	--m3-teal: var(--global-palette6, #8fd3d1);
	/* Helle Flaechen */
	--m3-hell: var(--global-palette8, #dceeef);
	--m3-weiss: var(--global-palette9, #ffffff);

	--m3-schrift-titel: "Exo", "Segoe UI", Arial, sans-serif;
	--m3-schrift-text: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Breiter als der Blogbeitrag: hier stehen zwei Spalten und Karten
	   nebeneinander, kein durchgehender Lesetext. Der Lesetext selbst ist
	   trotzdem auf 760px begrenzt, siehe .lesen. */
	--m3-raster: 1200px;
	--m3-raster-innen: 40px;
}

/* -------------------------------------------------------------------------
   Grundgeruest
   ------------------------------------------------------------------------- */

/* Die Referenz liegt direkt im Seitengeruest des Themes, ohne dessen
   Inhaltsspalte. Grund: die Standardansicht stellt den Inhalt in eine schmale
   Spalte neben einer Seitenspalte, die farbigen Baender brauchen aber die
   volle Fensterbreite. */
.m3-referenz .m3-beitrag {
	font-family: var(--m3-schrift-text);
	font-size: 18px;
	line-height: 1.6;
	color: var(--m3-dunkel);
	background: var(--m3-weiss);
	overflow-x: hidden;
}

.m3-referenz .m3-beitrag img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Nur der obere Abstand wird zurueckgesetzt. Den unteren bestimmt jede
   Ueberschrift selbst ueber ihre Klasse. Stuende hier margin:0, gaebe es keinen
   Weg mehr, ihn per Klasse zu setzen: diese Regel nennt zwei Klassen und ein
   Element und gewinnt damit gegen jede Regel, die nur eine Klasse nennt. Genau
   daran klebten die Ueberschriften vorher an ihrem Text. */
.m3-referenz .m3-beitrag h1,
.m3-referenz .m3-beitrag h2,
.m3-referenz .m3-beitrag h3 {
	font-family: var(--m3-schrift-titel);
	margin-top: 0;
}

.m3-referenz .m3-beitrag p {
	margin: 0 0 22px;
}

.m3-referenz .m3-beitrag p:last-child {
	margin-bottom: 0;
}

/* Sektions-Geruest: aussen volle Breite (Farbband), innen das feste Raster */
.m3-referenz .section {
	width: 100%;
	padding: 64px 0;
}

.m3-referenz .section__inner {
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 0 var(--m3-raster-innen);
}

.m3-referenz .section--hell {
	background: var(--m3-hell);
}

.m3-referenz .section--teal {
	background: var(--m3-teal);
}

/* Das Band steht auf dem dunkleren Blau (palette4). Auf dem hellen Blau
   (palette5) erreicht weisse Schrift nur Kontrast 3.06 und ist schlecht
   lesbar. Dieselbe Korrektur wie in der Blog-Vorlage. */
.m3-referenz .section--blau {
	background: var(--m3-blau);
	color: var(--m3-weiss);
}

.m3-referenz .section--schmal {
	padding: 48px 0;
}

/* Nur fuer Screenreader: ergaenzt kurze Linktexte um das Ziel, ohne dass es
   sichtbar wird. */
.m3-referenz .nur-screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ueberschriften-Stufen, wie in der Blog-Vorlage.
   Abstaende nach Rueckmeldung vom 13.08.2026: unter der grossen Ueberschrift
   etwas enger, damit sie mit ihrem Text zusammengehoert, unter der kleinen
   Ueberschrift der Leistungsliste etwas luftiger, damit die Liste nicht
   klebt. */
/* Die Farbe steht ausdruecklich an jeder Ueberschrift. Das Theme setzt fuer
   h1 bis h3 eine eigene Farbe, und eine geerbte Farbe verliert immer gegen eine
   direkt gesetzte. Ohne diese Zeilen standen die Ueberschriften dunkel auf dem
   blauen Band, obwohl das Band weisse Schrift vererbt (gemessen am 13.08.2026
   am Live-Rendering). */
.m3-referenz .h-sektion {
	font-size: 38px;
	line-height: 1.15;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 20px;
	color: var(--m3-dunkel);
}

.m3-referenz .h-klein {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 0 26px;
	color: var(--m3-dunkel);
}

/* Auf den farbigen Baendern weiss */
.m3-referenz .section--blau .h-sektion,
.m3-referenz .section--blau .h-klein {
	color: var(--m3-weiss);
}

.m3-referenz .h-zentriert {
	font-family: var(--m3-schrift-titel);
	font-size: 21px;
	font-weight: 700;
	text-align: center;
	margin: 0;
	color: var(--m3-dunkel);
}

/* Lesetext bleibt schmal, auch wenn die Sektion breit ist: 760px ergeben rund
   70 Zeichen pro Zeile, gut lesbar sind 60 bis 80. */
.m3-referenz .lesen {
	max-width: 760px;
}

.m3-referenz .lesen a {
	color: var(--m3-blau);
}

/* Buttons */
.m3-referenz .btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--m3-schrift-text);
	font-size: 17px;
	line-height: 1.6;
	padding: 10px 24px;
	border-radius: 3px;
	text-decoration: none;
	background: var(--m3-blau);
	color: var(--m3-weiss);
	border: 0;
	transition: background .2s ease;
}

.m3-referenz .btn:hover,
.m3-referenz .btn:focus {
	background: var(--m3-dunkel);
	color: var(--m3-weiss);
}

.m3-referenz .btn--pink {
	background: var(--m3-pink);
}

.m3-referenz .btn--pink:hover,
.m3-referenz .btn--pink:focus {
	background: var(--m3-dunkel);
}

/* -------------------------------------------------------------------------
   Abschnitt 1: Projektkopf
   ------------------------------------------------------------------------- */

/* Einfarbiges dunkles Band. Kein Beitragsbild im Hintergrund (Rueckmeldung
   MODULDREI vom 25.08.2026, Begruendung steht in parts/kopf.php).

   Die Hoehe war fuer ein Foto ausgelegt und lag bei 440px. Ohne Bild stuenden
   darueber rund 250px leere Flaeche, deshalb jetzt 300px. Der Inhalt sitzt
   weiterhin unten, damit die Referenzen untereinander gleich aussehen. */
.m3-referenz .hero {
	position: relative;
	width: 100%;
	min-height: 300px;
	background: var(--m3-dunkel);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.m3-referenz .hero__inhalt {
	position: relative;
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 56px var(--m3-raster-innen);
	width: 100%;
	color: var(--m3-weiss);
}

.m3-referenz .hero__pfad {
	font-size: 15px;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .85);
}

.m3-referenz .hero__pfad a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}

.m3-referenz .hero__pfad a:hover {
	text-decoration: underline;
}

.m3-referenz .hero__kicker {
	font-family: var(--m3-schrift-titel);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--m3-weiss);
	margin: 0 0 18px;
}

/* Die Ueberschrift ist in der Regel das Kundenlogo. Ohne Logo steht der Titel
   als Text und braucht dieselbe Groesse wie im Blogbeitrag. */
.m3-referenz .hero__titel {
	font-size: clamp(30px, 3.1vw, 52px);
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0;
	color: var(--m3-weiss);
}

.m3-referenz .hero__logo {
	width: auto;
	max-width: 300px;
	max-height: 110px;
	height: auto;
}

/* -------------------------------------------------------------------------
   Abschnitt 2: Ueber das Projekt
   ------------------------------------------------------------------------- */

.m3-referenz .projekt {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px 64px;
	align-items: start;
}

/* Ohne Leistungsliste nimmt der Text die volle Breite, statt dass rechts eine
   Luecke steht. */
.m3-referenz .projekt--einspaltig {
	grid-template-columns: 1fr;
}

.m3-referenz .projekt__text {
	max-width: 70ch;
}

.m3-referenz .projekt__text a {
	color: var(--m3-weiss);
	text-decoration: underline;
}

.m3-referenz .projekt__text a:hover {
	text-decoration: none;
}

.m3-referenz .trenner {
	width: 120px;
	height: 6px;
	background: var(--m3-teal);
	border: 0;
	margin: 0 0 28px;
}

.m3-referenz .leistungen {
	list-style: none;
	margin: 0;
	padding: 0;
}

.m3-referenz .leistungen li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 14px;
	line-height: 1.5;
}

.m3-referenz .leistungen li:last-child {
	margin-bottom: 0;
}

.m3-referenz .leistungen svg {
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	fill: var(--m3-teal);
}

/* -------------------------------------------------------------------------
   Abschnitt 4: Vorgehen in Schritten
   ------------------------------------------------------------------------- */

.m3-referenz .grid-schritte {
	display: grid;
	gap: 20px;
	margin-top: 28px;
}

.m3-referenz .grid-schritte--2 {
	grid-template-columns: repeat(2, 1fr);
}

.m3-referenz .grid-schritte--3 {
	grid-template-columns: repeat(3, 1fr);
}

.m3-referenz .grid-schritte--4 {
	grid-template-columns: repeat(4, 1fr);
}

.m3-referenz .schritt {
	background: var(--m3-weiss);
	padding: 22px 20px;
}

.m3-referenz .schritt__zahl {
	font-family: var(--m3-schrift-titel);
	font-size: 26px;
	font-weight: 900;
	color: var(--m3-pink);
	line-height: 1;
	margin: 0 0 8px;
}

.m3-referenz .schritt__titel {
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0 0 8px;
	color: var(--m3-dunkel);
}

.m3-referenz .schritt__text {
	font-size: 16px;
	margin: 0;
	color: var(--m3-dunkel);
}

/* -------------------------------------------------------------------------
   Abschnitt 5: Zitat
   ------------------------------------------------------------------------- */

.m3-referenz .zitat {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.m3-referenz .zitat__text {
	font-family: var(--m3-schrift-titel);
	font-size: 27px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--m3-dunkel);
	margin: 0 0 12px;
	border: 0;
	padding: 0;
	quotes: none;
}

.m3-referenz .zitat__quelle {
	font-size: 16px;
	color: var(--m3-dunkel);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Abschnitt 6: Ergebnis
   ------------------------------------------------------------------------- */

.m3-referenz .grid-ergebnis {
	display: grid;
	gap: 24px;
	margin-top: 28px;
}

.m3-referenz .grid-ergebnis--2 {
	grid-template-columns: repeat(2, 1fr);
}

.m3-referenz .grid-ergebnis--3 {
	grid-template-columns: repeat(3, 1fr);
}

.m3-referenz .ergebnis {
	background: var(--m3-hell);
	padding: 26px 24px;
}

.m3-referenz .ergebnis__titel {
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--m3-dunkel);
}

.m3-referenz .ergebnis__text {
	font-size: 16px;
	margin: 0;
	color: var(--m3-dunkel);
}

/* -------------------------------------------------------------------------
   Abschnitt 7: Kontakt-Band
   ------------------------------------------------------------------------- */

.m3-referenz .cta {
	text-align: center;
	margin: 0;
}

.m3-referenz .cta__titel {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 900;
	margin: 0 0 12px;
	color: var(--m3-weiss);
}

.m3-referenz .cta__text {
	margin: 0 0 22px;
	color: var(--m3-weiss);
}

/* -------------------------------------------------------------------------
   Abschnitt 8 und 9: Weitere Projekte, Rueckweg
   ------------------------------------------------------------------------- */

.m3-referenz .grid-projekte {
	display: grid;
	gap: 24px;
	margin-top: 24px;
}

.m3-referenz .grid-projekte--2 {
	grid-template-columns: repeat(2, 1fr);
}

.m3-referenz .grid-projekte--1 {
	grid-template-columns: 1fr;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.m3-referenz .projektkarte {
	background: var(--m3-dunkel);
	color: var(--m3-weiss);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
}

.m3-referenz .projektkarte__titel {
	font-family: var(--m3-schrift-titel);
	font-size: 24px;
	line-height: 1.25;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: var(--m3-weiss);
}

.m3-referenz .projektkarte .btn {
	align-self: flex-end;
}

.m3-referenz .zurueck {
	text-align: center;
}

/* -------------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {

	.m3-referenz .section {
		padding: 48px 0;
	}

	.m3-referenz .h-sektion {
		font-size: 30px;
	}

	.m3-referenz .projekt {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.m3-referenz .grid-schritte--3,
	.m3-referenz .grid-schritte--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.m3-referenz .grid-ergebnis--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* -------------------------------------------------------------------------
   Handy
   ------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.m3-referenz {
		--m3-raster-innen: 20px;
	}

	.m3-referenz .section {
		padding: 40px 0;
	}

	.m3-referenz .hero {
		min-height: 260px;
	}

	.m3-referenz .hero__inhalt {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.m3-referenz .hero__kicker {
		font-size: 17px;
	}

	.m3-referenz .h-sektion {
		font-size: 26px;
	}

	.m3-referenz .zitat__text {
		font-size: 22px;
	}

	.m3-referenz .grid-schritte--2,
	.m3-referenz .grid-schritte--3,
	.m3-referenz .grid-schritte--4,
	.m3-referenz .grid-ergebnis--2,
	.m3-referenz .grid-ergebnis--3,
	.m3-referenz .grid-projekte--2 {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   Bedienung ueber die Tastatur
   -------------------------------------------------------------------------
   Das Theme entfernt die Umrandung des gerade gewaehlten Elements. Wer die
   Seite mit der Tabulatortaste bedient, sieht dann nicht, wo er steht. Diese
   Regel gilt nur innerhalb der Vorlage und nur bei Tastaturbedienung, mit der
   Maus bleibt alles wie gewohnt. */
.m3-referenz a:focus-visible,
.m3-referenz button:focus-visible {
	outline: 3px solid var(--m3-pink);
	outline-offset: 3px;
	border-radius: 2px;
}