/**
 * CSS by Visualpix Webdesign CH
 * www.visualpix.ch
 * Copyright (c) marco, [C a d o n a u], MCB, Visualpix
 * Version 7.0
 * 2025-12-02
 **/
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
:root {

/* Font */
--ff-main: 'Montserrat', sans-serif;
--fs-text: 18px; 
--fs-h1: 200px;
--fw-fine: 300;
--fw-normal: 400;
--fw-bold: 700; /* noch schauen ob bold 700 oder 800 ist gemass dem Font import */
/* Font END */

/* -- main farben -- */
--clr-main-black: hsl(0, 0%, 0%); /* wird das verwendet ??"*/
--clr-main-antrazit-1: hsl(0, 0%, 7%); /* #111 */ 
--clr-main-antrazit: hsl(0, 0%, 13%);/* #222 */
/* --clr-main-antrazit: rgb(63, 1, 78); */
--clr-main-antrazit-3: hsl(0, 0%, 20%); /* #333 */ 
--clr-main-antrazit-4: hsl(0, 0%, 27%); /* #444 */ 

--clr-main-white: hsl(0, 0%, 100%);
--clr-error: hsl(0, 100%, 50%);
/* -- main farben -- */



/* Layout */
--_canvas-breite-mobile: -75%; /* Navi open with canvas */
--_canvas-breite-dsk: -26%; /* Navi open with canvas */

/* -- divese mains -- */
--content-with-inside: 1275px; /* Contet breite  */
--padding-main-out: 15px; /* paddign rundherum */
/* -- divese mains -- */

/* Anstände */
--margin-ce: 30px;
--margin-ce-inside: 20px;
--margin-content-l-t-i: 40px;
--padding-tb: 40px;

/* Fromen Radius und so weiter */
--radius-nav: 12px; /* Navi open with canvas */
--radius-nav-custom: 5px;
--radius-insel: 20px;

--border-clr-content: var(--clr-main-antrazit-4);   /*--border-clr-content: lime; */


--box_inner_element-padding: 10px 20px; /* --- Box hintergrund headers */
--box_inner-padding: 12px ; 
--_box_inner_radius: 10px;  /* --- Box hintergrund headers */

/* -- Farben Boxen und Navi -- */
--clr-blau-hsl: 230, 60%, 54%; /* für Menu Webdesign HEX #4158d0  --- und auch main in der page diese hier ist zum ändern*/
--clr-blau: hsl(var(--clr-blau-hsl));

--clr-green-hsl: 163, 100%, 33.7%; /* für Menu dienst #00ac7c */
--clr-green: hsl(var(--clr-green-hsl));

--clr-red-hsl: 348, 88.1%, 60.4%; /* für buchungssystem #F34164 */
--clr-red: hsl(var(--clr-red-hsl)); 

--clr-violett-hsl: 293, 60.8%, 51%; /* #BB36CE --clr */
--clr-violett: hsl(var(--clr-violett-hsl));

/* ----- Farben Idean ......... */
--clr-gruen-2-hsl: 175, 75%, 26%; 
--clr-gruen-2: hsl(var(--clr-gruen-2-hsl));

--clr-orange-hsl: 26, 97%, 75.7%; 
--clr-orange: hsl(var(--clr-orange-hsl));
/* ----- Farben Idean ......... */


--clr-blau-hell-hsl: 183, 100%, 40.6%;  /* für Menu Kontakt. #00c6cf */
--clr-blau-hell: hsl(var(--clr-blau-hell-hsl)); 

/* --------------- ///////////////////////////////////.   */

--generell-bg: var(--gradient-luminous-dusk);

--clr-web: hsl(var(--clr-blau-hsl));
--clr-web-fc: ;

--clr-dil: var(--clr-green);
--clr-dil-fc: var(--clr-main-antrazit) ;

--clr-bhu: var(--clr-red);
--clr-bhu-fc: ;

--clr-refz: var(--clr-violett);
--clr-refz-fc: ;

--clr-kontakt: var(--clr-blau-hell);
--clr-kontakt-fc: var(--clr-main-antrazit);




/* -- Farben Boxen und Navi -- */
--gradient-luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%); /* für Menu Home und Main */
--gradient-luminous-dusk-fallback: var(--clr-blau); /* für Menu Home und Main */

--gradient-blau: linear-gradient(90deg, rgba(103,148,224,1) 0%, rgba(95,137,207,1) 40%, rgba(55,80,122,1) 100%); /* für Menu Webdesign */
--gradient-blau: linear-gradient(90deg, rgba(103,148,224,1) 0%, rgba(95,137,207,1) 40%, rgba(65,88,208,1) 100%); /* für Menu Webdesign */
--gradient-blau-fallback: var(--clr-blau); /* für Menu Webdesign */

/* Grid Style */
--grid-span-grosse-s: span 2;
--grid-span-grosse-m: span 3;
--grid-span-grosse-mitte: span 4;
--grid-span-grosse-l: span 5;
--grid-span-grosse-all: span 8;

}

