@import url("https://use.typekit.net/sgh6rwv.css");


/* @override 
	http://bitframe.at/css/style.css */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* bitframe CSS */


@font-face {
    font-family: '176MKSDAL';
    src: url('fonts/176mksdal-regular-webfont.eot');
    src: url('fonts/176mksdal-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/176mksdal-regular-webfont.woff') format('woff'),
         url('fonts/176mksdal-regular-webfont.ttf') format('truetype'),
         url('fonts/176mksdal-regular-webfont.svg#176MKSDAL') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	color: rgb(27,44,60);
	font-family: "textbook-new-web", sans-serif;
}

a:link {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color: rgb(44,109,163);
	text-decoration: none;
}

a:visited {
	color: rgb(101, 148, 188);
}

a:hover {
	color: rgb(111, 168, 216);
}

a:active {
	color: rgb(31, 77, 116);
}

#wrapper {
	margin: 0 auto;
	width: 95%;
	max-width: 945px;
}

img {
     max-width: 100%;
}

.clearboth {
	clear: both;
}

#main {
	width: 100%;
	float: left;
}

aside{
	float: left;
	width: 100%;

}

.sticky{
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

.fancyContent{
	z-index: 100;
	position: relative;	
}

.large{
	margin-right: 3.84615384615385%;
	float: left;
	width: 30.7692307692308%;
}

.wide{
	margin-right: 3.84615384615385%;
	float: left;
	width: 65.3846153846154%;
}

.square {
	float: left;
	width: 65.3846153846154%;
	margin-right: 3.84615384615385%;
}
.high {
	float: left;
	width: 100%;
	margin-right: 3.84615384615385%;
}

.first{
	clear:both;
}

.verylarge{
	background-color: rgb(27,44,60);
	height: 0px;
	float: left;
	position: relative;
	z-index: 99;
	margin-bottom: 3.84615384615385%;
	box-shadow:inset 0px 25px 25px -25px rgba(0,0,0,1), inset 0px -25px 25px -25px rgba(0,0,0,1);
}

#adobe-dc-view{
	margin-bottom: 3.84615384615385%;
}

.verylarge h1, .verylarge h2, .verylarge p{
	color: #FFF;
	
}

.verylarge p{
	float: left;
	line-height: 1.4;
}

.verylarge iframe{
	float: left;
}

.verylargeContent{
	width: 100%;
	float: left;
}
.pfeil {
	margin: 0 auto;
	opacity: 0;
}


.leftofsquare{
	width: 30.7692307692308%;
	margin-right: 3.84615384615385%;
	float: left;
}

.leftsquare{
	float: left;
	width: 65.3846153846154%;
	margin-right: 3.84615384615385%;	
}

.rightofsquare{
	width: 30.7692307692308%;
	margin-right: 0;
	float: right;
}

.rightof{float:right;}

.leftofsquare .large, .rightofsquare .large, .leftsquare .square{
	clear:both;
	width: 100%;

}


.large img{
	float: left;

	/*
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	*/
}

.large:last-child, .last{
	margin-right: 0;
}

.large img:hover{
	opacity: 1;
}


.act {
	opacity: 1 !important;
}

.hoverImage {
	position: relative;
}

.hoverSquareImage {
	position: relative;
}
.hoverHighImage {
	position: relative;
}


img.base {
	position: absolute;
	z-index: -2;
}

article{
	z-index: 50;
	position: relative;
}

img.hover {
	position: absolute;
	opacity: 0;
	z-index: 2;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

div.hover {
	position: absolute;
	text-align: center;
	justify-content: center;
	background-color: rgba(27, 44, 60, 0.80);
	opacity: 0;
	z-index: 2;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;	
}

h3.hover {
	text-align: center;
	color: rgba(194, 194, 222, 0.95);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.68);
	size: 2em;
}

div.hover{
	min-width: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
}

img.hover:hover {
	opacity: 1;
}
h3.hover:hover, div.hover:hover {
	opacity: 1;
}

.hoverSquareImage {
	display: flex;
	align-items: center;
}

.extrawide {
	clear: both;
	float: left;
	width: 100%;

}

