/* SourTime — sourtime.axeptdesign.com
   Statische Seite, kein Build-Schritt, keine externen Requests (keine Web-Fonts,
   kein CDN) — damit die Datenschutzerklärung stimmt: die Seite lädt nichts nach. */

:root {
  color-scheme: light;

  /* Direkt aus Color+SourTime.swift übernommen, damit Website und App dieselbe
     Palette haben — nicht freihändig ändern, sondern dort nachschlagen. */
  --brand:        #8c6b47;  /* Color.crust  — auch die Logofarbe in der App */
  --brand-dark:   #59422e;  /* Color.rye */
  --ink:          #3b2d20;
  --ink-soft:     #6f5c48;
  --linen:        #f5f0e6;  /* Color.flour */
  --linen-deep:   #deccb2;  /* Color.dough — Fallback hinter dem Hero-Foto */
  --card:         #fffdf8;
  --rule:         #e6dbc9;

  --measure: 68ch;
  --wrap: 1120px;
  --radius: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand-dark); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sprungmarke für Tastatur-/Screenreader-Nutzung */
.skip {
  position: absolute; left: 0; top: -3rem; z-index: 10;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  transition: top .15s;
}
.skip:focus { top: 0; }

/* ---------------------------------------------------------------- Kopfzeile */

.site-head {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.35rem;
}

/* Die Wortmarke enthält den Namen bereits zweizeilig — daneben nicht nochmal
   „SourTime" setzen. Der Name steht als visually-hidden im Link. */
.brand { display: inline-flex; text-decoration: none; }
.brand img { height: 46px; width: auto; }

.site-head nav { display: flex; align-items: center; gap: 1.25rem; font-size: .95rem; }
.site-head nav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.site-head nav a:hover { color: var(--ink); }

.lang { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.lang a { padding: .2rem .7rem; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }

/* -------------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column;
  /* Das Brot sitzt im Foto oben rechts, die Textspalte nutzt die freie Fläche links. */
  background-image: url("/assets/hero-bread.jpg");
  background-size: cover;
  /* Das Foto hat das Brot oben rechts und viel freie Leinenfläche links — genau
     dort steht der Text. Breit wird nur vertikal beschnitten (y zählt), schmal nur
     horizontal (x zählt); dieser Wert hält das Brot in beiden Fällen im Bild. */
  background-position: 70% 25%;
  background-color: var(--linen-deep);
}

/* Die Leinenfläche links ist von Haus aus hell genug — hier wird nur noch ein
   Hauch aufgehellt, damit der Text auch bei kräftigerem Bildschirm sicher sitzt.
   Kein Abdunkeln: das würde genau die Fläche zudecken, die das Foto ausmacht. */
/* Wie weit das Brot nach links reicht, hängt vom Fensterformat ab — mal ist die
   volle Bildbreite zu sehen, mal wird seitlich beschnitten. Ein fester Zahlenwert
   für die Textspalte trägt das nicht. Der Verlauf schon: er liegt in Mehlfarbe,
   ist über der Leinenfläche also unsichtbar, und hellt nur dort auf, wo Text auf
   Kruste treffen könnte. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(97deg,
    rgba(245,240,230,.92) 0%,
    rgba(245,240,230,.80) 22%,
    rgba(245,240,230,.35) 40%,
    rgba(245,240,230,0) 56%);
}
.hero > * { position: relative; z-index: 1; }
/* Die Kopfzeile (erster .wrap) muss ÜBER dem Hero-Text liegen: beide sind
   Geschwister mit eigenem Stapelkontext, und das spätere gewinnt sonst. Folge
   wäre ein Sprachmenü, das hinter der Überschrift verschwindet und dessen
   Klicks die durchsichtige Textebene abfängt. Das z-index am Menü selbst kann
   das nicht lösen — es ist im Kontext seines Wraps gefangen. */
.hero > .wrap:first-child { z-index: 5; }

.hero-body {
  flex: 1; display: flex; align-items: center;
  padding-block: clamp(2.5rem, 9vw, 7rem);
}

/* Die freie Leinenfläche im Foto reicht bis etwa 44 % der Bildbreite — dort beginnt
   das Brot. Die Textspalte muss darunter bleiben, sonst läuft sie ins Motiv.
   Der Fließtext bekommt zusätzlich weniger Breite als die Überschrift: er besteht
   aus mehreren Zeilen und würde sonst als Block bis an die Kruste stoßen. */
.hero-copy { max-width: 28rem; }
.hero .lede { max-width: 23rem; }
.hero .btn-note { max-width: 23rem; }

.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 700;
  margin: 0 0 1rem;
}

.hero .lede {
  font-size: clamp(1.06rem, 2.1vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-dark);
  margin: 0 0 1rem;
}

/* Auf schmalen Displays liegt der Text über dem hellen Leinen unten links —
   ein weicher Verlauf hält ihn auch dort lesbar. */
/* Schmal steht der Text unter dem Bild statt daneben — der Verlauf dreht sich
   entsprechend von links-nach-rechts auf oben-nach-unten. */
@media (max-width: 720px) {
  .hero { background-position: 78% top; min-height: auto; }
  .hero-body { padding-top: 52vw; }
  .hero::before {
    background: linear-gradient(180deg,
      rgba(245,240,230,0) 26%,
      rgba(245,240,230,.88) 46%,
      var(--linen) 58%);
  }
}

/* ------------------------------------------------------------------ Buttons */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.5rem; border-radius: 999px;
  font-size: 1rem; font-weight: 600; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, background-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: rgba(255,255,255,.62); }
