:root {
    --distance-0x: 0; 	
	--distance-0-25x: 4.25px;
	--distance-0-5x: 8.5px;
    --distance-1x: 17px; 	
    --distance-1-5x: 25.5px;	
    --distance-2x: 34px;
    --distance-3x: 51px;
    --distance-4x: 68px;
    --distance-6x: 102px;
    --distance-8x: 136px;
    --distance-10x: 170px;

    --header-image-white: url(hero06.webp);
    --header-image-black: url(hero06.webp);
    --header-image-red: url(hero06.webp);

    --header-logo-url-white: url(header-logo-new-white.svg);
    --header-logo-url-black: url(header-logo-new-black.svg);
    --header-logo-url-red: url(header-logo-new-red.svg);

    --content-logo-url-white: url(header-logo-new-white.svg);
    --content-logo-url-black: url(header-logo-new-black.svg);
    --content-logo-url-red: url(header-logo-new-red.svg);

    --content-logo-verband-url-white: url(header-logo-new-white.svg);
    --content-logo-verband-url-black: url(header-logo-new-black.svg);
    --content-logo-verband-url-red: url(header-logo-new--red.svg);

    --content-logo-dach-mit-handwerker-url-white: url(header-logo-new-white.svg);
    --content-logo-dach-mit-handwerker-url-black: url(header-logo-new-black.svg);
    --content-logo-dach-mit-handwerker-url-red: url(header-logo-new-red.svg);
    --content-logo-dach-mit-handwerker-url-white: url(header-logo-new-white.svg);
    --content-logo-dach-mit-handwerker-url-red: url(header-logo-new-red.svg);

    --leistungen-steildach: url(leistungen-steildach.webp);
    --leistungen-flachdach: url(leistungen-flachdach.webp);
    --leistungen-fassade: url(leistungen-fassade.webp);
    --leistungen-dachfenster: url(leistungen-dachfenster.webp);
    --leistungen-metallbearbeitung: url(leistungen-metallbearbeitung.webp);
    --leistungen-beratung: url(leistungen-beratung.webp);
    --leistungen-photovoltaik: url(leistungen-photovoltaik.webp);
    --leistungen-planung: url(leistungen-planung.webp);
    --leistungen-wartung: url(leistungen-wartung.webp);

    --content-hero-image-leistungen-steildach: url(hero-steildach.webp);
    --content-hero-image-leistungen-flachdach: url(hero-flachdach.webp);
    --content-hero-image-leistungen-fassade: url(hero-fassade.webp);
    --content-hero-image-leistungen-dachfenster: url(hero-dachfenster.webp);
    --content-hero-image-leistungen-metallbearbeitung: url(hero-metallbearbeitung.webp);
    --content-hero-image-leistungen-beratung: url(hero-beratung.webp);
    --content-hero-image-leistungen-photovoltaik: url(hero-photovoltaik.webp);
    --content-hero-image-leistungen-planung: url(hero-planung.webp);
    --content-hero-image-leistungen-wartung: url(hero-wartung.webp);

    --content-hero-image-tablet-leistungen-steildach: url(hero-steildach-tablet.webp);
    --content-hero-image-tablet-leistungen-flachdach: url(hero-flachdach-tablet.webp);
    --content-hero-image-tablet-leistungen-fassade: url(hero-fassade-tablet.webp);
    --content-hero-image-tablet-leistungen-dachfenster: url(hero-dachfenster-tablet.webp);
    --content-hero-image-tablet-leistungen-metallbearbeitung: url(hero-metallbearbeitung-tablet.webp);
    --content-hero-image-tablet-leistungen-beratung: url(hero-beratung-tablet.webp);
    --content-hero-image-tablet-leistungen-photovoltaik: url(hero-photovoltaik-tablet.webp);
    --content-hero-image-tablet-leistungen-planung: url(hero-planung-tablet.webp);
    --content-hero-image-tablet-leistungen-wartung: url(hero-wartung-tablet.webp);

    --content-hero-image-mobile-leistungen-steildach: url(hero-steildach-mobile.webp);
    --content-hero-image-mobile-leistungen-flachdach: url(hero-flachdach-mobile.webp);
    --content-hero-image-mobile-leistungen-fassade: url(hero-fassade-mobile.webp);
    --content-hero-image-mobile-leistungen-dachfenster: url(hero-dachfenster-mobile.webp);
    --content-hero-image-mobile-leistungen-metallbearbeitung: url(hero-metallbearbeitung-mobile.webp);
    --content-hero-image-mobile-leistungen-beratung: url(hero-beratung-mobile.webp);
    --content-hero-image-mobile-leistungen-photovoltaik: url(hero-photovoltaik-mobile.webp);
    --content-hero-image-mobile-leistungen-planung: url(hero-planung-mobile.webp);
    --content-hero-image-mobile-leistungen-wartung: url(hero-wartung-mobile.webp);

    /* gedeckt *
    --color-white: #F2EDDC;
    --color-yellow: #F2A663;
    --color-orange: #F2935C;
    --color-red: #9B110E;
    --color-brown: #593A28;
    --color-black: #0D0000;
    /* gedeckt */


    /* stark *
    --color-warmwhite: #F2EDDC;
    --color-white: #F2F2F2;
    --color-red: #9B110E;
    --color-brown: #593A27;
    --color-black: #0D0000;
    --color-anthracite: #383e42;
    /* stark */
    

    
    /* weiß *
    --color-warmwhite: #ffffff;
    --color-white: #ffffff;
    --color-yellow: #ffffff;
    --color-orange: #ffffff;
    --color-red: #9B110E;
    --color-brown: #000000;
    --color-black: #000000;
    --color-anthracite: #000000;
    /* hell */

    /* weiß heumannized */
    --color-warmwhite: #ffffff;
    --color-white: #ffffff;
    --color-yellow: #ffffff;
    --color-orange: #ffffff;
    --color-red: #AF191C;
    --color-brown: #1B2140;
    --color-black: #1B2140;
    --color-anthracite: #1B2140;	
	--color-shadow-black: rgb(27, 33, 64, 0.7); /* rgb(0 0 0 / 70%); */
	--color-shadow-white: rgb(255, 255, 255, 0.7);

    --shadow-black: var(--distance-0-5x) var(--distance-0-5x) var(--distance-1x) var(--color-shadow-black);
    --shadow-white: var(--distance-0-5x) var(--distance-0-5x) var(--distance-1x) var(--color-shadow-white);

}