#logo {
	height: 200px;
	width: 106%;
	margin-left: -3%;
	left: 0;
	float: left;
	background-color: rgb(27,44,60);
	position: relative;
}

#logo img{
	text-align: center;
	position: absolute;
	margin: 0 2.205882352941%;
	bottom: 0;
	background-color: #fff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	width: 95.588235294118%;
}

#logo img:hover{
	background-color: rgb(44,109,163);
}

/*
#logo-wahl {
	height: 200px;
	width: 106%;
	margin-left: -3%;
	left: 0;
	float: left;
	x-background-color: rgb(27,44,60);
	position: relative;
}

#logo-wahl img{
	text-align: center;
	position: absolute;
	x-margin: 0 2.205882352941%;
	bottom: 0;
	background-color: #fff;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	x-width: 95.588235294118%;
}
*/

h1, h2 {
	font-family: "Lato";
	font-weight: 900;
	font-size: 2.4em;
	margin-bottom: 0.6em;
	clear: both;
}

h2 em {
	color: rgb(44,109,163);
}

h3 {
	font-family: "Lato";
	font-size: 1.5em;
	margin-bottom: 0.2em;
}

h4{
	font-size:1em;}

.thik h1, 
.thik h2 {
	display: flex;
	width: 100%;
}

/* This creates the line for both H1 and H2 */
.thik h1:after, 
.thik h2:after {
	content: "";
	background-color: rgb(27,44,60);
	margin-left: 15px;
	flex: 1 0 20px;
}
	
.thik h5{
	display: flex;
	width: 100%;
	}


h1.center {
	text-align: center;
	justify-content: center;
}



.thik h5:after{
	content: "";
	background-color: rgb(27,44,60);

	margin-left: 15px;
	flex: 1 0 20px;
}


/*Navigation Styles*/

nav {
	float: left;
	width: 100%;
	border-bottom: 2px solid rgb(27,44,60);
}

nav ul li{
	font-size: 1.4em;
	font-family: "Lato"; 
	font-weight: 900;
}

nav a:link, nav a:visited {
	text-decoration: none;
	color: rgb(27,44,60);
}

nav a:hover {
	color: rgb(44,109,163);
}

nav a:active {
	color: black;
} 

nav a.active:link, nav a.active:hover, nav a.active:visited {
	color: rgb(44,109,163);
}

#address {
    display: flex !important;
    flex-direction: column; /* Wichtig: Textzeilen untereinander, nicht nebeneinander */
    justify-content: center; /* Zentriert den Text vertikal */
    align-items: flex-start; /* Richtet den Text linksbündig aus (wie im Original) */
    width: 100%;            /* Nutzt die volle Breite des Aside */
    box-sizing: border-box;
}

#address p {
    margin-bottom: 0 !important;
    border-top: none !important; /* Strich oben entfernen, da er jetzt am Container ist */
    width: 100%;
}


aside .extrawide {
	border-top: 2px solid rgb(27,44,60);
	padding-top: 1em;
}

aside .extrawide img {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; 
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	background-color: rgb(27,44,60);
}



aside .extrawide img:hover {
	background-color: rgb(44,109,163);
}

.facebook {
	width: 5%;
	margin-right: 5%;
}

.vimeo {
	width: 10%;
	margin-right: 5%;
}

.twitter {
	width: 8%;
}
.instagram {
	width: 8%;
}

/* Contact Styles */

#contactForm {
	float: left;
	margin-bottom: 1em;
}