.btn-ghost:hover { background: #fff; color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn-note { margin: 1rem 0 0; font-size: .85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Abschnitte */

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section.alt { background: var(--card); border-block: 1px solid var(--rule); }

h2 {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
  letter-spacing: -.022em; line-height: 1.15;
  margin: 0 0 .75rem;
}
.section-lede { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 2.5rem; }

.features {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.feature {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
section.alt .feature { background: var(--linen); }
.feature h3 { margin: 0 0 .4rem; font-size: 1.08rem; letter-spacing: -.01em; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.feature .mark {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; margin-bottom: .9rem;
  border-radius: 10px;
  background: rgba(140,107,71,.15); color: var(--brand-dark);
  font-size: 1.15rem;
}

/* ---------------------------------------------------------------------- Pro */

.pro {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 820px) { .pro { grid-template-columns: 1fr; } }

.price-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.75rem;
}
.price-card .price {
  font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; line-height: 1;
}
.price-card .price small { font-size: .95rem; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
.price-card ul { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.price-card li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; font-size: .96rem; }
.price-card li::before {
  content: "✓"; position: absolute; left: 0; color: var(--brand-dark); font-weight: 700;
}

/* ------------------------------------------------------------- Rechtstexte */

.legal { padding-block: clamp(2.5rem, 6vw, 4rem); }
.legal .doc { max-width: var(--measure); }
.legal h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: -.028em; margin: 0 0 .4rem; }
.legal .updated { color: var(--ink-soft); font-size: .92rem; margin: 0 0 2.5rem; }
.legal h2 { font-size: 1.22rem; margin: 2.5rem 0 .6rem; }
.legal h3 { font-size: 1.02rem; margin: 1.6rem 0 .4rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal li { margin-bottom: .4rem; }
.legal strong { color: var(--ink); }

.callout {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.5rem 0;
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout h2:first-child { margin-top: 0; }

/* ------------------------------------------------------------ Support/FAQ */

.legal .lede-doc { font-size: 1.06rem; margin: 0 0 2rem; color: var(--ink-soft); }

/* Aufklappbare Frage. Die Zeile ist komplett klickbar, deshalb sitzt das Padding
   im <summary> und nicht im Container. */
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: .75rem;
  padding: .95rem 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 {
  margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink);
  flex: 1; letter-spacing: -.005em;
}
.faq summary::after {
  content: "+"; flex: none;
  font-size: 1.25rem; line-height: 1; color: var(--brand);
  transition: transform .15s ease;
}
.faq[open] summary::after { content: "–"; }
.faq summary:hover h3 { color: var(--brand-dark); }
.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.faq-a { padding: 0 2rem 1.1rem 0; color: var(--ink-soft); }
.faq-a p { margin: 0 0 .7rem; }
.faq-a p:last-child, .faq-a ul:last-child { margin-bottom: 0; }
.faq-a ul { margin: .2rem 0 .7rem; padding-left: 1.1rem; }

/* Noch auszufüllende Angaben — knallrot, damit nichts davon versehentlich live geht.
   Alle .todo entfernen, bevor die Seite veröffentlicht wird. */
.todo {
  background: #ffe8e2; color: #a3200a;
  padding: .05em .4em; border-radius: 4px;
  font-weight: 600; box-decoration-break: clone;
}

/* --------------------------------------------------- Musterfläche unten */

/* Dasselbe Motiv wie hinter den App-Store-Screenshots — es bindet Website und
   Store-Auftritt zusammen. Liegt nur schwach auf und läuft nach oben komplett aus,
   damit der Übergang aus der ruhigen Seitenmitte nicht als Kante sichtbar wird.
   Die Maske übernimmt das Ausblenden, nicht die Deckkraft: so bleibt das Muster
   unten kräftig genug, um überhaupt gelesen zu werden. */
.patterned {
  position: relative;
  isolation: isolate;
}
.patterned::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/pattern-leaves.jpg") center bottom / cover no-repeat;
  opacity: .32;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.5) 45%, #000 100%);
}
/* Ohne Maskenunterstützung bliebe eine harte Kante — dann lieber ganz weglassen. */
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .patterned::before { display: none; }
}

/* ------------------------------------------------------------------- Fußzeile */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  font-size: .92rem; color: var(--ink-soft);
}
.site-foot .cols {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
  align-items: baseline; justify-content: space-between;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .copy { margin: 1.5rem 0 0; font-size: .86rem; }

/* ------------------------------------------------------ Sprachwahl (Kopfzeile) */

/* Aufklappmenü wie bei Sharepot, aber ohne JavaScript: <details> klappt nativ,
   jede Sprache ist ein echter Link auf eine echte Seite. Nur eine Kleinigkeit
   braucht kein Skript zu lösen: ohne Klick woanders bleibt das Menü offen —
   verschmerzbar, jeder Klick im Menü navigiert ohnehin weg. */
.lang-menu { position: relative; }

.lang-menu summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .75rem;
  border: 1px solid var(--rule); border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft);
  background: rgba(255,253,248,.6);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "▾"; font-size: .7em; }
.lang-menu summary:hover { color: var(--ink); }
.lang-menu[open] summary { background: var(--card); color: var(--ink); }

.lang-menu nav {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20;
  /* `align-items` und `gap` kommen sonst von `.site-head nav` und zentrieren die
     Einträge — die Regel greift auch auf dieses verschachtelte nav. */
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  min-width: 11rem;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: .4rem;
  box-shadow: 0 12px 32px rgba(59,45,32,.16);
}
.lang-menu nav a {
  padding: .45rem .8rem; border-radius: 9px;
  font-size: .95rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  text-align: left;
}
.lang-menu nav a:hover { background: var(--linen); color: var(--ink); }
.lang-menu nav a[aria-current="true"] { color: var(--ink); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}