/* MeerHeimatLiebe 2.5.2-r64 Robuste maritime Schliessen-Symbole und sichtbare animierte SH-Flagge. */ :root { --mhl-r64-gold: #f2cc72; --mhl-r64-cyan: rgba(125, 226, 239, 0.46); --mhl-r64-blue: #2d91c8; --mhl-r64-white: #f8fbff; --mhl-r64-red: #ca5863; } /* Flagge ohne JavaScript-Abhaengigkeit direkt neben dem Titel. */ .site-header .brand-copy > strong { display: inline-flex !important; align-items: center; gap: .52rem; white-space: nowrap; } .site-header .brand-copy > strong::after { content: ""; display: inline-block; width: 1.55rem; height: 1rem; flex: 0 0 auto; border-radius: .08rem .24rem .24rem .08rem; background: linear-gradient(180deg, var(--mhl-r64-blue) 0 33.333%, var(--mhl-r64-white) 33.333% 66.666%, var(--mhl-r64-red) 66.666% 100%); box-shadow: -.16rem 0 0 rgba(225, 237, 247, .86), 0 0 0 1px rgba(255,255,255,.17) inset, 0 .18rem .45rem rgba(0, 13, 24, .24); transform-origin: left center; animation: mhl-r64-flag-wave 2.55s ease-in-out infinite; } /* Die per r63 eingesetzte zweite Flagge ausblenden, falls vorhanden. */ .site-header .mhl-brand-flag { display: none !important; } /* Alle bekannten Schliessen-Schaltflaechen: vorhandenes X und Komponenten sicher entfernen. */ button.maritime-close, button.gallery-lightbox__close, button[data-lightbox-close], button[data-service-close], button[data-display-close], button[data-modal-close], button[data-dialog-close], button[aria-label="Schließen"], button[aria-label*=" schließen" i], button[title="Schließen" i] { position: relative !important; display: inline-grid !important; place-items: center !important; inline-size: 2.65rem !important; block-size: 2.65rem !important; min-inline-size: 2.65rem !important; min-block-size: 2.65rem !important; padding: 0 !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important; color: transparent !important; border: 1px solid var(--mhl-r64-cyan) !important; border-radius: 999px !important; background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.16), transparent 34%), linear-gradient(145deg, rgba(8,72,94,.96), rgba(4,34,51,.98)) !important; box-shadow: 0 .45rem 1rem rgba(1,16,28,.24), 0 0 1rem rgba(93,220,236,.12) !important; isolation: isolate; } button.maritime-close > *, button.gallery-lightbox__close > *, button[data-lightbox-close] > *, button[data-service-close] > *, button[data-display-close] > *, button[data-modal-close] > *, button[data-dialog-close] > *, button[aria-label="Schließen"] > *, button[aria-label*=" schließen" i] > *, button[title="Schließen" i] > * { display: none !important; } /* Symbol wird als maskiertes SVG gesetzt; dadurch bleibt es scharf und exakt zentriert. */ .mhl-close-r64::before { content: "" !important; display: block !important; width: 1.42rem !important; height: 1.42rem !important; background: var(--mhl-r64-gold) !important; -webkit-mask: var(--mhl-close-mask) center / contain no-repeat; mask: var(--mhl-close-mask) center / contain no-repeat; text-indent: 0 !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); transform-origin: 50% 50%; } .mhl-close-r64[data-close-kind="starfish"] { --mhl-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 1.8 2.35 6.08 6.48.35-5.04 4.08 1.67 6.27L12 15.04 6.54 18.58l1.67-6.27-5.04-4.08 6.48-.35L12 1.8Z'/%3E%3Ccircle cx='12' cy='11.5' r='1.2' fill='white'/%3E%3C/svg%3E"); } .mhl-close-r64[data-close-kind="helm"] { --mhl-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Cpath d='M12 1.8v4M12 18.2v4M1.8 12h4M18.2 12h4M4.8 4.8l2.9 2.9M16.3 16.3l2.9 2.9M19.2 4.8l-2.9 2.9M7.7 16.3l-2.9 2.9'/%3E%3C/g%3E%3C/svg%3E"); } .mhl-close-r64[data-close-kind="anchor"] { --mhl-close-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.7' r='2.1'/%3E%3Cpath d='M12 6.8v12.1M7.4 10.6H4.6v3M16.6 10.6h2.8v3M4.8 13.8c1 3.4 3.4 5.3 7.2 5.3s6.2-1.9 7.2-5.3M9.3 19.1 12 22l2.7-2.9'/%3E%3C/g%3E%3C/svg%3E"); } .mhl-close-r64[data-close-kind="starfish"]::before { animation: mhl-r64-starfish 4.7s ease-in-out infinite; } .mhl-close-r64[data-close-kind="helm"]::before { animation: mhl-r64-helm 6.2s ease-in-out infinite; } .mhl-close-r64[data-close-kind="anchor"]::before { animation: mhl-r64-anchor 4.2s ease-in-out infinite; } .mhl-close-r64:hover, .mhl-close-r64:focus-visible { transform: translateY(-1px) scale(1.045) !important; border-color: rgba(255,220,137,.76) !important; box-shadow: 0 .65rem 1.2rem rgba(1,16,28,.3), 0 0 1.3rem rgba(93,220,236,.22) !important; } .mhl-close-r64:active { transform: scale(.94) !important; } @keyframes mhl-r64-flag-wave { 0%,100% { transform: perspective(70px) rotateY(0deg) skewY(0deg); } 25% { transform: perspective(70px) rotateY(-16deg) skewY(-1.6deg) translateY(-.02rem); } 52% { transform: perspective(70px) rotateY(8deg) skewY(.8deg); } 77% { transform: perspective(70px) rotateY(-10deg) skewY(-.8deg); } } @keyframes mhl-r64-starfish { 0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(9deg) scale(1.05)} } @keyframes mhl-r64-helm { 0%,100%{transform:rotate(0)} 35%{transform:rotate(22deg)} 70%{transform:rotate(-13deg)} } @keyframes mhl-r64-anchor { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(4deg) translateY(-1px)} } @media (prefers-reduced-motion: reduce) { .site-header .brand-copy > strong::after, .mhl-close-r64::before { animation: none !important; } .mhl-close-r64 { transition: none !important; } }