.page-features #planung {
  display:block;
}

.planning-feature-intro { margin-bottom:56px; }
.planning-feature-intro>.eyebrow { margin-bottom:22px; }
.planning-feature-heading { display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center; }
.planning-feature-heading h2 { max-width:560px; }
.planning-feature-heading p { font-size:18px;line-height:1.65; }
.planning-feature-demo { display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center; }
.planning-feature-copy { max-width:380px; }
.planning-feature-subheading { display:flex;align-items:flex-start;gap:15px; }
.planning-feature-subheading h3 { font-size:28px;line-height:1.2; }
.planning-feature-copy>p { margin-top:22px;font-size:18px;line-height:1.65; }

.planning-feature-demo+.planning-feature-demo { margin-top:84px;scroll-margin-top:135px; }
.planning-feature-demo--reverse { grid-template-columns:1.2fr .8fr; }
.planning-feature-demo--reverse>.planning-feature-copy { justify-self:end; }

.adjustment-animation {
  --adjustment-cycle:18s;
  container-type:inline-size;
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  color:var(--brand);
}
.adjustment-stage { position:relative;aspect-ratio:1.4; }
.adjustment-animation * { animation-duration:var(--adjustment-cycle);animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite; }
.adjustment-detail-scene,.adjustment-week-scene { position:absolute;inset:0; }
.adjustment-detail-scene { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%;animation-name:adjustment-detail-scene; }
.adjustment-detail-day { position:relative;border:1px solid #d4e2ed;border-radius:8px;background:#f5f9fc;overflow:hidden; }
.adjustment-detail-day>span:first-child { display:block;padding:8% 9%;font-size:clamp(10px,2.3cqw,13px);font-weight:700;background:#e8f2f9; }
.adjustment-load { display:block;position:absolute;top:9%;right:9%;width:26%;height:5px;border-radius:4px;background:#e0eaf2;overflow:hidden; }
.adjustment-load>i { display:block;height:100%;border-radius:inherit;background:#bccfdd; }
.adjustment-week-scene { display:grid;grid-template-rows:46% 46%;gap:8%;opacity:0;animation-name:adjustment-week-scene; }
.adjustment-week-group { position:relative;border:1px solid #d4e2ed;border-radius:8px;background:#fff;overflow:hidden; }
.adjustment-week-heading { display:flex;align-items:center;justify-content:space-between;height:18%;padding-inline:3%;background:#e8f2f9;border-bottom:1px solid #d8e5ee; }
.adjustment-week-heading>span { font-size:clamp(9px,2cqw,12px);font-weight:700; }
.adjustment-week-days { position:absolute;top:24%;bottom:6%;left:2%;right:2%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2%; }
.adjustment-week-day { position:relative;border:1px solid #d9e5ee;border-radius:5px;background:#f8fbfd;overflow:hidden; }
.adjustment-week-day>span:first-child,.planning-week-days>div>span:first-child { display:block;padding:5px 9%;font-size:clamp(8px,1.8cqw,10px);font-weight:700;background:#eef5fa; }
.adjustment-week-day>.adjustment-load,.planning-week-load { top:9px;right:9%;width:28%;height:3px;border-radius:4px; }
.planning-week-load { display:block;position:absolute;background:#bccfdd; }
.adjustment-week-day>i { position:absolute;bottom:3%;left:10%;right:10%;height:2px;border-radius:4px;background:#dce6ee; }
.adjustment-block { position:absolute;z-index:1;border:1px solid color-mix(in srgb,var(--task-color) 55%,#d3e1ed);border-top:4px solid var(--task-color);border-radius:5px;background:color-mix(in srgb,var(--task-color) 12%,white);overflow:hidden;box-shadow:0 2px 4px #08234c06; }
.adjustment-block-title,.adjustment-block-meta,.adjustment-block-chip { display:block;position:absolute;border-radius:4px; }
.adjustment-block-title { left:9%;top:22%;width:48%;height:4px;background:color-mix(in srgb,var(--brand) 50%,white);animation-name:adjustment-title; }
.adjustment-block-meta { left:9%;top:46%;width:36%;height:3px;background:#c6d6e3;animation-name:adjustment-meta; }
.adjustment-block-chip { right:8%;bottom:17%;width:18%;height:5px;background:var(--task-color);animation-name:adjustment-chip; }
.adjustment-block-progress { position:absolute;left:9%;right:33%;bottom:17%;height:3px;border-radius:3px;background:#e0eaf2;animation-name:adjustment-meta; }
.adjustment-block-progress>i { display:block;width:65%;height:100%;border-radius:inherit;background:var(--accent); }

.month-plan-animation {
  --month-plan-cycle:20s;
  container-type:inline-size;
  position:relative;
  width:100%;
  min-width:0;
  margin:0;
  color:var(--brand);
}
.month-plan-board { border:1px solid #d4e2ed;border-radius:10px;overflow:hidden;background:#fff; }
.month-plan-heading,.month-plan-row { display:grid;grid-template-columns:27% 73%; }
.month-plan-heading { min-height:46px;background:#e8f2f9;border-bottom:1px solid #d4e2ed;font-size:clamp(9px,2cqw,12px);font-weight:700; }
.month-plan-heading>span { display:flex;align-items:center;padding-inline:12%; }
.month-plan-heading>div { display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); }
.month-plan-heading>div>span { display:flex;align-items:center;justify-content:center;border-left:1px solid #d4e2ed; }
.month-plan-row { height:clamp(88px,20cqw,116px); }
.month-plan-row+.month-plan-row { border-top:1px solid #dce6ee; }
.month-plan-task { position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(9px,2.8cqw,14px);padding:9%;border-right:1px solid #d4e2ed;min-width:0;background:#fff; }
.month-plan-task::before { content:"";position:absolute;left:7%;top:30%;bottom:30%;width:3px;border-radius:3px;background:var(--month-task-color); }
.month-plan-task>i { display:block;width:58%;height:clamp(3px,.8cqw,5px);margin-left:9%;border-radius:4px;background:#8795a9; }
.month-plan-task>i+i { width:36%;height:clamp(2px,.6cqw,3px);background:#e0eaf2; }
.month-plan-track { position:relative;min-width:0; }
.month-plan-lanes { position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); }
.month-plan-lanes>span { position:relative;border-right:1px solid #dce7ef; }
.month-plan-lanes>span:nth-child(even) { background:#edf4f9; }
.month-plan-bar {
  position:absolute;
  left:var(--month-x);
  bottom:0;
  width:7%;
  height:var(--month-h);
  transform:translateX(-50%);
  border:1px solid color-mix(in srgb,var(--month-task-color) 55%,#d3e1ed);
  border-top:3px solid var(--month-task-color);
  border-radius:4px 4px 0 0;
  background:color-mix(in srgb,var(--month-task-color) 78%,white);
  animation-duration:var(--month-plan-cycle);
  animation-timing-function:cubic-bezier(.65,0,.35,1);
  animation-iteration-count:infinite;
}
.month-plan-bar-mark { position:absolute;top:12%;left:25%;width:50%;height:3px;border-radius:4px;background:#8795a9; }
.month-plan-bar--grow { animation-name:month-plan-grow; }
.month-plan-bar--reduce { animation-name:month-plan-reduce; }
.month-plan-bar--reserve { opacity:0;overflow:hidden;animation-name:month-plan-reserve; }
.month-plan-bar--move { animation-name:month-plan-move; }
.month-plan-bar--balance { animation-name:month-plan-balance; }

/* Five adjustments followed by five separate return movements.
   Return: reduce March, move back, clear April, restore March, move back.
   Every action finishes before the next starts; the loop seam is stationary. */
@keyframes month-plan-grow {
  0%,8%,66%,100% { height:var(--month-h); }
  12%,62% { height:var(--month-next-h); }
  0%,8%,12%,62%,66%,100% { box-shadow:0 0 0 0 transparent; }
  9%,11%,63%,65% { box-shadow:0 0 0 2px var(--accent-light); }
}
@keyframes month-plan-reduce {
  0%,20%,90%,100% { height:var(--month-h); }
  24%,86% { height:var(--month-next-h); }
  0%,20%,24%,86%,90%,100% { box-shadow:0 0 0 0 transparent; }
  21%,23%,87%,89% { box-shadow:0 0 0 2px var(--accent-light); }
}
@keyframes month-plan-reserve {
  0%,30%,82%,100% { height:var(--month-h); }
  34%,78% { height:var(--month-next-h); }
  0%,30%,82%,100% { opacity:0; }
  31%,81% { opacity:1; }
  0%,30%,34%,78%,82%,100% { box-shadow:0 0 0 0 transparent; }
  31%,33%,79%,81% { box-shadow:0 0 0 2px var(--accent-light); }
}
@keyframes month-plan-move {
  0%,40%,74%,100% { left:var(--month-x); }
  44%,70% { left:var(--month-next-x); }
  0%,40%,44%,70%,74%,100% { box-shadow:0 0 0 0 transparent; }
  41%,43%,71%,73% { box-shadow:0 0 0 2px var(--accent-light); }
}
@keyframes month-plan-balance {
  0%,50%,98%,100% { left:var(--month-x); }
  54%,94% { left:var(--month-next-x); }
  0%,50%,54%,94%,98%,100% { box-shadow:0 0 0 0 transparent; }
  51%,53%,95%,97% { box-shadow:0 0 0 2px var(--accent-light); }
}

.planning-animation {
  /* Each view settles for 2.4 seconds, then morphs for 0.6 seconds. */
  --planning-cycle:9s;
  --planning-easing:cubic-bezier(.65,0,.35,1);
  container-type:inline-size;
  position:relative;
  margin:0;
  min-width:0;
  width:100%;
  color:var(--brand);
  background:transparent;
}

.planning-animation-icon { display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#ffffffb3;color:var(--accent);flex-shrink:0;margin-top:2px; }
.planning-animation-icon .icon { width:20px;height:20px; }
.planning-animation-body { padding:0; }
.planning-stage { position:relative;aspect-ratio:1.5; }

.planning-detail-scene,.planning-week-scene,.planning-list-scene,.planning-week-extra-scene { position:absolute;inset:0; }
.planning-detail-scene { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%;animation:planning-detail-scene var(--planning-cycle) linear infinite; }
.planning-detail-day { position:relative;border:1px solid #d4e2ed;border-radius:8px;background:#f5f9fc;overflow:hidden; }
.planning-detail-day>span { display:block;padding:8% 9%;font-size:clamp(10px,2.3cqw,13px);font-weight:700;background:#e8f2f9; }
.planning-detail-day>i { position:absolute;top:9%;right:9%;height:4px;width:24%;border-radius:4px;background:#bccfdd; }

.planning-week-scene { display:grid;grid-template-rows:46% 46%;gap:8%;opacity:0;animation:planning-week-scene var(--planning-cycle) linear infinite; }
/* All extra plans leave with the week; their individual delays only stagger entry. */
.planning-week-extra-scene { opacity:0;animation:planning-week-scene var(--planning-cycle) linear infinite; }
.planning-week-group { position:relative;border:1px solid #d4e2ed;border-radius:8px;background:#fff;overflow:hidden; }
.planning-week-heading { display:flex;align-items:center;justify-content:space-between;height:18%;padding-inline:3%;background:#e8f2f9;border-bottom:1px solid #d8e5ee; }
.planning-week-heading>span { font-size:clamp(9px,2cqw,12px);font-weight:700; }
.planning-week-days { position:absolute;top:24%;bottom:6%;left:2%;right:2%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2%; }
.planning-week-days>div { position:relative;border:1px solid #d9e5ee;border-radius:5px;background:#f8fbfd;overflow:hidden; }
.planning-week-days>div>i { position:absolute;bottom:3%;left:10%;right:10%;height:2px;border-radius:4px;background:#dce6ee; }

.planning-list-scene { opacity:0;animation:planning-list-scene var(--planning-cycle) linear infinite; }
.planning-list-scene>div { position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:6%;border-bottom:1px solid #e2eaf1; }
.planning-list-scene>div:nth-child(2) { top:33.333%; }
.planning-list-scene>div:nth-child(3) { top:66.666%; }
.planning-list-scene span { font-size:clamp(10px,2.3cqw,13px);font-weight:700; }
.planning-list-scene i { width:12%;height:4px;border-radius:4px;background:#cbdce8; }

.planning-shape {
  position:absolute;
  left:var(--detail-x);
  top:var(--detail-y);
  width:29.2%;
  height:var(--detail-h);
  background:color-mix(in srgb,var(--task-color) 12%,white);
  border:1px solid color-mix(in srgb,var(--task-color) 55%,#d3e1ed);
  border-top:4px solid var(--task-color);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 2px 4px #08234c06;
  animation:planning-shape-morph var(--planning-cycle) var(--planning-easing) infinite;
}

.planning-shape-title,.planning-shape-meta,.planning-shape-chip { position:absolute;display:block;border-radius:4px; }
.planning-shape-title { left:9%;top:24%;width:var(--line-length);height:5px;background:color-mix(in srgb,var(--brand) 50%,white);animation:planning-shape-title var(--planning-cycle) var(--planning-easing) infinite; }
.planning-shape-meta { left:9%;top:48%;width:var(--meta-length);height:4px;background:#c6d6e3;animation:planning-shape-meta var(--planning-cycle) var(--planning-easing) infinite; }
.planning-shape-chip { right:8%;bottom:17%;width:18%;height:6px;background:var(--task-color);animation:planning-shape-chip var(--planning-cycle) var(--planning-easing) infinite; }
.planning-shape-progress { position:absolute;left:9%;right:33%;bottom:17%;height:4px;border-radius:4px;background:#e0eaf2;animation:planning-shape-progress var(--planning-cycle) linear infinite; }
.planning-shape-progress i { display:block;width:var(--progress);height:100%;background:var(--accent);border-radius:inherit; }

.planning-shape-extra {
  left:var(--week-x);
  top:var(--week-y);
  width:15.6%;
  height:5.2%;
  border-top-width:1px;
  border-left-width:3px;
  border-radius:4px;
  opacity:0;
  transform:scale(.15);
  animation-name:planning-week-extra;
  animation-delay:var(--reveal-delay);
}
.planning-shape-extra>span { animation:none; }
.planning-shape-extra .planning-shape-title { left:9%;top:42%;width:calc(var(--line-length) * .8);height:3px; }
.planning-shape-extra .planning-shape-meta,.planning-shape-extra .planning-shape-progress { opacity:0; }
.planning-shape-extra .planning-shape-chip { right:9%;bottom:34%;width:23%;height:6px; }

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

@keyframes planning-shape-morph {
  0%,26.666%,100% { left:var(--detail-x);top:var(--detail-y);width:29.2%;height:var(--detail-h);border-top-width:4px;border-left-width:1px;border-radius:6px; }
  33.333%,60% { left:0;top:var(--list-y);width:100%;height:5.4%;border-top-width:1px;border-left-width:4px;border-radius:5px; }
  66.666%,93.333% { left:var(--week-x);top:var(--week-y);width:15.6%;height:5.2%;border-top-width:1px;border-left-width:3px;border-radius:4px; }
}

@keyframes planning-shape-title {
  0%,26.666%,100% { left:9%;top:24%;width:var(--line-length);height:5px; }
  33.333%,60% { left:3%;top:40%;width:calc(var(--line-length) * .55);height:4px; }
  66.666%,93.333% { left:9%;top:42%;width:calc(var(--line-length) * .8);height:3px; }
}

@keyframes planning-shape-meta {
  0%,26.666%,100% { left:9%;top:48%;width:var(--meta-length);height:4px;opacity:1; }
  33.333%,60% { left:42%;top:42%;width:calc(var(--meta-length) * .55);height:3px;opacity:1; }
  66.666%,93.333% { left:9%;top:48%;width:var(--meta-length);height:3px;opacity:0; }
}

@keyframes planning-shape-chip {
  0%,26.666%,100% { right:8%;bottom:17%;width:18%;height:6px; }
  33.333%,60% { right:3%;bottom:31%;width:9%;height:7px; }
  66.666%,93.333% { right:9%;bottom:34%;width:23%;height:6px; }
}

@keyframes planning-shape-progress {
  0%,26.666%,100% { opacity:1; }
  30%,96.666% { opacity:0; }
}

@keyframes planning-detail-scene {
  0%,26.666%,100% { opacity:1; }
  30%,96.666% { opacity:0; }
}

@keyframes planning-week-scene {
  0%,63.333%,96.666%,100% { opacity:0; }
  66.666%,93.333% { opacity:1; }
}

@keyframes planning-list-scene {
  0%,30%,63.333%,100% { opacity:0; }
  33.333%,60% { opacity:1; }
}

@keyframes planning-week-extra {
  /* Overlapping reveals start during the morph and sweep across the weeks. */
  0%,63.333% { opacity:0;transform:scale(.15); }
  67.333%,100% { opacity:1;transform:scale(1); }
}

@media(max-width:1000px) {
  .planning-feature-heading { gap:35px; }
  .planning-feature-demo { grid-template-columns:.8fr 1.2fr;gap:35px; }
  .planning-animation { max-width:650px;justify-self:center; }
  .planning-feature-demo--reverse { grid-template-columns:1.2fr .8fr; }
}

@media(max-width:700px) {
  .planning-feature-intro { margin-bottom:38px; }
  .planning-feature-heading,.planning-feature-demo { grid-template-columns:1fr;gap:28px; }
  .planning-feature-heading p,.planning-feature-copy>p { font-size:17px; }
  .planning-feature-copy { max-width:520px; }
  .planning-feature-subheading h3 { font-size:25px; }
  .planning-feature-demo+.planning-feature-demo { margin-top:52px; }
  .planning-feature-demo--reverse>.planning-feature-copy { order:-1;justify-self:start; }
  .month-plan-heading { min-height:40px; }
}

@container(max-width:400px) {
  .planning-stage { aspect-ratio:1.2; }
  .adjustment-stage { aspect-ratio:1.2; }
  .planning-shape-title { height:4px; }
}

@media(prefers-reduced-motion:reduce) {
  .planning-animation * { animation:none !important; }
  .month-plan-animation * { animation:none !important; }
  .adjustment-animation * { animation:none !important; }
}