/*
 * One stylesheet for the whole site.
 *
 * Deliberately self-contained: no web fonts, no CDN, no analytics, nothing
 * loaded from another host. That is not minimalism for its own sake — it is
 * what lets the privacy policy say "this site sets no cookies and contacts no
 * third party" and be true, which is the shortest honest version of that
 * document.
 *
 * Colours are taken from the logo: navy, sky, gold.
 */

:root {
  --navy: #062a5f;
  --sky: #3090c1;
  --gold: #fbdd33;
  --ink: #16233a;
  --muted: #5a6a85;
  --paper: #fdfdfb;
  --rule: #e3e7ee;
  --measure: 38rem;
  /*
   * The showcase measure. 38rem is right for reading a legal document and wrong
   * for a product page — on a desktop screen it reads as a phone page that
   * forgot to grow. Only the four showcase pages opt into this, by way of
   * `.wrap--wide`; the privacy policies, the terms, the deletion pages and the
   * Impressum keep the reading measure, because there it is typography rather
   * than timidity.
   */
  --measure-wide: 70rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem 1.25rem 4rem;
  background: var(--paper);
  color: var(--ink);
  /* System stack: nothing to download, and it looks native everywhere. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* ---- the landing page ------------------------------------------------- */

.hero {
  /* Centred in the viewport on a phone as well as a desktop, without the
     logo touching the edges on a 320px screen. */
  min-height: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}

.hero__logo {
  width: min(100%, 30rem);
  height: auto;
  display: block;
}

.hero__line {
  margin: 0;
  max-width: 30rem;
  color: var(--muted);
  font-size: 1.125rem;
  text-wrap: balance;
}

.hero__mail {
  font-weight: 600;
  color: var(--navy);
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---- the language switch ----------------------------------------------- */

/*
 * Every page of this site exists in German and in English, each at its own
 * URL, and the switch sits in the same place on all of them: top right, above
 * the logo, before anything else in the page.
 *
 * No flags. A flag stands for a country, not for a language, and the two are
 * not the same thing. The active language is printed but not linked — a link
 * to the page you are already on is a small lie.
 *
 * It lives in this shared stylesheet rather than in a per-product one because
 * it is a property of the site, not of a page. It used to be a floated
 * `.sprache` paragraph on the two Rille product pages only.
 */
.sprachwahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.sprachwahl a {
  color: var(--muted);
}

.sprachwahl a:hover {
  color: var(--navy);
}

.sprachwahl [aria-current='true'] {
  color: var(--navy);
  font-weight: 600;
}

/* The separator is decoration; a screen reader should read "Deutsch English"
   and not "Deutsch middle dot English". */
.sprachwahl__trenner {
  color: var(--rule);
}

/* Used on the Impressum, which is a German legal document and has no English
   counterpart to point at. Saying so is better than an empty corner. */
.sprachwahl__hinweis {
  font-style: italic;
}

/* ---- inner pages ------------------------------------------------------- */

.page__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.page__back:hover {
  color: var(--navy);
}

.page__back img {
  width: 8rem;
  height: auto;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--navy);
}

h2 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.0625rem;
  color: var(--navy);
}

p,
ul {
  margin: 0 0 1rem;
}

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.35rem;
}

address {
  font-style: normal;
  margin-bottom: 1rem;
}

a {
  color: var(--sky);
}

a:hover {
  color: var(--navy);
}

.note {
  border-left: 3px solid var(--gold);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---- footer ------------------------------------------------------------ */

.foot {
  max-width: var(--measure);
  margin: 3rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  font-size: 0.9375rem;
  color: var(--muted);
}

.foot a {
  color: var(--muted);
}

.foot a:hover {
  color: var(--navy);
}

/* ---- the wide layout, desktop only ------------------------------------- */

/*
 * Everything below is inside one media query on purpose. Below 64rem not a
 * single rule here applies, so the phone and the tablet render exactly the
 * markup they rendered before any of this existed — which is what was asked
 * for, the small screen being the one that was already right.
 *
 * 64rem rather than a rounder number: it is the width at which a 70rem frame
 * stops being wishful, and it sits above every phone in landscape.
 */
@media (min-width: 64rem) {
  .wrap--wide,
  .foot--wide {
    max-width: var(--measure-wide);
  }

  /* The company landing page has too little on it to justify columns. It gets
     air and a larger type step instead, which is what "dignified" looks like
     when there are four lines of copy. */
  .wrap--wide .hero {
    min-height: min(74vh, 38rem);
    gap: 2.25rem;
  }

  .wrap--wide .hero__logo {
    width: min(100%, 38rem);
  }

  .wrap--wide .hero__line {
    font-size: 1.3125rem;
    max-width: 42rem;
  }

  .wrap--wide .page__back img {
    width: 10rem;
  }
}