body { font-family:'Arial',sans-serif; margin:0; }

.show { display: flex; opacity: 1; animation-name: fadeIn; animation-duration: 0.3s; }
.hide { display: none; opacity: 1; animation-name: fadeOut; animation-duration: 0.3s; }

@keyframes fadeIn { 0% { display: none; opacity: 0; } 1% { display: flex; opacity: 0; } 100% { display: flex; opacity: 1; } }
@keyframes fadeOut { 0% { display: flex; opacity: 1; } 99% { display: flex; opacity: 0; } 100% { display: none; opacity: 0; } }

.body-wrapper { width:100%; height:fit-content; display:flex; flex-direction: column; overflow-x: hidden; }
.header-wrapper { width: 100%; height: fit-content; display:flex; position: fixed; flex-grow: 0; z-index: 999999; }
.header-wrapper:not(.show) { display:none; }
.content-wrapper { width: 100%; height: fit-content; display:flex; flex-direction: column; gap: var(--distance-0x); flex-grow: 1; }
.footer-wrapper { width: 100%; height: fit-content; display:flex; align-items:center; flex-direction: column; gap: var(--distance-1x); flex-grow: 0;}

.header { width:100%; height: fit-content; display:flex; flex-direction: row; gap: var(--distance-1x); padding: var(--distance-1x); background-color: var(--color-white); box-shadow: var(--shadow-black); justify-content: center; }
.content { height:fit-content; display:flex; flex-direction: column; align-items:center; gap: var(--distance-1x); padding-left: var(--distance-2x); padding-right: var(--distance-2x); padding-top: var(--distance-4x); padding-bottom: var(--distance-4x); }
.footer { width:100%; height:fit-content; display:flex; background-color:var(--color-brown); align-items:center; gap: var(--distance-1x); padding: var(--distance-4x) var(--distance-1x); flex-direction: column; }

