/* Produktübersicht: eigene Gestaltung, gemeinsame Figuren mit dem Familien-Board. */
:root {
  --paper:#f7f8f2;
  --ink:#202722;
  --muted:#646b65;
  --accent:#f1b49a;
  --accent-ink:#91472e;
  --accent-hover:#eaa184;
  --accent-soft:#f8e3d8;
  --lime:#e1ef8d;
  --line:#dee2d8;
  --white:#fff;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:105px;
}

body {
  background:var(--paper);
  color:var(--ink);
  font-family:"Avenir Next","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
  color:inherit;
}

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

[hidden] {
  display:none!important;
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid var(--accent-ink);
  outline-offset:5px;
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link:focus {
  position:fixed;
  z-index:100;
  top:10px;
  left:10px;
  padding:12px;
  background:white;
}

.lp-nav {
  height:96px;
  max-width:1400px;
  padding:0 48px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:40px;
  position:sticky;
  top:0;
  background:rgba(247,248,242,.94);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:20;
}

.lp-brand {
  display:inline-flex;
  align-items:center;
  font-weight:800;
  font-size:23px;
  letter-spacing:-1px;
  white-space:nowrap;
  gap:10px;
}

.rudelfunk-mark { display:block; flex-shrink:0; width:42px; height:42px; }
.rudelfunk-wordmark { font-weight:800; letter-spacing:-.055em; }

.brand-light {
  font-weight:500;
}

.brand-period {
  color:var(--accent-ink);
}

.brand-mark {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--accent);
  color:var(--ink);
  width:39px;
  height:39px;
  border-radius:12px;
  margin-right:10px;
  font-size:34px;
  letter-spacing:-3px;
  line-height:1;
  padding-right:5px;
}

.brand-mark span {
  color:var(--accent-ink);
  font-size:24px;
  align-self:flex-start;
  margin-top:2px;
}

.lp-nav-links {
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
  font-size:13px;
  font-weight:600;
}

.lp-nav-links a {
  padding:10px 0;
}

.lp-nav-links a:hover,.lp-footer a:hover {
  color:var(--accent-ink);
}

.lp-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  border:1px solid transparent;
  border-radius:9px;
  min-height:54px;
  padding:12px 23px;
  font-size:14px;
  font-weight:700;
  transition:transform .2s,background .2s,box-shadow .2s;
}

.lp-btn:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 15px #20272213;
}

.lp-btn span {
  font-size:22px;
  font-weight:400;
  line-height:1;
}

.nav-cta {
  background:var(--ink);
  color:white;
  min-height:45px;
  padding:8px 18px;
  gap:20px;
  font-size:12px;
}

.primary {
  background:var(--accent);
  color:var(--ink);
}

.primary:hover {
  background:var(--accent-hover);
}

.lime {
  background:var(--lime);
  color:var(--ink);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-weight:650;
  font-size:13px;
  padding:12px 0;
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.text-link span {
  font-size:20px;
}

.menu-toggle {
  display:none;
  border:0;
  background:none;
  width:44px;
  height:44px;
}

.menu-toggle span {
  display:block;
  height:2px;
  width:23px;
  background:var(--ink);
  margin:6px auto;
}

.lp-hero {
  max-width:1400px;
  margin:auto;
  padding:66px 48px 104px;
  display:grid;
  grid-template-columns:1fr 1.12fr;
  align-items:center;
  gap:45px;
  overflow:hidden;
}

.eyebrow {
  font-size:10px;
  text-transform:uppercase;
  font-weight:750;
  letter-spacing:1.7px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:23px;
}

.status-dot {
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  display:inline-block;
  flex:none;
}

h1 {
  font-size:clamp(44px,4.75vw,70px);
  line-height:1.045;
  font-weight:650;
  letter-spacing:-3.5px;
}

em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:var(--accent-ink);
}

.hero-lead {
  max-width:420px;
  margin-top:27px;
  font-size:16px;
  color:var(--muted);
  line-height:1.85;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:29px;
}

.hero-note {
  color:var(--muted);
  font-size:11px;
  margin-top:11px;
}

.hero-family {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:35px;
}

.hero-family p {
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
}

.hero-family strong {
  font-weight:600;
  color:var(--ink);
}

.avatar-stack {
  display:flex;
  padding-left:0;
}

.avatar-stack .d-avatar {
  width:32px;
  height:32px;
  margin-right:-9px;
  border:3px solid var(--paper);
}

.avatar-stack .d-avatar:last-child {
  margin-right:0;
}

.hero-visual {
  position:relative;
  min-width:0;
  padding:58px 0 62px;
}

.orbit {
  position:absolute;
  border:1px solid #cad0c3;
  border-radius:50%;
  pointer-events:none;
}

.orbit-one {
  inset:0 3% 0 5%;
  transform:rotate(28deg);
}

.orbit-two {
  inset:25px -30px 28px -13px;
  transform:rotate(-24deg);
  border-style:dashed;
  opacity:.65;
}

.visual-spark {
  position:absolute;
  right:0;
  top:-10px;
  font-size:90px;
  line-height:1;
  color:var(--accent-ink);
  transform:rotate(-12deg);
}

.hero-device {
  position:relative;
  background:#fff;
  border:8px solid #282e2b;
  border-radius:23px;
  padding:22px 15px 15px;
  box-shadow:14px 24px 0 #e5e8db,0 28px 65px #20311c16;
  transform:rotate(-3deg);
  z-index:1;
}

.device-camera {
  height:4px;
  width:4px;
  border-radius:50%;
  background:#858980;
  position:absolute;
  top:3px; /* mittig in der 10px-Blende: (10 − 4) / 2 */
  left:50%;
  transform:translateX(-50%); /* ohne das säße die Linse um ihren halben Durchmesser daneben */
}

.preview-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.preview-top b {
  font-size:12px;
  display:block;
  letter-spacing:-.3px;
}

.preview-top b span {
  color:#b28122;
}

.preview-top small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-top:3px;
}

.preview-top>strong {
  font-size:27px;
  font-weight:550;
  letter-spacing:-1px;
}

.preview-nav {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:8px;
  margin:16px 0 13px;
}

.preview-nav>span {
  padding:5px 10px;
}

.preview-nav .active {
  background:var(--accent);
  color:var(--ink);
  border-radius:5px;
}

.preview-nav i {
  margin-left:auto;
  color:var(--muted);
  font-size:7px;
  font-style:normal;
}

.hero-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.peek-col {
  background:var(--person-soft);
  border-radius:10px;
  padding:12px 8px;
  min-width:0;
}

.peek-person {
  display:flex;
  align-items:center;
  gap:7px;
}

.peek-person .d-avatar {
  width:29px;
  height:29px;
}

.peek-person b {
  font-size:12px;
}

.peek-person small {
  display:block;
  font-size:8px;
  color:var(--muted);
}

.peek-progress {
  height:4px;
  background:#fff9;
  margin:12px 0;
  border-radius:4px;
  overflow:hidden;
}

.peek-progress i {
  display:block;
  height:100%;
  background:var(--person);
}

.peek-task {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 6px;
  border-radius:6px;
  margin-bottom:7px;
  background:#ffffffcf;
  font-size:9px;
  line-height:1.4;
  min-height:42px;
}

