/* ============================================================ Yoff Ventures — site styles The DEFAULT styling below covers ordinary document pages (impressum.html, datenschutz.html) with no extra markup or body class needed. The landing page opts into its distinct "hero" look with . Banner artwork is the separate asset /banner.svg. ============================================================ */ /* ---- Design tokens ---- */ :root { --ink: #1a2b2b; --muted: #5c6b6b; --accent: #0f766e; --bg: #f7f6f2; --card: #ffffff; } /* ---- Base / default document styling ---- */ * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; } a { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; } .banner { width: 100%; height: clamp(80px, 14vw, 130px); background-image: url(/banner.svg); background-repeat: repeat; background-size: auto 50%; background-position: center; } .bottom-band { height: 12px; background: var(--accent); } header { padding: 40px 0 0; } header h1 { font-size: 2rem; letter-spacing: -0.5px; margin: 0 0 8px; } .back { font-size: 0.9rem; color: var(--muted); text-decoration: none; } .back:hover { text-decoration: underline; } .rule { width: 56px; height: 3px; background: var(--accent); border: none; margin: 48px 0; } h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin: 36px 0 8px; } p { margin: 0 0 14px; font-size: 1rem; } ul { margin: 0 0 14px; padding-left: 22px; } li { margin-bottom: 6px; } address { font-style: normal; margin: 0 0 14px; } .lang-note { color: var(--muted); font-size: 0.9rem; } .stand { color: var(--muted); font-size: 0.9rem; margin-top: 32px; } footer { padding: 48px 0 70px; font-size: 0.85rem; } footer a { color: var(--muted); text-decoration: none; } footer a:hover { text-decoration: underline; } /* ============================================================ Landing page — (index.html) ============================================================ */ .home header { padding: 54px 0 0; text-align: center; } .home header h1 { font-size: 2.8rem; margin: 0 0 12px; } .home header .tagline { font-size: 1.3rem; color: var(--muted); margin: 0; } .home .rule { margin: 56px auto; } section { padding: 0; margin-bottom: 50px; } section:last-of-type { margin-bottom: 0; } section h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); margin: 0 0 12px; } section p { margin: 0 0 16px; font-size: 1.08rem; } .process-container { display: flex; flex-direction: column; gap: 20px; } .process-item { display: flex; align-items: flex-start; gap: 20px; } .process-label { font-weight: bold; width: 160px; flex-shrink: 0; text-align: right; } .process-description { flex-grow: 1; } .themes-box { background: var(--card); border: 1px solid rgba(26, 43, 43, 0.08); border-left: 3px solid var(--accent); padding: 22px 28px; margin-top: 32px; box-shadow: 0 1px 2px rgba(26, 43, 43, 0.04); } .themes-heading { font-style: italic; text-decoration: underline; text-underline-offset: 3px; margin: 0 0 14px; font-size: 1.02rem; } .themes { margin: 0; padding-left: 20px; } .themes li { font-size: 1.08rem; margin-bottom: 10px; } .themes li:last-child { margin-bottom: 0; } .themes .eg { color: var(--muted); } .home footer { text-align: center; padding: 0 0 70px; font-size: 1rem; } .contact-name { font-weight: 600; margin: 0 0 4px; } .contact-line { color: var(--muted); margin: 0; } .contact-line a { color: var(--accent); } .legal-links { margin: 32px 0 0; font-size: 0.85rem; } .legal-links a { color: var(--muted); } @media (max-width: 560px) { .process-item { flex-direction: column; gap: 4px; } .process-label { width: auto; text-align: left; } }