/*(2024 by R.Dafinger)*/
:root{

--xc-blue: #0d6efd;
--xc-indigo: #6610f2;
--xc-purple: #6f42c1;
--xc-purple-light: #c7b4eb;

--xc-pink: #d63384;
--xc-darkpink:#8d0d4d;
--xc-red: #dc3545;
--xc-orange: #fd7e14;
--xc-yellow: #ffc107;
--xc-green: #198754;
--xc-teal: #20c997;
--xc-cyan: #0dcaf0;
--xc-black: #000;
--xc-white: #fff;
--xc-gray: #6c757d;
--xc-gray-dark: #343a40;
--xc-gray-100: #f8f9fa;
--xc-gray-200: #e9ecef;
--xc-gray-300: #dee2e6;
--xc-gray-400: #ced4da;
--xc-gray-500: #adb5bd;
--xc-gray-600: #6c757d;
--xc-gray-700: #495057;
--xc-gray-800: #343a40;
--xc-gray-900: #212529;
--xc-primary: #0d6efd;
--xc-secondary: #6c757d;
--xc-success: #198754;
--xc-info: #0dcaf0;
--xc-warning: #ffc107;
--xc-danger: #dc3545;
--xc-light: #f8f9fa;
--xc-dark: #212529;


    /*Farben sammeln*/
    --color00:transparent;
    --color1:#333;  /*page-bg, text header*/
    --color2:#777; /* text, text-active anchor*/
    --color3:#2e5b7a; /* headlines, anchor */
    --color4:#c9c9c9; /* borders*/
    --color5:deepskyblue;
    --color6:tomato;

    --color7:rgb(211, 243, 211);
    --color8:pink;
    --color9:orange;
    --color10:teal;
    --color11:black;
    --color12:white;
    --color51:rgba(0, 0, 0, 0.547);
    --color71:rgba(211, 243, 211, 0.535);
    /* Schriftarten */
    --default-font1:sans-serif;
    --font1:Arial, Helvetica, sans-serif;
    --font2: 'Courier New', Courier, monospace;;
    --font3:Trebuchet MS,nonospace;

    --link-height:1.2em;
    --link-color:var(--color3);
    --link-decoration:underline;
    --link-hov-bg:var(--color11);
    --link-hov-decoration:underline;
    --link-hov-color:var(--color7);


--switch-color:var(--color7);

  --wrapper:800px;
  --maxshowpage:800px;
  --elemshowpage:100%;
  --htmlpagewidth:100%;

  --marg-l:0px;
  --marg-r:0px;
  --padd-l:0px;
  --padd-r:0px;
  --padd:0px;
  --marg:0px;
}

.col-8{--col:8.33333334%}
.col-16{--col:16.6666667%}
.col-25{--col:25%;}
.col-33{--col:33.33334%;} 
.col-50{--col:50%;}
.col-66{--col:66.6666667%;} 
.col-75{--col:75%;}
.col-83{--col:83.33334%}
.col-100{--col:100%;}

[class*="col-"]{
width:var(--col);
}

/* Anordnung / Spaltenaufbau */

/* [class*="col-"].padd-l{width:calc(var(--col)  - var(--padd-l));}
[class*="col-"].padd-r{width:calc(var(--col)  - var(--padd-r));}
[class*="col-"].marg-l{width:calc(var(--col)  - var(--marg-l));}
[class*="col-"].marg-r{width:calc(var(--col)  - var(--marg-r));}
[class*="col-"].marg-r.padd-r{width:calc(var(--col)  - (var(--marg-r) + var(--padd-r)));}
[class*="col-"].marg-r.padd-l{width:calc(var(--col)  - (var(--marg-r) + var(--padd-l)));}
[class*="col-"].marg-l.marg-r.padd-r{width:calc(var(--col) - (var(--marg-l) - var(--marg-r) + var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-l.marg-r.padd-l{width:calc(var(--col) - (var(--marg-l) - var(--marg-r) + var(--padd-l) + var(--padd-l)));}
[class*="col-"].marg-l.padd-l.padd-r{width:calc(var(--col)  - (var(--marg-l) + var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-r.padd-l.padd-r{width:calc(var(--col)  - (var(--marg-r) + var(--padd-r) + var(--padd-l)));}  

[class*="col-"].padd-l.padd-r{width:calc(var(--col)  - (var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-l.padd-l.padd-r{width:calc(var(--col)  - (var(--marg-l) + var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-r.padd-l.padd-r{width:calc(var(--col)  - (var(--marg-r) + var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-l.marg-r.padd-l.padd-r{width:calc(var(--col)  - (var(--marg-l) + var(--marg-r) + var(--padd-r) + var(--padd-l)));}
[class*="col-"].marg-l.marg-r.padd-l{width:calc(var(--col)  - (var(--marg-l) + var(--marg-r) + var(--padd-l)));}
[class*="col-"].marg-l.marg-r.padd-r{width:calc(var(--col)  - (var(--marg-l) + var(--marg-r) + var(--padd-r)));}

[class*="col-"].marg-l.padd-r{width:calc(var(--col)  - (var(--marg-l) + var(--padd-r)));}
[class*="col-"].marg-l.padd-l{width:calc(var(--col)  - (var(--marg-l) + var(--padd-l)));} */


/*Schreibweise der Regeln verkürzt alle margin und padding werte auf 0 gesetzte*/
/*Berechnung alternatives Boxmodell */
/* [class*="col-"]{width: calc(var(--col) - var(--mar-l)- var(--mar-r));}  */
/*Regel klassisches Boxmodell gekürzte */
/* :not(.border-box)[class*="col-"]{width: calc(var(--col) - var(--mar-l)- var(--mar-r) - var(--padd-l) - var(--padd-r) - var(--border-width));} */ */


