@font-face {
 font-family:'Open Sans Variable';
 src:url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
 font-weight:100 900;
 font-stretch:75% 400%;
 font-display:swap; 
}

:root {
 --ciFarbe1:     #222222;
 --ciFarbe2:     #8b0000;
 --ciFarbe3:     #016c11;
}

html                                                        {font-size:100%; line-height:100%; scroll-behavior:smooth;}
*                                                           {margin:0; padding:0; font-family:'Open Sans Variable', Arial, Helvetica, sans-serif; font-size:16px; line-height:26px; color:var(--ciFarbe1); font-weight:400; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
*:after, *:before                                           {-webkit-box-sizing:border-box; -moz-box-sizing:border-box;	box-sizing:border-box;}
body                                                        {background-color:#fff; margin:0; padding:0;}
body.content                                                {width:100%; min-height:100vh; background-color:var(--pageBG); background:#fff;}
body.popup                                                  {padding:10px;}
a, img                                                      {border-style:none; text-decoration:none;}
a                                                           {color:var(--ciFarbe2);}
h1                                                          {font-size:22px; line-height:28px; font-weight:800; font-stretch:80%; color:#222; text-transform:uppercase;}
h1.maintitle,h2.maintitle                                   {padding:24px 0%;}
h2                                                          {font-size:20px; line-height:32px; font-weight:800; font-stretch:80%; color:#222; margin-bottom:24px; text-decoration:underline; text-decoration-color:var(--ciFarbe2); text-decoration-thickness:3px; text-underline-offset:5px;}
h3                                                          {font-size:18px; line-height:26px; font-weight:800; font-stretch:80%; color:var(--ciFarbe2);}
h4                                                          {font-size:18px; line-height:16px; font-weight:600;}
div                                                         {margin:0; padding:0; display:block;}
p                                                           {margin-top:24px; margin-bottom:24px;}
label                                                       {vertical-align:middle;}
b,strong                                                    {font-weight:600; font-family:inherit; font-size:inherit; color:inherit; line-height:inherit;}
i,em                                                        {font-style:italic;}
.kleiner                                                    {font-size:.9em; line-height:1.2em;}
.clr                                                        {position:relative; display:block; width:0; height:0; clear:both; line-height:0;}
hr                                                          {height:1px; margin:1rem 0; background-color:var(--ciFarbe1); border:none;}

ol, ul, li                                                  {margin:0; padding:0;}
ul, ol, form                                                {margin-top:4px; margin-bottom:8px;}
form                                                        {margin-top:8px;}
ul                                                          {margin-left:15px;}
ol                                                          {margin-left:20px;}
ul ul, ul.sitemap1                                          {margin-left:15px;}
ul ul                                                       {margin-top:1px; margin-bottom:1px;}
ol ol                                                       {margin-top:1px; margin-bottom:1px;}

#top                                                        {position:absolute; top:5px; left:5px; width:920px; height:40px; background-color:#efefef; border-style:solid; border-color:silver; border-width:1px;}
#menu                                                       {position:absolute; top:55px; left:5px; width:255px; background-color:#efefef; border-style:solid; border-color:silver; border-width:1px;}

#top_left                                                   {position:fixed; display:block; z-index:20; height:60px; top:10px; left:10px;}
#top_right                                                  {position:fixed; display:block; z-index:20; height:60px; top:10px; right:10px;}
#top_right img                                              {width:100%; height:100%; object-fit:cover;}
.head_icon                                                  {display:inline-block; height:20px; margin:0 20px 0 0; border-radius:5px;}
.head_icon:last-child                                       {margin-right:0px;}
.head_icon a                                                {font-size:14px;  color:#999;}
.head_icon a img                                            {margin-right:5px; margin-bottom:3px; vertical-align:middle;}
.head_icon:nth-child(4) a img,
.head_icon:nth-child(5) a img                               {margin-right:0;}


/* ---------- HEADER ---------- */
#headWrap                                                   {position:fixed; z-index:20; width:100vw; height:80px; top:0; left:0; margin:0 auto; padding:0; background-color:#fff;}
#header                                                     {position:relative; display:grid; grid-template-columns:100px 1fr; grid-template-rows:1fr; grid-gap:0 40px; align-items:center; justify-content:center; width:100vw; max-width:1920px; height:auto; min-height:80px; margin:0 auto; padding:0 0 0 10px; background:#fff;}
#logo                                                       {grid-column:1 / 2; grid-row:1 / 2; align-self:center;}
#logo img                                                   {width:100%; height:auto; object-fit:contain;}




/* ---------- NAVIGATION ---------- */
#nav_unten,#nav_oben                                        {display:none; text-align:center;}

/*ul.dropdown a                                             {font-size:18px !important; text-transform: uppercase;}*/
#nav_unten                                                  {margin-bottom:-2px;}

ul.dropdown a                                               {margin:5px; /*margin-left:30px;*/}
li.activemenu, li.normalmenu                                {white-space:nowrap; overflow:hidden;}
li.activemenu                                               {background-color:#fff001;}
div.menupadding                                             {margin:0; padding:0; padding-left:5px;}
ul.menusubpagelist                                          {list-style-type:none; list-style-image:none; margin:0px; padding-left:20px; white-space:nowrap; overflow:hidden; background-color:#ffffff;}
ul.submenu, ul.mainmenu                                     {list-style-type:none; list-style-image:none; margin:00px; padding:0;}
li.activesubmenulayer3                                      {}
li.normalsubmenulayer3                                      {}
li.mainitem, h2.mainmenu, li.trenner                        {display:inline;}

a.activemenu                                                {color:#999; font-weight:500;}
a.normalmenu                                                {color:#222;}
a.activemenu:hover, a.normalmenu:hover                      {color:#999;}
a.activemainmenu                                            {color:#999; font-weight:500; vertical-align:middle;}
a.normalmainmenu                                            {color:#222; font-weight:500; vertical-align:middle;}
a.activemainmenu:hover, a.normalmainmenu:hover              {color:#999;}

#nav_s2idWrap                                               {background-color:#eee; min-height:60px; align-content:center;}

/* ---------- SLIDER ---------- */
#slidercontainer                                            {position:relative; width:100%; height:auto; margin-bottom:60px;}
#slidercontainer img                                        {width:100% !important; height:auto;}

.nivo-caption.fwxgalleryslider-caption                      {position:relative; height:100%; align-content:center; text-align: center; background:none;}
.nivo-caption.fwxgalleryslider-caption h3                   {font-size:24px;}


/* ---------- CONTENT ---------- */
#content_outer                                              {position:relative; width:100%;  margin:0 auto; margin-top:85px; padding:0 0 300px; background-color:#fff;}
#content_inner                                              {position:relative; width:100%; max-width:1200px; height:auto; margin:0 auto; padding:0 10px; padding-top:40px;}  

#content img:not(.galeriethumb)                             {max-width:100%; height:auto; border-radius: 10px;}
#content a, #content_1 a,
#content_2 a                                                {color:#8b0000; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:3px;}
iframe                                                      {width:100%;}
#content ul,#content p                                      {break-inside:avoid;}



/* ---------- Lounge Gallery - Thumbnails Grid ---------- */

.thumbnail_layer                                            {display:grid; grid-template-columns:repeat(1,1fr); grid-gap:10px;}
.thumbnail_layer img.galeriethumb                           {margin:0; width:100%; height:auto;}

.galeriethumb {
    border-radius: 10px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-right: 10px; /* Abstand rechts */
    margin-bottom: 10px; /* Abstand unten */
}


/* ----------- FORMULAR ----------- */
#content .form_layer .form_field_layer                      {width:100%; margin-bottom:12px; break-inside:avoid;}
#content .form_layer input.field                            {width:100%; border:none; background:#eee; padding:5px;}
#content .form_layer textarea.field_textarea                {width:100%; height:150px; margin-bottom:10px;}
#content .form_layer .form_submit input.submit              {width:100%; margin-top:10px; padding:8px 12px; font-weight:600; color:#fff; text-transform:uppercase; border-width:0; border-radius:20px; background-color:var(--ciFarbe2);}
#content .form_string_label,
#content .form_textarea_label                               {padding:0 0 5px 5px;}
.dsgvo_linktext                                             {font-size:12px; line-height:18px;}
div.dsgvo_layer                                             {width:100%; max-width:100%; margin:-20px 0 10px; text-align:left; border:none; background:rgba(255,255,255,0);}
input.dsgvo_checkbox                                        {width:24px; height:24px; }
#content .form_layer select                                 {padding:5px; margin:5px 0; border-radius:5px; border:1px solid var(--ciFarbe2);}
p.error                                                     {opacity:0.5; animation:fadeInOut 4s ease-in-out forwards; padding:20px; font-size:14px; background-color:#ffff33; border-radius: 10px;}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  10%  { opacity: 1; }                /* Einblenden */
  90%  { opacity: 1; }                /* Sichtbar bleiben */
  100% { opacity: 0; display:none; }  /* Ausblenden */
}

.myinput, input.text, textarea.text, select                 {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;}
.login_input                                                {border-style:solid; border-width:1px; border-color:silver; margin-top:1px; margin-bottom:1px;}
input.loginsubmit                                           {margin-top:10px; margin-bottom:10px;}
.login_checkbox                                             {vertical-align:middle;}
.login_submit_area                                          {padding-top:5px;}
select                                                      {background-color:#ffffff;}

/* ----------- FOOTER ----------- */
#footerWrap                                                 {width:100vw; margin:0 auto; padding:0; background-color:#eee;}
#footer                                                     {position:relative; display:grid; grid-template-columns:1fr; grid-gap:40px; justify-content:center; width:100vw; max-width:1920px; margin:0 auto; padding:100px 10px; background:#eee;} 
#footer *                                                   {font-size:14px;}
#footer2Wrap                                                {width:100vw; margin:0 auto; padding:0; background-color:#666;}
#footer2                                                    {width:100vw; max-width:1920px; margin:0 auto 0px; padding:50px 10%; text-align:center; color:#fff; font-weight:100; background-color:#666;}
#footer2 a                                                  {font-size:14px; color:#fff; font-weight:100;}

.captcha                                                    {border:solid silver 1px; width:120px;}
img.captcha                                                 {margin-top:8px; margin-bottom:1px;}
input.captcha                                               {margin-bottom:2px;}

.edbloc a img                                               {width:15px !important; height:15px !important}
#editblock                                                  {position:relative; z-index:2; width:100%; max-width:1920px; margin:0 auto 20px !important; text-align:center; border-color:silver;}
.thumbnail_layer #lg_admin_buttons a img                    {width:15px; height:15px;}


/* DSVG Hinweis - customized */
#content p.dsgvo_paragraph                                  {font-size:12px; line-height:18px;}
#content a.dsgvo_link                                       {font-size:12px; line-height:18px; color:var(--ciFarbe1); text-decoration-thickness:1px; text-underline-offset:1px;}


/* Privacy Layer - customized */
.cl_cookie_privacy_layer                                    {width:100vw !important; height:100vh !important; display:grid; align-content:center; background-color:#666666cc !important; }
.cl_cookie_privacy_layer > div                              {padding:20px !important; box-shadow:0 0 0 5px #fff,20px 20px 50px 0 rgba(0, 0, 0, 0.5);}
.cl_cookie_privacy_layer *                                  {max-width:750px !important; background-color:#353c45 !important; border-radius:20px; color:#fff !important; }

.cl_cookie_privacy_layer a                                  {margin:20px 0 0; padding:10px 15px !important; color:#fff; background-color:#999 !important; border-radius:10px;}
.cl_cookie_privacy_layer a:last-child                       {margin-left:0px;}
#cl_privacy_link_y                                          {color:#fff; background-color:#468b0c !important;}
#cl_privacy_link_n                                          {color:#fff; background-color:#8b0c36 !important; margin-right:40px !important;}


.thumbnail_layer                                           {break-inside:avoid;}

/* #################### LIGHTBOX UPDATE IO 251112 ######################  */
.fwxlightbox-border                                         {border-radius:10px !important;}
#lightbox #imageContainer                                   {width:100% !important; margin:0px !important; padding:0px !important; border-radius:10px 10px 0px 0px !important;}
#lightbox #imageContainer img                               {width:100%!important; height:auto;}
.fwxlightbox-title                                          {font-weight:normal !important; }
.fwxlightbox-close                                          {background: url("/images/page/close.png") 30px 10px no-repeat !important;}
.fwxlightbox-arrow.right                                    {background: url("/images/fwxlightbox/arrow-right-white.png") right center no-repeat !important;}
.fwxlightbox-arrow.left                                     {background: url("/images/fwxlightbox/arrow-left-white.png") left center no-repeat!important;}
#imageData                                                  {border-radius:10px !important;}
#imageData #imageDetails                                    {margin-left:20px !important; margin-top:10px;}
#imageDetails a                                             {padding:10px !important; border-radius:10px !important;}
#imageData #imageDetails p                                  {margin:10px 0;}
#imageData #bottomNavClose                                  {height:40px;} 
/* #################### LIGHTBOX UPDATE IO 251112 ######################  */





/* ---------- MEDIA QUERIES ---------- */

@media(hover:hover) and (pointer:fine) {
 #content a:hover, #content_1 a:hover, 
 #content_2 a:hover                                         {color:var(--ciFarbe2); text-decoration-style: dotted; text-decoration-thickness:1px;}
 .head_icon:hover                                           {filter:brightness(0);}
 #content .form_layer .form_submit input.submit:hover       {color:#fff; background-color:var(--ciFarbe3);}
 #nav_s2id ul#submenu3 li a:hover                           {color:#999;}
 #myIcons .myIcons:hover                                    {box-shadow:none;}
}  


@media screen and (min-width:500px){
 #footer                                                    {grid-template-columns:1fr 1fr;}
 .thumbnail_layer                                           {grid-template-columns:repeat(3,1fr); break-inside:avoid;}
}
/* mobile first!
@media screen and (max-width:720px){
  #myIcons .myIcons                                           {width:calc((100% - 20px) / 2) !important;}
 .thumbnail_layer                                            {grid-template-columns:repeat(3,1fr); break-inside:avoid;}
}
*/

@media screen and (min-width:720px){
 #header                                                    {padding-left:8%; padding-right:8%;}
 #content, #footer                                          {padding-left:10%; padding-right:10%;}
 h1.maintitle,h2.maintitle,h2.seitenuntertitel              {padding-left:10%; padding-right:10%;}
 #myIcons .myIcons:nth-child(2n)                            {margin-right:10px;}
 #myIcons .myIcons:nth-child(4n)                            {margin-right:0px;}

 #myIcons .myIcons                                           {width:calc((100% - 20px) / 4) !important;}
 .thumbnail_layer                                            {grid-template-columns:repeat(3,1fr); break-inside:avoid;}
}

@media screen and (min-width:790px){
  #nav_oben                                                  {display:block; text-align:left;}
  #nav_oben                                                  {text-align:center;}
}

@media screen and (min-width:1000px){
 #footer                                                    {grid-template-columns:1fr 1fr 1fr;}
 .thumbnail_layer                                           {grid-template-columns:repeat(4,1fr); break-inside:avoid;}
}

@media screen and (min-width:1260px){
 #headWrap,#header                                          {height:150px;}
 #header                                                    {grid-template-rows:1fr 1fr; padding:20px calc(8% + 140px) 20px 8%;}
 #logo                                                      {grid-row:1 / 4;}
 #nav_unten                                                 {display:block;}
 .thumbnail_layer                                           {grid-template-columns:repeat(6,1fr);}
 #content_outer                                             {margin-top:150px;}
}


/* #################### IO container in content max 4 breite angepasst Container */
#myIcons                                                    {width:100%; /*overflow:hidden;*/}

/* Einzelne Icon-Boxen */
#myIcons .myIcons                                           {float:left; width:calc((100% - 10px) / 2); /* 4 Icons pro Zeile */ margin-right:10px; margin-bottom:10px; text-align:center; box-shadow:2px 2px 10px rgba(0,0,0,0.1); border-radius:10px; overflow:hidden;}

/* Jeder 4. (4n) ohne rechten Abstand */
#myIcons .myIcons:nth-child(2n)                             {margin-right:0px;} 
#myIcons a                                                  {display:inline-block;}
#myIcons img                                                {max-width:100%; height:auto; display:block;}

#myIcons::after                                             {content:""; display:block; clear:both;}  /* garantiert kein FLOAT nach dem umfassenden DIV */
/* #################### IO container in content max 4 breite angepasst Container */
 div.dsgvo_layer_inner                                      {width:100% !important; position:relative;}