input[type="text"], input[type="email"] {
	width: 95%;
	font-family: "textbook-new-web", sans-serif;
	font-size: 1em;
	line-height: 1em;
	border: none;
	padding: 0.2em 2.5% 0.1em;
	height: 1.5em;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 12%, from(#999), to(#f6f6f6));
	background-image: -moz-linear-gradient(100% 12% 90deg,#f6f6f6, #999999);
	background-color: blue;
	margin-bottom: 1em;
}

form textarea {
	width: 95%;
	max-width: 95%;
	height: 5em;
	font-family: "textbook-new-web", sans-serif;
	font-size: 1em;
	line-height: 1em;
	border: none;
	margin-bottom: 1em;
	padding: 0.4em 2.5% 0em;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 4%, from(#999), to(#f6f6f6));
	background-image: -moz-linear-gradient(100% 4% 90deg,#f6f6f6, #999999);
	
}

input[type="submit"] {
	float: left;
	background-color: rgb(27,44,60);
	border: none;
	padding: 0.4em 0.5em;
	color: white;
	font-family:  "textbook-new-web", sans-serif;
	font-size: 1em;
	clear: both;
}

input[type="submit"]:hover {
	cursor: pointer;
	background-color: rgb(44,109,163);
}

input[type="submit"]:active {
	background-color: black;
}

label.error {
	position: relative;
	top: -0.8em;
	float: left;
	color: #bd0000;
}

.break{
	clear: both;
}

/* Equipment Styles */

.equipment .price {
	text-align: right;
	float: right
}

.equipment p {
	font-size: 0.8em;
}

/* About Styles */

.team {
	margin-top: 2em;
}

.team p {
	margin-bottom: 1.5em;
}

p{
	margin-bottom: 1em;
	font-size: 1em;
	line-height: 1.4;
}

.agb{
	text-align: right;
	float: right;
}


.fadeout{
	top:0;
	left: 0;
	position:absolute;
	z-index: 3;
	background-color: #202020;
	opacity: 0;
}


.noscript {
	position:absolute;
	z-index: 100;
	background-color: rgba(25,44,60,0.95);
	height: 100%;
	width: 100%;
	padding-top:13em;
}

.noscript-text {
	width: 75%;
	max-width:960px;
	margin: auto;
}

.noscript h3{
	font-size: 1.5em;
	color: #fff;
	text-align: center;
	margin-top:0.5em;
}

.noscript p{
	font-size: 1em;
	color: #fff;
	text-align: center;
	margin-top:0.5em;
}

iframe{
	opacity:1;
}

/*
@-webkit-keyframes fadein1 { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadein1 { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadein1 { from { opacity:0; } to { opacity:1; } }
@keyframes fadein1 { from { opacity:0; } to { opacity:1; } }
*/

.close{
    opacity:0.5;  /* make things invisible upon start */

	position: absolute;
	float: right;
	/*-webkit-animation: opacity 0.5s ease;
	-moz-animation: opacity 0.5s ease;
	animation: opacity 0.5s ease;*/

}

/*
MACHT PROBLEM MIT OPACITY!!! -- Langsame Animation Text und Video
.verylarge iframe{
	opacity:0;   make things invisible upon start 
    -webkit-animation:fadein1 ease-in 1;   call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time 
    -moz-animation:fadein1 ease-in 1;
    animation:fadein1 ease-in 1;

    -webkit-animation-fill-mode:forwards;   this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

	-webkit-animation-delay: 1.3s;
	-moz-animation-delay: 1.3s;
	animation-delay: 1.3s;

}
*/
/*
.verylarge div{
	opacity:0;   make things invisible upon start 
    -webkit-animation:fadein1 ease-in 1;   call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time 
    -moz-animation:fadein1 ease-in 1;
    animation:fadein1 ease-in 1;

    -webkit-animation-fill-mode:forwards;   this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

}
*/


.close:hover{
	opacity:1;  


}

/*
article{
	opacity: 0;

    -webkit-animation:fadein1 ease-in 1;   call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time 
    -moz-animation:fadein1 ease-in 1;
    animation:fadein1 ease-in 1;

    -webkit-animation-fill-mode:forwards;   this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
*/

/* Equipmentlist Styles*/

h6.Angebot-Positionen {
	color:rgb(27,44,60);
	font-family:"Lato", sans-serif;
	font-weight: 900;
	line-height:1.4;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}

h6.Angebot-Positionen span.Standard{
	float: right;
	
}

p.Angebot-Positionen-Details span.Standard{
	float: right;
	
}

p.Angebot-Positionen-Details {
	color:rgba(152, 152, 152);
	font-family:"Avenir LT Std 35 Light", sans-serif;
	font-size:10px;
	font-style:normal;
	font-variant:normal;
	font-weight:300;
	line-height:1.125;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}
h5.Angebot--berschrift {
	color:rgb(27,44,60);
	font-family:"Lato", sans-serif;
	font-weight: 900;
	line-height:1.2;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:9px;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}
p.Basic-Paragraph {
	color:#575656;
	font-family:"Avenir LT Std 45 Book", sans-serif;
	font-size:10px;
	font-style:normal;
	font-variant:normal;
	font-weight:300;
	line-height:1.4;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}
p._berschrift- {
	color:#9c9c9c;
	font-family:"Avenir LT Std 65 Medium", sans-serif;
	font-size:15px;
	font-style:normal;
	font-variant:normal;
	font-weight:bold;
	line-height:1.2;
	margin-bottom:0;
	margin-left:0;
	margin-right:0;
	margin-top:0;
	orphans:1;
	page-break-after:auto;
	page-break-before:auto;
	text-align:left;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:1;
}
span.Fett {
	font-style:normal;
	font-weight:normal;
}
.Angebot-Positinen span.Standard {
	float:right;
}
span.CharOverride-1 {
	font-size:8px;
}
span.CharOverride-2 {
	color:#9c9c9c;
	font-size:15px;
	font-style:normal;
	font-weight:normal;
}
span.CharOverride-3 {
	color:#9a9a9a;
}



/* google fonts alternative */

/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('../css/fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../css/fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* lato-900 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url('../css/fonts/lato-v23-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../css/fonts/lato-v23-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../css/fonts/lato-v23-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../css/fonts/lato-v23-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../css/fonts/lato-v23-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../css/fonts/lato-v23-latin-900.svg#Lato') format('svg'); /* Legacy iOS */
}

@media screen and (min-width: 620px) {
	
	#wrapper {
		margin: 0 auto;
		width: 90%;
	}
	
	#logo {
		width: 100%;
		margin-left: 0;
	}

/*
	#logo-wahl {
		width: 100%;
		margin-left: 0;
	}
*/
		
	#main {
		width: 55.31914893617%;
	}
	
	aside {
		width: 36.1702127659575%;
		margin-left: 8.510638297872%;
	}
	
	.verylarge p {
		width: 36.1702127659575%;
				
	}
	
}


/* ==========================================================================
   Mobile-Fix Equipment (2026-07): Float-Layout unter 620px stapeln,
   verhindert überlappende Texte auf Smartphones
   ========================================================================== */

@media screen and (max-width: 619px) {
	.equipment section.large,
	.equipment section.wide {
		float: none;
		width: 100%;
		margin-right: 0;
		clear: both;
		overflow: hidden;
	}

	.equipment section.large {
		margin-bottom: 1em;
	}

	.equipment section.wide {
		margin-bottom: 2em;
	}

	.equipment section.large img {
		width: 100%;
		height: auto;
		float: none;
	}
}

/* Formular-Fehlermeldungen (formmail.php, 2026-07) */
.form-fehler {
	border: 2px solid #bd0000;
	padding: 1em;
	margin-bottom: 1.5em;
}

.form-fehler p {
	color: #bd0000;
	margin-bottom: 0.4em;
}

.form-fehler ul {
	margin-left: 1.2em;
	list-style: disc;
}

.form-fehler li {
	color: #bd0000;
	line-height: 1.5;
}

/* ==========================================================================
   MODERNES LAYOUT (2026-07)
   Ersetzt die jQuery-Layoutberechnung aus js/scripts.js (gridHeight/
   moveElements) 1:1 durch CSS. Die Zahlenwerte entsprechen exakt den
   Formeln des alten Skripts:
     colw = Spaltenbreite  = 30,77 % der Main-Breite
     gap  = Spaltenabstand =  3,85 % der Main-Breite
     Basisgröße Typo       = colw * 0,355
   ========================================================================== */

:root {
	--wrapperw: 95vw;                                  /* mobil: width 95% */
	--mainw: var(--wrapperw);
}

@media screen and (min-width: 620px) {
	:root {
		--wrapperw: min(90vw, 945px);                  /* width 90%, max 945px */
		--mainw: calc(var(--wrapperw) * 0.5531914893617);
	}
}

:root {
	--colw: calc(var(--mainw) * 0.307692307692308);
	--gap: calc(var(--mainw) * 0.0384615384615385);
	--sq: calc(2 * var(--colw));
	--fs-base: calc(var(--colw) * 0.355);
}

html {
	scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   Grundgerüst: Desktop = 2 Spalten (Inhalt links, Sidebar rechts, sticky),
   mobil = eine Spalte mit Logo/Nav oben und Adresse/Socials unten.
   Früher hat jQuery (moveElements) dafür DOM-Knoten verschoben.
   -------------------------------------------------------------------------- */

@media screen and (min-width: 620px) {
	#wrapper {
		display: grid;
		grid-template-columns: 55.31914893617% 36.1702127659575%;
		column-gap: 8.510638297872%;
		align-items: start;
	}

	#main {
		grid-column: 1;
		grid-row: 1;
		width: auto;
		float: none;
	}

	aside {
		grid-column: 2;
		grid-row: 1;
		width: auto;
		margin-left: 0;
		float: none;
	}

	/* Der alte Code hat auf Desktop einen leeren Abstandshalter in #main
	   eingefügt, damit der Inhalt unterhalb der Logohöhe beginnt */
	#main::before {
		content: "";
		display: block;
		height: calc(var(--colw) + var(--gap));
	}
}

