html                                                       {scroll-behavior:smooth; overscroll-behavior:none;}
body                                                       {width:100%; min-height:100%; overflow-x:hidden; background:#fff;}
*,*::after,*::before                                       {margin:0; padding:0; font-family:serif;/* color:white; font-size:40px; line-height:40px; font-weight:650;*/ -webkit-box-sizing:border-box; -moz-box-sizing:border-box;	box-sizing:border-box;}
span                                                       {font-size:inherit; line-height:inherit; font-weight:inherit; color:inherit; font-style:inherit;}
span.nowrap                                                {white-space:nowrap;}
a, img                                                     {border-style:none; text-decoration:underline; border:0;}
a                                                          { text-underline-offset:3px; text-decoration-thickness:1px; cursor: pointer;}
h1, .titel                                                 {font-family:serif; width:100%; margin:0; font-size:1rem; line-height:1.4rem; font-weight:550; color:var(--ciFarbe1);}
h2, .untertitel                                            {font-family:serif; margin:10px 0 30px; padding:0; font-size:1.5rem; line-height:1.75rem; font-weight:550; color:var(--ciFarbe1); text-decoration:underline; text-decoration-color:#bbb; text-underline-offset:6px; text-decoration-thickness:10px;}
h3, .untertitel                                            {font-family:serif; margin:0 0 .5rem; font-size:1.25rem; line-height:1.65rem; font-weight:550; color:var(--ciFarbe1);}
h4                                                         {font-size:1.25rem; line-height:1.75rem; font-weight:500; margin:1rem 0;}
.kleiner                                                   {font-size:.8rem; line-height:1.5rem;}
.clr                                                       {clear:both; width:0; height:0; position:relative; display:block; line-height:0;}
hr                                                         {height:1px; margin:1rem 0; background:var(--ciFarbe1); border:none;}
form, ol, ul, li                                           {margin:0; padding:0;}
ul, ol                                                     {margin:.5rem 0 .5rem 20px; text-align:left; list-style-position:outside;}
li                                                         {padding-bottom:.5em;}
li:last-child                                              {border-bottom:none;}

b,strong                                                   {font-family:inherit; font-weight:550; font-variation-settings:'wght' 550; font-size:inherit; color:inherit; line-height:inherit;}
i,em                                                       {font-style:italic;}





/* -------------------------------------------- */
/* ----------- BASIS LAYOUT - start ----------- */
/* -------------------------------------------- */

#testcontent                                                        {position:relative;  width:var(--testW); margin:0px auto; }

/* ----------- Tourapic CONTAINER + VARiablen - start ----------- */

.tourapic {

  --rootFontSize: 16px;
  --rootLineHeight: 24px;

  --ciFarbe1:    #fff;
  --ciFarbe2:    #00d0ff;
  --ciFarbe3:    #222;
  --ciFarbe4:    #272b30;
  --ciFarbe5:    #31363c;
  --maxBreite:   100dvw;                                                                /* max Seitenbreite */
 
  --testW:       100dvw;
  --testH:       100dvh;
 
  @supports not (height: 100dvh) {
    --testH: 100vh;  /* for very old browsers */
  }
  
  /* if you want to be extra-safe on iOS with toolbars shown/hidden */
  @supports (height: 100svh) {
     --testH: 100svh;  /* smallest viewport height (no jump) */
  }

  --fontText:    'Open Sans Variable', sans-serif;                                       /* Schriftart   Content */
  --fontSpecial: 'Open Sans Variable', sans-serif;                                       /* Extra-Schriftart (zb f Headlines, falls benoetigt) */
  
  --headBg:                  var(--ciFarbe5);                                            /* Hintergrundfarbe f Header */      
  --headTxtFarbe:            var(--ciFarbe1);                                            /* TxtFarbe f Header */      
  --headLinkFarbe:           var(--ciFarbe1);                                            /* LinkFarbe f Header */      
  --headHoverLinkFarbe:      var(--ciFarbe2);                                            /* LinkFarbe Hover f Header */      
  --headShadow:              0 0px 15px 10px var(--ciFarbe3);                            /* Schatten oberhalb d Header */   
 
  --footBg:                  var(--ciFarbe5);                                            /* THintergrundfarbe f Footer */      
  --footTxtFarbe:            var(--ciFarbe1);                                            /* TxtFarbe f Footer */      
  --footLinkFarbe:           #aaaaaa;                                                  /* LinkFarbe  f Footer */      
  --footHoverLinkFarbe:      var(--ciFarbe2);                                            /* LinkFarbe Hover f Footer */      
  --footShadow:              0 0px 15px 10px var(--ciFarbe3);                            /* Schatten oberhalb d Footer */    
 
  --viewerBg:                var(--ciFarbe3);                                            /* Hintergrundfarbe Viewer */
 
  --startscreenLink:         #aaaaaa;                                                  /* TextLinkfarbe  Start Overlays */
  --startscreenLinkHover:    var(--ciFarbe2);                                            /* TextLinkfarbe Hover Start Overlays */
  --impressumTxt:            #fff;                                                     /* Textfarbe  Start Overlays */
  --impressumBg:             #222222dd;                                                /* BG  Start Overlays  hinterer layer */
  --impressumBg2:            #222222dd;                                                /* BG  Start Overlays  voderer layer */
  --impressumBreite:         50%;                                                        /* BREITE d Impressum  content Start Overlays */
  --datenschutzBreite:       50%;                                                        /* BREITE d Datenschutz  content Start Overlays */
  --cookiesBreite:           50%;                                                        /* BREITE d Cookies  content Start Overlays */
  --closeStartOl:             url(../images/ic_close.svg) center no-repeat,var(--ciFarbe4);    /* Icon/BG Close Start Overlays */;
  --closeStartOlHover:        url(../images/ic_close.svg) center no-repeat,var(--ciFarbe4);    /* Icon/BG Close Hover  Start Overlay */


  --xiBg:                    var(--ciFarbe3);                                             /* Hintergrundfarbe f XI-Container,allgemein  HEAD */ 
  --xiMainWrapBg:            var(--ciFarbe3);                                             /* Hintergrundfarbe allgemein */
  --xiContentBg:             var(--ciFarbe3);                                             /* Hintergrundfarbe CONTENT Bereich */
  --xiContentTxtFarbe:       var(--ciFarbe1);                                             /* TxtFarbe CONTENT Bereich */
  --xiContentLinkFarbe:      var(--ciFarbe2);                                             /* LinkFarbe CONTENT Bereich */
  --xiContentHoverLinkFarbe: var(--ciFarbe1);                                             /* LinkFarbe Hover CONTENT Bereich */

  --xiMenuBg:                var(--ciFarbe4);                                             /* Hintergrundfarbe MENU */
  --xiMenuTxtFarbe:          var(--ciFarbe1);                                             /* TxtFarbe MENU */
  --xiMenuLinkFarbe:         var(--ciFarbe1);                                             /* LinkFarbe Menu Bereich */
  --xiMenuHoverLinkFarbe:    var(--ciFarbe2);                                             /* LinkFarbe Hover Menu Bereich */
  --xiMenuShadow:            0 0 0 1px #000, 0 15px 15px 5px var(--ciFarbe3);                      /* Schatten UI-Liste */ 

  --xiMenuXtraFarbe:         #666666;                                                   /* 2 Farbe MENU f Trennstriche */
  --xiMenuXtraFarbe2:        #66666600;                                                 /* 3 Farbe MENU f balken neben kleinen Bildern (Uunterkapitel) */

  
  --xiMenuActivMenuTxt:      var(--ciFarbe2);                                             /* TextFarbe AKTIVES MENU */
  --xiMenuActivMenuBg:       #0000003d;                                                 /* HintergrundFarbe AKTIVES MENU  */
  
  --xiMenuFirstWidth:        0 0 100%;                                                    /* Breite des ersten Menupunktes(Raum): vollbreite:100% / 2spaltig:0 0 47% */
 
  --xiHelpBg:                var(--ciFarbe4);                                             /* Hintergrundfarbe HILFE Bereich */
  --xiHelpTxtFarbe:          var(--ciFarbe1);                                             /* TxtFarbe HILFE Bereich */ 
  --xiHelpLinkFarbe:         var(--ciFarbe2);                                             /* TxtFarbe Hover HILFE Bereich */ 
  --xiHelpHoverLinkFarbe:    var(--ciFarbe1);                                             /* TxtFarbe Hover HILFE Bereich */ 
  --xiHelpIcon:              url(../images/ic_help.svg) center no-repeat;                 /* Icon HILFE Bereich */
  --xiHelpIconHover:         url(../images/ic_help.svg) center no-repeat;                 /* Icon Hover HILFE Bereich */
 
  --xiLangBg:                var(--ciFarbe4);                                             /* Hintergrundfarbe  SPRACHauswahl Bereich */
  --xiLangTxtFarbe:          var(--ciFarbe1);                                             /* TxtFarbe SPRACHauswahl Bereich */
  --xiLangLinkFarbe:         var(--ciFarbe2);                                             /* LinkFarbe SPRACHauswahl Bereich */ 
  --xiLangHoverLinkFarbe:    var(--ciFarbe1);                                             /* LinkFarbe Hover SPRACHauswahl Bereich */ 
 
 
  --xiBackIcon:              url(../images/ic_back.svg) 95% center no-repeat,var(--ciFarbe4);   /* Icon/BG BACKbutton NAVI */
  --xiBackIconHover:         url(../images/ic_back.svg) 95% center no-repeat,var(--ciFarbe4);   /* Icon/BG Hover BACKbutton NAVI */
  --xiBackIconInactive: 95% center no-repeat,var(--ciFarbe4);                             /* Icon/BG BACKbutton NAVI */
  --xiBackShadow:            0 0 0 10px var(--ciFarbe5);                                        /* Schatten BACKbutton  NAVI */
  --xiBackShadowHover:       0 0 0 10px var(--ciFarbe5);                                  /* Schatten BACKbutton Hover NAVI */
  --xiBackBorder:            #000;                                                      /* Border BACKbutton  NAVI */
  --xiBackBorderHover:       var(--ciFarbe2);                                             /* Border Hover BACKbutton  NAVI */
  --xiBackRadius:            0 15px 15px 0;                                               /* BorderRadius BACKbutton  NAVI */
 
  --xiNextIcon:              url(../images/ic_next.svg)  5% center no-repeat,var(--ciFarbe4);   /* Icon/BG NEXTbutton NAVI */
  --xiNextIconHover:         url(../images/ic_next.svg)  5% center no-repeat,var(--ciFarbe4);   /* Icon/BG NEXTbutton NAVI */
  --xiNextIconInactive: 5% center no-repeat,var(--ciFarbe4);                              /* Icon/BG NEXTbutton NAVI */
  --xiNextShadow:            0 0 0 10px var(--ciFarbe5);                                        /* Schatten NEXTbutton NAVI */
  --xiNextShadowHover:       0 0 0 10px var(--ciFarbe5);                                        /* Schatten NEXTbutton Hover NAVIh */
  --xiNextBorder:            #000;                                                      /* Border NEXTbutton  NAVI */
  --xiNextBorderHover:       var(--ciFarbe2);                                             /* Border Hover NEXTbutton  NAVI */
  --xiNextRadius:            15px 0 0 15px;                                               /* BorderRadius NEXTbutton  NAVI */
 
  --xiUpIcon:                url(../images/ic_up.svg);                                    /* Icon/BG UPbutton NAVI */
  --xiUpIconHover:           url(../images/ic_up.svg);                                    /* Icon/BG Hover UPbutton NAVI */
  --xiDownIcon:              url(../images/ic_up.svg);                                    /* Icon/BG DOWNbutton NAVI */
  --xiDownIconHover:         url(../images/ic_up.svg);                                    /* Icon/BG DOWNbutton NAVI */
 
  --xiLangIcon:              url(../images/ic_sprache.svg) center no-repeat;              /* Icon/BG SPRACHauswahl Bereich */
  --xiLangIconHover:         url(../images/ic_sprache.svg) center no-repeat;              /* Icon/BG Hover SPRACHauswahl Bereich */
 
  --xiCloseIcon:             url(../images/ic_close.svg) center no-repeat,var(--ciFarbe4);    /* Icon/BG Close */
  --xiCloseIconHover:        url(../images/ic_close.svg) center no-repeat,var(--ciFarbe4);    /* Icon/BG Close Hover */
 
  --xiOverviewIcon:          url(../images/ic_overview.svg) center no-repeat;             /* Icon/BG UeBERSICHTS Bereich */
  --xiOverviewIconHover:     url(../images/ic_overview.svg) center no-repeat;             /* Icon/BG UeBERSICHTS Bereich */
 
 
  --xiMenuIcon:               url(../images/ic_hamburger.svg),var(--ciFarbe4);            /* Icon/BG Hamburger */
  --xiMenuIconHover:          url(../images/ic_hamburger.svg),var(--ciFarbe4);            /* Icon/BG Hamburger */
 
  --xiShareIcon:              url(../images/ic_share.svg),var(--ciFarbe4);                /* Icon/BG Share */
  --xiShareIconHover:         url(../images/ic_share.svg),var(--ciFarbe4);                /* Icon/BG Share Hover */
  --xiShareShadow:            0 0 0 1px #000, 0 0 0 7px var(--ciFarbe5);                /* Share Shadow */
  --xiShareShadowHover:       0 0 0 1px var(--ciFarbe2) , 0 0 0 7px var(--ciFarbe5);      /* Share Shadow Hover */
 
 
  --xiSomIcon1:               url(../images/ic_fb.svg),#00f;                            /* Icon Social Media 1 - facebook */
  --xiSomIcon2:               url(../images/ic_instagram.svg),#f00;                     /* Icon Social Media 2 - instagram */
  --xiSomIcon3:               url(../images/ic_tictoc.svg),#9132d9;                     /* Icon Social Media 3 - tictoc */
  --xiSomIcon4:               url(../images/ic_x.svg),#9132d9;                          /* Icon Social Media 4 - x */
  --showSom1:                 grid;                                                       /* Icon Social Media 1 anzeigen grid/none */
  --showSom2:                 grid;                                                       /* Icon Social Media 2 anzeigen grid/none */
  --showSom3:                 grid;                                                       /* Icon Social Media 3 anzeigen grid/none */
  --showSom4:                 none;                                                       /* Icon Social Media 4 anzeigen grid/none */
 
  --xiHcIconOpacity:          .5;                                                         /* Opacity HOTCORNERS */
  --xiHcIconOpacityHover:     1;                                                          /* Opacity Hover HOTCORNERS */
 
  --xiHcIcon1Vis:             grid;                                                       /* HOTCORNER links oben sichtbar: grid; versteckt:none; */
  --xiHcIcon2Vis:             grid;                                                       /* HOTCORNER links oben sichtbar: grid; versteckt:none; */
  --xiHcIcon3Vis:             grid;                                                       /* HOTCORNER links oben sichtbar: grid; versteckt:none; */
  --xiHcIcon4Vis:             grid;                                                       /* HOTCORNER links oben sichtbar: grid; versteckt:none; */


  --xiHcIcon1:                url(../images/ic_sprache.svg),#00000080;                /* Icon/BGFarbe HOTCORNER links oben */
  --xiHcIcon2:                url(../images/ic_overview.svg),#00000080;                 /* Icon/BGFarbe HOTCORNER rechts oben */
  --xiHcIcon3:                url(../images/ic_help.svg),#00000080;                     /* Icon/BGFarbe HOTCORNER links unten */
  --xiHcIcon4:                url(../images/tap_logo.png) center no-repeat,#00000080;   /* Icon/BGFarbe HOTCORNER rechts unten */
  
  --xiHcIcon1Hover:           var(--xiHcIcon1);                                           /* Icon/BGFarbe Hover HOTCORNER links oben */
  --xiHcIcon2Hover:           var(--xiHcIcon2);                                           /* Icon/BGFarbe Hover HOTCORNER rechts oben */
  --xiHcIcon3Hover:           var(--xiHcIcon3);                                           /* Icon/BGFarbe Hover HOTCORNER links unten */
  --xiHcIcon4Hover:           var(--xiHcIcon4);                                           /* Icon/BGFarbe Hover HOTCORNER rechts unten */
 
 
  --xiButtBorder:             1px solid #000;                                           /* RahmenEigenschaften UI BUTTONS */ 
  --xiButtHoverBorder:        var(--ciFarbe2);                                            /* RahmenEigenschaften Hover UI BUTTONS */ 
  --xiButtShadow:             0 0 0 10px var(--ciFarbe5);                                 /* Schatten UI BUTTONS */ 
  --xiButtShadowHover:        0 0 0 10px var(--ciFarbe5);                                 /* Schatten Hover UI BUTTONS */
  --xiButtText:               var(--ciFarbe1);                                            /* Textfarbe UI BUTTONS */ 
  --xiButtHoverText:          var(--ciFarbe1);                                            /* Textfarbe Hover UI BUTTONS */ 
  --xiButtRadius:             50%;
  
 
  --xiSomwrapBg:              var(--ciFarbe5);                                            /* Hintergrund SoMed Container */ 
  --xiSomwrapRadius:          25px 25px 0 0;                                              /* BorderRadius SoMed Container */ 
  --xiSomwrapBorder:          var(--ciFarbe4);                                            /* Rahmen SoMed Container */ 
  --xiSomwrapShadow:          none;                                                       /* Schatten SoMed Container ;0 -5px 0 5px var(--ciFarbe4) */ 
  --xiSomwrapPad:             12px 15px 20px 15px;                                        /* Padding SoMed Container */ 
 
  /* ----------- CUSTOM Design STARTSEITE - start ----------- */
  
   --customStartBildHf:           linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 7, 8) 7%, rgba(0,212,255,0) 100%), url(../images/custombild_hf.jpg) no-repeat center / cover;          /* Hintergrundbild STARTSEITE  Hochformat */     
   --customStartBildQf:           linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 7, 8) 7%, rgba(0,212,255,0) 100%), url(../images/custombild_qf.jpg) no-repeat center / cover;          /* Hintergrundbild STARTSEITE  Querformat */     
 
   --customStartOverviewIcon:      url(../images/ic_overview.svg);                        /* Icon SPRACHauswahl STARTSEITE */
   --customStartLangIcon:          url(../images/ic_sprache.svg);                         /* Icon SPRACHauswahl STARTSEITE */
 
   --customStartLangBg:            var(--ciFarbe1);                                       /* Hintergrund SPRACHmenu STARTSEITE */
   --customStartLangText:          var(--ciFarbe3);                                       /* Textfarbe SPRACHmenu STARTSEITE */
   --customStartLangLink:          var(--ciFarbe3);                                       /* Linkfarbe SPRACHmenu STARTSEITE */
   --customStartLangHoverLink:     #820202;                                             /* Linkfarbe Hover SPRACHmenu STARTSEITE */
 
   --customStartLogoHf:            none;                                                  /* Logo f startseite Hochformat oben zB url(../images/bespoke_startlogo.png) STARTSEITE */     
   --customStartLogoQf:            none;                                                  /* Logo f startseite Querformat oben zB url(../images/bespoke_startlogo.png) STARTSEITE */     
   --customStartTxtFarbe:          var(--ciFarbe1);                                       /* TextFarbe STARTSEITE */
   --customStartButtTxtFarbe:      var(--ciFarbe1);                                       /* TextFarbe STARTBUTTON */
   --customStartButtTxtHoverFarbe: var(--ciFarbe3);                                       /* TextFarbe Hover STARTBUTTON */
   --customStartButtBorder:        3px solid rgba(255,255,255,0);                     /* RahmenFarbe STARTBUTTON */
   --customStartButtBorderHover:   3px solid var(--ciFarbe1);                             /* RahmenFarbe Hover STARTBUTTON */
   --customStartButtBg:            #ffffff00;                                           /* Hintergrund STARTBUTTON */
   --customStartButtBgHover:       var(--ciFarbe1);                                       /* Hintergrund Hover STARTBUTTON */
   --customStartButtRadius:        30px;                                                  /* Border Radius Hover STARTBUTTON */
 
  /* ----------- CUSTOM Design STARTSEITE - ende ----------- */
 
 
 
 /* ----------- UI - start ---------- */
 --fontUI:                         'Open Sans Variable', sans-serif;                      /* Schriftart   UserInterface */
 --shdwUImain:                      0 0 10px 1px #000;                                  /* Schatten f Hintergrund des Content(UI) Bereichs /* 
 /* ----------- UI - ende  ---------- */
 
  
  
  container-name:tourapic; container-type:inline-size; 
  position:relative; width:100%; max-width:var(--maxBreite); height:var(--testH); margin:0 auto; 
  font-size:var(--rootFontSize) !important; line-height:var(--rootLineHeight) !important;
   background-position:center bottom; background-image:url(../images/tap_logo.png); background-color:#fff; background-size:60px; background-repeat:no-repeat;}

