/* ============================================================
   Theme "Inselwelt": the world of the web app (/app/) as the homepage.
   Hero: sky, a sun with a face, clouds (all drift with the pointer via
   insel.js), one hill silhouette that flows into the first section, the
   island standing on the demo card.
   Below: three stations on a dashed path (method, every phone on its own
   island), signposts on the meadow (features), a postcard (founder),
   pressed cards (comparison, FAQ), the sky card (CTA) and a night sky
   footer with a moon and a band of stars above the text.
   Green and blue 3D buttons with a 4px bottom edge as in the app. No pink.
   Without insel.js the page is the same, only still.
   Contrast: white on #3E7B12 5.2:1, white on #1F7BB0 4.7:1, ink on cream 15:1,
   #155A82 on #E4F3D2 6.4:1, #F5EFDC on #1E2A44 12:1, #C9D2E8 on #1E2A44 8.6:1.
   ============================================================ */
:root {
  --paper: #FFFDF5;
  --paper-2: #F5EFDC;
  --card: #FFFFFF;
  --sky: #BFE3F7;
  --sky-2: #E8F5FC;
  --grass: #C9E8B7;
  --grass-2: #B5DFA6;
  --grass-3: #EAF6DE;
  --night: #1E2A44;
  --night-soft: #C9D2E8;
  --nav-bg: rgba(255, 253, 245, .94);
  --dot: transparent;
  --ink: #1A1625;
  --ink-soft: #4B4458;
  --ink-mute: #6E667C;
  --line: #1A1625;
  --line-soft: #E5DED1;
  --pink: #3E7B12;
  --pink-d: #3E7B12;
  --pink-soft: #E4F3D2;
  --green: #58A700;
  --green-d: #3E7B12;
  --green-dd: #2C5A0C;
  --blue: #2D9CDB;
  --blue-d: #1F7BB0;
  --blue-dd: #155A82;
  --sun: #FFD84A;
  --soil: #8B5E34;
  --stroke: 2px;
  --shadow-1: 3px 4px 0 var(--ink);
  --shadow-2: 4px 5px 0 var(--ink);
  --shadow-3: 5px 7px 0 var(--ink);
  --shadow-hover: 4px 5px 0 var(--ink);
  --shadow-press: 1px 1px 0 var(--ink);
  --drop: drop-shadow(2px 3px 0 rgba(26, 22, 37, .35));
}
body { background-image: none; }
.accent { color: var(--green-d); }
:focus-visible { outline: 3px solid var(--blue-d); }
details, summary { font-family: inherit; }