/* ------------------------ reset all browser default settings ------------------------ */
.image_container {text-align:center}
img {border:0px; height: auto; width: 100%;display: block}
:focus {outline:0}
.block {overflow:hidden}
.invisible {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}
body {font-size:100.01%}

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, figure, 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}
blockquote,q {quotes:none}
ul {list-style-type:none}
sup {vertical-align:text-top}
sub {vertical-align:text-bottom}
del {text-decoration:line-through}
ins {text-decoration:none}

#container:after, #canvas:after {
	content:"";
	display:table;
	clear:both
}
input,button,textarea,select {
	font-family:inherit;
	font-size:99%;
	font-weight:inherit
}
table {font-size:inherit}
/*
header,footer,nav,section,aside,article,figure,figcaption  {
	display:block;
}*/
select,input,textarea {font-size:99%}
#container,.inside {position:relative}
table {
	border-spacing:0;
	border-collapse:collapse
}
caption,th,td {
	text-align:left;
	text-align:start; /* see #4596 */
	vertical-align:top
}
caption,th {font-weight:bold}
abbr,acronym {
	font-variant:normal;
	border-bottom:1px dotted #666;
	cursor:help
}
/* ------------------------ reset all browser default settings END------------------------ */

/* Start - layout - main */
html {scroll-behavior: smooth}
body {
    background-color: var(--clr-main-antrazit);
    font-family: var(--ff-main);
    font-size: var(--fs-text);
    font-weight: var(--fw-normal);
    line-height: 1.6;
    color: var(--clr-main-white)
}
#outwrapper {overflow:hidden}
#wrapper {
    position:absolute;
    z-index: 200;
    width:100%;
    height: 100%
}
.inside {
    /*max-width: var(--content-with-inside); ----------------------------------------------------*/
   /* margin: auto 20px;*/
}
.tog-open #wrapper {
    position: fixed;
    transform: translateX(var(--_canvas-breite-mobile));
    -ms-transform: translateX(var(--_canvas-breite-mobile));
    -webkit-transform: translateX(var(--_canvas-breite-mobile));
    -moz-transform: translateX(var(--_canvas-breite-mobile));
    -o-transform: translateX(var(--_canvas-breite-mobile));
}
#header {
    width:100%;
    background: var(--clr-main-antrazit);
    z-index: 9000;
}
.logo-nav {
    background: var(--clr-main-antrazit);
    align-items: center;
    justify-content: space-between;
    padding: 15px var(--padding-main-out);
}
.logo {
    width: 175px;
    height:auto;
}
#container {
    background-color: var(--clr-main-antrazit);
    width:100%;
    min-height:1000px;
    margin:0 auto;
    padding: var(--padding-tb) 0;
}
#main {width:100%;float:none} /*evt weg oder in reset*/
#main .inside {min-height:1px}

#footer {
    width:100%;
    background: var(--clr-main-antrazit-1);
}
/* .footer_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    grid-gap: 1em
} */
/*
.footer_column {
    padding: 20px;
    border-radius: 0 0 20px 20px;
    background: var(--clr-black);
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(49,45,60,0.3) 100%);
}*/
.copyright {
    margin:20px 0;
    text-align:center;
    font-size:12px
}
.scrolltop {
    width:64px;
    height:64px;
    bottom:7px;
    right:12px;
    position:fixed;
    overflow:hidden;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius:50%;
    z-index: 9999;
    cursor: pointer;
}
.scrolltop a::before {
    width:100%;
    height:100%;
    padding-top:10px;
    font-size:40px;
    text-decoration:none;
    color: var(--clr-white);
    margin: 0
}
/* END - layout - main */

#nav_main_d {display: none}
/* Start - menutog */
.menutog-button {
    display: flex;
    align-items: center;
    height: 34px;
    z-index: 9999;
    cursor: pointer;
}
.menutog__toggle {
    position: relative;
    top: 0;
    left: 0;
    padding: 12px 11px;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}
.menutog__toggle,
.menutog__toggle::before,
.menutog__toggle::after {
    position: relative;
    content: '';
    width: 40px;
    height: 1px;
    padding: 0;
    background: var(--clr-main-white)
}
.menutog__toggle::before,
.menutog__toggle::after {
  position: absolute;
  left: 0
}
.menutog__toggle::before {bottom: 7px}
.menutog__toggle::after {top: 7px}

.tog-open .menutog__toggle,
.tog-open .menutog__toggle::before,
.tog-open .menutog__toggle::after {
    background: var(--clr-main-white);
}
.tog-open .menutog__toggle {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg)
}
.tog-open .menutog__toggle::before {
    transform: rotate(-90deg) translate(-7px);
    -webkit-transform: rotate(-90deg) translate(-7px);
    -moz-transform: rotate(-90deg) translate(-7px);
    -ms-transform: rotate(-90deg) translate(-7px)
}
.tog-open .menutog__toggle::after {
    transform: rotate(-90deg) translate(7px);
    -webkit-transform: rotate(-90deg) translate(7px);
    -moz-transform: rotate(-90deg) translate(7px);
    -ms-transform: rotate(-90deg) translate(7px)
}
/* END - menutog */

