/* Palette: Maranatha's "graphite" — cool neutrals, one electric blue, taken from lib/theme/palettes.dart in the app. DARK ONLY, deliberately. There is no light palette and no prefers-color-scheme block: the site ships one appearance regardless of the visitor's system setting. `color-scheme: dark` is what tells the browser so — without it, scrollbars, focus rings and any native control render in the light scheme and sit wrong against the page. That also retires the light-theme contrast note that used to live here: the accent is 7.33:1 against this ground, well clear of the 4.5:1 AA floor. */ :root{ color-scheme:dark; --bg:#08090C; --surface:#16181D; --ink:#F3F4F7; --mute:#8E949F; --rule:#3A3F4A; --accent:#7C97FF; --hero:#12141A; --hero-ink:#F3F4F7; --wash:#232C57; --on-wash:#DDE3FF; --glow:rgba(124,151,255,.13); --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--accent)} img{max-width:100%;height:auto} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;z-index:10;background:var(--surface); padding:10px 14px;border:1px solid var(--rule);border-radius:6px} /* ------------------------------------------------------------------- bar */ .bar{background:var(--hero);color:var(--hero-ink); border-bottom:1px solid var(--rule)} /* 8px, not the 14px this started with: the bar is sized by the logo, so every pixel here is doubled and added to the bar's height. The logo art has had its transparent margin cropped off too — the file was 500x333 with the mark occupying only 476x235, so a third of the bar's height was empty pixels. */ .bar-in{max-width:60rem;margin:0 auto;padding:8px 24px; display:flex;align-items:center;gap:22px;flex-wrap:wrap} .bar a{color:inherit;text-decoration:none} .brand{display:flex;align-items:center;margin-right:auto} .brand img{width:200px;display:block} nav ul{display:flex;gap:20px;margin:0;padding:14px 0;list-style:none;flex-wrap:wrap} nav a{font-size:.94rem;color:var(--mute);padding-block:4px; transition:color .15s} nav a:hover{color:var(--ink)} nav a[aria-current=page]{color:var(--ink);font-weight:600} .lang{font-size:.82rem;letter-spacing:.06em;color:var(--mute);white-space:nowrap; margin:0;padding:14px 0} /* Once the bar wraps, the logo is no longer the tallest thing in its own row and a bar with no vertical padding puts it flush against both edges. */ @media (max-width:660px){ .bar-in{padding-block:14px;gap:4px 22px} nav ul{padding-block:8px} .lang{padding-block:4px} } .lang a{color:var(--mute)} .lang a:hover{color:var(--ink)} .lang [aria-current]{color:var(--ink);font-weight:700} /* ------------------------------------------------------------------ hero */ /* Decoration only — a soft wash of the accent behind the headline so the top of the page is not a flat sheet. Pure CSS: an image here would be a request, and the privacy policy says there are none. Painted on .hero itself rather than an oversized ::before. The pseudo-element was a box larger than the hero, and its own edge showed as a straight seam wherever the gradient had not finished fading by the time it ran out. */ .hero{border-bottom:1px solid var(--rule);background-image: radial-gradient(70% 80% at 12% 8%, var(--glow), transparent 62%), radial-gradient(55% 66% at 88% 0%, var(--glow), transparent 68%)} .hero-in{max-width:60rem;margin:0 auto;padding:96px 24px 84px} /* hyphens:auto matters in German, not as polish. "Datenschutzerklärung" is one twenty-letter word with nowhere to wrap, and at the hero size it is wider than a 375px screen — it pushed the whole page into horizontal scroll. The lang attribute on is what lets the browser hyphenate it correctly. */ h1{font-size:clamp(2.3rem,6.2vw,3.6rem);line-height:1.04;letter-spacing:-.035em; margin:0 0 18px;text-wrap:balance;font-weight:700; overflow-wrap:break-word;hyphens:auto} .tagline{display:inline-block;margin:0 0 22px;font-size:.82rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--on-wash); background:var(--wash);padding:7px 14px;border-radius:999px} .lede{font-size:clamp(1.12rem,2.1vw,1.32rem);line-height:1.5;margin:0; max-width:30em;color:var(--ink)} .sub{font-size:clamp(1.02rem,1.9vw,1.16rem);line-height:1.5;color:var(--mute); margin:12px 0 0;max-width:32em} .hero .body{margin:26px 0 0;max-width:34em;color:var(--mute)} /* --------------------------------------------------------------- content */ .wrap{max-width:60rem;margin:0 auto;padding:0 24px 96px} /* The home page's stacked sections. These were used in index.html and defined NOWHERE — this stylesheet was copied from dgmd-software.de, which lays its pages out with .wrap. The result had no max-width, no centring and, worst of all, no side padding: every band ran the full width of the window and the first character of each line was clipped off the left edge. It looked like a broken font rather than a missing rule, which is why it survived a read-through. A hairline between bands, so the sections read as separate without each needing a heading to announce itself. */ .band{border-top:1px solid var(--rule)} .band:first-of-type{border-top:0} .band-in{max-width:60rem;margin:0 auto;padding:56px 24px} /* Lists that are prose rather than an inventory: no bullet, and room to breathe between items, because each one is a sentence or two. */ .plain{list-style:none;margin:0;padding:0;display:grid;gap:18px} .plain li{max-width:46em;color:var(--mute)} .plain li strong{color:var(--ink)} .plain a{color:var(--accent)} .plain.two{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:20px 40px} /* --------------------------------------------------- the app link The one thing somebody who came here to USE the app is looking for, so it is a filled button in the bar and again in the hero — not a nav item that reads like Privacy and Terms. */ .cta{display:inline-block;background:var(--accent);color:#11131A; text-decoration:none;font-weight:700;font-size:.92rem; padding:9px 18px;border-radius:999px;white-space:nowrap; transition:filter .15s ease} .cta:hover,.cta:focus-visible{filter:brightness(1.12)} .cta-lg{font-size:1.02rem;padding:13px 26px} .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px; margin:30px 0 0;max-width:none} .hero-actions .note{color:var(--mute);font-size:.92rem;max-width:22em} .hero .sub{margin-top:34px;font-size:1rem;color:var(--mute)} /* ------------------------------------------------ screenshot sections Text and phone side by side, alternating which side the phone is on. Below 860px they stack — and the TEXT goes first whichever side the phone was on, because a column of pictures with the explanation underneath reads backwards on a narrow screen. */ .shot{display:grid;gap:32px 56px;align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,260px)} .shot-right{grid-template-columns:minmax(0,1fr) minmax(0,260px)} .shot .shot-text{min-width:0} .shot .shot-img{margin:0;justify-self:center} .shot .shot-img img{display:block;width:100%;max-width:260px;height:auto; border-radius:22px;border:1px solid var(--rule); box-shadow:0 18px 40px rgba(0,0,0,.45)} /* The phone first in the source for the left-hand variant, so the reading order matches the visual one for anything that ignores the grid. */ .shot:not(.shot-right){grid-template-columns:minmax(0,260px) minmax(0,1fr)} .shot h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.02em; margin:0 0 14px;color:var(--ink);text-transform:none} @media (max-width:860px){ .shot,.shot:not(.shot-right){grid-template-columns:1fr;gap:26px} .shot .shot-text{order:1} .shot .shot-img{order:2} .shot .shot-img img{max-width:230px} } @media (max-width:660px){ .cta{padding:8px 15px;font-size:.86rem} } /* Scoped to .wrap. Unscoped, this also hit .hero — which IS a
— and pushed it 72px clear of the bar, leaving a band of page background between the two that read as a second, empty banner. */ .wrap section{margin-top:72px} h2{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);margin:0 0 24px} h3{font-size:1rem;margin:28px 0 6px} p{max-width:36em} .cards{margin:0;padding:0;list-style:none;display:grid;gap:16px; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} .cards li{background:var(--surface);border:1px solid var(--rule); border-radius:12px;padding:26px 24px 28px; transition:border-color .18s,transform .18s,box-shadow .18s} .cards li:hover{border-color:var(--accent);transform:translateY(-2px); box-shadow:var(--shadow)} .cards svg{width:22px;height:22px;display:block} /* .cards .icon, not .icon: the chip is a inside .cards, so the `.cards span` rule above outranks a bare class and was overriding both display:grid — leaving the glyph pinned to the top-left instead of centred — and the colour. */ .cards .icon{width:42px;height:42px;border-radius:10px;background:var(--wash); color:var(--on-wash);display:grid;place-items:center;margin-bottom:18px} .cards b{display:block;margin-bottom:6px;font-size:1.06rem;letter-spacing:-.01em} .cards span{color:var(--mute);font-size:.95rem;line-height:1.55;display:block} /* Two fixed columns rather than auto-fit. auto-fit fits as many 15rem tracks as the 60rem wrap allows, which is three — so the address spanning the row would leave an empty third cell beside the phone and email. */ .contact{display:grid;gap:16px;margin:0;padding:0;list-style:none; grid-template-columns:repeat(2,minmax(0,1fr)); /* Each card as tall as its own contents. Stretched, the phone and email cards match the postal address and are mostly empty. */ align-items:start} /* The address takes a row of its own, as wide as the two cards above it. */ .contact .wide{grid-column:1 / -1} @media (max-width:640px){.contact{grid-template-columns:1fr}} .contact li{background:var(--surface);border:1px solid var(--rule); border-radius:12px;padding:22px 24px; transition:border-color .18s} .contact li:hover{border-color:var(--accent)} .contact b{display:block;font-size:.74rem;text-transform:uppercase; letter-spacing:.12em;color:var(--mute);margin-bottom:6px;font-weight:700} .contact a,.contact address{font-style:normal;font-size:1.06rem;line-height:1.5} .contact address{color:var(--ink)} /* ----------------------------------------------------------------- legal */ .legal{padding-top:72px} .legal h1{font-size:clamp(1.9rem,4.5vw,2.5rem);margin-bottom:12px} .legal h2{font-size:1.06rem;text-transform:none;letter-spacing:-.01em; color:var(--ink);margin:40px 0 12px} .legal .lede{font-size:1.08rem;color:var(--mute);margin-bottom:8px} .legal p,.legal li{font-size:.97rem;color:var(--mute)} .legal ul{padding-left:1.15rem;max-width:36em} .legal li{margin-bottom:4px} .legal dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px; margin:0 0 20px;font-size:.97rem;background:var(--surface); border:1px solid var(--rule);border-radius:12px;padding:22px 24px} .legal dt{color:var(--mute)} .legal dd{margin:0} .legal code{background:var(--wash);color:var(--on-wash); padding:1px 6px;border-radius:4px;font-size:.88em} .legal h4{font-size:.95rem;margin:26px 0 4px;color:var(--ink)} /* Wide content scrolls inside its own box so the page body never does. */ .legal .scroll{overflow-x:auto;margin:0 0 18px} .legal table{border-collapse:collapse;font-size:.93rem;min-width:34rem;width:100%} .legal th,.legal td{text-align:left;vertical-align:top;padding:11px 14px; border-bottom:1px solid var(--rule);color:var(--mute)} .legal th{color:var(--ink);font-weight:600;white-space:nowrap} .legal .basis{font-size:.9rem;color:var(--mute);margin:4px 0 0} .legal .basis b{color:var(--ink);font-weight:600} /* ---------------------------------------------------------------- footer */ footer{border-top:1px solid var(--rule);background:var(--hero); padding:28px 24px 48px;color:var(--mute);font-size:.9rem} .foot-in{max-width:60rem;margin:0 auto;display:flex;gap:10px 22px; flex-wrap:wrap;align-items:center} .foot-in nav ul{gap:20px;margin-left:auto} .center{min-height:66vh;display:grid;place-items:center;text-align:center; padding-top:72px} @media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }