@charset "utf-8";
/* =====================================================================
   HabboWert – Modern Layer + Dark Mode + Responsive
   Liegt ÜBER template.css/general.css. Nutzt CSS-Variablen, damit ein
   einziger [data-theme="dark"]-Switch die ganze Seite umfärbt.
   ===================================================================== */

/* Palette "EISNACHT" - das eigene Design (löst die rarewert-Anlehnung ab).
   Abgenommen vom Betreiber am 29.07.2026 über die Vorlage
   D:\Preisliste-Designvorlagen\vorlage-l-eisnacht.html.
   Grundidee: kühles dunkles Stahlblau, EISBLAU als einzige Akzentfarbe,
   Licht (Glow) markiert alles Interaktive. Dunkel ist die Vorgabe;
   der Hellmodus ist dieselbe Welt bei Tag (Eis auf Weiß, kaum Glow). */
:root{
  --hw-accent:#0e8fc0;      --hw-accent-2:#0b76a0;   --hw-accent-soft:#e3f4fc;
  --hw-page:#e8eef7;
  --hw-card:#ffffff;        --hw-card-2:#f1f6fc;      --hw-card-3:#e2ecf7;
  --hw-topbar:#ffffff;
  --hw-text:#1d2a3c;        --hw-text-soft:#4c6076;   --hw-text-mute:#7d92aa;
  --hw-border:#d8e4f2;      --hw-border-strong:#b9cde4;
  --hw-shadow:0 8px 30px -10px rgba(29,42,60,.22);
  --hw-shadow-sm:0 3px 12px -4px rgba(29,42,60,.16);
  --hw-radius:12px;         --hw-radius-sm:9px;
  --hw-price-bg:#e8f3fb;
  --hw-good:#1f9d57;        --hw-bad:#d6483a;
  --hw-glow:0 0 0 rgba(0,0,0,0);            /* Glow gibt es nur nachts */
  --hw-glow-stark:0 0 0 rgba(0,0,0,0);
}
html[data-theme="dark"]{
  --hw-accent:#4dd8ff;      --hw-accent-2:#7ae9ff;   --hw-accent-soft:#12293e;
  --hw-page:#0a1220;
  --hw-card:#101c30;        --hw-card-2:#16263e;      --hw-card-3:#1c3050;
  --hw-topbar:#0c1728;
  --hw-text:#e6eef8;        --hw-text-soft:#93a8c4;   --hw-text-mute:#5e7396;
  --hw-border:#20334e;      --hw-border-strong:#2c4a70;
  --hw-shadow:0 10px 34px -8px rgba(0,0,0,.75);
  --hw-shadow-sm:0 4px 14px -4px rgba(0,0,0,.6);
  --hw-price-bg:#16263e;
  --hw-good:#4fd08a;        --hw-bad:#ff6b5e;
  --hw-glow:0 0 14px rgba(77,216,255,.22);  /* der Eisnacht-Schimmer */
  --hw-glow-stark:0 0 20px rgba(77,216,255,.45);
}

/* ---- Grundflächen ---- */
html,body{ scroll-behavior:smooth; }
body{
  background-color:var(--hw-page);
  color:var(--hw-text);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
#bg{ background-color:var(--hw-page); }
html[data-theme="dark"] #bg{
  background-image:none;
  background:linear-gradient(180deg,#0e161f 0%,#12202c 100%);
}
a{ transition:color .18s ease, background-color .18s ease, border-color .18s ease; }

/* ---- Topbar ---- */
#top{
  background-color:var(--hw-topbar);
  border-bottom:1px solid var(--hw-border);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.35);
  transition:background-color .35s ease, border-color .35s ease;
}
#top_inner a{ color:var(--hw-accent); font-weight:500; border-radius:6px 6px 0 0; }
#top_inner a:hover{ background:var(--hw-accent-soft); border-bottom:2px solid var(--hw-accent); }
#login_button,#reg_button{ background:var(--hw-accent); box-shadow:var(--hw-shadow-sm); }
#login_button:hover,#reg_button:hover{ background:var(--hw-accent-2); }
#member_area,#member_area a{ color:var(--hw-link); }
#member_area div{ background:var(--hw-card); border-color:var(--hw-border); box-shadow:var(--hw-shadow); border-radius:0 0 10px 10px; overflow:hidden; }
#member_area div a{ background:var(--hw-card); color:var(--hw-text-soft); }
#member_area div a:hover{ background:var(--hw-accent-soft); color:var(--hw-link); text-decoration:none; }

/* ---- Theme-Toggle Button ---- */
#hw-theme-toggle{
  position:absolute; top:11px; right:290px;
  width:34px; height:30px; line-height:30px; text-align:center;
  border:1px solid var(--hw-border-strong); border-radius:8px;
  background:var(--hw-card-2); color:var(--hw-accent); cursor:pointer;
  font-size:15px; z-index:11; user-select:none; padding:0;
  transition:all .2s ease;
}
#hw-theme-toggle:hover{ background:var(--hw-accent-soft); transform:translateY(-1px); }

/* ---- Header / Suche ---- */
#header_search{
  background:rgba(255,255,255,.97);
  border-radius:var(--hw-radius);
  box-shadow:var(--hw-shadow);
  border:1px solid rgba(255,255,255,.6);
}
html[data-theme="dark"] #header_search{ background:rgba(26,36,47,.96); border-color:var(--hw-border); }
html[data-theme="dark"] #header_search #searchinput{ color:var(--hw-text); }
/* Alter versteckter Kategorie-Trigger – durch #hw-catbar ersetzt */
#header_cats_trigger{ display:none; }
#header_cats{ background:var(--hw-card); border-color:var(--hw-border); box-shadow:var(--hw-shadow); border-radius:10px; }
#header_cats a{ color:var(--hw-text-soft); border-bottom:1px solid var(--hw-border); }
#header_cats a:hover{ background:var(--hw-accent-soft); color:var(--hw-accent); }

/* ---- Live-Such-Dropdown ---- */
#search_results{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:14px; box-shadow:var(--hw-shadow);
  padding:6px; z-index:700; max-height:340px; overflow-y:auto; text-align:left;
}
.hw-sr-item{
  display:flex; align-items:center; gap:11px; padding:7px 9px;
  border-radius:10px; text-decoration:none; color:var(--hw-text);
  transition:background-color .12s ease;
}
.hw-sr-item:hover{ background:var(--hw-accent-soft); }
.hw-sr-img{
  width:40px; height:40px; flex:0 0 40px;
  background:var(--hw-card-2) center/contain no-repeat;
  border:1px solid var(--hw-border); border-radius:8px; image-rendering:auto;
}
.hw-sr-info{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.hw-sr-name{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-sr-cat{ font-size:10px; color:var(--hw-text-mute); }
.hw-sr-price{ font-weight:700; color:var(--hw-link); font-size:13px; white-space:nowrap; }
.hw-sr-empty{ padding:16px; text-align:center; color:var(--hw-text-mute); font-size:12px; }

/* ---- Kategorie-Leiste ---- */
#hw-catbar{
  background:var(--hw-card); border-bottom:1px solid var(--hw-border);
  box-shadow:var(--hw-shadow-sm); margin-bottom:22px;
  transition:background-color .35s ease, border-color .35s ease;
}
#hw-catbar-inner{
  max-width:990px; margin:0 auto; padding:9px 14px;
  display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
  scrollbar-width:thin;
}
#hw-catbar-inner::-webkit-scrollbar{ height:6px; }
#hw-catbar-inner::-webkit-scrollbar-thumb{ background:var(--hw-border-strong); border-radius:6px; }
#hw-catbar a{
  flex:0 0 auto; display:inline-block; padding:7px 15px; border-radius:20px;
  background:var(--hw-card-2); color:var(--hw-text-soft); text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--hw-border); transition:all .15s ease;
}
#hw-catbar a:hover{ background:var(--hw-accent-soft); color:var(--hw-accent); border-color:var(--hw-accent); }
#hw-catbar a.active{ background:var(--hw-accent); color:#fff; border-color:var(--hw-accent); box-shadow:var(--hw-shadow-sm); }

/* ---- Content-Karten ---- */
#content,.content_wrap,#banner_box{
  background:var(--hw-card);
  border:1px solid var(--hw-border);
  border-radius:var(--hw-radius);
  box-shadow:var(--hw-shadow);
  transition:background-color .35s ease, border-color .35s ease;
}
.content_frame,.content_frame_400{ border:1px solid var(--hw-border); background:var(--hw-card-2); border-radius:var(--hw-radius); }

/* ---- Überschriften ---- */
h1,#popular_furnis_headline,.content_headline h1,.content_headline_big h1,
#registration_header,#ranking_header,#offers_headline{ color:var(--hw-heading); }
html[data-theme="dark"] h1{ text-shadow:none; }

/* ---- Furni-Boxen (Kernkomponente) ---- */
.furni_box{
  width:176px; height:172px;
  border:1px solid var(--hw-border);
  border-radius:var(--hw-radius);
  background-color:var(--hw-card);
  box-shadow:var(--hw-shadow-sm);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.furni_box:hover{
  transform:translateY(-4px);
  box-shadow:var(--hw-shadow);
  border-color:var(--hw-accent);
}
.furni_box_name{
  background:linear-gradient(180deg,rgba(38,66,86,.94),rgba(38,66,86,.86));
  border-radius:0; font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 6px; min-height:16px; backdrop-filter:blur(2px);
  left:0; right:0; width:auto; box-sizing:border-box;
}
.furni_name_green{ background:linear-gradient(180deg,rgba(31,120,45,.94),rgba(31,120,45,.86)); }
.furni_name_red{ background:linear-gradient(180deg,rgba(200,58,66,.94),rgba(200,58,66,.86)); }
.furni_box_price{
  background:var(--hw-price-bg); color:var(--hw-text); width:100%;
  font-weight:700; border-radius:0; border-top:1px solid var(--hw-border);
}
.furni_box_change{ background:var(--hw-card-2); border-color:var(--hw-border-strong); color:var(--hw-text-soft); border-radius:6px; }
.price_up{ color:var(--hw-good); } .price_down{ color:var(--hw-bad); }

.furni_icon,.square_furni_icon{
  border:1px solid var(--hw-border); background-color:var(--hw-card-2);
  border-radius:8px; transition:transform .14s ease, background-color .14s ease;
}
.furni_icon:hover,.square_furni_icon:hover{ background-color:var(--hw-accent-soft); transform:translateY(-2px); }

/* ---- Sidebar-Boxen ---- */
#ranking,#add_to_inv,#ticker,#all_furni_value,#all_furni_value_disc,#home_ad{
  background:var(--hw-card-2); border-radius:var(--hw-radius);
}
#ranking_header{ color:var(--hw-heading); }
.ranking{ color:var(--hw-text-soft); } .ranking:hover{ background:var(--hw-accent-soft); }

/* ---- Debatte / Kommentare / Vorschauen ---- */
.debate_comment,.home_preview_forum,.home_preview_debate_comment,.preview_debate_comment,
.profil_new_posts,#debate_furni_box,#debate_actions_box,#profil_box,#profil_box_infos{
  background:var(--hw-card-2); border-color:var(--hw-border);
}
.debate_comment:nth-child(2n+1),.home_preview_forum:nth-child(2n+1),.profil_new_posts:nth-child(2n+1){ background:var(--hw-card-3); }
.debate_comment_name_user{ background:var(--hw-card-3); color:var(--hw-link); }
.home_preview_forum:hover,.preview_debate_comment:hover,.profil_new_posts:hover,.home_preview_debate_comment:hover{ border-color:var(--hw-accent); }
.debate_furni_actions:hover{ background:var(--hw-accent-soft); border-radius:6px; }

/* ---- Formulare ---- */
input[type=text],input[type=password],input[type=email],textarea,.styled_select{
  background:var(--hw-card); color:var(--hw-text);
  border:1px solid var(--hw-border-strong); border-radius:9px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,textarea:focus{
  border-color:var(--hw-accent);
  box-shadow:0 0 0 3px var(--hw-accent-soft);
}
input[type=submit],input[type=button]{
  background:var(--hw-accent); color:#fff; border:none; border-radius:9px;
  font-family:Verdana,Geneva,"DejaVu Sans",Arial,sans-serif; font-weight:600; text-shadow:none;
  box-shadow:var(--hw-shadow-sm); cursor:pointer; transition:all .18s ease;
}
input[type=submit]:hover,input[type=button]:hover{ background:var(--hw-accent-2); transform:translateY(-1px); }

/* ---- Tabellen ---- */
.simple_table{ background:var(--hw-card); border-color:var(--hw-border); color:var(--hw-text); box-shadow:var(--hw-shadow-sm); text-shadow:none; }
.simple_table td{ background:var(--hw-card); border-color:var(--hw-border); text-shadow:none; }
.simple_table tr:nth-child(2n+2) td{ background:var(--hw-card-2); }
.simple_table tr:hover td{ background:var(--hw-accent-soft); }
.simple_table th{ background:linear-gradient(180deg,var(--hw-accent),var(--hw-accent-2)); border-color:var(--hw-accent-2); text-shadow:none; }

/* ---- Footer ---- */
#online_viewer{ background:linear-gradient(180deg,var(--hw-accent-2),var(--hw-accent)); }
html[data-theme="dark"] #online_viewer{ background:var(--hw-card-2); border-top:1px solid var(--hw-border); }
#footer{ background:var(--hw-accent-2); }
html[data-theme="dark"] #footer{ background:#141c25; color:var(--hw-text-soft); }
.online_user{ background:rgba(255,255,255,.14); border-radius:8px; }
.online_user:hover{ background:#fff; }

/* ---- Pagination ---- */
.pagination a{ background:var(--hw-card); color:var(--hw-link); border-color:var(--hw-border); }
.pagination a:hover{ background:var(--hw-accent-soft); }
.pagination a.active{ background:var(--hw-accent); color:#fff; border-color:var(--hw-accent); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1010px){
  html,body{ overflow-x:hidden; min-width:0; }
  #wrap{ width:auto; max-width:990px; box-sizing:border-box; padding:0 14px; margin:0 auto; }
  #content,.content_wrap,#banner_box{ width:auto; max-width:100%; box-sizing:border-box; }
  #header,#header_image{ width:100%; max-width:100%; box-sizing:border-box; }
}
@media (max-width:820px){
  #home_content_left,#home_content_right,#content_left,#content_right{
    width:100%; max-width:100%; margin-right:0; display:block; box-sizing:border-box;
  }
  #home_content_right{ margin-top:24px; }
  .furni_box{ display:block; width:100%; max-width:340px; height:auto; aspect-ratio:16/10; margin:0 auto 14px; box-sizing:border-box; }
  #header{ height:auto; }
  #header_image{ height:196px; background-size:contain; background-position:center 8px; padding:0; }
  #logolink{ left:0; right:0; top:0; width:auto; height:150px; }
  #header_search{ top:auto; bottom:10px; left:5%; right:5%; width:auto; box-sizing:border-box; }
  #header_search #searchinput{ width:100%; box-sizing:border-box; padding-right:34px; }
}
@media (max-width:560px){
  #top{ height:auto; padding-bottom:6px; }
  #top_inner{ height:auto; text-align:center; }
  #top_inner a{ padding:6px 12px; height:auto; line-height:1.6; }
  #top_inner a:first-child{ margin-left:0; }
  #login_button,#reg_button,#oh_login_button{ position:static; display:inline-block; margin:6px 4px; }
  #member_area{ position:static; display:inline-block; height:auto; line-height:1.6; border:none; }
  #member_area div{ position:absolute; }
  #hw-theme-toggle{ position:static; display:inline-block; margin:6px 4px; vertical-align:middle; }
  #news-slideshow,#news-slideshow .bjqs{ width:100%!important; }
  #popular_furnis .furni_icon{ margin-right:8px; }
  .content_headline_big h1{ font-size:26px; }
  /* Fuß: fixe 90px-Zeile sprengt sonst die Links über den Rand -> umbrechen. */
  #footer{ height:auto; line-height:1.7; padding:14px 12px; }
  .hw-fuss-stat{ line-height:1.5; }
}

/* ---- Formular-Seiten: Dark Mode ---- */
html[data-theme="dark"] #login_box{ background:rgba(24,33,43,.96); }
html[data-theme="dark"] #login_box #lower{ background:var(--hw-card-3); border-color:var(--hw-border); }
html[data-theme="dark"] #login_box .check{ color:var(--hw-text-soft); text-shadow:none; }
html[data-theme="dark"] #registration_form{ background:var(--hw-card-2); }
html[data-theme="dark"] #registration_image{ color:var(--hw-text); }

/* ---- Formular-Seiten: Responsive (Login / Registrierung) ---- */
@media (max-width:820px){
  #login_background{ height:auto!important; background-image:none!important; background:var(--hw-card-2)!important; border:1px solid var(--hw-border)!important; padding:16px 0; }
  #login_box{ float:none; margin:0 auto!important; width:92%!important; max-width:360px; }
  #login_box input[type=text],#login_box input[type=password]{ width:calc(100% - 40px)!important; box-sizing:border-box; }
  #registration_image{ float:none!important; width:auto!important; margin:0 auto 16px!important; max-width:360px; box-sizing:border-box; }
  #registration_form{ float:none!important; width:auto!important; max-width:440px; margin:0 auto 16px; box-sizing:border-box; }
  #registration_form input{ width:100%!important; box-sizing:border-box; }
  .settings_box1,.settings_box2{ display:block; width:auto!important; height:auto; margin:0 0 16px; }
  .team_member{ width:calc(50% - 10px); box-sizing:border-box; }
}

/* ---- Cookie-Consent (Google cookiechoices) modernisiert: Bottom-Leiste, dark-tauglich ---- */
#cookieChoiceInfo{
  position:fixed!important; top:auto!important; bottom:0!important; left:0!important; right:0!important;
  width:auto!important; box-sizing:border-box;
  background:var(--hw-card)!important; color:var(--hw-text)!important;
  border-top:1px solid var(--hw-border)!important;
  box-shadow:0 -8px 26px -12px rgba(0,0,0,.35)!important;
  padding:12px 18px!important; font-size:13px!important; text-align:center!important; z-index:9999!important;
}
#cookieChoiceInfo span{ color:var(--hw-text-soft)!important; }
#cookieChoiceDismiss{
  display:inline-block!important; margin-left:16px!important;
  background:var(--hw-accent)!important; color:#fff!important; text-decoration:none!important;
  padding:6px 18px!important; border-radius:9px!important; font-weight:600;
  transition:background-color .18s ease;
}
#cookieChoiceDismiss:hover{ background:var(--hw-accent-2)!important; }

/* ---- Ranglisten / Statistiken ---- */
.hw-rank-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:6px; }
.hw-rank-card{
  background:var(--hw-card-2); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); overflow:hidden; box-shadow:var(--hw-shadow-sm);
}
.hw-rank-head{ padding:12px 15px; font-size:15px; font-weight:700; color:#fff; letter-spacing:.02em; }
.hw-rank-head-gold{ background:linear-gradient(135deg,#e6a817,#c8860a); }
.hw-rank-head-trend{ background:linear-gradient(135deg,#2fa85c,#1f8248); }
.hw-rank-head-views{ background:linear-gradient(135deg,var(--hw-accent),var(--hw-accent-2)); }
.hw-rank-list{ padding:6px; }
.hw-rank-row{
  display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px;
  text-decoration:none; color:var(--hw-text); transition:background-color .12s ease;
}
.hw-rank-row:hover{ background:var(--hw-accent-soft); }
.hw-rank-num{ flex:0 0 20px; text-align:center; font-weight:800; font-size:13px; color:var(--hw-text-mute); }
.hw-rank-num-1{ color:#e6a817; } .hw-rank-num-2{ color:#9aa7b2; } .hw-rank-num-3{ color:#cd7f32; }
.hw-rank-img{
  flex:0 0 36px; width:36px; height:36px;
  background:var(--hw-card) center/contain no-repeat;
  border:1px solid var(--hw-border); border-radius:7px; image-rendering:auto;
}
.hw-rank-name{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; font-size:13px; font-weight:600; overflow:hidden; }
.hw-rank-name small{ font-size:10px; color:var(--hw-text-mute); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-rank-val{ font-weight:700; color:var(--hw-link); font-size:13px; white-space:nowrap; }
.hw-trend{ font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.hw-trend.up{ color:var(--hw-good); background:rgba(47,168,92,.14); }
.hw-trend.down{ color:var(--hw-bad); background:rgba(210,64,72,.14); }
.hw-rank-views{ font-size:11px; color:var(--hw-text-mute); font-weight:600; white-space:nowrap; }
.hw-rank-empty{ padding:22px; text-align:center; color:var(--hw-text-mute); font-size:12px; }
@media (max-width:820px){ .hw-rank-grid{ grid-template-columns:1fr; } }

/* ---- Möbel Besitzer (Live-Hotel-Daten von oldhabbo.to) ---- */
#hw-owners{
  background:var(--hw-card-2); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); padding:14px 16px; margin-bottom:15px;
}
.hw-owners-head{ font-size:16px; font-weight:700; color:var(--hw-heading); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hw-owners-count{ background:var(--hw-accent); color:#fff; font-size:13px; font-weight:700; border-radius:20px; padding:2px 12px; }
.hw-owners-total{ font-size:12px; font-weight:600; color:var(--hw-text-mute); margin-left:auto; }
.hw-owners-sub{ font-size:11px; color:var(--hw-text-mute); margin:5px 0 11px; }
.hw-owners-list{ display:flex; flex-wrap:wrap; gap:4px 0; }
.hw-owner{
  width:46px; height:54px; background-position:center top; background-repeat:no-repeat;
  background-size:44px auto; cursor:default; position:relative; transition:transform .12s ease;
}
.hw-owner:hover{ transform:translateY(-3px); z-index:2; }
.hw-owner.online::after{
  content:""; position:absolute; top:3px; right:8px; width:9px; height:9px;
  background:var(--hw-good); border:2px solid var(--hw-card-2); border-radius:50%;
}
.hw-owners-empty{ font-size:12px; color:var(--hw-text-mute); padding:6px 0; }

/* ===================================================================
   Preisentwicklung + Community-Voting
   =================================================================== */

/* --- gemeinsame Sektions-Optik (wie #hw-owners) --- */
#hw-history, #hw-community{
  background:var(--hw-card-2); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); padding:14px 16px; margin-bottom:15px;
}
.hw-sec-head{
  font-size:16px; font-weight:700; color:var(--hw-heading);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.hw-sec-sub{ font-size:12px; font-weight:600; color:var(--hw-text-mute); margin-left:auto; }

/* --- Zeitraum-Umschalter --- */
.hw-range{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.hw-range-btn{
  font-size:11px; font-weight:600; text-decoration:none;
  color:var(--hw-text-mute); background:var(--hw-card);
  border:1px solid var(--hw-border); border-radius:20px; padding:3px 11px;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.hw-range-btn:hover{ color:var(--hw-accent); border-color:var(--hw-accent); }
.hw-range-btn.active{ background:var(--hw-accent); border-color:var(--hw-accent); color:#fff; }

/* --- Graph --- */
.hw-chart-wrap{ width:100%; overflow-x:auto; }
.hw-chart{ display:block; width:100%; height:auto; }
.hw-chart-line{ stroke:var(--hw-accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.hw-chart-area{ fill:var(--hw-accent); opacity:.10; }
.hw-chart-dot{ fill:var(--hw-card-2); stroke:var(--hw-accent); stroke-width:2; cursor:help; }
.hw-chart-dot:hover{ fill:var(--hw-accent); }
.hw-chart-grid{ stroke:var(--hw-border); stroke-width:1; }
.hw-chart-axis{ fill:var(--hw-text-mute); font-size:9px; font-family:inherit; }
.hw-chart-marker{ fill:var(--hw-text-mute); font-size:9px; font-weight:700; font-family:inherit; }
.hw-chart-empty{ font-size:12px; color:var(--hw-text-mute); padding:34px 0; text-align:center; }
.hw-history-foot{
  font-size:11px; color:var(--hw-text-mute); margin-top:8px;
  padding-top:8px; border-top:1px solid var(--hw-border);
}
.hw-history-foot b{ color:var(--hw-text); }

/* --- Kennzahlen im Möbel-Kasten (dort wo vorher der Graph lag) --- */
.hw-kpis{
  position:absolute; right:34px; bottom:22px; width:250px;
  background:var(--hw-card-2); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); padding:9px 12px;
}
.hw-kpis-head{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hw-text-mute); margin-bottom:5px;
}
.hw-kpi{ display:flex; justify-content:space-between; align-items:baseline; font-size:11px; padding:2px 0; }
.hw-kpi span{ color:var(--hw-text-mute); }
.hw-kpi b{ color:var(--hw-text); font-weight:700; }
.hw-kpi b i{ color:var(--hw-text-mute); font-style:normal; font-weight:400; }
.hw-kpi-up{ color:var(--hw-good); font-weight:700; }
.hw-kpi-down{ color:var(--hw-bad); font-weight:700; }
.hw-kpi-flat{ color:var(--hw-text-mute); font-weight:600; }

/* --- Trendbalken --- */
.hw-vtrend{ margin-bottom:12px; }
.hw-vtrend-bar{
  height:11px; border-radius:20px; overflow:hidden;
  background:var(--hw-bad); border:1px solid var(--hw-border);
}
.hw-vtrend-up{ height:100%; background:var(--hw-good); }
.hw-vtrend-legend{ display:flex; justify-content:space-between; font-size:11px; margin-top:5px; }
.hw-vtrend-l-up{ color:var(--hw-good); }
.hw-vtrend-l-up b{ font-weight:700; }
.hw-vtrend-l-down{ color:var(--hw-bad); }

/* --- Community-Preis --- */
.hw-cprice{
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); padding:9px 12px; margin-bottom:12px;
}
.hw-cprice-main{ font-size:13px; color:var(--hw-text-mute); }
.hw-cprice-main b{ font-size:17px; color:var(--hw-link); font-weight:700; margin-left:4px; }
.hw-cprice-sub{ font-size:11px; color:var(--hw-text-mute); margin-top:3px; }
.hw-cprice-sub b{ color:var(--hw-text); }

/* --- Abstimm-Formular --- */
.hw-vote-form{ border-top:1px solid var(--hw-border); padding-top:11px; }
.hw-vote-mine{ font-size:11px; color:var(--hw-text-mute); margin-bottom:8px; }
.hw-vote-mine b{ color:var(--hw-text); }
.hw-vote-row{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.hw-vote-price{ font-size:11px; color:var(--hw-text-mute); display:flex; flex-direction:column; gap:3px; }
.hw-vote-price small{ font-weight:400; opacity:.8; }
.hw-vote-price input{
  width:130px; padding:6px 9px; font-size:12px;
  background:var(--hw-card); color:var(--hw-text);
  border:1px solid var(--hw-border); border-radius:var(--hw-radius);
}
.hw-vote-price input:focus{ outline:none; border-color:var(--hw-accent); }
.hw-vote-btn{
  font-size:12px; font-weight:700; color:#fff; cursor:pointer;
  border:none; border-radius:var(--hw-radius); padding:8px 15px;
  transition:filter .12s ease, transform .12s ease;
}
.hw-vote-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.hw-vote-btn.up{ background:var(--hw-good); }
.hw-vote-btn.down{ background:var(--hw-bad); }
.hw-vote-hint{ font-size:10px; color:var(--hw-text-mute); margin-top:7px; }
.hw-community-empty{ font-size:12px; color:var(--hw-text-mute); padding:4px 0; }
.hw-community-empty a{ color:var(--hw-link); }

/* --- schmale Bildschirme: Kennzahlen aus dem Kasten herausnehmen --- */
@media (max-width:820px){
  .hw-kpis{ position:static; width:auto; margin:10px 0 0; }
  .hw-sec-sub, .hw-range{ margin-left:0; }
  .hw-vote-row{ flex-direction:column; align-items:stretch; }
  .hw-vote-price input{ width:100%; }
}

/* Kategorie-Link im Möbel-Kasten war im Dunkelmodus kaum lesbar */
#debate_furni_box_infos_cat a{ color:var(--hw-link); }

/* ===================================================================
   Habbo-Look: Suchleiste + Kategorie-Leiste
   Signatur der Habbo-Optik: kräftiger Rahmen mit DICKERER Unterkante,
   fette Schrift, und beim Klick "drückt" das Element sichtbar ein.
   =================================================================== */

/* ---- Suchleiste ---- */
#header_search{
  background:var(--hw-card);
  border:2px solid var(--hw-border-strong);
  border-bottom-width:4px;
  border-radius:11px;
  box-shadow:var(--hw-shadow);
  padding:0;
  cursor:auto;
}
html[data-theme="dark"] #header_search{ background:var(--hw-card); border-color:var(--hw-border-strong); }

#header_search #search{ display:flex; align-items:center; margin:0; padding:4px; }

#header_search #searchinput{
  flex:1 1 auto; min-width:0; width:auto;
  border:none; background:transparent; outline:none; box-shadow:none;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--hw-text);
  padding:8px 8px 8px 38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da3b5' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.6-4.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:11px center; background-size:17px 17px;
}
#header_search #searchinput::placeholder{ color:var(--hw-text-mute); font-weight:500; }
#header_search #searchinput:focus{ outline:none; }

#hw-search-btn{
  flex:0 0 auto; cursor:pointer; margin-left:5px;
  font-family:inherit; font-size:13px; font-weight:700; color:#fff;
  background:var(--hw-accent);
  border:2px solid rgba(0,0,0,.24); border-bottom-width:4px; border-radius:8px;
  padding:7px 19px;
  transition:filter .12s ease;
}
#hw-search-btn:hover{ filter:brightness(1.09); }
#hw-search-btn:active{ border-bottom-width:2px; margin-top:2px; }

/* ---- Kategorie-Leiste: kein Scrollbalken mehr, umbrechen statt abschneiden ----
   Gemessen: die 10 Chips brauchen 1111px, verfuegbar sind 990px (121px Ueberhang).
   Schrumpfen wuerde den chunky Look kaputt machen -> zwei zentrierte Zeilen. */
#hw-catbar-inner{
  flex-wrap:wrap; justify-content:center;
  overflow:visible; white-space:normal;
  padding:11px 14px; gap:7px;
}
#hw-catbar-inner::-webkit-scrollbar{ height:0; }

#hw-catbar a{
  padding:6px 15px; border-radius:8px;
  font-size:12px; font-weight:700;
  border:2px solid var(--hw-border-strong); border-bottom-width:3px;
  transition:background-color .13s ease, color .13s ease, border-color .13s ease;
}
#hw-catbar a:hover{ background:var(--hw-accent-soft); color:var(--hw-accent); border-color:var(--hw-accent); }
#hw-catbar a:active{ border-bottom-width:2px; margin-top:1px; }
#hw-catbar a.active{
  background:var(--hw-accent); color:#fff;
  border-color:rgba(0,0,0,.26); box-shadow:none;
}

/* ---- Habbo-Anatomie ----
   Aus den Originaldateien abgeleitet (web-gallery/v2/images/new_button.png,
   buttons.css): fast schwarze Kontur, dickere Unterkante, Radius 4px, und die
   Flaechen sind HART auf 50% zweigeteilt (untere Haelfte dunkler) - kein
   weicher Verlauf. Uebernommen wird die Habbo-ANATOMIE, nicht die Habbo-Farbe:
   das Seiten-Blau bleibt Markenfarbe, Gruen/Rot nur fuer Aktionen. */
:root{
  --hw-outline:#14243a;       --hw-outline-btn:rgba(10,25,45,.34);
  --hw-press:rgba(10,25,45,.20); --hw-radius-hard:4px;
  --hw-accent-lo:#0b76a0;   /* untere Haelfte der Zweiton-Knoepfe (Eis, dunkler) */
  --hw-ok:#2fa05a;  --hw-ok-lo:#237a45;
  --hw-err:#d6483a; --hw-err-lo:#a83527;

  /* ---- Text getrennt von Fläche --------------------------------------
     --hw-accent ist an vielen Stellen gleichzeitig Knopffläche UND
     Textfarbe. Texte tragen deshalb eigene Variablen mit geprüftem
     Kontrast: helles Eisblau ist auf Weiß unlesbar, darum hier die
     abgedunkelte Eis-Variante. */
  --hw-heading:#14243a;       /* Überschriften - drüben weiß, hier dunkel */
  --hw-link:#0b76a0;          /* Textlinks: dunkles Eisblau, gut auf Weiß */
  --hw-on-accent:#04202f;     /* Text AUF Eisblau - dunkel in beiden Modi */

  /* ---- Gerüst-Bänder --------------------------------------------------
     Kopfleiste, Unterzeile und Fuß sind in BEIDEN Modi dunkles Stahlblau -
     das ist die Eisnacht-Signatur und gibt der hellen Seite ihren Rahmen. */
  --hw-chrome:#0c1728;        /* Kopfleiste */
  --hw-chrome-2:#101f36;      /* Unterzeile */
  --hw-chrome-3:#081020;      /* Fuß */
  --hw-plate:#ffffff;         /* der große Inhaltskasten */
  --hw-zebra:#eaf1f9;         /* jede zweite Zeile in der rechten Spalte */
}
html[data-theme="dark"]{
  --hw-outline:#081018;       --hw-outline-btn:rgba(0,0,0,.5);
  --hw-press:rgba(0,0,0,.45);
  --hw-accent-lo:#2fb4e0;

  /* Im Dunkelmodus darf helles Eisblau Textfarbe sein (auf #101c30 stark). */
  --hw-heading:#ffffff;
  --hw-link:#4dd8ff;
  --hw-on-accent:#04202f;

  /* Die Gerüst-Bänder bleiben gleich - nur die Inhaltsflächen kippen. */
  --hw-plate:#101c30;
  --hw-zebra:#1a2c48;
}

#header_search{ border-color:var(--hw-outline); }
#hw-catbar a{ border-color:var(--hw-outline); }
#hw-catbar a.active,
#hw-search-btn{ border-color:var(--hw-outline-btn); }

/* Gemeinsame Button-Signatur: dicke Unterkante, fett, drückt beim Klick ein */
#login_button, #reg_button, #cookieChoiceDismiss, .debate_comment_submit input[type="submit"]{
  border:2px solid var(--hw-outline-btn) !important;
  border-bottom-width:4px !important;
  border-radius:8px !important;
  font-weight:700 !important;
  transition:filter .12s ease;
}
#login_button:hover, #reg_button:hover, #cookieChoiceDismiss:hover,
.debate_comment_submit input[type="submit"]:hover{ filter:brightness(1.09); }
#login_button:active, #reg_button:active, #cookieChoiceDismiss:active,
.debate_comment_submit input[type="submit"]:active{ border-bottom-width:2px !important; margin-top:2px; }

/* Vote-Buttons + Zeitraum-Umschalter mitziehen */
.hw-vote-btn{ border:2px solid var(--hw-outline-btn); border-bottom-width:4px; }
.hw-vote-btn:active{ border-bottom-width:2px; transform:none; margin-top:2px; }
.hw-range-btn{ border-color:var(--hw-outline); font-weight:700; }
.hw-range-btn.active{ border-color:var(--hw-outline-btn); }

/* ---- Rechte Spalte: Überschriften + leere Zustände ---- */
#offers_headline{
  font-size:15px; font-weight:700; color:var(--hw-heading);
  padding:0 0 7px; margin-bottom:10px;
  border-bottom:2px solid var(--hw-border);
}
.hw-empty{
  font-size:12px; color:var(--hw-text-mute); line-height:1.55;
  background:var(--hw-card-2); border:1px dashed var(--hw-border-strong);
  border-radius:var(--hw-radius); padding:11px 13px;
}
.hw-empty a{ color:var(--hw-link); font-weight:600; }

/* ---- Möbelbild: Rahmen statt kahler grauer Fläche, Bild grösser ---- */
#debate_furni_box_pic{
  background-color:var(--hw-card-2) !important;
  /* KEIN background-size mehr mit !important: furni.php rechnet die Größe
     jetzt selbst aus (ganzzahliges Vielfaches, siehe dort) und schreibt sie
     ins style-Attribut. Ein !important hier würde das überstimmen. */
  border-right:1px solid var(--hw-border) !important;
}
html[data-theme="dark"] #debate_furni_box_pic{ background-color:var(--hw-card-3) !important; }

/* ---- Preis als Habbo-Taler-Schild (gold) ---- */
#debate_furni_box_price{
  background:linear-gradient(#ffd45e,#f2a81d) !important;
  color:#4a3000 !important; font-weight:700 !important; font-size:14px !important;
  border-top:2px solid var(--hw-outline); border-bottom:1px solid rgba(0,0,0,.18);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
#debate_furni_box_userprice{
  background:var(--hw-card-3) !important;
  border-top:1px solid var(--hw-border) !important;
}
#debate_furni_box_userprice a{ color:var(--hw-text-soft) !important; font-size:11px; }

/* ---- Habbo-Zweiton auf die interaktiven Flächen (harte 50/50-Teilung) ---- */
#header_search{ border-radius:6px; }
#hw-search-btn{
  background:linear-gradient(var(--hw-accent) 0 50%, var(--hw-accent-lo) 50% 100%);
  border-radius:var(--hw-radius-hard);
}
#hw-catbar a{
  border-radius:var(--hw-radius-hard);
  background:linear-gradient(var(--hw-card-2) 0 50%, var(--hw-card-3) 50% 100%);
}
#hw-catbar a.active{
  background:linear-gradient(var(--hw-accent) 0 50%, var(--hw-accent-lo) 50% 100%);
}
#hw-catbar a:hover{
  background:linear-gradient(var(--hw-accent-soft) 0 50%, var(--hw-card-3) 50% 100%);
}
#login_button, #reg_button, #cookieChoiceDismiss,
.hw-vote-btn, .hw-range-btn.active{ border-radius:var(--hw-radius-hard) !important; }
.hw-vote-btn.up  { background:linear-gradient(var(--hw-ok) 0 50%, var(--hw-ok-lo) 50% 100%); }
.hw-vote-btn.down{ background:linear-gradient(var(--hw-err) 0 50%, var(--hw-err-lo) 50% 100%); }
.hw-range-btn{ border-radius:var(--hw-radius-hard); }

/* Versatzschatten unter der Unterkante = das "steht auf der Seite"-Gefühl */
#header_search, #hw-search-btn, #login_button, #reg_button,
#cookieChoiceDismiss, .hw-vote-btn{ box-shadow:0 2px 0 var(--hw-press); }

/* ===================================================================
   Möbelbilder gross und pixelscharf
   Das Motiv ist der Held einer Preisliste - vorher nahm es nur einen
   Bruchteil der Kachel ein, wodurch Kacheln und Detailkasten leer wirkten.
   Die background-image-URL kommt per Inline-Style aus dem PHP und bleibt
   unangetastet; hier werden nur Groesse, Position und Flaeche gesetzt.
   =================================================================== */
.furni_box{
  box-sizing:border-box;
  padding:30px 12px 34px;                /* oben/unten Platz fuer Name + Preis */
  background-origin:content-box;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center;
  image-rendering:auto;   /* Originale sind nur ~60x76px: bei krummen
     Vergroesserungsfaktoren wirkt pixelated ausgefranst, weil aus manchen
     Originalpixeln ein Quadrat wird und aus anderen zwei. */
  border:2px solid var(--hw-outline);
  border-bottom-width:4px;
  border-radius:var(--hw-radius-hard);
  box-shadow:0 2px 0 var(--hw-press);
}
.furni_box:hover{ transform:translateY(-3px); border-color:var(--hw-accent); }

#debate_furni_box_pic{
  box-sizing:border-box;
  /* Unten Platz für den Preisbalken. Waren 74px für ZWEI Balken - seit die
     Zeile "Userpreis" raus ist, blieb darunter ein leerer Streifen.
     ⚠️ Wer diesen Wert ändert, muss die Rechnung in furni.php mitziehen:
     dort steht die verfügbare Höhe fürs Möbelbild (322 - 22 - dieser Wert),
     und davon hängt der ganzzahlige Vergrößerungsfaktor ab. */
  padding:22px 16px 44px;
  background-origin:content-box;
  /* Rückfall, falls furni.php die Bildmaße nicht lesen konnte (fremde URL,
     Datei fehlt): dann lieber einpassen als abschneiden. Ohne !important,
     damit die berechnete Größe aus dem style-Attribut gewinnt. */
  background-size:contain;
  background-position:center center;
  /* Pixelgrafik hart zeichnen. Wichtig: Das wirkt nur zusammen mit einer
     GANZZAHLIGEN Vergrößerung - bei krummen Faktoren werden sonst manche
     Bildpunkte 1, andere 2 Bildschirmpunkte breit, und das krisselt. */
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}
.square_furni_icon, .hw-sr-img{
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}

/* ---- Dunkelmodus-Lücken im Möbelkasten (hartcodierte Hellwerte) ---- */
html[data-theme="dark"] #debate_furni_box_pic{ background-color:var(--hw-card-3); }
html[data-theme="dark"] #debate_furni_box_userprice{ background:var(--hw-card-3); }
html[data-theme="dark"] #furni_info{ background:var(--hw-card-2); color:var(--hw-text-soft); }
html[data-theme="dark"] #debate_furni_box_name{ color:var(--hw-heading); }
html[data-theme="dark"] #debate_furni_box{ background:var(--hw-card); }

/* ---- Punktlinie unter der Beschreibung war Datenmüll-Optik ---- */
#debate_furni_box_disc{
  border-bottom:none !important;
  font-style:normal; font-size:12px; color:var(--hw-text-soft);
}

/* =====================================================================
   Team-Seite - nach Rang gebuendelt
   ---------------------------------------------------------------------
   Aufbau nach Vorbild klassischer Hotel-Teamseiten: farbiger Kopfbalken
   je Rang, darunter je Mitarbeiter eine Zeile aus gerahmtem Avatar und
   Steckbrief. Die Farbe kommt als --rang-farbe aus der Datenbank
   (Tabelle raenge, aenderbar im Housekeeping) - deshalb hier KEINE festen
   Farben pro Gruppe mehr wie frueher in general.css.
   ===================================================================== */
.hw-team-gruppe{
  margin:0 0 20px;
  background:var(--hw-card);
  border:2px solid var(--hw-outline);
  border-bottom-width:4px;               /* Habbo-Anatomie: dicke Unterkante */
  border-radius:var(--hw-radius-hard);
  box-shadow:0 2px 0 var(--hw-press);
  overflow:hidden;
}

/* Kopfbalken im Zweiton - obere Haelfte hell, untere dunkler, harte Kante
   in der Mitte statt weichem Verlauf. */
.hw-team-kopf{
  padding:8px 14px;
  color:#fff;
  background:linear-gradient(180deg,
              var(--rang-farbe) 0%,   var(--rang-farbe) 50%,
              rgba(0,0,0,.14) 50%,    rgba(0,0,0,.14) 100%),
             var(--rang-farbe);
  border-bottom:2px solid var(--hw-outline);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.hw-team-titel{ font-size:15px; font-weight:bold; letter-spacing:.2px; }
.hw-team-zahl{
  display:inline-block; margin-left:7px; padding:1px 7px;
  background:rgba(0,0,0,.28); border-radius:10px;
  font-size:11px; font-weight:bold; vertical-align:2px;
}
/* Die Aufgabenbeschreibung steht rechts im Balken - auf schmalen Anzeigen
   rutscht sie unter den Titel, statt ihn zu quetschen. */
.hw-team-was{
  float:right; max-width:55%;
  font-size:11px; color:rgba(255,255,255,.9);
  text-shadow:none; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.hw-team-liste{ padding:12px; background:var(--hw-card-2); }

/* --- Ein Mitarbeiter ------------------------------------------------- */
.hw-team-karte{
  display:flex; align-items:stretch; gap:12px;
  margin-bottom:10px; padding:10px;
  background:var(--hw-card);
  border:1px solid var(--hw-border-strong);
  border-left:4px solid var(--rang-farbe);   /* farbige Kante = Rangzugehoerigkeit */
  border-radius:var(--hw-radius-hard);
}
.hw-team-karte:last-child{ margin-bottom:0; }

/* Bildrahmen: 64x110 ist die Groesse, die das Hotel liefert (size=b).
   Wird bewusst NICHT skaliert - jeder krumme Faktor franst Pixelgrafik aus. */
.hw-team-bild{
  position:relative; flex:0 0 78px;
  width:78px; height:118px;
  background:var(--hw-card);
  border:1px solid var(--hw-border-strong);
  border-radius:var(--hw-radius-hard);
  overflow:hidden;
}
.hw-team-bild::before{                     /* Silhouette, falls kein Bild kommt */
  content:""; position:absolute; left:50%; top:38px;
  width:26px; height:24px; margin-left:-13px;
  border-radius:50% 50% 40% 40%;
  background:var(--hw-text-mute); opacity:.28;
}
.hw-team-avatar{
  position:absolute; left:50%; top:4px; margin-left:-32px;
  width:64px; height:110px;
  image-rendering:auto;
}

.hw-team-info{ flex:1 1 auto; min-width:0; padding-top:2px; }

/* Zahlenblock rechts - dort, wo im Vorbild die Orden haengen. */
.hw-team-leistung{
  flex:0 0 96px; align-self:center; text-align:center;
  padding:8px 6px;
  background:var(--hw-card-2);
  border:1px solid var(--hw-border);
  border-radius:var(--hw-radius-hard);
}
.hw-team-leistung b{
  display:block; font-size:22px; line-height:24px;
  color:var(--rang-farbe);
}
.hw-team-leistung span{
  display:block; margin-top:2px;
  font-size:10px; line-height:12px; color:var(--hw-text-mute);
  text-transform:uppercase; letter-spacing:.03em;
}
.hw-team-name{
  display:block; margin-bottom:4px;
  font-size:14px; color:var(--rang-farbe);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hw-team-zeile{
  display:block; font-size:12px; line-height:17px; color:var(--hw-text);
}
.hw-team-zeile em{ font-style:normal; color:var(--hw-text-soft); }
.hw-team-leise{ color:var(--hw-text-mute); }

@media (max-width:560px){
  .hw-team-was{ float:none; display:block; max-width:100%; line-height:15px; }
}

/* =====================================================================
   Anmeldung über OldHabbo
   ===================================================================== */
.hw-oh-login{ margin-top:18px; text-align:center; }

/* Trennlinie mit "oder" in der Mitte */
.hw-oh-trenner{
  display:block; position:relative; margin:0 0 14px;
  font-size:11px; color:var(--hw-text-mute); text-transform:uppercase;
}
.hw-oh-trenner::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid var(--hw-border);
}
.hw-oh-trenner span{ position:relative; padding:0 10px; background:var(--hw-card); }

.hw-oh-knopf{
  display:inline-block; padding:9px 18px;
  background:linear-gradient(180deg,
              #f5a623 0%, #f5a623 50%, #e08c00 50%, #e08c00 100%);
  color:#fff; font-weight:bold; font-size:13px; text-decoration:none;
  border:2px solid var(--hw-outline);
  border-bottom-width:4px;                /* Habbo-Anatomie */
  border-radius:var(--hw-radius-hard);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  transition:filter .15s ease;
}
.hw-oh-knopf:hover{ filter:brightness(1.07); text-decoration:none; color:#fff; }
.hw-oh-knopf:active{ border-bottom-width:2px; margin-top:2px; }
.hw-oh-klein{ padding:5px 12px; font-size:12px; margin-left:8px; }

.hw-oh-hinweis{ margin:9px 0 0; font-size:11px; color:var(--hw-text-mute); }

/* Kasten im Nutzerbereich */
.hw-oh-konto{
  margin:0 0 16px; padding:11px 14px;
  background:var(--hw-card-2);
  border:1px solid var(--hw-border-strong);
  border-left:4px solid #f5a623;
  border-radius:var(--hw-radius-hard);
  font-size:13px; color:var(--hw-text);
}
.hw-oh-konto .hw-oh-hinweis{ display:block; margin-top:4px; }
.hw-oh-name{ font-weight:bold; color:#e08c00; }
.hw-oh-loesen{
  margin-left:10px; padding:3px 9px;
  background:var(--hw-card); color:var(--hw-bad);
  border:1px solid var(--hw-border-strong); border-radius:var(--hw-radius-hard);
  font-size:11px; cursor:pointer;
}
.hw-oh-loesen:hover{ border-color:var(--hw-bad); }

/* ---- Anmeldeknopf oben rechts -------------------------------------------
   Ersetzt die frueheren zwei Knoepfe (Login + Registrieren). Weil es nur
   noch einer ist, sitzt er ganz rechts, und der Hell/Dunkel-Schalter rueckt
   entsprechend nach. */
#oh_login_button{
  position:absolute; top:10px; right:20px;
  display:block; width:200px; height:30px; line-height:26px; padding:0;
  color:#fff; font-weight:700; font-size:13px;
  text-align:center; text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,
              #f5a623 0%, #f5a623 50%, #e08c00 50%, #e08c00 100%);
  border:2px solid var(--hw-outline-btn);
  border-bottom-width:4px;                 /* Habbo-Anatomie */
  border-radius:8px;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  z-index:10; box-sizing:border-box;
  transition:filter .12s ease;
}
#oh_login_button:hover{ filter:brightness(1.09); color:#fff; text-decoration:none; }
#oh_login_button:active{ border-bottom-width:2px; margin-top:2px; }

/* Der Schalter stand auf 290px, weil rechts zwei Knoepfe lagen. */
#hw-theme-toggle{ right:232px; }   /* 20 (Rand) + 200 (Knopf) + 12 (Luft) */

/* =====================================================================
   Startseite "Handelsplatz"
   ---------------------------------------------------------------------
   Links das Möbelraster, rechts was gerade passiert. Grund: Die Liste ist
   am Anfang klein; ein reines Raster stünde halb leer. Die rechte Spalte
   trägt die Seite mit echter Bewegung, bis genug Möbel drin sind.
   ===================================================================== */
/* Deren Maße: 570 / 23 / 350. Die rechte Spalte ist damit 50px breiter als
   unsere bisherige - deshalb wirkt sie drüben gleichberechtigt statt als
   Anhängsel.
   ⚠️ Gegengerechnet fürs Möbelbild: 950 Innenbreite - 350 - 23 = 577 links,
   bei drei Karten und 12px Lücke bleiben 184 je Karte, abzüglich Polster
   166 - ein 60px breites Möbel passt also weiterhin zweifach hinein. Der
   ganzzahlige Faktor 2 bleibt erhalten. */
/* Rechte Spalte etwas schmaler (war 350) -> die 4 Karten links bekommen mehr
   Breite, damit "x im Hotel" und die Preiszeile vollstaendig passen. */
.hw-start{ display:grid; grid-template-columns:1fr 300px; gap:23px; align-items:start; }

.hw-block{
  background:var(--hw-card);
  border:2px solid var(--hw-outline);
  border-bottom-width:4px;               /* Habbo-Anatomie */
  border-radius:var(--hw-radius-hard);
  box-shadow:0 2px 0 var(--hw-press);
  overflow:hidden; margin-bottom:14px;
}
.hw-block-titel{
  /* Weiß auf Gelb wäre 1,51:1 - deshalb dunkler Text, wie bei rarewert
     (deren .button/.user tragen ebenfalls #1f1f1f auf #FFCC00). Der
     Textschatten muss mit weg: auf hellem Grund wird er zu Schmutz. */
  padding:9px 13px; color:var(--hw-on-accent); font-weight:700; font-size:13px;
  background:linear-gradient(180deg,
              var(--hw-accent) 0%, var(--hw-accent) 50%,
              var(--hw-accent-2) 50%, var(--hw-accent-2) 100%);
  border-bottom:2px solid var(--hw-outline);
}
.hw-zahl{ float:right; font-weight:400; font-size:11.5px; opacity:.9; }
.hw-block-inhalt{ padding:12px; background:var(--hw-card-2); }

/* --- Habbo-Bodenkacheln ---------------------------------------------------
   Der wirksamste Griff von hubba.cc: Jedes Möbel steht auf demselben Raster.
   Dadurch wiegen alle Karten optisch gleich viel - egal ob das Bild groß
   oder winzig ist. Genau daran krankte die alte Startseite. */
/* ⚠️ Vorher standen hier vier CSS-Verläufe. Die ergaben ein ZICKZACK, keine
   Rauten - Verläufe können ein echtes isometrisches Raster nicht kacheln,
   ohne dass die Kanten aufreißen. Jetzt eine echte Kachel im Habbo-Maß
   64x32 (2:1), selbst gezeichnet (scratchpad/boden.php, 268 Bytes), mit den
   Eckpunkten oben/rechts/unten/links auf den Kantenmitten - dadurch setzt
   die Nachbarkachel exakt an und das Muster ist nahtlos. */
.hw-boden{
  background-color:var(--hw-card-3);
  background-image:url('/style/2014/images/boden-hell.png');
  background-repeat:repeat;
  background-size:auto;
  background-position:0 0;
}
html[data-theme="dark"] .hw-boden{
  background-image:url('/style/2014/images/boden-dunkel.png');
}

/* --- Möbelraster ---------------------------------------------------------- */
/* Vier Karten je Reihe am Desktop (früher drei). Die Stufen nach unten stehen
   weiter unten bei den @media-Regeln. */
.hw-raster{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hw-karte{
  display:block; text-decoration:none; color:var(--hw-text);
  background:var(--hw-card);
  border:1px solid var(--hw-border-strong);
  border-radius:var(--hw-radius-hard);
  overflow:hidden;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hw-karte:hover{
  transform:translateY(-3px);
  border-color:var(--hw-accent);
  box-shadow:var(--hw-shadow);       /* tiefer als im Ruhezustand -> hebt ab */
  text-decoration:none; color:var(--hw-text);
}
/* Beim Überfahren "leuchtet" das Möbel in der Vitrine auf (Akzent-Schimmer)
   und der Name nimmt die Linkfarbe an - klare, aber ruhige Interaktion. */
.hw-karte:hover .hw-karte-bild{
  background:
    radial-gradient(115% 80% at 50% 36%, rgba(255,204,0,.22), rgba(255,204,0,0) 60%),
    radial-gradient(115% 85% at 50% 38%, var(--hw-card), var(--hw-card-2));
}
.hw-karte:hover .hw-karte-name{ color:var(--hw-link); }
/* Im Dunkelmodus liegen die Flächen-Töne umgekehrt (card ist DUNKLER als
   card-2). Damit der Lichtkegel auch dunkel nach vorn kommt statt ein Loch zu
   bilden, ist die Vitrine dort eine etwas HELLERE Platte: card-3 Mitte -> card-2
   Rand. Der Hover-Schimmer bleibt warmes Gelb (halbtransparent, modus-egal). */
html[data-theme="dark"] .hw-karte-bild{
  background:radial-gradient(115% 85% at 50% 38%, var(--hw-card-3), var(--hw-card-2));
}
html[data-theme="dark"] .hw-karte:hover .hw-karte-bild{
  background:
    radial-gradient(115% 80% at 50% 36%, rgba(255,204,0,.16), rgba(255,204,0,0) 60%),
    radial-gradient(115% 85% at 50% 38%, var(--hw-card-3), var(--hw-card-2));
}
/* Bei 4 Spalten ist die Karte schmal (~130px). Damit "13× im Hotel" NICHT
   abgeschnitten wird: wenig Polster, kleine Schrift, und der Umlauftext darf
   im Notfall mit "…" enden statt hart geschnitten zu werden. */
.hw-karte-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:4px;
  padding:5px 7px; border-bottom:1px solid var(--hw-border);
}
/* Möbelbilder sind PIXELGRAFIK - und die verträgt nur GANZZAHLIGE
   Vergrößerung. Zwei Anläufe waren daneben:

     1. 118px Fläche + max-height:76% -> das 113px hohe Möbel wurde auf ~89px
        GESTAUCHT. Verkleinerte Pixelkunst wird matschig.
     2. object-fit:contain auf 160px -> Faktor 1,42. Dabei wird ein Teil der
        Bildpunkte auf 1, ein anderer auf 2 Bildschirmpunkte abgebildet. Das
        Ergebnis wirkt krisselig - genau das "zu unscharf".

   Jetzt: Die Fläche ist so hoch, dass ein 113px-Möbel bei Faktor 2 (226px)
   hineinpasst. Welcher Faktor tatsächlich genommen wird, rechnet ein kurzes
   Skript je Bild aus (hwPixelScharf() in index.php) - denn er hängt an der
   Größe des einzelnen Bildes.

   Was hier steht, ist der Zustand OHNE Skript: Originalgröße, nie größer als
   die Fläche. Scharf, nur eben nicht vergrößert. */
.hw-karte-bild{
  height:200px; padding:9px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* Dezente "Vitrine": ein weicher Lichtkegel hebt das Möbel vom Kartengrund
     ab, ohne die Pixelkanten des Bildes anzutasten (liegt NUR im Hintergrund). */
  background:radial-gradient(115% 85% at 50% 38%, var(--hw-card) 42%, var(--hw-card-2) 100%);
  transition:background .18s ease;
}
.hw-karte-bild img{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  image-rendering:crisp-edges;   /* älterer Name, u.a. Firefox */
  image-rendering:pixelated;     /* danach, damit dieser gewinnt */
}
.hw-karte-fuss{ padding:8px 7px 10px; }   /* schmalere Seiten = mehr Platz für Name + Preiszeile */
/* Zwei Zeilen statt Abschneiden: Seit die rechte Spalte breiter ist, sind
   die Karten schmaler - "Goldene Drachenlampe" passte nicht mehr in eine
   Zeile und endete als "Goldene Drachenlam…". Zwei Zeilen sind hier besser
   als ein abgeschnittener Name, denn der Name IST die Information. */
.hw-karte-name{
  font-size:10.5px; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.55em; transition:color .14s ease;
  /* 11px statt 12: lange Einzelwörter wie "Feuerdrachenlampe" passen so auf
     EINE Zeile und werden nicht abgeschnitten oder mitten im Wort umbrochen
     (beides sah unschön aus; echte Silbentrennung greift in Chrome nicht -
     kein DE-Wörterbuch). overflow-wrap nur als Notfall für extremlange Wörter. */
  overflow-wrap:break-word;
}
/* Preiszeile MITTIG statt baseline: sonst steht der kleinere Trend ("▲ 19 %")
   sichtbar tiefer als der große Preis. gap fängt enge Karten ab. */
.hw-karte-zeile{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:6px; margin-top:4px; }
.hw-preis{ font-size:14px; font-weight:700; display:inline-flex; align-items:center; white-space:nowrap; flex:0 1 auto; min-width:0; }
/* Trend IMMER einzeilig neben dem Preis (wie MegaTV) - der Trend-Span brach
   sonst bei langen Preisen ("2.400" + 3-stellige %) intern um und rutschte in
   eine zweite Zeile. nowrap + fester Platz + etwas kleinere Schrift = passt. */
.hw-karte-zeile .hw-hoch, .hw-karte-zeile .hw-runter{ white-space:nowrap; flex:0 0 auto; font-size:11px; }
/* Taler-Icon: NATURGRÖSSE lassen (25x19, scharfe GIF) - Verkleinern machte es
   unscharf/gequetscht. Nur den top:3px-Versatz des globalen .hw-taler
   neutralisieren, weil die Zeile jetzt mittig ausrichtet. */
.hw-karte-zeile .hw-taler{ top:0; margin-left:5px; vertical-align:middle; }
.hw-umlauf{
  font-size:9.5px; color:var(--hw-text-mute); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}

/* --- Seltenheitsbalken ----------------------------------------------------
   Fünf grobe Stufen aus dem echten Umlauf. Bewusst grob: Wir wissen, WIE VIELE
   es gibt - was das wert ist, sagt der Preis daneben. */
.hw-selten{ display:flex; gap:1.5px; flex:0 0 auto; }
.hw-selten i{
  width:5px; height:6px; display:block;
  background:var(--hw-border-strong);
  border:1px solid rgba(0,0,0,.22);
}
.hw-selten i.an{ background:var(--stufe,#f5c518); }

.hw-hoch{ color:var(--hw-good); font-weight:700; font-size:11.5px; }
.hw-runter{ color:var(--hw-bad); font-weight:700; font-size:11.5px; }

.hw-leer, .hw-still{
  padding:26px 18px; text-align:center; font-size:12.5px;
  color:var(--hw-text-mute); background:var(--hw-card);
  border:2px dashed var(--hw-border-strong); border-radius:var(--hw-radius-hard);
}
.hw-still{ padding:16px 12px; text-align:left; }

/* --- Filter-Leiste über dem Raster ---------------------------------------
   Kategorie + Seltenheit als moderne Chips (Pill-Form), direkt über den
   Möbeln statt weit rechts in der Unterzeile. Klappt über hwKategorien()
   (Klasse .offen) - dieselbe Mechanik wie früher die Kategorie-Liste. */
.hw-filter{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px;
}
.hw-filter-label{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hw-text-mute);
}
.hw-filter-feld{ position:relative; }
.hw-filter-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-family:inherit; font-size:12px; cursor:pointer;
  color:var(--hw-text); background:var(--hw-card);
  border:2px solid var(--hw-border-strong); border-bottom-width:3px;
  border-radius:999px;                    /* Pill = moderner als die eckige Zeile */
  transition:border-color .12s ease, background .12s ease;
}
.hw-filter-chip:hover{ border-color:var(--hw-accent); }
.hw-filter-chip.aktiv{ border-color:var(--hw-accent); background:var(--hw-accent-soft); }
/* Echtes Habbo-Katalog-Icon (18x18-PNG), bei 18px = Faktor 1 -> unskaliert. */
.hw-filter-icon{ width:18px; height:18px; display:block; flex:0 0 18px; margin:-1px 2px -1px -2px; }
.hw-filter-chip-name{ color:var(--hw-text-mute); font-weight:400; }
.hw-filter-chip b{ font-weight:700; }
.hw-filter-chip .hw-pfeil{ font-size:9px; opacity:.7; margin-left:1px; }
.hw-filter-liste{
  display:none; position:absolute; z-index:40; top:calc(100% + 5px); left:0;
  min-width:190px; max-height:340px; overflow:auto; padding:5px;
  background:var(--hw-card); border:2px solid var(--hw-border-strong);
  border-bottom-width:3px; border-radius:var(--hw-radius-hard);
  box-shadow:var(--hw-shadow-sm);
}
.hw-filter-feld.offen .hw-filter-liste{ display:block; }
.hw-filter-liste a{
  display:block; padding:7px 10px; font-size:12px; color:var(--hw-text);
  text-decoration:none; border-radius:6px; white-space:nowrap;
}
.hw-filter-liste a:hover{ background:var(--hw-accent-soft); color:var(--hw-link); text-decoration:none; }
.hw-filter-liste a.aktiv{ background:var(--hw-accent); color:var(--hw-on-accent); font-weight:700; }
.hw-filter-reset{
  margin-left:auto; font-size:11px; font-weight:700; color:var(--hw-text-mute);
  text-decoration:none; white-space:nowrap;
}
.hw-filter-reset:hover{ color:var(--hw-bad); text-decoration:none; }

/* --- Paginierung ----------------------------------------------------------
   Statt einer endlosen Liste: Seiten à 24. Optik wie die Blöcke - harte
   Kontur, dicke Unterkante, 4px Radius (Habbo-Anatomie). Die aktive Seite
   trägt die Akzentfarbe, ein gesperrter Pfeil (erste/letzte Seite) ist
   gedämpft und nicht klickbar. */
.hw-seiten{
  display:flex; flex-wrap:wrap; gap:6px;
  justify-content:center; align-items:center; margin-top:16px;
}
.hw-seiten-nr, .hw-seiten-pfeil{
  display:inline-block; min-width:30px; padding:5px 10px;
  text-align:center; font-size:12.5px; font-weight:700;
  color:var(--hw-text); text-decoration:none;
  background:var(--hw-card);
  border:2px solid var(--hw-border-strong);
  border-bottom-width:3px;               /* Habbo-Anatomie */
  border-radius:var(--hw-radius-hard);
}
.hw-seiten-nr:hover, .hw-seiten-pfeil:hover{
  border-color:var(--hw-accent); color:var(--hw-text); text-decoration:none;
}
.hw-seiten-nr.aktiv{
  background:var(--hw-accent); color:var(--hw-on-accent);
  border-color:var(--hw-outline); cursor:default;
}
.hw-seiten-pfeil.hw-aus{
  color:var(--hw-text-mute); opacity:.5; cursor:default; border-bottom-width:2px;
}
.hw-seiten-pfeil.hw-aus:hover{ border-color:var(--hw-border-strong); color:var(--hw-text-mute); }
.hw-seiten-luecke{ padding:5px 2px; color:var(--hw-text-mute); font-weight:700; }

/* Aktiver Seltenheits-Filter im Blocktitel - dezent, nur zur Orientierung. */
.hw-titel-filter{ font-weight:400; opacity:.85; }

/* --- Rechte Spalte: Zeilen ------------------------------------------------ */
.hw-zeile{
  display:flex; align-items:center; gap:9px;
  padding:8px 0; border-bottom:1px solid var(--hw-border);
  text-decoration:none; color:var(--hw-text);
}
.hw-zeile:last-child{ border-bottom:0; }
.hw-zeile:hover{ text-decoration:none; color:var(--hw-link); }
.hw-mini{
  width:36px; height:36px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hw-border); border-radius:var(--hw-radius-hard);
}
/* Auch die Miniaturen sind Pixelgrafik - hier wird zwangsläufig verkleinert
   (36px Kästchen), aber pixelated hält sie wenigstens klar statt matschig. */
.hw-mini img{
  max-width:88%; max-height:88%;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}
.hw-zeile-text{ flex:1; min-width:0; line-height:1.35; }
.hw-zeile-text b{ display:block; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-zeile-text span{ display:block; font-size:10.5px; color:var(--hw-text-mute); }
.hw-marke{
  font-size:10px; font-weight:700; color:#fff; padding:2px 7px;
  background:#e08c00; border-radius:10px;
}

.hw-balken{ height:8px; margin-top:9px; background:var(--hw-bad); border-radius:5px; overflow:hidden; }
.hw-balken div{ height:100%; background:var(--hw-good); }
.hw-balken-text{ display:flex; justify-content:space-between; margin-top:4px; font-size:10.5px; }

.hw-scout{ display:flex; gap:11px; align-items:flex-start; font-size:12px; color:var(--hw-text-soft); }
.hw-scout img{ flex:0 0 64px; image-rendering:auto; }
.hw-scout p{ margin:0; }

/* Möbelraster treppt von 4 Spalten herunter. Reihenfolge = groß nach klein,
   damit bei Überschneidung die kleinere (spätere) Regel gewinnt. */
@media (max-width:1180px){
  .hw-raster{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .hw-start{ grid-template-columns:1fr; }
  .hw-raster{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:680px){
  .hw-raster{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:460px){
  .hw-raster{ grid-template-columns:1fr; }
}

/* =====================================================================
   Hintergrund + Logo  (20.07.2026)
   ---------------------------------------------------------------------
   VORHER: eine gekachelte Schachbrett-Tapete (bg2.png) und ein Kopfbild
   (header.png), in dem das alte Logo fest eingebacken war.

   WARUM WEG: Die heutigen Habbo-Seiten arbeiten alle OHNE Tapete -
   habbo.com nimmt einen weichen Blauverlauf mit Pixel-Silhouetten am
   unteren Rand, habbo.de ein tiefes Marineblau. Die Deko kommt aus
   Pixelgrafik, nicht aus einem sich wiederholenden Muster. Genau deshalb
   tritt dort die Pixelkunst hervor - und genau das braucht das neue
   Emblem-Logo, das seine eigene dunkle Platte mitbringt.

   Die Skyline ist selbst gezeichnet (images/skyline.png, 1 KB).
   ===================================================================== */
/* Der Verlauf MUSS als background-image kommen und selbst !important sein:
   template.css setzt hier bg2.png plus background-color:#FFF. Ein
   background-image:none !important davor wuerde den eigenen Verlauf
   gleich wieder ausknipsen - genau das ist mir erst passiert. */
#bg{
  background-color:#5581a5 !important;
  background-image:linear-gradient(180deg, #6e9ec4 0%, #5581a5 55%, #416a8a 100%) !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  min-height:100vh;
}
html[data-theme="dark"] #bg{
  background-color:#101a24 !important;
  background-image:linear-gradient(180deg, #16222e 0%, #101a24 60%, #0b131b 100%) !important;
}

/* Skyline als ruhiger Abschluss unten - fest am Fenster, damit sie beim
   Blaettern nicht mitwandert und nie mitten im Inhalt klebt. */
body::after{
  content:""; position:fixed; left:0; right:0; bottom:0; height:120px;
  background:url('/style/2014/images/skyline.png') repeat-x bottom left;
  opacity:.55; pointer-events:none; z-index:0;
}
html[data-theme="dark"] body::after{ opacity:.35; }
#content, #top, #header, #hw-catbar, #online_viewer, #footer{ position:relative; z-index:1; }

/* --- Kopf mit dem neuen Emblem ------------------------------------------
   header.png entfaellt: dort steckte das ALTE Logo mit drin. Das neue ist
   ein eigenstaendiges Emblem (320x241, aus 1254x1254 und 694 KB auf 11 KB
   gebracht) und braucht keinen Hintergrund. */
/* ⚠️ Diese Regel MUSS hier umgeschrieben werden, nicht später überstimmt:
   "height:auto !important" und "background-image:none !important" würden
   jede spätere Bannerhöhe und -grafik ausknipsen. Genau daran wäre der
   Umbau sonst wirkungslos gescheitert. */
#header{
  height:158px !important;
  padding:0 !important;
  position:relative; overflow:hidden;
  background:#141414 url('/style/2014/images/sterne.png') repeat !important;
}
#header_image{
  height:100% !important; padding:0 !important;
  background-image:none !important;
  position:relative; max-width:1055px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
}
/* Die Silhouette schließt das Banner nach unten ab - dieselbe Grafik, die
   vorher am Fensterboden klebte. Entsättigt, damit sie auf dem neutralen
   Grau nicht als einziger Farbfleck auffällt. */
#header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:74px;
  background:url('/style/2014/images/skyline.png') repeat-x bottom left;
  filter:grayscale(1) brightness(.55);
  opacity:.85; pointer-events:none;
}
/* ⚠️ NICHT position:relative nehmen. template.css:190-197 setzt
   "position:absolute; left:250px; top:85px" - bei relative wirkt das top
   weiter und schiebt das Logo 85px nach unten aus dem Banner heraus (genau
   das ist passiert). Mit static ist die Verschiebung wirkungslos, die
   Zentrierung übernimmt der Flex-Container. */
#logolink{
  position:static !important;
  left:auto !important; top:auto !important;
  z-index:2;
  display:block; margin:0 auto;
  width:186px !important; height:140px !important;   /* passt in 158px Bannerhöhe */
  background:url('/style/2014/images/logo_web.png') no-repeat center/contain;
  cursor:pointer;
}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){
  #logolink{ background-image:url('/style/2014/images/logo_web@2x.png'); }
}
#header_search{
  position:static !important;
  margin:14px auto 0 !important;
  max-width:520px;
}

/* Die Kategorieleiste war ein harter weisser Streifen mitten im Verlauf -
   wie eine Naht. Als durchscheinendes Band fuegt sie sich ein, die hellen
   Schaltflaechen bleiben trotzdem gut lesbar. */
#hw-catbar{
  background:rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:none;
  backdrop-filter:blur(2px);
}
html[data-theme="dark"] #hw-catbar{
  background:rgba(255,255,255,.06);
  border-bottom-color:rgba(255,255,255,.10);
}
#hw-catbar a{ background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.10); }
html[data-theme="dark"] #hw-catbar a{ background:var(--hw-card-2); border-color:var(--hw-border); }

/* Skyline etwas deutlicher - sie soll den unteren Rand abschliessen,
   nicht nur zu ahnen sein. */
body::after{ opacity:.75; }
html[data-theme="dark"] body::after{ opacity:.45; }

/* =====================================================================
   KOPFBEREICH NEU - nach dem Vorbild von rarewert.de
   ---------------------------------------------------------------------
   Vier Baender uebereinander:
     1. #top          dunkle Symbolleiste (Icon ueber Beschriftung)
     2. #header       Logo auf dem Verlauf
     3. #hw-subnav    schmale Unterzeile + Kategorie-Klappliste
     4. #hw-suchzeile zwei Suchfelder (Moebel / Habbos)

   Die Symbole sind farbige SVGs, liegen aber ENTSAETTIGT da und werden
   beim Ueberfahren farbig - genau der Effekt von drueben. Umgesetzt mit
   filter:grayscale(), nicht mit zwei Bilddateien: so gibt es keinen
   Nachladeruckler beim ersten Ueberfahren.

   Die Kategorien stehen NICHT mehr als lange Schaltflaechenreihe da
   (#hw-catbar ist aus der Vorlage raus). Sie sitzen jetzt in einer
   Klappliste - die Zeile bleibt dadurch gleich lang, egal wie viele
   Kategorien dazukommen.
   ===================================================================== */

/* --- 1. Symbolleiste -----------------------------------------------------
   ⚠️ Die Variable --hw-topbar (Z. 51) ist WIRKUNGSLOS: Diese Regel setzt die
   Kurzform "background" mit !important, und die nimmt background-color
   gleich mit zurück. Wer nur an der Variable dreht, sieht nichts - deshalb
   wird hier direkt gearbeitet.
   Flach statt Verlauf und exakt neutral (R=G=B), wie bei rarewert. */
#top{
  background:var(--hw-chrome) !important;
  border-bottom:1px solid rgba(50,47,47,.77) !important;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.24) !important;
  height:auto !important; min-height:58px; padding:0;
}
#top_inner{
  height:auto !important; text-align:left;
  display:flex; align-items:stretch; gap:2px;
  padding-left:4px;
}
#top_inner a.hw-navpunkt{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:74px; height:auto !important; margin:0 !important;
  padding:7px 10px 6px !important; line-height:1 !important;
  color:rgba(255,255,255,.72) !important; font-size:11px; font-weight:700;
  text-decoration:none; border:0 !important; border-radius:0 !important;
  background:none !important;
  border-bottom:3px solid transparent !important;
  transition:color .12s ease, background-color .12s ease;
}
#top_inner a.hw-navpunkt svg{
  /* Ruhezustand grau und blass, beim Ueberfahren volle Farbe. */
  filter:grayscale(1) opacity(.6);
  transition:filter .15s ease, transform .15s ease;
}
#top_inner a.hw-navpunkt:hover{
  color:#fff !important; background:rgba(255,255,255,.07) !important;
  border-bottom-color:transparent !important;
}
#top_inner a.hw-navpunkt:hover svg{ filter:none; transform:translateY(-1px); }
#top_inner a.hw-navpunkt.aktiv{
  color:#fff !important; background:rgba(255,255,255,.10) !important;
  border-bottom-color:var(--hw-accent) !important;
}
#top_inner a.hw-navpunkt.aktiv svg{ filter:none; }

/* Schalter und Anmeldebereich stehen nebeneinander in EINEM Kasten rechts.
   Vorher hing jedes Element an einem eigenen festen Abstand zum Rand
   (right:232px bzw. right:20px) - sobald der Begrüßungstext länger wurde,
   lief er über den Schalter. Im Flex ordnet sich das von selbst, egal wie
   lang der Name ist. */
#hw-rechts{
  position:absolute; right:20px; top:0; bottom:0;
  display:flex; align-items:center; gap:14px;
  z-index:40;
}
/* Die Kinder dürfen NICHT mehr absolut sitzen, sonst fallen sie aus dem
   Flex heraus und die alten Abstände greifen wieder. */
#hw-rechts #hw-theme-toggle,
#hw-rechts #oh_login_button,
#hw-rechts #member_area{
  position:relative !important;
  top:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important;
}
#hw-theme-toggle{
  background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.18);
  flex:0 0 auto;
}
#hw-theme-toggle:hover{ background:rgba(255,255,255,.20); transform:none; }
#oh_login_button:active{ margin-top:0 !important; }

/* ⚠️ Der Kasten muss die VOLLE Leistenhöhe haben: Der Avatar hängt mit
   bottom:0 daran und soll auf der Leiste stehen. Eine Zentrierung per
   transform würde ihn mitverschieben. */
#member_area{
  height:100% !important; align-self:stretch;
  display:flex; align-items:center; justify-content:flex-end;
}
/* Das Aufklappmenü hing an einem festen top:52px (template.css:133) - das
   war die alte Leistenhöhe. Seit der Kasten die Leiste ausfüllt, ragte das
   Menü 10px in sie hinein. Mit top:100% hängt es immer genau unter der
   Leiste, egal wie hoch die einmal wird. */
#member_area > div{ top:100% !important; right:0 !important; }
#member_area, #member_area > a{ color:rgba(255,255,255,.85) !important; }
/* Menü geht NUR per Klick auf - auch am Desktop. Das frühere Hover-Öffnen
   (template.css:128 "#member_area:hover div") wird hier abgeschaltet; das
   .offen setzt hwBenutzer() in navigation.php. Gleiche Spezifität, aber
   modern.css lädt später → diese Regel gewinnt fürs direkte Kind-<div>. */
#member_area:hover > div{ display:none; }
#member_area.offen > div{ display:block !important; }
.hw-willkommen{ cursor:pointer; }
.hw-winker{ cursor:pointer; }
/* Kleiner Pfeil zeigt "hier klappt was auf" und dreht sich beim Öffnen. */
.hw-willkommen .hw-pfeil{
  font-size:9px; margin-left:5px; opacity:.75;
  display:inline-block; transition:transform .15s ease;
}
#member_area.offen .hw-willkommen .hw-pfeil{ transform:rotate(180deg); }

/* --- 3. Unterzeile ------------------------------------------------------- */
/* Deckend statt halbdurchsichtig: rgba() ließ den Blaustich des
   Hintergrunds durchscheinen - das Gerüst war dadurch nie wirklich neutral. */
/* Die Unterzeile soll erkennbar UNTER der Hauptnav liegen, nicht als
   gleichwertiges zweites Band daneben. Dafür: dunkler als die Kopfleiste
   (chrome-3 statt chrome-2), ein feiner Licht-Grat oben + Innenschatten =
   die Zeile wirkt eingelassen/recessed. Die Punkte sind zentrierte Reiter,
   der aktive eine gefüllte Akzent-Pille - klar anders als der Unterstrich
   der Hauptnav, damit "Seiten oben / Ansichten unten" ablesbar wird. */
#hw-subnav{
  background:var(--hw-chrome-3);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 7px 9px -9px rgba(0,0,0,.7);
  position:relative; z-index:6;
}
#hw-subnav-inner{
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  padding:5px 12px;
}
#hw-subnav a, .hw-kat-knopf{
  display:inline-block; padding:6px 15px;
  font:700 12px Verdana,Arial,sans-serif;
  color:rgba(255,255,255,.60); text-decoration:none;
  background:none; border:0; cursor:pointer;
  border-radius:999px;
  transition:color .12s ease, background-color .12s ease;
}
#hw-subnav a:hover, .hw-kat-knopf:hover{
  color:#fff; background:rgba(255,255,255,.07); text-decoration:none;
}
#hw-subnav a.aktiv, .hw-kat-knopf.aktiv{
  color:var(--hw-on-accent); background:var(--hw-accent);
}

/* Kategorien als Klappliste statt als lange Reihe. */
.hw-kat-menue{ position:relative; margin-left:auto; }
.hw-kat-knopf .hw-pfeil{ font-size:9px; margin-left:5px; opacity:.7; }
.hw-kat-liste{
  display:none; position:absolute; right:0; top:100%;
  min-width:220px; max-height:60vh; overflow-y:auto;
  background:var(--hw-card); border:2px solid var(--hw-outline);
  border-bottom-width:4px; border-radius:var(--hw-radius-hard,4px);
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  z-index:60; padding:4px;
}
.hw-kat-menue.offen .hw-kat-liste{ display:block; }
.hw-kat-liste a{
  display:block; padding:7px 10px; border-bottom:0;
  font:12px Verdana,Arial,sans-serif; font-weight:400;
  color:var(--hw-text-soft); border-radius:3px;
}
.hw-kat-liste a:hover{ background:var(--hw-accent-soft); color:var(--hw-link); }
.hw-kat-liste a.aktiv{ background:var(--hw-accent); color:#fff; font-weight:700; }

/* --- 4. Zwei Suchfelder -------------------------------------------------- */
/* Kein eigenes Band mehr: Bei rarewert schweben die beiden weißen Suchfelder
   direkt auf dem dunklen Grund. Ein Streifen dahinter macht den Kopf
   schwerer, als er sein muss. */
#hw-suchzeile{
  background:none;
  border:0;
  padding:18px 0 16px;
  position:relative; z-index:5;
}
#hw-suchzeile-inner{
  max-width:1000px; margin:0 auto; padding:0 12px;
  display:flex; justify-content:center; gap:50px;
}
/* Zwei weiße Pillen, randlos, mit weichem Schlagschatten - in BEIDEN Modi
   weiß. Sie schweben auf dem dunklen Gerüst und sind damit das auffälligste
   Merkmal des Kopfes. */
.hw-suche{
  position:relative; display:flex; align-items:stretch;
  flex:0 1 500px; min-width:0; margin:0; min-height:35px;
  background:rgba(255,255,255,.96);
  border:0;
  border-radius:10px;
  box-shadow:5px 5px 5px rgba(0,0,0,.28);
}
.hw-suche-user{ flex:0 1 350px; }
.hw-suche input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  height:33px;
  /* Rechts 40px Reserve: Der Knopf liegt absolut IM Feld, sonst liefe der
     mittig gesetzte Text unter das Symbol. */
  padding:0 40px 0 12px;
  text-align:center; font:16px Verdana,Arial,sans-serif; color:#111;
}
.hw-suche input::placeholder{ color:#8e8e8e; }
/* ⚠️ Der Fokus-Ring kommt aus input[type=text]:focus (Zeile ~211) und ist
   spezifischer - ohne diese Zeile erscheint beim Hineinklicken ein 3px-Ring
   INNERHALB der weißen Pille, dazu ein zweiter Radius. */
.hw-suche input:focus{ box-shadow:none; border-radius:0; }

/* Der Knopf wird zum reinen Symbol im Feld. Beide Selektoren sind nötig:
   das Möbelfeld hat id="hw-search-btn" (mit Kontur, Unterkante, Zweiton aus
   mehreren früheren Regeln), das Habbo-Feld nur .hw-suche button. Ohne
   beide bliebe eines als gelber Klotz stehen. */
.hw-suche button, #hw-search-btn{
  position:absolute; right:12px; top:8px;
  width:18px; height:18px; padding:0; margin:0;
  background:none !important; border:0 !important;
  box-shadow:none !important; color:#444 !important;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.hw-suche button:hover, #hw-search-btn:hover{ color:#000 !important; filter:none; }

/* Die Vorschlagsliste haengt jetzt unter dem linken Feld. */
#search_results{
  position:absolute; left:-2px; right:-2px; top:calc(100% + 4px);
  margin:0; width:auto;
}

/* --- Hintergrund insgesamt dunkler --------------------------------------
   Der Verlauf war ein helles Tagesblau. Drueben ist der Rahmen deutlich
   dunkler, dadurch treten die Moebelbilder viel staerker hervor. Die
   Inhaltskarten bleiben hell - sonst wird die Preistabelle unlesbar. */
/* ⚠️ --hw-page ist WIRKUNGSLOS. header.php:30 ist <body id="bg">, damit
   schlägt #bg (Spezifität 0,1,0) jede body-Regel (0,0,1) - und diese Regel
   hier arbeitet zusätzlich mit !important. Wer an der Variable dreht, sieht
   nichts. Der wirksame Hintergrund steht genau hier.

   Neutralgrau statt Blauverlauf. Im Dunkelmodus dazu der Sternenhimmel:
   eigene 512er-Kachel (scratchpad/sterne.php, 1,5 KB) mit unregelmäßig
   verteilten Punkten - gleichmäßig verteilt sähe es aus wie Millimeterpapier,
   und eine kleinere Kachel würde man als Raster wiedererkennen. */
#bg{
  background-image:none !important;
  background-color:#d4d4d4 !important;
}
html[data-theme="dark"] #bg{
  background-color:#0b0b0b !important;
  background-image:url('/style/2014/images/sterne.png') !important;
  /* Muss repeat sein: Zeile 1131 setzt no-repeat mit !important. */
  background-repeat:repeat !important;
  background-size:auto !important;
}
/* Die Silhouette sitzt jetzt IM Banner (#header::after). Am Fensterboden
   wäre sie ein zweites Mal auf demselben Bildschirm - deshalb hier aus. */
body::after{ display:none; }

#content, #top, #header, #hw-subnav, #hw-suchzeile, #online_viewer, #footer{
  position:relative; z-index:1;
}

/* --- Schmale Fenster ----------------------------------------------------- */
@media (max-width:760px){
  #top{ min-height:0; padding-bottom:52px; }
  #top_inner{ justify-content:space-between; padding:0; gap:0; }
  #top_inner a.hw-navpunkt{ min-width:0; flex:1; padding:6px 2px 5px !important; font-size:10px; }
  /* 16px = Faktor 1 zum 16x16-Raster. 24px waeren Faktor 1,5 und damit
     wieder krumm - dieselbe Falle wie bei den Moebelbildern. */
  #top_inner a.hw-navpunkt svg{ width:16px; height:16px; }
  #oh_login_button{ top:auto !important; bottom:8px; right:12px; transform:none; width:auto; padding:0 14px; }
  #hw-theme-toggle{ top:auto !important; bottom:8px; left:12px; right:auto; transform:none; }
  #member_area{ top:auto !important; bottom:6px; right:12px; transform:none; }
  #hw-suchzeile-inner{ flex-direction:column; }
  /* Beide Suchfelder auf natürliche Höhe + volle Breite: im Spalten-Flex
     wurde aus flex-basis:500px sonst eine 500px HOHE Box. */
  #hw-suchzeile-inner .hw-suche{ flex:0 0 auto; width:100%; }
  .hw-kat-menue{ margin-left:0; }
  #logolink{ width:170px !important; height:128px !important; }
  /* Der rechte Kasten (Toggle + Begrüßung/Avatar) saß absolut oben rechts und
     lief über. Auf dem Handy als voller Streifen an den unteren Rand der
     Leiste (in das per padding-bottom:52px reservierte Feld), Toggle links,
     Benutzer rechts. Der große Avatar wird ausgeblendet - spart Platz. */
  #hw-rechts{ left:12px; right:12px; top:auto; bottom:5px; justify-content:space-between; gap:8px; }
  #hw-rechts .hw-winker{ display:none; }
  #oh_login_button{ width:auto; padding:0 14px; }
}

/* --- Der EINE große Kasten ----------------------------------------------
   Das war mein Denkfehler von gestern: Ich hatte den äußeren Rahmen
   abgeschaltet, weil er als zweiter Rahmen um die schon gerahmten .hw-block
   lag. Bei rarewert ist es genau andersherum - der GROSSE Kasten trägt den
   Rahmen, die inneren Blöcke sind randlos. Ich hatte also die falsche Ebene
   entfernt.

   Glücksfall: template.css:344-352 bringt Breite, Radius und Lichtsaum
   bereits mit denselben Werten mit (gleiches Ursprungs-CMS) - es muss nur
   die Fläche modusabhängig werden.

   ⚠️ !important NUR bei background. Ein "width:...!important" würde die
   Handy-Regel bei Zeile 248 erschlagen und die Seite auf kleinen Geräten
   sprengen. */
#content.hw-offen{
  background:var(--hw-plate) !important;
  max-width:990px; margin-left:auto; margin-right:auto;
}
#content.hw-offen .hw-block{
  border:0; box-shadow:none; border-radius:var(--hw-radius);
  margin-bottom:16px; background:none;
}
#content.hw-offen .hw-block-inhalt{
  background:var(--hw-card-3); padding:10px;
  border-radius:var(--hw-radius);
}

/* Freistehende Überschrift statt farbigem Balken.
   Bei rarewert steht der Titel ÜBER dem Kasten, mittig und ohne Fläche.
   Das braucht hier keinen Markup-Umbau: Weil .hw-block auf der Startseite
   randlos ist, sieht ein so gestalteter Titel INNERHALB des Blocks genauso
   aus wie einer darüber.
   ⚠️ Deren Überschriften sind Oswald (schmal). Verdana läuft rund 15 %
   breiter - deshalb 20px statt deren 30px und leicht negative Laufweite,
   sonst sprengt "Was sagt die Community?" die schmale rechte Spalte. */
#content.hw-offen .hw-block-titel{
  background:none; border:0; padding:2px 0 9px;
  color:var(--hw-heading);
  font-size:20px; font-weight:700; letter-spacing:-.02em;
  text-align:center; line-height:1.25;
  /* Gleiche Höhe für ALLE Startseiten-Titel, egal ob sie eine Zählzeile
     (.hw-zahl, nur "Alle Werte") tragen oder nicht. Sonst startet der linke
     Block (2-zeiliger Titel) tiefer als "Gerade passiert" rechts (1-zeilig) -
     die Inhaltskästen ständen nicht auf einer Linie. box-sizing, damit die
     min-height das Polster einschließt. */
  min-height:53px; box-sizing:border-box;
}
#content.hw-offen .hw-zahl{
  float:none; display:block; margin-top:2px;
  font-size:11.5px; font-weight:400; color:var(--hw-text-mute); opacity:1;
}

/* --- Fuß --------------------------------------------------------------
   ⚠️ Die Dunkel-Zeile nimmt KEINE Variable: Sie steht in derselben Datei
   nach dem :root-Block, aber der Wert wird hart gebraucht, weil hier schon
   einmal eine Variable durch ein späteres !important verschluckt wurde. */
#footer{ background:var(--hw-chrome-3) !important; color:rgba(255,255,255,.82); }
#footer a{ color:rgba(255,255,255,.85); }
#footer a:hover{ color:#fff; }
html[data-theme="dark"] #footer{ background:#131313 !important; }

/* Der Habbo-Streifen ueber dem Fuss war der hellste Block der Seite.
   Als dunkles Band schliesst er zusammen mit dem Fuss ab. */
#online_viewer{ background:var(--hw-chrome) !important; color:rgba(255,255,255,.82) !important; }
#online_viewer a.online_user{ color:rgba(255,255,255,.85); }
html[data-theme="dark"] #online_viewer{ background:#272727 !important; }
/* Der Hover war weiß-auf-weiß und damit unlesbar: Zeile 235 setzt die
   Fläche auf #fff, die Schrift kommt aber aus der Regel eine Zeile höher. */
#online_viewer a.online_user:hover{ background:var(--hw-accent) !important; color:#000 !important; }

/* --- Fuß-Leiste NEU: Statistik + neueste Mitglieder ----------------------
   Loest die alte "jeder Nutzer als Chip"-Liste ab. Nur noch die neuesten 14
   als Kopf-Chips (Kopf-Crop wie in den Kommentaren) -> viel weniger Avatar-
   Anfragen und ehrlich beschriftet. */
.hw-fuss-stat{ margin:0 0 16px; font-size:12px; }
.hw-fuss-stat b{ font-size:13px; color:#fff; }
/* Besucherzahl: bewusst in derselben Zeile und im selben Stil wie die uebrigen
   Kennzahlen - keine eigene Zeile, kein Symbol, keine Signalfarbe. Es ist eine
   Nebeninfo im Fuss, keine Meldung. Verhindert wird nur der Umbruch, damit
   "30 Tagen" nicht allein in die naechste Zeile rutscht. */
.hw-fuss-besuch{ white-space:nowrap; }
@media (max-width:560px){ .hw-fuss-besuch{ white-space:normal; } }
.hw-fuss-neu-titel{
  display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  opacity:.7; margin-bottom:12px;
}
.hw-fuss-koepfe{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; }
.hw-fuss-kopf{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  /* Frueher fest 58px - dadurch wurden laengere Namen abgeschnitten
     ("MrsCherr…", "ChiliChee…"). Jetzt waechst die Spalte mit dem Namen,
     bleibt aber gedeckelt, damit die Reihe ordentlich bleibt. */
  width:auto; min-width:58px; max-width:112px;
  text-decoration:none; color:rgba(255,255,255,.82);
}
.hw-fuss-kopf .hw-kopf{
  border:1px solid rgba(255,255,255,.18);
  transition:border-color .12s ease, transform .12s ease;
}
.hw-fuss-kopf:hover .hw-kopf{ border-color:var(--hw-accent); transform:translateY(-2px); }
.hw-fuss-name{
  /* KEIN ellipsis/nowrap mehr - der Name soll vollstaendig lesbar sein.
     Lange Namen brechen um statt zu verschwinden. */
  font-size:10px; line-height:1.15; max-width:112px;
  white-space:normal; overflow-wrap:anywhere; text-align:center;
}
.hw-fuss-kopf:hover .hw-fuss-name{ color:#fff; }

/* Die Sammelregel weiter oben setzt alle Baender auf z-index:1 und macht
   damit die Stapelung innerhalb des Kopfes kaputt: Die Klappliste der
   Kategorien verschwand hinter der Suchleiste. Deshalb hier NACH der
   Sammelregel die Reihenfolge im Kopf wieder festlegen. */
#top{ z-index:30; }
#hw-subnav{ z-index:20; }
#hw-suchzeile{ z-index:10; }

/* Die Eintraege der Klappliste stehen INNERHALB von #hw-subnav. Die Regel
   "#hw-subnav a" (ID + Element) ist staerker als ".hw-kat-liste a" (Klasse
   + Element) - die Eintraege waren dadurch weiss auf weiss und die Zeilen
   viel zu hoch. Deshalb hier mit derselben ID davor. */
#hw-subnav .hw-kat-liste a{
  display:block; width:auto; padding:7px 10px;
  font:12px Verdana,Arial,sans-serif; font-weight:400;
  color:var(--hw-text-soft); background:none;
  border:0; border-bottom:0; border-radius:3px;
  text-align:left; white-space:normal;
}
#hw-subnav .hw-kat-liste a:hover{
  background:var(--hw-accent-soft); color:var(--hw-link);
}
#hw-subnav .hw-kat-liste a.aktiv{
  background:var(--hw-accent); color:#fff; font-weight:700;
}

/* --- Möbelkasten der Detailseite hoeher ---------------------------------
   Bei 250px Kastenhoehe blieben nach dem Innenabstand nur 154px fuer das
   Bild - ein 113px hohes Moebel passt da NICHT zweifach hinein, also waere
   nur Faktor 1 moeglich gewesen. Mit 322px (226 Bild + 22 oben + 74 unten)
   passt Faktor 2, und das Moebel ist gross UND pixelscharf. */
#debate_furni_box{ height:322px; }
#debate_furni_box_pic{ height:322px; }

/* =====================================================================
   Winkender Avatar im Mitgliederbereich
   ---------------------------------------------------------------------
   Das Hotel liefert nur STANDBILDER - einen animierten Endpunkt gibt es
   nicht (geprüft: action=wav ändert die Pose, aber es bleibt ein PNG).
   Das Winken entsteht deshalb aus zwei übereinanderliegenden Posen, von
   denen die winkende periodisch eingeblendet wird.

   Beide Bilder sind 32x55 und werden 1:1 angezeigt. Keine Skalierung =
   keine krummen Faktoren = gestochen scharf (dieselbe Regel wie bei den
   Möbelbildern und den Icons).
   ===================================================================== */
/* Der Habbo STEHT AUF DER LEISTE: Seine Füße sitzen auf der Unterkante der
   Kopfleiste, der Rest ragt nach OBEN ins Banner. Vorher hing er nach unten
   und stieß in die Unterzeile - das war die falsche Richtung.

   Der Gruß steht daneben und ist vertikal mittig in der Leiste, wie jedes
   andere Element dort auch.

   Größe 64x110 (size=b), so groß wie der Scout-Avatar in der rechten
   Spalte, unskaliert - nur ganzzahlig ist Pixelgrafik scharf. */
#member_area{
  line-height:1.2 !important;
  padding:0 88px 0 16px;      /* rechts Platz für den Avatar */
  z-index:40;
  white-space:nowrap;
}
.hw-willkommen{
  display:inline-block; vertical-align:middle; line-height:1.2;
  font-weight:700; font-size:13px;
  color:#fff !important; text-decoration:none;
}
#member_area:hover .hw-willkommen{ color:var(--hw-accent) !important; }

.hw-winker{
  /* Unten bündig mit der Leiste, ragt nach oben heraus. Absolut gesetzt,
     damit er die Höhe der Leiste nicht aufbläht. */
  position:absolute; right:14px; bottom:0;
  display:block; width:64px; height:110px;
  pointer-events:none;
}
.hw-winker img{
  display:block; width:64px; height:110px;
  image-rendering:crisp-edges;
  image-rendering:pixelated;
}

/* Der senkrechte Strich links vom Bereich stammt aus template.css:116 und
   war noch weiß bzw. hellblau - auf dem dunklen Gerüst ein Fremdkörper. */
/* ⚠️ KEIN padding-right hier setzen. Diese Regel steht NACH dem
   Avatar-Block und würde dessen Freiraum (88px, damit der Gruß nicht unter
   den Avatar läuft) wieder auf 16px zurückdrehen - genau das ist passiert,
   der Name verschwand hinter dem Habbo. */
#member_area{ border-right:1px solid rgba(255,255,255,.14) !important; }
#member_area:hover{ border-right-color:var(--hw-accent) !important; }

/* --- Seltenheitsgrad auf der Möbelseite ---------------------------------
   Steht dort, wo bis 20.07.2026 die Kategorie stand. Der Seltenheitsgrad
   ist die Angabe, die Tauscher hier suchen - und er ist GEMESSEN (aus dem
   Umlauf im Hotel), während die Kategorie eine redaktionelle Einordnung ist.

   ⚠️ general.css:1004 gibt jedem Kind dieser Zeile text-indent:27px und
   feste 20px Höhe (für die kleinen Symbolgrafiken links). Für eine Zeile
   aus Balken plus Text passt das nicht - beides wird hier zurückgesetzt. */
#debate_furni_box_infos_selten{
  text-indent:0 !important;
  height:auto !important; line-height:1.2 !important;
  display:flex !important; align-items:center; gap:8px;
  width:auto !important; margin-bottom:10px !important;
}
#debate_furni_box_infos_selten b{ font-size:13px; color:var(--hw-text); }
/* Etwas größer als im Raster - hier ist Platz, und die Stufe ist auf der
   Möbelseite die Hauptaussage. */
.hw-selten-gross i{ width:11px; height:10px; }

/* =====================================================================
   Taler-Münze, Besitzer-Blase, Bestandsfeld
   ===================================================================== */

/* Die Münze steht direkt hinter der Zahl - kürzer als das Wort "Taler"
   und auf einen Blick erkennbar. */
/* Originalgröße 25x19, also UNSKALIERT - überall gleich groß und dadurch
   pixelscharf. Vorher stand im Raster 15x11 und auf der Möbelseite 19x15:
   zwei verschiedene Größen, und beide krumm skaliert (25/19 geht in keiner
   davon ganzzahlig auf). */
.hw-taler{
  width:25px; height:19px; margin-left:6px;
  vertical-align:baseline; position:relative; top:3px;
  image-rendering:crisp-edges; image-rendering:pixelated;
}

/* --- Besitzer: Anzahl deutlich sichtbar ---------------------------------
   Die Zahl stand gelb auf gelb-nah und ging unter. Grün heißt hier nichts
   Wertendes, es ist schlicht die auffälligste Farbe, die wir sonst nicht
   für Klickbares benutzen. */
.hw-owners-count{
  background:var(--hw-good) !important; color:#fff !important;
  font-size:13px; font-weight:700; border-radius:20px; padding:2px 12px;
  box-shadow:0 0 0 2px rgba(15,150,40,.25);
}

/* --- Schlanke Blase beim Überfahren -------------------------------------
   Statt des Browser-Tooltips: erscheint sofort, ist gestaltbar und passt zum
   Rest der Seite. ⚠️ Bewusst NUR Name + Anzahl: eine ausführliche Karte mit
   Motto und Abzeichen war zu wuchtig und wurde am 29.07.2026 wieder entfernt.
   Diese Angaben stehen jetzt auf der PROFILSEITE - der Kopf verweist dorthin. */
.hw-owner{ overflow:visible; }
.hw-owner::before{
  content:attr(data-name) " · " attr(data-anzahl);
  position:absolute; left:50%; bottom:100%;
  transform:translate(-50%, 4px);
  white-space:nowrap; pointer-events:none;
  background:var(--hw-card); color:var(--hw-text);
  border:1px solid var(--hw-border-strong); border-radius:8px;
  padding:5px 10px; font-size:11.5px; font-weight:700;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.7), 0 0 0 3px rgba(255,204,0,.14);
  opacity:0; transition:opacity .12s ease, transform .12s ease;
  z-index:5;
}
.hw-owner:hover::before{ opacity:1; transform:translate(-50%, -4px); }
/* Gruener Punkt: in den letzten 30 Tagen aktiv (frueher "online"). */
.hw-owner.aktiv::after{
  content:""; position:absolute; top:3px; right:8px; width:9px; height:9px;
  background:var(--hw-good); border:2px solid var(--hw-card-2); border-radius:50%;
}
.hw-owner:hover{
  transform:translateY(-3px); z-index:6;
  filter:drop-shadow(0 0 6px rgba(255,204,0,.55));
}

/* Rang-Schildchen (Teamseite und Listen) - Form wie im Housekeeping. */
.hw-rang{
  display:inline-block; color:#fff; font-weight:700;
  border-radius:999px; letter-spacing:.02em; line-height:1.5;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.45);
  white-space:nowrap;
}

/* ===========================================================================
   "Gab es nie im Katalog zu kaufen"
   ---------------------------------------------------------------------------
   ⚠️ KEINE der Seltenheitsfarben und weder Grün noch Rot. Käuflichkeit und
   Seltenheit sind zwei verschiedene Achsen: Ein Ecotron-Gewinn kann 400-mal
   existieren und steht dann zu Recht mit "Sehr häufig" UND "nie im Katalog"
   da. Eine Seltenheitsfarbe würde beides vermischen; --hw-good/--hw-bad sind
   hier mit "Preis gestiegen/gefallen" belegt.
   Die gestrichelte Kontur ist auf dieser Seite bereits die eingeführte
   Sprache für "gibt es nicht" (.hw-empty, .hw-leer).
   Alles über Variablen, damit Hell und Dunkel von selbst stimmen.
   =========================================================================== */

/* Aufkleber auf der Möbelkachel. position:absolute, damit im Kartenkopf und
   im Bildfluss nichts verrutscht - .hw-karte hat bereits overflow:hidden. */
.hw-karte-bild{ position:relative; }
.hw-niekatalog-marke{
  position:absolute; left:8px; bottom:8px;
  font-size:10px; line-height:1; font-weight:600;
  padding:3px 7px;
  color:var(--hw-text);
  /* ⚠️ Kräftigere Fläche als --hw-card-2: Der Aufkleber liegt auf dem
     gemusterten Möbelboden, und mit der leiseren Farbe las er sich wie
     loser Text im Bild statt wie ein Abzeichen (am Bildschirm geprüft). */
  background:var(--hw-card-3);
  border:1px dashed var(--hw-border-strong);
  border-radius:var(--hw-radius-hard);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  /* ⚠️ KEIN pointer-events:none. Das haette den title aus index.php
     unerreichbar gemacht - ohne Zeigerziel zeigt der Browser keine
     Blase, und genau dort steht die Erklaerung (Ecotron, HC-Geschenk,
     Kampagne). Die Kachel bleibt trotzdem vollstaendig klickbar: die
     Marke liegt INNERHALB des <a>. */
  max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Möbelseite: ersetzt die Kaufpreiszeile.
   ⚠️ Ohne das Münzsymbol - #debate_furni_box_infos_buyprice trägt in
   general.css fest buy_price.gif, und eine Münze vor "gab es nie zu kaufen"
   sagt das Gegenteil. Die Seltenheitszeile daneben macht es genauso. */
#debate_furni_box_infos_niekatalog{
  height:20px; line-height:20px; margin-bottom:6px;
  padding-left:0 !important; text-indent:0 !important;
  background:none !important;
  color:var(--hw-text-soft); font-style:italic;
}

/* Housekeeping: Ankreuzfeld unter dem Kaufpreisfeld. Das Panel hat eine
   eigene Datei (administration/dist/css/hw-panel.css) - diese Regeln gelten
   nur, falls die Formulare je auf der Webseite auftauchen. */
.hw-niekatalog{
  display:block; margin:8px 0 2px; font-weight:600; font-size:12px; cursor:pointer;
}
.hw-niekatalog input{ margin-right:6px; }
.hw-niekatalog-text{ margin:0; font-size:11px; color:var(--hw-text-mute); }

/* ===========================================================================
   "∞ Unbekannt" - Möbel ohne Kurs
   ---------------------------------------------------------------------------
   ⚠️ Das ∞ steht NUR hier in der Anzeige. In der Datenbank ist es nicht
   speicherbar: furnis.price ist latin1, und U+221E wird dort still zu einem
   Fragezeichen (nachgemessen). Der gespeicherte Zahlenpreis bleibt stehen und
   wird bei gesetztem Merkmal schlicht nicht gezeigt.
   Farblich bewusst zurückhaltend: kein Grün/Rot (die sind mit "Preis
   gestiegen/gefallen" belegt) und keine Seltenheitsfarbe - Käuflichkeit und
   Seltenheit sind zwei verschiedene Achsen.
   =========================================================================== */
.hw-ohne-kurs{
  font-style:normal;
  color:var(--hw-text-soft);
  letter-spacing:.02em;
}
/* Das ∞ ist in den meisten Schriften zierlich - auf Kacheln und in der
   Rangliste steht es allein und darf deshalb etwas kräftiger auftreten. */
.hw-preis.hw-ohne-kurs,
.hw-rank-val .hw-ohne-kurs,
.hw-sr-price .hw-ohne-kurs,
/* Beobachtungsliste und Angebote nutzen die alten Klassen aus general.css. */
.furni_box_price .hw-ohne-kurs,
.preview_debate_comment_price .hw-ohne-kurs{ font-size:1.15em; font-weight:600; }

/* Möbelseite: ersetzt die Preiszeile mit der Talermünze.
   ⚠️ MIT !important, sonst greift hier gar nichts: modern.css:654 setzt für
   dieselbe id Farbe, Gewicht und Größe bereits mit !important, und bei zwei
   !important-Regeln entscheidet die Spezifität - ohne das Schlüsselwort
   verliert diese Regel trotz höherer Spezifität.
   ⚠️ NUR die Größe anfassen: Die Farbe (#4a3000 auf gelbem Verlauf) muss
   bleiben. var(--hw-text) wäre im Dunkelmodus hell, und hell auf gelb ist
   nicht lesbar. Der gelbe Balken IST der Preis-Platz - das ∞ steht dort
   genau richtig. */
#debate_furni_box_price.hw-ohne-kurs{
  font-size:16px !important;
}

/* =====================================================================
   Avatar-Kopf in "Erhältlich bei…" (wie im Admin-Mitarbeiter-Chat)
   ---------------------------------------------------------------------
   headonly=1 wird von oldhabbo.to IGNORIERT -> der Endpunkt liefert immer
   den ganzen Avatar (64x110). Deshalb wie im Housekeeping: den vollen
   Avatar als Hintergrund nehmen und den KOPF per background-position
   ausschneiden, UNSKALIERT (background-size:auto) = pixelscharf.
   Werte 1:1 aus administration/dist/css/hw-panel.css (.hw-kopf).
   ===================================================================== */
/* ⚠️ NACHGEMESSEN 01.08. an 10 echten Avataren (Alpha-Kanal Zeile fuer Zeile):
   der Kopf braucht x 13..52 und y 19..52 - also volle 40 Pixel Breite. Das
   alte Fenster (40x40 ab x=12) endete bei x=51 und schnitt jedem mit
   breiterem Haar oder Hut eine senkrechte Scheibe ab - das waren die
   "abgeknickten" Koepfe (Betreiber 01.08.). Jetzt 44x44 ab (11|17): zwei
   Pixel Luft ringsum, damit auch kuenftige Huete hineinpassen. */
.hw-kopf{
  display:inline-block; vertical-align:middle; flex:0 0 44px;
  width:44px; height:44px;
  background-repeat:no-repeat;
  background-position:-11px -17px;      /* schiebt den Kopf mittig ins Fenster */
  background-size:auto;
  background-color:var(--hw-card-3);
  border-radius:6px;
  image-rendering:crisp-edges; image-rendering:pixelated;
}
.hw-kopf-leer{ background-image:none; background-color:var(--hw-card-3); }

/* Angebotszeile: Kopf + Name links, Menge/Preis rechts. Der blaue Rahmen aus
   general.css bleibt; nur aus dem festen 160x36-Kästchen wird eine flexible
   Zeile, damit der 40px-Kopf hineinpasst. */
.inv_item_offer{
  display:flex; align-items:center; gap:11px;
  width:auto; height:auto; min-height:54px; line-height:1.3; text-indent:0;
  padding:7px 10px; margin-bottom:10px;
  background:var(--hw-card-2); border:1px solid var(--hw-border); border-radius:9px;
  transition:border-color .14s ease, background .14s ease, transform .14s ease;
}
.inv_item_offer:hover{
  background:var(--hw-accent-soft); border-color:var(--hw-accent);
  transform:translateY(-1px);
}
.inv_item_offer .hw-kopf{ margin:0; }
/* Name oben (volle Restbreite -> ganzer Name sichtbar), Menge/Preis darunter */
.inv_offer_body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.inv_offer_name{
  font-weight:700; color:var(--hw-text); font-size:12.5px; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.inv_offer_meta{ font-size:11px; color:var(--hw-text-mute); line-height:1.2; }
.inv_offer_meta b{ color:var(--hw-text); font-weight:700; }

/* =====================================================================
   DEBATTE-KOMMENTARE (debatte.php) - Karten im Site-Stil
   ---------------------------------------------------------------------
   Kopf links (wie "Erhältlich bei…"), Name mit Rangfarbe + Zeitstempel,
   Kommentartext, rechts das besprochene Möbel mit Kurs. Ersetzt die alten
   festen 365x120-Kästen (.preview_debate_comment) durch flexible Karten,
   die in beiden Modi über CSS-Variablen umfärben.
   ===================================================================== */
.hw-dc-list{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  max-width:940px; margin:20px auto 0;
}
.hw-dc-card{
  position:relative; display:flex; align-items:flex-start; gap:12px;
  box-sizing:border-box;                /* ⚠️ sonst addieren Padding+Rahmen 28px
                                           auf width:100% -> Karte läuft auf dem
                                           Handy 28px über den Rand (abgeschnitten) */
  width:440px; max-width:100%; min-height:88px;
  padding:12px 74px 12px 14px;          /* rechts Platz für die Möbel-Spalte */
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:12px; box-shadow:var(--hw-shadow-sm);
  text-decoration:none; color:inherit; overflow:hidden;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.hw-dc-card:hover{
  border-color:var(--hw-accent); transform:translateY(-2px);
  box-shadow:var(--hw-shadow); text-decoration:none;
}
.hw-dc-card .hw-kopf{ align-self:flex-start; flex:0 0 44px; }
.hw-dc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hw-dc-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.15; }
.hw-dc-name{ font-weight:700; font-size:13px; color:var(--hw-link); }
.hw-dc-time{ font-size:11px; color:var(--hw-text-mute); }
.hw-dc-text{
  font-size:12.5px; color:var(--hw-text-soft); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word;
}
/* Rechte Spalte: das besprochene Möbel + sein Kurs. */
.hw-dc-furni{
  position:absolute; top:0; right:0; width:62px; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:var(--hw-card-2); border-left:1px solid var(--hw-border);
}
.hw-dc-furni-img{
  width:46px; height:46px; background-repeat:no-repeat;
  background-position:center; background-size:contain;
  image-rendering:crisp-edges; image-rendering:pixelated;
}
.hw-dc-furni-price{ font-size:11px; font-weight:700; color:var(--hw-link); text-align:center; padding:0 3px; }
.hw-dc-furni-price .hw-ohne-kurs{ font-size:1.1em; }
@media (max-width:520px){ .hw-dc-card{ width:100%; } }

/* --- Detailseite (furni.php): gestapelte Volltext-Karten mit Aktionen ----
   Dieselben Karten, aber NICHT klickbar (kein <a>, wir sind schon beim Möbel),
   Volltext statt 3-Zeilen-Klemme, keine Möbel-Spalte - dafür rechts
   Bearbeiten/Löschen für eigene Kommentare. */
.hw-dc-stack{ display:flex; flex-direction:column; gap:12px; margin:14px 0 0; }
.hw-dc-stack .hw-dc-card{ width:100%; max-width:none; }
.hw-dc-detail{ padding:12px 12px 12px 14px; cursor:default; min-height:auto; align-items:center; }
/* Beim Bearbeiten wird die Karte hoch (Textfeld) -> Kopf/Aktionen nach oben. */
.hw-dc-detail.editing{ align-items:flex-start; }
.hw-dc-detail:hover{ transform:none; border-color:var(--hw-border); box-shadow:var(--hw-shadow-sm); }
.hw-dc-detail .hw-dc-text{ -webkit-line-clamp:none; display:block; }
/* Aktionen (Stift/Papierkorb) rechts oben in der Karte. */
.hw-dc-actions{ display:flex; gap:6px; align-self:flex-start; flex:0 0 auto; }
.hw-dc-actions form{ margin:0; display:inline; }
.hw-dc-act{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; cursor:pointer;
  background:var(--hw-card-2); color:var(--hw-text-mute);
  border:1px solid var(--hw-border); border-radius:7px;
  transition:color .12s ease, background .12s ease, border-color .12s ease;
}
.hw-dc-act:hover{ color:var(--hw-text); background:var(--hw-card-3); border-color:var(--hw-border-strong); }
.hw-dc-act-del:hover{ color:#fff; background:var(--hw-bad); border-color:var(--hw-bad); }
/* Inline-Bearbeiten: Formular versteckt, bis .editing gesetzt ist. */
.hw-dc-edit{ display:none; margin:2px 0 0; }
.hw-dc-card.editing .hw-dc-view{ display:none; }
.hw-dc-card.editing .hw-dc-edit{ display:block; }
.hw-dc-edit textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:56px;
  padding:8px 10px; font:12.5px Verdana,Arial,sans-serif; line-height:1.4;
  color:var(--hw-text); background:var(--hw-card-2);
  border:1px solid var(--hw-border-strong); border-radius:8px;
}
.hw-dc-edit-btns{ display:flex; gap:8px; margin-top:7px; }
.hw-dc-btn{
  font:700 12px Verdana,Arial,sans-serif; cursor:pointer;
  padding:6px 14px; border-radius:7px;
  background:var(--hw-card-3); color:var(--hw-text); border:1px solid var(--hw-border-strong);
}
.hw-dc-btn:hover{ border-color:var(--hw-accent); }
.hw-dc-btn-save{ background:var(--hw-accent); color:var(--hw-on-accent); border-color:var(--hw-accent-2); }
.hw-dc-btn-save:hover{ filter:brightness(1.05); }

/* =====================================================================
   NEWS / NEUIGKEITEN (news.php + Startseite)
   ---------------------------------------------------------------------
   Leitbild ist das BREITE habboassets-Promo-Banner (~620x240). Alle
   Bildflächen nutzen aspect-ratio:620/240 + object/background cover, damit
   jedes Promo gleich sitzt. Dark/Light über die üblichen Variablen.
   ===================================================================== */
/* --- Detailartikel --- */
.hw-news-article{
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); overflow:hidden; box-shadow:var(--hw-shadow-sm);
  max-width:760px; margin:16px auto;
}
.hw-news-hero{ position:relative; aspect-ratio:620/240; background-size:cover; background-position:center; background-color:var(--hw-card-2); }
/* Titel als Overlay OBEN LINKS auf dem Banner (Verlauf von oben dunkel für
   Lesbarkeit auf jedem Promo). */
.hw-news-hero-cap{
  position:absolute; left:0; right:0; top:0;
  padding:16px 22px 34px; color:#fff;
  background:linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.4) 55%, rgba(0,0,0,0));
}
.hw-news-hero-cap .hw-news-title{ margin:0; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.65); }
.hw-news-body{ padding:18px 22px 4px; }
/* Verfasser-Zeile ganz unten (nach dem Inhalt, vor den Reaktionen). */
.hw-news-byline-foot{
  display:flex; align-items:center; gap:12px;
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hw-border);
}
.hw-news-title{ font-size:26px; font-weight:800; margin:0 0 10px; color:var(--hw-heading); line-height:1.15; }
/* Meta = Kopf des Autors links + (Name/Rang oben, Datum/Aufrufe unten).
   ⚠️ .hw-news-ava ist jetzt ein .hw-kopf (Kopf-Ausschnitt), kein <img> mit dem
   ganzen Avatar mehr - Größe kommt aus .hw-kopf, hier nur noch der Rahmen. */
.hw-news-meta{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.hw-news-ava{ border:1px solid var(--hw-border); }
.hw-news-metatext{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.hw-news-byline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hw-news-author{ font-weight:700; font-size:14px; color:var(--hw-link); }
.hw-news-sub{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--hw-text-mute); }
.hw-news-views::before{ content:"•"; margin-right:8px; opacity:.5; }
.hw-news-content{ font-size:14px; line-height:1.65; color:var(--hw-text); }
.hw-news-content img{ max-width:100%; height:auto; border-radius:6px; }
.hw-news-back{ display:inline-block; margin:14px 22px 20px; font-weight:700; color:var(--hw-link); text-decoration:none; }
.hw-news-back:hover{ text-decoration:underline; }

/* --- Liste (news.php) --- */
.hw-news-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:18px auto 0; }
.hw-news-card{
  display:flex; gap:14px; align-items:stretch;
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:var(--hw-radius); overflow:hidden; box-shadow:var(--hw-shadow-sm);
  text-decoration:none; color:inherit;
  transition:border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.hw-news-card:hover{ border-color:var(--hw-accent); transform:translateY(-2px); box-shadow:var(--hw-shadow); text-decoration:none; }
.hw-news-card-img{
  flex:0 0 210px; aspect-ratio:620/240; align-self:center; margin:12px 0 12px 12px;
  border-radius:6px; overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--hw-card-2);
}
.hw-news-card-img-leer{ background:linear-gradient(135deg,var(--hw-card-2),var(--hw-card-3)); }
.hw-news-card-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding:12px 14px 12px 0; }
.hw-news-card-title{ font-weight:800; font-size:16px; color:var(--hw-heading); line-height:1.2; }
.hw-news-card-meta{ display:flex; align-items:center; gap:10px; }
/* In der Kartenliste etwas kleiner - der Ausschnitt wird mitskaliert, damit
   der Kopf vollständig bleibt (44/36 = 0,818 auf die 64px-Bildbreite). */
.hw-news-card-meta .hw-news-ava{ width:36px; height:36px; background-size:52px auto; background-position:-9px -14px; border-radius:7px; }
.hw-news-card-meta .hw-news-author{ font-size:12.5px; }
.hw-news-card-meta .hw-news-sub{ font-size:11px; }
.hw-news-card-excerpt{
  font-size:12.5px; color:var(--hw-text-soft); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:560px){
  .hw-news-card{ flex-direction:column; }
  /* Der Bildkasten sass schief in der Kachel: links 7px Abstand zum
     Kartenrand, rechts keiner. Es reicht NICHT, nur die Breite zu setzen -
     die Grundregel oben bringt margin-left:12px und align-self:center mit,
     beides muss hier mit weg.
     ⚠️ flex-basis ist in der Spalte eine HOEHE - deshalb auto, damit das
     Seitenverhaeltnis 620/240 die Hoehe bestimmt. */
  .hw-news-card-img{ flex:0 0 auto; width:auto; align-self:stretch;
    margin:12px 14px 0; }   /* 14px = derselbe Rand wie .hw-news-card-body */
  .hw-news-card-body{ padding:0 14px 14px; }
}

/* --- Startseite: Topstory-Slider (die letzten 3 News rotieren nacheinander) --- */
.hw-topstory-slider{
  position:relative; aspect-ratio:620/240; margin:0 0 18px; overflow:hidden;
  border:1px solid var(--hw-border-strong); border-radius:var(--hw-radius); box-shadow:var(--hw-shadow-sm);
  transition:border-color .14s ease, box-shadow .14s ease;
}
.hw-topstory-slider:hover{ border-color:var(--hw-accent); box-shadow:var(--hw-shadow); }
/* Jede Folie liegt gestapelt, nur die aktive ist sichtbar (weiche Blende). */
.hw-topstory{
  position:absolute; inset:0; display:block; text-decoration:none;
  opacity:0; visibility:hidden; transition:opacity .5s ease;
}
.hw-topstory.active{ opacity:1; visibility:visible; }
.hw-topstory-img{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--hw-card-2); }
/* Text OBEN: Verlauf von oben dunkel nach unten transparent (Lesbarkeit auf
   jedem Promo). */
.hw-topstory-cap{
  position:absolute; left:0; right:0; top:0;
  padding:12px 16px 30px; color:#fff;
  background:linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.45) 55%, rgba(0,0,0,0));
}
.hw-topstory-kicker{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--hw-accent); color:var(--hw-on-accent); padding:2px 8px; border-radius:999px; margin-bottom:7px; }
.hw-topstory-title{ font-size:20px; font-weight:800; line-height:1.15; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.hw-topstory-meta{ font-size:11px; opacity:.85; margin-top:3px; }
/* Navigationspunkte unten rechts. */
.hw-topstory-dots{ position:absolute; right:12px; bottom:10px; display:flex; gap:6px; z-index:3; }
.hw-topstory-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.5); box-shadow:0 1px 2px rgba(0,0,0,.45); transition:background .12s ease; }
.hw-topstory-dot.active{ background:var(--hw-accent); }

/* --- Startseite: Neuigkeiten-Block (rechte Spalte) --- */
.hw-newsblock{ display:flex; flex-direction:column; gap:8px; }
.hw-newszeile{ display:flex; gap:9px; align-items:center; text-decoration:none; color:inherit; border-radius:8px; padding:5px; transition:background .12s ease; }
.hw-newszeile:hover{ background:var(--hw-accent-soft); text-decoration:none; }
.hw-newszeile-img{ flex:0 0 74px; aspect-ratio:620/240; border-radius:5px; background-size:cover; background-position:center; background-color:var(--hw-card-3); }
.hw-newszeile-img-leer{ background:linear-gradient(135deg,var(--hw-card-2),var(--hw-card-3)); }
.hw-newszeile-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.hw-newszeile-titel{ font-size:12.5px; font-weight:700; color:var(--hw-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-newszeile-datum{ font-size:10.5px; color:var(--hw-text-mute); }
.hw-mehr{ display:inline-block; margin-top:9px; font-size:12px; font-weight:700; color:var(--hw-link); text-decoration:none; }
.hw-mehr:hover{ text-decoration:underline; }

/* --- Reaktionen (Like/Dislike) auf dem Artikel --- */
.hw-news-reactions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }
.hw-news-react-label{ font-size:12px; color:var(--hw-text-mute); margin-right:2px; }
.hw-react{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:700 13px Verdana,Arial,sans-serif; color:var(--hw-text);
  background:var(--hw-card-2); border:1px solid var(--hw-border-strong); border-radius:999px;
  padding:6px 14px; transition:border-color .12s ease, background .12s ease, color .12s ease;
}
.hw-react svg{ opacity:.7; }
.hw-react:hover{ border-color:var(--hw-good); color:var(--hw-text); }
.hw-react-neg:hover{ border-color:var(--hw-bad); }
.hw-react.aktiv{ background:var(--hw-good); border-color:var(--hw-good); color:#fff; }
.hw-react.aktiv svg{ opacity:1; }
.hw-react-neg.aktiv{ background:var(--hw-bad); border-color:var(--hw-bad); }

/* --- Kommentare unter der News --- */
.hw-news-komm{ max-width:760px; margin:20px auto 0; }
.hw-news-komm-titel{ font-size:16px; font-weight:800; color:var(--hw-heading); margin:0 0 12px; }
.hw-news-komm-form{ margin:0 0 18px; }
.hw-news-komm-form textarea{
  width:100%; box-sizing:border-box; resize:vertical; min-height:70px;
  padding:10px 12px; font:13px Verdana,Arial,sans-serif; line-height:1.45;
  color:var(--hw-text); background:var(--hw-card); border:1px solid var(--hw-border-strong); border-radius:9px;
}
.hw-news-komm-form button{ margin-top:8px; }

/* =====================================================================
   Preis- / Umlauf-Verlauf: Reiter-Umschalter im selben Kasten
   ---------------------------------------------------------------------
   Die beiden Reiter ersetzen die feste Ueberschrift "Preisentwicklung".
   Der aktive sieht aus wie die Sektions-Ueberschrift (16px fett), der
   inaktive ist ein gedaempfter, klickbarer Link mit Akzent-Unterstrich.
   Der Umlauf-Graph wird blau/tuerkis eingefaerbt, damit er sich vom gelben
   Preis-Graph abhebt (der Renderer vergibt feste .hw-chart-*-Klassen; wir
   faerben nur innerhalb von .hw-chart-umlauf um).
   ===================================================================== */
.hw-graph-tabs{ display:inline-flex; align-items:baseline; gap:16px; }
.hw-graph-tab{
  font-size:16px; font-weight:700; text-decoration:none; color:var(--hw-text-mute);
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:color .14s ease, border-color .14s ease;
}
.hw-graph-tab:hover{ color:var(--hw-text); }
.hw-graph-tab.active{ color:var(--hw-heading); border-bottom-color:var(--hw-accent); }
.hw-sec-titel{ font-size:16px; font-weight:700; color:var(--hw-heading); }

/* Nur der aktive Graph ist sichtbar; der Reiter tauscht sie client-seitig. */
.hw-graph-panel{ display:none; }
.hw-graph-panel.active{ display:block; }

.hw-chart-umlauf .hw-chart-line{ stroke:#2f95b3; }
.hw-chart-umlauf .hw-chart-area{ fill:#2f95b3; opacity:.13; }
.hw-chart-umlauf .hw-chart-dot{ stroke:#2f95b3; }
.hw-chart-umlauf .hw-chart-dot:hover{ fill:#2f95b3; }

/* =====================================================================
   Flash-Meldung als schwebender Toast (oben zentriert, auto-weg nach 5 s)
   ---------------------------------------------------------------------
   Gleiche Optik wie im Housekeeping. Hell/dunkel ueber die --hw-Variablen.
   Loest den alten vollbreiten #login-errors-Balken ab, der im Fluss lag
   und das Layout verschob.
   ===================================================================== */
.hw-flash{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:9999; max-width:min(680px, 92vw);
  display:flex; align-items:center; gap:12px;
  background:var(--hw-card); color:var(--hw-text);
  border:1px solid var(--hw-border); border-left:4px solid var(--hw-accent);
  border-radius:8px; padding:12px 16px;
  box-shadow:var(--hw-shadow); font-size:14px; line-height:1.45;
  opacity:1; transition:opacity .4s ease, transform .4s ease;
}
.hw-flash-text{ flex:1; }
.hw-flash-x{
  background:none; border:0; color:var(--hw-text-mute);
  font-size:20px; line-height:1; cursor:pointer; padding:0 2px; flex:0 0 auto;
}
.hw-flash-x:hover{ color:var(--hw-text); }
.hw-flash-weg{ opacity:0; transform:translateX(-50%) translateY(-12px); pointer-events:none; }

/* =========================================================================
   Habbo-Profilseite (profil.php)
   Aufbau: Kopf mit Avatar/Motto/Abzeichen, Kennzahlen, dann das gewohnte
   Möbel-Raster. Farben kommen aus den Variablen -> hell wie dunkel richtig.
   ========================================================================= */
.hw-profil{
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:10px; padding:16px 18px; margin-bottom:18px;
  box-shadow:var(--hw-shadow-sm);
}
.hw-profil-kopf{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
/* Bühne mit Podest - Werte spiegeln die Rangliste (.r3-buehne), nur doppelt
   so groß, weil der Avatar hier in 2x steht. */
.hw-profil-buehne{
  position:relative; flex:0 0 auto; width:160px; height:232px; border-radius:14px;
  background:var(--hw-card-2); border:1px solid var(--hw-border); overflow:hidden;
}
.hw-profil-buehne::before{
  content:""; position:absolute; inset:0; opacity:.32;
  background:radial-gradient(circle at 50% 74%, rgba(77,216,255,.5) 0%, transparent 66%);
}
.hw-profil-podest{
  position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  width:120px; height:16px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(77,216,255,.45), rgba(77,216,255,.05) 70%, transparent);
}
.hw-profil-avatar{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:1;
  image-rendering:pixelated; filter:drop-shadow(0 4px 7px rgba(6,11,20,.55));
}
@media (max-width:560px){
  /* Auf dem Handy zurück auf einfache Größe - 160px Bühne neben dem Namen
     wäre dort die halbe Breite. */
  .hw-profil-buehne{ width:86px; height:124px; border-radius:12px; }
  .hw-profil-avatar{ width:64px; height:110px; }
  .hw-profil-podest{ width:66px; height:11px; bottom:6px; }
}
.hw-profil-text{ flex:1 1 240px; min-width:0; }
.hw-profil-text h1{
  margin:0 0 4px; font-size:22px; color:var(--hw-heading);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.hw-profil-hc{
  background:var(--hw-accent); color:#111; font-weight:700;
  font-size:11px; letter-spacing:.04em; border-radius:4px; padding:2px 6px;
}
.hw-profil-motto{
  font-style:italic; color:var(--hw-text-soft); font-size:13px; margin-bottom:6px;
  overflow-wrap:anywhere;
}
.hw-profil-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--hw-text-mute);
}
.hw-profil-status.aktiv{ color:var(--hw-good); font-weight:600; }
.hw-profil-badges{ display:flex; flex-wrap:wrap; gap:4px; margin-top:9px; }
.hw-profil-badges img{ width:26px; height:auto; image-rendering:pixelated; }

.hw-profil-zahlen{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
  border-top:1px solid var(--hw-border); padding-top:12px;
}
.hw-profil-zahlen > div{
  flex:1 1 110px; background:var(--hw-card-2); border-radius:8px;
  padding:9px 12px; text-align:center;
}
.hw-profil-zahlen b{ display:block; font-size:19px; color:var(--hw-heading); }
.hw-profil-zahlen span{ font-size:11px; color:var(--hw-text-mute); }
.hw-profil-hinweis{ font-size:11.5px; color:var(--hw-text-mute); margin:8px 0 0; }

/* Preis auf der Besitz-Karte: Gesamtwert gross, Einzelpreis klein daneben. */
.hw-karte-je{ font-size:11px; color:var(--hw-text-mute); font-weight:400; }

.hw-profil-angebote{ display:flex; flex-direction:column; gap:6px; }
.hw-profil-angebot{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:8px; padding:7px 10px; color:var(--hw-text);
}
.hw-profil-angebot:hover{ border-color:var(--hw-border-strong); }
.hw-profil-angebot img{ width:38px; height:38px; object-fit:contain; image-rendering:pixelated; }
.hw-profil-angebot span{ display:flex; flex-direction:column; }
.hw-profil-angebot small{ color:var(--hw-text-mute); font-size:11.5px; }

/* Anklickbare Köpfe/Namen: sollen wie Verweise wirken, ohne Unterstrich-Wirrwarr. */
a.hw-owner{ text-decoration:none; }
a.hw-name{ color:inherit; text-decoration:none; }
a.hw-name:hover{ color:var(--hw-link); text-decoration:underline; }

/* ---- Vorschlagsliste der Habbo-Suche ------------------------------------
   Teilt sich die Bausteine (.hw-sr-*) mit der Möbelsuche, damit beide gleich
   aussehen. Eigener Kasten, weil er unter dem RECHTEN Feld hängt. */
#habbo_results{
  position:absolute; left:-2px; right:-2px; top:calc(100% + 4px);
  background:var(--hw-card); border:1px solid var(--hw-border);
  border-radius:14px; box-shadow:var(--hw-shadow);
  padding:6px; z-index:700; max-height:340px; overflow-y:auto; text-align:left;
}
/* Kopf statt Möbelbild: rund, damit man sofort sieht, dass es Personen sind.
   Gleicher Ausschnitt wie .hw-kopf (siehe Messung dort): unskaliert ab
   (13|17). Vorher lief hier der ganze Avatar auf 38px geschrumpft ins
   Rund - der Kopf sass dadurch klein und zu tief. */
.hw-sr-kopf{
  width:40px; height:40px; flex:0 0 40px;
  background:var(--hw-card-2) -13px -17px/auto no-repeat;
  border:1px solid var(--hw-border); border-radius:50%;
  image-rendering:pixelated;
}
/* Mit den Pfeiltasten gewählter Eintrag - gleiche Optik wie beim Überfahren. */
.hw-sr-item.aktiv{ background:var(--hw-accent-soft); }

/* Kopf in den Habbo-Ranglisten - rund, damit Personen und Möbel unterscheidbar
   bleiben (die Möbel-Karten nutzen .hw-rank-img mit eckigem Rahmen). */
.hw-rank-kopf{
  width:40px; height:40px; flex:0 0 40px;
  background:var(--hw-card-2) -13px -17px/auto no-repeat;
  border:1px solid var(--hw-border); border-radius:50%;
  image-rendering:pixelated;
}

/* =====================================================================
   EISNACHT-SCHICHT (Redesign 29.07.2026)
   Steht bewusst GANZ AM ENDE: spätere Regeln gewinnen, so übersteuert
   diese Schicht gezielt die Alt-Optik, ohne 2400 Zeilen anzufassen.
   Bausteine laut abgenommener Vorlage: Kopf mit Glow-Logo + Spruch,
   Launcher-Navigation mit Linien-Icons, News-Bühne + Rare der Woche,
   leuchtende Seltenheits-Chips, Möbelkarten mit Raritäts-Oberkante.
   ===================================================================== */

/* ---- Grundfläche: ruhiges Stahlblau, nachts mit feinen Sternpunkten ---- */
#bg{ background-image:none !important; background-color:var(--hw-page) !important; }
html[data-theme="dark"] #bg{
  background:
    radial-gradient(1.2px 1.2px at 12% 8%,  rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px     at 78% 4%,  rgba(207,224,255,.4) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 55% 12%, rgba(255,255,255,.32) 50%, transparent 51%),
    linear-gradient(180deg, #060d1a 0%, var(--hw-page) 320px) !important;
  background-color:var(--hw-page) !important;
}

/* ---- Kopf: Logo mit Eis-Glow links, Spruch daneben ---- */
#header{ background:none !important; border:0 !important; }
#header_image{
  height:auto !important; padding:22px 20px 18px !important;
  background:none !important;
  display:flex; align-items:center; gap:26px;
  max-width:990px; margin:0 auto;
}
#logolink{
  position:static !important; display:block;
  width:150px !important; height:113px !important; flex:0 0 150px;
  background:url('/style/2014/images/logo_web.png') no-repeat center/contain !important;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 16px rgba(77,216,255,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
html:not([data-theme="dark"]) #logolink{
  filter:drop-shadow(0 3px 8px rgba(29,42,60,.28));
}
@media (min-resolution:1.5dppx){
  #logolink{ background-image:url('/style/2014/images/logo_web@2x.png') !important; }
}
/* Der Spruch steht IMMER auf der Seite (nicht auf dunklem Band) und folgt
   deshalb den Modus-Farben. */
.hw-claim .hw-claim-titel{
  font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--hw-heading);
}
html[data-theme="dark"] .hw-claim .hw-claim-titel{ text-shadow:0 0 18px rgba(77,216,255,.25); }
.hw-claim p{ margin:4px 0 0; font-size:12.5px; color:var(--hw-text-soft); }

/* ---- Launcher-Navigation: Linien-Icons, Licht = Interaktion ---- */
#top{
  background:var(--hw-chrome) !important;
  border-top:1px solid rgba(77,216,255,.10) !important;
  border-bottom:1px solid rgba(77,216,255,.14) !important;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.7) !important;
}
#top_inner a.hw-navpunkt svg{
  width:22px; height:22px;
  filter:none;                       /* kein Entsättigen mehr - currentColor */
  opacity:.75;
  transition:opacity .15s ease, filter .15s ease, transform .15s ease;
}
#top_inner a.hw-navpunkt{
  color:#93a8c4 !important;
  border-bottom:0 !important; border-radius:10px !important;
  margin:6px 1px !important; padding:6px 12px 5px !important;
  gap:4px;
}
#top_inner a.hw-navpunkt:hover{
  color:#e6eef8 !important; background:rgba(77,216,255,.08) !important;
}
#top_inner a.hw-navpunkt:hover svg{
  opacity:1; color:#4dd8ff;
  filter:drop-shadow(0 0 7px rgba(77,216,255,.7));
  transform:translateY(-1px);
}
#top_inner a.hw-navpunkt.aktiv{
  color:#7ae9ff !important; background:rgba(77,216,255,.12) !important;
  border-bottom:0 !important;
}
#top_inner a.hw-navpunkt.aktiv svg{
  opacity:1; color:#4dd8ff;
  filter:drop-shadow(0 0 8px rgba(77,216,255,.8));
}
/* Anmelde-Pille + Schalter: Eis statt Gelb, mit Glow */
#oh_login_button{
  background:linear-gradient(100deg, #4dd8ff, #7ae9ff) !important;
  color:#04202f !important; border:0 !important; border-radius:9px !important;
  font-weight:800 !important;
  box-shadow:0 0 18px rgba(77,216,255,.4) !important;
}
#oh_login_button:hover{ filter:brightness(1.1); }
#hw-theme-toggle{
  position:static; width:34px; height:30px; line-height:30px;
  background:rgba(255,255,255,.06); border:1px solid rgba(77,216,255,.25);
  color:#7ae9ff; border-radius:8px;
}
#hw-theme-toggle:hover{ background:rgba(77,216,255,.14); transform:none; }

/* ---- News-Bühne + Rare der Woche ---- */
.hw-newssplit{
  display:grid; grid-template-columns:1.6fr 1fr; gap:12px;
  margin:0 0 16px;
}
.hw-newssplit .hw-topstory-slider{
  position:relative; min-height:250px; margin:0;
  border:1px solid var(--hw-border); border-radius:13px; overflow:hidden;
  background:var(--hw-card);
}
.hw-newssplit .hw-topstory-slider:hover{
  border-color:var(--hw-border-strong); box-shadow:var(--hw-glow);
}
.hw-topstory-cap{
  top:14px; bottom:auto; left:16px; right:16px; padding:0; background:none;
}
/* Schleier: oben dunkel (der Titel liegt OBEN), unten klar */
.hw-topstory-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,14,26,.92) 0%, rgba(8,14,26,.5) 40%, rgba(8,14,26,0) 68%);
}
.hw-topstory-kicker{
  background:linear-gradient(100deg, #4dd8ff, #7ae9ff); color:#04202f;
  border-radius:5px; padding:2px 9px 3px;
  box-shadow:0 0 12px rgba(77,216,255,.45);
}
.hw-topstory-title{ color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.8); font-size:17px; margin-top:6px; }
.hw-topstory-meta{ color:#c7d6ec; }
/* Punkte: dunkle Pille, damit sie auf JEDEM (auch hellem) Bild lesbar sind */
.hw-topstory-dots{
  right:12px; bottom:11px; gap:6px;
  background:rgba(8,14,26,.72); border-radius:99px; padding:5px 9px;
}
.hw-topstory-dot{ width:6px; height:6px; background:rgba(255,255,255,.45); }
.hw-topstory-dot.active{
  background:#4dd8ff; box-shadow:0 0 8px rgba(77,216,255,.9);
}
.hw-topstory-alle{
  position:absolute; left:12px; bottom:11px; z-index:3;
  background:rgba(8,14,26,.72); color:#7ae9ff; font-size:11px; font-weight:700;
  border-radius:99px; padding:4px 12px 5px; text-decoration:none;
}
.hw-topstory-alle:hover{ color:#fff; }

.hw-rare{
  background:var(--hw-card); border:1px solid var(--hw-border); border-radius:13px;
  padding:13px 14px; display:flex; flex-direction:column; text-align:center;
}
.hw-rare-titel{
  font-size:12.5px; font-weight:800; color:var(--hw-heading);
  text-align:left; margin-bottom:10px;
  display:flex; align-items:center; gap:8px;
}
.hw-rare-titel::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--hw-accent); box-shadow:0 0 8px rgba(77,216,255,.8);
}
.hw-rare-buehne{
  display:flex; align-items:center; justify-content:center;
  height:110px; border-radius:11px; margin-bottom:10px; padding:10px;
  background-color:var(--hw-card-2);
  background-image:radial-gradient(ellipse at 50% 100%,
    color-mix(in srgb, var(--stufe, var(--hw-accent)) 22%, transparent), transparent 65%);
}
.hw-rare-buehne img{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.hw-rare-stufe{
  align-self:center; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--stufe, var(--hw-accent));
  background:color-mix(in srgb, var(--stufe, var(--hw-accent)) 14%, transparent);
  border-radius:5px; padding:2px 9px 3px;
}
.hw-rare-name{ font-size:15px; font-weight:800; color:var(--hw-heading); margin:6px 0 2px; }
.hw-rare-preis{ font-size:17px; font-weight:800; color:var(--hw-link); }
html[data-theme="dark"] .hw-rare-preis{ text-shadow:0 0 12px rgba(77,216,255,.4); }
.hw-rare-preis small{ font-size:10px; color:var(--hw-text-mute); font-weight:400; }
.hw-rare-meta{ font-size:11px; color:var(--hw-text-soft); margin:3px 0 0; }
.hw-rare .hw-mehr{ margin-top:auto; padding-top:8px; text-align:center; }

/* ---- Suche (wohnt jetzt im Inhalt, nicht mehr im Kopfband) ---- */
#hw-suchzeile{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 0 12px; height:auto !important;
  display:flex; gap:12px;
}
#hw-suchzeile .hw-suche{
  flex:1; display:flex; align-items:center; position:relative;
  background:var(--hw-card); border:1px solid var(--hw-border); border-radius:10px;
  height:auto; padding:2px 6px 2px 2px; margin:0; width:auto; max-width:none;
}
#hw-suchzeile .hw-suche:focus-within{
  border-color:var(--hw-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hw-accent) 14%, transparent), var(--hw-glow);
}
#hw-suchzeile .hw-suche input{
  flex:1; background:none; border:0; outline:none; height:38px;
  padding:0 12px; color:var(--hw-text); font-size:13px; width:100%;
}
#hw-suchzeile .hw-suche input::placeholder{ color:var(--hw-text-mute); }
#hw-suchzeile .hw-suche button{
  flex:none; background:none; border:0; cursor:pointer; padding:6px 8px;
  color:var(--hw-text-mute); display:flex; align-items:center;
}
#hw-suchzeile .hw-suche button:hover{ color:var(--hw-accent); }

/* ---- Suchfelder erkennbar machen -------------------------------------------
   Sie standen fast unsichtbar auf dem Seitenhintergrund: Fläche #101c30 auf
   #0a1220 mit blassem Rand - und das Lupensymbol war per "color:#444
   !important" (Zeile ~1607) dunkelgrau auf Dunkelblau, also praktisch weg.
   Deshalb wirkten die beiden Kästen leer.
   ⚠️ Die !important hier sind kein Übermut: sie überstimmen genau jene ältere
   Regel. Ohne sie bleibt das Symbol grau.
   Der Rest ist bewusst zurückhaltend - kräftigerer Rand, etwas Schatten, und
   das Symbol bekommt eine eigene kleine Fläche in Akzentfarbe, damit man sieht,
   dass man hier tippen UND klicken kann. */
#hw-suchzeile .hw-suche{
  background:var(--hw-card);
  border:1px solid var(--hw-border-strong);
  box-shadow:var(--hw-shadow-sm);
}
#hw-suchzeile .hw-suche:hover{ border-color:var(--hw-accent); }
/* Symbol steht VOR dem Text (Betreiber-Wunsch 02.08.2026) - dort liest man es
   zuerst und erkennt schon vor dem Klick, wofür das Feld da ist. Umgesetzt rein
   über die Position, damit die Reihenfolge im Formular unangetastet bleibt:
   der Knopf ist der Absende-Knopf, und der soll der erste im Formular bleiben.
   ⚠️ Der Platz links dafür wird NICHT hier reserviert, sondern ganz unten im
   Block "Vorlagen-Größe" - dort steht die letzte Padding-Angabe mit !important.
   Ein padding-left an dieser Stelle bliebe wirkungslos (genau das war der
   Fehler am 02.08.: der Text lief unter das Symbol). */
#hw-suchzeile .hw-suche input::placeholder{ color:var(--hw-text-soft); opacity:1; }
#hw-suchzeile .hw-suche button,
#hw-suchzeile #hw-search-btn{
  left:9px; right:auto; top:50%; transform:translateY(-50%);
  width:28px; height:28px; padding:0 !important;
  /* KEIN Kasten mehr (Betreiber 02.08.2026): Das Symbol ist ein Symbol, kein
     Knopf. Fläche, Radius und Kontur fallen weg - anklickbar bleibt es
     trotzdem, es ist weiterhin der Absende-Knopf des Formulars.
     ⚠️ Alle drei !important sind nötig: Fläche, Kontur und Schatten kommen
     aus den alten Knopf-Regeln (~531, ~673, ~694), die auf #hw-search-btn
     zielen und ohne !important gewinnen würden. */
  background:none !important; border:0 !important; box-shadow:none !important;
  border-radius:0;
  color:color-mix(in srgb, var(--hw-accent) 55%, var(--hw-text-mute)) !important;
  transition:color .15s ease, filter .15s ease;
}
/* Das Aufleuchten hängt am GANZEN Feld, nicht am Symbol: Wer irgendwo über den
   Kasten fährt - oder darin tippt - sieht das Symbol angehen. Vorher musste man
   die 28 Pixel genau treffen, damit sich überhaupt etwas rührte.
   ⚠️ Die ID-Fassung darunter ist Pflicht, keine Doppelung: Die Grundregel oben
   trifft #hw-suchzeile #hw-search-btn (zwei IDs) und schlägt damit jede Zeile,
   die nur ".hw-suche:hover button" sagt - das Möbel-Symbol bliebe sonst als
   einziges dunkel, während das Habbo-Symbol angeht. */
#hw-suchzeile .hw-suche:hover button,
#hw-suchzeile .hw-suche:focus-within button,
#hw-suchzeile .hw-suche:hover #hw-search-btn,
#hw-suchzeile .hw-suche:focus-within #hw-search-btn{
  color:var(--hw-accent) !important;
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--hw-accent) 45%, transparent));
}

/* ---- Seltenheits-Chips: jeder leuchtet in seiner Raritätsfarbe ---- */
.hw-stufen{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.hw-stufen-chip{
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; text-decoration:none;
  color:var(--hw-text-soft); background:var(--hw-card);
  border:1px solid var(--hw-border); border-radius:8px; padding:5px 12px 6px;
}
html[data-theme="dark"] .hw-stufen-chip{
  box-shadow:0 0 10px color-mix(in srgb, var(--stufe, transparent) 30%, transparent);
}
.hw-stufen-chip i{
  width:9px; height:9px; border-radius:3px; flex:none;
  background:var(--stufe, var(--hw-text-mute));
}
html[data-theme="dark"] .hw-stufen-chip i{
  box-shadow:0 0 8px var(--stufe, transparent);
}
.hw-stufen-chip:hover{
  color:var(--hw-text);
  border-color:color-mix(in srgb, var(--stufe, var(--hw-accent)) 55%, var(--hw-border));
}
.hw-stufen-chip.aktiv{
  color:#04202f; border-color:transparent;
  background:linear-gradient(100deg, var(--hw-accent), var(--hw-accent-2));
  box-shadow:var(--hw-glow-stark);
}
html:not([data-theme="dark"]) .hw-stufen-chip.aktiv{ color:#fff; }
.hw-stufen-chip.aktiv i{ background:currentColor; box-shadow:none; }

/* ---- Ansichts-Tabs mit leuchtendem Unterstrich ---- */
.hw-tabs{
  display:flex; gap:20px; align-items:center;
  border-bottom:1px solid var(--hw-border); margin:0 0 16px;
}
.hw-tabs a{
  padding:8px 2px; color:var(--hw-text-soft); font-weight:700; font-size:12.5px;
  text-decoration:none; position:relative;
}
.hw-tabs a:hover{ color:var(--hw-text); }
.hw-tabs a.aktiv{ color:var(--hw-link); }
.hw-tabs a.aktiv::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--hw-accent), var(--hw-accent-2));
  box-shadow:0 -1px 10px color-mix(in srgb, var(--hw-accent) 60%, transparent);
}

/* ---- Möbelkarten: Raritätsfarbe als Oberkante + Glow beim Überfahren ---- */
.hw-karte{ border-top:3px solid var(--rare, var(--hw-border)) !important; }
.hw-karte:hover{
  border-color:var(--hw-border-strong);
  border-top-color:var(--rare, var(--hw-accent)) !important;
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--rare, var(--hw-accent)) 50%, transparent);
}
.hw-karte .hw-preis{ color:var(--hw-link); font-weight:800; }

/* ---- Filter-Pillen: ruhig, Fokusfarbe Eis (Alt-Optik entschärft) ---- */
.hw-filter{ border:0; background:none; padding:0; margin:0 0 10px; }
.hw-filter-chip{
  background:var(--hw-card); border:1px solid var(--hw-border);
  color:var(--hw-text-soft); border-radius:8px; font-weight:700;
}
.hw-filter-chip:hover, .hw-filter-chip.aktiv{
  border-color:var(--hw-accent); color:var(--hw-text);
  box-shadow:var(--hw-glow);
}

/* ---- Fußbereich: Habbo-Köpfe mit Eis-Glow beim Überfahren ---- */
.hw-fuss-kopf:hover .hw-kopf{ box-shadow:0 0 14px rgba(77,216,255,.35); }

/* ---- Handy ---- */
@media (max-width: 900px){
  .hw-newssplit{ grid-template-columns:1fr; }
  #hw-suchzeile{ flex-direction:column; }
  #header_image{ flex-direction:column; text-align:center; gap:8px; padding:16px 14px 12px !important; }
  .hw-claim p{ font-size:11.5px; }
}

/* ---- Eisnacht-Nachzügler: Alt-Reste ausknipsen -------------------------
   Die Skyline-Silhouetten haengen an PSEUDO-Elementen - ein background:none
   auf #header erreicht sie nicht. Und der Kopf war auf 158px festgenagelt.
   Der Betreiber hat die Stadt-Optik fuer Eisnacht ausdruecklich abgewaehlt. */
body::after{ display:none !important; }
#header::after{ display:none !important; }
#header{ height:auto !important; overflow:visible !important; background:none !important; }

/* aspect-ratio + min-height ergibt eine MINDESTBREITE (250px x 620/240 =
   645px) - genau die schob die Buehne ueber die Rare-Box. Ohne aspect-ratio
   streckt das Grid die Buehne von selbst auf die Hoehe der Rare-Box. */
.hw-newssplit .hw-topstory-slider{ aspect-ratio:auto; height:auto; }

/* ---- Eisnacht auf dem Handy: Launcher kompakt, sonst laeuft die Leiste
   ueber und schiebt die ganze Seite in die Breite (der abgeschnittene
   Spruch war nur die Folge dieses Ueberlaufs). Steht NACH den Desktop-
   Regeln oben, weil die dort mit !important arbeiten. */
@media (max-width: 600px){
  #top_inner{ padding-left:2px; }
  #top_inner a.hw-navpunkt{
    flex:1; min-width:0 !important;
    padding:6px 3px 5px !important; margin:4px 0 !important;
    font-size:10px;
  }
  #top_inner a.hw-navpunkt svg{ width:18px; height:18px; }
  .hw-claim .hw-claim-titel{ font-size:16px; }
  #logolink{ width:120px !important; height:90px !important; flex-basis:auto; }
}

/* ---- 1:1-Angleich an die Vorlage (Betreiber-Abnahme, 2. Runde) ---- */
#wrap, #content{ width:auto !important; max-width:1080px !important;
  margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; }
#top_inner{ justify-content:center !important; margin:0 auto; padding-left:0 !important; flex:1; }
#header_image{ justify-content:center !important; }
.hw-claim{ flex:0 0 auto; }
.hw-claim-stand{
  display:inline-block; margin-top:9px; font-size:11px; color:var(--hw-link);
  border:1px solid color-mix(in srgb, var(--hw-accent) 40%, transparent);
  border-radius:99px; padding:3px 12px;
  background:color-mix(in srgb, var(--hw-accent) 8%, transparent);
}
html[data-theme="dark"] .hw-claim-stand{ box-shadow:0 0 12px rgba(77,216,255,.18); }
/* Karten wie in der Vorlage: Abzeichen unter dem Bild, Meta-Zeile, Eis-Preis */
.hw-karte-stufe{
  align-self:flex-start; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.07em; color:var(--stufe, var(--hw-accent));
  background:color-mix(in srgb, var(--stufe, var(--hw-accent)) 14%, transparent);
  border-radius:5px; padding:2px 8px 3px; margin:0 0 4px;
  display:inline-block;
}
.hw-karte-meta{ font-size:11px; color:var(--hw-text-mute); margin:2px 0 4px; }
.hw-preis small{ font-size:10px; color:var(--hw-text-mute); font-weight:400; }
/* Filter rechts auf der Tab-Linie */
.hw-tabs-rechts{ margin-left:auto; display:flex; align-items:center; padding-bottom:5px; }
.hw-tabs-rechts .hw-filter{ margin:0; display:flex; gap:8px; }
/* Seitenleiste unter das Raster: volle Breite fuers Raster wie in der Vorlage */
.hw-start{ display:block !important; }
.hw-spalte-links, .hw-spalte-rechts{ width:auto !important; float:none !important; }
.hw-spalte-rechts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; align-items:start; }
@media (max-width:900px){ .hw-spalte-rechts{ grid-template-columns:1fr; } }
/* Fussbereich: dunkles Stahlband mit Eis-Akzenten (Alt-Farben raus) */
#online_viewer{ background:var(--hw-chrome-3) !important; border-top:1px solid rgba(77,216,255,.12) !important; color:#93a8c4 !important; }
#online_viewer_inner{ background:none !important; }
#online_viewer b{ color:#4dd8ff; }
.hw-fuss-stat, .hw-fuss-neu-titel{ color:#93a8c4 !important; }
.hw-fuss-name{ color:#93a8c4 !important; }
#footer{ background:var(--hw-chrome-3) !important; color:#5e7396 !important; border:0 !important; }
#footer a{ color:#93a8c4 !important; }
#footer a:hover{ color:#4dd8ff !important; }

.hw-preis small{ margin-left:3px; }

/* ---- 1:1-Runde 3: Kaesten weg, Karten exakt wie die Vorlage ----
   In der Vorlage schweben Buehne, Suche, Chips und Raster DIREKT auf der
   Seite - kein Rahmen um den Inhalt, kein Panel hinter dem Raster. */
#content.hw-offen{ background:none !important; border:0 !important;
  box-shadow:none !important; padding:14px 0 34px !important; }
.hw-spalte-links .hw-block{ background:none !important; border:0 !important;
  box-shadow:none !important; padding:0 !important; }
.hw-spalte-links .hw-block-titel{
  background:none !important; border:0 !important; padding:0 0 8px !important;
  text-align:left; font-size:14px; font-weight:800; color:var(--hw-heading);
}
.hw-spalte-links .hw-block-inhalt{ background:none !important; border:0 !important;
  padding:0 !important; box-shadow:none !important; }
.hw-raster{ gap:14px; }
.hw-karte{
  background:var(--hw-card) !important; border:1px solid var(--hw-border);
  border-radius:13px !important; padding:12px !important; overflow:hidden;
}
.hw-karte-bild{
  height:112px !important; min-height:0 !important; border-radius:10px;
  background-color:var(--hw-card-2) !important; margin:0 0 8px !important;
  border:0 !important;
}
.hw-karte-fuss{ background:none !important; border:0 !important; padding:0 !important; }
.hw-karte-name{ font-size:13px; font-weight:700; color:var(--hw-text); }
/* Suchfelder: Text links wie in der Vorlage */
#searchinput, #habboinput{ text-align:left !important; }
/* Die zwei Zusatz-Boxen unter dem Raster als ruhige Eisnacht-Karten mit
   kleinem Titel + Leuchtpunkt (statt grosser zentrierter Ueberschrift) */
.hw-spalte-rechts .hw-block{
  background:var(--hw-card) !important; border:1px solid var(--hw-border) !important;
  border-radius:13px !important; padding:12px 13px !important; box-shadow:none !important;
}
.hw-spalte-rechts .hw-block-titel{
  background:none !important; border:0 !important; padding:0 !important;
  margin:0 0 9px; text-align:left; font-size:12.5px; font-weight:800;
  color:var(--hw-heading); display:flex; align-items:center; gap:8px;
}
.hw-spalte-rechts .hw-block-titel::before{
  content:""; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--hw-accent); box-shadow:0 0 8px rgba(77,216,255,.8);
}
.hw-spalte-rechts .hw-block-inhalt{ background:none !important; border:0 !important;
  padding:0 !important; }

/* ---- Fussbereich exakt wie die Eisnacht-Vorlage ---- */
#online_viewer{
  background:linear-gradient(180deg,#0d1a30 0%, #0a1424 100%) !important;
  border-top:1px solid var(--hw-border) !important; margin-top:44px;
}
#online_viewer_inner{ max-width:1040px; margin:0 auto; padding:24px 20px; }
.hw-fuss-stat{ text-align:center; font-size:12px; color:#93a8c4 !important; margin-bottom:14px; }
.hw-fuss-stat b{ color:#4dd8ff !important; text-shadow:0 0 10px rgba(77,216,255,.35); }
.hw-fuss-neu-titel{ display:block; text-align:center; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; color:#5e7396 !important; margin-bottom:12px; font-weight:700; }
.hw-fuss-koepfe{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hw-fuss-kopf .hw-kopf{
  border-radius:12px !important; background-color:#16263e !important;
  border:1px solid #20334e !important;
}
.hw-fuss-kopf:hover .hw-kopf{ border-color:#4dd8ff !important; box-shadow:0 0 14px rgba(77,216,255,.35); }
.hw-fuss-name{ color:#93a8c4 !important; }
#footer{ background:#081020 !important; border-top:1px solid #14243a !important;
  text-align:center; font-size:11px; color:#5e7396 !important; padding:14px 0 !important; }

/* ---- Fussbereich: die Dunkelmodus-Altregeln (Z.1736/1742, #272727/#131313
   mit !important UND hoeherer Spezifitaet durch html[data-theme]) haben alle
   spaeteren #online_viewer-Regeln geschlagen - DAS war das Grau. Gleich
   starke Selektoren, spaeter im Blatt -> jetzt gewinnt Eisnacht. ---- */
html[data-theme="dark"] #online_viewer{
  background:linear-gradient(180deg,#0d1a30 0%, #0a1424 100%) !important;
  border-top:1px solid #20334e !important; color:#93a8c4 !important;
}
html[data-theme="dark"] #footer{ background:#081020 !important; color:#5e7396 !important; }

/* ---- Fussbereich DURCHGEHEND ueber die volle Fensterbreite ----
   Der Fuss steckt im #wrap, und der ist seit dem 1:1-Umbau auf 1080px
   begrenzt - dadurch wurde das Band zur schwebenden Box. Ausbruch per
   100vw + negativem Rand; der INHALT bleibt ueber die *_inner-Regel
   zentriert (wie in der Vorlage). */
#online_viewer, #footer{
  width:100vw !important; max-width:none !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important; box-sizing:border-box;
}

/* ---- 100vw-Korrektur: 100vw rechnet die vertikale Scrollleiste MIT ein,
   dadurch war die Seite um Scrollleisten-Breite zu breit (waagerechter
   Balken unten). Seitliches Ueberstehen wird abgeschnitten - das passt
   sich jeder Monitor-/Scrollleisten-Breite von selbst an. clip statt
   hidden, damit kein neuer Scroll-Container entsteht (hidden als
   Rueckfall fuer aeltere Browser). ---- */
html, body{ overflow-x:hidden; }
@supports (overflow-x: clip){ html, body{ overflow-x:clip; } }

/* ---- Buendiger Abschluss unter dem Fuss ----
   Unter #footer schimmerte ein andersfarbiger Streifen durch (Rest-Hoehe
   von html/body bzw. Alt-Abstaende wie #footer height:90px aus
   template.css). Loesung in beide Richtungen: alles hinter dem Fuss
   bekommt DIESELBE Farbe wie der Fuss, und die Alt-Masse sind neutralisiert
   - damit endet die Seite auf jedem Monitor buendig im Fussband. */
html{ background:#081020 !important; }
body{ margin:0 !important; padding:0 !important; }
#footer{
  height:auto !important; line-height:1.8 !important;
  margin-bottom:0 !important; padding:16px 0 !important;
}
#online_viewer{ margin-bottom:0 !important; }

/* ---- Groessen + Ausrichtung EXAKT wie Vorlage L ----
   Die Vorlage rechnet mit 13px-Basis und 1040px Inhalt; Kopf und
   Navigation sind LINKS in der Inhaltsbreite ausgerichtet (nicht
   zentriert). Live war alles eine Nummer groesser - hier auf die
   Vorlagen-Masse festgenagelt. */
#wrap, #content{ max-width:1040px !important; }
/* Kopf: linksbuendig in der Inhaltsbreite, Logo Vorlagen-Groesse */
#header_image{
  max-width:1040px !important; margin:0 auto !important;
  justify-content:flex-start !important; padding:24px 20px 18px !important; gap:24px;
}
#logolink{ width:132px !important; height:99px !important; flex:0 0 132px; }
.hw-claim .hw-claim-titel{ font-size:20px; }
.hw-claim p{ font-size:12.5px; }
/* Navigation: gleiche Linkskante wie der Inhalt, Login rechts an der
   Inhaltskante (max() haelt auf schmalen Fenstern 20px Abstand) */
#top_inner{
  max-width:1040px; margin:0 auto !important;
  justify-content:flex-start !important; padding:0 14px !important;
}
#top_inner a.hw-navpunkt{ min-width:64px; padding:6px 12px 5px !important; font-size:10.5px; }
#top_inner a.hw-navpunkt svg{ width:20px; height:20px; }
#hw-rechts{ right:max(20px, calc(50% - 508px)) !important; }
/* Suche: Vorlagen-Hoehe statt der grossen Alt-Felder */
#hw-suchzeile .hw-suche{ border-radius:10px; }
/* ⚠️ Links 46px Platz für das Symbol, das absolut IM Feld sitzt (siehe Block
   "Suchfelder erkennbar machen"). Das MUSS hier stehen: diese Zeile ist die
   letzte mit !important und überstimmt jede frühere Padding-Angabe - ein
   padding-left weiter oben bliebe wirkungslos und der Text liefe unter das
   Symbol. Wer das Symbol wieder nach rechts holt, dreht die Werte hier um. */
#hw-suchzeile .hw-suche input{ height:34px !important; font-size:13px !important; padding:0 12px 0 46px !important; }
#hw-suchzeile .hw-suche button svg{ width:16px; height:16px; }
/* Chips + Tabs + Filter in Vorlagen-Groesse */
.hw-stufen{ gap:8px; }
.hw-stufen-chip{ font-size:11px !important; font-weight:700; padding:4px 12px 5px !important; }
.hw-stufen-chip i{ width:8px; height:8px; }
.hw-tabs{ gap:18px; }
.hw-tabs a{ font-size:12.5px !important; padding:7px 2px !important; }
.hw-filter-chip{ font-size:11.5px !important; padding:5px 12px 6px !important; }

/* =====================================================================
   KOPF + NAVIGATION - KANONISCH (ersetzt alle frueheren Header-Regeln)
   Wurzel des verschobenen Logos: das alte "#logolink{ margin:0 auto }"
   aus der ersten Eisnacht-Schicht. Im Flex wirkt margin:auto wie ein
   Zentrier-Magnet (schluckt den freien Raum) - das Logo rueckte in die
   Mitte, der Spruch an die rechte Kante, justify-content war machtlos.
   Dazu galt noch width:990px aus template.css. Hier steht jetzt JEDES
   Mass mit !important, exakt aus vorlage-l-eisnacht.html gemessen.
   ===================================================================== */
#header{ height:auto !important; padding:0 !important; background:none !important; overflow:visible !important; }
#header_image{
  width:auto !important; max-width:1040px !important; height:auto !important;
  margin:0 auto !important; padding:26px 20px 20px !important;
  display:flex !important; align-items:center !important;
  justify-content:flex-start !important; gap:24px !important;
  background:none !important;
}
#logolink{
  position:static !important; display:block !important;
  margin:0 !important;                    /* <- der entscheidende Reset */
  width:137px !important; height:104px !important; flex:0 0 137px !important;
}
.hw-claim{ flex:0 1 auto !important; margin:0 !important; text-align:left; }
.hw-claim .hw-claim-titel{ font-size:22px !important; font-weight:800; }
.hw-claim p{ font-size:13px !important; margin:4px 0 0 !important; }
.hw-claim-stand{ margin-top:10px !important; font-size:11px !important; }
/* Navigations-Kacheln in Vorlagen-Groesse (78px breit, Icon 22px) */
#top{ height:auto !important; min-height:0 !important; padding:0 !important; margin-bottom:0 !important; }
#top_inner{
  width:auto !important; max-width:1040px !important; margin:0 auto !important;
  padding:0 14px !important; justify-content:flex-start !important; gap:4px !important;
}
#top_inner a.hw-navpunkt{
  min-width:78px !important; padding:7px 12px 6px !important;
  margin:8px 1px !important; font-size:10.5px !important; gap:4px !important;
}
#top_inner a.hw-navpunkt svg{ width:22px !important; height:22px !important; }
#oh_login_button{
  position:static !important; width:auto !important; height:auto !important;
  line-height:1.4 !important; padding:8px 16px 9px !important;
  font-size:12.5px !important;
}

/* ---- Kopf-HINTERGRUND exakt wie Vorlage L: dunkler Verlauf + drei
   weiche Licht-Schimmer + feine Eiskristall-Punkte + 3px-Unterkante.
   Schimmer s2/s3 liegen als radiale Ebenen im Verlauf, s1 (der grosse
   links) als geblurrtes Pseudo-Element; die Kristalle als ::before.
   Logo/Spruch bekommen z-index, damit sie UEBER den Schimmern liegen. */
#header{
  position:relative !important; overflow:hidden !important;
  background:
    radial-gradient(ellipse 520px 340px at calc(100% - 170px) -60px, rgba(122,233,255,.14), transparent 70%),
    radial-gradient(ellipse 460px 280px at 40% 130%, rgba(77,216,255,.10), transparent 72%),
    linear-gradient(180deg, #060c17 0%, #0a1424 60%, #0d1a2e 100%) !important;
  border-bottom:3px solid #11233a !important;
}
#header::before{
  content:""; position:absolute; inset:0; opacity:.28; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 70px 40px,  #d9f4ff 50%, transparent 51%),
    radial-gradient(1px 1px at 210px 96px, #bfeaff 50%, transparent 51%),
    radial-gradient(1px 1px at 350px 30px, #eaf9ff 50%, transparent 51%),
    radial-gradient(1px 1px at 520px 110px,#bfeaff 50%, transparent 51%),
    radial-gradient(1px 1px at 660px 64px, #d9f4ff 50%, transparent 51%);
  background-size:760px 150px; background-repeat:repeat;
}
#header_image::before{
  content:""; position:absolute; top:-120px; left:-30px; width:420px; height:300px;
  border-radius:50%; filter:blur(34px); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(77,216,255,.22), transparent 68%);
}
/* position:relative statt static, damit z-index greift - die Alt-Offsets
   left:250px/top:85px aus template.css sind weiter per auto neutralisiert */
#logolink{ position:relative !important; z-index:2 !important; }
.hw-claim{ position:relative; z-index:2; }

/* ---- Feinschliff auf Betreiber-Wunsch (29.07., Abend) ----
   1) Die Trennlinie UEBER der Navigationsleiste soll identisch zur Linie
      DARUNTER sein - die dicke 3px-Kante vom Kopf ist raus, beide Seiten
      der Leiste tragen jetzt dieselbe feine Eis-Linie.
   2) Willkommen-Menue/Avatar bzw. Login-Knopf wieder GANZ RECHTS am
      Fensterrand (nicht an der Inhaltskante). */
#header{ border-bottom:1px solid rgba(77,216,255,.14) !important; }
#top{ border-top:0 !important; }
#hw-rechts{ right:20px !important; }

/* ---- Karten-Feinschliff (Betreiber, 29.07. Abend) ----
   1) Der 3px-border-top brach an der Eckenrundung sichtbar ab. Jetzt ist
      die Raritaetsfarbe eine INNENLIEGENDE Kappe (::before), die vom
      overflow:hidden der Karte sauber mitgerundet wird.
   2) Gold-Schein weg: das alte Boden-Kachelbild (boden-*.png) und der
      gelbe Hover-Schimmer (rgba(255,204,0,...)) sind Reste der Gelb-Aera.
      Die Moebel stehen jetzt auf einer ruhigen, flachen Flaeche. */
.hw-karte{ position:relative; border-top:1px solid var(--hw-border) !important; }
.hw-karte:hover{ border-top-color:var(--hw-border-strong) !important; }
.hw-karte::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--rare, transparent); z-index:1;
}
.hw-karte-bild, .hw-karte-bild.hw-boden{
  background:var(--hw-card-2) !important;   /* Kurzform killt auch das Kachelbild */
}
.hw-karte:hover .hw-karte-bild{ background:var(--hw-card-3) !important; }

/* ---- Farbkappe zustandsUNabhaengig ----
   Die ::before-Kappe verschwand beim Ueberfahren (Hover-Zustaende/Stacking
   der Altregeln). Jetzt liegt die Raritaetsfarbe als HINTERGRUND-EBENE
   direkt auf der Karte: 3px-Streifen oben, rundet mit dem Radius, kann
   von keinem Hover mehr verdeckt werden. Alte Kappe aus. */
.hw-karte::before{ display:none !important; }
.hw-karte{
  background-color:var(--hw-card) !important;
  background-image:linear-gradient(var(--rare, transparent), var(--rare, transparent)) !important;
  background-size:100% 3px !important;
  background-repeat:no-repeat !important;
  background-position:0 0 !important;
}
.hw-karte:hover{ background-color:var(--hw-card) !important; }
/* Talermuenze neben dem Preis (zurueck auf Betreiber-Wunsch) */
.hw-preis .hw-taler{ width:15px; height:15px; margin-left:5px; vertical-align:-2px; image-rendering:pixelated; }
.hw-rare-preis .hw-taler{ width:16px; height:16px; margin-left:5px; vertical-align:-2px; image-rendering:pixelated; }

/* ---- Hover-Clipping der ersten Kartenreihe ----
   Beim Anheben (translateY(-3px)) ragte die Kartenoberkante 3px ueber den
   Container - ein Vorfahre mit overflow:hidden schnitt GENAU die Farbkappe
   ab (nur Reihe 1 betroffen, tiefere Reihen haben Luft nach oben). Die
   ganze Home-Kette darf jetzt ueberstehen; ueber #content.hw-offen bzw.
   .hw-start gescoped, Unterseiten bleiben unberuehrt. */
#content.hw-offen,
#content.hw-offen .hw-start,
#content.hw-offen .hw-spalte-links,
#content.hw-offen .hw-block,
#content.hw-offen .hw-block-inhalt,
#content.hw-offen .hw-raster{ overflow:visible !important; }

/* ---- Hero rechts neben dem Logo: SaaS-/Trading-Optik (29.07.) ----
   Grosse, enge Headline mit Eis-Verlauf auf der Marke, gepunktete
   Unterzeile, darunter Kennzahlen-Pills mit pulsierendem Live-Punkt. */
.hw-claim .hw-claim-titel{
  font-size:24px !important; font-weight:800; letter-spacing:-.02em;
  line-height:1.2; color:#fff;
}
.hw-hero-marke{
  background:linear-gradient(100deg, #4dd8ff, #7ae9ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hw-claim .hw-hero-sub{
  font-size:12.5px !important; color:#93a8c4; margin:6px 0 0 !important;
  font-weight:600; letter-spacing:.01em;
}
.hw-hero-sub span{ color:#3b5478; margin:0 4px; }
.hw-hero-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.hw-hero-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; color:#93a8c4;
  background:rgba(16,28,48,.72); border:1px solid #20334e;
  border-radius:99px; padding:4px 12px 5px;
}
.hw-hero-pill b{ color:#e6eef8; font-weight:800; }
.hw-hero-live{ border-color:rgba(79,208,138,.45); color:#9fd8b6; }
.hw-hero-live i{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#4fd08a; box-shadow:0 0 8px rgba(79,208,138,.9);
  animation:hw-live-puls 2s ease-in-out infinite;
}
@keyframes hw-live-puls{
  0%, 100%{ opacity:1; box-shadow:0 0 8px rgba(79,208,138,.9); }
  50%     { opacity:.45; box-shadow:0 0 3px rgba(79,208,138,.4); }
}
@media (max-width: 600px){
  .hw-claim .hw-claim-titel{ font-size:17px !important; }
  .hw-hero-pills{ justify-content:center; }
}

/* ---- Hero-Statistik als Dashboard-Cards (Betreiber-Spec 29.07., v2) ----
   Ersetzt die Pill-Reihe komplett: grosse dominante Headline (46px/800),
   18px-Unterzeile leicht transparent, darunter VIER gleich breite
   Glas-Cards (dunkel, leichter Blur, duenner Cyan-Rand, Hover ohne
   Button-Anmutung). Nur Bestandsfarben, KEINE Animation. */
.hw-claim{ flex:1 1 auto !important; min-width:0; max-width:840px; }
.hw-claim .hw-claim-titel{
  font-size:46px !important; font-weight:800 !important;
  letter-spacing:-.02em; line-height:1.08; margin:0;
}
.hw-claim .hw-hero-sub{
  font-size:18px !important; font-weight:500;
  color:rgba(230,238,248,.72) !important; margin:18px 0 0 !important;
}
.hw-hero-pills{ display:none !important; }   /* alte Chip-Reihe endgueltig aus */
.hw-hero-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px;
}
.hw-stat{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  background:rgba(16,28,48,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(77,216,255,.22); border-radius:12px;
  padding:12px 14px;
  transition:border-color .15s ease, background-color .15s ease;
}
.hw-stat:hover{ border-color:rgba(77,216,255,.5); background:rgba(22,38,62,.65); }
.hw-stat svg{ width:20px; height:20px; color:#4dd8ff; flex:none; }
.hw-stat b{ font-size:26px; font-weight:800; color:#e6eef8; line-height:1.15; }
.hw-stat > span{ font-size:11px; color:#93a8c4; }
.hw-stat-online i{
  width:12px; height:12px; border-radius:50%; margin:4px 0;
  background:#4fd08a; box-shadow:0 0 8px rgba(79,208,138,.7);
}
.hw-stat-online b{ color:#9fd8b6; font-size:20px; padding-top:2px; }
/* Tablet: 2x2, Handy: untereinander; Headline skaliert mit */
@media (max-width: 1024px){
  .hw-hero-stats{ grid-template-columns:repeat(2, 1fr); }
  .hw-claim .hw-claim-titel{ font-size:32px !important; }
}
@media (max-width: 600px){
  .hw-hero-stats{ grid-template-columns:1fr; }
  .hw-claim .hw-claim-titel{ font-size:23px !important; }
  .hw-claim .hw-hero-sub{ font-size:14px !important; }
  .hw-stat{ align-items:center; }
}

/* ---- Hero KOMPAKT (Betreiber-Spec 29.07., v3) ----
   Kein Landingpage-Held mehr: Header wirkt wie die Kopfzeile eines
   Dashboards (TradingView/GitHub). Headline einzeilig 33px, Logo ~14%
   kleiner und mittig, Cards auf ~62px Hoehe gestaucht, Abstaende eng. */
#header_image{ padding:12px 20px 14px !important; gap:20px !important; align-items:center !important; }
#logolink{ width:118px !important; height:89px !important; flex:0 0 118px !important; }
.hw-claim .hw-claim-titel{ font-size:33px !important; line-height:1.15; white-space:nowrap; }
.hw-claim .hw-hero-sub{ font-size:15px !important; margin:5px 0 0 !important; }
.hw-hero-stats{ margin-top:10px; gap:10px; }
.hw-stat{ padding:8px 12px 9px; gap:2px; border-radius:10px; }
.hw-stat svg{ width:16px; height:16px; }
.hw-stat b{ font-size:21px; }
.hw-stat > span{ font-size:12px; }
.hw-stat-online i{ width:10px; height:10px; margin:3px 0 2px; }
.hw-stat-online b{ font-size:16px; padding-top:0; }
@media (max-width: 1024px){
  .hw-claim .hw-claim-titel{ font-size:26px !important; white-space:normal; }
}
@media (max-width: 600px){
  .hw-claim .hw-claim-titel{ font-size:20px !important; }
  .hw-claim .hw-hero-sub{ font-size:13px !important; }
}

/* ---- Hero final (v4, "weniger ist mehr") ----
   Nur noch drei Elemente: Headline / Untertitel / Info-Pill. Statistik-
   Cards sind aus dem Markup raus, hier zusaetzlich stillgelegt. Header
   zielt auf ~110-120px Gesamthoehe (SteamDB/GitHub-Gefuehl). */
.hw-hero-stats{ display:none !important; }
#header_image{ padding:14px 20px 16px !important; }
.hw-claim .hw-hero-sub{
  font-size:16px !important; font-weight:400 !important;
  color:#93a8c4 !important; margin:5px 0 0 !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hw-hero-aktuell{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:9px; width:fit-content;
  font-size:11.5px; font-weight:600; color:#93a8c4;
  border:1px solid rgba(77,216,255,.35); border-radius:99px;
  padding:4px 13px 5px;
  box-shadow:0 0 12px rgba(77,216,255,.14);
}
.hw-hero-aktuell b{ color:#e6eef8; font-weight:700; }
.hw-hero-aktuell i{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:#4fd08a; box-shadow:0 0 7px rgba(79,208,138,.8);
}
@media (max-width: 600px){
  .hw-claim .hw-hero-sub{ white-space:normal; }
  .hw-hero-aktuell{ margin-left:auto; margin-right:auto; }
}

/* ---- Hero-REVERT (Betreiber-Wunsch): zurueck auf den urspruenglichen
   Eisnacht-Kopf von vor den Hero-Experimenten - 22px-Spruch, 13px-Zeile,
   Stand-Abzeichen, Logo 137px, grosszuegiges Kopf-Padding. Die spaeteren
   Hero-Regeln (46px/33px, Cards, Pills) werden hier zurueckgestimmt. */
#header_image{ padding:26px 20px 20px !important; gap:24px !important; }
#logolink{ width:137px !important; height:104px !important; flex:0 0 137px !important; }
.hw-claim .hw-claim-titel{
  font-size:22px !important; font-weight:800 !important;
  white-space:normal; letter-spacing:-.01em; line-height:1.25;
}
.hw-claim p{ font-size:13px !important; font-weight:400; color:var(--hw-text-soft) !important;
  margin:4px 0 0 !important; white-space:normal; }

/* ---- Dezentes Winken des Kopfleisten-Avatars ----
   Die Hotel-API liefert nur STANDBILDER (auch mit img_format=gif kommt
   ein PNG) - echte Frame-Animation ist nicht moeglich, und der harte
   Zwei-Posen-Wechsel wurde frueher verworfen. Stattdessen wippt die
   Winke-Pose sanft aus dem Fusspunkt: kurzer Gruss alle ~7 Sekunden. */
.hw-winker img{
  transform-origin:50% 92%;
  animation:hw-winken 7s ease-in-out infinite;
}
@keyframes hw-winken{
  0%, 82%, 100%{ transform:rotate(0deg); }
  86%{ transform:rotate(-4deg); }
  90%{ transform:rotate(3deg); }
  94%{ transform:rotate(-3deg); }
  97%{ transform:rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce){ .hw-winker img{ animation:none; } }

/* ---- Echtes Winken: 2-Frame-Animation aus beiden API-Posen ----
   Basisbild = Arm unten, Overlay = Arm oben. Das Overlay blitzt per
   steps() auf (harte Frames wie im Spiel) - 3 Winker alle ~6 Sekunden.
   Ersetzt das fruehere Kipp-Wippen (hier stillgelegt). */
.hw-winker{ position:relative; display:inline-block; }
.hw-winker img{ animation:none; transform:none; }
.hw-winker img.hw-wink-b{
  position:absolute; left:0; top:0; opacity:0;
  animation:hw-wink-frames 5s linear infinite;
}
/* ORIGINALGETREUES Winken: im Spiel ist der Gruss eine 2-Frame-Animation
   mit ~250ms Frame-Wechsel, DURCHGAENGIG waehrend der Geste. Hier: 2s
   echtes Winken (8 Armwechsel a 250ms = je 5% von 5s), dann 3s Pause.
   Harte Flanken ueber 0.1%-Doppelstops (steps() war in der Messung tot). */
@keyframes hw-wink-frames{
  0%, 60%      { opacity:0; }
  60.1%, 65%   { opacity:1; }
  65.1%, 70%   { opacity:0; }
  70.1%, 75%   { opacity:1; }
  75.1%, 80%   { opacity:0; }
  80.1%, 85%   { opacity:1; }
  85.1%, 90%   { opacity:0; }
  90.1%, 95%   { opacity:1; }
  95.1%, 100%  { opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hw-winker img.hw-wink-b{ animation:none; } }

/* ---- Winker-Position zurueck aufs Original ----
   Die Wink-Animation hatte position:relative/inline-block gesetzt und
   damit die urspruengliche Verankerung ueberstimmt: absolut, buendig
   mit der Leisten-Unterkante, ragt nach oben heraus (Z.1847). Genau
   die gilt wieder - die Ueberlagerungs-Frames funktionieren auch im
   absoluten Kasten. */
.hw-winker{
  position:absolute !important; right:14px !important; bottom:0 !important;
  display:block !important; width:64px; height:110px;
  pointer-events:none;
}

/* ---- Butterweiches Winken: 3 echte Frames vom Imager (A-B-C-B-Bogen) ----
   Ersetzt die 2-Frame-Ueberlagerung (hier stillgelegt). Je Overlay eigene
   Sichtfenster im 5s-Zyklus: 2s Winken in 8 Slots a 250ms, 3s Ruhe. */
.hw-winker img.hw-wink-b{ display:none; }
.hw-winker img.hw-wf{ position:absolute; left:0; top:0; opacity:0; }
.hw-winker img.hw-wf-a{ animation:hw-wf-a 5s linear infinite; }
.hw-winker img.hw-wf-b{ animation:hw-wf-b 5s linear infinite; }
.hw-winker img.hw-wf-c{ animation:hw-wf-c 5s linear infinite; }
@keyframes hw-wf-a{
  0%, 60%      { opacity:0; }
  60.1%, 65%   { opacity:1; }
  65.1%, 80%   { opacity:0; }
  80.1%, 85%   { opacity:1; }
  85.1%, 100%  { opacity:0; }
}
@keyframes hw-wf-b{
  0%, 65%      { opacity:0; }
  65.1%, 70%   { opacity:1; }
  70.1%, 75%   { opacity:0; }
  75.1%, 80%   { opacity:1; }
  80.1%, 85%   { opacity:0; }
  85.1%, 90%   { opacity:1; }
  90.1%, 95%   { opacity:0; }
  95.1%, 100%  { opacity:1; }
}
@keyframes hw-wf-c{
  0%, 70%      { opacity:0; }
  70.1%, 75%   { opacity:1; }
  75.1%, 90%   { opacity:0; }
  90.1%, 95%   { opacity:1; }
  95.1%, 100%  { opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .hw-winker img.hw-wf{ animation:none; } }

/* =====================================================================
   PROFILKARTE (U4) — eingeloggter Benutzerbereich im Banner
   Betreiber-Abnahme 30.07.2026: Glas-Karte GANZ RECHTS am Fensterrand
   (#header ist volle Breite + position:relative), NICHT an der 1040px-
   Inhaltskante. Ersetzt den alten #member_area/.hw-willkommen-Block in
   der Navleiste (dessen Regeln oben sind damit tot, aber harmlos).
   ⚠️ Am Winker-Mechanismus (hw-winker/hw-wf-Frames + Outfit-Wächter)
   ändert sich NICHTS — nur die Verankerung wandert in die Karte; die
   Regel unten übersteuert die alte rechts-Verankerung der Wink-Schicht
   per höherer Spezifität (beide !important).
   ===================================================================== */
.hw-profilkarte{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  z-index:5;
  width:300px; min-height:96px;   /* 300: beide Haupt-Pillen (93+111px gemessen) passen in EINE Zeile */
  border-radius:13px;
  background:linear-gradient(180deg, rgba(22,38,62,.78), rgba(16,28,48,.72));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 20px rgba(77,216,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
/* Winker: links unten IN der Karte statt rechts an der Navleiste.
   Füße auf der Karten-Innenkante, Kopf ragt ein paar Pixel hinaus. */
.hw-profilkarte .hw-winker{
  position:absolute !important; left:8px !important; right:auto !important;
  bottom:1px !important; z-index:2;
}
/* Weicher Bodenschatten, damit der Habbo "steht" statt zu schweben */
.hw-pk-schatten{
  position:absolute; left:10px; bottom:5px; width:60px; height:10px;
  border-radius:50%; z-index:1;
  background:radial-gradient(closest-side, rgba(0,0,0,.4), rgba(0,0,0,0));
}
/* Textspalte rechts vom Avatar (8px Rand + 64px Avatar + 6px Luft);
   rechts 26px Luft, damit der Gruß nicht unter das Logout-Icon läuft */
/* ⚠️ #header-Präfix nötig: Alt-Regeln vererben text-align:center und machen
   Header-Links zu display:flex (= Blockzeile) — gemessen per CDP-Probe.
   Gleiche Spezifität wie die Alt-Regeln + später geladen = gewinnt. */
#header .hw-pk-inhalt{ position:relative; z-index:2; margin-left:78px; padding:9px 10px 9px 0; text-align:left; }
#header .hw-pk-gruss{ padding-right:20px; }  /* läuft sonst unter das Logout-Icon */
.hw-pk-gruss{ font-size:11px; font-weight:700; color:#93a8c4; letter-spacing:.2px; line-height:1.2; }
.hw-pk-name{
  font-size:15.5px; font-weight:700; color:#fff; line-height:1.25; margin-top:1px;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;  /* lange Namen */
}
/* Name = Link zum eigenen Sammlerprofil (dezent, leuchtet erst beim Hover) */
#header .hw-pk-name a{ color:inherit; text-decoration:none; }
#header .hw-pk-name a:hover{ color:#7ae9ff; text-shadow:0 0 10px rgba(77,216,255,.5); }
.hw-pk-pillen{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
#header a.hw-pk-pille{ display:inline-flex; }  /* Alt-Regel macht Header-Links zu display:flex */
.hw-pk-pille{
  display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#93a8c4; font-size:10.5px; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.hw-pk-pille:hover{
  color:#7ae9ff; border-color:rgba(77,216,255,.55); background:rgba(77,216,255,.08);
  box-shadow:0 0 10px rgba(77,216,255,.25);   /* Glow nur als Hover-Signal */
  text-decoration:none;
}
.hw-pk-pille svg{ width:11px; height:11px; margin-right:4px; flex:none; }
/* Admin-Pille: BESCHRIFTET + Schild-Icon, dezent eisblau (Staff-Zugang).
   Ein Zahnrad-Icon allein war dem Betreiber nicht eindeutig genug. */
.hw-pk-admin{ color:#4dd8ff; border-color:rgba(77,216,255,.35); background:rgba(77,216,255,.06); }
/* Logout-Icon oben rechts, Hover dezent rot */
#header a.hw-pk-logout{ display:grid; }  /* gleicher Schutz gegen die Alt-Link-Regel */
/* ⚠️ Nicht mehr absolut: Glocke und Abmelden teilen sich jetzt eine Zeile oben
   rechts in der Karte (.hw-pk-oben). Beide absolut positioniert lägen sie
   übereinander. */
.hw-pk-oben{
  position:absolute; top:6px; right:6px; z-index:3;
  display:flex; align-items:center; gap:2px;
}
.hw-pk-logout{
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:7px; color:#5c7396;
  transition:color .15s, background .15s, filter .15s;
}
.hw-pk-logout svg{ width:14px; height:14px; display:block; }
.hw-pk-logout:hover{ color:#ff6b5e; background:rgba(255,107,94,.08); filter:drop-shadow(0 0 6px rgba(255,107,94,.3)); }
.hw-pk-pille:focus-visible, .hw-pk-logout:focus-visible{ outline:1px solid rgba(77,216,255,.55); outline-offset:1px; }
/* Unter ~1120px kollidiert die rechte Karte mit dem ZENTRIERTEN
   Logo+Spruch-Block (Gruppe ≈ 450px mittig + 300px Karte rechts).
   Dann rutscht die Karte in den Fluss unter den Spruch, mittig. */
@media (max-width:1120px){
  .hw-profilkarte{ position:static; transform:none; margin:2px auto 14px; }
}

/* =====================================================================
   SEITEN-REDESIGN (Betreiber-Abnahme 30.07.2026):
   D2 "Themen-Bündel"  -> debatte.php   (Threads pro Möbel + Folgen-Glocke)
   T3 "Leistungs-Board"-> team.php      (Scout des Monats + Aktivitäts-Balken)
   R3 "Sammler-Profile"-> rangliste.php (Karten-Raster + Dein-Rang-Banner)
   1:1 aus den Mockups in D:\Preisliste-Designvorlagen\*-varianten.html
   übernommen, nur auf .hw-d2/.hw-t3/.hw-r3 gescopet. Die Mockup-Variablen
   leben hier lokal (Seite ist dauerhaft dunkel, kein Hellmodus mehr).
   ===================================================================== */
.hw-d2, .hw-t3, .hw-r3{
  --karte:#101c30; --karte-2:#16263e; --linie:#20334e;
  --text:#e6eef8; --soft:#93a8c4; --mute:#5c7396;
  --eis:#4dd8ff; --eis-hell:#7ae9ff; --gruen:#4fd08a; --gold:#e8c268;
  --stufe-episch:#b06cff;
}
.hw-d2 .s-kopf, .hw-t3 .s-kopf, .hw-r3 .s-kopf{ display:flex; align-items:baseline; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.hw-d2 .s-kopf h2, .hw-t3 .s-kopf h2, .hw-r3 .s-kopf h2{ font-size:16px; color:var(--text); margin:0; }
.hw-d2 .s-kopf p, .hw-t3 .s-kopf p, .hw-r3 .s-kopf p{ font-size:11.5px; color:var(--mute); margin:0; }

/* --- Kopf-Chip für Kommentar-Zeilen: CSS-Crop aus dem 64x110-Bild ---
   ⚠️ Von 26 auf 34px vergrößert (Betreiber 01.08.): bei 26px musste das Bild
   auf 62 % heruntergerechnet werden, damit der ganze Kopf hineinpasst - das
   sah bei Pixelgrafik matschig aus. 34px reichen für den vollen Kopf bei nur
   noch leichter Verkleinerung. */
.hw-d2 .kopf26{ position:relative; flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden;
  background:var(--karte-2); box-shadow:0 0 0 1px var(--linie); }
/* 34px sind noch etwas enger als die 40 Pixel Kopfbreite - deshalb das Bild
   leicht auf 52px verkleinert (Faktor .8125), dann passt der ganze Kopf samt
   Haar hinein. Bei 26px war der Faktor .625 und das Ergebnis unscharf. */
.hw-d2 .kopf26 img{ position:absolute; left:-10px; top:-13px; width:52px; height:89px; max-width:none; image-rendering:pixelated; }

/* --- D2: ein Thread pro Möbel --- */
.hw-d2 .d2-thread{ position:relative; display:grid; grid-template-columns:190px 1fr;
  background:var(--karte); border:1px solid var(--linie); border-radius:13px;
  margin-bottom:12px; overflow:hidden; transition:border-color .13s, box-shadow .13s; }
.hw-d2 .d2-thread:hover{ border-color:#2c4a70; box-shadow:0 0 16px rgba(77,216,255,.12); }
.hw-d2 .d2-thread.folgt{ border-color:rgba(77,216,255,.4); }  /* gefolgter Thread ist markiert */
.hw-d2 .d2-moebel{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  padding:14px; border-right:1px solid var(--linie); text-decoration:none;
  background:linear-gradient(180deg, var(--karte-2), var(--karte)); }
/* Bühne: Möbelbild über einem Farbschimmer in der Raritätsfarbe (wie Rare der Woche) */
.hw-d2 .d2-buehne{ display:block; width:100%; height:84px; border-radius:9px; margin-bottom:4px;
  background-color:#0a1220;
  background-image:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rare, var(--eis)) 22%, transparent), transparent 65%), var(--bild);
  background-repeat:no-repeat; background-position:center; background-size:auto, contain;
  background-origin:border-box, content-box; padding:8px; image-rendering:pixelated; }
.hw-d2 .d2-mname{ font-size:13px; font-weight:700; color:var(--text); }
.hw-d2 .d2-moebel:hover .d2-mname{ color:var(--eis-hell); }
.hw-d2 .d2-mpreis{ font-size:14px; font-weight:800; color:var(--eis); }
.hw-d2 .d2-mpreis small{ font-size:9px; color:var(--mute); font-weight:400; }
.hw-d2 .d2-mzahl{ font-size:10.5px; color:var(--mute); }
.hw-d2 .d2-liste{ padding:12px 14px; padding-right:120px; display:flex; flex-direction:column; } /* rechts Platz für die Glocke */
.hw-d2 .d2-kzeile{ display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--linie); }
.hw-d2 .d2-kzeile:last-of-type{ border-bottom:0; }
.hw-d2 .d2-headzeile{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hw-d2 .d2-headzeile .name{ font-weight:700; font-size:13px; color:var(--text); text-decoration:none; }
.hw-d2 .d2-headzeile .name:hover{ color:var(--eis-hell); }
.hw-d2 .d2-headzeile .zeit{ font-size:11px; color:var(--mute); }
.hw-d2 .d2-ktext{ font-size:12.5px; margin-top:1px; color:var(--text); }
.hw-d2 .d2-mehr{ margin-top:6px; align-self:flex-start; font-size:11.5px; font-weight:700; color:var(--eis); text-decoration:none; }
.hw-d2 .d2-mehr:hover{ color:var(--eis-hell); text-shadow:0 0 8px rgba(77,216,255,.5); }
/* Glocken-Knopf (NEUE FUNKTION): oben rechts im Thread */
.hw-d2 .d2-glocke{ position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--linie); background:var(--karte); color:var(--soft); cursor:pointer;
  border-radius:99px; padding:5px 11px 6px; font-size:11px; font-weight:700; font-family:inherit;
  text-decoration:none; transition:color .13s, border-color .13s, box-shadow .13s; }
.hw-d2 .d2-glocke svg{ width:13px; height:13px; flex:none; }
.hw-d2 .d2-glocke:hover{ color:var(--text); border-color:rgba(77,216,255,.5);
  box-shadow:0 0 12px rgba(77,216,255,.22); }
.hw-d2 .d2-thread.folgt .d2-glocke{ color:#04202f; border-color:transparent;
  background:linear-gradient(100deg, var(--eis), var(--eis-hell));
  box-shadow:0 0 14px rgba(77,216,255,.4); }
@media (max-width:700px){
  .hw-d2 .d2-thread{ grid-template-columns:1fr; }
  .hw-d2 .d2-moebel{ border-right:0; border-bottom:1px solid var(--linie); }
  .hw-d2 .d2-liste{ padding-right:14px; padding-top:44px; } /* Glocke braucht oben Platz */
}

/* --- T3: Scout des Monats + Leistungs-Liste --- */
.hw-t3 .t3-stand{
  display:inline-block; margin:6px 0 14px; font-size:11px; color:var(--eis);
  border:1px solid rgba(77,216,255,.4); border-radius:99px; padding:3px 12px;
  background:rgba(77,216,255,.08); box-shadow:0 0 12px rgba(77,216,255,.18);
}
.hw-t3 .t3-spot{
  position:relative; overflow:hidden; display:flex; gap:22px;
  background:linear-gradient(120deg, var(--karte), var(--karte-2));
  border:1px solid var(--linie); border-radius:13px; padding:16px 20px 0;
  margin-bottom:14px;
}
/* Bühne links: Eis-Glow hinter dem Avatar + Leucht-Ellipse unter den Füßen */
.hw-t3 .t3-buehne{ position:relative; flex:0 0 190px; display:flex; justify-content:center; align-items:flex-end; }
.hw-t3 .t3-buehne::before{
  content:""; position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  width:230px; height:190px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%, rgba(77,216,255,.28), transparent 65%);
}
.hw-t3 .t3-buehne img{ position:relative; width:128px; height:220px; } /* exakt 2x — kein krummer Faktor */
.hw-t3 .t3-podest{
  position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  width:130px; height:16px; border-radius:50%;
  background:linear-gradient(180deg, rgba(122,233,255,.32), rgba(77,216,255,.08));
  border:1px solid rgba(122,233,255,.45); box-shadow:0 0 16px rgba(77,216,255,.4);
}
.hw-t3 .t3-recht{ align-self:center; padding:14px 0 20px; }
.hw-t3 .t3-titelchip{
  display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:#ffb54d;
  background:rgba(255,181,77,.12); border:1px solid rgba(255,181,77,.35);
  border-radius:99px; padding:3px 11px 4px;
}
.hw-t3 .t3-titelchip svg{ width:13px; height:13px; } /* kleiner Pokal */
.hw-t3 .t3-recht h3{ font-size:20px; margin:8px 0 0; color:var(--text); text-shadow:0 0 14px rgba(77,216,255,.3); }
.hw-t3 .t3-zahl{ font-size:15px; margin:2px 0 0; color:var(--text); }
.hw-t3 .t3-zahl b{ color:var(--eis); font-size:22px; text-shadow:0 0 12px rgba(77,216,255,.4); }
.hw-t3 .t3-auto{ margin:8px 0 0; font-size:11px; color:var(--mute); max-width:520px; }
/* Team-Liste als Tabelle mit Balken */
.hw-t3 .t3-liste{ background:var(--karte); border:1px solid var(--linie); border-radius:13px; overflow:hidden; }
.hw-t3 .t3-zeile{
  display:grid; grid-template-columns:230px 160px 1fr 110px;
  gap:12px; align-items:center; padding:9px 14px; border-bottom:1px solid var(--linie);
  transition:background .13s;
}
.hw-t3 .t3-zeile:last-of-type{ border-bottom:none; }
.hw-t3 .t3-zeile:hover{ background:var(--karte-2); }
.hw-t3 .t3-kopfzeile{
  display:grid; grid-template-columns:230px 160px 1fr 110px; gap:12px;
  padding:8px 14px; border-bottom:1px solid var(--linie);
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mute);
}
/* ⚠️ Gleiche Falle wie frueher bei .hw-r3 .kopfchip und .hw-f1 .f1-avabox:
   32px-Fenster auf dem UNSKALIERTEN 64x110-Avatar zeigt nur x 16..48 und
   y 21..53 - der Kopf braucht aber x 13..52 und y 19..52 (nachgemessen 01.08.,
   siehe .hw-kopf). Links 3, rechts 4 und oben 2 Pixel fehlten.
   Jetzt dieselben Werte wie .hw-d2 .kopf26 / .hw-sl .angebot .kopf: Bild auf
   52x89 verkleinern, 34px-Fenster bei -10|-13. */
.hw-t3 .kchip{ position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--karte-2); flex:none; box-shadow:0 0 0 1px var(--linie); }
.hw-t3 .kchip img{ position:absolute; left:-10px; top:-13px; width:52px; height:89px; max-width:none; image-rendering:pixelated; }
.hw-t3 .t3-wer{ display:flex; align-items:center; gap:10px; min-width:0; }
.hw-t3 .t3-wer .nm{ font-weight:700; font-size:12.5px; line-height:1.2; display:flex; align-items:center; gap:6px; color:var(--text); }
.hw-t3 .t3-wer .rg{ font-size:10px; color:var(--rang, var(--mute)); display:block; }
.hw-t3 .t3-wer .pokal{ width:12px; height:12px; color:#ffb54d; } /* Markierung Monats-Scout */
.hw-t3 .t3-aktiv{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--soft); }
.hw-t3 .punkt{ width:8px; height:8px; border-radius:50%; flex:none; }
.hw-t3 .punkt.gruen{ background:var(--gruen); box-shadow:0 0 6px rgba(79,208,138,.7); } /* Status-LED */
.hw-t3 .punkt.grau{ background:#3a4c66; }
.hw-t3 .t3-balken{ height:8px; border-radius:99px; background:#0d1830; border:1px solid var(--linie); overflow:hidden; }
.hw-t3 .t3-balken i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--eis), var(--eis-hell));
}
.hw-t3 .t3-zeile:hover .t3-balken i{ box-shadow:0 0 10px rgba(77,216,255,.55); } /* Glow nur bei Hover */
.hw-t3 .t3-preise{ text-align:right; font-size:11px; color:var(--mute); }
.hw-t3 .t3-preise b{ display:block; font-size:14px; color:var(--text); }
.hw-t3 .t3-legende{ margin-top:8px; font-size:11px; color:var(--mute); }
.hw-t3 .t3-legende .punkt{ display:inline-block; vertical-align:middle; margin:-2px 3px 0 0; }
@media (max-width:760px){
  .hw-t3 .t3-kopfzeile{ display:none; }
  .hw-t3 .t3-zeile{ grid-template-columns:1fr 90px; }
  .hw-t3 .t3-aktiv, .hw-t3 .t3-balken{ display:none; }
  .hw-t3 .t3-spot{ flex-direction:column; padding:16px 16px 0; }
  .hw-t3 .t3-buehne{ flex-basis:auto; }
}

/* --- R3: Sammler-Profile --- */
/* NEUE FUNKTION: "Dein Rang"-Banner für eingeloggte User */
.hw-r3 .r3-banner{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin-bottom:14px;
  background:linear-gradient(90deg, rgba(77,216,255,.1), rgba(77,216,255,.03));
  border:1px solid rgba(77,216,255,.35); border-radius:11px;
}
/* ⚠️ Kopf-Ausschnitt: 34px-Fenster mit dem auf 52x89 VERKLEINERTEN Avatar,
   nicht 32px mit dem unskalierten 64x110-Bild. Der Kopf braucht auf dem
   Original x 13..52 und y 19..52 (nachgemessen 01.08. am Alpha-Kanal, siehe
   .hw-kopf) - also volle 40 Pixel Breite. In ein 32px-Fenster passt das nicht:
   die alten Werte (-16|-21) zeigten nur x 16..48 und y 21..53 und schnitten
   links 3, rechts 4 und oben 2 Pixel ab. Genau das war im Rangkasten zu sehen
   (Betreiber-Bildschirmfoto 02.08.2026): der Hut-/Haaransatz fehlte.
   Die Werte sind 1:1 die von .hw-d2 .kopf26 und .hw-sl .angebot .kopf - beide
   zeigen den Kopf nachgerechnet vollstaendig. */
.hw-r3 .kopfchip{ position:relative; width:34px; height:34px; border-radius:50%; overflow:hidden; background:var(--karte-2); flex:none; box-shadow:0 0 0 1px var(--linie); }
.hw-r3 .kopfchip img{ position:absolute; left:-10px; top:-13px; width:52px; height:89px; max-width:none; image-rendering:pixelated; }
.hw-r3 .r3-rang{ font-size:15px; font-weight:800; color:var(--text); }
.hw-r3 .r3-rang b{ color:var(--eis); }
.hw-r3 .r3-rang small{ display:block; font-size:11px; color:var(--soft); font-weight:400; }
.hw-r3 .r3-zulink{ margin-left:auto; font-weight:700; font-size:11.5px; color:var(--eis); white-space:nowrap; text-decoration:none; }
.hw-r3 .r3-zulink:hover{ color:var(--eis-hell); text-shadow:0 0 8px rgba(77,216,255,.6); }
.hw-r3 .r3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:900px){ .hw-r3 .r3-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .hw-r3 .r3-grid{ grid-template-columns:1fr; } }
/* NEUE FUNKTION: die ganze Karte ist ein Link auf das Sammlerprofil */
.hw-r3 .r3-karte{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--karte); border:1px solid var(--linie); border-radius:13px;
  padding:14px; text-decoration:none;
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.hw-r3 .r3-kopf{ display:flex; align-items:flex-start; gap:12px; }
/* Bühne statt schwebender Figur: eigene Fläche mit Lichtschimmer, die Füße
   stehen auf einem Podest. Vorher hing der Avatar ohne Boden in der Karte und
   wirkte aufgeklebt (Betreiber 01.08.). */
.hw-r3 .r3-buehne{
  position:relative; flex:none; width:86px; height:118px; border-radius:12px;
  background:var(--karte-2); border:1px solid var(--linie); overflow:hidden;
}
.hw-r3 .r3-buehne::before{
  content:""; position:absolute; inset:0; opacity:.35;
  background:radial-gradient(circle at 50% 72%, rgba(77,216,255,.55) 0%, transparent 68%);
}
.hw-r3 .r3-podest{
  position:absolute; left:50%; bottom:7px; transform:translateX(-50%);
  width:66px; height:11px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(77,216,255,.5), rgba(77,216,255,.06) 70%, transparent);
}
.hw-r3 .r3-kopf img{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%); z-index:1;
  width:64px; height:110px; filter:drop-shadow(0 3px 5px rgba(6,11,20,.55));
}
.hw-r3 .r3-id{ min-width:0; }
.hw-r3 .r3-id b{ display:block; font-size:14px; padding-top:4px; color:var(--text); }
.hw-r3 .r3-id small{ color:var(--mute); font-size:10.5px; }
.hw-r3 .abz{
  display:inline-block; margin-top:6px; margin-right:4px;
  font-size:10px; font-weight:800; border-radius:6px; padding:2px 8px 3px;
}
.hw-r3 .abz.gold{ color:var(--gold); background:rgba(232,194,104,.12); }
.hw-r3 .abz.eis{ color:var(--eis); background:rgba(77,216,255,.1); }
.hw-r3 .abz.lila{ color:var(--stufe-episch); background:rgba(176,108,255,.12); }
.hw-r3 .abz.grau{ color:var(--soft); background:rgba(138,147,168,.12); }
/* Gesamtwert steht IN der Spalte neben dem Avatar (nichts überlappt) */
.hw-r3 .r3-wert{ margin-top:7px; font-size:19px; font-weight:800; color:var(--eis); line-height:1.15; }
.hw-r3 .r3-wert small{ display:block; font-size:10.5px; color:var(--mute); font-weight:400; }
/* Wertvollstes Stück: kleine Innen-Box mit Möbelbild */
.hw-r3 .r3-stueck{
  display:flex; align-items:center; gap:10px;
  background:var(--karte-2); border:1px solid var(--linie); border-radius:10px; padding:8px 10px;
}
.hw-r3 .r3-simg{
  flex:none; width:44px; height:38px; border-radius:8px; background-color:var(--karte);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-origin:content-box; padding:4px; image-rendering:pixelated;
}
.hw-r3 .r3-stueck small{ display:block; font-size:9.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; }
.hw-r3 .r3-stueck b{ font-size:12.5px; color:var(--text); }
.hw-r3 .r3-stueck i{ display:block; font-style:normal; font-size:11px; font-weight:700; color:var(--eis); }
.hw-r3 .r3-fuss{ margin-top:auto; padding-top:2px; font-size:11.5px; font-weight:700; color:var(--mute); transition:color .13s ease; }
/* Hover: anheben + Eis-Glow, "Profil ansehen" leuchtet auf */
.hw-r3 .r3-karte:hover{
  transform:translateY(-4px); border-color:rgba(77,216,255,.55);
  box-shadow:0 0 0 1px rgba(77,216,255,.25), 0 14px 34px -12px rgba(77,216,255,.35);
}
.hw-r3 .r3-karte:hover .r3-fuss{ color:var(--eis-hell); text-shadow:0 0 8px rgba(77,216,255,.5); }

/* --- Team-Hybrid (Betreiber-Wunsch 30.07., Abend): T3-Spotlight OBEN
   bleibt, darunter die DIENSTAUSWEISE aus Variante T1 statt der Tabelle
   (die t3-liste-Regeln oben bleiben liegen, falls es zurückgeht).
   Ausweis: Rang-Farbstreifen mit Lanyard-Stanzung, Passbild-Fach,
   Perforation + Ausweis-Nr. + Strichcode. Rang-Farbe kommt live aus dem
   Housekeeping (--rang je Karte). --- */
.hw-t3 .g-kopf{ display:flex; align-items:baseline; gap:10px; margin:22px 0 10px; }
.hw-t3 .g-kopf b{ font-size:14px; color:var(--rang, var(--text)); }
.hw-t3 .g-kopf .anzahl{
  font-size:10.5px; font-weight:700; color:var(--soft);
  background:var(--karte-2); border:1px solid var(--linie); border-radius:99px; padding:1px 8px 2px;
}
.hw-t3 .g-kopf .was{ color:var(--mute); font-size:12px; }
.hw-t3 .t1-liste{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .hw-t3 .t1-liste{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hw-t3 .t1-liste{ grid-template-columns:1fr; } }
.hw-t3 .t1-ausweis{
  background:var(--karte); border:1px solid var(--linie); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
/* Hover hebt den Ausweis mit Glow in der Rang-Farbe (Glow nur bei Hover) */
.hw-t3 .t1-ausweis:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--rang) 45%, var(--linie));
  box-shadow:0 14px 32px -12px color-mix(in srgb, var(--rang) 50%, transparent);
}
/* Farbstreifen oben mit gestanztem Lanyard-Schlitz (Lochung) */
.hw-t3 .t1-streifen{
  position:relative; height:30px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(100deg, color-mix(in srgb, var(--rang) 70%, #1a2436), var(--rang));
}
.hw-t3 .t1-loch{
  width:36px; height:9px; border-radius:99px; background:rgba(6,11,20,.85);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.18); /* Stanzkante */
}
.hw-t3 .t1-firma{
  position:absolute; left:10px; font-size:8.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(6,14,26,.6);
}
.hw-t3 .t1-rolle{
  position:absolute; right:10px; font-size:8.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(6,14,26,.6);
}
.hw-t3 .t1-koerper{ display:flex; gap:12px; padding:12px; flex:1; }
.hw-t3 .t1-foto{
  flex:none; width:72px; height:118px; border-radius:8px; background:var(--karte-2);
  border:1px solid var(--linie); display:flex; align-items:flex-end; justify-content:center;
  box-shadow:inset 0 0 14px rgba(0,0,0,.35); /* wie ein Passbild-Fach */
}
.hw-t3 .t1-foto img{ width:64px; height:110px; }
.hw-t3 .t1-daten{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.hw-t3 .t1-name{ font-size:14px; line-height:1.2; color:var(--text); display:flex; align-items:center; gap:6px; }
.hw-t3 .t1-name a{ color:inherit; text-decoration:none; }
.hw-t3 .t1-badge{
  align-self:flex-start; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--rang); background:color-mix(in srgb, var(--rang) 14%, transparent);
  border-radius:5px; padding:2px 7px 3px;
}
.hw-t3 .t1-zeile{ font-size:11.5px; color:var(--text); }
.hw-t3 .t1-zeile em{ font-style:normal; color:var(--mute); }
/* Knopf unten: führt zum Sammlerprofil (ein "Nachricht an…" hätte ohne
   Postfach-System kein echtes Ziel — bewusst ehrlich verlinkt) */
.hw-t3 .t1-msg{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:0 12px 10px; padding:7px 10px; border-radius:9px; cursor:pointer;
  border:1px solid var(--linie); background:var(--karte-2); color:var(--soft);
  font-size:11.5px; font-weight:700; text-decoration:none;
  transition:border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.hw-t3 .t1-msg svg{ width:14px; height:14px; flex:none; }
.hw-t3 .t1-msg:hover{
  border-color:rgba(77,216,255,.6); color:var(--eis-hell);
  background:rgba(77,216,255,.08); box-shadow:0 0 14px rgba(77,216,255,.28);
}
/* Perforation + Ausweis-Nr. + Strichcode als Fuß */
.hw-t3 .t1-fuss{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px dashed #2c4160; padding:7px 12px 8px;
}
.hw-t3 .t1-nr{ font-size:10px; color:var(--mute); letter-spacing:.08em; }
.hw-t3 .t1-barcode{
  width:64px; height:14px; opacity:.35;
  background:repeating-linear-gradient(90deg,
    #93a8c4 0 2px, transparent 2px 4px, #93a8c4 4px 5px, transparent 5px 8px);
}

/* --- Rangliste-Umbau (Betreiber, 30.07. Abend): Habbos oben, die drei
   Möbel-Top-10 sind raus, unten das REKORDE-BENTO aus Variante R4.
   Kacheln in gemischten Größen, alle Werte automatisch aus furnis/furnistat;
   frisch gebrochene Rekorde pulsieren ("Neuer Rekord!"). --- */
.hw-r4{ --karte:#101c30; --karte-2:#16263e; --linie:#20334e; --text:#e6eef8;
  --soft:#93a8c4; --mute:#5c7396; --eis:#4dd8ff; --gut:#4fd08a; }
.hw-r4 .r4-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:900px){ .hw-r4 .r4-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .hw-r4 .r4-grid{ grid-template-columns:1fr; }
  .hw-r4 .r4-gross, .hw-r4 .r4-breit{ grid-column:auto; grid-row:auto; } }
.hw-r4 .r4-kachel{
  position:relative; display:flex; flex-direction:column; gap:6px;
  background:var(--karte); border:1px solid var(--linie); border-radius:12px; padding:14px;
  text-decoration:none;
  transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.hw-r4 a.r4-kachel:hover{
  transform:translateY(-3px); border-color:rgba(77,216,255,.45);
  box-shadow:0 12px 30px -12px rgba(77,216,255,.3);
}
/* Kachelgrößen im Bento-Raster */
.hw-r4 .r4-gross{ grid-column:span 2; grid-row:span 2; }
.hw-r4 .r4-breit{ grid-column:span 2; }
.hw-r4 .r4-ikone{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:15px; background:var(--karte-2); border:1px solid var(--linie);
}
.hw-r4 .r4-label{ font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mute); }
.hw-r4 .r4-wert{ font-size:24px; font-weight:800; color:var(--eis); line-height:1.15; }
.hw-r4 .r4-wert small{ font-size:11px; color:var(--mute); font-weight:400; }
.hw-r4 .r4-gross .r4-wert{ font-size:30px; }
.hw-r4 .r4-kontext{ font-size:11px; color:var(--soft); }
.hw-r4 .r4-kontext b{ color:var(--text); }
.hw-r4 .r4-bild{
  height:140px; margin:4px 0; border-radius:10px; background-color:var(--karte-2);
  background-repeat:no-repeat; background-position:center; background-size:auto, contain;
  background-origin:border-box, content-box; padding:14px; image-rendering:pixelated;
}
.hw-r4 .r4-minibild{
  flex:none; width:52px; height:44px; border-radius:9px; background-color:var(--karte-2);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-origin:content-box; padding:5px; image-rendering:pixelated;
}
.hw-r4 .r4-zeile{ display:flex; align-items:center; gap:10px; }
/* Zahl der Woche: eine einzige Riesenzahl, zentriert */
.hw-r4 .r4-zahl{ align-items:center; justify-content:center; text-align:center; }
.hw-r4 .r4-zahl .r4-wert{ font-size:34px; text-shadow:0 0 18px rgba(77,216,255,.35); }
/* Automatisch erkannter frischer Rekord pulsiert */
.hw-r4 .r4-puls{
  position:absolute; top:11px; right:11px;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gut); background:rgba(79,208,138,.13);
  border:1px solid rgba(79,208,138,.45); border-radius:99px; padding:3px 10px;
  animation:r4-puls 1.9s ease-out infinite;
}
@keyframes r4-puls{
  0%{ box-shadow:0 0 0 0 rgba(79,208,138,.35); }
  70%{ box-shadow:0 0 0 9px rgba(79,208,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,208,138,0); }
}
.hw-r4 .r4-spark{ width:100%; height:48px; margin-top:2px; }
@media (prefers-reduced-motion: reduce){ .hw-r4 .r4-puls{ animation:none; } }

/* =====================================================================
   TEAM = LANYARD-WAND + KOMPAKT-BANNER (Betreiber-Abnahme 30.07. spät):
   "Seite wie V3, aber das Obere von V4" — oben das flache Scout-des-
   Monats-Breitband (V4), darunter hängen die Dienstausweise an Textil-
   Bändern in Rangfarbe von Metallschienen (V3). Der Monats-Scout hängt
   als normale Karte MIT Pokal-Anhänger + Eis-Rahmen (nicht doppelt groß —
   das Spotlight sitzt ja schon im Banner). Ersetzt t3-spot/t1-liste
   (deren Regeln oben bleiben als Rückweg liegen).
   ===================================================================== */
.hw-tl{ --karte:#101c30; --karte-2:#16263e; --linie:#20334e; --text:#e6eef8;
  --soft:#93a8c4; --mute:#5c7396; --eis:#4dd8ff; --eis-hell:#7ae9ff; }

/* ---- V4-Banner: Spotlight als flaches Breitband ---- */
.hw-tl .tl-banner{
  position:relative; display:flex; align-items:center; gap:18px;
  min-height:106px; margin-top:16px; padding:0 18px;
  background:radial-gradient(150px 90px at 54px 62%, rgba(77,216,255,.28), transparent 72%), var(--karte);
  border:1px solid var(--linie); border-radius:13px;
}
.hw-tl .b-avatar{ position:relative; align-self:flex-end; width:72px; height:120px; flex:0 0 auto; }
.hw-tl .b-avatar img{ position:absolute; left:4px; bottom:8px; z-index:1; }
.hw-tl .b-podest{
  position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:84px; height:12px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(77,216,255,.5), rgba(77,216,255,.06) 70%, transparent);
  box-shadow:0 0 16px rgba(77,216,255,.35);
}
.hw-tl .b-text{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.hw-tl .chip{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  color:#ffb54d; background:rgba(255,181,77,.12);
  border:1px solid rgba(255,181,77,.35); border-radius:999px; padding:4px 10px;
}
.hw-tl .chip svg{ width:13px; height:13px; flex:0 0 auto; }
.hw-tl .b-name{ font-size:21px; font-weight:800; color:var(--text); line-height:1.1; }
.hw-tl .b-name a{ color:inherit; text-decoration:none; }
.hw-tl .b-name a:hover{ color:var(--eis-hell); }
.hw-tl .b-stats{ margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.hw-tl .pille{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:7px 12px; border-radius:999px;
  background:var(--karte-2); border:1px solid var(--linie);
  font-size:11px; color:var(--soft); white-space:nowrap;
}
.hw-tl .pille b{ font-size:16px; font-weight:800; color:var(--text); line-height:1; }
.hw-tl .pille-eis{ border-color:rgba(77,216,255,.4); }
.hw-tl .pille-eis b{ color:var(--eis-hell); text-shadow:0 0 12px rgba(77,216,255,.55); }
.hw-tl .pille-rang{ color:#ffb54d; font-weight:700; }

/* ---- V3-Wand: Schienen, Bänder, hängende Ausweise ---- */
.hw-tl .lanyard-wand{ display:flex; flex-direction:column; gap:36px; padding:22px 0 6px; }
.hw-tl .schiene{
  position:relative; z-index:3; height:16px; display:flex; align-items:center; gap:12px; padding:0 22px;
  border:1px solid var(--linie); border-radius:5px;
  background:linear-gradient(180deg,#35496b,#1d2f4c 40%,#12203a 62%,#22365a);
  box-shadow:inset 0 1px 0 rgba(230,238,248,.16), inset 0 -1px 0 rgba(0,0,0,.5);
}
/* Schrauben links/rechts in der Schiene */
.hw-tl .schiene::before, .hw-tl .schiene::after{
  content:""; position:absolute; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #9db4d4, #3c5175 60%, #16263e);
}
.hw-tl .schiene::before{ left:7px; }
.hw-tl .schiene::after{ right:7px; }
.hw-tl .schiene-rang{
  margin:0; position:relative; z-index:1; font-size:9px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rang);
  background:#0d1830; border:1px solid color-mix(in srgb, var(--rang) 45%, var(--linie));
  border-radius:5px; padding:3px 9px;
}
.hw-tl .schiene-info{ position:relative; z-index:1; font-size:11px; color:var(--mute); text-shadow:0 1px 2px rgba(6,11,20,.8); }
.hw-tl .schiene.leer{ height:10px; margin-top:22px; }   /* Fortsetzungs-Schiene ohne Beschriftung */
.hw-tl .haenger-reihe{ display:flex; justify-content:center; align-items:flex-start; gap:38px; padding:0 8px 14px; margin-top:-3px; }
.hw-tl .haenger{ position:relative; display:flex; flex-direction:column; align-items:center; transform-origin:top center; transition:transform .25s ease; }
.hw-tl .dreh-a{ transform:rotate(-1.2deg); }
.hw-tl .dreh-b{ transform:rotate(.9deg); }
.hw-tl .haenger:hover{ transform:rotate(0deg); }   /* hängt sich beim Hover gerade */
/* Textil-Band in Rangfarbe, läuft bis in die Lanyard-Stanzung */
.hw-tl .haenger .band{
  position:relative; z-index:2; width:9px; height:46px; margin-bottom:-15px; border-radius:0 0 2px 2px;
  background:repeating-linear-gradient(180deg, color-mix(in srgb, var(--rang) 82%, #0a1220) 0 3px, var(--rang) 3px 6px);
  box-shadow:inset 1px 0 0 rgba(230,238,248,.14), inset -1px 0 0 rgba(6,11,20,.45), 0 1px 2px rgba(6,11,20,.6);
}
/* Pokal-Anhänger am Band des Monats-Scouts */
.hw-tl .anhaenger{
  position:absolute; top:26px; left:8px; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transform:rotate(10deg); color:#ffb54d;
  background:var(--karte); border:1px solid rgba(255,181,77,.5); box-shadow:0 0 10px rgba(255,181,77,.3);
}
.hw-tl .anhaenger svg{ width:13px; height:13px; }
/* Ausweis (DNA wie live, fest 292px für den Wand-Look) */
.hw-tl .ausweis{
  position:relative; z-index:1; width:292px; background:var(--karte); border:1px solid var(--linie);
  border-radius:11px; overflow:hidden; box-shadow:0 8px 20px rgba(6,11,20,.45);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hw-tl .streifen{
  height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 10px;
  background:linear-gradient(100deg, color-mix(in srgb, var(--rang) 70%, #1a2436), var(--rang));
}
.hw-tl .firma, .hw-tl .rolle{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(6,14,26,.6); }
.hw-tl .loch{ width:36px; height:9px; border-radius:5px; background:rgba(6,11,20,.85); box-shadow:inset 0 1px 2px rgba(0,0,0,.85); }
.hw-tl .koerper{ display:flex; gap:10px; padding:10px; }
.hw-tl .foto{
  position:relative;
  flex:none; width:72px; height:118px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  border-radius:8px; background:var(--karte-2); border:1px solid var(--linie); box-shadow:inset 0 2px 8px rgba(6,11,20,.55);
}
/* Lichtkreis unter den Fuessen - dieselbe Machart wie Rangliste und Profil,
   damit die Figur auch im Passbild-Fach auf etwas steht (Betreiber 01.08.). */
.hw-tl .foto::after{
  content:""; position:absolute; left:50%; bottom:5px; transform:translateX(-50%);
  width:56px; height:10px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(77,216,255,.4), rgba(77,216,255,.05) 70%, transparent);
}
.hw-tl .foto img{ display:block; position:relative; z-index:1; }
.hw-tl .daten{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.hw-tl .ausweis .name{ font-size:14px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:6px; }
.hw-tl .ausweis .name a{ color:inherit; text-decoration:none; }
.hw-tl .badge{
  font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--rang);
  background:color-mix(in srgb, var(--rang) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--rang) 35%, transparent); border-radius:5px; padding:2px 7px;
}
.hw-tl .zeile{ font-size:11.5px; color:var(--soft); }
.hw-tl .zeile em{ font-style:normal; color:var(--mute); }
.hw-tl .msg{
  display:block; margin:0 10px 9px; padding:6px 8px; text-align:center; font-size:11.5px; font-weight:700;
  color:var(--soft); text-decoration:none; background:var(--karte-2); border:1px solid var(--linie); border-radius:8px;
  transition:color .2s, border-color .2s, box-shadow .2s;
}
.hw-tl .msg:hover{ color:var(--eis-hell); border-color:var(--eis); box-shadow:0 0 10px rgba(77,216,255,.35); }
.hw-tl .fuss{ display:flex; align-items:center; justify-content:space-between; padding:6px 10px 8px; border-top:1px dashed #2c4160; }
.hw-tl .nr{ font-size:9.5px; letter-spacing:.1em; color:var(--mute); }
.hw-tl .barcode{
  width:64px; height:14px; opacity:.35;
  background:repeating-linear-gradient(90deg, #93a8c4 0 2px, transparent 2px 4px, #93a8c4 4px 5px, transparent 5px 8px);
}
/* Hover: hebt sich + Glow in Rangfarbe */
.hw-tl .haenger:hover .ausweis{
  transform:translateY(-3px); border-color:color-mix(in srgb, var(--rang) 55%, var(--linie));
  box-shadow:0 0 18px color-mix(in srgb, var(--rang) 40%, transparent), 0 12px 26px rgba(6,11,20,.55);
}
/* Monats-Scout: Eis-Rahmen als Querverweis aufs Banner */
.hw-tl .haenger.monat .ausweis{ border-color:rgba(77,216,255,.45); box-shadow:0 0 16px rgba(77,216,255,.18), 0 8px 20px rgba(6,11,20,.45); }
.hw-tl .pokal{ width:12px; height:12px; color:#ffb54d; flex:none; }

/* Handy: Banner stapeln, Ausweise untereinander (Rotation stört dort nur) */
@media (max-width:760px){
  .hw-tl .tl-banner{ flex-wrap:wrap; padding:12px 14px; gap:10px; }
  .hw-tl .b-stats{ margin-left:0; }
  .hw-tl .haenger-reihe{ flex-direction:column; align-items:center; gap:10px; }
  .hw-tl .dreh-a, .hw-tl .dreh-b{ transform:none; }
  .hw-tl .haenger .band{ height:26px; }
  .hw-tl .schiene-info{ display:none; }
}

/* =====================================================================
   MEINE MÖBEL = "HÄNDLER-TRESEN" (Variante M1, Betreiber-Abnahme 30.07.)
   Karten-Raster mit Raritäts-Bühne, Kursvergleich-Badge, Stückzahl-
   Stepper und INLINE-Preisänderung (Stift -> Feld -> Speichern) statt
   Löschen + Neu-Anlegen. Bühne bekommt --rar/--img inline je Karte.
   ===================================================================== */
.hw-m1{ font-size:13px; line-height:1.5; color:#e6eef8; }
.hw-m1 .kopf{ margin:0 0 18px; }
.hw-m1 .kopf h2{ margin:0; font-size:22px; font-weight:600; letter-spacing:.2px; color:#e6eef8; }
.hw-m1 .unterton{ margin:4px 0 0; color:#93a8c4; }
.hw-m1 .bilanz{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:9px 14px; background:#101c30; border:1px solid #20334e; border-radius:11px; color:#93a8c4; flex-wrap:wrap; }
.hw-m1 .bilanz strong{ color:#e6eef8; font-weight:600; }
.hw-m1 .trenner{ width:1px; height:14px; background:#20334e; }
.hw-m1 .raster{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .hw-m1 .raster{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .hw-m1 .raster{ grid-template-columns:1fr; } }
.hw-m1 .karte{ position:relative; display:flex; flex-direction:column; background:#101c30; border:1px solid #20334e; border-radius:13px; overflow:hidden; transition:border-color .15s, box-shadow .15s, opacity .3s; }
.hw-m1 .karte:hover{ border-color:rgba(77,216,255,.45); box-shadow:0 0 0 1px rgba(77,216,255,.18), 0 8px 26px rgba(77,216,255,.10); }
/* Bühne: --rar (Raritätsfarbe) + --img (Möbelbild) kommen inline je Karte */
.hw-m1 .buehne{ height:118px; background-color:#16263e; border-bottom:1px solid #20334e;
  background-image:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rar, #4dd8ff) 22%, transparent), transparent 65%), var(--img);
  background-repeat:no-repeat; background-position:center, center; background-size:auto, contain; image-rendering:pixelated; }
.hw-m1 .rumpf{ padding:12px 14px 13px; display:flex; flex-direction:column; gap:10px; flex:1; }
.hw-m1 .titelzeile{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hw-m1 .name{ margin:0; font-size:14px; font-weight:600; }
.hw-m1 .name a{ color:inherit; text-decoration:none; }
.hw-m1 .name a:hover{ color:#7ae9ff; }
.hw-m1 .seltenheit{ font-size:11px; white-space:nowrap; color:var(--rar, #8a93a8); }
.hw-m1 .seltenheit::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:5px; }
.hw-m1 .preiszeile{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.hw-m1 .preis{ font-size:19px; font-weight:700; letter-spacing:.2px; }
.hw-m1 .preis small{ font-size:12px; font-weight:400; color:#93a8c4; margin-left:2px; }
.hw-m1 .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid; white-space:nowrap; }
.hw-m1 .badge svg{ display:block; }
.hw-m1 .b-gruen{ color:#4fd08a; border-color:rgba(79,208,138,.35); background:rgba(79,208,138,.10); }
.hw-m1 .b-rot{ color:#ff6b5e; border-color:rgba(255,107,94,.35); background:rgba(255,107,94,.10); }
.hw-m1 .b-grau{ color:#8a93a8; border-color:rgba(138,147,168,.35); background:rgba(138,147,168,.10); }
.hw-m1 .fusszeile{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid #20334e; padding-top:10px; margin-top:auto; }
.hw-m1 .stepper{ display:inline-flex; align-items:center; border:1px solid #20334e; border-radius:9px; background:#0a1220; overflow:hidden; }
.hw-m1 .step-knopf{ width:26px; height:26px; border:0; background:transparent; color:#5c7396; font:inherit; font-size:15px; line-height:1; cursor:pointer; transition:color .15s, background .15s; }
.hw-m1 .step-knopf:hover{ color:#7ae9ff; background:#16263e; }
.hw-m1 .step-wert{ min-width:26px; text-align:center; font-weight:600; line-height:26px; border-left:1px solid #20334e; border-right:1px solid #20334e; padding:0 2px; }
.hw-m1 .werkzeuge{ display:inline-flex; gap:6px; }
.hw-m1 .werkzeug{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #20334e; border-radius:9px; background:transparent; color:#5c7396; cursor:pointer; transition:color .15s, border-color .15s, box-shadow .15s, background .15s; }
.hw-m1 .werkzeug:hover{ color:#7ae9ff; border-color:rgba(77,216,255,.45); box-shadow:0 0 10px rgba(77,216,255,.18); }
.hw-m1 .w-entfernen:hover{ color:#ff6b5e; border-color:rgba(255,107,94,.45); box-shadow:0 0 10px rgba(255,107,94,.15); }
.hw-m1 .w-aktiv{ color:#7ae9ff; border-color:rgba(77,216,255,.5); background:rgba(77,216,255,.10); }
/* Offener Bearbeiten-Zustand (Inline-Preisänderung) */
.hw-m1 .bearbeiten{ display:none; flex-direction:column; gap:6px; }
.hw-m1 .karte.offen .bearbeiten{ display:flex; }
.hw-m1 .karte.offen .preiszeile{ display:none; }
.hw-m1 .feld-label{ font-size:11px; color:#5c7396; text-transform:uppercase; letter-spacing:.6px; }
.hw-m1 .feldzeile{ display:flex; gap:8px; }
.hw-m1 .preis-feld{ flex:1; min-width:0; background:#0a1220; border:1px solid rgba(77,216,255,.45); border-radius:9px; color:#e6eef8; font:inherit; font-weight:600; padding:6px 10px; outline:none; }
.hw-m1 .preis-feld:focus{ box-shadow:0 0 0 2px rgba(77,216,255,.2); }
.hw-m1 .speichern{ border:1px solid rgba(77,216,255,.5); background:rgba(77,216,255,.12); color:#7ae9ff; font:inherit; font-weight:600; border-radius:9px; padding:6px 12px; cursor:pointer; transition:background .15s, box-shadow .15s; }
.hw-m1 .speichern:hover{ background:rgba(77,216,255,.2); box-shadow:0 0 12px rgba(77,216,255,.25); }
.hw-m1 .kurs-hinweis{ margin:0; font-size:11px; color:#93a8c4; }
.hw-m1 .kurs-hinweis strong{ color:#e6eef8; font-weight:600; }
.hw-m1 .leer{ padding:26px; text-align:center; color:#5c7396; background:#101c30; border:1px solid #20334e; border-radius:13px; }

/* =====================================================================
   BEOBACHTUNGEN = "WACHLISTE MIT DELTA" (Variante B1, 30.07.)
   Karten mit Raritäts-Bühne, Kurs, "Seit du beobachtest: +X %" samt
   Startpreis und 30-Tage-Sparkline (gestrichelte Linie = Startniveau).
   Entfernen über die Glocke (AJAX auf die Beobachtungsliste).
   ⚠️ "Verknüpfung lösen" ist auf Betreiber-Wunsch KOMPLETT raus - der
   Konto-Kasten zeigt nur noch Status bzw. den Verknüpfen-Knopf.
   ===================================================================== */
.hw-b1{ color:#e6eef8; }
.hw-b1 .kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:2px 0 14px; }
.hw-b1 .kopf h2{ margin:0; font-size:20px; font-weight:700; letter-spacing:.2px; color:#e6eef8; }
.hw-b1 .unterton{ margin:4px 0 0; font-size:13px; color:#93a8c4; }
.hw-b1 .bilanz{ display:flex; gap:8px; flex-wrap:wrap; }
.hw-b1 .bchip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border:1px solid #20334e; border-radius:999px; background:#101c30; color:#8a93a8; white-space:nowrap; }
.hw-b1 .bchip svg{ width:8px; height:8px; flex:none; }
.hw-b1 .bchip--auf{ color:#4fd08a; border-color:color-mix(in srgb, #4fd08a 35%, #20334e); }
.hw-b1 .bchip--ab{ color:#ff6b5e; border-color:color-mix(in srgb, #ff6b5e 35%, #20334e); }
.hw-b1 .konto{ display:flex; align-items:center; gap:12px; padding:11px 14px; margin:0 0 16px; background:linear-gradient(180deg,#16263e,#101c30); border:1px solid #20334e; border-radius:12px; }
.hw-b1 .konto-icon{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb, #4dd8ff 12%, #101c30); border:1px solid color-mix(in srgb, #4dd8ff 30%, #20334e); color:#7ae9ff; }
.hw-b1 .konto-icon svg{ width:16px; height:16px; }
.hw-b1 .konto-text{ flex:1; min-width:0; }
.hw-b1 .konto-text strong{ display:block; font-size:13px; }
.hw-b1 .konto-text span{ display:block; font-size:12px; color:#93a8c4; margin-top:1px; }
.hw-b1 .konto-text b{ color:#7ae9ff; font-weight:600; }
.hw-b1 .konto-status{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#4fd08a; border:1px solid color-mix(in srgb, #4fd08a 35%, #20334e); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.hw-b1 .konto-status i{ width:7px; height:7px; border-radius:50%; background:#4fd08a; }
.hw-b1 .konto-cta{ flex:none; font-size:12px; font-weight:700; color:#04202f; background:linear-gradient(100deg,#4dd8ff,#7ae9ff); border-radius:9px; padding:7px 14px; text-decoration:none; box-shadow:0 0 14px rgba(77,216,255,.3); }
.hw-b1 .konto-cta:hover{ filter:brightness(1.1); }
.hw-b1 .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .hw-b1 .grid{ grid-template-columns:repeat(2,1fr); } .hw-b1 .kopf{ flex-direction:column; align-items:flex-start; } }
@media (max-width:600px){ .hw-b1 .grid{ grid-template-columns:1fr; } .hw-b1 .konto{ flex-wrap:wrap; } }
.hw-b1 .karte{ position:relative; background:#101c30; border:1px solid #20334e; border-radius:13px; overflow:hidden; transition:border-color .15s, box-shadow .15s, transform .15s, opacity .3s; }
.hw-b1 .karte:hover{ border-color:color-mix(in srgb, #4dd8ff 40%, #20334e); box-shadow:0 0 0 1px rgba(77,216,255,.18), 0 10px 26px rgba(77,216,255,.08); transform:translateY(-2px); }
.hw-b1 .buehne{ position:relative; height:104px; border-bottom:1px solid #20334e; background-color:#16263e;
  background-image:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rar, #4dd8ff) 22%, transparent), transparent 65%), var(--img);
  background-size:auto, contain; background-position:center, center; background-repeat:no-repeat; image-rendering:pixelated; }
.hw-b1 .chip{ position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; letter-spacing:.2px; color:var(--rar); background:rgba(10,18,32,.72); border:1px solid color-mix(in srgb, var(--rar) 40%, transparent); border-radius:999px; padding:2px 8px; }
.hw-b1 .chip i{ width:6px; height:6px; border-radius:50%; background:var(--rar); }
.hw-b1 .glocke{ position:absolute; top:8px; right:8px; width:27px; height:27px; display:grid; place-items:center; padding:0; color:#93a8c4; background:rgba(10,18,32,.65); border:1px solid #20334e; border-radius:9px; cursor:pointer; transition:color .15s, border-color .15s, box-shadow .15s; }
.hw-b1 .glocke svg{ width:14px; height:14px; }
.hw-b1 .glocke .kreuz{ opacity:0; transition:opacity .12s; }
.hw-b1 .glocke:hover{ color:#ff6b5e; border-color:color-mix(in srgb, #ff6b5e 50%, #20334e); box-shadow:0 0 10px rgba(255,107,94,.22); }
.hw-b1 .glocke:hover .kreuz{ opacity:1; }
.hw-b1 .inhalt{ padding:11px 13px 13px; }
.hw-b1 .name{ margin:0; font-size:14px; font-weight:600; color:#e6eef8; }
.hw-b1 .name a{ color:inherit; text-decoration:none; }
.hw-b1 .name a:hover{ color:#7ae9ff; }
.hw-b1 .kurs{ margin-top:3px; font-size:21px; font-weight:700; letter-spacing:.2px; }
.hw-b1 .kurs .einheit{ font-size:12px; font-weight:400; color:#93a8c4; margin-left:2px; }
.hw-b1 .delta{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin:9px 0 0; font-size:12px; color:#93a8c4; }
.hw-b1 .delta-wert{ display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:700; }
.hw-b1 .delta-wert svg{ width:9px; height:9px; flex:none; }
.hw-b1 .delta--auf .delta-wert{ color:#4fd08a; }
.hw-b1 .delta--ab .delta-wert{ color:#ff6b5e; }
.hw-b1 .delta--flat .delta-wert{ color:#8a93a8; }
.hw-b1 .start{ margin:2px 0 0; font-size:11.5px; color:#5c7396; }
.hw-b1 .spark{ margin:10px 0 0; }
.hw-b1 .spark--auf{ color:#4fd08a; }
.hw-b1 .spark--ab{ color:#ff6b5e; }
.hw-b1 .spark--flat{ color:#8a93a8; }
.hw-b1 .spark svg{ display:block; width:100%; height:auto; }
.hw-b1 .spark .ref{ stroke:#31465f; stroke-width:1; stroke-dasharray:3 4; }
.hw-b1 .spark .linie{ fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.hw-b1 .spark .punkt{ fill:currentColor; stroke:#101c30; stroke-width:2; }
.hw-b1 .spark-fuss{ display:flex; justify-content:space-between; margin-top:4px; font-size:10.5px; color:#5c7396; }
.hw-b1 .leer{ padding:26px; text-align:center; color:#5c7396; background:#101c30; border:1px solid #20334e; border-radius:13px; }

/* =====================================================================
   MÖBELSEITE: RECHTE SPALTE (Betreiber-Abnahme 30.07. Nacht):
   S1-Angebotsliste ("Erhältlich bei" sortiert nach Preis, Kursvergleichs-
   Badge, ★ Bester Preis) + S4-Bausteine (Anbieten-CTA + Kategorie-Raster
   mit Mini-Bühnen). Der "Zuletzt bei diesem Möbel"-Feed aus S4 ist auf
   Wunsch KOMPLETT draußen.
   ===================================================================== */
/* Die Spalten der Möbelseite stammen aus der Alt-Ära: rechts nur 160px
   (reichte für nackte Icons). Die neue Leiste braucht Platz - nur die
   Möbelseite nutzt diese IDs, daher gefahrlos neu verteilt. */
/* ⚠️ Beide sind inline-block: der Zeilenumbruch im HTML zwischen ihnen
   kostet ~4px Wortabstand - ohne Puffer bricht die rechte Spalte unter
   den Inhalt. Daher 12px Luft einrechnen. */
#content_right{ width:280px !important; }
#content_left{ width:calc(100% - 318px) !important; margin-right:22px !important; }
@media (max-width:900px){
  #content_left, #content_right{ width:100% !important; margin-right:0 !important; display:block !important; }
  #content_right{ margin-top:18px; }
}
.hw-sl{ display:flex; flex-direction:column; gap:12px; font-size:13px; line-height:1.45; color:#e6eef8; }
.hw-sl .sl-block{ background:#101c30; border:1px solid #20334e; border-radius:12px; padding:12px; }
.hw-sl .sl-titel{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#93a8c4; margin-bottom:10px; }
.hw-sl .sl-titel .zusatz{ font-size:9.5px; font-weight:700; letter-spacing:.08em; color:#5c7396; white-space:nowrap; text-transform:none; }
/* --- Angebotsliste (S1) --- */
.hw-sl .kurszeile{ display:flex; justify-content:space-between; margin:-4px 0 10px; font-size:10.5px; color:#5c7396; }
.hw-sl .kurszeile b{ font-weight:700; color:#93a8c4; }
.hw-sl .angebot{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 8px; padding:9px 10px; background:#0d1830; border:1px solid #20334e; border-radius:11px; text-decoration:none; color:inherit; }
.hw-sl .angebot:last-of-type{ margin-bottom:0; }
.hw-sl .angebot:hover{ border-color:rgba(77,216,255,.45); box-shadow:0 0 12px rgba(77,216,255,.18); }
/* ---- Karte klickbar, Knopf drinnen ----------------------------------------
   Die Zeile war früher selbst ein <a>. Damit musste der Kontakt-Knopf
   AUSSERHALB stehen (ein <button> in einem <a> ist ungültiges HTML) und hing
   als loser Kasten unter der Karte. Jetzt ist die Zeile ein <div>, den Link
   spannt .ang-link unsichtbar über die ganze Fläche.
   ⚠️ Alle übrigen Kinder brauchen position:relative: .ang-link ist positioniert
   und läge sonst ÜBER den nicht positionierten Geschwistern - der Knopf wäre
   nicht mehr anklickbar und Text nicht markierbar. */
.hw-sl .angebot > *{ position:relative; z-index:2; }
.hw-sl .angebot > .ang-link{ position:absolute; inset:0; z-index:1; border-radius:inherit; }
/* Eigene Zeile am unteren Rand der Karte, rechtsbündig - die Handlung kommt
   nach "wer" und "wie viel". Die Trennlinie macht sichtbar, dass der Knopf zu
   DIESER Karte gehört. */
.hw-sl .angebot .ang-aktion{ flex:0 0 100%; display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:2px; padding-top:8px; border-top:1px solid #1b2c45; }
/* 34px statt 30px, Bild leicht verkleinert - im 30er-Kasten wurde dem Kopf
   links wie rechts eine Scheibe abgeschnitten (er ist 40 Pixel breit, siehe
   .hw-kopf). Gleiches Rezept wie die Debatten-Chips. */
.hw-sl .angebot .kopf{ flex:0 0 34px; position:relative; width:34px; height:34px; overflow:hidden; background:#0c1626; border:1px solid #20334e; border-radius:8px; }
.hw-sl .angebot .kopf img{ position:absolute; left:-10px; top:-13px; width:52px; height:89px; max-width:none; image-rendering:pixelated; }
.hw-sl .angebot .wer{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hw-sl .angebot .wer .name{ font-size:12.5px; font-weight:700; color:#e6eef8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hw-sl .angebot .wer .menge{ font-size:10.5px; color:#5c7396; }
.hw-sl .preisbox{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.hw-sl .preisbox .preis{ font-size:15px; font-weight:800; line-height:1; color:#e6eef8; }
.hw-sl .preisbox .preis i{ margin-left:3px; font-style:normal; font-size:9.5px; font-weight:600; color:#5c7396; }
.hw-sl .sl-badge{ font-size:9.5px; font-weight:800; padding:2px 6px; border-radius:999px; border:1px solid; white-space:nowrap; }
.hw-sl .sl-badge.unter{ color:#4fd08a; border-color:rgba(79,208,138,.35); background:rgba(79,208,138,.12); }
.hw-sl .sl-badge.ueber{ color:#ff6b5e; border-color:rgba(255,107,94,.35); background:rgba(255,107,94,.1); }
.hw-sl .sl-badge.kurs{ color:#8a93a8; border-color:rgba(138,147,168,.3); background:rgba(138,147,168,.1); }
/* Bester Preis: Eis-Rand + Stern-Tag */
.hw-sl .angebot.beste{ background:#16263e; border-color:rgba(77,216,255,.55); }
.hw-sl .beste-tag{ position:absolute; top:-8px; right:10px; padding:2px 7px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#062033; background:linear-gradient(180deg,#7ae9ff,#4dd8ff); border-radius:999px; }
/* --- Anbieten-CTA (S4) --- */
.hw-sl .sl-cta{ text-align:center; background-color:#101c30; background-image:linear-gradient(180deg, rgba(77,216,255,.08), rgba(77,216,255,0) 60%); }
.hw-sl .sl-cta-frage{ font-size:12.5px; font-weight:700; margin:0 0 8px; }
/* Kompakte Pille statt vollem Breitband (Betreiber: "Button zu groß") */
.hw-sl .sl-knopf{ display:inline-block; width:auto; padding:6px 20px; border-radius:99px; background:linear-gradient(180deg,#7ae9ff,#4dd8ff); color:#062737; font-size:12px; font-weight:800; letter-spacing:.02em; text-decoration:none; }
.hw-sl .sl-knopf:hover{ box-shadow:0 0 0 1px rgba(122,233,255,.7), 0 0 18px rgba(77,216,255,.35); }
.hw-sl .sl-cta-hinweis{ font-size:10.5px; color:#5c7396; margin:8px 0 0; }
/* --- Selbe Kategorie: 2er-Raster mit Mini-Bühnen ---
   ⚠️ 3 Spalten waren bei 280px Leistenbreite nur ~80px je Kachel - fast
   jeder Möbelname wurde zu "Planet…" gestutzt (Betreiber-Meldung).
   2 Spalten + zweizeiliger Namensumbruch statt Ellipsis. */
.hw-sl .kat-raster{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.hw-sl .sl-mini{ display:block; min-width:0; padding:6px 6px 7px; background:#16263e; border:1px solid #20334e; border-radius:10px; text-align:center; text-decoration:none; color:#e6eef8; }
.hw-sl .sl-mini:hover{ border-color:rgba(77,216,255,.6); box-shadow:0 0 14px rgba(77,216,255,.22); }
.hw-sl .sl-buehne{ display:block; height:56px; border-radius:7px; background-color:#101c30;
  background-image:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rar, #4dd8ff) 22%, transparent), transparent 65%), var(--img);
  background-repeat:no-repeat; background-position:center, center; background-size:auto, contain; image-rendering:pixelated; }
.hw-sl .sl-mini-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  margin-top:5px; font-size:11px; font-weight:600; line-height:1.25; overflow:hidden; }
.hw-sl .sl-mini-preis{ display:block; font-size:10.5px; color:#93a8c4; }
.hw-sl .sl-punkt{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; vertical-align:1px; background:var(--rar, #8a93a8); }
.hw-sl .sl-leer{ font-size:12px; color:#5c7396; }
.hw-sl .sl-leer a{ color:#4dd8ff; }

/* =====================================================================
   MÖBELSEITE: HERO-BÜHNE (Variante F1, Betreiber-Abnahme 31.07.2026)
   Ersetzt die alte blaue Kopfbox + gelben Preisbalken + Kennzahlen-Box:
   Möbel groß auf Raritäts-Schimmer, Fakten-Chips, Riesen-Preis in Eis
   mit Trend, "Kurs-Vertrauen"-Skala, Kennzahlen als Stat-Pillen.
   Dazu .hw-f1-zweier: Community + Besitzer nebeneinander.
   ===================================================================== */
/* 1:1 aus dem Mockup furni-detail-varianten.html portiert (Betreiber:
   "keine kleinste Änderung") — Selektoren #f1-probe -> .hw-f1, dazu nur
   die Dynamik-Zutaten (--rar je Möbel, rote Trend-Variante, kein-Kurs). */
.hw-f1{ display:grid; gap:14px; font-size:13px; line-height:1.45; color:#e6eef8; margin-bottom:14px; }
.hw-f1 .f1-hero{ display:grid; grid-template-columns:232px 1fr; gap:18px; padding:16px; background:linear-gradient(180deg,#16263e,#101c30); border:1px solid #20334e; border-radius:13px; }
.hw-f1 .f1-buehne{ display:flex; align-items:center; justify-content:center; min-height:224px; border-radius:11px; border:1px solid #20334e;
  background:radial-gradient(120% 85% at 50% 42%, color-mix(in srgb, var(--rar, #ff8a3d) 30%, transparent) 0%, color-mix(in srgb, var(--rar, #ff8a3d) 10%, transparent) 46%, transparent 72%), #0c1526; }
.hw-f1 .f1-moebel{ max-width:180px; max-height:190px; image-rendering:pixelated; filter:drop-shadow(0 12px 16px rgba(0,0,0,.5)); }
.hw-f1 .f1-name{ margin:0; font-size:24px; font-weight:800; letter-spacing:.01em; color:#e6eef8; }
.hw-f1 .f1-desc{ margin:6px 0 0; font-size:12.5px; color:#93a8c4; max-width:52ch; }
.hw-f1 .f1-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; list-style:none; padding:0; }
.hw-f1 .f1-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid #20334e; border-radius:99px; background:#101c30; font-size:11px; font-weight:600; color:#93a8c4; }
.hw-f1 .f1-chip-rar{ color:var(--rar, #ff8a3d); border-color:color-mix(in srgb, var(--rar, #ff8a3d) 40%, transparent); }
.hw-f1 .f1-punkt{ width:7px; height:7px; border-radius:50%; background:var(--rar, #ff8a3d); }
.hw-f1 .f1-preiszeile{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid #20334e; flex-wrap:wrap; }
.hw-f1 .f1-preis{ display:flex; align-items:baseline; gap:7px; }
.hw-f1 .f1-oe{ font-size:16px; color:#5c7396; }
.hw-f1 .f1-wert{ font-size:44px; font-weight:800; line-height:1; background:linear-gradient(180deg,#7ae9ff,#4dd8ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hw-f1 .f1-wert.f1-ohne{ font-size:30px; background:none; color:#93a8c4; -webkit-background-clip:border-box; }
.hw-f1 .f1-taler{ font-size:14px; font-weight:700; color:#93a8c4; }
.hw-f1 .f1-trend{ display:inline-flex; align-items:baseline; gap:6px; margin-top:9px; font-size:12px; font-weight:800; color:#4fd08a; }
.hw-f1 .f1-trend.f1-ab{ color:#ff6b5e; }
.hw-f1 .f1-trend em{ font-style:normal; font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#5c7396; }
.hw-f1 .f1-vertrauen{ max-width:252px; flex:1 1 170px; min-width:170px; }
.hw-f1 .f1-vkopf{ display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.hw-f1 .f1-skala{ display:inline-flex; gap:3px; }
.hw-f1 .f1-skala i{ width:8px; height:8px; border-radius:50%; border:1px solid #20334e; background:#0c1526; }
.hw-f1 .f1-skala .f1-voll{ background:#4dd8ff; border-color:#4dd8ff; }
.hw-f1 .f1-vlabel{ font-size:11px; color:#93a8c4; white-space:nowrap; }
.hw-f1 .f1-vlabel b{ color:#e6eef8; }
/* gestrichelt wie im Mockup */
.hw-f1 .f1-vinfo{ position:relative; margin-top:9px; padding:8px 10px; font-size:11px; color:#93a8c4; background:#0d1830; border:1px dashed rgba(77,216,255,.45); border-radius:9px; }
.hw-f1 .f1-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; list-style:none; margin:0; padding:0; }
.hw-f1 .f1-stat{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; background:#101c30; border:1px solid #20334e; border-radius:10px; }
.hw-f1 .f1-slabel{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#5c7396; white-space:nowrap; }
.hw-f1 .f1-swert{ font-size:14px; font-weight:800; color:#e6eef8; white-space:nowrap; }
.hw-f1 .f1-swert em{ font-style:normal; font-weight:600; font-size:10px; color:#5c7396; }
.hw-f1 .f1-swert.f1-gruen{ color:#4fd08a; }
.hw-f1 .f1-swert.f1-rot{ color:#ff6b5e; }
/* ---- Karten-Grundlook (Chart/Voting/Besitzer/Angebot/Kommentare) ---- */
.hw-f1 .f1-karte{ padding:14px 16px; background:#101c30; border:1px solid #20334e; border-radius:12px; margin:0; }
.hw-f1 .f1-kkopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.hw-f1 .f1-titel{ margin:0; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#93a8c4; }
.hw-f1 .f1-karte > .f1-titel{ margin-bottom:10px; }
.hw-f1 .f1-sub{ font-weight:600; letter-spacing:.06em; color:#5c7396; }
.hw-f1 .f1-mini{ font-size:10px; font-weight:700; color:#5c7396; white-space:nowrap; }
/* Zeitraum-Tabs als Pillen */
.hw-f1 .f1-tabs{ display:flex; gap:3px; padding:3px; background:#0c1526; border:1px solid #20334e; border-radius:9px; }
.hw-f1 .f1-tab{ padding:4px 10px; border-radius:6px; font-size:11px; font-weight:700; color:#5c7396; text-decoration:none; }
.hw-f1 .f1-tab:hover{ color:#93a8c4; }
.hw-f1 .f1-aktiv, .hw-f1 .f1-tab.f1-aktiv{ color:#7ae9ff; background:rgba(77,216,255,.12); box-shadow:inset 0 0 0 1px rgba(77,216,255,.35); }
/* Umlauf-Zeile unter dem Chart (Mini-Spur statt eigenem Reiter) */
.hw-f1 .f1-umlauf{ display:flex; align-items:center; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid #20334e; }
.hw-f1 .f1-utitel{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#5c7396; }
.hw-f1 .f1-uspark{ flex:1; height:14px; }
.hw-f1 .f1-uspark path, .hw-f1 .f1-uspark polyline{ fill:none; stroke:#93a8c4; stroke-width:2; stroke-linecap:round; }
.hw-f1 .f1-uwert{ font-size:11px; color:#93a8c4; white-space:nowrap; }
.hw-f1 .f1-uwert b{ color:#e6eef8; }
/* ---- Voting + Besitzer nebeneinander ---- */
/* minmax(0,1fr) statt 1fr: sonst reicht ein langer nowrap-Username sein
   min-content-Minimum bis in die Spalten durch und sprengt das Layout. */
.hw-f1 .f1-zweier{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:stretch; }
.hw-f1 .f1-zweier > .f1-karte{ display:flex; flex-direction:column; }
/* Nur in der Besitzer-Karte nach unten drücken. In der Community-Karte
   (Hotel-API aus -> Watch-Zeile dort, Karte ist only-child) würde
   margin-top:auto zu 0 auflösen und den 11px-Abstand fressen. */
.hw-f1 .f1-zweier #hw-owners .f1-watch{ margin-top:auto; padding-top:10px; }
.hw-f1 .f1-zweier > section:only-child{ grid-column:1 / -1; }
.hw-f1 .f1-vote{ display:flex; gap:8px; }
.hw-f1 .f1-vbtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 6px; border-radius:9px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.hw-f1 .f1-steigen{ color:#4fd08a; background:rgba(79,208,138,.10); border:1px solid rgba(79,208,138,.35); }
.hw-f1 .f1-sinken{ color:#ff6b5e; background:rgba(255,107,94,.08); border:1px solid rgba(255,107,94,.30); }
.hw-f1 .f1-vbtn:hover{ box-shadow:0 0 10px rgba(77,216,255,.15); }
.hw-f1 .f1-vcount{ padding:0 7px; border-radius:99px; font-size:11px; background:rgba(230,238,248,.08); }
.hw-f1 .f1-vbar{ display:flex; gap:2px; height:8px; margin:10px 0 8px; border-radius:99px; overflow:hidden; background:#0c1526; }
.hw-f1 .f1-vb-gruen{ background:#4fd08a; }
.hw-f1 .f1-vb-rot{ background:#ff6b5e; }
.hw-f1 .f1-vmeta{ margin:0; font-size:11px; color:#5c7396; }
.hw-f1 .f1-vschaetz{ margin:4px 0 0; font-size:11px; color:#93a8c4; }
.hw-f1 .f1-vschaetz b{ color:#e6eef8; }
.hw-f1 .f1-vhint{ margin:8px 0 0; font-size:10.5px; color:#5c7396; }
.hw-f1 .f1-vhint a{ color:#4dd8ff; }
/* Avatar-Kopf-Chip + Besitzer-Zeilen + Beobachter */
.hw-f1 .f1-avabox{ position:relative; display:block; width:34px; height:34px; overflow:hidden; border-radius:8px; background:#16263e; border:1px solid #20334e; flex:none; }
/* ⚠️ Hier stand "Gesichtsmitte zentrieren" mit -18/-23 auf dem unskalierten
   64x110-Bild. Zentriert war der Kopf damit zwar, er passte aber nicht hinein:
   Er braucht x 13..52 und y 19..52 (nachgemessen 01.08., siehe .hw-kopf), das
   30px-Fenster zeigte nur x 18..48 und y 23..53 - links 5, rechts 4 und oben 4
   Pixel fehlten. Ein kleineres Fenster loest das nicht, das Bild muss
   VERKLEINERT werden. Jetzt dieselben Werte wie .hw-sl .angebot .kopf und
   .hw-d2 .kopf26 (52x89 in 34px), die den Kopf nachgerechnet ganz zeigen. */
.hw-f1 .f1-avabox img{ position:absolute; left:-10px; top:-13px; width:52px; height:89px; max-width:none; image-rendering:pixelated; }
.hw-f1 .f1-ava{ position:relative; display:inline-block; flex:none; }
.hw-f1 .f1-dot{ position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; border-radius:50%; background:#4fd08a; border:2px solid #101c30; }
.hw-f1 .f1-owner{ display:flex; align-items:center; gap:10px; }
.hw-f1 .f1-owner + .f1-owner{ margin-top:9px; }
.hw-f1 .f1-owner b{ color:#e6eef8; }
.hw-f1 .f1-oinfo{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.hw-f1 .f1-oinfo b{ font-size:12.5px; }
.hw-f1 .f1-oinfo b a{ color:inherit; text-decoration:none; }
.hw-f1 .f1-oinfo b a:hover{ color:#7ae9ff; }
.hw-f1 .f1-oinfo em{ font-style:normal; font-size:10.5px; color:#4fd08a; }
.hw-f1 .f1-oinfo em.f1-still{ color:#5c7396; }
.hw-f1 .f1-ochip{ padding:3px 9px; border-radius:99px; border:1px solid rgba(255,138,61,.4); color:#ff8a3d; font-size:10px; font-weight:700; white-space:nowrap; }
.hw-f1 .f1-watch{ display:flex; align-items:center; gap:7px; margin:11px 0 0; padding-top:10px; border-top:1px solid #20334e; font-size:11px; color:#93a8c4; }
.hw-f1 .f1-auge{ color:#5c7396; flex:none; }
/* ---- Verkaufsangebot ---- */
.hw-f1 .f1-formzeile{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12.5px; color:#93a8c4; }
.hw-f1 .f1-input{ padding:6px 8px; background:#0c1526; border:1px solid #20334e; border-radius:8px; color:#e6eef8; font:inherit; font-weight:700; text-align:center; }
.hw-f1 .f1-input:focus{ outline:none; border-color:rgba(77,216,255,.45); }
.hw-f1 .f1-kurz{ width:46px; }
.hw-f1 .f1-mittel{ width:78px; }
.hw-f1 .f1-btn{ margin-left:auto; padding:7px 14px; border-radius:9px; border:0; background:linear-gradient(180deg,#7ae9ff,#4dd8ff); color:#06131f; font-size:12px; font-weight:800; cursor:pointer; white-space:nowrap; font-family:inherit; }
.hw-f1 .f1-btn:hover{ box-shadow:0 0 0 1px rgba(122,233,255,.7), 0 0 14px rgba(77,216,255,.3); }
.hw-f1 .f1-formnote{ margin:8px 0 0; font-size:10.5px; color:#5c7396; }
/* ---- Kommentare ---- */
.hw-f1 .f1-komm{ display:flex; gap:10px; padding:10px 0; border-top:1px solid #20334e; }
.hw-f1 .f1-ktext{ flex:1; min-width:0; }
.hw-f1 .f1-kmeta{ margin:0; display:flex; align-items:center; gap:7px; font-size:11px; color:#5c7396; flex-wrap:wrap; }
.hw-f1 .f1-kmeta b{ font-size:12px; color:#e6eef8; }
.hw-f1 .f1-kmeta b a{ color:inherit; text-decoration:none; }
.hw-f1 .f1-kmeta b a:hover{ color:#7ae9ff; }
.hw-f1 .f1-kmeta em{ font-style:normal; font-size:10px; }
.hw-f1 .f1-kbody{ margin:3px 0 0; font-size:12px; color:#93a8c4; }
.hw-f1 .f1-kneu{ display:flex; gap:8px; margin-top:2px; padding-top:12px; border-top:1px solid #20334e; align-items:flex-start; }
.hw-f1 .f1-kinput{ flex:1; box-sizing:border-box; height:37px; min-height:37px; padding:9px 11px; background:#0c1526; border:1px solid #20334e; border-radius:9px; font-size:12px; line-height:1.4; letter-spacing:normal!important; color:#e6eef8; font-family:inherit; resize:none; overflow:auto; }
.hw-f1 .f1-kinput::placeholder{ color:#5c7396; }
.hw-f1 .f1-kinput:focus{ outline:none; border-color:rgba(77,216,255,.45); }
.hw-f1 .f1-kneu .f1-btn{ margin-left:0; }
/* Bearbeiten/Löschen-Knöpfe der eigenen Kommentare in Karten-Optik */
.hw-f1 .f1-komm .hw-dc-actions{ display:flex; gap:4px; align-items:flex-start; }
/* Legacy-ID-Styles (#hw-history, #hw-community, ...) haben höhere Spezifität
   als .f1-karte — hier mit .hw-f1 davor überstimmen, damit ALLE Karten
   denselben Mockup-Look tragen. */
.hw-f1 #hw-history, .hw-f1 #hw-community, .hw-f1 #hw-owners,
.hw-f1 #add_to_inv, .hw-f1 #hw-kommentare{
  background:#101c30; border:1px solid #20334e; border-radius:12px;
  padding:14px 16px; margin:0; box-shadow:none;
}
.hw-f1 #hw-history .hw-chart-wrap{ background:none; border:0; padding:0; margin:0; }
.hw-f1 #hw-history .hw-history-foot{ margin-top:8px; font-size:10.5px; color:#5c7396; border:0; background:none; padding:0; }
.hw-f1 #hw-history .hw-history-foot b{ color:#93a8c4; }
.hw-f1 #hw-history .hw-leer{ background:none; border:0; padding:8px 0; color:#93a8c4; }
/* Inline-Bearbeiten der eigenen Kommentare (Mechanik wie hw-dc-card) */
.hw-f1 .f1-komm .hw-dc-edit{ display:none; margin-top:6px; }
.hw-f1 .f1-komm.editing .hw-dc-view{ display:none; }
.hw-f1 .f1-komm.editing .hw-dc-edit{ display:block; }
.hw-f1 .f1-komm .hw-dc-edit textarea{
  width:100%; box-sizing:border-box; padding:8px 11px; background:#0c1526;
  border:1px solid #20334e; border-radius:9px; font:inherit; font-size:12px;
  letter-spacing:normal!important; color:#e6eef8; resize:vertical; min-height:56px;
}
.hw-f1 .f1-komm .hw-dc-edit textarea:focus{ outline:none; border-color:rgba(77,216,255,.45); }
.hw-f1 .f1-komm .hw-dc-edit-btns{ display:flex; gap:6px; margin-top:6px; }
.hw-f1 .f1-komm .hw-dc-btn{
  padding:5px 12px; border-radius:8px; border:1px solid #20334e; background:#0c1526;
  color:#93a8c4; font:inherit; font-size:11px; font-weight:700; cursor:pointer;
}
.hw-f1 .f1-komm .hw-dc-btn-save{ background:linear-gradient(180deg,#7ae9ff,#4dd8ff); border-color:transparent; color:#06131f; }
.hw-f1 .f1-komm .hw-dc-act{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border:1px solid #20334e; border-radius:7px; background:#0c1526; color:#5c7396; cursor:pointer;
}
.hw-f1 .f1-komm .hw-dc-act:hover{ color:#93a8c4; border-color:#2c4468; }
.hw-f1 .f1-komm .hw-dc-act-del:hover{ color:#ff6b5e; border-color:rgba(255,107,94,.4); }
.hw-f1 .f1-komm .hw-dc-actions form{ margin:0; display:inline-flex; }
.hw-f1 .f1-watch a:hover{ text-decoration:underline; }
/* ---- Besitzer als "Kopf-Regal" (O1, Betreiber-Abnahme 31.07.) ---- */
/* C1: volle Breite -> 7 Spalten (Handy unten wieder 4) */
.hw-f1 .o1-raster{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.hw-f1 .o1-zelle{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 6px; background:#0c1526; border:1px solid #20334e; border-radius:9px; text-decoration:none; min-width:0; }
.hw-f1 .o1-zelle:hover{ border-color:rgba(77,216,255,.45); }
/* 40px statt 34px: der Kopf ist gemessen 40 Pixel breit (siehe .hw-kopf) -
   im alten 34er-Kasten wurde links wie rechts eine Scheibe Haar abgeschnitten. */
.hw-f1 .o1-kopf{ position:relative; display:block; width:40px; height:40px; overflow:hidden; border-radius:8px; background:#16263e; border:1px solid #20334e; }
.hw-f1 .o1-kopf img{ position:absolute; left:-13px; top:-17px; width:64px; height:110px; max-width:none; image-rendering:pixelated; }
.hw-f1 .o1-name{ font-size:10px; font-weight:700; color:#e6eef8; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hw-f1 .o1-anz{ font-size:9.5px; font-weight:800; color:#ff8a3d; }
.hw-f1 .f1-dot.o1-still{ background:#5c7396; }
.hw-f1 .o1-mehr{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px 6px; background:rgba(77,216,255,.06); border:1px dashed rgba(77,216,255,.45); border-radius:9px; cursor:pointer; font-family:inherit; color:#4dd8ff; }
.hw-f1 .o1-mehr:hover{ background:rgba(77,216,255,.12); }
.hw-f1 .o1-mehr b{ font-size:15px; font-weight:800; }
.hw-f1 .o1-mehr span{ font-size:9.5px; font-weight:700; }
.hw-f1 .o1-versteckt{ display:none; }
.hw-f1 .o1-raster.o1-offen .o1-versteckt{ display:flex; }
.hw-f1 .o1-raster.o1-offen .o1-mehr{ display:none; }
.hw-f1 .o1-legende{ margin:9px 0 0; font-size:10px; color:#5c7396; }
.hw-f1 .o1-legende i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#4fd08a; margin-right:4px; }
.hw-f1 .o1-weniger{ display:none; margin:7px 0 0; font-size:10.5px; color:#4dd8ff; font-weight:700; cursor:pointer; background:none; border:0; font-family:inherit; padding:0; align-self:flex-start; }
/* C1: Community kompakt in einer Zeile (Buttons links, Balken + Meta rechts) */
.hw-f1 .c1-vote{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hw-f1 .c1-buttons{ display:flex; gap:8px; flex:0 0 auto; margin:0; }
.hw-f1 .c1-buttons .f1-vbtn{ padding:8px 14px; }
.hw-f1 .c1-balkenblock{ flex:1; min-width:200px; }
.hw-f1 .c1-balkenblock .f1-vbar{ display:flex; margin:0 0 5px; }
.hw-f1 .c1-balkenblock .f1-vmeta{ display:block; margin:0; }
.hw-f1 .c1-balkenblock .f1-vmeta b{ color:#93a8c4; }
/* Furni-Detailseite OHNE äußeren Kasten (Betreiber 31.07.): die F1-Karten
   schweben direkt auf der Seite, wie im Mockup. */
#content.hw-frei{ background:none !important; border:0 !important;
  box-shadow:none !important; padding:0 0 34px !important; }
/* Alle Seiten: etwas Luft zwischen Navigation und Inhaltskasten. */
#content{ margin-top:18px; }
@media (max-width:860px){
  .hw-f1 .f1-hero{ grid-template-columns:1fr; }
  .hw-f1 .f1-buehne{ min-height:180px; }
  .hw-f1 .f1-stats{ grid-template-columns:repeat(2,1fr); }
  .hw-f1 .f1-vertrauen{ max-width:none; }
  .hw-f1 .f1-vkopf{ justify-content:flex-start; }
  .hw-f1 .f1-zweier{ grid-template-columns:1fr; }
  .hw-f1 .f1-kkopf{ flex-wrap:wrap; }
  .hw-f1 .o1-raster{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* =====================================================================
   Angebots-Kaesten (/angebote): Kopf-Chip statt gequetschtem Ganzkoerper
   ---------------------------------------------------------------------
   Die Alt-Regel .preview_debate_comment_text (general.css) schob den
   kompletten Avatar als Hintergrundbild in 33x56 hinter den Text. Der
   Kasten bekommt jetzt einen echten Kopf davor; das Innenabstands-Loch
   fuer das alte Hintergrundbild faellt damit weg.
   ===================================================================== */
.preview_debate_comment_text.mit-kopf{
  display:flex; align-items:flex-start; gap:10px;
  padding:5px 0 0 5px; background-image:none;
}
.preview_debate_comment_text.mit-kopf .ang-text{ flex:1; min-width:0; }
.preview_debate_comment_text.mit-kopf .ang-kopf{ flex:none; }

/* ---- Glocke + Meldungen ----------------------------------------------------
   Die Glocke erscheint NUR mit Zahl (servercore/navigation.php) - eine dauerhaft
   graue Null lernt man in einer Woche zu uebersehen. */
.hw-pk-glocke{ display:inline-flex; align-items:center; gap:5px; }
.hw-pk-glocke svg{ width:13px; height:13px; }
.hw-pk-glocke i{ font-style:normal; font-weight:800; font-size:10px; line-height:1;
  background:var(--hw-accent); color:var(--hw-topbar); border-radius:9px; padding:2px 5px; }

.hw-meld-liste{ display:flex; flex-direction:column; gap:8px; }
.hw-meld{ display:flex; align-items:center; gap:11px; padding:10px 12px; text-decoration:none;
  color:inherit; background:var(--hw-card); border:1px solid var(--hw-border); border-radius:11px; }
.hw-meld:hover{ border-color:var(--hw-accent); }
/* Ungelesen bekommt eine Kante links statt einer Flaechenfarbe - das bleibt
   auch bei zehn Eintraegen ruhig und ist trotzdem sofort erkennbar. */
.hw-meld-neu{ border-left:3px solid var(--hw-accent); }
.hw-meld-bild{ flex:0 0 38px; width:38px; height:38px; border-radius:8px; background:#0c1626 center/contain no-repeat;
  border:1px solid var(--hw-border); }
.hw-meld-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hw-meld-moebel{ font-size:13px; font-weight:700; color:var(--hw-text); }
.hw-meld-detail{ font-size:12px; line-height:1.4; color:var(--hw-text-soft); }
.hw-meld-detail b{ color:var(--hw-text); font-weight:700; }
.hw-meld-zeit{ font-size:10.5px; color:var(--hw-text-mute); }
.hw-meld-trenner{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--hw-text-mute); margin:6px 0 2px; }
.hw-meld-leer{ background:var(--hw-card); border:1px solid var(--hw-border); border-radius:12px;
  padding:22px; display:flex; flex-direction:column; gap:6px; }
.hw-meld-leer b{ font-size:14px; }
.hw-meld-leer span{ font-size:12.5px; color:var(--hw-text-soft); }

/* Kontakt-Knopf bei einem fremden Angebot. Er sitzt jetzt IN der Karte
   (.ang-aktion, siehe beim .angebot-Block) - der frühere .sl-kontakt-Kasten
   darunter mitsamt seinem negativen Abstand ist weg, er sah aus wie ein
   verirrtes Element neben der Karte. */
.hw-sl .sl-int{ font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
  color:var(--hw-accent); background:none; border:1px solid var(--hw-border); border-radius:8px; padding:3px 9px; }
.hw-sl .sl-int:hover:not(:disabled){ border-color:var(--hw-accent); background:var(--hw-accent-soft); }
.hw-sl .sl-int:disabled{ color:var(--hw-text-mute); cursor:default; }
/* Nur noch fuer Fehlermeldungen - die Erfolgsmeldung steht im Knopf. */
.hw-sl .sl-int-antwort{ font-size:10.5px; color:var(--hw-bad); }


/* ---- Glocke in der Profilkarte --------------------------------------------
   Sitzt oben rechts neben dem Abmelden-Symbol (.hw-pk-oben), NICHT mehr als
   Pille zwischen den Navigationslinks: die Pillen fuehren woandershin, die
   Glocke oeffnet etwas an Ort und Stelle. */
.hw-pk-glocke{
  position:relative; display:grid; place-items:center;
  width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  border-radius:7px; color:#5c7396; font:inherit;
  transition:color .15s, background .15s;
}
.hw-pk-glocke svg{ width:14px; height:14px; display:block; }
.hw-pk-glocke:hover,
.hw-pk-glocke[aria-expanded="true"]{ color:var(--hw-accent); background:rgba(77,216,255,.10); }
/* Der Zaehler sitzt AUF der Glocke, nicht daneben - so bleibt die Zeile schmal
   und die Zahl liest sich als Marke, nicht als zweiter Knopf. */
.hw-pk-glocke i{
  position:absolute; top:-3px; right:-4px;
  min-width:14px; height:14px; padding:0 3px; box-sizing:border-box;
  font-style:normal; font-weight:800; font-size:9px; line-height:14px; text-align:center;
  background:var(--hw-accent); color:#08131f; border-radius:8px;
  box-shadow:0 0 0 2px var(--hw-card);
}

/* ---- Klappfenster ---------------------------------------------------------
   ⚠️ position:FIXED und per Skript ans Seitenende gehaengt: #header hat
   overflow:hidden (fuer den Lichtschimmer im Banner) und die Profilkarte ein
   transform - beides zusammen schneidet jedes Fenster ab, das im Kopf steckt.
   top/right setzt das Skript, ausgerichtet an der rechten KARTENKANTE. */
.hw-glockenfenster{
  position:fixed; z-index:2000;
  width:340px; max-width:calc(100vw - 24px); padding:0; overflow:hidden;
  border-radius:14px;
  /* Glas wie die Profilkarte darueber (gleicher Verlauf, gleiche heller
     Kante, nur staerker geblurrt, weil hier Inhalt durchscheint). */
  background:linear-gradient(180deg, rgba(22,38,62,.86), rgba(16,28,48,.80));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 48px -14px rgba(0,0,0,.75), 0 0 22px rgba(77,216,255,.07),
             inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
/* ⚠️ Ohne Glas-Unterstuetzung (aeltere Browser) waere das Fenster halb
   durchsichtig und der Text unlesbar - dann deckend fuellen. */
@supports not (backdrop-filter: blur(1px)){
  .hw-glockenfenster{ background:#131f34; }
}
.hw-glockenfenster[hidden]{ display:none; }

.hw-glockenfenster .gf-kopf{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:11px 13px 10px; border-bottom:1px solid rgba(255,255,255,.09);
}
.hw-glockenfenster .gf-titel{
  font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--hw-text-mute);
}
.hw-glockenfenster .gf-neu-zahl{
  font-size:10px; font-weight:700; background:var(--hw-accent); color:#08131f;
  border-radius:8px; padding:2px 8px;
}

/* Nur die LISTE rollt - Kopf und Fuss bleiben stehen. Die Hoehe setzt das
   Skript aus dem freien Platz (siehe platzieren() in navigation.php);
   der Wert hier ist nur die Notbremse, falls kein JS laeuft. */
.hw-glockenfenster .gf-liste{ max-height:min(60vh, 300px); overflow-y:auto; overscroll-behavior:contain; }
.hw-glockenfenster .gf-liste::-webkit-scrollbar{ width:8px; }
.hw-glockenfenster .gf-liste::-webkit-scrollbar-track{ background:transparent; }
.hw-glockenfenster .gf-liste::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
.hw-glockenfenster .gf-liste::-webkit-scrollbar-thumb:hover{ background:rgba(77,216,255,.4); }
/* Die letzte Zeile braucht keine Trennlinie - darunter kommt der Fuss. */
.hw-glockenfenster .gf-liste .gf-zeile:last-child{ border-bottom:0; }
.hw-glockenfenster .gf-zeile{
  display:flex; gap:11px; align-items:flex-start;
  padding:10px 13px; text-decoration:none; color:inherit;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.hw-glockenfenster .gf-zeile:hover{ background:rgba(255,255,255,.05); }
/* Ungelesen: schmale Kante links statt Punkt. Der Punkt schwebte frei neben
   der Zeile und sah aus wie ein Aufzaehlungszeichen. */
.hw-glockenfenster .gf-neu{ box-shadow:inset 3px 0 0 var(--hw-accent); }

.hw-glockenfenster .gf-bild{
  flex:0 0 36px; width:36px; height:36px; border-radius:8px;
  background:#0c1626 center/contain no-repeat; border:1px solid var(--hw-border);
}
/* Ohne Bild ein ruhiges Rautenzeichen statt eines leeren Kastens - der sah aus
   wie ein Ladefehler. */
.hw-glockenfenster .gf-bild-leer{ display:grid; place-items:center; }
.hw-glockenfenster .gf-bild-leer::before{ content:"◆"; font-size:13px; color:#2c4a70; }

.hw-glockenfenster .gf-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.hw-glockenfenster .gf-moebel{
  font-size:12.5px; font-weight:700; color:var(--hw-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hw-glockenfenster .gf-detail{ font-size:11.5px; line-height:1.35; color:var(--hw-text-soft); }
.hw-glockenfenster .gf-detail b{ color:var(--hw-text); font-weight:700; }
.hw-glockenfenster .gf-zeit{ font-size:10px; color:var(--hw-text-mute); margin-top:1px; }

.hw-glockenfenster .gf-leer{ padding:20px 14px; font-size:11.5px; line-height:1.5; color:var(--hw-text-soft); }
.hw-glockenfenster .gf-fuss{
  display:block; text-align:center; padding:11px;
  font-size:11px; font-weight:700; text-decoration:none; color:var(--hw-accent);
}
.hw-glockenfenster .gf-fuss:hover{ background:rgba(255,255,255,.05); }
/* =========================================================================
 *  HANDY-KOPF                                            (04.08.2026)
 * -------------------------------------------------------------------------
 *  🔥 WARUM DIESER BLOCK GANZ AM ENDE STEHT UND !important BENUTZT:
 *  Weiter oben (Zeile ~3087 ff., "Eisnacht"-Schicht) werden Logo, Spruch,
 *  Navigation und Anmeldeknopf auf DESKTOP-Masse festgenagelt - mit
 *  !important und OHNE Medienabfrage. Dadurch wurde die vorhandene
 *  Handy-Regel bei ~1653 wirkungslos: Sie reserviert mit
 *  "padding-bottom:52px" Platz fuer den Anmeldebereich, doch das spaetere
 *  "padding:0 !important" auf #top hat den Platz wieder kassiert -
 *  !important schlaegt eine normale Angabe unabhaengig von der Reihenfolge.
 *
 *  FOLGE, am 04.08.2026 bei 390px nachgemessen und im Bild gesehen:
 *  Der Knopf "Mit OldHabbo anmelden" lag MITTEN AUF der Navigation und
 *  verdeckte drei der fuenf Punkte. Anmelden ging noch, aber "Startseite",
 *  "Debatte" und "Eventnews" waren nicht mehr erreichbar.
 *
 *  WEG STATT PFLASTER: Der rechte Kasten wird auf schmalen Geraeten aus der
 *  absoluten Lage GENOMMEN (position:static) und bekommt eine eigene Zeile
 *  unter der Navigation. Dann kann er nichts mehr ueberdecken, ganz ohne
 *  reservierte Hoehe - und es ist egal, wie hoch sein Inhalt wird
 *  (angemeldet steht dort die Profilkarte statt des Knopfes).
 * ========================================================================= */
@media (max-width:760px){

  /* ---- Kopf: Logo ueber dem Spruch, beides mittig ---------------------- */
  /* Vorher nahm der Kopf 287 der 850 sichtbaren Punkte ein - ein Drittel des
     Bildschirms, bevor der erste Inhalt kam. */
  #header_image{
    flex-direction:column !important; align-items:center !important;
    justify-content:center !important; gap:10px !important;
    padding:16px 14px 14px !important; text-align:center;
  }
  #logolink{
    width:112px !important; height:85px !important; flex:0 0 auto !important;
  }
  .hw-claim{ text-align:center !important; }
  .hw-claim .hw-claim-titel{ font-size:18px !important; line-height:1.2 !important; }
  .hw-claim p{ font-size:12px !important; }
  .hw-claim-stand{ margin-top:7px !important; font-size:10.5px !important; }

  /* ---- Leiste: zwei Zeilen statt Ueberlagerung ------------------------- */
  #top{
    padding:0 !important;
    display:flex !important; flex-direction:column !important;
  }
  /* Fuenf Punkte passen bei 360px nebeneinander, wenn jeder gleich viel
     Platz bekommt. flex-basis:0 ist wichtig - mit "auto" bestimmt der
     laengste Text ("Startseite") die Breite aller. */
  #top_inner{
    /* ⚠️ box-sizing ist Pflicht: ohne das rechnet der Browser 100% PLUS den
       Innenabstand und die Zeile ist 4px breiter als das Fenster - genau so
       gemessen (394px bei 390px Fenster). */
    width:100% !important; max-width:none !important; box-sizing:border-box !important;
    margin:0 !important; padding:0 2px !important;
    display:flex !important; justify-content:stretch !important; gap:0 !important;
  }
  #top_inner a.hw-navpunkt{
    flex:1 1 0 !important; min-width:0 !important;
    margin:0 !important; padding:9px 2px 8px !important;
    font-size:10px !important; gap:3px !important;
    /* 44px ist die uebliche Mindestgroesse fuer einen Fingertipp. */
    min-height:44px !important; justify-content:center !important;
  }
  #top_inner a.hw-navpunkt svg{ width:18px !important; height:18px !important; }
  #top_inner a.hw-navpunkt span{
    /* Lange Namen duerfen die Kachel nicht sprengen. */
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* ---- Anmeldung / Profil: eigene Zeile UNTER der Navigation ----------- */
  #hw-rechts{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important; box-sizing:border-box;
    display:flex !important; justify-content:center !important; align-items:center !important;
    gap:10px !important; padding:8px 12px 10px !important;
    border-top:1px solid rgba(255,255,255,.07);
  }
  #hw-rechts:empty{ display:none !important; }   /* angemeldet ohne Inhalt: keine leere Zeile */
  #oh_login_button{
    position:static !important;
    width:100% !important; max-width:320px !important;
    padding:11px 16px !important; font-size:13px !important;
    text-align:center !important;
  }
  /* Angemeldet steht hier die Profilkarte - die darf die Zeile fuellen. */
  #hw-rechts #member_area{ position:static !important; width:auto !important; }

  /* ---- Cookie-Hinweis: der klebte am unteren Rand ueber dem Inhalt ----- */
  #cookieChoiceInfo{ font-size:11.5px !important; line-height:1.45 !important; padding:9px 12px !important; }
}

/* Sehr schmale Geraete (iPhone SE und aehnliche) --------------------------- */
@media (max-width:380px){
  #top_inner a.hw-navpunkt{ font-size:9.5px !important; padding:9px 1px 8px !important; }
  #top_inner a.hw-navpunkt svg{ width:17px !important; height:17px !important; }
  #logolink{ width:98px !important; height:74px !important; }
  .hw-claim .hw-claim-titel{ font-size:16.5px !important; }
}

/* =========================================================================
 *  HANDY: TIPPZIELE UND KLEINSTSCHRIFT                    (04.08.2026)
 * -------------------------------------------------------------------------
 *  Am laufenden Browser bei 390px gemessen, nicht geschaetzt. Auffaellig
 *  waren nicht "zu kleine Schrift" im Allgemeinen - vieles davon sind
 *  bewusst kleine Beschriftungen und voellig lesbar -, sondern ein paar
 *  ganz konkrete Stellen:
 *
 *    Glocke und Abmelden in der Profilkarte   22 x 22 px
 *    Kommentar loeschen                       24 x 24 px
 *    Zeitraum-Reiter der Preiskurve           24 px hoch
 *    Pillen der Profilkarte                   21 px hoch
 *
 *  Mit dem Finger trifft man das nur mit Glueck; als Anhaltswert gelten
 *  44 px (Apple) bzw. 48 px (Google). Vergroessert wird die TREFFERFLAECHE
 *  ueber Innenabstand - das Symbol selbst bleibt gleich gross, damit sich
 *  das Aussehen nicht veraendert.
 * ========================================================================= */
@media (max-width:760px){

  /* ---- Symbolknoepfe: Flaeche vergroessern, Symbol gleich lassen -------- */
  .hw-pk-glocke,
  .hw-pk-logout{
    min-width:40px !important; min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  /* Der Zaehler an der Glocke sitzt absolut - er darf nicht mitwachsen. */
  .hw-pk-glocke .hw-pk-zahl{ transform:translate(4px,-4px); }

  .hw-dc-act{
    min-width:36px !important; min-height:36px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* ---- Zeitraum-Reiter der Preiskurve ---------------------------------- */
  /* Werden bei jedem Blick auf ein Moebel benutzt - die muessen sitzen. */
  .f1-tab{
    min-height:36px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding-left:12px !important; padding-right:12px !important;
  }

  /* ---- Pillen der Profilkarte ------------------------------------------ */
  .hw-pk-pille{
    min-height:34px !important;
    display:inline-flex !important; align-items:center !important;
    padding-top:0 !important; padding-bottom:0 !important;
  }

  /* ---- Die wirklich zu kleinen Beschriftungen -------------------------- */
  /* 9 bis 9,5px sind auf einem Handy an der Grenze. Angehoben wird NUR das,
     was darunter liegt - die uebrigen 10 bis 10,5px bleiben, sonst platzt
     das Gefuege (etwa die Anzahl "4x" in den engen Besitzer-Kaesten). */
  .f1-slabel,
  .f1-utitel,
  .o1-anz,
  .zusatz,
  .sl-badge,
  .beste-tag{ font-size:10.5px !important; }
  /* "Taler" steht direkt hinter grossen Zahlen - eine Spur groesser reicht.
     ⚠️ Der richtige Ort ist .preisbox .preis i, NICHT .f1-preis i: in der
     Angebotszeile steckt das <i> in .preis innerhalb von .preisbox. Mein
     erster Versuch traf ins Leere - erst die Messung am Browser ("9.5px|i"
     stand danach immer noch da) hat es gezeigt. */
  .preisbox .preis i, .f1-preis i{ font-size:10.5px !important; }

  /* ---- Die beiden Aktionsknoepfe, die noch zu flach waren -------------- */
  /* "Interesse zeigen" ist der Knopf, ueber den ein Handel zustande kommt -
     ausgerechnet der war mit 23px der flachste auf der Seite. */
  .sl-int{
    min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    padding-left:14px !important; padding-right:14px !important;
  }
  .f1-btn{ min-height:40px !important; }

  /* ---- Fusszeilen-Links ------------------------------------------------ */
  /* Team, Nutzungsbedingungen und Impressum sind KEINE Links im Fliesstext,
     sondern eigenstaendige Ziele - und mit 13px Hoehe kaum zu treffen.
     Das Impressum ist zudem eine Pflichtangabe; es muss erreichbar sein. */
  #footer a{
    display:inline-block; min-height:34px; line-height:34px;
    padding:0 6px;
  }

  /* ---- Beschriftung der Preiskurve ------------------------------------- */
  /* 9px auf einem Handy sind Zahlen zum Raten - und genau diese Zahlen sind
     der Grund, warum jemand die Kurve ueberhaupt ansieht. */
  .hw-chart-marker{ font-size:10.5px !important; }
}

/* --- Handy: Filter und Weiterfuehren auf der Startseite ------------------
   Die Stufen-Chips ("Alle Stufen", "Ultra selten", ...) und die beiden
   Auswahlknoepfe (Kategorie / Sortieren) sind das Werkzeug, mit dem man das
   Verzeichnis durchsieht - und lagen mit 24 bis 27px unter jeder
   vernuenftigen Tippgroesse. Gleiches gilt fuer die Weiter-Links unter den
   Kaesten.
   Nur die HOEHE waechst; Schrift und Farben bleiben, damit die Chipreihe
   nicht plotzlich das halbe Bild einnimmt. */
@media (max-width:760px){
  .hw-stufen-chip,
  .hw-filter-chip{
    min-height:36px !important;
    display:inline-flex !important; align-items:center !important;
    padding-top:0 !important; padding-bottom:0 !important;
  }
  .hw-topstory-alle,
  .hw-mehr{
    min-height:36px !important;
    display:inline-flex !important; align-items:center !important;
  }
  /* Symbolknoepfe in den Suchfeldern (28x28). */
  .hw-suche button{
    min-width:38px !important; min-height:38px !important;
  }

  /* Blaettern unter der Moebelliste - lag mit 31px genau einen Hauch unter
     der Grenze, und man tippt es auf jeder zweiten Seite an. */
  .hw-seiten-nr,
  .hw-seiten-pfeil{
    min-height:38px !important; min-width:38px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* --- Handy: die letzten drei echten Aktionen ------------------------------
   Nach der Reihe durchgemessen; das hier blieb uebrig und ist jeweils etwas,
   das man wirklich antippt (kein Link mitten im Satz). */
@media (max-width:760px){
  /* Folgen/Nicht-mehr-folgen in der Debatte. */
  .d2-glocke{
    min-height:38px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
  /* Der Anmelde-Knopf auf /user/login. Ein input laesst sich nicht per
     inline-flex mittig setzen - hier reicht die Hoehe. */
  #login_form input[type=submit],
  input[type=submit]{ min-height:40px !important; }

  /* Namen in der Angebotsliste: eigene Zeile, kein Fliesstext - deshalb
     zaehlen sie als Ziel und nicht als Wort im Satz. */
  a.debate_comment_name_user{
    min-height:34px !important;
    display:inline-flex !important; align-items:center !important;
  }
}

/* --- Handy: Ansichts-Reiter und Filter untereinander ---------------------
   "Alle Werte | Neu im Hotel | Zuletzt bewegt" teilte sich die Zeile mit den
   beiden Auswahlknoepfen (Kategorie / Sortieren). Bei 390px blieb fuer die
   Reiter so wenig Platz, dass "Neu im Hotel" auf DREI Zeilen umbrach -
   "Neu / im / Hotel". Auf schmalen Geraeten bekommen beide eine eigene
   Zeile; die Reiter duerfen dann seitlich rollen statt zu brechen. */
@media (max-width:760px){
  .hw-tabs{ flex-wrap:wrap; row-gap:8px; }
  .hw-tabs a{ white-space:nowrap; }
  .hw-tabs-rechts{
    margin-left:0 !important; width:100%;
    display:flex !important; gap:8px; flex-wrap:wrap; padding-bottom:0 !important;
  }
  .hw-tabs-rechts > *{ flex:1 1 auto; }
}

/* --- Handy: die letzten drei Stellen aus der LIVE-Messung -----------------
   Diese drei sind mir lokal NICHT aufgefallen - meine Testdatenbank hat zu
   wenig Inhalt (nur ein Newsartikel, also gar keine Wechsler-Punkte, und
   kaum Teammitglieder). Gefunden erst beim Messen gegen oldhabbowert.de.
   Merke: den Mobil-Durchgang IMMER auch gegen die echte Seite fahren. */
@media (max-width:760px){

  /* 🔥 Die Punkte des Topstory-Wechslers waren 6 x 6 PIXEL gross. Mit dem
     Finger trifft man das nicht - man erwischt die Nachricht darunter und
     landet im Artikel, statt weiterzublaettern.
     Der Punkt bleibt optisch 6px; gewachsen ist nur die Flaeche drumherum
     (durchsichtiger Innenabstand, Hintergrund nur auf die Inhaltsflaeche
     gemalt). Deshalb sieht der Wechsler unveraendert aus. */
  .hw-topstory-dot{
    width:32px !important; height:32px !important;
    padding:13px !important; border:0 !important;
    background-clip:content-box !important;
    box-sizing:border-box !important;
  }
  /* Der Punktebalken sass eng am Rand - mit den groesseren Flaechen braucht
     er etwas weniger eigenen Abstand, sonst wirkt er aufgeblaeht. */
  .hw-topstory-dots{ padding:1px 4px !important; gap:0 !important; }

  /* Die Ansichts-Reiter lagen mit 30px genau unter der Grenze. */
  .hw-tabs a{
    min-height:40px !important;
    display:inline-flex !important; align-items:center !important;
  }

  /* "Biete es an" - der Weg, ueber den ein Angebot ueberhaupt entsteht.
     Lokal nicht aufgefallen, weil ich fuer mein Testmoebel schon ein Angebot
     habe und der Knopf dann gar nicht erscheint. Erst die Live-Messung an
     einem fremden Moebel hat ihn gezeigt (29px). */
  .sl-knopf{
    min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* "Profil von ..." ist der einzige Knopf auf jeder Team-Karte. */
  .hw-tl .msg{
    min-height:40px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* --- Handy: die angemeldeten Seiten --------------------------------------
   Meine Moebel, Beobachtungen, Meldungen und das eigene Profil. Ueberlaufen
   tut dort nichts, aber vier Bedienelemente waren zu klein - und zwar
   ausgerechnet die, die man WIEDERHOLT antippt. */
@media (max-width:760px){

  /* 🔥 Die Stueckzahl-Knoepfe auf "Meine Moebel" waren 26 x 26 px. Man tippt
     sie nicht einmal, sondern mehrfach hintereinander, um von 1 auf 5 zu
     kommen - da faellt jeder Fehlgriff doppelt auf. */
  .step-knopf{
    min-width:40px !important; min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* Stift (bearbeiten) und Kreuz (entfernen) an jedem Eintrag: 28 x 28. */
  .werkzeug{
    min-width:38px !important; min-height:38px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* Die Glocke an jedem beobachteten Moebel (27 x 27) - der einzige Weg,
     eine Beobachtung wieder loszuwerden. */
  .glocke{
    min-width:38px !important; min-height:38px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }

  /* "Jetzt verknuepfen" fuehrt zur Kontoverknuepfung mit dem Hotel - ohne
     die bleibt die halbe Seite fuer den Benutzer leer. */
  .konto-cta{
    min-height:40px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* =========================================================================
 *  ABGESCHNITTENE INHALTE AUF DEM HANDY                    (05.08.2026)
 * -------------------------------------------------------------------------
 *  🔥 WARUM DAS SO LANGE UNBEMERKT BLIEB - UND WIE ES GEFUNDEN WURDE
 *  Weiter oben (Zeile ~3022) steht "html, body { overflow-x: clip }". Das war
 *  gegen einen 100vw-Scrollbalken gedacht und tut auch, was es soll. Es hat
 *  aber zwei Folgen, die zusammen boesartig sind:
 *    1. Alles, was seitlich hinausragt, wird ABGESCHNITTEN - man kann nicht
 *       einmal hinscrollen, der Teil ist schlicht weg.
 *    2. document.scrollWidth bleibt gleich der Fensterbreite. Jede Pruefung,
 *       die "scrollWidth > innerWidth" fragt, meldet deshalb IMMER "passt".
 *  Genau so eine Pruefung hatte ich gebaut - und sie hat mir wochenlang
 *  gruenes Licht gegeben, waehrend auf /furni/2 die halbe Seite fehlte
 *  (Inhaltsspalte 575px bei 390px Fenster: Preisfeld, Absende-Knopf und der
 *  "Senden"-Knopf der Kommentare lagen ausserhalb und waren NICHT erreichbar).
 *  Richtig misst man, indem man JEDES Element nach seinem rechten Rand fragt.
 *
 *  Die Ursachen unten sind allesamt simpel - und dreimal dieselbe:
 *  Breite plus Innenabstand ohne box-sizing.
 * ========================================================================= */

/* ---- Moebelseite: Raster brach aus dem Behaelter aus --------------------- */
/* .hw-f1 ist ein Raster ohne angegebene Spalten. Die eine Spalte ist damit
   "auto" und waechst auf das BREITESTE Kind - bei einem langen Moebelnamen
   oder einem breiten Diagramm auf 547px. minmax(0,1fr) deckelt das: die
   Spalte darf nie breiter werden als der Platz, der da ist. */
.hw-f1{ grid-template-columns:minmax(0,1fr); }
.hw-f1 > *{ min-width:0; }
/* Dieselbe Falle im Kopfbereich: 232px Bild + 1fr Text. Das 1fr waechst
   ebenfalls unbegrenzt, wenn der Text nicht umbrechen kann. */
.hw-f1 .f1-hero{ grid-template-columns:232px minmax(0,1fr); }
.hw-f1 .f1-hero > *{ min-width:0; }
/* Lange Moebelnamen ohne Leerzeichen muessen brechen duerfen. */
.hw-f1 .f1-name, .hw-f1 .f1-desc{ overflow-wrap:anywhere; }

/* ---- Fusszeile: 95% Breite PLUS 40px Innenabstand ------------------------ */
/* template.css:404 setzt width:95%, modern.css:2979 legt padding:24px 20px
   darauf. Ohne box-sizing sind das 95% + 40px - auf jedem Handy rund 20px zu
   viel, und das auf JEDER Seite. */
#online_viewer_inner{ box-sizing:border-box; }

/* ---- Rangliste: Rekorde-Kacheln ----------------------------------------- */
/* Dieselbe Rechnung: 1fr Spaltenbreite plus 14px Innenabstand ringsum. */
.hw-r4 .r4-kachel{ box-sizing:border-box; min-width:0; }
.hw-r4 .r4-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:900px){ .hw-r4 .r4-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px){ .hw-r4 .r4-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---- Angebote: Karten mit fester Breite --------------------------------- */
/* general.css:1261 setzt width:365px fest - plus Raender ergibt das 447px.
   Auf dem Handy fehlte damit die ganze rechte Haelfte der Karte: Moebelbild
   UND Durchschnittspreis lagen ausserhalb und waren nicht erreichbar. */
.preview_debate_comment{ width:auto; max-width:100%; box-sizing:border-box; }
@media (max-width:760px){
  /* Der rechte Bereich (Bild + ø-Preis) sass absolut am rechten Rand der
     365px-Karte. Auf schmalen Geraeten wandert er unter den Text, statt
     hinauszuragen. */
  .preview_debate_comment_furni,
  .preview_debate_comment_price{ position:static !important; margin:8px 0 0; }
  .preview_debate_comment{ padding-bottom:8px; }
}

/* ---- Bilder duerfen grundsaetzlich nicht breiter sein als ihr Platz ------ */
/* Das Werbebanner auf /angebote ist 760px breit und wurde mitten im Wort
   abgeschnitten ("Kaufe Mö"). Eine allgemeine Regel ist hier richtig: KEIN
   Inhaltsbild soll je breiter sein als der Kasten, in dem es steht. */
#content img, .content_wrap img, #banner_box img{ max-width:100%; height:auto; }

/* ⚠️ MEINE EIGENE REGRESSION VON EBEN, sofort behoben: Die Regel
   ".hw-f1 .f1-hero{ grid-template-columns:232px minmax(0,1fr) }" steht weiter
   oben in dieser Datei OHNE Medienabfrage und damit NACH der Handy-Regel bei
   Zeile 4532, die dort eine einzige Spalte will. Sie hat diese ueberstimmt -
   dadurch stand auf dem Handy wieder ein 232px-Bild neben dem Text und der
   Kopf war breiter als das Fenster. Gemessen: rechter Rand bei 532px statt
   390px. Reihenfolge schlaegt Medienabfrage, wenn die Auswahlstaerke gleich
   ist - deshalb hier noch einmal, hinter allem anderen. */
@media (max-width:860px){
  .hw-f1 .f1-hero{ grid-template-columns:minmax(0,1fr); }
  /* Preis und Kurs-Vertrauen standen nebeneinander (237px + 170px + Abstand
     passen nicht in 366px) und ragten hinaus, statt umzubrechen. */
  .hw-f1 .f1-preiszeile{ flex-direction:column; align-items:flex-start; gap:10px; }
  .hw-f1 .f1-vertrauen{ max-width:none; width:100%; box-sizing:border-box; }
  .hw-f1 .f1-preisblock{ min-width:0; }
  .hw-f1 .f1-vlabel{ overflow-wrap:anywhere; }
}

/* ---- Sehr schmale Geraete (320px, iPhone SE der ersten Reihe) ------------
   Bei 390px passt alles nebeneinander, bei 320px nicht mehr. Gemessen: die
   beiden Abstimmknoepfe brauchen zusammen 331px, die Kennzahlenkacheln je
   158px - beides ragte hinaus und wurde abgeschnitten. */
@media (max-width:400px){
  /* "Sollte steigen" / "Sollte sinken" untereinander. */
  .hw-f1 .c1-buttons{ flex-direction:column; width:100%; }
  .hw-f1 .c1-buttons .f1-vbtn{ width:100%; justify-content:center; }
  .hw-f1 .c1-vote{ flex-direction:column; align-items:stretch; }
  /* Die Kennzahlen standen hier einspaltig, weil sie ohne box-sizing im
     Raster hinausragten. Seit sie border-box haben (Block "Moebelseite am
     Handy - Runde 2" am Dateiende), passen zwei Spalten bis 360px hinunter.
     Die Regel ist deshalb entfallen - unter 360px greift dort eine eigene. */
  /* ⚠️ white-space:normal ist Pflicht - Zeile 4384 setzt nowrap, und
     dagegen richtet overflow-wrap allein gar nichts aus. Genau das war
     mein erster, wirkungsloser Versuch. */
  .hw-f1 .f1-uwert{ white-space:normal; overflow-wrap:anywhere; }
  /* Die Notloesung .r3-zulink{white-space:normal} steht nicht mehr hier:
     der Link bekommt am Dateiende eine eigene Zeile und passt dadurch
     wieder einzeilig. Umbrechen war nur das kleinere Uebel - er wurde
     dabei drei- bis vierzeilig. */
}

/* ==========================================================================
   MOEBELSEITE AM HANDY - Runde 2 (05.08.2026)
   Grundlage: eigene Bildschirmfotos bei 390px, nicht nur Messwerte.
   ========================================================================== */

/* 🔥 EIGENER FEHLER AUS RUNDE 1: rund 100px LEERE FLAECHE im Kopfkasten.
   .f1-vertrauen hat "flex:1 1 170px". In der Zeile nebeneinander (Standard)
   ist 170px eine BREITE. Ich habe die Zeile in Runde 1 auf
   flex-direction:column gestellt - und in einer Spalte ist die Flex-Basis die
   HOEHE. Aus 170px Mindestbreite wurden damit 170px Mindesthoehe, obwohl der
   Inhalt nur gut 70px braucht. Darunter klaffte das Loch, das im Bildschirm-
   foto zu sehen war. Merksatz: flex-basis wechselt mit der Laufrichtung die
   Bedeutung - wer die Richtung dreht, muss jedes flex:… im Block nachsehen. */
@media (max-width:860px){
  .hw-f1 .f1-vertrauen{ flex:0 0 auto; }
}

@media (max-width:760px){
  /* --- Kennzahlen: zwei nebeneinander statt fuenf hohe Kacheln -------------
     Fuenf Kacheln untereinander sind rund 370px Scrollweg fuer fuenf Zahlen.
     Zweispaltig passt bequem: (390 - 34) / 2 = 178px je Kachel.
     ⚠️ box-sizing ist dabei Pflicht. Im Raster bestimmt 1fr die SPUR, der
     Innenabstand kommt bei content-box OBEN DRAUF - genau daran sind die
     Kacheln vorher hinausgeragt, weshalb ich sie einspaltig gestellt hatte.
     Mit border-box ist die Einspaltigkeit nicht mehr noetig. */
  .hw-f1 .f1-stat{ box-sizing:border-box; min-width:0; padding:8px 10px; }
  .hw-f1 .f1-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .hw-f1 .f1-slabel{ font-size:9.5px; letter-spacing:.04em; }

  /* --- Besitzer: drei statt vier Kacheln ---------------------------------
     Vier Spalten ergeben 69px je Kachel. Habbo-Namen sind laenger als das,
     also stand ueberall "MOD-Ex…", "ChiliChe…", "LilDevilc…". Drei Spalten
     geben 95px - damit passen die allermeisten Namen ganz. */
  .hw-f1 .o1-raster{ grid-template-columns:repeat(3,minmax(0,1fr)); }

  /* --- Preisverlauf: war ein flacher Streifen ----------------------------
     Das Diagramm hat viewBox 740x205 und "height:auto", skaliert also fest im
     Verhaeltnis 3,6:1. Bei 300px Breite bleiben 83px Hoehe - ein Strich, in
     dem man nichts abliest. Dazu die Achsenbeschriftung: 9px im viewBox
     schrumpfen auf 9 x (300/740) = 3,6px, also unleserlich.
     Der Kasten drumherum ist bereits seitlich rollbar (overflow-x:auto, so
     war es gedacht). Also lassen wir das Diagramm seine Groesse behalten und
     verschieben es seitlich - 560px Breite ergeben 155px Hoehe, und die
     Beschriftung wird mitvergroessert, damit sie am Ende bei rund 11px
     landet statt bei 3,6px. */
  .hw-chart{ min-width:560px; }
  .hw-chart-axis, .hw-chart-marker{ font-size:14px; }
  .hw-chart-wrap{ -webkit-overflow-scrolling:touch; }

  /* --- "★ Bester Preis" lag auf dem Preis --------------------------------
     Das Abzeichen haengt absolut oben rechts (top:-8px), und dort steht am
     Handy die Zahl. Auf dem grossen Bildschirm ist daneben Platz, am Handy
     nicht. Es wandert deshalb in den normalen Fluss und bekommt eine eigene
     Zeile ueber der Karte.
     ⚠️ Zeile 4273 setzt .angebot > * auf position:relative - die Regel hier
     ist genauer (Klasse statt *) und gewinnt deshalb. */
  .hw-sl .angebot > .beste-tag{ position:static; flex:0 0 100%; width:max-content;
    margin:0; align-self:flex-start; }

  /* Der Kontakt-Knopf klebte rechts, links daneben blieb ein leeres Band von
     rund 157px. Am Handy nimmt er die ganze Zeile - grosses Tippziel statt
     Leerraum. */
  .hw-sl .angebot .ang-aktion{ justify-content:stretch; }
  .hw-sl .angebot .ang-aktion .sl-int{ flex:1; min-height:38px; }
}

/* Bei 320px werden zwei Kennzahlen-Spalten zu eng - dort wieder eine. */
@media (max-width:360px){
  .hw-f1 .f1-stats{ grid-template-columns:minmax(0,1fr); }
  .hw-f1 .o1-raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Das Diagramm ist am Handy breiter als das Fenster und wird gewischt. Ohne
   Hinweis sieht man das nicht - der rechte Rand blendet deshalb weich aus.
   ⚠️ Bewusste Abwaegung: Schoener waere ein Diagramm, das bei 390px ganz
   hineinpasst. Dafuer muesste price_chart_svg() eine eigene viewBox fuer
   schmale Geraete ausgeben (der Server kennt die Fensterbreite nicht, und
   preserveAspectRatio="none" verzerrt die Beschriftung). Das ist ein
   Umbau am PHP, kein CSS - bis dahin ist Wischen die ehrlichere Loesung
   als ein 83px flacher Strich, in dem man nichts erkennt. */
@media (max-width:760px){
  .hw-chart-wrap{ -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
                          mask-image:linear-gradient(90deg,#000 88%,transparent); }
}

/* ==========================================================================
   KOPFBEREICH AM HANDY KOMPAKTER (05.08.2026)
   Gemessen bei 390x820: Der Kopf brauchte 411px, bevor der erste Inhalt kam
   (#header 349 + Navigationsleiste 62). Das ist die halbe Bildschirmhoehe -
   auf JEDER Seite. Wer die Startseite oeffnet, sieht zuerst nur Kopf.
   Nichts wird entfernt, alles nur enger gestellt: Logo kleiner, Schrift
   kleiner, Abstaende knapper. Am Rechner bleibt alles wie es war.
   ========================================================================== */
@media (max-width:900px){
  #header_image{ padding:10px 14px 8px !important; gap:6px !important; }
  /* ⚠️ NICHT width:auto - das Logo ist ein <a> ohne Inhalt, das Bild haengt
     im Hintergrund. Ohne feste Breite faellt der Link auf 0px zusammen und das
     Logo verschwindet. Genau das ist mir hier passiert (gemessen: 0x54px am
     Handy, am Rechner unauffaellig, weil die Regel erst unter 900px greift).
     Das Seitenverhaeltnis stammt aus der gemessenen Groesse am Rechner
     (137x104 = 1,317) und wird beibehalten. */
  /* ⚠️ flex:0 0 auto ist hier PFLICHT, nicht Zierde. Zeile 3356 setzt
     "flex:0 0 137px !important". Solange der Kopf eine Zeile ist, sind das
     137px BREITE. Ab 900px stellt Zeile 2853 ihn auf flex-direction:column -
     und dann sind dieselben 137px die HOEHE und schlagen jedes height:.
     Gemessen: zwischen 761 und 900px war das Logo 82x137 statt 82x62. Unter
     760px fiel es nicht auf, weil Zeile 4737 dort bereits flex:0 0 auto
     setzt. Das ist heute die DRITTE Stelle mit diesem Muster (siehe auch
     .f1-vertrauen) - bei diesem Entwurf gilt: wer die Laufrichtung dreht,
     muss jedes flex-basis im Block nachziehen. */
  #logolink{ height:62px !important; width:82px !important; flex:0 0 auto !important;
    background-size:contain !important; }
  .hw-claim .hw-claim-titel{ font-size:17px; }
  .hw-claim p{ margin-top:2px; }
  .hw-claim-stand{ margin-top:4px; }

  /* Die Begruessungskarte.
     ⚠️ Erster Versuch war falsch herum: Ich habe den winkenden Habbo von
     110 auf 78px verkleinert UND Innenabstand ergaenzt - danach war die
     Karte 151px statt 139px, also GROESSER. Grund: die Hoehe kam gar nicht
     vom Habbo, sondern vom Inhalt daneben (137px, zwei Knopfreihen). Der
     Abstand kam einfach oben drauf. Gemessen statt geraten, dann korrigiert:
     kein Zusatzabstand, dafuer flachere Knoepfe. 38px bleiben bequem mit
     dem Finger zu treffen. */
  .hw-winker{ height:78px !important; }
  .hw-pk-inhalt .hw-pk-knopf, .hw-profilkarte a[class*=knopf], .hw-profilkarte .hw-pk-aktion a{
    min-height:38px; padding-top:6px; padding-bottom:6px; }
}

/* Unter 520px ist der Untertitel entbehrlich - die Ueberschrift darueber
   sagt dasselbe in kuerzer, und die Zeile kostet volle 18px. */
@media (max-width:520px){
  .hw-claim p{ display:none; }
  #logolink{ height:54px !important; width:71px !important; }
}

/* ==========================================================================
   ANMELDESEITE (05.08.2026)
   ========================================================================== */
/* Ersetzt den fest verdrahteten weissen Kasten (siehe Begruendung in
   login.php). Gleiche Karte wie im Rest der Seite - damit stimmt sie auch im
   hellen Entwurf, weil beide Farben aus denselben Variablen kommen. */
#registration_image.hw-neuhier{
  box-sizing:border-box; width:auto; float:none; margin:0 0 14px; padding:14px 16px;
  text-align:left; background:var(--hw-card, #101c30); color:var(--hw-text, #e6eef8);
  border:1px solid var(--hw-border, #20334e); border-radius:12px;
}
#registration_image.hw-neuhier h1{ margin:0 0 6px; font-size:18px; }
#registration_image.hw-neuhier p{ margin:0; font-size:13px; color:var(--hw-text-soft, #93a8c4); }

/* Das Ankreuzkaestchen "Eingeloggt bleiben" war 13x13px - mit dem Finger
   kaum zu treffen. Das Kaestchen selbst bleibt klein (so sieht es aus), aber
   die BESCHRIFTUNG DANEBEN wird zur Trefferflaeche: <label for="..."> schaltet
   das Kaestchen mit, also reicht ein grosszuegiger Innenabstand am Label. */
#login_box input[type=checkbox]{ width:20px; height:20px; }
#login_box .check{ display:inline-block; padding:9px 6px 9px 2px; cursor:pointer; }

@media (max-width:760px){
  /* Am Handy braucht es keine zwei Wege nebeneinander - Formular und
     OldHabbo-Knopf stehen untereinander und nutzen die volle Breite. */
  #login_box{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }
  #login_background{ height:auto !important; padding-bottom:12px; }
  .hw-oh-knopf{ display:block; text-align:center; }
}

/* ==========================================================================
   MOBIL-RUNDE 3 (05.08.2026) - oeffentliche Seite
   Aus einer Pruefung durch 14 Agenten: sieben Seitenbereiche gemessen, jede
   Korrektur danach von einem zweiten Agenten adversarial gegengeprueft
   (Selektor vorhanden? Rechner-Rueckschritt? von spaeteren Regeln
   ueberstimmt? blosser Fehlalarm lokaler Testdaten?).
   Die Zeilenangaben in den Kommentaren beziehen sich auf den Stand VOR
   diesem Block.
   ========================================================================== */
/* [/rangliste] Rekord-Kachel Meistbeachtet auf 30px zusammengequetscht */
/* ---- Rangliste-Rekorde: Geisterspalte beseitigen ------------------------
   Zeile 3896 setzt fuer Handybreite grid-column:auto, wird aber von den
   Zeilen 3908/3909 ("grid-column:span 2", ohne Medienabfrage, gleiche
   Auswahlstaerke, spaeter notiert) still ueberstimmt. Die drei breiten
   Kacheln erzeugten damit eine zweite Rasterspalte, in der "Meistbeachtet"
   auf gemessene 30px Breite zusammenfiel - Text nur noch als Schnipsel.
   Zeile 5093 wiederholt nur die Spaltenangabe, nicht die Ruecksetzung. */
@media (max-width:560px){
  .hw-r4 .r4-gross,
  .hw-r4 .r4-breit{ grid-column:auto; grid-row:auto; }
}

/* [/rangliste] Link Zu deinem Profil als Tippziel zu klein */
/* ---- Rangliste: Link im Kasten "Dein Rang" -------------------------------
   Zeile 3732 gibt dem Link keine Hoehe - er ist nur so hoch wie seine
   11,5px-Schrift. Gemessen 122x15px bei 401, 560 UND 700px.
   Diese erste Regel steht bewusst OHNE Medienabfrage: sie schliesst damit
   auch den Bereich 561-760px, in dem die 560er-Abfrage nicht greift und in
   dem der Befund die 15px faelschlich als behoben ausgab. Am Rechner
   veraendert sie NICHTS am Layout - nachgemessen bei 700px und 1280px: der
   Link wird von 122x15 auf 122x32, die Bannerhoehe bleibt exakt 56px, es
   verschiebt sich keine einzige Kante. Nur die Trefferflaeche waechst. */
.hw-r3 .r3-zulink{ display:inline-flex; align-items:center; min-height:32px; }

/* ---- Rangliste: Kasten "Dein Rang" am Handy ------------------------------
   Zeile 3712 laesst die Zeile nicht umbrechen, Zeile 3732 zieht den Link per
   margin-left:auto nach rechts. Zu dritt nebeneinander blieben der mittleren
   Textspalte gemessene 137px (390px) bzw. 91px (320px). Der Link wandert
   deshalb in eine eigene, volle Zeile darunter - dadurch passt er wieder
   einzeilig und white-space:nowrap kann bleiben.
   Wichtig: .r3-rang braucht flex-basis 0 (nicht auto), sonst beansprucht es
   seine Inhaltsbreite, bricht selbst um und der Avatar bleibt allein in der
   ersten Zeile. */
@media (max-width:560px){
  .hw-r3 .r3-banner{ flex-wrap:wrap; row-gap:6px; }
  .hw-r3 .r3-rang{ flex:1 1 0; min-width:0; }
  .hw-r3 .r3-zulink{ flex:1 0 100%; margin-left:0; white-space:nowrap; display:flex; }
}

/* [/rangliste] Beschriftung Wertvollstes Stueck mit 9,5px zu klein */
/* ---- Rangliste: Stueck-Beschriftung lesbar machen ------------------------
   Zeile 3789 setzt 9,5px in Grossbuchstaben mit gesperrter Laufweite und der
   schwaechsten Textfarbe - die kleinste Schrift beider Seiten. 10,5px reichen
   aus, ohne dass die Zeile umbricht (bei 320px nachgemessen). */
@media (max-width:560px){
  .hw-r3 .r3-stueck small{ font-size:10.5px; }
}

/* [/news/1] Kommentartext in 118px-Spalte gequetscht, Name laeuft unter die Knoepfe */
/* Am Dateiende von style/2014/modern.css anhaengen.
   Geprueft: keine spaetere Regel und kein !important fuer .hw-dc-detail/
   .hw-dc-body/.hw-dc-actions; Auswahlstaerke 0-2-0 bzw. 0-3-0 schlaegt die
   Grundregeln Z.2162/2132/2168. Die .hw-f1-Regeln ab Z.4458 betreffen nur
   furni.php und werden durch die Einschraenkung auf .hw-news-komm ohnehin
   nicht beruehrt. */
@media (max-width:480px){
  /* Der Kommentartext hatte am Handy nur 118px von 292px Kartenbreite (bei
     320px sogar 48px) - Kopfbild und die beiden Aktionsknoepfe sind
     unschrumpfbar und fressen die Zeile auf; bei 320px schiebt sich der
     Name zusaetzlich 26px unter die Knoepfe. Deshalb duerfen die Aktionen
     hier umbrechen und bekommen eine eigene Zeile unter dem Text.
     ⚠️ Die Karte bleibt flex-direction:row - flex-basis:100% ist hier also
     eine BREITE, keine Hoehe.
     ⚠️ Grenze 480px statt 560px: die Textspalte ist Fensterbreite minus
     272px, bei 480px also schon 208px. Bei 550px gemessen hat sie ohne
     Eingriff 278px - dort wuerde die Regel die Karte nur grundlos von
     70px auf 124px Hoehe aufblaehen. */
  .hw-news-komm .hw-dc-detail{ flex-wrap:wrap; align-items:flex-start; }
  .hw-news-komm .hw-dc-detail .hw-dc-body{ flex:1 1 120px; }
  .hw-news-komm .hw-dc-detail .hw-dc-actions{
    flex:0 0 100%; justify-content:flex-end; margin-top:6px;
  }
}

/* [/news/1] Reaktionsknoepfe werden auseinandergerissen */
/* Am Dateiende von style/2014/modern.css anhaengen.
   Geprueft: keine spaetere Regel und kein !important fuer
   .hw-news-react-label oder .hw-react (einzige Vorkommen Z.2322 bzw.
   Z.2323-2334); .hw-react steht laut Grep nur in news.php:150/156. */
@media (max-width:430px){
  /* 121px Frage + 2x66px Knopf + 20px Zwischenraum = 273px passen nicht in
     die 246px breite Zeile - deshalb riss der zweite Knopf ab. Die Frage
     bekommt eine eigene Zeile, damit das Knopfpaar zusammenbleibt.
     ⚠️ Grenze 430px statt 560px: bei 550px gemessen stehen beide Knoepfe
     schon von selbst nebeneinander (L205 und L277) - dort wuerde die Regel
     die Frage nur grundlos auf eine eigene Zeile schieben. */
  .hw-news-reactions .hw-news-react-label{ flex:0 0 100%; margin-right:0; }
}
@media (max-width:760px){
  /* 30px sind mit dem Finger kaum zu treffen; die Flaeche waechst ueber
     min-height, das Symbol bleibt unveraendert gross. */
  .hw-react{ min-height:40px; padding:0 16px; }
}

/* [/news/1] Autorenzeile zerfaellt in vier Bruchstuecke */
/* Am Dateiende von style/2014/modern.css anhaengen.
   ⚠️ Auswahlstaerke geprueft: .hw-news-card-meta .hw-news-sub (Z.2266,
   0-2-0) setzt in der Liste font-size:11px und schlaegt die 0-1-0-Regel
   unten - das ist unschaedlich, dort gelten ohnehin schon 11px. flex-wrap
   wird von Z.2266 nicht gesetzt und greift daher auch in der Liste. */

/* Datum (116px) + Aufrufe (79px) + 8px Abstand = 203px passten nicht in die
   188px breite Spalte. Ohne flex-wrap schrumpften beide und brachen INNEN
   um - aus zwei Angaben wurden vier Bruchstuecke. Diese drei Zeilen brauchen
   KEINE Medienabfrage: sie wirken sich nur aus, wenn der Inhalt tatsaechlich
   nicht in eine Zeile passt. Am Rechner (1280px, gemessen H15 einzeilig)
   aendert sich dadurch nichts. */
.hw-news-sub{ flex-wrap:wrap; column-gap:6px; row-gap:2px; }
.hw-news-sub > *{ white-space:nowrap; }
.hw-news-views::before{ margin-right:6px; }

@media (max-width:440px){
  /* Nur ganz schmal zusaetzlich eine Nummer kleiner - damit passen bei 390px
     sogar wieder beide Angaben in EINE Zeile (gemessen H30 -> H13).
     ⚠️ Grenze 440px statt 560px: bei 550px steht die Zeile ohne Eingriff
     schon einzeilig (gemessen H15), dort waere die Verkleinerung grundlos. */
  .hw-news-sub{ font-size:11px; }
}

/* [/news/1] Rueckweg zur Uebersicht ist ein 15px hoher Textlink */
/* Am Dateiende von style/2014/modern.css anhaengen.
   Geprueft: nur Z.2240/2241 betreffen .hw-news-back, kein !important. */
@media (max-width:760px){
  /* War ein 15px hoher Textlink und zugleich der einzige Weg zurueck zur
     Uebersicht. 44px ist die uebliche Mindestgroesse fuer einen Fingertipp;
     die Schrift bleibt gleich, nur die Flaeche waechst. */
  .hw-news-back{
    display:inline-flex; align-items:center; min-height:44px;
    padding:0 14px; font-size:13px;
    background:var(--hw-card-2); border:1px solid var(--hw-border-strong);
    border-radius:9px;
  }
}

/* [/news/1] Titel rutscht bei laengeren Ueberschriften aus dem Banner */
/* Am Dateiende von style/2014/modern.css anhaengen.
   ⚠️ Auswahlstaerke geprueft: .hw-news-hero-cap .hw-news-title ist 0-2-0 und
   schlaegt damit auch das spaetere .hw-news-title{font-size:26px} aus Z.2227. */
@media (max-width:460px){
  /* Der Titel hing oben fest und wuchs nach unten aus dem Banner heraus.
     Mit den echten Live-Ueberschriften gemessen: bei 320px ragen ALLE DREI
     zwischen 25 und 55 Pixel unter das 85px hohe Banner und legen sich ueber
     den Artikeltext. Jetzt haengt die Beschriftung UNTEN und waechst nach
     oben ins Bild hinein; der Verlauf dreht entsprechend mit.
     ⚠️ Die kleinere Schrift ist zwingend, nicht bloss Kosmetik: .hw-news-article
     hat overflow:hidden (Z.2205) - nach unten verankert allein wuerde die
     Kappe oben abgeschnitten statt unten.
     ⚠️ Grenze 460px statt 560px: bei 550px gemessen ist das Banner 174px hoch
     und die Kappe 80px - dort wuerde die Regel den Titel grundlos von 26px
     auf 16px verkleinern. Ein dreizeiliger Titel passt rechnerisch ab 462px. */
  .hw-news-hero-cap{
    top:auto; bottom:0; padding:10px 14px 11px;
    background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.45) 60%, rgba(0,0,0,0));
  }
  .hw-news-hero-cap .hw-news-title{
    font-size:16px; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* [/news/1] Knopf 'Kommentar veroeffentlichen' nur 29px hoch */
/* Am Dateiende von style/2014/modern.css anhaengen.
   Auswahlstaerke 0-1-1 schlaegt .hw-dc-btn (0-1-0) aus Z.2190. */
@media (max-width:760px){
  /* 29px sind mit dem Finger schlecht zu treffen; die Schrift bleibt gleich,
     nur die Trefferflaeche waechst. */
  .hw-news-komm-form button{ min-height:40px; padding-left:16px; padding-right:16px; }
}

/* [/info/team] Dienstausweis ragt unterhalb 360px beidseitig 35px aus dem Inhaltskasten - haelt vollstaendig stand, live gegengeprueft. */
/* ==========================================================================
   TEAM: Dienstausweis darf nicht breiter sein als sein Kasten
   ==========================================================================
   .hw-tl .ausweis (Zeile 4042) hat width:292px fest. Das passt auf genau
   einer Fensterbreite (360px); bei 320px stand die Karte 35px links UND
   rechts ueber den Inhaltskasten hinaus und lag ueber dessen Rahmen.
   Gemessen 320px vorher: ausweis 13..307 gegen Inhalt 48..272.

   ⚠️ FLEX-RICHTUNG GEPRUEFT: .haenger-reihe steht ab 760px auf
   flex-direction:column (Zeile 4102). .haenger hat KEINE flex-Kurzform,
   erbt also flex:0 1 auto - die Basis ist in der Spalte die HOEHE. width
   ist dort die Querachse und damit unbedenklich. align-items:center der
   Reihe wuerde die Karte sonst auf Inhaltsbreite schrumpfen, deshalb
   width:100%.
   ⚠️ SPAETERE REGELN GEPRUEFT: nach Zeile 4042 setzt keine weitere Regel
   eine Breite auf .ausweis (4090 und 4095 setzen nur transform/border).
   Gleiche Auswahlstaerke + spaetere Stelle = diese Regel gewinnt, kein
   !important noetig. */
@media (max-width:760px){
  .hw-tl .haenger{ width:100%; max-width:292px; }
  .hw-tl .ausweis{ width:100%; }
}

/* [/info/team] Textspalte auf dem Ausweis nimmt nur ihre Inhaltsbreite, rechts und unten bleibt Flaeche leer - haelt stand, live nachgemessen. */
@media (max-width:760px){
  /* Textspalte nimmt die Restbreite des Ausweises statt nur ihre
     Inhaltsbreite - gemessen live: 34px ungenutzte Flaeche rechts fielen
     damit auf 0, "Im Team seit: 19.07.2026" bleibt einzeilig.
     justify-content teilt den Rest-Leerraum gleichmaessig ueber und unter
     den Text, statt ihn als Loch unter der letzten Zeile stehen zu lassen
     (46px unten -> 32px oben / 32px unten).
     ⚠️ .koerper (Zeile 4053) ist flex-direction:row, dort ist die
     flex-Basis die BREITE - genau das ist hier gewollt. .daten selbst ist
     eine Spalte, deshalb wirkt justify-content dort senkrecht. */
  .hw-tl .daten{ flex:1 1 auto; min-width:0; justify-content:center; }
}

/* [/habbo/ChiliCheese, /habbo/MOD-Exo3D] Profilkopf bricht am Handy um, 166px bleiben neben der Figur leer - haelt stand, live auf beiden Profilen nachgemessen. */
/* ==========================================================================
   PROFIL: Kopf am Handy wieder zweispaltig
   ==========================================================================
   .hw-profil-text hat flex-basis 240px. Zusammen mit der auf 86px
   verkleinerten Buehne und 16px Abstand ergibt das 344px Bedarf bei nur
   254px verfuegbarer Breite (390px Fenster) - der Text brach also um und
   die Figur stand allein in einer Zeile mit 166px toter Flaeche daneben.
   Die Buehne ist ab 560px Fensterbreite nur noch 86px breit (Zeile 2429),
   also passt eine 150px-Basis daneben.

   ⚠️ FLEX-RICHTUNG GEPRUEFT: .hw-profil-kopf ist und bleibt
   flex-direction:row (Zeile 2411, keine Medienabfrage aendert das) - die
   flex-Basis ist hier also eine BREITE, keine Hoehe.
   ⚠️ SPAETERE REGELN GEPRUEFT: .hw-profil-text kommt in der ganzen Datei
   nur an Zeile 2436 vor, kein !important im Weg.
   ⚠️ Unterhalb von ~360px bricht der Kopf weiterhin um - das ist dort auch
   richtig, 184px Kopfbreite reichen fuer keine zwei Spalten. */
@media (max-width:560px){
  .hw-profil-text{ flex:1 1 150px; }
}

/* [/info/team] Ueberschrift "Das Team" ist 16px/400 - Befund stimmt, aber die Korrektur greift ohne Medienabfrage und aendert damit die abgenommene Rechner-Ansicht. */
/* ==========================================================================
   TEAM: Seitenueberschrift am Handy wieder als Ueberschrift erkennbar
   ==========================================================================
   "Das Team" war 16px/400 - nur 4,5px groesser als der Erklaersatz darunter
   und schwaecher als der 14px/800-Name auf den Ausweisen. font-weight muss
   ausdruecklich gesetzt werden, weil template.css:4 alle Ueberschriften auf
   normal zuruecksetzt (Zeile 3562 setzt nur font-size und color).

   ⚠️ MEDIENABFRAGE IST PFLICHT: ohne sie sprang die Ueberschrift auch am
   Rechner von 16px/400 auf 20px/700 (bei 1280px nachgemessen) - eine
   unbestellte Aenderung an der abgenommenen Rechner-Ansicht. Mit der
   Abfrage bleibt der Rechner nachweislich bei 16px/400.

   ⚠️ NUR .hw-t3 ansprechen. Zeile 3562 fasst
   ".hw-d2 .s-kopf h2, .hw-t3 .s-kopf h2, .hw-r3 .s-kopf h2" zusammen -
   .hw-d2 ist die Debatte, .hw-r3 die Rangliste. (Geprueft: .hw-t3 kommt
   ausschliesslich in team.php vor.)
   ⚠️ .s-kopf ist display:flex mit align-items:baseline und flex-wrap:wrap
   (Zeile 3561); der Erklaersatz rutscht am Handy sauber darunter. */
@media (max-width:760px){
  .hw-t3 .s-kopf h2{ font-size:20px; font-weight:700; line-height:1.2; }
}

/* [/habbo/ChiliCheese, /habbo/MOD-Exo3D] Stueckzahl 9,5px mit 3,55:1 Kontrast - Befund und Kontrastrechnung stimmen exakt, aber die Korrektur greift ohne Medienabfrage bis in die Rechner-Ansicht. */
/* ==========================================================================
   PROFIL: Stueckzahl und Einzelpreis am Handy lesbar machen
   ==========================================================================
   "8x im Besitz" war 9,5px in --hw-text-mute. Nachgerechneter Kontrast auf
   dem Kartengrund rgb(16,28,48): 3,55:1 - unter den geforderten 4,5:1, und
   dazu die kleinste Schrift der Seite. --hw-text-soft erreicht 7,02:1.

   ⚠️ MEDIENABFRAGE IST PFLICHT: ohne sie wuchsen Stueckzahl und Einzelpreis
   auch am Rechner auf 11,5px und wechselten die Farbe (bei 1280px
   nachgemessen). Die Rechner-Ansicht ist abgenommen und bleibt so.
   ⚠️ Bewusst ueber ".hw-profil ~ .hw-raster" auf die Profilseite begrenzt:
   die 9,5px sind laut Kommentar bei modern.css:1048 fuer das VIERSPALTIGE
   Raster mit ~130px schmalen Karten gedacht, wo "13x im Hotel" sonst
   abgeschnitten wuerde. Auf der Profilseite ist die Karte 292px breit.
   (Geprueft: .hw-raster kommt auch in index.php vor - dort aber OHNE
   .hw-profil, das Startseiten-Raster bleibt also unberuehrt. .hw-profil
   steht in profil.php:95 immer vor .hw-raster, beide sind Geschwister.
   Der Selektor trifft live 39 bzw. 16 Elemente.) */
@media (max-width:760px){
  .hw-profil ~ .hw-raster .hw-umlauf,
  .hw-profil ~ .hw-raster .hw-karte-je{ font-size:11.5px; color:var(--hw-text-soft); }
}

/* [/user/furnis] Kennzahlen-Leiste bricht um, der zweite Trennstrich bleibt allein am Zeilenende stehen. */
@media (max-width:460px){
  .hw-m1 .bilanz{ column-gap:16px; row-gap:6px; }
  .hw-m1 .bilanz .trenner{ display:none; }
}

/* [/user/furnis] Preis-Eingabefeld und Speichern-Knopf nur 34px hoch. */
/* =========================================================================
 *  MEINE MOEBEL - Preis aendern: Feld und Knopf gross genug   (05.08.2026)
 * -------------------------------------------------------------------------
 *  Beide waren 34px hoch - die Nachbarn im selben Kasten sind 38 bis 40px,
 *  die Navigation 44px. Und es ist die wichtigste Handlung der Seite.
 *  ⚠️ box-sizing ist Pflicht: .preis-feld rechnet in content-box (gemessen),
 *  eine Mindesthoehe von 44px ergaebe dort sonst 44+12+2 = 58px.
 *  ⚠️ padding oben/unten auf 0: die Mindesthoehe uebernimmt jetzt die Hoehe,
 *  sonst waeren es wieder 44 + Innenabstand.
 * ========================================================================= */
@media (max-width:760px){
  .hw-m1 .preis-feld{
    box-sizing:border-box; min-height:44px;
    padding-top:0; padding-bottom:0;
  }
  .hw-m1 .speichern{
    box-sizing:border-box; min-height:44px;
    padding-top:0; padding-bottom:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
}

/* [/user/furnis] Stift- und Papierkorb-Knopf heben sich kaum vom Kartenhintergrund ab. */
/* =========================================================================
 *  MEINE MOEBEL - Stift und Papierkorb am Handy sichtbar machen (05.08.2026)
 * -------------------------------------------------------------------------
 *  Gemessen: Rahmen #20334e auf Kartengrund #101c30 = 1.35:1. Fuer ein
 *  Bedienelement sind 3:1 gefordert. Jetzt wie der Stepper daneben
 *  aufgebaut (eigene dunkle Flaeche + hellerer Rahmen): Rahmen 3.56:1,
 *  Symbol auf der Flaeche 7.71:1.
 *  ⚠️ MIT Medienabfrage - dieselbe Grenze wie der bestehende Block ab
 *  Zeile 5012, der schon .werkzeug/.step-knopf/.glocke vergroessert. Ohne
 *  sie aendert sich auch die abgenommene Rechner-Ansicht.
 *  ⚠️ Groesse NICHT anfassen: die 38x38px kommen aus Zeile 5028 mit
 *  !important und sind bereits richtig.
 *  ⚠️ Zum Nachmessen transition:none mitgeben - .werkzeug blendet
 *  color/border-color/background ueber, sonst liest man den alten Wert.
 * ========================================================================= */
@media (max-width:760px){
  .hw-m1 .werkzeug{
    background:#0a1220;
    border-color:#5c7396;
    color:#93a8c4;
  }
}

/* [/user/furnis] Betrag und Einheit kleben aneinander: '60.000Taler'. */
/* Betrag und Einheit auf 'Meine Moebel': 2px Abstand (Zeile 4139) sind bei
   19px fetter Schrift kein sichtbarer Abstand - gemessen stand dort
   '60.000Taler'. Auf /user/beobachtungen steht an derselben Stelle ein
   echtes Leerzeichen im Text; hier wird es ueber den Abstand nachgeholt,
   damit die Auszeichnung unveraendert bleibt.
   ⚠️ MIT Medienabfrage: ohne sie waechst die Luecke auch auf dem Rechner
   von 2 auf 6px (bei 1280px nachgemessen) - und die Ansicht ist abgenommen. */
@media (max-width:760px){
  .hw-m1 .preis small{ margin-left:6px; }
}

/* [/habbo/*] Kennzahl-Kacheln standen einzeln untereinander */
/* .hw-profil-zahlen > div hat flex:1 1 110px und padding 9px 12px. Da
   box-sizing NICHT global auf border-box steht, war die Aussenbreite
   110+24 = 134px; zwei Kacheln (278px) passten nicht in die 254px des
   Kastens, also stand jede allein in einer Reihe - 201px Hoehe fuer drei
   kurze Zahlen. Mit border-box: 110+10+110 = 230px, zwei je Reihe, 135px.
   Auf breiten Fenstern aendert sich nichts, dort passen ohnehin alle drei
   nebeneinander. (.hw-profil-zahlen kommt nur in profil.php vor.) */
.hw-profil-zahlen > div{ box-sizing:border-box; }

/* [/user/beobachtungen] Konto-Kasten quetschte den Text */
/* Gemessen bei 320px: fuer den Text blieben 16px, die Woerter liefen unter
   den Knopf. Grund war NICHT das fehlende flex-wrap (das stand schon in der
   Medienabfrage bei Zeile 4199), sondern min-width:0 am Textblock: solange
   der Text bis auf 0 nachgibt, kommt es nie zu einem Umbruch. Deshalb hier
   eine echte Untergrenze - erst dadurch wirkt das Umbrechen.
   ⚠️ box-sizing am Knopf ist Pflicht: mit 7px/14px Innenabstand und
   flex-basis 100% stuende er sonst 30px ueber den Kastenrand hinaus. */
@media (max-width:600px){
  .hw-b1 .konto{ flex-wrap:wrap; row-gap:10px; align-items:center; }
  /* 150px ist die gemessene Untergrenze, ab der die Ueberschrift
     "OldHabbo-Konto verknuepfen?" in hoechstens zwei Zeilen passt. */
  .hw-b1 .konto-text{ flex:1 1 150px; min-width:150px; }
}
@media (max-width:480px){
  /* 480 statt 520: bei 480px passen Symbol (36) + Text (150) + Knopf (144)
     + Abstaende rechnerisch noch nebeneinander - nachgemessen. Erst darunter
     braucht der Knopf eine eigene Zeile. */
  .hw-b1 .konto-cta{ flex:1 0 100%; box-sizing:border-box; text-align:center; }
}

/* [/user/beobachtungen, /user/furnis] Fehlendes Moebelbild */
/* GLEICHER Platzhalter wie im Glockenfenster (.gf-bild-leer) - bewusst kein
   zweites Symbol, zwei Platzhalter-Sprachen auf derselben Seite fallen auf.
   Der Raritaetsschimmer bleibt erhalten, weil background-image gar nicht
   angefasst wird. Chip und Glocke stoert place-items nicht, beide sind
   absolut positioniert. */
.hw-b1 .buehne.hw-ohne-bild,
.hw-m1 .buehne.hw-ohne-bild{ display:grid; place-items:center; }
.hw-b1 .buehne.hw-ohne-bild::before,
.hw-m1 .buehne.hw-ohne-bild::before{ content:"\25C6"; font-size:30px; color:#2c4a70; }


/* [/angebote] Bild-/Preisstreifen haengt 114px unter der Karte heraus */
/* ---- Angebotskarten am Handy: Hoehe dem Inhalt folgen lassen -------------
   general.css:1262 gibt der Karte feste 120px Hoehe, general.css:1272/1273
   dem Text feste 230x75px. Sobald modern.css:5104 die Bild-/Preisbox aus der
   absoluten Lage in den Fluss holt, passt sie nicht mehr in die 120px und
   haengt gemessene 114px unter der Karte - bei der letzten Karte sogar aus
   dem Seitenbehaelter. Alle drei festen Masse muessen zusammen aufgehoben
   werden, einzeln bringt es nichts.
   height braucht !important, weil general.css:1262 dieselbe Auswahlstaerke
   hat und ohne Kennzeichnung die Reihenfolge entscheidet. */
@media (max-width:760px){
  /* ⚠️ NICHT die Hoehe in angebote.php Zeile 13 loeschen. Die Karten sind
     float:left und #content hat keinen Clearfix - auf dem Rechner faellt der
     Kasten dann von 1300px auf gemessene 269px zusammen, waehrend die Karten
     bis 1006px weiterlaufen und sichtbar unten heraushaengen. Hier greift die
     Aufhebung nur unter 760px, der abgenommene Rechner bleibt unangetastet.
     Noetig ist sie trotzdem: bei 320px braucht der Inhalt gemessene 1455px. */
  #content{ height:auto !important; }
  .preview_debate_comment{ height:auto !important; float:none; width:auto; margin:6px 0; }
  .preview_debate_comment_text,
  .preview_debate_comment_text.mit-kopf{ width:auto; height:auto; overflow:visible; }
  .preview_debate_comment_furni{
    position:static !important; margin:6px 0 0;
    width:auto; height:auto; min-height:40px;
    /* background-size steht als Stilangabe direkt am Element (angebote.php:49)
       und laesst sich nur mit !important ueberschreiben. */
    background-color:transparent; background-size:auto 34px !important;
    background-position:left center; border-radius:0;
    border-top:1px solid var(--hw-border);
    display:flex; align-items:center; justify-content:flex-end;
    padding:5px 10px 5px 44px; box-sizing:border-box; }
  .preview_debate_comment_price{
    position:static !important; margin:0; width:auto; height:auto;
    line-height:1.3; text-align:right; font-weight:700;
    color:var(--hw-link); }
}