/* Kasten "Wichtig" ueber "Letzte Beitraege" + Knopf im Thema (Weekend 16.10.2026). Eingebunden ueber homepin_css().
   Nur Variablen aus style.css/site2.css, damit der Kasten jede Farbaenderung der Seite mitmacht. */

.hp-box{margin:0 0 24px;background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:12px;padding:12px 16px 4px;min-width:0}
.hp-head{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:'Oswald',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:2px;text-transform:uppercase;color:var(--gold);line-height:1.4}
.hp-list{list-style:none;margin:0;padding:0}
.hp-list li{margin:0;padding:0}
.hp-list li+li{border-top:1px solid var(--line)}
.hp-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding:10px 0;color:var(--tx);text-decoration:none;min-width:0}
.hp-row:hover .hp-ttl,.hp-row:focus-visible .hp-ttl{color:var(--gold)}
.hp-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.hp-ttl{flex:1 1 240px;min-width:0;font-family:'Oswald',sans-serif;font-weight:600;font-size:15.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.hp-lock{margin-right:6px;font-size:.85em}
.hp-sub{flex:none;color:var(--mut);font-size:12.5px;white-space:nowrap}
.hp-exp{flex:none;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line);border-radius:20px;padding:1px 9px;white-space:nowrap}

/* Abzeichen in der Themen-Kopfzeile (gleiche Form wie .flag.pin) */
.flag.hp-flag{background:transparent;color:var(--gold);border:1px solid var(--gold)}

/* Knopf im Thema */
.hp-form{gap:6px;align-items:center}
.hp-days{width:84px;padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-size:13px}
.hp-days:focus{outline:none;border-color:var(--gold)}
.hp-note{font-size:12.5px;color:var(--mut);white-space:nowrap}

/* Handy: Titel darf umbrechen statt abgeschnitten zu werden, Formular bleibt eine Zeile mit Umbruch */
@media(max-width:560px){
  .hp-box{padding:10px 12px 2px}
  .hp-ttl{flex-basis:100%;white-space:normal;overflow-wrap:anywhere}
  .hp-sub{white-space:normal}
  .hp-form{flex:0 0 auto;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
  .hp-days{flex:0 0 84px}
}