/* ============================================================
   modern.css  –  Optionaler "Modern-Look" (Overlay)
   ------------------------------------------------------------
   Diese Datei ueberschreibt nur das Aussehen und laesst die
   Original-CSS unangetastet. Komplett rueckgaengig machbar:
   einfach die <link ...modern.css>-Zeile in index.php entfernen
   (oder diese Datei loeschen) -> Originaldesign ist sofort zurueck.
   ============================================================ */

:root {
	--pico-blue:        #2b5990;
	--pico-blue-dark:   #1f4470;
	--pico-blue-light:  #3d74b8;
	--pico-red:         #d01e1e;
	--pico-ink:         #233040;
	--pico-muted:       #5b6b7b;
	--pico-bg:          #f4f6f9;
	--pico-card:        #ffffff;
	--pico-radius:      12px;
	--pico-shadow:      0 6px 20px rgba(20, 40, 70, .08);
	--pico-shadow-hov:  0 14px 34px rgba(20, 40, 70, .16);
}

/* ---------- Grundlagen / Typografie ---------- */
body {
	background: #f4f6f9 !important;
	color: #233040 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
	letter-spacing: .1px;
}
h1, h2, h3, h4, h5, .section-header {
	font-family: 'Raleway', 'Open Sans', sans-serif;
	color: #233040;
	letter-spacing: .2px;
}
p { line-height: 1.7; }
a { transition: color .18s ease; }
a:hover, a:focus { text-decoration: none; }

/* ---------- Navigation ---------- */
.navbar.navigation-main,
.navbar-default.navigation-main {
	background: rgba(255,255,255,.92) !important;
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);
	border: 0 !important;
	box-shadow: 0 2px 14px rgba(20,40,70,.10) !important;
}
.navbar.navigation-main .navbar-nav > li > a {
	color: #233040 !important;
	font-weight: 600;
	border-radius: 8px;
	margin: 8px 2px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: background .18s ease, color .18s ease;
}
.navbar.navigation-main .navbar-nav > li > a:hover,
.navbar.navigation-main .navbar-nav > li > a:focus {
	color: #2b5990 !important;
	background: rgba(43,89,144,.08) !important;
}
.navbar.navigation-main .navbar-nav > li.menuactive > a {
	color: #2b5990 !important;
	background: rgba(43,89,144,.12) !important;
}
.navbar-brand img { transition: transform .2s ease; }
.navbar-brand:hover img { transform: scale(1.04); }

/* ---------- Dropdown im Menue ---------- */
.navbar.navigation-main .dropdown-menu {
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 30px rgba(20,40,70,.16) !important;
	padding: 8px !important;
	margin-top: 6px;
	min-width: 240px;
}
.navbar.navigation-main .dropdown-menu > li > a {
	border-radius: 8px;
	padding: 10px 14px;
	font-weight: 600;
	color: #233040 !important;
	white-space: normal;
	transition: background .18s ease, color .18s ease;
}
.navbar.navigation-main .dropdown-menu > li > a:hover,
.navbar.navigation-main .dropdown-menu > li > a:focus {
	background: rgba(43,89,144,.08) !important;
	color: #2b5990 !important;
}
.navbar.navigation-main .open > a,
.navbar.navigation-main .open > a:hover,
.navbar.navigation-main .open > a:focus {
	background: rgba(43,89,144,.12) !important;
	color: #2b5990 !important;
}
.navbar.navigation-main .dropdown-toggle .caret { margin-left: 5px; }

/* ---------- Buttons ---------- */
.btn {
	border-radius: 8px !important;
	font-weight: 600;
	letter-spacing: .3px;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease !important;
	border: 0 !important;
}
.btn-primary {
	background: #2b5990 !important;
	box-shadow: 0 6px 16px rgba(43,89,144,.28) !important;
	padding: 10px 20px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background: #1f4470 !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(43,89,144,.36) !important;
}

/* ---------- Section-Header (sauber + zentriert) ----------
   Original ist eine absolut positionierte weisse "Pille" mit
   Bild-Endkappen (::before/::after). Wir machen daraus eine
   normale, mittig stehende Ueberschrift mit Akzentstrich. */
