/*
	KUHN Engineering – Anpassungen an "Stellar" (HTML5 UP)
	Markenfarben: #000029 (Navy), #0266FF (Blau), #0ADEFB (Cyan), #FFFFFF
*/

/* Schrift (lokal gehostet, keine Verbindung zu Google) */

	@font-face {
		font-family: "Jost";
		font-style: normal;
		font-display: swap;
		font-weight: 100 900;
		src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
	}

	html {
		min-height: 100%;
	}

	/* Keine Einblend- und Drehanimation des Headers beim Laden */
	#header.alt > *,
	#header.alt .logo {
		transition: none !important;
	}

	/* Hintergrund (Style 4): Nachtblau oben → Blau unten */
	body {
		background-color: #0B1D51;
		background-image: url("images/overlay.png"), linear-gradient(180deg, #0B1D51 0%, #2F6FE0 100%);
	}

	body {
		color: rgba(255, 255, 255, 0.85);
		letter-spacing: 0;
	}

	/* Grundgrösse: alles im Template ist in em angegeben und skaliert mit */
	body, input, select, textarea {
		font-size: 11pt;
	}

	@media screen and (max-width: 736px) {
		body, input, select, textarea {
			font-size: 12pt;
		}
	}

	@media screen and (max-width: 360px) {
		body, input, select, textarea {
			font-size: 11pt;
		}
	}

	/* PC/Tablet: nur Fliesstext auf Handy-Grösse (≈ 12pt), Titel und Layout unverändert */
	@media screen and (min-width: 737px) {
		ul.checks li,
		ul.plain li,
		#kontakt dl.alt dt,
		#kontakt dl.alt dd {
			font-size: 1.09em;
		}
	}

	#wrapper,
	#nav {
		width: 60em;
	}

	h1, h2, h3, h4, h5, h6 {
		letter-spacing: -0.01em;
	}

	#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
		color: #000029;
	}

	#main a:hover {
		color: #0266FF !important;
	}

	/* Template-Grau durch eigene Blautöne ersetzen */
	#main > .main {
		border-top-color: #E1EBFB;
	}

	#main .icon.alt {
		border-color: #E1EBFB;
	}

	#main .icon.alt:hover {
		background-color: rgba(2, 102, 255, 0.06);
	}

	#main .icon.alt:active {
		background-color: rgba(2, 102, 255, 0.12);
	}

	/* Titellinie: Mitte des Hintergrundverlaufs (#0B1D51 → #2F6FE0) */
	#main header.major h2:after {
		background-image: none;
		background-color: #1D4699;
	}

/* Header */

	#header.alt {
		padding: 4.5em 2em 3.5em 2em;
	}

	#header.alt .logo {
		margin: 0;
		line-height: 1;
	}

	#header.alt .logo img {
		display: block;
		width: 400px;
		max-width: 85%;
		height: auto;
		margin: 0 auto;
	}

	#header p.claim {
		margin: 1.5em 0 0 0;
		color: rgba(255, 255, 255, 0.9);
		font-size: 1.1em;
		font-weight: 300;
		letter-spacing: 0.06em;
	}

	#header p.claim span {
		margin: 0 0.5em;
		opacity: 0.6;
	}

	@media screen and (max-width: 736px) {
		#header.alt {
			padding: 3em 1.5em 2.25em 1.5em;
		}

		#header.alt .logo img {
			width: 260px;
		}

		#header p.claim {
			margin-top: 1.25em;
			font-size: 0.95em;
		}

		#header p.claim span {
			margin: 0 0.3em;
		}
	}

/* Nav */

	#nav {
		background-color: #F4F8FF;
	}

	#nav.alt {
		background-color: rgba(244, 248, 255, 0.95);
	}

	#nav ul li a {
		font-weight: 300;
	}

	/* Hover: zarte hellblaue Pille */
	#nav ul li a:hover {
		background-color: rgba(2, 102, 255, 0.07);
		box-shadow: none;
		color: #3B3E5C;
	}

	/* Aktiv: weisse Pille mit leichtem Schatten, Schrift blau (auch beim Hover) */
	#nav ul li a.active,
	#nav ul li a.active:hover {
		background-color: #ffffff;
		box-shadow: 0 1px 3px rgba(0, 0, 41, 0.10), 0 1px 2px rgba(0, 0, 41, 0.06);
		color: #0266FF;
	}