.header-title { font-family:'Arial Black',sans-serif; text-transform: uppercase; display:flex; font-size: var(--distance-1-5x); line-height: var(--distance-1-5x); font-weight: 900; color: var(--color-red); align-items: center; }
.header-title.left { justify-content: end; width: 170px; }
.header-title.right { justify-content: start; width: 170px; }
.header-logo { width: var(--distance-3x); height: var(--distance-3x); background-image:var(--header-logo-url-red); background-size: var(--distance-3x) var(--distance-3x); }

.content-hero { width: 100%; display:flex; }
.content-hero-image { width: 100%; height:calc(100vw * 640/1904); aspect-ratio: 1904/640; object-fit: cover; object-position: 50%; }
.content-hero-image-tablet { width: 100%; height:calc(100vw * 640/1493); aspect-ratio: 1493/640; object-fit: cover; object-position: 50%; }
.content-hero-image-mobile { width: 100%; height:calc(100vw * 640/1071); aspect-ratio: 1071/640; object-fit: cover; object-position: 50%; }

.content-logo { width: var(--distance-10x); height:var(--distance-10x); background-size: var(--distance-10x) var(--distance-10x); background-image:var(--content-logo-url-white); }		  
.content-logo-verband { width: var(--distance-10x); height:var(--distance-10x); background-size: var(--distance-10x) var(--distance-10x); background-image:var(--content-logo-verband-url-white); }
.content-logo-dach-mit-handwerker { width: var(--distance-10x); height:var(--distance-10x); background-size: var(--distance-10x) var(--distance-10x); background-image:var(--content-logo-dach-mit-handwerker-url-white); }
.content-title { font-family:'Arial Black',sans-serif; text-transform: uppercase; display: block;font-size: var(--distance-4x); line-height: var(--distance-4x); font-weight: 900; color: var(--color-warmwhite); text-align:center;}
.content-subtitle { font-family:'Arial Black',sans-serif; text-transform: uppercase; display: block;font-size: var(--distance-3x); line-height: var(--distance-3x); font-weight: 900; color: var(--color-warmwhite); text-align:center; }
.content-subsubtitle { display: block;font-size: var(--distance-2x); line-height: var(--distance-2x); font-weight: 900; color: var(--color-warmwhite); text-align:center; }
.content-description { display: block; width:100%; display:flex; font-size: var(--distance-1x); line-height: var(--distance-1-5x); font-weight: 900; color: var(--color-warmwhite); text-align: left; }
.content-linklist { justify-content: center; }
.content-button { box-shadow: var(--shadow-black); color: var(--color-red); background-color: var(--color-orange); width:fit-content; display:flex; font-size: var(--distance-2x); line-height: var(--distance-3x); color: var(--color-white); font-size: var(--distance-1x); line-height: var(--distance-1-5x); padding: var(--distance-1x); }

.content-hero-image { background-image:var(--header-image-white); }

.content-hero-image-steildach { background-image:var(--content-hero-image-leistungen-steildach); }
.content-hero-image-flachdach { background-image:var(--content-hero-image-leistungen-flachdach); }
.content-hero-image-fassade { background-image:var(--content-hero-image-leistungen-fassade); }
.content-hero-image-dachfenster { background-image:var(--content-hero-image-leistungen-dachfenster); }
.content-hero-image-metallbearbeitung { background-image:var(--content-hero-image-leistungen-metallbearbeitung); }
.content-hero-image-beratung { background-image:var(--content-hero-image-leistungen-beratung); }
.content-hero-image-photovoltaik { background-image:var(--content-hero-image-leistungen-photovoltaik); }
.content-hero-image-planung { background-image:var(--content-hero-image-leistungen-planung); }
.content-hero-image-wartung { background-image:var(--content-hero-image-leistungen-wartung); }