.peek-task>span {
  width:12px;
  height:12px;
  border:1px solid #89958a;
  border-radius:4px;
  flex:none;
}

.peek-task.done {
  color:#637166;
  text-decoration:line-through;
}

.peek-task.done>span {
  background:#477357;
  border:0;
  color:#fff;
  font-size:9px;
  text-align:center;
}

.peek-points {
  font-size:9px;
  padding-top:5px;
  text-align:right;
}

.preview-family-event {
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:7px;
  background:#faf0e8;
  padding:11px 8px;
  border-radius:8px;
  font-size:8px;
}

.preview-family-event svg {
  width:14px;
}

.event-pill {
  margin-left:auto;
  background:white;
  padding:2px 6px;
  border-radius:8px;
  font-size:7px;
}

.floating-note {
  position:absolute;
  top:10px;
  left:5px;
  z-index:3;
  background:#fff;
  box-shadow:0 8px 30px #313e2020;
  border-radius:13px;
  padding:13px 17px;
  display:flex;
  align-items:center;
  gap:10px;
  transform:rotate(3deg);
}

.floating-note strong {
  display:block;
  font-size:11px;
}

.floating-note small {
  display:block;
  font-size:9px;
  color:var(--muted);
}

.note-check {
  background:#e9f0d4;
  border-radius:50%;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  color:#456730;
}

.floating-sticker {
  position:absolute;
  bottom:18px;
  right:5px;
  z-index:3;
  transform:rotate(5deg);
  background:var(--lime);
  padding:16px 21px;
  font-size:12px;
  box-shadow:0 7px 16px #33491d15;
  border-radius:3px;
  line-height:1.65;
}

.floating-sticker>span {
  position:absolute;
  font-size:42px;
  color:var(--accent-ink);
  left:-28px;
  top:6px;
}

.visual-caption {
  position:absolute;
  bottom:-5px;
  left:14px;
  font-size:12px;
  color:var(--muted);
  font-family:Georgia,serif;
  font-style:italic;
  transform:rotate(-3deg);
}

.benefit-strip {
  max-width:1304px;
  margin:0 auto;
  padding:25px 20px;
  border-block:1px solid var(--line);
  display:flex;
  justify-content:center;
  gap:70px;
}

.benefit-strip>span {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  font-weight:600;
}

.benefit-strip svg {
  width:17px;
  height:17px;
  color:#65745e;
}

.lp-section {
  max-width:1304px;
  padding:100px 48px;
  margin:auto;
}

.section-heading {
  text-align:center;
  margin:0 auto 45px;
}

.section-heading .eyebrow {
  justify-content:center;
}

.section-heading p:last-child {
  margin-top:20px;
  color:var(--muted);
  font-size:15px;
}

h2 {
  font-size:clamp(34px,3.6vw,50px);
  font-weight:600;
  letter-spacing:-1.8px;
  line-height:1.12;
}

h3 {
  font-size:29px;
  font-weight:600;
  letter-spacing:-1px;
  line-height:1.16;
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}

.feature {
  border-radius:20px;
  padding:32px;
  overflow:hidden;
  position:relative;
}

.feature h3 {
  margin:18px 0 15px;
}

.feature p {
  font-size:13px;
  color:var(--muted);
  max-width:40ch;
  line-height:1.8;
}

.feature-kicker {
  font-size:9px;
  font-weight:700;
  letter-spacing:1.4px;
}

.feature-calendar {
  grid-column:span 4;
  background:var(--accent-soft);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
  align-items:center;
}

.feature-calendar .text-link {
  color:var(--accent-ink);
  margin-top:15px;
}

.feature-tasks {
  grid-column:span 2;
  background:#eaf0de;
}

.feature-rewards {
  grid-column:span 3;
  background:#f3e9dd;
  padding-right:200px;
  min-height:285px;
}

.feature-lists {
  grid-column:span 3;
  background:#eeeafa;
  padding-right:230px;
  min-height:285px;
}

.calendar-art {
  padding:22px 16px;
  background:white;
  border-radius:12px;
  box-shadow:0 12px 24px #31448310;
  transform:rotate(5deg) translateX(12px);
  min-width:235px;
}

.calendar-art-title {
  font-weight:700;
  font-size:13px;
}

.calendar-art-title span {
  display:block;
  font-size:9px;
  font-weight:400;
  margin-top:4px;
}

.calendar-art-title b {
  float:right;
}

.mini-week {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  text-align:center;
  gap:5px;
  margin:20px 0;
}

.mini-week>div {
  padding:5px;
}

.mini-week span {
  font-size:8px;
  display:block;
  color:#78827d;
}

.mini-week b {
  font-size:12px;
}

.mini-week .today {
  background:var(--accent);
  color:var(--ink);
  border-radius:7px;
}

.mini-week .today span {
  color:var(--ink);
}

.mini-schedule {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  row-gap:8px;
}

.mini-schedule>div {
  padding:8px;
  border-radius:6px;
  font-size:10px;
  font-weight:600;
}

.mini-schedule small {
  display:block;
  font-size:7px;
  margin-bottom:3px;
}

.schedule-blue {
  background:#f9e2d6;
  grid-column:2/5;
}

.schedule-lime {
  background:#e9f0d4;
  grid-column:3/6;
}

.schedule-peach {
  background:#fae8dd;
  grid-column:1/5;
}

.schedule-lime span {
  float:right;
}

.task-art {
  display:grid;
  gap:9px;
  margin-top:24px;
}

.task-art>div {
  background:#fff9;
  border-radius:8px;
  display:flex;
  gap:9px;
  align-items:center;
  padding:11px;
  font-size:11px;
  font-weight:600;
}

.task-art small {
  display:block;
  font-size:8px;
  color:var(--muted);
}

.task-art b {
  margin-left:auto;
  font-size:10px;
  color:#527341;
}

.round-check,.empty-check {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:6px;
  flex:none;
  background:#597745;
  color:white;
}

.empty-check {
  border:1px solid #a3ad9b;
  background:transparent;
}

.reward-art {
  position:absolute;
  right:12px;
  top:53px;
  width:175px;
  transform:rotate(9deg);
}

.reward-star {
  font-size:125px;
  line-height:1;
  color:#bd623f;
  display:block;
  text-align:center;
}

.reward-ticket {
  display:block;
  background:#fff9;
  border:1px dashed #c1a899;
  border-radius:5px;
  padding:12px;
  text-align:center;
  font-size:7px;
  margin-top:-20px;
  position:relative;
}

.reward-ticket strong {
  display:block;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
}

.reward-ticket small {
  font-size:8px;
}

.list-art {
  position:absolute;
  right:-8px;
  bottom:24px;
  width:210px;
  transform:rotate(-7deg);
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 10px 30px #3830510c;
}

.list-art>span {
  font-size:14px;
  font-weight:600;
  display:flex;
  justify-content:space-between;
}

.list-art svg {
  width:18px;
}

.list-art p {
  border-bottom:1px solid #e7e6ec;
  padding:13px 0;
  font-size:10px;
}

.list-art i {
  font-style:normal;
  margin-right:8px;
  color:#65745e;
}

