/* wholehour.app in the Organic palette, the same tokens as the app. Light and dark follow the system
   unless the visitor picks one in the footer (data-theme on <html>). Fonts are served from here.
   Text sizes, and the heights of what holds text, are in rem and breakpoints in em, so the page
   follows the font size the reader set in the browser (16 px = 1rem by default). */

@font-face { font-family: "Caprasimo"; font-weight: 400; font-display: swap; src: url("/fonts/Caprasimo-Regular.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("/fonts/Figtree-Regular.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("/fonts/Figtree-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("/fonts/Figtree-Bold.woff2") format("woff2"); }

:root {
  --bg: #f5ead8;
  --card: #fbf5ea;
  --text: #201e1d;
  --sec: #645c50;
  /* A shade darker than the app's accent: light text on it, and the focus ring on the
     background, keep 4.5:1 (WCAG AA) at body sizes. */
  --acc: #9f5522;
  --acc-text: #8c491a;
  /* A button being pressed (or hovered with a mouse): a shade deeper than the accent. */
  --acc-press: #8c491a;
  --on-acc: #fff5ec;
  --tint: rgba(198, 113, 57, .14);
  --sep: rgba(32, 30, 29, .12);
  --band: #9f5522;
  --on-band: #fff5ec;
  /* The phone's lift: a filter, so the shadow fades out with the screenshot's lower edge. */
  --phone-shadow: drop-shadow(0 16px 20px rgba(64, 35, 16, .16)) drop-shadow(0 4px 6px rgba(64, 35, 16, .08));
  --font-heading: "Caprasimo", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --radius-lg: 28px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2e2b25;
    --card: #3a362f;
    --text: #f5ead8;
    --sec: #c0b6a5;
    --acc: #f6a06b;
    --acc-text: #f6a06b;
    --acc-press: #e8935f;
    --on-acc: #402310;
    --tint: rgba(246, 160, 107, .18);
    --sep: rgba(245, 234, 216, .12);
    --band: #643312;
    --on-band: #f5ead8;
    --phone-shadow: drop-shadow(0 16px 20px rgba(0, 0, 0, .4)) drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #2e2b25;
  --card: #3a362f;
  --text: #f5ead8;
  --sec: #c0b6a5;
  --acc: #f6a06b;
  --acc-text: #f6a06b;
  --acc-press: #e8935f;
  --on-acc: #402310;
  --tint: rgba(246, 160, 107, .18);
  --sep: rgba(245, 234, 216, .12);
  --band: #643312;
  --on-band: #f5ead8;
  --phone-shadow: drop-shadow(0 16px 20px rgba(0, 0, 0, .4)) drop-shadow(0 4px 6px rgba(0, 0, 0, .25));
  color-scheme: dark;
}

/* Two languages, each written on its own. Without a choice, English. */
html:not([data-lang="de"]) [data-l="de"],
html[data-lang="de"] [data-l="en"] { display: none !important; }

/* The screenshot that matches the appearance. */
.shot-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .shot-dark { display: block; }
}
:root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  /* The small viewport where there is one (Safari with its bars showing), so a short page does
     not scroll. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.5;
  /* A word longer than its line breaks rather than push the page sideways (large text, wide
     spacing); at the usual sizes no word is that long. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

a { color: var(--acc-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 8px; }

/* Hidden above the page by its own height, whatever the text size. Focused, it is a bar over
   the whole header row, so it never half-covers the wordmark or a button. */
.skip {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; min-height: 5rem;
  display: flex; align-items: center; justify-content: center; transform: translateY(-110%);
  background: var(--acc); color: var(--on-acc); font-weight: 600; text-decoration: none;
}
/* Focused, the bar covers the header row, where a mouse pointer often rests: a:hover's text
   colour would leave its label at 3:1 (1.7:1 in dark). */
.skip:hover { color: var(--on-acc); }
.skip:focus { transform: none; }
.skip:focus-visible { outline: 2px solid var(--on-acc); outline-offset: -6px; border-radius: 12px; }

/* Read by screen readers, not shown: the full name behind "DE" and "EN". */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* The pages draw edge to edge (viewport-fit=cover); in landscape the text keeps clear of an
   iPhone's sensor housing and rounded corners. */
.wrap, .narrow {
  width: 100%; margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.wrap { max-width: 1080px; }
.narrow { max-width: 760px; }

/* Header: the wordmark on the left; the navigation, Download and the language on the right. */

.site-header { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.wordmark { font-family: var(--font-heading); font-size: 1.75rem; line-height: 1; color: var(--text); text-decoration: none; }
.wordmark:hover { color: var(--text); }
.site-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.site-nav a {
  min-height: 2.75rem; padding: 0 14px; border-radius: 999px;
  display: flex; align-items: center;
  font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--text);
}
.site-nav a[aria-current="page"] { color: var(--acc-text); background: var(--tint); }
.site-nav a.download { padding: 0 16px; background: var(--acc); color: var(--on-acc); }
/* Hovered or pressed, Download goes a shade deeper, never paler: its label keeps 6.3:1 in light
   and 6.0:1 in dark. */
.site-nav a.download:active { background: var(--acc-press); }
@media (hover: hover) {
  .site-nav a:hover { background: var(--tint); }
  .site-nav a.download:hover { background: var(--acc-press); color: var(--on-acc); }
}
.lang-button { min-width: 2.75rem; justify-content: center; padding: 0 12px; }

/* The header keeps to one row. Where the whole navigation does not fit (German needs about
   800 px, more on an iPhone in landscape, whose safe areas take 59 px on each side), it shows the
   wordmark, Support, Download and the language switch, and below 384 px Support goes too. About,
   Terms and Privacy are in the footer, and the wordmark leads home. */
@media (max-width: 54em) {
  .site-nav .nav-wide { display: none; }
}
@media (max-width: 37.5em) {
  .site-header { column-gap: 8px; }
}
@media (max-width: 24em) {
  .site-nav .nav-roomy { display: none; }
}

/* Fingers get 44 px wherever there is something to tap (the footer's and the contents' links
   say so where they are drawn). */
@media (pointer: coarse) {
  .wordmark { padding: 8px 0; }
}

/* Home */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 72px;
}
/* Beside the phone, the text takes the wider column so the headline keeps its three lines. */
@media (min-width: 60em) {
  .hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.kicker { font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--acc-text); }
h1, h2 { font-family: var(--font-heading); font-weight: 400; margin: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* Three beats, one per line, at every width: "Sechzig Minuten." is the longest and fits from
   320 px with room to spare. */
.hero h1 { font-size: clamp(1.875rem, 9.5vw, 4rem); line-height: 1.02; letter-spacing: -.01em; }
.hero h1 .beat { display: block; }
@media (min-width: 60em) {
  .hero h1 { font-size: clamp(3rem, 5.6vw, 4rem); }
}
.lead { margin: 0; max-width: 34em; font-size: 1.1875rem; color: var(--sec); text-wrap: pretty; }
/* The way to the App Store: a button in the site's own style. Apple's badge may only be used as
   Apple's official artwork, unmodified, and that artwork is not in this repository yet. */
.store { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; }
.store-link {
  min-height: 3.5rem; padding: 0 26px; border-radius: 999px;
  display: inline-flex; align-items: center;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.2; text-decoration: none;
  background: var(--acc); color: var(--on-acc);
}
.store-link:hover { color: var(--on-acc); }
.store-link:active { background: var(--acc-press); }
@media (hover: hover) {
  .store-link:hover { background: var(--acc-press); }
}
.store-note { font-size: .875rem; color: var(--sec); }
/* The top of the app's Sunday tab, cut above the proposals and the tab bar; it fades into the
   page where the cut is. */
.phone {
  display: flex; justify-content: center;
  /* Room for the shadow inside the box the fade is drawn in: the page's 24 px gutter. */
  padding: 24px 24px 0; margin: -24px -24px 0;
  /* Shadow first, then the fade: both thin out together at the lower edge. */
  filter: var(--phone-shadow);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.phone img { width: 320px; max-width: 100%; height: auto; aspect-ratio: 320 / 540; border-radius: 48px 48px 0 0; }

.band { background: var(--band); color: var(--on-band); }
.band .wrap { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 36px; }
.band h2 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; }
.week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.week li { display: flex; flex-direction: column; gap: 8px; }
/* From a small tablet up, a timetable: the day on the left, what happens beside it. */
@media (min-width: 37.5em) {
  .week { gap: 24px; }
  .week li { display: grid; grid-template-columns: 11em minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
}
/* Wide, the week's five steps in one row, Sunday last (never alone on a row of its own). */
@media (min-width: 62.5em) {
  .week { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
  .week li { display: flex; }
}
.week .when { font-weight: 600; font-size: .9375rem; }
.week .what { font-size: 1.1875rem; line-height: 1.4; text-wrap: pretty; }

/* Documents: terms, privacy, imprint */

.doc { padding-top: 40px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 32px; }
.doc-head { display: flex; flex-direction: column; gap: 10px; }
.doc-head h1 { font-size: clamp(2.125rem, 6vw, 3.75rem); line-height: 1.05; text-wrap: balance; }
.doc-meta { font-size: .9375rem; color: var(--sec); margin: 0; }
.doc section { display: flex; flex-direction: column; gap: 8px; }
.doc section h2 { font-family: var(--font-body); font-size: 1.3125rem; font-weight: 700; line-height: 1.3; }
/* A part of a section that must stand apart from the rest (the right to object, Art. 21(4)
   GDPR): a heading of its own, a step below the section's. */
.doc section h3 { margin: 8px 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* A long German compound breaks rather than running past the edge (with large text, say). */
.doc p, .doc ul { margin: 0; color: var(--sec); text-wrap: pretty; overflow-wrap: break-word; }
.doc ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.doc strong { color: var(--text); font-weight: 600; }
/* A storage key in the text: Figtree on a tinted chip, not the platform's monospace (Courier on
   iOS), so the page keeps to its two typefaces. */
.doc code { font-family: inherit; font-size: .95em; background: var(--tint); padding: 1px 6px; border-radius: 6px; }
/* German runs long compounds: hyphenated, its lines are not ragged on a phone. */
.doc p:lang(de), .doc li:lang(de), .faq .answer:lang(de) { -webkit-hyphens: auto; hyphens: auto; }

/* Support */

.doc h2.display { font-family: var(--font-heading); font-weight: 400; font-size: 2rem; line-height: 1.15; margin-bottom: 8px; }
/* A card's title ("In danger?") is a heading, so heading navigation finds it, drawn as the bold
   first line of the card. */
.card-title { font-family: var(--font-body); font-size: inherit; font-weight: 600; line-height: inherit; }
/* Nothing clips a card's content: a focus ring or a long word stays whole. */
.card { background: var(--card); border-radius: var(--radius-lg); }
.card-pad { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.card-pad p { margin: 0; }
.faq details { box-shadow: inset 0 -1px 0 var(--sep); }
.faq details:nth-last-child(-n+2) { box-shadow: none; }
.faq summary {
  display: flex; align-items: center; gap: 12px;
  min-height: 3.5rem; padding: 12px 20px;
  cursor: pointer; font-weight: 600; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* The focus ring sits inside the card, its corners following the card's. */
.faq summary:focus-visible { outline-offset: -4px; border-radius: var(--radius-lg); }
.faq summary span { flex: 1; min-width: 0; }
.faq summary svg { flex: none; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding: 0 20px 18px; color: var(--sec); text-wrap: pretty; overflow-wrap: break-word; }

/* The contents of the long legal pages: a card like the FAQ's, closed until asked for. Each link
   leads to a section in either language (the id is on the pair). */
.toc[open] summary svg { transform: rotate(180deg); }
.toc ol { list-style: none; margin: 0; padding: 0 20px 14px; columns: 2 15em; column-gap: 24px; }
.toc li { break-inside: avoid; }
/* With the browser's text doubled, "13. Verbraucherstreitbeilegung" was 461 px wide: a long German
   word here carries a soft hyphen, and any word may break where it must, so no entry pushes the
   page sideways (the same for the footer's links). */
.toc a { display: flex; align-items: center; min-height: 2.25rem; padding: 4px 0; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .toc a { min-height: 2.75rem; }
}
@media (hover: hover) {
  .toc a:hover { color: var(--acc-text); text-decoration: underline; }
}

/* Footer */

.site-footer { border-top: 1px solid var(--sep); }
.site-footer .wrap {
  padding-top: 28px; padding-bottom: max(40px, env(safe-area-inset-bottom));
  display: flex; gap: 20px 28px; flex-wrap: wrap; align-items: center; font-size: .9375rem;
}
.site-footer .wordmark { font-size: 1.25rem; }
.site-footer .spacer { flex: 1; }
/* With a mouse too, each link is at least 24 px tall (WCAG 2.5.8): the line alone gives 23 px,
   and where the links wrap (German at 320 px, a window zoomed to 400 %) the rows touched. */
.footer-links { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.footer-links a { display: inline-flex; align-items: center; min-height: max(24px, 1.5rem); overflow-wrap: anywhere; }
@media (pointer: coarse) {
  .footer-links a { min-height: 2.75rem; }
}
.footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Beside the switches, what a press keeps: the choice stays in this browser (localStorage), and
   the visitor is told so where they make it (§ 25 TDDDG; the privacy policy, section 11). Where
   there is no room beside the buttons it wraps under them. Secondary text: 5.5:1 light, 7.0:1 dark. */
.footer-note { margin: 0; font-size: .875rem; color: var(--sec); }
.pill-button {
  min-height: 2.75rem; padding: 0 14px; border: 0; border-radius: 999px;
  display: flex; align-items: center;
  font: 600 .875rem var(--font-body); cursor: pointer;
  /* The outline gives the button its shape against the page (5.5:1 light, 7:1 dark). */
  background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1px var(--sec);
}
.pill-button:active { background: var(--tint); }
@media (hover: hover) {
  .pill-button:hover { background: var(--tint); }
}
/* Windows' contrast themes (forced colours) drop box-shadows and backgrounds: the buttons get their
   outline back as a border in the theme's button colour, and the current page an underline. */
@media (forced-colors: active) {
  .pill-button { border: 1px solid ButtonText; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
}

/* The theme switches at once, every surface together: a fading body under cards that change at
   once passed through a muddy frame. */
@media (prefers-reduced-motion: no-preference) {
  .faq summary svg { transition: transform .2s ease; }
}

/* Printed, the terms and the privacy policy are the text alone, in the language shown: black on
   white whatever the appearance (the dark tokens would print pale), without header and footer. */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme] {
    --bg: #fff; --card: #fff; --text: #000; --sec: #000; --acc-text: #000;
    --tint: transparent; --sep: #000; --band: #fff; --on-band: #000;
    color-scheme: light;
  }
  .skip, .site-header, .site-footer, .store, .phone, .toc { display: none !important; }
  a { color: #000; }
}

/* Invite: with a code in the address (data-invite on <html>, set by invite.js in the head) the
   invitation and its code; without one, what an invitation is. */

html:not([data-invite]) .if-invited, html[data-invite] .if-not-invited { display: none; }
.invite-code { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.invite-label { color: var(--sec); font-size: .9375rem; flex-basis: 100%; }
/* Any eight-character code fits on one line down to 320 px; a longer one wraps rather than
   being cut off. Its width is its own, so the button moves below it when both do not fit. */
.invite-code .code {
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(1.375rem, 8vw, 2.25rem); letter-spacing: .04em;
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
}
/* The page's one action looks like the header's Download: filled with the accent. */
.invite-code .pill-button { padding: 0 20px; background: var(--acc); color: var(--on-acc); box-shadow: none; }
.invite-code .pill-button:active { background: var(--acc-press); }
@media (hover: hover) {
  .invite-code .pill-button:hover { background: var(--acc-press); }
}
.steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; font-size: 1.1875rem; }
.invite .store { margin-top: 4px; }

/* The invite page says when the code is on the clipboard. */
.copied { font-size: .875rem; color: var(--sec); min-height: 1.4em; }