/* ------- BOX NEN NEU  */
.insel {
    --_gradient-luminous-dusk: var(--gradient-luminous-dusk, var(--gradient-luminous-dusk-fallback)); /* fallback für gardient-luminous-dusk  --_insel-bg-color */
    --_insel-bg-color: var(--insel-bg-color, var(--_gradient-luminous-dusk));
    --_insel-font-color: var(--insel-font-color, var(--clr-main-antrazit));

    background: var(--_insel-bg-color);
    color: var(--_insel-font-color);
    margin: 0 var(--padding-main-out);   /* wegen neues design 002 ---- */
    padding: 20px;
    border-radius: var(--radius-insel);
}
.insel.web {
    --_insel-bg-color: var(--clr-web);
}
.insel.dil  {
    --_insel-bg-color: var(--clr-dil);   /* warum nicht wie hier mit bg ist ja der Fall back zur nur Insle auch gegeben ob ich immer background oder --_insel-bg-color schreibe kommt auf das gelcihe oder nicht? evt bei noch mehr wie button, Icon und so macht es dann sinn */
}
.insel.bhu {
    --_insel-bg-color: var(--clr-bhu);
}
.insel.refz {
    --_insel-bg-color: var(--clr-refz);
}
.insel.kontakt {
    background: var(--clr-kontakt);   /* warum nicht wie hier mit bg ist ja der Fall back zur nur Insle auch gegeben ob ich immer background oder --_insel-bg-color schreibe kommt auf das gelcihe oder nicht? evt bei noch mehr wie button, Icon und so macht es dann sinn */
}

.insel .btn a {
    --_btn-background-clr: var(--clr-main-antrazit);   
}
.insel .btn a:hover {
    --_btn-background-clr-hover: var(--clr-main-antrazit-3);   
}
/* .slider_header_bild_width {
    width: 90%;
    margin: auto !important;
}  */

/* ------- BOX NEN NEU  */

/* ------- HnterGrund COntent  */
.art_wrapp_inner {padding: var(--padding-tb) var(--padding-main-out);}
.content-width {
    width:100%;
    max-width:1275px;
    margin-inline: auto;
}

.content-width-color > div > div { /* kann das öbderub in .content-width dei div div */
    background: var(--clr-main-antrazit-1);  /* farbe oder border neutral alle Fallback */
    padding: 20px;
    border-radius: 20px;  /* wegen neues design 002 ---- */ /* seperater css .........  */

 /* background: var(--clr-main-antrazit-3);  /* farbe oder border neutral alle Fallback */
}

.content-width-color-border .content-width {  /* border farbe Default */
 /* --_border-clr-content: var(--border-clr-content, var(--clr-main-antrazit-4));*/
    --_border-clr-content: var(--border-clr-content);
    --_fc-clr-content: var(--clr-main-white); 
    border: 1px solid var(--_border-clr-content);
    color: var(--_fc-clr-content);
    padding: 20px;
    border-radius: 20px; 
}
.content-width-color-border.web .content-width {
    --_border-clr-content: var(--clr-web);
/* noch Botton hover und titel hove machen  natürlich bei allen */
}
.content-width-color-border.dil .content-width {
    --_border-clr-content: var(--clr-dil);
/* noch Botton hover und titel hove machen  natürlich bei allen */
}
.content-width-color-border.bhu .content-width {
    --_border-clr-content: var(--clr-bhu);
}
.content-width-color-border.refz .content-width  {
    --_border-clr-content: var(--clr-refz);
}
.content-width-color-border.kontakt .content-width {
    border: 1px solid var(--clr-kontakt);
}

/* ------- HnterGrund Content  end */
.margin-bottom-xx {margin-bottom: 40px;}

/* ......  Kurze Variante Testen .... */
h1, h2, h3, h4,
[class*="content-"]:not([class*="content-width"]) {
    margin: var(--margin-content-l-t-i) 0 var(--margin-content-l-t-i);
} 

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
[class*="content-"]:not([class*="content-width"]):first-child {
    margin-top:0
}  /* was mit content-image und content-table und content-headline */

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
[class*="content-"]:not([class*="content-width"]):last-child {
    margin-bottom:0
} /* was mit content-image und content-table und content-headline */


.grid_set.content-element-group > div,
.flex_set.content-element-group > div
{margin: 0;}

/* .grid_set.content-element-group,
.flex_set.content-element-group
{margin: 0;} */


