/* ==========================================================================
   Startseite (public/index.php) – ergänzt landing.css.
   Präfix hm-. Nur Variablen, keine Farbwerte.
   ========================================================================== */

/* ---------- Hero: 3D-Orb hinter dem Dashboard ---------- */
.hm-hero .lp-h1 { max-width: 17ch; font-size: clamp(34px, 4.2vw, 54px); }
.hm-hero .lp-h1 .lp-grad { display: block; }
.hm-stage { min-height: 600px; }
.hm-object { width: min(80%, 520px); right: -6%; top: -4%; }
.hm-orb { position: absolute; inset: 0; pointer-events: none; }
.hm-orb span {
    position: absolute; right: 6%; top: 2%; width: min(70%, 440px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid var(--lp-a-line); animation: hm-spin 26s linear infinite;
    mask-image: linear-gradient(135deg, black, transparent 70%); -webkit-mask-image: linear-gradient(135deg, black, transparent 70%);
}
.hm-orb span + span { right: -2%; top: -8%; width: min(90%, 560px); animation-duration: 40s; animation-direction: reverse; border-style: dashed; }
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-stage .lp-hero-window { margin-top: 200px; margin-right: 14%; width: min(100%, 540px); }

/* ---------- Dashboard-Vorführung ---------- */
.hm-hero-win .lp-win-body { min-height: 470px; }
.hm-dash { position: relative; display: flex; flex-direction: column; gap: 12px; }
.hm-greet { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hm-greet strong { font-size: var(--fs-md); letter-spacing: -0.01em; }
.hm-greet span { font-size: var(--fs-xs); color: var(--text-2); }
.hm-alex { display: flex; gap: 10px; align-items: flex-start; }
.hm-alex-text {
    flex: 1; margin: 0; padding: 8px 12px; border-radius: 4px 14px 14px 14px; min-height: 4.4em;
    background: var(--lp-a-soft); border: 1px solid var(--lp-a-line); font-size: var(--fs-sm); line-height: 1.45;
}
.hm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hm-tiles.is-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-tile {
    display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; min-width: 0;
    background: var(--surface-2); border: 1px solid transparent; transition: transform .35s ease, opacity .35s ease;
}
.hm-tile span { font-size: 11px; color: var(--text-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.hm-tile b { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--lp-a); }
.hm-tile.is-warn { background: var(--c-warning-soft); }
.hm-tile.is-warn b { color: var(--c-warning); }
.hm-tile.is-danger { background: var(--c-danger-soft); }
.hm-tile.is-danger b { color: var(--c-danger); }
.hm-dash.is-start .hm-tile { opacity: 0; transform: translateY(8px) scale(.96); }
.hm-dash .hm-tile.is-in { opacity: 1; transform: none; }

.hm-feed-head { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.hm-feed-head .icon { color: var(--lp-a); }
.hm-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-feed-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: opacity .4s ease, transform .4s ease, border-color .3s ease;
}
.hm-feed-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lp-a-soft); color: var(--lp-a); flex: none; }
.hm-feed-row .lp-lines strong { font-size: 11px; color: var(--lp-a); }
.hm-feed-row .lp-lines span { font-size: var(--fs-xs); color: var(--text); white-space: normal; line-height: 1.35; }
.hm-feed-btn { color: var(--lp-a); border-color: var(--lp-a-line); }
.hm-feed-btn.is-done { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.hm-dash.is-start .hm-feed-row { opacity: 0; transform: translateX(-12px); }
.hm-dash .hm-feed-row.is-in { opacity: 1; transform: none; }
.hm-feed-row.is-focus { border-color: var(--lp-a-line); }

/* ---------- Bühne: ein Tag ---------- */
.hm-stage-win .lp-win-body { min-height: 340px; }
.hm-s { display: flex; flex-direction: column; gap: 10px; }
.hm-s-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hm-s-head .lp-time { font-size: var(--fs-sm); font-weight: 600; color: var(--lp-a); }
.hm-s .lp-row + .lp-row { margin-top: 0; }
.hm-move { color: var(--lp-a); border-style: dashed; border-color: var(--lp-a-line); }
.hm-in { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.hm-in p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.hm-in p strong { display: block; font-size: var(--fs-xs); color: var(--text-2); }
.hm-draft { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; padding: 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); }
.hm-draft p { margin: 0; align-self: stretch; font-size: var(--fs-sm); line-height: 1.55; }
.hm-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-plan li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; font-size: var(--fs-sm); }
.hm-plan li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-plan li em { font-style: normal; font-size: 11px; color: var(--text-2); }
.hm-plan .is-event { background: var(--surface-2); border-left: 3px solid var(--border-strong); }
.hm-plan .is-task { background: var(--lp-a-soft); border-left: 3px solid var(--lp-a); }
.hm-plan .is-break { background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px); color: var(--text-2); }
.hm-note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.hm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.hm-fields div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.hm-fields div.is-hot { background: var(--lp-a-soft); border: 1px solid var(--lp-a-line); }
.hm-fields dt { font-size: var(--fs-xs); color: var(--text-2); }
.hm-fields dd { margin: 2px 0 0; font-weight: 600; }
.hm-pay { align-self: flex-start; }
.hm-done { display: flex; align-items: center; gap: 12px; }
.hm-done .lp-bar { flex: 1; }
.hm-done span { font-weight: 650; color: var(--lp-a); }

