:root{--primary-color: #3d8a5e;--secondary-color: #ff6378;--primary-text-color: white;--hover-color: #23593b;--hover-color-secondary: darkred;--border-radius: 8px;--font-size-m: 18px;--font-family: "Arial", sans-serif;--space-m: 20px}.test-pattern{margin:0;height:100vh;background-color:#f5f5f5;background-image:radial-gradient(circle at 0 0,var(--primary-color) 15%,transparent 16%),radial-gradient(circle at 8px 8px,var(--primary-color) 15%,transparent 16%);background-size:16px 16px}.white-outline{color:#000;text-shadow:-1px -1px 0 white,1px -1px 0 white,-1px 1px 0 white,1px 1px 0 white}.logo-container{position:absolute;left:50%;transform:translate(-50%)}.bold-text{font-weight:700!important}.wide-input{width:300px;max-width:100%;box-sizing:border-box}.short-input{width:250px!important}.trennlinie-mobil{background-color:#6464644d;height:2px;width:100%;border:none;transform-origin:center;transform:scaleX(0);animation:expandLine 2s ease-in-out forwards;display:none}.trennlinie{background-color:#6464644d;height:2px;width:100%;border:none;transform-origin:center;transform:scaleX(0);animation:expandLine 2s ease-in-out forwards}.trennlinie-slow{background-color:#6464644d;height:2px;width:100%;border:none;transform-origin:center;transform:scaleX(0);animation:expandLine 2s ease-in-out forwards;animation-delay:.5s}@keyframes expandLine{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.red-button{background-color:var(--secondary-color)!important}.red-button:hover{background-color:var(--hover-color-secondary)!important}.green-button{background-color:var(--primary-color)!important}.green-button:hover{background-color:var(--hover-color)!important}.hover-scale-button:hover{transform:scale(1.1)}h1{margin:25px auto 0;text-align:center;font-size:clamp(24px,5vw,32px)}h2{margin:20px auto 0;text-align:center;font-size:clamp(20px,5vw,28px)}vaadin-accordion-panel p{margin:0!important;padding:0!important}.centered-content{margin:0 auto;max-width:250px}@keyframes fadeInUpwards{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.image-gallery{width:500px;height:300px;object-fit:cover;transition:opacity .5s ease-in-out}.carousel-button{background:#00000080;color:var(--primary-text-color);border:none;border-radius:50%;font-size:30px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);z-index:10;transition:background .3s ease-in-out}.carousel-button:hover{background:#000000b3}.prev-button{left:10px}.next-button{right:10px}.image-gallery-container{position:relative;display:flex;align-items:center;justify-content:center}.navbar{background:var(--primary-color);height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 10px #00000026;position:fixed;width:100%;top:0;left:0;z-index:1000}body{padding-top:70px;font-family:var(--font-family)}.nav-links{display:flex;gap:20px}.nav-links a{color:var(--primary-text-color);font-weight:700;text-decoration:none;padding:12px 18px;border-radius:var(--border-radius);transition:background .3s ease-in-out,transform .2s}.nav-links a:hover{background:#ffffff40;transform:scale(1.05)}.kartell-link-bavaria{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-bavaria:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(10deg);background:repeating-linear-gradient(to right,#9cf 0,#9cf 33%,#fff 33%,#fff 66%,#036 66%,#036);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-bavaria:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-makaria{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-makaria:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(-8deg);background:repeating-linear-gradient(to right,#a30000 0,#a30000 33%,#fff 33%,#fff 66%,#000 66%,#000);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-makaria:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-athesia{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-athesia:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(8deg);background:repeating-linear-gradient(to right,#87ceeb 0,#87ceeb 33%,#fff 33%,#fff 66%,#000 66%,#000);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-athesia:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-joannea{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-joannea:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(-8deg);background:repeating-linear-gradient(to right,#007a33 0,#007a33 33%,gold 33%,gold 66%,#c90d00 66%,#c90d00);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-joannea:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-schacht{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-schacht:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(8deg);background:repeating-linear-gradient(to right,#000 0,#000 33%,#030 33%,#030 66%,gold 66%,gold);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-schacht:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-borussia{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-borussia:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(7deg);background:repeating-linear-gradient(to right,#000 0,#000 50%,#fff 50%,#fff);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-borussia:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.kartell-link-hubertia{position:relative;display:inline-block;font-weight:700;text-decoration:none;color:#003153;padding:4px 8px;z-index:0}.kartell-link-hubertia:before{content:"";position:absolute;top:50%;left:0;width:100%;height:1.2em;transform:translateY(-50%) rotate(-7deg);background:repeating-linear-gradient(to right,#006400 0,#006400 33%,gold 33%,gold 66%,#000 66%,#000);border-radius:5px;z-index:-1;opacity:.2;filter:blur(1px);transition:transform .3s ease,opacity .3s ease,height .3s ease}.kartell-link-hubertia:hover:before{transform:translateY(-50%) rotate(0) scale(1.05);opacity:.9;height:5em}.user-info{display:flex;align-items:center;gap:10px}#userStatus{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--primary-text-color);font-weight:700;text-transform:uppercase;padding:10px 5px;font-size:12px;border-radius:50px;background:#fff3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s ease-in-out,transform .2s}#userStatus:after{content:attr(data-full-name)}.user-icon{width:28px;height:28px;border-radius:50%;background:var(--primary-text-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.button{background:var(--primary-color);color:var(--primary-text-color);border:none;padding:10px 16px;border-radius:var(--border-radius);cursor:pointer;transition:background .3s ease-in-out,transform .2s;font-weight:700;font-size:16px}.button:hover{background:var(--hover-color);transform:scale(1.03)}.button:active{transform:scale(1.02);box-shadow:0 2px 5px #00000026}.login-button,.logout-button{transition:background .3s ease-in-out,transform .2s}.login-button:hover,.logout-button:hover{transform:scale(1.03);box-shadow:0 4px 10px #0003}.logout-button{box-shadow:0 4px 10px #0003;background:var(--primary-color)!important}.back-button{background:var(--primary-color);color:var(--primary-text-color);border-radius:var(--border-radius);padding:10px 16px;font-weight:700;font-size:var(--font-size-m);border:none;cursor:pointer;transition:background .3s ease-in-out,transform .2s}.back-button:hover{background:var(--hover-color);transform:scale(1.05)}vaadin-login-form::part(form) vaadin-button,vaadin-login-overlay-wrapper::part(form) vaadin-button{background:var(--primary-color);color:var(--primary-text-color);border-radius:var(--border-radius);font-weight:700;font-size:16px;cursor:pointer;transition:background .3s ease-in-out,transform .2s}vaadin-login-form::part(form) vaadin-button:hover,vaadin-login-overlay-wrapper::part(form) vaadin-button:hover{background:var(--hover-color);transform:scale(1.03)}@media (max-width: 768px){.navbar{height:50px;padding:0 15px}body{padding-top:60px}.nav-links{gap:10px}.nav-links a{padding:8px 12px;font-size:14px}.user-icon{width:24px;height:24px;font-size:12px}}vaadin-grid::part(header-cell){background-color:var(--primary-color);color:var(--primary-text-color);font-weight:700}vaadin-grid::part(header-cell sorted){background-color:var(--hover-color);color:var(--primary-text-color);font-weight:700}vaadin-button{background:var(--hover-color)!important;color:var(--primary-text-color)!important;border-radius:var(--border-radius);font-weight:700;font-size:16px;cursor:pointer;transition:background .3s ease-in-out,transform .2s}vaadin-button:hover{background:var(--hover-color)!important;color:var(--primary-text-color)!important}vaadin-button:active{transform:scale(1.02);box-shadow:0 2px 5px #00000026}vaadin-button a{color:var(--primary-text-color)!important;text-decoration:none!important}vaadin-button a:hover{color:var(--primary-text-color)!important;text-decoration:none!important}.login-box{width:400px;padding:20px;background:#fff;border-radius:var(--border-radius);box-shadow:2px 2px 10px #0000001a;display:flex;flex-direction:column;align-items:center}.logo{max-height:120px;width:auto;margin:60px auto 0;transition:filter .4s ease-in-out,transform .4s ease-in-out}.logo:hover{cursor:pointer;filter:brightness(1.1);transform:scale(1.05)}.navbar{position:fixed;top:0;left:0;width:100%;height:60px;background:var(--primary-color);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 4px 10px #00000026;z-index:1000}.nav-links,.user-info{display:flex;align-items:center}.background-image{position:fixed;top:0;left:0;width:100vw;height:100vh;background-size:cover;background-position:center;opacity:.075;z-index:-1;animation:fadeInBackground 10s ease-out forwards}vaadin-accordion-panel::part(content){font-size:20px;transition:height .5s ease-in-out,opacity .5s ease-in-out;overflow:hidden;height:0;opacity:0;display:block}vaadin-accordion-panel[opened]::part(content){font-size:20px;height:auto;opacity:1}vaadin-accordion-heading{color:var(--primary-color)!important;font-size:22px;font-weight:700}vaadin-accordion-panel[opened] vaadin-accordion-heading{color:var(--hover-color)!important;font-size:22px}vaadin-accordion-heading:hover{color:var(--secondary-color)!important;cursor:pointer}vaadin-accordion-panel p{margin:5px 0;padding:0}@keyframes fadeInUpwards{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.thumbnail{width:clamp(100px,15vw,250px);height:clamp(60px,10vw,150px);cursor:pointer;object-fit:cover;border-radius:5px}.thumbnail:hover{transform:scale(1.05);transition:transform .5s}.fade-in{opacity:0;transform:translateY(30px);animation:fadeInUpwards .8s ease-out forwards}.fade-in:nth-child(1){animation-delay:.2s}.fade-in:nth-child(2){animation-delay:.4s}.fade-in:nth-child(3){animation-delay:.6s}.fade-in:nth-child(4){animation-delay:.8s}.fade-in:nth-child(5){animation-delay:1s}.fade-in:nth-child(6){animation-delay:1.2s}.fade-in:nth-child(7){animation-delay:1.4s}.fade-in:nth-child(8){animation-delay:1.6s}.fade-in:nth-child(9){animation-delay:1.8s}.fade-in:nth-child(10){animation-delay:2s}.fade-in:nth-child(11){animation-delay:2.2s}.fade-in-no-delay-short{opacity:0;transform:translateY(30px);animation:fadeInUpwards .5s ease-out forwards}.fade-in-slow{opacity:0;transform:translateY(30px);animation:fadeInUpwards 1s ease-out forwards;animation-delay:.8s}.time-title{font-size:clamp(18px,5vw,22px)}.event-title{font-size:clamp(24px,5vw,28px);font-weight:700;color:var(--primary-color);margin-bottom:10px}.event-date{font-size:16px;font-weight:700;color:#07c;background:#0077cc1a;padding:5px 10px;border-radius:5px;display:inline-block}.event-row{display:grid;grid-template-columns:3fr 2fr 2fr 3fr;max-width:950px;width:100%;gap:10px;align-items:center;padding:10px;border-bottom:1px solid rgba(100,100,100,.3);opacity:0;transform:translateY(10px);animation:fadeInSlideUp .6s ease-out 1s forwards}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.event-cell{min-width:80px;text-align:center}.event-date{font-weight:700;color:#07c;background:#0077cc1a;border-radius:5px}.event-name{font-weight:700}.event-location{font-weight:700;color:var(--secondary-color)}.round-button{border-radius:50%;width:50px;height:50px;min-width:50px;min-height:50px;display:flex;align-items:center;justify-content:center;background-color:var(--primary-color);color:var(--primary-text-color);border:none;cursor:pointer;box-shadow:0 4px 10px #00000026;font-size:24px;transition:background-color .3s ease-in-out,transform .2s}.round-button:hover{transform:scale(1.1)}.round-button:active{transform:scale(1.05);box-shadow:0 2px 5px #00000026}@keyframes fadeInBackground{0%{opacity:0;transform:scale(1.1)}to{opacity:.2;transform:scale(1)}}.custom-select-box{background:var(--primary-color);color:var(--primary-text-color);border-radius:var(--border-radius);padding:10px;font-size:var(--font-size-m);font-weight:700;border:none;cursor:pointer;transition:background .3s ease-in-out,transform .2s;box-shadow:0 2px 10px #00000026}.nav-box:hover,.nav-box:focus{background:var(--hover-color);transform:scale(1.03);outline:none}.custom-menu vaadin-menu-bar{background:var(--primary-color);border-radius:var(--border-radius);font-size:16px;height:auto;font-weight:700;color:var(--primary-text-color)!important;cursor:pointer;transition:background .3s ease-in-out,transform .2s;box-shadow:0 4px 10px #0003;position:relative;z-index:2000}.custom-menu vaadin-menu-bar:hover{background:var(--hover-color);transform:scale(1.03);box-shadow:0 4px 10px #0003}.custom-menu vaadin-menu-bar-item{color:var(--primary-text-color)!important;font-weight:700;font-size:var(--font-size-m)}.custom-menu vaadin-menu-bar-button::part(content){color:var(--primary-color)!important}.custom-menu vaadin-context-menu-overlay::part(overlay){background:#fff;border-radius:var(--border-radius);box-shadow:0 2px 5px #00000026}.custom-menu vaadin-context-menu-item::part(content){color:var(--primary-color);font-weight:700;font-size:var(--font-size-m);padding:10px 16px;transition:background .3s ease-in-out;cursor:pointer}.custom-menu vaadin-menu-bar:hover{transform:scale(1.03);box-shadow:0 4px 10px #0003}.custom-menu vaadin-menu-bar:active{transform:scale(1.02);box-shadow:0 2px 5px #00000026}.custom-menu vaadin-context-menu-item::part(content):hover{background:var(--hover-color);color:var(--primary-text-color);box-shadow:0 4px 10px #0003}.responsive-gallery-image{display:block;max-width:90vw;max-height:80vh;width:auto;height:auto;object-fit:contain}.dialog-image-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.info-box{margin:20px auto 0;padding:20px;border:2px solid #ddd;border-radius:var(--border-radius);box-shadow:4px 4px 15px #00000026;background-color:#e6e6e666;max-width:500px;text-align:center}.info-box:hover{box-shadow:6px 6px 18px #0003}.info-title{font-size:clamp(20px,5vw,24px);font-weight:700;color:var(--primary-color);margin-bottom:10px}.info-text{font-size:var(--font-size-m);color:#333;line-height:1.5;margin-bottom:15px}.info-button{background:var(--primary-color);color:var(--primary-text-color);font-weight:700;padding:10px 15px;border-radius:var(--border-radius);border:none;cursor:pointer;transition:background .3s ease-in-out,transform .2s}.info-button:hover{background:var(--hover-color);transform:scale(1.05)}.info-button:active{transform:scale(1.02);box-shadow:0 2px 5px #00000026}@media (max-height: 420px){.responsive-gallery-image{max-height:60vh}.navbar{height:45px}.menu-button{font-size:20px}.logo{max-height:70px;margin:30px auto 0}.login-button,.logout-button{padding:5px 8px;font-size:12px}}.responsive-button-group{flex-wrap:wrap;gap:.5rem;justify-content:center;width:100%}.dialog-bottom-fade{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to top,rgba(0,0,0,.3),transparent);z-index:10;pointer-events:none}.gallery-dialog::part(overlay){background:#00000080!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:zoom-out;overflow:hidden!important;overscroll-behavior:none}.gallery-dialog::part(content){overflow:hidden!important;max-height:90vh;max-width:90vw;padding:0;background:transparent!important;box-shadow:none!important;border-radius:12px}@media (max-width: 780px){.responsive-card{max-width:95vw!important;padding:10px}.wide-input{width:100%;max-width:300px;box-sizing:border-box}vaadin-tabs{display:block;max-width:90vw;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}vaadin-tabs::-webkit-scrollbar{display:none}vaadin-tab{white-space:nowrap;flex:0 0 auto}.responsive-button-group>*{flex:1 1 100%;min-width:0}.vertical-header{writing-mode:vertical-lr;white-space:nowrap;font-size:.8rem;text-align:center;width:20px;display:flex;align-items:center;justify-content:center}.event-row{grid-template-columns:1fr}#userStatus:after{content:attr(data-short-name);display:inline-block}.responsive-gallery-image{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain;cursor:zoom-out}.menu-bar{margin-right:10px}.menu-bar vaadin-context-menu-list-box{width:100%;max-width:250px}.user-icon{display:none}.login-button,.logout-button{padding:6px 10px;font-size:14px}.detail-row{flex-direction:column;align-items:flex-start;gap:.2rem}.trennlinie-mobil{display:block}}@media (max-width: 480px){vaadin-dialog-overlay::part(overlay){width:95vw!important;max-width:95vw!important}.action-buttons{gap:5px;align-items:center}.hover-scale-button{font-size:12px!important;width:30px!important;height:30px!important}.navbar{height:45px}.menu-button{font-size:20px}.logo{max-height:80px;margin:40px auto 0}.login-button,.logout-button{padding:5px 8px;font-size:12px}}.custom-menu{display:block}.nav-links{display:none}@media (min-width: 1550px){.custom-menu{display:none!important}.nav-links{display:flex!important;z-index:1100;gap:1em}}.page-entry-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;pointer-events:none;display:flex}.page-entry-left,.page-entry-right{background:var(--hover-color);opacity:.75;flex:1;height:100%;transition:transform 1s ease-in-out;z-index:2001}.page-entry-left.open{transform:translate(-100%)}.page-entry-right.open{transform:translate(100%)}.page-entry-icon-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;z-index:2002}.page-entry-icon-left,.page-entry-icon-right{width:128px;height:256px;opacity:.9;background-image:url(/favicon.ico);background-size:256px 256px;background-repeat:no-repeat;background-position:left center;transition:transform 1s ease-in-out}.page-entry-icon-left{background-position:left center;border-right:1px solid rgba(255,255,255,.2)}.page-entry-icon-right{background-position:right center;border-left:1px solid rgba(255,255,255,.2)}.page-entry-icon-left.open{transform:translate(-50vw)}.page-entry-icon-right.open{transform:translate(50vw)}