/* xxxxxxxxxxxxxxxxxxxxxxxxxx IST eigentlich im namen padding muss aber alles ändern noch ---- die unten ist auch margin... darum x_margin_only..... */
.cw_margin_onlybottom, .cw_margin_onlybottom > div {padding-top: calc( var(--padding-tb) - var(--padding-tb) );}
.cw_margin_onlytop, .cw_margin_onlytop > div {padding-bottom: calc( var(--padding-tb) - var(--padding-tb) );}
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */

/* xxxxxxxxxxxxxxxxxxxxxxxxxx */
.xx_margin_onlybottom, .xx_margin_onlybottom > div {margin-top: 0}
.xx_margin_onlytop, .xx_margin_onlytop > div {margin-bottom: 0}
/* xxxxxxxxxxxxxxxxxxxxxxxxxx */


p {margin: var(--margin-ce-inside) 0;text-align:left}
p:first-child {margin-top: 0}
p:last-child {margin-bottom: 0}


.centertext,
.centertext > div,
.centertext p {
    text-align:center
}/* ??????????????? ab chäcken  */
/*
.content-width-1075 > .art_wrapp_inner > .content-width {max-width:1075px}
.content-width-1075 > div > .art_wrapp_inner > .content-width {max-width:1075px}
*/

.mod_article.bildfuulwidth {margin:0;padding:0} /* das ist wie hier inaktiv also keine class aber muss mal schauen ist interesant */

/* END - article wrapp  */


/* Start - Allgemeines - LINKS - allgemein */
a:hover,
a:focus,
strong.active {
    text-decoration:none;
    color: var(--clr-main-white);
    font-weight: var(--fw-normal)
}
a {
    text-decoration:underline;
    color:var(--clr-main-white)
}
/* END - Allgemeines */

/* GRID FLEX main settings */
.grid_set {
    --_colums-min-width: 350px;
    --_colums-min-width: 501px;
    --_gap-width: 1em;
    --_fit-fill: auto-fit;
    display: grid;
    grid-template-columns: repeat(var(--_fit-fill), minmax(min(var(--_colums-min-width), 100%), 1fr));
    grid-gap: var(--_gap-width);
}
.flex_set,
.nav_main_d ul,
#navigation_main_canvas.ind-nav ul { 
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap
}
.flex_set_2 { /*  nur für die Boxen weil flex_set nicht geht da es mit .grid_set.content-element-group > div, .flex_set.content-element-group > div {margin: 0;} nicht geht */
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap
}    

/* GRID FLEX main settings */

.footer_grid {
    --_colums-min-width: 350px;
}


.btn-flex {gap: 10px;}
.btn { } /* evt custom property hier alle für buttons */
.btn a {
    --_btn-background-clr: var(--clr-main-antrazit-3);
    display: inline-block;
    background: var(--_btn-background-clr);
    padding: 7px 12px;
    border-radius: 5px;
    text-decoration: none;
}
.btn a:hover {
    --_btn-background-clr-hover: var(--clr-main-antrazit-4);
    background: var(--_btn-background-clr-hover);
    color: var(--clr-main-white);
}
.box .btn-flex {margin-top: auto;}
.btn-flex .content-hyperlink {margin: 0;}

/* .box a {
    background: var(--clr-main-antrazit-4);
}
.box a:hover {
    background: var(--clr-main-antrazit-3);
    color: var(--clr-main-white);
} */

.box-grid {
    --_colums-min-width: 350px;
    --_gap-width: 2em;
}
.box-grid-8-colums {grid-template-columns: repeat(8, 1fr);}

.box {
    --_box-border-clr: var(--clr-main-antrazit-4);
    height: 100%; 
    padding: var(--box_inner-padding);
    flex-direction: column;
    font-size: 16px;
    border: 1px solid var(--_box-border-clr);
    border-radius: var(--_box_inner_radius);
}
.box.web {
    --_box-border-clr: var(--clr-web);
}    
.box.dil {
    --_box-border-clr: var(--clr-dil);
}
.box.bhu {
    --_box-border-clr: var(--clr-bhu);
}
.box.refz {
    --_box-border-clr: var(--clr-refz);
}
.box.kontakt {
    --_box-border-clr: var(--clr-kontakt);
}

 /* Auch immer farbe die Boxen */


.box_inner_element {
    background: var(--clr-main-antrazit-4);
    padding: var(--box_inner_element-padding);
    border-radius: var(--_box_inner_radius);
}
.box h2 {
    font-size: 24px;
    font-weight: var(--fw-normal);
    border-bottom: 1px solid var(--clr-main-antrazit-1);
    width: 100%;
    margin-bottom: 20px !important;
}

.box h2,
.box h3,
.box [class*=".content-"]:not([class*=".content-width"]) {
    --_margin-oben-unten: 15px;
    margin: var(--_margin-oben-unten) 0 var(--_margin-oben-unten)
} 
    