.content-hero-image-tablet-steildach { background-image:var(--content-hero-image-tablet-leistungen-steildach); }
.content-hero-image-tablet-flachdach { background-image:var(--content-hero-image-tablet-leistungen-flachdach); }
.content-hero-image-tablet-fassade { background-image:var(--content-hero-image-tablet-leistungen-fassade); }
.content-hero-image-tablet-dachfenster { background-image:var(--content-hero-image-tablet-leistungen-dachfenster); }
.content-hero-image-tablet-metallbearbeitung { background-image:var(--content-hero-image-tablet-leistungen-metallbearbeitung); }
.content-hero-image-tablet-beratung { background-image:var(--content-hero-image-tablet-leistungen-beratung); }
.content-hero-image-tablet-photovoltaik { background-image:var(--content-hero-image-tablet-leistungen-photovoltaik); }
.content-hero-image-tablet-planung { background-image:var(--content-hero-image-tablet-leistungen-planung); }
.content-hero-image-tablet-wartung { background-image:var(--content-hero-image-tablet-leistungen-wartung); }

.content-hero-image-mobile-steildach { background-image:var(--content-hero-image-mobile-leistungen-steildach); }
.content-hero-image-mobile-flachdach { background-image:var(--content-hero-image-mobile-leistungen-flachdach); }
.content-hero-image-mobile-fassade { background-image:var(--content-hero-image-mobile-leistungen-fassade); }
.content-hero-image-mobile-dachfenster { background-image:var(--content-hero-image-mobile-leistungen-dachfenster); }
.content-hero-image-mobile-metallbearbeitung { background-image:var(--content-hero-image-mobile-leistungen-metallbearbeitung); }
.content-hero-image-mobile-beratung { background-image:var(--content-hero-image-mobile-leistungen-beratung); }
.content-hero-image-mobile-photovoltaik { background-image:var(--content-hero-image-mobile-leistungen-photovoltaik); }
.content-hero-image-mobile-planung { background-image:var(--content-hero-image-mobile-leistungen-planung); }
.content-hero-image-mobile-wartung { background-image:var(--content-hero-image-mobile-leistungen-wartung); }

.white { color: var(--color-black); background-color:var(--color-white); } 
.red { color: var(--color-white); background-color:var(--color-red); } 
.black { color: var(--color-white); background-color:var(--color-black); } 

.white a:hover { color: var(--color-red); }  
.red a:hover { color: var(--color-black); } 
.black a:hover { color: var(--color-red); } 

.white .content-logo { background-image:var(--content-logo-url-red); }
.black .content-logo { background-image:var(--content-logo-url-white); }
.red .content-logo   { background-image:var(--content-logo-url-white); }

.white .content-logo-verband { background-image:var(--content-logo-verband-url-red); }
.black .content-logo-verband { background-image:var(--content-logo-verband-url-white); }
.red .content-logo-verband   { background-image:var(--content-logo-verband-url-white); }

.white .content-logo-dach-mit-handwerker { background-image:var(--content-logo-dach-mit-handwerker-url-red); }
.black .content-logo-dach-mit-handwerker { background-image:var(--content-logo-dach-mit-handwerker-url-white); }
.red .content-logo-dach-mit-handwerker   { background-image:var(--content-logo-dach-mit-handwerker-url-white); }

.white .content-title { color: var(--color-red); }
.black .content-title { color: var(--color-white); }
.red .content-title   { color: var(--color-white); }

.white .content-subtitle { color: var(--color-red); }
.white .content-subtitle { color: var(--color-red); }
.black .content-subtitle { color: var(--color-white); }
.red .content-subtitle   { color: var(--color-white); }

.white .content-subsubtitle { color: var(--color-red); }
.white .content-subsubtitle { color: var(--color-red); }
.black .content-subsubtitle { color: var(--color-white); }
.red .content-subsubtitle   { color: var(--color-white); }

.white .content-description { color: var(--color-red); }
.black .content-description { color: var(--color-white); }
.red .content-description   { color: var(--color-white); }

