/* ==========================================================================
   jodabytes — pixel.css (einziges Stylesheet der Webseite)
   Terminal-/Pixelart-Look, einfarbig dunkler Grund, durchgehend Monospace.
   Akzentfarben abgeleitet aus den Design-Tokens der App Potte
   (`ExpanseMonitor_Claude/docs/design-tokens.md` — anderes Repo).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #05080B;          /* einfarbiger Grund, kein Verlauf */
  --ink: #C7D5E2;         /* Fließtext */
  --dim: #7C8FA1;         /* Sekundärtext */
  --line: #1C2A36;        /* Rahmen, Trenner */
  --cyan: #13B9FD;        /* Akzent = das „bytes" der Wortmarke */
  /* Flutter-Blau #02569B und Grün/Rot der Kassenbuch-Zeilen kommen nur in der
     Pixelgrafik vor (Palette: website/tools/pixelart.mjs) — als Textfarbe auf
     Schwarz reicht ihr Kontrast nicht. */

  --maxw: 62rem;
  --gutter: 1.25rem;
  /* „Noto Sans Mono" steht mit drin, weil es Rahmenzeichen enthält —
     auf Android fehlen die in der Standard-Monospace oft. */
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
          "DejaVu Sans Mono", "Liberation Mono", "Noto Sans Mono", Menlo,
          monospace;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.975rem;
  line-height: 1.75;
}

/* Muss vor den Bild-Regeln stehen: hebt die width/height-Attribute im HTML
   auf, sonst erzwingen sie ihre Pixelhöhe (Screenshots werden gestreckt). */
img { max-width: 100%; height: auto; }

p { margin: 0 0 1rem; max-width: 62ch; }
ul, ol { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin-bottom: 0.35rem; }
strong { font-weight: 700; color: #E9F1F8; }
code {
  font-family: inherit;
  color: var(--cyan);
  background: rgba(19, 185, 253, 0.08);
  padding: 0.05em 0.35em;
}

/* ---------- Überschriften ----------
   Kein ASCII-Banner: eine Kennung in Versalien, davor ein Pixel, dahinter
   eine Haarlinie bis zum Rand — die Überschrift selbst bleibt normal lesbar. */
h1, h2, h3 { color: #E9F1F8; line-height: 1.35; letter-spacing: 0.01em; }
h1 { font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 700; margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 700; margin: 0 0 1.1rem; }
h3 { font-size: 1rem; font-weight: 700; margin: 1.9rem 0 0.5rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--cyan);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(19, 185, 253, 0.35); }
a:hover { border-bottom-color: var(--cyan); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--cyan);
  color: var(--bg);
  padding: 0.4rem 0.9rem;
  border: 0;
  z-index: 10;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- ASCII-Grafik: skaliert mit der Viewport-Breite ----------------
   --cols = Spaltenzahl der Grafik. Der Faktor 0.62 ist die Zeichenbreite
   gängiger Monospace-Schriften (mit Sicherheitsreserve).                    */
.art {
  display: block;
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  line-height: 1.05;
  white-space: pre;
  overflow: hidden;
  /* Grafik immer als Block ausrichten — text-align würde jede Zeile
     einzeln zentrieren und die Grafik dadurch verschieben. */
  text-align: left;
  width: fit-content;
  font-size: min(
    var(--max, 1rem),
    calc((100vw - 2 * var(--gutter)) / (var(--cols) * 0.62))
  );
}

/* ---------- Kopfzeile ---------- */
.site-header {
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 3rem;
  padding-block: 0.5rem;
}

.wordmark {
  color: var(--ink);
  border: 0;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.wordmark b { color: var(--cyan); font-weight: 700; }
.wordmark::before { content: ">\00a0"; color: var(--dim); font-weight: 400; }

.site-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--dim);
  border: 0;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--cyan); }
.site-nav a::before { content: "/"; color: var(--line); margin-right: 0.35rem; }

/* ---------- Hero ---------- */
.hero { padding-block: 2.75rem 3rem; }
.hero-start { text-align: center; padding-block: 3rem 3.5rem; }
.hero-start h1 { margin: 0; }

.lede { font-size: 1.05rem; color: var(--ink); max-width: 46ch; }

.hero-app {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.hero-app > img {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.art i { font-style: normal; }

.logo { color: #E9F1F8; margin-inline: auto; }
.logo .b { color: var(--cyan); }
.hero h1 + .tagline { margin-top: 1.75rem; }

/* Das $-Logo braucht 90 Zeichen Breite — unter ~46rem würde es auf 10 px
   Schriftgröße schrumpfen. Darunter übernimmt die Wortmarke als Text.

   Zeichengrafik ist dort keine Option: Versuche mit Rahmenzeichen sind an
   Android gescheitert, wo diese Zeichen in der Monospace-Schrift fehlen —
   der Browser ersetzt sie aus einer anderen Schrift, und die Zeilen
   verrutschen gegeneinander. Text hat dieses Problem nicht. */
.logo-wide { --cols: 90; --max: 0.85rem; }

.logo-text {
  display: none;
  font-size: clamp(2.25rem, 13vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #E9F1F8;
}
.logo-text b { color: var(--cyan); font-weight: 700; }

@media (max-width: 46rem) {
  .logo-wide { display: none; }
  .logo-text { display: block; }
}

.tagline {
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.tagline::before { content: ">\00a0"; color: var(--cyan); font-weight: 400; }

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.15em;
  background: var(--cyan);
  vertical-align: -0.15em;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Hero-Pixelgrafik ---------- */
.scene {
  margin: 2.75rem auto 0;
  max-width: 34rem;
  position: relative;
  line-height: 0;
}
.scene img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 26px rgba(19, 185, 253, 0.13));
}

/* Rasterzeilen wie auf einer Bildröhre — nur hier, nicht auf der Seite. */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(5, 8, 11, 0.42) 0 1px,
    transparent 1px 3px
  );
}

/* ---------- Abschnitte ---------- */
.section { padding-block: 3rem; border-top: 1px solid var(--line); }
/* `.section-alt` bleibt bewusst ohne eigene Regel: der Grund ist durchgehend
   einfarbig, die Abschnitte trennt die Haarlinie statt einer zweiten Fläche. */

/* ---------- Panels ---------- */
.panel {
  position: relative;
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem;
  background: transparent;
}
/* zwei Eckmarken statt Schlagschatten */
.panel::before, .panel::after {
  content: "+";
  position: absolute;
  color: var(--line);
  font-size: 0.9rem;
  line-height: 1;
}
.panel::before { top: -0.5rem; left: -0.42rem; }
.panel::after { bottom: -0.52rem; right: -0.42rem; }
.panel:hover { border-color: #2C4354; }

.panel h3 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyan);
}
.panel p:last-child { margin-bottom: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}