@keyframes hm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lp-js [data-step="4"] .lp-stage-scene[data-scene="4"] .hm-plan li,
.lp-js [data-step="5"] .lp-stage-scene[data-scene="5"] .hm-fields div { animation: hm-in .45s both; animation-delay: calc(var(--d) * 300ms + 200ms); }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile { animation: hm-in .45s both; }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile:nth-child(2) { animation-delay: .12s; }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile:nth-child(3) { animation-delay: .24s; }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile:nth-child(4) { animation-delay: .36s; }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile:nth-child(5) { animation-delay: .48s; }
.lp-js [data-step="1"] .lp-stage-scene[data-scene="1"] .hm-tile:nth-child(6) { animation-delay: .60s; }
.lp-js [data-step="3"] .lp-stage-scene[data-scene="3"] .hm-draft { animation: hm-in .5s both .9s; }
.lp-js [data-step="6"] .lp-stage-scene[data-scene="6"] .lp-bar i { animation: hm-bar 1.2s ease both .2s; }
@keyframes hm-bar { from { width: 0; } }

/* ---------- Alex ---------- */
.hm-principles { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hm-principles li { display: flex; gap: 14px; align-items: flex-start; }
.hm-principles strong { display: block; font-size: var(--fs-md); color: var(--lp-ink); }
.hm-principles span:not(.lp-card-icon) { display: block; margin-top: 2px; color: var(--text-2); line-height: 1.5; }
.hm-principles .lp-card-icon { flex: none; }
.hm-stream { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 30px 70px -40px var(--lp-shadow); }
.hm-msg { display: flex; gap: 10px; align-items: flex-start; transition: opacity .45s ease, transform .45s ease; }
.hm-msg > div { min-width: 0; }
.hm-msg-from { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--lp-a); margin-bottom: 3px; }
.hm-msg p { margin: 0; padding: 9px 13px; border-radius: 4px 14px 14px 14px; background: var(--lp-a-soft); border: 1px solid var(--lp-a-line); font-size: var(--fs-sm); line-height: 1.45; }
.hm-stream.is-start .hm-msg { opacity: 0; transform: translateY(10px); }
.hm-stream .hm-msg.is-in { opacity: 1; transform: none; }

/* ---------- Wunsch-Agent ---------- */
.hm-wish { display: flex; flex-direction: column; gap: 6px; }
.hm-wish label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); margin-top: 6px; }
.hm-input { min-height: 38px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); line-height: 1.45; }
.hm-input.is-area { min-height: 84px; }
.hm-wish-send { align-self: flex-start; margin-top: 8px; }
.hm-status { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: st; }
.hm-status li { position: relative; padding: 8px 6px; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2); transition: background .35s ease, color .35s ease; }
.hm-status li.is-on { background: var(--lp-a-soft); color: var(--lp-a); }
.hm-status li:last-child.is-on { background: var(--c-success-soft); color: var(--c-success); }
.hm-newagent { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--lp-a-line); background: var(--lp-a-soft); transition: opacity .45s ease, transform .45s ease; }
.hm-newagent > div { flex: 1; min-width: 0; }
.hm-newagent strong { display: block; }
.hm-newagent span:not(.lp-card-icon):not(.lp-tag) { display: block; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.4; }
.hm-wish.is-start .hm-newagent { opacity: 0; transform: translateY(10px) scale(.98); }
.hm-wish-alex { margin: 22px 0; }