@media screen and (max-width: 619px) {
	#wrapper {
		display: flex;
		flex-direction: column;
	}

	/* Sidebar-Kinder werden direkte Flex-Items und per order sortiert:
	   Logo, Nav oben – Inhalt – Adresse, Socials unten */
	aside,
	aside .sticky {
		display: contents;
	}

	#logo { order: -3; }
	nav { order: -2; }
	#main { order: 0; width: 100%; }
	#address { order: 1; }
	aside .social-agb { order: 2; }

	/* Logo mobil: exakt viewportbreit (früher 106 % -> 3 px Überlauf) */
	#logo {
		width: 100vw;
		margin-left: calc((var(--wrapperw) - 100vw) / 2);
	}
}

/* --------------------------------------------------------------------------
   Maße, die früher gridHeight() bei jedem Resize per Inline-Style setzte
   -------------------------------------------------------------------------- */

#logo {
	height: calc(var(--sq) + var(--gap));
	margin-bottom: var(--gap);
}

nav {
	height: calc(var(--colw) - 2px);
	margin-bottom: var(--gap);
	overflow: hidden;
}

nav ul li {
	font-size: calc((var(--colw) - 2px) * 0.22);
}

#address {
	min-height: var(--colw);
	margin-bottom: var(--gap);
}

