/* ============ aleno tokens ============
   Weiss als Grund. Petrol #282731 als Struktur und Text.
   Schwarz für Display. Pink #FE4497 nur als seltener Akzent. */
#aleno-lp{
  --white:#FFFFFF;
  --petrol:#282731;
  --pink:#FE4497;

  --bg:var(--white);
  --surface:var(--white);
  --surface-2:#F7F7F8;
  --ink:#0B0B0E;
  --ink-2:#282731;
  --ink-3:#5C5B66;
  --muted:#8A8994;
  --line:#E9E9EC;
  --line-2:#D5D4DA;
  --tint-1:#F5F5F7;
  --tint-2:#EBEBEF;
  --pink-soft:#FFF1F7;
  --on-dark:#F6F5F7;
  --on-dark-2:#B9B7C2;
  --focus:var(--pink);
  /* Aliase für Farbreferenzen in den Grafiken */
  --rooms:var(--ink-2);
  --fnb:var(--ink-3);
  --bridge:var(--pink);
  --friction:var(--muted);
  --line-strong:var(--line-2);
}

#aleno-lp, #aleno-lp *, #aleno-lp *::before, #aleno-lp *::after{box-sizing:border-box}

#aleno-lp{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:300; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.002em;
}
#aleno-lp .wrap{max-width:1140px; margin:0 auto; padding:0 32px}
#aleno-lp .col{max-width:680px}
#aleno-lp ::selection{background:var(--pink); color:#fff}

/* ============ dunkle Bänder ============ */
#aleno-lp .dark{
  --bg:var(--petrol); --surface:#31303B; --surface-2:#31303B;
  --ink:#FFFFFF; --ink-2:var(--on-dark); --ink-3:var(--on-dark-2); --muted:#9B99A5;
  --line:#3C3B47; --line-2:#4E4D59; --tint-1:#31303B; --tint-2:#3A3945;
  --pink-soft:#3A2130;
  --rooms:var(--on-dark); --fnb:var(--on-dark-2); --bridge:var(--pink);
  --friction:#9B99A5; --line-strong:#4E4D59;
  background:var(--petrol); color:var(--on-dark);
  box-shadow:0 0 0 100vmax var(--petrol);
  clip-path:inset(0 -100vmax);
}

/* ============ Typografie ============ */
#aleno-lp h1{
  font-size:clamp(38px,6.2vw,74px); font-weight:300; line-height:1.02;
  letter-spacing:-.038em; margin:0 0 30px; color:var(--ink);
  text-wrap:balance; max-width:17ch;
}
#aleno-lp h1 em{font-style:normal; font-weight:400}
#aleno-lp h2{
  font-size:clamp(27px,4vw,44px); font-weight:300; line-height:1.1;
  letter-spacing:-.032em; margin:0 0 24px; color:var(--ink);
  text-wrap:balance; max-width:20ch;
}
#aleno-lp h3{
  font-size:19px; font-weight:500; letter-spacing:-.012em;
  margin:56px 0 14px; color:var(--ink);
}
#aleno-lp p{margin:0 0 20px}
#aleno-lp .lead{font-size:21px; line-height:1.55; font-weight:300; color:var(--ink-2); letter-spacing:-.014em}
#aleno-lp strong{font-weight:500; color:var(--ink)}
#aleno-lp .k{color:var(--pink); font-weight:400}
#aleno-lp .eyebrow, #aleno-lp .num, #aleno-lp .sidelabel, #aleno-lp .role, #aleno-lp .t-lbl{
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
}
#aleno-lp .eyebrow{color:var(--muted); margin:0 0 24px}
#aleno-lp .num{color:var(--muted); display:block; margin-bottom:18px}
#aleno-lp .num.hot{color:var(--pink)}

/* ============ Masthead ============ */
#aleno-lp .masthead{padding:44px 0 108px}
#aleno-lp .brandbar{display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:96px}
#aleno-lp .logo{height:26px; width:auto; display:block}
#aleno-lp .brandbar .rail{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-2); font-weight:500}
#aleno-lp .standfirst{font-size:19px; line-height:1.65; color:var(--on-dark-2); max-width:58ch; margin:0 0 20px; font-weight:300}
#aleno-lp .standfirst.sub{font-size:17px; color:#9B99A5; margin-bottom:0}
#aleno-lp .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:44px}
#aleno-lp .tag{
  font-size:11.5px; font-weight:400; letter-spacing:.02em; color:var(--on-dark-2);
  padding:7px 15px; border-radius:999px; border:1px solid #46454F;
}
#aleno-lp .scrollcue{
  margin-top:64px; display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-2);
}
#aleno-lp .scrollcue span{display:block; width:1px; height:34px; background:linear-gradient(var(--pink),transparent)}

/* ============ Nav ============ */
#aleno-lp nav{
  position:sticky; top:var(--alp-sticky-offset,0px); z-index:40;
  background:color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}