.demo-section {
  background:#e9eddf;
  border-block:1px solid #e0e5d7;
}

.demo-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:40px;
}

.demo-heading>p {
  width:340px;
  color:var(--muted);
  font-size:14px;
  padding-bottom:4px;
}

.lp-demo-frame {
  background:#f9faf6;
  border:1px solid #d6dccc;
  border-radius:18px;
  box-shadow:0 20px 50px #333d1910;
  overflow:hidden;
  position:relative;
}

.demo-toolbar {
  display:flex;
  align-items:center;
  gap:20px;
  background:white;
  border-bottom:1px solid #e6e9e0;
  padding:15px 24px;
}

.demo-brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:700;
}

.demo-brand .status-dot {
  background:#789b4b;
}

.demo-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:#727b6c;
  margin-left:auto;
}

.lp-reset {
  background:none;
  border:1px solid #d5dace;
  padding:6px 10px;
  font-size:10px;
  border-radius:6px;
  min-height:36px;
}

.lp-reset span {
  margin-left:8px;
  font-size:16px;
}

.lp-reset:hover {
  background:#f1f3eb;
}

.demo-view-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:25px 25px 20px;
  gap:15px;
}

.demo-view-header>div>span {
  font-size:8px;
  letter-spacing:1.2px;
  color:var(--muted);
}

.demo-view-header h3 {
  font-size:24px;
  margin-top:4px;
}

.demo-tabs {
  display:flex;
  border:1px solid #dfe4d7;
  background:#edf0e6;
  padding:4px;
  border-radius:8px;
}

.demo-tabs button {
  font-size:11px;
  border:0;
  background:transparent;
  padding:8px 16px;
  border-radius:5px;
  min-height:40px;
}

.demo-tabs [aria-selected=true] {
  background:var(--ink);
  color:white;
}

.lp-demo {
  padding:0 25px 25px;
  overflow-x:auto;
}

.d-board {
  display:grid;
  grid-template-columns:repeat(3,minmax(215px,1fr));
  gap:15px;
}

.d-col {
  border:1px solid color-mix(in srgb,var(--person) 22%,white);
  border-radius:12px;
  background:color-mix(in srgb,var(--person) 6%,white);
  overflow:hidden;
  transition:background .3s;
}

.d-col.all-done {
  background:#fcf4d8;
  border-color:#e4c36c;
}

.d-progress {
  height:4px;
  background:color-mix(in srgb,var(--person) 12%,white);
}

.d-progress-fill {
  height:100%;
  background:var(--person);
  transition:width .3s;
}

.all-done .d-progress-fill {
  background:#c09520;
}

.d-head {
  padding:18px 14px;
}

.d-top {
  display:flex;
  align-items:center;
  gap:10px;
}

.d-avatar {
  display:inline-block;
  height:38px;
  width:38px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
}

.d-avatar svg {
  width:100%;
  height:100%;
}

.d-ident {
  flex:1;
  min-width:0;
}

.d-name {
  font-size:17px;
  font-weight:700;
  letter-spacing:-.4px;
}

.d-stats {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  color:var(--muted);
}

.d-streak,.d-done {
  display:inline-flex;
  align-items:center;
  gap:3px;
}

.d-streak svg,.d-done svg {
  width:12px;
  height:12px;
  color:#996524;
}

.d-pts {
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff9;
  border:1px solid #ffffff;
  padding:6px 9px;
  border-radius:7px;
}

.d-pts b {
  font-size:15px;
  line-height:1.3;
}

.d-pts i {
  font-size:8px;
  font-style:normal;
  color:var(--muted);
}

.d-tasks {
  padding:0 10px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
}

.d-label {
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:2px 3px;
  color:var(--muted);
}

.d-event {
  display:flex;
  align-items:center;
  gap:9px;
  background:#ffffffb3;
  border-left:2px solid var(--person);
  border-radius:6px;
  padding:10px;
  margin-bottom:6px;
}

.d-event-icon svg {
  width:17px;
  height:17px;
  color:#5d6b74;
}

.d-event b {
  font-size:11px;
  display:block;
}

.d-event i {
  font-style:normal;
  font-size:9px;
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--muted);
}

.d-event i svg {
  width:10px;
  height:10px;
}

.d-task {
  width:100%;
  border:1px solid #e3e6df;
  background:white;
  display:flex;
  text-align:left;
  align-items:center;
  gap:8px;
  padding:12px 9px;
  border-radius:8px;
  min-height:65px;
  transition:background .2s,border-color .2s;
}

.d-task:hover {
  border-color:var(--person);
  background:#ffffffaa;
}

.d-task-icon {
  width:27px;
  height:27px;
  border-radius:6px;
  background:color-mix(in srgb,var(--task-color) 12%,white);
  display:grid;
  place-items:center;
  flex:none;
}

.d-task-icon svg {
  width:15px;
  height:15px;
}

.d-task-body {
  flex:1;
  min-width:0;
}

.d-task-title {
  display:block;
  font-size:11px;
  font-weight:650;
}

.d-task-meta {
  display:flex;
  align-items:center;
  gap:3px;
  font-size:8px;
  color:var(--muted);
  margin-top:3px;
}

.d-task-meta>svg {
  height:10px;
  width:10px;
}

.d-points {
  margin-left:auto;
  color:#657b4c;
}

.d-check {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:none;
  border:1px solid #c4cbbb;
  border-radius:6px;
}

.d-check svg {
  width:12px;
  height:12px;
  opacity:0;
}

.d-task.done {
  background:#eef4e7;
  border-color:#d7e3ca;
}

.d-task.done .d-check {
  background:#5a7645;
  border-color:#5a7645;
  color:white;
}

.d-task.done .d-check svg {
  opacity:1;
}

.d-task.done .d-task-title {
  text-decoration:line-through;
  color:#6b7662;
}

.d-add {
  font-size:9px;
  color:#798071;
  display:flex;
  align-items:center;
  gap:5px;
  padding:8px 4px 0;
}

.d-add svg {
  width:12px;
}

.demo-bottom {
  padding:12px 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #e0e5d7;
  font-size:10px;
  color:var(--muted);
}

.demo-bottom>span:last-child {
  font-size:9px;
}

.demo-after {
  text-align:center;
  margin-top:25px;
  font-size:12px;
  color:var(--muted);
}

.demo-after a {
  color:var(--ink);
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px;
}

.lp-confetti {
  position:absolute;
  top:0;
  width:7px;
  height:11px;
  z-index:5;
  pointer-events:none;
  animation:fall 1.9s ease-in forwards;
}

@keyframes fall {
  to {
    translate:0 650px;
    rotate:500deg;
    opacity:0;
  }
}

.demo-calendar,.demo-shopping {
  min-height:353px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:35px;
  padding:15px 35px 35px;
}

.agenda-intro {
  padding:35px 15px;
}

.agenda-intro>span svg {
  width:40px;
  height:40px;
  color:var(--accent-ink);
  margin-bottom:20px;
}

.agenda-intro h4,.demo-shopping h4 {
  font-size:22px;
  letter-spacing:-.5px;
  line-height:1.2;
}

