/* ===================================================================== landing.css — Landingpage für ausgeloggte Besucher (#landing). Wird nur sichtbar, wenn app.ts die Klasse .landing-mode gibt. Nutzt die Design-Tokens aus style.css (:root) -> Hell-/Dunkelmodus passen automatisch. CSP-sicher: keine Inline-Styles, keine Webfonts. ===================================================================== */ /* --- Sichtbarkeits-Schalter ------------------------------------------- Eingeloggt: App sichtbar, #landing per [hidden] aus. Ausgeloggt (.landing-mode): App-Chrome aus, nur die Landing. */ html.landing-mode .apphead, html.landing-mode main, html.landing-mode .tabbar { display: none !important; } html.landing-mode body { /* App-Bodylayout (oft fixe Höhe/Overflow) für die Scroll-Seite lösen */ display: block; height: auto; overflow-y: auto; } .landing { max-width: 1040px; margin: 0 auto; padding: 0 20px 64px; color: var(--text); } /* --- Kopfzeile -------------------------------------------------------- */ .lp-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 8px; } .lp-brand { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } .lp-dot { display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.06em; border-radius: 2px; background: var(--accent); vertical-align: baseline; } .lp-nav-cta { font-weight: 650; font-size: 15px; color: var(--accent-deep); text-decoration: none; padding: 8px 12px; border-radius: var(--r-pill); /* Feste Mindestbreite + zentrierter Text: „Anmelden“ und „Sign in“ sind unterschiedlich breit – ohne das würde die Kopfzeile beim Sprachwechsel springen (rechtsbündige Gruppe wird schmaler -> Umschalter rutscht). */ display: inline-flex; align-items: center; justify-content: center; min-width: 84px; } .lp-nav-cta:hover { background: var(--accent-soft); } .lp-nav-right { display: flex; align-items: center; gap: 10px; } /* Kompakter DE/EN-Umschalter (nutzt .lang-seg/.lang-opt aus style.css). */ .lp-lang { padding: 3px; } .lp-lang .lang-opt { padding: 6px 12px; font-size: 13px; font-weight: 650; min-width: 40px; } /* --- Hero ------------------------------------------------------------- */ .lp-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; padding: 36px 0 52px; } .lp-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); } .lp-h1 { margin: 0 0 18px; font-size: clamp(32px, 5.2vw, 52px); line-height: 1.04; font-weight: 820; letter-spacing: -0.035em; color: var(--text); } .lp-lead { margin: 0 0 28px; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--muted); max-width: 30em; } .lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .lp-trust { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--faint); } .lp-trust-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--good); } .lp-trust-sep { color: var(--line-strong); } /* --- Buttons ---------------------------------------------------------- */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 680; text-decoration: none; padding: 13px 22px; border-radius: var(--r-sm); transition: transform var(--fast, .14s) var(--ease), background var(--fast, .14s) var(--ease); } .lp-btn:active { transform: translateY(1px); } .lp-btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); } .lp-btn-primary:hover { background: var(--accent-2); } .lp-btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); } .lp-btn-ghost:hover { background: var(--surface-2); } .lp-btn-lg { padding: 16px 30px; font-size: 17px; } /* --- Hero-Visual: Ring-Cluster --------------------------------------- */ .lp-hero-visual { display: flex; flex-direction: column; align-items: center; gap: 22px; } .lp-rings { position: relative; width: min(280px, 64vw); aspect-ratio: 1; } .lp-ring { width: 100%; height: 100%; } .lp-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 10; } .lp-ring-sm .lp-ring-track { stroke-width: 8; } .lp-ring-arc { fill: none; stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; /* Ruhezustand = gefüllt (stroke-dashoffset: var(--off)); die Animation läuft nur VON leer (var(--c)) dorthin. So ist der Ring auch dann korrekt gefüllt, wenn die Animation nicht ausgeführt wird. --c = Umfang je Ringgröße. */ --c: 326.7; stroke-dashoffset: var(--off); animation: lp-fill 1.15s var(--ease, cubic-bezier(.32,.72,0,1)) both; } .lp-ring-sm .lp-ring-arc { stroke-width: 8; --c: 201.1; } /* Ziel-Füllstände als CSS-Variablen (kein Inline-Style -> CSP-sicher). Großer Ring C=326.7; kleine Ringe C=201.1. */ .lp-arc-kcal { --off: 91.5; stroke: var(--kcal); } .lp-arc-protein { --off: 30.2; stroke: var(--protein); animation-delay: .08s; } .lp-arc-carbs { --off: 80.4; stroke: var(--carbs); animation-delay: .16s; } .lp-arc-fat { --off: 110.6; stroke: var(--fat); animation-delay: .24s; } @keyframes lp-fill { from { stroke-dashoffset: var(--c); } } .lp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .lp-ring-num { font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .lp-ring-cap { font-size: 13px; font-weight: 650; color: var(--faint); letter-spacing: 0.04em; } .lp-macros { display: flex; gap: 18px; width: min(280px, 64vw); justify-content: space-between; } .lp-macro { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; } .lp-ring-sm { width: 64px; height: 64px; } .lp-macro-lbl { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; } /* --- Sektionstitel ---------------------------------------------------- */ .lp-section-title { margin: 8px 0 22px; font-size: clamp(22px, 3vw, 28px); font-weight: 780; letter-spacing: -0.02em; color: var(--text); } /* --- Feature-Karten --------------------------------------------------- */ .lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; } .lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); } .lp-feat-dot { display: inline-block; width: 11px; height: 11px; border-radius: 999px; margin-bottom: 14px; background: var(--accent); } .lp-feat-dot[data-tone="kcal"] { background: var(--kcal); } .lp-feat-dot[data-tone="protein"] { background: var(--protein); } .lp-feat-dot[data-tone="carbs"] { background: var(--carbs); } .lp-feat-dot[data-tone="fat"] { background: var(--fat); } .lp-feat-dot[data-tone="water"] { background: var(--water); } .lp-feat-dot[data-tone="good"] { background: var(--good); } .lp-feat-dot[data-tone="muted"] { background: var(--faint); } .lp-feat-title { margin: 0 0 8px; font-size: 17px; font-weight: 720; color: var(--text); } .lp-feat-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } /* --- So funktioniert's ------------------------------------------------ */ .lp-steps { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-step { display: flex; gap: 14px; align-items: flex-start; } .lp-step-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 800; font-size: 16px; } .lp-step-title { margin: 4px 0 4px; font-size: 16px; font-weight: 700; color: var(--text); } .lp-step-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); } /* --- Abschluss-CTA ---------------------------------------------------- */ .lp-final { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 48px 24px; margin-bottom: 40px; box-shadow: var(--shadow-md); } .lp-final-title { margin: 0 0 8px; font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; letter-spacing: -0.025em; color: var(--text); } .lp-final-sub { margin: 0 0 24px; font-size: 16px; color: var(--muted); } /* --- Footer ----------------------------------------------------------- */ .lp-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 24px; border-top: 1px solid var(--line); } .lp-brand-sm { font-size: 20px; } .lp-foot-links { display: flex; flex-wrap: wrap; gap: 18px; } .lp-foot-links a { font-size: 14px; color: var(--muted); text-decoration: none; } .lp-foot-links a:hover { color: var(--text); text-decoration: underline; } /* --- Fokus (Tastatur) ------------------------------------------------- */ .landing a:focus-visible, .landing .lp-btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); } /* --- Responsive ------------------------------------------------------- */ @media (max-width: 860px) { .lp-hero { grid-template-columns: 1fr; gap: 28px; padding: 24px 0 36px; text-align: center; } .lp-hero-text { order: 2; } .lp-hero-visual { order: 1; } .lp-lead { margin-left: auto; margin-right: auto; } .lp-cta-row, .lp-trust { justify-content: center; } .lp-features { grid-template-columns: repeat(2, 1fr); } .lp-steps { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 540px) { .lp-features { grid-template-columns: 1fr; } .lp-cta-row { flex-direction: column; } .lp-btn { width: 100%; } .lp-foot { flex-direction: column; align-items: flex-start; } } /* --- Bewegung reduziert: Ringe direkt im Zielzustand ------------------ */ @media (prefers-reduced-motion: reduce) { .lp-ring-arc { animation: none; stroke-dashoffset: var(--off); } }