/* Yacht Empire — Landingpage (Ticket #361) * * Handgeschriebenes CSS, KEIN Framework und KEIN Build-Schritt: die Datei wird * so ausgeliefert, wie sie hier steht (Hosting-Ziel `landing`, siehe * firebase.json). Farben und Radien sind die Leyendecker-Tokens der App * (app/lib/design/tokens.dart, `leyendeckerTokens`) — die Seite soll aussehen * wie das Spiel, nicht wie ein Baukasten. * * Mobile first: alle Grundregeln gelten fuer 320 px; groessere Viewports * bekommen ausschliesslich additive @media-Bloecke. */ :root { /* leyendeckerTokens, 1:1 */ --bg: #10202f; --surface: #1a2e42; --surface-hi: #24405a; --accent: #c9a45c; --accent-bright: #e9c889; --on-accent: #10202f; --text: #f4edde; --text-dim: #a3b2c0; --good: #6fbf8b; /* Glas-Look: halbtransparente Flaeche + Rand + Unschaerfe dahinter */ --glass: rgba(26, 46, 66, 0.62); --glass-hi: rgba(36, 64, 90, 0.72); --glass-border: rgba(233, 200, 137, 0.22); --shadow: 0 18px 48px rgba(0, 0, 0, 0.45); --radius-card: 16px; --radius-chip: 999px; /* AppSpace */ --s-xs: 4px; --s-s: 8px; --s-m: 12px; --s-l: 16px; --s-xl: 24px; --content: 1080px; --reading: 62ch; } * { box-sizing: border-box; } html { /* iOS Safari skaliert Text in Landscape sonst eigenmaechtig hoch. */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; /* Nichts darf horizontal ueberlaufen — geprueft bei 320 px. */ overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent-bright); } h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--s-m); letter-spacing: 0.01em; } h1 { font-size: clamp(2rem, 8vw, 3.6rem); } h2 { font-size: clamp(1.5rem, 5.5vw, 2.2rem); } h3 { font-size: clamp(1.1rem, 4.4vw, 1.35rem); } p { margin: 0 0 var(--s-m); } /* ── Sprachumschaltung ─────────────────────────────────────────────────── * Beide Sprachen stehen im HTML. Ohne JavaScript bleibt `data-lang="de"` * aus dem Markup stehen und die Seite ist vollstaendig deutsch lesbar — * die Anleitung darf nicht an einem blockierten Skript haengen. * * Zwei Fallstricke stecken in genau diesen drei Zeilen — beide im * Headless-Chrome aufgefallen, beide wuerde man am Schreibtisch uebersehen: * * 1. `body …` ist Pflicht. Ohne das `body` traefe `[lang="en"]` auch das * -Element selbst — und sobald `lang.js` dort `lang="en"` setzt * (bei englischer Browsersprache der Normalfall), waere die GESAMTE Seite * ausgeblendet. Genau so gemessen: weisse Seite bei 320/390/768/1280 px. * 2. Es wird NUR ausgeblendet, nie per `display: revert` wieder eingeblendet. * Ein Revert muesste jede Layout-Regel schlagen, die dem Element ein * eigenes `display` gibt — `.footer nav a { display: inline-flex }` hat * hoehere Spezifitaet und liess die englischen Fusszeilen-Links neben den * deutschen stehen. So herum behaelt jedes Element sein natuerliches * `display`, und nur die nicht gewaehlte Sprache faellt weg. * * `data-lang="de"` steht fest im Markup: ohne JavaScript ist die Seite * deutsch und vollstaendig. */ :root[data-lang="de"] body [lang="en"] { display: none; } :root[data-lang="en"] body [lang="de"] { display: none; } /* ── Kopfleiste ──────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-m); padding: var(--s-s) var(--s-l); background: rgba(16, 32, 47, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(233, 200, 137, 0.14); } .topbar__brand { display: flex; align-items: center; gap: var(--s-s); font-weight: 600; color: var(--text); text-decoration: none; /* Auf 320 px darf der Titel schrumpfen, nicht umbrechen. */ font-size: clamp(0.95rem, 3.8vw, 1.15rem); white-space: nowrap; min-width: 0; /* Navigations-Ziel, kein Fliesstext-Link: >= 40px wie in der App. */ min-height: 40px; } .topbar__mark { width: 28px; height: 28px; border-radius: 8px; flex: none; } .topbar__spacer { flex: 1 1 auto; } /* Sprachumschalter — Segmented Control im Glas-Look. */ .langswitch { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-chip); background: var(--glass); border: 1px solid var(--glass-border); } .langswitch button { /* >= 40 px Tap-Target, wie in der App. */ min-width: 44px; min-height: 40px; padding: 0 var(--s-m); border: 0; border-radius: var(--radius-chip); background: transparent; color: var(--text-dim); font: inherit; font-size: 0.9rem; cursor: pointer; } .langswitch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); font-weight: 600; } /* ── Layout ──────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--s-l); } section { padding: clamp(40px, 9vw, 88px) 0; } .lead { font-size: clamp(1.05rem, 4.2vw, 1.3rem); color: var(--text-dim); max-width: var(--reading); } .eyebrow { display: inline-block; margin-bottom: var(--s-m); padding: 6px var(--s-m); border-radius: var(--radius-chip); background: var(--glass); border: 1px solid var(--glass-border); color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; } /* ── Hero: das Artwork ist der Star ──────────────────────────────────── */ .hero { position: relative; padding: 0; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; } .hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .hero__veil { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(16, 32, 47, 0.15) 0%, rgba(16, 32, 47, 0.55) 45%, rgba(16, 32, 47, 0.96) 100% ); } .hero__inner { position: relative; width: 100%; max-width: var(--content); margin: 0 auto; padding: clamp(48px, 12vw, 96px) var(--s-l) clamp(32px, 7vw, 64px); } .hero h1 { text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55); max-width: 14ch; } .hero .lead { color: var(--text); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); } /* ── Buttons ─────────────────────────────────────────────────────────── */ .cta-row { display: flex; flex-wrap: wrap; gap: var(--s-m); margin-top: var(--s-xl); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-s); min-height: 48px; padding: 0 var(--s-xl); border-radius: var(--radius-chip); border: 1px solid transparent; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .btn--primary { background: linear-gradient(160deg, var(--accent-bright), var(--accent)); color: var(--on-accent); box-shadow: 0 10px 30px rgba(201, 164, 92, 0.28); } .btn--ghost { background: var(--glass); border-color: var(--glass-border); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ── Glaskarten ──────────────────────────────────────────────────────── */ .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-card); padding: var(--s-xl); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); } .grid { display: grid; gap: var(--s-l); grid-template-columns: 1fr; } /* ── Galerie ─────────────────────────────────────────────────────────── */ .gallery { display: grid; gap: var(--s-m); grid-template-columns: repeat(2, 1fr); } .gallery figure { margin: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--glass-border); background: var(--surface); aspect-ratio: 4 / 3; } .gallery img { width: 100%; height: 100%; object-fit: cover; } .gallery figure.is-tall { aspect-ratio: 3 / 4; } /* ── Installations-Anleitung ─────────────────────────────────────────── */ .install { background: linear-gradient( 180deg, rgba(36, 64, 90, 0.35), rgba(16, 32, 47, 0) ); } .steps { counter-reset: step; list-style: none; margin: var(--s-l) 0 0; padding: 0; } .steps li { counter-increment: step; position: relative; padding: 0 0 var(--s-l) 44px; min-height: 40px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 0.95rem; font-weight: 700; } .steps li:last-child { padding-bottom: 0; } /* Beschriftung eines echten Menuepunkts im Browser. */ .ui { display: inline-block; padding: 2px 8px; border-radius: 8px; background: var(--surface-hi); border: 1px solid var(--glass-border); color: var(--accent-bright); font-size: 0.92em; white-space: nowrap; } .platform__head { display: flex; align-items: center; gap: var(--s-m); margin-bottom: var(--s-s); } .platform__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-hi); border: 1px solid var(--glass-border); font-size: 1.3rem; } .note { margin-top: var(--s-l); padding: var(--s-m) var(--s-l); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(201, 164, 92, 0.09); color: var(--text-dim); font-size: 0.95rem; } .note strong { color: var(--text); } /* ── Cover-Block ─────────────────────────────────────────────────────── */ .cover { display: grid; gap: var(--s-xl); align-items: center; grid-template-columns: 1fr; justify-items: center; text-align: center; } .cover img { width: min(280px, 70vw); border-radius: var(--radius-card); box-shadow: var(--shadow); border: 1px solid var(--glass-border); } /* ── Fussbereich ─────────────────────────────────────────────────────── */ .footer { border-top: 1px solid rgba(233, 200, 137, 0.14); padding: var(--s-xl) 0 calc(var(--s-xl) + env(safe-area-inset-bottom, 0px)); color: var(--text-dim); font-size: 0.92rem; } .footer nav { display: flex; flex-wrap: wrap; gap: var(--s-l); margin-bottom: var(--s-m); } .footer nav a { min-height: 40px; display: inline-flex; align-items: center; } /* ── Rechtstexte (impressum.html / datenschutz.html) ─────────────────── */ .legal { max-width: 76ch; } .legal h2 { margin-top: var(--s-xl); } .legal dl { margin: 0 0 var(--s-l); } .legal dt { color: var(--accent-bright); font-weight: 600; margin-top: var(--s-m); } .legal dd { margin: 0; } /* Nummerierte Ablaeufe in den AGB. Ausgeblendete Sprachvarianten sind * `display: none` und zaehlen deshalb NICHT mit — die Nummerierung bleibt in * beiden Sprachen 1, 2, 3. */ .legal ol, .legal ul { margin: 0 0 var(--s-l); padding-left: 1.4em; } .legal li { margin-bottom: var(--s-s); } .legal table { width: 100%; border-collapse: collapse; margin: var(--s-m) 0 var(--s-l); font-size: 0.95rem; } .legal th, .legal td { text-align: left; vertical-align: top; padding: var(--s-s) var(--s-m); border-bottom: 1px solid rgba(233, 200, 137, 0.14); } /* Breite Tabellen scrollen in sich selbst, nie die Seite. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Platzhalter, die vor der Veroeffentlichung ersetzt werden MUESSEN. * Bewusst schreiend: er soll auf jedem Screenshot auffallen. */ .todo { display: inline-block; padding: 1px 8px; border-radius: 6px; background: rgba(217, 106, 74, 0.22); border: 1px dashed #d96a4a; color: #ffd7c9; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.88em; white-space: normal; } .banner-warn { margin: var(--s-l) 0 0; padding: var(--s-l); border-radius: var(--radius-card); background: rgba(217, 106, 74, 0.16); border: 1px solid rgba(217, 106, 74, 0.55); color: var(--text); } /* ── Breakpoints ───────────────────────────────────────────────────── * Geprueft wurden 320 / 390 / 768 / 1280 px. */ @media (min-width: 600px) { .gallery { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { body { font-size: 18px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .cover { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); text-align: left; justify-items: start; } .cover img { width: 100%; } } @media (min-width: 1024px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .gallery { grid-template-columns: repeat(4, 1fr); } .hero { min-height: 86vh; } }