/* Startseite (resources/views/home/*). Präfix hm-, Tokens aus ui.css. Der Hero bleibt in beiden Modi gelb. */
.hm-hero{position:relative;overflow:hidden;padding:72px 0 clamp(110px,12vw,170px);background:var(--ui-y);color:#0a0e17;font-family:var(--ui-font)}
.hm-hero h1{margin:0 0 1rem;font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:700;line-height:1.12;color:#0a0e17}
.hm-hero h1 em{font-style:normal;background:linear-gradient(transparent 60%,rgba(255,255,255,.85) 60%,rgba(255,255,255,.85) 92%,transparent 92%)}
.hm-lead{max-width:560px;margin:0 0 1.6rem;font-size:1.08rem;color:#2c2a1d}
.hm-ctas{display:flex;flex-wrap:wrap;gap:10px}
.hm-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1.25rem;border:2px solid #0a0e17;border-radius:10px;background:#0a0e17;color:var(--ui-y);font-weight:600;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.hm-btn:hover,.hm-btn:focus-visible{background:#fff;border-color:#fff;color:#000}
.hm-btn:focus-visible{outline:2px solid #0a0e17;outline-offset:2px}
.hm-btn--line{background:transparent;color:#0a0e17}
.hm-btn--line:hover,.hm-btn--line:focus-visible{background:#0a0e17;border-color:#0a0e17;color:var(--ui-y)}
.hm-trust{display:flex;flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:0;list-style:none;font-size:.86rem;color:#2c2a1d}
.hm-trust b{color:#0a0e17}
.hm-trust a{color:inherit;text-decoration:none}
.hm-trust a:hover,.hm-trust a:focus-visible{text-decoration:underline}
.hm-stars{letter-spacing:1px;color:#0a0e17}
.hm-art{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;position:relative;z-index:1}
/* Wolke: die bekannte Grafik als Maske, gefüllt mit der Farbe der Seite darunter (hell weiß, dunkel dunkel) */
.hm-cloud{position:absolute;left:-6px;right:-6px;bottom:-1px; /* über die Ränder, sonst blitzt am Rand der Grafik das Gelb durch */ aspect-ratio:7954/870;background:var(--ui-bg);
  pointer-events:none; /* auf breiten Bildschirmen reicht der Kasten über die Buttons, Klicks gehen durch */
  -webkit-mask:url('/assets/images/home/bottom-01.webp') bottom center/100% auto no-repeat;
  mask:url('/assets/images/home/bottom-01.webp') bottom center/100% auto no-repeat}
@media (max-width:991.98px){.hm-art{max-width:320px}}
@media (prefers-reduced-motion:reduce){.hm-btn{transition:none}}

/* Community und Support */
.hm-community-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
@media (max-width:991.98px){.hm-community-grid{grid-template-columns:1fr}}
.hm-discord{display:grid;grid-template-columns:1.25fr 1fr;min-height:300px;overflow:hidden;border:1px solid var(--ui-line);border-radius:22px;background:var(--ui-card);color:var(--ui-text)}
@media (max-width:767.98px){.hm-discord{grid-template-columns:1fr}}
.hm-discord-text{display:flex;flex-direction:column;justify-content:center;padding:30px}
.hm-discord-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;background:#5865f2;color:#fff;font-size:1.3rem}
.hm-discord h3{margin:0 0 .5rem;font-size:1.4rem;font-weight:700;color:var(--ui-text)}
.hm-discord p{margin:0 0 1.2rem;color:var(--ui-mute)}
.hm-discord-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;border-radius:10px;background:#5865f2;color:#fff;font-weight:700;text-decoration:none;transition:background-color .15s ease}
.hm-discord-btn:hover,.hm-discord-btn:focus-visible{background:#4752c4;color:#fff}
.hm-discord-btn:focus-visible{outline:2px solid var(--ui-text);outline-offset:2px}
.hm-discord-art{min-height:180px;background:#3b2bb0 url('/assets/images/home/discord.webp') right center/cover no-repeat}
.hm-help{display:grid;gap:14px}
.hm-help-card{display:flex;flex-direction:column;padding:20px;border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-card);color:var(--ui-text)}
.hm-help-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:12px;border-radius:12px;background:var(--ui-y-soft);color:var(--ui-text)}
.hm-help-card h3{margin:0 0 4px;font-size:1rem;font-weight:700;color:var(--ui-text)}
.hm-help-card p{margin:0 0 10px;font-size:.86rem;color:var(--ui-mute)}
.hm-help-card .ui-link{margin-top:auto;align-self:flex-start}
@media (prefers-reduced-motion:reduce){.hm-discord-btn{transition:none}}