/* ---------- App-Eintrag ---------- */
.app {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.app > img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  image-rendering: pixelated;
}
.app > div { flex: 1 1 22rem; }

.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.25rem; }

.btn {
  display: inline-block;
  border: 1px solid var(--cyan);
  color: var(--cyan);
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn:hover { background: var(--cyan); color: var(--bg); }
.btn-primary { background: var(--cyan); color: var(--bg); }
.btn-primary:hover { background: transparent; color: var(--cyan); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: transparent; border-color: var(--cyan); color: var(--cyan); }

/* ---------- Kassenbuch (Signatur-Element der Potte-Seite) ---------- */
.ledger {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  border: 1px solid var(--line);
  max-width: 30rem;
}
.ledger li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0;
  padding: 0.6rem 1rem;
}
.ledger li + li { border-top: 1px solid var(--line); }
.ledger .label { flex: 1; min-width: 0; line-height: 1.4; }
.ledger .cat {
  display: block;
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 0.02em;
}
.ledger .amount {
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  white-space: nowrap;
}
.amount.plus { color: #66BB6A; }
.amount.minus { color: #EF6B5E; }

/* ---------- Kategorien-Baum ---------- */
.cat-tree {
  list-style: none;
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  max-width: 28rem;
  font-size: 0.92rem;
}
.cat-tree ul { list-style: none; margin: 0; padding-left: 1.15rem; }
.cat-tree li { margin: 0.3rem 0; }
/* Verzweigungen als Textzeichen — passt zum Terminal-Charakter.
   Nur in den verschachtelten Listen; die Wurzel bleibt ohne Strich. */
.cat-tree ul li::before { content: "├─"; color: var(--line); margin-right: 0.4rem; }
.cat-tree ul li:last-child::before { content: "└─"; }
.cat-tree .dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.5em;
  vertical-align: baseline;
}

/* ---------- Screenshot-Galerie ---------- */
.gallery {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  padding: 0.5rem 0 1.25rem;
  scroll-snap-type: x proximity;
}
.phone {
  margin: 0;
  flex: 0 0 auto;
  width: min(14rem, 68vw);
  scroll-snap-align: start;
}
.phone img {
  display: block;
  width: 100%;
  aspect-ratio: 1080 / 2160;
  border: 2px solid var(--line);
  background: var(--bg);
}
.phone figcaption {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Listen ---------- */
.feature-cols { columns: 2; column-gap: 2.5rem; }
@media (max-width: 44rem) { .feature-cols { columns: 1; } }
.feature-cols li { break-inside: avoid; }

.no-list { list-style: none; padding: 0; }
.no-list li { padding-left: 2.2rem; position: relative; }
.no-list li::before {
  content: "[x]";
  position: absolute;
  left: 0;
  color: #EF6B5E;
}

/* ---------- Abschluss-Band ---------- */
.cta-band {
  border-block: 1px solid var(--line);
  text-align: center;
  padding-block: 3rem;
}
.cta-band h2 { margin-top: 0; }
.cta-band p { max-width: none; }

/* ---------- Anleitung / FAQ / Rechtstexte ---------- */
.prose { max-width: 46rem; }
main.prose { padding-block: 2.5rem 1rem; }

/* In langen Texten trägt die h2 selbst die Abschnittsmarke — dort gibt es
   keine Kennung darüber wie auf den Übersichtsseiten. */
.prose h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.75rem;
  font-size: 1.2rem;
}
.prose h2::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--cyan);
}
.prose h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.faq h3 {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.toc {
  border: 1px solid var(--line);
  padding: 1.1rem 1.5rem;
  margin: 1.75rem 0;
}
.toc ul { margin: 0.5rem 0 0; }

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  padding: 0.9rem 1.2rem;
  margin: 1.5rem 0;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- Fußzeile ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem 2.5rem;
  font-size: 0.82rem;
  color: var(--dim);
}
.site-footer .container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer p { margin: 0; max-width: none; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer a { color: var(--dim); border-bottom-color: var(--line); }
.site-footer a:hover { color: var(--cyan); }

.hint, .version-hint { color: var(--dim); font-size: 0.85rem; }

/* ---------- Fehlerseite ---------- */
.center { text-align: center; }
.center p { max-width: none; }
.center img { border: 1px solid var(--line); }

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