/* 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 <html> 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}
/* Scoped to .wrap. Unscoped, this also hit .hero — which IS a <section> —
   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 <span> 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}
}