/* ═══════════════════════════════════════════════════════════════════════════
   Amberald site — shared stylesheet ("Kontaktbogen" design system).
   Used by the main page and the three module pages (/library/, /develop/,
   /photo/). Design notes live in the main page's header comment; the short
   version: editorial darkroom language on hairline rules, no pills, no icon
   cards, contact-sheet frames with crop marks, sprocket rails, and an accent
   that morphs amber→emerald→diamond (scroll-driven on the main page, pinned
   per module page via <html data-accent="0|1|2">).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* warm-biased near-black neutrals (amber-leaning, never pure grey) */
  --bg:#0c0b09;
  --bg-soft:#100f0c;
  --panel:#161411;
  --panel-2:#1c1915;
  --line:#2a2620;
  --line-soft:#211e19;
  --text:#ede9e2;
  --muted:#a49d90;
  --faint:#6f6a60;
  /* brand anchors (identical to the app: theme::ACCENT_*) */
  --amber:#e79721;
  --amber-bright:#ffc770;
  --emerald:#2ed698;
  --emerald-bright:#6ee9b8;
  --diamond:#d6e2ec;
  --diamond-bright:#eef5fb;
  /* dynamic accent: script interpolates these along the scroll / page pin */
  --accent:#e79721;
  --accent-bright:#ffc770;
  --on-accent:#1c160c;
  --good:#57d29c;
  --bad:#e0655f;
  --maxw:1160px;
  --font-body:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:Georgia,"Times New Roman",ui-serif,serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` muss gewinnen: shop.js schaltet Preis, Founders-Etikett und
   Sandbox-Hinweis ueber das Attribut, und `.notify .price-tag` setzt ein
   eigenes `display`, das es sonst ueberstimmt (2026-09-13). */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-bright);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section[id],header[id]{scroll-margin-top:78px}

/* ---------- ambient particle canvas (fixed, behind everything) ---------- */
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,nav.top,footer{position:relative;z-index:1}

/* ---------- sprocket rails: the page is a strip of film you scroll ------- */
.rail{
  position:fixed;top:0;bottom:0;width:12px;z-index:1;pointer-events:none;opacity:.42;
  background-image:repeating-linear-gradient(180deg,
    color-mix(in srgb,var(--accent) 30%,transparent) 0 9px,transparent 9px 32px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
}
.rail.left{left:14px}
.rail.right{right:14px}
@media (max-width:1279px){ .rail{display:none} }

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.015em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.75rem,3.3vw,2.5rem)}
h3{font-size:1.2rem}
.lead{color:var(--muted);font-size:1.06rem;max-width:64ch}
.grad{
  background:linear-gradient(100deg,var(--amber-bright) 15%,var(--emerald-bright) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- frame marks (section headers) ---------- */
.mark{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin-bottom:24px;
}
.mark .no{color:var(--accent);font-size:.94rem;letter-spacing:.06em;font-weight:700}
.mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent 85%)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- top nav ---------- */
nav.top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
nav.top .wrap{display:flex;align-items:center;gap:26px;height:62px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:.02em}
.brand:hover{text-decoration:none}
.brand canvas{width:27px;height:27px;display:block}
.nav-links{display:flex;gap:22px;margin-left:8px;font-size:.92rem}
.nav-links a{color:var(--muted)}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--accent-bright)}
.nav-spacer{flex:1}
.lang{display:flex;font-family:var(--font-mono);font-size:.74rem}
.lang button{background:none;border:0;color:var(--faint);padding:6px 10px;cursor:pointer;letter-spacing:.1em}
.lang button+button{border-left:1px solid var(--line)}
.lang button[aria-pressed="true"]{color:var(--accent-bright)}

/* ---------- buttons: rectangles with one cut corner, mono uppercase ------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 26px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:var(--accent);color:var(--on-accent);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
.btn-primary:hover{background:var(--accent-bright)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-bright)}
.btn-dual{
  background:linear-gradient(120deg,var(--amber),var(--emerald));color:#10130f;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
}
nav.top .btn{padding:10px 16px;font-size:.68rem;white-space:nowrap}
@media (max-width:900px){ .nav-links{display:none} }
/* The bar must stay one row at every width. Before 2026-09-11 it did not: the
   call to action broke into three lines on phones and two between 900 and
   1000 px, and in German ("Kostenlos testen") the bar was wider than any phone,
   so the whole page was laid out 509 px wide and could be panned sideways.
   Hence nowrap above, and less room spent around it below. */
@media (min-width:901px) and (max-width:1100px){
  nav.top .wrap{gap:16px}
  .nav-links{gap:14px;margin-left:0}
}
@media (max-width:520px){
  nav.top .wrap{gap:10px;padding:0 18px}
  .brand{gap:8px;font-size:1rem}
  .brand canvas{width:24px;height:24px}
  /* one button only: the language you can switch to (the active one is
     already what the page shows) */
  .lang button{padding:6px 8px}
  .lang button[aria-pressed="true"]{display:none}
  .lang button+button{border-left:0}
  nav.top .btn{padding:9px 12px;font-size:.66rem;letter-spacing:.04em}
}
@media (max-width:359px){
  /* the very narrowest phones: better two lines in the button than a page
     that is wider than the screen */
  nav.top .btn{white-space:normal;text-align:center;line-height:1.25}
}

/* ---------- hero: asymmetric, copy left, lens right (main page) ---------- */
.hero{padding:140px 0 80px;position:relative;overflow-x:clip}
/* overflow-x:clip: the glow below is 110vw wide on phones and centred, so it
   stuck out 20 px on the right at 390 px; mobile browsers widen the layout
   viewport for that (the page could be panned sideways, and every fixed layer,
   the screenshot viewer included, spanned the wider area). clip, not hidden:
   no scroll container, and the glow may still fall below the hero. */
.hero::before{
  content:"";position:absolute;left:68%;top:40px;transform:translateX(-50%);
  width:min(900px,110vw);height:760px;pointer-events:none;
  background:radial-gradient(ellipse 50% 45% at 50% 38%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.hero h1{margin-bottom:20px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero-lens{position:relative}
#lens{width:min(400px,78vw);height:auto;aspect-ratio:1;margin:0 auto;display:block}
.status{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-bright);
}
.status .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 70%,transparent);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion: reduce){ .status .dot{animation:none} }
@media (max-width:980px){
  .hero{padding-top:120px}
  .hero::before{left:50%}
  .hero .wrap{grid-template-columns:1fr;gap:20px}
  .hero-lens{order:-1}
  #lens{width:min(280px,64vw)}
}

/* ---------- module-page hero: single column, no lens ---------- */
.hero.sub{padding:132px 0 46px}
.hero.sub::before{left:50%;height:520px}
.hero.sub .wrap{display:block;max-width:var(--maxw)}
.hero.sub h1{max-width:24ch}
.hero.sub .lead{margin-top:4px}

/* ---------- tick lists: aperture-blade rhombus markers ---------- */
.ticks{list-style:none;display:grid;gap:12px;margin-top:26px}
.ticks li{position:relative;padding-left:24px;color:var(--muted);font-size:.95rem}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.5em;width:7px;height:7px;
  border:1px solid var(--accent);transform:rotate(45deg);
}
.ticks b{color:var(--text);font-weight:650}
.ticks.mini{gap:9px;margin-top:30px;max-width:44ch}
.ticks.mini li{font-size:.86rem;padding-left:20px}
.ticks.mini li::before{width:5px;height:5px;top:.52em}

/* ---------- stats: pure typography on hairlines ---------- */
.stats{padding:54px 0 10px}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.stat{border-top:1px solid var(--line);padding-top:16px}
.stat .n{font-family:var(--font-display);font-style:italic;font-size:1.9rem;line-height:1.15;color:var(--accent-bright)}
.stat .l{font-size:.84rem;color:var(--faint);margin-top:6px}
@media (max-width:820px){ .stats .wrap{grid-template-columns:1fr 1fr} }

/* ---------- feature rows ---------- */
section.feature{padding:92px 0}
.row{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.row.flip .copy{order:2}
.row.flip .media{order:1}
.copy h2{margin-bottom:16px}
.copy .lead{font-size:1.02rem}
.copy .more{margin-top:30px}
@media (max-width:980px){
  .row{grid-template-columns:1fr;gap:34px}
  .row.flip .copy{order:1}
  .row.flip .media{order:2}
}

/* ---------- contact-sheet frames ---------- */
.frame{position:relative;border:1px solid var(--line);background:var(--panel);margin:0}
.frame img{width:100%}
.frame figcaption{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:10px 14px;border-top:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.frame figcaption b{color:var(--accent);font-weight:700;flex:none}
.frame::before{
  content:"";position:absolute;top:-10px;left:-10px;width:18px;height:18px;
  border-top:1px solid var(--faint);border-left:1px solid var(--faint);opacity:.55;
}
.frame::after{
  content:"";position:absolute;bottom:-10px;right:-10px;width:18px;height:18px;
  border-bottom:1px solid var(--faint);border-right:1px solid var(--faint);opacity:.55;
}
.frame.wide{max-width:920px;margin:48px auto 0}
.media.reveal .frame img{filter:brightness(.22) saturate(.15);transition:filter 1.2s ease .1s}
.media.reveal.in .frame img{filter:brightness(1) saturate(1)}
@media (prefers-reduced-motion: reduce){ .media.reveal .frame img{filter:none;transition:none} }
/* set by the ?reveal=1 test hook: a capture must not freeze mid-develop */
.no-anim .media.reveal .frame img{filter:none;transition:none}

/* ---------- screenshot viewer (site.js section 8) ----------
   A click on a contact-sheet frame shows the shot large. Same file as in the
   section (native 2074 px), so opening loads nothing new. Same visual language
   as the frame: hairlines and crop marks, square buttons, no pills. The frame
   already uses ::before/::after for its crop marks, so the zoom badge is a
   real element (a button, which also makes it the keyboard way in). */
.frame.zoomable{cursor:zoom-in;transition:border-color .25s ease}
.frame.zoomable:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.frame-zoom{
  position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:rgba(12,11,9,.78);border:1px solid var(--line);color:var(--text);
  cursor:zoom-in;opacity:0;transform:scale(.9);
  transition:opacity .2s ease,transform .2s ease,border-color .2s ease;
}
.frame.zoomable:hover .frame-zoom,.frame-zoom:focus-visible{opacity:1;transform:none}
.frame-zoom:hover{border-color:var(--accent)}
.viewer[hidden]{display:none}
.viewer{
  --vx:78px;--vt:24px;--vb:84px;
  position:fixed;inset:0;z-index:800;
  display:flex;align-items:center;justify-content:center;
  padding:var(--vt) var(--vx) var(--vb);
  background:rgba(8,7,6,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:viewer-in .18s ease;
}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}
body.viewer-open{overflow:hidden}
.viewer-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.viewer-shot{position:relative;line-height:0}
.viewer-shot::before{
  content:"";position:absolute;top:-10px;left:-10px;width:18px;height:18px;
  border-top:1px solid var(--faint);border-left:1px solid var(--faint);opacity:.55;
}
.viewer-shot::after{
  content:"";position:absolute;bottom:-10px;right:-10px;width:18px;height:18px;
  border-bottom:1px solid var(--faint);border-right:1px solid var(--faint);opacity:.55;
}
.viewer-media{
  display:block;width:auto;height:auto;
  max-width:calc(100vw - 2 * var(--vx));
  max-height:calc(100vh - var(--vt) - var(--vb));
  border:1px solid var(--line);box-shadow:0 40px 110px rgba(0,0,0,.7);
}
@supports (height:100dvh){ .viewer-media{max-height:calc(100dvh - var(--vt) - var(--vb))} }
.viewer-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:22px 24px max(22px,env(safe-area-inset-bottom));text-align:center;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.viewer-caption{margin:0}
.viewer-caption b{color:var(--accent);font-weight:700;margin-right:12px}
.viewer-counter{margin:0;color:var(--faint);font-variant-numeric:tabular-nums}
.viewer-close,.viewer-nav{
  position:absolute;z-index:1;width:46px;height:46px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,11,9,.8);border:1px solid var(--line);color:var(--text);
  cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.viewer-close:hover,.viewer-nav:hover{border-color:var(--accent);color:var(--accent-bright)}
.viewer-close{top:max(16px,env(safe-area-inset-top));right:16px}
.viewer-nav{top:50%;transform:translateY(-50%)}
.viewer-prev{left:16px}
.viewer-next{right:16px}
.viewer-nav[hidden]{display:none}
@media (max-width:700px){
  /* phones: the image takes the full width, the arrows move down beside the
     caption instead of covering the picture (swiping works too) */
  .viewer{--vx:10px;--vb:92px}
  .viewer-nav{top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none}
  .viewer-prev{left:12px}
  .viewer-next{right:12px}
  .viewer-bar{padding-left:70px;padding-right:70px}
}
@media (prefers-reduced-motion: reduce){ .viewer{animation:none} .frame-zoom{transition:none} }

/* ---------- before/after slider (site.js section 9) ----------
   Two pictures of the same size in one stage. The upper one (before) is cut at
   --pos, the line and its handle sit on top. The real control is a native
   range input, visually hidden: it is the keyboard and screen-reader way in,
   the pointer drags on the stage. touch-action lets a vertical swipe through,
   so a phone still scrolls past the picture, and a pinch, so the detail the
   comparison is about can be looked at closely on a small screen.
   The frame is as wide as the column, but never taller than the window: the
   point is to drag the line and watch both sides at once, and on a laptop a
   picture that needs scrolling hides half of what it compares. */
.frame.ba{margin:48px auto 0;width:min(100%,max(20rem,calc((100vh - 140px) * 1.5)))}
@supports (height:100svh){ .frame.ba{width:min(100%,max(20rem,calc((100svh - 140px) * 1.5)))} }
.ba-stage{
  --pos:50%;
  position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg-soft);
  cursor:ew-resize;touch-action:pan-y pinch-zoom;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:1px;margin-left:-.5px;
  background:var(--text);box-shadow:0 0 0 1px rgba(8,7,6,.3);pointer-events:none;
}
.ba-handle{
  position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,11,9,.82);border:1px solid var(--accent);color:var(--text);
  transition:color .2s ease,background .2s ease;
}
.ba-stage:hover .ba-handle,.ba-stage.dragging .ba-handle{color:var(--accent-bright);background:rgba(12,11,9,.92)}
.ba-range:focus-visible ~ .ba-line .ba-handle{outline:2px solid var(--accent);outline-offset:3px}
.ba-label{
  position:absolute;top:14px;padding:6px 10px;pointer-events:none;white-space:nowrap;
  background:rgba(12,11,9,.72);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);
  transition:opacity .2s ease;
}
.ba-label-before{left:14px}
.ba-label-after{right:14px;color:var(--accent-bright)}
/* hidden while the line runs over it: a label on the wrong side is a lie */
.ba-label.off{opacity:0}
.ba-range,.ba-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;
}
@media (max-width:520px){
  .ba-label{top:8px;padding:4px 7px;font-size:.58rem;letter-spacing:.08em}
  .ba-label-before{left:8px}
  .ba-label-after{right:8px}
  .ba-label .ba-extra{display:none}
  .ba-handle{width:38px;height:38px}
}
@media (prefers-reduced-motion: reduce){ .ba-handle,.ba-label{transition:none} }

/* ---------- spec sheet ---------- */
.sect-head{max-width:780px}
.sect-head h2{margin-bottom:14px}
.sheet{
  display:grid;grid-template-columns:1fr 1fr;column-gap:72px;
  border-top:1px solid var(--line);margin-top:40px;position:relative;
}
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-soft)}
.sheet article{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.sheet h3{
  font-family:var(--font-body);font-size:.98rem;font-weight:700;margin-bottom:6px;
  position:relative;padding-left:22px;
}
.sheet h3::before{
  content:"";position:absolute;left:2px;top:.42em;width:7px;height:7px;
  border:1px solid var(--accent);transform:rotate(45deg);
}
.sheet p{font-size:.88rem;color:var(--muted);line-height:1.55;padding-left:22px}
@media (max-width:860px){
  .sheet{grid-template-columns:1fr;column-gap:0}
  .sheet::before{display:none}
}

/* ---------- flat three-column type blocks ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}
.cols3 article{border-top:1px solid var(--line);padding-top:18px}
.cols3 .k{
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:12px;
}
.cols3 h3{font-family:var(--font-body);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.cols3 p{font-size:.9rem;color:var(--muted);line-height:1.6}
.cols3 span.sub{font-size:.84rem;color:var(--faint)}
/* Zwei Bloecke statt drei (Plattformen seit 2026-09-13: Windows und macOS),
   sonst bliebe rechts eine leere Spalte stehen. */
.cols3.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){ .cols3,.cols3.two{grid-template-columns:1fr} }

/* ---------- migration / schematic panel ---------- */
.migrate-panel{
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  border:1px solid var(--line);padding:32px 34px;
}
.migrate-panel .hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-family:var(--font-mono);font-size:.85rem;color:var(--faint);margin-bottom:22px}
.migrate-panel .hd b{color:var(--text);font-size:1rem}
.migrate-panel .arrow{color:var(--accent-bright)}
.migrate-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;list-style:none}
.migrate-grid li{position:relative;padding-left:26px;font-size:.93rem;color:var(--muted)}
.migrate-grid li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
.migrate-grid li.no::before{content:"✗";color:var(--bad)}
.migrate-grid.single{grid-template-columns:1fr}
.migrate-note{margin-top:22px;font-size:.85rem;color:var(--faint);border-top:1px solid var(--line-soft);padding-top:18px}
@media (max-width:640px){ .migrate-grid{grid-template-columns:1fr} }

/* ---------- morph hinges: the deliberately centered moments ---------- */
.morph{
  padding:120px 0;text-align:center;position:relative;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.morph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 45% 60% at 18% 50%,color-mix(in srgb,var(--amber) 13%,transparent),transparent 70%),
    radial-gradient(ellipse 45% 60% at 82% 50%,color-mix(in srgb,var(--emerald) 13%,transparent),transparent 70%);
}
.morph .wrap{position:relative}
.filmstrip{
  height:30px;max-width:420px;margin:0 auto 42px;position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 55%,transparent);
}
.filmstrip::before,.filmstrip::after{
  content:"";position:absolute;left:10px;right:10px;height:6px;
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 50%,transparent) 0 9px,transparent 9px 22px);
}
.filmstrip::before{top:5px}
.filmstrip::after{bottom:5px}
.checkerstrip{
  height:30px;max-width:420px;margin:0 auto 42px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-image:repeating-conic-gradient(color-mix(in srgb,var(--accent) 26%,transparent) 0% 25%,transparent 0% 50%);
  background-size:15px 15px;
}
.morph-eyebrow{
  display:flex;align-items:center;gap:14px;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:18px;
}
.morph-eyebrow::before{content:"";width:32px;height:1px;background:var(--amber);flex:none}
.morph-eyebrow::after{content:"";width:32px;height:1px;background:var(--emerald);flex:none}
.morph h2{font-size:clamp(1.9rem,4vw,3rem);max-width:24ch;margin:0 auto}
.morph .lead{margin:22px auto 0;max-width:56ch}
.wordmark{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.6rem);
  letter-spacing:.42em;text-indent:.42em;margin-top:44px;
  background:linear-gradient(95deg,var(--amber-bright) 28%,var(--emerald-bright) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.morph.to-diamond .morph-eyebrow::before{background:var(--emerald)}
.morph.to-diamond .morph-eyebrow::after{background:var(--diamond)}
.morph.to-diamond::before{
  background:
    radial-gradient(ellipse 45% 60% at 18% 50%,color-mix(in srgb,var(--emerald) 13%,transparent),transparent 70%),
    radial-gradient(ellipse 45% 60% at 82% 50%,color-mix(in srgb,var(--diamond) 13%,transparent),transparent 70%);
}
.morph.to-diamond .wordmark{
  background:linear-gradient(95deg,var(--emerald-bright) 22%,var(--diamond-bright) 78%);
  -webkit-background-clip:text;background-clip:text;
}

/* ---------- compare table ---------- */
.compare-scroll{overflow-x:auto;margin-top:44px;border:1px solid var(--line)}
table.compare{width:100%;border-collapse:collapse;min-width:640px;background:color-mix(in srgb,var(--bg) 55%,transparent)}
.compare th,.compare td{padding:15px 22px;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line-soft)}
.compare tr:last-child td{border-bottom:0}
.compare thead th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);background:color-mix(in srgb,var(--panel) 82%,transparent)}
.compare thead th:nth-child(2){color:var(--accent-bright)}
.compare td:first-child{color:var(--muted)}
.compare .yes{color:var(--good);font-weight:650}
.compare .no{color:var(--faint)}
.fineprint{font-size:.76rem;color:var(--faint);margin-top:16px;max-width:70ch}

/* ---------- buy box (print mat) ---------- */
.notify{
  max-width:620px;margin:56px auto 0;text-align:center;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  border:1px solid var(--line);
  outline:1px solid var(--line-soft);outline-offset:7px;
  padding:40px 36px;
}
.notify h3{font-size:1.3rem;margin-bottom:10px}
.notify p{color:var(--muted);font-size:.95rem}
.notify .price{font-family:var(--font-mono);font-size:2.4rem;font-weight:700;letter-spacing:-0.02em;color:var(--text);font-variant-numeric:tabular-nums}
.notify .price small{font-size:.9rem;font-weight:400;color:var(--muted)}
/* Founders-Label ueber dem Preis: eine Pille in der Akzentfarbe, damit klar ist,
   dass der Betrag ein Einfuehrungspreis ist. Sichtbar nur, solange config.founders
   gilt (shop.js). */
.notify .price-tag{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);padding:6px 12px;border-radius:999px;margin:0 0 12px}
.price-sub{font-family:var(--font-mono);font-size:.72rem;color:var(--faint);letter-spacing:.05em;margin:10px 0 24px}
.notify .btn{justify-content:center}
.notify .small{font-size:.78rem;color:var(--faint);margin:18px 0 0}
.checkout-note{margin-top:14px;font-size:.85rem;color:var(--bad)}

/* ---------- answers (verdict-first Q&A) ---------- */
.answers{margin-top:40px;border-top:1px solid var(--line)}
.qa{display:grid;grid-template-columns:150px 1fr;gap:8px 32px;padding:26px 0;border-bottom:1px solid var(--line-soft)}
.qa .verdict{font-family:var(--font-display);font-style:italic;font-size:2rem;line-height:1.05;color:var(--accent-bright)}
.qa h3{font-family:var(--font-body);font-size:1.02rem;font-weight:700;margin-bottom:6px}
.qa .a{font-size:.94rem;color:var(--muted)}
@media (max-width:640px){
  .qa{grid-template-columns:1fr;gap:4px}
  .qa .verdict{font-size:1.5rem}
}

/* ---------- final & footer ---------- */
.final{padding:110px 0 130px}
.final h2{font-size:clamp(2rem,4.2vw,3.1rem);max-width:22ch}
.final .lead{margin:20px 0 36px}
.final .cta{display:flex;gap:14px;flex-wrap:wrap}
footer{border-top:1px solid var(--line-soft);padding:44px 0;font-size:.86rem;color:var(--faint)}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
/* flex-wrap: in German the five links (Impressum, Datenschutz,
   Nutzungsbedingungen, ...) are 480 px in one row; unwrapped they made every
   page 509 px wide on a phone, and the fixed top bar followed them. */
footer a{color:var(--faint)}
footer a:hover{color:var(--muted)}
.footer-legal{margin-top:16px;font-size:.76rem;color:var(--faint);justify-content:center;text-align:center;display:block}

/* ---------- clip (site.js section 10) ----------
   A video in a contact-sheet frame. Sized like the before/after frame: as wide
   as the column, never taller than the window, so the whole motion is in view. */
.frame.clip{margin:48px auto 0;width:min(100%,max(20rem,calc((100vh - 140px) * 1.5)))}
@supports (height:100svh){ .frame.clip{width:min(100%,max(20rem,calc((100svh - 140px) * 1.5)))} }
.clip-stage{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg-soft)}
.clip-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media.reveal .frame video{filter:brightness(.22) saturate(.15);transition:filter 1.2s ease .1s}
.media.reveal.in .frame video{filter:brightness(1) saturate(1)}
@media (prefers-reduced-motion: reduce){ .media.reveal .frame video{filter:none;transition:none} }
.no-anim .media.reveal .frame video{filter:none;transition:none}
/* the clips of one stage lie on top of each other; the toggle shows one */
.clip-stage video{transition:opacity .25s ease}
.clip-stage video.clip-off{opacity:0;pointer-events:none}
.clip-toggle{position:absolute;top:14px;left:14px;display:flex;z-index:2;
  background:rgba(12,11,9,.72);border:1px solid var(--line)}
.clip-toggle button{
  appearance:none;border:0;margin:0;cursor:pointer;background:transparent;
  padding:7px 11px;min-height:32px;
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  transition:color .2s ease,background .2s ease;
}
.clip-toggle button + button{border-left:1px solid var(--line)}
.clip-toggle button:hover{color:var(--text)}
.clip-toggle button[aria-pressed="true"]{color:var(--on-accent);background:var(--accent)}
.clip-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){ .clip-toggle{top:8px;left:8px} .clip-toggle button{padding:6px 8px;letter-spacing:.1em} }