/* ============================================
   Kakikomi — Website
   ============================================
   Dieselbe Gestaltung wie die App (ui/theme/Theme.kt): Kinari als Papier, Sumi
   als Tusche, Shu als einziger Akzent, Ai und Matcha fuer Nebensachen. Kanten
   zurueckhaltend gerundet, Haarlinien statt Schatten, japanische Schrift mit
   erhoehter Zeilenhoehe.

   Keine Webfonts. Eine Seite, die damit wirbt, dass die App nichts nach aussen
   schickt, laedt selbst nichts von fremden Servern -- auch keine Schrift von
   Google, die dabei die IP des Besuchers mitnimmt. */

:root {
  --sumi: #1b1a17;
  --sumi-soft: #3a3833;
  --kinari: #f7f3ea;
  --kinari-dim: #ede7da;
  --paper: #fffdf8;
  --shu: #c4402e;
  --shu-ink: #fff8f2;
  --shu-soft: #f6ded8;
  --ai: #2b3a67;
  --ai-soft: #dde2f0;
  --matcha: #6f8259;
  --nezumi: #8c8a85;
  --muted: #5e5b55;
  --line: #d8d2c6;
  --grid: rgba(27, 26, 23, 0.055);

  --radius: 14px;
  --radius-sm: 8px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP",
        "Noto Sans CJK JP", Meiryo, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sumi: #f2ede2;
    --sumi-soft: #cac5b9;
    --kinari: #13120f;
    --kinari-dim: #1a1915;
    --paper: #211f1b;
    --shu: #e0705e;
    --shu-ink: #2a0d08;
    --shu-soft: #3e1a14;
    --ai: #8fa0c8;
    --ai-soft: #222a40;
    --matcha: #a3b78d;
    --nezumi: #8c8a85;
    --muted: #b2ada2;
    --line: #3a3833;
    --grid: rgba(242, 237, 226, 0.045);
  }
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--kinari);
  color: var(--sumi);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Japanisch bekommt mehr Zeilenhoehe: Kana mit Diakritika stossen sonst an die
   Zeile darueber -- dieselbe Regel wie in der App. */
:lang(ja), .jp {
  font-family: var(--jp);
  line-height: 1.9;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--shu); }

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

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Siegel ───────────────────────────────────────
   Das Markenzeichen: zinnoberroter Kasten mit hellem Innenrand, wie Bubble,
   Launcher-Icon und Navigationsleiste der App. */

.seal {
  --size: 40px;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: calc(var(--size) * 0.24);
  background: var(--shu);
  color: var(--shu-ink);
  font: 400 calc(var(--size) * 0.52)/1 var(--jp);
  position: relative;
  flex: none;
}

.seal::after {
  content: "";
  position: absolute;
  inset: calc(var(--size) * 0.09);
  border: max(1px, calc(var(--size) * 0.03)) solid currentColor;
  border-radius: calc(var(--size) * 0.16);
  opacity: 0.9;
}

/* ─── Kopf ─────────────────────────────────────── */

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-weight: 650;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.brand:hover { color: inherit; }

.site-head nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px 22px;
  flex-wrap: wrap;
  font-size: 15px;
}

.site-head nav a { text-decoration: none; color: var(--muted); }
.site-head nav a:hover { color: var(--sumi); }
.site-head nav .lang {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 13.5px;
}

/* ─── Knoepfe ──────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--sumi);
  font: 600 16px/1.2 var(--sans);
  text-decoration: none;
}

.btn:hover { color: var(--sumi); border-color: var(--nezumi); }

.btn-primary {
  background: var(--shu);
  border-color: var(--shu);
  color: var(--shu-ink);
}

.btn-primary:hover { color: var(--shu-ink); filter: brightness(1.05); border-color: var(--shu); }

.btn svg { width: 18px; height: 18px; flex: none; }

/* ─── Erster Eindruck ──────────────────────────── */

.hero {
  position: relative;
  padding: 28px 0 72px;
  overflow: hidden;
}

