@font-face {
    font-family: 'GenosGFG';
    src: url('../fonts/GenosGFG-Regular.eot');
    src: url('../fonts/GenosGFG-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GenosGFG-Regular.woff2') format('woff2'),
         url('../fonts/GenosGFG-Regular.woff') format('woff'),
         url('../fonts/GenosGFG-Regular.ttf') format('truetype'),
         url('../fonts/GenosGFG-Regular.svg#GenosGFG-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'GenosGFG';
    src: url('../fonts/GenosGFG-RegularItalic.eot');
    src: url('../fonts/GenosGFG-RegularItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GenosGFG-RegularItalic.woff2') format('woff2'),
         url('../fonts/GenosGFG-RegularItalic.woff') format('woff'),
         url('../fonts/GenosGFG-RegularItalic.ttf') format('truetype'),
         url('../fonts/GenosGFG-RegularItalic.svg#GenosGFG-RegularItalic') format('svg');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'GenosGFG';
    src: url('../fonts/GenosGFG-Bold.eot');
    src: url('../fonts/GenosGFG-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GenosGFG-Bold.woff2') format('woff2'),
         url('../fonts/GenosGFG-Bold.woff') format('woff'),
         url('../fonts/GenosGFG-Bold.ttf') format('truetype'),
         url('../fonts/GenosGFG-Bold.svg#GenosGFG-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'GenosGFG';
    src: url('../fonts/GenosGFG-BoldItalic.eot');
    src: url('../fonts/GenosGFG-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GenosGFG-BoldItalic.woff2') format('woff2'),
         url('../fonts/GenosGFG-BoldItalic.woff') format('woff'),
         url('../fonts/GenosGFG-BoldItalic.ttf') format('truetype'),
         url('../fonts/GenosGFG-BoldItalic.svg#GenosGFG-BoldItalic') format('svg');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

.font-genosgfg {
    font-family: 'GenosGFG', sans-serif;
}


.ripple-button {
    position: relative;
    overflow: hidden;
}

.ripple-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 102, 179, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-button:active::before {
    width: 300px;
    height: 300px;
}

.ripple-button:focus::before {
    width: 200px;
    height: 200px;
    background: rgba(0, 102, 179, 0.15);
}

.pin-vergessen-button {
    position: relative;
    overflow: hidden;
}

.pin-vergessen-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: rgba(0, 102, 179, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.pin-vergessen-button:active::after {
    transform: translate(-50%, -50%) scale(3);
    opacity: 1;
    transition: transform 0.6s ease-out, opacity 0.1s ease-out;
    animation: ripple-fade 0.6s ease-out forwards;
}

.pin-vergessen-button:focus::after {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.6;
    transition: transform 0.4s ease-out, opacity 0.2s ease-out;
}

.abbrechen-button {
    position: relative;
    overflow: hidden;
}

.abbrechen-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background: rgba(0, 102, 179, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.abbrechen-button:active::after {
    animation: ripple-fade-outline 0.7s ease-out forwards;
}

.abbrechen-button:focus::after {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0.4;
    transition: transform 0.4s ease-out, opacity 0.2s ease-out;
}

.anmelden-button {
    position: relative;
    overflow: hidden;
}

.anmelden-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.anmelden-button:active::after {
    animation: ripple-fade-filled 0.7s ease-out forwards;
}

.anmelden-button:focus::after {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0.5;
    transition: transform 0.4s ease-out, opacity 0.2s ease-out;
}

@keyframes ripple-fade {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

@keyframes ripple-fade-outline {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

@keyframes ripple-fade-filled {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}