/* Projektzeit website. System fonts only, no external resources. */

:root {
  color-scheme: light dark;
  --tint: #8557f5;        /* app accent colour, light appearance */
  --tint-text: #6e3fe0;   /* darker shade for text on white (6.1:1) */
  --button-bg: #6e3fe0;
  --button-fg: #ffffff;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --fg: #1d1d1f;
  --fg-2: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --hairline: rgba(0, 0, 0, 0.12);
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.32);
  --header-bg: rgba(255, 255, 255, 0.82);
  --hero-tint: #f5f0ff;   /* keeps --fg-2 at 4.5:1 where the tint is strongest */

  /* One spacing step for every major band of the page. */
  --band: clamp(3.5rem, 9vw, 6.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tint: #ad85ff;      /* app accent colour, dark appearance */
    --tint-text: #ad85ff;
    --button-bg: #7a4beb;
    --button-fg: #ffffff;
    --bg: #000000;
    --bg-alt: #1c1c1e;
    --fg: #f5f5f7;
    --fg-2: #a1a1a6;
    --line: rgba(255, 255, 255, 0.14);
    --hairline: rgba(255, 255, 255, 0.18);
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    --header-bg: rgba(0, 0, 0, 0.72);
    --hero-tint: #150e28;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

/* The column keeps the footer at the bottom of the window on short pages
   such as the imprint, instead of letting it ride up under the text. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--tint-text); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--tint);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.skip {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: 10px;
  font-weight: 600;
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.6rem;
  color: var(--fg);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.site-nav > a {
  color: var(--fg);
  font-size: 0.95rem;
}
.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
}
.lang a,
.lang span {
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg-2);
}
.lang a:hover { text-decoration: none; color: var(--fg); }
.lang span[aria-current] {
  background: var(--fg);
  color: var(--bg);
}
@media (max-width: 400px) {
  .brand { font-size: 1rem; }
  .site-nav { gap: 0.9rem; }
  .lang a,
  .lang span { padding: 0.15rem 0.55rem; }
}

/* Hero */

main {
  flex: 1 0 auto;
  scroll-margin-top: 56px;
}

.intro {
  background: linear-gradient(var(--hero-tint), var(--bg) 85%);
}

.hero {
  padding-block: clamp(3rem, 8vw, 5.5rem) 0;
  text-align: center;
}

/* The icon draws itself once, like a clock: the minute hand sweeps from
   twelve to four, the sector fills behind it and the hour hand follows by
   ten degrees. The SVG only carries the movement. The exported icon fades in
   on top when the hand arrives, so the icon at rest is the real artwork. */
.hero-icon {
  position: relative;
  width: clamp(88px, 9vw, 112px);
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
}
.hero-icon svg,
.hero-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.icon-run { display: none; }
.icon-run .icon-hour,
.icon-run .icon-minute {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.icon-run .icon-hour { transform: rotate(10deg); }
.icon-run .icon-minute { transform: rotate(120deg); }
.icon-run .icon-sector { stroke-dasharray: 418.88 1256.64; } /* 120° of r = 200 */

.eyebrow {
  margin: 0 0 0.6rem;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: var(--tint-text);
}
.hero h1 {
  font-size: clamp(2.25rem, 5.8vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 auto 1rem;
  max-width: 20ch;
}
.hero .lead {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: var(--fg-2);
  margin: 0 auto 1rem;
  max-width: 40ch;
}
.hero .lead span {
  display: block;
  text-wrap: balance;
}
.hero .note {
  margin: 0.25rem 0 0;
  text-wrap: balance;
  font-size: 0.85rem;
  color: var(--fg-2);
}

/* App Store badge: official artwork, never altered or animated. The margin
   keeps the clear space Apple asks for (a quarter of the badge height on
   every side). Apple allows one badge per layout, so the page has only this. */
.badge {
  display: inline-block;
  margin: 14px;
  line-height: 0;
  border-radius: 8px;
}
.badge img {
  display: block;
  height: 54px;
  width: auto;
}
@media (max-width: 480px) {
  .badge img { height: 48px; }
  .badge { margin: 12px; }
}

/* Screenshots. Plain app screens, no device imagery: Apple allows only its
   own product bezels and forbids moving them, so the page shows the screen
   and nothing around it. The Mac window brings its own rounded corners. */

.stage {
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--band);
}
.screens {
  position: relative;
  max-width: 940px;
  margin-inline: auto;
  padding-bottom: 7%; /* the phone stands below the window's edge */
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot-mac { width: 84%; }
.shot-mac img { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.2)); }
.shot-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  border-radius: 13% / 6%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow);
}
@media (max-width: 600px) {
  .screens { padding-bottom: 12%; }
  .shot-mac { width: 90%; }
  .shot-phone { width: 32%; }
}

