@charset "UTF-8";
/* === LogoMotion CSS – Version 2024-06-final-v10 – Content ohne Spaltenlinie === */
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator       YAML Builder V1.2 (http://builder.yaml.de)
 * @file          logomotion.css
 * @-yaml-minver  3.2
 *
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(nav_hlist.css);
@import url(nav_vlist.css);
@import url(basemod.css);
@import url(content.css);
@import url(mailform.css);

/* import print layout | Druck-Layout einbinden */
@import url(yaml/print/print_draft.css);
@import url(print.css);

/* =========================================================
   LogoMotion – projektspezifische Ergänzungen
   (Schriften, Content-Typologie, Wartungs-/Formularseite)
   ========================================================= */
@media screen, projection
{
	/* --- Frutiger-Schriften einbinden --- */
	@font-face {
		font-family: "Frutiger 45 Light";
		src: url("../fonts/frutiger_light.woff2") format("woff2"),
		     url("../fonts/frutiger_light.ttf") format("truetype");
		font-weight: normal; font-style: normal; font-display: swap;
	}
	@font-face {
		font-family: "Frutiger 55 Roman";
		src: url("../fonts/frutiger_roman.woff2") format("woff2"),
		     url("../fonts/frutiger_roman.ttf") format("truetype");
		font-weight: normal; font-style: normal; font-display: swap;
	}

	body {
		font-family: "Frutiger 55 Roman", Trebuchet, Tahoma, Arial, sans-serif;
	}

	/* ---------------------------------------------------------------
	   LAYOUT-RAND (sauber neu definiert)
	   Prinzip: Container exakt auf Teaser-Breite (1024px), randlos
	   zentriert. Dadurch schließen Navi, Teaser und Balken links wie
	   rechts bündig mit dem grauen Außenhintergrund ab – ohne Padding-
	   Streifen, ohne Kanten-Artefakte. Die Original-Spaltenmaße
	   (info_menu 267, col1 756 ...) passen exakt in diese 1024px.
	   --------------------------------------------------------------- */
	.page_margins {
		width: 1024px;
		padding: 0;
		margin: 0 auto;
	}
	/* #main_nav hatte padding-right:3em – entfernen, sonst ragt die
	   rechte Navigationsgruppe nicht bis zum Rand. */
	#main_nav { padding-right: 0; }
	/* Teaser exakt Containerbreite, nicht skalieren */
	#teaser img { display: block; width: 1024px; height: auto; }

	/* Vertikale Trennlinie zwischen linker Spalte und Content.
	   Im Kopf liefert sie das Teaser-Bild; im Content-Bereich als rechter
	   Rahmen der linken Spalte (#col3) – #col3 reicht bis zum Seitenende,
	   daher läuft die Linie über die volle Seitenhöhe durch. */
	#col3 { border-right: 1px solid #ffffff; }
	/* Die (jetzt leere) .vlist hat im Original margin:5em 0 1.5em 0, was
	   #col3 nach unten drückt und oben eine Lücke in der Linie erzeugt.
	   Margin entfernen, damit die Linie direkt am grauen Balken beginnt. */
	#col3 .vlist { margin: 0; }

	/* --- Content: Überschrift + Typologie-Bilder --- */

	/* Überschriften-Grafik (dcbd6dac97.png) – sitzt in .headline und
	   ragt per Original-Regel (.headline margin-left:-150px) nach links aus
	   dem Content-Padding heraus, bündig zum Teaser. */
	#col1_content .headline img {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Subline wie im Original */
	.typo-sub {
		margin: 0 0 50px 0;
		color: #444;
		font-size: 116.66%;
		line-height: 1.4em;
	}

	.typologie { margin: 0; padding: 0; }

	/* die einzelnen Typologie-Bilder, 50px Abstand untereinander */
	.typologie .typo-img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 0 50px 0;
	}
	.typologie .typo-img:last-child { margin-bottom: 0; }

	/* --- Wartungs-Hinweisbox --- */
	.hinweis {
		background: #fff;
		border-left: 4px solid #c1121f;
		padding: 16px 20px;
		margin: 0 0 1.5em 0;
	}
	.hinweis h2 {
		color: #c1121f;
		font-family: "Frutiger 45 Light", Trebuchet, Arial, sans-serif;
		font-size: 150%;
		margin: 0 0 .4em 0;
	}
	.hinweis p { margin: 0; color: #444; }

	/* --- Kontakt-Formular (eigenes, schlankes Styling) --- */
	.kontaktform { margin: 0 0 1em 0; }
	.kontaktform .feld { margin-bottom: 14px; overflow: hidden; }
	.kontaktform label {
		display: block;
		font-weight: bold;
		margin-bottom: 4px;
		color: #2a2a2a;
	}
	.kontaktform input,
	.kontaktform textarea {
		width: 100%;
		padding: 8px 9px;
		border: 1px solid #b9b9b9;
		background: #fff;
		font-family: inherit;
		font-size: 100%;
		color: #2a2a2a;
	}
	.kontaktform input:focus,
	.kontaktform textarea:focus { outline: 0 none; border-color: #c1121f; }
	.kontaktform textarea { min-height: 120px; resize: vertical; }
	.kontaktform .pflicht { color: #c1121f; }
	.kontaktform button.send {
		background: #c1121f; color: #fff; border: 0 none; cursor: pointer;
		padding: 10px 26px; font-size: 100%;
		font-family: "Frutiger 55 Roman", Trebuchet, Arial, sans-serif;
	}
	.kontaktform button.send:hover { background: #9d0e19; }
	.zurueck { display: inline-block; margin-top: 12px; font-size: 91.6%; color: #444; }

	/* --- Kontakt-Bereich unten: "Bitte klicken"-Grafik + Kontakt-Link --- */
	/* Original-Absolutpositionierung aus basemod.css aufheben,
	   damit die Grafik im normalen Fluss unter den Bildern steht. */
	#col1_content #contact_link {
		position: relative;
		bottom: auto;
		right: auto;
		margin-top: 50px;
		text-align: left;
	}
	#col1_content #contact_link .klick-grafik {
		display: inline-block;
		vertical-align: bottom;
		line-height: 0;
		background: none;
		padding: 0;
		width: 420px;
	}
	#col1_content #contact_link .klick-grafik img {
		display: block;
		max-width: 100%;
		height: auto;
	}
	/* Kontakt-Textlink rechts neben der Hand, mit Original-Pfeil */
	/* "Bitte klicken"-Grafik in voller Breite; Link rechts daneben */
	#col1_content #contact_link a.klick-text {
		position: absolute;
		right: -120px;
		bottom: 28px;
		color: #000;
		font-size: 118%;
		background-image: url("../img/right_arrow.gif");
		background-repeat: no-repeat;
		background-position: left center;
		line-height: 1.6em;
		padding-left: 11px;
		text-decoration: none;
		white-space: nowrap;
	}
	#col1_content #contact_link a.klick-text:hover { text-decoration: underline; }
}