[class*="col-"]{width:var(--col);

  margin-left:var(--marg-l);
  margin-right:var(--marg-r);
  margin-top:var(--marg-t);
  margin-bottom:var(--marg-b);

  padding-left:var(--padd-l);
  padding-right:var(--padd-r);
  padding-top:var(--padd-t);
  padding-bottom:var(--padd-b);
  
  border:var(--border-width) var(--border-style) var(--border-color);

}


.flash:hover{
      transition:0.2s;
      transform:scale(0.95);
}

.wosch:hover{
      transition:0.2s;
      transform:scale(1.3);
}

/* .sunset:hover{
  transition:0.2s;
      padding-bottom:1em;
} */

img.bigger:hover{
      transition:1s;
      transform:scale(1.1);
}

.show{
      transition:1s;
      width:30%;
      height:auto;
}

.op-no {
      transition:0.5s; /* Transition-Eigenschaft auf die Opacity anwenden und 2 Sekunden Dauer */
      opacity: 100%; /* Anfangs-Opacity auf 0 setzen */
}

.op-no:hover {
      transition:opacity 0.5s;
      opacity: 100%; 
}

.blend{
      transition:0.5s;
      translate:50%;
      opacity:100%;
}

.hintergrund{
  width:100%;
}

.labyrinth{
  background-image:url('../images/Labyrinth.jpg');
  background-size:cover;
  background-repeat:repeat-y;
  /* transform: scaleY(-1); */
}

.wood{
    display:none;
      /* background-image:url('../images/prog/Parkside.png');
      background-size:cover;
      background-repeat:repeat-y; */
      /* transform: scaleY(-1); */

  position: relative;
}



.car_I{
  background-image:url('../images/stall_car2.jpg');
  background-size:cover;
  background-repeat:repeat-y;

/* transform: scaleY(-1); */
}


html{
          --htmlpagewidth:var(--wrapper);
        
       /* background-image:url('../img/gallerie/Labyrinth.jpg');
        background-size:cover; */
      
       
        max-width:var(--htmlpagewidth);
        /* min-width:400px; */

        width:100%;
        height:auto;
        margin:0;
        padding:0;

  box-sizing:border-box;

}
*,*:before,*:after{
        box-sizing:inherit;
  
}

/* body{
        margin:0;
        padding:0;
        overflow-x: hidden;
        background-color:rgb(0, 0, 0);
        max-width:var(--elemshowpage); 
        margin-left:auto;
        margin-right:auto;
        height:2000px; 
        height:auto;
} */

/* CSS für Anzeige wenn Beschäftigt */
 
#busyOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
}

.busyBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 25px 35px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.25);
    text-align: center;
    min-width: 260px;
}

.spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px auto;
    border: 6px solid #ddd;
    border-top: 6px solid #333;
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
}

