/* K-MKT-28 — Hilfe-Center (contentmonster.de/hilfe). Nur für marketing/hilfe/*, baut auf style.css auf. */

.hilfe-kopf { background: var(--dark-0); color: var(--t-w); padding: 28px 0 56px; }
.hilfe-schmal { max-width: 860px; }
.hilfe-kopf .label { margin-bottom: 14px; }
.hilfe-h1 { font-size: clamp(1.75rem, 7vw, 3.4rem); line-height: 1.1; margin: 0 0 14px; overflow-wrap: break-word; } /* „CONTENTMONSTER®“ passt bei 320 px in eine Zeile */
.hilfe-h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin: 0 0 24px; }
.hilfe-kurz { font-size: 1.12rem; line-height: 1.6; color: var(--t-w2); margin: 0 0 28px; max-width: 680px; }
.hilfe-kopf [hidden], .hilfe-liste-wrap [hidden] { display: none !important; }

/* Video: quer überall, hochkant nur am Handy im Hochformat. Breite und Höhe stehen im HTML (kein Springen). */
.hilfe-video { margin: 0 0 28px; }
.hilfe-video video { display: block; width: 100%; height: auto; border-radius: 14px; background: #000; border: 1px solid var(--bord-d2); }
.hilfe-video-hoch { display: none !important; }
@media (max-width: 699px) and (orientation: portrait) {
  .hilfe-video-quer { display: none !important; }
  .hilfe-video-hoch { display: block !important; max-height: 82vh; width: auto !important; max-width: 100%; margin: 0 auto; }
}

.hilfe-text p { font-size: 1.05rem; line-height: 1.7; color: var(--t-w2); margin: 0 0 14px; }
.hilfe-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hilfe-knoepfe .btn { min-height: 48px; }
.hilfe-knoepfe button.btn { font: inherit; font-family: var(--font-h); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }

/* Schritte */
.hilfe-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.hilfe-schritte li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px; border-radius: 14px; background: var(--dark-2); border: 1px solid var(--bord-d); }
.hilfe-nr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-glow-m); color: var(--pink-300); font-family: var(--font-h); font-weight: 700; }
.hilfe-schritte h3 { font-size: 1.1rem; margin: 6px 0 6px; }
.hilfe-schritte p { margin: 8px 0 0; color: var(--t-w2); line-height: 1.6; }
.hilfe-menue { display: inline-block; font-size: 0.85rem; color: var(--t-w2); background: var(--dark-4); border-radius: 6px; padding: 3px 8px; }

/* Fuß */
.hilfe-fuss { padding: 40px 0; }
.hilfe-fuss .hilfe-schmal { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.hilfe-weiter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pink-300); font-family: var(--font-h); font-weight: 600; }
.hilfe-weiter svg { width: 16px; height: 16px; }