#aleno-lp nav .wrap{display:flex; overflow-x:auto; scrollbar-width:none}
#aleno-lp nav .wrap::-webkit-scrollbar{display:none}
#aleno-lp nav a{
  flex:0 0 auto; padding:16px 15px 14px; font-size:12.5px; font-weight:300;
  color:var(--muted); text-decoration:none; border-bottom:1.5px solid transparent;
  white-space:nowrap; transition:color .2s ease, border-color .2s ease;
}
#aleno-lp nav a:hover{color:var(--ink)}
#aleno-lp nav a.on{color:var(--ink); border-bottom-color:var(--pink)}
#aleno-lp nav a:focus-visible{outline:2px solid var(--pink); outline-offset:-3px; border-radius:3px}
#aleno-lp nav a span{color:var(--line-2); margin-right:8px; font-variant-numeric:tabular-nums}
#aleno-lp nav a.on span{color:var(--pink)}

/* ============ Sections ============ */
#aleno-lp section{padding:104px 0; scroll-margin-top:calc(56px + var(--alp-sticky-offset,0px))}
#aleno-lp section + section:not(.dark){border-top:1px solid var(--line)}
#aleno-lp section.dark + section{border-top:0}
#aleno-lp section.band{border:0}

/* ============ Figures ============ */
#aleno-lp figure{margin:52px 0; padding:0}
#aleno-lp figure .scroll{
  overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:34px 32px;
}
#aleno-lp .dark figure .scroll, #aleno-lp .dark .stage{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F7F8;
  --ink:#0B0B0E; --ink-2:#282731; --ink-3:#5C5B66; --muted:#8A8994;
  --line:#E9E9EC; --line-2:#D5D4DA; --tint-1:#F5F5F7; --tint-2:#EBEBEF;
  --pink-soft:#FFF1F7;
  --rooms:var(--ink-2); --fnb:var(--ink-3); --bridge:var(--pink);
  --friction:var(--muted); --line-strong:var(--line-2);
  background:#FFFFFF; border-color:#FFFFFF; color:var(--ink-2);
}
#aleno-lp figure svg{display:block; width:100%; height:auto; min-width:560px}
#aleno-lp figcaption{
  margin-top:18px; font-size:14px; line-height:1.6; color:var(--muted); max-width:74ch;
  padding-left:2px;
}
#aleno-lp figcaption b{font-weight:500; color:var(--ink-3)}

/* SVG-Semantik: Petrol-Abstufungen, Pink nur für aleno */
#aleno-lp .s-box{fill:var(--surface); stroke:var(--line-2); stroke-width:1.2}
#aleno-lp .s-plain{fill:var(--tint-1); stroke:var(--line-2); stroke-width:1.2}
#aleno-lp .s-rooms{fill:var(--tint-1); stroke:var(--line-2); stroke-width:1.2}
#aleno-lp .s-fnb{fill:var(--tint-2); stroke:var(--line-2); stroke-width:1.2}
#aleno-lp .s-bridge{fill:var(--pink-soft); stroke:var(--pink); stroke-width:1.4}
#aleno-lp .s-aleno{fill:var(--surface); stroke:var(--pink); stroke-width:1.4}
#aleno-lp .s-fill{fill:var(--tint-2); stroke:var(--line-2); stroke-width:1.2}
#aleno-lp .s-occ{fill:var(--ink-2); stroke:var(--ink-2); stroke-width:1.2}
#aleno-lp .s-friction{fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:5 4}
#aleno-lp .s-ghost{fill:none; stroke:var(--line-2); stroke-width:1.2; stroke-dasharray:5 4}
#aleno-lp .t{fill:var(--ink); font-size:13px; font-weight:400}
#aleno-lp .t-sm{fill:var(--ink-3); font-size:11.5px; font-weight:300}
#aleno-lp .t-md{fill:var(--ink-2); font-size:12px; font-weight:300}
#aleno-lp .t-lbl{fill:var(--muted); font-size:10.5px; font-weight:500; letter-spacing:.1em}
#aleno-lp .t-rooms, #aleno-lp .t-fnb{fill:var(--ink); font-size:13px; font-weight:500}
#aleno-lp .t-bridge{fill:var(--pink); font-size:13px; font-weight:500}
#aleno-lp .t-friction{fill:var(--muted); font-size:11.5px; font-weight:300}
#aleno-lp .t-num{fill:var(--ink); font-size:21px; font-weight:400; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
#aleno-lp .ln{stroke:var(--line-2); stroke-width:1.2; fill:none}
#aleno-lp .ln-bridge{stroke:var(--pink); stroke-width:1.6; fill:none}
#aleno-lp .ln-friction{stroke:var(--line-2); stroke-width:1.2; fill:none; stroke-dasharray:4 4}
#aleno-lp .ln-thin{stroke:var(--line); stroke-width:1; fill:none}

/* ============ Karten ============ */
#aleno-lp .grid{display:grid; gap:1px; margin:44px 0; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
#aleno-lp .g2{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
#aleno-lp .g2w{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
#aleno-lp .g3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
#aleno-lp .card{background:var(--surface); padding:32px 30px 30px; border:0; border-radius:0; display:flex; flex-direction:column}
#aleno-lp .card h4{font-size:17px; font-weight:500; margin:0 0 10px; letter-spacing:-.015em; color:var(--ink); line-height:1.3}
#aleno-lp .card p{font-size:15px; line-height:1.62; color:var(--ink-3); margin:0 0 10px}
#aleno-lp .card p:last-child{margin-bottom:0}
#aleno-lp .card .role{color:var(--muted); display:block; margin-bottom:14px}
#aleno-lp .card.rooms .role, #aleno-lp .card.fnb .role{color:var(--muted)}
#aleno-lp .card.bridge .role{color:var(--pink)}
#aleno-lp .card .then{
  display:block; margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.55; color:var(--muted);
}
#aleno-lp .card p + .then{margin-top:20px}

/* Karten mit gleicher Zeilenstruktur: Trennlinien liegen auf einer Höhe */
@supports (grid-template-rows: subgrid){
  #aleno-lp .grid.al{grid-template-rows:auto auto 1fr auto}
  #aleno-lp .grid.al .card{display:grid; grid-template-rows:subgrid; grid-row:span 4; align-content:start}
  #aleno-lp .grid.al .card .then{margin-top:20px}
  #aleno-lp .grid.al .card p{margin-bottom:0}
}
#aleno-lp .card .then b{font-weight:500; color:var(--ink-3)}

/* ============ Claims ============ */
#aleno-lp .claims{margin:52px 0 8px}
#aleno-lp .claim{padding:44px 0; border-top:1px solid var(--line)}
#aleno-lp .claim:last-child{border-bottom:1px solid var(--line)}
#aleno-lp .claim .cn{font-size:10.5px; font-weight:500; letter-spacing:.24em; color:var(--pink); display:block; margin-bottom:22px}
#aleno-lp .claim .big{font-size:clamp(23px,3.2vw,34px); font-weight:300; line-height:1.24; letter-spacing:-.03em; margin:0 0 22px; max-width:23ch; color:var(--ink); text-wrap:balance}
#aleno-lp .claim .big b{font-weight:400}
#aleno-lp .claim .sub{font-size:16px; color:var(--ink-3); margin:0; max-width:62ch; line-height:1.65}
#aleno-lp .claim .fix{margin:22px 0 0; font-size:15.5px; color:var(--ink-2); max-width:62ch; padding-left:20px; border-left:2px solid var(--pink); line-height:1.6}

/* ============ Listen, Zitate, Hinweise ============ */
#aleno-lp ul.plain{list-style:none; padding:0; margin:0 0 20px}
#aleno-lp ul.plain li{padding:20px 0 20px 30px; border-bottom:1px solid var(--line); position:relative; font-size:16px; line-height:1.6; color:var(--ink-3)}
#aleno-lp ul.plain li:first-child{border-top:1px solid var(--line)}
#aleno-lp ul.plain li::before{content:""; position:absolute; left:0; top:30px; width:14px; height:1px; background:var(--line-2)}
#aleno-lp ul.plain li b{font-weight:500; color:var(--ink)}
#aleno-lp .pull{
  margin:64px 0; font-size:clamp(22px,3vw,32px); font-weight:300; line-height:1.28;
  letter-spacing:-.03em; max-width:22ch; color:var(--ink); text-wrap:balance;
  padding-left:26px; border-left:2px solid var(--pink);
}
#aleno-lp .note{background:var(--tint-1); border-radius:16px; padding:28px 30px; font-size:15.5px; line-height:1.65; color:var(--ink-3); margin:40px 0}
#aleno-lp .note b{font-weight:500; color:var(--ink)}

/* ============ Tabellen ============ */
#aleno-lp .tw{overflow-x:auto; border:1px solid var(--line); border-radius:18px; margin:36px 0}
#aleno-lp table{border-collapse:collapse; width:100%; font-size:15px; margin:0; min-width:600px}
#aleno-lp th, #aleno-lp td{text-align:left; padding:18px 22px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.55}
#aleno-lp tr:last-child td{border-bottom:0}
#aleno-lp th{font-weight:500; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); background:var(--tint-1)}
#aleno-lp td b{font-weight:500; color:var(--ink)}
#aleno-lp td.grp{
  font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pink); background:var(--tint-1); padding:12px 22px;
}

/* ============ Tiefe: weiche Schatten ============ */
#aleno-lp{
  --sh-1: 0 1px 2px rgba(40,39,49,.04), 0 3px 10px rgba(40,39,49,.055);
  --sh-2: 0 2px 4px rgba(40,39,49,.045), 0 10px 26px rgba(40,39,49,.07);
  --sh-dark: 0 4px 10px rgba(0,0,0,.16), 0 22px 54px rgba(0,0,0,.26);
}
#aleno-lp figure .scroll, #aleno-lp .calc, #aleno-lp .tw, #aleno-lp .grid, #aleno-lp .note{box-shadow:var(--sh-2)}
#aleno-lp .prob, #aleno-lp .node{box-shadow:var(--sh-1)}
#aleno-lp .dark figure .scroll, #aleno-lp .dark .stage, #aleno-lp .worldwrap .act{box-shadow:var(--sh-dark)}
#aleno-lp .worldwrap .acts{box-shadow:none}
/* Kästen in den Grafiken bekommen eine feine Auflage, Platzhalter bleiben flach */
#aleno-lp .s-box, #aleno-lp .s-plain, #aleno-lp .s-rooms, #aleno-lp .s-fnb, #aleno-lp .s-fill, #aleno-lp .s-bridge, #aleno-lp .s-aleno, #aleno-lp .s-occ{
  filter:drop-shadow(0 1.5px 3px rgba(40,39,49,.11));
}

/* ============ Guest Journey: sequenzielles Aufleuchten ============ */
#aleno-lp .gj .stop{opacity:1; transition:opacity .5s ease}
#aleno-lp .gj .alp-pulse{fill:none; stroke:var(--ink-2); stroke-width:1.4; opacity:0;
  transform-box:fill-box; transform-origin:center; pointer-events:none}
#aleno-lp .gj.armed .stop{opacity:.28}
#aleno-lp .gj.armed.go .stop{animation:alp-gjOn .8s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(1s + var(--i)*1s)}
#aleno-lp .gj.armed.go .alp-pulse{animation:alp-gjPulse 1.5s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(1s + var(--i)*1s)}
#aleno-lp .gj.armed.go .stop.last{animation-duration:1.1s}
#aleno-lp .gj.armed.go .stop.last .alp-pulse{animation:alp-gjPulseBig 2.2s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(1s + var(--i)*1s)}
@keyframes alp-gjOn{from{opacity:.28} to{opacity:1}}
@keyframes alp-gjPulse{0%{opacity:.5; transform:scale(1)} 100%{opacity:0; transform:scale(3.2)}}
@keyframes alp-gjPulseBig{0%{opacity:.6; transform:scale(1)} 100%{opacity:0; transform:scale(4.6)}}
@media (prefers-reduced-motion:reduce){
  #aleno-lp .gj.armed .stop{opacity:1}
  #aleno-lp .gj.armed.go .stop, #aleno-lp .gj.armed.go .alp-pulse, #aleno-lp .gj.armed.go .stop.last .alp-pulse{animation:none}
}

/* ============ Rechner ============ */
#aleno-lp .calc{
  margin:52px 0; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); padding:34px 32px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:44px; align-items:start;
}
@media (max-width:820px){ #aleno-lp .calc{grid-template-columns:1fr; gap:32px; padding:26px 22px} }
#aleno-lp .calc .cgroup{display:flex; flex-direction:column; gap:22px}
#aleno-lp .ctrl label{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:13px; color:var(--ink-3); margin-bottom:10px;
}
#aleno-lp .ctrl output{font-size:14px; color:var(--ink); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}
#aleno-lp .ctrl input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer; display:block; margin:0;
}
#aleno-lp .ctrl input[type=range]::-webkit-slider-runnable-track{height:3px; border-radius:2px; background:var(--line-2)}
#aleno-lp .ctrl input[type=range]::-moz-range-track{height:3px; border-radius:2px; background:var(--line-2)}
#aleno-lp .ctrl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-7.5px;
  border-radius:50%; background:var(--petrol); border:0;
  box-shadow:0 1px 4px rgba(40,39,49,.28); transition:transform .15s ease;
}
#aleno-lp .ctrl input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--petrol); border:0;
  box-shadow:0 1px 4px rgba(40,39,49,.28);
}
#aleno-lp .ctrl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
#aleno-lp .ctrl input[type=range]:focus-visible{outline:none}
#aleno-lp .ctrl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--pink-soft), 0 0 0 5.5px var(--pink)}
#aleno-lp .ctrl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--pink-soft), 0 0 0 5.5px var(--pink)}
#aleno-lp .calc .creset{
  align-self:flex-start; font-family:inherit; font-size:12.5px; color:var(--muted);
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  padding:8px 18px; cursor:pointer; transition:color .2s ease, border-color .2s ease;
}
#aleno-lp .calc .creset:hover{color:var(--ink); border-color:var(--muted)}
#aleno-lp .calc .creset:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
#aleno-lp .res{border-top:1px solid var(--line); padding-top:20px; margin-bottom:24px}
#aleno-lp .res:first-child{border-top:0; padding-top:0}
#aleno-lp .rn{
  display:block; font-size:38px; font-weight:300; letter-spacing:-.03em; line-height:1.05;
  color:var(--pink); font-variant-numeric:tabular-nums; margin-bottom:10px;
}
#aleno-lp .rl{display:block; font-size:14px; line-height:1.55; color:var(--ink-3)}
#aleno-lp .steps{list-style:none; margin:0; padding:20px 0 0; border-top:1px solid var(--line)}
#aleno-lp .steps li{
  display:flex; justify-content:space-between; gap:18px;
  font-size:12.5px; color:var(--muted); padding:7px 0;
}
#aleno-lp .steps li b{font-weight:400; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ============ Accordion ============ */
#aleno-lp details.acc{border-top:1px solid var(--line); margin:0}
#aleno-lp details.acc:last-of-type{border-bottom:1px solid var(--line)}
#aleno-lp details.acc > summary{
  list-style:none; cursor:pointer; padding:26px 40px 26px 0; position:relative;
  font-size:18px; font-weight:400; color:var(--ink); letter-spacing:-.015em;
}
#aleno-lp details.acc > summary::-webkit-details-marker{display:none}
#aleno-lp details.acc > summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
#aleno-lp details.acc[open] > summary::after{transform:translateY(-25%) rotate(-135deg)}
#aleno-lp details.acc > summary:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:4px}
#aleno-lp details.acc .accbody{padding-bottom:12px}
#aleno-lp details.acc .accbody > p:first-child{margin-top:0}

#aleno-lp .alp-foot{padding:96px 0 120px; color:var(--muted); font-size:14px; line-height:1.7}
#aleno-lp .alp-foot p{max-width:64ch}
#aleno-lp .alp-foot b{color:var(--ink-3); font-weight:400}

/* ============ Reveal ============ */
#aleno-lp .rv{opacity:0; transform:translateY(18px)}
#aleno-lp .rv.in{opacity:1; transform:none; transition:opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){#aleno-lp .rv{opacity:1; transform:none}}

/* ============ Interaktiver Teil ============ */
#aleno-lp .plugsec .intro{max-width:680px}
#aleno-lp .stage{
  position:relative; margin-top:48px; touch-action:none;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:36px 32px 38px;
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:start;
}

#aleno-lp .cable{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; overflow:visible}
#aleno-lp .cable .core{stroke:var(--line-2); stroke-width:4; fill:none; stroke-linecap:round}
#aleno-lp .cable .lit{stroke:var(--pink); stroke-width:4; fill:none; stroke-linecap:round; opacity:0}
#aleno-lp .flowline{stroke:#FFFFFF; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-dasharray:2 16; animation:alp-flow 1.3s linear infinite}
#aleno-lp .cable .alp-flow{stroke:var(--surface); stroke-width:2; fill:none; stroke-linecap:round; stroke-dasharray:2 15; opacity:0}
#aleno-lp .dark .cable .alp-flow{stroke:#FFFFFF}
#aleno-lp .stage[data-state="connected"] .cable .lit{opacity:1}
#aleno-lp .stage[data-state="connected"] .cable .core{opacity:0}
#aleno-lp .stage[data-state="connected"] .cable .alp-flow{opacity:.95; animation:alp-flow 1.3s linear infinite}
@keyframes alp-flow{to{stroke-dashoffset:-34}}

#aleno-lp .center{display:flex; flex-direction:column; position:relative; z-index:3}
#aleno-lp .node{border-radius:16px; padding:26px 24px 24px; position:relative; text-align:center; transition:border-color .5s ease}
#aleno-lp .node .nodelabel{font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; display:block; margin-bottom:10px; color:var(--muted)}
#aleno-lp .node strong{display:block; font-size:21px; font-weight:400; line-height:1.24; letter-spacing:-.022em; margin-bottom:10px; color:var(--ink)}
#aleno-lp .node p{font-size:13px; line-height:1.55; margin:0; color:var(--ink-3)}
#aleno-lp .node.pms{background:var(--tint-1); border:1px solid var(--line-2)}
#aleno-lp .node.fnb{background:var(--tint-2); border:1px solid var(--line-2)}
#aleno-lp .stage[data-state="connected"] .node.pms, #aleno-lp .stage[data-state="connected"] .node.fnb{border-color:var(--pink)}
#aleno-lp .node .swap-off{display:block}
#aleno-lp .node .swap-on{display:none}
#aleno-lp .stage[data-state="connected"] .node .swap-off{display:none}
#aleno-lp .stage[data-state="connected"] .node .swap-on{display:block}

#aleno-lp .port{position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:36px; height:14px; border-radius:0 0 6px 6px; background:var(--line-2); z-index:1; transition:background .4s ease}
#aleno-lp .stage[data-state="connected"] .port{background:var(--pink)}
#aleno-lp .cablezone{height:244px; position:relative}
#aleno-lp .socket{
  position:absolute; left:50%; top:-9px; transform:translateX(-50%);
  width:46px; height:18px; border-radius:6px 6px 0 0;
  background:var(--surface); border:1px solid var(--line-2); border-bottom:0;
  display:flex; align-items:center; justify-content:center; gap:8px; z-index:1;
  transition:transform .2s cubic-bezier(.16,1,.3,1), background .25s ease, border-color .25s ease, opacity .3s ease;
}
#aleno-lp .dark .socket{background:var(--surface)}
#aleno-lp .socket i{display:block; width:4px; height:9px; border-radius:1px; background:var(--line-2)}
#aleno-lp .stage[data-state="dragging"] .socket{transform:translateX(-50%) scale(1.2); border-color:var(--pink)}
#aleno-lp .stage[data-state="connected"] .socket{background:var(--pink); border-color:var(--pink); opacity:0}
#aleno-lp .stage[data-state="connected"] .socket i{background:#fff}