.busyText {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

@keyframes drehen {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



 .fullwidth{
    width:var(--maxshowpage);
  }
 
  .test{
   background-color:deepskyblue ;
  }
  
  .width-2{width:200px;height:100px;}
  .heightfit{height:fit-content;}
  .widthfit{width:fit-content;}

  .maxwidth{width:100%;}
  
  .pos0{top:0;left:0;right:0;bottom:0;}
  .footerpos{top:51em;}
  .marg0{--pixelwert:0px;--marg-t:var(--pixelwert);--marg-l:var(--pixelwert);--marg-r:var(--pixelwert);--marg-b:var(--pixelwert);}
  .padd0{--pixelwert:0px;--padd-t:var(--pixelwert);--padd-l:var(--pixelwert);--padd-r:var(--pixelwert);--padd-b:var(--pixelwert);}
  
  .posrel{position:relative;}
  .posabs{position:absolute;}
  .fixed{position:fixed;}
  .sticky{
    position: sticky;
    top: 400px; /* bleibt oben am Viewport "kleben" */
    padding: 20px;
    margin: 0;
    font-size: 2em;
    /* z-index: 100; */
}

.overflow-hidden{overflow:hidden;}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* optional für Snap-Effekt */
  -webkit-overflow-scrolling: touch; /* sanftes Scrollen auf iOS */
  gap: 10px; /* Abstand zwischen Bildern */
  padding: 10px;
}

.scroll-container div {
  flex: 0 0 auto;        /* verhindert Verkleinern */
  width: 200px;          /* feste Breite für jedes Bild */
  height: auto;
  scroll-snap-align: start;
  border-radius: 10px;
}

..gallery-snap{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  overflow-x: auto;
  overflow-y: hidden;

  gap: 24px;
  padding: 40px 0;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  justify-content: center;
}

/* jedes Bild-Element */
.snap-item{
  flex: 0 0 80vw;          /* 80% der Bildschirmbreite */
  max-width: 500px;        /* Desktop Begrenzung */
  scroll-snap-align: center;

  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bild selbst */
.snap-item img{
  width: 100%;
  height: auto;
  max-height: 65vh;        /* max 65% der Bildschirmhöhe */
  object-fit: contain;

  border-radius: 16px;
  display: block;
}

/* Text */
.snap-item figcaption{
  margin-top: 12px;
  color: white;
  text-align: center;
  font-family: "Trebuchet MS", system-ui;
}

.wackelanzeige{
  min-height:50px;
  border:8px dotted  rgb(245, 245, 200);
  border-radius:20px 20px 20px 20px;
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  font-size:1.8em;
  text-shadow:2px 2px 5px  rgb(255, 255, 255);
  align-items:center;
  margin:0;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  font-family: Xanti, SYSTEM, monospace;
  font-weight:bolder;
  color:rgb(0, 0, 0);
}

.harmony{
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 300% 300%;
	animation: gradientAnimation 15s ease infinite;
}

.harmony1{
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 100% 100%;
	animation: gradientAnimation 15s ease infinite;
}
.harmony2{
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 200% 200%;
	animation: gradientAnimation 15s ease infinite;
}
.headContainer{
  background-image: url('../images/EMO_water_top.jpg');
  width:auto;
  height:100vh;
  background-size:var(--elemshowpage);
  background-position: center;
  background-repeat: no-repeat;

}


.justify-center{justify-content:center;}
.justify-left{justify-content:left;}
.justify-right{justify-content:right;}
.justify-around{justify-content:space-around;}
.justify-evenly{justify-content:space-evenly;}
.justify-between{justify-content:space-between;}
.align-center{align-items:center;}
.text-center{text-align:center;}


  .displayb{display:block;}
  .displayib{display:inline-block;}
  .displayfl{display:flex;}
  .displayifl{display:inline-flex;}
  .displayno{display:none;}

  .zero{--pixelwert:0em;}
  .larger{--pixelwert:12.5em;}
  .large{--pixelwert:10em;}
  .grande{--pixelwert:7.5em;}
  .venti{--pixelwert:5em;}
  .normal{--pixelwert:3.125em;}
  .medium{--pixelwert:2.5em;}
  .small{--pixelwert:1.25em;}
  .smaller{--pixelwert:0.625em;}
  .xsize{--pixelwert:0.3125em;}
  .size1{--pixelwert:0.0625em;}
  .size2{--pixelwert:0.125em;}
  .size3{--pixelwert:0.1875em;}
  .size4{--pixelwert:0.25em;}

  .color6{color:var(--color6);}
  .color7{color:var(--color7);}
  .color9{color:var(--color9);}

  .color11{color:var(--color11);}
  .color12{color:var(--color12);}
  .bcolor6{background-color:var(--color6);}
  .bcolor11{background-color:var(--color11);}
  .bcolor1{background-color:var(--color1);}
  .bcolor12{background-color:var(--color12);}
  .marg-t{--marg-t:var(--pixelwert);margin-top:var(--marg-t);}
  .marg-b{--marg-b:var(--pixelwert);margin-bottom:var(--marg-b);}
  .padd-t{--padd-t:var(--pixelwert);padding-top:var(--padd-t);}
  .padd-b{--padd-b:var(--pixelwert);padding-bottom:var(--padd-b);}
  .marg-l{--marg-l:var(--pixelwert);margin-left:var(--marg-l);}
  .marg-r{--marg-r:var(--pixelwert);margin-right:var(--marg-r);}
  .padd-l{--padd-l:var(--pixelwert);padding-left:var(--padd-l);}
  .padd-r{--padd-r:var(--pixelwert);padding-right:var(--padd-r);}
  .padd{--padd:var(--pixelwert);padding:var(--padd);}

.padd-zero{padding:0px;}

.g-filter{filter: grayscale(0%) invert(50%);}
.h-filter{filter: hue-rotate(90deg);}
.b-filter{filter: blur(5px);}
.a-filter{ filter: grayscale(0%) invert(100%) blur(5px) brightness(500%) contrast(200%) saturate(100%) sepia(0) hue-rotate(20deg) opacity(100%) drop-shadow(10px 10px 5px rgba(255, 255, 255, 0.6));}
.i-filter{ filter:invert(100%) brightness(200%) contrast(100%) opacity(100%) drop-shadow(10px 15px 5px rgba(0, 0, 0, 0.767));}


  .fonttrebuchet{font-family:trebuchet MS,monospace;}
  .fontarial{font-family:Arial,monospace;}

  .text-light{color:white;}
  .text-primary{color:var(--xc-primary);}
  .text-danger{color:var(--xc-danger);}
  .text-warning{color:var(--xc-warning);}
  .text-black{color:var(--xc-black);}
  .text-gray-dark{color:var(--xc-gray-dark);}
  .text-yellow{color:var(--xc-yellow);}

  .sky{--switch-color:var(--color5);background-color:var(--switch-color);}
  .helly{--switch-color:var(--xc-gray-500);background-color:var(--switch-color);}
  .darky{background-color:rgba(0, 0, 0, 0.519);}
  .lighty{--switch-color:var(--color71);background-color:var(--switch-color);}
  .blacky{background-color:var(--switch-color);}
  .bluey{background-color:#2e5b7a;color:white;}
  .transparent{background-color:rgba(0, 0, 0, 0);}
  .gradient{--switch-color:var(--color9);Background:radial-gradient(ellipse, #ffffff, #dcddbf, var(--switch-color));}
  .glow{box-shadow:0px 0px 15px 15px rgba(251, 255, 219, 0.808);}
  .dark{box-shadow:0px 10px 15px 15px rgba(0, 0, 0, 0.808);}
 

.bg-purple{background-color:var(--xc-purple);}
.bg-yellow{background-color:var(--xc-yellow);}
.bg-red{background-color:var(--xc-red);}
.bg-cyan{background-color:var(--xc-cyan);}
.bg-green{background-color:var(--xc-green);}
.bg-deepskyblue{background-color:var(--color5);}
.bg-pink1{background-color:var(--xc-pink);}
.bg-pink2{background-color:var(--color8);}
.bg-lightgreen{background-color:var(--color7);}
.bg-teal1{background-color:var(--color10);}
.bg-teal2{background-color:var(--xc-teal);}
.bg-orange{background-color:var(--xc-orange);}
.bg-white{background-color:white;}
.bg-black{background-color:black;}
.bg-antiblue{background-color:#23a6d5;}
.bg-antipink{background-color:#e73c7e;}
.bg-antired{background-color:#ee7752;}
.bg-antigreen{background-color:#23d5ab;}

  /*Borderveränderungen für Fotos*/
  .rounded{overflow:hidden;border-radius:20px 20px 20px 20px;border:20px solid var(--color00);}
  .rounded-light{overflow:hidden;border-radius:20px 20px 20px 20px;}
  .rounded-dark{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color:rgba(255, 255, 255, 0.886);}
  .rounded-grey{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color:rgba(209, 209, 209, 0.886);}
  .rounded-tomato{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color: rgba(255, 99, 71, 1);}
  .rounded-green{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color:rgba(129, 200, 171, 1);}
  .rounded-trans{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color:rgba(255, 255, 255, 0.5);}
  .rounded-transy{overflow:hidden;border-radius:20px 20px 20px 20px;border:2px solid white;background-color:rgba(51, 51, 51, 0.541);}
 
  .rounded-violet{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color:  rgb(102, 102, 153);}
  .rounded-primary{overflow:hidden;border-radius:20px 20px 20px 20px;border:0px solid white;background-color: rgba(13, 109, 253, 1);}

  .responsive-img {
    width: 30vw; /* 10% der Viewport-Breite */
    max-width: 100%; /* niemals größer als das Originalbild */
    height: auto; /* proportional skalieren */
 
  }
  
  @keyframes growing{0%{-webkit-transform:scale3d(1,1,1) translate3d(0,0,0);
            transform:scale3d(1,1,1) translate3d(0,0,0)}20%{-webkit-transform:scale3d(1.2,1.2,1.4) translate3d(0,0,0);
            transform:scale3d(1.2,1.2,1.2) translate3d(0,0,0)}}
            .growing{-webkit-animation:10s linear 10ms infinite growing;
              -ms-animation:growing 10s linear 10ms infinite;
              -moz-animation:10s linear 10ms infinite growing;
              animation:2s linear 10ms infinite growing;
              transform:translate3d(0,0,0);
              transition:.10s ease-in-out}

    @keyframes growarrow{0%{-webkit-transform:scale3d(0,0,0) translate3d(0,0,0);
      transform:scale3d(1,1,1) translate3d(0,0,0)}20%{-webkit-transform:scale3d(5,5,3) translate3d(0,0,0);
      transform:scale3d(1.8,1.8,1.8) translate3d(0,0,0)}}
      .growarrow{-webkit-animation:10s linear 10ms infinite growarrow;
        -ms-animation:growarrow 2s linear 10ms infinite;
        -moz-animation:2s linear 10ms infinite growarrow;
        animation:10s linear 10ms infinite growarrow;
        transform:translate3d(2,2,2);
        transition:.2s ease-in-out}

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  #img1 {
    animation: pulse 2s infinite ease-in-out;
  }
  #img2 {
    animation: pulse 2s infinite ease-in-out;
  }

  #bitcoin {
    animation: pulse 2s infinite ease-in-out;
  }
  
 .input-glow{
  box-shadow:0px 0px 12px 2px rgb(255, 212, 56);
 
 }

  .spheredcup{overflow:hidden;border-radius:500px 500px 100px 100px;border:20px solid var(--color00);}
  .spheredtop{overflow:hidden;border-radius:100px 100px 500px 500px;border:20px solid var(--color00);}
  .spheredleft{overflow:hidden;border-radius:0px 200px 0px 200px;border:20px solid var(--color00);}
  .spheredright{overflow:hidden;border-radius:200px 0px 200px 0px;border:20px solid var(--color00);}
  .sphered-bottom-left{overflow:hidden;border-radius:20px 50px 0px 50px;border:20px solid var(--color00);}

  .spiked{overflow:hidden;border:2px solid transparent;}
    
.fontset-text{font-family:var(--font3);font-size:1.4em;color:white;}
  
.wrapper, .wrap{
  max-width:var(--wrapper, fit-content);
  margin-left:auto;
  margin-right:auto;
}

    .setwrap950{--wrapper:950px;}
    .setwrap1200{--wrapper:1200px;}


    
/* Floating*/
.fl-r,
.float-r,
.float-right{
float:right;
}

.fl-l,
.float-l,
.float-left{
float:left;
}

.clear,
.clearfix:after{clear:both;}
.clearfix:after{
content:"";
display:table;
}


/* Flex-box */

.flex, .flex-w{display:flex;}

.flex-w,.flex-wrap{flex-wrap:wrap;}

.flex-row{flex-direction:row;}

.flex-column{flex-direction:column;}

.flex-w,.flex-wrap{flex-wrap:wrap;}

.grow,.flex-grow{flex-grow:1;}


.cursor{
  cursor:pointer;
}

/* Bilder */
.scale,.img-scale{width:100%;height:auto;}
.scale-venti{width:80%;height:auto;}
.scale-normal{width:50%;height:auto;}
.scale-small{width:40%;height:auto;}
.scale-smaller{width:30%;height:auto;}
.shot{width:120%;height:auto;}
.sunset{
  transition:0.2s;
}


.text-left{text-align:left;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.charsize{--charsize:1.5em;}
.underline{text-decoration:underline;}
.no-deco{text-decoration:none;}
.no-list-style{list-style-type:none};
.box-shadow{box-shadow:10px 10px 10px 10px rgba(0, 0, 0, 0.501);}
.pointer-no{pointer-events:none;}
.fontbold{font-weight:bold;}
.fontnorm{font-weight:normal;}
.lineheight{line-height:1.5em;}
.lineheight-less{line-height:0.8em;}

.fontsize10{font-size:0.8em;}
.fontsize12{font-size:0.9em;}
.fontsize16{font-size:1em;}
.fontsize18{font-size:1.2em;}
.fontsize20{font-size:1.4em;}
.fontsize22{font-size:1.5em;}
.fontsizebig{font-size:3em;}

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
}


 p{
        text-align:center;
        background:white;
        color:black;
}

h1{
        background:black;
        width:100%;
        text-align:center;
        color:white;
        font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size:5em;
}

h2{
        background:orange;
        width:100%;
        text-align:center;
        color:white;
        font-family:Trebuchet MS,monospace;
        font-size:3em;
}

h3{
        background:tomato;
        width:100%;
        text-align:center;
        color:black;
        font-family:Trebuchet MS,monospace;
        font-size:3em;  
}

h4{
    background:lightgrey;
    width:100%;
    text-align:center;
    color:black;
    font-family:Trebuchet MS,monospace;
    font-size:3em;  
}

h1, .h1 {

    font-size: calc(1.375rem + 1.5vw);
  }
  @media (min-width: 1200px) {
    h1, .h1 {
      font-size: 5rem;
    }
  }
  
  h2, .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  @media (min-width: 1200px) {
    h2, .h2 {
      font-size: 2rem;
    }
  }
  
  h3, .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  @media (min-width: 1200px) {
    h3, .h3 {
      font-size: 1.75rem;
    }
  }
  
  h4, .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  @media (min-width: 1200px) {
    h4, .h4 {
      font-size: 1.5rem;
    }
  }
  
  h5, .h5 {
    font-size: 1.25rem;
  }
  
  h6, .h6 {
    font-size: 1rem;
  }
 
  abbr[title] {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
  }
  
  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }


.bubble{
  font-size: calc(1.375rem + 1.5vw);
}
/*#############################################
/*#############################################
/* WETTERDATEN Container */
/*#############################################
/*#############################################*/


.wetter-container{
  min-width:auto;
  overflow:hidden;
}

.wind-container {

  width:auto;
}

    .compass {
        position: relative;
        width: 100px;
        height: 100px;
        border: 2px solid rgba(251, 255, 219, 0.808);
            border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
    }

    .compass span {
        position: absolute;
    
    }

 
    .north  { color:bisque;top: 5px; left: 50%; transform: translateX(-50%); }
    .west   { color:bisque;left: 5px; top: 50%; transform: translateY(-50%); }
    .middle  {z-index:1;color:red;left:50%; transform: translateX(-50%); 
      background:transparent;
      width:100%;
     font-family:Trebuchet MS,monospace;
      font-size:1em;
    }
    .east   { color:bisque;right: 5px; top: 50%; transform: translateY(-50%); }
    .south  { color:bisque; bottom: 5px; left: 50%; transform: translateX(-50%); }

    .precipitation {
      display: flex; /* Flexbox verwenden */
      flex-wrap: wrap; /* Zeilenumbruch aktivieren, damit es auf mehreren Zeilen angezeigt wird */
  }

  .gradient-sunset {
    background: linear-gradient(to top, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* font-size: 40px; */
    /* font-weight: bold; */
}
.gradient-sunrise {
  background: linear-gradient(to top, rgb(246, 199, 250), rgb(255, 115, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* font-size: 40px; */
  /* font-weight: bold; */
}

.gradient-precipitation {
  background: linear-gradient(to top, rgb(38, 233, 247), rgb(245, 255, 254));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* font-size: 40px; */
  /* font-weight: bold; */
}

.gradient-verlauf{
  /* background-image: url('../images/prog/wolken75.jpg');
  background-size: 100% 140%; */
  
  background: linear-gradient(90deg, rgb(16, 0, 75), rgba(0, 0, 255, 0.5), rgba(0, 255, 255, 0.5), rgba(255, 255, 0, 0.5), rgba(255, 166, 0, 0.5), rgba(255, 0, 0, 0.5));
}

    .rectangle {
      font-family:Monospace;
      color:black;
      width: 10px; 
      height: 0px;
      background-color: #4CAF50; /* Hintergrundfarbe für die Rechtecke */
      margin-left:2px;
       margin-right: 2px;
      margin-top:10px;
      margin-bottom: 5px;
  }



.wind-indicator {
  width: 50px;

 position:absolute;
 background-color: dodgerblue; 
  transform-origin: center;

  transition: transform 1s ease;
}

.wind-label {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
}

.tempcolor{
  background: linear-gradient(90deg, rgb(16, 0, 75), blue, cyan, yellow, orange, red);
}


.humcolor{
  background: linear-gradient(90deg, rgb(0, 94, 131), rgb(51, 197, 255), cyan, rgb(238, 252, 176));
}
.temp-container {
  width: 379px;
  height: 25px;
  margin-bottom:2px;
 
  position: relative;
  border: 0px solid #ccc;
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
  display:flex;
}

.anztemp{
  z-index:1;
  font-family:Monospace;
  color:white;
  text-shadow:1px 1px black;
  font-size:1em;
  background-color:transparent;
  margin-top:4px;
   margin-left:5px;
}

.progress {
  height: 100%;
  background-color: #000000b9;
  position: absolute;
  right: 0;
  transition: width 0.5s;
  border-radius: -30px 0px 0px -30px;
  display:flex;
}


/*#############################################*/
/*#############################################*/

#hamburger{
position:fixed;
top:1em;
left:1em;
height:50px;
width:50px;
background-color:#ffffff;
box-shadow:0px 0px 10px 10px white;
border:1px solid white;
border-radius:50%;
z-index:999;
}

nav{
        left:0;
        margin:0;
        padding:0;
        padding-right:1em;
        position:fixed;
        background:rgba(97, 176, 240, 0.623);
        flex-wrap:wrap;
        display:flex;
        position:fixed;
        z-index:10000;

}

nav ul{
        font-size:1.2em;
        font-family:'Trebuchet MS',monospace;
        list-style-type:none;
        /* display:inline-flex; */
        flex-wrap:wrap;
        /* height:auto; */
        left:0;
        background:rgba(97, 176, 240, 0.823);
       box-shadow:0px 0px 25px 25px rgba(0, 0, 0, 0.808);

}

.list-style-none{
  list-style-type:none;
}

nav ul li {
  /* Border-radius:10% 10%;*/
   border:4px solid rgba(148, 201, 245, 0.473);
  background-color:rgb(83, 168, 238);
  /* margin-bottom:2em; */
  /* padding:2px; */
  color:lightblue; 
  text-decoration:none;
  /* text-align:center; */
/* 
  display:flex;
  justify-content:center;
   */
  /* height:2em;
   */
  font-size:1.1em;

  transition: all 0.3s ease;
  transform: scale(0.7);
}

nav ul li a{
            /* background:rgb(83, 168, 238); */
            background-color:transparent;
  
            color:lightblue;
             /* width:128px;
             height:128px; */
          
            text-decoration:none;
            transition: all 0.3s ease; /* Übergang für alle Eigenschaften */
            transform: scale(1);
            /* font-size:3em; */
          
}

 nav li a:hover, nav li a:focus{
 
  filter: blur(5px);
  transition: all 0.3s ease; 
  transform: scale(1);
  /* transform: rotate(45deg); */
  box-shadow:10px 10px 10px 5px rgba(255, 255, 255, 0.508);
   /* border-radius:200px 0px 200px 0px;  */
} 

/* nav li:hover{

} */

.li-burger-btn{overflow:hidden;border-color:transparent;background-color:transparent;font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;width:7em;height:5em;}

.li-btn {
  /* margin-bottom:1em; */
  overflow:hidden; 
  /* color:rgb(253, 255, 124); */
  color:rgb(255, 255, 255);
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  /* font-weight:bold;font-size:4em; */
  /* border:4px groove #22a2b38c; */
  border:5px groove #ffffff;
  border-radius:10%;
  box-shadow: 0px 0px 20px 20px rgb(0, 0, 0);
  /* width:128px;
  height:128px; */
  width:128px;
  height:128px;
  /* width:4.6em;
  height:4.6em; */
}

.li-btn:hover {
  transform: scale(1);
  /* transform: rotate(45deg) scale(0.8); */
  overflow:hidden; 
  color:white;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  /* font-weight:bold;font-size:4em; */
  border:3px groove #ffffff8c;
  margin:0;
  padding:0;
  border-radius:10%;
  box-shadow:0px 0px 35px 35px rgba(0, 0, 0, 0.9);

}

nav li img{
  /* margin-top:-5px; */
  width:128px;
  height:auto;

}

.btn-nav {
  background-color: rgb(0, 0, 0) ;
  color: var(--xc-dark);
  font-size: 0.4em;
  border: none;
  /* margin:auto; */
  padding-left:0.4em;
  padding-right:0.4em;
  cursor: pointer;
  text-align:center;
  align-items:center;
  display:flex;
  position:relative;
  top:0;
  transition: background-color 0.3s ease;
}


.navactive{
   font-weight:bold;
   filter: grayscale(1);
  /* border:4px solid rgba(255, 255, 255, 0.508); */
  /* box-shadow:5px 5px 0px 0px rgba(255, 255, 255, 0.508); */
  /* background:rgb(206, 201, 200); */
  opacity:50%;
  /* border:5px groove white;
  border-radius:50%; */
}


.navpic {
    padding:0;
    margin:0;
    width: auto;
    height: auto;
    /* background-color: lightblue; */
    background-color:black;
    position: relative; /* Damit die Positionierung funktioniert */
    display:flex;
    justify-content:center;
    box-shadow:10px 10px 10px 5px black;
}

.tooltip {
  transition:0.2s;
  display: none; 
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight:lighter;
  position: absolute;
  background-color: transparent;
  color:rgb(245, 214, 77);
  /* border: 1px solid #333; */
  padding: 5px;
  z-index:1; 
  pointer-events: none; 
  /* user-select: none; */
  text-align:center;
  text-shadow:-2px -2px 5px rgb(0, 0, 0);
  font-size:2.3em;
}

.hideIn {
  background-color: green; /* Beispiel */
}

.hideOut {
  background-color: red; /* Beispiel */
}




#navigation{
  /* border:10px solid #f8f8f88c; */
  /* transform:scale(2); */
  border:0px solid transparent;
  position:fixed;
  margin-left:0;
  margin-top:0;
  top:0px;
  min-width:378px;
  max-width:var(--elemshowpage);
    /* width:fit-content; */
  padding:2em;
  /* height:auto;
  width:auto; */
  display:none;
  flex-wrap:wrap;
  z-index:998;

 
  background-color:transparent;
}

.sticky-nav{position:sticky;
  top:-2px;
  border:10px solid #f8f8f88c;
  background-color:rgba(255, 255, 255, 0.5);
 /* background-image:url('../img/gallerie/Labyrinth.jpg');
 background-size:contain; */
 color:white;
 /* padding:10px; */
 transition: top 0.3 ease-in-out;
}


.full-link {
  display: block; /* Block-Element, damit es die gesamte li-Fläche einnimmt */
  width: 100%;
  height: 100%;
  text-decoration: none; /* Entferne den Unterstrich des Links */
}

/* .li-btn:hover, .li-btn:hover .full-link {

  background-color: #f0f0f0; /* Beispiel für einen Hover-Effekt */


.full-link img {
  width: 100%;
  height: auto; /* Das Bild passt sich an die Größe an */
}

.comment{
  width:100%;
  min-height:fit-content;
 
  display:flex;
  justify-content:center;
  background-color:rgba(0, 191, 255, 0.555);
  color:var(--xc-darkpink);
  height:300px;
  top:0;
  position:fixed;
  /* z-index:0; */
  box-shadow:0px 0px 10px 15px rgba(7, 0, 0, 0.842);
}


/* 
a img:hover{
  transition: all 0.3s ease; 
  transform: scale(1.2);
  color:rgb(255, 255, 255);
  box-shadow:10px 10px 10px 5px rgba(255, 255, 255, 0.508);
} */

.schimmer{
  background-color:rgba(255, 255, 255, 0.555);
}
.container,
.container-fluid
{
  --xc-gutter-x: 1.5rem;
  --xc-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--xc-gutter-x) * 0.5);
  padding-left: calc(var(--xc-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

.info-card {
  
    width:100%;
    padding: 0.3em;
    margin-bottom:0.2em;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background-color: #ffffff; */
    font-family: Arial, sans-serif;
    color: #333333;
}
.change-card {
  width:100%;
  padding: 0.3em;
  margin-bottom:0.2em;
  border-radius: 0.5em;
  border:2px solid var(--xc-blue);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  color: #333333;
}

.move-card {
  overflow:hidden;
  /* width:100%; */
  padding: 0.3em;
  margin-bottom:0.2em;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* background-color: #ffffff; */
  font-family: Arial, sans-serif;
  color: #333333;
  transition: transform 0.3s ease;
}

.info-card-no {
  width:100%;
  padding: 0.3em;
  /*margin: 0.8em; */
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* background-color: #ffffff; */
  font-family: Arial, sans-serif;
  color: #333333;
  /* transition: transform 0.3s ease; */
}


.move-card:hover {
    transform: translateY(-5px);
}

.info-card .info-btn {
    display:inline-block;

    background-color: #007bff;

    text-decoration: none;
    border-radius: 4px;
}

.danger-card .danger-btn {
  display:inline-block;
  color:white;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 4px;
}

.btn,.card{
     min-width:auto;
    height:auto;
    padding:1em;
    border-radius:15px;
    border:3px solid black;
}

@media (min-width: 500px) {
  .btn, .card {
    min-width:auto;
  }
}

.fbtn,.fcard{
  width:fit-content;
  height:auto;
  padding:0.2em;
  background-color:tomato;
  color:white;
  border-radius:5px;
  border:3px solid rgb(208, 131, 131);
}

a.profil:hover{
  filter: invert(1);
  transition:0.1s;
  /* background-color:var(--xc-blue);
  color:rgb(0, 255, 191); */
}

.bg-primary{
    background-color:var(--xc-primary);
}
.bg-secondary{
    background-color:var(--xc-secondary);
}

.form-control{
    width:20em;
    margin: 0.2em;
    padding:0.5em;
    font-family: trebuchet,arial,monospace;
    font-size: inherit;
    line-height: inherit;
  }

.plz{
    width:5em;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

.profilHover:hover{
  transition:0.3s;
transform:scale(1.1);
}


.btn-primary {
  background-color:cadetblue ;
  color: #fff;
  font-size: 18px;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.btn-primary:hover {
  background-color: var(--xc-blue); /* Farbe ändern beim Hover */
  color: #f1f1f1; /* Textfarbe ändern */
}
.btn-shadowed {
  background-color: var(--xc-teal);
  font-size:1em;
  width:fit-content;
  height:auto;
  padding: 10px 20px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 14px  14px 0 0  rgba(0, 0, 0, 0.6);
}

/* Hover-Effekt */
.btn-shadowed:hover {
  background-color: green; /* Farbe ändern beim Hover */
  color: #f1f1f1; /* Textfarbe ändern */
}

.btn-orange-shadowed {
  background-color: var(--xc-yellow);
  font-size:1em;
  width:fit-content;
  height:auto;
  padding: 10px 20px;
  color: #020000;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 14px  14px 0 0  rgba(0, 0, 0, 0.6);
}

/* Hover-Effekt für orange button*/
.btn-orange-shadowed:hover {
  background-color: var(--xc-primary) ;
  color: #ffffff; 
}

.btn-success {
  background-color: var(--xc-teal);
  font-size:1em;
  width:fit-content;
  height:auto;
  padding: 10px 20px;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.3s ease;

}

/* Hover-Effekt */
.btn-success:hover {
  background-color: green; /* Farbe ändern beim Hover */
  /* border-color:white; */
  /* border:none; */
  padding: 10px 20px;
  color: #f1f1f1; /* Textfarbe ändern */
}

.btn-change {
  background-color: var(--xc-yellow);
  color: #000000;
  font-size: 18px;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.btn-change:hover {
  background-color: var(--xc-orange); /* Farbe ändern beim Hover */
  color: #ffffff; /* Textfarbe ändern */
}

.btn-redto {
  background-color: tomato;
  color: #ffffff;
  font-size: 1em;
  border:4px solid red;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.btn-redto:hover {
  background-color: greenyellow; /* Farbe ändern beim Hover */
  border:4px solid green;
  color:black;
}

.btn-greento {
  background-color: greenyellow; /* Farbe ändern beim Hover */
  color:black;
  font-size: 1em;
  border:4px solid green;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.btn-greento:hover {

  background-color: tomato;
  color: #ffffff;
  border:4px solid red;

}


.btn-delete {
  background-color: var(--xc-pink);
  color: #fff;
  font-size: 18px;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover-Effekt */
.btn-delete:hover {
  background-color: var(--xc-darkpink); /* Farbe ändern beim Hover */
  color: #ffffff; /* Textfarbe ändern */
}

button:hover{
background-color:#20c997;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}

  pre {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    font-size: 0.875em;
  }
  pre code {
    font-size: inherit;
    color: inherit;
    word-break: normal;
  }

  figure {
    margin: 0 0 1rem;
  }
  
  table {
    caption-side: bottom;
    border-collapse: collapse;
  }
  
  caption {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: var(--xc-secondary-color);
    text-align: left;
  }
  
  th {
    text-align: inherit;
 
  }
  
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  
  label {
    font-family: trebuchet,arial,monospace;
    display: inline-block;
  }

  input,
  select,
  optgroup,
  textarea {

    width:100%;
    margin: 0.2em;
    padding:0.5em;
    font-family: trebuchet,arial,monospace;
    font-size: inherit;
    line-height: inherit;
    box-shadow:0px 5px 5px 5px rgba(0, 0, 0, 0.479);
  }
   
  select {
    word-wrap: normal;
  }
  select:disabled {
    opacity: 1;
  }
  
  /*
++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#overlay {
	position:fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	/* background-color: rgba(0,0,0,0.85); */
  background: url(../images/stall_car1.jpg) no-repeat center center fixed;
	background-repeat: no-repeat;
	background-size: cover;

	animation: myAnimation 1.5s; 
}

@keyframes myAnimation {
	0% {opacity: 0;}
	100% {opacity: 1;}
} 

.overlay-content {
	max-width: 80%;
	max-height: 80%;
	margin: 10% auto;
	display: block;
}
 
.image-container {
  display: flex;
  justify-content: center; 
  align-items: center;   
  
}

img {
  max-width: 100%;
  height: auto;
}


/* 41.875em */

.hi{
  background-color:deepskyblue;
  color:white;
  
}

.videotab{
cursor: pointer;
  position: relative;


  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: .5em .5em .5em .7em;
  font-size: 100%;

  border-top-right-radius: 3px;
  /* max-width:375px; */
  border-top-left-radius: 3px;
 border: 1px solid #003eff;
  background: #007fff;
    background-color: rgb(0, 127, 255);
  font-weight: normal;
  color: #ffffff;
 border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}
h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
h3 {
  background: tomato;
  width: 100%;
  text-align: center;
  color: black;
  font-family: Trebuchet MS,monospace;
  font-size: 3em;
}

#kino{
  background-color:black;
}
  #vid{
    display:flex;
    height:auto;

  }
    .video {
            margin-bottom: 10px;
            background-color:black;
        }
        .video h3 {
            cursor: pointer;
            background-color: yellow; /* Standardfarbe für den Header */
            color: black; /* Textfarbe für den Header */
            padding: 10px;
        }
        .video h3.ui-accordion-header-active {
            background-color: orange; /* Farbe für den aktiven Header */
            color: white; /* Textfarbe für den aktiven Header */
        }
        .video h3:hover {
            background-color: deepskyblue; /* Hover-Farbe für den Header */
        }
#ausgabe{
  display:block;
  width:fit-content;
}

/* .header{
  position:relative;
  top:0px;
  left:0px;

  display:block;
  width:100%;
} */






#bitcoin{
width:80px;
height:80px;
transition:0.2s;
}
/* #bitcoin:focus{
transform:scale(1);
background-color:#ffffff81;
transition:0.1s;
} */
#bitcoin:hover, #bitcoin:focus {
cursor:pointer;
border-radius:50%;
background-color: black;
border:5px solid rgb(255, 255, 255);
transform:scale(1.6);
transition:0.1s;
}


#bitinfo{
display:flex;
height:auto;
width:auto;
padding:0;
margin:0;
}

#cannainfo1{
width:auto;
height:fit-content;
}
#cannainfo2{
width:auto;
height:fit-content;
}
p.klappe1:hover{
transition:0.2s;
scale:1.3;
}

.thumb1, .thumb2{
      /* width: 300px;
      height: 200px; */
      width:100%;
      height:auto;
      border: 1px solid #000;
      justify-content:center;
      display: block;
      background-size: cover; /* Background image should cover the entire element */
    transition:0.2s;
    }

/* @media all and (max-width:1200px){

} */
@media all and (max-width:1200px){


.spundloch{
--col:100%;
--pixelwert:10px;
padding-top:var(--pixelwert);
margin-left:var(--pixelwert);
margin-right:var(--pixelwert);

width:var(--col);
}
#mess{
  background-color:#007bff;
}

#message{
width:34em;
}
.themos{
    display:inline-block;
    min-width:375px;
    margin:0;
    text-align:left;
    padding-left:1em;
    padding-bottom:1em;
    padding-right:1em;
    padding-top:0.5em;
    hyphens: auto; /* Standard */
    -webkit-hyphens: auto; /* Safari und ältere Chrome-Versionen */
    -moz-hyphens: auto; /* Firefox */
    font-family:trebuchet MS,monospace;
    line-height:1.3em;
    font-size:1em;
}

.themos2{
    display:block;
    max-width:375px;
    width:auto;;
    margin:0;
    text-align:left;
    padding:1em;
    hyphens: auto; /* Standard */
    -webkit-hyphens: auto; /* Safari und ältere Chrome-Versionen */
    -moz-hyphens: auto; /* Firefox */
    font-family:trebuchet MS,monospace;
    line-height:1.3em;
    font-size:1em;
}


}
@media all and (max-width:820px){

.spundloch{

--col:100%;
--pixelwert:10px;
padding-top:var(--pixelwert);
margin-left:var(--pixelwert);
margin-right:var(--pixelwert);


width:var(--col);
}
#message{
width:34em;
}
.themos{
      display:inline-block;
      min-width:375px;
      margin:0;
      text-align:left;
      padding-left:1em;
      padding-bottom:1em;
      padding-right:1em;
      padding-top:0.5em;
      hyphens: auto; /* Standard */
      -webkit-hyphens: auto; /* Safari und ältere Chrome-Versionen */
      -moz-hyphens: auto; /* Firefox */
      font-family:trebuchet MS,monospace;
      line-height:1.3em;
      font-size:1em;
}

.themos2{
      display:block;
      max-width:375px;
      width:auto;;
      margin:0;
      text-align:left;
      padding:1em;
      hyphens: auto; /* Standard */
-webkit-hyphens: auto; /* Safari und ältere Chrome-Versionen */
-moz-hyphens: auto; /* Firefox */
      font-family:trebuchet MS,monospace;
      line-height:1.3em;
      font-size:1em;
}



} 
/* @media all and (max-width:450px){

iframe{
height:20em;
width:10em;
position:absolute;
margin-bottom:5em;
top:-1em;
left:15em;

}

#message{
width:24em;
}
.containerform {
background-color:var(--color3);
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
min-width:379px;
width:auto;
}

}
#fabrik{
height:fit-content;
} */