/* Über: Einleitung und zwei Karten, Desktop nebeneinander, Mobile untereinander */

	#einleitung .intro {
		max-width: 40em;
		margin: 0 auto;
		font-size: 1.1em;
		font-weight: 300;
		line-height: 1.7;
		text-align: center;
		color: #3B3E5C;
	}

	/* PC/Tablet: Einleitung etwas grösser (Handy unverändert) */
	@media screen and (min-width: 737px) {
		#einleitung .intro {
			font-size: 1.2em;
		}
	}

	@media screen and (max-width: 736px) {
		#einleitung .intro {
			font-size: 1em;
			text-align: left;
		}
	}

	.cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2em;
	}

	.card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 2.25em;
		border-radius: 0.5em;
		background: #F4F8FF;
		border: 1px solid #E1EBFB;
	}

	.card h3 {
		margin: 0 0 0.75em 0;
		font-size: 1.6em;
	}

	.card .checks {
		flex-grow: 1;
	}

	.card .card-links {
		align-self: flex-end;
		margin: 0.5em 0 0 0;
	}

	.card-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 3.5em;
		height: 3.5em;
		margin: 0 0 1.25em 0;
		border-radius: 0.75em;
		background: linear-gradient(45deg, #0266FF, #0ADEFB);
		color: #ffffff;
		font-size: 1em;
	}

	.card-icon.icon:before {
		font-size: 1.6em;
		line-height: 1;
	}

	.card-icon.brand,
	.card-icon.outline {
		background: #ffffff;
		border: 1px solid #E1EBFB;
	}

	.card-icon.outline {
		color: #3B3E5C;
	}

	.card-icon.outline:before {
		font-size: 1.35em;
	}

	.card-icon.brand img {
		width: 2.2em;
		height: auto;
	}

	@media screen and (max-width: 980px) {
		.cards {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.5em;
		}
	}

	@media screen and (max-width: 480px) {
		.card {
			padding: 1.5em;
		}
	}

/* Listen */

	ul.checks {
		list-style: none;
		padding: 0;
		margin: 0 0 1.5em 0;
	}

	ul.checks li {
		position: relative;
		padding-left: 1.5em;
		margin-bottom: 0.5em;
	}

	ul.checks li:before {
		content: "–";
		position: absolute;
		left: 0.1em;
		top: 0;
		color: #3B3E5C;
	}

	ul.plain {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	ul.plain li,
	.features ul.plain li {
		width: auto;
		margin: 0;
		padding: 0.6em 0;
		border-top: 1px solid #E1EBFB;
	}

	.nowrap {
		white-space: nowrap;
	}

	ul.plain li:first-child {
		border-top: 0;
	}

/* Angebot: Raster, Desktop 2 × 2, Mobile untereinander */

	.features.grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2em;
		width: 100%;
		margin: 0;
	}

	/* Boxen wie bei den Karten unter «Über» */
	.features.grid > li,
	.features.grid > li:nth-child(n) {
		width: auto;
		margin: 0;
		padding: 2.25em;
		border-radius: 0.5em;
		background: #F4F8FF;
		border: 1px solid #E1EBFB;
	}

	.features.grid > li .card-icon {
		margin-bottom: 1em;
	}

	/* Gleich wie die Kartentitel unter «Über» (.card h3) */
	.features.grid > li h3 {
		margin-bottom: 0.5em;
		font-size: 1.6em;
	}

	@media screen and (max-width: 736px) {
		.features.grid {
			grid-template-columns: minmax(0, 1fr);
			gap: 1.5em;
		}
	}

	@media screen and (max-width: 480px) {
		.features.grid > li,
		.features.grid > li:nth-child(n) {
			padding: 1.5em;
		}
	}

/* Footer / Kontakt */

	/* Footer ist nicht mehr zweispaltig: Template-Versatz (-2em) aufheben */
	#footer {
		width: 100%;
		margin-left: 0;
		padding-top: 3.5em;
	}

	#kontakt .contact-details {
		display: inline-block;
		margin: 0 auto;
		text-align: left;
	}

	#kontakt .icons {
		margin-top: 1em;
	}

	#footer .footer-claim {
		width: 100%;
		margin: 0 0 1.5em 0;
		text-align: center;
		font-size: 1.1em;
		font-weight: 300;
		letter-spacing: 0.06em;
		color: rgba(255, 255, 255, 0.9);
	}

	#footer .footer-claim span {
		margin: 0 0.5em;
		opacity: 0.6;
	}

	#footer .footer-logo {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 2em 0;
	}

	#footer .footer-logo img {
		display: block;
		width: 72px;
		max-width: 100%;
		height: auto;
	}

	@media screen and (max-width: 736px) {
		#footer {
			padding-top: 2.5em;
		}

		#footer .footer-claim {
			margin-bottom: 1.25em;
			font-size: 0.95em;
		}

		#footer .footer-claim span {
			margin: 0 0.3em;
		}

		#footer .footer-logo {
			margin-bottom: 1em;
		}

		#footer .footer-logo img {
			width: 56px;
		}
	}

	/* Hover im Footer: weiss bleiben, Unterstreichung durchziehen */
	#footer a:hover {
		color: #ffffff !important;
		border-bottom-style: solid;
		border-bottom-color: #ffffff;
	}

	#footer .icon.alt:hover {
		background-color: rgba(255, 255, 255, 0.15);
		border-color: rgba(255, 255, 255, 0.7);
	}

	#footer .copyright {
		color: rgba(255, 255, 255, 0.75);
		text-align: center;
	}