.agenda-intro p,.demo-shopping p {
  color:var(--muted);
  font-size:13px;
  margin-top:12px;
}

.agenda-events {
  display:grid;
  gap:14px;
}

.agenda-events>div {
  display:flex;
  align-items:center;
  gap:20px;
}

.agenda-events time {
  font-size:13px;
  font-weight:600;
}

.agenda-line {
  flex:1;
  padding:15px;
  border-radius:8px;
  border-left:3px solid;
}

.agenda-line strong {
  font-size:14px;
  display:block;
}

.agenda-line small {
  font-size:10px;
  display:block;
  margin-top:5px;
}

.agenda-line.pink {
  background:#f8e9e9;
  border-color:#bc6984;
}

.agenda-line.blue {
  background:#f9e2d6;
  border-color:var(--accent-ink);
}

.agenda-line.green {
  background:#eaf1db;
  border-color:#789b4b;
}

.demo-shopping>div:first-child {
  padding:30px 0;
}

.demo-shopping h4 {
  margin-top:12px;
}

.shopping-card {
  padding:22px;
  background:white;
  border:1px solid #e0e5d7;
  border-radius:10px;
}

.shopping-card h4 {
  display:flex;
  justify-content:space-between;
  font-size:17px;
  margin:0 0 14px;
}

.shopping-card h4 svg {
  width:22px;
  height:22px;
}

.shopping-item {
  display:flex;
  gap:12px;
  width:100%;
  border:0;
  border-bottom:1px solid #edf0e7;
  background:none;
  text-align:left;
  align-items:center;
  min-height:44px;
  font-size:13px;
}

.shopping-item>span {
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:5px;
  border:1px solid #b1bea4;
  font-size:12px;
}

.shopping-item[aria-pressed=true] {
  text-decoration:line-through;
  color:var(--muted);
}

.shopping-item[aria-pressed=true]>span {
  color:white;
  background:#5a7645;
}

.shopping-card form {
  display:flex;
  gap:8px;
  margin-top:14px;
}

.shopping-card input {
  min-width:0;
  width:100%;
  border:1px solid #d7dece;
  border-radius:6px;
  padding:10px;
  font-size:12px;
}

.shopping-card form button {
  min-width:44px;
  min-height:44px;
  background:var(--accent);
  border:0;
  border-radius:6px;
  color:var(--ink);
  font-size:22px;
}

/* "Warum Kinder mitmachen" – Punkte, Serie, gemeinsames Ziel.
   Derselbe Aufbau wie die Zuhause-Sektion, nur gespiegelt: Text links, Bild
   rechts. So wechselt die Seite beim Scrollen die Seite, statt zweimal
   dieselbe Anordnung zu zeigen. */
.motivation-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.motivation-copy>p:not(.eyebrow):not(.motivation-note) {
  font-size:14px;
  color:var(--muted);
  margin-top:23px;
}

.motivation-steps {
  display:grid;
  gap:22px;
  margin-top:32px;
  list-style:none;
  counter-reset:schritt;
}

.motivation-steps li {
  counter-increment:schritt;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:15px;
  align-items:start;
}

/* Die Ziffer kommt aus dem Zähler, nicht aus dem Text: Wer einen Schritt
   verschiebt, muss keine Zahlen nachziehen – und vorgelesen wird ohnehin die
   Liste und nicht die Grafik. */
.motivation-steps li::before {
  content:counter(schritt);
  grid-row:span 2;
  background:#e9eddc;
  color:#536639;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;
}

.motivation-steps strong {
  font-size:14px;
}

.motivation-steps small {
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
  line-height:1.75;
}

/* Der ehrliche Absatz am Ende. Abgesetzt, weil er dem Versprechen darüber
   bewusst etwas zurücknimmt. */
.motivation-note {
  margin-top:28px;
  padding-left:16px;
  border-left:2px solid var(--accent);
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
}

.motivation-copy .text-link {
  color:var(--accent-ink);
  margin-top:10px;
}

.motivation-art {
  position:relative;
  min-height:480px;
  border-radius:20px;
  background:#e8eedd;
  display:grid;
  place-items:center;
  padding:40px;
  overflow:hidden;
}

.mv-card {
  width:100%;
  max-width:330px;
  background:var(--white);
  border-radius:16px;
  padding:22px;
  box-shadow:0 18px 36px #3b472c14;
}

.mv-head {
  display:flex;
  align-items:center;
  gap:12px;
}

.mv-head .d-avatar {
  width:42px;
  height:42px;
}

.mv-ident {
  flex:1;
  min-width:0;
}

.mv-ident b {
  display:block;
  font-size:15px;
}

.mv-ident small {
  display:block;
  font-size:10px;
  color:var(--muted);
}

.mv-points {
  font-size:20px;
  font-weight:650;
  letter-spacing:-.5px;
  line-height:1.1;
  text-align:right;
}

.mv-points i {
  display:block;
  font-style:normal;
  font-size:9px;
  font-weight:700;
  letter-spacing:1px;
  color:#6b8a44;
}

/* Die Woche als Balkenreihe: Sieben gefüllte Felder sagen "dranbleiben"
   schneller als jede Zahl daneben. */
.mv-streak {
  display:flex;
  gap:6px;
  margin-top:20px;
}

.mv-streak>span {
  flex:1;
  text-align:center;
}

.mv-streak small {
  display:block;
  font-size:8px;
  letter-spacing:.8px;
  color:var(--muted);
  margin-bottom:5px;
}

.mv-streak i {
  display:block;
  height:22px;
  border-radius:7px;
  background:#eef1e7;
}

.mv-streak i.on {
  background:var(--lime);
}

.mv-streak .heute i {
  box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--accent);
}

.mv-streak-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  font-size:11px;
  font-weight:650;
  color:var(--accent-ink);
}

.mv-streak-note svg {
  width:14px;
  height:14px;
}

.mv-goal {
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.mv-goal>span {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font-size:12px;
  font-weight:600;
}

.mv-goal b {
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}

.mv-bar {
  height:8px;
  border-radius:99px;
  background:#eef1e7;
  margin-top:10px;
  overflow:hidden;
}

.mv-bar i {
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--accent);
}

.mv-pop {
  position:absolute;
  top:52px;
  right:34px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--white);
  box-shadow:0 12px 26px #3b472c1a;
  font-size:17px;
  font-weight:650;
  color:#5d7b3a;
  text-align:center;
}

.mv-pop small {
  display:block;
  font-size:9px;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--muted);
}

.mv-badge {
  position:absolute;
  bottom:48px;
  left:30px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border-radius:99px;
  background:var(--ink);
  color:var(--paper);
  font-size:10px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  box-shadow:0 12px 26px #3b472c1f;
}

.mv-badge svg {
  width:13px;
  height:13px;
}

.home-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.home-copy>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  margin-top:23px;
}

.home-details {
  display:grid;
  gap:20px;
  margin-top:30px;
}

.home-details>div {
  display:flex;
  gap:15px;
}

.home-details>div>span:first-child {
  background:#e9eddc;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
}

.home-details svg {
  width:16px;
  height:16px;
}

.home-details strong {
  display:block;
  font-size:13px;
}