/* ---------- Preise ---------- */
.hm-price { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.hm-price-base {
    position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
    padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--surface); border: 1px solid var(--lp-a-line);
}
.hm-price-base::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(400px 240px at 100% 0%, var(--lp-glow), transparent 70%); opacity: .5; }
.hm-price-num { margin: 0; font-size: clamp(44px, 5vw, 60px); font-weight: 650; letter-spacing: -0.03em; line-height: 1; color: var(--lp-ink); }
.hm-price-num small { font-size: var(--fs-md); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.hm-price-list { padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: var(--surface); border: 1px solid var(--border); }
.hm-price-head { margin: 0 0 12px; font-weight: 600; color: var(--text-2); font-size: var(--fs-sm); }
.hm-price-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hm-price-list li + li { border-top: 1px solid var(--border); }
.hm-price-list a { display: flex; align-items: center; gap: 12px; padding: 11px 4px; color: var(--text); text-decoration: none; border-radius: 10px; transition: background .2s ease; }
.hm-price-list a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.hm-price-list strong { flex: 1; font-weight: 600; }
.hm-price-val { font-size: var(--fs-sm); white-space: nowrap; }

/* ---------- Was ist Automagio? ---------- */
.hm-what-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-what-win .lp-win-body { padding: 16px; }
.hm-what { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; }
.hm-what-cat ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-cat-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); transition: border-color .3s ease; }
.hm-cat-row strong { flex: 1; min-width: 0; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-cat-row .hm-feed-icon { width: 26px; height: 26px; border-radius: 8px; }
.hm-switch { position: relative; flex: none; width: 30px; height: 18px; border-radius: 99px; background: var(--border-strong); transition: background .25s ease; }
.hm-switch i { position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px var(--lp-shadow); transition: transform .25s ease; }
.hm-switch.is-on { background: var(--c-accent); }
.hm-switch.is-on i { transform: translateX(12px); }
.hm-cat-row.is-focus { border-color: var(--lp-a-line); }
.hm-what-dash { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.hm-what-dash .hm-feed-head { margin: 0; }
.hm-brief { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 11px; background: var(--surface); border-left: 3px solid var(--c-primary); font-size: var(--fs-xs); }
.hm-brief .icon { color: var(--c-primary); }
.hm-brief strong { flex: 1; }
.hm-brief-dots { display: flex; gap: 4px; }
.hm-brief-dots i { width: 18px; height: 10px; border-radius: 3px; background: var(--c-primary-soft); }
.hm-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hm-widget { display: flex; flex-direction: column; gap: 5px; padding: 9px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); min-width: 0; transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1.2); }
.hm-widget-head { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--lp-a); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hm-widget b { font-size: 11px; font-weight: 600; line-height: 1.3; }
.hm-widget i { display: block; height: 5px; border-radius: 3px; background: var(--surface-2); }
.hm-widget i + i { width: 60%; }
.hm-what .hm-alex-text { min-height: 0; font-size: var(--fs-xs); }
.hm-what.is-start .hm-widget { opacity: 0; transform: scale(.85); }
.hm-what .hm-widget.is-in { opacity: 1; transform: none; }
.hm-what.is-start .hm-brief-dots i { background: var(--surface-2); }
.hm-pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.hm-pillars li { display: flex; gap: 16px; align-items: flex-start; }
.hm-pillars .lp-story-n { background: var(--lp-a); color: var(--lp-on-a); border-color: transparent; }
.hm-pillars h3 { margin: 6px 0 6px; font-size: var(--fs-lg); letter-spacing: -0.02em; color: var(--lp-ink); }
.hm-pillars p { margin: 0; color: var(--text-2); line-height: 1.55; }
.hm-what-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); }
.hm-what-foot span, .hm-what-foot a { display: inline-flex; align-items: center; gap: 8px; }
.hm-what-foot .icon { color: var(--lp-a); }
.hm-what-foot a { font-weight: 600; color: var(--lp-a); }
@media (max-width: 1080px) { .hm-what-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .hm-what { grid-template-columns: 1fr; }
    .hm-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .hm-stage .lp-hero-window { margin-right: 0; }
}
@media (max-width: 900px) {
    .hm-stage { min-height: 0; }
    .hm-object { width: 64%; right: -8%; top: -6%; }
    .hm-orb { display: none; }
    .hm-stage .lp-hero-window { margin: 150px 0 0; width: 100%; }
    .hm-price { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-tiles.is-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-feed-row { grid-template-columns: auto minmax(0, 1fr); }
    .hm-feed-btn { grid-column: 2; justify-self: start; }
    .hm-fields { grid-template-columns: 1fr; }
    .hm-hero-win .lp-win-body { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-orb span { animation: none; }
}