/* frutiger-aero.css */ /* Aktiv nur wenn .fa-theme am hängt */ html, body { width: 100%; margin: 0; padding: 0; overflow-y: auto !important; /* SCROLL ERLAUBT */ overflow-x: hidden !important; /* kein seitliches Scrollen */ } body.fa-theme { background: radial-gradient(circle at 20% 10%, rgba(180, 255, 245, 0.9) 0%, rgba(120, 210, 255, 0.55) 35%, rgba(40, 90, 180, 0.35) 70%, rgba(0, 0, 0, 0.15) 100%), linear-gradient(180deg, rgba(255,255,255,0.65), rgba(160, 220, 255, 0.25)); color: #06233a; font-family: "Segoe UI", Tahoma, Arial, sans-serif; } /* Glas-/Aero Panels */ body.fa-theme .text-box, body.fa-theme .overlay-box, body.fa-theme .modal-content, body.fa-theme .dropdown-menu { background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35)); color: #06233a; border: 1px solid rgba(255,255,255,0.55); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Headings */ body.fa-theme h1, body.fa-theme h2 { color: #06233a; text-shadow: 0 2px 12px rgba(255,255,255,0.6); } /* Navbar frutiger */ body.fa-theme .navbar { background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.25)); border-bottom: 1px solid rgba(255,255,255,0.6); box-shadow: 0 8px 20px rgba(0,0,0,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.fa-theme .navbar a { color: #06233a; } body.fa-theme .navbar a:hover { color: #0077ff; text-shadow: 0 0 10px rgba(0, 170, 255, 0.7); } /* Buttons (deine vorhandenen Buttons werden nur im FA-Look überschrieben) */ body.fa-theme button, body.fa-theme .back-button, body.fa-theme .button-erfahre-mehr { background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(170, 230, 255, 0.55)); color: #06233a; border: 1px solid rgba(255,255,255,0.75); border-radius: 14px; box-shadow: 0 10px 25px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.85); transition: transform 0.2s ease, box-shadow 0.2s ease; } body.fa-theme button:hover, body.fa-theme .back-button:hover, body.fa-theme .button-erfahre-mehr:hover { transform: translateY(-1px); box-shadow: 0 14px 35px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.9); } /* Links */ body.fa-theme a { color: #0059ff; } body.fa-theme a:hover { color: #00a6ff; } /* Datenschutz Overlay Hintergrund etwas "Aero" */ body.fa-theme #datenschutz-overlay, body.fa-theme #passwort-overlay { background: radial-gradient(circle at top, rgba(255,255,255,0.35) 0%, rgba(0,40,120,0.55) 70%, rgba(0,0,0,0.7) 100%); } /* Toggle Button (rechts fix) */ #fa-toggle { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 10000; padding: 12px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(120, 220, 255, 0.45)); color: #06233a; box-shadow: 0 12px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.85); cursor: pointer; user-select: none; font-weight: 700; } #fa-toggle:hover { transform: translateY(-50%) scale(1.03); } /* ===== Seifenblasen Effekt (nur Aero) ===== */ .fa-bubble-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; } .fa-bubble { position: absolute; bottom: -40px; width: var(--size); height: var(--size); left: var(--x); opacity: 0; border-radius: 999px; /* Bubble-Look */ background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.15) 55%, rgba(255,255,255,0.05) 100%), radial-gradient(circle at 70% 80%, rgba(160, 230, 255, 0.35), rgba(255,255,255,0) 60%); box-shadow: 0 10px 25px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.8); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: faBubbleUp var(--dur) ease-out forwards; } @keyframes faBubbleUp { 0% { transform: translateY(0) translateX(0) scale(0.95); opacity: 0; } 12% { opacity: 0.75; } 100% { transform: translateY(calc(-1 * var(--rise))) translateX(var(--drift)) scale(1.05); opacity: 0; } } body.fa-theme .fa-kontakt-deko { position: absolute; right: 200px; /* Bild ragt rechts raus */ bottom: -10px; /* schön tief */ width: 450px; /* gross */ z-index: 0; pointer-events: none; /* Bild bleibt scharf */ opacity: 0.6; filter: brightness(1.05) contrast(1.03) saturate(1.05); /* NUR RECHTS sichtbar / heller */ mask-image: linear-gradient( to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 15%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 75% ); -webkit-mask-image: linear-gradient( to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 15%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0) 75% ); } /* === Frutiger Aero: Glasiger Senden-Button === */ /* Frutiger Aero – Button leicht abdunkeln beim Hover */ body.fa-theme .kontakt-form button:hover { background: linear-gradient( 180deg, rgba(235, 245, 255, 0.85), rgba(150, 205, 235, 0.55) ) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.75); transform: translateY(0); /* ruhig, kein Pop */ } backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all 0.25s ease; body.fa-theme .kontakt-container { ... } body.fa-theme { overflow: hidden; } /* Bild NUR im Frutiger-Aero anzeigen */ body.fa-theme .fa-kontakt-deko { display: block; }