.extrawide {
	height: var(--colw);
	margin-bottom: var(--gap);
}

.extrawide2 {
	height: calc(var(--colw) + 20px);
	margin-bottom: var(--gap);
}

.slogannew,
.showreel,
.video {
	height: auto;
}

.txt {
	height: var(--colw);
	margin-bottom: var(--gap);
}

/* min-height statt fixer Höhe: hält den Rhythmus, aber längere Texte
   überlagern nicht mehr die nächste Zeile (alter Equipment-Bug) */
.wide {
	min-height: var(--colw);
	margin-bottom: var(--gap);
}

.high {
	height: calc(var(--sq) + 2 * var(--gap));
}

.large img {
	margin-bottom: var(--gap);
}

.hoverImage {
	height: var(--colw);
	margin-bottom: var(--gap);
	overflow: hidden;
}

.hoverSquareImage,
.hoverHighImage {
	height: calc(var(--sq) + var(--gap));
	margin-bottom: var(--gap);
	overflow: hidden;
}

.pfeil {
	width: var(--gap);
	height: var(--gap);
	margin: calc(-1 * var(--gap)) auto 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.pfeil img {
	margin-bottom: 0;
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Typografie: identische Formeln wie im alten Skript
   (inkl. der leicht negativen margin-tops, die Teil des Ist-Looks sind)
   -------------------------------------------------------------------------- */

h1 {
	/* max(): Untergrenze greift nur auf kleinen Screens – Desktop-Werte
	   entsprechen exakt der alten JS-Formel */
	font-size: max(calc(var(--fs-base) / 2), 1.4em);
	margin-top: calc(var(--fs-base) / -8);
}

h2 {
	font-size: max(calc(var(--fs-base) / 2.17), 1.3em);
	margin-top: calc(var(--fs-base) / -17.36);
}

h3 {
	font-size: max(calc(var(--fs-base) / 3), 1.125em);
	margin-top: calc(var(--fs-base) / -12);
}

h4 {
	font-size: var(--fs-base);
}

h5 {
	font-size: calc(var(--fs-base) / 2);
}

h6 {
	font-size: calc(var(--fs-base) / 4);
}

.slogannew p {
	font-size: var(--fs-base);
	margin-top: calc(var(--fs-base) * 0.168 - 45px);
	margin-bottom: calc(var(--fs-base) * 0.168 - 25px);
}

/* --------------------------------------------------------------------------
   Videos/iframes: Seitenverhältnis kommt aus den width/height-Attributen
   (setzt js/site.js als aspect-ratio um); Container wachsen mit
   -------------------------------------------------------------------------- */

.showreel,
.video {
	margin-bottom: var(--gap);
}

.showreel iframe,
.video iframe {
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Aufgeklapptes Projekt (.verylarge): volle Viewportbreite, Inhalt am
   Raster ausgerichtet (Video = Main-Spalte, Text = Sidebar-Spalte)
   -------------------------------------------------------------------------- */

.verylarge {
	width: 100vw;
	margin-left: calc((var(--wrapperw) - 100vw) / 2);
	padding-left: calc((100vw - var(--wrapperw)) / 2);
	padding-right: calc((100vw - var(--wrapperw)) / 2);
	box-sizing: border-box;
	overflow: hidden;
	transition: height 0.5s ease;
}

/* Kacheln im rechts schwebenden Container (Edler Reifen, Hairdreams):
   deren linke Kante liegt 69,23 % der Main-Breite weiter rechts – die
   Vollbreiten-Verschiebung muss das ausgleichen (alte jQuery-Sonderregel
   "parent float right") */
.rightofsquare .verylarge {
	margin-left: calc((var(--wrapperw) - 100vw) / 2 - var(--mainw) * 0.692307692307692);
}

.verylarge h1,
.verylarge h2 {
	margin-top: var(--gap);
	font-size: calc((var(--colw) - 2px) * 0.22 / 1.2);
	margin-bottom: 0.6em;
}

.verylarge iframe {
	width: var(--mainw);
	margin-bottom: var(--gap);
}

.verylarge p {
	width: calc(var(--wrapperw) * 0.361702);
	margin-left: calc(var(--wrapperw) * 0.0851064);
	font-size: calc(var(--fs-base) / 3.6);
}

.verylarge .close {
	position: absolute;
	top: 0;
	right: var(--gap); /* rechts oben in der Ecke des blauen Bereichs */
	margin-top: var(--gap);
	width: calc(var(--colw) * 0.22 / 1.5);
}

.verylarge .close img {
	width: 100%;
	display: block;
}

@media screen and (max-width: 619px) {
	.verylarge iframe {
		width: 100%;
	}

	.verylarge p {
		width: 100%;
		margin-left: 0;
	}
}

/* Abdunkelung + Hervorhebung der aktiven Kachel beim offenen Projekt */
.fadeout {
	width: 100%;
	opacity: 0;
	transition: opacity 0.8s ease;
	cursor: pointer;
}

.project-open a:not(.act) .hoverImage img.base,
.project-open a:not(.act) .hoverSquareImage img.base,
.project-open a:not(.act) .hoverHighImage img.base {
	opacity: 0.5;
	transition: opacity 0.8s ease;
}

/* --------------------------------------------------------------------------
   Equipment mobil: Kacheln voll breit (Ergänzung zum Mobile-Fix oben)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 619px) {
	.equipment section.large .hoverImage {
		height: var(--wrapperw);
	}
}


/* 100vw schließt die Scrollleiste mit ein – ohne Clip ragt der .verylarge
   bei sichtbarer Scrollleiste ein paar Pixel über den rechten Rand hinaus */
@supports (overflow: clip) {
	html {
		overflow-x: clip;
	}
}

/* Absicherung: sollte je ein Element außerhalb von #main/aside im Wrapper
   landen (z. B. durch ein vergessenes schließendes Tag), bleibt es in der
   Inhaltsspalte statt das Raster zu verschieben */
@media screen and (min-width: 620px) {
	#wrapper > :not(aside):not(#main) {
		grid-column: 1;
	}
}