#aleno-lp .plug{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  width:64px; height:50px; border-radius:12px; padding:0; z-index:4;
  background:var(--petrol); border:0; cursor:grab;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(40,39,49,.28);
  will-change:left,top,transform;
}
#aleno-lp .pluglogo{width:30px; height:auto; display:block; pointer-events:none}
#aleno-lp .plug::after{content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); width:26px; height:10px; border-radius:0 0 4px 4px; background:var(--petrol)}
#aleno-lp .plug:active{cursor:grabbing}
#aleno-lp .plug:focus-visible{outline:2.5px solid var(--ink); outline-offset:4px}
#aleno-lp .stage[data-state="idle"] .plug{animation:alp-pulse 2.8s ease-in-out infinite}
#aleno-lp .stage[data-state="connected"] .plug{cursor:default}
@keyframes alp-pulse{
  0%,100%{box-shadow:0 8px 22px rgba(40,39,49,.28), 0 0 0 0 rgba(254,68,151,.38)}
  60%{box-shadow:0 8px 22px rgba(40,39,49,.28), 0 0 0 18px rgba(254,68,151,0)}
}
#aleno-lp .hint{
  position:absolute; left:50%; transform:translateX(-50%); top:182px; margin:0;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:12.5px; letter-spacing:.02em; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--pink); border-radius:999px;
  padding:7px 15px 7px 12px; box-shadow:0 2px 10px rgba(254,68,151,.16);
  transition:opacity .3s ease; z-index:5; pointer-events:none;
}
#aleno-lp .hint svg{width:12px; height:12px; flex:none; fill:none; stroke:var(--pink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
#aleno-lp .stage[data-state="idle"] .hint svg{animation:alp-hintNudge 2.4s ease-in-out infinite}
@keyframes alp-hintNudge{0%,72%,100%{transform:translateY(0)} 84%{transform:translateY(2.5px)}}
#aleno-lp .stage[data-state="idle"] .socket{animation:alp-socketWait 2.8s ease-in-out infinite}
@keyframes alp-socketWait{
  0%,100%{border-color:var(--line-2); box-shadow:0 0 0 0 rgba(254,68,151,0)}
  55%{border-color:var(--pink); box-shadow:0 -3px 14px rgba(254,68,151,.30)}
}
@media (prefers-reduced-motion:reduce){
  #aleno-lp .stage[data-state="idle"] .hint svg, #aleno-lp .stage[data-state="idle"] .socket{animation:none}
}
#aleno-lp .stage[data-state="dragging"] .hint, #aleno-lp .stage[data-state="connected"] .hint{opacity:0}

#aleno-lp .side{display:flex; flex-direction:column}
#aleno-lp .sidelabel{color:var(--muted); display:block; margin-bottom:20px}
#aleno-lp .probs{display:flex; flex-direction:column; gap:2px}
#aleno-lp .prob{
  background:var(--tint-1); border-radius:12px; padding:18px 20px;
  transition:opacity .55s ease, transform .55s ease, background .55s ease;
  transition-delay:var(--d,0s);
}
#aleno-lp .prob .plbl{
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:8px;
}
#aleno-lp .prob p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-3)}
#aleno-lp .stage[data-state="connected"] .prob{opacity:.28; transform:translateX(-8px); background:transparent}
#aleno-lp ul.items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
#aleno-lp ul.items li{
  font-size:14px; line-height:1.5; color:var(--ink-3);
  background:var(--tint-1); border-radius:10px; padding:14px 16px;
  transition:opacity .5s ease, color .5s ease, background .5s ease, transform .5s ease;
  transition-delay:var(--d,0s);
}
#aleno-lp .dark ul.items li{background:var(--tint-1)}
#aleno-lp .stage[data-state="connected"] ul.items li{opacity:.3; text-decoration:line-through; text-decoration-thickness:1px; background:transparent; transform:translateX(-8px)}
#aleno-lp .crossed{margin-top:20px; font-size:13px; color:var(--muted); opacity:0; transition:opacity .4s ease .95s}
#aleno-lp .stage[data-state="connected"] .crossed{opacity:1}

#aleno-lp .after .placeholder{border:1px dashed var(--line-2); border-radius:14px; padding:26px 22px; font-size:13.5px; line-height:1.55; color:var(--muted)}
#aleno-lp .stage[data-state="connected"] .after .placeholder{display:none}
#aleno-lp .agroups{display:none; flex-direction:column; gap:2px}
#aleno-lp .stage[data-state="connected"] .agroups{display:flex}
#aleno-lp .afterhead{margin:0 0 14px; font-size:16px; font-weight:400; line-height:1.4; color:var(--ink); letter-spacing:-.015em}
#aleno-lp .agroup{background:var(--tint-1); border-radius:10px; padding:18px 18px 16px; opacity:0; transform:translateY(12px); animation:alp-bloom .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0s)}
#aleno-lp .dark .agroup{background:var(--tint-1)}
#aleno-lp .agroup.star{background:var(--pink-soft); box-shadow:inset 0 2px 0 0 var(--pink)}
@keyframes alp-bloom{to{opacity:1; transform:none}}
#aleno-lp .agroup h5{margin:0 0 9px; font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
#aleno-lp .agroup.star h5{color:var(--pink)}
#aleno-lp .agroup p{margin:0 0 6px; font-size:14px; line-height:1.5; color:var(--ink-3)}
#aleno-lp .agroup p:last-child{margin-bottom:0}

#aleno-lp .stagefoot{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
#aleno-lp .verdict{font-size:15px; color:var(--muted); margin:0; flex:1 1 320px; line-height:1.6}
#aleno-lp .stage[data-state="connected"] .verdict{color:var(--ink-3)}
#aleno-lp .verdict b{font-weight:500; color:var(--ink)}
#aleno-lp .btn{
  font-family:inherit; font-size:13px; font-weight:400; color:var(--ink-3);
  background:transparent; border:1px solid var(--line-2); border-radius:999px;
  padding:10px 20px; cursor:pointer; opacity:0; pointer-events:none;
  transition:opacity .35s ease, border-color .2s ease, color .2s ease;
}
#aleno-lp .btn:hover{color:var(--ink); border-color:var(--muted)}
#aleno-lp .btn:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
#aleno-lp .stage[data-state="connected"] .btn{opacity:1; pointer-events:auto}