.box h1:last-child:first-child,
.box h2:last-child:first-child,
.box h3:last-child:first-child,
.box h4:last-child:first-child,
.box [class*=".content-"]:not([class*=".content-width"]):first-child {
    margin-top: 0; 
} 
.box h1:last-child,
.box h2:last-child,
.box h3:last-child,
.box h4:last-child,
.box [class*=".content-"]:not([class*=".content-width"]):last-child {
    margin-bottom:0
}
/*   Warummmmmmm gehts da und beim border nicth -------------------------------------
.bhu .box_inner_element {
    background: var(--clr-bhu);
    color: var(--clr-bhu-fc);background: yellowgreen;
}
*/

.box:hover, /* Hover generell */
.box_inner_element:hover { 
    --_box-color: var(--generell-bg);
    background: var(--_box-color);
    color: var(--generell-fc);
   /* border: 1px solid rgb(226, 148, 5);*/
} 

.box.web:hover,
.web.box_inner_element:hover {
    --_box-color: var(--clr-web);
    background: linear-gradient(180deg,hsl(var(--clr-blau-hsl), 1) 0%, hsl(var(--clr-blau-hsl), 0) 20%);
}
.box.dil:hover,
.dil .box_inner_element:hover {
    --_box-color: var(--clr-dil);
    background: linear-gradient(180deg,hsl(var(--clr-green-hsl), 1) 0%, hsl(var(--clr-green-hsl), 0) 20%);
}
.box.bhu:hover, 
.bhu .box_inner_element:hover {
    --_box-color: var(--clr-bhu);
    background: linear-gradient(180deg,hsl(var(--clr-red-hsl), 1) 0%, hsl(var(--clr-red-hsl), 0) 20%);
}
.box.refz:hover,
.refz .box_inner_element:hover {
    --_box-color: var(--clr-refz);
    background: linear-gradient(180deg,hsl(var(--clr-violett-hsl), 1) 0%, hsl(var(--clr-violett-hsl), 0) 20%);
}
.box.kontakt:hover,
.kontakt .box_inner_element:hover {
    --_box-color: var(--clr-kontakt);
    background: linear-gradient(180deg,hsl(var(--clr-blau-hell-hsl), 1) 0%, hsl(var(--clr-blau-hell-hsl), 0) 20%);
}

.span-grosse-all {grid-column: var(--grid-span-grosse-all);}
.span-grosse-s, .span-grosse-m, .span-grosse-mitte, .span-grosse-l {grid-column: span 8;}



/* Start - Uberschriften und  */
h1,h2,h3,h4,h5,h6 {
    margin: var(--margin-ce-inside) 0;
    font-weight:var(--fw-normal);
    padding: 0;
}
h1 {
    font-weight: var(--fw-bold);
    font-size: 26px;
}
h2 {font-size:24px;}
h3 {font-size:22px;}

[class*="content-"]:not([class*="content-width"]):not([class*="content-element-group"]) > h2,
[class*="content-"]:not([class*="content-width"]):not([class*="content-element-group"]) > h3 {
    margin-bottom: 4px;
    /* border-bottom: 1px dotted var(--clr-orange); */
}
/* END - Uberschriften und  */

/*.mod_article,
.mod_newsreader {padding:10px 0}*/
.teaser {
    margin:0 0 20px 0;
    padding:0;
    line-height:1.2;
}
.mod_article .back {margin-top:18px}
.mod_article .more {display:inline}
/*
.content-list ul { margin: var(--margin-ce-inside) 0 var(--margin-ce-inside)}*/
.content-list li {margin:0 0 0 22px}
.content-list ul li {list-style-type:circle}


/*Start - Partnerlinks - Custom Site */
.partner_links_set {gap: 20px;}
.partner_links {flex: 1 1 auto;}
.partner_links a {
    display: block;
    background: var(--clr-main-antrazit-4);
    text-decoration: none;

    padding: 20px;
    border-radius: 10px;
}
.partner_links a:hover {
    background: var(--clr-blau);
}

/*END - Partnerlinks - Custom Site */

