html {
  --lumo-border-radius: 0.75em;
  --lumo-primary-text-color: rgb(73, 168, 168);
  --lumo-primary-color-50pct: rgba(73, 168, 168, 0.5);
  --lumo-primary-color-10pct: rgba(73, 168, 168, 0.1);
  --lumo-primary-color: #49a8a8;
	
	/*
--lumo-border-radius: 0.75em;
  --lumo-primary-text-color: rgb(114, 22, 243);
  --lumo-primary-color-50pct: rgba(114, 22, 243, 0.5);
  --lumo-primary-color-10pct: rgba(114, 22, 243, 0.1);
  --lumo-error-text-color: rgb(255, 56, 103);
  --lumo-error-color-50pct: rgba(255, 56, 103, 0.5);
  --lumo-error-color-10pct: rgba(255, 56, 103, 0.1);
  --lumo-success-text-color: rgb(20, 184, 143);
  --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
  --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);
  --lumo-primary-color: hsl(265, 90%, 52%);
  --lumo-error-color: hsl(346, 100%, 61%);
  --lumo-success-color: hsl(165, 80%, 40%);
  --lumo-header-text-color: hsl(285, 35%, 15%);
  --lumo-body-text-color: hsla(285, 40%, 16%, 0.94);
  --lumo-secondary-text-color: hsla(285, 42%, 18%, 0.72);
  --lumo-tertiary-text-color: hsla(285, 45%, 20%, 0.5);
  --lumo-disabled-text-color: hsla(285, 50%, 22%, 0.26);
  --lumo-base-color: #ffffff;
  */
}

[theme~="dark"] {
/*
  --lumo-tint-5pct: rgba(252, 245, 255, 0.05);
  --lumo-tint-10pct: rgba(252, 245, 255, 0.1);
  --lumo-tint-20pct: rgba(252, 245, 255, 0.2);
  --lumo-tint-30pct: rgba(252, 245, 255, 0.3);
  --lumo-tint-40pct: rgba(252, 245, 255, 0.4);
  --lumo-tint-50pct: rgba(252, 245, 255, 0.5);
  --lumo-tint-60pct: rgba(252, 245, 255, 0.6);
  --lumo-tint-70pct: rgba(252, 245, 255, 0.7);
  --lumo-tint-80pct: rgba(252, 245, 255, 0.8);
  --lumo-tint-90pct: rgba(252, 245, 255, 0.9);
  --lumo-shade-5pct: rgba(7, 6, 15, 0.05);
  --lumo-shade-10pct: rgba(7, 6, 15, 0.1);
  --lumo-shade-20pct: rgba(7, 6, 15, 0.2);
  --lumo-shade-30pct: rgba(7, 6, 15, 0.3);
  --lumo-shade-40pct: rgba(7, 6, 15, 0.4);
  --lumo-shade-50pct: rgba(7, 6, 15, 0.5);
  --lumo-shade-60pct: rgba(7, 6, 15, 0.6);
  --lumo-shade-70pct: rgba(7, 6, 15, 0.7);
  --lumo-shade-80pct: rgba(7, 6, 15, 0.8);
  --lumo-shade-90pct: rgba(7, 6, 15, 0.9);
  --lumo-primary-text-color: rgb(124, 42, 239);
  --lumo-primary-color-50pct: rgba(124, 42, 239, 0.5);
  --lumo-primary-color-10pct: rgba(124, 42, 239, 0.1);
  --lumo-error-text-color: rgb(255, 56, 103);
  --lumo-error-color-50pct: rgba(255, 56, 103, 0.5);
  --lumo-error-color-10pct: rgba(255, 56, 103, 0.1);
  --lumo-success-text-color: rgb(20, 184, 143);
  --lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
  --lumo-success-color-10pct: rgba(20, 184, 143, 0.1);
  --lumo-base-color: hsl(255, 35%, 23%);
  --lumo-tint: hsl(285, 100%, 98%);
  --lumo-shade: hsl(249, 46%, 4%);
  --lumo-primary-color: hsl(265, 86%, 55%);
  --lumo-error-color: hsl(346, 100%, 61%);
  --lumo-success-color: hsl(165, 80%, 40%);
  --lumo-header-text-color: hsl(285, 100%, 98%);
  --lumo-body-text-color: hsla(285, 96%, 96%, 0.9);
  --lumo-secondary-text-color: hsla(285, 87%, 92%, 0.7);
  --lumo-tertiary-text-color: hsla(285, 78%, 88%, 0.5);
  --lumo-disabled-text-color: hsla(285, 69%, 84%, 0.32);
  */
}
		
		
		/* Wenn größer 800px */
		.itemSpielfeld{
			/*width: 100% !important;  NICHT 90*/
			width: 120px !important;
			
		}
		/* Wenn kleiner 800px */
		@media screen and (max-width: 800px){
			.itemSpielfeld{
				/*width: 100% !important;*/
				width: 25% !important;
			}
		}
		
		
		.item{
			/*width: 100% !important;*/
			width: 100px !important;
			
		}
		/* Wenn kleiner 800px */
		@media screen and (max-width: 800px){
			.item{
				/*width: 25% !important;*/
				/*hight: 100% !important;*/
			}
		}
		
		.my-header {
			color: white;
			text-align: center;
			background-color: var(--my-custom-color1);
			/*text-transform: uppercase;*/
			line-height: var(--my-custom-line-height);
		}
		.my-header > :first-child {
			/*margin-left: var(--lumo-space-m);*/
		}
		.my-menubar {
			color: white;
			background-color: var(--my-custom-color2);
		}

		
.backgroundimage {
     	 	/*background: url("./images/NinaFelixHochzeitsreportageMaxLewe.jpg");*/
     	 	/*Es müsste auch mit frontend in der url gehen, s. Video:
     	 	https://www.youtube.com/watch?v=FioYrop8yl4 bei 19 min */
     	 	background-image: url("./images/alpenSee.jpg");
      		/* Full height */
    		height: 100%; 
      		/* Center and scale the image nicely */
    		background-position: center;
    		background-repeat: no-repeat;
    		background-size: cover;
    		/*background-color: var(--my-custom-color1);*/
    	}
  
  
  .backgroundimageCard {
     	 	/*background: url("./images/NinaFelixHochzeitsreportageMaxLewe.jpg");*/
     	 	/*Es müsste auch mit frontend in der url gehen, s. Video:
     	 	https://www.youtube.com/watch?v=FioYrop8yl4 bei 19 min */
     	 	background-image: url("./images/10D.svg");
      		/* Full height */
    		height: 80%; 
    		/*width: 80%;*/
      		/* Center and scale the image nicely */
    		background-position: center;
    		background-repeat: no-repeat;
    		background-size: contain;
    		/*background-color: var(--my-custom-color1);*/
    	}
    	
  .loginFormHintergrund{
  	  		background-color: white;
  }
  
  .logoImage {
     	 	/*background: url("./images/logo-transparent.png");*/
     	 	background-image: url("./images/logoUser.png");
     	 	background-size: 220px;
      		/* Full height */
    		/*height: 100%;*/
    		/*width: 220px;*/ 
      		/* Center and scale the image nicely */
    		background-position: center;
    		background-repeat: no-repeat;
    		/*background-size: cover;*/
    		/*background-color: var(--my-custom-color1);*/
    	}
    	
.schriftGross {
     	 font-weight: bold;
     	 font-size: 18px;
 }
    	
.schriftFett {
     	 font-weight: bold;
 }
 
 .schriftMittig{
 	   text-align: center;
 }
 
 .schriftKlein{
 	font-weight: bold;
    font-size: 8px;
    text-align: center;
 }