/* Fensterflora – Bald-verfügbar-Seite Farben als Tokens, damit sie später in die App übernommen werden können. Farbwelt nach den Konzeptbildern: Salbeigrün, Creme, Terrakotta. */ /* Baloo 2, selbst gehostet (SIL OFL 1.1) – siehe fonts/README.txt. Variable Datei, deshalb deckt ein Font-Face den ganzen Gewichtsbereich ab. */ @font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/baloo2-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #f4ecdd; --bg-2: #ebe0cd; --text: #3b382e; --muted: #6f6656; --line: #e0d3bd; --panel: #56684d; --panel-deep: #47563f; --on-panel: #fbf6ea; --on-panel-muted: #dde3d1; --panel-card: rgba(35, 43, 32, 0.3); --panel-line: rgba(251, 246, 234, 0.22); --accent: #d98c5f; --accent-text: #ffffff; --link: #4c7a52; /* Illustration */ --window: #fffaf0; --window-shade: #e9d7bc; --wood: #e2c29c; --wood-dark: #cba679; --pot: #d98c5f; --pot-rim: #e6a179; --pot-shade: #bf7449; --leaf: #7fb38a; --leaf-light: #9bc9a3; --stem: #5e9670; --hill: #c4dcbb; --hill-2: #aecca8; --cloud: #fffdf7; --can: #a6c9b1; --can-dark: #74a087; --can-rim: #bcd8c3; --bird: #8aa7b7; --bird-dark: #6b8a9c; --bird-light: #f3ece1; /* Himmel – wird per data-daytime am umgeschaltet */ --sky-top: #bfe0f2; --sky-bottom: #f6e7d3; --sun: #ffd98e; --stars: 0; --radius: 28px; --font: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Baloo 2", var(--font); color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #23241d; --bg-2: #2c2e25; --text: #efe8da; --muted: #b0a894; --line: #3c3e33; --panel: #3c4a37; --panel-deep: #34412f; --on-panel: #f1ece0; --on-panel-muted: #c9cdb9; --panel-card: rgba(0, 0, 0, 0.22); --panel-line: rgba(255, 255, 255, 0.14); --accent: #c47c53; --link: #9cc4a0; --window: #3b4238; --window-shade: #2e342c; --wood: #7a624f; --wood-dark: #5e4b3e; --pot: #b86f55; --pot-rim: #c98468; --pot-shade: #96583f; --leaf: #79ae85; --leaf-light: #8fc19a; --stem: #5b8e68; --hill: #7f9f86; --hill-2: #6d8f76; --cloud: #eceadf; --can: #6f8f78; --can-dark: #4e6b57; --can-rim: #82a38b; --bird: #7e9aa9; --bird-dark: #62808f; --bird-light: #dfd8cb; } } html[data-daytime="morning"] { --sky-top: #f7d6c6; --sky-bottom: #fcefd9; --sun: #ffc98e; } html[data-daytime="evening"] { --sky-top: #e9a99f; --sky-bottom: #f8d6b3; --sun: #ffb784; --hill: #c9b7a6; --hill-2: #b3a08f; --cloud: #fbe3d6; } html[data-daytime="night"] { --sky-top: #232a4d; --sky-bottom: #4a4b78; --sun: #f3eed8; --stars: 1; --hill: #394a55; --hill-2: #2f3f4a; --cloud: #5b5e86; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; } a { color: var(--link); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; } /* ---------- Grüne Hauptfläche ---------- */ .stage { position: relative; flex: 1; display: flex; flex-direction: column; background: radial-gradient(1100px 700px at 78% 18%, var(--panel), transparent 70%), linear-gradient(160deg, var(--panel) 0%, var(--panel-deep) 100%); color: var(--on-panel); padding-bottom: 72px; } .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; padding-bottom: 16px; } .brand { font-family: var(--font-display); display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.15rem; } .brand img { width: 34px; height: 34px; } .lang { font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--on-panel); background: var(--panel-card); border: 1px solid var(--panel-line); border-radius: 999px; padding: 7px 16px; cursor: pointer; } .lang:hover { background: rgba(35, 43, 32, 0.45); } .hero { flex: 1; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding-top: 12px; } .art { order: -1; } @media (min-width: 900px) { .hero { grid-template-columns: 1fr 1.05fr; gap: 56px; padding-top: 16px; } .art { order: 0; } .stage { padding-bottom: 64px; } } h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 8vw, 4.75rem); line-height: 1.02; letter-spacing: -0.025em; margin: 10px 0 12px; } .tagline { font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 600; line-height: 1.3; margin: 0 0 20px; max-width: 18em; } .badge { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-panel); background: var(--panel-card); border: 1px solid var(--panel-line); border-radius: 999px; padding: 6px 15px; } .card { background: var(--panel-card); border: 1px solid var(--panel-line); border-radius: var(--radius); padding: 22px 24px; max-width: 34em; } .intro { color: var(--on-panel-muted); margin: 0 0 16px; } .note { font-size: 0.9375rem; color: var(--on-panel-muted); margin: 12px 0 0; } /* Bildrahmen mit warmem Schein, wie in den Konzeptbildern */ .frame { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: 0 28px 60px rgba(30, 36, 26, 0.35); aspect-ratio: 368 / 276; background: linear-gradient(200deg, #f7d9b0 0%, #eab98d 38%, #d99a6d 65%, #b9d3c0 100%); } .frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px rgba(255, 222, 176, 0.5); pointer-events: none; } .frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .scene { display: block; width: 100%; height: 100%; } /* Farben der Illustration */ .sky-top { stop-color: var(--sky-top); } .sky-bottom { stop-color: var(--sky-bottom); } .sun { fill: var(--sun); } .stars { fill: #fff; opacity: var(--stars); } .cloud { fill: var(--cloud); opacity: 0.85; } .hill { fill: var(--hill); } .hill-2 { fill: var(--hill-2); } .window { fill: var(--window); } .frame-shade { fill: var(--window-shade); } .wood { fill: var(--wood); } .wood-dark { fill: var(--wood-dark); } .pot { fill: var(--pot); } .pot-rim { fill: var(--pot-rim); } .pot-shade { fill: var(--pot-shade); } .soil { fill: #7a5a45; } .can { fill: var(--can); } .can-dark { fill: var(--can-dark); } .can-spout { fill: var(--can); } .can-rim { fill: var(--can-rim); } .can-handle { fill: none; stroke: var(--can-dark); stroke-width: 4.5; stroke-linecap: round; } .bird { fill: var(--bird); } .bird-dark { fill: var(--bird-dark); } .bird-light { fill: var(--bird-light); } .beak { fill: var(--accent); } .eye { fill: #4a4034; } .leaf { fill: var(--leaf); } .leaf-light { fill: var(--leaf-light); } .stem { fill: none; stroke: var(--stem); stroke-width: 4; stroke-linecap: round; } .glare { fill: #fff; opacity: 0.2; } /* warmes Streulicht auf der Fensterbank */ .warmth { fill: #ffd9a3; opacity: 0.22; mix-blend-mode: soft-light; pointer-events: none; } .shadow { fill: #000; opacity: 0.09; } .plant { transform-box: view-box; transform-origin: 200px 222px; animation: sway 6s ease-in-out infinite; } .clouds { animation: drift 40s linear infinite alternate; } @keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } @keyframes drift { from { transform: translateX(-12px); } to { transform: translateX(16px); } } @media (prefers-reduced-motion: reduce) { .plant, .clouds { animation: none; } } /* Leiste mit den drei Werkzeugen, wie unter einer Fensterbank */ .toolbar { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; width: fit-content; position: relative; z-index: 1; margin: 0 auto; padding: 11px 22px; background: var(--panel-card); border: 1px solid var(--panel-line); border-radius: 0 0 22px 22px; border-top: none; } .toolbar li { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--on-panel); } .toolbar svg { width: 22px; height: 22px; flex: none; } .ico { fill: none; stroke: var(--on-panel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 420px) { .toolbar { gap: 8px 16px; padding: 12px 16px; } .toolbar li { font-size: 0.8125rem; } } /* Welliger Übergang zur Fußzeile */ .wave { display: block; width: 100%; height: 36px; fill: var(--bg); background: var(--panel-deep); margin-bottom: -1px; } /* ---------- Fußzeile ---------- */ .foot { padding-top: 18px; padding-bottom: 26px; font-size: 0.875rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; } .foot nav { display: flex; gap: 20px; } .foot a { color: var(--muted); } .foot a:hover { color: var(--text); } /* ---------- Rechtstexte ---------- */ .legal-page .wrap { max-width: 792px; } .legal-page .top { color: var(--text); padding-bottom: 8px; } .legal-page .foot { border-top: 1px solid var(--line); } .legal { flex: 1; padding-top: 8px; padding-bottom: 56px; } .legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: 24px; } .legal h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 32px 0 8px; } .legal p, .legal ul { margin: 0 0 12px; } .legal ul { padding-left: 1.25em; } .legal address { font-style: normal; margin-bottom: 12px; } .back { display: inline-block; margin-bottom: 8px; font-weight: 600; } /* ---------- 404 ---------- */ .center { flex: 1; display: grid; place-content: center; text-align: center; padding-bottom: 64px; }