/* Das Rasterpapier aus dem Store-Bild, nach unten ausblendend. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
  pointer-events: none;
}

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--shu);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.eyebrow .jp { font-weight: 400; color: var(--muted); letter-spacing: 0.1em; line-height: 1; }

.hero h1 {
  margin: 0;
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.hero h1 span { color: var(--shu); }

.lede {
  margin: 22px 0 30px;
  max-width: 34em;
  font-size: 19px;
  color: var(--muted);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--nezumi);
}

/* ─── Die Szene: ein Tablet mit Text, darueber die Bubble ── */

.scene {
  position: relative;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}

.tablet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 30px 60px -30px rgba(27, 26, 23, 0.35);
}

.page {
  border-radius: 14px;
  background: var(--kinari);
  padding: 30px 30px 34px;
  min-height: 420px;
}

.page .src {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--nezumi);
  letter-spacing: 0.06em;
}

.page p.jp {
  margin: 0;
  font-size: 19px;
  line-height: 2.1;
  color: var(--sumi-soft);
}

/* Die Stelle, an der man haengen bleibt. */
.page mark {
  background: none;
  color: var(--sumi);
  border-bottom: 2.5px solid var(--shu);
  padding: 0 1px;
}

/* Das Panel der App: Reiter, Detailkarte, Zeichenfeld. */
.panel {
  position: absolute;
  z-index: 1;
  right: -12px;
  bottom: -64px;
  width: min(280px, 58%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 44px -20px rgba(27, 26, 23, 0.45);
  overflow: hidden;
  font-size: 13px;
}

.panel-tabs {
  display: flex;
  gap: 16px;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--nezumi);
  font-size: 12.5px;
}

.panel-tabs span { padding-bottom: 8px; }
.panel-tabs .on {
  color: var(--sumi);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--shu);
}

.card {
  margin: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--kinari-dim);
}

.card-top { display: flex; gap: 12px; align-items: flex-start; }

.glyph {
  font: 400 52px/1 var(--jp);
  color: var(--sumi);
}

.card-top strong { display: block; font-size: 15px; }
.card-top small { color: var(--muted); font-size: 11.5px; }

.reading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}

.reading .tag {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 3px;
  font: 11px/1 var(--jp);
}

.tag.on { background: var(--shu-soft); color: var(--shu); }
.tag.kun { background: var(--ai-soft); color: var(--ai); }

.words {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px;
}

.words div { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.words .w { font: 14px/1.5 var(--jp); color: var(--sumi); }
.words .r { font: 11px/1.5 var(--jp); color: var(--ai); }
.words .g { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }

.candidates {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}

.candidates span {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--kinari-dim);
  font: 17px/1 var(--jp);
}

.candidates .on {
  border: 1.5px solid var(--shu);
  background: var(--shu-soft);
}

.canvas {
  margin: 0 10px 10px;
  height: 104px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    var(--paper);
  display: grid;
  place-items: center;
  font: 58px/1 var(--jp);
  color: var(--sumi);
}

.canvas span { transform: rotate(-3deg) skewX(-4deg); opacity: 0.88; }

/* Die Bubble, an der das Panel haengt -- sichtbar daneben, wie in der App. */
.scene .bubble {
  position: absolute;
  z-index: 2;
  right: -12px;
  top: 34px;
  --size: 54px;
  box-shadow: 0 10px 24px -8px rgba(196, 64, 46, 0.6);
}

.page p.jp + p.jp { margin-top: 10px; }

/* ─── Abschnitte ───────────────────────────────── */

section { padding: 76px 0; }

.section-head { max-width: 42em; margin-bottom: 38px; }

.section-head h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-head p { margin: 0; color: var(--muted); font-size: 18px; }

/* Drei Schritte, nummeriert mit kleinen Siegeln: 一 二 三 */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.steps .seal { --size: 34px; margin-bottom: 16px; }
.steps h3 { margin: 0 0 6px; font-size: 19px; }
.steps p { margin: 0; color: var(--muted); font-size: 16px; }

