/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
		Mastercut Framework v1.2, (C) 2026 MastercutMusic.de
		Main Stylesheet - Wenns läuft, fass es nie wieder an!
		Bisserl Chaos hier und da ... 
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
html {
font-size: 100%;
}
:root {
--dark-gray: #36454f;
--space-blue: #1675ab;
--engine-orange: #f07f34;
--light-smoke: #f4f4f4;
--light-smoke2: #d1c69e;
--bg-grau1: #2E3941;
--bg-grau2: #36454f;
--bg-grau3: #40525E;
--secondary-accent: #f07f34;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--dark-gray);
color: var(--light-smoke);
overflow-x: hidden;
}
.spacer {
padding-top: 50px;
background-color: transparent;
}
.tiny {
font-size: 0.7rem;
}
.impr {
letter-spacing: 0px;
font-size: 1.5rem;
line-height: 1.1;
}
.link {
color: var(--secondary-accent);
}
.link:hover {
color: var(--secondary-accent);
font-weight: bold;
}
.text-accent {
color: var(--secondary-accent);
}
.bg-grau { background-color: var(--dark-gray) !important;}
.bg-grau1 { background-color: var(--bg-grau1) !important;}
.bg-grau2 { background-color: var(--bg-grau2) !important;}
.bg-grau3 { background-color: var(--bg-grau3) !important;}
.bg-weiss { background-color: #fff !important;}
.bg-orange { background-color: var(--engine-orange) !important;}
.bg-smoke {background-color: var(--light-smoke) !important;}
.bg-blau { background-color: var(--space-blue) !important;}
.text-grau { color: var(--dark-gray) !important;}
.text-grau1 { color: var(--bg-grau1) !important;}
.text-grau2 { color: var(--bg-grau2) !important;}
.text-grau3 { color: var(--bg-grau3) !important;}
.text-weiss { color: #fff !important;}
.text-primary { color: #bebebe !important;}
.text-orange { color: var(--engine-orange) !important;}
.text-smoke { color: var(--light-smoke) !important;}
.text-smoke2 { color: var(--light-smoke2) !important;}
.text-blau { color: var(--space-blue) !important;}
.bg-verlauf-blau { 
padding: 5px;
background:
radial-gradient(circle at 90% 80%, rgba(0, 0, 0, 0.0) 0%, transparent 40%),
radial-gradient(circle at 0% 10%, rgba(22, 117, 171, 0.23) 0%, transparent 70%);
}
.bg-verlauf-orange { 
padding: 5px;
background:
radial-gradient(circle at 90% 40%, rgba(0, 0, 0, 0.0) 0%, transparent 40%),
radial-gradient(circle at 0% 10%, rgba(240, 127, 52, 0.23) 0%, transparent 70%);
}
.bg-verlauf-orange2 { 
padding: 5px;
background:
radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.3) 0%, transparent 15%),
radial-gradient(circle at 0% 10%, rgba(240, 127, 52, 0.13) 0%, transparent 70%);
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
					Dirty Hack, weil ich faul bin
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
a {
text-decoration: none;
}
a:link:not([class]) {
text-decoration: none;
color: var(--text-primary);
}
a:visited:not([class]) {
text-decoration: none;
color: var(--text-primary);
}
a:hover:not([class]) {
text-decoration: underline;
color: var(--text-primary);
}
a:active:not([class]) {
text-decoration: underline;
color: var(--text-primary);
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Schriftarten
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
@font-face {
font-display: swap;
font-family: 'Orbitron';
font-weight: 400 900; 
font-style: normal;
src: url('../css/Orbitron-VariableFont_wght.ttf') format('truetype-variations'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/Orbitron-VariableFont_wght.ttf') format('truetype-variations'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
font-display: swap;
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('../css/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
font-display: swap;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('../css/montserrat-v31-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/montserrat-v31-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
font-display: swap;
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: url('../css/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
font-display: swap;
font-family: 'Swanky and Moo Moo';
font-style: normal;
font-weight: 400;
src: url('../css/swanky-and-moo-moo-v24-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/swanky-and-moo-moo-v24-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
@font-face {
font-display: swap;
font-family: 'Qwigley';
font-style: normal;
font-weight: 400;
src: url('../css/qwigley-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../css/qwigley-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
.orbi {
font-family: 'Orbitron', sans-serif;
}
.mont {
font-family: 'Montserrat';
}
.qwigley {
font-family: 'Qwigley';
}
.swanky {
font-family: 'Swanky and Moo Moo';
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Spielereien
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
a {
text-decoration: none;
}
244, 244, 244, 1.0
h1, h2, h3, .nav-link {
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
.glueher {
filter: drop-shadow(0 0 5px rgba(244, 244, 244, 0.4))
drop-shadow(0 0 15px rgba(244, 244, 244, 0.4))
drop-shadow(0 0 30px rgba(244, 244, 244, 0.2));
transition: filter 0.3s ease-in-out;
}
.glueher-orange {
filter: drop-shadow(0 0 5px rgba(240, 127, 52, 0.3))
drop-shadow(0 0 15px rgba(240, 127, 52, 0.3))
drop-shadow(0 0 30px rgba(240, 127, 52, 0.2));
transition: filter 0.1s ease-in-out;
}
.glueher-blau {
filter: drop-shadow(0 0 5px rgba(22, 117, 171, 1.3))
drop-shadow(0 0 15px rgba(22, 117, 171, 0.3))
drop-shadow(0 0 30px rgba(22, 117, 171, 0.2));
transition: filter 0.1s ease-in-out;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Anker Fix
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
#datenschutz {
scroll-margin-top:8em;
}
#agb {
scroll-margin-top:8em;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Alarm Gedöns
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.alert-blau {
background-color: var(--space-blue);
color:#fff;
padding: 7px;
opacity: 0.9;
}
.alert-orange {
background-color: var(--engine-orange);
color:#fff;
padding: 7px;
opacity: 0.9;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Grafonaut Logos
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
#grafonautlogo{
max-width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
height: auto;
background-image: url('../img/logoround.png');
background-repeat: no-repeat;
background-size: cover;
animation: glitch 3000ms ease infinite;
}
#grafonautlogo:hover{
animation-play-state: paused;
}
.nav-grafonaut-header {
display: block;
max-height: 50px;
height: auto;
width: auto;
padding-right: 8px;
vertical-align: middle;
max-width: 70vw; 
}
.nav-grafonaut-textline {
font-family: 'Swanky and Moo Moo';
font-weight:100;
font-size: 1.2em;
white-space: nowrap;
opacity: .4;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Navigation
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.navbar {
background-color: rgba(54, 69, 79, 0.95);
border-bottom: 2px solid var(--space-blue);
backdrop-filter: blur(10px);
font-family: 'Orbitron', sans-serif;
transition: all 0.3s ease;
box-shadow: rgba(255, 107, 107, 0.2) 0px 5px 15px;
}
.navbar-brand {
font-family: 'Orbitron', sans-serif;
font-weight: 700;
color: var(--space-blue) !important;
font-size: 1.5rem;
}
.nav-link {
color: var(--light-smoke) !important;
font-size: 0.9rem;
margin: 0 15px;
transition: color 0.3s;
}
.nav-link:hover {
color: var(--engine-orange) !important;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
		Navi Fix für GetSimple weil intern vordefiniert
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
#navbarNav .topL {
color: var(--text-secondary) !important;
margin: 10px 10px;
position: relative;
transition: all 0.3s ease;
font-weight: 500;
}
#navbarNav .topL-a:hover, .topL-a:focus {
color: var(--text-secondary) !important;
left:100px;
top:100px;
}
#navbarNav .topL-a {
color: var(--text-secondary);
}
#navbarNav .topL-a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
background-color: var(--engine-orange);
bottom: -6px;
left: 0;
transition: width 0.4s ease;
}
#navbarNav .topL-a:hover .topL-a:focus {
color: var(--text-primary) !important;
}
#navbarNav .topL-a:hover::after {
width: 100%;
}
#navbarNav .topL-a:focus-visible {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.navbar-toggler {
background: var(--space-blue);
}
#navbarNav.topL-a.disabled, .topL-a:disabled {
color: var(--bs-nav-link-disabled-color);
pointer-events: none;
cursor: default;
}
#navbarNav .cur-act-a {
border-bottom-color:  var(--engine-orange);
font-weight: 500;
text-decoration: underline;
text-decoration-color: 	color: var(--engine-orange) ;
text-decoration-thickness: 2px;
text-underline-offset: 10px;
background-color: var(--engine-orange);
color: white;
clip-path: polygon(
	5px 0%,           /* Punkt 1: Schnitt links oben */
	100% 0%,           /* Punkt 2: Ecke rechts oben (bleibt spitz) */
	calc(100% - 5px) 100%, /* Punkt 3: Schnitt rechts unten */
	0% 100%            /* Punkt 4: Ecke links unten (bleibt spitz) */
);
padding: 8px 14px 14px 14px;
border: none;
transition: transform 0.5s, box-shadow 0.3s;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
								Footer
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.footer-content > div {
margin-bottom: 10px;
text-align: center;
}
footer {
padding: 50px 0;
border-top: 3px solid var(--space-blue);
background-color: var(--bg-grau1);
padding-top: 40px;
padding-bottom: 10px;
position: relative;
font-size: 0.9rem;
bottom: 0;
width: 100vw;
}
.footer-logo {
font-size: 2rem;
font-weight: 800;
margin-bottom: 20px;
color: var(--secondary-accent);
}
.footer-links h5 {
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.footer-links h5::after {
content: '';
position: absolute;
width: 30px;
height: 3px;
background-color: var(--secondary-accent);
bottom: -10px;
left: 0;
border-radius: 2px;
}
.footer-links ul {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 5px;
}
.footer-links a {
font-size: 0.8rem;
color: var(--text-secondary);
transition: all 0.3s ease;
text-decoration: none;
}
.footer-links a:hover {
color: var(--secondary-accent);
text-decoration: none;
}
.footer-links ul li::before {
font-family: "Font Awesome 7 Free"; 
font-weight: 600;                   
content: "\f135";                
margin-right: 3px;                  
color: var(--engine-orange);            
}
.footer-gs li {
margin-bottom: 5px;
margin-left: 0px;
}
.copyright {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
margin-top: 5px;
text-align: center;
font-size: 0.8rem;
color: var(--text-secondary);
}
.social-links a {
color: var(--text-secondary);
margin: 0 10px;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-bar a:hover .social-icon {
color: var(--secondary-accent);
opacity: 1;
}
.social-links a:hover {
color: var(--secondary-accent);
}
.social-icon {
font-size: 2rem;
color: var(--space-blue);
opacity: 0.3;
cursor: pointer; 
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
				Hero Elemente bzw. die Poser Sektion
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.hero {
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
background: radial-gradient(circle at 70% 30%, rgba(22, 117, 171, 0.15) 0%, transparent 30%);
padding: 100px 0px;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
				  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
z-index: -1;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Drück Dinger / Buttons
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.btn-orange {
background-color: var(--engine-orange);
color: white;
border-radius: 0;
padding: 12px 30px;
font-family: 'Orbitron', sans-serif;
font-weight: bold;
border: none;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-orange:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(240, 127, 52, 0.3);
color: white;
}
.btn-graf-orange {
font-weight: 500;
font-family: 'Orbitron', sans-serif;
font-weight: bold;
background-color: var(--engine-orange);
color: white;
padding: 12px 20px;
border: none;
transition: transform 0.5s, box-shadow 0.3s;
clip-path: polygon(
	5px 0%,           /* Punkt 1: Schnitt links oben */
	100% 0%,           /* Punkt 2: Ecke rechts oben (bleibt spitz) */
	calc(100% - 5px) 100%, /* Punkt 3: Schnitt rechts unten */
	0% 100%            /* Punkt 4: Ecke links unten (bleibt spitz) */
);
}
.btn-graf-orange:hover  {
background-color: var(--engine-orange) !important;
animation: pulse 2.0s infinite;
outline: none;
color: white;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.btn-graf-blue {
font-weight: 500;
font-family: 'Orbitron', sans-serif;
font-weight: bold;
background-color: var(--space-blue);
color: white;
padding: 12px 20px;
border: none;
transition: transform 0.5s, box-shadow 0.3s;
clip-path: polygon(
	5px 0%,           /* Punkt 1: Schnitt links oben */
	100% 0%,           /* Punkt 2: Ecke rechts oben (bleibt spitz) */
	calc(100% - 5px) 100%, /* Punkt 3: Schnitt rechts unten */
	0% 100%            /* Punkt 4: Ecke links unten (bleibt spitz) */
);
}
.btn-graf-blue:hover {
background-color: var(--space-blue) !important;
animation: pulse 2.0s infinite;
color: white;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.btn-outline-blue {
border: 2px solid var(--space-blue);
color: var(--space-blue);
border-radius: 0;
padding: 12px 30px;
font-family: 'Orbitron', sans-serif;
transition: all 0.3s;
}
.btn-outline-blue:hover {
background-color: var(--space-blue);
color: white;
}
.eventticker {
border: 0px solid transparent;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
			Blockquotes / Zitat Boxen (ein Meisterwerk)
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
blockquote {
border-left: 5px solid var(--engine-orange);
font-family: 'Orbitron';
letter-spacing: 1.2px;
font-size: 1.1rem;
text-shadow: 2px 1px #111;
font-weight: 500;
margin: 1.3em;
padding: 0.5em 10px;
color: #fff;
background:
radial-gradient(circle at 0% 10%, rgba(22, 117, 171, 0.33) 40%, transparent 80%);
}
blockquote:before {
color: #bbb;
font-family: 'Montserrat', sans-serif;
content: '\201C';
font-size: 2.4em;
color:  var(--engine-orange);
font-weight: 500;
line-height: 0.1em;
margin-right: 0.1em;
vertical-align: -0.4em;
}
blockquote:after {
color: #bbb;
font-family: 'Montserrat', sans-serif;
content: '\201D';
font-size: 2.4em;
color:  var(--engine-orange);
font-weight: 500;
line-height: 0.1em;
margin-left: 0.1em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Der Zipfelklastscher
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.astronaut-container {
position: relative;
display: inline-block; 
width: 75%;            
}
.back-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 
z-index: 1;                       
width: 180%;                      
opacity: 0.7;                     
pointer-events: none;             
animation: pulse-glow 6s ease-in-out infinite alternate;
}
@keyframes pulse-glow {
from { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
to   { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}
.astronaut-logo {
position: relative;
z-index: 2;                       
animation: 
	rotate-pendulum 9s ease-in-out infinite alternate, 
	float-logo 4s ease-in-out infinite alternate;
transform-origin: center;
display: inline-block;
}
@keyframes rotate-pendulum {
from {
	transform: rotate(-7deg); 
}
to {
	transform: rotate(7deg);  
}
}
@keyframes float-logo {
from {
	translate: 0 -9px;
}
to {
	translate: 0 4px;
}
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
								Sections
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.section-title {
position: relative;
display: inline-block;
margin-bottom: 50px;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background-color: var(--engine-orange);
}
.content-section-landing {
padding: 0px 0;
}
.content-section {
padding: 100px 0;
}
.content-section-gitter {
padding: 100px 0;
}
.content-section-gitter::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
				  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 50px 50px;
z-index: -1;
}
.landing-section {
padding: 30px 0 100px 0;
}
.bg-light-gray {
background-color: var(--light-smoke);
color: var(--dark-gray);
}
.service-icon {
font-size: 7rem;
margin-bottom: 20px;
color: var(--secondary-accent);
}
.bg-bubble-news {
background: var(--engine-orange);
width: 50px;
height: 50px;
margin: 5px;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
							Bootstrap Cards
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.tech-card {
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(22, 117, 171, 0.7);
padding: 30px;
transition: all 0.4s;
height: 100%;
}
.tech-card:hover {
border-color: var(--engine-orange);
background-color: rgba(0, 0, 0, 0.40);
transform: scale(1.01);
}
.tech-card2 {
background-color: rgba(0, 0, 0, 0.10);
border: 1px solid rgba(22, 117, 171, 0.3);
padding: 10px;
transition: all 0.4s;
height: 100%;
}
.tech-card2:hover {
border-color: var(--engine-orange);
background-color: rgba(0, 0, 0, 0.40);
transform: scale(1.05);
}
.tech-card3 {
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(22, 117, 171, 0.3);
padding: 20px;
color: #000;
transition: all 0.4s;
height: 100%;
}
.tech-card3:hover {
border-color: var(--engine-orange);
background-color: rgba(255, 255, 255, 1.0);
}
.galerie-card img {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(22, 117, 171, 1.5);
padding: 5px;
transition: all 0.4s;
height: 100%;
}
.news-card {
background-color: rgba(22, 117, 171, .05);
border: 1px solid rgba(22, 117, 171, 0.3);
padding: 10px;
transition: all 0.4s;
height: 100%;
}
.diagonal-divider {
height: 100px;
background-color: var(--light-smoke);
clip-path: polygon(0 100%, 100% 30%, 100% 100%, 0% 100%);
margin-top: -100px;
/* Erzwingt 3D-Rendering für sauberere Kanten */
transform: translateZ(0); 
will-change: transform;
}
.diagonal-divider2 {
height: 100px;
background-color: var(--bg-grau2);
clip-path: polygon(0 70%, 100% 100%, 100% 100%, 0% 100%);
margin-top: -100px;
/* Erzwingt 3D-Rendering für sauberere Kanten */
transform: translateZ(0); 
will-change: transform;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Formulare und Kram
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.form-control {
background-color: transparent;
border: 1px solid var(--space-blue);
border-radius: 0;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.form-control::placeholder {
font-weight: normal; 
opacity: 0.6;       
}
.form-control:focus {
background-color: rgba(255,255,255,0.05);
border-color: var(--engine-orange);
box-shadow: none;
}
.form-check-input.mcheck {
background-color: var(--light-smoke2);
border: 1px solid var(--bg-grau3);
width: 1.2rem;
height: 1.1rem;
}
.form-check-input.mcheck:checked {
background-color: var(--secondary-accent);
}
textarea.form-control {
min-height: 150px;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
	Wartungsmodus Fix für GetSimple (brutaler Override, ich weiß)
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
.maintenceOn {
position: fixed !important; 
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 99999 !important; 
overflow: hidden !important;
background-color: var(--dark-gray) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.maintenance-active {
overflow: hidden !important;
}
body .maintenceOn {
background-color: var(--dark-gray);
color: var(--text-primary);
font-family: 'Orbitron', sans-serif;
}
#maintenance-epic-v2 {
position: fixed !important;
top: 0 !important;
min-height: 100vh !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 99999 !important;
overflow: hidden !important;
background-color: var(--dark-gray) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Responsive 575px
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
@media (max-width: 575px) {
html {
font-size: 0.8rem;
}
.navbar-nav {
font-size: 1.5rem;
text-align: center;
}
.hero-section {    
padding-top: 1rem !important; 
margin-bottom: 1.1rem !important; 
text-align: center;
}
h3 {
font-weight: 700;
}
.mode-switch-group .mode-btn {
padding: 0.3rem 0.6rem; 
font-size: 0.8rem; 
}
.imprintgfx {
max-width: 80%;
height: auto;
}
.nmblogstart{
font-size: 1.2rem;
}  
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Responsive 768px
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
@media (max-width: 768px) {
.hero {
padding: 120px 0px;
}
.hero-section {
padding-top: 100px;
padding-bottom: 50px;
}
.container {
padding-left: 15px;
padding-right: 15px;
}
.nav-grafonaut-textline {
display: none;
}
.navbar-nav {
padding-top: 20px;
}
.hero-title {
font-size: 3rem;
}
.hero-subtitle {
font-size: 1.4rem;
}
.hero-subtitle2 {
font-size: 1.2rem;
}
.service-card, .contact-form {
padding: 20px;
}
.footer-content > div {
margin-bottom: 10px;
}
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Responsive 992px
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
@media (max-width: 992px) {
.hero {
padding: 150px 0px;
}	
.navbar-nav {
text-align: center;
padding-top: 25px;
}
.hero-title {
font-size: 3.5rem;
}
.hero-section {    
padding-top: 1rem !important; 
margin-bottom: 1.1rem !important; 
text-align: center;
}
.section-title {
margin-bottom: 30px;
}
.footer-content .col-lg-4 {
display: flex;
flex-direction: column;
height: 100%;
}
.social-bar {
padding: 0px;
}
.social-icon {
font-size: 2rem;
color: var(--space-blue);
opacity: 0.3;
}
.social-bar a:hover .social-icon {
color: var(--secondary-accent);
opacity: 1;
}
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
						Responsive 1200px
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */
@media (max-width: 1200px) {
.navbar-nav {
font-size: 0.9rem;
}
}
/* ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆
					HIER KÖNNTE IHRE WERBUNG STEHEN!
			Vielen Dank dass du bis zum Ende gestöbert hast :)
   ◆ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ◆ */