/* ----------- Tourapic CONTAINER + VARiablen - ende ----------- */



/* -------------------------------------------- */
/*                                              */
/*             min-inline-size:0px              */
/*                   start                      */
/* -------------------------------------------- */
@container tourapic (min-inline-size:0px) {

 @font-face {
  font-family:'Open Sans Variable';
  src:url('fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-stretch:20% 400%;
  font-display:swap;
 }
 
 .fontwrap                {position: relative; height:100%; width:100%;}
 .tourapic .fontwrap *    {font-size: 1em;line-height:1.5em; font-weight:350;}
 .tourapic *              {font-size:var(--rootFontSize); line-height:var(--rootLineHeight); font-weight:350;}

 @keyframes blinkUp {
    0% {filter:brightness(0);}  
  100% {filter:brightness(1);}  
 }

 @keyframes blinkStart {
  0% {border-color:rgba(255, 255, 255, 1);}  
  100% {border-color:rgba(255, 255, 255, 0);}  
 }

 /* ---------- Scrollbar ---------- */
  /* Firefox */
  *                                                          {scrollbar-width:thin; scrollbar-color:#ccc #222;}

  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar                                       {width:8px; width:8px;}
  *::-webkit-scrollbar-track                                 {border-radius:4px; background-color:#222;}
  *::-webkit-scrollbar-track:hover                           {background-color:#222;}
  *::-webkit-scrollbar-track:active                          {background-color:#222;}
  *::-webkit-scrollbar-thumb                                 {border-radius:4px; background-color:#ccc;}
  *::-webkit-scrollbar-thumb:hover                           {background-color:#ccc;}
  *::-webkit-scrollbar-thumb:active                          {background-color:#ccc;}


  .tourapic *, .tourapic *::after, .tourapic *::before       {margin:0; padding:0; font-family:var(--fontText); color:#fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;	box-sizing:border-box;}
  .tourapic, .tourapic *::after, .tourapic *::before         {font-weight:350;}
  
 .tourapic .fontwrap * h1                                            {font-size:1.25em; line-height:1.5em;  text-decoration:none; margin-bottom:1.25em;}
 .tourapic .fontwrap * h2                                            {font-size:1.15em; line-height:1.5em;  text-decoration:none; margin-bottom:1.15em;}
 .tourapic .fontwrap * h3                                            {font-size:1em; line-height:1.5em; text-decoration:none; margin-bottom:1em;}
 .tourapic.fontwrap * b, .tourapic .fontwrap * strong,
 .tourapic * b, .tourapic * strong                                   {font-weight:550; font-weight:inherit; color:inherit; font-size:inherit; line-height:inherit;}
 .tourapic .fontwrap .main button                                    {border-radius:25px; padding:5px 20px; margin:10px 0; border:2px solid #fff; outline:none;}


/* ------------ MOBILE HOVER - start ------------ */

 @media(hover:hover) and (pointer:fine) {
  .tourapic a:hover                                                  {color:var(--ciFarbe2);}
  .tourapic .fontwrap #startscreen #startscreenUnten .bla a:hover    {color:var(--startscreenLinkHover);}
  .tourapic #startscreen #startscreenUnten #sscrUs:hover,
  .tourapic #startscreen #startscreenUnten #sscrSp:hover             {transform:scale(1.15);}
  .tourapic .header .headline a:hover h1, 
  .tourapic .header .headline a:hover                                 {color:var(--headHoverLinkFarbe);}

  .tourapic .footer a:hover,
  .tourapic .footer * a:hover                                         {color:var(--footHoverLinkFarbe);} 
         
  .tourapic #sprachMenu a img:hover                                   {box-shadow:0 0 0 2px var(--ciFarbe1),0 0 0 4px var(--ciFarbe3); opacity:.75; transition:.25s ease-out;}
  .tourapic .language.main .sprachMenu a img:hover                    {box-shadow:0 0 0 2px var(--ciFarbe4),0 0 0 3px var(--ciFarbe1); opacity:.75; transition:.25s ease-out;}
  .tourapic .content.main a:hover,
  .tourapic .content.main * a:hover                                   {color:var(--xiContentHoverLinkFarbe);} 

  .tourapic .menu.main a:hover,
  .tourapic .menu.main * a:hover h3                                   {color:var(--xiMenuHoverLinkFarbe);} 

  .tourapic .help.main a:hover,
  .tourapic .help.main * a:hover                                      {color:var(--xiHelpHoverLinkFarbe);} 

  .tourapic .language.main a:hover,
  .tourapic .language.main * a:hover                                  {color:var(--xiLangHoverLinkFarbe);} 


  .tourapic #sprachMenu a:hover,
  .tourapic #sprachMenu * a:hover                                     {color:var(--customStartLangHoverLink);}

  .tourapic .ui div:not(.back,.next,.up,.down):hover > a.uiButt       {border-color:var(--xiButtHoverBorder); color:var(--xiButtHoverText); box-shadow:var(--xiButtShadowHover); transition:.5s ease;}
  .tourapic .ui .backnext div:hover                                   {border-color:var(--xiButtHoverBorder); transition:.5s ease;}

  .tourapic .up:hover                                                 {background:var(--xiUpIconHover);}
  .tourapic .down:hover                                               {background:var(--xiDownIconHover);}

  .tourapic .listButton:hover a.uiButt                                {color:var(--xiButtHoverText); background:var(--xiMenuIconHover);}
  /*
  .tourapic .ui .backnext div.back:hover                              {background:var(--xiBackIconHover); border-color:var(--xiBackBorderHover); box-shadow:var(--xiBackShadowHover); border-width:1px 1px 1px 0;}
  .tourapic .ui .backnext div.next:hover                              {background:var(--xiNextIconHover); border-color:var(--xiNextBorderHover); box-shadow:var(--xiNextShadowHover); border-width:1px 0 1px 1px;} 
  */    
  .tourapic .ui .backnext div.back:hover                              {border-color: unset;}
  .tourapic .ui .backnext div.next:hover                              {border-color: unset;}



  .tourapic .ui div.helpButt:hover > a.uiButt                         {background:var(--xiHelpIconHover);}
  .tourapic .ui div.languageButt:hover > a.uiButt                     {background:var(--xiLangIconHover);}

  .tourapic .activeMenu .ui .listButton:hover a.uiButt                {background:var(--xiCloseIconHover);}
  .tourapic #closeUs:hover                                            {background:var(--xiCloseIconHover);}

  .tourapic #share a.share:hover                                      {background:var(--xiShareIconHover); box-shadow:var(--xiShareShadowHover);}
  .tourapic .somFb:hover                                              {background-color:#00f; transition:.25s ease;}
  .tourapic .somInsta:hover                                           {background-color:#f00; transition:.25s ease;}
  .tourapic .somTick:hover                                            {background-color:#9132d9; transition:.25s ease;}
  .tourapic .som:hover                                                {box-shadow:0 0 0 1px #000, -9px -7px 10px -7px #0000008c inset,10px 7px 10px -10px #ffffff94 inset, 0 0 0 5px #31363c; transform:scale(1.25); transition:.25s ease;}
 
  .tourapic .hotcorner:hover                                          {opacity:var(--xiHcIconOpacityHover); transition:opacity .5s ease;}
  .tourapic .hotcorner.hc_tl:hover                                    {background:var(--xiHcIcon1Hover);}
  

  .tourapic .startTourButt:hover,
  .tourapic .startTourButt:hover a                                    {color:var(--customStartButtTxtHoverFarbe); border:var(--customStartButtBorderHover); background:var(--customStartButtBgHover); transition:color .5s ease, background-color .5s ease, border .5s ease; }
  }
/* ------------ MOBILE HOVER - ende ------------ */

/* ----------- Startscreen, CUSTOM - start ---------- */

.tourapic #startscreen                                               {position:absolute; display:none; z-index:2; width:100%; height:100%; top:0; left:0; grid-template-rows:1fr 1fr; align-items:center;}
.tourapic.intro #startscreen                                         {display:grid;}
.tourapic #startscreen.ol                                            {display:grid;}
.tourapic #startscreen                                               {background:var(--customStartBildHf); background-size:cover; background-position:var(--customStartBildPos);}

.tourapic #startscreen #startscreenOben                              {background-image:var(--startscreenLogo); background-size:cover; background-position:center;}     
.tourapic #startscreen #startscreenOben img.startscreenLogo          {max-width:100cqw; width:auto; height:100%; max-height:calc(var(--testH)/2); object-fit:cover; margin:auto;}
.tourapic #startscreen #startscreenOben img.startscreenLogo.hoch     {display:block;}
.tourapic #startscreen #startscreenOben img.startscreenLogo.quer     {display:none;}


.tourapic #startscreen #startscreenUnten                             {position:relative; display:grid; width:100%; max-width:600px; height:100%; padding:0 10px; grid-template-columns:50px auto 50px; grid-template-rows:60px 1fr 30px; align-content:center; justify-self:center; align-items:center;}    
.tourapic #startscreen #startscreenUnten.nol                         {display:none;}   

.tourapic #startscreen #startscreenUnten #sscrUs a > img             {position:relative; width:100%; height:100%; display:block;}

.tourapic #startscreen #startscreenUnten #sscrUs                     {position:relative; display:block; width:100%; height:60px; justify-content:center; align-content:center;}
.tourapic #startscreen #startscreenUnten #sscrSp                     {position:relative; display:grid; width:100%; height:60px; justify-content:center; align-content:center;}

.tourapic #startscreen #startscreenUnten #sscrUs                     {background:var(--xiOverviewIcon); background-position:center; background-repeat:no-repeat;}
.tourapic #startscreen #startscreenUnten #sscrSp                     {background:var(--xiLangIcon); background-position:center; background-repeat:no-repeat;}

.tourapic #sscrSp > a:nth-child(1)                                    {position:absolute; z-index:1; width:100%; height:100%;}


.tourapic #sscrStart                                                 {display:grid; align-content:center; justify-self:center;}

.tourapic a.startTourButt                                            {position:relative; display:inline-grid; height:60px; margin:auto; padding:5px 15px; align-content:center; font-size:1em; color:var(--customStartButtTxtFarbe); font-weight:750; text-transform:uppercase; text-decoration:none; border-radius:var(--customStartButtRadius); border:var(--customStartButtBorder); justify-content:center; animation: blinkStart 2s infinite alternate-reverse; 
 transition:border .5s ease-out,color .5s ease-out,background-color .5s ease-out; background:var(--customStartButtBg);}

.tourapic #startscreen #startscreenUnten #sscrTapLogo                {text-align:center; grid-column-start:2; grid-column-end:3; grid-row-start:2; grid-row-end:3; align-self:center; font-size:0;}
.tourapic #startscreen #startscreenUnten #sscrTapLogo a              {position:relative; display:inline-block; width:auto;} 
.tourapic #startscreen #startscreenUnten #sscrTapLogo a img          {width:70px; height:auto;} 
.tourapic .fontwrap #startscreen #startscreenUnten .bla              {display:flex; justify-content:center; gap:10%; grid-column-start:1; grid-column-end:4; grid-row-start:3; grid-row-end:4;}
.tourapic .fontwrap #startscreen #startscreenUnten .bla a            {font-size:.8em; line-height:1.5em; align-self:center; color:var(--startscreenLink); text-decoration:none;}


.tourapic #sprachMenu *:not(a)                                       {color:var(--customStartLangText);}
.tourapic #sprachMenu a                                              {color:var(--customStartLangLink); font-size:.8em; line-height:.8em; flex:0 0 25px;}
.tourapic #sprachMenu a img                                          {border-radius:50%; overflow:hidden; opacity:.5;}
.tourapic #sprachMenu a.spracheAktiv img                             {opacity:1; box-shadow: 0 0 0 2px var(--ciFarbe1),0 0 0 4px var(--ciFarbe2);}
.tourapic #sprachMenu                                                {position:absolute; display:flex; flex-wrap:wrap; gap:15px; width:min(266px,90%); top:50%; left:calc(50% - min(133px,45%)); padding:20px; z-index:3; align-self:center; justify-self: center; justify-content:center; background:var(--customStartLangBg); border-radius:20px; opacity:0; visibility:hidden;}
.tourapic #sprachMenu.ol                                             {opacity:1; visibility:visible;}
.tourapic img.flag                                                   {width:25px; height:25px;}
.tourapic #uebersichtWrap                                            {position:absolute; display:none; z-index:3; width:100%; height:calc(50% + 40px); bottom:0; left:0; overflow:hidden;}
.tourapic #uebersichtWrap.ol                                         {display:block;}

.tourapic #uebersichtGrid                                            {position:relative; display:flex; margin:10px 10px 0; gap:6px; flex-wrap:wrap; align-items:flex-start; align-content:flex-start;}

.tourapic .uebersichtItem                                            {flex:0 0 calc(50% - 3px); position:relative; display:grid; min-height:180px; text-align:center; align-content:end; background:#00000080;}

.tourapic #closeUs                                                   {position:absolute; z-index:2; width:40px; height:40px; right:0; background:var(--xiCloseIcon); border-radius:20px 0 0 0; background-color:#00000080; background-position:center; background-repeat:no-repeat; background-size:cover;}
.tourapic #closeUs a                                                 {position:absolute; width:100%; height:100%;}

.tourapic #uebersicht                                                {position:relative; width:100%; height:100%; margin-top:42px; border-top:2px solid #222; overflow:hidden scroll;}
.tourapic .uebersichtItem.emptyItem:only-child                       {flex:1 1 auto; min-height:0px; height:0px;}
.tourapic .uebersichtItem.emptyItem                                  {flex:1 1 auto; min-height:180px; height:auto;}

.tourapic .uebersichtItem a                                          {position:relative; z-index:2; width:calc(100% - 10px); bottom:2px; padding:5px; color:#fff; text-decoration:none; text-align:left; font-weight:550; font-size:.8em; line-height:1.25em; background:#000000ba; justify-self:center;}

.tourapic .uebersichtItem img                                        {position:absolute; z-index:1; width:100%; height:100%; object-fit:cover;}

.startOl                                                             {position:absolute; width:100%; height:100%; z-index:2;}
.startOl .cont                                                       {position:relative; width:100%; height:100%; margin:0 auto; padding:20px; color:var(--impressumTxt); z-index:1; border:solid 10px var(--impressumBg2); background:var(--impressumBg); overflow:hidden scroll;}
.startOl .cont, .startOl .cont *                                     {color:var(--impressumTxt);}
.startOl .closebutton                                                {position:absolute; width:40px; height:40px; top:0; right:0; padding:20px; z-index:2; background:var(--closeStartOl);}

.tourapic #impressum,
.tourapic #datenschutz,
.tourapic #cookies                                                   {display:none; margin:0 auto; background:var(--impressumBg2);}

.tourapic #impressum .cont                                           {width:90%;}
.tourapic #datenschutz .cont                                         {width:90%;}
.tourapic #cookies .cont                                             {width:90%;}


.tourapic #impressum.ol,
.tourapic #datenschutz.ol,
.tourapic #cookies.ol                                                {display:block;}
.startOl .closebutton a                                              {position:absolute; width:100%; height:100%; top:0; left:0;}

 /* ----------- Startscreen, CUSTOM - ende ---------- */

 .tourapic ul                                                        {list-style-type:none; display:flex; flex-flow:wrap; grid-gap:4%; align-items:start;}
 .tourapic ul li                                                     {/*flex:1 0 max(45%,150px);  wenn ohne Bild: */flex: 1 1 100%;}
 .tourapic ul li ul                                                  {margin:0 0 30px 0; display:block; grid-row-start:2; grid-row-end:3; grid-column-start:1; grid-column-end:3; width:calc(100% - 70px); justify-self:right;}
 .tourapic ul li ul li                                               {display:block; padding:5px 0; border-bottom:1px solid var(--xiMenuXtraFarbe);}
 .tourapic ul li ul li:first-child                                   {border-top-width:0;}

 
          
.tourapic .tourapicGrid                                             {position:-webkit-sticky; position:sticky; display:grid; width:100%; height:calc(100% - 0px); top:0; z-index:1; grid-gap:0; grid-template-columns:1fr; grid-template-rows:60px 45% auto 1fr 25px; overflow:hidden; background:var(--xiBg); transition:.5s ease-out; } 
.tourapic.intro .tourapicGrid                                       {display:none;}
.tourapicGrid.updownUp                                              {grid-template-columns:1fr; grid-template-rows:60px 12px auto 1fr 25px; transition:.5s ease-out;}
.tourapicGrid.updownUp .updown                                       {top:8px;} 
.tourapicGrid.updownUp .viewer                                       {opacity:0; transition:opacity .5s ease;}
.tourapicGrid.updownUp .hotcorner                                    {opacity:0; transition:opacity .5s ease;}
/*.tourapicGrid.activeMenu                                           {grid-template-rows:65px 0 auto 1fr 25px; transition:.5s ease-out;}*/
.tourapicGrid.updownUp.hotcorner                                     {opacity:0; transition:opacity .5s ease;}
.tourapic .viewer                                                    {position:relative; width:100%; height:100%; z-index:8; opacity:1; background:var(--viewerBg); transition:opacity .5s ease;}
.tourapic .viewer img                                                {width:100%; height:100%; object-fit:cover;}
.tourapic .logo                                                      {max-width:100px; max-height:60px;}
.tourapic .logo img                                                  {width:100%; height:100%; object-fit:cover;}



/* --------- Header - start ---------- */
.tourapic .header                                                    {position:relative; display:grid; width:100%; height:60px; padding:1px 0 0 1px; z-index:1; grid-gap:10px; grid-template-columns:auto 1fr 60px; align-items:center; align-self:start; background:var(--headBg);} 
.tourapic .header, .tourapic header *                                {color:var(--headTxtFarbe); font-size:inherit;}
.tourapic .header .headline a h1, .tourapic .header .headline a      {color:var(--headLinkFarbe); margin:0;}
.tourapic .header .headline h1                                       {padding:0 5px 0 0; font-size:.9em; line-height:1.25em; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1;}
/*.tourapic .header .headline                                          {font-size:0 !important; line-height:0 !important;}*/


/* --------- Content - start ---------- */

.tourapic .mainWrap                                                  {position:relative; width:100%; height:100%/*calc(100% - 10px)*/; z-index:6; top:5px; background:var(--xiMainWrapBg); overflow-y:scroll;}
.tourapic .content.main, .tourapic .content.main *                   {color:var(--xiContentTxtFarbe); background:var(--xiContentBg);}
.tourapic .menu.main, .tourapic .menu.main * :not(a,b,em,i,span,strong,h1,h2,h3,h4) {color:var(--xiMenuTxtFarbe); background:var(--xiMenuBg);}
.tourapic .help.main, .tourapic .help.main *                         {color:var(--xiHelpTxtFarbe); background:var(--xiHelpBg);}
.tourapic .language.main, .tourapic .language.main *                 {color:var(--xiLangTxtFarbe); background:var(--xiLangBg);}

.tourapic .content.main a, .tourapic .content.main * a               {color:var(--xiContentLinkFarbe);}
.tourapic .menu.main a, .tourapic .menu.main * a h3                  {color:var(--xiMenuLinkFarbe);}
.tourapic .help.main a, .tourapic .help.main * a                     {color:var(--xiHelpLinkFarbe);}
.tourapic .language.main a, .tourapic .language.main * a             {color:var(--xiLangLinkFarbe);}

.tourapic figure                                           {padding: 10px;}
.tourapic figure img                                       {width: 100%;}
.tourapic figcaption                                       {font-size: 0.9em!important;}


.tourapic .main                                                      {width:100%; max-width:750px; margin:0 auto; padding:40px 15px;}
.tourapic .content.main                                              {height: 100%; position:relative; min-height:100%; top:0; z-index:1;}
.tourapic .menu                                                      {position:absolute; min-height:100%; top:0; z-index:2; background:#333; display:none; padding:20px 15px 40px;}
.tourapic .taps                                                      {position:absolute; min-height:100%; top:0; z-index:2; background:#333; display:none; padding:20px 15px 40px;}

.tourapic .help                                                      {position:absolute; min-height:100%; top:0; z-index:3; background:#333; display:none;}
.tourapic .language                                                  {position:absolute; min-height:100%; top:0; z-index:4; background:#333; display:none;}

.tourapic .language.main .sprachMenu img                             {border-radius:50%; overflow:hidden; opacity:.5;}
.tourapic .language.main .sprachMenu                                 {display:flex; gap:20px; flex-wrap:wrap; margin:20px 0;}
.tourapic .language.main .sprachMenu .spracheAktiv img               {opacity:1;}
.tourapic .language.main .sprachMenu a.spracheAktiv img              {opacity:1; box-shadow:0 0 0 2px var(--ciFarbe4),0 0 0 3px var(--ciFarbe2); transition:.25 ease-out;}
.tourapic .language.main .sprachMenu img.flag                        {width:35px; height:35px; transition:.25 ease-out;}

.tourapic .help, .tourapic .language                                 {display:none;}
.tourapic .helpButt a.uiButt                                         {background:var(--xiHelpIcon);     background-position:center; background-repeat:no-repeat;}
.tourapic .languageButt a.uiButt                                     {background:var(--xiLangIcon);     background-position:center; background-repeat:no-repeat;}



 .tourapic .languageButt                                             {margin-right:25%;}
 .tourapic .languageButt a.uiButt                                    {box-shadow: 0 0 0 7px #31363c;}
 .tourapic .helpButt                                                 {margin-left:25%;}
 .tourapic .helpButt a.uiButt                                        {box-shadow: 0 0 0 7px #31363c;}



.tourapic .usButt                                                    {background:var(--xiOverviewIcon); background-position:center; background-repeat:no-repeat;}

.tourapic a.uiButt.uiSubmenuButt a                                   {position:absolute; width:100%; height:100%;}
.tourapic a.uiButt.uiSubmenuButt.activ                               {border-color:var(--ciFarbe2)}



.tourapic .impressum                                                 {position:absolute; min-height:100%; top:0; z-index:5; background:#333; display:none;}
.tourapic .datenschutz                                               {position:absolute; min-height:100%; top:0; z-index:6; background:#333; display:none;}
.tourapic .cookies                                                   {position:absolute; min-height:100%; top:0; z-index:6; background:#333; display:none;}
.tourapic .impressumButt.activ                                       {color:var(--ciFarbe2);}
.tourapic .datenschutzButt.activ                                     {color:var(--ciFarbe2);}
.tourapic .CookiesButt.activ                                         {color:var(--ciFarbe2);}
.tourapic .main audio, .tourapic .main video                         {width:100%; margin:10px 0; display:block; position:relative;}
.tourapic .content.main ul                                           {font-size:1em; list-style-type:disc; margin-left:15px;}



/* ---------- Menu/Inhaltsverzeichnis - start ---------- */


.tourapic .raum                                                      {display:flex; width:100%; padding-bottom: 2px; gap:0 5px; border-bottom:10px solid var(--xiMenuXtraFarbe);}
.tourapic .raum img                                                  {align-self:flex-end;}


.tourapic .main.activ                                                {display:block;}
/*.main, .main *                             font-size:.85rem;  line-height:1.35rem;}*/
.tourapic .menu.main ul li a                                         {text-decoration:none; margin:0 5px;}

.tourapic .menu.main ul li ul li                                     {flex:0 0 100%; display:flex; margin-bottom:0; padding:5px 0 5px; text-transform:none; gap:0px; align-items:center; border-bottom:1px solid var(--xiMenuXtraFarbe); overflow-x:hidden;}
.tourapic .menu.main a                                               {flex:1 1 auto; align-self:flex-end;}
.tourapic .menu.main > ul                                            {display:flex; flex-wrap:wrap; gap:20px 6%; max-width:600px;}
.tourapic .menu.main ul > li                                         {gap:6%;}

.tourapic .menu.main ul li ul                                        {width:100%; display:flex; margin:0; flex-wrap:wrap; gap:0;}

.tourapic .menu.main ul li ul li > img                               {width:50px; height:50px; margin:0 5px 0 0; box-sizing:content-box; object-fit:cover; align-self:flex-end; border-left:10px solid var(--xiMenuXtraFarbe2);}
.tourapic .menu.main ul li                                           {flex:0 0 100%; position:relative; margin-bottom:0; text-transform:uppercase; gap:0 5px; flex-wrap:wrap; display:flex; align-items:flex-start;}
.tourapic .menu.main ul li ul li:first-child                         {margin-top:5px;}
.tourapic .menu.main ul li:first-child                               {flex:var(--xiMenuFirstWidth);}
.tourapic .menu.main ul li.activMenu,
.tourapic .menu.main ul li .raum.activMenu                           {background:var(--xiMenuActivMenuBg);}
.tourapic .menu.main ul li.activMenu a h3, 
.tourapic .menu.main ul li ul li.activMenu a,
.tourapic .menu.main ul li .raum.activMenu a                         {color:var(--xiMenuActivMenuTxt);}
.tourapic .menu.main ul li ul li.activMenu > img                     {border-color:var(--xiMenuActivMenuBg);}
.tourapic .menu.main ul li ul li > a                                 {max-width:calc(100% - 75px); align-self:center;}
.tourapic .menu.main ul li a h3                                      {margin:0; color:inherit;}

/* ---------- Menu/Inhaltsverzeichnis - ende ---------- */


.tourapic .help.activeSubMenu                                        {display:block;}
.tourapic .language.activeSubMenu                                    {display:block;}
.tourapic .menu.submenuPanel                                         {display:block;}

.tourapic .activeMenu .content                                       {display:none;}
.tourapic .panel.activ                                               {display:block;}
.tourapic .listButton a.uiButt.activ                                 {border-color:var(--xiButtHoverBorder);}


/* ---------- Footer ---------- */
.tourapic .footer                                                    {position:absolute; bottom:0; width:100%; height:50px; align-items: self-start;    padding:0 10px; display:grid; grid-template-columns:1fr 40px; justify-items:left; z-index:6; box-shadow:var(--footShadow); background:var(--footBg);}
.tourapic .footer, .tourapic .footer *                               {color:var(--footTxtFarbe);}
.tourapic .footer a, .tourapic .footer * a                           {color:var(--footLinkFarbe);}
.tourapic #copyright                                                 {display:flex; padding:0 0 2px;  z-index:2; align-items:center; line-height:0 !important; gap:10px; /*grid-template-columns:repeat(3,1fr);*/ white-space:nowrap; overflow:hidden; background: var(--footBg);}
.tourapic #copyright a                                               {display:inline-block; font-size:.8em !important; text-decoration:none;}

.tourapic #share                                                     {position:relative; display:grid; z-index:2; width:25px; height:25px; top:-15px; align-content:center; justify-items:center; font-size:12px; transition:.75s ease;}
.tourapic #share a.share                                             {position:relative; z-index:3; width:25px; height:25px; background:var(--xiShareIcon); box-shadow:var(--xiShareShadow); border-radius:50%;}


.tourapic #somWrap                                                   {position:absolute; display:grid; width:100cqw; right:-25px; bottom:-90px; padding:var(--xiSomwrapPad); z-index:2; grid-auto-flow:column; grid-gap:17px; justify-content:left; align-items:start; border-radius:var(--xiSomwrapRadius); border:var(--xiSomwrapBorder); background:var(--xiSomwrapBg); overflow:hidden; transition:bottom .25s ease-out;}
.tourapic #somWrap.activ                                             {bottom:-20px; box-shadow:var(--xiSomwrapShadow); transition:bottom .25s ease-out;}
.tourapic .som                                                       {position:relative; display:grid; width:25px; height:25px; align-content:center; justify-content:center; font-size:12px; border-radius:50%; box-shadow:0 0 0 1px #000, 0 0 0 7px #31363c; background-color:#272b30; background-repeat:no-repeat; transition:.75s ease;}
.tourapic .som a, .tourapic #share a                                 {position:absolute; width:100%; height:100%;}
.tourapic .som a img                                                 {object-fit:cover; width:100%; height:100%;}
.tourapic .somFb                                                     {background:var(--xiSomIcon1); display:var(--showSom1);}
.tourapic .somInsta                                                  {background:var(--xiSomIcon2); display:var(--showSom2);}
.tourapic .somTick                                                   {background:var(--xiSomIcon3); display:var(--showSom3);}
.tourapic .somX                                                      {background:var(--xiSomIcon4); display:var(--showSom4);}
.tourapic a.share                                                    {background:var(--xiShareIcon);} 




/* ---------- Default Grid (vertikal) ---------- */
.tourapic .header                                                    {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;}
.tourapic .viewer                                                    {grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3; z-index:5;}
.tourapic .ui                                                        {grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4;}
.tourapic .mainWrap                                                  {grid-column-start:1; grid-column-end:2; grid-row-start:4; grid-row-end:5;}
.tourapic .footer                                                    {grid-column-start:1; grid-column-end:2; grid-row-start:5; grid-row-end:6;}


/* ----------------------------------*/
/* ----------- UI - start ---------- */
/* ----------------------------------*/

.tourapic .hotcorner                                                 {position:absolute; display:grid; width:min(50px,9%); aspect-ratio:1; justify-content:center; align-content:center; z-index:6; font-size:12px; background-color:#00000080;  background-repeat:no-repeat; background-size:85%; opacity:var(--xiHcIconOpacity); transition:opacity .5s ease;}
.tourapic .hotcorner a                                               {position:absolute; width:100%; height:100%;}
.tourapic .hotcorner a img                                           {object-fit:cover; width:100%; height:100%;}

.tourapic .hotcorner.hc_tl                                           {top:60px; left:0; margin:0; border-radius:0 5px 40% 5px; background-position:center; background:var(--xiHcIcon1); display:var(--xiHcIcon1Vis);}
.tourapic .hotcorner.hc_tr                                           {top:60px; right:0; margin:0; border-radius:5px 0 5px 40%; background-position:center; background:var(--xiHcIcon2); display:var(--xiHcIcon2Vis);}
.tourapic .hotcorner.hc_bl                                           {bottom:45%; left:0; margin:0 0 3px; align-self:end; border-radius:5px 40% 5px 0; background-position:center; background:var(--xiHcIcon3); display:var(--xiHcIcon3Vis);}
.tourapic .hotcorner.hc_br                                           {bottom:45%; right:5px; margin:0 0 3px; background-position:center; align-self:end; background:var(--xiHcIcon4); background-color:transparent; background-size:100%; display:var(--xiHcIcon4Vis);}

.tourapic a.uiButt img                                               {width:100%; height:100%; object-fit:cover;}




.tourapic .ui                                                        {position:relative; display:grid; width:100%; height:fit-content; top:0; z-index:7; justify-items:center; align-items:center; box-shadow:var(--xiMenuShadow); background-color:var(--xiMenuBg); transition:.25s ease;}

.tourapic .backnext                                                  {position:relative; display:grid; width:100%; top:5px;grid-template-columns:1fr 1fr; z-index:2;}
.tourapic .back                                                      {width:calc(100% - 35px); text-align:right; border-radius:var(--xiBackRadius); border:solid var(--xiBackBorder); border-width:1px 1px 1px 0; box-shadow:var(--xiBackShadow); min-height:40px; color:#aaa; display:grid; align-content:center; padding:0; background-size:40px;}
.tourapic .next                                                      {width:calc(100% - 35px); justify-self:right; border-radius:var(--xiNextRadius); border:solid var(--xiNextBorder); border-width:1px 0 1px 1px; box-shadow:var(--xiNextShadow); min-height:40px; color:#aaa; display:grid; align-content:center; padding:0; background-size:40px;}

.tourapic .back a                                                    {position:relative; display:grid; width:100%; height:100%; padding:0 50px 0 10px; align-items:center; align-self:center; font-size:.8em; line-height:1.25em; text-decoration:none; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1;}
.tourapic .next a                                                    {position:relative; display:grid; width:100%; height:100%; padding:0 10px 0 50px; align-items:center; align-self:center; font-size:.8em; line-height:1.25em; text-decoration:none; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1;}

.tourapic .updown                                                    {position:absolute; display:grid; animation:blinkUp 2s alternate-reverse infinite; height:80px; width:80px; top:-30px; z-index:1; text-align:center; grid-template-rows:28px 52px 28px; justify-items:center; grid-gap:0;}

.tourapic .up                                                        {position:relative; display:grid; width:25px; height:25px; top:0; z-index:1; align-content:center; justify-content:center; border-radius:50%; /*background-color:#272b30;*/ -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}

.tourapic .down                                                      {position:relative; display:grid; width:25px; height:25px; top:0; z-index:1; align-content:center; justify-content:center; border-radius:50%; transition:.25s ease; /*background-color:#272b30;*/ -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}

.tourapic .listButton                                                {position:relative; display:grid; width:40px; height:40px; top:0; z-index:2; align-content:center; justify-content:center; transition:.25s ease; -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;}

.tourapic .listButton a.uiButt                                       {position:absolute; width:100%; height:100%; border-radius:var(--xiButtRadius); border:var(--xiButtBorder); box-shadow:var(--xiButtShadow); background-color:#272b30;}

.tourapic .listButton::after                                         {content:''; position:absolute; width:100%; height:calc(100% - 11px); z-index:-1; box-shadow:0 0 0 19px #222; border-radius:50%; border:solid #222; border-width:0 10px 10px 10px; /*box-sizing:content-box;*/ left:0; top:13px; display:none;}
/*.tourapic .activeMenu .ui .up, 
.tourapic .activeMenu .ui .down                                      {display:none;}*/
.tourapic .activeMenu .ui .listButton a.uiButt                       {top:0; transform:rotate(90deg); transition:.25s; background:var(--xiCloseIcon);}
.tourapic .activeMenu .ui .backnext                                  {opacity:0; transition:.25s; visibility:hidden;}
.tourapic .activeMenu .ui .listButton a.uiButt.notClose              {background:var(--xiMenuIcon); transform:none;}
.tourapic .activeMenu .ui .listButton:not(.notClose)                 {border-color:var(--ciFarbe2);}

.tourapic  a.uiButt                                                  {position:absolute; width:100%; height:100%; background-size:contain; pointer-events:auto; transition:border .5s ease,box-shadow .5s ease-out;}
.tourapic .back a.uiButt,.tourapic .next a.uiButt                    {position:relative;}
/*
.tourapic .back                                                      {background:var(--xiBackIcon);}
.tourapic .next                                                      {background:var(--xiNextIcon);}
.tourapic .listButton a.uiButt                                       {background:var(--xiMenuIcon); background-repeat:no-repeat;}
.tourapic .backInactive                                              {background:var(--xiBackIconInactive) !important;}
.tourapic .nextInactive                                              {background:var(--xiNextIconInactive) !important;}
*/
.tourapic .back                                                      {background:var(--ciFarbe4);}
.tourapic .next                                                      {background:var(--ciFarbe4);}
.tourapic .listButton a.uiButt                                       {background:var(--xiMenuIcon); background-repeat:no-repeat;}
.tourapic .backInactive                                              {background:var(--ciFarbe4) !important;}
.tourapic .nextInactive                                              {background:var(--ciFarbe4) !important;}
.tourapic .up                                                        {background:var(--xiUpIcon);} 
.tourapic .down                                                      {background:var(--xiDownIcon); transform:rotate(180deg)}
.tourapic .updown                                                    {position:absolute; top:-30px; height:80px; display:grid; grid-template-rows:1fr 1fr;}

.tourapic .activeMenu .ui .submenu                                   {display:grid;}
.tourapic .submenu                                                   {position:absolute; display:grid; width:100%; height:100% ; grid-template-columns:1fr 1fr; pointer-events:none; z-index:3;grid-gap:80px; justify-items:center; align-items:center; display:none;}

 .tourapic .helpButt a.uiButt, 
 .tourapic .languageButt a.uiButt                                    {position:relative; display:grid; width:35px; height:35px; top:0; z-index:2; align-content:center; justify-content:center; border-radius:50%; border:1px solid #000; transition:.25s ease; box-shadow:0 0 0 8px #31363c; background-color:#272b30; }


/* ----------- UI - ende ---------- */

.tourapic .header * :not(h1,a)                                       {font-size:0; line-height:0;} 
/*.tourapic .header .headline h1                                       {font-size:.8em; line-height:1.3em;}*/
.tourapic .header .headline a                                        {text-decoration:none;}
.tourapic .next  a.uiButt, .tourapic .back a.uiButt                  {font-size:.9em; line-height:1.2em; color:var(--xiButtText);}

/*.tourapic .main, .tourapic .main *                                   {font-size:.9em; line-height:1.5em;}*/

.tourapic .seperator                                                  {opacity:1; box-shadow:0 0 0 2px var(--ciFarbe4),0 0 0 3px var(--ciFarbe2); transition:.25 ease-out;}
  

/* ----------- FONTSIZES ---------- */



          
/* -------------------------------------------- */
/* ----------- BASIS LAYOUT - ende ------------ */
/* -------------------------------------------- */

/* -------------------------------------------- */
/* -------------------------------------------- */
/* ----------- min-inline-size:0px ------------ */
/* ----------------- ende --------------------- */
/* -------------------------------------------- */

}


/* ******************************************* */
/*                 MEDIAQUERIES                */
/* ******************************************* */
@container tourapic (min-inline-size:470px) {
 .tourapic .menu.main ul li                                          {flex:0 0 47%;}
 .tourapic .footer                                                   {height: 30px;align-items: center;}

}
@container tourapic (min-inline-size:550px) {
 .tourapic #startscreen                                              {background:var(--customStartBildQf);}
 .tourapic #startscreen #startscreenOben img.startscreenLogo.hoch    {display:none;}
 .tourapic #startscreen #startscreenOben img.startscreenLogo.quer    {display:block;}
 .tourapic .uebersichtItem                                           {flex:0 0 calc(33.3333% - (8px / 2));}

 .tourapic .hotcorner, .tourapicGrid.updownUp .hotcorner             {left:min(50%,500px); z-index:9; opacity:1;}
 .tourapic .hotcorner.hc_tl                                          {top:0; left:min(50%,500px);}
 .tourapic .hotcorner.hc_tr                                          {top:0; left:auto;}  
 .tourapic .hotcorner.hc_bl                                          {bottom:0; left:min(50%,500px);}
 .tourapic .hotcorner.hc_br                                          {bottom:-4px; left:auto;} 

 .tourapic .header                                                   {display:grid;}
 
 .tourapic .tourapicGrid                                             {grid-template-columns:min(50%,500px) 1fr; grid-template-rows:65px auto minmax(0, 1fr) calc(25px + env(safe-area-inset-bottom));}
 .tourapic .tourapic #content                                        {grid-template-rows:auto 1fr 25px; grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2; z-index:1; overflow:hidden;}
 .tourapic .tourapic .viewer                                         {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:2; z-index:1; z-index:8; box-shadow:0 0 30px -5px #000;}
 
 .tourapic .updown                                                   {grid-template-rows:1fr; top:0;}
 .tourapic .up, .tourapic .down                                      {display:none;}
 .tourapicGrid.updownUp                                              {grid-template-columns:min(50%,500px) 1fr; grid-template-rows:65px auto 1fr 25px;}
 .tourapicGrid.updownUp .listButton                                  {top:0;}
 .tourapicGrid.updownUp .up                                          {display:none;}
 .tourapicGrid.updownUp .down                                        {display:none;}
 .tourapic .listButton                                               {top:0px;}
 .tourapicGrid.updownUp .viewer                                      {opacity:1;}
 .tourapicGrid.activeMenu                                            {grid-template-columns:min(50%,500px) 1fr; grid-template-rows:65px auto 1fr 25px;}
 
 .tourapic .viewer                                                   {grid-column-start:2; grid-column-end:3; grid-row-start:1; grid-row-end:5; z-index:8;}
 .tourapic .header                                                   {grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:2;}
 .tourapic .ui                                                       {grid-column-start:1; grid-column-end:2; grid-row-start:2; grid-row-end:3;}
 .tourapic .mainWrap                                                 {overflow-y:unset;grid-column-start:1; grid-column-end:2; grid-row-start:3; grid-row-end:4; border-right:0px solid #272b30;}
 .tourapic .footer                                                   {grid-column-start:1; grid-column-end:2; grid-row-start:4; grid-row-end:5;}
 .tourapic .menu.main ul li                                          {flex:0 0 100%;}
 .tourapic #somWrap                                                  {width:auto; right:30px;/*width:min(50cqw,500px);*/}
}


@container tourapic (min-inline-size:800px) {
 .tourapic .uebersichtItem                                           {flex:0 0 calc(25% - (18px / 4));}
 .tourapic #impressum .cont                                          {width:var(--impressumBreite);}
 .tourapic #datenschutz .cont                                        {width:var(--datenschutzBreite);}
 .tourapic #cookies .cont                                            {width:var(--cookiesBreite);}
 .tourapic #somWrap                                                  {justify-content:center;}
}

@container tourapic (min-inline-size:900px) {
  .tourapic .menu.main ul li                                          {flex:0 0 47%;}
}

@container tourapic (min-inline-size:1000px) {
 .tourapic .uebersichtItem                                           {flex:0 0 calc(20% - (24px / 5));}
}

.scroll-container {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

    .scroll-container > section {
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        top:10px;
        margin-bottom:40px;
    }

/*    
section.active {
    border-left: 2px solid var(--footTxtFarbe);
    background-color: #f9f9f9;
    padding: 0 5px 0;
}*/


section > h1 {
    margin: 20px 0 !important; 
    color: gray !important;  
    transition: color 300ms ease; /
}
section > div > figure >figcaption {
    color: gray !important; 
transition: color 300ms ease; / 
}
section > div > p {
        color: gray !important; 
    transition: color 300ms ease; / 
}

section.active > div > figure > figcaption {
    color: white !important;  
}
section.active > div > p {
    color: white !important;  
}

section.active > h1 {
 /*   font-weight: bold !important; */
    color: white !important;  
}

span {
    font-size: 1.2rem;
}


#infoList {
max-height: 250px; /* set height here */
overflow-y: auto;
margin-top: 1em;
padding: 0;
border: 1px solid #ddd;
border-radius: 6px;
background: white;
}

#infoList li {
list-style: none;
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}

#infoList li:last-child {
border-bottom: none;
}

#infoList li strong {
flex-grow: 1;
}

#infoList li button {
margin-left: 10px;
background: #6c757d;
}

#infoList li button:hover {
background: #5a6268;
}

#editForm {
margin-top: 20px;
padding: 15px;
background: black;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
max-width: 500px;
color: black;
}

#editForm h3 {
margin-top: 0;
}

#editForm label {
display: block;
margin-top: 12px;
font-weight: 500;
}

#editForm input[type="text"],
#editForm textarea {
width: 100%;
padding: 8px;
margin-top: 4px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

#editForm textarea {
resize: vertical;
}

#editForm button {
margin-top: 15px;
margin-right: 10px;
background: #198754;
}

#editForm button:hover {
background: #157347;
}

#editForm button:last-of-type {
background: #dc3545;
}

#editForm button:last-of-type:hover {
background: #bb2d3b;
}

.cube {
    transform-style: preserve-3d;
  }
  
  /* IMPORTANT for inside view */
  .cube-face {
    backface-visibility: visible; /* not hidden */
  }
  
  /* If you currently use translateZ(+half) for outside,
     inside cube usually needs translateZ(-half) OR flipping faces. */
  .cube-face-pz { transform: rotateY(180deg) translateZ(calc(var(--cube-face) / 2)); }
  .cube-face-nz { transform: translateZ(calc(var(--cube-face) / 2)); }
  
  .cube-face-px { transform: rotateY(-90deg) rotateY(180deg) translateZ(calc(var(--cube-face) / 2)); }
  .cube-face-nx { transform: rotateY( 90deg) rotateY(180deg) translateZ(calc(var(--cube-face) / 2)); }
  
  .cube-face-py { transform: rotateX( 90deg) rotateX(180deg) translateZ(calc(var(--cube-face) / 2)); }
  .cube-face-ny { transform: rotateX(-90deg) rotateX(180deg) translateZ(calc(var(--cube-face) / 2)); }