/* ========================================== AQUASPORT-LEOPOLDSHÖHE | styles.css ========================================== */ /* === RESET & GRUNDEINSTELLUNGEN === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-bg: #0a1f3c; --color-primary: #1E90FF; --color-secondary: #87CEEB; --color-accent: #ffffff; --color-text: #ffffff; --color-text-soft: rgba(255, 255, 255, 0.75); --color-overlay: rgba(5, 20, 50, 0.72); --font-main: 'Segoe UI', Arial, sans-serif; } html, body { width: 100%; height: 100%; font-family: var(--font-main); color: var(--color-text); overflow: hidden; } /* ========================================== HINTERGRUND MIT SVG-WELLENMUSTER ========================================== */ body { background-color: var(--color-bg); background-image: /* Overlay */ linear-gradient( 160deg, rgba(5, 20, 60, 0.82) 0%, rgba(0, 60, 120, 0.60) 50%, rgba(5, 20, 60, 0.88) 100% ), /* SVG-Wellenmuster als Data-URI */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900'%3E%3Crect width='1440' height='900' fill='%230d2a52'/%3E%3C!-- Helle Wellen unten --%3E%3Cpath d='M0 700 Q180 640 360 700 Q540 760 720 700 Q900 640 1080 700 Q1260 760 1440 700 L1440 900 L0 900 Z' fill='%231E90FF' opacity='0.18'/%3E%3Cpath d='M0 740 Q200 680 400 740 Q600 800 800 740 Q1000 680 1200 740 Q1320 780 1440 740 L1440 900 L0 900 Z' fill='%2387CEEB' opacity='0.13'/%3E%3Cpath d='M0 780 Q240 730 480 780 Q680 820 900 780 Q1100 740 1300 780 Q1380 800 1440 785 L1440 900 L0 900 Z' fill='%231E90FF' opacity='0.10'/%3E%3C!-- Wellen oben links --%3E%3Cpath d='M-100 120 Q100 60 300 120 Q500 180 700 120 Q900 60 1100 120 Q1200 150 1440 100' stroke='%2387CEEB' stroke-width='2' fill='none' opacity='0.15'/%3E%3Cpath d='M-100 160 Q150 90 350 160 Q550 230 750 160 Q950 90 1150 160 Q1300 210 1440 150' stroke='%231E90FF' stroke-width='1.5' fill='none' opacity='0.12'/%3E%3C!-- Blasen / Kreise dekorativ --%3E%3Ccircle cx='80' cy='80' r='40' fill='%231E90FF' opacity='0.07'/%3E%3Ccircle cx='140' cy='180' r='22' fill='%2387CEEB' opacity='0.09'/%3E%3Ccircle cx='1360' cy='100' r='50' fill='%231E90FF' opacity='0.07'/%3E%3Ccircle cx='1300' cy='200' r='28' fill='%2387CEEB' opacity='0.08'/%3E%3Ccircle cx='1400' cy='820' r='35' fill='%2387CEEB' opacity='0.08'/%3E%3Ccircle cx='60' cy='830' r='45' fill='%231E90FF' opacity='0.07'/%3E%3C/svg%3E"); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; } /* ========================================== LAYOUT – VOLLBILD-CONTAINER ========================================== */ .container { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } /* ========================================== INHALTS-BOX (GLASSMORPHISM) ========================================== */ .content { background: rgba(10, 31, 70, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(135, 206, 235, 0.25); border-radius: 20px; padding: 3.5rem 4rem; text-align: center; max-width: 700px; width: 100%; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(30, 144, 255, 0.10); } /* ========================================== DEKORATIVE LINIE ÜBER DEM TITEL ========================================== */ .content::before { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); border-radius: 2px; margin: 0 auto 1.6rem auto; } /* ========================================== TYPOGRAFIE ========================================== */ /* "Website in Bearbeitung" – klein, leicht */ .content h1 { font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 400; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 1.2rem; opacity: 0.85; } /* Markenname – groß und stark */ .content .brand { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); line-height: 1.15; margin-bottom: 0.4rem; } /* Untertitel – Schwimmkurse */ .content .subtitle { font-size: clamp(0.9rem, 2.2vw, 1.1rem); font-weight: 300; letter-spacing: 0.15em; color: var(--color-secondary); margin-bottom: 2.4rem; opacity: 0.80; } /* Trennlinie */ .divider { width: 40px; height: 1px; background: rgba(135, 206, 235, 0.40); margin: 0 auto 2rem auto; } /* Hinweistext */ .content .contact-text { font-size: clamp(0.8rem, 1.8vw, 0.95rem); color: var(--color-text-soft); margin-bottom: 1rem; line-height: 1.6; font-weight: 300; } /* ========================================== E-MAIL LINK ========================================== */ .email-link { display: inline-block; color: var(--color-accent); font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 500; letter-spacing: 0.05em; text-decoration: none; padding: 0.75rem 2rem; border: 1.5px solid rgba(30, 144, 255, 0.60); border-radius: 50px; background: rgba(30, 144, 255, 0.10); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } .email-link:hover { background: rgba(30, 144, 255, 0.28); border-color: var(--color-primary); color: #ffffff; box-shadow: 0 0 18px rgba(30, 144, 255, 0.35); } /* ========================================== FOOTER – KLEINE FUSSZEILE ========================================== */ .footer { position: fixed; bottom: 1.2rem; left: 0; right: 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; } /* ========================================== RESPONSIVE – PLAKAT / DRUCK ========================================== */ @media (max-width: 600px) { .content { padding: 2.5rem 1.8rem; border-radius: 14px; } } @media print { body { background-attachment: scroll; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .content { box-shadow: none; border: 2px solid rgba(135, 206, 235, 0.50); } .email-link:hover { background: transparent; } }