html{--aura-font-family: "Roboto",system-ui,sans-serif;--lumo-font-family: "Roboto",system-ui,sans-serif;vaadin-text-field::part(label){color: #20ABF5;color: black}vaadin-text-area::part(label){color: #20ABF5;color: black}vaadin-select::part(label){color: #20ABF5;color: black}vaadin-multi-select-combo-box::part(label){color: #20ABF5;color: black}vaadin-radio-group::part(label){color: #20ABF5;color: black}.mainlayoutstyle{padding: 20px;background: #FAF9F5}.intro{font-size: 1.4rem;line-height: 1.5;font-weight: 700;color: #333;color: white;color: black;color: #536475;text-align: center;width: 950px;margin-left: 0px;margin-top: 10px;margin-bottom: 50px;margin-right: 10px}.introPrototyp{font-size: 1.4rem;line-height: 1.5;color: #0060A9;color: #0468b0;color: #536475;text-align: center;width: 100%;margin-left: 10px;margin-top: 10px;margin-bottom: 50px;margin-right: 10px}.introProjekte{font-size: 1.1rem;font-weight: 600;color: #333;color: white;color: #536475;color: black;text-align: center;margin-bottom: 2px;margin-left: 1px}.protoTitel{font-size: 1.2rem;font-weight: 600;color: #333;color: white;color: #536475;color: black;text-align: center;margin: 0px}.bulletpointsProbleme{font-size: 1.1rem;font-weight: 300;color: #333;color: white;color: #536475;color: black;text-align: center;margin-bottom: 2px;margin-left: 1px}.introProjekteBeschreibung{font-size: 1.1rem;font-weight: 200;color: #536475;text-align: center;margin-bottom: 2px;margin-left: 1px}.introProjekteFett{font-size: 1.6rem;font-weight: 700;color: white;color: #536475;color: #0060A9;color: black;text-align: center;margin-left: 0px;margin-bottom: 30px}.titel{font-size: 2.0rem;line-height: 2.2;font-weight: 700;color: black;text-align: left;width: 100%;margin-left: 10px;margin-top: 10px;margin-bottom: 5px;margin-right: 0px}.titelPrototyp{font-size: 2.0rem;line-height: 1.1;font-weight: 700;color: black;text-align: center;width: 100%;margin-top: 0px;margin-bottom: 5px;margin-right: 0px}.titel2{font-size: 1.8rem;line-height: 2.2;font-weight: 700;color: black;text-align: left;max-width: 100%;margin-left: 10px;margin-top: 10px;margin-bottom: 5px;margin-right: 10px}.bulletpoints{font-size: 1.2rem;line-height: 1.4;color: #333;color: white;color: black;color: #536475;text-align: left;width: 530px;margin-top: 5px;margin-bottom: 5px}.bulletpoints2{font-size: 1.2rem;line-height: 1.6;color: black;text-align: left;width: 550px;margin-left: 0px;margin-top: 5px;margin-bottom: 5px}.introsmall,.focussmall{font-size: 1rem;line-height: 1.3;color: #333;text-align: center;max-width: 820px;margin: 20px auto}.buttonstyle{padding: 14px 32px;background: #008744;color: white;font-weight: 600;border-radius: 12px;font-size: 1.4rem;height: 50px}.buttonstyle:hover{background: #329f69;cursor: pointer}.buttonstyle2{padding: 14px 32px;background: #01796F;color: white;font-weight: 600;border-radius: 12px;text-decoration: none;font-size: 1.4rem;width: 600px;height: auto;margin-top: 20px;text-wrap: wrap;border: solid 3px white}.buttonstyle2:hover{background: #1a867d;cursor: pointer}.titelMitFarbe{font-size: 2.5rem;line-height: 1.4;color: #0060A9;text-align: left;margin: 20px auto}.prototyppanel{background: #c0c2ce;background: lightgray;border-radius: 15px;max-width: 860px;width: 100%;box-shadow: 0 0px 50px rgba(0,0,0,0.14)}.example-card{background: white;border-radius: 20px;overflow: hidden;border-color: lightgray;border-color: #c0c2ce;border-width: 4px;border-style: solid;box-shadow: 0 10px 40px rgba(0,0,0,0.08);box-shadow: 0 0px 50px rgba(0,0,0,0.14);transition: all 0.3s ease;background: #c0c2ce}.floating-action-button{position: fixed !important;bottom: 30px;height: 60px;right: center;z-index: 10000;transition: all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow: 0 8px 20px rgba(0,96,169,0.3)}.floating-action-button.stuck{height: 63px;position: static !important;bottom: auto;right: auto;box-shadow: 0 4px 12px rgba(0,0,0,0.15);margin-top: 40px;margin-bottom: 20px;width: 600px}.example-card:hover{transform: translateY(-5px);box-shadow: 0 20px 50px rgba(0,0,0,0.15)}.example-image{width: 100%;height: auto;display: block}.example-card-title{font-size: 1.4rem !important;color: rgb(5,141,209);color: black;padding: 20px 24px 8px 24px;margin: 0 !important}.example-card-text{padding: 0 24px 24px 24px;color: #444;line-height: 1.6}.dialog-close-clean{position: absolute !important;top: 16px;right: 16px;background: rgba(0,0,0,0.65) !important;color: white !important;width: 48px;height: 48px;border-radius: 50%;z-index: 1000}.dialog-close-clean:hover{background: rgba(255,255,255,0.2) !important}.dialog-wrapper-clean{position: relative;height: 70vh;max-width: 92vw;display: flex;align-items: center;justify-content: center;padding: 11px;margin: 0 auto;width: fit-content;height: fit-content}.examples-page{background: #f9f9fb;min-height: 100vh;padding: 60px 20px}.examples-title{font-size: 2.0rem;line-height: 1.1;font-weight: 700;color: black;text-align: center;width: 100%;margin-left: 10px;margin-top: 10px;margin-bottom: 5px;margin-right: 0px}.examples-intro{font-size: 1.35rem;line-height: 1.8;color: #333;text-align: center;max-width: 900px;margin: 0 auto 60px auto}.examples-intro-small{font-size: 1rem;line-height: 1.3;color: #333;text-align: center;max-width: 900px;margin: 0 auto 60px auto}.demo-button{display: inline-flex;align-items: center;gap: 8px;margin-top: 20px;padding: 14px 32px;background: rgb(5,141,209);color: white;font-weight: 600;border-radius: 12px;text-decoration: none;font-size: 1.1rem;width: 500px;justify-content: center}.demo-button:hover{background: #0468b0;cursor: pointer}.example-thumbnail{width: 100%;height: 220px;object-fit: cover;border-radius: 0 0 16px 16px;cursor: zoom-in;transition: opacity 0.3s}.example-thumbnail:hover{opacity: 0.85}.demo-box-startseite{margin: 100px auto;padding: 30px;border-radius: 24px;text-align: center;border: solid 1px gray;min-width: 1200px;background: #c0c2ce;background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(192,194,206,1) 55%);background: white}.prototypVerweisBox{margin-top: 20px;margin-bottom: 20px;padding: 30px;border-radius: 24px;text-align: center;border: 3px solid green;max-width: 800px;background: whitesmoke}.demo-box:hover,.demo-box-startseite:hover{border: solid 1px lightgray}.demo-box{margin: 100px auto;padding: 30px;border-radius: 24px;border: solid 1px gray;text-align: center;box-shadow: 0 15px 50px rgba(0,0,0,0.1);min-width: 1200px;background: white}.kontakt-box{margin: 100px auto;padding: 30px;border-radius: 24px;border: solid 1px gray;text-align: center;box-shadow: 0 15px 50px rgba(0,0,0,0.1);width: 850px;background: white}.examples-grid{display: grid;grid-template-columns: 1fr;gap: 48px 32px;width: 100%}.examples-content{max-width: 1300px;margin: 0 auto;width: 100%}@media ( min-width : 900px){.examples-grid{grid-template-columns: 1fr 1fr}}.dialog-image-clean{max-height: 70vh;max-width: 92vw;width: auto;height: auto;object-fit: contain}.tabstyle{width: 800px;height: 40px;margin-right: 5px;z-index: 9999;background-color: lightgray}vaadin-tab[selected]{color: black;background: white;border-color: black;font-weight: 600}@media (max-width: 768px){.floating-action-button{height: 50px}img{max-width: 100% !important;height: auto !important}vaadin-horizontal-layout{flex-direction: column !important;align-items: center !important;width: 100% !important}vaadin-vertical-layout{width: 100% !important;max-width: 100% !important}.intro,.titel,.titelPrototyp,.titel2,.introProjekteFett{font-size: 1.3rem !important;max-width: 100% !important;margin-left: 0 !important;margin-right: 0 !important}.examples-title{font-size: 1.3rem !important;max-width: 100% !important;margin-left: 0 !important;margin-right: 0 !important;margin-top: 40px}.bulletpoints,.bulletpoints2,.introProjekte,.introPrototyp{font-size: 1.1rem !important;max-width: 100% !important;margin-right: 0px;margin-left: 0px;margin-bottom: 0px}.buttonstyle2{width: 95% !important;font-size: 1.2rem !important;padding: 14px 20px}.bulletpointsProbleme{text-align: left}.demo-box-startseite,.demo-box{padding: 20px !important;min-width: 80% !important;max-width: 100% !important;margin-top: 60px !important}.example-thumbnail{height: 180px !important}.demo-button{width: 200px !important}}@media (max-width: 1300px){.demo-box-startseite,.demo-box{padding: 20px !important;min-width: 80% !important;max-width: 100% !important}.demo-box-startseite{padding: 20px !important;min-width: 80% !important;max-width: 100% !important}.introProjekteBeschreibung{margin-top: -7px;margin-bottom: 18px}.tabstyle{margin: 0px;margin-top: 5px;margin-left: 15px;width: 100%;align-content: center}vaadin-tabs{width: 100% !important;max-width: 100% !important}vaadin-horizontal-layout{flex-direction: column !important;align-items: center !important;width: 100% !important}.examples-grid{grid-template-columns: 1fr}.titelPrototyp,.examples-title{margin-top: 60px}}<!-- ============================================= --><!-- DEVELOPER HOVER-POPOVER CARDS --><!-- ============================================= -->.team-section{margin: 60px 0 40px 0;text-align: center}.developer-grid{display: flex;justify-content: center;gap: 40px;flex-wrap: wrap;margin-bottom: 40px}.developer-card{background: white;border-radius: 20px;box-shadow: 0 10px 30px rgba(0,0,0,0.1);max-width: 250px;overflow: hidden;transition: all 0.3s ease;cursor: default;padding-bottom: 15px}.developer-card:hover{transform: scale(1.02);box-shadow: 0 20px 45px rgba(0,96,169,0.18)}.developer-avatar{width: 110px;height: 110px;border-radius: 50%;object-fit: cover;border: 5px solid #0060A9;margin: 25px auto 15px;display: block;box-shadow: 0 5px 15px rgba(0,0,0,0.1)}.developer-name{font-size: 1.35rem;font-weight: 700;color: #222;text-align: center;margin: 0 0 4px 0}.developer-role{font-size: 1.05rem;color: #0060A9;text-align: center;margin-bottom: 10px;font-weight: 500}.vaadin-popover-content{max-width: 420px;width: 500px;padding: 20px;border-radius: 16px}}