/*Start - Formulare */
#kontaktformular {
    margin: auto;
}
fieldset {border: none}
.widget {
    width:100%;
    margin-bottom:5px;
    padding:2px;
}
#kontaktformular label {display:none}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="file"],
textarea,
select {
    width:100%;
    padding:15px 10px;
    background:var(--clr-main-antrazit-3);
    border:1px solid var(--clr-main-antrazit-1);
    border-radius: var(--radius-nav);
    color: var(--clr-main-white)
}
#kontaktformular .text:hover,
#kontaktformular .textarea:hover,
#kontaktformular .captcha:hover,
#kontaktformular .captcha mandatory:hover,
#kontaktformular .text:focus,
#kontaktformular .textarea:focus,
#kontaktformular .captcha:focus,
#kontaktformular .captcha mandatory:focus,
#kontaktformular .styled_select:hover,
#kontaktformular .styled_select:focus,
#kontaktformular .select mandatory:focus,
#kontaktformular .select mandatory:hover {
    border: 1px solid var(--clr-kontakt);
    color: var(--clr-main-white);
}
#kontaktformular select{
    background-color: var(--clr-main-antrazit-3);
    border: 1px solid var(--clr-main-antrazit-1);
}
#kontaktformular select:hover {
    border: 1px solid var(--clr-kontakt);
}
::placeholder {color: #fff}

#kontaktformular .text.error,
#kontaktformular .textarea.error,
#kontaktformular .captcha.error {
    background-color: var(--clr-error) !important;
    border: 1px solid var(--clr-error) !important;
    color: var(--clr-main-white)
}
.mitteilung {vertical-align:top}
#kontaktformular .agb label {display: inline-block}
#kontaktformular .captcha.sicherheitsfrage {width:40px}
.submit .submit {
    width:100%;
    padding:22px 7px;
    text-align:center;
    background-color: var(--clr-main-antrazit-3);
    border:1px solid var(--clr-main-antrazit-1);
    color: var(--clr-main-white);
    border-radius: var(--radius-nav);
    cursor: pointer
}
.submit .submit:hover,
.submit .submit:active {
    border-color:var(--clr-kontakt);
}
div.error,
p.error {color: var(--clr-error)}
#kontaktformular p.error {float:right;display:none}
/* END - Formulare */

.boxbottom {position: relative}
.boxbottom {bottom: 12px}

#canvas {
    height:100%;
    -webkit-overflow-scrolling: touch;
    position:absolute;
    width: calc(var(--_canvas-breite-mobile) * -1);
    top: 0;
    right: 0;
    bottom: 0;
    right: 0;
    overflow:auto;
    display:block;
    background-color:#000;
    z-index: 10
}
#canvas .inside {margin: var(--padding-main-out);}


/* -------------NAVI ------jetzt neu 2025-03-29 _____________________________ */

#navigation_main_canvas a,
#navigation_main_canvas .active strong {
    display: block;
    background: var(--clr-main-antrazit-1);
    margin: 10px auto; 
    padding: 12px 7px;
    color: var(--clr-main-white);
    font-size: 18px;
    text-decoration: none; 
    border-radius: 5px;
}
#navigation_main_canvas a {
    background: var(--clr-main-antrazit-1);
    color: var(--clr-main-white);
}
#navigation_main_canvas .active strong {
    background: var(--clr-blau);
}
#navigation_main_canvas a:hover {
    background: var(--clr-main-antrazit);
}
#navigation_main_canvas a.trail {
    background: var(--clr-blau);
}
#navigation_main_canvas ul .level_2,
#navigation_main_canvas ul .level_3 {
    padding:0 0 0 15px;
}
#navigation_main_canvas ul .level_2 a,
#navigation_main_canvas ul .level_2 .active strong {
    margin: 10px 0;
    padding: 7px 7px;
    border-radius: 5px;
}
/* -------------NAVI ------jetzt neu 2025-03-29 _____________________________ */



/* END - CANVAS */


/* NAv costom Canvas */

/* Start - Navigation Footer oder Custom */
.navi_footer,
.ind-nav  {
    --_fs-footer-nav: 12px; /* mehr oben als custom proberty machen fue alle oder andere die gleich sind */
    --_padding-nav-footer-ind-a: 4px 7px; /* mehr oben als custom proberty machen fue alle oder andere die gleich sind */
    --_border-radius-nav: var(--radius-nav-custom); /* mehr oben als custom proberty machen fue alle oder andere die gleich sind */
    margin:40px auto 0;
    padding:0;
}
.ind-nav ul,
.navi_footer ul {
    gap: 7px;
    justify-content: center;
}
.ind-nav li {flex: 1 0 auto}

.ind-nav li,
.navi_footer li {
    margin: 0;
    padding: 0;
}

#navigation_main_canvas.ind-nav a,
#navigation_main_canvas.ind-nav strong,
.mod_customnav.navi_footer a,
.mod_customnav.navi_footer .active strong  {
    background: var(--clr-main-antrazit-1);
    margin: 0;
    display: block;
    padding: var(--_padding-nav-footer-ind-a);
    font-size: var(--_fs-footer-nav);
    color: var(--clr-main-white);
    text-align: center;
    text-decoration:none;
    border-radius: var(--_border-radius-nav);
}
#navigation_main_canvas.ind-nav .active strong,
#navigation_main_canvas.ind-nav a.trail,
#navigation_main_canvas.ind-nav a:hover,
.mod_customnav.navi_footer .active strong,
.mod_customnav.navi_footer a.trail,
.mod_customnav.navi_footer a:hover {
    background: var(--clr-main-antrazit);
    background: var(--clr-blau);
    font-size: var(--_fs-footer-nav);
    font-weight: var(--fw-normal);
    color:var(--clr-main-white);
    padding: var(--_padding-nav-footer-ind-a);
    border-radius: var(--_border-radius-nav);
    
}

/* END - Navigation Footer oder Custom */

