/* Gemeinsame Grundlage für zettel.live-Unterseiten (Shop, Themenseiten). Aus landing.html übernommen. */
  @font-face { font-family: "Literata"; src: url(/fonts/literata-latin-opsz-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
  @font-face { font-family: "Literata"; src: url(/fonts/literata-latin-opsz-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
  @font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
  @font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
  :root {
    --ink: #1f2a44;        /* Kuli-Blau, die Farbe von Handgeschriebenem */
    --graphite: #2b2d2f;
    --stone: #e4e2dc;      /* Hintergrund: heller Stein */
    --stone-2: #d6d3cb;
    --paper: #f3f2ed;      /* E-Papier */
    --soft: #5d6066;
    --line: #c9c6bd;
    --serif: "Literata", Georgia, serif;
    --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--stone); color: var(--graphite); font: 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
  .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Kopf ---------- */
  .top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
  .logo { font: 600 26px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; color: var(--graphite); }
  .logo b { color: var(--ink); font-weight: 600; }
  .top nav { display: flex; gap: 22px; font-size: 16px; }
  .top nav a { text-decoration: none; color: var(--soft); }
  .top nav a:hover { color: var(--graphite); }
  .top .login { color: var(--graphite); }
  @media (max-width: 640px) { .top nav a:not(.login) { display: none; } }

  /* ---------- Bühne ---------- */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; padding: 40px 0 96px; }
  @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 12px; } }
  h1 { font: 400 clamp(46px, 6.4vw, 84px)/1.0 var(--serif); letter-spacing: -.025em; margin: 0; color: var(--graphite); font-variation-settings: "opsz" 72; }
  .hero p { font-size: 20px; color: var(--soft); max-width: 30ch; margin: 22px 0 30px; }
  .cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #f3f2ed; text-decoration: none; border: 0;
         border-radius: 999px; padding: 15px 26px; font: 600 17px/1 var(--sans); cursor: pointer; }
  .cta:hover { background: #2a3a5e; }
  .price-note { display: block; margin-top: 14px; font-size: 15px; color: var(--soft); }

  /* ---------- Das Gerät ---------- */
  .stage { position: relative; perspective: 1400px; }
  .device { position: relative; aspect-ratio: 195 / 140; width: 100%; border-radius: 14px; padding: 6.2% 6.2% 8.2%;
            transform: rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; transition: background .6s, box-shadow .6s;
            box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 30px 50px 80px -30px rgba(30,30,40,.45), 0 6px 14px rgba(0,0,0,.12); }
  .device::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 26px; border-radius: 50%;
                   background: rgba(30,30,40,.22); filter: blur(14px); transform: translateZ(-40px); }
  .screen { position: relative; width: 100%; height: 100%; background: var(--paper); border-radius: 2px; overflow: hidden;
            box-shadow: inset 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.35); display: flex; flex-direction: column; }
  .msg { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6% 7% 0;
         font: 400 clamp(19px, 3.1vw, 38px)/1.22 var(--serif); color: #222; white-space: pre-line; }
  .msg svg { width: 70%; height: auto; }
  .foot { display: flex; justify-content: space-between; gap: 8px; margin: 0 6%; padding: 2.4% 0 3.4%; border-top: 1px solid #333;
          font: 600 clamp(9px, 1.15vw, 13px)/1 var(--sans); color: #222; }
  .foot span:first-child { font-weight: 400; }
  .foot span:first-child b { font-weight: 600; }
  /* E-Papier-Bildwechsel: kurz schwarz, weiß, schwarz, dann das neue Bild */
  .screen.flash .msg, .screen.flash .foot { visibility: hidden; }
  .screen.flash { animation: eink .62s steps(1) both; }
  @keyframes eink { 0% { background: #1b1b1b; } 22% { background: var(--paper); } 44% { background: #1b1b1b; } 66% { background: #cfcdc6; } 100% { background: var(--paper); } }
  @media (prefers-reduced-motion: reduce) { .screen.flash { animation: none; } .device { transform: none; } }

  /* Materialien */
  .m-schwarz   { background: #1d1e20; }
  .m-weiss     { background: #f7f6f2; }
  .m-salbei    { background: #9fad9b; }
  .m-rose      { background: #d7b4a8; }
  .m-eiche     { background: repeating-linear-gradient(92deg, rgba(120,80,40,.10) 0 2px, transparent 2px 7px),
                             repeating-linear-gradient(88deg, rgba(90,60,30,.12) 0 1px, transparent 1px 13px),
                             linear-gradient(160deg, #d2a774, #b98a55 55%, #c99b65); }
  .m-nuss      { background: repeating-linear-gradient(93deg, rgba(20,10,5,.22) 0 2px, transparent 2px 9px),
                             repeating-linear-gradient(87deg, rgba(255,220,180,.06) 0 1px, transparent 1px 15px),
                             linear-gradient(160deg, #6b4a33, #4f3524 60%, #5e412c); }
  .m-alu       { background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 3px),
                             linear-gradient(135deg, #d6d9dc, #aeb3b8 45%, #cfd2d5 70%, #a3a8ad); }
  .m-messing   { background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,.04) 1px 2px, transparent 2px 3px),
                             linear-gradient(135deg, #d9bf7f, #b8954a 45%, #d4b46c 70%, #a8853d); }

  footer { padding: 48px 0 64px; color: var(--soft); font-size: 15px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  footer a { color: var(--soft); }
  footer .links { display: flex; gap: 18px; flex-wrap: wrap; }