/* Portable marketing explainers. Brand and layout are controlled by custom properties. */
.mx-flow{--mx-accent:var(--akzent,#b5441d);--mx-ink:var(--tinte,#14181f);--mx-muted:var(--grau,#5a6170);--mx-panel:var(--weiss,#fff);--mx-line:var(--linie,#ddd9d0);color:var(--mx-ink);border:1px solid var(--mx-line);border-radius:20px;background:var(--mx-panel);padding:clamp(1.2rem,3vw,2.2rem);margin:2rem 0;isolation:isolate;container-type:inline-size;container-name:mx}
.mx-flow *{box-sizing:border-box}.mx-flow figcaption{font-size:clamp(1.2rem,2.4vw,1.65rem);font-weight:500;line-height:1.3;letter-spacing:-.02em;color:var(--mx-ink);margin:0 0 .7rem}.mx-flow .mx-intro,.mx-flow .mx-note{font-size:.95rem;line-height:1.65;max-width:68ch;color:var(--mx-muted)}.mx-flow .mx-note{margin:1rem 0 0}.mx-flow .mx-lane{margin-top:1.5rem}.mx-flow .mx-lane h3{font-size:1.05rem;color:var(--mx-accent);margin:0 0 .7rem}.mx-flow .mx-steps{display:grid;grid-template-columns:repeat(var(--mx-cols,3),minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0}.mx-flow .mx-step{position:relative;padding:1rem;border:1px solid var(--mx-line);border-radius:12px;min-width:0;background:var(--mx-panel);overflow-wrap:anywhere}.mx-flow .mx-step+.mx-step::before{content:'→';position:absolute;left:-.9rem;top:1rem;color:var(--mx-accent);font-size:1rem}.mx-flow .mx-step strong{display:block;font-size:1rem;font-weight:500;line-height:1.4;color:var(--mx-ink)}.mx-flow .mx-step p{font-size:.9rem;line-height:1.6;color:var(--mx-muted);margin:.45rem 0 0}.mx-flow .mx-result{margin:1.25rem 0 0;border-left:3px solid var(--mx-accent);padding:.7rem 1rem;font-size:1rem;line-height:1.55;color:var(--mx-ink)}.mx-flow .mx-controls{display:flex;justify-content:flex-end;margin-top:1rem}.mx-flow button{appearance:none;background:transparent;color:var(--mx-accent);border:1px solid currentColor;border-radius:999px;padding:.6rem 1rem;min-height:44px;font:inherit;font-size:.86rem;cursor:pointer}.mx-flow button[hidden]{display:none}.mx-flow button:focus-visible{outline:3px solid var(--mx-accent);outline-offset:4px}.mx-flow.is-playing .mx-step{animation:mx-highlight 1.15s ease-out both;animation-delay:calc(var(--mx-order)*1.15s)}
@keyframes mx-highlight{0%,100%{box-shadow:none}35%,70%{box-shadow:0 0 0 2px var(--mx-accent)}}
@media(max-width:1000px){.mx-flow .mx-steps{grid-template-columns:1fr}.mx-flow .mx-step+.mx-step::before{content:'↓';top:-1.1rem;left:1.2rem}.mx-flow .mx-controls{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.mx-flow .mx-step{animation:none!important}.mx-flow .mx-controls{display:none}}

@container mx (max-width:900px){.mx-flow .mx-steps{grid-template-columns:1fr}.mx-flow .mx-step+.mx-step::before{content:"↓";top:-1.1rem;left:1.2rem}}

/* Schematic figures deliberately have no measured performance values. */
.mx-flow .mx-badge{display:inline-block;border:1px solid var(--mx-line);border-radius:999px;padding:.4rem .7rem;font-size:.82rem;line-height:1.45;color:var(--mx-muted);margin:0 0 1rem}.mx-flow .mx-chart{display:block;width:100%;height:auto;color:var(--mx-accent);margin:.4rem 0}.mx-flow .mx-chart-label{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;line-height:1.5;color:var(--mx-muted)}.mx-flow .mx-chart-label strong{color:var(--mx-ink);font-weight:500}.mx-flow .mx-grid{fill:none;stroke:var(--mx-line);stroke-width:1.5}.mx-flow .mx-curve{fill:none;stroke:var(--mx-accent);stroke-width:4;stroke-linecap:round}.mx-flow .mx-alternative{fill:none;stroke:var(--mx-muted);stroke-width:2;stroke-dasharray:7 7}.mx-flow .mx-ticks{fill:var(--mx-muted);font-family:inherit;font-size:22px}.mx-flow .mx-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0;margin:1rem 0 1.5rem;font-size:.85rem;line-height:1.6;color:var(--mx-muted)}.mx-flow .mx-key{display:inline-block;vertical-align:middle;width:1.5rem;border-top:3px solid var(--mx-accent);margin-right:.5rem}.mx-flow .mx-key-dashed{border-top:2px dashed var(--mx-muted)}.mx-flow .mx-target-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:.5rem 0 1.5rem}.mx-flow .mx-target-panel{border:1px solid var(--mx-line);border-radius:12px;padding:1.2rem}.mx-flow .mx-target-panel h3{font-size:1.05rem;line-height:1.4;margin:0 0 .5rem;color:var(--mx-ink)}.mx-flow .mx-target-panel p{font-size:.9rem;line-height:1.6;color:var(--mx-muted);margin:0 0 .9rem}.mx-flow .mx-target-focused{border-color:var(--mx-accent)}.mx-flow .mx-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0}.mx-flow .mx-chips li{border:1px solid var(--mx-line);border-radius:8px;padding:.45rem .6rem;font-size:.85rem;line-height:1.5;color:var(--mx-muted)}.mx-flow .mx-target-focused .mx-chips li{color:var(--mx-accent);border-color:currentColor}.mx-flow.is-playing .mx-curve{stroke-dasharray:1;animation:mx-draw 3.3s ease both}@keyframes mx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@media(max-width:600px){.mx-flow .mx-target-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.mx-flow .mx-curve{animation:none!important}}

/* Static hospitality cards; no hover, scroll or timer effects. */
.hp-figure .hp-kicker{color:var(--mx-accent);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}.hp-figure .hp-heading{max-width:52rem}.hp-figure figcaption{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin:.8rem 0 1rem}.hp-figure .hp-heading>p{color:var(--mx-muted);line-height:1.75;max-width:65ch}.hp-figure .hp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:2rem 0 0;gap:1rem}.hp-figure .hp-cards li{min-width:0;display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--mx-line);border-radius:12px;padding:1.35rem;overflow-wrap:break-word}.hp-figure .hp-icon{width:64px;height:64px;display:block;color:var(--mx-accent);margin-bottom:1.4rem}.hp-figure .hp-icon svg{width:100%;height:100%}.hp-figure .hp-label{color:var(--mx-accent);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;line-height:1.6}.hp-figure .hp-cards h3{font-size:1.2rem;line-height:1.35;margin:.5rem 0 .8rem;color:var(--mx-ink)}.hp-figure .hp-cards li>p:not(.hp-label){color:var(--mx-muted);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem}.hp-figure .hp-example{margin-top:auto;padding-top:1rem;border-top:1px solid var(--mx-line);font-size:.8rem;line-height:1.65;color:var(--mx-muted);width:100%}.hp-figure .hp-result{border-left:3px solid var(--mx-accent);padding:.75rem 1rem;margin:1.5rem 0 0;font-size:1rem;line-height:1.7;color:var(--mx-ink)}@media(max-width:900px){.hp-figure .hp-cards{grid-template-columns:1fr}}