.home-details small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}

.home-art {
  min-height:480px;
  border-radius:20px;
  background:#ede5d7;
  position:relative;
  overflow:hidden;
}

.home-window {
  position:absolute;
  width:250px;
  height:380px;
  border:12px solid #ffffff30;
  transform:rotate(30deg);
  left:-50px;
  top:-60px;
  display:flex;
}

.home-window span {
  flex:1;
  border:6px solid #ffffff25;
  background:#ffffff15;
}

.home-frame {
  position:absolute;
  top:110px;
  left:14%;
  width:72%;
  height:230px;
  border:10px solid #333a35;
  border-radius:16px;
  overflow:hidden;
  background:#b9c6b2;
  box-shadow:10px 17px 30px #43432330;
  transform:rotate(-3deg);
}

.frame-sun {
  background:#f0deb2;
  width:75px;
  height:75px;
  border-radius:50%;
  position:absolute;
  right:35px;
  top:20px;
}

.frame-hill {
  position:absolute;
  width:420px;
  height:250px;
  border-radius:50%;
}

.hill-back {
  background:#789882;
  top:100px;
  left:-200px;
  transform:rotate(25deg);
}

.hill-front {
  background:#476a59;
  top:150px;
  left:-10px;
  transform:rotate(-18deg);
}

.frame-clock {
  position:absolute;
  top:45px;
  left:22px;
  color:#fff;
  font-size:44px;
  letter-spacing:-1px;
  line-height:1.1;
}

.frame-clock small {
  display:block;
  font-size:9px;
  letter-spacing:0;
  margin-top:10px;
}

.home-shelf {
  position:absolute;
  top:373px;
  left:5%;
  width:90%;
  height:12px;
  background:#b39a7a;
  box-shadow:0 15px 20px #796a3f25;
}

.home-vase {
  position:absolute;
  right:9%;
  top:299px;
  width:47px;
  height:74px;
  border-radius:12px 12px 22px 22px;
  background:#b96247;
}

.home-vase i {
  position:absolute;
  bottom:63px;
  width:5px;
  height:67px;
  background:#6c8058;
  transform-origin:bottom;
}

.home-vase i:nth-child(1) {
  left:18px;
  transform:rotate(-22deg);
}

.home-vase i:nth-child(2) {
  left:25px;
  height:83px;
  transform:rotate(14deg);
}

.home-vase i:nth-child(3) {
  left:28px;
  transform:rotate(36deg);
}

.home-vase i::after {
  content:'';
  position:absolute;
  background:#809467;
  width:23px;
  height:43px;
  border-radius:100% 0 100% 0;
  left:-10px;
  top:-10px;
}

.home-tag {
  position:absolute;
  left:24px;
  bottom:22px;
  color:#655d50;
  font-size:11px;
  font-family:Georgia,serif;
  font-style:italic;
}

.price-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center;
  padding-top:20px;
}

.price-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:14px;
  margin-top:23px;
  max-width:360px;
}

.development-note {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:10px;
  margin-top:25px;
}

.development-note .status-dot {
  background:#86984c;
  width:6px;
  height:6px;
}

.price-card {
  background:#fff;
  border:1px solid #dce2d4;
  padding:35px;
  border-radius:18px;
  box-shadow:0 12px 30px #424c2e05;
}

.price-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:650;
  gap:12px;
}

.price-badge {
  padding:4px 8px;
  background:#edf1df;
  color:#536639;
  border-radius:20px;
  font-size:8px;
  white-space:nowrap;
}

.price-amount {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:30px;
}

.price-amount>strong {
  font-size:63px;
  letter-spacing:-3px;
  font-weight:550;
  line-height:1.1;
  white-space:nowrap;
}

.price-amount>span {
  font-size:10px;
  color:var(--muted);
}

/* Der Jahrespreis unter dem Monatspreis: vollständig lesbar, aber nicht
   gleichrangig. Die große Zahl soll niemanden aufhalten, der erst einmal
   die kostenlose Probezeit anfangen will. */