@media (max-width:900px){
  #aleno-lp .stage{grid-template-columns:1fr; gap:26px; padding:26px 20px 30px}
  #aleno-lp .center{order:-1}
  #aleno-lp .cablezone{height:238px}
  #aleno-lp .hint{top:176px}
  #aleno-lp .brandbar{margin-bottom:56px}
}
@media (max-width:640px){
  #aleno-lp{font-size:16px}
  #aleno-lp .wrap{padding:0 22px}
  #aleno-lp .masthead{padding:32px 0 72px}
  #aleno-lp section{padding:72px 0}
  #aleno-lp figure .scroll{padding:20px 16px; border-radius:14px}
  #aleno-lp .grid{border-radius:14px}
  #aleno-lp .card{padding:26px 22px}
}

/* ---------- die Welt, die sich öffnet ---------- */
#aleno-lp .worldwrap{display:grid; grid-template-rows:0fr; transition:grid-template-rows .9s cubic-bezier(.16,1,.3,1)}
#aleno-lp .worldwrap > .worldinner{overflow:hidden; min-height:0}
#aleno-lp .worldwrap.open{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){#aleno-lp .worldwrap{transition:none}}
#aleno-lp .worldpad{padding-top:44px}
#aleno-lp .worldhead{
  font-size:clamp(21px,2.6vw,30px); font-weight:300; line-height:1.24; letter-spacing:-.03em;
  color:var(--ink); margin:0 0 34px; max-width:26ch;
  opacity:0; transform:translateY(14px);
}
#aleno-lp .worldwrap.open .worldhead{animation:alp-bloom .7s cubic-bezier(.16,1,.3,1) .25s forwards}
#aleno-lp .acts{display:flex; flex-direction:column; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
#aleno-lp .act{background:var(--surface); padding:32px 30px 26px; opacity:0; transform:translateY(16px)}
#aleno-lp .dark .act{background:#FFFFFF;
  --ink:#0B0B0E; --ink-2:#282731; --ink-3:#5C5B66; --muted:#8A8994;
  --line:#E9E9EC; --line-2:#D5D4DA; --tint-1:#F5F5F7; --tint-2:#EBEBEF; --pink-soft:#FFF1F7;
  --rooms:var(--ink-2); --fnb:var(--ink-3); --bridge:var(--pink); --friction:var(--muted); --line-strong:var(--line-2);
  color:var(--ink-2);
}
#aleno-lp .worldwrap.open .act{animation:alp-bloom .75s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0s)}
#aleno-lp .act .actlbl{font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--pink); display:block; margin-bottom:10px}
#aleno-lp .act h4{font-size:19px; font-weight:400; letter-spacing:-.02em; margin:0 0 6px; color:var(--ink)}
#aleno-lp .act p{font-size:14.5px; line-height:1.6; color:var(--ink-3); margin:0 0 22px; max-width:70ch}
#aleno-lp .act svg{display:block; width:100%; height:auto; min-width:520px}
#aleno-lp .act .scroll{overflow-x:auto}
@media (prefers-reduced-motion:reduce){#aleno-lp .worldhead, #aleno-lp .act{opacity:1; transform:none; animation:none!important}}

/* ============ HubSpot: Abgrenzung gegen Theme-Styles ============ */
#aleno-lp{
  display:block; overflow-x:clip; text-align:left;
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
#aleno-lp h1, #aleno-lp h2, #aleno-lp h3, #aleno-lp h4{font-family:inherit; text-transform:none}
#aleno-lp p, #aleno-lp li, #aleno-lp td, #aleno-lp th, #aleno-lp figcaption{font-family:inherit}
#aleno-lp ul, #aleno-lp ol{margin-top:0}
#aleno-lp img{max-width:100%; height:auto}
#aleno-lp button{font-family:inherit}
#aleno-lp a{color:inherit}
#aleno-lp .alp-foot a{text-decoration:none; border-bottom:1px solid var(--line-2)}
#aleno-lp .alp-foot a:hover{border-bottom-color:var(--pink)}
#aleno-lp nav.alp-nav a{border-top:0; border-left:0; border-right:0; text-transform:none; letter-spacing:normal}
html:has(#aleno-lp){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(#aleno-lp){scroll-behavior:auto}}

/* ============ Kurzfassung ============ */
#aleno-lp .tldr{
  margin:72px 0 0; padding:34px 34px 30px; border:1px solid var(--line);
  border-radius:18px; background:var(--surface); box-shadow:var(--sh-2);
}
#aleno-lp .tldr h2{
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pink); margin:0 0 18px; max-width:none; line-height:1.4;
}
#aleno-lp .tldr ul{list-style:none; padding:0; margin:0; display:grid; gap:12px 40px;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
#aleno-lp .tldr li{font-size:15px; line-height:1.6; color:var(--ink-3); padding:0; margin:0}
#aleno-lp .tldr li b{font-weight:500; color:var(--ink)}
@media (max-width:640px){ #aleno-lp .tldr{margin-top:48px; padding:26px 22px} }

/* ============ Häufige Fragen ============ */
#aleno-lp .faq{margin:44px 0 0; border-top:1px solid var(--line)}
#aleno-lp .faq .qa{padding:28px 0; border-bottom:1px solid var(--line); display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:12px 48px}
#aleno-lp .faq h3{margin:0; font-size:17px; line-height:1.45}
#aleno-lp .faq p{margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-3)}
@media (max-width:820px){ #aleno-lp .faq .qa{grid-template-columns:1fr} }

#aleno-lp td a.pms-link{text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .2s ease}
#aleno-lp td a.pms-link:hover{border-bottom-color:var(--pink)}
#aleno-lp td a.pms-link:focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:3px}

/* Theme-Tabellenrahmen zurücksetzen */
#aleno-lp table{border:0; border-collapse:collapse; background:transparent}
#aleno-lp th, #aleno-lp td{border:0; border-bottom:1px solid var(--line)}
#aleno-lp tr:last-child td{border-bottom:0}
#aleno-lp thead tr, #aleno-lp tbody tr{border:0; background:transparent}

/* PMS-Logos */
#aleno-lp ul.pms-logos{list-style:none; margin:36px 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
#aleno-lp ul.pms-logos li{margin:0; padding:0}
#aleno-lp a.pms-logo{display:flex; align-items:center; justify-content:center; height:104px; padding:18px 22px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-1); text-decoration:none; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease}
#aleno-lp a.pms-logo:hover{border-color:var(--pink); transform:translateY(-2px); box-shadow:var(--sh-2)}
#aleno-lp a.pms-logo:focus-visible{outline:2px solid var(--pink); outline-offset:3px}
#aleno-lp a.pms-logo img{display:block; max-width:100%; max-height:56px; width:auto; height:auto; object-fit:contain}
#aleno-lp .pms-word{font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
@media (prefers-reduced-motion:reduce){#aleno-lp a.pms-logo{transition:none} #aleno-lp a.pms-logo:hover{transform:none}}

/* PMS-Logos v2: eine Reihe, Name unter dem Logo */
#aleno-lp ul.pms-logos{grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px}
#aleno-lp a.pms-logo{height:auto; flex-direction:column; gap:10px; padding:18px 10px 14px}
#aleno-lp .pms-img{display:flex; align-items:center; justify-content:center; height:52px; width:100%}
#aleno-lp a.pms-logo .pms-img img{max-height:52px; max-width:100%}
#aleno-lp .pms-word{font-size:11.5px; letter-spacing:.12em}
#aleno-lp .pms-name{font-size:12.5px; font-weight:400; line-height:1.3; color:var(--ink-3); text-align:center}
@media (max-width:900px){#aleno-lp ul.pms-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){#aleno-lp ul.pms-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* PMS-Logos v3: Wortmarken, ohne Namen */
#aleno-lp a.pms-logo{flex-direction:row; height:96px; padding:16px 14px; gap:0}
#aleno-lp a.pms-logo svg, #aleno-lp a.pms-logo img{display:block; max-width:100%}
#aleno-lp a.pms-logo .lg-wide{width:100%; height:auto; max-height:22px}
#aleno-lp a.pms-logo .lg-asa{height:42px; width:auto}
#aleno-lp a.pms-logo .lg-shiji{height:34px; width:auto}
#aleno-lp a.pms-logo .lg-apaleo{height:auto; width:100%; max-height:28px; object-fit:contain}
#aleno-lp a.pms-logo .lg-protel{height:52px; width:auto}

/* Demo-Button wie im Website-Header, mobil schwebend unten rechts */
#aleno-lp a.alp-cta{display:inline-flex; align-items:center; justify-content:center; background:#FE4497; color:#272731; font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:16px; font-weight:600; line-height:1.2; text-transform:uppercase; letter-spacing:normal; padding:16px 50px; border:0; border-radius:36px; text-decoration:none; white-space:nowrap; transition:filter .2s ease, transform .2s ease, box-shadow .2s ease, opacity .25s ease}
#aleno-lp a.alp-cta:hover{filter:brightness(.94); transform:translateY(-1px)}
#aleno-lp a.alp-cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
#aleno-lp .alp-cta-row{margin-top:28px}
#aleno-lp a.alp-cta--float{display:none}
@media (max-width:768px){
  #aleno-lp a.alp-cta--float{display:inline-flex; position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:9980; padding:14px 26px; font-size:14px; box-shadow:0 8px 24px rgba(40,39,49,.28)}
  #aleno-lp a.alp-cta--float.is-hidden{opacity:0; transform:translateY(10px); pointer-events:none}
}
@media (prefers-reduced-motion:reduce){#aleno-lp a.alp-cta{transition:none} #aleno-lp a.alp-cta:hover{transform:none}}

/* Schwebender Demo-Button mittig, damit Cookiebot links und Chat rechts Platz haben */
@media (max-width:768px){
  #aleno-lp a.alp-cta--float{right:auto; left:50%; transform:translateX(-50%)}
  #aleno-lp a.alp-cta--float:hover{transform:translateX(-50%) translateY(-1px)}
  #aleno-lp a.alp-cta--float.is-hidden{transform:translateX(-50%) translateY(10px)}
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  #aleno-lp a.alp-cta--float:hover{transform:translateX(-50%)}
}

@media (max-width:360px){
  #aleno-lp a.alp-cta--float{padding:12px 18px; font-size:13px}
}