.white .content-button { color: var(--color-white); background-color: var(--color-red); box-shadow: var(--shadow-black); }
.black .content-button { color: var(--color-red); background-color: var(--color-white); box-shadow: var(--shadow-white)}
.red .content-button   { color: var(--color-white); background-color: var(--color-black); box-shadow: var(--shadow-black); }

.white .content-button:hover { color: var(--color-white); background-color: var(--color-black); }
.black .content-button:hover { color: var(--color-white); background-color: var(--color-red); }
.red .content-button:hover   { color: var(--color-black); background-color: var(--color-white); }

.content-logo-black { background-image:var(--content-logo-url-black) !important; }

.footer-contact { text-align: center; }
a, .footer-link { color: var(--color-warmwhite); }
.gap-0-5x { height: var(--distance-0-5x); display:block; }
.gap-1x { height: var(--distance-1x); display:block; }
.gap-2x { height: var(--distance-2x); display:block; }
.gap-4x { height: var(--distance-4x); display:block; }

.content { top:0; }

.content-button { font-weight: bold; border-radius: 0/*var(--distance-2x)*/; padding-left: var(--distance-2x); padding-right: var(--distance-2x); transition: background-color .3s ease, color .3s ease; }
.content-button:hover { cursor: pointer; transition: background-color .3s ease, color .3s ease; }
a.content-button { text-decoration: none; }

.column-3 { width: 75%; flex-direction: row; display:flex; flex-wrap: wrap; justify-content: center; }
.column-3 > a { transition: scale .15s ease; text-decoration: none; box-shadow: var(--shadow-black);  margin-bottom: var(--distance-2x); border-radius: 0/*var(--distance-1x)*/; overflow:hidden; }
.column-3 > a:hover { scale: .95; transition: scale .3s ease; }
.column-3 > a div { font-family:'Arial Black',sans-serif; text-transform: uppercase; width: calc(100% - var(--distance-1x)); background-size: cover; text-shadow: 0px 0px 5px var(--color-shadow-black); hyphens: auto; word-wrap: break-word; line-break: anywhere; font-size:var(--distance-1x); text-align:center; padding:var(--distance-1x); font-weight:bold; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 16/9; color:var(--color-white); }
.footer-visitenkarte-image { width:341px; height: 152px;}

.back-to-top { border-radius: 0/*var(--distance-0-5x)*/; height: var(--distance-3x); width: var(--distance-3x); font-weight: bold; display: flex; justify-content: center; align-items: center; position:fixed; bottom:0; right:0; font-size: var(--distance-2x); color: var(--color-warmwhite); background-color: var(--color-red); padding: 0; border-width: 0; box-shadow: var(--shadow-black); bottom: var(--distance-1x); right: var(--distance-1x); transition: background-color .3s ease, color .3s ease; }
.back-to-top:not(.show) { display:none; }
.back-to-top:hover { transition: background-color .3s ease, color .3s ease; color: var(--color-red); background-color: var(--color-white); }
button { border:0; font-weight: normal; font-family: inherit; }
button:hover { cursor:pointer; }
button:active { border-style: none; }
button:focus-visible { outline: none; }
.content-hero-image { display:block; }
.content-hero-image-tablet { display:none; }
.content-hero-image-mobile { display:none; }

.teaser-image-steildach { background-image: var(--leistungen-steildach); }
.teaser-image-flachdach { background-image: var(--leistungen-flachdach); }
.teaser-image-fassade { background-image: var(--leistungen-fassade); }
.teaser-image-dachfenster { background-image: var(--leistungen-dachfenster); }
.teaser-image-metallbearbeitung { background-image: var(--leistungen-metallbearbeitung); }
.teaser-image-beratung { background-image: var(--leistungen-beratung); }
.teaser-image-photovoltaik { background-image: var(--leistungen-photovoltaik); }
.teaser-image-planung { background-image: var(--leistungen-planung); }
.teaser-image-wartung { background-image: var(--leistungen-wartung); }

.cooperation-link { font-size: 20px; font-weight: 900; color: var(--color-white); text-decoration: none; }