.section-header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	height: auto !important;
	line-height: 1.25 !important;
	white-space: normal !important;
	display: block !important;
	width: auto !important;
	background: transparent !important;
	border: 0 !important;
	text-align: center !important;
	text-transform: uppercase;
	font-weight: 700 !important;
	font-size: 28px !important;
	color: #233040 !important;
	margin: 0 auto 34px !important;
	padding: 0 0 16px !important;
}
/* linke Bild-Kappe abschalten */
.section-header:before {
	display: none !important;
	content: none !important;
}
/* rechte Bild-Kappe in einen zentrierten Akzentstrich verwandeln */
.section-header:after {
	content: '' !important;
	background: linear-gradient(90deg, #2b5990, #3d74b8) !important;
	width: 60px !important;
	height: 4px !important;
	border-radius: 4px !important;
	position: absolute !important;
	left: 50% !important;
	right: auto !important;
	bottom: 0 !important;
	top: auto !important;
	transform: translateX(-50%) !important;
	display: block !important;
}

/* ---------- Karten: Leistungen / Produkte ---------- */
.product-box {
	background: #fff;
	border-radius: 12px;
	padding: 30px 24px;
	box-shadow: 0 6px 20px rgba(20,40,70,.08);
	border: 1px solid rgba(20,40,70,.05);
	transition: transform .22s ease, box-shadow .22s ease;
}
.product-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(20,40,70,.16);
}
.product-box .big-icon {
	color: #2b5990;
	font-size: 42px;
	margin: 6px 0 14px;
	display: inline-block;
}

/* ---------- Leistungs-Karten gleich hoch + Button unten ---------- */
.products-container .row {
	display: flex;
	flex-wrap: wrap;
}
.products-container .row > .product-box {
	display: flex;
	flex-direction: column;
	float: none; /* Bootstrap-Float aufheben, damit Flex greift */
}
.products-container .product-box .btn {
	margin-top: auto; /* Button immer am unteren Rand */
}
.products-container .product-box .big-icon {
	align-self: center; /* Symbol mittig (Flex-Spalte richtet sonst links aus) */
}

/* ---------- Maschinen-Kacheln ---------- */
.machine-container > div {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(20,40,70,.08);
	transition: transform .22s ease, box-shadow .22s ease;
	background: #fff;
}
.machine-container:hover > div {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(20,40,70,.18);
}
.machine-container img { transition: transform .35s ease; }
.machine-container:hover img { transform: scale(1.05); }

/* ---------- Inhaltsbloecke / Hintergruende ---------- */
.content-bg1, .content-bg2 { background: #eef2f7 !important; }
.content-block { padding-top: 48px; padding-bottom: 48px; }

/* ---------- Formulare ---------- */
.form-control {
	border-radius: 8px !important;
	border: 1px solid #d7dee7 !important;
	box-shadow: none !important;
	transition: border-color .18s ease, box-shadow .18s ease;
	padding: 10px 14px;
	height: auto;
}
.form-control:focus {
	border-color: #2b5990 !important;
	box-shadow: 0 0 0 3px rgba(43,89,144,.15) !important;
}

/* ---------- Kontakt-/Sidebar-Box ---------- */
.sidebar-box {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 20px rgba(20,40,70,.08);
	border: 1px solid rgba(20,40,70,.05);
}
.sidebar-box .small-icon { color: #2b5990; }
.sidebar-box a { color: #2b5990; }
.sidebar-box a:hover { color: #1f4470; }

/* ---------- Newsticker ---------- */
.ticker-content { padding: 12px 16px; }
.badgeyo { background: #d01e1e; border-radius: 6px 0 0 6px; }

/* ---------- Footer ---------- */
.footer2 {
	background: #1f2b3a !important;
	color: #c7d2df !important;
	padding: 22px 15px !important;
	font-size: 14px;
	letter-spacing: .3px;
}
.footer2 a { color: #fff !important; opacity: .9; }
.footer2 a:hover { opacity: 1; color: #8fb4e6 !important; }

/* ---------- sanftes Scrollverhalten ---------- */
html { scroll-behavior: smooth; }