.price-alt {
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.price-description {
  font-size:12px;
  margin:15px 0 22px;
  color:var(--muted);
}

.price-card ul {
  border-top:1px solid var(--line);
  list-style:none;
  padding:23px 0;
  font-size:12px;
  display:grid;
  gap:12px;
}

.price-card li::before {
  content:'✓';
  color:#618348;
  margin-right:11px;
}

.price-card .lp-btn {
  width:100%;
}

.price-note {
  margin-top:12px;
  font-size:10px;
  text-align:center;
  color:var(--muted);
}

.faq-section {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:80px;
  border-top:1px solid var(--line);
  position:relative;
  padding-top:75px;
}

.faq-section>div>p:last-child {
  margin-top:22px;
  color:var(--muted);
  font-size:14px;
}

.faq-list details {
  border-bottom:1px solid #d8dfd0;
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
  padding:21px 0;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  gap:20px;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary>span {
  font-size:22px;
  font-weight:400;
  transition:transform .2s;
}

.faq-list details[open] summary>span {
  transform:rotate(45deg);
}

.faq-list details p {
  color:var(--muted);
  font-size:13px;
  padding:0 25px 24px 0;
  line-height:1.8;
}

.anchor-alias {
  position:absolute;
  top:0;
}

.lp-final {
  background:var(--accent);
  color:var(--ink);
  text-align:center;
  padding:76px 30px 80px;
  position:relative;
  overflow:hidden;
}

.lp-final .eyebrow {
  justify-content:center;
  color:#634235;
}

.lp-final h2 {
  position:relative;
  z-index:1;
  font-size:clamp(35px,4vw,56px);
}

.lp-final em {
  color:var(--accent-ink);
}

.lp-final .lp-btn {
  margin-top:30px;
}

.lp-final>p:last-child {
  color:#634235;
  font-size:11px;
  margin-top:17px;
}

.final-flower {
  position:absolute;
  top:10px;
  right:5%;
  color:#dfa184;
  font-size:270px;
  line-height:1;
  transform:rotate(15deg);
  pointer-events:none;
}

.lp-footer {
  max-width:1304px;
  margin:auto;
  padding:48px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:25px;
}

.lp-footer>.lp-brand {
  font-size:20px;
}

.lp-footer>.lp-brand .brand-mark {
  width:32px;
  height:32px;
  font-size:28px;
  border-radius:9px;
}

.lp-footer>p {
  font-size:10px;
  color:var(--muted);
}

.lp-footer nav {
  display:flex;
  gap:25px;
  margin-left:auto;
  font-size:11px;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  width:100%;
  border-top:1px solid var(--line);
  padding-top:22px;
  color:var(--muted);
  font-size:9px;
  margin-top:6px;
}

.revealed {
  animation:reveal .6s ease both;
}

@keyframes reveal {
  from {
    opacity:.25;
    transform:translateY(16px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  .lp-hero {
    padding-top:100px;
    padding-bottom:125px;
  }
  .hero-device {
    padding:25px 20px 20px;
  }
  .peek-task {
    min-height:50px;
    font-size:10px;
  }
  .hero-lead {
    font-size:17px;
  }
}

@media(max-width:1100px) {
  .lp-nav {
    padding-inline:28px;
    gap:22px;
  }
  .lp-nav-links {
    gap:20px;
  }
  .lp-hero {
    padding:55px 28px 85px;
    gap:26px;
  }
  h1 {
    letter-spacing:-2.5px;
  }
  .hero-actions {
    gap:15px;
  }
  .hero-actions .lp-btn {
    padding-inline:16px;
    gap:16px;
  }
  .hero-lead {
    font-size:14px;
  }
  .hero-family {
    margin-top:24px;
  }
  .preview-top b {
    font-size:10px;
  }
  .preview-top>strong {
    font-size:22px;
  }
  .hero-device {
    padding:18px 10px 10px;
    border-width:7px;
  }
  .peek-col {
    padding:9px 6px;
  }
  .peek-task {
    padding:8px 5px;
    font-size:8px;
  }
  .peek-person {
    gap:4px;
  }
  .peek-person .d-avatar {
    width:23px;
    height:23px;
  }
  .peek-person b {
    font-size:10px;
  }
  .benefit-strip {
    margin-inline:28px;
    gap:35px;
  }
  .lp-section {
    padding:75px 28px;
  }
  .feature {
    padding:25px;
  }
  .feature h3 {
    font-size:25px;
  }
  .feature-calendar {
    gap:10px;
  }
  .calendar-art {
    min-width:210px;
  }
  .feature-rewards {
    padding-right:175px;
  }
  .reward-art {
    width:150px;
  }
  .feature-lists {
    padding-right:185px;
  }
  .list-art {
    width:175px;
  }
  .home-section {
    gap:40px;
  }
  .price-section {
    gap:55px;
    padding-top:10px;
  }
  .home-art {
    min-height:460px;
  }
  .price-card {
    padding:28px;
  }
  .faq-section {
    gap:45px;
  }
  .lp-footer {
    padding:35px 28px;
  }
}

@media(max-width:800px) {
  .lp-nav {
    height:80px;
    gap:15px;
  }
  .lp-brand {
    font-size:20px;
  }
  .lp-nav-links {
    display:none;
    position:absolute;
    top:73px;
    left:20px;
    right:20px;
    margin:0;
    padding:18px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:0 15px 30px #20272215;
  }
  .lp-nav-links.is-open {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 20px;
  }
  .lp-nav-links a {
    padding:10px;
  }
  .nav-cta {
    margin-left:auto;
  }
  .menu-toggle {
    display:block;
    flex:none;
  }
  .lp-hero {
    grid-template-columns:1fr;
    padding:35px 28px 70px;
    gap:45px;
  }
  .hero-copy {
    max-width:600px;
  }
  h1 {
    font-size:62px;
    letter-spacing:-3px;
  }
  .hero-lead {
    max-width:470px;
    font-size:16px;
  }
  .hero-family {
    display:none;
  }
  .hero-visual {
    width:100%;
    max-width:620px;
    justify-self:center;
    margin-top:5px;
    padding:60px 10px 65px;
  }
  .hero-device {
    padding:25px 18px 16px;
  }
  .preview-top b {
    font-size:13px;
  }
  .preview-top small {
    font-size:10px;
  }
  .preview-top>strong {
    font-size:30px;
  }
  .peek-person .d-avatar {
    height:33px;
    width:33px;
  }
  .peek-person b {
    font-size:13px;
  }
  .peek-task {
    font-size:10px;
    min-height:46px;
    padding:10px 7px;
  }
  .preview-nav {
    font-size:10px;
  }
  .preview-family-event {
    font-size:10px;
  }
  .benefit-strip {
    gap:18px;
    flex-wrap:wrap;
    padding:22px 0;
  }
  .benefit-strip>span {
    font-size:10px;
  }
  .section-heading {
    margin-bottom:35px;
  }
  .feature-calendar {
    grid-column:span 6;
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
  .feature-tasks,.feature-rewards {
    grid-column:span 3;
  }
  .feature-rewards {
    padding-right:25px;
    padding-top:180px;
  }
  .reward-art {
    top:12px;
    right:30px;
    width:170px;
  }
  .feature-lists {
    grid-column:span 6;
    padding-right:260px;
    min-height:230px;
  }
  .list-art {
    width:220px;
    bottom:10px;
    right:10px;
  }
  .demo-heading {
    gap:25px;
  }
  .demo-heading>p {
    width:260px;
    font-size:12px;
  }
  .demo-tabs button {
    padding-inline:10px;
  }
  .demo-label {
    display:none;
  }
  .lp-reset {
    margin-left:auto;
  }
  .demo-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .motivation-section {
    grid-template-columns:1fr;
    gap:40px;
  }
  .motivation-art {
    min-height:400px;
    padding:30px;
  }
  .mv-pop {
    top:30px;
    right:24px;
  }
  .mv-badge {
    bottom:28px;
    left:22px;
  }
  .home-section {
    grid-template-columns:1fr;
    gap:35px;
  }
  .home-art {
    max-width:600px;
    width:100%;
    justify-self:center;
    min-height:450px;
  }
  .home-frame {
    height:235px;
    top:85px;
  }
  .home-shelf {
    top:350px;
  }
  .home-vase {
    top:276px;
  }
  .home-copy {
    max-width:540px;
  }
  .price-section {
    gap:30px;
  }
  .price-amount>strong {
    font-size:48px;
  }
  .price-card-top {
    flex-wrap:wrap;
    gap:8px;
  }
  .price-card {
    padding:22px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:25px;
  }
  .lp-footer>p {
    display:none;
  }
  .lp-footer nav {
    gap:18px;
  }
}

@media(max-width:520px) {
  .lp-nav {
    padding-inline:20px;
    gap:9px;
  }
  .lp-brand {
    font-size:18px;
    letter-spacing:-.7px;
  }
  .brand-mark {
    width:32px;
    height:32px;
    border-radius:9px;
    font-size:29px;
    margin-right:7px;
  }
  .brand-mark span {
    font-size:21px;
  }
  .nav-cta {
    min-height:44px;
    padding:8px 10px;
    font-size:10px;
    gap:8px;
  }
  .nav-cta span {
    font-size:16px;
  }
  .menu-toggle {
    width:34px;
  }
  .lp-hero {
    padding:24px 22px 62px;
    gap:32px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.25px;
    margin-bottom:21px;
  }
  h1 {
    font-size:clamp(40px,10.9vw,57px);
    letter-spacing:-2.2px;
  }
  .hero-lead {
    font-size:14px;
    line-height:1.8;
    margin-top:23px;
  }
  .hero-actions {
    gap:18px;
    flex-wrap:wrap;
    margin-top:24px;
  }
  .hero-actions .lp-btn {
    font-size:12px;
    min-height:50px;
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:10px;
  }
  .hero-note {
    font-size:10px;
  }
  .hero-visual {
    padding:48px 0 67px;
  }
  .floating-note {
    padding:10px 11px;
    top:9px;
    left:0;
  }
  .floating-note strong {
    font-size:9px;
  }
  .floating-note small {
    font-size:7px;
  }
  .note-check {
    width:25px;
    height:25px;
    font-size:12px;
  }
  .visual-spark {
    font-size:62px;
    right:-5px;
  }
  .hero-device {
    border-width:5px;
    border-radius:17px;
    padding:16px 8px 10px;
  }
  .preview-top b {
    font-size:8px;
  }
  .preview-top small {
    font-size:7px;
  }
  .preview-top>strong {
    font-size:22px;
  }
  .preview-nav {
    font-size:7px;
    margin:13px 0 10px;
    gap:2px;
  }
  .preview-nav>span {
    padding:4px 7px;
  }
  .preview-nav i {
    font-size:6px;
  }
  .hero-board {
    gap:5px;
  }
  .peek-col {
    padding:9px 5px;
  }
  .peek-person {
    gap:4px;
  }
  .peek-person .d-avatar {
    width:23px;
    height:23px;
  }
  .peek-person b {
    font-size:9px;
  }
  .peek-person small {
    font-size:6px;
  }
  .peek-progress {
    margin:9px 0;
  }
  .peek-task {
    font-size:7px;
    gap:4px;
    padding:6px 4px;
    min-height:36px;
  }
  .peek-task>span {
    width:10px;
    height:10px;
  }
  .peek-points {
    font-size:7px;
  }
  .preview-family-event {
    font-size:7px;
    padding:8px 5px;
    gap:5px;
  }
  .preview-family-event svg {
    width:11px;
  }
  .event-pill {
    font-size:6px;
  }
  .floating-sticker {
    font-size:10px;
    bottom:18px;
    right:5px;
    padding:12px 16px;
  }
  .visual-caption {
    font-size:10px;
    bottom:-8px;
    left:3px;
  }
  .benefit-strip {
    margin-inline:22px;
    justify-content:flex-start;
    gap:14px;
    padding:21px 0;
  }
  .benefit-strip>span {
    font-size:10px;
  }
  .lp-section {
    padding:58px 22px;
  }
  h2 {
    font-size:36px;
    letter-spacing:-1.5px;
  }
  .section-heading {
    text-align:left;
  }
  .section-heading .eyebrow {
    justify-content:flex-start;
  }
  .section-heading p:last-child {
    font-size:13px;
  }
  .feature-grid {
    gap:14px;
  }
  .feature {
    grid-column:span 6;
    padding:26px;
  }
  .feature-calendar {
    grid-template-columns:1fr;
    gap:25px;
  }
  .calendar-art {
    margin:0 8px 8px 12px;
    transform:rotate(3deg);
  }
  .feature h3 {
    font-size:29px;
  }
  .feature p {
    font-size:13px;
  }
  .feature-rewards {
    padding-top:26px;
    padding-bottom:175px;
    min-height:380px;
  }
  .reward-art {
    top:auto;
    bottom:15px;
    right:35px;
    width:175px;
  }
  .reward-star {
    font-size:95px;
  }
  .feature-lists {
    padding-bottom:213px;
  }
  .list-art {
    width:225px;
    right:25px;
    bottom:-10px;
  }
  .demo-heading {
    display:block;
  }
  .demo-heading>p {
    width:auto;
    margin-top:20px;
    font-size:13px;
  }
  .demo-section .lp-section {
    padding-inline:16px;
  }
  .demo-heading {
    padding-inline:6px;
  }
  .demo-toolbar {
    padding:12px 14px;
    gap:8px;
  }
  .demo-brand {
    font-size:10px;
    gap:7px;
  }
  .lp-reset {
    font-size:9px;
    padding:6px 8px;
  }
  .lp-reset span {
    margin-left:4px;
  }
  .demo-view-header {
    padding:20px 14px;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .demo-tabs {
    width:100%;
  }
  .demo-tabs button {
    flex:1;
    font-size:11px;
  }
  .demo-view-header h3 {
    font-size:22px;
  }
  .lp-demo {
    padding:0 14px 20px;
    scroll-snap-type:x mandatory;
  }
  .d-board {
    grid-template-columns:repeat(3,260px);
    gap:12px;
  }
  .d-col {
    scroll-snap-align:center;
  }
  .d-task-title {
    font-size:12px;
  }
  .d-task {
    min-height:68px;
  }
  .demo-bottom {
    padding:12px 14px;
    font-size:10px;
  }
  .demo-bottom>span:last-child {
    font-size:8px;
  }
  .demo-after {
    font-size:11px;
  }
  .demo-calendar,.demo-shopping {
    grid-template-columns:1fr;
    gap:20px;
    padding:0 14px 22px;
  }
  .agenda-intro {
    padding:0;
  }
  .agenda-intro>span {
    display:none;
  }
  .agenda-intro h4,.demo-shopping h4 {
    font-size:20px;
  }
  .agenda-intro p {
    font-size:11px;
  }
  .agenda-events>div {
    gap:12px;
  }
  .agenda-events time {
    font-size:11px;
  }
  .agenda-line {
    padding:13px 10px;
  }
  .agenda-line strong {
    font-size:12px;
  }
  .agenda-line small {
    font-size:9px;
  }
  .demo-shopping>div:first-child {
    padding:0;
  }
  .demo-shopping>div:first-child p {
    font-size:12px;
  }
  .home-art {
    min-height:375px;
  }
  .home-frame {
    top:67px;
    left:10%;
    width:80%;
    height:195px;
    border-width:8px;
  }
  .home-shelf {
    top:296px;
  }
  .home-vase {
    top:222px;
    right:5%;
    transform:scale(.8);
    transform-origin:bottom;
  }
  .frame-clock {
    font-size:35px;
    left:17px;
    top:37px;
  }
  .home-window {
    height:280px;
  }
  .motivation-art {
    min-height:340px;
    padding:22px;
  }
  .motivation-steps small {
    font-size:11px;
  }
  .mv-card {
    padding:18px;
  }
  .mv-pop {
    font-size:15px;
    padding:8px 11px;
  }
  .price-section {
    grid-template-columns:1fr;
    padding-top:15px;
    gap:30px;
  }
  .price-copy>p:not(.eyebrow) {
    font-size:13px;
  }
  .price-card {
    padding:26px;
  }
  .price-card-top {
    flex-wrap:nowrap;
  }
  .price-amount>strong {
    font-size:60px;
  }
  .price-card li {
    font-size:11px;
  }
  .faq-section {
    padding-top:50px;
  }
  .faq-list summary {
    font-size:12px;
  }
  .faq-list details p {
    font-size:12px;
  }
  .lp-final {
    padding:60px 22px;
  }
  .lp-final h2 {
    font-size:36px;
  }
  .final-flower {
    font-size:210px;
    right:-80px;
    top:10px;
  }
  .lp-final .eyebrow {
    font-size:8px;
  }
  .lp-final .lp-btn {
    font-size:12px;
    gap:15px;
  }
  .lp-final>p:last-child {
    font-size:10px;
  }
  .lp-footer {
    padding:35px 22px;
    gap:23px;
  }
  .lp-footer nav {
    margin-left:0;
    width:100%;
    justify-content:space-between;
    font-size:10px;
  }
  .footer-bottom {
    font-size:8px;
    gap:15px;
    align-items:flex-start;
  }
  .footer-bottom>span {
    text-align:right;
  }
}

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


.demo-swipe-hint {
  display: none;
}
@media (max-width: 520px) {
  .shopping-card input {
    font-size: 16px;
  }
  .lp-reset {
    min-height: 44px;
  }
  .demo-swipe-hint {
    display: block;
    margin: -5px 14px 16px;
    color: var(--muted);
    font-size: 10px;
  }
}

/* Imagegen-Flurfoto mit bedienbarer HTML-Demo im fotografierten Display. */
.tablet-stage {
  --screen-left: 20.5078125%;
  --screen-top: 13.28125%;
  --screen-width: 59.7005208%;
  --screen-height: 53.22265625%;
  position: relative;
}
.tablet-photo {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}
.tablet-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.tablet-screen,
.tablet-photo-preview {
  position: absolute;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  background: #f9faf6;
  border-radius: 2px;
}
.tablet-photo-preview {
  display: none;
}
.tablet-screen .lp-demo-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform-origin: top left;
  overflow: auto;
}
@media (min-width: 901px) {
  .tablet-screen .demo-toolbar {
    padding: 8px 18px;
    min-height: 48px;
  }
  .tablet-screen .demo-label {
    font-size: 9px;
  }
  .tablet-screen .lp-reset {
    min-height: 44px;
    font-size: 12px;
  }
  .tablet-screen .demo-view-header {
    padding: 8px 18px;
    min-height: 70px;
  }
  .tablet-screen .demo-tabs button {
    min-height: 48px;
    font-size: 13px;
  }
  .tablet-screen .lp-demo {
    padding: 0 18px 14px;
  }
  .tablet-screen .d-board {
    gap: 12px;
  }
  .tablet-screen .d-head {
    padding: 10px 12px;
  }
  .tablet-screen .d-add {
    display: none;
  }
  .tablet-screen .d-task {
    min-height: 62px;
    padding: 9px;
  }
  .tablet-screen .d-task-title {
    font-size: 13px;
  }
  .tablet-screen .d-task-meta,
  .tablet-screen .d-stats,
  .tablet-screen .d-event i {
    font-size: 10px;
  }
  .tablet-screen .d-event b {
    font-size: 13px;
  }
  .tablet-screen .demo-bottom {
    padding: 10px 18px;
  }
  .tablet-screen .demo-calendar,
  .tablet-screen .demo-shopping {
    min-height: 340px;
    padding: 10px 24px 24px;
  }
  .tablet-screen .shopping-item {
    min-height: 52px;
    font-size: 15px;
  }
}
@media (max-width: 900px) {
  .tablet-screen {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background: transparent;
    margin-top: 22px;
  }
  .tablet-screen .lp-demo-frame {
    border: 1px solid #d6dccc;
    border-radius: 18px;
    overflow: hidden;
  }
  .tablet-photo-preview {
    display: block;
    padding: 3%;
    container-type: inline-size;
  }
  .photo-preview-heading {
    display: flex;
    justify-content: space-between;
    font-size: 3.1cqw;
    font-weight: 700;
    margin-bottom: 5%;
  }
  .photo-preview-heading span {
    font-size: 5cqw;
  }
  .tablet-photo-preview .hero-board {
    height: 79%;
    gap: 2cqw;
  }
  .tablet-photo-preview .peek-col {
    padding: 2cqw 1.5cqw;
    border-radius: 2cqw;
  }
  .tablet-photo-preview .peek-person {
    gap: 1cqw;
  }
  .tablet-photo-preview .d-avatar {
    width: 7cqw;
    height: 7cqw;
  }
  .tablet-photo-preview .peek-person b {
    font-size: 3cqw;
  }
  .tablet-photo-preview .peek-person small {
    font-size: 2cqw;
  }
  .tablet-photo-preview .peek-progress {
    height: 1cqw;
    margin: 2cqw 0;
  }
  .tablet-photo-preview .peek-task {
    min-height: 9cqw;
    padding: 1.3cqw 1cqw;
    font-size: 2.2cqw;
    margin-bottom: 1.5cqw;
    gap: 1cqw;
    border-radius: 1.5cqw;
  }
  .tablet-photo-preview .peek-task > span {
    width: 3cqw;
    height: 3cqw;
    font-size: 2cqw;
    border-radius: 1cqw;
  }
  .tablet-photo-preview .peek-points {
    display: none;
  }
}
.tablet-stage.photo-unavailable .tablet-photo {
  display: none;
}
.tablet-stage.photo-unavailable .tablet-screen {
  position: static;
  width: auto;
  height: auto;
}
.tablet-stage.photo-unavailable .lp-demo-frame {
  border-radius: 18px;
}

/* Echte Board-Oberfläche statt einer separat nachgebauten Demo.

   Das Gerät hier und das fotografierte Tablet im Demoabschnitt sind dasselbe
   Gerät – also müssen sie auch dieselben Maße haben. Das Display im Foto misst
   917 × 545 px (docs/assets/tablet-im-flur.md), und genau dieses Verhältnis
   bekommt auch die gezeichnete Hülle. Die Blende läuft ringsum gleich breit und
   ist dunkel wie beim Foto; vorher saß oben ein 20 px hoher weißer Streifen und
   an den übrigen Seiten nur die 8 px Rahmen, was das Tablet oberlastig und
   sichtbar anders proportioniert wirken ließ als das im Foto. */
.hero-device { padding: 10px; background: #282e2b; overflow: hidden; }
.hero-real-preview { position: relative; aspect-ratio: 917 / 545; overflow: hidden; background: #f5f4ee; border-radius: 7px; }
.static-board-frame, #boardDemo { display: block; border: 0; max-width: none; transform-origin: top left; background: #f5f4ee; }
.static-board-frame { pointer-events: none; }
.hero-real-preview .static-board-frame { position: absolute; inset: 0; }
.real-demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 0 3px; color: var(--muted); font-size: 12px; }
.real-demo-toolbar > div { display: flex; align-items: center; gap: 20px; }
.real-demo-toolbar a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 4px; }
.real-demo-toolbar .lp-reset { min-height: 44px; font-size: 12px; }
.real-demo-toolbar .lp-reset:disabled { opacity: .5; cursor: wait; }
.tablet-photo-preview .static-board-frame { position: absolute; inset: 0; }
.tablet-stage.photo-unavailable .tablet-screen { position: static; width: 100%; height: 720px; margin-top: 0; border: 1px solid #d6dccc; border-radius: 18px; }
@media (max-width: 900px) {
  .tablet-screen { height: 720px; overflow: hidden; border: 1px solid #d6dccc; border-radius: 18px; }
  .tablet-photo-preview { display: block; }
}
@media (max-width: 520px) {
  .real-demo-toolbar { align-items: flex-start; flex-direction: column; gap: 4px; font-size: 10px; }
  .real-demo-toolbar > div { justify-content: space-between; width: 100%; }
  .hero-device { padding: 7px; }
  .device-camera { top: 2px; } /* (7 − 4) / 2, gerundet */
}

/* Bestätigung nach einer Kontolöschung. Ruhig, nicht gratulierend: Jemand hat
   gerade seine Familienhistorie hergegeben. */
.geloescht-hinweis {
  padding: 14px 24px;
  background: #e6ede0;
  color: #33472f;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}