@media (max-width: 480px) {
    .content-title { font-size: var(--distance-3x); line-height: var(--distance-3x); }
    .content-subtitle { font-size: var(--distance-2x); line-height: var(--distance-2x); }
    .content-subsubtitle { font-size: var(--distance-1-5x); line-height: var(--distance-1-5x); }
    .content-description { font-size: var(--distance1x); line-height: var(--distance-1-5x); }
    .column-3 > a { margin-right: var(--distance-2x); width: calc((100% / 1) - var(--distance-4x)); font-size: var(--distance-1-5x); }
    .column-3 > a:nth-of-type(n+1) { margin-right: var(--distance-2x); margin-right: 0; }
    .column-3 > a div { font-size: var(--distance-1x); }
    .column-3 { width: 100%; }
    .content-logo, .content-logo-verband, .content-logo-dach-mit-handwerker { width: var(--distance-8x); height: var(--distance-8x); background-size: var(--distance-8x) var(--distance-8x);}
    .content-hero-image { display:none; }
    .content-hero-image-tablet { display:none; }
    .content-hero-image-mobile { display:block; }
	.header-title { font-size: var(--distance-1x); line-height: var(--distance-1x); }
	.header-title.left { width: 120px; }
	.header-title.right { width: 120px; }
	.header-logo { width: var(--distance-2x); height: var(--distance-2x); background-size: var(--distance-2x) var(--distance-2x); }
	.header { gap: var(--distance-0-5x); }
}

@media (min-width: 481px) AND (max-width: 768px) {
    .content-title, .content-subtitle, .content-subsubtitle, .content-description { width:100%; }
    .column-3 > a { margin-right: var(--distance-2x); width: calc((100% / 1) - var(--distance-4x)); font-size: var(--distance-2x); }
    .column-3 > a:nth-of-type(n+1) { margin-right: var(--distance-2x); margin-right: 0; }
    .column-3 > a div { font-size: var(--distance-1x); }
    .column-3 { width: 75%; }
    .content-hero-image { display:none; }
    .content-hero-image-tablet { display:none; }
    .content-hero-image-mobile { display:block; }
}		
@media (min-width: 769px) AND (max-width: 1024px) {
    .content-title, .content-subtitle, .content-subsubtitle, .content-description { width:75%; }
    .column-3 > a { margin-right: var(--distance-2x); width: calc((100% / 2) - var(--distance-4x)); font-size: var(--distance-1-5x); }
    .column-3 > a:nth-of-type(2n+2) { margin-right: var(--distance-2x); margin-right: 0; }
    .column-3 > a div { font-size: var(--distance-1-5x); }
    .column-3 { width: 100%; }
    .content-hero-image { display:none; }
    .content-hero-image-tablet { display:block; }
    .content-hero-image-mobile { display:none; }
}
@media (min-width: 1025px) AND (max-width: 1280px) {
    .content-title, .content-subtitle, .content-subsubtitle, .content-description { width:66%; }
    .column-3 > a { margin-right: var(--distance-2x); width: calc((100% / 2) - var(--distance-4x)); font-size: var(--distance-2x); }
    .column-3 > a:nth-of-type(2n+2) { margin-right: var(--distance-2x); margin-right: 0; }    
    .column-3 > a div { font-size: var(--distance-1.5x); }
    .column-3 { width: 75%; }
    .content-hero-image { display:block; }
    .content-hero-image-tablet { display:none; }
    .content-hero-image-mobile { display:none; }
}
@media (min-width: 1281px) {
    .content-title, .content-subtitle, .content-subsubtitle, .content-description { width:50%; }
    .column-3 > a { margin-right: var(--distance-2x); width: calc((100% / 3) - var(--distance-4x)); font-size: var(--distance-2x); }
    .column-3 > a:nth-of-type(3n+3) { margin-right: var(--distance-2x); margin-right: 0; }
    .column-3 > a div { font-size: var(--distance-2x); }
    .column-3 { width: 75%; }
    .content-hero-image { display:block; }
    .content-hero-image-tablet { display:none; }
    .content-hero-image-mobile { display:none; }
}