/* 3D buttons like the app: flat face, 4px darker bottom edge, press down */
.btn { border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn-primary { background: var(--green-d); color: #fff; box-shadow: 0 4px 0 var(--green-dd); }
.btn-primary:hover { box-shadow: 0 5px 0 var(--green-dd); }
.btn-primary:active { box-shadow: 0 0 0 var(--green-dd); }
.hero-actions .btn:not(.btn-primary), .cta-actions .btn:not(.btn-primary) { background: var(--blue-d); color: #fff; box-shadow: 0 4px 0 var(--blue-dd); }
.hero-actions .btn:not(.btn-primary):hover, .cta-actions .btn:not(.btn-primary):hover { box-shadow: 0 5px 0 var(--blue-dd); }
.hero-actions .btn:not(.btn-primary):active, .cta-actions .btn:not(.btn-primary):active { box-shadow: 0 0 0 var(--blue-dd); }
.btn[data-all][hidden] { display: inline-flex !important; opacity: .4; pointer-events: none; } /* home.css hides [hidden] with !important; the button stays so the row keeps its height */
.eyebrow { background: var(--card); }
.eyebrow.pink { background: var(--pink-soft); }
.num { color: var(--green-d); }

/* nav */
.nav-links a:hover { border-bottom-color: var(--green-d); }
.lang-menu { max-height: 70vh; overflow-y: auto; }
.lang-menu a:hover { background: var(--pink-soft); }
.logo svg rect { fill: var(--green); }

/* hero: sky, sun, clouds, hills */
.hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(var(--sky), var(--sky-2) 70%); padding-top: 96px; padding-bottom: 240px; } /* the strip of sky the travelling clouds need, still leaving the hills in the first screen */
.hero .container { position: relative; z-index: 2; }
.i-hills { position: absolute; left: 0; bottom: -2px; width: 100%; height: 150px; z-index: 1; pointer-events: none; display: block; }
.i-hills path { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.i-hills .h-back { fill: var(--grass-2); }
.i-hills .h-front { fill: var(--grass); }
.i-cloud { --cloud: var(--paper); position: absolute; width: 74px; height: 26px; background: var(--cloud); border: 2px solid var(--ink); border-radius: 999px; pointer-events: none; z-index: 1; transition: transform .5s ease-out, background .7s ease; }
.i-cloud::before { content: ""; position: absolute; left: 16px; top: -14px; width: 30px; height: 16px; background: var(--cloud); border: 2px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transition: background .7s ease; }
.i-cloud::after { content: ""; position: absolute; left: 18px; width: 26px; top: -2px; height: 6px; background: var(--cloud); transition: background .7s ease; } /* exactly the inside of the bump: wider and it wipes out the top outline */
.i-cloud.c1 { left: 4%; top: 12%; }
.i-cloud.c2 { left: 44%; top: 9%; scale: .7; }
.i-cloud.c3 { display: none; } /* two clouds and a sun are enough sky */
/* the sun: a face, blush, slowly turning rays; sits top right above the demo card */
.i-sun { position: absolute; right: 8%; top: 32px; width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--ink); pointer-events: none; z-index: 1; transition: transform .5s ease-out;
  background: radial-gradient(circle at 36% 44%, var(--ink) 3.2px, transparent 4px), radial-gradient(circle at 64% 44%, var(--ink) 3.2px, transparent 4px),
              radial-gradient(circle at 21% 60%, #FFB27A 6px, transparent 7px), radial-gradient(circle at 79% 60%, #FFB27A 6px, transparent 7px), var(--sun); }
.i-sun::before { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: repeating-conic-gradient(var(--ink) 0 2.6deg, transparent 2.6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 78%, transparent 79%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 78%, transparent 79%); }
.i-sun::after { content: ""; position: absolute; left: 50%; top: 52%; width: 24px; height: 12px; margin-left: -12px; border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; }
@media (prefers-reduced-motion: no-preference) { .i-sun::before { animation: sunturn 40s linear infinite; } }

/* travelling clouds: parked outside the hero at rest (nothing changes on the first screen), insel.js
   moves them along the hill line with the scroll position: they follow the viewport a little, grow
   and pass out on the other side. They sit behind the hills (z-index 0) and sink behind the crest
   like ships behind the horizon. On the way the big one turns into a rain cloud, then the sun peeks
   out behind it with a rainbow while the small one takes over the rain. Without JS they never enter.
   The cloud body is its own child (.body) so the sun and the rainbow really lie behind it. */
.i-drift:not(.d1) { z-index: -1; } /* the big cloud is the nearest one: the others cross behind it, never through it */
.i-drift { left: 0; top: 0; z-index: 0; background: transparent; border-color: transparent; transform: translate(-600px, 0); transition: none; will-change: transform; }
.i-drift .body { position: absolute; inset: -2px; z-index: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--cloud); transition: background .7s ease; }
.i-drift::before, .i-drift::after { z-index: 1; }
.i-drift.big { width: 118px; height: 40px; }
.i-drift.big::before { left: 26px; top: -24px; width: 50px; height: 26px; } /* it ends 2px inside the body: a fractional scale must not open a seam */
.i-drift.big::after { left: 28px; width: 46px; top: -2px; height: 8px; }
.i-drift .drops, .i-drift .peek, .i-drift .bow { position: absolute; pointer-events: none; opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.i-drift:not(.big)::before { height: 16px; } /* same 2px overlap on the small travelling clouds */
.i-drift .drops { left: 0; right: 0; top: 100%; height: 34px; z-index: 2; }
.i-drift .drops b { position: absolute; top: 4px; left: 50%; width: 6px; height: 12px; margin-left: -3px; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; opacity: 0; }
.i-drift .drops b:nth-child(1) { margin-left: -24px; }
.i-drift .drops b:nth-child(3) { margin-left: 18px; }
.i-drift.d3 .drops b { width: 7px; height: 14px; } /* the small cloud is scaled down, its drops stay readable */
.i-drift .peek { right: 14px; top: -28px; width: 44px; height: 44px; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); z-index: -1; transform: translate(-14px, 16px) scale(.4); } /* between the bump and the right shoulder, behind the body */
.i-drift .peek::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; background: repeating-conic-gradient(var(--ink) 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(circle, transparent 24px, #000 25px); mask: radial-gradient(circle, transparent 24px, #000 25px); }
.i-drift .bow { --R: var(--bow-r, 115px); left: 50%; bottom: 4px; width: calc(2 * var(--R)); height: var(--R); margin-left: calc(-1 * var(--R)); border-radius: var(--R) var(--R) 0 0; z-index: -2; transform-origin: 50% 100%; transform: scale(.2);
  background: radial-gradient(circle at 50% 100%, transparent 0 calc(var(--R) - 32.5px), var(--ink) calc(var(--R) - 31.5px) calc(var(--R) - 30.5px), var(--blue) calc(var(--R) - 29.5px) calc(var(--R) - 23.5px), #7CC96A calc(var(--R) - 22.5px) calc(var(--R) - 16.5px), var(--sun) calc(var(--R) - 15.5px) calc(var(--R) - 9.5px), #F26B5B calc(var(--R) - 8.5px) calc(var(--R) - 2.5px), var(--ink) calc(var(--R) - 1.5px) calc(var(--R) - .5px), transparent calc(var(--R) + .5px)); } /* red outside, soft stops, six bands of 6px */
.i-drift.rain { --cloud: #C9CFD9; }
.i-drift.rain .drops { opacity: 1; }
.i-drift.sunny .peek { opacity: 1; transform: none; }
.i-drift.sunny .bow { opacity: 1; transform: none; }
.hero.i-nobow .i-drift .bow { display: none; } /* too little free sky for a bow: then the sun comes alone */
@media (prefers-reduced-motion: no-preference) {
  .i-drift.rain .drops b { animation: i-drop 1.1s linear infinite; }
  .i-drift.rain .drops b:nth-child(2) { animation-delay: .4s; }
  .i-drift.rain .drops b:nth-child(3) { animation-delay: .75s; }
}
@keyframes i-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .i-drift { display: none; } }
@keyframes sunturn { to { transform: rotate(360deg); } }
.hero h1 { font-size: clamp(40px, 4.4vw, 56px); }
.hero h1 .h1-a, .hero h1 .accent { display: block; text-wrap: balance; }
.hero-sub { color: var(--ink-soft); }
.hero-note { color: var(--ink-soft); } /* 6.9:1 even on the darkest sky */
.hero-grid > * { min-width: 0; }
.hero h1, .tok, .hero-note { overflow-wrap: anywhere; } /* long words in later languages wrap instead of leaving the screen */
.demo-arrow { display: none; }

/* the island stands on the demo card */
.demo { padding-top: 88px; position: relative; }
.i-isle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 96px; z-index: 3; }
.i-isle .ground { position: absolute; left: 15px; bottom: 6px; width: 120px; height: 46px; background: #7CC96A; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 10px 0 -3px var(--soil), 0 13px 0 -3px var(--ink); }
.i-isle .tree { position: absolute; left: 34px; bottom: 46px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); }
.i-isle .tree::before { content: ""; position: absolute; left: 9px; top: 22px; width: 6px; height: 14px; background: var(--soil); border: 2px solid var(--ink); border-top: 0; }
.i-isle .tower { position: absolute; left: 76px; bottom: 40px; width: 18px; height: 38px; background: #F2B55B; border: 2px solid var(--ink); border-radius: 4px 4px 0 0; }
.i-isle .tower::before { content: ""; position: absolute; left: 4px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ink); }
.i-isle .roof { position: absolute; left: 70px; bottom: 76px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 16px solid #D64541; filter: drop-shadow(0 -1px 0 var(--ink)); }
.i-isle .flag { position: absolute; left: 100px; bottom: 60px; width: 18px; height: 12px; background: var(--green); border: 1.5px solid var(--ink); border-radius: 2px; }
.i-isle .flag::before { content: ""; position: absolute; left: -3px; top: -2px; width: 2px; height: 28px; background: var(--ink); }
.demo-card { position: relative; z-index: 1; border-radius: var(--r-wonk2); background: var(--paper); }
.demo-pair { background: var(--card); }
.demo-hint { font-family: var(--font-hand); font-size: 19px; font-weight: 400; }
.bubble { background: var(--card); }
.tok { background: var(--card); box-shadow: 0 3px 0 var(--ink); border-radius: 12px; transition: transform .08s ease, box-shadow .08s ease, background .15s ease; }
.tok:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.tok:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.tok.on { background: var(--pink-soft); }
.tok .d { color: var(--blue-d); }
.tok:not(.on) .d { filter: blur(5px); opacity: .55; } /* a riddle, not a rendering glitch */
@media (hover: hover) { .tok:not(.on):hover .d { filter: blur(5px); } } /* revealing is a tap, never a hover */
.tok.on .d { color: var(--blue-dd); }
.demo-meaning { background: var(--card); border: 2px solid var(--line); min-height: 92px; opacity: 1; transform: none; } /* two lines of 15px plus padding: the same height at rest and with the meaning */
.demo-meaning.i-rest { font-family: var(--font-hand); font-size: 17px; color: var(--ink-mute); background: transparent; border: 2px dashed #CFC7B8; }
.demo-done { display: block; width: 100%; min-height: 21px; } /* the done line always has its own row, empty at rest: the buttons never wrap */
.demo-cap { color: var(--ink-soft); }

/* ---- the world below the hero ---- */
main > section { position: relative; }
main > section:nth-of-type(1) { background: linear-gradient(var(--grass) 0, var(--paper) 200px); --i-meadow: 1; } /* the meadow of the hero runs into the first section */
section .eyebrow { font-family: var(--font-hand); border-radius: 14px 18px 15px 17px / 17px 14px 18px 15px; }

/* method: three islands on one dashed path, the phones are the stations */
.steps { position: relative; counter-reset: station; }
.steps::before { content: ""; position: absolute; left: calc(75% + 12px); top: 40px; bottom: 40px; border-left: 3px dashed var(--green-d); opacity: .5; z-index: 0; } /* centre of the phone column */
.step:nth-child(even) .step-shot { order: 0; } /* no zigzag: the path runs straight down the right column */
.step { counter-increment: station; }
.step-num { display: none; } /* the number sits on the island */
.step-links a { border-bottom-color: var(--green-d); }
.step-links a:hover { color: var(--green-d); }
.step-shot { position: relative; isolation: isolate; z-index: 1; padding-bottom: 30px; } /* the phone covers the path */
.step-shot::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(88%, 330px); height: 60px; transform: translateX(-50%); background: #7CC96A; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 0 10px 0 -3px var(--soil), 0 13px 0 -3px var(--ink); z-index: -1; }
.step-shot::before { content: "0" counter(station); position: absolute; left: calc(50% + 96px); bottom: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-d); color: #fff; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 18px; z-index: 1; } /* the station number sits on the island */
.shot { border-radius: 24px; background: var(--paper); transform: rotate(-1.5deg); }
.step:nth-child(even) .shot { transform: rotate(1.5deg); }

/* features: signposts on the meadow */
.features { background: linear-gradient(var(--paper), var(--grass-3) 140px, #D8EFCB); border-top: 0; border-bottom: 0; }
.feat-list { gap: var(--sp-4) var(--sp-5); }
.feat { background: var(--card); border: 2px solid var(--ink); border-radius: 16px; padding: 18px 20px; box-shadow: 0 4px 0 var(--ink); }
.feat .num { display: inline-flex; width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-d); color: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-size: 15px; } /* same badge as the stations */
.feat .more { border-bottom-color: var(--green-d); }
.feat .more:hover { color: var(--green-d); }

/* founder: a postcard from the island, sky behind it */
main > section:nth-of-type(3) { background: linear-gradient(var(--sky-2), var(--paper) 70%); }
.founder { position: relative; background: var(--card); box-shadow: 0 6px 0 var(--ink); transform: rotate(-.6deg); padding-right: 110px; }
.founder::before { content: ""; position: absolute; top: -13px; left: 50%; width: 132px; height: 30px; transform: translateX(-50%) rotate(-2deg); opacity: .9;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .85) 0 7px, rgba(232, 245, 252, .9) 7px 14px); border: 1px solid rgba(26, 22, 37, .35);
  clip-path: polygon(0 20%, 3% 0, 6% 25%, 9% 0, 100% 0, 97% 30%, 100% 60%, 97% 100%, 6% 100%, 3% 75%, 0 100%); } /* torn tape */
.founder::after { content: ""; position: absolute; top: 20px; right: 20px; width: 54px; height: 66px; border: 3px dotted #B9B2A6; border-radius: 3px;
  background: radial-gradient(circle at 50% 44%, var(--sun) 10px, var(--ink) 11px, var(--ink) 12px, transparent 13px), linear-gradient(var(--sky), var(--sky-2)); background-clip: padding-box; } /* the stamp: grey perforation on the white card, sun inside */

/* comparison and FAQ: pressed cards */
.cmp { box-shadow: 0 6px 0 var(--ink); }
.cmp-row .us { background: var(--pink-soft); }
.cmp-head .us { background: var(--green-d); color: #fff; }
.faq details { border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transition: transform .12s ease, box-shadow .12s ease; }
.faq details[open] { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.faq summary .plus { color: var(--green-d); }

/* CTA: the same sky, hill and puppet as the app card */
.cta { background: linear-gradient(var(--sky), var(--sky-2)); box-shadow: 0 7px 0 var(--ink); }
.cta-hill { background: var(--grass); }
.cta .accent { color: var(--green-d); }
.cta-note { font-weight: 400; font-size: 14px; color: var(--ink-mute); }

.more-list a { box-shadow: 0 3px 0 var(--ink); transition: transform .08s ease, box-shadow .08s ease; }
.more-list a:hover { background: var(--pink-soft); }
.more-list a:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

/* footer: night over the island; stars and moon live in a band above the text.
   Nur der Seitenfuss: 146 Karten auf den Unterseiten tragen ein eigenes <footer>
   (Bewertungs- und Gruenderzeilen), die sonst mitten im Text zum Nachthimmel wuerden. */
body > footer { position: relative; overflow: hidden; background: var(--night); color: var(--paper-2); padding-top: 110px; }
body > footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 84px; pointer-events: none;
  background-image: radial-gradient(var(--paper-2) 1.2px, transparent 1.8px), radial-gradient(var(--paper-2) .8px, transparent 1.4px), radial-gradient(var(--paper-2) 1px, transparent 1.6px);
  background-size: 210px 84px, 150px 60px, 330px 84px; background-position: 30px 22px, 95px 48px, 180px 10px; }
body > footer::before { content: ""; position: absolute; right: 7%; top: 16px; width: 46px; height: 46px; border-radius: 50%; box-shadow: 12px 6px 0 0 var(--paper-2); transform: rotate(-20deg); z-index: 1; } /* the moon */
body > footer .container { position: relative; z-index: 1; }
body > footer .logo { color: var(--paper-2); }
.foot-brand p, .foot-bottom { color: var(--night-soft); }
.foot-links h4 { color: var(--sky); }
.foot-links a { color: var(--paper-2); }
.foot-links a:hover { color: var(--sky); }
.foot-bottom { border-top-color: rgba(245, 239, 220, .25); }
body > footer a:focus-visible { outline-color: var(--sun); }

/* ============================================================
   The world below the hero (insel.js): clouds that pass by while you scroll.
   They sit in the empty strips between the sections, so they never cross text;
   .container is lifted above the layer so a mismeasurement can never hide a word.
   Only transform moves, nothing reflows. Details at the end: the sun setting behind
   the hill of the CTA card with two gulls, and a shooting star in the footer sky.
   ============================================================ */
.i-world { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* clipped to the page: a cloud leaving on the right must not widen the document */
main > section > .container, main .container, body > section .container { position: relative; z-index: 1; } /* text always above the sky, on every page shape */
.i-measuring .rv { transform: none !important; transition: none !important; } /* the transition alone would animate over .7s and the measurement would still read the old box */ /* insel.js measures the strips without the reveal offset */
.i-pc { --cloud: var(--paper); position: absolute; left: 0; top: 0; width: 74px; height: 26px; transform: translate3d(-400px, 0, 0); transform-origin: 50% 50%; will-change: transform; }
.i-pc .body { position: absolute; inset: 0; background: var(--cloud); border: 2px solid var(--ink); border-radius: 999px; transition: background .7s ease; }
.i-pc::before { content: ""; position: absolute; left: 16px; top: -14px; width: 30px; height: 16px; z-index: 1; background: var(--cloud); border: 2px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transition: background .7s ease; }
.i-pc::after { content: ""; position: absolute; left: 18px; width: 26px; top: -2px; height: 6px; z-index: 1; background: var(--cloud); transition: background .7s ease; }
.i-pc .drops { position: absolute; left: 0; right: 0; top: 100%; height: 30px; z-index: 2; opacity: 0; transition: opacity .5s ease; }
.i-pc .drops b { position: absolute; top: 4px; left: 50%; width: 6px; height: 12px; margin-left: -3px; background: var(--blue); border: 1.5px solid var(--ink); border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; opacity: 0; }
.i-pc .drops b:nth-child(1) { margin-left: -22px; }
.i-pc .drops b:nth-child(3) { margin-left: 16px; }
.i-pc .peek { position: absolute; right: 10px; top: -20px; width: 34px; height: 34px; z-index: -1; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); opacity: 0; transform: translate(-12px, 14px) scale(.4); transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.4, .64, 1); }
.i-pc .peek::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: repeating-conic-gradient(var(--ink) 0 3deg, transparent 3deg 30deg); -webkit-mask: radial-gradient(circle, transparent 19px, #000 20px); mask: radial-gradient(circle, transparent 19px, #000 20px); }
.i-pc.rain { isolation: isolate; } /* the sun of a neighbour must not shine through this one */
.i-pc.rain { --cloud: #C9CFD9; }   /* eine Regenwolke ist von Anfang an grau, nicht erst ab der Bildmitte */
.i-pc.rain.on .drops { opacity: 1; }
.i-pc.sun.on .peek { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .i-pc.rain.on .drops b { animation: i-drop 1.1s linear infinite; }
  .i-pc.rain.on .drops b:nth-child(2) { animation-delay: .4s; }
  .i-pc.rain.on .drops b:nth-child(3) { animation-delay: .75s; }
}

/* the end of the page: sunset behind the hill of the CTA card, two gulls above it */
.cta { isolation: isolate; } /* so the sun really lies behind the hill and not behind the whole card */
.cta::before { content: ""; position: absolute; left: 12%; bottom: 25px; width: 74px; height: 74px; z-index: 0; border-radius: 50%; background: var(--sun); border: 2px solid var(--ink); } /* an der Karte, nicht am ueberstehenden Huegel: sonst haelftet der Kartenrand die Sonne */
.cta::after { content: ""; position: absolute; left: calc(12% - 20px); bottom: 5px; width: 114px; height: 114px; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(var(--ink) 0 2.8deg, transparent 2.8deg 30deg); -webkit-mask: radial-gradient(circle, transparent 43px, #000 44px, #000 55px, transparent 56px); mask: radial-gradient(circle, transparent 43px, #000 44px, #000 55px, transparent 56px); }
.cta-hill { z-index: 1; } /* der Huegel liegt vor der Sonne, sie geht dahinter unter */
.cta > .i-gull.i-gull { position: absolute; z-index: 1; width: 28px; height: 12px; pointer-events: none; }
/* the two arcs have to meet in the middle, otherwise it reads as two scratches */
.i-gull::before, .i-gull::after { content: ""; position: absolute; top: 0; width: 15px; height: 13px; border: 3px solid var(--ink); border-color: var(--ink) transparent transparent transparent; border-radius: 60% 60% 0 0 / 90% 90% 0 0; }
.i-gull::before { left: 0; transform: rotate(-15deg); }
.i-gull::after { left: 13px; transform: rotate(15deg); }
.cta > .i-gull.a { right: 6%; bottom: 112px; }   /* the free band between the last line and the hill, 80px tall on every width */
.cta > .i-gull.b { right: 16%; bottom: 146px; scale: .72; }
@media (prefers-reduced-motion: no-preference) {
  .i-gull.a { animation: i-glide 13s ease-in-out infinite; }
  .i-gull.b { animation: i-glide 17s ease-in-out infinite reverse; }
}
@keyframes i-glide { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-34px, -12px); } }

/* one shooting star in the night sky of the footer */
.i-shoot { position: absolute; left: 12%; top: 22px; width: 76px; height: 2.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--paper-2)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .i-shoot { animation: i-shoot 8s linear infinite; } }
@keyframes i-shoot { 0% { transform: translate(0, 0) rotate(24deg); opacity: 0; } 3% { opacity: 1; } 16% { transform: translate(340px, 152px) rotate(24deg); opacity: 0; } 100% { transform: translate(340px, 152px) rotate(24deg); opacity: 0; } }
@media (max-width: 600px) {
  /* der Huegel steigt schmaler steiler an: ohne das Anheben bleibt nur ein gelber Splitter */
  .cta::before { bottom: 44px; }
  .cta::after { bottom: 20px; }
}
@media (max-width: 760px) {
  .cta::before { left: 10%; bottom: 30px; width: 60px; height: 60px; }
  .cta::after { left: calc(10% - 18px); bottom: 12px; width: 96px; height: 96px; -webkit-mask: radial-gradient(circle, transparent 35px, #000 36px, #000 46px, transparent 47px); mask: radial-gradient(circle, transparent 35px, #000 36px, #000 46px, transparent 47px); }
}

@media (max-width: 1300px) { .i-cloud.c1 { top: 22px; left: 4%; } }
@media (max-width: 1200px) { .demo-meaning { min-height: 92px; } } /* the hint wraps to two lines here */ /* narrow desktops: the sticker reaches the left edge */
@media (max-width: 980px) {
  .hero { padding-top: 96px; padding-bottom: 290px; }
  .hero-grid { grid-template-areas: "title" "copy" "demo"; } /* tablet: message first, the demo has room below */
  .i-hills { height: 130px; }
  .i-cloud.c1 { left: 5%; top: 24px; }
  .i-cloud.c2 { display: none; }
  .i-sun { right: 5%; top: 32px; }
  .i-drift .bow { --R: min(84px, var(--bow-r, 84px)); } /* the strip above the hills is low here */
}
@media (max-width: 760px) {
  .hero { padding-top: 100px; padding-bottom: 210px; } /* enough sky for the bow without a whole extra screen of scrolling */
  .hero-grid { grid-template-areas: "title" "demo" "copy"; } /* phone: the demo stays in the first screen */
  .i-hills { height: 110px; }
  .i-sun { scale: .75; right: 5%; top: 10px; }
  .i-cloud.c1 { scale: .75; left: 2%; top: 20px; }
  .i-drift.d2, .i-drift.d4 { display: none; } /* two travellers are enough in the narrow strip above the hills */
  .demo { padding-top: 80px; }
  .demo-meaning { min-height: 92px; } /* three lines here */
  .tok { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .steps::before { display: none; }
  .step-shot::before { left: calc(50% + 84px); bottom: 8px; }
  .founder { padding-right: 34px; }
  .founder::after { display: none; }
  .cmp-row .us::before { color: var(--green-dd); } /* 7:1 on the green cell */
}

/* B11: die vier endlosen Bewegungen ruhen, solange sie nicht im Bild sind. Ohne
   IntersectionObserver setzt das Skript .i-allanim und alles laeuft wie bisher. */
@media (prefers-reduced-motion: no-preference) {
  /* die Moewen tragen .a/.b, ihre Kurzschreibweise setzt den Laufzustand mit zurueck:
     die Ruhe braucht dieselbe Genauigkeit, sonst gewinnt sie nie. */
  .i-sun::before, .i-gull.a, .i-gull.b, .i-shoot { animation-play-state: paused; }
  .i-sun.i-anim::before, .i-gull.a.i-anim, .i-gull.b.i-anim, .i-shoot.i-anim,
  .i-allanim .i-sun::before, .i-allanim .i-gull.a, .i-allanim .i-gull.b,
  .i-allanim .i-shoot { animation-play-state: running; }
}