/* Start - Animation und speed*/
.animation1,
a,
.preise tr,
.galerie img,
input,
textarea,
select,
#wrapper,
.menutog__toggle,
.menutog__toggle::before,
.menutog__toggle::after,
.box_inner,
.box_inner_element,
.contao-cookiebar {
    --_speed-1: 0.7s;
    transition: All var(--_speed-1) ease;
    -webkit-transition: All var(--_speed-1) ease;
    -moz-transition: All var(--_speed-1) ease;
    -o-transition: All var(--_speed-1) ease;
}
/* END - Animation und speed*/

/* Start - Gallery*/
.galerie {
    --_picture-radius: 10px;    
}
.galerie ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 2rem;    
}
.galerie li {
    overflow: hidden;
    border-radius: var(--_picture-radius);
}
.galerie img {
    object-fit: cover;
    aspect-ratio: 2 / 1.5;
    border-radius: var(--_picture-radius);
}
.galerie img:hover {transform: scale(0.97)}
/* END - Gallery*/

.socialmedia_canvas {margin-top:12px}
.social_button {
    flex: 1 0 25%;
    text-align: center;
}
.social_button a {
    font-size: 46px;
    text-decoration: none;
    color: var(--clr-main-white);
    cursor: pointer
}

/* .facebook:hover {color:#3B5998 !important}
.instagram:hover {color:#c638a1!important}
.foursquare:hover {color:#F94877!important}
.yelp:hover {color:#D32323!important}
.twitter:hover {color:#1DA1F2!important}
.vimeo:hover {color:#00adef!important}
.whatsapp:hover {color:#00e676}
.telegram:hover {color:#0088cc} */
.iconhover:hover {color:var(--clr-blau)}