/* Funktionen: das Kanji als Symbol, wie in der Navigationsleiste der App. */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.feature {
  background: var(--paper);
  padding: 26px 24px 28px;
}

.feature .k {
  font: 400 30px/1 var(--jp);
  color: var(--shu);
  margin-bottom: 14px;
  display: block;
}

.feature h3 { margin: 0 0 6px; font-size: 18px; }
.feature p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Datenschutz: das ruhige Band in Ai. */
.privacy {
  background: var(--ai);
  color: #eef1f8;
}

.privacy .section-head p { color: #c6cde0; }
.privacy a:hover { color: #fff; }

.privacy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
}

.privacy li {
  padding-left: 28px;
  position: relative;
  font-size: 16.5px;
}

/* Haekchen, keine Kaestchen: leere Kaestchen laesen sich wie eine Liste, in der
   noch nichts erfuellt ist -- das Gegenteil dessen, was hier steht. */
.privacy li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 12px; height: 6px;
  border-left: 2px solid #a9c08f;
  border-bottom: 2px solid #a9c08f;
  transform: rotate(-45deg);
}

@media (prefers-color-scheme: dark) {
  .privacy { background: #1c2337; }
}

/* Kostenlos und Pro */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.plan {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.plan.pro { border-color: var(--shu); box-shadow: inset 0 0 0 1px var(--shu); }

.plan h3 { margin: 0; font-size: 22px; }
.plan .price { margin: 4px 0 18px; color: var(--muted); font-size: 15.5px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.plan li { padding-left: 26px; position: relative; font-size: 16px; }
.plan li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--matcha);
  border-bottom: 2px solid var(--matcha);
  transform: rotate(-45deg);
}

/* Was als Naechstes kommt */
.next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.next .k { font: 400 44px/1 var(--jp); color: var(--ai); }
.next h3 { margin: 0 0 6px; font-size: 20px; }
.next p { margin: 0; color: var(--muted); }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--ai-soft);
  color: var(--ai);
  font-size: 12.5px;
  font-weight: 600;
  vertical-align: 3px;
}

/* Haeufige Fragen */
.faq { max-width: 760px; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.faq details:last-child { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--shu); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; color: var(--muted); }

/* Schluss */
.closing {
  text-align: center;
  padding: 90px 0;
}

.closing .seal { --size: 64px; margin-bottom: 22px; }
.closing h2 { margin: 0 0 22px; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.02em; }
.closing .cta { justify-content: center; }

/* Fuss */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  font-size: 14px;
  color: var(--muted);
}

.site-foot .wrap { display: grid; gap: 16px; }

.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-foot nav a { text-decoration: none; }
.site-foot p { margin: 0; max-width: 60em; }

/* Nur wo rechts genug Rand ist, ragen Panel und Bubble ueber das Tablet hinaus --
   sonst schnitte der Bildschirmrand sie ab. */
@media (min-width: 1220px) {
  .panel { right: -44px; }
  .scene .bubble { right: -30px; }
}

/* ─── Schmale Bildschirme ──────────────────────── */

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .scene { justify-self: center; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 56px 0; }
  .site-head nav .hide-sm { display: none; }
  .steps, .plans, .privacy ul { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: minmax(0, 1fr); }
  .page { padding: 22px 20px 26px; min-height: 360px; }
  .page p.jp { font-size: 16.5px; }
  .panel { right: -4px; bottom: -80px; width: min(250px, 74%); }
  .scene .bubble { right: -6px; top: 14px; --size: 44px; }
  .hero { padding-bottom: 110px; }
  .next { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Textseiten (Datenschutz, Impressum) ──────── */

.doc { max-width: 760px; padding: 20px 0 60px; }
.doc h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.02em; margin: 10px 0 6px; }
.doc h2 { font-size: 21px; margin: 40px 0 10px; }
.doc .updated { color: var(--nezumi); font-size: 14px; margin: 0 0 24px; }
.doc table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 10px 9px 0; border-top: 1px solid var(--line); }
.doc .table-wrap { overflow-x: auto; }