@media (prefers-reduced-motion: no-preference) {
  .icon-run { display: block; }
  .icon-run .icon-hour,
  .icon-run .icon-minute,
  .icon-run .icon-sector { animation: 1.4s 0.3s cubic-bezier(0.65, 0, 0.35, 1) both; }
  .icon-run .icon-hour { animation-name: icon-hour; }
  .icon-run .icon-minute { animation-name: icon-minute; }
  .icon-run .icon-sector { animation-name: icon-sector; }
  .hero-icon img { animation: fade-in 0.35s 1.7s both; }

  .screens .shot { animation: rise 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .screens .shot-phone { animation-delay: 0.35s; }
}
@keyframes icon-hour { from { transform: rotate(0deg); } }
@keyframes icon-minute { from { transform: rotate(0deg); } }
@keyframes icon-sector { from { stroke-dashoffset: 418.88; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }

/* Text pages */

.prose {
  max-width: 720px;
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--band);
}
.prose h1 {
  font-size: clamp(min(1.9rem, 8.5vw), 4vw, 2.6rem); /* "Datenschutzerklärung" fits at 320px */
  line-height: 1.12;
  margin: 0 0 0.5rem;
}
.prose .updated {
  color: var(--fg-2);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}
.prose h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.5rem;
}
.prose p,
.prose li { line-height: 1.6; }
.prose p { margin: 0 0 1rem; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.35rem; }
.prose a { overflow-wrap: anywhere; }
.prose address {
  font-style: normal;
  margin: 0 0 1rem;
}

/* Help page: a tour through the app's sections. The table of contents is
   grouped like the app, each section opens with a small heading, and each app
   screen sits in a row beside the text it shows, on alternating sides. On
   narrow screens the screen follows its text. */

.toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 2rem;
  margin: 2rem 0 0.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: var(--bg-alt);
}
.prose .toc p {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.prose .toc ul { margin: 0; padding: 0; list-style: none; }
.prose .toc li { margin: 0.15rem 0; }

.help [id] { scroll-margin-top: 72px; } /* clear of the sticky header */
.prose .area {
  margin: 3.5rem 0 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tint-text);
}
.help h3 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.help-row {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 2.25rem;
  margin-block: 2.75rem;
}
.help-row.flip { grid-template-columns: 1fr 190px; }
.help-row.flip .help-shot { order: 1; }
.help-row h3 { margin-top: 0; }
.help-row p:last-child { margin-bottom: 0; }
.help-shot {
  margin: 0;
  border-radius: 13% / 6%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow);
}
.help-shot img { display: block; width: 100%; height: auto; }
.help-sheet { border-radius: 4px; background: #ffffff; }

/* A long section keeps its screen in view while its text scrolls past. */
.help-long { align-items: start; }
.help-long .help-shot { position: sticky; top: 80px; }
.help dl { margin: 0 0 1rem; }
.help dt { font-weight: 600; }
.help dd { margin: 0 0 0.7rem; }

/* A setting beside the feature it changes: where it is, then what it does. */
.setting {
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--bg-alt);
  font-size: 0.95rem;
}
.prose .setting p { margin: 0 0 0.5rem; }
.prose .setting .setting-path {
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tint-text);
}
.prose .setting p + .setting-path { margin-top: 0.8rem; }
.prose .setting > :last-child,
.help .setting dd:last-child { margin-bottom: 0; }

/* Marks what needs Project Time Pro, right at its heading. */
.pro-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 14%, transparent);
  color: var(--tint-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: 0.15em;
}

/* The numbers of the rings drawn into the screen beside the text. Same purple
   in both appearances, like the rings. */
.mark {
  display: inline-grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.1em;
  border-radius: 50%;
  background: #8557f5;
  color: #ffffff;
  font-size: 0.8em;
  font-weight: 700;
  vertical-align: 0.1em;
}

@media (max-width: 600px) {
  .help-row,
  .help-row.flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .help-row .help-shot { order: 1; width: min(230px, 66%); margin-inline: auto; }
  .help-long .help-shot { position: static; }
}

.button {
  display: inline-block;
  background: var(--button-bg);
  color: var(--button-fg);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  margin-block: 0.5rem 1rem;
}
.button:hover { text-decoration: none; filter: brightness(1.08); }

/* Footer */

.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: 2rem 2.5rem;
  font-size: 0.8rem;
  color: var(--fg-2);
}
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}
.site-footer nav a { color: var(--fg); }
.site-footer p { margin: 0.25rem 0; max-width: 80ch; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}