:root {
  --feuerrot: #e94653;
  --feuergelb: #fecf16;
  --wasserblau: #00b0eb;
  --luftgrau: #cdd1ca;
  --blau: #004287;
  --erdbraun: #603609;
  --woelis: #ed3422;
  --jupfis: #5cbd00;
  --pfadfinder: #00834d;
  --rangerrover: #701a32;
  --erwachsen: #4f2778;
}

	  @font-face {
  font-family: 'Roboto Slab';
  src: url('../Fonts/roboto-slab/RobotoSlab-Light.eot');
  src: url('../Fonts/roboto-slab/RobotoSlab-Light.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-slab/RobotoSlab-Light.woff2') format('woff2'), url('../Fonts/roboto-slab/RobotoSlab-Light.woff') format('woff'), url('../Fonts/roboto-slab/RobotoSlab-Light.ttf') format('truetype'), url('../Fonts/roboto-slab/RobotoSlab-Light.svg#RobotoSlab-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Slab';
  src: url('../Fonts/roboto-slab/RobotoSlab-Regular.eot');
  src: url('../Fonts/roboto-slab/RobotoSlab-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-slab/RobotoSlab-Regular.woff2') format('woff2'), url('../Fonts/roboto-slab/RobotoSlab-Regular.woff') format('woff'), url('../Fonts/roboto-slab/RobotoSlab-Regular.ttf') format('truetype'), url('../Fonts/roboto-slab/RobotoSlab-Regular.svg#RobotoSlab-Regular') format('svg');
  font-weight: normal;
  font-style: normal;  
}
@font-face {
  font-family: 'Roboto Slab';
  src: url('../Fonts/roboto-slab/RobotoSlab-Thin.eot');
  src: url('../Fonts/roboto-slab/RobotoSlab-Thin.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-slab/RobotoSlab-Thin.woff2') format('woff2'), url('../Fonts/roboto-slab/RobotoSlab-Thin.woff') format('woff'), url('../Fonts/roboto-slab/RobotoSlab-Thin.ttf') format('truetype'), url('../Fonts/roboto-slab/RobotoSlab-Thin.svg#RobotoSlab-Thin') format('svg');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Slab';
  src: url('../Fonts/roboto-slab/RobotoSlab-Bold.eot');
  src: url('../Fonts/roboto-slab/RobotoSlab-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-slab/RobotoSlab-Bold.woff2') format('woff2'), url('../Fonts/roboto-slab/RobotoSlab-Bold.woff') format('woff'), url('../Fonts/roboto-slab/RobotoSlab-Bold.ttf') format('truetype'), url('../Fonts/roboto-slab/RobotoSlab-Bold.svg#RobotoSlab-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/roboto/Roboto-Bold.eot');
  src: url('../Fonts/roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto/Roboto-Bold.woff2') format('woff2'), url('../Fonts/roboto/Roboto-Bold.woff') format('woff'), url('../Fonts/roboto/Roboto-Bold.ttf') format('truetype'), url('../Fonts/roboto/Roboto-Bold.svg#Roboto-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/roboto/Roboto-Light.eot');
  src: url('../Fonts/roboto/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto/Roboto-Light.woff2') format('woff2'), url('../Fonts/roboto/Roboto-Light.woff') format('woff'), url('../Fonts/roboto/Roboto-Light.ttf') format('truetype'), url('../Fonts/roboto/Roboto-Light.svg#Roboto-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../Fonts/roboto/Roboto-Regular.eot');
  src: url('../Fonts/roboto/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto/Roboto-Regular.woff2') format('woff2'), url('../Fonts/roboto/Roboto-Regular.woff') format('woff'), url('../Fonts/roboto/Roboto-Regular.ttf') format('truetype'), url('../Fonts/roboto/Roboto-Regular.svg#Roboto-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-Bold.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-Bold.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-Bold.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-Bold.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-Bold.svg#RobotoCondensed-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-Regular.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-Regular.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-Regular.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-Regular.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-Regular.svg#RobotoCondensed-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-LightItalic.svg#RobotoCondensed-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-BoldItalic.svg#RobotoCondensed-BoldItalic') format('svg');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-Italic.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-Italic.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-Italic.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-Italic.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-Italic.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-Italic.svg#RobotoCondensed-Italic') format('svg');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('../Fonts/roboto-cond/RobotoCondensed-Light.eot');
  src: url('../Fonts/roboto-cond/RobotoCondensed-Light.eot?#iefix') format('embedded-opentype'), url('../Fonts/roboto-cond/RobotoCondensed-Light.woff2') format('woff2'), url('../Fonts/roboto-cond/RobotoCondensed-Light.woff') format('woff'), url('../Fonts/roboto-cond/RobotoCondensed-Light.ttf') format('truetype'), url('../Fonts/roboto-cond/RobotoCondensed-Light.svg#RobotoCondensed-Light') format('svg');
  font-weight: 300;
  font-style: normal;
}


body {
	font-family: "Roboto";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.login-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

input[type="text"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.pin-container {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.pin img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: var(--feuerrot);
    color: #fff;
    cursor: pointer;
}

button:hover {
    background: var(--feuergelb);;
}

.icon-popup {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon {
    display: inline-block;
    margin: 5px;
}

.icon img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

	  
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes grow {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes fade-in-out {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.wiggle {
  animation: shake 0.5s ease-in-out 3, grow 0.5s ease-in-out 3;
  position: relative;
}

.wiggle::after {
  content: 'Drück mich!';
  font-size: 0.8rem;
  color: var(--feuerrot);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  animation: fade-in-out 2s ease-in-out;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: var(--feuergelb);
  border-radius: 50%;
  opacity: 0;
  animation: particleAnimation 1s ease-out forwards;
}

@keyframes particleAnimation {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: translate(50px, -50px) scale(0); opacity: 0; }
}
	  
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: visible;
    background-color: var(--feuergelb);
    color: black;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.arrow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid var(--feuergelb);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.tooltip-container.show .tooltip-text,
.tooltip-container.show .arrow {
    opacity: 0;
}