/* Start - div zum am schluss laden */
::-webkit-scrollbar-track {background-color:#fcf932}

.mod_article .pdf_link {
    margin-bottom:-16px;
    text-align:right
}
.mod_article .pdf_link a {
    padding-right:1px;
    padding-left:1px
}

/* Sitemap */

.sitemap .submenu > ul   {
    margin-left: 20px;
}
.sitemap ul.level_1 > li   {
    margin: 20px 0;
}
/* Suche */
.suche .search_default {
    background: var(--clr-main-antrazit-3);
    padding: 20px;
    margin: 20px 0;
    border: 1px solid var(--clr-main-antrazit-1);
    border-radius: var(--radius-nav);
}
.suche .highlight {
    background: var(--clr-blau);
    color: var(--clr-main-white);
}
.suche .pagination ul {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.suche .pagination a,
.suche .pagination .active {
    text-decoration: none;
    padding: 3px 5px;
    border-radius: 3px;
}
.suche .pagination .active,
.suche .pagination a:hover {
    background: var(--clr-blau);
 
}

/* ---------cooki--------- */

.contao-cookiebar.vpix-cookie.cc-active {
    background: rgba(0, 0, 0, 0.7);
}
.contao-cookiebar.vpix-cookie.cc-active.cc-saved {
    background: transparent;
}

.contao-cookiebar .cc-inner { /* ---------gesamte Box--------- */
    background-color: var(--clr-main-antrazit-3);
    border: 2px solid var(--clr-blau);
    border-radius: var(--radius-nav);
    color: var(--clr-main-white);
}
.contao-cookiebar p {
    color: var(--clr-main-white);
}
.contao-cookiebar input + label::before {
    background: var(--clr-main-antrazit-3);
}

.contao-cookiebar input:checked + label::before {
    border-color: var(--clr-blau);
    background: var(--clr-main-white);
}
.cc-cookies > p, .cc-cookies > .cc-cookie, .cc-cookie-info {
    background: var(--clr-main-antrazit-3);
    color: var(--clr-main-white);
}
.contao-cookiebar input:checked + label::after {
    color: var(--clr-main-white);
    background: var(--clr-main-antrazit-4);
}

.contao-cookiebar .cc-btn {
    background-color: var(--clr-main-antrazit-4);
    color: var(--clr-main-white);
    border: var(--clr-main-antrazit-4);
}
.contao-cookiebar .cc-btn:hover {
    background: var(--clr-blau);
    color: var(--clr-main-white);
}

/* ---------cooki--------- */




/* ------------------- Tablet ----------------------------------------------- */
 @media (min-width:768px) {

    h1 {font-size: 64px}   
    h2 {font-size: 30px} 

    .span-grosse-s, .span-grosse-m, .span-grosse-l {grid-column: span 4;}
    .span-grosse-mitte {grid-column: var(--grid-span-grosse-mitte);}
    
    .slider_header_bild_width {
        width: 70%;
        margin: auto;
    }
    
}


/* ------------------- DESKTOP ----------------------------------------------- */
 @media (min-width:960px) {

   
  /*.menutog-button {display: none} */      /* Villeicht weg oder sein lassen bei Desktop version   */
    #nav_main_d {display: block;}

    .nav_main_d ul {
        gap: 12px;
    }

/*
    .nav_main_d li {display: inline-block}*/
    .nav_main_d a, /*.nav_main_d /*.active,*/ .nav_main_d strong.active   {
        display: block;
        text-decoration: none;
        padding: 7px;
        font-size: 18px;
        font-weight: 200;
        background: var(--clr-main-antrazit-3);
        text-decoration: none;
        border-radius: 7px;
     }       
        
    .nav_main_d .active strong,
    .nav_main_d a:hover,
    .nav_main_d a:hover a,
    .nav_main_d a.trail,
    .nav_main_d li.trail a.trail{
        position: relative
       }
  
    .nav_main_d .active strong,
    .nav_main_d a.trail,
    .nav_main_d a:hover {
        background: var(--clr-main-white);
        color: var(--clr-main-antrazit-1);
    
    }    

    .nav_main_d .web.active strong,
    .nav_main_d .web a.trail,
    .nav_main_d .web a:hover {
        background: var(--clr-web);
     
    }    
    .nav_main_d .dil.active strong,
    .nav_main_d .dil a.trail,
    .nav_main_d .dil a:hover {
        background: var(--clr-dil);
        color: var(--clr-dil-fc);
        
    }
    .nav_main_d .bhu.active strong,
    .nav_main_d .bhu a.trail,
    .nav_main_d .bhu a:hover {
        background: var(--clr-bhu);
        color: var(--clr-bhu-fc);
    }
    .nav_main_d .refz.active strong,
    .nav_main_d .refz a.trail,
    .nav_main_d .refz a:hover {
        background: var(--clr-refz);
        color: var(--clr-refz-fc);
    }
    .nav_main_d .kontakt.active strong,
    .nav_main_d .kontakt a.trail,
    .nav_main_d .kontakt a:hover {
        background: var(--clr-kontakt);
        color: var(--clr-kontakt-fc);
    }            

    /*
    .nav_main_d ul.level_2 {
        width:230px;
        left:-999em;
        position:absolute;
        height: auto;
        padding-top: 10px;
    }    
    .nav_main_d ul.level_2 li {
        position:relative;
        float:none;
        display:block;
        text-align: left;
        width: 100%;
        margin: 2px 0;
        background-color: transparent
    }    
    .nav_main_d ul.level_2 a, .nav_main_d ul.level_2 .active strong {
        background-color: rgba(0,0,0,0.7);
        color: #fff;
        padding: 10px;
        font-size: 16px;
        margin: 0;
        height: auto
     }
    .nav_main_d ul.level_2 a:hover,    
    .nav_main_d ul.level_2 a.trail,
    .nav_main_d ul.level_2 .active strong,

    
    .nav_main_d.sub ul a:hover,
    .nav_main_d.sub ul a.trail,
    .nav_main_d.sub ul .active strong {
        background-color: #610B0B}
    .nav_main_d li:hover ul.level_2 {
        left:auto;
        z-index: 9999
    }   
    
    .nav_main_d ul.level_2 a, .nav_main_d ul.level_2 strong {border-radius: 0}  
     
    .nav_main_d ul.level_2 li:first-child {
        overflow: hidden;
        -webkit-border-top-left-radius: var(--radius-nav);
        -webkit-border-top-right-radius: var(--radius-nav);
        -moz-border-radius-topleft: var(--radius-nav);
        -moz-border-radius-topright: var(--radius-nav);
        border-top-left-radius: var(--radius-nav);
        border-top-right-radius: var(--radius-nav);
        }   
        
     .nav_main_d ul.level_2 li:last-child {
        overflow: hidden;
        -webkit-border-bottom-right-radius: var(--radius-nav);
        -webkit-border-bottom-left-radius: var(--radius-nav);
        -moz-border-radius-bottomright: var(--radius-nav);
        -moz-border-radius-bottomleft: var(--radius-nav);
        border-bottom-right-radius: var(--radius-nav);
        border-bottom-left-radius: var(--radius-nav);
        }      
        */
    .tog-open #wrapper {
        transform: translateX(var(--_canvas-breite-dsk));
        -ms-transform: translateX(var(--_canvas-breite-dsk));
        -webkit-transform: translateX(var(--_canvas-breite-dsk));
        -moz-transform: translateX(var(--_canvas-breite-dsk));
        -o-transform: translateX(var(--_canvas-breite-dsk));
    }
    #canvas {width: calc(var(--_canvas-breite-dsk) * -1);}
    
    .span-grosse-s {grid-column: var(--grid-span-grosse-s);}
    .span-grosse-m {grid-column: var(--grid-span-grosse-m);}
    .span-grosse-l {grid-column: var(--grid-span-grosse-l);}

    
    }



/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/files/visualpix/font-face/montserrat/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/files/visualpix//font-face/montserrat/montserrat-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('/files/visualpix//font-face/montserrat/montserrat-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}