/* Übersicht: Suche und Kacheln */
.hilfe-suche { display: flex; align-items: center; gap: 10px; max-width: 560px; padding: 0 16px; min-height: 52px; border-radius: 12px; background: var(--dark-2); border: 1px solid var(--bord-d2); color: var(--t-w3); }
.hilfe-suche:focus-within { border-color: var(--pink-400); }
.hilfe-suche input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--t-w); font: 16px var(--font-b); padding: 14px 0; }
.hilfe-suche input::placeholder { color: var(--t-w4); }
.hilfe-liste-wrap { padding-top: 48px; }
.hilfe-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.hilfe-kachel { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--dark-2); border: 1px solid var(--bord-d); color: var(--t-w); transition: border-color .2s ease, transform .2s ease; }
.hilfe-kachel:hover, .hilfe-kachel:focus-visible { border-color: rgba(233,30,99,.45); transform: translateY(-2px); }
.hilfe-kachel-bild { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.hilfe-kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hilfe-kachel-play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--pink-500); display: grid; place-items: center; box-shadow: 0 6px 24px rgba(233,30,99,.45); }
.hilfe-kachel-dauer { position: absolute; right: 10px; bottom: 10px; font: 600 0.8rem var(--font-b); background: rgba(5,5,6,.82); color: #fff; padding: 3px 8px; border-radius: 6px; }
.hilfe-kachel-text { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; }
.hilfe-kachel-titel { font: 700 1.2rem/1.25 var(--font-h); }
.hilfe-kachel-kurz { color: var(--t-w2); line-height: 1.55; }
.hilfe-kachel-mehr { color: var(--t-w3); font-size: 0.9rem; }
.hilfe-leer { color: var(--t-w2); margin-top: 8px; }
.hilfe-leer a { color: var(--pink-300); text-decoration: underline; }

/* Hinweis auf Funktionen-Seiten (marketing/funktionen/_template.php, $feature['hilfe']) */
.hilfe-hinweis { display: grid; grid-template-columns: 136px 1fr; gap: 16px; align-items: center; max-width: 760px; margin: 0 auto 48px; padding: 12px; border-radius: 16px; background: var(--dark-2); border: 1px solid var(--bord-d2); color: var(--t-w); text-align: left; }
.hilfe-hinweis:hover { border-color: rgba(233,30,99,.45); }
.hilfe-hinweis .hilfe-kachel-bild { border-radius: 10px; overflow: hidden; }
.hilfe-hinweis .hilfe-kachel-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.hilfe-hinweis b { display: block; font: 700 1.05rem/1.3 var(--font-h); }
.hilfe-hinweis small { display: block; color: var(--t-w3); font-size: 0.9rem; margin-top: 4px; }
@media (max-width: 479px) { .hilfe-hinweis { grid-template-columns: 104px 1fr; } }

.hilfe-leer-seite { padding-top: 140px; }

/* Brotkrumen: style.css setzt `padding: 100px 0 0` und nimmt damit dem .container den Seitenrand; lange Titel umbrechen */
.breadcrumb.hilfe-pfad { padding-left: var(--container-px); padding-right: var(--container-px); flex-wrap: wrap; row-gap: 4px; }

/* Übersicht nach Bereichen: Sprungleiste (am Handy waagrecht scrollbar, die Seite selbst bleibt ohne Querüberlauf) */
.hilfe-sprung { display: flex; gap: 10px; overflow-x: auto; margin: 0 0 40px; padding: 2px 0 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.hilfe-sprung a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--dark-2); border: 1px solid var(--bord-d2); color: var(--t-w); font: 600 0.95rem var(--font-h); white-space: nowrap; }
.hilfe-sprung a:hover, .hilfe-sprung a:focus-visible { border-color: rgba(233,30,99,.45); }
.hilfe-sprung span { font: 600 0.8rem var(--font-b); color: var(--pink-300); background: var(--pink-glow-m); border-radius: 999px; padding: 2px 8px; }
.hilfe-bereich { scroll-margin-top: 96px; }
.hilfe-bereich + .hilfe-bereich { margin-top: 56px; }
.hilfe-bereich-titel { display: flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0 0 8px; }
.hilfe-bereich-titel svg { flex: 0 0 auto; color: var(--pink-300); }
.hilfe-bereich-satz { color: var(--t-w2); line-height: 1.6; margin: 0 0 22px; max-width: 680px; }

/* Wissen für deine KI: Kasten unter den Bereichen, Hinweis unter der Suche */
.hilfe-ki { scroll-margin-top: 96px; margin-top: 64px; padding: 24px; border-radius: 16px; background: var(--dark-2); border: 1px solid var(--bord-d2); }
.hilfe-ki .hilfe-bereich-satz { margin-bottom: 0; }
.hilfe-ki .hilfe-knoepfe a.btn { display: inline-flex; align-items: center; gap: 8px; }
.hilfe-ki-hinweis { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--pink-300); font-family: var(--font-h); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }